/* ═══════════════════════════════════════════════════════════════════════
   APPLE "LIQUID GLASS" THEME — experimental, branch-only visual layer
   ═══════════════════════════════════════════════════════════════════════
   Goal: bring an Apple-style frosted-glass feel (think macOS Big Sur /
   visionOS "Liquid Glass") to the app's chrome — sidebar, top bar, cards,
   modals, dropdowns, pill controls — WITHOUT a full redesign. Deliberately
   restrained: brand colors (navy/amber), type, icons, spacing and layout
   are all untouched. Only surface treatment changes:
     - translucent, blurred panels instead of flat opaque ones
     - a soft multi-tone gradient wash behind everything so the blur has
       something gentle to show through
     - fully rounded ("pill") buttons and larger panel corner radii
     - a thin inner highlight border + soft shadow, mimicking glass edges

   Loaded LAST, after design-system.css and after dashboard/base.html's own
   inline <style> blocks render (same document, later in source order), so
   its rules need `!important` on the handful of properties that redefine
   an already-styled selector (e.g. `.sidebar`, `.card`) — this file is
   intentionally scoped to just background/border/shadow/blur/radius, never
   layout, spacing, color of text, or behavior, so removing this one file
   (or reverting this branch) fully restores the current look with zero
   other changes required.

   Browser support: backdrop-filter is supported in all evergreen browsers
   (Safari, Chrome, Edge, Firefox 103+). Where unsupported, panels simply
   fall back to their existing solid background — no breakage, just less
   translucency.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ Ambient backdrop — soft, slow-moving gradient wash ═══════════════════
   Apple's glass effect reads as "glass" only when there's gentle color
   movement behind it. This sits fixed behind all content, far enough from
   pure white/gray that frosted panels in front of it visibibly pick up a
   soft tint, but calm enough to stay out of the way of reading text. */
body {
  background:
    radial-gradient(1100px 650px at 8% -10%, rgba(217, 142, 32, 0.10), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(45, 88, 130, 0.12), transparent 55%),
    radial-gradient(900px 600px at 50% 120%, rgba(91, 79, 198, 0.08), transparent 60%),
    var(--surface-3, #EFF3F7) !important;
  background-attachment: fixed;
}

/* ═══ Sidebar — frosted glass panel ════════════════════════════════════════ */
.sidebar {
  background: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.6) inset,
    var(--shadow-xl, 0 16px 48px rgba(0, 0, 0, 0.16)) !important;
}

.sidebar-header {
  background: rgba(255, 255, 255, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.sidebar-logo-wrapper {
  background: rgba(255, 255, 255, 0.5) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.theme-toggle-sidebar {
  background: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.theme-option.active {
  background: rgba(255, 255, 255, 0.8) !important;
}

.logout-link {
  background: rgba(197, 48, 48, 0.08) !important;
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(217, 142, 32, 0.16) 0%, rgba(217, 142, 32, 0.02) 100%) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.55) !important;
}

/* ═══ Sticky top/hero bar — frosted, like macOS's translucent toolbar ═════ */
.hero-header {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* ═══ Cards — the single most common surface across the app ═══════════════ */
.card,
.dms-card {
  background: rgba(255, 255, 255, 0.58) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: var(--radius-xl, 20px) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1)) !important;
}

.card-header,
.dms-card-header {
  background: rgba(255, 255, 255, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* ═══ Modals, dropdowns, popovers — frosted overlays ═══════════════════════ */
.modal-content {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: var(--radius-2xl, 28px) !important;
}

.modal-backdrop.show {
  opacity: 0.35 !important;
}

.dropdown-menu,
.select2-dropdown {
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: var(--radius-lg, 14px) !important;
}

/* ═══ Buttons — rounded into pills, subtle glass sheen on outline/light
   variants only. Solid brand buttons (primary/success/danger) keep their
   flat brand color — per Apple's own HIG, filled controls stay opaque for
   legibility; translucency is reserved for chrome, not calls to action. */
.btn,
.dms-btn {
  border-radius: 999px !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.dms-btn-secondary {
  background: rgba(255, 255, 255, 0.5) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Pills/badges read very "Apple" already rounded -- just add a touch of
   glass to the neutral/gray ones so they don't look flat next to glass
   cards. Colored status pills keep their solid tint for scannability. */
.dms-pill-gray,
.badge.bg-secondary,
.badge.text-bg-secondary {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ═══ Inputs — soft glass fields instead of flat white ═════════════════════ */
.form-control,
.form-select {
  background: rgba(255, 255, 255, 0.6) !important;
}
.form-control:focus,
.form-select:focus {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* ═══ Reduced-motion / no-backdrop-filter fallback ══════════════════════════
   If the browser can't blur, raise the opacity so panels stay readable
   solid surfaces instead of a washed-out translucent smear. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .card, .dms-card, .modal-content, .dropdown-menu, .select2-dropdown, .hero-header {
    background: rgba(255, 255, 255, 0.94) !important;
  }
}

/* ═══ Dark mode — same glass idea, dark smoked glass instead of frosted
   white, so it stays legible/on-brand with dashboard/base.html's existing
   [data-theme="dark"] palette instead of pasting a bright white panel onto
   a dark page. ═══════════════════════════════════════════════════════ */
[data-theme="dark"] body {
  background:
    radial-gradient(1100px 650px at 8% -10%, rgba(199, 161, 90, 0.10), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(90, 115, 144, 0.14), transparent 55%),
    radial-gradient(900px 600px at 50% 120%, rgba(91, 79, 198, 0.10), transparent 60%),
    var(--surface-3, #0F1B28) !important;
  background-attachment: fixed;
}

[data-theme="dark"] .sidebar {
  background: rgba(20, 28, 38, 0.6) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04) inset, var(--shadow-xl) !important;
}
[data-theme="dark"] .sidebar-header { background: rgba(20, 28, 38, 0.4) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
[data-theme="dark"] .sidebar-logo-wrapper,
[data-theme="dark"] .theme-toggle-sidebar { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, 0.06) !important; }
[data-theme="dark"] .hero-header { background: rgba(20, 28, 38, 0.55) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
[data-theme="dark"] .card,
[data-theme="dark"] .dms-card {
  background: rgba(26, 35, 46, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, var(--shadow-md) !important;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .dms-card-header { background: rgba(255, 255, 255, 0.03) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
[data-theme="dark"] .modal-content { background: rgba(22, 30, 40, 0.78) !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .select2-dropdown { background: rgba(26, 35, 46, 0.85) !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .dms-btn-secondary { background: rgba(255, 255, 255, 0.06) !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background: rgba(255, 255, 255, 0.05) !important; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { background: rgba(255, 255, 255, 0.1) !important; }

/* road_authority/dashboard.html hardcodes `.budget-depleted` / `.budget-healthy`
   row backgrounds as pale solid hex (#fef2f2 / #f0fdf4) with `!important`,
   so in dark mode the app's light-colored body/muted text (meant to read on
   dark surfaces) renders as low-contrast grey-on-pale-pastel. Re-tint the
   same rows with translucent red/green over the dark surface instead (keeps
   the healthy/depleted color cue) and force dark-safe text color inside them. */
[data-theme="dark"] .budget-depleted {
  background: rgba(239, 68, 68, 0.14) !important;
  border-left-color: #f87171 !important;
}
[data-theme="dark"] .budget-healthy {
  background: rgba(34, 197, 94, 0.14) !important;
  border-left-color: #4ade80 !important;
}
[data-theme="dark"] .budget-depleted td,
[data-theme="dark"] .budget-healthy td,
[data-theme="dark"] .budget-depleted td small,
[data-theme="dark"] .budget-healthy td small {
  color: var(--ink-1, #e8f0fb) !important;
}
[data-theme="dark"] .budget-depleted td.text-muted,
[data-theme="dark"] .budget-healthy td.text-muted,
[data-theme="dark"] .budget-depleted small.text-muted,
[data-theme="dark"] .budget-healthy small.text-muted {
  color: var(--ink-3, #9ab0c4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX: invisible / low-contrast text in dark mode
   ═══════════════════════════════════════════════════════════════════════
   Root cause #1 — design-system.css defines its own `--ink-1..4` /
   `--surface*` / `--border*` tokens at a plain `:root` and never updates
   them for dark mode (it only ever shipped a light theme). Every `.dms-*`
   component, `.form-label`, `.btn-outline-secondary`, `.badge.bg-secondary`
   and the table header/body read one of those tokens directly, so they
   kept rendering near-black text regardless of the app's own `data-theme`.
   Re-pointing the same custom properties at dark-appropriate values here
   (matching dashboard/base.html's own dark palette) fixes every consumer
   in one place instead of patching each selector individually.
   `:root[data-theme="dark"]` outranks a plain `:root` on specificity, so
   this applies regardless of CSS source order. */
:root[data-theme="dark"] {
  --canvas: #1A1F2E;
  --surface: #1A1F2E;
  --surface-2: #222838;
  --surface-3: #2A3245;
  --border: #2A3245;
  --border-2: #323D52;
  --ink-1: #E8F0FB;
  --ink-2: #C8D6E5;
  --ink-3: #9AB0C4;
  --ink-4: #6B85A0;
}

/* Root cause #2 — Bootstrap 5.3's own dark-mode variables (used inside
   modals, dropdowns, pagination, plain <label>/<small>, and form controls
   that don't go through design-system.css) are gated behind Bootstrap's
   own `data-bs-theme="dark"` attribute, which this app's theme switcher
   wasn't setting (see dashboard/base.html's themeManager/themeSelect —
   now mirrors data-theme onto data-bs-theme). That one attribute fixes
   Bootstrap's internal components; nothing further needed here for those. */

/* ═══════════════════════════════════════════════════════════════════════
   UNIFORM TYPE — one font family everywhere (Apple-style minimalism)
   ═══════════════════════════════════════════════════════════════════════
   design-system.css and a few inline rules in dashboard/base.html set a
   secondary "accent" serif (Playfair Display) on headings/titles/KPI
   numbers, which reads as mixed/inconsistent rather than minimalist.
   Apple's own interfaces use exactly one type family throughout; this
   collapses everything back to the sans stack already loaded site-wide. */
h1, h2, h3, .card-header, .card-title, .modal-title, .page-title, .hero-title,
.dms-page-title, .dms-kpi-value, .ph-title, .kpi-val, .dt-count, .m-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTTOM TAB BAR — Instagram-style primary mobile navigation
   ═══════════════════════════════════════════════════════════════════════
   Fixed, icon-first, 5-destination bar shown only at phone/tablet widths
   (same <1024px breakpoint dashboard/base.html already uses to switch the
   sidebar to its off-canvas/overlay mode). Replaces the old floating
   circular "hamburger" button as the primary mobile way to reach the full
   menu -- that button is hidden here rather than removed from the markup,
   so reverting this file alone fully restores it. Glass-matched: same
   blur/translucency family as the sidebar/top bar above.

   Floats as an inset capsule (iOS 18/"Liquid Glass" tab-bar style) rather
   than a flush full-bleed strip, and compacts -- shrinking height/padding
   and fading its text labels down to icon-only -- once the page has been
   scrolled, so it reclaims vertical space instead of permanently occupying
   a fixed-height band. A small `app.js`-less scroll listener in base.html
   toggles the `.scrolled` class that drives this (see "SHRINK ON SCROLL"
   comment in base.html's inline script). Expands back the moment the user
   scrolls back up near the top. */
.bottom-tab-bar {
  display: none;
}

@media (max-width: 1023px) {
  .mobile-menu-btn {
    display: none !important;
  }

  .bottom-tab-bar {
    display: flex;
    align-items: stretch;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1002;
    height: 60px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    transition: height 0.25s ease, border-radius 0.25s ease, bottom 0.25s ease, box-shadow 0.25s ease;
  }

  [data-theme="dark"] .bottom-tab-bar {
    background: rgba(20, 28, 38, 0.72);
    border-color: rgba(255, 255, 255, 0.1);
  }

  /* Sidebar-open state (JS-driven, see base.html's openSidebar/closeSidebar):
     the tab bar's z-index (1002) sits above the sidebar (1000) so it reads
     correctly over the off-canvas slide-in animation, but that same
     stacking was hiding the sidebar's own footer (Logout button) behind
     it whenever the sidebar was open. Simply hide the tab bar for that
     brief state instead. */
  .bottom-tab-bar.is-hidden-for-sidebar {
    display: none;
  }

  /* Compact state: triggered by JS once the page scrolls past a small
     threshold. Shrinks the capsule and hides text labels, leaving a
     smaller icon-only strip that wastes far less screen space. */
  .bottom-tab-bar.scrolled {
    height: 46px;
    border-radius: 23px;
  }

  /* `:not(.bottom-tab-icon-wrap)` matters here -- the Alerts tab wraps its
     bell icon in a <span class="bottom-tab-icon-wrap"> (so the unread
     badge can be absolutely positioned against it). Without this
     exclusion, that icon span was being collapsed/hidden along with the
     text labels below, making the Alerts icon disappear on scroll. */
  .bottom-tab-bar.scrolled .bottom-tab-item > span:not(.bottom-tab-icon-wrap) {
    max-height: 0;
    opacity: 0;
    margin: 0;
  }

  .bottom-tab-bar.scrolled .bottom-tab-item i {
    font-size: 1.25rem;
    margin-bottom: 0;
  }

  /* Content needs room at the bottom so the floating bar never covers the
     last bit of page content; sized for the bar's expanded state (the
     compact state only needs less, which just adds a little extra
     breathing room). */
  .main-content {
    padding-bottom: calc(60px + 24px + env(safe-area-inset-bottom, 0px));
  }

  /* Keep the chat/settings FABs above the floating tab bar. */
  .fab-container {
    bottom: calc(60px + 24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.bottom-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #7A93A8);
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 500;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Note: the height/padding/font-size transitions in this block and in the
   "shrink on scroll" header section below do animate layout properties.
   That's intentional here, not an oversight -- the feature itself is "this
   element's footprint actually gets smaller", which needs a real height
   change, not a transform. Cost is low because it's a single class toggle
   per threshold crossing (driven by a rAF-throttled scroll listener), not
   a continuous per-frame animation, so there's no scroll-linked thrash. */
.bottom-tab-item i {
  font-size: 1.15rem;
  line-height: 1;
  margin-bottom: 1px;
  transition: font-size 0.2s ease, margin 0.2s ease;
}

.bottom-tab-item > span:not(.bottom-tab-icon-wrap) {
  transition: opacity 0.15s ease, max-height 0.2s ease, margin 0.2s ease;
  max-height: 12px;
}

.bottom-tab-item.active {
  color: var(--amber-500, #D98E20);
}

.bottom-tab-icon-wrap {
  position: relative;
  display: inline-flex;
}

.bottom-tab-badge {
  position: absolute;
  top: -6px;
  right: -10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOP HEADER — shrink on scroll
   ═══════════════════════════════════════════════════════════════════════
   The sticky hero header (page title/breadcrumb/meta/date) stays at full
   size while at the top of the page, then compacts once scrolled -- less
   padding, a smaller title, and the breadcrumb/meta/date rows collapsed
   away -- so it behaves like a native iOS "large title that condenses"
   bar instead of permanently eating a fixed slice of the viewport. */
.hero-header {
  transition: padding 0.2s ease;
}

.hero-title {
  transition: font-size 0.2s ease;
}

.hero-breadcrumb,
.hero-assignment-info,
.hero-meta {
  transition: opacity 0.15s ease, max-height 0.2s ease, margin 0.2s ease;
  overflow: hidden;
}

.hero-header.scrolled {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.hero-header.scrolled .hero-title {
  font-size: 1rem;
}

.hero-header.scrolled .hero-breadcrumb,
.hero-header.scrolled .hero-assignment-info,
.hero-header.scrolled .hero-meta {
  opacity: 0;
  max-height: 0;
  margin: 0;
}

/* ═══ Dark-mode contrast safeguards ═══════════════════════════════════════
   Some page templates still declare light-only tokens and literal white
   surfaces after this global stylesheet. Keep the shared dark palette
   authoritative, then cover common controls and the map/calendar panels. */
:root[data-theme="dark"] {
  --canvas: #1A1F2E !important;
  --surface: #1A1F2E !important;
  --surface-2: #222838 !important;
  --surface-3: #2A3245 !important;
  --border: #354055 !important;
  --border-2: #46536B !important;
  --ink-1: #E8F0FB !important;
  --ink-2: #C8D6E5 !important;
  --ink-3: #A9BCD0 !important;
  --ink-4: #8B9DB3 !important;
  --blue: #8BBBF0 !important;
  --blue-lt: rgba(59, 130, 246, 0.18) !important;
  --blue-mid: #6EA8EF !important;
  --blue-border: #45688F !important;
  --green: #70D6A2 !important;
  --green-lt: rgba(34, 197, 94, 0.16) !important;
  --green-mid: #50C98A !important;
  --green-border: #376B50 !important;
  --amber: #F0BD68 !important;
  --amber-lt: rgba(217, 142, 32, 0.16) !important;
  --amber-mid: #E0A43D !important;
  --amber-border: #806233 !important;
  --red: #F08080 !important;
  --red-lt: rgba(239, 68, 68, 0.16) !important;
  --red-mid: #F07171 !important;
  --red-border: #7C4149 !important;
  --purple: #B3A8FF !important;
  --purple-lt: rgba(123, 111, 212, 0.18) !important;
  --purple-mid: #9A8CEB !important;
  --purple-border: #5B548D !important;
  --teal: #66CCCC !important;
  --teal-lt: rgba(42, 157, 157, 0.18) !important;
  --teal-mid: #4DB8B8 !important;
  --teal-border: #3E7474 !important;
  --text-primary: #E8F0FB !important;
  --text-secondary: #C8D6E5 !important;
  --text-tertiary: #A9BCD0 !important;
  --text-muted: #9AACC1 !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-body-secondary,
[data-theme="dark"] label,
[data-theme="dark"] small,
[data-theme="dark"] .form-text,
[data-theme="dark"] .form-label {
  color: var(--ink-3) !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] .text-body-emphasis {
  color: var(--ink-1) !important;
}

[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .btn-outline-info,
[data-theme="dark"] .btn-outline-success,
[data-theme="dark"] .btn-outline-warning,
[data-theme="dark"] .btn-outline-danger {
  color: var(--ink-1);
  border-color: var(--border-2);
}

[data-theme="dark"] .pagination .page-link,
[data-theme="dark"] .paginate_button,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter {
  color: var(--ink-2) !important;
}

[data-theme="dark"] .pagination .page-link,
[data-theme="dark"] .paginate_button {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link,
[data-theme="dark"] .paginate_button.disabled {
  color: var(--ink-4) !important;
  background: var(--surface) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  color: var(--ink-1) !important;
  background: #222838 !important;
  border-color: var(--border-2) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection__placeholder,
[data-theme="dark"] .select2-container--default .select2-selection__arrow {
  color: var(--ink-2) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--ink-2);
  background: #1A1F2E;
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: #fff;
  background: #345987;
}

[data-theme="dark"] .badge.bg-secondary,
[data-theme="dark"] .badge.text-bg-secondary,
[data-theme="dark"] .status-badge,
[data-theme="dark"] .status-pill {
  color: var(--ink-1) !important;
}

[data-theme="dark"] .notification-badge,
[data-theme="dark"] .notification-count,
[data-theme="dark"] .bottom-tab-badge {
  color: #fff !important;
}

/* Project map templates contain literal light panel surfaces and text. */
[data-theme="dark"] .pm-panel,
[data-theme="dark"] .pm-filter-bar,
[data-theme="dark"] #coordEditPanel {
  color: var(--ink-1);
  background: rgba(26, 35, 46, 0.92) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .pm-missing-item,
[data-theme="dark"] .pm-filter-label,
[data-theme="dark"] .pm-filter-count span,
[data-theme="dark"] .pm-panel h6,
[data-theme="dark"] .pm-empty,
[data-theme="dark"] .pm-missing-item .pm-name {
  color: var(--ink-2) !important;
}

[data-theme="dark"] .pm-missing-item .pm-code,
[data-theme="dark"] .pm-empty {
  color: var(--ink-3) !important;
}

[data-theme="dark"] .pm-status-badge {
  color: #C7D2FE !important;
  background: #30345B !important;
}

/* FullCalendar and its surrounding page panels use hardcoded light values. */
[data-theme="dark"] .projects-cal-canvas,
[data-theme="dark"] .pc-panel {
  color: var(--ink-1);
  background: rgba(26, 35, 46, 0.92) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .pc-panel h6,
[data-theme="dark"] .pc-legend-item,
[data-theme="dark"] .pc-undated-item .pm-name,
[data-theme="dark"] .fc .fc-toolbar-title,
[data-theme="dark"] .fc .fc-col-header-cell-cushion,
[data-theme="dark"] .fc .fc-daygrid-day-number,
[data-theme="dark"] .fc .fc-list-day-text,
[data-theme="dark"] .fc .fc-list-day-side-text {
  color: var(--ink-1) !important;
}

[data-theme="dark"] .pc-undated-item,
[data-theme="dark"] .pc-undated-item .pm-code,
[data-theme="dark"] .pc-empty,
[data-theme="dark"] .fc .fc-daygrid-day,
[data-theme="dark"] .fc .fc-timegrid-slot,
[data-theme="dark"] .fc .fc-list,
[data-theme="dark"] .fc .fc-list-table td,
[data-theme="dark"] .fc-theme-standard td,
[data-theme="dark"] .fc-theme-standard th {
  color: var(--ink-3) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .fc .fc-button-primary {
  color: var(--ink-1) !important;
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
}

[data-theme="dark"] .fc .fc-button-primary:hover {
  background: var(--surface-3) !important;
}

[data-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active {
  color: #fff !important;
  background: #345987 !important;
  border-color: #345987 !important;
}

[data-theme="dark"] .fc .fc-day-today {
  background: rgba(217, 142, 32, 0.12) !important;
}