/* ────────────────────────────────────────
   StoreKeeper — default brand theme
   Orange #FF9D00 / white / Inter / Roboto Mono
   Supports light + dark via [data-scheme]
   ──────────────────────────────────────── */
:root,
html[data-scheme="light"] {
  --sk-primary: #FF9D00;
  --sk-primary-hover: #E68D00;
  --sk-primary-bg: #FFF5E5;

  --sk-bg: #F4F5F7;
  --sk-card-bg: #FFFFFF;
  --sk-sidebar-bg: #FFFFFF;
  --sk-topbar-bg: #FFFFFF;

  --sk-text: #111827;
  --sk-text-muted: #4B5563;
  --sk-text-subtle: #6B7280;

  --sk-border: #E5E7EB;
  --sk-border-strong: #D1D5DB;

  --sk-success: #10B981;
  --sk-danger: #EF4444;

  --sk-font-display: 'Inter', system-ui, sans-serif;
  --sk-font-body: 'Inter', system-ui, sans-serif;
  --sk-font-data: 'Roboto Mono', monospace;

  --sk-radius: 8px;
  --sk-radius-sm: 6px;

  --sk-sidebar-width: 240px;
  --sk-sidebar-item-bg-active: #FFF5E5;
  --sk-sidebar-item-text-active: #FF9D00;
  --sk-sidebar-item-text: #404040;
  --sk-sidebar-header-text: #9CA3AF;
}

/* ── Theme-specific tweaks ── */

/* Logo wordmark — tighter tracking, brand feel */
.sk-logo-text {
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Primary button variant (orange) for CTAs that opt in */
.sk-btn-primary {
  background: var(--sk-primary);
  border-color: var(--sk-primary);
  color: #fff;
}
.sk-btn-primary:hover {
  background: var(--sk-primary-hover);
  border-color: var(--sk-primary-hover);
}

/* Nav item active: subtle left accent bar for brand flavour */
.sk-nav-item.active {
  position: relative;
}

/* Focus ring in brand orange */
.sk-search input:focus,
.sk-btn:focus-visible {
  outline: none;
  border-color: var(--sk-primary);
  box-shadow: 0 0 0 3px rgba(255, 157, 0, 0.15);
}

/* KPI values — prominent data font */
.sk-kpi-value {
  font-family: var(--sk-font-data);
  letter-spacing: -0.01em;
}

/* Cards & KPIs — white on soft-gray page, hairline border + tiny shadow */
.sk-card,
.sk-kpi,
.sk-kpi-rich {
  background: #FFFFFF;
  border: 1px solid var(--sk-border);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
}

/* Sidebar gets a single hairline divider so it visually rests on the gray page */
.sk-sidebar {
  border-right: 1px solid var(--sk-border);
}

/* Topbar hairline + tiny lift */
.sk-topbar {
  border-bottom: 1px solid var(--sk-border);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}

/* Tables now sit on white cards — zebra is subtle, no nested gray-on-gray */
.sk-card .sk-table tbody tr { background: #FFFFFF; }
.sk-card .sk-table tbody tr:nth-child(even) { background: #F9FAFB; }
.sk-card .sk-table tbody tr:hover { background: rgba(255, 157, 0, 0.06); }
.sk-card .sk-table th { background: #F9FAFB; }

/* Topbar — clean, minimal shadow on scroll */
.sk-topbar {
  box-shadow: 0 1px 0 0 var(--sk-border);
  border-bottom-color: transparent;
}

/* Avatar — rounded square, orange fill */
.sk-avatar {
  border-radius: var(--sk-radius-sm);
  background: var(--sk-primary);
}

/* Theme menu — soft shadow */
.sk-theme-menu {
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(17, 24, 39, 0.06);
}

/* ────────────────────────────────────────
   DARK MODE
   ──────────────────────────────────────── */
html[data-scheme="dark"] {
  --sk-primary: #FFB020;
  --sk-primary-hover: #FFC44F;
  --sk-primary-bg: #2A1F0A;

  --sk-bg: #0E0F13;
  --sk-card-bg: #17181D;
  --sk-sidebar-bg: #0A0B0F;
  --sk-topbar-bg: #0A0B0F;

  --sk-text: #F9FAFB;
  --sk-text-muted: #D1D5DB;
  --sk-text-subtle: #9CA3AF;

  --sk-border: #23252C;
  --sk-border-strong: #2E3038;

  --sk-sidebar-item-bg-active: #2A1F0A;
  --sk-sidebar-item-text-active: #FFB020;
  --sk-sidebar-item-text: #C5C7CC;
  --sk-sidebar-header-text: #6B6E75;
}

html[data-scheme="dark"] body {
  background: var(--sk-bg);
  color: var(--sk-text);
}

html[data-scheme="dark"] .sk-theme-menu {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

html[data-scheme="dark"] ::-webkit-scrollbar-thumb {
  background: #2E3038;
}
html[data-scheme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #3E4048;
}

.sk-theme-select {
  height: 32px;
  padding: 0 28px 0 10px;
  background: var(--sk-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
  color: var(--sk-text);
  font-size: 12px;
  font-family: var(--sk-font-body);
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  transition: all 0.15s;
}
.sk-theme-select:hover { border-color: var(--sk-border-strong); }
.sk-theme-select:focus { border-color: var(--sk-primary); box-shadow: 0 0 0 3px rgba(255, 157, 0, 0.15); }
html[data-scheme="dark"] .sk-theme-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A0A3AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}