/* Navigation shell: top bar (brand, event, section tabs, flag, account), section rail and phone menu.
   The flag colour is data-flag on the bar and the pill: hot=green, hold=yellow, clear=red, offline=grey,
   the same three colours the old strip used (see the track flag colours in app.css). */
:root {
    --top-bar-height: 3.5rem;
    --flag-edge: 0.3rem;
    --rail-width: 15.5rem;
    --rail-width-collapsed: 3.5rem;
    --flag-offline: #6c757d;
    --footer-height: 2.25rem;
    --demo-banner-font: clamp(0.875rem, 0.75rem + 0.4vw, 1.75rem);
    --demo-banner-height: 0px;
    --footer-help-room: 3rem;
}

/* The demo banner is one line of fixed height and pinned at the top; everything else that sticks to the top sits below it. */
:root:has(.demo-banner) { --demo-banner-height: calc(var(--demo-banner-font) * 1.3 + 1rem); }
/* Where the phone's sticky table tabs stop: just under the banner and the top bar. */
:root { --phone-tabs-top: calc(var(--demo-banner-height) + var(--top-bar-height) + var(--flag-edge)); }

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-body {
    flex: 1;
    display: flex;
    min-width: 0;
}

.app-body > main {
    flex: 1;
    /* Without this a wide table grows main instead of scrolling inside its own wrapper. */
    min-width: 0;
}

/* ---- Top bar ---- */
.top-bar {
    position: sticky;
    top: var(--demo-banner-height);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--top-bar-height);
    padding: 0 1rem;
    background: var(--surface);
    border-bottom: var(--flag-edge) solid var(--border);
    transition: border-bottom-color 0.3s ease;
}

.top-bar[data-flag="hot"] { border-bottom-color: var(--status-success); }
.top-bar[data-flag="hold"] { border-bottom-color: var(--status-warning); }
.top-bar[data-flag="clear"] { border-bottom-color: var(--status-danger); }
.top-bar[data-flag="offline"] { border-bottom-color: var(--flag-offline); }

.top-brand { display: flex; align-items: center; color: var(--text); }

.top-brand .top-brand-mark.brand-logo { height: 2.25rem; width: auto; max-width: 10rem; }

.top-brand .top-brand-mark.brand-wordmark,
.top-brand .top-brand-mark.brand-placeholder { height: 2.25rem; width: 9rem; }

.event-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    max-width: 18rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-decoration: none;
}

.event-switcher:hover { background: var(--surface-raised); }

.event-switcher-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-tabs {
    display: flex;
    align-self: stretch;
    gap: 0.25rem;
}

.section-tab {
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: calc(var(--flag-edge) * -1);
}

.section-tab:hover { color: var(--text); }

.section-tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}

.top-bar-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
}

.account-toggle,
.account-sign-in,
.alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
}

.account-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-toggle:hover,
.account-sign-in:hover { color: var(--text); background: var(--surface-raised); }

.alert-badge {
    background: var(--status-danger);
    color: var(--status-danger-text);
    font-weight: 700;
}

/* ---- Flag pill ---- */
.flag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.flag-pill[data-flag="hot"] { background: var(--status-success); color: var(--status-success-text); }
.flag-pill[data-flag="hold"] { background: var(--status-warning); color: var(--status-warning-text); }
.flag-pill[data-flag="clear"] { background: var(--status-danger); color: var(--status-danger-text); }
.flag-pill[data-flag="offline"] { background: var(--flag-offline); color: #fff; }

.flag-pulse-a { animation: flag-pulse-a 0.9s ease-out 2; }
.flag-pulse-b { animation: flag-pulse-b 0.9s ease-out 2; }

@keyframes flag-pulse-a {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    100% { box-shadow: 0 0 0 0.9rem rgba(255, 255, 255, 0); }
}

@keyframes flag-pulse-b {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    100% { box-shadow: 0 0 0 0.9rem rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .flag-pulse-a, .flag-pulse-b { animation: none; }
}

/* ---- Account menu ---- */
.account-menu { position: relative; display: flex; align-items: center; gap: 0.5rem; }

.account-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    border: 0;
    background: transparent;
    cursor: default;
}

.account-popup {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 1050;
    min-width: 12rem;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.account-popup-name {
    max-width: 18rem;
    padding: 0.3rem 0.6rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.account-popup .btn-link,
.account-popup .nav-link { color: var(--text); text-align: left; text-decoration: none; }

/* ---- Event picker with no event selected ----
   It can't be dismissed, so the top bar (account menu and sign-out, the phone menu) and the help button must stay usable over it.
   The dialog and its backdrop start below the bar, and the bar, the phone menu and the help button sit above the dialog
   (Bootstrap: backdrop 1050, dialog 1055). The help dialog itself is above them all (HelpButton.razor). The bar is above the dialog, so
   starting at the bar's minimum height leaves no gap and a bar taller than that simply covers the overlap. */
:root:has(.event-picker-required) { --picker-top: calc(var(--demo-banner-height) + var(--top-bar-height)); }

.modal.event-picker-required {
    top: var(--picker-top);
    height: calc(100% - var(--picker-top));
}

.modal-backdrop.event-picker-required {
    top: var(--picker-top);
    height: calc(100vh - var(--picker-top));
}

:root:has(.event-picker-required) .top-bar,
:root:has(.event-picker-required) .mobile-menu,
:root:has(.event-picker-required) .help-fab { z-index: 1060; }

/* ---- Section rail ---- */
.section-rail {
    flex: 0 0 var(--rail-width);
    width: var(--rail-width);
    position: sticky;
    top: calc(var(--demo-banner-height) + var(--top-bar-height) + var(--flag-edge));
    height: calc(100vh - var(--demo-banner-height) - var(--top-bar-height) - var(--flag-edge) - var(--footer-height));
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.5rem;
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow: hidden;
}

.nav-entry {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.nav-entry-label { overflow: hidden; text-overflow: ellipsis; }

.nav-entry:hover { color: var(--text); background: var(--surface-raised); }

.nav-entry.active {
    color: var(--text);
    background: var(--surface-raised);
    box-shadow: inset 3px 0 0 var(--accent);
}

.nav-group-title {
    margin: 0.75rem 0.75rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rail-toggle {
    margin-top: auto;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: transparent;
    color: var(--text-muted);
}

.rail-toggle:hover { color: var(--text); background: var(--surface-raised); }

.rail-collapsed .section-rail { flex-basis: var(--rail-width-collapsed); width: var(--rail-width-collapsed); }

.rail-collapsed .nav-entry-label,
.rail-collapsed .nav-group-title { display: none; }

.top-menu-toggle { display: none; }

.top-bar a:focus-visible,
.top-bar button:focus-visible,
.section-rail a:focus-visible,
.section-rail button:focus-visible,
.mobile-menu a:focus-visible,
.mobile-menu button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Tablet: the rail is icons only ---- */
@media (min-width: 641px) and (max-width: 991.98px) {
    .section-rail { flex-basis: var(--rail-width-collapsed); width: var(--rail-width-collapsed); }
    .nav-entry-label, .nav-group-title, .rail-toggle { display: none; }
    .event-switcher { max-width: 10rem; }
    .account-name { display: none; }
}

/* ---- Phone: the hamburger carries the navigation ---- */
.mobile-menu { display: none; }

@media (max-width: 640.98px) {
    .top-bar { gap: 0.5rem; padding: 0 0.75rem; }
    .top-bar .event-switcher,
    .top-bar .section-tabs,
    .top-bar .account-menu { display: none; }
    .top-bar-end { gap: 0.4rem; }
    .top-brand .top-brand-mark.brand-logo { height: 1.9rem; max-width: 7rem; }
    .top-brand .top-brand-mark.brand-wordmark,
    .top-brand .top-brand-mark.brand-placeholder { height: 1.9rem; width: 7rem; }
    .section-rail { display: none; }

    .top-menu-toggle .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .top-menu-toggle {
        display: inline-flex;
        border: 1px solid var(--border);
        border-radius: 0.4rem;
        padding: 0.3rem 0.5rem;
        background: transparent;
    }

    .mobile-menu {
        display: block;
        position: fixed;
        top: calc(var(--demo-banner-height) + var(--top-bar-height) + var(--flag-edge));
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1029;
        overflow-y: auto;
        padding: 0.75rem;
        background: var(--surface);
    }

    .mobile-section {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.8rem 0.75rem;
        color: var(--text);
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-section-button { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 600; text-align: left; }
    .mobile-section-chevron { margin-left: auto; font-size: 0.85em; }

    .mobile-section.active { box-shadow: inset 3px 0 0 var(--accent); }
    .mobile-pages { padding: 0 0 0.5rem 1rem; }
    .mobile-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 1rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
    }

    .mobile-footer .nav-link, .mobile-footer .btn-link { color: var(--text); text-decoration: none; }
    .mobile-powered {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1rem;
        padding: 1rem 0 0.5rem;
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .mobile-powered .mobile-powered-brand.brand-wordmark { height: 1.1rem; width: 4.4rem; color: var(--text); }
}

/* ---- Slim footer: desktop and tablet only ---- */
.app-footer {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    display: flex;
    align-items: baseline;
    gap: var(--footer-gap);
    height: var(--footer-height);
    padding: var(--footer-text-top) var(--footer-help-room) 0 1rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    --footer-gap: 1.25rem;
    --footer-name-max: 5rem;
    /* Puts the one line of text in the middle of the bar: (bar height - line height) / 2 */
    --footer-text-top: calc((var(--footer-height) - 1.25 * 0.78rem) / 2);
}

/* Labels, values, times and the clock share one font size and line height and sit on one baseline: a monospace time and a
   sans label have different metrics, so they are aligned by baseline and not centred. Gaps are one size between items.
   The bar is one row. Every item keeps its size and the gap after it, and only the event title gives way, with an ellipsis;
   the drivers' names are capped. Below the widths set at the end of this block the lower priority items drop off, so what is
   left always fits (checked from 700 to 1600 px with long names by FooterLayoutUiTests). */
.footer-primary, .footer-secondary { display: contents; }

.footer-end { display: flex; align-items: baseline; gap: var(--footer-gap); flex: 0 0 auto; margin-left: auto; }

.footer-item { display: inline-flex; align-items: baseline; gap: 0.3rem; flex: 0 0 auto; }

.footer-event { flex: 0 1 auto; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 18rem; display: inline-block; }

/* The free space is shared evenly before the leader and before the end group, which centres the bests between the two ends */
.footer-leader { margin-left: auto; }

.footer-name { max-width: var(--footer-name-max); overflow: hidden; text-overflow: ellipsis; }

.footer-item strong { color: var(--text); font-weight: 600; }

.footer-item .time-session-best { color: var(--accent-fastest-lap); }

/* Powered by Sidereal is a link, but it reads as part of the bar and not as a blue underlined link */
.footer-powered, .mobile-powered { text-decoration: none; }

a.footer-powered { color: inherit; }

a.footer-powered:hover, a.footer-powered:focus-visible { color: var(--text); }

.footer-powered { gap: 0.5rem; padding-right: 0.5rem; }

/* .brand-wordmark is in the selector so this beats BrandMark's own scoped size rule, which is the same specificity and loads later */
.app-footer .footer-brand.brand-wordmark { height: 1.1rem; width: 4.4rem; color: var(--text); align-self: center; }

/* Lower priority items drop off as the window narrows, in this order: top speed, devices, the car counts, the clock, the fastest
   time. Each width leaves room for the rest with the longest names the caps allow, and the drivers' names are allowed more room
   as the bar gets wider. */
@media (max-width: 1399.98px) { .footer-topspeed { display: none; } }

@media (max-width: 1099.98px) { .footer-devices { display: none; } }

@media (max-width: 999.98px) { .footer-cars { display: none; } }

@media (max-width: 899.98px) { .footer-clock { display: none; } }

@media (max-width: 799.98px) { .footer-fastest { display: none; } }

@media (min-width: 1100px) { .app-footer { --footer-name-max: 5.5rem; } }

@media (min-width: 1250px) { .app-footer { --footer-name-max: 7rem; } }

@media (min-width: 1400px) { .app-footer { --footer-name-max: 8rem; } }

@media (min-width: 1600px) { .app-footer { --footer-name-max: 9rem; } }

/* Phones have no footer and keep the overview cards on Race Control */
@media (max-width: 640.98px) { .app-footer { display: none; } }

/* !important: the element it goes on is often a Bootstrap .row, which sets its own display */
@media (min-width: 641px) { .phone-only { display: none !important; } }