/* Design tokens ported from the Loadpad SC Portal (C:\Shared\Loadpad-SCPortal) so the two apps
   read as one product: Geist, an oklch slate/blue scale, 0.625rem radius, and a dark
   "surface strong" used for chrome (sidebar, auth brand panel) and emphasis.

   Bootstrap 5.3 drives almost everything off --bs-* custom properties, so the bulk of the
   restyle is remapping those onto the tokens below rather than rewriting page markup. The
   handful of component blocks further down exist because Bootstrap compiles per-variant
   colors (.btn-primary, .alert-danger, .table-warning...) to literal hex at build time —
   those can only be reached by redeclaring the variant's own variables. */

@font-face {
    font-family: 'Geist Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('fonts/geist-latin.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Geist Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('fonts/geist-latin-ext.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --font-sans: 'Geist Variable', 'Segoe UI', system-ui, sans-serif;
    --radius: 0.625rem;

    --background: oklch(98.4% 0.003 247.858);
    --foreground: oklch(20.8% 0.042 265.755);
    --card: oklch(100% 0 0);
    --muted: oklch(96.8% 0.007 247.896);
    --muted-foreground: oklch(55.4% 0.046 257.417);
    --border: oklch(92.9% 0.013 255.508);
    --primary: oklch(55% 0.21 262);
    --primary-foreground: oklch(98.5% 0.005 255);
    --destructive: oklch(57.7% 0.245 27.325);
    --success: oklch(62% 0.15 150);
    --warning: oklch(66.6% 0.179 58.318);
    --info: oklch(62% 0.11 232);

    --surface-strong: oklch(26% 0.05 264);
    --surface-strong-accent: oklch(31% 0.065 264);
    --surface-strong-foreground: oklch(98.5% 0.005 255);

    --shadow-card: 0 1px 2px oklch(20.8% 0.042 265.755 / 0.06), 0 1px 3px oklch(20.8% 0.042 265.755 / 0.05);
    --shadow-pop: 0 10px 15px -3px oklch(20.8% 0.042 265.755 / 0.12), 0 4px 6px -4px oklch(20.8% 0.042 265.755 / 0.1);
}

/* ---- Bootstrap remap ------------------------------------------------- */

:root,
[data-bs-theme="light"] {
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: 0.875rem;
    --bs-body-line-height: 1.5;
    --bs-body-bg: var(--background);
    --bs-body-color: var(--foreground);
    --bs-emphasis-color: var(--foreground);
    --bs-secondary-color: var(--muted-foreground);
    --bs-tertiary-color: var(--muted-foreground);
    --bs-secondary-bg: var(--muted);
    --bs-tertiary-bg: var(--muted);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 0.875rem;
    --bs-link-color: var(--primary);
    --bs-link-hover-color: color-mix(in oklab, var(--primary), black 15%);
    --bs-heading-color: var(--foreground);
    --bs-code-color: var(--primary);
    --bs-focus-ring-color: color-mix(in oklab, var(--primary), transparent 75%);
}

body {
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}

h1:focus {
    outline: none;
}

h3 {
    font-size: 1.125rem;
}

.text-muted {
    color: var(--muted-foreground) !important;
}

.tabular, .num {
    font-variant-numeric: tabular-nums;
}

/* ---- Buttons ---------------------------------------------------------- */

/* Bootstrap hardcodes 1rem on .btn/.form-control/.form-select rather than deriving from
   --bs-body-font-size, so each has to be brought down to the portal's 14px scale by hand. */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-focus-shadow-rgb: 60, 110, 240;
    white-space: nowrap;
}

.btn-sm {
    --bs-btn-padding-y: 0.4rem;
    --bs-btn-padding-x: 0.8rem;
    --bs-btn-font-size: 0.8125rem;
}

.btn-primary {
    --bs-btn-color: var(--primary-foreground);
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--primary-foreground);
    --bs-btn-hover-bg: color-mix(in oklab, var(--primary), black 12%);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--primary), black 12%);
    --bs-btn-active-color: var(--primary-foreground);
    --bs-btn-active-bg: color-mix(in oklab, var(--primary), black 20%);
    --bs-btn-active-border-color: color-mix(in oklab, var(--primary), black 20%);
    --bs-btn-disabled-color: var(--primary-foreground);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-secondary {
    --bs-btn-color: var(--foreground);
    --bs-btn-bg: var(--card);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--foreground);
    --bs-btn-hover-bg: var(--muted);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-color: var(--foreground);
    --bs-btn-active-bg: var(--muted);
    --bs-btn-active-border-color: var(--border);
    --bs-btn-disabled-color: var(--muted-foreground);
    --bs-btn-disabled-bg: var(--card);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-success {
    --bs-btn-color: var(--primary-foreground);
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-color: var(--primary-foreground);
    --bs-btn-hover-bg: color-mix(in oklab, var(--success), black 12%);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--success), black 12%);
    --bs-btn-active-color: var(--primary-foreground);
    --bs-btn-active-bg: color-mix(in oklab, var(--success), black 20%);
    --bs-btn-active-border-color: color-mix(in oklab, var(--success), black 20%);
    --bs-btn-disabled-color: var(--primary-foreground);
    --bs-btn-disabled-bg: var(--success);
    --bs-btn-disabled-border-color: var(--success);
}

.btn-danger {
    --bs-btn-color: var(--primary-foreground);
    --bs-btn-bg: var(--destructive);
    --bs-btn-border-color: var(--destructive);
    --bs-btn-hover-color: var(--primary-foreground);
    --bs-btn-hover-bg: color-mix(in oklab, var(--destructive), black 12%);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--destructive), black 12%);
    --bs-btn-active-color: var(--primary-foreground);
    --bs-btn-active-bg: color-mix(in oklab, var(--destructive), black 20%);
    --bs-btn-active-border-color: color-mix(in oklab, var(--destructive), black 20%);
    --bs-btn-disabled-color: var(--primary-foreground);
    --bs-btn-disabled-bg: var(--destructive);
    --bs-btn-disabled-border-color: var(--destructive);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--primary-foreground);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-color: var(--primary-foreground);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-disabled-color: color-mix(in oklab, var(--primary), transparent 45%);
    --bs-btn-disabled-border-color: color-mix(in oklab, var(--primary), transparent 60%);
}

/* Bootstrap's own outline-secondary is a mid grey on white; the portal's equivalent is a
   plain bordered "card" button whose label stays fully legible. */
.btn-outline-secondary {
    --bs-btn-color: var(--foreground);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--foreground);
    --bs-btn-hover-bg: var(--muted);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-color: var(--foreground);
    --bs-btn-active-bg: var(--muted);
    --bs-btn-active-border-color: var(--border);
    --bs-btn-disabled-color: var(--muted-foreground);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-outline-danger {
    --bs-btn-color: var(--destructive);
    --bs-btn-border-color: color-mix(in oklab, var(--destructive), transparent 65%);
    --bs-btn-hover-color: var(--primary-foreground);
    --bs-btn-hover-bg: var(--destructive);
    --bs-btn-hover-border-color: var(--destructive);
    --bs-btn-active-color: var(--primary-foreground);
    --bs-btn-active-bg: var(--destructive);
    --bs-btn-active-border-color: var(--destructive);
    --bs-btn-disabled-color: color-mix(in oklab, var(--destructive), transparent 45%);
    --bs-btn-disabled-border-color: color-mix(in oklab, var(--destructive), transparent 75%);
}

.btn-outline-light {
    --bs-btn-color: oklch(100% 0 0 / 0.85);
    --bs-btn-border-color: oklch(100% 0 0 / 0.2);
    --bs-btn-hover-color: var(--surface-strong-foreground);
    --bs-btn-hover-bg: oklch(100% 0 0 / 0.1);
    --bs-btn-hover-border-color: oklch(100% 0 0 / 0.3);
    --bs-btn-active-color: var(--surface-strong-foreground);
    --bs-btn-active-bg: oklch(100% 0 0 / 0.15);
    --bs-btn-active-border-color: oklch(100% 0 0 / 0.3);
}

.btn-link {
    --bs-btn-color: var(--primary);
    --bs-btn-hover-color: color-mix(in oklab, var(--primary), black 15%);
    --bs-btn-font-weight: 600;
    text-decoration: none;
}

/* ---- Forms ------------------------------------------------------------ */

.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.form-control,
.form-select {
    border-color: var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    color: var(--foreground);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.form-control-sm,
.form-select-sm {
    font-size: 0.8125rem;
}

.form-control::placeholder {
    color: var(--muted-foreground);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
.btn:active:focus,
.btn-link.nav-link:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary), transparent 85%);
    outline: none;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.darker-border-checkbox.form-check-input {
    border-color: var(--muted-foreground);
}

/* Blazor's own validation state classes — matched to the token palette rather than the
   default template's raw hex. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--destructive);
}

.validation-message,
.text-danger {
    color: var(--destructive) !important;
}

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

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Cards, tables, pagination ---------------------------------------- */

.card {
    --bs-card-bg: var(--card);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: 1rem;
    --bs-card-spacer-y: 1.125rem;
    --bs-card-spacer-x: 1.125rem;
    box-shadow: var(--shadow-card);
}

/* The list pages wrap their tables in a bare overflow div; giving the table itself the card
   treatment keeps them consistent with the portal's board without touching page markup. */
.table {
    --bs-table-bg: var(--card);
    --bs-table-color: var(--foreground);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--muted);
    --bs-table-hover-color: var(--foreground);
    margin-bottom: 0;
    font-size: 0.8125rem;
}

.table > thead > tr > th {
    height: 2.75rem;
    vertical-align: middle;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    vertical-align: middle;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* Row status tints — the list pages tag rows with Bootstrap's contextual table classes
   (see Breakdowns.GetStatusRowClass); these keep that semantic but in the portal's palette,
   as a wash rather than Bootstrap's flat pastel. */
.table > tbody > tr.table-warning {
    --bs-table-bg: color-mix(in oklab, var(--warning), var(--card) 90%);
    --bs-table-color: var(--foreground);
}

.table > tbody > tr.table-info {
    --bs-table-bg: color-mix(in oklab, var(--info), var(--card) 90%);
    --bs-table-color: var(--foreground);
}

.table > tbody > tr.table-success {
    --bs-table-bg: color-mix(in oklab, var(--success), var(--card) 90%);
    --bs-table-color: var(--foreground);
}

/* The card shell the portal's board uses. Also the horizontal scroller — before this, half the
   list pages had an inline overflow-x wrapper and half didn't; every table now uses this. */
.table-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
    overflow-x: auto;
}

/* ---- Alerts + badges --------------------------------------------------- */

.alert {
    --bs-alert-border-radius: var(--radius);
    border-width: 1px;
    padding: 0.75rem 0.875rem;
    font-size: 0.8125rem;
}

.alert-danger {
    --bs-alert-color: color-mix(in oklab, var(--destructive), var(--foreground) 20%);
    --bs-alert-bg: color-mix(in oklab, var(--destructive), transparent 92%);
    --bs-alert-border-color: color-mix(in oklab, var(--destructive), transparent 70%);
}

.alert-warning {
    --bs-alert-color: color-mix(in oklab, var(--warning), var(--foreground) 25%);
    --bs-alert-bg: color-mix(in oklab, var(--warning), transparent 92%);
    --bs-alert-border-color: color-mix(in oklab, var(--warning), transparent 65%);
}

.alert-success {
    --bs-alert-color: color-mix(in oklab, var(--success), var(--foreground) 20%);
    --bs-alert-bg: color-mix(in oklab, var(--success), transparent 92%);
    --bs-alert-border-color: color-mix(in oklab, var(--success), transparent 65%);
}

/* Status badges (BreakdownDetail) render as the portal's pill: a dot, a hairline border and a
   tinted wash, tone driven by whichever bg-* class the page picked. */
.badge {
    --tone: var(--muted-foreground);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.625rem;
    border: 1px solid color-mix(in oklab, var(--tone), transparent 75%);
    border-radius: 999px;
    background: color-mix(in oklab, var(--tone), transparent 90%) !important;
    color: color-mix(in oklab, var(--tone), var(--foreground) 30%) !important;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--tone);
    flex: none;
}

.badge.bg-primary { --tone: var(--primary); }
.badge.bg-secondary { --tone: var(--muted-foreground); }
.badge.bg-success { --tone: var(--success); }
.badge.bg-warning { --tone: var(--warning); }
.badge.bg-info { --tone: var(--info); }
.badge.bg-danger { --tone: var(--destructive); }

/* ---- Modal (Components/Shared/Modal.razor) ----------------------------- */

/* Only the scrim ever carries the blur — a backdrop-filter on an ancestor of the panel would
   soften the panel's own text too, and it must stay perfectly crisp. The panel is a sibling
   stacked above this, so it sits outside what gets filtered. */
.modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: oklch(12.9% 0.042 264.695 / 0.4);
    backdrop-filter: blur(3px);
    animation: modal-scrim-in 0.15s ease-out;
}

/* .modal covers the whole viewport, so without this it would swallow every click meant for the
   scrim behind it and click-outside-to-close would never fire. Bootstrap already sets
   .modal-content back to pointer-events: auto, so the panel itself stays clickable, and wheel
   events over the panel still scroll .modal for forms taller than the viewport. */
.modal-popup {
    pointer-events: none;
    --bs-modal-padding: 1.25rem;
    --bs-modal-border-radius: 1rem;
    --bs-modal-border-color: var(--border);
    --bs-modal-bg: var(--background);
    --bs-modal-box-shadow: var(--shadow-pop);
    --bs-modal-header-padding: 1.25rem;
    z-index: 1055;
}

.modal-popup .modal-content {
    box-shadow: var(--shadow-pop);
    animation: modal-pop-in 0.18s ease-out;
}

.modal-popup .modal-title {
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* The Save/Cancel pair has to live inside the page's <EditForm> for submit to work, so the
   footer ends up nested inside .modal-body rather than as a sibling of it. These margins pull
   it back out to the panel's edges so it still reads as a real footer. */
/* Corner radii are left to Bootstrap's own .modal-footer rule (--bs-modal-inner-border-radius);
   it already matches the panel, and the footer's corners sit on the panel's edge once the
   negative margins above pull it out there. */
.modal-body .modal-footer {
    margin: 1.25rem -1.25rem -1.25rem;
    padding: 1rem 1.25rem;
}

@keyframes modal-scrim-in {
    from { opacity: 0; }
}

@keyframes modal-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
    .modal-scrim,
    .modal-popup .modal-content {
        animation: none;
    }
}

/* ---- Blazor error boundary -------------------------------------------- */

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

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