/* ============================================================
   Neuraplex theme — clinician-facing Web app
   ------------------------------------------------------------
   Modern, gradient-led but healthcare-appropriate. Layered on
   top of Bootstrap 5. WCAG 2.2 AA verified for every text-on-
   surface combination used.

   Brand spine: Neuraplex accent magenta — WCAG AAA palette.
   Per uicompliance/ui.design-system.md this is a third-party
   product — Neuraplex identity stays primary, NHS Service Manual
   informs *behaviour* (mandatory markers, error summary, focus
   indicators) not visual branding.

   Sections
     1.  Design tokens
     2.  Bootstrap variable bridge
     3.  Base + typography
     4.  Skip link
     5.  Header + nav (gradient)
     6.  Hero / surface system
     7.  Forms
     8.  Buttons (gradient)
     9.  Error summary + status panels
     10. Footer
     11. Utilities + motion + forced-colors
   ============================================================ */


/* 1. Design tokens
   ============================================================ */
:root {
    /* Brand spine — WCAG AAA verified vs #FFFFFF (all PASS):
         primary         #BA47A6  4.63:1  buttons / UI components / large display
         hover           #A63E94  5.62:1  button hover
         active          #933783  6.74:1  active / pressed / step tiles
         accent-text     #8F2E80  7.00:1  inline accent text + links (AAA normal)
       Tints carry dark text only:
         soft bg         #EBE3EC          eyebrow chips, subtle cards
         muted bg        #F7F4F8          sample cards, sidebars, transcript panels
         soft border     #E4D9E8          decorative separators (non-functional)
         strong border   #B5A6BC  3.05:1  functional borders, chip outlines */
    --np-color-brand-primary:        #BA47A6;
    --np-color-brand-primary-hover:  #A63E94;
    --np-color-brand-primary-active: #933783;
    --np-color-brand-secondary:      #8F2E80;
    --np-color-brand-accent:         #B5A6BC;
    --np-color-brand-tint-50:        #F7F4F8;
    --np-color-brand-tint-100:       #EBE3EC;
    --np-color-brand-tint-200:       #E4D9E8;

    /* Accent surfaces — kept available for gradients and decorative use.
       Magenta tracks the brand primary RGB; indigo is the focus-fallback
       used on accent-filled or status surfaces where the magenta would
       blend into the background. */
    --np-color-accent-magenta: #BA47A6;
    --np-color-accent-indigo:  #0B3D91;

    /* Gradients — darker -> lighter at 100% so white text stays at least
       AA (4.5:1) across the full range. */
    --np-gradient-brand:        linear-gradient(135deg, #8F2E80 0%, #933783 55%, #A63E94 100%);
    --np-gradient-brand-soft:   linear-gradient(135deg, #933783 0%, #BA47A6 100%);
    --np-gradient-button:       linear-gradient(180deg, #BA47A6 0%, #A63E94 100%);
    --np-gradient-button-hover: linear-gradient(180deg, #A63E94 0%, #933783 100%);
    --np-gradient-surface:      linear-gradient(180deg, #FFFFFF 0%, #F7F4F8 100%);
    --np-gradient-hero:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 45%),
        radial-gradient(circle at 82% 82%, rgba(186, 71, 166, 0.30) 0%, rgba(186, 71, 166, 0) 50%),
        linear-gradient(135deg, #8F2E80 0%, #933783 50%, #A63E94 100%);

    /* Neutrals — WCAG AAA verified vs #FFFFFF */
    --np-color-text-primary:   #4A4453;   /* 9.36:1 vs white — AAA */
    --np-color-text-secondary: #6B6474;   /* 5.68:1 vs white — AAA large / AA normal */
    --np-color-text-muted:     #6F6879;   /* 5.39:1 vs white — AAA large / AA normal */
    --np-color-text-on-brand:  #FFFFFF;
    --np-color-surface:        #FFFFFF;
    --np-color-surface-muted:  #F7F4F8;   /* sidebars, sample cards, transcript panels */
    --np-color-surface-tinted: #EBE3EC;   /* eyebrow chips, subtle cards */
    --np-color-border:         #E4D9E8;   /* soft border — decorative separators */
    --np-color-border-strong:  #B5A6BC;   /* strong border — functional UI, chip outlines */

    /* Focus — brand magenta on neutral surfaces (4.63:1, PASS).
       Use --np-color-focus-fallback (#0B3D91, 10.0:1) on accent-filled
       or status surfaces where the primary magenta would lose contrast. */
    --np-color-focus:          #BA47A6;
    --np-color-focus-fallback: #0B3D91;
    --np-color-focus-halo:     rgba(186, 71, 166, 0.35);

    /* Status — paired with text + icon, never colour-only */
    --np-color-info-bg:    #EAF1F8;   --np-color-info-fg:    #103A6B;
    --np-color-success-bg: #E5F1E1;   --np-color-success-fg: #0D5F1F;
    --np-color-warning-bg: #FFF6E0;   --np-color-warning-fg: #6B4F00;
    --np-color-error-bg:   #FBE7E5;   --np-color-error-fg:   #B30000;

    /* Spacing */
    --np-space-1: 4px;
    --np-space-2: 8px;
    --np-space-3: 12px;
    --np-space-4: 16px;
    --np-space-5: 24px;
    --np-space-6: 32px;
    --np-space-7: 48px;
    --np-space-8: 64px;
    --np-space-9: 96px;

    /* Radii — generous, modern */
    --np-radius-1: 6px;
    --np-radius-2: 10px;
    --np-radius-3: 16px;
    --np-radius-pill: 999px;

    /* Shadows — multi-layer for depth without heaviness */
    --np-shadow-1: 0 1px 2px rgba(27, 27, 47, 0.06), 0 1px 1px rgba(27, 27, 47, 0.04);
    --np-shadow-2: 0 4px 12px rgba(27, 27, 47, 0.08), 0 1px 2px rgba(27, 27, 47, 0.04);
    --np-shadow-3: 0 12px 32px rgba(27, 27, 47, 0.10), 0 4px 8px rgba(27, 27, 47, 0.06);
    --np-shadow-brand: 0 8px 24px rgba(186, 71, 166, 0.25);

    /* Type */
    --np-font-sans: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --np-font-display: "Poppins", "Inter", "Segoe UI", system-ui, sans-serif;
    --np-fs-body:    1rem;       /* 16px */
    --np-fs-small:   0.875rem;   /* 14px */
    --np-fs-h1:      2.25rem;    /* 36px */
    --np-fs-h2:      1.625rem;   /* 26px */
    --np-fs-h3:      1.25rem;    /* 20px */
    --np-fs-display: 3rem;       /* 48px hero */

    --np-leading-body:   1.6;
    --np-leading-tight:  1.2;
    --np-tracking-tight: -0.015em;
}


/* 2. Bootstrap variable bridge — Bootstrap classes inherit Neuraplex theme.
   ============================================================ */
:root {
    --bs-primary: var(--np-color-brand-primary);
    --bs-primary-rgb: 186, 71, 166;
    --bs-link-color: var(--np-color-brand-secondary);
    --bs-link-hover-color: var(--np-color-brand-primary-hover);
    --bs-body-color: var(--np-color-text-primary);
    --bs-body-bg: var(--np-color-surface);
    --bs-border-color: var(--np-color-border);
}


/* 3. Base + typography
   ============================================================ */
html {
    scroll-behavior: smooth;
}
body {
    background:
        radial-gradient(circle at top right, rgba(186, 71, 166, 0.04) 0%, rgba(186, 71, 166, 0) 35%),
        radial-gradient(circle at bottom left, rgba(186, 71, 166, 0.04) 0%, rgba(186, 71, 166, 0) 40%),
        var(--np-color-surface);
    background-attachment: fixed;
    color: var(--np-color-text-primary);
    font-family: var(--np-font-sans);
    font-size: var(--np-fs-body);
    line-height: var(--np-leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--np-font-display);
    color: var(--np-color-text-primary);
    line-height: var(--np-leading-tight);
    letter-spacing: var(--np-tracking-tight);
    font-weight: 700;
}
h1 { font-size: var(--np-fs-h1); margin: 0 0 var(--np-space-5) 0; }
h2 { font-size: var(--np-fs-h2); margin: 0 0 var(--np-space-4) 0; }
h3 { font-size: var(--np-fs-h3); margin: 0 0 var(--np-space-3) 0; }

p { margin: 0 0 var(--np-space-4) 0; }
a { color: var(--np-color-brand-secondary); }
a:hover, a:focus { color: var(--np-color-brand-primary-hover); }

::selection { background: var(--np-color-brand-tint-200); color: var(--np-color-text-primary); }


/* 4. Skip link
   ============================================================ */
.np-skip-link {
    position: absolute;
    top: -48px;
    left: var(--np-space-3);
    padding: var(--np-space-3) var(--np-space-4);
    background: var(--np-color-brand-primary);
    color: var(--np-color-text-on-brand);
    text-decoration: none;
    border-radius: var(--np-radius-1);
    font-weight: 600;
    z-index: 1000;
    box-shadow: var(--np-shadow-2);
    transition: top 0.15s ease-in-out;
}
.np-skip-link:focus {
    top: var(--np-space-3);
    color: var(--np-color-text-on-brand);
    outline: 3px solid var(--np-color-focus);
    outline-offset: 3px;
}


/* 5. Header + nav (gradient spine)
   ============================================================ */
.np-header {
    background: var(--np-gradient-brand);
    color: var(--np-color-text-on-brand);
    position: relative;
    box-shadow: var(--np-shadow-brand);
}
.np-header::after {
    /* hairline highlight at the bottom edge */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}
.np-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--np-space-4);
    padding: var(--np-space-5) 0;
}
.np-header__brand {
    color: var(--np-color-text-on-brand);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--np-space-3);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    transition: opacity 0.15s ease;
}
.np-header__brand:hover,
.np-header__brand:focus { color: var(--np-color-text-on-brand); opacity: 0.92; }
.np-header__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--np-gradient-brand-soft);
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--np-radius-2);
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(186, 71, 166, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.np-nav {
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.np-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-space-1);
    list-style: none;
    margin: 0;
    padding: var(--np-space-2) 0;
}
.np-nav__link {
    display: inline-block;
    padding: var(--np-space-2) var(--np-space-4);
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--np-radius-pill);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.np-nav__link:hover,
.np-nav__link:focus {
    background: rgba(255, 255, 255, 0.12);
    color: var(--np-color-text-on-brand);
}
.np-nav__link[aria-current="page"] {
    background: var(--np-color-surface);
    color: var(--np-color-brand-primary);
    font-weight: 600;
}

/* Universal focus indicator — brand magenta on neutral surfaces (4.63:1). */
:focus-visible {
    outline: 3px solid var(--np-color-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Focus fallback — deep indigo (#0B3D91, 10.0:1) on accent-filled or
   status surfaces where the brand magenta would lose contrast.
   Note: .np-aside is intentionally NOT in this list — the aside surface
   is white, so the regular magenta focus indicator stays correct there. */
.np-header :focus-visible,
.np-hero :focus-visible,
.np-btn--primary:focus-visible,
.np-error-summary :focus-visible,
.np-error-summary:focus-visible {
    outline-color: var(--np-color-focus-fallback);
}


/* 6. Hero + surface system
   ============================================================ */
.np-hero {
    position: relative;
    background: var(--np-gradient-hero);
    color: var(--np-color-text-on-brand);
    border-radius: var(--np-radius-3);
    padding: var(--np-space-8) var(--np-space-7);
    margin-bottom: var(--np-space-7);
    overflow: hidden;
    box-shadow: var(--np-shadow-3);
}
.np-hero::before {
    /* subtle dot-grid pattern, only visible at full opacity in browsers
       that render radial-gradient masks well — purely decorative. */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.np-hero__content { position: relative; max-width: 720px; }
.np-hero__eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);
    padding: var(--np-space-1) var(--np-space-3);
    border-radius: var(--np-radius-pill);
    font-size: var(--np-fs-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--np-space-4);
}
.np-hero__title {
    font-size: var(--np-fs-display);
    color: var(--np-color-text-on-brand);
    margin: 0 0 var(--np-space-4) 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.np-hero__lede {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 var(--np-space-6) 0;
    max-width: 56ch;
}

.np-card {
    background: var(--np-color-surface);
    border: 1px solid var(--np-color-border);
    border-radius: var(--np-radius-3);
    padding: var(--np-space-6);
    box-shadow: var(--np-shadow-1);
    margin-bottom: var(--np-space-5);
}
.np-card--bleed { padding: 0; }


/* 7. Forms
   ============================================================ */
.np-form-required-note {
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small);
    margin-bottom: var(--np-space-5);
}
.np-form-section {
    border: 0;
    padding: 0;
    margin: 0 0 var(--np-space-7) 0;
}
.np-form-section legend {
    font-size: var(--np-fs-h3);
    font-weight: 700;
    margin-bottom: var(--np-space-4);
    padding: 0;
    color: var(--np-color-text-primary);
    width: 100%;
    border-bottom: 1px solid var(--np-color-border);
    padding-bottom: var(--np-space-2);
}
.np-form-group { margin-bottom: var(--np-space-4); }
.np-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--np-space-1);
    color: var(--np-color-text-primary);
    font-size: var(--np-fs-small);
    letter-spacing: 0.01em;
}
.np-hint {
    display: block;
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small);
    margin-bottom: var(--np-space-2);
}
.np-input,
.np-select {
    display: block;
    width: 100%;
    padding: 10px var(--np-space-3);
    font-size: var(--np-fs-body);
    line-height: 1.5;
    color: var(--np-color-text-primary);
    background-color: var(--np-color-surface);
    border: 1.5px solid var(--np-color-border-strong);
    border-radius: var(--np-radius-2);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-input:hover,
.np-select:hover { border-color: var(--np-color-brand-accent); }
.np-input:focus,
.np-select:focus {
    outline: none;
    border-color: var(--np-color-brand-primary);
    box-shadow: 0 0 0 4px var(--np-color-focus-halo);
}
.np-input--error,
.np-select--error {
    border-color: var(--np-color-error-fg);
    box-shadow: 0 0 0 4px rgba(179, 0, 0, 0.12);
}
.np-input--error:focus,
.np-select--error:focus {
    box-shadow: 0 0 0 4px rgba(179, 0, 0, 0.18);
}
.np-field-error {
    display: block;
    color: var(--np-color-error-fg);
    font-weight: 600;
    font-size: var(--np-fs-small);
    margin-top: var(--np-space-2);
    padding-left: var(--np-space-3);
    border-left: 4px solid var(--np-color-error-fg);
}

.np-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-space-3) var(--np-space-5);
    padding: var(--np-space-3) 0;
}
.np-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--np-space-2);
    cursor: pointer;
    padding: var(--np-space-2) var(--np-space-3);
    border-radius: var(--np-radius-1);
    transition: background-color 0.15s ease;
}
.np-checkbox:hover { background: var(--np-color-brand-tint-50); }
.np-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--np-color-brand-primary);
}


/* 8. Buttons (gradient, with hover lift)
   ============================================================ */
.np-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--np-space-2);
    padding: 12px var(--np-space-5);
    font-family: inherit;
    font-size: var(--np-fs-body);
    font-weight: 600;
    line-height: 1.25;
    border-radius: var(--np-radius-2);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;             /* WCAG 2.2 target size */
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.np-btn:active { transform: translateY(1px); }

.np-btn--primary {
    background: var(--np-gradient-button);
    color: var(--np-color-text-on-brand);
    border-color: var(--np-color-brand-primary-hover);
    box-shadow: 0 4px 12px rgba(186, 71, 166, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.np-btn--primary:hover,
.np-btn--primary:focus {
    background: var(--np-gradient-button-hover);
    color: var(--np-color-text-on-brand);
    box-shadow: 0 6px 18px rgba(186, 71, 166, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}
.np-btn--primary:active { transform: translateY(0); }

.np-btn--secondary {
    background: var(--np-color-surface);
    color: var(--np-color-brand-primary);
    border-color: var(--np-color-brand-primary);
}
.np-btn--secondary:hover,
.np-btn--secondary:focus {
    background: var(--np-color-brand-tint-50);
    color: var(--np-color-brand-primary-hover);
    border-color: var(--np-color-brand-primary-hover);
    box-shadow: var(--np-shadow-1);
}
.np-btn--link {
    background: transparent;
    border-color: transparent;
    color: var(--np-color-brand-secondary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    min-height: auto;
    padding: var(--np-space-1) var(--np-space-2);
}
.np-btn--link:hover,
.np-btn--link:focus { color: var(--np-color-brand-primary-hover); }


/* 9. Error summary + status panels
   ============================================================ */
.np-error-summary {
    border: 2px solid var(--np-color-error-fg);
    background: var(--np-color-error-bg);
    padding: var(--np-space-5);
    margin-bottom: var(--np-space-6);
    border-radius: var(--np-radius-2);
    box-shadow: var(--np-shadow-1);
}
.np-error-summary__title {
    color: var(--np-color-error-fg);
    margin: 0 0 var(--np-space-3) 0;
    font-size: var(--np-fs-h3);
    font-weight: 700;
}
.np-error-summary__list { list-style: none; padding: 0; margin: 0; }
.np-error-summary__list li { margin-bottom: var(--np-space-2); }
.np-error-summary__list a {
    color: var(--np-color-error-fg);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.np-error-summary:focus { outline: 3px solid var(--np-color-focus); outline-offset: 3px; }

.np-panel {
    padding: var(--np-space-4) var(--np-space-5);
    border-radius: var(--np-radius-2);
    margin-bottom: var(--np-space-5);
    border-left: 4px solid;
    box-shadow: var(--np-shadow-1);
}
.np-panel--success { background: var(--np-color-success-bg); border-color: var(--np-color-success-fg); color: var(--np-color-success-fg); }
.np-panel--info    { background: var(--np-color-info-bg);    border-color: var(--np-color-info-fg);    color: var(--np-color-info-fg); }
.np-panel--warning { background: var(--np-color-warning-bg); border-color: var(--np-color-warning-fg); color: var(--np-color-warning-fg); }


/* 10. Footer (multi-column professional layout)
   ============================================================ */
.np-footer {
    background: linear-gradient(180deg, var(--np-color-surface) 0%, var(--np-color-surface-tinted) 100%);
    color: var(--np-color-text-secondary);
    border-top: 1px solid var(--np-color-border);
    margin-top: auto;
}
.np-footer__inner {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr;
    gap: var(--np-space-7);
    padding: var(--np-space-7) var(--np-space-6) var(--np-space-5);
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}
.np-footer__col { min-width: 0; }
.np-footer__col--brand { padding-right: var(--np-space-5); }
.np-footer__product {
    margin: 0 0 var(--np-space-2);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--np-color-text-primary);
}
.np-footer__tagline {
    margin: 0 0 var(--np-space-3);
    color: var(--np-color-text-secondary);
    max-width: 42ch;
}
.np-footer__heading {
    margin: 0 0 var(--np-space-3);
    font-weight: 600;
    color: var(--np-color-text-primary);
    font-size: var(--np-fs-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.np-footer__body {
    margin: 0 0 var(--np-space-2);
    color: var(--np-color-text-secondary);
}
.np-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--np-space-1); }
.np-footer__link {
    color: var(--np-color-brand-secondary);
    text-decoration: none;
    font-weight: 500;
}
.np-footer__link:hover,
.np-footer__link:focus { color: var(--np-color-brand-primary-hover); text-decoration: underline; }
.np-footer__meta { color: var(--np-color-text-muted); font-size: var(--np-fs-small); }
.np-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--np-space-3);
    padding: var(--np-space-4) var(--np-space-6);
    border-top: 1px solid var(--np-color-border);
    background: var(--np-color-surface-tinted);
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small);
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}
@media (max-width: 991.98px) {
    .np-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--np-space-5); padding: var(--np-space-6) var(--np-space-5) var(--np-space-4); }
    .np-footer__col--brand { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 575px) {
    .np-footer__inner { grid-template-columns: 1fr; gap: var(--np-space-5); }
    .np-footer__bar { flex-direction: column; align-items: flex-start; }
}


/* 11. Layout, utilities, motion, forced-colors
   ============================================================ */
.np-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--np-space-5);
}
.np-main { padding: var(--np-space-7) 0 var(--np-space-9) 0; }

.np-form-actions {
    display: flex;
    gap: var(--np-space-3);
    flex-wrap: wrap;
    margin-top: var(--np-space-6);
    padding-top: var(--np-space-5);
    border-top: 1px solid var(--np-color-border);
}

.np-eyebrow {
    display: inline-block;
    color: var(--np-color-brand-secondary);
    font-size: var(--np-fs-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--np-space-2);
}

.np-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--np-space-5);
    margin-top: var(--np-space-5);
}
.np-feature-card {
    background: var(--np-color-surface);
    border: 1px solid var(--np-color-border);
    border-radius: var(--np-radius-3);
    padding: var(--np-space-5);
    box-shadow: var(--np-shadow-1);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.np-feature-card:hover { transform: translateY(-2px); box-shadow: var(--np-shadow-2); }
.np-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--np-radius-2);
    background: var(--np-color-brand-tint-100);
    color: var(--np-color-brand-primary);
    font-weight: 800;
    margin-bottom: var(--np-space-3);
}

/* Tables — refined to match the modern surface system. */
.table { color: var(--np-color-text-primary); }
.table > thead { background: var(--np-color-brand-tint-50); }
.table > thead > tr > th {
    color: var(--np-color-text-secondary);
    font-weight: 600;
    font-size: var(--np-fs-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--np-color-border-strong);
    padding: var(--np-space-3) var(--np-space-4);
}
.table > tbody > tr > td { padding: var(--np-space-4); border-color: var(--np-color-border); }
.table > tbody > tr:hover { background: var(--np-color-brand-tint-50); }


/* ---------- Sortable column header
   The <th> is rendered by _NpSortHeader.cshtml and exposes aria-sort
   so screen-readers announce the active sort state. The link inside
   spans the header cell so the whole column heading is clickable. */
.np-sort-th { white-space: nowrap; }

.np-sort__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin: -4px -6px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--np-radius-1);
    transition: background-color 0.12s ease, color 0.12s ease;
}
.np-sort__link:hover,
.np-sort__link:focus {
    background: rgba(186, 71, 166, 0.10);
    color: var(--np-color-brand-primary);
    text-decoration: none;
}
.np-sort__link:focus-visible {
    outline: 2px solid var(--np-color-focus);
    outline-offset: 2px;
}

.np-sort__label { line-height: 1.2; }

.np-sort__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--np-color-text-muted);
    transition: color 0.12s ease, transform 0.12s ease;
}
.np-sort__indicator svg { width: 12px; height: 12px; }
.np-sort__indicator--asc,
.np-sort__indicator--desc { color: var(--np-color-brand-primary); }
.np-sort__indicator--idle { opacity: 0.55; }
.np-sort__link:hover .np-sort__indicator--idle,
.np-sort__link:focus .np-sort__indicator--idle {
    color: var(--np-color-brand-primary);
    opacity: 1;
}

.np-sort-th--active {
    color: var(--np-color-brand-primary) !important;
    background:
        linear-gradient(180deg, var(--np-color-brand-tint-200) 0%, var(--np-color-brand-tint-100) 100%) !important;
    box-shadow: inset 0 -2px 0 var(--np-color-brand-primary);
}

@media (forced-colors: active) {
    .np-sort__link { border: 1px solid CanvasText; }
    .np-sort-th--active { outline: 2px solid CanvasText; }
}


/* Motion preferences — disable transitions for users who request it. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.001s !important;
        animation-duration: 0.001s !important;
    }
    html { scroll-behavior: auto; }
}

/* Forced-colors / Windows high contrast — keep semantics visible */
@media (forced-colors: active) {
    .np-btn,
    .np-header,
    .np-nav,
    .np-card,
    .np-feature-card,
    .np-hero { border: 1px solid; }
    .np-btn--primary { background: ButtonFace; color: ButtonText; }
    .np-hero { background: Canvas; color: CanvasText; }
    :focus-visible { outline: 3px solid CanvasText; }
}

/* Small screens */
@media (max-width: 575px) {
    h1 { font-size: 1.625rem; }
    h2 { font-size: 1.25rem; }
    .np-hero { padding: var(--np-space-6) var(--np-space-5); border-radius: var(--np-radius-2); }
    .np-hero__title { font-size: 2rem; }
    .np-hero__lede { font-size: 1rem; }
    .np-card { padding: var(--np-space-5); border-radius: var(--np-radius-2); }
    .np-nav__list { padding: var(--np-space-1) 0; }
}


/* 12. Shell + left aside navigation
   ============================================================
   The shell replaces the legacy top-header layout with a fixed
   left aside (NavRegistry-driven) and a main column that owns
   topbar / content / footer. On screens <992px the aside slides
   in from the left as a drawer over a backdrop.
   ============================================================ */
:root {
    /* Sidebar — white surface with legacy Neuraplex purple (#741F7B) text.
       Active item inverts: solid purple bg + white text for clear focus. */
    --np-aside-width: 256px;
    --np-aside-bg: #FFFFFF;
    --np-aside-fg: #741F7B;
    --np-aside-fg-muted: rgba(116, 31, 123, 0.65);
    --np-aside-hover-bg: rgba(116, 31, 123, 0.08);
    --np-aside-active-bg: #741F7B;
    --np-aside-active-fg: #FFFFFF;
    --np-aside-divider: rgba(116, 31, 123, 0.12);
    --np-topbar-height: 56px;
}

.np-shell-body {
    margin: 0;
    min-height: 100vh;
    background: #E4E6EF;
    background-attachment: fixed;
}
.np-shell-body--locked { overflow: hidden; }

.np-shell {
    display: flex;
    min-height: 100vh;
}

.np-aside {
    flex: 0 0 var(--np-aside-width);
    width: var(--np-aside-width);
    background: var(--np-aside-bg);
    color: var(--np-aside-fg);
    box-shadow: 0 4px 16px rgba(116, 31, 123, 0.08);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 30;
}

.np-aside__brand {
    padding: var(--np-space-5) var(--np-space-4);
    border-bottom: 1px solid var(--np-aside-divider);
}
.np-aside__brand-link {
    display: inline-flex;
    align-items: center;
    gap: var(--np-space-3);
    color: var(--np-aside-fg);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.np-aside__brand-link:hover,
.np-aside__brand-link:focus { color: var(--np-aside-fg); opacity: 0.85; }
.np-aside__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--np-gradient-brand-soft);
    border: 1.5px solid rgba(116, 31, 123, 0.15);
    border-radius: var(--np-radius-2);
    color: #FFFFFF;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(186, 71, 166, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.np-aside__nav { padding: var(--np-space-3) var(--np-space-2) var(--np-space-5); }
.np-aside__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.np-aside__link {
    display: flex;
    align-items: center;
    gap: var(--np-space-3);
    padding: var(--np-space-3) var(--np-space-3);
    border-radius: var(--np-radius-2);
    color: var(--np-aside-fg);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.np-aside__link:hover,
.np-aside__link:focus {
    background: var(--np-aside-hover-bg);
    color: var(--np-aside-fg);
}
.np-aside__link--active,
.np-aside__link[aria-current="page"] {
    background: var(--np-aside-active-bg);
    color: var(--np-aside-active-fg);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(116, 31, 123, 0.25);
}
.np-aside__link--active:hover,
.np-aside__link[aria-current="page"]:hover {
    background: var(--np-aside-active-bg);
    color: var(--np-aside-active-fg);
}
.np-aside__icon {
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.np-aside__icon svg { width: 22px; height: 22px; }
.np-aside__label { flex: 1 1 auto; min-width: 0; }
.np-aside__chip {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--np-radius-pill);
    background: rgba(116, 31, 123, 0.10);
    color: var(--np-aside-fg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.np-aside__link--active .np-aside__chip {
    background: rgba(255, 255, 255, 0.22);
    color: var(--np-aside-active-fg);
}

.np-aside__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 24, 0.55);
    border: 0;
    padding: 0;
    z-index: 25;
    cursor: pointer;
}
.np-aside__backdrop--visible { display: block; }

.np-shell__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Header (always visible, all breakpoints).
   Three regions: [left: toggle + title] [right: actions]. */
.np-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--np-space-4);
    min-height: var(--np-topbar-height);
    padding: 0 var(--np-space-5);
    background: var(--np-color-surface);
    border-bottom: 1px solid var(--np-color-border);
    box-shadow: var(--np-shadow-1);
    position: sticky;
    top: 0;
    z-index: 20;
}
.np-topbar__left {
    display: flex;
    align-items: center;
    gap: var(--np-space-3);
    min-width: 0;
}
.np-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--np-space-2);
}
.np-topbar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--np-color-border);
    border-radius: var(--np-radius-2);
    color: var(--np-color-text-primary);
    cursor: pointer;
}
.np-topbar__toggle:hover,
.np-topbar__toggle:focus { background: var(--np-color-surface-muted); }
.np-topbar__toggle:focus-visible { outline: 2px solid var(--np-color-focus); outline-offset: 2px; }
.np-topbar__toggle-icon { width: 20px; height: 20px; }
.np-topbar__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--np-color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header icon button (help, notifications). */
.np-iconbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--np-radius-2);
    color: var(--np-color-text-secondary);
    cursor: pointer;
}
.np-iconbtn:hover,
.np-iconbtn:focus {
    background: var(--np-color-surface-muted);
    color: var(--np-color-brand-primary);
    border-color: var(--np-color-border);
}
.np-iconbtn:focus-visible { outline: 2px solid var(--np-color-focus); outline-offset: 2px; }
.np-iconbtn svg { width: 20px; height: 20px; }
.np-iconbtn__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--np-color-brand-primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--np-color-surface);
}

/* Header user button. */
.np-userbtn {
    display: inline-flex;
    align-items: center;
    gap: var(--np-space-2);
    padding: 4px 10px 4px 4px;
    background: transparent;
    border: 1px solid var(--np-color-border);
    border-radius: 999px;
    color: var(--np-color-text-primary);
    cursor: pointer;
    max-width: 240px;
}
.np-userbtn:hover,
.np-userbtn:focus { background: var(--np-color-surface-muted); }
.np-userbtn:focus-visible { outline: 2px solid var(--np-color-focus); outline-offset: 2px; }
.np-userbtn__avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--np-gradient-brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    border-radius: 50%;
    letter-spacing: 0.02em;
}
.np-userbtn__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    min-width: 0;
}
.np-userbtn__name {
    font-weight: 600;
    font-size: 0.875rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.np-userbtn__role {
    color: var(--np-color-text-muted);
    font-size: 0.75rem;
}
.np-userbtn__chev { width: 14px; height: 14px; color: var(--np-color-text-muted); }

@media (max-width: 575px) {
    .np-userbtn__meta { display: none; }
    .np-userbtn { padding: 4px; }
    .np-topbar__title { font-size: 1rem; }
}

/* Header dropdowns (help, notifications, user). */
.np-popover { position: relative; }
.np-popover__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    max-width: 320px;
    padding: var(--np-space-2);
    background: var(--np-color-surface);
    border: 1px solid var(--np-color-border);
    border-radius: var(--np-radius-2);
    box-shadow: var(--np-shadow-2);
    z-index: 40;
}
.np-popover__panel--wide { min-width: 320px; }
.np-popover__panel--end { right: 0; }
.np-popover__header {
    padding: var(--np-space-3) var(--np-space-3) var(--np-space-2);
    border-bottom: 1px solid var(--np-color-border);
    margin-bottom: var(--np-space-2);
}
.np-popover__title {
    margin: 0;
    font-weight: 600;
    color: var(--np-color-text-primary);
}
.np-popover__sub {
    margin: 2px 0 0;
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small);
}
.np-popover__item {
    display: flex;
    align-items: center;
    gap: var(--np-space-3);
    padding: var(--np-space-2) var(--np-space-3);
    border-radius: var(--np-radius-1);
    color: var(--np-color-text-primary);
    text-decoration: none;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 0.9375rem;
}
.np-popover__item:hover,
.np-popover__item:focus { background: var(--np-color-surface-muted); color: var(--np-color-brand-primary); }
.np-popover__item:focus-visible { outline: 2px solid var(--np-color-focus); outline-offset: -2px; }
.np-popover__item--primary {
    background: var(--np-color-brand-primary);
    color: #fff;
    justify-content: center;
    font-weight: 600;
}
.np-popover__item--primary:hover,
.np-popover__item--primary:focus {
    background: var(--np-color-brand-primary-hover);
    color: #fff;
}
.np-popover__item--danger { color: #b00020; }
.np-popover__item--danger:hover,
.np-popover__item--danger:focus { background: #fdecef; color: #870016; }
.np-popover__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--np-color-surface-muted);
    color: var(--np-color-brand-primary);
    border-radius: var(--np-radius-2);
}
.np-popover__icon svg { width: 18px; height: 18px; }
.np-popover__item-label {
    display: block;
    font-weight: 600;
    line-height: 1.2;
}
.np-popover__item-meta {
    display: block;
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small);
    line-height: 1.2;
}
.np-popover__empty {
    margin: 0;
    padding: var(--np-space-4) var(--np-space-3);
    color: var(--np-color-text-muted);
    text-align: center;
    font-size: var(--np-fs-small);
}
.np-popover__sep {
    margin: var(--np-space-2) var(--np-space-1);
    border: 0;
    border-top: 1px solid var(--np-color-border);
}
.np-popover__form { margin: 0; }

/* Shell main column owns the page chrome (header + content + footer)
   and lays them out vertically so the footer sticks to the bottom on
   short pages. The content area is FLUID — module screens (lists,
   tables, forms) get the whole available width, with a consistent
   gutter for breathing room. Marketing components (.np-hero) self-cap
   internally so they remain readable on wide screens. */
.np-shell__content {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--np-space-6);
}
@media (max-width: 991.98px) {
    .np-shell__content { padding: 0 var(--np-space-5); }
}
@media (max-width: 575px) {
    .np-shell__content { padding: 0 var(--np-space-4); }
}

/* Tighten the previous over-padded main wrapper. */
.np-main { padding: var(--np-space-5) 0 var(--np-space-7) 0; }

/* Desktop collapsed sidebar — icon-only at 72px. */
.np-aside { transition: flex-basis 0.2s ease, width 0.2s ease; }
.np-aside--collapsed {
    flex: 0 0 72px;
    width: 72px;
}
.np-aside--collapsed .np-aside__brand { padding: var(--np-space-4) var(--np-space-3); }
.np-aside--collapsed .np-aside__brand-text,
.np-aside--collapsed .np-aside__label,
.np-aside--collapsed .np-aside__chip { display: none; }
.np-aside--collapsed .np-aside__brand-link { justify-content: center; gap: 0; }
.np-aside--collapsed .np-aside__nav { padding: var(--np-space-3) var(--np-space-2); }
.np-aside--collapsed .np-aside__link {
    justify-content: center;
    padding: var(--np-space-3) 0;
}
.np-aside--collapsed .np-aside__icon { flex: 0 0 auto; }
/* Tooltip-on-hover for collapsed labels — read the text from aria-label
   if the link author set one, otherwise fall back to title. Browsers
   render the native title tooltip on hover. */
.np-aside--collapsed .np-aside__link::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--np-color-text-primary);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--np-radius-1);
    font-size: var(--np-fs-small);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.np-aside--collapsed .np-aside__link:hover::after,
.np-aside--collapsed .np-aside__link:focus::after { opacity: 1; }
.np-aside--collapsed .np-aside__link { position: relative; }

/* Mobile drawer behaviour: collapse aside, slide-in from left on toggle. */
@media (max-width: 991.98px) {
    .np-aside {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        flex-basis: var(--np-aside-width);
        width: var(--np-aside-width);
    }
    .np-aside--open { transform: translateX(0); }
    .np-aside--collapsed {
        /* Collapsed-on-desktop state does not apply on mobile —
           the drawer either fully opens or stays off-screen. */
        flex-basis: var(--np-aside-width);
        width: var(--np-aside-width);
    }
    .np-aside--collapsed .np-aside__brand-text,
    .np-aside--collapsed .np-aside__label,
    .np-aside--collapsed .np-aside__chip { display: inline; }
    .np-aside--collapsed .np-aside__link { justify-content: flex-start; padding: var(--np-space-3); }
    .np-aside--collapsed .np-aside__link::after { display: none; }
    .np-shell { display: block; }
    .np-shell__main { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .np-aside { transition: none; }
}

@media (forced-colors: active) {
    .np-aside,
    .np-topbar { border: 1px solid; }
    .np-aside__link--active,
    .np-aside__link[aria-current="page"] { outline: 2px solid CanvasText; }
}

/* ---------- Row action icon button ----------
   Compact icon-only button used in list-view Actions columns
   (Edit, View, Delete, Reset password, etc.). Sits inside an
   `np-row-actions` flex container so multiple actions group
   neatly with consistent gaps.

   Accessibility:
     - Always pair with `aria-label` AND `title` (aria-label is the
       authoritative accessible name; title gives sighted hover users
       the same hint without inventing a separate tooltip system).
     - `--danger` variant is for destructive actions; never use it
       to indicate clinical-safety state (that's `np-status--danger`). */
.np-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.np-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--np-radius-1);
    color: var(--np-color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.np-row-action:hover,
.np-row-action:focus {
    background: var(--np-color-surface-muted);
    border-color: var(--np-color-border);
    color: var(--np-color-brand-primary);
    text-decoration: none;
}

.np-row-action:focus-visible {
    outline: 2px solid var(--np-color-focus);
    outline-offset: 1px;
}

.np-row-action svg {
    width: 16px;
    height: 16px;
}

.np-row-action--danger:hover,
.np-row-action--danger:focus {
    color: #8A1F1F;
    background: #FBE7E9;
    border-color: #F0C4C8;
}

@media (forced-colors: active) {
    .np-row-action { border: 1px solid CanvasText; }
}

/* ---------- Status pill (filled, with leading dot) ----------
   Standard for any list view's Status column. Tones map to semantic
   states; do not introduce ad-hoc colours per screen.
     Active    — operational                 (green)
     Inactive  — disabled / off-boarded       (grey, benign)
     Locked    — security state, attention    (amber)
     Pending   — awaiting an action           (blue)
     Warning   — soft alert                   (amber)
     Danger    — critical / clinical safety   (red)
   Each tone uses a tinted background + saturated text + matching dot,
   so the colour is never the only signal (WCAG 1.4.1). */
.np-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.np-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.np-status__label { display: inline-block; }

.np-status--active {
    background: #E8F4EC;
    color: #1F6E3A;
    border-color: #C9E6D2;
}
.np-status--inactive {
    background: var(--np-color-surface-muted);
    color: var(--np-color-text-secondary);
    border-color: var(--np-color-border);
}
.np-status--locked {
    background: #FFF5E0;
    color: #855A00;
    border-color: #F0DCA0;
}
.np-status--pending {
    background: #E5F0FB;
    color: #1F4F8A;
    border-color: #C4DAF0;
}
.np-status--warning {
    background: #FFF5E0;
    color: #855A00;
    border-color: #F0DCA0;
}
.np-status--danger {
    background: #FBE7E9;
    color: #8A1F1F;
    border-color: #F0C4C8;
}
.np-status--neutral {
    background: var(--np-color-surface-muted);
    color: var(--np-color-text-secondary);
    border-color: var(--np-color-border);
}

@media (forced-colors: active) {
    .np-status { border: 1px solid CanvasText; }
}

/* ---------- Multiselect (chips + inline search dropdown) ----------
   Used for any multi-valued enum or lookup picker (Roles, Trained-in,
   etc). Progressive-enhancement of a hidden <select multiple>; if JS
   is off, the user sees and can use the native control. */
.np-multiselect { position: relative; }

/* Hide the native select once the chip UI is in play. The script flips
   aria-hidden=true on the select, but width:0 / height:0 keeps it out
   of the layout and pointer flow. */
.np-multiselect__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.np-multiselect__control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--np-space-1);
    min-height: 44px;
    padding: 4px var(--np-space-2);
    background: var(--np-color-surface);
    border: 1px solid var(--np-color-border-strong);
    border-radius: var(--np-radius-1);
    cursor: text;
}
.np-multiselect__control:focus-within {
    border-color: var(--np-color-brand-primary);
    box-shadow: 0 0 0 4px var(--np-color-focus-halo);
    outline: none;
}

.np-multiselect__chips {
    display: contents;
}
.np-multiselect__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    background: var(--np-color-brand-tint-100);
    color: var(--np-color-brand-primary);
    border-radius: 999px;
    font-size: var(--np-fs-small);
    font-weight: 500;
    line-height: 1.4;
}
.np-multiselect__chip-label { white-space: nowrap; }
.np-multiselect__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--np-color-brand-primary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.np-multiselect__chip-remove:hover,
.np-multiselect__chip-remove:focus {
    background: rgba(186, 71, 166, 0.12);
}
.np-multiselect__chip-remove:focus-visible {
    outline: 2px solid var(--np-color-focus);
    outline-offset: 1px;
}

.np-multiselect__input {
    flex: 1 1 120px;
    min-width: 80px;
    padding: 4px 6px;
    background: transparent;
    border: 0;
    color: var(--np-color-text-primary);
    font-size: 1rem;
    line-height: 1.4;
}
.np-multiselect__input:focus { outline: none; }

.np-multiselect__listbox {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 280px;
    margin: 0;
    padding: var(--np-space-1);
    list-style: none;
    background: var(--np-color-surface);
    border: 1px solid var(--np-color-border);
    border-radius: var(--np-radius-1);
    box-shadow: var(--np-shadow-2);
    overflow-y: auto;
}
.np-multiselect__option {
    padding: var(--np-space-2) var(--np-space-3);
    border-radius: var(--np-radius-1);
    color: var(--np-color-text-primary);
    cursor: pointer;
    font-size: 0.9375rem;
}
.np-multiselect__option:hover,
.np-multiselect__option--active {
    background: var(--np-color-surface-muted);
    color: var(--np-color-brand-primary);
}
.np-multiselect__empty {
    padding: var(--np-space-3);
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small);
    text-align: center;
}

/* ---------- Pager (shared list pagination) ---------- */
.np-pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-space-3);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--np-space-4);
    padding-top: var(--np-space-3);
    border-top: 1px solid var(--np-color-border);
}

.np-pager__summary {
    margin: 0;
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small);
}

.np-pager__list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--np-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.np-pager__link {
    display: inline-flex;
    align-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--np-space-3);
    border: 1px solid var(--np-color-border);
    border-radius: var(--np-radius-1);
    background: var(--np-color-surface);
    color: var(--np-color-brand-primary);
    font-size: var(--np-fs-small);
    line-height: 1;
    text-decoration: none;
    justify-content: center;
}

.np-pager__link:hover,
.np-pager__link:focus {
    background: var(--np-color-surface-muted);
    color: var(--np-color-brand-primary-hover);
    text-decoration: none;
}

.np-pager__link:focus-visible {
    outline: 2px solid var(--np-color-focus);
    outline-offset: 2px;
}

.np-pager__link--current {
    background: var(--np-color-brand-primary);
    border-color: var(--np-color-brand-primary);
    color: #fff;
    cursor: default;
}

.np-pager__link--current:hover,
.np-pager__link--current:focus {
    background: var(--np-color-brand-primary);
    color: #fff;
}

.np-pager__link--disabled {
    color: var(--np-color-text-muted);
    background: var(--np-color-surface-muted);
    cursor: not-allowed;
    pointer-events: none;
}

@media (forced-colors: active) {
    .np-pager__link { border: 1px solid CanvasText; }
    .np-pager__link--current { outline: 2px solid CanvasText; }
}


/* ============================================================
   Landing / sign-in page (anonymous shell)
   ------------------------------------------------------------
   Two-column hero + login panel rendered by Account/Login.cshtml
   under _LayoutAnon. Responsive cascade:
     ≥1100px  desktop       2-column hero + panel
     768–1099 tablet         single column, hero on top
     480–767  small tablet   single column, features 2-up
     <480     phone          everything stacks, full-width logos
   All gaps + paddings use clamp() so transitions stay smooth.
   Reuses the global Neuraplex tokens — no new colour values.
   ============================================================ */
.np-anon-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;          /* honours mobile dynamic viewport */
    overflow-x: clip;            /* prevents 1px horizontal scrollbars from rounding */
    color: var(--np-color-text-primary);
    background:
        radial-gradient(circle at top left, rgba(181, 123, 185, 0.30), transparent 36%),
        linear-gradient(135deg, var(--np-color-brand-tint-50) 0%, #ffffff 48%, var(--np-color-brand-tint-100) 100%);
    /* `background-attachment: fixed` is intentionally omitted —
       it's expensive on mobile and broken on iOS. The gradient is
       large enough that scroll feels natural without it. */
}

.np-anon-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.np-landing {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ---------- Topbar (brand cluster + help link) ---------- */
.np-landing__topbar {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(var(--np-space-3), 2vw, var(--np-space-5))
             clamp(var(--np-space-4), 4vw, var(--np-space-6));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--np-space-3) var(--np-space-4);
}

.np-landing__brand-cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--np-space-3);
    min-width: 0;
    flex: 1 1 auto;
}

.np-landing__product-logo,
.np-landing__customer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--np-radius-2);
    font-weight: 800;
    letter-spacing: -0.02em;
    height: 40px;
    padding: 0 var(--np-space-4);
    box-shadow: var(--np-shadow-1);
    max-width: 100%;
}
.np-landing__product-logo {
    color: var(--np-color-text-on-brand);
    background: var(--np-gradient-brand);
    border: 0;
    box-shadow: var(--np-shadow-brand);
    font-size: 1rem;
    flex: 0 0 auto;
    white-space: nowrap;
}
.np-landing__customer-logo {
    color: var(--np-color-text-secondary);
    background: var(--np-color-surface);
    border: 1px solid var(--np-color-border);
    font-size: 0.875rem;
    font-weight: 700;
    /* Allow long trust names to wrap rather than push the layout offscreen. */
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
}

.np-landing__help-link {
    color: var(--np-color-brand-primary);
    text-decoration: none;
    font-weight: 650;
    padding: var(--np-space-2) var(--np-space-3);
    border-radius: var(--np-radius-1);
    flex: 0 0 auto;
}
.np-landing__help-link:hover,
.np-landing__help-link:focus {
    background: rgba(186, 71, 166, 0.08);
    color: var(--np-color-brand-primary-hover);
    text-decoration: underline;
}

/* ---------- Two-column body (hero + login panel) ---------- */
.np-landing__grid {
    flex: 1;
    display: grid;
    /* Right column is bounded so it never starves the hero column.
       At small widths the @media block below collapses to a single column. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 460px);
    gap: clamp(var(--np-space-5), 4vw, var(--np-space-7));
    align-items: center;
    padding: clamp(var(--np-space-4), 3vw, var(--np-space-6))
             clamp(var(--np-space-4), 4vw, var(--np-space-6))
             clamp(var(--np-space-5), 4vw, var(--np-space-7));
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

.np-landing__centered {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(var(--np-space-5), 5vw, var(--np-space-7))
             clamp(var(--np-space-4), 4vw, var(--np-space-6));
}

.np-landing__hero {
    min-width: 0;
    max-width: 720px;
}

.np-landing__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--np-space-2);
    padding: 6px 12px;
    border-radius: var(--np-radius-pill);
    background: rgba(186, 71, 166, 0.08);
    color: var(--np-color-brand-primary-active);
    font-weight: 700;
    font-size: var(--np-fs-small);
    margin-bottom: var(--np-space-4);
    letter-spacing: 0.02em;
}
.np-landing__eyebrow-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #027A48;
    box-shadow: 0 0 0 4px rgba(2, 122, 72, 0.12);
    flex: 0 0 auto;
}

.np-landing__title {
    /* Tuned for legibility — caps at 56px on a 1440px viewport. */
    font-size: clamp(1.875rem, 3.5vw + 0.5rem, 3.5rem);
    line-height: 1.05;
    margin: 0 0 var(--np-space-4);
    letter-spacing: -0.04em;
    color: var(--np-color-text-primary);
    font-weight: 800;
    overflow-wrap: anywhere;
}
.np-landing__title-accent {
    background: var(--np-gradient-brand-soft);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.np-landing__lede {
    font-size: clamp(0.95rem, 0.6vw + 0.85rem, 1.125rem);
    line-height: 1.6;
    color: var(--np-color-text-secondary);
    max-width: 60ch;
    margin: 0 0 var(--np-space-5);
}

.np-landing__features {
    display: grid;
    /* auto-fit reflows naturally at any width without media queries. */
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--np-space-3);
    max-width: 720px;
}
.np-landing__feature {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--np-color-brand-tint-200);
    border-radius: var(--np-radius-2);
    padding: var(--np-space-4);
    box-shadow: var(--np-shadow-1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 0;
}
.np-landing__feature strong {
    display: block;
    color: var(--np-color-brand-primary-active);
    margin-bottom: var(--np-space-1);
    font-size: 0.95rem;
    font-weight: 700;
}
.np-landing__feature p {
    margin: 0;
    color: var(--np-color-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ---------- Sign-in panel ---------- */
.np-landing__panel {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--np-color-brand-tint-200);
    border-radius: var(--np-radius-3);
    box-shadow: var(--np-shadow-3);
    padding: clamp(var(--np-space-4), 3vw, var(--np-space-6));
    position: relative;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    max-width: 480px;
    justify-self: end;
}
.np-landing__panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--np-color-brand-primary) 0%,
        var(--np-color-brand-secondary) 55%,
        var(--np-color-brand-accent) 100%);
}

.np-landing__panel-header {
    margin-bottom: var(--np-space-4);
}
.np-landing__panel-header h2 {
    margin: 0 0 var(--np-space-2);
    font-size: clamp(1.375rem, 0.6vw + 1.2rem, 1.625rem);
    letter-spacing: -0.03em;
    color: var(--np-color-text-primary);
}
.np-landing__panel-header p {
    margin: 0;
    color: var(--np-color-text-muted);
    line-height: 1.5;
    font-size: 0.9375rem;
}

.np-required {
    color: var(--np-color-error-fg);
    margin-left: 2px;
}

.np-form-actions-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--np-space-3);
    margin: var(--np-space-2) 0 var(--np-space-4);
    font-size: var(--np-fs-small);
    color: var(--np-color-text-muted);
    flex-wrap: wrap;
}

.np-landing__terms {
    display: flex;
    align-items: flex-start;
    gap: var(--np-space-3);
    padding: var(--np-space-3) var(--np-space-4);
    border-radius: var(--np-radius-2);
    background: var(--np-color-surface-tinted);
    border: 1px solid var(--np-color-border);
    margin-bottom: var(--np-space-2);
}
.np-landing__terms input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--np-color-brand-primary);
    flex: 0 0 auto;
}
.np-landing__terms label {
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
    color: var(--np-color-text-secondary);
    font-size: 0.875rem;
    flex: 1 1 auto;
    min-width: 0;
}
.np-landing__terms a {
    color: var(--np-color-brand-primary);
    font-weight: 650;
}

.np-landing__submit {
    width: 100%;
    margin-top: var(--np-space-3);
}

.np-landing__support {
    margin: var(--np-space-4) 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--np-color-text-muted);
    line-height: 1.5;
}

.np-landing__small-note { color: var(--np-color-text-muted); }

/* ---------- Footer ---------- */
.np-landing__footer {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--np-space-4) clamp(var(--np-space-4), 4vw, var(--np-space-6));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--np-space-3) var(--np-space-4);
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small);
    border-top: 1px solid var(--np-color-brand-tint-200);
    background: rgba(255, 255, 255, 0.5);
    flex-wrap: wrap;
}
.np-landing__legal {
    max-width: 720px;
    line-height: 1.5;
    min-width: 0;
    flex: 1 1 320px;
}
.np-landing__footer-links {
    display: flex;
    gap: var(--np-space-3) var(--np-space-4);
    flex-wrap: wrap;
}
.np-landing__footer-links a {
    color: var(--np-color-brand-secondary);
    text-decoration: none;
    font-weight: 600;
}
.np-landing__footer-links a:hover,
.np-landing__footer-links a:focus {
    color: var(--np-color-brand-primary-hover);
    text-decoration: underline;
}

/* ---------- Responsive cascade ----------
   Below 1100px the right column gets squeezed (it needs ~460px and
   the hero needs room for the title), so we collapse to a single
   stacked column. */
@media (max-width: 1099.98px) {
    .np-landing__grid {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .np-landing__hero { max-width: none; }
    .np-landing__panel {
        max-width: 480px;
        margin: 0 auto;
        justify-self: stretch;
    }
}

/* Tablet portrait — slightly tighter type and padding so the
   hero+panel pair fits comfortably above the fold on iPad-class
   devices without scrolling. */
@media (max-width: 767.98px) {
    .np-landing__grid {
        gap: var(--np-space-5);
        padding-top: var(--np-space-3);
    }
    .np-landing__title {
        font-size: clamp(1.625rem, 4.5vw + 0.5rem, 2.25rem);
    }
    .np-landing__lede { margin-bottom: var(--np-space-4); }
}

/* Phones — full-width logos, footer + topbar stack vertically,
   form actions rebreak so "Forgot password?" doesn't crowd the
   helper text. */
@media (max-width: 479.98px) {
    .np-landing__topbar,
    .np-landing__footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .np-landing__brand-cluster { width: 100%; }
    .np-landing__product-logo,
    .np-landing__customer-logo {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }
    .np-landing__features { grid-template-columns: 1fr; }
    .np-form-actions-inline {
        flex-direction: column;
        align-items: flex-start;
    }
    .np-landing__panel {
        border-radius: var(--np-radius-2);
        padding: var(--np-space-4);
    }
    .np-landing__terms { padding: var(--np-space-3); }
}

@media (forced-colors: active) {
    .np-landing__panel,
    .np-landing__feature { border: 1px solid CanvasText; }
    .np-landing__title-accent {
        color: CanvasText;
        -webkit-text-fill-color: CanvasText;
    }
}


/* ============================================================
   Role × Module assignments
   ------------------------------------------------------------
   - .np-assignment-indicator  status icon shown in the Roles list
                               "Assignments" column. Green tick when
                               at least one RoleModuleAssignment row
                               exists; grey "+" otherwise. Click-target
                               navigates to the editor.
   - .np-role-assign__grid     table layout for the assignments editor
                               (Role × Module CRUD checkboxes).
   ============================================================ */
.np-assignment-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.12s ease,
                border-color 0.12s ease,
                color 0.12s ease,
                transform 0.12s ease;
}
.np-assignment-indicator svg { width: 18px; height: 18px; }
.np-assignment-indicator:focus-visible {
    outline: 2px solid var(--np-color-focus);
    outline-offset: 2px;
}

.np-assignment-indicator--assigned {
    background: #E8F4EC;
    color: #1F6E3A;
    border-color: #C9E6D2;
}
.np-assignment-indicator--assigned:hover,
.np-assignment-indicator--assigned:focus {
    background: #D6ECDD;
    color: #155029;
    border-color: #9DCDA8;
    transform: translateY(-1px);
}

.np-assignment-indicator--empty {
    background: var(--np-color-surface-muted);
    color: var(--np-color-text-muted);
    border-color: var(--np-color-border);
}
.np-assignment-indicator--empty:hover,
.np-assignment-indicator--empty:focus {
    background: var(--np-color-brand-tint-100);
    color: var(--np-color-brand-primary);
    border-color: var(--np-color-brand-tint-200);
    transform: translateY(-1px);
}

@media (forced-colors: active) {
    .np-assignment-indicator { border: 1px solid CanvasText; }
}


/* Header strip on the assignments editor — role name + status pill on
   the left, "assignments saved / no assignments yet" pill on the
   right. Wraps cleanly on phones. */
.np-role-assign__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-space-3) var(--np-space-4);
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--np-space-4);
    margin-bottom: var(--np-space-4);
    border-bottom: 1px solid var(--np-color-border);
}
.np-role-assign__role {
    display: inline-flex;
    align-items: center;
    gap: var(--np-space-3);
    flex-wrap: wrap;
    min-width: 0;
}
.np-role-assign__role strong {
    font-size: 1.0625rem;
    color: var(--np-color-text-primary);
}


/* Assignments grid table — module name on the left, four CRUD
   checkboxes centred. Module description sits as muted secondary
   text under the name. Tighter padding than the default list table
   so the grid stays compact even with 30+ modules. */
.np-role-assign__grid > thead > tr > th {
    background: var(--np-color-brand-tint-50);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--np-color-text-secondary);
    border-bottom: 1px solid var(--np-color-border-strong);
}
.np-role-assign__grid > thead > tr > th:first-child {
    text-align: left;
}

.np-role-assign__grid > tbody > tr > th,
.np-role-assign__grid > tbody > tr > td {
    padding: var(--np-space-3) var(--np-space-4);
    border-color: var(--np-color-border);
}
.np-role-assign__grid > tbody > tr:hover {
    background: var(--np-color-brand-tint-50);
}

.np-role-assign__module {
    text-align: left;
    font-weight: 500;
    color: var(--np-color-text-primary);
}
.np-role-assign__module-name {
    display: block;
    font-weight: 600;
    line-height: 1.3;
}
.np-role-assign__module-desc {
    display: block;
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small);
    line-height: 1.4;
    margin-top: 2px;
}

.np-role-assign__check {
    width: 20px;
    height: 20px;
    accent-color: var(--np-color-brand-primary);
    cursor: pointer;
    vertical-align: middle;
}
.np-role-assign__check:focus-visible {
    outline: 2px solid var(--np-color-focus);
    outline-offset: 2px;
}

@media (max-width: 575px) {
    .np-role-assign__grid > thead > tr > th,
    .np-role-assign__grid > tbody > tr > th,
    .np-role-assign__grid > tbody > tr > td {
        padding: var(--np-space-2) var(--np-space-3);
    }
}

/* ============================================================================
   PlatformUsers feature — ported from Neuraplex.Web np-theme.css.
   Confirmation dialog (np-confirm, §6.9) + standalone danger button. The
   list-view classes (np-status, np-pager, np-sort, np-row-action) already
   exist above; these were the only gaps.
   ============================================================================ */
.np-confirm {
    border: 1px solid var(--np-color-border);
    border-radius: var(--np-radius-3);
    padding: 0;
    background: var(--np-color-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    color: var(--np-color-text);
    min-width: min(90vw, 32rem);
    max-width: min(90vw, 40rem);
}
.np-confirm::backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}
.np-confirm__form {
    padding: var(--np-space-6, 24px);
    margin: 0;
}
.np-confirm__title {
    font-size: var(--np-fs-h3, 1.25rem);
    margin: 0 0 var(--np-space-3, 12px) 0;
    line-height: 1.3;
}
.np-confirm__body {
    margin: 0 0 var(--np-space-5, 20px) 0;
    color: var(--np-color-text-muted, #4b5563);
    line-height: 1.5;
}
.np-confirm__actions {
    display: flex;
    gap: var(--np-space-3, 12px);
    justify-content: flex-end;
    flex-wrap: wrap;
}
.np-confirm--warning .np-confirm__title { color: var(--np-color-warning-fg, #92400e); }
.np-confirm--danger  .np-confirm__title { color: var(--np-color-danger-fg, #a41b17); }

.np-btn--danger {
    background: linear-gradient(180deg, #C92420 0%, #A41B17 100%);
    color: #fff;
    border-color: #8C1612;
}
.np-btn--danger:hover,
.np-btn--danger:focus {
    background: linear-gradient(180deg, #A41B17 0%, #8C1612 100%);
    color: #fff;
}