/* ============================================================================
   Slate Teal — shared token layer and cross-component utilities.

   Everything colour-bearing here resolves through a --mud-palette-* variable that
   CivicSonar.Web/Theme/CivicSonarTheme.cs owns, so a mode switch needs no second stylesheet
   and no class on the body: MudThemeProvider re-emits the palette and every --cs-* alias
   follows. The only values written literally are shapes and sizes, which do not change
   between light and dark.

   Component-specific rules live in the matching .razor.css. This file holds the tokens plus
   the handful of utilities that genuinely repeat across the shell, the nav and the rows.
   ============================================================================ */

:root {
    /* ---- Type ------------------------------------------------------------ */
    --cs-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --cs-font-mono: 'IBM Plex Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

    /* ---- Chrome ---------------------------------------------------------- */
    --cs-chrome-bar: var(--mud-palette-appbar-background);
    --cs-chrome-bar-line: var(--mud-palette-dark);
    --cs-chrome-bar-ink: var(--mud-palette-appbar-text);
    --cs-chrome-bar-muted: var(--mud-palette-dark-text);
    --cs-chrome-mark: var(--mud-palette-tertiary);

    /* ---- Surfaces -------------------------------------------------------- */
    --cs-surface-page: var(--mud-palette-background);
    --cs-surface: var(--mud-palette-surface);
    --cs-surface-rail: var(--mud-palette-drawer-background);

    /* ---- Lines ----------------------------------------------------------- */
    --cs-line: var(--mud-palette-lines-default);
    --cs-line-row: var(--mud-palette-divider-light);

    /* ---- Ink ------------------------------------------------------------- */
    --cs-ink: var(--mud-palette-text-primary);
    --cs-ink-muted: var(--mud-palette-text-secondary);
    --cs-ink-label: var(--mud-palette-action-default);
    --cs-ink-micro: var(--mud-palette-gray-default);

    /* ---- Accent ---------------------------------------------------------- */
    --cs-accent: var(--mud-palette-primary);
    --cs-accent-wash: var(--mud-palette-primary-lighten);
    --cs-accent-line: var(--mud-palette-tertiary-lighten);

    /* ---- Signal ---------------------------------------------------------------
       The four score and confidence hues. These are the values with no palette slot
       of their own — the score bands and the confidence pips are the only carriers of
       lead-value meaning in the system, so they get named properties rather than being
       spelled out at forty call sites. High confidence reads priority, medium reads
       watch, low reads low.

       Priority and watch aliased --mud-palette-error / --mud-palette-warning until
       2026-08-25. They cannot any more: those two slots now carry operational state, and
       leaving the alias in place would turn every Priority score crimson and every Watch
       score steel blue. They ride on the Dark family's lighten/darken slots instead,
       which nothing in the app can reach — every MudBlazor rule that reads them needs a
       .mud-*-dark class that only Color.Dark emits, and Color.Dark is used nowhere. The
       full reasoning is in CivicSonarTheme.cs under "Values with no palette slot".
       ------------------------------------------------------------------------- */
    --cs-score-priority: var(--mud-palette-dark-lighten);
    --cs-score-watch: var(--mud-palette-dark-darken);
    --cs-score-low: var(--mud-palette-action-default);
    --cs-pip-off: var(--mud-palette-skeleton);

    /* ---- Operational state ----------------------------------------------------
       The fourth family, from the phase 3 admin design. Crimson means the system did
       something wrong, steel means a person did something or nobody did — cool where
       score is warm, and always inside a chip, keyline or hatch, never bare text.

       fail and hold ARE the severity slots, so Color.Error and Color.Warning resolve
       here too; the aliases exist so console CSS can name the token rather than the
       severity. The wash and line values are parked on unreachable *-lighten slots for
       the same mode-switch reason as the score hues above. Nothing consumes those four
       yet — the .cs-state chip is what they are for.
       ------------------------------------------------------------------------- */
    --cs-state-fail: var(--mud-palette-error);
    --cs-state-fail-wash: var(--mud-palette-error-lighten);
    --cs-state-fail-line: var(--mud-palette-success-lighten);
    --cs-state-hold: var(--mud-palette-warning);
    --cs-state-hold-wash: var(--mud-palette-warning-lighten);
    --cs-state-hold-line: var(--mud-palette-info-lighten);

    /* ---- Shape ----------------------------------------------------------- */
    --cs-radius-chip: 3px;
    --cs-radius-control: 5px;
    --cs-radius-panel: 6px;
    --cs-radius-frame: 8px;

    /* Row heights are the density dial. The design specified 56/116, which fits 13 collapsed
       rows above a 1024px fold; 68/128 trades about three of those for breathing room between
       the title and the metadata line. Change these two and nothing else. */
    --cs-row-collapsed: 76px;
    --cs-row-expanded: 136px;
    --cs-row-table: 44px;
    --cs-nav-item: 40px;
    --cs-appbar-height: 54px;
    --cs-rail-width: 300px;

    /* 120ms ease-out on hover and expand; nothing in the app runs longer than 200ms. */
    --cs-motion: 120ms;
    --cs-ease: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================================
   Type utilities

   Every numeral in the product is set in IBM Plex Mono with tabular figures so a
   column of scores lines up on the decimal. .cs-num is the workhorse; .cs-label is the
   9.5px mono-caps label; .cs-meta is the 10.5px metadata line.
   ============================================================================ */

.cs-mono,
.cs-num,
.cs-meta,
.cs-label {
    font-family: var(--cs-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.cs-num {
    font-weight: 700;
    line-height: 1;
}

.cs-meta {
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--cs-ink-muted);
}

.cs-label {
    font-size: 9.5px;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--cs-ink-micro);
}

.cs-label-sm {
    font-size: 9px;
    letter-spacing: 0.12em;
}

/* ============================================================================
   Chip family — four weights, strictly ranked.

   .cs-tag-accent identifies (the vertical). .cs-tag describes (budget, department,
   meeting type). Keywords get no chip at all; they are plain text. Only the signal
   tier — score and confidence, drawn by their own components — carries colour.
   ============================================================================ */

.cs-tag,
.cs-tag-accent {
    font-family: var(--cs-font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: var(--cs-radius-chip);
    border: 1px solid var(--cs-line);
    color: var(--cs-ink-muted);
    white-space: nowrap;
    flex: none;
}

.cs-tag-accent {
    color: var(--cs-accent);
    background: var(--cs-accent-wash);
    border-color: var(--cs-accent-line);
}

/* The inline variant that sits on the collapsed row's title line. */
.cs-tag-inline {
    padding: 1.5px 5px;
}

/* Keywords — no chip, no border, no colour. */
.cs-keyword {
    font-size: 11px;
    color: var(--cs-ink-label);
    white-space: nowrap;
}

/* ============================================================================
   Focus

   2px accent outline at 2px offset, never a colour-only state change.
   ============================================================================ */

.cs-focusable:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --cs-motion: 0ms;
    }
}

/* ============================================================================
   Signal classes

   One class sets --cs-signal for its subtree; the score value, the band word, the meter
   fill and the confidence pips all read that one property. Custom properties inherit
   through the DOM regardless of CSS isolation, so a scoped .razor.css rule inside
   ScoreMeter picks up a --cs-signal set by the row cell that hosts it.
   ============================================================================ */

.cs-signal-priority {
    --cs-signal: var(--cs-score-priority);
}

.cs-signal-watch {
    --cs-signal: var(--cs-score-watch);
}

.cs-signal-low {
    --cs-signal: var(--cs-score-low);
}

.cs-signal-ink {
    color: var(--cs-signal, var(--cs-score-low));
}

/* ============================================================================
   App bar

   MudAppBar is a child component, so no layout scope attribute reaches inside it and
   MainLayout.razor.css cannot style it. These rules are global on purpose, keyed off the
   .cs-appbar class the layout puts on the bar.

   The bar is the one dark surface in light mode, so every icon in it needs a light-on-dark
   override — MudBlazor's defaults resolve against the page palette, not the bar's.
   ============================================================================ */

.cs-appbar {
    border-bottom: 1px solid var(--cs-chrome-bar-line);
}

    /* MudToolBar carries its own 64px min-height, which would overrule AppbarHeight. */
    .cs-appbar .mud-toolbar {
        min-height: var(--cs-appbar-height);
        height: var(--cs-appbar-height);
        gap: 16px;
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Icons and icon buttons: light on dark, and quiet until hovered. */
    .cs-appbar .mud-icon-button,
    .cs-appbar .mud-icon-root,
    .cs-appbar .mud-button-root {
        color: var(--cs-chrome-bar-muted);
    }

        .cs-appbar .mud-icon-button:hover,
        .cs-appbar .mud-button-root:hover {
            color: var(--cs-chrome-bar-ink);
            background-color: rgb(255 255 255 / 0.08);
        }

    .cs-appbar .mud-badge__badge {
        font-family: var(--cs-font-mono);
        font-variant-numeric: tabular-nums;
    }

/* The radar mark: a ring with a filled centre. Two divs, no icon font, no SVG request. */
.cs-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

    .cs-brand:hover {
        text-decoration: none;
    }

.cs-mark {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--cs-chrome-mark);
    border-radius: 50%;
    flex: none;
}

    .cs-mark::after {
        content: '';
        position: absolute;
        inset: 2px;
        background: var(--cs-chrome-mark);
        border-radius: 50%;
    }

.cs-brand-name {
    font-family: var(--cs-font-sans);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--cs-chrome-bar-ink);
    white-space: nowrap;
}

/* Live badge. The ground and border are derived from the bar rather than hard-coded, so the
   badge survives the dark palette without a second pair of tokens. */
.cs-live-badge {
    font-family: var(--cs-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cs-chrome-mark);
    background: rgb(0 0 0 / 0.28);
    border: 1px solid rgb(255 255 255 / 0.16);
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex: none;
}

.cs-appbar-tracked {
    font-family: var(--cs-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--cs-chrome-bar-muted);
    white-space: nowrap;
}

.cs-appbar-rule {
    width: 1px;
    height: 20px;
    background: var(--cs-chrome-bar-line);
    flex: none;
}

.cs-tier-badge {
    font-family: var(--cs-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-chrome-bar-muted);
    white-space: nowrap;
    flex: none;
}

/* Below the design's 1280 breakpoint the count line is the first thing to go — it is the
   least load-bearing item in the bar and the brand must not wrap. */
@media (max-width: 1279.98px) {
    .cs-appbar-tracked,
    .cs-appbar-rule {
        display: none;
    }
}

@media (max-width: 959.98px) {
    .cs-live-badge,
    .cs-tier-badge {
        display: none;
    }
}

/* ============================================================================
   Elevation

   The theme flattens Shadows[2..25] onto Shadows[1] so nothing can float, but MudPaper's
   own default is elevation 1 — which would leave a hairline shadow under every list,
   table and panel in the app. The design is explicit that those carry borders and never
   shadow, and reserves the one permitted shadow for menus, dialogs and popovers.

   The :not() chain is what keeps that reservation: a popover and a dialog are both
   .mud-paper, and they are the two places a shadow is doing real work.
   ============================================================================ */

.mud-paper:not(.mud-popover):not(.mud-dialog):not(.mud-menu-popover):not(.mud-drawer) {
    box-shadow: none;
}