/* ================================================================
   Vairo TMC — Dark mode
   Loaded AFTER every page's base CSS. Activates on html[data-theme="dark"].
   Strategy: (1) redefine the shared design tokens for dark, so every
   token-driven component flips automatically; (2) override the handful
   of structural classes that hard-coded #fff / #fafaf9 / hover greys.
   Scope: TMC console pages only (not the customer portal).
   ================================================================ */

html[data-theme="dark"] {
  --page:        #100f0e;
  --bg:          #1a1714;   /* app canvas */
  --surface:     #211e1b;   /* cards, nav, rails */
  --surface-2:   #26221f;   /* sunken panels / striped headers */
  --hover:       #2b2723;   /* row hover */
  --line:        #34302b;   /* borders */
  --line-2:      #2a2622;   /* inner dividers */
  --ink:         #f6f4f1;   /* primary text */
  --ink-2:       #c7bfb4;   /* secondary */
  --ink-3:       #968c7f;   /* muted */
  --ink-4:       #6d6458;   /* faint / placeholder */

  --accent:      #ededea;   /* primary buttons -> light pill w/ dark text */
  --accent-fg:   #1a1714;

  --info:        #60a5fa;  --info-bg:   #18243a;
  --good:        #4ade80;  --good-bg:   #15271c;
  --warn-bg:     #2c2410;  --warn-border:#4a3c16; --warn-ink: #fcd34d;
  --danger:      #f87171;  --danger-bg: #2c1717;  --danger-border:#5a2a2a;
  --neutral-bg:  #2c2824;

  color-scheme: dark;
}

/* ---- base ---- */
html[data-theme="dark"] body { background: var(--page); color: var(--ink); }

/* ---- shared chrome (inbox.css) ---- */
html[data-theme="dark"] .vairo-nav { background: var(--surface) !important; }
html[data-theme="dark"] .vairo-nav-item.active { background: rgba(217,249,157,0.12); border-color: rgba(217,249,157,0.28); color: #d9f99d; }
html[data-theme="dark"] .vairo-avatar { background: linear-gradient(135deg,#5b6577,#23262d); }
html[data-theme="dark"] .pill-neutral { background: var(--neutral-bg); color: var(--ink-2); }
html[data-theme="dark"] .pill-soft { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] .btn { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .btn:hover { background: var(--hover); }
html[data-theme="dark"] .btn-primary { background: #ededea !important; color: #1a1714 !important; border-color: #ededea !important; }
html[data-theme="dark"] .btn-primary:hover { background: #ffffff !important; }
html[data-theme="dark"] .btn-ghost { background: transparent; }
html[data-theme="dark"] .card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .kbd { background: var(--surface-2); border-color: var(--line); color: var(--ink-3); }

/* search / filter / group bars */
html[data-theme="dark"] .search-row,
html[data-theme="dark"] .filters-bar,
html[data-theme="dark"] .view-tabs { background: var(--surface) !important; border-color: var(--line); }
html[data-theme="dark"] .search-input { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .search-input input { color: var(--ink); }
html[data-theme="dark"] .chip { background: var(--neutral-bg); color: var(--ink-2); }
html[data-theme="dark"] .group-head { background: var(--surface-2) !important; border-color: var(--line-2); }
html[data-theme="dark"] .kpi-strip { background: var(--surface) !important; border-color: var(--line); }
html[data-theme="dark"] .kpi { border-color: var(--line-2); }

/* rails */
html[data-theme="dark"] .rail { background: var(--surface) !important; border-color: var(--line); }
html[data-theme="dark"] .rail-item:hover { background: var(--hover); }
html[data-theme="dark"] .rail-item.active { background: var(--neutral-bg); color: var(--ink); }
html[data-theme="dark"] .rail-item.active .count { background: #ededea; color: #1a1714; }
html[data-theme="dark"] .rail-corp:hover { background: var(--hover); }
html[data-theme="dark"] .rail-divider { background: var(--line-2); }

/* request rows (inbox) */
html[data-theme="dark"] .req { background: var(--surface) !important; border-color: var(--line-2); }
html[data-theme="dark"] .req:hover { background: var(--hover) !important; }
html[data-theme="dark"] .req.selected { background: rgba(250,204,21,0.10) !important; }
html[data-theme="dark"] .view-tab.active { border-color: var(--ink); color: var(--ink); }

/* tasks */
html[data-theme="dark"] .task-row { background: var(--surface) !important; border-color: var(--line-2); }
html[data-theme="dark"] .task-row:hover { background: var(--hover); }
html[data-theme="dark"] .task-row.selected { background: rgba(250,204,21,0.10); }
html[data-theme="dark"] .task-check { background: var(--surface); border-color: var(--ink-4); }
html[data-theme="dark"] .task-check.in-progress::after { background: var(--surface); }
html[data-theme="dark"] .board { background: var(--bg) !important; }
html[data-theme="dark"] .board-col { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .board-col-head { border-color: var(--line-2); }
html[data-theme="dark"] .board-card { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .board-card:hover { border-color: var(--ink-4); }
html[data-theme="dark"] .view-switch { border-color: var(--line); }
html[data-theme="dark"] .view-switch button { background: var(--surface); color: var(--ink-3); }
html[data-theme="dark"] .view-switch button:hover { background: var(--hover); }
html[data-theme="dark"] .view-switch button.on { background: #ededea !important; color: #1a1714 !important; }
html[data-theme="dark"] .view-switch button + button { border-color: var(--line); }

/* task drawer + fields */
html[data-theme="dark"] .drawer-panel { background: var(--surface); border-color: var(--line); box-shadow: -8px 0 32px rgba(0,0,0,0.5); }
html[data-theme="dark"] .drawer-head, html[data-theme="dark"] .drawer-section { border-color: var(--line-2); }
html[data-theme="dark"] .drawer-foot,
html[data-theme="dark"] .drawer-form-footer { background: #26221f !important; border-color: var(--line); }
html[data-theme="dark"] .drawer-bg { background: rgba(0,0,0,0.5); }
html[data-theme="dark"] .field-row { border-color: var(--line-2); }
html[data-theme="dark"] .field-row .v.editable:hover { background: var(--hover); }
html[data-theme="dark"] .desc-input:focus { background: var(--surface-2); border-color: var(--ink-3); }
html[data-theme="dark"] .cmt + .cmt { border-color: var(--line-2); }

/* ---- Corporates list (corp.css) ---- */
html[data-theme="dark"] .corp-row { background: var(--surface) !important; border-color: var(--line-2); }
html[data-theme="dark"] .corp-row:hover { background: var(--hover); }
html[data-theme="dark"] .corp-domain { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-2); }
html[data-theme="dark"] .corp-group-head { background: var(--surface-2) !important; border-color: var(--line); }
html[data-theme="dark"] .tier-mid { background: var(--neutral-bg); color: #cdd6e2; }
html[data-theme="dark"] .tier-small { background: var(--surface-2); color: var(--ink-3); border-color: var(--line-2); }
html[data-theme="dark"] .portal-active { background: var(--good-bg); color: var(--good); }
html[data-theme="dark"] .portal-email { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-2); }
html[data-theme="dark"] .portal-inactive { background: var(--danger-bg); color: var(--danger); }
html[data-theme="dark"] .peek-panel { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .peek-x:hover { background: var(--hover); }
html[data-theme="dark"] .peek-stat { background: var(--surface-2); border-color: var(--line-2); }
html[data-theme="dark"] .peek-quick-row { background: var(--surface-2); border-color: var(--line-2); }
html[data-theme="dark"] .peek-bg { background: rgba(0,0,0,0.5); }

/* ---- Corporate detail (corp-detail.css) ---- */
html[data-theme="dark"] .cd-head { background: var(--surface) !important; border-color: var(--line); }
html[data-theme="dark"] .cd-tape { background: var(--surface) !important; border-color: var(--line-2); }
html[data-theme="dark"] .cd-layout { background: var(--bg) !important; }
html[data-theme="dark"] .cd-side { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .cd-card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .cd-section-bar { background: var(--surface-2); border-color: var(--line-2); }
html[data-theme="dark"] .cd-toc { background: var(--line-2); border-color: var(--line-2); }
html[data-theme="dark"] .cd-toc a { background: var(--surface); color: var(--ink-2); }
html[data-theme="dark"] .cd-toc a:hover { background: var(--hover); color: var(--ink); }
html[data-theme="dark"] .pref-chip { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-2); }
html[data-theme="dark"] .pref-block { border-color: var(--line-2); }

/* ---- Messages list (messages.css) ---- */
html[data-theme="dark"] .msg-row { background: var(--surface) !important; border-color: var(--line-2); }
html[data-theme="dark"] .msg-row:hover { background: var(--hover); }
html[data-theme="dark"] .msg-row.unread { background: var(--surface-2) !important; }

/* ---- Message detail / reading pane (messages-read.css) ---- */
html[data-theme="dark"] .mr-list { background: var(--surface) !important; border-color: var(--line); }
html[data-theme="dark"] .mr-list-head { border-color: var(--line); }
html[data-theme="dark"] .mr-read { background: var(--bg) !important; }
html[data-theme="dark"] .mr-row { background: var(--surface) !important; border-color: var(--line-2); }
html[data-theme="dark"] .mr-row:hover { background: var(--hover) !important; }
html[data-theme="dark"] .mr-row.active { background: var(--neutral-bg) !important; }
html[data-theme="dark"] .mr-row-dir { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .mr-bar { background: var(--surface) !important; border-color: var(--line); }
html[data-theme="dark"] .mr-iconbtn:hover { background: var(--hover); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .mr-iconbtn.on { background: var(--info-bg); color: var(--info); border-color: #2a3a5c; }
html[data-theme="dark"] .mr-reply-cta { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .mr-reply-cta:hover { background: var(--hover); border-color: var(--ink-4); }
html[data-theme="dark"] .mr-reply-cta .ic { background: var(--neutral-bg); color: var(--ink-2); }
html[data-theme="dark"] .mr-linkbtn { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
html[data-theme="dark"] .mr-linkbtn:hover { background: var(--hover); color: var(--ink); }
html[data-theme="dark"] .mr-msg { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .mr-msg-head { border-color: var(--line-2); }
html[data-theme="dark"] .mr-email { border-color: var(--line-2); }
html[data-theme="dark"] .mr-email-inner { background: #f7f6f3; color: #1a1714; }  /* emails stay on light paper */
html[data-theme="dark"] .mr-email-top { background: #1e3a8a; }
html[data-theme="dark"] .mr-triage { background: var(--warn-bg); border-color: var(--warn-border); }
html[data-theme="dark"] .mr-reply-locked { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .mr-composer { background: var(--surface); border-color: var(--line); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
html[data-theme="dark"] .mr-comp-head, html[data-theme="dark"] .mr-comp-sig { background: var(--surface-2); border-color: var(--line-2); }
html[data-theme="dark"] .mr-field { border-color: var(--line-2); }
html[data-theme="dark"] .mr-tb:hover { background: var(--neutral-bg); color: var(--ink); }
html[data-theme="dark"] .mr-tb-select { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
html[data-theme="dark"] .mr-tb-sep { background: var(--line-2); }
html[data-theme="dark"] .mr-folder-pop { background: var(--surface); border-color: var(--line); box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
html[data-theme="dark"] .mr-folder-item:hover { background: var(--hover); }
html[data-theme="dark"] .mr-comp-textarea { background: var(--surface); color: var(--ink); }

/* ---- Trip request (inline-styled cards via shell/blocks) ---- */
html[data-theme="dark"] .seg-icon { background: var(--surface-2); color: var(--ink-2); }
html[data-theme="dark"] .stepper .step { background: var(--surface); border-color: var(--line); color: var(--ink-3); }
html[data-theme="dark"] .stepper .step.done { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .stepper .step.current { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* ════════════════════════════════════════════════════════════════
   UNIVERSAL ELEMENT OVERRIDES — cover every TMC page without
   needing per-class rules. These target element types that
   invariably have white backgrounds by browser/page default.
   ════════════════════════════════════════════════════════════════ */

/* All text inputs, textareas, selects — every page, every modal */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  color-scheme: dark;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--ink-4) !important; }

/* ---- main content canvas ---- */
/* .content-region is the scrollable task/board container in tasks-v2 */
html[data-theme="dark"] .content-region { background: var(--bg) !important; }
/* board drag-over highlight */
html[data-theme="dark"] .board-col-body.drag-over { background: var(--hover); border-radius: 0 0 10px 10px; }
/* board card avatar */
html[data-theme="dark"] .board-card-ava { background: var(--surface-2); color: var(--ink-2); }

/* ---- page-level chrome (page-head, search-box, kpi hover) ---- */
html[data-theme="dark"] .page-head { background: var(--surface) !important; border-color: var(--line); }
html[data-theme="dark"] .page-head-right .btn { background: var(--surface); }
html[data-theme="dark"] .search-box { background: var(--surface-2) !important; border-color: var(--line); }
html[data-theme="dark"] .search-box input { color: var(--ink); }
html[data-theme="dark"] .rail-search { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .rail-search input { color: var(--ink); }
html[data-theme="dark"] .rail-assignee:hover { background: var(--hover); }

/* kpi interactive states */
html[data-theme="dark"] .kpi:hover { background: var(--hover) !important; }
html[data-theme="dark"] .kpi.active { background: var(--neutral-bg) !important; }

/* ---- active rail-count badge (tasks-v2 uses .rail-count not .count) ---- */
html[data-theme="dark"] .rail-item.active .rail-count { background: #ededea; color: #1a1714; }

/* ---- pills ---- */
/* linked-pill / archived-pill in messages-v2 use hardcoded slate palette */
html[data-theme="dark"] .linked-pill { background: var(--neutral-bg); color: var(--ink-2); }
html[data-theme="dark"] .archived-pill { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }

/* ---- notes editor (Tiptap / ProseMirror) ---- */
/* belt-and-suspenders: .vairo-notes-editor uses var(--color-bg-primary) but
   also override the ProseMirror div which Tiptap renders with a white bg */
html[data-theme="dark"] .vairo-notes-editor { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .vairo-notes-editor .tiptap,
html[data-theme="dark"] .ProseMirror { background: transparent !important; color: var(--ink) !important; }
html[data-theme="dark"] .vairo-toolbar { border-color: var(--line-2); }
html[data-theme="dark"] .vairo-toolbar-btn:hover { background: var(--hover); color: var(--ink); }
html[data-theme="dark"] .vairo-toolbar-btn.active { background: var(--neutral-bg); color: var(--ink); }
html[data-theme="dark"] .vairo-toolbar-dropdown,
html[data-theme="dark"] .vairo-toolbar-heading-dropdown { background: var(--surface); border-color: var(--line); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
html[data-theme="dark"] .vairo-toolbar-heading-item:hover { background: var(--hover); }

/* ---- drawer focus states that harden to #fff ---- */
html[data-theme="dark"] .drawer-desc-editor { background: transparent !important; }
html[data-theme="dark"] .drawer-desc-editor:focus-within { background: var(--surface-2) !important; border-color: var(--ink-4) !important; }
html[data-theme="dark"] .desc-textarea:focus { background: var(--surface-2) !important; border-color: var(--ink-4) !important; color: var(--ink); }
html[data-theme="dark"] .cmt-input { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .cmt-ava { background: var(--surface-2); color: var(--ink-2); }
html[data-theme="dark"] .drawer-close:hover { background: var(--hover); color: var(--ink); }
html[data-theme="dark"] .field-val.editable:hover { background: var(--hover); }

/* ---- messages-v2 bottom bars ---- */
html[data-theme="dark"] .mr-comp-foot { background: var(--surface-2); border-color: var(--line-2); }
html[data-theme="dark"] .mr-toolbar { background: var(--surface-2); border-color: var(--line-2); }
html[data-theme="dark"] .composer-attachments { background: var(--surface-2); border-color: var(--line-2); }
html[data-theme="dark"] .mr-field { border-color: var(--line-2); }
html[data-theme="dark"] .mr-field .k { color: var(--ink-3); }
html[data-theme="dark"] .mr-field .v input { background: transparent; color: var(--ink); }

/* ---- checkboxes / interactive controls ---- */
html[data-theme="dark"] .task-cb { background: var(--surface); border-color: var(--ink-4); }

/* ---- modals / overlays / toasts / dropdowns ---- */
html[data-theme="dark"] .modal-box { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
html[data-theme="dark"] .toast { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
html[data-theme="dark"] .combobox-list { background: var(--surface); border-color: var(--line); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
html[data-theme="dark"] .combobox-opt:hover,
html[data-theme="dark"] .combobox-opt.active { background: var(--hover); }

/* ---- floating theme toggle (injected by theme.js if used standalone) ---- */
.vairo-theme-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: 9999;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform .12s ease, background .12s ease;
}
.vairo-theme-toggle:hover { transform: translateY(-1px); color: var(--ink); }
.vairo-theme-toggle svg { width: 19px; height: 19px; }