/* ===================================================================
   EFS EquiForce Solutions — Investment Portal
   Custom styles complementing MudBlazor theme
   =================================================================== */

/* ═══ Design System Tokens ═══ */
:root {
    --page-title-color: #0f172a;
    --page-title-weight: 700;
    --page-title-size: 24px;
    --chart-8: #94a3b8;
    --chart-7: #be123c;
    --chart-6: #14b8a6;
    --chart-5: #7c3aed;
    --chart-4: #3b82f6;
    --chart-3: #d97706;
    --chart-2: #1e293b;
    --chart-1: #08636b;
    --radius-sm: 4px;
    --radius-md: 6px;
    --gips-disclosure-gap: 12px;
    --space-card-pad: 16px;
    --space-section: 24px;
    --space-3xl: 64px;
    --space-2xl: 48px;
    --space-xl: 32px;
    --space-lg: 24px;
    --space-md: 16px;
    --space-sm: 8px;
    --space-xs: 4px;
    --ds-settings-drawer-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    --sidebar-hover: rgba(255, 255, 255, 0.12);
    --ds-settings-drawer-section-clr: #08636b;
    --ds-settings-drawer-border: #d8e0e7;
    --ds-settings-drawer-text: #0f172a;
    --ds-settings-drawer-header-bg: #f8fafc;
    --ds-settings-drawer-bg: #ffffff;
    --text-muted: #64748b;
    --text-main: #0f172a;
    --nav-title: #94a3b8ff;
    --nav-text: #ffffffff;
    --sidebar-bg-bottom: #040a12;
    --sidebar-bg-top: #000e24ff;
    --bg-app: #f4f6f8;
    --ds-danger: #dc2626;
    --ds-success: #059669;
    --ds-border: #d8e0e7;
    --ds-primary-bright: #14b8a6;
    --ds-primary-light: #e0f0f1;
    --ds-primary-dark: #05484e;
    --ds-primary: #08636b;
    --page-title-color: #0f172a;
    --page-title-weight: 700;
    --page-title-size: 24px;
    --chart-8: #94a3b8;
    --chart-7: #be123c;
    --chart-6: #14b8a6;
    --chart-5: #7c3aed;
    --chart-4: #3b82f6;
    --chart-3: #d97706;
    --chart-2: #1e293b;
    --chart-1: #08636b;
    --radius-sm: 4px;
    --radius-md: 6px;
    --gips-disclosure-gap: 12px;
    --space-card-pad: 16px;
    --space-section: 24px;
    --space-3xl: 64px;
    --space-2xl: 48px;
    --space-xl: 32px;
    --space-lg: 24px;
    --space-md: 16px;
    --space-sm: 8px;
    --space-xs: 4px;
    --ds-settings-drawer-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    --sidebar-hover: rgba(255, 255, 255, 0.12);
    --ds-settings-drawer-section-clr: #08636b;
    --ds-settings-drawer-border: #d8e0e7;
    --ds-settings-drawer-text: #0f172a;
    --ds-settings-drawer-header-bg: #f8fafc;
    --ds-settings-drawer-bg: #ffffff;
    --text-muted: #64748b;
    --text-main: #0f172a;
    --nav-title: #94a3b8ff;
    --nav-text: #ffffffff;
    --sidebar-bg-bottom: #040a12;
    --sidebar-bg-top: #000e24ff;
    --bg-app: #f4f6f8;
    --ds-danger: #dc2626;
    --ds-success: #059669;
    --ds-border: #d8e0e7;
    --ds-primary-bright: #14b8a6;
    --ds-primary-light: #e0f0f1;
    --ds-primary-dark: #05484e;
    --ds-primary: #08636b;
    --page-title-color: #0f172a;
    --page-title-weight: 700;
    --page-title-size: 24px;
    --chart-8: #94a3b8;
    --chart-7: #be123c;
    --chart-6: #14b8a6;
    --chart-5: #7c3aed;
    --chart-4: #3b82f6;
    --chart-3: #d97706;
    --chart-2: #1e293b;
    --chart-1: #08636b;
    --radius-sm: 4px;
    --radius-md: 6px;
    --gips-disclosure-gap: 12px;
    --space-card-pad: 16px;
    --space-section: 24px;
    --space-3xl: 64px;
    --space-2xl: 48px;
    --space-xl: 32px;
    --space-lg: 24px;
    --space-md: 16px;
    --space-sm: 8px;
    --space-xs: 4px;
    --ds-settings-drawer-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    --sidebar-hover: rgba(255, 255, 255, 0.12);
    --ds-settings-drawer-section-clr: #08636b;
    --ds-settings-drawer-border: #d8e0e7;
    --ds-settings-drawer-text: #0f172a;
    --ds-settings-drawer-header-bg: #f8fafc;
    --ds-settings-drawer-bg: #ffffff;
    --text-muted: #64748b;
    --text-main: #0f172a;
    --nav-title: #94a3b8ff;
    --nav-text: #ffffffff;
    --sidebar-bg-bottom: #040a12;
    --bg-app: #f4f6f8;
    --ds-danger: #dc2626;
    --ds-success: #059669;
    --ds-white: #ffffffff;
    --ds-border: #d8e0e7;
    --ds-primary-bright: #14b8a6;
    --ds-primary-light: #e0f0f1;
    --ds-primary-dark: #05484e;
    --ds-primary: #08636b;
    /* ── Settings Drawer Design Tokens ─────────────────────────────── */
    --ds-settings-drawer-bg:          #ffffff;
    --ds-settings-drawer-header-bg:   #f8fafc;
    --ds-settings-drawer-text:        #0f172a;
    --ds-settings-drawer-border:      #d8e0e7;
    --ds-settings-drawer-shadow:      -4px 0 24px rgba(0, 0, 0, 0.12);
    --ds-settings-drawer-section-clr: #08636b;

    /* Typography */
    --font-ui: 'Inter', 'Segoe UI', sans-serif;
    --font-data: 'IBM Plex Mono', monospace;

    /* Page Title */
    --page-title-size: 24px;
    --page-title-weight: 700;
    --page-title-color: #0f172a;

    /* Global Color Palette */
    --bg-app: #f4f6f8;
    --sidebar-bg-top: #000e24ff;
    --sidebar-bg-bottom: #040a12;
    --sidebar-hover: rgba(255, 255, 255, 0.12);
    --nav-text: #ffffffff;
    --nav-title: #94a3b8ff;
    --nav-active: #FF8000;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --ds-primary: #08636b;
    --ds-primary-dark: #05484e;
    --ds-primary-light: #e0f0f1;
    --ds-primary-bright: #14b8a6;
    --ds-border: #d8e0e7;
    --ds-white: #ffffffff;
    --ds-success: #059669;
    --ds-danger: #dc2626;
    --ds-bg-subtle: #f8fafc;
    --ds-border-light: #edf2f7;
    --ds-row-hover: #f1f5f9;
    --ds-row-stripe: #fafbfc;

    /* UI Shapes & Shadows */
    --radius-md: 6px;
    --radius-sm: 4px;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* Data Visualization Palette */
    --chart-1: #08636b;
    --chart-2: #1e293b;
    --chart-3: #d97706;
    --chart-4: #3b82f6;
    --chart-5: #7c3aed;
    --chart-6: #14b8a6;
    --chart-7: #be123c;
    --chart-8: #94a3b8;

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-section: 24px;
    --space-card-pad: 16px;
    --gips-disclosure-gap: 12px;

    /* Tell MudBlazor there is no AppBar — prevents drawer/content top offset */
    --mud-appbar-height: 0px;
}

/* Base */
html, body {
    font-family: var(--font-ui);
    background-color: var(--bg-app);
    color: var(--text-main);
    margin: 0;
    padding: 0;
}

/* Page Title */
.page-title {
    font-size: var(--page-title-size) !important;
    font-weight: var(--page-title-weight) !important;
    color: var(--page-title-color) !important;
    line-height: 1.3 !important;
    margin-bottom: var(--space-md);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* Cursor pointer for clickable table rows */
.cursor-pointer { cursor: pointer; }
.cursor-pointer:hover { background-color: rgba(27, 58, 92, 0.04) !important; }

/* KPI card hover effect */
.kpi-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Heatmap cell coloring */
.heatmap-cell {
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    min-width: 60px;
}

/* Data grid dense rows — DS typography rules */
.mud-table-row td { font-size: 0.825rem; }
.mud-table-head th {
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Fix for TemplateColumn headers */
.mud-table-cell { white-space: nowrap; }

/* Allocation table total rows */
.total-row td {
    font-weight: 800 !important;
    background: var(--bg-app) !important;
}

.total-row td strong {
    font-weight: 800;
}

/* Return badge styling overrides — DS colors */
.return-positive { color: var(--ds-success); font-weight: 600; }
.return-negative { color: var(--ds-danger); font-weight: 600; }
.return-zero { color: var(--text-muted); }

/* Timeline styling for account history */
.mud-timeline-item-content { padding-bottom: 1rem; }

/* Card — DS shadow */
.mud-card {
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease;
}
.mud-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* Filter panel */
.filter-panel .mud-select { min-width: 120px; }

/* Print styles */
@media print {
    .mud-appbar, .mud-drawer, .no-print { display: none !important; }
    .mud-main-content { margin: 0 !important; padding: 0 !important; }
}

/* Blazor error boundary */
.blazor-error-boundary {
    background: var(--ds-danger);
    padding: 1rem;
    color: var(--ds-white);
    border-radius: var(--radius-sm);
}
.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Loading skeleton */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, var(--ds-border) 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══ Sidebar Inner Layout ═══ */
.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sidebar-inner .mud-navmenu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 0;
    flex-shrink: 0;
}

/* ═══ Sidebar Brand Area ═══ */
.sidebar-brand {
    display: flex;
    align-items: center;
    padding: 31px 12px 28px 12px;
    gap: 6px;
    background: transparent;
    position: relative;
}

.sidebar-brand::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, var(--ds-primary), var(--ds-primary-bright));
}

.sidebar-logo {
    flex-shrink: 0;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.brand-subtitle {
    color: #FF8000;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    margin-top: -2px;
}

/* ═══ Top-Right User Controls (replaces AppBar) ═══ */
.top-controls {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 1300;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(244, 246, 248, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.top-ctrl-label {
    font-size: 0.8125rem;
    font-family: var(--font-ui);
    color: var(--text-main);
    opacity: 0.75;
    white-space: nowrap;
}

.mud-theme-dark .top-controls {
    background: rgba(13, 17, 23, 0.92);
}

.mud-theme-dark .top-ctrl-label {
    color: #E6EDF3;
}

/* ═══ Sidebar — Nav Overrides ═══ */
.mud-drawer,
.mud-drawer.mud-drawer-clipped-always {
    top: 0 !important;
    height: 100vh !important;
    background: linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bottom) 100%) !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1) !important;
    overflow-x: hidden !important;
}

/* Hide ALL nav icons — sidebar only */
.mud-drawer:not(.ds-settings-drawer) .mud-nav-link .mud-icon-root,
.mud-drawer:not(.ds-settings-drawer) .mud-nav-group .mud-icon-root {
    display: none !important;
}

/* Hide all dividers inside drawer — sidebar only */
.mud-drawer:not(.ds-settings-drawer) .mud-divider {
    display: none !important;
}

/* All nav links — base nav item */
.mud-drawer .mud-nav-link {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--nav-text) !important;
    padding: 12px 24px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.mud-drawer .mud-nav-link:hover {
    background-color: var(--sidebar-hover) !important;
    color: #ffffff !important;
}

/* Active nav link — left accent border */
.mud-drawer .mud-nav-link.active {
    background-color: rgba(255, 128, 0, 0.15) !important;
    color: var(--nav-active) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* Nav link text */
.mud-drawer .mud-nav-link .mud-nav-link-text {
    color: inherit !important;
}

/* Nav group header — direct child .mud-nav-link of .mud-nav-group (confirmed from MudBlazor CSS) */
.mud-drawer .mud-nav-group > .mud-nav-link {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--nav-title) !important;
    padding: 16px 24px 8px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    transition: all 0.2s ease !important;
}

.mud-drawer .mud-nav-group > .mud-nav-link:hover {
    background-color: transparent !important;
    color: var(--nav-title) !important;
}

/* Top-level standalone nav links (Dashboard, Reports) — wrapper div guarantees selector match */
.mud-drawer .nav-standalone .mud-nav-link {
    color: var(--nav-title) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 16px 24px 8px !important;
}

.mud-drawer .nav-standalone .mud-nav-link:hover {
    background-color: transparent !important;
    color: var(--nav-title) !important;
}

.mud-drawer .nav-standalone .mud-nav-link .mud-nav-link-text {
    color: var(--nav-title) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* Nav group title text */
.mud-drawer .mud-nav-group > .mud-nav-link > .mud-nav-link-text {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--nav-title) !important;
}

/* Child nav links inside groups */
.mud-drawer .mud-navmenu .mud-nav-group .mud-collapse-wrapper .mud-nav-link {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--nav-text) !important;
    padding: 12px 24px 12px 36px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

.mud-drawer .mud-navmenu .mud-nav-group .mud-collapse-wrapper .mud-nav-link:hover {
    background-color: var(--sidebar-hover) !important;
    color: #ffffff !important;
}

.mud-drawer .mud-navmenu .mud-nav-group .mud-collapse-wrapper .mud-nav-link.active {
    background-color: rgba(255, 128, 0, 0.15) !important;
    color: var(--nav-active) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* Scrollbar inside drawer */
.mud-drawer ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.mud-drawer ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* (Settings drawer styles are now fully scoped via .razor.css files) */

/* Dark mode overrides */
.mud-theme-dark .cursor-pointer:hover { background-color: rgba(255,255,255,0.04) !important; }
.mud-theme-dark ::-webkit-scrollbar-thumb { background: #555; }
.mud-theme-dark ::-webkit-scrollbar-thumb:hover { background: #777; }

/* Participation matrix */
.participation-matrix {
    border-collapse: collapse;
    font-size: 11px;
    width: max-content;
}

.participation-matrix th,
.participation-matrix td {
    border: 1px solid var(--ds-border);
    padding: 4px 6px;
    text-align: center;
    white-space: nowrap;
}

.participation-matrix th {
    background: var(--bg-app);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
}

.participation-matrix .sticky-col {
    position: sticky;
    left: 0;
    background: var(--ds-white);
    z-index: 3;
    text-align: left;
    min-width: 100px;
}

.participation-matrix .sticky-col-2 {
    position: sticky;
    left: 100px;
    background: var(--ds-white);
    z-index: 3;
    text-align: left;
    min-width: 160px;
}

.participation-matrix .sticky-col-3 {
    position: sticky;
    left: 260px;
    background: var(--ds-white);
    z-index: 3;
    text-align: center;
    min-width: 60px;
}

.participation-matrix thead th.sticky-col,
.participation-matrix thead th.sticky-col-2,
.participation-matrix thead th.sticky-col-3 {
    z-index: 4;
}

.month-header {
    font-size: 9px;
    min-width: 60px;
}

.cell-included { background: #e8f5e9; }
.cell-excluded { background: #ffebee; }
.cell-empty    { background: #fafafa; }

.matrix-x    { color: #2e7d32; font-weight: bold; }
.matrix-dash { color: #c62828; font-weight: bold; }

.mud-theme-dark .participation-matrix th { background: #333; }
.mud-theme-dark .participation-matrix .sticky-col,
.mud-theme-dark .participation-matrix .sticky-col-2,
.mud-theme-dark .participation-matrix .sticky-col-3 { background: #424242; }
.mud-theme-dark .cell-included { background: #1b5e20; }
.mud-theme-dark .cell-excluded { background: #b71c1c; }
.mud-theme-dark .cell-empty    { background: #303030; }

/* ═══ Settings Panel — Compact Typography ═══ */
@keyframes settingsSlideIn {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.settings-panel .settings-section {
    margin-bottom: 12px;
}

.settings-panel .settings-section__title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa;
    margin-bottom: 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid #f0f0f0;
}

/* Checkbox labels */
.settings-panel .mud-checkbox-content,
.settings-panel .mud-checkbox .mud-typography,
.settings-panel label.mud-checkbox {
    font-size: 11px !important;
    line-height: 1.3 !important;
}

/* Make checkbox icons smaller */
.settings-panel .mud-checkbox .mud-icon-root {
    font-size: 18px !important;
}

/* Select dropdown — input text and label */
.settings-panel .mud-input,
.settings-panel .mud-input-slot,
.settings-panel .mud-input > input,
.settings-panel .mud-select .mud-input,
.settings-panel .mud-select .mud-input-slot {
    font-size: 11px !important;
}

.settings-panel .mud-input-label,
.settings-panel .mud-input-label-outlined {
    font-size: 10px !important;
}

/* Select chips inside multi-select */
.settings-panel .mud-chip {
    font-size: 10px !important;
    height: 20px !important;
}

/* Button text */
.settings-panel .mud-button-label {
    font-size: 10px !important;
}

/* Dividers */
.settings-panel .mud-divider {
    margin: 8px 0 !important;
}

/* Overall tighter spacing */
.settings-panel .mud-select {
    margin-bottom: 6px;
}

.settings-panel .mud-checkbox {
    margin-bottom: 0px;
    padding: 1px 0;
}

/* Date range preset chips */
.date-preset-chip {
    font-weight: 500 !important;
    letter-spacing: 0.02em;
}

/* ═══ Design System — Living Style Guide Utilities ═══ */

/* Color swatch for the Design System page */
.ds-swatch {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    border: 1px solid var(--ds-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: white;
    font-family: var(--font-data);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Typography specimen using data font */
.ds-font-data {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

/* DS page section header */
.ds-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--ds-primary);
}

/* DS primary button demo */
.ds-btn-primary {
    width: 100%;
    background: var(--ds-primary);
    color: white;
    border: none;
    padding: 14px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ds-btn-primary:hover {
    background: var(--ds-primary-dark);
}

/* DS icon button demo */
.ds-icon-btn {
    background: none;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-sm);
    padding: 8px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ds-icon-btn:hover {
    background: var(--bg-app);
    color: var(--text-main);
}

/* DS toggle switch */
.ds-switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
    border: none;
    padding: 0;
}
.ds-switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ds-switch.on {
    background: var(--ds-primary);
}
.ds-switch.on::after {
    transform: translateX(16px);
}

/* DS badge */
.ds-badge {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-block;
}
.ds-badge-high {
    background: #d1fae5;
    color: #065f46;
}
.ds-badge-med {
    background: #fef3c7;
    color: #92400e;
}

/* DS market status pill */
.ds-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--ds-border);
    background: var(--ds-white);
    font-size: 12px;
    font-weight: 500;
}
.ds-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ds-success);
    box-shadow: 0 0 0 2px #d1fae5;
}

/* DS layout dimension reference */
.ds-layout-ref {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-app);
    border-radius: var(--radius-md);
    border: 1px solid var(--ds-border);
    margin-bottom: 8px;
}
.ds-layout-ref-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    min-width: 140px;
}
.ds-layout-ref-value {
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Part 2: Components (Building Blocks)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── DS Buttons ─── */
.btn-primary {
    width: 100%;
    background: var(--ds-primary);
    color: var(--ds-white);
    border: none;
    padding: 14px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-primary:hover {
    background: var(--ds-primary-dark);
}

.icon-btn {
    background: none;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-sm);
    padding: 8px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover {
    background: var(--bg-app);
    color: var(--text-main);
}

/* ─── DS Toggle Switch ─── */
.ds-switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.ds-switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--ds-white);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}
.ds-switch.on {
    background: var(--ds-primary);
}
.ds-switch.on::after {
    transform: translateX(16px);
}

/* ─── DS Checkboxes ─── */
.ds-checkbox {
    accent-color: var(--ds-primary);
    margin-right: 10px;
}

/* ─── DS Status Indicators & Badges ─── */
.market-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--ds-border);
    background: var(--ds-white);
    font-size: 13px;
}
.market-status-pill .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ds-success);
    box-shadow: 0 0 0 2px #d1fae5;
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-high {
    background: #d1fae5;
    color: #065f46;
}
.badge-med {
    background: #fef3c7;
    color: #92400e;
}
.badge-low {
    background: #fee2e2;
    color: #991b1b;
}

/* ─── DS Numeric / Data Font ─── */
.font-data,
.ds-numeric {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

/* ─── DS KPI Label ─── */
.ds-kpi-label {
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #64748b);
    margin-bottom: 4px;
    line-height: 1.2;
}

/* ─── DS KPI Value ─── */
.ds-kpi-value {
    font-family: var(--font-data, 'IBM Plex Mono', monospace);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--text-main, #0f172a);
}

/* ═══ Design System — KPI Card Pattern ═══ */

/* KPI card container — standardized elevation and padding */
.ds-kpi-card {
    height: 100%;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--ds-border, #d8e0e7);
    box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.04));
    padding: 20px;
    background: var(--ds-white, #ffffff);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* KPI value color variants */
.ds-kpi-value--positive {
    color: var(--ds-success, #059669);
}
.ds-kpi-value--negative {
    color: var(--ds-danger, #dc2626);
}
.ds-kpi-value--neutral {
    color: var(--text-main, #0f172a);
}

/* KPI subtitle — smaller muted text below value */
.ds-kpi-subtitle {
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 4px;
    opacity: 0.8;
}

/* KPI trend icon alignment */
.ds-kpi-trend {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Part 3: Patterns & Layouts
   ═══════════════════════════════════════════════════════════════════ */

/* ─── DS Table Wrapper ─── */
.ds-table-wrapper {
    background: var(--ds-white);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    padding: 0;
}
.ds-table-wrapper .ds-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #fafcff;
    border-bottom: 1px solid var(--ds-border);
}

/* ─── DS Table Elements ─── */
.ds-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.ds-table th {
    text-align: left;
    padding: 12px 16px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--ds-border);
}
.ds-table th.text-right {
    text-align: right;
}
.ds-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.8125rem;
}
.ds-table tbody tr:hover {
    background: #f8fafc;
}

/* ─── DS Weight / Progress Bar ─── */
.ds-weight-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}
.ds-weight-bar .ds-weight-fill {
    height: 100%;
    background: var(--ds-primary);
    border-radius: 2px;
}
.ds-weight-label {
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 500;
}

/* ─── DS Card ─── */
.ds-card {
    background: var(--ds-white);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 20px;
}

/* ─── DS KPI Grid (4-column) ─── */
.ds-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1200px) {
    .ds-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ds-kpi-grid { grid-template-columns: 1fr; }
}

/* ─── MudBlazor Overrides for DS Alignment ─── */

/* Ensure MudBlazor numeric cells use tabular-nums */
.mud-table-cell .ds-numeric,
.mud-table-cell .font-data {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

/* MudBlazor paper/card border alignment */
.mud-paper {
    border-radius: var(--radius-md);
}

/* MudBlazor input border radius alignment */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--radius-sm);
}

/* MudBlazor chip border radius */
.mud-chip {
    border-radius: var(--radius-sm);
}

/* MudBlazor button border radius */
.mud-button-root {
    border-radius: var(--radius-sm);
}

/* ─── MudBlazor v9 DataGrid Column Resize Fix ─── */
/* MudBlazor v9.0.0 renders .mud-resizer { position:absolute; top:0; right:0; width:8px; }
   but its built-in JS event binding is unreliable in Blazor Server interactive mode.
   A companion columnResize.js script overrides the drag behaviour with a robust custom
   implementation that survives Blazor re-renders via MutationObserver.
   Fix A: position:relative on <th> makes it the containing block for the handle.
   Fix B: top/bottom anchor constraints stretch the handle to the full header-cell height.
   Fix C: pointer-events:all and cursor:col-resize ensure the handle is always grabbable.
   Fix D: z-index:10 keeps the handle above cell content and sort icons.
   Fix E: the visual separator border extends into data rows so the column boundary is
          visible across the full table height. */

/* 1. Make each header <th> a containing block; do NOT clip the handle */
.mud-data-grid th.mud-table-cell {
    position: relative;
    overflow: visible;
}

/* 2. Size, stretch and style the resize handle */
.mud-data-grid th.mud-table-cell .mud-resizer {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 8px !important;
    height: auto !important;
    z-index: 10;
    pointer-events: all !important;
    cursor: col-resize !important;
}

/* 3. Visual separator on header cells */
.mud-data-grid th.mud-table-cell {
    border-right: 1px solid var(--ds-border-light, #edf2f7);
}

/* 4. Extend the visual separator through data rows */
.mud-data-grid td.mud-table-cell {
    border-right: 1px solid var(--ds-border-light, #edf2f7);
}

/* 5. Remove separator from last column */
.mud-data-grid th.mud-table-cell:last-child,
.mud-data-grid td.mud-table-cell:last-child {
    border-right: none;
}

/* ═══ Design System — Data Table Pattern ═══ */

/* DS table container — consistent card treatment */
.ds-table-container {
    border: 1px solid var(--ds-border, #d8e0e7);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.04));
    overflow: hidden;
    background: var(--ds-white, #ffffff);
}

/* DS table header row — uppercase, muted, small */
.ds-table-container .mud-table-head th,
.ds-table-container .mud-table-head .mud-table-cell,
.ds-table th {
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #64748b);
    background: var(--ds-bg-subtle, #f8fafc);
    border-bottom: 2px solid var(--ds-border, #d8e0e7);
    padding: 10px 12px;
    white-space: nowrap;
}

/* DS table body cells */
.ds-table-container .mud-table-row td,
.ds-table td {
    font-size: 0.825rem;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ds-border-light, #edf2f7);
    color: var(--text-main, #0f172a);
}

/* DS table numeric cells — monospace */
.ds-table-container .mud-table-row td.ds-numeric,
.ds-table td.ds-numeric,
.ds-table-container .font-data,
td.font-data {
    font-family: var(--font-data, 'IBM Plex Mono', monospace);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Ensure inner div/span wrappers inside numeric cells also right-align */
.ds-table-container .mud-table-row td.ds-numeric > div,
.ds-table-container .mud-table-row td.ds-numeric .mud-typography {
    text-align: right;
}

/* DS table hover rows */
.ds-table-container .mud-table-row:hover td,
.ds-table tbody tr:hover td {
    background: var(--ds-row-hover, #f1f5f9);
    transition: background 0.12s ease;
}

/* DS table striped rows */
.ds-table-container .mud-table-row:nth-child(even) td,
.ds-table tbody tr:nth-child(even) td {
    background: var(--ds-row-stripe, #fafbfc);
}
.ds-table-container .mud-table-row:nth-child(even):hover td,
.ds-table tbody tr:nth-child(even):hover td {
    background: var(--ds-row-hover, #f1f5f9);
}

/* DS table total/summary row */
.ds-table-container .total-row td,
.ds-table .total-row td {
    font-weight: 800 !important;
    background: var(--ds-bg-subtle, #f8fafc) !important;
    border-top: 2px solid var(--ds-border, #d8e0e7);
}
.ds-table-container .total-row td strong {
    font-weight: 800;
}

/* DS progress bar in tables */
.ds-table-container .mud-progress-linear {
    height: 6px;
    border-radius: 3px;
}
.ds-table-container .mud-progress-linear .mud-progress-linear-bar {
    border-radius: 3px;
}

/* DS table section title (panel header above table) */
.ds-table-title {
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main, #0f172a);
    margin-bottom: 12px;
}

/* DS table caption/subtitle */
.ds-table-caption {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    margin-bottom: 8px;
}

/* ═══ Design System — Spacing Utilities ═══ */

.ds-gap-xs  { gap: var(--space-xs); }
.ds-gap-sm  { gap: var(--space-sm); }
.ds-gap-md  { gap: var(--space-md); }
.ds-gap-lg  { gap: var(--space-lg); }
.ds-gap-xl  { gap: var(--space-xl); }

.ds-pad-card { padding: var(--space-card-pad); }
.ds-pad-section { padding: var(--space-section); }

.ds-mb-section { margin-bottom: var(--space-section); }
.ds-mb-card    { margin-bottom: var(--space-md); }

.ds-mt-xs  { margin-top: var(--space-xs); }
.ds-mt-sm  { margin-top: var(--space-sm); }
.ds-mt-md  { margin-top: var(--space-md); }
.ds-mt-lg  { margin-top: var(--space-lg); }

.ds-mb-xs  { margin-bottom: var(--space-xs); }
.ds-mb-sm  { margin-bottom: var(--space-sm); }
.ds-mb-md  { margin-bottom: var(--space-md); }
.ds-mb-lg  { margin-bottom: var(--space-lg); }

.ds-py-xs  { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.ds-py-sm  { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.ds-py-md  { padding-top: var(--space-md); padding-bottom: var(--space-md); }

.ds-px-xs  { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.ds-px-sm  { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.ds-px-md  { padding-left: var(--space-md); padding-right: var(--space-md); }