/* =========================
   THEME.CSS (CLEAN + FULL COVERAGE)
   - Light / Dark / Midnight / Neon
   - Accent: --primary (Theme.js değiştirir)
========================= */

/* ---------- TOKENS ---------- */
:root{
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface2: #fbfcff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15, 23, 42, 0.10);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --primary: #4361ee; /* JS ile değişebilir */
  --glow: transparent;
}

/* DARK */
html[data-theme="dark"]{
  --bg: #0b1220;
  --surface: #0f172a;
  --surface2: #111c33;
  --text: #e7eefc;
  --muted: #9fb0d0;
  --border: rgba(231, 238, 252, 0.10);
  --shadow: 0 12px 32px rgba(0,0,0,.45);
  --glow: transparent;
}

/* MIDNIGHT (daha koyu + mor ton) */
html[data-theme="midnight"]{
  --bg: #050713;
  --surface: #080d20;
  --surface2: #0c1530;
  --text: #eef3ff;
  --muted: #aab7dd;
  --border: rgba(238, 243, 255, 0.10);
  --shadow: 0 18px 50px rgba(0,0,0,.65);
  --glow: rgba(99,102,241,.18);
}

/* NEON (glow + daha canlı) */
html[data-theme="neon"]{
  --bg: #05050c;
  --surface: #0b0f1c;
  --surface2: #10172c;
  --text: #f2f6ff;
  --muted: #b7c3ff;
  --border: rgba(242, 246, 255, 0.12);
  --shadow: 0 18px 55px rgba(0,0,0,.70);
  --glow: rgba(34,197,94,.22);
}

/* ---------- GLOBAL APPLY ---------- */
body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ana layout yüzeyleri */
.dashboard-container,
.main-content,
.content-area{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* surfaces */
.sidebar,
.navbar,
.card,
.table-container,
.modal-content,
.login-box{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  box-shadow: none !important;
  border-right: 1px solid var(--border) !important;
}
.sidebar-header{
  border-bottom: 1px solid var(--border) !important;
}
.sidebar-header h3{
  color: var(--text) !important;
}

/* Links / nav items */
.nav-item{
  color: var(--muted) !important;
  border-left-color: transparent !important;
}
.nav-item:hover{
  background: rgba(67, 97, 238, 0.10) !important;
  color: var(--text) !important;
  border-left-color: transparent !important;
}
.nav-item.active{
  background: rgba(67, 97, 238, 0.14) !important;
  color: var(--text) !important;
  border-left-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(67,97,238,.22) !important;
}

/* ---------- NAVBAR ---------- */
.navbar{
  box-shadow: none !important;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .navbar,
html[data-theme="midnight"] .navbar,
html[data-theme="neon"] .navbar{
  background: rgba(15,23,42,.70) !important;
}
.navbar-left h1{
  color: var(--text) !important;
}

/* user avatar: accent */
.user-avatar{
  background: var(--primary) !important;
  color: #fff !important;
}

/* ---------- CARDS ---------- */
.card{
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 18px !important;
}
.card-header{
  border-bottom: 1px solid var(--border) !important;
}
.card-title,
.card-header h3,
.card-header h4{
  color: var(--text) !important;
}

/* ---------- STATS CARDS (beyaz kalmasın) ---------- */
.stats-grid .stat-card,
.stat-card{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}
.stat-card .stat-info p{
  color: var(--muted) !important;
}
.stat-card .stat-info h3{
  color: var(--text) !important;
}

/* Stat icon background: color-mix destek yoksa fallback */
.stat-card .stat-icon{
  /* fallback */
  background: rgba(67,97,238,.14) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(67,97,238,.18) !important;
}
/* color-mix destekleyen tarayıcılar için */
@supports (background: color-mix(in srgb, white 10%, black)) {
  .stat-card .stat-icon{
    background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  }
}

/* Eğer iconların özel classları sabit renk basıyorsa ez */
.stat-card .stat-icon.users,
.stat-card .stat-icon.money,
.stat-card .stat-icon.bets,
.stat-card .stat-icon.bonus{
  background: rgba(67,97,238,.14) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(67,97,238,.18) !important;
}
@supports (background: color-mix(in srgb, white 10%, black)) {
  .stat-card .stat-icon.users,
  .stat-card .stat-icon.money,
  .stat-card .stat-icon.bets,
  .stat-card .stat-icon.bonus{
    background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  }
}

/* ---------- TABLES ---------- */
.table thead th{
  background: var(--surface2) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
}
.table tbody td{
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.table tbody tr:hover{
  background: rgba(67, 97, 238, 0.06) !important;
}

/* ---------- MODAL ---------- */
.modal{
  background: rgba(0,0,0,0.55) !important;
}
html[data-theme="dark"] .modal,
html[data-theme="midnight"] .modal,
html[data-theme="neon"] .modal{
  background: rgba(0,0,0,0.70) !important;
}
.modal-header{
  border-bottom: 1px solid var(--border) !important;
}
.modal-header h3{ color: var(--text) !important; }
.modal-close{ color: var(--muted) !important; }

/* ---------- INPUTS ---------- */
.form-group label,
.form-control label{
  color: var(--muted) !important;
}
.form-group input,
.form-group select,
.form-group textarea,
.form-control input,
.form-control select,
.form-control textarea{
  background: var(--surface2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  outline: none !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control input:focus,
.form-control select:focus,
.form-control textarea:focus{
  border-color: rgba(67,97,238,.55) !important;
  box-shadow: 0 0 0 4px rgba(67,97,238,.12) !important;
}

/* ---------- BUTTONS ---------- */
.btn{
  background: var(--surface2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.btn-primary{
  background: var(--primary) !important;
  border-color: rgba(67,97,238,.35) !important;
  color: #fff !important;
}
.btn-danger{
  color: #fff !important;
}

/* ---------- BADGES ---------- */
.badge-success{ background: rgba(46,204,113,.18) !important; color: #2ecc71 !important; }
.badge-warning{ background: rgba(243,156,18,.18) !important; color: #f39c12 !important; }
.badge-danger{  background: rgba(231,76,60,.18) !important; color: #e74c3c !important; }
.badge-info{    background: rgba(52,152,219,.18) !important; color: #3498db !important; }

/* ---------- BOTTOM NAV ---------- */
.bottom-nav{
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}
.bottom-nav a{
  color: var(--muted) !important;
}
.bottom-nav a.active{
  color: var(--primary) !important;
}

/* ---------- MISC ---------- */
.loading{ color: var(--muted) !important; }
hr{ border-color: var(--border) !important; }

/* ---------- NEON / MIDNIGHT "BARİZ" FARK ---------- */
html[data-theme="midnight"] .card,
html[data-theme="midnight"] .sidebar,
html[data-theme="midnight"] .navbar{
  box-shadow: 0 0 0 1px rgba(99,102,241,.12), var(--shadow) !important;
}

html[data-theme="neon"] .card,
html[data-theme="neon"] .sidebar,
html[data-theme="neon"] .navbar{
  box-shadow: 0 0 0 1px rgba(34,197,94,.14), 0 18px 60px rgba(0,0,0,.75) !important;
}

html[data-theme="neon"] .nav-item.active{
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.25) !important;
}