/* ============================================
   ADMIN PANEL STYLES
   Dark theme, data-rich, animated
   ============================================ */

:root {
  --admin-bg: #0b0f19;
  --admin-surface: #111827;
  --admin-surface-2: #1f2937;
  --admin-surface-3: #374151;
  --admin-text: #f9fafb;
  --admin-text-2: #d1d5db;
  --admin-text-3: #6b7280;
  --admin-border: #1f2937;
  --admin-primary: #818cf8;
  --admin-primary-dark: #6366f1;
  --admin-primary-glow: rgba(99,102,241,0.3);
  --sidebar-w: 260px;
}

[data-theme="light"] {
  --admin-bg: #f3f4f6;
  --admin-surface: #ffffff;
  --admin-surface-2: #f9fafb;
  --admin-surface-3: #e5e7eb;
  --admin-text: #111827;
  --admin-text-2: #4b5563;
  --admin-text-3: #9ca3af;
  --admin-border: #e5e7eb;
  --admin-primary: #6366f1;
  --admin-primary-dark: #4f46e5;
  --admin-primary-glow: rgba(99,102,241,0.15);
}

body {
  background: var(--admin-bg);
  color: var(--admin-text);
  font-family: var(--font-sans);
}

/* Sidebar */
.admin-layout { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }
@media (max-width:1024px) { .admin-layout { grid-template-columns:1fr; } }

.sidebar {
  background: var(--admin-surface);
  border-right: 1px solid var(--admin-border);
  display: flex; flex-direction: column; padding: var(--space-6) 0;
  position: sticky; top: 0; height: 100vh; overflow: auto;
  z-index: var(--z-sticky);
}
.sidebar-logo {
  padding: 0 var(--space-6) var(--space-6);
  font-size: 1.375rem; font-weight: 900; display: flex; align-items: center; gap: var(--space-3);
}
.sidebar-logo-icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--admin-primary), #a78bfa);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff;
}
.sidebar-logo span { color: var(--admin-primary); }

.sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-3); flex: 1; }
.sidebar-nav button {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--r-lg); border: none; background: transparent;
  color: var(--admin-text-2); font-size: 0.9375rem; font-weight: 500; cursor: pointer;
  text-align: left; width: 100%; transition: all var(--t-fast); position: relative;
}
.sidebar-nav button:hover { background: var(--admin-surface-2); color: var(--admin-text); }
.sidebar-nav button.active {
  background: linear-gradient(90deg, rgba(99,102,241,0.15), transparent);
  color: var(--admin-primary);
}
.sidebar-nav button.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: linear-gradient(180deg, var(--admin-primary), #a78bfa); border-radius: var(--r-full);
}
.sidebar-nav-badge {
  margin-left: auto; min-width: 20px; height: 20px; border-radius: var(--r-full);
  background: var(--c-danger); color: #fff; font-size: 0.625rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 6px;
}

.sidebar-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--admin-border); }
.sidebar-user { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.sidebar-avatar {
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--admin-primary), #a78bfa);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; color: #fff;
}
.sidebar-user-info { flex: 1; }
.sidebar-user-name { font-size: 0.875rem; font-weight: 600; color: var(--admin-text); }
.sidebar-user-role { font-size: 0.6875rem; color: var(--admin-text-3); text-transform: uppercase; letter-spacing: 0.5px; }

/* Mobile sidebar toggle */
.sidebar-mobile-toggle {
  display: none; position: fixed; top: var(--space-4); left: var(--space-4); z-index: calc(var(--z-sticky) + 10);
  width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--admin-surface);
  border: 1px solid var(--admin-border); color: var(--admin-text); align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.25rem;
}
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: calc(var(--z-sticky) - 1); backdrop-filter: blur(4px); }
@media (max-width:1024px) {
  .sidebar { position: fixed; inset: 0; right: auto; z-index: var(--z-sticky); transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.32,0.72,0,1); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-mobile-toggle { display: flex; }
  .sidebar-overlay.open { display: block; }
}

/* Main */
.main { padding: var(--space-6) var(--space-8); overflow: auto; }
@media (max-width:768px) { .main { padding: calc(var(--header-h) + var(--space-4)) var(--space-4) var(--space-4); } }
.main-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-8); flex-wrap: wrap; gap: var(--space-4); }
.main-header h1 { font-size: 1.75rem; font-weight: 800; }
.main-header-actions { display: flex; gap: var(--space-3); align-items: center; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
@media (max-width:1200px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-card {
  background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: var(--r-xl);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
  position: relative; overflow: hidden; transition: all var(--t-normal);
}
.stat-card:hover { border-color: var(--admin-surface-3); transform: translateY(-2px); }
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  opacity: 0; transition: opacity var(--t-normal);
}
.stat-card:hover::before { opacity: 1; }
.stat-card-primary::before { background: linear-gradient(90deg, var(--admin-primary), #a78bfa); }
.stat-card-success::before { background: linear-gradient(90deg, #10b981, #34d399); }
.stat-card-warning::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stat-card-danger::before { background: linear-gradient(90deg, #ef4444, #f87171); }

.stat-header { display: flex; justify-content: space-between; align-items: flex-start; }
.stat-icon {
  width: 44px; height: 44px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.stat-icon-primary { background: rgba(99,102,241,0.15); color: var(--admin-primary); }
.stat-icon-success { background: rgba(16,185,129,0.15); color: #34d399; }
.stat-icon-warning { background: rgba(245,158,11,0.15); color: #fbbf24; }
.stat-icon-danger { background: rgba(239,68,68,0.15); color: #f87171; }

.stat-label { font-size: 0.8125rem; color: var(--admin-text-3); font-weight: 500; }
.stat-value { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.stat-change { font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: var(--space-1); }
.stat-change.up { color: #34d399; }
.stat-change.down { color: #f87171; }

/* Charts */
.chart-container {
  background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: var(--r-xl);
  padding: var(--space-6); margin-bottom: var(--space-6);
}
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
.chart-title { font-size: 1rem; font-weight: 700; }
.chart-legend { display: flex; gap: var(--space-4); }
.chart-legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: 0.75rem; color: var(--admin-text-3); }
.chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; }

/* SVG Charts */
.chart-svg { width: 100%; height: 200px; }
.chart-bar-group { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 20px; }
.chart-bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chart-bar-visual {
  width: 100%; max-width: 32px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--admin-primary), rgba(99,102,241,0.3));
  transition: height 0.8s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.chart-bar-visual::after {
  content: attr(data-value); position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 0.625rem; color: var(--admin-text-3); opacity: 0; transition: opacity var(--t-fast);
}
.chart-bar-item:hover .chart-bar-visual::after { opacity: 1; }
.chart-bar-label { font-size: 0.625rem; color: var(--admin-text-3); }

/* Filter Bar */
.filter-bar { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; align-items: center; }
.filter-bar .input, .filter-bar .select { background: var(--admin-surface); border-color: var(--admin-border); color: var(--admin-text); width: auto; min-width: 200px; }
.filter-bar .input:focus, .filter-bar .select:focus { border-color: var(--admin-primary); box-shadow: 0 0 0 3px var(--admin-primary-glow); }
.filter-pill {
  padding: var(--space-2) var(--space-4); border-radius: var(--r-full);
  background: var(--admin-surface-2); border: 1px solid var(--admin-border);
  color: var(--admin-text-2); font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  transition: all var(--t-fast);
}
.filter-pill:hover, .filter-pill.active { background: var(--admin-primary-dark); color: #fff; border-color: var(--admin-primary-dark); }

/* Tables - Admin */
.table-wrap { background: var(--admin-surface); border-color: var(--admin-border); }
.table-wrap thead { background: var(--admin-surface-2); }
.table-wrap th { color: var(--admin-text-3); padding: var(--space-3) var(--space-4); }
.table-wrap td { color: var(--admin-text); border-color: var(--admin-border); padding: var(--space-3) var(--space-4); }
.table-wrap tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Status quick update */
.status-select {
  padding: var(--space-1) var(--space-3); border-radius: var(--r-md); border: 1px solid var(--admin-border);
  background: var(--admin-surface-2); color: var(--admin-text); font-size: 0.75rem; font-weight: 600;
  cursor: pointer; outline: none; transition: all var(--t-fast);
}
.status-select:focus { border-color: var(--admin-primary); }

/* Empty State */
.empty-state { text-align: center; padding: var(--space-16); color: var(--admin-text-3); }
.empty-state-icon { font-size: 4rem; margin-bottom: var(--space-4); opacity: 0.4; }
.empty-state h3 { color: var(--admin-text-2); margin-bottom: var(--space-2); font-size: 1.125rem; }
.empty-state p { font-size: 0.875rem; max-width: 320px; margin: 0 auto; }

/* Login */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 30% 20%, rgba(99,102,241,0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(139,92,246,0.1) 0%, transparent 50%),
              var(--admin-bg);
  position: relative; overflow: hidden;
}
.login-screen::before {
  content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
  top: -200px; right: -200px; animation: float 8s ease-in-out infinite;
}
.login-screen::after {
  content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.06) 0%, transparent 70%);
  bottom: -100px; left: -100px; animation: float 10s ease-in-out infinite reverse;
}
.login-card {
  background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: var(--r-2xl);
  padding: var(--space-10); width: 100%; max-width: 420px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
  position: relative; z-index: 1;
}
.login-card .logo { justify-content: center; margin-bottom: var(--space-6); font-size: 1.75rem; }
.login-card h2 { text-align: center; margin-bottom: var(--space-2); font-size: 1.5rem; }
.login-card p { text-align: center; color: var(--admin-text-3); font-size: 0.9375rem; margin-bottom: var(--space-8); }
.login-card .input { background: var(--admin-bg); border-color: var(--admin-border); color: var(--admin-text); }
.login-card .input:focus { border-color: var(--admin-primary); box-shadow: 0 0 0 3px var(--admin-primary-glow); }

.login-theme-toggle {
  position: fixed; top: var(--space-4); right: var(--space-4); z-index: 100;
  width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--admin-surface);
  border: 1px solid var(--admin-border); color: var(--admin-text); cursor: pointer; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center; transition: all var(--t-fast);
}
.login-theme-toggle:hover { transform: scale(1.1); border-color: var(--admin-primary); }

.login-hint {
  margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--admin-border);
  text-align: center; font-size: 0.8125rem; color: var(--admin-text-3);
}
.login-hint strong { color: var(--admin-text-2); }

/* FAB */
.fab {
  position: fixed; bottom: var(--space-8); right: var(--space-8); width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--admin-primary), #a78bfa); color: #fff; border: none;
  font-size: 1.75rem; cursor: pointer; box-shadow: 0 10px 30px var(--admin-primary-glow);
  display: flex; align-items: center; justify-content: center; transition: all var(--t-bounce);
  z-index: 100;
}
.fab:hover { transform: scale(1.1) rotate(90deg); }
.fab:active { transform: scale(0.95); }
@media (max-width:768px) { .fab { bottom: calc(60px + var(--space-4)); right: var(--space-4); width: 52px; height: 52px; } }

/* Recent List */
.recent-list-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--r-lg); transition: background var(--t-fast); }
.recent-list-item:hover { background: var(--admin-surface-2); }
.recent-list-icon {
  width: 40px; height: 40px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.recent-list-info { flex: 1; min-width: 0; }
.recent-list-title { font-weight: 600; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-list-meta { font-size: 0.75rem; color: var(--admin-text-3); margin-top: 2px; }
.recent-list-right { text-align: right; }
.recent-list-amount { font-weight: 700; font-size: 0.9375rem; }

/* Tabs within admin */
.admin-tabs { display: flex; gap: var(--space-1); padding: var(--space-1); background: var(--admin-surface-2); border-radius: var(--r-lg); margin-bottom: var(--space-6); width: fit-content; }
.admin-tab {
  padding: var(--space-2) var(--space-5); border-radius: var(--r-md); border: none; background: transparent;
  color: var(--admin-text-2); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all var(--t-fast);
}
.admin-tab.active { background: var(--admin-surface); color: var(--admin-text); box-shadow: var(--shadow-sm); }
.admin-tab:hover:not(.active) { color: var(--admin-text); }

/* Animations for admin */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-count { animation: countUp 0.5s ease forwards; }

/* Scrollbar dark */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--admin-surface); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--admin-surface-3); }