/* ============================================================================
   Stravix brand skin — global only.

   What belongs here: rules that reach MudBlazor's own rendered DOM (which no
   component of ours can), the @font-face declarations, and page-level pseudo
   elements. Everything that styles one of OUR components lives in that
   component's .razor.css instead, bundled into Web.styles.css by the build.

   Load order (App.razor): MudBlazor.min.css -> THIS FILE -> site.css ->
   Web.styles.css. Equal-specificity overrides of MudBlazor win here by order;
   site.css keeps its existing last-wins contract over this file; component
   scoped CSS comes last so a component styling itself outranks both.

   Mode-dependent values ride the --mud-palette-* variables MudThemeProvider
   regenerates on the dark/light flip (palettes in RaptorTheme.cs). Only
   mode-INVARIANT values live as --stx-* custom properties.
   ========================================================================== */

/* ---- Self-hosted variable fonts (OFL) — no CDN: the E2E sandbox blocks
        non-loopback requests and the Google Fonts link was a known issue. ---- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-var.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-var.woff2") format("woff2-variations");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-var.woff2") format("woff2-variations");
}

/* ---- Mode-invariant tokens ---- */
:root {
    --stx-radius-btn: 2px;
    --stx-radius-panel: 6px;
    --stx-radius-pill: 999px;

    --stx-font-display: "Space Grotesk", "Inter", sans-serif;
    --stx-font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;

    /* No colour lives here. There used to be two: --stx-accent, a second copy of RaptorTheme's
       Primary, and --stx-plate, the always-dark well the logo needed while only a white-on-dark
       lockup existed. Both are gone — the light-mode lockup shipped, and colour is defined in
       RaptorTheme.cs and read from --mud-palette-*. */
}

/* ---- Base ---- */

/* MudIcon renders a Material icon AS the svg, but wraps an icon supplied as raw SVG markup (every
   Font Awesome mark we ship) in a span. Inside that span the svg is an inline element, so it sits
   on the span's text baseline and hangs below it, and a glyph whose viewBox is not square (the
   vehicle marks are 640x512) renders wider than the square box and spills out one side. The result
   is a drawing several pixels down and right of the box that a flex parent is centring — the icon
   looks misaligned against any label beside it. Nothing at a call site can reach this; the span is
   MudBlazor's. Making the svg a block and letting the span take the glyph's real width puts the
   drawing back where the layout thinks it is. */
.mud-icon-root > svg {
    display: block;
}

.mud-icon-root:has(> svg) {
    width: auto;
}

::selection {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* ---- Brand canvas: ink wash + masked 64px grid + ghosted wolf watermark.
        Fixed pseudo-layers behind everything (z-index -1, no hit-testing);
        opaque surfaces (drawer, appbar, papers, tables) sit on top, so the
        canvas reads only in page gutters and transparent regions. ---- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(var(--mud-palette-primary-rgb), 0.09), transparent),
        linear-gradient(rgba(var(--mud-palette-primary-rgb), 0.04) 1px, transparent 0),
        linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.04) 1px, transparent 0);
    background-size: auto, 64px 64px, 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 0, #000 30%, transparent 80%);
}

/* The wolf watermark is a MainLayout element rather than a body pseudo, because
   one of the two modes always needs the ink flipped and only the layout knows
   which mode is active. The artwork's ink is dark, so it reads on the light
   canvas untouched and all but vanishes on the dark one — hence the flip on
   dark. One opacity serves both: measured as mean composite delta against each
   canvas, light-as-is and dark-flipped both land on 11.9 (dark untouched would
   be 6.8, which is where the mark went missing). */
.stx-watermark {
    position: fixed;
    right: 2%;
    bottom: 0;
    width: 30vw;
    height: 44vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0.08;
    background: url("/images/stravix-watermark.png") no-repeat right bottom / contain;
}

.stx-watermark--dark {
    filter: grayscale(1) invert(1);
}

/* .stx-watermark--light needs no rule — the ink is already right for that
   canvas. The class stays on the element as the state hook's other half. */

/* ---- Scrollbars (nav menu keeps hiding its own via site.css) ---- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-inputs) transparent;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-inputs);
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---- Buttons: sentence case comes from the theme; geometry + ghost skin here.
        Ghost = MudBlazor's Outlined variant restyled to a 1px hairline. Accent
        is reserved for the one filled action per surface. ---- */
.mud-button-root.mud-button {
    border-radius: var(--stx-radius-btn);
}

.mud-button-root.mud-button-outlined {
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-action-default);
}

.mud-button-root.mud-button-outlined:hover:not(.mud-button-disabled),
.mud-button-root.mud-button-outlined:focus-visible:not(.mud-button-disabled) {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
    color: var(--mud-palette-primary);
    background-color: transparent;
}

/* Danger is the one exception to the neutral ghost. MudBlazor's own .mud-button-outlined-error is a
   single class, so the two-class ghost rule above out-specifies it and greys out the red on every
   labelled destructive button in the app — Delete Case, Delete Asset List, Discard, Unbind. Accent
   is reserved for the filled action and stays neutral here; a warning is not decoration, so it
   keeps its colour. Still a hairline, not a fill: destructive actions should read, not shout. */
.mud-button-root.mud-button-outlined.mud-button-outlined-error {
    border-color: color-mix(in srgb, var(--mud-palette-error) 50%, transparent);
    color: var(--mud-palette-error);
}

.mud-button-root.mud-button-outlined.mud-button-outlined-error:hover:not(.mud-button-disabled),
.mud-button-root.mud-button-outlined.mud-button-outlined-error:focus-visible:not(.mud-button-disabled) {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
    background-color: transparent;
}

.mud-button-root.mud-button-filled-primary:hover:not(.mud-button-disabled) {
    background-color: var(--mud-palette-primary-lighten);
}

/* MudBlazor sizes an icon inside a ButtonGroup with
   `.mud-button-group-root .mud-button-root.mud-icon-button .mud-icon-root { font-size: 1.516rem }`,
   which at (0,4,0) outranks the .mud-icon-size-* class the call site asked for. So the same
   `Size="Small"` row action rendered 20px on a page that stacks its buttons and 24.26px on one that
   groups them — a fifth larger, from markup that reads identically. It cuts both ways: a Large icon
   in a group is pulled DOWN from 36px to the same 24.26px.

   Restating the size at (0,5,0) hands the decision back to the call site. The three values are
   MudBlazor's own, read off the computed style rather than the stylesheet — its CSS declares each
   size twice and only the later declaration survives, so small is 1.25rem (not 1.15) and large is
   2.25rem (not 2). */
.mud-button-group-root .mud-button-root.mud-icon-button .mud-icon-root.mud-icon-size-small {
    font-size: 1.25rem;
}

.mud-button-group-root .mud-button-root.mud-icon-button .mud-icon-root.mud-icon-size-medium {
    font-size: 1.5rem;
}

.mud-button-group-root .mud-button-root.mud-icon-button .mud-icon-root.mud-icon-size-large {
    font-size: 2.25rem;
}

/* ---- Tabs + nav rail keep their uppercase chrome voice (buttons dropped it
        via theme Button.TextTransform). ---- */
.mud-tab {
    text-transform: uppercase;
    letter-spacing: .09em;
}

/* Top-level nav labels are authored uppercase in the markup; give them the chrome tracking on the
   display face. MudNavLink takes no Typo and MudBlazor's Typography has no nav slot, so this is
   the only lever — the same reason .mud-tab is here. */
.mud-nav-link .mud-nav-link-text {
    font-family: var(--stx-font-display);
    letter-spacing: .09em;
    font-size: .8125rem;
}

.mud-nav-group .mud-nav-link .mud-nav-link-text {
    letter-spacing: .01em;
}

.mud-nav-link.active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10);
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

.mud-nav-link.active .mud-icon-root,
.mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

/* ---- Table headers: header plate + accent hairline underline. ---- */
.mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-background-gray);
    box-shadow: inset 0 -1px 0 rgba(var(--mud-palette-primary-rgb), 0.45);
    font-weight: 500;
}

/* ---- Row states (moved from site.css — colors now ride the palette).
        Selected rows carry the inset accent bar from the design. !important
        mirrors the original site.css rules: these classes land on <tr> and must
        beat MudTable's own hover/striped selectors. ---- */
.table-row-header {
    background-color: var(--mud-palette-background-gray) !important;
}

.table-row-header:hover {
    background-color: var(--mud-palette-table-hover) !important;
}

.table-row-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10) !important;
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
}

.table-row-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
}

/* ---- Overlay + dialog chrome ---- */
.mud-overlay-scrim.mud-overlay-dark {
    background-color: var(--mud-palette-overlay-dark);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mud-dialog {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--stx-radius-panel);
}

.mud-dialog .mud-dialog-title {
    font-family: var(--stx-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---- Popovers / menus: hairline ring over the surface color. An inset
        outline, not a border: a border shrinks the popover's border-box
        content area by 2px while the inner .mud-list still inherits the full
        max-height, and that 2px overflow gives every Select/Autocomplete a
        second outer scrollbar next to the list's own. (Not box-shadow either —
        that would override the .mud-elevation-* drop shadow on the same
        element.) ---- */
.mud-popover {
    outline: 1px solid var(--mud-palette-lines-default);
    outline-offset: -1px;
}

/* ---- Snackbar: quiet severity-tinted surface + 3px severity spine instead of
        a loud fill. The tint carries the severity at a glance (a 2px spine
        alone was indistinguishable at the corner of the eye, especially the
        dark green on the dark surface); the mix ratio keeps text-primary
        readable on every severity in both palettes. ---- */
.mud-snackbar {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.mud-snackbar.mud-alert-filled-normal {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-alert-filled-error {
    color: var(--mud-palette-text-primary);
}

.mud-snackbar.mud-alert-filled-info {
    background-color: color-mix(in srgb, var(--mud-palette-info) 12%, var(--mud-palette-surface));
    border-left: 3px solid var(--mud-palette-info);
}

.mud-snackbar.mud-alert-filled-success {
    background-color: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface));
    border-left: 3px solid var(--mud-palette-success);
}

.mud-snackbar.mud-alert-filled-warning {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
    border-left: 3px solid var(--mud-palette-warning);
}

.mud-snackbar.mud-alert-filled-error {
    background-color: color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface));
    border-left: 3px solid var(--mud-palette-error);
}

.mud-snackbar.mud-alert-filled-info .mud-alert-icon-left .mud-icon-root { color: var(--mud-palette-info); }
.mud-snackbar.mud-alert-filled-success .mud-alert-icon-left .mud-icon-root { color: var(--mud-palette-success); }
.mud-snackbar.mud-alert-filled-warning .mud-alert-icon-left .mud-icon-root { color: var(--mud-palette-warning); }
.mud-snackbar.mud-alert-filled-error .mud-alert-icon-left .mud-icon-root { color: var(--mud-palette-error); }

/* ============================================================================
   Stravix primitives — consumed by the SharedKernel wrapper components.
   Inert until the wrappers land; defined here so the skin reviews as one file.
   ========================================================================== */

/* Brand bar: panel/dialog header plate. Rides the Secondary palette slot, which
   the theme points at the ink plate (dark) / pale slate (light) — the same slot
   the legacy overlay title bar already painted with mud-theme-secondary. */
/* Header plate for panels, dialogs and card headers. It reads as part of the surface it caps,
   separated by the hairline alone — a header tinted away from its own panel is the thing the eye
   lands on first, and it is never the thing worth looking at. Surface, not the Secondary accent
   slot: Secondary is a foreground colour, and borrowing it here made every header track whatever
   that accent happened to be. */
.stx-brand-bar {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default);
}

/* ---- Detection inspector (the Detection Details overlay) ---- */

/* ---- Print: brand furniture off, content unaffected. ---- */
@media print {
    body::before,
    .stx-watermark {
        display: none !important;
    }
}