/* =========================================================
   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);
    --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: 11px; /* captions / pills */
    --font-size-sm: 13px; /* meta, helper text */
    --font-size-base: 15px; /* 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); }


/* ---- 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);
}
.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 --------------------------------------------- */
.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);
}
.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);
}
.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; }
.modal__body   { padding: var(--space-5); }
.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 */
textarea.input {
    height: auto;
    resize: vertical;
    line-height: var(--line-height-normal, 1.5);
}

/* ---- 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);
}
/* 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;
}

.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);
}

.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;
}

/* ---------- 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); }

/* ---------- Content area ---------- */
.app-shell .content {
    flex: 1;
    padding: var(--space-5) var(--space-6);
    overflow-x: 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
   --------------------------------------------------------- */
.group-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    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: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    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-xl);
    font-weight: var(--font-weight-bold);
    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;
}

.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;
}

.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));
}

/* ---------------------------------------------------------
   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;
}

/* 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;
}

/* ---- Tenant name badge ------------------------------ */
.auth__tenant-badge {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    background: var(--color-background-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
}

/* ---- 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;
}

/* 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;
}

/* E28Button Ghost IconOnly eye-toggle (ResetPassword) */
.password-wrapper > .e28-button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.75rem;
    height: auto;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.password-wrapper > .e28-button:hover:not(:disabled) {
    background: var(--color-background-sunken);
}

/* ---- 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%;
    }
}