/* ═══════════════════════════════════════════════════════════════
   Rajadhiraj Cabs — Admin Dark Theme (Horizon)
   ─────────────────────────────────────────────────────────────
   Scoped to `body.admin-page` so public-facing pages are
   untouched. Loaded conditionally from includes/header.php.

   Phase 1 covers the bookings list + shared chrome (navbar,
   sidebar, toolbar, cards, search). Phase 2 adds polish for
   the edit/add wizard form internals (date picker, vehicle
   modal, etc.) — until then those pages inherit the base dark
   treatment defined here so nothing looks broken.
   ═══════════════════════════════════════════════════════════════ */

/* ───── 0. Booking ID font ─────────────────────────────────────
   Scoped override for the booking ref badge only — the rest of
   the admin UI keeps the default system / Bootstrap stack.
   DM Serif Display Italic gives the ID a refined, editorial
   headline feel against the dark Horizon background. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&display=swap');

body.admin-page .booking-card .card-id-bar .fs-4,
body.admin-page .booking-ref,
body.admin-page .ref-badge {
    font-family: 'DM Serif Display', 'Didot', 'Bodoni MT', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
}

/* ───── 1. Horizon background ──────────────────────────────── */
/* Layered background-images: ember glow on top, vertical gradient
   underneath. Pure background-image keeps content stacking simple —
   no ::before / z-index hacks that fight Bootstrap's sticky navbar
   or the position:fixed status bar.

   Extra top padding (was 50px from style.css, designed for the orange
   status bar + 35px navbar offset) bumped to 100px so page headings
   sit below the floating sticky navbar instead of being clipped by
   it on scroll. */
body.admin-page {
    background-color: #02010A !important;
    background-image:
        radial-gradient(ellipse 80% 35% at 50% 100%,
            rgba(255, 107, 53, 0.13), transparent 70%),
        linear-gradient(180deg,
            #02010A 0%,
            #060418 25%,
            #0E0820 50%,
            #200810 75%,
            #2A0A0A 100%) !important;
    background-attachment: fixed !important;
    color: #FAFAFA;
    /* Just enough room for the floating navbar (top:12 + ~50 height +
       small buffer). Navbar is forced to position:fixed below so it
       always sits in this reserved space — content never scrolls
       behind it. */
    padding-top: 72px !important;
}

/* Remove the orange top status strip on admin — clashes with the
   Horizon gradient and pushes the navbar down for no purpose now
   that the navbar itself reads as the visual anchor. Public site
   still has the orange line (selector is scoped to admin-page). */
body.admin-page .top-status-line { display: none !important; }

/* Logo: admin pages now use logo-dark.svg (white crown + orange car
   + white wordmark baked in), so no filter needed. Any leftover
   reference to the original logo-transparent.png on admin still
   gets the brightness/invert hack as a safety net so it stays
   visible until everything's migrated. */
body.admin-page img[src*="logo-transparent"] {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* ───── 2. Navbar (frosted dark, fixed-floating) ──────────── */
body.admin-page .navbar {
    background: rgba(8, 8, 14, 0.5) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    /* Fixed instead of sticky so it never overlaps content on scroll,
       and sits at a consistent top:12px instead of the legacy 35px
       offset that was meant to clear the (now-hidden) orange strip. */
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: 96% !important;
    margin: 0 !important;
}
body.admin-page .navbar-brand,
body.admin-page .drawer-btn,
body.admin-page .drawer-btn i {
    color: #FAFAFA !important;
}
body.admin-page .drawer-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.admin-page .drawer-btn:hover {
    background: rgba(255, 107, 53, 0.2) !important;
    border-color: rgba(255, 107, 53, 0.4) !important;
}
body.admin-page .navbar .btn-primary,
body.admin-page .btn-search-pill {
    background: linear-gradient(135deg, #FF6B35, #E63946) !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35) !important;
    color: #fff !important;
}

/* ───── 3. Toolbar (page heading + search + filters) ─────── */
body.admin-page .section { background: transparent !important; }

body.admin-page .admin-bookings-toolbar {
    background: transparent !important;
}
@media (max-width: 991.98px) {
    body.admin-page .admin-bookings-toolbar {
        background: rgba(8, 8, 14, 0.7) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
    }
}

body.admin-page h1,
body.admin-page h2,
body.admin-page h3 { color: #FAFAFA !important; }
body.admin-page h1 .text-dark { color: #FAFAFA !important; }
body.admin-page h1 .text-orange { color: #FF8B5A !important; }

/* Back button (circle outline) */
body.admin-page .btn-outline-dark {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FAFAFA !important;
}
body.admin-page .btn-outline-dark:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FAFAFA !important;
}

/* Search bar (override the bg-white pill) */
body.admin-page .input-group.bg-white {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
body.admin-page .input-group .input-group-text {
    background: transparent !important;
    border: 0;
    color: rgba(255, 255, 255, 0.6) !important;
}
body.admin-page .input-group .input-group-text .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}
body.admin-page .input-group .form-control {
    background: transparent !important;
    color: #FAFAFA !important;
    border: 0 !important;
}
body.admin-page .input-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* ───── 4. Booking cards (the heart of this phase) ─────────── */

body.admin-page .booking-card {
    background: rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
/* Only apply hover on devices with a real pointer (mouse/trackpad). On
   touch devices, the first tap was activating :hover and consuming the
   click, forcing admins to double-tap to enter the edit page. */
@media (hover: hover) and (pointer: fine) {
    body.admin-page .booking-card:hover {
        background: rgba(255, 255, 255, 0.11) !important;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }
}

/* Card top bar (RAJADHIRAJ + status dropdown) */
body.admin-page .booking-card .card-top-bar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.admin-page .booking-card .card-top-bar .text-dark {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Card ID bar (was solid orange — now neutral, ref glows) */
body.admin-page .booking-card .card-id-bar {
    background: transparent !important;
}
body.admin-page .booking-card .card-id-bar .text-white {
    color: #FAFAFA !important;
}
body.admin-page .booking-card .card-id-bar .fs-4 {
    color: #FF8B5A !important;
    /* font-family + letter-spacing handled by the DM Serif Display
       rule above — keep this block colour-only so the two stay in sync. */
}
/* WhatsApp icon next to the phone number — brand green, just the icon */
body.admin-page .booking-card .card-id-bar .bi-whatsapp {
    color: #128C7E !important;
}

/* Vendor/driver row (was cream) */
body.admin-page .booking-card .card-vendor-driver-bar {
    background: rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.admin-page .booking-card .card-vendor-driver-bar .text-secondary {
    color: rgba(255, 255, 255, 0.5) !important;
}
body.admin-page .booking-card .card-vendor-driver-bar .text-dark {
    color: #FAFAFA !important;
}
body.admin-page .booking-card .card-vendor-driver-bar .text-primary {
    color: #93C5FD !important;
}
body.admin-page .booking-card .card-vendor-driver-bar .text-muted {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Clickable area (was bg #fff) */
body.admin-page .booking-card .card-content-area {
    background: transparent !important;
}

/* Vehicle bar */
body.admin-page .booking-card .card-vehicle-bar {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}
body.admin-page .booking-card .card-vehicle-bar .text-secondary {
    color: rgba(255, 255, 255, 0.5) !important;
}
body.admin-page .booking-card .card-vehicle-bar .text-primary-dark {
    color: #FAFAFA !important;
}
body.admin-page .booking-card .card-vehicle-bar .text-primary {
    color: #93C5FD !important;
}
body.admin-page .booking-card .card-vehicle-bar .text-muted {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Journey body */
body.admin-page .booking-card .card-journey-body { color: #FAFAFA; }
body.admin-page .booking-card .card-cities { color: #FAFAFA !important; }
body.admin-page .booking-card .card-schedule {
    color: rgba(255, 255, 255, 0.55) !important;
}
body.admin-page .booking-card .card-journey-body .badge.bg-primary,
body.admin-page .booking-card .card-fare-pill {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.28), rgba(230, 57, 70, 0.22)) !important;
    color: #FFD0B5 !important;
    border: 1px solid rgba(255, 107, 53, 0.55) !important;
    backdrop-filter: blur(10px);
    padding: 7px 16px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.2);
}
/* Placeholder fare pill (no fix amount) — same shape, muted */
body.admin-page .booking-card .card-fare-pill.is-placeholder {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none;
    font-weight: 600 !important;
}

/* Action footer (was yellow #fbc02d) */
body.admin-page .booking-card .card-actions-bar {
    background: rgba(0, 0, 0, 0.25) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.admin-page .booking-card .card-action-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.75) !important;
}
body.admin-page .booking-card .card-action-btn:hover {
    background: rgba(255, 107, 53, 0.15) !important;
    color: #FFB088 !important;
    border-color: rgba(255, 107, 53, 0.35) !important;
}

/* ───── 5. Status-pill dropdown (inline status changer) ─────
   Inline styles set the closed-state bg+color per status. We
   override them per .status-X parent class so each status gets
   a dark-friendly tint while keeping the colour meaning.       */
body.admin-page .status-badge-select {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none !important;
}
body.admin-page .booking-card.status-pending  .status-badge-select { background-color: rgba(252, 211, 77, 0.32) !important; color: #FDE68A !important; border-color: rgba(252, 211, 77, 0.5) !important; }
body.admin-page .booking-card.status-approved .status-badge-select { background-color: rgba(96, 165, 250, 0.35) !important; color: #BFDBFE !important; border-color: rgba(96, 165, 250, 0.55) !important; }
body.admin-page .booking-card.status-running  .status-badge-select { background-color: rgba(52, 211, 153, 0.32) !important; color: #A7F3D0 !important; border-color: rgba(52, 211, 153, 0.5) !important; }
body.admin-page .booking-card.status-completed .status-badge-select { background-color: rgba(168, 162, 158, 0.38) !important; color: #F5F5F4 !important; border-color: rgba(168, 162, 158, 0.55) !important; }
body.admin-page .booking-card.status-cancelled .status-badge-select { background-color: rgba(248, 113, 113, 0.32) !important; color: #FECACA !important; border-color: rgba(248, 113, 113, 0.55) !important; }
/* Dropdown options stay readable on light system popovers */
body.admin-page .status-badge-select option {
    background: #1A1A1F !important;
    color: #FAFAFA !important;
}

/* Search highlight on dark */
body.admin-page .highlight {
    background-color: rgba(255, 107, 53, 0.35) !important;
    color: #FFF1E0 !important;
}

/* ───── 6. Flash alerts ─────────────────────────────────────── */
body.admin-page .alert-success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #6EE7B7 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}
body.admin-page .alert-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #FCA5A5 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
body.admin-page .alert-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #FCD34D !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
body.admin-page .alert-info {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #7DD3FC !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
}

/* ───── 7. Forms (covers other admin pages too — Phase 2
   refines further) ─────────────────────────────────────────── */
body.admin-page .form-control,
body.admin-page .form-select {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FAFAFA !important;
}
body.admin-page .form-control::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
body.admin-page .form-control:focus,
body.admin-page .form-select:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 107, 53, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
    color: #FAFAFA !important;
}
body.admin-page .form-control[readonly] {
    background: rgba(255, 255, 255, 0.04) !important;
}
body.admin-page .form-label,
body.admin-page label {
    color: rgba(255, 255, 255, 0.85);
}
/* Select options menu inherits OS dark for native pickers */
body.admin-page select option {
    background: #1A1A1F;
    color: #FAFAFA;
}

/* ───── 8. Generic Bootstrap utilities ─────────────────────── */
body.admin-page .text-dark { color: #FAFAFA !important; }
body.admin-page .text-muted { color: rgba(255, 255, 255, 0.5) !important; }
body.admin-page .text-secondary { color: rgba(255, 255, 255, 0.65) !important; }
body.admin-page .text-orange { color: #FF8B5A !important; }
body.admin-page .text-primary { color: #93C5FD !important; }
body.admin-page .text-primary-dark { color: #FAFAFA !important; }
body.admin-page .text-success { color: #6EE7B7 !important; }
body.admin-page .text-danger { color: #FCA5A5 !important; }
body.admin-page .text-warning { color: #FCD34D !important; }
body.admin-page .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }
body.admin-page .border-secondary { border-color: rgba(255, 255, 255, 0.1) !important; }
body.admin-page .bg-light { background: rgba(255, 255, 255, 0.06) !important; }
body.admin-page .bg-white { background: rgba(255, 255, 255, 0.08) !important; }

/* Generic .card (used on other admin pages, light Phase 2 polish later) */
body.admin-page .card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FAFAFA;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Buttons (additional non-primary variants used across admin) */
body.admin-page .btn-light {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FAFAFA !important;
}
body.admin-page .btn-light:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 2 — Booking edit + add wizard forms
   ═══════════════════════════════════════════════════════════════ */

/* ───── Wizard progress bar + step circles ─────────────────── */
body.admin-page .wizard-progress-track {
    background: rgba(255, 255, 255, 0.08) !important;
}
body.admin-page .wizard-progress-fill {
    background: linear-gradient(90deg, #FF6B35 0%, #FFB088 100%) !important;
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.5);
}
body.admin-page .wizard-step-label .step-circle {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.55) !important;
}
body.admin-page .wizard-step-label .step-name {
    color: rgba(255, 255, 255, 0.55) !important;
}
body.admin-page .wizard-step-label.active .step-circle {
    background: linear-gradient(135deg, #FF6B35, #E63946) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(255, 107, 53, 0.55) !important;
}
body.admin-page .wizard-step-label.active .step-name {
    color: #FF8B5A !important;
}
body.admin-page .wizard-step-label.completed .step-circle {
    background: rgba(255, 107, 53, 0.18) !important;
    border-color: #FF8B5A !important;
    color: #FF8B5A !important;
}

/* ───── Wizard cards (frosted glass) ───────────────────────── */
body.admin-page .wizard-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    /* Each wizard-card creates its own stacking context (backdrop-filter
       does that automatically). Without explicit positioning, an absolute-
       positioned dropdown inside one card gets clipped by the next
       sibling card's stacking context. Position+z-index here lets the
       :has() rule below raise the active card above its siblings. */
    position: relative;
    z-index: 1;
}
/* When any dropdown popover inside a wizard-card is open (the .d-none
   class is removed by JS while results are visible), lift the whole
   card above its siblings so the dropdown spills out cleanly instead
   of being painted over by the next wizard-card. */
body.admin-page .wizard-card:has(.list-group:not(.d-none)),
body.admin-page .wizard-card:has(#vendor_search_results:not(.d-none)),
body.admin-page .wizard-card:has(#search_results:not(.d-none)) {
    z-index: 1050;
}

/* Customer-search card at the top of the add page lives OUTSIDE the
   wizard but its dropdown was getting painted under the wizard step
   indicator (which has transform:scale, creating its own context).
   Same :has() lift makes the whole search card float above the wizard
   while its dropdown is open. */
body.admin-page .card:has(#search_results:not(.d-none)) {
    position: relative;
    z-index: 1100;
}
body.admin-page .wizard-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.admin-page .wizard-card-header > i {
    background: rgba(255, 107, 53, 0.18) !important;
    color: #FFB088 !important;
}
body.admin-page .wizard-card-title { color: #FAFAFA !important; }
body.admin-page .wizard-card-sub { color: rgba(255, 255, 255, 0.55) !important; }

/* ───── Journey tiles (One-way / Round-trip / City / Airport) ─ */
body.admin-page .journey-tile {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}
body.admin-page .journey-tile i { color: rgba(255, 255, 255, 0.55) !important; }
body.admin-page .journey-tile span { color: rgba(255, 255, 255, 0.75) !important; }
body.admin-page .journey-tile:hover {
    border-color: rgba(255, 107, 53, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
body.admin-page .journey-tile.active {
    border-color: #FF8B5A !important;
    background: rgba(255, 107, 53, 0.15) !important;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.25) !important;
}
body.admin-page .journey-tile.active i,
body.admin-page .journey-tile.active span {
    color: #FFB088 !important;
}

/* ───── Pill radios (pickup type, etc.) ────────────────────── */
body.admin-page .pill-radio {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.75) !important;
}
body.admin-page .pill-radio:hover {
    border-color: rgba(255, 107, 53, 0.55) !important;
    color: #FFB088 !important;
}
body.admin-page .pill-radio.active {
    background: linear-gradient(135deg, #FF6B35, #E63946) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.45) !important;
}

/* ───── Chip checkboxes (Family Trip / Friendly / etc.) ────── */
body.admin-page .chip-checkbox {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid transparent !important;
    color: rgba(255, 255, 255, 0.75) !important;
}
body.admin-page .chip-checkbox:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}
body.admin-page .chip-checkbox.active {
    background: rgba(255, 107, 53, 0.18) !important;
    border-color: #FF8B5A !important;
    color: #FFB088 !important;
}

/* ───── Bootstrap modals (vehicle picker, WhatsApp, etc.) ──── */
body.admin-page .modal-content {
    background: rgba(15, 12, 22, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    color: #FAFAFA;
}
body.admin-page .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.admin-page .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.admin-page .modal-title { color: #FAFAFA !important; }
body.admin-page .btn-close {
    filter: invert(1) grayscale(100%) brightness(2);
}
body.admin-page .modal-backdrop.show { opacity: 0.7; }

/* List group items inside modals (vehicle picker) */
body.admin-page .list-group-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #FAFAFA !important;
}
body.admin-page .list-group-item:hover,
body.admin-page .list-group-item.bg-light-orange,
body.admin-page .list-group-item[style*="#fff3e0"] {
    background: rgba(255, 107, 53, 0.15) !important;
    color: #FFB088 !important;
}
body.admin-page .list-group-item .text-muted {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Search results / suggestion popovers — customer search, vendor
   search, home-town autocomplete. All three use a custom
   .list-group.position-absolute pattern with white default bg. */
body.admin-page #search_results.list-group,
body.admin-page #vendor_search_results.list-group,
body.admin-page #city-suggestions.list-group,
body.admin-page .list-group.position-absolute {
    background: #0F0C16 !important;
    background-color: #0F0C16 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 4px !important;
}
body.admin-page #city-suggestions .list-group-item,
body.admin-page #search_results .list-group-item,
body.admin-page #vendor_search_results .list-group-item {
    background: transparent !important;
    background-color: transparent !important;
    color: #FAFAFA !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
}
body.admin-page #city-suggestions .list-group-item:hover,
body.admin-page #search_results .list-group-item-action:hover,
body.admin-page #vendor_search_results .list-group-item-action:hover {
    background: rgba(255, 107, 53, 0.18) !important;
    background-color: rgba(255, 107, 53, 0.18) !important;
    color: #FFB088 !important;
}

/* Buttons: orange brand variants & semantic */
body.admin-page .btn-orange,
body.admin-page .btn-orange-gradient {
    background: linear-gradient(135deg, #FF6B35, #E63946) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35) !important;
}
body.admin-page .btn-success {
    background: linear-gradient(135deg, #10B981, #047857) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}
body.admin-page .btn-danger {
    background: linear-gradient(135deg, #EF4444, #B91C1C) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
}
body.admin-page .btn-outline-primary,
body.admin-page .btn-outline-success,
body.admin-page .btn-outline-danger,
body.admin-page .btn-outline-warning,
body.admin-page .btn-outline-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #FAFAFA !important;
}

/* Borders (border-orange, border-light, etc.) */
body.admin-page .border-orange { border-color: rgba(255, 107, 53, 0.4) !important; }
body.admin-page .border-light  { border-color: rgba(255, 255, 255, 0.1) !important; }
body.admin-page .border-success { border-color: rgba(16, 185, 129, 0.4) !important; }
body.admin-page .border-danger  { border-color: rgba(239, 68, 68, 0.4) !important; }
body.admin-page .border-primary { border-color: rgba(96, 165, 250, 0.4) !important; }

/* Vehicle picker selected state (was bg-light-orange #fff3e0 inline) */
body.admin-page .vehicle-option[style*="#fff3e0"] {
    background: rgba(255, 107, 53, 0.15) !important;
    border: 1px solid rgba(255, 107, 53, 0.35) !important;
}

/* Flatpickr date picker — dark theme */
body.admin-page .flatpickr-calendar {
    background: rgba(15, 12, 22, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(20px);
}
body.admin-page .flatpickr-months,
body.admin-page .flatpickr-current-month,
body.admin-page .flatpickr-weekdays,
body.admin-page .flatpickr-weekday {
    color: #FAFAFA !important;
    background: transparent !important;
    fill: #FAFAFA !important;
}
body.admin-page .flatpickr-day {
    color: rgba(255, 255, 255, 0.85) !important;
}
body.admin-page .flatpickr-day:hover {
    background: rgba(255, 107, 53, 0.18) !important;
    border-color: transparent !important;
}
body.admin-page .flatpickr-day.selected,
body.admin-page .flatpickr-day.startRange,
body.admin-page .flatpickr-day.endRange {
    background: #FF6B35 !important;
    border-color: #FF6B35 !important;
    color: #fff !important;
}
body.admin-page .flatpickr-day.today {
    border-color: #FF8B5A !important;
}
body.admin-page .flatpickr-day.disabled,
body.admin-page .flatpickr-day.flatpickr-disabled,
body.admin-page .flatpickr-day.prevMonthDay,
body.admin-page .flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, 0.25) !important;
}
body.admin-page .flatpickr-prev-month svg,
body.admin-page .flatpickr-next-month svg {
    fill: #FAFAFA !important;
}
body.admin-page .flatpickr-months .flatpickr-prev-month:hover svg,
body.admin-page .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #FF8B5A !important;
}
body.admin-page .numInputWrapper:hover,
body.admin-page .flatpickr-current-month input.cur-year:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Car-expiry warning panel — state via classes from checkCarExpiry() */
body.admin-page .car-warning-panel {
    color: #FAFAFA !important;
}
body.admin-page .car-warning-panel.car-warning-ok {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.admin-page .car-warning-panel.car-warning-expired {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
}
body.admin-page .car-warning-panel .car-warning-header {
    color: #FCA5A5;
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 4px;
}

/* Save/Full Detail buttons in the final action row */
body.admin-page #wizardFinalActions {
    color: #FAFAFA;
}

/* Bottom wizard nav (Previous / Next) */
body.admin-page .wizard-nav-bar .btn-light {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FAFAFA !important;
}
/* Mobile wizard nav: dark-glass sticky bar with a proper hierarchy.
   Cancel (destructive) demoted to a subtle text link above.
   Previous + Next become an equal-width pair below — Previous is
   ghost, Next is the brand-orange primary. When Previous is hidden
   (step 1), Next stretches full width. */
@media (max-width: 575.98px) {
    body.admin-page .wizard-nav-bar {
        background: rgba(8, 8, 14, 0.85) !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 4px 10px !important;
        padding: 10px 16px 12px !important;
    }
    /* Row 1: Cancel demoted to a small centered text link */
    body.admin-page .wizard-nav-bar .btn-outline-secondary {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
        background: transparent !important;
        border: 0 !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        padding: 4px 14px !important;
        text-decoration: none;
        box-shadow: none !important;
    }
    body.admin-page .wizard-nav-bar .btn-outline-secondary:hover,
    body.admin-page .wizard-nav-bar .btn-outline-secondary:active {
        color: #FCA5A5 !important;
        background: transparent !important;
    }
    /* Row 2 left: Previous as ghost outline */
    body.admin-page #wizardPrevBtn {
        grid-column: 1;
        grid-row: 2;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        color: #FAFAFA !important;
        padding: 12px 18px !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    /* Row 2 right: Next as brand-orange primary, full-width within cell */
    body.admin-page #wizardNextBtn {
        grid-column: 2;
        grid-row: 2;
        background: linear-gradient(135deg, #FF6B35, #E63946) !important;
        border: 0 !important;
        color: #fff !important;
        padding: 12px 18px !important;
        font-weight: 700 !important;
        box-shadow: 0 6px 18px rgba(255, 107, 53, 0.4) !important;
        margin: 0 !important;
    }
    /* When Previous is hidden (step 1), Next spans the full width */
    body.admin-page .wizard-nav-bar:has(#wizardPrevBtn[style*="display:none"]) #wizardNextBtn,
    body.admin-page .wizard-nav-bar:has(#wizardPrevBtn[style*="display: none"]) #wizardNextBtn {
        grid-column: 1 / -1;
    }
}

/* Customer/Vendor selection card (the orange-tinted boxes on add page) */
body.admin-page .card.bg-light-orange,
body.admin-page [style*="background: #fff8f0"],
body.admin-page [style*="background:#fff8f0"] {
    background: rgba(255, 107, 53, 0.08) !important;
    border: 1px solid rgba(255, 107, 53, 0.25) !important;
    color: #FAFAFA;
}

/* Customer search bar (border-orange rounded-pill input) */
body.admin-page #customer_search,
body.admin-page #vendor_search {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 107, 53, 0.4) !important;
}

/* Inline error / hint banners that hardcode background colors */
body.admin-page [style*="background:#fff3cd"],
body.admin-page [style*="background: #fff3cd"] {
    background: rgba(252, 211, 77, 0.12) !important;
    color: #FCD34D !important;
    border-color: rgba(252, 211, 77, 0.4) !important;
}

/* Iframe modal (booking-edit popups) */
body.admin-page iframe { background: transparent; }

/* Time-picker chevron + manual-time toggle button on edit form */
body.admin-page #toggle-manual-time {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Hidden divider lines used between fare rows */
body.admin-page hr { border-color: rgba(255, 255, 255, 0.1) !important; }

/* Tooltip pills (Bootstrap 5) */
body.admin-page .tooltip-inner {
    background: rgba(15, 12, 22, 0.95) !important;
    color: #FAFAFA !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Google Places autocomplete (.pac-container) — Google injects this
   at the <body> level with its own light styles. admin-theme.css
   only loads on admin pages, so these rules are already scoped to
   admin without needing a body.admin-page prefix. Aggressive
   !important on every property because Google's CSS uses high
   specificity selectors. Solid background instead of rgba so the
   text always reads even before backdrop-filter resolves. */
.pac-container,
.pac-container.pac-logo {
    background: #0F0C16 !important;
    background-color: #0F0C16 !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
    color: #FAFAFA !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
    z-index: 2000 !important;
    padding: 4px !important;
    margin-top: 4px !important;
}
.pac-container .pac-item,
.pac-container .pac-item.pac-item-selected {
    background: transparent !important;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    cursor: pointer;
    border-radius: 8px;
    line-height: 1.4;
}
.pac-container .pac-item:first-of-type,
.pac-container .pac-item:first-child {
    border-top: 0 !important;
}
.pac-container .pac-item:hover,
.pac-container .pac-item.pac-item-selected {
    background: rgba(255, 107, 53, 0.18) !important;
    background-color: rgba(255, 107, 53, 0.18) !important;
    color: #FFB088 !important;
}
.pac-container .pac-item-query,
.pac-container .pac-item-query .pac-matched {
    color: #FAFAFA !important;
    font-weight: 600 !important;
}
.pac-container .pac-matched {
    color: #FF8B5A !important;
    font-weight: 700 !important;
}
/* Pin icon at the start of each suggestion — match the orange pin
   the Home Town (#city-suggestions) dropdown uses, so all three
   location dropdowns read identically. Google's default sprite is
   replaced by a brand-orange inline SVG so colour is consistent. */
.pac-container .pac-icon,
.pac-container .pac-icon-marker {
    background-image: none !important;
    width: 18px !important;
    height: 20px !important;
    margin-right: 8px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.pac-container .pac-icon::before,
.pac-container .pac-icon-marker::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FF8B5A'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* The "Powered by Google" attribution shown via ::after on .pac-logo */
.pac-logo:after {
    filter: brightness(2) invert(1) !important;
    background-color: transparent !important;
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — Dashboard / drivers / vendors / cars / settings
   ═══════════════════════════════════════════════════════════════ */

/* Dashboard stat cards: was 7 bright gradient cards fighting for
   attention. Now all dark frosted glass — status meaning preserved
   via a tinted icon circle so you can still scan by color at a
   glance without the bright fills dominating the page. */
body.admin-page .stat-card,
body.admin-page .card-total,
body.admin-page .card-pending,
body.admin-page .card-confirmed,
body.admin-page .card-completed,
body.admin-page .card-cancelled,
body.admin-page .card-running,
body.admin-page .card-upcoming {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.admin-page .stat-card:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
/* Kill the diagonal shine overlay — was designed for the gradient bg */
body.admin-page .stat-card::after { background: transparent !important; }

/* Status-tinted icon circle is now the at-a-glance color cue */
body.admin-page .card-upcoming  .icon-circle { background: rgba(168, 85, 247, 0.22) !important; color: #C4B5FD !important; border-color: rgba(168, 85, 247, 0.4) !important; }
body.admin-page .card-pending   .icon-circle { background: rgba(252, 211, 77, 0.22) !important; color: #FCD34D !important; border-color: rgba(252, 211, 77, 0.4) !important; }
body.admin-page .card-confirmed .icon-circle { background: rgba(96, 165, 250, 0.22) !important; color: #93C5FD !important; border-color: rgba(96, 165, 250, 0.4) !important; }
body.admin-page .card-running   .icon-circle { background: rgba(252, 211, 77, 0.22) !important; color: #FCD34D !important; border-color: rgba(252, 211, 77, 0.4) !important; }
body.admin-page .card-completed .icon-circle { background: rgba(16, 185, 129, 0.22) !important; color: #6EE7B7 !important; border-color: rgba(16, 185, 129, 0.4) !important; }
body.admin-page .card-cancelled .icon-circle { background: rgba(239, 68, 68, 0.22) !important; color: #FCA5A5 !important; border-color: rgba(239, 68, 68, 0.4) !important; }
body.admin-page .card-total     .icon-circle { background: rgba(96, 165, 250, 0.22) !important; color: #93C5FD !important; border-color: rgba(96, 165, 250, 0.4) !important; }

/* Make the big number on each card pop a touch more on dark glass */
body.admin-page .stat-card .display-4,
body.admin-page .stat-card .display-5,
body.admin-page .stat-card .display-6,
body.admin-page .stat-card h1,
body.admin-page .stat-card h2 { color: #FAFAFA !important; }
body.admin-page .action-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FAFAFA !important;
}
body.admin-page .action-card:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 107, 53, 0.35) !important;
}

/* Driver / vendor / car list cards (often plain Bootstrap .card) */
body.admin-page .card.shadow-sm,
body.admin-page .card.shadow-lg {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
body.admin-page .card-header {
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #FAFAFA;
}
body.admin-page .card-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Tables on management pages */
body.admin-page .table {
    color: #FAFAFA !important;
    --bs-table-bg: transparent !important;
    --bs-table-color: #FAFAFA !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03) !important;
    --bs-table-striped-color: #FAFAFA !important;
    --bs-table-hover-bg: rgba(255, 107, 53, 0.08) !important;
    --bs-table-hover-color: #FAFAFA !important;
    --bs-table-border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Cars page: expired-row highlight (was #fff5f5) */
body.admin-page .table-danger-light {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #FAFAFA !important;
}
body.admin-page .table-danger-light td { color: #FAFAFA; }
body.admin-page .table-danger-light .text-danger { color: #FCA5A5 !important; }

/* Table headers (used on drivers/cars/vendors lists) */
body.admin-page .table thead.bg-light,
body.admin-page .table > thead {
    background: rgba(0, 0, 0, 0.25) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}
body.admin-page .table thead.bg-light th,
body.admin-page .table > thead th {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Table cells */
body.admin-page .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: #FAFAFA !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}
body.admin-page .table-hover > tbody > tr:hover > * {
    background: rgba(255, 107, 53, 0.08) !important;
    color: #FAFAFA !important;
}

/* Bootstrap "subtle" badge variants on dark */
body.admin-page .bg-info-subtle    { background: rgba(96, 165, 250, 0.15) !important; color: #93C5FD !important; }
body.admin-page .bg-success-subtle { background: rgba(16, 185, 129, 0.15) !important; color: #6EE7B7 !important; }
body.admin-page .bg-warning-subtle { background: rgba(252, 211, 77, 0.15) !important; color: #FCD34D !important; }
body.admin-page .bg-danger-subtle  { background: rgba(239, 68, 68, 0.15) !important; color: #FCA5A5 !important; }
body.admin-page .text-info { color: #93C5FD !important; }
body.admin-page .text-info-emphasis { color: #BFDBFE !important; }
body.admin-page .border-info-subtle { border-color: rgba(96, 165, 250, 0.3) !important; }
body.admin-page .border-success-subtle { border-color: rgba(16, 185, 129, 0.3) !important; }
body.admin-page .border-danger-subtle { border-color: rgba(239, 68, 68, 0.3) !important; }
body.admin-page .border-warning-subtle { border-color: rgba(252, 211, 77, 0.3) !important; }

/* Settings page custom utilities */
body.admin-page .bg-orange-light { background: rgba(255, 107, 53, 0.12) !important; }
body.admin-page .bg-dark-light { background: rgba(255, 255, 255, 0.08) !important; color: #FAFAFA !important; }

/* Force form-control:focus on settings page to honor the dark theme */
body.admin-page .form-control:focus,
body.admin-page .form-select:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #FAFAFA !important;
}

/* Settings page sections, info panels */
body.admin-page .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.admin-page .nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: transparent !important;
}
body.admin-page .nav-tabs .nav-link.active {
    background: rgba(255, 107, 53, 0.12) !important;
    color: #FF8B5A !important;
    border-color: rgba(255, 107, 53, 0.4) rgba(255, 107, 53, 0.4) transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 4 — Login / OTP / Devices
   ═══════════════════════════════════════════════════════════════ */

/* Login / OTP centered card */
body.admin-page section.section.d-flex .card {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* OTP fancy input center */
body.admin-page #otp_code.bg-light {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 107, 53, 0.35) !important;
    color: #FAFAFA !important;
    letter-spacing: 0.5em;
}

/* Bg-light variants used in login (force-override Bootstrap) */
body.admin-page .form-control.bg-light {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #FAFAFA !important;
}

/* Devices list rows */
body.admin-page .device-row,
body.admin-page .device-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #FAFAFA;
}

/* Generic min-vh-100 sections sometimes set a bg-light — kill that */
body.admin-page .min-vh-100.bg-light,
body.admin-page section.bg-light {
    background: transparent !important;
}

/* ───── Final: Mobile polish ───────────────────────────────── */
@media (max-width: 575.98px) {
    body.admin-page .booking-card .status-badge {
        padding: 4px 12px !important;
    }
    body.admin-page .wizard-card { padding: 14px !important; }
}