html, body { margin:0; padding:0; height:100%; overflow:hidden; }
    body { font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; background:#F4F5F7; }

    /* ── Root shell — CSS Grid: sidebar first col → RTL places it on the RIGHT ── */
    #shell { display:grid; grid-template-columns:220px 1fr; height:100vh; width:100vw; overflow:hidden; }

    /* ══════════════════════════════════════════════════
       CORPORATE DEEP BLUE — Sidebar & Header
       ══════════════════════════════════════════════════ */

    /* ── Sidebar — Deep Royal Blue ── */
    #sidebar {
      width:220px; min-width:220px; max-width:220px;
      background:#1E3A8A;
      display:flex; flex-direction:column;
      height:100vh; overflow-y:auto;
      scrollbar-width:none;
      position:relative; overflow-x:hidden;
    }
    #sidebar::before {
      content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(700px 280px at 100% 0%,  rgba(255,255,255,0.06), transparent 55%),
        radial-gradient(500px 300px at 0%   100%, rgba(59,130,246,0.12),  transparent 55%);
    }
    #sidebar > * { position:relative; z-index:1; }
    #sidebar::-webkit-scrollbar { display:none; }

    /* Brand area */
    #sidebar-brand-row {
      padding:14px 16px 12px;
      border-bottom:1px solid rgba(255,255,255,0.12);
      display:flex; align-items:center; gap:10px;
    }

    /* Logo badge — white/translucent on blue */
    #sidebar-logo-wrap {
      width:36px; height:36px; border-radius:8px; flex-shrink:0;
      background:rgba(255,255,255,0.15);
      display:flex; align-items:center; justify-content:center;
      overflow:hidden;
    }
    #sidebar-logo-initials {
      color:#fff; font-size:14px; font-weight:800; letter-spacing:-0.5px;
    }
    #sidebar-logo-img { width:100%; height:100%; object-fit:cover; display:none; }

    #sidebar-agency-name {
      color:#fff; font-size:15px; font-weight:600; letter-spacing:-0.3px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    #brand-sub { color:rgba(255,255,255,0.55); font-size:10px; margin-top:1px; }

    /* Main takes ALL remaining width */
    #main {
      flex:1 1 0%; min-width:0;
      display:flex; flex-direction:column;
      height:100vh; overflow:hidden;
    }

    /* ── Header ── */
    #header {
      flex-shrink:0; height:54px;
      background:rgba(255,255,255,0.92);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(0,0,0,0.07);
      display:flex; align-items:center;
      padding:0 16px; gap:8px;
      justify-content:space-between;
      position:sticky; top:0; z-index:30;
      transition:background 0.2s, border-color 0.2s;
    }

    /* Dark mode header */
    .dark-theme #header {
      background:rgba(15,23,42,0.92);
      border-bottom-color:rgba(255,255,255,0.07);
    }
    .dark-theme .page-header {
      background:rgba(13,17,23,0.8);
      border-bottom-color:rgba(255,255,255,0.06);
    }

    #content {
      flex:1 1 0%; overflow-y:auto;
      padding:20px 28px 36px;
      display:flex; flex-direction:column; gap:16px;
    }
    #content::-webkit-scrollbar { width:4px; }
    #content::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }

    /* ── Nav items — Corporate deep blue style ── */
    .nav-item {
      display:flex; align-items:center; gap:11px;
      padding:9px 12px; margin:1px 8px;
      border-radius:10px; border:none;
      color:rgba(255,255,255,0.72);
      cursor:pointer; transition:background 0.15s, color 0.15s;
      font-size:13px; font-weight:500; white-space:nowrap;
    }
    .nav-item:hover  { background:rgba(255,255,255,0.10); color:#fff; }
    .nav-item.active { background:rgba(255,255,255,0.18); color:#fff; font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.22); }
    .nav-item.active i { color:#fff; }
    .nav-item i      { font-size:17px; flex-shrink:0; width:18px; text-align:center; }
    .nav-item:hover i { opacity:1; }

    /* Logout row */
    #sidebar-logout {
      padding:10px 18px; margin:0;
      display:flex; align-items:center; gap:10px;
      cursor:pointer; color:rgba(255,255,255,0.5);
      font-size:13px; transition:background 0.15s, color 0.15s;
      border:none;
    }
    #sidebar-logout:hover {
      background:rgba(255,255,255,0.08);
      color:#fff;
    }
    #sidebar-logout i { font-size:18px; flex-shrink:0; }

    /* Settings separator */
/* ════════════════════════════════════════════
       MOBILE BOTTOM NAV — always hidden on desktop
       ════════════════════════════════════════════ */
    #mob-nav { display: none; }

/* ════════════════════════════════════════════
       MOBILE RESPONSIVE — iPhone & small screens
       ════════════════════════════════════════════ */
    @media (max-width: 600px) {

      /* ── Shell: single column, full viewport ── */
      #shell {
        display: flex;
        flex-direction: column;
        height: 100svh;
        width: 100vw;
        overflow: hidden;
      }

      /* ── Hide desktop sidebar entirely ── */
      #sidebar { display: none !important; }

      /* ── Main fills remaining space above bottom nav ── */
      #main {
        flex: 1 1 0%;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      /* ── Header: slimmer, mobile-optimised ── */
      #header {
        height: 52px;
        padding: 0 14px;
        gap: 8px;
      }
      /* Hide search bar on mobile to save space */
      #header .search-bar-wrap { display: none; }
      /* New booking button stays, shrink slightly */
      .btn-new-booking { height: 30px; padding: 0 13px; font-size: 11px; }

      /* ── Scrollable content: account for bottom nav height ── */
      #content {
        padding: 14px 14px 20px;
        gap: 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      /* ── HERO BANNER — premium dark gradient card ── */
      .dash-hero {
        border-radius: 20px;
        padding: 20px 18px 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        background:
          radial-gradient(ellipse 80% 60% at 110% -10%, rgba(59,130,246,0.30), transparent 60%),
          radial-gradient(ellipse 60% 80% at -10% 110%, rgba(30,58,138,0.40), transparent 55%),
          linear-gradient(145deg, #0f1c3f 0%, #1E3A8A 55%, #1e40af 100%);
        border: 1px solid rgba(59,130,246,0.20);
        box-shadow: 0 8px 32px rgba(15,28,63,0.40), 0 1px 0 rgba(255,255,255,0.06) inset;
      }
      .dash-hero::after { display: none; }
      .dash-hero-greet {
        font-size: 10px;
        letter-spacing: 0.20em;
        color: rgba(255,255,255,0.45);
      }
      .dash-hero-name {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.5px;
        line-height: 1.15;
        color: #fff;
        margin-top: 4px;
      }
      .dash-hero-sub {
        font-size: 12px;
        line-height: 1.55;
        color: rgba(255,255,255,0.55);
        margin-top: 5px;
      }
      .dash-hero-pills {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .dash-hero-pill {
        padding: 6px 13px;
        font-size: 11px;
        border-radius: 999px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.13);
        color: rgba(255,255,255,0.82);
        backdrop-filter: blur(6px);
      }
      .dash-hero-pill .dot-ok {
        width: 6px; height: 6px;
        box-shadow: 0 0 0 3px rgba(74,222,128,0.22);
      }

      /* ── KPI cards: 2-column grid ── */
      .kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
      }
      .kpi-card {
        padding: 14px 14px 12px !important;
        border-radius: 16px !important;
        background: #fff !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
      }
      .kpi-card:active { transform: scale(0.98); }
      .kpi-value { font-size: 20px !important; }
      .kpi-value.sm { font-size: 15px !important; }
      .kpi-icon { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
      .kpi-trend { font-size: 10px; padding: 2px 7px; }
      .kpi-label { font-size: 11px; }
      .kpi-foot  { font-size: 10px; }

      /* ── Performance row: single column ── */
      .perf-row { grid-template-columns: 1fr !important; }

      /* ── Page headers ── */
      .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        min-height: auto !important;
      }

      /* ── Scrollable content areas: clear bottom nav ── */
      .page-content,
      #fleet-content,
      #bookings-content,
      #customers-content,
      #expenses-content,
      #reports-content,
      #settings-content {
        padding-bottom: 90px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
      }

      /* ── Tables: horizontal scroll ── */
      .fleet-table-wrap,
      .page-table-wrap,
      .bk-table-wrap,
      .cx-table-wrap,
      .exp-table-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
      }
      .fleet-table, .page-table, .bk-table, .cx-table, .exp-table {
        min-width: 540px;
      }

      /* ── Modals: full-width sheet ── */
      #modal-box,
      #bk-modal-box,
      #cx-modal-box,
      #exp-modal-box,
      #pay-modal-box {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 88svh !important;
        border-radius: 22px 22px 0 0 !important;
        overflow-y: auto !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        margin: 0 !important;
      }

      /* ── Charts ── */
      #donutChart, #areaChart, #fleetDonut { max-height: 160px !important; }

      /* ── Calendar cells ── */
      .cal-cell { min-height: 22px !important; }
      .cal-bars-body { min-height: 48px; }
      .cal-week { min-height: 70px; }
      .cal-chips-palette { padding: 6px 0 8px; }
      .veh-chip { padding: 4px 7px 4px 5px; font-size: 10px; }

      /* ── Expense summary: single column ── */
      .exp-summary-grid { grid-template-columns: 1fr !important; }

      /* ════════════════════════════════════════
         BOTTOM NAVIGATION BAR
         ════════════════════════════════════════ */
      #mob-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 64px;
        background: rgba(255,255,255,0.96);
        border-top: 1px solid rgba(0,0,0,0.07);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 500;
        padding: 0 4px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
      }

      .dark-theme #mob-nav {
        background: rgba(10,15,30,0.96);
        border-top-color: rgba(255,255,255,0.07);
        box-shadow: 0 -4px 24px rgba(0,0,0,0.30);
      }

      .mob-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: none;
        background: none;
        color: #9ca3af;
        font-size: 10px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        padding: 6px 0 2px;
        border-radius: 12px;
        transition: color 0.15s, background 0.15s;
        -webkit-tap-highlight-color: transparent;
      }
      .mob-nav-btn i { font-size: 22px; line-height: 1; }
      .mob-nav-btn.active { color: #1E3A8A; }
      .mob-nav-btn.active i {
        background: rgba(30,58,138,0.10);
        border-radius: 10px;
        padding: 3px 12px;
      }
      .dark-theme .mob-nav-btn { color: #64748b; }
      .dark-theme .mob-nav-btn.active { color: #93c5fd; }
      .dark-theme .mob-nav-btn.active i { background: rgba(147,197,253,0.12); }

      /* Centre slot that holds the FAB */
      .mob-nav-fab-wrap {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      /* Floating Action Button */
      .mob-fab {
        width: 54px; height: 54px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1E3A8A, #2563eb);
        color: #fff;
        border: none;
        font-size: 24px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 18px rgba(30,58,138,0.45), 0 1px 0 rgba(255,255,255,0.15) inset;
        position: absolute;
        bottom: 8px;
        transition: transform 0.15s, box-shadow 0.15s;
        -webkit-tap-highlight-color: transparent;
      }
      .mob-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(30,58,138,0.35);
      }
      .mob-fab i { font-size: 22px; }
    }

    /* Tablet 601–900px: narrow icon-only sidebar */
    @media (min-width: 601px) and (max-width: 900px) {
      #shell { grid-template-columns: 64px 1fr; }
      #sidebar {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
      }
      .nav-item span, #sidebar-agency-name, #brand-sub { display: none; }
      .nav-item { justify-content: center; padding: 11px 0; margin: 1px 4px; }
      #sidebar-logo-wrap { margin: 0 auto; }
      #sidebar-brand-row { justify-content: center; padding: 14px 0; }
      #sidebar-logout { justify-content: center; padding: 11px 0; margin: 1px 4px; }
      #sidebar-logout span { display: none; }
    }

    /* ═══════════════════════════════════════════════
       DARK MODE THEME — toggled by .dark-theme on body
       Sidebar stays deep royal blue #1E3A8A in both modes.
       ═══════════════════════════════════════════════ */
    body {
      background:#F4F5F7;
      transition:background 0.25s;
    }
    .dark-theme {
      background:#0d1117;
    }

    /* Cards in dark mode → dark glass */
    .dark-theme .card {
      background:rgba(22,33,55,0.85);
      border-color:rgba(255,255,255,0.08);
      color:#e2e8f0;
    }
    .dark-theme .card:hover { box-shadow:0 2px 14px rgba(0,0,0,0.35); }

    /* kpi-card, perf-card in dark mode */
    .dark-theme .kpi-card,
    .dark-theme .perf-card {
      background:rgba(22,33,55,0.85);
      border-color:rgba(255,255,255,0.08);
      color:#e2e8f0;
    }

    /* Text colours in dark mode */
    .dark-theme #content { color:#e2e8f0; }
    .dark-theme #content [style*="color:#9ca3af"],
    .dark-theme #content [style*="color:#6b7280"],
    .dark-theme #content [style*="color:#374151"] { color:#94a3b8 !important; }
    .dark-theme #content [style*="color:#111827"],
    .dark-theme #content [style*="color:#1f2937"] { color:#f1f5f9 !important; }

    /* Search bar in dark mode */
    .dark-theme #header .ti-search { color:#64748b; }
    .dark-theme #search-input { color:#e2e8f0; }
    .dark-theme #search-input::placeholder { color:#475569; }
    .dark-theme .search-bar-wrap {
      background:rgba(30,41,59,0.8) !important;
      border-color:rgba(255,255,255,0.1) !important;
    }

    /* Tables & list rows in dark mode */
    .dark-theme table { color:#e2e8f0; }
    .dark-theme th { background:#131f35 !important; color:#94a3b8 !important; border-color:rgba(255,255,255,0.07) !important; }
    .dark-theme td { border-color:rgba(255,255,255,0.05) !important; color:#cbd5e1 !important; }
    .dark-theme tr:hover td { background:rgba(255,255,255,0.04) !important; }
    .dark-theme .unpaid-row { background:#2a1515 !important; border-color:#7f1d1d !important; }
    .dark-theme .doc-row { background:#1e1a07 !important; border-color:#854d0e !important; }

    /* Dark mode toggle button */
    .btn-darkmode {
      width:34px; height:34px;
      display:flex; align-items:center; justify-content:center;
      padding:0;
      border-radius:8px;
      border:1px solid rgba(0,0,0,0.08);
      background:transparent;
      color:#6b7280; cursor:pointer;
      transition:background 0.18s, color 0.18s, border-color 0.18s;
      flex-shrink:0;
    }
    .btn-darkmode i {
      font-size:16px;
      line-height:1;
      display:block;
      transition:transform 0.2s ease, opacity 0.18s ease;
    }
    .btn-darkmode:hover { background:#f3f4f6; color:#374151; }
    .dark-theme .btn-darkmode {
      border-color:rgba(255,255,255,0.1);
      color:#94a3b8;
    }
    .dark-theme .btn-darkmode:hover { background:rgba(255,255,255,0.08); color:#e2e8f0; }
    .btn-darkmode.active { background:#1e293b; color:#f8fafc; border-color:rgba(255,255,255,0.12); }

    /* ── New Booking Button — lime pill (Mishwar style) ── */
    .btn-new-booking {
      display:flex; align-items:center; gap:6px;
      height:32px; padding:0 16px;
      border-radius:50px;
      background:#c0d850;
      color:#0f1115;
      border:none;
      font-size:12px; font-weight:700;
      cursor:pointer; font-family:inherit;
      white-space:nowrap;
      letter-spacing:0.1px;
      transition:background 0.15s, box-shadow 0.15s;
      flex-shrink:0;
    }
    .btn-new-booking:hover {
      background:#1e40af;
      box-shadow:0 2px 8px rgba(30,58,138,0.35);
    }
    .btn-new-booking i { font-size:13px; }

    /* Dark mode: lime button stays lime (it pops well on dark) */
    .dark-theme .btn-new-booking { background:#c0d850; color:#0f1115; }
    .dark-theme .btn-new-booking:hover { background:#1e40af; }

    /* btn-lang dark mode */
    .dark-theme .btn-lang {
      background:rgba(30,41,59,0.8);
      color:#93c5fd;
      border-color:rgba(255,255,255,0.12);
    }
    .dark-theme .btn-lang:hover { background:rgba(30,64,175,0.3); }

    /* ── Cards ── */
    .card {
      background:#fff;
      border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 3px rgba(0,0,0,0.03);
      transition:box-shadow 0.15s;
    }
    .card:hover { box-shadow:0 4px 18px rgba(0,0,0,0.08); }

    /* ── Dashboard Hero Panel ── */
    .dash-hero {
      background:
        radial-gradient(700px 200px at 100% -20%, rgba(59,130,246,0.25), transparent 55%),
        linear-gradient(135deg, #1E3A8A 0%, #1e40af 60%, #2563eb 100%);
      color:#fff;
      border-radius:16px;
      padding:22px 26px;
      display:flex; align-items:center; gap:16px;
      position:relative; overflow:hidden;
      border:1px solid rgba(30,58,138,0.30);
    }
    .dash-hero::after {
      content:''; position:absolute; inset-inline-end:-60px; top:-60px;
      width:220px; height:220px; border-radius:50%;
      background:radial-gradient(closest-side, rgba(59,130,246,0.20), transparent);
      pointer-events:none;
    }
    .dash-hero-main { flex:1; min-width:0; }
    .dash-hero-greet { font-size:11px; color:rgba(255,255,255,0.50); letter-spacing:0.16em; text-transform:uppercase; }
    .dash-hero-name  { font-size:22px; font-weight:700; margin-top:6px; letter-spacing:-0.01em; color:#fff; }
    .dash-hero-sub   { font-size:12.5px; color:rgba(255,255,255,0.58); margin-top:6px; max-width:520px; }
    .dash-hero-pills { display:flex; gap:8px; align-items:center; flex-wrap:wrap; flex-shrink:0; }
    .dash-hero-pill  {
      background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10);
      padding:7px 14px; border-radius:999px;
      font-size:11.5px; color:rgba(255,255,255,0.80);
      display:flex; align-items:center; gap:8px;
    }
    .dash-hero-pill .dot-ok {
      width:7px; height:7px; border-radius:50%; flex-shrink:0;
      background:#4ADE80;
      box-shadow:0 0 0 4px rgba(74,222,128,0.18);
    }

    /* ── Harbana KPI card internals ── */
    .kpi-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:12px; }
    .kpi-icon {
      width:38px; height:38px; border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      font-size:18px; flex-shrink:0;
    }
    .kpi-trend {
      display:flex; align-items:center; gap:3px;
      font-size:11px; font-weight:600;
      padding:3px 8px; border-radius:999px;
      background:#d1fae5; color:#059669;
      white-space:nowrap;
    }
    .kpi-trend.flat { background:#f1f5f9; color:#64748b; }
    .kpi-trend.down { background:#fee2e2; color:#dc2626; }
    .kpi-label { font-size:11.5px; color:#9ca3af; letter-spacing:0.02em; }
    .kpi-value { font-size:26px; font-weight:700; margin-top:4px; letter-spacing:-0.025em; color:#111827; line-height:1.1; }
    .kpi-value.sm { font-size:18px; }
    .kpi-foot  { font-size:11px; color:#c7d2e8; margin-top:8px; }

    /* ── KPI grid (desktop: 5 cols) ── */
    .kpi-grid {
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:11px;
    }
    .kpi-card {
      background:#fff; border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 3px rgba(0,0,0,0.03);
      padding:16px 18px;
      transition:box-shadow 0.15s;
    }
    .kpi-card:hover { box-shadow:0 4px 18px rgba(0,0,0,0.08); }

    /* ── Performance row (3 cols) ── */
    .perf-row {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:11px;
    }
    .perf-card {
      background:#fff; border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 3px rgba(0,0,0,0.03);
      padding:16px 18px;
    }

    /* Unpaid rows */
    .unpaid-row {
      background:#fff5f5; border:1px solid #fecaca; border-radius:10px;
      display:flex; align-items:center; justify-content:space-between;
      padding:10px 12px; cursor:pointer; transition:background 0.15s;
    }
    .unpaid-row:hover { background:#fee2e2; }

    /* Doc alert rows */
    .doc-row {
      background:#fffbeb; border:1px solid #fde68a; border-radius:10px;
      display:flex; align-items:center; gap:9px; padding:10px 12px;
    }

    /* Chart containers */
    .chart-wrap  { position:relative; width:100%; height:185px; }
    .donut-wrap  { position:relative; width:148px; height:148px; margin:0 auto; }
    .fleet-wrap  { position:relative; width:158px; height:158px; margin:4px auto; }
    .donut-center {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      text-align:center; pointer-events:none;
    }

    /* Buttons */
    .btn-lang {
      display:flex; align-items:center; gap:6px;
      background:rgba(255,255,255,0.7); color:#4f46e5;
      border:1px solid rgba(99,102,241,0.2);
      border-radius:8px; padding:0 13px; height:34px;
      font-size:12px; font-weight:500; cursor:pointer;
      transition:background 0.15s, border-color 0.15s;
      font-family:inherit;
      backdrop-filter:blur(8px);
    }
    .btn-lang:hover { background:rgba(238,242,255,0.95); border-color:rgba(99,102,241,0.4); }
    .btn-outline {
      display:flex; align-items:center; gap:5px;
      background:#fff; color:#374151; border:1px solid rgba(0,0,0,0.09);
      border-radius:8px; padding:0 12px; height:34px;
      font-size:12px; font-weight:500; cursor:pointer;
      transition:background 0.15s; white-space:nowrap; font-family:inherit;
    }
    .btn-outline:hover { background:#f3f6fb; }
    .btn-primary {
      display:flex; align-items:center; gap:5px;
      background:#1E3A8A; color:#fff; border:none;
      border-radius:8px; padding:0 14px; height:34px;
      font-size:12px; font-weight:500; cursor:pointer;
      transition:background 0.15s; white-space:nowrap; font-family:inherit;
    }
    .btn-primary:hover { background:#1e40af; }
    .btn-danger {
      display:flex; align-items:center; gap:5px;
      background:#dc2626; color:#fff; border:none;
      border-radius:8px; padding:0 14px; height:34px;
      font-size:12px; font-weight:500; cursor:pointer;
      transition:background 0.15s; white-space:nowrap; font-family:inherit;
    }
    .btn-danger:hover { background:#b91c1c; }

    /* ── View switching ── */
    .view { display:none; flex-direction:column; flex:1 1 0%; min-width:0; overflow:hidden; }
    .view.active { display:flex; }

    /* ── Unified page layout — applied to all views ──
       Every view follows the same structure:
       .page-header  → fixed title bar (flex-shrink:0)
       .page-content → scrollable content area (flex:1)
       .page-table-wrap → full-width table card
    ── */
    .page-header {
      flex-shrink:0;
      padding:14px 24px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      min-height:60px;
      border-bottom:1px solid rgba(0,0,0,0.06);
      background:rgba(255,255,255,0.75);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    /* In RTL: reverse flex so button (first child) ends up on LEFT
       and title (second child) on RIGHT — matching Arabic reading order */
    html[dir="rtl"] .page-header { flex-direction:row-reverse; }
    html[dir="ltr"] .page-header { flex-direction:row; }
    /* Align title text appropriately per direction */
    html[dir="rtl"] .page-header > div { text-align:right; }
    html[dir="ltr"] .page-header > div { text-align:left; }
    html[dir="rtl"] .page-header-title { text-align:right; }
    html[dir="ltr"] .page-header-title { text-align:left; }
    .page-header-right {
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:2px;
    }
    .page-header-title {
      font-size:20px;
      font-weight:600;
      letter-spacing:-0.3px;
      margin:0;
      color:var(--color-text-primary);
    }
    .page-header-sub {
      font-size:12px;
      color:#9ca3af;
      margin:0;
    }
    .page-content {
      flex:1 1 0%;
      overflow-y:auto;
      padding:16px 24px 28px;
      display:flex;
      flex-direction:column;
      gap:12px;
      min-height:0;
    }
    .page-content::-webkit-scrollbar { width:4px; }
    .page-content::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }

    .page-toolbar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      flex-shrink:0;
    }
    /* In RTL: reverse so search (first child) = RIGHT, filters (second child) = LEFT */
    html[dir="rtl"] .page-toolbar { flex-direction:row-reverse; }
    html[dir="ltr"] .page-toolbar { flex-direction:row; }
    .page-search {
      display:flex;
      align-items:center;
      gap:7px;
      background:#fff;
      border:1px solid rgba(0,0,0,0.08);
      border-radius:9px;
      padding:0 14px;
      height:36px;
      max-width:320px;
      width:100%;
    }
    .page-search input {
      background:none;
      border:none;
      outline:none;
      font-size:13px;
      color:#374151;
      width:100%;
      font-family:inherit;
    }
    .page-table-wrap {
      background:#fff;
      border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 4px rgba(0,0,0,0.04);
      overflow:hidden;
      width:100%;
    }
    .page-table {
      width:100%;
      border-collapse:collapse;
      font-size:13px;
      table-layout:auto;
    }
    .page-table thead tr {
      background:#f8fafc;
      border-bottom:1px solid rgba(0,0,0,0.07);
    }
    .page-table th {
      padding:12px 16px;
      font-size:11px;
      font-weight:600;
      color:#6b7280;
      white-space:nowrap;
      text-align:right;
      letter-spacing:0.03em;
    }
    .page-table td {
      padding:13px 16px;
      border-bottom:1px solid rgba(0,0,0,0.04);
      vertical-align:middle;
      text-align:right;
      color:#1f2937;
    }
    html[dir="ltr"] .page-table th,
    html[dir="ltr"] .page-table td { text-align:left; }

    /* ── Column order fix: direction on <table> controls which side the first <th> appears on.
       RTL → first <th> = FAR RIGHT.   LTR → first <th> = FAR LEFT.
       Our JS arrays always put Actions first (→ far right in RTL) and Photo/Ref last (→ far left in RTL).
       Without this, columns always render left-to-right regardless of html[dir]. ── */
    html[dir="rtl"] .fleet-table,


    html[dir="ltr"] .fleet-table,

    .page-table tbody tr:last-child td { border-bottom:none; }
    .page-table tbody tr:hover { background:#f8faff; transition:background 0.1s; }
    .page-table tbody tr:nth-child(even) { background:#fafbfc; }
    .page-table tbody tr:nth-child(even):hover { background:#f0f4ff; }
    .page-empty {
      text-align:center;
      padding:48px 20px;
      color:#9ca3af;
      font-size:13px;
    }
    .page-empty i { font-size:36px; color:#e2e8f0; display:block; margin-bottom:10px; }

    /* ── Fleet table ── */
    #fleet-content {
      flex:1 1 0%; overflow-y:auto;
      padding:16px 24px 28px;
    }
    #fleet-content::-webkit-scrollbar { width:4px; }
    #fleet-content::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }

    .fleet-table-wrap {
      background:#fff; border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 4px rgba(0,0,0,0.04);
      overflow:hidden;
    }
    .fleet-table {
      width:100%; border-collapse:collapse;
      font-size:13px;
    }
    .fleet-table thead tr {
      background:#f8fafc;
      border-bottom:1px solid rgba(0,0,0,0.07);
    }
    .fleet-table th {
      padding:11px 14px;
      font-size:11px; font-weight:600; color:#6b7280;
      white-space:nowrap;
      text-align:right;
      letter-spacing:0.03em;
    }
    .fleet-table td {
      padding:10px 14px;
      border-bottom:1px solid rgba(0,0,0,0.04);
      vertical-align:middle;
      text-align:right;
      color:#1f2937;
    }
    html[dir="ltr"] .fleet-table th,
    html[dir="ltr"] .fleet-table td { text-align:left; }

    /* fleet-table column direction — same rule as page-table above,
       but fleet uses its own class so needs explicit coverage */




    .fleet-table tbody tr:nth-child(even) { background:#fafbfc; }
    .fleet-table tbody tr:hover { background:#f0f4ff; transition:background 0.12s; }
    .fleet-table tbody tr:last-child td { border-bottom:none; }

    .warn-date {
      color:#d97706; font-weight:500;
      display:flex; align-items:center; gap:4px;
    }
    html[dir="ltr"] .warn-date { flex-direction:row; }
    .warn-date i { font-size:13px; color:#f59e0b; }

    .car-thumb {
      width:52px; height:36px; object-fit:cover;
      border-radius:6px; border:1px solid rgba(0,0,0,0.07);
      background:#f3f6fb;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden;
    }
    .car-thumb-placeholder {
      width:52px; height:36px; border-radius:6px;
      background:linear-gradient(135deg,#e0e7ff,#dbeafe);
      display:flex; align-items:center; justify-content:center;
      border:1px solid rgba(0,0,0,0.06);
      font-size:18px; color:#93c5fd;
    }

    .action-btn {
      width:28px; height:28px; border-radius:6px;
      display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer; border:none; transition:background 0.15s;
    }
    .action-edit  { background:#dbeafe; color:#1E3A8A; }
    .action-edit:hover  { background:#bfdbfe; }
    .action-del   { background:#fff1f2; color:#dc2626; }
    .action-del:hover   { background:#fee2e2; }

    .plate-badge {
      background:#f1f5f9; color:#334155;
      border:1px solid #e2e8f0; border-radius:6px;
      padding:3px 9px; font-size:12px; font-weight:500;
      white-space:nowrap; display:inline-block;
    }
    .status-badge {
      display:inline-flex; align-items:center; gap:4px;
      padding:3px 9px; border-radius:20px;
      font-size:11px; font-weight:500;
    }
    .status-available { background:#d1fae5; color:#065f46; }
    .status-rented    { background:#dbeafe; color:#1e40af; }
    /* ── Add Vehicle Modal ── */
    #modal-overlay {
      display:none; position:fixed; inset:0; z-index:1000;
      background:rgba(0,0,0,0.45);
      align-items:center; justify-content:center;
    }
    #modal-overlay.open { display:flex; }
    #modal-box {
      background:#fff; border-radius:18px; width:700px; max-width:96vw;
      max-height:92vh; overflow-y:auto; padding:30px 32px 26px;
      position:relative; box-shadow:0 20px 60px rgba(0,0,0,0.15);
    }
    #modal-box::-webkit-scrollbar { width:4px; }
    #modal-box::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }
    .modal-title {
      font-size:18px; font-weight:600; letter-spacing:-0.3px; margin:0 0 4px;
    }
    .modal-close {
      position:absolute; top:18px; right:18px;
      width:30px; height:30px; border-radius:8px; border:none;
      background:#f3f6fb; color:#6b7280; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      font-size:16px; transition:background 0.15s;
    }
    .modal-close:hover { background:#e5e7eb; color:#374151; }
    .modal-grid {
      display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;
      margin-top:18px;
    }
    .modal-grid.full { grid-template-columns:1fr; }
    .form-group { display:flex; flex-direction:column; gap:5px; }
    .form-label {
      font-size:12px; font-weight:500; color:#374151;
      display:block; text-align:right;
    }
    .form-input {
      width:100%; height:42px; border:1.5px solid #e5e7eb;
      border-radius:10px; padding:0 13px; font-size:13px;
      color:#1f2937; font-family:inherit; outline:none;
      transition:border-color 0.15s, box-shadow 0.15s;
      background:#fff; direction:rtl; text-align:right;
    }
    .form-input:focus {
      border-color:#1E3A8A;
      box-shadow:0 0 0 3px rgba(30,58,138,0.15);
    }
    .form-input[type="date"],
    .form-input[type="time"] { direction:ltr; text-align:right; cursor:pointer; color:#374151; }
    .form-input[type="number"] { direction:ltr; text-align:right; }
    select.form-input { direction:rtl; text-align:right; cursor:pointer; }
    textarea.form-input { direction:rtl; text-align:right; resize:vertical; }
    .photo-section {
      display:flex; flex-direction:column; align-items:flex-end; gap:8px;
    }
    .photo-preview {
      width:100px; height:76px; border-radius:10px;
      background:#f3f6fb; border:1.5px dashed #cbd5e1;
      display:flex; align-items:center; justify-content:center;
      font-size:28px; color:#c7d2e8; cursor:pointer;
      overflow:hidden;
    }
    .photo-preview img { width:100%; height:100%; object-fit:cover; }
    .upload-btn {
      display:flex; align-items:center; gap:5px;
      background:#f8fafc; color:#374151; border:1.5px solid #e2e8f0;
      border-radius:8px; padding:6px 14px; font-size:12px; font-weight:500;
      cursor:pointer; font-family:inherit; transition:background 0.15s;
    }
    .upload-btn:hover { background:#e5e7eb; }
    .modal-top-row {
      display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start;
      direction:ltr;
    }
    .modal-footer {
      display:flex; align-items:center; gap:10px; margin-top:22px;
      justify-content:flex-start;
    }
    .modal-save {
      background:#1E3A8A; color:#fff; border:none; border-radius:8px;
      padding:0 22px; height:38px; font-size:13px; font-weight:500;
      cursor:pointer; font-family:inherit; transition:background 0.15s;
    }
    .modal-save:hover { background:#1e40af; }
    .modal-cancel {
      background:#fff; color:#6b7280; border:1.5px solid #e5e7eb;
      border-radius:8px; padding:0 18px; height:38px; font-size:13px;
      font-weight:500; cursor:pointer; font-family:inherit; transition:background 0.15s;
    }
    .modal-cancel:hover { background:#f3f6fb; }
    .section-divider {
      grid-column:1/-1; height:1px; background:#f1f5f9; margin:2px 0;
    }
    /* ── Settings page ── */
    /* ══════════════════════════════════════════════════
       SETTINGS — Mishwar Professional Style
    ══════════════════════════════════════════════════ */
    #view-settings { flex-direction:column; }

    .s-page-title {
      font-size:20px; font-weight:700; letter-spacing:-0.4px;
      color:#0f1115; margin:0 0 4px;
    }
    .s-page-sub {
      font-size:13px; color:#9ca3af; margin:0 0 24px;
    }

    /* Blue info callout */
    .s-callout {
      background:#dbeafe; color:#1e40af;
      padding:8px 14px; border-radius:8px;
      font-size:12px; font-weight:500;
      margin-bottom:20px; text-align:right;
    }

    /* Form card */
    .s-card {
      background:#fff;
      border:1px solid rgba(0,0,0,0.07);
      border-radius:16px;
      padding:26px 28px;
      margin-bottom:20px;
    }
    .s-card-title {
      font-size:15px; font-weight:700; color:#0f1115;
      margin:0 0 4px; text-align:right;
    }
    .s-card-sub {
      font-size:12px; color:#9ca3af;
      margin:0 0 20px; text-align:right;
    }
    .s-divider { height:1px; background:#f1f5f9; margin:20px 0; }

    /* Label — bold black above input */
    .s-label {
      display:block; font-size:12px; font-weight:700;
      color:#0f1115; margin-bottom:7px; text-align:right;
    }
    /* Input — 2px solid black border */
    .s-input {
      width:100%; height:44px;
      border:2px solid #0f1115;
      border-radius:12px; padding:0 14px;
      font-size:13px; color:#0f1115; font-family:inherit;
      outline:none; background:#fff; text-align:right;
      transition:border-color 0.15s, box-shadow 0.15s;
    }
    .s-input::placeholder { color:#b0b7c3; font-weight:400; }
    .s-input:focus {
      border-color:#1E3A8A;
      box-shadow:0 0 0 3px rgba(30,58,138,0.15);
    }
    .s-select {
      width:100%; height:44px;
      border:2px solid #0f1115; border-radius:12px;
      padding:0 14px; font-size:13px; color:#0f1115;
      font-family:inherit; outline:none; background:#fff;
      cursor:pointer; text-align:right;
      transition:border-color 0.15s, box-shadow 0.15s;
    }
    .s-select:focus {
      border-color:#1E3A8A;
      box-shadow:0 0 0 3px rgba(30,58,138,0.15);
    }
    .s-textarea {
      width:100%; border:2px solid #0f1115; border-radius:12px;
      padding:11px 14px; font-size:13px; color:#0f1115;
      font-family:inherit; outline:none; background:#fff;
      resize:vertical; min-height:110px; text-align:right;
      line-height:1.6; transition:border-color 0.15s;
    }
    .s-textarea:focus { border-color:#1E3A8A; box-shadow:0 0 0 3px rgba(30,58,138,0.15); }

    /* Two-col field grid */
    .s-grid-2 {
      display:grid; grid-template-columns:1fr 1fr;
      gap:14px 20px;
    }
    .s-grid-3 {
      display:grid; grid-template-columns:1fr 1fr 1fr;
      gap:14px 20px;
    }

    /* Logo upload area */
    #s-logo-preview-box {
      width:76px; height:76px; border-radius:12px;
      border:2px dashed #c7d2e8; background:#f8fafc;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; cursor:pointer; flex-shrink:0;
    }
    #s-logo-preview-box:hover { border-color:#1E3A8A; background:#eff6ff; }

    /* Save button */
    .s-save-btn {
      display:inline-flex; align-items:center; gap:6px;
      height:38px; padding:0 22px;
      background:#1E3A8A; color:#fff;
      border:none; border-radius:50px;
      font-size:13px; font-weight:700; cursor:pointer;
      font-family:inherit; transition:background 0.15s, box-shadow 0.15s;
    }
    .s-save-btn:hover { background:#1e40af; box-shadow:0 2px 10px rgba(30,58,138,0.30); }

    /* Reset link */
    .s-reset-link {
      background:none; border:none; cursor:pointer;
      font-size:13px; color:#9ca3af; font-family:inherit;
      padding:0; transition:color 0.13s;
    }
    .s-reset-link:hover { color:#0f1115; }

    /* Password input wrapper (icon on left) */
    .s-pw-wrap { position:relative; }
    .s-pw-wrap .s-input { padding-left:42px; }
    .s-pw-icon {
      position:absolute; left:14px; top:50%;
      transform:translateY(-50%);
      color:#b0b7c3; font-size:16px; pointer-events:none;
    }

    /* ── Legacy aliases (keep other views working) ── */
    .settings-card      { background:#fff; border-radius:16px; border:1px solid rgba(0,0,0,0.06); box-shadow:0 1px 4px rgba(0,0,0,0.04); padding:28px 32px; margin-bottom:20px; max-width:740px; width:100%; }
    .settings-card-header { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom:6px; }
    .settings-card-title  { font-size:16px; font-weight:600; letter-spacing:-0.2px; }
    .settings-card-icon   { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; }
    .settings-card-sub    { font-size:13px; color:#9ca3af; text-align:right; margin-bottom:20px; }
    .settings-label       { font-size:12px; font-weight:500; color:#374151; text-align:right; display:block; margin-bottom:6px; }
    .settings-input       { width:100%; height:44px; border:1.5px solid #e5e7eb; border-radius:10px; padding:0 14px; font-size:13px; color:#1f2937; font-family:inherit; outline:none; transition:border-color 0.15s, box-shadow 0.15s; text-align:right; }
    .settings-input:focus { border-color:#1E3A8A; box-shadow:0 0 0 3px rgba(30,58,138,0.15); }
    .settings-textarea    { width:100%; border:1.5px solid #e5e7eb; border-radius:10px; padding:12px 14px; font-size:13px; color:#1f2937; font-family:inherit; outline:none; transition:border-color 0.15s, box-shadow 0.15s; resize:vertical; min-height:110px; text-align:right; line-height:1.6; }
    .settings-textarea:focus { border-color:#1E3A8A; box-shadow:0 0 0 3px rgba(30,58,138,0.15); }
    .settings-save-btn    { background:#1E3A8A; color:#fff; border:none; border-radius:10px; padding:0 26px; height:40px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:background 0.15s, box-shadow 0.15s; }
    .settings-save-btn:hover { background:#1e40af; box-shadow:0 2px 10px rgba(30,58,138,0.30); }
    .settings-remove-btn  { display:inline-flex; align-items:center; gap:5px; color:#dc2626; font-size:13px; font-weight:500; background:none; border:none; cursor:pointer; font-family:inherit; padding:0; }
    .logo-preview         { width:100px; height:80px; border-radius:10px; border:1.5px dashed #e2e8f0; background:#f8fafc; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; cursor:pointer; }
    .logo-preview img     { width:100%; height:100%; object-fit:contain; }
    .choose-image-btn     { display:inline-flex; align-items:center; gap:6px; background:#fff; color:#374151; border:1.5px solid #e2e8f0; border-radius:9px; padding:0 16px; height:38px; font-size:13px; font-weight:500; cursor:pointer; font-family:inherit; transition:background 0.15s; }
    .choose-image-btn:hover { background:#f3f6fb; }
    .settings-row         { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin-top:14px; }

    /* ── Signature & Stamp upload cards ── */
    .sig-stamp-body {
      display: flex; align-items: flex-start; gap: 20px; margin-top: 14px;
    }
    .sig-stamp-preview {
      width: 180px; height: 112px; flex-shrink: 0;
      border-radius: 12px; border: 1.5px dashed #e2e8f0;
      background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; cursor: pointer;
      transition: border-color 0.15s;
    }
    .sig-stamp-preview:hover { border-color: #1E3A8A; }
    .sig-stamp-preview img { width:100%; height:100%; object-fit:contain; }
    .sig-stamp-controls {
      flex: 1; display: flex; flex-direction: column; gap: 10px;
      align-items: flex-start; min-width: 0;
    }
    .sig-draw-btn {
      display: inline-flex; align-items: center; gap: 7px;
      height: 40px; padding: 0 20px;
      background: #1E3A8A; color: #fff; border: none; border-radius: 10px;
      font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
      transition: background 0.15s; white-space: nowrap;
    }
    .sig-draw-btn:hover { background: #1e40af; }
    /* Draw signature overlay */
    #draw-sig-overlay {
      display: none; position: fixed; inset: 0; z-index: 9000;
      background: rgba(15,23,42,0.65); backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      align-items: center; justify-content: center;
    }
    #draw-sig-box {
      background: #fff; border-radius: 20px; padding: 26px 24px 22px;
      width: min(480px, 92vw);
      box-shadow: 0 24px 64px rgba(15,23,42,0.28);
    }
    #draw-sig-canvas-wrap {
      border: 1.5px solid #e2e8f0; border-radius: 12px;
      background: #fafbfc; position: relative;
      height: 150px; cursor: crosshair; overflow: hidden; margin-top: 16px;
    }
    #draw-sig-canvas { display: block; width: 100%; height: 100%; }
    #draw-sig-help {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      font-size: 12px; color: #c7d2e8; pointer-events: none;
      white-space: nowrap; transition: opacity 0.2s;
    }
    #draw-sig-help.hide { opacity: 0; }
    @media (max-width: 640px) {
      .sig-stamp-body { flex-direction: column-reverse; }
      .sig-stamp-preview { width: 100%; height: 100px; }
    }
    .lang-tab             { padding:5px 14px; border-radius:7px; font-size:12px; font-weight:500; cursor:pointer; border:1.5px solid #e5e7eb; background:#fff; color:#6b7280; font-family:inherit; transition:all 0.15s; }
    .lang-tab.active      { background:#1E3A8A; color:#fff; border-color:#1E3A8A; }
    .terms-tabs           { display:flex; gap:8px; margin-bottom:14px; justify-content:flex-end; }
    .divider              { height:1px; background:#f1f5f9; margin:16px 0; }
    #settings-content     { flex:1 1 0%; overflow-y:auto; padding:20px 28px 40px; max-width:860px; width:100%; margin:0 auto; }
    #settings-content::-webkit-scrollbar { width:4px; }
    #settings-content::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }

    /* ── Dark mode overrides for settings ── */
    .dark-theme .s-card        { background:rgba(22,33,55,0.85); border-color:rgba(255,255,255,0.08); }
    .dark-theme .s-card-title  { color:#f1f5f9; }
    .dark-theme .s-label       { color:#f1f5f9; }
    .dark-theme .s-input,
    .dark-theme .s-select,
    .dark-theme .s-textarea    { border-color:rgba(255,255,255,0.25); background:rgba(15,23,42,0.6); color:#f1f5f9; }
    .dark-theme .s-input::placeholder,
    .dark-theme .s-textarea::placeholder { color:#4b5563; }
    .dark-theme .s-input:focus,
    .dark-theme .s-select:focus,
    .dark-theme .s-textarea:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,0.18); }
    .dark-theme .s-callout           { background:rgba(30,58,138,0.35); color:#93c5fd; }
    .dark-theme #s-logo-preview-box  { border-color:rgba(255,255,255,0.15); background:rgba(15,23,42,0.5); }
    .dark-theme #connection-indicator {
      background:rgba(120,80,0,0.25); border-color:rgba(245,158,11,0.4); color:#fcd34d;
    }
    .dark-theme #firebase-rules-error {
      background:rgba(120,0,0,0.25); border-color:rgba(252,165,165,0.3); color:#fca5a5;
    }
    .dark-theme .s-save-btn          { background:#c0d850; color:#0f1115; }
    .dark-theme .s-page-title        { color:#f1f5f9; }
    .dark-theme .s-page-sub          { color:#64748b; }
    .dark-theme .s-divider           { background:rgba(255,255,255,0.07); }
    .dark-theme .s-pw-icon           { color:#4b5563; }
    /* ── Bookings page ── */
    #bookings-content {
      flex:1 1 0%; overflow-y:auto;
      padding:14px 20px 32px;
    }
    #bookings-content::-webkit-scrollbar { width:4px; }
    #bookings-content::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }

    .filter-tab {
      display:inline-flex; align-items:center; gap:5px;
      padding:5px 14px; border-radius:20px;
      font-size:12px; font-weight:500; cursor:pointer;
      border:1.5px solid #e5e7eb; background:#fff; color:#6b7280;
      font-family:inherit; transition:all 0.15s; white-space:nowrap;
    }
    .filter-tab:hover { border-color:#1E3A8A; color:#1E3A8A; }
    .filter-tab.active { background:#1E3A8A; color:#fff; border-color:#1E3A8A; }
    .filter-tab .tab-count {
      background:rgba(255,255,255,0.25); border-radius:10px;
      padding:1px 6px; font-size:11px;
    }
    .filter-tab:not(.active) .tab-count { background:#f1f5f9; color:#6b7280; }

    .bk-table-wrap {
      background:#fff; border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 4px rgba(0,0,0,0.04); overflow:hidden;
    }
    .bk-table {
      width:100%; border-collapse:collapse; font-size:13px;
    }
    .bk-table thead tr {
      background:#f8fafc; border-bottom:1px solid rgba(0,0,0,0.07);
    }
    .bk-table th {
      padding:11px 13px; font-size:11px; font-weight:500;
      color:#6b7280; white-space:nowrap; text-align:right;
    }
    .bk-table td {
      padding:0; border-bottom:1px solid rgba(0,0,0,0.04);
      vertical-align:middle; text-align:right; color:#1f2937;
    }
    .bk-table tbody tr:last-child td { border-bottom:none; }
    .bk-table tbody tr:hover { background:#f8faff; transition:background 0.1s; }

    /* Active row green left border */
    .bk-row-active { border-right:3px solid #22c55e !important; }

    .td-inner { padding:10px 13px; }

    .bk-ref { color:#1E3A8A; font-weight:600; font-size:12px; }
    .bk-customer-name { font-weight:500; font-size:13px; }
    .bk-customer-phone { font-size:11px; color:#9ca3af; margin-top:1px; }

    .status-badge-active {
      background:#dcfce7; color:#166534; border:1px solid #bbf7d0;
      padding:3px 10px; border-radius:20px; font-size:11px; font-weight:500;
      white-space:nowrap; display:inline-block;
    }
    .status-badge-completed {
      background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe;
      padding:3px 10px; border-radius:20px; font-size:11px; font-weight:500;
      white-space:nowrap; display:inline-block;
    }
    .status-badge-reserved {
      background:#fef3c7; color:#92400e; border:1px solid #fde68a;
      padding:3px 10px; border-radius:20px; font-size:11px; font-weight:500;
      white-space:nowrap; display:inline-block;
    }
    .status-badge-cancelled {
      background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0;
      padding:3px 10px; border-radius:20px; font-size:11px; font-weight:500;
      white-space:nowrap; display:inline-block;
    }

    .bk-total { font-weight:600; font-size:13px; }
    .bk-total-currency { font-size:11px; color:#9ca3af; }

    .terminer-btn {
      display:inline-flex; align-items:center; gap:5px;
      background:#dcfce7; color:#166534; border:1px solid #bbf7d0;
      border-radius:7px; padding:4px 11px; font-size:12px; font-weight:500;
      cursor:pointer; font-family:inherit; transition:background 0.15s;
      white-space:nowrap;
    }
    .terminer-btn:hover { background:#bbf7d0; }

    .pdf-btn {
      display:inline-flex; align-items:center; gap:5px;
      background:#f1f5f9; color:#374151; border:1px solid #e2e8f0;
      border-radius:7px; padding:4px 10px; font-size:11px; font-weight:500;
      cursor:pointer; font-family:inherit; transition:background 0.15s;
      white-space:nowrap;
    }
    .pdf-btn:hover { background:#e2e8f0; }

    .bk-search-wrap {
      display:flex; align-items:center; gap:7px;
      background:#fff; border:1px solid rgba(0,0,0,0.08);
      border-radius:9px; padding:0 14px; height:38px;
      max-width:420px; width:100%;
    }
    .bk-search-wrap input {
      background:none; border:none; outline:none;
      font-size:13px; color:#374151; width:100%; font-family:inherit;
    }
    /* ── Vehicle grid cards ── */
    .v-card {
      background:#fff; border-radius:16px;
      border:2px solid rgba(0,0,0,0.07);
      overflow:hidden; cursor:pointer;
      transition:border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    }
    .v-card:hover {
      border-color:#1E3A8A;
      box-shadow:0 4px 18px rgba(30,58,138,0.15);
      transform:translateY(-2px);
    }
    .v-card.rented {
      border-color:#fecaca;
    }
    .v-card.rented:hover {
      border-color:#f87171;
      box-shadow:0 4px 18px rgba(239,68,68,0.1);
    }
    .v-card-img {
      width:100%; height:130px;
      background:linear-gradient(135deg,#f0f4ff,#e0e7ff);
      display:flex; align-items:center; justify-content:center;
      font-size:48px; color:#93c5fd;
      overflow:hidden;
    }
    .v-card-body { padding:12px 14px; }
    .v-card-name { font-size:14px; font-weight:600; margin-bottom:4px; text-align:right; }
    .v-card-meta { font-size:11px; color:#6b7280; text-align:right; margin-bottom:8px; }
    .v-card-footer {
      display:flex; align-items:center; justify-content:space-between;
    }
    .v-card-price { font-size:13px; font-weight:600; color:#1E3A8A; }
    .v-badge-available { background:#dcfce7; color:#166534; font-size:10px; font-weight:600; padding:2px 8px; border-radius:10px; }
    .v-badge-rented { background:#fee2e2; color:#dc2626; font-size:10px; font-weight:600; padding:2px 8px; border-radius:10px; }
    .v-card-avail-date { font-size:10px; color:#f59e0b; font-weight:500; text-align:right; margin-top:3px; }
    /* ── Customers page ── */
    #customers-content {
      flex:1 1 0%; overflow-y:auto;
      padding:16px 24px 32px;
    }
    #customers-content::-webkit-scrollbar { width:4px; }
    #customers-content::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }

    .cx-table-wrap {
      background:#fff; border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 4px rgba(0,0,0,0.04); overflow:hidden;
    }
    .cx-table {
      width:100%; border-collapse:collapse; font-size:13px;
    }
    .cx-table thead tr {
      background:#f8fafc; border-bottom:1px solid rgba(0,0,0,0.07);
    }
    .cx-table th {
      padding:11px 16px; font-size:11px; font-weight:500;
      color:#6b7280; white-space:nowrap; text-align:right;
    }
    .cx-table td {
      padding:13px 16px;
      border-bottom:1px solid rgba(0,0,0,0.04);
      vertical-align:middle; text-align:right; color:#1f2937;
    }
    .cx-table tbody tr:last-child td { border-bottom:none; }
    .cx-table tbody tr:hover { background:#f8faff; transition:background 0.1s; }
    .cx-table tbody tr:nth-child(even) { background:#fafbfc; }
    .cx-table tbody tr:nth-child(even):hover { background:#f0f4ff; }

    .cx-avatar {
      width:34px; height:34px; border-radius:50%;
      display:inline-flex; align-items:center; justify-content:center;
      font-size:13px; font-weight:600; color:#fff; flex-shrink:0;
    }
    .cx-name-cell {
      display:flex; align-items:center; gap:10px; justify-content:flex-end;
    }
    .cx-del-btn {
      width:30px; height:30px; border-radius:7px;
      border:none; background:#fff1f2; color:#e90d0d;
      display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer; transition:background 0.15s; font-size:14px;
    }
    .cx-del-btn:hover { background:#fecdd3; }
    .cx-edit-btn {
      width:30px; height:30px; border-radius:7px;
      border:none; background:#dbeafe; color:#1E3A8A;
      display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer; transition:background 0.15s; font-size:14px;
    }
    .cx-edit-btn:hover { background:#dbeafe; }
    .cx-empty-cell { color:#9ca3af; font-size:13px; }
    .cx-email-link { color:#1E3A8A; text-decoration:none; font-size:13px; }
    .cx-email-link:hover { text-decoration:underline; }
    .cx-count-badge {
      display:inline-flex; align-items:center; gap:7px;
      background:#f1f5f9; border-radius:20px;
      padding:4px 12px; font-size:13px; font-weight:500; color:#374151;
    }

    /* Add customer modal */
    #cx-modal-overlay {
      display:none; position:fixed; inset:0; z-index:1000;
      background:rgba(0,0,0,0.42);
      align-items:center; justify-content:center;
    }
    #cx-modal-overlay.open { display:flex; }
    #cx-modal-box {
      background:#fff; border-radius:18px;
      width:600px; max-width:96vw;
      max-height:92vh; overflow-y:auto;
      padding:28px 30px 24px; position:relative;
      box-shadow:0 20px 60px rgba(0,0,0,0.15);
    }
    #cx-modal-box::-webkit-scrollbar { width:4px; }
    #cx-modal-box::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }
    /* ── Expenses page ── */
    #expenses-content {
      flex:1 1 0%; overflow-y:auto;
      padding:16px 24px 32px;
    }
    #expenses-content::-webkit-scrollbar { width:4px; }
    #expenses-content::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }

    .exp-summary-grid {
      display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px; margin-bottom:18px;
    }
    .exp-summary-card {
      background:#fff; border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 4px rgba(0,0,0,0.04);
      padding:22px 24px; text-align:right;
      transition:box-shadow 0.15s;
    }
    .exp-summary-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.08); }
    .exp-summary-label {
      font-size:12px; color:#6b7280;
      display:flex; align-items:center; gap:6px;
      justify-content:flex-end; margin-bottom:12px;
    }
    .exp-summary-label i { font-size:15px; }
    .exp-summary-value { font-size:22px; font-weight:700; letter-spacing:-0.5px; }

    .exp-table-card {
      background:#fff; border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 4px rgba(0,0,0,0.04); overflow:hidden;
    }
    .exp-table-header {
      padding:14px 18px 12px;
      display:flex; align-items:center; justify-content:space-between;
      border-bottom:1px solid rgba(0,0,0,0.05);
    }
    html[dir="rtl"] .exp-table-header { flex-direction:row-reverse; }
    html[dir="ltr"] .exp-table-header { flex-direction:row; }
    .exp-table { width:100%; border-collapse:collapse; font-size:13px; }
    .exp-table thead tr { background:#f8fafc; }
    .exp-table th {
      padding:11px 16px; font-size:11px; font-weight:500;
      color:#6b7280; white-space:nowrap; text-align:right;
      border-bottom:1px solid rgba(0,0,0,0.06);
    }
    .exp-table td {
      padding:12px 16px;
      border-bottom:1px solid rgba(0,0,0,0.04);
      vertical-align:middle; text-align:right; color:#1f2937;
    }
    .exp-table tbody tr:last-child td { border-bottom:none; }
    .exp-table tbody tr:hover { background:#f8faff; transition:background 0.1s; }
    .exp-table tbody tr:nth-child(even) { background:#fafbfc; }
    .exp-table tbody tr:nth-child(even):hover { background:#f0f4ff; }

    .cat-badge {
      display:inline-block; padding:3px 10px; border-radius:20px;
      font-size:11px; font-weight:500; white-space:nowrap;
    }
    .cat-fuel       { background:#dbeafe; color:#1e40af; }
    .cat-maintenance{ background:#d1fae5; color:#065f46; }
    .cat-insurance  { background:#ede9fe; color:#5b21b6; }
    .cat-tax        { background:#fef3c7; color:#92400e; }
    .cat-salary     { background:#fce7f3; color:#9d174d; }
    .cat-other      { background:#f1f5f9; color:#475569; }

    .exp-del-btn {
      width:30px; height:30px; border-radius:7px;
      border:none; background:#fff1f2; color:#e90d0d;
      display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer; transition:background 0.15s; font-size:13px;
    }
    .exp-del-btn:hover { background:#fecdd3; }

    /* Expense modal */
    #exp-modal-overlay {
      display:none; position:fixed; inset:0; z-index:1000;
      background:rgba(0,0,0,0.42);
      align-items:center; justify-content:center;
    }
    #exp-modal-overlay.open { display:flex; }
    #exp-modal-box {
      background:#fff; border-radius:18px;
      width:540px; max-width:96vw;
      max-height:92vh; overflow-y:auto;
      padding:28px 30px 24px; position:relative;
      box-shadow:0 20px 60px rgba(0,0,0,0.15);
    }
    #exp-modal-box::-webkit-scrollbar { width:4px; }
    #exp-modal-box::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }

    /* Custom category dropdown */
    .cat-dropdown { position:relative; }
    .cat-select-btn {
      width:100%; height:46px; background:#fff;
      border:1.5px solid #e5e7eb; border-radius:10px;
      display:flex; align-items:center; justify-content:space-between;
      padding:0 14px; cursor:pointer; font-size:14px;
      color:#1f2937; font-family:inherit;
      transition:border-color 0.15s, box-shadow 0.15s;
      direction:ltr;
    }
    .cat-select-btn:focus, .cat-select-btn.open {
      border-color:#1E3A8A; box-shadow:0 0 0 3px rgba(30,58,138,0.15); outline:none;
    }
    .cat-dropdown-list {
      display:none; position:absolute; top:calc(100% + 4px); left:0; right:0;
      background:#fff; border:1.5px solid #e5e7eb; border-radius:12px;
      z-index:100; overflow:hidden;
      box-shadow:0 8px 24px rgba(0,0,0,0.1);
    }
    .cat-dropdown-list.open { display:block; }
    .cat-option {
      display:flex; align-items:center; gap:12px;
      padding:12px 16px; cursor:pointer;
      font-size:14px; color:#1f2937;
      transition:background 0.1s;
    }
    .cat-option:hover { background:#f0f4ff; }
    .cat-option.selected { background:#dbeafe; color:#1E3A8A; font-weight:500; }
    .cat-option .check { font-size:14px; color:#1E3A8A; width:18px; }
    /* ══════════════════════════════════════════════════════════════
       CALENDAR v2 — vehicle chips · spanning bars · drag · popover
       ══════════════════════════════════════════════════════════════ */
    #view-calendar { overflow:hidden; }
    #calendar-wrap {
      flex:1 1 0%; display:flex; flex-direction:column;
      overflow:hidden; padding:14px 20px 16px; gap:0;
    }

    /* ── Vehicle chips palette ── */
    .cal-chips-palette {
      display:flex; align-items:center; gap:7px;
      padding:10px 0 12px; overflow-x:auto; flex-shrink:0;
      scrollbar-width:none; -webkit-overflow-scrolling:touch;
    }
    .cal-chips-palette::-webkit-scrollbar { display:none; }
    .veh-chip {
      display:flex; align-items:center; gap:5px;
      padding:5px 9px 5px 7px; border-radius:20px;
      background:#fff; border:1.5px solid #e5e7eb;
      font-size:11px; font-weight:600; color:#374151;
      cursor:grab; user-select:none; white-space:nowrap;
      flex-shrink:0; transition:border-color .15s, box-shadow .15s, transform .1s;
    }
    .veh-chip:hover { border-color:#1E3A8A; box-shadow:0 2px 10px rgba(30,58,138,.14); }
    .veh-chip.chip-dragging { opacity:.45; cursor:grabbing; transform:scale(.95); }
    .veh-chip-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .veh-chip-name { max-width:100px; overflow:hidden; text-overflow:ellipsis; }
    .veh-chip-plate {
      font-size:9.5px; font-weight:500; color:#9ca3af;
      background:#f3f6fb; border-radius:4px; padding:1px 5px;
    }

    /* ── Drag ghost preview ── */
    #cal-drag-ghost {
      position:fixed; pointer-events:none; z-index:9999;
      padding:5px 13px; border-radius:9px; font-size:11px; font-weight:700;
      background:#1E3A8A; color:#fff;
      box-shadow:0 6px 24px rgba(30,58,138,.4);
      opacity:0; transform:translate(-50%,-120%) scale(.85);
      transition:opacity .12s, transform .12s;
      white-space:nowrap;
    }
    #cal-drag-ghost.active { opacity:1; transform:translate(-50%,-120%) scale(1); }

    /* ── Drag-over cell highlight ── */
    .cal-cell.drag-over {
      background:#eff4ff !important;
      outline:2px dashed #1E3A8A; outline-offset:-3px;
    }
    .cal-toolbar {
      display:flex; align-items:center; justify-content:space-between;
      flex-wrap:wrap; gap:10px; margin-bottom:14px; flex-shrink:0;
    }
    .cal-view-btns { display:flex; align-items:center; gap:0; }
    .cal-view-btn {
      padding:6px 16px; font-size:12px; font-weight:500;
      border:1.5px solid #e5e7eb; background:#fff; color:#6b7280;
      cursor:pointer; font-family:inherit; transition:all 0.15s;
    }
    .cal-view-btn:first-child { border-radius:8px 0 0 8px; }
    .cal-view-btn:last-child  { border-radius:0 8px 8px 0; }
    .cal-view-btn + .cal-view-btn { border-right:none; margin-right:-1px; }
    .cal-view-btn.active { background:#1E3A8A; color:#fff; border-color:#1E3A8A; z-index:1; }
    .cal-view-btn:hover:not(.active) { background:#f3f6fb; color:#374151; }

    .cal-nav { display:flex; align-items:center; gap:10px; }
    .cal-nav-btn {
      width:32px; height:32px; border-radius:8px;
      border:1.5px solid #e5e7eb; background:#fff; color:#374151;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:background 0.15s; font-size:16px;
    }
    .cal-nav-btn:hover { background:#f3f6fb; }
    .cal-month-label { font-size:15px; font-weight:600; min-width:140px; text-align:center; }
    .cal-today-btn {
      padding:5px 14px; border-radius:8px; font-size:12px; font-weight:500;
      border:1.5px solid #e5e7eb; background:#fff; color:#374151;
      cursor:pointer; font-family:inherit; transition:background 0.15s;
    }
    .cal-today-btn:hover { background:#f3f6fb; }

    .cal-legend {
      display:flex; align-items:center; gap:14px; font-size:11px; color:#6b7280;
      flex-wrap:wrap;
    }
    .cal-legend-item { display:flex; align-items:center; gap:5px; }
    .legend-dot-active   { width:9px;height:9px;border-radius:50%;background:#10b981;display:inline-block; }
    .legend-dot-reserved { width:9px;height:9px;border-radius:50%;background:#f59e0b;display:inline-block; }
    .legend-dot-completed{ width:9px;height:9px;border-radius:50%;background:#9ca3af;display:inline-block; }
    .legend-dot-overlap  { width:9px;height:9px;border-radius:50%;background:#ef4444;display:inline-block; }

    /* ── Month grid container ── */
    .cal-grid {
      flex:1 1 0%; overflow:hidden; min-height:0;
      display:flex; flex-direction:column;
      background:#fff; border-radius:12px;
      border:1px solid rgba(0,0,0,0.07);
    }
    .cal-day-headers {
      display:grid; grid-template-columns:repeat(7,1fr);
      border-bottom:1px solid rgba(0,0,0,0.06); flex-shrink:0;
    }
    .cal-day-header {
      padding:8px 10px; text-align:center;
      font-size:11px; font-weight:600; color:#6b7280;
      text-transform:uppercase; letter-spacing:.3px;
    }
    .cal-weeks {
      flex:1 1 0%; overflow-y:auto; display:flex; flex-direction:column;
    }
    .cal-weeks::-webkit-scrollbar { width:4px; }
    .cal-weeks::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }

    /* ── Week row (two-part: cell backgrounds + bars overlay) ── */
    .cal-week {
      display:flex; flex-direction:column;
      flex:1 1 0%; min-height:90px;
      border-bottom:1px solid rgba(0,0,0,0.05);
    }
    .cal-week:last-child { border-bottom:none; }

    /* 7-column grid of cell backgrounds (clickable / drag targets) */
    .cal-cells-row {
      display:grid; grid-template-columns:repeat(7,1fr);
      flex-shrink:0;
    }
    .cal-cell {
      padding:4px 5px; min-height:26px;
      border-right:1px solid rgba(0,0,0,0.05);
      cursor:pointer; transition:background .1s; overflow:hidden;
      /* extend click area below bars via absolute descendant */
    }
    .cal-cell:last-child { border-right:none; }
    html[dir="rtl"] .cal-cell { border-right:none; border-left:1px solid rgba(0,0,0,0.05); }
    html[dir="rtl"] .cal-cell:last-child { border-left:none; }
    .cal-cell:hover { background:#f8faff; }
    .cal-cell.today { background:#eff4ff; }
    .cal-cell.today .cal-cell-num {
      background:#1E3A8A; color:#fff; border-radius:50%;
      width:20px; height:20px; display:flex; align-items:center; justify-content:center;
    }
    .cal-cell.other-month { background:#fafbfc; }
    .cal-cell.other-month .cal-cell-num { color:#d1d5db; }
    .cal-cell-num {
      font-size:11.5px; font-weight:500; color:#374151;
      text-align:right; line-height:20px; padding:0 1px;
    }

    /* Bars body: stacked lane rows */
    .cal-bars-body {
      flex:1; display:flex; flex-direction:column;
      gap:2px; padding:3px 0 5px;
      min-height:64px; /* ensures week has visible height even with no bars */
    }

    /* One lane row = 7-column grid of bar slots */
    .cal-bars-lane {
      display:grid; grid-template-columns:repeat(7,1fr);
      height:20px; flex-shrink:0;
    }
    .cal-bar-empty { /* placeholder slot — keeps lane aligned */ }

    /* ── SPANNING BAR PILL ── */
    .cal-bar-span {
      height:18px; line-height:18px;
      border-radius:4px; padding:0 6px;
      font-size:10px; font-weight:600;
      cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      transition:filter .12s, box-shadow .12s;
      /* margin squeezes bar slightly off cell edges for a "floating pill" look */
      margin:0 2px;
      user-select:none;
    }
    .cal-bar-span:hover { filter:brightness(.93); }
    .bar-label { pointer-events:none; }

    /* Border-radius override for bars that start/end at week boundary */
    .cal-bar-span.bar-actual-start { border-radius:4px 0 0 4px; margin-left:4px; margin-right:0; }
    .cal-bar-span.bar-actual-end   { border-radius:0 4px 4px 0; margin-right:4px; margin-left:0; }
    .cal-bar-span.bar-single       { border-radius:5px; margin:0 3px; }
    /* continuation bars (neither end actual) get no border-radius, flush margins */
    .cal-bar-span:not(.bar-actual-start):not(.bar-actual-end):not(.bar-single) { border-radius:0; margin:0; }
    /* combined actual-start + actual-end = single — handled by .bar-single */

    /* ── Status colour schemes ── */
    .ev-active    { background:#d1fae5; color:#065f46; }
    .ev-reserved  { background:#fef3c7; color:#92400e; }
    .ev-completed { background:#f1f5f9; color:#475569; }
    .ev-cancelled { background:#f3f4f6; color:#9ca3af; }
    .ev-overlap   {
      background:#fee2e2; color:#991b1b;
      animation:conflict-glow 1.8s ease-in-out infinite;
    }
    @keyframes conflict-glow {
      0%,100% { box-shadow:none; }
      50%      { box-shadow:0 0 0 2px #fca5a5, 0 0 10px rgba(239,68,68,.35); }
    }

    /* ── Overflow "+N" per day ── */
    .cal-bars-overflow > div { font-size:9.5px; font-weight:700; color:#6b7280; }
    .cal-bar-more {
      font-size:9.5px; font-weight:700; color:#1E3A8A;
      padding:0 5px; cursor:pointer; line-height:20px;
      transition:color .1s;
    }
    .cal-bar-more:hover { color:#dc2626; text-decoration:underline; }

    /* ── Legacy .cal-event still used by week/day views ── */
    .cal-event {
      border-radius:4px; padding:2px 6px;
      font-size:10px; font-weight:500; line-height:1.4;
      cursor:pointer; overflow:hidden; text-overflow:ellipsis;
      white-space:nowrap; transition:opacity .1s;
      margin-bottom:2px;
    }
    .cal-event:hover { opacity:.82; }
    .cal-event.ev-active   { border-right:2.5px solid #10b981; }
    .cal-event.ev-reserved { border-right:2.5px solid #f59e0b; }
    .cal-event.ev-completed{ border-right:2.5px solid #9ca3af; }
    .cal-event.ev-overlap  { border-right:2.5px solid #ef4444; }
    html[dir="ltr"] .cal-event { border-right:none; border-left:2.5px solid; }
    html[dir="ltr"] .cal-event.ev-active    { border-left-color:#10b981; }
    html[dir="ltr"] .cal-event.ev-reserved  { border-left-color:#f59e0b; }
    html[dir="ltr"] .cal-event.ev-completed { border-left-color:#9ca3af; }
    html[dir="ltr"] .cal-event.ev-overlap   { border-left-color:#ef4444; }
    .cal-more {
      font-size:10px; font-weight:600; color:#1E3A8A; padding:1px 4px; cursor:pointer;
    }
    .cal-more:hover { text-decoration:underline; }

    /* ══════════════════════════════════
       PREMIUM HOVER POPOVER
       ══════════════════════════════════ */
    #cal-popover {
      position:fixed; z-index:3000;
      background:#fff; border-radius:14px;
      box-shadow:0 8px 40px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.07);
      border:1px solid rgba(0,0,0,.06);
      min-width:258px; max-width:308px;
      opacity:0; transform:scale(.9) translateY(-6px);
      transition:opacity .17s, transform .17s;
      pointer-events:none;
    }
    #cal-popover.visible { opacity:1; transform:scale(1) translateY(0); pointer-events:all; }
    .cpop-header { padding:13px 15px 9px; border-bottom:1px solid rgba(0,0,0,.05); }
    .cpop-vehicle { font-size:13px; font-weight:700; color:#0f172a; margin-bottom:4px; }
    .cpop-meta { display:flex; gap:10px; font-size:11px; color:#6b7280; flex-wrap:wrap; }
    .cpop-body { padding:9px 15px 5px; display:flex; flex-direction:column; gap:6px; }
    .cpop-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; }
    .cpop-label { color:#9ca3af; }
    .cpop-value { font-weight:500; color:#1f2937; }
    .cpop-actions {
      padding:9px 10px 11px; display:flex; gap:5px;
      border-top:1px solid rgba(0,0,0,.05); flex-wrap:wrap;
    }
    .cpop-btn {
      flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
      padding:7px 4px; border-radius:8px; font-size:10.5px; font-weight:600;
      cursor:pointer; border:1.5px solid; transition:filter .13s, transform .12s;
      font-family:inherit; white-space:nowrap;
    }
    .cpop-btn i { font-size:11px; }
    .cpop-btn:hover  { filter:brightness(.93); transform:translateY(-1px); }
    .cpop-btn:active { transform:translateY(0); }
    .cpop-view   { background:#eff4ff; border-color:#c7d2fe; color:#3730a3; }
    .cpop-edit   { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
    .cpop-dup    { background:#fffbeb; border-color:#fde68a; color:#92400e; }
    .cpop-cancel { background:#fef2f2; border-color:#fecaca; color:#991b1b; }

    /* Popover status pills */
    .cal-status-active    { background:#d1fae5;color:#065f46;padding:2px 7px;border-radius:12px;font-size:9.5px;font-weight:700; }
    .cal-status-reserved  { background:#fef3c7;color:#92400e;padding:2px 7px;border-radius:12px;font-size:9.5px;font-weight:700; }
    .cal-status-completed { background:#f1f5f9;color:#475569;padding:2px 7px;border-radius:12px;font-size:9.5px;font-weight:700; }
    .cal-status-cancelled { background:#f3f4f6;color:#9ca3af;padding:2px 7px;border-radius:12px;font-size:9.5px;font-weight:700; }

    /* Week view */
    .cal-week-view {
      flex:1 1 0%; overflow-y:auto; display:flex; flex-direction:column;
      background:#fff; border-radius:16px; border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 4px rgba(0,0,0,0.04);
    }
    .cal-week-view::-webkit-scrollbar { width:4px; }
    .cal-week-view::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }
    .cal-week-row {
      display:flex; border-bottom:1px solid rgba(0,0,0,0.05);
      min-height:64px; align-items:flex-start;
    }
    .cal-week-row:last-child { border-bottom:none; }
    .cal-week-date-col {
      width:80px; flex-shrink:0; padding:10px 12px;
      font-size:12px; color:#6b7280; text-align:right;
      border-left:1px solid rgba(0,0,0,0.05);
    }
    html[dir="ltr"] .cal-week-date-col { text-align:left; border-left:none; border-right:1px solid rgba(0,0,0,0.05); }
    .cal-week-date-num { font-size:16px; font-weight:600; color:#374151; }
    .cal-week-date-num.today-wk { color:#1E3A8A; }
    .cal-week-events { flex:1; padding:8px 10px; display:flex; flex-direction:column; gap:4px; }

    /* Day view */
    .cal-day-view {
      flex:1 1 0%; overflow-y:auto;
      background:#fff; border-radius:16px; border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 4px rgba(0,0,0,0.04);
      padding:20px 24px;
    }
    .cal-day-view::-webkit-scrollbar { width:4px; }
    .cal-day-view::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }
    .cal-day-title { font-size:16px; font-weight:600; margin-bottom:14px; }
    .cal-day-event {
      display:flex; align-items:flex-start; gap:12px;
      padding:12px 16px; border-radius:10px; margin-bottom:10px;
      cursor:pointer; transition:opacity 0.1s;
    }
    .cal-day-event:hover { opacity:0.88; }
    .cal-day-event.ev-active   { background:#dcfce7; border-right:3px solid #22c55e; }
    .cal-day-event.ev-reserved { background:#fef3c7; border-right:3px solid #f59e0b; }
    .cal-day-event.ev-completed{ background:#f1f5f9; border-right:3px solid #94a3b8; }
    html[dir="ltr"] .cal-day-event { border-right:none; border-left:3px solid; }

    /* Booking detail popup */
    #cal-popup {
      display:none; position:fixed; z-index:2000;
      background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,0.18);
      padding:18px 20px; min-width:240px; max-width:300px;
      border:1px solid rgba(0,0,0,0.06);
    }
    #cal-popup.open { display:block; }
    /* ── Payments page ── */
    #payments-content {
      flex:1 1 0%; overflow-y:auto;
      padding:16px 24px 32px;
    }
    #payments-content::-webkit-scrollbar { width:4px; }
    #payments-content::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }

    .pay-table-wrap {
      background:#fff; border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 4px rgba(0,0,0,0.04); overflow:hidden;
    }
    .pay-table { width:100%; border-collapse:collapse; font-size:13px; }
    .pay-table thead tr {
      background:#f8fafc; border-bottom:1px solid rgba(0,0,0,0.07);
    }
    .pay-table th {
      padding:12px 16px; font-size:11px; font-weight:600;
      color:#6b7280; white-space:nowrap; text-align:right;
      letter-spacing:0.03em;
    }
    .pay-table td {
      padding:13px 16px;
      border-bottom:1px solid rgba(0,0,0,0.04);
      vertical-align:middle; text-align:right; color:#1f2937;
    }
    .pay-table tbody tr:last-child td { border-bottom:none; }
    .pay-table tbody tr:hover { background:#f8faff; transition:background 0.1s; }
    .pay-table tbody tr:nth-child(even) { background:#fafbfc; }
    .pay-table tbody tr:nth-child(even):hover { background:#f0f4ff; }

    .pay-status-paid {
      display:inline-block; background:#dbeafe; color:#1e40af;
      border:1px solid #bfdbfe; padding:3px 12px; border-radius:20px;
      font-size:11px; font-weight:500; white-space:nowrap;
    }
    .pay-status-partial {
      display:inline-block; background:#fef3c7; color:#92400e;
      border:1px solid #fde68a; padding:3px 12px; border-radius:20px;
      font-size:11px; font-weight:500; white-space:nowrap;
    }
    .pay-status-refunded {
      display:inline-block; background:#fee2e2; color:#991b1b;
      border:1px solid #fecaca; padding:3px 12px; border-radius:20px;
      font-size:11px; font-weight:500; white-space:nowrap;
    }

    .pay-method-badge {
      display:inline-flex; align-items:center; gap:5px;
      background:#f1f5f9; color:#475569; border-radius:7px;
      padding:3px 10px; font-size:12px; font-weight:500;
    }
    .pay-booking-name { font-size:13px; font-weight:500; color:#1f2937; }
    .pay-booking-vehicle { font-size:11px; color:#9ca3af; margin-top:2px; }

    .pay-del-btn {
      width:30px; height:30px; border-radius:7px;
      border:none; background:#fff1f2; color:#e90d0d;
      display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer; transition:background 0.15s; font-size:13px;
    }
    .pay-del-btn:hover { background:#fecdd3; }

    .pay-revenue-badge {
      display:inline-flex; align-items:center; gap:6px;
      background:#f0fdf4; border:1px solid #bbf7d0;
      border-radius:9px; padding:5px 14px;
      font-size:13px; color:#166534; font-weight:500;
    }

    /* Add Payment Modal */
    #pay-modal-overlay {
      display:none; position:fixed; inset:0; z-index:1000;
      background:rgba(0,0,0,0.42);
      align-items:center; justify-content:center;
    }
    #pay-modal-overlay.open { display:flex; }
    #pay-modal-box {
      background:#fff; border-radius:18px;
      width:520px; max-width:96vw;
      max-height:92vh; overflow-y:auto;
      padding:28px 30px 24px; position:relative;
      box-shadow:0 20px 60px rgba(0,0,0,0.15);
    }
    #pay-modal-box::-webkit-scrollbar { width:4px; }
    #pay-modal-box::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }

    .pay-method-opt {
      display:inline-flex; align-items:center; gap:6px;
      padding:7px 16px; border-radius:8px; font-size:12px; font-weight:500;
      border:1.5px solid #e5e7eb; background:#fff; color:#6b7280;
      cursor:pointer; font-family:inherit; transition:all 0.15s;
    }
    .pay-method-opt:hover { border-color:#1E3A8A; color:#1E3A8A; background:#eff6ff; }
    .pay-method-opt.active { border-color:#1E3A8A; background:#1E3A8A; color:#fff; }
    /* ── Notifications ── */
    #alerts-content { flex:1 1 0%;overflow-y:auto;padding:16px 20px 32px; }
    #alerts-content::-webkit-scrollbar { width:4px; }
    #alerts-content::-webkit-scrollbar-thumb { background:#c7d2e8;border-radius:4px; }
    .alerts-section-label {
      font-size:12px;font-weight:600;color:#6b7280;text-align:right;
      margin-bottom:10px;margin-top:4px;
      display:flex;align-items:center;justify-content:flex-end;gap:7px;
    }
    .alerts-section-label .cnt {
      background:#f1f5f9;color:#374151;border-radius:10px;
      padding:1px 8px;font-size:11px;font-weight:600;
    }
    .alert-card {
      background:#fff;border-radius:12px;
      border:1px solid rgba(0,0,0,0.06);
      padding:14px 16px;margin-bottom:8px;
      display:flex;align-items:flex-start;gap:12px;
      transition:box-shadow 0.15s;cursor:pointer;
      border-right:3px solid transparent;
    }
    .alert-card:hover { box-shadow:0 2px 10px rgba(0,0,0,0.06); }
    .alert-card.unread { border-right-color:#f59e0b;background:#fffdf7; }
    .alert-card.unread-pay { border-right-color:#e90d0d;background:#fff8f8; }
    .alert-icon-wrap {
      width:34px;height:34px;border-radius:9px;
      display:flex;align-items:center;justify-content:center;
      flex-shrink:0;font-size:16px;
    }
    .alert-doc-icon { background:#fef3c7;color:#d97706; }
    .alert-pay-icon { background:#fee2e2;color:#e90d0d; }
    .alert-body { flex:1;text-align:right; }
    .alert-title { font-size:13px;font-weight:500;color:#1f2937; }
    .alert-sub { font-size:11px;color:#9ca3af;margin-top:3px; }
    .alert-date { font-size:10px;color:#c7d2e8;margin-top:2px; }
    .mark-all-btn {
      display:inline-flex;align-items:center;gap:6px;
      background:#fff;color:#1E3A8A;border:1.5px solid #dbeafe;
      border-radius:8px;padding:6px 14px;font-size:12px;font-weight:500;
      cursor:pointer;font-family:inherit;transition:background 0.15s;
    }
    .mark-all-btn:hover { background:#eff6ff; }

    /* ── Reports ── */
    #reports-content { flex:1 1 0%;overflow-y:auto;padding:16px 24px 32px; }
    #reports-content::-webkit-scrollbar { width:4px; }
    #reports-content::-webkit-scrollbar-thumb { background:#c7d2e8;border-radius:4px; }
    .rpt-kpi-grid {
      display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;margin-bottom:18px;
    }
    .rpt-kpi-card {
      background:#fff;border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 3px rgba(0,0,0,0.03);
      padding:18px 20px;display:flex;flex-direction:column;gap:10px;
      transition:box-shadow 0.15s;
    }
    .rpt-kpi-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.08); }
    .rpt-kpi-icon {
      width:34px;height:34px;border-radius:9px;
      display:flex;align-items:center;justify-content:center;font-size:17px;
    }
    .rpt-kpi-label { font-size:11px;color:#9ca3af; }
    .rpt-kpi-value { font-size:20px;font-weight:700;letter-spacing:-0.4px; }
    .rpt-chart-card {
      background:#fff;border-radius:16px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:0 1px 3px rgba(0,0,0,0.03);
      padding:22px 24px;
    }
    .rpt-chart-title { font-size:14px;font-weight:600;text-align:right;margin-bottom:18px; }
    .rpt-bar-row {
      display:flex;align-items:center;gap:12px;
      margin-bottom:9px;font-size:12px;
    }
    .rpt-bar-label { width:54px;text-align:right;color:#6b7280;flex-shrink:0; }
    .rpt-bar-track {
      flex:1;background:#f1f5f9;border-radius:4px;height:20px;
      overflow:hidden;position:relative;
    }
    .rpt-bar-fill {
      height:100%;background:#1E3A8A;border-radius:4px;
      transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
    }
    .rpt-bar-value { width:86px;text-align:right;color:#374151;font-weight:500;flex-shrink:0; }
    .export-btn {
      display:inline-flex;align-items:center;gap:6px;
      background:#fff;color:#374151;border:1.5px solid #e5e7eb;
      border-radius:8px;padding:6px 14px;font-size:12px;font-weight:500;
      cursor:pointer;font-family:inherit;transition:background 0.15s;
    }
    .export-btn:hover { background:#f3f6fb; }
    .year-select {
      height:34px;border:1.5px solid #e5e7eb;border-radius:8px;
      padding:0 10px;font-size:12px;color:#374151;
      font-family:inherit;background:#fff;cursor:pointer;outline:none;
    }
    .year-select:focus { border-color:#1E3A8A; }
    /* ── Table text alignment: JS-rendered rows handle column order.
       These rules ensure consistent text-align within cells. ── */
    html[dir="ltr"] .cx-name-cell { justify-content:flex-start; }
    html[dir="ltr"] .bk-ref { text-align:left; }
    html[dir="ltr"] .td-inner { text-align:left; }
    html[dir="ltr"] .warn-date { justify-content:flex-start; }

    /* ── Fleet filter dropdown ── */
    .fleet-filter-wrap { position:relative; display:inline-block; }
    .fleet-filter-btn {
      display:flex;align-items:center;gap:5px;
      background:#fff;border:1px solid rgba(0,0,0,0.09);border-radius:8px;
      padding:0 12px;height:34px;cursor:pointer;font-size:12px;
      color:#374151;font-family:inherit;transition:border-color 0.15s;
    }
    .fleet-filter-btn:hover, .fleet-filter-btn.active { border-color:#1E3A8A;color:#1E3A8A; }
    .fleet-filter-btn .badge {
      background:#1E3A8A;color:#fff;border-radius:10px;
      padding:1px 6px;font-size:10px;font-weight:600;margin-right:2px;
    }
    .fleet-filter-drop {
      display:none;position:absolute;top:calc(100% + 6px);right:0;
      background:#fff;border:1px solid rgba(0,0,0,0.09);border-radius:10px;
      box-shadow:0 6px 24px rgba(0,0,0,0.1);padding:10px;
      min-width:220px;z-index:200;
    }
    html[dir="ltr"] .fleet-filter-drop { right:auto;left:0; }
    .fleet-filter-drop.open { display:block; }
    .flt-section { margin-bottom:10px; }
    .flt-section:last-child { margin-bottom:0; }
    .flt-label {
      font-size:10px;font-weight:700;color:#6b7280;text-transform:uppercase;
      letter-spacing:0.4px;margin-bottom:5px;
    }
    .flt-chips { display:flex;flex-wrap:wrap;gap:5px; }
    .flt-chip {
      padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;
      border:1.5px solid #e5e7eb;background:#fff;color:#374151;
      cursor:pointer;transition:all 0.12s;
    }
    .flt-chip:hover { border-color:#1E3A8A;color:#1E3A8A; }
    .flt-chip.on { background:#1E3A8A;border-color:#1E3A8A;color:#fff; }
    .flt-actions { display:flex;justify-content:flex-end;margin-top:8px;padding-top:8px;border-top:1px solid #f1f5f9; }
    .flt-reset { font-size:11px;color:#6b7280;background:none;border:none;cursor:pointer;font-family:inherit; }
    .flt-reset:hover { color:#1E3A8A; }

    /* ── Booking Detail View ── */
    #view-booking-detail { background:#f3f6fb; }
    .bkd-topbar {
      flex-shrink:0; padding:10px 20px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      background:#fff; border-bottom:1px solid rgba(0,0,0,0.06);
    }
    .bkd-topbar-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .bkd-topbar-right { display:flex; align-items:center; gap:8px; }
    .bkd-ref {
      font-size:15px; font-weight:700; color:#1E3A8A; font-family:monospace;
      letter-spacing:0.5px;
    }
    .bkd-status-pill {
      display:inline-block; padding:3px 10px; border-radius:20px;
      font-size:11px; font-weight:600;
    }
    .bkd-back-btn {
      display:inline-flex; align-items:center; gap:6px;
      background:#f1f5f9; color:#374151; border:none; border-radius:8px;
      padding:0 14px; height:34px; font-size:13px; font-weight:500;
      cursor:pointer; font-family:inherit; transition:background 0.15s;
    }
    .bkd-back-btn:hover { background:#e2e8f0; }
    .bkd-scroll { flex:1 1 0%; overflow-y:auto; padding:16px 20px 28px; display:flex; flex-direction:column; gap:12px; }
    .bkd-scroll::-webkit-scrollbar { width:4px; }
    .bkd-scroll::-webkit-scrollbar-thumb { background:#c7d2e8; border-radius:4px; }
    .bkd-card {
      background:#fff; border-radius:12px; border:1px solid rgba(0,0,0,0.06);
      padding:16px 18px;
    }
    .bkd-card-title {
      font-size:13px; font-weight:700; color:#374151;
      margin-bottom:14px; padding-bottom:8px;
      border-bottom:1px solid #f1f5f9;
      display:flex; justify-content:space-between; align-items:center;
    }
    .bkd-card-title span { color:#6b7280; font-weight:400; font-size:11px; }
    .bkd-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
    .bkd-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px 24px; }
    .bkd-grid-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px 20px; }
    .bkd-field { display:flex; flex-direction:column; gap:3px; }
    .bkd-label {
      font-size:10px; color:#9ca3af; font-weight:600; text-transform:uppercase;
      letter-spacing:0.3px; display:flex; gap:6px; align-items:center;
    }
    .bkd-label span { color:#374151; font-weight:400; text-transform:none; letter-spacing:0; }
    .bkd-value { font-size:13px; font-weight:500; color:#111827; }
    .bkd-value.blue { color:#1E3A8A; font-size:15px; font-weight:700; }
    .bkd-value.warn { color:#f59e0b; font-weight:600; }
    .bkd-top-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .bkd-vehicle-img {
      width:100%; height:120px; object-fit:contain; border-radius:8px;
      background:#f8fafc; padding:8px; margin-bottom:10px; display:block;
    }
    .bkd-check { display:flex; align-items:center; gap:7px; font-size:12px; color:#374151; }
    .bkd-check-box {
      width:16px; height:16px; border-radius:4px; display:inline-flex;
      align-items:center; justify-content:center; flex-shrink:0;
      font-size:10px;
    }
    .bkd-check-box.yes { background:#dcfce7; color:#16a34a; }
    .bkd-check-box.no  { background:#f1f5f9; color:#9ca3af; border:1px solid #e2e8f0; }
    /* payments mini-table */
    .bkd-pay-table { width:100%; border-collapse:collapse; font-size:12px; }
    .bkd-pay-table th { padding:7px 10px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #f1f5f9; }
    .bkd-pay-table td { padding:7px 10px; border-bottom:1px solid #f8fafc; color:#374151; }
    .bkd-pay-table tbody tr:last-child td { border-bottom:none; }
    .bkd-pay-summary { display:flex; gap:16px; margin-top:10px; padding-top:10px; border-top:1px solid #f1f5f9; }
    .bkd-pay-pill { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; }
    .bkd-pay-pill.paid { background:#dcfce7; color:#166534; }
    .bkd-pay-pill.balance { background:#fee2e2; color:#991b1b; }

/* Shell hidden until Firebase Auth confirmed */
#shell { display:none; }

/* ── Overlay ── */
#login-overlay {
  position:fixed;inset:0;z-index:9999;overflow:hidden;
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(170deg,#020c1e 0%,#041530 40%,#071a38 70%,#030e20 100%);
}

/* Dot-grid depth */
#login-overlay::before {
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(30,58,138,0.10) 1px,transparent 1px);
  background-size:30px 30px;
}

/* Static city skyline */
#lskyline {
  position:absolute;bottom:0;left:0;right:0;height:38%;
  pointer-events:none;opacity:0.13;
}

/* Nitro car — hidden, shoots across on login click */
#nitro-car {
  position:fixed;bottom:12%;left:-320px;
  width:280px;height:auto;
  z-index:10000;pointer-events:none;
  opacity:0;
}
#nitro-car.boost {
  animation:nitro-boost 0.72s cubic-bezier(0.15,0,0.5,1) forwards;
}
@keyframes nitro-boost {
  0%   { left:-320px; opacity:0; }
  8%   { opacity:1; }
  100% { left:calc(100vw + 60px); opacity:0.6; }
}

/* Smoke trail (pseudo-element on nitro-car parent) */
#nitro-trail {
  position:fixed;bottom:calc(12% + 18px);left:0;
  width:0;height:6px;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(148,163,184,0.35),rgba(255,255,255,0.12));
  border-radius:4px;opacity:0;
}
#nitro-trail.boost {
  animation:trail-grow 0.72s cubic-bezier(0.15,0,0.5,1) forwards;
}
@keyframes trail-grow {
  0%   { width:0;         opacity:0;   left:0; }
  8%   { opacity:1; }
  100% { width:calc(100vw + 60px); opacity:0; left:0; }
}

/* Glass card */
.lglass {
  position:relative;z-index:10;
  width:370px;max-width:92vw;
  background:rgba(6,24,60,0.62);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.1);
  padding:36px 32px 30px;
  box-shadow:
    0 28px 72px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.15);
}

/* GC badge */
.lgc-badge {
  width:54px;height:54px;margin:0 auto 14px;border-radius:16px;
  background:linear-gradient(135deg,#1E3A8A,#2563eb,#93c5fd);
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:900;color:#fff;letter-spacing:-1px;
  box-shadow:0 6px 22px rgba(30,58,138,0.45),inset 0 1px 0 rgba(255,255,255,0.2);
}
.lbrand-name {
  text-align:center;font-size:17px;font-weight:700;
  letter-spacing:1.5px;color:#f1f5f9;margin-bottom:2px;
}
.lbrand-sub {
  text-align:center;font-size:11.5px;color:rgba(148,163,184,0.72);
  margin-bottom:22px;letter-spacing:0.2px;
}
.ldivider {
  height:1px;margin-bottom:20px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,0.35),transparent);
}
.linput-wrap { margin-bottom:13px; }
.linput-label {
  display:block;font-size:10.5px;font-weight:600;
  color:rgba(148,163,184,0.8);margin-bottom:6px;
  letter-spacing:0.5px;text-transform:uppercase;
}
.linput-field {
  width:100%;box-sizing:border-box;
  background:rgba(255,255,255,0.05);
  border:1.5px solid rgba(59,130,246,0.30);
  border-radius:11px;padding:11px 15px;
  color:#f1f5f9;font-size:14px;outline:none;
  font-family:inherit;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.linput-field::placeholder { color:rgba(100,116,139,0.55); }
.linput-field:focus {
  border-color:rgba(59,130,246,0.85);
  background:rgba(255,255,255,0.08);
  box-shadow:0 0 0 3px rgba(30,58,138,0.25);
}
.lbtn {
  width:100%;border:none;border-radius:11px;padding:12px;
  margin-top:4px;font-size:13.5px;font-weight:700;cursor:pointer;
  font-family:inherit;color:#fff;
  background:linear-gradient(135deg,#1E3A8A 0%,#2563eb 50%,#1E3A8A 100%);
  box-shadow:0 4px 18px rgba(30,58,138,0.45);
  transition:opacity .15s,box-shadow .15s,transform .15s;
}
.lbtn:hover  { opacity:.9;box-shadow:0 6px 24px rgba(30,58,138,0.55); }
.lbtn:active { transform:scale(0.98); }
.lbtn-local {
  width:100%;border:1.5px solid rgba(148,163,184,0.22);border-radius:11px;padding:11px;
  font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;
  color:rgba(203,213,225,0.75);background:rgba(255,255,255,0.05);
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .15s,border-color .15s,color .15s;
}
.lbtn-local:hover {
  background:rgba(255,255,255,0.10);border-color:rgba(148,163,184,0.45);
  color:rgba(226,232,240,1);
}
#login-error {
  color:#fca5a5;font-size:12px;text-align:center;
  min-height:16px;margin-top:2px;font-weight:500;
}
#login-loading {
  text-align:center;color:rgba(148,163,184,0.7);
  font-size:13px;margin-top:10px;display:none;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ══════════════════════════════════════════════════
   HARBANA BOOKING MODAL
   ══════════════════════════════════════════════════ */
#bk-flow-overlay {
  background: rgba(15,23,42,0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: stretch;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  flex-direction: row;
}
#bk-flow-overlay .modal {
  background: #F4F5F7;
  border-radius: 22px;
  width: min(1080px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px -20px rgba(15,23,42,0.35);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
}
.modal-head {
  background: #fff;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}
.modal-back {
  width: 40px; height: 40px; border-radius: 12px;
  background: #F8F9FB; border: 1px solid rgba(15,23,42,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #0F172A; flex-shrink: 0;
}
.modal-back:hover { background: #EEF0F4; }
.modal-title-block { flex: 1; }
.modal-title { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.modal-crumb { font-size: 11px; color: #6B7180; margin-top: 2px; }
.steps { display: flex; align-items: center; gap: 10px; }
.step {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: #F8F9FB; border: 1px solid rgba(15,23,42,0.08);
  font-size: 12px; color: #6B7180; cursor: default;
}
.step .n {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(15,23,42,0.08);
  color: #6B7180; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.step.active { background: #1E3A8A; color: #fff; border-color: #1E3A8A; }
.step.active .n { background: #93c5fd; color: #1E3A8A; border-color: transparent; }
.step.done .n { background: #16A364; color: #fff; border-color: transparent; }
.modal-body { flex: 1; overflow-y: auto; padding: 24px; }

/* ── Step 1: Vehicle picker ── */
.bk-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.bk-toolbar h3 { font-size: 14px; font-weight: 600; margin: 0; color: #6B7180; }
.bk-search {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid rgba(15,23,42,0.08); border-radius: 12px;
  height: 42px; padding: 0 14px; width: 280px; max-width: 100%;
}
.bk-search i { color: #9AA0AE; font-size: 16px; }
.bk-search input {
  flex: 1; border: 0; outline: 0; background: none;
  font-family: inherit; font-size: 13px; text-align: right; color: #0F172A;
}
.veh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.veh {
  background: #fff;
  border: 1.5px solid rgba(15,23,42,0.08);
  border-radius: 16px; overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative;
}
.veh:hover { transform: translateY(-3px); border-color: rgba(30,58,138,0.45); box-shadow: 0 18px 40px -20px rgba(15,23,42,0.25); }
.veh.selected { border-color: #1E3A8A; box-shadow: 0 0 0 4px rgba(30,58,138,0.10); }
.veh.rented { opacity: 0.55; cursor: not-allowed; }
.veh.rented:hover { transform: none; border-color: rgba(15,23,42,0.08); box-shadow: none; }
.veh-img {
  height: 130px;
  background: radial-gradient(800px 220px at 50% 120%, rgba(30,58,138,0.08), transparent 70%),
    linear-gradient(180deg, #EEF2FF 0%, #E0E7FF 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; border-bottom: 1px solid rgba(15,23,42,0.05);
  overflow: hidden;
}
.veh-badge {
  position: absolute; top: 10px; inset-inline-start: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(22,163,100,0.12); color: #16A364;
  text-transform: uppercase; border: 1px solid rgba(22,163,100,0.20);
}
.veh-badge.r { background: rgba(217,67,76,0.10); color: #D9434C; border-color: rgba(217,67,76,0.20); }
.veh-body { padding: 14px 16px 16px; }
.veh-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.veh-meta { font-size: 11px; color: #6B7180; margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.veh-plate {
  background: #F8F9FB; border: 1px solid rgba(15,23,42,0.08);
  padding: 1px 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
}
.veh-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.veh-price { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.veh-price .cur { font-size: 10.5px; color: #6B7180; font-weight: 500; margin-inline-start: 3px; }
.veh-price .day { font-size: 10px; color: #9AA0AE; }
.veh-cta {
  display: flex; align-items: center; gap: 5px;
  background: #1E3A8A; color: #fff;
  border-radius: 999px; padding: 6px 12px;
  font-size: 11px; font-weight: 600;
}

/* ── Step 2: Form ── */
.bk-vehicle-bar {
  background: linear-gradient(180deg, #FFFFFF, #F0F4FF);
  border: 1px solid rgba(30,58,138,0.10); border-radius: 16px;
  padding: 14px 18px; display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.bk-vbar-img {
  width: 96px; height: 60px; border-radius: 12px;
  background: linear-gradient(180deg, #EEF2FF, #E0E7FF);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bk-vbar-info { flex: 1; min-width: 0; }
.bk-vbar-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.bk-vbar-meta { font-size: 11.5px; color: #6B7180; margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bk-vbar-price {
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
  background: #1E3A8A; color: #fff;
  padding: 8px 14px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.bk-vbar-price .d { font-size: 9.5px; font-weight: 500; color: #93c5fd; letter-spacing: 0.08em; text-transform: uppercase; }
.summary {
  background: linear-gradient(135deg, #1E3A8A 0%, #1e40af 60%, #2563eb 100%);
  border-radius: 16px; padding: 18px 22px; color: #fff;
  margin-bottom: 14px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px;
  border: 1px solid rgba(30,58,138,0.30);
}
.sum-cell { display: flex; flex-direction: column; gap: 4px; }
.sum-cell .lbl { font-size: 10.5px; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; text-transform: uppercase; }
.sum-cell .val { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.sum-cell.total .val { color: #93c5fd; font-size: 24px; }
.sum-cell .sub { font-size: 11px; color: rgba(255,255,255,0.45); }
.section {
  background: #fff; border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 14px;
}
.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.section-ico {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.section-ico.a { background: #DBEAFE; color: #1E3A8A; }
.section-ico.b { background: #E6EEFB; color: #2D6CE0; }
.section-ico.c { background: #EDE9F7; color: #6B4FB8; }
.section-ico.d { background: #E8F4ED; color: #16A364; }
.section-title { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.section-sub { font-size: 11px; color: #6B7180; margin-top: 1px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.span-2 { grid-column: span 2; }
.field-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #0F172A;
  text-align: right; justify-content: flex-start;
}
.field-label .req { color: #D9434C; }
.field-label .opt { font-size: 10px; color: #9AA0AE; font-weight: 500; margin-inline-start: 4px; }
.input, .select, .textarea {
  width: 100%; height: 44px;
  background: #F8F9FB; border: 1.5px solid rgba(15,23,42,0.09);
  border-radius: 12px; padding: 0 14px;
  font-family: inherit; font-size: 13.5px; color: #0F172A;
  outline: none; text-align: right;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: #9AA0AE; }
.input:focus, .select:focus, .textarea:focus {
  border-color: #1E3A8A;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(30,58,138,0.10);
}
.textarea { height: auto; min-height: 90px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.select-wrap { position: relative; }
.select { appearance: none; -webkit-appearance: none; padding-inline-end: 38px; cursor: pointer; }
.select-wrap::after {
  content: '\eaf2'; font-family: 'tabler-icons';
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  color: #6B7180; font-size: 16px; pointer-events: none;
}
.input-wrap { position: relative; }
.input-wrap .leading {
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  color: #9AA0AE; font-size: 16px; pointer-events: none;
}
.input-wrap.has-leading .input { padding-inline-start: 40px; }
input[type="date"].input, input[type="time"].input { direction: rtl; text-align: right; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.45); cursor: pointer; opacity: 0.75; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.toggle-row .t-lbl { font-size: 12.5px; font-weight: 500; }
.toggle { width: 38px; height: 22px; border-radius: 999px; background: #DBDFE6; position: relative; cursor: pointer; transition: background .2s; }
.toggle::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.15); transition: transform .2s;
}
.toggle.on { background: #1E3A8A; }
.toggle.on::after { transform: translateX(-16px); }
.modal-foot {
  background: #fff; border-top: 1px solid rgba(15,23,42,0.08);
  padding: 16px 24px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-shrink: 0;
}
.btn-ghost {
  height: 44px; padding: 0 22px; border-radius: 12px;
  background: #F8F9FB; border: 1.5px solid rgba(15,23,42,0.09);
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: #0F172A; cursor: pointer;
}
.btn-ghost:hover { background: #EEF0F4; }
.btn-bk-primary {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 24px; border-radius: 12px;
  background: #1E3A8A; color: #fff; border: none;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; letter-spacing: 0.01em;
  box-shadow: 0 8px 24px -10px rgba(30,58,138,0.50);
}
.btn-bk-primary:hover { background: #1e40af; }
/* Responsive — booking modal */
@media (max-width: 820px) {
  #bk-flow-overlay { padding: 0; }
  #bk-flow-overlay .modal { border-radius: 0; max-height: 100vh; }
  .modal-head { padding: 12px 16px; gap: 10px; }
  .modal-title { font-size: 15px; }
  .modal-body { padding: 16px 14px; }
  .modal-foot { padding: 12px 14px; flex-direction: row; }
  .btn-ghost, .btn-bk-primary { flex: 1; justify-content: center; }
  .bk-toolbar h3 { display: none; }
  .bk-search { width: 100%; }
  .veh-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .veh-img { height: 100px; }
  .veh-body { padding: 12px; }
  .section { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-grid.cols-3 { grid-template-columns: 1fr; }
  .field.span-2 { grid-column: span 1; }
  .summary { grid-template-columns: 1fr 1fr; padding: 14px 16px; gap: 12px; }
  .sum-cell.total { grid-column: span 2; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08); }
}
@media (max-width: 480px) {
  .veh-grid { grid-template-columns: 1fr; }
}