/* RetailUnified theme — Bootstrap CSS variables overridden with the RU teal palette */
:root {
    /* Brand palette (sourced from retailunion.com) */
    --ru-primary: #3a8ba6;
    --ru-primary-dark: #003a4b;
    --ru-primary-light: #86c1d5;
    --ru-accent: #4aa2bf;
    --ru-accent-dark: #035c67;
    --ru-bg-soft: #e5eff2;
    --ru-bg-card: #f2f5f7;
    --ru-bg-page: #fafafa;
    --ru-text: #003a4b;
    --ru-text-muted: #5d6c7b;
    --ru-text-disabled: #758696;
    --ru-border: #e2e2e2;
    --ru-border-strong: #c8c8c8;
    --ru-danger: #ea384c;
    --ru-warning: #f6dd92;
    --ru-success: #4caf6e;

    /* Bootstrap CSS variable overrides — keep Bootstrap component classes (.btn, .form-control, etc.) on-brand */
    --bs-primary: var(--ru-primary);
    --bs-primary-rgb: 58, 139, 166;
    --bs-secondary: var(--ru-text-muted);
    --bs-secondary-rgb: 93, 108, 123;
    --bs-success: var(--ru-success);
    --bs-info: var(--ru-accent);
    --bs-warning: #f6dd92;
    --bs-danger: var(--ru-danger);
    --bs-danger-rgb: 234, 56, 76;
    --bs-light: var(--ru-bg-soft);
    --bs-dark: var(--ru-primary-dark);
    --bs-dark-rgb: 0, 58, 75;
    --bs-body-color: var(--ru-text);
    --bs-body-bg: var(--ru-bg-page);
    --bs-link-color: var(--ru-primary);
    --bs-link-hover-color: var(--ru-accent-dark);
    --bs-border-color: var(--ru-border);

    /* Typography */
    --ru-font-body: 'Overpass', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ru-font-headline: 'Rajdhani', 'Overpass', sans-serif;
    --bs-font-sans-serif: var(--ru-font-body);
}

html, body {
    font-family: var(--ru-font-body);
    font-size: 14px;
    color: var(--ru-text);
    background-color: var(--ru-bg-page);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ru-font-headline);
    color: var(--ru-primary-dark);
    letter-spacing: 0.01em;
}

a, .btn-link { color: var(--ru-primary); }
a:hover { color: var(--ru-accent-dark); }

.btn-primary {
    color: #fff;
    background-color: var(--ru-primary);
    border-color: var(--ru-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--ru-accent-dark);
    border-color: var(--ru-accent-dark);
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(58, 139, 166, 0.25);
}

/* Compact data-grid density — overrides MudBlazor default cell padding for the data-heavy dashboards */
.mud-table-cell, .mud-table-cell-header {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* MudBlazor primary color overrides — match Bootstrap variables */
.mud-button-filled-primary { background-color: var(--ru-primary) !important; }
.mud-button-filled-primary:hover { background-color: var(--ru-accent-dark) !important; }

/* Row-level destructive icons (archive, etc.) — neutral by default, red on hover */
.ru-archive-icon .mud-icon-root { color: var(--ru-text-muted); transition: color 0.15s ease; }
.ru-archive-icon:hover .mud-icon-root { color: var(--ru-danger); }

/* Row action icon group — keep all icons on one line, right-aligned */
.ru-row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 2px;
    justify-content: flex-end;
    white-space: nowrap;
}

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ru-success); }
.invalid { outline: 1px solid var(--ru-danger); }
.validation-message { color: var(--ru-danger); }

.blazor-error-boundary {
    background: var(--ru-danger);
    color: white;
    padding: 1rem;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* App shell */
.ru-shell-header {
    background-color: var(--ru-primary-dark);
    color: white;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.ru-shell-brand-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 2rem;
}
.ru-shell-brand {
    font-family: var(--ru-font-headline);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: white;
    text-decoration: none;
}
.ru-shell-brand:hover { color: white; opacity: 0.85; }
/* Hard-to-miss env marker on the always-on Azure test deploy (ASPNETCORE_ENVIRONMENT=Test).
   Filled pill (white on danger) so it stays obvious on the dark header — plain danger text
   on --ru-primary-dark is ~3:1 and easy to miss at small sizes. */
.ru-shell-env-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--ru-font-headline);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    color: #fff;
    /* Darker than --ru-danger so white-on-fill clears AA (~5.6:1); plain danger is ~4.1:1. */
    background-color: #c62828;
    padding: 0.22rem 0.45rem;
    border-radius: 0.25rem;
    user-select: none;
}
.ru-shell-nav { display: flex; gap: 0.5rem; }
.ru-shell-nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    font-size: 0.95rem;
}
.ru-shell-nav a:hover { color: white; background-color: rgba(255, 255, 255, 0.08); }
.ru-shell-nav a.active { color: white; background-color: var(--ru-primary); }

.ru-admin-import-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ru-border);
}
.ru-admin-import-nav a {
    color: var(--ru-text-muted);
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
}
.ru-admin-import-nav a:hover {
    color: var(--ru-primary);
    background-color: var(--ru-bg-soft);
}
.ru-admin-import-nav a.active {
    color: var(--ru-primary);
    background-color: var(--ru-bg-soft);
    font-weight: 600;
}

.ru-reflist { padding-left: 1.25rem; margin: 0.5rem 0 0 0; }
.ru-reflist li { font-size: 0.875rem; line-height: 1.6; }

.ru-shell-user { margin-left: auto; display: flex; align-items: center; gap: 1rem; color: rgba(255, 255, 255, 0.85); font-size: 0.875rem; }
.ru-shell-username { white-space: nowrap; }
.ru-shell-signout {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
}
.ru-shell-signout:hover { background-color: rgba(255, 255, 255, 0.1); color: white; }

/* Sign-in page */
.ru-signin-shell {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ru-bg-soft);
    padding: 2rem 1rem;
    overflow: auto;
}
.ru-signin-card {
    background: white;
    padding: 2.75rem 2.25rem;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 58, 75, 0.08), 0 2px 6px rgba(0, 58, 75, 0.05);
    border: 1px solid rgba(58, 139, 166, 0.08);
    width: 100%;
    max-width: 400px;
    text-align: center;
}
.ru-signin-header { margin-bottom: 1.75rem; }
.ru-signin-brand {
    font-family: var(--ru-font-headline);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.04em;
    color: var(--ru-primary-dark);
    margin: 0 0 0.35rem 0;
}
.ru-signin-env-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.45rem;
    vertical-align: middle;
    font-family: var(--ru-font-headline);
    font-size: 0.55em;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    color: #fff;
    background-color: #c62828;
    padding: 0.28em 0.5em;
    border-radius: 0.25rem;
    user-select: none;
}
.ru-signin-tagline {
    color: var(--ru-text-muted);
    margin: 0;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}
.ru-signin-divider {
    display: flex;
    align-items: center;
    color: var(--ru-text-disabled);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 1.25rem 0;
}
.ru-signin-divider::before,
.ru-signin-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ru-border);
}
.ru-signin-divider span { padding: 0 0.75rem; }

.ru-signin-providers { display: flex; flex-direction: column; gap: 0.6rem; }

.ru-provider-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--ru-border-strong);
    background: white;
    color: var(--ru-text);
    font-family: var(--ru-font-body);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ru-provider-btn:hover {
    background: var(--ru-bg-soft);
    border-color: var(--ru-primary);
    box-shadow: 0 2px 8px rgba(58, 139, 166, 0.15);
}
.ru-provider-btn:active { transform: translateY(1px); }

.ru-provider-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ru-provider-icon svg { width: 20px; height: 20px; display: block; }
.ru-provider-label { flex: 1; text-align: center; }

.ru-provider-microsoft { background: #2f2f2f; color: white; border-color: #2f2f2f; }
.ru-provider-microsoft:hover { background: #1f1f1f; border-color: #1f1f1f; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }

.ru-signin-empty {
    border: 1px dashed var(--ru-border-strong);
    border-radius: 6px;
    padding: 1rem;
    color: var(--ru-text-muted);
    font-size: 0.875rem;
    text-align: left;
}
.ru-signin-empty strong { display: block; color: var(--ru-danger); margin-bottom: 0.35rem; }
.ru-signin-empty p { margin: 0; font-size: 0.8125rem; }
.ru-signin-empty code {
    background: var(--ru-bg-card);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.8125rem;
    color: var(--ru-primary-dark);
}

.ru-signin-footnote {
    margin: 1.5rem 0 0 0;
    color: var(--ru-text-disabled);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.ru-shell-content {
    padding: 1.5rem 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* Wide data grids (ru-scroll-grid) — keep every column reachable at laptop widths.
   MudDataGrid's .mud-table-container is already a horizontal-scroll region, but with no
   height bound it grows as tall as all its rows, stranding the horizontal scrollbar far
   below the fold (and macOS overlay scrollbars hide it until used) — so columns wider than
   the viewport get clipped with no usable way to reach them. Bounding the viewport height
   pulls the horizontal scrollbar back on-screen; pair with FixedHeader so the header stays
   put during the resulting vertical scroll. Always-on scrollbars make sideways scroll
   discoverable. See issue #151.

   The bound is calc(100vh - offset) rather than a vh fraction: the chrome above a grid
   (header, title, filter panel) is a roughly fixed pixel height, so subtracting it keeps
   the grid's bottom edge — and thus its horizontal scrollbar — on-screen across viewport
   heights. The offset clears the tallest of these (the Center Dashboard's filter row). */
.ru-scroll-grid .mud-table-container {
    max-height: calc(100vh - 320px);
}
.ru-scroll-grid .mud-table-container::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}
.ru-scroll-grid .mud-table-container::-webkit-scrollbar-thumb {
    background: var(--ru-border-strong);
    border-radius: 5px;
}
.ru-scroll-grid .mud-table-container::-webkit-scrollbar-thumb:hover {
    background: var(--ru-text-disabled);
}
/* Firefox: thin, always-rendered scrollbars on the scroll grids. */
.ru-scroll-grid .mud-table-container {
    scrollbar-width: thin;
    scrollbar-color: var(--ru-border-strong) transparent;
}

/* Export mode: visually distinguish excluded rows so it's unmistakable
   which rows are in/out of the pending export. */
.ru-export-excluded {
    opacity: 0.35;
}
.ru-export-excluded td:not(.mud-table-cell-checkbox) {
    text-decoration: line-through;
    text-decoration-color: var(--ru-text-disabled);
}

/* ── Hand-rolled data marks (RuValueBar, RuComparisonMatrix) ────────────────────
   Server-rendered HTML/CSS only — these two marks make no JS interop calls, so they
   render in a static page and under bUnit's strict JSInterop mode. Chart.js covers
   the actual charts; these are magnitude-tinted tables and belong in CSS. */

.ru-value-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 7rem;
}

.ru-value-bar-track {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 2px;
    background: var(--ru-bg-soft);
    overflow: hidden;
}

/* Grows from the left baseline; the data-end is rounded, the baseline end is square. */
.ru-value-bar-fill {
    height: 100%;
    background: var(--ru-primary);
    border-radius: 0 4px 4px 0;
}

.ru-value-bar-value {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--ru-text);
    text-align: right;
}

.ru-value-bar-value--empty {
    color: var(--ru-text-disabled);
}

/* Comparison matrix. CSS grid aligns the columns; each .ru-matrix-row is
   display:contents so its cells join the single parent grid while keeping the
   row/cell ARIA semantics that a div soup would otherwise lose. */
.ru-matrix {
    display: grid;
    gap: 2px; /* the surface gap — separation is negative space, never a border */
    font-size: 0.8125rem;
    align-items: stretch;
}

.ru-matrix-row {
    display: contents;
}

.ru-matrix-corner,
.ru-matrix-colhead,
.ru-matrix-rowhead {
    color: var(--ru-text-muted);
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    display: flex;
    align-items: center;
}

.ru-matrix-colhead {
    font-weight: 600;
    color: var(--ru-text);
    justify-content: flex-end;
    text-align: right;
}

.ru-matrix-rowhead {
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid var(--ru-border);
}

.ru-matrix-rowhead-label {
    color: var(--ru-text);
}

.ru-matrix-rowhead-unit {
    color: var(--ru-text-disabled);
    font-size: 0.6875rem;
    white-space: nowrap;
}

.ru-matrix-cell {
    padding: 0.375rem 0.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ru-text);
    border-radius: 2px;
}

/* Absent data — no tint at all, so a gap can never be mistaken for a low value
   (and a real zero, which is common in segment counts, still gets its step-0 tint). */
.ru-matrix-cell--empty {
    background: transparent;
    color: var(--ru-text-disabled);
}

/* Sequential single-hue ramp, RU teal, light → dark. Steps 5-6 are dark enough to
   need white text (both clear 4.5:1 against white); 0-4 clear 4.5:1 against
   --ru-text. Never a second hue: this encodes magnitude, not identity. */
.ru-matrix-step-0 { background: #f4fafb; }
.ru-matrix-step-1 { background: #dcedf3; }
.ru-matrix-step-2 { background: #bfe0ea; }
.ru-matrix-step-3 { background: #9dcddf; }
.ru-matrix-step-4 { background: #6fb2ca; }
.ru-matrix-step-5 { background: #2f7f99; color: #ffffff; }
.ru-matrix-step-6 { background: #1c6b83; color: #ffffff; }

.ru-matrix-legend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    font-size: 0.6875rem;
    color: var(--ru-text-muted);
}

.ru-matrix-legend-swatch {
    width: 18px;
    height: 10px;
    border-radius: 2px;
}

.ru-matrix-legend-label {
    padding: 0 0.25rem;
}

.ru-matrix-legend-scope {
    margin-left: 0.5rem;
    color: var(--ru-text-disabled);
}

.ru-matrix-empty {
    padding: 1rem;
    color: var(--ru-text-muted);
    font-size: 0.8125rem;
}