html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Lightweight modal backdrop for pass slips / driver feedback (no JS needed). */
.tt-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* The screen-help "i" button in the top bar. */
.tt-help-btn {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    border: none;
    background: #ffcf2e;
    color: #1a1305;
    font: italic 800 1rem/1 Georgia, 'Times New Roman', serif;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    cursor: pointer;
}
.tt-help-btn:hover { background: #ffe066; }

/* Trackside "board" panel styling, shared by the scoreboard and the session panel. */
.tt-board {
    position: relative;
    background:
        radial-gradient(circle, rgba(255,190,0,.13) 1.2px, transparent 1.6px) 0 0 / 6px 6px,
        #0c0900;
    border: 3px solid #000;
    border-radius: 8px;
    box-shadow: inset 0 0 26px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.5);
    padding: .6rem;
    font-family: 'Consolas', 'Courier New', monospace;
}

.tt-board-head {
    text-align: center;
    color: #ffd400;
    letter-spacing: .3em;
    font-size: .72rem;
    margin-bottom: .45rem;
    text-shadow: 0 0 8px #ffae00;
}

/* --- Trackside "board" styling: shared by modal dialogs and page surfaces - */

/* A whole-page board panel (e.g. the Team page and its tabs). */
.tt-surface {
    position: relative;
    /* Scope the faded background art to this panel (negative z-index) without creating a positive
       root-level stacking context that would fight the top bar's modals. */
    isolation: isolate;
    background:
        radial-gradient(circle, rgba(255,190,0,.09) 1.2px, transparent 1.6px) 0 0 / 6px 6px,
        linear-gradient(160deg, #241a06 0%, #0c0900 72%);
    border: 3px solid #000;
    border-radius: 12px;
    box-shadow: inset 0 0 40px rgba(0,0,0,.7), 0 4px 14px rgba(0,0,0,.4);
    color: #e9dfc7;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
    min-height: calc(100vh - 3.5rem);
}

/* Faded Top Fuel background photo — behind the page content, above the surface's own background. */
.page-art {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    border-radius: 12px;
}
.page-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Warm, low-contrast treatment so a real photo reads as atmosphere, not clutter. */
    opacity: .16;
    filter: sepia(.35) saturate(1.1) brightness(.78) contrast(1.02);
}
/* Amber-toned darkening wash to unify the photo with the board and keep text readable. */
.page-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(36,26,6,.45) 0%, rgba(12,9,0,.78) 78%);
    mix-blend-mode: multiply;
}

/* In-page links read gold (not the plain buttons). */
:is(.tt-modal-backdrop, .tt-surface) a:not(.btn) { color: #ffcf2e; }
:is(.tt-modal-backdrop, .tt-surface) a:not(.btn):hover { color: #ffe066; }

/* Cards on a page surface are subtle panels, to avoid board-in-board. Defined first so the modal
   rule below wins for a dialog that sits inside a page surface (same specificity). */
.tt-surface .card {
    background: rgba(0,0,0,.26);
    border: 1px solid #4a3908;
    border-radius: 8px;
    color: #e9dfc7;
}
/* Modal cards are full, opaque boards. */
.tt-modal-backdrop .card {
    background:
        radial-gradient(circle, rgba(255,190,0,.10) 1.2px, transparent 1.6px) 0 0 / 6px 6px,
        linear-gradient(160deg, #241a06 0%, #0c0900 72%);
    border: 3px solid #000;
    border-radius: 10px;
    box-shadow: inset 0 0 30px rgba(0,0,0,.85), 0 10px 34px rgba(0,0,0,.6);
    color: #e9dfc7;
}

:is(.tt-modal-backdrop, .tt-surface) .card-header {
    background: transparent;
    border-bottom: 1px solid #4a3908;
    color: #ffd400;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: .82rem;
    text-shadow: 0 0 8px #ffae00;
}

:is(.tt-modal-backdrop, .tt-surface) .card-body { color: #e9dfc7; }

:is(.tt-modal-backdrop, .tt-surface) h1, :is(.tt-modal-backdrop, .tt-surface) h2,
:is(.tt-modal-backdrop, .tt-surface) h3, :is(.tt-modal-backdrop, .tt-surface) h4,
:is(.tt-modal-backdrop, .tt-surface) h5, :is(.tt-modal-backdrop, .tt-surface) h6 { color: #ffe08a; }

:is(.tt-modal-backdrop, .tt-surface) .text-muted { color: #b6a675 !important; }

:is(.tt-modal-backdrop, .tt-surface) .form-label,
:is(.tt-modal-backdrop, .tt-surface) label { color: #e9dfc7; }

/* Close button → light so it shows on the dark board */
:is(.tt-modal-backdrop, .tt-surface) .btn-close {
    filter: invert(1) grayscale(1) brightness(1.7);
}

/* Inputs & selects on the dark board */
:is(.tt-modal-backdrop, .tt-surface) .form-control,
:is(.tt-modal-backdrop, .tt-surface) .form-select {
    background-color: rgba(10,7,0,.55);
    border: 1px solid #5a4610;
    color: #ffe9b0;
}
:is(.tt-modal-backdrop, .tt-surface) .form-control::placeholder { color: #8a7a4a; }
:is(.tt-modal-backdrop, .tt-surface) .form-control:focus,
:is(.tt-modal-backdrop, .tt-surface) .form-select:focus {
    background-color: rgba(10,7,0,.72);
    border-color: #ffcf2e;
    color: #fff3cf;
    box-shadow: 0 0 0 .2rem rgba(255,180,0,.25);
}
:is(.tt-modal-backdrop, .tt-surface) .form-select option { background-color: #1a1305; color: #ffe9b0; }
:is(.tt-modal-backdrop, .tt-surface) .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffcf2e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Primary action reads gold, like the board's SAVE button */
:is(.tt-modal-backdrop, .tt-surface) .btn-primary {
    background: linear-gradient(180deg, #ffcf2e, #f0950c);
    border-color: #a56a00;
    color: #2a1a00;
    font-weight: 700;
}
:is(.tt-modal-backdrop, .tt-surface) .btn-primary:hover {
    background: linear-gradient(180deg, #ffe066, #ffab12);
    border-color: #a56a00;
    color: #2a1a00;
}
:is(.tt-modal-backdrop, .tt-surface) .btn-primary:disabled {
    background: #7a5e1a;
    border-color: #7a5e1a;
    color: #40340f;
}
:is(.tt-modal-backdrop, .tt-surface) .btn-outline-primary {
    color: #ffcf2e;
    border-color: #a56a00;
}
:is(.tt-modal-backdrop, .tt-surface) .btn-outline-primary:hover {
    background-color: #ffcf2e;
    border-color: #ffcf2e;
    color: #2a1a00;
}

:is(.tt-modal-backdrop, .tt-surface) .form-check-input {
    background-color: rgba(10,7,0,.55);
    border-color: #6b5518;
}
:is(.tt-modal-backdrop, .tt-surface) .form-check-input:checked {
    background-color: #ffcf2e;
    border-color: #ffcf2e;
}

/* Tables */
:is(.tt-modal-backdrop, .tt-surface) .table { color: #e9dfc7; }
:is(.tt-modal-backdrop, .tt-surface) .table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    border-color: rgba(255,200,0,.12);
}
:is(.tt-modal-backdrop, .tt-surface) .table .text-muted { color: #b6a675 !important; }
:is(.tt-modal-backdrop, .tt-surface) .table-hover > tbody > tr:hover > * {
    background-color: rgba(255,190,0,.09);
    color: #fff3cf;
}

/* Dividers */
:is(.tt-modal-backdrop, .tt-surface) hr,
:is(.tt-modal-backdrop, .tt-surface) .border-top,
:is(.tt-modal-backdrop, .tt-surface) .border-bottom { border-color: rgba(255,200,0,.15) !important; }

/* Neutral outline buttons legible on dark */
:is(.tt-modal-backdrop, .tt-surface) .btn-outline-secondary {
    color: #d9c896;
    border-color: #6b5518;
}
:is(.tt-modal-backdrop, .tt-surface) .btn-outline-secondary:hover {
    background-color: #6b5518;
    color: #171103;
}

/* Radzen chart text */
:is(.tt-modal-backdrop, .tt-surface) .rz-chart text { fill: #d9c896; }

/* Radzen DataGrid on the board — recolour via Radzen's own CSS variables so its rules follow. */
:is(.tt-modal-backdrop, .tt-surface) {
    --rz-grid-background-color: transparent;
    --rz-grid-header-background-color: rgba(255,190,0,.07);
    --rz-grid-stripe-background-color: rgba(255,255,255,.03);
    --rz-grid-stripe-odd-background-color: transparent;
    --rz-grid-cell-color: #e9dfc7;
    --rz-grid-cell-border: 1px solid rgba(255,200,0,.12);
    --rz-grid-bottom-cell-border: 1px solid rgba(255,200,0,.18);
    --rz-grid-header-cell-border-bottom: 1px solid rgba(255,200,0,.22);
    --rz-grid-shadow: none;
    --rz-paginator-background-color: transparent;
    --rz-paginator-color: #d9c896;
}
:is(.tt-modal-backdrop, .tt-surface) .rz-column-title,
:is(.tt-modal-backdrop, .tt-surface) .rz-column-title-content,
:is(.tt-modal-backdrop, .tt-surface) .rz-grid-table thead th { color: #ffd77a; }
:is(.tt-modal-backdrop, .tt-surface) .rz-cell-data { color: #e9dfc7; }
:is(.tt-modal-backdrop, .tt-surface) .rz-grid-table tbody > tr:hover > td { background-color: rgba(255,190,0,.10) !important; }

/* Alerts toned into the amber palette (keeping a semantic accent) */
:is(.tt-modal-backdrop, .tt-surface) .alert {
    background-color: rgba(10,7,0,.5);
    border: 1px solid #5a4610;
    color: #e9dfc7;
}
:is(.tt-modal-backdrop, .tt-surface) .alert-danger {
    background-color: rgba(70,18,8,.45);
    border-color: #8a3320;
    color: #ff9e6a;
}
:is(.tt-modal-backdrop, .tt-surface) .alert-success {
    background-color: rgba(12,45,12,.4);
    border-color: #2f6a2a;
    color: #8bff70;
}
:is(.tt-modal-backdrop, .tt-surface) .alert-info,
:is(.tt-modal-backdrop, .tt-surface) .alert-secondary,
:is(.tt-modal-backdrop, .tt-surface) .alert-warning {
    background-color: rgba(40,28,4,.55);
    border-color: #6b5518;
    color: #ffd77a;
}
:is(.tt-modal-backdrop, .tt-surface) .alert a { color: #ffcf2e; }

/* Tabs on the dark board */
:is(.tt-modal-backdrop, .tt-surface) .nav-tabs { border-bottom-color: #4a3908; }
:is(.tt-modal-backdrop, .tt-surface) .nav-tabs .nav-link {
    color: #c9b884;
    border-color: transparent;
}
:is(.tt-modal-backdrop, .tt-surface) .nav-tabs .nav-link:hover { color: #ffe08a; border-color: #3a2c00 #3a2c00 #4a3908; }
:is(.tt-modal-backdrop, .tt-surface) .nav-tabs .nav-link.active {
    color: #ffd400;
    background-color: rgba(255,190,0,.08);
    border-color: #4a3908 #4a3908 transparent;
    text-shadow: 0 0 6px rgba(255,174,0,.6);
}

/* Progress track on the dark board */
:is(.tt-modal-backdrop, .tt-surface) .progress { background-color: rgba(10,7,0,.6); }

/* Link buttons on the board */
:is(.tt-modal-backdrop, .tt-surface) .btn-link { color: #ffcf2e; }

/* --- Registration live feedback: password rules + character counter ------ */
.pw-rules {
    list-style: none;
    padding-left: 0;
    margin-top: .4rem;
    margin-bottom: 0;
}

.pw-rules li {
    color: #6c757d;
    line-height: 1.6;
}

.pw-rules li::before {
    content: "\25CB"; /* ○ */
    display: inline-block;
    width: 1.3em;
    color: #adb5bd;
}

.pw-rules li.ok {
    color: #198754;
}

.pw-rules li.ok::before {
    content: "\2713"; /* ✓ */
    color: #198754;
}

.count-ok {
    color: #198754;
    font-weight: 600;
}