*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --wpo-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --wpo-font-head: 'Bricolage Grotesque', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --primary: #C8102E;
  --primary-dark: #a00020;
  --green: #1e8a4a;
  --yellow: #b07d00;
  --orange: #c05a00;
  --red: #c0392b;
  --blue: #2563eb;
  --bg: #f2f4f7;
  --card: #ffffff;
  --border: #dde1e8;
  --text: #1a1d23;
  --muted: #6b7280;
  --radius: 8px;
}

body {
  font-family: var(--wpo-font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
/* Prose-heading treatment for the CRM's major headings. Bricolage Grotesque
   feels right on page titles, modal titles and section heads; smaller
   inline labels still inherit the body sans (Work Sans). Kept scoped to h1/h2
   so tightly-packed table headings and data rows don't restyle. */
h1, h2 {
  font-family: var(--wpo-font-head);
  letter-spacing: -0.015em;
}

/* AUTH BANNER */
.auth-banner {
  background: #fff3cd;
  border-bottom: 1px solid #ffc107;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.auth-banner a { color: var(--primary); font-weight: 600; }

/* HEADER */
header {
  background: #ffffff;
  border-bottom: 2px solid var(--primary);
  padding: 0 24px;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo { height: 40px; width: auto; display: block; }

/* Wallpaper Online lockup - sitewide brand element (matches the client
   portal + the marketing site header). Mark asset lives at
   /assets/wpo-mark.png. Kept scoped to `.wpo-lockup` so it doesn't fight
   any other logo styling. */
.wpo-lockup {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: #1a1510;
  line-height: 1;
}
.wpo-lockup:hover { text-decoration: none; color: #1a1510; }
.wpo-lockup__mark { height: 34px; width: auto; display: block; flex-shrink: 0; }
.wpo-lockup__rule { width: 1px; height: 30px; background: rgba(26,21,16,0.16); display: block; flex-shrink: 0; }
.wpo-lockup__text { display: flex; flex-direction: column; gap: 5px; }
.wpo-lockup__name {
  font-family: var(--wpo-font-head);
  font-weight: 800; font-size: 18px;
  letter-spacing: -0.035em; line-height: 1;
  color: inherit;
}
.wpo-lockup__origin {
  font-family: var(--wpo-font-body);
  font-size: 8px; letter-spacing: 0.4em;
  text-transform: uppercase; color: #6c6153;
  line-height: 1;
}
@media (max-width: 768px) {
  .wpo-lockup__rule, .wpo-lockup__text { display: none; }   /* mark-only on narrow screens */
}

/* Current page title — echoes the active nav item's label. Sits centered
   between brand and greeting on desktop, replaces the (hidden) greeting on
   mobile so users always know which page they're on. */
.header-page-title {
  flex: 1; min-width: 0;
  text-align: center;
  font-size: 16px; font-weight: 600; color: var(--text);
  padding: 0 16px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .header-page-title {
    font-size: 15px;
    text-align: left;
    padding: 0 12px;
  }
}
.brand-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 4px;
  padding: 2px 8px;
  line-height: 1.4;
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.auth-status { font-size: 12px; color: var(--muted); }

/* LAYOUT */
header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-body {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 64px);
}

/* SIDEBAR */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: white;
  border-right: 1px solid var(--border);
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.nav-section {
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--border);
}
.nav-section:last-child { border-bottom: none; }
.nav-section-home { padding: 8px 0; }
.nav-home-icon { font-size: 16px; line-height: 1; }

/* "Operations" top-of-sidebar primary section — Order Status lives here. The
   team uses it constantly so we give it more visual weight than the rest. */
.nav-section-primary {
  padding: 14px 0 14px;
  background: linear-gradient(180deg, rgba(200, 16, 46, 0.04) 0%, rgba(200, 16, 46, 0) 100%);
}
.nav-item-primary {
  font-size: 15px;
  font-weight: 600;
  padding-top: 11px; padding-bottom: 11px;
}
.nav-item-primary.active { background: rgba(200, 16, 46, 0.12); color: #C8102E; }
.nav-item-primary:not(.active):hover { background: rgba(200, 16, 46, 0.06); }
.nav-primary-icon { font-size: 18px; line-height: 1; }

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 0 16px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item.active {
  background: #fff0f2;
  color: var(--primary);
  border-left-color: var(--primary);
}
.nav-label { flex: 1; }

/* HAMBURGER */
.btn-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 32px;
  height: 32px;
}
.btn-hamburger span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.2s;
}

/* SIDEBAR BACKDROP (mobile) */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 149;
}

/* MAIN */
main {
  flex: 1;
  min-width: 0;
  padding: 24px;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* TOOLBAR */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.toolbar-right { display: flex; gap: 8px; }
.toolbar-note { color: var(--muted); font-size: 13px; }

.filter-group { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.filter-group-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-right: 4px;
  display: none;                 /* hidden on desktop where grouping is implicit */
}
.filter-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
}
.filter-btn.active, .filter-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Collapsible filters — full pills on desktop, single summary on mobile.
   On desktop we hide the summary and always show the body. On mobile the
   details element behaves natively (collapsed by default, expand on tap). */
.filters-collapsible {
  flex: 1; min-width: 0;
}
.filters-collapsible > summary {
  list-style: none;
  cursor: pointer;
}
.filters-collapsible > summary::-webkit-details-marker { display: none; }
.filters-summary {
  display: none;                 /* desktop: hidden; mobile: shown via media query */
  align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #f9fafb; border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 0.12s, border-color 0.12s;
}
.filters-summary:hover { background: #f3f4f6; border-color: #d1d5db; }
.filters-collapsible[open] .filters-summary {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.filters-summary-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  flex-shrink: 0;
}
.filters-summary-active {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filters-summary-chevron {
  color: var(--muted); font-size: 12px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.filters-collapsible[open] .filters-summary-chevron { transform: rotate(180deg); }

.filters-body {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}

@media (max-width: 768px) {
  .filters-summary { display: flex; }
  .filters-body {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 8px 8px;
  }
  .filter-group { align-items: flex-start; }
  .filter-group-label { display: inline-block; margin-bottom: 2px; width: 100%; }
  .filter-btn { flex-shrink: 0; }
  .tickets-toolbar { flex-direction: column; align-items: stretch; }
  .tickets-toolbar .toolbar-right { justify-content: flex-end; }
}

/* Tasks-specific filters — same details/summary pattern as Tickets, but
   collapsed by default on ALL viewports (no auto-open on desktop). */
.tasks-filters .filters-summary,
.orders-filters .filters-summary { display: flex; }
.tasks-filters .filters-body,
.orders-filters .filters-body {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 8px 8px;
}
.tasks-filters .filter-group,
.orders-filters .filter-group { align-items: flex-start; }
.tasks-filters .filter-group-label,
.orders-filters .filter-group-label {
  display: inline-block; margin-bottom: 2px; width: 100%;
}

/* ─── Orders / Print Queue view toggle ─────────────────────────────────────
   Prominent segmented control — the top-level view switch, both viewports. */
.view-toggle {
  display: inline-flex;
  background: #f3f4f6; border: 1px solid var(--border);
  border-radius: 8px; padding: 4px; gap: 2px;
  flex-shrink: 0;
}
.view-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  border: none; background: transparent;
  border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: #4b5563;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.view-toggle-btn:hover { color: #111827; }
.view-toggle-btn.active {
  background: #fff; color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px var(--border);
}
@media (max-width: 768px) {
  .orders-toolbar { flex-direction: column; align-items: stretch; }
  .view-toggle { width: 100%; }
  .view-toggle-btn { flex: 1; justify-content: center; padding: 10px 12px; font-size: 15px; }
  .orders-toolbar .toolbar-right { justify-content: flex-end; }
}

/* BUTTONS */
.btn {
  padding: 7px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: white; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg); }
.btn-ghost { background: none; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg); }
.btn-success { background: #16a34a; color: white; }
.btn-success:hover { background: #15803d; }
.btn-xero { background: #13B5EA; color: white; border: none; }
.btn-xero:hover { background: #0fa3d4; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-danger { background: #fdecea; color: var(--red); border: 1px solid #f5c6c3; }
.btn-danger:hover { background: #f5c6c3; }
.btn-success { background: #e8f5ed; color: var(--green); border: 1px solid #b7dfca; }
.btn-success:hover { background: #b7dfca; }
.btn-warning { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.btn-warning:hover { background: #fed7aa; }

/* CARDS */
.card-list { display: flex; flex-direction: column; gap: 10px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.card-top { display: flex; align-items: flex-start; gap: 14px; }

.card-notes {
  font-size: 13px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  padding: 5px 10px;
  margin-bottom: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

.inline-thread {
  border-top: 1px solid var(--border);
  margin: 10px -16px -16px;
}
.inline-thread-inner { padding: 0 16px 12px; }
.inline-thread-notes {
  background: #fef3c7;
  color: #92400e;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 10px 0 4px;
}
.thread-item { border-top: 1px solid var(--border); }
.thread-item-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
  user-select: none;
}
.thread-item-from { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-item-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.thread-item-chevron { font-size: 10px; color: var(--muted); width: 14px; text-align: center; }
.thread-item-body {
  font-size: 12px;
  white-space: pre-wrap;
  color: var(--text);
  max-height: 280px;
  overflow-y: auto;
  line-height: 1.5;
  padding-bottom: 10px;
  word-break: break-word;
}

.urgency-bar {
  width: 4px;
  min-height: 50px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
}
.urgency-good    { background: var(--green); }
.urgency-warn    { background: var(--yellow); }
.urgency-urgent  { background: var(--orange); }
.urgency-overdue { background: var(--red); }
.urgency-done    { background: #d1d5db; }
.urgency-snoozed { background: #93c5fd; }

/* Snoozed card — slightly muted */
.card-snoozed { opacity: 0.82; }
.card-snoozed:hover { opacity: 1; }

/* Snooze label in card-meta */
.snooze-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #1d4ed8;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 1px 7px;
}

.card-body { flex: 1; min-width: 0; }
.card-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.card-meta { color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.card-meta span { display: flex; align-items: center; gap: 3px; }
.card-summary { font-size: 13px; color: #444; white-space: pre-wrap; word-break: break-word; }

.card-actions { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

/* INQUIRY LIST */
.inq-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.inq-list:empty { display: none; }

.inq-row { border-bottom: 1px solid var(--border); }
.inq-row:last-child { border-bottom: none; }

.inq-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
.inq-row-main:hover { background: var(--bg); }

.inq-urgency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.inq-col-name {
  font-weight: 600;
  font-size: 14px;
  width: 175px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inq-col-summary {
  flex: 1;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.inq-col-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

.inq-row-detail {
  padding: 12px 14px 14px 34px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.inq-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.inq-detail-meta > span { display: flex; align-items: center; gap: 3px; }

.inq-detail-quote {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  margin-bottom: 8px;
  align-items: center;
  color: #444;
}

.inq-shipping-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.inq-shipping-standard { background: #f3f4f6; color: #6b7280; }
.inq-shipping-express  { background: #fef3c7; color: #92400e; }
.inq-shipping-collect  { background: #f0fdf4; color: #166534; }

.inq-detail-summary {
  font-size: 13px;
  color: #444;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 140px;
  overflow-y: auto;
  line-height: 1.6;
  margin-top: 6px;
}

.inq-thread {
  margin: 10px -14px -14px -34px;
}

/* MORE DROPDOWN */
.more-menu { position: relative; }

.more-dropdown {
  position: fixed;
  z-index: 400;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 160px;
  padding: 4px 0;
}

.more-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  text-align: left;
  background: none;
  border: none;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
}
.more-dropdown button:hover { background: var(--bg); }
.more-dropdown button.danger { color: var(--red); }
.more-divider { height: 1px; background: var(--border); margin: 3px 0; }

/* BADGES */
.badge {
  background: #e5392a;
  color: white;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  min-width: 20px;
  text-align: center;
}
.badge-blue { background: var(--blue); }

.source-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.source-webform { background: #dbeafe; color: #1d4ed8; }
.source-email   { background: #f3f4f6; color: #374151; }

/* DEADLINE LABEL */
.deadline-label {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}
.deadline-good   { background: #d1fae5; color: var(--green); }
.deadline-warn   { background: #fef9c3; color: var(--yellow); }
.deadline-urgent { background: #ffedd5; color: var(--orange); }
.deadline-overdue{ background: #fee2e2; color: var(--red); }
.deadline-done   { background: #f3f4f6; color: var(--muted); }

/* ISSUE TYPE BADGES */
.issue-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}
.issue-order_status { background: #dbeafe; color: #1d4ed8; }
.issue-shipping     { background: #ffedd5; color: var(--orange); }
.issue-wrong_item   { background: #fee2e2; color: var(--red); }
.issue-quality      { background: #fef9c3; color: var(--yellow); }
.issue-returns      { background: #ede9fe; color: #6d28d9; }
.issue-other        { background: #f3f4f6; color: var(--muted); }

/* PIPELINE STAGE BADGES */
.pipeline-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}
.pipeline-discovery { background: #dbeafe; color: #1d4ed8; }
.pipeline-proof     { background: #ede9fe; color: #6d28d9; }
.pipeline-sale      { background: #d1fae5; color: #065f46; }

/* PROOF UPLOAD ZONE */
.proof-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.proof-zone:hover { border-color: var(--primary); background: #fff8f8; }

/* DRAFT READY BADGE */
.draft-badge {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

/* MODAL */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.modal {
  background: white;
  border-radius: 10px;
  width: 75%;
  max-width: 1100px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 24px;
  position: relative;
}
@media (max-width: 768px) {
  /* Phones: modals fill the screen — no dark strip round the edges. */
  .modal, .modal-wide { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; padding: 16px; overflow-x: hidden; }
  .modal-overlay { padding: 0; align-items: stretch; }
  body:has(#modal-overlay:not(.hidden)) .fab-new-contact { display: none; }
}

/* Back chevron at the top of compose / step modals — returns to the prior view */
.modal-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none;
  font-size: 12px; color: var(--muted); cursor: pointer;
  padding: 0 0 12px; margin-top: -4px;
  font-family: inherit;
}
.modal-back:hover { color: var(--blue); }
.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  /* Real tap target so it doesn't feel finicky on mobile — min 44x44 per HIG */
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  z-index: 10;               /* sit above any header content that reaches into the top-right */
  transition: background 0.12s, color 0.12s;
}
.modal-close:hover, .modal-close:focus-visible {
  background: rgba(0,0,0,0.06);
  color: var(--text);
  outline: none;
}
/* On phone-sized screens the tap zone gets larger + a subtle background so it's
   easy to see against varied header colors. */
@media (max-width: 768px) {
  .modal-close {
    top: 6px; right: 6px;
    width: 44px; height: 44px;
    font-size: 20px;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .modal-close:hover { background: #fff; }
}
.modal h2 { font-size: 18px; margin-bottom: 20px; }
.modal h3 { font-size: 14px; font-weight: 600; margin: 16px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.modal-wide { max-width: 760px; }

/* FORMS */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  background: #fff;
  color: var(--text);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--primary); }
.form-group textarea { min-height: 100px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.form-optional { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* Modal title + lead paragraph used by small admin forms. Matches the
   visual language of the Edit-contact / New-contact modals so the
   historical-sale form sits in line with the rest of the CRM. */
.modal-title {
  margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
}
.modal-blurb {
  margin: 0 0 18px; font-size: 13px; color: var(--muted); line-height: 1.5;
}

/* SNOOZE SELECT */
.snooze-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  background: white;
  cursor: pointer;
}

/* TOAST */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1d23;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  z-index: 999;
  transition: opacity 0.3s;
}

/* EMPTY STATE */
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty p { margin-top: 8px; font-size: 13px; }

.hidden { display: none !important; }

/* MOBILE */
@media (max-width: 768px) {
  header { padding: 0 12px; }
  .header-inner { height: 52px; }
  .logo { height: 30px; }
  .brand-label { display: none; }
  .auth-status { display: none; }

  .btn-hamburger { display: flex; }

  .app-body { min-height: calc(100vh - 52px); }

  /* Sidebar slides in from left as an overlay */
  .sidebar {
    position: fixed;
    top: 0;
    left: -240px;
    width: 240px;
    height: 100vh;
    z-index: 150;
    box-shadow: 2px 0 16px rgba(0,0,0,0.15);
    transition: left 0.25s ease;
  }
  .sidebar.open { left: 0; }
  .sidebar-backdrop { display: block; }

  main { padding: 16px 12px; }

  .card { padding: 12px; }
  .card-top { flex-wrap: wrap; gap: 10px; }
  .card-body { flex-basis: calc(100% - 14px); min-width: 0; }
  .card-actions { width: 100%; padding-left: 14px; margin-top: 2px; }

  .inline-thread { margin: 8px -12px -12px; }
  .inline-thread-inner { padding: 0 12px 10px; }
  .thread-item-body {
    max-height: 220px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .form-row { grid-template-columns: 1fr; }
  .toolbar { gap: 8px; }
}

/* CONTACTS */
.contacts-search-input {
  flex: 1;
  max-width: 400px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--card);
}
.contacts-search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.contact-card { padding: 14px 16px; }
.contact-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.contact-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.contact-tag {
  font-size: 11px;
  padding: 2px 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
}
.contact-sales {
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
  margin-left: auto;
}

/* CONTACT PROFILE MODAL */
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.profile-avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 16px 0 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.profile-record {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.profile-record:last-child { border-bottom: none; }
.profile-record-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-record-name { font-size: 13px; font-weight: 500; }
.profile-record-summary {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  white-space: pre-wrap;
}
.profile-record-date {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

/* QUOTE BOX */
.quote-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #eaf4ec;
  border: 1px solid #a8d5b5;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 8px;
}
.quote-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green);
}
.quote-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--green);
}
.quote-detail {
  font-size: 12px;
  color: var(--muted);
}
.quote-shipping {
  font-size: 12px;
  color: #0369a1;
  font-weight: 500;
}
.designer-badge {
  display: inline-block;
  background: #dcfce7;
  color: #16a34a;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ── CONNECTIONS PAGE ─────────────────────────────────────────────────────── */
.nav-section-bottom {
  margin-top: auto;
  border-top: 1px solid var(--border);
  border-bottom: none;
}

.conn-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
  padding: 4px 0;
}

.conn-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.conn-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
  color: white;
}
.conn-icon-google { background: #4285F4; }
.conn-icon-xero   { background: #13B5EA; }

.conn-card-body {
  flex: 1;
  min-width: 0;
}
.conn-card-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 3px;
}
.conn-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.conn-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.conn-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.conn-pill-on  { background: #dcfce7; color: #16a34a; }
.conn-pill-off { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* ── ORDERS ──────────────────────────────────────────────────────────────── */
.source-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.05em; flex-shrink: 0; }
.source-woo    { background: #eff6ff; color: #1d4ed8; }
.source-crm    { background: #fff7ed; color: #c2410c; }
.source-manual { background: #f3f4f6; color: #6b7280; }
.shipping-badge   { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.05em; flex-shrink: 0; }
.shipping-express { background: #fef3c7; color: #92400e; }
.shipping-collect { background: #f0fdf4; color: #166534; }

/* Editable delivery-method picker on each order card — styled like an
   editable badge so users understand it's the same slot the old static
   ⚡ Express / 🏪 Collect badges used to occupy. */
.order-shipping-select {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'><path d='M0 0l4 6 4-6z' fill='%236b7280'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 16px;
  flex-shrink: 0;
}
.order-shipping-select:hover { border-color: rgba(0,0,0,0.1); }
.order-shipping-select:focus { outline: 2px solid rgba(59,130,246,0.35); outline-offset: 1px; }
.order-shipping-standard { background-color: #f3f4f6; color: #4b5563; }
.order-shipping-express  { background-color: #fef3c7; color: #92400e; }
.order-shipping-collect  { background-color: #f0fdf4; color: #166534; }
.shipping-archived{ background: #f3f4f6; color: #6b7280; text-transform: uppercase; }
.shipping-pending-payment { background: #fef3c7; color: #92400e; text-transform: none; letter-spacing: 0; }
.source-reprint  { background: #fff7ed; color: #c2410c; }
.source-comp     { background: #ecfdf5; color: #065f46; }
.source-inquiry  { background: #ede9fe; color: #5b21b6; }

/* ── New Order Modal ─────────────────────────────────────────────────── */
.no-toggle-group { display: flex; gap: 6px; flex-wrap: wrap; }
.no-toggle { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: white; font-size: 13px; cursor: pointer; font-weight: 500; color: var(--text); transition: all 0.15s; }
.no-toggle.active { background: var(--primary); color: white; border-color: var(--primary); }
.no-toggle:hover:not(.active) { background: var(--bg); }

.no-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: white; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 200; max-height: 240px; overflow-y: auto; }
.no-drop-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; cursor: pointer; gap: 10px; }
.no-drop-item:hover { background: var(--bg); }
.no-drop-name  { font-size: 14px; font-weight: 500; color: var(--text); }
.no-drop-email { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.no-drop-empty { padding: 10px 13px; font-size: 13px; color: var(--muted); }

.no-selected-contact { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; }
.no-contact-name  { font-weight: 600; font-size: 14px; }
.no-contact-email { font-size: 13px; color: var(--muted); flex: 1; }

.no-reprint-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; margin-bottom: 8px; transition: background 0.1s; }
.no-reprint-row.selected { background: #f0fdf4; border-color: #86efac; }
.no-note-input { margin-top: 7px; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px; width: 100%; box-sizing: border-box; }

.no-comp-item { border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.no-comp-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.no-comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Design picker inside the New Manual Order modal. Mirrors the ticket
   quote-builder's design-chooser look so both flows feel consistent. */
.no-design-custom-row { display: flex; gap: 6px; align-items: center; }
.no-design-custom-row input { flex: 1; min-width: 0; }
.no-design-picked { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fafafa; border: 1px solid var(--border); border-radius: 6px; }
.no-design-picked img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.no-design-noimg { display: block; width: 40px; height: 40px; background: #f3f4f6; border-radius: 4px; flex-shrink: 0; }
.no-design-picked-body { flex: 1; min-width: 0; }
.no-design-picked-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-design-picked-name a { color: var(--text); text-decoration: none; }
.no-design-picked-name a:hover { text-decoration: underline; }
.no-design-picked-sku { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.no-design-search { position: relative; }
.no-design-search-row { display: flex; gap: 6px; align-items: center; }
.no-design-search-row input { flex: 1; min-width: 0; }
.no-design-results { position: absolute; z-index: 60; left: 0; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid var(--border); border-radius: 5px; max-height: 260px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.no-design-results:empty { display: none; }
.no-design-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; background: transparent; border: none; border-bottom: 1px solid #f3f4f6; text-align: left; cursor: pointer; }
.no-design-row:hover { background: #fef2f2; }
.no-design-row:last-child { border-bottom: none; }
.no-design-row img { width: 36px; height: 36px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.no-design-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.no-design-row-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-design-row-sku { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.no-design-loading, .no-design-empty { padding: 8px 10px; font-size: 12px; color: var(--muted); }

.order-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid #d1d5db;  /* status rail — overridden by state classes below */
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.order-card:hover { box-shadow: 0 2px 10px -6px rgba(15, 23, 42, 0.18); }
.order-age-warning { background: #fffbeb; border-color: #fcd34d; border-left-color: #f59e0b; }
.order-age-urgent  { background: #fff1f2; border-color: #fca5a5; border-left-color: #ef4444; }
/* Status rail colours — overrides the default grey left rail depending on
   the order's production state. Picked up by orderCard() via class name. */
.order-card.op-pending    { border-left-color: #9ca3af; }
.order-card.op-printed    { border-left-color: #3b82f6; }
.order-card.op-complete   { border-left-color: #10b981; }
.order-card.op-dispatched { border-left-color: #16a34a; }

/* Age-triggered follow-up email button + sent pill (order-status page). */
.order-followup-btn {
  font-weight: 600;
  white-space: nowrap;
}
.order-followup-btn-yellow {
  background: #fef3c7; color: #92400e;
  border-color: #fcd34d;
}
.order-followup-btn-yellow:hover { background: #fde68a; }
.order-followup-btn-red {
  background: #fee2e2; color: #991b1b;
  border-color: #fca5a5;
}
.order-followup-btn-red:hover { background: #fecaca; }
.order-followup-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: #f3f4f6; color: var(--muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.order-followup-pill-yellow { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.order-followup-pill-red    { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.order-age-warning .order-card-header:hover { background: #fef9c3; }
.order-age-urgent  .order-card-header:hover { background: #ffe4e6; }
.order-all-printed { background: #dcfce7; border-color: #86efac; }
.order-all-printed .order-card-header:hover { background: #bbf7d0; }
.order-archived { opacity: 0.72; background: #fafafa; }
.order-archived .order-customer-name,
.order-archived .order-num { color: #6b7280; }

.order-archive-btn {
  background: none;
  border: none;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  color: #9ca3af;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.order-archive-btn:hover { opacity: 1; background: #fdecea; color: var(--red); }

.order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  gap: 14px;
  user-select: none;
}
.order-card-header:hover { background: #fafafa; }

.order-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.order-num { font-weight: 700; font-size: 16px; white-space: nowrap; color: var(--text); letter-spacing: -0.01em; }
.order-customer-name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-customer-name-link { color: inherit; text-decoration: none; cursor: pointer; }
.order-customer-name-link:hover { color: var(--red, #C8102E); text-decoration: underline; }

/* Sample-order modal (spawned from the ticket's Order Sample button) */
.sample-order-lines { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding: 2px; }
.sample-order-line {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; background: #fff; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sample-order-line:hover { border-color: #9ca3af; }
.sample-order-line:has(input:checked) { border-color: var(--red, #C8102E); background: #fff7f7; }
.sample-order-line-check { margin: 0; }
.sample-order-line-thumb {
  width: 44px; height: 44px; object-fit: cover;
  border-radius: 6px; background: #f3f4f6; flex-shrink: 0;
}
.sample-order-line-thumb-blank {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
.sample-order-line-body { min-width: 0; flex: 1; }
.sample-order-line-name { font-size: 13px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-order-line-spec { font-size: 11px; color: var(--muted, #6b7280); margin-top: 2px; }

.sample-order-toggle { display: flex; gap: 18px; flex-wrap: wrap; }
.sample-order-toggle label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

.sample-order-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 16px; background: #fafafa;
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  margin: 12px 0 16px;
}
.sample-order-total-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #6b7280); font-weight: 700; }
.sample-order-total-value { font-size: 22px; font-weight: 700; color: #111827; font-family: 'Bricolage Grotesque', Georgia, serif; }
.order-location { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.order-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.order-mats        { font-size: 12px; color: var(--muted); white-space: nowrap; }
.order-progress-lbl{ font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-progress-bar{ width: 110px; height: 7px; background: var(--bg); border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.order-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.order-progress-fill.op-pending    { background: #d1d5db; }
.order-progress-fill.op-printed    { background: var(--blue); }
.order-progress-fill.op-complete   { background: var(--green); }
.order-progress-fill.op-dispatched { background: #9ca3af; }
.order-date    { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-chevron { font-size: 13px; color: var(--muted); cursor: pointer; transition: transform 0.15s; }
.order-tracking-pill { font-size: 11px; font-family: monospace; background: #f3f4f6; padding: 2px 8px; border-radius: 4px; color: var(--muted); white-space: nowrap; }

/* Inline material swap — looks like plain text by default, hover reveals a
   subtle background + pencil icon to signal editability. Native <select>
   requires two deliberate actions so it's very hard to change accidentally. */
.order-item-material-wrap {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 4px;
  border-radius: 4px;
  transition: background 0.12s, box-shadow 0.12s;
  position: relative;
}
.order-item-material-wrap:hover,
.order-item-material-wrap:focus-within {
  background: #f3f4f6;
  box-shadow: 0 0 0 1px var(--border);
}
.order-item-material {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: none;
  padding: 0; margin: 0;
  font: inherit; color: inherit;
  cursor: pointer;
  /* Match the sibling spans exactly — no widget chrome, no arrow */
  line-height: inherit;
}
.order-item-material:focus { outline: none; }
.order-item-material:disabled { opacity: 0.6; cursor: wait; }
.order-item-material-edit-icon {
  font-size: 9px; color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  transform: translateY(-1px);
}
.order-item-material-wrap:hover .order-item-material-edit-icon,
.order-item-material-wrap:focus-within .order-item-material-edit-icon {
  opacity: 0.7;
}

/* Inline width × height edit — same reveal-on-hover pattern as material swap.
   The <input>s inside look like plain numbers; hover reveals the same subtle
   background + pencil affordance so both edit points feel identical. */
.order-item-dims-wrap {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 4px;
  border-radius: 4px;
  transition: background 0.12s, box-shadow 0.12s;
  position: relative;
}
.order-item-dims-wrap:hover,
.order-item-dims-wrap:focus-within {
  background: #f3f4f6;
  box-shadow: 0 0 0 1px var(--border);
}
.order-item-dim-input {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: none;
  padding: 0; margin: 0;
  font: inherit; color: inherit;
  text-align: right;
  cursor: text;
  line-height: inherit;
  min-width: 1.5em;
}
.order-item-dim-input:focus { outline: none; background: #fff; box-shadow: 0 0 0 1px var(--blue,#3b82f6); border-radius: 2px; }
.order-item-dim-input:disabled { opacity: 0.6; cursor: wait; }
.order-item-dims-wrap:hover .order-item-material-edit-icon,
.order-item-dims-wrap:focus-within .order-item-material-edit-icon {
  opacity: 0.7;
}
/* Live panel-count hint next to editable W×H on tiled wallpapers — just a
   small muted parenthetical so the operator sees how width changes affect
   panels without a reload. */
.order-item-panel-note { color: var(--muted, #6b7280); font-size: 0.9em; margin-left: 4px; }

/* Inline-editable quantity, same silhouette as the existing dim input but
   anchored to the "×" so it reads as a count rather than a dimension. Lives
   in-line with the product name on both the Orders view and the print queue. */
.order-item-qty-wrap {
  display: inline-block; font-size: 12px; font-weight: 700; color: #b45309;
  background: #fef3c7; padding: 1px 8px 1px 6px; border-radius: 10px;
  margin-right: 6px; vertical-align: 1px;
}
.order-item-qty-input {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: none;
  padding: 0; margin: 0 0 0 1px;
  font: inherit; color: inherit;
  text-align: center;
  cursor: text;
  width: 1.6em; min-width: 1.4em;
}
.order-item-qty-input:focus { outline: none; background: #fff; box-shadow: 0 0 0 1px var(--blue,#3b82f6); border-radius: 2px; color: #b45309; }
.order-item-qty-input:disabled { opacity: 0.6; cursor: wait; }
.order-item-qty-wrap:hover .order-item-material-edit-icon,
.order-item-qty-wrap:focus-within .order-item-material-edit-icon {
  opacity: 0.6;
}

/* Mobile order card — the desktop single-row layout crams too much onto
   375px viewports. Restructure into 3 clean rows so nothing gets clipped
   before expanding: identity, secondary meta, then progress/action row. */
@media (max-width: 768px) {
  .order-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 12px;
  }
  .order-header-left, .order-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    overflow: visible;                            /* let names wrap instead of ellipsis-clip */
  }
  .order-header-left { width: 100%; }
  .order-header-right {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }
  .order-customer-name {
    white-space: normal;                          /* allow long names to wrap on mobile */
    font-size: 14px;
    flex: 1; min-width: 0;
  }
  .order-num { font-size: 15px; }
  .order-location { font-size: 11px; }
  .order-mats { font-size: 11px; }
  .order-progress-lbl { font-size: 11px; }
  .order-progress-bar { width: 60px; }
  .order-date { font-size: 11px; }
  .order-chevron { margin-left: auto; font-size: 13px; }
  .order-archive-btn { padding: 4px 6px; }
}

.order-items-list { border-top: 1px solid var(--border); }

.order-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.order-item-row:last-child { border-bottom: none; }
.order-item-pending       { background: #fff; }
.order-item-in_production { background: #fffbeb; border-left: 3px solid #f59e0b; }
.order-item-printed       { background: #dcfce7; border-left: 3px solid #16a34a; }
.order-item-complete      { background: #f0fdf4; border-left: 3px solid #86efac; }
.order-item-dispatched    { background: #fafafa; }

.order-item-thumb-wrap { flex-shrink: 0; }
.order-item-thumb {
  width: 60px; height: 42px; object-fit: cover;
  border-radius: 4px; flex-shrink: 0; display: block;
}
.order-item-thumb-blank {
  width: 60px; height: 42px; background: var(--bg);
  border-radius: 4px; display: flex; align-items: center;
  justify-content: center; font-size: 20px; flex-shrink: 0;
}

.order-item-info { flex: 1; min-width: 0; }
.order-item-name { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.order-item-detail {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; font-size: 12px; color: var(--muted);
}
.item-dims { font-family: monospace; font-size: 11px; }
.order-notes-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 16px 10px;
  background: #fafafa;
  border-top: 1px solid var(--border);
}
.order-notes-icon { font-size: 13px; line-height: 1.6; flex-shrink: 0; padding-top: 2px; }

/* Shared note textarea base */
.note-textarea {
  font-family: inherit;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  resize: none;
  overflow: hidden;
  width: 100%;
  min-height: 28px;
  transition: border-color 0.15s, background 0.15s;
}
.note-textarea::placeholder { color: var(--muted); font-style: italic; }
.note-textarea:hover { border-color: var(--border); background: #fff; }
.note-textarea:focus {
  outline: none;
  border-color: #93c5fd;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(147,197,253,0.3);
}
/* Order-level note (bottom of card) */
.order-note-textarea { color: var(--muted); }
.order-note-textarea:not(:placeholder-shown) { color: var(--text); }
/* Item-level note (inside item row) */
.item-note-textarea { margin-top: 3px; color: var(--orange); font-weight: 500; }

.order-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.item-btns { display: flex; gap: 5px; }
.btn-xs { font-size: 11px; padding: 3px 8px; border-radius: 5px; }

.item-type-pill { padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.item-type-wallpaper { background: #eff6ff; color: #1d4ed8; }
.item-type-mural     { background: #fdf4ff; color: #7c3aed; }
.item-type-sample    { background: #f0fdf4; color: #15803d; }
.item-flipped        { font-size: 11px; color: var(--muted); background: #fef9c3; padding: 1px 6px; border-radius: 4px; }
.item-qty-badge      { display: inline-block; font-size: 12px; font-weight: 700; color: #b45309; background: #fef3c7; padding: 1px 8px; border-radius: 10px; margin-right: 6px; vertical-align: 1px; }

.item-status-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.item-status-pending       { background: #f3f4f6; color: #6b7280; }
.item-status-in_production { background: #fef3c7; color: #92400e; }
.item-status-printed       { background: #eff6ff; color: #1d4ed8; }
.item-status-complete      { background: #dcfce7; color: #15803d; }
.item-status-dispatched { background: #f3f4f6; color: #9ca3af; }

/* Print Queue */
.queue-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.queue-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
}
.queue-tab:hover  { border-color: var(--primary); color: var(--primary); }
.queue-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.queue-tab-badge  {
  background: rgba(255,255,255,0.3);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.queue-tab:not(.active) .queue-tab-badge {
  background: var(--primary);
  color: #fff;
}

.queue-section { margin-bottom: 20px; }
.queue-section-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 2px solid var(--primary);
}
.queue-material-name { font-weight: 700; font-size: 14px; }
.queue-counts { display: flex; gap: 8px; }
.queue-badge-pending       { font-size: 11px; font-weight: 600; background: #f3f4f6; color: #6b7280; padding: 2px 8px; border-radius: 10px; }
.queue-badge-in_production { font-size: 11px; font-weight: 600; background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 10px; }
.queue-badge-printed       { font-size: 11px; font-weight: 600; background: #eff6ff; color: #1d4ed8; padding: 2px 8px; border-radius: 10px; }

.queue-type-section { }
.queue-type-section + .queue-type-section { border-top: 2px solid var(--bg); }
.queue-type-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bg);
}
.queue-type-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.queue-items {
  background: var(--card); border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 var(--radius) var(--radius);
}
.queue-type-section:not(:last-child) .queue-items { border-radius: 0; }
.queue-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.queue-item:last-child { border-bottom: none; }
.queue-item-in_production { background: #fffbeb; border-left: 3px solid #f59e0b; }
.queue-item-printed { background: #f8faff; }

.queue-thumb {
  width: 64px; height: 44px; object-fit: cover;
  border-radius: 4px; flex-shrink: 0; display: block;
}
.queue-thumb-blank {
  width: 64px; height: 44px; background: var(--bg);
  border-radius: 4px; display: flex; align-items: center;
  justify-content: center; font-size: 20px; flex-shrink: 0;
}
.queue-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.queue-item-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.queue-order-num { font-weight: 700; font-size: 13px; white-space: nowrap; }

/* Print-queue express flag + row emphasis. Express rows float to the top
   within each material tab (see routes/orders.js:/queue SQL) — the flag
   makes it obvious why one is above the standard-order rows below it. */
.queue-express-flag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: #f97316; color: #ffffff;
  white-space: nowrap;
}
.queue-item-express {
  box-shadow: inset 3px 0 0 0 #f97316;
  background: #fffbeb;
}
.queue-customer  { font-size: 12px; color: var(--muted); white-space: nowrap; }
.queue-design    { font-weight: 500; font-size: 13px; }
.queue-dims      { font-size: 11px; font-family: monospace; color: var(--muted); white-space: nowrap; }
/* Queue item note textarea */
.queue-note-textarea { color: var(--orange); font-weight: 500; margin-top: 3px; }
.queue-item-action { flex-shrink: 0; }

/* ── CONFIGURATION PAGE ────────────────────────────────────────────────── */
.cfg-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 0 24px 20px;
}
.cfg-section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Collapsible variant — <details> replacement done at render time. When
   closed we tighten padding + margin so the closed list stays compact. */
details.cfg-section { padding: 0; }
details.cfg-section > summary.cfg-section-title {
  cursor: pointer;
  list-style: none;
  padding: 16px 28px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
details.cfg-section > summary.cfg-section-title::-webkit-details-marker { display: none; }
details.cfg-section > summary.cfg-section-title::before {
  content: '▸';
  display: inline-block;
  color: #6b7280;
  font-size: 11px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
details.cfg-section[open] > summary.cfg-section-title::before { transform: rotate(90deg); }
details.cfg-section > summary.cfg-section-title:hover { background: #f9fafb; border-radius: var(--radius); }
details.cfg-section[open] > summary.cfg-section-title {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
/* Body padding restored inside the details so the interior looks like the
   pre-collapsible section. Everything below the summary gets 20px 28px 24px. */
details.cfg-section > *:not(summary) { padding-left: 28px; padding-right: 28px; }
details.cfg-section > *:not(summary):first-of-type { padding-top: 20px; }
details.cfg-section > *:not(summary):last-child { padding-bottom: 24px; }
.cfg-section-note {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.cfg-table { width: 100%; border-collapse: collapse; }
.cfg-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 6px 12px 10px 0;
  border-bottom: 1px solid var(--border);
}
.cfg-th-unit { font-weight: 400; text-transform: none; letter-spacing: 0; }
.cfg-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.cfg-table tr:last-child td { border-bottom: none; }
.cfg-mat-name { font-size: 13px; font-weight: 500; min-width: 220px; }
.cfg-mat-name-input { min-width: 200px; font-weight: 500; }
.cfg-derived-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.cfg-margin-good  { color: #16a34a; font-weight: 600; }
.cfg-margin-ok    { color: #ca8a04; font-weight: 600; }
.cfg-margin-thin  { color: #dc2626; font-weight: 600; }
.cfg-mat-actions { text-align: right; width: 40px; }
.cfg-mat-actions .btn { padding: 4px 6px; }
.cfg-mat-actions .btn:hover { background: #fef2f2; color: #b91c1c; }
.cfg-input-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s;
}
.cfg-input-wrap:focus-within { border-color: #93c5fd; box-shadow: 0 0 0 2px rgba(147,197,253,0.3); }
.cfg-prefix {
  padding: 6px 6px 6px 10px;
  font-size: 13px;
  color: var(--muted);
  background: #f9fafb;
  border-right: 1px solid var(--border);
  pointer-events: none;
}
.cfg-input {
  width: 90px;
  border: none;
  outline: none;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
}
.cfg-unit  { font-size: 12px; color: var(--muted); margin-left: 6px; }
.cfg-row   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; }
.cfg-label { font-size: 13px; font-weight: 500; min-width: 150px; }
.cfg-hint  { font-size: 11px; color: var(--muted); }

/* ── ACCOUNTING PAGE ───────────────────────────────────────────────────── */
.acct-table-wrap { overflow-x: auto; margin: 0 24px 16px; }
.acct-loading, .acct-empty { padding: 40px 24px; color: var(--muted); font-size: 14px; }
.acct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 900px;
}
.acct-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  background: var(--bg);
}
.acct-table tbody tr { border-bottom: 1px solid #f0f0f0; }
.acct-table tbody tr:hover { background: #fafbfc; }
.acct-table td { padding: 8px 10px; vertical-align: middle; }
.acct-cell-order { min-width: 160px; }
.acct-order-num  { font-weight: 700; font-size: 13px; display: block; }
.acct-customer   { font-size: 11px; color: var(--muted); }
.acct-cell-date  { white-space: nowrap; color: var(--muted); font-size: 12px; }
.acct-cell-mat   { font-size: 12px; color: var(--muted); max-width: 120px; }
.acct-cell-editable { min-width: 100px; }
.acct-cell-calc  { font-size: 13px; color: var(--muted); white-space: nowrap; }
.acct-cell-profit { font-weight: 700; font-size: 13px; white-space: nowrap; }
.acct-profit-pos  { color: #16a34a; }
.acct-profit-neg  { color: var(--red); }
.acct-cell-margin { font-size: 12px; color: var(--muted); white-space: nowrap; }
.acct-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
  transition: border-color 0.15s;
}
.acct-input-wrap:focus-within { border-color: #93c5fd; background: #fff; }
.acct-prefix { font-size: 12px; color: var(--muted); }
.acct-suffix { font-size: 11px; color: var(--muted); margin-left: 2px; }
.acct-input {
  width: 72px;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  padding: 2px 2px;
}
.acct-table tfoot .acct-totals td {
  padding: 10px 10px;
  font-weight: 700;
  font-size: 13px;
  border-top: 2px solid var(--border);
  background: #f9fafb;
}
.acct-note {
  font-size: 12px;
  color: var(--muted);
  margin: 0 24px 24px;
  line-height: 1.6;
}
.acct-note a { color: var(--primary); }

/* Sticky Order + Revenue columns — stay visible while the rest of the row
   scrolls horizontally on narrow screens. Sticky cells need their own solid
   background so the scrolled cells behind them don't bleed through. Order is
   pinned at left:0; Revenue offsets by the Order column's width. */
.acct-sticky {
  position: sticky;
  z-index: 3;
  background-color: #fff;
}
.acct-sticky-1 { left: 0;     min-width: 150px; max-width: 150px; }
.acct-sticky-2 { left: 150px; min-width: 100px; max-width: 120px; box-shadow: 4px 0 6px -4px rgba(0,0,0,0.08); }
.acct-table thead .acct-sticky { background-color: var(--bg); z-index: 4; }
.acct-table tfoot .acct-sticky { background-color: #f9fafb; z-index: 4; }
.acct-table tbody tr:hover .acct-sticky { background-color: #fafbfc; }

/* Apportioned-cost UI additions — % chip on header, warn banner for
   the pre-configured-empty state. */
.acct-th-pct {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.acct-cell-cost { font-variant-numeric: tabular-nums; }
.acct-hint-warn {
  margin: 0 24px 12px;
  padding: 10px 14px;
  background: #fef3c7;
  color: #92400e;
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.acct-hint-warn a { color: #92400e; font-weight: 600; text-decoration: underline; }

/* ── ACCOUNTING DATE FILTER BAR ────────────────────────────────────────── */
.acct-filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  margin-bottom: 0;
}
.acct-range-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.acct-custom-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.acct-custom-range input[type="date"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  cursor: pointer;
}
.acct-custom-range input[type="date"]:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(147,197,253,0.3);
}
.acct-range-sep { font-size: 13px; color: var(--muted); }

/* ── REVIEW QUEUE — CONTACT BADGES ────────────────────────────────────── */
.queue-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.contact-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.contact-badge-returning {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.contact-badge-new {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

/* ── SUPPORT TICKET — LINKED CONTACT SECTION ───────────────────────────── */
.linked-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  margin-bottom: 16px;
}
.linked-contact-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #15803d;
}
.linked-contact-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.linked-contact-meta {
  font-size: 12px;
  color: var(--muted);
}

/* ── DASHBOARD ──────────────────────────────────────────────────────────── */
.dash-header {
  padding: 28px 28px 0;
  max-width: 1100px;
}
.dash-greeting {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.dash-date {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 28px 28px;
  max-width: 1100px;
}

/* Standard metric card */
.dash-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow 0.15s;
}
.dash-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }

.dash-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 14px;
}

.dash-card-number {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text);
  margin-bottom: 6px;
}
.dash-card-number.dash-alert   { color: var(--red); }
.dash-card-number.dash-warn    { color: #c05a00; }
.dash-card-number.dash-ok      { color: var(--green); }

.dash-card-sublabel {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}
.dash-card-action {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.dash-card-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.dash-card-link:hover { text-decoration: underline; }

/* Sales card spans full row */
.dash-card-sales {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.dash-sales-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--border);
  grid-column: 1 / -1;
}
.dash-sales-cols {
  display: flex;
  flex: 1;
}
.dash-sales-col {
  flex: 1;
  padding: 24px 28px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.dash-sales-col:last-child { border-right: none; }
.dash-sales-period {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 10px;
}
.dash-sales-amount {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}
.dash-sales-amount.dash-zero { color: var(--muted); }
.dash-sales-orders {
  font-size: 12px;
  color: var(--muted);
  margin-top: auto;
}
.dash-sales-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.dash-sales-title-row {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-sales-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Placeholder card */
.dash-card-placeholder {
  background: var(--bg);
  border: 1px dashed #c8cdd6;
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 130px;
  color: var(--muted);
}
.dash-placeholder-icon { font-size: 24px; opacity: 0.4; }
.dash-placeholder-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.dash-placeholder-note {
  font-size: 11px;
  color: #9ca3af;
}

@media (max-width: 860px) {
  .dash-grid { grid-template-columns: repeat(2, 1fr); padding: 0 16px 24px; }
  .dash-header { padding: 20px 16px 0; }
  .dash-card-sales { grid-column: span 2; }
  .dash-sales-cols { flex-direction: column; }
  .dash-sales-col { border-right: none; border-bottom: 1px solid var(--border); padding: 18px 20px; }
  .dash-sales-col:last-child { border-bottom: none; }
}
@media (max-width: 560px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-card-sales { grid-column: span 1; }
}

/* ── ORDER SUPPLIES ─────────────────────────────────────────────────────── */
.supply-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 28px 28px;
  max-width: 1100px;
}

.supply-card {
  background: white;
  border: 1px solid var(--border);
  border-top: 3px solid var(--supply-accent, var(--primary));
  border-radius: 12px;
  padding: 22px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow 0.15s;
}
.supply-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }

.supply-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.supply-card-icon {
  font-size: 28px;
  line-height: 1;
  margin-top: 2px;
  flex-shrink: 0;
}
.supply-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.supply-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.supply-card-items {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.supply-card-items li {
  font-size: 13px;
  color: var(--text);
  padding: 6px 10px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.supply-card-items li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--supply-accent, var(--primary));
  flex-shrink: 0;
  opacity: 0.6;
}

.supply-card-footer {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.supply-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
}

@media (max-width: 860px) {
  .supply-grid { grid-template-columns: 1fr; padding: 0 16px 24px; }
}

/* ── Drive file linking ─────────────────────────────────────────────────────── */
.drive-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.drive-link-set   { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.drive-link-set:hover { background: #dbeafe; }
.drive-link-empty { color: var(--muted); }
.drive-link-empty:hover { background: var(--bg); color: var(--text); }
.drive-unlink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  font-size: 11px; line-height: 1; color: var(--muted); margin-left: 2px;
}
.drive-unlink:hover { background: #fdecea; color: var(--red); }

.order-items-toolbar {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: #fafbfc;
  display: flex;
  justify-content: flex-end;
}

/* Drive match modal */
.drive-cand-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; margin-bottom: 14px; }
.drive-cand {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.drive-cand:hover { background: #f9fafb; border-color: var(--blue); }
.drive-cand-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--bg); flex-shrink: 0; }
.drive-cand-thumb-blank { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--muted); }
.drive-cand-body { flex: 1; min-width: 0; }
.drive-cand-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-cand-meta { display: flex; gap: 10px; align-items: center; margin-top: 3px; font-size: 11px; color: var(--muted); }
.drive-cand-score { font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.drive-cand-score.score-high { background: #dcfce7; color: #166534; }
.drive-cand-score.score-mid  { background: #fef3c7; color: #92400e; }
.drive-cand-score.score-low  { background: #f3f4f6; color: #6b7280; }
.drive-cand-reasons { font-style: italic; }
.drive-cand-open { font-size: 14px; color: var(--muted); padding: 4px 8px; text-decoration: none; }
.drive-cand-open:hover { color: var(--blue); }

.conn-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.drive-pos { color: var(--muted); font-size: 12px; }
.drive-modal-header { display: flex; gap: 12px; align-items: center; margin: 4px 0 14px; }
.drive-modal-ref {
  width: 60px; height: 60px; object-fit: cover; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border); flex-shrink: 0;
}
.drive-modal-meta { font-size: 13px; color: var(--muted); }

/* Deprecated nav section — visually corralled until removal */
/* Deprecated nav section removed from sidebar — tab content + JS preserved
   for backward-compat with any code paths still calling loadInquiries() etc. */

/* ── Tickets ────────────────────────────────────────────────────────────────── */
.ticket-card {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  /* 4px status-colored left rail so status is scannable without reading the pill */
  border-left-width: 4px;
}
.ticket-card:hover { background: #f9fafb; border-color: var(--blue); }
.ticket-card-status-open             { border-left-color: #16a34a; }
.ticket-card-status-waiting_us       { border-left-color: #ea580c; }
.ticket-card-status-waiting_customer { border-left-color: #d97706; }
.ticket-card-status-closed           { border-left-color: #d1d5db; }
.ticket-card-status-closed { opacity: 0.7; }

.ticket-card-row1 {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;
}
.ticket-card-row2 {
  display: flex; gap: 12px; font-size: 12px; color: var(--muted);
  flex-wrap: wrap; align-items: center;
}
.ticket-card-row3 {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.ticket-subject {
  font-weight: 500; font-size: 14px; color: var(--text);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-age {
  font-size: 11px; color: var(--muted);
  flex-shrink: 0; white-space: nowrap;
}
.ticket-assignee-inline {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 500; color: var(--text);
}
.ticket-assignee-inline .ticket-assignee-avatar {
  width: 16px; height: 16px; font-size: 8px;
}

@media (max-width: 768px) {
  .ticket-card { padding: 10px 12px; border-left-width: 4px; }
  .ticket-card-row1 { flex-wrap: wrap; }
  .ticket-subject { font-size: 15px; white-space: normal; }
  .ticket-card-row2 { gap: 10px; font-size: 12px; }
  .ticket-email { display: none; }              /* email hidden on mobile — tap the card to see it */
  .ticket-card-row3 { gap: 4px; margin-top: 2px; }
  .ticket-type-badge, .ticket-status-badge, .ticket-stage-badge { font-size: 9px; padding: 2px 6px; }
}
.ticket-contact { font-weight: 500; color: var(--text); }
.ticket-email   { font-family: monospace; font-size: 11px; }

.ticket-type-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ticket-type-inquiry { background: #dbeafe; color: #1d4ed8; }
.ticket-type-support { background: #fee2e2; color: #b91c1c; }
.ticket-type-general { background: #f3f4f6; color: #6b7280; }

.ticket-status-badge {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ticket-status-open             { background: #dcfce7; color: #166534; }
.ticket-status-waiting_customer { background: #fef3c7; color: #92400e; }
.ticket-status-waiting_us       { background: #fed7aa; color: #9a3412; }
.ticket-status-closed           { background: #e5e7eb; color: #4b5563; }

/* Priority badge — set on Client Portal designer orders + design-help requests.
   Sits first in the row3 badge cluster so triage can spot it at a glance. */
.ticket-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ticket-badge-priority {
  background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
}

.ticket-stage-badge {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
  background: #ede9fe; color: #6d28d9;
}

/* Ticket detail modal */
.ticket-detail-header { margin-bottom: 14px; }
.ticket-detail-meta {
  display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 6px; flex-wrap: wrap;
}
.ticket-detail-meta a { color: var(--blue); text-decoration: none; font-weight: 500; }
.ticket-detail-meta a:hover { text-decoration: underline; }

/* Collapsible ticket controls — summary pills always visible, full toggles
   revealed on click. Space-saving default state, especially on mobile. */
.ticket-controls-wrap {
  margin-bottom: 8px;
}
.ticket-controls-wrap > summary {
  list-style: none;      /* hide native disclosure marker */
  cursor: pointer;
}
.ticket-controls-wrap > summary::-webkit-details-marker { display: none; }
.ticket-controls-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  background: #f9fafb; border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px;
  transition: background 0.12s, border-color 0.12s;
}
.ticket-controls-summary:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}
.ticket-controls-wrap[open] .ticket-controls-summary {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.ticket-summary-pills {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  flex: 1; min-width: 0;
}
.ticket-summary-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  padding: 3px 8px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  white-space: nowrap;
}
.ticket-summary-type {
  text-transform: capitalize;
  color: #4b5563; background: #eef2ff; border-color: #c7d2fe;
}
.ticket-summary-status         { color: #4b5563; }
.ticket-status-open            { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.ticket-status-waiting_us      { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.ticket-status-waiting_customer{ background: #dcfce7; border-color: #86efac; color: #166534; }
.ticket-status-closed          { background: #f3f4f6; border-color: #d1d5db; color: var(--muted); }
.ticket-summary-assignee {
  background: #fff; color: var(--text);
  padding-left: 3px;                    /* tighter around the avatar */
}
.ticket-summary-assignee .ticket-assignee-avatar {
  width: 18px; height: 18px; font-size: 9px;
}
.ticket-summary-category {
  background: #f9fafb; color: #4b5563;
}
.ticket-summary-chevron {
  color: var(--muted); font-size: 12px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.ticket-controls-wrap[open] .ticket-summary-chevron { transform: rotate(180deg); }

.ticket-controls {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  background: #f9fafb; padding: 12px 12px 8px;
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 6px 6px;
}
.ticket-control { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ticket-control select {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 13px; background: #fff;
}

.ticket-notes-row { margin: 4px 0 10px; }
.ticket-notes-row label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text); }
.ticket-notes-row label span { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 6px; }
/* Looks like a field you can type in: bordered, warm note colour, focus ring */
.ticket-notes-input { width: 100%; min-height: 54px; resize: vertical; padding: 8px 10px; font-family: inherit; font-size: 13px; line-height: 1.45;
  background: #fffdf3; border: 1px solid #e8dfb8; border-radius: 6px; color: var(--text); transition: border-color .12s, box-shadow .12s, background .3s; }
.ticket-notes-input:hover { border-color: #d6c98f; }
.ticket-notes-input:focus { outline: none; background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(200,16,46,0.12); }
.ticket-notes-input::placeholder { color: #a8a089; }
.ticket-notes-input.ticket-notes-saved { background: #f0fdf4; border-color: #86efac; }

/* Status line: pills (expand for Type / Status / Assignee) · stage track · Close */
.ticket-controls-summary .ticket-summary-pills { flex: 0 1 auto; }
.ticket-summary-inline { display: flex; align-items: center; gap: 10px; margin-left: auto; cursor: default; flex-wrap: wrap; justify-content: flex-end; }
.ticket-pipeline.ticket-pipeline-inline { margin: 0; padding: 0; background: none; border: 0; }
.ticket-pipeline-inline.ticket-pipeline-lost-banner { padding: 2px 8px; background: #fef2f2; border: 1px solid #fca5a5; }
.ticket-close-btn { white-space: nowrap; }

.ticket-thread { display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.ticket-msg {
  border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px;
}
.ticket-msg-inbound  { background: #fff; border-left: 3px solid #3b82f6; }
.ticket-msg-outbound { background: #f0fdf4; border-left: 3px solid #16a34a; }
.ticket-msg-head {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-size: 11px; color: var(--muted); margin-bottom: 6px;
}
.ticket-msg-dir   { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ticket-msg-from  { font-weight: 600; color: var(--text); font-size: 13px; }
.ticket-msg-subject { font-size: 12px; color: var(--muted); margin-bottom: 4px; font-style: italic; }
.ticket-msg-body  { font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.ticket-msg-iframe { width: 100%; border: none; min-height: 60px; max-height: 600px; background: transparent; }

/* Ticket detail header — title block on the left, actions on the right, with
   clearance for the modal close X. Actions wrap under title on narrow screens
   so nothing sits behind the close button. */
.ticket-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 10px;
  padding-right: 56px;   /* enough room for the beefier mobile X target */
}
.ticket-detail-titleblock { flex: 1; min-width: 0; }
.ticket-detail-titleblock h2 {
  font-size: 18px; margin: 0;
  word-break: break-word;    /* long email subjects don't blow out the layout */
}
.ticket-actions-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
@media (max-width: 768px) {
  .ticket-detail-header {
    flex-direction: column;
    padding-right: 48px;
    gap: 8px;
  }
  .ticket-detail-titleblock h2 { font-size: 16px; }
  .ticket-detail-meta { font-size: 11px; gap: 8px; }
  .ticket-actions-row {
    width: 100%;
    justify-content: flex-start;
    /* Buttons keep their intrinsic size — no stretching to full width,
       which was making the header look "janky". */
  }
  .ticket-actions-row .btn { flex: 0 0 auto; }
}

/* Assignee widget in the ticket controls row */
.ticket-assignee-group {
  gap: 6px;
}
.ticket-assignee-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: #1e3a8a; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.ticket-assignee-avatar-empty {
  background: #f3f4f6; color: var(--muted); font-weight: 500;
}
.ticket-assignee-select {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: #fff; font-size: 12px; font-family: inherit; color: var(--text);
  cursor: pointer;
  max-width: 160px;
}
.ticket-assignee-select:hover { border-color: var(--blue, #2563eb); }
.ticket-assignee-values {
  gap: 6px;
}

/* Subtle "danger zone" footer in the ticket controls — Mark as Junk lives
   here so it doesn't compete visually with the primary Type/Status/Assignee
   controls. Small, muted, right-aligned. */
.ticket-controls-footer {
  display: flex; justify-content: flex-end;
  padding: 4px 4px 8px;
  margin-bottom: 4px;
}
.ticket-junk-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none;
  padding: 4px 8px; margin: 0;
  font-family: inherit; font-size: 11px; color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.ticket-junk-link:hover, .ticket-junk-link:focus-visible {
  background: #fef2f2;
  color: #b91c1c;
  outline: none;
}
.ticket-junk-icon { font-size: 12px; opacity: 0.7; }

@media (max-width: 768px) {
  .ticket-controls {
    /* Vertical stack — each toggle group takes a full row, with label above
       values so alignment is visually consistent across all rows. */
    flex-direction: column;
    gap: 12px;
    padding: 10px 12px;
    align-items: stretch;
  }
  .ticket-toggle-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
  }
  .ticket-toggle-values {
    width: 100%;
  }
  .ticket-assignee-values {
    justify-content: flex-start;
  }
  .ticket-assignee-select { flex: 1; max-width: none; }
  .ticket-controls-footer {
    justify-content: flex-start;
  }
}

/* Collapsed message state */
.ticket-msg-head {
  cursor: pointer; align-items: center; padding: 2px 0;
  transition: background 0.15s;
}
.ticket-msg-head:hover { background: rgba(0,0,0,0.02); }
.ticket-msg-chevron {
  margin-left: auto; font-size: 11px; color: var(--muted);
  transition: transform 0.15s;
}
.ticket-msg-snippet {
  display: none;
  font-size: 12px; color: var(--muted);
  padding: 4px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-msg.collapsed .ticket-msg-iframe   { display: none; }
.ticket-msg.collapsed .ticket-msg-subject  { display: none; }
.ticket-msg.collapsed .ticket-msg-snippet  { display: block; }
.ticket-msg.collapsed .ticket-msg-attachments { display: none; }

/* Ticket message attachments (Gmail image attachments + Twilio MMS media) */
.ticket-msg-attachments {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.ticket-msg-attachments-label {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 600; margin-bottom: 6px;
}
.ticket-msg-attachments-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
}
.ticket-attach-tile {
  position: relative; border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; background: #fafafa;
}
.ticket-attach-tile img {
  display: block; width: 100%; height: 160px; object-fit: cover;
  cursor: pointer;
}
.ticket-attach-render-btn {
  position: absolute; bottom: 8px; left: 8px; right: 8px;
  background: #C8102E; color: #fff; border: none;
  padding: 6px 10px; border-radius: 4px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.ticket-attach-tile:hover .ticket-attach-render-btn { opacity: 0.95; }
.ticket-attach-render-btn:hover { background: #a80d27; opacity: 1; }

/* Render-design-in-room modal */
.rir-room-preview { margin-bottom: 14px; }
.rir-room-preview img { width: 100%; max-width: 540px; border-radius: 6px; border: 1px solid var(--border); display: block; }
.rir-picked {
  margin: 10px 0;
  padding: 10px 12px;
  background: #f0fdf4; border: 1px solid #6ee7b7; border-radius: 5px;
  font-size: 13px;
  display: flex; align-items: center; gap: 12px;
}
.rir-section-title {
  margin: 18px 0 8px;
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.rir-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.rir-design-tile {
  border: 1px solid var(--border); border-radius: 5px;
  background: #fff; padding: 6px; cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.rir-design-tile:hover { border-color: #C8102E; transform: translateY(-1px); }
.rir-design-tile img {
  display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 3px; background: #f3f4f6;
}
.rir-design-tile-name {
  font-size: 12px; font-weight: 500; margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rir-design-tile-sku { font-size: 10px; color: var(--muted); margin-top: 2px; }
.rir-design-tile-sku code { font-size: 10px; background: transparent; padding: 0; }
.rir-design-tile-type {
  display: inline-block; font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.04em; background: #eef2ff; color: #4338ca;
  padding: 1px 6px; border-radius: 8px; margin-left: 4px; vertical-align: middle;
}

/* ─── Tax Reconciliation tab ──────────────────────────────────────────── */
.tr-cutoff-note {
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
  padding: 10px 14px; border-radius: 6px; font-size: 12px; line-height: 1.55;
  margin-bottom: 16px;
}
.tr-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.tr-stat {
  background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  padding: 12px 14px;
}
.tr-stat-warn { background: #fef2f2; border-color: #fecaca; }
.tr-stat-warn .tr-stat-value { color: #991b1b; }
.tr-stat-meta { background: #fafafa; }
.tr-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.tr-stat-value { font-size: 28px; font-weight: 700; color: #0f172a; margin-top: 6px; }
.tr-stat-sub { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.tr-stat-meta .tr-stat-sub { font-size: 12px; margin-top: 6px; }

/* Persistent bank-account picker at the top of the Tax Recon tab. Two
   dropdowns (Square + Interac) side by side; each writes on change. */
.tr-bank-accounts-panel {
  background: #f8fafc; border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 16px;
}
.tr-bank-accounts-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.tr-bank-accounts-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #0f172a; font-weight: 700; }
.tr-bank-accounts-sub { font-size: 12px; color: var(--muted); }
.tr-bank-accounts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.tr-bank-accounts-row { display: flex; flex-direction: column; gap: 4px; }
.tr-bank-accounts-label { font-size: 12px; font-weight: 600; color: #0f172a; }
.tr-bank-accounts-empty { padding: 10px; font-size: 12px; color: var(--muted); }

.tr-subtabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border, #e5e7eb);
  margin-bottom: 16px; flex-wrap: wrap;
}
.tr-subtab {
  background: transparent; border: none; cursor: pointer;
  font-size: 13px; color: var(--muted); padding: 10px 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500;
}
.tr-subtab:hover { color: #0f172a; }
.tr-subtab.active { color: var(--primary, #C8102E); border-bottom-color: var(--primary, #C8102E); font-weight: 600; }
.tr-count {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: #f3f4f6; color: #6b7280; padding: 2px 8px; border-radius: 999px;
  margin-left: 4px;
}
.tr-subtab.active .tr-count { background: #fee2e2; color: #991b1b; }

.tr-view-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.tr-view-head h3 { margin: 0; font-size: 16px; }
.tr-section-head { font-size: 13px; margin: 18px 0 6px; color: #0f172a; }

.tr-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; }
.tr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tr-table thead th {
  background: #fafafa; text-align: left; padding: 8px 10px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  font-weight: 600; border-bottom: 1px solid var(--border, #e5e7eb); white-space: nowrap;
}
.tr-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid #f3f4f6; vertical-align: top;
}
.tr-table tbody tr:last-child td { border-bottom: none; }
.tr-table tbody tr:hover { background: #fafafa; }
.tr-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-table .td-actions { white-space: nowrap; text-align: right; }
.tr-table .empty-cell { text-align: center; color: var(--muted); padding: 18px; font-style: italic; }
.tr-pos { color: #16a34a; font-weight: 600; }
.tr-neg { color: #b91c1c; font-weight: 600; }
.tr-totals-row td { background: #f9fafb; border-top: 2px solid #e5e7eb; font-weight: 600; }

.tr-range-controls {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: #fafafa; padding: 10px 12px; border-radius: 6px; margin-bottom: 12px;
}
.tr-range-controls label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tr-range-controls input[type="date"] { padding: 4px 6px; font-size: 13px; }

.tr-prov-tag {
  display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  background: #eef2ff; color: #4338ca; padding: 1px 6px; border-radius: 999px; margin-left: 6px;
  font-weight: 600;
}

/* Bulk-create bar above the missing-CN table */
.tr-bulk-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fafafa; border: 1px solid #eee; border-radius: 6px;
  padding: 8px 12px; margin-bottom: 10px; font-size: 13px;
}
.tr-bulk-bar label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: #1f2937; }
.tr-bulk-bar input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; }
.tr-bulk-count { font-size: 12px; color: var(--muted); }

/* Credit-note preview modal */
.tr-warn-banner {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px;
}
.tr-preview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 8px 0;
}
@media (max-width: 720px) { .tr-preview-grid { grid-template-columns: 1fr; } }
.tr-preview-card {
  background: #fafafa; border: 1px solid #eee; border-radius: 8px;
  padding: 12px 14px;
}
.tr-preview-card-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700; margin-bottom: 8px;
}
.tr-preview-card-head-credit { color: var(--primary, #C8102E); }
.tr-preview-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.tr-preview-table td { padding: 4px 0; vertical-align: top; }
.tr-preview-table td:first-child { color: var(--muted); width: 45%; }
.tr-preview-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tr-preview-verdict {
  padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-top: 8px;
}
.tr-preview-verdict-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; }
.tr-preview-verdict-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

.tr-quarter-row {
  flex-wrap: wrap;
}
.tr-quarter-grid {
  background: #fafafa; border: 1px solid #eee; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 8px;
}
.tr-quarter-year-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 0;
}
.tr-quarter-year-row + .tr-quarter-year-row {
  border-top: 1px dashed #e5e7eb;
  margin-top: 4px;
  padding-top: 8px;
}
.tr-quarter-year-label {
  font-weight: 700; font-size: 13px; color: var(--muted);
  min-width: 56px; letter-spacing: 0.02em;
}
.tr-manual-row {
  background: #fefce8;
}
.tr-row-clickable { cursor: pointer; }
.tr-row-clickable:hover td { background: #f3f4f6; }
.tr-row-clickable.tr-manual-row:hover td { background: #fef9c3; }
.tr-refund-row td { background: #fef2f2; color: #991b1b; }
.tr-refund-row td:not(.num) { font-style: italic; }
.tr-return-headline-clickable {
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.tr-return-headline-clickable:hover {
  background: #f0fdf4; border-color: #86efac;
}
.tr-table-sortable thead th[data-sort-key] {
  cursor: pointer; user-select: none;
}
.tr-table-sortable thead th[data-sort-key]:hover {
  background: #f3f4f6; color: #1f2937;
}
.tr-quarter-group td {
  background: #eff6ff; color: #1e3a8a;
  font-size: 12px; padding: 6px 10px;
  border-top: 1px solid #bfdbfe;
  border-bottom: 1px solid #bfdbfe;
}
.tr-manual-row td { border-top: 1px dashed #eab308 !important; }
.tr-active-range {
  font-size: 12px; color: var(--muted); margin-bottom: 10px; font-style: italic;
}
.tr-return-card {
  background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 18px;
}
.tr-return-card-pst { background: #fafafa; border-style: dashed; }
.tr-return-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.tr-return-card-head h3 { margin: 0; font-size: 16px; }
.tr-return-headline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.tr-return-headline-stat {
  background: #fafafa; border: 1px solid #eee; border-radius: 8px;
  padding: 12px 14px;
}
.tr-return-headline-primary { background: #eff6ff; border-color: #bfdbfe; }
.tr-return-card-pst .tr-return-headline-primary { background: #f0fdf4; border-color: #bbf7d0; }
.tr-return-headline-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700;
}
.tr-return-headline-value {
  font-size: 26px; font-weight: 700; color: #0f172a; margin-top: 6px;
}
.tr-return-headline-primary .tr-return-headline-value { color: #1e3a8a; }
.tr-return-headline-credit { color: #16a34a; }
.tr-return-card-pst .tr-return-headline-primary .tr-return-headline-value { color: #14532d; }
.tr-return-headline-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

.tr-cra-highlight { background: #eff6ff; color: #1e3a8a; }
.tr-totals-row .tr-cra-highlight { background: #dbeafe; }

.tr-source-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.tr-source-bill { background: #eef2ff; color: #4338ca; }
.tr-source-spend { background: #fef3c7; color: #92400e; }

.tr-detail-section {
  margin-top: 18px; padding: 10px 0; border-top: 1px solid #eee;
}
.tr-detail-section summary {
  cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0;
  font-weight: 500;
}
.tr-detail-section summary:hover { color: #0f172a; }
.tr-detail-section[open] summary { color: #0f172a; font-weight: 600; }

.tr-manual-payment-note {
  margin-top: 12px; padding: 10px 14px;
  background: #f0f9ff; border: 1px solid #bae6fd; color: #075985;
  border-radius: 6px; font-size: 12px; line-height: 1.55;
}
.tr-manual-payment-note code {
  background: rgba(7, 89, 133, 0.1); padding: 1px 5px; border-radius: 3px; font-size: 11px;
}

.tr-payment-section {
  margin-top: 14px; padding: 12px 14px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px;
}
.tr-payment-section-warn {
  background: #fffbeb; border-color: #fde68a;
}
.tr-payment-section-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #14532d; font-weight: 700; margin-bottom: 8px;
}
.tr-payment-section-warn .tr-payment-section-head { color: #92400e; }
.tr-payment-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px;
}
.tr-payment-row > span:first-child { color: var(--muted); min-width: 50px; }
.tr-payment-row select { flex: 1; min-width: 0; }

.tr-bulk-results {
  display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0;
}
.tr-bulk-stat {
  padding: 12px 16px; border-radius: 8px; font-size: 14px;
}
.tr-bulk-ok      { background: #f0fdf4; color: #14532d; border: 1px solid #bbf7d0; }
.tr-bulk-neutral { background: #f9fafb; color: var(--muted); border: 1px solid #eee; }
.tr-bulk-err     { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.tr-bulk-stat strong { font-size: 24px; display: block; }
.tr-bulk-errors {
  margin: 6px 0 0 0; padding-left: 20px; font-size: 12px;
  max-height: 200px; overflow-y: auto; color: var(--muted);
}
.tr-bulk-errors li { margin-bottom: 4px; }

/* ─── Product Management tab ──────────────────────────────────────────── */
.pm-section { margin-bottom: 24px; }
.pm-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pm-folders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .pm-folders { grid-template-columns: 1fr; } }
.pm-folder {
  background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 12px;
}
.pm-folder.pm-folder-missing { background: #fff7ed; border-color: #fed7aa; }
.pm-folder-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pm-folder-head h3 { margin: 0; font-size: 14px; }
.pm-folder-count {
  font-size: 11px; font-weight: 500; color: var(--muted);
  background: #fff; border: 1px solid #e5e7eb; padding: 1px 8px; border-radius: 999px; margin-left: 6px;
}
.pm-drive-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.pm-drive-tile {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.pm-drive-tile img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; background: #f3f4f6;
}
.pm-drive-placeholder {
  width: 100%; aspect-ratio: 1 / 1; background: #f3f4f6; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.pm-drive-name { font-size: 11px; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pm-drafts-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.pm-draft-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px;
  display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: center;
  position: relative;
}
.pm-draft-card:hover { background: #f9fafb; }
.pm-draft-card img, .pm-draft-card .pm-drive-placeholder {
  width: 60px; height: 60px; border-radius: 4px; object-fit: cover;
}
.pm-draft-body { min-width: 0; }
.pm-draft-title { font-size: 13px; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-draft-meta { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.pm-draft-error { font-size: 11px; color: #b91c1c; margin-top: 4px; }
.pm-draft-actions { display: flex; flex-direction: column; gap: 2px; }
.pm-draft-action {
  background: transparent; border: none; cursor: pointer; padding: 4px 6px;
  font-size: 13px; color: var(--muted); border-radius: 4px;
}
.pm-draft-action:hover { background: #f3f4f6; color: #1f2937; }
.pm-draft-trash:hover { background: #fef2f2; color: #b91c1c; }

.pm-pill {
  display: inline-block; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
}
.pm-pill-wallpaper { background: #eef2ff; color: #4338ca; }
.pm-pill-mural { background: #fef3c7; color: #92400e; }
.pm-status-pending, .pm-status-processing { background: #fef3c7; color: #92400e; }
.pm-status-processing { animation: pmPulse 1.5s infinite; }
@keyframes pmPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.pm-status-ready_for_review { background: #dcfce7; color: #166534; }
.pm-status-error { background: #fee2e2; color: #991b1b; }
.pm-status-published { background: #dbeafe; color: #1e40af; }

/* Review modal */
.pm-review-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; }
@media (max-width: 800px) { .pm-review-grid { grid-template-columns: 1fr; } }
.pm-review-section-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 6px 0;
}
.pm-render-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.pm-render-tile {
  position: relative; display: block; aspect-ratio: 1 / 1; background: #f3f4f6;
  border-radius: 6px; overflow: hidden; text-decoration: none;
}
.pm-render-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-render-tile-label {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  background: rgba(15,23,42,0.7); color: #fff;
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-pattern-thumb {
  width: 100%; max-width: 200px; border-radius: 6px; border: 1px solid #e5e7eb;
}
.pm-stores { display: flex; flex-direction: column; gap: 6px; }
.pm-store-checkbox {
  display: grid; grid-template-columns: 18px 1fr auto auto; gap: 8px; align-items: center;
  padding: 6px 10px; background: #fafafa; border: 1px solid #eee; border-radius: 6px;
  cursor: pointer; font-size: 13px;
}
.pm-store-checkbox input { width: 14px; height: 14px; cursor: pointer; }
.pm-store-price {
  font-size: 11px; font-weight: 700; color: #0f172a;
  background: #ecfeff; border: 1px solid #a5f3fc; padding: 2px 8px; border-radius: 999px;
}
.pm-store-price-missing { background: #fff7ed; border-color: #fed7aa; color: #9a3412; font-weight: 500; }
.pm-store-url { font-size: 11px; color: var(--muted); font-family: monospace; }
.pm-error-banner {
  background: #fee2e2; border: 1px solid #fecaca; color: #991b1b;
  padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px;
}
.pm-publish-results {
  background: #f9fafb; border: 1px solid #eee; border-radius: 6px;
  padding: 10px 14px; font-size: 13px; line-height: 1.6; margin: 12px 0;
}

/* New Artist modal — existing-contact typeahead + inline category creation */
.na-contact-results {
  margin-top: 4px; max-height: 240px; overflow-y: auto;
  border: 1px solid #eee; border-radius: 6px; background: #fff;
  display: flex; flex-direction: column;
}
.na-contact-results:empty { display: none; }
.na-contact-row {
  text-align: left; background: transparent; border: none; cursor: pointer;
  padding: 8px 10px; border-bottom: 1px solid #f3f4f6; font-size: 13px;
  display: flex; flex-direction: column; gap: 2px;
}
.na-contact-row:last-child { border-bottom: none; }
.na-contact-row:hover { background: #f9fafb; }
.na-contact-row-name  { font-weight: 600; color: #1f2937; }
.na-contact-row-email { font-size: 11px; color: #9ca3af; }
.na-contact-empty {
  padding: 10px; font-size: 12px; color: var(--muted); font-style: italic;
}
.na-contact-picked {
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d;
  padding: 12px 14px; border-radius: 6px; margin-top: 4px; font-size: 13px;
}
.na-contact-picked .na-contact-row-email { color: #166534; }
.na-invite-panel { display: flex; flex-direction: column; gap: 10px; }
.na-invite-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.na-invite-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.na-invite-hint { font-size: 12px; color: #14532d; line-height: 1.5; padding-top: 6px; border-top: 1px dashed #bbf7d0; margin-top: 4px; }
.na-woo-cat-row { display: flex; gap: 8px; align-items: stretch; }
.na-cat-create-inline {
  display: flex; gap: 6px; margin-top: 8px; align-items: center;
}
.na-cat-create-inline input { flex: 1; min-width: 0; }
.na-drive-created {
  margin-top: 6px; padding: 6px 10px; background: #f0fdf4;
  border: 1px solid #bbf7d0; color: #14532d; border-radius: 6px;
  font-size: 12px;
}
.na-drive-created a { color: #14532d; text-decoration: underline; }

/* Edit Artist modal — read-only "Public profile" section pulled from Woo */
.ea-public-profile {
  margin: 16px 0; padding: 12px; background: #fafafa; border: 1px solid #eee;
  border-radius: 8px;
}
.ea-public-profile-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.ea-public-profile-source { font-size: 11px; color: var(--muted); font-style: italic; }
.ea-public-profile-body {
  display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; min-height: 56px;
}
.ea-public-profile-avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 1px solid #e5e7eb; background: #fff;
  display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 18px;
}
.ea-public-profile-avatar.ea-empty { background: #f3f4f6; }
.ea-public-profile-text { min-width: 0; }
.ea-public-profile-bio {
  font-size: 13px; line-height: 1.55; color: #1f2937; max-height: 180px; overflow-y: auto;
  background: #fff; border: 1px solid #eef0f3; border-radius: 6px; padding: 10px 12px;
}
.ea-public-profile-bio.ea-empty { color: #9ca3af; font-style: italic; }

/* Artist broadcast modal — preview pane runs full-width; recipients stack above */
.ab-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ab-recip-pane, .ab-preview-pane { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 12px; min-width: 0; margin-top: 12px; }
/* Compact multi-column checklist so 20+ artists fit without dominating the modal */
.ab-recip-grid {
  display: grid; gap: 4px 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 8px 10px;
  max-height: 220px; overflow-y: auto;
}
.ab-recip-row {
  display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center;
  padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 13px; min-width: 0;
}
.ab-recip-row:hover { background: #f9fafb; }
.ab-recip-row input { grid-row: span 2; align-self: center; }
.ab-recip-name { font-weight: 500; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-recip-meta { grid-column: 2; font-size: 11px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-recip-actions { display: flex; gap: 4px; align-items: center; }
.ab-missing { margin-top: 8px; padding: 8px 10px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; font-size: 11px; color: #9a3412; line-height: 1.4; }
.ab-preview-stats { padding: 4px 0; }
.ab-preview-iframe { width: 100%; height: 640px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f4f6f8; }
/* Roomier modal for the broadcast composer */
.ab-broadcast-modal { max-width: 880px; }

/* Ticket detail action cluster (Close / Delete / Junk) */
.ticket-actions { display: flex; gap: 4px; margin-left: auto; }
.ticket-action-danger:hover { background: #fef2f2; color: var(--red); border-color: #fca5a5; }

/* Junk preview banner inside the modal */
.jnk-preview {
  background: #fef9c3; color: #713f12;
  padding: 10px 12px; border-radius: 6px;
  font-size: 13px; margin: 14px 0;
  border: 1px solid #fde68a;
}

/* Quick-actions on hover for each ticket card */
.ticket-card { position: relative; }
.ticket-card-hover-actions {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: none; gap: 4px;
}
.ticket-card:hover .ticket-card-hover-actions { display: flex; }
.ticket-card-hover-actions button {
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 9px; font-size: 11px; font-weight: 500;
  cursor: pointer; line-height: 1.4; color: var(--text);
}
.ticket-card-hover-actions button:hover { background: #f3f4f6; }
.ticket-card-hover-actions .hover-action-danger:hover { background: #fef2f2; color: var(--red); border-color: #fca5a5; }
/* Tags sit on the contact line (keeps cards to two rows) */
.ticket-card-tags { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Touch screens can't hover: keep the actions visible under the card */
@media (hover: none) {
  .ticket-card-hover-actions { display: flex; position: static; transform: none; margin-top: 8px; flex-wrap: wrap; }
}

/* Quote Builder card on inquiry tickets */
.quote-builder {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0 0 8px;
}
.quote-builder-head { display: none; }   /* caption is implicit from context */
.quote-builder-fields { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.quote-builder-row {
  display: flex; gap: 16px; flex-wrap: wrap;
  align-items: flex-end;
}
.qb-field-material { flex: 1; min-width: 180px; }
.qb-field-material select { width: 100%; max-width: none; }
.qb-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.qb-field-narrow { flex: 0 0 110px; min-width: 90px; }
.qb-field-type   { flex: 0 0 170px; min-width: 160px; }
.qb-type-toggle  {
  display: flex;
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff; overflow: hidden;
  height: 32px;
}
.qb-type-btn {
  flex: 1; padding: 0 10px;
  border: none; background: transparent;
  font-size: 12px; color: var(--text);
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background-color 0.1s, color 0.1s;
}
.qb-type-btn:last-child { border-right: none; }
.qb-type-btn:hover      { background: #f5f5f5; }
.qb-type-btn.active     { background: #C8102E; color: #fff; font-weight: 600; }
.qb-type-btn.active:hover { background: #a80d27; }
.qb-field span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.qb-field input, .qb-field select {
  padding: 6px 9px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff;
}
.quote-builder-summary {
  display: flex; align-items: center; gap: 16px;
  padding-top: 6px; border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.qb-stat { display: flex; flex-direction: column; gap: 2px; }
.qb-stat-label { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.qb-stat-value { font-size: 14px; color: var(--text); font-weight: 500; }
.qb-stat-total .qb-stat-value { font-size: 16px; font-weight: 700; color: #C8102E; }
/* margin-left:auto moved to .qb-actions */

/* Collapsible quote-builder shell — <details>/<summary> pattern.
   Summary is one horizontal row: caret · label · count · total · hint.
   Expanded body contains the line editor + totals block. */
.qb-shell {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  padding: 0;   /* override the legacy .quote-builder padding — summary + body handle spacing */
  margin: 0 0 8px;
}
.qb-shell > .qb-summary-line {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  border-radius: 6px;
  user-select: none;
  transition: background 0.12s;
}
.qb-shell > .qb-summary-line::-webkit-details-marker { display: none; }
.qb-shell > .qb-summary-line:hover { background: #f9fafb; }
.qb-shell[open] > .qb-summary-line {
  border-bottom: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
}
.qb-summary-caret {
  font-size: 10px; color: var(--muted);
  transition: transform 0.12s;
  width: 12px; text-align: center;
}
.qb-shell[open] > .qb-summary-line .qb-summary-caret { transform: rotate(90deg); }
.qb-summary-label {
  font-size: 11px; font-weight: 700;
  color: #1f2937;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.qb-summary-count {
  font-size: 12px; color: var(--muted);
}
.qb-summary-total {
  margin-left: auto;
  font-size: 14px; font-weight: 700;
  color: #C8102E;
}
.qb-summary-hint {
  font-size: 11px; color: #9ca3af; font-style: italic;
  padding-left: 8px; border-left: 1px solid var(--border);
}
@media (max-width: 640px) {
  .qb-summary-hint { display: none; }   /* screen too narrow for the hint */
}
.qb-body { padding: 12px 14px; }

/* Multi-line quote builder — repeatable line rows + totals block. */
.qb-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.qb-header-label {
  font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
  display: inline-flex; align-items: center; gap: 6px;
}
/* Little grey (i) info icon beside the section label. Tooltip fades in on
   hover / keyboard focus. Uses an italic serif "i" so it reads as info at
   very small sizes without an SVG. */
.qb-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: #9ca3af; color: #ffffff;
  font-family: 'Times New Roman', 'Georgia', serif;
  font-style: italic; font-weight: 700; font-size: 11px; line-height: 1;
  cursor: help; position: relative; text-transform: none; letter-spacing: 0;
  outline: none;
}
.qb-info:hover, .qb-info:focus { background: #6b7280; }
.qb-info-tip {
  position: absolute; z-index: 80;
  top: calc(100% + 8px); left: 0;
  min-width: 280px; max-width: 360px;
  padding: 10px 12px;
  background: #111827; color: #f9fafb;
  border-radius: 6px;
  font-family: system-ui, sans-serif;
  font-size: 12px; font-weight: 400; font-style: normal;
  line-height: 1.5; letter-spacing: 0; text-transform: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}
.qb-info-tip::before {
  content: ''; position: absolute; top: -6px; left: 6px;
  border: 6px solid transparent; border-top: 0; border-bottom-color: #111827;
}
.qb-info-tip strong { display: block; color: #ffffff; font-weight: 700; margin-bottom: 6px; }
.qb-info-tip .qb-info-line { display: block; margin-top: 6px; color: #d1d5db; }
.qb-info-tip .qb-info-line b { color: #ffffff; font-weight: 600; }
.qb-info:hover .qb-info-tip,
.qb-info:focus .qb-info-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* Panelisation note under a quote line - shows only when we bumped the
   width up to whole panels of material. Muted amber so it reads as info,
   not a warning. */
.qb-panels-note {
  flex-basis: 100%;
  margin-top: -2px;
  padding: 3px 8px;
  background: #fef3c7; color: #92400e;
  border-radius: 3px;
  font-size: 11px; font-weight: 600;
}
.qb-lines { display: flex; flex-direction: column; gap: 8px; }
.qb-empty {
  padding: 12px 14px;
  background: #fafafa;
  border: 1px dashed var(--border); border-radius: 6px;
  color: var(--muted); font-size: 13px; text-align: center;
}
.qb-line-row {
  position: relative;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding: 10px 34px 10px 12px;   /* right padding = space for the ✕ */
  background: #fafafa;
  border: 1px solid var(--border); border-radius: 6px;
}
.qb-line-row:hover { background: #f5f5f5; }
/* Design chooser (row 1 of each quote line, full width). */
.qb-line-design { flex-basis: 100%; }
.qb-field-design { flex: 1; min-width: 220px; }
.qb-design-input-row { display: flex; gap: 6px; align-items: center; }
.qb-design-input-row input { flex: 1; min-width: 0; }
.qb-design-picked { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #fff; border: 1px solid var(--border); border-radius: 5px; }
.qb-design-picked img { width: 36px; height: 36px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.qb-design-noimg { display: block; width: 36px; height: 36px; background: #f3f4f6; border-radius: 3px; flex-shrink: 0; }
.qb-design-picked-body { flex: 1; min-width: 0; }
.qb-design-picked-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-design-picked-name a { color: var(--text); text-decoration: none; }
.qb-design-picked-name a:hover { text-decoration: underline; }
.qb-design-picked-sku { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Search-in-progress inline dropdown */
.qb-design-search { position: relative; }
.qb-design-search .qb-field-design { display: block; }
.qb-design-cancel { position: absolute; top: 0; right: 0; }
.qb-design-results { position: absolute; z-index: 60; left: 0; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid var(--border); border-radius: 5px; max-height: 260px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.qb-design-results:empty { display: none; }
.qb-design-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; background: transparent; border: none; border-bottom: 1px solid #f3f4f6; text-align: left; cursor: pointer; }
.qb-design-row:hover { background: #fef2f2; }
.qb-design-row:last-child { border-bottom: none; }
.qb-design-row img { width: 32px; height: 32px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.qb-design-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qb-design-row-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-design-row-sku { font-size: 10px; color: var(--muted); }
.qb-design-loading, .qb-design-empty { padding: 8px; font-size: 12px; color: var(--muted); }
.qb-line-remove {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  background: transparent; border: none;
  color: var(--muted); font-size: 12px;
  cursor: pointer; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.qb-line-remove:hover { background: #fee2e2; color: #b91c1c; }
.qb-totals {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border); border-radius: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.qb-totals-row {
  display: flex; justify-content: space-between;
  font-size: 13px; color: #374151;
}
.qb-totals-discount { color: #16a34a; }
.qb-stale-hint {
  padding: 6px 10px;
  margin-bottom: 8px;
  background: #fef3c7;
  color: #92400e;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  font-size: 12px;
  cursor: help;
}
.qb-totals-total {
  padding-top: 6px; border-top: 1px solid var(--border);
  font-size: 16px; font-weight: 700; color: #C8102E;
  margin-top: 4px;
}
/* margin-left:auto moved to .qb-actions */

/* Stage Pipeline (chevron stepper) */
.ticket-pipeline {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin-bottom: 8px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.pipeline-track {
  display: flex; align-items: center; min-width: 0;
  overflow-x: auto; flex-wrap: nowrap;
}

/* All ticket action buttons (Reply, Quote, Proof, Convert) sit together at the top right */
.ticket-actions-row {
  display: flex; gap: 6px; flex-shrink: 0;
  flex-wrap: wrap; justify-content: flex-end;
}

/* When the modal renders a ticket detail, cap the frame at 88vh and make the
   entire content scroll as one page — so the message thread, quote builder,
   tasks section, etc. flow naturally rather than fighting for space. Previous
   behaviour let the thread absorb all remaining space via flex:1, which
   pushed emails off-screen when the quote grew to multiple lines. */
.modal:has(.ticket-detail) {
  height: 88vh;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal:has(.ticket-detail) #modal-content {
  flex: 1; min-height: 0;
  overflow-y: auto;
}
.ticket-detail .ticket-thread {
  max-height: none;   /* no internal scroll — parent handles it */
  overflow: visible;
}
@media (max-width: 768px) {
  .modal:has(.ticket-detail) { height: 100vh; max-height: 100vh; }
}
.pipeline-track::-webkit-scrollbar { height: 4px; }

.pipeline-step {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 18px;
  font-family: inherit;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: #e5e7eb; color: #6b7280;
  border: none; cursor: pointer; flex-shrink: 0;
  /* Chevron: notch on left, point on right */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
  transition: background 0.15s, color 0.15s;
}
.pipeline-step:first-child {
  /* No left notch for the first step */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  border-radius: 4px 0 0 4px; padding-left: 14px;
}
.pipeline-step:last-of-type {
  /* No right point for the last step */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
  border-radius: 0 4px 4px 0; padding-right: 14px;
}
.pipeline-step + .pipeline-step { margin-left: -10px; }

.pipeline-step:hover { filter: brightness(0.95); }
.pipeline-step-completed { background: #16a34a; color: #fff; }
.pipeline-step-current   { background: #C8102E; color: #fff; }
.pipeline-step-future    { background: #e5e7eb; color: #6b7280; }

.pipeline-check {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

.pipeline-mark-lost {
  display: flex; align-items: center; justify-content: center;
  padding: 5px 12px; height: 26px;
  margin-left: 8px;
  background: #fff; color: var(--red);
  border: 1px solid #fca5a5; border-radius: 4px;
  font-family: inherit;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer; flex-shrink: 0;
  transition: all 0.15s;
}
.pipeline-mark-lost:hover { background: #fee2e2; }

.ticket-pipeline-lost-banner {
  background: #fef2f2;
  border-color: #fca5a5;
}
.pipeline-lost-label {
  flex: 1;
  font-size: 13px; font-weight: 600; color: var(--red);
}

/* Type / Status pill toggles (replaces dropdowns) — desktop lays them out
   as label + inline value pills; mobile stacks label above values. */
.ticket-toggle-group {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.ticket-toggle-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.ticket-toggle-values {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0;
}
.ticket-toggle-btn {
  padding: 4px 10px; font-size: 11px; font-weight: 500;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; font-family: inherit;
  text-transform: capitalize;
  transition: all 0.15s;
}
.ticket-toggle-btn:hover { background: #f3f4f6; }
.ticket-toggle-btn.active {
  background: var(--blue, #2563eb); color: #fff; border-color: var(--blue, #2563eb);
}

/* Designer-discount stat highlights */
.qb-discount {
  background: #dcfce7; color: #16a34a;
  padding: 1px 6px; border-radius: 3px; font-size: 12px; font-weight: 600;
}

.ticket-msg-source {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
  background: #ede9fe; color: #6d28d9;
  text-transform: uppercase; letter-spacing: 0.06em;
}

.qb-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* Reprint modal */
.reprint-orders {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px; max-height: 200px; overflow-y: auto;
}
.reprint-order-card {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; cursor: pointer; background: #fff;
  transition: all 0.15s;
}
.reprint-order-card:hover { background: #f9fafb; border-color: var(--blue); }
.reprint-order-card.selected { background: #eff6ff; border-color: var(--blue, #2563eb); }
.reprint-order-num { font-size: 13px; font-weight: 600; color: var(--text); }
.reprint-order-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

.reprint-items { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.reprint-item-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 4px; cursor: pointer;
  transition: background 0.1s;
}
.reprint-item-row:hover { background: #f9fafb; }
.reprint-item-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.reprint-item-thumb {
  width: 36px; height: 36px; object-fit: cover; border-radius: 4px;
  background: var(--bg); flex-shrink: 0;
}
.reprint-item-thumb-blank { display: flex; align-items: center; justify-content: center; font-size: 16px; }
.reprint-item-body { flex: 1; min-width: 0; }
.reprint-item-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reprint-item-detail { font-size: 11px; color: var(--muted); display: flex; gap: 8px; margin-top: 2px; }

/* Clickable dashboard cards (ticket counts) */
.dash-card-clickable { cursor: pointer; transition: all 0.15s; }
.dash-card-clickable:hover {
  border-color: var(--blue, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
}

/* Filter banner shown when drilling into stage/category from the dashboard */
.tickets-filter-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; margin-bottom: 8px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px;
  font-size: 13px; color: #1e40af;
}
.tickets-filter-banner button {
  background: #fff; border: 1px solid #bfdbfe; border-radius: 4px;
  padding: 3px 10px; font-size: 12px; color: #1e40af; cursor: pointer;
}
.tickets-filter-banner button:hover { background: #dbeafe; }

@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Dashboard section headers ("Sales" / "Customer Service") */
.dash-section-header {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 10px;
  margin: 4px 0 -4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text);
}
.dash-section-sub {
  font-size: 11px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  color: var(--muted);
}

/* Header right-side controls: clock display + user chip. Greeting was
   removed to make space for the clock. */
.header-greeting {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
/* Tighten the dashboard top now that the greeting moved out */
.dash-grid { padding-top: 16px; }

/* ─── Overview page cards ─────────────────────────────────────────────────
   Business-metrics grid: 4 columns of narrow stat cards, plus wider cards
   that span 2 columns. Analytics stays full-width via .ov-full. */
.ov-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 12px 16px 24px;
}
.ov-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
/* Grid items default to min-width:auto, so one wide table or label pushed
   the whole column (and the page) wider than a phone. Let them shrink and
   scroll their own wide content instead. */
.ov-grid > * { min-width: 0; }
.ov-grid .dash-sales-inner, .ov-grid .ov-card { overflow-x: auto; }
.ov-card-wide { grid-column: span 2; }
.ov-full      { grid-column: 1 / -1; }
.ov-card-title {
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.ov-card-sub { font-size: 11px; color: var(--muted); margin-bottom: 12px; }

/* Big-number cards (conversion rates, avg order) */
.ov-big-num {
  font-size: 32px; font-weight: 700; color: #C8102E;
  font-variant-numeric: tabular-nums; line-height: 1.1;
  margin-top: 4px;
}
.ov-big-sub { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

/* Inquiry week-over-week card */
.ov-week-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 4px;
}
.ov-week-col-muted { color: var(--muted); }
.ov-week-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.ov-week-col-muted .ov-week-label { color: #9ca3af; }
.ov-week-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.ov-stat {
  text-align: center;
}
.ov-stat-num {
  font-size: 22px; font-weight: 700; color: #1f2937;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.ov-week-col-muted .ov-stat-num { color: #6b7280; font-weight: 600; }
.ov-stat-highlight { color: #C8102E; }
.ov-week-col-muted .ov-stat-highlight { color: #9ca3af; }
.ov-stat-lab { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }

.ov-delta {
  display: inline-block; margin-top: 6px;
  font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 3px;
}
.ov-delta-up   { background: #dcfce7; color: #166534; }
.ov-delta-down { background: #fee2e2; color: #991b1b; }
.ov-delta-flat { background: #f3f4f6; color: var(--muted); }

/* Contact sources — horizontal bar list */
.ov-source-list { display: flex; flex-direction: column; gap: 6px; }
.ov-source-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center; gap: 10px;
  font-size: 13px;
}
.ov-source-name { color: #1f2937; }
.ov-source-bar-wrap {
  height: 8px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}
.ov-source-bar {
  height: 100%;
  background: #C8102E;
  border-radius: 999px;
}
.ov-source-count {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: #1f2937;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.ov-source-pct { font-size: 11px; color: var(--muted); font-weight: 500; }
.ov-empty { color: var(--muted); font-size: 12px; padding: 8px 0; }

/* Head row for windowed cards — title on the left, 30/60/90 toggle on the right. */
.ov-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.ov-toggle-group {
  display: inline-flex;
  border: 1px solid var(--border); border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.ov-toggle-btn {
  background: transparent; border: none;
  padding: 3px 10px;
  font: inherit; font-size: 11px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ov-toggle-btn:hover { background: #f3f4f6; color: #1f2937; }
.ov-toggle-btn.active {
  background: #C8102E; color: #fff;
}
.ov-toggle-btn + .ov-toggle-btn { border-left: 1px solid var(--border); }
.ov-toggle-btn.active + .ov-toggle-btn,
.ov-toggle-btn.active { border-left-color: #C8102E; }

/* Current vs previous side-by-side */
.ov-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  align-items: start;
}
.ov-compare-col {
  padding: 8px 0;
}
.ov-compare-previous {
  border-left: 1px solid var(--border); padding-left: 12px;
  opacity: 0.7;
}
.ov-compare-previous .ov-big-num { color: #6b7280; font-size: 22px; }
.ov-compare-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.ov-compare-delta {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--muted);
}

@media (max-width: 900px) {
  .ov-grid { grid-template-columns: repeat(2, 1fr); }
  .ov-card-wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ov-grid { grid-template-columns: 1fr; }
  .ov-source-row { grid-template-columns: 100px 1fr auto; }
  .ov-compare { grid-template-columns: 1fr; }
  .ov-week-cols { grid-template-columns: 1fr; gap: 12px; }
  .ov-grid .aw-table thead th, .ov-grid .aw-table tbody td { padding: 8px 8px; }
  .ov-compare-previous { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 8px; }
}

/* Clock in/out control — runs a live timer when clocked in, otherwise shows an em-dash. */
.header-chat-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.header-chat-toggle:hover { border-color: #9ca3af; }
.header-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.header-chat-state { font-weight: 600; }
.header-chat-toggle[data-online="true"] { color: #166534; border-color: #86efac; background: #f0fdf4; }
.header-chat-toggle[data-online="true"] .header-chat-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
@media (max-width: 768px) { .header-chat-label { display: none; } }
.header-clock {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  transition: background 0.12s, border-color 0.12s;
}
.header-clock[data-clocked-in="true"] {
  background: #ecfdf5;
  border-color: #6ee7b7;
}
.header-clock-timer {
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  min-width: 66px;
  text-align: center;
  letter-spacing: 0.02em;
}
.header-clock[data-clocked-in="false"] .header-clock-timer { color: var(--muted); }
.header-clock-btn {
  background: #C8102E; color: #fff;
  border: none;
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s;
}
.header-clock-btn:hover { background: #b0091e; }
.header-clock-btn-out { background: #6b7280; }
.header-clock-btn-out:hover { background: #4b5563; }

@media (max-width: 640px) {
  .header-clock-timer { min-width: 54px; font-size: 12px; }
  .header-clock-btn   { font-size: 11px; padding: 4px 10px; }
}

/* ─── Timecards page ──────────────────────────────────────────────────────
   Week grid: employees × Mon..Sun with row + column totals. */
#timecards-content { padding: 0 16px 24px; }
.tc-week-label {
  font-size: 14px; font-weight: 600; color: #1f2937;
  padding: 0 6px;
}
.tc-table-wrap { overflow-x: auto; margin: 0 16px; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.tc-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.tc-table thead th {
  padding: 10px 8px; text-align: center;
  background: #f9fafb;
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tc-table .tc-emp-head { text-align: left; padding-left: 14px; }
.tc-table .tc-total-head { text-align: right; padding-right: 14px; }
.tc-day-date { font-size: 10px; color: var(--muted); font-weight: 500; margin-top: 2px; letter-spacing: 0; text-transform: none; }
.tc-table tbody td { padding: 10px 8px; border-top: 1px solid var(--border); text-align: center; }
.tc-emp { text-align: left !important; padding-left: 14px !important; }
.tc-emp-name { font-weight: 600; color: #1f2937; }
.tc-emp-title { font-size: 11px; color: var(--muted); margin-top: 1px; }
.tc-cell {
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.tc-cell:hover { background: #f3f4f6; }
.tc-cell-has { color: #1f2937; font-weight: 500; }
.tc-cell-empty { color: #d1d5db; }
.tc-cell-active { background: #ecfdf5; }
.tc-active-dot {
  display: inline-block; margin-left: 4px;
  color: #16a34a; font-size: 8px; vertical-align: middle;
}
.tc-total { font-weight: 700; text-align: right !important; padding-right: 14px !important; font-variant-numeric: tabular-nums; }
.tc-table tfoot td {
  padding: 10px 8px; border-top: 2px solid var(--border);
  background: #f9fafb; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600; color: #374151;
}
.tc-col-total-label { text-align: left !important; padding-left: 14px !important; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
.tc-grand-total { text-align: right !important; padding-right: 14px !important; font-size: 14px; color: #C8102E; }

/* Timecard cell edit modal */
.tc-entries { display: flex; flex-direction: column; gap: 6px; }
.tc-entry-row {
  display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px;
  background: #fafafa;
  border: 1px solid var(--border); border-radius: 6px;
}
.tc-entry-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tc-entry-field input {
  padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit;
}
.tc-entry-field input:focus { outline: none; border-color: var(--primary); }
.tc-entry-total { font-weight: 600; color: #1f2937; margin: 0 6px; font-variant-numeric: tabular-nums; }

/* Employee self-view — compact per-day cards (read-only). Sits inside the
   narrow modal so we render vertically instead of a wide grid. */
.my-tc-nav {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 8px;
}
.my-tc-week-label { font-size: 13px; font-weight: 600; color: #1f2937; padding: 0 4px; }
.my-tc-week-total {
  font-size: 12px; color: var(--muted);
  padding: 6px 10px; background: #f9fafb;
  border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 10px;
}
.my-tc-week-total strong { color: #C8102E; font-variant-numeric: tabular-nums; }
.my-tc-days { display: flex; flex-direction: column; gap: 6px; }
.my-tc-day {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
}
.my-tc-day-has { background: #f9fafb; }
.my-tc-day-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
}
.my-tc-day-dow  { font-size: 13px; font-weight: 600; color: #1f2937; }
.my-tc-day-date { font-size: 11px; color: var(--muted); margin-top: 1px; }
.my-tc-day-total {
  font-size: 13px; font-weight: 700; color: #C8102E;
  font-variant-numeric: tabular-nums;
}
.my-tc-day:not(.my-tc-day-has) .my-tc-day-total { color: var(--muted); font-weight: 400; }
.my-tc-day-entries {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: #374151;
}
.my-tc-entry {
  display: flex; justify-content: space-between;
  padding: 3px 8px;
  background: #fff;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.my-tc-entry-hrs { color: var(--muted); font-weight: 600; }
.my-tc-empty { color: #d1d5db; font-size: 11px; padding: 2px 0; }

/* Employee self-view commissions — mirrors my-tc styling for consistency. */
.my-comm-filters {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.my-comm-filters label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.my-comm-filters input {
  padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 5px;
  background: #fff;
}
.my-comm-filters input:focus { outline: none; border-color: var(--primary); }

.my-comm-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 12px;
}
.my-comm-tile {
  background: #fafafa; border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px;
}
.my-comm-tile-lab { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.my-comm-tile-val { font-size: 18px; font-weight: 700; color: #111827; margin-top: 3px; font-variant-numeric: tabular-nums; }
.my-comm-tile-total .my-comm-tile-val { color: #16a34a; }
.my-comm-tile-sub { font-size: 10px; color: var(--muted); margin-top: 3px; }

.my-comm-role-solo   { color: #059669; font-weight: 600; }
.my-comm-role-owner  { color: #2563eb; font-weight: 600; }
.my-comm-role-assist { color: #7c3aed; font-weight: 600; }

.my-comm-pool {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 12px; padding: 12px 14px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px;
}
.my-comm-pool-amount { font-size: 18px; font-weight: 700; color: #059669; font-variant-numeric: tabular-nums; }

/* Pay-period pills on each sale row + the By-pay-period rollup section. */
.my-comm-pp-pill {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; margin-left: 4px;
  background: #e0e7ff; color: #3730a3; letter-spacing: 0.02em;
}
.my-comm-pp-pill.my-comm-pp-current { background: #dbeafe; color: #1e40af; }
.my-comm-pp-pill.my-comm-pp-paid    { background: #dcfce7; color: #166534; }

.my-comm-pp-section {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}
.my-comm-pp-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; }
.my-comm-pp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.my-comm-pp-table th, .my-comm-pp-table td { padding: 6px 10px; border-bottom: 1px solid #f3f4f6; text-align: left; }
.my-comm-pp-table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.my-comm-pp-table tbody tr:last-child td { border-bottom: none; }
.my-comm-pp-table td { font-variant-numeric: tabular-nums; }
.my-comm-pp-status-pill {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 3px; letter-spacing: 0.03em;
}
.my-comm-pp-status-paid      { background: #dcfce7; color: #166534; }
.my-comm-pp-status-partial   { background: #fef3c7; color: #92400e; }
.my-comm-pp-status-current   { background: #dbeafe; color: #1e40af; }
.my-comm-pp-status-scheduled { background: #e0e7ff; color: #3730a3; }
.my-comm-pp-status-due       { background: #fee2e2; color: #991b1b; }

/* ─── "How I Earn" plan modal ─────────────────────────────────────────── */
.modal-box.how-i-earn-modal {
  max-width: 780px; max-height: 90vh;
  padding: 32px 40px; position: relative;
}
.modal-box.how-i-earn-modal #modal-content {
  max-height: calc(90vh - 64px); overflow-y: auto;
}
.modal-close-x {
  position: absolute; top: 14px; right: 18px;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1; color: #6b7280;
}
.modal-close-x:hover { background: #f3f4f6; color: #111827; }

.hie-doc { font-size: 14px; color: #17211C; line-height: 1.55; }
.hie-doc h1 { font-family: 'Newsreader', Georgia, serif; font-size: 32px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.hie-doc h2 { font-family: 'Newsreader', Georgia, serif; font-size: 22px; font-weight: 600; margin: 28px 0 4px; letter-spacing: -0.005em; color: #17211C; }
.hie-eyebrow { font-size: 11px; font-weight: 700; color: #6D7973; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 6px; }
.hie-mast { padding-bottom: 18px; border-bottom: 1px solid #D5DAD3; }
.hie-stand { font-size: 15px; color: #414D46; margin: 6px 0 0; max-width: 62ch; }
.hie-summary { background: #F8F9F6; border: 1px solid #D5DAD3; border-radius: 6px; padding: 18px 20px; margin: 22px 0; }
.hie-big { font-size: 17px; font-weight: 500; margin: 0 0 10px; color: #17211C; }
.hie-summary p { margin: 8px 0; color: #414D46; }
.hie-sub { color: #414D46; margin: 4px 0 14px; max-width: 62ch; }

.hie-ladder { display: grid; gap: 12px; margin: 14px 0 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hie-rung { border: 1px solid #D5DAD3; border-left-width: 4px; border-radius: 6px; padding: 14px 16px; background: #F8F9F6; }
.hie-rung.hie-r1 { border-left-color: #94a3b8; }
.hie-rung.hie-r2 { border-left-color: #2563eb; }
.hie-rung.hie-r3 { border-left-color: #059669; }
.hie-lvl { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6D7973; }
.hie-rate { font-size: 24px; font-weight: 700; color: #17211C; margin: 2px 0; font-variant-numeric: tabular-nums; }
.hie-name { font-size: 13px; color: #414D46; margin-bottom: 8px; font-style: italic; }
.hie-rung ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: #414D46; }
.hie-rung li { margin: 3px 0; }

.hie-tablewrap { border: 1px solid #D5DAD3; border-radius: 6px; overflow: hidden; margin: 8px 0 14px; }
.hie-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hie-table th, .hie-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #E7EAE5; }
.hie-table thead th { background: #F8F9F6; font-weight: 600; }
.hie-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.hie-table tbody tr:last-child td { border-bottom: none; }

.hie-split { background: #F8F9F6; border: 1px solid #D5DAD3; border-radius: 6px; padding: 16px 18px; margin: 8px 0 14px; }
.hie-splitbar { display: flex; height: 28px; border-radius: 4px; overflow: hidden; margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.hie-seg { display: flex; align-items: center; justify-content: center; color: #fff; }
.hie-seg-owner { flex: 0 0 70%; background: #2C5F53; }
.hie-seg-assist { flex: 0 0 30%; background: #7A4A62; }
.hie-splitlegend { margin: 0; padding-left: 18px; }
.hie-splitlegend li { margin: 6px 0; font-size: 13px; color: #414D46; }

.hie-note { background: #F2E7D0; border-left: 3px solid #8A6318; border-radius: 4px; padding: 12px 14px; margin: 12px 0; }
.hie-note-lab { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8A6318; margin-bottom: 4px; }
.hie-note p { margin: 0; font-size: 13px; color: #414D46; }

.hie-steps { list-style: none; padding: 0; margin: 8px 0 14px; counter-reset: hie; }
.hie-steps li { counter-increment: hie; padding: 10px 12px 10px 44px; position: relative; background: #F8F9F6; border: 1px solid #D5DAD3; border-radius: 5px; margin-bottom: 6px; font-size: 13px; }
.hie-steps li::before {
  content: counter(hie); position: absolute; left: 12px; top: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #2C5F53; color: #fff; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}

.hie-pill { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 3px; }
.hie-pill-none { background: #F3E1DD; color: #9A4A3C; }
.hie-pill-keep { background: #DCE7E2; color: #1E4239; }
.hie-pill-part { background: #F2E7D0; color: #8A6318; }

.hie-calc { background: #F8F9F6; border: 1px solid #D5DAD3; border-radius: 8px; padding: 18px 20px; margin: 10px 0 14px; }
.hie-calc-in { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
@media (max-width: 640px) { .hie-calc-in { grid-template-columns: 1fr; } }
.hie-field label, .hie-flab { display: block; font-size: 12px; font-weight: 600; color: #414D46; margin-bottom: 6px; }
.hie-val { font-variant-numeric: tabular-nums; color: #17211C; }
.hie-field input[type="range"] { width: 100%; }
.hie-seg-ctrl { display: flex; gap: 4px; background: #E7EAE5; padding: 3px; border-radius: 6px; }
.hie-seg-ctrl button {
  flex: 1; padding: 6px 8px; font-size: 12px;
  background: transparent; border: none; border-radius: 4px; cursor: pointer;
  color: #414D46; font-weight: 500;
}
.hie-seg-ctrl button[aria-pressed="true"] { background: #fff; color: #17211C; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.hie-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid #D5DAD3; }
@media (max-width: 640px) { .hie-readout { grid-template-columns: 1fr; } }
.hie-stat { text-align: left; }
.hie-sl2 { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6D7973; }
.hie-sv { font-size: 22px; font-weight: 700; color: #2C5F53; font-variant-numeric: tabular-nums; margin-top: 2px; }
.hie-sn { font-size: 11px; color: #6D7973; margin-top: 2px; }
.hie-math { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #414D46; padding-top: 12px; border-top: 1px solid #D5DAD3; display: flex; flex-direction: column; gap: 3px; font-variant-numeric: tabular-nums; }
.hie-mtot { color: #17211C; font-weight: 700; margin-top: 4px; }

.hie-faq { border-top: 1px solid #D5DAD3; margin: 8px 0 14px; }
.hie-qa { padding: 12px 0; border-bottom: 1px solid #D5DAD3; }
.hie-q { font-weight: 600; font-size: 13px; margin: 0 0 4px; color: #17211C; }
.hie-a { font-size: 13px; color: #414D46; margin: 0; max-width: 62ch; }

.my-comm-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.my-comm-row {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}
.my-comm-row-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.my-comm-row-contact { font-weight: 600; color: #1f2937; font-size: 13px; }
.my-comm-row-subject { font-size: 12px; color: var(--muted); margin-top: 1px; }
.my-comm-row-amount {
  font-size: 15px; font-weight: 700; color: #16a34a;
  font-variant-numeric: tabular-nums;
}
.my-comm-row-meta {
  margin-top: 5px;
  font-size: 11px; color: var(--muted);
  display: flex; gap: 4px; flex-wrap: wrap;
}
.my-comm-empty {
  padding: 20px; text-align: center; color: var(--muted); font-size: 13px;
  background: #fafafa; border-radius: 6px;
}

/* ── Contact detail page (replaces the old modal-based profile) ───────────── */

.contact-detail-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.contact-detail-breadcrumb {
  font-size: 13px; color: var(--muted); font-weight: 500;
}

.contact-detail-page {
  padding: 20px 28px 28px;
  max-width: 1100px;
}

.contact-detail-header {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 22px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 16px;
}
.contact-detail-headinfo { flex: 1; min-width: 0; }
.contact-detail-headinfo h2 { font-size: 22px; font-weight: 600; }

.contact-detail-stats {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex-shrink: 0;
}
.contact-stat {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.contact-stat-value {
  font-size: 16px; font-weight: 600; color: var(--text);
  text-transform: none; letter-spacing: 0;
}
.contact-stat-sales { color: var(--green); font-size: 18px; font-weight: 700; }

/* Section cards (Tickets / Orders / Samples / future) */
.contact-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.contact-section-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden;
}
.contact-section-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 18px;
  background: #f9fafb; border-bottom: 1px solid var(--border);
}
.contact-section-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text);
}
.contact-section-count {
  font-size: 11px; color: var(--muted);
  background: #fff; border: 1px solid var(--border);
  padding: 1px 8px; border-radius: 10px;
}
.contact-section-body {
  padding: 6px 12px 12px;
  /* Cap the card body height so sections with lots of rows (tasks, portal
     activity, emails, chat history, etc.) stay a predictable size on the
     contact page. The body scrolls internally once it exceeds the cap so
     the overall page stays navigable. */
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.contact-section-body::-webkit-scrollbar { width: 8px; }
.contact-section-body::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
.contact-section-body::-webkit-scrollbar-thumb:hover { background: #d1d5db; }
.contact-section-empty {
  padding: 14px; color: var(--muted); font-size: 13px; font-style: italic;
}

/* Task rows on contact detail — compact, click-through to parent ticket. */
.contact-task-row .contact-task-kind {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #4338ca; background: #eef2ff;
  padding: 2px 7px; border-radius: 4px;
}
.contact-task-row-done,
.contact-task-row-dismissed { opacity: 0.55; }
.contact-task-row-done .profile-record-name { text-decoration: line-through; }
.contact-task-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px;
  background: #f3f4f6; color: #6b7280;
}
.contact-task-status-done      { background: #dcfce7; color: #16a34a; }
.contact-task-status-dismissed { background: #fee2e2; color: #b91c1c; }

/* ─── Order detail (shown as a modal from the Contact page etc.) ─────
   Styled as a stack of proper cards instead of thin dividers so the
   sheet reads as part of the CRM's main design language (same chrome
   as the contact-section-card and ticket-detail blocks). Larger text,
   more breathing room, less "condensed table" feel.                   */
.order-detail-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.order-detail-section:first-of-type { margin-top: 18px; }
.order-detail-section-title {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.order-detail-kv {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; font-size: 14px; line-height: 1.4;
  border-bottom: 1px solid #f3f4f6;
}
.order-detail-kv:last-child { border-bottom: none; }
.order-detail-kv > span:first-child {
  color: var(--muted); font-weight: 500;
  flex-shrink: 0; min-width: 140px;
}
.order-detail-kv > span:last-child {
  color: #1f2937; text-align: right; font-variant-numeric: tabular-nums;
  min-width: 0; word-break: break-word;
}
.order-detail-kv code {
  font-size: 12.5px; background: #f3f4f6; padding: 2px 7px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Line items — card-ish rows with hover affordance so they read as
   individual records, not a condensed list. */
.order-detail-item {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 12px 0; border-bottom: 1px solid #f3f4f6;
  align-items: baseline;
}
.order-detail-item:last-child { border-bottom: none; }
.order-detail-item-name {
  font-weight: 600; color: #1f2937; font-size: 15px;
  grid-column: 1; min-width: 0; word-break: break-word;
}
.order-detail-item-meta {
  font-size: 13px; color: var(--muted); line-height: 1.5;
  grid-column: 1 / span 2; margin-top: 2px;
}
.order-detail-item-price {
  font-weight: 700; color: var(--green); font-size: 15px;
  font-variant-numeric: tabular-nums;
  grid-column: 2; justify-self: end;
}

/* Order detail head strip — title + source badge above the cards.
   Lives inside the modal body so wrap the inline styling for consistency. */
.order-detail-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-right: 52px; gap: 12px; margin-bottom: 8px;
}
.order-detail-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.order-detail-badges {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px; margin-bottom: 6px;
  background: #f9fafb; border: 1px solid var(--border); border-radius: 8px;
}
.order-detail-badges .order-detail-total {
  margin-left: auto; font-weight: 700; color: var(--green); font-size: 18px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 540px) {
  .order-detail-kv > span:first-child { min-width: 110px; }
  .order-detail-section { padding: 12px 14px; }
}

@media (min-width: 1024px) {
  .contact-detail-grid { grid-template-columns: 1fr 1fr; }
}

/* Duplicate banner is built from an indented template; card-notes keeps
   whitespace, which showed as a big indent. */
#contact-dup-banner .card-notes { white-space: normal; }

/* Contact page on phones: slim header, and section cards fold to a title +
   count row — tap to open (ticketsCard etc. toggle via contactSectionToggle).
   Open cards grow to full height so the page is the only scroller. */
@media (max-width: 768px) {
  .contact-detail-toolbar { padding: 8px 10px; gap: 8px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 10px; }
  .contact-detail-breadcrumb { display: none; }
  .contact-detail-page { padding: 0 0 16px; }
  .contact-detail-header { padding: 14px; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .contact-detail-header .profile-avatar { width: 40px; height: 40px; font-size: 17px; }
  .contact-detail-headinfo h2 { font-size: 18px; }
  .contact-detail-headinfo .card-meta { font-size: 12px; gap: 4px 10px; }
  .contact-detail-headinfo .card-meta > span { overflow-wrap: anywhere; }
  .contact-detail-stats { flex-basis: 100%; flex-direction: row; justify-content: flex-start; }
  .contact-detail-stats:not(:has(*)) { display: none; }
  .contact-stat { flex-direction: row; align-items: baseline; gap: 8px; }
  #contact-dup-banner .card-notes { font-size: 12px; padding: 10px 12px; }
  .contact-detail-grid { gap: 8px; }
  .contact-detail-grid > .contact-section-card { grid-column: auto !important; }
  .contact-section-head { padding: 12px 14px; cursor: pointer; align-items: center; flex-wrap: wrap; }
  .contact-section-head::before { content: '▸'; order: -1; width: 10px; color: var(--muted); font-size: 12px; }
  .contact-section-card.cs-open > .contact-section-head::before { content: '▾'; }
  .contact-section-head > :is(button, a, .btn):first-of-type { margin-left: auto; }
  .contact-section-card:not(.cs-open) > :not(.contact-section-head) { display: none; }
  .contact-section-card:not(.cs-open) > .contact-section-head { border-bottom: 0; background: #fff; }
  .contact-section-body { max-height: none; overflow-y: visible; padding: 4px 10px 10px; }
  .contact-section-body .profile-record { padding-left: 4px; padding-right: 4px; }
  .contact-section-body .sample-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px 0; }
  .contact-section-body .sample-tile-name { font-size: 11px; padding: 4px 6px 1px; }
  .contact-section-body .sample-tile-meta { padding: 0 6px 6px; }
}

/* Email rows in the contact detail card */
.email-row {
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.email-row:hover { background: #f9fafb; border-left-color: var(--blue, #2563eb); }
.email-row-top {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px;
}
.email-dir {
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
}
.email-dir-in  { background: #dbeafe; color: #1d4ed8; }
.email-dir-out { background: #dcfce7; color: #166534; }
.email-subject {
  font-weight: 500; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.email-date { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.email-snippet {
  font-size: 12px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.email-meta { font-size: 10px; color: var(--muted); margin-top: 3px; font-style: italic; }

/* Sample order rows on the contact detail card */
.sample-status {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.sample-status.status-active     { background: #fef9c3; color: #854d0e; }
.sample-status.status-dispatched { background: #e0f2fe; color: #0369a1; }
.sample-count {
  font-size: 11px; color: var(--muted);
}
.sample-products {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
.sample-product-chip {
  font-size: 11px;
  padding: 2px 8px; border-radius: 4px;
  background: #f3f4f6; color: var(--text);
  border: 1px solid var(--border);
}

/* Contacts list — filter chips + pagination */
.contact-filters {
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px 12px; max-width: 1100px;
}
.contact-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.contact-filter-chip {
  padding: 5px 12px; font-size: 12px; font-weight: 500;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 16px;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.contact-filter-chip:hover { background: #f3f4f6; }
.contact-filter-chip.active {
  background: var(--blue, #2563eb); color: #fff; border-color: var(--blue, #2563eb);
}
.contact-count { font-size: 12px; color: var(--muted); flex-shrink: 0; }

.contact-pagination {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 16px 28px 28px; max-width: 1100px;
}
.contact-page-label { font-size: 13px; color: var(--muted); }

/* Small "+ New ..." action button on contact-section card heads */
.contact-section-add {
  margin-left: auto;
  padding: 3px 10px;
  font-size: 11px; font-weight: 600;
  background: #fff; color: var(--blue, #2563eb);
  border: 1px solid var(--blue, #2563eb);
  border-radius: 4px;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.contact-section-add:hover {
  background: var(--blue, #2563eb); color: #fff;
}

/* Sample item grid on the contact detail page — thumbnails of every sample
   the contact has ever ordered (item-level, not order-level) */
.sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  padding: 8px 4px;
}
.sample-tile {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; cursor: pointer; background: #fff;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.sample-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: var(--blue, #2563eb);
}
.sample-tile-thumb {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg);
  display: block;
}
.sample-tile-thumb-blank {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--muted);
}
.sample-tile-name {
  font-size: 12px; font-weight: 500;
  padding: 6px 8px 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sample-tile-meta {
  font-size: 10px; color: var(--muted);
  padding: 0 8px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Visualizations grid — one tile per Room Visualizer lead. Tile is a static
   card (not clickable) but the image itself is a link to open the render
   full-size in a new tab. */
.viz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 8px 4px;
}
.viz-tile {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; background: #fff;
  transition: box-shadow 0.12s, border-color 0.12s;
}
.viz-tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: var(--blue, #2563eb); }
.viz-tile-thumb {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg);
  display: block;
  cursor: zoom-in;
}
.viz-tile-thumb-blank {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--muted); cursor: default;
}
.viz-tile-name {
  font-size: 12px; font-weight: 500;
  padding: 6px 8px 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.viz-tile-meta {
  font-size: 10px; color: var(--muted);
  padding: 0 8px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Artists ─────────────────────────────────────────────────────────────── */
.artist-card { border-left: 3px solid var(--primary); }
.artist-card.artist-inactive { opacity: 0.55; border-left-color: var(--border); }
.artist-sku-pill {
  font-family: monospace; font-size: 11px; font-weight: 700;
  background: #fff0f2; color: var(--primary);
  padding: 2px 7px; border-radius: 3px;
}
.artist-commission { font-weight: 600; color: var(--text); }
.artist-bio {
  font-size: 12px; color: var(--muted);
  margin-top: 6px; line-height: 1.5;
}
.artist-inactive-pill {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  background: #f3f4f6; color: var(--muted);
  padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-left: 6px;
}

/* Artist Profile card on the contact detail page */
.artist-profile-card { border-color: var(--primary); }
.artist-profile-stats {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 4px 6px;
}
.artist-stat { display: flex; flex-direction: column; gap: 2px; }
.artist-stat-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.artist-stat-value { font-size: 14px; font-weight: 600; color: var(--text); }
.artist-profile-bio {
  margin-top: 12px; padding: 10px 12px;
  background: #f9fafb; border-radius: 6px;
  font-size: 13px; color: var(--text); line-height: 1.5;
  white-space: pre-wrap;
}

/* ── Commissions ─────────────────────────────────────────────────────────── */
.comm-date {
  padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit;
}

.commissions-summary {
  display: flex; gap: 24px; flex-wrap: wrap;
  padding: 14px 18px; margin: 0 0 16px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
}
.comm-summary-stat { display: flex; flex-direction: column; gap: 4px; }
.comm-summary-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.comm-summary-value { font-size: 15px; font-weight: 600; color: var(--text); }
.comm-summary-total .comm-summary-value { font-size: 22px; font-weight: 700; color: var(--green); }

.commission-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 10px;
  border-left: 3px solid var(--primary);
}
.commission-card-empty { border-left-color: var(--border); opacity: 0.6; }
.commission-card-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.commission-card-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.commission-name { font-weight: 600; font-size: 15px; }
.commission-name:hover { text-decoration: underline; color: var(--blue); }
.commission-rate-badge {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
  background: #ede9fe; color: #6d28d9;
}
.commission-card-money {
  margin-left: auto; display: flex; align-items: baseline; gap: 12px;
}
.commission-gross { font-size: 12px; color: var(--muted); }
.commission-amount {
  font-size: 18px; font-weight: 700; color: var(--green);
}
.commission-card-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.commission-card-meta a { color: var(--blue); text-decoration: none; }
.commission-card-meta a:hover { text-decoration: underline; }
.commission-items { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

.commission-items-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.commission-items-table th {
  text-align: left; padding: 6px 8px; font-weight: 600;
  color: var(--muted); border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px;
}
.commission-items-table td {
  padding: 6px 8px; border-bottom: 1px solid #f3f4f6;
}
.commission-items-table a { color: var(--blue); text-decoration: none; }
.commission-items-table a:hover { text-decoration: underline; }

.commission-bill-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.commission-bill-status {
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.commission-bill-status.pending   { background: #fef3c7; color: #92400e; }
.commission-bill-status.paid      { background: #dcfce7; color: #166534; }
.commission-bill-status.requested { background: #dbeafe; color: #1e40af; }
.commission-bill-status.voided    { background: #fee2e2; color: #991b1b; text-decoration: line-through; }

/* Artist-centric index table on the Commissions tab. */
.commissions-index-table {
  width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px;
  background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; overflow: hidden;
}
.commissions-index-table th {
  background: #f9fafb; padding: 10px 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280;
  border-bottom: 1px solid var(--border, #e5e7eb); text-align: left;
}
.commissions-index-table td {
  padding: 10px 12px; border-bottom: 1px solid #f3f4f6;
}
.commissions-index-table tr:last-child td { border-bottom: none; }
.commissions-index-table tr:hover td { background: #f9fafb; }
.commissions-index-table .statement-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #4b5563; }
.commissions-legacy-wrap > summary {
  cursor: pointer; font-size: 13px; color: var(--muted, #6b7280); padding: 6px 0;
}

/* Admin statement + detail — reuse portal statement classes but ensure
   they look right against the admin modal's styling. */
.admin-comm-detail .statement-h4 {
  margin: 18px 0 6px; font-size: 13px; font-weight: 700; color: #111827;
}
.admin-comm-detail .statement-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.admin-comm-detail .statement-table th {
  text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}
.admin-comm-detail .statement-table td {
  padding: 8px 10px; border-bottom: 1px solid #f3f4f6; color: #374151;
}
.admin-comm-alert {
  margin-top: 12px; padding: 10px 14px;
  background: #dbeafe; border: 1px solid #93c5fd; border-radius: 6px;
  font-size: 13px; color: #1e3a8a;
}

/* Historical-payout record modal — footer row with metadata inputs on
   the left + live totals on the right. */
.hp-footer-row {
  display: grid; grid-template-columns: 2fr 1fr; gap: 20px;
  margin-top: 22px; padding-top: 14px; border-top: 2px solid #e5e7eb;
}
.hp-footer-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.hp-footer-fields label  { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted, #6b7280); text-transform: uppercase; letter-spacing: 0.03em; }
.hp-footer-fields input  { padding: 7px 9px; font-size: 13px; font-family: inherit; text-transform: none; border: 1px solid var(--border, #e5e7eb); border-radius: 5px; }
.hp-footer-wide          { grid-column: 1 / span 2; }
.hp-footer-totals {
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: #374151;
}
.hp-footer-totals > div { display: flex; justify-content: space-between; }
.hp-footer-totals .hp-net { margin-top: 4px; padding-top: 10px; border-top: 1px solid #d1d5db; font-size: 15px; color: #111827; }
.hp-footer-totals .hp-net strong { font-size: 20px; }
@media (max-width: 720px) {
  .hp-footer-row    { grid-template-columns: 1fr; }
  .hp-footer-fields { grid-template-columns: 1fr; }
}
.statement-h4 .btn-xs { margin-left: 6px; font-size: 10px; padding: 2px 8px; }
.statement-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #4b5563; }

/* Statement doc shared styling in CRM. The .no-print class is used by
   the browser-print flow to hide the modal action row from the PDF. */
.statement-doc { background: #fff; padding: 10px 4px; }
.statement-doc .statement-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; padding-bottom: 14px; border-bottom: 2px solid #C8102E;
  margin-bottom: 16px;
}
.statement-doc .statement-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #C8102E; font-weight: 700; }
.statement-doc .statement-title   { margin: 4px 0 2px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.statement-doc .statement-period  { font-size: 13px; color: #4b5563; }
.statement-doc .statement-brand {
  display: flex; align-items: center; gap: 12px; text-align: right;
}
.statement-doc .statement-brand-logo { width: 48px; height: auto; display: block; flex-shrink: 0; }
.statement-doc .statement-brand-name { font-weight: 700; color: #111827; }
.statement-doc .statement-brand-sub  { font-size: 12px; color: #6b7280; }
.statement-doc .statement-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 20px; margin-bottom: 18px; font-size: 13px;
}
.statement-doc .statement-meta > div { display: flex; flex-direction: column; gap: 2px; }
.statement-doc .statement-meta span   { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7280; font-weight: 600; }
.statement-doc .statement-meta strong { color: #111827; }
.statement-doc .statement-totals {
  margin-top: 18px; padding: 12px 14px;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.statement-doc .statement-totals > div { display: flex; justify-content: space-between; font-size: 13px; color: #374151; }
.statement-doc .statement-net { margin-top: 4px; padding-top: 10px; border-top: 1px solid #d1d5db; font-size: 15px; color: #111827; }
.statement-doc .statement-net strong { font-size: 20px; }
.statement-doc .statement-notes { margin-top: 12px; font-size: 12px; color: #4b5563; }

@media print {
  body > *:not(#modal-overlay) { display: none !important; }
  #modal-overlay { position: static !important; background: #fff !important; }
  #modal-box     { box-shadow: none !important; border: none !important; max-width: 100% !important; width: 100% !important; padding: 20px !important; }
  .no-print, #modal-close { display: none !important; }
}
.btn-xs { padding: 3px 9px; font-size: 11px; border-radius: 4px; }

/* Draft design rows (review & publish flow) */
.draft-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.draft-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; background: #fff;
  transition: background 0.12s, border-color 0.12s;
}
.draft-row:hover { background: #f9fafb; border-color: var(--blue, #2563eb); }
.draft-row-thumb { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--bg); }
.draft-row-thumb-blank { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--muted); }
.draft-row-body { flex: 1; min-width: 0; }
.draft-row-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-row-meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; font-size: 11px; flex-wrap: wrap; }

/* Group headers when the review-drafts list bundles multiple drafts under
   one artist. Row list wraps under the head with tighter margins so the
   modal doesn't scroll unnecessarily. */
.draft-group { margin-bottom: 14px; }
.draft-group:last-child { margin-bottom: 0; }
.draft-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 6px 4px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.draft-group-name { font-size: 13px; font-weight: 700; color: #111827; }
.draft-group-count { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.draft-group .draft-list { max-height: none; }

/* ─── Profit & Loss tab ──────────────────────────────────────────────────── */

.pl-period-bar {
  display: flex; flex-wrap: wrap; gap: 16px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 14px;
}
.pl-period-section { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-period-label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; font-weight: 600; }
.pl-period-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-period-btn {
  font-size: 12px; padding: 4px 10px; border: 1px solid var(--border);
  background: #fff; border-radius: 4px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pl-period-btn:hover { background: #eff6ff; border-color: #93c5fd; }
.pl-period-btn-active { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
.pl-period-btn-active:hover { background: #1e40af; border-color: #1e40af; }
.pl-compare-toggle { font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; }

.pl-report-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 18px;
}
.pl-report-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.pl-report-headline { display: flex; gap: 24px; }
.pl-headline-revenue, .pl-headline-net { display: flex; flex-direction: column; align-items: flex-end; }
.pl-headline-label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; font-weight: 600; }
.pl-headline-value { font-size: 22px; font-weight: 700; margin-top: 2px; }
.pl-headline-net.pl-net-pos .pl-headline-value { color: #047857; }
.pl-headline-net.pl-net-neg .pl-headline-value { color: #b91c1c; }
.pl-headline-pct { font-size: 14px; color: var(--muted); font-weight: 500; }

.pl-table { width: 100%; border-collapse: collapse; }
.pl-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); font-weight: 600; }
.pl-table th.num { text-align: right; }
.pl-table td { padding: 6px 10px; font-size: 13px; border-bottom: 1px solid #f3f4f6; }
.pl-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pl-row-clickable { cursor: pointer; transition: background 0.1s; }
.pl-row-clickable:hover { background: #f9fafb; }

.pl-row-section td { padding-top: 14px; padding-bottom: 6px; font-size: 13px; border-bottom: 2px solid var(--border); }
.pl-section-revenue td { color: #047857; }
.pl-section-cogs td { color: #92400e; }
.pl-section-opex td { color: #4338ca; }

.pl-row-subtotal td { padding: 10px; background: #f9fafb; border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); font-size: 14px; }
.pl-row-subtotal.pl-pos td { color: #047857; }
.pl-row-subtotal.pl-neg td { color: #b91c1c; }

.pl-code { background: #f3f4f6; padding: 1px 6px; border-radius: 3px; font-size: 11px; color: var(--muted); }
.pl-pct { color: var(--muted); }

.pl-delta-up   { color: #047857; }
.pl-delta-down { color: #b91c1c; }
.pl-delta-flat { color: var(--muted); }

.pl-source-pill {
  display: inline-block; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.pl-src-invoice { background: #dcfce7; color: #166534; }
.pl-src-credit  { background: #fee2e2; color: #991b1b; }
.pl-src-bill    { background: #eef2ff; color: #4338ca; }
.pl-src-spend   { background: #fef3c7; color: #92400e; }

/* ─── P&L: Alerts + Trend chart (Phase 2) ────────────────────────────────── */

.pl-alerts-empty {
  margin: 14px 0; padding: 10px 14px; background: #f0fdf4; color: #166534;
  border: 1px solid #bbf7d0; border-radius: 6px; font-size: 13px;
}
.pl-alerts-empty-icon { font-weight: 700; margin-right: 6px; }

.pl-alerts-panel {
  margin: 14px 0; padding: 12px 14px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
}
.pl-alerts-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #fde68a;
}
.pl-alert-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer; transition: background 0.12s;
}
.pl-alert-row:hover { background: rgba(255,255,255,0.6); }
.pl-alert-arrow {
  font-size: 20px; font-weight: 700; width: 24px; text-align: center;
}
.pl-alert-up .pl-alert-arrow { color: #b91c1c; }
.pl-alert-down .pl-alert-arrow { color: #047857; }
.pl-alert-body { flex: 1; min-width: 0; }
.pl-alert-name { font-size: 13px; }
.pl-alert-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pl-alert-value { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pl-trend-section {
  margin: 20px 0; padding: 14px 16px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
}
.pl-trend-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.pl-trend-controls { display: flex; gap: 16px; flex-wrap: wrap; }
.pl-trend-unit-toggle, .pl-trend-window-toggle { display: flex; gap: 4px; }

.pl-chart-wrap { margin: 12px 0; }

.pl-chart-toggles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px; margin-top: 14px;
}
.pl-chart-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
  font-size: 12px;
}
.pl-chart-toggle:hover { background: #f9fafb; }
.pl-chart-toggle input { margin: 0; }
.pl-chart-toggle span:nth-of-type(2) {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-chart-toggle-total { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; }
.pl-chart-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.pl-chart-swatch-off { background: #d1d5db; }
.pl-chart-toggle-on { border-color: #93c5fd; background: #eff6ff; }

/* ─── P&L Phase 3: Per-Order Profitability ───────────────────────────────── */

.pl-po-section { margin-top: 18px; border-top: 2px solid var(--border); padding-top: 16px; }
.pl-po-collapsed {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; background: #f9fafb; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.pl-po-collapsed:hover { background: #eff6ff; border-color: #93c5fd; }
.pl-po-collapsed strong { font-size: 14px; }
.pl-po-collapsed .form-hint { flex: 1; }
.pl-po-chevron { color: var(--muted); font-size: 11px; }
.pl-po-chevron-open { color: #1e3a8a; }

.pl-po-section-expanded { background: #fff; border-radius: 8px; padding: 0; }
.pl-po-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: #f9fafb; border: 1px solid var(--border);
  border-radius: 8px 8px 0 0; cursor: pointer; border-bottom: none;
}

.pl-po-rate-card {
  border: 1px solid var(--border); border-top: none; padding: 14px;
}
.pl-po-rate-head {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.pl-po-rate-summary { text-align: right; }
.pl-po-rate-formula {
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.pl-po-rate-cogs    { color: #92400e; font-weight: 700; }
.pl-po-rate-overhead{ color: #4338ca; font-weight: 700; }
.pl-po-rate-net     { color: #047857; font-weight: 700; }

.pl-po-config {
  background: #fffbeb; border: 1px solid #fde68a;
  border-top: none; padding: 14px;
}
.pl-po-cfg-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
}
.pl-po-cfg-row {
  display: grid; grid-template-columns: 18px 60px 1fr 90px 60px;
  align-items: center; gap: 8px; padding: 4px 6px;
  cursor: pointer; font-size: 12px;
  border-radius: 4px;
}
.pl-po-cfg-row:hover { background: rgba(255,255,255,0.5); }
.pl-po-cfg-row input { margin: 0; }
.pl-po-cfg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-po-cfg-amt, .pl-po-cfg-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

.pl-po-orders-block {
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 8px 8px; padding: 14px;
}
.pl-po-orders-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}
.pl-po-totals { display: flex; gap: 12px; font-size: 13px; flex-wrap: wrap; }
.pl-po-cogs { color: #92400e; }
.pl-po-ovh  { color: #4338ca; }
.pl-po-net  { color: #047857; }

.pl-po-band { font-size: 11px; color: var(--muted); }

.pl-po-table { width: 100%; }
.pl-po-table td.num { font-variant-numeric: tabular-nums; }
.pl-po-row-neg { background: #fef2f2; }
.pl-po-row-neg .pl-po-net { color: #b91c1c; font-weight: 600; }

/* ─── Tasks tab ────────────────────────────────────────────────────────── */

/* Shared filter-btn count pill, e.g. "Due now 12" */
.filter-btn-count {
  font-size: 11px; padding: 0 6px; border-radius: 999px;
  background: rgba(0,0,0,0.08); color: inherit;
  font-variant-numeric: tabular-nums; margin-left: 4px;
}
.filter-btn.active .filter-btn-count { background: rgba(255,255,255,0.25); color: #fff; }

/* ─── Live chat inbox ─────────────────────────────────────────────────── */
.chat-inbox {
  display: grid; grid-template-columns: 340px 1fr; gap: 12px;
  height: calc(100vh - 200px); min-height: 480px;
}
@media (max-width: 720px) {
  .chat-inbox { grid-template-columns: 1fr; }
}
.chat-inbox-side {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; min-height: 0;
}
.chat-inbox-toolbar {
  display: flex; gap: 6px; padding: 8px 8px 0;
}
/* Second row of filters — source pills. Same visual language as the
   status filters above so it reads as one toolbar. */
.chat-inbox-toolbar-source {
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Source chip that decorates each session row (and the session header
   on the right pane). One colour per origin so the operator's eye
   locks onto "the chat from the website" without reading text. */
.chat-source-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px 1px 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid transparent;
  vertical-align: middle;
  margin-right: 4px;
}
.chat-source-chip-icon { font-size: 11px; line-height: 1; }
.chat-source-designer { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.chat-source-artist   { background: #fdf4ff; color: #86198f; border-color: #f5d0fe; }
.chat-source-widget   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.chat-source-portal   { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.chat-source-other    { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.chat-inbox-list {
  flex: 1; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-inbox-row {
  padding: 10px 12px; border-radius: 6px; background: #fafafa;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.chat-inbox-row:hover { background: #f3f4f6; border-color: #e5e7eb; }
.chat-inbox-row-active { background: #eff6ff; border-color: #93c5fd; }
.chat-inbox-row-unread .chat-inbox-row-name { font-weight: 700; color: #111827; }
.chat-inbox-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chat-inbox-row-name { font-size: 13px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-inbox-row-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.chat-inbox-row-preview { font-size: 12px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-inbox-row-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.chat-inbox-row-assignee { font-size: 11px; color: #1d4ed8; font-weight: 600; }
.chat-inbox-row-unassigned { font-size: 11px; color: var(--muted); font-style: italic; }
.chat-inbox-row-badge { font-size: 11px; font-weight: 700; background: #dc2626; color: #fff; padding: 1px 7px; border-radius: 999px; }

.chat-inbox-main {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; min-height: 0;
}
.chat-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.chat-session-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: #fafafa;
}
.chat-session-name { font-size: 14px; font-weight: 700; color: #111827; }
.chat-session-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.chat-session-meta a { color: var(--muted); text-decoration: none; }
.chat-session-meta a:hover { text-decoration: underline; }
.chat-session-closed { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.chat-thread {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: #FAFAF8;
}
.chat-msg { max-width: 78%; }
.chat-msg-author { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 2px; padding: 0 4px; }
.chat-msg-body { padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.chat-msg-time { font-size: 10px; color: var(--muted); margin-top: 2px; padding: 0 4px; }
.chat-msg-customer { align-self: flex-start; }
.chat-msg-customer .chat-msg-body { background: #fff; color: #111827; border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg-staff { align-self: flex-end; text-align: right; }
.chat-msg-staff .chat-msg-body { background: #1e3a8a; color: #fff; border-bottom-right-radius: 4px; }
.chat-msg-system { align-self: center; max-width: 92%; text-align: center; }
.chat-msg-system .chat-msg-body { background: transparent; color: var(--muted); font-style: italic; font-size: 13px; }
.chat-reply-form {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px; border-top: 1px solid var(--border); background: #fff;
}
.chat-reply-input {
  flex: 1; resize: none;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 12px;
  font: inherit; font-size: 13px; line-height: 1.4;
  max-height: 160px;
}
.chat-reply-input:focus { outline: none; border-color: #1e3a8a; }

/* Contact-page chat history card — collapsible sessions with their
   messages inline underneath. Read-only view (staff replies from the
   Chat tab); this card is for context on the profile page. */
.contact-chat-card { }
.contact-chat-session {
  border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 8px; background: #fff;
}
.contact-chat-session-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; cursor: pointer;
  background: #f9fafb;
}
.contact-chat-session-open .contact-chat-session-head { border-bottom: 1px solid var(--border); }
.contact-chat-session-title { font-size: 13px; font-weight: 600; color: #111827; }
.contact-chat-session-meta { font-size: 11px; color: var(--muted); }
.contact-chat-session-status {
  font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.contact-chat-session-status-open   { background: #dcfce7; color: #166534; }
.contact-chat-session-status-closed { background: #f3f4f6; color: #6b7280; }
.contact-chat-messages { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: #FAFAF8; }
.contact-chat-msg { max-width: 82%; }
.contact-chat-msg-body { padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.45; }
.contact-chat-msg-customer { align-self: flex-start; }
.contact-chat-msg-customer .contact-chat-msg-body { background: #fff; border: 1px solid var(--border); }
.contact-chat-msg-staff { align-self: flex-end; text-align: right; }
.contact-chat-msg-staff .contact-chat-msg-body { background: #1e3a8a; color: #fff; }
.contact-chat-msg-system { align-self: center; }
.contact-chat-msg-system .contact-chat-msg-body { color: var(--muted); font-style: italic; font-size: 11px; background: transparent; }
.contact-chat-msg-author { font-size: 10px; color: var(--muted); margin-bottom: 2px; padding: 0 4px; }

/* Task board — urgency buckets with two-column tile grids inside each. The
   most overdue tasks rise into the "critical" band at the top of the page,
   coloured red; newer / due-today tasks sit lower under quieter banners. */
.task-board { display: flex; flex-direction: column; gap: 18px; }

.task-bucket { display: flex; flex-direction: column; gap: 8px; }
.task-bucket-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.task-bucket-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.task-bucket-count {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.06); color: inherit;
}
.task-bucket-critical .task-bucket-head { background: #fef2f2; color: #991b1b; }
.task-bucket-critical .task-bucket-dot  { background: #dc2626; }
.task-bucket-overdue  .task-bucket-head { background: #fff7ed; color: #9a3412; }
.task-bucket-overdue  .task-bucket-dot  { background: #ea580c; }
.task-bucket-recent   .task-bucket-head { background: #fefce8; color: #854d0e; }
.task-bucket-recent   .task-bucket-dot  { background: #eab308; }
.task-bucket-today    .task-bucket-head { background: #f0fdf4; color: #166534; }
.task-bucket-today    .task-bucket-dot  { background: #22c55e; }

/* Two tiles wide on standard viewports; drops to one on narrow. Snoozed /
   done / dismissed views reuse task-grid-flat which mirrors this. */
.task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 10px;
}
.task-grid-flat { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.task-row {
  display: flex; align-items: stretch; gap: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px 10px 14px;
  position: relative;                       /* room for the urgency stripe */
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.08s;
}
.task-row:hover { border-color: #93c5fd; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.task-row-done, .task-row-dismissed { opacity: 0.6; }

/* Coloured left stripe — the urgency signal at a glance. Matches the
   bucket colouring so a scanner still sees "red = trouble" even after
   scrolling past the bucket header. */
.task-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 8px 0 0 8px;
  background: transparent;
}
.task-row-urgency-critical::before { background: #dc2626; }
.task-row-urgency-overdue::before  { background: #ea580c; }
.task-row-urgency-recent::before   { background: #eab308; }
.task-row-urgency-today::before    { background: #22c55e; }
.task-row-urgency-inactive::before { background: #d1d5db; }

.task-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.task-row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.task-row-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.task-title-link {
  color: #111827; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.task-title-link:hover {
  color: #C8102E;
  border-bottom-color: currentColor;
}
.task-title-plain { color: #111827; }

/* Meta line: type chip + contact + urgency label. Compact — the tile
   should read complete in about four lines total. */
.task-meta-line {
  display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.task-meta-item { color: var(--muted); }
.task-meta-urgency {
  font-weight: 600;
}
.task-row-urgency-critical .task-meta-urgency { color: #dc2626; }
.task-row-urgency-overdue  .task-meta-urgency { color: #ea580c; }
.task-row-urgency-recent   .task-meta-urgency { color: #a16207; }
.task-row-urgency-today    .task-meta-urgency { color: #166534; }

/* Type chip — colour-coded by ticket type. Small so it sits inline with
   the meta line, not competing with the title. */
.task-type-chip {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.4;
}
.task-type-inquiry { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.task-type-support { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.task-type-general { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }

.task-notes { margin-top: 2px; }
.task-notes-input {
  width: 100%; min-height: 26px; max-height: 100px;
  font-size: 12px; padding: 5px 9px;
  border: 1px solid #e5e7eb; border-radius: 4px;
  background: #fafafa; color: #374151;
  resize: vertical; font-family: inherit; line-height: 1.4;
  transition: border-color 0.12s, background 0.12s, min-height 0.12s;
}
.task-notes-input-compact { min-height: 26px; }
.task-notes-input-compact:focus { min-height: 60px; }
.task-notes-input:focus { background: #fff; border-color: #93c5fd; outline: none; }
.task-notes-input::placeholder { color: #9ca3af; font-style: italic; }

.task-row-actions {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end; flex-shrink: 0;
}
.task-snooze-group { display: flex; gap: 2px; }
.task-dismiss-btn { color: var(--muted); }
.task-dismiss-btn:hover { color: #b91c1c; }

.badge.badge-red { background: #dc2626; color: #fff; }

/* Compact mobile task card — actions row moves under the notes textarea so the
   card is dense and readable at 375px viewports. Notes textarea shrinks too. */
@media (max-width: 768px) {
  .task-grid, .task-grid-flat { grid-template-columns: 1fr; }
  .task-row {
    flex-direction: column;
    padding: 10px 12px 10px 14px;
    gap: 8px;
  }
  .task-row-head { gap: 8px; }
  .task-row-title { font-size: 14px; line-height: 1.35; }
  .task-notes-input { min-height: 26px; font-size: 12px; padding: 5px 8px; }
  .task-notes-input-compact:focus { min-height: 60px; }
  .task-row-actions {
    flex-direction: row; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; gap: 4px;
  }
  .task-snooze-group { gap: 1px; }
  .task-assignee-chip { font-size: 11px; padding: 2px 8px 2px 2px; }
  .task-bucket-head { font-size: 11px; padding: 5px 8px; }
}

/* ─── Current user chip + picker ──────────────────────────────────────────── */
.header-user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.header-user-chip:hover { background: #f3f4f6; border-color: #93c5fd; }
.header-user-chip-label { color: var(--muted); }
.header-user-chip-chevron { color: var(--muted); font-size: 10px; }

.modal-narrow .user-picker-list { display: flex; flex-direction: column; gap: 6px; }
.user-picker-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; width: 100%; text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.user-picker-row:hover { background: #eff6ff; border-color: #93c5fd; }
.user-picker-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #1e3a8a; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.user-picker-body { flex: 1; min-width: 0; }
.user-picker-name { font-size: 15px; font-weight: 600; color: #111827; }
.user-picker-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ─── Task scope toggle + assignee chips ──────────────────────────────────── */
.task-scope-bar {
  display: flex; gap: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 5px; margin-bottom: 10px; width: fit-content;
}
.task-scope {
  font-size: 12px; padding: 5px 12px; border: none; background: transparent;
  border-radius: 6px; cursor: pointer; color: #4b5563; font-weight: 500;
}
.task-scope:hover { background: #f3f4f6; color: #111827; }
.task-scope-active { background: #1e3a8a; color: #fff; }
.task-scope-active:hover { background: #1e40af; color: #fff; }

.task-assignee-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2px 8px 2px 2px; border-radius: 999px;
  background: #f3f4f6; color: #374151; cursor: pointer;
  transition: background 0.12s;
}
.task-assignee-chip:hover { background: #e5e7eb; }
.task-assignee-avatar {
  width: 18px; height: 18px; border-radius: 50%;
  background: #1e3a8a; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 9px;
}
.task-assignee-unassigned {
  padding: 2px 10px;
  background: transparent; border: 1px dashed #d1d5db; color: var(--muted);
  font-style: italic;
}

.task-assign-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.task-assign-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; width: 100%; text-align: left; font-size: 13px;
}
.task-assign-row:hover { background: #eff6ff; border-color: #93c5fd; }
.task-assign-clear { color: var(--muted); font-style: italic; }

/* ─── Employee management table ───────────────────────────────────────────── */
.employee-table td { padding: 10px; vertical-align: middle; }
.employee-name-cell { display: flex; align-items: center; gap: 10px; }
.employee-name { font-weight: 600; color: #111827; }
.employee-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.employee-row-inactive { opacity: 0.6; }
.employee-archived-pill {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  background: #f3f4f6; color: var(--muted); padding: 1px 6px; border-radius: 4px;
  margin-left: 6px;
}

.modal-narrow .modal-box, .modal-box.modal-narrow { max-width: 480px; }

/* CRM login modal — undismissable. Hide the ✕ button and disable the click-
   to-close on the overlay (JS-side guard is in closeModal + closeModalDirect). */
.modal-box.crm-login-modal .modal-close { display: none; }
.modal-box.crm-login-modal { padding-top: 22px; }
/* When the login modal is up, hide the whole app shell (sidebar / header /
   FAB / everything else) so the sensitive nav labels aren't visible behind
   the overlay. Only the modal overlay and toast stay in the DOM. Cleared
   automatically on successful login (the page reloads). */
body.crm-locked > *:not(#modal-overlay):not(#toast) { display: none; }
body.crm-locked #modal-overlay { background: #f9fafb; }  /* solid, not translucent */

/* Header user chip dropdown — small anchored menu. Positioned absolutely
   from the top/right computed in JS (below the chip). */
.user-menu-dropdown {
  position: absolute;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  padding: 4px;
  z-index: 950;                                 /* above content, below modal-overlay */
  font-size: 13px;
}
.user-menu-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.user-menu-name { font-weight: 600; color: #111827; }
.user-menu-sub  { font-size: 11px; color: var(--muted); margin-top: 2px; word-break: break-word; }
.user-menu-item {
  width: 100%;
  background: transparent; border: none;
  text-align: left;
  padding: 8px 10px;
  font: inherit; font-size: 13px; color: #1f2937;
  cursor: pointer;
  border-radius: 4px;
  display: flex; align-items: center; gap: 8px;
}
.user-menu-item:hover { background: #f3f4f6; }
.user-menu-item-danger { color: #b91c1c; }
.user-menu-item-danger:hover { background: #fee2e2; }

/* Brand switcher inside the user menu. Admin-only — non-admins see
   the current brand as a muted badge in the header area. */
.user-menu-section-label {
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
  padding: 10px 10px 4px;
}
.user-menu-item.brand-item {
  justify-content: space-between;
  padding-right: 10px;
}
.user-menu-item.brand-item.active {
  background: #eef2ff;
  color: #1e40af;
  font-weight: 600;
}
.user-menu-item.brand-item .brand-check {
  color: #2563eb; font-weight: 700;
}
.user-menu-brand-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff; color: #1e40af;
  font-size: 11px; font-weight: 600;
}
.user-menu-divider {
  height: 1px; background: var(--border);
  margin: 4px 0;
}

/* Brands & Locations cards (Configuration → Brands & Locations). Each
   brand gets a card with a logo thumb + accent swatch + metadata + edit
   actions. --brand-accent is per-card for inline tinting. */
.cfg-brands-list { display: grid; gap: 10px; margin-top: 4px; }
.brand-card {
  display: flex; gap: 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px;
  border-left: 4px solid var(--brand-accent, var(--primary));
}
.brand-card-inactive { opacity: 0.5; filter: grayscale(0.4); }
.brand-card-thumb {
  width: 72px; height: 72px; flex: 0 0 72px;
  border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.brand-card-thumb img { max-width: 90%; max-height: 90%; object-fit: contain; }
.brand-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.brand-card-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.brand-card-name { font-weight: 600; font-size: 14px; color: #111827; }
.brand-card-slug { font-size: 11px; color: var(--muted); margin-top: 2px; }
.brand-card-slug code { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.brand-card-tag {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 999px;
  background: #e0e7ff; color: #3730a3;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; vertical-align: middle;
}
.brand-card-tag-off { background: #fee2e2; color: #b91c1c; }
.brand-card-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); flex: 0 0 24px;
}
.brand-card-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: var(--muted);
}
.brand-card-missing { color: #b91c1c; }
.brand-card-muted { color: #9ca3af; }
.brand-card-actions { display: flex; gap: 6px; margin-top: 2px; }

/* Add/Edit brand modal */
.modal-box.modal-brand { max-width: 640px; }
.form-section-divider { height: 1px; background: var(--border); margin: 16px 0 10px; }
.form-section-head { font-weight: 600; font-size: 13px; color: #111827; margin-bottom: 8px; }
.chk-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* Brand feature-flag toggles — stacked rows with a leading checkbox + a
   name/description column. Cursor:pointer on the whole label so clicking
   anywhere flips the switch. */
.brand-features-list { display: flex; flex-direction: column; gap: 8px; }
.brand-feature-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: var(--card);
}
.brand-feature-row:hover { background: #f9fafb; }
.brand-feature-row input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; }
.brand-feature-name { font-weight: 600; font-size: 13px; color: #111827; }
.brand-feature-desc { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* Product Pruner — selected-card ring so bulk-selection is visible at a
   glance. Uses the brand accent so SA shows pink and Canada shows red. */
.pruner-card { transition: box-shadow 0.15s ease; }
.pruner-card-selected {
  box-shadow: 0 0 0 2px var(--primary);
}

/* "Configuring: [Brand]" badge at the top of the Config page — reminds the
   admin that every section below is brand-scoped. Tinted with the brand's
   accent so it reads at a glance (red for Canada, pink for SA, etc). */
.config-brand-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, white);
  font-size: 12px; font-weight: 500;
}
.config-brand-badge strong { color: var(--primary); font-weight: 700; }

/* Awaiting-payment Overview widget — compact table of invoiced inquiries
   waiting on customer payment, oldest first. Rows click through to the
   ticket modal. Age cell colour-codes staleness (grey / amber / red). */
.aw-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.aw-table thead th {
  text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
  padding: 10px 14px; background: #fafafa; border-bottom: 1px solid var(--border);
}
.aw-table tbody tr { border-top: 1px solid var(--border); transition: background 0.1s ease; }
.aw-table tbody tr:hover { background: #f9fafb; }
.aw-table tbody td { padding: 10px 14px; vertical-align: top; }
.aw-table .aw-subtle { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Per-location scope badge — rendered inline next to section titles that
   store their values in the active brand's own DB. Reminds admins that
   switching brands will show / edit a different set of values. Tinted
   with the brand accent so the badge visually matches the Configuring
   badge in the toolbar. Keep small + unobtrusive — the section title
   stays the dominant element. */
.cfg-scope-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--primary) 10%, white);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, white);
  vertical-align: middle;
  cursor: help;
  user-select: none;
}

/* Configuration page section groupings — big heading above each cluster
   of related settings, so admins see at a glance whether they're editing
   shared / global settings or per-location ones. The sub-text under the
   heading names the active brand for the per-location group.

   Rendered as plain blocks (NOT cfg-section) so the collapsifyConfigSections
   pass leaves them alone — otherwise they'd each turn into a <details>
   and swallow the sections underneath. */
.cfg-group {
  margin: 24px 0 6px;
}
.cfg-group:first-child {
  margin-top: 4px;
}
.cfg-group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  padding: 10px 14px;
  background: #f3f4f6;
  border-left: 3px solid var(--border);
  border-radius: 4px;
}
.cfg-group-global .cfg-group-head {
  border-left-color: #6366f1;    /* indigo — "shared across brands" */
  background: color-mix(in srgb, #6366f1 6%, white);
}
.cfg-group-location .cfg-group-head {
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, white);
}
.cfg-group-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.cfg-group-note {
  margin: 6px 14px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* Portal Access card (contact detail page) — admin checkbox list driven
   by the portal role registry. Mirrors the Features-list style from the
   brand modal so admins recognise the pattern (toggleable rows with
   name + description + hint). */
.portal-access-list {
  display: flex; flex-direction: column; gap: 8px;
}
.portal-access-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: var(--card);
  transition: background 0.1s ease;
}
.portal-access-row:hover { background: #f9fafb; }
.portal-access-row input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; }
.portal-access-name { font-weight: 600; font-size: 13px; color: #111827; }
.portal-access-desc { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.portal-access-hint {
  font-size: 11px; color: var(--muted); font-style: italic;
  margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border);
}
.portal-access-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
}

/* ─── Employee edit modal ──────────────────────────────────────────────────
   Slight width bump so 2-column form-rows have room. Section headings +
   dividers make the grouping obvious. All fields use .form-group inputs
   with visible borders + focus states so it's clear what's editable. */
.modal-box.emp-edit-modal { max-width: 620px; }

/* Creator (Website Mgmt > Influencers) edit modal - narrower, and pin the
   action bar to the bottom so Save/Cancel/Delete stay visible while the
   long form scrolls above them. */
.modal.cr-edit-modal { max-width: 700px; padding-bottom: 0; }
.modal.cr-edit-modal .form-actions {
  position: sticky; bottom: 0;
  margin: 20px -24px 0; padding: 14px 24px;
  background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(0,0,0,0.04);
  z-index: 5;
}
.emp-form-section {
  padding: 14px 0 6px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.emp-form-section:first-of-type { border-top: none; padding-top: 4px; margin-top: 0; }
.emp-form-section-title {
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.access-admin-row,
.access-perm-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; margin-bottom: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer; background: #fff;
}
.access-admin-row { background: #fef9c3; border-color: #fde68a; }
.access-admin-row:hover { background: #fef3c7; }
.access-perm-row:hover  { background: #f9fafb; }
.access-admin-row input[type="checkbox"],
.access-perm-row input[type="checkbox"] {
  margin-top: 2px; width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;
}
.access-perm-label { font-weight: 600; color: #1f2937; font-size: 13px; }
.access-perm-desc  { font-size: 12px; color: var(--muted); margin-top: 2px; }
#emp-perms-list { margin-top: 4px; }

/* Marketing placeholder — same friendly empty-state shell used elsewhere. */
#tab-marketing .empty-state {
  text-align: center;
  padding: 40px 16px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: #fafafa;
  max-width: 480px;
  margin: 20px auto;
}
.emp-optional {
  display: inline-block;
  font-size: 10px; font-weight: 500;
  color: var(--muted);
  text-transform: none; letter-spacing: 0;
  padding: 1px 6px; border-radius: 3px;
  background: #f3f4f6;
  margin-left: 4px;
  vertical-align: middle;
}
.emp-code-input {
  font-family: Menlo, Consolas, monospace !important;
  font-size: 12px !important;
}
/* Input with a trailing unit label (e.g. "%") — visually joins them so the
   number field feels bounded. */
.emp-input-suffix {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s;
}
.emp-input-suffix:focus-within { border-color: var(--primary); }
.emp-input-suffix input {
  border: none !important;
  border-radius: 0 !important;
  outline: none;
}
.emp-input-suffix-label {
  padding: 8px 12px;
  background: #f9fafb;
  border-left: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  display: flex; align-items: center;
}

/* Public-profile photo widget in the employee editor. Circular preview
   + upload/replace/remove buttons. When there's no photo, initials render
   inside the circle on a soft red gradient (matches the About page). */
.emp-photo-widget { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.emp-photo-preview {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #FDECEE, #F9C8CE);
  border: 1px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.emp-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emp-photo-initials { font-weight: 700; font-size: 28px; color: var(--red, #C8102E); letter-spacing: -0.02em; }
.emp-photo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.emp-photo-actions .btn-linkish {
  background: none; border: none; color: var(--muted); font: inherit;
  font-size: 12px; cursor: pointer; padding: 4px 6px;
}
.emp-photo-actions .btn-linkish:hover { color: var(--red, #C8102E); text-decoration: underline; }

/* Cropper.js overlay - full-viewport backdrop with a centred dialog. The
   Cropper canvas itself is styled by cropper.min.css from the CDN. */
.emp-crop-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: emp-crop-in 0.15s ease-out;
}
@keyframes emp-crop-in { from { opacity: 0; } to { opacity: 1; } }
.emp-crop-dialog {
  background: #fff; border-radius: 14px; padding: 22px;
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.emp-crop-head h3 { margin: 0 0 4px; font-size: 20px; }
.emp-crop-head p  { margin: 0; color: var(--muted); font-size: 13px; }
.emp-crop-stage {
  max-height: 65vh; overflow: hidden; border-radius: 10px;
  background: #262626;
}
.emp-crop-stage img { display: block; max-width: 100%; max-height: 65vh; }
/* Round the actual crop selection so the operator sees the final circular
   framing while positioning - Cropper draws a square by default. */
.emp-crop-stage .cropper-view-box,
.emp-crop-stage .cropper-face { border-radius: 50%; }
.emp-crop-stage .cropper-view-box { outline: none; box-shadow: 0 0 0 2px #C8102E; }
.emp-crop-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* Client Spaces > list-as-grid. Each tile is a whole clickable card - hit
   anywhere to open the edit modal. Photo dominates, name+design underneath. */
.cs-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; padding: 4px; }
.cs-tile {
  display: flex; flex-direction: column; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; cursor: pointer; padding: 0; font: inherit; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cs-tile:hover { border-color: var(--red, #C8102E); box-shadow: 0 8px 22px rgba(200,16,46,0.08); transform: translateY(-2px); }
.cs-tile:focus-visible { outline: 2px solid var(--red, #C8102E); outline-offset: 2px; }
.cs-tile-img { position: relative; aspect-ratio: 4 / 5; background: var(--soft, #f5f3f0); overflow: hidden; }
.cs-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-tile-noimg { position: absolute; inset: 0; background: linear-gradient(135deg, #FDECEE, #F9C8CE); }
.cs-tile-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.cs-tile-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.cs-tile-badge-custom { background: #0D8043; color: #fff; }
.cs-tile-badge-off    { background: rgba(0,0,0,0.6); color: #fff; }
.cs-tile-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.cs-tile-who { font-weight: 600; font-size: 14px; color: var(--text); line-height: 1.25; }
.cs-tile-where { color: var(--muted); font-weight: 500; font-size: 12px; }
.cs-tile-design { color: var(--red, #C8102E); font-size: 12px; font-weight: 600; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Client Spaces > design picker. Live search against Woo products.
   Layout: input on top, results list underneath, replaced by a picked-state
   chip once the operator selects a design. */
.cs-design-picker { position: relative; }
.cs-picked { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--soft, #f5f3f0); border: 1px solid var(--border); border-radius: 10px; }
.cs-picked img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: #fff; border: 1px solid var(--border); flex-shrink: 0; }
.cs-picked .cs-picked-body { flex: 1; min-width: 0; }
.cs-picked .cs-picked-name { font-weight: 600; color: var(--text); font-size: 14px; }
.cs-picked .cs-picked-url { display: inline-block; font-size: 12px; color: var(--red, #C8102E); margin-top: 2px; }
.cs-search input { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-family: inherit; }
.cs-search input:focus { outline: none; border-color: var(--red, #C8102E); }
.cs-search-results { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; margin-top: 6px; }
.cs-search-results:empty { display: none; }
.cs-search-row { display: flex; align-items: center; gap: 10px; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; text-align: left; font-family: inherit; }
.cs-search-row:hover { border-color: var(--red, #C8102E); background: #fffaf9; }
.cs-search-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--soft, #f5f3f0); flex-shrink: 0; }
.cs-search-row .cs-search-noimg { width: 44px; height: 44px; border-radius: 6px; background: linear-gradient(135deg, #FDECEE, #F9C8CE); flex-shrink: 0; }
.cs-search-row .cs-search-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-search-row .cs-search-row-name { font-weight: 600; font-size: 13px; color: var(--text); }
.cs-search-row .cs-search-row-sku { font-size: 11px; color: var(--muted); }
.cs-search-loading, .cs-search-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 13px; font-style: italic; }

/* Commission-plan-v2 level picker in the employee editor. Four-way segmented
   control: None / Level 1 / Level 2 / Level 3. */
.emp-level-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.emp-level-btn {
  padding: 8px 12px; font-size: 13px;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.emp-level-btn:hover { background: #f9fafb; }
.emp-level-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
  font-weight: 500;
}
.emp-level-btn[data-level="none"].active {
  background: #6b7280; border-color: #6b7280;
}

/* Sales Commissions v2 — level pills, close-type control, earn badges */
.scomm-level-pill {
  display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700;
  border-radius: 999px; letter-spacing: 0.04em;
  color: #fff; background: #6b7280;
  vertical-align: middle;
}
.scomm-level-level_1 { background: #94a3b8; }   /* slate — learning */
.scomm-level-level_2 { background: #2563eb; }   /* blue — independent */
.scomm-level-level_3 { background: #059669; }   /* green — senior */
.scomm-level-off { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; }

.scomm-close-ctrl { display: flex; gap: 10px; font-size: 12px; }
.scomm-close-ctrl label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.scomm-close-ctrl input { margin: 0; }

.scomm-assist-select {
  font-size: 12px; padding: 3px 6px; border: 1px solid var(--border);
  border-radius: 4px; background: #fff; max-width: 180px;
}

.scomm-earn-badge {
  display: inline-block; padding: 3px 8px; font-size: 10px; font-weight: 700;
  border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.scomm-earn-yes { background: #dcfce7; color: #166534; }
.scomm-earn-no  { background: #fef3c7; color: #92400e; text-transform: none; letter-spacing: 0; }

.scomm-badge {
  display: inline-block; padding: 2px 6px; font-size: 10px; font-weight: 600;
  border-radius: 3px; margin-left: 4px;
}
.scomm-badge-warn { background: #fef3c7; color: #92400e; }

.scomm-mini-hint { font-size: 11px; color: var(--muted); }

/* Wider commission cells so the inline controls don't wrap awkwardly. */
.scomm-sales-table td, .scomm-sales-table th { vertical-align: top; padding: 8px 10px; }

/* ─── Pay-period panel (Sales Commissions) ───────────────────────────────── */
.scomm-payperiod-shell {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 16px;
}
.scomm-pp-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.scomm-pp-title { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.scomm-pp-dates { font-size: 12px; color: var(--muted); margin-top: 2px; }
.scomm-pp-nav { display: flex; gap: 6px; align-items: center; }
.scomm-pp-pill {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 999px; background: #e5e7eb; color: #374151;
}
.scomm-pp-pill-now { background: #dcfce7; color: #166534; }
.scomm-pp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.scomm-pp-table th, .scomm-pp-table td { padding: 8px 10px; text-align: left; }
.scomm-pp-table thead th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  border-bottom: 1px solid var(--border); font-weight: 600;
}
.scomm-pp-table tbody tr { border-bottom: 1px solid #f3f4f6; }
.scomm-pp-table tbody tr:last-child { border-bottom: none; }
.scomm-pp-row.is-paid td { color: #6b7280; }
.scomm-pp-table tfoot th {
  border-top: 2px solid var(--border); padding-top: 10px; font-size: 12px; color: var(--text);
}
.scomm-pp-status {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px 7px; border-radius: 3px;
}
.scomm-pp-status-paid    { background: #dcfce7; color: #166534; }
.scomm-pp-status-partial { background: #fef3c7; color: #92400e; }
.scomm-pp-status-due     { background: #fee2e2; color: #991b1b; }
.scomm-pp-drill-btn {
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 0 4px; margin-right: 2px;
}
.scomm-pp-drill-row td { background: #fafafa; padding: 0; }
.scomm-pp-drill { padding: 8px 12px; }
.scomm-pp-drill-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.scomm-pp-drill-table th, .scomm-pp-drill-table td { padding: 5px 8px; text-align: left; }
.scomm-pp-drill-table thead th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--border);
}
.scomm-pp-drill-pool td { background: #fff7f8; font-size: 12px; }
.scomm-pp-next {
  margin-top: 12px; padding: 8px 12px; background: #f9fafb; border: 1px dashed var(--border);
  border-radius: 6px; font-size: 12px; color: #374151;
}
.scomm-pp-history { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.scomm-pp-history h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.scomm-pp-history-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.scomm-pp-history-table th, .scomm-pp-history-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid #f3f4f6; }
.scomm-pp-history-table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.scomm-pp-history-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 12px; }

/* ─── Visualizer follow-ups ─────────────────────────────────────────────── */
.vf-run-list { display: flex; flex-direction: column; gap: 8px; }
.vf-run-row {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.vf-run-row:hover { border-color: #93c5fd; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.vf-run-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.vf-run-head strong { font-size: 14px; color: #111827; }
.vf-run-meta { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }

.vf-status-pill {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
}
.vf-status-active     { background: #dcfce7; color: #166534; }
.vf-status-completed  { background: #dbeafe; color: #1e40af; }
.vf-status-converted  { background: #fef3c7; color: #92400e; }
.vf-status-engaged    { background: #e0e7ff; color: #4338ca; }
.vf-status-superseded { background: #fce7f3; color: #9f1239; }
.vf-status-opted_out  { background: #fee2e2; color: #991b1b; }
.vf-status-pending    { background: #f3f4f6; color: #4b5563; }
.vf-status-sent       { background: #dcfce7; color: #166534; }
.vf-status-skipped    { background: #f3f4f6; color: var(--muted); }
.vf-status-failed     { background: #fee2e2; color: #991b1b; }
.vf-status-paused     { background: #fef3c7; color: #78350f; }
.vf-status-ended      { background: #f3f4f6; color: #374151; }
.vf-status-replied    { background: #dbeafe; color: #1e40af; }

/* ─── Ticket detail: related tasks collapsible ─────────────────────────────
   Sits between notes and messages. Closed by default — expands to show all
   tasks linked to the ticket (auto-generated + manual), each with the same
   snooze/done/dismiss controls as the Tasks page. */
.ticket-tasks-panel {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.ticket-tasks-panel > summary {
  list-style: none;
  padding: 10px 14px;
  cursor: pointer;
  display: flex; align-items: baseline; gap: 10px;
  user-select: none;
  border-radius: 8px;
  font-size: 13px;
}
.ticket-tasks-panel > summary::-webkit-details-marker { display: none; }
.ticket-tasks-panel > summary::before {
  content: '▸';
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.12s;
}
.ticket-tasks-panel[open] > summary::before { transform: rotate(90deg); }
.ticket-tasks-panel > summary:hover { background: #f9fafb; }
.ticket-tasks-label {
  font-weight: 600; color: #1f2937;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px;
}
.ticket-tasks-count { font-size: 12px; color: var(--muted); }
.ticket-tasks-list { padding: 0 14px 12px; }

.ticket-task-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "head actions" "notes actions";
  gap: 6px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.ticket-task-row:first-child { border-top: none; }
.ticket-task-row-done,
.ticket-task-row-dismissed { opacity: 0.6; }
.ticket-task-head {
  grid-area: head;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: #1f2937;
}
.ticket-task-notes { grid-area: notes; }
.ticket-task-notes .task-notes-input {
  width: 100%; min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 4px;
  font: inherit; font-size: 12px; color: #1f2937;
  resize: vertical;
  background: #fafafa;
}
.ticket-task-notes .task-notes-input:focus {
  outline: none; background: #fff; border-color: var(--blue,#3b82f6);
}
.ticket-task-actions {
  grid-area: actions;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  justify-content: flex-end;
}
.ticket-task-actions .task-snooze-group {
  display: inline-flex; gap: 2px;
}
.ticket-task-kind {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.ticket-task-auto {
  display: inline-block;
  padding: 1px 6px; border-radius: 3px;
  background: #ede9fe; color: #5b21b6;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ticket-task-due {
  font-size: 11px; color: var(--muted);
  padding: 1px 6px; border-radius: 3px; background: #f3f4f6;
}
.ticket-task-due-past { background: #fee2e2; color: #991b1b; }
.ticket-task-status {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .ticket-task-row {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "notes" "actions";
  }
  .ticket-task-actions { justify-content: flex-start; }
}

/* ─── Reply modal: previous message reference ──────────────────────────────
   Sits below the send button so operators can scroll and reference the
   customer's last inbound while composing. */
.trep-prev-msg {
  margin-top: 18px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.trep-prev-msg-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.trep-prev-msg-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
.trep-prev-msg-meta { font-size: 12px; color: var(--muted); }
.trep-prev-msg-sms {
  font-size: 14px; color: #1f2937; padding: 8px 12px;
  background: #fafafa; border-radius: 6px;
  white-space: pre-wrap; line-height: 1.45;
}

/* ─── Multi-image paste attachment ─────────────────────────────────────────
   Compact drop zone under email modals. Thumbnails wrap into a row below. */
.paste-attach-zone {
  border: 1px dashed var(--border);
  background: #fafafa;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-size: 12px;
}
.paste-attach-zone:hover { background: #f3f4f6; border-color: #93c5fd; }
.paste-attach-hint { color: var(--muted); }
.paste-attach-thumbs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.paste-attach-thumb {
  position: relative;
  width: 68px; height: 68px;
  border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden; background: #fff;
}
.paste-attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paste-attach-remove {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.paste-attach-remove:hover { background: #b91c1c; }

/* ─── Floating action button (new contact) ─────────────────────────────────
   Big red circle in the bottom-right corner of every page. Fixed position,
   above content, below modals. Same affordance from any tab. */
.fab-new-contact {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #C8102E;
  color: #fff;
  border: none;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(200, 16, 46, 0.35), 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  z-index: 900;   /* below modal overlay (which sits higher) but above content */
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.fab-new-contact:hover {
  background: #b0091e;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 18px rgba(200, 16, 46, 0.42), 0 3px 6px rgba(0,0,0,0.12);
}
.fab-new-contact:active {
  transform: translateY(0) scale(0.98);
}
/* Nudge slightly on mobile so it doesn't cover the tab bar / notch. */
@media (max-width: 768px) {
  .fab-new-contact {
    right: 16px; bottom: 78px;
    width: 52px; height: 52px;
    font-size: 26px;
  }
}

/* ─── Dashboard: "What's on today" board ────────────────────────────────── */
.daily-notes-block {
  background: #fffbf0;
  border: 1px solid #f3d78b;
  border-radius: 10px;
  padding: 14px 18px 12px;
  margin: 0 16px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.daily-notes-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.daily-notes-title {
  font-size: 14px; font-weight: 700; color: #78350f;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.daily-notes-headinfo { min-width: 0; }
.daily-notes-datebar {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
}
.daily-notes-date {
  font-size: 13px; color: #92400e;
  min-width: 200px;   /* keeps the arrows from jittering as labels change width */
}
.daily-notes-nav-btn {
  background: rgba(255,255,255,0.7);
  border: 1px solid #f3d78b;
  color: #78350f;
  width: 24px; height: 24px;
  border-radius: 4px;
  font-size: 10px; line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}
.daily-notes-nav-btn:hover { background: #fff; border-color: #d97706; }
.daily-notes-nav-today {
  background: transparent;
  border: 1px solid #f3d78b;
  color: #78350f;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: background 0.12s;
}
.daily-notes-nav-today:hover { background: #fff8e1; }
.daily-notes-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.daily-notes-empty {
  color: var(--muted); font-size: 13px; margin: 6px 0 0;
}
.daily-note-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 5px;
  font-size: 14px; line-height: 1.4;
  color: #1f2937;
}
.daily-note-done { opacity: 0.55; text-decoration: line-through; }
.daily-note-body { flex: 1; word-break: break-word; }
.daily-note-byline {
  font-size: 11px; color: var(--muted);
  margin-left: 6px; font-weight: 400;
  text-transform: none; letter-spacing: 0; text-decoration: none;
  white-space: nowrap;
}
.daily-note-actions { display: flex; gap: 4px; flex-shrink: 0; }
.daily-note-btn {
  width: 26px; height: 26px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  padding: 0;
}
.daily-note-btn-done { color: #166534; }
.daily-note-btn-done:hover { background: #dcfce7; border-color: #86efac; }
.daily-note-btn-undo { color: #6b7280; }
.daily-note-btn-undo:hover { background: #f3f4f6; }
.daily-note-btn-del { color: #b91c1c; }
.daily-note-btn-del:hover { background: #fee2e2; border-color: #fca5a5; }

/* Contact source pill (shown in the contact detail header) */
.contact-source-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef2ff; color: #4338ca;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
}

/* Designer pill on the contact detail header — same shape as source pill,
   green to match the discount badge. */
.designer-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: #dcfce7; color: #15803d;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}

/* Bounced-email markers. The pill sits inline next to the email in the
   contact header; the banner + inline warning show inside the edit modal
   so the operator sees the reason and understands the required fix. */
.email-bounce-pill {
  display: inline-block; margin-left: 4px;
  background: #fee2e2; color: #b91c1c;
  padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.email-bounce-inline {
  display: inline-block; margin-left: 6px;
  background: #fee2e2; color: #b91c1c;
  padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.email-bounce-banner {
  background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d;
  border-radius: 8px; padding: 10px 12px; margin: 8px 0 12px;
  font-size: 13px; line-height: 1.4;
}
.email-bounce-banner .email-bounce-reason {
  margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: #991b1b; background: #fff; padding: 4px 6px;
  border-radius: 4px; border: 1px solid #fecaca;
}
.email-bounce-banner .email-bounce-help {
  margin-top: 6px; color: #7f1d1d; font-size: 12px;
}

/* Highlighted tag on contact list cards for designers. */
.contact-tag-designer {
  background: #dcfce7 !important;
  color: #15803d !important;
  font-weight: 700;
}

/* Contact category block (formerly "designer block") — groups the category
   picker + its conditional discount input in the new/edit contact modal. */
.designer-block {
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
}

/* Contact-categories admin table in Configuration → Contact Categories. */
.cc-table td { padding: 6px 10px 6px 0; vertical-align: middle; }
.cc-label { min-width: 180px; }
.cc-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cc-actions { text-align: right; width: 40px; }
.cc-row-archived { opacity: 0.55; }
.cc-row-archived .cc-label { text-decoration: line-through; }

/* Reply-editor toolbar (contenteditable + rich text + snippet hint + AI button). */
.trep-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  flex-wrap: wrap;
}
.trep-tb-btn {
  padding: 4px 8px;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: #1f2937;
  min-width: 30px;
  text-align: center;
}
.trep-tb-btn:hover { background: #f3f4f6; }
.trep-tb-btn:disabled { opacity: 0.6; cursor: default; }
.trep-tb-sep {
  display: inline-block;
  width: 1px; height: 18px;
  background: var(--border);
  margin: 0 4px;
}
.trep-tb-ai {
  background: #ede9fe;
  color: #6d28d9;
  font-weight: 600;
  border-color: #ddd6fe;
  padding: 4px 10px;
}
.trep-tb-ai:hover { background: #ddd6fe; }
.trep-tb-hint {
  font-size: 11px;
  color: var(--muted);
}
.trep-tb-hint code {
  background: #f3f4f6;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.trep-rich-editor {
  min-height: 220px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  font-size: 14px;
  line-height: 1.55;
  color: #1f2937;
  outline: none;
  overflow-y: auto;
  max-height: 500px;
  background: #fff;
}
.trep-rich-editor:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(147,197,253,0.15); }
.trep-rich-editor a { color: var(--primary); text-decoration: underline; }
.trep-rich-editor p { margin: 0 0 8px; }
.trep-rich-editor #trep-caret { display: inline; width: 0; height: 0; }

/* Draft-review image gallery — hover a thumbnail to reveal a ✕ delete
   overlay. Bottom action row lets the operator upload a custom render. */
.draft-gallery-wrap { margin-bottom: 14px; }
.draft-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.draft-gallery-tile {
  position: relative;
  aspect-ratio: 1/1;
}
.draft-gallery-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: block;
}
.draft-gallery-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(220, 38, 38, 0.9);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.draft-gallery-tile:hover .draft-gallery-remove,
.draft-gallery-remove:focus { opacity: 1; }
.draft-gallery-actions {
  display: flex; align-items: center; gap: 10px;
  padding-top: 4px;
}
.draft-gallery-hint {
  font-size: 11px; color: var(--muted);
}

/* Slash-command snippet picker — floating panel positioned at caret. */
.trep-slash-menu {
  position: absolute;
  display: none;
  z-index: 10000;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 240px;
  max-width: 380px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
  font-size: 13px;
}
.trep-slash-menu .tsm-item {
  padding: 6px 12px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.trep-slash-menu .tsm-item.selected {
  background: #eef2ff;
  border-left-color: #4338ca;
}
.trep-slash-menu .tsm-item:hover { background: #f9fafb; }
.trep-slash-menu .tsm-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; color: #4338ca; font-size: 12px;
}
.trep-slash-menu .tsm-body {
  color: var(--muted); font-size: 11px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Snippets admin table */
.sn-table td { padding: 6px 10px 6px 0; vertical-align: top; }
.sn-trigger code {
  background: #eef2ff; color: #4338ca;
  padding: 2px 6px; border-radius: 4px;
  font-size: 12px; font-weight: 600;
}
.sn-body {
  width: 100%;
  min-height: 40px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.sn-actions { text-align: right; white-space: nowrap; }
.designer-check {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-weight: 600; color: #1f2937;
  user-select: none;
}
.designer-check input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer;
}

/* ─── Analyses tab ─────────────────────────────────────────────────────────
   Container for accounting deep-dive widgets. Each widget is a <details>
   card with its own filters + view switcher. */
#analyses-content { padding: 0 16px 24px; }
.analyses-widget { margin-bottom: 16px; }
.analyses-widget-shell {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.analyses-widget-header {
  list-style: none;
  padding: 14px 18px;
  cursor: pointer;
  display: flex; align-items: baseline; gap: 14px;
  border-radius: 10px;
  user-select: none;
}
.analyses-widget-header::-webkit-details-marker { display: none; }
.analyses-widget-header::before {
  content: '▸';
  font-size: 11px; color: var(--muted);
  transition: transform 0.12s;
}
.analyses-widget-shell[open] > .analyses-widget-header::before { transform: rotate(90deg); }
.analyses-widget-shell[open] > .analyses-widget-header {
  border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
}
.analyses-widget-header:hover { background: #f9fafb; }
.analyses-widget-title {
  font-size: 15px; font-weight: 600; color: #111827;
}
.analyses-widget-hint { font-size: 12px; color: var(--muted); }
.analyses-widget-body { padding: 16px 18px 20px; }

/* Shipping widget internals */
.ship-filters {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: end;
  margin-bottom: 14px;
}
.ship-filters label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.ship-filters input, .ship-filters select {
  font: inherit; font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 5px;
  background: #fff; color: #111827;
  min-width: 120px;
}
.ship-filters input:focus, .ship-filters select:focus {
  outline: none; border-color: #3b82f6;
}
/* Pay-period shortcut cluster inside .ship-filters. Bottom-aligns with the
   date inputs (they sit at the bottom of their label-topped column) so the
   arrows line up with the input rows, not the labels above them. */
.scomm-pp-shortcut { display: flex; gap: 4px; align-items: center; align-self: flex-end; }
.scomm-pp-shortcut .btn-xs { padding: 6px 10px; height: 30px; }

/* ─── Break-even Modeller ─────────────────────────────────────────────── */
.be-shell { padding: 0 16px; }
.be-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.be-toolbar-left { display: flex; align-items: center; gap: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.be-range-chip { padding: 4px 10px; background: #f3f4f6; border-radius: 4px; font-family: monospace; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 500; }
.be-toolbar-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.be-toolbar-sep { color: var(--border); }

.be-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 12px; }
@media (max-width: 900px) { .be-tiles { grid-template-columns: repeat(2, 1fr); } }
.be-tile { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.be-tile-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.be-tile-val { font-size: 22px; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; margin-top: 4px; }
.be-tile-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.be-tile-good { border-color: #86efac; background: #f0fdf4; }
.be-tile-good .be-tile-val { color: #16a34a; }
.be-tile-bad  { border-color: #fca5a5; background: #fef2f2; }
.be-tile-bad  .be-tile-val { color: #b91c1c; }

.be-banner { padding: 12px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; line-height: 1.5; }
.be-banner-good { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.be-banner-bad  { background: #fef2f2; border: 1px solid #fca5a5; color: #7f1d1d; }
.be-banner strong { font-weight: 700; }

.be-table { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.be-row {
  display: grid;
  grid-template-columns: 3fr 1fr 1.4fr 3fr 1fr;
  gap: 8px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid #f3f4f6; font-size: 13px;
}
.be-row:last-child { border-bottom: none; }
.be-row-head { background: #f9fafb; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; padding: 6px 12px; }
.be-row-revenue { background: #eff6ff; font-weight: 600; }
.be-row-label   { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-row-code    { font-family: monospace; font-size: 11px; color: var(--muted); margin-right: 4px; }
.be-row-base    { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.be-row-type    { text-align: center; }
.be-row-lever   { display: flex; gap: 6px; align-items: center; }
.be-row-lever input[type="range"] { flex: 1; accent-color: var(--primary, #C8102E); }
.be-lever-num   { width: 55px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 4px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.be-row-out     { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #111827; }
.be-row-out-down { color: #16a34a; }
.be-row-out-up   { color: #b91c1c; }
.be-fixed-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; cursor: pointer; }
.be-fixed-toggle input { cursor: pointer; }
.be-section-hdr { padding: 6px 12px; background: #fafafa; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; border-bottom: 1px solid #f3f4f6; }
.be-empty { padding: 10px 12px; color: var(--muted); font-size: 12px; text-align: center; }

@media (max-width: 720px) {
  .be-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .be-row-head, .be-section-hdr { display: none; }
}

/* ─── Installer management (Website Management) ────────────────────────── */
.inst-shell { padding: 0 16px; }
.inst-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 16px; }
@media (max-width: 700px) { .inst-tiles { grid-template-columns: 1fr; } }
.inst-tile { padding: 14px 18px; background: #FFF; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.inst-tile:hover { border-color: var(--primary, #C8102E); }
.inst-tile.active { border-color: var(--primary, #C8102E); box-shadow: 0 0 0 2px rgba(200,16,46,0.12); }
.inst-tile-num { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #111827; font-variant-numeric: tabular-nums; }
.inst-tile-num-good { color: #16a34a; }
.inst-tile-num-warn { color: #b45309; }
.inst-tile-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; margin-top: 4px; }
.inst-search-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.inst-search { flex: 1; min-width: 220px; max-width: 400px; padding: 8px 12px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; }
.inst-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 3px; }
.inst-badge-good { background: #dcfce7; color: #166534; }
.inst-badge-warn { background: #fef3c7; color: #92400e; }
.inst-badge-app  { background: #dbeafe; color: #1e40af; margin-left: 4px; }

/* ─── Portal engagement (Overview widget) ─────────────────────────────── */
.pe-shell { padding: 14px 16px; }
.pe-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pe-title { font-size: 14px; font-weight: 700; color: var(--text); }
.pe-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pe-totals { display: flex; gap: 18px; }
.pe-total-num { font-size: 18px; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }
.pe-total-lab { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pe-delta { font-size: 10px; font-weight: 700; margin-left: 4px; }
.pe-delta-up   { color: #16a34a; }
.pe-delta-down { color: #b91c1c; }
.pe-delta-flat { color: var(--muted); }
.pe-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .pe-cols { grid-template-columns: 1fr; } }
.pe-col-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.pe-roster { width: 100%; border-collapse: collapse; font-size: 12px; }
.pe-roster th, .pe-roster td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #f3f4f6; }
.pe-roster thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.pe-roster tbody tr:hover { background: #fef2f2; }
.pe-empty { font-size: 12px; color: var(--muted); padding: 8px 0; }

/* Contact-page portal activity card */
.portal-act-summary { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid #f3f4f6; margin-bottom: 8px; }
.portal-act-summary strong { color: var(--text); font-variant-numeric: tabular-nums; }
.portal-act-last-seen { margin-left: auto; }
.portal-act-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.portal-act-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: baseline; padding: 5px 0; font-size: 12px; }
.portal-act-icon { text-align: center; font-size: 13px; }
.portal-act-label { color: var(--text); font-weight: 500; }
.portal-act-detail { color: var(--muted); margin-left: 6px; }
.portal-act-when { color: var(--muted); font-size: 11px; white-space: nowrap; }

.ship-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 14px 0 16px;
}
.ship-tile {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.ship-tile-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  margin-bottom: 4px;
}
.ship-tile-value { font-size: 20px; font-weight: 600; color: #111827; }
.ship-tile-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ship-tile-delta { background: #fff; border-color: #d1d5db; }

.ship-delta-pos { color: #16a34a; }
.ship-delta-neg { color: #b91c1c; }
.ship-delta-zero { color: var(--muted); }

.ship-view-tabs {
  display: flex; gap: 4px;
  margin: 4px 0 12px;
  border-bottom: 1px solid var(--border);
}
.ship-view-btn {
  background: transparent; border: none;
  padding: 8px 14px;
  font: inherit; font-size: 13px; color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.ship-view-btn:hover { color: #374151; }
.ship-view-btn.active {
  color: #111827; font-weight: 600;
  border-bottom-color: #3b82f6;
}

/* Sample → Order conversion widget — reuses .ship-tiles / .ship-filters
   and adds a scroll-wrapped SVG chart with a stage-marker legend below. */
.conv-hint {
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
.conv-chart-wrap {
  overflow-x: auto;
  padding: 4px 0 12px;
}
.conv-chart {
  width: 100%;
  min-width: 620px;
  height: auto;
  display: block;
}
.conv-legend {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.conv-stage-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 4px; border-radius: 999px;
  font-size: 11px; font-weight: 500; color: #1f2937;
  background: #f3f4f6;
}
.conv-stage-chip.conv-stage-email { background: #ede9fe; color: #6d28d9; }
.conv-stage-chip.conv-stage-sms   { background: #cffafe; color: #0e7490; }
.conv-stage-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  font-size: 10px; font-weight: 700; color: #ffffff;
  background: currentColor;
}
.conv-stage-dot { color: inherit; }
.conv-stage-chip.conv-stage-email .conv-stage-dot { background: #7c3aed; color: #ffffff; }
.conv-stage-chip.conv-stage-sms   .conv-stage-dot { background: #0891b2; color: #ffffff; }

/* Conversion-trend maturity chip - tells the reader whether a bucket's rate
   is settled (all buyers had 60 days) or still a floor (window still open). */
.conv-trend-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.conv-trend-chip.conv-trend-mature  { background: #dcfce7; color: #166534; }
.conv-trend-chip.conv-trend-partial { background: #fef3c7; color: #92400e; }

/* ─── Marketing → Newsletters ───────────────────────────────────────────── */
.nl-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.nl-section-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 18px 0 8px; }
.nl-seg-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.nl-seg-tile {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; text-align: left; cursor: pointer;
  font-family: inherit; display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.nl-seg-tile:hover { border-color: var(--primary, #2563eb); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.nl-seg-tile:active { transform: translateY(1px); }
.nl-seg-tile-count { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.nl-seg-tile-label { font-size: 13px; font-weight: 600; color: var(--text); }
.nl-seg-tile-note  { font-size: 11px; color: var(--muted); line-height: 1.35; }

.nl-list { display: flex; flex-direction: column; gap: 6px; }
.nl-row {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: background 0.12s;
}
.nl-row:hover { background: #f9fafb; }
.nl-row-main { min-width: 0; }
.nl-row-subject { font-weight: 600; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.nl-row-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.nl-row-error { font-size: 11px; color: #b91c1c; margin-top: 4px; }
.nl-row-actions { display: flex; gap: 6px; }

.nl-status { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; }
.nl-status-draft   { background: #f3f4f6; color: #4b5563; }
.nl-status-sending { background: #fef3c7; color: #92400e; }
.nl-status-sent    { background: #dcfce7; color: #166534; }
.nl-status-failed  { background: #fee2e2; color: #991b1b; }

/* Compose modal — sized larger since it holds a big HTML textarea + preview. */
.modal-box.nl-compose-modal { max-width: 780px; max-height: 90vh; padding: 28px 32px; position: relative; }
.modal-box.nl-compose-modal #modal-content { max-height: calc(90vh - 56px); overflow-y: auto; }
.nl-compose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.nl-compose-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.nl-compose-grid select, .nl-compose-grid input, .nl-input {
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff; color: var(--text); text-transform: none;
}
.nl-flab { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.nl-input { width: 100%; box-sizing: border-box; }
.nl-body-head { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 4px; }
.nl-textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace;
  font-size: 12px; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fafafa; color: var(--text); resize: vertical; min-height: 200px;
}

.nl-preview-wrap { margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.nl-preview-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: #f3f4f6; font-size: 12px; font-weight: 600; color: var(--text); }
.nl-preview-iframe { width: 100%; height: 480px; border: none; background: #fff; }

.nl-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }

/* AI generation modal — floats above the compose modal. */
.nl-ai-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 16px; overflow-y: auto;
}
.nl-ai-card {
  position: relative; width: 100%; max-width: 500px;
  background: #fff; border-radius: 10px; padding: 24px 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

/* Row-level stats block on the Marketing list */
.nl-row-stats {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-top: 6px; font-size: 12px; color: var(--muted);
}
.nl-row-stats strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.nl-row-pct { color: var(--muted); margin-left: 3px; font-variant-numeric: tabular-nums; }
.nl-row-stats .btn { margin-left: auto; }

/* Send-detail modal — recipient table + summary tiles */
.modal-box.nl-detail-modal { max-width: 900px; max-height: 90vh; padding: 28px 32px; position: relative; }
.modal-box.nl-detail-modal #modal-content { max-height: calc(90vh - 56px); overflow-y: auto; }
.nl-detail-stats {
  display: flex; gap: 20px; padding: 12px 14px; margin: 10px 0 8px;
  background: #f9fafb; border: 1px solid var(--border); border-radius: 8px;
}
.nl-detail-stats > div { display: flex; flex-direction: column; }
.nl-detail-stat-lab { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.nl-detail-stat-val { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }
.nl-detail-stat-pct { font-size: 11px; color: var(--muted); }
.nl-detail-table th, .nl-detail-table td { font-size: 12px; padding: 6px 10px; }

.nl-send-badge {
  display: inline-block; padding: 1px 7px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px;
}
.nl-send-badge-delivered { background: #dbeafe; color: #1d4ed8; }
.nl-send-badge-opened    { background: #dcfce7; color: #166534; }
.nl-send-badge-failed    { background: #fee2e2; color: #991b1b; }

/* Contact-page newsletter card */
.contact-nl-stats {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 8px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.contact-nl-stats > div { display: flex; flex-direction: column; }
.contact-nl-lab { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.contact-nl-val { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.contact-nl-val small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.contact-nl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contact-nl-row { padding: 8px 10px; background: #fafafa; border: 1px solid #eee; border-radius: 6px; }
.contact-nl-subject { font-size: 12px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.contact-nl-meta    { font-size: 11px; color: var(--muted); margin-top: 3px; }
.contact-nl-unsub   { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e5e7eb; }
.contact-nl-unsub-lab { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.contact-nl-unsub-pill {
  display: inline-block; margin: 2px 4px 2px 0;
  padding: 2px 8px; font-size: 10px; font-weight: 600;
  background: #fee2e2; color: #991b1b; border-radius: 999px;
}

/* ─── Urgent call-back popup ─────────────────────────────────────────── */
.urgent-popup-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(30, 0, 5, 0.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: urgentFadeIn 0.15s ease-out;
}
@keyframes urgentFadeIn { from { opacity: 0; } to { opacity: 1; } }
.urgent-popup-card {
  background: #fff; border-radius: 12px; padding: 28px 32px;
  max-width: 480px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 4px rgba(200, 16, 46, 0.4);
}
.urgent-popup-flash {
  display: inline-block; padding: 6px 14px;
  background: #C8102E; color: #fff; font-weight: 800;
  font-size: 11px; letter-spacing: 0.1em; border-radius: 999px;
  animation: urgentPulse 1.4s infinite;
}
@keyframes urgentPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.urgent-popup-name { font-size: 24px; font-weight: 700; margin: 14px 0 6px; color: #17211C; }
.urgent-popup-phone {
  display: block; font-size: 26px; font-weight: 700; color: #C8102E;
  text-decoration: none; margin: 4px 0 6px;
}
.urgent-popup-phone:hover { text-decoration: underline; }
.urgent-popup-nophone { font-size: 13px; color: #92400e; margin: 6px 0; }
.urgent-popup-meta { font-size: 12px; color: #6b7280; margin-bottom: 12px; }
.urgent-popup-notes {
  text-align: left; white-space: pre-wrap; word-wrap: break-word;
  font: 12px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 10px 12px; max-height: 200px; overflow-y: auto;
  color: #414D46; margin: 6px 0 16px;
}
.urgent-popup-actions { display: flex; gap: 10px; justify-content: center; }
.urgent-popup-btn { padding: 12px 22px; font-size: 14px; font-weight: 600; border-radius: 6px; cursor: pointer; font-family: inherit; border: none; }
.urgent-popup-snooze { background: #fff; color: #414D46; border: 1px solid #d1d5db; }
.urgent-popup-snooze:hover { background: #f3f4f6; }
.urgent-popup-ack { background: #16a34a; color: #fff; }
.urgent-popup-ack:hover { background: #15803d; }
.urgent-popup-open-ticket {
  display: inline-block; margin-top: 12px;
  background: none; border: none; color: #6b7280; font-size: 12px; text-decoration: underline; cursor: pointer;
}
.urgent-popup-open-ticket:hover { color: #17211C; }

/* New-task heads-up toast (fires alongside the urgent popup poll) */
/* Sits to the left of the + button (58px at right:22px, plus its 22px pulse
   ring) so toasts never cover it; on phones it stacks above it instead. */
.new-task-toast-host {
  position: fixed; bottom: 22px; right: 106px; z-index: 9998;
  display: flex; flex-direction: column-reverse; gap: 8px;
  max-width: 320px;
}
@media (max-width: 768px) {
  .new-task-toast-host { right: 16px; left: 16px; bottom: 150px; max-width: none; align-items: flex-end; }
}
.new-task-toast {
  background: #fff; border: 1px solid #d5dad3; border-left: 4px solid #C8102E;
  border-radius: 6px; padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  animation: newTaskSlideIn 0.25s ease-out;
}
@keyframes newTaskSlideIn { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } }
.new-task-toast-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #C8102E; }
/* Live-chat variant of the corner toast — different left border colour +
   kicker tint so a chat notification reads distinct from a task ping. */
.new-chat-toast { border-left: 3px solid #C8102E; padding-left: 13px; }
.new-chat-toast .new-task-toast-kind { color: #C8102E; }
.new-task-toast-title { font-size: 13px; font-weight: 600; color: #17211C; margin-top: 2px; }
.new-task-toast-sub { font-size: 11px; color: #6b7280; margin-top: 2px; }
.new-task-toast-actions { display: flex; gap: 6px; margin-top: 8px; }
.new-task-toast-actions button {
  padding: 4px 10px; font-size: 11px; font-family: inherit; cursor: pointer;
  background: #fff; color: #414D46; border: 1px solid #d5dad3; border-radius: 4px;
}
.new-task-toast-actions button:hover { background: #f3f4f6; }
.new-task-toast-actions button:first-child { background: #C8102E; color: #fff; border-color: #C8102E; }
.new-task-toast-actions button:first-child:hover { background: #a00020; }

/* ─── Swatches page ─────────────────────────────────────────────────── */
.swatch-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.swatch-tile { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.swatch-tile-lab { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.swatch-tile-val { font-size: 24px; font-weight: 700; color: var(--text); margin-top: 3px; font-variant-numeric: tabular-nums; }
.swatch-tile-pending .swatch-tile-val { color: #C8102E; }
.swatch-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.swatch-toolbar-right { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch-table th, .swatch-table td { padding: 8px 10px; font-size: 13px; vertical-align: middle; }
.swatch-addr { color: var(--muted); font-size: 12px; }
.swatch-pill { display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 999px; }
.swatch-pill-pending { background: #fef3c7; color: #92400e; }
.swatch-pill-sent    { background: #dcfce7; color: #166534; }
.swatch-pill-cancelled { background: #e5e7eb; color: #4b5563; }
.swatch-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.swatch-list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.swatch-manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.swatch-manual-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.swatch-manual-grid label.wide { grid-column: 1 / -1; }
.swatch-manual-grid input, .swatch-manual-grid textarea { padding: 8px 10px; font-size: 13px; font-family: inherit; text-transform: none; border: 1px solid var(--border); border-radius: 5px; }

.contact-swatch-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contact-swatch-row { padding: 8px 10px; background: #fafafa; border: 1px solid #eee; border-radius: 6px; }
.contact-swatch-head { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.contact-swatch-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ─── Order Sheet (SA) — spreadsheet view of every order line ─────────────
   Mirrors the team's Google Sheet: same columns, status and material
   colours. Dense on purpose: the team scans hundreds of rows. */
.sheet-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px;
  background: #f9fafb; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; color: #374151;
}
.sheet-banner-mirror { background: #eef6ff; border-color: #c7defa; }
.sheet-banner-actions { display: flex; gap: 6px; }
.sheet-err { color: #b91c1c; }
.sheet-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.sheet-search {
  flex: 1 1 260px; min-width: 200px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px;
}
.sheet-scope .view-toggle-btn { padding: 6px 14px; font-size: 13px; }
.sheet-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sheet-chip {
  border: 1px solid rgba(0,0,0,0.12); background: #fff; color: #374151;
  border-radius: 14px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.sheet-chip.active { outline: 2px solid #111827; outline-offset: 1px; }
.sheet-chip-n { opacity: 0.75; font-weight: 700; margin-left: 2px; }
.sheet-count { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.sheet-wrap {
  overflow: auto; max-height: calc(100vh - 290px); min-height: 300px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.order-sheet { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: max-content; min-width: 100%; }
.order-sheet th {
  position: sticky; top: 0; z-index: 2; background: #f3f4f6; color: #374151;
  text-align: left; font-weight: 700; padding: 7px 8px; white-space: nowrap;
  border-bottom: 1px solid var(--border); border-right: 1px solid #e5e7eb;
}
.order-sheet td {
  padding: 5px 8px; border-bottom: 1px solid #eef0f3; border-right: 1px solid #f1f2f4;
  white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.order-sheet tr.band td:not([style]) { background: #fafbfc; }
.order-sheet tr:hover td:not([style]) { background: #f3f6fb; }
.order-sheet .sc-order { position: sticky; left: 0; z-index: 1; background: inherit; }
.order-sheet tr td.sc-order { background: #fff; }
.order-sheet tr.band td.sc-order { background: #fafbfc; }
.order-sheet .sc-num { text-align: right; font-variant-numeric: tabular-nums; }
.order-sheet .sc-item { min-width: 200px; }
.order-sheet .sc-notes { max-width: 220px; }
.order-sheet .sc-addr { max-width: 220px; color: #4b5563; }
.order-sheet .sc-panel, .order-sheet .sc-email { color: #4b5563; }
.order-sheet .sc-status { font-weight: 600; min-width: 130px; }
.order-sheet .sc-mat { font-weight: 600; }
.sheet-status-select {
  width: 100%; border: none; background: transparent; color: inherit;
  font: inherit; font-weight: 600; cursor: pointer; padding: 0;
}
.sheet-edit { cursor: text; }
.sheet-edit:focus { outline: 2px solid #2563eb; outline-offset: -2px; white-space: normal; background: #fff !important; color: #111827 !important; }
.sheet-empty { text-align: center; color: var(--muted); padding: 30px !important; }
.sheet-more { text-align: center; margin: 12px 0; }
.sheet-settings { max-width: 620px; }
.sheet-settings .modal-body { display: flex; flex-direction: column; gap: 6px; }
.sheet-settings hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.ss-label { font-size: 12px; font-weight: 700; color: #374151; margin-top: 6px; }
.ss-input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.ss-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-top: 6px; }
.ss-check input { margin-top: 3px; }
.ss-emails { padding: 12px; border-radius: 8px; background: #f9fafb; border: 1px solid var(--border); font-size: 13px; }
.ss-emails.on { background: #ecfdf5; border-color: #a7f3d0; }
.ss-emails p { margin: 6px 0; color: #4b5563; }
.sheet-settings .modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (max-width: 768px) {
  .sheet-wrap { max-height: calc(100vh - 340px); }
}
.sheet-material-select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600; background: #fff; cursor: pointer; max-width: 260px;
}
.order-sheet .sc-crop { max-width: 160px; color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
/* Trade page */
.trade-table td { white-space: normal; }
.trade-sub { font-size: 11.5px; color: var(--muted); }
.trade-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 700; background: #f3f4f6; color: #374151; text-transform: capitalize; }
.trade-approved { background: #dcfce7; color: #166534; }
.trade-pending { background: #fef3c7; color: #92400e; }
.trade-rejected, .trade-removed { background: #fee2e2; color: #991b1b; }
.trade-suspended { background: #e5e7eb; color: #4b5563; }

/* Trade 1.8 — designer rooms & renders gallery */
.trade-visuals-modal { width: min(980px, 96vw); max-height: 90vh; display: flex; flex-direction: column; }
.trade-visuals-modal .modal-body { overflow-y: auto; }
.tv-h { margin: 14px 0 8px; font-size: 14px; }
.tv-h:first-child { margin-top: 0; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tv-grid-sm { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tv-card { margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.tv-card img, .tv-missing { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #f1f1f1; }
.tv-missing { display: flex; align-items: center; justify-content: center; font-size: 12px; color: #888; }
.tv-card figcaption { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.tv-card figcaption span { color: #888; }
.tv-shares { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }

/* Order Sheet: compact columns so every line's Status is visible without
   scrolling sideways (full text in tooltips). Notes sit right after Status. */
.order-sheet { font-size: 12px; }
.order-sheet th { padding: 6px 6px; }
.order-sheet td { padding: 4px 6px; max-width: 200px; }
.order-sheet .sc-date { width: 58px; color: #4b5563; font-variant-numeric: tabular-nums; }
.order-sheet .sc-order { max-width: 92px; }
.order-sheet .sc-cust { max-width: 105px; }
.order-sheet .sc-qty { width: 28px; }
.order-sheet .sc-item { min-width: 0; max-width: 150px; }
.order-sheet .sc-mat { max-width: 110px; }
.order-sheet .sc-type { max-width: 80px; }
.order-sheet .sc-dim { width: 40px; }
.order-sheet .sc-status { min-width: 118px; max-width: 140px; }
.order-sheet .sc-notes { min-width: 150px; max-width: 210px; white-space: normal; padding-top: 3px; padding-bottom: 3px; }
.order-sheet .sc-notes > div { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.order-sheet .sc-notes > div:focus { display: block; -webkit-line-clamp: unset; outline: 2px solid #2563eb; outline-offset: 1px; background: #fff; border-radius: 3px; }
.sn-sheet { color: #4b5563; }
.sn-sheet + .sn-crm { margin-top: 2px; }
.sn-crm { cursor: text; min-height: 1.35em; color: #111827; }
.sn-crm:empty::before, .sn-sheet:empty::before { content: attr(data-ph); color: #b6bcc4; }
.sn-crm:not(:empty) { background: #fffbea; border-radius: 3px; padding: 0 3px; }
.order-sheet .sc-notes > .sn-sheet { -webkit-line-clamp: 1; }
.order-sheet .sc-notes > .sn-sheet:focus { -webkit-line-clamp: unset; }
.order-sheet .sn-sheet:not(:empty) + .sn-crm:empty:not(:focus) { display: none; }
.order-sheet tr:hover .sn-sheet:not(:empty) + .sn-crm:empty { display: block; }

/* ─── Workflows (public/workflows.js) ─────────────────────────────────── */
.wf-brand { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.wf-note { margin: 0 0 14px; max-width: 820px; }
.wf-h3 { font-size: 14px; margin: 18px 0 10px; color: var(--text); }
.wf-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; vertical-align: middle; white-space: nowrap; }
.wf-st-draft  { background: #eef0f3; color: #4b5563; }
.wf-st-test   { background: #fff4d6; color: #8a5a00; }
.wf-st-live   { background: #dcf3e5; color: #166534; }
.wf-st-paused { background: #f3e8e8; color: #8a2c2c; }
.wf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.wf-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.wf-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.wf-card-actions { display: flex; gap: 6px; }
.wf-card-desc { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.wf-card-foot { margin-top: 10px; font-size: 12px; color: var(--muted); }
.wf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-chip { font-size: 11px; background: #f5f6f8; border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; color: #374151; }
.wf-table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.wf-table { width: 100%; }
.wf-table td, .wf-table th { padding: 9px 12px; vertical-align: top; font-size: 13px; }
.wf-row-err td { background: #fff5f5; }
.wf-empty { background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center; }
.wf-empty p { color: var(--muted); max-width: 520px; margin: 8px auto 14px; font-size: 13px; }
.wf-toolbar { flex-wrap: wrap; gap: 8px; }
.wf-name { font: 600 16px var(--wpo-font-head); border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; min-width: 220px; background: transparent; }
.wf-name:hover, .wf-name:focus { border-color: var(--border); background: #fff; outline: none; }
.wf-toolbar-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.wf-danger { color: var(--red) !important; }
.wf-banner-test { background: #fffaeb; border-color: #f3d28a; }
.wf-banner-draft { background: #f4f6fb; }
.wf-editor { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 10px; }
@media (max-width: 900px) { .wf-editor { grid-template-columns: 1fr; } }
.wf-side { display: flex; flex-direction: column; gap: 10px; }
.wf-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.wf-box-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.wf-box select, .wf-box input:not([type=checkbox]), .wf-box textarea,
.wf-step-body select, .wf-step-body input, .wf-step-body textarea,
#modal-content .wf-lbl + input { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; }
.wf-row { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.wf-row input, .wf-row select { width: auto !important; }
.wf-check { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; cursor: pointer; }
.wf-check input { margin-top: 2px; }
.wf-hint { font-size: 12px; color: var(--muted); }
.wf-lbl { display: block; font-size: 12px; font-weight: 600; color: #374151; margin: 10px 0 4px; }
.wf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wf-flow { max-width: 720px; }
.wf-start { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.wf-start-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.wf-end { margin: 0 auto; width: max-content; font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 12px; padding: 3px 12px; background: #fff; }
.wf-add { position: relative; display: flex; justify-content: center; padding: 6px 0; }
.wf-add-line { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid var(--border); }
.wf-add-btns { position: relative; display: flex; gap: 2px; background: var(--bg); padding: 0 4px; opacity: .55; transition: opacity .15s; }
.wf-add:hover .wf-add-btns, .wf-add-btns:focus-within { opacity: 1; }
.wf-add-btns .btn { font-size: 11px; padding: 2px 7px; }
.wf-step { background: var(--card); border: 1px solid var(--border); border-left: 4px solid #cbd2dc; border-radius: var(--radius); }
.wf-step-email { border-left-color: #2563eb; } .wf-step-sms { border-left-color: #7c3aed; }
.wf-step-wait { border-left-color: #9ca3af; background: #fafbfc; } .wf-step-task { border-left-color: #b07d00; }
.wf-step.open { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.wf-step-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.wf-step-icon { width: 20px; text-align: center; }
.wf-step-num { font-size: 11px; color: var(--muted); min-width: 14px; }
.wf-step-sum { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-step-sum span { color: #4b5563; margin-left: 4px; }
.wf-step-tools { display: flex; gap: 2px; }
.wf-step-tools .btn { padding: 2px 7px; }
.wf-step-body { padding: 2px 14px 14px 44px; border-top: 1px solid #eef0f3; }
.wf-step-foot { margin-top: 12px; display: flex; gap: 8px; }
.wf-preview { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 6px; background: #f4f2ee; }
.wf-add-people { margin: 10px 0 12px; max-width: 520px; }
.wf-add-people .btn { align-self: flex-start; }
.wf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; background: #eef2ff; color: #3730a3; border-radius: 12px; padding: 2px 4px 2px 9px; }
.wf-tag button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
.wf-crun { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; padding: 5px 0; border-top: 1px solid #f0f1f4; }
.wf-table th { text-align: left; white-space: nowrap; }
.wf-table th.sc-num, .wf-table td.sc-num { text-align: right; }
.wf-input { padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; }

/* Built-in messages editor */
.wb-title { font: 600 16px var(--wpo-font-head); }
.wb-flow { max-width: 860px; }
.wb-gap { height: 8px; }
.wb-day { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.wb-day input { width: 58px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; }
.wb-on { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.wb-off .wf-step-sum { opacity: .5; text-decoration: line-through; }
.wb-sms { background: #eef2ff; border-radius: 14px; padding: 12px 14px; max-width: 360px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }

/* Email log (public/emaillog.js) */
.el-summary { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 0 0 12px; }
.el-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; min-width: 130px; display: flex; flex-direction: column; }
.el-tile span { font-size: 12px; color: var(--muted); } .el-tile strong { font-size: 22px; } .el-tile em { font-size: 11px; color: var(--muted); font-style: normal; }
.el-tile.el-bad strong { color: var(--red); }
.el-live { align-self: center; margin-left: auto; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.el-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: el-pulse 2s infinite; }
@keyframes el-pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.el-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.el-filters select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; }
.el-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .el-grid { grid-template-columns: 1fr; } }
.el-table td { font-size: 13px; }
.el-time { white-space: nowrap; color: var(--muted); }
.el-subj { max-width: 420px; }
.el-err { color: var(--red); font-size: 12px; margin-top: 3px; }
.el-new td { animation: el-flash 3s ease-out; }
@keyframes el-flash { from { background: #fff7d6; } to { background: transparent; } }
.el-upcoming ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.el-due { display: inline-block; min-width: 62px; color: var(--muted); }

.wf-lbl-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.wf-insert { margin: 10px 0 4px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; background: #fff; max-width: 260px; }

/* ── Website activity (public/siteActivity.js) ─────────────────────────── */
.sa-wrap { padding: 4px 0 40px; }
.sa-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sa-sub, .sa-muted { color: var(--muted); }
.sa-sub { font-size: 12px; margin-top: 3px; }
.sa-livepill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 6px 14px; font-weight: 600; cursor: pointer; color: var(--muted); }
.sa-livepill.on { color: #0f5132; border-color: #a7d7b9; background: #ecf8f0; }
.sa-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.sa-livepill.on .sa-dot { background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: saPulse 1.6s infinite; }
@keyframes saPulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.sa-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.sa-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--card); flex-wrap: wrap; }
.sa-seg button { border: 0; background: none; padding: 6px 11px; font-size: 13px; cursor: pointer; color: var(--text); border-right: 1px solid var(--border); }
.sa-seg button:last-child { border-right: 0; }
.sa-seg button.on { background: var(--text); color: #fff; }
.sa-custom input { padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; }
.sa-select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); max-width: 220px; font-size: 13px; }
.sa-rangelabel { margin-left: auto; font-size: 12px; }
.sa-note { background: #f1f5f9; border-radius: 6px; padding: 8px 12px; font-size: 13px; margin: 6px 0; }
.sa-note.warn { background: #fff7e6; border: 1px solid #f5d38a; }
.sa-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin: 10px 0 6px; }
.sa-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.sa-tile-label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.sa-tile-num { font-size: 26px; font-weight: 700; font-family: var(--wpo-font-head); margin: 2px 0; }
.sa-tile-sub { font-size: 12px; color: var(--muted); }
.sa-delta { font-weight: 600; color: var(--muted); white-space: nowrap; }
.sa-delta.up { color: var(--green); } .sa-delta.down { color: var(--red); }
.sa-minis { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 4px 2px 12px; }
.sa-warn { color: var(--orange); font-weight: 600; }
.sa-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.sa-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; font-size: 13px; }
.sa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sa-span2 { grid-column: 1 / -1; }
@media (max-width: 1000px) { .sa-grid { grid-template-columns: 1fr; } .sa-rangelabel { margin-left: 0; } }
.sa-funnel { padding: 12px 14px; margin-bottom: 12px; }
.sa-fstep { display: grid; grid-template-columns: 130px 1fr 220px; gap: 10px; align-items: center; padding: 3px 0; font-size: 13px; }
.sa-fbar { background: #f1f5f9; border-radius: 4px; height: 14px; overflow: hidden; }
.sa-fbar div { background: var(--primary); height: 100%; border-radius: 4px; }
@media (max-width: 700px) { .sa-fstep { grid-template-columns: 100px 1fr; } .sa-fnum { grid-column: 2; } }
.sa-tablewrap { overflow-x: auto; }
.sa-table { width: 100%; font-size: 13px; }
.sa-table th.num, .sa-table td.num { text-align: right; white-space: nowrap; }
.sa-table th { cursor: pointer; user-select: none; }
.sa-table th.sorted { color: var(--primary); }
.sa-table tbody tr { cursor: pointer; }
.sa-table tbody tr:hover { background: #f8fafc; }
.sa-table tbody tr.on { background: #fff1f2; }
.sa-share { height: 3px; background: #f1f5f9; border-radius: 2px; margin-top: 4px; max-width: 220px; }
.sa-share div { height: 100%; background: #94a3b8; border-radius: 2px; }
.sa-chip { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #eef2f7; color: #334155; font-weight: 600; white-space: nowrap; }
.sa-chip.ch-paid_search { background: #e0ecff; color: #1d4ed8; }
.sa-chip.ch-paid_social { background: #f3e8ff; color: #7e22ce; }
.sa-chip.ch-organic_search { background: #e7f6ec; color: #166534; }
.sa-chip.ch-organic_social { background: #fdf2f8; color: #be185d; }
.sa-chip.ch-email { background: #fff7e6; color: #b45309; }
.sa-chip.ch-referral { background: #f0fdfa; color: #0f766e; }
.sa-chip.ch-ai_assistant { background: #ede9fe; color: #5b21b6; }
.sa-legend { font-size: 11px; color: var(--muted); }
.sa-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: -1px; }
.sa-live { max-height: 560px; overflow-y: auto; }
.sa-visit { border-bottom: 1px solid var(--border); padding: 8px 12px; font-size: 13px; }
.sa-visit.hot { border-left: 3px solid var(--primary); }
.sa-visit summary { list-style: none; cursor: pointer; }
.sa-visit summary::-webkit-details-marker { display: none; }
.sa-visit-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sa-right { margin-left: auto; }
.sa-visit-now { margin-top: 3px; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-visit-keys { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sa-trail { margin: 8px 0 6px 0; padding-left: 18px; font-size: 12px; max-height: 260px; overflow-y: auto; }
.sa-trail li { margin: 2px 0; }
.sa-ev { font-weight: 600; white-space: nowrap; }
.sa-ev.ev-add_to_cart, .sa-ev.ev-checkout_start, .sa-ev.ev-purchase { color: #1d4ed8; }
.sa-ev.ev-whatsapp_click, .sa-ev.ev-lead_submit, .sa-ev.ev-phone_click, .sa-ev.ev-email_click { color: #15803d; }
.sa-ev.ev-checkout_error, .sa-ev.ev-payment_fail { color: var(--orange); }
.sa-ev.ev-page_view, .sa-ev.ev-product_view { font-weight: 400; color: var(--muted); }
.sa-what { color: #334155; }
.sa-feed { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
.sa-feed li { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.sa-feed-when { font-size: 11px; color: var(--muted); }
.sa-feed-who { margin-top: 2px; font-size: 12px; }

/* Workflows: live email preview inside an open email step */
.wf-live { margin-top: 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fbfaf8; }
.wf-live-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--card); font-size: 13px; }
.wf-live-who { color: var(--muted); }
.wf-live-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.wf-live-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.wf-live-seg button { border: 0; background: none; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.wf-live-seg button.on { background: var(--text); color: #fff; }
.wf-live-subject { padding: 6px 12px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--card); }
.wf-live-stage { display: flex; justify-content: center; background: #f4f2ee; }
.wf-live-frame { width: 100%; height: 640px; border: 0; background: #f4f2ee; display: block; transition: width .2s; }
.wf-live-frame.phone { width: 390px; max-width: 100%; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.wf-live + .wf-hint, .wf-live .wf-hint { padding: 6px 12px 8px; }

/* Clients / Vendors inbox switch on the Tickets tab */
.tickets-inbox-switch { display: inline-flex; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.tickets-inbox-switch .inbox-tab { border: 0; border-radius: 0; background: none; padding: 6px 12px; font-size: 13px; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: all 0.15s; }
.tickets-inbox-switch .inbox-tab + .inbox-tab { border-left: 1px solid var(--border); }
.tickets-inbox-switch .inbox-tab:hover:not(.active) { background: #f3f4f6; color: var(--text); }
.tickets-inbox-switch .inbox-tab.active { background: var(--primary); color: #fff; }
.tickets-inbox-switch .inbox-count:empty { display: none; }
.tickets-inbox-switch .inbox-count { font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 10px; background: #eef0f3; color: var(--text); min-width: 18px; text-align: center; }
.tickets-inbox-switch .inbox-tab.active .inbox-count { background: rgba(255,255,255,0.25); color: #fff; }
/* Quick allocate button — always visible (works on phones, unlike the hover actions) */
.ticket-inbox-quick, .ticket-inbox-detail { margin-left: auto; border: 1px solid var(--border); background: #fff; color: var(--muted); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 500; cursor: pointer; line-height: 1.5; }
.ticket-inbox-quick:hover, .ticket-inbox-detail:hover { color: var(--text); border-color: #9ca3af; background: #f9fafb; }
.ticket-inbox-detail { margin-left: 0; }
.ticket-vendor-pill { display: inline-block; background: #ede9fe; color: #5b21b6; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600; }
.ticket-filtered-pill { display: inline-block; background: #f3f4f6; color: #6b7280; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600; }
.ticket-inbox-quick.ticket-inbox-second { margin-left: 4px; }
.ticket-inbox-detail.ticket-inbox-second { margin-left: 4px; }
.ticket-badge-request { background: #ede9fe; color: #5b21b6; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600; }

/* Workflow email engagement */
.wf-step-stats { display:flex; flex-wrap:wrap; gap:4px 14px; padding:6px 14px 8px 52px; font-size:12px; color:var(--muted); border-top:1px dashed var(--border); }
.wf-start + .wf-step-stats { padding-left:14px; border:1px solid var(--border); border-radius:6px; margin:6px 0 4px; background:#fafafa; }
.wf-step-stats b { color:var(--text); font-weight:600; }
.wf-stat-pct { color:#6b7280; }
.wf-cemail { padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; }
.wf-cemail:last-of-type { border-bottom:0; }
.wf-ebs { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.wf-eb { font-size:11px; padding:1px 6px; border-radius:4px; background:#f3f4f6; color:#9ca3af; }
.wf-eb-on { background:#eef2ff; color:#3730a3; }
.wf-eb-ok { background:#dcfce7; color:#166534; }

/* Sample artwork (print artwork confirmation) */
.pa-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.pa-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.pa-tab { border:1px solid var(--border); background:#fff; border-radius:16px; padding:5px 12px; font-size:13px; cursor:pointer; color:var(--text); }
.pa-tab.active { background:#1a1a1a; border-color:#1a1a1a; color:#fff; }
.pa-count { display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:#e5e7eb; color:#111; font-size:11px; text-align:center; margin-left:2px; }
.pa-tab.active .pa-count { background:#fff; }
.pa-card { background:#fff; border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:12px; }
.pa-card-warn { border-color:#f59e0b; }
.pa-card-head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.pa-lines { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 10px; }
.pa-line { font-size:12px; background:#f3f4f6; border-radius:4px; padding:1px 7px; color:#374151; }
.pa-body { display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:16px; }
@media (max-width: 900px) { .pa-body { grid-template-columns:1fr; } }
.pa-images { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pa-img { display:block; text-decoration:none; color:var(--muted); font-size:11px; text-align:center; }
.pa-img img, .pa-noimg { width:100%; aspect-ratio:1; object-fit:contain; background:#f7f7f5; border:1px solid var(--border); border-radius:6px; display:block; }
.pa-noimg { display:flex; align-items:center; justify-content:center; font-size:12px; color:#9ca3af; }
.pa-img span { display:block; margin-top:3px; }
.pa-facts { font-size:13px; margin-bottom:8px; }
.pa-dpi { display:inline-block; font-size:12px; font-weight:600; border-radius:4px; padding:2px 8px; }
.pa-dpi-green { background:#dcfce7; color:#166534; } .pa-dpi-amber { background:#fef3c7; color:#92400e; }
.pa-dpi-red { background:#fee2e2; color:#991b1b; } .pa-dpi-unknown { background:#f3f4f6; color:#6b7280; }
.pa-warn { margin:6px 0 8px 16px; padding:0; font-size:12px; color:#92400e; }
.pa-note { font-size:13px; background:#fffbeb; border:1px solid #fde68a; border-radius:6px; padding:8px 10px; margin:8px 0; }
.pa-note-ok { background:#f0fdf4; border-color:#bbf7d0; }
.pa-err { font-size:12px; color:#b91c1c; margin-top:4px; }
.pa-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pa-paste { margin-top:10px; border-top:1px dashed var(--border); padding-top:10px; }
.pa-paste input, .pa-search input { padding:6px 8px; border:1px solid var(--border); border-radius:4px; font-size:13px; }
.pa-pasted { display:grid; grid-template-columns:140px 1fr; gap:10px; margin-top:8px; font-size:13px; }
.pa-picks, .pa-search { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.pa-pick { display:flex; align-items:center; gap:8px; justify-content:space-between; border:1px solid var(--border); border-radius:6px; padding:6px 10px; font-size:13px; }

/* Order screens: Sample button turns green once the line's sample is rendered (to check, or approved) */
.sample-pill-ready { color: #166534; background: #dcfce7; border-color: #86efac; font-weight: 600; }
.sample-pill-ready:hover { background: #bbf7d0; }

/* ─── Sales → Quotes (public/quotes.js) ─────────────────────────────────── */
.qt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; margin-top: 10px; }
.qt-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qt-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; }
.qt-sec .wf-box-title { margin-bottom: 10px; }
.qt-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.qt-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.qt-f input, .qt-f select, .qt-f textarea, .qt-sec > textarea { font: inherit; font-size: 14px; color: var(--text, #1a1a1a); padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: #fff; min-width: 0; }
.qt-sec > textarea { width: 100%; resize: vertical; }
.qt-f.qt-block { margin-top: 8px; } .qt-f.qt-block textarea, .qt-f.qt-block input { width: 100%; resize: vertical; }
.qt-row .qt-f { flex-direction: row; align-items: center; gap: 8px; }
.qt-row .qt-f input { width: 110px; }
.qt-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.qt-cust-head { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.qt-cust-head strong { font-size: 15px; }
.qt-results { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.qt-result { text-align: left; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 2px; }
.qt-result:hover { border-color: var(--text, #1a1a1a); }
.qt-line { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border); }
.qt-line:first-child { padding-top: 0; }
.qt-grow { flex: 1 1 180px; } .qt-mat { flex: 1 1 220px; } .qt-mat select { width: 100%; }
.qt-s input { width: 90px; } .qt-xs input { width: 60px; } .qt-m input { width: 100px; }
.qt-amt { display: flex; flex-direction: column; align-items: flex-end; min-width: 100px; margin-left: auto; padding-bottom: 6px; }
.qt-amt strong { font-size: 15px; }
.qt-x { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px 8px; }
.qt-x:hover { color: var(--red); }
.qt-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.qt-tl { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.qt-grand { font-size: 18px; font-weight: 600; border-top: 2px solid var(--text, #1a1a1a); margin-top: 6px; padding-top: 8px; }
.qt-actions { display: flex; flex-direction: column; gap: 8px; }
.qt-actions .btn { width: 100%; justify-content: center; text-align: center; }
.qt-actions hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; }
.btn-whatsapp { background: #1f8f4e; color: #fff; border: 1px solid #1f8f4e; }
.btn-whatsapp:hover:not(:disabled) { background: #17753f; }
.btn-whatsapp:disabled { opacity: .45; cursor: not-allowed; }
a.btn-whatsapp, a.btn-primary { text-decoration: none; }
.qt-chat { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; margin-top: 6px; font-size: 13px; background: #fff; }
.qt-chat summary { cursor: pointer; }
.qt-chat pre, .qt-pre { white-space: pre-wrap; word-break: break-word; font: 13px/1.5 inherit; font-family: inherit; margin: 8px 0 0; max-height: 360px; overflow: auto; background: #f7f6f3; padding: 10px; border-radius: 6px; }
@media (max-width: 900px) { .qt-grid { grid-template-columns: 1fr; } .qt-side { position: static; } }
.nav-item[hidden], [data-feature][hidden] { display: none !important; }
.qt-row .wf-check { white-space: nowrap; }
.qt-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 24px; gap: 8px 10px; align-items: end; }
.qt-line .qt-f input, .qt-line .qt-f select { width: 100%; }
.qt-line .qt-grow { grid-column: span 3; } .qt-line .qt-mat { grid-column: span 2; }
.qt-line .qt-x { grid-column: 6; grid-row: 1; align-self: center; }
.qt-line .qt-amt { margin-left: 0; min-width: 0; }
.qt-line-item .qt-grow { grid-column: span 2; }
.qt-xero { margin-top:8px; font-size:13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.qt-xero-ok { color:#166534; background:#dcfce7; border-radius:4px; padding:2px 8px; font-weight:600; font-size:12px; }

/* ─── Tax Returns (Accounting) ─────────────────────────────────────────── */
.tx-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; }
.tx-year { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
.tx-q-months { font-size: 11px; color: var(--muted); margin-left: 2px; }
.filter-btn.active .tx-q-months { color: inherit; opacity: 0.8; }
.tx-custom { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--muted); }
.tx-custom input { padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
.tx-meta { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.tx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1000px) { .tx-cards { grid-template-columns: minmax(0, 1fr); } }
.tx-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 16px 18px; margin-bottom: 16px; }
.tx-cards .tx-card { margin-bottom: 0; }
.tx-card header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; }
.tx-card h3 { margin: 0; font-size: 16px; }
.tx-card-sub { font-size: 12px; color: var(--muted); }
.tx-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.tx-line-label { font-size: 14px; }
.tx-line-num { display: inline-block; min-width: 34px; padding: 1px 6px; margin-right: 6px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); font-size: 12px; font-weight: 600; text-align: center; }
.tx-line-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tx-line-value { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.tx-line-total { border-top: 2px solid var(--text); }
.tx-line-total .tx-line-label { font-weight: 700; }
.tx-line-total .tx-line-value { font-size: 20px; }
.tx-copy { min-width: 64px; }
.tx-copy.tx-copied { background: var(--green); color: #fff; border-color: var(--green); }
.tx-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.tx-sub { font-size: 12px; color: var(--muted); }
.acct-table.tx-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 13px; }
.tx-sources, .tx-check { overflow-x: auto; }
.tx-table th { text-align: left; padding: 8px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); }
.tx-table td { padding: 8px 10px; vertical-align: top; }
.tx-table td.num, .tx-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-check { border-color: var(--orange); }
.tx-total-row td { font-weight: 700; border-top: 2px solid var(--text); padding: 8px 10px; }
.tx-inferred { color: var(--orange); font-weight: 700; cursor: help; }
.tx-details { margin-top: 10px; }
.tx-details > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; }
.tx-details > table { margin-top: 8px; }
.tx-row-link { cursor: pointer; }
.tx-row-link:hover td { background: var(--hover, #f5f6f8); }
.tx-view { font-size: 11px; font-weight: 600; color: var(--blue); margin-left: 6px; }
.modal.tx-docs-modal { max-width: 1100px; width: 94vw; }
.tx-docs-count { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.tx-docs-search { width: 100%; padding: 8px 10px; margin: 4px 0 10px; border: 1px solid var(--border, #ddd); border-radius: 6px; font-size: 13px; }
.tx-docs-scroll { max-height: 60vh; overflow: auto; }
.tx-docs-table thead th { position: sticky; top: 0; background: var(--card-bg, #fff); z-index: 1; }
.tx-doc-row { cursor: pointer; }
.tx-doc-row:hover td { background: var(--hover, #f5f6f8); }
.tx-doc-lines > td { background: #fafafa; padding: 6px 10px 10px 24px; }
.tx-lines { width: 100%; border-collapse: collapse; font-size: 12px; }
.tx-lines th, .tx-lines td { padding: 3px 6px; text-align: left; border-bottom: 1px solid #eee; }
.tx-lines .num { text-align: right; white-space: nowrap; }

/* Sales → Trade: Invite Designer modal (form + live email preview) */
.modal.ti-modal { max-width:1240px; width:96vw; }
.ti-layout { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:20px; }
.ti-mode { display:flex; gap:8px; }
.ti-preview { display:flex; flex-direction:column; }
.ti-preview iframe { flex:1; min-height:600px; width:100%; border:1px solid var(--border,#e5e7eb); border-radius:6px; background:#f4f2ee; }
@media (max-width: 800px) { .ti-layout { grid-template-columns:1fr; } }

/* Order Status → filters: search by order number or name */
.orders-search { width: 220px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
@media (max-width: 768px) { .orders-search { width: 100%; } }
/* Order Sheet: crop preview */
.order-sheet td.sc-thumb { padding: 2px 4px; width: 46px; }
.order-sheet td.sc-thumb img { display: block; height: 34px; width: 42px; object-fit: cover; border-radius: 3px; border: 1px solid var(--border); background: #f7f7f5; }

/* ── + button menu (New contact / Conversations) ─────────────────────── */
.fab-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab-wrap .fab-new-contact { position: relative; right: auto; bottom: auto; }
.fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .14s, transform .14s; }
.fab-wrap:hover .fab-menu, .fab-wrap.open .fab-menu { opacity: 1; transform: none; pointer-events: auto; }
.fab-wrap:hover::before { content: ''; position: absolute; inset: -12px -12px 0 -60px; z-index: -1; } /* keeps hover alive between button and menu */
.fab-menu-item { display: flex; align-items: center; gap: 8px; background: #fff; color: var(--text, #111827); border: 1px solid var(--border, #e5e7eb); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.12); white-space: nowrap; }
.fab-menu-item:hover { background: #f9fafb; }
.fab-menu-count { background: #C8102E; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.fab-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: #111827; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; padding: 0 5px; border: 2px solid #fff; }
.fab-menu-count.hidden, .fab-badge.hidden { display: none; }
@media (max-width: 768px) { .fab-wrap { right: 16px; bottom: 78px; } .fab-wrap .fab-new-contact { right: auto; bottom: auto; } }

/* ── Conversations panel (chats + SMS, messenger style) ───────────────── */
.conv-panel { position: fixed; right: 22px; bottom: 92px; width: min(820px, calc(100vw - 32px)); height: min(600px, calc(100vh - 120px)); background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.22); z-index: 950; display: flex; flex-direction: column; overflow: hidden; }
.conv-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border, #e5e7eb); }
.conv-head h3 { margin: 0; font-size: 16px; }
.conv-body { flex: 1; display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
.conv-list { border-right: 1px solid var(--border, #e5e7eb); overflow-y: auto; background: #fafafa; }
.conv-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6b7280); padding: 12px 14px 6px; }
.conv-group-reply { color: #C8102E; }
.conv-row { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #f0f0f0; padding: 10px 14px; cursor: pointer; font: inherit; }
.conv-row:hover { background: #f3f4f6; }
.conv-row.active { background: #eef2ff; }
.conv-row.reply { background: #fff5f5; box-shadow: inset 3px 0 0 #C8102E; }
.conv-row.reply.active { background: #fde8ea; }
.conv-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.conv-row-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-row-time { font-size: 11px; color: var(--muted, #6b7280); flex-shrink: 0; }
.conv-row-preview { font-size: 13px; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.conv-row.reply .conv-row-preview { color: #111827; font-weight: 500; }
.conv-kind { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 5px; margin-right: 5px; vertical-align: 1px; }
.conv-kind-sms { background: #fef3c7; color: #92400e; }
.conv-kind-chat { background: #dbeafe; color: #1e40af; }
.conv-main { display: flex; flex-direction: column; min-height: 0; }
.conv-main-head { padding: 10px 16px; border-bottom: 1px solid var(--border, #e5e7eb); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.conv-main-name { font-weight: 600; }
.conv-main-sub { font-size: 12px; color: var(--muted, #6b7280); }
.conv-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: #f7f7f8; }
.conv-day { align-self: center; font-size: 11px; color: var(--muted, #6b7280); margin: 8px 0 2px; }
.conv-bubble { max-width: 75%; padding: 8px 12px; border-radius: 18px; font-size: 14px; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; }
.conv-them { align-self: flex-start; background: #fff; border: 1px solid #e5e7eb; border-bottom-left-radius: 5px; }
.conv-us { align-self: flex-end; background: #2563eb; color: #fff; border-bottom-right-radius: 5px; }
.conv-system { align-self: center; background: none; color: var(--muted, #6b7280); font-size: 12px; font-style: italic; text-align: center; }
.conv-meta { font-size: 10px; color: var(--muted, #6b7280); margin: -2px 6px 4px; }
.conv-meta-us { align-self: flex-end; }
.conv-meta-them { align-self: flex-start; }
.conv-bubble img { display: block; max-width: 220px; border-radius: 10px; margin: 4px 0; }
.conv-compose { border-top: 1px solid var(--border, #e5e7eb); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-end; background: #fff; }
.conv-compose textarea { flex: 1; resize: none; min-height: 40px; max-height: 140px; border: 1px solid var(--border, #e5e7eb); border-radius: 20px; padding: 9px 14px; font: inherit; font-size: 14px; }
.conv-compose .btn { border-radius: 20px; }
.conv-pics { display: flex; gap: 6px; padding: 0 12px 8px; flex-wrap: wrap; }
.conv-pics img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; }
.conv-empty { color: var(--muted, #6b7280); font-size: 13px; padding: 24px; text-align: center; }
@media (max-width: 700px) {
  .conv-panel { right: 8px; left: 8px; width: auto; bottom: 140px; }
  .conv-body { grid-template-columns: 1fr; }
  .conv-body.has-active .conv-list { display: none; }
  .conv-body:not(.has-active) .conv-main { display: none; }
}
.conv-back { display:none; } @media (max-width: 700px) { .conv-back { display:inline-block; } }

/* + button pulses while a conversation is waiting on us */
@keyframes fab-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(200,16,46,.55); } 70% { box-shadow: 0 0 0 22px rgba(200,16,46,0); } 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); } }
@keyframes fab-pulse-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.fab-wrap.fab-pulse .fab-new-contact { animation: fab-pulse-grow 1.4s ease-in-out infinite, fab-pulse-ring 1.4s ease-out infinite; }
.fab-wrap.fab-pulse:hover .fab-new-contact, .fab-wrap.fab-pulse.open .fab-new-contact { animation: none; }
@media (prefers-reduced-motion: reduce) { .fab-wrap.fab-pulse .fab-new-contact { animation: fab-pulse-ring 2s ease-out infinite; } }
.conv-snz { font-size: 11px; color: var(--muted, #6b7280); font-weight: 500; }
.conv-snooze-select { font-size: 12px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border, #e5e7eb); background: #fff; }

/* Tickets toolbar — inbox · status (New / Requires action) · Filter · Scan,
   on one row. Type + assignee live in the small Filter panel. */
.tickets-toolbar, .tasks-toolbar { justify-content: flex-start; align-items: center; gap: 10px; }
.tasks-toolbar .toolbar-right { margin-left: auto; }
.tickets-toolbar .tickets-inbox-switch { margin: 0; }
.tickets-toolbar .toolbar-right { margin-left: auto; }
.tf-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.tf-seg .filter-btn { border: 0; border-radius: 0; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tf-seg .filter-btn + .filter-btn { border-left: 1px solid var(--border); }
.tf-seg .filter-btn:hover:not(.active) { background: #f3f4f6; color: var(--text); border-color: var(--border); }
.tf-n { font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 10px; background: #eef0f3; color: var(--text); min-width: 18px; text-align: center; }
.tf-n:empty { display: none; }
.tf-n.tf-n-zero { color: var(--muted); font-weight: 500; }
.tf-seg .filter-btn.active .tf-n { background: rgba(255,255,255,0.25); color: #fff; }
.tf-more { position: relative; }
.tf-more > summary { list-style: none; }
.tf-more > summary::-webkit-details-marker { display: none; }
.tf-more-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
               background: #fff; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.tf-more-btn:hover, .tf-more[open] .tf-more-btn { color: var(--text); border-color: #d1d5db; background: #f9fafb; }
.tf-more-chev { font-size: 10px; }
.tf-more-active:empty { display: none; }
.tf-more-active { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 10px; background: var(--primary); color: #fff; }
.tf-more-on .tf-more-btn { color: var(--text); border-color: var(--primary); }
.tf-more-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: #fff; border: 1px solid var(--border); border-radius: 10px;
                 box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 12px 14px; display: grid; gap: 10px; min-width: max-content; }
.tf-more-row { display: grid; gap: 5px; }
.tf-more-row .filter-group-label { display: block; margin: 0; }
@media (max-width: 768px) {
  .tickets-toolbar { flex-direction: row; flex-wrap: wrap; }
  .tf-more-panel { min-width: 0; width: calc(100vw - 40px); }
  .tf-more-panel .tf-seg { flex-wrap: wrap; }
}

/* ── Tasks board ─────────────────────────────────────────────────────────────
   Urgency columns (most overdue on the left), tasks grouped by kind inside each
   column, most overdue at the top of each group. */
.tb-board { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.tb-col { background: #f4f5f7; border-radius: 10px; padding: 8px; min-width: 250px; }
.tb-col-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.tb-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tb-col-count { margin-left: auto; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,0.07); }
.tb-col-critical .tb-col-head { color: #991b1b; } .tb-col-critical .tb-col-dot { background: #dc2626; } .tb-col-critical { background: #fdf2f2; }
.tb-col-overdue  .tb-col-head { color: #9a3412; } .tb-col-overdue  .tb-col-dot { background: #ea580c; } .tb-col-overdue  { background: #fdf6ee; }
.tb-col-recent   .tb-col-head { color: #854d0e; } .tb-col-recent   .tb-col-dot { background: #eab308; } .tb-col-recent   { background: #fbf9ec; }
.tb-col-today    .tb-col-head { color: #166534; } .tb-col-today    .tb-col-dot { background: #22c55e; } .tb-col-today    { background: #f1f8f3; }
.tb-col-body { display: flex; flex-direction: column; gap: 12px; }
.tb-col-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 14px 0; }
.tb-group { display: flex; flex-direction: column; gap: 6px; }
.tb-group-head { font-size: 11px; font-weight: 600; color: var(--muted); padding: 0 4px; display: flex; gap: 6px; }
.tb-group-head span { color: #9ca3af; }

.tb-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px 8px 13px;
           box-shadow: 0 1px 1px rgba(0,0,0,0.04); overflow: hidden; }
.tb-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #d1d5db; }
.tb-card.task-row-urgency-critical::before { background: #dc2626; }
.tb-card.task-row-urgency-overdue::before  { background: #ea580c; }
.tb-card.task-row-urgency-recent::before   { background: #eab308; }
.tb-card.task-row-urgency-today::before    { background: #22c55e; }
.tb-card-head { display: flex; align-items: flex-start; gap: 8px; }
.tb-card-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.tb-card-title a { color: var(--text); text-decoration: none; } .tb-card-title a:hover { text-decoration: underline; }
.tb-assignee { flex-shrink: 0; padding: 0 !important; background: none !important; }
.tb-card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tb-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; }
.tb-card-when { color: var(--muted); font-weight: 600; }
.task-row-urgency-critical .tb-card-when { color: #dc2626; }
.task-row-urgency-overdue  .tb-card-when { color: #ea580c; }
.task-row-urgency-recent   .tb-card-when { color: #a16207; }
.tb-card-notes { margin-top: 6px; width: 100%; font-size: 12px; }
.tb-card-actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.tb-card-actions .task-dismiss-btn { margin-left: auto; order: 9; }
.tb-note-btn { color: var(--muted); }
.tb-card-link { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.tb-card-link:hover { border-color: #93c5fd; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.tb-flat { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }

.tb-snooze-menu { position: fixed; z-index: 1000; background: #fff; border: 1px solid var(--border); border-radius: 10px;
                  box-shadow: 0 12px 30px rgba(0,0,0,0.15); padding: 6px; min-width: 190px; display: flex; flex-direction: column; }
.tb-snooze-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 4px 8px 6px; }
.tb-snooze-menu > button { background: none; border: 0; text-align: left; padding: 7px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text); }
.tb-snooze-menu > button:hover { background: #f3f4f6; }
.tb-snooze-date { display: flex; gap: 6px; padding: 6px 8px 4px; border-top: 1px solid var(--border); margin-top: 4px; }
.tb-snooze-date input { flex: 1; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px; }
@media (max-width: 1100px) { .tb-board { grid-template-columns: repeat(4, 260px); } }
/* Phones: just New / Requires action across the top; card actions live in the ticket. */
@media (max-width: 768px) {
  .tickets-toolbar .tickets-inbox-switch, #tickets-filters, .tickets-toolbar .toolbar-right { display: none; }
  .tickets-toolbar { gap: 0; }
  #tickets-status-filter { display: flex; width: 100%; }
  #tickets-status-filter .filter-btn { flex: 1; justify-content: center; padding: 10px 12px; }
  .ticket-card .ticket-card-hover-actions,
  .ticket-card:hover .ticket-card-hover-actions { display: none; }
}
/* Type-driven ticket buttons: beside Reply on desktop, in Actions on phones. */
.ticket-act-phone { display: none; }
.ticket-notes-toggle.has-notes::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-left: 6px; align-self: center; }
.ticket-notes-toggle.active { background: #fffbeb; border-color: #f59e0b; }
.ticket-actions-panel .ticket-act-mobile { display: none; }
.ticket-actions-panel button:not(:disabled) small { display: none; }
/* Ticket window on phones: Reply + Actions only, no stage track, nothing wider than the screen. */
@media (max-width: 768px) {
  .ticket-act-desk { display: none; }
  .ticket-actions-panel .ticket-act-mobile { display: flex; }
  .ticket-actions-panel hr.ticket-act-mobile { display: block; }
  .ticket-pipeline-inline, .ticket-summary-inline .ticket-close-btn { display: none; }
  .ticket-act-phone { display: inline-flex; }
  /* Notes fold away; when opened they sit right under the buttons. */
  .ticket-detail { display: flex; flex-direction: column; }
  .ticket-detail > .ticket-detail-header { order: -2; }
  .ticket-detail > .ticket-notes-row { order: -1; display: none; margin-top: 0; }
  .ticket-detail.notes-open > .ticket-notes-row { display: block; }
  .ticket-actions-row { justify-content: flex-start; }
  /* Actions menu drops down across the full width of the button row. */
  .ticket-actions-row { position: relative; }
  .ticket-actions-row .ticket-actions-menu { position: static; }
  .ticket-actions-menu .ticket-actions-panel { left: 0; right: 0; width: auto; min-width: 0; }
  .ticket-actions-panel button small { white-space: normal; }
  .ticket-controls .ticket-toggle-group { align-items: flex-start; }
  /* Messages grow to full height so the window is the only thing that scrolls. */
  .ticket-msg-iframe { max-height: none; }
}
.tasks-body { margin-top: 12px; }
/* Phones: no toolbar, one full-width column at a time, swipe across. */
@media (max-width: 768px) {
  .tasks-toolbar { display: none; }
  .tasks-body { margin-top: 0; }
  .tb-board { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .tb-col { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
}

/* Ticket "Actions ▾" menu (invites; room for more) */
.ticket-actions-menu { display: inline-block; }
.ticket-actions-menu > summary { list-style: none; }
.ticket-actions-menu > summary::-webkit-details-marker { display: none; }
.ticket-actions-panel { right: 0; left: auto; padding: 6px; gap: 2px; min-width: 240px; }
.ticket-actions-panel button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: 0; text-align: left;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text); }
.ticket-actions-panel button:hover:not(:disabled) { background: #f3f4f6; }
.ticket-actions-panel button:disabled { cursor: default; color: var(--muted); }
.ticket-actions-panel button small { font-size: 11px; color: var(--muted); }
.ticket-actions-panel hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }