/* Screen-only theme. Existing layout, state classes and print styles stay in styles.css. */
:root {
  --background: #f3efe6;
  --surface: #fbf9f4;
  --surface-elevated: #fffdf9;
  --surface-subtle: #f0ece3;
  --primary: #2457a6;
  --primary-hover: #1d4789;
  --primary-muted: #e8edf5;
  --heading: #183153;
  --text-primary: #292b2d;
  --text-secondary: #6e6a63;
  --text-disabled: #837e76;
  --border: #ded8cc;
  --border-strong: #b8b0a2;
  --success: #53653d;
  --success-muted: #edf0e5;
  --success-border: #c9d2b8;
  --warning: #805c14;
  --warning-muted: #faf2db;
  --warning-border: #ddc681;
  --danger: #b13d35;
  --danger-muted: #fbece8;
  --danger-border: #e3b6ae;
  --accent-orange: #c46b3c;
  --accent-olive: #6f7953;
  --accent-mustard: #d2a84a;
  --accent-walnut: #75523a;
  --on-primary: #ffffff;
  --sidebar: #183153;
  --sidebar-hover: #233f60;
  --sidebar-active: #294f7e;
  --sidebar-text: #fbf9f4;
  --sidebar-secondary: #b7c5d7;
  --sidebar-line: #344d6d;
  --sidebar-indicator: #669bf0;
  --focus-ring: #2457a6;
  --overlay: rgb(24 34 46 / 48%);
  --shadow-surface: 0 2px 6px rgb(62 49 33 / 4%);
  --shadow-elevated: 0 16px 44px rgb(42 35 24 / 16%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 8px;
  --radius-dialog: 12px;

  /* Compatibility aliases keep existing modules on the same semantic palette. */
  --navy-950: var(--heading);
  --navy-900: var(--heading);
  --navy-800: var(--primary);
  --navy-700: var(--primary);
  --navy-100: var(--primary-muted);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --surface-soft: var(--surface-subtle);
  --surface-blue: var(--primary-muted);
  --teal: var(--primary);
  --teal-soft: var(--primary-muted);
  --coral: var(--danger);
  --coral-soft: var(--danger-muted);
  --amber: var(--warning);
  --amber-soft: var(--warning-muted);
  --green: var(--success);
  --shadow: var(--shadow-elevated);
}

html[data-theme="dark"] {
  --background: #1c2025;
  --surface: #24292f;
  --surface-elevated: #2c3239;
  --surface-subtle: #20252b;
  --primary: #92baff;
  --primary-hover: #b3ceff;
  --primary-muted: #2c3c53;
  --heading: #e3e9f1;
  --text-primary: #f2eee7;
  --text-secondary: #c1bcb3;
  --text-disabled: #96938e;
  --border: #42474c;
  --border-strong: #777b80;
  --success: #b4c78e;
  --success-muted: #303a29;
  --success-border: #64774c;
  --warning: #e6c677;
  --warning-muted: #3b3322;
  --warning-border: #8c7541;
  --danger: #ffada2;
  --danger-muted: #462d2b;
  --danger-border: #95615b;
  --accent-walnut: #c3a084;
  --on-primary: #142b49;
  --focus-ring: #92baff;
  --overlay: rgb(9 15 23 / 65%);
  --shadow-surface: 0 2px 6px rgb(0 0 0 / 12%);
  --shadow-elevated: 0 16px 44px rgb(0 0 0 / 30%);
  --navy-950: var(--heading);
  --navy-900: var(--heading);
  --navy-800: var(--primary);
  --navy-100: var(--primary-muted);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --surface-soft: var(--surface-subtle);
  --surface-blue: var(--primary-muted);
  --teal: var(--primary);
  --teal-soft: var(--primary-muted);
  --coral: var(--danger);
  --coral-soft: var(--danger-muted);
  --amber: var(--warning);
  --amber-soft: var(--warning-muted);
  --green: var(--success);
  --shadow: var(--shadow-elevated);
}

html, body { background: var(--background); }

/* Navigation stays a scrollable list; no menu or routing changes. */
.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-text);
  border-color: var(--sidebar-line);
}

.sidebar .brand-home-link.nav-button,
.sidebar .brand-home-link.nav-button.active {
  min-height: 90px;
  border-radius: 0;
  background: var(--sidebar);
  color: var(--sidebar-text);
  border-bottom: 1px solid var(--sidebar-line);
}

.sidebar .brand-home-link.nav-button:hover { background: var(--sidebar-hover); }
.sidebar .brand-home-link.nav-button svg { flex: 0 0 30px; width: 30px; height: 30px; }
.brand span { font-size: 13px; }
.nav-list { gap: var(--space-4); padding: var(--space-4) var(--space-3); scrollbar-color: var(--sidebar-line) var(--sidebar); scrollbar-width: thin; }
.nav-section { gap: var(--space-1); }
.nav-section-label { color: var(--sidebar-secondary); font-size: 10px; padding-bottom: var(--space-2); }
.sidebar .nav-button { color: var(--sidebar-text); font-size: 12px; line-height: 1.35; min-height: 42px; padding: 9px 12px; }
.sidebar .nav-button svg { flex: 0 0 19px; width: 19px; height: 19px; }
.sidebar .nav-button:hover { background: var(--sidebar-hover); }
.sidebar .nav-button.active { background: var(--sidebar-active); color: var(--sidebar-text); }
.sidebar .nav-button.active::before { inset-inline-start: -5px; background: var(--sidebar-indicator); }
.sidebar-footer { gap: var(--space-3); border-color: var(--sidebar-line); padding: var(--space-3); }
.sidebar .connection-status, .sidebar .connection-status strong, .sidebar .connection-status small { color: var(--sidebar-secondary); }
.sidebar .connection-status:hover, .sidebar .connection-status:focus-visible { background: var(--sidebar-hover); }
.sidebar .connection-dot { border-color: var(--sidebar); box-shadow: 0 0 0 1px var(--sidebar-secondary); }
.sidebar .connection-status:not(.error):not(.local) .connection-dot { background: var(--accent-olive); }
.sidebar .icon-button { background: var(--sidebar-hover); color: var(--sidebar-text); border-color: var(--sidebar-line); }
.sidebar .team-avatar { background: var(--sidebar-hover); color: var(--sidebar-text); border-color: var(--sidebar-line); }
.sidebar .sidebar-profile-button > span:last-child { background: var(--sidebar-active); color: var(--sidebar-text); border-color: var(--sidebar); }

.topbar { margin-bottom: var(--space-5); }
.title-block h1 { color: var(--heading); font-size: 28px; line-height: 1.25; }
.title-block p { margin-top: var(--space-2); }
.section-header { padding: var(--space-4) var(--space-5); gap: var(--space-4); flex-wrap: wrap; }
.section-header > div { min-width: 0; }
.section-header > div:first-child { flex: 1 1 140px; }
.section-header > button { flex-shrink: 0; }
.section-header h2 { font-size: 19px; line-height: 1.3; }
.section-header .count-label { display: inline-block; margin-top: var(--space-1); font-size: 12px; }
.panel { box-shadow: var(--shadow-surface); }
.panel .panel { box-shadow: none; }
.icon-button { border-color: var(--border); }
.primary-button { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.primary-button:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.primary-button:disabled, .secondary-button:disabled { color: var(--text-disabled); background: var(--surface-subtle); border-color: var(--border); }
html .secondary-button:not(:disabled), html .action-button:not(:disabled), html .ghost-button { color: var(--primary); }
.secondary-button, .action-button { border-color: var(--border-strong); }
.secondary-button:hover:not(:disabled), .action-button:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-muted); }
html .danger-button:not(:disabled) { color: var(--danger); border-color: var(--danger-border); }
.danger-primary-button { color: var(--surface); background: var(--danger); border-color: var(--danger); }
.danger-primary-button:hover { background: var(--danger); filter: brightness(.92); }
.notification-badge { background: var(--primary); color: var(--on-primary); border-color: var(--background); }
.segmented button:not(.active) { color: var(--text-secondary); }
.global-tooltip { background: var(--sidebar); color: var(--sidebar-text); border-color: var(--sidebar-line); }
.segmented button.active, .planner-day.today header strong,
.month-day.today > strong, .document-item-review-actions button.active,
.customer-timeline-filters button.active, .customer-timeline-filters button:hover,
.opportunity-filters button.active, .opportunity-filters button:hover,
.commission-review-actions button.active, .next-best-package-button:hover,
.onboarding-check-item.done > span, .claim-checklist .done button,
.topic-option.selected i {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}
.mobile-brand { background: var(--sidebar); color: var(--sidebar-text); }
.field label { color: var(--text-primary); }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 1; }
input, textarea, select { accent-color: var(--primary); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.sidebar button:focus-visible { outline-color: var(--sidebar-indicator); outline-offset: -3px; }
.search input:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.modal { border-radius: var(--radius-dialog); box-shadow: var(--shadow-elevated); }
.modal-backdrop, .drawer-backdrop { background: var(--overlay); }
.modal-header, .modal-actions { border-color: var(--border); }
.modal-actions { background: var(--surface-subtle); }

/* A typographic daily overview, not four competing cards. */
.dashboard-v2 { gap: var(--space-5); }
.dashboard-kpi-strip { gap: 0; background: var(--surface); border-block: 1px solid var(--border); }
.dashboard-kpi { min-height: 114px; border: 0; border-inline-end: 1px solid var(--border); border-radius: 0; background: transparent; }
.dashboard-kpi:last-child { border-inline-end: 0; }
.dashboard-kpi > span { border: 0; background: transparent; color: var(--primary); }
.dashboard-kpi strong { font-size: 32px; line-height: 1.15; color: var(--heading); font-variant-numeric: tabular-nums; }
.dashboard-kpi small, .dashboard-kpi em { font-size: 11px; line-height: 1.4; }
.dashboard-plan-switch button.active { background: var(--primary); color: var(--on-primary); }
.dashboard-voice-command { min-height: 68px; border-color: var(--border); background: var(--surface); box-shadow: inset 3px 0 var(--primary); }
.dashboard-voice-command > span { color: var(--primary); background: var(--primary-muted); border-radius: var(--radius); }
.dashboard-voice-command:hover { border-color: var(--primary); box-shadow: inset 3px 0 var(--primary); }
.dashboard-voice-command:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.dashboard-voice-command small { font-size: 12px; white-space: normal; line-height: 1.4; }
.dashboard-due-panel { border-top: 3px solid var(--primary); }
.dashboard-due-list strong, .dashboard-task-row strong, .dashboard-opportunity-row strong { font-size: 12px; line-height: 1.45; }
.dashboard-due-list small, .dashboard-task-row small { font-size: 11px; line-height: 1.4; }
.dashboard-due-item { min-height: 68px; }
.dashboard-due-list em, .dashboard-task-row > span:nth-child(3) { font-size: 11px; }
.dashboard-due-icon, .dashboard-task-row > span:first-child > i { background: var(--primary-muted); color: var(--primary); }
.dashboard-due-icon.birthday { background: var(--warning-muted); color: var(--warning); }
.dashboard-task-head { background: var(--surface-subtle); color: var(--text-secondary); font-size: 11px; }
.dashboard-opportunity-icon { background: var(--primary-muted); color: var(--primary); }
.dashboard-routine-panel { box-shadow: none; }
.dashboard-routine-strip > div > span { background: var(--surface-subtle); color: var(--accent-walnut); }
.dashboard-week-day.today > header { background: var(--primary-muted); color: var(--primary); }
.dashboard-overflow-note { color: var(--text-secondary); background: var(--surface-subtle); }
.orbit-intro-hint { background: var(--surface); }
.orbit-briefing-panel, .agentur-start-hero { background: var(--surface); border-color: var(--border); }
.agentur-start-hero .eyebrow { color: var(--accent-walnut); }
.agentur-start-welcome-goals { background: var(--primary-muted); }
.tracking-telephone-strip { background: var(--surface); }
.tracking-telephone-heading > span { background: var(--primary-muted); color: var(--primary); }
.tracking-telephone-sources span { background: var(--surface-subtle); color: var(--text-secondary); }
.tracking-telephone-sources span strong { margin-inline-end: var(--space-1); }
.crm-start { background: var(--surface); border-color: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-surface); }
.crm-start-heading h2 { font-size: 28px; letter-spacing: 0; }
.crm-start-eyebrow { color: var(--accent-walnut); letter-spacing: 0; }
.crm-overview-card, .crm-next-up, .crm-recent-activity { background: var(--surface); border-radius: var(--radius); }
.crm-overview-copy strong { letter-spacing: 0; }
.crm-overview-icon { background: var(--primary-muted); color: var(--primary); }
.crm-overview-card.is-urgent .crm-overview-icon { background: var(--danger-muted); color: var(--danger); }

/* Telephone colors share the workspace tokens, including dark mode. */
.telephone-service-focus {
  --telephone-ink: var(--text-primary);
  --telephone-blue: var(--primary);
  --telephone-blue-soft: var(--primary-muted);
  --telephone-slate: var(--text-secondary);
  --telephone-line: var(--border);
  --telephone-paper: var(--surface);
  --telephone-success: var(--success);
  --telephone-warning: var(--warning);
  --telephone-danger: var(--danger);
}
.telephone-commandbar { flex-wrap: wrap; }
.telephone-day-actions { flex-wrap: wrap; min-width: 0; }
.telephone-list-toolbar { flex-wrap: wrap; }
.telephone-service-focus .telephone-commandbar,
.telephone-service-focus .telephone-work-timer,
.telephone-service-brief,
.telephone-service-focus .telephone-tabs,
.telephone-service-focus .telephone-layout { box-shadow: var(--shadow-surface); }
.telephone-service-focus .telephone-work-timer.active { background: var(--success-muted); border-color: var(--success-border); }
.telephone-service-focus .telephone-work-timer.active .telephone-work-timer-main > svg { color: var(--success); }
.telephone-service-focus .telephone-work-timer-stats span { background: var(--surface); }
.telephone-service-brief, .telephone-service-focus .telephone-contact-panel { background: var(--surface); }
.telephone-service-focus .telephone-layout, .telephone-service-focus .telephone-list-region { background: var(--surface-subtle); }
.telephone-focus-status span { background: var(--primary-muted); border-color: var(--border); }
.telephone-next-context span, .telephone-service-contact .telephone-contact-facts,
.telephone-service-focus .telephone-deck-picker, .telephone-service-focus .telephone-work-hint,
.telephone-service-focus .telephone-booking-diagnostic { background: var(--surface-subtle); border-color: var(--border); }
.telephone-service-contact .telephone-phone-list a { background: var(--surface-elevated); border-color: var(--border-strong); }
.telephone-service-focus .telephone-call-primary { color: var(--on-primary); box-shadow: none; }
.telephone-service-focus .telephone-call-primary.active { color: var(--surface); }
.telephone-service-focus .telephone-tabs button.active,
.telephone-service-focus .telephone-work-steps span.active { background: var(--primary-muted); border-color: var(--border-strong); }
.telephone-service-focus .telephone-table th { background: var(--surface-subtle); }
.telephone-service-focus .telephone-table tr.selected td { background: var(--primary-muted); }
.telephone-outcomes .telephone-outcome { box-shadow: none; }
.telephone-outcomes .telephone-outcome:hover { transform: none; }
.telephone-outcomes .telephone-outcome.success { background: var(--success-muted); color: var(--success); border-color: var(--success-border); }
.telephone-outcomes .telephone-outcome.callback, .telephone-outcomes .telephone-outcome.warning { background: var(--warning-muted); color: var(--warning); border-color: var(--warning-border); }
.telephone-outcomes .telephone-outcome.danger { background: var(--danger-muted); color: var(--danger); border-color: var(--danger-border); }
.telephone-outcomes .telephone-outcome.neutral { background: var(--surface); color: var(--primary); border-color: var(--border); }
.telephone-outcomes .telephone-outcome.muted { background: var(--surface-subtle); color: var(--text-secondary); border-color: var(--border); }
.telephone-report-summary strong, .telephone-metrics strong, .tracking-kpi strong,
.telephone-work-timer-main strong { color: var(--heading); font-variant-numeric: tabular-nums; }
.telephone-report-summary strong { font-size: 32px; line-height: 1.2; }
.telephone-report-summary > div { background: transparent; }
.telephone-report-periods button.active { background: var(--primary); color: var(--on-primary); }
.telephone-report-filters, .telephone-booking-review,
.telephone-report-month-tools select, .telephone-report-month-tools > button,
.telephone-report-periods, .telephone-appointment-status-controls button,
.telephone-partner-appointments-empty { background: var(--surface); }
.telephone-appointment-status-controls button.active { background: var(--primary-muted); border-color: var(--primary); color: var(--primary); }
.telephone-partner-detail-row > td, .telephone-appointment-row-excluded { background: var(--surface-subtle); }
.telephone-table tr.telephone-row-attempted td, .telephone-table tr.telephone-row-processed td { background: var(--surface-subtle); }
.telephone-table tr.telephone-row-later td { background: var(--warning-muted); }
.telephone-table tr.telephone-row-issue td { background: var(--danger-muted); }
.telephone-table tr.selected td { background: var(--primary-muted); }
.telephone-inventory-warning { color: var(--warning); }
.telephone-booking-review-table tr.needs-review td,
.telephone-partner-report-row.low-inventory td { background: var(--warning-muted); }
.telephone-event-read-status.ready { background: var(--success-muted); color: var(--success); border-color: var(--success-border); }
.telephone-event-read-status.ready svg { color: var(--success); }
.telephone-service-suggestion-card { background: var(--surface); border-color: var(--border); }
.telephone-service-suggestion-card .suggestion-icon { background: var(--primary-muted); color: var(--primary); }

/* Preserve status meaning instead of coloring every KPI. */
html .completed-action, html .login-success, html .status-pill:not(.local):not(.error) {
  color: var(--success); border-color: var(--success-border); background: var(--success-muted);
}
html .security-note:not(.error), html .login-notice:not(.error), .local-note {
  color: var(--warning); border-color: var(--warning-border); background: var(--warning-muted);
}
html .security-note.error, html .login-notice.error, html .status-pill.error {
  color: var(--danger); border-color: var(--danger-border); background: var(--danger-muted);
}
.contact-avatar { background: var(--success-muted); color: var(--success); }
.team-avatar { background: var(--primary-muted); color: var(--primary); border-color: var(--border); }
.tracking-active-toggle input:checked + span, .dashboard-section-options input:checked + i { background: var(--primary); }
.tracking-week-chart { background: var(--surface-subtle); }
.funnel-track, .tracking-goal-bar, .telephone-target-progress { background: var(--primary-muted); }
.toast { background: var(--success-muted); color: var(--success); border-color: var(--success-border); }

@media (min-width: 821px) {
  :root { --sidebar-width: 192px; }
  .main-area { padding: var(--space-5) var(--space-6) 40px; }
}

@media (min-width: 1181px) and (max-width: 1599px) {
  .dashboard-work-grid { grid-template-columns: minmax(290px, .9fr) minmax(0, 1.3fr); gap: var(--space-5); }
  .dashboard-opportunity-panel { grid-column: 1 / -1; }
}

@media (max-width: 1180px) {
  .dashboard-work-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1600px) {
  .dashboard-work-grid { grid-template-columns: minmax(320px, .9fr) minmax(440px, 1.5fr) minmax(260px, .7fr); gap: var(--space-5); }
}

@media (min-width: 701px) and (max-width: 1240px) {
  .dashboard-kpi:nth-child(3) { border-inline-end: 0; }
  .dashboard-kpi-commission { border-top: 1px solid var(--border); }
}

@media (max-width: 820px) {
  .title-block h1 { font-size: 22px; }
  .main-area { background: var(--background); }
  html .mobile-nav { background: var(--sidebar); border-color: var(--sidebar-line); box-shadow: var(--shadow-elevated); }
  html .mobile-nav-button { color: var(--sidebar-secondary); }
  html .mobile-nav-button.active { background: var(--sidebar-active); color: var(--sidebar-text); }
  .section-header { padding: var(--space-4); }
  .dashboard-v2 { gap: var(--space-4); }
}

@media (max-width: 700px) {
  .dashboard-kpi { min-height: 100px; }
  .dashboard-kpi strong { font-size: 26px; }
  .dashboard-kpi:nth-child(2) { border-inline-end: 0; }
  .dashboard-kpi:nth-child(3) { grid-column: 1 / -1; border-inline-end: 0; min-height: 80px; }
  .dashboard-kpi:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .dashboard-kpi-commission { border-inline-end: 0; }
  .dashboard-plan-switch button { min-height: 38px; }
  .dashboard-work-grid { gap: var(--space-4); }
  .dashboard-due-list strong { white-space: normal; }
  .telephone-report-summary strong { font-size: 26px; }
}