/* ===================================================
   THEMES.CSS — стили применяются через CSS переменные
   которые устанавливает themes.js в :root
   =================================================== */

/* ── Глобальные переменные (fallback — Минимал) ─────── */
:root {
  --t-primary:       #6b7280;
  --t-primary-dark:  #374151;
  --t-primary-light: #f3f4f6;
  --t-bg:            #f9fafb;
  --t-bg2:           #ffffff;
  --t-card:          #ffffff;
  --t-text:          #111827;
  --t-text2:         #374151;
  --t-muted:         #9ca3af;
  --t-border:        rgba(0,0,0,0.07);
  --t-radius:        14px;
  --t-radius-sm:     8px;
  --t-radius-btn:    8px;
  --t-btn-gradient:  linear-gradient(135deg,#6b7280,#374151);
  --t-sidebar-bg:    linear-gradient(180deg,#1f2937,#111827,#0f172a);
  --t-sidebar-accent:#e5e7eb;
  --t-sidebar-active:rgba(255,255,255,0.1);
  --t-shadow:        0 2px 16px rgba(0,0,0,0.06);
  --t-scrollbar:     #d1d5db;
}

/* ── Применение к элементам ───────────────────────── */
body {
  background: var(--t-bg) !important;
  color: var(--t-text) !important;
}

::-webkit-scrollbar-thumb { background: var(--t-scrollbar) !important; }
::-webkit-scrollbar-track { background: var(--t-bg) !important; }

/* Кнопки */
.btn-primary,
.btn-submit,
.sp-login-btn,
.acc-btn,
.admin-btn-primary,
.sp-send-btn {
  background: var(--t-btn-gradient) !important;
  border-radius: var(--t-radius-btn) !important;
}

/* Карточки */
.admin-card {
  background: var(--t-card) !important;
  border-color: var(--t-border) !important;
  border-radius: var(--t-radius) !important;
  box-shadow: var(--t-shadow) !important;
}
.stat-card {
  background: var(--t-card) !important;
  border-color: var(--t-border) !important;
}

/* Admin layout */
.admin-layout,
.admin-content,
.admin-main {
  background: var(--t-bg) !important;
}
.admin-topbar {
  background: color-mix(in srgb, var(--t-bg) 97%, transparent) !important;
  border-color: var(--t-border) !important;
}

/* Admin sidebar */
.admin-sidebar {
  background: var(--t-sidebar-bg) !important;
}
.admin-nav-item {
  color: rgba(255,255,255,0.65) !important;
  border-radius: var(--t-radius-sm) !important;
}
.admin-nav-item.active {
  background: var(--t-sidebar-active) !important;
  color: var(--t-sidebar-accent) !important;
}
.admin-sidebar-logo span { color: var(--t-sidebar-accent) !important; }

/* Form inputs */
.form-input-admin:focus,
.acc-input:focus,
.sp-textarea:focus {
  border-color: var(--t-primary) !important;
}

/* Support chat */
.sp-msg.mine .sp-bubble {
  background: var(--t-btn-gradient) !important;
  border-color: transparent !important;
}
.sp-quick-btn {
  border-color: var(--t-primary) !important;
  color: var(--t-primary-dark) !important;
  border-radius: var(--t-radius-btn) !important;
}
.sp-quick-btn:hover {
  background: var(--t-primary) !important;
  color: #fff !important;
}

/* Account */
.acc-nav-item.active { color: var(--t-primary) !important; }
.cashback-card { background: var(--t-btn-gradient) !important; }

/* Track */
.step.active .step-circle,
.step.done .step-circle {
  background: var(--t-btn-gradient) !important;
}
.step-line.done { background: var(--t-btn-gradient) !important; }
.track-btn { background: var(--t-btn-gradient) !important; }

/* Stat card value color */
.stat-card-value { color: var(--t-text) !important; }

/* ── DARK THEME OVERRIDES ─────────────────────────── */
body.dark-mode,
[data-theme="dark"] body {
  background: #121212 !important;
  color: #e1e1e1 !important;
}
body.dark-mode .admin-card,
body.dark-mode .stat-card {
  background: #1e1e2e !important;
  color: #e1e1e1 !important;
  border-color: rgba(187,134,252,0.15) !important;
}
body.dark-mode .admin-topbar {
  background: rgba(18,18,18,0.97) !important;
  border-color: rgba(187,134,252,0.1) !important;
}
body.dark-mode .form-input-admin,
body.dark-mode .sort-select,
body.dark-mode .admin-search {
  background: #2a2a3e !important;
  color: #e1e1e1 !important;
  border-color: rgba(187,134,252,0.2) !important;
}
body.dark-mode .admin-search input { background: transparent !important; color: #e1e1e1 !important; }
body.dark-mode .admin-table th { background: #2a2a3e !important; color: #b0b0b0 !important; }
body.dark-mode .admin-table td { color: #e1e1e1 !important; border-color: #2a2a3e !important; }
body.dark-mode .admin-table tr:hover td { background: #2a2a3e !important; }
body.dark-mode .acc-panel,
body.dark-mode .acc-sidebar { background: #1e1e2e !important; color: #e1e1e1 !important; }
body.dark-mode .acc-input { background: #2a2a3e !important; color: #e1e1e1 !important; border-color: rgba(187,134,252,0.2) !important; }
body.dark-mode .acc-readonly { background: #2a2a3e !important; color: #b0b0b0 !important; }
body.dark-mode .sp-bubble { background: #1e1e2e !important; color: #e1e1e1 !important; }
body.dark-mode .sp-input-area { background: #1e1e2e !important; }
body.dark-mode .sp-textarea { background: #2a2a3e !important; color: #e1e1e1 !important; }
body.dark-mode .sp-header { background: rgba(18,18,18,0.97) !important; }
body.dark-mode .sp-date-sep { color: #6b6b6b !important; }
body.dark-mode .admin-btn-secondary { background: #2a2a3e !important; color: #e1e1e1 !important; border-color: rgba(187,134,252,0.2) !important; }
body.dark-mode .modal { background: #1e1e2e !important; color: #e1e1e1 !important; }
body.dark-mode .modal-title { color: #e1e1e1 !important; }
body.dark-mode .setting-row { border-color: #2a2a3e !important; }
body.dark-mode .setting-label { color: #e1e1e1 !important; }
body.dark-mode .setting-desc { color: #b0b0b0 !important; }
body.dark-mode #globalSearchOverlay > div { background: #1e1e2e !important; }
body.dark-mode #globalSearchInput { color: #e1e1e1 !important; }
body.dark-mode .admin-nav-section { color: rgba(255,255,255,0.2) !important; }

/* ── THEME CHIP ACTIVE STATE ──────────────────────── */
.theme-chip { transition: all .2s; cursor: pointer; }
.theme-chip:hover { transform: translateY(-2px); filter: brightness(1.1); }