/* ECIT NORIAN - new UI frame styles.

   The design-system tokens are embedded directly below (see the :root block)
   so this stylesheet is self-contained - it does NOT depend on any ds/tokens
   files being copied into wwwroot. The tokens only declare custom properties
   (they style nothing on their own), so the classic frame is unaffected.

   The DS base.css (which styles bare body/h1/a elements) is deliberately NOT
   included - it would restyle the classic frame. The element styling the new
   frame needs is re-declared below, scoped under .norian-frame.

   SCOPING: everything here lives under .norian-frame (applied by the new chrome)
   so the classic frame is untouched. Dark mode adds .norian-dark on the same
   root, in sync with MudThemeProvider's IsDarkMode. */

/* ------------------------------------------------------------------
   Design-system tokens (embedded) inlined here so the new
   frame is self-contained and does not silently break if the token
   files are not copied to wwwroot/css/ds/tokens/. Values are the ECIT
   NORIAN brand tokens (navy #043560 primary, cream ground, Arial family).
   These only declare custom properties - they style nothing on their own,
   so the classic frame is unaffected.
   ------------------------------------------------------------------ */
:root {
    /* Brand core */
    --navy-900: #022038;
    --navy-800: #033052;
    --navy-700: #043560;
    --navy-600: #0a4474;
    --navy-500: #114f82;
    --navy-400: #2c6394;
    --navy-300: #6f93b3;
    --navy-200: #b3c5d6;
    --navy-100: #dde6ef;
    --navy-050: #eef3f8;
    /* Accent blues */
    --blue-600: #1b639f;
    --blue-500: #2377ba;
    --blue-400: #4a92cd;
    --cyan-500: #0f9ed5;
    /* Secondary accents (data viz) */
    --magenta-500: #a02b93;
    --green-500: #4ea72e;
    /* Grounds */
    --cream: #fbf7ef;
    --cream-dark: #f2ebdd;
    --white: #ffffff;
    /* Neutrals */
    --ink-900: #11161c;
    --grey-700: #3a4651;
    --grey-600: #586672;
    --grey-500: #79858f;
    --grey-400: #a3acb4;
    --grey-300: #cbd2d8;
    --grey-200: #e3e7ea;
    --grey-100: #eef1f3;
    --grey-050: #f6f8f9;
    /* Semantic status */
    --success: #4ea72e;
    --success-bg: #eef6e9;
    --warning: #d98e1f;
    --warning-bg: #fbf2e1;
    --danger: #c23b2e;
    --danger-bg: #f9e9e7;
    --info: #2377ba;
    --info-bg: #e9f1f8;
    /* Semantic aliases - text */
    --text-strong: var(--navy-700);
    --text-body: var(--grey-700);
    --text-muted: var(--grey-500);
    --text-on-dark: var(--white);
    --text-on-dark-muted: rgba(255, 255, 255, 0.72);
    --text-link: var(--blue-500);
    /* Surfaces */
    --surface-page: var(--cream);
    --surface-card: var(--white);
    --surface-raised: var(--white);
    --surface-sunken: var(--grey-050);
    --surface-dark: var(--navy-700);
    --surface-dark-alt: var(--navy-800);
    /* Lines & borders */
    --border-subtle: var(--grey-200);
    --border-default: var(--grey-300);
    --border-strong: var(--navy-700);
    --border-on-dark: rgba(255, 255, 255, 0.18);
    --rule-accent: var(--blue-500);
    /* Interactive */
    --action-primary: var(--navy-700);
    --action-primary-hover: var(--navy-600);
    --action-primary-active: var(--navy-900);
    --action-accent: var(--blue-500);
    --action-accent-hover: var(--blue-600);
    --focus-ring: var(--cyan-500);
    /* Data viz sequence */
    --chart-1: var(--navy-700);
    --chart-2: var(--blue-500);
    --chart-3: var(--cyan-500);
    --chart-4: var(--green-500);
    --chart-5: var(--magenta-500);
    --chart-6: var(--navy-300);
    /* Typography - families */
    --font-display: "Arial Black", "Arial Bold", Arial, "Helvetica Neue", Helvetica, sans-serif;
    --font-sans: Arial, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Typography - weights */
    --fw-regular: 400;
    --fw-medium: 600;
    --fw-bold: 700;
    --fw-black: 900;
    /* Typography - scale */
    --fs-display-xl: 56px;
    --fs-display-l: 43px;
    --fs-display-m: 34px;
    --fs-h1: 30px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-body-lg: 18px;
    --fs-body: 16px;
    --fs-body-sm: 14px;
    --fs-caption: 12.5px;
    --fs-overline: 12px;
    /* Typography - line heights */
    --lh-tight: 0.95;
    --lh-display: 1.05;
    --lh-heading: 1.18;
    --lh-body: 1.55;
    --lh-relaxed: 1.7;
    /* Typography - letter spacing */
    --ls-display: -0.01em;
    --ls-normal: 0;
    --ls-overline: 0.14em;
    --ls-wide: 0.04em;
    /* Spacing */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    /* Layout */
    --container-max: 1200px;
    --container-wide: 1320px;
    --gutter: 24px;
    --section-y: 96px;
    /* Radii */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    /* Stroke widths */
    --stroke-hairline: 1px;
    --stroke-rule: 2px;
    --stroke-emphasis: 3px;
    /* Control sizing */
    --control-h-sm: 34px;
    --control-h-md: 42px;
    --control-h-lg: 50px;
    /* Z layers */
    --z-base: 1;
    --z-sticky: 100;
    --z-overlay: 1000;
    --z-modal: 1100;
    --z-toast: 1200;
    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(4, 53, 96, 0.06);
    --shadow-sm: 0 1px 3px rgba(4, 53, 96, 0.08), 0 1px 2px rgba(4, 53, 96, 0.04);
    --shadow-md: 0 4px 12px rgba(4, 53, 96, 0.08), 0 2px 4px rgba(4, 53, 96, 0.05);
    --shadow-lg: 0 12px 28px rgba(4, 53, 96, 0.12), 0 4px 8px rgba(4, 53, 96, 0.06);
    --shadow-xl: 0 24px 56px rgba(4, 53, 96, 0.16);
    --shadow-focus: 0 0 0 3px rgba(15, 158, 213, 0.35);
    /* Motion */
    --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 360ms;
    /* Brand gradients */
    --grad-navy: linear-gradient(120deg, #043560 0%, #033052 60%, #022038 100%);
    --grad-navy-soft: linear-gradient(180deg, #0a4474 0%, #043560 100%);
    --scrim-bottom: linear-gradient(180deg, rgba(4, 53, 96, 0) 0%, rgba(4, 53, 96, 0.75) 100%);
    --scrim-left: linear-gradient(90deg, rgba(4, 53, 96, 0.85) 0%, rgba(4, 53, 96, 0) 70%);
}

/* ============================================================
   Dark palette
   Only the semantic aliases the frame's own components read are
   overridden; MudBlazor components get their dark palette from
   MudThemeProvider (PaletteDark in NorianTheme), not from here.
   ============================================================ */
.norian-frame.norian-dark {
    --surface-page: #0b1d30;
    --surface-card: #13293f;
    --surface-raised: #13293f;
    --surface-sunken: #16304a;
    --text-strong: #eaf1f9;
    --text-body: #c3d0dd;
    --text-muted: #8b9db0;
    --text-link: #6bb2ea;
    --border-subtle: rgba(255, 255, 255, 0.09);
    --border-default: rgba(255, 255, 255, 0.17);
    --rule-accent: #6bb2ea;
    --action-accent: #6bb2ea;
    --action-accent-hover: #4aa3e8;
    --success: #6fc04a;
    --success-bg: rgba(78, 167, 46, 0.20);
    --warning: #e0a93a;
    --warning-bg: rgba(197, 142, 42, 0.22);
    --danger: #e57979;
    --danger-bg: rgba(197, 64, 64, 0.20);
    --info: #4aa3e8;
    --info-bg: rgba(35, 119, 186, 0.20);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50);
}

/* ============================================================
   Type scale - applied from DS tokens, scoped to the frame.
   (DS base.css is not loaded globally, so we re-declare here.)
   ============================================================ */
.norian-frame {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-body);
    overflow-x: hidden;
}

    .norian-frame h1 {
        font-family: var(--font-display);
        font-weight: var(--fw-black);
        font-size: var(--fs-display-m);
        line-height: var(--lh-display);
        letter-spacing: var(--ls-display);
        color: var(--text-strong);
        margin: 0 0 0.25em;
    }

    .norian-frame h2 {
        font-weight: var(--fw-bold);
        font-size: var(--fs-h2);
        line-height: var(--lh-heading);
        color: var(--text-strong);
        margin: 0 0 0.4em;
    }

    .norian-frame h3 {
        font-weight: var(--fw-bold);
        font-size: var(--fs-h3);
        line-height: var(--lh-heading);
        color: var(--text-strong);
        margin: 0 0 0.4em;
    }

    /* ============================================================
   Editorial utilities - the identity the redesign leans on.
   ============================================================ */
    .norian-frame .eyebrow {
        font-family: var(--font-sans);
        font-weight: var(--fw-bold);
        font-size: var(--fs-overline);
        text-transform: uppercase;
        letter-spacing: var(--ls-overline);
        color: var(--action-accent);
    }

    /* Editorial page header - eyebrow tight above the title. */
    .norian-frame .section-header .eyebrow {
        display: block;
        margin-bottom: 2px;
    }

    /* The signature thin blue rule */
    .norian-frame .rule {
        background: var(--rule-accent);
        border: 0;
        height: var(--stroke-rule);
        width: 56px;
    }

    /* Topographic mesh motif as a gradient (no external asset dependency) */
    .norian-frame .mesh {
        background-image: repeating-linear-gradient(60deg, rgba(35, 119, 186, 0.05) 0 1px, transparent 1px 48px), repeating-linear-gradient(-60deg, rgba(35, 119, 186, 0.05) 0 1px, transparent 1px 48px);
    }

    .norian-frame.norian-dark .mesh {
        background-image: repeating-linear-gradient(60deg, rgba(120, 170, 220, 0.05) 0 1px, transparent 1px 48px), repeating-linear-gradient(-60deg, rgba(120, 170, 220, 0.05) 0 1px, transparent 1px 48px);
    }

    /* ============================================================
   Status chips - semantic pill, one class per meaning.
   Covers checklist (OK / Avvik / N/A) and admin (Pending / Active).
   ============================================================ */
    .norian-frame .chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px;
        border-radius: var(--radius-pill);
        font-size: var(--fs-caption);
        font-weight: var(--fw-bold);
        line-height: 1.4;
    }

    .norian-frame .chip--success {
        background: var(--success-bg);
        color: var(--success);
    }

    .norian-frame .chip--warning {
        background: var(--warning-bg);
        color: var(--warning);
    }

    .norian-frame .chip--danger {
        background: var(--danger-bg);
        color: var(--danger);
    }

    .norian-frame .chip--info {
        background: var(--info-bg);
        color: var(--info);
    }

    .norian-frame .chip--neutral {
        background: var(--surface-sunken);
        color: var(--text-muted);
    }

    /* ============================================================
   Motion - calm, short, DS easing. Honours reduced-motion.
   ============================================================ */
    .norian-frame .lift {
        transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
    }

        .norian-frame .lift:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

@keyframes norian-slide-in {
    from {
        transform: translateX(16px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes norian-fade-up {
    from {
        transform: translateY(8px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes norian-pop {
    from {
        transform: scale(0.96);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.norian-frame .anim-slide {
    animation: norian-slide-in var(--dur-fast) var(--ease-standard);
}

.norian-frame .anim-enter {
    animation: norian-fade-up var(--dur-base) var(--ease-out);
}

.norian-frame .anim-pop {
    animation: norian-pop var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
    .norian-frame .anim-slide,
    .norian-frame .anim-enter,
    .norian-frame .anim-pop {
        animation: none;
    }
}

/* Content width capped at 1200px and centered. Shared chrome container. */
.norian-frame .mud-main-content .mud-container {
    max-width: var(--container-max);
}

/* ============================================================
   Nav rail - bespoke icon rail (AppNavRail). Vertical icon+label
   items, active accent, narrow docked drawer.
   ============================================================ */
.norian-frame .app-rail-drawer.mud-drawer {
    width: 76px;
}

.norian-frame .app-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 0;
    height: 100%;
    background: var(--surface-card);
}

.norian-frame .app-rail-spacer {
    flex: 1;
}

/* Rail item - native NavLink styled 56px stacked, thin-line icon
   over a 10px bold label; grey when idle. */
.norian-frame .app-rail .rail-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 56px;
    padding: 10px 0;
    border-radius: 10px;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    .norian-frame .app-rail .rail-item .rail-label {
        font-size: 10px;
        font-weight: 700;
        line-height: 1.15;
        text-align: center;
        max-width: 52px;
    }

    .norian-frame .app-rail .rail-item svg {
        display: block;
    }

    .norian-frame .app-rail .rail-item:hover {
        background: var(--surface-sunken);
        color: var(--text-strong);
    }

    /* Left edge bar - blue only when active. */
    .norian-frame .app-rail .rail-item .rail-bar {
        position: absolute;
        left: -10px;
        top: 12px;
        bottom: 12px;
        width: 3px;
        border-radius: 2px;
        background: transparent;
    }

    /* Active - navy fill, white content, blue edge bar. */
    .norian-frame .app-rail .rail-item.active,
    .norian-frame .app-rail .rail-item.active:hover {
        background: var(--navy-700);
        color: #fff;
    }

        .norian-frame .app-rail .rail-item.active .rail-bar {
            background: var(--blue-500);
        }

    /* Pending-request count on Admin. */
    .norian-frame .app-rail .rail-item .rail-count {
        position: absolute;
        top: 4px;
        right: 8px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--warning);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

/* ============================================================
   Density register - the "dense" surface. Airy is the default;
   apply .dense-surface on admin grids and checklist field sections.
   Pairs with Dense="true" / Margin.Dense on the Mud components.
   ============================================================ */
.norian-frame .dense-surface .mud-table-cell {
    padding-top: 6px;
    padding-bottom: 6px;
}

.norian-frame .dense-surface .mud-table-dense .mud-table-cell {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ============================================================
   Radius normalization - align Mud surfaces to the DS 8px token
   inside the new frame (Mud defaults ignore LayoutProperties on
   some components). Scoped so the classic frame is unaffected.
   ============================================================ */
.norian-frame .mud-paper,
.norian-frame .mud-card {
    border-radius: var(--radius-md);
}

/* ============================================================
   Admin console (Organization / Platform admin).
   Built on MudBlazor components; this only styles them to match
   the ECIT NORIAN design (stat cards, section cards, tables, tabs).
   ============================================================ */
.norian-frame .admin-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.norian-frame .admin-title {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: var(--fs-h1);
    line-height: 1.1;
    color: var(--text-strong);
    margin: 2px 0 4px;
}

/* Organization / Platform segmented toggle - grey track, white active segment. */
.norian-frame .admin-scope {
    display: inline-flex;
    gap: 0;
    padding: 3px;
    background: var(--surface-sunken);
    border-radius: 9px;
    height: fit-content;
    font-size: 14px;
    font-weight: 600;
}

.norian-frame .admin-scope__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.norian-frame .admin-scope__btn--active {
    background: var(--surface-card);
    color: var(--text-strong);
    border-color: var(--border-default);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.norian-frame .admin-scope__btn svg {
    flex: none;
}

/* Stat cards */
.norian-frame .stat-card {
    padding: 16px 18px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    height: 100%;
}

.norian-frame .stat-card--accent {
    border-left: 3px solid var(--warning);
}

.norian-frame .stat-card__label {
    font-size: var(--fs-overline);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}

.norian-frame .stat-card__value {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 27px;
    line-height: 1.1;
    color: var(--text-strong);
    margin-top: 4px;
}

/* Section cards */
.norian-frame .admin-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    margin-bottom: 16px;
}

.norian-frame .admin-card__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: 13px;
    color: var(--text-strong);
    margin-bottom: 12px;
}

/* Big structure numbers */
.norian-frame .mini-stat__value {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 24px;
    line-height: 1;
    color: var(--text-strong);
}

.norian-frame .mini-stat__label {
    font-size: var(--fs-overline);
    color: var(--text-muted);
}

/* Tables inside the console - quiet, uppercase headers */
.norian-frame .admin-table th {
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-weight: var(--fw-bold);
}

/* Tabs - transparent bar with a bottom rule; active tab is a bordered segment. */
/* v9 tab bar is .mud-tabs-tabbar (NOT .mud-tabs-toolbar). Underline slider + bottom rule. */
.norian-frame .admin-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 22px;
}

.norian-frame .admin-tabs .mud-tab {
    text-transform: none;
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    min-width: unset;
}

    .norian-frame .admin-tabs .mud-tab.mud-tab-active {
        color: var(--text-strong);
    }

.norian-frame .admin-tabs .mud-tab-slider {
    background: var(--text-strong);
    height: 3px;
}

/* Profile - "Where you're a member" list. */
.norian-frame .profile-membership-org {
    margin-bottom: 14px;
}

.norian-frame .profile-membership-org__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    margin-bottom: 6px;
}

.norian-frame .profile-membership-unit {
    padding-left: 22px;
    margin-bottom: 4px;
}

.norian-frame .profile-membership-unit__name {
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--text-body);
}

.norian-frame .profile-membership-unit__agents {
    padding-left: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ============================================================
   Top bar (new chrome) - brand wordmark, workspace chip, avatar.
   ============================================================ */
.norian-frame .brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
}

.norian-frame .brand__ecit {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.norian-frame .brand__bar {
    width: 1px;
    height: 18px;
    background: currentColor;
    opacity: 0.4;
}

.norian-frame .brand__norian {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.14em;
}

.norian-frame .ws-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    padding: 2px 10px 2px 4px;
    height: 38px;
    cursor: pointer;
    color: inherit;
}

    .norian-frame .ws-chip:hover {
        background: rgba(255, 255, 255, 0.06);
    }

.norian-frame .ws-chip--static {
    cursor: default;
}

    .norian-frame .ws-chip--static:hover {
        background: transparent;
    }

.norian-frame .ws-chip__caret {
    opacity: 0.75;
    flex: none;
}

.norian-frame .lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: var(--fw-bold);
    cursor: pointer;
}

    .norian-frame .lang-chip:hover {
        background: rgba(255, 255, 255, 0.14);
    }

.norian-frame .lang-chip__caret {
    opacity: 0.55;
    flex: none;
}

.norian-frame .ws-chip__avatar {
    background: var(--blue-500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    height: 28px;
    width: 28px;
}

.norian-frame .ws-chip__labels {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
    gap: 2px;
}

.norian-frame .ws-chip__eyebrow {
    font-size: 8px;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

.norian-frame .ws-chip__name {
    font-size: 13px;
    font-weight: 600;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Top bar - always navy, 56px tall. */
.norian-frame .mud-appbar {
    background-color: var(--navy-700);
    color: #fff;
    height: 56px;
    min-height: 56px;
    box-shadow: var(--shadow-sm);
}

    .norian-frame .mud-appbar > .mud-toolbar {
        height: 56px;
        min-height: 56px;
    }

.norian-frame .topbar-avatar {
    background: var(--cyan-500);
    color: var(--navy-900);
    font-size: 12px;
    font-weight: 700;
    height: 32px;
    width: 32px;
    cursor: pointer;
}

/* Top bar icon buttons */
.norian-frame .topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

    .norian-frame .topbar-icon-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

/* Global search - translucent pill on the navy bar. */
.norian-frame .topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 250px;
    padding: 6px 12px;
    margin: 0 8px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.norian-frame .topbar-search--inert {
    cursor: default;
    opacity: 0.55;
}

.norian-frame .topbar-search svg {
    flex: none;
}

/* Profile avatar: initials sit underneath; the Entra photo is layered on top and
   removes itself via onerror when the user has no photo, revealing the initials. */
.norian-frame .topbar-avatar-wrap {
    position: relative;
    width: 32px;
    height: 32px;
    line-height: 0;
    margin-left: 10px;
}

.norian-frame .topbar-avatar-photo {
    position: absolute;
    inset: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
}

/* Profile menu header - rendered in the popover (outside .norian-frame), so unscoped. */
.menu-userhead {
    padding: 8px 16px 4px;
    max-width: 240px;
}

/* ============================================================
   Density - the new frame reads a touch tighter than MudBlazor defaults.
   ============================================================ */
.norian-frame .admin-card {
    margin-bottom: 12px;
}

.norian-frame .admin-stats {
    margin-bottom: 4px;
}

/* ============================================================
   Chat Three-column shell: nav (conversations/agents),
   center thread, right Sources drawer (on-demand, not permanent).
   ============================================================ */
.norian-frame .chat-shell {
    display: flex;
    /* Same formula the pre-redesign AgentChat page used. A plain height:100% here would
       resolve against MudMainContent's MudContainer, which has no defined height of its own
       (it just grows with content) - this is why the chat stopped filling the viewport and
       left dead space below it after the shell was rewritten from a MudStack to a plain div. */
    height: calc(100vh - var(--mud-appbar-height));
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
}

/* Chat is the one screen that should use all available width next to the rail, not the
   1200px content cap the rest of the app uses. :has() is supported in all current evergreen
   browsers (Chrome/Edge 105+, Safari 15.4+, Firefox 121+) - fine for an internal enterprise app.
   !important is required here: NewChrome's MudContainer carries MudBlazor's own "px-6"/"pt-4"
   utility classes, which MudBlazor itself ships as !important - a normal-specificity override
   cannot beat that, which is why this was not actually taking effect (confirmed via devtools:
   the 24px padding was winning) despite matching in the Elements panel. */
.norian-frame .mud-main-content:has(.chat-shell) .mud-container {
    max-width: none !important;
    padding: 0 !important;
}

.norian-frame .chat-nav {
    width: 288px;
    flex: none;
    background: var(--surface-card);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.norian-frame .chat-nav__top {
    padding: 16px 16px 12px;
}

.norian-frame .chat-nav__new {
    width: 100%;
    border: none;
    background: var(--navy-700);
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    font-weight: var(--fw-bold);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    cursor: pointer;
}

.norian-frame .chat-nav__toggle {
    display: flex;
    background: var(--surface-sunken);
    border-radius: 8px;
    padding: 3px;
    font-size: 13px;
    font-weight: var(--fw-bold);
}

.norian-frame .chat-nav__toggle-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 7px;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
}

.norian-frame .chat-nav__toggle-btn--active {
    background: var(--surface-card);
    color: var(--text-strong);
}

.norian-frame .chat-nav__list {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px 14px;
}

/* ============================================================
   Chat nav (agents/conversations) - collapsible at every width, two different mechanics
   sharing one button (.chat-head__nav-toggle).

   Below 900px the fixed 288px column would crush the center thread, so the nav hides
   off-screen by default and slides in as an overlay via .chat-nav--open, with a
   tap-to-close backdrop. Default there is hidden.

   At 900px and above the nav is a flex child of .chat-shell, so collapsing it has to take
   it out of flow rather than slide it over the thread - an overlay would hide the column
   without giving the thread its width back, which is the whole point of collapsing on a
   narrow desktop window. That is .chat-shell--nav-collapsed. Default there is visible, and
   the choice persists in the ui_chatnav cookie (see wwwroot/js/ui-frame.js).

   Because the two defaults are opposites, the two states are tracked as separate booleans
   in AgentChat rather than one shared flag - see _mobileNavOpen / _navCollapsed there.
   ============================================================ */
@media (min-width: 901px) {
    .norian-frame .chat-shell--nav-collapsed .chat-nav {
        display: none;
    }
}

@media (max-width: 900px) {
    .norian-frame .chat-nav {
        position: fixed;
        top: var(--mud-appbar-height);
        left: 0;
        bottom: 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-md);
    }

        .norian-frame .chat-nav.chat-nav--open {
            transform: translateX(0);
        }

    /* The desktop collapse must not leak into the overlay breakpoint: below 900px the nav is
       always in the DOM and positioned off-canvas, and _navCollapsed is not the flag in
       charge here. Without this the two states would fight after a resize. */
    .norian-frame .chat-shell--nav-collapsed .chat-nav {
        display: flex;
    }
}

.norian-frame .chat-nav-backdrop {
    display: none;
}

@media (max-width: 900px) {
    .norian-frame .chat-nav-backdrop.chat-nav-backdrop--visible {
        display: block;
        position: fixed;
        inset: var(--mud-appbar-height) 0 0 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 55;
    }
}

.norian-frame .chat-convo-item {
    padding: 11px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 2px;
}

    .norian-frame .chat-convo-item:hover {
        background: var(--surface-sunken);
    }

.norian-frame .chat-convo-item__title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
}

.norian-frame .chat-convo-item__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--action-accent);
    flex: none;
}

.norian-frame .chat-convo-item__title {
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.norian-frame .chat-convo-item__meta {
    font-size: 11.5px;
    color: var(--text-muted);
    padding-left: 13px;
}

.norian-frame .chat-agent-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 2px;
    border: 1px solid transparent;
}

    .norian-frame .chat-agent-card:hover {
        background: var(--surface-sunken);
    }

.norian-frame .chat-agent-card--active {
    border-color: var(--action-accent);
    background: var(--info-bg);
}

/* Applied while ShouldDisableUserInput is true (message sending/streaming) - prevents the
   agent-switch race this card's click handler used to allow unconditionally (see SelectAgent's
   ShouldDisableUserInput guard in AgentChat.razor.cs for why). Dims + blocks pointer events
   rather than removing the card, so the active agent stays visible as context. */
.norian-frame .chat-agent-card--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.norian-frame .chat-agent-card__avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--navy-050);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: 11px;
    flex: none;
}

.norian-frame.norian-dark .chat-agent-card__avatar {
    background: rgba(255, 255, 255, 0.08);
}

.norian-frame .chat-agent-card__name {
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.norian-frame .chat-agent-card__desc {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-muted);
    /* Defensive clamp on top of the entity's own MaxLength(100) - never trust one cap alone. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Citation/attachment cards in chat message footers - file, link, and image annotations. */
.norian-frame .chat-attachment-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    padding: 8px 12px 8px 8px;
    cursor: pointer;
    color: inherit;
    max-width: 280px;
}

    .norian-frame .chat-attachment-card:hover {
        border-color: var(--action-accent);
    }

.norian-frame .chat-attachment-card--busy {
    opacity: 0.55;
    cursor: default;
}

.norian-frame .chat-attachment-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--navy-050);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.norian-frame.norian-dark .chat-attachment-card__icon {
    background: rgba(255, 255, 255, 0.08);
}

.norian-frame .chat-attachment-card__thumb {
    width: 44px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex: none;
}

.norian-frame .chat-attachment-card__title {
    font-size: 12px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.norian-frame .chat-attachment-card__meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* ============================================================
   Home. Agents-first hero above the existing units section.
   ============================================================ */
.norian-frame .home-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .norian-frame .home-grid {
        grid-template-columns: 1fr;
    }
}

.norian-frame .home-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 13px;
}

.norian-frame .home-agent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 30px;
}

@media (max-width: 600px) {
    .norian-frame .home-agent-grid {
        grid-template-columns: 1fr;
    }
}

.norian-frame .home-agent-card {
    padding: 16px 17px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
}

    .norian-frame .home-agent-card:hover {
        border-color: var(--action-accent);
        box-shadow: var(--shadow-sm);
    }

.norian-frame .home-agent-card__head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 9px;
}

.norian-frame .home-agent-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--navy-050);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: 12px;
    flex: none;
}

.norian-frame.norian-dark .home-agent-card__avatar {
    background: rgba(255, 255, 255, 0.08);
}

.norian-frame .home-agent-card__name {
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-size: 14px;
    line-height: 1.2;
}

.norian-frame .home-agent-card__desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.norian-frame .home-agent-card__cta {
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    color: var(--action-accent);
}

.norian-frame .home-app-tile {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    cursor: pointer;
}

    .norian-frame .home-app-tile:hover {
        border-color: var(--action-accent);
    }

.norian-frame .home-app-tile__icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--navy-050);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.norian-frame.norian-dark .home-app-tile__icon {
    background: rgba(255, 255, 255, 0.08);
}

.norian-frame .home-app-tile__name {
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-size: 14px;
}

/* Org picker (/orgs) */
.norian-frame .org-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 600px) {
    .norian-frame .org-picker-grid {
        grid-template-columns: 1fr;
    }
}

.norian-frame .org-picker-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    text-decoration: none;
    color: inherit;
}

    .norian-frame .org-picker-card:hover {
        border-color: var(--action-accent);
    }

.norian-frame .org-picker-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--navy-700);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    flex: none;
}

.norian-frame .org-picker-card__name {
    flex: 1;
    font-size: 15px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.norian-frame .org-picker-card svg {
    color: var(--action-accent);
    flex: none;
}

.norian-frame .chat-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
}

.norian-frame .chat-head {
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

/* Collapses/expands .chat-nav at every width. Below 900px it opens the off-canvas overlay
   (.chat-nav--open); at 900px and above it removes the column from the flex layout
   (.chat-shell--nav-collapsed) so the thread actually gains the 288px. Both are driven from
   this one button - see the chat-nav block above and AgentChat.razor. */
.norian-frame .chat-head__nav-toggle {
    display: inline-flex;
    border: none;
    background: transparent;
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
}

    .norian-frame .chat-head__nav-toggle:hover {
        background: var(--surface-sunken);
    }

.norian-frame .chat-head__avatar {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--navy-700);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: 12px;
    flex: none;
    position: relative;
}

.norian-frame .chat-head__ready-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--surface-card);
}

.norian-frame .chat-head__name {
    font-size: 15px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.norian-frame .chat-head__ready-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: var(--fw-bold);
    color: var(--success);
}

.norian-frame .chat-head__toolbtn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .norian-frame .chat-head__toolbtn:hover {
        background: var(--surface-sunken);
    }

.norian-frame .chat-head__support-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--magenta-500);
    background: transparent;
    color: var(--magenta-500);
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: var(--fw-bold);
    font-size: 13px;
    cursor: pointer;
}

.norian-frame .chat-head__sources-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    padding: 8px 13px;
    border-radius: 8px;
    font-weight: var(--fw-bold);
    font-size: 13px;
    cursor: pointer;
}

.norian-frame .chat-head__sources-btn--active {
    border-color: var(--action-accent);
    background: var(--info-bg);
    color: var(--blue-600);
}

.norian-frame .chat-head__sources-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.norian-frame .chat-head__toolbtn:disabled {
    opacity: 0.35;
    cursor: default;
}

    .norian-frame .chat-head__toolbtn:disabled:hover {
        background: transparent;
    }

.norian-frame .chat-composer__box .mud-input-slot {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-body);
}

/* Chat message row - bespoke markup (ChatMessageDisplay no longer uses MudXChat; its internal
   CSS classes were unreachable/undocumented and fighting every override).  */
.norian-frame .chat-msg-row {
    display: flex;
    flex-direction: column;
    max-width: 88%;
}

.norian-frame .chat-msg-row--agent {
    align-self: flex-start;
    align-items: flex-start;
}

.norian-frame .chat-msg-row--user {
    align-self: flex-end;
    align-items: flex-end;
    max-width: 78%;
}

.norian-frame .chat-msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.norian-frame .chat-msg-header__avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--navy-050);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: 9px;
    flex: none;
}

.norian-frame.norian-dark .chat-msg-header__avatar {
    background: rgba(255, 255, 255, 0.08);
}

.norian-frame .chat-msg-header__name {
    font-size: 12px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.norian-frame .chat-msg-bubble {
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
}

.norian-frame .chat-msg-bubble--agent {
    background: var(--surface-card);
    color: var(--text-body);
    border: 1px solid var(--border-subtle);
}

.norian-frame .chat-msg-bubble--user {
    background: var(--navy-700);
    color: #fff;
    border-radius: 14px 14px 3px 14px;
    padding: 12px 16px;
}

.norian-frame .chat-msg-annotations {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

.norian-frame .chat-msg-stats {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

.norian-frame .chat-msg-actions {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 4px;
    margin-left: -8px;
}

.norian-frame .chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 26px 0;
    min-width: 0;
}

.norian-frame .chat-messages__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.norian-frame .chat-composer {
    flex: none;
    padding: 14px 24px 20px;
    background: var(--surface-page);
}

.norian-frame .chat-composer__inner {
    max-width: 720px;
    margin: 0 auto;
}

.norian-frame .chat-composer__box {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

    .norian-frame .chat-composer__box > * {
        min-width: 0;
    }

/* Drag-and-drop target feedback. The drop handler is registered on the document (see
   agentchat.js) because a drop anywhere over the conversation should attach, not only one
   aimed precisely at the composer - but the composer is where the file will end up, so that
   is where the affordance belongs. The class lands on body since that is the one element the
   handler can reach without knowing this markup. */
body.norian-chat-dragover .norian-frame .chat-composer__box {
    border-color: var(--navy-700);
    border-style: dashed;
    background: var(--surface-sunken);
}

.norian-frame .chat-composer__send {
    border: none;
    background: var(--navy-700);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    cursor: pointer;
}

    .norian-frame .chat-composer__send:disabled {
        opacity: 0.5;
        cursor: default;
    }

.norian-frame .chat-composer__hint {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 8px;
}

/* Sources drawer content - "Sources in this reply" card list */
.norian-frame .chat-sources__card {
    padding: 13px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    margin-bottom: 10px;
}

.norian-frame .chat-sources__icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--navy-050);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.norian-frame.norian-dark .chat-sources__icon {
    background: rgba(255, 255, 255, 0.08);
}

.norian-frame .chat-sources__title {
    font-size: 13px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    line-height: 1.3;
}

/* Dialog polish - deliberately NOT under .norian-frame: MudDialogProvider is declared in
   MainLayout.razor as a sibling of NewChrome, not a descendant, so the .norian-frame.norian-dark
   semantic-token remap never reaches dialogs. Only static tokens (safe in both modes) or
   MudBlazor's own --mud-palette-* variables (already theme-aware globally) are used here. */
.mud-dialog {
    border-radius: var(--radius-md);
}

.mud-dialog-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
}

    .mud-dialog-title h6 {
        font-family: var(--font-sans);
        font-weight: var(--fw-bold);
    }

.mud-dialog-actions {
    padding: 12px 24px 20px;
}

/* MudMenu/MudList popovers render via MudPopoverProvider, declared in MainLayout as a sibling
   of NewChrome - same reason dialogs needed global (non-.norian-frame-scoped) rules above.
   Without this, menu items (e.g. the workspace switcher dropdown) fall back to MudBlazor's
   default Roboto typography instead of the app's sans font. */
.mud-menu-item-text,
.mud-menu-item-text .mud-typography,
.mud-menu-item {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.mud-list-item-text .mud-typography {
    font-family: var(--font-sans);
    font-size: 13px;
}

.mud-list-item,
.mud-menu-item {
    min-height: 36px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.mud-list-item-icon,
.mud-menu-item-icon {
    min-width: 32px;
}

.norian-frame .chat-sources__meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* RightSideDrawer header - reskinned */
.norian-frame .sources-drawer .mud-drawer-content {
    background: var(--surface-card);
}

.norian-frame .sources-drawer__head {
    padding: 15px 18px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
}

/* ============================================================
   Checklist hub (Apps.Checklist) - values match the prototype exactly.
   Rendered inside Web's chrome, so .norian-frame scoping applies.
   ============================================================ */
.norian-frame .checklist-hub {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 40px 80px;
}

.norian-frame .checklist-hub__crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.norian-frame .checklist-hub__crumbs a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.norian-frame .checklist-hub__crumb-current {
    color: var(--text-strong);
    font-weight: var(--fw-bold);
}

.norian-frame .checklist-hub__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.norian-frame .checklist-hub__title {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 30px;
    color: var(--text-strong);
    margin: 0 0 5px;
    letter-spacing: -.01em;
}

.norian-frame .checklist-hub__subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    max-width: 620px;
    line-height: 1.5;
}

.norian-frame .checklist-hub__new-btn {
    border: none;
    background: var(--navy-700);
    color: #fff;
    padding: 11px 18px;
    border-radius: 8px;
    font-weight: var(--fw-bold);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex: none;
    cursor: pointer;
}

.norian-frame .checklist-hub__new-btn--sm {
    padding: 9px 16px;
    margin: 0 auto;
}

.norian-frame .checklist-hub__banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--info-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    padding: 12px 15px;
    margin-bottom: 22px;
}

.norian-frame .checklist-hub__banner svg {
    flex: none;
    margin-top: 1px;
}

.norian-frame .checklist-hub__banner p {
    font-size: 13px;
    color: var(--text-strong);
    line-height: 1.5;
    margin: 0;
}

.norian-frame .checklist-hub__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.norian-frame .checklist-hub__search {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 9px 13px;
    flex: 1;
    max-width: 340px;
    color: var(--text-muted);
}

.norian-frame .checklist-hub__search input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--text-body);
    width: 100%;
}

.norian-frame .checklist-hub__spacer {
    flex: 1;
}

.norian-frame .checklist-hub__filters {
    display: flex;
    background: var(--surface-sunken);
    border-radius: 8px;
    padding: 3px;
    font-size: 12px;
    font-weight: var(--fw-bold);
}

.norian-frame .checklist-hub__filter {
    border: none;
    background: transparent;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.norian-frame .checklist-hub__filter--active {
    background: var(--surface-card);
    color: var(--text-strong);
}

.norian-frame .checklist-hub__table {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    overflow: hidden;
}

.norian-frame .checklist-hub__row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.1fr 1.2fr 1fr;
    gap: 14px;
    align-items: center;
    padding: 13px 20px;
}

.norian-frame .checklist-hub__row--header {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-subtle);
    font: 700 10.5px/1 Arial;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 20px;
}

.norian-frame .checklist-hub__row--body {
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
}

.norian-frame .checklist-hub__row--body:last-child {
    border-bottom: none;
}

.norian-frame .checklist-hub__row--body:hover {
    background: var(--surface-sunken);
}

.norian-frame .checklist-hub__client {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.norian-frame .checklist-hub__client-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--surface-sunken);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: 11px;
    flex: none;
}

.norian-frame.norian-dark .checklist-hub__client-avatar {
    background: rgba(255, 255, 255, 0.08);
}

.norian-frame .checklist-hub__client-name {
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.norian-frame .checklist-hub__org-number {
    font-size: 13px;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.norian-frame .checklist-hub__created-by {
    font-size: 13px;
    color: var(--text-muted);
}

.norian-frame .checklist-hub__progress-track {
    height: 5px;
    background: var(--surface-sunken);
    border-radius: 3px;
    overflow: hidden;
}

.norian-frame .checklist-hub__progress-fill {
    height: 100%;
    background: var(--blue-500);
}

.norian-frame .checklist-hub__progress-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.norian-frame .checklist-hub__status-pill {
    font-size: 11px;
    font-weight: var(--fw-bold);
    padding: 4px 10px;
    border-radius: 20px;
    justify-self: start;
    white-space: nowrap;
}

.norian-frame .checklist-hub__status-pill--draft {
    background: var(--surface-sunken);
    color: var(--text-body);
}

.norian-frame .checklist-hub__status-pill--inreview {
    background: var(--warning-bg);
    color: var(--warning);
}

.norian-frame .checklist-hub__status-pill--signedoff {
    background: var(--success-bg);
    color: var(--success);
}

.norian-frame .checklist-hub__empty {
    padding: 52px 30px;
    text-align: center;
}

.norian-frame .checklist-hub__empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--surface-sunken);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.norian-frame .checklist-hub__empty h3 {
    font-size: 16px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    margin: 0 0 5px;
}

.norian-frame .checklist-hub__empty p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 16px;
}

/* ============================================================
   Checklist case workspace - header + client snapshot bar.
   Values match the prototype exactly. Rendered inside Web's chrome.
   ============================================================ */
.norian-frame .checklist-case-header {
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px 32px;
    margin: -8px -8px 0;
}

.norian-frame .checklist-case-header__crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.norian-frame .checklist-case-header__crumbs a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.norian-frame .checklist-case-header__crumb-current {
    color: var(--text-strong);
    font-weight: var(--fw-bold);
}

.norian-frame .checklist-case-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.norian-frame .checklist-case-header__identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.norian-frame .checklist-case-header__avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--navy-700);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-black);
    font-size: 15px;
    flex: none;
}

.norian-frame .checklist-case-header__name {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 24px;
    color: var(--text-strong);
    margin: 0;
    letter-spacing: -.01em;
}

.norian-frame .checklist-case-header__meta {
    font-size: 13px;
    color: var(--text-muted);
}

.norian-frame .checklist-case-header__status {
    font-size: 11px;
    font-weight: var(--fw-bold);
    padding: 5px 11px;
    border-radius: 20px;
    margin-left: 6px;
}

.norian-frame .checklist-case-header__status--draft {
    background: var(--surface-sunken);
    color: var(--text-body);
}

.norian-frame .checklist-case-header__status--inreview {
    background: var(--warning-bg);
    color: var(--warning);
}

.norian-frame .checklist-case-header__status--signedoff {
    background: var(--success-bg);
    color: var(--success);
}

.norian-frame .checklist-case-header__saved {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 13px;
    flex: none;
    white-space: nowrap;
}

.norian-frame .checklist-case-snapshot {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 32px;
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.norian-frame.norian-dark .checklist-case-snapshot {
    background: rgba(255, 255, 255, 0.04);
}

.norian-frame .checklist-case-snapshot__label {
    font: 700 10.5px/1 Arial;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blue-500);
    flex: none;
}

.norian-frame .checklist-case-snapshot__items {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.norian-frame .checklist-case-snapshot__item-label {
    font-size: 10.5px;
    color: var(--text-muted);
}

.norian-frame .checklist-case-snapshot__item-value {
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.norian-frame .checklist-case-snapshot__item-value--warning {
    color: var(--warning);
}

/* ============================================================
   Checklist Section 3 (AML) panel + Section 4 (Upsell) panel.
   Values match the prototype exactly.
   ============================================================ */
.norian-frame .checklist-aml-panel {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    overflow: hidden;
    margin-bottom: 20px;
}

.norian-frame .checklist-aml-panel__head {
    background: var(--warning-bg);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.norian-frame .checklist-aml-panel__icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--warning);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.norian-frame .checklist-aml-panel__level {
    flex: 1;
}

.norian-frame .checklist-aml-panel__level-label {
    font-size: 12px;
    color: var(--warning);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.norian-frame .checklist-aml-panel__level-value {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 26px;
    color: var(--text-strong);
    line-height: 1.1;
}

.norian-frame .checklist-aml-panel__conclusion {
    text-align: right;
}

.norian-frame .checklist-aml-panel__conclusion-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.norian-frame .checklist-aml-panel__conclusion-btns {
    display: flex;
    gap: 6px;
}

.norian-frame .checklist-aml-panel__conclusion-btn {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: var(--fw-bold);
    cursor: pointer;
}

.norian-frame .checklist-aml-panel__conclusion-btn--active-normal {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--success);
}

.norian-frame .checklist-aml-panel__conclusion-btn--active-elevated {
    border-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}

.norian-frame .checklist-aml-panel__conclusion-btn--active-high {
    border-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
}

.norian-frame .checklist-aml-panel__body {
    padding: 18px 22px;
}

.norian-frame .checklist-aml-panel__why {
    font-size: 13px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    margin-bottom: 12px;
}

.norian-frame .checklist-aml-finding {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.norian-frame .checklist-aml-finding__badge {
    font-size: 10px;
    font-weight: var(--fw-bold);
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
    flex: none;
    margin-top: 1px;
}

.norian-frame .checklist-aml-finding__badge--normal {
    background: var(--success-bg);
    color: var(--success);
}

.norian-frame .checklist-aml-finding__badge--elevated {
    background: var(--warning-bg);
    color: var(--warning);
}

.norian-frame .checklist-aml-finding__badge--high {
    background: var(--danger-bg);
    color: var(--danger);
}

.norian-frame .checklist-aml-finding__badge--low {
    background: var(--surface-sunken);
    color: var(--text-body);
}

.norian-frame .checklist-aml-finding__factor {
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-size: 14px;
}

.norian-frame .checklist-aml-finding__rationale {
    font-size: 14px;
    color: var(--text-body);
}

.norian-frame .checklist-aml-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
    gap: 12px;
    flex-wrap: wrap;
}

.norian-frame .checklist-aml-panel__hint {
    font-size: 12px;
    color: var(--text-muted);
}

.norian-frame .checklist-aml-panel__confirm-btn {
    border: none;
    background: var(--navy-700);
    color: #fff;
    padding: 9px 16px;
    border-radius: 7px;
    font-weight: var(--fw-bold);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    flex: none;
}

.norian-frame .checklist-aml-panel__confirm-btn--confirmed {
    background: var(--success-bg);
    color: var(--success);
}

.norian-frame .checklist-upsell-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.norian-frame .checklist-upsell-row {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    padding: 16px 18px;
    display: flex;
    gap: 14px;
    align-items: center;
}

.norian-frame .checklist-upsell-row__badge {
    font-size: 10px;
    font-weight: var(--fw-bold);
    padding: 4px 9px;
    border-radius: 5px;
    white-space: nowrap;
    flex: none;
}

.norian-frame .checklist-upsell-row__badge--strong {
    background: var(--danger-bg);
    color: var(--danger);
}

.norian-frame .checklist-upsell-row__badge--recommended {
    background: var(--warning-bg);
    color: var(--warning);
}

.norian-frame .checklist-upsell-row__badge--suggested {
    background: var(--surface-sunken);
    color: var(--text-body);
}

.norian-frame .checklist-upsell-row__text {
    flex: 1;
}

.norian-frame .checklist-upsell-row__name {
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    font-size: 14px;
}

.norian-frame .checklist-upsell-row__rationale {
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.45;
}

.norian-frame .checklist-upsell-row__use-btn {
    border: 1px solid var(--blue-500);
    background: var(--surface-card);
    color: var(--blue-600);
    padding: 8px 14px;
    border-radius: 7px;
    font-weight: var(--fw-bold);
    font-size: 13px;
    flex: none;
    cursor: pointer;
}

.norian-frame .checklist-upsell-row__use-btn--used {
    background: var(--navy-700);
    color: #fff;
    border-color: var(--navy-700);
    cursor: default;
}

/* ============================================================
   Checklist field cards (grouped fields reskin) - Text-kind fields only.
   Values match the prototype exactly.
   ============================================================ */
.norian-frame .checklist-field-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 15px 17px;
    margin-bottom: 10px;
}

.norian-frame .checklist-field-card--you {
    border-left-color: var(--text-strong);
}

.norian-frame .checklist-field-card--ai {
    border-left-color: var(--blue-500);
}

.norian-frame .checklist-field-card--template {
    border-left-color: var(--warning);
}

.norian-frame .checklist-field-card--empty {
    border-left-color: var(--border-subtle);
}

.norian-frame .checklist-field-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.norian-frame .checklist-field-card__label {
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    line-height: 1.3;
}

.norian-frame .checklist-field-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    padding: 4px 9px;
    border-radius: 20px;
    white-space: nowrap;
    flex: none;
}

.norian-frame .checklist-field-card__pill--you {
    background: var(--navy-050);
    color: var(--text-strong);
}

.norian-frame.norian-dark .checklist-field-card__pill--you {
    background: rgba(255, 255, 255, 0.08);
}

.norian-frame .checklist-field-card__pill--ai {
    background: var(--info-bg);
    color: var(--blue-600);
}

.norian-frame .checklist-field-card__pill--template {
    background: var(--warning-bg);
    color: var(--warning);
}

.norian-frame .checklist-field-card__pill--empty {
    background: var(--surface-sunken);
    color: var(--grey-500);
}

.norian-frame .checklist-field-card__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-body);
    margin: 0;
}

/* The "draft beside the input" row from SectionEditor.razor. It was described in that
   file's comment but never given rules here, so the slot fell below the textarea as a
   plain block and the button stretched to its full label width. */
.norian-frame .checklist-field-card__body {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.norian-frame .checklist-field-card__textarea {
    width: 100%;
    /* min-width: 0 rather than the flex default of auto - without it the textarea refuses
       to shrink below its intrinsic width and pushes the draft button off the card. */
    flex: 1 1 auto;
    min-width: 0;
    min-height: 78px;
    border: 1px solid var(--blue-400);
    border-radius: 7px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--text-strong);
    resize: vertical;
    outline: none;
}

.norian-frame .checklist-field-card__edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.norian-frame .checklist-field-card__done-btn {
    border: none;
    background: var(--navy-700);
    color: #fff;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: var(--fw-bold);
    cursor: pointer;
}

.norian-frame .checklist-field-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 11px;
    flex-wrap: wrap;
}

.norian-frame .checklist-field-card__accept-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: var(--navy-700);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: var(--fw-bold);
    cursor: pointer;
}

.norian-frame .checklist-field-card__secondary-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-strong);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: var(--fw-bold);
    cursor: pointer;
}

.norian-frame .checklist-field-card__draft-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--blue-500);
    background: var(--info-bg);
    color: var(--blue-600);
    padding: 8px 13px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: var(--fw-bold);
    cursor: pointer;
}

.norian-frame .checklist-field-card__draft-btn:disabled {
    opacity: .5;
    cursor: default;
}

/* Wrapping span, not the button itself - it carries the title for the disabled case (a
   disabled button fires no hover events). Stretches so the button can match the field. */
.norian-frame .checklist-field-card__draft-slot {
    display: flex;
    flex: 0 0 auto;
}

/* Narrow column beside the field: icon on its own line, label wrapping under it a word
   per line. The width is what does the wrapping - the label is localized, so nothing here
   may assume three words or English ones; a longer translation simply takes more lines,
   and there is room for them because the slot stretches to the textarea's full height. */
.norian-frame .checklist-field-card__draft-btn--side {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 58px;
    padding: 8px 6px;
    line-height: 1.2;
    text-align: center;
}

.norian-frame .checklist-field-card__draft-btn--side svg {
    flex: none;
}

/* ============================================================
   Checklist sign-off page - circular progress ring + readiness checklist.
   Values match the prototype exactly.
   ============================================================ */
.norian-frame .checklist-signoff-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 28px 32px 60px;
}

.norian-frame .checklist-signoff-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 16px;
}

.norian-frame .checklist-signoff-card__signed {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--success);
    margin-bottom: 16px;
}

.norian-frame .checklist-signoff-card__print-btn {
    width: 100%;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-strong);
    padding: 12px;
    border-radius: 8px;
    font-weight: var(--fw-bold);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.norian-frame .checklist-signoff-card__top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.norian-frame .checklist-signoff-ring {
    position: relative;
    width: 68px;
    height: 68px;
    flex: none;
}

.norian-frame .checklist-signoff-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 16px;
    color: var(--text-strong);
}

.norian-frame .checklist-signoff-card__title {
    font-size: 17px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    margin: 0 0 3px;
}

.norian-frame .checklist-signoff-card__subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.norian-frame .checklist-signoff-card__overall {
    font-size: 12px;
    color: var(--text-muted);
    margin: 6px 0 0;
}

.norian-frame .checklist-signoff-readiness {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.norian-frame .checklist-signoff-readiness__row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.norian-frame .checklist-signoff-readiness__row:hover {
    background: var(--surface-sunken);
}

.norian-frame .checklist-signoff-readiness__row--static {
    cursor: default;
}

.norian-frame .checklist-signoff-readiness__row--static:hover {
    background: transparent;
}

.norian-frame .checklist-signoff-readiness__label {
    flex: 1;
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.norian-frame .checklist-signoff-readiness__hint {
    font-size: 12px;
    color: var(--success);
}

.norian-frame .checklist-signoff-readiness__hint--pending {
    color: var(--warning);
}

.norian-frame .checklist-signoff-card__na {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.norian-frame .checklist-signoff-card__sign-btn {
    width: 100%;
    border: none;
    background: var(--navy-700);
    color: #fff;
    padding: 14px;
    border-radius: 8px;
    font-weight: var(--fw-bold);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
}

.norian-frame .checklist-signoff-card__sign-btn--disabled {
    background: var(--surface-sunken);
    color: var(--text-muted);
    cursor: not-allowed;
}

.norian-frame .checklist-signoff-back {
    text-align: center;
}

.norian-frame .checklist-signoff-back a {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}

/* ============================================================
   Checklist case-workspace body layout (sidebar + content) and the stepper itself.
   Values match the prototype exactly.
   ============================================================ */
.norian-frame .checklist-case-body {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-height: calc(100vh - 220px);
}

.norian-frame .checklist-case-content {
    flex: 1;
    min-width: 0;
    padding: 24px 32px 60px;
}

.norian-frame .checklist-case-stepper {
    width: 268px;
    flex: none;
    background: var(--surface-card);
    border-right: 1px solid var(--border-subtle);
    padding: 20px 16px;
    align-self: stretch;
}

.norian-frame .checklist-case-stepper__progress-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: var(--fw-bold);
    margin-bottom: 6px;
    padding: 0 4px;
}

.norian-frame .checklist-case-stepper__progress-track {
    height: 5px;
    background: var(--surface-sunken);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 18px;
}

.norian-frame .checklist-case-stepper__progress-fill {
    height: 100%;
    background: var(--blue-500);
}

.norian-frame .checklist-case-stepper__step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 2px;
}

.norian-frame .checklist-case-stepper__step:hover {
    background: var(--surface-sunken);
}

.norian-frame .checklist-case-stepper__step--active {
    background: var(--navy-050);
}

.norian-frame.norian-dark .checklist-case-stepper__step--active {
    background: rgba(255, 255, 255, 0.06);
}

.norian-frame .checklist-case-stepper__badge {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--surface-sunken);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--fw-bold);
    flex: none;
}

.norian-frame .checklist-case-stepper__badge--active {
    background: var(--navy-700);
    color: #fff;
}

.norian-frame .checklist-case-stepper__badge--done {
    background: var(--success-bg);
    color: var(--success);
}

.norian-frame .checklist-case-stepper__step-text {
    min-width: 0;
}

.norian-frame .checklist-case-stepper__step-label {
    font-size: 13px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.norian-frame .checklist-case-stepper__step-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.norian-frame .checklist-case-stepper__signoff {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.norian-frame .checklist-case-stepper__signoff-btn {
    display: block;
    text-align: center;
    background: var(--navy-700);
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: var(--fw-bold);
    text-decoration: none;
}
/* ============================================================
   Nav rail flyouts (AppNavRail .rail-group / .rail-flyout) +
   the language switcher's machine-translation badge.
   Appended rather than merged into the rail block above so the
   overflow overrides below win on source order.
   ============================================================ */

/* The rail lives in a 76px MudDrawer, and both the drawer and its content wrapper clip by
   default - an absolutely-positioned flyout hanging off the right edge would be cut off at
   76px. Opened up here rather than at the original .app-rail-drawer rule so the change sits
   next to the feature that needs it. The rail has few enough items that losing the scroll
   container costs nothing. */
.norian-frame .app-rail-drawer.mud-drawer,
.norian-frame .app-rail-drawer .mud-drawer-content,
.norian-frame .app-rail {
    overflow: visible;
}

/* Positioning context for the flyout. Must not otherwise alter the rail's own flex layout -
   the group behaves exactly like the bare .rail-item it replaced. */
.norian-frame .app-rail .rail-group {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hidden by default via visibility + opacity rather than display:none so the fade has
   something to animate and so screen readers can still reach the links by tab order
   (:focus-within below is what reveals it for keyboard users). */
.norian-frame .app-rail .rail-flyout {
    position: absolute;
    left: calc(100% + 6px);
    /* Bottom-anchored, not top-anchored: both rail items that own a flyout (Admin, Platform)
       sit at the very bottom of the rail, so a panel growing downward from the icon runs
       straight off the viewport - which is exactly what a top: 0 version did. Growing upward
       from the icon's bottom edge keeps every entry on screen. max-height is the belt-and-
       braces case of a very short window or a future flyout with many more entries. */
    bottom: 0;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    z-index: 1300;
    min-width: 210px;
    padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.norian-frame .app-rail .rail-group:hover .rail-flyout,
.norian-frame .app-rail .rail-group:focus-within .rail-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Invisible bridge across the 6px gap between icon and panel - without it the flyout closes
   the moment the pointer leaves the icon, before it can reach the links. */
.norian-frame .app-rail .rail-flyout::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 10px;
}

.norian-frame .app-rail .rail-flyout__title {
    padding: 4px 10px 8px;
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.norian-frame .app-rail .rail-flyout__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    text-decoration: none;
    white-space: nowrap;
}

    .norian-frame .app-rail .rail-flyout__item:hover {
        background: var(--surface-sunken);
    }

    /* NavLink's own .active class - same navy fill the rail items use, so "where am I" reads
       identically in both places. */
    .norian-frame .app-rail .rail-flyout__item.active,
    .norian-frame .app-rail .rail-flyout__item.active:hover {
        background: var(--navy-700);
        color: #fff;
    }

.norian-frame .app-rail .rail-flyout__count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--warning);
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
}

/* Machine-translation marker in the language menu. Deliberately quiet - it is a caveat, not a
   warning; the full sentence is in the title attribute and in the chip's tooltip. */
.norian-frame .lang-menu__mt,
.lang-menu__mt {
    margin-left: 8px;
    padding: 1px 5px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-muted);
    cursor: help;
}