/* ============================================
   TOKODASH – E-commerce Admin Starter-Kit
   By IndoKoding.net
   Tailwind CSS (Play CDN) + Alpine.js + Chart.js
   Identitas: dark-mode-first, violet accent —
   beda dari indodash (dark sidebar + light content,
   indigo, Bootstrap-icons) yang sudah ada di
   katalog. Sidebar icon-rail collapsible, bento
   grid dashboard, no build step (CDN only).
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

/* ── Theme tokens (dark default, light override) ──
   Tailwind's color palette (bg/surface/ink/etc.) resolves to
   these CSS variables, so toggling [data-theme] repaints every
   utility class without touching markup. ── */
:root,
[data-theme="dark"] {
  --c-bg: #0B0E17;
  --c-surface: #131826;
  --c-surface2: #1B2236;
  --c-edge: #262E45;
  --c-ink: #E5E7F0;
  --c-muted: #94A0BE;
  --c-primary: #8B5CF6;
  --c-primary-deep: #7C3AED;
  --c-primary-soft: #C4B5FD;
  --c-success: #34D399;
  --c-warning: #FBBF24;
  --c-danger: #F87171;
  --c-scrollbar: #2A3350;
  --c-scrollbar-hover: #3A4570;
  --c-chart-text: #94A0BE;
  --c-chart-grid: #262E45;
}

[data-theme="light"] {
  --c-bg: #F5F6FA;
  --c-surface: #FFFFFF;
  --c-surface2: #F1F2F8;
  --c-edge: #E3E5F0;
  --c-ink: #1B2033;
  --c-muted: #667085;
  --c-primary: #7C3AED;
  --c-primary-deep: #6D28D9;
  --c-primary-soft: #7C3AED;
  --c-success: #059669;
  --c-warning: #B45309;
  --c-danger: #DC2626;
  --c-scrollbar: #D6D9E6;
  --c-scrollbar-hover: #C0C4D8;
  --c-chart-text: #667085;
  --c-chart-grid: #E3E5F0;
}

/* ── Accent color options ─────────────────────
   [data-accent] overrides just the 3 primary tokens.
   "violet" is the default baked into the blocks above,
   so it needs no override rule here. ── */
[data-theme="dark"][data-accent="toscha"]  { --c-primary: #14B8A6; --c-primary-deep: #0D9488; --c-primary-soft: #5EEAD4; }
[data-theme="dark"][data-accent="orange"]  { --c-primary: #F97316; --c-primary-deep: #EA580C; --c-primary-soft: #FDBA74; }
[data-theme="dark"][data-accent="blue"]    { --c-primary: #3B82F6; --c-primary-deep: #2563EB; --c-primary-soft: #93C5FD; }
[data-theme="dark"][data-accent="emerald"] { --c-primary: #10B981; --c-primary-deep: #059669; --c-primary-soft: #6EE7B7; }

[data-theme="light"][data-accent="toscha"]  { --c-primary: #0D9488; --c-primary-deep: #0F766E; --c-primary-soft: #0D9488; }
[data-theme="light"][data-accent="orange"]  { --c-primary: #EA580C; --c-primary-deep: #C2410C; --c-primary-soft: #EA580C; }
[data-theme="light"][data-accent="blue"]    { --c-primary: #2563EB; --c-primary-deep: #1D4ED8; --c-primary-soft: #2563EB; }
[data-theme="light"][data-accent="emerald"] { --c-primary: #059669; --c-primary-deep: #047857; --c-primary-soft: #059669; }

html, body { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; }

/* ── Custom scrollbar (theme-aware) ──────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-scrollbar); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-scrollbar-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--c-scrollbar) transparent; }

/* ── Sidebar collapse transition ─────────── */
#sidebar { transition: width .2s ease; }
.sidebar-label { transition: opacity .15s ease, width .15s ease; white-space: nowrap; overflow: hidden; }

/* ── Chart containers (fixed height so Chart.js resizes correctly) ── */
.chart-box { position: relative; width: 100%; }
.chart-box canvas { max-width: 100%; }

/* ── Table row hover (subtle, dark) ──────── */
tbody tr { transition: background-color .12s ease; }

/* ── Focus ring consistency ──────────────── */
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ── Reduced motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Login page background (follows accent) ── */
.auth-glow {
  background:
    radial-gradient(600px circle at 15% 20%, color-mix(in srgb, var(--c-primary) 18%, transparent), transparent 40%),
    radial-gradient(500px circle at 85% 80%, color-mix(in srgb, var(--c-primary) 12%, transparent), transparent 40%);
}

/* ── Theme toggle icon crossfade ─────────── */
.theme-icon { transition: opacity .15s ease, transform .15s ease; }