/* ==========================================================================
   Solar Battery Optimiser — portal styles

   Colour comes from the MudBlazor palette in Components/Theme.cs. Nothing here
   hard-codes a dark or light value, so both themes work without an override
   fighting the theme provider.
   ========================================================================== */

html, body {
    font-family: var(--mud-typography-body1-font-family, 'Plus Jakarta Sans', system-ui, sans-serif);
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    /* Let charts and tooltips stay inside the viewport on small screens.
       clip, not hidden: overflow-x:hidden makes html/body a scroll container
       (the spec cascades the other axis's visible to auto), which breaks
       position:sticky on the app bar below. clip clips the same overflow
       without creating a scroll container. */
    overflow-x: clip;
}

/* Tabular numerals for anything that reads as a measurement. */
.sbo-num,
.num,
.mono,
.mono-value {
    font-family: var(--mud-typography-body1-font-family, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.sbo-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.sbo-kpi-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

/* Small uppercase label used above values and on status chips. */
.sbo-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.sbo-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sbo-user {
    font-size: 0.8125rem;
    opacity: 0.75;
}

/* The shell chrome (stage, frame, drawer, app bar) lives in components.css.
   MudBlazor no longer renders the app bar or drawer, so there is nothing here
   to retheme — the layout is our own markup. */

.mud-table-cell {
    font-size: 0.8125rem;
}

/* Keep a visible keyboard focus ring on everything we render ourselves. The
   prototype uses a 2px load-coloured outline; the custom nav, chip and field
   controls in components.css have no default browser ring to fall back on. */
:focus-visible {
    outline: 2px solid var(--sbo-load);
    outline-offset: 2px;
    border-radius: 4px;
}

.apexcharts-canvas:focus-visible,
.apexcharts-svg:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* Visually hidden, still announced. Used for loading and selection state. */
.sbo-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The title block shrinks to its content so the controls in the app bar keep
   their room. Per the prototype, at narrow widths the page subtitle and the
   user name drop out (handled in components.css) but the title stays. */
.sbo-appbar-titles {
    min-width: 0;
}