/* ========================================
   DESIGN TOKENS - Single Source of Truth
   All semantic colors for the ServiceSeeker brand.
   Dark mode values override automatically via
   Bootstrap 5.3's data-bs-theme attribute.
   ======================================== */

:root {
    /* Chrome heights, so a full-height page can subtract the real layout instead
       of guessing. .top-row is 3.5rem at every width; the bottom bar only exists
       at 640px and below, where mobile.css redefines --ss-bottomnav-h. */
    --ss-topbar-h: 3.5rem;
    --ss-bottomnav-h: 0px;

    /* === Brand Palette — Slate Blue === */
    --ss-primary: #4768A8;
    --ss-primary-hover: #3A5690;
    --ss-primary-light: rgba(71, 104, 168, 0.10);
    --ss-accent: #5B8DB8;
    --ss-accent-hover: #4A7CA6;
    /* Ends on --ss-primary rather than --ss-accent: white text on #5B8DB8 is only
       3.5:1 (fails AA); on #4768A8 it is 5.5:1 and on #3A5690 7.2:1, so labels
       pass at every point along the gradient. Same in dark mode -- the surface is
       dark either way. */
    --ss-brand-gradient: linear-gradient(135deg, #3A5690, #4768A8);

    /* === CTA Accent — Amber (for primary action buttons) === */
    --ss-cta: #D97706;
    --ss-cta-hover: #B45309;
    --ss-cta-light: rgba(217, 119, 6, 0.10);

    /* === Semantic Colors === */
    --ss-success: #198754;
    --ss-success-text: #166534;
    --ss-warning: #ffc107;
    --ss-warning-text: #92400e;
    --ss-danger: #dc3545;
    --ss-danger-text: #b91c1c;
    --ss-info: #0dcaf0;

    /* Tinted panel surfaces — the subtle backgrounds behind semantic
       callouts (upgrade prompts, max-tier notices, table row states).
       Kept as tokens so the tint survives a theme switch instead of
       staying a light block. "-strong" is the deeper chip/badge tint. */
    --ss-warning-surface: #fff8e1;
    --ss-warning-surface-strong: #fef3c7;
    --ss-success-surface: #e8f5ee;
    --ss-success-surface-strong: #d1e7dd;
    --ss-info-surface: #e7f6fa;
    --ss-info-surface-strong: #dbeafe;
    --ss-danger-surface: #fef2f2;
    --ss-danger-surface-strong: #fee2e2;

    /* === Link Colors (derived from primary) === */
    --ss-link: #3A5690;
    --ss-link-hover: #2D4470;

    /* === Surface Colors === */
    --ss-bg-body: #f9fafb;
    --ss-bg-surface: #ffffff;
    --ss-bg-surface-secondary: #f3f4f6;
    --ss-bg-surface-tertiary: #e5e7eb;
    --ss-bg-overlay: rgba(255, 255, 255, 0.95);

    /* === Text Colors ===
       Muted was #6b7280, which measured 4.39:1 on the secondary surface —
       just under the 4.5:1 AA floor. Darkened to clear it on both surfaces. */
    --ss-text-primary: #111827;
    --ss-text-secondary: #4b5563;
    --ss-text-muted: #5b6472;
    /* Text on any surface painted with a hue token that LIGHTENS in dark mode
       (--ss-primary, --ss-accent, --ss-success, --ss-danger, --bs-primary...).
       White in light mode; near-black in dark, where those hues are pastel. */
    --ss-text-on-primary: #ffffff;

    /* === Border Colors === */
    --ss-border: #e5e7eb;
    --ss-border-light: rgba(0, 0, 0, 0.06);
    --ss-border-input: #d1d5db;

    /* === App Chrome (sidebar, top bar, footer) ===
       Kept as tokens so the navigation frame follows the theme. */
    --ss-chrome-gradient: linear-gradient(135deg, #1a2540 0%, #2a3f66 100%);
    --ss-chrome-border: rgba(255, 255, 255, 0.08);

    /* === Focus Indicators (WCAG 2.1 AA) === */
    --ss-focus-ring: #4768A8;
    --ss-focus-ring-alpha: rgba(71, 104, 168, 0.25);

    /* === Form & Validation === */
    --ss-input-bg: #ffffff;
    --ss-input-disabled-bg: #e9ecef;
    --ss-placeholder: #6c6c6c;
    --ss-validation-error-bg: #f8d7da;
    --ss-validation-error-border: #f5c6cb;
    --ss-validation-error-text: #721c24;

    /* === Skeleton Loading === */
    --ss-skeleton-base: #f0f0f0;
    --ss-skeleton-shine: #e0e0e0;

    /* === Constant surfaces ===
       These do not flip. --ss-brand-gradient and --ss-hero-gradient are dark
       enough for white text in both themes, so text on them uses
       --ss-text-on-brand -- never --ss-text-on-primary, which flips. */
    --ss-hero-gradient: linear-gradient(135deg, #1a2540 0%, #3A5690 100%);
    --ss-brand-navy: #1a2540;
    --ss-text-on-brand: #ffffff;

    /* Featured-listing promotion: a product colour, the same in both themes. */
    --ss-featured: #f5576c;
    --ss-featured-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

    /* === Semantic text & borders (completes the -text / -surface sets) === */
    --ss-info-text: #055160;
    --ss-warning-border: #fde68a;
    --ss-success-border: #bbf7d0;
    --ss-info-border: #b6effb;
    --ss-danger-border: #f5c6cb;

    /* === Tooltip: a dark bubble in both themes === */
    --ss-tooltip-bg: #1a2540;
    --ss-tooltip-fg: #ffffff;

    /* === Membership tiers ===
       Shared by TierProgress, TierCelebration, UpgradePrompt and
       MembershipBadge, which each used to carry their own copy. The chips are
       self-contained bg/fg pairs and the gradients carry --ss-text-on-brand,
       so they are constant in both themes. */
    --ss-tier-seeker-bg: #cfe2ff;
    --ss-tier-seeker-fg: #3A5690;
    --ss-tier-owner-bg: #d1e7dd;
    --ss-tier-owner-fg: #0f5132;
    --ss-tier-manager-gradient: linear-gradient(135deg, #6f42c1, #4e3188);
    --ss-tier-pro-gradient: linear-gradient(135deg, #fd7e14, #dc3545);
    --ss-tier-business-gradient: linear-gradient(135deg, #4768A8, #3A5690);
    --ss-tier-commercial-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    /* === Bootstrap Variable Overrides === */
    --bs-primary: #4768A8;
    --bs-primary-rgb: 71, 104, 168;
    --bs-link-color: #3A5690;
    --bs-link-hover-color: #2D4470;
    --bs-link-color-rgb: 58, 86, 144;

    /* ========================================
       TYPOGRAPHY
       System stack: renders Segoe UI Variable on Win11, SF on Apple.
       No webfont request, so no layout shift and no CSP surface.
       ======================================== */
    --ss-font-sans: system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI',
                    Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ss-font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

    /* Type scale — one ratio, so headings stop competing with each other */
    --ss-text-xs: 0.75rem;
    --ss-text-sm: 0.875rem;
    --ss-text-base: 1rem;
    --ss-text-lg: 1.125rem;
    --ss-text-xl: 1.375rem;
    --ss-text-2xl: 1.75rem;
    --ss-text-3xl: 2.25rem;
    --ss-text-4xl: 3rem;

    --ss-leading-tight: 1.2;
    --ss-leading-normal: 1.5;
    --ss-leading-relaxed: 1.65;

    --ss-tracking-tight: -0.02em;
    --ss-tracking-normal: 0;

    /* ========================================
       RADIUS — three steps, replacing ~20 ad-hoc values
       ======================================== */
    --ss-radius-sm: 6px;
    --ss-radius-md: 10px;
    --ss-radius-lg: 16px;
    --ss-radius-pill: 999px;

    /* ========================================
       ELEVATION — layered and tight.
       Modern shadows read as depth, not as a dark smear.
       ======================================== */
    --ss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
    --ss-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.08);
    --ss-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 12px 28px rgba(0, 0, 0, 0.10);
    --ss-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.12);

    /* ========================================
       SPACING — 4px base
       ======================================== */
    --ss-space-1: 0.25rem;
    --ss-space-2: 0.5rem;
    --ss-space-3: 0.75rem;
    --ss-space-4: 1rem;
    --ss-space-5: 1.5rem;
    --ss-space-6: 2rem;
    --ss-space-7: 3rem;
    --ss-space-8: 4rem;
}

[data-bs-theme="dark"] {
    /* === Brand Palette — Slate Blue (Dark) === */
    --ss-primary: #7BA1CC;
    --ss-primary-hover: #9BB8DA;

    /* === Bootstrap Variable Overrides (Dark) === */
    --bs-primary: #7BA1CC;
    --bs-primary-rgb: 123, 161, 204;
    --bs-link-color: #9BB8DA;
    --bs-link-hover-color: #B5CCEB;
    --bs-link-color-rgb: 155, 184, 218;
    --ss-primary-light: rgba(123, 161, 204, 0.12);
    --ss-accent: #8FB4D6;
    --ss-accent-hover: #A5C4E0;

    /* === CTA Accent — Amber (Dark) === */
    --ss-cta: #F59E0B;
    --ss-cta-hover: #FBBF24;
    --ss-cta-light: rgba(245, 158, 11, 0.15);

    /* === Semantic Colors === */
    --ss-success: #75b798;
    --ss-success-text: #86efac;
    --ss-warning: #fcd34d;
    --ss-warning-text: #fcd34d;
    --ss-danger: #fca5a5;
    --ss-danger-text: #fca5a5;
    --ss-info: #67d6ed;

    /* Tinted panel surfaces (dark): a low-alpha wash of the semantic hue
       rather than a light block, so the light text on top still reads. */
    --ss-warning-surface: rgba(252, 211, 77, 0.14);
    --ss-warning-surface-strong: rgba(252, 211, 77, 0.22);
    --ss-success-surface: rgba(117, 183, 152, 0.14);
    --ss-success-surface-strong: rgba(117, 183, 152, 0.22);
    --ss-info-surface: rgba(103, 214, 237, 0.14);
    --ss-info-surface-strong: rgba(103, 214, 237, 0.22);
    --ss-danger-surface: rgba(252, 165, 165, 0.14);
    --ss-danger-surface-strong: rgba(252, 165, 165, 0.22);

    /* === Link Colors === */
    --ss-link: #9BB8DA;
    --ss-link-hover: #B5CCEB;

    /* === Surface Colors === */
    --ss-bg-body: #0f1720;
    --ss-bg-surface: #1a2535;
    --ss-bg-surface-secondary: #263348;
    --ss-bg-surface-tertiary: #35445c;
    --ss-bg-overlay: rgba(15, 23, 32, 0.95);

    /* === Text Colors === */
    --ss-text-primary: #f1f5f9;
    --ss-text-secondary: #cbd5e1;
    --ss-text-muted: #94a3b8;
    --ss-text-on-primary: #0f1720;

    /* === Border Colors === */
    --ss-border: rgba(255, 255, 255, 0.1);
    --ss-border-light: rgba(255, 255, 255, 0.08);
    --ss-border-input: #495057;

    /* === App Chrome (dark) ===
       Deeper and flatter than the light-theme chrome so the navigation frame
       recedes behind content instead of glowing brighter than the page. */
    --ss-chrome-gradient: linear-gradient(135deg, #131c28 0%, #1a2535 100%);
    --ss-chrome-border: rgba(255, 255, 255, 0.10);

    /* === Focus Indicators === */
    --ss-focus-ring: #7BA1CC;
    --ss-focus-ring-alpha: rgba(123, 161, 204, 0.25);

    /* === Form & Validation === */
    --ss-input-bg: #1a2535;
    --ss-input-disabled-bg: #263348;
    --ss-placeholder: #94a3b8;
    --ss-validation-error-bg: rgba(185, 28, 28, 0.2);
    --ss-validation-error-border: rgba(185, 28, 28, 0.4);
    --ss-validation-error-text: #fca5a5;

    /* === Skeleton Loading === */
    --ss-skeleton-base: #1a2535;
    --ss-skeleton-shine: #263348;

    --ss-info-text: #9eeaf9;
    --ss-warning-border: rgba(252, 211, 77, 0.35);
    --ss-success-border: rgba(117, 183, 152, 0.35);
    --ss-info-border: rgba(103, 214, 237, 0.35);
    --ss-danger-border: rgba(252, 165, 165, 0.35);

    --ss-tooltip-bg: #35445c;
    --ss-tooltip-fg: #f1f5f9;

    /* Shadows need more weight on dark surfaces to read as elevation at all. */
    --ss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.24);
    --ss-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.32);
    --ss-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.30), 0 12px 28px rgba(0, 0, 0, 0.38);
    --ss-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.34), 0 24px 48px rgba(0, 0, 0, 0.44);
}

/* ========================================
   BASE STYLES
   ======================================== */

html,
body {
    /* Was 'Helvetica Neue', Helvetica, Arial — which resolves to Arial on Windows,
       the single most dating element on the page. */
    font-family: var(--ss-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--ss-leading-normal);
}

/* Headings: tighter leading and slight negative tracking is what separates a
   2026 UI from a 2015 one at a glance. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: var(--ss-leading-tight);
    letter-spacing: var(--ss-tracking-tight);
    font-weight: 650;
}

/* Numerals in stats/tables should align in columns. */
.stat-value,
.table td,
.table th {
    font-variant-numeric: tabular-nums;
}

/* Bootstrap's .text-muted resolves to --bs-secondary-color, which sits under
   4.5:1 on our surfaces. Point it at the token so it is auditable in one place. */
.text-muted {
    --bs-secondary-color: var(--ss-text-muted);
    color: var(--ss-text-muted) !important;
}

/* ========================================
   BADGE CONTRAST ON LIGHT SEMANTIC HUES

   Bootstrap's .badge sets a white foreground by default, but bg-info
   (#0dcaf0) and bg-warning (#ffc107) are light hues -- white on them
   measures about 1.9:1 and 1.6:1. Both fail in BOTH themes, since the
   badge background does not change with the theme.

   ~49 badges across the app hit this. Fixing it here rather than in each
   markup site also covers future ones. Bootstrap's own .text-bg-* helpers
   use black on these hues; this matches that.

   Excluded: badges that already set their own foreground (text-dark,
   text-info, text-warning-emphasis) or use a reduced-opacity/subtle
   background, where black would be wrong.
   ======================================== */
.badge.bg-info:not([class*="bg-opacity"]):not([class*="text-"]),
.badge.bg-warning:not([class*="bg-opacity"]):not([class*="text-"]) {
    color: #000;
}

/* ========================================
   BOOTSTRAP LIGHT UTILITIES IN DARK MODE

   .bg-white is a hardcoded #fff by design and never flips, and the light
   alert variants keep a near-white subtle background. In dark mode that
   left light text on a light surface: the Tip alert measured 1.04:1 and
   the .bg-white step cards 2.56:1 -- effectively invisible.

   These live in bootstrap.min.css rather than any component <style>
   block, so a component-level sweep can never reach them; the override
   has to be global. !important is required to beat Bootstrap's own.
   ======================================== */

[data-bs-theme="dark"] .bg-white {
    background-color: var(--ss-bg-surface) !important;
    color: var(--ss-text-primary);
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--ss-bg-surface-secondary) !important;
    color: var(--ss-text-primary);
}

/* .text-dark is Bootstrap's #212529 and never flips either. On a surface that
   DOES flip -- .bg-light, .bg-white, or the page itself -- it vanishes in dark
   mode: five public pages, the "Almost There" confirmation and ~40
   bg-light/text-dark chips. On a solid semantic hue that stays light in both
   themes (bg-warning, bg-info) dark text is already right, so those are
   re-asserted straight after. */
[data-bs-theme="dark"] .text-dark {
    color: var(--ss-text-primary) !important;
}

[data-bs-theme="dark"] .text-dark.bg-warning:not([class*="bg-opacity"]),
[data-bs-theme="dark"] .text-dark.bg-info:not([class*="bg-opacity"]),
[data-bs-theme="dark"] .bg-warning:not([class*="bg-opacity"]) .text-dark,
[data-bs-theme="dark"] .bg-info:not([class*="bg-opacity"]) .text-dark {
    color: var(--bs-dark) !important;
}

/* .bg-primary reads --bs-primary-rgb, which the dark palette lightens to
   #7BA1CC so that buttons and links stand out on dark surfaces. As a SURFACE
   under .text-white that is 2.69:1 -- the provider profile hero and ~48 other
   card headers and stat tiles. Scoping the variable to .bg-primary itself
   keeps the surface at the light-theme brand blue (5.3:1 with white) without
   touching anything else that reads --bs-primary. */
[data-bs-theme="dark"] .bg-primary {
    --bs-primary-rgb: 71, 104, 168;
}

[data-bs-theme="dark"] .alert-light,
[data-bs-theme="dark"] .alert-secondary {
    --bs-alert-bg: var(--ss-bg-surface-secondary);
    --bs-alert-color: var(--ss-text-primary);
    --bs-alert-border-color: var(--ss-border);
    background-color: var(--ss-bg-surface-secondary);
    color: var(--ss-text-primary);
    border-color: var(--ss-border);
}

/* Tinted alerts: keep the semantic hue, but as a dark wash so the
   foreground text stays the light end of the pair. */
[data-bs-theme="dark"] .alert-info {
    --bs-alert-bg: rgba(13, 202, 240, 0.12);
    --bs-alert-color: #9eeaf9;
    --bs-alert-border-color: rgba(13, 202, 240, 0.3);
    background-color: rgba(13, 202, 240, 0.12);
    color: #9eeaf9;
    border-color: rgba(13, 202, 240, 0.3);
}

[data-bs-theme="dark"] .alert-success {
    --bs-alert-bg: rgba(25, 135, 84, 0.15);
    --bs-alert-color: #86efac;
    --bs-alert-border-color: rgba(25, 135, 84, 0.35);
    background-color: rgba(25, 135, 84, 0.15);
    color: #86efac;
    border-color: rgba(25, 135, 84, 0.35);
}

[data-bs-theme="dark"] .alert-warning {
    --bs-alert-bg: rgba(255, 193, 7, 0.15);
    --bs-alert-color: #fcd34d;
    --bs-alert-border-color: rgba(255, 193, 7, 0.35);
    background-color: rgba(255, 193, 7, 0.15);
    color: #fcd34d;
    border-color: rgba(255, 193, 7, 0.35);
}

[data-bs-theme="dark"] .alert-danger {
    --bs-alert-bg: rgba(220, 53, 69, 0.15);
    --bs-alert-color: #fca5a5;
    --bs-alert-border-color: rgba(220, 53, 69, 0.35);
    background-color: rgba(220, 53, 69, 0.15);
    color: #fca5a5;
    border-color: rgba(220, 53, 69, 0.35);
}

/* Headings inside alerts inherit the alert colour rather than the page's. */
[data-bs-theme="dark"] .alert h1,
[data-bs-theme="dark"] .alert h2,
[data-bs-theme="dark"] .alert h3,
[data-bs-theme="dark"] .alert h4,
[data-bs-theme="dark"] .alert h5,
[data-bs-theme="dark"] .alert h6,
[data-bs-theme="dark"] .alert strong {
    color: inherit;
}

/* Navigation loading progress bar */
#nav-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #3A5690, #5B8DB8);
    z-index: 9999;
    transition: none;
    opacity: 0;
    pointer-events: none;
}

#nav-progress-bar.loading {
    opacity: 1;
    animation: nav-progress 12s cubic-bezier(0.2, 0.5, 0.1, 1) forwards;
}

#nav-progress-bar.done {
    width: 100% !important;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
    animation: none;
}

@keyframes nav-progress {
    0% {
        width: 0;
    }

    10% {
        width: 25%;
    }

    30% {
        width: 50%;
    }

    50% {
        width: 70%;
    }

    70% {
        width: 85%;
    }

    100% {
        width: 95%;
    }
}

a,
.btn-link {
    color: var(--ss-link);
}

/* Top-bar auth links (Register / Login).
   These render inside <NavLink> child components, which do NOT inherit
   MainLayout's CSS-isolation scope attribute. That makes the scoped
   `.nav-link-topbar { color: rgba(255,255,255,.9) }` rule fail to match,
   so the global `a` colour above won instead -- a mid-navy on the dark
   chrome band, measuring 1.46:1. Must live in global CSS for that reason.
   The chrome band is dark in both themes, so white is correct for both. */
.nav-link-topbar,
.nav-link-topbar:link,
.nav-link-topbar:visited {
    color: #fff;
    text-decoration: none;
}

.nav-link-topbar:hover,
.nav-link-topbar:focus {
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.15);
}

.nav-link-topbar .bi {
    color: inherit;
}

/* The dark palette lightens --ss-primary to a pastel so it reads as text and
   outlines on a dark page; a white label on that pastel fill measured 2.69:1 on
   every filled button, the Log in button included. --ss-text-on-primary is white
   in light mode and near-black in dark. It is set through Bootstrap's own state
   variables because .btn:hover and .btn:active re-apply their colour from those,
   and a plain `color:` here would have been undone the moment the pointer moved. */
.btn-primary {
    --bs-btn-color: var(--ss-text-on-primary);
    --bs-btn-hover-color: var(--ss-text-on-primary);
    --bs-btn-active-color: var(--ss-text-on-primary);
    --bs-btn-disabled-color: var(--ss-text-on-primary);
    /* The background has to follow the text colour: left at Bootstrap's compile-time
       blue, a disabled button in dark mode put near-black text on it (~3.2:1). */
    --bs-btn-disabled-bg: var(--ss-primary);
    --bs-btn-disabled-border-color: var(--ss-primary);
    color: var(--ss-text-on-primary);
    background-color: var(--ss-primary);
    border-color: var(--ss-primary-hover);
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--ss-primary-hover);
    border-color: var(--ss-primary-hover);
}

.btn-outline-primary {
    color: var(--ss-primary);
    border-color: var(--ss-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
    /* Same pastel fill as .btn-primary in dark mode, so the same flipping token. */
    color: var(--ss-text-on-primary);
}

/* Bootstrap gives a disabled outline button its compile-time primary, not the
   token, so in dark mode it dropped back to the light-mode blue (2.80:1). */
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--ss-primary);
    border-color: var(--ss-primary);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    box-shadow: none;
}

.content {
    padding-top: 1.1rem;
}

/* ─── Full-height app surfaces ───────────────────────────────────────────
   A page that fills the window must not compute its own height from the
   viewport: it sits below .top-row AND inside .content's 1.1rem padding, so
   any arithmetic has to know both and silently breaks the moment either
   changes. That is how the chat input ended up overhanging the bottom of the
   window by exactly that 1.1rem.

   Instead, let flex measure it. main becomes a column, .content takes the
   slack, and the page fills .content. The only term left is the mobile bottom
   bar, which is position:fixed and therefore out of flow - nothing can measure
   it, so it stays a subtraction.

   Scoped with :has() so no other page's layout is touched. A page opts in
   by putting .full-height-page on its root element. */
main:has(.chat-page, .full-height-page) {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--ss-bottomnav-h));
    overflow: hidden;
}

main:has(.chat-page, .full-height-page) > .top-row {
    flex: 0 0 auto;
}

main:has(.chat-page, .full-height-page) > .content {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* A marketing footer under a full-height chat surface only creates a scrollbar
   the user has to fight. */
main:has(.chat-page, .full-height-page) > .site-footer {
    display: none;
}

/* Suppress focus outline on the main content landmark.
   This element has tabindex="-1" for skip-link and enhanced-navigation
   focus management (accessibility.js) and only receives programmatic
   focus — never user-initiated keyboard focus. without this, browsers
   briefly flash a default outline during SSR → interactive hydration. */
#main-content[tabindex="-1"]:focus,
#main-content[tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Headings only receive programmatic focus (Blazor enhanced navigation,
   skip-link, accessibility.js) — never user-initiated keyboard-tab focus.
   Suppress visible outline to prevent the "blue border flash" on page load
   while keeping them focusable for screen readers. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible,
h2[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus-visible,
h3[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* ========================================
   VALIDATION SUMMARY - User-Friendly Wrapper
   Shows helpful header text when validation errors exist
   ======================================== */
.validation-errors-container:has(.validation-errors:not(:empty)),
.validation-errors-container:has(ul.validation-errors li) {
    background-color: var(--ss-validation-error-bg);
    border: 1px solid var(--ss-validation-error-border);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.validation-errors-container:has(.validation-errors:not(:empty))::before,
.validation-errors-container:has(ul.validation-errors li)::before {
    content: "Please check the following:";
    display: block;
    font-weight: 600;
    color: var(--ss-validation-error-text);
    margin-bottom: 0.5rem;
}

.validation-errors-container .validation-errors {
    margin-bottom: 0;
    color: var(--ss-validation-error-text);
}

.validation-errors-container .validation-errors li {
    color: var(--ss-validation-error-text);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ========================================
   TOP BAR ICON BUTTONS (Global)
   ======================================== */
.top-icon-btn,
button.top-icon-btn,
a.top-icon-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    color: white !important;
    font-size: 1.25rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    /* Reset button defaults - preserve focus-visible styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.top-icon-btn:hover,
button.top-icon-btn:hover,
a.top-icon-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05);
    color: white !important;
    text-decoration: none;
}

/* Focus-visible styles for top icon buttons are handled in the
   WCAG 2.1 AA Accessibility section (.top-icon-btn:focus-visible) */

/* Logout button - slightly different color */
.top-icon-btn.logout-btn {
    background: rgba(255, 100, 100, 0.2) !important;
    border: 1px solid rgba(255, 100, 100, 0.4) !important;
}

.top-icon-btn.logout-btn:hover {
    background: rgba(255, 100, 100, 0.35) !important;
    border-color: rgba(255, 100, 100, 0.6) !important;
}

/* Notification badge */
.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    /* #ff4444 gave white text 3.41:1 at 0.7rem; #c82333 gives 5.61:1. */
    background: #c82333;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    border: 2px solid #5B8DB8;
}

@media (max-width: 640px) {
    .top-icon-btn {
        padding: 0.4rem 0.6rem !important;
        font-size: 1.1rem !important;
        /* WCAG 2.1 AA: Ensure minimum 44x44px touch target on mobile */
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}

/* ========================================
   NOTIFICATION SYSTEM STYLES
   ======================================== */

/* Notification List (inside glass-card) */
.notification-list {
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: start;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
    border-bottom: 1px solid var(--ss-border-light);
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.notification-item.unread {
    background: rgba(71, 104, 168, 0.06);
    border-left: 4px solid #4768A8;
}

/* Priority indicator (slim bar on left edge) */
.notification-priority {
    width: 3px;
    min-height: 100%;
    border-radius: 2px;
    margin-right: 0.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.notification-priority i {
    display: none;
}

.notification-priority.priority-urgent {
    background: #dc3545;
}

.notification-priority.priority-urgent i {
    color: #dc3545;
}

.notification-priority.priority-high {
    background: #fd7e14;
}

.notification-priority.priority-high i {
    color: #fd7e14;
}

.notification-priority.priority-normal {
    background: #4768A8;
}

.notification-priority.priority-normal i {
    color: #4768A8;
}

.notification-priority.priority-low {
    background: #6c757d;
}

.notification-priority.priority-low i {
    color: #6c757d;
}

.notification-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: var(--ss-text-secondary);
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-subject {
    font-weight: 600;
    color: var(--ss-text-primary);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.unread-dot {
    width: 8px;
    height: 8px;
    background: #4768A8;
    border-radius: 50%;
    flex-shrink: 0;
}

.notification-message {
    color: var(--ss-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.notification-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--ss-text-muted);
}

.notification-time,
.notification-category {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.notification-actions-btn {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: 1rem;
}

.notification-actions-btn .btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
}

/* Notification filter pills (inside glass-card) */
.glass-card .nav-pills .nav-link {
    border-radius: 2rem;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.glass-card .nav-pills .nav-link.active {
    background-color: var(--bs-primary);
}

.glass-card .nav-pills .nav-link .badge {
    font-size: 0.7rem;
}

/* Responsive */
@media (max-width: 768px) {
    .notification-list {
        max-height: calc(100vh - 400px);
    }

    .notification-item {
        flex-direction: column;
        gap: 0.75rem;
    }

    .notification-actions-btn {
        margin-left: 0;
        width: 100%;
    }
}

/* ========================================
   NOTIFICATION PREFERENCES STYLES
   ======================================== */

.notification-preferences {
    max-width: 1000px;
    margin: 0 auto;
}

.preferences-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--ss-border);
}

.preferences-header h2 {
    margin: 0;
    font-size: 1.75rem;
    color: var(--ss-text-primary);
}

.preferences-info {
    margin-bottom: 2rem;
}

.preference-category {
    margin-bottom: 2.5rem;
}

.category-title {
    font-size: 1.3rem;
    color: var(--ss-text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ss-border);
}

.preference-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.preference-item {
    background: var(--ss-bg-surface);
    border: 1px solid var(--ss-border-input);
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.2s;
}

.preference-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.preference-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.preference-info {
    flex: 1;
}

.preference-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--ss-text-primary);
    cursor: pointer;
    font-size: 1rem;
}

.preference-name input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.preference-description {
    display: block;
    color: var(--ss-text-secondary);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    margin-left: 2rem;
}

.preference-channels {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ss-border);
    flex-wrap: wrap;
}

.channels-label {
    font-size: 0.9rem;
    color: var(--ss-text-secondary);
    font-weight: 500;
}

.channel-options {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.channel-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ss-text-secondary);
}

.channel-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.channel-option:hover {
    color: var(--ss-primary);
}

.saving-indicator {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--ss-bg-surface);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--ss-text-secondary);
}

.save-success {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--ss-success-surface-strong);
    color: var(--ss-success-text);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

/* Responsive Preferences */
@media (max-width: 768px) {
    .preferences-header {
        flex-direction: column;
        align-items: start;
        gap: 1rem;
    }

    .preference-channels {
        flex-direction: column;
        align-items: start;
    }

    .channel-options {
        width: 100%;
    }
}

/* ========================================
   SKELETON LOADING ANIMATION (Global)
   ======================================== */

.skeleton {
    background: linear-gradient(90deg, var(--ss-skeleton-base) 25%, var(--ss-skeleton-shine) 50%, var(--ss-skeleton-base) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ========================================
   GLASSMORPHISM PAGE STYLES (Shared)
   Premium gradient backgrounds with glass effects
   ======================================== */

/* Page wrapper.
   Was a 6-stop gradient running #1a2540 -> #f9fafb across 65% of the
   viewport. That washed out to a mid-blue behind the content, which is
   what pushed white text to ~3:1, and it forced every child section to
   override its colours. The colour now lives in .glass-page-header
   instead, so the canvas stays calm and readable. */
.glass-page {
    background: var(--ss-bg-body);
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* Extend full-bleed pages to fill content area edge-to-edge, eliminating
   background color gaps between sidebar/navbar and the slate blue gradient */
.content>.glass-page,
.content>.home-page,
.content>.help-center {
    margin-top: -1.1rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

@media (max-width: 576px) {

    .content>.glass-page,
    .content>.home-page,
    .content>.help-center {
        margin-top: -0.75rem;
    }
}

@media (min-width: 641px) {

    .content>.glass-page,
    .content>.home-page,
    .content>.help-center {
        margin-left: -2rem;
    }
}

/* Add internal padding to compensate for negative margins */
.glass-page>.container,
.home-page>.container,
.help-center>.container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 641px) {

    .glass-page>.container,
    .home-page>.container,
    .help-center>.container {
        padding-left: 2rem;
        padding-right: 1.5rem;
    }
}

/* Glass page header section */
/* The header now carries the brand colour itself as a contained band.
   Previously it was a translucent white wash that only read correctly
   because a dark gradient sat behind it, so it needed backdrop-filter;
   that dependency (and the compositing cost) is gone. */
.glass-page-header {
    position: relative;
    background: linear-gradient(135deg, #1a2540 0%, #3A5690 100%);
    border-bottom: none;
    padding: 2rem 0;
    margin-bottom: 2rem;
}

/* Subtle bottom separator — only visible once the glass-page gradient has painted.
   Uses a pseudo-element with a delayed fade-in to avoid the "border flash" during
   Blazor's SSR-to-interactive handoff where the gradient hasn't loaded yet. */
.glass-page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    animation: glassHeaderBorderFadeIn 0.1s ease-out 0.3s both;
}

@keyframes glassHeaderBorderFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.glass-page-header h1,
.glass-page-header h2,
.glass-page-header h3 {
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.glass-page-header .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.glass-page-header .breadcrumb-item,
.glass-page-header .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7);
}

.glass-page-header .breadcrumb-item.active {
    color: white;
}

.glass-page-header .badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Glass card - Main content cards */
.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 20px 40px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 30px 50px -15px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

/* Glass card - compact variant */
.glass-card-sm {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.glass-card-sm:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.25);
}

/* Card body and footer padding within glass cards */
.glass-card-sm .card-body {
    padding: 1.25rem;
    flex: 1;
}

.glass-card-sm .card-footer {
    padding: 1rem 1.25rem;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.glass-card .card-body {
    padding: 1.5rem;
}

.glass-card .card-footer {
    padding: 1.25rem 1.5rem;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Glass section - translucent background sections */
.glass-section {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
}

.glass-section h1,
.glass-section h2,
.glass-section h3,
.glass-section h4,
.glass-section h5,
.glass-section h6 {
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.glass-section p,
.glass-section span,
.glass-section label {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.glass-section .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Glass content area - for main content on glass pages */
.glass-content {
    color: var(--ss-text-primary);
}

/* Glass page title styling */
.glass-page-title {
    color: white;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.glass-page-subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
}

/* Glass stat cards - for dashboard statistics */
/* These were written when .glass-page was a dark six-stop gradient. Commit
   33d5c833 made it var(--ss-bg-body) - a light canvas - and left the rules
   behind, so the customer dashboard's four stat tiles, ProjectList's tiles and
   RecurringSchedules' tiles were white-on-white in light mode, which is the
   default for most users. Dark mode kept working because its overrides below
   still assume a dark surface, which is now true only there. */
.glass-stat-card {
    background: var(--ss-bg-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid var(--ss-border);
    box-shadow: var(--ss-shadow-sm);
    padding: 1.5rem;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.glass-stat-card:hover {
    transform: translateY(-2px);
    background: var(--ss-bg-surface-secondary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.glass-stat-card h6,
.glass-stat-card .card-subtitle {
    color: var(--ss-text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.glass-stat-card h2,
.glass-stat-card .stat-value {
    color: var(--ss-text-primary);
    font-weight: 700;
}

/* Glass button styling */
.glass-page .btn-primary {
    background: linear-gradient(135deg, #3A5690 0%, #4768A8 100%);
    border: none;
    /* This gradient is the fixed brand blue in both themes, so the label must NOT
       follow --ss-text-on-primary (which goes dark with the theme): re-assert the
       non-flipping brand token for every state. */
    --bs-btn-color: var(--ss-text-on-brand);
    --bs-btn-hover-color: var(--ss-text-on-brand);
    --bs-btn-active-color: var(--ss-text-on-brand);
    color: var(--ss-text-on-brand);
    box-shadow: 0 4px 15px rgba(58, 86, 144, 0.4);
}

.glass-page .btn-primary:hover {
    background: linear-gradient(135deg, #4768A8 0%, #5B8DB8 100%);
    box-shadow: 0 6px 20px rgba(58, 86, 144, 0.5);
    transform: translateY(-1px);
}

/* White outline buttons belong on the dark bands only - the page header and the
   chat surface, both of which keep a fixed dark gradient. On the light page body
   they were invisible: "View All Requests" on the customer dashboard and "Clear
   Filters" inside ProjectList's empty state (EmptyState is neither .glass-card
   nor .card, so the card exception below never rescued it). */
.glass-page .btn-outline-primary {
    border-color: var(--ss-primary);
    color: var(--ss-primary);
}

.glass-page .btn-outline-primary:hover {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: #ffffff;
}

.glass-page-header .btn-outline-primary,
.chat-page .btn-outline-primary {
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
}

.glass-page-header .btn-outline-primary:hover,
.chat-page .btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
    color: white;
}

/* Buttons inside glass-card/glass-card-sm need standard visible styling (not white-on-white) */
.glass-card .btn-outline-primary,
.glass-card-sm .btn-outline-primary {
    border-color: var(--ss-primary);
    color: var(--ss-primary);
}

.glass-card .btn-outline-primary:hover,
.glass-card-sm .btn-outline-primary:hover {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: white;
}

/* Buttons inside regular cards on glass pages need standard visible styling (not white-on-white) */
.glass-page .card .btn-outline-primary {
    border-color: var(--ss-primary);
    color: var(--ss-primary);
}

.glass-page .card .btn-outline-primary:hover {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: white;
}

/* Glass page alerts.
   This used to force EVERY alert inside a glass page to 95% white,
   regardless of theme and regardless of the alert's own variant. In dark
   mode that put light text on a near-white pill at 1.04:1, and it also
   flattened semantic variants (info/success/warning) to the same white.
   Alerts now keep their own variant colours; only the radius is shared. */
.glass-page .alert {
    border-radius: var(--ss-radius-md);
}

/* Empty state on glass pages */
.glass-page .empty-state-container,
.glass-page .empty-state {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
}

/* Dark mode adjustments for glass pages.
   --ss-bg-body already flips, so the canvas needs no gradient here; the
   header band is darkened instead to sit below the content surfaces. */
[data-bs-theme="dark"] .glass-page {
    background: var(--ss-bg-body);
}

[data-bs-theme="dark"] .glass-page-header {
    background: linear-gradient(135deg, #0d1420 0%, #1a2540 100%);
}

[data-bs-theme="dark"] .glass-card,
[data-bs-theme="dark"] .glass-card-sm {
    background: rgba(26, 37, 53, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-page .empty-state-container,
[data-bs-theme="dark"] .glass-page .empty-state {
    background: rgba(26, 37, 53, 0.95);
}

[data-bs-theme="dark"] .glass-card h5,
[data-bs-theme="dark"] .glass-card h6,
[data-bs-theme="dark"] .glass-card-sm h5,
[data-bs-theme="dark"] .glass-card-sm h6 {
    color: var(--ss-text-primary);
}

/* Dark mode for glass-card form elements and text */
[data-bs-theme="dark"] .glass-card .form-label,
[data-bs-theme="dark"] .glass-card-sm .form-label {
    color: var(--ss-text-primary);
}

[data-bs-theme="dark"] .glass-card .form-text,
[data-bs-theme="dark"] .glass-card-sm .form-text {
    color: var(--ss-text-muted);
}

[data-bs-theme="dark"] .glass-card h4,
[data-bs-theme="dark"] .glass-card small,
[data-bs-theme="dark"] .glass-card-sm h4,
[data-bs-theme="dark"] .glass-card-sm small {
    color: var(--ss-text-primary);
}

[data-bs-theme="dark"] .glass-card .text-muted,
[data-bs-theme="dark"] .glass-card-sm .text-muted {
    color: var(--ss-text-muted) !important;
}

[data-bs-theme="dark"] .glass-card .card-footer,
[data-bs-theme="dark"] .glass-card-sm .card-footer {
    border-top-color: var(--ss-border);
}

[data-bs-theme="dark"] .glass-card-sm .card-text,
[data-bs-theme="dark"] .glass-card-sm p {
    color: var(--ss-text-secondary);
}

/* Standard Bootstrap card styling within glass pages */
.glass-page .card .card-body {
    padding: 1.25rem;
}

.glass-page .card .card-footer {
    padding: 1rem 1.25rem;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .glass-page .card .card-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-card .list-group-item {
    background-color: var(--ss-bg-surface);
    border-color: var(--ss-border);
    color: var(--ss-text-primary);
}

[data-bs-theme="dark"] .glass-card .list-group-item:hover {
    background-color: var(--ss-bg-surface-secondary);
}

[data-bs-theme="dark"] .glass-card .card-body {
    color: var(--ss-text-primary);
}

/* Dark mode buttons inside glass-card - use lighter colors for visibility */
[data-bs-theme="dark"] .glass-card .btn-outline-primary {
    border-color: var(--ss-accent);
    color: var(--ss-accent);
}

[data-bs-theme="dark"] .glass-card .btn-outline-primary:hover {
    background: var(--ss-accent);
    border-color: var(--ss-accent);
    color: var(--ss-text-on-primary);
}

/* Dark mode buttons inside regular cards on glass pages */
[data-bs-theme="dark"] .glass-page .card .btn-outline-primary {
    border-color: var(--ss-accent);
    color: var(--ss-accent);
}

[data-bs-theme="dark"] .glass-page .card .btn-outline-primary:hover {
    background: var(--ss-accent);
    border-color: var(--ss-accent);
    color: var(--ss-text-on-primary);
}

/* Dark mode for standard Bootstrap cards (inside glass-page) */
[data-bs-theme="dark"] .glass-page .card,
[data-bs-theme="dark"] .glass-section .card {
    background-color: var(--ss-bg-surface);
    border-color: var(--ss-border);
}

[data-bs-theme="dark"] .glass-page .card h5,
[data-bs-theme="dark"] .glass-page .card h6,
[data-bs-theme="dark"] .glass-page .card .card-title,
[data-bs-theme="dark"] .glass-section .card h5,
[data-bs-theme="dark"] .glass-section .card h6,
[data-bs-theme="dark"] .glass-section .card .card-title {
    color: var(--ss-text-primary);
}

[data-bs-theme="dark"] .glass-page .card .text-muted,
[data-bs-theme="dark"] .glass-section .card .text-muted,
[data-bs-theme="dark"] .glass-page .card small,
[data-bs-theme="dark"] .glass-section .card small {
    color: var(--ss-text-muted) !important;
}

[data-bs-theme="dark"] .glass-page .card .card-text,
[data-bs-theme="dark"] .glass-section .card .card-text {
    color: var(--ss-text-secondary);
}

[data-bs-theme="dark"] .glass-stat-card {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-stat-card:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .glass-stat-card h6,
[data-bs-theme="dark"] .glass-stat-card .card-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .glass-stat-card h2,
[data-bs-theme="dark"] .glass-stat-card .stat-value {
    color: #ffffff;
}

/* Stat icon styling for glass cards */
.stat-icon-glass {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-stat-card:hover .stat-icon-glass {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Glass page nav tabs. Tokenised for the light canvas the page actually has -
   the customer dashboard's five tabs were white-on-white. The dark overrides
   further down still handle dark mode. */
.glass-page .nav-tabs {
    background: var(--ss-bg-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 0.5rem;
    border: 1px solid var(--ss-border);
    box-shadow: var(--ss-shadow-sm);
}

.glass-page .nav-tabs .nav-link {
    color: var(--ss-text-secondary);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.glass-page .nav-tabs .nav-link:hover {
    color: var(--ss-text-primary);
    background-color: var(--ss-bg-surface-secondary);
}

.glass-page .nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: var(--ss-primary);
    border-bottom: none;
    font-weight: 600;
}

/* The tab strip has to scroll rather than wrap on a phone. */
.glass-page .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
}

[data-bs-theme="dark"] .glass-page .nav-tabs {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-page .nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] .glass-page .nav-tabs .nav-link:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-page .nav-tabs .nav-link.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
}

/* ========================================
   DARK MODE FORM STYLES
   ======================================== */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control-plaintext {
    background-color: var(--ss-input-bg);
    color: var(--ss-text-primary);
    border-color: var(--ss-border-input);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--ss-placeholder);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--ss-input-bg);
    color: var(--ss-text-primary);
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem var(--ss-focus-ring-alpha);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: var(--ss-input-disabled-bg);
    color: var(--ss-text-muted);
    border-color: #5a6268;
    opacity: 1;
}

[data-bs-theme="dark"] .input-group-text {
    background-color: #212529;
    color: var(--ss-text-primary);
    border-color: var(--ss-border-input);
}

/* Fix for profile section headers in dark mode if needed, though they use gradients */
[data-bs-theme="dark"] .section-body,
[data-bs-theme="dark"] .profile-section-footer {
    background-color: var(--ss-bg-surface);
    color: var(--ss-text-primary);
    border-color: var(--ss-border-input);
}

[data-bs-theme="dark"] .profile-section {
    border-color: var(--ss-border-input);
}

/* ========================================
   WCAG 2.1 AA ACCESSIBILITY STYLES
   Skip Links, Focus Indicators, Color Contrast
   ======================================== */

/* Skip Link - Hidden until focused for keyboard navigation */
.skip-link {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--ss-primary);
    color: #ffffff;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}

.skip-link:hover {
    background: #1557a0;
    color: #ffffff;
}

/* Visually Hidden - For screen reader only content */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Visually Hidden but focusable */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ========================================
   ENHANCED FOCUS INDICATORS - WCAG 2.1 AA
   Minimum 3:1 contrast ratio for focus indicators
   ======================================== */

/* Global focus outline for all interactive elements */
*:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Remove default focus outline for elements with custom focus styles */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Links - Enhanced focus state */
a:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    text-decoration: underline;
    background-color: rgba(0, 102, 204, 0.1);
}

/* Buttons - Enhanced focus state */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ss-focus-ring-alpha);
}

/* Form inputs - Enhanced focus state */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 0;
    border-color: var(--ss-focus-ring);
    box-shadow: 0 0 0 3px var(--ss-focus-ring-alpha);
}

/* Checkbox and Radio - Enhanced focus state */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ss-focus-ring-alpha);
}

/* Cards and clickable containers */
.card:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
}

/* Navigation links */
.nav-link:focus-visible,
.navbar-nav .nav-link:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Dark background focus indicators */
.sidebar .nav-link:focus-visible,
.top-row a:focus-visible,
.top-row button:focus-visible,
.top-icon-btn:focus-visible {
    outline: 3px solid #ffc107 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.3) !important;
}

/* Modal focus trap indicator */
.modal:focus-visible,
[role="dialog"]:focus-visible {
    outline: none;
}

.modal .btn-close:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ss-focus-ring-alpha);
}

/* Dropdown items */
.dropdown-item:focus-visible {
    outline: 2px solid var(--ss-focus-ring);
    outline-offset: -2px;
    background-color: var(--ss-bg-surface-secondary);
}

/* ========================================
   COLOR CONTRAST IMPROVEMENTS - WCAG 2.1 AA
   Minimum 4.5:1 for normal text, 3:1 for large text
   ======================================== */

/* Ensure sufficient contrast for muted text */
.text-muted {
    color: var(--ss-text-muted) !important;
}

/* High contrast placeholder text */
::placeholder {
    color: var(--ss-placeholder);
    opacity: 1;
}

/* Improved link colors for contrast */
a {
    color: var(--ss-link);
}

a:hover {
    color: var(--ss-link-hover);
}

/* Form validation messages - high contrast */
.validation-message,
.invalid-feedback,
.text-danger {
    color: var(--ss-danger-text) !important;
}

/* Success text - improved contrast */
.text-success {
    color: var(--ss-success-text) !important;
}

/* Warning text - improved contrast */
.text-warning {
    color: var(--ss-warning-text) !important;
}

/* Badge accessibility - ensure contrast */
.badge {
    font-weight: 600;
}

.badge.bg-secondary {
    background-color: #4b5563 !important;
    color: #ffffff !important;
}

.badge.bg-light {
    background-color: #e5e7eb !important;
    color: #1f2937 !important;
}

/* Disabled state - clear visual indication */
button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   KEYBOARD NAVIGATION IMPROVEMENTS
   ======================================== */

/* Focus within containers */
.card:focus-within,
.list-group-item:focus-within {
    box-shadow: 0 0 0 2px var(--ss-focus-ring);
}

/* Keyboard-accessible tooltips */
/* Exclude collapse-toggle which uses native title tooltip */
[data-tooltip]:focus::after,
[title]:focus::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Tooltip arrow pointing down */
[data-tooltip]:focus::before,
[title]:focus::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
    z-index: 1100;
    pointer-events: none;
}

/* Elements with title need relative positioning for tooltip */
[title]:focus,
[data-tooltip]:focus {
    position: relative;
}

.collapse-toggle:focus::after,
.collapse-toggle:focus::before {
    content: none;
}

/* Tab panel focus management */
[role="tabpanel"]:focus {
    outline: 2px solid var(--ss-focus-ring);
    outline-offset: -2px;
}

/* Accordion focus management */
.accordion-button:focus-visible {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: -3px;
    box-shadow: none;
    z-index: 3;
}

/* ========================================
   MOTION PREFERENCES - Reduce Motion
   ======================================== */

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

    .skip-link {
        transition: none;
    }
}

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   ======================================== */

@media (prefers-contrast: high) {
    *:focus-visible {
        outline: 3px solid currentColor !important;
        outline-offset: 3px;
    }

    a {
        text-decoration: underline;
    }

    button,
    .btn {
        border: 2px solid currentColor !important;
    }

    .card {
        border: 2px solid currentColor !important;
    }
}

/* ========================================
   ARIA LIVE REGIONS STYLING
   ======================================== */

/* Status messages container - off-screen but accessible */
[aria-live="polite"],
[aria-live="assertive"],
[role="status"],
[role="alert"] {
    /* Ensure content is accessible to screen readers */
}

/* Alert styling for visible alerts */
.alert[role="alert"] {
    border-left: 4px solid currentColor;
}

.alert-danger[role="alert"] {
    border-left-color: #dc3545;
}

.alert-success[role="alert"] {
    border-left-color: #198754;
}

.alert-warning[role="alert"] {
    border-left-color: #ffc107;
}

.alert-info[role="alert"] {
    border-left-color: #0dcaf0;
}

/* ========================================
   FORM ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Required field indicator */
.required-indicator,
label .text-danger {
    color: var(--ss-danger-text);
    font-weight: 600;
}

/* Error state - clear visual indication */
.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--ss-danger-text);
    border-width: 2px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23b91c1c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23b91c1c' stroke='none'/%3e%3c/svg%3e");
}

.is-invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--ss-danger-text);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.25);
}

/* Success state - clear visual indication */
.is-valid,
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--ss-success-text);
    border-width: 2px;
}

/* Help text accessibility */
.form-text {
    color: var(--ss-text-muted);
    font-size: 0.875rem;
}

/* ========================================
   TABLE ACCESSIBILITY
   ======================================== */

/* Table header contrast */
.table thead th {
    background-color: var(--ss-bg-surface-tertiary);
    color: var(--ss-text-primary);
    font-weight: 600;
}

/* Table row focus */
.table tbody tr:focus-within {
    outline: 2px solid var(--ss-focus-ring);
    outline-offset: -2px;
}

/* Sortable column indicator */
.table th[aria-sort] {
    cursor: pointer;
}

.table th[aria-sort="ascending"]::after {
    content: " ▲";
    font-size: 0.75em;
}

.table th[aria-sort="descending"]::after {
    content: " ▼";
    font-size: 0.75em;
}

/* ========================================
   PROGRESS STEPS COMPONENT
   Multi-step workflow progress indicator
   ======================================== */

.progress-steps-wrapper {
    margin-bottom: 1.5rem;
}

/* Mobile summary bar */
.progress-steps-summary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.98));
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.progress-steps-summary .summary-text {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.progress-steps-summary .summary-progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}

.progress-steps-summary .summary-progress .progress-bar {
    background: linear-gradient(90deg, #4768A8, #3A5690);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Full step list (tablet and up) */
.progress-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.98));
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Step indicator circle */
.step-indicator {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 3px solid var(--ss-border-input);
    background-color: var(--ss-bg-surface);
    color: var(--ss-text-secondary);
    position: relative;
    z-index: 2;
}

.step-indicator .step-number {
    line-height: 1;
}

.step-indicator i {
    font-size: 1.1rem;
}

/* Step content (label and description) */
.step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.75rem;
    text-align: center;
    max-width: 120px;
}

.step-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ss-text-primary);
    line-height: 1.3;
}

.step-description {
    font-size: 0.75rem;
    color: var(--ss-text-secondary);
    margin-top: 0.25rem;
    line-height: 1.3;
}

/* Connector line between steps */
.step-connector {
    position: absolute;
    top: 22px;
    left: calc(50% + 26px);
    right: calc(-50% + 26px);
    height: 3px;
    z-index: 1;
}

.connector-line {
    width: 100%;
    height: 100%;
    background-color: var(--ss-border-input);
    transition: background-color 0.3s ease;
}

.connector-line.completed {
    background-color: #198754;
}

/* Step states */
.progress-step.completed .step-indicator {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}

.progress-step.completed .step-label {
    color: #198754;
}

.progress-step.active .step-indicator {
    background-color: #4768A8;
    border-color: #4768A8;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(71, 104, 168, 0.25);
}

.progress-step.active .step-label {
    color: #4768A8;
    font-weight: 700;
}

.progress-step.pending .step-indicator {
    background-color: var(--ss-bg-surface-secondary);
    border-color: var(--ss-border-input);
    color: var(--ss-text-muted);
}

.progress-step.pending .step-label {
    color: var(--ss-text-muted);
}

/* Clickable completed steps */
.progress-step.clickable {
    cursor: pointer;
}

.progress-step.clickable:hover .step-indicator {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.25);
}

.progress-step.clickable:focus {
    outline: none;
}

.progress-step.clickable:focus .step-indicator {
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.4);
}

/* Vertical layout */
.progress-steps-wrapper.vertical .progress-steps-list {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
}

.progress-steps-wrapper.vertical .progress-step {
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    padding: 0.5rem 0;
}

.progress-steps-wrapper.vertical .step-content {
    align-items: flex-start;
    text-align: left;
    margin-top: 0;
    margin-left: 1rem;
    max-width: none;
}

.progress-steps-wrapper.vertical .step-connector {
    position: absolute;
    top: calc(44px + 0.5rem);
    left: 22px;
    right: auto;
    width: 3px;
    height: calc(100% - 44px + 1rem);
}

.progress-steps-wrapper.vertical .connector-line {
    height: 100%;
    width: 100%;
}

/* Dark mode support */
[data-bs-theme="dark"] .progress-steps-summary,
[data-bs-theme="dark"] .progress-steps-list {
    background: linear-gradient(135deg, rgba(33, 37, 41, 0.95), rgba(52, 58, 64, 0.98));
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .progress-steps-summary .summary-progress {
    background-color: var(--ss-border-input);
}

/* step-indicator uses --ss-border-input, --ss-bg-surface, --ss-text-secondary tokens
   which auto-adapt to dark mode — no explicit override needed */

/* step-label and step-description use --ss-text-primary/secondary tokens
   which auto-adapt to dark mode — no explicit override needed */

/* connector-line uses --ss-border-input token — auto-adapts to dark mode */

[data-bs-theme="dark"] .progress-step.completed .step-indicator {
    background-color: #198754;
    border-color: #198754;
}

[data-bs-theme="dark"] .progress-step.completed .step-label {
    color: #75b798;
}

[data-bs-theme="dark"] .progress-step.active .step-indicator {
    background-color: #4768A8;
    border-color: #4768A8;
}

[data-bs-theme="dark"] .progress-step.active .step-label {
    color: #6ea8fe;
}

/* pending step uses base tokens — auto-adapts to dark mode */

/* Accessibility - focus indicators */
.progress-step:focus-visible .step-indicator {
    outline: 3px solid var(--ss-focus-ring);
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .step-indicator {
        border-width: 4px;
    }

    .progress-step.completed .step-indicator {
        background-color: #006400;
        border-color: #006400;
    }

    .progress-step.active .step-indicator {
        background-color: #0000cd;
        border-color: #0000cd;
    }

    .connector-line.completed {
        background-color: #006400;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .step-indicator,
    .connector-line,
    .progress-bar {
        transition: none;
    }

    .progress-step.clickable:hover .step-indicator {
        transform: none;
    }
}

/* ========================================
   MOBILE TOUCH TARGET ACCESSIBILITY
   WCAG 2.5.5: Minimum 44x44px touch targets
   ======================================== */

@media (max-width: 768px) {

    .btn-sm,
    .btn-close,
    .pagination .page-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        padding: 0.5rem 0.75rem;
    }

    /* Ensure icon-only buttons meet touch target requirements */
    .btn-sm:has(> i:only-child),
    .btn-sm:has(> .bi:only-child) {
        min-width: 44px;
        min-height: 44px;
    }

    /* Ensure adequate spacing between adjacent touch targets */
    .btn-group>.btn-sm {
        margin: 2px;
    }
}

/* ============================================
   SIDEBAR COLLAPSE - DESKTOP ONLY
   Must be in global CSS because JavaScript adds
   the .collapsed class dynamically
   ============================================ */
@media (min-width: 641px) {
    .sidebar.collapsed {
        width: 70px;
    }

    .sidebar.collapsed .brand-container {
        padding: 0.5rem;
        justify-content: center;
    }

    .sidebar.collapsed .navbar-brand,
    .sidebar.collapsed .nav-section-label,
    .sidebar.collapsed .nav-text,
    .sidebar.collapsed .nav-badge,
    .sidebar.collapsed .nav-mode-indicator-text,
    .sidebar.collapsed .business-identity,
    .sidebar.collapsed .ms-2 {
        display: none !important;
    }

    .sidebar.collapsed .brand-logo {
        margin: 0;
    }

    .sidebar.collapsed .nav-item {
        padding: 0.15rem 0.5rem;
    }

    .sidebar.collapsed .nav-item .nav-link {
        justify-content: center;
        padding: 0.65rem;
    }

    .sidebar.collapsed .bi {
        margin-right: 0;
    }

    .sidebar.collapsed .nav-mode-indicator {
        justify-content: center;
        padding: 0.35rem 0.5rem;
    }

    .sidebar.collapsed .nav-section-divider {
        margin: 0.5rem 0.5rem;
    }

    .sidebar.collapsed .collapse-toggle {
        margin: 0.25rem auto;
    }

    /* Tooltip for collapsed nav items - shows menu text on hover */
    .sidebar.collapsed .nav-item .nav-link {
        position: relative;
    }

    .sidebar.collapsed .nav-item .nav-link::after {
        content: attr(title);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(135deg, #1a2540 0%, #2a3f66 100%);
        color: white;
        padding: 0.5rem 0.875rem;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 1100;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        pointer-events: none;
    }

    /* Arrow pointing to the icon */
    .sidebar.collapsed .nav-item .nav-link::before {
        content: '';
        position: absolute;
        left: calc(100% + 2px);
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-right-color: #1a2540;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 1100;
    }

    .sidebar.collapsed .nav-item .nav-link:hover::after,
    .sidebar.collapsed .nav-item .nav-link:focus::after {
        opacity: 1;
        visibility: visible;
    }

    .sidebar.collapsed .nav-item .nav-link:hover::before,
    .sidebar.collapsed .nav-item .nav-link:focus::before {
        opacity: 1;
        visibility: visible;
    }
}

/* ========================================
   DESIGN TOKEN UTILITY CLASSES
   Reusable classes for common inline-style
   patterns that need dark mode awareness.
   ======================================== */

/* Surface backgrounds — use instead of inline background: white / #f8f9fa */
.bg-surface {
    background-color: var(--ss-bg-surface);
}

.bg-surface-secondary {
    background-color: var(--ss-bg-surface-secondary);
}

.bg-surface-tertiary {
    background-color: var(--ss-bg-surface-tertiary);
}

/* Text colors — use instead of inline color: #1f2937 / #6b7280 */
.text-surface-primary {
    color: var(--ss-text-primary);
}

.text-surface-secondary {
    color: var(--ss-text-secondary);
}

/* Border — use instead of inline border-color: #e9ecef / #dee2e6 */
.border-themed {
    border-color: var(--ss-border) !important;
}

/* Modal backdrop — replaces 30+ inline style="background-color: rgba(0,0,0,0.5)" */
.modal-backdrop-custom {
    background-color: rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Blazor Circuit Reconnect UI Override
   Hide the default "Attempting to reconnect" modal — our JS in
   inactivityWarning.js auto-reloads the page instead.
   ============================================================ */
#components-reconnect-modal {
    display: none !important;
}

/* ============================================================
   PWA install prompt banner
   Shown by js/pwa-install.js when beforeinstallprompt fires.
   ============================================================ */
#pwa-install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1080;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(140%);
    transition: transform 0.25s ease-out;
}

#pwa-install-banner.pwa-install-banner-visible {
    transform: translateY(0);
}

#pwa-install-banner .pwa-install-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    flex: 1 1 220px;
}

#pwa-install-banner .pwa-install-text strong {
    font-size: 0.95rem;
}

#pwa-install-banner .pwa-install-text span {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

#pwa-install-banner .pwa-install-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

@media (min-width: 576px) {
    #pwa-install-banner {
        left: auto;
        right: 16px;
        bottom: 16px;
        max-width: 420px;
    }
}
/* ========================================
   ADDRESS AUTOCOMPLETE SUGGESTIONS
   ========================================
   Rendered by wwwroot/js/photonAutocomplete.js. These styles used to be applied
   as inline styles from that script, which meant they always won over the
   stylesheet and could not follow the theme: the panel stayed white while the
   primary line inherited the dark theme's light body text, leaving the street
   address effectively invisible. The script now only toggles visibility.
   ======================================== */

.photon-suggestions {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    /* Five rows at ~80px each; 300px hid the fifth result behind a scrollbar
       for the default result count. Capped at half the viewport on short phones. */
    max-height: min(420px, 50vh);
    overflow-y: auto;
    z-index: 1055;
    background: var(--ss-bg-surface);
    border: 1px solid var(--ss-border-input);
    border-top: none;
    border-radius: 0 0 var(--ss-radius-md) var(--ss-radius-md);
    box-shadow: var(--ss-shadow-md);
}

.photon-suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--ss-border-light);
}

.photon-suggestion-item:last-child {
    border-bottom: none;
}

/* Mouse hover and the keyboard cursor (aria-activedescendant) share one look. */
.photon-suggestion-item:hover,
.photon-suggestion-item.is-active {
    background-color: var(--ss-bg-surface-secondary);
}

/* Non-interactive rows: "Searching…", "No addresses found", lookup errors. */
.photon-suggestion-empty {
    padding: 10px 12px;
    color: var(--ss-text-muted);
    font-size: 0.9rem;
}

.photon-suggestion-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The street address is the line the user scans for -- it needs full contrast. */
.photon-suggestion-primary {
    font-weight: 500;
    color: var(--ss-text-primary);
}

.photon-suggestion-secondary {
    font-size: 0.85rem;
    color: var(--ss-text-secondary);
}

/* ─── Google Places autocomplete input ───────────────────────────────────
   addressAutocomplete.js used to inject these from JavaScript with a white
   background and Bootstrap-blue focus ring hardcoded, which no theme rule could
   reach. Same rules, read from the tokens. */
gmp-place-autocomplete {
    width: 100% !important;
}

gmp-place-autocomplete input {
    width: 100% !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    border: 1px solid var(--ss-border-input) !important;
    border-radius: 0.375rem !important;
    background-color: var(--ss-input-bg) !important;
    color: var(--ss-text-primary) !important;
}

gmp-place-autocomplete input:focus {
    border-color: var(--ss-focus-ring) !important;
    box-shadow: 0 0 0 0.25rem var(--ss-focus-ring-alpha) !important;
    outline: none !important;
}

/* ─── Third-party sign-in buttons ────────────────────────────────────────
   theme-exempt-start: these follow Google's, LinkedIn's, Facebook's and
   Microsoft's own button specifications, which are fixed colours by design.
   They were copied into four components; this is the one copy. */
.btn-google-official {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1f1f1f;
    background-color: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-google-official:hover {
    background-color: #f8faff;
    border-color: #c4c7cc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.btn-google-official:focus {
    outline: none;
    border-color: #4285f4;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}

.btn-google-official:active {
    background-color: #f1f3f4;
}

.btn-linkedin-official {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    color: #ffffff;
    background-color: #0a66c2;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn-linkedin-official:hover {
    background-color: #004182;
    box-shadow: 0 2px 8px rgba(10, 102, 194, 0.35);
}

.btn-linkedin-official:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.3);
}

.btn-linkedin-official:active {
    background-color: #00376e;
}

.btn-facebook-official {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    color: #ffffff;
    background-color: #1877f2;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn-facebook-official:hover {
    background-color: #166fe5;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.35);
}

.btn-facebook-official:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.3);
}

.btn-facebook-official:active {
    background-color: #1469d8;
}

.btn-microsoft-official {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    color: #ffffff;
    background-color: #2f2f2f;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn-microsoft-official:hover {
    background-color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.btn-microsoft-official:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.3);
}

.btn-microsoft-official:active {
    background-color: #0f0f0f;
}

.btn-google-official svg,
.btn-linkedin-official svg,
.btn-facebook-official svg,
.btn-microsoft-official svg {
    flex-shrink: 0;
}
/* theme-exempt-end */

/* The fallback for a provider without a brand spec is ours, so it follows the theme. */
.btn-oauth-generic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ss-text-on-primary);
    background-color: var(--ss-text-muted);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-oauth-generic:hover {
    background-color: var(--ss-text-secondary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ─── Circuit reconnect banner (js/inactivityWarning.js) ────────────────
   Replaces Blazor's blocking modal (hidden above). Sits above the mobile
   bottom bar, reads in both themes, never covers the page. */
#ss-reconnect-banner {
    position: fixed;
    left: 50%;
    bottom: calc(var(--ss-bottomnav-h) + 1rem);
    transform: translateX(-50%);
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(100% - 2rem);
    padding: 0.6rem 1rem;
    border-radius: var(--ss-radius-pill);
    background: var(--ss-tooltip-bg);
    color: var(--ss-tooltip-fg);
    box-shadow: var(--ss-shadow-lg);
    font-size: var(--ss-text-sm);
}

#ss-reconnect-banner.reconnecting::before {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ss-spin 0.8s linear infinite;
}

#ss-reconnect-banner.lost {
    background: var(--ss-danger);
    color: var(--ss-text-on-primary);
}

#ss-reconnect-banner button {
    flex-shrink: 0;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: var(--ss-radius-pill);
    padding: 0.2rem 0.7rem;
    font: inherit;
}

@keyframes ss-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #ss-reconnect-banner.reconnecting::before { animation: none; }
}

/* ─── Admin chrome ───────────────────────────────────────────────────────
   Every admin page carried its own copy of these rules; twelve copies of
   the same page header. One copy here, scoped with :where() so it carries the
   same specificity as the originals: a page that kept its own rule still wins
   by source order, exactly as before. */
:where(.admin-layout) .page-header {
    margin-bottom: 1.5rem;
}

:where(.admin-layout) .page-header h1 {
    color: var(--ss-text-primary);
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

:where(.admin-layout) .page-subtitle {
    color: var(--ss-text-muted);
    margin: 0;
}

:where(.admin-layout) .loading-state {
    text-align: center;
    padding: 3rem;
}

:where(.admin-layout) .filter-group {
    min-width: 150px;
}

:where(.admin-layout) .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--ss-bg-surface);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ─── Backup codes ───────────────────────────────────────────────────────
   Shown once, on a phone, then copied or downloaded; big enough to read back. */
.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem;
}

.recovery-codes .recovery-code {
    display: block;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ss-border);
    border-radius: 0.375rem;
    background: var(--ss-bg-surface-secondary);
    color: var(--ss-text-primary);
    font-size: 1rem;
    text-align: center;
    user-select: all;
}