/* ══════════════════════════════════════════════════════════════════
   admin-theme.css — Admin Design System Tokens
   Single source of truth for all admin page CSS variables.
   Based on: login.html (glass + dark + accent glow)
   ══════════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties — Dark Theme (default) ─── */
/* Accent: Indigo #4f6ef7 | Glass + dark UI */
:root {
  /* ═══ Colors — Backgrounds ═══ */
  --bg-primary: #0a0b0f;
  --bg-secondary: #12141c;
  --bg-card: #1a1d27;
  --bg-elevated: #232736;
  --bg-hover: #2a2f42;

  /* ═══ Interaction — Shared State Tokens ═══ */
  --interactive-hover-bg: rgba(255,255,255,0.04);
  --interactive-active-bg: rgba(255,255,255,0.06);
  --focus-bg: rgba(255,255,255,0.04);
  --modal-backdrop: rgba(0,0,0,0.6);
  --spinner-border: rgba(255,255,255,0.15);

  /* ═══ Colors — Borders ═══ */
  --border-subtle: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.12);
  --border-hint: rgba(255,255,255,0.06);

  /* ═══ Colors — Text ═══ */
  --text-primary: #ffffff;
  --text-secondary: #a8b2c1;
  --text-muted: #6b7585;

  /* ═══ Accent System — Indigo ═══ */
  --accent: #4f6ef7;
  --accent-light: #7c8ffa;
  --accent-dark: #3a4fd9;
  --accent-glow: rgba(79,110,247,0.25);

  /* ═══ Semantic Colors ═══ */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* ═══ Gradients ═══ */
  --gradient-1: linear-gradient(135deg, #4f6ef7 0%, #7c8ffa 50%, #9f64ff 100%);
  --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

  /* ═══ Shadows — Dark Mode (deep elevation) ═══ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 60px rgba(79,110,247,0.2);

  /* ═══ Border Radius ═══ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* ═══ Transitions ═══ */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* ═══ Typography ═══ */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-lg: 14px;

  /* ═══ Overlay Layer System — z-index architecture only (portal/stacking) ═══ */
  --z-base-content: 1;
  --z-sticky-header: 100;
  --z-sidebar: 200;
  --z-overlay-dropdown: 4000;
  --z-overlay-datepicker: 4100;
  --z-overlay-popover: 4200;
  --z-overlay-tooltip: 4300;
  --z-modal-backdrop: 4900;
  --z-modal: 5000;
  --z-toast: 6000;

  /* ═══ Select/Dropdown Visual System — appearance only (never z-index) ═══ */
  --select-input-bg: rgba(255,255,255,0.04);
  --select-input-bg-focus: rgba(255,255,255,0.06);
  --select-input-border: var(--border-subtle);
  --select-input-focus-border: var(--accent);
  --select-input-focus-shadow: 0 0 0 2px var(--accent-glow);
  --select-input-color: var(--text-primary);
  --select-input-placeholder: var(--text-muted);
  --select-input-height: 40px;
  --select-input-radius: var(--radius-md);

  /* Support BaseSelect.js direct token names (maps to admin values) */
  --input-bg: var(--select-input-bg);
  --input-bg-focus: var(--select-input-bg-focus);
  --input-border: var(--select-input-border);
  --input-focus-border: var(--select-input-focus-border);
  --input-focus-shadow: var(--select-input-focus-shadow);
  --input-color: var(--select-input-color);
  --input-placeholder: var(--select-input-placeholder);
  --input-height: var(--select-input-height);
  --input-radius: var(--select-input-radius);

  --dropdown-bg: rgba(18,20,28,0.94);
  --dropdown-backdrop-blur: 16px;
  --dropdown-border: var(--border);
  --dropdown-radius: var(--radius-md);
  --dropdown-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  --dropdown-padding: 6px;

  --option-height: 36px;
  --option-color: var(--text-secondary);
  --option-hover-bg: rgba(79,110,247,0.06);
  --option-selected-bg: rgba(79,110,247,0.09);
  --option-selected-color: var(--text-primary);
  --option-radius: var(--radius-sm);

  /* ═══ DatePicker Visual System — appearance only ═══ */
  --date-quick-btn-bg: var(--select-input-bg);
  --date-quick-btn-border: var(--border-subtle);
  --date-quick-btn-color: var(--text-secondary);
  --date-quick-btn-hover-bg: var(--accent);
  --date-quick-btn-hover-color: var(--text-primary);
  --date-cell-hover-bg: rgba(79,110,247,0.12);
  --date-cell-selected-bg: var(--accent);
  --date-cell-today-color: var(--accent-light);
  --date-cell-today-border: var(--accent);
  --date-footer-btn-hover-border: var(--danger);
  --date-footer-btn-hover-color: var(--danger);
  --date-footer-btn-hover-bg: rgba(239,68,68,0.08);
}

/* ═══ Global Reset ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 3px; }

/* ═══ Selection ═══ */
::selection { background: rgba(79,110,247,0.3); color: #ffffff; }

/* ═══ Animations ═══ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}