:root {
      --navy: #0d1f35;
      --navy2: #162d48;
      --navy3: #1e3a5f;
      --amber: #f59e0b;
      --amber2: #d97706;
      --green: #10b981;
      --green2: #059669;
      --red: #ef4444;
      --red2: #dc2626;
      --blue: #3b82f6;
      --purple: #8b5cf6;
      --gray50: #f8fafc;
      --gray100: #f1f5f9;
      --gray200: #e2e8f0;
      --gray300: #cbd5e1;
      --gray400: #94a3b8;
      --gray500: #64748b;
      --gray600: #475569;
      --gray700: #334155;
      --gray800: #1e293b;
      --gray900: #0f172a;
      --white: #ffffff;
      --sidebar-w: 230px;
      --header-h: 60px;
      --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
      --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
      --radius: 8px;
      --radius-lg: 12px;
    }

    /* Tappable destination address → opens Google Maps directions on the driver's phone */
    .maps-link {
      color: var(--blue);
      text-decoration: underline;
      font-weight: 600;
      display: inline-block;
      padding: 2px 0;
      word-break: break-word;
    }
    .maps-link:hover { color: var(--amber2); }

    /* ============ DARK MODE ============ */
    body.dark-mode {
      --gray50: #1c2133;
      --gray100: #151924;
      --gray200: #28304a;
      --gray300: #3a4460;
      --gray400: #6b7a99;
      --gray500: #9aa5be;
      --gray600: #b8c4d8;
      --gray700: #d4dcef;
      --gray800: #e8edf7;
      --gray900: #f3f6fb;
      --white: #1e2538;
      --navy: #0d1f35;
      --navy2: #162d48;
      --navy3: #1e3a5f;
      --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
      --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
    }

    /* Fixes the sidebar logo text in dark mode */
    body.dark-mode .sidebar-logo h2.ridelog-title,
    body.dark-mode .sidebar-logo p#dynamic-facility-name {
        color: #ffffff !important; 
    }

    body.dark-mode {
      background: #151924 !important;
      color: #f3f6fb !important;
    }

    body.dark-mode .card {
      background: #1e2538 !important;
      border-color: #28304a !important;
    }

    .res-combo {
      position: relative;
      flex: 1;
    }

    .res-combo-input {
      width: 100%;
      padding: 9px 12px;
      border: 1.5px solid var(--gray200);
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 13.5px;
      background: var(--white);
      color: var(--gray900);
      box-sizing: border-box;
      cursor: text;
    }

    .res-combo-input:focus {
      outline: none;
      border-color: var(--navy);
      box-shadow: 0 0 0 3px rgba(13, 31, 53, .08);
    }

    .res-combo-dropdown {
      position: absolute;
      top: calc(100% + 3px);
      left: 0;
      right: 0;
      background: var(--white);
      border: 1.5px solid var(--gray200);
      border-radius: var(--radius);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
      z-index: 9999;
      max-height: 220px;
      overflow-y: auto;
      display: none;
    }

    .res-combo-dropdown.open {
      display: block;
    }

    .res-combo-option {
      padding: 9px 13px;
      font-size: 13.5px;
      cursor: pointer;
      color: var(--gray900);
    }

    .res-combo-option:hover,
    .res-combo-option.highlighted {
      background: var(--navy);
      color: #fff; /* literal — --white flips to a dark card color in dark mode */
    }

    .res-combo-option.selected-opt {
      font-weight: 600;
    }

    .res-combo-none {
      padding: 9px 13px;
      font-size: 13px;
      color: var(--gray400);
      font-style: italic;
    }

    body.dark-mode .res-combo-input {
      background: #1e2538;
      color: #e2e8f0;
      border-color: #28304a;
    }

    body.dark-mode .res-combo-dropdown {
      background: #1e2538;
      border-color: #28304a;
    }

    body.dark-mode .res-combo-option {
      color: #e2e8f0;
    }

    body.dark-mode .res-combo-option:hover,
    body.dark-mode .res-combo-option.highlighted {
      background: #2d3a5a;
    }

    body.dark-mode .view-header {
      background: #1e2538 !important;
      border-color: #28304a !important;
    }

    body.dark-mode .stat-card {
      background: #1e2538 !important;
      border-color: #28304a !important;
    }

    body.dark-mode .stat-card .stat-value {
      color: #93c5fd !important;
    }

    body.dark-mode .stat-card .stat-label {
      color: #9aa5be !important;
    }

    body.dark-mode .stat-card .stat-sub {
      color: #6b7a99 !important;
    }

    body.dark-mode thead th {
      background: #232b3e !important;
      color: #9aa5be !important;
      border-color: #28304a !important;
    }

    body.dark-mode tbody tr {
      border-color: #28304a !important;
    }

    body.dark-mode tbody tr:hover {
      background: #232b3e !important;
    }

    body.dark-mode tbody td {
      color: #e8edf7 !important;
    }

    body.dark-mode .form-group input,
    body.dark-mode .form-group select,
    body.dark-mode .form-group textarea {
      background: #232b3e !important;
      border-color: #3a4460 !important;
      color: #f3f6fb !important;
    }

    body.dark-mode .form-group input:focus,
    body.dark-mode .form-group select:focus,
    body.dark-mode .form-group textarea:focus {
      border-color: #60a5fa !important;
    }

    body.dark-mode .form-group label {
      color: #d4dcef !important;
    }

    body.dark-mode .form-group .hint {
      color: #6b7a99 !important;
    }

    body.dark-mode .form-section {
      background: #232b3e !important;
      border-color: #3a4460 !important;
    }

    body.dark-mode .form-section-title {
      color: #b8c4d8 !important;
    }

    body.dark-mode .btn-outline {
      color: #d4dcef !important;
      border-color: #3a4460 !important;
      background: transparent !important;
    }

    body.dark-mode .btn-outline:hover {
      background: #28304a !important;
    }

    body.dark-mode .btn-ghost {
      color: #9aa5be !important;
    }

    /* CYPRESS E2E TESTING OVERRIDES */
    body.cypress-test * {
      transition: none !important;
      animation: none !important;
    }

    body.dark-mode .btn-ghost:hover {
      background: #28304a !important;
    }

    body.dark-mode .btn-navy,
    body.dark-mode .btn-primary {
      background: #3b82f6 !important;
      color: #ffffff !important;
    }

    body.dark-mode .btn-navy:hover,
    body.dark-mode .btn-primary:hover {
      background: #60a5fa !important;
    }

    body.dark-mode .btn-amber {
      background: #f59e0b !important;
      color: #0f172a !important;
    }

    body.dark-mode .btn-amber:hover {
      background: #fbbf24 !important;
    }

    body.dark-mode .btn-green {
      background: #10b981 !important;
      color: #ffffff !important;
    }

    body.dark-mode .btn-green:hover {
      background: #34d399 !important;
    }

    body.dark-mode .btn-red {
      background: #ef4444 !important;
      color: #ffffff !important;
    }

    body.dark-mode .btn-red:hover {
      background: #f87171 !important;
    }

    body.dark-mode .search-bar {
      background: #232b3e !important;
      border-color: #3a4460 !important;
    }

    body.dark-mode .search-bar input {
      background: transparent !important;
      color: #f3f6fb !important;
    }

    body.dark-mode .trip-item {
      background: #1e2538 !important;
      border-color: #28304a !important;
    }

    body.dark-mode .trip-item:hover {
      border-color: #60a5fa !important;
    }

    body.dark-mode .trip-info .trip-resident {
      color: #f3f6fb !important;
    }

    body.dark-mode .trip-info .trip-dest {
      color: #9aa5be !important;
    }

    body.dark-mode .vehicle-status {
      background: #1e2538 !important;
      border-color: #28304a !important;
    }

    body.dark-mode .vehicle-name {
      color: #e8edf7 !important;
    }

    body.dark-mode .vehicle-cap {
      color: #9aa5be !important;
    }

    body.dark-mode #modal-box {
      background: #1e2538 !important;
    }

    body.dark-mode .modal-header {
      border-color: #28304a !important;
    }

    body.dark-mode .modal-header h3 {
      color: #93c5fd !important;
    }

    body.dark-mode .modal-footer {
      border-color: #28304a !important;
    }

    body.dark-mode .modal-body {
      color: #e8edf7 !important;
    }

    body.dark-mode .modal-body input,
    body.dark-mode .modal-body select,
    body.dark-mode .modal-body textarea {
      background: #232b3e !important;
      border-color: #3a4460 !important;
      color: #f3f6fb !important;
    }

    body.dark-mode .distance-result {
      background: #232b3e !important;
      border-color: #3a4460 !important;
      color: #e8edf7 !important;
    }

    body.dark-mode .needs-approval-banner {
      background: linear-gradient(135deg, #2d2200, #3b2e00) !important;
      border-color: #78580a !important;
      color: #fcd34d !important;
    }

    body.dark-mode .alert-warning {
      background: #2d2200 !important;
      border-color: #78580a !important;
      color: #fcd34d !important;
    }

    body.dark-mode .alert-error {
      background: #2d0a0a !important;
      border-color: #7f1d1d !important;
      color: #fca5a5 !important;
    }

    body.dark-mode .alert-success {
      background: #052e1a !important;
      border-color: #065f46 !important;
      color: #6ee7b7 !important;
    }

    body.dark-mode .alert-info {
      background: #0c1d3d !important;
      border-color: #1e3a8a !important;
      color: #93c5fd !important;
    }

    body.dark-mode .alert-title {
      color: inherit !important;
    }

    /* Status badges — dark-mode variants (match the alert palette so colored
       chips don't stay light in dark mode). .badge-gray already adapts via the
       inverted --gray vars, so it is intentionally left alone. */
    body.dark-mode .badge-green {
      background: #052e1a !important;
      color: #6ee7b7 !important;
    }

    body.dark-mode .badge-amber {
      background: #2d2200 !important;
      color: #fcd34d !important;
    }

    body.dark-mode .badge-red {
      background: #2d0a0a !important;
      color: #fca5a5 !important;
    }

    body.dark-mode .badge-blue {
      background: #0c1d3d !important;
      color: #93c5fd !important;
    }

    body.dark-mode .badge-purple {
      background: #1e1538 !important;
      color: #c4b5fd !important;
    }

    body.dark-mode .badge-navy {
      background: #0c1d3d !important;
      color: #93c5fd !important;
    }

    body.dark-mode .login-card {
      background: #1e2538 !important;
    }

    body.dark-mode .login-logo h1 {
      color: #93c5fd !important;
    }

    body.dark-mode .login-logo p {
      color: #9aa5be !important;
    }

    body.dark-mode .login-card label {
      color: #d4dcef !important;
    }

    body.dark-mode .login-card input {
      background: #232b3e !important;
      border-color: #3a4460 !important;
      color: #f3f6fb !important;
    }

    body.dark-mode .login-error {
      background: #2d0a0a !important;
      border-color: #7f1d1d !important;
      color: #fca5a5 !important;
    }

    body.dark-mode .login-footer {
      color: #6b7a99 !important;
    }

    body.dark-mode .view-header h2 {
      color: #93c5fd !important;
    }

    body.dark-mode .trip-time {
      color: #93c5fd !important;
    }

    body.dark-mode .distance-result .dist-value {
      color: #93c5fd !important;
    }

    /* File screen dark overrides */
    body.dark-mode #file-screen>div {
      background: #1e2538 !important;
    }

    body.dark-mode #file-screen h2 {
      color: #93c5fd !important;
    }

    body.dark-mode #file-screen>div>p {
      color: #9aa5be !important;
    }

    body.dark-mode #file-screen button[onclick] {
      background: #232b3e !important;
      border-color: #3a4460 !important;
    }

    body.dark-mode #file-screen button[onclick]:hover {
      border-color: #60a5fa !important;
    }

    body.dark-mode #file-screen button[onclick] strong {
      color: #e8edf7 !important;
    }

    body.dark-mode #file-screen button[onclick] span span {
      color: #9aa5be !important;
    }

    body.dark-mode #file-screen div[style*="fffbeb"],
    body.dark-mode #file-screen div[style*="#fffbeb"] {
      background: #2d2200 !important;
      border-color: #78580a !important;
      color: #fcd34d !important;
    }

    body.dark-mode #continue-file-wrap>div {
      border-color: #3a4460 !important;
    }

    body.dark-mode #continue-file-wrap span {
      color: #9aa5be !important;
    }

    /* Audit log inline style overrides */
    body.dark-mode #audit-body div[style*="color:var(--gray700)"] {
      color: #e8edf7 !important;
    }

    body.dark-mode #audit-body div[style*="color:var(--gray500)"] {
      color: #9aa5be !important;
    }

    body.dark-mode #audit-body div[style*="color:var(--gray400)"] {
      color: #6b7a99 !important;
    }

    body.dark-mode #audit-body div[style*="border-bottom:1px solid var(--gray100)"] {
      border-color: #28304a !important;
    }

    body.dark-mode #audit-body div[style*="padding:0 18px"] {
      color: #e8edf7 !important;
    }

    /* General inline style text color overrides */
    body.dark-mode [style*="color:var(--gray800)"] {
      color: #e8edf7 !important;
    }

    body.dark-mode [style*="color:var(--gray700)"] {
      color: #d4dcef !important;
    }

    body.dark-mode [style*="color:var(--gray600)"] {
      color: #b8c4d8 !important;
    }

    body.dark-mode [style*="color:var(--gray500)"] {
      color: #9aa5be !important;
    }

    body.dark-mode [style*="color:var(--gray400)"] {
      color: #6b7a99 !important;
    }

    body.dark-mode [style*="color:var(--gray900)"] {
      color: #f3f6fb !important;
    }

    body.dark-mode [style*="color:var(--navy)"] {
      color: #93c5fd !important;
    }

    body.dark-mode [style*="background:var(--gray50)"],
    body.dark-mode [style*="background: var(--gray50)"] {
      background: #1c2133 !important;
    }

    body.dark-mode [style*="border-bottom:1px solid var(--gray100)"] {
      border-color: #28304a !important;
    }

    body.dark-mode [style*="border-top:1px solid var(--gray100)"] {
      border-color: #28304a !important;
    }

    body.dark-mode [style*="background:#fffbeb"] {
      background: #2d2200 !important;
      color: #fcd34d !important;
    }

    body.dark-mode [style*="color:#78350f"] {
      color: #fcd34d !important;
    }

    /* Card header, separator */
    body.dark-mode .card-header {
      border-color: #28304a !important;
    }

    body.dark-mode .card-header h3 {
      color: #e8edf7 !important;
    }

    body.dark-mode .separator {
      border-color: #28304a !important;
    }

    body.dark-mode .text-muted {
      color: #9aa5be !important;
    }

    body.dark-mode .nav-section {
      color: rgba(255, 255, 255, 0.3) !important;
    }

    /* Resident history panel */
    body.dark-mode #tf-resident-history {
      background: #232b3e !important;
      border-color: #3a4460 !important;
      color: #e8edf7 !important;
    }

    body.dark-mode #tf-resident-history .rh-item {
      border-color: #28304a !important;
    }

    /* Sync indicator */
    .sync-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }

    .sync-dot.synced {
      background: #10b981;
      box-shadow: 0 0 4px #10b981;
    }

    .sync-dot.cache-only {
      background: #ef4444;
      box-shadow: 0 0 4px #ef4444;
    }

    /* Dark mode toggle button */
    .dark-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 20px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.5);
      font-size: 13px;
      transition: color 0.15s;
      user-select: none;
      border: none;
      background: none;
      font-family: inherit;
      width: 100%;
      text-align: left;
    }

    .dark-toggle:hover {
      color: rgba(255, 255, 255, 0.85);
    }

    .dark-toggle-track {
      width: 32px;
      height: 18px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 99px;
      position: relative;
      transition: background 0.2s;
      flex-shrink: 0;
    }

    .dark-toggle-track.on {
      background: var(--amber);
    }

    .dark-toggle-knob {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 14px;
      height: 14px;
      background: white;
      border-radius: 50%;
      transition: left 0.2s;
    }

    .dark-toggle-track.on .dark-toggle-knob {
      left: 16px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      background: var(--gray100);
      color: var(--gray900);
    }

    /* ============ LOGIN ============ */
    #login-screen {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy3) 60%, #2d5986 100%);
      position: relative;
      overflow: hidden;
    }

    #login-screen::before {
      content: '';
      position: absolute;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
      top: -200px;
      right: -100px;
      pointer-events: none;
    }

    .login-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 48px 44px;
      width: 380px;
      box-shadow: var(--shadow-lg);
      position: relative;
      z-index: 1;
    }

    .login-logo {
      text-align: center;
      margin-bottom: 32px;
    }

    .login-logo .logo-icon {
      font-size: 36px;
      display: block;
      margin-bottom: 8px;
    }

    .login-logo h1 {
      font-family: 'Bebas Neue', cursive;
      font-size: 32px;
      letter-spacing: 2px;
      color: var(--navy);
    }

    .login-logo p {
      color: var(--gray500);
      font-size: 13px;
      margin-top: 2px;
    }

    .login-card label {
      display: block;
      font-weight: 600;
      color: var(--gray700);
      margin-bottom: 6px;
      font-size: 13px;
    }

    .login-card input {
      width: 100%;
      padding: 10px 14px;
      border: 1.5px solid var(--gray200);
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 14px;
      color: var(--gray900);
      outline: none;
      transition: border-color 0.2s;
      margin-bottom: 16px;
    }

    .login-card input:focus {
      border-color: var(--navy3);
    }

    .login-error {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: var(--red2);
      padding: 10px 14px;
      border-radius: var(--radius);
      margin-bottom: 16px;
      font-size: 13px;
      display: none;
    }

    .btn-primary {
      width: 100%;
      padding: 12px;
      background: var(--navy);
      color: #fff; /* literal — --white flips to a dark card color in dark mode */
      border: none;
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
      letter-spacing: 0.3px;
    }

    .btn-primary:hover {
      background: var(--navy3);
    }

    .login-footer {
      text-align: center;
      margin-top: 20px;
      color: var(--gray400);
      font-size: 12px;
    }

    /* ============ APP SHELL ============ */
    #app {
      display: none;
      height: 100vh;
      flex-direction: row;
    }

    #app.visible {
      display: flex;
    }

    /* ============ SIDEBAR ============ */
    #sidebar {
      width: var(--sidebar-w);
      background: var(--navy);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      overflow-y: auto;
    }

    .sidebar-logo {
      padding: 20px 20px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .sidebar-logo .logo-mark {
      font-size: 20px;
      display: inline-block;
      margin-right: 8px;
    }

    .sidebar-logo h2 {
      font-family: 'Bebas Neue', cursive;
      color: #fff; /* literal — --white flips to a dark card color in dark mode */
      font-size: 22px;
      letter-spacing: 2px;
      display: inline;
    }

    .sidebar-logo p {
      color: rgba(255, 255, 255, 0.4);
      font-size: 11px;
      margin-top: 4px;
      line-height: 1.4;
    }

    .sidebar-user {
      padding: 14px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sidebar-user .avatar {
      width: 32px;
      height: 32px;
      background: var(--amber);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 13px;
      color: var(--navy);
      flex-shrink: 0;
    }

    .sidebar-user .user-info {
      flex: 1;
      min-width: 0;
    }

    .sidebar-user .user-name {
      color: #fff; /* literal — --white flips to a dark card color in dark mode */
      font-weight: 600;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-user .user-role {
      color: rgba(255, 255, 255, 0.4);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .sidebar-nav {
      flex: 1;
      padding: 12px 0;
    }

    .nav-section {
      padding: 6px 20px 4px;
      color: rgba(255, 255, 255, 0.25);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
      margin-top: 8px;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 20px;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      transition: all 0.15s;
      font-size: 13.5px;
      font-weight: 500;
      position: relative;
    }

    button.nav-item {
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      font-family: inherit;
      line-height: inherit;
    }

    .nav-item:hover {
      color: #fff; /* literal — --white flips to a dark card color in dark mode */
      background: rgba(255, 255, 255, 0.05);
    }

    .nav-item.active {
      color: #fff; /* literal — --white flips to a dark card color in dark mode */
      background: rgba(255, 255, 255, 0.08);
    }

    .nav-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 4px;
      width: 3px;
      background: var(--amber);
      border-radius: 0 2px 2px 0;
    }

    .nav-item .nav-icon {
      font-size: 16px;
      width: 20px;
      text-align: center;
    }

    .nav-badge {
      margin-left: auto;
      background: var(--red);
      color: white;
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 99px;
      min-width: 18px;
      text-align: center;
    }

    .sidebar-bottom {
      padding: 12px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    /* ============ MAIN ============ */
    #main {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .view {
      display: none;
      flex-direction: column;
      flex: 1;
    }

    .view.active {
      display: flex;
    }

    .view-header {
      background: var(--white);
      padding: 18px 28px;
      border-bottom: 1px solid var(--gray200);
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    .view-header h2 {
      font-family: 'Bebas Neue', cursive;
      font-size: 26px;
      letter-spacing: 1.5px;
      color: var(--navy);
      flex: 1;
    }

    .view-header p {
      color: var(--gray500);
      font-size: 13px;
    }

    .view-body {
      padding: 24px 28px;
      flex: 1;
    }

    /* ============ BUTTONS ============ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: var(--radius);
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      transition: all 0.15s;
      text-decoration: none;
      white-space: nowrap;
    }

    .btn-sm {
      padding: 5px 12px;
      font-size: 12.5px;
    }

    .btn-lg {
      padding: 11px 22px;
      font-size: 15px;
    }

    .btn-navy {
      background: var(--navy);
      color: #fff; /* literal — --white flips to a dark card color in dark mode */
    }

    .btn-navy:hover {
      background: var(--navy3);
    }

    .btn-amber {
      background: var(--amber);
      color: var(--navy);
    }

    .btn-amber:hover {
      background: var(--amber2);
    }

    .btn-green {
      background: var(--green);
      color: #fff; /* literal — --white flips to a dark card color in dark mode */
    }

    .btn-green:hover {
      background: var(--green2);
    }

    .btn-red {
      background: var(--red);
      color: #fff; /* literal — --white flips to a dark card color in dark mode */
    }

    .btn-red:hover {
      background: var(--red2);
    }

    .btn-outline {
      background: transparent;
      color: var(--gray700);
      border: 1.5px solid var(--gray300);
    }

    .btn-outline:hover {
      border-color: var(--gray500);
      background: var(--gray50);
    }

    .btn-ghost {
      background: transparent;
      color: var(--gray600);
      border: none;
    }

    .btn-ghost:hover {
      background: var(--gray100);
    }

    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* ============ CARDS ============ */
    .card {
      background: var(--white);
      border-radius: var(--radius-lg);
      border: 1px solid var(--gray200);
      overflow: hidden;
    }

    .card-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--gray100);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .card-header h3 {
      font-weight: 700;
      font-size: 14px;
      color: var(--gray800);
      flex: 1;
    }

    .card-body {
      padding: 20px;
    }

    /* ============ STATS ============ */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    .stat-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      border: 1px solid var(--gray200);
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .stat-card .stat-label {
      color: var(--gray500);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .stat-card .stat-value {
      font-family: 'Bebas Neue', cursive;
      font-size: 34px;
      letter-spacing: 1px;
      color: var(--navy);
      line-height: 1;
    }

    .stat-card .stat-sub {
      font-size: 12px;
      color: var(--gray400);
    }

    .stat-card.amber {
      border-left: 3px solid var(--amber);
    }

    .stat-card.green {
      border-left: 3px solid var(--green);
    }

    .stat-card.red {
      border-left: 3px solid var(--red);
    }

    .stat-card.blue {
      border-left: 3px solid var(--blue);
    }

    /* ============ BADGES ============ */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 9px;
      border-radius: 99px;
      font-size: 11.5px;
      font-weight: 600;
      gap: 4px;
    }

    .badge-green {
      background: #d1fae5;
      color: #065f46;
    }

    .badge-amber {
      background: #fef3c7;
      color: #92400e;
    }

    .badge-red {
      background: #fee2e2;
      color: #991b1b;
    }

    .badge-blue {
      background: #dbeafe;
      color: #1e40af;
    }

    .badge-gray {
      background: var(--gray100);
      color: var(--gray600);
    }

    .badge-purple {
      background: #ede9fe;
      color: #5b21b6;
    }

    .badge-navy {
      background: #e0eaff;
      color: var(--navy);
    }

    /* ============ TABLE ============ */
    .table-wrap {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    thead th {
      padding: 10px 14px;
      text-align: left;
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--gray500);
      background: var(--gray50);
      border-bottom: 1px solid var(--gray200);
    }

    tbody tr {
      border-bottom: 1px solid var(--gray100);
      transition: background 0.1s;
    }

    tbody tr:hover {
      background: var(--gray50);
    }

    tbody tr:last-child {
      border-bottom: none;
    }

    tbody td {
      padding: 11px 14px;
      font-size: 13.5px;
      color: var(--gray800);
      vertical-align: middle;
    }

    .clickable-row {
      cursor: pointer;
    }

    /* ============ FORMS ============ */
    .form-grid {
      display: grid;
      gap: 16px;
    }

    .form-grid-2 {
      grid-template-columns: 1fr 1fr;
    }

    .form-grid-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .form-group.full {
      grid-column: 1 / -1;
    }

    .form-group label {
      font-size: 13px;
      font-weight: 600;
      color: var(--gray700);
    }

    .form-group label .required {
      color: var(--red);
      margin-left: 2px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      padding: 9px 12px;
      border: 1.5px solid var(--gray200);
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 13.5px;
      color: var(--gray900);
      outline: none;
      transition: border-color 0.2s;
      background: var(--white);
      width: 100%;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--navy3);
      box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.06);
    }

    .form-group textarea {
      min-height: 80px;
      resize: vertical;
    }

    .form-group .hint {
      font-size: 12px;
      color: var(--gray400);
      margin-top: 2px;
    }

    .form-group .field-error {
      font-size: 12px;
      color: var(--red);
      margin-top: 2px;
    }

    .form-check {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .form-check input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--navy);
    }

    .form-check label {
      font-size: 13.5px;
      color: var(--gray700);
      cursor: pointer;
      font-weight: 500;
    }

    .form-section {
      padding: 20px;
      border: 1px solid var(--gray200);
      border-radius: var(--radius-lg);
      background: var(--gray50);
    }

    .form-section-title {
      font-weight: 700;
      font-size: 13px;
      color: var(--gray700);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* ============ ALERTS ============ */
    .alert {
      padding: 12px 16px;
      border-radius: var(--radius);
      font-size: 13.5px;
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    .alert-icon {
      font-size: 16px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .alert-content {
      flex: 1;
    }

    .alert-title {
      font-weight: 700;
      margin-bottom: 2px;
    }

    .alert-list {
      margin-top: 4px;
      padding-left: 16px;
    }

    .alert-list li {
      margin-bottom: 2px;
    }

    .alert-warning {
      background: #fffbeb;
      border: 1px solid #fde68a;
      color: #78350f;
    }

    .alert-error {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #7f1d1d;
    }

    .alert-success {
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      color: #064e3b;
    }

    .alert-info {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1e3a8a;
    }

    /* ============ MODAL ============ */
    #modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 20px;
    }

    #modal-overlay.open {
      display: flex;
    }

    #modal-box {
      background: var(--white);
      border-radius: var(--radius-lg);
      width: 100%;
      max-width: 640px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shadow-lg);
      display: flex;
      flex-direction: column;
    }

    .modal-header {
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--gray100);
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .modal-header h3 {
      font-family: 'Bebas Neue', cursive;
      font-size: 22px;
      letter-spacing: 1px;
      color: var(--navy);
      flex: 1;
    }

    .modal-body {
      padding: 24px;
      flex: 1;
      overflow-y: auto;
    }

    .modal-footer {
      padding: 16px 24px;
      border-top: 1px solid var(--gray100);
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      flex-shrink: 0;
      /* Must wrap: with flex-end, an overflowing row clips its LEFTMOST
         buttons (the Edit button vanished when Mark Out was added). */
      flex-wrap: wrap;
    }
    /* Slightly more compact buttons in the footer so the trip modal's full set
       (up to eight, incl. Text Resident/Driver) fits on one row before wrapping. */
    .modal-footer .btn {
      padding: 10px 16px;
      font-size: 14px;
    }

    /* Needs the #id in the selector: #modal-box's max-width:640px is an ID
       rule and outranks any bare class — .modal-box-lg alone never applied. */
    #modal-box.modal-box-lg {
      /* Wide enough for the trip modal's footer buttons (now up to eight, incl.
         Text Resident + Text Driver) on one row; wrap remains the fallback. */
      max-width: 1080px;
    }

    /* ============ TOAST ============ */
    #toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .toast {
      padding: 12px 18px;
      border-radius: var(--radius);
      color: white;
      font-size: 13.5px;
      font-weight: 500;
      box-shadow: var(--shadow-md);
      display: flex;
      align-items: center;
      gap: 8px;
      animation: slideIn 0.2s ease;
      max-width: 320px;
    }

    .toast-success {
      background: var(--green);
    }

    .toast-error {
      background: var(--red);
    }

    .toast-warning {
      background: var(--amber2);
    }

    .toast-info {
      background: var(--navy3);
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(20px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* ============ TRIP CARD ============ */
    .trip-item {
      display: flex;
      gap: 14px;
      padding: 14px 16px;
      border: 1px solid var(--gray200);
      border-radius: var(--radius);
      background: var(--white);
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.15s;
      align-items: flex-start;
    }

    .trip-item:hover {
      border-color: var(--navy3);
      box-shadow: var(--shadow-md);
    }

    .trip-time {
      font-family: 'Bebas Neue', cursive;
      font-size: 22px;
      color: var(--navy);
      letter-spacing: 0.5px;
      line-height: 1;
      min-width: 50px;
      text-align: center;
    }

    .trip-time .am-pm {
      font-family: 'DM Sans', sans-serif;
      font-size: 10px;
      font-weight: 600;
      color: var(--gray400);
      display: block;
    }

    .trip-divider {
      width: 2px;
      background: var(--gray200);
      border-radius: 2px;
      align-self: stretch;
    }

    .trip-info {
      flex: 1;
      min-width: 0;
    }

    .trip-info .trip-resident {
      font-weight: 700;
      font-size: 14px;
      color: var(--gray900);
      margin-bottom: 3px;
    }

    .trip-info .trip-dest {
      color: var(--gray500);
      font-size: 13px;
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .trip-meta {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .trip-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: flex-end;
    }

    /* ============ TIMELINE ============ */
    .timeline {
      position: relative;
      padding-left: 28px;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 10px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--gray200);
    }

    .tl-item {
      position: relative;
      margin-bottom: 16px;
    }

    .tl-item::before {
      content: '';
      position: absolute;
      left: -22px;
      top: 6px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--navy3);
      border: 2px solid var(--white);
      box-shadow: 0 0 0 1px var(--navy3);
    }

    .tl-item.status-approved::before {
      background: var(--green);
      box-shadow: 0 0 0 1px var(--green);
    }

    .tl-item.status-needsApproval::before {
      background: var(--amber);
      box-shadow: 0 0 0 1px var(--amber);
    }

    .tl-item.status-cancelled::before {
      background: var(--gray300);
      box-shadow: 0 0 0 1px var(--gray300);
    }

    .tl-item.status-completed::before {
      background: var(--blue);
      box-shadow: 0 0 0 1px var(--blue);
    }

    /* ============ VEHICLE BAR ============ */
    .vehicle-status {
      background: var(--white);
      border: 1px solid var(--gray200);
      border-radius: var(--radius-lg);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .vehicle-icon {
      font-size: 28px;
    }

    .vehicle-info {
      flex: 1;
    }

    .vehicle-name {
      font-weight: 700;
      font-size: 14px;
      color: var(--gray800);
    }

    .vehicle-cap {
      font-size: 12px;
      color: var(--gray500);
    }

    .vehicle-bar {
      flex: 2;
    }

    .cap-bar {
      height: 8px;
      background: var(--gray100);
      border-radius: 99px;
      overflow: hidden;
      margin-top: 4px;
    }

    .cap-fill {
      height: 100%;
      background: var(--green);
      border-radius: 99px;
      transition: width 0.3s;
    }

    .cap-fill.warn {
      background: var(--amber);
    }

    .cap-fill.full {
      background: var(--red);
    }

    /* ============ SEARCH BAR ============ */
    .search-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--white);
      border: 1.5px solid var(--gray200);
      border-radius: var(--radius);
      padding: 8px 14px;
      transition: border-color 0.2s;
    }

    .search-bar:focus-within {
      border-color: var(--navy3);
    }

    .search-bar input {
      border: none;
      outline: none;
      font-family: inherit;
      font-size: 13.5px;
      flex: 1;
    }

    .search-bar .search-icon {
      color: var(--gray400);
    }

    /* ============ EMPTY STATE ============ */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--gray400);
    }

    .empty-state .empty-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }

    .empty-state h3 {
      font-size: 15px;
      font-weight: 600;
      color: var(--gray600);
      margin-bottom: 6px;
    }

    .empty-state p {
      font-size: 13px;
    }

    /* ============ MISC ============ */
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .three-col {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
    }

    .hidden {
      display: none !important;
    }

    .flex {
      display: flex;
    }

    .flex-center {
      display: flex;
      align-items: center;
    }

    .gap-2 {
      gap: 8px;
    }

    .gap-3 {
      gap: 12px;
    }

    .mb-4 {
      margin-bottom: 16px;
    }

    .mb-6 {
      margin-bottom: 24px;
    }

    .text-sm {
      font-size: 12.5px;
    }

    .text-muted {
      color: var(--gray500);
    }

    .font-bold {
      font-weight: 700;
    }

    .separator {
      border: none;
      border-top: 1px solid var(--gray100);
      margin: 20px 0;
    }

    .needs-approval-banner {
      background: linear-gradient(135deg, #fffbeb, #fef3c7);
      border: 1px solid #fde68a;
      border-radius: var(--radius);
      padding: 10px 14px;
      font-size: 13px;
      color: #78350f;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .distance-result {
      background: var(--gray50);
      border: 1px solid var(--gray200);
      border-radius: var(--radius);
      padding: 12px 14px;
      font-size: 13px;
    }

    .distance-result .dist-value {
      font-family: 'Bebas Neue', cursive;
      font-size: 24px;
      color: var(--navy);
    }

    /* ============ PRINT STYLES ============ */
    @media print {
      #app {
        display: block !important;
      }

      #sidebar,
      .view-header .btn,
      .no-print {
        display: none !important;
      }

      #main {
        overflow: visible;
      }

      .view {
        display: none !important;
      }

      .view.print-active {
        display: block !important;
      }

      body {
        background: white;
        font-size: 10.5px;
      }

      /* Tighter driver sheet table for more trips per page */
      #print-sheet-content table {
        font-size: 10px;
      }

      #print-sheet-content thead th {
        padding: 4px 6px;
        font-size: 9px;
      }

      #print-sheet-content tbody td {
        padding: 4px 6px;
        font-size: 10px;
      }

      #print-sheet-content > div {
        max-width: 100% !important;
      }

      .print-doc {
        max-width: 700px;
        margin: 0 auto;
        font-family: 'DM Sans', sans-serif;
      }

      .print-header {
        border-bottom: 3px solid #0d1f35;
        padding-bottom: 12px;
        margin-bottom: 16px;
      }

      .print-header h1 {
        font-family: 'Bebas Neue', cursive;
        font-size: 24px;
        letter-spacing: 1px;
      }

      .print-header p {
        font-size: 11px;
        color: #475569;
      }

      .print-section {
        margin-bottom: 16px;
      }

      .print-section h2 {
        font-size: 13px;
        font-weight: 700;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 4px;
        margin-bottom: 8px;
      }

      .print-field {
        display: flex;
        margin-bottom: 4px;
        font-size: 12px;
      }

      .print-field .pf-label {
        min-width: 160px;
        font-weight: 600;
        color: #475569;
      }

      .print-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
      }

      .print-table th {
        background: #f1f5f9;
        padding: 6px 10px;
        text-align: left;
        font-weight: 700;
        border: 1px solid #e2e8f0;
      }

      .print-table td {
        padding: 6px 10px;
        border: 1px solid #e2e8f0;
        vertical-align: top;
      }

      .print-status {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 99px;
        font-weight: 700;
        font-size: 11px;
      }

      .print-status.approved {
        background: #d1fae5;
        color: #065f46;
      }

      .print-status.needs-approval {
        background: #fef3c7;
        color: #92400e;
      }

      .print-status.pending {
        background: #e0eaff;
        color: #1e3a8a;
      }

      .print-reminder {
        background: #fff8e1;
        border: 2px solid #f59e0b;
        padding: 10px 14px;
        border-radius: 6px;
        margin-top: 12px;
        font-weight: 600;
        font-size: 12px;
      }

      .print-signature {
        margin-top: 24px;
        display: flex;
        gap: 40px;
      }

      .print-sig-line {
        flex: 1;
        border-top: 1px solid #0d1f35;
        padding-top: 4px;
        font-size: 11px;
        color: #475569;
      }

      .page-break {
        page-break-before: always;
      }
    }

    /* =========================================
   MOBILE TRIAGE CSS
   ========================================= */
/* Trimmed-down driver experience: hide controls drivers don't need.
   Toggled by the body.role-driver class set in updateSidebarUser(). */
.role-driver .driver-hidden { display: none !important; }

@media (max-width: 768px) {
  /* The real flex container is #app (not body) — stack it vertically so the
     sidebar sits on top and the content gets the full screen width. */
  #app.visible {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  /* Sidebar becomes a compact top bar; its sections still stack vertically. */
  #sidebar {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    overflow-y: visible;
  }
  .sidebar-logo { padding: 12px 16px; }
  .sidebar-logo p { display: none; }            /* hide tagline to save height */

  /* Turn the nav list into a horizontal scrolling strip of buttons. */
  .sidebar-nav {
    flex: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 8px 10px;
  }
  .nav-section { display: none; }               /* section labels don't fit a strip */
  .nav-item {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 8px;
  }
  button.nav-item { width: auto; }
  .nav-item.active::before { display: none; }    /* left accent bar doesn't suit a strip */
  .nav-item.active { background: rgba(255, 255, 255, 0.14); }
  .sidebar-bottom { border-top: none; padding: 0 10px 8px; }

  /* Main content fills the width and scrolls with the page. */
  #main {
    width: 100%;
    height: auto;
    overflow-y: visible;
  }

  /* Headers / toolbars wrap instead of overflowing off-screen. */
  .view-header {
    flex-wrap: wrap;
    padding: 14px 16px;
    gap: 10px;
  }
  .view-header h2 { font-size: 22px; flex: 1 1 100%; }
  .view-header .flex { flex-wrap: wrap; width: 100%; }
  .view-body { padding: 16px; }

  /* Filter/date/select controls become easy to tap. */
  .view-header input,
  .view-header select { flex: 1 1 auto; min-width: 0; }

  /* Multi-column forms collapse to a single column. */
  .form-grid-2,
  .form-grid-3 { grid-template-columns: 1fr; }

  /* Modals fill the small screen; footer buttons stack full-width. */
  #modal-box,
  .modal-box-lg { max-width: 100%; max-height: 95vh; }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; }

  /* Wide tables (staff, audit) scroll sideways instead of breaking the layout. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* iOS input auto-zoom fix: Safari zooms the page when focusing any control
     with font-size < 16px and NEVER zooms back out, leaving the layout wider
     than the screen — the page then "floats"/pans in every direction. 16px on
     mobile kills the zoom at the source (and bigger tap targets suit this
     audience anyway). !important beats the handful of inline 13.5px styles on
     the trip form's staff/destination selects. Do NOT "fix" this with
     maximum-scale=1 on the viewport meta — it breaks pinch-zoom on Android. */
  input, select, textarea { font-size: 16px !important; }

  /* Safety net: no single wide element (long unbroken address, wide row) may
     make the whole page horizontally draggable. Tables still scroll inside
     their own .table-wrap. */
  html, body { overflow-x: hidden; }
}

/* ============ VERSION UPDATE BANNER ============ */
.version-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.version-banner-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.version-banner-msg {
  flex: 1;
}

.version-banner-reload {
  background: var(--amber);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.version-banner-reload:hover {
  background: var(--amber2);
}

.version-banner-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.15s;
}

.version-banner-dismiss:hover {
  color: #fff;
}
/* ============================================
   BILLING BANNER (trial countdown / read-only)
   ============================================ */
.billing-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  padding: 11px 20px;
  text-align: center;
  font-size: 13.5px;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.18);
}
.billing-banner a { color: inherit; font-weight: 700; }
.billing-banner.trial { background: #fef3c7; color: #92400e; border-top: 2px solid var(--amber); }
.billing-banner.blocked { background: #fee2e2; color: #991b1b; border-top: 2px solid var(--red); }
body.dark-mode .billing-banner.trial { background: #451a03; color: #fcd34d; }
body.dark-mode .billing-banner.blocked { background: #450a0a; color: #fca5a5; }