/* 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: #0d6efd !important;
    color: #ffffff !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: #0a0a0a;
    border-top: 1px solid #1f1f1f;
    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: #60a5fa !important;
    color: #000 !important;
    border-color: #60a5fa !important;
  }
}

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

.dark-mode {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --card-bg: #18181b;
  --text-primary: #f4f4f5;
  --text-secondary: #d1d5db;
  --border-color: #27272a;
  --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: #121212;
    --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: #121212 !important;
    border-color: #27272a !important;
}

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

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

.dark-mode .navbar {
  background-color: #0a0a0a !important;
  border-bottom: 1px solid #1f1f1f !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: rgba(96, 165, 250, 0.15) !important;
    color: #f1f5f9 !important;
}

.dark-mode .navbar .btn-outline-light.active {
  background-color: #60a5fa !important;
  color: #000 !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: #1f1f23 !important;
  color: #f4f4f5 !important;
  border-color: #3f3f46 !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 ================== */

.dark-mode .btn-outline-primary { color: var(--accent-blue) !important; border-color: var(--accent-blue) !important; }
.dark-mode .btn-outline-primary:hover { background-color: var(--accent-blue) !important; color: #000 !important; }

.dark-mode .btn-outline-success { color: var(--accent-blue) !important; border-color: var(--accent-blue) !important; }
.dark-mode .btn-outline-success:hover { background-color: var(--accent-blue) !important; color: #000 !important; }

.dark-mode .btn-outline-warning { color: var(--accent-blue) !important; border-color: var(--accent-blue) !important; }
.dark-mode .btn-outline-warning:hover { background-color: var(--accent-blue) !important; color: #000 !important; }

.dark-mode .btn-outline-danger { color: #f87171 !important; border-color: #f87171 !important; }

/* Edit buttons (btn-outline-warning) = blue */
.dark-mode .btn-outline-warning {
    color: #0d6efd !important;
    border-color: #0d6efd !important;
    background-color: transparent !important;
}

.dark-mode .btn-outline-warning:hover,
.dark-mode .btn-outline-warning:focus {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

/* Delete + Clear Trip Entry */
.dark-mode .btn-outline-danger,
.dark-mode #clear_trip_entry {
    color: #dc3545 !important;
    border-color: #dc3545 !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: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

/* General btn-outline-primary in admin dark mode */
.dark-mode .btn-outline-primary {
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}

.dark-mode .btn-outline-primary:hover {
    background-color: #60a5fa !important;
    color: #000000 !important;
}

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

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

.dark-mode .table thead th {
    background-color: #1a1a1a !important;
    color: #f1f5f9 !important;
    border-color: #27272a !important;
}

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

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

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

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

.dark-mode .table td,
.dark-mode .table th {
    background-color: #121212 !important;
    color: #f1f5f9 !important;
    border-color: #27272a !important;
}

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

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

.dark-mode .table tbody tr:empty,
.dark-mode .table tbody tr td:empty {
    background-color: #121212 !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: #27272a !important;
    border-color: #27272a !important;
}

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

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

.dark-mode .modal-content {
    background-color: #121212 !important;
    border-color: #27272a !important;
    color: #f1f5f9 !important;
}

.dark-mode .modal-header {
    background-color: #1a1a1a !important;
    border-bottom-color: #27272a !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;
}

/* ================== 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: #27272a !important;
  color: #f4f4f5 !important;
  border: 1px solid #3f3f46 !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: #1a1a1a !important;
    border-color: #27272a !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: #1a1a1a !important;
    border-color: #3f3f46 !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: #3f3f46 !important;
}

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

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

.dark-mode .site-footer {
    background-color: #0a0a0a !important;
    border-top-color: #1f1f1f !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: #27272a;
}

.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: #1a1a1a !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 — 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);
  }
}