@import '_content/SchoolConnect.Academics.UI/SchoolConnect.Academics.UI.65gls1ci7d.bundle.scp.css';
@import '_content/SchoolConnect.Administration.UI/SchoolConnect.Administration.UI.igc7scwuam.bundle.scp.css';
@import '_content/SchoolConnect.Communication.UI/SchoolConnect.Communication.UI.3br8mokfxq.bundle.scp.css';
@import '_content/SchoolConnect.Compliance.UI/SchoolConnect.Compliance.UI.jzb08pueeg.bundle.scp.css';
@import '_content/SchoolConnect.Operations.UI/SchoolConnect.Operations.UI.1hwmcuypkf.bundle.scp.css';
@import '_content/SchoolConnect.People.UI/SchoolConnect.People.UI.a7kw2dcu7x.bundle.scp.css';
@import '_content/SchoolConnect.Public.UI/SchoolConnect.Public.UI.achy5ihueo.bundle.scp.css';
@import '_content/SchoolConnect.Shared.DesignSystem/SchoolConnect.Shared.DesignSystem.ib5biai5x5.bundle.scp.css';
@import '_content/SchoolConnect.Wellbeing.UI/SchoolConnect.Wellbeing.UI.1ugiy4cjuf.bundle.scp.css';

/* /Components/Analytics/AnalyticsDrillPanel.razor.rz.scp.css */
/* Reusable analytics drill-down drawer. Portable global tokens only (no .sc-analytics --an- vars),
   so it looks identical on every analytics page. */

.adp-backdrop[b-csnnkq1k2q] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    z-index: 1200;
    animation: adp-fade-b-csnnkq1k2q 0.15s ease;
}

.adp-panel[b-csnnkq1k2q] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(480px, 94vw);
    background: var(--rz-base-background-color);
    border-left: 1px solid var(--rz-border-color);
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.16);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    animation: adp-slide-b-csnnkq1k2q 0.2s ease;
}

@keyframes adp-fade-b-csnnkq1k2q { from { opacity: 0; } to { opacity: 1; } }
@keyframes adp-slide-b-csnnkq1k2q { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.adp-head[b-csnnkq1k2q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--rz-border-color);
}

.adp-head h3[b-csnnkq1k2q] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.adp-sub[b-csnnkq1k2q] {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--rz-text-secondary-color);
}

.adp-close[b-csnnkq1k2q] {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
}

.adp-close:hover[b-csnnkq1k2q] {
    background: color-mix(in srgb, var(--rz-text-color) 8%, transparent);
    color: var(--rz-text-color);
}

.adp-body[b-csnnkq1k2q] {
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.adp-sub-h[b-csnnkq1k2q] {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.adp-note[b-csnnkq1k2q] {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    margin: 0;
}

/* Learner table */
.adp-table[b-csnnkq1k2q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.adp-table thead th[b-csnnkq1k2q] {
    text-align: left;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--rz-border-color);
    white-space: nowrap;
}

.adp-table tbody td[b-csnnkq1k2q] {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--rz-border-color);
    color: var(--rz-text-color);
}

/* ABC signal chips */
.adp-abc-cell[b-csnnkq1k2q] { white-space: nowrap; }

.adp-abc[b-csnnkq1k2q] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    text-align: center;
    line-height: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 2px;
}

.adp-abc.a[b-csnnkq1k2q] { background: color-mix(in srgb, var(--sc-danger-600) 15%, transparent); color: var(--sc-danger-600); }
.adp-abc.c[b-csnnkq1k2q] { background: color-mix(in srgb, var(--sc-success-600) 15%, transparent); color: var(--sc-success-600); }
.adp-abc.n[b-csnnkq1k2q] { background: color-mix(in srgb, var(--rz-text-color) 8%, transparent); color: var(--rz-text-secondary-color); }

/* Trend pill */
.adp-chip[b-csnnkq1k2q] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

.adp-chip.g[b-csnnkq1k2q] { background: color-mix(in srgb, var(--sc-success-600) 14%, transparent); color: var(--sc-success-600); }
.adp-chip.w[b-csnnkq1k2q] { background: color-mix(in srgb, var(--sc-warning-600) 16%, transparent); color: var(--sc-warning-600); }
.adp-chip.b[b-csnnkq1k2q] { background: color-mix(in srgb, var(--sc-danger-600) 14%, transparent); color: var(--sc-danger-600); }
.adp-chip.i[b-csnnkq1k2q] { background: color-mix(in srgb, var(--sc-primary-500) 14%, transparent); color: var(--sc-primary-500); }

/* Optional header block (per-level bars / subject summary) supplied by the page */
[b-csnnkq1k2q] .adp-levels { display: flex; flex-direction: column; gap: 0.45rem; }

[b-csnnkq1k2q] .adp-level-row {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--rz-text-color);
}

[b-csnnkq1k2q] .adp-level-name { font-weight: 700; }

[b-csnnkq1k2q] .adp-bar-track {
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-text-color) 8%, transparent);
    overflow: hidden;
}

[b-csnnkq1k2q] .adp-bar { height: 100%; border-radius: 999px; min-width: 2px; }

[b-csnnkq1k2q] .adp-level-val { color: var(--rz-text-secondary-color); white-space: nowrap; }

[b-csnnkq1k2q] .adp-summary { display: flex; gap: 1.5rem; padding: 0.25rem 0; }
[b-csnnkq1k2q] .adp-summary > div { display: flex; flex-direction: column; gap: 0.15rem; }
[b-csnnkq1k2q] .adp-stat-val { font-size: 1.35rem; font-weight: 700; color: var(--rz-text-color); }
[b-csnnkq1k2q] .adp-stat-val.pos { color: var(--sc-success-600); }
[b-csnnkq1k2q] .adp-stat-val.neg { color: var(--sc-danger-600); }
[b-csnnkq1k2q] .adp-stat-lbl { font-size: 0.74rem; color: var(--rz-text-secondary-color); }
/* /Components/Analytics/DateRangeFilter.razor.rz.scp.css */
.date-range-filter[b-4xw1vf8hpm] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.filter-presets[b-4xw1vf8hpm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
}

.date-inputs[b-4xw1vf8hpm] {
    display: flex;
    gap: var(--sc-space-4);
    align-items: flex-end;
}

.date-input[b-4xw1vf8hpm] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.date-input label[b-4xw1vf8hpm] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
}

@media (max-width: 768px) {
    .date-inputs[b-4xw1vf8hpm] {
        flex-direction: column;
        align-items: stretch;
    }

    .date-input[b-4xw1vf8hpm] {
        width: 100%;
    }

    .date-input[b-4xw1vf8hpm]  .rz-datepicker {
        width: 100% !important;
    }
}
/* /Components/Analytics/GradeFilter.razor.rz.scp.css */
.grade-filter[b-y2zi5108ht] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.grade-filter label[b-y2zi5108ht] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
}

/* Don't let the grade filter (or its chips) exceed its column on phones. */
.grade-filter[b-y2zi5108ht] {
    min-width: 0;
    max-width: 100%;
}

.grade-filter *[b-y2zi5108ht] {
    max-width: 100%;
    min-width: 0;
}
/* /Components/Analytics/MetricCard.razor.rz.scp.css */
.metric-card[b-66rv76kgob] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-4);
    background: var(--rz-base-background-color);
    border-radius: 14px;
    padding: var(--sc-space-5);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 1px solid var(--rz-border-color);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

/* A thin accent rail in the card's own theme colour — enough colour to read at a
   glance without the heavy left "spine" look. */
.metric-card[b-66rv76kgob]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--metric-accent, var(--sc-primary-500));
    opacity: 0.55;
}

.metric-card:hover[b-66rv76kgob] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    border-color: color-mix(in srgb, var(--metric-accent, var(--sc-primary-500)) 40%, var(--rz-border-color));
}

.metric-card.clickable[b-66rv76kgob] {
    cursor: pointer;
}

.metric-icon[b-66rv76kgob] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
}

.metric-icon .rzi[b-66rv76kgob] {
    font-size: 24px;
    color: var(--metric-accent, var(--sc-primary-500));
}

/* Each semantic accent now renders its OWN theme colour (soft tint bg + strong icon),
   driven by one --metric-accent var so bg/icon can't drift apart. color-mix keeps the
   tint theme-aware (light + dark) without needing a separate -50 token per family. */
.metric-icon[b-66rv76kgob] {
    background: color-mix(in srgb, var(--metric-accent, var(--sc-primary-500)) 14%, transparent);
}

.icon-primary[b-66rv76kgob] { --metric-accent: var(--sc-primary-500); }
.icon-success[b-66rv76kgob] { --metric-accent: var(--sc-success-600); }
.icon-warning[b-66rv76kgob] { --metric-accent: var(--sc-warning-600); }
.icon-danger[b-66rv76kgob]  { --metric-accent: var(--sc-danger-600); }
.icon-info[b-66rv76kgob]    { --metric-accent: var(--sc-info-600); }

.metric-content[b-66rv76kgob] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
    min-width: 0;
}

.metric-value[b-66rv76kgob] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rz-text-color);
    line-height: 1.2;
}

.metric-label[b-66rv76kgob] {
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
    font-weight: 500;
}

.metric-subtitle[b-66rv76kgob] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.metric-trend[b-66rv76kgob] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-1);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.125rem var(--sc-space-2);
    border-radius: 100px;
    width: fit-content;
}

.metric-trend .rzi[b-66rv76kgob] {
    font-size: 14px;
}

.metric-trend.positive[b-66rv76kgob] {
    background: var(--sc-gray-100);
    color: var(--rz-success);
}

.metric-trend.negative[b-66rv76kgob] {
    background: var(--sc-gray-100);
    color: var(--rz-danger);
}
/* Inline sparkline (redesign 2026-07-16) — the shape behind the number.
   Pinned to the card's bottom edge and allowed to bleed to the card's sides so the
   area fill reads as part of the card rather than a boxed-in mini chart. The card is
   position:relative already; if that ever changes this must move with it. */
.metric-spark[b-66rv76kgob] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    opacity: 0.55;
    pointer-events: none;
    /* Behind the value/label, which keep their own stacking context. */
    z-index: 0;
}

.metric-card .metric-content[b-66rv76kgob] { position: relative; z-index: 1; }

/* The delta's qualifier ("vs last term") — quieter than the number it follows. */
.metric-trend-label[b-66rv76kgob] {
    font-size: 0.6875rem;
    font-weight: 500;
    opacity: 0.75;
}
/* /Components/AppVersionStamp.razor.rz.scp.css */
/* Quiet by construction: a footnote somebody reads out when they file a bug, never a label
   competing with the screen it sits under. */
.sc-build-stamp[b-vgew48t0h7] {
    margin: 0;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--sc-text-tertiary, var(--sc-text-secondary));
    font-variant-numeric: tabular-nums;
    text-align: center;
    user-select: text;
}

/* On the sign-in pane, under the form. */
.sc-build-stamp.is-auth[b-vgew48t0h7] {
    margin-top: var(--sc-space-6, 1.5rem);
}

/* Pinned to the foot of the sidebar rail. */
.sc-build-stamp.is-sidebar[b-vgew48t0h7] {
    padding: var(--sc-space-3, 0.75rem);
    border-top: 1px solid var(--sc-border-light, var(--sc-border));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Beside the "Esc to close" hint in the mega menu - horizontal mode has no sidebar rail. */
.sc-build-stamp.is-mega[b-vgew48t0h7] {
    display: inline;
    margin-left: var(--sc-space-3, 0.75rem);
}
/* /Components/Authentication/AuthTopBar.razor.rz.scp.css */
/* Utility bar above the auth form: pushed to the right so it reads as chrome, not content. */

.auth-topbar[b-y030d6baaj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sc-space-3);
    /* No margin: Blazor components render no wrapper element, so these land as direct children
       of the page's flex column and inherit its gap. A margin here would stack on top of it. */
}

.auth-lang[b-y030d6baaj] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: 0.4375rem var(--sc-space-3);
    border: 1px solid var(--sc-border);
    border-radius: 20px;
    background: var(--sc-surface);
    color: var(--sc-text-secondary);
    font-size: 0.8125rem;
    /* Not a button: there is nothing to choose yet (see the component's note). No hover or
       pointer affordance, so it reads as a statement of fact rather than a control. */
    cursor: default;
}

.auth-lang[b-y030d6baaj]  .rzi {
    font-size: 0.875rem;
}

.auth-theme[b-y030d6baaj] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--sc-border);
    border-radius: 11px;
    background: var(--sc-surface);
    color: var(--sc-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.auth-theme:hover[b-y030d6baaj] {
    color: var(--sc-text-primary);
    border-color: var(--sc-text-disabled);
}

.auth-theme:focus-visible[b-y030d6baaj] {
    outline: none;
    border-color: var(--sc-primary-500);
    box-shadow: 0 0 0 4px var(--sc-primary-100, rgba(37, 99, 235, 0.15));
}

.auth-theme[b-y030d6baaj]  .rzi {
    font-size: 1.0625rem;
}
/* /Components/Authentication/ExternalLoginButtons.razor.rz.scp.css */
/* SSO buttons + divider. On our --sc-* tokens; only the provider marks inside keep their own
   brand colours (trademark requirement).

   Spacing note: a Blazor component renders no wrapper element, so .sso-buttons and .sso-divider
   land as direct children of the host page's flex column and pick up its gap. Vertical margins
   here would stack on top of that, so there are none. */

.sso-buttons[b-3b4ca66usw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--sc-space-3);
}

/* One provider shouldn't stretch into a full-width slab. */
.sso-buttons[data-count="1"][b-3b4ca66usw] {
    grid-template-columns: 1fr;
}

.sso-button[b-3b4ca66usw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    height: 46px;
    padding: 0 var(--sc-space-3);
    border: 1.5px solid var(--sc-border);
    border-radius: 11px;
    background: var(--sc-surface);
    color: var(--sc-text-primary);
    font-size: 0.84375rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sso-button:hover[b-3b4ca66usw] {
    border-color: var(--sc-primary-400);
    background: var(--sc-surface-variant);
}

.sso-button:focus-visible[b-3b4ca66usw] {
    outline: none;
    border-color: var(--sc-primary-500);
    box-shadow: 0 0 0 4px var(--sc-primary-100, rgba(37, 99, 235, 0.15));
}

.sso-button svg[b-3b4ca66usw] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* At three providers the labels are the first thing to give: the marks are recognisable on
   their own, and three full labels crowd a 388px form column. */
@media (max-width: 420px) {
    .sso-buttons[data-count="3"] .sso-button span[b-3b4ca66usw] {
        display: none;
    }
}

.sso-divider[b-3b4ca66usw] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sc-text-disabled);
}

.sso-divider[b-3b4ca66usw]::before,
.sso-divider[b-3b4ca66usw]::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--sc-border);
}
/* /Components/Dashboard/WidgetContainer.razor.rz.scp.css */
/* ─── Widget container ────────────────────────────────────────────────
   The card that wraps every widget instance on a dashboard. Lives inside
   `.widget-grid` (grid 12 columns) and stretches to fill its span. The
   visual language matches `modern-data-card` / facility cards: white
   surface, soft shadow, rounded corners, header with title + actions. */
.widget-container[b-mxaos80jux] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    background: var(--sc-surface, #ffffff);
    border: 1px solid var(--sc-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    /* Clip the rounded corners only. The card must never scroll: a widget grows to fit its content
       and the grid row grows with it. Scrollbars inside a dashboard tile hide data. */
    overflow: clip;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    /* Explicit placement on the 12-col grid (>=1280px). Vars are set inline by the component so
       the reflow media-queries below can override the start cell without inline styles winning. */
    grid-column: var(--wc-col-start, auto) / span var(--wc-col-span, 6);
    grid-row: var(--wc-row-start, auto) / span var(--wc-row-span, 1);
}

/* Clamp (<=1024px): drop the explicit start cell so wider widgets can't overflow the narrowed grid;
   keep the spans and let auto-flow pack them. */
@media (max-width: 1024px) {
    .widget-container[b-mxaos80jux] {
        grid-column: span var(--wc-col-span, 6);
        grid-row: span var(--wc-row-span, 1);
    }
}

/* Single column (<=768px): stack in DOM order (which the canvas sorts Row then Column). */
@media (max-width: 768px) {
    .widget-container[b-mxaos80jux] {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

.widget-container:hover[b-mxaos80jux] {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
}

.widget-container.edit-mode[b-mxaos80jux] {
    cursor: grab;
}

.widget-container.selected[b-mxaos80jux] {
    border-color: var(--rz-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* Keyboard focus ring on the draggable card — visible, not colour-only. */
.widget-container.edit-mode:focus-visible[b-mxaos80jux] {
    outline: 2px solid var(--rz-primary, #2563eb);
    outline-offset: 2px;
}

/* Grabbed (keyboard) / dragging (pointer): lift the card so movement is legible. */
.widget-container.grabbed[b-mxaos80jux] {
    border-color: var(--rz-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25), 0 8px 20px rgba(15, 23, 42, 0.16);
    z-index: 3;
}

.widget-container.dnd-dragging[b-mxaos80jux] {
    opacity: 0.85;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
    z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
    .widget-container[b-mxaos80jux] {
        transition: none;
    }
}

/* ─── Drag handle (edit mode only) ───────────────────────────────────── */
.widget-drag-handle[b-mxaos80jux] {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-text-secondary, #64748b);
    cursor: grab;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
    z-index: 2;
}

.widget-container.edit-mode:hover .widget-drag-handle[b-mxaos80jux] {
    opacity: 1;
}

.widget-drag-handle:hover[b-mxaos80jux] {
    background: rgba(15, 23, 42, 0.06);
}

.widget-drag-handle .material-symbols-outlined[b-mxaos80jux] {
    font-size: 18px;
}

/* ─── Header (title + actions) ───────────────────────────────────────── */
.widget-header[b-mxaos80jux] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-3);
    padding: var(--sc-space-3) var(--sc-space-4);
    border-bottom: 1px solid var(--sc-border, #e5e7eb);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

.widget-title[b-mxaos80jux] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sc-text-primary, #0f172a);
}

.widget-title>span:last-child[b-mxaos80jux] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-icon[b-mxaos80jux] {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--rz-primary, #2563eb);
    background: rgba(37, 99, 235, 0.1);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.widget-actions[b-mxaos80jux] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.widget-action-btn[b-mxaos80jux] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--sc-text-secondary, #64748b);
    transition: background 0.15s ease, color 0.15s ease;
}

.widget-action-btn:hover[b-mxaos80jux] {
    background: rgba(15, 23, 42, 0.06);
    color: var(--sc-text-primary, #0f172a);
}

.widget-action-btn.danger:hover[b-mxaos80jux] {
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
}

.widget-action-btn .material-symbols-outlined[b-mxaos80jux] {
    font-size: 18px;
}

/* ─── Content area ───────────────────────────────────────────────────── */
/* The body holds the live widget and its Loading/Error slot as siblings; the widget is kept mounted
   (hidden, not removed) while the slot shows, so a Retry reloads the same instance. */
.widget-body[b-mxaos80jux] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.widget-content[b-mxaos80jux] {
    flex: 1;
    padding: var(--sc-space-4);
    /* No inner scrolling — the tile sizes to its content. Widget internals that lay tiles out in a
       row must wrap rather than overflow (see .widget-content > * below). */
    overflow: visible;
    min-width: 0;
}

/* Widgets lay their tiles out in .sc-counter-grid, which is a fixed-track grid outside a dashboard and
   so overflowed a narrow widget cell horizontally. Inside a widget it must reflow to the cell width. */
.widget-content[b-mxaos80jux]  .sc-counter-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.widget-content.is-hidden[b-mxaos80jux] {
    display: none;
}

/* ─── Per-widget Loading / Error slot (isolated to this cell) ─────────── */
.widget-state[b-mxaos80jux] {
    flex: 1;
    min-height: 0;
    padding: var(--sc-space-4);
    display: flex;
    flex-direction: column;
}

.widget-state-loading[b-mxaos80jux] {
    gap: var(--sc-space-3);
    justify-content: flex-start;
}

.widget-state-error[b-mxaos80jux] {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sc-space-3);
    color: var(--sc-text-secondary, #64748b);
}

.widget-state-error-icon[b-mxaos80jux] {
    font-size: 28px;
    color: var(--sc-danger-600, #dc2626);
}

.widget-state-error-text[b-mxaos80jux] {
    font-size: 0.85rem;
    line-height: 1.4;
    max-width: 32ch;
}

.widget-state-retry[b-mxaos80jux] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: 6px 14px;
    border: 1px solid var(--sc-border, #e5e7eb);
    border-radius: 8px;
    background: var(--sc-surface, #ffffff);
    color: var(--sc-text-primary, #0f172a);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.widget-state-retry:hover[b-mxaos80jux] {
    background: var(--sc-gray-100, #f1f5f9);
    border-color: var(--rz-primary, #2563eb);
}

.widget-state-retry .material-symbols-outlined[b-mxaos80jux] {
    font-size: 18px;
}

/* /Components/Dashboard/WidgetGridCanvas.razor.rz.scp.css */
/* ─── Widget grid canvas ──────────────────────────────────────────────
   The 12-column grid shared by dashboard view and edit mode. Widget cells
   (.widget-container) place themselves by explicit grid-column-start /
   grid-row-start; this element only owns the track template, gutter and
   scroll. Responsive reflow lives on .widget-container (WidgetContainer.razor.css). */
.widget-grid-canvas[b-vngnmi0eqd] {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* min-content floor: a row is never shorter than the tallest content that must fit in it, so a
       content-heavy widget (Welcome, lists) can't be clipped by a fixed row span. */
    grid-auto-rows: minmax(min-content, auto);
    gap: var(--sc-space-4);
    padding: var(--sc-space-6);
    /* The PAGE scrolls, never this container. A nested scroll region traps the wheel and hides rows
       below the fold behind a scrollbar the user has to go looking for. */
    overflow: visible;
    align-content: start;
    background: var(--sc-bg, #f8fafc);
}

/* Visually-hidden assertive announcer — screen-reader-only narration of grab/move/drop. */
.dnd-announcer[b-vngnmi0eqd] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.widget-grid-canvas.edit[b-vngnmi0eqd]  .widget-container {
    cursor: pointer;
}

.widget-grid-canvas.edit[b-vngnmi0eqd]  .widget-container.selected {
    outline: 2px solid var(--rz-primary, #2563eb);
    outline-offset: 2px;
}
/* /Components/Dashboard/WidgetSelector.razor.rz.scp.css */
/* Widget Selector Modal Styles */

.widget-selector-overlay[b-su0g2isei2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sc-overlay-bg);
    z-index: 1000;
    animation: fadeIn-b-su0g2isei2 0.2s ease;
}

.widget-selector[b-su0g2isei2] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    background: var(--rz-surface);
    border-radius: 12px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-su0g2isei2 0.25s ease;
}

@keyframes fadeIn-b-su0g2isei2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-su0g2isei2 {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Header */
.selector-header[b-su0g2isei2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sc-space-5) var(--sc-space-6);
    border-bottom: 1px solid var(--rz-border-color);
}

.selector-header h2[b-su0g2isei2] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.close-btn[b-su0g2isei2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    transition: all 0.15s ease;
}

.close-btn:hover[b-su0g2isei2] {
    background: var(--rz-border-color);
    color: var(--rz-text-color);
}

/* Search */
.selector-search[b-su0g2isei2] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-4) var(--sc-space-6);
    border-bottom: 1px solid var(--rz-border-color);
    background: var(--rz-base-background-color);
}

.selector-search .material-symbols-outlined[b-su0g2isei2] {
    color: var(--rz-text-secondary-color);
    position: absolute;
    left: 1rem;
    font-size: 1.25rem;
}

.selector-search[b-su0g2isei2] {
    position: relative;
}

.selector-search input[b-su0g2isei2] {
    flex: 1;
    border: 1px solid var(--rz-border-color);
    background: var(--rz-surface);
    font-size: 0.95rem;
    outline: none;
    color: var(--rz-text-color);
    padding: var(--sc-space-3) var(--sc-space-10) var(--sc-space-3) 2.75rem;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.selector-search input:focus[b-su0g2isei2] {
    border-color: var(--sc-primary-500);
}

.selector-search input[b-su0g2isei2]::placeholder {
    color: var(--rz-text-disabled-color);
}

.clear-btn[b-su0g2isei2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    position: absolute;
    right: 1rem;
    transition: all 0.15s ease;
}

.clear-btn:hover[b-su0g2isei2] {
    background: var(--rz-border-color);
    color: var(--rz-text-color);
}

.clear-btn .material-symbols-outlined[b-su0g2isei2] {
    font-size: 1rem;
}

/* Categories */
.selector-categories[b-su0g2isei2] {
    display: flex;
    gap: var(--sc-space-2);
    padding: var(--sc-space-4) var(--sc-space-6);
    border-bottom: 1px solid var(--rz-border-color);
    overflow-x: auto;
    background: var(--rz-base-background-color);
}

.selector-categories[b-su0g2isei2]::-webkit-scrollbar {
    height: 4px;
}

.selector-categories[b-su0g2isei2]::-webkit-scrollbar-thumb {
    background: var(--rz-border-color);
    border-radius: 4px;
}

.category-tab[b-su0g2isei2] {
    padding: 0.625rem var(--sc-space-4);
    background: var(--rz-surface);
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.category-tab:hover[b-su0g2isei2] {
    border-color: var(--sc-primary-500);
    color: var(--sc-primary-500);
    background: rgba(var(--sc-primary-rgb), 0.05);
}

.category-tab.active[b-su0g2isei2] {
    background: var(--sc-primary-500);
    border-color: var(--sc-primary-500);
    color: var(--sc-text-inverse);
}

/* Content */
.selector-content[b-su0g2isei2] {
    flex: 1;
    overflow-y: auto;
    padding: var(--sc-space-4) var(--sc-space-6);
}

.no-widgets[b-su0g2isei2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sc-space-12);
    color: var(--rz-text-secondary-color);
}

.no-widgets .material-symbols-outlined[b-su0g2isei2] {
    font-size: 3rem;
    margin-bottom: var(--sc-space-2);
}

/* Widget Category Group */
.widget-category-group[b-su0g2isei2] {
    margin-bottom: var(--sc-space-6);
}

.category-title[b-su0g2isei2] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-text-secondary-color);
    margin: 0 0 var(--sc-space-3);
    padding-bottom: var(--sc-space-2);
    border-bottom: 1px solid var(--rz-border-color);
}

/* Widget Grid */
.widget-grid[b-su0g2isei2] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.widget-option[b-su0g2isei2] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4) var(--sc-space-4);
    background: var(--rz-input-background-color);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.widget-option:hover[b-su0g2isei2] {
    background: var(--rz-primary-lighter);
    border-color: var(--rz-primary);
}

.widget-option-icon[b-su0g2isei2] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-surface);
    border-radius: 10px;
    flex-shrink: 0;
}

.widget-option-icon .material-symbols-outlined[b-su0g2isei2] {
    font-size: 1.5rem;
    color: var(--rz-primary);
}

.widget-option-info[b-su0g2isei2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.widget-option-name[b-su0g2isei2] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--rz-text-color);
}

.widget-option-desc[b-su0g2isei2] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-option-size[b-su0g2isei2] {
    padding: var(--sc-space-1) 0.625rem;
    background: var(--rz-surface);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .widget-selector[b-su0g2isei2] {
        width: 95%;
        max-height: 90vh;
    }
    
    .selector-header[b-su0g2isei2],
    .selector-search[b-su0g2isei2],
    .selector-categories[b-su0g2isei2],
    .selector-content[b-su0g2isei2] {
        padding-left: var(--sc-space-4);
        padding-right: var(--sc-space-4);
    }
}
/* /Components/FloatingShortcuts.razor.rz.scp.css */
/* Header dropdown, not a floating page-covering widget — see MainLayout.razor's
   note. Mirrors HeaderBar.razor.css's .sc-notification-wrapper (badge anchor)
   and .sc-user-dropdown (panel position) so this reads as the same family of
   control as everything else in the icon row, not a bespoke fourth pattern. */
.sc-shortcuts-wrapper[b-johb030kt9] {
    position: relative;
}

.sc-shortcuts-badge[b-johb030kt9] {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--sc-danger-500);
    color: var(--sc-text-inverse);
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
}

/* Expanded Panel — positioned under the header button like .sc-user-dropdown,
   not centred in the viewport like the old fixed widget's panel was. */
.shortcuts-panel[b-johb030kt9] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 500px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    box-shadow: var(--sc-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18));
    display: flex;
    flex-direction: column;
    animation: slideIn-b-johb030kt9 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 1000;
}

@keyframes slideIn-b-johb030kt9 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Click-outside-to-close, same idiom as HeaderBar's .sc-dropdown-backdrop. A
   separate rule (rather than reusing that class) because this component has
   no reference to HeaderBar's scoped styles. */
.sc-shortcuts-backdrop[b-johb030kt9] {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: transparent;
}

/* Panel Header */
.shortcuts-header[b-johb030kt9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--theme-primary-500);
    color: var(--sc-text-inverse);
}

.header-title[b-johb030kt9] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1rem;
}

.header-title .rzi[b-johb030kt9] {
    font-size: 1.25rem;
}

.add-shortcut-btn[b-johb030kt9] {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    color: var(--sc-text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.add-shortcut-btn:hover[b-johb030kt9] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* Shortcuts List */
.shortcuts-list[b-johb030kt9] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    max-height: 350px;
}

.shortcut-item[b-johb030kt9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.shortcut-item:hover[b-johb030kt9] {
    background: var(--sc-surface-variant);
}

.shortcut-item:hover .remove-btn[b-johb030kt9] {
    opacity: 1;
}

.shortcut-icon[b-johb030kt9] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-text-inverse);
    flex-shrink: 0;
}

.shortcut-icon .rzi[b-johb030kt9] {
    font-size: 1.2rem;
}

.shortcut-info[b-johb030kt9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shortcut-name[b-johb030kt9] {
    font-weight: 500;
    color: var(--sc-text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shortcut-url[b-johb030kt9] {
    font-size: 0.75rem;
    color: var(--sc-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remove-btn[b-johb030kt9] {
    width: 28px;
    height: 28px;
    background: var(--sc-danger-50);
    border: none;
    border-radius: 6px;
    color: var(--sc-danger-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.remove-btn:hover[b-johb030kt9] {
    background: var(--sc-danger-500);
    color: var(--sc-text-inverse);
}

.remove-btn .rzi[b-johb030kt9] {
    font-size: 0.9rem;
}

/* Empty State */
.empty-state[b-johb030kt9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--sc-text-disabled);
}

.empty-state .rzi[b-johb030kt9] {
    font-size: 3rem;
    margin-bottom: 12px;
    color: var(--sc-border-strong);
}

.empty-state p[b-johb030kt9] {
    margin: 0 0 4px 0;
    font-weight: 500;
    color: var(--sc-text-secondary);
}

.empty-state span[b-johb030kt9] {
    font-size: 0.85rem;
}

/* Footer */
.shortcuts-footer[b-johb030kt9] {
    padding: 12px 16px;
    border-top: 1px solid var(--sc-border);
    background: var(--sc-surface-variant);
}

.add-current-btn[b-johb030kt9] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 2px dashed var(--sc-border-strong);
    border-radius: 10px;
    color: var(--sc-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-current-btn:hover[b-johb030kt9] {
    border-color: var(--sc-primary-500);
    color: var(--sc-primary-500);
    background: rgba(var(--sc-primary-rgb), 0.05);
}

.add-current-btn .rzi[b-johb030kt9] {
    font-size: 1.1rem;
}

/* Dialog Overlay */
.shortcut-dialog-overlay[b-johb030kt9] {
    position: fixed;
    inset: 0;
    background: var(--sc-overlay-bg);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeIn-b-johb030kt9 0.2s ease;
}

@keyframes fadeIn-b-johb030kt9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Dialog */
.shortcut-dialog[b-johb030kt9] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: calc(100vw - 32px);
    background: var(--sc-surface);
    border-radius: 12px;
    z-index: 1001;
    animation: dialogIn-b-johb030kt9 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dialogIn-b-johb030kt9 {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.dialog-header[b-johb030kt9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--sc-border);
}

.dialog-header h3[b-johb030kt9] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sc-text-primary);
}

.dialog-close[b-johb030kt9] {
    width: 32px;
    height: 32px;
    background: var(--sc-surface-muted);
    border: none;
    border-radius: 8px;
    color: var(--sc-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.dialog-close:hover[b-johb030kt9] {
    background: var(--sc-border);
    color: var(--sc-text-primary);
}

.dialog-body[b-johb030kt9] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-field[b-johb030kt9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label[b-johb030kt9] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sc-text-secondary);
}

/* Icon Selector */
.icon-selector[b-johb030kt9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.icon-option[b-johb030kt9] {
    width: 40px;
    height: 40px;
    background: var(--sc-surface-muted);
    border: 2px solid transparent;
    border-radius: 10px;
    color: var(--sc-primary-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.icon-option:hover[b-johb030kt9] {
    background: var(--sc-border);
    color: var(--sc-text-primary);
}

.icon-option.selected[b-johb030kt9] {
    background: var(--theme-primary-500);
    color: var(--sc-text-inverse);
    border-color: transparent;
}

.icon-option .rzi[b-johb030kt9] {
    font-size: 1.2rem;
}

/* Color Selector */
.color-selector[b-johb030kt9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.color-option[b-johb030kt9] {
    width: 36px;
    height: 36px;
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--sc-text-inverse);
}

.color-option:hover[b-johb030kt9] {
    transform: scale(1.1);
}

.color-option.selected[b-johb030kt9] {
    border-color: var(--sc-text-primary);
}

.color-option .rzi[b-johb030kt9] {
    font-size: 1rem;
}

.dialog-footer[b-johb030kt9] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--sc-border);
    background: var(--sc-surface-variant);
    border-radius: 0 0 12px 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .shortcuts-panel[b-johb030kt9] {
        width: 280px;
        /* Same rationale as HeaderBar.razor.css's .sc-user-dropdown at this
           breakpoint: right:0 under a button that sits close to the edge
           clips the panel off-screen once the header's own padding shrinks. */
        right: -1rem;
    }

    .shortcut-dialog[b-johb030kt9] {
        width: calc(100vw - 32px);
    }
}

/* Scrollbar Styling */
.shortcuts-list[b-johb030kt9]::-webkit-scrollbar {
    width: 6px;
}

.shortcuts-list[b-johb030kt9]::-webkit-scrollbar-track {
    background: transparent;
}

.shortcuts-list[b-johb030kt9]::-webkit-scrollbar-thumb {
    background: var(--sc-border-strong);
    border-radius: 3px;
}

.shortcuts-list[b-johb030kt9]::-webkit-scrollbar-thumb:hover {
    background: var(--sc-text-disabled);
}
/* /Components/ImpersonationBanner.razor.rz.scp.css */
.sc-impersonation-banner[b-phgq2q9gya] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #b91c1c;
    color: #fff;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 1500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.sc-impersonation-banner .material-icons-outlined[b-phgq2q9gya] {
    font-size: 20px;
}

.sc-impersonation-banner__text[b-phgq2q9gya] {
    flex: 1;
}

.sc-impersonation-banner__exit[b-phgq2q9gya] {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.sc-impersonation-banner__exit:hover[b-phgq2q9gya] {
    background: rgba(255, 255, 255, 0.3);
}
/* /Components/SetupGuideFab.razor.rz.scp.css */
.setup-fab[b-a7qgt3o43w] {
    position: fixed;
    right: 24px;
    bottom: 7.5%;
    z-index: 950;
    font-family: inherit;
    animation: fab-slide-in-b-a7qgt3o43w 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fab-slide-in-b-a7qgt3o43w {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Collapsed pill =====
   A SIGNPOST, NOT A CALL TO ACTION — which is what the component's own header says it is.
   It used to be a saturated primary slab with a 32px drop shadow, so on a page whose whole
   job is one decision ("Confirm setup") it was the loudest thing on screen and competed
   with that page's own button. It is now a surface card: the page keeps the primary colour,
   and the pill borrows it only for the progress ring and the chevron. */
.setup-fab-pill[b-a7qgt3o43w] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3, 12px);
    padding: 10px 14px 10px 10px;
    background: var(--sc-surface, #fff);
    color: var(--sc-text-primary, #0f172a);
    border: 1px solid var(--sc-border, #e2e8f0);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    /* Two-layer shadow: a tight contact shadow so it sits on the page, and a wide soft one
       for lift. The single 32px/0.25 blur it replaced read as a floating advert. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 24px -12px rgba(15, 23, 42, 0.28);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    width: 296px;
}

.setup-fab-pill:hover[b-a7qgt3o43w] {
    transform: translateY(-2px);
    border-color: var(--sc-primary-300, #93c5fd);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.07), 0 16px 32px -14px rgba(15, 23, 42, 0.34);
}

.setup-fab-pill:focus-visible[b-a7qgt3o43w] {
    outline: 2px solid var(--sc-primary-500, #2563eb);
    outline-offset: 2px;
}

.setup-fab-pill > .rz-icon[b-a7qgt3o43w] {
    color: var(--sc-text-muted, #94a3b8);
    font-size: 20px;
    flex: 0 0 auto;
    transition: transform .15s ease, color .15s ease;
}

.setup-fab-pill:hover > .rz-icon[b-a7qgt3o43w] {
    color: var(--sc-primary-500, #2563eb);
    transform: translateX(2px);
}

/* ── Progress ring ────────────────────────────────────────────────────────
   44px, up from 40px, and the fraction is no longer 0.65rem inside a ring that
   also encodes the same value — the completed number now carries the weight and
   the total is demoted, so it reads at a glance instead of being decoration. */
.setup-fab-ring[b-a7qgt3o43w] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.setup-fab-ring svg[b-a7qgt3o43w] {
    width: 44px;
    height: 44px;
    transform: rotate(-90deg);
}

.setup-fab-ring .ring-bg[b-a7qgt3o43w] {
    fill: none;
    stroke: var(--sc-border, #e2e8f0);
    stroke-width: 3;
}

.setup-fab-ring .ring-fg[b-a7qgt3o43w] {
    fill: none;
    stroke: var(--sc-primary-500, #2563eb);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray .4s ease;
}

.setup-fab-ring .ring-label[b-a7qgt3o43w] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--sc-text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
}

.setup-fab-ring .ring-total[b-a7qgt3o43w] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--sc-text-muted, #94a3b8);
}

/* ── Text ─────────────────────────────────────────────────────────────────
   The step NAME is the payload and now leads; "Next step" is a quiet eyebrow.
   Previously inverted: an uppercase letter-spaced "CONTINUE SETUP" dominated,
   while the one informative string was clipped to "Confirm Consent Notice Wo…". */
.setup-fab-pill-text[b-a7qgt3o43w] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.pill-eyebrow[b-a7qgt3o43w] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--sc-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Wraps to at most two lines rather than truncating at one. A signpost that hides
   the destination is not a signpost. */
.pill-name[b-a7qgt3o43w] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sc-text-primary, #0f172a);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Dark mode ────────────────────────────────────────────────────────────
   The shell has a theme toggle and this component had no dark treatment at all —
   a white card would have punched a hole in a dark page. Tokens carry most of it;
   the shadow needs its own value because a light-mode shadow is invisible on dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .setup-fab-pill[b-a7qgt3o43w] {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -12px rgba(0, 0, 0, 0.6);
    }
}

:root[data-theme$="-dark"] .setup-fab-pill[b-a7qgt3o43w] {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}

@media (max-width: 480px) {
    .setup-fab-pill[b-a7qgt3o43w] { width: calc(100vw - 32px); }
}

/* Respect a reduced-motion preference: the lift and the ring sweep are decoration. */
@media (prefers-reduced-motion: reduce) {
    .setup-fab-pill[b-a7qgt3o43w],
    .setup-fab-pill > .rz-icon[b-a7qgt3o43w],
    .setup-fab-ring .ring-fg[b-a7qgt3o43w] { transition: none; }
    .setup-fab-pill:hover[b-a7qgt3o43w] { transform: none; }
}

/* ===== Expanded panel ===== */
.setup-fab-panel[b-a7qgt3o43w] {
    width: 360px;
    background: var(--sc-surface, #ffffff);
    color: var(--sc-text-primary, #0f172a);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    border: 1px solid var(--sc-border, rgba(15, 23, 42, 0.08));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.setup-fab-header[b-a7qgt3o43w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--theme-primary-500, #2563eb);
    color: #fff;
}

.setup-fab-header .header-meta[b-a7qgt3o43w] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.setup-fab-header .header-meta .rz-icon[b-a7qgt3o43w] {
    font-size: 24px;
    color: #fff;
}

.setup-fab-header h3[b-a7qgt3o43w] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.setup-fab-header .header-progress[b-a7qgt3o43w] {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 2px;
}

.icon-btn[b-a7qgt3o43w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.icon-btn:hover[b-a7qgt3o43w] { background: rgba(255, 255, 255, 0.3); }
.icon-btn .rz-icon[b-a7qgt3o43w] { font-size: 18px; }

.setup-fab-progress[b-a7qgt3o43w] {
    height: 4px;
    background: var(--sc-surface-variant, #f1f5f9);
}

.setup-fab-progress .bar[b-a7qgt3o43w] {
    height: 100%;
    width: var(--p, 0%);
    background: linear-gradient(90deg, var(--theme-primary-500, #3b82f6), var(--theme-primary-700, #1d4ed8));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.setup-fab-body[b-a7qgt3o43w] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-current[b-a7qgt3o43w],
.task-next[b-a7qgt3o43w] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: var(--sc-surface-variant, #f8fafc);
    border: 1px solid var(--sc-border, rgba(15, 23, 42, 0.06));
}

.task-current[b-a7qgt3o43w] {
    border-color: var(--theme-primary-500, #2563eb);
    background: color-mix(in srgb, var(--theme-primary-500, #2563eb) 12%, var(--sc-surface-variant, #f8fafc));
}

.badge[b-a7qgt3o43w] {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--theme-primary-500, #2563eb);
    color: #fff;
    line-height: 1.4;
}

.badge.next[b-a7qgt3o43w] {
    background: var(--sc-text-secondary, #64748b);
}

.task-info[b-a7qgt3o43w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.task-name[b-a7qgt3o43w] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sc-text-primary, #0f172a);
}

.task-desc[b-a7qgt3o43w] {
    font-size: 0.75rem;
    color: var(--sc-text-secondary, #64748b);
    line-height: 1.4;
}

.task-done[b-a7qgt3o43w] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--sc-success-500, #16a34a) 10%, transparent);
    color: var(--sc-text-primary, #0f172a);
    font-size: 0.875rem;
    font-weight: 500;
}

.task-done .rz-icon[b-a7qgt3o43w] {
    color: var(--sc-success-500, #16a34a);
    font-size: 22px;
}

.setup-fab-footer[b-a7qgt3o43w] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--sc-border, rgba(15, 23, 42, 0.06));
    background: var(--sc-surface-variant, #f8fafc);
}

.ghost-btn[b-a7qgt3o43w],
.primary-btn[b-a7qgt3o43w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.ghost-btn[b-a7qgt3o43w] {
    background: transparent;
    color: var(--sc-text-primary, #0f172a);
    border: 1px solid var(--sc-border, rgba(15, 23, 42, 0.12));
}

.ghost-btn:hover[b-a7qgt3o43w] {
    background: var(--sc-surface, #ffffff);
    border-color: var(--sc-text-secondary, #94a3b8);
}

.primary-btn[b-a7qgt3o43w] {
    background: var(--theme-primary-500, #2563eb);
    color: #fff;
    flex: 1;
    min-width: 0;
}

.primary-btn span[b-a7qgt3o43w] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.primary-btn:hover[b-a7qgt3o43w] {
    background: var(--theme-primary-700, #1d4ed8);
}

.primary-btn .rz-icon[b-a7qgt3o43w],
.ghost-btn .rz-icon[b-a7qgt3o43w] { font-size: 16px; }

.dismiss-link[b-a7qgt3o43w] {
    background: transparent;
    border: none;
    color: var(--sc-text-secondary, #64748b);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 8px 16px 12px;
    text-align: center;
    text-decoration: underline;
}

.dismiss-link:hover[b-a7qgt3o43w] { color: var(--sc-text-primary, #0f172a); }

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .setup-fab[b-a7qgt3o43w] {
        right: 12px;
        bottom: 12px;
        left: 12px;
    }

    .setup-fab-pill[b-a7qgt3o43w] {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
    }

    .setup-fab-panel[b-a7qgt3o43w] {
        width: 100%;
    }
}

/* ===== Gate 0 irreversibility notice =====
   A banner pinned above the FAB on pages whose first use stamps decisions that
   cannot be undone. Warning tone, not danger: the action is allowed, it is just
   easier to do in the right order. */
/* Anchored TOP-right, not bottom-right. It used to sit above the FAB in the bottom-right corner —
   which is exactly where a page puts its primary action. On /students/import it covered the
   "Next" button of the wizard it was warning about, so the notice about doing things in the right
   order was itself what stopped you doing them. A fixed panel may never occupy the action corner. */
.setup-gate0-notice[b-a7qgt3o43w] {
    position: fixed;
    right: 24px;
    top: calc(var(--sc-header-height, 60px) + 16px);
    z-index: 951;
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-3, 12px);
    max-width: 460px;
    padding: var(--sc-space-4, 16px);
    background: var(--sc-warning-50, #fffbeb);
    border: 1px solid var(--sc-warning-300, #fcd34d);
    border-radius: var(--sc-radius-lg, 12px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    color: var(--sc-warning-800, #92400e);
    animation: fab-slide-in-b-a7qgt3o43w 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ⚠ The panel must never swallow a click meant for the page underneath.
       Moving it out of the bottom-right corner (above) fixed /students/import and moved the
       same collision onto /students/enroll, whose wizard puts "Next" in the TOP-right: measured
       2026-09-01, the notice is 460x208 at (1016,76) and Next is 120x44 at (1297,187) — fully
       inside it, so document.elementFromPoint at the button's centre returns THIS panel. The
       button rendered, enabled, and did nothing, which is indistinguishable from a dead button.
       Chasing corners cannot work: this is one fixed panel over every page's own layout, and
       there is no corner that is free on all of them. An advisory note takes clicks only on its
       own controls. */
    pointer-events: none;
}

/* The note itself is inert (see above); its two controls are not. */
.setup-gate0-notice .gate0-action[b-a7qgt3o43w],
.setup-gate0-notice .gate0-close[b-a7qgt3o43w] {
    pointer-events: auto;
}

.setup-gate0-notice > .rz-icon[b-a7qgt3o43w],
.setup-gate0-notice > .rzi[b-a7qgt3o43w] {
    color: var(--sc-warning-600, #d97706);
    flex-shrink: 0;
}

.setup-gate0-notice .gate0-body[b-a7qgt3o43w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.setup-gate0-notice .gate0-title[b-a7qgt3o43w] {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
}

.setup-gate0-notice .gate0-text[b-a7qgt3o43w] {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--sc-warning-700, #b45309);
}

.setup-gate0-notice .gate0-action[b-a7qgt3o43w] {
    flex-shrink: 0;
    align-self: center;
    padding: 8px 14px;
    border: none;
    border-radius: 999px;
    background: var(--sc-warning-600, #d97706);
    color: var(--sc-text-inverse, #fff);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.setup-gate0-notice .gate0-action:hover[b-a7qgt3o43w] {
    background: var(--sc-warning-700, #b45309);
}

.setup-gate0-notice .gate0-close[b-a7qgt3o43w] {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--sc-warning-700, #b45309);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}

@media (max-width: 640px) {
    .setup-gate0-notice[b-a7qgt3o43w] {
        left: 16px;
        right: 16px;
        max-width: none;
        flex-wrap: wrap;
    }
}

/* Yield to a page's sticky save bar.

   The FAB is fixed bottom-right at z-index 950; the sticky ".action-bar" that seven
   pages use for their primary Save is fixed at bottom: 0 with z-index 40. Bottom-right
   is exactly where those bars put their Save button, so the FAB sat on top of it and
   swallowed the click — measured with elementFromPoint at the button's left, centre and
   right: all three returned BUTTON.setup-fab-pill, never the Save button. The button
   rendered, looked enabled, and did nothing, which is the worst shape a control can have.

   Raising the bar above the FAB instead would only invert the problem, so the FAB moves
   out of the way. This mirrors FloatingShortcuts.razor.css, which already does the same
   in the other direction: :has() lets one component react to a sibling it knows nothing
   about, and where :has() is unsupported the rule is simply dropped and the previous
   overlap returns — a degradation, not a break.

   Affects: Branding, BrandingSettings, BasicInfo, Localization, AcademicYearList,
   ClassReportCards, GenerateReportCards. */
body:has(.action-bar) .setup-fab[b-a7qgt3o43w] {
    bottom: 104px;
}
/* /Components/SupportInfo.razor.rz.scp.css */
/* Support Info Modal Styles */

.support-info-overlay[b-5hphczlpm8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sc-scrim-bg, rgba(15, 23, 42, 0.55));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    animation: fadeIn-b-5hphczlpm8 0.2s ease;
}

.support-info-modal[b-5hphczlpm8] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 720px;
    max-height: 85vh;
    /* --rz-surface is not defined in this app (the modal rendered transparent).
       Use the app's theme-aware surface token + an explicit elevation so the
       panel reads as a solid sheet over the scrim, like every other dialog. */
    background: var(--sc-surface, #ffffff);
    border: 1px solid var(--sc-border, rgba(15, 23, 42, 0.08));
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
    border-radius: 12px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-5hphczlpm8 0.25s ease;
    overflow: hidden;
}

@keyframes fadeIn-b-5hphczlpm8 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-5hphczlpm8 {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Modal Header */
.modal-header[b-5hphczlpm8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sc-space-4) var(--sc-space-6);
    padding: var(--sc-space-5) var(--sc-space-6);
    border-bottom: 1px solid var(--rz-border-color);
    background: var(--theme-primary-500);
    color: var(--sc-text-inverse);
}

.header-title[b-5hphczlpm8] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
}

.header-title .material-symbols-outlined[b-5hphczlpm8] {
    font-size: 1.75rem;
}

.header-title h2[b-5hphczlpm8] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.header-actions[b-5hphczlpm8] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-2) var(--sc-space-4);
    padding: var(--sc-space-2) var(--sc-space-4);
}

.copy-btn[b-5hphczlpm8] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--sc-text-inverse);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.copy-btn:hover[b-5hphczlpm8] {
    background: rgba(255, 255, 255, 0.3);
}

.copy-btn .material-symbols-outlined[b-5hphczlpm8] {
    font-size: 1.125rem;
}

.close-btn[b-5hphczlpm8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: var(--sc-text-inverse);
    cursor: pointer;
    transition: all 0.15s ease;
}

.close-btn:hover[b-5hphczlpm8] {
    background: rgba(255, 255, 255, 0.25);
}

.close-btn .material-symbols-outlined[b-5hphczlpm8] {
    font-size: 1.375rem;
}

/* Modal Body */
.modal-body[b-5hphczlpm8] {
    flex: 1;
    overflow-y: auto;
    padding: var(--sc-space-5) var(--sc-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-5);
}

/* Info Sections */
.info-section[b-5hphczlpm8] {
    background: var(--rz-input-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    padding: var(--sc-space-4) var(--sc-space-5);
}

.section-header[b-5hphczlpm8] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin-bottom: var(--sc-space-4);
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--rz-border-color);
}

.section-header .material-symbols-outlined[b-5hphczlpm8] {
    font-size: 1.25rem;
    color: var(--sc-primary-700);
}

.section-header h3[b-5hphczlpm8] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

/* Info Grid */
.info-grid[b-5hphczlpm8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sc-space-3) var(--sc-space-6);
}

.info-item[b-5hphczlpm8] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.info-item.full-width[b-5hphczlpm8] {
    grid-column: 1 / -1;
}

.info-item .label[b-5hphczlpm8] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.info-item .value[b-5hphczlpm8] {
    font-size: 0.875rem;
    color: var(--rz-text-color);
    word-break: break-word;
}

.info-item .value.small[b-5hphczlpm8] {
    font-size: 0.8125rem;
    line-height: 1.4;
}

.info-item .value.monospace[b-5hphczlpm8] {
    font-family: var(--sc-font-mono, 'JetBrains Mono', 'Fira Code', monospace);
    font-size: 0.8125rem;
    background: var(--sc-code-bg);
    color: var(--sc-code-text);
    padding: var(--sc-space-1) var(--sc-space-2);
    border-radius: 4px;
    border: 1px solid var(--rz-border-color);
}

/* Environment Badge */
.info-item .value.environment[b-5hphczlpm8] {
    display: inline-flex;
    align-items: center;
    padding: var(--sc-space-1) 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: fit-content;
}

.info-item .value.environment.dev[b-5hphczlpm8] {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.info-item .value.environment.staging[b-5hphczlpm8] {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.info-item .value.environment.prod[b-5hphczlpm8] {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

/* Modal Footer */
.modal-footer[b-5hphczlpm8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--rz-border-color);
    background: var(--rz-input-background-color);
}

.footer-hint[b-5hphczlpm8] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.footer-hint .material-symbols-outlined[b-5hphczlpm8] {
    font-size: 1rem;
}

.footer-hint kbd[b-5hphczlpm8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem var(--sc-space-2);
    background: var(--sc-kbd-bg);
    border: 1px solid var(--sc-kbd-border);
    color: var(--sc-kbd-text);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-family: inherit;
}

.footer-actions[b-5hphczlpm8] {
    display: flex;
    gap: 0.625rem;
}

.secondary-btn[b-5hphczlpm8],
.primary-btn[b-5hphczlpm8] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.secondary-btn[b-5hphczlpm8] {
    background: var(--rz-surface);
    border: 1px solid var(--rz-border-color);
    color: var(--rz-text-color);
}

.secondary-btn:hover[b-5hphczlpm8] {
    background: var(--rz-input-background-color);
    border-color: var(--rz-text-secondary-color);
}

.primary-btn[b-5hphczlpm8] {
    background: var(--sc-primary-700);
    border: none;
    color: var(--sc-text-inverse);
}

.primary-btn:hover[b-5hphczlpm8] {
    background: var(--sc-primary-700);
}

.secondary-btn .material-symbols-outlined[b-5hphczlpm8],
.primary-btn .material-symbols-outlined[b-5hphczlpm8] {
    font-size: 1.125rem;
}

/* Responsive */
@media (max-width: 640px) {
    .support-info-modal[b-5hphczlpm8] {
        width: 95%;
        max-height: 90vh;
    }

    .modal-header[b-5hphczlpm8] {
        padding: var(--sc-space-4);
    }

    .header-title h2[b-5hphczlpm8] {
        font-size: 1.125rem;
    }

    .copy-btn span:not(.material-symbols-outlined)[b-5hphczlpm8] {
        display: none;
    }

    .modal-body[b-5hphczlpm8] {
        padding: var(--sc-space-4);
    }

    .info-grid[b-5hphczlpm8] {
        grid-template-columns: 1fr;
    }

    .modal-footer[b-5hphczlpm8] {
        flex-direction: column;
        gap: var(--sc-space-3);
        padding: var(--sc-space-4) var(--sc-space-4);
    }

    .footer-hint[b-5hphczlpm8] {
        display: none;
    }

    .footer-actions[b-5hphczlpm8] {
        width: 100%;
    }

    .footer-actions button[b-5hphczlpm8] {
        flex: 1;
        justify-content: center;
    }
}
/* /Layout/AuthLayout.razor.rz.scp.css */
/* Outer shell takes over the entire viewport via position: fixed so we
   never have to reason about parent layouts, header margins, or footer
   heights. This is the single source of truth for auth page framing.

   60/40 split — hero pane gets the wider column (brand presence), form
   pane gets the narrower column (a focused, calm input column rather
   than a half-empty void at desktop widths). */
.sc-auth-shell[b-jlaock79eb] {
    position: fixed;
    inset: 0;
    display: grid;
    /* Half and half. At 3fr 2fr the form column was the narrower of the two on every
       widescreen, so the thing the visitor came to DO had less room than the poster. */
    grid-template-columns: 1fr 1fr;
    background: var(--sc-background);
    overflow: hidden;
    z-index: 1000;
}

/* ===== RIGHT — form pane =====
   Pane just centers the stack in the middle. The stack itself owns the
   column width so brand and form share the same left edge. */
.sc-auth-form-pane[b-jlaock79eb] {
    display: flex;
    /* flex-start, with the stack centring itself via `margin-block: auto` below. `align-items:
       center` centres by OVERFLOWING EQUALLY IN BOTH DIRECTIONS once the child is taller than the
       pane, and the overflow above a scroll container is unreachable -- so Register's tall form
       lost its top padding and the language/theme row sat flush against the edge. */
    align-items: flex-start;
    justify-content: center;
    background: var(--sc-surface);
    padding: var(--sc-space-10);
    overflow-y: auto;
}

.sc-auth-form-stack[b-jlaock79eb] {
    /* Centres vertically when there is room, and keeps the pane's padding when there is not. */
    margin-block: auto;
    width: 100%;
    /* The form column is now 40% of viewport; this max-width keeps the
       form from stretching too wide on ultra-wide monitors while still
       giving Register's two-column rows the breathing room they need. */
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-10);
}

/* The right-pane brand mark (and its signed-out spin animation) was
   removed — the hero pane's logo is the sole brand statement on every
   auth route, so the form content now sits centered in the pane alone. */

.sc-auth-form-content[b-jlaock79eb] {
    width: 100%;
}

/* ===== LEFT — dark hero pane =====
   Two-row column (body / footer links). The persistent top-of-pane lockup
   was removed — it duplicated the big focal brand mark in the body below
   with nothing but a much smaller variant of the same logo. The body still
   takes the free space via `margin: auto 0`, so it stays optically centred
   between the top of the pane and the footer. */
.sc-auth-hero-pane[b-jlaock79eb] {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Deep, slightly cool navy — closer to the Fuse reference than pure
       black, and reads as a brand surface rather than a void. */
    background:
        radial-gradient(ellipse at 30% 30%, #1a2540 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, #0e1a33 0%, transparent 70%),
        #0b1426;
    color: rgba(255, 255, 255, 0.85);
    /* The form pane centres a 520px stack in a half-width column, so on a wide screen its content
       starts ~220px in while the hero started 48px in and read as pinned to the edge. Scales with
       the viewport rather than matching that number outright, which would squeeze the headline.
       Only ever seen above 960px — the pane is display:none below that. */
    /* Back to a plain top padding (2026-09-17). Pushing the wordmark down to meet "Get started"
       across the split was measured as aligned and looked wrong: the hero is a full-bleed brand
       panel, and a mark floating a third of the way down it reads as mispositioned, not aligned. */
    padding: var(--sc-space-10) clamp(var(--sc-space-12), 7vw, 7rem);
}

.sc-auth-hero-bg-mark[b-jlaock79eb],
.sc-auth-hero-bg-dots[b-jlaock79eb],
.sc-auth-hero-bg-glow[b-jlaock79eb] {
    position: absolute;
    pointer-events: none;
}

/* Soft brand-tone glow blob — sits in the top-LEFT corner of the page
   now that the hero owns the left side of the viewport. */
.sc-auth-hero-bg-glow[b-jlaock79eb] {
    top: -10%;
    left: -15%;
    width: 60%;
    height: 70%;
    background: radial-gradient(circle, rgba(var(--sc-primary-rgb), 0.18) 0%, transparent 70%);
    filter: blur(20px);
}

/* Concentric rings echoing the brand logo arc. Anchored bottom-right so
   the curve flows into the dividing line between hero and form pane. */
.sc-auth-hero-bg-mark[b-jlaock79eb] {
    bottom: -25%;
    right: -10%;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 0 0 0 60px rgba(255, 255, 255, 0.015),
        inset 0 0 0 120px rgba(255, 255, 255, 0.02);
}

/* Dot grid in the top-LEFT corner — the page corner, mirroring the
   Fuse design's accent placement. */
.sc-auth-hero-bg-dots[b-jlaock79eb] {
    top: var(--sc-space-12);
    left: var(--sc-space-12);
    width: 140px;
    height: 80px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
    background-size: 14px 14px;
    opacity: 0.6;
}

/* Big stacked-dark brand mark sits inside the hero content stack, above
   the welcome message. Centered across the content column so the large
   icon-over-wordmark logo reads as the hero's focal point rather than a
   small top-left badge. */
.sc-auth-hero-brand[b-jlaock79eb] {
    display: flex;
    align-items: center;
    /* Icon beside the wordmark (was stacked above it): the hero now carries a
       headline + pillars below, so the mark has to give up vertical room. */
    gap: var(--sc-space-4);
    margin: 0 0 var(--sc-space-6);
}

.sc-auth-hero-brand-img[b-jlaock79eb],
.sc-auth-hero-brand-img[b-jlaock79eb]  img,
.sc-auth-hero-brand[b-jlaock79eb]  img.sc-auth-hero-brand-img {
    height: clamp(52px, 6vh, 64px);
    width: auto;
}

/* HTML wordmark — mirrors logo.stacked.dark.svg: "School" white,
   "Connect" theme-primary-300 (#93C5FD), heavy weight, tight tracking. */
.sc-auth-hero-wordmark[b-jlaock79eb] {
    font-weight: 800;
    font-size: clamp(1.875rem, 2.6vw, 2.375rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.sc-auth-hero-wordmark span[b-jlaock79eb] {
    color: #93c5fd;
}

.sc-auth-hero-content[b-jlaock79eb] {
    position: relative;
    z-index: 1;
    /* Left-aligned single column per the redesign (was centred): with a headline
       and a pillar list, a centre axis made the ragged edges hard to scan.
       `margin: auto 0` centres the block vertically between top lockup and footer.
       Hero collapses below 960px so this doesn't affect mobile. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: auto 0;
    /* Widened from 34rem — at that width the headline and lede wrapped to
       three lines each, orphaning single trailing words ("together.") onto
       their own line, and left the pane's spare horizontal room (it's the
       3fr side of a 3fr/2fr split) unused. 46rem lets both wrap to two
       balanced lines instead. */
    max-width: 46rem;
}

/* Spaced caps above the headline — the four-word brand promise. */
.sc-auth-hero-eyebrow[b-jlaock79eb] {
    margin: 0 0 var(--sc-space-5);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #7da9e8;
}

.sc-auth-hero-headline[b-jlaock79eb] {
    /* ONE TYPEFACE (2026-08-31). This was an editorial serif ("STIX Two Text") used as a marketing
       accent. It was the only serif anywhere in the product, so the sign-in screen read as a
       different brand from the app it signs you into — and against the sans-serif eyebrow directly
       above it the mix looked accidental rather than deliberate. It now inherits the app stack.
       Weight and size carry the emphasis the serif was there for. */
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw, 2.0625rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #f1f5f9;
    margin: 0 0 var(--sc-space-4);
}

/* The one emphasised phrase in the headline. */
.sc-auth-hero-headline i[b-jlaock79eb] {
    font-style: normal;
    color: #93c5fd;
}

.sc-auth-hero-lede[b-jlaock79eb] {
    font-size: 0.9375rem;
    line-height: 1.65;
    font-weight: 400;
    /* Solid #cbd5e1, not rgba(255,255,255,0.68). Alpha over a GRADIENT is not one colour: this
       pane's background runs from #1a2540 to #0b1426, so the same 0.68 white measured differently
       depending on where the text sat over the glow — lightest where it mattered least. A solid
       value is the same everywhere, and matches the dark-theme --theme-text-secondary the form
       pane opposite already uses, so the two halves finally agree on what "secondary" looks like. */
    color: #cbd5e1;
    margin: 0 0 var(--sc-space-8);
}

/* ── Sign-up: ticked value props (replaces the pillars on that route) ── */
.sc-auth-hero-checks[b-jlaock79eb] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
    margin-bottom: var(--sc-space-8);
}

.sc-auth-hero-check[b-jlaock79eb] {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-3);
    font-size: 0.875rem;
    color: #cbd6e6;
}

.sc-auth-hero-check[b-jlaock79eb]  .rzi {
    font-size: 1.125rem;
    color: #34d399;
    flex-shrink: 0;
}

/* ── Forgot password: the reassurance box ── */
/* The lede is the whole pitch on this route (no headline above it), so it carries a little more. */
.sc-auth-hero-lede-lead[b-jlaock79eb] {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.8);
}

.sc-auth-hero-reassure[b-jlaock79eb] {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4);
    border-radius: 13px;
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.12);
    margin-bottom: var(--sc-space-8);
}

.sc-auth-hero-reassure-icon[b-jlaock79eb] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: var(--sc-primary-500);
}

.sc-auth-hero-reassure-icon[b-jlaock79eb]  .rzi {
    font-size: 1.15rem;
}

.sc-auth-hero-reassure p[b-jlaock79eb] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #8497ae;
}

.sc-auth-hero-reassure p b[b-jlaock79eb] {
    color: #e8eef6;
    font-weight: 600;
}

/* ── Audience pillars ── */
.sc-auth-hero-pillars[b-jlaock79eb] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
    margin-bottom: var(--sc-space-8);
}

.sc-auth-hero-pillar[b-jlaock79eb] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-3) var(--sc-space-4);
    border-radius: 13px;
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.sc-auth-hero-pillar-icon[b-jlaock79eb] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: var(--sc-primary-500);
}

/* Each pillar takes a different accent so the three read as distinct
   audiences rather than one repeated block. */
.sc-auth-hero-pillar-icon[data-i="2"][b-jlaock79eb] { background: #0e9aae; }
.sc-auth-hero-pillar-icon[data-i="3"][b-jlaock79eb] { background: #7a5ec4; }

.sc-auth-hero-pillar-icon[b-jlaock79eb]  .rzi {
    font-size: 1.15rem;
}

.sc-auth-hero-pillar b[b-jlaock79eb] {
    display: block;
    font-size: 0.84375rem;
    font-weight: 600;
    color: #e8eef6;
}

.sc-auth-hero-pillar small[b-jlaock79eb] {
    display: block;
    font-size: 0.75rem;
    color: #8497ae;
    margin-top: 1px;
}

.sc-auth-hero-social[b-jlaock79eb] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
}

/* The avatar-initials cluster (.sc-auth-hero-avatars / .sc-auth-hero-avatar) was deleted with
   its markup on 2026-08-31 — see AuthLayout.razor. Rules removed rather than left orphaned: a
   selector with nothing to match is indistinguishable from one whose markup broke. */

.sc-auth-hero-social-text[b-jlaock79eb] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    /* #94a3b8 not #93a3bb — the requested contrast floor for secondary text on this navy.
       The old value sat just under it and read as disabled rather than secondary. */
    color: #94a3b8;
}

.sc-auth-hero-social-text b[b-jlaock79eb] {
    color: #cbd6e6;
    font-weight: 600;
}

/* ── Hero footer ── */
.sc-auth-hero-foot[b-jlaock79eb] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--sc-space-5);
    font-size: 0.71875rem;
    color: #64768f;
}

.sc-auth-hero-foot a[b-jlaock79eb] {
    /* Was #64768f, which on this navy is below the floor for text a person is meant to be able to
       READ and click (Privacy, POPIA, Status are real destinations, not decoration). */
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s ease;
}

.sc-auth-hero-foot a:hover[b-jlaock79eb] {
    color: #cbd6e6;
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
    .sc-auth-shell[b-jlaock79eb] {
        grid-template-columns: 1fr;
    }

    /* Hide the hero pane on mobile — phones rarely benefit from a
       half-height marketing column, and the form needs the full width. */
    .sc-auth-hero-pane[b-jlaock79eb] {
        display: none;
    }

    .sc-auth-form-pane[b-jlaock79eb] {
        padding: var(--sc-space-6);
    }

    .sc-auth-form-stack[b-jlaock79eb] {
        max-width: 460px;
        gap: var(--sc-space-8);
    }
}
/* /Layout/HeaderBar.razor.rz.scp.css */
/* Header Bar Main Container */
.sc-header-bar[b-xm9u3vcua3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sc-space-6);
    height: 88px;
    background: transparent;
}

/* Left Section */
.sc-header-left[b-xm9u3vcua3] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-2) var(--sc-space-3);
}

/* Phase 9 — was "mobile only" pre-IA-v2. Now it's the canonical
   navigation toggle on every viewport: <1024px it opens the mobile
   drawer; ≥1024px it folds/un-folds the desktop rail. Both behaviours
   are wired in HeaderBar.ToggleNavigation; the CSS just has to show
   the button. */
.sc-mobile-nav-trigger[b-xm9u3vcua3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(var(--sc-primary-rgb), 0.15);
    border-radius: 10px;
    background: rgba(var(--sc-primary-rgb), 0.04);
    color: var(--sc-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sc-mobile-nav-trigger:hover[b-xm9u3vcua3] {
    background: rgba(var(--sc-primary-rgb), 0.1);
    color: var(--sc-primary-500);
}

/* Mega Menu Trigger Button */
.sc-mega-menu-trigger[b-xm9u3vcua3] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-2) var(--sc-space-4);
    border: 1px solid rgba(var(--sc-primary-rgb), 0.15);
    border-radius: 10px;
    background: rgba(var(--sc-primary-rgb), 0.04);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--sc-text-secondary);
    font-weight: var(--sc-font-medium);
    font-size: var(--sc-text-sm);
}

.sc-mega-menu-trigger:hover[b-xm9u3vcua3] {
    background: rgba(var(--sc-primary-rgb), 0.1);
    border-color: rgba(var(--sc-primary-rgb), 0.3);
    color: var(--sc-primary-500);
    transform: translateY(-1px);
}

.sc-mega-menu-trigger:active[b-xm9u3vcua3] {
    transform: scale(0.97) translateY(0);
}

.sc-mega-menu-trigger .rzi[b-xm9u3vcua3] {
    font-size: 1.25rem;
}

/* Logo Container */
.sc-logo-container[b-xm9u3vcua3] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
}

.sc-logo[b-xm9u3vcua3] {
    height: 60px;
    width: auto;
}

.sc-brand-name[b-xm9u3vcua3] {
    font-size: var(--sc-text-xl);
    font-weight: var(--sc-font-bold);
    color: var(--sc-text-primary);
    letter-spacing: -0.025em;
}

/* Center Section - Global Search */
.sc-header-center[b-xm9u3vcua3] {
    flex: 1;
    max-width: 520px;
    margin: 0 var(--sc-space-8);
}

.sc-global-search[b-xm9u3vcua3] {
    display: flex;
    align-items: center;
    background: var(--sc-surface-variant);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-xl);
    padding: var(--sc-space-2) var(--sc-space-4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sc-global-search:focus-within[b-xm9u3vcua3] {
    background: var(--sc-surface);
    border-color: rgba(var(--sc-primary-rgb), 0.4);
    transform: translateY(-1px);
}

.sc-search-icon[b-xm9u3vcua3] {
    color: var(--sc-text-disabled);
    font-size: 1.2rem;
    margin-right: var(--sc-space-3);
    transition: color 0.2s ease;
}

.sc-global-search:focus-within .sc-search-icon[b-xm9u3vcua3] {
    color: var(--sc-primary-500);
}

.sc-search-input[b-xm9u3vcua3] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--sc-text-sm);
    color: var(--sc-text-primary);
    outline: none;
}

.sc-search-input[b-xm9u3vcua3]::placeholder {
    color: var(--sc-text-disabled);
}

.sc-search-shortcut[b-xm9u3vcua3] {
    background: var(--sc-kbd-bg);
    border: 1px solid var(--sc-kbd-border);
    color: var(--sc-kbd-text);
    padding: var(--sc-space-1) var(--sc-space-2);
    border-radius: var(--sc-radius-md);
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-semibold);
    letter-spacing: 0.02em;
}

/* Right Section */
.sc-header-right[b-xm9u3vcua3] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.sc-header-icon-btn[b-xm9u3vcua3] {
    background: transparent !important;
    border: none !important;
    color: var(--sc-primary-500) !important;
    border-radius: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sc-header-icon-btn:hover[b-xm9u3vcua3] {
    color: var(--sc-primary-500) !important;
    background: rgba(var(--sc-primary-rgb), 0.08) !important;
    transform: translateY(-1px);
}

/* Notification Badge */
.sc-notification-wrapper[b-xm9u3vcua3] {
    position: relative;
}

.sc-notification-badge[b-xm9u3vcua3] {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--sc-danger-500);
    color: var(--sc-text-inverse);
    font-size: 0.65rem;
    font-weight: var(--sc-font-semibold);
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--sc-surface);
}

.sc-header-divider[b-xm9u3vcua3] {
    width: 1px;
    height: 32px;
    background: var(--sc-border);
    margin: 0 var(--sc-space-3);
}

/* User Menu Container */
.sc-user-menu-container[b-xm9u3vcua3] {
    position: relative;
}

/* User Menu Button */
.sc-user-menu[b-xm9u3vcua3] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    border-radius: var(--sc-radius-xl);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

.sc-user-menu:hover[b-xm9u3vcua3] {
    background: rgba(var(--sc-primary-rgb), 0.05);
}

/* User Avatar */
.sc-user-avatar[b-xm9u3vcua3] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--sc-primary-500) 0%, var(--sc-primary-700) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-user-avatar img[b-xm9u3vcua3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-user-initials[b-xm9u3vcua3] {
    color: var(--sc-text-inverse);
    font-weight: var(--sc-font-semibold);
    font-size: 0.9rem;
}

/* User Info */
.sc-user-info[b-xm9u3vcua3] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sc-user-name[b-xm9u3vcua3] {
    font-weight: var(--sc-font-semibold);
    font-size: var(--sc-text-sm);
    color: var(--sc-text-primary);
}

.sc-user-role[b-xm9u3vcua3] {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
}

.sc-user-dropdown-icon[b-xm9u3vcua3] {
    color: var(--sc-text-disabled);
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}

/* User Dropdown Menu */
.sc-user-dropdown[b-xm9u3vcua3] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--sc-surface);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    min-width: 280px;
    z-index: 9999;
    overflow: hidden;
    animation: dropdownSlide-b-xm9u3vcua3 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--sc-card-shadow-hover);
}

@keyframes dropdownSlide-b-xm9u3vcua3 {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown Header */
.sc-user-dropdown-header[b-xm9u3vcua3] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--sc-surface-variant);
}

.sc-dropdown-avatar[b-xm9u3vcua3] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sc-primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sc-dropdown-avatar img[b-xm9u3vcua3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-user-initials-large[b-xm9u3vcua3] {
    color: var(--sc-text-inverse);
    font-weight: var(--sc-font-semibold);
    font-size: 1.1rem;
}

.sc-dropdown-user-info[b-xm9u3vcua3] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.sc-dropdown-user-name[b-xm9u3vcua3] {
    font-weight: var(--sc-font-semibold);
    font-size: 0.95rem;
    color: var(--sc-text-primary);
}

.sc-dropdown-user-email[b-xm9u3vcua3] {
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
}

/* Dropdown Items */
.sc-user-dropdown-item[b-xm9u3vcua3] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    /* Without explicit padding the icons sit flush against the dropdown
       edge AND :hover's `padding-left` causes a visible layout shift. Base
       padding here matches the header (var(--sc-space-5) horizontal). */
    padding: var(--sc-space-3) var(--sc-space-5);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--sc-text-secondary);
    border-radius: 0;
}

.sc-user-dropdown-item:hover[b-xm9u3vcua3] {
    background: var(--sc-hover-bg);
    color: var(--sc-text-primary);
    padding-left: var(--sc-space-6);
}

.sc-user-dropdown-item .rzi[b-xm9u3vcua3] {
    font-size: 1.2rem;
    color: var(--sc-text-secondary);
    transition: color 0.2s ease;
}

.sc-user-dropdown-item:hover .rzi[b-xm9u3vcua3] {
    color: var(--sc-primary-500);
}

.sc-user-dropdown-divider[b-xm9u3vcua3] {
    height: 1px;
    background: var(--sc-border);
    margin: var(--sc-space-2) 0;
}

/* Logout Item - Special Styling */
.sc-logout-item[b-xm9u3vcua3] {
    color: var(--sc-danger-600) !important;
}

.sc-logout-item:hover[b-xm9u3vcua3] {
    background: var(--sc-danger-50) !important;
    color: var(--sc-danger-600) !important;
}

.sc-logout-item .rzi[b-xm9u3vcua3] {
    color: var(--sc-danger-600) !important;
}

.sc-logout-item:hover .rzi[b-xm9u3vcua3] {
    color: var(--sc-danger-600) !important;
}

/* Backdrop for closing dropdown when clicking outside */
.sc-dropdown-backdrop[b-xm9u3vcua3] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .sc-header-bar[b-xm9u3vcua3] {
        padding: 0 var(--sc-space-4);
    }

    .sc-header-center[b-xm9u3vcua3] {
        display: none;
    }

    .sc-mega-menu-trigger .trigger-text[b-xm9u3vcua3] {
        display: none;
    }

    .sc-mega-menu-trigger[b-xm9u3vcua3] {
        padding: var(--sc-space-2);
    }

    .sc-brand-name[b-xm9u3vcua3] {
        display: none;
    }

    .sc-user-info[b-xm9u3vcua3] {
        display: none;
    }

    .sc-user-dropdown[b-xm9u3vcua3] {
        right: -1rem;
        min-width: 260px;
    }
}
/* /Layout/LandingLayout.razor.rz.scp.css */
.sc-landing-layout[b-9rm4o85e5i] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--sc-background);
    color: var(--sc-text-primary);
}

/* ===== HEADER ===== */
.sc-landing-header[b-9rm4o85e5i] {
    background: var(--sc-header-bg, var(--sc-surface));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--sc-border);
    padding: 0 var(--sc-space-8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background 0.3s ease;
}

.sc-landing-header-content[b-9rm4o85e5i] {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}

.sc-landing-logo[b-9rm4o85e5i] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}

.sc-landing-logo[b-9rm4o85e5i]  .sc-logo-img,
.sc-logo-img[b-9rm4o85e5i] {
    height: 60px;
    max-height: 60px;
    width: auto;
}

[b-9rm4o85e5i] .sc-logo-img img,
[b-9rm4o85e5i] img.sc-logo-img {
    height: 60px;
    max-height: 60px;
    width: auto;
}

/* Themed horizontal variant (600x200 viewBox, ~3:1 aspect). A lower
   intrinsic height keeps the icon + wordmark proportionate to the
   nav row without enlarging the header. */
.sc-landing-logo[b-9rm4o85e5i]  .sc-logo-themed,
.sc-logo-themed[b-9rm4o85e5i],
[b-9rm4o85e5i] .sc-logo-themed img,
[b-9rm4o85e5i] img.sc-logo-themed {
    height: 52px;
    max-height: 52px;
    width: auto;
}

/* Square icon mark (200x200 viewBox, 1:1). Sized to sit beside the
   .sc-brand-name text wordmark without dominating the nav row. */
.sc-landing-logo[b-9rm4o85e5i]  .sc-logo-icon,
.sc-logo-icon[b-9rm4o85e5i],
[b-9rm4o85e5i] .sc-logo-icon img,
[b-9rm4o85e5i] img.sc-logo-icon {
    height: 44px;
    max-height: 44px;
    width: 44px;
}

.sc-brand-name[b-9rm4o85e5i] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    letter-spacing: -0.03em;
}

.brand-accent[b-9rm4o85e5i] {
    color: var(--sc-primary-500);
}

.sc-landing-nav[b-9rm4o85e5i] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-1);
}

.sc-nav-link[b-9rm4o85e5i] {
    padding: var(--sc-space-2) var(--sc-space-4);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sc-text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.sc-nav-link:hover[b-9rm4o85e5i] {
    color: var(--sc-primary-500);
    background: rgba(var(--sc-primary-rgb), 0.06);
}

.sc-nav-btn-light[b-9rm4o85e5i] {
    margin-left: var(--sc-space-2);
}

.sc-nav-btn-primary[b-9rm4o85e5i] {
    margin-left: var(--sc-space-1);
}

.sc-mobile-menu-btn[b-9rm4o85e5i] {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--sc-space-2);
    border-radius: 8px;
    color: var(--sc-text-secondary);
    transition: background 0.2s ease;
}

.sc-mobile-menu-btn:hover[b-9rm4o85e5i] {
    background: var(--sc-surface-muted);
}

.sc-mobile-nav[b-9rm4o85e5i] {
    display: none;
    flex-direction: column;
    gap: var(--sc-space-2);
    padding: var(--sc-space-4) 0 var(--sc-space-5);
    border-top: 1px solid var(--sc-border-light);
}

.sc-mobile-nav-link[b-9rm4o85e5i] {
    padding: var(--sc-space-3) var(--sc-space-4);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--sc-text-primary);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.sc-mobile-nav-link:hover[b-9rm4o85e5i] {
    background: var(--sc-surface-variant);
}

.sc-mobile-nav-btn[b-9rm4o85e5i] {
    width: 100%;
}

.sc-landing-main[b-9rm4o85e5i] {
    flex: 1;
    margin-top: 64px;
}

/* ===== FOOTER ===== */
.sc-landing-footer[b-9rm4o85e5i] {
    background: #0f172a;
    padding: 0 var(--sc-space-8);
    color: rgba(255, 255, 255, 0.7);
}

.sc-footer-top[b-9rm4o85e5i] {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: var(--sc-space-16);
    padding: var(--sc-space-16) 0 var(--sc-space-12);
}

.sc-footer-brand[b-9rm4o85e5i] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-4);
}

.sc-footer-logo-row[b-9rm4o85e5i] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.sc-footer-logo-row[b-9rm4o85e5i]  .sc-footer-logo-img,
.sc-footer-logo-img[b-9rm4o85e5i] {
    height: 40px;
    max-height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

[b-9rm4o85e5i] .sc-footer-logo-img img,
[b-9rm4o85e5i] img.sc-footer-logo-img {
    height: 40px;
    max-height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Themed dark variant ships its own colours (lighter blues + white
   wordmark + slate-400 tagline) so the legacy brightness/invert
   filter would flatten the SVG to monochrome white. Drop both the
   filter and the opacity dimming for this variant, and size taller
   (3:1 viewBox) so the icon + wordmark are still legible. */
.sc-footer-logo-row[b-9rm4o85e5i]  .sc-footer-logo-themed,
.sc-footer-logo-themed[b-9rm4o85e5i],
[b-9rm4o85e5i] .sc-footer-logo-themed img,
[b-9rm4o85e5i] img.sc-footer-logo-themed {
    height: 56px;
    max-height: 56px;
    width: auto;
    filter: none;
    opacity: 1;
}

/* Square dark icon mark (200x200 viewBox, 1:1). Ships its own colours,
   so drop the brightness/invert filter and opacity dimming the generic
   .sc-footer-logo-img rule applies. Paired with .sc-footer-brand-name. */
.sc-footer-logo-row[b-9rm4o85e5i]  .sc-footer-logo-icon,
.sc-footer-logo-icon[b-9rm4o85e5i],
[b-9rm4o85e5i] .sc-footer-logo-icon img,
[b-9rm4o85e5i] img.sc-footer-logo-icon {
    height: 40px;
    max-height: 40px;
    width: 40px;
    filter: none;
    opacity: 1;
}

.sc-footer-brand-name[b-9rm4o85e5i] {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: -0.02em;
}

.sc-footer-tagline[b-9rm4o85e5i] {
    font-size: 0.875rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    max-width: 280px;
}

.sc-footer-social[b-9rm4o85e5i] {
    display: flex;
    gap: var(--sc-space-2);
    margin-top: var(--sc-space-1);
}

.sc-social-link[b-9rm4o85e5i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: all 0.25s ease;
}

.sc-social-link:hover[b-9rm4o85e5i] {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

.sc-social-link .rzi[b-9rm4o85e5i] {
    font-size: 1.1rem;
}

.sc-footer-links-grid[b-9rm4o85e5i] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sc-space-8);
}

.sc-footer-section h4[b-9rm4o85e5i] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sc-space-4);
    color: rgba(255, 255, 255, 0.7);
}

.sc-footer-section ul[b-9rm4o85e5i] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.sc-footer-section ul li a[b-9rm4o85e5i] {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.sc-footer-section ul li a:hover[b-9rm4o85e5i] {
    color: rgba(255, 255, 255, 0.85);
}

.sc-footer-bottom[b-9rm4o85e5i] {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--sc-space-6) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.sc-footer-bottom p[b-9rm4o85e5i] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .sc-landing-header[b-9rm4o85e5i] {
        padding: 0 var(--sc-space-4);
    }

    .sc-landing-nav[b-9rm4o85e5i] {
        display: none;
    }

    .sc-mobile-menu-btn[b-9rm4o85e5i] {
        display: flex;
    }

    .sc-mobile-nav[b-9rm4o85e5i] {
        display: flex;
    }

    .sc-footer-top[b-9rm4o85e5i] {
        grid-template-columns: 1fr;
        gap: var(--sc-space-10);
        padding: var(--sc-space-12) 0 var(--sc-space-8);
    }

    .sc-footer-links-grid[b-9rm4o85e5i] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sc-footer-tagline[b-9rm4o85e5i] {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .sc-footer-links-grid[b-9rm4o85e5i] {
        grid-template-columns: 1fr;
    }
}
/* /Layout/LayoutSettingsPanel.razor.rz.scp.css */
.sc-settings-backdrop[b-tzy6hed4h4] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 9000;
    animation: scFadeIn-b-tzy6hed4h4 180ms ease;
}

@keyframes scFadeIn-b-tzy6hed4h4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* The panel is only rendered while open (see .razor), so its resting state is on-screen
   (translateX(0)) and it slides in via a keyframe animation. It must NEVER exist in the
   DOM in an off-canvas (translateX(100%)) state, because a transformed/blur ancestor in
   the shell turns `position: fixed` into a contained block — an always-present off-canvas
   panel then extends the document width and causes horizontal overflow on every page. */
.sc-settings-panel[b-tzy6hed4h4] {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 100vw;
    height: 100vh;
    background: var(--sc-surface);
    color: var(--sc-text-primary);
    z-index: 9001;
    transform: translateX(0);
    animation: scSettingsSlideIn-b-tzy6hed4h4 280ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--sc-border);
}

@keyframes scSettingsSlideIn-b-tzy6hed4h4 {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.sc-settings-panel-open[b-tzy6hed4h4] {
    transform: translateX(0);
}

.sc-settings-header[b-tzy6hed4h4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--sc-border);
}

.sc-settings-header h3[b-tzy6hed4h4] {
    margin: 0;
    font-size: var(--sc-text-lg);
    font-weight: var(--sc-font-bold);
    color: var(--sc-text-primary);
}

.sc-settings-header p[b-tzy6hed4h4] {
    margin: 4px 0 0;
    font-size: var(--sc-text-sm);
    color: var(--sc-text-secondary);
}

.sc-settings-close[b-tzy6hed4h4] {
    background: transparent;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sc-text-secondary);
    transition: background var(--sc-transition-fast);
}

.sc-settings-close:hover[b-tzy6hed4h4] {
    background: var(--sc-surface-variant);
}

.sc-settings-body[b-tzy6hed4h4] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sc-settings-section[b-tzy6hed4h4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sc-settings-label[b-tzy6hed4h4] {
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sc-text-secondary);
}

.sc-settings-options[b-tzy6hed4h4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sc-settings-options-row[b-tzy6hed4h4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sc-settings-card[b-tzy6hed4h4] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px;
    border: 1.5px solid var(--sc-border);
    border-radius: var(--sc-radius-xl);
    background: var(--sc-surface);
    color: var(--sc-text-primary);
    cursor: pointer;
    text-align: left;
    transition: all 160ms ease;
}

.sc-settings-card:hover[b-tzy6hed4h4] {
    border-color: rgba(var(--sc-primary-rgb), 0.4);
    background: rgba(var(--sc-primary-rgb), 0.04);
}

.sc-settings-card.active[b-tzy6hed4h4] {
    border-color: var(--sc-primary-500);
    background: rgba(var(--sc-primary-rgb), 0.08);
}

.sc-settings-card .rzi[b-tzy6hed4h4] {
    font-size: 22px;
    color: var(--sc-primary-500);
}

.sc-settings-card-title[b-tzy6hed4h4] {
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
    font-size: var(--sc-text-sm);
}

.sc-settings-card-desc[b-tzy6hed4h4] {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
    line-height: var(--sc-leading-tight);
}

.sc-settings-pill[b-tzy6hed4h4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--sc-border);
    border-radius: var(--sc-radius-full);
    background: var(--sc-surface);
    cursor: pointer;
    font-size: var(--sc-text-sm);
    color: var(--sc-text-secondary);
    transition: all 160ms ease;
}

.sc-settings-pill .rzi[b-tzy6hed4h4] {
    font-size: 18px;
}

.sc-settings-pill:hover[b-tzy6hed4h4] {
    border-color: rgba(var(--sc-primary-rgb), 0.4);
    color: var(--sc-text-primary);
}

.sc-settings-pill.active[b-tzy6hed4h4] {
    border-color: var(--sc-primary-500);
    background: rgba(var(--sc-primary-rgb), 0.1);
    color: var(--sc-primary-500);
    font-weight: var(--sc-font-semibold);
}

/* Sidebar theme preview pills — visually represent dark/light */
.sc-pill-dark-preview[b-tzy6hed4h4] {
    background: #101828;
    color: #ffffff;
    border-color: #1f2937;
}

.sc-pill-dark-preview:hover[b-tzy6hed4h4] {
    background: #1f2937;
    color: #ffffff;
    border-color: #374151;
}

.sc-pill-dark-preview.active[b-tzy6hed4h4] {
    background: #101828;
    color: #ffffff;
    border-color: var(--sc-primary-400);
    box-shadow: 0 0 0 2px rgba(var(--sc-primary-rgb), 0.25);
}

.sc-pill-light-preview[b-tzy6hed4h4] {
    background: var(--sc-white);
    color: #374151;
    border-color: #e5e7eb;
}

.sc-pill-light-preview:hover[b-tzy6hed4h4] {
    background: #f9fafb;
    color: #111827;
    border-color: #d1d5db;
}

.sc-pill-light-preview.active[b-tzy6hed4h4] {
    background: var(--sc-white);
    color: var(--sc-primary-500);
    border-color: var(--sc-primary-500);
    box-shadow: 0 0 0 2px rgba(var(--sc-primary-rgb), 0.25);
}

.sc-settings-hint[b-tzy6hed4h4] {
    margin: 0;
    font-size: var(--sc-text-xs);
    color: var(--sc-text-disabled);
    font-style: italic;
}

.sc-settings-coming-soon[b-tzy6hed4h4] {
    list-style: none;
    margin: 0;
    padding: 12px 14px;
    background: var(--sc-surface-variant);
    border: 1px dashed var(--sc-border);
    border-radius: var(--sc-radius-lg);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sc-settings-coming-soon li[b-tzy6hed4h4] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--sc-text-sm);
    color: var(--sc-text-secondary);
}

.sc-settings-coming-soon .rzi[b-tzy6hed4h4] {
    font-size: 18px;
    color: var(--sc-text-disabled);
}

/* Color swatch grid — compact palette picker */
.sc-color-swatches[b-tzy6hed4h4] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

.sc-color-swatch-wrapper[b-tzy6hed4h4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sc-color-swatch[b-tzy6hed4h4] {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--swatch-color, var(--sc-primary-500));
    cursor: pointer;
    padding: 0;
    transition: transform 160ms ease, box-shadow 160ms ease;
    outline: none;
}

.sc-color-swatch:hover[b-tzy6hed4h4] {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--sc-surface), 0 0 0 5px var(--swatch-color, var(--sc-primary-500));
}

.sc-color-swatch.active[b-tzy6hed4h4] {
    box-shadow: 0 0 0 3px var(--sc-surface), 0 0 0 5px var(--swatch-color, var(--sc-primary-500));
}

.sc-color-swatch.active[b-tzy6hed4h4]::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.sc-color-swatch-label[b-tzy6hed4h4] {
    font-size: 10px;
    color: var(--sc-text-secondary);
    text-align: center;
    line-height: 1;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────
   MainLayout — horizontal mode. Mirrors VerticalLayout's positioning shape
   so both modes share semantic landmarks (<header>/<main>) and the same
   theming surface. Vertical mode lives in VerticalLayout.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.sc-main-layout[b-pohl6am8xp] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    /* The shell never produces a horizontal page scrollbar. Page CONTENT is sized to fit via
       box-sizing + responsive padding, so nothing meaningful is clipped.

       CLIP, NOT HIDDEN. `overflow-x: hidden` computes overflow-y to auto, which makes this a
       scroll container -- and a scroll container between a `position: sticky` element and the
       viewport is what sticky sticks to, so every sticky rail in the portal was inert
       (CLAUDE.md §9). `clip` clips identically without creating one. Measured: with hidden a
       sticky rail scrolled 876px off the top; with clip it holds at its `top`, and neither
       produces a horizontal scrollbar. */
    overflow-x: clip;
    background: var(--sc-body-bg, var(--sc-background));
    color: var(--sc-text-primary);
}

.sc-header[b-pohl6am8xp] {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Explicit height matches the HeaderBar's own height: 88px so the
       wrapper never collapses, even if its child fails to size. */
    height: 88px;
    background: var(--sc-header-bg, var(--sc-surface));
    border-bottom: 1px solid var(--sc-border);
}

/* Constrain the header bar content to the same 1600px column the
   .sc-content-container uses below — without this, on wide viewports
   the Menu button and the breadcrumb / page heading don't line up:
   the header hugs the viewport edge while the content sits centered
   inside the 1600px box.

   ::deep is required because the .sc-header-bar inside is rendered by
   the HeaderBar component and does not receive MainLayout's scope
   attribute. Without ::deep the rule silently never matches. */
.sc-header[b-pohl6am8xp]  .sc-header-bar {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.sc-body[b-pohl6am8xp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* clip, for the same reason as .sc-app above: hidden here made this a scroll container too,
       so fixing only the outer one would have left sticky pinned to this instead. */
    overflow-x: clip;
}

.sc-content-wrapper[b-pohl6am8xp] {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.sc-content-container[b-pohl6am8xp] {
    flex: 1;
    box-sizing: border-box;
    color: var(--sc-text-primary);
    /* Frame ONLY (max-width + centering) — NO padding. Page padding is the single
       source of truth in page-layout.css (applied to the page-root `*-page`/`.sc-page`
       element), identical to the VERTICAL layout's .sc-vertical-content. This container
       used to ALSO pad (var-6/var-8), so horizontal-layout pages were double-padded
       (container gutter + page gutter) and misaligned vs the vertical layout — the
       recurring "inconsistent page padding" bug. Do NOT re-add padding here. */
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    min-height: calc(100vh - 64px);
}

.sc-layout-focused .sc-content-container[b-pohl6am8xp] {
    min-height: 100vh;
}
.sc-layout-no-sidebar[b-pohl6am8xp] { grid-template-columns: 1fr; }
/* /Layout/MegaMenu.razor.rz.scp.css */
/* Mega Menu Overlay */
.mega-menu-overlay[b-0hfp19sptj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sc-overlay-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-overlay.open[b-0hfp19sptj] {
    opacity: 1;
    visibility: visible;
}

/* Mega Menu Container */
.mega-menu[b-0hfp19sptj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sc-space-8);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px) scale(0.98);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.mega-menu.open[b-0hfp19sptj] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.mega-menu-container[b-0hfp19sptj] {
    width: 82%;
    max-width: 100%;
    max-height: 90vh;
    background: var(--sc-surface);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: 16px;
    border: 1px solid var(--sc-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--sc-text-primary);
}

/* Header */
.mega-menu-header[b-0hfp19sptj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sc-space-4) var(--sc-space-6);
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-surface-variant);
}

.mega-menu-title[b-0hfp19sptj] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    letter-spacing: -0.2px;
}

.mega-menu-search[b-0hfp19sptj] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    flex: 1;
    max-width: 400px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-2) var(--sc-space-4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-search:focus-within[b-0hfp19sptj] {
    border-color: rgba(var(--sc-primary-rgb), 0.4);
    background: var(--sc-surface);
}

.mega-menu-search .rzi[b-0hfp19sptj] {
    color: var(--sc-text-disabled);
    padding: var(--sc-space-1) var(--sc-space-3);
    font-size: 1.25rem;
}

.mega-search-input[b-0hfp19sptj] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.95rem;
    background: transparent;
    color: var(--sc-text-primary);
}

.mega-search-input[b-0hfp19sptj]::placeholder {
    color: var(--sc-text-disabled);
}

.clear-search[b-0hfp19sptj] {
    opacity: 0.5;
}

.clear-search:hover[b-0hfp19sptj] {
    opacity: 1;
}

.mega-menu-close[b-0hfp19sptj] {
    width: 38px;
    height: 38px;
    border-radius: var(--sc-radius-lg);
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--sc-text-secondary);
}

.mega-menu-close:hover[b-0hfp19sptj] {
    background: var(--sc-danger-50);
    color: var(--sc-danger-500);
    transform: rotate(90deg);
}

.mega-menu-close .rzi[b-0hfp19sptj] {
    font-size: 1.5rem;
}

/* Content */
.mega-menu-content[b-0hfp19sptj] {
    flex: 1;
    overflow-y: auto;
    padding: var(--sc-space-6);
}

/* Phase 9 — group filter chips. A horizontal scroll-snapping strip
   sitting just above the experience grid. Active chip uses the brand
   primary; resting chips are surface-tinted. */
.mega-menu-chips[b-0hfp19sptj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--sc-space-5);
}

.mega-menu-chip[b-0hfp19sptj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid var(--sc-border);
    background: var(--sc-surface);
    color: var(--sc-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.mega-menu-chip:hover[b-0hfp19sptj] {
    background: var(--sc-hover-bg);
    color: var(--sc-text-primary);
}

.mega-menu-chip:focus-visible[b-0hfp19sptj] {
    outline: 2px solid var(--sc-primary-500);
    outline-offset: 2px;
}

.mega-menu-chip-active[b-0hfp19sptj] {
    background: rgba(var(--sc-primary-rgb), 0.12);
    color: var(--sc-primary-700);
    border-color: rgba(var(--sc-primary-rgb), 0.4);
}

.mega-menu-chip .rzi[b-0hfp19sptj] {
    font-size: 16px;
}

/* Experience-Based Grid Layout */
.mega-menu-experiences[b-0hfp19sptj] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sc-space-5);
}

/* Experience Card Styles */
.mega-experience[b-0hfp19sptj] {
    background: var(--sc-surface);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--sc-border);
}

.mega-experience:hover[b-0hfp19sptj] {
    border-color: color-mix(in srgb, var(--sc-text-primary) 14%, var(--sc-border));
    box-shadow: 0 8px 24px -12px rgba(23, 24, 39, 0.22);
}

/* Calm header — the module's colour is a small icon chip + a hairline accent,
   not a full saturated bar. Violet stays the single dominant accent. --c is the
   per-group colour, set by the key classes below. */
.experience-header[b-0hfp19sptj] {
    --c: var(--sc-text-secondary);
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 10px;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--sc-text-primary);
    background: transparent;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 0;
}

/* Category-coloured top hairline — appears on card hover only, so the resting
   state stays quiet. */
.experience-header[b-0hfp19sptj]::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--c) 60%, transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mega-experience:hover .experience-header[b-0hfp19sptj]::before {
    opacity: 1;
}

/* The group icon becomes a small tinted chip in the group's accent colour. */
.experience-header .rzi[b-0hfp19sptj] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border-radius: 10px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 13%, var(--sc-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent);
    opacity: 1;
}

.experience-title[b-0hfp19sptj] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.experience-count[b-0hfp19sptj] {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--sc-text-tertiary, var(--sc-text-secondary));
    background: var(--sc-surface-variant);
    border: 1px solid var(--sc-border);
    border-radius: 999px;
    padding: 2px 8px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Per-group accent hues — now applied only as the icon-chip colour + hairline. */
.experience-header.home[b-0hfp19sptj] {
    --c: #64748b;
}

.experience-header.administration[b-0hfp19sptj] {
    --c: #2563eb;
}

.experience-header.students[b-0hfp19sptj] {
    --c: #059669;
}

.experience-header.staff[b-0hfp19sptj] {
    --c: #0d9488;
}

.experience-header.admissions[b-0hfp19sptj] {
    --c: #7c3aed;
}

.experience-header.teaching[b-0hfp19sptj] {
    --c: #4f46e5;
}

.experience-header.communication[b-0hfp19sptj] {
    --c: #d97706;
}

.experience-header.operations[b-0hfp19sptj] {
    --c: #0369a1;
}

.experience-header.wellbeing[b-0hfp19sptj] {
    --c: #db2777;
}

.experience-header.analytics[b-0hfp19sptj] {
    --c: #ea580c;
}

.experience-header.settings[b-0hfp19sptj] {
    --c: #dc2626;
}

.experience-items[b-0hfp19sptj] {
    display: flex;
    flex-direction: column;
    /* Inner padding gives the menu items breathing room from the
       experience card border. */
    padding: var(--sc-space-3);
    /* Was 0.125rem (~2px) which made items visually touch each other.
       --sc-space-1 (4px) gives the column a calm vertical rhythm while
       still feeling dense enough for a nav list. */
    gap: var(--sc-space-1);
}

/* Sub-group header inside an experience column. Phase 11 refresh:
   matches the Sidebar's calmer sentence-case treatment instead of the
   older all-caps stack that felt cramped when several sub-groups were
   shown back-to-back. Generous vertical rhythm between siblings replaces
   the previous dashed divider. */
.mega-subgroup-header[b-0hfp19sptj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--sc-space-2) var(--sc-space-3);
    margin-top: var(--sc-space-2);
    color: var(--sc-text-tertiary, var(--sc-text-secondary));
    font-size: 0.75rem;
    font-weight: var(--sc-font-semibold);
    letter-spacing: 0.01em;
    text-transform: none;
}

.experience-items>.mega-subgroup-header:first-child[b-0hfp19sptj] {
    margin-top: 0;
}

.mega-subgroup-header .rzi[b-0hfp19sptj] {
    font-size: 15px;
    opacity: 0.75;
}

.item-group[b-0hfp19sptj] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.item-group:not(:last-child)[b-0hfp19sptj] {
    margin-bottom: var(--sc-space-2);
    padding-bottom: var(--sc-space-2);
    border-bottom: 1px solid var(--sc-border);
}

.group-label[b-0hfp19sptj] {
    font-size: 0.7rem;
    font-weight: var(--sc-font-semibold);
    text-transform: uppercase;
    color: var(--sc-text-disabled);
    letter-spacing: 0.05em;
}

/* Legacy Grid Layout (keeping for backward compat) */
.mega-menu-grid[b-0hfp19sptj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sc-space-6);
}

/* Category Styles */
.mega-category[b-0hfp19sptj] {
    background: var(--sc-surface-variant);
    border-radius: var(--sc-radius-xl);
    padding: var(--sc-space-4);
    transition: all 0.2s ease;
}

.mega-category:hover[b-0hfp19sptj] {
    background: var(--sc-surface-muted);
}

.category-header[b-0hfp19sptj] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding-bottom: var(--sc-space-3);
    margin-bottom: var(--sc-space-2);
    border-bottom: 2px solid var(--sc-primary-500);
    color: var(--sc-primary-500);
    font-weight: var(--sc-font-semibold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.category-header .rzi[b-0hfp19sptj] {
    font-size: 1.1rem;
}

.category-header-clickable[b-0hfp19sptj] {
    text-decoration: none;
    cursor: pointer;
    padding: var(--sc-space-3);
    margin: -var(--sc-space-1);
    border-radius: var(--sc-radius-lg);
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: var(--sc-space-3);
    transition: all 0.2s ease;
}

.category-header-clickable:hover[b-0hfp19sptj] {
    background: var(--sc-surface);
    transform: translateY(-2px);
}

.mega-category-single[b-0hfp19sptj] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mega-category-single .category-header[b-0hfp19sptj] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.category-items[b-0hfp19sptj] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

/* Menu Item Styles */
.menu-item[b-0hfp19sptj] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    /* Padding was previously absent — items collapsed to bare text-line
       height which made each row feel cramped. Padding + a proper
       line-height now give the rows a comfortable click target and a
       consistent vertical rhythm. */
    padding: var(--sc-space-2) var(--sc-space-3);
    line-height: 1.5;
    border-radius: var(--sc-radius-lg);
    color: var(--sc-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item:hover[b-0hfp19sptj] {
    background: var(--sc-surface);
    color: var(--sc-primary-500);
    transform: translateX(3px);
}

.menu-item .rzi[b-0hfp19sptj] {
    font-size: 1.05rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.menu-item:hover .rzi[b-0hfp19sptj] {
    opacity: 1;
}

/* Search Results */
.mega-search-results[b-0hfp19sptj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sc-space-3);
}

.search-result-item[b-0hfp19sptj] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4) var(--sc-space-4);
    background: var(--sc-surface-variant);
    border-radius: var(--sc-radius-xl);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.search-result-item:hover[b-0hfp19sptj] {
    background: var(--sc-surface);
    border-color: rgba(var(--sc-primary-rgb), 0.15);
    transform: translateY(-2px);
}

.search-result-item .rzi[b-0hfp19sptj] {
    font-size: 1.5rem;
    color: var(--sc-primary-500);
    background: rgba(var(--sc-primary-rgb), 0.1);
    padding: var(--sc-space-2);
    border-radius: var(--sc-radius-lg);
}

.result-info[b-0hfp19sptj] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.result-name[b-0hfp19sptj] {
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
    font-size: 0.95rem;
}

.result-category[b-0hfp19sptj] {
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
}

.no-results[b-0hfp19sptj] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sc-space-12);
    color: var(--sc-text-disabled);
    gap: var(--sc-space-4);
}

.no-results .rzi[b-0hfp19sptj] {
    font-size: 3rem;
}

/* Footer */
.mega-menu-footer[b-0hfp19sptj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Without padding the "Press Esc to close" hint on the left and the
       Profile / Help links on the right were clipped against the menu
       edges. */
    padding: var(--sc-space-3) var(--sc-space-5);
    border-top: 1px solid var(--sc-border);
    background: var(--sc-surface-variant);
}

.footer-hint[b-0hfp19sptj] {
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
}

.footer-hint kbd[b-0hfp19sptj] {
    display: inline-block;
    padding: var(--sc-space-1) var(--sc-space-2);
    background: var(--sc-kbd-bg);
    color: var(--sc-kbd-text);
    border: 1px solid var(--sc-kbd-border);
    border-radius: var(--sc-radius-default);
    font-family: inherit;
    font-size: var(--sc-text-xs);
}

/* Wraps: at 393px the Profile / Help row ran to 408px, so the last link sat off the phone. */
.footer-actions[b-0hfp19sptj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2) var(--sc-space-4);
    min-width: 0;
}

.footer-link[b-0hfp19sptj] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    /* Was missing padding — Profile / Help links rendered with no
       clickable area around them and the icon-to-edge spacing was
       inconsistent. */
    padding: var(--sc-space-1) var(--sc-space-3);
    font-size: 0.85rem;
    line-height: 1.5;
    border-radius: var(--sc-radius-md);
    color: var(--sc-text-secondary);
    text-decoration: none;
    font-size: var(--sc-text-sm);
    transition: all 0.15s ease;
}

.footer-link:hover[b-0hfp19sptj] {
    background: var(--sc-surface);
    color: var(--sc-primary-500);
}

.footer-link .rzi[b-0hfp19sptj] {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .mega-menu-experiences[b-0hfp19sptj] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .mega-menu-experiences[b-0hfp19sptj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mega-menu[b-0hfp19sptj] {
        padding: 0;
    }

    .mega-menu-container[b-0hfp19sptj] {
        max-height: 100vh;
        border-radius: 0;
    }

    .mega-menu-experiences[b-0hfp19sptj] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sc-space-3);
    }

    .mega-menu-grid[b-0hfp19sptj] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sc-space-4);
    }

    .mega-category[b-0hfp19sptj],
    .mega-experience[b-0hfp19sptj] {
        padding: 0;
    }

    .experience-header[b-0hfp19sptj] {
        padding: var(--sc-space-3);
        font-size: 0.8rem;
    }

    .menu-item[b-0hfp19sptj] {
        padding: var(--sc-space-2) var(--sc-space-2);
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {

    .mega-menu-experiences[b-0hfp19sptj],
    .mega-menu-grid[b-0hfp19sptj] {
        grid-template-columns: 1fr;
    }
}

/* Animations */
@keyframes fadeInUp-b-0hfp19sptj {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mega-menu.open .mega-category[b-0hfp19sptj],
.mega-menu.open .mega-experience[b-0hfp19sptj] {
    animation: fadeInUp-b-0hfp19sptj 0.3s ease forwards;
}

.mega-menu.open .mega-experience:nth-child(1)[b-0hfp19sptj] {
    animation-delay: 0.02s;
}

.mega-menu.open .mega-experience:nth-child(2)[b-0hfp19sptj] {
    animation-delay: 0.04s;
}

.mega-menu.open .mega-experience:nth-child(3)[b-0hfp19sptj] {
    animation-delay: 0.06s;
}

.mega-menu.open .mega-experience:nth-child(4)[b-0hfp19sptj] {
    animation-delay: 0.08s;
}

.mega-menu.open .mega-experience:nth-child(5)[b-0hfp19sptj] {
    animation-delay: 0.1s;
}

.mega-menu.open .mega-experience:nth-child(6)[b-0hfp19sptj] {
    animation-delay: 0.12s;
}

.mega-menu.open .mega-experience:nth-child(7)[b-0hfp19sptj] {
    animation-delay: 0.14s;
}

.mega-menu.open .mega-experience:nth-child(8)[b-0hfp19sptj] {
    animation-delay: 0.16s;
}

.mega-menu.open .mega-category:nth-child(1)[b-0hfp19sptj] {
    animation-delay: 0.02s;
}

.mega-menu.open .mega-category:nth-child(2)[b-0hfp19sptj] {
    animation-delay: 0.04s;
}

.mega-menu.open .mega-category:nth-child(3)[b-0hfp19sptj] {
    animation-delay: 0.06s;
}

.mega-menu.open .mega-category:nth-child(4)[b-0hfp19sptj] {
    animation-delay: 0.08s;
}

.mega-menu.open .mega-category:nth-child(5)[b-0hfp19sptj] {
    animation-delay: 0.1s;
}

.mega-menu.open .mega-category:nth-child(6)[b-0hfp19sptj] {
    animation-delay: 0.12s;
}

.mega-menu.open .mega-category:nth-child(7)[b-0hfp19sptj] {
    animation-delay: 0.14s;
}

.mega-menu.open .mega-category:nth-child(8)[b-0hfp19sptj] {
    animation-delay: 0.16s;
}

.mega-menu.open .mega-category:nth-child(9)[b-0hfp19sptj] {
    animation-delay: 0.18s;
}

.mega-menu.open .mega-category:nth-child(10)[b-0hfp19sptj] {
    animation-delay: 0.2s;
}

/* ─────────────────────────────────────────────────────────────────────────
   H5 — Active-item indicator. Mirrors the Sidebar's "you are here" pill so
   users opening the mega menu in horizontal mode can see which experience
   they're already in. Subtle accent — the menu's job is navigation, not
   showing off.
   ───────────────────────────────────────────────────────────────────────── */
.menu-item-active[b-0hfp19sptj] {
    background: rgba(var(--sc-primary-rgb), 0.08);
    color: var(--sc-primary-700);
    font-weight: 600;
    position: relative;
}

.menu-item-active[b-0hfp19sptj]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--sc-primary-500);
}

.menu-item-active .rzi[b-0hfp19sptj] {
    color: var(--sc-primary-500);
}

/* Phase 8 — locked entitlement variant. Greyed-out and non-clickable
   with an Upgrade pill at the trailing edge of the row. */
.menu-item-locked[b-0hfp19sptj] {
    cursor: not-allowed;
    opacity: 0.6;
}

.menu-item-locked:hover[b-0hfp19sptj] {
    background: transparent;
}

.menu-upgrade-pill[b-0hfp19sptj] {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--sc-warn-bg, #fef3c7);
    color: var(--sc-warn-fg, #92400e);
    flex-shrink: 0;
}

/* Active experience — the card you're currently in gets a subtle violet ring
   (the single accent), not a coloured fill. */
.mega-experience-active[b-0hfp19sptj] {
    border-color: color-mix(in srgb, var(--sc-primary-500) 40%, var(--sc-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc-primary-500) 22%, transparent);
}

.mega-experience-active .experience-header[b-0hfp19sptj] {
    color: var(--sc-text-primary);
    box-shadow: none;
}

.experience-active-dot[b-0hfp19sptj] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sc-primary-500);
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(var(--sc-primary-rgb), 0.15);
}
/* /Layout/Sidebar.razor.rz.scp.css */
.sc-sidebar[b-o87xh4m5lq] {
    --sc-sidebar-width: 260px;
    --sc-sidebar-width-folded: 64px;
    width: var(--sc-sidebar-width);
    height: 100vh;
    background: var(--sc-surface);
    border-right: 1px solid var(--sc-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    transition: width 200ms ease;
    z-index: 100;
    overflow: hidden;
}

.sc-sidebar-folded[b-o87xh4m5lq] {
    width: var(--sc-sidebar-width-folded);
}

/* Folded mode: hide text/chevron/children, leave icons only */
.sc-sidebar-folded .sc-nav-label[b-o87xh4m5lq],
.sc-sidebar-folded .sc-nav-chevron[b-o87xh4m5lq],
.sc-sidebar-folded .sc-sidebar-brand[b-o87xh4m5lq] {
    display: none;
}

.sc-sidebar-folded .sc-nav-children[b-o87xh4m5lq] {
    display: none;
}

/* Hover-peek: folded sidebar expands to full width on hover */
.sc-sidebar-folded:hover[b-o87xh4m5lq] {
    width: var(--sc-sidebar-width);
}

.sc-sidebar-folded:hover .sc-nav-label[b-o87xh4m5lq],
.sc-sidebar-folded:hover .sc-nav-chevron[b-o87xh4m5lq],
.sc-sidebar-folded:hover .sc-sidebar-brand[b-o87xh4m5lq] {
    display: inline;
}

.sc-sidebar-folded:hover .sc-nav-children[b-o87xh4m5lq] {
    display: flex;
}

.sc-sidebar-folded:hover .sc-sidebar-header[b-o87xh4m5lq] {
    flex-direction: row;
}

.sc-sidebar-folded:hover .sc-nav-group-header[b-o87xh4m5lq] {
    justify-content: flex-start;
    padding: 9px 12px;
}

/* Right-positioned sidebar (when LayoutPreferences.Position == Right) */
.sc-vertical-layout-right .sc-sidebar[b-o87xh4m5lq] {
    border-right: none;
    border-left: 1px solid var(--sc-border);
}

.sc-sidebar-header[b-o87xh4m5lq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sc-border-light);
    /* Match the main HeaderBar's height (88px in HeaderBar.razor.css)
       so the sidebar's brand strip and the page header line up across
       the top in vertical-layout mode. Was 64px which left a visible
       24px misalignment between the two top-of-page surfaces. */
    min-height: 88px;
    height: 88px;
}

.sc-sidebar-logo[b-o87xh4m5lq] {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    flex: 1;
}

.sc-sidebar-logo img[b-o87xh4m5lq] {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.sc-sidebar-brand[b-o87xh4m5lq] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-sidebar-fold-btn[b-o87xh4m5lq] {
    background: transparent;
    border: 1px solid var(--sc-border);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sc-text-secondary);
    flex-shrink: 0;
    transition: background 120ms ease;
}

.sc-sidebar-fold-btn:hover[b-o87xh4m5lq] {
    background: var(--sc-hover-bg);
}

.sc-sidebar-folded .sc-sidebar-header[b-o87xh4m5lq] {
    padding: 12px 8px;
    flex-direction: column;
    gap: 8px;
}

.sc-sidebar-folded .sc-sidebar-logo[b-o87xh4m5lq] {
    justify-content: center;
}

.sc-sidebar-nav[b-o87xh4m5lq] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-sidebar-nav[b-o87xh4m5lq]::-webkit-scrollbar {
    width: 6px;
}

.sc-sidebar-nav[b-o87xh4m5lq]::-webkit-scrollbar-thumb {
    background: var(--sc-border);
    border-radius: 3px;
}

.sc-nav-group[b-o87xh4m5lq] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.sc-nav-group-header[b-o87xh4m5lq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--sc-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    width: 100%;
    transition: background 120ms ease, color 120ms ease;
}

.sc-nav-group-header:hover[b-o87xh4m5lq] {
    background: var(--sc-hover-bg);
    color: var(--sc-text-primary);
}

.sc-nav-group-active>.sc-nav-group-header[b-o87xh4m5lq] {
    color: var(--sc-primary-500);
}

.sc-nav-icon[b-o87xh4m5lq] {
    font-size: 20px !important;
    flex-shrink: 0;
}

/* Per-group accent hue (mirrors the mega-menu) — applied only to the group's
   icon chip + the active pill, so the rail reads calm with violet leading. */
.sc-nav-group.group-home[b-o87xh4m5lq] { --c: #64748b; }
.sc-nav-group.group-administration[b-o87xh4m5lq] { --c: #2563eb; }
.sc-nav-group.group-students[b-o87xh4m5lq] { --c: #059669; }
.sc-nav-group.group-staff[b-o87xh4m5lq] { --c: #0d9488; }
.sc-nav-group.group-admissions[b-o87xh4m5lq] { --c: #7c3aed; }
.sc-nav-group.group-teaching[b-o87xh4m5lq] { --c: #4f46e5; }
.sc-nav-group.group-communication[b-o87xh4m5lq] { --c: #d97706; }
.sc-nav-group.group-operations[b-o87xh4m5lq] { --c: #0369a1; }
.sc-nav-group.group-wellbeing[b-o87xh4m5lq] { --c: #db2777; }
.sc-nav-group.group-analytics[b-o87xh4m5lq] { --c: #ea580c; }
.sc-nav-group.group-settings[b-o87xh4m5lq] { --c: #dc2626; }

/* Group icon → small tinted chip in the group accent. Only the GROUP header
   icon is chipped; leaf-item icons (.sc-nav-item .sc-nav-icon) stay bare. */
.sc-nav-group-header .sc-nav-icon[b-o87xh4m5lq] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    color: var(--c, var(--sc-text-secondary));
    background: color-mix(in srgb, var(--c, var(--sc-text-secondary)) 13%, var(--sc-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--sc-text-secondary)) 22%, transparent);
}

.sc-nav-label[b-o87xh4m5lq] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-nav-chevron[b-o87xh4m5lq] {
    font-size: 18px !important;
    opacity: 0.6;
}

.sc-nav-children[b-o87xh4m5lq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 8px 0;
    margin-left: 14px;
    border-left: 1px solid var(--sc-border);
    padding-left: 10px;
}

/* IA-v2 sub-group header — third disclosure level inside an expanded nav
   group. Phase 11 refresh: dropped the all-caps tracking that made
   consecutive headers feel claustrophobic when stacked. Now sentence-case,
   slightly larger and roomier, with the icon and caret framing the label.
   The folded sidebar suppresses the header text (it would overflow the
   icon-only rail) and just leaves the items, which is acceptable because
   folded mode is icon-first navigation anyway. */
.sc-nav-subgroup-header[b-o87xh4m5lq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 8px;
    margin-top: 6px;
    color: var(--sc-text-tertiary, var(--sc-text-secondary));
    font-size: 0.75rem;
    font-weight: var(--sc-font-semibold);
    letter-spacing: 0.01em;
    text-transform: none;
    /* Phase 9 — header is now a button. Strip default styling so it sits
       flush with the other rows, but keep keyboard focus visible. */
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 120ms ease, color 120ms ease;
}

.sc-nav-subgroup-header:hover[b-o87xh4m5lq] {
    background: var(--sc-hover-bg);
    color: var(--sc-text-primary);
}

.sc-nav-subgroup-header:focus-visible[b-o87xh4m5lq] {
    outline: 2px solid var(--sc-primary-500);
    outline-offset: -2px;
}

/* First sub-group in a group sits flush with the group header; only
   stack space between subsequent siblings to create rhythm. */
.sc-nav-children>.sc-nav-subgroup-header:first-child[b-o87xh4m5lq] {
    margin-top: 2px;
}

.sc-nav-subgroup-caret[b-o87xh4m5lq] {
    margin-left: auto;
    font-size: 16px !important;
    opacity: 0.5;
}

.sc-nav-subgroup-header:hover .sc-nav-subgroup-caret[b-o87xh4m5lq] {
    opacity: 0.85;
}

.sc-nav-subgroup-icon[b-o87xh4m5lq] {
    font-size: 16px !important;
    opacity: 0.75;
}

.sc-sidebar-folded .sc-nav-subgroup-header[b-o87xh4m5lq] {
    display: none;
}

/* The access context did not resolve, so the menu below is NOT a statement about this user's
   permissions. Styled as a warning notice rather than a nav row so it cannot be mistaken for one
   more item, and given its own data-sc-access-state marker so a test can see it — a new access
   state with no DOM marker is invisible to the user and to the guard. */
.sc-nav-unresolved[b-o87xh4m5lq] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 8px 12px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--sc-warning-200, #fde68a);
    background: var(--sc-warning-50, #fffbeb);
    color: var(--sc-warning-700, #b45309);
    font-size: 0.75rem;
}

.sc-nav-unresolved .sc-nav-label[b-o87xh4m5lq] {
    flex: 1;
}

.sc-nav-unresolved-retry[b-o87xh4m5lq] {
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    padding: 2px 8px;
    font-size: 0.6875rem;
    cursor: pointer;
}

.sc-nav-unresolved-retry:disabled[b-o87xh4m5lq] {
    opacity: 0.6;
    cursor: default;
}

.sc-sidebar-folded .sc-nav-unresolved .sc-nav-label[b-o87xh4m5lq],
.sc-sidebar-folded .sc-nav-unresolved-retry[b-o87xh4m5lq] {
    display: none;
}

.sc-nav-item[b-o87xh4m5lq] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--sc-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: background 120ms ease, color 120ms ease;
}

.sc-nav-item:hover[b-o87xh4m5lq] {
    background: var(--sc-hover-bg);
    color: var(--sc-text-primary);
}

.sc-nav-item-active[b-o87xh4m5lq] {
    background: var(--sc-active-bg);
    color: var(--sc-primary-500) !important;
    font-weight: var(--sc-font-semibold);
}

/* Violet "you-are-here" bar, aligned to the children rail's left border. */
.sc-nav-item-active[b-o87xh4m5lq]::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sc-primary-500);
}

.sc-nav-item-active .sc-nav-icon[b-o87xh4m5lq] {
    color: var(--sc-primary-500);
}

/* Phase 8 — locked nav items: tenant lacks the entitlement. Greyed but
   still visible so the user discovers the feature, and an "Upgrade" pill
   advertises what's gated. */
.sc-nav-item-locked[b-o87xh4m5lq] {
    cursor: not-allowed;
    color: var(--sc-text-tertiary, var(--sc-text-secondary));
    opacity: 0.65;
}

.sc-nav-item-locked:hover[b-o87xh4m5lq] {
    background: transparent;
    color: var(--sc-text-tertiary, var(--sc-text-secondary));
}

.sc-nav-upgrade-pill[b-o87xh4m5lq] {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: var(--sc-font-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--sc-warn-bg, #fef3c7);
    color: var(--sc-warn-fg, #92400e);
    flex-shrink: 0;
}

/* Folded mode: icon-only group headers */
.sc-sidebar-folded .sc-nav-group-header[b-o87xh4m5lq] {
    justify-content: center;
    padding: 10px 0;
}

/* Mobile drawer */
.sc-sidebar-backdrop[b-o87xh4m5lq] {
    position: fixed;
    inset: 0;
    background: var(--sc-overlay-bg);
    z-index: 199;
    animation: scFadeIn-b-o87xh4m5lq 180ms ease;
}

@keyframes scFadeIn-b-o87xh4m5lq {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 1023px) {
    .sc-sidebar[b-o87xh4m5lq] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        z-index: 200;
        width: var(--sc-sidebar-width) !important;
    }

    .sc-vertical-layout-right .sc-sidebar[b-o87xh4m5lq] {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }

    .sc-sidebar-mobile-open[b-o87xh4m5lq] {
        transform: translateX(0) !important;
    }

    /* Folded mode irrelevant on mobile — always show full content */
    .sc-sidebar-folded .sc-nav-label[b-o87xh4m5lq],
    .sc-sidebar-folded .sc-nav-chevron[b-o87xh4m5lq],
    .sc-sidebar-folded .sc-sidebar-brand[b-o87xh4m5lq] {
        display: inline;
    }

    .sc-sidebar-folded .sc-nav-children[b-o87xh4m5lq] {
        display: flex;
    }

    .sc-sidebar-folded .sc-sidebar-header[b-o87xh4m5lq] {
        flex-direction: row;
    }

    .sc-sidebar-folded .sc-nav-group-header[b-o87xh4m5lq] {
        justify-content: flex-start;
        padding: 9px 12px;
    }
}

/* ─── Dark sidebar theme ─── */
.sc-sidebar-dark[b-o87xh4m5lq] {
    background: #101828;
    border-right-color: rgba(255, 255, 255, 0.08);
}

.sc-sidebar-dark .sc-sidebar-header[b-o87xh4m5lq] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* The foot rule matches the header rule at the top of the rail: the same faint white,
   not the light-surface token, which on #101828 reads as a hard black line. */
.sc-sidebar-dark[b-o87xh4m5lq]  .sc-build-stamp {
    border-top-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
}

/* Scoped to the fallback SchoolConnect brand icon ONLY (see Sidebar.razor) — it was applying to
   every <img> in .sc-sidebar-logo, including a real uploaded institute logo, which this filter
   flattens to a solid white shape regardless of the logo's actual colors/detail. */
.sc-sidebar-dark .sc-sidebar-logo img.sc-sidebar-logo-fallback[b-o87xh4m5lq] {
    filter: brightness(0) invert(1);
}

.sc-sidebar-dark .sc-sidebar-brand[b-o87xh4m5lq] {
    color: #ffffff;
}

.sc-sidebar-dark .sc-sidebar-fold-btn[b-o87xh4m5lq] {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
}

.sc-sidebar-dark .sc-sidebar-fold-btn:hover[b-o87xh4m5lq] {
    background: rgba(255, 255, 255, 0.08);
}

.sc-sidebar-dark .sc-nav-group-header[b-o87xh4m5lq] {
    color: rgba(255, 255, 255, 0.6);
}

.sc-sidebar-dark .sc-nav-group-header:hover[b-o87xh4m5lq] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

/* On the dark rail the light-surface chip tint reads too pale — re-tint against
   the dark ground and lift the glyph so the accent stays legible. */
.sc-sidebar-dark .sc-nav-group-header .sc-nav-icon[b-o87xh4m5lq] {
    color: color-mix(in srgb, var(--c, #94a3b8) 60%, #ffffff);
    background: color-mix(in srgb, var(--c, #94a3b8) 24%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #94a3b8) 38%, transparent);
}

.sc-sidebar-dark .sc-nav-group-active>.sc-nav-group-header[b-o87xh4m5lq] {
    color: var(--sc-primary-400, #60a5fa);
}

.sc-sidebar-dark .sc-nav-children[b-o87xh4m5lq] {
    border-left-color: rgba(255, 255, 255, 0.1);
}

.sc-sidebar-dark .sc-nav-item[b-o87xh4m5lq] {
    color: rgba(255, 255, 255, 0.6);
}

.sc-sidebar-dark .sc-nav-item:hover[b-o87xh4m5lq] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.sc-sidebar-dark .sc-nav-item-active[b-o87xh4m5lq] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sc-primary-400, #60a5fa) !important;
}

.sc-sidebar-dark .sc-nav-item-active .sc-nav-icon[b-o87xh4m5lq] {
    color: var(--sc-primary-400, #60a5fa);
}

.sc-sidebar-dark .sc-nav-subgroup-header[b-o87xh4m5lq] {
    color: rgba(255, 255, 255, 0.45);
}

.sc-sidebar-dark .sc-nav-subgroup-header:hover[b-o87xh4m5lq] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}

.sc-sidebar-dark .sc-nav-item-locked[b-o87xh4m5lq] {
    color: rgba(255, 255, 255, 0.3);
}

.sc-sidebar-dark .sc-nav-upgrade-pill[b-o87xh4m5lq] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.sc-sidebar-dark .sc-sidebar-nav[b-o87xh4m5lq]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

/* Dark sidebar + right position */
.sc-vertical-layout-right .sc-sidebar-dark[b-o87xh4m5lq] {
    border-left-color: rgba(255, 255, 255, 0.08);
    border-right-color: transparent;
}
.sc-nav-subgroup-label[b-o87xh4m5lq] { display: block; padding: var(--sc-space-2) var(--sc-space-3) 2px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-text-secondary); }

/* The version stamp sits at the FOOT of the rail: the nav grows, this stays put. */
.sc-sidebar[b-o87xh4m5lq]  .sc-build-stamp {
    margin-top: auto;
    flex: none;
}
/* /Layout/VerticalLayout.razor.rz.scp.css */
.sc-vertical-layout[b-7tr28euoux] {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    width: 100%;
    background: var(--sc-body-bg, var(--sc-background));
    color: var(--sc-text-primary);
}

.sc-vertical-layout-right[b-7tr28euoux] {
    flex-direction: row-reverse;
}

.sc-vertical-main[b-7tr28euoux] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sc-vertical-header[b-7tr28euoux] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--sc-header-bg, var(--sc-surface));
    border-bottom: 1px solid var(--sc-border);
}

.sc-vertical-content[b-7tr28euoux] {
    flex: 1;
    overflow-x: hidden;
    color: var(--sc-text-primary);
    width: 100%;
    /* Cap + centre content the same way the HORIZONTAL layout does
       (.sc-content-container in MainLayout.razor.css → max-width 1600px,
       margin auto). Without this, sidebar-layout pages stretched edge-to-edge
       on wide monitors (the dashboard looked full-bleed) and were inconsistent
       with pages that set their own .sc-page max-width (e.g. Student Directory).
       Below 1600px it stays fully responsive (width:100%); above, it centres. */
    max-width: 1600px;
    margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   H6 — Onboarding rail. Renders in the sidebar slot for authenticated users
   who don't yet have an institute. Same width as the expanded sidebar so
   the layout doesn't shift if the user finishes onboarding mid-session.
   ───────────────────────────────────────────────────────────────────────── */
.sc-onboarding-rail[b-7tr28euoux] {
    width: 280px;
    min-width: 280px;
    background: var(--sc-surface);
    border-right: 1px solid var(--sc-border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--sc-space-6) var(--sc-space-4);
}

.sc-onboarding-rail-inner[b-7tr28euoux] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-4);
    padding: var(--sc-space-5);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sc-primary-50) 0%, var(--sc-surface) 80%);
    border: 1px solid var(--sc-primary-100);
    text-align: left;
}

.sc-onboarding-rail-icon[b-7tr28euoux] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
    border-radius: 12px;
}

.sc-onboarding-rail-icon .rzi[b-7tr28euoux] {
    font-size: 1.5rem;
}

.sc-onboarding-rail-text h3[b-7tr28euoux] {
    margin: 0 0 var(--sc-space-2);
    font-size: 1rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    letter-spacing: -0.01em;
}

.sc-onboarding-rail-text p[b-7tr28euoux] {
    margin: 0;
    font-size: 0.825rem;
    line-height: 1.5;
    color: var(--sc-text-secondary);
}

.sc-onboarding-rail-cta[b-7tr28euoux] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-2);
    padding: var(--sc-space-3) var(--sc-space-4);
    background: var(--sc-primary-500);
    color: var(--sc-surface);
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

.sc-onboarding-rail-cta:hover[b-7tr28euoux] {
    background: var(--sc-primary-700);
    transform: translateY(-1px);
}

.sc-onboarding-rail-cta .rzi[b-7tr28euoux] {
    font-size: 1rem;
}

/* On narrower viewports the rail collapses to icon-only to keep the main
   content readable. Click still navigates to /onboarding. */
@media (max-width: 768px) {
    .sc-onboarding-rail[b-7tr28euoux] {
        width: 64px;
        min-width: 64px;
        padding: var(--sc-space-4) var(--sc-space-2);
    }

    .sc-onboarding-rail-text[b-7tr28euoux] {
        display: none;
    }

    .sc-onboarding-rail-cta span[b-7tr28euoux] {
        display: none;
    }

    .sc-onboarding-rail-inner[b-7tr28euoux] {
        padding: var(--sc-space-3);
        align-items: center;
    }
}
/* /Pages/Analytics/AcademicAnalytics.razor.rz.scp.css */
.academic-analytics[b-m7mo06pqht] {
    padding: var(--sc-space-6) var(--sc-space-8);
    max-width: 1600px;
    margin: 0 auto;
}

.page-header[b-m7mo06pqht] {
    margin-bottom: var(--sc-space-6);
}

.breadcrumb-nav[b-m7mo06pqht] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin-bottom: var(--sc-space-4);
    font-size: 0.875rem;
}

.breadcrumb-link[b-m7mo06pqht] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-1);
    color: var(--rz-text-secondary-color);
    text-decoration: none;
}

.breadcrumb-link:hover[b-m7mo06pqht] {
    color: var(--rz-primary);
}

.breadcrumb-separator[b-m7mo06pqht] {
    color: var(--rz-text-tertiary-color);
    font-size: 1rem;
}

.breadcrumb-current[b-m7mo06pqht] {
    color: var(--rz-text-color);
    font-weight: 500;
}

.header-content[b-m7mo06pqht] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
}

.header-title-section[b-m7mo06pqht] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.page-title[b-m7mo06pqht] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.title-icon[b-m7mo06pqht] {
    color: var(--rz-primary);
}

.page-subtitle[b-m7mo06pqht] {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.95rem;
}

.header-actions[b-m7mo06pqht] {
    display: flex;
    gap: var(--sc-space-3);
}

/* Filter Bar */
.filter-bar[b-m7mo06pqht] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
    align-items: flex-end;
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--rz-base-background-color);
    border-radius: 12px;
    border: 1px solid var(--rz-border-color);
    margin-bottom: var(--sc-space-6);
}

.filter-group[b-m7mo06pqht] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.filter-group label[b-m7mo06pqht] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
}

/* Stats Grid */
.stats-grid[b-m7mo06pqht] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sc-space-4);
    margin-bottom: var(--sc-space-6);
}

.stat-card[b-m7mo06pqht] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-5);
    border-radius: 12px;
    border: 1px solid var(--sc-border);
    background: var(--sc-surface);
}

.stat-icon[b-m7mo06pqht] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--sc-gray-200, rgba(107, 114, 128, 0.1));
}

.stat-card.success .stat-icon[b-m7mo06pqht] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.info .stat-icon[b-m7mo06pqht] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.warning .stat-icon[b-m7mo06pqht] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.purple .stat-icon[b-m7mo06pqht] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-content[b-m7mo06pqht] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.stat-value[b-m7mo06pqht] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rz-text-color);
}

.stat-label[b-m7mo06pqht] {
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
    margin-top: var(--sc-space-1);
}

.stat-trend[b-m7mo06pqht] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-1);
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: var(--sc-space-1);
}

.stat-trend .rzi[b-m7mo06pqht] {
    font-size: 16px;
}

.stat-trend.up[b-m7mo06pqht] {
    color: var(--sc-success-500);
}

.stat-trend.down[b-m7mo06pqht] {
    color: var(--sc-danger-500);
}

.stat-skeleton[b-m7mo06pqht] {
    height: 100px;
    background: var(--sc-surface-muted);
    background-size: 200% 100%;
    animation: skeleton-loading-b-m7mo06pqht 1.5s infinite;
    border-radius: 12px;
}

@keyframes skeleton-loading-b-m7mo06pqht {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Content Grid */
.content-grid[b-m7mo06pqht] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sc-space-5);
}

.main-section[b-m7mo06pqht] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-5);
}

.side-section[b-m7mo06pqht] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-5);
}

.chart-card[b-m7mo06pqht] {
    background: var(--rz-base-background-color);
    border-radius: 12px;
    padding: var(--sc-space-5);
    border: 1px solid var(--rz-border-color);
}

.chart-header[b-m7mo06pqht] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sc-space-4);
}

.chart-header h3[b-m7mo06pqht] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.chart-subnote[b-m7mo06pqht] {
    font-size: 0.8rem;
    color: var(--sc-text-secondary, #64748b);
}

.chart[b-m7mo06pqht] {
    height: 300px;
}

.pie-chart[b-m7mo06pqht] {
    height: 200px;
}

.small-chart[b-m7mo06pqht] {
    height: 200px;
}

.chart-loading[b-m7mo06pqht] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.chart-loading.small[b-m7mo06pqht] {
    height: 200px;
}

/* Performance Grid */
.performance-grid[b-m7mo06pqht] {
    width: 100%;
}

.rank-badge[b-m7mo06pqht] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rz-base-200);
    font-weight: 600;
    font-size: 0.8rem;
}

.score-display[b-m7mo06pqht] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.score-value[b-m7mo06pqht] {
    font-weight: 600;
    font-size: 0.85rem;
}

.score-bar[b-m7mo06pqht] {
    height: 4px;
    background: var(--rz-base-200);
    border-radius: 2px;
    overflow: hidden;
}

.score-fill[b-m7mo06pqht] {
    height: 100%;
    background: var(--rz-primary);
    border-radius: 2px;
}

/* Grade Distribution */
.grade-legend[b-m7mo06pqht] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-3);
    margin-top: var(--sc-space-4);
    padding-top: var(--sc-space-4);
    border-top: 1px solid var(--rz-border-color);
}

.grade-item[b-m7mo06pqht] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.grade-badge[b-m7mo06pqht] {
    padding: var(--sc-space-1) var(--sc-space-2);
    border-radius: 4px;
    color: var(--sc-text-inverse);
    font-weight: 600;
    font-size: 0.8rem;
}

.grade-count[b-m7mo06pqht] {
    font-weight: 600;
}

.grade-percent[b-m7mo06pqht] {
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
}

/* Top Performers */
.top-performers-list[b-m7mo06pqht] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.performer-item[b-m7mo06pqht] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-3);
    border-radius: 8px;
    transition: background 0.2s;
}

.performer-item:hover[b-m7mo06pqht] {
    background: var(--rz-base-100);
}

.performer-rank[b-m7mo06pqht] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rz-base-200);
    font-weight: 700;
    font-size: 0.8rem;
}

.performer-rank.gold[b-m7mo06pqht] {
    background: #ffd700;
    color: #1a1a1a;
}

.performer-rank.silver[b-m7mo06pqht] {
    background: #c0c0c0;
    color: #1a1a1a;
}

.performer-rank.bronze[b-m7mo06pqht] {
    background: #cd7f32;
    color: #ffffff;
}

.performer-info[b-m7mo06pqht] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.performer-name[b-m7mo06pqht] {
    font-weight: 600;
    font-size: 0.9rem;
}

.performer-class[b-m7mo06pqht] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.performer-score[b-m7mo06pqht] {
    font-weight: 700;
    color: var(--rz-success);
}

/* Responsive */
@media (max-width: 1024px) {
    .content-grid[b-m7mo06pqht] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .academic-analytics[b-m7mo06pqht] {
        padding: var(--sc-space-4);
    }

    .header-content[b-m7mo06pqht] {
        flex-direction: column;
    }

    .filter-bar[b-m7mo06pqht] {
        flex-direction: column;
        align-items: stretch;
    }
}
.aa-counter-grid[b-m7mo06pqht] { min-width: 0; }
/* /Pages/Analytics/AttendanceAnalytics.razor.rz.scp.css */
.attendance-analytics[b-x9dhwwkd4r] {
    padding: var(--sc-space-6) var(--sc-space-8);
    max-width: 1600px;
    margin: 0 auto;
}

.page-header[b-x9dhwwkd4r] {
    margin-bottom: var(--sc-space-6);
}

.breadcrumb-nav[b-x9dhwwkd4r] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin-bottom: var(--sc-space-4);
    font-size: 0.875rem;
}

.breadcrumb-link[b-x9dhwwkd4r] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-1);
    color: var(--rz-text-secondary-color);
    text-decoration: none;
}

.breadcrumb-link:hover[b-x9dhwwkd4r] {
    color: var(--rz-primary);
}

.breadcrumb-separator[b-x9dhwwkd4r] {
    color: var(--rz-text-tertiary-color);
    font-size: 1rem;
}

.breadcrumb-current[b-x9dhwwkd4r] {
    color: var(--rz-text-color);
    font-weight: 500;
}

.header-content[b-x9dhwwkd4r] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
}

.header-title-section[b-x9dhwwkd4r] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.page-title[b-x9dhwwkd4r] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.title-icon[b-x9dhwwkd4r] {
    color: var(--rz-success);
}

.page-subtitle[b-x9dhwwkd4r] {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.95rem;
}

.header-actions[b-x9dhwwkd4r] {
    display: flex;
    gap: var(--sc-space-3);
}

/* Filter Bar */
.filter-bar[b-x9dhwwkd4r] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
    align-items: flex-end;
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--rz-base-background-color);
    border-radius: 12px;
    border: 1px solid var(--rz-border-color);
    margin-bottom: var(--sc-space-6);
}

/* Stats Grid */
.stats-grid[b-x9dhwwkd4r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sc-space-4);
    margin-bottom: var(--sc-space-6);
}

.stat-card[b-x9dhwwkd4r] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-5);
    border-radius: 12px;
    border: 1px solid var(--sc-border);
    background: var(--sc-surface);
}

.stat-icon[b-x9dhwwkd4r] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--sc-gray-200, rgba(107, 114, 128, 0.1));
}

.stat-card.success .stat-icon[b-x9dhwwkd4r] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.warning .stat-icon[b-x9dhwwkd4r] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.info .stat-icon[b-x9dhwwkd4r] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.purple .stat-icon[b-x9dhwwkd4r] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-content[b-x9dhwwkd4r] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.stat-value[b-x9dhwwkd4r] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rz-text-color);
}

.stat-label[b-x9dhwwkd4r] {
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
    margin-top: var(--sc-space-1);
}

.stat-trend[b-x9dhwwkd4r] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-1);
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: var(--sc-space-1);
}

.stat-trend .rzi[b-x9dhwwkd4r] {
    font-size: 16px;
}

.stat-trend.up[b-x9dhwwkd4r] {
    color: var(--sc-success-500);
}

.stat-trend.down[b-x9dhwwkd4r] {
    color: var(--sc-danger-500);
}

.stat-skeleton[b-x9dhwwkd4r] {
    height: 100px;
    background: var(--sc-surface-muted);
    background-size: 200% 100%;
    animation: skeleton-loading-b-x9dhwwkd4r 1.5s infinite;
    border-radius: 12px;
}

@keyframes skeleton-loading-b-x9dhwwkd4r {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Tabs */
.analytics-tabs[b-x9dhwwkd4r] {
    background: var(--rz-base-background-color);
    border-radius: 12px;
    border: 1px solid var(--rz-border-color);
    overflow: hidden;
}

.tab-content[b-x9dhwwkd4r] {
    padding: var(--sc-space-5);
}

.charts-row[b-x9dhwwkd4r] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sc-space-5);
}

.chart-card[b-x9dhwwkd4r] {
    background: var(--rz-base-background-color);
    border-radius: 8px;
    padding: var(--sc-space-4);
}

.chart-header[b-x9dhwwkd4r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sc-space-4);
}

.chart-header h3[b-x9dhwwkd4r] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.chart-subnote[b-x9dhwwkd4r] {
    font-size: 0.8rem;
    color: var(--sc-text-secondary, #64748b);
}

.chart[b-x9dhwwkd4r] {
    height: 300px;
}

.large-chart[b-x9dhwwkd4r] {
    height: 350px;
}

.chart-loading[b-x9dhwwkd4r] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

/* Data Grids */
.class-grid[b-x9dhwwkd4r], .absence-grid[b-x9dhwwkd4r] {
    width: 100%;
}

.absence-count[b-x9dhwwkd4r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    background: var(--sc-gray-100);
    color: var(--rz-danger);
    border-radius: 100px;
    font-weight: 600;
}

/* Heatmap */
.heatmap-container[b-x9dhwwkd4r] {
    padding: var(--sc-space-4);
}

.heatmap-header[b-x9dhwwkd4r] {
    display: grid;
    grid-template-columns: 80px repeat(5, 1fr);
    gap: var(--sc-space-2);
    margin-bottom: var(--sc-space-2);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.heatmap-row[b-x9dhwwkd4r] {
    display: grid;
    grid-template-columns: 80px repeat(5, 1fr);
    gap: var(--sc-space-2);
    margin-bottom: var(--sc-space-2);
}

.week-label[b-x9dhwwkd4r] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    display: flex;
    align-items: center;
}

.heatmap-cell[b-x9dhwwkd4r] {
    aspect-ratio: 1;
    max-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sc-text-inverse);
    cursor: help;
}

.heatmap-cell.high[b-x9dhwwkd4r] {
    background: var(--sc-success-600);
}

.heatmap-cell.medium-high[b-x9dhwwkd4r] {
    background: var(--sc-success-500);
}

.heatmap-cell.medium[b-x9dhwwkd4r] {
    background: var(--sc-warning-500);
}

.heatmap-cell.medium-low[b-x9dhwwkd4r] {
    background: var(--sc-warning-500);
}

.heatmap-cell.low[b-x9dhwwkd4r] {
    background: var(--sc-danger-500);
}

.heatmap-legend[b-x9dhwwkd4r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-3);
    margin-top: var(--sc-space-6);
    padding-top: var(--sc-space-4);
    border-top: 1px solid var(--rz-border-color);
}

.legend-label[b-x9dhwwkd4r] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.legend-scale[b-x9dhwwkd4r] {
    display: flex;
    gap: 4px;
}

.scale-item[b-x9dhwwkd4r] {
    width: 24px;
    height: 16px;
    border-radius: 3px;
}

.scale-item.low[b-x9dhwwkd4r] {
    background: var(--sc-danger-500);
}

.scale-item.medium-low[b-x9dhwwkd4r] {
    background: var(--sc-warning-500);
}

.scale-item.medium[b-x9dhwwkd4r] {
    background: var(--sc-warning-500);
}

.scale-item.medium-high[b-x9dhwwkd4r] {
    background: var(--sc-success-500);
}

.scale-item.high[b-x9dhwwkd4r] {
    background: var(--sc-success-600);
}

/* Responsive */
@media (max-width: 1024px) {
    .charts-row[b-x9dhwwkd4r] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .attendance-analytics[b-x9dhwwkd4r] {
        padding: var(--sc-space-4);
    }

    .header-content[b-x9dhwwkd4r] {
        flex-direction: column;
    }

    .filter-bar[b-x9dhwwkd4r] {
        flex-direction: column;
        align-items: stretch;
    }

    .heatmap-header[b-x9dhwwkd4r],
    .heatmap-row[b-x9dhwwkd4r] {
        grid-template-columns: 60px repeat(5, 1fr);
    }
}
/* Top Absences table */
.atn-abs-table[b-x9dhwwkd4r] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.atn-abs-table thead th[b-x9dhwwkd4r] {
    text-align: left;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rz-border-color);
    white-space: nowrap;
}

.atn-abs-table tbody td[b-x9dhwwkd4r] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--rz-border-color);
    color: var(--rz-text-color);
}
/* /Pages/Analytics/Dashboard/AnalyticsDashboard.razor.rz.scp.css */
.analytics-dashboard[b-qto9kvq2el] {
    padding: var(--sc-space-6) var(--sc-space-8);
    max-width: 1600px;
    margin: 0 auto;
}

.page-header[b-qto9kvq2el] {
    margin-bottom: var(--sc-space-8);
}

.header-content[b-qto9kvq2el] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
}

.header-title-section[b-qto9kvq2el] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.page-title[b-qto9kvq2el] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.title-icon[b-qto9kvq2el] {
    color: var(--rz-primary);
}

.page-subtitle[b-qto9kvq2el] {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.95rem;
}

.header-actions[b-qto9kvq2el] {
    display: flex;
    gap: var(--sc-space-3);
}

/* KPI Cards — grid layout (display/columns/gap/spacing) now comes from the shared, global
   .sc-counter-grid rule (counter-tile.css) applied alongside this class in the markup, so every
   counter/stat row in the app — including this one — shares the exact same gap and breakpoints. */
.kpi-skeleton[b-qto9kvq2el] {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-4);
    background: var(--rz-base-background-color);
    border-radius: 12px;
    padding: var(--sc-space-5);
    border: 1px solid var(--rz-border-color);
}

.skeleton-icon[b-qto9kvq2el] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--sc-surface-muted);
    background-size: 200% 100%;
    animation: skeleton-loading-b-qto9kvq2el 1.5s infinite;
}

.skeleton-content[b-qto9kvq2el] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.skeleton-value[b-qto9kvq2el] {
    height: 28px;
    width: 80px;
    border-radius: 4px;
    background: var(--sc-surface-muted);
    background-size: 200% 100%;
    animation: skeleton-loading-b-qto9kvq2el 1.5s infinite;
}

.skeleton-label[b-qto9kvq2el] {
    height: 16px;
    width: 100px;
    border-radius: 4px;
    background: var(--sc-surface-muted);
    background-size: 200% 100%;
    animation: skeleton-loading-b-qto9kvq2el 1.5s infinite;
}

@keyframes skeleton-loading-b-qto9kvq2el {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ── Shared accent palette ────────────────────────────────────────────────
   One --accent var per card/stat drives both the icon-chip tint and the hover
   border/glow, so a colour can't drift between the two. color-mix keeps every
   soft tint theme-aware (light + dark) off the single strong token. */
.accent-blue[b-qto9kvq2el]    { --accent: var(--sc-primary-500); }
.accent-emerald[b-qto9kvq2el] { --accent: var(--sc-success-600); }
.accent-amber[b-qto9kvq2el]   { --accent: var(--sc-warning-600); }
.accent-rose[b-qto9kvq2el]    { --accent: var(--sc-danger-600); }
.accent-cyan[b-qto9kvq2el]    { --accent: var(--sc-info-600); }
.accent-violet[b-qto9kvq2el]  { --accent: #7c3aed; }

/* Quick Stats — now rendered inside a standard .sc-card/.sc-card-body (see markup), so this
   only owns the internal layout; the box/border/shadow/padding come from .sc-card-body. */
.quick-stats-row[b-qto9kvq2el] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sc-space-4);
}

/* Section-level cards below the charts grid (Quick Stats, Role dashboards, Detailed Analytics) —
   .sc-card has no margin-bottom of its own (spacing is normally owned by a flex parent's gap
   elsewhere in the app), so this page's flat stack of sections supplies it directly. */
.hub-section-card[b-qto9kvq2el] {
    margin-bottom: var(--sc-space-6);
}

.quick-stat[b-qto9kvq2el] {
    --accent: var(--sc-primary-500);
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    position: relative;
}

/* Divider between stats (not before the first) */
.quick-stat:not(:first-child)[b-qto9kvq2el]::before {
    content: "";
    position: absolute;
    left: calc(var(--sc-space-4) * -1);
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: var(--rz-border-color);
}

.quick-stat .rzi[b-qto9kvq2el] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 20px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    flex-shrink: 0;
}

.quick-stat-text[b-qto9kvq2el] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.stat-value[b-qto9kvq2el] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.stat-label[b-qto9kvq2el] {
    font-size: 0.82rem;
    color: var(--rz-text-secondary-color);
}

/* Charts Grid */
.charts-grid[b-qto9kvq2el] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sc-space-5);
    margin-bottom: var(--sc-space-6);
}

.chart[b-qto9kvq2el] {
    height: 280px;
    width: 100%;
}

.line-chart[b-qto9kvq2el] {
    height: 250px;
}

.bar-chart[b-qto9kvq2el] {
    height: 260px;
}

.pie-chart[b-qto9kvq2el] {
    height: 220px;
}

.chart-loading[b-qto9kvq2el] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
}

.chart-legend[b-qto9kvq2el] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-3);
    margin-top: var(--sc-space-4);
    padding-top: var(--sc-space-4);
    border-top: 1px solid var(--rz-border-color);
}

.legend-item[b-qto9kvq2el] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-size: 0.8rem;
}

.legend-color[b-qto9kvq2el] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-label[b-qto9kvq2el] {
    color: var(--rz-text-secondary-color);
}

.legend-value[b-qto9kvq2el] {
    color: var(--rz-text-color);
    font-weight: 600;
}

/* Activity Card */
.activity-feed[b-qto9kvq2el] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.activity-item[b-qto9kvq2el] {
    display: flex;
    gap: var(--sc-space-4);
    padding: var(--sc-space-3);
    border-radius: 8px;
    transition: background 0.2s;
}

.activity-item:hover[b-qto9kvq2el] {
    background: var(--rz-base-100);
}

.activity-icon[b-qto9kvq2el] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.activity-icon .rzi[b-qto9kvq2el] {
    font-size: 18px;
    color: var(--sc-text-inverse);
}

.activity-icon.enrollment[b-qto9kvq2el] {
    background: var(--rz-primary);
}

.activity-icon.payment[b-qto9kvq2el] {
    background: var(--rz-success);
}

.activity-icon.attendance[b-qto9kvq2el] {
    background: var(--rz-info);
}

.activity-icon.assessment[b-qto9kvq2el] {
    background: var(--rz-warning);
}

.activity-icon.staff[b-qto9kvq2el] {
    background: var(--sc-stat-purple);
}

.activity-icon.communication[b-qto9kvq2el] {
    background: var(--sc-stat-teal);
}

.activity-icon.facility[b-qto9kvq2el] {
    background: var(--sc-stat-slate);
}

.activity-icon.incident[b-qto9kvq2el] {
    background: var(--rz-danger);
}

.activity-content[b-qto9kvq2el] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.activity-title[b-qto9kvq2el] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--rz-text-color);
}

.activity-description[b-qto9kvq2el] {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-time[b-qto9kvq2el] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.activity-loading[b-qto9kvq2el] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.activity-skeleton[b-qto9kvq2el] {
    display: flex;
    gap: var(--sc-space-4);
    padding: var(--sc-space-3);
}

.activity-skeleton .skeleton-icon[b-qto9kvq2el] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.activity-skeleton .skeleton-text[b-qto9kvq2el] {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    background: var(--sc-surface-muted);
    background-size: 200% 100%;
    animation: skeleton-loading-b-qto9kvq2el 1.5s infinite;
}

/* Quick Navigation — Role dashboards / Detailed Analytics now render inside a standard
   .sc-card/.sc-card-header (icon chip + title + .sc-card-header-meta description), matching
   every other card on this page; .hub-section-card supplies the section's own spacing. */
.nav-cards[b-qto9kvq2el] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sc-space-4);
}

.nav-card[b-qto9kvq2el] {
    --accent: var(--sc-primary-500);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-6);
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.nav-card:hover[b-qto9kvq2el] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--rz-border-color));
    transform: translateY(-3px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Icon rendered as a themed chip in the card's own accent colour. */
.nav-card .rzi[b-qto9kvq2el] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 15px;
    font-size: 28px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    transition: background 0.2s ease, transform 0.2s ease;
}

.nav-card:hover .rzi[b-qto9kvq2el] {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    transform: scale(1.06);
}

.nav-card span[b-qto9kvq2el] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rz-text-color);
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .charts-grid[b-qto9kvq2el] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .analytics-dashboard[b-qto9kvq2el] {
        padding: var(--sc-space-4);
    }

    .header-content[b-qto9kvq2el] {
        flex-direction: column;
    }

    .header-actions[b-qto9kvq2el] {
        width: 100%;
        justify-content: flex-end;
    }

    .quick-stats-row[b-qto9kvq2el] {
        flex-direction: column;
        gap: var(--sc-space-4);
    }
}

@media (max-width: 480px) {
    .nav-cards[b-qto9kvq2el] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* New-vs-Withdrawn drill table (rendered in the drill panel's Body slot) */
.hub-note[b-qto9kvq2el] { font-size: 0.85rem; color: var(--rz-text-secondary-color); margin: 0; }

.hub-flow-table[b-qto9kvq2el] { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.hub-flow-table thead th[b-qto9kvq2el] {
    text-align: left; font-weight: 600; color: var(--rz-text-secondary-color);
    padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--rz-border-color); white-space: nowrap;
}
.hub-flow-table tbody td[b-qto9kvq2el] {
    padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--rz-border-color); color: var(--rz-text-color);
}

/* ── Time-range toolbar (redesign 2026-07-16) ──────────────────────────────
   Sits between the hero and the KPI band. The page now reads dashboard-first:
   data leads, launchers follow. */
.an-toolbar[b-qto9kvq2el] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
    margin-bottom: var(--sc-space-6);
}

.an-toolbar-right[b-qto9kvq2el] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    flex-wrap: wrap;
}

/* Segmented control */
.an-range[b-qto9kvq2el] {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    background: var(--sc-surface-variant);
}

.an-range-btn[b-qto9kvq2el] {
    border: 0;
    background: transparent;
    padding: 0.4375rem var(--sc-space-4);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sc-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.an-range-btn:hover:not(:disabled)[b-qto9kvq2el] { color: var(--sc-text-primary); }
.an-range-btn:disabled[b-qto9kvq2el] { opacity: 0.6; cursor: default; }

.an-range-btn.active[b-qto9kvq2el] {
    background: var(--sc-surface);
    color: var(--sc-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Freshness line — how current the numbers actually are. */
.an-freshness[b-qto9kvq2el] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
}

.an-freshness-sep[b-qto9kvq2el] { opacity: 0.5; }

.an-live-dot[b-qto9kvq2el] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sc-success-500);
    box-shadow: 0 0 0 3px var(--sc-success-50);
    flex-shrink: 0;
}

/* ── Compact launchers ─────────────────────────────────────────────────────
   The role-dashboard + detailed-analytics cards used to open the page. They are
   now demoted below the data, so they read as a quiet index rather than the
   main event: smaller nav tiles inside the standard .sc-card wrapper. */
.hub-section-card .nav-cards[b-qto9kvq2el] {
    gap: var(--sc-space-2);
}

.hub-section-card .nav-card[b-qto9kvq2el] {
    padding: var(--sc-space-3) var(--sc-space-4);
    font-size: 0.8125rem;
}

.hub-section-card .nav-card .rzi[b-qto9kvq2el] {
    font-size: 1.05rem;
}

@media (max-width: 860px) {
    .an-toolbar[b-qto9kvq2el] { align-items: flex-start; }
    .an-toolbar-right[b-qto9kvq2el] { width: 100%; }
}

.kpi-cards-row[b-qto9kvq2el] { min-width: 0; }
/* /Pages/Analytics/EnrollmentAnalytics.razor.rz.scp.css */
.enrollment-analytics[b-3i392fs925] {
    padding: var(--sc-space-6) var(--sc-space-8);
    max-width: 1600px;
    margin: 0 auto;
}

.page-header[b-3i392fs925] {
    margin-bottom: var(--sc-space-6);
}

.breadcrumb-nav[b-3i392fs925] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin-bottom: var(--sc-space-4);
    font-size: 0.875rem;
}

.breadcrumb-link[b-3i392fs925] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-1);
    color: var(--rz-text-secondary-color);
    text-decoration: none;
}

.breadcrumb-link:hover[b-3i392fs925] {
    color: var(--rz-primary);
}

.breadcrumb-separator[b-3i392fs925] {
    color: var(--rz-text-tertiary-color);
}

.breadcrumb-current[b-3i392fs925] {
    color: var(--rz-text-color);
    font-weight: 500;
}

.header-content[b-3i392fs925] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
}

.header-title-section[b-3i392fs925] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.page-title[b-3i392fs925] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.title-icon[b-3i392fs925] {
    color: var(--rz-info);
}

.page-subtitle[b-3i392fs925] {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

.header-actions[b-3i392fs925] {
    display: flex;
    gap: var(--sc-space-3);
}

/* Filter Bar */
.filter-bar[b-3i392fs925] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
    align-items: flex-end;
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--rz-base-background-color);
    border-radius: 12px;
    border: 1px solid var(--rz-border-color);
    margin-bottom: var(--sc-space-6);
}

.filter-group[b-3i392fs925] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.filter-group label[b-3i392fs925] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
}

/* Stats Grid */
.stats-grid[b-3i392fs925] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sc-space-4);
    margin-bottom: var(--sc-space-6);
}

.stat-card[b-3i392fs925] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-5);
    border-radius: 12px;
    border: 1px solid var(--sc-border);
    background: var(--sc-surface);
}

.stat-icon[b-3i392fs925] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--sc-gray-200, rgba(107, 114, 128, 0.1));
}

.stat-card.info .stat-icon[b-3i392fs925] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.success .stat-icon[b-3i392fs925] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.purple .stat-icon[b-3i392fs925] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.warning .stat-icon[b-3i392fs925] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-content[b-3i392fs925] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.stat-value[b-3i392fs925] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rz-text-color);
}

.stat-label[b-3i392fs925] {
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
    margin-top: var(--sc-space-1);
}

.stat-subtitle[b-3i392fs925] {
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
}

.stat-trend[b-3i392fs925] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-1);
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: var(--sc-space-1);
}

.stat-trend .rzi[b-3i392fs925] {
    font-size: 16px;
}

.stat-trend.up[b-3i392fs925] {
    color: var(--sc-success-500);
}

.stat-trend.down[b-3i392fs925] {
    color: var(--sc-danger-500);
}

.stat-skeleton[b-3i392fs925] {
    height: 100px;
    background: var(--sc-surface-muted);
    background-size: 200% 100%;
    animation: skeleton-loading-b-3i392fs925 1.5s infinite;
    border-radius: 12px;
}

@keyframes skeleton-loading-b-3i392fs925 {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Charts Grid */
.charts-grid[b-3i392fs925] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sc-space-5);
}

.chart-card[b-3i392fs925] {
    background: var(--rz-base-background-color);
    border-radius: 12px;
    padding: var(--sc-space-5);
    border: 1px solid var(--rz-border-color);
}

.chart-card.full-width[b-3i392fs925] {
    grid-column: 1 / -1;
}

.chart-header[b-3i392fs925] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sc-space-4);
}

.chart-header h3[b-3i392fs925] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.chart-subnote[b-3i392fs925] {
    font-size: 0.8rem;
    color: var(--sc-text-secondary, #64748b);
}

.chart[b-3i392fs925] {
    height: 280px;
}

.pie-chart[b-3i392fs925] {
    height: 200px;
}

.large-chart[b-3i392fs925] {
    height: 300px;
}

.chart-loading[b-3i392fs925] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 280px;
}

/* Gender Stats */
.gender-stats[b-3i392fs925] {
    display: flex;
    justify-content: center;
    gap: var(--sc-space-8);
    margin-top: var(--sc-space-4);
    padding-top: var(--sc-space-4);
    border-top: 1px solid var(--rz-border-color);
}

.gender-stat[b-3i392fs925] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.gender-stat .rzi[b-3i392fs925] {
    font-size: 24px;
    color: var(--rz-primary);
}

.gender-count[b-3i392fs925] {
    font-size: 1.25rem;
    font-weight: 700;
}

.gender-label[b-3i392fs925] {
    color: var(--rz-text-secondary-color);
}

/* Funnel Chart */
.funnel-chart[b-3i392fs925] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.funnel-step[b-3i392fs925] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
}

.funnel-bar[b-3i392fs925] {
    height: 36px;
    background: var(--rz-primary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    transition: width 0.3s ease;
}

.funnel-count[b-3i392fs925] {
    color: var(--sc-text-inverse);
    font-weight: 700;
    font-size: 0.9rem;
}

.funnel-info[b-3i392fs925] {
    display: flex;
    flex-direction: column;
}

.funnel-label[b-3i392fs925] {
    font-weight: 600;
    font-size: 0.9rem;
}

.funnel-rate[b-3i392fs925] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* Retention List */
.retention-list[b-3i392fs925] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.retention-item[b-3i392fs925] {
    padding: var(--sc-space-3);
    background: var(--rz-base-100);
    border-radius: 8px;
}

.retention-header[b-3i392fs925] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sc-space-2);
}

.retention-grade[b-3i392fs925] {
    font-weight: 600;
}

.retention-bar-container[b-3i392fs925] {
    height: 6px;
    background: var(--rz-base-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--sc-space-2);
}

.retention-bar[b-3i392fs925] {
    height: 100%;
    background: var(--rz-success);
    border-radius: 3px;
}

.retention-details[b-3i392fs925] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.withdrawn[b-3i392fs925] {
    color: var(--rz-danger);
}

/* Capacity Grid */
.capacity-grid[b-3i392fs925] {
    width: 100%;
}

.utilization-display[b-3i392fs925] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
}

.utilization-bar-bg[b-3i392fs925] {
    flex: 1;
    height: 8px;
    background: var(--rz-base-200);
    border-radius: 4px;
    overflow: hidden;
}

.utilization-bar[b-3i392fs925] {
    height: 100%;
    border-radius: 4px;
}

.utilization-bar.high[b-3i392fs925] {
    background: var(--rz-danger);
}

.utilization-bar.medium[b-3i392fs925] {
    background: var(--rz-success);
}

.utilization-bar.low[b-3i392fs925] {
    background: var(--rz-warning);
}

.utilization-bar.very-low[b-3i392fs925] {
    background: var(--rz-info);
}

.utilization-text[b-3i392fs925] {
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 50px;
}

.growth-display[b-3i392fs925] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-1);
    font-weight: 600;
}

.growth-display .rzi[b-3i392fs925] {
    font-size: 16px;
}

.growth-display.positive[b-3i392fs925] {
    color: var(--rz-success);
}

.growth-display.negative[b-3i392fs925] {
    color: var(--rz-danger);
}

/* Responsive */
@media (max-width: 1024px) {
    .charts-grid[b-3i392fs925] {
        grid-template-columns: 1fr;
    }

    .chart-card.full-width[b-3i392fs925] {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .enrollment-analytics[b-3i392fs925] {
        padding: var(--sc-space-4);
    }

    .header-content[b-3i392fs925] {
        flex-direction: column;
    }

    .filter-bar[b-3i392fs925] {
        flex-direction: column;
        align-items: stretch;
    }

    .gender-stats[b-3i392fs925] {
        flex-direction: column;
        gap: var(--sc-space-4);
        align-items: flex-start;
    }
}
/* /Pages/Analytics/FinancialAnalytics.razor.rz.scp.css */
.financial-analytics[b-80w0v800uw] {
    padding: var(--sc-space-6) var(--sc-space-8);
    max-width: 1600px;
    margin: 0 auto;
}

.page-header[b-80w0v800uw] {
    margin-bottom: var(--sc-space-6);
}

.breadcrumb-nav[b-80w0v800uw] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin-bottom: var(--sc-space-4);
    font-size: 0.875rem;
}

.breadcrumb-link[b-80w0v800uw] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-1);
    color: var(--rz-text-secondary-color);
    text-decoration: none;
}

.breadcrumb-link:hover[b-80w0v800uw] {
    color: var(--rz-primary);
}

.breadcrumb-separator[b-80w0v800uw] {
    color: var(--rz-text-tertiary-color);
}

.breadcrumb-current[b-80w0v800uw] {
    color: var(--rz-text-color);
    font-weight: 500;
}

.header-content[b-80w0v800uw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
}

.header-title-section[b-80w0v800uw] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.page-title[b-80w0v800uw] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.title-icon[b-80w0v800uw] {
    color: var(--rz-warning);
}

.page-subtitle[b-80w0v800uw] {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

.header-actions[b-80w0v800uw] {
    display: flex;
    gap: var(--sc-space-3);
}

/* Filter Bar */
.filter-bar[b-80w0v800uw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
    align-items: flex-end;
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--rz-base-background-color);
    border-radius: 12px;
    border: 1px solid var(--rz-border-color);
    margin-bottom: var(--sc-space-6);
}

/* Summary Cards */
.stats-grid[b-80w0v800uw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sc-space-4);
    margin-bottom: var(--sc-space-6);
}

.stat-card[b-80w0v800uw] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-5);
    border-radius: 12px;
    border: 1px solid var(--sc-border);
    background: var(--sc-surface);
}

.stat-icon[b-80w0v800uw] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--sc-gray-200, rgba(107, 114, 128, 0.1));
}

.stat-card.success .stat-icon[b-80w0v800uw] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.warning .stat-icon[b-80w0v800uw] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.info .stat-icon[b-80w0v800uw] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-card.purple .stat-icon[b-80w0v800uw] {
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
}

.stat-content[b-80w0v800uw] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.stat-value[b-80w0v800uw] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rz-text-color);
}

.stat-label[b-80w0v800uw] {
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
    margin-top: var(--sc-space-1);
}

.stat-trend[b-80w0v800uw] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-1);
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: var(--sc-space-1);
}

.stat-trend .rzi[b-80w0v800uw] {
    font-size: 16px;
}

.stat-trend.up[b-80w0v800uw] {
    color: var(--sc-success-500);
}

.stat-trend.down[b-80w0v800uw] {
    color: var(--sc-danger-500);
}

.stat-skeleton[b-80w0v800uw] {
    height: 100px;
    background: var(--sc-surface-muted);
    background-size: 200% 100%;
    animation: skeleton-loading-b-80w0v800uw 1.5s infinite;
    border-radius: 12px;
}

@keyframes skeleton-loading-b-80w0v800uw {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Charts Grid */
.charts-grid[b-80w0v800uw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sc-space-5);
}

.chart-card[b-80w0v800uw] {
    background: var(--rz-base-background-color);
    border-radius: 12px;
    padding: var(--sc-space-5);
    border: 1px solid var(--rz-border-color);
}

.chart-card.full-width[b-80w0v800uw] {
    grid-column: 1 / -1;
}

.chart-header[b-80w0v800uw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sc-space-4);
}

.chart-header h3[b-80w0v800uw] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.chart[b-80w0v800uw] {
    height: 280px;
}

.pie-chart[b-80w0v800uw] {
    height: 200px;
}

.bar-chart[b-80w0v800uw] {
    height: 250px;
}

.large-chart[b-80w0v800uw] {
    height: 300px;
}

.chart-loading[b-80w0v800uw] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 280px;
}

.chart-legend[b-80w0v800uw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-3);
    margin-top: var(--sc-space-4);
    padding-top: var(--sc-space-4);
    border-top: 1px solid var(--rz-border-color);
}

.legend-item[b-80w0v800uw] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-size: 0.8rem;
}

.legend-color[b-80w0v800uw] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-label[b-80w0v800uw] {
    color: var(--rz-text-secondary-color);
}

.legend-value[b-80w0v800uw] {
    font-weight: 600;
}

/* Payment Methods List */
.payment-methods-list[b-80w0v800uw] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
    margin-top: var(--sc-space-4);
    padding-top: var(--sc-space-4);
    border-top: 1px solid var(--rz-border-color);
}

.payment-method-item[b-80w0v800uw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sc-space-2);
    border-radius: 6px;
}

.payment-method-item:hover[b-80w0v800uw] {
    background: var(--rz-base-100);
}

.method-info[b-80w0v800uw] {
    display: flex;
    flex-direction: column;
}

.method-name[b-80w0v800uw] {
    font-weight: 600;
    font-size: 0.9rem;
}

.method-transactions[b-80w0v800uw] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.method-amount[b-80w0v800uw] {
    text-align: right;
}

.method-amount .amount[b-80w0v800uw] {
    font-weight: 600;
    display: block;
}

.method-amount .percentage[b-80w0v800uw] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* Outstanding by Grade */
.outstanding-grades[b-80w0v800uw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sc-space-4);
}

.grade-item[b-80w0v800uw] {
    padding: var(--sc-space-4);
    background: var(--rz-base-100);
    border-radius: 8px;
}

.grade-header[b-80w0v800uw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sc-space-2);
}

.grade-name[b-80w0v800uw] {
    font-weight: 600;
}

.grade-amount[b-80w0v800uw] {
    font-weight: 700;
    color: var(--rz-warning);
}

.grade-bar-container[b-80w0v800uw] {
    height: 8px;
    background: var(--rz-base-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--sc-space-2);
}

.grade-bar[b-80w0v800uw] {
    height: 100%;
    background: var(--rz-warning);
    border-radius: 4px;
}

.grade-details[b-80w0v800uw] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* Responsive */
@media (max-width: 1024px) {
    .charts-grid[b-80w0v800uw] {
        grid-template-columns: 1fr;
    }

    .chart-card.full-width[b-80w0v800uw] {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .financial-analytics[b-80w0v800uw] {
        padding: var(--sc-space-4);
    }

    .header-content[b-80w0v800uw] {
        flex-direction: column;
    }

    .filter-bar[b-80w0v800uw] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Pages/Analytics/Personas/AdmissionsDashboard.razor.rz.scp.css */
/* Funnel-stage drill table (rendered in the drill panel's Body slot) */
.ad-drill-table[b-4mh65r62o9] { width: 100%; border-collapse: collapse; font-size: 0.82rem; }

.ad-drill-table thead th[b-4mh65r62o9] {
    text-align: left;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--rz-border-color);
    white-space: nowrap;
}

.ad-drill-table tbody td[b-4mh65r62o9] {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--rz-border-color);
    color: var(--rz-text-color);
}
/* /Pages/Analytics/Personas/ExecutiveDashboard.razor.rz.scp.css */
.exec-dashboard[b-ybu1y6l5ff] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.exec-insights[b-ybu1y6l5ff] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── KPI band ─────────────────────────────────────────────────────── */
.exec-kpi-grid[b-ybu1y6l5ff] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.exec-kpi[b-ybu1y6l5ff] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.exec-kpi[b-ybu1y6l5ff]  .sc-stat-card {
    height: 100%;
}

.exec-kpi-spark[b-ybu1y6l5ff] {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0.25rem;
}

.exec-kpi-nodata[b-ybu1y6l5ff] {
    font-size: 0.72rem;
    color: var(--an-muted);
}

/* ── Two-column band (trend + capacity) ───────────────────────────── */
.exec-two-col[b-ybu1y6l5ff] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    align-items: start;
}

/* ── Panels ───────────────────────────────────────────────────────── */
.exec-panel[b-ybu1y6l5ff] {
    background: var(--an-card);
    border: 1px solid var(--an-gridline);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.exec-panel-head[b-ybu1y6l5ff] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.exec-panel-head h2[b-ybu1y6l5ff] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--an-ink);
}

.exec-panel-note[b-ybu1y6l5ff] {
    font-size: 0.8rem;
    color: var(--an-muted);
}

.exec-bullets[b-ybu1y6l5ff] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* ── Health index ─────────────────────────────────────────────────── */
.exec-health[b-ybu1y6l5ff] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.exec-health-score[b-ybu1y6l5ff] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 6.5rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: var(--an-surface);
    border: 1px solid var(--an-gridline);
}

.exec-health-score-value[b-ybu1y6l5ff] {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--an-series-1);
}

.exec-health-score-label[b-ybu1y6l5ff] {
    font-size: 0.72rem;
    color: var(--an-muted);
    text-align: center;
    margin-top: 0.35rem;
}

.exec-health-bars[b-ybu1y6l5ff] {
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

/* ── Local skeleton (scoped css from ScChart doesn't reach page markup) ── */
.sc-chart-skeleton[b-ybu1y6l5ff] {
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg,
        var(--an-surface) 25%,
        color-mix(in srgb, var(--an-surface) 60%, var(--an-gridline)) 37%,
        var(--an-surface) 63%);
    background-size: 400% 100%;
    animation: exec-shimmer-b-ybu1y6l5ff 1.4s ease infinite;
}

@keyframes exec-shimmer-b-ybu1y6l5ff {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .exec-kpi-grid[b-ybu1y6l5ff] { grid-template-columns: repeat(2, 1fr); }
    .exec-two-col[b-ybu1y6l5ff] { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .exec-kpi-grid[b-ybu1y6l5ff] { grid-template-columns: 1fr; }
}
/* /Pages/Analytics/Personas/FinanceDashboard.razor.rz.scp.css */
.finance-dashboard[b-c702vdjuxf] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.finance-insights[b-c702vdjuxf] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── KPI band ─────────────────────────────────────────────────────── */
.finance-kpi-grid[b-c702vdjuxf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.finance-kpi[b-c702vdjuxf] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.finance-kpi[b-c702vdjuxf]  .sc-stat-card {
    height: 100%;
}

.finance-kpi-spark[b-c702vdjuxf] {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0.25rem;
}

.finance-kpi-nodata[b-c702vdjuxf] {
    font-size: 0.72rem;
    color: var(--an-muted);
}

/* ── Panels ───────────────────────────────────────────────────────── */
.finance-panel[b-c702vdjuxf] {
    background: var(--an-card);
    border: 1px solid var(--an-gridline);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.finance-panel-head[b-c702vdjuxf] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.finance-panel-head h2[b-c702vdjuxf] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--an-ink);
}

.finance-panel-note[b-c702vdjuxf] {
    font-size: 0.8rem;
    color: var(--an-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.finance-nodata-inline[b-c702vdjuxf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--an-muted);
    padding: 0.5rem 0;
}

/* ── Worklist table ───────────────────────────────────────────────── */
.finance-worklist-notice[b-c702vdjuxf] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--an-body);
    background: var(--an-info-surface);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.finance-table-wrap[b-c702vdjuxf] {
    overflow-x: auto;
}

.finance-table[b-c702vdjuxf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.finance-table thead th[b-c702vdjuxf] {
    text-align: left;
    font-weight: 600;
    color: var(--an-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--an-gridline);
    white-space: nowrap;
}

.finance-table tbody td[b-c702vdjuxf] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--an-gridline);
    color: var(--an-body);
}

.finance-action-pill[b-c702vdjuxf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.finance-action-bad[b-c702vdjuxf] { background: var(--an-bad-surface); color: var(--an-bad-ink); }
.finance-action-watch[b-c702vdjuxf] { background: var(--an-watch-surface); color: var(--an-watch-ink); }
.finance-action-good[b-c702vdjuxf] { background: var(--an-good-surface); color: var(--an-good-ink); }

/* ── Local skeleton (scoped css from ScChart doesn't reach page markup) ── */
.sc-chart-skeleton[b-c702vdjuxf] {
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg,
        var(--an-surface) 25%,
        color-mix(in srgb, var(--an-surface) 60%, var(--an-gridline)) 37%,
        var(--an-surface) 63%);
    background-size: 400% 100%;
    animation: finance-shimmer-b-c702vdjuxf 1.4s ease infinite;
}

@keyframes finance-shimmer-b-c702vdjuxf {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Responsive: reflow KPI band to fewer columns then one ─────────── */
@media (max-width: 1024px) {
    .finance-kpi-grid[b-c702vdjuxf] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .finance-kpi-grid[b-c702vdjuxf] { grid-template-columns: 1fr; }
}

/* ── Bring in line with the rest of the app (2026-08) ────────────────
   The KPI tiles keep the prototype's .an-card.an-kpi structure/content
   (label/value/delta/sparkline/foot + trend colouring) but are restyled
   to the shared flat .sc-card look instead of the prototype's own
   bespoke background/border/shadow — matching every other card on this
   page (AR-aging, Collection-rate-vs-target, Cash-flow forecast) which
   now use the real .sc-card/.sc-card-header/.sc-card-body convention.
   Higher specificity than analytics-prototype.css's ".sc-analytics .an-card"
   (2 classes) so it wins regardless of stylesheet load order, without
   touching that shared file (other persona dashboards still use it as-is). */
.sc-analytics .an-card.an-kpi[b-c702vdjuxf] {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    box-shadow: none;
}

/* Consistent vertical rhythm between the KPI band, the AR-aging/bullet
   row and the cash-flow card — matches the sc-space-6 gap every other
   fixed-up analytics page (AcademicAnalytics, AttendanceAnalytics,
   AnalyticsDashboard) uses between its own stacked sections, rather than
   the prototype's tighter 16px .an-mb. */
.sc-analytics .an-mb[b-c702vdjuxf] {
    margin-bottom: var(--sc-space-6);
}

/* AR-aging drill table (rendered in the drill panel Body) */
.fin-drill-table[b-c702vdjuxf] { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.fin-drill-table thead th[b-c702vdjuxf] {
    text-align: left; font-weight: 600; color: var(--rz-text-secondary-color);
    padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--rz-border-color); white-space: nowrap;
}
.fin-drill-table tbody td[b-c702vdjuxf] {
    padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--rz-border-color); color: var(--rz-text-color);
}

.an-period-tabs[b-c702vdjuxf] { min-width: 0; }
/* /Pages/Analytics/Personas/PrincipalDashboard.razor.rz.scp.css */
.principal-dashboard[b-vtihf0s3b1] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.principal-insights[b-vtihf0s3b1] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── KPI band ─────────────────────────────────────────────────────── */
.principal-kpi-grid[b-vtihf0s3b1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.principal-kpi[b-vtihf0s3b1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.principal-kpi[b-vtihf0s3b1]  .sc-stat-card {
    height: 100%;
}

.principal-kpi-spark[b-vtihf0s3b1] {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0.25rem;
}

.principal-kpi-nodata[b-vtihf0s3b1] {
    font-size: 0.72rem;
    color: var(--an-muted);
}

/* ── Panels ───────────────────────────────────────────────────────── */
.principal-panel[b-vtihf0s3b1] {
    background: var(--an-card);
    border: 1px solid var(--an-gridline);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.principal-panel-head[b-vtihf0s3b1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.principal-panel-head h2[b-vtihf0s3b1] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--an-ink);
}

.principal-panel-note[b-vtihf0s3b1] {
    font-size: 0.8rem;
    color: var(--an-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.principal-target-swatch[b-vtihf0s3b1] {
    display: inline-block;
    width: 20px;
    height: 0;
    border-top: 2px dashed var(--an-target-line);
}

.principal-on-track[b-vtihf0s3b1] { color: var(--an-good); font-weight: 600; }
.principal-off-track[b-vtihf0s3b1] { color: var(--an-bad); font-weight: 600; }

/* ── At-risk table ────────────────────────────────────────────────── */
.principal-atrisk-notice[b-vtihf0s3b1] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--an-body);
    background: var(--an-info-surface);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.principal-table-wrap[b-vtihf0s3b1] {
    overflow-x: auto;
}

.principal-table[b-vtihf0s3b1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.principal-table thead th[b-vtihf0s3b1] {
    text-align: left;
    font-weight: 600;
    color: var(--an-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--an-gridline);
    white-space: nowrap;
}

.principal-table tbody td[b-vtihf0s3b1] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--an-gridline);
    color: var(--an-body);
}

.principal-risk-pill[b-vtihf0s3b1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.principal-risk-bad[b-vtihf0s3b1] { background: var(--an-bad-surface); color: var(--an-bad-ink); }
.principal-risk-watch[b-vtihf0s3b1] { background: var(--an-watch-surface); color: var(--an-watch-ink); }
.principal-risk-good[b-vtihf0s3b1] { background: var(--an-good-surface); color: var(--an-good-ink); }

/* ── Local skeleton (scoped css from ScChart doesn't reach page markup) ── */
.sc-chart-skeleton[b-vtihf0s3b1] {
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg,
        var(--an-surface) 25%,
        color-mix(in srgb, var(--an-surface) 60%, var(--an-gridline)) 37%,
        var(--an-surface) 63%);
    background-size: 400% 100%;
    animation: principal-shimmer-b-vtihf0s3b1 1.4s ease infinite;
}

@keyframes principal-shimmer-b-vtihf0s3b1 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Responsive: reflow KPI band to fewer columns then one ─────────── */
@media (max-width: 1024px) {
    .principal-kpi-grid[b-vtihf0s3b1] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .principal-kpi-grid[b-vtihf0s3b1] { grid-template-columns: 1fr; }
}

/* ── Drill-down: click affordance + slide-over panel ───────────────── */
.drill-hint[b-vtihf0s3b1] {
    color: var(--an-brand);
    font-weight: 600;
    cursor: default;
}

.drill-backdrop[b-vtihf0s3b1] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    z-index: 1200;
    animation: drill-fade-b-vtihf0s3b1 0.15s ease;
}

.drill-panel[b-vtihf0s3b1] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(460px, 92vw);
    background: var(--an-card);
    border-left: 1px solid var(--an-gridline);
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.16);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    animation: drill-slide-b-vtihf0s3b1 0.2s ease;
}

@keyframes drill-fade-b-vtihf0s3b1 { from { opacity: 0; } to { opacity: 1; } }
@keyframes drill-slide-b-vtihf0s3b1 { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.drill-head[b-vtihf0s3b1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--an-gridline);
}

.drill-head h3[b-vtihf0s3b1] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--an-ink);
}

.drill-close[b-vtihf0s3b1] {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--an-muted);
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
}

.drill-close:hover[b-vtihf0s3b1] { background: var(--an-surface); color: var(--an-ink); }

.drill-body[b-vtihf0s3b1] {
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* CAPS per-level bars inside the grade drill */
.drill-levels[b-vtihf0s3b1] { display: flex; flex-direction: column; gap: 0.45rem; }

.drill-level-row[b-vtihf0s3b1] {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--an-body);
}

.drill-level-name[b-vtihf0s3b1] { font-weight: 700; color: var(--an-ink); }

.drill-bar-track[b-vtihf0s3b1] {
    height: 10px;
    border-radius: 999px;
    background: var(--an-surface);
    overflow: hidden;
}

.drill-bar[b-vtihf0s3b1] { height: 100%; border-radius: 999px; min-width: 2px; }

.drill-level-val[b-vtihf0s3b1] { color: var(--an-muted); white-space: nowrap; }

/* Subject drill summary tiles */
.drill-subject-summary[b-vtihf0s3b1] {
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.drill-subject-summary > div[b-vtihf0s3b1] { display: flex; flex-direction: column; gap: 0.15rem; }
.drill-stat-val[b-vtihf0s3b1] { font-size: 1.4rem; font-weight: 700; color: var(--an-ink); }
.drill-stat-val.pos[b-vtihf0s3b1] { color: var(--an-good); }
.drill-stat-val.neg[b-vtihf0s3b1] { color: var(--an-bad); }
.drill-stat-lbl[b-vtihf0s3b1] { font-size: 0.75rem; color: var(--an-muted); }

.drill-sub-h[b-vtihf0s3b1] {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--an-ink);
}

.drill-table[b-vtihf0s3b1] { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.drill-table thead th[b-vtihf0s3b1] {
    text-align: left;
    font-weight: 600;
    color: var(--an-muted);
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--an-gridline);
    white-space: nowrap;
}
.drill-table tbody td[b-vtihf0s3b1] {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--an-gridline);
    color: var(--an-body);
}
/* /Pages/Analytics/ReportBuilder.razor.rz.scp.css */
.report-builder[b-tibt5iz64a] {
    padding: var(--sc-space-6) var(--sc-space-8);
    max-width: 1600px;
    margin: 0 auto;
}

.page-header[b-tibt5iz64a] {
    margin-bottom: var(--sc-space-6);
}

.breadcrumb-nav[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin-bottom: var(--sc-space-4);
    font-size: 0.875rem;
}

.breadcrumb-link[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-1);
    color: var(--rz-text-secondary-color);
    text-decoration: none;
}

.breadcrumb-link:hover[b-tibt5iz64a] {
    color: var(--rz-primary);
}

.breadcrumb-separator[b-tibt5iz64a] {
    color: var(--rz-text-tertiary-color);
}

.breadcrumb-current[b-tibt5iz64a] {
    color: var(--rz-text-color);
    font-weight: 500;
}

.header-title-section[b-tibt5iz64a] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.page-title[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.title-icon[b-tibt5iz64a] {
    color: var(--rz-warning);
}

.page-subtitle[b-tibt5iz64a] {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

/* Builder Layout */
.builder-layout[b-tibt5iz64a] {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: var(--sc-space-6);
    margin-bottom: var(--sc-space-6);
}

/* Config Panel */
.config-panel[b-tibt5iz64a] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-4);
}

.config-card[b-tibt5iz64a] {
    padding: var(--sc-space-5);
}

.section-title[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin: 0 0 var(--sc-space-4) 0;
    font-size: 1rem;
    font-weight: 600;
}

.section-title .rzi[b-tibt5iz64a] {
    color: var(--rz-primary);
}

.loading-placeholder[b-tibt5iz64a] {
    display: flex;
    justify-content: center;
    padding: var(--sc-space-8);
}

/* Report Types */
.report-types[b-tibt5iz64a] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.report-type-card[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-3);
    border: 2px solid var(--rz-border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-type-card:hover[b-tibt5iz64a] {
    border-color: var(--rz-primary-lighter);
    background: var(--rz-base-100);
}

.report-type-card.selected[b-tibt5iz64a] {
    border-color: var(--rz-primary);
    background: rgba(var(--rz-primary-rgb), 0.05);
}

.report-type-icon[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--rz-base-200);
    border-radius: 8px;
    flex-shrink: 0;
}

.report-type-card.selected .report-type-icon[b-tibt5iz64a] {
    background: var(--rz-primary);
}

.report-type-card.selected .report-type-icon .rzi[b-tibt5iz64a] {
    color: var(--sc-text-inverse);
}

.report-type-info[b-tibt5iz64a] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.report-type-name[b-tibt5iz64a] {
    font-weight: 600;
    font-size: 0.9rem;
}

.report-type-desc[b-tibt5iz64a] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.selected-icon[b-tibt5iz64a] {
    color: var(--rz-success);
    margin-left: auto;
}

/* Date Range */
.date-range-options[b-tibt5iz64a] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-4);
}

.quick-ranges[b-tibt5iz64a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
}

.custom-range[b-tibt5iz64a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sc-space-3);
}

.date-input[b-tibt5iz64a] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.date-input label[b-tibt5iz64a] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
}

/* Filters */
.filters-section[b-tibt5iz64a] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.filter-row[b-tibt5iz64a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sc-space-4);
}

.filter-row label[b-tibt5iz64a] {
    font-size: 0.875rem;
    font-weight: 500;
    flex-shrink: 0;
}

.filter-row .rz-dropdown[b-tibt5iz64a] {
    flex: 1;
}

/* Action Buttons */
.action-buttons[b-tibt5iz64a] {
    display: flex;
    gap: var(--sc-space-3);
    padding-top: var(--sc-space-2);
}

.action-buttons .rz-button[b-tibt5iz64a] {
    flex: 1;
}

/* Preview Panel */
.preview-panel[b-tibt5iz64a] {
    min-height: 600px;
}

.preview-card[b-tibt5iz64a] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.preview-header[b-tibt5iz64a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--sc-space-4);
    border-bottom: 1px solid var(--rz-border-color);
    margin-bottom: var(--sc-space-4);
}

.preview-header h3[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin: 0;
    font-size: 1rem;
}

.preview-content[b-tibt5iz64a] {
    flex: 1;
    overflow: auto;
}

.preview-loading[b-tibt5iz64a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    gap: var(--sc-space-4);
    color: var(--rz-text-secondary-color);
}

.preview-placeholder[b-tibt5iz64a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

.preview-placeholder .rzi[b-tibt5iz64a] {
    font-size: 64px;
    opacity: 0.3;
    margin-bottom: var(--sc-space-4);
}

.preview-placeholder h4[b-tibt5iz64a] {
    margin: 0 0 var(--sc-space-2) 0;
    color: var(--rz-text-color);
}

.preview-placeholder p[b-tibt5iz64a] {
    margin: 0;
    max-width: 300px;
}

/* Report Preview Content */
.report-preview[b-tibt5iz64a] {
    background: var(--sc-surface);
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    padding: var(--sc-space-8);
    min-height: 500px;
}

.report-header-section[b-tibt5iz64a] {
    display: flex;
    gap: var(--sc-space-4);
    padding-bottom: var(--sc-space-6);
    border-bottom: 2px solid var(--rz-primary);
    margin-bottom: var(--sc-space-6);
}

.report-logo[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--rz-primary);
    border-radius: 12px;
    flex-shrink: 0;
}

.report-logo .rzi[b-tibt5iz64a] {
    font-size: 32px;
    color: var(--sc-text-inverse);
}

.report-title-info h2[b-tibt5iz64a] {
    margin: 0 0 var(--sc-space-1) 0;
    font-size: 1.5rem;
}

.report-subtitle[b-tibt5iz64a] {
    margin: 0 0 var(--sc-space-2) 0;
    color: var(--rz-text-secondary-color);
}

.report-meta[b-tibt5iz64a] {
    display: flex;
    gap: var(--sc-space-6);
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
}

.report-meta span[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-1);
}

.report-meta .rzi[b-tibt5iz64a] {
    font-size: 14px;
}

.report-summary[b-tibt5iz64a] {
    margin-bottom: var(--sc-space-6);
}

.report-summary h4[b-tibt5iz64a] {
    margin: 0 0 var(--sc-space-3) 0;
    font-size: 1rem;
    color: var(--rz-primary);
}

.summary-grid[b-tibt5iz64a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sc-space-4);
}

.summary-item[b-tibt5iz64a] {
    display: flex;
    flex-direction: column;
    padding: var(--sc-space-3);
    background: var(--rz-base-100);
    border-radius: 8px;
}

.summary-item .summary-label[b-tibt5iz64a] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.summary-item .summary-value[b-tibt5iz64a] {
    font-size: 1.25rem;
    font-weight: 700;
}

.report-section[b-tibt5iz64a] {
    margin-bottom: var(--sc-space-6);
}

.report-section h4[b-tibt5iz64a] {
    margin: 0 0 var(--sc-space-3) 0;
    font-size: 1rem;
}

.section-table[b-tibt5iz64a] {
    overflow-x: auto;
}

.section-table table[b-tibt5iz64a] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.section-table th[b-tibt5iz64a],
.section-table td[b-tibt5iz64a] {
    padding: var(--sc-space-2) var(--sc-space-3);
    text-align: left;
    border-bottom: 1px solid var(--rz-border-color);
}

.section-table th[b-tibt5iz64a] {
    background: var(--rz-base-100);
    font-weight: 600;
}

.section-table tr:hover td[b-tibt5iz64a] {
    background: var(--sc-table-row-hover-bg);
}

.section-chart-placeholder[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-8);
    background: var(--rz-base-100);
    border-radius: 8px;
    color: var(--rz-text-secondary-color);
}

.section-text[b-tibt5iz64a] {
    margin: 0;
    line-height: 1.6;
    color: var(--rz-text-secondary-color);
}

.report-footer[b-tibt5iz64a] {
    margin-top: var(--sc-space-8);
    padding-top: var(--sc-space-4);
    border-top: 1px solid var(--rz-border-color);
    text-align: center;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

/* Recent Reports */
.recent-reports-card[b-tibt5iz64a] {
    padding: var(--sc-space-5);
}

.recent-reports-card h3[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin: 0 0 var(--sc-space-4) 0;
    font-size: 1rem;
}

.recent-reports-grid[b-tibt5iz64a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sc-space-3);
}

.recent-report-item[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-3);
    background: var(--rz-base-100);
    border-radius: 8px;
}

.report-item-icon[b-tibt5iz64a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--rz-primary);
    border-radius: 8px;
    flex-shrink: 0;
}

.report-item-icon .rzi[b-tibt5iz64a] {
    color: var(--sc-text-inverse);
    font-size: 18px;
}

.report-item-info[b-tibt5iz64a] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.report-item-name[b-tibt5iz64a] {
    font-weight: 600;
    font-size: 0.9rem;
}

.report-item-date[b-tibt5iz64a] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.report-item-actions[b-tibt5iz64a] {
    display: flex;
    gap: var(--sc-space-1);
}

.no-recent-reports[b-tibt5iz64a] {
    text-align: center;
    padding: var(--sc-space-8);
    color: var(--rz-text-secondary-color);
}

/* Responsive */
@media (max-width: 1024px) {
    .builder-layout[b-tibt5iz64a] {
        grid-template-columns: 1fr;
    }

    .preview-panel[b-tibt5iz64a] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .report-builder[b-tibt5iz64a] {
        padding: var(--sc-space-4);
    }

    .config-card[b-tibt5iz64a] {
        padding: var(--sc-space-4);
    }

    .custom-range[b-tibt5iz64a] {
        grid-template-columns: 1fr;
    }

    .report-header-section[b-tibt5iz64a] {
        flex-direction: column;
        text-align: center;
    }

    .report-meta[b-tibt5iz64a] {
        flex-direction: column;
        gap: var(--sc-space-2);
    }

    .summary-grid[b-tibt5iz64a] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Pages/Authentication/AcceptInvite.razor.rz.scp.css */
.invite-content[b-qvmyg3m3bd] {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.invite-heading h1[b-qvmyg3m3bd] {
    font-size: 26px;
    font-weight: 700;
    color: var(--sc-text-primary);
    margin: 0 0 6px;
}

.invite-subtext[b-qvmyg3m3bd] {
    font-size: 14px;
    color: var(--sc-text-secondary);
    margin: 0;
}

/* App / QR card */
.invite-card[b-qvmyg3m3bd] {
    border: 1px solid var(--sc-card-border);
    border-radius: 14px;
    padding: 18px;
    background: var(--sc-surface-variant);
    text-align: center;
}

.invite-card-title[b-qvmyg3m3bd] {
    font-size: 15px;
    font-weight: 700;
    color: var(--sc-text-primary);
    margin-bottom: 4px;
}

.invite-card-text[b-qvmyg3m3bd] {
    font-size: 13px;
    color: var(--sc-text-secondary);
    margin: 0 0 12px;
}

.invite-qr img[b-qvmyg3m3bd] {
    border: 1px solid var(--sc-card-border);
    border-radius: 10px;
    background: var(--sc-white);
    padding: 8px;
}

.invite-code[b-qvmyg3m3bd] {
    font-family: 'Courier New', monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 6px;
    color: #1a73e8;
    background: #eef3fe;
    border: 1px dashed #1a73e8;
    border-radius: 10px;
    padding: 10px 0;
    margin: 12px auto 8px;
}

.invite-stores a[b-qvmyg3m3bd] {
    color: #1a73e8;
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
}

.invite-stores span[b-qvmyg3m3bd] {
    color: var(--sc-text-muted);
    margin: 0 6px;
}

/* Divider */
.invite-divider[b-qvmyg3m3bd] {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--sc-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.invite-divider[b-qvmyg3m3bd]::before,
.invite-divider[b-qvmyg3m3bd]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.invite-divider span[b-qvmyg3m3bd] {
    padding: 0 12px;
}

/* Form */
.invite-form[b-qvmyg3m3bd] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group[b-qvmyg3m3bd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-qvmyg3m3bd] {
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-text-primary);
}

.input-wrap[b-qvmyg3m3bd] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--sc-border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--sc-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.input-wrap.focused[b-qvmyg3m3bd] {
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}

.input-wrap input[b-qvmyg3m3bd] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: var(--sc-text-primary);
    background: transparent;
}

.toggle-pw[b-qvmyg3m3bd] {
    border: none;
    background: transparent;
    color: var(--sc-text-muted);
    cursor: pointer;
    padding: 0;
}

.invite-submit[b-qvmyg3m3bd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 14px;
    /* Breathing room so the CTA isn't flush against the confirm-password field. */
    margin-top: 10px;
    background: #1a73e8;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.invite-submit:hover[b-qvmyg3m3bd] { background: #1557b0; }
.invite-submit:disabled[b-qvmyg3m3bd] { opacity: 0.7; cursor: default; }

.spinner[b-qvmyg3m3bd] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-qvmyg3m3bd 0.7s linear infinite;
}

@keyframes spin-b-qvmyg3m3bd { to { transform: rotate(360deg); } }

/* Alerts */
.invite-error[b-qvmyg3m3bd],
.invite-warning[b-qvmyg3m3bd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
}

.invite-error[b-qvmyg3m3bd] {
    background: var(--sc-danger-50);
    color: var(--sc-danger-700);
    border: 1px solid var(--sc-danger-200);
}

.invite-warning[b-qvmyg3m3bd] {
    background: var(--sc-warning-50);
    color: var(--sc-warning-800);
    border: 1px solid var(--sc-warning-200);
}

.invite-warning strong[b-qvmyg3m3bd] { display: block; }
.invite-warning span[b-qvmyg3m3bd] { font-size: 13px; }

.invite-footer[b-qvmyg3m3bd] {
    text-align: center;
    font-size: 14px;
    color: var(--sc-text-secondary);
    margin: 4px 0 0;
}

.invite-footer a[b-qvmyg3m3bd] {
    color: #1a73e8;
    font-weight: 600;
    text-decoration: none;
}
/* /Pages/Authentication/ExternalCallback.razor.rz.scp.css */
/* External sign-in interstitial — normally on screen for well under a second, so it stays
   deliberately plain: a spinner and a line of reassurance. It only earns real estate when
   something went wrong. */

.external-content[b-im8we370yi] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    text-align: center;
}

.external-progress h1[b-im8we370yi],
.external-error-state h1[b-im8we370yi] {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--sc-text-primary);
    margin: var(--sc-space-5) 0 var(--sc-space-2);
}

.external-progress p[b-im8we370yi],
.external-error-state p[b-im8we370yi] {
    font-size: 0.9rem;
    color: var(--sc-text-secondary);
    margin: 0;
}

.spinner[b-im8we370yi] {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--sc-border);
    border-top-color: var(--sc-primary-500);
    border-radius: 50%;
    animation: external-spin-b-im8we370yi 0.7s linear infinite;
}

@keyframes external-spin-b-im8we370yi {
    to { transform: rotate(360deg); }
}

/* Respect a user's reduced-motion preference: keep the affordance, drop the spin. */
@media (prefers-reduced-motion: reduce) {
    .spinner[b-im8we370yi] { animation: none; }
}

.external-error-icon[b-im8we370yi] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--sc-danger-50);
    color: var(--sc-danger-500);
}

.external-error-icon[b-im8we370yi]  .rzi {
    font-size: 1.75rem;
}

.external-back[b-im8we370yi] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin-top: var(--sc-space-6);
    padding: 0.625rem var(--sc-space-5);
    border: 1.5px solid var(--sc-border);
    border-radius: 11px;
    background: var(--sc-surface);
    color: var(--sc-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.external-back:hover[b-im8we370yi] {
    border-color: var(--sc-primary-400);
    background: var(--sc-surface-variant);
}
/* /Pages/Authentication/ForgotPassword.razor.rz.scp.css */
.forgot-content[b-msnhp43z42] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-8);
    animation: forgotIn-b-msnhp43z42 0.4s ease-out;
}

@keyframes forgotIn-b-msnhp43z42 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Top row: back-link on the left, the shared utility bar on the right. */
.forgot-topbar[b-msnhp43z42] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-4);
}

.forgot-back[b-msnhp43z42] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-1);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sc-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.forgot-back:hover[b-msnhp43z42] { color: var(--sc-text-primary); }
.forgot-back[b-msnhp43z42]  .rzi { font-size: 1.125rem; }

/* Ask + sent states share one centred layout; only the icon and copy change, so the page
   doesn't jump when it flips. */
.forgot-state[b-msnhp43z42] {
    text-align: center;
}

.forgot-state h1[b-msnhp43z42] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--sc-text-primary);
    margin: var(--sc-space-5) 0 var(--sc-space-2);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.forgot-state p[b-msnhp43z42] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--sc-text-secondary);
    margin: 0;
}

.forgot-state-icon[b-msnhp43z42] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 16px;
    background: var(--sc-primary-50, rgba(37, 99, 235, 0.08));
    color: var(--sc-primary-500);
}

/* Sent: green, because it's a confirmation rather than a prompt. */
.forgot-state-icon.success[b-msnhp43z42] {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.forgot-state-icon[b-msnhp43z42]  .rzi {
    font-size: 1.625rem;
}

.forgot-error[b-msnhp43z42] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-3) var(--sc-space-4);
    background: var(--sc-danger-50);
    border: 1px solid var(--sc-danger-200, var(--sc-danger-500));
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--sc-danger-600);
}

.forgot-error[b-msnhp43z42]  .rzi { font-size: 1.125rem; flex-shrink: 0; }

/* <EditForm> is a child component — its <form> doesn't get the
   scope attribute. ::deep from .forgot-content (scoped) pierces in. */
.forgot-content[b-msnhp43z42]  .forgot-form {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-6);
}

.form-group[b-msnhp43z42] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.form-label[b-msnhp43z42] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sc-text-primary, var(--sc-text-secondary));
}

.input-wrap[b-msnhp43z42] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 var(--sc-space-4);
    height: 46px;
    border: 1.5px solid var(--sc-border);
    border-radius: 11px;
    background: var(--sc-surface);
    transition: all 0.2s ease;
}

.input-wrap.focused[b-msnhp43z42] { border-color: var(--sc-primary-400); }
.input-wrap[b-msnhp43z42]  .rzi { font-size: 1.125rem; color: var(--sc-text-disabled); flex-shrink: 0; }
.input-wrap.focused[b-msnhp43z42]  .rzi { color: var(--sc-primary-500); }

.input-wrap input[b-msnhp43z42] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--sc-text-primary);
    font-family: inherit;
    min-width: 0;
}

.input-wrap input[b-msnhp43z42]::placeholder {
    color: var(--sc-text-disabled, var(--sc-border-strong));
}

.forgot-submit[b-msnhp43z42] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    width: 100%;
    height: 46px;
    background: var(--sc-primary-500);
    color: var(--sc-surface);
    border: none;
    border-radius: 11px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.forgot-submit:hover:not(:disabled)[b-msnhp43z42] {
    background: var(--sc-primary-700);
    transform: translateY(-1px);
}

.forgot-submit:disabled[b-msnhp43z42] { opacity: 0.7; cursor: not-allowed; }
.forgot-submit[b-msnhp43z42]  .rzi { font-size: 1.125rem; }

.spinner[b-msnhp43z42] {
    width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--sc-surface);
    border-radius: 50%;
    animation: spin-b-msnhp43z42 0.6s linear infinite;
}

@keyframes spin-b-msnhp43z42 { to { transform: rotate(360deg); } }

.forgot-footer[b-msnhp43z42] {
    font-size: 0.875rem;
    color: var(--sc-text-secondary);
    margin: var(--sc-space-2) 0 0;
}

.forgot-footer a[b-msnhp43z42] {
    color: var(--sc-primary-500);
    font-weight: 600;
    text-decoration: none;
}

.forgot-footer a:hover[b-msnhp43z42] { text-decoration: underline; }

@media (max-width: 540px) {
    .forgot-state h1[b-msnhp43z42] { font-size: 1.5rem; }
}
/* /Pages/Authentication/Login.razor.rz.scp.css */
/* Login form content. The AuthLayout owns the viewport framing and the
   brand mark at the top of the form pane — this file just styles the
   form itself. No outer wrapper, no card chrome. */

.login-content[b-ad0435pcl9] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-8);
    animation: loginIn-b-ad0435pcl9 0.4s ease-out;
}

@keyframes loginIn-b-ad0435pcl9 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Heading */
/* Small coloured line above the title — orients a returning user before they read it. */
.login-kicker[b-ad0435pcl9] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sc-primary-500);
    margin: 0 0 var(--sc-space-2);
}

.login-heading h1[b-ad0435pcl9] {
    /* Down from 2.25rem: the title now sits under a kicker and above an SSO block, so it no
       longer has to carry the page on its own. */
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--sc-text-primary);
    margin: 0 0 var(--sc-space-2);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.login-subtext[b-ad0435pcl9] {
    font-size: 0.9375rem;
    color: var(--sc-text-secondary);
    margin: 0;
}

.login-subtext a[b-ad0435pcl9] {
    color: var(--sc-primary-500);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-subtext a:hover[b-ad0435pcl9] {
    color: var(--sc-primary-700);
}

/* Error */
.login-error[b-ad0435pcl9] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-3) var(--sc-space-4);
    background: var(--sc-danger-50);
    border: 1px solid var(--sc-danger-200, var(--sc-danger-500));
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--sc-danger-600);
    animation: shakeX-b-ad0435pcl9 0.4s ease;
}

.login-error[b-ad0435pcl9]  .rzi {
    font-size: 1.125rem;
    flex-shrink: 0;
}

@keyframes shakeX-b-ad0435pcl9 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

/* Form
   IMPORTANT: <EditForm> is a Blazor child component, so the <form>
   element it renders does NOT receive Login.razor's scope attribute.
   That means plain `.login-form { ... }` rules silently fail to match.
   Everything below uses `::deep` from `.login-content` (which IS in
   Login.razor and gets the scope) so the rules pierce into the
   EditForm-rendered DOM. */
.login-content[b-ad0435pcl9]  .login-form {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-6);
}

.login-content[b-ad0435pcl9]  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.login-content[b-ad0435pcl9]  .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sc-text-primary, var(--sc-text-secondary));
}

.login-content[b-ad0435pcl9]  .form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.login-content[b-ad0435pcl9]  .forgot-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sc-primary-500);
    text-decoration: none;
}

.login-content[b-ad0435pcl9]  .forgot-link:hover {
    text-decoration: underline;
}

/* Input */
.login-content[b-ad0435pcl9]  .input-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 var(--sc-space-4);
    height: 46px;
    border: 1.5px solid var(--sc-border);
    border-radius: 11px;
    background: var(--sc-surface);
    transition: all 0.2s ease;
}

.login-content[b-ad0435pcl9]  .input-wrap.focused {
    border-color: var(--sc-primary-400);
}

.login-content[b-ad0435pcl9]  .input-wrap .rzi {
    font-size: 1.125rem;
    color: var(--sc-text-disabled);
    flex-shrink: 0;
}

.login-content[b-ad0435pcl9]  .input-wrap.focused .rzi {
    color: var(--sc-primary-500);
}

.login-content[b-ad0435pcl9]  .input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--sc-text-primary);
    font-family: inherit;
    min-width: 0;
}

.login-content[b-ad0435pcl9]  .input-wrap input::placeholder {
    color: var(--sc-text-disabled, var(--sc-border-strong));
}

/* Neutralize Chrome/Edge autofill highlight */
.login-content[b-ad0435pcl9]  .input-wrap input:-webkit-autofill,
.login-content[b-ad0435pcl9]  .input-wrap input:-webkit-autofill:hover,
.login-content[b-ad0435pcl9]  .input-wrap input:-webkit-autofill:focus,
.login-content[b-ad0435pcl9]  .input-wrap input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--sc-text-primary);
    caret-color: var(--sc-text-primary);
    transition: background-color 600000s 0s, color 600000s 0s;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
}

.login-content[b-ad0435pcl9]  .toggle-pw {
    display: grid;
    place-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--sc-text-disabled);
    transition: color 0.15s;
}

.login-content[b-ad0435pcl9]  .toggle-pw:hover {
    color: var(--sc-text-secondary);
}

.login-content[b-ad0435pcl9]  .toggle-pw .rzi {
    font-size: 1.125rem;
}

.login-content[b-ad0435pcl9]  .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
    user-select: none;
}

.login-content[b-ad0435pcl9]  .checkbox-label input {
    display: none;
}

.login-content[b-ad0435pcl9]  .check-box {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--sc-border, var(--sc-border-strong));
    border-radius: 5px;
    display: grid;
    place-items: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.login-content[b-ad0435pcl9]  .check-box .rzi {
    font-size: 0.75rem;
    color: transparent;
    transition: color 0.15s ease;
}

.login-content[b-ad0435pcl9]  .checkbox-label input:checked ~ .check-box {
    background: var(--sc-primary-500);
    border-color: var(--sc-primary-500);
}

.login-content[b-ad0435pcl9]  .checkbox-label input:checked ~ .check-box .rzi {
    color: var(--sc-surface);
}

/* Submit */
.login-content[b-ad0435pcl9]  .login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    width: 100%;
    height: 48px;
    background: var(--sc-primary-500);
    color: var(--sc-surface);
    border: none;
    border-radius: 11px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.login-content[b-ad0435pcl9]  .login-submit:hover:not(:disabled) {
    background: var(--sc-primary-700);
    transform: translateY(-1px);
}

.login-content[b-ad0435pcl9]  .login-submit:active:not(:disabled) {
    transform: translateY(0);
}

.login-content[b-ad0435pcl9]  .login-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.login-content[b-ad0435pcl9]  .login-submit .rzi {
    font-size: 1.125rem;
}

.spinner[b-ad0435pcl9] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--sc-surface);
    border-radius: 50%;
    animation: spin-b-ad0435pcl9 0.6s linear infinite;
}

@keyframes spin-b-ad0435pcl9 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 540px) {
    /* 1.5rem, not 1.875rem: this override predates the title dropping to 1.75rem for the kicker,
       so it had started making the heading LARGER on a phone than on a desktop. */
    .login-heading h1[b-ad0435pcl9] {
        font-size: 1.5rem;
    }
}

/* ── Legal + footer (redesign, docs/apps/portal/auth/mockups/login-redesign.html) ── */

.login-legal[b-ad0435pcl9] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.6;
    text-align: center;
    color: var(--sc-text-disabled);
}

.login-legal a[b-ad0435pcl9] {
    color: var(--sc-text-secondary);
    font-weight: 600;
    text-decoration: none;
}

.login-legal a:hover[b-ad0435pcl9] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The "I am stuck" link, directly under the submit button and sharing the form's centre axis.
   Replaces .login-foot, a space-between row that pinned this link to the bottom-right corner and
   put a "256-bit encrypted" padlock opposite it. Both are gone: the link belongs beside the other
   recovery link, and the badge asserted something every HTTPS site already does. */
.login-help[b-ad0435pcl9] {
    margin: 0;
    text-align: center;
    font-size: 0.8125rem;
}

.login-help a[b-ad0435pcl9] {
    /* Secondary, not disabled. This is a real way out for someone who cannot get in, so it has to
       be legible — the old .login-foot colour was --sc-text-disabled, which is the token for
       things you CANNOT act on. */
    color: var(--sc-text-secondary);
    text-decoration: none;
}

.login-help a:hover[b-ad0435pcl9] {
    color: var(--sc-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The build stamp — the quietest thing on the page by design. It is a footnote for a bug report,
   not information anyone signing in needs, so it sits last, smallest, and dimmest. Monospace
   digits because the value gets read aloud and typed into tickets. */
.login-build[b-ad0435pcl9] {
    margin: var(--sc-space-2) 0 0;
    text-align: center;
    font-size: 0.6875rem;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--sc-text-disabled);
    user-select: text;
}

.remember-row[b-ad0435pcl9] { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-2); flex-wrap: wrap; }
/* /Pages/Authentication/Logout.razor.rz.scp.css */
/* Logout page had no stylesheet. */
.logout-content[b-k4oww19gi5] { display: flex; flex-direction: column; align-items: center; gap: var(--sc-space-3); padding: var(--sc-space-8, 48px) var(--sc-space-4); text-align: center; }
/* /Pages/Authentication/Register.razor.rz.scp.css */
/* Register form content. AuthLayout owns the framing — this just styles
   the form. */

.register-content[b-pqqqsujsn1] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-8);
    animation: registerIn-b-pqqqsujsn1 0.4s ease-out;
}

@keyframes registerIn-b-pqqqsujsn1 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Heading */
/* Matches Login's kicker — the two pages are one flow and must feel like it. */
.register-kicker[b-pqqqsujsn1] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sc-primary-500);
    margin: 0 0 var(--sc-space-2);
}

.register-heading h1[b-pqqqsujsn1] {
    /* Down from 2.25rem to match Login: kicker above, SSO block below. */
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--sc-text-primary);
    margin: 0 0 var(--sc-space-2);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.register-subtext[b-pqqqsujsn1] {
    font-size: 0.9375rem;
    color: var(--sc-text-secondary);
    margin: 0;
}

.register-subtext a[b-pqqqsujsn1] {
    color: var(--sc-primary-500);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.register-subtext a:hover[b-pqqqsujsn1] {
    color: var(--sc-primary-700);
}

/* Error */
.register-error[b-pqqqsujsn1] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-3) var(--sc-space-4);
    background: var(--sc-danger-50);
    border: 1px solid var(--sc-danger-200, var(--sc-danger-500));
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--sc-danger-600);
    animation: shakeX-b-pqqqsujsn1 0.4s ease;
}

.register-error[b-pqqqsujsn1]  .rzi { font-size: 1.125rem; flex-shrink: 0; }

@keyframes shakeX-b-pqqqsujsn1 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

/* Form */
/* <EditForm> is a child component, so the rendered <form> never gets
   this file's scope attribute. Use ::deep from .register-content
   (which IS in Register.razor and is scoped) to pierce through. */
.register-content[b-pqqqsujsn1]  .register-form {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-6);
}

.name-row[b-pqqqsujsn1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sc-space-3);
}

.form-group[b-pqqqsujsn1] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
    min-width: 0;
}

.form-label[b-pqqqsujsn1] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sc-text-primary, var(--sc-text-secondary));
}

/* Input */
.input-wrap[b-pqqqsujsn1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 var(--sc-space-4);
    height: 46px;
    border: 1.5px solid var(--sc-border);
    border-radius: 11px;
    background: var(--sc-surface);
    transition: all 0.2s ease;
}

.input-wrap.focused[b-pqqqsujsn1] { border-color: var(--sc-primary-400); }

.input-wrap[b-pqqqsujsn1]  .rzi {
    font-size: 1.125rem;
    color: var(--sc-text-disabled);
    flex-shrink: 0;
}

.input-wrap.focused[b-pqqqsujsn1]  .rzi { color: var(--sc-primary-500); }

.input-wrap input[b-pqqqsujsn1] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--sc-text-primary);
    font-family: inherit;
    min-width: 0;
}

.input-wrap input[b-pqqqsujsn1]::placeholder {
    color: var(--sc-text-disabled, var(--sc-border-strong));
}

/* Neutralize Chrome/Edge autofill */
.input-wrap input:-webkit-autofill[b-pqqqsujsn1],
.input-wrap input:-webkit-autofill:hover[b-pqqqsujsn1],
.input-wrap input:-webkit-autofill:focus[b-pqqqsujsn1],
.input-wrap input:-webkit-autofill:active[b-pqqqsujsn1] {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--sc-text-primary);
    caret-color: var(--sc-text-primary);
    transition: background-color 600000s 0s, color 600000s 0s;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
}

/* Phone */
/* The visible border/pill lives on ScPhoneInput's own .phone-input-wrapper, NOT on this
   outer .phone-wrap — .phone-wrap also contains the sibling .validation-message div (the
   "Enter a valid ... phone number" error), and bordering the outer element drew that box
   around the error text too, making it look like it rendered inside the input instead of
   below it. .phone-wrap itself is now just an unstyled layout container. */
.phone-wrap[b-pqqqsujsn1] {
    /* NO overflow:hidden here. ScPhoneInput's country list is absolutely positioned at
       top:100% — i.e. outside this box — so clipping the overflow made picking a country
       impossible: the panel rendered and was immediately clipped away. */
}

.phone-wrap[b-pqqqsujsn1]  .sc-phone-input .phone-input-wrapper {
    border: 1.5px solid var(--sc-border);
    border-radius: 11px;
    transition: all 0.2s ease;
}

.phone-wrap.focused[b-pqqqsujsn1]  .sc-phone-input .phone-input-wrapper {
    border-color: var(--sc-primary-400);
}

.phone-wrap[b-pqqqsujsn1]  .sc-phone-input.has-error .phone-input-wrapper {
    border-color: var(--rz-danger, var(--sc-danger-500));
}

/* These target ScPhoneInput's real class names. The rules here previously addressed
   .country-code-dropdown / .phone-number-input, which the component has never rendered
   (it uses .country-selector / .phone-text-input) — so none of this styling applied. */
.phone-wrap[b-pqqqsujsn1]  .sc-phone-input .country-selector,
.phone-wrap[b-pqqqsujsn1]  .sc-phone-input .phone-text-input {
    height: 43px;
    font-size: 0.9rem;
    font-family: inherit;
}

.phone-wrap[b-pqqqsujsn1]  .sc-phone-input .country-selector {
    background: var(--sc-surface-alt, var(--sc-surface-variant));
    border-radius: 11px 0 0 11px;
}

/* Password hints */
.pw-hints[b-pqqqsujsn1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2) var(--sc-space-3);
    margin-top: var(--sc-space-2);
}

.pw-hint[b-pqqqsujsn1] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-1);
    font-size: 0.75rem;
    color: var(--sc-text-disabled);
    transition: color 0.2s ease;
}

.pw-hint[b-pqqqsujsn1]  .rzi { font-size: 0.875rem; }
.pw-hint.met[b-pqqqsujsn1] { color: var(--sc-success-600); }

/* An unmet rule is an ERROR, not an absence: grey read as "not yet", so people submitted and
   met a dead button instead. Only applied once something has been typed. */
.pw-hint.unmet[b-pqqqsujsn1] {
    color: var(--sc-danger-600);
    font-weight: 600;
}

/* Password toggle */
.toggle-pw[b-pqqqsujsn1] {
    display: grid;
    place-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--sc-text-disabled);
    transition: color 0.15s;
}

.toggle-pw:hover[b-pqqqsujsn1] { color: var(--sc-text-secondary); }
.toggle-pw[b-pqqqsujsn1]  .rzi { font-size: 1.125rem; }

/* Terms acceptance toggle switch.
   Single source of truth: the switch is a plain button bound to
   registerModel.AcceptTerms via @onclick. There is NO native checkbox, so the
   visual state can never diverge from the model the way the old checkbox did
   (browser painting native :checked before Blazor captured the @bind onchange). */
.terms-row[b-pqqqsujsn1] {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-2);
    /* form gap owns vertical spacing — no margin */
}

.terms-text[b-pqqqsujsn1] {
    font-size: 0.8125rem;
    color: var(--sc-text-secondary);
    line-height: 1.5;
    user-select: none;
}

.terms-switch[b-pqqqsujsn1] {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin-top: 1px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 0;
}

.switch-track[b-pqqqsujsn1] {
    display: inline-block;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--sc-border-strong, var(--sc-border));
    transition: background 0.18s ease;
    position: relative;
}

.switch-thumb[b-pqqqsujsn1] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sc-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease;
}

.terms-switch.on .switch-track[b-pqqqsujsn1] {
    background: var(--sc-primary-500);
}

.terms-switch.on .switch-thumb[b-pqqqsujsn1] {
    transform: translateX(16px);
}

.terms-switch:focus-visible .switch-track[b-pqqqsujsn1] {
    outline: 2px solid var(--sc-primary-500);
    outline-offset: 2px;
}

.terms-link[b-pqqqsujsn1] {
    color: var(--sc-primary-500);
    text-decoration: none;
    font-weight: 500;
}

.terms-link:hover[b-pqqqsujsn1] { text-decoration: underline; }

/* Submit */
.register-submit[b-pqqqsujsn1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    width: 100%;
    height: 48px;
    background: var(--sc-primary-500);
    color: var(--sc-surface);
    border: none;
    border-radius: 11px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.register-submit:hover:not(:disabled)[b-pqqqsujsn1] {
    background: var(--sc-primary-700);
    transform: translateY(-1px);
}

.register-submit:active:not(:disabled)[b-pqqqsujsn1] { transform: translateY(0); }
/* 0.7 read as enabled, so people clicked a dead button and reported it as broken. */
.register-submit:disabled[b-pqqqsujsn1] {
    opacity: 1;
    background: var(--sc-gray-200);
    color: var(--sc-text-disabled);
    cursor: not-allowed;
}

/* A field's error, under that field. One block at the bottom of the form said "Enter your first
   name" before anybody had typed anything, which is an accusation on arrival. */
.field-error[b-pqqqsujsn1] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-1);
    margin: var(--sc-space-1) 0 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sc-danger-600);
}

.field-error[b-pqqqsujsn1]  .rzi { font-size: 0.875rem; }
.register-submit[b-pqqqsujsn1]  .rzi { font-size: 1.125rem; }

.spinner[b-pqqqsujsn1] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--sc-surface);
    border-radius: 50%;
    animation: spin-b-pqqqsujsn1 0.6s linear infinite;
}

@keyframes spin-b-pqqqsujsn1 { to { transform: rotate(360deg); } }

@media (max-width: 540px) {
    .register-heading h1[b-pqqqsujsn1] { font-size: 1.5rem; }
    .name-row[b-pqqqsujsn1] { grid-template-columns: 1fr; gap: var(--sc-space-5); }
}
/* /Pages/Authentication/ResetPassword.razor.rz.scp.css */
.reset-content[b-4al7i0ptbq] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-8);
    animation: resetIn-b-4al7i0ptbq 0.4s ease-out;
}

@keyframes resetIn-b-4al7i0ptbq {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reset-heading h1[b-4al7i0ptbq] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    margin: 0 0 var(--sc-space-2);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.reset-subtext[b-4al7i0ptbq] {
    font-size: 0.9375rem;
    color: var(--sc-text-secondary);
    margin: 0;
}

.reset-success[b-4al7i0ptbq],
.reset-warning[b-4al7i0ptbq],
.reset-error[b-4al7i0ptbq] {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-3);
    padding: var(--sc-space-4);
    border-radius: 12px;
}

.reset-success[b-4al7i0ptbq] {
    background: var(--sc-success-50);
    border: 1px solid var(--sc-success-200, var(--sc-success-500));
}

.reset-success[b-4al7i0ptbq]  .rzi {
    font-size: 1.5rem;
    color: var(--sc-success-600);
    flex-shrink: 0;
}

.reset-warning[b-4al7i0ptbq] {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.reset-warning[b-4al7i0ptbq]  .rzi {
    font-size: 1.5rem;
    color: var(--sc-warning-600, #d97706);
    flex-shrink: 0;
}

.reset-error[b-4al7i0ptbq] {
    align-items: center;
    background: var(--sc-danger-50);
    border: 1px solid var(--sc-danger-200, var(--sc-danger-500));
    padding: var(--sc-space-3) var(--sc-space-4);
    font-size: 0.85rem;
    color: var(--sc-danger-600);
}

.reset-error[b-4al7i0ptbq]  .rzi { font-size: 1.125rem; flex-shrink: 0; }

.reset-success div[b-4al7i0ptbq],
.reset-warning div[b-4al7i0ptbq] { display: flex; flex-direction: column; gap: 2px; }
.reset-success strong[b-4al7i0ptbq],
.reset-warning strong[b-4al7i0ptbq] { color: var(--sc-text-primary); font-weight: 600; font-size: 0.9375rem; }
.reset-success span[b-4al7i0ptbq],
.reset-warning span[b-4al7i0ptbq] { color: var(--sc-text-secondary); font-size: 0.85rem; line-height: 1.5; }

/* <EditForm> is a child component — its <form> doesn't get the
   scope attribute. ::deep from .reset-content (scoped) pierces in. */
.reset-content[b-4al7i0ptbq]  .reset-form {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-6);
}

.form-group[b-4al7i0ptbq] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.form-label[b-4al7i0ptbq] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sc-text-primary, var(--sc-text-secondary));
}

.input-wrap[b-4al7i0ptbq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 var(--sc-space-4);
    height: 46px;
    border: 1.5px solid var(--sc-border);
    border-radius: 11px;
    background: var(--sc-surface);
    transition: all 0.2s ease;
}

.input-wrap.focused[b-4al7i0ptbq] { border-color: var(--sc-primary-400); }
.input-wrap[b-4al7i0ptbq]  .rzi { font-size: 1.125rem; color: var(--sc-text-disabled); flex-shrink: 0; }
.input-wrap.focused[b-4al7i0ptbq]  .rzi { color: var(--sc-primary-500); }

.input-wrap input[b-4al7i0ptbq] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--sc-text-primary);
    font-family: inherit;
    min-width: 0;
}

.input-wrap input[b-4al7i0ptbq]::placeholder {
    color: var(--sc-text-disabled, var(--sc-border-strong));
}

.toggle-pw[b-4al7i0ptbq] {
    display: grid;
    place-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--sc-text-disabled);
    transition: color 0.15s;
}

.toggle-pw:hover[b-4al7i0ptbq] { color: var(--sc-text-secondary); }
.toggle-pw[b-4al7i0ptbq]  .rzi { font-size: 1.125rem; }

.reset-submit[b-4al7i0ptbq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    width: 100%;
    height: 46px;
    background: var(--sc-primary-500);
    color: var(--sc-surface);
    border: none;
    border-radius: 11px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.reset-submit:hover:not(:disabled)[b-4al7i0ptbq] {
    background: var(--sc-primary-700);
    transform: translateY(-1px);
}

.reset-submit:disabled[b-4al7i0ptbq] { opacity: 0.7; cursor: not-allowed; }
.reset-submit[b-4al7i0ptbq]  .rzi { font-size: 1.125rem; }

.spinner[b-4al7i0ptbq] {
    width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--sc-surface);
    border-radius: 50%;
    animation: spin-b-4al7i0ptbq 0.6s linear infinite;
}

@keyframes spin-b-4al7i0ptbq { to { transform: rotate(360deg); } }

.reset-footer[b-4al7i0ptbq] {
    font-size: 0.875rem;
    color: var(--sc-text-secondary);
    margin: var(--sc-space-2) 0 0;
}

.reset-footer a[b-4al7i0ptbq] {
    color: var(--sc-primary-500);
    font-weight: 600;
    text-decoration: none;
}

.reset-footer a:hover[b-4al7i0ptbq] { text-decoration: underline; }

@media (max-width: 540px) {
    .reset-heading h1[b-4al7i0ptbq] { font-size: 1.875rem; }
}
/* /Pages/Authentication/SignedOut.razor.rz.scp.css */
.signedout-content[b-ftv3mgeqxn] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-6);
    /* Right pane no longer carries a logo, so the confirmation content
       is centered on its own for a balanced, focused layout. Children stay
       full-width (default stretch) so the buttons/tip keep their width;
       only the text is centered. */
    text-align: center;
    animation: signedoutIn-b-ftv3mgeqxn 0.4s ease-out;
}

.signed-out-card[b-ftv3mgeqxn] {
    background: var(--sc-surface);
    border-radius: 16px;
    border: 1px solid var(--sc-border);
    /* NOTE: --sc-space-9 is NOT defined in design-tokens.css. Using it in a
       shorthand makes the whole `padding` declaration invalid and the card
       renders with zero padding. Stick to defined tokens (6/8/10/12). */
    padding: var(--sc-space-10) var(--sc-space-8);
    max-width: 460px;
    width: 100%;
    text-align: center;
    animation: cardSlideIn 0.45s ease-out;
}

@keyframes signedoutIn-b-ftv3mgeqxn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The old `.signedout-badge` + `.badge-ring` + `.badge-icon` rules
   (plus the `ringPulse` keyframes) were retired when the logout-icon
   badge was removed in favour of spinning the AuthLayout brand mark
   on this route. See `.sc-auth-brand-spin` in AuthLayout.razor.css. */
.signedout-heading h1[b-ftv3mgeqxn] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    margin: 0 0 var(--sc-space-2);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.signedout-subtext[b-ftv3mgeqxn] {
    font-size: 0.9375rem;
    color: var(--sc-text-secondary);
    margin: 0;
    line-height: 1.55;
}

.signedout-actions[b-ftv3mgeqxn] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.signedout-primary[b-ftv3mgeqxn],
.signedout-ghost[b-ftv3mgeqxn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    width: 100%;
    height: 46px;
    border-radius: 11px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.signedout-primary[b-ftv3mgeqxn] {
    background: var(--sc-primary-500);
    color: var(--sc-surface);
    border: none;
}

.signedout-primary:hover[b-ftv3mgeqxn] {
    background: var(--sc-primary-700);
    transform: translateY(-1px);
}

.signedout-ghost[b-ftv3mgeqxn] {
    background: transparent;
    color: var(--sc-text-primary);
    border: 1.5px solid var(--sc-border);
}

.signedout-ghost:hover[b-ftv3mgeqxn] {
    background: var(--sc-surface-variant);
    border-color: var(--sc-border-strong, var(--sc-border));
}

.signedout-primary .rzi[b-ftv3mgeqxn],
.signedout-ghost .rzi[b-ftv3mgeqxn] {
    font-size: 1.125rem;
}

.signedout-tip[b-ftv3mgeqxn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-3) var(--sc-space-4);
    background: var(--sc-surface-variant);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
}

.signedout-tip .rzi[b-ftv3mgeqxn] {
    font-size: 1.125rem;
    color: var(--sc-text-disabled);
    flex-shrink: 0;
}

.signedout-tip span[b-ftv3mgeqxn] {
    font-size: 0.8125rem;
    color: var(--sc-text-secondary);
    line-height: 1.5;
}

@media (max-width: 540px) {
    .signedout-heading h1[b-ftv3mgeqxn] {
        font-size: 1.875rem;
    }
}
/* /Pages/Authentication/VerifyEmail.razor.rz.scp.css */
.verify-content[b-2bbj8wm1if] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-6);
    animation: verifyIn-b-2bbj8wm1if 0.4s ease-out;
}

@keyframes verifyIn-b-2bbj8wm1if {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.verify-icon-wrap[b-2bbj8wm1if] {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    background: var(--sc-primary-50);
    border-radius: 18px;
    border: 1px solid var(--sc-primary-100);
}

.verify-icon-wrap .rzi[b-2bbj8wm1if] {
    font-size: 1.875rem;
    color: var(--sc-primary-500);
}

.verify-heading h1[b-2bbj8wm1if] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    margin: 0 0 var(--sc-space-2);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.verify-subtext[b-2bbj8wm1if] {
    font-size: 0.9375rem;
    color: var(--sc-text-secondary);
    margin: 0;
    line-height: 1.55;
}

.verify-message[b-2bbj8wm1if] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-3) var(--sc-space-4);
    background: rgba(var(--sc-primary-rgb), 0.06);
    border: 1px solid rgba(var(--sc-primary-rgb), 0.15);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--sc-primary-700);
}

.verify-message .rzi[b-2bbj8wm1if] { font-size: 1.125rem; flex-shrink: 0; }

.verify-tips[b-2bbj8wm1if] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
    background: var(--sc-surface-alt, var(--sc-surface-variant));
    border: 1px solid var(--sc-border, var(--sc-surface-muted));
    border-radius: 12px;
    padding: var(--sc-space-4);
}

.tip[b-2bbj8wm1if] {
    display: flex;
    gap: var(--sc-space-3);
    align-items: flex-start;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.tip .rzi[b-2bbj8wm1if] {
    font-size: 1.125rem;
    color: var(--sc-primary-500);
    flex-shrink: 0;
    margin-top: 2px;
}

.tip > div[b-2bbj8wm1if] { display: flex; flex-direction: column; gap: 2px; }
.tip strong[b-2bbj8wm1if] { color: var(--sc-text-primary); font-weight: 600; }
.tip span[b-2bbj8wm1if] { color: var(--sc-text-secondary); }

.verify-actions[b-2bbj8wm1if] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.verify-submit[b-2bbj8wm1if],
.verify-resend[b-2bbj8wm1if] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    width: 100%;
    height: 46px;
    border-radius: 11px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.verify-submit[b-2bbj8wm1if] {
    background: var(--sc-primary-500);
    color: var(--sc-surface);
    border: none;
}

.verify-submit:hover[b-2bbj8wm1if] {
    background: var(--sc-primary-700);
    transform: translateY(-1px);
}

.verify-resend[b-2bbj8wm1if] {
    background: transparent;
    color: var(--sc-text-primary);
    border: 1.5px solid var(--sc-border);
}

.verify-resend:hover:not(:disabled)[b-2bbj8wm1if] {
    background: var(--sc-surface-variant);
    border-color: var(--sc-border-strong, var(--sc-border));
}

.verify-resend:disabled[b-2bbj8wm1if] { opacity: 0.7; cursor: not-allowed; }

.verify-submit .rzi[b-2bbj8wm1if],
.verify-resend .rzi[b-2bbj8wm1if] { font-size: 1.125rem; }

.spinner[b-2bbj8wm1if] {
    width: 18px; height: 18px;
    border: 2px solid var(--sc-border, rgba(0, 0, 0, 0.1));
    border-top-color: var(--sc-text-primary);
    border-radius: 50%;
    animation: spin-b-2bbj8wm1if 0.6s linear infinite;
}

@keyframes spin-b-2bbj8wm1if { to { transform: rotate(360deg); } }

.verify-footer[b-2bbj8wm1if] {
    font-size: 0.875rem;
    color: var(--sc-text-secondary);
    margin: 0;
}

.verify-footer a[b-2bbj8wm1if] {
    color: var(--sc-primary-500);
    font-weight: 600;
    text-decoration: none;
}

.verify-footer a:hover[b-2bbj8wm1if] { text-decoration: underline; }

@media (max-width: 540px) {
    .verify-heading h1[b-2bbj8wm1if] { font-size: 1.875rem; }
}
/* /Pages/Dashboard/DashboardEditor.razor.rz.scp.css */
/* Editor Body */
.editor-body[b-z0ljrkxhz4] {
    display: flex;
    flex: 1;
    min-height: 60vh;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg, 12px);
    overflow: hidden;
}

/* Settings Panel */
.settings-panel[b-z0ljrkxhz4] {
    width: 48px;
    background: var(--sc-surface);
    border-right: 1px solid var(--sc-outline-variant);
    transition: width 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.settings-panel.open[b-z0ljrkxhz4] {
    width: 280px;
}

.settings-panel .panel-header[b-z0ljrkxhz4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sc-space-4);
    border-bottom: 1px solid var(--sc-border, #e5e7eb);
    min-height: 56px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

.settings-panel .panel-header h2[b-z0ljrkxhz4] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sc-text-primary, #0f172a);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

.settings-panel.open .panel-header h2[b-z0ljrkxhz4] {
    opacity: 1;
}

.panel-toggle[b-z0ljrkxhz4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--sc-on-surface-variant);
}

.panel-toggle:hover[b-z0ljrkxhz4] {
    background: var(--sc-surface-container);
}

.panel-content[b-z0ljrkxhz4] {
    padding: var(--sc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-5);
    overflow-y: auto;
}

.form-field[b-z0ljrkxhz4] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.form-field label[b-z0ljrkxhz4] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-text-secondary, #64748b);
}

.icon-selector[b-z0ljrkxhz4] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sc-space-1);
}

.icon-option[b-z0ljrkxhz4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--sc-on-surface-variant);
    transition: all 0.2s;
}

.icon-option:hover[b-z0ljrkxhz4] {
    background: var(--sc-surface-container);
}

.icon-option.selected[b-z0ljrkxhz4] {
    background: var(--sc-primary-container);
    color: var(--sc-primary);
    border-color: var(--sc-primary);
}

.icon-option .material-symbols-outlined[b-z0ljrkxhz4] {
    font-size: 20px;
}

/* Main Editor Area */
.editor-main[b-z0ljrkxhz4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editor-toolbar[b-z0ljrkxhz4] {
    display: flex;
    align-items: center;
    background: var(--sc-surface);
    border-bottom: 1px solid var(--sc-outline-variant);
    gap: var(--sc-space-2);
    padding: var(--sc-space-3) var(--sc-space-4);
}

.toolbar-btn[b-z0ljrkxhz4] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-2) var(--sc-space-3);
    border: 1px solid var(--sc-border, #e5e7eb);
    background: var(--sc-surface);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sc-text-primary, #0f172a);
    transition: all 0.18s ease;
}

.toolbar-btn:hover[b-z0ljrkxhz4] {
    background: rgba(15, 23, 42, 0.04);
    border-color: var(--sc-text-secondary, #64748b);
}

.toolbar-btn.primary[b-z0ljrkxhz4] {
    background: var(--rz-primary, #2563eb);
    color: #ffffff;
    border-color: var(--rz-primary, #2563eb);
}

.toolbar-btn.primary:hover[b-z0ljrkxhz4] {
    background: var(--rz-primary-dark, #1d4ed8);
    border-color: var(--rz-primary-dark, #1d4ed8);
}

.toolbar-btn.danger[b-z0ljrkxhz4] {
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.4);
}

.toolbar-btn.danger:hover[b-z0ljrkxhz4] {
    background: rgba(220, 38, 38, 0.08);
    border-color: #b91c1c;
}

.toolbar-btn .material-symbols-outlined[b-z0ljrkxhz4] {
    font-size: 20px;
}

.toolbar-divider[b-z0ljrkxhz4] {
    width: 1px;
    height: 24px;
    background: var(--sc-outline-variant);
    margin: 0 var(--sc-space-2);
}

/* Preview Banner */
.preview-banner[b-z0ljrkxhz4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-2);
    background: var(--sc-secondary-container);
    color: var(--sc-on-secondary-container);
    font-size: 0.875rem;
    font-weight: 500;
}

.preview-banner button[b-z0ljrkxhz4] {
    margin-left: var(--sc-space-4);
    padding: var(--sc-space-1) var(--sc-space-3);
    border: 1px solid currentColor;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
}

.preview-banner button:hover[b-z0ljrkxhz4] {
    background: var(--sc-hover-bg);
}

/* Widget Grid — the live grid now lives in WidgetGridCanvas; this wrapper only frames the
   empty-state (see .dash-empty-grid) so it keeps the same 12-col context and background. */
.widget-grid[b-z0ljrkxhz4] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sc-space-4);
    padding: var(--sc-space-6);
    overflow-y: auto;
    align-content: start;
    background: var(--sc-bg, #f8fafc);
}

/* Widget Placeholder */
.widget-placeholder[b-z0ljrkxhz4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 140px;
    gap: var(--sc-space-2);
    color: var(--sc-text-secondary, #64748b);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.01));
    border: 1px dashed rgba(37, 99, 235, 0.25);
    border-radius: 10px;
    padding: var(--sc-space-5);
}

.widget-placeholder .material-symbols-outlined[b-z0ljrkxhz4] {
    font-size: 36px;
    color: var(--rz-primary, #2563eb);
    opacity: 0.7;
}

.widget-placeholder span:last-child[b-z0ljrkxhz4] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sc-text-primary, #0f172a);
}

/* Empty Grid — now the shared ScEmptyState component; only the grid-span
   placement is page-specific. */
[b-z0ljrkxhz4] .dash-empty-grid {
    grid-column: 1 / -1;
    margin: var(--sc-space-4) 0;
}

/* Properties Panel */
.properties-panel[b-z0ljrkxhz4] {
    width: 300px;
    background: var(--sc-surface);
    border-left: 1px solid var(--sc-outline-variant);
    display: flex;
    flex-direction: column;
}

.properties-panel .panel-header[b-z0ljrkxhz4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sc-space-4);
    border-bottom: 1px solid var(--sc-border, #e5e7eb);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

.properties-panel .panel-header h2[b-z0ljrkxhz4] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sc-text-primary, #0f172a);
}

.close-btn[b-z0ljrkxhz4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--sc-on-surface-variant);
}

.close-btn:hover[b-z0ljrkxhz4] {
    background: var(--sc-surface-container);
}

.properties-panel .panel-content[b-z0ljrkxhz4] {
    flex: 1;
    overflow-y: auto;
}

/* Size Selector */
.size-selector[b-z0ljrkxhz4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
}

.size-option[b-z0ljrkxhz4] {
    padding: var(--sc-space-2) var(--sc-space-3);
    border: 1px solid var(--sc-outline);
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
}

.size-option:hover[b-z0ljrkxhz4] {
    background: var(--sc-surface-container);
}

.size-option.selected[b-z0ljrkxhz4] {
    background: var(--sc-primary);
    color: var(--sc-text-inverse);
    border-color: var(--sc-primary);
}

/* Position Controls */
.position-controls[b-z0ljrkxhz4] {
    display: flex;
    gap: var(--sc-space-4);
}

.pos-input[b-z0ljrkxhz4] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.pos-input span[b-z0ljrkxhz4] {
    font-size: 0.875rem;
    color: var(--sc-on-surface-variant);
}

/* Panel Actions */
.panel-actions[b-z0ljrkxhz4] {
    margin-top: auto;
    padding-top: var(--sc-space-4);
    border-top: 1px solid var(--sc-outline-variant);
}

.danger-btn[b-z0ljrkxhz4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    width: 100%;
    padding: var(--sc-space-3);
    border: none;
    background: var(--sc-error-container);
    color: var(--sc-error);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.danger-btn:hover[b-z0ljrkxhz4] {
    background: var(--sc-error);
    color: var(--sc-text-inverse);
}

.danger-btn .material-symbols-outlined[b-z0ljrkxhz4] {
    font-size: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
    .settings-panel.open[b-z0ljrkxhz4] {
        width: 240px;
    }

    .properties-panel[b-z0ljrkxhz4] {
        width: 260px;
    }
}

@media (max-width: 768px) {
    .editor-header[b-z0ljrkxhz4] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sc-space-3);
    }

    .header-actions[b-z0ljrkxhz4] {
        width: 100%;
        justify-content: flex-end;
    }

    .settings-panel[b-z0ljrkxhz4] {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        width: 0;
    }

    .settings-panel.open[b-z0ljrkxhz4] {
        width: 280px;
    }

    .properties-panel[b-z0ljrkxhz4] {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
    }

    .widget-grid[b-z0ljrkxhz4] {
        grid-template-columns: repeat(6, 1fr);
    }
}
/* /Pages/Dashboard/DashboardList.razor.rz.scp.css */
/* Dashboard List Page Styles */

/* Dashboard Section */
.dashboard-section[b-vo9eesbrpq] {
    margin-bottom: var(--sc-space-6);
}

.section-header[b-vo9eesbrpq] {
    margin-bottom: var(--sc-space-5);
}

.section-header h2[b-vo9eesbrpq] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sc-text-primary);
    margin: 0 0 var(--sc-space-1);
}

.section-header h2[b-vo9eesbrpq]  .rzi {
    font-size: 1.375rem;
    color: var(--sc-primary-500);
}

.section-header p[b-vo9eesbrpq] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--sc-text-secondary);
}

/* Dashboard Grid */
.dashboard-grid[b-vo9eesbrpq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sc-space-5);
}

/* Dashboard Card */
.dashboard-card[b-vo9eesbrpq] {
    position: relative;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    padding: var(--sc-space-6);
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.dashboard-card:hover[b-vo9eesbrpq] {
    border-color: var(--sc-primary-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.dashboard-card:focus-visible[b-vo9eesbrpq] {
    outline: 2px solid var(--sc-primary-500, #2563eb);
    outline-offset: 2px;
}

.dashboard-card.is-default[b-vo9eesbrpq] {
    border-color: var(--sc-primary-200);
    background: var(--sc-surface);
}

/* Default Badge */
.default-badge[b-vo9eesbrpq] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: var(--sc-space-1);
    padding: var(--sc-space-1) 0.625rem;
    background: var(--sc-warning-50, rgba(245, 158, 11, 0.1));
    color: var(--sc-warning-600, #d97706);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.default-badge[b-vo9eesbrpq]  .rzi {
    font-size: 0.875rem;
}

/* Card Icon */
.card-icon[b-vo9eesbrpq] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-primary-50);
    border-radius: var(--sc-radius-lg);
    margin-bottom: var(--sc-space-4);
}

.card-icon[b-vo9eesbrpq]  .rzi {
    font-size: 1.5rem;
    color: var(--sc-primary-500);
}

.dashboard-card.system .card-icon[b-vo9eesbrpq] {
    background: var(--sc-primary-50);
}

.dashboard-card.system .card-icon[b-vo9eesbrpq]  .rzi {
    color: var(--sc-primary-500);
}

.dashboard-card.custom .card-icon[b-vo9eesbrpq] {
    background: var(--sc-info-50, rgba(59, 130, 246, 0.1));
}

.dashboard-card.custom .card-icon[b-vo9eesbrpq]  .rzi {
    color: var(--sc-info-600, #2563eb);
}

.dashboard-card h3[b-vo9eesbrpq] {
    margin: 0 0 var(--sc-space-2);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sc-text-primary);
}

.dashboard-card p[b-vo9eesbrpq] {
    margin: 0 0 var(--sc-space-4);
    font-size: 0.875rem;
    color: var(--sc-text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Meta */
.card-meta[b-vo9eesbrpq] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    margin-bottom: var(--sc-space-3);
}

.role-badge[b-vo9eesbrpq] {
    padding: var(--sc-space-1) 0.625rem;
    background: rgba(var(--sc-primary-rgb), 0.1);
    color: var(--sc-primary-500);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.widget-count[b-vo9eesbrpq],
.last-modified[b-vo9eesbrpq] {
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
}

/* Card Actions */
.card-actions[b-vo9eesbrpq] {
    display: flex;
    gap: var(--sc-space-2);
    padding-top: var(--sc-space-3);
    border-top: 1px solid var(--sc-hover-bg);
}

.action-btn[b-vo9eesbrpq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--sc-text-secondary);
    transition: all 0.15s ease;
}

.action-btn:hover[b-vo9eesbrpq] {
    background: var(--sc-hover-bg);
    color: var(--sc-text-primary);
}

.action-btn.danger:hover[b-vo9eesbrpq] {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

.action-btn[b-vo9eesbrpq]  .rzi {
    font-size: 1.125rem;
}

/* Add Card */
.dashboard-card.add-card[b-vo9eesbrpq] {
    border: 1px dashed var(--sc-border);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--sc-text-secondary);
    gap: var(--sc-space-2);
}

.dashboard-card.add-card:hover[b-vo9eesbrpq] {
    background: var(--sc-primary-50);
    color: var(--sc-primary-500);
}

.dashboard-card.add-card[b-vo9eesbrpq]  .rzi {
    font-size: 2.5rem;
}

/* Empty State */
.empty-state[b-vo9eesbrpq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--sc-surface-variant, var(--sc-hover-bg));
    border-radius: 12px;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .header-content[b-vo9eesbrpq] {
        flex-direction: column;
        gap: var(--sc-space-4);
    }

    .dashboard-grid[b-vo9eesbrpq] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Error.razor.rz.scp.css */
/* Page Layout */
.page-header[b-flm2n5ws63] {
    margin-bottom: var(--sc-space-8);
}

.header-content[b-flm2n5ws63] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-title-section[b-flm2n5ws63] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.page-title[b-flm2n5ws63] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin: 0;
}

.title-icon[b-flm2n5ws63] {
    font-size: 2rem;
    color: var(--rz-text-color);
}

.page-subtitle[b-flm2n5ws63] {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.95rem;
}

.header-actions[b-flm2n5ws63] {
    display: flex;
    gap: var(--sc-space-2);
    align-items: center;
}
/* /Pages/Help.razor.rz.scp.css */
/* Page Layout */
.page-header[b-ezi9q6ax43] {
    margin-bottom: var(--sc-space-8);
}

.header-content[b-ezi9q6ax43] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-title-section[b-ezi9q6ax43] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.page-title[b-ezi9q6ax43] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin: 0;
}

.title-icon[b-ezi9q6ax43] {
    font-size: 2rem;
    color: var(--rz-text-color);
}

.page-subtitle[b-ezi9q6ax43] {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.95rem;
}

.header-actions[b-ezi9q6ax43] {
    display: flex;
    gap: var(--sc-space-2);
    align-items: center;
}
/* /Pages/HelpDeskTickets.razor.rz.scp.css */
/* Filter row: status pills (left) + "Raise a ticket" action (right).
   Mirrors the counter-tile / filter-pill pattern used on My Appeals
   (Assessment/Appeals/MyAppeals.razor.css) and similar status-filtered list pages. */
.hd-filter-row[b-8f0wb3ibn5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-3);
    flex-wrap: wrap;
    margin: var(--sc-space-4) 0;
}

.filter-pills[b-8f0wb3ibn5] {
    display: flex;
    gap: var(--sc-space-2);
    flex-wrap: wrap;
}

.filter-pill[b-8f0wb3ibn5] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    border-radius: 9999px;
    border: 1px solid var(--sc-border);
    background: var(--sc-surface);
    color: var(--sc-text-secondary);
    padding: var(--sc-space-2) var(--sc-space-3);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-pill:hover[b-8f0wb3ibn5] {
    border-color: var(--sc-primary-500);
    color: var(--sc-text-primary);
}

.filter-pill.selected[b-8f0wb3ibn5] {
    border-color: var(--sc-primary-500);
    background: var(--sc-primary-500);
    color: var(--sc-text-inverse);
}

.filter-pill .count-pill[b-8f0wb3ibn5] {
    padding: var(--sc-space-1) var(--sc-space-2);
    border-radius: 9999px;
    background: var(--sc-surface-variant);
    color: var(--sc-text-secondary);
    font-size: 0.7rem;
}

.filter-pill.selected .count-pill[b-8f0wb3ibn5] {
    background: rgba(255, 255, 255, 0.25);
    color: var(--sc-text-inverse);
}

/* Raise-a-ticket escalation card */
.hd-escalate-card[b-8f0wb3ibn5] {
    margin-bottom: var(--sc-space-3);
}

.hd-escalate-subtitle[b-8f0wb3ibn5] {
    opacity: .7;
    margin: 0;
}

.hd-escalate-fields[b-8f0wb3ibn5] {
    display: flex;
    gap: var(--sc-space-2);
    flex-wrap: wrap;
}

.hd-category-dropdown[b-8f0wb3ibn5] {
    min-width: 200px;
}

.hd-severity-dropdown[b-8f0wb3ibn5] {
    min-width: 240px;
}

.hd-escalate-actions[b-8f0wb3ibn5] {
    display: flex;
    gap: var(--sc-space-2);
    align-items: center;
    flex-wrap: wrap;
}

.hd-escalate-message[b-8f0wb3ibn5] {
    opacity: .8;
}

/* Inbox + detail two-column layout */
.hd-columns[b-8f0wb3ibn5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--sc-space-4);
}

.hd-loading[b-8f0wb3ibn5],
.hd-empty[b-8f0wb3ibn5] {
    opacity: .6;
}

.hd-ticket-list[b-8f0wb3ibn5] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
    margin-top: var(--sc-space-2);
}

.hd-ticket-item[b-8f0wb3ibn5] {
    padding: var(--sc-space-3);
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
}

.hd-ticket-item.selected[b-8f0wb3ibn5] {
    background: var(--rz-base-200);
}

.hd-ticket-meta[b-8f0wb3ibn5] {
    font-size: .85em;
    opacity: .7;
}

.hd-detail-subtitle[b-8f0wb3ibn5] {
    opacity: .7;
}

.hd-message-list[b-8f0wb3ibn5] {
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: var(--sc-space-3);
    max-height: 300px;
    overflow-y: auto;
    margin: var(--sc-space-2) 0;
}

.hd-message[b-8f0wb3ibn5] {
    padding: var(--sc-space-2) 0;
    border-bottom: 1px dashed var(--rz-base-300);
}

.hd-message-meta[b-8f0wb3ibn5] {
    font-size: .85em;
    opacity: .75;
}

.hd-message-body[b-8f0wb3ibn5] {
    margin-top: 4px;
    white-space: pre-wrap;
}

.hd-reply-box[b-8f0wb3ibn5] {
    width: 100%;
}

.hd-reply-actions[b-8f0wb3ibn5] {
    display: flex;
    gap: var(--sc-space-2);
    margin-top: var(--sc-space-2);
}

.hd-action-message[b-8f0wb3ibn5] {
    margin-top: var(--sc-space-2);
    opacity: .7;
}
/* /Pages/Home/EcdDashboardTiles.razor.rz.scp.css */
/* WI-29 — the ECD centre's dashboard band.

   Page-local because the layout is specific to this band. Nothing here is a form LABEL rule;
   those belong in the design system's form-labels.css and never in a scoped file.

   NOTE: no comment in this file may contain the two characters that close a CSS comment inside
   its prose. A stray one ends the comment early, the rest of the text is parsed as CSS, and the
   scoped-CSS rewriter then emits every selector below WITHOUT its b-xxxxx attribute, which
   breaks styling for the rest of the bundle and reads as a per-component fault. */

.ecd-band[b-4ei1imlb43] {
    margin-bottom: var(--sc-space-6);
}

.ecd-tiles[b-4ei1imlb43] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sc-space-4);
}

.ecd-tile[b-4ei1imlb43] {
    background: var(--sc-card-bg, var(--sc-surface));
    border: 1px solid var(--sc-card-border, var(--sc-border));
    border-radius: var(--sc-radius-xl, 12px);
    padding: var(--sc-space-4);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.ecd-tile:hover[b-4ei1imlb43],
.ecd-tile:focus-visible[b-4ei1imlb43] {
    border-color: var(--sc-primary-500);
    transform: translateY(-1px);
}

.ecd-tile-ic[b-4ei1imlb43] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sc-space-2);
}

.ecd-ic-emerald[b-4ei1imlb43] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--sc-success-500, #10b981);
}

.ecd-ic-rose[b-4ei1imlb43] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--sc-danger-500, #ef4444);
}

.ecd-ic-amber[b-4ei1imlb43] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--sc-warning-500, #f59e0b);
}

.ecd-tile-val[b-4ei1imlb43] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sc-text-primary);
}

.ecd-tile-lbl[b-4ei1imlb43] {
    font-size: 0.8125rem;
    color: var(--sc-text-secondary);
}

/* The failed state is worded and visually distinct from a real zero. A grey dash for both is
   the defect this pair exists to prevent. */
.ecd-tile-fail[b-4ei1imlb43] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sc-danger-600, #dc2626);
}

.ecd-tile-retry[b-4ei1imlb43] {
    align-self: flex-start;
    margin-top: var(--sc-space-1);
    border: 1px solid var(--sc-border-strong, var(--sc-border));
    background: var(--sc-surface);
    color: var(--sc-text-primary);
    border-radius: var(--sc-radius-md, 6px);
    padding: 2px 10px;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
}

.ecd-band-empty[b-4ei1imlb43] {
    margin-top: var(--sc-space-3);
    font-size: 0.8125rem;
    color: var(--sc-text-secondary);
}
/* /Pages/Home/HomeLanding.razor.rz.scp.css */
.sc-page[b-iqthmrren2] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

[b-iqthmrren2] .sc-breadcrumb {
    margin-bottom: 0 !important;
}

[b-iqthmrren2] .td-hero {
    margin-bottom: var(--sc-space-4);
}

/* Shortcut section grid and tile styling */

/* Section — one per nav group. Grouped output keeps related shortcuts
   visually together so the page reads like a personalised contents page
   rather than an undifferentiated tile dump. Each section carries its
   own accent via two CSS custom properties (`--sc-section-accent` and
   `--sc-section-accent-soft`) set inline from the C# AccentFor() map —
   this is what gives every group its own visual neighbourhood. */
.sc-home-section[b-iqthmrren2] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3, 0.75rem);
}

.sc-home-section + .sc-home-section[b-iqthmrren2] {
    margin-top: var(--sc-space-4, 1rem);
}

.sc-home-section-header[b-iqthmrren2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: var(--sc-space-1, 0.25rem);
}

.sc-home-section-header h2[b-iqthmrren2] {
    margin: 0;
    font-size: 1.375rem;
    font-weight: var(--sc-font-bold, 700);
    letter-spacing: -0.01em;
    color: var(--sc-text-primary);
}

/* "Explore by category" pill filters — one per real module (Students,
   Teaching, Operations, etc.), driven by PortalNavigationGroups so the
   list never drifts from the sidebar/mega-menu's own module set. */
.sc-category-pills[b-iqthmrren2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--sc-space-4, 1rem);
}

.sc-category-pill[b-iqthmrren2] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1.5px solid var(--sc-border, #e5e7eb);
    background: var(--sc-surface, #ffffff);
    color: var(--sc-text-secondary);
    font-size: 0.875rem;
    font-weight: var(--sc-font-medium, 500);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sc-category-pill:hover[b-iqthmrren2] {
    border-color: var(--sc-border-strong, var(--sc-gray-300, #cbd5e1));
    color: var(--sc-text-primary);
}

.sc-category-pill.on[b-iqthmrren2] {
    border-color: var(--sc-text-primary, #111827);
    background: var(--sc-text-primary, #111827);
    color: #fff;
}

.sc-home-section-grid[b-iqthmrren2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sc-space-3, 0.75rem);
}

@media (max-width: 1100px) {
    .sc-home-section-grid[b-iqthmrren2] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px) {
    .sc-home-section-grid[b-iqthmrren2] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* "All" view — every category's shortcuts grouped under its own heading. */
.sc-home-category-group[b-iqthmrren2] {
    margin-bottom: var(--sc-space-5, 1.25rem);
}

.sc-home-category-group:last-child[b-iqthmrren2] {
    margin-bottom: 0;
}

.sc-home-category-heading[b-iqthmrren2] {
    margin: 0 0 var(--sc-space-2, 0.5rem);
    font-size: 0.9rem;
    font-weight: var(--sc-font-semibold, 600);
    color: var(--sc-text-secondary);
}
/* Note: tile card styling (icon chip colour, hover, label weight) lives
   entirely in HomeTile.razor.css now. Rules targeting .sc-tile/.sc-tile-*
   used to be declared here too, but .sc-tile is rendered inside HomeTile's
   own template - a scoped rule in THIS file's compiled output can never
   match it, so those overrides were silently dead (the base HomeTile.razor.css
   styling always won). Removed rather than left as misleading dead code. */

@media (max-width: 640px) {
    .sc-page-title[b-iqthmrren2] {
        font-size: 1.375rem;
    }

    .sc-home-section-grid[b-iqthmrren2] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Home/MyApprovals.razor.rz.scp.css */
.ap-state[b-2baeg11h74] {
    display: flex;
    justify-content: center;
    padding: var(--sc-space-10) 0;
}

.ap-section[b-2baeg11h74] {
    margin-bottom: var(--sc-space-8);
}

.ap-section-title[b-2baeg11h74] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin: 0 0 var(--sc-space-4);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sc-text-primary);
}

.ap-section-title .rzi[b-2baeg11h74] {
    font-size: 1.2rem;
    color: var(--sc-primary-500);
}

.ap-list[b-2baeg11h74] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.ap-item[b-2baeg11h74] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4);
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.ap-item:hover[b-2baeg11h74] {
    border-color: var(--sc-primary-200);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.14);
}

.ap-item-icon[b-2baeg11h74] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

.ap-item-icon .rzi[b-2baeg11h74] {
    font-size: 1.3rem;
}

.ap-tone-blue[b-2baeg11h74] { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.ap-tone-amber[b-2baeg11h74] { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.ap-tone-purple[b-2baeg11h74] { background: rgba(168, 85, 247, 0.12); color: #7c3aed; }

.ap-item-body[b-2baeg11h74] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ap-item-kind[b-2baeg11h74] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sc-text-disabled, var(--sc-text-secondary));
}

.ap-item-title[b-2baeg11h74] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-item-sub[b-2baeg11h74] {
    font-size: 0.82rem;
    color: var(--sc-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-item-meta[b-2baeg11h74] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
}

.ap-item-when[b-2baeg11h74] {
    font-size: 0.78rem;
    color: var(--sc-text-secondary);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .ap-item[b-2baeg11h74] {
        flex-wrap: wrap;
    }

    .ap-item-meta[b-2baeg11h74] {
        width: 100%;
        justify-content: space-between;
    }
}
/* /Pages/Home/MyDay.razor.rz.scp.css */
.sc-my-day[b-9madfefyuf] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-6);
    padding: var(--sc-space-4);
}

.sc-my-day-header[b-9madfefyuf] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.sc-my-day-title[b-9madfefyuf] {
    font-size: var(--sc-font-size-2xl, 1.75rem);
    font-weight: 600;
    margin: 0;
}

.sc-my-day-subtitle[b-9madfefyuf] {
    color: var(--sc-color-text-muted, #6b7280);
    margin: 0;
}

.sc-my-day-tiles[b-9madfefyuf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sc-space-4);
}
/* /Pages/Home/PersonaTiles/HomeTile.razor.rz.scp.css */
.sc-tile[b-y20a89t3u6] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-3) var(--sc-space-4);
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    color: var(--sc-text-primary);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sc-tile:hover[b-y20a89t3u6] {
    transform: translateY(-4px);
    border-color: #6366f1;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

/* Neutral icon chip - matches the reference "Manage" nav-card pattern
   (.fd-nav-card-icon in FacilitiesDashboard) rather than a per-section
   accent colour. A per-parent override was attempted in
   HomeLanding.razor.css (.sc-home-section .sc-tile-icon) but never
   applied - .sc-tile-icon is rendered inside THIS component's own
   template, so it carries this file's scope attribute, not the parent
   page's; a parent's scoped CSS can never reach into a child component's
   markup. Fix belongs here, at the source. */
.sc-tile-icon[b-y20a89t3u6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--sc-primary-100);
    color: var(--sc-primary-500);
    flex-shrink: 0;
}

.sc-tile-icon[b-y20a89t3u6]  .rzi,
.sc-tile-icon .rzi[b-y20a89t3u6] {
    color: inherit;
    font-size: 1.25rem;
}

.sc-tile-body[b-y20a89t3u6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sc-tile-label[b-y20a89t3u6] {
    font-weight: 650;
    font-size: 0.9rem;
    color: var(--sc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-tile-subtitle[b-y20a89t3u6] {
    margin-top: 2px;
    color: var(--sc-text-secondary);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-tile-arrow[b-y20a89t3u6] {
    color: var(--sc-text-secondary);
    flex-shrink: 0;
    transition: transform .15s ease, color .15s ease;
}

.sc-tile:hover .sc-tile-arrow[b-y20a89t3u6] {
    transform: translateX(2px);
    color: #6366f1;
}

/* ── Rich variant — used when a caller supplies Description/IsComingSoon
   (e.g. Home's Operations section), matching OperationsDashboard's own
   module-card look so the same modules read identically in both places. ── */
.sc-tile-rich[b-y20a89t3u6] {
    align-items: center;
    padding: var(--sc-space-4) var(--sc-space-5);
}

.sc-tile-rich.is-coming-soon[b-y20a89t3u6] {
    opacity: 0.7;
}

.sc-tile-rich.is-coming-soon:hover[b-y20a89t3u6] {
    opacity: 1;
}

.sc-tile-rich .sc-tile-icon[b-y20a89t3u6] {
    width: 48px;
    height: 48px;
}

.sc-tile-rich .sc-tile-icon .rzi[b-y20a89t3u6] {
    font-size: 1.4rem;
}

/* ── Hero variant — the first Favorites tile, spanning 2 grid rows
   (grid placement is the caller's job, see HomeLanding's .sc-favorites-grid).
   Icon+label sit in a header row, description below, matching the
   Outlook-style "big first app" card in the M365 launcher reference. ── */
.sc-tile-hero[b-y20a89t3u6] {
    grid-row: span 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--sc-space-2, 0.5rem);
    padding: var(--sc-space-4) var(--sc-space-5);
}

.sc-tile-hero .sc-tile-body[b-y20a89t3u6] {
    width: 100%;
}

.sc-tile-hero .sc-tile-label[b-y20a89t3u6] {
    white-space: normal;
    font-size: 1rem;
}

.sc-tile-hero .sc-tile-description[b-y20a89t3u6] {
    -webkit-line-clamp: unset;
}

.sc-tile-hero .sc-tile-arrow[b-y20a89t3u6] {
    display: none;
}

@media (max-width: 800px) {
    /* Grid collapses to fewer columns below this width (see
       .sc-home-section-grid's own breakpoints) — a 2-row-tall hero card
       stops making layout sense once there's no second column of small
       tiles beside it, so it just becomes a normal single-row tile. */
    .sc-tile-hero[b-y20a89t3u6] {
        grid-row: auto;
        flex-direction: row;
        align-items: center;
    }
}

.sc-tile-rich .sc-tile-label[b-y20a89t3u6] {
    white-space: normal;
    font-size: 0.95rem;
}

.sc-tile-head[b-y20a89t3u6] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    flex-wrap: wrap;
}

.sc-tile-description[b-y20a89t3u6] {
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
    white-space: normal;
    line-height: 1.35;
}

.sc-tile-status[b-y20a89t3u6] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    flex-shrink: 0;
}

.sc-tile-status.is-soon[b-y20a89t3u6] {
    color: #6b7280;
    background: var(--sc-gray-100);
}

/* Locked (plan) tile — the Home surface's match for Sidebar/MegaMenu's locked
   nav item. Dimmed and non-interactive, but NOT invisible: the whole point of
   rendering it is the upsell, so it must still be readable. The state is
   carried by the "Upgrade" pill's TEXT, never by colour alone. */
.sc-tile-locked[b-y20a89t3u6] {
    cursor: default;
    opacity: 0.72;
}

.sc-tile-locked:hover[b-y20a89t3u6] {
    transform: none;
    border-color: var(--sc-border);
    box-shadow: none;
}

/* Keyboard users must be able to see where they are — the tile is in the tab
   sequence (tabindex="0") even though activating it does nothing. */
.sc-tile-locked:focus-visible[b-y20a89t3u6] {
    outline: 2px solid var(--sc-primary-500);
    outline-offset: 2px;
    opacity: 1;
}

.sc-tile-status.is-upgrade[b-y20a89t3u6] {
    color: #92400e;
    background: rgba(251, 191, 36, 0.18);
}
/* /Pages/Index.razor.rz.scp.css */
    /* Onboarding state */
    .ob-page[b-3b4rftk9ko] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100vh - 120px);
    }

    .ob-card[b-3b4rftk9ko] {
        width: 100%;
        max-width: 460px;
        background: var(--sc-surface);
        border-radius: 14px;
        border: 1px solid var(--sc-border);
        padding: var(--sc-space-10) var(--sc-space-8);
        text-align: center;
        animation: obIn-b-3b4rftk9ko 0.4s ease-out;
    }

    @keyframes obIn-b-3b4rftk9ko {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
    }

    .ob-icon-wrap[b-3b4rftk9ko] {
        position: relative;
        width: 96px;
        height: 96px;
        margin: 0 auto var(--sc-space-6);
    }

    .ob-ring[b-3b4rftk9ko] {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px dashed var(--sc-primary-200);
        animation: obSpin-b-3b4rftk9ko 25s linear infinite;
    }

    @keyframes obSpin-b-3b4rftk9ko {
        to {
            transform: rotate(360deg);
        }
    }

    .ob-icon[b-3b4rftk9ko] {
        position: absolute;
        inset: 14px;
        display: grid;
        place-items: center;
        background: var(--sc-primary-50);
        border-radius: 50%;
    }

    .ob-icon .rzi[b-3b4rftk9ko] {
        font-size: 2rem;
        color: var(--sc-primary-500);
    }

    .ob-title[b-3b4rftk9ko] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--sc-text-primary);
        margin: 0 0 var(--sc-space-2);
        letter-spacing: -0.02em;
    }

    .ob-subtitle[b-3b4rftk9ko] {
        font-size: 0.9rem;
        color: var(--sc-text-secondary);
        line-height: 1.6;
        margin: 0 0 var(--sc-space-8);
    }

    .ob-features[b-3b4rftk9ko] {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        margin-bottom: var(--sc-space-8);
        text-align: left;
    }

    .ob-feat[b-3b4rftk9ko] {
        display: flex;
        align-items: center;
        gap: var(--sc-space-3);
        padding: 0.625rem var(--sc-space-4);
        border-radius: 10px;
        background: var(--sc-surface-variant);
        border: 1px solid var(--sc-border, var(--sc-surface-muted));
    }

    .ob-feat-dot[b-3b4rftk9ko] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        display: grid;
        place-items: center;
        border-radius: 9px;
    }

    .ob-feat-dot .rzi[b-3b4rftk9ko] {
        font-size: 1.125rem;
    }

    .ob-feat div[b-3b4rftk9ko] {
        display: flex;
        flex-direction: column;
        gap: 0.0625rem;
    }

    .ob-feat strong[b-3b4rftk9ko] {
        font-size: 0.8125rem;
        color: var(--sc-text-primary);
    }

    .ob-feat span[b-3b4rftk9ko] {
        font-size: 0.75rem;
        color: var(--sc-text-disabled);
    }

    .ob-cta[b-3b4rftk9ko] {
        display: inline-flex;
        align-items: center;
        gap: var(--sc-space-2);
        padding: var(--sc-space-3) var(--sc-space-8);
        padding: var(--sc-space-4) var(--sc-space-3);
        background: var(--sc-primary-500);
        color: var(--sc-surface);
        border: none;
        border-radius: 11px;
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
    }

    .ob-cta:hover[b-3b4rftk9ko] {
        background: var(--sc-primary-700);
        transform: translateY(-1px);
    }

    .ob-cta .rzi[b-3b4rftk9ko] {
        font-size: 1.125rem;
    }

    .ob-note[b-3b4rftk9ko] {
        font-size: 0.8rem;
        color: var(--sc-text-disabled);
        margin: var(--sc-space-5) 0 0;
    }

    /* ============================================================
       Dashboard — redesigned hero + metrics + shortcuts
       Replaces a centered "Welcome to..." H1 + uniform 22-tile icon
       grid with a sales-grade landing surface: time-aware personal
       greeting, live academic-year progress, colour-tinted stat
       tiles, and elegant shortcut tiles.
       ============================================================ */
    .sc-page[b-3b4rftk9ko] {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: var(--sc-space-6);
        font-family: var(--sc-font-sans, 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif);
        animation: scHomeFadeIn-b-3b4rftk9ko 0.45s ease-out;
    }

    @keyframes scHomeFadeIn-b-3b4rftk9ko {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ---------- Page Header ---------- */
    .page-header[b-3b4rftk9ko] {
        margin-bottom: var(--sc-space-8);
    }

    .header-content[b-3b4rftk9ko] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .header-title-section[b-3b4rftk9ko] {
        display: flex;
        flex-direction: column;
        gap: var(--sc-space-1);
    }

    .page-title[b-3b4rftk9ko] {
        display: flex;
        align-items: center;
        gap: var(--sc-space-3);
        font-size: 1.75rem;
        font-weight: 600;
        color: var(--rz-text-color);
        margin: 0;
    }

    .title-icon[b-3b4rftk9ko] {
        font-size: 2rem;
        color: var(--rz-primary);
    }

    .page-subtitle[b-3b4rftk9ko] {
        margin: 0;
        color: var(--rz-text-secondary-color);
        font-size: 0.95rem;
    }

    /* ---------- Metrics row ---------- */
    .sc-page-metrics[b-3b4rftk9ko] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--sc-space-3);
    }

    .sc-page-metric[b-3b4rftk9ko] {
        display: flex;
        align-items: center;
        gap: var(--sc-space-4);
        padding: var(--sc-space-5);
        background: var(--sc-surface);
        border: 1px solid var(--sc-border);
        border-radius: 10px;
        text-decoration: none;
        transition: transform 180ms ease, box-shadow 220ms ease, border-color 180ms ease;
    }

    .sc-page-metric:hover[b-3b4rftk9ko] {
        transform: translateY(-2px);
        border-color: var(--sc-primary-200);
        box-shadow:
            0 4px 6px rgba(15, 23, 42, 0.04),
            0 12px 24px rgba(15, 23, 42, 0.08);
    }

    .sc-page-metric-icon[b-3b4rftk9ko] {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        border-radius: 12px;
        font-size: 1.4rem;
    }

    .sc-page-metric-icon .rzi[b-3b4rftk9ko] {
        font-size: 1.5rem;
    }

    .sc-page-metric-icon-blue[b-3b4rftk9ko] {
        background: var(--sc-primary-100);
        color: var(--sc-primary-500);
    }

    .sc-page-metric-icon-indigo[b-3b4rftk9ko] {
        background: var(--sc-primary-100);
        color: var(--sc-primary-500);
    }

    .sc-page-metric-icon-green[b-3b4rftk9ko] {
        background: rgba(var(--sc-primary-rgb), 0.12);
        color: var(--sc-primary-500);
    }

    .sc-page-metric-icon-amber[b-3b4rftk9ko] {
        background: var(--sc-primary-100);
        color: var(--sc-primary-500);
    }

    .sc-page-metric-body[b-3b4rftk9ko] {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .sc-page-metric-num[b-3b4rftk9ko] {
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1;
        color: var(--sc-text-primary);
        font-variant-numeric: tabular-nums;
    }

    .sc-page-metric-lbl[b-3b4rftk9ko] {
        font-size: 0.85rem;
        color: var(--sc-text-secondary);
        margin-top: 4px;
    }

    .sc-page-stats-loading[b-3b4rftk9ko] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--sc-space-3);
        padding: var(--sc-space-8);
        color: var(--sc-text-secondary);
        font-size: 0.9rem;
    }

    /* ---------- Shortcuts ---------- */
    .sc-page-shortcuts[b-3b4rftk9ko] {
        display: flex;
        flex-direction: column;
        gap: var(--sc-space-4);
    }

    .sc-page-section-head[b-3b4rftk9ko] {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--sc-space-3);
    }

    .sc-page-section-head h2[b-3b4rftk9ko] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--sc-text-primary);
        font-family: inherit;
    }

    .sc-page-section-head p[b-3b4rftk9ko] {
        margin: 4px 0 0;
        font-size: 0.875rem;
        color: var(--sc-text-secondary);
    }

    .sc-page-section-meta[b-3b4rftk9ko] {
        font-size: 0.78rem;
        color: var(--sc-text-secondary);
        font-variant-numeric: tabular-nums;
    }

    /* ---------- Category-grouped shortcut layout ---------- */
    .sc-page-ql-categories[b-3b4rftk9ko] {
        display: flex;
        flex-direction: column;
        gap: var(--sc-space-6);
    }

    .sc-page-ql-cat[b-3b4rftk9ko] {
        /* Each category sets its own --cat-tint hue; child rules pick it up
           via colour-mix() so we only declare the base hue once per category
           class below. */
        --cat-tint: 99, 102, 241;
        /* indigo fallback */
    }

    .sc-page-ql-cat-head[b-3b4rftk9ko] {
        display: flex;
        align-items: center;
        gap: var(--sc-space-2);
        padding: 0 var(--sc-space-1) var(--sc-space-3);
        border-bottom: 1px dashed var(--sc-border);
        margin-bottom: var(--sc-space-3);
    }

    .sc-page-ql-cat-dot[b-3b4rftk9ko] {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: rgb(var(--cat-tint));
        flex-shrink: 0;
    }

    .sc-page-ql-cat-name[b-3b4rftk9ko] {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--sc-text-secondary);
    }

    .sc-page-ql-cat-count[b-3b4rftk9ko] {
        margin-left: auto;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--sc-text-disabled);
        background: var(--sc-surface-variant);
        padding: 2px 8px;
        border-radius: 999px;
        font-variant-numeric: tabular-nums;
    }

    /* Per-category hues — each declares the RGB triplet for --cat-tint so
       the icon fill / hover / dot all stay coherent. */
    .sc-page-ql-cat-academics[b-3b4rftk9ko] {
        --cat-tint: 37, 99, 235;
    }

    /* blue   */
    .sc-page-ql-cat-people[b-3b4rftk9ko] {
        --cat-tint: 16, 185, 129;
    }

    /* green  */
    .sc-page-ql-cat-operations[b-3b4rftk9ko] {
        --cat-tint: 245, 158, 11;
    }

    /* amber  */
    .sc-page-ql-cat-communication[b-3b4rftk9ko] {
        --cat-tint: 234, 88, 12;
    }

    /* orange */
    .sc-page-ql-cat-analytics[b-3b4rftk9ko] {
        --cat-tint: 168, 85, 247;
    }

    /* purple */
    .sc-page-ql-cat-student-life[b-3b4rftk9ko] {
        --cat-tint: 99, 102, 241;
    }

    /* indigo */
    .sc-page-ql-cat-early-years[b-3b4rftk9ko] {
        --cat-tint: 236, 72, 153;
    }

    /* pink   */
    .sc-page-ql-cat-other[b-3b4rftk9ko] {
        --cat-tint: 100, 116, 139;
    }

    /* slate  */

    .sc-page-ql-grid[b-3b4rftk9ko] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: var(--sc-space-3);
    }

    .sc-page-ql-grid>*[b-3b4rftk9ko] {
        display: flex;
        width: 100%;
    }

    .sc-page-ql[b-3b4rftk9ko] {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sc-space-2);
        background: var(--sc-surface);
        border: 1px solid var(--sc-border);
        border-radius: 12px;
        text-decoration: none;
        color: var(--sc-text-primary);
        transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 220ms ease;
        width: 100%;
        text-align: center;
        overflow: hidden;
    }

    /* A subtle accent bar at the top of each tile in the category hue —
       stays quiet until hover, where it brightens. Gives the grouping a
       consistent visual read across the row without colouring the whole
       tile and shouting at the user. */
    .sc-page-ql[b-3b4rftk9ko]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(var(--cat-tint), 0.35);
        opacity: 0;
        transition: opacity 160ms ease;
    }

    .sc-page-ql:hover[b-3b4rftk9ko] {
        transform: translateY(-2px);
        background: rgba(var(--cat-tint), 0.05);
        border-color: rgba(var(--cat-tint), 0.4);
        color: rgb(var(--cat-tint));
        box-shadow:
            0 4px 6px rgba(15, 23, 42, 0.04),
            0 12px 24px rgba(15, 23, 42, 0.06);
    }

    .sc-page-ql:hover[b-3b4rftk9ko]::before {
        opacity: 1;
    }

    .sc-page-ql-icon[b-3b4rftk9ko] {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: rgba(var(--cat-tint), 0.1);
        color: rgb(var(--cat-tint));
        transition: background 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .sc-page-ql:hover .sc-page-ql-icon[b-3b4rftk9ko] {
        background: rgba(var(--cat-tint), 0.2);
        transform: scale(1.05);
    }

    .sc-page-ql-icon .rzi[b-3b4rftk9ko] {
        font-size: 1.25rem;
    }

    .sc-page-ql-label[b-3b4rftk9ko] {
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.25;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 900px) {
        .page-title[b-3b4rftk9ko] {
            font-size: 1.5rem;
        }
    }

    @media (max-width: 600px) {
        .sc-page[b-3b4rftk9ko] {
            gap: var(--sc-space-4);
        }

        .page-title[b-3b4rftk9ko] {
            font-size: 1.25rem;
        }

        .sc-page-metric[b-3b4rftk9ko] {
            padding: var(--sc-space-4);
        }
    }
/* /Pages/Landing.razor.rz.scp.css */
    .sc-landing-page[b-6m3jhkksyq] {
        /* Full-bleed marketing surface: it must NOT inherit the boxed
           app-page treatment (max-width/centre/padding) — each section
           below owns its own width so bands like the value strip can run
           edge-to-edge. */
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        background: var(--sc-surface);
        overflow-x: hidden;
    }

    /* ===== HERO ===== */
    .sc-hero[b-6m3jhkksyq] {
        position: relative;
        text-align: center;
        padding: var(--sc-space-16, 5rem) var(--sc-space-6) var(--sc-space-10);
    }

    .sc-hero-content[b-6m3jhkksyq] {
        position: relative;
        max-width: 780px;
        margin: 0 auto;
    }

    .sc-hero-title[b-6m3jhkksyq] {
        font-size: 3.75rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.035em;
        margin-bottom: var(--sc-space-6);
        color: var(--rz-text-color);
    }

    .sc-hero-highlight[b-6m3jhkksyq] {
        background: linear-gradient(135deg, var(--sc-info-500), var(--sc-stat-indigo), var(--sc-stat-purple));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .sc-hero-subtitle[b-6m3jhkksyq] {
        font-size: 1.15rem;
        line-height: 1.7;
        color: var(--sc-text-secondary);
        max-width: 600px;
        margin: 0 auto var(--sc-space-10);
    }

    .sc-hero-actions[b-6m3jhkksyq] {
        display: flex;
        gap: var(--sc-space-3);
        justify-content: center;
        flex-wrap: wrap;
    }

    .sc-hero-note[b-6m3jhkksyq] {
        margin-top: var(--sc-space-5);
        font-size: 0.8rem;
        color: var(--sc-text-secondary);
    }

    /* Hero Buttons */
    .sc-btn-hero-primary[b-6m3jhkksyq] {
        background: linear-gradient(135deg, var(--theme-primary-500, var(--sc-info-500)), var(--theme-primary-700, var(--sc-info-600))) !important;
        border: none !important;
        color: white !important;
        font-weight: 600 !important;
        padding: var(--sc-space-4) var(--sc-space-8) !important;
        border-radius: 12px !important;
        transition: all 0.25s ease !important;
    }

    .sc-btn-hero-primary:hover[b-6m3jhkksyq] {
        transform: translateY(-2px) !important;
    }

    .sc-btn-hero-outline[b-6m3jhkksyq] {
        background: rgba(var(--sc-primary-rgb), 0.06) !important;
        border: 1px solid var(--sc-border) !important;
        color: var(--rz-text-color) !important;
        font-weight: 500 !important;
        padding: var(--sc-space-4) var(--sc-space-8) !important;
        border-radius: 12px !important;
        transition: all 0.25s ease !important;
    }

    .sc-btn-hero-outline:hover[b-6m3jhkksyq] {
        background: rgba(var(--sc-primary-rgb), 0.12) !important;
        border-color: var(--sc-primary-300) !important;
    }

    /* ===== VALUE / TRUST STRIP ===== */
    /* A full-bleed band (no max-width on the section) so the tinted
       surface runs edge-to-edge; the inner container centres the content.
       Generous vertical padding (~5rem) gives the strip room to breathe. */
    .sc-social-proof[b-6m3jhkksyq] {
        width: 100%;
        padding: 5rem var(--sc-space-8);
        /* Light mode: a touch darker than --sc-surface-variant (#f9fafb, which
           is nearly invisible on white). #eef1f5 reads as a distinct band while
           staying soft. Dark mode falls back to the themed dark surface below. */
        background: #eef1f5;
        border-top: 1px solid var(--sc-border-light);
        border-bottom: 1px solid var(--sc-border-light);
    }

    /* Keep dark mode on the themed surface (the light band colour above would
       be jarring on a dark page). data-theme lives on an ancestor, so this
       ancestor-combinator override still resolves under scoped CSS. */
    [data-theme$="-dark"] .sc-social-proof[b-6m3jhkksyq] {
        background: var(--sc-surface-variant);
    }

    .sc-proof-container[b-6m3jhkksyq] {
        max-width: 960px;
        margin: 0 auto;
        text-align: center;
    }

    .sc-proof-label[b-6m3jhkksyq] {
        font-size: 0.825rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--sc-text-disabled);
        margin-bottom: var(--sc-space-10);
    }

    .sc-proof-stats[b-6m3jhkksyq] {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: var(--sc-space-10);
        flex-wrap: wrap;
    }

    .sc-stat[b-6m3jhkksyq] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sc-space-2);
        min-width: 120px;
    }

    /* RadzenIcon renders an <i> child; scope reaches it via the
       scoped .sc-stat parent using a descendant selector. */
    .sc-stat .sc-stat-icon[b-6m3jhkksyq] {
        font-size: 1.5rem;
        color: var(--sc-primary-500);
        margin-bottom: var(--sc-space-1);
    }

    .sc-stat-number[b-6m3jhkksyq] {
        font-size: 1.35rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--sc-text-primary);
    }

    .sc-stat-label[b-6m3jhkksyq] {
        font-size: 0.8rem;
        color: var(--sc-text-secondary);
        font-weight: 500;
    }

    .sc-stat-divider[b-6m3jhkksyq] {
        width: 1px;
        height: 52px;
        align-self: center;
        background: var(--sc-border);
    }

    /* ===== FEATURES ===== */
    .sc-features[b-6m3jhkksyq] {
        padding: 6rem var(--sc-space-8);
        background: var(--sc-surface);
    }

    .sc-features-container[b-6m3jhkksyq] {
        max-width: 1200px;
        margin: 0 auto;
    }

    .sc-section-header[b-6m3jhkksyq] {
        text-align: center;
        margin-bottom: var(--sc-space-16);
    }

    .sc-section-badge[b-6m3jhkksyq] {
        display: inline-block;
        padding: var(--sc-space-2) var(--sc-space-4);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--theme-primary-500, var(--sc-info-600));
        background: rgba(var(--sc-primary-rgb, 8, 145, 178), 0.08);
        border-radius: 100px;
        margin-bottom: var(--sc-space-4);
    }

    .sc-section-title[b-6m3jhkksyq] {
        font-size: 2.5rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--sc-text-primary);
        margin-bottom: var(--sc-space-3);
    }

    .sc-section-desc[b-6m3jhkksyq] {
        font-size: 1.05rem;
        color: var(--sc-text-secondary);
        max-width: 480px;
        margin: 0 auto;
    }

    .sc-features-grid[b-6m3jhkksyq] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sc-space-6);
    }

    .sc-feature-card[b-6m3jhkksyq] {
        padding: var(--sc-space-8);
        background: var(--sc-surface);
        border: 1px solid var(--sc-surface-muted);
        border-radius: 12px;
        text-align: left;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sc-feature-card:hover[b-6m3jhkksyq] {
        transform: translateY(-4px);
        border-color: var(--sc-border);
    }

    .sc-feature-icon-wrap[b-6m3jhkksyq] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 10px;
        margin-bottom: var(--sc-space-5);
    }

    .sc-feature-icon-wrap .sc-feature-icon[b-6m3jhkksyq] {
        font-size: 1.4rem;
    }

    .sc-icon-blue[b-6m3jhkksyq] {
        background: rgba(59, 130, 246, 0.1);
        color: var(--sc-primary-500);
    }

    .sc-icon-violet[b-6m3jhkksyq] {
        background: rgba(139, 92, 246, 0.1);
        color: var(--sc-stat-purple);
    }

    .sc-icon-emerald[b-6m3jhkksyq] {
        background: rgba(16, 185, 129, 0.1);
        color: var(--sc-success-500);
    }

    .sc-icon-amber[b-6m3jhkksyq] {
        background: rgba(245, 158, 11, 0.1);
        color: var(--sc-warning-500);
    }

    .sc-icon-rose[b-6m3jhkksyq] {
        background: rgba(244, 63, 94, 0.1);
        color: var(--sc-danger-500);
    }

    .sc-icon-cyan[b-6m3jhkksyq] {
        background: rgba(6, 182, 212, 0.1);
        color: var(--sc-info-500);
    }

    .sc-feature-icon-wrap .rzi[b-6m3jhkksyq] {
        font-size: 1.35rem;
    }

    .sc-feature-card h3[b-6m3jhkksyq] {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--sc-text-primary);
        margin-bottom: var(--sc-space-2);
        letter-spacing: -0.01em;
    }

    .sc-feature-card p[b-6m3jhkksyq] {
        font-size: 0.9rem;
        color: var(--sc-text-secondary);
        line-height: 1.65;
        margin: 0;
    }

    /* ===== CTA ===== */
    .sc-cta[b-6m3jhkksyq] {
        position: relative;
        background: linear-gradient(155deg, #0f172a 0%, #1e293b 100%);
        color: #ffffff;
        padding: 6rem var(--sc-space-8);
        text-align: center;
        overflow: hidden;
    }

    .sc-cta[b-6m3jhkksyq]::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 60% 50% at 50% 110%, rgba(var(--sc-primary-rgb, 8, 145, 178), 0.2), transparent),
            radial-gradient(ellipse 40% 40% at 80% 20%, rgba(139, 92, 246, 0.1), transparent);
        pointer-events: none;
    }

    .sc-cta-content[b-6m3jhkksyq] {
        position: relative;
        max-width: 580px;
        margin: 0 auto;
        z-index: 1;
    }

    .sc-cta h2[b-6m3jhkksyq] {
        font-size: 2.75rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.15;
        margin-bottom: var(--sc-space-4);
        color: #ffffff;
    }

    .sc-cta p[b-6m3jhkksyq] {
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.65;
        margin-bottom: var(--sc-space-8);
    }

    .sc-cta-actions[b-6m3jhkksyq] {
        display: flex;
        justify-content: center;
    }

    .sc-btn-cta-main[b-6m3jhkksyq] {
        background: linear-gradient(135deg, var(--theme-primary-500, var(--sc-info-500)), var(--sc-stat-indigo)) !important;
        border: none !important;
        color: white !important;
        font-weight: 600 !important;
        padding: var(--sc-space-4) var(--sc-space-10) !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        transition: all 0.25s ease !important;
    }

    .sc-btn-cta-main:hover[b-6m3jhkksyq] {
        transform: translateY(-2px) !important;
    }

    .sc-cta-note[b-6m3jhkksyq] {
        margin-top: var(--sc-space-4);
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.5);
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {
        .sc-features-grid[b-6m3jhkksyq] {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .sc-hero[b-6m3jhkksyq] {
            padding: var(--sc-space-16) var(--sc-space-6) var(--sc-space-12);
        }

        .sc-hero-title[b-6m3jhkksyq] {
            font-size: 2.5rem;
        }

        .sc-hero-subtitle[b-6m3jhkksyq] {
            font-size: 1rem;
        }

        .sc-section-title[b-6m3jhkksyq] {
            font-size: 2rem;
        }

        .sc-features-grid[b-6m3jhkksyq] {
            grid-template-columns: 1fr;
        }

        .sc-proof-stats[b-6m3jhkksyq] {
            gap: var(--sc-space-6);
        }

        .sc-stat-divider[b-6m3jhkksyq] {
            display: none;
        }

        .sc-cta h2[b-6m3jhkksyq] {
            font-size: 2rem;
        }
    }

    @media (max-width: 480px) {
        .sc-hero-title[b-6m3jhkksyq] {
            font-size: 2rem;
        }

        .sc-hero-actions[b-6m3jhkksyq] {
            flex-direction: column;
            align-items: center;
        }

        .sc-proof-stats[b-6m3jhkksyq] {
            flex-direction: column;
            gap: var(--sc-space-4);
        }
    }
/* /Pages/MyDay/MyDay.razor.rz.scp.css */
/* ============================================================
   My Day — daily cockpit
   Scoped to MyDay.razor. Uses the design-system tokens where
   they exist; falls back to literal values for the few accent
   tones that don't have a token yet.
   ============================================================ */

@keyframes mdFade-b-xcw3qlxmsf {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Hero ---------- */
.md-hero[b-xcw3qlxmsf] {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: var(--sc-space-10) var(--sc-space-8);
    margin-bottom: var(--sc-space-8);
    background: linear-gradient(135deg, var(--sc-primary-50) 0%, var(--sc-surface) 60%, var(--sc-surface) 100%);
    border: 1px solid var(--sc-border);
}

.md-hero-bg[b-xcw3qlxmsf] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.md-blob[b-xcw3qlxmsf] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
}

.md-blob-1[b-xcw3qlxmsf] {
    width: 360px;
    height: 360px;
    top: -160px;
    right: -80px;
    background: radial-gradient(circle, var(--sc-primary-200) 0%, transparent 65%);
}

.md-blob-2[b-xcw3qlxmsf] {
    width: 280px;
    height: 280px;
    bottom: -140px;
    left: 25%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, transparent 65%);
}

.md-hero-inner[b-xcw3qlxmsf] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
    gap: var(--sc-space-10);
    align-items: center;
}

.md-hero-text[b-xcw3qlxmsf] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
    min-width: 0;
}

.md-hero-eyebrow[b-xcw3qlxmsf] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sc-primary-500);
    letter-spacing: 0.01em;
}

.md-hero-back[b-xcw3qlxmsf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-bottom: var(--sc-space-2);
    padding: 4px 10px 4px 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sc-text-secondary);
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 999px;
    text-decoration: none;
    transition: gap 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.md-hero-back:hover[b-xcw3qlxmsf] {
    gap: 8px;
    color: var(--sc-primary-500);
    border-color: var(--sc-primary-200);
    background: var(--sc-primary-50);
    transform: translateX(-2px);
}

.md-hero-back .rzi[b-xcw3qlxmsf] {
    font-size: 1rem;
}

.md-hero-text h1[b-xcw3qlxmsf] {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--sc-text-primary);
}

.md-hero-name[b-xcw3qlxmsf] {
    background: linear-gradient(120deg, var(--sc-primary-500), var(--sc-purple-600, #7c3aed));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.md-hero-sub[b-xcw3qlxmsf] {
    margin: var(--sc-space-1) 0 var(--sc-space-4);
    font-size: 1rem;
    color: var(--sc-text-secondary);
    line-height: 1.55;
    /* Was capped at 56ch — shorter than the sentence itself ("You have 0 tasks due
       today and 0 scheduled meetings. Let's make it count." is ~74 chars), so it
       force-wrapped to two lines even with room to spare in the hero column. */
    max-width: 100%;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .md-hero-sub[b-xcw3qlxmsf] {
        white-space: normal;
    }
}

.md-hero-actions[b-xcw3qlxmsf] {
    display: flex;
    gap: var(--sc-space-3);
    flex-wrap: wrap;
}

.md-btn[b-xcw3qlxmsf] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: 0.625rem 1.125rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 220ms ease;
    font-family: inherit;
}

.md-btn-primary[b-xcw3qlxmsf] {
    background: var(--sc-primary-500);
    color: #fff;
}

.md-btn-primary:hover[b-xcw3qlxmsf] {
    background: var(--sc-primary-700, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}

.md-btn-ghost[b-xcw3qlxmsf] {
    background: var(--sc-surface);
    color: var(--sc-text-primary);
    border-color: var(--sc-border);
}

.md-btn-ghost:hover[b-xcw3qlxmsf] {
    border-color: var(--sc-primary-300, var(--sc-primary-200));
    color: var(--sc-primary-500);
    transform: translateY(-1px);
}

.md-hero-pulse[b-xcw3qlxmsf] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 14px;
    padding: var(--sc-space-4);
    backdrop-filter: blur(12px);
}

.md-pulse-row[b-xcw3qlxmsf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sc-space-3);
}

.md-pulse-cell[b-xcw3qlxmsf] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-3) var(--sc-space-4);
    border-radius: 12px;
    background: var(--sc-surface-variant, rgba(15, 23, 42, 0.03));
    transition: transform 160ms ease;
}

.md-pulse-cell:hover[b-xcw3qlxmsf] {
    transform: translateY(-1px);
}

.md-pulse-cell .rzi[b-xcw3qlxmsf] {
    font-size: 1.4rem;
}

.md-pulse-cell-blue[b-xcw3qlxmsf] {
    color: var(--sc-primary-500);
    background: var(--sc-primary-50);
}

.md-pulse-cell-amber[b-xcw3qlxmsf] {
    color: var(--sc-warning-700, #b45309);
    background: var(--sc-warning-50, rgba(245, 158, 11, 0.12));
}

.md-pulse-cell-green[b-xcw3qlxmsf] {
    color: var(--sc-success-700, #047857);
    background: var(--sc-success-50, rgba(16, 185, 129, 0.10));
}

.md-pulse-cell-purple[b-xcw3qlxmsf] {
    color: var(--sc-purple-600, #7c3aed);
    background: var(--sc-purple-50, rgba(168, 85, 247, 0.10));
}

.md-pulse-cell>div[b-xcw3qlxmsf] {
    display: flex;
    flex-direction: column;
}

.md-pulse-num[b-xcw3qlxmsf] {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--sc-text-primary);
}

.md-pulse-lbl[b-xcw3qlxmsf] {
    font-size: 0.78rem;
    color: var(--sc-text-secondary);
    margin-top: 2px;
}

/* ---------- Schedule + Tasks grid ----------
   Upcoming events used to be a full-width section BELOW this whole grid, so
   whenever My tasks (right column) was taller than Today's schedule (left
   column) — the common case, since tasks accumulate and a clear day is a
   single empty-state card — the grid row stretched to the taller column's
   height and left a dead gap under the shorter one before Upcoming events
   even started. Upcoming events now lives inside the left column, stacked
   under the schedule, so that space is filled with real content instead. */
.md-grid[b-xcw3qlxmsf] {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(340px, 1fr);
    gap: var(--sc-space-5);
    align-items: start;
}

.md-col-main[b-xcw3qlxmsf],
.md-col-side[b-xcw3qlxmsf] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-5);
    min-width: 0;
}

.md-card[b-xcw3qlxmsf] {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 14px;
    padding: var(--sc-space-5) var(--sc-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-4);
}

.md-card-head[b-xcw3qlxmsf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sc-space-3);
}

.md-card-head h2[b-xcw3qlxmsf] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.md-card-head h2 .rzi[b-xcw3qlxmsf] {
    font-size: 1.2rem;
    color: var(--sc-primary-500);
}

/* Section header: icon chip + stacked title/subtitle. Same shape as the Tasks
   panel's chip below, applied to Schedule and Events so all three headers read
   as one family. Scoped to these two sections rather than to .md-card-head, so
   no other panel's header shifts. */
.md-sec-title[b-xcw3qlxmsf] {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-3);
    min-width: 0;
}

.md-sec-chip[b-xcw3qlxmsf] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.md-sec-chip .rzi[b-xcw3qlxmsf] {
    font-size: 1.2rem;
}

.md-sec-chip-schedule[b-xcw3qlxmsf] {
    background: var(--sc-primary-50, #eff6ff);
    color: var(--sc-primary-600, #2563eb);
}

/* --sc-pink-50 and --sc-pink-600 are not tokens; both fell through to their light literals in
   every theme. Mixed against the surface so the chip follows it. */
.md-sec-chip-events[b-xcw3qlxmsf] {
    background: color-mix(in srgb, #db2777 14%, var(--sc-surface));
    color: #db2777;
}

/* The header sits above a rule in both sections, as the Tasks panel already
   does — it is what separates "what this panel is" from its contents. */
.md-schedule .md-card-head[b-xcw3qlxmsf],
.md-events .md-card-head[b-xcw3qlxmsf] {
    padding-bottom: var(--sc-space-4);
    border-bottom: 1px solid var(--sc-border-light, var(--sc-border));
}

.md-schedule .md-card-head h2[b-xcw3qlxmsf],
.md-events .md-card-head h2[b-xcw3qlxmsf] {
    display: block;
}

/* Icon chip beside the title — Tasks panel only, matching the reference mock
   (rounded-square tint behind the icon, title+subtitle stacked to its right). */
.md-tasks-title[b-xcw3qlxmsf] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
}

.md-tasks-icon-chip[b-xcw3qlxmsf] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    /* Was danger-red, which reads as "something's wrong" for a plain task list —
       every other card header on this page (Schedule, Events) tints its icon
       primary; the chip should match, not stand out as a warning. */
    background: var(--sc-primary-50, #eff6ff);
    color: var(--sc-primary-500, #2563eb);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.md-tasks-icon-chip .rzi[b-xcw3qlxmsf] {
    font-size: 1.25rem;
}

/* Tasks panel's header is a real "card header" — a band separated from the body by a rule.
   Holds the title and the shown/open count; the Today/Week/Done tabs that sat on the right
   are gone, replaced by a fixed preview of what is next. */
.md-tasks .md-card-head[b-xcw3qlxmsf] {
    padding-bottom: var(--sc-space-4);
    border-bottom: 1px solid var(--sc-border-light, var(--sc-border));
}

.md-card-sub[b-xcw3qlxmsf] {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--sc-text-secondary);
}

.md-link[b-xcw3qlxmsf] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 4px;
    background: none;
    border: none;
    color: var(--sc-primary-500);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    transition: gap 160ms ease, color 160ms ease;
    font-family: inherit;
}

.md-link:hover[b-xcw3qlxmsf] {
    gap: 10px;
    color: var(--sc-primary-700, #1d4ed8);
}

.md-link .rzi[b-xcw3qlxmsf] {
    font-size: 1rem;
}

/* ---------- Timeline ---------- */
/* ---------- Today's schedule ----------
   Each item is its own bordered row-card sitting on the panel, rather than a
   row of a bare timeline. The dot-and-line rail is gone: with one or two items
   — the normal case at an ECD centre — a rail drew a timeline through nothing.
   A single vertical rule separates the time from the activity and does the same
   grouping job at a fraction of the ink.

   Four columns: Time | rule | Activity | Status. Status keeps its own right
   edge so a day scans straight down one column. */
.md-sched-list[b-xcw3qlxmsf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.md-sched-row[b-xcw3qlxmsf] {
    display: grid;
    grid-template-columns: 132px 1fr auto;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4) var(--sc-space-5);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    background: var(--sc-surface);
    transition: border-color 180ms ease, box-shadow 220ms ease;
}

.md-sched-row:hover[b-xcw3qlxmsf] {
    border-color: var(--sc-primary-200);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* Time block: the range on one line, the derived duration beneath it. */
.md-sched-when[b-xcw3qlxmsf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.md-sched-time[b-xcw3qlxmsf] {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.md-sched-dash[b-xcw3qlxmsf] {
    display: inline-block;
    margin: 0 6px;
    color: var(--sc-text-secondary);
    font-weight: 600;
}

.md-sched-dur[b-xcw3qlxmsf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--sc-text-secondary);
    background: var(--sc-surface-variant, rgba(15, 23, 42, 0.04));
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
}

.md-sched-dur .rzi[b-xcw3qlxmsf] {
    font-size: 0.85rem;
}

/* The vertical rule between time and activity — a border on the body, not a
   grid column, so it stretches to the row's full content height on its own. */
.md-sched-body[b-xcw3qlxmsf] {
    min-width: 0;
    padding-left: var(--sc-space-4);
    border-left: 1px solid var(--sc-border-light, var(--sc-border));
}

.md-sched-title[b-xcw3qlxmsf] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sc-text-primary);
}

.md-sched-meta[b-xcw3qlxmsf] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-3);
    margin-top: 5px;
    font-size: 0.76rem;
    color: var(--sc-text-secondary);
}

.md-sched-meta span[b-xcw3qlxmsf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.md-sched-meta .rzi[b-xcw3qlxmsf] {
    font-size: 0.92rem;
}

.md-sched-status[b-xcw3qlxmsf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* A finished item recedes; it is still legible, just no longer the thing being
   looked for. The live row is lifted instead of tinted, so the status pill
   stays the one place colour means state. */
.md-sched-row.is-past[b-xcw3qlxmsf] {
    background: var(--sc-surface-variant, rgba(15, 23, 42, 0.02));
}

.md-sched-row.is-past .md-sched-title[b-xcw3qlxmsf] {
    color: var(--sc-text-secondary);
}

.md-sched-row.is-live[b-xcw3qlxmsf] {
    border-color: var(--sc-primary-300, var(--sc-primary-200));
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Status pill — a dot and a word, one shape for all three states so they read
   as one scale rather than three unrelated treatments. */
.md-status[b-xcw3qlxmsf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.md-status-dot[b-xcw3qlxmsf] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.md-status-upcoming[b-xcw3qlxmsf] {
    background: var(--sc-surface-variant, rgba(15, 23, 42, 0.05));
    color: var(--sc-text-secondary);
}

.md-status-live[b-xcw3qlxmsf] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--sc-primary-700, #1d4ed8);
}

.md-status-live .md-status-dot[b-xcw3qlxmsf] {
    animation: mdPulse-b-xcw3qlxmsf 1.6s infinite;
}

.md-status-done[b-xcw3qlxmsf] {
    background: var(--sc-success-50, #ecfdf5);
    color: var(--sc-success-700, #047857);
}

.md-badge[b-xcw3qlxmsf] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.md-badge-live[b-xcw3qlxmsf] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--sc-primary-700, #1d4ed8);
}

.md-badge-pulse[b-xcw3qlxmsf] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sc-primary-500);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
    animation: mdPulse-b-xcw3qlxmsf 1.6s infinite;
}

@keyframes mdPulse-b-xcw3qlxmsf {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

.md-badge-done[b-xcw3qlxmsf] {
    background: rgba(100, 116, 139, 0.12);
    color: var(--sc-text-secondary);
}

/* ---------- Tasks ---------- */
/* Gap (not per-row padding) is what gives the divider line real breathing
   room on both sides — it sits at the vertical midpoint of the gap (see
   ::after below) instead of flush against the next row. */
.md-task-list[b-xcw3qlxmsf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Inset so the line runs under the title/meta text only — it stops short of
   the checkbox column instead of drawing straight across the whole row. */
.md-task:not(:last-child)[b-xcw3qlxmsf]::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 0;
    bottom: -12px;
    height: 1px;
    background: var(--sc-border-light, var(--sc-border));
}

/* Redesigned again (2026-08-14) — subtler still, per direct reference: no
   card box around each row (no border, no shadow, no coloured edge bar),
   just a small dot + title + meta line floating on the panel's own
   background, separated by whitespace instead of boxes. Priority still
   colours the dot (a real signal worth keeping); it just isn't a bordered
   button anymore. */
.md-task[b-xcw3qlxmsf] {
    position: relative;
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 10px;
    align-items: flex-start;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.md-task:hover[b-xcw3qlxmsf] {
    background: transparent;
}

.md-task:hover .md-task-title[b-xcw3qlxmsf] {
    color: var(--sc-primary-600, var(--sc-primary-500));
}

.md-task.is-done[b-xcw3qlxmsf] {
    opacity: 0.6;
}

.md-task.is-done .md-task-title[b-xcw3qlxmsf] {
    text-decoration: line-through;
}

.md-task-check input[b-xcw3qlxmsf] {
    display: none;
}

/* A plain dot instead of a bordered checkbox button — priority still colours
   it (below), it's just no longer a boxed control. Still a real checkbox
   target (the hidden input covers it), just styled quietly. */
.md-task-box[b-xcw3qlxmsf] {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 999px;
    border: none;
    background: var(--sc-text-disabled, #94a3b8);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: transparent;
    transition: background 160ms ease, transform 120ms ease;
}

.md-task-pri-high .md-task-box[b-xcw3qlxmsf] { background: var(--sc-danger-500, #ef4444); }
.md-task-pri-medium .md-task-box[b-xcw3qlxmsf] { background: var(--sc-warning-500, #f59e0b); }
.md-task-pri-low .md-task-box[b-xcw3qlxmsf] { background: var(--sc-text-disabled, #94a3b8); }

.md-task-box:hover[b-xcw3qlxmsf] {
    transform: scale(1.2);
}

.md-task-box .rzi[b-xcw3qlxmsf] {
    display: none;
}

.md-task-check input:checked+.md-task-box[b-xcw3qlxmsf] {
    background: var(--sc-border);
}

/* Action rows (setup steps) navigate rather than check off, so they get a
   quiet trailing chevron instead of the checkbox circle — a filled blue
   disc with a white arrow read as a heavy, separate "button" glued onto
   every single card. No fill, no border: a plain muted glyph that only
   picks up colour with the rest of the card on hover. */
.md-task.is-action .md-task-box[b-xcw3qlxmsf] {
    width: auto;
    height: auto;
    margin-top: 3px;
    border: none;
    background: none;
    color: var(--sc-text-disabled, #94a3b8);
}

.md-task.is-action .md-task-box .rzi[b-xcw3qlxmsf] {
    display: inline-block;
    font-size: 1.05rem;
}

.md-task.is-action .md-task-box:hover[b-xcw3qlxmsf] {
    transform: none;
}

.md-task.is-action:hover .md-task-box[b-xcw3qlxmsf] {
    color: var(--sc-primary-500);
}

.md-task-title[b-xcw3qlxmsf] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sc-text-primary) !important;
    line-height: 1.3;
}

/* Explicit !important: this button previously inherited a blue link-like
   colour from somewhere in the global cascade rather than this rule, even
   though the rule already said --sc-text-primary — pin it hard so a task
   title reads as a heading, not a hyperlink, until it's hovered. */
.md-task-title-action[b-xcw3qlxmsf] {
    color: var(--sc-text-primary, #0f172a) !important;
}

.md-task-meta[b-xcw3qlxmsf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sc-text-secondary);
}

.md-task-meta-sep[b-xcw3qlxmsf] {
    color: var(--sc-text-disabled, var(--sc-border));
}

.md-task-due.is-urgent[b-xcw3qlxmsf] {
    color: var(--sc-danger-600, #dc2626);
}

/* No vertical padding of its own: this wrapper holds an ScEmptyState, which already brings
   var(--sc-space-6) top and bottom. The two stacked to 56px above and below three short lines,
   which is why the card was taller than the schedule beside it with nothing in it. */
.md-task-empty[b-xcw3qlxmsf] {
    display: flex;
    flex-direction: column;
    /* stretch, not center. On a flex COLUMN, align-items works across the horizontal axis, so
       "center" was sizing the empty state to its own content and centring it -- which is where
       the dead space either side of "All clear" came from. It reads as padding on the card and
       is not: the card's padding is unchanged, the box inside it was simply too narrow. */
    align-items: stretch;
    gap: var(--sc-space-2);
    padding: 0;
    color: var(--sc-text-secondary);
    font-size: 0.9rem;
}

.md-task-empty .rzi[b-xcw3qlxmsf] {
    font-size: 2rem;
    color: var(--sc-primary-400, var(--sc-primary-300));
}

.md-task-empty p[b-xcw3qlxmsf] {
    margin: 0;
}

.md-tasks-foot[b-xcw3qlxmsf] {
    display: flex;
    justify-content: center;
    padding-top: var(--sc-space-3);
    margin-top: var(--sc-space-2);
    border-top: 1px solid var(--sc-border-light, var(--sc-border));
}

/* ---------- Events rail ---------- */
.md-events[b-xcw3qlxmsf] {
    padding-bottom: var(--sc-space-5);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .md-grid[b-xcw3qlxmsf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .md-hero-inner[b-xcw3qlxmsf] {
        grid-template-columns: 1fr;
        gap: var(--sc-space-6);
    }

    .md-hero[b-xcw3qlxmsf] {
        padding: var(--sc-space-8) var(--sc-space-6);
    }
}

@media (max-width: 600px) {
    /* The action was squeezed beside the title and wrapped to "Open / calendar". It gets its own
       line under the heading, the way the events panel's link already sits. */
    .md-card-head[b-xcw3qlxmsf] { flex-wrap: wrap; }
    .md-card-head .md-sec-title[b-xcw3qlxmsf] { flex: 1 1 100%; }
    .md-card-head .md-link[b-xcw3qlxmsf] { margin-top: 2px; }

    .md-hero[b-xcw3qlxmsf] {
        padding: var(--sc-space-6) var(--sc-space-5);
        border-radius: 14px;
    }

    .md-card[b-xcw3qlxmsf] {
        padding: var(--sc-space-4);
        border-radius: 10px;
    }

    /* Narrow: time and duration go side by side above the activity, and status
       drops to its own line. Named areas rather than source order, so "which
       cell is which" does not depend on a column count that no longer applies. */
    .md-sched-row[b-xcw3qlxmsf] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "when   status"
            "body   body";
        gap: var(--sc-space-3);
        align-items: start;
    }

    .md-sched-when[b-xcw3qlxmsf] {
        grid-area: when;
        flex-direction: row;
        align-items: center;
        gap: var(--sc-space-2);
    }

    .md-sched-body[b-xcw3qlxmsf] {
        grid-area: body;
        padding-left: 0;
        border-left: 0;
    }

    .md-sched-status[b-xcw3qlxmsf] {
        grid-area: status;
    }
}
/* Loading / error state wrapper (shown between the hero and the cards while
   the My Day payload is fetched, or if the fetch fails). */
.md-state[b-xcw3qlxmsf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-4);
    min-height: 240px;
    padding: var(--sc-space-8);
    text-align: center;
}

/* Setup-action tasks (mirrored institution-readiness steps). The title is a
   button that routes to the setup page; the checkbox is read-only.
   (Chevron styling for .md-task.is-action .md-task-box lives next to the
   base .md-task-box rule above — kept together so the two don't drift.) */
.md-task-title-action[b-xcw3qlxmsf] {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--sc-text-primary, #0f172a);
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.md-task-title-action:hover[b-xcw3qlxmsf] {
    color: var(--sc-primary-500, #2563eb);
    text-decoration: underline;
}

.md-task-warning[b-xcw3qlxmsf] {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #b45309;
}

.md-task-warning .rzi[b-xcw3qlxmsf] {
    font-size: 0.95rem;
}

/* Academic term progress strip (hero). Slim bar showing where the school is
   in the current term — only rendered once an academic year is configured. */
.md-term[b-xcw3qlxmsf] {
    margin: 0.75rem 0 0.25rem;
    /* Was capped at 460px, leaving a visible gap between the bar and the pulse
       tiles on wider screens even though the hero text column has much more
       room — let it fill the column like the rest of the hero content does. */
    max-width: 100%;
}

.md-term-head[b-xcw3qlxmsf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.md-term-name[b-xcw3qlxmsf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--sc-text-primary);
}

.md-term-name .rzi[b-xcw3qlxmsf] {
    font-size: 1rem;
    color: var(--sc-primary-500);
}

.md-term-days[b-xcw3qlxmsf] {
    color: var(--sc-text-secondary);
    white-space: nowrap;
}

.md-term-bar[b-xcw3qlxmsf] {
    height: 6px;
    border-radius: 999px;
    background: var(--sc-primary-100, #dbeafe);
    overflow: hidden;
}

.md-term-fill[b-xcw3qlxmsf] {
    height: 100%;
    border-radius: 999px;
    background: var(--sc-primary-500, #2563eb);
    transition: width 0.4s ease;
}

.md-term-sub[b-xcw3qlxmsf] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
}

/* ---------- Setup checklist banner ----------
   Deliberately separate from the schedule/tasks grid below it — see the
   comment in MyDay.razor and MyDayService.MergeSetupTasksAsync for why
   one-time institution setup no longer lives inside "My tasks". Kept
   deliberately simple: one icon, one line of copy, one button — no ring,
   no left accent stripe, no inline step pills. */
.md-setup-banner[b-xcw3qlxmsf] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4) var(--sc-space-5);
    margin-bottom: var(--sc-space-5);
    background: var(--sc-primary-50, #eff6ff);
    border: 1.5px solid var(--sc-primary-300, #93c5fd);
    border-radius: 14px;
    box-shadow: 0 4px 14px -6px rgba(var(--sc-primary-rgb, 37, 99, 235), 0.22);
}

.md-setup-icon[b-xcw3qlxmsf] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--sc-primary-500);
    color: #fff;
}

.md-setup-icon .rzi[b-xcw3qlxmsf] {
    font-size: 1.15rem;
}

.md-setup-body[b-xcw3qlxmsf] {
    flex: 1;
    min-width: 0;
}

.md-setup-body h2[b-xcw3qlxmsf] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sc-text-primary);
}

.md-setup-body p[b-xcw3qlxmsf] {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--sc-text-secondary);
}

.md-setup-continue[b-xcw3qlxmsf] {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .md-setup-banner[b-xcw3qlxmsf] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* My Day: schedule section plus the two row-body wrappers. */
.md-schedule[b-xcw3qlxmsf] { display: flex; flex-direction: column; gap: var(--sc-space-2); }
.md-task-tag[b-xcw3qlxmsf] { display: inline-flex; padding: 1px 7px; border-radius: 999px; background: var(--sc-surface-variant, var(--sc-gray-100)); font-size: 0.68rem; color: var(--sc-text-secondary); white-space: nowrap; }

/* ── Upcoming events ──────────────────────────────────────────────────────────
   docs/design/upcoming-events-redesign.html. Type colour rides on --ev-c /
   --ev-c-soft, set once per card by its kind class, so every tinted part of a
   card follows from one pair rather than repeating four colour rules. */
.ev-holiday[b-xcw3qlxmsf] { --ev-c: var(--sc-success-600, #059669); --ev-c-soft: var(--sc-success-50, #ecfdf5); }
.ev-culture[b-xcw3qlxmsf] { --ev-c: #ea580c; --ev-c-soft: #fff7ed; }
.ev-event[b-xcw3qlxmsf]   { --ev-c: #7c3aed; --ev-c-soft: #f5f3ff; }
.ev-meeting[b-xcw3qlxmsf] { --ev-c: var(--sc-primary-600); --ev-c-soft: var(--sc-primary-50); }

[data-theme$="-dark"] .ev-holiday[b-xcw3qlxmsf] { --ev-c: #34d399; --ev-c-soft: #052e22; }
[data-theme$="-dark"] .ev-culture[b-xcw3qlxmsf] { --ev-c: #fb923c; --ev-c-soft: #331a07; }
[data-theme$="-dark"] .ev-event[b-xcw3qlxmsf]   { --ev-c: #a78bfa; --ev-c-soft: #241845; }
[data-theme$="-dark"] .ev-meeting[b-xcw3qlxmsf] { --ev-c: #60a5fa; --ev-c-soft: #172554; }

.ev-head[b-xcw3qlxmsf] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: var(--sc-space-4);
    border-bottom: 1px solid var(--sc-border);
    flex-wrap: wrap;
}

/* Pink, per the design — the one tile that is not the event's own type colour.
   Tinted from the mark rather than a fixed pale pink, so it darkens with the theme: a #fdf2f8
   square was the last light panel left on this page in dark mode. */
.ev-head__ic[b-xcw3qlxmsf] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, #db2777 14%, var(--sc-surface));
    color: #db2777;
    display: grid;
    place-items: center;
    flex: none;
}

[data-theme$="-dark"] .ev-head__ic[b-xcw3qlxmsf] { background: #3a0d24; color: #f472b6; }

.ev-head__txt[b-xcw3qlxmsf] { min-width: 0; }
.ev-head__txt h2[b-xcw3qlxmsf] { margin: 0; font-size: 1rem; }
.ev-head__txt p[b-xcw3qlxmsf] { margin: 2px 0 0; color: var(--sc-text-secondary); font-size: 0.81rem; }

.ev-head__link[b-xcw3qlxmsf] {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--sc-primary-500);
    font-weight: 600;
    font-size: 0.81rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-family: inherit;
    border-radius: 6px;
    padding: 4px 6px;
}

.ev-head__link:focus-visible[b-xcw3qlxmsf] { outline: 2px solid var(--sc-primary-500); outline-offset: 2px; }
.ev-head__link[b-xcw3qlxmsf]  .rzi { font-size: 1rem; transition: transform 0.15s ease; }
.ev-head__link:hover[b-xcw3qlxmsf]  .rzi { transform: translateX(2px); }

/* ── Upcoming events: equal cards ───────────────────────────────────────────────────────────────
   Two cards side by side, each carrying its own date tile, tags and footer, rather than one
   featured card beside a compact list. */
.ev-grid[b-xcw3qlxmsf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 14px;
}

.ev-card[b-xcw3qlxmsf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--sc-border);
    border-radius: 14px;
    background: var(--sc-surface);
    cursor: pointer;
    transition: border-color 0.14s ease, transform 0.14s ease;
}

.ev-card:hover[b-xcw3qlxmsf] { transform: translateY(-1px); border-color: var(--ev-c, var(--sc-primary-500)); }
.ev-card:focus-visible[b-xcw3qlxmsf] { outline: 2px solid var(--ev-c, var(--sc-primary-500)); outline-offset: 2px; }

.ev-card__top[b-xcw3qlxmsf] { display: flex; gap: 14px; align-items: flex-start; }
.ev-card__text[b-xcw3qlxmsf] { min-width: 0; flex: 1; }

.ev-card__row[b-xcw3qlxmsf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ev-card__text h3[b-xcw3qlxmsf] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sc-text-primary);
}

.ev-card__text p[b-xcw3qlxmsf] {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
}

/* Separated by a hairline, so the date and the action read as the card's footer. */
.ev-card__foot[b-xcw3qlxmsf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--sc-border);
    font-size: 0.78rem;
    color: var(--sc-text-secondary);
}

.ev-when[b-xcw3qlxmsf] { display: inline-flex; align-items: center; gap: 6px; }
.ev-when[b-xcw3qlxmsf]  .rzi { font-size: 0.95rem; }

.ev-details[b-xcw3qlxmsf] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    color: var(--sc-primary-600, var(--sc-primary-500));
}

.ev-details[b-xcw3qlxmsf]  .rzi { font-size: 1rem; }

.ev-body[b-xcw3qlxmsf] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 18px;
    padding-top: var(--sc-space-4);
}

/* ── Featured card ───────────────────────────────────────────────────────── */
.ev-feat[b-xcw3qlxmsf] {
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ev-c-soft);
    border: 1px solid var(--ev-c);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ev-feat:hover[b-xcw3qlxmsf] { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
.ev-feat:focus-visible[b-xcw3qlxmsf] { outline: 2px solid var(--ev-c); outline-offset: 2px; }

.ev-feat__top[b-xcw3qlxmsf] { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.ev-kicker[b-xcw3qlxmsf] {
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ev-c);
}

.ev-count[b-xcw3qlxmsf] {
    white-space: nowrap;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.ev-feat__main[b-xcw3qlxmsf] { display: flex; gap: 16px; align-items: center; }
.ev-feat__text[b-xcw3qlxmsf] { min-width: 0; }
.ev-feat__text h3[b-xcw3qlxmsf] { margin: 0; font-size: 1.25rem; letter-spacing: -0.01em; }
.ev-feat__text p[b-xcw3qlxmsf] { margin: 4px 0 0; color: var(--sc-text-secondary); font-size: 0.84rem; }

/* Calendar-page tile: coloured month strip, big day, weekday under it. */
.ev-tile[b-xcw3qlxmsf] {
    flex: none;
    width: 68px;
    border-radius: 12px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    text-align: center;
    overflow: hidden;
}

.ev-tile__m[b-xcw3qlxmsf] {
    background: var(--ev-c);
    color: #fff;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 0;
}

/* The strip is a light accent in dark mode, so its text has to go dark to stay legible. */
[data-theme$="-dark"] .ev-tile__m[b-xcw3qlxmsf] { color: #0b1220; }

.ev-tile__d[b-xcw3qlxmsf] { font-size: 1.6rem; font-weight: 700; padding: 4px 0 0; line-height: 1.1; }
.ev-tile__w[b-xcw3qlxmsf] { font-size: 0.69rem; color: var(--sc-text-tertiary); padding-bottom: 6px; }

.ev-chips[b-xcw3qlxmsf] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

.ev-chip[b-xcw3qlxmsf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    color: var(--sc-text-secondary);
}

.ev-chip[b-xcw3qlxmsf]  .rzi { font-size: 0.8rem; }
.ev-chip--type[b-xcw3qlxmsf] {
    background: var(--ev-c-soft);
    border-color: color-mix(in srgb, var(--ev-c) 26%, transparent);
    color: var(--ev-c);
    font-weight: 600;
}

.ev-chip--closed[b-xcw3qlxmsf] {
    background: var(--sc-danger-50, #fef2f2);
    border-color: rgba(220, 38, 38, 0.22);
    color: var(--sc-danger-600, #dc2626);
    font-weight: 600;
}

[data-theme$="-dark"] .ev-chip--closed[b-xcw3qlxmsf] {
    background: #35100f;
    border-color: rgba(248, 113, 113, 0.26);
    color: #fca5a5;
}

/* ── Later list ──────────────────────────────────────────────────────────── */
.ev-list h5[b-xcw3qlxmsf] {
    margin: 2px 0 8px;
    font-size: 0.69rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sc-text-tertiary);
}

.ev-row[b-xcw3qlxmsf] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
}

.ev-row + .ev-row[b-xcw3qlxmsf] { border-top: 1px dashed var(--sc-border); border-radius: 10px; }
.ev-row:hover[b-xcw3qlxmsf] { background: var(--sc-surface-variant); border-color: var(--sc-border); }
.ev-row:focus-visible[b-xcw3qlxmsf] { outline: 2px solid var(--ev-c); outline-offset: 2px; }

.ev-mini[b-xcw3qlxmsf] {
    width: 46px;
    flex: none;
    text-align: center;
    border-radius: 9px;
    background: var(--ev-c-soft);
    color: var(--ev-c);
    padding: 5px 0;
}

.ev-mini b[b-xcw3qlxmsf] { display: block; font-size: 1.05rem; line-height: 1.1; }
.ev-mini span[b-xcw3qlxmsf] { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; }

.ev-row__t[b-xcw3qlxmsf] { min-width: 0; flex: 1; }

.ev-row__t b[b-xcw3qlxmsf] {
    display: block;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-row__t small[b-xcw3qlxmsf] {
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--sc-text-secondary);
    font-size: 0.75rem;
    margin-top: 2px;
    flex-wrap: wrap;
}

.ev-row__t small i[b-xcw3qlxmsf] { width: 6px; height: 6px; border-radius: 50%; background: var(--ev-c); flex: none; }

.ev-rel[b-xcw3qlxmsf] { font-size: 0.75rem; color: var(--sc-text-tertiary); white-space: nowrap; }
.ev-go[b-xcw3qlxmsf] { color: var(--sc-text-tertiary); display: grid; place-items: center; }
.ev-row:hover .ev-go[b-xcw3qlxmsf] { color: var(--sc-text-primary); transform: translateX(2px); }
.ev-empty[b-xcw3qlxmsf] { padding: 20px 10px; color: var(--sc-text-secondary); font-size: 0.81rem; }
.ev-more[b-xcw3qlxmsf] { margin-top: 8px; }

@media (max-width: 820px) {
    .ev-body[b-xcw3qlxmsf] { grid-template-columns: 1fr; }
    .ev-head__link[b-xcw3qlxmsf] { margin-left: 0; }
}

@media (max-width: 600px) {
    .ev-card__top[b-xcw3qlxmsf] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 12px;
        align-items: start;
    }

    /* Lets the title, description and badges place themselves on ev-card__top's grid. */
    .ev-card__text[b-xcw3qlxmsf] { display: contents; }
    .ev-tile[b-xcw3qlxmsf] { grid-row: 1 / 3; }
    .ev-card__row[b-xcw3qlxmsf], .ev-card__text p[b-xcw3qlxmsf] { grid-column: 2; }
    .ev-chips[b-xcw3qlxmsf] { grid-column: 1 / -1; }
}

/* Dark: the pink marks need a lighter ink than the light theme's #db2777, which goes muddy on a
   dark tint. */
[data-theme$="-dark"] .ev-head__ic[b-xcw3qlxmsf],
[data-theme$="-dark"] .md-sec-chip-events[b-xcw3qlxmsf] {
    color: #f9a8d4;
}
/* /Pages/Notifications/NotificationCenter.razor.rz.scp.css */
/* Page Layout */
.page-header[b-5i743pa93j] {
    margin-bottom: var(--sc-space-8);
}

.header-content[b-5i743pa93j] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-title-section[b-5i743pa93j] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.page-title[b-5i743pa93j] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin: 0;
}

.title-icon[b-5i743pa93j] {
    font-size: 2rem;
    color: var(--rz-text-color);
}

.page-subtitle[b-5i743pa93j] {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.95rem;
}

.header-actions[b-5i743pa93j] {
    display: flex;
    gap: var(--sc-space-2);
    align-items: center;
}
/* /Pages/Profile/ChangePassword.razor.rz.scp.css */
/* A simple 3-field form doesn't need the full page width every list/detail page
   uses — cap it like other narrow settings forms so fields don't stretch edge
   to edge on a wide monitor. */
.cp-card[b-iang26sb1a] {
    max-width: 560px;
}

.cp-actions[b-iang26sb1a] {
    display: flex;
    gap: var(--sc-space-3);
    justify-content: flex-end;
    margin-top: var(--sc-space-4);
}
/* /Pages/Profile/MyProfile.razor.rz.scp.css */
/* ============================================
   Profile Page - Modern Glassmorphism Design
   ============================================ */

.sc-page[b-okavxwki03] {
    animation: fadeIn-b-okavxwki03 0.5s ease-out;
}

@keyframes fadeIn-b-okavxwki03 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-okavxwki03 {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes pulse-b-okavxwki03 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Breadcrumb */
.profile-breadcrumb[b-okavxwki03] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-3) var(--sc-space-4);
    margin-bottom: var(--sc-space-8);
    font-size: 0.875rem;
    background: var(--sc-surface);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--sc-gray-200);
}

.profile-breadcrumb .breadcrumb-link[b-okavxwki03] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    color: var(--rz-text-secondary-color);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: var(--sc-space-1) var(--sc-space-2);
    border-radius: 6px;
}

.profile-breadcrumb .breadcrumb-link:hover[b-okavxwki03] {
    color: var(--sc-primary-500);
    background: rgba(var(--sc-primary-rgb), 0.1);
}

.profile-breadcrumb .breadcrumb-link .rzi[b-okavxwki03] {
    font-size: 1.1rem;
}

.profile-breadcrumb .breadcrumb-separator[b-okavxwki03] {
    color: var(--rz-text-disabled-color);
    font-size: 1rem;
    opacity: 0.5;
}

.profile-breadcrumb .breadcrumb-current[b-okavxwki03] {
    color: var(--rz-text-color);
    font-weight: 600;
    background: var(--theme-primary-500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Profile hero (redesign) — avatar + change-photo + role badge, on our tokens */
.pf-hero[b-okavxwki03] {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border, var(--sc-gray-200));
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: var(--sc-space-6);
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(16, 44, 74, .06);
}

.pf-avatar[b-okavxwki03] {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, var(--sc-primary-500), var(--sc-primary-500));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 24px;
    cursor: pointer;
    flex: 0 0 72px;
    overflow: hidden;
}

.pf-avatar img[b-okavxwki03] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-avatar-edit[b-okavxwki03] {
    position: absolute;
    inset: auto 0 0 0;
    height: 24px;
    background: rgba(15, 44, 74, .55);
    display: grid;
    place-items: center;
    color: #fff;
    opacity: 0;
    transition: opacity .15s;
}

.pf-avatar:hover .pf-avatar-edit[b-okavxwki03] {
    opacity: 1;
}

.pf-avatar-edit .rzi[b-okavxwki03] {
    font-size: 14px;
}

.pf-hero-id[b-okavxwki03] {
    flex: 1;
    min-width: 0;
}

.pf-hero-id h1[b-okavxwki03] {
    margin: 0 0 3px;
    font-size: 24px;
    font-weight: 700;
    color: var(--sc-text-primary, var(--rz-text-color));
    letter-spacing: -.01em;
}

.pf-hero-email[b-okavxwki03] {
    margin: 0 0 8px;
    color: var(--sc-text-secondary, var(--rz-text-secondary-color));
    font-size: 13.5px;
}

.pf-role[b-okavxwki03] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--sc-badge-sky-bg, var(--sc-primary-50));
    color: var(--sc-badge-sky-text, var(--sc-primary-700));
}

.pf-role .rzi[b-okavxwki03] {
    font-size: 15px;
}

.pf-hero-actions[b-okavxwki03] {
    display: flex;
    gap: 9px;
}

.pf-btn[b-okavxwki03] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid var(--sc-border, var(--sc-gray-200));
    background: var(--sc-surface);
    color: var(--sc-text-primary, var(--rz-text-color));
    cursor: pointer;
}

.pf-btn .rzi[b-okavxwki03] {
    font-size: 16px;
}

.pf-btn:hover[b-okavxwki03] {
    border-color: var(--sc-primary-300);
}

@media (max-width: 640px) {
    .pf-hero-actions[b-okavxwki03] {
        width: 100%;
    }

    .pf-btn[b-okavxwki03] {
        width: 100%;
        justify-content: center;
    }
}

/* Page Header */
.page-header[b-okavxwki03] {
    margin-bottom: var(--sc-space-8);
}

.header-content[b-okavxwki03] {
    display: flex;
    justify-content: space-between;
    padding: var(--sc-space-5) var(--sc-space-6);
    align-items: flex-start;
    gap: var(--sc-space-4);
    flex-wrap: wrap;
}

.header-title-section[b-okavxwki03] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.page-title[b-okavxwki03] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin: 0;
}

.title-icon[b-okavxwki03] {
    font-size: 2rem;
    color: var(--rz-primary);
}

.page-subtitle[b-okavxwki03] {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.95rem;
}

.header-actions[b-okavxwki03] {
    display: flex;
    gap: var(--sc-space-3);
}

/* Profile Content - one card per row, full width */
.profile-content[b-okavxwki03] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sc-space-6);
}

/* Profile Cards - Modern Light Theme Design */
.profile-card[b-okavxwki03] {
    background: var(--sc-surface);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid var(--sc-gray-200);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideUp-b-okavxwki03 0.5s ease-out backwards;
}

.profile-card:nth-child(1)[b-okavxwki03] {
    animation-delay: 0.1s;
}

.profile-card:nth-child(2)[b-okavxwki03] {
    animation-delay: 0.15s;
}

.profile-card:nth-child(3)[b-okavxwki03] {
    animation-delay: 0.2s;
}

.profile-card:nth-child(4)[b-okavxwki03] {
    animation-delay: 0.25s;
}

.profile-card:nth-child(5)[b-okavxwki03] {
    animation-delay: 0.3s;
}

@keyframes slideUp-b-okavxwki03 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-card:hover[b-okavxwki03] {
    border-color: var(--sc-gray-300);
}

.profile-card .card-header[b-okavxwki03] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sc-space-1) var(--sc-space-6);
    border-bottom: 1px solid var(--sc-gray-100);
    background: var(--sc-surface-variant);
}

.profile-card .card-title-section[b-okavxwki03] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-5);
    padding: var(--sc-space-5) var(--sc-space-6);
}

.profile-card .card-icon[b-okavxwki03] {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    background: var(--sc-primary-100);
}

.profile-card .card-icon .rzi[b-okavxwki03] {
    font-size: 1.4rem;
    color: var(--sc-primary-500);
    position: relative;
    z-index: 1;
}

.profile-card .card-title-section h2[b-okavxwki03] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rz-text-color);
    letter-spacing: -0.3px;
}

.profile-card .card-title-section p[b-okavxwki03] {
    margin: var(--sc-space-2) 0 0 0;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

.profile-card .card-body[b-okavxwki03] {
    padding: var(--sc-space-8);
}

/* Codes Section - Removed: now uses info-grid */

/* Info Grid - 4 items per row */
.info-grid[b-okavxwki03] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sc-space-5);
}

@media (max-width: 1200px) {
    .info-grid[b-okavxwki03] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.info-item[b-okavxwki03] {
    display: flex;
    flex-direction: column;
    /* Explicit (not left to the flex default) — a same-named global .info-item
       rule elsewhere (settings-page-content.css) sets align-items: center and
       justify-content: space-between for its own unrelated row layout; since
       this rule never set those properties, the cascade let that global value
       leak in per-property and centered every label/value in this column
       layout instead of stacking them left-aligned. */
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: var(--sc-space-2);
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--sc-gray-50);
    border-radius: 12px;
    border: 1px solid var(--sc-gray-200);
    transition: all 0.3s ease;
}

.info-item:hover[b-okavxwki03] {
    border-color: var(--sc-gray-300);
}

.info-label[b-okavxwki03] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.info-value[b-okavxwki03] {
    font-size: 1rem;
    color: var(--rz-text-color);
    font-weight: 600;
}

.info-value.status-active[b-okavxwki03] {
    color: var(--sc-success-500);
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    background: var(--sc-success-50);
    padding: var(--sc-space-2) var(--sc-space-3);
    border-radius: 16px;
    width: fit-content;
}

.info-value.status-active .rzi[b-okavxwki03] {
    font-size: 1.1rem;
}

/* Form Grid - 4 fields per row */
.form-grid[b-okavxwki03] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sc-space-5);
}

@media (max-width: 1200px) {
    .form-grid[b-okavxwki03] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.form-group[b-okavxwki03] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.form-group label[b-okavxwki03] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rz-text-color);
    letter-spacing: 0.3px;
}

.form-group .rz-textbox[b-okavxwki03] {
    border-radius: 10px !important;
    border: 1px solid var(--sc-gray-300) !important;
    background: var(--sc-surface) !important;
    transition: all 0.3s ease !important;
}

.form-group .rz-textbox:hover[b-okavxwki03] {
    border-color: rgba(var(--sc-primary-rgb), 0.5) !important;
}

.form-group .rz-textbox:focus-within[b-okavxwki03] {
    border-color: var(--sc-primary-500) !important;
}

.form-actions[b-okavxwki03] {
    display: flex;
    justify-content: flex-end;
    gap: var(--sc-space-4);
    margin-top: var(--sc-space-8);
    padding-top: var(--sc-space-6);
    border-top: 1px solid var(--sc-gray-200);
}

.form-actions .rz-button[b-okavxwki03] {
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: var(--sc-space-3) var(--sc-space-6) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-actions .rz-button:hover[b-okavxwki03] {
    transform: translateY(-2px) !important;
}

/* Notification Settings - 4 per row */
.notification-settings[b-okavxwki03] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sc-space-4);
}

@media (max-width: 1200px) {
    .notification-settings[b-okavxwki03] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.notification-item[b-okavxwki03] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--sc-gray-50);
    border: 1px solid var(--sc-gray-200);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-item:hover[b-okavxwki03] {
    border-color: var(--sc-gray-300);
}

.notification-info[b-okavxwki03] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.notification-title[b-okavxwki03] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.notification-desc[b-okavxwki03] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* Security Options - 3 per row */
.security-options[b-okavxwki03] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sc-space-4);
}

@media (max-width: 1024px) {
    .security-options[b-okavxwki03] {
        grid-template-columns: 1fr;
    }
}

.security-item[b-okavxwki03] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--sc-gray-50);
    border: 1px solid var(--sc-gray-200);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.security-item:hover[b-okavxwki03] {
    border-color: var(--sc-gray-300);
}

.security-icon[b-okavxwki03] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--sc-primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.security-icon .rzi[b-okavxwki03] {
    font-size: 1.3rem;
    color: var(--sc-primary-500);
    transition: color 0.3s ease;
}

.security-info[b-okavxwki03] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.security-title[b-okavxwki03] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.security-desc[b-okavxwki03] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.security-desc.enabled[b-okavxwki03] {
    color: var(--sc-success-500);
    font-weight: 500;
}

.security-desc.disabled[b-okavxwki03] {
    color: var(--rz-text-secondary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .profile-breadcrumb[b-okavxwki03] {
        padding: var(--sc-space-2) var(--sc-space-3);
        font-size: 0.8rem;
    }

    .info-grid[b-okavxwki03],
    .form-grid[b-okavxwki03] {
        grid-template-columns: 1fr;
    }

    .profile-card[b-okavxwki03] {
        border-radius: 12px;
    }

    .profile-card .card-header[b-okavxwki03] {
        padding: var(--sc-space-5);
    }

    .profile-card .card-body[b-okavxwki03] {
        padding: var(--sc-space-5);
    }

    .security-item[b-okavxwki03] {
        flex-wrap: wrap;
    }

    .security-info[b-okavxwki03] {
        flex: 1 1 calc(100% - 56px);
    }

    .security-item .rz-button[b-okavxwki03] {
        width: 100%;
        margin-top: var(--sc-space-3);
    }
}

@media (max-width: 480px) {
    .profile-card .card-header[b-okavxwki03] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sc-space-4);
    }

    .form-actions[b-okavxwki03] {
        flex-direction: column;
    }

    .form-actions .rz-button[b-okavxwki03] {
        width: 100%;
    }

    .notification-item[b-okavxwki03] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sc-space-4);
    }

    .notification-item .rz-switch[b-okavxwki03] {
        align-self: flex-end;
    }
}

/* Leave Balances - 4 per row */
.leave-balances[b-okavxwki03] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sc-space-4);
}

@media (max-width: 1200px) {
    .leave-balances[b-okavxwki03] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.leave-item[b-okavxwki03] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--sc-gray-50);
    border: 1px solid var(--sc-gray-200);
    border-radius: 10px;
}

.leave-icon[b-okavxwki03] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--sc-primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.leave-icon .rzi[b-okavxwki03] {
    font-size: 1.25rem;
    color: var(--sc-primary-500);
}

.leave-details[b-okavxwki03] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.leave-type[b-okavxwki03] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.leave-days[b-okavxwki03] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* Theme Selector - 8 swatches per row (deep selector to override scoped child) */
[b-okavxwki03] .theme-grid.grid-view {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: var(--sc-space-3);
}

@media (max-width: 1400px) {
    [b-okavxwki03] .theme-grid.grid-view {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

@media (max-width: 1024px) {
    [b-okavxwki03] .theme-grid.grid-view {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 640px) {
    [b-okavxwki03] .theme-grid.grid-view {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Qualifications row */
.qualifications-list[b-okavxwki03] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
    margin-top: var(--sc-space-3);
}

.qualification-tag[b-okavxwki03] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-2) var(--sc-space-3);
    background: var(--sc-gray-50);
    border: 1px solid var(--sc-gray-200);
    border-radius: 16px;
    font-size: 0.85rem;
    color: var(--rz-text-color);
}

.section-subtitle[b-okavxwki03] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rz-text-color);
    margin: var(--sc-space-5) 0 0 0;
}

/* ── Section-colour modifiers for .card-icon ──────────────────────────────────
   The markup tags each profile card's icon with account / notifications /
   professional / security. The base .profile-card .card-icon above sets the box and
   a single primary tint, and none of the four modifiers were defined anywhere, so
   every section icon rendered the same colour and the tinting was inert. */

.profile-card .card-icon.account[b-okavxwki03]       { background: rgba(var(--sc-primary-rgb, 59, 130, 246), 0.14); }
.profile-card .card-icon.account .rzi[b-okavxwki03]  { color: var(--sc-primary-500); }

.profile-card .card-icon.notifications[b-okavxwki03]      { background: rgba(245, 158, 11, 0.16); }
.profile-card .card-icon.notifications .rzi[b-okavxwki03] { color: var(--sc-warning-700); }

.profile-card .card-icon.professional[b-okavxwki03]       { background: rgba(99, 102, 241, 0.14); }
.profile-card .card-icon.professional .rzi[b-okavxwki03]  { color: var(--sc-badge-blue-text); }

.profile-card .card-icon.security[b-okavxwki03]           { background: rgba(22, 163, 74, 0.14); }
.profile-card .card-icon.security .rzi[b-okavxwki03]      { color: #15803d; }

/* ── Photo upload dialog ─────────────────────────────────────────────────────
   Rendered from a RenderFragment (MyProfile.razor:754). The <InputFile> is styled
   through .photo-file-input; neither had a rule. */
.photo-upload-dialog[b-okavxwki03] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
    min-width: 280px;
}

.photo-file-input[b-okavxwki03] {
    display: block;
    width: 100%;
    padding: var(--sc-space-2);
    border: 1px dashed var(--sc-border);
    border-radius: 8px;
    background: var(--sc-surface-variant, var(--sc-gray-100));
    font-size: 0.83rem;
    cursor: pointer;
}

.photo-file-input:hover[b-okavxwki03] { border-color: var(--sc-primary-500); }
/* /Pages/Search/GlobalSearch.razor.rz.scp.css */
/* Page Layout */
.page-header[b-84x21amayp] {
    margin-bottom: var(--sc-space-8);
}

.header-content[b-84x21amayp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-title-section[b-84x21amayp] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.page-title[b-84x21amayp] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin: 0;
}

.title-icon[b-84x21amayp] {
    font-size: 2rem;
    color: var(--rz-text-color);
}

.page-subtitle[b-84x21amayp] {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.95rem;
}

.header-actions[b-84x21amayp] {
    display: flex;
    gap: var(--sc-space-2);
    align-items: center;
}
/* /Widgets/Dashboard/AttendanceRateWidget.razor.rz.scp.css */
/* Attendance-rate progress ring — CSS conic-gradient, no charting dependency. Responsive inside
   the widget cell (sizes to the cell, capped so a Small tile stays neat). */
.sc-ring-wrap[b-i13ggnq35v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2, 0.5rem);
    width: 100%;
    min-height: 140px;
}

.sc-ring[b-i13ggnq35v] {
    position: relative;
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1;
    border-radius: 50%;
    /* --sc-ring-pct (0-100) sets the sweep; unfilled arc rides the light brand track. */
    background: conic-gradient(
        var(--sc-ring-fill, var(--sc-primary-500)) calc(var(--sc-ring-pct, 0) * 1%),
        var(--sc-primary-100, #dbeafe) 0
    );
}

/* Punch out the centre so only the ring band shows. */
.sc-ring[b-i13ggnq35v]::before {
    content: "";
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: var(--sc-surface, #ffffff);
}

.sc-ring-center[b-i13ggnq35v] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.sc-ring-value[b-i13ggnq35v] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sc-ring-fill, var(--sc-primary-500));
}

.sc-ring-label[b-i13ggnq35v] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-text-secondary, #64748b);
}

.sc-ring-caption[b-i13ggnq35v] {
    font-size: 0.8rem;
    color: var(--sc-text-secondary, #64748b);
    text-align: center;
}

/* Empty state when no register has been marked for today. */
.sc-ring-empty[b-i13ggnq35v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2, 0.5rem);
    min-height: 140px;
    color: var(--sc-text-secondary, #64748b);
    font-size: 0.85rem;
    text-align: center;
}

.sc-ring-empty-icon[b-i13ggnq35v] {
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-size: 2rem;
    color: var(--sc-primary-500, #3b82f6);
}
/* /Widgets/Dashboard/CollectionRateWidget.razor.rz.scp.css */
/* Collection-rate progress ring — CSS conic-gradient, no charting dependency. Responsive inside the
   widget cell (sizes to the cell, capped so a Small tile stays neat). Mirrors AttendanceRateWidget and
   adds a target notch on the ring band. */
.sc-ring-wrap[b-z1oznllshx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2, 0.5rem);
    width: 100%;
    min-height: 140px;
}

.sc-ring[b-z1oznllshx] {
    position: relative;
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1;
    border-radius: 50%;
    /* --sc-ring-pct (0-100) sets the sweep; unfilled arc rides the light brand track. */
    background: conic-gradient(
        var(--sc-ring-fill, var(--sc-primary-500)) calc(var(--sc-ring-pct, 0) * 1%),
        var(--sc-primary-100, #dbeafe) 0
    );
}

/* Punch out the centre so only the ring band shows. */
.sc-ring[b-z1oznllshx]::before {
    content: "";
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: var(--sc-surface, #ffffff);
    z-index: 1;
}

/* Target notch — a short tick across the ring band at the fee-policy target angle. The wrapper is
   rotated from 12 o'clock (matching the conic-gradient origin) and the ::before draws the tick at top. */
.sc-ring-notch[b-z1oznllshx] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: rotate(var(--sc-ring-target-deg, 0deg));
}

.sc-ring-notch[b-z1oznllshx]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    /* 15% inset punch-out on each side leaves a 15%-tall band at top; the tick spans it. */
    height: 15%;
    transform: translateX(-50%);
    background: var(--sc-text-primary, #0f172a);
    opacity: 0.55;
    z-index: 2;
}

.sc-ring-center[b-z1oznllshx] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    z-index: 2;
}

.sc-ring-value[b-z1oznllshx] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sc-ring-fill, var(--sc-primary-500));
}

.sc-ring-label[b-z1oznllshx] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-text-secondary, #64748b);
}

.sc-ring-caption[b-z1oznllshx] {
    font-size: 0.8rem;
    color: var(--sc-text-secondary, #64748b);
    text-align: center;
}

.sc-ring-ontarget[b-z1oznllshx] {
    color: var(--sc-stat-emerald, #059669);
    font-weight: 600;
}

.sc-ring-belowtarget[b-z1oznllshx] {
    color: var(--sc-stat-rose, #e11d48);
    font-weight: 600;
}

/* Empty state when no billing exists yet / the roll-up could not be loaded. */
.sc-ring-empty[b-z1oznllshx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2, 0.5rem);
    min-height: 140px;
    color: var(--sc-text-secondary, #64748b);
    font-size: 0.85rem;
    text-align: center;
}

.sc-ring-empty-icon[b-z1oznllshx] {
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-size: 2rem;
    color: var(--sc-primary-500, #3b82f6);
}

/* The ring is a static paint (no fill animation), so there is nothing to disable for reduced motion;
   the rule is present so future transitions stay opt-out. */
@media (prefers-reduced-motion: reduce) {
    .sc-ring[b-z1oznllshx],
    .sc-ring-notch[b-z1oznllshx] {
        transition: none;
    }
}
/* /Widgets/Dashboard/EnrollmentTrendWidget.razor.rz.scp.css */
/* Monthly active-enrollment columns. Empty state when no enrollments exist yet. */
.sc-enrollment-empty[b-okwwf8hpq2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2, 0.5rem);
    min-height: 180px;
    color: var(--sc-text-secondary, #64748b);
    font-size: 0.85rem;
    text-align: center;
}

.sc-enrollment-empty-icon[b-okwwf8hpq2] {
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-size: 2rem;
    color: var(--sc-primary-500, #3b82f6);
}

/* Honour reduced-motion — kill the column grow animation. */
@media (prefers-reduced-motion: reduce) {
    .sc-enrollment-chart[b-okwwf8hpq2]  path {
        transition: none !important;
        animation: none !important;
    }
}
/* /Widgets/Dashboard/PaymentStatusWidget.razor.rz.scp.css */
/* Payment-status donut — mirrors StudentAttendanceWidget's donut styling (centre label + flat-dot
   legend). Colours are assigned per-slice in the component so semantics stay stable. */
.sc-donut-center[b-wpb1akmoou] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.sc-donut-center-value[b-wpb1akmoou] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sc-primary-500);
}

.sc-donut-center-label[b-wpb1akmoou] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-text-secondary, #64748b);
}

.sc-donut-legend[b-wpb1akmoou] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sc-space-3, 0.75rem);
    margin-top: var(--sc-space-2, 0.5rem);
    font-size: 0.8rem;
    color: var(--sc-text-secondary, #64748b);
}

.sc-donut-legend-item[b-wpb1akmoou] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.sc-donut-legend-item i[b-wpb1akmoou] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
}

.sc-donut-empty[b-wpb1akmoou] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2, 0.5rem);
    min-height: 160px;
    color: var(--sc-text-secondary, #64748b);
    font-size: 0.85rem;
    text-align: center;
}

.sc-donut-empty-icon[b-wpb1akmoou] {
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-size: 2rem;
    color: var(--sc-primary-500, #3b82f6);
}

/* Honour reduced-motion — kill the donut sweep animation. */
@media (prefers-reduced-motion: reduce) {
    .sc-payment-donut[b-wpb1akmoou]  path {
        transition: none !important;
        animation: none !important;
    }
}
/* /Widgets/Dashboard/RevenueChartWidget.razor.rz.scp.css */
/* Monthly collected-revenue columns. Empty state when no completed payments exist yet. */
.sc-revenue-empty[b-uglds0qqmq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2, 0.5rem);
    min-height: 180px;
    color: var(--sc-text-secondary, #64748b);
    font-size: 0.85rem;
    text-align: center;
}

.sc-revenue-empty-icon[b-uglds0qqmq] {
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-size: 2rem;
    color: var(--sc-primary-500, #3b82f6);
}

/* Honour reduced-motion — kill the column grow animation. */
@media (prefers-reduced-motion: reduce) {
    .sc-revenue-chart[b-uglds0qqmq]  path {
        transition: none !important;
        animation: none !important;
    }
}
/* /Widgets/Dashboard/RoomStatusWidget.razor.rz.scp.css */
/* Center occupancy label inside the room-status donut. */
.sc-donut-center[b-amdm20d493] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.sc-donut-center-value[b-amdm20d493] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sc-primary-500);
}

.sc-donut-center-label[b-amdm20d493] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-text-secondary, #64748b);
}

/* Legend beneath the donut — one flat colour dot per slice. */
.sc-donut-legend[b-amdm20d493] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sc-space-3, 0.75rem);
    margin-top: var(--sc-space-2, 0.5rem);
    font-size: 0.8rem;
    color: var(--sc-text-secondary, #64748b);
}

.sc-donut-legend-item[b-amdm20d493] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.sc-donut-legend-item i[b-amdm20d493] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
}

/* Empty state when no rooms are configured. */
.sc-donut-empty[b-amdm20d493] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2, 0.5rem);
    min-height: 160px;
    color: var(--sc-text-secondary, #64748b);
    font-size: 0.85rem;
    text-align: center;
}

.sc-donut-empty-icon[b-amdm20d493] {
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-size: 2rem;
    color: var(--sc-primary-500, #3b82f6);
}

/* Honour reduced-motion — kill the donut sweep animation. */
@media (prefers-reduced-motion: reduce) {
    .sc-room-donut[b-amdm20d493]  path {
        transition: none !important;
        animation: none !important;
    }
}
/* /Widgets/Dashboard/StaffAttendanceWidget.razor.rz.scp.css */
/* Center rate label inside the staff-attendance donut. */
.sc-donut-center[b-dgzojdpzoj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.sc-donut-center-value[b-dgzojdpzoj] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sc-primary-500);
}

.sc-donut-center-label[b-dgzojdpzoj] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-text-secondary, #64748b);
}

/* Legend beneath the donut — one flat colour dot per slice. */
.sc-donut-legend[b-dgzojdpzoj] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sc-space-3, 0.75rem);
    margin-top: var(--sc-space-2, 0.5rem);
    font-size: 0.8rem;
    color: var(--sc-text-secondary, #64748b);
}

.sc-donut-legend-item[b-dgzojdpzoj] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.sc-donut-legend-item i[b-dgzojdpzoj] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
}

/* Empty state when no staff register has been marked for today. */
.sc-donut-empty[b-dgzojdpzoj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2, 0.5rem);
    min-height: 160px;
    color: var(--sc-text-secondary, #64748b);
    font-size: 0.85rem;
    text-align: center;
}

.sc-donut-empty-icon[b-dgzojdpzoj] {
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-size: 2rem;
    color: var(--sc-primary-500, #3b82f6);
}

/* Honour reduced-motion — kill the donut sweep animation. */
@media (prefers-reduced-motion: reduce) {
    .sc-attendance-donut[b-dgzojdpzoj]  path {
        transition: none !important;
        animation: none !important;
    }
}
/* /Widgets/Dashboard/StudentAttendanceWidget.razor.rz.scp.css */
/* Center rate label inside the attendance donut. */
.sc-donut-center[b-kh6y0wyzex] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.sc-donut-center-value[b-kh6y0wyzex] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sc-primary-500);
}

.sc-donut-center-label[b-kh6y0wyzex] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-text-secondary, #64748b);
}

/* Legend beneath the donut — one flat colour dot per slice. */
.sc-donut-legend[b-kh6y0wyzex] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sc-space-3, 0.75rem);
    margin-top: var(--sc-space-2, 0.5rem);
    font-size: 0.8rem;
    color: var(--sc-text-secondary, #64748b);
}

.sc-donut-legend-item[b-kh6y0wyzex] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.sc-donut-legend-item i[b-kh6y0wyzex] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
}

/* Empty state when no register has been marked for today. */
.sc-donut-empty[b-kh6y0wyzex] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2, 0.5rem);
    min-height: 160px;
    color: var(--sc-text-secondary, #64748b);
    font-size: 0.85rem;
    text-align: center;
}

.sc-donut-empty-icon[b-kh6y0wyzex] {
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-size: 2rem;
    color: var(--sc-primary-500, #3b82f6);
}

/* Honour reduced-motion — kill the donut sweep animation. */
@media (prefers-reduced-motion: reduce) {
    .sc-attendance-donut[b-kh6y0wyzex]  path {
        transition: none !important;
        animation: none !important;
    }
}
/* /Widgets/Dashboard/TotalRevenueWidget.razor.rz.scp.css */
/* Number + sparkline — hero value over a compact trailing-months area chart. Sizes to the widget cell;
   the chart keeps a fixed short height (sparklines need a defined height to render) at 100% width. */
.sc-spark-wrap[b-c9ghyegrg0] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1, 0.25rem);
    width: 100%;
}

.sc-spark-head[b-c9ghyegrg0] {
    display: flex;
    align-items: baseline;
    gap: var(--sc-space-2, 0.5rem);
}

.sc-spark-value[b-c9ghyegrg0] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sc-primary-500);
    line-height: 1.1;
}

.sc-spark-caption[b-c9ghyegrg0] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-text-secondary, #64748b);
}

.sc-spark-delta[b-c9ghyegrg0] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.sc-spark-delta.up[b-c9ghyegrg0] {
    color: var(--sc-stat-emerald, #059669);
}

.sc-spark-delta.down[b-c9ghyegrg0] {
    color: var(--sc-stat-rose, #e11d48);
}

.sc-spark-delta-icon[b-c9ghyegrg0] {
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-size: 1rem;
}

.sc-spark-chart[b-c9ghyegrg0] {
    margin-top: var(--sc-space-1, 0.25rem);
}

.sc-spark-empty[b-c9ghyegrg0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2, 0.5rem);
    min-height: 120px;
    color: var(--sc-text-secondary, #64748b);
    font-size: 0.85rem;
    text-align: center;
}

.sc-spark-empty-icon[b-c9ghyegrg0] {
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-size: 2rem;
    color: var(--sc-primary-500, #3b82f6);
}

/* Honour reduced-motion — kill the sparkline draw animation. */
@media (prefers-reduced-motion: reduce) {
    .sc-spark-chart[b-c9ghyegrg0]  path {
        transition: none !important;
        animation: none !important;
    }
}