/* 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; }
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 {
  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-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-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: #f59e0b; } .stat-resched .num { color: #fbbf24; }
.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 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-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: #fbbf24; 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; 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;
}
.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; }
.appt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.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: #2f1d02; color: #fbbf24; border-color: #b45309; }
.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; }

/* ---------- 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: #2f1d02; border-color: #f59e0b; color: #fef3c7; }
.status-btn-reschedule:hover { background: #451a03; }
.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; }
.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-month { font-size: 16px; font-weight: 700; color: #f9fafb; }
.board-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; color: #9ca3af; text-align: center;
}
.board-grid { display: grid; grid-template-columns: repeat(7, 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%; }

/* ---------- 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; }

/* ---------- 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-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}
.keypad{display:grid;grid-template-columns:repeat(3,72px);gap:10px;justify-content:center;margin-top:10px}
.keypad button{appearance:none;border:1px solid #3f3f46;background:#1c1c21;color:#f9fafb;border-radius:10px;padding:14px 0;font-size:18px;font-weight:700;cursor:pointer}
.keypad button:hover{background:#26262c}
.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}
.day-nav{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.inline-field{flex-direction:row;align-items:center;gap:8px}
.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}
.cal-note{font-size:14px;color:#d1d5db}
.block-day-btn{margin-top:6px;font-size:11px;padding:3px 7px}
.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}}