/*
    App-wide font family. The Figma design uses "Open Sans", so we override MudBlazor's
    default (Roboto) for every typography variant plus non-MudBlazor content.

    MudBlazor injects the --mud-typography-*-family variables at runtime via the theme
    provider, which lands later in the DOM than this static stylesheet. !important therefore
    wins the variable cascade regardless of source order (matching the framework-wide override
    pattern already used in CustomChanges.css). If a single spot ever needs a different font,
    make that an explicit, local exception rather than changing this default.
*/
:root {
    --mud-typography-default-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-h1-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-h2-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-h3-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-h4-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-h5-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-h6-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-subtitle1-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-subtitle2-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-body1-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-body2-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-button-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-caption-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --mud-typography-overline-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/*
    Outlined MudBlazor fields render their Label as a floating label that, when the field is
    focused/filled, shrinks onto the top outline border. With a transparent label the border
    line cuts through the text and (when focused) the thin primary-coloured label is hard to
    read. Give the shrunk label a solid surface background plus small horizontal padding so it
    cleanly overlaps the border in both light and dark themes. This stylesheet loads AFTER
    MudBlazor.min.css (see index.html), so no !important is needed.
*/
.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    background-color: var(--mud-palette-surface);
    padding-left: 4px;
    padding-right: 4px;
}

/*
    Dark-mode visibility fixes. The active MudTheme is supplied by the Ranger package (the local
    MudTheme in MainLayout.razor.Theme.cs is dead code), so these are CSS-only. MudBlazor toggles
    dark mode purely by swapping CSS variables (there is NO .mud-theme-dark wrapper class in the
    DOM), so we scope to `.app-dark`, a wrapper MainLayout stamps when dark mode is active — this
    leaves light mode untouched. MudBlazor/Ranger rules use !important + high specificity, so we
    match/exceed both. Loads after MudBlazor.min.css. Colours are palette-variable based; tune live.
*/

/* 1) Unchecked checkboxes were invisible: MudBlazor fills the outline glyph with --checkbox-color
      and the Ranger override sets it to --mud-palette-dark-lighten (≈ black) in dark mode. Force a
      visible neutral for the UNCHECKED box only (checked keeps its colour). */
.app-dark .mud-checkbox .mud-button-root.mud-checkbox-false .mud-icon-root.mud-svg-icon,
.app-dark .mud-checkbox .mud-button-root.mud-checkbox-false svg path:last-child {
    fill: var(--mud-palette-text-secondary) !important;
}

/* 2) Switch OFF-state track used --mud-palette-action-default, which ≈ the surface/card colour
      it sits on, so an "off" switch was invisible. Give the off track a contrasting neutral. */
.app-dark .mud-switch-base:not(.mud-checked) + .mud-switch-track {
    background-color: var(--mud-palette-text-secondary) !important;
    opacity: 0.6 !important;
}

/* 3) Left navigation drawer rendered in an unpleasant grey-blue (Color.Secondary). Unify it with
      the app's dark surface and keep the nav text/icons legible against it. */
.app-dark .nav-drawer.mud-drawer,
.app-dark .nav-drawer .mud-drawer-content {
    background-color: var(--mud-palette-surface) !important;
}

.app-dark .nav-drawer .nav-item-text,
.app-dark .nav-drawer .mud-nav-link,
.app-dark .nav-drawer .mud-treeview-item-label,
.app-dark .nav-drawer .mud-icon-root {
    color: var(--mud-palette-text-primary) !important;
}

.campaign-subpanel {
    margin-left: 48px;
    padding-top: 5px;
    border-left: 1px solid var(--mud-palette-table-lines);
}

.campaign-subpanel-title {
    color: black !important;
}

.campaign-subpanel-actions {
    padding: 0px 10px;
}

/*
    Role editor (Pages/Identity/RoleEditor) — Divisions tab.

    The Divisions tab embeds a horizontal sub-MudTabs inside the outer vertical
    MudTabs. MudBlazor renders that sub-tab bar's wrapper at width:max-content and
    "scrolls" it by translating the wrapper, relying on overflow:hidden +
    flex:1 1 auto on .mud-tabs-tabbar-content to clip it and keep the scroll
    buttons inside. In this app those MudBlazor rules do not take effect on the
    element (it computes as a plain block with overflow:visible), so:
      - scrolled-out tabs stay visible and overlap the content on the left, and
      - the right scroll button spills past the card edge.
    Additionally, flex items default to min-width:auto, so the max-content width
    propagates up the flex chain and pushes the panel (and its checkbox grids)
    past the card.

    Fix: allow the panel chain to shrink (min-width:0), and re-assert the three
    intended properties on the tab-bar content so it clips and its buttons stay in.
    Placed here (loaded last) so it wins over MudBlazor by both source order and
    specificity — no !important needed.
*/
.custom-role-editor-tabs,
.custom-role-editor-tabs > .mud-tabs-panels,
.custom-role-editor-tabs .mud-tab-panel {
    min-width: 0;
}

.custom-role-editor-tabs .mud-tabs-tabbar-content {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
}

.campaign-points-childrow {
    padding-top: 0;
    padding-bottom: 0;
}