/* ===================================================================
   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: #a8a29e;
    --chart-7: #be123c;
    --chart-6: #65a30d;
    --chart-5: #7c3aed;
    --chart-4: #2563eb;
    --chart-3: #14b8a6;
    --chart-2: #08636b;
    --chart-1: #FF8000;
    --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: #a8a29e;
    --chart-7: #be123c;
    --chart-6: #65a30d;
    --chart-5: #7c3aed;
    --chart-4: #2563eb;
    --chart-3: #14b8a6;
    --chart-2: #08636b;
    --chart-1: #FF8000;
    --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: #a8a29e;
    --chart-7: #be123c;
    --chart-6: #65a30d;
    --chart-5: #7c3aed;
    --chart-4: #2563eb;
    --chart-3: #14b8a6;
    --chart-2: #08636b;
    --chart-1: #FF8000;
    --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:           'Inter', 'Segoe UI', sans-serif;
    --font-selector:       var(--font-ui);   /* selector / dropdown panels */
    --font-size-ui:        12px;             /* base UI text — labels, list rows */
    --font-size-selector:  14px;             /* selector input & trigger text */

    /* 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: #FF8000;
    --chart-2: #08636b;
    --chart-3: #14b8a6;
    --chart-4: #2563eb;
    --chart-5: #7c3aed;
    --chart-6: #65a30d;
    --chart-7: #be123c;
    --chart-8: #a8a29e;

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

/* ── Inter across all form controls ─────────────────────────────── */
input, select, textarea, button, optgroup, option {
    font-family: var(--font-selector);
}

/* ── Selector / dropdown panel — reusable DS utility ───────────── */
/*    Apply .ds-selector-panel to any custom dropdown wrapper to      */
/*    guarantee Inter and DS tokens in the panel and all its children */
.ds-selector-panel,
.ds-selector-panel *,
.ds-selector-panel input,
.ds-selector-panel select,
.ds-selector-panel button,
.ds-selector-panel span,
.ds-selector-panel div {
    font-family: var(--font-selector) !important;
}

/* ── Selector input & trigger — shared DS component style ───────── */
/*    Used by: portfolio search input, price-source trigger, and any  */
/*    future selector built with .portfolio-native-input/select       */
.portfolio-native-input,
.portfolio-native-select {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    font-size: var(--font-size-selector);
    font-weight: 400;
    font-family: var(--font-selector, 'Inter', 'Segoe UI', sans-serif);
    color: var(--text-muted);
    background: white;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.portfolio-native-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}
.portfolio-native-input:hover,
.portfolio-native-select:hover {
    border-color: var(--ds-primary);
}
.portfolio-native-input:focus,
.portfolio-native-select:focus {
    border: 2px solid var(--ds-primary);
    box-shadow: 0 0 0 3px var(--ds-primary-light);
    padding: 0 11px;
}
/* Native select — teal chevron, muted text */
.portfolio-native-select {
    padding-right: 32px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2308636b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 20px 20px;
    cursor: pointer;
}
.portfolio-native-select:focus {
    padding-right: 31px;
}
/* Search-icon wrapper */
.portfolio-native-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.portfolio-search-icon {
    position: absolute;
    left: 10px;
    font-size: var(--font-size-ui);
    color: var(--ds-primary);
    pointer-events: none;
    filter: grayscale(1) opacity(0.5);
}
.portfolio-native-input-wrap .portfolio-native-input {
    padding-left: 32px;
}
.portfolio-native-input-wrap .portfolio-native-input:focus {
    padding-left: 31px;
}
/* Hover highlight for dropdown list rows */
.portfolio-src-row:hover {
    background: var(--ds-row-hover) !important;
    color: var(--text-main) !important;
}

/* ── Selector compound popup panel ──────────────────────────────── */
/*   .ds-selector-popup  — the floating panel card itself            */
/*   .ds-selector-section / --price — section padding wrappers      */
/*   .ds-selector-section-label — PORTFOLIO / PRICE SOURCE heading   */
/*   .ds-selector-list / --source — scrollable list containers       */
/*   .ds-selector-row / --active — list row + selected state         */
/*   .ds-selector-trigger-label — text label inside custom trigger   */
/*   .ds-selector-footer — Apply button row                          */
/*   .ds-selector-apply-btn — Apply button                           */

.ds-selector-popup {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    width: 340px;
    background: white;
    z-index: 9999;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
    animation: settingsSlideIn 0.12s ease-out;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.ds-selector-section {
    padding: 10px 14px 8px 14px;
}
.ds-selector-section--price {
    padding: 8px 14px 12px 14px;
}
.ds-selector-section-label {
    font-size: var(--font-size-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-bottom: 6px;
}
.ds-selector-list {
    max-height: 180px;
    overflow-y: auto;
    margin-top: 4px;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-sm);
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.ds-selector-list--source {
    margin-top: 2px;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.ds-selector-row {
    padding: 6px 10px;
    cursor: pointer;
    font-size: var(--font-size-ui);
    font-family: var(--font-selector, 'Inter', 'Segoe UI', sans-serif);
    color: var(--text-main);
    background: transparent;
}
.ds-selector-row:hover {
    background: var(--ds-row-hover);
}
.ds-selector-row--active {
    background: var(--ds-primary) !important;
    color: white !important;
}
/* Text label inside a custom trigger (e.g. Price Source trigger div) */
.ds-selector-trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: var(--font-size-selector);
    font-family: var(--font-selector, 'Inter', 'Segoe UI', sans-serif);
    font-weight: 400;
}
.ds-selector-footer {
    padding: 10px 14px 12px 14px;
    display: flex;
    justify-content: flex-end;
}
.ds-selector-apply-btn {
    height: 32px;
    padding: 0 18px;
    font-size: var(--font-size-ui);
    font-weight: 600;
    background: var(--ds-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-selector, 'Inter', 'Segoe UI', sans-serif);
    transition: background 0.15s;
}
.ds-selector-apply-btn:hover {
    background: var(--ds-primary-dark);
}

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

/* ──────────────────────────────────────────────────────────────────────────
   Composite page header — shared "box 1" treatment promoted from the GIPS
   Reports page so every composite page renders an identical orange-accented
   title sitting directly above a dark-teal gradient toolbar that hosts the
   Select Composite / Date Range / Price Source controls. Mirrors
   CompositeGipsReports.razor.css but uses plain descendant selectors (instead
   of scoped ::deep) so it applies on non-scoped pages too.
   ────────────────────────────────────────────────────────────────────────── */

/* Orange left-accent strip + bold teal title text. */
.cgips-title-accent {
    border-left: 3px solid #FF8000;
    padding-left: 10px;
}

.cgips-title-accent .mud-typography {
    font-weight: 700;
    color: #05484e;
    line-height: 1.2;
    margin-bottom: 0;
}

/* Dark-teal gradient toolbar bar. */
.cgips-toolbar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    background: linear-gradient(135deg, #05484e 0%, #08636b 60%, #0a7880 100%);
    padding: 8px 14px;
    margin-bottom: 16px;
}

.cgips-toolbar-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    /* Keep the bar the same height whether or not it hosts controls, so empty
       toolbars (e.g. Composite Rules) match pages that contain Size.Small
       selector buttons. 30.75px is the rendered height of a Size.Small button. */
    min-height: 30.75px;
}

/* White-on-teal hover affordance for the selector buttons in the toolbar. */
.cgips-toolbar .mud-button-root:hover {
    background: rgba(255, 255, 255, 0.30) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

.cgips-toolbar .mud-button-root .mud-icon-root {
    color: #ffffff;
}

/* Frosted white-on-teal selector button so toolbar controls match box 1. */
.cgips-toolbar-btn {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    min-width: 200px;
    justify-content: space-between !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.20) !important;
}

/* Context bar (date range selector + filter summary strip) */
.context-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Context bar selector buttons – frosted navy, borderless, square corners */
.ds-ctx-btn {
    background: rgba(8, 99, 107, 0.06) !important;
    border: 1px solid rgba(8, 99, 107, 0.18) !important;
    border-radius: 4px !important;
    color: var(--ds-primary) !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.ds-ctx-btn:hover {
    background: rgba(8, 99, 107, 0.12) !important;
    border-color: rgba(8, 99, 107, 0.30) !important;
}
.ds-ctx-btn.ds-ctx-btn--active {
    background: var(--ds-primary) !important;
    color: #ffffff !important;
}

/* Context bar autocomplete — matches ds-ctx-btn frosted teal style */
.ds-ctx-autocomplete .mud-input-control {
    margin: 0 !important;
    padding: 0 !important;
}
/* Outer wrapper div carries the frosted-teal background */
.ds-ctx-autocomplete .mud-input {
    background: rgba(8, 99, 107, 0.06) !important;
    border-radius: 4px !important;
    min-height: 36px !important;
    height: 36px !important;
    border: none !important;
    box-shadow: none !important;
}
.ds-ctx-autocomplete .mud-input:hover {
    background: rgba(8, 99, 107, 0.12) !important;
}
/* The actual <input> element must be transparent to avoid double-stacking
   the semi-transparent teal (MudBlazor puts mud-input-root on the <input>) */
.ds-ctx-autocomplete .mud-input-root {
    background: transparent !important;
    padding: 0 8px !important;
    min-height: 36px !important;
    height: 36px !important;
    border: none !important;
    box-shadow: none !important;
}
/* Remove the underline from Variant.Text — targets the pseudo-elements on both
   .mud-input-root and .mud-input-underline (MudBlazor 9 renders it on the latter) */
.ds-ctx-autocomplete .mud-input-root::before,
.ds-ctx-autocomplete .mud-input-root::after,
.ds-ctx-autocomplete .mud-input::before,
.ds-ctx-autocomplete .mud-input::after,
.ds-ctx-autocomplete .mud-input-underline::before,
.ds-ctx-autocomplete .mud-input-underline::after {
    border: none !important;
    border-bottom: none !important;
    display: none !important;
}
.ds-ctx-autocomplete input {
    color: var(--ds-primary) !important;
    font-size: var(--font-size-selector) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 36px !important;
    background: transparent !important;
}
.ds-ctx-autocomplete .mud-input-adornment {
    color: var(--ds-primary) !important;
    margin-bottom: 0 !important;
}
/* Remove MudBlazor's helper-text / label spacer below the control */
.ds-ctx-autocomplete .mud-input-helper-text { display: none !important; }
.ds-ctx-autocomplete .mud-input-label { display: none !important; }
/* Suppress MudBlazor's text-button ::before hover overlay for these buttons */
.ds-ctx-btn::before {
    display: none !important;
}

/* Context bar date picker — matches ds-ctx-btn / ds-ctx-autocomplete frosted teal style */
.ds-ctx-date-picker-wrap {
    display: inline-flex;
    width: fit-content;
    flex-shrink: 0;
}
.ds-ctx-date-picker .mud-input-control {
    margin: 0 !important;
    padding: 0 !important;
}
.ds-ctx-date-picker .mud-input {
    background: rgba(8, 99, 107, 0.06) !important;
    border-radius: 4px !important;
    min-height: 36px !important;
    height: 36px !important;
    border: none !important;
    box-shadow: none !important;
}
.ds-ctx-date-picker .mud-input:hover {
    background: rgba(8, 99, 107, 0.12) !important;
}
.ds-ctx-date-picker .mud-input-root {
    background: transparent !important;
    padding: 0 8px !important;
    min-height: 36px !important;
    height: 36px !important;
    border: none !important;
    box-shadow: none !important;
}
.ds-ctx-date-picker .mud-input-root::before,
.ds-ctx-date-picker .mud-input-root::after,
.ds-ctx-date-picker .mud-input::before,
.ds-ctx-date-picker .mud-input::after,
.ds-ctx-date-picker .mud-input-underline::before,
.ds-ctx-date-picker .mud-input-underline::after {
    border: none !important;
    border-bottom: none !important;
    display: none !important;
}
.ds-ctx-date-picker input {
    color: var(--ds-primary) !important;
    font-size: var(--font-size-selector) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 36px !important;
    background: transparent !important;
    width: 82px !important;
    min-width: 82px !important;
    text-align: center !important;
}
.ds-ctx-date-picker .mud-input-adornment {
    color: var(--ds-primary) !important;
    margin-bottom: 0 !important;
}
.ds-ctx-date-picker .mud-input-helper-text { display: none !important; }
.ds-ctx-date-picker .mud-input-label { display: none !important; }

/* Context bar date picker dark variant — for use on dark gradient toolbar backgrounds */
.ds-ctx-date-picker.ds-ctx-date-picker--dark .mud-input {
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
.ds-ctx-date-picker.ds-ctx-date-picker--dark .mud-input:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}
.ds-ctx-date-picker.ds-ctx-date-picker--dark input {
    color: #ffffff !important;
}
.ds-ctx-date-picker.ds-ctx-date-picker--dark .mud-input-adornment {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Context bar select — MudSelect controls on dark gradient toolbar backgrounds */
.ds-ctx-select .mud-input-control {
    margin: 0 !important;
    padding: 0 !important;
}
.ds-ctx-select .mud-input {
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 4px !important;
    min-height: 36px !important;
    height: 36px !important;
    box-shadow: none !important;
}
.ds-ctx-select .mud-input:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}
.ds-ctx-select .mud-input-root {
    background: transparent !important;
    padding: 0 8px !important;
    min-height: 36px !important;
    height: 36px !important;
    color: #ffffff !important;
    font-size: var(--font-size-selector) !important;
}
.ds-ctx-select .mud-input-root::before,
.ds-ctx-select .mud-input-root::after,
.ds-ctx-select .mud-input::before,
.ds-ctx-select .mud-input::after,
.ds-ctx-select .mud-input-underline::before,
.ds-ctx-select .mud-input-underline::after {
    border: none !important;
    border-bottom: none !important;
    display: none !important;
}
.ds-ctx-select .mud-select-input,
.ds-ctx-select .mud-input-slot {
    color: #ffffff !important;
    font-size: var(--font-size-selector) !important;
}
.ds-ctx-select .mud-input-adornment,
.ds-ctx-select .mud-input-adornment svg {
    color: rgba(255, 255, 255, 0.75) !important;
    fill: rgba(255, 255, 255, 0.75) !important;
}
.ds-ctx-select .mud-input-helper-text { display: none !important; }
.ds-ctx-select .mud-input-label { display: none !important; }

/* ── Search Options Drawer (GlobalFilterDrawer) ──────────────────────────
   Used by: Components/Shared/GlobalFilterDrawer.razor
   The scoped CSS file for that component delegates all rules to these DS
   classes so the component is fully documented and token-driven here.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Portfolio dropdown panel (DropdownMode=true) ──────────────────────── */
.ds-portfolio-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    width: 360px;
    max-height: 72vh;
    background: white;
    z-index: 9999;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: settingsSlideIn 0.12s ease-out;
}

/* ── pf-* (Portfolio-Dropdown) layout primitives ───────────────────────── */
.ds-portfolio-panel .pf-section {
    padding: 10px 14px 8px;
    flex-shrink: 0;
}
.ds-portfolio-panel .pf-section + .pf-section {
    padding-top: 0;
}

/* Compact pill tab bar */
.ds-portfolio-panel .pf-pill-bar {
    display: flex;
    gap: 4px;
}
.ds-portfolio-panel .pf-pill {
    flex: 1;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--mud-palette-divider);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-weight: 400;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.ds-portfolio-panel .pf-pill--active {
    background: var(--mud-palette-primary);
    color: #fff;
    font-weight: 600;
    border-color: var(--mud-palette-primary);
}
.ds-portfolio-panel .pf-pill:hover:not(.pf-pill--active) {
    background: rgba(8, 99, 107, 0.08);
}

/* Section label (PORTFOLIO / SELECTED / PRICE SOURCE) */
.ds-portfolio-panel .pf-label {
    font-size: var(--font-size-ui, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-bottom: 6px;
}

/* Scrollable body (PORTFOLIO list + SELECTED) */
.ds-portfolio-panel .pf-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Account / filter rows inside outlined paper */
.ds-portfolio-panel .pf-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    user-select: none;
    transition: background 0.1s;
}
.ds-portfolio-panel .pf-row:last-child {
    border-bottom: none;
}
.ds-portfolio-panel .pf-row:hover {
    background: var(--mud-palette-action-default-hover, rgba(8,99,107,0.08));
}
.ds-portfolio-panel .pf-row--selected {
    color: var(--mud-palette-primary);
    font-weight: 500;
}
.ds-portfolio-panel .pf-row-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Override the global cgips-toolbar white-icon rule so Close buttons inside
   the portfolio panel render in the primary teal colour, matching the Benchmark dropdown. */
.ds-portfolio-panel .mud-button-root .mud-icon-root,
.ds-portfolio-panel .mud-icon-button .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* Account list rows (plain table rows) */
.ds-portfolio-panel .pf-acct-row {
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 12px;
    transition: background 0.1s;
    user-select: none;
}
.ds-portfolio-panel .pf-acct-row:hover {
    background: var(--mud-palette-action-default-hover, rgba(8,99,107,0.08));
}
.ds-portfolio-panel .pf-acct-row--selected td {
    color: var(--mud-palette-primary);
    font-weight: 500;
    background: rgba(8, 99, 107, 0.06);
}
.ds-portfolio-panel .pf-acct-row--disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Footer */
.ds-portfolio-panel .pf-footer {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

/* ── Data-history popup (composite coverage) ──────────────────────────── */
.ds-portfolio-panel .pf-cov-pop {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 10001;
    width: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 10px;
}
.ds-portfolio-panel .pf-cov-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.ds-portfolio-panel .pf-cov-table th {
    text-align: left;
    color: #888;
    font-weight: 600;
    padding: 2px 4px;
}
.ds-portfolio-panel .pf-cov-table td {
    padding: 2px 4px;
    border-top: 1px solid var(--ds-border, #eee);
    white-space: nowrap;
}

/* Overlay backdrop */
.ds-filter-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.ds-filter-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Slide-in drawer panel */
.ds-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    width: 420px;
    max-width: 92vw;
    background: var(--ds-settings-drawer-bg);
    border-left: 1px solid var(--ds-settings-drawer-border);
    box-shadow: var(--ds-settings-drawer-shadow);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-filter-drawer.open {
    transform: translateX(0);
}

/* Header row */
.ds-filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ds-settings-drawer-border);
    flex-shrink: 0;
}

/* Macro-filter tab bar */
.ds-filter-macro-tabs {
    flex-shrink: 0;
    padding: 8px 16px 0;
}
.ds-filter-tab-bar {
    display: flex;
    gap: 4px;
}
.ds-filter-tab-btn {
    flex: 1;
    height: 36px;
    padding: 0 10px;
    border: none;
    border-radius: 4px;
    background: rgba(8, 99, 107, 0.06);
    color: var(--ds-primary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: color 0.15s, background 0.15s;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.ds-filter-tab-btn.active {
    background: var(--ds-primary);
    color: #ffffff;
    font-weight: 600;
}
.ds-filter-tab-btn:hover:not(.active) {
    background: rgba(8, 99, 107, 0.12);
}
.ds-filter-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* Scrollable list inside each macro tab */
.ds-filter-tab-list {
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-sm, 4px);
    margin-top: 4px;
    margin-bottom: 4px;
}
.ds-filter-tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    user-select: none;
    transition: background 0.12s;
}
.ds-filter-tab-item:hover {
    background: var(--mud-palette-action-hover);
    color: var(--mud-palette-text-primary);
}
.ds-filter-tab-item.selected {
    color: var(--mud-palette-primary);
    font-weight: 500;
}
.ds-filter-tab-check {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: inherit;
}

/* Accounts panel (flex-grow, scrollable) */
.ds-filter-accounts-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.ds-filter-accounts-search {
    flex-shrink: 0;
    padding: 8px 16px 6px;
}
.ds-filter-accounts-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 16px 8px;
}

/* Accounts table wrapper */
.ds-filter-accounts-table {
    flex: 1;
    min-height: 0;
    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: auto;
}
.ds-filter-accounts-table .ds-table {
    min-width: 100%;
}
.ds-filter-accounts-table .ds-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.ds-filter-accounts-table .ds-table th {
    padding: 0 10px;
    height: 36px;
}
.ds-filter-accounts-table .ds-table td {
    padding: 4px 10px;
}
.ds-filter-accounts-table .ds-table tbody tr {
    cursor: pointer;
    user-select: none;
}
.ds-filter-accounts-table .ds-table tbody tr.selected td,
.ds-filter-accounts-table .ds-table tbody tr.selected:hover td {
    background: #eff6ff;
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* Account table cell typography */
.ds-filter-acct-num {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    width: 110px;
}
.ds-filter-acct-name {
    white-space: nowrap;
    min-width: 160px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* Footer */
.ds-filter-drawer-footer {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

/* ── Price Source section inside the filter drawer ─────────────────────────── */
.ds-filter-ps-section {
    padding: 10px 16px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}
.ds-filter-ps-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}
.ds-filter-ps-select--override .mud-input-outlined,
.ds-filter-ps-select--override .mud-input-outlined fieldset {
    border-color: var(--ds-primary) !important;
}
.ds-filter-ps-select--override .mud-select-input {
    background: rgba(8, 99, 107, 0.04);
}

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

/* ── Accounts List Page Layout ──────────────────────────────────────────────
   Used by: Components/Pages/Accounts.razor
   Two-panel layout: left sidebar for inline filters, right main for accounts table.
   ────────────────────────────────────────────────────────────────────────── */
.acct-list-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.acct-list-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--ds-settings-drawer-bg, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 12px;
    position: sticky;
    top: 16px;
}
.acct-list-main {
    flex: 1;
    min-width: 0;
}
@media (max-width: 768px) {
    .acct-list-layout {
        flex-direction: column;
    }
    .acct-list-sidebar {
        width: 100%;
        position: static;
    }
}

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


/* GIPS Compliance table — header primary.
   NOTE: background-color and color are applied as inline styles with !important directly
   on each <th> (see GipsComplianceResultView.razor). Two layers of specificity defeat:
   (1) MudBlazor's .mud-simple-table > thead > tr > th selector (specificity 0,1,3) beats
       any single-class CSS rule; (2) any !important in an author stylesheet (including
       MudBlazor.min.css and app.css) beats a regular (non-!important) inline style per
       the CSS cascade. Only a !important inline style has absolute highest priority. */

/* GIPS Compliance table — Incomplete row danger text */
.gips-row-incomplete td,
.gips-row-incomplete td .mud-typography {
    color: var(--ds-danger) !important;
}

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

/* PC chart report: child (security-level) rows */
.child-row td {
    background-color: var(--mud-palette-background-grey) !important;
}

/* Residual / Linking row — shown when smoothing is None to make the geometric
   linking gap explicit, matching FactSet / Aladdin / Bloomberg PORT behaviour. */
.residual-row td {
    font-style: italic;
    background: color-mix(in srgb, var(--mud-palette-warning) 6%, transparent) !important;
    border-top: 1px dashed var(--mud-palette-warning) !important;
}

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

/* ── Adornment icon buttons (calendar, search, clear, etc.) ──
   MudBlazor v9 propagates Variant.Outlined to adornment buttons — they should
   never inherit a border, elevation, or the circular hover/focus halo.
   Same three-mechanism fix as MudSwitch/MudCheckbox:
     1. background-color on every interactive state  (hover, :focus-within, :active)
     2. transition: background-color lingering after click
     3. JS-injected .mud-ripple-effect spans stuck after Blazor re-render */
.mud-input-adornment button,
.mud-input-adornment .mud-button-outlined,
.mud-input-adornment .mud-icon-button,
.mud-input-adornment .mud-icon-button:hover,
.mud-input-adornment .mud-icon-button:focus,
.mud-input-adornment .mud-icon-button:focus-visible,
.mud-input-adornment .mud-icon-button:focus-within,
.mud-input-adornment .mud-icon-button:active,
.mud-input-adornment .mud-icon-button:disabled,
.mud-input-adornment .mud-icon-button[disabled] {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
    background: transparent !important;
    transition: none !important;
}
.mud-input-adornment .mud-ripple-effect {
    display: none !important;
}

/* 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: 22px 12px 20px 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: 23px;
    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;
    border-left: 3px solid var(--nav-active) !important;
    padding-left: 21px !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;
    border-left: 3px solid var(--nav-active) !important;
    padding-left: 33px !important;
}

/* Doubly-nested nav links (e.g. items inside Data Management sub-group inside Settings/Administration) */
.mud-drawer .mud-navmenu .mud-nav-group .mud-collapse-wrapper .mud-nav-group .mud-collapse-wrapper .mud-nav-link {
    font-size: 13px !important;
    padding: 9px 24px 9px 52px !important;
}

.mud-drawer .mud-navmenu .mud-nav-group .mud-collapse-wrapper .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-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;
    border-left: 3px solid var(--nav-active) !important;
    padding-left: 49px !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;
}

/* ── Date-Range Dropdown Panel — DS classes ─────────────────────── */
/*   .ds-date-panel        — floating panel card (position via parent) */
/*   .ds-date-section      — section padding wrapper (Quick / Custom) */
/*   .ds-date-section-label— section heading (QUICK PERIODS / CUSTOM) */
/*   .ds-date-separator    — "to" text between date fields            */
/*   Consolidated Quick Periods (UseConsolidatedPeriods="true"):      */
/*     1M 3M 6M 9M MTD QTD YTD 1Y 2Y 3Y 4Y 5Y 6Y 7Y 8Y 9Y 10Y SI   */
/*   Year periods (1Y–10Y) always start on the 1st of the month —    */
/*   use PeriodPresetButtons.GetDateRange().                          */
/*   SI preset: pass AccountLookupItem.StartDate (from account_master  */
/*   start_date) as inceptionDate; null falls back to -20 years.      */
/*   SI annualization: BuildMultiHorizonData() annualizes SI using    */
/*   the actual subset month count (subset.Count) when > 12 months.  */
/*   KPI returns for SI use cash-flow-based weighting when              */
/*   inception BMV = $0: gross_cash_flow weights gross return and       */
/*   net_cash_flow weights net return (initial investment as BMV proxy).*/
/*   Multi-select mode (Home.razor): add MultiSelectMode="true",      */
/*   ActivePresets, ActivePresetsChanged, SnapshotDate to the panel.  */
/*   Chips toggle on/off; custom range auto-updates to the widest     */
/*   selected period. Editing the custom range auto-selects all       */
/*   presets whose full range fits inside it. Nothing loads until     */
/*   Apply is clicked (deferred-apply / configure-then-run UX).       */
/*   Single-select mode: OnPresetSelected fires immediately; every    */
/*   handler must call _ = InvokeAsync(LoadData). Exception: pages    */
/*   with explicit Run/Generate buttons (GIPS, Verification,          */
/*   ReportWriter) should NOT auto-reload on preset click.            */

.ds-date-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    width: 340px;
    background: white;
    z-index: 9999;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
    animation: settingsSlideIn 0.12s ease-out;
}
.ds-date-section {
    padding: 10px 14px 6px 14px;
}
.ds-date-section--custom {
    padding: 6px 14px 12px 14px;
}
.ds-date-section-label {
    font-size: var(--font-size-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-bottom: 6px;
}
.ds-date-separator {
    font-size: var(--font-size-ui);
    color: #999;
}

/* ── CompositeVerification export menu — compact font + tight spacing ──
 * MudMenu renders its list in a Blazor portal (outside the component tree),
 * so scoped CSS cannot reach it. PopoverClass="cv-export-popover" stamps this
 * class on the portal element so we can target the items from here. */
.cv-export-popover .mud-list-item {
    min-height: 28px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.cv-export-popover .mud-list-item-text,
.cv-export-popover .mud-list-item .mud-typography {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* ═══ 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;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* 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 {
    background: var(--ds-primary);
    color: white;
    border: none;
    min-height: 36px;
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.75;
    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);
}

/* ───────────────────────────────────────────────────────────────────────────
   GIPS primary action button — the canonical orange-gradient "Run Report" pill.
   Apply via Class="gips-action-btn" to MudButtons (Variant.Filled). Provides a
   consistent, premium call-to-action look across the GIPS Compliant Presentation
   page and its child panels (Save OCIO Data, Run Compliance Check, Add Section,
   Extract Disclosures, Log Material, Save, …). Overrides MudBlazor's filled
   background so the gradient always wins.
   ─────────────────────────────────────────────────────────────────────────── */
.gips-action-btn.mud-button-root {
    background: linear-gradient(135deg, #FF8000 0%, #FF9E3A 100%) !important;
    color: #0f172a !important;
    font-weight: 700;
    text-transform: none;
    box-shadow: 0 2px 12px rgba(255, 128, 0, 0.40);
    transition: box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.gips-action-btn.mud-button-root:hover {
    filter: brightness(1.03);
    box-shadow: 0 4px 18px rgba(255, 128, 0, 0.52);
    transform: translateY(-1px);
}

.gips-action-btn.mud-button-root:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 128, 0, 0.42);
}

.gips-action-btn.mud-button-root .mud-icon-root,
.gips-action-btn.mud-button-root .mud-progress-circular {
    color: #0f172a !important;
}

.gips-action-btn.mud-button-root.mud-button-disabled,
.gips-action-btn.mud-button-root:disabled {
    background: linear-gradient(135deg, #cbb39a 0%, #d8c6b0 100%) !important;
    color: rgba(15, 23, 42, 0.45) !important;
    box-shadow: none;
    transform: none;
    filter: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GIPS "wow factor" polish — shared animation + presentation utilities used on
   the GIPS Compliant Presentation page and its child panels:
     • .gips-countup            animated numeric metric (driven by window.gipsCountUp)
     • .gips-reveal             one-shot fade/slide-in for section content
     • .gips-empty-state        centered illustration + single orange CTA per tab
     • .gips-ocio-exhibit       presentation-formatted OCIO supplemental exhibit
   All motion is disabled under prefers-reduced-motion for accessibility.
   ───────────────────────────────────────────────────────────────────────────── */

/* Animated count-up metric — gives compliance % / AUM a polished first impression. */
.gips-countup {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* One-shot section reveal (fade + gentle slide-in) for tab content. */
@keyframes gipsReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gips-reveal {
    animation: gipsReveal 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Stagger helper so stacked panels reveal in a pleasing cascade. */
.gips-reveal-delay-1 { animation-delay: 0.06s; }
.gips-reveal-delay-2 { animation-delay: 0.12s; }
.gips-reveal-delay-3 { animation-delay: 0.18s; }

/* Empty-state illustration block — icon halo + message + single orange CTA. */
.gips-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 48px 24px;
    animation: gipsReveal 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.gips-empty-state .gips-empty-illustration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-bottom: 4px;
    background: radial-gradient(circle at 50% 40%, rgba(255, 128, 0, 0.16) 0%, rgba(255, 128, 0, 0.06) 55%, transparent 72%);
    border: 1px solid rgba(255, 128, 0, 0.22);
}

.gips-empty-state .gips-empty-illustration .mud-icon-root {
    font-size: 46px;
    color: #FF8000;
}

.gips-empty-state .gips-empty-title {
    font-weight: 700;
    color: #022135;
}

.gips-empty-state .gips-empty-subtitle {
    max-width: 460px;
    color: var(--mud-palette-text-secondary, #5b6b7a);
}

/* "Supplemental" sub-label shown under OCIO supplemental column headers in the GIPS table. */
.gips-supp-flag {
    display: inline-block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .gips-reveal,
    .gips-empty-state,
    .gips-action-btn.mud-button-root,
    .gips-action-btn.mud-button-root:hover,
    .gips-action-btn.mud-button-root:active {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

.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;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ─── 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(--mud-palette-warning, #ff9800);
    margin-bottom: 4px;
    line-height: 1.2;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* ─── DS KPI Value ─── */
.ds-kpi-value {
    font-family: var(--font-data, 'Inter', sans-serif);
    /* Responsive: shrinks proportionally to card width; clamp keeps it within 0.875rem–1.5rem */
    font-size: 1.5rem;              /* non-supporting fallback */
    font-size: clamp(0.625rem, 8cqw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    color: var(--text-main, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

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

/* KPI card container — standardized elevation and padding */
.ds-kpi-card {
    container-type: inline-size; /* enables cqw-based font scaling on children */
    height: 100%;
    min-height: 84px; /* 12px top + ~60px content + 12px bottom; reduces visual bulk without cramping */
    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: 12px 16px; /* 4:3 ratio — 12px vertical / 16px horizontal */
    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);
}
/* Applied via IsNegative="true" on KpiCard — use for metrics that are inherently negative
   by definition (e.g. Largest Decrease, Total Withdrawal). Renders value in danger red
   unconditionally, regardless of sign or trend. */
.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: center;
    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; }
}

/*
 * home-kpi-grid — Home.razor only
 * Forces all 6 KPI cards onto a single row at md+ breakpoints (≥960 px).
 * Uses MudBlazor's mud-grid wrapper so MudItem col widths (md="2") handle
 * the 6-column split; this class adds no extra layout — it is a semantic
 * marker used by the DS live docs to document the Home-specific variant.
 * Do NOT apply this class on other pages; use ds-kpi-grid or plain MudGrid instead.
 */
.home-kpi-grid .mud-grid {
    /* intentionally empty — layout is driven by MudItem md="2" (2/12 = 1/6 each) */
}

/*
 * holdings-kpi-grid — Holdings.razor only
 * Forces all 6 KPI cards onto a single row at md+ breakpoints (≥960 px).
 * Same 6-column split as home-kpi-grid using MudItem md="2".
 * Do NOT apply this class on other pages.
 */
.holdings-kpi-grid .mud-grid {
    /* intentionally empty — layout is driven by MudItem md="2" (2/12 = 1/6 each) */
}

/*
 * transactions-kpi-grid — Transactions.razor only
 * Forces all 6 KPI cards onto a single row at md+ breakpoints (≥960 px).
 * Cards are: Total Transactions, Total Buys, Total Sells, Total Dividends,
 * Total Contribution, Total Withdrawal.
 * Same 6-column split as home-kpi-grid using MudItem md="2".
 * Do NOT apply this class on other pages.
 */
.transactions-kpi-grid .mud-grid {
    /* intentionally empty — layout is driven by MudItem md="2" (2/12 = 1/6 each) */
}

/*
 * portfolio-contribution-kpi-grid — AnalyticsPortfolioContribution.razor only
 * Forces all 6 KPI cards onto a single row at md+ breakpoints (≥960 px).
 * Cards are: Total Market Value, Groups/Securities, Gross Return, Net Return, Gross CTR, Net CTR.
 * Same 6-column split as home-kpi-grid using MudItem md="2".
 * Do NOT apply this class on other pages.
 */
.portfolio-contribution-kpi-grid .mud-grid {
    /* intentionally empty — layout is driven by MudItem md="2" (2/12 = 1/6 each) */
}

/* ─── 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;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* 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 — scoped to actual button variants only.
   MudButton always has both mud-button-root AND mud-button classes.
   MudIconButton (used as-is for icon-only buttons, switch base, checkbox button)
   only has mud-button-root + mud-icon-button, NOT mud-button.  Applying a
   rectangular border-radius to mud-button-root globally would override the
   mud-icon-button { border-radius:50% } rule, turning every circular hover/focus
   background into a visible rectangular "shadow box". */
.mud-button-root.mud-button {
    border-radius: var(--radius-sm);
}

/* ── MudSwitch: eliminate the shadow halo around the thumb, match ds-switch ──
   ds-switch is a plain <button> + CSS ::after thumb — no JS ripple, no
   hover/focus background, no interaction chrome at all.

   In MudBlazor v9, the shadow circle has THREE real sources:
     1. background-color from hover AND from the co-applied .mud-icon-button class
        rules (:focus-within, :active) — this is the PERSISTENT circle after click,
        because after toggling the switch the checkbox <input> inside holds :focus,
        making :focus-within TRUE on the parent .mud-icon-button element.
     2. transition: background-color 250ms on .mud-switch-base — the animation can
        briefly make the above visible even when the computed value is transparent.
     3. .mud-ripple-effect <span> elements injected by MudBlazor's JS which can get
        "stuck" in the expanded/visible state when Blazor re-renders the component
        before the JS fade-out callback completes.

   Fix: target .mud-switch-base directly (not via .mud-switch ancestor, to avoid
   any ancestry break during re-renders), override transition to keep ONLY the
   left/transform thumb-slide animation, and hide ripple-effect spans. */
.mud-switch {
    --mud-elevation-1: 0px 0px 0px 0px transparent;
    --mud-elevation-2: 0px 0px 0px 0px transparent;
}
.mud-switch .mud-switch-base,
.mud-switch .mud-button-root,
.mud-switch-button,
.mud-switch [class*="mud-elevation"] {
    box-shadow: none !important;
    outline: none !important;
}

/* Suppress background-color in EVERY state.
   Selectors use .mud-switch-base directly (no parent requirement) so they
   always win regardless of ancestor rendering order.
   Transition is narrowed to left + transform only, removing the 250ms
   background-color / box-shadow animations so nothing can linger. */
.mud-switch-base,
.mud-switch-base:hover,
.mud-switch-base:focus,
.mud-switch-base:focus-visible,
.mud-switch-base:focus-within,
.mud-switch-base:active,
.mud-switch-base:disabled,
.mud-switch-base[disabled],
.mud-switch-base.mud-checked,
.mud-switch-base.mud-checked:hover,
.mud-switch-base.mud-switch-disabled,
.mud-switch-base.mud-switch-disabled:hover {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
                transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
}

/* Defensive: hide any ::before / ::after pseudo-elements on the base */
.mud-switch-base::before,
.mud-switch-base::after {
    display: none !important;
    background-color: transparent !important;
}

/* Hide JS-injected ripple-effect spans that can get stuck in the visible
   expanded state across Blazor re-renders */
.mud-switch .mud-ripple-effect {
    display: none !important;
}

/* ── MudCheckbox: eliminate the shadow halo around the checkbox icon ──
   Same root causes as MudSwitch:
     1. .mud-icon-button:hover / :focus-within / :active set background-color.
        After clicking, the hidden <input> holds :focus → :focus-within on the
        .mud-icon-button stays TRUE, making the circle persist.
     2. transition: background-color 150ms can make the above briefly visible.
     3. JS-injected .mud-ripple-effect spans can get stuck after re-renders.
   There is no sliding thumb to preserve, so transition is removed entirely. */
.mud-checkbox {
    --mud-elevation-0: 0px 0px 0px 0px transparent;
    --mud-elevation-1: 0px 0px 0px 0px transparent;
}
.mud-checkbox .mud-button-root,
.mud-checkbox .mud-icon-button,
.mud-checkbox [class*="mud-elevation"] {
    box-shadow: none !important;
    outline: none !important;
}

/* Suppress background-color and transition on the icon button in every state */
.mud-checkbox .mud-icon-button,
.mud-checkbox .mud-icon-button:hover,
.mud-checkbox .mud-icon-button:focus,
.mud-checkbox .mud-icon-button:focus-visible,
.mud-checkbox .mud-icon-button:focus-within,
.mud-checkbox .mud-icon-button:active,
.mud-checkbox .mud-icon-button:disabled,
.mud-checkbox .mud-icon-button[disabled],
.mud-checkbox .mud-icon-button.mud-disabled,
.mud-checkbox .mud-icon-button.mud-disabled:hover {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transition: none !important;
}

/* Defensive: hide ::before / ::after pseudo-elements */
.mud-checkbox .mud-icon-button::before,
.mud-checkbox .mud-icon-button::after,
.mud-checkbox .mud-icon-button:hover::before,
.mud-checkbox .mud-icon-button:focus::before {
    display: none !important;
    background-color: transparent !important;
}

/* Hide JS-injected ripple-effect spans */
.mud-checkbox .mud-ripple-effect {
    display: none !important;
}

/* ── MudRadio: eliminate the circular shadow halo around the radio icon ──
   MudRadio v9 renders:  <span class="mud-radio">
                           <button class="mud-icon-button mud-button-root ...">
                             <input type="radio" class="mud-radio-input" />
                           </button>
                         </span>
   The hidden <input> retains browser focus after click, keeping :focus-within TRUE
   on the inner .mud-icon-button — producing the persistent circle.  Same three
   mechanisms as MudSwitch / MudCheckbox:
     1. .mud-icon-button:focus-within / :active background-color on the inner button
     2. transition: background-color lingering after click
     3. JS-injected .mud-ripple-effect spans stranded after Blazor re-renders
   Fix: target .mud-radio .mud-icon-button (the inner button) across every state,
   exactly mirroring the .mud-checkbox .mud-icon-button pattern. */
.mud-radio .mud-icon-button,
.mud-radio .mud-icon-button:hover,
.mud-radio .mud-icon-button:focus,
.mud-radio .mud-icon-button:focus-visible,
.mud-radio .mud-icon-button:focus-within,
.mud-radio .mud-icon-button:active,
.mud-radio .mud-icon-button:disabled,
.mud-radio .mud-icon-button[disabled],
.mud-radio .mud-icon-button.mud-disabled,
.mud-radio .mud-icon-button.mud-disabled:hover {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transition: none !important;
}

/* Defensive: suppress any ::before / ::after halo pseudo-elements on the button */
.mud-radio .mud-icon-button::before,
.mud-radio .mud-icon-button::after,
.mud-radio .mud-icon-button:hover::before,
.mud-radio .mud-icon-button:focus::before {
    display: none !important;
    background-color: transparent !important;
}

/* Hide JS-injected ripple-effect spans */
.mud-radio .mud-ripple-effect,
.mud-radio-group .mud-ripple-effect {
    display: none !important;
}

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

/* Suppress per-column filter funnel icons — filtering is accessible via the ⋮ column options menu */
.ds-table-container .filter-button {
    display: none !important;
}

/* DS table header row — uppercase, muted, small, centered
   Selector breakdown:
   - .ds-table-container .mud-table-head th/.mud-table-cell  → MudDataGrid inside ds-table-container (0,2,1)
   - .ds-table-container .mud-simple-table table * tr th     → MudSimpleTable inside ds-table-container (0,2,4) beats MudBlazor's (0,1,4)
   - .mud-simple-table.ds-table table * tr th                → MudSimpleTable with ds-table class directly (0,2,4)
   - .ds-table th                                            → plain <table class="ds-table"> (0,1,1)
   All properties that MudBlazor sets (font-size, font-weight, text-transform, color, padding, text-align)
   must use !important to guarantee override. */
.ds-table-container .mud-table-head th,
.ds-table-container .mud-table-head .mud-table-cell,
.ds-table-container .mud-simple-table table * tr th,
.mud-simple-table.ds-table table * tr th,
.ds-table th {
    font-family: var(--font-ui, 'Inter', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-muted, #64748b) !important;
    background: var(--ds-bg-subtle, #f8fafc) !important;
    border-bottom: 2px solid var(--ds-border, #d8e0e7) !important;
    padding: 0 12px !important;
    height: 36px !important;
    white-space: nowrap !important;
    text-align: left !important;
    top: 0 !important;
    z-index: 2 !important;
}

/* Align MudDataGrid header text left — MudBlazor renders an inner flex div (.column-header)
   with justify-content:space-between which overrides text-align on th.
   We override the flex container to left-align the label and keep the sort/options icons inline. */
.ds-table-container .mud-table-head .mud-table-cell .column-header {
    justify-content: flex-start !important;
}
.ds-table-container .mud-table-head .mud-table-cell .column-header .sortable-column-header {
    flex: 0 1 auto !important;
    width: auto !important;
    text-align: left !important;
}
/* Plain ds-table th (MudSimpleTable / html table) — left-align to match cells */
.ds-table th {
    text-align: left !important;
}

/* Performance Analytics widget data-view tables center their column headers
   (body number cells keep their own .text-right alignment). */
.ds-table.pa-data-head th {
    text-align: center !important;
}

/* ═══ Summary-panel data grids — centered headers; column-type cell alignment ═══
   Applies to the Results Summary panels on Composite Risk Statistics, Performance
   Analytics, Composite Returns, Composite Membership, and Composite Verification.
   Every summary panel wraps its report table/grid in a *-summary-panel-content div,
   so scoping to those wrappers centers every column header while leaving the widget-grid
   tables untouched. Body-cell alignment is column-type based (text left, date center,
   numeric right) and is driven by per-column classes rather than these wrappers. */

/* Header row — center MudDataGrid column headers (override the global left-align). */
.crs-summary-panel-content .mud-table-head th.mud-table-cell,
.pa-summary-panel-content .mud-table-head th.mud-table-cell,
.cr-summary-panel-content .mud-table-head th.mud-table-cell,
.cv-summary-panel-content .mud-table-head th.mud-table-cell {
    text-align: center !important;
}
.crs-summary-panel-content .mud-table-head .mud-table-cell .column-header,
.pa-summary-panel-content .mud-table-head .mud-table-cell .column-header,
.cr-summary-panel-content .mud-table-head .mud-table-cell .column-header,
.cv-summary-panel-content .mud-table-head .mud-table-cell .column-header {
    justify-content: center !important;
}
.crs-summary-panel-content .mud-table-head .mud-table-cell .column-header .sortable-column-header,
.pa-summary-panel-content .mud-table-head .mud-table-cell .column-header .sortable-column-header,
.cr-summary-panel-content .mud-table-head .mud-table-cell .column-header .sortable-column-header,
.cv-summary-panel-content .mud-table-head .mud-table-cell .column-header .sortable-column-header {
    text-align: center !important;
}

/* Header row — center plain HTML (.ds-table) column headers. */
.crs-summary-panel-content .ds-table th,
.pa-summary-panel-content .ds-table th,
.cr-summary-panel-content .ds-table th,
.cv-summary-panel-content .ds-table th {
    text-align: center !important;
}

/* Cell values — alignment is column-TYPE based, not position based:
   • text columns keep the default left alignment,
   • date columns center (via the .ds-date class applied in markup),
   • numeric columns (incl. x / ✓ markers) right-align (via .ds-numeric / .font-data).
   The numeric/date rules below apply globally; no summary-panel-scoped cell rule is
   needed because each column already carries its own type class. */

/* Date columns — center-aligned header and body cells. */
th.ds-date,
.ds-table th.ds-date,
.ds-table-container .mud-table-head .mud-table-cell.ds-date,
td.ds-date,
.ds-table td.ds-date,
.ds-table-container .mud-table-row td.ds-date,
td.ds-date > div,
td.ds-date .mud-typography,
.ds-table-container .mud-table-row td.ds-date > div,
.ds-table-container .mud-table-row td.ds-date .mud-typography {
    text-align: center !important;
}

/* DS table body cells — explicit height enforces uniform row size across all grids */
.ds-table-container .mud-table-row td,
.ds-table td {
    font-size: 0.825rem;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 12px !important;
    line-height: 30px;
    border-bottom: 1px solid var(--ds-border-light, #edf2f7);
    color: var(--text-main, #0f172a);
    overflow: hidden;
    white-space: nowrap;
}

/* DS table column separators */
.ds-table th:not(:last-child),
.ds-table td:not(:last-child) {
    border-right: 1px solid var(--ds-border-light, #edf2f7);
}

/* DS table row header — applied to a tbody td that acts as a row label;
   mirrors the column-header appearance: uppercase, muted, subtle background;
   uses font-weight 500 (medium) to stay stylish without appearing thick/bold */
.ds-table td.ds-table-row-header,
.ds-table-container .mud-table-row td.ds-table-row-header {
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #64748b);
    background: var(--ds-bg-subtle, #f8fafc) !important;
    white-space: nowrap;
    border-right: 2px solid var(--ds-border, #d8e0e7);
}

/* DS table numeric cells — tabular Inter, always right-aligned */
td.ds-numeric,
.ds-table td.ds-numeric,
.ds-table-container .font-data,
td.font-data {
    font-family: var(--font-data, 'Inter', sans-serif);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    text-align: right !important;
}

/* Data row values are always regular weight — only the Total row uses bold.
   This prevents per-column inline font-weight overrides from bolding data rows;
   total-row keeps its weight via the .total-row rule below. */
.ds-table-container .mud-table-row:not(.total-row) td.ds-numeric .mud-typography,
.ds-table-container .mud-table-row:not(.total-row) td.font-data .mud-typography,
.ds-table-container .mud-table-row:not(.total-row) td.ds-numeric > div,
.ds-table-container .mud-table-row:not(.total-row) td.font-data > div {
    font-weight: 400 !important;
}

/* Numeric cells in data grids — standard 12px padding on all sides for
   consistent spacing between value and column separator, matching text columns. */
.ds-table-container td.ds-numeric {
    padding: 0 12px !important;
}

/* Numeric column headers — right-aligned to match their data cells */
th.ds-numeric,
th.font-data {
    text-align: right !important;
}

/* Ensure inner div/span wrappers inside numeric cells also right-align */
td.ds-numeric > div,
td.ds-numeric .mud-typography,
.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 — sticky at the bottom of the scroll viewport,
   mirroring the fixed header at the top. z-index:2 ensures it renders above
   body rows during scroll. background must be opaque so rows don't show through. */
.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);
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
}
.ds-table-container .total-row td strong {
    font-weight: 800;
}

/* MudDataGrid footer row styling (replaces FooterRowClass which was removed in MudBlazor 9) */
.ds-table-container .mud-table-foot .mud-table-row .mud-table-cell,
.ds-table .mud-table-foot .mud-table-row .mud-table-cell {
    font-weight: 800 !important;
    background: var(--ds-bg-subtle, #f8fafc) !important;
    border-top: 2px solid var(--ds-border, #d8e0e7);
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
}
.ds-table-container .mud-table-foot .mud-table-row .mud-table-cell 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 Pager — hide "Rows per page" footer on all grids ───
   All DS data grids use FixedHeader + internal scrollbar instead of pagination.
   The pager element is suppressed globally here; grids set FixedHeader="true"
   and a computed Height so the body scrolls internally. */
.ds-table-container .mud-table-pagination {
    display: none !important;
}

/* MudChip inside table cells — constrained to 20px so the cell stays at 36px
   (td padding-top 8px + chip 20px + td padding-bottom 8px = 36px) */
.ds-table-container .mud-table-row td .mud-chip,
.ds-table td .mud-chip {
    height: 20px !important;
    min-height: unset !important;
    font-size: 0.7rem !important;
    line-height: 20px;
    padding: 0 8px !important;
}

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

/* ═══ Tooltip — constrain width and enable line wrapping ═══ */
/*
 * MudBlazor v9 renders every tooltip as:
 *   <div id="popovercontent-{guid}"
 *        class="mud-popover mud-tooltip d-flex mud-tooltip-default …">
 *     raw text node (no wrapper element)
 *   </div>
 *
 * The "d-flex" utility class carries  display:flex !important  (0,1,0).
 * With flex + flex-wrap:nowrap + a single anonymous text item, the element
 * grows to fit the entire text on one line → full-viewport-width black bar.
 *
 * Defence layers (applied from lowest to highest specificity):
 *   Layer 1: .mud-popover.mud-tooltip        specificity 0,2,0
 *   Layer 2: [id^="popovercontent-"].mud-tooltip  specificity 0,2,1
 *
 * Every property uses !important so that no other author !important rule at
 * lower specificity can win, regardless of stylesheet load order.
 * flex-wrap:wrap is added as a belt-and-suspenders fallback in case
 * display:block ever fails to apply (e.g. future MudBlazor update adds
 * an even more specific d-flex rule on a containing selector).
 */
.mud-popover.mud-tooltip,
[id^="popovercontent-"].mud-tooltip {
    display: block !important;    /* override d-flex (0,1,0) */
    flex-wrap: wrap !important;   /* fallback: if flex stays, allow wrapping */
    width: fit-content !important;/* shrink box to content width … */
    max-width: 320px !important;  /* … but never wider than 320 px */
    white-space: normal !important;
    word-break: break-word !important;
    text-align: left !important;
}

/*
 * Left-align the tooltip so its left edge starts at the left edge of the
 * trigger icon rather than being horizontally centered over it.
 *
 * MudBlazor's popover JS positions the tooltip by aligning its top-center
 * with the trigger's bottom-center:
 *   tooltip.left = icon_center_x − tooltip_width / 2
 *
 * To move the left edge of the tooltip to the icon's left edge:
 *   shift right by  (tooltip_width/2 − icon_width/2)
 *                 = calc(50% − 10px)   ← 50% is half tooltip width;
 *                                        10px is half of the 20px Size.Small icon
 *
 * Two cases because MudBlazor swaps the CSS class when the popover flips:
 *   • Not flipped → tooltip appears BELOW  → keep Y offset +10px
 *   • Flipped     → tooltip appears ABOVE  → keep Y offset −10px
 */
.mud-popover.mud-tooltip.mud-tooltip-bottom-center:not([data-mudpopover-flip]),
.mud-popover.mud-tooltip.mud-tooltip-top-center[data-mudpopover-flip] {
    transform: translateX(calc(50% - 10px)) translateY(10px) !important;
}

.mud-popover.mud-tooltip.mud-tooltip-top-center:not([data-mudpopover-flip]),
.mud-popover.mud-tooltip.mud-tooltip-bottom-center[data-mudpopover-flip] {
    transform: translateX(calc(50% - 10px)) translateY(-10px) !important;
}

/* -- Price Source select list items -- */
.ps-select-item,
.ps-select-item .mud-list-item-text span,
.ps-select-item .mud-typography {
    font-size: 12px !important;
}

/* -- ps-select-wrap � Borderless Price Source MudSelect (global) -- */
.ps-select-wrap {
    display: inline-grid;
    align-items: center;
    height: 32px;
    background: rgba(8, 99, 107, 0.06);
    border-radius: 4px;
    border: none;
    padding: 0 4px 0 8px;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

/* Ghost element sized to the longest label � sets the column width */
.ps-select-wrap::after {
    content: attr(data-longest);
    grid-area: 1 / 1;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    padding-right: 28px; /* room for the dropdown arrow */
}

/* MudSelect sits in the same grid cell, stretches to fill it */
.ps-select-wrap > .mud-input-control,
.ps-select-wrap > .mud-select {
    grid-area: 1 / 1;
    width: 100%;
    min-width: 0;
}

/* Force the input control's inner width to match the wrapper so the popover aligns */
.ps-select-wrap .mud-input-control,
.ps-select-wrap .mud-select,
.ps-select-wrap .mud-input-control-input-container,
.ps-select-wrap .mud-input {
    width: 100% !important;
}

.ps-select-wrap--active {
    background: var(--ds-primary);
}

/* ──────────────────────────────────────────────────────────────────────────
   Frosted white-on-teal variant — makes a ps-select dropdown match the
   .cgips-toolbar-btn date button (translucent white fill, white border,
   white text/arrow) when it sits inside the dark-teal composite toolbar.
   ────────────────────────────────────────────────────────────────────────── */
.ps-select-wrap--teal {
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.ps-select-wrap--teal:hover {
    background: rgba(255, 255, 255, 0.30);
    border-color: rgba(255, 255, 255, 0.85);
}

.ps-select-wrap--teal.ps-select-wrap--active {
    background: rgba(255, 255, 255, 0.30);
}

.ps-select-wrap--teal .mud-select-input,
.ps-select-wrap--teal .mud-input-slot,
.ps-select-wrap--teal .mud-input {
    color: #ffffff !important;
}

.ps-select-wrap--teal .mud-input-adornment svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.ps-select-wrap--teal input::placeholder,
.ps-select-wrap--teal .mud-input-placeholder,
.ps-select-wrap--teal .mud-input > input.mud-input-root::placeholder,
.ps-select-wrap--teal div.mud-input-slot.mud-input-root::placeholder,
.ps-select-wrap--teal .mud-input > input.mud-input-root::-webkit-input-placeholder,
.ps-select-wrap--teal div.mud-input-slot.mud-input-root::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

.ps-select-wrap .mud-select-input,
.ps-select-wrap .mud-input-slot,
.ps-select-wrap .mud-input {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 32px !important;
}

.ps-select-wrap--active .mud-select-input,
.ps-select-wrap--active .mud-input-slot,
.ps-select-wrap--active .mud-input {
    color: #ffffff !important;
}

.ps-select-wrap .mud-input-underline::before,
.ps-select-wrap .mud-input-underline::after {
    border: none !important;
    display: none !important;
}

.ps-select-wrap .mud-input-adornment svg {
    color: var(--ds-primary) !important;
    fill: var(--ds-primary) !important;
}

.ps-select-wrap--active .mud-input-adornment svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.ps-select-wrap input::placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap .mud-input-placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap .mud-input > input.mud-input-root::placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap div.mud-input-slot.mud-input-root::placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap .mud-input > input.mud-input-root::-webkit-input-placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap div.mud-input-slot.mud-input-root::-webkit-input-placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap .mud-input > input.mud-input-root:-moz-placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap div.mud-input-slot.mud-input-root:-moz-placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap .mud-input > input.mud-input-root::-moz-placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap div.mud-input-slot.mud-input-root::-moz-placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap .mud-input > input.mud-input-root:-ms-input-placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap div.mud-input-slot.mud-input-root:-ms-input-placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap .mud-input > input.mud-input-root::-ms-input-placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}
.ps-select-wrap div.mud-input-slot.mud-input-root::-ms-input-placeholder {
    color: var(--ds-primary) !important;
    opacity: 1 !important;
}

/* Override MudBlazor opacity:0.42 on the slot element itself when showing placeholder */
.ps-select-wrap div.mud-input-slot.mud-input-root:placeholder-shown {
    opacity: 1 !important;
    color: var(--ds-primary) !important;
}
.ps-select-wrap div.mud-input-slot.mud-input-root:empty {
    opacity: 1 !important;
    color: var(--ds-primary) !important;
}

.ps-select-wrap--active input::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active .mud-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active .mud-input > input.mud-input-root::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active div.mud-input-slot.mud-input-root::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active .mud-input > input.mud-input-root::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active div.mud-input-slot.mud-input-root::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active .mud-input > input.mud-input-root:-moz-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active div.mud-input-slot.mud-input-root:-moz-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active .mud-input > input.mud-input-root::-moz-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active div.mud-input-slot.mud-input-root::-moz-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active .mud-input > input.mud-input-root:-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active div.mud-input-slot.mud-input-root:-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active .mud-input > input.mud-input-root::-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
.ps-select-wrap--active div.mud-input-slot.mud-input-root::-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

.ps-select-wrap .mud-input-root {
    padding: 0 !important;
}

/* Hide MudBlazor built-in clear button inside the Price Source selector */
.ps-select-wrap .mud-input-clear-button {
    display: none !important;
}

/* Teal variant - FINAL overrides (placed last + double-class specificity so
   they always beat the base .ps-select-wrap navy color/size rules above).
   Makes the secondary toolbar dropdown an exact visual match for the
   .cgips-toolbar-btn date button: translucent-white fill, white border,
   white text + white chevron.
   Height matches MudBlazor .mud-button-root (32px) so it sits flush with
   the Size.Small date selector button. */
.ps-select-wrap.ps-select-wrap--teal {
    height: 32px;
    min-width: 200px;
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 4px;
    padding: 0 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ps-select-wrap.ps-select-wrap--teal:hover {
    background: rgba(255, 255, 255, 0.30);
    border-color: rgba(255, 255, 255, 0.85);
}

.ps-select-wrap.ps-select-wrap--teal.ps-select-wrap--active {
    background: rgba(255, 255, 255, 0.30);
    border-color: rgba(255, 255, 255, 0.85);
}

/* White text on the value/input slot (overrides base var(--ds-primary)) */
.ps-select-wrap.ps-select-wrap--teal .mud-select-input,
.ps-select-wrap.ps-select-wrap--teal .mud-input-slot,
.ps-select-wrap.ps-select-wrap--teal .mud-input,
.ps-select-wrap.ps-select-wrap--teal .mud-input-root {
    color: #ffffff !important;
    font-weight: 400 !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 32px !important;
}

/* White dropdown chevron (overrides base navy svg fill) */
.ps-select-wrap.ps-select-wrap--teal .mud-input-adornment svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* White placeholder across every browser/MudBlazor combination */
.ps-select-wrap.ps-select-wrap--teal input::placeholder,
.ps-select-wrap.ps-select-wrap--teal .mud-input-placeholder,
.ps-select-wrap.ps-select-wrap--teal .mud-input > input.mud-input-root::placeholder,
.ps-select-wrap.ps-select-wrap--teal div.mud-input-slot.mud-input-root::placeholder,
.ps-select-wrap.ps-select-wrap--teal .mud-input > input.mud-input-root::-webkit-input-placeholder,
.ps-select-wrap.ps-select-wrap--teal div.mud-input-slot.mud-input-root::-webkit-input-placeholder,
.ps-select-wrap.ps-select-wrap--teal div.mud-input-slot.mud-input-root:placeholder-shown,
.ps-select-wrap.ps-select-wrap--teal div.mud-input-slot.mud-input-root:empty {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* 
   DS Frozen First Column  —  ds-freeze-first-col
   ───────────────────────────────────────────────────────────────────────────
   Add  Class="... ds-freeze-first-col"  to any MudDataGrid / ds-table-container
   to pin the first column in place while the table scrolls horizontally AND
   vertically.

   What this fixes (and why plain CSS is not enough):
     1. MudBlazor default tables use border-collapse:collapse, which the CSS spec
        forbids from participating in position:sticky on td/th.  We force
        border-collapse:separate + border-spacing:0 so sticky works while the
        visual appearance is unchanged.
     2. app.css sets  overflow:hidden  on every .mud-table-row td, which creates
        a new overflow context that silently disables sticky on that element.
        We override it to  overflow:visible  on first-child cells only.
     3. app.css sets  background:var(--ds-bg-subtle)!important  on every th,
        which would show through the frozen header when columns scroll under it.
        We restore the correct background per cell type.
     4. Even-row stripe and hover backgrounds are re-applied to the frozen cell
        so it stays visually consistent with the rest of the row.

   Corner cells:
     • Top-left    — header   (top:0  + left:0, z-index 3)
     • Bottom-left — total row (bottom:0 + left:0, z-index 3)
     • All other data rows   — left:0 only            (z-index 2)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 ── border-collapse fix: required for sticky on td/th */
.ds-freeze-first-col table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* 2 ── data cells: sticky left, overflow fix, surface background */
.ds-table-container.ds-freeze-first-col .mud-table-row td:first-child,
.ds-freeze-first-col .mud-table-row td:first-child,
.ds-freeze-first-col tbody tr td:first-child {
    overflow: visible !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: var(--mud-palette-surface) !important;
    border-right: 2px solid rgba(0, 0, 0, 0.12) !important;
}

/* 3 ── header cell: top-left corner — sticky in both axes */
.ds-table-container.ds-freeze-first-col .mud-table-head th:first-child,
.ds-freeze-first-col .mud-table-head th:first-child,
.ds-table-container.ds-freeze-first-col .mud-table-head .mud-table-cell:first-child,
.ds-freeze-first-col .mud-table-head .mud-table-cell:first-child,
.ds-freeze-first-col thead tr th:first-child {
    overflow: visible !important;
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 3 !important;
    background: var(--ds-bg-subtle, #f8fafc) !important;
    border-right: 2px solid rgba(0, 0, 0, 0.12) !important;
}

/* 4 ── total/footer row first cell: bottom-left corner */
.ds-table-container.ds-freeze-first-col .mud-table-body .total-row td:first-child,
.ds-freeze-first-col .mud-table-body .total-row td:first-child,
.ds-table-container.ds-freeze-first-col .mud-table-foot .mud-table-row .mud-table-cell:first-child,
.ds-freeze-first-col .mud-table-foot .mud-table-row .mud-table-cell:first-child {
    overflow: visible !important;
    position: sticky !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 3 !important;
    background: var(--ds-bg-subtle, #f8fafc) !important;
    font-weight: 800 !important;
    border-right: 2px solid rgba(0, 0, 0, 0.12) !important;
}

/* 5 ── restore even-row stripe on the frozen cell */
.ds-table-container.ds-freeze-first-col .mud-table-row:nth-child(even) td:first-child,
.ds-freeze-first-col .mud-table-row:nth-child(even) td:first-child,
.ds-freeze-first-col tbody tr:nth-child(even) td:first-child {
    background: var(--ds-row-stripe, #fafbfc) !important;
}

/* 6 ── restore hover background (odd and even) on the frozen cell */
.ds-table-container.ds-freeze-first-col .mud-table-row:nth-child(even):hover td:first-child,
.ds-freeze-first-col .mud-table-row:nth-child(even):hover td:first-child,
.ds-table-container.ds-freeze-first-col .mud-table-row:nth-child(odd):hover td:first-child,
.ds-freeze-first-col .mud-table-row:nth-child(odd):hover td:first-child,
.ds-freeze-first-col tbody tr:nth-child(even):hover td:first-child,
.ds-freeze-first-col tbody tr:nth-child(odd):hover td:first-child {
    background: var(--ds-row-hover, #f1f5f9) !important;
}

/* ── Folder browser dialog row hover ──────────────────────────────── */
.folder-browser-row:hover {
    background: var(--mud-palette-action-hover);
    border-radius: 4px;
}

/* ── Reports page — report card hover lift ─────────────────────────── */
.ds-report-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.ds-report-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}
/* Clamp description text to 2 lines for uniform card height */
.ds-report-card .mud-card-content p,
.ds-report-card .mud-typography-body2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

/* ── Reports page — section count badge ────────────────────────────── */
.ds-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.07);
    font-size: 11px;
    font-weight: 600;
    color: inherit;
    line-height: 1;
    margin-left: 4px;
}

/* ── ReportWriter — catalog nav item hover (item 6) ─────────────────── */
.rw-catalog-item {
    transition: background 0.13s ease !important;
}
.rw-catalog-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ── ReportWriter — Run Report button hover lift (item 7) ───────────── */
.rw-run-btn {
    min-height: 38px !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease !important;
}
.rw-run-btn:hover {
    box-shadow: 0 4px 20px rgba(255, 128, 0, 0.55) !important;
    transform: translateY(-1px) !important;
}

/* ── Keyboard focus-visible ring (item 10) ──────────────────────────── */
.mud-button-root:focus-visible,
.mud-nav-link:focus-visible,
.mud-icon-button:focus-visible,
.portfolio-native-input:focus-visible,
.portfolio-native-select:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--ds-primary-light) !important;
}

/* ── ReportWriter — tab pill hover states ───────────────────────────── */
/* Inactive pills get a teal-tinted hover; active pills are excluded via .rw-tab-pill--active */
.rw-tab-pill:not(.rw-tab-pill--active):hover {
    background: rgba(8,99,107,0.07) !important;
    color: #08636b !important;
}
.rw-tab-pill.rw-tab-library:not(.rw-tab-pill--active):hover {
    background: rgba(20,184,166,0.08) !important;
    color: #14b8a6 !important;
}
.rw-tab-pill.rw-tab-packets:not(.rw-tab-pill--active):hover {
    background: rgba(37,99,235,0.08) !important;
    color: #2563eb !important;
}
.rw-tab-pill.rw-tab-schedules:not(.rw-tab-pill--active):hover {
    background: rgba(255,128,0,0.08) !important;
    color: #FF8000 !important;
}

/* ── AccountDetail per-tab pill hover states ─────────────────────── */
.rw-tab-pill.rw-tab-portfolio-summary:not(.rw-tab-pill--active):hover {
    background: rgba(8,99,107,0.08) !important;
    color: #08636b !important;
}
.rw-tab-pill.rw-tab-account-returns:not(.rw-tab-pill--active):hover {
    background: rgba(2,132,199,0.08) !important;
    color: #0284c7 !important;
}
.rw-tab-pill.rw-tab-security-returns:not(.rw-tab-pill--active):hover {
    background: rgba(99,102,241,0.08) !important;
    color: #6366f1 !important;
}
.rw-tab-pill.rw-tab-holdings:not(.rw-tab-pill--active):hover {
    background: rgba(37,99,235,0.08) !important;
    color: #2563eb !important;
}
.rw-tab-pill.rw-tab-transactions:not(.rw-tab-pill--active):hover {
    background: rgba(217,119,6,0.08) !important;
    color: #d97706 !important;
}
.rw-tab-pill.rw-tab-account-history:not(.rw-tab-pill--active):hover {
    background: rgba(71,85,105,0.08) !important;
    color: #475569 !important;
}

/* ── Library / Report search pill ───────────────────────────────────── */
/* Pill-shaped, lightly tinted search field used across all four
   ReportWriter tabs (Saved Reports, Library, Packets, Schedules).       */
.ds-search-pill .mud-input.mud-input-outlined {
    border-radius: 24px !important;
    background: rgba(8, 99, 107, 0.025) !important;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.ds-search-pill .mud-input-outlined-border {
    border-radius: 24px !important;
}
.ds-search-pill .mud-input.mud-input-outlined:focus-within {
    background: rgba(8, 99, 107, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(8, 99, 107, 0.10) !important;
}
.ds-search-pill .mud-input-adornment-start .mud-icon-root {
    color: var(--ds-primary) !important;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}
.ds-search-pill .mud-input.mud-input-outlined:focus-within .mud-input-adornment-start .mud-icon-root {
    opacity: 1;
}

/* ── Annualized-return footnote label ───────────────────────────────── */
/* Small muted caption shown below Multi-Horizon chart/table when
   Annualized mode is active.  Rendered by Home.razor via MudText with
   Typo.caption; no extra class needed — the inline style is sufficient.
   The selector below is provided for downstream overrides.              */
.ds-ann-footnote {
    font-size: 0.70rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    display: block;
}

/* ── AccountDetail — redesigned tab strip ──────────────────────────── */
.acct-tab-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 0.8125rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    user-select: none;
    color: #64748b;
    background: transparent;
    position: relative;
}
.acct-tab-item:hover {
    background: rgba(8, 99, 107, 0.04);
    color: #334155;
}
.acct-tab-item .acct-tab-icon {
    font-size: 16px !important;
    transition: color 0.15s ease;
    color: #94a3b8;
}
.acct-tab-item:hover .acct-tab-icon {
    color: #64748b;
}
.acct-tab-item.active {
    font-weight: 600;
}




/* ═══ Animated AI BOT button ═══ */
@keyframes aibot-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes aibot-border-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.aibot-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
        border: 2px solid #ff6800;
    gap: 10px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700;
    font-family: var(--font-ui);
    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;
    /* shimmer text via background-clip */
    background: linear-gradient(90deg, #F97316 0%, #FBBF24 25%, #000 50%, #FBBF24 75%, #F97316 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: aibot-shimmer 2.4s linear infinite;
    letter-spacing: .06em;
}

/* spinning conic-gradient border */
.aibot-border {
    position: absolute;
  
}

.aibot-btn .mud-icon-root {
    /* icon inherits shimmer color from parent text fill */
    background: linear-gradient(90deg, #F97316 0%, #FBBF24 50%, #F97316 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: aibot-shimmer 2.4s linear infinite;
    flex-shrink: 0;
}

.aibot-text {
    white-space: nowrap;
}
.aibot-wrap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.aibot-bubble {
    background: #0A1628;
    border: 1px solid rgba(255,136,18,0.5);
    border-radius: 14px 14px 4px 14px;
    padding: 8px 14px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}
.aibot-bubble span { color: #FF8812; font-weight: 600; }
.aibot-wrap:hover .aibot-bubble {
    opacity: 1;
    transform: translateY(0);
}
.aibot-fab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 12px;
    border-radius: 50px;
    background: #0A1628;
    border: 1.5px solid #FF8812;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(255,136,18,0.25), 0 4px 16px rgba(0,0,0,0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.aibot-fab:hover {
    transform: scale(1.04);
    background: #122035;
    box-shadow: 0 12px 36px rgba(255,136,18,0.35), 0 6px 20px rgba(0,0,0,0.4);
}
.aibot-orb {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid #FF8812;
    background: #0A1628;
    display: flex; align-items: center; justify-content: center;
    position: relative; flex-shrink: 0;
}
.aibot-orb-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #FF8812;
    display: block;
    animation: aibot-pulse 2s ease-in-out infinite;
}
.aibot-orb-ring, .aibot-orb-ring2 {
    position: absolute; inset: -5px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,136,18,0.4);
    animation: aibot-ring 2s ease-in-out infinite;
    display: block;
}
.aibot-orb-ring2 {
    border-color: rgba(255,136,18,0.2);
    animation-delay: 0.6s;
}
.aibot-labels { display: flex; flex-direction: column; gap: 2px; }
.aibot-sub {
    font-size: 9px; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #FF8812; line-height: 1;
}
.aibot-title {
    font-size: 13px; font-weight: 700;
    color: #fff; line-height: 1;
}
.aibot-dots { display: flex; align-items: center; gap: 3px; margin-left: 2px; }
.aibot-dots span {
    display: block; width: 4px; height: 4px;
    border-radius: 50%; background: #FF8812; opacity: 0.7;
    animation: aibot-dot 1.5s ease-in-out infinite;
}
.aibot-dots span:nth-child(2) { animation-delay: 0.2s; }
.aibot-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aibot-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.22); opacity: 0.8; }
}
@keyframes aibot-ring {
    0% { transform: scale(1); opacity: 0.55; }
    70%, 100% { transform: scale(1.75); opacity: 0; }
}
@keyframes aibot-dot {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40% { transform: translateY(-4px); opacity: 1; }
}
.aichat-msg-avatar img{
    width: 25px!important;
}