:root {
    --color-sap-dark: #0b1426;
    --color-app-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-2: #f1f5f9;
    --color-border: #e2e8f0;
}

html.dark {
    --color-app-bg: #050810;
    --color-surface: #0f172a;
    --color-surface-2: #131c30;
    --color-border: #1f2a44;
}

html, body {
    background: var(--color-app-bg);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

html.dark { color-scheme: dark; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.animate-pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }
.bg-sap-dark { background-color: var(--color-sap-dark); }
.bg-app { background-color: var(--color-app-bg); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-2 { background-color: var(--color-surface-2); }
.border-app { border-color: var(--color-border); }

/* Sidebar collapse rules */
html.sidebar-collapsed aside.sap-sidebar { width: 4rem; }
html.sidebar-collapsed aside.sap-sidebar .sidebar-label,
html.sidebar-collapsed aside.sap-sidebar .sidebar-section-label,
html.sidebar-collapsed aside.sap-sidebar .sidebar-footer { display: none; }
html.sidebar-collapsed aside.sap-sidebar .sidebar-brand { padding-left: 0.5rem; padding-right: 0.5rem; }
html.sidebar-collapsed aside.sap-sidebar .sidebar-brand-text { display: none; }
html.sidebar-collapsed aside.sap-sidebar nav { padding-left: 0.5rem; padding-right: 0.5rem; }
html.sidebar-collapsed aside.sap-sidebar .sidebar-nav-link { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }
aside.sap-sidebar { transition: width 150ms ease; }

#blazor-error-ui {
    background: #b32121;
    color: white;
    padding: 0.75rem 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 1000;
}

.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-app-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 6px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #2c3a5a; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }