/* ---------------------------------------------------------------------------
   Bridges Syncfusion's material3 theme onto the Hansell design tokens.

   Syncfusion's Blazor themes are driven by CSS custom properties, so one mapping here makes
   every SF control inherit the brand palette - including dark mode, because the Hansell tokens
   already swap themselves. The alternative, restyling twenty controls individually, would drift
   the moment a token changes.

   Loaded AFTER material3.css so these definitions win.

   Values map to the -rgb twin of each token, NOT the hex one. Syncfusion writes its theme as
   rgba(var(--color-sf-primary)), so it expects channels ("0, 65, 135"). Passing #004187 produces
   rgba(#004187) - invalid CSS, silently dropped, and the control renders with no border or colour
   at all and no error to explain why. Both forms are generated from AppTheme.xaml, which remains
   the single source of truth.
   --------------------------------------------------------------------------- */

:root {
    /* Primary */
    --color-sf-primary: var(--primary-rgb);
    --color-sf-on-primary: var(--on-primary-rgb);
    --color-sf-primary-container: var(--primary-container-rgb);
    --color-sf-on-primary-container: var(--on-primary-container-rgb);
    --color-sf-inverse-primary: var(--inverse-primary-rgb);

    /* Secondary */
    --color-sf-secondary: var(--secondary-rgb);
    --color-sf-on-secondary: var(--on-secondary-rgb);
    --color-sf-secondary-container: var(--secondary-container-rgb);
    --color-sf-on-secondary-container: var(--on-secondary-container-rgb);

    /* Tertiary */
    --color-sf-tertiary: var(--tertiary-rgb);
    --color-sf-on-tertiary: var(--on-tertiary-rgb);
    --color-sf-tertiary-container: var(--tertiary-container-rgb);
    --color-sf-on-tertiary-container: var(--on-tertiary-container-rgb);

    /* Surfaces and background */
    --color-sf-background: var(--background-rgb);
    --color-sf-on-background: var(--on-background-rgb);
    --color-sf-surface: var(--surface-rgb);
    --color-sf-on-surface: var(--on-surface-rgb);
    --color-sf-surface-variant: var(--surface-variant-rgb);
    --color-sf-on-surface-variant: var(--on-surface-variant-rgb);
    --color-sf-inverse-surface: var(--inverse-surface-rgb);
    --color-sf-inverse-on-surface: var(--inverse-on-surface-rgb);

    /* Error */
    --color-sf-error: var(--error-rgb);
    --color-sf-on-error: var(--on-error-rgb);
    --color-sf-error-container: var(--error-container-rgb);
    --color-sf-on-error-container: var(--on-error-container-rgb);

    /* Outline */
    --color-sf-outline: var(--outline-rgb);
    --color-sf-outline-variant: var(--outline-variant-rgb);

    /* Typography - Encode Sans, matching the rest of the app. */
    --font-family: var(--font-sans);
}

/* SF sets its own font stack on control roots, so restate it rather than relying on inheritance. */
.e-control,
.e-css {
    font-family: var(--font-sans);
}

/* ---------------------------------------------------------------------------
   Stacked field spacing.

   A floating label renders ABOVE the field's top border, outside its box. Stack two fields with
   no gap and the lower one's label lands on top of the upper one's border. MAUI never showed this
   because SfTextInputLayout carries its own margin; the Blazor inputs do not.

   --field-gap is the vertical rhythm between fields; it must stay larger than the float label's
   line-box (~12px) or labels will clip again.

   These margins are the FALLBACK, for a Syncfusion input outside a form container. Inside
   .subform__form the container owns spacing with a flex gap and these margins are zeroed - see
   "Form rhythm" in components.css for why.
   --------------------------------------------------------------------------- */
:root { --field-gap: 14px; }

.e-input-group,
.e-float-input,
.e-control-wrapper.e-input-group {
    margin-block: var(--field-gap);
}


/* ---------------------------------------------------------------------------
   Charts.

   Syncfusion paints its charts with light-theme colours baked into SVG presentation attributes:
   a #FFFFFF background rect, rgba(97,97,97) text, #b5b5b5 and Gray axis lines. They do not follow
   the custom properties above, so in dark mode every chart rendered as a white card on a black
   page. CSS outranks presentation attributes, which is what makes these overrides work without
   touching the components. Mobile's charts have no background and sit on the page colour.
   --------------------------------------------------------------------------- */
.e-chart svg [id$="_ChartBorder"],
.e-accumulationchart svg [id$="_ChartBorder"] {
    fill: transparent;
}

.e-chart svg text,
.e-accumulationchart svg text {
    fill: var(--on-surface-variant);
    /* Syncfusion writes font-family="Roboto" onto every chart label. Roboto is only reachable
       through the theme's Google Fonts @import, which the CSP blocks, so the labels fell back to
       the browser's default serif. The app's own self-hosted face instead. */
    font-family: var(--font-sans);
}

.e-chart svg [id$="_ChartAreaBorder"],
.e-chart svg [id*="AxisLine"],
.e-chart svg [id*="MajorTickLine"],
.e-chart svg [id*="MajorGridLine"],
.e-chart svg [id*="MinorGridLine"] {
    stroke: var(--outline-variant);
}