/* Alpha Phone Center — Round 2 fix pass (Fix #3/#4)
   BLACK/dark theme like the real site: near-black page, charcoal cards,
   light text, dark inputs. Layout/structure unchanged from Round 2. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Round 2.10 Part A: never let iOS inflate text on its own — combined
   with the 16px form controls below, the page holds its designed
   scale on iPhone instead of loading zoomed in. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #060607;
  color: #f3f4f6;
  -webkit-font-smoothing: antialiased;
}
a { color: #60a5fa; text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }

/* ---------- Brand logo (real asset, black bg baked in) ---------- */
.brand-logo { height: 44px; width: auto; display: block; border-radius: 6px; flex-shrink: 0; }
.brand-logo-landing { height: 76px; }
.brand-logo-door { height: 64px; margin: 0 auto 10px; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 20px;
  background: #0b0b0c; border-bottom: 1px solid #26262b;
}
.brand { font-size: 19px; font-weight: 700; color: #f9fafb; }
.brand-sub { font-size: 12px; color: #9ca3af; }
.topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }

.page { max-width: 1120px; margin: 0 auto; padding: 18px 16px 48px; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none; border: 1px solid #3f3f46; background: #1c1c21; color: #f3f4f6;
  font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer;
}
.btn:hover { background: #26262c; }
.btn-primary { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-danger { color: #fca5a5; border-color: #7f1d1d; }
.btn-danger:hover { background: #2a1114; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: transparent; }

/* ---------- Cards ---------- */
.card {
  background: #141417; border: 1px solid #26262b; border-radius: 12px;
  padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.card-title { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: #f9fafb; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.field span { font-weight: 600; color: #d1d5db; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid #3f3f46; border-radius: 8px; background: #0d0d10; color: #f9fafb;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid rgba(59,130,246,.55); border-color: #3b82f6;
}
.profile-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.profile-form .grow { flex: 1 1 160px; }
.appt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.appt-form .span2 { grid-column: span 2; }
.form-actions { display: flex; gap: 8px; }

/* ---------- Profiles ---------- */
.profile-list { display: flex; flex-direction: column; gap: 6px; }
.profile-row {
.profile-edit { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; padding: 8px 0 6px 44px; }
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border: 1px solid #26262b; border-radius: 10px; background: #101013;
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: #2563eb; color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.avatar.agent { background: #0e7490; }
.profile-name { font-weight: 600; font-size: 14px; }
.profile-role { font-size: 12px; color: #9ca3af; }
.profile-email { font-size: 12px; color: #9ca3af; }
.profile-row .spacer { flex: 1; }
.icon-btn {
  appearance: none; border: 1px solid #2e2e35; background: #1c1c21; border-radius: 8px;
  padding: 6px 9px; cursor: pointer; font-size: 14px; color: #d1d5db;
}
.icon-btn:hover { background: #2a1114; color: #fca5a5; border-color: #7f1d1d; }

/* ---------- Metrics (Fix #4: per-metric colors, tiles + tables) ---------- */
.metrics-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.metrics-head h2 { margin: 0; font-size: 16px; }
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-label { font-size: 13px; font-weight: 600; color: #d1d5db; min-width: 168px; text-align: center; }
.totals-row {
  /* Round 2.1: 13 tiles (Appts Set + all 12 statuses) wrap responsively. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; margin-bottom: 18px;
}
.stat { background: #1a1a1f; border: 1px solid #2a2a31; border-top: 3px solid #2a2a31; border-radius: 10px; padding: 10px 12px; }
.stat .num { font-size: 24px; font-weight: 800; line-height: 1.1; color: #f9fafb; }
.stat .lbl { font-size: 12px; color: #9ca3af; font-weight: 600; }
.stat-set  { border-top-color: #3b82f6; } .stat-set .num  { color: #60a5fa; }
.stat-schedout { border-top-color: #06b6d4; } .stat-schedout .num { color: #22d3ee; }
.stat-sold { border-top-color: #22c55e; } .stat-sold .num { color: #4ade80; }
.stat-curr { border-top-color: #a855f7; } .stat-curr .num { color: #c084fc; }
.stat-acc { border-top-color: #6366f1; } .stat-acc .num { color: #a5b4fc; }
.stat-nint { border-top-color: #f97316; } .stat-nint .num { color: #fb923c; }
.stat-pend { border-top-color: #eab308; } .stat-pend .num { color: #facc15; }
.stat-noshow { border-top-color: #6b7280; } .stat-noshow .num { color: #9ca3af; }
.stat-invalid { border-top-color: #dc2626; } .stat-invalid .num { color: #f87171; }
.stat-contract { border-top-color: #cc5500; } .stat-contract .num { color: #ff7a1a; }
.stat-credit { border-top-color: #d946ef; } .stat-credit .num { color: #f0abfc; }
.stat-resched { border-top-color: #60a5fa; } .stat-resched .num { color: #60a5fa; }
.stat-cancel { border-top-color: #7f1d1d; } .stat-cancel .num { color: #ef4444; }
.stat-callback { border-top-color: #14b8a6; } .stat-callback .num { color: #5eead4; }
/* Round 2.3 (David: "Move under Phoner"): the two leaderboard tables STACK
   vertically at full card width — side-by-side they overflowed the card at
   tablet widths (and forced page-level overflow at every width). */
.metrics-tables { display: grid; grid-template-columns: 1fr; gap: 18px; }
.metrics-tables > div { min-width: 0; }
.table-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #d1d5db; margin: 0 0 8px; }
.table-scroll { overflow-x: auto; }
table.metrics { border-collapse: collapse; width: 100%; min-width: 430px; font-size: 13px; }
table.metrics.mvp-table { min-width: 0; }
table.metrics th, table.metrics td { padding: 7px 9px; text-align: right; border-bottom: 1px solid #26262b; white-space: nowrap; color: #e5e7eb; }
table.metrics th { color: #9ca3af; font-weight: 700; font-size: 12px; }
table.metrics th:first-child, table.metrics td:first-child { text-align: left; }
table.metrics td:first-child { font-weight: 600; }
table.metrics td.m-set, table.metrics th.m-set { color: #60a5fa; font-weight: 700; }
table.metrics td.m-schedout, table.metrics th.m-schedout { color: #22d3ee; font-weight: 700; }
/* R3.51: admin "APPTS SCHEDULED OUT" section list */
.sched-out-list { display: flex; flex-direction: column; gap: 6px; }
.sched-out-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: #1a1a1f; border: 1px solid #2a2a31; border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.sched-out-row .so-customer { font-weight: 700; color: #f3f4f6; }
.sched-out-row .so-when { color: #9ca3af; }
.sched-out-row .so-setter { color: #9ca3af; }
table.metrics td.m-sold, table.metrics th.m-sold { color: #4ade80; font-weight: 700; }
table.metrics td.m-curr, table.metrics th.m-curr { color: #c084fc; font-weight: 700; }
table.metrics td.m-acc, table.metrics th.m-acc { color: #818cf8; font-weight: 700; }
table.metrics td.m-pend, table.metrics th.m-pend { color: #facc15; font-weight: 700; }
table.metrics td.m-nint, table.metrics th.m-nint { color: #fb923c; font-weight: 700; }
table.metrics td.m-noshow, table.metrics th.m-noshow { color: #9ca3af; font-weight: 700; }
table.metrics td.m-invalid, table.metrics th.m-invalid { color: #f87171; font-weight: 700; }
table.metrics td.m-contract, table.metrics th.m-contract { color: #ff7a1a; font-weight: 700; }
table.metrics td.m-credit, table.metrics th.m-credit { color: #f0abfc; font-weight: 700; }
table.metrics td.m-resched, table.metrics th.m-resched { color: #60a5fa; font-weight: 700; }
table.metrics td.m-cancel, table.metrics th.m-cancel { color: #ef4444; font-weight: 700; }
table.metrics td.m-callback, table.metrics th.m-callback { color: #5eead4; font-weight: 700; }
table.metrics td.m-asgn, table.metrics th.m-asgn { color: #e5e7eb; font-weight: 700; }
table.metrics td.close-high { color: #4ade80; font-weight: 800; }
table.metrics td.close-mid { color: #facc15; font-weight: 800; }
table.metrics td.close-low { color: #f87171; font-weight: 800; }
table.metrics td.close-na { color: #9ca3af; font-weight: 600; }
.empty-note { font-size: 13px; color: #9ca3af; padding: 8px 0; }

/* ---------- View toggle ---------- */
.view-toggle {
  display: inline-flex; max-width: 100%; background: #1f1f24; border: 1px solid #2a2a31; border-radius: 10px; padding: 3px; margin-bottom: 16px;
}
.toggle-btn {
  appearance: none; border: 0; background: transparent; padding: 7px 18px;
  font-size: 14px; font-weight: 600; color: #d1d5db; border-radius: 8px; cursor: pointer;
  min-width: 0;
}
.toggle-btn.active { background: #f3f4f6; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ---------- Pills ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pills-inline { margin-bottom: 0; }
.pill {
  appearance: none; border: 1px solid #3f3f46; background: #1c1c21; color: #e5e7eb;
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.pill:hover { border-color: #6b7280; }
.pill.active { background: #f3f4f6; border-color: #f3f4f6; color: #111827; }
.pill .count {
  background: #312e81; color: #c7d2fe; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 1px 7px;
}
.pill.active .count { background: #111827; color: #ffffff; }

/* ---------- Appointment cards ---------- */
.appt-list { display: flex; flex-direction: column; gap: 12px; }
.appt-card { background: #141417; border: 1px solid #26262b; border-radius: 12px; padding: 16px 18px; }
/* Round 2.10 Part A: flex-wrap — on narrow phones the long nowrap
   status badge ("Not Interested After Presentation", 199px) drops
   under the customer name instead of forcing the card (and page)
   wider than the screen; it forced a 324px layout at 320px before. */
.appt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; row-gap: 4px; }
.appt-customer { margin: 0; font-size: 17px; font-weight: 700; color: #f9fafb; }
.appt-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.appt-meta { margin-top: 8px; font-size: 14px; color: #d1d5db; display: flex; flex-direction: column; gap: 4px; }
.appt-meta .row { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.source-label {
  display: inline-block; font-size: 11px; font-weight: 700; color: #d1d5db;
  background: #26262c; border-radius: 6px; padding: 2px 7px; letter-spacing: .02em;
}
.appt-notes { font-style: italic; color: #9ca3af; }
.appt-created { font-size: 12px; color: #9ca3af; margin-top: 8px; }

/* ---------- Status badges (Fix #4c color system, dark-tinted) ---------- */
.badge {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.badge-pending        { background: #3a2f05; color: #facc15; border-color: #a16207; }
.badge-accepted       { background: #1e1b4b; color: #a5b4fc; border-color: #4338ca; }
.badge-current        { background: #2e1065; color: #c4b5fd; border-color: #6d28d9; }
.badge-sold           { background: #052e16; color: #86efac; border-color: #15803d; }
.badge-nia            { background: #431407; color: #fdba74; border-color: #ea580c; }
.badge-invalid        { background: #450a0a; color: #fca5a5; border-color: #dc2626; }
.badge-contract       { background: #301603; color: #ff7a1a; border-color: #cc5500; }
.badge-credit         { background: #3b0764; color: #f0abfc; border-color: #c026d3; }
.badge-noshow         { background: #27272a; color: #d4d4d8; border-color: #52525b; }
.badge-reschedule     { background: #172554; color: #60a5fa; border-color: #2563eb; }
.badge-cancel         { background: #2a0a0a; color: #f87171; border-color: #991b1b; }
.badge-callback       { background: #042f2e; color: #5eead4; border-color: #0f766e; }
.override-panel {
  margin-top: 12px; border-top: 1px dashed #3f3f46; padding-top: 12px;
}
.override-label { font-size: 12px; font-weight: 800; color: #9ca3af; letter-spacing: .05em; margin-bottom: 8px; }
.override-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.override-btns .btn { font-size: 12.5px; padding: 6px 10px; }

/* ---------- Round 2.11: mandatory Outcome Notes step ---------- */
.outcome-panel {
  margin-top: 12px; border: 1px solid #3f3f46; border-radius: 10px;
  background: #101013; padding: 12px;
}
.outcome-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #f9fafb; margin-bottom: 8px;
}
.outcome-head .outcome-status { font-weight: 800; }
.outcome-head .outcome-x { margin-left: auto; }
.outcome-note-input {
  width: 100%; background: #1f1f24; border: 1px solid #2a2a31; border-radius: 8px;
  color: #f3f4f6; padding: 8px 10px; font-family: inherit; resize: vertical;
}
.outcome-note-input:focus { border-color: #2563eb; outline: none; }
.outcome-help { color: #f87171; font-size: 12px; margin-top: 6px; }
.outcome-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.outcome-confirm[disabled] { opacity: .45; cursor: not-allowed; }
.outcome-meta { color: #9ca3af; font-size: 12px; }

/* ---------- Status buttons (Fix #4c, admin override + board popup + agent picker) ---------- */
.status-btn-wide { flex: 1 1 100%; width: 100%; }
.status-btn-accepted { background: #1e1b4b; border-color: #6366f1; color: #c7d2fe; }
.status-btn-accepted:hover { background: #312e81; }
.status-btn-current-customer { background: #2e1065; border-color: #8b5cf6; color: #ddd6fe; }
.status-btn-current-customer:hover { background: #4c1d95; }
.status-btn-sold { background: #052e16; border-color: #22c55e; color: #bbf7d0; }
.status-btn-sold:hover { background: #14532d; }
.status-btn-not-interested-after-presentation { background: #431407; border-color: #f97316; color: #ffedd5; }
.status-btn-not-interested-after-presentation:hover { background: #7c2d12; }
.status-btn-invalid-appointment { background: #450a0a; border-color: #ef4444; color: #fee2e2; }
.status-btn-invalid-appointment:hover { background: #7f1d1d; }
.status-btn-customer-in-contract { background: #301603; border-color: #cc5500; color: #ffb37a; }
.status-btn-customer-in-contract:hover { background: #4d2403; }
.status-btn-failed-credit { background: #3b0764; border-color: #d946ef; color: #fae8ff; }
.status-btn-failed-credit:hover { background: #581c87; }
.status-btn-no-show { background: #27272a; border-color: #71717a; color: #e4e4e7; }
.status-btn-no-show:hover { background: #3f3f46; }
.status-btn-reschedule { background: #172554; border-color: #2563eb; color: #dbeafe; }
.status-btn-reschedule:hover { background: #1e3a8a; }
.status-btn-cancel { background: #2a0a0a; border-color: #dc2626; color: #fecaca; }
.status-btn-cancel:hover { background: #450a0a; }
.status-btn-callback { background: #042f2e; border-color: #14b8a6; color: #ccfbf1; }
.status-btn-callback:hover { background: #134e4a; }
/* Round 3.3: renamed-status button slugs (colors mirror the old names). */
.status-btn-customer-no-show { background: #27272a; border-color: #71717a; color: #e4e4e7; }
.status-btn-customer-no-show:hover { background: #3f3f46; }
.status-btn-called-and-canceled { background: #2a0a0a; border-color: #dc2626; color: #fecaca; }
.status-btn-called-and-canceled:hover { background: #450a0a; }
.status-btn-bad-time-r-s-with-customer { background: #042f2e; border-color: #14b8a6; color: #ccfbf1; }
.status-btn-bad-time-r-s-with-customer:hover { background: #134e4a; }
.status-btn-pending { background: #3a2f05; border-color: #eab308; color: #fef9c3; }
.status-btn-pending:hover { background: #422006; }

/* ---------- Activity Board ---------- */
.board-filters { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.board-filters-label { font-size: 13px; font-weight: 700; color: #d1d5db; padding-top: 7px; }
.board-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.board-nav-right { display: flex; align-items: center; gap: 8px; }
.board-month { font-size: 16px; font-weight: 700; color: #f9fafb; }
.board-weekdays {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; color: #9ca3af; text-align: center;
}
/* Round 2.10 Part A: minmax(0, 1fr) — columns may shrink below their
   contents' min-content size (chips truncate inside their cells), so
   the 7-day grid can never push wider than the screen. */
.board-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day-cell {
  min-height: 104px; border: 1px solid #26262b; border-radius: 10px; padding: 6px;
  background: #141417; color: #e5e7eb; cursor: pointer; overflow: hidden;
}
.day-cell:hover { border-color: #3b82f6; }
.day-cell.dim { background: #0c0c0e; color: #6b7280; }
.day-cell.today { border-color: #2563eb; box-shadow: inset 0 0 0 1px #2563eb; }
.day-cell.selected { border-color: #f3f4f6; box-shadow: inset 0 0 0 1px #f3f4f6; }
.day-num { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.avail-tag {
  display: block; font-size: 10.5px; font-weight: 600; color: #d1d5db;
  background: #26262c; border-radius: 5px; padding: 1px 5px; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.entry {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; color: #e5e7eb;
}
.entry .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.entry-btn, .more-btn {
  appearance: none; background: none; border: none; padding: 0; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
}
.entry-btn:hover, .more-btn:hover { text-decoration: underline; }
.more-note { font-size: 11px; color: #9ca3af; font-weight: 600; }
.board-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 12px; color: #d1d5db; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .dot { width: 10px; height: 10px; border-radius: 50%; }
.rep-chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .3px; line-height: 1; flex-shrink: 0; }
.legend-item .rep-chip { width: 20px; height: 20px; font-size: 8.5px; }
.board-row-head .rep-chip { margin-top: 3px; }
.appt-row-head .rep-chip { margin-top: 3px; }
.cb-main .rep-chip { width: 20px; height: 20px; font-size: 8.5px; }
/* Round 2.9: agent calendar replicates the old site — a hint line with
   the one Block Time Off button pinned to its right end, a BLUE month
   bar with chevron buttons, blocked days as a hatched CELL treatment,
   and a matching hatched swatch in the legend. */
.agent-cal-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13.5px; color: #d1d5db; }
.agent-cal-hint .btn { margin-left: auto; flex-shrink: 0; }
.board-nav-blue { background: #2563eb; border-radius: 10px; padding: 7px 8px; margin-bottom: 12px; }
.board-nav-blue .board-month { color: #ffffff; }
.cal-chev {
  appearance: none; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4);
  color: #ffffff; font-size: 20px; font-weight: 800; line-height: 1;
  width: 38px; height: 32px; border-radius: 8px; cursor: pointer;
}
.cal-chev:hover { background: rgba(255,255,255,.3); }
.day-cell.blocked { background: repeating-linear-gradient(45deg, #101013, #101013 8px, #1c1c22 8px, #1c1c22 16px); }
.legend-swatch { width: 14px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.blocked-swatch { background: repeating-linear-gradient(45deg, #26262c, #26262c 4px, #4b4b55 4px, #4b4b55 8px); border: 1px solid #4b4b55; }

/* ---------- Admin board day panel (Round 2.2: INLINE, in page flow —
   the old site's under-calendar setup; the board has no popup/modal) ---------- */
.board-day-panel { margin-top: 14px; border-top: 1px solid #26262b; padding-top: 12px; }
.board-day-panel .day-detail-head { align-items: center; margin-bottom: 4px; }
.board-day-panel .day-detail-head h3 { font-size: 16px; color: #f9fafb; }
.day-appt-count { margin-left: auto; font-size: 13px; font-weight: 600; color: #9ca3af; }
.board-row { border-top: 1px solid #26262b; }
.board-row-head {
  appearance: none; background: none; border: none; width: 100%;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 4px; cursor: pointer; font: inherit; color: #e5e7eb; text-align: left;
}
.board-row-head:hover { background: #1a1a1f; }
.board-row-head .agent-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.board-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.board-row-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.board-row-top .name { font-weight: 700; font-size: 15px; color: #f9fafb; }
.status-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #d1d5db; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.board-row-sub { font-size: 13px; color: #9ca3af; }
.board-row-head .chev { color: #9ca3af; font-size: 13px; flex-shrink: 0; margin-top: 4px; }
.board-row-detail { padding: 2px 4px 12px 24px; font-size: 14px; color: #d1d5db; }
.detail-field { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 3px 0; }
.detail-label { font-weight: 600; color: #9ca3af; font-size: 13px; }
.detail-value { color: #f3f4f6; }
.board-row-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.board-row-status .detail-label { font-weight: 700; }
/* Round 2.4: tappable Preferred Time (link-blue like the phone/address
   values) + the in-place day/time editor, dark-themed to match the
   phoner Schedule form's time selects. */
.time-link { appearance: none; background: none; border: none; padding: 0; font: inherit; color: #60a5fa; cursor: pointer; text-align: left; }
.time-link:hover { text-decoration: underline; }
.time-edit-hint { color: #9ca3af; font-size: 12px; }
.time-edit { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.time-edit .dt-date { font: inherit; padding: 8px 10px; border: 1px solid #3f3f46; border-radius: 8px; background: #0d0d10; color: #f9fafb; color-scheme: dark; }
.time-edit-actions { display: inline-flex; gap: 8px; }
.agent-edit select { font: inherit; padding: 8px 10px; border: 1px solid #3f3f46; border-radius: 8px; background: #0d0d10; color: #f9fafb; color-scheme: dark; }

/* ---------- Appointments tab (Round 2.5: current-week default +
   collapsible rows in the board day-panel style) ---------- */
.appts-week-nav { margin-bottom: 12px; flex-wrap: wrap; }
.appt-row {
  background: #141417; border: 1px solid #26262b; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.appt-row-head {
  appearance: none; background: none; border: none; width: 100%;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; cursor: pointer; font: inherit; color: #e5e7eb; text-align: left;
}
.appt-row-head:hover { background: #1a1a1f; }
.appt-row-head .agent-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.appt-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.appt-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appt-row-top .name { font-weight: 700; font-size: 15px; color: #f9fafb; }
.appt-row-sub { font-size: 13px; color: #9ca3af; }
.appt-row-head .chev { color: #9ca3af; font-size: 13px; flex-shrink: 0; margin-top: 4px; }
.appt-row-detail { border-top: 1px solid #26262b; padding: 12px 14px 14px; }

/* ---------- Day detail (phoner inline + agent card) ---------- */
.day-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.day-detail-head h3 { margin: 0; font-size: 15px; }
.day-breakdown { font-size: 13px; color: #9ca3af; margin-bottom: 10px; }
.detail-row { border-top: 1px solid #26262b; padding: 10px 4px; cursor: pointer; }
.detail-row:hover { background: #1a1a1f; }
.detail-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.detail-main .name { font-weight: 700; }
.detail-main .when, .detail-main .phone { color: #9ca3af; font-size: 13px; }
.detail-expanded { margin-top: 8px; font-size: 13.5px; color: #d1d5db; }
.detail-expanded .btn { margin-left: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .appt-form { grid-template-columns: 1fr; }
  .appt-form .span2 { grid-column: span 1; }
  .day-cell { min-height: 74px; padding: 4px; }
  .entry { font-size: 10px; }
  .week-label { min-width: 0; }
  .page { padding: 12px 10px 40px; }
  .brand-logo-landing { height: 56px; }
  .brand-logo { height: 38px; }
  /* Round 2.1 Fix #2: header stacks on phone width — the title row keeps
     its own line and the action buttons wrap onto the next line, so the
     brand text can never collide with Profiles / + Add / Sign Out. */
  .topbar { padding: 10px 12px; flex-wrap: wrap; }
  .topbar-left { flex: 1 1 100%; }
  .brand { font-size: 17px; }
  .topbar-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; margin-top: 10px; }
  .topbar-actions .btn { flex: 0 1 auto; }
  .board-row-detail { padding-left: 4px; }
}

/* ---------- Round 2: Landing / PIN doors / portals (dark) ---------- */
.landing-title{font-size:28px;margin:24px 0 6px;color:#f9fafb}
.landing-sub{color:#9ca3af;margin:0 0 20px}
.portal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.portal-card{appearance:none;text-align:left;background:#141417;border:1px solid #26262b;border-radius:14px;padding:22px;cursor:pointer;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 2px rgba(0,0,0,.5);color:#f3f4f6}
.portal-card:hover{border-color:#2563eb;box-shadow:0 4px 14px rgba(37,99,235,.25)}
.portal-card-title{font-size:19px;font-weight:800}
.portal-card-desc{font-size:14px;color:#9ca3af}
.pin-page{max-width:520px}
.pin-card{margin-top:20px;text-align:center}
.pin-type-form{max-width:236px;margin:14px auto 4px;text-align:left}
.pin-card h2{margin-top:0}
.pin-hint{color:#9ca3af}
.pin-dots{display:flex;gap:12px;justify-content:center;margin:18px 0}
.pin-dots span{width:16px;height:16px;border-radius:50%;border:2px solid #6b7280;background:transparent;display:inline-block}
.pin-dots span.filled{background:#f3f4f6;border-color:#f3f4f6}
.pin-error{color:#fca5a5;background:#2a1114;border:1px solid #7f1d1d;border-radius:8px;padding:8px 10px;margin:10px 0;font-size:13.5px}
.link-btn{appearance:none;background:none;border:none;color:#60a5fa;font-weight:600;cursor:pointer;font-size:14px;padding:4px}
.link-btn:hover{text-decoration:underline}
.create-panel{margin-top:16px;text-align:left;border-top:1px dashed #3f3f46;padding-top:14px;display:flex;flex-direction:column;gap:10px}
.schedule-layout{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.schedule-layout form{display:flex;flex-direction:column;gap:12px}
.time-selects{display:flex;gap:8px}
.time-selects select{font:inherit;padding:8px 10px;border:1px solid #3f3f46;border-radius:8px;background:#0d0d10;color:#f9fafb}
.plain-list{margin:0;padding-left:18px;line-height:1.9;font-size:14px}
.tips-list{margin:0;padding-left:18px;line-height:1.6;font-size:14px;color:#d1d5db}
.tips-list li{margin-bottom:8px}
.blocked-warning{color:#fcd34d;background:#2f1d02;border:1px solid #92400e;border-radius:8px;padding:9px 12px;font-weight:700;font-size:14px}
.success-msg{color:#86efac;background:#052e16;border:1px solid #166534;border-radius:8px;padding:9px 12px;font-weight:600;font-size:14px}
.my-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-weight:600}
.my-meta .spacer{flex:1}
.last-updated{font-size:12.5px;color:#9ca3af;font-weight:400}
.stats-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.edit-panel{margin-top:14px;border-top:1px dashed #3f3f46;padding-top:12px;display:flex;flex-direction:column;gap:10px}
.edit-summary{font-size:13px;color:#9ca3af}
.avail-tag.blocked-entry.hatched,.blocked-entry.hatched{background:repeating-linear-gradient(45deg,#1f1f24,#1f1f24 6px,#2e2e35 6px,#2e2e35 12px);border:1px solid #3f3f46;color:#d1d5db}
.day-detail-inline{margin-top:14px;border-top:1px solid #26262b;padding-top:12px}
.block-panel{margin-top:16px;background:#101013}
.block-q{font-weight:700;margin:14px 0 8px}
.block-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.block-card{border:1px solid #2a2a31;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;background:#141417}
.block-card-title{font-weight:700}
.time-row{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.time-row select{padding:6px;border:1px solid #3f3f46;border-radius:7px;background:#0d0d10;color:#f9fafb}
.block-summary{font-size:13.5px;color:#d1d5db;background:#1f1f24;border-radius:8px;padding:8px 10px}
/* Round 2.8: the agent day view's block banner — hatched like the
   boards' blocked tags, with the Unblock control on the right. */
.agent-block-line{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:#f3f4f6;background:repeating-linear-gradient(45deg,#1f1f24,#1f1f24 6px,#2e2e35 6px,#2e2e35 12px);border:1px solid #3f3f46;border-radius:8px;padding:8px 10px;margin-bottom:10px}
.agent-block-line .btn{margin-left:auto}
.perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.perf-card{border:1px solid #2a2a31;border-radius:12px;padding:16px;background:#101013}
.perf-card h3{margin:0 0 4px}
.perf-range{font-size:12.5px;color:#9ca3af;margin-bottom:10px}
.perf-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #26262b;font-size:14px}
.subtabs{display:flex;gap:8px;flex-wrap:wrap}
.agent-subtab.active{background:#f3f4f6;color:#111827;border-color:#f3f4f6}
.btn-cancel-status{background:#7f1d1d;border-color:#dc2626;color:#fee2e2}
.btn-cancel-status:hover{background:#991b1b}
.agent-status-grid .btn{font-size:12.5px}
@media (max-width:860px){.portal-cards{grid-template-columns:1fr}.schedule-layout{grid-template-columns:1fr}.stats-tiles{grid-template-columns:repeat(2,1fr)}.perf-grid{grid-template-columns:1fr}.block-options{grid-template-columns:1fr}}
/* Round 2.10 Part A — THE zoom fix (owner, from his iPhone: "First
   pic when you first log in and I have to zoom out"). iOS Safari /
   WKWebView automatically zooms in when a form control with a
   font-size under 16px receives focus, and because this app is a
   single page (sign-in swaps views, no reload) the zoom persisted
   into the portals: at the 14px PIN field's 16/14 = 1.143x zoom the
   tab bar ran off the right edge, the Block Time Off button clipped
   and the calendar's Sunday column went off-screen — his screenshot
   measures ~1.14x against his fitted one. At 16px or larger iOS does
   not focus-zoom at all, so every control is 16px at phone widths.
   Desktop rendering is untouched. This is NOT a maximum-scale /
   user-scalable lock — pinch zoom still works; the page simply
   loads at its true fit. */
@media (max-width:860px){
  /* The .field-qualified selectors repeat the base rules' specificity
     so this later block actually wins over their 14px. */
  .field input, .field select, .field textarea,
  .time-selects select, .time-row select, .time-edit .dt-date,
  input, select, textarea { font-size: 16px; }
}

/* ---------- Round 2.13: in-site Chat (mirrors the approved mock) ---------- */
.chat-tab-badge{display:inline-block;background:#F01D23;color:#fff;font-size:11px;font-weight:700;border-radius:10px;padding:1px 7px;margin-left:6px;vertical-align:2px}
.chat-root{max-width:560px;margin:0 auto}
.chat-panel{background:#0A0F1A;border:1px solid #1B2740;border-radius:18px;overflow:hidden;color:#E8EDF5}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #1B2740}
.chat-logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#2E7CF6,#174A9E);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;color:#fff;flex:none}
.chat-head h2{font-size:19px;font-weight:700;margin:0;color:#E8EDF5}
.chat-bell{margin-left:auto;font-size:17px;position:relative}
.chat-bell b{position:absolute;top:-6px;right:-8px;background:#F01D23;color:#fff;font-size:10px;border-radius:9px;padding:1px 5px}
.chat-sect{display:flex;align-items:center;padding:14px 16px 4px;font-size:11px;letter-spacing:1.2px;color:#7C879C;font-weight:700}
.chat-new-group{margin-left:auto;background:none;border:none;color:#2E7CF6;font-size:12.5px;font-weight:700;letter-spacing:0;cursor:pointer;padding:2px 0}
.chat-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 16px;background:none;border:none;color:#E8EDF5;font-size:15.5px;text-align:left;cursor:pointer}
.chat-row:hover{background:#101A2E}
.chat-hash{color:#5B6B8C;font-weight:700;flex:none}
.chat-row-name{font-weight:500}
.chat-badge{margin-left:auto;background:#F01D23;color:#fff;font-size:11px;font-weight:700;border-radius:10px;padding:1px 7px;flex:none}
.chat-prev{margin-left:auto;color:#7C879C;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.chat-prev + .chat-badge{margin-left:8px}
.chat-invited{color:#FFC107;font-size:12px}
.chat-ava{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex:none}
.chat-ava.sm{width:30px;height:30px;font-size:12px}
.chat-empty{padding:8px 16px 12px;color:#68758E;font-size:13.5px}
.chat-note{margin:12px 16px 16px;background:#0E2A1A;border:1px solid #1E5C3A;color:#9FE8BC;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.45}
.chat-access{padding-bottom:6px}
.chat-access-row{display:flex;align-items:center;gap:10px;padding:7px 16px;font-size:14.5px}
.chat-access-note{margin-left:auto;color:#7C879C;font-size:12px}
.chat-access-note.on{color:#3BA55D;font-weight:700}
.chat-access-row .btn{margin-left:auto}
.chat-access-row .chat-access-note + .btn{margin-left:8px}
.chat-access-row .chat-access-note.on ~ .btn{margin-left:8px}
.chat-group-form{padding:8px 16px 12px}
.chat-group-name{width:100%;background:#111A2C;border:1px solid #22304D;border-radius:10px;color:#E8EDF5;font-size:16px;padding:9px 12px;margin-bottom:8px}
.chat-group-members{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px}
.chat-group-member{font-size:14px;color:#D9E1EE;display:flex;align-items:center;gap:6px}
.chat-chan-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #1B2740}
.chat-back{background:none;border:none;color:#A9B6CC;font-size:26px;line-height:1;cursor:pointer;padding:0 4px 0 0}
.chat-chan-title{font-size:16.5px;font-weight:700}
.chat-chan-sub{margin-left:auto;color:#68758E;font-size:12px}
.chat-msgs{padding:8px 0 4px;max-height:52vh;overflow-y:auto}
.chat-system{text-align:center;color:#68758E;font-size:12.5px;line-height:1.5;padding:10px 24px}
.chat-msg{display:flex;gap:10px;padding:8px 16px 2px}
.chat-msg.announce{background:rgba(240,29,35,.06)}
.chat-msg-main{min-width:0;flex:1}
.chat-who{font-size:14.5px;font-weight:700}
.chat-role{font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;margin-left:5px;vertical-align:2px;color:#fff}
.chat-role.admin{background:#F01D23}
.chat-role.phoner{background:#2E7CF6}
.chat-role.agent{background:#4A5568}
.chat-time{color:#68758E;font-size:11.5px;font-weight:400;margin-left:6px}
.chat-text{font-size:14.5px;line-height:1.45;color:#D9E1EE;margin-top:1px;word-wrap:break-word}
.chat-mention{background:#2E4A7A;color:#BCD6FF;border-radius:5px;padding:0 5px;font-weight:600}
.chat-gif-img{width:250px;max-width:100%;border-radius:12px;margin-top:5px;display:block}
.chat-reacts{display:flex;gap:6px;margin:5px 0 2px;flex-wrap:wrap;align-items:center;position:relative}
.chat-chip{background:#141E33;border:1px solid #27395E;color:#D9E1EE;border-radius:8px;padding:2px 8px;font-size:12.5px;cursor:pointer}
.chat-chip.mine{background:#2E4A7A;border-color:#2E7CF6}
.chat-chip.add{opacity:.75}
.chat-react-pop{display:inline-flex;gap:2px;background:#141E33;border:1px solid #27395E;border-radius:10px;padding:2px 4px}
.chat-react-pop button{background:none;border:none;font-size:16px;cursor:pointer;padding:2px 3px}
.chat-gif-picker{border-top:1px solid #1B2740;padding:10px 12px 6px}
.chat-gif-search{width:100%;background:#111A2C;border:1px solid #22304D;border-radius:10px;color:#E8EDF5;font-size:16px;padding:8px 12px;margin-bottom:10px}
.chat-gif-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chat-gif-cell{background:#111A2C;border:1px solid #22304D;border-radius:12px;padding:0;overflow:hidden;cursor:pointer;text-align:left}
.chat-gif-cell img{width:100%;height:86px;object-fit:cover;display:block}
.chat-gif-cell span{display:block;color:#A9B6CC;font-size:11.5px;padding:4px 8px}
.chat-gif-note{color:#68758E;font-size:11.5px;padding:8px 2px 4px}
.chat-emoji-pop{display:flex;gap:2px;flex-wrap:wrap;border-top:1px solid #1B2740;padding:8px 12px}
.chat-emoji-pop button{background:none;border:none;font-size:21px;cursor:pointer;padding:3px}
.chat-form{display:flex;align-items:center;gap:8px;margin:12px 16px 16px;background:#111A2C;border:1px solid #22304D;border-radius:24px;padding:7px 9px}
.chat-plus{width:28px;height:28px;border-radius:50%;background:#22304D;color:#C7D2E4;border:none;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;cursor:pointer}
.chat-gif-btn{background:#22304D;color:#C7D2E4;border:none;font-size:11px;font-weight:800;border-radius:6px;padding:5px 6px;flex:none;cursor:pointer}
.chat-input{flex:1;background:none;border:none;color:#E8EDF5;font-size:16px;min-width:0;outline:none}
.chat-input::placeholder{color:#68758E}
.chat-emoji-btn{background:none;border:none;font-size:17px;cursor:pointer;padding:0;flex:none}
.chat-send{width:30px;height:30px;border-radius:50%;background:#2E7CF6;color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;cursor:pointer}

/* ---------- Round 2.13: tab badge + Callbacks worklist ---------- */
.view-toggle{flex-wrap:wrap}
.tab-badge{display:inline-block;background:#F01D23;color:#fff;font-size:11px;font-weight:700;border-radius:10px;padding:1px 7px;margin-left:6px;vertical-align:2px}
.callbacks-sub{color:#9ca3af;font-size:13.5px;margin:2px 0 10px}
.callbacks-group{font-size:13px;letter-spacing:1.1px;color:#9ca3af;margin:16px 0 6px}
.callbacks-count{background:#26262b;color:#f3f4f6;border-radius:9px;padding:0 7px;font-size:12px;margin-left:2px}
.cb-row{border-top:1px solid #26262b;padding:9px 2px}
.cb-main{display:flex;align-items:center;gap:9px;flex-wrap:wrap;cursor:pointer}
.cb-dot{width:10px;height:10px;border-radius:50%;flex:none}
.cb-name{font-weight:700;font-size:15px}
.cb-when{color:#9ca3af;font-size:13px}
.cb-main .phone{margin-left:auto}
.cb-note{color:#d1d5db;font-size:13.5px;line-height:1.45;margin:5px 0 2px 19px}
.cb-note-none{color:#6b7280}
.cb-expanded{margin:8px 0 4px 19px;display:flex;flex-direction:column;gap:7px;font-size:14px}
.cb-callnotes-label{font-weight:600;font-size:13.5px}
.cb-callnotes-label .muted{color:#9ca3af;font-weight:400}
.cb-callnotes{width:100%;background:#1c1c21;border:1px solid #3f3f46;border-radius:8px;color:#f3f4f6;font-size:16px;padding:8px 10px}
.cb-actions{display:flex;gap:8px;flex-wrap:wrap}
.cb-outcome-actions{border-top:1px dashed #3f3f46;padding-top:8px}
.cb-resched{display:flex;flex-direction:column;gap:6px;background:#1c1c21;border:1px solid #3f3f46;border-radius:8px;padding:9px 10px}
.admin-search{margin:0 0 14px}
.admin-search input{width:100%;background:#1c1c21;border:1px solid #3f3f46;border-radius:10px;color:#f3f4f6;font-size:16px;padding:12px 14px}

input[type="date"] { cursor: pointer; }