/* 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: #0d6efd !important;
    border-color: #0d6efd !important;
    background-color: transparent !important;
  }

  html:not(.dark-mode) .navbar .navbar-nav .btn-outline-light:hover {
    background-color: #0d6efd !important;
    color: #ffffff !important;
  }

  html:not(.dark-mode) .navbar .navbar-nav .btn-outline-light.active {
    background-color: rgba(13, 110, 253, 0.12) !important;
    color: #0d6efd !important;
    border-color: #0d6efd !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: #141414;
    border-top: 1px solid #292929;
    padding: 0.5rem 0.75rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

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

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

  html.dark-mode .navbar .navbar-nav .btn-outline-light.active {
    background-color: rgba(96, 165, 250, 0.22) !important;
    color: #f1f5f9 !important;
    border-color: #60a5fa !important;
  }
}

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

.dark-mode {
  /* Backgrounds */
  --bg-primary: #141414;
  --bg-secondary: #1b1b1b;
  --bg-elevated: #252525;
  --card-bg: #1e1e1e;
  --input-bg: #1f2937;

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

  /* Borders */
  --border-color: #313135;
  --border-color-subtle: #484850;
  --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: #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: #1e1e1e;
  --table-stripe-bg: #252525;
  --table-header-bg: #252525;

  /* Alerts */
  --alert-info-bg: #1a3a4a;
  --alert-info-border: #2a5a6a;
  --alert-info-text: #e2e8f0;
  --alert-info-strong: #7dd3fc;
  --alert-warning-bg: #755002;
  --alert-warning-border: #ca8a04;
  --alert-warning-text: #e2e8f0;
  --alert-warning-strong: #f1f5f9;
  --alert-danger-bg: #7f1d1d;
  --alert-danger-border: #dc2626;
  --alert-danger-text: #e2e8f0;
  --alert-danger-strong: #f1f5f9;

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

/* ================== 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 10px 30px rgba(0,0,0,0.8);
  border-radius: 14px;
}

.dark-mode .card-header {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !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: non-active navbar buttons — accent border, light text */
.dark-mode .navbar .btn-outline-light:not(.active) {
    color: var(--text-primary) !important;
    border-color: var(--primary-blue) !important;
    background-color: transparent !important;
}

.dark-mode .navbar .btn-outline-light:not(.active):hover {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
    color: #000 !important;
    box-shadow: var(--btn-primary-shadow) !important;
}

.dark-mode .navbar .btn-outline-light.active {
  background-color: rgba(96, 165, 250, 0.22) !important;
  color: var(--text-primary) !important;
  border-color: var(--primary-blue) !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 — ALERTS (residual) ================== */
/* Alert colors now flow from variables. Keep: filter, border-left structure, context button. */

.dark-mode .alert-warning {
    border-left: 6px solid var(--alert-warning-border) !important;
}
.dark-mode .alert-danger {
    border-left: 6px solid var(--alert-danger-border) !important;
}

.dark-mode .alert-info .btn-outline-primary {
    color: #7dd3fc !important;
    border-color: #7dd3fc !important;
}
.dark-mode .alert-info .btn-outline-primary:hover {
    background-color: #7dd3fc !important;
    color: #0c1824 !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: #52525b !important;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(255, 255, 255, 0.03) 6px,
        rgba(255, 255, 255, 0.03) 12px
    ) !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 — 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;
    o
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #a1a1aa;
}

/* ── 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: #0d6efd;
}
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%);
}