/* css/dark-mode.css — all dark mode rules and mobile navbar theme fixes */

/* ================== LIGHT MODE MOBILE NAVBAR FIX ================== */
/* The navbar uses navbar-dark (white icons) but has a white background in light mode.
   This makes the hamburger icon and expanded menu links invisible on mobile. */

html:not(.dark-mode) .navbar .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.35);
}

html:not(.dark-mode) .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280%2C0%2C0%2C0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
  html:not(.dark-mode) .navbar .navbar-collapse {
    background-color: #ffffff;
    border-top: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  html:not(.dark-mode) .navbar .navbar-nav .btn-outline-light {
    color: var(--text-primary) !important;
    border-color: transparent !important;
    background-color: transparent !important;
  }

  html:not(.dark-mode) .navbar .navbar-nav .btn-outline-light:hover {
    background-color: transparent !important;
    color: var(--text-primary) !important;
  }

  html:not(.dark-mode) .navbar .navbar-nav .btn-outline-light.active {
    background-color: transparent !important;
    color: var(--primary-blue) !important;
    border-color: transparent !important;
  }
}

/* ================== DARK MODE MOBILE NAVBAR FIX ================== */

html.dark-mode .navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

html.dark-mode .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

@media (max-width: 991.98px) {
  html.dark-mode .navbar .navbar-collapse {
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }

  html.dark-mode .navbar .navbar-nav .btn-outline-light {
    color: #60a5fa !important;
    border-color: transparent !important;
    background-color: transparent !important;
  }

  html.dark-mode .navbar .navbar-nav .btn-outline-light:hover {
    background-color: transparent !important;
    color: #60a5fa !important;
  }

  html.dark-mode .navbar .navbar-nav .btn-outline-light.active {
    background-color: transparent !important;
    color: #60a5fa !important;
    border-color: transparent !important;
  }
}

/* ================== DARK MODE — CSS VARIABLES ================== */

.dark-mode {
  /* Backgrounds — slate-tinted (2026 refresh, Linear/Vercel/GitHub Dark feel) */
  --bg-primary: #0f172a;
  --bg-secondary: #111a2e;
  --bg-elevated: #1a2338;
  --card-bg: #172033;
  --input-bg: #111a2e;

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #e2e8f0;
  --text-muted: #a1a1aa;
  --placeholder-color: #71717a;

  /* Borders */
  --border-color: #27324a;
  --border-color-subtle: #334159;
  --input-border: #475569;

  /* Shadows */
  --shadow-light: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-hover: 0 6px 20px rgba(0,0,0,0.5);
  --navbar-shadow: 0 2px 8px rgba(0,0,0,0.4);
  --accent-blue: #60a5fa;

  /* Button accent colors */
  --primary-blue-rgb: 96, 165, 250;
  --primary-blue: #60a5fa;
  --primary-blue-hover: #93bbfd;
  --success-green: #4ade80;
  --danger-red: #f87171;
  --warning-yellow: #fbbf24;
  --secondary-gray: #adb5bd;
  --info-cyan: #67e8f9;
  --dark-charcoal: #adb5bd;

  /* Button rest-state text */
  --btn-warning-text: #fbbf24;
  --btn-info-text: #67e8f9;

  /* Button hover/active text */
  --btn-primary-hover-text: #000;
  --btn-success-hover-text: #000;
  --btn-warning-hover-text: #000;
  --btn-danger-hover-text: #fff;
  --btn-secondary-hover-text: #000;
  --btn-info-hover-text: #000;
  --btn-dark-hover-text: #000;

  /* Button hover/active shadows */
  --btn-primary-shadow: 0 2px 10px rgba(96, 165, 250, 0.3);
  --btn-success-shadow: 0 2px 10px rgba(74, 222, 128, 0.3);
  --btn-warning-shadow: 0 2px 10px rgba(251, 191, 36, 0.35);
  --btn-danger-shadow: 0 2px 10px rgba(248, 113, 113, 0.3);
  --btn-secondary-shadow: 0 2px 10px rgba(173, 181, 189, 0.25);
  --btn-info-shadow: 0 2px 10px rgba(103, 232, 249, 0.3);
  --btn-dark-shadow: 0 2px 10px rgba(173, 181, 189, 0.25);

  /* Tables */
  --table-bg: #172033;
  --table-stripe-bg: #1a2338;
  --table-header-bg: #1a2338;

  /* Alerts */
  --alert-info-bg: rgba(56, 189, 248, 0.08);
  --alert-info-border: rgba(56, 189, 248, 0.25);
  --alert-info-text: #e2e8f0;
  --alert-info-strong: #7dd3fc;
  --alert-warning-bg: rgba(251, 191, 36, 0.08);
  --alert-warning-border: rgba(251, 191, 36, 0.3);
  --alert-warning-text: #e2e8f0;
  --alert-warning-strong: #fbbf24;
  --alert-danger-bg: rgba(248, 113, 113, 0.08);
  --alert-danger-border: rgba(248, 113, 113, 0.25);
  --alert-danger-text: #e2e8f0;
  --alert-danger-strong: #f87171;

  /* Overlays (trip card internals) */
  --overlay-soft: rgba(255, 255, 255, 0.05);
  --overlay-border: rgba(255, 255, 255, 0.1);

  /* Utility tokens */
  --shadow-subtle: 0 1px 3px rgba(0,0,0,0.3);
  --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.35);
  --via-accent: #f59e0b;
  --via-accent-hover: #d97706;

  /* Trip-pair row tints (dark) */
  --trip-pair-1-bg: #3f4a52;
  --trip-pair-1-fg: #f1f5f9;
  --trip-pair-2-bg: #2f3840;
  --trip-pair-2-fg: #f1f5f9;
  --trip-unpaired-ha-bg: #78350f;
  --trip-unpaired-ha-fg: #fde68a;
  --trip-unpaired-ah-bg: #92400e;
  --trip-unpaired-ah-fg: #fef3c7;
  --trip-away-away-bg: #7f1d1d;
  --trip-away-away-fg: #fecaca;

  /* Trip leg box overlay (dark) */
  --trip-leg-bg: rgba(255,255,255,0.04);
  --trip-leg-border: rgba(255,255,255,0.09);

  /* VIA direction tokens (dark) */
  --via-away: #ef4444;
  --via-away-hover: #f87171;
  --via-home: #22c55e;
  --via-home-hover: #4ade80;
  --via-turn: #a855f7;
  --via-turn-hover: #c084fc;
  --via-dh: #94a3b8;
  --via-dh-hover: #cbd5e1;
  --via-rt-leftborder: #60a5fa;

  /* ================== 2026 REFRESH TOKENS — DARK (additive) ================== */
  /* Elevation — dark mode tints shadows warmer/deeper for the tinted backdrop */
  --elev-1: 0 1px 2px rgba(0,0,0,0.35);
  --elev-2: 0 2px 8px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.02);
  --elev-3: 0 10px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  --elev-4: 0 28px 56px rgba(0,0,0,0.65), 0 8px 16px rgba(0,0,0,0.40);

  /* Semantic accents (dark) — brighter rest colors, 10% bg / 30% border for contrast */
  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.10);
  --success-border: rgba(74, 222, 128, 0.30);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.10);
  --warning-border: rgba(251, 191, 36, 0.30);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.10);
  --danger-border: rgba(248, 113, 113, 0.30);
  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, 0.10);
  --info-border: rgba(56, 189, 248, 0.30);

  /* Brand accent (amber, dark) — matches existing --via-accent dark value */
  --accent-amber: #f59e0b;
  --accent-amber-hover: #d97706;
}

/* ================== DARK MODE — GLOBAL ================== */

.dark-mode body,
.dark-mode .container-fluid {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* ================== DARK MODE — BOOTSTRAP OVERRIDES ================== */
/* Bootstrap 5.3 sets background-color on individual td/th via high-specificity
   selectors (.table > :not(caption) > * > *). Variables alone can't win — need
   !important here, but we reference variables so maintenance stays easy. */

.dark-mode .card,
.dark-mode .compact-trip-card,
.dark-mode #trip_status,
.dark-mode .trip-status-box,
.dark-mode .trip-summary-card .card,
.dark-mode .table-container,
.dark-mode .modal-content {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  border-radius: 14px;
}

.dark-mode .card-header {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* Collapsed ticket rows: card-header is the only visible element, so match it
   to the parent card's bg + radius to hide the inner-rectangle offset that
   appears when the header's flat bottom and the card's rounded bottom diverge. */
.dark-mode .ticket-card > .card-header {
  background-color: var(--card-bg) !important;
  border-bottom-color: transparent !important;
  border-radius: 14px !important;
}

.dark-mode .modal-header {
  background-color: var(--bg-elevated) !important;
  border-bottom-color: var(--border-color) !important;
}

/* Tables — override Bootstrap cell-level background-color */
.dark-mode .table {
  background-color: var(--table-bg) !important;
  color: var(--text-primary) !important;
}

.dark-mode .table td,
.dark-mode .table th {
  background-color: var(--table-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.dark-mode .table thead th {
  background-color: var(--table-header-bg) !important;
}

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--table-stripe-bg) !important;
}

.dark-mode .table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: var(--table-bg) !important;
}

.dark-mode .sortable:hover { color: var(--primary-blue, #60a5fa); }

.dark-mode .week-separator td { border-top-color: #484850 !important; }

/* Form controls — override Bootstrap defaults */
.dark-mode .form-control {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--input-border) !important;
}

.dark-mode .form-select {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--input-border) !important;
}

.dark-mode .form-control::placeholder,
.dark-mode textarea::placeholder {
  color: var(--placeholder-color) !important;
}

/* Departure date composite */
.dark-mode .dep-date-inner {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}
.dark-mode .dep-date-inner:focus-within {
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
}
.dark-mode .dep-date-year-prefix {
  color: var(--text-muted);
}
.dark-mode .dep-date-mmdd {
  color: var(--text-primary);
}
.dark-mode .dep-date-mmdd::placeholder {
  color: var(--placeholder-color);
}
.dark-mode .dep-date-label {
  color: var(--text-muted);
}

/* DataTables pagination */
.dark-mode .dataTables_paginate .paginate_button {
  background-color: var(--border-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.dark-mode .dataTables_paginate .paginate_button:hover {
  background-color: var(--border-color-subtle) !important;
  color: var(--text-primary) !important;
}

/* ================== DARK MODE — NAVBAR ================== */

.dark-mode .navbar {
  background-color: var(--bg-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* Desktop: navbar links — light text, pill hover */
.dark-mode .navbar .btn-outline-light {
    color: var(--text-primary) !important;
    background: transparent !important;
    border: none !important;
}

.dark-mode .navbar .btn-outline-light:hover {
    color: var(--primary-blue) !important;
    background: rgba(96, 165, 250, 0.1) !important;
    box-shadow: none !important;
}

.dark-mode .navbar .btn-outline-light.active {
    color: var(--primary-blue) !important;
    background: rgba(96, 165, 250, 0.12) !important;
}

/* Year dropdown arrow (SVG data URI — cannot use CSS variables) */
.dark-mode #year_filter {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23f4f4f5' d='M2 5l6 6 6-6z'/%3e%3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  background-repeat: no-repeat !important;
  padding-right: 2.25rem !important;
}

/* ================== DARK MODE — DROPDOWNS ================== */
.dark-mode .dropdown-menu {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .dropdown-item {
    color: var(--text-secondary) !important;
}
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}
.dark-mode .dropdown-divider {
    border-color: var(--border-color) !important;
}

/* ================== DARK MODE — ALERTS (residual) ================== */
/* Alert colors now flow from variables. Keep: filter, border-left structure, context button. */

.dark-mode .alert-warning {
    border-left: 3px solid var(--alert-warning-border) !important;
}
.dark-mode .alert-danger {
    border-left: 3px solid var(--alert-danger-border) !important;
}
.dark-mode .alert-link {
    color: var(--primary-blue) !important;
}
.dark-mode .alert-link:hover {
    color: var(--primary-blue-hover) !important;
}

.dark-mode .alert-info .btn-outline-primary {
    color: #7dd3fc !important;
    border-color: transparent !important;
}
.dark-mode .alert-info .btn-outline-primary:hover {
    background: rgba(125, 211, 252, 0.1) !important;
    color: #7dd3fc !important;
}

.dark-mode .alert .btn-close {
    filter: invert(1) brightness(1.1);
}

/* ================== DARK MODE — TOASTS ================== */

.dark-mode .toast {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dark-mode .toast .btn-close {
    filter: invert(1) brightness(1.1);
}

/* ================== DARK MODE — TRIP LEG CARD-WITHIN-CARD ================== */

.dark-mode .trip-horizontal-container .trip-leg {
  background-color: var(--overlay-soft);
  border-color: var(--overlay-border);
}

.dark-mode .trip-summary-item {
  background-color: var(--overlay-soft);
  border-color: var(--overlay-border);
}

.dark-mode .trip-layover-item {
  background-color: var(--overlay-soft);
  border-color: var(--overlay-border);
  color: var(--text-secondary) !important;
}

/* Ghost placeholder */
.dark-mode .trip-leg-ghost {
    border-color: var(--border-color, #52525b) !important;
    background: var(--bg-secondary, #1b1b1b) !important;
}

.dark-mode .trip-leg-ghost .leg-header strong,
.dark-mode .trip-leg-ghost .leg-details {
    color: #71717a !important;
}

/* ── Trip extra-data collapse (dark mode) ── */
.dark-mode .trip-extra-toggle {
    color: var(--primary-blue);
}

.dark-mode .trip-extra-panel-body {
    border-top-color: var(--border-color-subtle);
}

.dark-mode .trip-extra-field {
    background-color: var(--overlay-soft);
    border-color: var(--overlay-border);
}

.dark-mode .trip-extra-field-label {
    color: var(--text-muted);
}

.dark-mode .trip-extra-field-value {
    color: var(--text-primary);
}

.dark-mode .trip-extra-group-label {
    color: var(--placeholder-color);
}

/* ================== DARK MODE — INCOMPLETE TRIPS ================== */

/* ================== DARK MODE — TRIP NUMBER BADGE ================== */

.dark-mode .trip-number,
.dark-mode [class*="Round Trip"] {
  background-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color-subtle) !important;
}

/* ================== DARK MODE — ROUND TRIP / EDIT PREVIEW CARDS ================== */

.dark-mode #round_trip_preview_container .preview-outer-card {
    border-color: var(--success-green) !important;
}

.dark-mode #round_trip_preview_container .preview-outer-card > .card-header {
    background-color: rgba(74, 222, 128, 0.08) !important;
    color: var(--success-green) !important;
    border-bottom-color: rgba(74, 222, 128, 0.2) !important;
}

.dark-mode #round_trip_preview_container .preview-outer-card > .card-header * {
    color: var(--success-green) !important;
}

.dark-mode #round_trip_preview_container .preview-edit-card {
    border-color: var(--warning-yellow) !important;
}

.dark-mode #round_trip_preview_container .preview-edit-card > .card-header {
    background-color: rgba(251, 191, 36, 0.10) !important;
    color: var(--warning-yellow) !important;
    border-bottom-color: rgba(251, 191, 36, 0.25) !important;
}

.dark-mode #round_trip_preview_container .preview-edit-card > .card-header * {
    color: var(--warning-yellow) !important;
}

/* ================== DARK MODE — TRIP SEARCH FILTER ================== */

.dark-mode #trips_search_container .input-group-text {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-muted) !important;
}

/* ================== DARK MODE — DASHBOARD YEAR CARDS ================== */

.dark-mode .year-stat-card {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .year-stat-card .card-title {
    color: var(--text-muted) !important;
}

.dark-mode .year-stat-card .card-text {
    color: var(--text-primary) !important;
}

.dark-mode .year-card-empty .card-body,
.dark-mode .year-card-empty .card-header > :not(.year-card-actions) {
    opacity: 0.4;
}

.dark-mode .year-card-empty:hover .card-body,
.dark-mode .year-card-empty:hover .card-header > :not(.year-card-actions) {
    opacity: 0.6;
}

.dark-mode #yearVisibilityMenu {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-color-subtle) !important;
}

.dark-mode #yearVisibilityMenu .dropdown-item {
    color: var(--text-primary) !important;
}

.dark-mode #yearVisibilityMenu .dropdown-item:hover {
    background-color: rgba(96, 165, 250, 0.12) !important;
}

.dark-mode #yearVisibilityMenu .dropdown-divider {
    border-color: var(--border-color-subtle) !important;
}

/* ================== DARK MODE — SITE FOOTER ================== */

.dark-mode .site-footer {
    background-color: var(--bg-primary) !important;
    border-top-color: var(--border-color) !important;
}

.dark-mode .site-footer-blurb {
    color: var(--placeholder-color) !important;
}

/* ================== DARK MODE — LOGIN PAGE ================== */

.dark-mode .login-header .tagline {
    color: var(--text-muted) !important;
}

.dark-mode .learn-more-divider hr {
    border-color: var(--border-color);
}

.dark-mode .btn-register {
    border-color: var(--success-green);
    color: var(--success-green);
}

.dark-mode .btn-register:hover {
    background-color: var(--success-green);
    border-color: var(--success-green);
    color: #000;
}

.dark-mode .whats-new-wrap .card.border-info .card-header {
    background-color: #0e7490 !important;
}

/* ================== DARK MODE — REGISTER PAGE ================== */

.dark-mode .bg-light {
    background-color: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .bg-success-subtle {
    background-color: #1a4d3a !important;
    color: var(--text-secondary) !important;
}

.dark-mode .bg-warning-subtle {
    background-color: var(--alert-warning-bg) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .bg-warning-subtle * {
    color: var(--text-secondary) !important;
}

.dark-mode .bg-warning-subtle strong,
.dark-mode .bg-warning-subtle b {
    color: var(--text-primary) !important;
}

.dark-mode .bg-warning-subtle a {
    color: #7dd3fc !important;
}

.dark-mode .bg-warning-subtle a:hover {
    color: #38bdf8 !important;
}

/* ================== DARK MODE — TRIP CONNECTOR SVG LINES ================== */

/* Softer, lighter lines against the dark background */
.dark-mode .trip-connector-path {
  stroke: rgba(148, 163, 184, 0.22);
}

.dark-mode .trip-connector-arrow-head {
  fill: rgba(148, 163, 184, 0.30);
}

/* ================== DARK MODE — OPERATIONAL STATS ================== */

.dark-mode .stats-ticket-card {
    border-left-color: var(--primary-blue) !important;
}

.dark-mode .approval-good { color: #4ade80; }
.dark-mode .approval-warn { color: #facc15; }
.dark-mode .approval-bad { color: #f87171; }

.dark-mode .earnings-delta-warn { color: #f87171; }
.dark-mode .earnings-delta-ok { color: #4ade80; }

.dark-mode .badge-approved-y { background-color: #166534 !important; color: #bbf7d0 !important; }
.dark-mode .badge-approved-n { background-color: #991b1b !important; color: #fecaca !important; }
.dark-mode .badge-debit { background-color: #991b1b !important; color: #fecaca !important; }
.dark-mode .badge-credit { background-color: #854d0e !important; color: #fef08a !important; }

.dark-mode .table-success {
    background-color: rgba(22, 101, 52, 0.3) !important;
    color: var(--text-primary) !important;
}
.dark-mode .table-warning {
    background-color: rgba(133, 77, 14, 0.3) !important;
    color: var(--text-primary) !important;
}

/* ================== DARK MODE — PHONE RESPONSIVE ================== */

@media (max-width: 575.98px) {
  .dark-mode .trip-horizontal-container .trip-leg {
    background-color: var(--overlay-soft);
    border-color: var(--overlay-border);
  }
}

/* ================== DARK MODE — UNIFIED CARD-FORM ================== */

/* ── Trip entry leg box ── */
.dark-mode .trip-entry-leg {
    background-color: var(--overlay-soft);
    border-color: var(--overlay-border);
    /* Bootstrap form-floating uses var(--bs-body-bg) as the label's background
       to mask the input border as the label floats. Override it here so the
       label gets the dark input colour instead of Bootstrap's default #fff. */
    --bs-body-bg: var(--input-bg);
}

/* ── Floating label: readable colour, no explicit background needed
   (Bootstrap automatically uses --bs-body-bg set on .trip-entry-leg above). ── */
.dark-mode .trip-entry-leg .form-floating > label {
    color: #a1afc4 !important;
    opacity: 1 !important;
}

/* Show placeholder hint text in dark mode (muted, readable on dark bg) */
.dark-mode .trip-entry-leg .form-floating > .form-control::placeholder,
.dark-mode .trip-entry-leg .form-floating > .form-control-sm::placeholder {
    color: #556070 !important;
    opacity: 1;
}

/* ── Duration + Type inline badges ── */
.dark-mode .trip-entry-inline-badge {
    background-color: var(--overlay-soft);
    border-color: var(--overlay-border);
}

.dark-mode .trip-entry-inline-badge .badge-value {
    color: var(--text-primary);
}

/* ── Station Home / Away badges ── */
.dark-mode .station-type-badge.home {
    color: var(--success-green) !important;
}

.dark-mode .station-type-badge.away {
    color: var(--primary-blue) !important;
}

/* ── Station name lookup ── */
.dark-mode .station-name-label {
    color: var(--text-primary) !important;
}

.dark-mode .station-name-voted {
    color: var(--success-green) !important;
}

.dark-mode .station-name-meta {
    color: var(--text-muted) !important;
}

.dark-mode .station-name-action {
    color: var(--placeholder-color) !important;
}
.dark-mode .station-name-action:hover {
    color: var(--primary-blue) !important;
}

.dark-mode .station-name-seeall-toggle {
    color: var(--placeholder-color) !important;
}
.dark-mode .station-name-seeall-toggle:hover {
    color: var(--primary-blue) !important;
}
.dark-mode .station-name-ranking-list li {
    color: var(--text-muted) !important;
}

/* ── QuickFill wizard bar ── */
.dark-mode .quickfill-wizard-bar {
    background-color: rgba(96, 165, 250, 0.06);
    border-color: rgba(96, 165, 250, 0.15);
}

/* ── OCR section inside card ── */
.dark-mode .quickfill-ocr-section {
    background-color: var(--overlay-soft);
    border-color: var(--overlay-border) !important;
}

/* ── Help modal theme-aware images ── */
.help-img-dark { display: none; }
html.dark-mode .help-img-light { display: none !important; }
html.dark-mode .help-img-dark { display: inline !important; }

/* ── Trophy/Achievement System ── */
html.dark-mode .trophy-card {
    background: var(--card-bg, #1e1e1e);
    border-color: var(--overlay-border, #333);
}
html.dark-mode .trophy-card.trophy-locked {
    background: var(--overlay-soft, #2a2a2a);
    border-color: var(--overlay-border, #333);
}
html.dark-mode .trophy-card.trophy-locked .trophy-icon {
    background: #3a3a3a;
    color: #666;
}
html.dark-mode .trophy-desc {
    color: #999;
}
html.dark-mode .trophy-progress-bar {
    background: #333;
}
html.dark-mode .trophy-tabs .nav-link {
    color: #aaa;
}
html.dark-mode .trophy-tabs .nav-link:hover {
    color: #ddd;
    background: #333;
}
html.dark-mode .trophy-tabs .nav-link.active {
    color: #fff;
    background: #2563eb;
}
html.dark-mode .trophy-stat-card {
    border-color: var(--overlay-border, #333);
}
html.dark-mode .trophy-stat-card:hover {
    border-color: #ffd700;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15);
}
html.dark-mode .trophy-empty-state {
    color: #666;
}
html.dark-mode .achievement-toast {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
html.dark-mode .achievement-toast .toast-body {
    background: var(--card-bg, #1e1e1e);
    color: #ddd;
}
html.dark-mode .achievement-toast .toast-body .text-muted {
    color: #999 !important;
}
html.dark-mode .trophy-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ================== LIBRARY / DOCUMENT SEARCH (CHAT) ================== */
html.dark-mode .chat-container {
    background: var(--card-bg);
    border-color: var(--border-color);
}
html.dark-mode .chat-msg-user .chat-msg-content {
    background: #2563eb;
}
html.dark-mode .chat-msg-ai .chat-msg-content {
    background: #2a2a2a;
    color: #ddd;
}
html.dark-mode .chat-msg-ai .chat-msg-content code {
    background: rgba(255,255,255,0.08);
}
html.dark-mode .chat-msg-ai .chat-msg-content pre {
    background: rgba(255,255,255,0.06);
}
html.dark-mode .chat-msg-ai .chat-msg-content strong {
    color: #eee;
}
html.dark-mode .chat-input-wrapper textarea {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: #ddd;
}
html.dark-mode .chat-welcome h5 {
    color: #ddd;
}
html.dark-mode .chat-suggestion {
    color: #aaa;
    border-color: #555;
}
html.dark-mode .chat-suggestion:hover {
    color: #ddd;
    border-color: #888;
}
html.dark-mode .document-selector .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: #ddd;
}
html.dark-mode .typing-dots span {
    background: #888;
}

/* ================== DARK MODE GAP FIXES ================== */

/* VIA direction badges */
.dark-mode .via-dir-away { background-color: #ef4444; }
.dark-mode .via-dir-home { background-color: #22c55e; }
.dark-mode .via-dir-turn { background-color: #a855f7; }
.dark-mode .via-dir-dh   { background-color: #6b7280; }

/* VIA confirm card */
.dark-mode .via-confirm-card { border-color: var(--via-accent); }
.dark-mode .via-confirm-card:hover { border-color: var(--via-accent-hover); }

/* Bootstrap .nav-tabs (dashboard Meals/Ticket Browser, etc.) */
.dark-mode .nav-tabs { border-bottom-color: var(--border-color); }
.dark-mode .nav-tabs .nav-link {
    color: var(--text-muted);
    background: transparent;
    border-color: transparent;
}
.dark-mode .nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: transparent;
    background: var(--bg-elevated);
}
.dark-mode .nav-tabs .nav-link.active {
    color: var(--text-primary);
    background: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
}

/* Trophy tabs — use variables instead of hardcoded grays */
.dark-mode .trophy-tabs .nav-link { color: var(--text-muted); }
.dark-mode .trophy-tabs .nav-link:hover { color: var(--text-primary); background: var(--bg-elevated); }
.dark-mode .trophy-tabs .nav-link.active { background: var(--primary-blue); color: #fff; }
.dark-mode .trophy-progress-bar { background: var(--bg-elevated); }
.dark-mode .trophy-modal .modal-header { border-color: var(--border-color); }

/* Calendar ghost cards */
.dark-mode .cal-ghost-card { color: var(--text-muted); }

/* Scraper help page */
.dark-mode .sh-toc-card { background: var(--card-bg); border-color: var(--border-color); }

/* Table row hover in dark mode */
.dark-mode .table:not(.table-borderless) > tbody > tr:hover > td {
    background-color: rgba(96, 165, 250, 0.06) !important;
}

/* ================== PRINT — FORCE LIGHT MODE ================== */
/* When printing, override dark-mode variables and direct color rules
   back to light values so output is always readable on paper. */

@media print {
  /* Reset CSS custom properties to light values */
  html.dark-mode {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-elevated: #f8f9fa;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --placeholder-color: #6c757d;
    --border-color: #dee2e6;
    --border-color-subtle: #e9ecef;
    --input-border: #ced4da;
    --overlay-soft: rgba(0, 0, 0, 0.02);
    --overlay-border: rgba(0, 0, 0, 0.1);
    --shadow-light: none;
    --shadow-hover: none;
    --navbar-shadow: none;
    /* 2026 refresh tokens — force light/none for print */
    --elev-1: none;
    --elev-2: none;
    --elev-3: none;
    --elev-4: none;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0284c7;
    --success-bg: rgba(22, 163, 74, 0.08);
    --warning-bg: rgba(217, 119, 6, 0.08);
    --danger-bg: rgba(220, 38, 38, 0.08);
    --info-bg: rgba(2, 132, 199, 0.08);
    --success-border: rgba(22, 163, 74, 0.25);
    --warning-border: rgba(217, 119, 6, 0.25);
    --danger-border: rgba(220, 38, 38, 0.25);
    --info-border: rgba(2, 132, 199, 0.25);
    --accent-amber: #e8910c;
    --accent-amber-hover: #d4820a;
  }

  /* Body / container */
  .dark-mode body,
  .dark-mode .container-fluid {
    background-color: #ffffff !important;
    color: #212529 !important;
  }

  /* Cards */
  .dark-mode .card,
  .dark-mode .compact-trip-card,
  .dark-mode #trip_status,
  .dark-mode .trip-status-box,
  .dark-mode .trip-summary-card .card,
  .dark-mode .table-container,
  .dark-mode .modal-content {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
    box-shadow: none !important;
  }

  .dark-mode .card-header {
    background-color: #f8f9fa !important;
    color: #212529 !important;
  }

  /* Tables */
  .dark-mode .table {
    color: #212529 !important;
  }

  .dark-mode .table td,
  .dark-mode .table th {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
  }

  .dark-mode .table thead th {
    background-color: #f8f9fa !important;
  }

  .dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #f8f9fa !important;
    color: #212529 !important;
  }

  .dark-mode .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: #ffffff !important;
    color: #212529 !important;
  }

  /* Trip leg cards */
  .dark-mode .trip-horizontal-container .trip-leg {
    background-color: rgba(0, 0, 0, 0.02) !important;
    border-color: #dee2e6 !important;
  }

  .dark-mode .trip-summary-item {
    background-color: rgba(0, 0, 0, 0.02) !important;
    border-color: #dee2e6 !important;
  }

  .dark-mode .trip-layover-item {
    background-color: rgba(0, 0, 0, 0.02) !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
  }

  /* Ghost placeholder */
  .dark-mode .trip-leg-ghost {
    border-color: #dee2e6 !important;
    background: #f5f5f5 !important;
  }

  .dark-mode .trip-leg-ghost .leg-header strong,
  .dark-mode .trip-leg-ghost .leg-details {
    color: #6c757d !important;
  }

  /* Trip number badge */
  .dark-mode .trip-number {
    background-color: #e9ecef !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
  }

  /* Year stat cards */
  .dark-mode .year-stat-card {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
  }

  .dark-mode .year-stat-card .card-title {
    color: #6c757d !important;
  }

  .dark-mode .year-stat-card .card-text {
    color: #212529 !important;
  }

  /* Bootstrap utility overrides */
  .dark-mode .bg-light {
    background-color: #f8f9fa !important;
    color: #495057 !important;
  }

  /* Form controls (visible in extra-data sections) */
  .dark-mode .form-control,
  .dark-mode .form-select {
    background-color: #ffffff !important;
    border-color: #ced4da !important;
    color: #212529 !important;
  }
}