/* ===========================================================================
   Dark theme — ticket #134, Phase A + B.

   Loaded LAST in index.html. Every rule is scoped to html[data-theme="dark"],
   so with no attribute (or data-theme="light") this file contributes nothing
   and the app renders exactly as before.

   Specificity note: html[data-theme="dark"] is (0,1,1), which beats :root
   (0,1,0) regardless of file order — so the global token block below wins over
   styles.css and over the page-level :root blocks (video-page.css) too.

   Structure:
     1. Global tokens (styles.css :root)
     2. Shared tokens that are consumed via var() but never declared anywhere
     3. Shell chrome written with bare literals in styles.css
     4. Scoped token sets  (--vd-*, --mb-*, --rot-*, --accent/--chip)
     5. Vendor widgets     (quill, flatpickr, gridstack)
     6. Scrims + shadows
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Global tokens — the 1,541 var() consumers across the app follow these.
   Only colour/elevation tokens are re-declared; typography, radii, spacing and
   sidebar geometry are theme-neutral and stay on the :root values.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #0f172a;   /* page / sidebar background */
  --color-secondary: #1e293b; /* raised surface            */

  /* Brand orange stays orange. #f5a623 on #0f172a is 8.7:1, well clear of AA
     for text and icon use. --color-accent-dark is lifted from #d4791a to
     #e08a2a so the gradient and the button hover state do not go muddy against
     a dark surface. */
  --color-accent-light: #f5a623;
  --color-accent-dark: #e08a2a;
  --accent-gradient: linear-gradient(to top, var(--color-accent-light), var(--color-accent-dark));

  --text-primary: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;

  --ui-border: #334155;
  /* Soft border flips polarity: a dark translucent hairline is invisible on a
     dark surface, so this becomes a light translucent one. */
  --ui-border-soft: rgba(148, 163, 184, 0.14);
  --border-color: #334155;
  --card-bg: #1e293b;
  /* Edit-affordance tint needs a brighter blue and more alpha to read on dark. */
  --edit-hover: rgba(96, 165, 250, 0.16);
}

/* ---------------------------------------------------------------------------
   2. Tokens consumed via var() with a fallback but never declared. In light
   mode they always resolve to the fallback literal; declaring them here is the
   cheapest large win in the whole file (--accent-color alone has 24 sites).
   --------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --accent-color: #60a5fa;      /* light fallback #3b82f6 */
  --hover-bg: #334155;          /* light fallback #f1f5f9 */
  --muted: #94a3b8;             /* light fallback #64748b */
  --border: #334155;            /* light fallback #e2e8f0 / #cbd5e1 */
  --pa-fb-border: #475569;      /* light fallback #cbd5e1 */
  --dept: #94a3b8;              /* light fallback #6b7280 */
}

/* --accent-color is used as a foreground in 22 of its 24 sites, hence the
   lighter blue. The two places it backs white text need a dark foreground
   instead, or the pair drops to 2.5:1. */
html[data-theme="dark"] .dashboard-tab.active,
html[data-theme="dark"] .a4p-btn-primary {
  color: #0b1220;
}
html[data-theme="dark"] .dashboard-tab:hover {
  background: rgba(96, 165, 250, 0.10);
  border-color: rgba(96, 165, 250, 0.35);
}

/* ---------------------------------------------------------------------------
   3. Shell chrome. These few selectors in styles.css are written with bare
   literals rather than tokens, and they are the app frame — the sidebar, the
   nav, the content card — so they cannot wait for Phase C.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .nav-item {
  color: var(--text-secondary);
}
html[data-theme="dark"] .nav-item:hover,
html[data-theme="dark"] .mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .nav-item.active {
  background: var(--card-bg);
  color: var(--text-primary);
}
html[data-theme="dark"] .user-avatar-btn {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .user-avatar-placeholder {
  color: #f87171;
}
/* .card's effective background is a 4% blue wash over the page, not
   --color-secondary. Mirror that subtlety rather than making it a hard slab. */
html[data-theme="dark"] .card {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .confirm-modal-cancel:hover {
  background: #475569;
}

/* ---------------------------------------------------------------------------
   4a. Video department — declared on :root in pages/video/video-page.css.
   Status pills keep their hue semantics (cold blue, warm amber, active green,
   alert red, mute slate) and flip to a translucent tinted background with a
   light readable foreground. Each pairing is >= 6.9:1 over --vd-surface.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --vd-st-cold-bg:   rgba(59, 130, 246, 0.16);  --vd-st-cold-fg:   #93c5fd;
  --vd-st-warm-bg:   rgba(249, 115, 22, 0.16);  --vd-st-warm-fg:   #fdba74;
  --vd-st-active-bg: rgba(34, 197, 94, 0.16);   --vd-st-active-fg: #86efac;
  --vd-st-alert-bg:  rgba(239, 68, 68, 0.18);   --vd-st-alert-fg:  #fca5a5;
  --vd-st-mute-bg:   rgba(148, 163, 184, 0.14); --vd-st-mute-fg:   #cbd5e1;

  --vd-surface:   #1e293b;
  --vd-surface-2: #172033;
  --vd-border:    #334155;
  --vd-border-2:  #475569;
  --vd-text:      #e2e8f0;
  --vd-text-2:    #a9b4c4;
  --vd-text-3:    #7d8a9c;

  --vd-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --vd-shadow-2: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* 4b. Meeting booking — tokens are declared twice in meeting-booking.css: on
   .mb-root, and again on .mb-modal-backdrop because modals mount on
   document.body outside .mb-root. Both scopes are mirrored here. The brand
   green inverts from a dark ink green to a light sage that reads on slate. */
html[data-theme="dark"] .mb-root,
html[data-theme="dark"] .mb-modal-backdrop {
  --mb-green: #86c9a0;
  --mb-green-soft: #5fae82;
  --mb-border: #33403a;
  --mb-mine: #4ea277;
  --mb-mine-soft: rgba(78, 162, 119, 0.22);
  --mb-blocked: #f08b83;
}
/* .mb-root, .mb-muted and the modal surfaces are literal-coloured. */
html[data-theme="dark"] .mb-root {
  color: var(--text-primary);
}
html[data-theme="dark"] .mb-muted,
html[data-theme="dark"] .mb-modal-when {
  color: var(--text-muted);
}
html[data-theme="dark"] .mb-modal {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

/* 4c. Office rotation — declared on .rot-page. --rot-border/-text/-text-2/
   -text-mut/-surface already read the global tokens, so they follow section 1
   automatically and are deliberately not repeated. Only the literal-valued
   accent, pill and shadow tokens need flipping. B3 stays blue, B4 stays green,
   leave stays amber, birthday stays pink. */
html[data-theme="dark"] .rot-page {
  --rot-accent: #f5a623;
  --rot-accent-dark: #e08a2a;
  --rot-blue: #60a5fa;

  --rot-shadow: 0 2px 12px rgba(0, 0, 0, 0.50);
  --rot-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);

  --rot-b3-bg: rgba(59, 130, 246, 0.18);  --rot-b3-fg: #93c5fd;  --rot-b3-br: rgba(59, 130, 246, 0.38);
  --rot-b4-bg: rgba(34, 197, 94, 0.18);   --rot-b4-fg: #86efac;  --rot-b4-br: rgba(34, 197, 94, 0.38);
  --rot-shoot-bg: #15803d;                --rot-shoot-fg: #ecfdf5;
  --rot-event-bg: #16a34a;                --rot-event-fg: #f0fdf4;
  --rot-leave-bg: rgba(245, 158, 11, 0.18); --rot-leave-fg: #fcd34d; --rot-leave-br: rgba(245, 158, 11, 0.38);
  --rot-bday-bg: rgba(236, 72, 153, 0.18);  --rot-bday-fg: #f9a8d4; --rot-bday-br: rgba(236, 72, 153, 0.38);
  --rot-weekend-bg: rgba(255, 255, 255, 0.04);
}

/* 4d. Magazine overview — --accent and --chip are component-scoped, set per
   modifier class to carry the state hue. The chip mixes its hue against a
   hardcoded #fff, which has to be re-mixed against the dark page instead. */
html[data-theme="dark"] .mag-ov-tabs {
  border-bottom-color: rgba(148, 163, 184, 0.16);
}
html[data-theme="dark"] .mag-ov-tab {
  --accent: #9ca3af;
  background: var(--card-bg);
  border-color: rgba(148, 163, 184, 0.18);
}
html[data-theme="dark"] .mag-ov-tab.is-active {
  /* The active tab's background stays the saturated per-state accent (set by
     the modifier class), so white text keeps the better contrast there. */
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .mag-ov-chip {
  background: color-mix(in srgb, var(--chip) 22%, #0f172a);
  border-color: color-mix(in srgb, var(--chip) 45%, #0f172a);
}
html[data-theme="dark"] .mag-ov-chip--complete {
  --chip: #4ade80;
  background: rgba(74, 222, 128, 0.16);
  border-color: rgba(74, 222, 128, 0.40);
  color: #86efac;
}

/* ---------------------------------------------------------------------------
   5. Vendor widgets. quill.snow.css and flatpickr.min.css are third-party and
   must never be edited, so their surfaces are overridden here. Each override
   repeats the vendor's own selector shape with the theme prefix, which raises
   specificity by (0,1,1) and wins independently of load order.
   --------------------------------------------------------------------------- */

/* Quill */
html[data-theme="dark"] .ql-toolbar.ql-snow {
  background: #1e293b;
  border-color: #334155;
}
html[data-theme="dark"] .ql-container.ql-snow {
  background: #111c2e;
  border-color: #334155;
  color: var(--text-primary);
}
html[data-theme="dark"] .ql-editor {
  color: var(--text-primary);
}
html[data-theme="dark"] .ql-editor.ql-blank::before {
  color: #7d8a9c;
}
html[data-theme="dark"] .ql-snow .ql-stroke,
html[data-theme="dark"] .ql-snow .ql-stroke-miter {
  stroke: #cbd5e1;
}
html[data-theme="dark"] .ql-snow .ql-fill,
html[data-theme="dark"] .ql-snow .ql-stroke.ql-fill {
  fill: #cbd5e1;
}
html[data-theme="dark"] .ql-snow .ql-picker {
  color: #cbd5e1;
}
html[data-theme="dark"] .ql-snow .ql-picker-options {
  background: #1e293b;
  border-color: #334155;
}
html[data-theme="dark"] .ql-snow .ql-picker.ql-expanded .ql-picker-label,
html[data-theme="dark"] .ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #475569;
}
html[data-theme="dark"] .ql-snow.ql-toolbar button:hover,
html[data-theme="dark"] .ql-snow.ql-toolbar button.ql-active,
html[data-theme="dark"] .ql-snow.ql-toolbar .ql-picker-label:hover,
html[data-theme="dark"] .ql-snow.ql-toolbar .ql-picker-item:hover {
  color: var(--color-accent-light);
}
html[data-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-stroke,
html[data-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-stroke,
html[data-theme="dark"] .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke {
  stroke: var(--color-accent-light);
}
html[data-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-fill,
html[data-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--color-accent-light);
}
html[data-theme="dark"] .ql-snow .ql-tooltip {
  background: #1e293b;
  border-color: #334155;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
  background: #111c2e;
  border-color: #334155;
  color: var(--text-primary);
}

/* Flatpickr */
html[data-theme="dark"] .flatpickr-calendar {
  background: #1e293b;
  color: var(--text-primary);
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .flatpickr-calendar.arrowTop:before,
html[data-theme="dark"] .flatpickr-calendar.arrowTop:after {
  border-bottom-color: #1e293b;
}
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:before,
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:after {
  border-top-color: #1e293b;
}
html[data-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-theme="dark"] .flatpickr-current-month,
html[data-theme="dark"] .flatpickr-current-month input.cur-year {
  background: transparent;
  color: var(--text-primary);
  fill: var(--text-primary);
}
html[data-theme="dark"] .flatpickr-weekdays,
html[data-theme="dark"] .flatpickr-weekday {
  background: transparent;
  color: var(--text-muted);
  fill: var(--text-muted);
}
html[data-theme="dark"] .flatpickr-day {
  color: #e2e8f0;
}
html[data-theme="dark"] .flatpickr-day:hover,
html[data-theme="dark"] .flatpickr-day:focus {
  background: #334155;
  border-color: #334155;
}
html[data-theme="dark"] .flatpickr-day.today {
  border-color: var(--color-accent-light);
}
html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.selected:hover,
html[data-theme="dark"] .flatpickr-day.startRange,
html[data-theme="dark"] .flatpickr-day.endRange {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
  color: #1a1a1a;
}
html[data-theme="dark"] .flatpickr-day.inRange {
  background: #334155;
  border-color: #334155;
  box-shadow: -5px 0 0 #334155, 5px 0 0 #334155;
}
html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover {
  color: rgba(226, 232, 240, 0.32);
}
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
  fill: var(--text-secondary);
}
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--color-accent-light);
}
html[data-theme="dark"] .flatpickr-monthDropdown-months,
html[data-theme="dark"] .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: #1e293b;
  color: var(--text-primary);
}
html[data-theme="dark"] .flatpickr-time input,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm,
html[data-theme="dark"] .flatpickr-time .flatpickr-time-separator {
  background: transparent;
  color: var(--text-primary);
}
html[data-theme="dark"] .flatpickr-time input:hover,
html[data-theme="dark"] .flatpickr-time input:focus,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover {
  background: #334155;
}
html[data-theme="dark"] .numInputWrapper span {
  border-color: rgba(148, 163, 184, 0.3);
}
html[data-theme="dark"] .flatpickr-innerContainer,
html[data-theme="dark"] .flatpickr-rContainer,
html[data-theme="dark"] .flatpickr-days,
html[data-theme="dark"] .flatpickr-time {
  border-color: #334155;
}

/* Gridstack — the drag placeholder is its only coloured surface. */
html[data-theme="dark"] .grid-stack-placeholder > .placeholder-content {
  background: rgba(255, 255, 255, 0.10);
}

/* ---------------------------------------------------------------------------
   6. Scrims + shadows. A 40% black scrim over an already-dark page barely
   separates the modal from the backdrop, so the shared overlays are deepened
   and the modal shadow is strengthened.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .confirm-modal-overlay,
html[data-theme="dark"] .mobile-sidebar-backdrop,
html[data-theme="dark"] .mobile-tools-backdrop,
html[data-theme="dark"] .mb-modal-backdrop {
  background: rgba(0, 0, 0, 0.62);
}
html[data-theme="dark"] .confirm-modal {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}