/* Atypical Design System v1.4 (dark-first) — the parts MudBlazor's theme cannot express.
   Colours that MudBlazor has a slot for live in Theming/AtypicalTheme.cs; this file holds the tokens
   it has no slot for (status inks, identity hues and module zones, the navy emphasis) and the shell/card patterns
   built on them. Components read var(--at-*); a hex outside this block is a bug.
   Light on :root, dark on .at-dark (set on MudLayout from the same flag that drives the theme). */

:root {
    color-scheme: light;
    /* v1.4 grounds: the sidebar is the page's own ground. */
    --at-bg-page: #F6F8FA;
    --at-bg-surface: #FFFFFF;
    --at-bg-sunken: #F1F5F8;
    --at-bg-raised: #FFFFFF;
    --at-border: rgba(27, 39, 49, .08);
    --at-border-focus: #17739F;
    --at-overlay: rgba(27, 39, 49, .40);
    --at-accent-quiet: rgba(23, 115, 159, .10);
    --at-accent-fill: #0F3A52;
    --at-accent-fill-fg: #FFFFFF;
    --at-surface-gradient: #FFFFFF;
    --at-card-ring: 0 0 0 1px rgba(27, 39, 49, .06);
    --at-card-shadow: var(--at-card-ring), 0 1px 2px rgba(27, 39, 49, .04), 0 8px 24px -12px rgba(27, 39, 49, .14);
    --at-divider: rgba(27, 39, 49, .07);
    --at-metric-gradient: linear-gradient(180deg, #0F3A52 0%, #17739F 100%);
    --at-glow: radial-gradient(closest-side, rgba(87, 180, 227, .26), rgba(87, 180, 227, 0));
    --at-surface-hover: #F8FAFC;
    /* The shell tokens now describe the page-ground sidebar, not a navy one. */
    --at-shell-text: #395061;
    --at-shell-strong: #0F3A52;
    --at-shell-muted: #55697A;
    --at-shell-active: var(--at-accent-quiet);
    --at-shell-hover: rgba(27, 39, 49, .05);
    --at-shell-border: var(--at-border);
    --at-sky-fill: #57B4E3; /* a fill, never text */
    --at-emphasis: #0F3A52;
    --at-emphasis-muted: #B9C6D1;
    --at-emphasis-positive: #4CC3A0;
    --at-emphasis-track: rgba(255, 255, 255, .14);
    --at-emphasis-warm: #FFB59A;      /* peach: the target, the one figure to watch */
    --at-emphasis-warm-fill: #F08057; /* coral: progress and share fills; a graphic, never text */
    --at-success-ink: #0E7259;
    --at-warning-ink: #8A5A00;
    --at-danger-ink: #A8322C;
    --at-info-ink: #135F84;
    --at-danger-bg: #FBE9E7;
    --at-warning-bg: #FBF0DC;
    --at-hue-sky-tint: #E7F2F9;   --at-hue-sky-ink: #135F84;
    --at-hue-blue-tint: #E3EDF4;  --at-hue-blue-ink: #24506B;
    --at-hue-teal-tint: #DDF3F0;  --at-hue-teal-ink: #0D6359;
    --at-hue-indigo-tint: #E9EEFC; --at-hue-indigo-ink: #3A50A8;
    --at-hue-violet-tint: #F0EDFF; --at-hue-violet-ink: #5A49A5;
    --at-hue-coral-tint: #FDEBE4; --at-hue-coral-ink: #9A4222;
    --at-hue-on: #FFFFFF;
    --at-hue-sky: #57B4E3;    --at-hue-sky-strong: #17739F;    --at-hue-sky-on-shell: #6FC2EA;
    --at-hue-blue: #2F6586;   --at-hue-blue-strong: #2F6586;   --at-hue-blue-on-shell: #7FAED0;
    --at-hue-teal: #20A99B;   --at-hue-teal-strong: #127A70;   --at-hue-teal-on-shell: #3CC7B8;
    --at-hue-indigo: #6D8EEA; --at-hue-indigo-strong: #4562C7; --at-hue-indigo-on-shell: #8EA8F0;
    --at-hue-violet: #8B78D8; --at-hue-violet-strong: #5A49A5; --at-hue-violet-on-shell: #A898EC;
    --at-hue-coral: #F08057;  --at-hue-coral-strong: #B4512C;  --at-hue-coral-on-shell: #F59A79;
    --at-shadow-1: 0 1px 2px rgb(27 39 49 / .06), 0 1px 3px rgb(27 39 49 / .08);
}

.at-dark {
    color-scheme: dark;
    --at-bg-page: #0A0F14;
    --at-bg-surface: #0F161D;
    --at-bg-sunken: #0C1419;
    --at-bg-raised: #18242D;
    --at-border: rgba(255, 255, 255, .08);
    --at-border-focus: #6FC2EA;
    --at-overlay: rgba(0, 0, 0, .60);
    --at-accent-quiet: rgba(87, 180, 227, .14);
    --at-accent-fill: #57B4E3;
    --at-accent-fill-fg: #0A0F14;
    --at-surface-gradient: linear-gradient(180deg, #121A22 0%, #0E151B 100%);
    --at-card-ring: 0 0 0 1px rgba(255, 255, 255, .035);
    --at-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--at-card-ring);
    --at-divider: rgba(255, 255, 255, .06);
    --at-metric-gradient: linear-gradient(180deg, #FFFFFF 0%, #6FC2EA 100%);
    --at-glow: radial-gradient(closest-side, rgba(87, 180, 227, .22), rgba(87, 180, 227, 0));
    --at-surface-hover: #131C25;
    --at-shell-text: #D5DEE6;
    --at-shell-strong: #FFFFFF;
    --at-shell-muted: #9FB2C0;
    --at-shell-active: var(--at-accent-quiet);
    --at-shell-hover: rgba(255, 255, 255, .05);
    --at-shell-border: var(--at-border);
    --at-emphasis: #163A52;
    --at-success-ink: #4CC3A0;
    --at-warning-ink: #E8A93C;
    --at-danger-ink: #F08A80;
    --at-info-ink: #6FC2EA;
    --at-danger-bg: rgb(240 138 128 / .14);
    --at-warning-bg: rgb(232 169 60 / .14);
    --at-hue-sky-tint: rgba(111, 194, 234, .16);   --at-hue-sky-ink: #A9DDF5;
    --at-hue-blue-tint: rgba(127, 174, 208, .16);  --at-hue-blue-ink: #B7D3E8;
    --at-hue-teal-tint: rgba(60, 199, 184, .16);   --at-hue-teal-ink: #8FE3D9;
    --at-hue-indigo-tint: rgba(142, 168, 240, .16); --at-hue-indigo-ink: #C3D0F8;
    --at-hue-violet-tint: rgba(168, 152, 236, .16); --at-hue-violet-ink: #D2C9F8;
    --at-hue-coral-tint: rgba(245, 154, 121, .16); --at-hue-coral-ink: #FAC6B2;
    --at-hue-on: #111A21;
    --at-hue-sky: #6FC2EA;    --at-hue-sky-strong: #6FC2EA;
    --at-hue-blue: #7FAED0;   --at-hue-blue-strong: #7FAED0;
    --at-hue-teal: #3CC7B8;   --at-hue-teal-strong: #3CC7B8;
    --at-hue-indigo: #8EA8F0; --at-hue-indigo-strong: #8EA8F0;
    --at-hue-violet: #A898EC; --at-hue-violet-strong: #A898EC;
    --at-hue-coral: #F59A79;  --at-hue-coral-strong: #F59A79;
    --at-shadow-1: 0 1px 2px rgb(0 0 0 / .40);
}

/* ---- module hues (v1.3) ------------------------------------------------------------------
   One class sets the five roles; the zones below (nav icon, page header band, metric card) read them.
   An identity, never a state: status keeps its own four colours. */

.at-hue--sky { --h: var(--at-hue-sky); --h-shell: var(--at-hue-sky-on-shell); --h-strong: var(--at-hue-sky-strong); --h-tint: var(--at-hue-sky-tint); --h-ink: var(--at-hue-sky-ink); }
.at-hue--blue { --h: var(--at-hue-blue); --h-shell: var(--at-hue-blue-on-shell); --h-strong: var(--at-hue-blue-strong); --h-tint: var(--at-hue-blue-tint); --h-ink: var(--at-hue-blue-ink); }
.at-hue--teal { --h: var(--at-hue-teal); --h-shell: var(--at-hue-teal-on-shell); --h-strong: var(--at-hue-teal-strong); --h-tint: var(--at-hue-teal-tint); --h-ink: var(--at-hue-teal-ink); }
.at-hue--indigo { --h: var(--at-hue-indigo); --h-shell: var(--at-hue-indigo-on-shell); --h-strong: var(--at-hue-indigo-strong); --h-tint: var(--at-hue-indigo-tint); --h-ink: var(--at-hue-indigo-ink); }
.at-hue--violet { --h: var(--at-hue-violet); --h-shell: var(--at-hue-violet-on-shell); --h-strong: var(--at-hue-violet-strong); --h-tint: var(--at-hue-violet-tint); --h-ink: var(--at-hue-violet-ink); }
.at-hue--coral { --h: var(--at-hue-coral); --h-shell: var(--at-hue-coral-on-shell); --h-strong: var(--at-hue-coral-strong); --h-tint: var(--at-hue-coral-tint); --h-ink: var(--at-hue-coral-ink); }

/* ---- shell ------------------------------------------------------------------------------ */

/* The app bar is the page's own ground with a rule under it: hierarchy lives in the page header,
   and a dark bar competed with it. */
.mud-appbar.at-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-shadow: none;
}

/* v1.4: the drawer is the page's own ground, divided by a hairline. Mud's own nav-link colours are
   overridden here because the theme's DrawerText only reaches the text, not the active state. */
.mud-drawer.at-drawer {
    border-right: 1px solid var(--at-border);
}

/* The primary button fill is its own token pair (ink on light, sky on dark), not the text accent. */
.mud-button-filled.mud-button-filled-primary {
    background-color: var(--at-accent-fill);
    color: var(--at-accent-fill-fg);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--at-accent-fill);
    filter: brightness(1.1);
}

.at-drawer .mud-drawer-content {
    padding: 16px 12px;
}

.at-lockup {
    display: block;
    height: 26px;
    width: auto;
    margin: 4px 8px 16px;
}

.at-drawer .mud-nav-link {
    border-radius: 8px;
    color: var(--at-shell-text);
    position: relative;
}

.at-drawer .mud-nav-link:hover {
    background: var(--at-shell-hover);
}

.at-drawer .mud-nav-link.active {
    background: var(--at-shell-active);
    color: var(--at-shell-strong);
    font-weight: 600;
}

.at-drawer .mud-nav-link .mud-icon-root {
    color: var(--h-strong, var(--at-shell-muted));
}

.at-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--h-strong, var(--at-sky-fill));
}

.at-drawer .mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--h-strong, var(--at-sky-fill));
}

.at-drawer .mud-nav-group > .mud-nav-link {
    color: var(--at-shell-text);
}

/* Language: flag, code and native name. */
.at-lang {
    display: flex;
    gap: 2px;
    margin-right: 8px;
}

.at-lang-option {
    min-width: 0;
    padding: 4px 10px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.at-lang-option[aria-current="true"] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    background: var(--mud-palette-background-gray);
}

.at-theme {
    margin-right: 4px;
}

.at-lang-code {
    font-weight: 600;
    margin-right: 6px;
}

/* The account in effect, restyled for the navy ground. */
.nsoa-scope {
    display: block;
    padding: 0 0 12px;
}

.nsoa-scope-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--at-shell-border);
    background: var(--at-shell-hover);
    color: var(--at-shell-strong);
    text-transform: none;
}

.nsoa-scope-trigger:hover {
    background: var(--at-shell-active);
}

.nsoa-scope-trigger .mud-button-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.2;
    text-align: left;
}

.nsoa-scope-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--at-shell-muted);
}

.nsoa-scope-value {
    font-size: 14px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- page header ------------------------------------------------------------------------- */

.at-page-header {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 4px;
}

.at-page-header-title {
    flex: 1 1 auto;
    min-width: 0;
}

.at-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.at-crumb {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

/* v1.3 band: the module's tint with a 4px vivid rule. Breadcrumb and intro take the hue's ink, the
   h1 stays the text colour, and the primary button stays the accent. */
.at-page-header-block {
    margin-bottom: 16px;
}

.at-page-header-block .at-page-header {
    margin-bottom: 0;
}

.at-page-header-block--band {
    background: var(--h-tint);
    border-top: 4px solid var(--h);
    border-radius: 0 0 14px 14px;
    padding: 24px;
}

.at-page-header-block--band .at-crumb,
.at-page-header-block--band .at-page-header-intro {
    color: var(--h-ink);
}

/* ---- status pill: a coloured word and a round dot, no fill ------------------------------- */

.nsoa-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.nsoa-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    flex: none;
}

.nsoa-pill--ok { color: var(--at-success-ink); }
.nsoa-pill--warn { color: var(--at-warning-ink); }
.nsoa-pill--danger { color: var(--at-danger-ink); }
.nsoa-pill--info { color: var(--at-info-ink); }
.nsoa-pill--neutral { color: var(--mud-palette-text-secondary); }

/* ---- metric card ------------------------------------------------------------------------- */

.at-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.at-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    box-shadow: var(--at-shadow-1);
    height: 100%;
}

.at-metric-disc {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.at-metric-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.at-metric-value {
    font-family: Outfit, "Segoe UI", sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.at-metric-context {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* Attention leaves its hue: a white card, a status border and a status disc. The value is never coloured. */
.at-metric--danger { border-color: var(--mud-palette-error); }
.at-metric--warning { border-color: var(--mud-palette-warning); }
.at-metric--danger .at-metric-disc { background: var(--at-danger-bg); color: var(--at-danger-ink); }
.at-metric--warning .at-metric-disc { background: var(--at-warning-bg); color: var(--at-warning-ink); }

.at-metric[class*="at-hue--"] {
    background: var(--h-tint);
    border-color: transparent;
    box-shadow: none;
}

.at-metric[class*="at-hue--"] .at-metric-label,
.at-metric[class*="at-hue--"] .at-metric-context {
    color: var(--h-ink);
}

.at-metric[class*="at-hue--"] .at-metric-disc {
    background: var(--h-strong);
    color: var(--at-hue-on);
}

/* The one emphasis card per screen. */
.at-metric--emphasis {
    background: var(--at-emphasis);
    border-color: transparent;
    color: #FFFFFF;
}

.at-metric--emphasis .at-metric-label { color: var(--at-emphasis-muted); }
.at-metric--emphasis .at-metric-value { font-size: 2rem; font-weight: 700; }
.at-metric--emphasis .at-metric-context { color: var(--at-emphasis-positive); font-size: .8125rem; }

.at-track {
    height: 6px;
    border-radius: 3px;
    background: var(--at-emphasis-track);
    margin-top: 8px;
    overflow: hidden;
}

.at-track > span {
    display: block;
    height: 100%;
    background: var(--at-emphasis-warm-fill);
}

@media (max-width: 1023px) {
    .at-lang-name { display: none; }
}

/* Content is left-aligned to the drawer, never centred: a centred column leaves a dead band on
   wide screens. Capped for readability, not centred. */
.at-content {
    max-width: 90rem;
    margin-left: 0;
    margin-right: auto;
}

/* The flag beside the code: small, with a hairline so a white-heavy flag keeps its edge on a white bar. */
.at-lang-flag {
    display: inline-flex;
    margin-right: 6px;
}

.at-lang-flag svg {
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
}