/* ==========================================================================
   Agent Hub - Keel & Straits DEFAULT theme layer (v3: cool operations skin).

   Loaded AFTER app.css. app.css is the pixel-exact "classic" look and is
   deliberately untouched; every rule here is scoped to
   html:not([data-theme="classic"]) so setting data-theme="classic" on <html>
   restores the classic skin wholesale for customer orgs. Values come from
   design/tokens.json via the --ks-* custom properties (v3.1.0). Cobalt is the
   primary; orange is the attention signal only.
   ========================================================================== */

/* --- Global: type + cool canvas ----------------------------------------- */
html:not([data-theme="classic"]) body {
  font-family: var(--org-font-body, var(--ks-font-body));
  font-size: 15px;
  line-height: 1.6;
  color: var(--ks-ink);
  background: var(--ks-canvas);
  -webkit-font-smoothing: antialiased;
}

/* Focus: cobalt accent, the primary interface colour. */
html:not([data-theme="classic"]) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--org-primary, var(--ks-accent));
  outline-offset: 2px;
}

/* --- Typography --------------------------------------------------------- */
html:not([data-theme="classic"]) .page-title,
html:not([data-theme="classic"]) .dashboard-greeting {
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--ks-ink);
  font-family: var(--org-font-heading, var(--ks-font-display));
}
html:not([data-theme="classic"]) :is(.page-subtitle, .dashboard-subtext) { color: var(--ks-graphite); }
html:not([data-theme="classic"]) :is(.section-label, .sidebar-section-label, .manage-section-title, .kpi-label, .detail-label, .wizard-step-label) {
  font-family: var(--ks-font-body);
  font-size: 12px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ks-graphite);
}
html:not([data-theme="classic"]) :is(.modal h2, .modal h3, .wizard-header h2, .confirm-modal h3) {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--ks-ink);
  font-family: var(--org-font-heading, var(--ks-font-display));
}
html:not([data-theme="classic"]) .back-link { color: var(--ks-accent-strong); text-decoration: none; }

/* --- Buttons: cobalt primary, soft radius, subtle elevation ------------- */
html:not([data-theme="classic"]) :is(.btn-primary, .btn-secondary, .btn-danger) {
  height: var(--ks-control-h);
  padding: 0 16px;
  font-family: var(--ks-font-body);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0;
  border-radius: var(--ks-radius);
}
html:not([data-theme="classic"]) .btn-primary {
  background: var(--org-primary, var(--ks-accent));
  color: #fff;
  border: 1px solid var(--org-primary, var(--ks-accent));
  box-shadow: var(--ks-shadow-sm);
}
html:not([data-theme="classic"]) .btn-primary:hover { background: var(--ks-accent-strong); border-color: var(--ks-accent-strong); }
html:not([data-theme="classic"]) .btn-secondary {
  background: var(--ks-surface); color: var(--ks-ink); border: 1px solid var(--ks-line-strong);
  box-shadow: var(--ks-shadow-sm);
}
html:not([data-theme="classic"]) .btn-secondary:hover { background: var(--ks-surface-2); }
html:not([data-theme="classic"]) .btn-danger {
  background: var(--ks-surface); color: var(--ks-critical); border: 1px solid var(--ks-line-strong);
}
html:not([data-theme="classic"]) .btn-danger:hover { background: var(--ks-critical-soft); border-color: var(--ks-critical); }
html:not([data-theme="classic"]) :is(.btn-primary, .btn-secondary, .btn-danger)[disabled] {
  background: var(--ks-surface-2); color: var(--ks-concrete); border-color: var(--ks-line);
  opacity: 1; cursor: not-allowed; box-shadow: none;
}
html:not([data-theme="classic"]) :is(.btn-icon, .btn-icon-danger, .btn-logout) { color: var(--ks-graphite); border-radius: var(--ks-radius-sm); }
html:not([data-theme="classic"]) :is(.btn-icon, .btn-logout):hover { background: var(--ks-surface-2); color: var(--ks-ink); }
html:not([data-theme="classic"]) .btn-icon-danger { color: var(--ks-critical); }
html:not([data-theme="classic"]) .btn-icon-danger:hover { background: var(--ks-critical-soft); }

/* --- Fields: readable label, soft radius, cobalt focus ------------------ */
html:not([data-theme="classic"]) .form-label {
  font-family: var(--ks-font-body);
  font-size: 12px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ks-graphite);
}
html:not([data-theme="classic"]) :is(.form-input, .form-select, .search-bar input, .multi-select-search input) {
  background: var(--ks-surface);
  border: 1px solid var(--ks-line-strong);
  border-radius: var(--ks-radius-sm);
  font-family: var(--ks-font-body);
  font-size: 14px; color: var(--ks-ink);
}
html:not([data-theme="classic"]) :is(input.form-input, select.form-select, .search-bar input) {
  height: var(--ks-control-h); padding: 0 12px;
}
html:not([data-theme="classic"]) textarea.form-input { padding: 9px 12px; line-height: 1.5; }
html:not([data-theme="classic"]) :is(.form-input, .form-select, .search-bar input)::placeholder { color: var(--ks-concrete); }
html:not([data-theme="classic"]) :is(.form-input, .form-select, .search-bar input):focus { border-color: var(--ks-accent); }
html:not([data-theme="classic"]) .form-input.invalid { border-color: var(--ks-critical); }
html:not([data-theme="classic"]) .form-error { color: var(--ks-critical); font-size: 12px; }
html:not([data-theme="classic"]) .form-hint { color: var(--ks-graphite); font-size: 12px; }

/* --- Switch ------------------------------------------------------------- */
html:not([data-theme="classic"]) .toggle-track { background: var(--ks-concrete); border-radius: var(--ks-radius-pill); }
html:not([data-theme="classic"]) .toggle-track::after { background: var(--ks-surface); border-radius: 50%; }
html:not([data-theme="classic"]) .toggle-switch input:checked + .toggle-track { background: var(--org-primary, var(--ks-accent)); }

/* --- Table: readable headers, roomy rows, elevated ---------------------- */
html:not([data-theme="classic"]) .data-table {
  border: 1px solid var(--ks-line); background: var(--ks-surface);
  border-radius: var(--ks-radius); overflow: hidden; box-shadow: var(--ks-shadow-sm);
}
html:not([data-theme="classic"]) .data-table thead { background: var(--ks-surface-2); }
html:not([data-theme="classic"]) .data-table thead th {
  background: var(--ks-surface-2); color: var(--ks-graphite);
  font-family: var(--ks-font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  padding: 11px 14px; border-bottom: 1px solid var(--ks-line);
}
html:not([data-theme="classic"]) .data-table tbody td {
  padding: 12px 14px; font-size: 14px;
  color: var(--ks-ink); border-bottom: 1px solid var(--ks-line);
}
html:not([data-theme="classic"]) .data-table tbody tr:hover { background: var(--ks-surface-2); }
html:not([data-theme="classic"]) .sort-icon { color: var(--ks-concrete); }
html:not([data-theme="classic"]) :is(.sort-icon.active, .sortable:hover) { color: var(--ks-accent); }

/* --- Status: soft pill badges ------------------------------------------- */
html:not([data-theme="classic"]) :is(.badge, .title-badge) {
  border: 0; padding: 3px 10px; border-radius: var(--ks-radius-pill);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  background: var(--ks-surface-2); color: var(--ks-graphite);
}
html:not([data-theme="classic"]) .badge.success { background: var(--ks-good-soft); color: var(--ks-good); }
html:not([data-theme="classic"]) .badge.error { background: var(--ks-critical-soft); color: var(--ks-critical); }
html:not([data-theme="classic"]) .badge.warning { background: var(--ks-signal-soft); color: var(--ks-signal); }
html:not([data-theme="classic"]) .badge.info { background: var(--ks-accent-soft); color: var(--ks-accent-strong); }
html:not([data-theme="classic"]) .badge.filled.info { background: var(--org-primary, var(--ks-accent)); color: #fff; }
html:not([data-theme="classic"]) .badge.filled.success { background: var(--ks-good); color: #fff; }
html:not([data-theme="classic"]) .badge.filled.error { background: var(--ks-critical); color: #fff; }

/* --- Chips (dept/stat pills) -------------------------------------------- */
html:not([data-theme="classic"]) :is(.stat-pill, .dept-pill) {
  background: var(--ks-surface-2); border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-pill);
  color: var(--ks-ink); font-family: var(--ks-font-body); font-size: 12px;
}
html:not([data-theme="classic"]) .stat-pill-icon { color: var(--ks-graphite); }
html:not([data-theme="classic"]) .dept-pill-add {
  border: 1px dashed var(--ks-line-strong); color: var(--ks-graphite); background: transparent;
  border-radius: var(--ks-radius-pill);
}
html:not([data-theme="classic"]) .dept-pill-add:hover { border-color: var(--ks-accent); color: var(--ks-accent); }

/* --- Segmented control / tabs ------------------------------------------- */
html:not([data-theme="classic"]) :is(.segmented-control, .tab-group) {
  background: var(--ks-surface-2); border: 1px solid var(--ks-line); padding: 3px; gap: 2px;
  border-radius: var(--ks-radius);
}
html:not([data-theme="classic"]) :is(.segmented-btn, .tab-group .tab) {
  font-family: var(--ks-font-body); font-size: 13px; font-weight: 500;
  color: var(--ks-graphite); padding: 6px 14px; background: transparent; border-radius: var(--ks-radius-sm);
}
html:not([data-theme="classic"]) :is(.segmented-btn:hover, .tab-group .tab:hover) { color: var(--ks-ink); }
html:not([data-theme="classic"]) :is(.segmented-btn.active, .tab-group .tab.active) {
  background: var(--ks-surface); color: var(--ks-ink); box-shadow: var(--ks-shadow-sm);
}
html:not([data-theme="classic"]) .wizard-step-tab { color: var(--ks-graphite); }
html:not([data-theme="classic"]) .wizard-step-tab.active { color: var(--ks-accent); border-bottom-color: var(--ks-accent); }
html:not([data-theme="classic"]) .wizard-step-tab.done { color: var(--ks-good); border-bottom-color: var(--ks-good); }
html:not([data-theme="classic"]) .step-num { background: var(--ks-surface-2); color: var(--ks-graphite); font-family: var(--ks-font-body); border-radius: var(--ks-radius-pill); }
html:not([data-theme="classic"]) .wizard-step-tab.active .step-num { background: var(--ks-accent); color: #fff; }
html:not([data-theme="classic"]) .wizard-step-tab.done .step-num { background: var(--ks-good); color: #fff; }

/* --- Cards / stats / detail lists: elevation + radius ------------------- */
html:not([data-theme="classic"]) :is(.card, .kpi-card, .type-card, .agent-card, .radio-row, .prop-card, .selected-user-card, .detail-list, .md-viewer, .status-radio) {
  background: var(--ks-surface); border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius); box-shadow: var(--ks-shadow-sm);
}
html:not([data-theme="classic"]) .kpi-card.selectable:hover { border-color: var(--ks-accent); }
html:not([data-theme="classic"]) :is(.kpi-card.selectable.active, .type-card.selected, .radio-row:has(input:checked)) {
  border-color: var(--ks-accent); background: var(--ks-accent-soft);
}
html:not([data-theme="classic"]) .kpi-value { font-family: var(--ks-font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ks-ink); }
html:not([data-theme="classic"]) .detail-row { border-bottom: 1px solid var(--ks-line); }
html:not([data-theme="classic"]) .detail-value { color: var(--ks-ink); }
html:not([data-theme="classic"]) .detail-value.empty { color: var(--ks-concrete); }

/* --- Dialogs (modal / wizard / confirm): elevated surface --------------- */
html:not([data-theme="classic"]) :is(.modal, .wizard, .confirm-modal) {
  background: var(--ks-surface); border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-lg); box-shadow: var(--ks-shadow-lg);
}
html:not([data-theme="classic"]) :is(.modal-footer, .wizard-footer, .confirm-footer, .wizard-steps) { border-color: var(--ks-line); }
html:not([data-theme="classic"]) .modal-error {
  background: var(--ks-critical-soft); border: 1px solid var(--ks-critical); color: var(--ks-critical);
  border-radius: var(--ks-radius-sm);
}
html:not([data-theme="classic"]) :is(.modal-close, .wizard-close) { color: var(--ks-graphite); }
html:not([data-theme="classic"]) .modal-minimise { border: 1px solid var(--ks-line); color: var(--ks-graphite); border-radius: var(--ks-radius-sm); }
html:not([data-theme="classic"]) .modal-minimise:hover { border-color: var(--ks-accent); color: var(--ks-accent); background: var(--ks-surface); }
html:not([data-theme="classic"]) .wizard-progress { background: var(--ks-line); border-radius: var(--ks-radius-pill); }
html:not([data-theme="classic"]) .wizard-progress-bar { background: var(--ks-accent); border-radius: var(--ks-radius-pill); }

/* --- Dropdowns / menus: elevated ---------------------------------------- */
html:not([data-theme="classic"]) :is(.dropdown-menu, .multi-select-dropdown, .autocomplete-dropdown, .pill-add-dropdown) {
  background: var(--ks-surface); border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius); box-shadow: var(--ks-shadow-md);
}
html:not([data-theme="classic"]) :is(.dropdown-item, .multi-select-item, .autocomplete-item) { color: var(--ks-ink); font-size: 13.5px; }
html:not([data-theme="classic"]) :is(.dropdown-item:hover, .multi-select-item:hover, .autocomplete-item:hover) { background: var(--ks-surface-2); }
html:not([data-theme="classic"]) .dropdown-item-danger { color: var(--ks-critical); }
html:not([data-theme="classic"]) :is(.filter-dropdown, .multi-select-trigger) {
  background: var(--ks-surface); border: 1px solid var(--ks-line-strong); color: var(--ks-ink);
  border-radius: var(--ks-radius-sm);
}
html:not([data-theme="classic"]) .multi-select-trigger.has-filter { border-color: var(--ks-accent); color: var(--ks-accent); font-weight: 600; }
html:not([data-theme="classic"]) :is(.multi-select-item input[type="checkbox"], .multi-select-all input[type="checkbox"]) { accent-color: var(--ks-accent); }

/* --- Pagination --------------------------------------------------------- */
html:not([data-theme="classic"]) .pagination button {
  background: var(--ks-surface); border: 1px solid var(--ks-line-strong); color: var(--ks-ink);
  font-family: var(--ks-font-body); border-radius: var(--ks-radius-sm);
}
html:not([data-theme="classic"]) .pagination button:hover { background: var(--ks-surface-2); }
html:not([data-theme="classic"]) .pagination button.active { background: var(--org-primary, var(--ks-accent)); color: #fff; border-color: var(--org-primary, var(--ks-accent)); }

/* --- Toast: elevated card ----------------------------------------------- */
html:not([data-theme="classic"]) .toast-notification {
  background: var(--ks-surface); color: var(--ks-ink);
  border: 1px solid var(--ks-line); border-left: 3px solid var(--ks-good);
  border-radius: var(--ks-radius-sm); box-shadow: var(--ks-shadow-md); font-size: 13.5px;
}
html:not([data-theme="classic"]) .toast-notification.error { border-left-color: var(--ks-critical); }
html:not([data-theme="classic"]) .toast-notification.info { border-left-color: var(--ks-accent); }

/* --- Loading / empty: a cobalt spinner ---------------------------------- */
html:not([data-theme="classic"]) .global-loading-bar::before {
  background: linear-gradient(90deg, transparent, var(--ks-accent) 45%, var(--ks-accent) 55%, transparent);
}
html:not([data-theme="classic"]) :is(.spinner, .view-loading-spinner, .modal-loading-spinner) {
  border: 2.5px solid var(--ks-line);
  border-top-color: var(--ks-accent);
  border-radius: 50%;
}
html:not([data-theme="classic"]) :is(.view-loading, .loading-state, .empty-state) { color: var(--ks-graphite); }
html:not([data-theme="classic"]) .drop-zone { border: 1px dashed var(--ks-line-strong); background: var(--ks-surface); color: var(--ks-graphite); border-radius: var(--ks-radius); }
html:not([data-theme="classic"]) .drop-zone:hover { border-color: var(--ks-accent); color: var(--ks-accent); }

/* --- Banners / zones ---------------------------------------------------- */
html:not([data-theme="classic"]) :is(.info-banner, .source-banner) {
  background: var(--ks-accent-soft); border: 1px solid var(--ks-line); color: var(--ks-ink);
  border-radius: var(--ks-radius);
}
html:not([data-theme="classic"]) .danger-zone {
  background: var(--ks-critical-soft); border: 1px solid var(--ks-critical); border-radius: var(--ks-radius);
}
html:not([data-theme="classic"]) .danger-zone-hint { color: var(--ks-graphite); }

/* --- Chat --------------------------------------------------------------- */
html:not([data-theme="classic"]) .chat-bubble.user { background: var(--ks-accent-soft); color: var(--ks-ink); border-radius: var(--ks-radius); }
html:not([data-theme="classic"]) .chat-bubble.assistant { background: var(--ks-surface); border: 1px solid var(--ks-line); color: var(--ks-ink); border-radius: var(--ks-radius); }
html:not([data-theme="classic"]) .chat-bubble.note { background: transparent; color: var(--ks-graphite); }
html:not([data-theme="classic"]) .chat-input-bar { border-top: 1px solid var(--ks-line); }
html:not([data-theme="classic"]) :is(.chat-ai-notice, .chat-typing) { color: var(--ks-graphite); }
html:not([data-theme="classic"]) :is(.refinement-preview, .refinement-progress) { background: var(--ks-surface); border-color: var(--ks-line); border-radius: var(--ks-radius); }
html:not([data-theme="classic"]) .refinement-split { background: var(--ks-line); }
html:not([data-theme="classic"]) .refinement-chat { background: var(--ks-surface); }

/* --- Org accent on the signature rule (stays the orange cut) ------------ */
.ks-header__rule { background: var(--org-accent, var(--ks-signal)); }

/* --- App pages use the full width --------------------------------------- */
html:not([data-theme="classic"]) .ks-page { max-width: none; padding: var(--ks-6); }

/* --- Chart chrome ------------------------------------------------------- */
html:not([data-theme="classic"]) {
  --chart-grid: var(--ks-line);
  --chart-axis: var(--ks-concrete);
  --chart-crosshair: var(--ks-graphite);
}

/* --- App header: light, sits on the canvas ------------------------------ */
html:not([data-theme="classic"]) .app-header {
  background: var(--ks-canvas);
  border-bottom: 1px solid var(--ks-line);
}
html:not([data-theme="classic"]) .app-header .ks-header {
  --ks-surface: var(--ks-canvas);
  --ks-fg: var(--ks-ink);
}

/* --- Sidebar: cool light, pill nav, cobalt active ----------------------- */
html:not([data-theme="classic"]) .ks-shell__side,
html:not([data-theme="classic"]) .sidebar {
  background: var(--org-sidebar, var(--ks-surface-2));
  border-right: 1px solid var(--ks-line);
}
html:not([data-theme="classic"]) .ks-shell__side .ks-header {
  --ks-surface: var(--org-sidebar, var(--ks-surface-2));
  --ks-fg: var(--org-sidebar-fg, var(--ks-ink));
}
html:not([data-theme="classic"]) :is(.ks-shell__nav a, .sidebar nav a) {
  color: var(--org-sidebar-muted, var(--ks-graphite));
  border-left: 0; border-radius: var(--ks-radius-sm);
  margin: 1px 6px; padding: 8px 12px; font-weight: 500;
  cursor: pointer; transition: color 0.15s, background 0.15s;
}
html:not([data-theme="classic"]) :is(.ks-shell__nav a:hover, .sidebar nav a:hover) {
  color: var(--org-sidebar-fg, var(--ks-ink)); background: var(--ks-surface);
}
html:not([data-theme="classic"]) :is(.ks-shell__nav a.active, .ks-shell__nav a[aria-current], .sidebar nav a.active) {
  color: var(--org-sidebar-fg, var(--ks-ink)); background: var(--ks-surface);
  font-weight: 600; border-left: 0; box-shadow: var(--ks-shadow-sm);
}
html:not([data-theme="classic"]) .sidebar-section-label { color: var(--ks-concrete); }
html:not([data-theme="classic"]) .user-footer { border-top: 1px solid var(--ks-line); }
html:not([data-theme="classic"]) .avatar { background: var(--ks-accent-soft); color: var(--ks-accent-strong); font-family: var(--ks-font-body); border-radius: 50%; }
html:not([data-theme="classic"]) .user-name { color: var(--ks-ink); }
html:not([data-theme="classic"]) :is(.user-role, .btn-logout) { color: var(--ks-graphite); }

/* --- Misc interactive --------------------------------------------------- */
html:not([data-theme="classic"]) .theme-card { transition: border-color 0.15s; border-radius: var(--ks-radius); }
html:not([data-theme="classic"]) .theme-card:hover { border-color: var(--ks-accent); }
html:not([data-theme="classic"]) .font-picker__button:hover { background: var(--ks-surface-2); }
html:not([data-theme="classic"]) .swatch:hover { outline: 1px solid var(--ks-accent); outline-offset: 1px; }
html:not([data-theme="classic"]) :is(.role-picker__button, .role-picker__menu) {
  border-radius: var(--ks-radius-sm); border-color: var(--ks-line-strong); box-shadow: var(--ks-shadow-sm);
}
html:not([data-theme="classic"]) :is(.role-picker__option:hover, .role-picker__option.selected) { background: var(--ks-surface-2); }