/* ═══════════════════════════════════════════════════════════════════════
   BankBoek Admin — Material Design 3 roles, one brand palette

   The admin app wears exactly the client app's colour scheme (the landing
   page's). The colour tokens below are an identical copy of the :root block
   in the client's wwwroot/css/app.css; BrandPaletteTests fails if they
   differ. Change a colour in the client first, then copy it here.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* Primary — the brand emerald. The top bar is solid primary-container. */
    --md-sys-color-primary: #0a5c36;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #0a5c36;
    --md-sys-color-on-primary-container: #ffffff;

    /* Secondary — the lighter green, with the mint tint for chips and selection */
    --md-sys-color-secondary: #1a7a4a;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #d8f3dc;
    --md-sys-color-on-secondary-container: #073d25;

    /* Tertiary — informational blue (Info alerts, links to detail) */
    --md-sys-color-tertiary: #1976d2;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #e3f0fd;
    --md-sys-color-on-tertiary-container: #0d47a1;

    /* Error */
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #93000a;

    /* Success (extended role — not in the M3 spec) */
    --md-sys-color-success: #1a7a4a;
    --md-sys-color-on-success: #ffffff;
    --md-sys-color-success-container: #d8f3dc;
    --md-sys-color-on-success-container: #073d25;

    /* Warning (extended role — not in the M3 spec) */
    --md-sys-color-warning: #855300;
    --md-sys-color-on-warning: #ffffff;
    --md-sys-color-warning-container: #f59e0b;
    --md-sys-color-on-warning-container: #613b00;

    /* Surfaces — pale green canvas, white cards */
    --md-sys-color-background: #f8fbf2;
    --md-sys-color-on-background: #2d3436;
    --md-sys-color-surface: #f8fbf2;
    --md-sys-color-on-surface: #2d3436;
    --md-sys-color-surface-variant: #e8f5e9;
    --md-sys-color-on-surface-variant: #636e72;
    --md-sys-color-surface-dim: #e8f5e9;
    --md-sys-color-surface-bright: #f8fbf2;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #ffffff;
    --md-sys-color-surface-container: #f4fdf7;
    --md-sys-color-surface-container-high: #f0fbf4;
    --md-sys-color-surface-container-highest: #e8f5e9;

    /* Outlines */
    --md-sys-color-outline: #adb5bd;
    --md-sys-color-outline-variant: #d8f3dc;

    /* Inverse */
    --md-sys-color-inverse-surface: #1b263b;
    --md-sys-color-inverse-on-surface: #f4fdf7;
    --md-sys-color-inverse-primary: #8dd6a6;

    /* Utility */
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-surface-tint: #0a5c36;

    /* Shape scale */
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small:       8px;
    --md-sys-shape-corner-medium:      12px;
    --md-sys-shape-corner-large:       16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full:        9999px;

    /* State layers */
    --md-sys-state-hover-opacity:   0.08;
    --md-sys-state-pressed-opacity: 0.12;

    /* ── Legacy --c-* tokens, now aliases onto the M3 roles ──────────── */
    --c-primary:       var(--md-sys-color-primary);
    --c-on-primary:    var(--md-sys-color-on-primary);
    --c-primary-dark:  #073d25;
    --c-primary-light: #1a7a4a;
    --c-secondary:     var(--md-sys-color-secondary);
    /* --c-mint was a light tint behind dark text. Under a fidelity scheme
       primary-container holds the seed itself (dark, for the emerald brand),
       so the light-tint role is secondary-container. Always pair it with
       --c-on-mint; never put --c-primary on --c-mint. */
    --c-mint:          var(--md-sys-color-secondary-container);
    --c-on-mint:       var(--md-sys-color-on-secondary-container);

    --c-bg:            var(--md-sys-color-surface);
    --c-bg-card:       var(--md-sys-color-surface-container-low);
    --c-bg-raised:     var(--md-sys-color-surface-container-high);
    --c-surface:       var(--md-sys-color-surface-container-lowest);

    --c-text:          var(--md-sys-color-on-surface);
    --c-text-muted:    var(--md-sys-color-on-surface-variant);
    /* Dim text: readable on white (the landing's #adb5bd is not, for text) */
    --c-text-dim:      #78848a;

    --c-border:        var(--md-sys-color-outline-variant);
    --c-border-strong: var(--md-sys-color-outline);

    /* Landing-page shades with no M3 role of their own */
    --c-mist:          #e8f5e9;   /* alternate section / hover wash */
    --c-tint:          #f4fdf7;   /* faint panel tint */
    --c-line:          #f0f7f2;   /* hairline between rows */
    --c-faint:         #b2bec3;   /* placeholder / disabled glyphs */
    --c-footer:        #1b263b;   /* footer navy */

    --c-accent:        var(--md-sys-color-primary);
    --c-success:       var(--md-sys-color-success);
    --c-warn:          var(--md-sys-color-warning);
    --c-danger:        var(--md-sys-color-error);

    /* ── MudBlazor palette bridge — drives every Mud component ────────── */
    /* !important is load-bearing: MudThemeProvider injects a runtime
       <style> block into <head> AFTER this stylesheet, so without it the
       C# palette wins and Mud components ignore the loaded theme. */
    --mud-palette-primary: #0a5c36 !important;
    --mud-palette-primary-rgb: 10,92,54 !important;
    --mud-palette-primary-text: #ffffff !important;
    --mud-palette-primary-darken: #073d25 !important;
    --mud-palette-primary-lighten: #1a7a4a !important;
    --mud-palette-primary-hover: rgba(10,92,54, 0.08) !important;
    --mud-palette-secondary: #1a7a4a !important;
    --mud-palette-secondary-rgb: 26,122,74 !important;
    --mud-palette-secondary-text: #ffffff !important;
    --mud-palette-tertiary: #1976d2 !important;
    --mud-palette-tertiary-rgb: 25,118,210 !important;
    --mud-palette-tertiary-text: #ffffff !important;
    --mud-palette-background: #f8fbf2 !important;
    --mud-palette-background-gray: #f4fdf7 !important;
    --mud-palette-surface: #ffffff !important;
    --mud-palette-appbar-background: #0a5c36 !important;
    --mud-palette-appbar-text: #ffffff !important;
    --mud-palette-drawer-background: #ffffff !important;
    --mud-palette-drawer-text: #636e72 !important;
    --mud-palette-drawer-icon: #636e72 !important;
    --mud-palette-text-primary: #2d3436 !important;
    --mud-palette-text-secondary: #636e72 !important;
    --mud-palette-text-disabled: rgba(45,52,54, 0.38) !important;
    --mud-palette-action-default: #636e72 !important;
    --mud-palette-action-disabled: rgba(45,52,54, 0.38) !important;
    --mud-palette-action-disabled-background: rgba(45,52,54, 0.12) !important;
    --mud-palette-divider: #d8f3dc !important;
    --mud-palette-divider-light: rgba(216,243,220, 0.6) !important;
    --mud-palette-lines-default: #d8f3dc !important;
    --mud-palette-lines-inputs: #adb5bd !important;
    --mud-palette-table-lines: #d8f3dc !important;
    --mud-palette-table-striped: #f4fdf7 !important;
    --mud-palette-table-hover: rgba(10,92,54, 0.06) !important;
    --mud-palette-error: #ba1a1a !important;
    --mud-palette-error-rgb: 186,26,26 !important;
    --mud-palette-error-text: #ffffff !important;
    --mud-palette-error-hover: rgba(186,26,26, 0.08) !important;
    --mud-palette-success: #1a7a4a !important;
    --mud-palette-success-rgb: 26,122,74 !important;
    --mud-palette-success-text: #ffffff !important;
    --mud-palette-success-hover: rgba(26,122,74, 0.08) !important;
    --mud-palette-warning: #855300 !important;
    --mud-palette-warning-rgb: 133,83,0 !important;
    --mud-palette-warning-text: #ffffff !important;
    --mud-palette-warning-hover: rgba(133,83,0, 0.08) !important;
    --mud-palette-info: #1976d2 !important;
    --mud-palette-info-rgb: 25,118,210 !important;
    --mud-palette-info-text: #ffffff !important;
    --mud-palette-info-hover: rgba(25,118,210, 0.08) !important;

    /* Legacy radii, mapped onto the shape scale */
    --radius-sm:      var(--md-sys-shape-corner-small);
    --radius-md:      var(--md-sys-shape-corner-medium);
    --radius-lg:      var(--md-sys-shape-corner-medium);
    --radius:         var(--md-sys-shape-corner-medium);
}

html, body {
    font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 14px;   /* M3 body-medium */
    line-height: 20px;
}

/* M3 pill buttons + state layers */
.mud-button-root {
    border-radius: var(--md-sys-shape-corner-full) !important;
    box-shadow: none !important;
    text-transform: none;
}
.mud-button-text:hover,
.mud-button-outlined:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) calc(var(--md-sys-state-hover-opacity) * 100%), transparent) !important;
}
.mud-dialog { border-radius: var(--md-sys-shape-corner-extra-large) !important; }
.mud-chip   { border-radius: var(--md-sys-shape-corner-small) !important; }

/* Shell layout */
.hc-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 52px 1fr;
    grid-template-areas: "topbar topbar" "nav body";
    min-height: 100vh;
}
.hc-topbar {
    grid-area: topbar;
    background: var(--md-sys-color-primary-container);
    border-bottom: 1px solid var(--c-primary-dark);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.hc-nav {
    grid-area: nav;
    background: var(--md-sys-color-surface-container-lowest);
    border-right: 1px solid var(--c-border);
    padding: 16px 0;
    position: sticky;
    top: 52px;
    height: calc(100vh - 52px);
    overflow-y: auto;
}
.hc-body {
    grid-area: body;
    padding: 28px 32px;
    background: var(--c-bg);
    min-height: calc(100vh - 52px);
}

/* Nav items */
.hc-nav__section {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-text-dim);
    padding: 16px 20px 6px;
}
.hc-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--c-text-muted);
    text-decoration: none;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .12s, color .12s;
}
.hc-nav__item:hover { background: var(--c-bg-raised); color: var(--c-text); }
.hc-nav__item.active { color: var(--c-accent); border-left-color: var(--c-accent); background: var(--c-mist); font-weight: 600; }
.hc-nav__icon { font-size: 18px; }

/* Page header */
.page-header { margin-bottom: 24px; }
.page-header__title { font-size: 20px; font-weight: 700; color: var(--c-text); }
.page-header__sub { font-size: 13px; color: var(--c-text-muted); margin-top: 3px; }

/* Loading / empty states */
.loading-pulse {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-text-muted);
    font-size: 13px;
    padding: 32px 0;
}
.empty-state { text-align: center; padding: 48px 24px; color: var(--c-text-muted); }
.empty-state__icon { font-size: 40px; margin-bottom: 12px; }
.empty-state__title { font-size: 15px; font-weight: 600; color: var(--c-text); margin-bottom: 4px; }
.empty-state__sub { font-size: 13px; }

/* Cards */
.detail-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 16px;
}
.detail-card__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); margin-bottom: 12px; }

/* Error UI */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Blazor loading */
.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem; }
.loading-progress circle { fill: none; stroke: var(--md-sys-color-outline-variant); stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--c-accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto .2rem; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }