/* === base.css === */

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Focus-visible for keyboard navigation */
:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.sidebar a:focus-visible { outline: 2px solid #a78bfa !important; outline-offset: -2px; }
[data-theme="dark"] :focus-visible { outline-color: #a78bfa; }
.skip-to-content {
  position: absolute; top: -50px; left: 0; background: var(--primary);
  color: #fff; padding: 10px 20px; z-index: 10000; font-size: 14px;
  border-radius: 0 0 var(--radius) 0; transition: top 0.2s; text-decoration: none;
}
.skip-to-content:focus { top: 0; }

/* ============================================
   SKELETON LOADING
   ============================================ */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, var(--bg-secondary) 37%, var(--border-light) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius);
}
.skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-text:last-child { width: 70%; }
.skeleton-card {
  height: 140px; border-radius: var(--radius-lg);
}
.skeleton-row { height: 48px; margin-bottom: 4px; }
.skeleton-chart { height: 250px; border-radius: var(--radius-md); }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInRight { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes slideInUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes gradient { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes bounceIn { 0% { transform:scale(0); } 50% { transform:scale(1.05); } 100% { transform:scale(1); } }
@keyframes ripple { to { transform:scale(4); opacity:0; } }
@keyframes typewriter { from { width:0; } to { width:100%; } }
@keyframes glow { 0%,100% { box-shadow: 0 0 5px var(--primary-glow); } 50% { box-shadow: 0 0 20px var(--primary-glow); } }

.animate-fade-in { animation: fadeIn 0.3s ease forwards; }
.animate-fade-in-up { animation: fadeInUp 0.4s ease forwards; }
.animate-scale-in { animation: scaleIn 0.3s ease forwards; }

/* Staggered children */
.stagger-children > * { opacity:0; animation: fadeInUp 0.4s ease forwards; }
.stagger-children > *:nth-child(1) { animation-delay:0.05s; }
.stagger-children > *:nth-child(2) { animation-delay:0.1s; }
.stagger-children > *:nth-child(3) { animation-delay:0.15s; }
.stagger-children > *:nth-child(4) { animation-delay:0.2s; }
.stagger-children > *:nth-child(5) { animation-delay:0.25s; }
.stagger-children > *:nth-child(6) { animation-delay:0.3s; }
.stagger-children > *:nth-child(7) { animation-delay:0.35s; }
.stagger-children > *:nth-child(8) { animation-delay:0.4s; }

/* ============================================
   LOGIN PAGE
   ============================================ */
#login-page {
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:#161617; position:relative; overflow:hidden;
}
#login-page::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 30%, rgba(0,122,255,0.04) 0%, transparent 60%);
}
.login-card {
  background:#2c2c2e; backdrop-filter: blur(40px);
  border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:40px 36px;
  width:360px; box-shadow:0 2px 24px rgba(0,0,0,0.4); text-align:center;
  position:relative; z-index:1; animation: scaleIn 0.3s ease;
}
.login-logo {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:14px;
  background:var(--primary);
  color:#fff; font-size:26px; margin-bottom:20px;
}
.login-card h1 { font-size:22px; font-weight:600; color:#f5f5f7; margin-bottom:4px; letter-spacing:-0.3px; }
.login-card p { color:rgba(255,255,255,0.4); margin-bottom:32px; font-size:13px; }
.login-field { margin-bottom:12px; }
.login-field input {
  width:100%; padding:14px 16px; border:1px solid rgba(255,255,255,0.1) !important;
  border-radius:10px !important; font-size:15px; font-family:inherit;
  transition:var(--transition); background:rgba(255,255,255,0.07) !important; color:#f5f5f7 !important;
  box-sizing:border-box;
}
.login-field input::placeholder { color:rgba(255,255,255,0.35) !important; }
.login-field input:focus { outline:none; border-color:rgba(0,122,255,0.6) !important; box-shadow:0 0 0 3px rgba(0,122,255,0.15); background:rgba(255,255,255,0.1) !important; }
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #2c2c2e inset !important;
  -webkit-text-fill-color: #f5f5f7 !important;
  border-color: rgba(255,255,255,0.1) !important;
  transition: background-color 5000s ease-in-out 0s;
}
.login-card .btn-login {
  width:100%; padding:13px; background:var(--primary); margin-top:8px;
  color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:600;
  cursor:pointer; transition:var(--transition); font-family:inherit; position:relative; overflow:hidden;
}
.login-card .btn-login:hover { opacity:0.9; }
.login-card .btn-login:active { transform:scale(0.98); }
.login-error { color:#ff6b6b; font-size:13px; margin-top:16px; display:none; font-weight:500; }