/* NAVR Admin Portal host styles (shell only). */
html, body { margin: 0; font-family: system-ui, sans-serif; }

/* Shared Admin dialogs (Working Details / Help, Publish / Versions — see Components/Shared/AdminDialog.cs). The frame
   inside draws the header, scroll area and footer; the MudDialog surface only caps the size to the viewport. */
.mud-dialog.navr-admin-dialog { overflow: hidden; max-height: calc(100dvh - 2rem); }
.mud-dialog.navr-admin-dialog > .mud-dialog-content { display: flex; flex-direction: column; min-height: 0; padding: 0; margin: 0; overflow: hidden; }
.mud-dialog.navr-admin-dialog > .mud-dialog-content > * { flex: 1 1 auto; min-height: 0; }

/* ── Block editor header tones (Page / Article / Block Template editors) ───────────────────────────────────────────
   One semantic palette for the editor headers. A tone is a mid-strength hue that is never painted solid: every
   surface mixes it into the MudBlazor theme surface (a soft pastel in light mode, a quiet tint in dark mode) and icons
   mix it into the theme text colour, so contrast follows the Admin theme automatically. Components opt in with a
   `navr-tone--<name>` class and read the derived --navr-tone-* values below; nothing else changes colour.
     Main headers (context):  page = blue · article = green · template = purple
     Sub headers (semantic):  basic = peach · content = mint (section header, text, design & layout)
                              fields = lavender · cards = rose · media = cyan
                              design = honey (presentation, overlay) · style = periwinkle (typography)
                              action = sage (call to action)
     Card & Gallery Settings: presentation = blue · content = mint · layout = lavender · media = cyan
                              icon = peach · badge = yellow · metadata = green · typography = periwinkle (style)
                              design = rose (cards) · overlay = violet · cta = sage (action)
                              animation = coral · carousel = teal                                              */
:root {
    --navr-tone-page: #3b76d1;
    --navr-tone-article: #3a9a52;
    --navr-tone-template: #8a5fd1;
    --navr-tone-basic: #e2854a;
    --navr-tone-content: #2ea583;
    --navr-tone-fields: #a068d6;
    --navr-tone-cards: #d45f8c;
    --navr-tone-media: #2399b8;
    --navr-tone-design: #c49a24;
    --navr-tone-style: #6a74d6;
    --navr-tone-action: #7f9f35;
    --navr-tone-presentation: #4a84d4;
    --navr-tone-layout: #8c78d8;
    --navr-tone-icon: #e08a55;
    --navr-tone-badge: #cfa31c;
    --navr-tone-metadata: #4c9f55;
    --navr-tone-overlay: #b25fc8;
    --navr-tone-animation: #df6f5e;
    --navr-tone-carousel: #269e9b;
}

.navr-tone--page { --navr-tone: var(--navr-tone-page); }
.navr-tone--article { --navr-tone: var(--navr-tone-article); }
.navr-tone--template { --navr-tone: var(--navr-tone-template); }
.navr-tone--basic { --navr-tone: var(--navr-tone-basic); }
.navr-tone--content { --navr-tone: var(--navr-tone-content); }
.navr-tone--fields { --navr-tone: var(--navr-tone-fields); }
.navr-tone--cards { --navr-tone: var(--navr-tone-cards); }
.navr-tone--media { --navr-tone: var(--navr-tone-media); }
.navr-tone--design { --navr-tone: var(--navr-tone-design); }
.navr-tone--style { --navr-tone: var(--navr-tone-style); }
.navr-tone--action { --navr-tone: var(--navr-tone-action); }
.navr-tone--presentation { --navr-tone: var(--navr-tone-presentation); }
.navr-tone--layout { --navr-tone: var(--navr-tone-layout); }
.navr-tone--icon { --navr-tone: var(--navr-tone-icon); }
.navr-tone--badge { --navr-tone: var(--navr-tone-badge); }
.navr-tone--metadata { --navr-tone: var(--navr-tone-metadata); }
.navr-tone--overlay { --navr-tone: var(--navr-tone-overlay); }
.navr-tone--animation { --navr-tone: var(--navr-tone-animation); }
.navr-tone--carousel { --navr-tone: var(--navr-tone-carousel); }

/* Derived on the element that carries the tone class, so a nested group's own tone always wins. */
.navr-tone--page, .navr-tone--article, .navr-tone--template,
.navr-tone--basic, .navr-tone--content, .navr-tone--fields, .navr-tone--cards,
.navr-tone--media, .navr-tone--design, .navr-tone--style, .navr-tone--action,
.navr-tone--presentation, .navr-tone--layout, .navr-tone--icon, .navr-tone--badge,
.navr-tone--metadata, .navr-tone--overlay, .navr-tone--animation, .navr-tone--carousel {
    /* Main header band: a clearly visible fill, fading slightly towards its body. The strongest stop stays light
       enough for the theme's secondary text (description) to keep AA contrast. */
    --navr-tone-head-bg: linear-gradient(180deg,
        color-mix(in srgb, var(--navr-tone) 24%, var(--mud-palette-surface)),
        color-mix(in srgb, var(--navr-tone) 17%, var(--mud-palette-surface)));
    /* Sub header: resting, open and hover fills — visibly pastel, never near-white. */
    --navr-tone-bg: color-mix(in srgb, var(--navr-tone) 18%, var(--mud-palette-surface));
    --navr-tone-bg-open: color-mix(in srgb, var(--navr-tone) 21%, var(--mud-palette-surface));
    --navr-tone-bg-hover: color-mix(in srgb, var(--navr-tone) 25%, var(--mud-palette-surface));
    --navr-tone-line: color-mix(in srgb, var(--navr-tone) 40%, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)));
    /* Large content panel (Dashboard): a lighter wash than a header, so tables and charts keep a calm background. */
    --navr-tone-panel: color-mix(in srgb, var(--navr-tone) 7%, var(--mud-palette-surface));
    /* Icon tile: lighter than the fill, so the icon sits on a crisp tile inside the coloured row. */
    --navr-tone-chip: color-mix(in srgb, var(--navr-tone) 9%, var(--mud-palette-surface));
    --navr-tone-ink: color-mix(in srgb, var(--navr-tone) 56%, var(--mud-palette-text-primary));
    /* A solid badge that keeps white text readable on every tone. */
    --navr-tone-solid: color-mix(in srgb, var(--navr-tone) 74%, #000);
}

/* Toned sub header accent: a slim bar in the tone at the inline start (RTL-aware). Used by every toned group header
   (CollapsibleSettingsSection, Template Background, the Block Template form's own sub headers). */
.navr-tone-bar { position: relative; }
.navr-tone-bar::before {
    content: "";
    position: absolute;
    inset-block: 0.625rem;
    inset-inline-start: 0;
    width: 4px;
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
    background: var(--navr-tone);
    pointer-events: none;
}