:root {
    --vms-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --vms-accent: #3d7a8a;
    --vms-accent-soft: rgba(61, 122, 138, 0.12);
    --vms-accent-hover: rgba(61, 122, 138, 0.18);
    --vms-bg: #f5f5f7;
    --vms-surface: #ffffff;
    --vms-surface-elevated: #ffffff;
    --vms-text: #1d1d1f;
    --vms-text-secondary: #6e6e73;
    --vms-border: rgba(0, 0, 0, 0.08);
    --vms-radius-sm: 8px;
    --vms-radius-md: 12px;
    --vms-radius-lg: 16px;
    --vms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --vms-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
    --vms-appbar-bg: rgba(255, 255, 255, 0.72);
    --vms-drawer-bg: linear-gradient(180deg, #fcfcfd 0%, #f4f4f6 100%);
    --vms-motion-fast: 150ms;
    --vms-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --vms-success: #2d8a5e;
    --vms-warning: #c9a227;
    --vms-input-bg: #f0f0f0;
    --vms-input-bg-focus: #e8e8e8;
    --vms-surface-muted: #ffffff;
    --vms-scrollbar-track: #e8e8ec;
    --vms-scrollbar-thumb: #b0b0b8;
    --vms-scrollbar-thumb-hover: #8e8e96;
}

html[data-vms-theme="dark"] {
    --vms-accent: #5ba3b5;
    --vms-accent-soft: rgba(91, 163, 181, 0.2);
    --vms-accent-hover: rgba(91, 163, 181, 0.32);
    --vms-bg: #0f0f11;
    --vms-surface: #1a1a1d;
    --vms-surface-elevated: #242428;
    --vms-text: #f4f4f5;
    --vms-text-secondary: #a1a1aa;
    --vms-border: rgba(255, 255, 255, 0.1);
    --vms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --vms-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);
    --vms-appbar-bg: rgba(15, 15, 17, 0.85);
    --vms-drawer-bg: linear-gradient(180deg, #141416 0%, #0f0f11 100%);
    --vms-input-bg: #2a2a2e;
    --vms-input-bg-focus: #343438;
    --vms-surface-muted: #1a1a1d;
    --vms-scrollbar-track: #050506;
    --vms-scrollbar-thumb: #111113;
    --vms-scrollbar-thumb-hover: #1a1a1d;
    color-scheme: dark;
}

html {
    font-family: var(--vms-font-sans);
}

body {
    background-color: var(--vms-bg);
    color: var(--vms-text);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --vms-motion-fast: 0ms;
    }
}

/* Scrollbars */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--vms-scrollbar-thumb) var(--vms-scrollbar-track);
}

body {
    scrollbar-color: var(--vms-scrollbar-thumb) var(--vms-scrollbar-track);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--vms-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--vms-scrollbar-thumb);
    border-radius: 5px;
    border: 2px solid var(--vms-scrollbar-track);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--vms-scrollbar-thumb-hover);
}

/* Dark scrollbars — explicit values + color-scheme for native UI (Safari/macOS) */
html[data-vms-theme="dark"],
html[data-vms-theme="dark"] body,
html[data-vms-theme="dark"] .mud-theme-dark,
html[data-vms-theme="dark"] .mud-layout,
html[data-vms-theme="dark"] .mud-main-content,
html[data-vms-theme="dark"] .mud-drawer-content,
html[data-vms-theme="dark"] .app-nav-scroll,
html[data-vms-theme="dark"] .mud-table-container,
html[data-vms-theme="dark"] .mud-overlay-scrollbars {
    scrollbar-color: #111113 #050506;
}

html[data-vms-theme="dark"] *::-webkit-scrollbar,
html[data-vms-theme="dark"] *::-webkit-scrollbar-corner {
    width: 10px;
    height: 10px;
    background: #050506;
}

html[data-vms-theme="dark"] *::-webkit-scrollbar-track {
    background: #050506 !important;
}

html[data-vms-theme="dark"] *::-webkit-scrollbar-thumb {
    background: #111113 !important;
    border: 2px solid #050506 !important;
    border-radius: 5px;
}

html[data-vms-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background: #1a1a1d !important;
}

/* Same scrollbars when Mud dark class is present without data-vms-theme yet */
html.mud-theme-dark,
html.mud-theme-dark body,
.mud-theme-dark {
    color-scheme: dark;
    scrollbar-color: #111113 #050506;
}

html.mud-theme-dark *::-webkit-scrollbar,
html.mud-theme-dark *::-webkit-scrollbar-corner {
    background: #050506;
}

html.mud-theme-dark *::-webkit-scrollbar-track {
    background: #050506 !important;
}

html.mud-theme-dark *::-webkit-scrollbar-thumb {
    background: #111113 !important;
    border: 2px solid #050506 !important;
}

html.mud-theme-dark *::-webkit-scrollbar-thumb:hover {
    background: #1a1a1d !important;
}

/* Dark mode — clearer hover on clickable UI (Mud defaults are very subtle) */
html[data-vms-theme="dark"],
html[data-vms-theme="dark"] .mud-theme-dark {
    --mud-palette-action-default-hover: rgba(91, 163, 181, 0.28);
    --mud-palette-table-hover: rgba(91, 163, 181, 0.22);
}

html[data-vms-theme="dark"] .mud-icon-button:hover:not(:disabled):not(.mud-disabled),
html[data-vms-theme="dark"] .mud-button-root.mud-button-text:hover:not(:disabled),
html[data-vms-theme="dark"] .mud-button-root.mud-button-outlined:hover:not(:disabled),
html[data-vms-theme="dark"] .mud-fab-default:hover:not(:disabled),
html[data-vms-theme="dark"] .mud-list-item:not(.mud-list-item-disabled):hover,
html[data-vms-theme="dark"] .mud-list-item-clickable:hover,
html[data-vms-theme="dark"] .mud-menu-item:hover,
html[data-vms-theme="dark"] .mud-chip.mud-clickable:hover,
html[data-vms-theme="dark"] .mud-chip-clickable:hover,
html[data-vms-theme="dark"] .mud-tab:not(.mud-tab-disabled):hover,
html[data-vms-theme="dark"] .mud-pagination-item:hover,
html[data-vms-theme="dark"] .mud-nav-link:not(.mud-nav-link-disabled):hover,
html[data-vms-theme="dark"] .mud-table-hover .mud-table-row:hover,
html[data-vms-theme="dark"] .mud-table.vms-table .mud-table-body .mud-table-row:hover {
    background-color: var(--vms-accent-hover) !important;
}

html[data-vms-theme="dark"] .mud-nav-link.active:not(.mud-nav-link-disabled),
html[data-vms-theme="dark"] .mud-nav-link.active:not(.mud-nav-link-disabled):hover {
    background-color: var(--vms-accent-soft) !important;
}

html[data-vms-theme="dark"] a.mud-link:hover,
html[data-vms-theme="dark"] .mud-link.mud-primary-text:hover {
    color: #7ec0d4 !important;
}

html[data-vms-theme="dark"] .app-nav-brand-link:hover {
    background-color: var(--vms-accent-hover) !important;
}