/* ════════════════════════════════════════════════════════════════════════
   MOTLogs member-area design system.

   A crisp, high-end dark aesthetic: deep slate/charcoal canvas, a strict
   Level 0–3 elevation hierarchy (border + shadow + backdrop-blur), a refined
   orange accent, and modern component chrome (tab bars, segmented controls,
   elevated inputs, calm data tables, blurred modals).

   Scope: structural / component rules are namespaced under `.member-shell`
   (set on the member layouts' outer element) so the public marketing site is
   never touched. Only the design tokens, scrollbar, and body-portalled
   Syncfusion dialog/popup chrome live at the top level.
   ════════════════════════════════════════════════════════════════════════ */

/* Inter is self-hosted: @font-face for "InterVariable"/"Inter" is declared in
   App.razor and served from /fonts/InterVariable.woff2 (no Google Fonts). */

/* Bootstrap 3's base sets html { font-size: 62.5% } → 1rem = 10px, which made
   every rem-based size render at 62.5% of the Agent (whose base is 16px).
   Restore a 16px root so rem sizing matches the Agent across both sites. */
html { font-size: 100%; }

:root {
    /* ═══ Canonical MOTLogs family tokens (--ml-*) — dark theme ═══
       Single source of truth per the One-MOTLogs brand spec. App-specific
       token names below alias onto these; do not hardcode the raw values. */
    --ml-bg: #121212;
    --ml-surface-1: #1E1E1E;
    --ml-surface-2: #242424;
    --ml-surface-3: #2A2A2A;
    --ml-accent: #FF5432;
    --ml-accent-hover: #FF7A5E;
    --ml-accent-glow: rgba(255, 84, 50, 0.15);
    --ml-text: #FFFFFF;
    --ml-text-secondary: #A0A0A0;
    --ml-text-muted: #707070;
    --ml-border: rgba(255, 255, 255, 0.08);
    --ml-border-strong: rgba(255, 255, 255, 0.15);
    --ml-success: #26B050;
    --ml-warning: #F39C12;
    --ml-error: #E74C3C;
    --ml-info: #3B82F6;

    /* ─── Elevation surfaces (Level 0 → 3) — canonical family ramp ─── */
    --bg-primary: var(--ml-bg);        /* Level 0 — app canvas                 */
    --bg-surface: var(--ml-surface-1); /* Level 1 — base cards / tables / bars */
    --bg-card: var(--ml-surface-1);    /* alias for Level 1                    */
    --bg-popover: var(--ml-surface-2); /* Level 2 — dropdowns / popovers       */
    --bg-elevated: var(--ml-surface-3);/* Level 3 — high cards / modals        */

    /* ─── Accent + status ─── */
    --accent: var(--ml-accent);
    --accent-hover: var(--ml-accent-hover);
    --accent-glow: var(--ml-accent-glow);
    --success: var(--ml-success);
    --success-glow: rgba(38, 176, 80, 0.15);
    --warning: var(--ml-warning);
    --error: var(--ml-error);
    --info: var(--ml-info);

    /* ─── Typography ─── */
    --text-primary: var(--ml-text);
    --text-secondary: var(--ml-text-secondary);
    --text-muted: var(--ml-text-muted);

    /* ─── Hairlines ─── */
    --border: var(--ml-border);
    --border-strong: var(--ml-border-strong);

    /* ─── Frosted top bar + hover tint (theme-aware) ─── */
    --topbar-bg: rgba(30, 30, 30, 0.85);
    --hover-tint: rgba(255, 255, 255, 0.04);

    /* ─── Elevation shadows ─── */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.4);
    --ring-accent: 0 0 0 3px var(--accent-glow);

    /* ─── Risk tints (translucent) + strips (solid) ─── */
    --risk-high: #E74C3C;
    --risk-high-tint: rgba(231, 76, 60, 0.08);
    --risk-med: #F39C12;
    --risk-med-tint: rgba(243, 156, 18, 0.09);
    --risk-good: #26B050;
    --risk-good-tint: rgba(38, 176, 80, 0.08);
    --risk-neutral: var(--text-muted);

    /* ─── Geometry / motion ─── */
    --border-radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --transition: all 0.2s ease;
    /* Resolution-adaptive: grows on wide/high-res displays, normal on laptops. */
    --sidebar-width: clamp(260px, 15vw, 340px);
    --topbar-height: 56px;
}

html[data-theme="light"] {
    /* ═══ Canonical MOTLogs family tokens (--ml-*) — light theme ═══ */
    --ml-bg: #F9FAFB;
    --ml-surface-1: #FFFFFF;
    --ml-surface-2: #F1F3F5;
    --ml-surface-3: #FFFFFF;
    --ml-accent: #CC3415;
    --ml-accent-hover: #A82A10;
    --ml-accent-glow: rgba(204, 52, 21, 0.10);
    --ml-text: #1A1A1A;
    --ml-text-secondary: #525252;
    --ml-text-muted: #8B8B8B;
    --ml-border: rgba(0, 0, 0, 0.08);
    --ml-border-strong: rgba(0, 0, 0, 0.15);
    --ml-success: #1D8A3D;
    --ml-warning: #C77A0D;
    --ml-error: #C0392B;
    --ml-info: #2563EB;

    --bg-primary: var(--ml-bg);
    --bg-surface: var(--ml-surface-1);
    --bg-card: var(--ml-surface-1);
    --bg-popover: var(--ml-surface-1);
    --bg-elevated: var(--ml-surface-3);
    --text-primary: var(--ml-text);
    --text-secondary: var(--ml-text-secondary);
    --text-muted: var(--ml-text-muted);
    --border: var(--ml-border);
    --border-strong: var(--ml-border-strong);
    --success: var(--ml-success);
    --warning: var(--ml-warning);
    --error: var(--ml-error);
    --info: var(--ml-info);
    --topbar-bg: rgba(255, 255, 255, 0.85);
    --hover-tint: rgba(16, 18, 27, 0.04);
    --shadow-1: 0 1px 2px rgba(16, 18, 27, 0.06);
    --shadow-2: 0 8px 30px rgba(16, 18, 27, 0.12);
    --shadow-3: 0 24px 60px rgba(16, 18, 27, 0.18), 0 8px 24px rgba(16, 18, 27, 0.1);
    --risk-high-tint: rgba(217, 54, 54, 0.08);
    --risk-med-tint: rgba(199, 122, 13, 0.1);
    --risk-good-tint: rgba(0, 161, 82, 0.08);
}

/* ═══ Themed scrollbar (global — harmless on the marketing site) ═══ */
.member-shell ::-webkit-scrollbar { width: 8px; height: 8px; }
.member-shell ::-webkit-scrollbar-track { background: var(--bg-primary); }
.member-shell ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.member-shell ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ════════════════════ Shell scaffold ════════════════════ */
.member-shell {
    font-family: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Fixed 16px base (matches the Agent) — no viewport scaling. */
    font-size: 1rem;
}

.member-shell h1, .member-shell h2, .member-shell h3,
.member-shell h4, .member-shell h5, .member-shell h6 {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.member-shell h1 { font-size: 1.6rem; }
.member-shell h2 { font-size: 1.3rem; }

.member-shell a { color: var(--accent); text-decoration: none; }
.member-shell a:hover { color: var(--accent-hover); }

/* The shell is a flex layout: fixed sidebar + flexible content column. */
.member-shell .ms-layout {
    display: flex;
    min-height: 100vh;
}

/* ═══ Top bar (Level 1) ═══ */
.member-shell .ms-topbar {
    position: sticky;
    top: 0;
    z-index: 1040;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    background-color: var(--topbar-bg);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--border);
}

/* Family text wordmark — plain "MOTLogs", weight 800, hover accent. */
.member-shell .ms-brand {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    transition: var(--transition);
}
.member-shell .ms-brand:hover { color: var(--accent); }

.member-shell .ms-topbar-spacer { flex: 1 1 auto; }

/* Reg-number search group in the top bar (input + MOT History button). */
.member-shell .ms-reg-search {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
}

/* Icon-style control buttons in the top bar (theme toggle, hamburger). */
.member-shell .ms-iconbtn {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    height: 36px;
    min-width: 36px;
    padding: 0 0.6rem;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: var(--transition);
}
.member-shell .ms-iconbtn:hover { background: var(--bg-elevated); border-color: var(--border-strong); }

.member-shell .ms-user {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ═══ Sidebar (Level 1) ═══ */
.member-shell .ms-sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1045;
}

.member-shell .ms-sidebar-brand {
    min-height: clamp(64px, 6vh, 90px);
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
/* Sidebar brand — family text wordmark (no PNG logo). */
.member-shell .ms-sidebar-brand a {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}
.member-shell .ms-sidebar-brand a:hover { color: var(--accent); }

/* Profile block at the top of the sidebar. */
.member-shell .ms-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: clamp(1.5rem, 2vw, 2.5rem) 1rem;
    border-bottom: 1px solid var(--border);
}
.member-shell .ms-profile .ms-avatar {
    width: clamp(88px, 7vw, 140px);
    height: clamp(88px, 7vw, 140px);
    border-radius: 50%;
    background: var(--bg-elevated) center/cover no-repeat;
    border: 3px solid var(--border-strong);
    box-shadow: var(--shadow-1);
}
.member-shell .ms-profile .ms-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: clamp(1rem, 0.9vw, 1.4rem);
    text-align: center;
}

.member-shell .ms-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    flex: 1 1 auto;
}

.member-shell .ms-nav-section {
    padding: 0.85rem 1.25rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.member-shell .ms-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 4px 10px;
    padding: clamp(0.8rem, 0.8vw, 1.15rem) clamp(0.9rem, 0.85vw, 1.25rem);
    border-radius: var(--radius-sm);
    color: var(--text-secondary) !important;
    font-size: clamp(1.1rem, 0.65vw, 1.4rem);
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
}
.member-shell .ms-nav-link:hover {
    background-color: var(--bg-elevated);
    color: var(--text-primary) !important;
}
.member-shell .ms-nav-link.active {
    background-color: var(--accent-glow);
    color: var(--accent) !important;
}
/* Crisp accent rail on the active nav item. */
.member-shell .ms-nav-link.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--accent);
}
.member-shell .ms-nav-link .ms-nav-icon {
    width: clamp(1.6rem, 0.95vw, 2.2rem);
    height: clamp(1.6rem, 0.95vw, 2.2rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.member-shell .ms-nav-link img.ms-nav-icon {
    object-fit: contain;
    /* The Menu*.png glyphs are WHITE line-art: show as-is on the dark sidebar,
       and invert to dark for the light theme so they don't vanish on white. */
    filter: none;
}
html[data-theme="light"] .member-shell .ms-nav-link img.ms-nav-icon { filter: invert(1); }

.member-shell .ms-nav-danger { color: var(--error) !important; }

/* ═══ Content column ═══ */
.member-shell .ms-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.member-shell .ms-content {
    flex: 1 0 auto;
    padding: 1.75rem;
}

/* ═══ Footer ═══ */
.member-shell .ms-footer {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 1.75rem 1.5rem 1.25rem;
    margin-top: auto;
}
.member-shell .ms-footer a { color: var(--text-secondary); }
.member-shell .ms-footer a:hover { color: var(--accent); }
.member-shell .ms-footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
}
.member-shell .ms-footer-right { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.member-shell .ms-footer-bottom {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.member-shell .ms-footer-bottom a { color: var(--text-muted); text-decoration: none; }
.member-shell .ms-footer-bottom a:hover { color: var(--accent); }
.member-shell .ms-footer-ogl { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-muted); }

/* Family bar — hub variant (MOTLogs products: Agent · Scout · Wiki) */
.member-shell .ms-footer-family-bar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.member-shell .ms-footer-family-bar a { color: var(--text-secondary); font-weight: 600; }
.member-shell .ms-footer-family-bar a:hover { color: var(--accent); }

/* ═══ Backdrop for the mobile drawer ═══ */
.member-shell .ms-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1043;
}

/* ════════════════════ Cards & surfaces ════════════════════ */
.member-shell .glass-card,
.member-shell .ms-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-1);
    transition: var(--transition);
}
.member-shell .glass-card:hover,
.member-shell .ms-card:hover { border-color: var(--border-strong); }

/* High-elevation card (Level 3) — used for Bento panels inside sheets/modals. */
.member-shell .ms-bento {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-1);
}
.member-shell .ms-bento-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 767.98px) {
    .member-shell .ms-bento-grid { grid-template-columns: 1fr; }
}

/* ════════════════════ Buttons ════════════════════ */
.member-shell .btn-primary,
.member-shell .btn-primary-mot {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
    transition: var(--transition);
}
.member-shell .btn-primary:hover,
.member-shell .btn-primary-mot:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    box-shadow: 0 4px 16px var(--accent-glow);
}

.member-shell .text-muted { color: var(--text-secondary) !important; }

/* ════════════════════ Sleek horizontal tab bar ════════════════════
   For the sub-navigation (Vehicles / Compliance / Documents, etc.).
   Active state = crisp bottom accent indicator + soft glow, not a block. */
.member-shell .ms-tabs {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow-x: auto;
}
.member-shell .ms-tab {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.7rem 1.1rem;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: var(--transition);
}
.member-shell .ms-tab:hover { color: var(--text-primary); background: var(--hover-tint); }
.member-shell .ms-tab.active { color: var(--text-primary); background: var(--accent-glow); }
.member-shell .ms-tab.active::after {
    content: "";
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: -1px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* ════════════════════ Segmented control ════════════════════
   For inner modal sub-tabs (Details / Comment / Test History). */
.member-shell .ms-segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.member-shell .ms-segmented > * {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}
.member-shell .ms-segmented > *:hover { color: var(--text-primary); }
.member-shell .ms-segmented > .active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: var(--shadow-1);
}

/* ════════════════════ Toolbar wrapper ════════════════════
   Groups a primary action + search + view toggles into one bar that sits
   directly on top of the data card (organisations, vehicles, …). */
.member-shell .ms-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.member-shell .ms-toolbar-spacer { flex: 1 1 auto; }
.member-shell .ms-toolbar-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); letter-spacing: -0.01em; }
/* When a toolbar sits on a card, square off the card's top corners. */
.member-shell .ms-toolbar + .ms-card,
.member-shell .ms-toolbar + .glass-card,
.member-shell .ms-toolbar + .e-grid {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ════════════════════ Upload dropzone ════════════════════ */
.member-shell .ms-dropzone,
.member-shell .e-upload .e-file-drop-area,
.member-shell .e-upload {
    background: var(--bg-primary);
    border: 1.5px dashed var(--border-strong) !important;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    transition: var(--transition);
}
.member-shell .ms-dropzone:hover,
.member-shell .ms-dropzone.dragover,
.member-shell .e-upload:hover {
    border-color: var(--accent) !important;
    background: var(--accent-glow);
    box-shadow: 0 0 0 4px var(--accent-glow), inset 0 0 40px var(--accent-glow);
    color: var(--text-primary);
}

/* ════════════════════ Native form controls in the shell ════════════════════ */
.member-shell input:not([type=checkbox]):not([type=radio]):not(.e-input),
.member-shell select,
.member-shell textarea {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    transition: var(--transition);
}
.member-shell input:not([type=checkbox]):not([type=radio]):not(.e-input):focus,
.member-shell select:focus,
.member-shell textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring-accent);
}
.member-shell input::placeholder,
.member-shell textarea::placeholder { color: var(--text-muted); }

/* ════════════════════ Syncfusion overrides (member area) ════════════════════
   The Syncfusion tailwind-dark.css theme (matching the Agent) handles most
   colours when the dark stylesheet is swapped in. These rules align the custom
   MOTLogs Syncfusion classes with the token palette, elevation, and accent. */

/* App bar / toolbar chrome — repaint the hardcoded navy onto tokens. */
.member-shell .e-appbar.custom-appbar,
.member-shell .custom-appbar,
.member-shell .e-toolbar,
.member-shell .e-toolbar .e-toolbar-items,
.member-shell .e-toolbar .e-toolbar-item .e-tbar-btn,
.member-shell .sidebar-top-row {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Primary-ish Syncfusion buttons → accent. */
.member-shell .e-btn.e-primary,
.member-shell .e-btn.e-info,
.member-shell .appbar-action-button,
.member-shell .custom-button {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition);
}
.member-shell .e-btn.e-primary:hover,
.member-shell .e-btn.e-info:hover,
.member-shell .appbar-action-button:hover,
.member-shell .custom-button:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px var(--accent-glow);
}

/* Plain flat app-bar nav buttons. */
.member-shell .custom-appbar-button {
    color: var(--text-secondary) !important;
    font-family: 'Inter', sans-serif !important;
}
.member-shell .custom-appbar-button:hover {
    color: var(--text-primary) !important;
    background: var(--bg-elevated) !important;
    transform: none !important;
}

/* Inputs / textboxes inside the shell — taller, 8px, focus ring.
   Includes .e-float-input (no .e-input-group class) + readonly/disabled slate. */
.member-shell .e-input-group,
.member-shell .e-input,
.member-shell .custom-textbox .e-input-group,
.member-shell .custom-textbox .e-input,
.member-shell .e-float-input,
.member-shell .e-float-input.e-control-wrapper,
.member-shell .e-float-input input,
.member-shell .e-input-group.e-disabled,
.member-shell .e-float-input.e-disabled,
.member-shell .e-input-group .e-input[readonly],
.member-shell .e-float-input input[readonly] {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: var(--radius-sm) !important;
    border-color: var(--border-strong) !important;
    transition: var(--transition);
}
.member-shell .e-input-group:not(.e-float-input) { padding: 2px 4px; }
.member-shell .e-input-group.e-input-focus,
.member-shell .e-input-group:focus-within {
    border-color: var(--accent) !important;
    box-shadow: var(--ring-accent) !important;
}

/* Cards. */
.member-shell .e-card {
    background: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-1);
}

/* ─── Data grids: calm borders, soft row hover, minimal pagination ─── */
.member-shell .e-grid {
    border-color: var(--border) !important;
    border-radius: var(--border-radius) !important;
    overflow: hidden;
}
/* The tailwind-dark theme paints .e-gridcontent/.e-content/.e-table slate-navy
   (#1f2937) — flatten ALL grid surfaces so the neutral card shows through. */
.member-shell .e-grid,
.member-shell .e-grid .e-gridcontent,
.member-shell .e-grid .e-content,
.member-shell .e-grid .e-table { background: transparent !important; color: var(--text-primary) !important; }
/* Same slate paint on footer/summary/grouping chrome → neutral surface. */
.member-shell .e-grid .e-gridfooter,
.member-shell .e-grid .e-summaryrow .e-summarycell,
.member-shell .e-grid .e-summarycell,
.member-shell .e-grid .e-groupdroparea,
.member-shell .e-grid .e-groupcaption,
.member-shell .e-grid .e-indentcell,
.member-shell .e-grid .e-recordplusexpand,
.member-shell .e-grid .e-recordpluscollapse {
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
}
.member-shell .e-grid .e-headercell,
.member-shell .e-grid .e-gridheader {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
    font-weight: 600;
    text-transform: none;
}
.member-shell .e-grid .e-row .e-rowcell {
    border-color: var(--border) !important;
    background: transparent !important;
}
.member-shell .e-grid .e-row:hover .e-rowcell { background: var(--hover-tint) !important; }
/* Pagination — crisp minimal wrappers. */
.member-shell .e-grid .e-gridpager,
.member-shell .e-pager {
    background: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}
.member-shell .e-pager .e-numericitem {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-radius: 6px !important;
}
.member-shell .e-pager .e-numericitem:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }
.member-shell .e-pager .e-currentitem,
.member-shell .e-pager .e-currentitem:hover {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 6px !important;
}

/* ════════════════════ Orange focus everywhere (was Syncfusion blue) ════════════════════
   Global (member + public + portalled popups): any clicked/focused grid cell,
   header, input, pager item or button uses the accent, never blue. High
   specificity so it beats the Syncfusion theme's own focus rule. */
.e-grid.e-default .e-gridcontent td.e-rowcell.e-focus.e-focused,
.e-grid.e-default .e-gridheader th.e-headercell.e-focus.e-focused,
.e-grid .e-gridcontent td.e-rowcell.e-focus.e-focused,
.e-grid td.e-rowcell.e-focus.e-focused,
.e-grid td.e-focused,
.e-grid .e-gridcontent td.e-focused,
.e-grid th.e-headercell.e-focused,
.e-grid td.e-groupcaption.e-focused {
    box-shadow: inset 0 0 0 2px var(--accent) !important;
    border-color: var(--accent) !important;
    outline: none !important;
}

/* Loading spinner → accent (Syncfusion default stroke is #0d6efd blue). */
.e-spinner-pane .e-spinner-inner .e-spin-material,
.e-spinner-pane .e-spinner-inner .e-spin-material3,
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5,
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5v3,
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap4,
.e-spinner-pane .e-spinner-inner .e-spin-tailwind,
.e-spinner-pane .e-spinner-inner .e-spin-tailwind3,
.e-spinner-pane .e-spinner-inner .e-spin-fabric,
.e-spinner-pane .e-spinner-inner .e-spin-fluent,
.e-spinner-pane .e-spinner-inner .e-spin-fluent2,
.e-spinner-pane .e-spinner-inner svg .e-path-circle,
.e-spinner-pane .e-spinner-inner svg .e-path-arc {
    stroke: var(--accent) !important;
}
.e-grid .e-rowcell.e-updatedtd,
.e-grid .e-selectionbackground,
.e-grid td.e-cellselectionbackground {
    background-color: var(--accent-glow) !important;
}
.e-grid .e-row.e-active .e-rowcell,
.e-grid .e-row.e-rowselect .e-rowcell { background-color: var(--accent-glow) !important; }

/* Inputs / dropdowns / textboxes focus → accent ring. */
.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus,
.e-ddl.e-input-group.e-input-focus,
.e-input-group:focus-within,
.form-control:focus, .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

/* Buttons / pager / checkbox / calendar focus rings → accent. */
.e-btn:focus, .e-pager .e-numericitem:focus, .e-pager .e-first:focus,
.e-checkbox-wrapper:focus .e-frame, .e-calendar .e-focused-date .e-day {
    box-shadow: 0 0 0 2px var(--accent-glow) !important;
    outline: none !important;
}

/* Generic keyboard-focus outline. `outline-color` alone cannot recolour the
   browser's default `outline: auto` blue ring — force a solid accent ring. */
*:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: -1px;
}

/* Grid cells never show the UA ring — accent inset shadow instead, so a
   clicked/keyboard-focused cell matches the .e-focused treatment above. */
.e-grid td.e-rowcell:focus,
.e-grid th.e-headercell:focus,
.e-grid td.e-groupcaption:focus {
    outline: none !important;
    box-shadow: inset 0 0 0 2px var(--accent) !important;
}

/* ─── Risk rows: translucent tint + 4px left strip (used by mot-logs grids) ─── */
/* Risk rows keep the classic solid palette in BOTH themes (user preference):
   fixed backgrounds need fixed text colours, not theme tokens. */
.member-shell .e-grid .e-row.bg-100 .e-rowcell { background: #db6f6f !important; color: #fff !important; }
.member-shell .e-grid .e-row.bg-75  .e-rowcell { background: #db7b2b !important; color: #1a1a1a !important; }
.member-shell .e-grid .e-row.bg-25  .e-rowcell { background: #ffe48d !important; color: #1a1a1a !important; }
.member-shell .e-grid .e-row.bg-999 .e-rowcell { background: #81de87 !important; color: #1a1a1a !important; }

/* ─── Charts: rounded, transparent panels that sit inside the dark card ─── */
.member-shell .e-chart,
.member-shell .chart-monthly,
.member-shell .e-accumulationchart {
    border-radius: 10px;
    overflow: hidden;
    background: transparent !important;
}
/* Kill the default white plot background so the card shows through. */
.member-shell .e-chart svg > rect:first-child,
.member-shell .e-accumulationchart svg > rect:first-child,
.member-shell .e-chart .e-chart-focused { fill: transparent !important; }
/* Chart text (axis labels, legend) is SVG — colour with fill, theme-aware. */
.member-shell .e-chart text,
.member-shell .e-accumulationchart text { fill: var(--text-secondary) !important; }

/* ─── Micro-interactions: entrance fade + card hover-lift ─── */
@keyframes ms-fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.member-shell .dashboard-container,
.member-shell .card,
.member-shell .ms-card,
.member-shell .glass-card { animation: ms-fade-in-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; }

.member-shell .e-card { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, border-color 0.2s; }
.member-shell .e-card.performanceCard:hover,
.member-shell .performanceCard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: var(--border-strong) !important;
}
@media (prefers-reduced-motion: reduce) {
    .member-shell *, .member-shell *::before, .member-shell *::after { animation: none !important; transition: none !important; }
}

/* ─── Skeleton shimmer (loading placeholders) ─── */
@keyframes ms-shimmer { 0% { background-position: -450px 0; } 100% { background-position: 450px 0; } }
.member-shell .skeleton {
    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-popover) 50%, var(--bg-elevated) 75%);
    background-size: 900px 100%;
    animation: ms-shimmer 1.4s infinite linear;
    border-radius: 8px;
}
.member-shell .skeleton-overlay { position: absolute; inset: 0; z-index: 2; }
.member-shell .skeleton-chart { width: 100%; height: 150px; }
.member-shell .skeleton-block { width: 100%; height: 100%; min-height: 300px; }

/* FAB. */
.member-shell .e-fab { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.member-shell .e-fab:hover { background-color: var(--accent-hover) !important; }

/* ════════════════════ Body-portalled Syncfusion overlays ════════════════════
   Syncfusion appends dialogs, popups and dropdown popups to <body>, OUTSIDE
   `.member-shell`, so their chrome must be styled at the top level. Guarded to
   dark theme where it matters; member routes default dark. */

/* Level 2 — dropdown / popover surfaces with an ambient shadow. */
.e-popup.e-ddl,
.e-popup.e-popup-open,
.e-dropdown-popup .e-ul,
.e-ddl.e-popup .e-list-parent {
    background: var(--bg-popover) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-2) !important;
    border-radius: var(--radius-sm) !important;
}
.e-dropdownbase .e-list-item:hover,
.e-popup .e-list-item.e-hover,
.e-ddl.e-popup .e-list-item.e-hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }
.e-dropdownbase .e-list-item.e-active,
.e-popup .e-list-item.e-active { color: var(--accent) !important; }

/* Level 3 — modals / popups: blurred backdrop + gradient border + deep shadow. */
.e-dlg-overlay {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.e-dialog {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: var(--border-radius) !important;
    border: 1px solid transparent;
    /* Never exceed the viewport — oversized fixed heights scroll internally. */
    max-width: 96vw !important;
    max-height: 94vh !important;
    /* Soft gradient border via double background + a deep multi-layer shadow. */
    background-image:
        linear-gradient(var(--bg-elevated), var(--bg-elevated)),
        linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02) 40%, transparent 70%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: var(--shadow-3) !important;
}
.e-dialog .e-dlg-header-content,
.e-dialog .e-dlg-header,
.e-dialog .e-dlg-content,
.e-dialog .e-footer-content {
    background: transparent !important;
    color: var(--text-primary);
    border-color: var(--border) !important;
}
.e-dialog .e-dlg-header-content { border-bottom: 1px solid var(--border); position: relative; }

/* Content area scrolls when the dialog is capped to the viewport. */
.e-dialog .e-dlg-content { overflow: auto !important; }

/* Always-visible, well-styled close (X) — some dialogs were rendering it invisibly. */
.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn {
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    z-index: 5;
}
.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn .e-icons,
.e-dialog .e-dlg-header-content .e-icon-dlg-close::before {
    color: var(--text-secondary) !important;
    font-size: 20px !important;
}
.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn:hover { background: var(--hover-tint) !important; }
.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn:hover .e-icons,
.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn:hover .e-icon-dlg-close::before { color: var(--accent) !important; }

/* ════════════════════ No-blue sweep: slate surfaces + cyan states ════════════════════
   The tailwind themes paint control surfaces slate (#1f2937/#374151) and every
   interactive state cyan (#22d3ee). Dialogs/popups portal to <body>, outside
   `.member-shell`, so these overrides live at top level; tokens keep them
   theme-aware. */

/* Inputs / textboxes / pickers inside dialogs — inset on the elevated modal.
   .e-float-input (float-label variant) renders WITHOUT .e-input-group, and
   readonly/disabled states carry their own slate paint — cover them all. */
.e-dialog .e-input-group,
.e-dialog .e-input-group input.e-input,
.e-dialog input.e-input,
.e-dialog textarea.e-input,
.e-dialog .e-float-input,
.e-dialog .e-float-input.e-control-wrapper,
.e-dialog .e-float-input input,
.e-dialog .e-float-input textarea,
.e-dialog .e-input-group.e-disabled,
.e-dialog .e-input-group .e-input[disabled],
.e-dialog .e-input-group .e-input[readonly],
.e-dialog .e-float-input.e-disabled,
.e-dialog .e-float-input input[readonly],
.e-dialog .e-float-input input[disabled] {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
}

/* Links inside dialogs (e.g. Download) — accent, not browser blue. */
.e-dialog a, .e-dialog a .e-icons { color: var(--accent) !important; }
.e-dialog a:hover, .e-dialog a:hover .e-icons { color: var(--accent-hover) !important; }
.e-dialog .e-input-group .e-input-group-icon {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-strong) !important;
}

/* Grids inside dialogs — same flattening as the shell grids. */
.e-dialog .e-grid,
.e-dialog .e-grid .e-gridcontent,
.e-dialog .e-grid .e-content,
.e-dialog .e-grid .e-table { background: transparent !important; color: var(--text-primary) !important; }
.e-dialog .e-grid .e-row .e-rowcell { background: transparent !important; border-color: var(--border) !important; }
.e-dialog .e-grid .e-row:hover .e-rowcell { background: var(--hover-tint) !important; }
.e-dialog .e-grid .e-headercell,
.e-dialog .e-grid .e-gridheader,
.e-dialog .e-toolbar,
.e-dialog .e-toolbar .e-toolbar-items,
.e-dialog .e-toolbar .e-toolbar-item .e-tbar-btn {
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}
.e-dialog .e-pager {
    background: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}
.e-dialog .e-pager .e-numericitem { background: transparent !important; color: var(--text-secondary) !important; }
.e-dialog .e-pager .e-currentitem { background: var(--accent) !important; color: #fff !important; }

/* Plain (non-primary, non-flat) buttons in dialogs — neutral, not slate. */
.e-dialog .e-btn:not(.e-primary):not(.e-flat) {
    background: var(--bg-surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

/* Tabs — cyan indicator + active/hover text → accent. */
.e-tab .e-tab-header .e-indicator { background: var(--accent) !important; }
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon,
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon { color: var(--accent) !important; }

/* Checkbox / radio / switch — cyan checked states → accent. */
.e-checkbox-wrapper .e-frame {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-strong) !important;
}
.e-checkbox-wrapper .e-frame.e-check,
.e-checkbox-wrapper .e-frame.e-stop,
.e-css.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-stop {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.e-radio:checked + label::before {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.e-radio:checked + label:hover::before,
.e-radio:checked:focus + label::before { border-color: var(--accent) !important; }
.e-switch-wrapper .e-switch-on,
.e-switch-wrapper .e-switch-inner.e-switch-active,
.e-switch-wrapper:hover .e-switch-inner.e-switch-active,
.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* Calendar / date-time popups — today + selected day → accent. */
.e-calendar .e-content td.e-today span.e-day,
.e-calendar .e-content td.e-focused-date.e-today span.e-day {
    box-shadow: inset 0 0 0 1px var(--accent) !important;
    color: var(--accent) !important;
}
.e-calendar .e-content td.e-selected span.e-day,
.e-calendar .e-content td.e-today.e-selected span.e-day {
    background-color: var(--accent) !important;
    color: #fff !important;
}
.e-calendar .e-content .e-footer { color: var(--accent) !important; }
.e-calendar .e-footer-container .e-btn.e-today.e-flat.e-primary,
.e-calendar .e-footer-container .e-btn.e-today.e-flat.e-primary:not(:hover) {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--accent) !important;
}

/* Primary buttons — cyan → accent, everywhere (dialogs + portalled UI). */
.e-btn.e-primary, .e-css.e-btn.e-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.e-btn.e-primary:hover, .e-btn.e-primary:focus, .e-btn.e-primary:active,
.e-css.e-btn.e-primary:hover, .e-css.e-btn.e-primary:focus, .e-css.e-btn.e-primary:active {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: #fff !important;
}

/* Pagers — slate chip/container fills and cyan focus/hover → tokens.
   Covers the numeric chips, the «‹›» nav buttons, and their disabled twins. */
.e-pager { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; }
.e-pager .e-pagercontainer { background: transparent !important; border-color: var(--border) !important; }
.e-pager .e-numericitem,
.e-pager .e-firstpage, .e-pager .e-prevpage, .e-pager .e-nextpage, .e-pager .e-lastpage,
.e-pager .e-firstpagedisabled, .e-pager .e-prevpagedisabled,
.e-pager .e-nextpagedisabled, .e-pager .e-lastpagedisabled {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
    border-radius: 6px !important;
}
.e-pager .e-numericitem:hover,
.e-pager .e-pager-default:hover {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}
.e-pager .e-currentitem,
.e-pager .e-currentitem:hover,
.e-pager .e-currentitem.e-numericitem.e-focused {
    background: var(--accent) !important;
    color: #fff !important;
}
.e-pager .e-focused { box-shadow: 0 0 0 2px var(--accent-glow) !important; }

/* Focus rings on buttons / checkboxes / radios / switches — cyan halo → accent glow. */
.e-btn:focus,
.e-checkbox-wrapper:focus .e-frame,
.e-checkbox-wrapper.e-focus .e-frame,
.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-checkbox-wrapper .e-checkbox:active + .e-frame,
.e-radio:focus + label::before,
.e-radio + label:focus::before,
.e-switch-wrapper.e-focus .e-switch-inner,
.e-switch-wrapper:focus .e-switch-inner {
    box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

/* ════════════════════ Responsive: mobile drawer ════════════════════
   Below 992px the sidebar becomes a fixed slide-in drawer. */
@media (max-width: 991.98px) {
    .member-shell .ms-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .member-shell.sidebar-open .ms-sidebar { transform: translateX(0); }
    .member-shell .ms-content { padding: 1rem; }

    /* Top bar wraps: reg search drops to its own full-width row so the
       input is never squeezed out by the action buttons. */
    .member-shell .ms-topbar {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--topbar-height);
        row-gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }
    .member-shell .ms-reg-search {
        order: 10;
        flex: 1 1 100%;
    }
    /* Let the reg input flex to fill the row (overrides the inline 140px). */
    .member-shell .ms-reg-search .e-input-group.custom-textbox,
    .member-shell .ms-reg-search .custom-textbox {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Very narrow phones: collapse "Load data" to its + icon. */
@media (max-width: 575.98px) {
    .member-shell .ms-iconbtn .ms-btn-label { display: none; }
}

@media (min-width: 992px) {
    /* Hamburger only matters on small screens. */
    .member-shell .ms-hamburger { display: none !important; }
    .member-shell .ms-backdrop { display: none; }
}