/* ============================================================================
   LIGHT THEME — Vimax
   ============================================================================
   All colors use CSS custom properties defined in :root below.
   Only COLORS are overridden here — no layout changes (padding, min-height, etc.).
   Branch accent colors are preserved via var(--branch-color).
   ============================================================================ */


/* ═══════════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (:root)
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {

    /* ── Core palette ─────────────────────────────────────────────────────── */
    --bg-primary: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-header: #f1f5f9;
    --border-color: #e2e8f0;
    --drawer-divider-color: #c3cfdf;
    --text-secondary: #6b7280;

    /* ── Gray scale (legacy names kept for compatibility) ──────────────────── */
    --black: #000000;
    --ebony: #121212;
    --jet: #1f1f1f;
    --charcoal: #212121;
    --dark-gray: #333333;
    --dim-gray: #424242;
    --slate-gray: #616161;
    --gray: #757575;
    --davy-gray: #555555;
    --gray-dark: #808080;
    --pale-gray: #B0B0B0;
    --silver: #C0C0C0;
    --light-gray: #BDBDBD;
    --gainsboro: #e0e0e0;
    --smoke-gray: #F5F5F5;
    --white: #FFFFFF;
    --blue: #2563eb;
    --turquoise: #14b8a6;
    --strong-yellow: #ca8a04;

    /* ── General / Blazor defaults ─────────────────────────────────────────── */
    --blazor-load-background-color: #ffffff;
    --app-text-color: #111827;
    --oi-color: var(--text-secondary);
    --index-background-color: #f9fafb;
    --h3-color: var(--text-primary);
    --h4-color: var(--text-primary);

    /* ── Palette numeric aliases ───────────────────────────────────────────── */
    --palette-color-01: var(--bg-card);
    --palette-color-02: var(--bg-input);
    --palette-color-03: var(--text-primary);
    --palette-color-04: var(--bg-input);
    --palette-color-05: var(--white);
    --palette-color-06: var(--text-primary);
    --palette-color-07: var(--bg-input);
    --palette-color-08: var(--border-color);
    --palette-color-09: var(--border-color);
    --palette-color-10: var(--text-primary);
    --palett-color-11: var(--text-primary);

    /* ── Custom paper (GenericForm) ────────────────────────────────────────── */
    --custom-paper-background-color: var(--bg-card);
    --custom-paper-text-color: var(--text-primary);
    --custom-paper-input-background-color: var(--bg-input);
    --custom-paper-input-text-color: var(--text-primary);
    --custom-paper-input-color-hover: var(--border-color);
    --focus-border: #2563eb;

    /* ── Top bar ──────────────────────────────────────────────────────────── */
    --top-bar-background-color: var(--bg-card);
    --top-bar-text-color: var(--text-primary);
    --topbar-color-a-hover: var(--text-primary);

    /* ── Navigation menu ──────────────────────────────────────────────────── */
    --navmenu-container-background: var(--bg-card);
    --navlink-hover-background-color: rgba(99,102,241,0.06);
    --navlink-active-background-color: rgba(147,197,253,0.12);
    --navbar-background-color: var(--bg-card);
    --navbar-text-color: var(--text-secondary);
    --navbar-sub_item-menu_name-hover-color: #2563eb;
    --icon-io-color-navmenu: var(--text-secondary);

    /* ── Background tints ─────────────────────────────────────────────────── */
    --background-tint-color: #fbfdff;

    /* ── Buttons ──────────────────────────────────────────────────────────── */
    --button-background-color: #eef6ff;
    --button-text-color: var(--text-primary);
    --button-hover-background-color: #e0f2ff;

    /* ── Table ────────────────────────────────────────────────────────────── */
    --table-row-background-color: var(--bg-card);
    --table-text-color: var(--text-primary);
    --table-hover-background-color: #f8fafc;
    --table-edit-icon: #2563eb;

    /* ── Dialog / Paper containers ────────────────────────────────────────── */
    --dialog-background-color: var(--bg-card);
    --dialog-text-color: var(--text-primary);
    --paper-container-background: var(--bg-card);
    --paper-container-border: #eef4fb;
    --navigation-panel-background: var(--bg-card);
    --navigation-panel-border: #eef4fb;
    --boton-activo-background: rgba(99,102,241,0.06);
    --boton-inactivo-background: #fbfdff;
    --boton-hover-background: rgb(177 177 177 / 60%);
    --content-section-background: var(--bg-card);
    --content-section-border: #f3f7fb;
    --content-section-text: var(--text-primary);
    --card-bg-color: var(--bg-card);
    --card-text-color: var(--text-primary);

    /* ── EventMonitor Tabs ────────────────────────────────────────────────── */
    --em-tabs-wrapper-bg: #ffffff;
    --em-tabs-wrapper-border: #e5e7eb;
    --em-tabs-bg: transparent;
    --em-tabs-text: #374151;
    --em-tabs-hover-bg: #f3f4f6;
    --em-tabs-active-bg: #2bb981;
    --em-tabs-active-text: #ffffff;
    --em-tabs-icon: #6b7280;
    --em-tabs-active-icon: #ffffff;
    --em-tabs-chip-bg: #f3f4f6;
    --em-tabs-chip-text: #374151;
    --em-tabs-active-chip-bg: rgba(255,255,255,0.25);
    --em-tabs-active-chip-text: #ffffff;

    /* ── MudBlazor palette overrides (win over MudThemeProvider) ── */
    --mud-palette-surface: var(--bg-card) !important;
    --mud-palette-background: var(--bg-primary) !important;
    --mud-palette-text-primary: var(--text-primary) !important;
    --mud-palette-text-secondary: var(--text-secondary) !important;
    --mud-palette-text-disabled: #9ca3af !important;
    --mud-palette-drawer-background: var(--bg-card) !important;
    --mud-palette-drawer-text: var(--text-primary) !important;
    --mud-palette-appbar-background: var(--bg-card) !important;
    --mud-palette-appbar-text: var(--text-primary) !important;
    --mud-palette-divider: var(--border-color) !important;
    --mud-palette-lines-default: var(--border-color) !important;
    --mud-palette-lines-inputs: var(--border-color) !important;
    --mud-palette-table-lines: var(--border-color) !important;
    --mud-palette-table-hover: rgba(0,0,0,0.04) !important;
    --mud-palette-overlay-dark: rgba(0,0,0,0.5) !important;

    /* ── Vimax Data Grid (GenericTable) ───────────────────────────────────── */
    --vimax-grid-bg: var(--bg-card);
    --vimax-grid-row-odd-bg: var(--bg-card);
    --vimax-grid-row-even-bg: #f3f4f6;
    --vimax-grid-header-bg: var(--bg-header);
    --vimax-grid-row-hover-bg: rgba(0,0,0,0.03);
    --vimax-grid-row-selected-bg: rgba(37,99,235,0.08);
    --vimax-hover-bg: rgba(0,0,0,0.03);

    /* ── Module cards (Dashboard) ─────────────────────────────────────────── */
    --module-card-bg: var(--bg-card);
    --module-card-text: var(--text-primary);
    --module-card-hover-shadow: 0 12px 28px -6px rgba(0,0,0,0.12);

    /* ── Skeleton - Dashboard loading ──────────────────────────────────────── */
    --module-skeleton-bg: var(--bg-card);
    --module-skeleton-border: var(--border-color);
    --module-skeleton-shimmer: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%);
    --module-skeleton-shimmer-base: #e2e8f0;
    --module-skeleton-shimmer-peak: #cbd5e1;

    /* ── Skeleton - Table loading ──────────────────────────────────────────── */
    --vimax-skeleton-container-bg: var(--bg-card);
    --vimax-skeleton-header-bg: var(--bg-header);
    --vimax-skeleton-row-even-bg: var(--bg-input);
    --vimax-skeleton-row-odd-bg: var(--bg-card);
    --vimax-skeleton-border: 1px solid var(--border-color);

    /* ── Dual Panel (Profile Modules) ─────────────────────────────────────── */
    --dual-panel-border: #eee;
    --dual-panel-badge-bg: #eef2ff;
    --dual-panel-badge-text: #334;
    --dual-panel-meta-color: #777;
    --dual-panel-meta-detail-color: #555;
    --dual-panel-empty-color: rgba(0, 0, 0, 0.4);
    --dual-panel-empty-icon-color: rgba(0, 0, 0, 0.25);
    --dual-panel-item-hover-bg: rgba(0, 0, 0, 0.03);
    --dual-panel-btn-hover-bg: #f9ece5;
    --dual-panel-skeleton-bg: rgba(0, 0, 0, 0.06);
    --dual-panel-tag-bg: rgba(122, 47, 31, 0.08);
    --dual-panel-tag-color: #7a2f1f;

    /* ── GenericColors (Semantic color palette) ──────────────────────────────── */
    /* Green */
    --gic-green-bg: #dcfce7;
    --gic-green-fg: #166534;
    --gic-green-border: #bbf7d0;
    --gic-green-accent: #22c55e;
    /* Yellow */
    --gic-yellow-bg: #fef9c3;
    --gic-yellow-fg: #713f12;
    --gic-yellow-border: #fde047;
    --gic-yellow-accent: #eab308;
    /* Red */
    --gic-red-bg: #fee2e2;
    --gic-red-fg: #7f1d1d;
    --gic-red-border: #fecaca;
    --gic-red-accent: #ef4444;
    /* Blue */
    --gic-blue-bg: #dbeafe;
    --gic-blue-fg: #1e3a5f;
    --gic-blue-border: #bfdbfe;
    --gic-blue-accent: #3b82f6;
    /* Day */
    --gic-day-bg: #eff6ff;
    --gic-day-fg: #1e40af;
    --gic-day-border: #bfdbfe;
    --gic-day-accent: #3b82f6;
    /* Purple */
    --gic-purple-bg: #f3e8ff;
    --gic-purple-fg: #4c1d95;
    --gic-purple-border: #e9d5ff;
    --gic-purple-accent: #a855f7;
    /* Indigo */
    --gic-indigo-bg: #ede9fe;
    --gic-indigo-fg: #4c1d95;
    --gic-indigo-border: #ddd6fe;
    --gic-indigo-accent: #6366f1;
    /* Cyan */
    --gic-cyan-bg: #e0f2fe;
    --gic-cyan-fg: #0c4a6e;
    --gic-cyan-border: #bae6fd;
    --gic-cyan-accent: #0ea5e9;
    /* Orange */
    --gic-orange-bg: #fff7ed;
    --gic-orange-fg: #7c2d12;
    --gic-orange-border: #fed7aa;
    --gic-orange-accent: #f97316;
    /* Gray */
    --gic-gray-bg: #f3f4f6;
    --gic-gray-fg: #374151;
    --gic-gray-border: #d1d5db;
    --gic-gray-accent: #6b7280;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-typography {
    color: var(--text-primary) !important;
}

.mud-input.mud-input-outlined.mud-input-outlined-with-label.mud-typography-subtitle1 {
    background-color: var(--bg-input) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. PAGE BACKGROUND
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-main-content,
.main-content,
.background-container {
    background-color: var(--bg-primary) !important;
}
.background-container.mud-theme-dark,
.mud-main-content.mud-theme-dark {
    background-color: var(--bg-card) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   4. PAPERS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-paper {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   5. INPUTS & LABELS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-input-label,
label.mud-input-label,
.mud-formcontrol label,
.mud-text-field .mud-input-label {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
.mud-text-field.mud-focused .mud-input-label,
.mud-select .mud-input-label.mud-shrink,
.mud-picker .mud-input-label.mud-shrink,
.mud-input-label.mud-input-label-inputcontrol {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
::placeholder {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}
.mud-input-root,
.mud-text-field,
.mud-input-slot,
.mud-formcontrol,
input.mud-input-element,
textarea.mud-input-element {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    caret-color: var(--text-primary) !important;
}
.mud-text-field .mud-input-slot,
.mud-input-root .mud-input-slot,
.mud-input-root .mud-input-control {
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    background-color: var(--bg-input) !important;
}
.mud-text-field:hover .mud-input-slot,
.mud-input-root:hover .mud-input-slot,
.mud-text-field.mud-focused .mud-input-slot,
.mud-input-element:focus {
    border-color: var(--mud-palette-primary, var(--focus-border)) !important;
}
.mud-text-field.mud-focused .mud-input-slot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary, rgba(37,99,235,0.15)) 20%, transparent) inset !important;
}
.mud-input-adornment {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
}
.mud-input-adornment .mud-icon-root {
    color: var(--branch-color, var(--text-secondary)) !important;
}
input, textarea, select, .mud-input-element {
    color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
    background-color: var(--bg-input) !important;
}
.mud-switch input[type="checkbox"] {
    background-color: transparent !important;
}
.mud-input-adornment,
.mud-form-helper-text,
.mud-form-helper-text * {
    color: var(--text-secondary) !important;
}
.mud-text-field .mud-input-label,
.mud-input-label {
    color: var(--text-primary) !important;
    background: var(--bg-input) !important;
    padding: 0 6px !important;
    display: inline-block !important;
    box-shadow: none !important;
    line-height: 1 !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
.mud-text-field.mud-input--outlined .mud-input-label,
.mud-text-field.mud-input--outlined .mud-input-label.mud-input-label {
    background: transparent !important;
}
.mud-text-field .mud-input-label::before,
.mud-text-field .mud-input-label::after {
    background: transparent !important;
    box-shadow: none !important;
}
.mud-input.mud-disabled .mud-input-outline-border,
.mud-input.mud-disabled .mud-input-outlined-border {
    border-color: #d1d5db !important;
}
.mud-input.mud-disabled,
.mud-input.mud-disabled .mud-input-root,
.mud-input.mud-disabled .mud-input-slot,
.mud-input.mud-disabled .mud-select-input {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
}
.mud-input.mud-disabled:hover .mud-input-outline-border,
.mud-input.mud-disabled:hover .mud-input-outlined-border {
    border-color: #d1d5db !important;
}
.mud-input-control:hover .mud-input-outlined-border {
    border-color: var(--branch-color, var(--mud-palette-primary)) !important;
}

/* ── Autofill ─────────────────────────────────────────────────────────────── */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill:hover,
select:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus,
input:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}
input:-webkit-autofill::first-line,
textarea:-webkit-autofill::first-line {
    -webkit-text-fill-color: var(--text-primary) !important;
}
.mud-input-element:-webkit-autofill,
.mud-input-element:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   6. TOPBAR
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-toolbar,
.mud-toolbar.mud-toolbar-gutters,
.mud-toolbar-flat {
    color: var(--text-primary) !important;
}
.mud-toolbar .mud-typography {
    color: var(--text-primary) !important;
}
.mud-toolbar .mud-button:not(.topbar-btn) {
    color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   7. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-button:not(.topbar-btn):not(.footerbar-btn):not(.mud-button-disabled):not([disabled]):not(.mud-timepicker-button) {
    color: var(--text-primary) !important;
}
.mud-button.mud-button-outlined:not(.topbar-btn):not(.footerbar-btn):not(.mud-button-disabled):not([disabled]) {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.generic-btn-filled {
    background-color: var(--branch-secondary, var(--mud-palette-primary)) !important;
    color: var(--branch-text, #fff) !important;
}
.mud-button-disabled, .mud-button[disabled] {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    color: var(--text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. CARDS & CONTAINERS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-card {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
.mud-card-header .mud-typography {
    color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   9. DIVIDER
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-divider {
    border-top-color: var(--border-color) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   10. CHIP / BADGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-chip {
    background-color: #e2e2e2 !important;
    color: var(--text-primary) !important;
}
.mud-badge {
    color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   11. TABS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-tabs {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
.mud-tabs .mud-tabs-tabbar {
    background-color: var(--bg-primary) !important;
    border-bottom: 2px solid var(--border-color) !important;
}
.mud-tabs .mud-tab {
    color: var(--text-secondary) !important;
    background: transparent !important;
}
.mud-tabs .mud-tab:hover {
    color: var(--text-primary) !important;
    background-color: rgba(0,0,0,0.04) !important;
}
.mud-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary, #2563eb) !important;
    background-color: var(--bg-card) !important;
    font-weight: 600 !important;
}
.mud-tabs .mud-tab .mud-tab-text {
    color: inherit !important;
}
.mud-tabs .mud-tabs-panel {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}
.mud-tabs .mud-tab-slider {
    background-color: var(--mud-palette-primary, #2563eb) !important;
}
.mud-tabs-tabbar {
    background-color: var(--bg-primary) !important;
    border-bottom: 2px solid var(--border-color) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   12. NAVMENU
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-popover .mud-navmenu .nav-text,
.mud-menu .mud-navmenu .nav-text,
.navmenu-popover .mud-navmenu .nav-text {
    color: var(--text-primary) !important;
}
.mud-popover .mud-navmenu .nav-icon,
.mud-menu .mud-navmenu .nav-icon,
.navmenu-popover .mud-navmenu .nav-icon {
    color: var(--text-primary) !important;
}
.mud-popover .mud-navmenu .mud-divider,
.mud-menu .mud-navmenu .mud-divider,
.navmenu-popover .mud-navmenu .mud-divider {
    border-top: 1px solid var(--border-color) !important;
    opacity: 0.9;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   13. STEPPER / GENERIC STEPPER
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-stepper .mud-stepper-header,
.mud-stepper-header {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
.mud-stepper .mud-stepper-line {
    background-color: var(--border-color) !important;
}
.stepper-header {
    background: var(--bg-card) !important;
    border-bottom-color: var(--border-color) !important;
}
.step-circle.active {
    background: var(--bg-card) !important;
}
.step-circle.pending {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
.step-label.active .step-title,
.step-label.active .step-subtitle {
    color: var(--stepper-main) !important;
}
.step-label.pending .step-title,
.step-label.pending .step-subtitle {
    color: var(--text-secondary) !important;
}
.generic-stepper-dialog .step-line {
    background-color: var(--border-color) !important;
}
.generic-stepper-dialog .stepper-footer {
    background: var(--bg-card) !important;
    border-top-color: var(--border-color) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   14. TABLE
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-table {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
.mud-table .mud-table-head {
    background-color: var(--branch-secondary, var(--bg-header)) !important;
}
.mud-table .mud-table-head .mud-table-row .mud-table-cell {
    color: var(--branch-text, var(--text-primary)) !important;
}
.mud-table .mud-table-body .mud-table-row {
    background-color: var(--bg-card) !important;
}
.mud-table .mud-table-body .mud-table-row:nth-child(even) {
    background-color: #f3f4f6 !important;
}
.mud-table .mud-table-body .mud-table-row .mud-table-cell {
    color: var(--text-primary) !important;
}
.mud-table .mud-table-body .mud-table-row:hover {
    background-color: rgba(0,0,0,0.03) !important;
}
.mud-table .mud-table-empty-row {
    background-color: var(--bg-card) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   15. SELECT / DROPDOWN
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-select .mud-input-slot,
.mud-select .mud-input-text,
.mud-select .mud-select-input {
    color: var(--text-primary) !important;
}
.mud-select .mud-input-slot { color: var(--text-primary) !important; }
.mud-select .mud-input-text { color: var(--text-primary) !important; }
.mud-list-item {
    color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   16. DIALOG / MODAL
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-dialog {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
.mud-dialog .mud-dialog-title {
    color: var(--branch-text, var(--text-primary)) !important;
    background-color: var(--branch-secondary, var(--bg-card)) !important;
}
.mud-dialog .mud-dialog-content {
    color: var(--text-primary) !important;
}
.mud-dialog .mud-dialog-actions {
    background-color: var(--bg-card) !important;
    border-top: 1px solid var(--border-color) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   17. EXPANSION PANELS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-expansion-panel,
.mud-expansion-panels .mud-expansion-panel {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    border: 1px solid var(--border-color) !important;
}
.mud-expansion-panel.mud-expanded {
    background-color: var(--bg-input) !important;
}
.mud-expansion-panel .mud-expansion-panel-header,
.mud-expansion-panel .mud-expansion-panel-header .mud-typography {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}
.mud-expansion-panel .mud-expansion-panel-content {
    color: var(--text-primary) !important;
    background-color: var(--bg-card) !important;
    border-top: 1px solid var(--border-color) !important;
}
.mud-expansion-panel .mud-expansion-panel-header:hover {
    background-color: var(--bg-input) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   18. CHECKBOX
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-checkbox .mud-icon-root {
    color: var(--text-secondary) !important;
}
.mud-checkbox input:checked + .mud-checkbox-span {
    color: var(--branch-color, var(--mud-palette-primary)) !important;
}
.mud-dialog .mud-checkbox input:checked + .mud-checkbox-span,
.vimax-data-grid .mud-checkbox input:checked + .mud-checkbox-span {
    color: var(--branch-color, var(--mud-palette-primary)) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   19. ALERT
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-alert {
    color: var(--text-primary) !important;
}
.mud-alert.mud-alert-info {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   20. SKELETON — Table loading (colors only, structure lives in GenericTable.razor.css)
   ═══════════════════════════════════════════════════════════════════════════════ */
.vimax-data-grid-skeleton {
    background-color: var(--vimax-skeleton-container-bg) !important;
}
.skeleton-row-even {
    background-color: var(--vimax-skeleton-row-odd-bg) !important;
}
.skeleton-row-odd {
    background-color: var(--vimax-skeleton-row-even-bg) !important;
}
.skeleton-header {
    background-color: var(--vimax-skeleton-header-bg) !important;
}
.vimax-data-grid-skeleton .mud-skeleton {
    background-color: #c5c9d1 !important;
}
.mud-skeleton {
    background-color: #c5c9d1 !important;
    color: #c5c9d1 !important;
}
.mud-skeleton::before {
    background: linear-gradient(90deg, transparent, #b0b5be, transparent) !important;
}
.mud-skeleton-wave::before {
    background: linear-gradient(90deg, transparent, #b0b5be, transparent) !important;
}
.mud-skeleton-pulse::before {
    background: #b0b5be !important;
}
.selfassist-stepper-card .mud-skeleton {
    background-color: #bcc2ca !important;
    color: #bcc2ca !important;
}
.selfassist-stepper-card .mud-skeleton::before {
    background: linear-gradient(90deg, transparent, #a8b0ba, transparent) !important;
}
.selfassist-stepper-card .mud-skeleton.mud-skeleton-pulse::before {
    background: #a8b0ba !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   21. MODULE CARDS (Dashboard)
   ═══════════════════════════════════════════════════════════════════════════════ */
.module-card {
    background-color: var(--module-card-bg) !important;
    color: var(--module-card-text) !important;
    border-color: color-mix(in srgb, var(--branch-color, var(--border-color)) 70%, var(--bg-card)) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.module-card:hover {
    box-shadow: var(--module-card-hover-shadow) !important;
}
.module-card .module-icon-circle {
    background-color: color-mix(in srgb, var(--branch-color, var(--border-color)) 15%, var(--bg-card)) !important;
}
.module-card .module-folder-badge {
    background-color: color-mix(in srgb, var(--branch-color, var(--border-color)) 20%, var(--bg-card)) !important;
    color: var(--branch-text, var(--text-primary)) !important;
}
.module-card .module-name {
    color: var(--module-card-text) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   22. VIMAX DATA GRID (GenericTable)
   ═══════════════════════════════════════════════════════════════════════════════ */
.vimax-data-grid {
    border: 1px solid var(--border-color) !important;
}

/* ── Container ────────────────────── */
.vimax-data-grid,
.vimax-data-grid > div:first-child,
.vimax-data-grid .mud-table-root,
.vimax-data-grid > div[class*="grid"],
.vimax-data-grid > div[class*="Grid"] {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* ── Header cells ─────────────────── */
.vimax-data-grid > [class*="grid-header"]:first-child,
.vimax-data-grid > [class*="grid-Header"]:first-child {
    background-color: var(--branch-secondary, var(--bg-header)) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.vimax-data-grid [class*="sort"],
.vimax-data-grid [class*="Sort"],
.vimax-data-grid [class*="filter-icon"],
.vimax-data-grid [class*="filter-ico"] {
    color: var(--branch-text, var(--text-secondary)) !important;
}

/* ── Body ─────────────────────────── */
.vimax-data-grid [class*="body"],
.vimax-data-grid [class*="Body"] {
    background-color: var(--bg-card) !important;
}
.vimax-data-grid [class*="row"]:nth-child(odd),
.vimax-data-grid [class*="Row"]:nth-child(odd) {
    background-color: var(--bg-card) !important;
}
.vimax-data-grid [class*="row"]:nth-child(even),
.vimax-data-grid [class*="Row"]:nth-child(even) {
    background-color: #f3f4f6 !important;
}
.vimax-data-grid [class*="cell"]:not(th),
.vimax-data-grid [class*="Cell"]:not(th),
.vimax-data-grid td {
    color: var(--text-primary) !important;
    background-color: inherit !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.vimax-data-grid thead th {
    color: var(--branch-text, var(--text-primary)) !important;
    background-color: var(--branch-secondary, var(--bg-header)) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* ── Row selected ─────────────────── */
.vimax-data-grid [class*="row"][class*="selected"],
.vimax-data-grid [class*="Row"][class*="Selected"],
.vimax-data-grid tr[class*="selected"],
.vimax-data-grid tr[class*="Selected"] {
    background-color: var(--vimax-grid-row-selected-bg, rgba(37,99,235,0.08)) !important;
}
.vimax-data-grid [class*="row"][class*="selected"] td,
.vimax-data-grid [class*="Row"][class*="Selected"] td,
.vimax-data-grid tr[class*="selected"] td,
.vimax-data-grid tr[class*="Selected"] td {
    background-color: var(--vimax-grid-row-selected-bg, rgba(37,99,235,0.08)) !important;
}

/* ── Empty / No records ───────────── */
.vimax-data-grid [class*="empty"],
.vimax-data-grid [class*="Empty"] {
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

/* ── Footer / Pagination ──────────── */
.vimax-data-grid [class*="footer"],
.vimax-data-grid [class*="Footer"] {
    border-top: 1px solid var(--border-color) !important;
    background-color: var(--bg-primary) !important;
}
.vimax-data-grid [class*="pagination"],
.vimax-data-grid [class*="Pagination"],
.vimax-data-grid [class*="pager"],
.vimax-data-grid [class*="Pager"] {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ── Toolbar ──────────────────────── */
html .vimax-data-grid .mud-table-toolbar,
html .vimax-data-grid .mud-toolbar,
.vimax-data-grid .mud-table-toolbar,
.vimax-data-grid .mud-toolbar {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* ── Pagination toolbar ───────────── */
html .vimax-data-grid .mud-table-pagination,
html .vimax-data-grid .mud-table-pagination .mud-toolbar,
html .vimax-data-grid .mud-grid-pager,
html .vimax-data-grid nav {
    background-color: var(--bg-primary) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* ── Pagination buttons & icons ───── */
.vimax-data-grid .mud-grid-pager button,
.vimax-data-grid nav button,
.vimax-data-grid .mud-table-pagination button,
.vimax-data-grid [class*="pagination"] button {
    color: var(--text-secondary) !important;
    background: transparent !important;
}
.vimax-data-grid .mud-grid-pager button:hover,
.vimax-data-grid nav button:hover,
.vimax-data-grid .mud-table-pagination button:hover,
.vimax-data-grid [class*="pagination"] button:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-input) !important;
}
.vimax-data-grid .mud-grid-pager button svg,
.vimax-data-grid nav button svg,
.vimax-data-grid .mud-table-pagination button svg,
.vimax-data-grid [class*="pagination"] button svg {
    color: var(--text-secondary) !important;
    fill: var(--text-secondary) !important;
}
.vimax-data-grid .mud-grid-pager button:hover svg,
.vimax-data-grid nav button:hover svg,
.vimax-data-grid .mud-table-pagination button:hover svg,
.vimax-data-grid [class*="pagination"] button:hover svg {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}
.vimax-data-grid .mud-grid-pager [class*="page"],
.vimax-data-grid .mud-grid-pager [class*="Page"],
.vimax-data-grid [class*="pagination"] [class*="page"] {
    color: var(--text-secondary) !important;
    background: transparent !important;
}
.vimax-data-grid .mud-grid-pager [class*="page"]:hover,
.vimax-data-grid [class*="pagination"] [class*="page"]:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-input) !important;
}
.vimax-data-grid nav [class*="selected"],
.vimax-data-grid nav [class*="Selected"],
.vimax-data-grid .mud-grid-pager [class*="selected"],
.vimax-data-grid .mud-grid-pager [class*="Selected"],
.vimax-data-grid .mud-grid-pager [class*="current"],
.vimax-data-grid .mud-grid-pager [class*="Current"],
.vimax-data-grid .mud-table-pagination [class*="selected"] {
    color: var(--mud-palette-primary, #2563eb) !important;
    font-weight: 600 !important;
}
.vimax-data-grid .mud-grid-pager select,
.vimax-data-grid .mud-grid-pager input[type="number"],
.vimax-data-grid nav select,
.vimax-data-grid nav input[type="number"],
.vimax-data-grid .mud-table-pagination select,
.vimax-data-grid .mud-table-pagination input[type="number"] {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
.vimax-data-grid .mud-grid-pager span,
.vimax-data-grid .mud-grid-pager p,
.vimax-data-grid .mud-grid-pager label,
.vimax-data-grid nav span,
.vimax-data-grid nav p,
.vimax-data-grid nav label,
.vimax-data-grid .mud-table-pagination span,
.vimax-data-grid .mud-table-pagination p,
.vimax-data-grid .mud-table-pagination label {
    color: var(--text-secondary) !important;
}

/* ── Pagination actions ───────────── */
.vimax-data-grid .mud-table-pagination .mud-table-pagination-actions .mud-button-root {
    color: var(--text-secondary) !important;
}
.vimax-data-grid .mud-table-pagination .mud-table-pagination-actions .mud-button-root:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-input) !important;
}


/* ── Table-based fallbacks ────────── */
html .vimax-data-grid .mud-table-root { background-color: var(--bg-card) !important; }
html .vimax-data-grid .mud-table-cell { color: var(--text-primary) !important; }
html .vimax-data-grid thead th {
    background-color: var(--branch-secondary, var(--bg-header)) !important;
    color: var(--branch-text, var(--text-primary)) !important;
}
html .vimax-data-grid thead th [class*="sort"] { color: var(--branch-text, var(--text-secondary)) !important; }
html .vimax-data-grid tbody tr td {
    background-color: inherit !important;
    color: var(--text-primary) !important;
}
html .vimax-data-grid tbody tr:nth-child(odd) td {
    background-color: var(--bg-card) !important;
}
html .vimax-data-grid tbody tr:nth-child(even) td {
    background-color: #f3f4f6 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   23. MUD SELECT POPOVER
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-popover .mud-list-item {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}
.mud-popover .mud-list-item:hover {
    background-color: var(--border-color) !important;
}
.mud-popover .mud-list-item.mud-selected-item {
    color: var(--mud-palette-primary, var(--text-primary)) !important;
    background-color: color-mix(in srgb, var(--mud-palette-primary, transparent) 12%, var(--bg-input)) !important;
}

/* ── GenericAutoComplete popover selected item ────────────────────────── */
.ga-ac-activos .mud-list-item.mud-selected-item {
    color: var(--branch-1-color) !important;
    background-color: color-mix(in srgb, var(--branch-1-color) 12%, var(--bg-input)) !important;
}
.ga-ac-asistencia .mud-list-item.mud-selected-item {
    color: var(--branch-2-color) !important;
    background-color: color-mix(in srgb, var(--branch-2-color) 12%, var(--bg-input)) !important;
}
.ga-ac-aulavirtual .mud-list-item.mud-selected-item {
    color: var(--branch-3-color) !important;
    background-color: color-mix(in srgb, var(--branch-3-color) 12%, var(--bg-input)) !important;
}
.ga-ac-visitas .mud-list-item.mud-selected-item {
    color: var(--branch-4-color) !important;
    background-color: color-mix(in srgb, var(--branch-4-color) 12%, var(--bg-input)) !important;
}
.ga-ac-acceso .mud-list-item.mud-selected-item {
    color: var(--branch-5-color) !important;
    background-color: color-mix(in srgb, var(--branch-5-color) 12%, var(--bg-input)) !important;
}
.ga-ac-lpr .mud-list-item.mud-selected-item {
    color: var(--branch-6-color) !important;
    background-color: color-mix(in srgb, var(--branch-6-color) 12%, var(--bg-input)) !important;
}
.ga-ac-inventario .mud-list-item.mud-selected-item {
    color: var(--branch-7-color) !important;
    background-color: color-mix(in srgb, var(--branch-7-color) 12%, var(--bg-input)) !important;
}
.ga-ac-global .mud-list-item.mud-selected-item {
    color: var(--branch-8-color) !important;
    background-color: color-mix(in srgb, var(--branch-8-color) 12%, var(--bg-input)) !important;
}
.ga-ac-centrodeayuda .mud-list-item.mud-selected-item {
    color: var(--branch-9-color) !important;
    background-color: color-mix(in srgb, var(--branch-9-color) 12%, var(--bg-input)) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   24. VIMAX ACTION BAR
   ═══════════════════════════════════════════════════════════════════════════════ */
.vimax-actionbar {
    background-color: transparent;
}
.vimax-actionbar .mud-input-root {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}
.vimax-actionbar .mud-input-root::placeholder {
    color: var(--text-secondary) !important;
}
.vimax-actionbar .mud-select {
    color: var(--text-primary) !important;
}
.vimax-actionbar .mud-icon-button:hover .mud-icon-root {
    color: var(--mud-palette-primary, var(--text-primary)) !important;
}
.vimax-actionbar .mud-button.mud-button-filled:not(.mud-button-disabled):not([disabled]) {
    background-color: var(--branch-secondary, var(--mud-palette-primary)) !important;
    color: var(--branch-text, #fff) !important;
}
.vimax-actionbar .mud-button.mud-button-outlined:not(.mud-button-disabled):not([disabled]) {
    color: var(--branch-text, var(--mud-palette-primary)) !important;
    border-color: var(--branch-secondary, var(--mud-palette-primary)) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   25. IMPORT — Drag & Drop, Error Cells, Steps
   ═══════════════════════════════════════════════════════════════════════════════ */
.gdd-dropzone {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
}
.gdd-icon-wrap {
    background: var(--border-color) !important;
}
.gdd-file-chip {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
.gdd-file-chip-icon {
    background: var(--bg-input) !important;
}
.gdd-file-chip-name {
    color: var(--text-primary) !important;
}
.gdd-file-chip-remove {
    color: var(--text-secondary) !important;
}
.cell-error,
.mud-table .cell-error {
    background-color: rgba(239,68,68,0.1) !important;
    color: #dc2626 !important;
    border-left: 3px solid #ef4444 !important;
}
.cell-error .mud-input-slot,
.cell-error .mud-input-element {
    color: #dc2626 !important;
}
.generic-import-upload-step,
.generic-import-review-step,
.generic-import-confirm-step {
    color: var(--text-primary) !important;
}
.generic-import-upload-step .gdd-dropzone,
.generic-import-review-step .gdd-dropzone {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
}
.generic-import-review-step .mud-tab,
.generic-import-confirm-step .mud-tab {
    color: var(--text-secondary) !important;
}
.generic-import-review-step .mud-tab.mud-tab-active,
.generic-import-confirm-step .mud-tab.mud-tab-active {
    color: var(--text-primary) !important;
}
.generic-stepper-dialog .mud-expansion-panel,
.import-warning-panel {
    background-color: rgba(251,191,36,0.08) !important;
    border-color: rgba(251,191,36,0.25) !important;
}
.generic-stepper-dialog .mud-expansion-panel .mud-expansion-panel-content,
.import-warning-panel .mud-expansion-panel-content {
    background-color: var(--bg-card) !important;
}
.generic-stepper-dialog .mud-typography[style*="color: #f57c00"],
.import-warning-panel .mud-typography {
    color: #d97706 !important;
}
.generic-stepper-dialog .mud-expansion-panel ul,
.import-warning-panel .mud-expansion-panel ul { color: var(--text-secondary) !important; }
.generic-stepper-dialog .mud-expansion-panel li,
.import-warning-panel .mud-expansion-panel li { color: var(--text-secondary) !important; }
.generic-stepper-dialog .mud-expansion-panel li strong,
.import-warning-panel .mud-expansion-panel li strong { color: var(--text-primary) !important; }
.generic-stepper-dialog .mud-expansion-panel span[style*="color: #f57c00"],
.import-warning-panel .mud-expansion-panel span[style*="color: #f57c00"] { color: #d97706 !important; }
.generic-stepper-dialog .mud-expansion-panel span[style*="color: #d32f2f"],
.import-warning-panel .mud-expansion-panel span[style*="color: #d32f2f"] { color: #dc2626 !important; }
.generic-stepper-dialog .mud-expansion-panel div[style*="background:#e0e0e0"],
.import-warning-panel .mud-expansion-panel div[style*="background:#e0e0e0"] { background: var(--border-color) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   26. UO TABLES (Module 813)
   ═══════════════════════════════════════════════════════════════════════════════ */
.uo-tabs { --mud-elevation-1: 0px 2px 8px -2px rgba(0,0,0,0.08); }
.uo-tabs,
.uo-tabs .mud-tabs-tabbar,
.uo-filterbar,
.uo-filterbar-select-item,
.uo-table .mud-table-body .mud-table-row .mud-table-cell,
.uo-table .mud-table-pagination .mud-toolbar,
.uo-table .mud-table-pagination .mud-toolbar .mud-input,
.uo-table .mud-table-pagination .mud-toolbar .mud-icon-root,
.uo-table .mud-table-empty-row,
.uo-dialog,
.uo-dialog .mud-paper,
.mud-popover .mud-list-item {
    background-color: var(--bg-card) !important;
}
.uo-tabs .mud-tabs-tabbar .mud-tab,
.uo-filterbar,
.uo-filterbar-select .mud-shrink~label.mud-input-label.mud-input-label-inputcontrol,
.uo-filterbar-select .mud-select-input,
.uo-filterbar-select .mud-icon-root,
.uo-filterbar-select-item,
.uo-table .mud-table-head .mud-table-row .mud-table-cell,
.uo-table .mud-table-body .mud-table-row .mud-table-cell,
.uo-table .mud-table-pagination .mud-toolbar,
.uo-table .mud-table-pagination .mud-toolbar .mud-input,
.uo-table .mud-table-pagination .mud-toolbar .mud-icon-root,
.uo-table .mud-table-empty-row,
.uo-dialog,
.uo-dialog .mud-icon-root,
.uo-dialog .mud-input-label,
.uo-dialog .mud-input,
.uo-dialog .mud-paper,
.mud-popover .mud-list-item {
    color: var(--text-primary) !important;
}
.mud-popover .mud-selected-item,
.uo-tabs .mud-tabs-tabbar .mud-tab svg { color: inherit; }
.uo-filterbar { --mud-elevation-2: 0px 2px 8px -2px rgba(0,0,0,0.08); }
.uo-dialog .mud-disabled .mud-select-input,
.uo-filterbar-select .mud-disabled .mud-select-input,
.uo-filterbar-select .mud-disabled .mud-icon-root,
.mud-popover .mud-list-item.mud-list-item-disabled {
    color: var(--text-secondary) !important;
}
.uo-table { --mud-elevation-1: 0px 2px 8px -2px rgba(0,0,0,0.08); }
.uo-table .mud-table-head .mud-table-row .mud-table-cell,
.uo-table .mud-table-body .mud-table-row:hover .mud-table-cell,
.uo-filterbar-select-item.mud-selected-item,
.uo-filterbar-select-item:hover {
    background-color: var(--bg-input) !important;
}
.uo-dialog .uo-warning-icon.mud-icon-root.mud-svg-icon { fill: #f59e0b; }
.uo-dialog .mud-paper { border-color: var(--border-color) !important; }
.uo-filterbar button,
.uo-filterbar button:hover,
.uo-dialog .save-button,
.uo-dialog .save-button:hover {
    background-color: #594ae2 !important;
    color: white !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   27. GENERIC TAB DIALOG
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-dialog.dialog-container .mud-paper {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}
.mud-dialog.dialog-container .mud-dialog-title {
    background-color: var(--branch-secondary, var(--bg-header)) !important;
    color: var(--branch-text, var(--text-primary)) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
}
.mud-dialog.dialog-container .mud-dialog-content {
    background: transparent !important;
    padding: 0 !important;
}
.mud-dialog.dialog-container .mud-dialog-actions {
    background: var(--bg-primary) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 12px 20px !important;
}
.mud-dialog.dialog-container .mud-tabs-tabbar {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.mud-dialog.dialog-container .mud-tab {
    color: var(--text-secondary) !important;
    background: transparent !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}
.mud-dialog.dialog-container .mud-tab .mud-icon-root,
.mud-dialog.dialog-container .mud-tab .mud-tab-icon {
    color: var(--text-secondary) !important;
    opacity: 0.75;
    transition: all 0.2s ease !important;
}
.mud-dialog.dialog-container .mud-tab:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-input) !important;
}
.mud-dialog.dialog-container .mud-tab:hover .mud-icon-root,
.mud-dialog.dialog-container .mud-tab:hover .mud-tab-icon {
    color: var(--text-primary) !important;
    opacity: 1;
}
.mud-dialog.dialog-container .mud-tab.mud-tab-active {
    color: var(--branch-text, var(--mud-palette-primary)) !important;
    background-color: var(--bg-card) !important;
    font-weight: 600 !important;
    box-shadow: inset 0 -2px 0 var(--branch-secondary, var(--mud-palette-primary)) !important;
}
.mud-dialog.dialog-container .mud-tab.mud-tab-active .mud-icon-root,
.mud-dialog.dialog-container .mud-tab.mud-tab-active .mud-tab-icon {
    color: var(--branch-text, var(--mud-palette-primary)) !important;
    opacity: 1;
}
.mud-dialog.dialog-container .mud-tab-slider {
    background: var(--branch-secondary, var(--mud-palette-primary)) !important;
    height: 2px !important;
}
.mud-dialog.dialog-container .content-section {
    background: var(--bg-card) !important;
    padding: 24px !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}
.mud-dialog.dialog-container .content-section .mud-typography-body2 {
    color: var(--text-secondary) !important;
}
.mud-dialog.dialog-container .mud-dialog-content .mud-progress-linear + div {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.mud-dialog.dialog-container .mud-dialog-content .mud-progress-linear + div .mud-skeleton {
    opacity: 0.6;
}
.mud-dialog.dialog-container .mud-card {
    background: transparent !important;
    box-shadow: none !important;
}
.mud-dialog.dialog-container .mud-card .mud-card-content {
    background: transparent !important;
}
.mud-dialog.dialog-container .mud-card .mud-paper {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}
.mud-dialog.dialog-container .content-section::-webkit-scrollbar { width: 6px; height: 6px; }
.mud-dialog.dialog-container .content-section::-webkit-scrollbar-track { background: var(--bg-primary); border-radius: 3px; }
.mud-dialog.dialog-container .content-section::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.mud-dialog.dialog-container .content-section::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

.mud-dialog.dialog-container .mud-button.mud-button-filled:not(.mud-button-disabled):not([disabled]) {
    background-color: var(--branch-secondary, var(--mud-palette-primary)) !important;
    color: var(--branch-text, #fff) !important;
}
.mud-dialog.dialog-container .mud-button.mud-button-outlined:not(.mud-button-disabled):not([disabled]) {
    color: var(--branch-text, var(--mud-palette-primary)) !important;
    border-color: var(--branch-secondary, var(--mud-palette-primary)) !important;
}
.mud-dialog.dialog-container .mud-button.mud-button-text:not(.mud-button-disabled):not([disabled]) {
    color: var(--branch-text, var(--mud-palette-primary)) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   28. KANBAN / TODAY'S VISITS
   ═══════════════════════════════════════════════════════════════════════════════ */
.kanban-column { background: var(--bg-input) !important; }
.kanban-header { color: var(--text-primary) !important; }
.kanban-title { color: var(--text-primary) !important; }
.kanban-card { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important; }
.kanban-card .summary { color: var(--text-secondary) !important; }
.kanban-card .card-top { background: var(--bg-card) !important; color: var(--text-primary) !important; }
.kanban-card .card-top .person { color: var(--text-secondary) !important; }
.kanban-card .card-top .code { color: var(--text-secondary) !important; }
.kanban-card .card-body-text { color: var(--text-primary) !important; }
.kanban-card .card-body-text .group { color: #2563eb !important; }
.kanban-card .card-body-link { color: var(--text-primary) !important; }
.kanban-card .card-body-link:hover { color: #2563eb !important; }
.kanban-card .card-footer-dates { color: var(--text-secondary) !important; border-top: 1px solid var(--border-color) !important; }
.kanban-card .card-footer-split .footer-group { color: #ca8a04 !important; }
.kanban-card .card-top .three-dots-inline .mud-icon-root { color: var(--text-secondary) !important; }
.kanban-footer { color: var(--text-secondary) !important; }
.kanban-add { color: #2563eb !important; }
.kanban-top-tabs { background: var(--bg-card) !important; }
.kanban-top-tabs .mud-tab { color: var(--text-secondary) !important; }
.kanban-top-tabs .mud-tab.mud-tab-active { color: var(--text-primary) !important; background: var(--bg-input) !important; }
.kanban-count { background: var(--bg-input) !important; color: var(--text-primary) !important; }
.search-field .mud-input-root { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
.search-field .mud-input-root input { color: var(--text-primary) !important; }
.search-field .mud-input-root .mud-icon-root { color: var(--text-secondary) !important; }
.kanban-loading-indicator { background: var(--bg-card) !important; color: var(--text-primary) !important; }
.kanban-filter-bar { background: var(--bg-card) !important; color: var(--text-primary) !important; }
.kanban-root .mud-paper { background: var(--bg-card) !important; color: var(--text-primary) !important; }
.mud-dropzone { background: transparent !important; }
.mud-dropzone .mud-paper { background: var(--bg-card) !important; }
.kanban-root { background: transparent !important; }
.list-visits-today .mud-table-head { background: var(--bg-header) !important; }
.list-visits-today .mud-table-row { background: var(--bg-card) !important; }
.list-visits-today .mud-table-row:nth-child(even) { background: var(--bg-input) !important; }
.list-visits-today .mud-table-cell { color: var(--text-primary) !important; }
[class*="today-visit"] .mud-paper,
[class*="kanban"] .mud-paper,
[class*="list-visit"] .mud-paper {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   29. SELF-ASSIST
   ═══════════════════════════════════════════════════════════════════════════════ */
.self-assist-root,
.self-assist-container { background: var(--bg-primary) !important; color: var(--text-primary) !important; }
.self-assist-header { color: var(--text-primary) !important; }
.self-assist-subtitle { color: var(--text-secondary) !important; }
.self-assist-card { background: var(--bg-card) !important; color: var(--text-primary) !important; }
.self-assist-step-label { color: var(--text-secondary) !important; }
.self-assist-form-header { color: var(--text-primary) !important; }
.self-assist-form-label { color: var(--text-primary) !important; }
.bg-white { background-color: var(--bg-card) !important; }
.bg-light { background-color: var(--bg-input) !important; }
.bg-primary { background-color: var(--bg-card) !important; }
.self-assist-root .p-6,
.self-assist-root .p-4,
.self-assist-container .p-6,
.self-assist-container .p-4 {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
.self-assist-step-dot,
.self-assist-step-line { background-color: var(--border-color) !important; }
.modal-header { background-color: var(--bg-card) !important; color: var(--text-primary) !important; }
.modal-header.bg-primary { background-color: var(--bg-header) !important; }
.modal-header .modal-title { color: var(--text-primary) !important; }
.self-assist-input,
.self-assist-input-field,
.self-assist-root input[type="text"],
.self-assist-root input[type="email"],
.self-assist-root input[type="password"] {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   30. SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
* { scrollbar-width: thin; scrollbar-color: var(--border-color) var(--bg-primary); }


/* ═══════════════════════════════════════════════════════════════════════════════
   31. VOICE VISIT (Module 404)
   ═══════════════════════════════════════════════════════════════════════════════ */
body {
    background-color: var(--bg-primary) !important;
}
.mic-card,
.form-card,
.manual-host-input,
.host-selection,
.form-container,
.host-listening-container {
    background: var(--bg-card) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}
.mic-frame-ready,
.mic-frame-idle {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
}
.mic-frame-ready { border-color: #22c55e !important; }
.mic-frame-idle { border-color: #ef4444 !important; }
.recognized-title,
.subtitles-title,
.form-title,
.form-container .title h2,
.form-container h3,
.host-listening-container h3,
.form-group label {
    color: var(--text-primary) !important;
}
.recognized-value-box,
.subtitles-box {
    background: var(--bg-input) !important;
}
.recognized-value,
.subtitles-text,
.listening-text {
    color: var(--text-secondary) !important;
}
.option {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
.option:hover {
    background: var(--bg-input) !important;
    border-color: var(--mud-palette-primary, #2563eb) !important;
}
.form-avatar-circle {
    background: var(--bg-input) !important;
}
.instructions-panel {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
.instructions-panel h3 {
    color: var(--text-primary) !important;
}
.instruction-row p {
    color: var(--text-secondary) !important;
}
.host-table th,
.host-table td {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.host-table th {
    background: var(--bg-header) !important;
    color: var(--text-primary) !important;
}
.input-field {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.input-field:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--mud-palette-primary, #2563eb) !important;
}
.listening-icon {
    background: var(--bg-input) !important;
}
.listening-icon-element {
    color: var(--mud-palette-primary, #2563eb) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   32. GENERIC TABLE NoRecordsContent
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-table-no-results,
.vimax-data-grid .mud-table-no-results {
    color: var(--text-secondary) !important;
    background: transparent !important;
}
.mud-table-no-results .mud-card,
.vimax-data-grid .mud-table-no-results .mud-card,
.mud-data-grid .mud-table-no-results .mud-card,
.mud-table .mud-table-empty-row .mud-card,
html .vimax-data-grid .mud-table-empty-row .mud-card,
html .vimax-data-grid .mud-card {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}
.mud-table-no-results .mud-card .mud-typography,
.vimax-data-grid .mud-table-no-results .mud-card .mud-typography,
.mud-table-no-results .mud-card .mud-icon-root,
.vimax-data-grid .mud-table-no-results .mud-card .mud-icon-root {
    color: var(--text-primary) !important;
}
.mud-table-empty-row {
    background-color: var(--bg-card) !important;
}
html .vimax-data-grid .mud-table-empty-row {
    background-color: var(--bg-card) !important;
}
html .vimax-data-grid .mud-table-empty-row td {
    background-color: var(--bg-card) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   33. BOOTSTRAP MODALS
   ═══════════════════════════════════════════════════════════════════════════════ */
.modal-content {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
.modal-header {
    background-color: var(--bg-header) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
.modal-header.bg-primary {
    background-color: var(--bg-header) !important;
}
.modal-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
.modal-footer {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-top-color: var(--border-color) !important;
}
.modal .bg-light,
.modal-body .bg-light {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}
.selfassist-stepper-card {
    background: var(--bg-card) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   34. PICKERS — DatePicker / TimePicker
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-picker .mud-input-slot,
.mud-picker input.mud-input-element,
.mud-picker .mud-input-input {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}
.mud-picker .mud-input-slot input {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
}
.mud-picker-button {
    color: var(--text-secondary) !important;
}
.mud-picker-button:hover {
    color: var(--text-primary) !important;
}
.mud-picker .mud-input-adornment {
    color: var(--text-secondary) !important;
}
.mud-picker .mud-input-slot,
.mud-picker .mud-input-outlinedborder {
    border-color: var(--border-color) !important;
}
.mud-picker.mud-focused .mud-input-slot,
.mud-picker.mud-focused .mud-input-outlinedborder {
    border-color: var(--mud-palette-primary) !important;
}
.mud-picker.mud-focused {
    box-shadow: 0 0 0 1px var(--mud-palette-primary) inset !important;
}
.mud-picker-day {
    color: var(--text-primary) !important;
}
.mud-picker-calendar-container {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
.mud-picker-calendar-header {
    color: var(--text-primary) !important;
}
.mud-picker-calendar-header .mud-icon-root {
    color: var(--text-secondary) !important;
}
.mud-picker-calendar-day:hover {
    background-color: var(--bg-input) !important;
}
.mud-picker-calendar-day.mud-selected {
    background-color: var(--mud-palette-primary) !important;
    color: #fff !important;
}
.mud-picker-clock {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
.mud-picker-clock-number {
    color: var(--text-primary) !important;
}
.mud-picker-clock-number.mud-selected {
    background-color: var(--mud-palette-primary) !important;
    color: #fff !important;
}
.mud-picker-clock-hand {
    background-color: var(--mud-palette-primary) !important;
}
.mud-picker-clock-center {
    background-color: var(--mud-palette-primary) !important;
}
.mud-static-picker {
    background-color: var(--bg-card) !important;
}

/* TimePicker toolbar header — hour/minute/AM-PM text color differentiation */
.mud-picker-timepicker-toolbar .mud-timepicker-button {
    color: #fff !important;
}
.mud-picker-timepicker-toolbar .mud-timepicker-button.mud-timepicker-toolbar-text {
    color: rgba(0, 0, 0, 0.30) !important;
}
.mud-picker-timepicker-toolbar .mud-timepicker-separator {
    color: #000 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   35. GENERIC DRAG & DROP
   ═══════════════════════════════════════════════════════════════════════════════ */
.gdd-success-badge {
    background: #dcfce7 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   36. GENERIC FACE CAPTURE — Light theme (match GenericColors defaults)
   ═══════════════════════════════════════════════════════════════════════════════ */
.gfc-root {
    --gfc-title: var(--text-primary) !important;
    --gfc-muted: var(--text-secondary) !important;
    --gfc-bg-subtle: var(--bg-input) !important;
    --gfc-border: var(--border-color) !important;
    --gfc-red-bg: #fee2e2 !important;
    --gfc-red-accent: #ef4444 !important;
    --gfc-red-border: #fecaca !important;
    --gfc-green-fg: #166534 !important;
    --gfc-green-accent: #dcfce7 !important;
}

/* GenericDragAndDrop — override hardcoded GenericColors inline styles */
.gdd-root .gdd-icon-wrap {
    background: var(--border-color) !important;
}
.gdd-root .gdd-prompt-text {
    color: var(--text-primary) !important;
}
.gdd-root .gdd-browse-link {
    color: var(--text-secondary) !important;
}
.gdd-root .gdd-label {
    color: var(--text-primary) !important;
}
.gdd-root .gdd-optional {
    color: var(--text-secondary) !important;
}
.gdd-root .gdd-hint-row {
    color: var(--text-secondary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   37. GENERIC TEMPLATE — Light theme (match GenericColors defaults)
   ═══════════════════════════════════════════════════════════════════════════════ */
.template-columns-grid .template-column-chip {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   38. GENERIC FORM — Remove borders from main container and group panels
   ═══════════════════════════════════════════════════════════════════════════════ */
.generic-form-root,
.generic-form-root .mud-card-content {
    border: none !important;
    box-shadow: none !important;
}
.generic-form-root.mud-card {
    border: none !important;
    box-shadow: none !important;
}
.generic-form-root .generic-form-group.mud-paper,
.generic-form-root.mud-card .generic-form-group.mud-paper {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
   39. IMPORT ERROR PANELS — Light theme (keep inline defaults)
   ═══════════════════════════════════════════════════════════════════════════════ */
.import-error-panel ul,
.import-error-panel ul ul {
    color: #424242 !important;
}
.import-error-panel strong {
    color: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   40. GENERIC EDIT TABLE ERROR PANEL — Light theme
   ═══════════════════════════════════════════════════════════════════════════════ */
.generic-edit-error-panel .mud-table {
    background: #ffffff !important;
}
.generic-edit-error-panel .mud-table-row {
    background: #ffffff !important;
}
.generic-edit-error-panel .mud-table-cell {
    color: #374151 !important;
    border-color: #e5e7eb !important;
}
.generic-edit-error-panel td.mud-table-cell[style*="background:#fff1f2"] {
    background: #fff1f2 !important;
    border-left: 3px solid #f87171 !important;
}
.generic-edit-error-panel td.mud-table-cell[style*="background:#f9fafb"] {
    background: #f9fafb !important;
    color: #6b7280 !important;
}
.generic-edit-error-panel td.mud-table-cell[style*="background:#fffbeb"] {
    background: #fffbeb !important;
    color: #f59e0b !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   41. GENERIC EDIT TABLE — Themed CSS classes (Light)
   ═══════════════════════════════════════════════════════════════════════════════ */
.get-warning-panel { border:1px solid #fbbf24; border-radius:8px; background:#fffbeb; }
.get-warning-title { color:#92400e; font-weight:600; font-size:14px; }
.get-error-card { background:#fff; border-left:3px solid #f59e0b; }
.get-error-label { color:#92400e; font-size:12px; font-weight:600; }
.get-error-text { color:#374151; font-size:13px; line-height:1.5; }
.get-caption { font-weight:600; color:#374151; display:block; margin-bottom:8px; }
.get-table-wrap { overflow-x:auto; border-radius:8px; border:1px solid #e5e7eb; }
.get-row-number { padding:6px 12px; background:#fffbeb; font-weight:600; color:#f59e0b; white-space:nowrap; font-size:13px; }
.get-cell-error { padding:4px 8px; background:#fff1f2; border-left:3px solid #f87171; }
.get-cell-normal { padding:6px 12px; color:#6b7280; font-size:13px; background:#f9fafb; border-bottom:none !important; box-shadow:none !important; }
.get-revalidate-wrap { display:flex; justify-content:center; margin-top:20px; padding-top:14px; border-top:1px solid #f0f0f0; }

/* ═══════════════════════════════════════════════════════════════════════════════
   42. GENERIC REPORT — Column chips (Light)
   ═══════════════════════════════════════════════════════════════════════════════ */
.gr-chip-selected { width:100%; justify-content:center; border-radius:10px; cursor:pointer; font-weight:600; background-color:var(--branch-secondary, #e6f9f2) !important; color:var(--branch-text, #0d6b43) !important; border-color:var(--branch-secondary, #e6f9f2) !important; }
.gr-chip-unselected { width:100%; justify-content:center; border-radius:10px; cursor:pointer; font-weight:500; background-color:#fff !important; color:var(--branch-text, #374151) !important; border-color:#e5e7eb !important; opacity:0.85; }

/* ═══════════════════════════════════════════════════════════════════════════════
   GENERIC MONITOR — Event Monitor tabs
   ═══════════════════════════════════════════════════════════════════════════════ */
.gm-custom-tabs { margin:0 !important; padding:0 !important; border:none !important; background:transparent !important; }
.gm-custom-tabs .mud-tabs-tabbar { background:transparent !important; border:none !important; }
.gm-custom-tabs .mud-tabs-tabbar-inner,
.gm-custom-tabs .mud-tabs-tabbar-content { display:flex !important; align-items:center !important; }
.gm-custom-tabs .mud-tab { background-color:var(--em-tabs-bg) !important; color:var(--em-tabs-text) !important; border-radius:4px !important; min-height:36px !important; height:36px !important; padding:0 20px !important; margin:0 6px !important; transition:all 0.2s ease !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; flex-shrink:0 !important; white-space:nowrap !important; }
.gm-custom-tabs .mud-tab:hover { background-color:var(--em-tabs-hover-bg) !important; color:var(--em-tabs-text) !important; }
.gm-custom-tabs .mud-tab.mud-tab-active { background-color:var(--em-tabs-active-bg) !important; color:var(--em-tabs-active-text) !important; }
.gm-custom-tabs .mud-tab:not(.mud-tab-active) .mud-icon { color:var(--em-tabs-icon) !important; }
.gm-custom-tabs .mud-tab.mud-tab-active .mud-icon { color:var(--em-tabs-active-icon) !important; }
.gm-custom-tabs .mud-tab:not(.mud-tab-active) .mud-chip { background-color:var(--em-tabs-chip-bg) !important; color:var(--em-tabs-chip-text) !important; }
.gm-custom-tabs .mud-tab.mud-tab-active .mud-chip { background-color:var(--em-tabs-active-chip-bg) !important; color:var(--em-tabs-active-chip-text) !important; }
.gm-custom-tabs .mud-tab .mud-tab-content { display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; }
.gm-custom-tabs .mud-tab .mud-chip { margin:0 !important; min-width:34px !important; justify-content:center !important; font-variant-numeric:tabular-nums !important; }
.gm-custom-tabs .mud-tab-slider { display:none !important; }
.gm-custom-tabs .mud-tabs-panels { display:none !important; }
.vimax-actionbar > div:first-child { margin-bottom:12px !important; }
.gm-tabs-wrapper { box-sizing:border-box; padding:2px; flex:0 1 auto; width:auto; min-width:0; max-width:100%; overflow:hidden; border-radius:6px; background:var(--em-tabs-wrapper-bg) !important; border:1px solid var(--em-tabs-wrapper-border) !important; }
.mud-table-container { margin-top:0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   EVENT HIGHLIGHT CARD — Latest event summary card
   ═══════════════════════════════════════════════════════════════════════════════ */
.ehc-container {
    margin: 8px 0 12px 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--em-tabs-wrapper-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    animation: ehc-fadeIn 0.3s ease;
}
@keyframes ehc-fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

.ehc-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--em-tabs-active-bg);
    color: var(--em-tabs-active-text);
}
.ehc-header-icon { font-size: 18px !important; }
.ehc-header-title { font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }

.ehc-body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
}

.ehc-avatar {
    border-radius: 50%;
    background: var(--em-tabs-chip-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--em-tabs-wrapper-border);
}
.ehc-avatar-icon { font-size: 32px !important; color: var(--em-tabs-icon); }

.ehc-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ehc-field {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ehc-field-icon { color: var(--em-tabs-icon); font-size: 16px !important; }
.ehc-field-label { color: var(--text-secondary); font-size: 13px; font-weight: 500; min-width: 100px; }
.ehc-field-value { color: var(--text-primary); font-size: 13px; font-weight: 600; }

.ehc-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

input, textarea, select, .mud-input-element { background: transparent !important; }

/* ── Brands & Models (/Module/807) ─────────────────────────── */
.brand-panel-title { color: var(--text-primary); }
.brand-item:hover { background: var(--dual-panel-item-hover-bg); }
.brand-item--selected {
    background: var(--vimax-grid-row-selected-bg) !important;
    border-left-color: var(--vimax-grid-row-selected-bg);
}
.brand-item--show-all { border-bottom-color: var(--dual-panel-border); }
.brand-item__title { color: var(--text-primary); }
.brand-item__subtitle { color: var(--dual-panel-meta-color); }
.brand-item__chevron { color: var(--dual-panel-meta-color); }
.brand-empty { color: var(--dual-panel-empty-color); }