/* ── Color tokens ── */
:root {
  --gold:       #F59E0B;
  --gold-light: #FCD34D;
  --gold-dark:  #D97706;
  --gold-glow:  rgba(245,158,11,.25);
  --bg:         #f2f2ef;
  --bg2:        #ffffff;
  --bg3:        #f8f8f5;
  --border:     rgba(0,0,0,.08);
  --text:       #111827;
  --muted:      #6b7280;
}

/* ── Base ── */
body { background: var(--bg); color: var(--text); }
* { box-sizing: border-box; }

/* ── Sidebar ── */
.sidebar {
  position: fixed;
  top: 12px; left: 12px;
  height: calc(100vh - 24px);
  z-index: 40;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow:
    0 2px 8px rgba(0,0,0,.06),
    0 8px 24px rgba(0,0,0,.08),
    0 20px 48px rgba(0,0,0,.05);
  overflow: hidden;
}
.sidebar::before { display: none; }
.sidebar::after  { display: none; }
.sidebar-inner {
  display: flex; flex-direction: column; height: 100%;
  position: relative; z-index: 1;
}

/* Nav items */
.nav-item {
  color: #9ca3af;
  transition: color .15s, background .15s, transform .12s;
}
.nav-item:hover {
  color: #111827;
  background: #f5f5f2;
  transform: translateX(2px);
}
.nav-item-active {
  color: var(--gold-dark);
  background: rgba(245,158,11,.09);
  border-left: 3px solid var(--gold);
  box-shadow: none;
  transform: none;
}

/* ── Glass cards ── */
.glass-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Stat cards ── */
.stat-card {
  background: linear-gradient(145deg, #ffffff 0%, #fafaf8 100%);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: .875rem;
  padding: 1rem 1.25rem;
  box-shadow:
    0 1px 3px rgba(0,0,0,.05),
    0 6px 20px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,1);
  transition: transform .15s, box-shadow .15s;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(0,0,0,.08),
    0 12px 32px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* Gold glow */
.shadow-gold {
  box-shadow: 0 0 20px rgba(245,158,11,.35), 0 0 40px rgba(245,158,11,.12);
}

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #000;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(245,158,11,.35);
}
.btn-primary:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,158,11,.45); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(0,0,0,.04);
  color: #374151;
  border: 1px solid rgba(0,0,0,.1);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-ghost:hover { background: rgba(0,0,0,.08); color: #111; border-color: rgba(0,0,0,.16); }

.btn-danger {
  background: rgba(239,68,68,.09);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,.2);
  cursor: pointer;
  transition: background .15s;
}
.btn-danger:hover { background: rgba(239,68,68,.16); }

.btn-success {
  background: rgba(16,185,129,.1);
  color: #059669;
  border: 1px solid rgba(16,185,129,.22);
  cursor: pointer;
  transition: background .15s;
}
.btn-success:hover { background: rgba(16,185,129,.18); }

/* ── Tables ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  padding: .6rem 1rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.02);
}
.data-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
  font-size: .85rem;
  color: #374151;
}
.data-table tr:hover td { background: rgba(245,158,11,.05); }
.data-table tr:last-child td { border-bottom: none; }

/* ── Inputs ── */
.form-input {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .625rem;
  color: #111827;
  padding: .6rem 1rem;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-size: .875rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
}
.form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,158,11,.12); }
.form-input::placeholder { color: #9ca3af; }
select.form-input option { background: #fff; color: #111; }

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 9999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.badge-green  { background: rgba(16,185,129,.12);  color: #059669; }
.badge-red    { background: rgba(239,68,68,.12);   color: #dc2626; }
.badge-yellow { background: rgba(245,158,11,.15);  color: #d97706; }
.badge-blue   { background: rgba(59,130,246,.12);  color: #2563eb; }
.badge-purple { background: rgba(139,92,246,.12);  color: #7c3aed; }
.badge-gray   { background: rgba(107,114,128,.1);  color: #4b5563; }
.badge-gold   { background: rgba(245,158,11,.15);  color: var(--gold-dark); }

/* ── Section labels ── */
.section-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .75rem;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245,158,11,.35); border-radius: 9999px; }

/* ── Drawer ── */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  z-index: 50;
}
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh;
  width: min(560px, 95vw);
  background: #ffffff;
  border-left: 1px solid rgba(0,0,0,.1);
  box-shadow: -8px 0 40px rgba(0,0,0,.12);
  z-index: 51; overflow-y: auto; padding: 2rem;
}

/* ── Progress bar ── */
.progress-bar-bg { background: rgba(0,0,0,.07); border-radius: 9999px; height: 5px; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); transition: width .5s ease; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .75rem;
  padding: .875rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  animation: slideUp .2s ease;
  font-size: .875rem;
  color: #111;
}
@keyframes slideUp { from{transform:translateY(10px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── Pulse ── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.animate-pulse { animation: pulse 2s infinite; }

/* ── Login card ── */
.login-card {
  background: #ffffff;
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 1.25rem;
  box-shadow: 0 0 60px rgba(245,158,11,.1), 0 20px 60px rgba(0,0,0,.1);
}

/* ── Gold accent line ── */
.gold-line { width: 40px; height: 3px; background: var(--gold); border-radius: 9999px; margin: .5rem 0 1.5rem; }

/* ── Icon wrapper ── */
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .5; }
.nav-item-active .nav-icon, .nav-item:hover .nav-icon { opacity: 1; }

/* ── Light-theme text overrides (main content) ── */
main .text-white       { color: #111827 !important; }
main .text-gray-300    { color: #374151 !important; }
main .text-gray-400    { color: #6b7280 !important; }
main .text-gray-500    { color: #9ca3af !important; }
main .text-gray-600    { color: #4b5563 !important; }
main .border-white\/05 { border-color: rgba(0,0,0,.07) !important; }
main .border-white\/06 { border-color: rgba(0,0,0,.08) !important; }