/* ============================================================
   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 — Neuraplex deep purple. WCAG AAA verified vs #FFFFFF:
         primary         #741F7B  9.48:1  buttons / UI components / large display
         hover           #581762  12.5:1  button hover
         active          #3D0F42  16.6:1  active / pressed / step tiles / strong text
         secondary       #4C2C92  9.40:1  inline accent text + links (AAA normal)
       Tints carry dark text only:
         very soft bg    #FBF7FC          page-level wash, hero gradients
         soft bg         #F7F0F8          eyebrow chips, subtle cards, sidebars
         medium tint     #EAD8EE          decorative separators (non-functional)
         strong border   #B57BB9  3.05:1  functional borders, chip outlines
       Cool neutral:
         neutral-100     #F2F1F4          inactive step backgrounds, idle chips */
    --np-color-brand-primary:        #741F7B;
    --np-color-brand-primary-hover:  #581762;
    --np-color-brand-primary-active: #3D0F42;
    --np-color-brand-secondary:      #4C2C92;
    --np-color-brand-accent:         #B57BB9;
    --np-color-brand-tint-50:        #FBF7FC;
    --np-color-brand-tint-100:       #F7F0F8;
    --np-color-brand-tint-200:       #EAD8EE;
    --np-color-neutral-100:          #F2F1F4;

    /* Accent surfaces — kept available for gradients and decorative use.
       Purple tracks the brand primary RGB; indigo is the focus-fallback
       used on accent-filled or status surfaces where the purple would
       blend into the background. */
    --np-color-accent-magenta: #741F7B;
    --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, #3D0F42 0%, #581762 55%, #741F7B 100%);
    --np-gradient-brand-soft:   linear-gradient(135deg, #581762 0%, #741F7B 100%);
    --np-gradient-button:       linear-gradient(180deg, #741F7B 0%, #581762 100%);
    --np-gradient-button-hover: linear-gradient(180deg, #581762 0%, #3D0F42 100%);
    --np-gradient-surface:      linear-gradient(180deg, #FFFFFF 0%, #FBF7FC 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(116, 31, 123, 0.30) 0%, rgba(116, 31, 123, 0) 50%),
        linear-gradient(135deg, #3D0F42 0%, #581762 50%, #741F7B 100%);

    /* Neutrals — WCAG AAA verified vs #FFFFFF */
    --np-color-text-primary:   #3D0F42;   /* 16.6:1 vs white — AAA (brand-primary-active) */
    --np-color-text-secondary: #4C2C92;   /* 9.40:1 vs white — AAA (brand-secondary) */
    --np-color-text-muted:     #6B6474;   /* 5.68:1 vs white — AAA large / AA normal */
    --np-color-text-on-brand:  #FFFFFF;
    --np-color-surface:        #FFFFFF;
    --np-color-surface-muted:  #FBF7FC;   /* sidebars, sample cards, transcript panels */
    --np-color-surface-tinted: #F7F0F8;   /* eyebrow chips, subtle cards */
    --np-color-border:         #EAD8EE;   /* soft border — decorative separators */
    --np-color-border-strong:  #B57BB9;   /* strong border — functional UI, chip outlines */

    /* Focus — brand purple on neutral surfaces (9.48:1, AAA).
       Use --np-color-focus-fallback (#0B3D91, 10.0:1) on accent-filled
       or status surfaces where the primary purple would lose contrast. */
    --np-color-focus:          #741F7B;
    --np-color-focus-fallback: #0B3D91;
    --np-color-focus-halo:     rgba(116, 31, 123, 0.30);

    /* Status — paired with text + icon, never colour-only.
       Greens align with the sample's softer healthcare palette
       (#ECF8F0 / #174D2D / #B8DEC3); other tones retain proven AAA pairings. */
    --np-color-info-bg:    #EAF1F8;   --np-color-info-fg:    #103A6B;
    --np-color-success-bg: #ECF8F0;   --np-color-success-fg: #174D2D;   --np-color-success-border: #B8DEC3;
    --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. The deep
       purple tint (61, 15, 66) matches brand-primary-active so card
       lift reads as "Neuraplex" rather than generic gray. */
    --np-shadow-1: 0 1px 2px rgba(61, 15, 66, 0.06), 0 1px 1px rgba(61, 15, 66, 0.04);
    --np-shadow-2: 0 6px 18px rgba(61, 15, 66, 0.06), 0 1px 2px rgba(61, 15, 66, 0.04);
    --np-shadow-3: 0 16px 40px rgba(61, 15, 66, 0.10), 0 4px 8px rgba(61, 15, 66, 0.05);
    --np-shadow-brand: 0 8px 24px rgba(116, 31, 123, 0.22);

    /* 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: 116, 31, 123;
    --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(116, 31, 123, 0.04) 0%, rgba(116, 31, 123, 0) 35%),
        radial-gradient(circle at bottom left, rgba(116, 31, 123, 0.04) 0%, rgba(116, 31, 123, 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(116, 31, 123, 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);
}

/* ASP.NET Core unobtrusive-validation bridge.
   The framework auto-applies these classes when a model property fails
   validation. We mirror the np-input--error / np-field-error treatment
   so server- AND client-side validation looks identical without every
   view needing to remember the np-* error modifiers. */
.np-input.input-validation-error,
.np-select.input-validation-error,
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: var(--np-color-error-fg);
    box-shadow: 0 0 0 4px rgba(179, 0, 0, 0.12);
}
.np-input.input-validation-error:focus,
.np-select.input-validation-error:focus,
input.input-validation-error:focus,
select.input-validation-error:focus,
textarea.input-validation-error:focus {
    box-shadow: 0 0 0 4px rgba(179, 0, 0, 0.18);
    outline: none;
}
.field-validation-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);
}
/* Bootstrap default validation-summary container — match np-error-summary. */
.validation-summary-errors {
    border: 2px solid var(--np-color-error-fg);
    background: var(--np-color-error-bg);
    padding: var(--np-space-4) var(--np-space-5);
    margin-bottom: var(--np-space-5);
    border-radius: var(--np-radius-2);
    color: var(--np-color-error-fg);
    box-shadow: var(--np-shadow-1);
}
.validation-summary-errors ul {
    margin: 0;
    padding-left: var(--np-space-5);
}
.validation-summary-errors li { margin-bottom: var(--np-space-1); }
.validation-summary-valid { display: none; }

.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(116, 31, 123, 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(116, 31, 123, 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); }
/* Hover tint applied to every cell rather than the row, because Bootstrap
   sets an implicit --bs-table-bg on td which would otherwise paint over
   any tr-level background. Tinting each td keeps every column highlighted,
   including the sticky Actions column (which retains its own white
   background by default for the scroll-shadow effect). */
.table > tbody > tr:hover > td { 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(116, 31, 123, 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(116, 31, 123, 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);
}

/* Submenu under a parent nav module (e.g. Master → Appointment Reasons,
   Medications, ...). The CSS-only expand state is driven by the parent
   link's aria-expanded attribute so it works without JS and respects
   screen-reader semantics. */
.np-aside__sublist {
    list-style: none;
    margin: var(--np-space-1) 0 var(--np-space-2);
    padding: 0;
    display: none;
    border-left: 1px solid var(--np-aside-divider);
    margin-left: calc(var(--np-space-3) + 12px);
}
.np-aside__item--group:has(> .np-aside__link[aria-expanded="true"]) .np-aside__sublist {
    display: block;
}
.np-aside__subitem { margin: 0; }
.np-aside__sublink {
    display: flex;
    align-items: center;
    gap: var(--np-space-2);
    padding: 6px var(--np-space-3) 6px var(--np-space-4);
    color: var(--np-aside-fg-muted);
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: var(--np-radius-md);
}
.np-aside__sublink:hover,
.np-aside__sublink:focus {
    background: var(--np-aside-hover-bg);
    color: var(--np-aside-fg);
}
.np-aside__sublink--active,
.np-aside__sublink[aria-current="page"] {
    background: var(--np-aside-active-bg);
    color: var(--np-aside-active-fg);
    font-weight: 600;
}
.np-aside__sublabel { flex: 1 1 auto; min-width: 0; }
.np-aside__chip--sub {
    font-size: 0.625rem;
    padding: 1px 6px;
}
/* In the collapsed (icon-only) state, hide the entire submenu — the user
   gets the full submenu back when they expand the sidebar. */
.np-aside--collapsed .np-aside__sublist { display: none !important; }

.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: var(--np-color-success-bg);
    color: var(--np-color-success-fg);
    border-color: var(--np-color-success-border);
}
.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(116, 31, 123, 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, 166, 188, 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(116, 31, 123, 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%;
}

/* Single-column variant used by the post-login MFA challenge page — drops
   the marketing hero so the verification panel sits centred and prominent. */
.np-landing__grid--centered {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
}

/* ---------- MFA challenge page ---------- */
.np-mfa__lock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--np-color-brand-tint-100, #F7F0F8);
    color: var(--np-color-brand-primary, #741F7B);
    margin-bottom: var(--np-space-3);
}

.np-mfa__input-row { margin-top: var(--np-space-4); }

.np-mfa__code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.4em;
    text-align: center;
    padding: var(--np-space-3);
}

.np-mfa__timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--np-color-text-muted, #6F6879);
    font-size: 0.875rem;
    margin: var(--np-space-2) 0 var(--np-space-4);
}
.np-mfa__timer-icon { display: inline-flex; }
.np-mfa__timer--expired { color: var(--np-color-danger, #c92420); }
.np-mfa__timer--expired .np-mfa__timer-icon { display: none; }

.np-mfa__verify-btn { width: 100%; }

.np-mfa__resend-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: var(--np-space-4) 0 var(--np-space-2);
    font-size: 0.9375rem;
}

.np-mfa__help {
    margin-top: var(--np-space-3);
    font-size: 0.875rem;
    color: var(--np-color-text-muted, #6F6879);
}

.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(116, 31, 123, 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: var(--np-color-success-bg);
    color: var(--np-color-success-fg);
    border-color: var(--np-color-success-border);
}
.np-assignment-indicator--assigned:hover,
.np-assignment-indicator--assigned:focus {
    background: #D7EEDE;
    color: #0E3E22;
    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);
    }
}


/* ============================================================
   Patient list tab strip — horizontal pill nav matching the
   legacy mental model (Recent / Active / Autism / ADHD …).
   Tabs whose data source has not migrated yet carry the .--soon
   chip and a muted treatment so the deferred state reads
   without colour-only signalling.
   ============================================================ */
.np-tabs {
    margin: var(--np-space-5) 0 var(--np-space-4);
    overflow-x: auto;
}
.np-tabs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--np-space-2);
    flex-wrap: wrap;
}
.np-tabs__item { display: inline-flex; }
.np-tabs__link {
    display: inline-flex;
    align-items: center;
    gap: var(--np-space-2);
    padding: var(--np-space-2) var(--np-space-4);
    border-radius: var(--np-radius-pill);
    background: var(--np-color-surface-muted);
    color: var(--np-color-text-secondary);
    text-decoration: none;
    font-size: var(--np-fs-small);
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.np-tabs__link:hover,
.np-tabs__link:focus {
    background: var(--np-color-surface-tinted);
    color: var(--np-color-text-primary);
    border-color: var(--np-color-border);
}
.np-tabs__link--active,
.np-tabs__link[aria-selected="true"] {
    background: var(--np-color-brand-primary);
    color: var(--np-color-text-on-brand);
    border-color: var(--np-color-brand-primary);
    box-shadow: var(--np-shadow-1);
}
.np-tabs__link--active:hover,
.np-tabs__link[aria-selected="true"]:hover {
    background: var(--np-color-brand-primary-hover);
    color: var(--np-color-text-on-brand);
}
.np-tabs__chip {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--np-radius-pill);
    background: var(--np-color-border);
    color: var(--np-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.np-tabs__link--active .np-tabs__chip,
.np-tabs__link[aria-selected="true"] .np-tabs__chip {
    background: rgba(255, 255, 255, 0.25);
    color: var(--np-color-text-on-brand);
}


/* ============================================================
   Compact-layout overrides — reduce wasted whitespace between
   aside / topbar / content / footer.
   ------------------------------------------------------------
   Earlier iterations of the shell were tuned for a marketing
   landing page (generous breathing room). For dense
   clinician-facing list / form screens that pushed the table
   below the fold and left wide empty bands on either side.
   These overrides pull the content tighter:
   - np-main:   trim top/bottom padding
   - np-shell__content: fluid up to 1600px, smaller gutters
   - np-card:   keep margin-bottom but tighten internal padding
                on the first card of a screen
   - np-topbar: slimmer
   ============================================================ */
.np-main { padding: var(--np-space-4) 0 var(--np-space-5) 0; }

.np-shell__content {
    max-width: 1600px;
    padding: 0 var(--np-space-5);
}
@media (max-width: 991.98px) {
    .np-shell__content { padding: 0 var(--np-space-4); }
}
@media (max-width: 575px) {
    .np-shell__content { padding: 0 var(--np-space-3); }
}

/* First child of the content gets a 12px top — the page heading
   sits close to the topbar instead of floating in dead space. */
.np-shell__content > :first-child { margin-top: var(--np-space-3); }

/* Eyebrow + h1 stack: collapse default heading top-margin so the
   eyebrow + title pair hugs together at the top of the content. */
.np-shell__content > .np-eyebrow + h1 { margin-top: 0; }

/* Tabs: pull closer to the heading. */
.np-tabs { margin: var(--np-space-3) 0 var(--np-space-3); }

/* Cards: tighter internal padding for screens that pack a lot in. */
.np-card { padding: var(--np-space-5); margin-bottom: var(--np-space-4); }
.np-shell__content > .np-card:last-child { margin-bottom: var(--np-space-3); }

/* Topbar: slimmer + lighter. */
:root { --np-topbar-height: 48px; }
.np-topbar { padding: 0 var(--np-space-4); }

/* Footer footprint: keep the brand but drop the giant top-margin
   it inherited from the marketing layout. */
.np-shell__main .np-footer {
    margin-top: auto;
    padding: var(--np-space-3) 0;
}
.np-shell__main .np-footer__bar { padding-top: 0; }


/* Composite list cells — two-line cell where the first line is the
   primary value (e.g. MRN, legal name, formatted DoB) and the second
   line is a supporting value (e.g. NHS Number, preferred name, age).
   Used in lists where collapsing two related columns into one keeps
   the table compact and the related values visually paired. */
.np-cell__primary {
    display: block;
    color: var(--np-color-text-primary);
    font-weight: 500;
    line-height: 1.3;
}
.np-cell__secondary {
    display: block;
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small);
    line-height: 1.3;
    margin-top: 2px;
}

/* Link that wraps a composite cell's primary value (e.g. Name in the
   patient list opens the workspace in a new tab). Carries the brand
   underline-on-hover so the cell still looks like a link without
   blowing up the secondary value's typography. */
.np-cell__link {
    text-decoration: none;
    color: inherit;
}
.np-cell__link:hover .np-cell__primary,
.np-cell__link:focus-visible .np-cell__primary {
    color: var(--np-color-brand-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.np-cell__link:focus-visible {
    outline: 2px solid var(--np-color-brand-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================================
   Patient banner — shared partial _NpPatientBanner.cshtml.

   Layout: a single full-width surface card with two stacked
   regions — the "primary" row (avatar + identity + identifiers
   + demographics) and the "status row" (clinical-safety flag
   pills). The card uses the surface-tinted brand background so
   it reads as a clinical "patient header" distinct from the
   regular np-card surfaces below it.
   ============================================================ */

.np-patient-banner {
    background: linear-gradient(180deg,
        var(--np-color-brand-tint-50) 0%,
        var(--np-color-surface) 100%);
    border: 1px solid var(--np-color-brand-tint-200);
    border-left: 4px solid var(--np-color-brand-primary);
    border-radius: var(--np-radius-3, 12px);
    padding: var(--np-space-5, 20px) var(--np-space-6, 24px);
    margin-bottom: var(--np-space-4, 16px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Inactive ribbon — surfaces above the primary row when the patient
   record is marked inactive (soft-deleted in a future state, or
   IsActive=false). Reads as a strong contextual warning without
   reaching for the danger palette (which is reserved for clinical-
   safety hazards per CLAUDE.md §6.6). */
.np-patient-banner--inactive {
    border-left-color: var(--np-color-text-muted);
    background: linear-gradient(180deg, #FAFAFA 0%, var(--np-color-surface) 100%);
}
.np-patient-banner__ribbon {
    display: flex;
    align-items: center;
    gap: var(--np-space-2, 8px);
    padding: var(--np-space-2, 8px) var(--np-space-3, 12px);
    margin-bottom: var(--np-space-3, 12px);
    background: #FFF3CD;
    color: #664D03;
    border-radius: var(--np-radius-2, 8px);
    font-size: var(--np-fs-small);
}
.np-patient-banner__ribbon svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* Primary row — avatar on left, identity block on right */
.np-patient-banner__primary {
    display: flex;
    align-items: flex-start;
    gap: var(--np-space-5, 20px);
}

/* Avatar — 72px circle, brand tint background, initials in brand
   primary. Photo when supplied, initials fallback when not. */
.np-patient-banner__avatar {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--np-color-brand-tint-100);
    border: 2px solid var(--np-color-surface);
    box-shadow: 0 0 0 1px var(--np-color-brand-tint-200);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.np-patient-banner__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.np-patient-banner__initials {
    font-size: 28px;
    font-weight: 600;
    color: var(--np-color-brand-primary);
    line-height: 1;
    letter-spacing: 0.5px;
}

/* Identity block — name, preferred, identifiers, demographics stack */
.np-patient-banner__identity {
    flex: 1 1 auto;
    min-width: 0; /* allow long names to wrap */
}

.np-patient-banner__name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--np-space-4, 16px);
    row-gap: var(--np-space-2, 8px);
    margin-bottom: var(--np-space-2, 8px);
}
.np-patient-banner__name {
    font-size: var(--np-fs-h2, 24px);
    font-weight: 600;
    color: var(--np-color-text-primary);
    margin: 0;
    line-height: 1.2;
}
.np-patient-banner__age {
    color: var(--np-color-text-secondary, #5A5963);
    font-size: var(--np-fs-base, 16px);
    display: inline-flex;
    align-items: baseline;
    gap: var(--np-space-2, 8px);
    flex-wrap: wrap;
}
.np-patient-banner__age-label {
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small, 14px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.np-patient-banner__age-value {
    font-weight: 500;
}
.np-patient-banner__pronouns {
    color: var(--np-color-text-muted);
    font-style: italic;
}

.np-patient-banner__preferred {
    margin-bottom: var(--np-space-2, 8px);
    color: var(--np-color-text-secondary, #5A5963);
    font-size: var(--np-fs-base, 16px);
}
.np-patient-banner__preferred-name {
    font-weight: 500;
    color: var(--np-color-text-primary);
}

.np-patient-banner__identifiers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-space-5, 20px);
    margin-bottom: var(--np-space-2, 8px);
}
.np-patient-banner__id-group {
    display: inline-flex;
    align-items: center;
    gap: var(--np-space-2, 8px);
}
.np-patient-banner__id-value {
    font-size: var(--np-fs-base, 16px);
    background: var(--np-color-surface);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--np-color-brand-tint-200);
    color: var(--np-color-text-primary);
}

/* NHS Number validity badge — green ✓ when valid, amber on check
   when the Mod-11 fails. Hidden when no number is supplied. */
.np-patient-banner__nhs-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--np-fs-small, 14px);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
}
.np-patient-banner__nhs-badge svg {
    width: 14px;
    height: 14px;
}
.np-patient-banner__nhs-badge--valid {
    background: #D1F2DD;
    color: #0F5132;
}
.np-patient-banner__nhs-badge--invalid {
    background: #FFE5D9;
    color: #7C2D12;
}

.np-patient-banner__demographics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--np-space-2, 8px) var(--np-space-3, 12px);
    color: var(--np-color-text-secondary, #5A5963);
    font-size: var(--np-fs-small, 14px);
}
.np-patient-banner__demographic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.np-patient-banner__inline-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--np-color-text-muted);
}
.np-patient-banner__age-inline {
    color: var(--np-color-text-muted);
    margin-left: 4px;
}
.np-patient-banner__separator {
    color: var(--np-color-text-muted);
    padding: 0 4px;
}

/* Shared label style for "MRN:", "NHS:", "DOB:", "Preferred:" */
.np-patient-banner__field-label {
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small, 14px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* ─── Status row ───
   Clinical-safety flags. Always present so the banner's vertical
   rhythm stays stable; placeholder pills render when backing data
   is absent (default state today).

   Colour vocabulary follows CLAUDE.md §6.6 — danger is reserved
   for clinical-safety hazards; warning is amber for "needs attention";
   ok is green for affirmed-good; neutral-strong is the brand muted
   surface for informational (e.g. confidential address); placeholder
   is the most-muted variant so unfilled flags read as "not yet
   recorded" rather than "no concern".
*/
.np-patient-banner__status-row {
    margin-top: var(--np-space-4, 16px);
    padding-top: var(--np-space-3, 12px);
    border-top: 1px dashed var(--np-color-brand-tint-200);
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-space-2, 8px);
}
.np-patient-banner__flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--np-fs-small, 14px);
    font-weight: 500;
    line-height: 1.3;
    border: 1px solid transparent;
}
.np-patient-banner__flag svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}
.np-patient-banner__flag-label {
    line-height: 1;
}
.np-patient-banner__flag--warning {
    background: #FFF3CD;
    color: #664D03;
    border-color: #FFE69C;
}
.np-patient-banner__flag--danger {
    background: #FFE5E5;
    color: #842029;
    border-color: #F5C2C7;
}
.np-patient-banner__flag--ok {
    background: #D1F2DD;
    color: #0F5132;
    border-color: #A3E0BB;
}
.np-patient-banner__flag--neutral-strong {
    background: var(--np-color-brand-tint-100);
    color: var(--np-color-brand-secondary);
    border-color: var(--np-color-brand-tint-200);
}
.np-patient-banner__flag--placeholder {
    background: var(--np-color-surface);
    color: var(--np-color-text-muted);
    border-color: var(--np-color-brand-tint-200);
    border-style: dashed;
}

/* Responsive — at narrow widths, the avatar drops above the identity
   block (stack), and the demographics row wraps naturally. The banner
   keeps the same hierarchy on phones — no information is hidden. */
@media (max-width: 640px) {
    .np-patient-banner__primary {
        flex-direction: column;
        align-items: stretch;
        gap: var(--np-space-3, 12px);
    }
    .np-patient-banner__avatar {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
    }
    .np-patient-banner__initials {
        font-size: 22px;
    }
    .np-patient-banner__name {
        font-size: var(--np-fs-h3, 20px);
    }
}

/* Print — flatten the gradient to ink-saving white, keep the brand
   accent on the left so the banner still scans as a header on paper. */
@media print {
    .np-patient-banner {
        background: #FFFFFF;
        box-shadow: none;
    }
    .np-patient-banner__flag {
        border: 1px solid #888;
    }
}

/* Forced-colors / Windows high contrast — ensure pill borders are
   visible (the brand tint backgrounds disappear in this mode). */
@media (forced-colors: active) {
    .np-patient-banner__flag {
        border: 1px solid CanvasText;
    }
    .np-patient-banner__nhs-badge {
        border: 1px solid CanvasText;
    }
}

/* ============================================================
   Patient workspace accordion — Workspace.cshtml.

   Vertical stack of <details> sections matching the legacy
   per-patient screen one-for-one. Each section header carries
   an icon, label, action buttons (Send/Fill/Add/etc.), and a
   chevron that rotates on expand.

   Native <details>/<summary> handles state without JS. The
   action <button>s use stopPropagation in markup so clicking
   one does NOT toggle the section (legacy parity).
   ============================================================ */

.np-workspace-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--np-space-2, 8px);
    margin-bottom: var(--np-space-4, 16px);
}

.np-section {
    background: var(--np-color-surface);
    border: 1px solid var(--np-color-brand-tint-200);
    border-radius: var(--np-radius-2, 8px);
    overflow: hidden;  /* keeps the expanded body inside the rounded corner */
}
.np-section[open] {
    border-color: var(--np-color-brand-tint-100);
    box-shadow: 0 1px 3px rgba(116, 31, 123, 0.08);
}

/* Header — flex row: icon | label (grow) | actions | chevron */
.np-section__header {
    display: flex;
    align-items: center;
    gap: var(--np-space-3, 12px);
    padding: var(--np-space-3, 12px) var(--np-space-4, 16px);
    cursor: pointer;
    list-style: none;     /* hide the default <summary> marker */
    user-select: none;
    background: var(--np-color-surface);
    transition: background-color 0.15s ease;
}
.np-section__header::-webkit-details-marker { display: none; }
.np-section__header:hover {
    background: var(--np-color-brand-tint-50);
}
.np-section__header:focus-visible {
    outline: 2px solid var(--np-color-brand-primary);
    outline-offset: -2px;
}

.np-section__icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    color: var(--np-color-brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.np-section__icon svg {
    width: 22px;
    height: 22px;
}

.np-section__label {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--np-space-2, 8px);
    font-size: var(--np-fs-base, 16px);
    font-weight: 500;
    color: var(--np-color-text-primary);
    min-width: 0;        /* allow chip / dot to compete for width */
}

/* Pulse-dot for sections that need attention (legacy "fa-circle text-danger"
   on unsent forms). Solid magenta with a subtle pulse so it draws the eye
   without blinking aggressively. */
.np-section__attention-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--np-color-brand-primary);
    box-shadow: 0 0 0 0 rgba(116, 31, 123, 0.5);
    animation: np-section-pulse 2.4s ease-out infinite;
}
@keyframes np-section-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(116, 31, 123, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(116, 31, 123, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(116, 31, 123, 0);   }
}
@media (prefers-reduced-motion: reduce) {
    .np-section__attention-dot { animation: none; }
}

/* "Soon" chip — re-uses np-tabs__chip styling for consistency */
.np-section__chip {
    display: inline-block;
    padding: 1px 8px;
    font-size: var(--np-fs-tiny, 12px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--np-color-text-muted);
    background: var(--np-color-surface-muted, #FBF7FC);
    border: 1px solid var(--np-color-brand-tint-200);
    border-radius: 999px;
    line-height: 1.5;
}

/* Action buttons group — right-aligned, hugs the chevron.
   `stopPropagation` in the markup keeps clicks from toggling the section. */
.np-section__actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.np-section-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--np-fs-small, 14px);
    font-weight: 500;
    line-height: 1.3;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--np-color-text-secondary, #5A5963);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.np-section-action:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--np-color-brand-tint-50);
}
.np-section-action:focus-visible {
    outline: 2px solid var(--np-color-brand-primary);
    outline-offset: 2px;
}
.np-section-action:disabled,
.np-section-action[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}
.np-section-action__icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}
.np-section-action__label {
    line-height: 1;
}

/* Tone variants — same colour vocabulary as np-status (CLAUDE.md §6.6).
   Primary = brand magenta (Send, Resend, Fill, Add) — most common.
   Success = green (Submit, Save final, Confirm).
   Neutral = grey (View, Print, Refresh, Show hidden — utility actions). */
.np-section-action--primary {
    color: var(--np-color-brand-primary);
    border-color: var(--np-color-brand-tint-200);
    background: var(--np-color-brand-tint-50);
}
.np-section-action--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--np-color-brand-tint-100);
    border-color: var(--np-color-brand-tint-100);
}
.np-section-action--success {
    color: #0F5132;
    border-color: #A3E0BB;
    background: #D1F2DD;
}
.np-section-action--success:hover:not(:disabled):not([aria-disabled="true"]) {
    background: #BCEACE;
}
.np-section-action--neutral {
    color: var(--np-color-text-secondary, #5A5963);
    border-color: var(--np-color-brand-tint-200);
    background: var(--np-color-surface);
}

/* Chevron — rotates on expand. Pure CSS, no JS. */
.np-section__chevron {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--np-color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}
.np-section__chevron svg {
    width: 18px;
    height: 18px;
}
.np-section[open] .np-section__chevron {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .np-section__chevron { transition: none; }
}

/* Expanded body — sits inside the same rounded card frame. */
.np-section__body {
    padding: var(--np-space-4, 16px);
    border-top: 1px solid var(--np-color-brand-tint-100);
    background: var(--np-color-surface);
}

/* Responsive — on narrow screens, action labels collapse to icon-only
   to keep the header on one line. The icons retain their tooltips
   (title attribute) so the meaning is still discoverable. */
@media (max-width: 720px) {
    .np-section-action__label {
        position: absolute;
        width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    .np-section-action {
        padding: 4px 6px;
    }
}

/* Print — flatten interactive affordances, show content open.
   Useful when a clinician prints the patient record. */
@media print {
    .np-section {
        page-break-inside: avoid;
        border: 1px solid #888;
        box-shadow: none;
    }
    .np-section__chevron,
    .np-section__actions {
        display: none;
    }
    .np-section[open] .np-section__body,
    .np-section .np-section__body {
        display: block;  /* show all section bodies on paper */
    }
}

/* Forced-colors / Windows high contrast — ensure section borders and
   action button outlines are visible (the brand tint backgrounds drop
   out in this mode). */
@media (forced-colors: active) {
    .np-section { border: 1px solid CanvasText; }
    .np-section-action { border: 1px solid CanvasText; }
    .np-section__attention-dot {
        background: CanvasText;
        animation: none;
    }
}

/* Workspace overview — definition-list grid (legacy; kept for any
   later screen that wants a label/value pair list). */
.np-overview-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--np-space-2, 8px) var(--np-space-4, 16px);
    margin: 0;
}
.np-overview-grid > dt {
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small, 14px);
    font-weight: 500;
}
.np-overview-grid > dd {
    margin: 0;
    color: var(--np-color-text-primary);
}
@media (max-width: 480px) {
    .np-overview-grid {
        grid-template-columns: 1fr;
        gap: 2px var(--np-space-4, 16px);
    }
    .np-overview-grid > dt {
        margin-top: var(--np-space-2, 8px);
    }
}

/* ============================================================================
   Reusable confirmation dialog (np-confirm)
   ----------------------------------------------------------------------------
   Themed replacement for window.confirm() — see _NpConfirmDialog.cshtml +
   js/np-confirm.js. Three tones: --info, --warning (default), --danger.
   ============================================================================ */
.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); }

/* Standalone .np-btn--danger for the dialog's "destructive" confirm button.
   Kept here (not in the row-action group) so dialogs can use it without
   pulling in row-action-specific styling. */
.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;
}

/* ============================================================================
   List view — pipe-delimited row actions + sticky Actions column.
   ----------------------------------------------------------------------------
   Note: this is a DELIBERATE exception to CLAUDE.md §6.7 (which mandates
   icon-only row actions). Approved per product review on 2026-05-27 —
   the Users list opted into pipe-delimited text links for clarity at the
   cost of column width. Other masters keep the icon pattern unless
   product approves a similar exception for them.
   ============================================================================ */
.np-row-actions--pipe {
    display: inline-flex;
    align-items: center;
    gap: var(--np-space-3, 12px);
    white-space: nowrap;
}
.np-row-actions--pipe a,
.np-row-actions--pipe button {
    padding: 0;
    color: var(--np-color-link, #1d4ed8);
    text-decoration: none;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}
.np-row-actions--pipe a:hover,
.np-row-actions--pipe a:focus,
.np-row-actions--pipe button:hover,
.np-row-actions--pipe button:focus {
    text-decoration: underline;
}
.np-row-actions--pipe .np-row-action--danger {
    color: #A41B17;
}
.np-row-actions--pipe .np-row-actions__sep {
    color: var(--np-color-border, #cbd5e1);
    user-select: none;
    aria-hidden: true;
}

/* Sticky Actions column for horizontal scroll on dense tables. The
   .table-responsive wrapper provides the horizontal-scroll viewport;
   position: sticky on the last cell keeps it visible. Subtle left
   shadow signals "more content scrolled under here". */
.table-responsive .np-actions-col {
    position: sticky;
    right: 0;
    background: var(--np-color-surface, #fff);
    box-shadow: -8px 0 8px -8px rgba(15, 23, 42, 0.12);
    z-index: 1;
}
.table-responsive tr:hover .np-actions-col {
    background: var(--np-color-brand-tint-50, #f1f5ff);
}

/* List-view toolbar layout — search box + status filter + primary action.
   Wraps cleanly on narrow viewports. */
.np-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--np-space-3, 12px);
    margin-bottom: var(--np-space-4, 16px);
}
.np-list-toolbar__search {
    display: flex;
    gap: var(--np-space-2, 8px);
    flex: 1 1 22rem;
    min-width: 0;
    align-items: end;
}
.np-list-toolbar__search input[type="search"] { flex: 1 1 auto; min-width: 0; }
.np-list-toolbar__filter { flex: 0 0 auto; }
.np-list-toolbar__primary { flex: 0 0 auto; margin-left: auto; }

@media (max-width: 600px) {
    .np-list-toolbar__primary { margin-left: 0; width: 100%; }
    .np-list-toolbar__primary .np-btn { width: 100%; }
}