:root {
    --font-primary: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dark-bg: #0f1115;
    --dark-surface: #171a21;
    --dark-raised: #1f232c;
    --dark-border: #2a2f3a;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
}

/* ---- Dark theme surfaces (html.dark is toggled by bizCoreTheme in App.razor) ------------ */
html.dark { color-scheme: dark; }
html.dark, html.dark body { background-color: var(--dark-bg); color: #e9edf3; }
html.dark .bg-slate-950 { background-color: var(--dark-bg) !important; }
html.dark .bg-slate-900 { background-color: var(--dark-surface) !important; }
html.dark .bg-slate-800,
html.dark .bg-slate-800\/60,
html.dark .bg-slate-800\/80,
html.dark .bg-slate-800\/40 { background-color: var(--dark-raised) !important; }
html.dark .border-slate-800,
html.dark .border-slate-700 { border-color: var(--dark-border) !important; }

html.dark .drawer-panel {
    background-color: var(--dark-surface) !important;
    border-left: 1px solid var(--dark-border) !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.85) !important;
}
html.dark .drawer-header,
html.dark .drawer-footer { background-color: var(--dark-bg) !important; border-color: var(--dark-border) !important; }

h1:focus { outline: none; }

/* ---- Scrollbars ------------------------------------------------------------------------- */
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
html.dark .custom-scrollbar { scrollbar-color: #3a4150 transparent; }
html.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #3a4150; }

/* ---- Drawer micro-animations ------------------------------------------------------------- */
@keyframes drawerSlideInRight {
    0% { transform: translate3d(100%, 0, 0); opacity: 0.8; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes drawerFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.animate-drawer-backdrop { animation: drawerFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-drawer-panel {
    animation: drawerSlideInRight 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

/* ---- Dropdown / row-action panels --------------------------------------------------------
   The panel renders at an in-field fallback position and app-dropdown.js re-pins it to the
   viewport (escaping scrolling ancestors). It stays invisible for one frame so it does not
   appear to fly in; the reveal is CSS, so if the script never runs the panel still shows. */
.bs-popover {
    visibility: hidden;
    opacity: 0;
    animation: bsPopoverReveal 120ms ease-out 60ms forwards;
}
@keyframes bsPopoverReveal {
    from { visibility: visible; opacity: 0; }
    to { visibility: visible; opacity: 1; }
}

/* ---- Blazor error UI -------------------------------------------------------------------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    padding: 0.75rem 1.25rem;
    background: #b32121;
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
}
#blazor-error-ui .reload { color: white; text-decoration: underline; margin-left: 0.5rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; }

/* ---- Compact density (data-density="compact" on <html>) ---------------------------------- */
html[data-density="compact"] .bs-field { height: 2rem; }
html[data-density="compact"] th { padding-top: 0.625rem; padding-bottom: 0.625rem; }
html[data-density="compact"] td:not(:only-child) { padding-top: 0.375rem; padding-bottom: 0.375rem; }
html[data-density="compact"] :is(.space-y-4, .space-y-5, .space-y-6) > .bs-field-wrap ~ .bs-field-wrap { margin-top: 0.5rem; }