/*
 * TranspoLink — Liquid Glass
 * Load AFTER all existing stylesheets.
 * Uses the existing html[data-user-theme="dark"] toggle.
 * Scope: Passenger, Driver and Admin.
 */

/* =========================================================
   1. SHARED DESIGN TOKENS
   ========================================================= */

html:root body:is(.passenger-ui, .driver-ui, .admin-ui) {
    --lg-ink: #14213d;
    --lg-muted: #475971;
    --lg-link: #1455ac;
    --lg-blue: #1e6fea;
    --lg-orange: #ff8a1f;

    --lg-panel: rgba(255, 255, 255, .48);
    --lg-tile: rgba(255, 255, 255, .66);
    --lg-field: rgba(255, 255, 255, .58);
    --lg-hover: rgba(255, 255, 255, .78);
    --lg-solid: #edf4fa;
    --lg-border: rgba(255, 255, 255, .72);
    --lg-divider: rgba(43, 79, 119, .16);
    --lg-highlight: rgba(255, 255, 255, .82);

    --lg-blur: 22px;
    --lg-radius: 24px;
    --lg-tile-radius: 16px;

    --lg-shadow:
        inset 0 1px 0 var(--lg-highlight),
        0 8px 24px rgba(27, 65, 104, .07),
        0 20px 46px rgba(27, 65, 104, .04);

    --lg-small-shadow:
        inset 0 1px 0 var(--lg-highlight),
        0 5px 16px rgba(27, 65, 104, .06);

    --lg-amber-bg: rgba(255, 230, 188, .84);
    --lg-amber-text: #794308;
    --lg-red-bg: rgba(255, 220, 229, .86);
    --lg-red-text: #9a2544;
    --lg-green-bg: rgba(211, 244, 227, .88);
    --lg-green-text: #155e3b;
    --lg-blue-bg: rgba(218, 236, 255, .88);
    --lg-blue-text: #174f91;
    --lg-advisory: rgba(255, 232, 204, .67);

    --lg-page:
        radial-gradient(
            ellipse at 0% 12%,
            rgba(255, 168, 87, .64),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 0% 95%,
            rgba(255, 191, 123, .52),
            transparent 45%
        ),
        radial-gradient(
            ellipse at 100% 52%,
            rgba(125, 204, 246, .56),
            transparent 62%
        ),
        linear-gradient(115deg, #fff1e1, #dff2ff 56%, #d5edff);

    color: var(--lg-ink);
    background: var(--lg-page);
    background-attachment: fixed;
}

/* =========================================================
   2. DARK MODE TOKENS
   ========================================================= */

html[data-user-theme="dark"]
body:is(.passenger-ui, .driver-ui, .admin-ui) {
    --lg-ink: #eef4ff;
    --lg-muted: #c0cde0;
    --lg-link: #a6ceff;

    --lg-panel: rgba(20, 30, 55, .62);
    --lg-tile: rgba(31, 45, 73, .79);
    --lg-field: rgba(17, 29, 52, .78);
    --lg-hover: rgba(49, 66, 99, .88);
    --lg-solid: #1b2943;
    --lg-border: rgba(188, 211, 255, .21);
    --lg-divider: rgba(188, 211, 255, .18);
    --lg-highlight: rgba(225, 236, 255, .14);

    --lg-shadow:
        inset 0 1px 0 var(--lg-highlight),
        0 8px 24px rgba(0, 0, 0, .16),
        0 20px 46px rgba(0, 0, 0, .12);

    --lg-small-shadow:
        inset 0 1px 0 var(--lg-highlight),
        0 5px 16px rgba(0, 0, 0, .15);

    --lg-amber-bg: rgba(91, 61, 30, .94);
    --lg-amber-text: #ffdaa2;
    --lg-red-bg: rgba(91, 39, 61, .94);
    --lg-red-text: #ffd2df;
    --lg-green-bg: rgba(24, 70, 53, .94);
    --lg-green-text: #b9f3d4;
    --lg-blue-bg: rgba(29, 61, 105, .94);
    --lg-blue-text: #c6e0ff;
    --lg-advisory: rgba(69, 47, 43, .82);

    --lg-page:
        radial-gradient(
            ellipse at 0% 10%,
            rgba(155, 79, 40, .28),
            transparent 44%
        ),
        radial-gradient(
            ellipse at 0% 95%,
            rgba(156, 74, 52, .20),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 95% 40%,
            rgba(48, 93, 185, .30),
            transparent 62%
        ),
        linear-gradient(120deg, #10192c, #141e39 55%, #202044);

    color-scheme: dark;
}

/* =========================================================
   3. TEXT — EXISTING TYPOGRAPHY AND SIZES RETAINED
   ========================================================= */

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(h1, h2, h3, strong, .brand, .account, .quiet,
    .departure, .detail-grid dd, .trip-route strong:last-child) {
    color: var(--lg-ink);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(p, small, .muted, .map-status, .trip-bottom,
    .detail-grid dt, footer, .eyebrow, .fare small,
    .search label span) {
    color: var(--lg-muted);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.section-head > a, .more-menu a) {
    color: var(--lg-link);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.brand .blue {
    color: var(--lg-orange);
}

/* =========================================================
   4. MAIN GLASS SURFACES
   Border widths and layout are inherited.
   ========================================================= */

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.topbar, .navigation, .card, .stat, .more-menu) {
    background: var(--lg-panel);
    border-color: var(--lg-border);
    box-shadow: var(--lg-shadow);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(160%);
    backdrop-filter: blur(var(--lg-blur)) saturate(160%);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.card, .stat, .more-menu) {
    border-radius: var(--lg-radius);
}

/* Keep the existing hero landscape and separate bus artwork. */
html:root body:is(.passenger-ui, .driver-ui, .admin-ui) .hero {
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, .64),
            rgba(255, 255, 255, .26)
        ),
        url('/assets/auth-landscape-v1.png') center 60% / cover;
    border-color: var(--lg-border);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow);
}

html:root[data-user-theme="dark"]
body:is(.passenger-ui, .driver-ui, .admin-ui) .hero {
    background:
        linear-gradient(
            100deg,
            rgba(16, 25, 44, .94),
            rgba(23, 36, 65, .78)
        ),
        url('/assets/auth-landscape-v1.png') center 60% / cover;
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.hero :is(h1, p, small, .eyebrow) {
    color: var(--lg-ink);
}

/* =========================================================
   5. NESTED GLASS TILES
   No nested blur: lighter rendering cost.
   ========================================================= */

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.trip-card, .booking-card, .record, .empty,
    .location-list > div, .checklist p) {
    color: var(--lg-ink);
    background: var(--lg-tile);
    border-color: var(--lg-border);
    border-radius: var(--lg-tile-radius);
    box-shadow: var(--lg-small-shadow);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.trip-bottom, td, th) {
    border-color: var(--lg-divider);
}

/* =========================================================
   6. NAVIGATION AND HEADER CONTROLS
   Existing tab dimensions and positions stay unchanged.
   ========================================================= */

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.navigation a {
    color: var(--lg-ink);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.navigation a:hover {
    background: var(--lg-hover);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.navigation .selected {
    color: var(--lg-link);
    background: var(--lg-tile);
    border-color: var(--lg-border);
    border-radius: 999px;
    box-shadow:
        inset 2px 0 0 #1e6fea,
        inset -2px 0 0 #ff8a1f,
        inset 0 1px 0 var(--lg-highlight),
        0 0 0 1px rgba(255, 255, 255, .65),
        -5px 0 16px rgba(30, 111, 234, .20),
        5px 0 16px rgba(255, 138, 31, .20);
}

/* Retain the existing indicator; recolor it. */
html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.navigation .selected::after {
    background: linear-gradient(90deg, #1e6fea, #ff8a1f);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.bell, .avatar, .theme-toggle) {
    color: var(--lg-ink);
    background: var(--lg-tile);
    border-color: var(--lg-border);
    box-shadow: var(--lg-small-shadow);
}

/* =========================================================
   7. FORMS AND INPUTS
   ========================================================= */

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.search label, input:not([type="checkbox"]):not([type="radio"]),
    select, textarea) {
    color: var(--lg-ink);
    background: var(--lg-field);
    border-color: var(--lg-divider);
    box-shadow: inset 0 1px 0 var(--lg-highlight);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.search :is(input, select) {
    color: var(--lg-ink);
    background: transparent;
    box-shadow: none;
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(input, textarea)::placeholder {
    color: var(--lg-muted);
    opacity: 1;
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
select option {
    color: var(--lg-ink);
    background: var(--lg-solid);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(input, select, textarea):focus-visible {
    outline: 2px solid #1e6fea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(47, 140, 255, .18);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
input:is([type="checkbox"], [type="radio"]) {
    accent-color: #1e6fea;
}

/* =========================================================
   8. BUTTONS
   Darker blue beneath text improves white-label contrast.
   ========================================================= */

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.button, .search .button) {
    color: #fff;
    background: linear-gradient(
        180deg,
        #2f8cff 0%,
        #176bdb 35%,
        #0b5fe0 100%
    );
    border-color: rgba(117, 183, 255, .80);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .60),
        0 7px 18px rgba(11, 95, 224, .24);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.button.outline {
    color: var(--lg-link);
    background: var(--lg-tile);
    border-color: var(--lg-divider);
    box-shadow: var(--lg-small-shadow);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.button.orange {
    color: #452307;
    background: linear-gradient(180deg, #ffd19b, #ff9b42);
    border-color: #ffc381;
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.button.danger-text {
    color: var(--lg-red-text);
    background: var(--lg-red-bg);
}

/* =========================================================
   9. STATUS CHIPS AND ADVISORIES
   ========================================================= */

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.badge, .payment-status) {
    color: var(--lg-blue-text);
    background: var(--lg-blue-bg);
    box-shadow: inset 0 1px 0 var(--lg-highlight);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.badge.scheduled, .payment-unpaid, .payment-submitted) {
    color: var(--lg-amber-text);
    background: var(--lg-amber-bg);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.badge.cancelled, .payment-rejected) {
    color: var(--lg-red-text);
    background: var(--lg-red-bg);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.badge.active, .badge.confirmed, .payment-paid) {
    color: var(--lg-green-text);
    background: var(--lg-green-bg);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.notice, .notice.warning, .advisory) {
    color: var(--lg-amber-text);
    background: var(--lg-advisory);
    border-color: rgba(211, 139, 60, .32);
    box-shadow: inset 0 1px 0 var(--lg-highlight);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.notice.success {
    color: var(--lg-green-text);
    background: var(--lg-green-bg);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.notice.danger {
    color: var(--lg-red-text);
    background: var(--lg-red-bg);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.location-list .stale {
    color: var(--lg-amber-text);
}

/* =========================================================
   10. PASSENGER OVERRIDES
   ========================================================= */

html:root body.passenger-ui .search {
    background: var(--lg-panel);
    border-color: var(--lg-border);
    box-shadow: var(--lg-shadow);
}

html:root body.passenger-ui
.booking-card .row.muted > strong {
    color: var(--lg-ink);
}

/* =========================================================
   11. DRIVER OVERRIDES
   ========================================================= */

html:root body.driver-ui
:is(.driver-gps, .driver-gps-idle, .driver-check-items label) {
    color: var(--lg-ink);
    background: var(--lg-tile);
    border-color: var(--lg-border);
    box-shadow: var(--lg-small-shadow);
}

html:root body.driver-ui
:is(.driver-capacity, .driver-location-help, .driver-check-help) {
    color: var(--lg-muted);
}

/* =========================================================
   12. ADMIN OVERRIDES
   ========================================================= */

html:root body.admin-ui .navigation {
    background: var(--lg-panel);
    border-color: var(--lg-border);
    box-shadow: var(--lg-shadow);
}

html:root body.admin-ui th {
    color: var(--lg-ink);
    background: var(--lg-tile);
}

html:root body.admin-ui td {
    color: var(--lg-ink);
    background: var(--lg-panel);
    border-color: var(--lg-divider);
}

html:root body.admin-ui tbody tr:hover td {
    background: var(--lg-hover);
}

/* =========================================================
   13. LEAFLET
   Preserve tiles, control behavior and attribution.
   ========================================================= */

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.live-map {
    border-color: var(--lg-border);
    border-radius: var(--lg-tile-radius);
    overflow: hidden;
    background: #e5edf0;
    color-scheme: light;
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.live-map :is(.leaflet-control-zoom a,
              .leaflet-control-attribution,
              .leaflet-popup-content-wrapper) {
    color: #14213d;
    background: rgba(255, 255, 255, .94);
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
.live-map .leaflet-control-attribution a {
    color: #1455ac;
}

/* =========================================================
   14. HOVER AND FOCUS
   ========================================================= */

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.button, .booking-card, .navigation a, .theme-toggle) {
    transition:
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        color .25s ease,
        transform .25s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
    :is(.button, .booking-card):hover {
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 0 var(--lg-highlight),
            0 10px 24px rgba(30, 111, 234, .20);
    }
}

html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(a, button):focus-visible {
    outline: 2px solid var(--lg-link);
    outline-offset: 3px;
}

/* =========================================================
   15. MOBILE PERFORMANCE
   Existing responsive layout rules remain in force.
   ========================================================= */

@media (max-width: 760px) {
    html:root body:is(.passenger-ui, .driver-ui, .admin-ui) {
        --lg-blur: 12px;
        background-attachment: scroll;
    }

    html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
    :is(.card, .stat) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* =========================================================
   16. FALLBACK WITHOUT BACKDROP FILTER
   ========================================================= */

@supports not (
    (backdrop-filter: blur(1px)) or
    (-webkit-backdrop-filter: blur(1px))
) {
    html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
    :is(.topbar, .navigation, .card, .stat, .more-menu) {
        background: var(--lg-solid);
    }
}

@media (prefers-reduced-motion: reduce) {
    html:root body:is(.passenger-ui, .driver-ui, .admin-ui)
    :is(.button, .booking-card, .navigation a, .theme-toggle) {
        transition: none;
    }
}
/* Admin desktop: extend navigation panel to the screen bottom */
@media (min-width: 761px) {
    .admin-ui .with-sidebar .navigation {
        box-sizing: border-box;

        /* Desktop header is 90px tall */
        min-height: calc(100vh - 90px);
        min-height: calc(100dvh - 90px);

        height: auto;
        align-self: start;
    }
}
/* =====================================================
   PASSENGER: HEADER, NAVIGATION AND SIGN OUT FIX
   ===================================================== */

/* Align the existing logout icon and label. */
html:root body.passenger-ui .tl-signout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.25;
}

html:root body.passenger-ui
.tl-signout-button > .tl-signout-icon {
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    fill: none;
    stroke: currentColor;
}

html:root body.passenger-ui .tl-signout-button > span {
    display: block;
    line-height: inherit;
}

html:root body.passenger-ui .header-right > form {
    margin: 0;
    align-self: center;
}

/* Desktop and tablet only.
   Preserve the existing mobile bottom navigation. */
@media (min-width: 761px) {
    html:root body.passenger-ui > .topbar {
        box-sizing: border-box;
        width: calc(100% - 60px);
        max-width: 1260px;
        height: auto;
        min-height: 90px;
        margin: 16px auto 0;
        padding: 16px 22px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;

        border: 1px solid var(--lg-border);
        border-radius: var(--lg-radius, 24px);
        background: var(--lg-panel);
        box-shadow: var(--lg-shadow);
    }

    html:root body.passenger-ui .topbar .header-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 16px;
        margin-left: auto;
    }

    html:root body.passenger-ui
    .passenger-shell > .navigation {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        margin: 16px 0 24px;
        padding: 12px 16px;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;

        border: 1px solid var(--lg-border);
        border-radius: var(--lg-radius, 24px);
        background: var(--lg-panel);
        box-shadow: var(--lg-shadow);
        overflow: visible;
    }

    /* Keep the selected-tab underline inside its tab. */
    html:root body.passenger-ui
    .passenger-shell > .navigation .selected::after {
        bottom: 3px;
        left: 22px;
        right: 22px;
    }
}
/* =====================================================
   DRIVER: HEADER, NAVIGATION AND SIGN OUT FIX
   ===================================================== */

html:root body.driver-ui .tl-signout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.25;
}

html:root body.driver-ui
.tl-signout-button > .tl-signout-icon {
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    fill: none;
    stroke: currentColor;
}

html:root body.driver-ui .tl-signout-button > span {
    display: block;
    line-height: inherit;
}

html:root body.driver-ui .header-right > form {
    margin: 0;
    align-self: center;
}

/* Keep the existing mobile bottom navigation. */
@media (min-width: 761px) {
    html:root body.driver-ui > .topbar {
        box-sizing: border-box;
        position: relative;
        width: calc(100% - 56px);
        max-width: 1444px;
        height: auto;
        min-height: 90px;
        margin: 16px auto 0;
        padding: 16px 22px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;

        border: 1px solid var(--lg-border);
        border-radius: var(--lg-radius, 24px);
        background: var(--lg-panel);
        box-shadow: var(--lg-shadow);
    }

    html:root body.driver-ui .topbar .header-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 16px;
        margin-left: auto;
    }

    /* Restore controls previously hidden to fit the old header. */
    html:root body.driver-ui .topbar .header-right > form {
        display: block;
    }

    html:root body.driver-ui
    .topbar .header-right .account > span:last-child {
        display: block;
    }

    html:root body.driver-ui .shell.with-sidebar {
        display: block;
    }

    html:root body.driver-ui
    .shell.with-sidebar > .navigation {
        box-sizing: border-box;

        /* Remove the old placement over the header. */
        position: relative;
        inset: auto;
        z-index: 2;

        width: 100%;
        height: auto;
        min-height: 74px;
        max-height: none;
        margin: 16px 0 22px;
        padding: 12px 16px;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;

        border: 1px solid var(--lg-border);
        border-radius: var(--lg-radius, 24px);
        background: var(--lg-panel);
        box-shadow: var(--lg-shadow);
        overflow: visible;
    }

    html:root body.driver-ui
    .shell.with-sidebar > .navigation a {
        flex: 0 0 auto;
    }

    html:root body.driver-ui
    .shell.with-sidebar > .navigation .selected::after {
        bottom: 3px;
        left: 14px;
        right: 14px;
    }
}