/* ==========================================================================
   Agent Hub — white-label overrides for the CLASSIC base theme.

   app.css stays byte-untouched (it IS the classic look). This layer restates
   only the brand-accent spots as var(--org-primary, <original value>) and the
   font stacks as var(--org-font-*, <original stack>) — with no org overrides
   set, every value below is identical to app.css, so classic fidelity holds.
   ========================================================================== */

html[data-theme="classic"] body {
  font-family: var(--org-font-body, 'Segoe UI', system-ui, -apple-system, sans-serif);
}
html[data-theme="classic"] :is(.page-title, .dashboard-greeting, .modal h2, .modal h3, .wizard-header h2, .confirm-modal h3) {
  font-family: var(--org-font-heading, inherit);
}

html[data-theme="classic"] .btn-primary { background: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .sidebar nav a.active,
html[data-theme="classic"] .ks-shell__nav a.active { border-left-color: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .back-link { color: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .toggle-switch input:checked + .toggle-track { background: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .wizard-progress-bar { background: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .wizard-step-tab.active { color: var(--org-primary, #1c6ce5); border-bottom-color: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .wizard-step-tab.active .step-num { background: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .pagination button.active { background: var(--org-primary, #1c6ce5); color: #fff; }
html[data-theme="classic"] .badge.info { color: var(--org-primary, #1c6ce5); border-color: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .badge.filled.info { background: var(--org-primary, #1c6ce5); color: #fff; }
html[data-theme="classic"] .toast-notification.info { background: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .multi-select-trigger.has-filter { border-color: var(--org-primary, #1c6ce5); color: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] :is(.multi-select-item input[type="checkbox"], .multi-select-all input[type="checkbox"]) { accent-color: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] :is(.kpi-card.selectable.active, .type-card.selected) {
  border-color: var(--org-primary, #1c6ce5);
  box-shadow: 0 0 0 1px var(--org-primary, #1c6ce5);
}
html[data-theme="classic"] .radio-row:has(input:checked) { border-color: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] :is(.spinner, .view-loading-spinner) { border-top-color: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .global-loading-bar::before {
  background: linear-gradient(90deg, transparent, var(--org-primary, #1c6ce5) 45%, var(--org-primary, #1c6ce5) 55%, transparent);
}
html[data-theme="classic"] .dept-pill-add:hover { border-color: var(--org-primary, #1c6ce5); color: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .drop-zone:hover, html[data-theme="classic"] .drop-zone.dragover { border-color: var(--org-primary, #1c6ce5); }
html[data-theme="classic"] .modal-minimise:hover { color: var(--org-primary, #1c6ce5); border-color: var(--org-primary, #1c6ce5); }

/* ==========================================================================
   Classic SHELL: the pre-migration frame on the new markup — white sidebar,
   grey chrome borders, light content. The K&S lockup renders ink-on-white
   here (surface/fg swap); org accent still recolors the rule.
   ========================================================================== */
html[data-theme="classic"] .ks-shell__side {
  background: var(--org-sidebar, #fff); border-right: 1px solid #e8e8e8; width: 200px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
html[data-theme="classic"] .ks-shell__side .ks-header {
  --ks-surface: var(--org-sidebar, #fff); --ks-fg: var(--org-sidebar-fg, #1a1a2e);
}
html[data-theme="classic"] .ks-shell__main { background: #fff; }
html[data-theme="classic"] .ks-page { max-width: none; padding: 32px 40px; }
html[data-theme="classic"] .ks-shell__nav a {
  display: block; padding: 10px 24px; color: var(--org-sidebar-muted, #555); font-size: 14px;
  border-left: 3px solid transparent; transition: all 0.15s; cursor: pointer;
}
html[data-theme="classic"] .ks-shell__nav a:hover { color: var(--org-sidebar-fg, #333); background: var(--org-sidebar-hover, #fafafa); }
html[data-theme="classic"] .ks-shell__nav a.active {
  color: var(--org-sidebar-fg, #333); background: var(--org-sidebar-active, #f0f0f0); font-weight: 600;
  border-left-color: var(--org-primary, #1c6ce5);
}
html[data-theme="classic"] .user-footer { border-top: 1px solid #f0f0f0; }
html[data-theme="classic"] .user-name { color: var(--org-sidebar-fg, #333); }
html[data-theme="classic"] .user-role { color: var(--org-sidebar-muted, #999); }
html[data-theme="classic"] .btn-logout { color: var(--org-sidebar-muted, #999); }

/* Chart chrome in classic = the pre-rebrand values. */
html[data-theme="classic"] {
  --chart-grid: #f0f0f0;
  --chart-axis: #888;
  --chart-crosshair: #333;
}