/* =========================================================
   Eight28 Design System
   ---------------------------------------------------------
   Single source of truth. All tokens are CSS custom
   properties on :root so a tenant <style> block injected
   at login can override anything without code changes.

   Layers (in cascade order):
     1. Primitive tokens   — raw values (color scales, ramps)
     2. Semantic tokens    — roles (--color-primary, --text-primary)
     3. Component tokens   — built on semantic tokens
     4. Dark theme override — [data-theme="dark"]
     5. Tenant override slot — last; wins via specificity/order

 
/* ---------------------------------------------------------
   1. PRIMITIVE TOKENS — unchanged
   --------------------------------------------------------- */
:root {
    /* ---- Teal scale (Eight28 brand) -------------------- */
    --teal-50: oklch(97.5% 0.018 215);
    --teal-100: oklch(94% 0.038 215);
    --teal-200: oklch(88% 0.065 213);
    --teal-300: oklch(80% 0.095 211);
    --teal-400: oklch(72% 0.115 209);
    --teal-500: oklch(64% 0.125 207);
    --teal-600: oklch(56% 0.118 206);
    --teal-700: oklch(48% 0.100 206);
    --teal-800: oklch(38% 0.078 207);
    --teal-900: oklch(28% 0.055 209);
    /* ---- Warm-cool neutral scale ----------------------- */
    --neutral-0: oklch(100% 0 0);
    --neutral-25: oklch(99% 0.003 230);
    --neutral-50: oklch(98% 0.005 230);
    --neutral-100: oklch(96% 0.007 230);
    --neutral-150: oklch(94% 0.008 230);
    --neutral-200: oklch(91% 0.010 230);
    --neutral-300: oklch(85% 0.012 230);
    --neutral-400: oklch(72% 0.014 230);
    --neutral-500: oklch(58% 0.016 230);
    --neutral-600: oklch(46% 0.016 230);
    --neutral-700: oklch(35% 0.014 230);
    --neutral-800: oklch(25% 0.012 230);
    --neutral-850: oklch(20% 0.011 230);
    --neutral-900: oklch(16% 0.010 230);
    --neutral-950: oklch(12% 0.009 230);
    /* ---- Status scales --------------------------------- */
    --green-100: oklch(94% 0.045 155);
    --green-500: oklch(64% 0.135 155);
    --green-700: oklch(48% 0.110 155);
    --amber-100: oklch(94% 0.060 85);
    --amber-500: oklch(76% 0.150 82);
    --amber-700: oklch(58% 0.130 60);
    --red-100: oklch(94% 0.040 25);
    --red-500: oklch(64% 0.180 25);
    --red-700: oklch(50% 0.165 25);
    --blue-100: oklch(94% 0.045 250);
    --blue-500: oklch(64% 0.140 250);
    --blue-700: oklch(48% 0.130 250);
    --accent-coral: oklch(72% 0.135 30);
}


/* ---------------------------------------------------------
   2. SEMANTIC TOKENS — bolder type, generous spacing
   --------------------------------------------------------- */
:root {
    /* ---- Color: brand & action (unchanged) ------------- */
    --color-primary: var(--teal-500);
    --color-primary-hover: var(--teal-600);
    --color-primary-active: var(--teal-700);
    --color-primary-contrast: var(--neutral-0);
    --color-primary-soft: var(--teal-50);
    --color-primary-soft-text: var(--teal-700);
    --color-secondary: var(--neutral-100);
    --color-secondary-hover: var(--neutral-150);
    --color-secondary-active: var(--neutral-200);
    --color-secondary-contrast: var(--neutral-800);
    --color-accent: var(--accent-coral);
    /* ---- Color: surfaces (unchanged) ------------------- */
    --color-background-page: var(--neutral-50);
    --color-background-surface: var(--neutral-0);
    --color-background-elevated: var(--neutral-0);
    --color-background-sunken: var(--neutral-100);
    --color-background-inverse: var(--neutral-900);
    --color-background-overlay: oklch(20% 0.011 230 / 0.55);
    /* ---- Color: borders (unchanged) -------------------- */
    --color-border: var(--neutral-200);
    --color-border-strong: var(--neutral-300);
    --color-border-subtle: var(--neutral-150);
    --color-border-focus: var(--teal-500);
    /* ---- Color: text (unchanged) ----------------------- */
    --color-text-primary: var(--neutral-900);
    --color-text-secondary: var(--neutral-700);
    --color-text-muted: var(--neutral-500);
    --color-text-disabled: var(--neutral-400);
    --color-text-inverse: var(--neutral-0);
    --color-text-link: var(--teal-700);
    --color-text-link-hover: var(--teal-800);
    /* ---- Color: status (unchanged) --------------------- */
    --color-success: var(--green-700);
    --color-success-bg: var(--green-100);
    --color-success-border: var(--green-500);
    --color-warning: var(--amber-700);
    --color-warning-bg: var(--amber-100);
    --color-warning-border: var(--amber-500);
    --color-error: var(--red-700);
    --color-error-bg: var(--red-100);
    --color-error-border: var(--red-500);
    /* D3 — alias for the solid danger red. Was referenced by var(--color-danger)
       in 4 places (incl. the sidebar approvals badge) but never defined, so those
       backgrounds/colours silently fell back to transparent/inherited — the
       approvals count badge rendered with no red pill. Theme-aware via --color-error. */
    --color-danger: var(--color-error);
    --color-info: var(--blue-700);
    --color-info-bg: var(--blue-100);
    --color-info-border: var(--blue-500);
    /* ---- Typography (BOLDER scale) --------------------- */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-family-heading: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-family-display: 'Megrim', 'Inter Tight', system-ui, sans-serif;
    --font-family-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    /* Bold type scale — readable body at 16px, hero at 52px+.
       Modular ratio ~1.20 from base upward.                  */
    --font-size-xs: 10px; /* captions / pills */
    --font-size-sm: 12px; /* meta, helper text */
    --font-size-base: 13px; /* DEFAULT body */
    --font-size-md: 16px; /* card titles, labels */
    --font-size-lg: 20px; /* subheads */
    --font-size-xl: 24px; /* was 18 — section heads */
    --font-size-2xl: 30px; /* was 22 — H3 */
    --font-size-3xl: 38px; /* was 28 — H2 */
    --font-size-4xl: 52px; /* was 36 — H1 */
    --font-size-5xl: 64px; /* NEW — hero display */
    --font-size-6xl: 80px; /* NEW — landing hero */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800; /* NEW — for hero */

    --line-height-tight: 1.1; /* was 1.15 — tighter for big type */
    --line-height-normal: 1.5; /* was 1.45 — easier reading at 16px */
    --line-height-relaxed: 1.65;
    --letter-spacing-tight: -0.02em; /* was -0.01 — bolder hero */
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.04em;
    /* ---- Spacing — same 4px base, more generous mid ---- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 14px; /* was 12 */
    --space-4: 20px; /* was 16 */
    --space-5: 24px; /* was 20 */
    --space-6: 32px; /* was 24 */
    --space-7: 40px; /* was 32 */
    --space-8: 48px; /* was 40 */
    --space-9: 64px; /* was 48 */
    --space-10: 80px; /* was 56 */
    --space-12: 96px; /* was 72 */
    --space-14: 128px; /* was 96 */
    --space-16: 160px; /* was 128 */
    /* ---- Shape — slightly softer ----------------------- */
    --radius-xs: 4px;
    --radius-sm: 8px; /* was 6 */
    --radius-md: 10px; /* was 8 */
    --radius-lg: 14px; /* was 12 */
    --radius-xl: 18px; /* was 16 */
    --radius-2xl: 24px; /* was 20 */
    --radius-full: 9999px;
    /* ---- Shadow — slightly more presence --------------- */
    --shadow-xs: 0 1px 2px 0 oklch(20% 0.011 230 / 0.05);
    --shadow-sm: 0 2px 4px 0 oklch(20% 0.011 230 / 0.08), 0 1px 2px 0 oklch(20% 0.011 230 / 0.05);
    --shadow-md: 0 6px 16px -2px oklch(20% 0.011 230 / 0.10), 0 2px 6px -1px oklch(20% 0.011 230 / 0.06);
    --shadow-lg: 0 14px 32px -4px oklch(20% 0.011 230 / 0.12), 0 6px 12px -2px oklch(20% 0.011 230 / 0.08);
    --shadow-xl: 0 28px 56px -8px oklch(20% 0.011 230 / 0.18), 0 12px 24px -4px oklch(20% 0.011 230 / 0.10);
    --shadow-focus: 0 0 0 4px oklch(64% 0.125 207 / 0.28);
    /* ---- Motion (unchanged) ---------------------------- */
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 280ms;
    --motion-ease: cubic-bezier(0.2, 0, 0, 1);
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    /* ---- Layout — taller header + sidebar -------------- */
    --layout-sidebar-width: 272px; /* was 260 */
    --layout-sidebar-width-collapsed: 64px; /* was 56 */
    --layout-header-height: 64px; /* was 52 */
    --layout-content-max-width: 1320px;
    --layout-content-padding: 24px; /* was 16 */
    --layout-z-dropdown: 100;
    --layout-z-sticky: 200;
    --layout-z-modal: 300;
    --layout-z-toast: 400;
}


/* ---------------------------------------------------------
   3. COMPONENT TOKENS — chunkier buttons, inputs, cards
   --------------------------------------------------------- */
:root {
    /* ---- Button — taller, weightier -------------------- */
    --button-height-sm: 36px; /* was 26 */
    --button-height-md: 44px; /* was 32 — meets WCAG 44px target */
    --button-height-lg: 56px; /* was 40 — onboarding CTA size */
    --button-height-xl: 64px; /* NEW — hero CTA */
    --button-padding-x-sm: 16px; /* was 10 */
    --button-padding-x-md: 22px; /* was 14 */
    --button-padding-x-lg: 32px; /* was 20 */
    --button-padding-x-xl: 40px; /* NEW */
    --button-radius: var(--radius-md);
    --button-font-weight: var(--font-weight-semibold); /* was medium */
    --button-font-size: var(--font-size-base); /* now 16px */
    --button-font-size-lg: var(--font-size-md); /* 17px on lg */
    --button-font-size-xl: var(--font-size-lg); /* 20px on xl */

    --button-primary-bg: var(--color-primary);
    --button-primary-text: var(--color-primary-contrast);
    --button-primary-hover-bg: var(--color-primary-hover);
    --button-primary-active-bg: var(--color-primary-active);
    --button-secondary-bg: var(--color-background-surface);
    --button-secondary-text: var(--color-text-primary);
    --button-secondary-border: var(--color-border);
    --button-secondary-hover-bg: var(--color-secondary-hover);
    --button-ghost-text: var(--color-text-secondary);
    --button-ghost-hover-bg: var(--color-secondary);
    --button-danger-bg: var(--color-error);
    --button-danger-text: var(--neutral-0);
    --button-danger-hover-bg: var(--red-700);
    /* ---- Input — taller, breathable -------------------- */
    --input-height-sm: 36px; /* was 26 */
    --input-height-md: 48px; /* was 32 — onboarding parity */
    --input-height-lg: 56px; /* was 40 */
    --input-padding-x: 16px; /* was 10 */
    --input-bg: var(--color-background-surface);
    --input-text: var(--color-text-primary);
    --input-placeholder: var(--color-text-muted);
    --input-border: var(--color-border);
    --input-border-hover: var(--color-border-strong);
    --input-focus-border: var(--color-border-focus);
    --input-focus-ring: var(--shadow-focus);
    --input-radius: var(--radius-lg); /* was md — softer */
    --input-font-size: var(--font-size-base); /* now 16px */
    --input-disabled-bg: var(--neutral-100);
    /* ---- Card — more generous padding ------------------ */
    --card-bg: var(--color-background-surface);
    --card-border: var(--color-border);
    --card-radius: var(--radius-xl); /* was lg */
    --card-shadow: var(--shadow-sm);
    --card-padding: var(--space-6); /* was space-5 → now 32px */
    /* ---- Nav / Sidebar (unchanged) --------------------- */
    --nav-bg: var(--color-background-surface);
    --nav-border: var(--color-border);
    --sidebar-bg: var(--color-background-page);
    --sidebar-border: var(--color-border);
    --sidebar-item-text: var(--color-text-secondary);
    --sidebar-item-hover-bg: var(--neutral-100);
    --sidebar-item-active-bg: var(--color-primary-soft);
    --sidebar-item-active-text: var(--color-primary-soft-text);
    /* ---- Modal / Popover ------------------------------- */
    --modal-bg: var(--color-background-elevated);
    --modal-radius: var(--radius-2xl); /* was xl — softer */
    --modal-shadow: var(--shadow-xl);
    --modal-overlay: var(--color-background-overlay);
    --popover-bg: var(--color-background-elevated);
    --popover-border: var(--color-border);
    --popover-radius: var(--radius-lg); /* was md */
    --popover-shadow: var(--shadow-lg);

/* ---------------------------------------------------------
   3.1. APP SHELL HEIGHT — keep in sync with --layout-header-height
   --------------------------------------------------------- */
:root {
    --app-shell-header-height: 64px; /* was 52 */
}

/* ---- Table ---------------------------------------- */
--table-bg:            var(--color-background-surface);
--table-header-bg:     var(--color-background-sunken);
--table-header-text:   var(--color-text-secondary);
--table-row-hover-bg:  var(--neutral-50);
--table-border:        var(--color-border-subtle);
--table-cell-padding-y: 6px;
--table-cell-padding-x: 10px;

/* ---- Badge / Chip --------------------------------- */
--badge-radius:    var(--radius-sm);
--badge-font-size: var(--font-size-xs);
--badge-font-weight: var(--font-weight-medium);
--badge-padding-x: 6px;
--badge-padding-y: 2px;

/* ---- Tooltip -------------------------------------- */
--tooltip-bg:        var(--neutral-900);
--tooltip-text:      var(--neutral-50);
--tooltip-radius:    var(--radius-sm);
--tooltip-font-size: var(--font-size-xs);
--tooltip-padding:   4px 8px;

/* ---- Avatar --------------------------------------- */
--avatar-bg:     oklch(58% 0.155 185); /* teal — colour-0 default */
--avatar-text:   #fff;
--avatar-border: var(--color-background-surface);
}


/* ---------------------------------------------------------
   4. DARK THEME — soft warm-navy, not pitch black
   --------------------------------------------------------- */
[data-theme="dark"] {
    /* Surfaces: stepped neutrals, with elevated surfaces
       BRIGHTER than the page (Linear/Notion convention).   */
    --color-background-page:     var(--neutral-950);
    --color-background-surface:  var(--neutral-900);
    --color-background-elevated: var(--neutral-850);
    --color-background-sunken:   oklch(10% 0.009 230);
    --color-background-inverse:  var(--neutral-50);
    --color-background-overlay:  oklch(8% 0.009 230 / 0.7);

    /* Borders: lifted, not pure white opacity */
    --color-border:        oklch(28% 0.012 230);
    --color-border-strong: oklch(36% 0.014 230);
    --color-border-subtle: oklch(22% 0.011 230);

    /* Text: never use full white — too sharp on dark */
    --color-text-primary:   oklch(96% 0.005 230);
    --color-text-secondary: oklch(78% 0.010 230);
    --color-text-muted:     oklch(60% 0.012 230);
    --color-text-disabled:  oklch(42% 0.012 230);
    --color-text-inverse:   var(--neutral-900);
    --color-text-link:      var(--teal-300);
    --color-text-link-hover:var(--teal-200);

    /* Brand: lift lightness so it pops on dark */
    --color-primary:           var(--teal-400);
    --color-primary-hover:     var(--teal-300);
    --color-primary-active:    var(--teal-200);
    --color-primary-contrast:  var(--neutral-950);
    --color-primary-soft:      oklch(30% 0.060 207);
    --color-primary-soft-text: var(--teal-200);

    --color-secondary:        oklch(24% 0.012 230);
    --color-secondary-hover:  oklch(28% 0.012 230);
    --color-secondary-active: oklch(32% 0.013 230);
    --color-secondary-contrast: var(--neutral-50);

    /* Status — soften for dark backgrounds */
    --color-success-bg:     oklch(28% 0.045 155);
    --color-warning-bg:     oklch(28% 0.060  82);
    --color-error-bg:       oklch(28% 0.060  25);
    --color-info-bg:        oklch(28% 0.050 250);

    /* Shadows lose contrast on dark — strengthen */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.36),
                 0 1px 2px 0 rgb(0 0 0 / 0.24);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.45),
                 0 2px 4px -1px rgb(0 0 0 / 0.30);
    --shadow-lg: 0 10px 24px -4px rgb(0 0 0 / 0.55),
                 0 4px 8px -2px rgb(0 0 0 / 0.35);
    --shadow-xl: 0 20px 40px -8px rgb(0 0 0 / 0.65),
                 0 8px 16px -4px rgb(0 0 0 / 0.40);
    --shadow-focus: 0 0 0 3px oklch(72% 0.115 209 / 0.35);

    /* Recompute dependent component tokens that reference
       semantics changed above.                              */
    --input-disabled-bg:        oklch(22% 0.011 230);
    --table-row-hover-bg:       oklch(22% 0.011 230);
    --sidebar-item-hover-bg:    oklch(24% 0.012 230);
    --button-secondary-bg:      var(--color-background-surface);
    --button-secondary-hover-bg: var(--color-secondary-hover);
    --tooltip-bg:               var(--neutral-50);
    --tooltip-text:             var(--neutral-900);
}


/* ---------------------------------------------------------
   Bootstrap modal overrides — dark-mode safety
   ---------------------------------------------------------
   Bootstrap's .modal-* classes use Bootstrap's own --bs-modal-*
   variables, hardcoded to light-mode colours. They don't follow
   our design-system tokens, so in dark mode the modal content
   stays light → dark text on a dark backdrop becomes invisible.

   These overrides apply only under [data-theme="dark"] so light
   mode is unaffected. One block fixes all eight modals in the
   app at once: CreateUserGroupModal, AddUserToGroupModal,
   CopyPermissionsModal, RemoveUserFromGroupModal, CreateUserModal,
   EditUserModal, TermsModal, PrivacyModal.

   .btn-close is Bootstrap's X icon, rendered as a black SVG
   mask. filter: invert(1) brightness(1.5) flips it to white
   without touching size/positioning.
*/
[data-theme="dark"] .modal-content {
    background: var(--color-background-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--color-border-subtle);
}
[data-theme="dark"] .modal-footer {
    border-top-color: var(--color-border-subtle);
}
[data-theme="dark"] .modal-title {
    color: var(--color-text-primary);
}
[data-theme="dark"] .modal-backdrop.show {
    background: var(--color-background-overlay);
}
[data-theme="dark"] .btn-close {
    filter: invert(1) brightness(1.5);
}


/* ---------------------------------------------------------
   Bootstrap table overrides — dark-mode safety
   ---------------------------------------------------------
   Same pattern as the modal overrides above: Bootstrap's
   .table class reaches for --bs-table-bg / --bs-table-color /
   --bs-table-border-color / --bs-table-accent-bg, and applies
   white-by-default to every cell via:
       .table > :not(caption) > * > * {
         background-color: var(--bs-table-bg);
         box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
       }
   Our design-system tokens don't reach those Bootstrap variables,
   so in dark mode every table row stays bright white on the dark
   page chrome — the loudest dark-mode-broken element on screen.

   Retarget the Bootstrap variables at our design-system tokens.
   Reuses the existing 3-tier surface convention:
     - canvas       (--color-background-page)     — sits behind cards
     - card / table (--color-background-surface)  — table body fill
     - raised       (--color-background-elevated) — table header band

   Also soften the search input border in the topbar — under dark
   mode the default --color-border reads as a hard light line
   against the chrome; --color-border-subtle is enough to delineate
   without competing visually.
*/
[data-theme="dark"] .table {
    --bs-table-bg:           var(--color-background-surface);
    --bs-table-color:        var(--color-text-primary);
    --bs-table-border-color: var(--color-border-subtle);
    --bs-table-accent-bg:    transparent;
    --bs-table-hover-bg:     var(--table-row-hover-bg);
    --bs-table-hover-color:  var(--color-text-primary);
    --bs-table-striped-bg:   var(--color-background-elevated);
    --bs-table-striped-color: var(--color-text-primary);
    background: var(--color-background-surface);
    color:      var(--color-text-primary);
}
[data-theme="dark"] .table th {
    /* In dark mode the header band reads better as a slightly-
       raised tier above the row body, not a sunken one. */
    background: var(--color-background-elevated);
    color:      var(--color-text-secondary);
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .table td {
    background: var(--color-background-surface);
    border-bottom-color: var(--color-border-subtle);
}

[data-theme="dark"] .topbar__search .input {
    border-color: var(--color-border-subtle);
}


/* ---------------------------------------------------------
   Defensive dark-mode backgrounds for the layout chain
   ---------------------------------------------------------
   The DOM chain is:

     .abp-application-layout            ← from ABP's global.css bundle
       #ApplicationContainer            ← from ABP's global.css bundle
         .app-shell                     ← ours; bg = page
           .app-shell__main             ← ours; no bg (inherits)
             .content (inside <main>)   ← ours; no bg (inherits)
             .topbar / .sidebar         ← ours; bg = surface

   In dark mode, ABP's outer wrappers have a hardcoded white
   background that we don't control. The Stage 9 UAT screenshot
   showed it bleeding through past .app-shell where layout
   measurements left ABP's wrapper visible. Forcing the chain
   to be dark all the way down ensures no white pixel can leak.
   Each rule scoped to [data-theme="dark"] so light mode is
   untouched. */
[data-theme="dark"] .abp-application-layout,
[data-theme="dark"] #ApplicationContainer,
[data-theme="dark"] .app-shell__main,
[data-theme="dark"] .app-shell .content {
    background: var(--color-background-page);
}


/* ---------------------------------------------------------
   5. BASE STYLES — minimal, tokenized
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size:   var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color:        var(--color-text-primary);
    background:   var(--color-background-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin: 0;
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl);  }
h4 { font-size: var(--font-size-lg);  }
h5 { font-size: var(--font-size-md);  }
h6 { font-size: var(--font-size-base); }

p { margin: 0; }

a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--motion-fast) var(--motion-ease);
}
a:hover { color: var(--color-text-link-hover); }

code, kbd, samp, pre {
    font-family: var(--font-family-mono);
    font-size: 0.92em;
}

::selection {
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-text);
}

:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Reduced-motion + high-contrast media queries are defined further
   down in this file (lines ~1521 and ~1535). The duplicate that used
   to live here was the subset version of those — removed in Stage 9
   to keep one canonical block. */


/* ---------------------------------------------------------
   6. COMPONENT STYLES — pure token consumers
   --------------------------------------------------------- */

/* ---- Button --------------------------------------------- */
.btn {
    --_h:  var(--button-height-md);
    --_px: var(--button-padding-x-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--_h);
    padding: 0 var(--_px);
    border: 1px solid transparent;
    border-radius: var(--button-radius);
    font-family: inherit;
    font-size:    var(--button-font-size);
    font-weight:  var(--button-font-weight);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--motion-fast) var(--motion-ease),
                border-color     var(--motion-fast) var(--motion-ease),
                color            var(--motion-fast) var(--motion-ease),
                box-shadow       var(--motion-fast) var(--motion-ease),
                transform        var(--motion-fast) var(--motion-ease);
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--sm { --_h: var(--button-height-sm); --_px: var(--button-padding-x-sm); font-size: var(--font-size-sm); }
.btn--lg { --_h: var(--button-height-lg); --_px: var(--button-padding-x-lg); font-size: var(--font-size-md); }

.btn--primary {
    background: var(--button-primary-bg);
    color:      var(--button-primary-text);
}
.btn--primary:hover:not(:disabled)  { background: var(--button-primary-hover-bg); }
.btn--primary:active:not(:disabled) { background: var(--button-primary-active-bg); }

.btn--secondary {
    background: var(--button-secondary-bg);
    color:      var(--button-secondary-text);
    border-color: var(--button-secondary-border);
}
.btn--secondary:hover:not(:disabled) { background: var(--button-secondary-hover-bg); }

.btn--ghost {
    background: transparent;
    color:      var(--button-ghost-text);
}
.btn--ghost:hover:not(:disabled) { background: var(--button-ghost-hover-bg); color: var(--color-text-primary); }

.btn--danger {
    background: var(--button-danger-bg);
    color:      var(--button-danger-text);
}
.btn--danger:hover:not(:disabled) { background: var(--button-danger-hover-bg); }

.btn--icon { padding: 0; width: var(--_h); }


/* ---- Input / Textarea / Select -------------------------- */
.input, .textarea, .select {
    width: 100%;
    height: var(--input-height-md);
    padding: 0 var(--input-padding-x);
    background: var(--input-bg);
    color:      var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    font-family: inherit;
    font-size:   var(--input-font-size);
    line-height: 1;
    transition: border-color var(--motion-fast) var(--motion-ease),
                box-shadow   var(--motion-fast) var(--motion-ease);
}
.textarea { height: auto; padding: 8px var(--input-padding-x); line-height: var(--line-height-normal); resize: vertical; min-height: 72px; }
.input::placeholder, .textarea::placeholder { color: var(--input-placeholder); }
.input:hover:not(:focus):not(:disabled),
.textarea:hover:not(:focus):not(:disabled),
.select:hover:not(:focus):not(:disabled) { border-color: var(--input-border-hover); }
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-ring);
}
.input:disabled, .textarea:disabled, .select:disabled {
    background: var(--input-disabled-bg);
    cursor: not-allowed;
    color: var(--color-text-disabled);
}
.input--invalid, .textarea--invalid, .select--invalid {
    border-color: var(--color-error);
}
.input--invalid:focus { box-shadow: 0 0 0 3px oklch(64% 0.180 25 / 0.20); }

.input-group {
    display: flex; flex-direction: column; gap: 4px;
}
.input-group__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}
.input-group__hint  { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.input-group__error { font-size: var(--font-size-xs); color: var(--color-error); }

/* Input + trailing suffix (e.g. "yourcompany" + ".eight28.biz"). Kept
   distinct from .input-group above (which composes label+input+hint
   vertically) so the two patterns can coexist. The suffix uses the
   same height, border, radius and font-size tokens as .input so the
   pair reads as a single field. font:inherit ensures the suffix font
   matches whatever cascade is in scope (sets the gap right where
   the old Bootstrap .input-group-text used a different font stack). */
.input-suffix-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.input-suffix-group .input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
.input-suffix-group__suffix {
    display: inline-flex;
    align-items: center;
    height: var(--input-height-md);
    padding: 0 var(--input-padding-x);
    background: var(--color-background-sunken);
    color: var(--color-text-muted);
    border: 1px solid var(--input-border);
    border-left: 0;
    border-top-right-radius: var(--input-radius);
    border-bottom-right-radius: var(--input-radius);
    font: inherit;
    font-size: var(--input-font-size);
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}


/* ---- Drop zone (file upload with click + drag-and-drop) ----
   The native <InputFile> is positioned absolutely on top of the
   visual zone with opacity:0 — the browser handles BOTH clicks
   AND drops on a file input natively, so no JS bridge is needed
   beyond a small drag-over class toggle for visual feedback. */
.logo-drop-zone {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px 16px;
    text-align: center;
    background: var(--color-background-sunken);
    color: var(--color-text-muted);
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--motion-ease),
                background    var(--motion-fast) var(--motion-ease);
}

.logo-drop-zone:hover {
    border-color: var(--color-primary);
    background: var(--color-background-surface);
}

.logo-drop-zone--active {
    border-color: var(--color-primary);
    border-style: solid;
    background: color-mix(in srgb,
        var(--color-primary) 8%,
        var(--color-background-surface));
}

/* The InputFile fills the whole zone but is invisible — clicks
   anywhere on the zone open the file picker, drops anywhere on
   the zone trigger OnChange. pointer-events:auto is the default
   for an <input> but we restate it for clarity. */
.logo-drop-zone__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}

.logo-drop-zone__icon {
    font-size: 32px;
    margin-bottom: 6px;
    opacity: 0.5;
    line-height: 1;
}

.logo-drop-zone__primary {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    font-weight: 500;
    margin-bottom: 2px;
}

.logo-drop-zone__secondary {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}


/* ---- Checkbox / Radio / Switch ------------------------- */
.checkbox, .radio {
    appearance: none;
    width: 16px; height: 16px;
    border: 1px solid var(--color-border-strong);
    background: var(--input-bg);
    cursor: pointer;
    transition: background var(--motion-fast), border-color var(--motion-fast);
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
}
.checkbox { border-radius: var(--radius-xs); }
.radio    { border-radius: var(--radius-full); }
.checkbox:checked, .radio:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.checkbox:checked::after {
    content: '';
    width: 9px; height: 5px;
    border: 2px solid var(--color-primary-contrast);
    border-top: 0; border-right: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}
.radio:checked::after {
    content: '';
    width: 6px; height: 6px;
    background: var(--color-primary-contrast);
    border-radius: var(--radius-full);
}
.checkbox:focus-visible, .radio:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

.switch {
    appearance: none;
    width: 28px; height: 16px;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    position: relative; cursor: pointer;
    transition: background var(--motion-fast);
}
.switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    background: var(--neutral-0);
    border-radius: var(--radius-full);
    transition: transform var(--motion-fast) var(--motion-ease);
    box-shadow: var(--shadow-xs);
}
.switch:checked { background: var(--color-primary); }
.switch:checked::after { transform: translateX(12px); }


/* ---- Card ---------------------------------------------- */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}
.card__header  { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
.card__body    { padding: var(--card-padding); }
.card__footer  { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-subtle); background: var(--color-background-sunken); }
.card__title   { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.card__subtitle{ font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 2px; }


/* ---- Badge --------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: var(--badge-padding-y) var(--badge-padding-x);
    border-radius: var(--badge-radius);
    font-size:    var(--badge-font-size);
    font-weight:  var(--badge-font-weight);
    line-height: 1;
    background: var(--neutral-100);
    color: var(--color-text-secondary);
    border: 1px solid transparent;
}
.badge--primary { background: var(--color-primary-soft); color: var(--color-primary-soft-text); }
.badge--success { background: var(--color-success-bg); color: var(--color-success); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--error   { background: var(--color-error-bg);   color: var(--color-error); }
.badge--info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge--outline { background: transparent; border-color: var(--color-border); color: var(--color-text-secondary); }
.badge--pending { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-bg); }
.badge--dot::before {
    content: ''; width: 6px; height: 6px;
    border-radius: var(--radius-full);
    background: currentColor; opacity: 0.7;
}


/* ---- Alert --------------------------------------------- */
.alert {
    display: flex; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-background-surface);
    font-size: var(--font-size-sm);
}
.alert__icon { flex: 0 0 auto; line-height: 1.2; font-size: var(--font-size-md); }
.alert__title{ font-weight: var(--font-weight-semibold); margin-bottom: 2px; }
.alert--info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info); }
.alert--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.alert--error   { background: var(--color-error-bg);   border-color: var(--color-error-border);   color: var(--color-error); }

/* Pending-approval panel (UX1): the base .alert is a flex ROW (icon + text);
   this panel stacks its title / body / CTA vertically instead. */
.alert.pending-approval { flex-direction: column; align-items: flex-start; }

/* Pending-change banner (WS2): the alert may list several pending edits. Each
   is a self-contained block; a divider separates the second onward. */
.pending-change { width: 100%; padding-top: var(--space-2); }
.pending-change + .pending-change {
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}
.pending-change__fields { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pending-change__field  { display: flex; gap: var(--space-2); font-size: var(--font-size-sm); }
.pending-change__label  { margin: 0; font-weight: var(--font-weight-semibold); min-width: 96px; }
.pending-change__value  { margin: 0; }
.pending-change__footer {
    display: flex; align-items: center; gap: var(--space-3);
    margin-top: var(--space-1);
}
.pending-change__meta   { font-size: var(--font-size-xs); color: var(--color-text-muted); }


/* ---- Avatar -------------------------------------------- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    background: var(--avatar-bg);
    color: var(--avatar-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    flex: 0 0 auto;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 22px; height: 22px; font-size: 10px; }
.avatar--lg { width: 40px; height: 40px; font-size: var(--font-size-md); }
.avatar--xl { width: 64px; height: 64px; font-size: var(--font-size-xl); }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { border: 2px solid var(--avatar-border); }
.avatar-stack .avatar + .avatar { margin-left: -8px; }


/* ---- Filter chips -------------------------------------- */
.filter-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.filter-chip {
    display: inline-flex; align-items: center;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1.5px solid var(--color-border);
    background: var(--color-background-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
    white-space: nowrap;
    line-height: 1.4;
}
.filter-chip:hover {
    background: var(--color-background-sunken);
    color: var(--color-text);
    border-color: var(--color-border-strong, var(--color-border));
}
.filter-chip--active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.filter-chip--active:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ---- Member cell (avatar stack + count) ---------------- */
.member-cell { display: flex; align-items: center; gap: var(--space-2); }
.member-count { font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; }


/* ---- Table --------------------------------------------- */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--table-bg);
    font-size: var(--font-size-base);
}
.table th, .table td {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    text-align: left;
    border-bottom: 1px solid var(--table-border);
    vertical-align: middle;
}
.table th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    position: sticky; top: 0;
}
.table tbody tr {
    transition: background-color var(--motion-fast) var(--motion-ease);
}
.table tbody tr:hover { background: var(--table-row-hover-bg); }
/* Rows that navigate on click — avoids inline style="cursor:pointer" */
.table--clickable-rows tbody tr { cursor: pointer; }
.table--bordered { border: 1px solid var(--color-border); border-radius: var(--radius-md); }


/* ---- Tabs ---------------------------------------------- */
.tabs {
    display: flex; gap: 2px;
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--space-1);
    position: relative;        /* anchor for .tabs__indicator */
}
.tab {
    display: inline-flex; align-items: center;
    padding: 8px var(--space-3);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color var(--motion-base);
    white-space: nowrap;
}
.tab:hover { color: var(--color-text-primary); }
.tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: var(--radius-full);
    background: var(--color-background-sunken);
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    line-height: 18px;
    flex-shrink: 0;
}
.tab.active .tab-count, .tab[aria-selected="true"] .tab-count {
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-text);
}
.tab[aria-selected="true"], .tab.active {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-primary); /* CSS fallback; indicator overlaps when JS runs */
}
/* Sliding underline indicator — positioned by tab-indicator.js */
.tabs__indicator {
    position: absolute;
    bottom: -1px;              /* overlaps container border-bottom */
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: left var(--motion-base) var(--motion-ease-out),
                width var(--motion-base) var(--motion-ease-out),
                opacity var(--motion-fast);
}


/* ---- Breadcrumb / Pagination --------------------------- */
.breadcrumb {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.breadcrumb__sep { color: var(--color-text-disabled); }
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-text-primary); }
.breadcrumb__current { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }

.pagination { display: inline-flex; gap: 2px; }
.pagination .page {
    min-width: 28px; height: 28px;
    padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.pagination .page:hover { background: var(--color-secondary); }
.pagination .page.active {
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-text);
}


/* ---- Tooltip / Popover --------------------------------- */
.tooltip {
    background: var(--tooltip-bg); color: var(--tooltip-text);
    padding: var(--tooltip-padding);
    border-radius: var(--tooltip-radius);
    font-size: var(--tooltip-font-size);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-md);
    pointer-events: none;
}
.popover {
    background: var(--popover-bg);
    border: 1px solid var(--popover-border);
    border-radius: var(--popover-radius);
    box-shadow: var(--popover-shadow);
    padding: var(--space-2);
    min-width: 180px;
}
.menu-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: background var(--motion-fast) var(--motion-ease);
}
.menu-item:hover { background: var(--color-secondary); }
.menu-item__shortcut { margin-left: auto; color: var(--color-text-muted); font-size: var(--font-size-xs); }


/* ---- Modal --------------------------------------------- */
/* Prefixed `ds-` because Bootstrap owns the bare `.modal` class.
   Bootstrap's `.modal` is the full-viewport fixed overlay (position: fixed;
   left: 0; width: 100%; height: 100%), and both Blazorise's <Modal> and every
   hand-rolled `<div class="modal d-block">` in this app depend on it.
   design-system.css loads after Bootstrap at equal specificity, so a bare
   `.modal` rule here silently clamped that overlay to a 480px column pinned
   to the left edge of the viewport — the dialog then centred inside the
   column and every modal in the app rendered left-anchored. */
.ds-modal-overlay {
    position: fixed; inset: 0;
    background: var(--modal-overlay);
    display: grid; place-items: center;
    z-index: var(--layout-z-modal);
    padding: var(--space-4);
}
.ds-modal {
    background: var(--modal-bg);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    width: 100%; max-width: 480px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.ds-modal__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); display: flex; justify-content: space-between; align-items: center; }
.ds-modal__body   { padding: var(--space-5); }
.ds-modal__footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-subtle); display: flex; gap: 8px; justify-content: flex-end; background: var(--color-background-sunken); }


/* ---- Drawer (right-anchored side panel) --------------- */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay);
    z-index: var(--layout-z-modal);
    /* click-through cursor so users know the backdrop is interactive */
    cursor: default;
}
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: var(--modal-bg);
    border-left: 1px solid var(--color-border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    z-index: calc(var(--layout-z-modal) + 1);
    outline: none; /* suppress visible focus ring on the container */
}
.drawer__header {
    flex-shrink: 0;
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.drawer__header-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.drawer__header-text { flex: 1; min-width: 0; }
.drawer__title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 3px;
}
.drawer__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}
.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.drawer__footer {
    flex-shrink: 0;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-background-sunken);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.drawer__esc-hint {
    flex: 1;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
/* textarea reuses the same .input token as <input> but needs height reset.
   The base .input rule sets `padding: 0 var(--input-padding-x)` (zero vertical
   padding) which is correct for a fixed-height single-line input but leaves a
   multi-line textarea's text flush against the top border — so re-apply
   vertical padding here. */
textarea.input {
    height: auto;
    resize: vertical;
    line-height: var(--line-height-normal, 1.5);
    padding: 8px var(--input-padding-x);
}

/* ---- Drawer content blocks ----------------------------- */
/* Sections inside a .drawer__body. The body is already a flex column with a
   --space-5 gap, so sections only own their internal rhythm and divider. */
.drawer-section + .drawer-section {
    border-top: 1px solid var(--color-border-subtle);
    padding-top: var(--space-5);
}
.drawer-section__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

/* Label/value pairs — the readable rendering of a request payload. */
.detail-list { margin: 0; }
.detail-list__row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-2) 0;
}
.detail-list__row + .detail-list__row {
    border-top: 1px solid var(--color-border-subtle);
}
.detail-list__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}
.detail-list__value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary);
    margin: 0;
    word-break: break-word;
}

/* Raw-JSON escape hatch for operations that have no payload describer yet. */
.technical-details__summary {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--motion-fast) var(--motion-ease-out);
}
.technical-details__summary:hover { color: var(--color-text-primary); }
.technical-details__body {
    margin: var(--space-2) 0 0;
    padding: var(--space-3);
    background: var(--color-background-sunken);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ---- Approval chain (vertical timeline) ---------------- */
.approval-chain {
    list-style: none;
    margin: 0;
    padding: 0;
}
.approval-chain__stage {
    position: relative;
    display: flex;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
}
.approval-chain__stage:last-child { padding-bottom: 0; }

/* The rail connecting one marker to the next. Drawn from each stage except the
   last, behind the markers (which carry their own background). */
.approval-chain__stage:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 11px;              /* marker centre: 24px / 2 - 1px */
    top: 24px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}
/* A completed stage's rail is filled — progress reads at a glance. */
.approval-chain__stage.is-complete:not(:last-child)::before {
    background: var(--color-success, var(--green-500));
}

.approval-chain__marker {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-border);
    background: var(--color-background-surface);
    color: var(--color-text-muted);
}
.approval-chain__stage.is-complete .approval-chain__marker {
    background: var(--color-success, var(--green-500));
    border-color: var(--color-success, var(--green-500));
    color: #fff;
}
.approval-chain__stage.is-current .approval-chain__marker {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.approval-chain__body { flex: 1; min-width: 0; padding-top: 1px; }
.approval-chain__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}
.approval-chain__stage.is-pending .approval-chain__label {
    color: var(--color-text-secondary);
}
.approval-chain__approvers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: 3px;
}
.approval-chain__approver {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-background-sunken);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    padding: 1px 8px;
}
.approval-chain__status {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
}
.approval-chain__status--complete { color: var(--color-success, var(--green-500)); }
.approval-chain__status--current  { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.approval-chain__status--pending  { color: var(--color-text-muted); }

/* ---- Decision history ---------------------------------- */
.decision-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.decision-history__item {
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-background-sunken);
}
.decision-history__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}
.decision-history__meta {
    font-size: var(--font-size-xs);
    margin-top: 2px;
}
.decision-history__comment {
    margin-top: var(--space-2);
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ---- Progress / Skeleton ------------------------------- */
.progress {
    width: 100%; height: 6px;
    background: var(--color-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    background: var(--color-primary);
    border-radius: inherit;
    transition: width var(--motion-slow) var(--motion-ease-out);
}
.skeleton {
    background: linear-gradient(90deg,
        var(--color-secondary) 0%,
        var(--color-secondary-hover) 50%,
        var(--color-secondary) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer 1.4s linear infinite;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ---- Divider ------------------------------------------- */
.divider { height: 1px; background: var(--color-border); border: 0; }
.divider--vertical { width: 1px; height: 100%; }


/* ---- Kbd ----------------------------------------------- */
kbd, .kbd {
    display: inline-flex; align-items: center;
    padding: 1px 5px;
    background: var(--color-background-sunken);
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    font-family: var(--font-family-mono);
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.2;
}


/* ---- Utilities ----------------------------------------- */
.u-stack-1 { display: flex; flex-direction: column; gap: var(--space-1); }
.u-stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.u-stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.u-stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.u-row-1 { display: flex; align-items: center; gap: var(--space-1); }
.u-row-2 { display: flex; align-items: center; gap: var(--space-2); }
.u-row-3 { display: flex; align-items: center; gap: var(--space-3); }
.u-row-4 { display: flex; align-items: center; gap: var(--space-4); }
.u-text-muted { color: var(--color-text-muted); }
.u-text-secondary { color: var(--color-text-secondary); }
.u-text-mono { font-family: var(--font-family-mono); }
.u-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* =========================================================================
   Public site layout (merged from public.css)
   ========================================================================= */

/* ---------------------------------------------------------
INDEX
--------------------------------------------------------- */
/*
    1. Global Resets and Base Styles    [tokens in design-system.css]
    2. Blazor Error UI
    3. Public UI Root
    4. Layout Containers
    5. Buttons and Links
    6. Page Transitions
    7. Public Header
    8. Navigation Links
    9. Public Footer
   10. Legal Document Styles
   . Mobile Menu
   . Responsive Design (Media Queries)
   . Accessibility & Focus States
*/

/* Tokens (colour, spacing, radius, font) live in design-system.css.
   Tenant overrides live in tenant-theme.css. Do not redefine them here. */

/* Suppress native browser password reveal button */
.auth input[type="password"]::-ms-reveal,
.auth input[type="password"]::-ms-clear,
.auth input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none;
}

/* ---------------------------------------------------------
   2. Global Resets and Base Styles
--------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    overflow-y: scroll; /* Prevent layout shift when scrollbar appears */
}

body {
    margin: 0;
    /* Prefer the design-system token (so per-tenant theming via
       tenant-theme.js can override it), fall back to the bundled
       Inter stack if the token isn't set. Was previously hardcoded
       to 'Inter' which beat the var()-based body rule above and
       prevented the Theme Editor's font selection from taking
       effect. Stage 9 fix. */
    font-family: var(--font-family-base, 'Inter'), system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   3. Blazor Error UI
--------------------------------------------------------- */

#blazor-error-ui {
    background: #fff3cd;
    border-top: 2px solid #ffc107;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
    font-size: 0.9rem;
    color: #856404;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1;
        color: #856404;
        opacity: 0.7;
        transition: opacity var(--transition-fast);
    }

        #blazor-error-ui .dismiss:hover {
            opacity: 1;
        }

/* ---------------------------------------------------------
   4. Public UI Root
--------------------------------------------------------- */

.public-ui {
    background-color: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.public-layout {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--color-text);
}

/* ---------------------------------------------------------
   5. Layout Containers
--------------------------------------------------------- */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}

.public-main {
    flex: 1;
    padding: 48px 0;
    max-width: var(--container-max-width);
    margin: 0 auto;
    width: 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ---------------------------------------------------------
   6. Buttons and Links
--------------------------------------------------------- */

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-primary);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    position: relative;
    display: inline-block;
}

    .link-button::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        height: 1px;
        background: var(--brand-primary);
        opacity: 0;
        transform: scaleX(0.8);
        transition: all var(--transition-base);
    }

    .link-button:hover::after,
    .link-button:focus::after {
        opacity: 1;
        transform: scaleX(1);
    }

    /* Focus states for accessibility */
    .link-button:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 4px;
        border-radius: 2px;
    }

.form-error {
    background: #fdecea;
    color: #721c24;
    list-style: none;
    text-align: center;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 4px solid #c82333;
    margin: 16px 0;
    animation: slideDown 0.3s ease-out;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------
   7. Page Transitions
--------------------------------------------------------- */

.page-transition {
    animation: pageFadeIn 180ms ease-out;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------
   11. Legal Document Styles
--------------------------------------------------------- */
.legal-content {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 16px;
}

/* Table of Contents - sticky sidebar */
.legal-toc {
    position: sticky;
    top: 100px;
    align-self: start;
    background: var(--color-bg-alt);
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.legal-toc-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--color-text);
}

.legal-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .legal-toc-list li {
        margin-bottom: 8px;
    }

    .legal-toc-list a {
        color: var(--color-text-muted);
        text-decoration: none;
        font-size: 0.9rem;
        transition: color var(--transition-base);
        display: block;
        padding: 4px 0;
    }

        .legal-toc-list a:hover {
            color: var(--brand-primary);
        }

    .legal-toc-list button {
        background: none;
        border: none;
        color: var(--color-text-muted);
        text-decoration: none;
        font-size: 0.9rem;
        transition: color var(--transition-base);
        display: block;
        padding: 4px 0;
        cursor: pointer;
        text-align: left;
        width: 100%;
        font-family: inherit;
    }

        .legal-toc-list button:hover {
            color: var(--brand-primary);
        }

        .legal-toc-list button:focus-visible {
            outline: 2px solid var(--brand-primary);
            outline-offset: 2px;
            border-radius: 2px;
        }

/* Main content area */
.legal-body {
    min-width: 0; /* Prevent grid blowout */
}

.legal-title {
    font-size: 2rem;
    margin-bottom: 8px;
    color: var(--color-text);
}

.legal-meta {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-border);
}

/* Sections */
.section {
    margin-bottom: 48px;
    scroll-margin-top: 120px; /* Adjust this value to match your header height + some padding */
}

    .section h2 {
        font-size: 1.5rem;
        margin-top: 0;
        margin-bottom: 16px;
        color: var(--color-text);
    }

    .section h3 {
        font-size: 1.2rem;
        margin-top: 24px;
        margin-bottom: 12px;
        color: var(--color-text);
    }

    .section p {
        line-height: 1.7;
        margin-bottom: 16px;
        color: var(--color-text);
    }

    .section ul {
        line-height: 1.7;
        margin-bottom: 16px;
        padding-left: 24px;
    }

    .section li {
        margin-bottom: 8px;
    }

/* Legal table — used in Data Retention section */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 0.95rem;
    color: var(--color-text);
}

    .legal-table th,
    .legal-table td {
        text-align: left;
        padding: 10px 14px;
        border: 1px solid var(--color-border);
        vertical-align: top;
        line-height: 1.6;
    }

    .legal-table th {
        background-color: var(--color-bg-subtle, #f5f5f5);
        font-weight: 600;
    }

    .legal-table tr:nth-child(even) td {
        background-color: var(--color-bg-subtle, #f9f9f9);
    }

/* Pending legal review flag */
.legal-review-flag {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: var(--brand-primary);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 156, 189, 0.3);
    transition: all var(--transition-fast);
    z-index: 50;
}

    .back-to-top:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 156, 189, 0.4);
    }

/* Mobile: Hide TOC sidebar, show simple top nav */
@media (max-width: 768px) {
    .legal-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .legal-toc {
        position: relative;
        top: 0;
        max-height: none;
    }

    .legal-toc-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .back-to-top {
        bottom: 16px;
        right: 16px;
        padding: 10px 16px;
        font-size: 0.85rem;
    }
}

/* ---------------------------------------------------------
   . Mobile Menu
--------------------------------------------------------- */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--color-text);
    font-size: 1.5rem;
    line-height: 1;
}

    .menu-toggle:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 4px;
        border-radius: 4px;
    }

/* Mobile menu actions - hidden on desktop */
.mobile-menu-actions {
    display: none;
}

/* ---------------------------------------------------------
   . Responsive Design (Media Queries)
--------------------------------------------------------- */

@media (max-width: 768px) {
    :root {
        --container-padding: 12px;
    }

    /* Mobile Header - Show menu toggle */
    .menu-toggle {
        display: block;
        order: 3;
        margin-left: auto;
    }

    .logo-link {
        order: 1;
    }

    /* Hide desktop nav and actions */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(to bottom, #F1F5F9 0%, #EEF2F7 100%);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 8px;
        z-index: 50;
    }

        .nav-links.open {
            display: flex;
        }

        .nav-links a {
            padding: 12px 0;
            width: 100%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

            .nav-links a:last-of-type {
                border-bottom: none;
            }

    .header-actions {
        display: none;
    }

    /* Mobile menu actions */
    .mobile-menu-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        padding-top: 12px;
        margin-top: 8px;
        border-top: 1px solid var(--color-border);
    }

    .header-signin-mobile,
    .header-register-mobile {
        width: 100%;
        text-align: center;
        padding: 12px;
        text-decoration: none;
    }

    .header-signin-mobile {
        color: var(--brand-primary);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.9rem;
    }

    .header-register-mobile {
        background: var(--brand-primary);
        color: white;
        border-radius: 8px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.9rem;
    }

    /* Mobile Footer */
    .footer-container {
        flex-direction: column;
        padding: 32px var(--container-padding);
        gap: 32px;
    }

    .footer-links {
        gap: 32px;
    }

    .footer-logo {
        height: 80px;
    }

    /* Mobile Main Content */
    .public-main {
        padding: 32px 0;
    }
}

@media (max-width: 480px) {
    .logo-text {
        font-size: 1.1rem;
    }

    .logo-image {
        height: 40px;
    }

    .footer-links {
        flex-direction: column;
        gap: 24px;
    }

    .header-actions {
        gap: 8px;
    }
}

/* ---------------------------------------------------------
   . Accessibility & Focus States
--------------------------------------------------------- */

/* Ensure all interactive elements have visible focus states */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-border: rgba(0, 0, 0, 0.2);
    }
}

/* =========================================================================
   Eight28 D3 Public Landing layout
   -------------------------------------------------------------------------
   Page-level layout consumed by Theming/PublicHeader.razor,
   Theming/PublicFooter.razor and Pages/Index.razor. Tokens only.
   These rules override the legacy .public-header / .public-footer rules
   above by virtue of source order.
   ========================================================================= */

.section-pad { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }

/* ---------- header ---------- */
.public-header {
    position: sticky; top: 0; z-index: 50;
    background: #0e1c2f;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0;
}
.public-header__inner {
    max-width: 1200px; margin: 0 auto; padding: 12px var(--space-6);
    display: flex; align-items: center; gap: var(--space-6);
}
.brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-family-heading); font-weight: 700;
    letter-spacing: -0.01em; font-size: 17px;
    color: #fff; text-decoration: none;
}
.brand__mark {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--color-primary); color: white;
    display: grid; place-items: center;
    font-weight: 800; font-size: 13px;
}
.brand__text--accent { color: var(--color-primary); }
.public-nav { display: flex; gap: 4px; flex: 1; align-items: center; }
.public-nav a {
    font-size: var(--font-size-md); padding: 6px 12px;
    color: rgba(255, 255, 255, 0.65); border-radius: var(--radius-sm);
    text-decoration: none; text-transform: none; letter-spacing: normal;
}
.public-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.public-nav a::after { display: none; }
.header-cta { display: flex; gap: 8px; align-items: center; }

/* Ghost "Sign In" button sits on the dark (#0e1c2f) header — override
   the default dark-gray token so text is legible on the dark background. */
.public-header .btn--ghost { color: rgba(255, 255, 255, 0.85); }
.public-header .btn--ghost:hover:not(:disabled) {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}
/* Primary "Get Started" CTA on the dark header. No primary override existed, so
   the filled teal button could render with no visible fill against the dark
   background (UAT defect). Force the teal fill + contrast text explicitly. */
.public-header .btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border-color: var(--color-primary);
}
.public-header .btn--primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-contrast);
}
/* Visible focus rings on both header buttons against the dark background */
.public-header .btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.65);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- hero ---------- */
.hero { padding: 88px 0 72px; position: relative; overflow: hidden; }
.hero::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(60% 60% at 80% 20%, oklch(94% 0.05 207 / 0.55), transparent 60%),
      radial-gradient(50% 50% at 10% 90%, oklch(96% 0.03 207 / 0.6), transparent 60%);
    pointer-events: none; z-index: 0;
}
.hero > .section-pad {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: var(--space-9); align-items: center;
}
@media (max-width: 960px) { .hero > .section-pad { grid-template-columns: 1fr; } }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 5px; border-radius: var(--radius-full);
    background: var(--color-background-surface);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm); color: var(--color-text-secondary);
    margin-bottom: var(--space-5); box-shadow: var(--shadow-xs);
}
.eyebrow-dot {
    width: 18px; height: 18px; border-radius: var(--radius-full);
    background: var(--color-primary-soft); color: var(--color-primary-soft-text);
    display: grid; place-items: center; font-size: 9px;
}
.hero h1 {
    font-family: var(--font-family-heading);
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.02; letter-spacing: -0.025em;
    font-weight: 700; margin-bottom: var(--space-5); text-wrap: balance;
}
.hero p.lead {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    max-width: 52ch; margin-bottom: var(--space-6);
}
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-6); }
.trust { display: flex; align-items: center; gap: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---------- avatars ---------- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-full);
    background: var(--avatar-bg);
    color: var(--avatar-text);
    font-size: var(--font-size-sm); font-weight: 600; flex: 0 0 auto;
}
.avatar--sm { width: 24px; height: 24px; font-size: var(--font-size-xs); }
.avatar--lg { width: 40px; height: 40px; font-size: var(--font-size-md); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar {
    border: 2px solid var(--color-background-surface);
    margin-left: -8px;
}
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ---------- hero visual ---------- */
.hero-visual {
    background: white; border-radius: var(--radius-xl);
    border: 1px solid var(--color-border); box-shadow: var(--shadow-xl);
    overflow: hidden; transform: rotate(0.4deg);
}
.hero-visual__bar {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; background: var(--color-background-sunken);
    border-bottom: 1px solid var(--color-border-subtle);
}
.hero-visual__bar i { width: 9px; height: 9px; border-radius: var(--radius-full); display: inline-block; }
.hero-visual__bar i:nth-child(1) { background: oklch(75% 0.15 25); }
.hero-visual__bar i:nth-child(2) { background: oklch(82% 0.12 90); }
.hero-visual__bar i:nth-child(3) { background: oklch(75% 0.13 145); }
.hero-visual__url { font-size: 11px; color: var(--color-text-muted); margin-left: 8px; font-family: var(--font-family-mono); }
.hero-visual__body { padding: var(--space-5); }
.hero-visual__heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-weight: 600; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--space-4); }
.kpi { background: var(--color-background-sunken); border-radius: var(--radius-md); padding: 10px 12px; }
.kpi__label { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.kpi__val { font-family: var(--font-family-heading); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.kpi__delta { font-size: 11px; font-weight: 500; margin-top: 2px; }
.kpi__delta.up { color: var(--color-success); }
.kpi__delta.down { color: var(--color-error); }

/* ---------- logos strip ---------- */
.logos {
    padding: var(--space-7) 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-background-sunken);
}
.logos__title {
    text-align: center; font-size: var(--font-size-sm);
    color: var(--color-text-muted); margin-bottom: var(--space-4);
    letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500;
}
.logos__row { display: flex; justify-content: space-around; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.logos__row span {
    font-family: var(--font-family-heading); font-weight: 700;
    color: var(--color-text-muted); font-size: var(--font-size-xl);
    letter-spacing: -0.02em; opacity: 0.7;
}

/* ---------- features ---------- */
.features { padding: var(--space-12) 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-8); }
.section-head__tag {
    display: inline-block; font-size: var(--font-size-xs);
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-primary); font-weight: 600; margin-bottom: 12px;
}
.section-head h2 {
    font-family: var(--font-family-heading);
    font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1;
    letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; margin-bottom: 12px;
}
.section-head p { font-size: var(--font-size-md); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 920px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } }
.feature {
    background: var(--color-background-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: all var(--motion-base) var(--motion-ease);
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.feature__icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: var(--color-primary-soft); color: var(--color-primary-soft-text);
    display: grid; place-items: center; font-size: 15px; margin-bottom: var(--space-3);
}
.feature h3 { font-size: var(--font-size-md); font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
.feature p { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }

/* ---------- spotlight ---------- */
.spotlight { padding: var(--space-12) 0; background: var(--color-background-sunken); }
.spotlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center; }
@media (max-width: 920px) { .spotlight-grid { grid-template-columns: 1fr; } }
.spotlight-grid h3 { font-family: var(--font-family-heading); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px; }
.spotlight-grid p { color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); }
.spotlight-list { list-style: none; padding: 0; }
.spotlight-list li { display: flex; gap: 10px; padding: 8px 0; font-size: var(--font-size-md); }
.spotlight-tick { color: var(--color-success); margin-top: 3px; }
.spotlight-mock { background: white; border-radius: var(--radius-xl); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); padding: var(--space-4); }
.spotlight-mock__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 600; }
.theme-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: var(--space-3); }
.swatch {
    aspect-ratio: 1; border-radius: var(--radius-md);
    display: flex; align-items: flex-end; padding: 8px;
    font-size: 10px; font-weight: 600; cursor: pointer;
    transition: transform var(--motion-fast) var(--motion-ease);
}
.swatch:hover { transform: scale(1.05); }

/* ---------- pricing ---------- */
.pricing { padding: var(--space-12) 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; }
@media (max-width: 920px) { .pricing-grid { grid-template-columns: 1fr; } }
.tier {
    background: var(--color-background-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-4);
}
.tier--featured {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-soft), var(--shadow-md);
    position: relative;
}
.tier--featured::after {
    content: "Most popular"; position: absolute; top: -10px; left: 24px;
    background: var(--color-primary); color: white;
    padding: 3px 10px; border-radius: var(--radius-full);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.tier__name { font-weight: 600; font-size: var(--font-size-md); }
.tier__price { font-family: var(--font-family-heading); font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.tier__price small { font-size: var(--font-size-md); font-weight: 500; color: var(--color-text-muted); letter-spacing: 0; }
.tier__desc { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.tier__features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tier__features li { display: flex; gap: 10px; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ---------- final CTA ---------- */
.final-cta { padding: var(--space-12) 0 var(--space-9); }
.final-cta__inner {
    background: var(--color-text-primary); color: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-9) var(--space-8);
    text-align: center; position: relative; overflow: hidden;
}
.final-cta__inner::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60% 80% at 50% 100%, oklch(64% 0.125 207 / 0.4), transparent 70%);
}
.final-cta h2 {
    position: relative; font-family: var(--font-family-heading);
    font-size: clamp(28px, 3.5vw, 44px); font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.1;
    margin-bottom: 12px; text-wrap: balance;
}
.final-cta p {
    position: relative; color: oklch(85% 0.01 230);
    font-size: var(--font-size-md); margin-bottom: var(--space-5);
    max-width: 50ch; margin-left: auto; margin-right: auto;
}
.final-cta__row { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.final-cta__inner .btn--primary { background: white; color: var(--color-text-primary); }
.final-cta__inner .btn--primary:hover { background: oklch(95% 0.005 230); }
.final-cta__inner .btn--ghost { color: oklch(85% 0.01 230); }
.final-cta__inner .btn--ghost:hover { background: oklch(100% 0 0 / 0.1); color: white; }

/* ---------- footer (overrides legacy rules above) ---------- */
.public-footer {
    background: #0e1c2f;
    padding: var(--space-9) 0 var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: var(--space-5); margin-bottom: var(--space-7);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h5 {
    font-size: var(--font-size-xs); text-transform: uppercase;
    letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.4);
    font-weight: 500; margin-bottom: 12px;
}
.footer-grid ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-grid a { color: rgba(255, 255, 255, 0.6); font-size: var(--font-size-sm); text-decoration: none; text-transform: none; }
.footer-grid a:hover { color: #fff; }
.footer-tagline { color: rgba(255, 255, 255, 0.5); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); margin: 12px 0 var(--space-3); max-width: 28ch; }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.35);
    flex-wrap: wrap; gap: 12px;
}


/* =========================================================================
   App layout, onboarding, theme editor (merged from app.css)
   ========================================================================= */


/* ---------------------------------------------------------
INDEX
--------------------------------------------------------- */
/*
    1. Application Layout (Authenticated)   [tokens in design-system.css]
    2. Navigation Bar
    3. Onboarding UX
*/

/* Tokens (colour, spacing, radius, font) live in design-system.css.
   Tenant overrides live in tenant-theme.css. Do not redefine them here. */

.text-uppercase {
    text-transform: uppercase;
}

/* -----------------------------------------------
4) Onboarding UX
----------------------------------------------- */
.onboarding-split-bg {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--brand-primary), #e8ecff);
    display: flex;
}

.onboarding-split-container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.onboarding-left {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.onboarding-right {
    width: 50%;
    flex: 0 0 60%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    overflow-y: auto;
}

.mascot-wrapper {
    text-align: center;
    max-width: 60%;
}

.mascot-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    background: none;
    padding: 12px;
}

.mascot-guidance {
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif, system-ui, sans-serif;
    font-size: 2rem;
    line-height: 1.2;
    color: #2d2d2d;
}

.onboarding-wrapper {
    display: flex;
    justify-content: center;
    padding: 40px 16px;
}

.onboarding-card {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
}

    .onboarding-card h1 {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    .onboarding-card p {
        font-size: 1.05rem;
        line-height: 1.6;
        color: #5f6368;
        max-width: 45%;
        margin-bottom: 2rem;
    }

    .onboarding-card input.form-control {
        height: 52px;
        font-size: 1rem;
        border-radius: 12px;
        padding: 0 1rem;
        max-width: 520px;
        margin-bottom: 0.25rem;
    }

        .onboarding-card input.form-control:focus {
            box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15);
            border-color: #0d6efd;
        }

    .onboarding-card label {
        display: block;
        margin-top: 16px;
        margin-bottom: 4px;
        color: #5f6368;
    }

    .onboarding-card input,
    .onboarding-card select {
        width: 100%;
    }

    .onboarding-card .btn-primary {
        height: 52px;
        font-size: 1rem;
        font-weight: 700;
        padding: 0 1.5rem;
        background-color: var(--brand-primary);
        border: none;
        margin-top: 1rem;
    }

.glass-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 3rem 3.5rem;
    box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.8);
}

.onboarding-right-inner {
    width: 100%;
    max-width: 720px;
}

.onboarding-back {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    display: inline-block;
}

    .onboarding-back:hover {
        color: #111827;
        text-decoration: none;
    }

.text-danger {
    font-size: 0.9rem;
}

.onboarding-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1rem;
    max-width: 720px;
}

.form-span-2 {
    grid-column: span 2;
}

.manual-address-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 240px;
    font-size: 0.95rem;
}

    .manual-address-toggle input[type="checkbox"] {
        margin: 0;
    }

    .manual-address-toggle label {
        margin: 0;
        line-height: 1.4;
        color: #5f6368;
    }

input[readonly] {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

.form-select:disabled {
    background-color: rgba(255,255,255,0.6);
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .onboarding-split-container {
        flex-direction: column;
        height: auto;
    }

    .onboarding-left, .onboarding-right {
        width: 100%;
        padding: 2rem;
    }

    .onboarding-right {
        justify-content: flex-start;
    }

    .onboarding-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Eight28 D4 App Shell layout
   -------------------------------------------------------------------------
   Page-level layout consumed by Layouts/AppShell.razor + Sidebar.razor +
   Topbar.razor. Tokens only.

   --app-shell-header-height is the single source of truth for the chrome
   row height — the sidebar brand block and the topbar both pin to it so
   their bottom dividers line up at the same Y.
   ========================================================================= */

:root {
    --app-shell-header-height: 52px;
}

.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--color-background-page);
}

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

/* ---------- Sidebar ---------- */
.sidebar {
    width: 232px;
    flex: 0 0 232px;
    background: var(--color-background-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    transition: flex-basis var(--motion-base) var(--motion-ease),
                width var(--motion-base) var(--motion-ease);
}

.sidebar--collapsed {
    width: 64px;
    flex: 0 0 64px;
}

/* Focusable (tabindex -1) only so the phone drawer can take focus as a last resort (SHELL.01). */
.sidebar:focus {
    outline: none;
}

.sidebar--collapsed .sidebar__brand-name,
.sidebar--collapsed .sidebar__tenant-label,
.sidebar--collapsed .nav-item__label,
.sidebar--collapsed .nav-group__title,
.sidebar--collapsed .sidebar__user-meta { display: none; }

.sidebar__brand {
    height: var(--app-shell-header-height);
    flex: 0 0 var(--app-shell-header-height);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sidebar__brand-mark {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: var(--color-primary); color: white;
    display: grid; place-items: center;
    font-weight: 800; font-size: 12px;
    flex: 0 0 auto;
}

.sidebar__brand-logo {
    max-height: 32px;
    max-width: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.sidebar__brand-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__tenant {
    padding: 10px var(--space-3);
    margin: 8px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background var(--motion-fast);
}

.sidebar__tenant:hover { background: var(--color-background-sunken); }

.sidebar__tenant-mark {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-text);
    display: grid; place-items: center;
    font-weight: 700; font-size: 10px;
    flex: 0 0 auto;
}

.sidebar__tenant-label { flex: 1; font-weight: 500; }

.sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.nav-group { margin-bottom: var(--space-3); }

.nav-group__title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    font-weight: 600;
    padding: 8px 10px 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--motion-fast);
    text-decoration: none;
}

.nav-item i {
    width: 16px; text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Pending-count pill on a nav item (e.g. My Approvals). Mirrors
   .notification-bell__badge — small circular danger badge — but sits
   inline at the right end of the row via margin-left:auto. Stays visible
   in the collapsed sidebar since only the text label is hidden there. */
.nav-item__badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-danger);
    color: white;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}

.nav-item:hover {
    background: var(--color-background-sunken);
    color: var(--color-text-primary);
}

.nav-item:hover i { color: var(--color-text-primary); }

.nav-item.active {
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-text);
    font-weight: 500;
}

.nav-item.active i { color: var(--color-primary-soft-text); }

.sidebar__user {
    padding: 10px var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar__user-meta { flex: 1; min-width: 0; }

.sidebar__user-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__user-email {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapse / expand toggle.
   Expanded, it is a small icon button beside the user block. Collapsed, the
   user meta is hidden and the sidebar narrows to 64px, which left only a bare
   chevron to click — too small to find, and the only way back out. Collapsed,
   the footer stacks and the toggle claims the full width at a 40px row height
   so the whole strip is the target. */
.sidebar__collapse-toggle {
    flex: 0 0 auto;
}

.sidebar--collapsed .sidebar__user {
    flex-direction: column;
    gap: var(--space-2);
    padding: 10px var(--space-2);
}

.sidebar--collapsed .sidebar__collapse-toggle--expand {
    width: 100%;
    min-height: 40px;
    font-size: var(--font-size-lg);
    line-height: 1;
    border-radius: var(--radius-md);
}

/* ---------- Topbar ---------- */
.topbar {
    height: var(--app-shell-header-height);
    background: var(--color-background-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 var(--space-5);
    gap: var(--space-4);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Stretch the breadcrumb to fill the topbar's full height and
   center its content there. Without this, the breadcrumb only
   takes its intrinsic line-height and visually drifts toward
   the top of the row even though the flex parent has
   align-items:center — small font + tight line-height makes
   the eye perceive it as top-aligned. */
.topbar .breadcrumb {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.topbar .breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.topbar .breadcrumb a:hover { color: var(--color-text-primary); }

.topbar .breadcrumb__sep { color: var(--color-text-disabled); padding: 0 2px; }

.topbar .breadcrumb__current {
    color: var(--color-text-primary);
    font-weight: 500;
}

.topbar__search {
    flex: 1;
    max-width: 480px;
    position: relative;
}

.topbar__search .input {
    width: 100%;
    height: 32px;
    padding: 0 36px 0 32px;
    background: var(--color-background-sunken);
    font-size: var(--font-size-sm);
}

.topbar__search .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.topbar__search-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    padding: 2px 6px;
    background: var(--color-background-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
}

.topbar__actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
    position: relative;
}

.topbar__user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 220px;
    background: var(--color-background-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 20;
}

.topbar__user-menu-header {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: 4px;
}

.topbar__user-menu-name { font-weight: 600; font-size: var(--font-size-sm); }
.topbar__user-menu-email { font-size: 11px; color: var(--color-text-muted); }

.topbar__user-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-primary);
    border: 0;
    font-family: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.topbar__user-menu-item:hover { background: var(--color-background-sunken); }

/* ---------- Notification bell ----------
   Bell button styling matches the other ghost icon buttons in the topbar
   via E28Button — no border reset needed here. Below is the dropdown and
   badge styling. Dropdown items use consistent horizontal padding (10px)
   so nothing sits flush against the panel edge. */
.notification-bell {
    position: relative;
}

.notification-bell__button {
    /* The button itself is rendered via E28Button (btn btn--ghost btn--sm
       btn--icon). The wrapper here gives the badge an anchor — see below. */
    position: relative;
}

.notification-bell__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--color-danger);
    color: white;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}

.notification-bell__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 360px;
    max-height: 480px;
    overflow-y: auto;
    z-index: 20;
}

.notification-bell__section {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.notification-bell__section:last-of-type {
    border-bottom: 0;
}

.notification-bell__section-title {
    padding: 4px 12px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.notification-bell__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
}

.notification-bell__item:hover {
    background: var(--color-background-sunken);
}

.notification-bell__item-title {
    font-weight: 500;
}

.notification-bell__item-meta {
    margin-top: 2px;
    font-size: 11px;
}

.notification-bell__empty {
    padding: 8px 12px;
    font-size: var(--font-size-sm);
}

.notification-bell__footer {
    padding: 8px 12px;
    border-top: 1px solid var(--color-border-subtle);
    font-size: var(--font-size-sm);
}

.notification-bell__footer a {
    color: var(--color-link);
}

/* ---------- Content area ---------- */
.app-shell .content {
    flex: 1;
    padding: var(--space-5) var(--space-6);
    overflow-x: hidden;
}

/* ---------- Phone widths (SHELL.01) ----------
   Below the app's 768 px breakpoint the sidebar becomes an off-canvas drawer opened from the
   topbar's menu button, over a backdrop; the page takes the full width. Layout is CSS-driven
   (it is right from the first paint); AppShell.razor owns open/closed and app-shell.js the
   focus trap, Esc and scroll lock. At 768 px and above none of this applies. */
.topbar__menu-button,
.sidebar__close,
.shell-backdrop,
.breadcrumb__compact {
    display: none;
}

@media (max-width: 768px) {
    .sidebar,
    .sidebar--collapsed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: calc(var(--layout-z-modal) + 1);
        width: min(300px, 85vw);
        flex: none;
        height: 100vh;
        height: 100dvh;
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        /* Hidden (so its links can't be tabbed to or read out) once the slide-out finishes. */
        visibility: hidden;
        transition: transform var(--motion-base) var(--motion-ease-out),
                    visibility 0s linear var(--motion-base);
    }

    .sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--motion-base) var(--motion-ease-out), visibility 0s;
    }

    /* The drawer always shows full labels; the desktop collapse toggle gives way to Close. */
    .sidebar__collapse-toggle {
        display: none;
    }

    .sidebar__close {
        display: inline-flex;
        margin-left: auto;
        flex: 0 0 auto;
    }

    .shell-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--layout-z-modal);
        background: var(--modal-overlay);
        animation: shell-backdrop-in var(--motion-base) var(--motion-ease-out);
    }

    .topbar {
        height: auto;
        min-height: var(--app-shell-header-height);
        flex-wrap: wrap;
        padding: 0 var(--space-3);
        gap: var(--space-2);
    }

    .topbar__menu-button {
        display: inline-flex;
    }

    /* The breadcrumb shrinks to the current page's name. */
    .topbar .breadcrumb {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .topbar .breadcrumb > * {
        display: none;
    }

    .topbar .breadcrumb > .breadcrumb__compact {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--color-text-primary);
        font-weight: 500;
    }

    /* The trial banner, when shown, takes its own line under the topbar row. */
    .topbar .trial-banner {
        order: 10;
        flex-basis: 100%;
        margin-bottom: var(--space-2);
    }

    /* Menus from the topbar open within the screen. */
    .topbar__user-menu,
    .notification-bell__dropdown {
        position: fixed;
        top: calc(var(--app-shell-header-height) + 4px);
        left: var(--space-2);
        right: var(--space-2);
        width: auto;
        min-width: 0;
        margin-top: 0;
    }

    .app-shell .content {
        padding: var(--space-4) var(--space-3);
    }
}

@keyframes shell-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* While the drawer is open the page behind it stays put. */
html.shell-drawer-open,
html.shell-drawer-open body {
    overflow: hidden;
}

/* Page-level structural helpers — used by app pages */
.page-pad {
    /* Alias used by pages that want to opt in to standard content spacing.
       The .content wrapper already provides padding; .page-pad is a
       semantic grouping wrapper, not a spacing addition. */
}

.page-heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-5) 0;
}

/* =========================================================================
   Eight28 D5 Theme Editor layout
   -------------------------------------------------------------------------
   Consumed by Pages/App/Settings/ThemeEditor.razor.
   ========================================================================= */

.theme-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.theme-editor__bar {
    background: var(--color-background-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 10px var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.theme-editor__crumb {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.theme-editor__crumb strong {
    color: var(--color-text-primary);
    font-weight: 500;
}

.theme-editor__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.theme-editor__grid {
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 0;
}

@media (max-width: 920px) {
    .theme-editor__grid { grid-template-columns: 1fr; }
}

.theme-editor__panel {
    background: var(--color-background-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
}

.theme-editor__section {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}

.theme-editor__section h3 {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.theme-editor__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-3);
}

.theme-editor__field:last-child { margin-bottom: 0; }

.theme-editor__field > label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-editor__val {
    font-family: var(--font-family-mono);
    font-size: 11px;
    color: var(--color-text-muted);
}

.theme-editor__color-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-editor__swatch {
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    flex: 0 0 28px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.theme-editor__swatch input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%; height: 100%;
}

.theme-editor__color-input .input {
    height: 28px;
    font-family: var(--font-family-mono);
    font-size: 11px;
    text-transform: uppercase;
}

.theme-editor__presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.theme-editor__preset {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform var(--motion-fast);
}

.theme-editor__preset:hover { transform: scale(1.08); }

.theme-editor__preset.active {
    border-color: var(--color-text-primary);
    box-shadow: 0 0 0 2px var(--color-background-surface) inset;
}

.theme-editor__fonts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.theme-editor__font {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--motion-fast);
    background: var(--color-background-surface);
    text-align: left;
    font-size: var(--font-size-md);
    font-weight: 600;
}

.theme-editor__font:hover {
    border-color: var(--color-border-strong);
    background: var(--color-background-sunken);
}

.theme-editor__font.active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.contrast-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contrast-pill--aaa  { background: var(--color-success-bg); color: var(--color-success); }
.contrast-pill--aa   { background: var(--color-info-bg);    color: var(--color-info); }
.contrast-pill--fail { background: var(--color-error-bg);   color: var(--color-error); }

.theme-editor__preview {
    background: var(--color-background-page);
    padding: var(--space-5);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.theme-editor__preview-toolbar {
    display: flex;
    align-items: center;
    padding-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.theme-editor__preview-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.theme-editor__preview-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: var(--space-3);
}

/* ── Logo upload zone ───────────────────────────────────────────────────── */

.theme-editor__logo-zone {
    position: relative;
    display: flex;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    height: 84px;
    overflow: hidden;
    transition: border-color var(--motion-fast), background var(--motion-fast);
}

.theme-editor__logo-zone:has(.theme-editor__logo-trigger:hover) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.theme-editor__logo-zone--error {
    border-color: var(--color-error);
}

.theme-editor__logo-trigger {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: var(--space-2);
}

.theme-editor__logo-img {
    max-height: 60px;
    max-width: 200px;
    object-fit: contain;
}

.theme-editor__logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
    pointer-events: none;
}

.theme-editor__logo-clear {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-error-bg);
    color: var(--color-error);
    border: none;
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    transition: background var(--motion-fast), color var(--motion-fast);
    z-index: 1;
}

.theme-editor__logo-clear:hover {
    background: var(--color-error);
    color: white;
}

.theme-editor__logo-error {
    font-size: var(--font-size-xs);
    color: var(--color-error);
    margin-top: var(--space-1);
}

/* ── Mini app-shell preview ─────────────────────────────────────────────── */

.theme-editor__preview-shell {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex: 1;
    min-height: 0;
    max-height: 520px;
    box-shadow: 0 4px 20px oklch(0% 0 0 / 0.07);
}

/* Mini sidebar */
.theme-editor__preview-sidebar {
    width: 136px;
    flex: 0 0 136px;
    background: var(--color-background-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.theme-editor__preview-brand {
    height: 44px;
    flex: 0 0 44px;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 11px;
    overflow: hidden;
}

.theme-editor__preview-brand-mark {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--color-primary);
    color: white;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 10px;
    flex: 0 0 auto;
}

.theme-editor__preview-brand-logo {
    max-height: 24px;
    max-width: 76px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.theme-editor__preview-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--color-text-primary);
}

.theme-editor__preview-nav {
    flex: 1;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.theme-editor__preview-nav-item {
    padding: 5px 10px;
    font-size: 10px;
    border-radius: var(--radius-sm);
    margin: 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-editor__preview-nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    flex: 0 0 auto;
    opacity: 0.35;
}

.theme-editor__preview-nav-item--active {
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-text);
    font-weight: 600;
}

.theme-editor__preview-nav-item--active .theme-editor__preview-nav-dot {
    background: var(--color-primary);
    opacity: 1;
}

.theme-editor__preview-sidebar-user {
    border-top: 1px solid var(--color-border-subtle);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
}

.theme-editor__preview-sidebar-user-info {
    overflow: hidden;
}

/* Mini main area */
.theme-editor__preview-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-background-page);
}

.theme-editor__preview-topbar {
    height: 44px;
    flex: 0 0 44px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background-surface);
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.theme-editor__preview-topbar-title {
    font-family: var(--font-family-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.theme-editor__preview-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-editor__preview-topbar-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    flex: 0 0 auto;
}

.theme-editor__preview-page {
    padding: 14px;
    overflow: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.theme-editor__preview-greeting {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text-primary);
}

.theme-editor__preview-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.theme-editor__preview-kpi {
    background: var(--color-background-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 9px 10px;
}

.theme-editor__preview-kpi-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.theme-editor__preview-kpi-value {
    font-family: var(--font-family-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.1;
}

.theme-editor__preview-kpi-delta {
    font-size: 8px;
    color: var(--color-success);
    font-weight: 500;
    margin-top: 2px;
}

.theme-editor__preview-cta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.theme-editor__preview-feed {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background-surface);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.theme-editor__preview-feed-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

.theme-editor__preview-feed-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-editor__preview-feed-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.theme-editor__preview-feed-dot--primary { background: var(--color-primary); }
.theme-editor__preview-feed-dot--success { background: var(--color-success); }
.theme-editor__preview-feed-dot--warning { background: var(--color-warning, #f59e0b); }

.card--inline {
    background: var(--color-background-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}

.card__title {
    font-weight: 600;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.card__subtitle {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.card__metric {
    font-family: var(--font-family-heading);
    font-size: 18px;
    font-weight: 700;
    margin-top: 2px;
}


/* ---------------------------------------------------------
   Empty State
   Used by EmptyState.razor to fill tables/lists with
   an illustration, explanation, and optional CTA so no
   surface is ever left blank.
   --------------------------------------------------------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-6);
    text-align: center;
}
.empty-state__icon {
    color: var(--color-text-disabled);
    line-height: 1;
}
.empty-state__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}
.empty-state__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 340px;
    line-height: var(--line-height-relaxed);
}


/* ---------------------------------------------------------
   Dashboard Grid
   12-column CSS grid for the dashboard layout.
   --------------------------------------------------------- */

/* 12-column, auto-row CSS grid for the dashboard */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(120px, auto);   /* rows grow with content */
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

/* Widget cell — placed by grid-column / grid-row inline styles */
.dashboard-widget-cell {
    min-width: 0;   /* prevent overflow in narrow grid cells */
    min-height: 0;
}

/* Dashboard selector bar above the grid */
.dashboard-selector {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.dashboard-selector__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}


/* ---------------------------------------------------------
   Avatar — deterministic per-user colour palette
   8 hues; colour-N is chosen by hashing the display name.
   Each class overrides the --avatar-bg / --avatar-text
   variables declared on .avatar so all sizes inherit.
   --------------------------------------------------------- */
/* Solid, vibrant colours — white text on all. Same hue always maps to the
   same user via a display-name char-sum hash in UserAvatar.razor.          */
/* 0 Teal */
.avatar.avatar--color-0 { --avatar-bg: oklch(58% 0.155 185); --avatar-text: #fff; }
/* 1 Indigo */
.avatar.avatar--color-1 { --avatar-bg: oklch(52% 0.200 265); --avatar-text: #fff; }
/* 2 Rose */
.avatar.avatar--color-2 { --avatar-bg: oklch(56% 0.220 18);  --avatar-text: #fff; }
/* 3 Amber  (lighter so white still contrasts) */
.avatar.avatar--color-3 { --avatar-bg: oklch(66% 0.160 55);  --avatar-text: #fff; }
/* 4 Emerald */
.avatar.avatar--color-4 { --avatar-bg: oklch(60% 0.170 155); --avatar-text: #fff; }
/* 5 Violet */
.avatar.avatar--color-5 { --avatar-bg: oklch(52% 0.200 295); --avatar-text: #fff; }
/* 6 Sky */
.avatar.avatar--color-6 { --avatar-bg: oklch(56% 0.180 240); --avatar-text: #fff; }
/* 7 Fuchsia */
.avatar.avatar--color-7 { --avatar-bg: oklch(52% 0.210 330); --avatar-text: #fff; }

/* Dark mode — same hue, slightly lighter for brightness in dark UI */
[data-theme="dark"] .avatar.avatar--color-0 { --avatar-bg: oklch(62% 0.155 185); }
[data-theme="dark"] .avatar.avatar--color-1 { --avatar-bg: oklch(56% 0.200 265); }
[data-theme="dark"] .avatar.avatar--color-2 { --avatar-bg: oklch(60% 0.220 18);  }
[data-theme="dark"] .avatar.avatar--color-3 { --avatar-bg: oklch(70% 0.160 55);  }
[data-theme="dark"] .avatar.avatar--color-4 { --avatar-bg: oklch(64% 0.170 155); }
[data-theme="dark"] .avatar.avatar--color-5 { --avatar-bg: oklch(56% 0.200 295); }
[data-theme="dark"] .avatar.avatar--color-6 { --avatar-bg: oklch(60% 0.180 240); }
[data-theme="dark"] .avatar.avatar--color-7 { --avatar-bg: oklch(56% 0.210 330); }

/* ---------------------------------------------------------
   Breadcrumb — non-URL ancestor node
   --------------------------------------------------------- */
.breadcrumb__node {
    color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   Group Detail — rich header
   --------------------------------------------------------- */
/* Slimmed toward the Approval-Workflows reference header (G2): smaller
   icon tile, tighter padding, lighter name type — the data is the hero.
   Structure (icon / name / description / meta / badges) is preserved so
   the GroupDetailEnhancements E2E hooks still resolve. */
.group-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-background-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.group-header__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    user-select: none;
}

.group-header__body {
    flex: 1;
    min-width: 0;
}

.group-header__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}

.group-header__name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.2;
}

.group-header__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.group-header__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.group-header__meta-sep {
    opacity: 0.4;
}

.group-header__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ---------------------------------------------------------
   Status dot — inline coloured circle for Active / Inactive
   --------------------------------------------------------- */
.status-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
}

.status-dot::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot--active::before   { background: var(--green-500); }
.status-dot--inactive::before { background: var(--color-text-disabled); }
.status-dot--pending::before  { background: var(--color-warning); }

/* ---------------------------------------------------------
   Row actions — "..." overflow menu per table row
   --------------------------------------------------------- */
.row-actions {
    position: relative;
    display: inline-flex;
}

.row-actions__trigger {
    background: transparent;
    border: 0;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    cursor: pointer;
    line-height: 1;
    transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}

.row-actions__trigger:hover {
    background: var(--color-background-sunken);
    color: var(--color-text-primary);
}

.row-actions__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 160px;
    background: var(--color-background-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 4px;
    z-index: 30;
}

.row-actions__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}

.row-actions__item:hover {
    background: var(--color-background-sunken);
}

.row-actions__item--danger {
    color: var(--color-danger);
}

.row-actions__item--danger:hover {
    background: var(--color-danger-soft, oklch(97% 0.02 15));
}

/* The menu is an absolutely-positioned child of the row, so any ancestor with
   a non-visible overflow clips it — which is why the last row's menu was cut
   off at the bottom of the card. Two ancestors do this:

     .card             — overflow: hidden, to clip header/footer fills to the
                         rounded corners.
     .table-responsive — Bootstrap sets overflow-x: auto, and CSS forces the
                         other axis to compute to auto when one axis is not
                         visible, so this clips vertically too.

   :has() scopes the opt-out to exactly the moment a menu is open: the
   .row-actions__menu element is only rendered while its row menu is expanded.
   Corner clipping and horizontal table scrolling are therefore unchanged in
   the normal (closed) state. Order matters — this must stay after the .card
   rule to win on equal specificity if the selectors ever converge. */
.card:has(.row-actions__menu),
.table-responsive:has(.row-actions__menu) {
    overflow: visible;
}

/* ---------------------------------------------------------
   Group Detail — Permissions tab
   3-state segmented control (None / View / Full) + banner
   --------------------------------------------------------- */

/* Segmented control container */
.permission-segmented {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

/* Each button in the segmented control */
.permission-segmented__btn {
    padding: 5px 14px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background: var(--color-background-surface);
    color: var(--color-text-secondary);
    border: none;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}
.permission-segmented__btn + .permission-segmented__btn {
    border-left: 1px solid var(--color-border);
}
.permission-segmented__btn--active {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: var(--font-weight-semibold);
}
.permission-segmented__btn:hover:not(.permission-segmented__btn--active):not(:disabled) {
    background: var(--color-background-sunken);
    color: var(--color-text-primary);
}
.permission-segmented__btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Read-only variant — used to *display* an inherited level (e.g. a user's
   effective permissions, which come from their groups and aren't edited
   here). The active segment stays full-strength; the rest are quietly
   muted; nothing dims or shows a not-allowed cursor. */
.permission-segmented--readonly .permission-segmented__btn:disabled {
    cursor: default;
    opacity: 1;
}
.permission-segmented--readonly .permission-segmented__btn:disabled:not(.permission-segmented__btn--active) {
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   Approval-workflow editor — stage card chrome
   --------------------------------------------------------- */

/* "Stage N" pill in the stage card header */
.stage-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
}

/* Stage header control buttons — distinct affordances by colour:
   reorder (neutral grey), collapse (soft blue), remove (soft red). */
.stage-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    line-height: 1;
    transition: filter var(--motion-fast, 120ms) var(--motion-ease, ease);
}
.stage-ctrl:disabled { opacity: 0.4; cursor: not-allowed; }
.stage-ctrl:not(:disabled):hover { filter: brightness(0.94); }
.stage-ctrl--move   { background: var(--color-background-sunken); color: var(--color-text-secondary); }
.stage-ctrl--toggle { background: oklch(94% 0.03 240);          color: var(--color-text-secondary); }
.stage-ctrl--danger { background: oklch(95% 0.04 25);           color: var(--color-danger); }

/* Permission row — one per subcategory */
.permission-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.permission-row:last-child {
    border-bottom: none;
}
.permission-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.permission-row__name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}
.permission-row__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* "Changed" amber badge */
.badge--changed {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning-bg);
    font-size: 11px;
}

/* Unsaved-changes banner */
.permissions-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.permissions-banner__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--color-warning);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.permissions-banner__body {
    flex: 1;
    min-width: 0;
}
.permissions-banner__title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-warning);
    line-height: 1.3;
}
.permissions-banner__changes {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
.permissions-banner__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ---------------------------------------------------------
   Accessibility — Reduced Motion
   Disables all animations/transitions for users who have
   requested reduced motion at the OS level.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   Auth pages — login, register, password recovery, reset password,
   email confirmation.

   All classes in this block are used exclusively by Pages/Public/Accounts/**
   and share a consistent left-aligned card layout. All values use
   design-system tokens so tenant theming applies automatically.
   ========================================================================= */

/* ---- Outer section: centres the card on the page ---- */
.auth {
    display: flex;
    justify-content: center;
    padding: var(--space-8) var(--space-5);
}

/* ---- Card ------------------------------------------- */
.auth__card {
    background: var(--color-background-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-7);
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ---- Card header ------------------------------------ */
.auth__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Centred variant — status screens (success / expired / error) */
.auth__header--center {
    align-items: center;
    text-align: center;
}

.auth__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.auth__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.auth__description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* ---- Status banners (loading / success / error) ----- */
.auth__banner {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    background: var(--color-background-sunken);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.auth__banner--success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.auth__banner--error {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error);
}

/* ---- Recovery success message (multiple paragraphs) - */
.auth__success {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.auth__success p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* ---- Status icons (check / clock / warning circles) - */
.auth__status-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.auth__status-icon--success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.auth__status-icon--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.auth__status-icon--error {
    background: var(--color-error-bg);
    color: var(--color-error);
}

/* ---- Spinner row (validating state) ----------------- */
.auth__spinner {
    display: flex;
    justify-content: flex-start;
}

/* ---- Back link row ---------------------------------- */
.auth__back {
    display: flex;
    align-items: center;
}

/* ---- Footer links ("Forgot password · Register") ---- */
.auth__links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ---- Form group: label + input + validation --------- */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* Inline field-level errors */
.form-group .field-error,
.form-group .validation-message {
    font-size: var(--font-size-xs);
    color: var(--color-error);
    margin: 0;
}

/* Change-password tab uses .mb-3 field wrappers (not .form-group), so its
   inline <ValidationMessage> output needs the same design-system error styling
   to read as a deliberate field error rather than default black body text. */
.password-form .validation-message {
    font-size: var(--font-size-xs);
    color: var(--color-error);
    margin-top: var(--space-1);
}

/* Form-level error banner — override public.css text-align:center */
.auth .form-error {
    text-align: left;
    font-weight: var(--font-weight-medium);
}

/* ---- Form actions: primary button row --------------- */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Primary action spans the full card width */
.form-actions > * {
    width: 100%;
}

/* ---- Password input with eye-toggle ----------------- */
/*
   The wrapper makes the input + toggle look like one unified
   field. The inner .input surrenders its own border/shadow to
   the wrapper; the wrapper drives focus styling instead.
*/
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Input fills the row; right padding leaves room for the toggle */
.password-wrapper > .input {
    width: 100%;
    padding-right: 2.75rem;
}

/* Suppress the input's own focus ring — the wrapper handles it */
.password-wrapper > .input:focus {
    box-shadow: none;
    border-color: var(--color-border-focus);
}

/* Plain <button class="eye-button"> (Login, Register) */
.eye-button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1rem;
    padding: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    transition: color var(--motion-fast) var(--motion-ease);
}

.eye-button:hover { color: var(--color-text-primary); }

.eye-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* ---- Password rules list (Register + ResetPassword) - */
.password-rules,
.password-policy {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
}

.password-rules__heading {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    list-style: none;
}

.password-rule,
.password-policy li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: color var(--motion-fast) var(--motion-ease);
}

.password-rule--met,
.rule-ok {
    color: var(--color-success);
}

.password-rule--unmet,
.rule-pending {
    color: var(--color-text-muted);
}

.rule-icon {
    flex-shrink: 0;
    width: 1em;
    text-align: center;
    font-size: 0.75rem;
}

/* ---- Mobile adjustments ----------------------------- */
@media (max-width: 480px) {
    .auth {
        padding: var(--space-5) var(--space-4);
    }

    .auth__card {
        padding: var(--space-6) var(--space-5);
        border-radius: var(--radius-md);
        box-shadow: none;
        border-color: transparent;
        max-width: 100%;
    }
}

/* ---- Toasts (app-owned; replaces Blazorise notifications) ---- */
/*
    Rendered by Components/Notifications/Eight28ToastHost.razor, fed by
    Eight28ToastService via IUiNotifier. Deliberately NOT Blazorise — see the
    banner neutraliser below for why. Sits on the --layout-z-toast layer so a
    success/error toast floats above open drawers and modals.
*/
.toast-host {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: var(--layout-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(400px, calc(100vw - var(--space-6)));
    /* The container itself must never block clicks in the gaps between
       toasts — only the toasts re-enable pointer events. */
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-background-elevated);
    box-shadow: var(--shadow-lg);
    color: var(--color-text-primary);
    animation: toastIn 180ms ease-out;
}

/* Bootstrap, in the ABP global.css bundle, shares the .toast class name: it hides every
   .toast without .show (".toast:not(.show) { display: none }") and fixes its width at
   350px, so without this every app toast rendered invisibly. Ours are app-owned and always
   shown at the host's width. Same specificity as Bootstrap's rule and loaded after it (see
   App.razor's stylesheet order), so this wins. */
.toast-host .toast {
    display: flex;
    width: auto;
    max-width: none;
}

.toast--success { border-left: 3px solid var(--color-success-border); }
.toast--error   { border-left: 3px solid var(--color-error-border); }
.toast--warning { border-left: 3px solid var(--color-warning-border); }

.toast__icon {
    flex-shrink: 0;
    display: flex;
    margin-top: 1px;
}

.toast--success .toast__icon { color: var(--color-success); }
.toast--error   .toast__icon { color: var(--color-error); }
.toast--warning .toast__icon { color: var(--color-warning); }

.toast__message {
    flex: 1;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.toast__dismiss {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 150ms ease-out, background 150ms ease-out;
}

.toast__dismiss:hover {
    color: var(--color-text-primary);
    background: var(--color-background-sunken);
}

/* The one action a toast may carry (e.g. "Undo" after an organogram move). */
.toast__action {
    flex-shrink: 0;
    padding: 2px var(--space-2);
    border: none;
    background: transparent;
    color: var(--color-text-link);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 150ms ease-out, background 150ms ease-out;
}

.toast__action:hover {
    color: var(--color-text-link-hover);
    background: var(--color-background-sunken);
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Blazorise license banner (defence-in-depth) ---- */
/*
    The app-owned toast above means the custom shell renders no Blazorise
    component, so the license banner is no longer injected on the pages our
    E2E suite exercises. But Blazorise is still a hard dependency (ABP's
    BasicTheme, Identity, Tenant/Setting/Feature-management modules are all
    Blazorise-based), and a few surfaces still render Blazorise components
    directly — the public Terms/Privacy modals and ABP's own admin pages.

    When any of those mount, Blazorise (2.0, unlicensed — no ProductToken, see
    Eight28BlazorClientModule.ConfigureBlazorise) injects
    #blazorise-license-banner-host into <body> as a fixed, full-viewport layer
    that swallows pointer events. `!important` is required because Blazorise
    sets pointer-events inline on the host, which a plain rule can't override.
    The banner stays visible (the licence notice is not hidden); it simply
    stops blocking clicks. The proper long-term fix is a Blazorise ProductToken.
*/
#blazorise-license-banner-host {
    pointer-events: none !important;
}


/* ---- Contextual help bubbles (UI-HELP-01) --------------- */
/* A help icon after a label, heading or page title that opens a bubble with a definition, a list or
   a rule set. One sentence about a field stays a hint (.input-group__hint); anything longer is a
   bubble. HelpBubble.razor positions the panel fixed (so a scrolling side panel never clips it);
   without its script the panel falls back to sitting below the icon. */
.help-bubble {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: var(--space-1);
}
.help-bubble__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--motion-fast) var(--motion-ease-out), background var(--motion-fast) var(--motion-ease-out);
}
.help-bubble__trigger:hover,
.help-bubble__trigger--open {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}
.help-bubble__trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.help-bubble__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: calc(var(--layout-z-modal) + 5);
    display: block;
    width: max-content;
    max-width: min(360px, calc(100vw - 16px));
    padding: var(--space-3) var(--space-4);
    background: var(--popover-bg);
    border: 1px solid var(--popover-border);
    border-radius: var(--popover-radius);
    box-shadow: var(--popover-shadow);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--line-height-normal, 1.5);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    animation: help-bubble-in var(--motion-fast) var(--motion-ease-out);
}
.help-bubble__panel--placed {
    position: fixed;
}
.help-bubble__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.help-bubble__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}
.help-bubble__close {
    display: inline-flex;
    margin-left: auto;
    padding: 2px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--motion-fast) var(--motion-ease-out), background var(--motion-fast) var(--motion-ease-out);
}
.help-bubble__close:hover {
    color: var(--color-text-primary);
    background: var(--color-background-sunken);
}
.help-bubble__body {
    display: block;
    color: var(--color-text-secondary);
}
.help-bubble__body p { margin: 0 0 var(--space-2); }
.help-bubble__body p:last-child { margin-bottom: 0; }
.help-bubble__body ul { margin: 0; padding-left: var(--space-4); }
.help-bubble__body li + li { margin-top: var(--space-1); }
/* Term + explanation rows: lead statuses, retention rules. */
.help-bubble__terms {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-3);
    margin: 0;
}
.help-bubble__terms dt {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}
.help-bubble__terms dd { margin: 0; }
@keyframes help-bubble-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .help-bubble__panel { animation: none; }
}