/* 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 {
  --bg-primary: #141414;
  --bg-secondary: #1b1b1b;
  --card-bg: #18181b;
  --text-primary: #f4f4f5;
  --text-secondary: #d1d5db;
  --border-color: #313135;
  --shadow: 0 10px 30px rgba(0,0,0,0.8);
  --accent-blue: #60a5fa;
}

/* Feb 27 fix: refine card-bg and text */
.dark-mode {
    --card-bg: #1e1e1e;
    --text-primary: #f1f5f9;
    --text-secondary: #e2e8f0;
}

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

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

/* ================== DARK MODE — CARDS & PANELS ================== */

.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: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow);
  border-radius: 14px;
}

.dark-mode .card,
.dark-mode .compact-trip-card,
.dark-mode .trip-summary-card .card {
    background-color: #1e1e1e !important;
    border-color: #313135 !important;
}

.dark-mode .card-header {
    background-color: #252525 !important;
    color: #f1f5f9 !important;
}

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

.dark-mode .navbar {
  background-color: #141414 !important;
  border-bottom: 1px solid #292929 !important;
}

/* Desktop: non-active navbar buttons — blue border, white text */
.dark-mode .navbar .btn-outline-light:not(.active) {
    color: #f1f5f9 !important;
    border-color: #60a5fa !important;
    background-color: transparent !important;
}

.dark-mode .navbar .btn-outline-light:not(.active):hover {
    background-color: #60a5fa !important;
    border-color: #60a5fa !important;
    color: #000 !important;
    box-shadow: 0 2px 10px rgba(96, 165, 250, 0.3) !important;
}

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

/* ================== DARK MODE — FORM INPUTS ================== */

.dark-mode .form-control,
.dark-mode textarea,
.dark-mode .form-select,
.dark-mode #parser_text,
.dark-mode #year_filter {
  background-color: #252528 !important;
  color: #f4f4f5 !important;
  border-color: #484850 !important;
}

.dark-mode .form-control::placeholder,
.dark-mode textarea::placeholder {
  color: #71717a !important;
}

/* Modern form control override */
.dark-mode .form-control {
    background-color: #1f2937 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

/* Year dropdown arrow */
.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 — TEXT ================== */

.dark-mode .form-label,
.dark-mode label,
.dark-mode .card-header,
.dark-mode #duty_hours,
.dark-mode #trip_type,
.dark-mode .leg-details,
.dark-mode .trip-summary-item,
.dark-mode .card-body p,
.dark-mode .card-body span,
.dark-mode .trip-number {
  color: #f4f4f5 !important;
}

/* Consistent text across the ENTIRE app */
.dark-mode body,
.dark-mode .card-body,
.dark-mode .leg-details,
.dark-mode .trip-summary-item,
.dark-mode .trip-number,
.dark-mode .leg-header strong,
.dark-mode label,
.dark-mode .form-label,
.dark-mode .table td,
.dark-mode .table th {
    color: #f1f5f9 !important;
}

.dark-mode .text-secondary,
.dark-mode .trip-summary-item > div:first-child {
    color: #e2e8f0 !important;
}

.dark-mode .text-muted,
.dark-mode .form-text {
    color: #a1a1aa !important;
}

/* ROUND TRIPS TEXT CONTRAST BALANCE */
.dark-mode .leg-header strong,
.dark-mode .trip-number {
    color: #f8fafc !important;
}

.dark-mode .leg-details,
.dark-mode .trip-summary-item,
.dark-mode .compact-trip-card .card-body {
    color: #e2e8f0 !important;
}

/* ================== DARK MODE — BUTTONS ================== */

/* Primary — light blue */
.dark-mode .btn-outline-primary {
    color: #60a5fa !important;
    border-color: #60a5fa !important;
    background-color: transparent !important;
}
.dark-mode .btn-outline-primary:hover {
    background-color: #60a5fa !important;
    border-color: #60a5fa !important;
    color: #000 !important;
    box-shadow: 0 2px 10px rgba(96,165,250,0.3) !important;
}

/* Success — light green (Download, Donate, Enable All) */
.dark-mode .btn-outline-success {
    color: #4ade80 !important;
    border-color: #4ade80 !important;
    background-color: transparent !important;
}
.dark-mode .btn-outline-success:hover {
    background-color: #4ade80 !important;
    border-color: #4ade80 !important;
    color: #000 !important;
    box-shadow: 0 2px 10px rgba(74,222,128,0.3) !important;
}

/* Warning — amber (Edit, Buy Me a Coffee) */
.dark-mode .btn-outline-warning {
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
    background-color: transparent !important;
}
.dark-mode .btn-outline-warning:hover,
.dark-mode .btn-outline-warning:focus {
    background-color: #fbbf24 !important;
    border-color: #fbbf24 !important;
    color: #000 !important;
    box-shadow: 0 2px 10px rgba(251,191,36,0.35) !important;
}

/* Danger — red (Delete, Clear Trip Entry) */
.dark-mode .btn-outline-danger,
.dark-mode #clear_trip_entry {
    color: #f87171 !important;
    border-color: #f87171 !important;
    background-color: transparent !important;
}
.dark-mode .btn-outline-danger:hover,
.dark-mode .btn-outline-danger:focus,
.dark-mode #clear_trip_entry:hover,
.dark-mode #clear_trip_entry:focus {
    background-color: #f87171 !important;
    border-color: #f87171 !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(248,113,113,0.3) !important;
}

/* Secondary — grey (theme toggle, cancel, back) */
.dark-mode .btn-outline-secondary {
    color: #adb5bd !important;
    border-color: #adb5bd !important;
    background-color: transparent !important;
}
.dark-mode .btn-outline-secondary:hover {
    background-color: #adb5bd !important;
    border-color: #adb5bd !important;
    color: #000 !important;
    box-shadow: 0 2px 10px rgba(173, 181, 189, 0.25) !important;
}

/* Info — cyan (OCR, upload image, help) */
.dark-mode .btn-outline-info {
    color: #67e8f9 !important;
    border-color: #67e8f9 !important;
    background-color: transparent !important;
}
.dark-mode .btn-outline-info:hover {
    background-color: #67e8f9 !important;
    border-color: #67e8f9 !important;
    color: #000 !important;
    box-shadow: 0 2px 10px rgba(103, 232, 249, 0.3) !important;
}

/* ================== DARK MODE — TABLES & DATATABLES ================== */

.dark-mode .dataTables_wrapper .table,
.dark-mode #users_table,
.dark-mode #activities_table {
    background-color: #1e1e1e !important;
    color: #f1f5f9 !important;
}

.dark-mode .table thead th {
    background-color: #252525 !important;
    color: #f1f5f9 !important;
    border-color: #313135 !important;
}

.dark-mode .table td,
.dark-mode .table th {
    color: #f1f5f9 !important;
    border-color: #313135 !important;
}

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

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

/* Profile page table */
.dark-mode .table,
.dark-mode .table-striped {
    background-color: #1e1e1e !important;
    color: #f1f5f9 !important;
}

.dark-mode .table td,
.dark-mode .table th {
    background-color: #1e1e1e !important;
    color: #f1f5f9 !important;
    border-color: #313135 !important;
}

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

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

.dark-mode .table tbody tr:empty,
.dark-mode .table tbody tr td:empty {
    background-color: #1e1e1e !important;
}

/* Pagination & search */
.dark-mode .dataTables_paginate .paginate_button,
.dark-mode .dataTables_info,
.dark-mode .dataTables_length label,
.dark-mode .dataTables_filter label {
    color: #f1f5f9 !important;
}

.dark-mode .dataTables_paginate .paginate_button {
    background-color: #313135 !important;
    border-color: #313135 !important;
}

.dark-mode .dataTables_paginate .paginate_button:hover {
    background-color: #484850 !important;
    color: #ffffff !important;
}

/* ================== DARK MODE — MODALS ================== */

.dark-mode .modal-content {
    background-color: #1e1e1e !important;
    border-color: #313135 !important;
    color: #f1f5f9 !important;
}

.dark-mode .modal-header {
    background-color: #252525 !important;
    border-bottom-color: #313135 !important;
}

/* ================== DARK MODE — ALERTS ================== */

.dark-mode .alert-info {
    background-color: #1a3a4a !important;
    border-color: #2a5a6a !important;
    color: #e2e8f0 !important;
}

.dark-mode .alert-info * {
    color: #e2e8f0 !important;
}

.dark-mode .alert-info strong,
.dark-mode .alert-info b {
    color: #7dd3fc !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-info .btn-close {
    filter: invert(1) brightness(1.1);
}

.dark-mode .alert-warning {
    background-color: #755002 !important;
    color: #e2e8f0 !important;
    border-left: 6px solid #ca8a04 !important;
}

.dark-mode .alert-warning * {
    color: #e2e8f0 !important;
}

.dark-mode .alert-warning strong,
.dark-mode .alert-warning b {
    color: #f1f5f9 !important;
}

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

.dark-mode .alert-danger {
    background-color: #7f1d1d !important;
    color: #e2e8f0 !important;
    border-left: 6px solid #dc2626 !important;
}

.dark-mode .alert-danger * {
    color: #e2e8f0 !important;
}

.dark-mode .alert-danger strong,
.dark-mode .alert-danger b {
    color: #f1f5f9 !important;
}

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

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

.dark-mode .trip-horizontal-container .trip-leg {
  background-color: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

.dark-mode .trip-summary-item {
  background-color: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

.dark-mode .trip-layover-item {
  background-color: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: #e2e8f0 !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: #60a5fa;
}

.dark-mode .trip-extra-panel-body {
    border-top-color: #484850;
}

.dark-mode .trip-extra-field {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .trip-extra-field-label {
    color: #a1a1aa;
}

.dark-mode .trip-extra-field-value {
    color: #f4f4f5;
}

.dark-mode .trip-extra-group-label {
    color: #71717a;
}

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

.dark-mode .compact-trip-card.incomplete-trip .leg-details,
.dark-mode .compact-trip-card.incomplete-trip .leg-header strong,
.dark-mode .compact-trip-card.incomplete-trip .trip-number,
.dark-mode .compact-trip-card.incomplete-trip .trip-summary-item {
    color: #f1f5f9 !important;
}

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

.dark-mode .trip-number,
.dark-mode [class*="Round Trip"] {
  background-color: #313135 !important;
  color: #f4f4f5 !important;
  border: 1px solid #484850 !important;
}

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

.dark-mode #round_trip_preview_container .preview-outer-card {
    border-color: #4ade80 !important;
}

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

.dark-mode #round_trip_preview_container .preview-outer-card > .card-header * {
    color: #4ade80 !important;
}

.dark-mode #round_trip_preview_container .preview-edit-card {
    border-color: #fbbf24 !important;
}

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

.dark-mode #round_trip_preview_container .preview-edit-card > .card-header * {
    color: #fbbf24 !important;
}

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

.dark-mode #trips_search_container .input-group-text {
    background-color: #1f2937 !important;
    border-color: #475569 !important;
    color: #a1a1aa !important;
}

/* ================== DARK MODE — HEADINGS ================== */

.dark-mode h1, .dark-mode h2 {
    color: #f1f5f9 !important;
}

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

.dark-mode .year-stat-card {
    background-color: #252525 !important;
    border-color: #313135 !important;
}

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

.dark-mode .year-stat-card .card-text {
    color: #f1f5f9 !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: #252525 !important;
    border-color: #484850 !important;
}

.dark-mode #yearVisibilityMenu .dropdown-item {
    color: #f1f5f9 !important;
}

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

.dark-mode #yearVisibilityMenu .dropdown-divider {
    border-color: #484850 !important;
}

.dark-mode #yearVisibilityMenu small.text-muted {
    color: #71717a !important;
}

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

.dark-mode .site-footer {
    background-color: #141414 !important;
    border-top-color: #292929 !important;
}

.dark-mode .site-footer-blurb {
    color: #71717a !important;
}

.dark-mode .site-footer .btn-outline-success {
    color: #4ade80 !important;
    border-color: #4ade80 !important;
}

.dark-mode .site-footer .btn-outline-success:hover {
    background-color: #4ade80 !important;
    color: #000 !important;
}

.dark-mode .site-footer .btn-outline-warning {
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
}

.dark-mode .site-footer .btn-outline-warning:hover {
    background-color: #fbbf24 !important;
    color: #000 !important;
}

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

.dark-mode .login-header .tagline {
    color: #a1a1aa !important;
}

.dark-mode .learn-more-divider hr {
    border-color: #313135;
}

.dark-mode .btn-register {
    border-color: #4ade80;
    color: #4ade80;
}

.dark-mode .btn-register:hover {
    background-color: #4ade80;
    border-color: #4ade80;
    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: #252525 !important;
    color: #e2e8f0 !important;
}

.dark-mode .bg-success-subtle {
    background-color: #1a4d3a !important;
    color: #e2e8f0 !important;
}

.dark-mode .bg-warning-subtle {
    background-color: #755002 !important;
    color: #e2e8f0 !important;
}

.dark-mode .bg-warning-subtle * {
    color: #e2e8f0 !important;
}

.dark-mode .bg-warning-subtle strong,
.dark-mode .bg-warning-subtle b {
    color: #f1f5f9 !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: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
  }
}

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

/* ── Trip entry leg box ── */
.dark-mode .trip-entry-leg {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    /* 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: #1f2937;
}

/* ── 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: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .trip-entry-inline-badge .badge-value {
    color: #f1f5f9;
}

/* ── Station Home / Away badges ── */
.dark-mode .station-type-badge.home {
    background-color: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

.dark-mode .station-type-badge.away {
    background-color: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.25);
}


/* ── 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: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08) !important;
}