/* ════════════════════════════════════════════════════════
   AMS ENTERPRISE  ·  DESIGN SYSTEM  ·  v2.0
   ════════════════════════════════════════════════════════ */

/* ── Component Imports ────────────────────────────────── */
@import url('finance.css');
@import url('agency-dashboard.css');

/* ── 1. Design Tokens ─────────────────────────────────── */
:root {
    /* Brand palette */
    --brand-50:  #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;

    /* ── Agency Dashboard tokens (shared across all /tenant/dashboard/* pages) ── */
    --ad-blue:        #3b82f6;
    --ad-blue-dark:   #1d4ed8;
    --ad-blue-pale:   #dbeafe;
    --ad-blue-bg:     #eff6ff;
    --ad-green:       #10b981;
    --ad-green-dark:  #047857;
    --ad-green-pale:  #d1fae5;
    --ad-green-bg:    #ecfdf5;
    --ad-purple:      #8b5cf6;
    --ad-purple-dark: #6d28d9;
    --ad-purple-pale: #ede9fe;
    --ad-purple-bg:   #f5f3ff;
    --ad-amber:       #f59e0b;
    --ad-amber-dark:  #b45309;
    --ad-amber-pale:  #fef3c7;
    --ad-amber-bg:    #fffbeb;
    --ad-red:         #ef4444;
    --ad-red-dark:    #dc2626;
    --ad-red-pale:    #fee2e2;
    --ad-red-bg:      #fef2f2;
    --ad-indigo:      #6366f1;
    --ad-indigo-dark: #4338ca;
    --ad-indigo-pale: #e0e7ff;
    --ad-indigo-bg:   #eef2ff;
    --ad-teal:        #14b8a6;
    --ad-teal-dark:   #0f766e;
    --ad-teal-pale:   #ccfbf1;
    --ad-teal-bg:     #f0fdfa;
    --ad-orange:      #f97316;
    --ad-orange-dark: #c2410c;
    --ad-orange-pale: #ffedd5;
    --ad-orange-bg:   #fff7ed;
    --ad-surface:     #ffffff;
    --ad-surface-alt: #f8fafc;
    --ad-border:      #e8edf5;
    --ad-border-dark: #d1d9e6;
    --ad-text-1:      #0f172a;
    --ad-text-2:      #374151;
    --ad-text-3:      #6b7280;
    --ad-text-4:      #9ca3af;
    --ad-shadow-xs:   0 1px 2px rgba(15,23,42,.04);
    --ad-shadow-sm:   0 2px 8px rgba(15,23,42,.07);
    --ad-shadow-md:   0 4px 20px rgba(15,23,42,.10);
    --ad-shadow-lg:   0 8px 32px rgba(15,23,42,.14);
    --ad-radius:      12px;
    --ad-radius-sm:   8px;
    --ad-radius-xs:   6px;
    --ad-gap:         1rem;

    /* Sidebar */
    --nav-bg:           #0d1526;
    --nav-hover:        #172035;
    --nav-active:       #1e2f52;
    --nav-border:       rgba(255, 255, 255, .07);
    --nav-text:         #8fa3bf;
    --nav-text-hover:   #d1dded;
    --nav-section-text: #4a6384;
    --nav-w:            260px;
    --nav-w-min:        64px;

    /* Header */
    --header-bg:     #ffffff;
    --header-h:      56px;
    --header-border: #e8edf5;
    --shadow-header: 0 1px 3px rgba(15,23,66,.06), 0 1px 2px rgba(15,23,66,.04);

    /* Content */
    --content-bg:  #f0f4fa;
    --content-pad: 1.5rem;

    /* Surfaces */
    --surface-card:   #ffffff;
    --surface-raised: #f8fafc;
    --surface-input:  #f9fafc;
    --surface-hover:  #f3f6fb;

    /* Text */
    --text-primary:     #111827;
    --text-secondary:   #4b5563;
    --text-tertiary:    #6b7280;
    --text-muted:       #9ca3af;
    --text-disabled:    #d1d5db;
    --text-placeholder: #b0b9c8;

    /* Borders */
    --border-color: #e5eaf3;
    --border-dark:  #cbd5e1;

    /* Semantic */
    --success:    #059669;  --success-bg: #ecfdf5;
    --warning:    #d97706;  --warning-bg: #fffbeb;
    --danger:     #dc2626;  --danger-bg:  #fef2f2;
    --info:       #2563eb;  --info-bg:    #eff6ff;

    /* Radii */
    --r-sm:   5px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-2xl:  20px;
    --r-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.09);
    --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
    --shadow-xl: 0 16px 48px rgba(0,0,0,.16);

    /* Typography */
    --font:      'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Cascadia Code', 'Consolas', monospace;
    --text-2xs:  .6875rem;
    --text-xs:   .75rem;
    --text-sm:   .8125rem;
    --text-md:   .875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;

    /* Spacing scale */
    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
    --sp-4: 1rem;    --sp-5: 1.25rem; --sp-6: 1.5rem;
    --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;

    /* Z-index stack */
    --z-nav:      200;
    --z-header:   300;
    --z-dropdown: 400;
    --z-modal:    600;
    --z-toast:    700;

    /* Muted surface (used by components) */
    --surface-muted: #f1f5f9;

    /* Semantic variant colors (light defaults) */
    --green-subtle:   #dcfce7;  --green-fg:   #166534;
    --amber-subtle:   #fef9c3;  --amber-fg:   #92400e;
    --red-subtle:     #fee2e2;  --red-fg:     #991b1b;
    --blue-subtle:    #dbeafe;  --blue-fg:    #1e40af;
    --purple-subtle:  #f3e8ff;  --purple-fg:  #6b21a8;

    /* ── User Module (um-) aliases for compatibility ──── */
    --um-primary: var(--brand-600);
    --um-primary-pale: var(--brand-50);
    --um-surface: var(--surface-card);
    --um-surface-raised: var(--surface-raised);
    --um-surface-hover: var(--surface-hover);
    --um-text-primary: var(--text-primary);
    --um-text-secondary: var(--text-secondary);
    --um-text-tertiary: var(--text-tertiary);
    --um-text-muted: var(--text-muted);
    --um-border: var(--border-color);
}

/* ── Dark theme — auto (OS preference) + manual toggle ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --content-bg:     #0f1117;
        --surface-card:   #1a1d27;
        --surface-raised: #22263a;
        --surface-input:  #1e2130;
        --surface-hover:  #252940;
        --surface-muted:  #2a2f45;

        --border-color:   #2e3348;
        --border-dark:    #3d4460;

        --text-primary:   #f1f5f9;
        --text-secondary: #94a3b8;
        --text-tertiary:  #64748b;
        --text-muted:     #64748b;
        --text-disabled:  #3d4460;

        --header-bg:      #1a1d27;
        --header-border:  #2e3348;

        --success-bg:     rgba(5,  150, 105, .15);
        --warning-bg:     rgba(217,119,  6,  .12);
        --danger-bg:      rgba(220, 38,  38, .15);
        --info-bg:        rgba(37,  99,  235, .15);

        --brand-100:      rgba(59, 130, 246, .18);
        --brand-200:      rgba(59, 130, 246, .30);

        /* Semantic variant colors (dark) */
        --green-subtle:   rgba(34,  197,  94, .15);  --green-fg:   #86efac;
        --amber-subtle:   rgba(251, 191,  36, .12);  --amber-fg:   #fde68a;
        --red-subtle:     rgba(239,  68,  68, .15);  --red-fg:     #fca5a5;
        --blue-subtle:    rgba(59,  130, 246, .18);  --blue-fg:    #93c5fd;
        --purple-subtle:  rgba(167, 139, 250, .15);  --purple-fg:  #d8b4fe;

        /* ── User Module (um-) aliases for dark mode ─── */
        --um-primary: var(--brand-600);
        --um-primary-pale: rgba(59, 130, 246, .18);
        --um-surface: var(--surface-card);
        --um-surface-raised: var(--surface-raised);
        --um-surface-hover: var(--surface-hover);
        --um-text-primary: var(--text-primary);
        --um-text-secondary: var(--text-secondary);
        --um-text-tertiary: var(--text-tertiary);
        --um-text-muted: var(--text-muted);
        --um-border: var(--border-color);
    }
}

/* Manual override — force dark regardless of OS */
[data-theme="dark"] {
    --content-bg:     #0f1117;
    --surface-card:   #1a1d27;
    --surface-raised: #22263a;
    --surface-input:  #1e2130;
    --surface-hover:  #252940;
    --surface-muted:  #2a2f45;

    --border-color:   #2e3348;
    --border-dark:    #3d4460;

    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary:  #64748b;
    --text-muted:     #64748b;
    --text-disabled:  #3d4460;

    --header-bg:      #1a1d27;
    --header-border:  #2e3348;

    --success-bg:     rgba(5,  150, 105, .15);
    --warning-bg:     rgba(217,119,  6,  .12);
    --danger-bg:      rgba(220, 38,  38, .15);
    --info-bg:        rgba(37,  99,  235, .15);

    --brand-100:      rgba(59, 130, 246, .18);
    --brand-200:      rgba(59, 130, 246, .30);

    --green-subtle:   rgba(34,  197,  94, .15);  --green-fg:   #86efac;
    --amber-subtle:   rgba(251, 191,  36, .12);  --amber-fg:   #fde68a;
    --red-subtle:     rgba(239,  68,  68, .15);  --red-fg:     #fca5a5;
    --blue-subtle:    rgba(59,  130, 246, .18);  --blue-fg:    #93c5fd;
    --purple-subtle:  rgba(167, 139, 250, .15);  --purple-fg:  #d8b4fe;

    /* ── User Module (um-) aliases for manual dark mode ─ */
    --um-primary: var(--brand-600);
    --um-primary-pale: rgba(59, 130, 246, .18);
    --um-surface: var(--surface-card);
    --um-surface-raised: var(--surface-raised);
    --um-surface-hover: var(--surface-hover);
    --um-text-primary: var(--text-primary);
    --um-text-secondary: var(--text-secondary);
    --um-text-tertiary: var(--text-tertiary);
    --um-text-muted: var(--text-muted);
    --um-border: var(--border-color);
}

/* ── 2. Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: var(--text-md);
    color: var(--text-primary);
    background: var(--content-bg);
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg  { display: block; max-width: 100%; }
button    { cursor: pointer; font-family: inherit; }
a         { color: var(--brand-600); }

/* ── Sidebar NavLink anchor overrides ─────────────────────
   Blazor CSS isolation does not propagate scope attributes
   to the <a> element rendered inside NavLink, so these rules
   are placed here with an ID-selector to guarantee they win.
   ────────────────────────────────────────────────────────── */
#ams-nav a,
#ams-nav a:visited {
    color: var(--nav-text);          /* readable on dark nav bg */
    text-decoration: none;
}

#ams-nav a.nav-brand,
#ams-nav a.nav-brand:visited {
    color: inherit;
    text-decoration: none;
}

/* Shared layout for any <a> used as a nav row */
#ams-nav a.nav-group-hd,
#ams-nav a.nav-item-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-left: 2px solid transparent;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    transition: background .15s, color .15s, border-left-color .15s;
}

/* Dashboard top-level link — same indent as group buttons */
#ams-nav a.nav-group-hd {
    padding: 7px 10px;
}

/* Sub-items — indented under their group header */
#ams-nav a.nav-item-sub {
    padding: 5px 12px 5px 36px;
}

#ams-nav a.nav-item-sub.nav-subgroup-hd {
    padding-left: 34px;
}

#ams-nav a.nav-item-sub.nav-item-deep {
    padding-left: 58px;
}

/* Hover */
#ams-nav a.nav-group-hd:hover,
#ams-nav a.nav-item-sub:hover {
    background: rgba(255,255,255,.04);
    color: var(--nav-text-hover);
}
#ams-nav a.nav-group-hd:hover .nav-icon,
#ams-nav a.nav-item-sub:hover .nav-icon {
    background: rgba(255,255,255,.1);
    color: var(--nav-text-hover);
}

/* Active — Blazor NavLink adds class="active" automatically */
#ams-nav a.nav-group-hd.active {
    color: var(--nav-text-hover);
    border-left-color: var(--brand-500);
    background: rgba(37,99,235,.12);
}
#ams-nav a.nav-group-hd.active .nav-icon {
    background: rgba(59,130,246,.22);
    color: #93c5fd;
}

#ams-nav a.nav-item-sub.active {
    color: #bfdbfe;
    background: rgba(37,99,235,.12);
    border-left-color: var(--brand-500);
}
#ams-nav a.nav-item-sub.active .nav-icon {
    background: rgba(59,130,246,.22);
    color: #93c5fd;
}

/* ── 3. Accessibility ─────────────────────────────────── */
/* WCAG 2.4.7 — visible focus */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* SR-only helper */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── 4. Card ──────────────────────────────────────────── */
.card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid var(--border-color);
}
.card-title  { font-size: var(--text-base); font-weight: 600; margin: 0; }
.card-body   { padding: var(--sp-6); }
.card-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border-color);
    background: var(--surface-raised);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* ── 5. KPI cards ─────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.kpi-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-xl);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    display: flex; align-items: flex-start; gap: var(--sp-4);
    transition: box-shadow .18s, transform .18s;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-card--clickable { cursor: pointer; text-decoration: none; display: flex; }

.kpi-icon {
    width: 44px; height: 44px;
    border-radius: var(--r-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.kpi-icon-blue   { background: #dbeafe; color: var(--brand-600); }
.kpi-icon-green  { background: #d1fae5; color: #059669; }
.kpi-icon-amber  { background: #fef3c7; color: #d97706; }
.kpi-icon-red    { background: #fee2e2; color: #dc2626; }
.kpi-icon-purple { background: #ede9fe; color: #7c3aed; }
.kpi-icon-teal   { background: #ccfbf1; color: #0d9488; }

.kpi-body  { flex: 1; min-width: 0; }
.kpi-label { font-size: var(--text-xs);  font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi-value { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); line-height: 1.15; }
.kpi-meta  { font-size: var(--text-xs);  color: var(--text-muted); margin-top: 2px; }
.kpi-up    { color: var(--success); }
.kpi-down  { color: var(--danger);  }

/* ── 6. Page header ───────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-5) var(--sp-6) var(--sp-4);
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}
.aph-left         { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.aph-title-row    { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.aph-icon         {
    width: 40px; height: 40px; border-radius: var(--r-lg);
    background: var(--brand-50); color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
    border: 1px solid var(--brand-100);
}
.aph-breadcrumb   { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 2px; }
.page-title       { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.25; }
.page-subtitle    { font-size: var(--text-sm); color: var(--text-muted); margin: 2px 0 0; }
.page-actions     { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; flex-shrink: 0; }

/* ── 7. Toolbar ───────────────────────────────────────── */
.toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
}
.toolbar > * { flex: 0 0 auto; }
.toolbar .um-search-box { flex: 1 1 18rem; min-width: min(18rem, 100%); }
.toolbar-end { margin-left: auto; display: flex; gap: var(--sp-2); flex: 0 0 auto; }
/* legacy alias kept for backward compat */
.toolbar-row  { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overflow-y: visible; }

/* ── Page content wrapper ─────────────────────────────── */
.page-content {
    padding: 0 var(--content-pad) var(--content-pad);
}

/* ── Section label ────────────────────────────────────── */
.section-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin: var(--sp-5) 0 var(--sp-2);
}

/* ── 8. Badges ────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--r-full);
    font-size: var(--text-xs); font-weight: 600; line-height: 1.6;
}
.badge-blue    { background: var(--brand-100); color: var(--brand-800); }
.badge-green   { background: #d1fae5; color: #065f46; }
.badge-amber   { background: #fef3c7; color: #92400e; }
.badge-red     { background: #fee2e2; color: #991b1b; }
.badge-neutral { background: var(--surface-raised); color: var(--text-secondary); border: 1px solid var(--border-color); }

/* ── 9. Form shell ────────────────────────────────────── */
.form-shell {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
}
.form-grid  { display: grid; grid-template-columns: 1fr 1fr;       gap: var(--sp-4); }
.form-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr;   gap: var(--sp-4); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

label {
    display: block;
    font-size: var(--text-sm); font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--sp-1);
}
.field-hint  { font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }
.field-error { font-size: var(--text-xs); color: var(--danger);     margin-top: 3px; }
.pf-optional { font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; margin-left: var(--sp-1); }

/* ── 11. Responsive breakpoints ───────────────────────── */
@media (max-width: 1024px) {
    .form-grid3 { grid-template-columns: 1fr 1fr; }
    .span-3     { grid-column: span 2; }
}

@media (max-width: 768px) {
    :root { --content-pad: 1rem; }
    .form-grid, .form-grid3 { grid-template-columns: 1fr; }
    .span-2, .span-3 { grid-column: span 1; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .page-header { flex-direction: column; }
}

@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; }
}

/* ── 12. Custom scrollbar ─────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.13); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.22); }

/* ── 13. Utility classes ──────────────────────────────── */
.mt-0 { margin-top: 0; }          .mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }        .mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.gap-2 { gap: var(--sp-2); }       .gap-4 { gap: var(--sp-4); }
.flex  { display: flex; }          .flex-col { flex-direction: column; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; }
.text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); }
.text-muted { color: var(--text-muted); }
.font-semibold { font-weight: 600; }    .font-bold { font-weight: 700; }

/* ── 14. Legacy aliases (keeps existing pages working) ── */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.kpi-card .kpi-label { font-size: .9rem; color: #64748b; }
.kpi-card .kpi-value { font-size: 2rem; font-weight: 700; margin: .5rem 0; }
.kpi-card .kpi-sub   { color: #475569; }
.toolbar-row  { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.form-control { width: 100%; padding: .65rem .75rem; border-radius: 8px; border: 1px solid #cbd5e1; }
.mt-3         { margin-top: 1rem; }

/* ════════════════════════════════════════════════════════
   15. Shared Tab Styles  (User Management Module)
   ════════════════════════════════════════════════════════ */

/* ── Tab section wrapper ─────────────────────────────── */
.tab-section {
    padding: var(--sp-5) var(--sp-6);
    min-height: 200px;
}

/* ── Tab header ──────────────────────────────────────── */
.ts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border-color);
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.ts-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.ts-header-right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

/* ── Loading / empty states ──────────────────────────── */
.ts-loading {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.ts-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-top-color: var(--brand-500);
    border-radius: 50%;
    animation: ts-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes ts-spin { to { transform: rotate(360deg); } }
.ts-spin {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ts-spin .7s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
.ts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-10) var(--sp-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
}
.ts-empty i { font-size: 2rem; opacity: .45; }

/* ── Info display grid ───────────────────────────────── */
.ts-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-6);
}
.ts-info-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.ts-section-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
    padding-left: var(--sp-3);
    border-left: 3px solid var(--brand-400);
}

/* ── Definition list ─────────────────────────────────── */
.ts-dl {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.ts-dl-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-color);
    align-items: baseline;
}
.ts-dl-row:last-child { border-bottom: none; }
.ts-dl-row dt {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    margin: 0;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ts-dl-row dd {
    font-size: var(--text-sm);
    color: var(--text-primary);
    margin: 0;
    word-break: break-word;
}
.ts-id {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    background: var(--surface-raised);
    padding: 1px 5px;
    border-radius: var(--r-sm);
}
.ts-dl-row dd a              { color: var(--brand-600); text-decoration: none; }
.ts-dl-row dd a:hover        { color: var(--brand-700); text-decoration: underline; }

/* ── Edit form ───────────────────────────────────────── */
.ts-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-width: 720px;
}
.ts-edit-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
}
.ts-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ts-edit-btn:hover { background: var(--surface-hover); border-color: var(--border-dark); }

/* ── Form helpers (shared across dialogs & tab forms) ── */
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.form-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--danger-bg);
    border: 1px solid #fca5a5;
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    color: var(--danger);
}
.req { color: var(--danger); margin-left: 2px; }

/* ── Tab action buttons ──────────────────────────────── */
.ts-btn-primary,
.ts-btn-ghost,
.ts-btn-warning,
.ts-btn-success,
.ts-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, opacity .15s;
    white-space: nowrap;
}
.ts-btn-primary:disabled,
.ts-btn-ghost:disabled,
.ts-btn-warning:disabled,
.ts-btn-success:disabled,
.ts-btn-danger:disabled  { opacity: .55; cursor: not-allowed; }

.ts-btn-primary { background: var(--brand-600); color: #fff; }
.ts-btn-primary:hover:not(:disabled) { background: var(--brand-700); }

.ts-btn-ghost { background: var(--surface-raised); border-color: var(--border-color); color: var(--text-secondary); }
.ts-btn-ghost:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-dark); }

.ts-btn-warning { background: var(--warning-bg); border-color: #fde68a; color: var(--warning); }
.ts-btn-warning:hover:not(:disabled) { background: #fef9c3; }

.ts-btn-success { background: var(--success-bg); border-color: #6ee7b7; color: var(--success); }
.ts-btn-success:hover:not(:disabled) { background: #d1fae5; }

.ts-btn-danger { background: var(--danger-bg); border-color: #fca5a5; color: var(--danger); }
.ts-btn-danger:hover:not(:disabled) { background: #fee2e2; }

/* ── Feedback banner ─────────────────────────────────── */
.ts-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    font-weight: 500;
}
.ts-feedback-ok  { background: var(--success-bg); border: 1px solid #6ee7b7; color: var(--success); }
.ts-feedback-err { background: var(--danger-bg);  border: 1px solid #fca5a5; color: var(--danger);  }

/* ── Security cards grid ─────────────────────────────── */
.ts-security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.ts-sec-card {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-color);
    background: var(--surface-card);
    box-shadow: var(--shadow-xs);
}
.sec-card-ok      { border-left: 3px solid var(--success); }
.sec-card-warn    { border-left: 3px solid var(--warning); }
.sec-card-neutral { border-left: 3px solid var(--border-dark); }
.ts-sec-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    background: var(--surface-raised);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    color: var(--text-secondary);
}
.sec-card-ok   .ts-sec-icon { background: var(--success-bg); color: var(--success); }
.sec-card-warn .ts-sec-icon { background: var(--warning-bg); color: var(--warning); }
.ts-sec-body  { flex: 1; min-width: 0; }
.ts-sec-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.ts-sec-value { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin-top: 2px; }
.ts-sec-meta  { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.ts-sec-action { display: flex; align-items: center; margin-left: auto; flex-shrink: 0; }
.ts-sec-btn { padding: 5px 10px; font-size: var(--text-xs); }

/* ── Security tab action row ─────────────────────────── */
.ts-sec-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4);
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.ts-sec-section-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.ts-sec-action-btns   { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Lock dialog ─────────────────────────────────────── */
.ts-lock-form { padding: var(--sp-1) 0; }
.ts-lock-info { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--sp-4); line-height: 1.6; }

/* ── Dialog footer ───────────────────────────────────── */
.dlg-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-1) 0; }

/* ── Assign form (inside dialogs) ────────────────────── */
.ts-assign-form { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-1) 0; }

/* ── Toggle group (e.g. Direct / Effective) ──────────── */
.ts-toggle-group {
    display: inline-flex;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    overflow: hidden;
}
.ts-toggle {
    padding: 5px 14px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ts-toggle:hover   { background: var(--surface-hover); }
.ts-toggle.active  { background: var(--brand-600); color: #fff; }

/* ── Pagination ──────────────────────────────────────── */
.ts-pager      { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-2) 0; }
.ts-pager-info { font-size: var(--text-xs); color: var(--text-muted); flex: 1; text-align: center; }
.ts-pager-btn  { padding: 5px 10px; font-size: var(--text-xs); }

/* ── Row action buttons ──────────────────────────────── */
.ra-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: var(--r-md);
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: .8rem;
    transition: background .15s, border-color .15s, color .15s;
}
.ra-btn:hover        { background: var(--surface-hover); }
.ra-btn-danger       { color: var(--danger); border-color: #fca5a5; }

/* ════════════════════════════════════════════════════════
   16. User Management — Grid template column styles
   ════════════════════════════════════════════════════════ */

.um-user-cell,
.e-grid .e-rowcell .um-user-cell {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.um-avatar,
.e-grid .e-rowcell .um-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .05em;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.um-user-meta,
.e-grid .e-rowcell .um-user-meta {
    flex: 1;
    min-width: 0;
}

.um-user-name,
.e-grid .e-rowcell .um-user-name {
    display: block !important;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.um-user-email,
.e-grid .e-rowcell .um-user-email {
    display: block !important;
    font-size: .72rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    line-height: 1.3;
}

/* ════════════════════════════════════════════════════════
   17. Shared Utility — Buttons · Grid · Search · Dialog
   Promoted to global so shared components and all pages
   can reference these without re-declaring in scoped CSS.
   ════════════════════════════════════════════════════════ */

/* ── Button system ────────────────────────────────────── */
.um-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 16px;
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font);
    border: none;
    cursor: pointer;
    transition: background .14s, box-shadow .14s, opacity .14s;
    white-space: nowrap;
}
.um-btn-primary   { background: var(--brand-600); color: #fff; }
.um-btn-primary:hover:not(:disabled)   { background: var(--brand-700); box-shadow: var(--shadow-sm); }
.um-btn-primary:disabled               { opacity: .55; cursor: not-allowed; }
.um-btn-secondary { background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-color); }
.um-btn-secondary:hover                { background: var(--surface-hover); }
.um-btn-ghost     { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }
.um-btn-ghost:hover:not(:disabled)    { background: var(--surface-hover); }
.um-btn-ghost:disabled                 { opacity: .55; cursor: not-allowed; }
.um-btn-danger    { background: var(--danger); color: #fff; }
.um-btn-danger:hover:not(:disabled)   { background: #b91c1c; }
.um-btn-danger:disabled                { opacity: .55; cursor: not-allowed; }

/* ── Spinners ─────────────────────────────────────────── */
@keyframes um-spin { to { transform: rotate(360deg); } }
.um-spin {
    display: inline-block;
    width: 13px; height: 13px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: um-spin .6s linear infinite;
}
.um-spinner {
    width: 30px; height: 30px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-500);
    border-radius: 50%;
    animation: um-spin .65s linear infinite;
}

/* ── Search box ───────────────────────────────────────── */
.um-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 22rem;
    max-width: 440px;
    min-width: 0;
}
.um-search-box > i {
    position: absolute;
    left: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--text-muted);
    pointer-events: none;
    font-size: .95rem;
    line-height: 1;
    z-index: 2;
}
.um-search-input {
    width: 100%;
    min-height: 2.75rem;
    padding: 8px 12px 8px 3.55rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-family: var(--font);
    font-weight: 650;
    background: var(--surface-card);
    color: var(--text-primary);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.um-search-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.um-search-input::placeholder { color: var(--text-placeholder); opacity:1; }
.um-search-row {
    display: grid;
    grid-template-columns: minmax(22rem, 1fr) auto auto;
    align-items: center;
    gap: .8rem;
    width: 100%;
}
.um-search-row .um-search-box {
    max-width: none;
    width: 100%;
}
.um-search-filter-row {
    display: grid;
    grid-template-columns: minmax(22rem, 1fr) repeat(auto-fit, minmax(8.5rem, max-content));
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .95rem 1rem;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 18px;
    background: var(--surface-card, #fff);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}
.um-search-filter-row > .um-search-box {
    max-width: none;
    width: 100%;
}
.um-search-filter-row > label {
    display: grid;
    gap: .28rem;
    min-width: 9rem;
}
.um-search-filter-row > label > span {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 850;
    line-height: 1;
}
.um-search-filter-row > label > .form-select,
.um-search-filter-row > .form-select {
    width: 100%;
    min-height: 2.45rem;
    border-radius: .7rem;
    border: 1px solid rgba(59, 130, 246, .28);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 800;
}
.um-search-filter-row > .um-btn {
    min-height: 2.45rem;
    justify-content: center;
    white-space: nowrap;
}
.um-search-result {
    display: grid;
    justify-items: center;
    min-width: 5.75rem;
    padding: .62rem .85rem;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 1rem;
    background: var(--info-bg, #eff6ff);
    color: var(--brand-700, #1d4ed8);
}
.um-search-result strong {
    font-size: 1.1rem;
    font-weight: 950;
    line-height: 1;
}
.um-search-result span {
    margin-top: .2rem;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .um-search-row,
    .um-search-filter-row {
        grid-template-columns: 1fr;
    }

    .um-search-result {
        justify-items: start;
    }
}

/* ── Grid card ────────────────────────────────────────── */
.um-grid-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
}

/* ── Loading overlay ──────────────────────────────────── */
.um-loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-12) var(--sp-8);
    font-size: var(--text-sm);
    color: var(--text-muted);
    min-height: 160px;
}
/* overlay variant (positioned over a card) */
.um-loading-overlay.is-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(2px);
    padding: 0;
    min-height: unset;
    z-index: 10;
    border-radius: inherit;
}

/* ── Row actions ──────────────────────────────────────── */
.um-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

/* ── Count pill ───────────────────────────────────────── */
.um-count-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 7px;
    border-radius: var(--r-full);
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary);
}

/* ── Dialog utilities ─────────────────────────────────── */
.dlg-hd-icon  { margin-right: 6px; color: var(--brand-500); }
.dlg-form     { padding: var(--sp-2) 0; }
.form-group-full { flex: 1 1 100% !important; width: 100%; }

/* ── Badge: purple / teal ─────────────────────────────── */
.badge-purple { background: #ede9fe; color: #5b21b6; }
.badge-teal   { background: #ccfbf1; color: #0f766e; }

/* ── Row action success ───────────────────────────────── */
.ra-btn-success { color: var(--success); border-color: #6ee7b7; }
.ra-btn-success:hover { background: var(--success-bg); }

.um-mfa-on  { color: var(--success);       font-size: 1rem; }
.um-mfa-off { color: var(--text-disabled);  font-size: 1rem; }

.um-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--r-full);
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: var(--text-xs);
    font-weight: 700;
}

.um-date {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.um-row-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: flex-end;
}

/* ════════════════════════════════════════════════════════
   18. TOT Card System  (Tenant / Object / Tab shared cards)
   Used across TenantDetail, TenantOverview and other
   detail pages.  Global so all pages share the same visuals.
   ════════════════════════════════════════════════════════ */

/* ── Card shell ──────────────────────────────────────── */
.tot-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Card header ─────────────────────────────────────── */
.tot-card-hdr {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--surface-raised);
    letter-spacing: .01em;
}

.tot-card-hdr > i { color: var(--brand-500); font-size: 1rem; flex-shrink: 0; }

/* ── Card body ───────────────────────────────────────── */
.tot-card-body {
    padding: var(--sp-4) var(--sp-5);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Card footer ─────────────────────────────────────── */
.tot-card-footer {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border-color);
    background: var(--surface-raised);
    flex-wrap: wrap;
}

/* ── Field row (label + value pairs) ─────────────────── */
.tot-field {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-sm);
    min-height: 34px;
}

.tot-field:last-child { border-bottom: none; }

.tot-fl {
    flex: 0 0 130px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    padding-top: 1px;
}

.tot-fv {
    flex: 1;
    color: var(--text-primary);
    word-break: break-word;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

/* ── Grid layout ─────────────────────────────────────── */
.tot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--sp-4);
}

.tot-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tot-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 960px) { .tot-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .tot-grid--2, .tot-grid--3 { grid-template-columns: 1fr; } }

/* ── Metric row (big number stats strip) ─────────────── */
.tot-metric-row {
    display: flex;
    gap: var(--sp-8);
    flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-6);
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-4);
}

.tot-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 80px;
}

.tot-metric-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.tot-metric-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Alert/info banner ───────────────────────────────── */
.tot-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--sp-4);
    border: 1px solid transparent;
}

.tot-alert > i { flex-shrink: 0; padding-top: 2px; }

.tot-alert--info  { background: var(--info-bg);    border-color: var(--brand-200);  color: var(--brand-800);  }
.tot-alert--info > i { color: var(--brand-500); }
.tot-alert--warn  { background: var(--warning-bg); border-color: #fde68a;           color: #92400e;           }
.tot-alert--warn > i { color: var(--warning); }
.tot-alert--error { background: var(--danger-bg);  border-color: #fca5a5;           color: #991b1b;           }
.tot-alert--error > i { color: var(--danger); }

/* ── Empty hint ──────────────────────────────────────── */
.tot-empty-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
    flex: 1;
}

.tot-empty-hint i { font-size: 1.75rem; opacity: .4; }
.tot-empty-hint span { max-width: 280px; line-height: 1.6; }

/* ── Inline utilities ────────────────────────────────── */
.tot-muted { color: var(--text-muted); font-size: var(--text-sm); }

.tot-mono {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    padding: 1px 6px;
    border-radius: var(--r-sm);
    white-space: nowrap;
}

/* ── Quick-link / footer action button ───────────────── */
.tot-ql {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--brand-600);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    font-family: var(--font);
    transition: color .14s;
    line-height: 1.5;
}

.tot-ql:hover { color: var(--brand-700); text-decoration: underline; }
.tot-ql > i   { font-size: .75rem; }

/* ── Plan hero (featured badge block) ────────────────── */
.tot-plan-hero {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0 var(--sp-4);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--sp-2);
}

/* Override the global .ra-btn border when used inside the grid action column */
.um-row-actions .ra-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--r-sm);
    color: var(--text-tertiary);
    transition: background .13s, color .13s;
}

.um-row-actions .ra-btn:hover                { background: var(--surface-hover); color: var(--text-primary); }
.um-row-actions .ra-btn.ra-btn-success       { color: var(--success); }
.um-row-actions .ra-btn.ra-btn-success:hover { background: var(--success-bg); }
.um-row-actions .ra-btn.ra-btn-danger:hover  { background: var(--danger-bg); color: var(--danger); }
.ra-btn-danger:hover { background: var(--danger-bg); }

/* ── MFA device cell ─────────────────────────────────── */
.ts-mfa-cell { display: flex; align-items: center; gap: var(--sp-2); }
.ts-mfa-icon {
    width: 32px; height: 32px;
    border-radius: var(--r-md);
    background: var(--surface-raised);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    color: var(--brand-600);
    flex-shrink: 0;
}

/* ── Policy info block ───────────────────────────────── */
.ts-policy-info {
    display: flex;
    gap: var(--sp-5);
    padding: var(--sp-5);
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--r-xl);
    max-width: 720px;
}
.ts-policy-icon  { font-size: 2.2rem; color: var(--brand-400); flex-shrink: 0; padding-top: 2px; }
.ts-policy-body  { flex: 1; min-width: 0; }
.ts-policy-body h4 { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--sp-2); }
.ts-policy-body p  { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--sp-4); }
.ts-policy-meta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
}
.ts-policy-meta-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); }
.ts-meta-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    min-width: 130px;
}
.ts-policy-placeholder-badge {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--info-bg);
    border: 1px solid var(--brand-200);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    color: var(--info);
    line-height: 1.5;
}

/* ── Responsive overrides ────────────────────────────── */
@media (max-width: 768px) {
    .tab-section      { padding: var(--sp-4); }
    .ts-info-grid     { grid-template-columns: 1fr; }
    .ts-security-grid { grid-template-columns: 1fr; }
    .form-row         { grid-template-columns: 1fr; }
    .ts-dl-row        { grid-template-columns: 110px 1fr; }
    .ts-policy-info   { flex-direction: column; }
    .ts-sec-actions-row { flex-direction: column; align-items: flex-start; }
}



/* --------------------------------------------------------
   GLOBAL POLISH � applies to every page
   -------------------------------------------------------- */

/* -- Empty state ------------------------------------------ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-12) var(--sp-8);
    color: var(--text-muted);
    text-align: center;
}
.empty-state-icon {
    font-size: 2.5rem;
    color: var(--border-dark);
    line-height: 1;
}
.empty-state-title { font-size: var(--text-base); font-weight: 600; color: var(--text-secondary); }
.empty-state-sub   { font-size: var(--text-sm); max-width: 380px; }
.tot-empty-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-10) var(--sp-6);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.tot-empty-hint i { font-size: 1.2rem; }

/* -- Section sub-headers (h4) used on legacy pages -------- */
h4.mt-3, h4.mt-4 {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: var(--sp-5) 0 var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-color);
}

/* -- Focus-visible ring (accessibility) ------------------- */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* -- Link style ------------------------------------------- */
.um-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-600);
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.um-link:hover { color: var(--brand-700); }

/* -- Divider ---------------------------------------------- */
.um-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--sp-4) 0;
}

/* -- Content padding (wrap page body below page-header) ---- */
.page-body {
    padding: var(--sp-5) var(--sp-6);
}

/* -- Info/warning/error alert strips ---------------------- */
.alert-strip {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    font-size: var(--text-sm);
    margin-bottom: var(--sp-4);
    border: 1px solid transparent;
}
.alert-strip i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.alert-strip--info    { background: var(--info-bg);    color: var(--info);    border-color: var(--brand-200); }
.alert-strip--success { background: var(--success-bg); color: var(--success); border-color: #a7f3d0; }
.alert-strip--warning { background: var(--warning-bg); color: var(--warning); border-color: #fde68a; }
.alert-strip--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: #fca5a5; }

/* -- Responsive: sticky page-header on mobile ------------- */
@media (max-width: 768px) {
    .page-header {
        position: static;
        padding: var(--sp-4);
    }
    .page-header { flex-direction: column; align-items: flex-start; }
    .page-actions { width: 100%; justify-content: flex-start; }
    .page-body { padding: var(--sp-4); }
    .aph-icon { width: 34px; height: 34px; font-size: .95rem; }
    .page-title { font-size: var(--text-lg); }
    .toolbar { padding: var(--sp-2) var(--sp-3); }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        .um-loading-overlay.is-overlay {
            background: rgba(26, 29, 39, .88);
        }
    }
}

/* -- Submissions light polish: global override for /submissions* pages -- */
[data-theme="light"] :is(.sde-page,.qde-page,.sa-page,.sd-page,.nsw-page,.sdd-page,.msb-page),
:root:not([data-theme="dark"]):not(.theme-dark) body:not(.dark):not(.theme-dark) :is(.sde-page,.qde-page,.sa-page,.sd-page,.nsw-page,.sdd-page,.msb-page) {
    color: #0f172a !important;
}

[data-theme="light"] :is(.sde-page,.qde-page,.sa-page,.sd-page,.nsw-page,.sdd-page,.msb-page) :is(h1,h2,h3,h4,h5,h6,strong,label,dt,dd,th,td,.sde-section-kicker,.qde-section-kicker,.sa-section-kicker,.sd-section-kicker,.nsw-section-kicker,.sdd-section-kicker,.msb-title,.msb-card-title):not(.pb-page *),
:root:not([data-theme="dark"]):not(.theme-dark) body:not(.dark):not(.theme-dark) :is(.sde-page,.qde-page,.sa-page,.sd-page,.nsw-page,.sdd-page,.msb-page) :is(h1,h2,h3,h4,h5,h6,strong,label,dt,dd,th,td,.sde-section-kicker,.qde-section-kicker,.sa-section-kicker,.sd-section-kicker,.nsw-section-kicker,.sdd-section-kicker,.msb-title,.msb-card-title):not(.pb-page *) {
    color: #0f172a !important;
}

[data-theme="light"] :is(.sde-card-header,.qde-card-header,.sa-card-header,.sd-card-header,.nsw-card-header,.sdd-card-header,.msb-header,.msb-lane-head),
:root:not([data-theme="dark"]):not(.theme-dark) body:not(.dark):not(.theme-dark) :is(.sde-card-header,.qde-card-header,.sa-card-header,.sd-card-header,.nsw-card-header,.sdd-card-header,.msb-header,.msb-lane-head) {
    background: linear-gradient(135deg, #fff, #f8fafc) !important;
    color: #0f172a !important;
}

[data-theme="light"] :is(.sde-card-header,.qde-card-header,.sa-card-header,.sd-card-header,.nsw-card-header,.sdd-card-header,.msb-header,.msb-lane-head) :is(h1,h2,h3,h4,h5,h6,strong,span,i),
:root:not([data-theme="dark"]):not(.theme-dark) body:not(.dark):not(.theme-dark) :is(.sde-card-header,.qde-card-header,.sa-card-header,.sd-card-header,.nsw-card-header,.sdd-card-header,.msb-header,.msb-lane-head) :is(h1,h2,h3,h4,h5,h6,strong,span,i) {
    color: #0f172a !important;
}

[data-theme="light"] :is(.sde-card-header,.qde-card-header,.sa-card-header,.sd-card-header,.nsw-card-header,.sdd-card-header,.msb-header,.msb-lane-head) :is(p,small,em),
:root:not([data-theme="dark"]):not(.theme-dark) body:not(.dark):not(.theme-dark) :is(.sde-card-header,.qde-card-header,.sa-card-header,.sd-card-header,.nsw-card-header,.sdd-card-header,.msb-header,.msb-lane-head) :is(p,small,em) {
    color: #475569 !important;
}

[data-theme="light"] :is(.sde-table,.qde-table,.sa-table,.sd-table,.nsw-table,.sdd-table,.msb-hist-table) th,
:root:not([data-theme="dark"]):not(.theme-dark) body:not(.dark):not(.theme-dark) :is(.sde-table,.qde-table,.sa-table,.sd-table,.nsw-table,.sdd-table,.msb-hist-table) th {
    background: #f8fafc !important;
    color: #334155 !important;
}

[data-theme="light"] :is(.sde-page,.qde-page,.sa-page,.sd-page,.nsw-page,.sdd-page,.msb-page) :is(p,span,small,em,.text-muted,[class*="__sub"],[class*="__meta"],[class*="-sub"],[class*="-meta"],[class*="-hint"],[class*="-label"],[class*="-lbl"],[class*="-count"]):not(.pb-page *),
:root:not([data-theme="dark"]):not(.theme-dark) body:not(.dark):not(.theme-dark) :is(.sde-page,.qde-page,.sa-page,.sd-page,.nsw-page,.sdd-page,.msb-page) :is(p,span,small,em,.text-muted,[class*="__sub"],[class*="__meta"],[class*="-sub"],[class*="-meta"],[class*="-hint"],[class*="-label"],[class*="-lbl"],[class*="-count"]):not(.pb-page *) {
    color: #475569 !important;
}

/* -- Submissions dark polish: global override for /submissions* pages -- */
[data-theme="dark"] :is(.sde-page,.qde-page,.sa-page,.sd-page,.nsw-page,.sdd-page,.msb-page),
.theme-dark :is(.sde-page,.qde-page,.sa-page,.sd-page,.nsw-page,.sdd-page,.msb-page),
body.dark :is(.sde-page,.qde-page,.sa-page,.sd-page,.nsw-page,.sdd-page,.msb-page) {
    color: #e5e7eb !important;
}

[data-theme="dark"] :is(
    .sde-kpi,.sde-workflow,.sde-filter-panel,.sde-search,.sde-tabs,.sde-main-card,.sde-panel-card,.sde-card-header,.sde-icon-btn,.sde-menu,.sde-menu__summary,.sde-lob-pill,.sde-lob-card,.sde-score-card,.sde-insight,.sde-compare-modal,.sde-modal__footer,.sde-table-wrap,.sde-empty,.sde-form-card,.sde-input,.sde-selected-card,.sde-review-card,
    .qde-kpi,.qde-workflow,.qde-filter-panel,.qde-search,.qde-tabs,.qde-main-card,.qde-panel-card,.qde-card-header,.qde-icon-btn,.qde-menu,.qde-menu__summary,.qde-lob-pill,.qde-lob-card,.qde-score-card,.qde-insight,.qde-compare-modal,.qde-modal__footer,.qde-table-wrap,.qde-empty,.qde-form-card,.qde-input,.qde-selected-card,.qde-review-card,
    .sa-kpi,.sa-workflow,.sa-filter-panel,.sa-search,.sa-tabs,.sa-main-card,.sa-panel-card,.sa-card-header,.sa-icon-btn,.sa-menu,.sa-menu__summary,.sa-lob-pill,.sa-lob-card,.sa-score-card,.sa-insight,.sa-compare-modal,.sa-modal__footer,.sa-table-wrap,.sa-empty,.sa-form-card,.sa-input,.sa-selected-card,.sa-review-card,
    .sd-kpi,.sd-workflow,.sd-filter-panel,.sd-search,.sd-tabs,.sd-main-card,.sd-panel-card,.sd-card-header,.sd-icon-btn,.sd-menu,.sd-menu__summary,.sd-lob-pill,.sd-lob-card,.sd-score-card,.sd-insight,.sd-compare-modal,.sd-modal__footer,.sd-table-wrap,.sd-empty,.sd-form-card,.sd-input,.sd-selected-card,.sd-review-card,
    .nsw-kpi,.nsw-workflow,.nsw-tabs,.nsw-main-card,.nsw-panel-card,.nsw-card-header,.nsw-icon-btn,.nsw-menu,.nsw-menu__summary,.nsw-form-card,.nsw-field,.nsw-input,.nsw-selected-card,.nsw-review-card,.nsw-table-wrap,.nsw-empty,.nsw-step-card,.nsw-summary-card,
    .sdd-kpi,.sdd-workflow,.sdd-tabs,.sdd-main-card,.sdd-panel-card,.sdd-card-header,.sdd-icon-btn,.sdd-menu,.sdd-menu__summary,.sdd-form-card,.sdd-field,.sdd-input,.sdd-selected-card,.sdd-review-card,.sdd-table-wrap,.sdd-empty,.sdd-step-card,.sdd-summary-card,.sdd-pill,
    .msb-loading,.msb-header,.msb-kpi-strip,.msb-kpi-card,.msb-filter-bar,.msb-lane,.msb-lane-head,.msb-card,.msb-drawer,.msb-kcard,.msb-kanban-wrap,
    .e-grid,.e-gridheader,.e-headercontent,.e-content,.e-table,.e-row,.e-toolbar,.e-pager,.e-dialog,.e-dlg-content,.e-dropdownbase,.e-popup,.e-input-group,.e-control-wrapper
),
.theme-dark :is(
    .sde-kpi,.sde-workflow,.sde-filter-panel,.sde-search,.sde-tabs,.sde-main-card,.sde-panel-card,.sde-card-header,.sde-icon-btn,.sde-menu,.sde-menu__summary,.sde-lob-pill,.sde-lob-card,.sde-score-card,.sde-insight,.sde-compare-modal,.sde-modal__footer,.sde-table-wrap,.sde-empty,.sde-form-card,.sde-input,.sde-selected-card,.sde-review-card,
    .qde-kpi,.qde-workflow,.qde-filter-panel,.qde-search,.qde-tabs,.qde-main-card,.qde-panel-card,.qde-card-header,.qde-icon-btn,.qde-menu,.qde-menu__summary,.qde-lob-pill,.qde-lob-card,.qde-score-card,.qde-insight,.qde-compare-modal,.qde-modal__footer,.qde-table-wrap,.qde-empty,.qde-form-card,.qde-input,.qde-selected-card,.qde-review-card,
    .sa-kpi,.sa-workflow,.sa-filter-panel,.sa-search,.sa-tabs,.sa-main-card,.sa-panel-card,.sa-card-header,.sa-icon-btn,.sa-menu,.sa-menu__summary,.sa-lob-pill,.sa-lob-card,.sa-score-card,.sa-insight,.sa-compare-modal,.sa-modal__footer,.sa-table-wrap,.sa-empty,.sa-form-card,.sa-input,.sa-selected-card,.sa-review-card,
    .sd-kpi,.sd-workflow,.sd-filter-panel,.sd-search,.sd-tabs,.sd-main-card,.sd-panel-card,.sd-card-header,.sd-icon-btn,.sd-menu,.sd-menu__summary,.sd-lob-pill,.sd-lob-card,.sd-score-card,.sd-insight,.sd-compare-modal,.sd-modal__footer,.sd-table-wrap,.sd-empty,.sd-form-card,.sd-input,.sd-selected-card,.sd-review-card,
    .nsw-kpi,.nsw-workflow,.nsw-tabs,.nsw-main-card,.nsw-panel-card,.nsw-card-header,.nsw-icon-btn,.nsw-menu,.nsw-menu__summary,.nsw-form-card,.nsw-field,.nsw-input,.nsw-selected-card,.nsw-review-card,.nsw-table-wrap,.nsw-empty,.nsw-step-card,.nsw-summary-card,
    .sdd-kpi,.sdd-workflow,.sdd-tabs,.sdd-main-card,.sdd-panel-card,.sdd-card-header,.sdd-icon-btn,.sdd-menu,.sdd-menu__summary,.sdd-form-card,.sdd-field,.sdd-input,.sdd-selected-card,.sdd-review-card,.sdd-table-wrap,.sdd-empty,.sdd-step-card,.sdd-summary-card,.sdd-pill,
    .msb-loading,.msb-header,.msb-kpi-strip,.msb-kpi-card,.msb-filter-bar,.msb-lane,.msb-lane-head,.msb-card,.msb-drawer,.msb-kcard,.msb-kanban-wrap,
    .e-grid,.e-gridheader,.e-headercontent,.e-content,.e-table,.e-row,.e-toolbar,.e-pager,.e-dialog,.e-dlg-content,.e-dropdownbase,.e-popup,.e-input-group,.e-control-wrapper
),
body.dark :is(
    .sde-kpi,.sde-workflow,.sde-filter-panel,.sde-search,.sde-tabs,.sde-main-card,.sde-panel-card,.sde-card-header,.sde-icon-btn,.sde-menu,.sde-menu__summary,.sde-lob-pill,.sde-lob-card,.sde-score-card,.sde-insight,.sde-compare-modal,.sde-modal__footer,.sde-table-wrap,.sde-empty,.sde-form-card,.sde-input,.sde-selected-card,.sde-review-card,
    .qde-kpi,.qde-workflow,.qde-filter-panel,.qde-search,.qde-tabs,.qde-main-card,.qde-panel-card,.qde-card-header,.qde-icon-btn,.qde-menu,.qde-menu__summary,.qde-lob-pill,.qde-lob-card,.qde-score-card,.qde-insight,.qde-compare-modal,.qde-modal__footer,.qde-table-wrap,.qde-empty,.qde-form-card,.qde-input,.qde-selected-card,.qde-review-card,
    .sa-kpi,.sa-workflow,.sa-filter-panel,.sa-search,.sa-tabs,.sa-main-card,.sa-panel-card,.sa-card-header,.sa-icon-btn,.sa-menu,.sa-menu__summary,.sa-lob-pill,.sa-lob-card,.sa-score-card,.sa-insight,.sa-compare-modal,.sa-modal__footer,.sa-table-wrap,.sa-empty,.sa-form-card,.sa-input,.sa-selected-card,.sa-review-card,
    .sd-kpi,.sd-workflow,.sd-filter-panel,.sd-search,.sd-tabs,.sd-main-card,.sd-panel-card,.sd-card-header,.sd-icon-btn,.sd-menu,.sd-menu__summary,.sd-lob-pill,.sd-lob-card,.sd-score-card,.sd-insight,.sd-compare-modal,.sd-modal__footer,.sd-table-wrap,.sd-empty,.sd-form-card,.sd-input,.sd-selected-card,.sd-review-card,
    .nsw-kpi,.nsw-workflow,.nsw-tabs,.nsw-main-card,.nsw-panel-card,.nsw-card-header,.nsw-icon-btn,.nsw-menu,.nsw-menu__summary,.nsw-form-card,.nsw-field,.nsw-input,.nsw-selected-card,.nsw-review-card,.nsw-table-wrap,.nsw-empty,.nsw-step-card,.nsw-summary-card,
    .sdd-kpi,.sdd-workflow,.sdd-tabs,.sdd-main-card,.sdd-panel-card,.sdd-card-header,.sdd-icon-btn,.sdd-menu,.sdd-menu__summary,.sdd-form-card,.sdd-field,.sdd-input,.sdd-selected-card,.sdd-review-card,.sdd-table-wrap,.sdd-empty,.sdd-step-card,.sdd-summary-card,.sdd-pill,
    .msb-loading,.msb-header,.msb-kpi-strip,.msb-kpi-card,.msb-filter-bar,.msb-lane,.msb-lane-head,.msb-card,.msb-drawer,.msb-kcard,.msb-kanban-wrap,
    .e-grid,.e-gridheader,.e-headercontent,.e-content,.e-table,.e-row,.e-toolbar,.e-pager,.e-dialog,.e-dlg-content,.e-dropdownbase,.e-popup,.e-input-group,.e-control-wrapper
) {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #1e3a5f !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.35) !important;
}

[data-theme="dark"] :is(.sde-table,.qde-table,.sa-table,.sd-table,.nsw-table,.sdd-table,.msb-hist-table) th,
.theme-dark :is(.sde-table,.qde-table,.sa-table,.sd-table,.nsw-table,.sdd-table,.msb-hist-table) th,
body.dark :is(.sde-table,.qde-table,.sa-table,.sd-table,.nsw-table,.sdd-table,.msb-hist-table) th,
[data-theme="dark"] :is(.e-grid) .e-headercell,
.theme-dark :is(.e-grid) .e-headercell,
body.dark :is(.e-grid) .e-headercell {
    background: #111c2f !important;
    color: #cbd5e1 !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] :is(.sde-table,.qde-table,.sa-table,.sd-table,.nsw-table,.sdd-table,.msb-hist-table) td,
.theme-dark :is(.sde-table,.qde-table,.sa-table,.sd-table,.nsw-table,.sdd-table,.msb-hist-table) td,
body.dark :is(.sde-table,.qde-table,.sa-table,.sd-table,.nsw-table,.sdd-table,.msb-hist-table) td,
[data-theme="dark"] :is(.e-grid) .e-rowcell,
.theme-dark :is(.e-grid) .e-rowcell,
body.dark :is(.e-grid) .e-rowcell {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] :is(.sde-btn--ghost,.qde-btn--ghost,.sa-btn--ghost,.sd-btn--ghost,.nsw-btn--ghost,.sdd-btn--ghost,.msb-btn,.msb-icon-btn),
.theme-dark :is(.sde-btn--ghost,.qde-btn--ghost,.sa-btn--ghost,.sd-btn--ghost,.nsw-btn--ghost,.sdd-btn--ghost,.msb-btn,.msb-icon-btn),
body.dark :is(.sde-btn--ghost,.qde-btn--ghost,.sa-btn--ghost,.sd-btn--ghost,.nsw-btn--ghost,.sdd-btn--ghost,.msb-btn,.msb-icon-btn) {
    background: #111c2f !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

[data-theme="dark"] :is(.sde-search input,.qde-search input,.sa-search input,.sd-search input,.nsw-input,.sdd-input,input,textarea,select),
.theme-dark :is(.sde-search input,.qde-search input,.sa-search input,.sd-search input,.nsw-input,.sdd-input,input,textarea,select),
body.dark :is(.sde-search input,.qde-search input,.sa-search input,.sd-search input,.nsw-input,.sdd-input,input,textarea,select) {
    background-color: #111c2f !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

[data-theme="dark"] :is(.sde-kpi small,.qde-kpi small,.sa-kpi small,.sd-kpi small,.nsw-kpi small,.sdd-kpi small,.msb-sub,.msb-kpi-lbl,.msb-filter-lbl,.msb-filter-count,.msb-kc-prog,.msb-kcm),
.theme-dark :is(.sde-kpi small,.qde-kpi small,.sa-kpi small,.sd-kpi small,.nsw-kpi small,.sdd-kpi small,.msb-sub,.msb-kpi-lbl,.msb-filter-lbl,.msb-filter-count,.msb-kc-prog,.msb-kcm),
body.dark :is(.sde-kpi small,.qde-kpi small,.sa-kpi small,.sd-kpi small,.nsw-kpi small,.sdd-kpi small,.msb-sub,.msb-kpi-lbl,.msb-filter-lbl,.msb-filter-count,.msb-kc-prog,.msb-kcm) {
    color: #94a3b8 !important;
}

[data-theme="dark"] .sdd-readiness-gate,
.theme-dark .sdd-readiness-gate,
body.dark .sdd-readiness-gate {
    background: #081322 !important;
    color: #e5edf8 !important;
    border-color: rgba(245,158,11,.34) !important;
    box-shadow: 0 34px 100px rgba(0,0,0,.55) !important;
}

[data-theme="dark"] .sdd-readiness-gate__hero,
.theme-dark .sdd-readiness-gate__hero,
body.dark .sdd-readiness-gate__hero {
    background: radial-gradient(circle at 50% 0%, rgba(245,158,11,.18), transparent 18rem), linear-gradient(135deg, #2b1b0a, #0b1627) !important;
}

[data-theme="dark"] .sdd-readiness-gate__hero span,
.theme-dark .sdd-readiness-gate__hero span,
body.dark .sdd-readiness-gate__hero span,
[data-theme="dark"] .sdd-readiness-gate__blockers > span,
.theme-dark .sdd-readiness-gate__blockers > span,
body.dark .sdd-readiness-gate__blockers > span {
    color: #fcd34d !important;
}

[data-theme="dark"] .sdd-readiness-gate__hero h3,
.theme-dark .sdd-readiness-gate__hero h3,
body.dark .sdd-readiness-gate__hero h3,
[data-theme="dark"] .sdd-readiness-gate__summary strong,
.theme-dark .sdd-readiness-gate__summary strong,
body.dark .sdd-readiness-gate__summary strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .sdd-readiness-gate__hero p,
.theme-dark .sdd-readiness-gate__hero p,
body.dark .sdd-readiness-gate__hero p {
    color: #dbeafe !important;
}

[data-theme="dark"] .sdd-readiness-gate__body,
.theme-dark .sdd-readiness-gate__body,
body.dark .sdd-readiness-gate__body,
[data-theme="dark"] .sdd-readiness-gate > .sdd-modal__footer,
.theme-dark .sdd-readiness-gate > .sdd-modal__footer,
body.dark .sdd-readiness-gate > .sdd-modal__footer {
    background: #081322 !important;
}

[data-theme="dark"] .sdd-readiness-gate > .sdd-modal__footer,
.theme-dark .sdd-readiness-gate > .sdd-modal__footer,
body.dark .sdd-readiness-gate > .sdd-modal__footer {
    border-top-color: rgba(148,163,184,.18) !important;
}

[data-theme="dark"] .sdd-readiness-gate__summary div,
.theme-dark .sdd-readiness-gate__summary div,
body.dark .sdd-readiness-gate__summary div {
    background: linear-gradient(135deg, #0b1627, #0f1f36) !important;
    border-color: rgba(96,165,250,.22) !important;
}

[data-theme="dark"] .sdd-readiness-gate__summary span,
.theme-dark .sdd-readiness-gate__summary span,
body.dark .sdd-readiness-gate__summary span {
    color: #94a3b8 !important;
}

[data-theme="dark"] .sdd-readiness-gate__blockers,
.theme-dark .sdd-readiness-gate__blockers,
body.dark .sdd-readiness-gate__blockers {
    background: rgba(245,158,11,.1) !important;
    border-color: rgba(245,158,11,.28) !important;
}

[data-theme="dark"] .sdd-readiness-gate__blockers div,
.theme-dark .sdd-readiness-gate__blockers div,
body.dark .sdd-readiness-gate__blockers div {
    background: rgba(15,27,46,.82) !important;
}

[data-theme="dark"] .sdd-readiness-gate__blockers div strong,
.theme-dark .sdd-readiness-gate__blockers div strong,
body.dark .sdd-readiness-gate__blockers div strong {
    color: #fde68a !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) :is(.sde-page,.qde-page,.sa-page,.sd-page,.nsw-page,.sdd-page,.msb-page) {
        color: #e5e7eb !important;
    }

    :root:not([data-theme="light"]) :is(
        .sde-kpi,.sde-workflow,.sde-filter-panel,.sde-search,.sde-tabs,.sde-main-card,.sde-panel-card,.sde-card-header,.sde-icon-btn,.sde-menu,.sde-lob-card,.sde-score-card,.sde-insight,.sde-compare-modal,.sde-modal__footer,
        .qde-kpi,.qde-workflow,.qde-filter-panel,.qde-search,.qde-tabs,.qde-main-card,.qde-panel-card,.qde-card-header,.qde-icon-btn,.qde-menu,.qde-lob-card,.qde-score-card,.qde-insight,.qde-compare-modal,.qde-modal__footer,
        .sa-kpi,.sa-workflow,.sa-filter-panel,.sa-search,.sa-tabs,.sa-main-card,.sa-panel-card,.sa-card-header,.sa-icon-btn,.sa-menu,.sa-lob-card,.sa-score-card,.sa-insight,.sa-compare-modal,.sa-modal__footer,
        .sd-kpi,.sd-workflow,.sd-filter-panel,.sd-search,.sd-tabs,.sd-main-card,.sd-panel-card,.sd-card-header,.sd-icon-btn,.sd-menu,.sd-lob-card,.sd-score-card,.sd-insight,.sd-compare-modal,.sd-modal__footer,
        .nsw-kpi,.nsw-workflow,.nsw-tabs,.nsw-main-card,.nsw-panel-card,.nsw-card-header,.nsw-icon-btn,.nsw-form-card,.nsw-input,.nsw-selected-card,.nsw-review-card,
        .sdd-kpi,.sdd-workflow,.sdd-tabs,.sdd-main-card,.sdd-panel-card,.sdd-card-header,.sdd-icon-btn,.sdd-form-card,.sdd-input,.sdd-selected-card,.sdd-review-card,
        .msb-header,.msb-kpi-strip,.msb-kpi-card,.msb-filter-bar,.msb-lane,.msb-card,.msb-drawer,.msb-kcard
    ) {
        background: #0f172a !important;
        background-color: #0f172a !important;
        color: #e5e7eb !important;
        border-color: #1e3a5f !important;
    }
}

/* -- Blazor reconnect modal polish ----------------------- */
#components-reconnect-modal,
.components-reconnect-modal {
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 1.25rem !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .98)) !important;
    color: #0f172a !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .22) !important;
}

#components-reconnect-modal :is(p, span, div),
.components-reconnect-modal :is(p, span, div) {
    color: #334155 !important;
}

[data-theme="dark"] #components-reconnect-modal,
[data-theme="dark"] .components-reconnect-modal,
.theme-dark #components-reconnect-modal,
.theme-dark .components-reconnect-modal,
body.dark #components-reconnect-modal,
body.dark .components-reconnect-modal {
    border-color: rgba(96, 165, 250, .24) !important;
    background: linear-gradient(180deg, rgba(13, 26, 46, .98), rgba(7, 16, 29, .98)) !important;
    color: #e5edf8 !important;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .45) !important;
}

[data-theme="dark"] #components-reconnect-modal :is(p, span, div),
[data-theme="dark"] .components-reconnect-modal :is(p, span, div),
.theme-dark #components-reconnect-modal :is(p, span, div),
.theme-dark .components-reconnect-modal :is(p, span, div),
body.dark #components-reconnect-modal :is(p, span, div),
body.dark .components-reconnect-modal :is(p, span, div) {
    color: #cbd5e1 !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #components-reconnect-modal,
    :root:not([data-theme="light"]) .components-reconnect-modal {
        border-color: rgba(96, 165, 250, .24) !important;
        background: linear-gradient(180deg, rgba(13, 26, 46, .98), rgba(7, 16, 29, .98)) !important;
        color: #e5edf8 !important;
        box-shadow: 0 32px 90px rgba(0, 0, 0, .45) !important;
    }

    :root:not([data-theme="light"]) #components-reconnect-modal :is(p, span, div),
    :root:not([data-theme="light"]) .components-reconnect-modal :is(p, span, div) {
        color: #cbd5e1 !important;
    }
}