/* AlpsCraft ERP — admin-specific CSS.
   Loaded AFTER tokens.css, utilities.css, components.css so admin tweaks win.
   Tailwind CDN runs BEFORE this file via its runtime script, but our tailwind.config
   (inline in layout/default.html) maps its default palette to our tokens so
   utility classes like `bg-white`, `text-gray-900`, `border-gray-200` render dark. */

/* Ensure pre-style reflowing doesn't cause a light flash before fonts/css load. */
html { background: var(--color-bg-base); }

/* Override Tailwind's generated focus-ring to match ours (Tailwind Preflight is
   enabled by the CDN and applies its own focus outline). */
:where(button, a, input, select, textarea):focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Nicer scrollbars in admin tables / sidebars. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-base); }
::-webkit-scrollbar-thumb { background: var(--color-bg-raised); border-radius: var(--radius-sm); border: 2px solid var(--color-bg-base); }
::-webkit-scrollbar-thumb:hover { background: var(--color-bg-overlay); }

/* Fallbacks for Tailwind color utilities that remain in un-migrated templates.
   Using !important sparingly to win over Tailwind's CDN output. */
.bg-white { background-color: var(--color-bg-elevated) !important; }
.bg-gray-50 { background-color: var(--color-bg-base) !important; }
.bg-gray-100 { background-color: var(--color-bg-raised) !important; }
.bg-blue-50 { background-color: var(--color-info-bg) !important; }
.bg-red-50 { background-color: var(--color-danger-bg) !important; }
.bg-green-50, .bg-green-100 { background-color: var(--color-success-bg) !important; }

.text-gray-900 { color: var(--color-fg-primary) !important; }
.text-gray-800 { color: var(--color-fg-primary) !important; }
.text-gray-700 { color: var(--color-fg-secondary) !important; }
.text-gray-600 { color: var(--color-fg-secondary) !important; }
.text-gray-500 { color: var(--color-fg-tertiary) !important; }
.text-gray-400 { color: var(--color-fg-tertiary) !important; }
.text-blue-600, .text-blue-700 { color: var(--color-accent) !important; }
.text-red-500, .text-red-600, .text-red-700 { color: var(--color-danger) !important; }
.text-green-600, .text-green-700 { color: var(--color-success) !important; }

.border-gray-100 { border-color: var(--color-border-subtle) !important; }
.border-gray-200 { border-color: var(--color-border-subtle) !important; }
.border-gray-300 { border-color: var(--color-border-default) !important; }
.border-blue-300 { border-color: rgba(96, 165, 250, 0.35) !important; }
.border-red-300, .border-red-400 { border-color: rgba(248, 113, 113, 0.45) !important; }

.shadow-sm, .shadow { box-shadow: var(--shadow-card) !important; }