/*
 * TranspoLink — Admin Overview arrangement only.
 * Existing theme, typography, images and controls remain inherited.
 * Activated by admin-layout.js on desktop Overview only.
 */

@media (min-width: 1101px) {
    body.admin-ui.admin-overview-layout {
        --admin-sidebar-width: 280px;
        --admin-layout-gap: 20px;
        --admin-layout-edge: 16px;

        display: grid;
        grid-template-columns:
            var(--admin-sidebar-width)
            minmax(0, 1fr);
        grid-template-rows: auto 1fr;

        align-items: start;
        gap: 18px var(--admin-layout-gap);

        min-height: 100vh;
        min-height: 100dvh;
        padding: var(--admin-layout-edge);
    }

    /* Continuous sidebar containing brand, navigation and logout. */
    html:root body.admin-ui.admin-overview-layout
    > .admin-layout-sidebar {
        grid-column: 1;
        grid-row: 1 / span 2;

        position: sticky;
        top: var(--admin-layout-edge);

        display: flex;
        flex-direction: column;
        gap: 16px;

        width: 100%;
        min-width: 0;

        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);

        padding: 18px 12px;
        border-radius: var(--lg-radius, 24px);

        /* Reuse the exact existing navigation surface tokens. */
        background: var(--lg-panel);
        box-shadow: var(--lg-shadow);

        -webkit-backdrop-filter:
            blur(var(--lg-blur)) saturate(160%);
        backdrop-filter:
            blur(var(--lg-blur)) saturate(160%);

        z-index: 3;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-sidebar > .brand {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 68px;
        margin: 0;
        gap: 6px;
    }

    /*
     * The wrapper now carries the navigation's glass background.
     * Navigation remains the same existing <nav>.
     */
    html:root body.admin-ui.admin-overview-layout
    .admin-layout-sidebar > .navigation {
        position: relative;
        inset: auto;

        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;
        max-height: none;

        margin: 0;
        padding: 6px;
        gap: 7px;

        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;

        background: transparent;
        border: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-sidebar > .navigation > a {
        flex: 0 0 auto;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        min-width: 0;
        min-height: 50px;

        padding: 14px 15px;
        text-align: left;
    }

    /* Existing logout form, including its CSRF token. */
    body.admin-ui.admin-overview-layout
    .admin-layout-sidebar > form {
        flex: 0 0 auto;
        width: 100%;
        margin: auto 0 0;
        padding: 8px 6px 0;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-sidebar > form > .quiet {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        min-height: 44px;
        padding: 10px 15px;
        text-align: left;
    }

    /* Account, advisory and theme controls stay together. */
    body.admin-ui.admin-overview-layout > .topbar {
        grid-column: 2;
        grid-row: 1;

        position: relative;
        width: 100%;
        min-width: 0;
        height: 64px;

        margin: 0;
        padding: 0 18px;

        justify-content: flex-end;
        border-radius: var(--lg-radius, 24px);
    }

    body.admin-ui.admin-overview-layout
    > .topbar > .header-right {
        min-width: 0;
        margin-left: auto;
    }

    /* Main content no longer needs its old sidebar column. */
    body.admin-ui.admin-overview-layout > .shell.with-sidebar {
        grid-column: 2;
        grid-row: 2;

        display: block;
        width: 100%;
        max-width: none;
        min-width: 0;

        margin: 0;
        padding: 0;
    }

    body.admin-ui.admin-overview-layout
    > .shell > main {
        min-width: 0;
    }

    /* Hero keeps its original landscape, bus and text. */
    body.admin-ui.admin-overview-layout
    main > .hero {
        min-height: 245px;
        margin: 0 0 18px;
        padding: 26px;
    }

    body.admin-ui.admin-overview-layout
    .hero > div:first-child {
        width: 62%;
        max-width: 62%;
        min-width: 0;
    }

    body.admin-ui.admin-overview-layout
    .hero > .hero-art {
        width: 38%;
    }

    /* Existing action buttons are now inside the hero. */
    body.admin-ui.admin-overview-layout
    .hero .admin-layout-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;

        margin: 20px 0 0;
    }

    body.admin-ui.admin-overview-layout
    .hero .admin-layout-actions > .button {
        flex: 0 0 auto;
    }

    /* Four equal metrics. */
    body.admin-ui.admin-overview-layout
    main > .admin-layout-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        gap: 12px;
        margin: 0 0 18px;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-stats > .stat {
        min-width: 0;
        min-height: 96px;
        margin: 0;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-stats > .stat > div {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /*
     * Row 1: Upcoming Departures | Needs Attention
     * Row 2: Live Fleet Map      | Recent Bookings
     *
     * Existing advisory stays inside Needs Attention.
     */
    body.admin-ui.admin-overview-layout
    main > .admin-layout-panels {
        display: grid;
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(310px, 1fr);

        align-items: start;
        gap: 18px;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-panels > .card {
        min-width: 0;
        margin: 0;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-panels > .card:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-panels > .card:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-panels > .card:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-panels > .card:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-panels .section-head {
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-panels .section-head > h2 {
        min-width: 0;
    }

    body.admin-ui.admin-overview-layout
    main > footer {
        margin-top: 20px;
    }
}

/* Slightly narrower sidebar on smaller desktop screens. */
@media (min-width: 1101px) and (max-width: 1250px) {
    body.admin-ui.admin-overview-layout {
        --admin-sidebar-width: 260px;
        --admin-layout-gap: 16px;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-sidebar > .brand {
        gap: 2px;
    }

    body.admin-ui.admin-overview-layout
    main > .admin-layout-panels {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(290px, 1fr);
        gap: 14px;
    }
}

/* Same existing fallback surface when blur is unavailable. */
@supports not (
    (backdrop-filter: blur(1px)) or
    (-webkit-backdrop-filter: blur(1px))
) {
    html:root body.admin-ui.admin-overview-layout
    > .admin-layout-sidebar {
        background: var(--lg-solid);
    }
}
/* =====================================================
   ADMIN OVERVIEW — breadcrumb, background and card spacing
   ===================================================== */

@media (min-width: 1101px) {
    /* Breadcrumb left, account controls right. */
    body.admin-ui.admin-overview-layout > .topbar {
        justify-content: space-between;
        gap: 20px;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;

        min-width: 0;
        margin: 0;

        color: var(--lg-muted);
        font-size: 14px;
        line-height: 1.4;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-breadcrumb a {
        color: var(--lg-muted);
        text-decoration: none;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-breadcrumb a:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-breadcrumb [aria-current="page"] {
        color: var(--lg-link);
        font-weight: 700;
    }

    /* Generated countryside image behind the existing bus. */
    html:root body.admin-ui.admin-overview-layout
    main > .hero {
        background:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, .94) 0%,
                rgba(255, 255, 255, .80) 36%,
                rgba(255, 255, 255, .18) 65%,
                rgba(255, 255, 255, 0) 100%
            ),
            url('/assets/admin-highway-bg.png')
                center bottom / cover no-repeat;
    }

    html:root[data-user-theme="dark"]
    body.admin-ui.admin-overview-layout main > .hero {
        background:
            linear-gradient(
                90deg,
                rgba(16, 25, 44, .97) 0%,
                rgba(16, 25, 44, .89) 36%,
                rgba(16, 25, 44, .50) 65%,
                rgba(16, 25, 44, .32) 100%
            ),
            url('/assets/admin-highway-bg.png')
                center bottom / cover no-repeat;
    }

    /*
     * Remove the old decorative background from the art container.
     * Its child .hero-bus keeps the actual SMTC bus image.
     */
    body.admin-ui.admin-overview-layout
    .hero > .hero-art {
        top: auto;
        bottom: 10px;
        right: 16px;

        width: 38%;
        height: calc(100% - 28px);

        padding: 0;
        background: none;
        border-radius: 0;

        align-items: flex-end;
        justify-content: flex-end;
    }

    body.admin-ui.admin-overview-layout
    .hero-art > .hero-bus {
        width: 100%;
        height: 100%;
        margin: 0;

        background-position: center bottom;
        background-size: contain;
        background-repeat: no-repeat;
    }

    /*
     * Independent columns:
     * LEFT:  Upcoming Departures -> Live Fleet Map
     * RIGHT: Needs Attention    -> Recent Bookings
     */
    body.admin-ui.admin-overview-layout
    main > .admin-layout-panels {
        align-items: start;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-column {
        display: flex;
        flex-direction: column;
        gap: 18px;
        min-width: 0;
    }

    body.admin-ui.admin-overview-layout
    .admin-layout-column > .card {
        width: 100%;
        min-width: 0;
        margin: 0;
    }
}
/* Sign out icon and label */
body.admin-ui .tl-signout-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

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