/* =========================
   THEME ENGINE (CLEAN)
   ========================= */

/* HTML PREPAINT THEME BACKGROUND (MATCHES BODY THEMES) */
html.theme-dark {
  background: #020617;
}
html.theme-arctic {
  background: #f7f9fc;
}
html.theme-cyber {
  background: #020617;
}
html.theme-solar {
  background: #fff7ed;
}
html.theme-graphite {
  background: #0f172a;
}
html.theme-emerald {
  background: #021c1a;
}
html.theme-neonflux {
  background: linear-gradient(135deg, #030617 0%, #12163a 40%, #2b175d 70%, #0a4857 100%);
}
html.theme-cosmic-light {
  background: linear-gradient(135deg, #f8fafc, #e0e7ff);
}
html.theme-aurora-light {
  background: linear-gradient(135deg, #ecfeff, #f0fdf4, #fefce8);
}

/* ===== DARK ===== */

body.theme-dark {
  --bg-main: #020617;
  --bg-card: linear-gradient(135deg, #0f172a, #022c22);
  --bg-table: #020617;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --border-soft: rgba(255,255,255,0.08);
  --accent: #22c55e;
  --text-on-accent: #020617;
}

/* ===== ARCTIC ===== */
body.theme-arctic {
  --bg-main: #f7f9fc;
  --bg-card: linear-gradient(135deg, #ffffff, #eef2f7);
  --bg-table: #ffffff;
  --text-main: #0f172a;
  --text-muted: #6b7280;
  --border-soft: rgba(15,23,42,0.12);
  --accent: #2563eb;
  --text-on-accent: #ffffff;
}

/* ===== CYBER ===== */
body.theme-cyber {
  --bg-main: #020617;
  --bg-card: linear-gradient(135deg, #020617, #022c22);
  --bg-table: #020617;
  --text-main: #ecfeff;
  --text-muted: #67e8f9;
  --border-soft: rgba(34,211,238,0.25);
  --accent: #22d3ee;
  --text-on-accent: #020617;
}

/* ===== SOLAR ===== */
body.theme-solar {
  --bg-main: #fff7ed;
  --bg-card: linear-gradient(135deg, #ffffff, #ffedd5);
  --bg-table: #ffffff;
  --text-main: #431407;
  --text-muted: #9a3412;
  --border-soft: rgba(251,146,60,0.35);
  --accent: #f97316;
  --text-on-accent: #ffffff;
}

/* ===== GRAPHITE ===== */
body.theme-graphite {
  --bg-main: #0f172a;
  --bg-card: linear-gradient(135deg, #1f2933, #111827);
  --bg-table: #0f172a;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --border-soft: rgba(255,255,255,0.12);
  --accent: #38bdf8;
  --text-on-accent: #020617;
}

/* ===== EMERALD ===== */
body.theme-emerald {
  --bg-main: #021c1a;
  --bg-card: linear-gradient(135deg, #022c22, #064e3b);
  --bg-table: #021c1a;
  --text-main: #dcfce7;
  --text-muted: #86efac;
  --border-soft: rgba(34,197,94,0.35);
  --accent: #4ade80;
  --text-on-accent: #020617;
}

/* ===== NEONFLUX ===== */
body.theme-neonflux {
  --bg-main: linear-gradient(135deg, #030617 0%, #12163a 40%, #2b175d 70%, #0a4857 100%);
  --bg-card: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  --bg-table: rgba(10, 15, 40, 0.65);
  --text-main: #e5faff;
  --text-muted: #8bb7c9;
  --border-soft: rgba(120, 255, 255, 0.25);
  --accent: #38f8ff;
  --text-on-accent: #020617;
}


/* =========================
   ✅ NEW LIGHT GRADIENT THEMES
   ========================= */

/* 🌌 COSMIC LIGHT */
body.theme-cosmic-light {
  --bg-main: linear-gradient(135deg, #f8fafc, #e0e7ff);
  --bg-card: linear-gradient(135deg, #ffffff, #eef2ff);
  --bg-table: #ffffff;
  --text-main: #0f172a;
  --text-muted: #475569;
  --border-soft: rgba(30,41,59,0.18);
  --accent: #6366f1;
  --text-on-accent: #ffffff;
}

/* 🌈 AURORA LIGHT */
body.theme-aurora-light {
  --bg-main: linear-gradient(135deg, #ecfeff, #f0fdf4, #fefce8);
  --bg-card: linear-gradient(135deg, #ffffff, #ecfeff);
  --bg-table: #ffffff;
  --text-main: #022c22;
  --text-muted: #065f46;
  --border-soft: rgba(5,150,105,0.25);
  --accent: #10b981;
  --text-on-accent: #ffffff;
}


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

.card {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-soft) !important;
}

.table,
.table-websites {
  background: var(--bg-table) !important;
  color: var(--text-main) !important;
}

.table td,
.table th {
  background: transparent !important;
  color: var(--text-main) !important;
}

/* ===== NAVBAR ===== */
.theme-navbar {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-soft);
}

.theme-navbar .nav-link,
.theme-navbar .navbar-brand {
  color: var(--text-main) !important;
}

/* ===== INPUTS ===== */
.form-control,
.form-select {
  background: var(--bg-table) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-soft) !important;
}

/* ===== LIGHT INPUT FIX ===== */
body.theme-arctic .form-control,
body.theme-solar .form-control,
body.theme-arctic .form-select,
body.theme-solar .form-select {
  background: #ffffff !important;
  color: #020617 !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
}

/* ===== LINKS ===== */
.link-theme {
  color: var(--accent) !important;
}

/* ===== NEON EFFECTS ===== */
body.theme-neonflux .card {
  box-shadow: 0 0 20px rgba(56,248,255,0.2);
}

body.theme-neonflux .link-theme:hover {
  text-shadow: 0 0 6px rgba(56,248,255,0.9);
}

/* =========================
   UNIVERSAL PLACEHOLDER FIX
   ========================= */

.form-control::placeholder,
.form-select::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

body.theme-neonflux .form-control::placeholder,
body.theme-neonflux .form-select::placeholder {
  color: #8bb7c9 !important;
}

/* =========================
   DASHBOARD CONTRAST FIX
   ========================= */

/* Повертаємо легкий фон рядкам */
.table td,
.table th {
  background: rgba(255,255,255,0.02) !important;
}

/* Світлі теми */
body.theme-arctic .table td,
body.theme-arctic .table th,
body.theme-solar .table td,
body.theme-solar .table th {
  background: rgba(0,0,0,0.03) !important;
}

/* =========================
   UPTIME BAR RESTORE
   ========================= */

.bar-muted {
  background: rgba(148,163,184,0.35) !important;
  height: 6px !important;
  border-radius: 999px !important;
}

.bar-green {
  background: #22c55e !important;
  height: 6px !important;
}

.bar-red {
  background: #dc2626 !important;
  height: 6px !important;
}

/* Контейнер барів */
.table .d-flex.w-100 {
  background: rgba(255,255,255,0.04) !important;
  padding: 2px;
  border-radius: 999px;
}

/* Неон тема – окремий акцент */
body.theme-neonflux .bar-muted {
  background: rgba(56,248,255,0.25) !important;
}

body.theme-neonflux .bar-green {
  background: linear-gradient(90deg, #38f8ff, #22c55e) !important;
}

body.theme-neonflux .bar-red {
  background: linear-gradient(90deg, #ff3b3b, #ff0066) !important;
}

/* =========================
   THEME TEXT COLOR BINDINGS
   ========================= */

/* Усі "muted" тексти беруть колір з поточної теми */
.text-muted,
.text-muted-small,
.text-theme-muted,
.text-theme-muted-small {
  color: var(--text-muted) !important;
}

/* Заголовки в картках і page-title явно беруть основний колір тексту */
.page-title,
.card .h3,
.card h3,
.card h4 {
  color: var(--text-main) !important;
}

/* =========================
   THEME BUTTONS
   ========================= */

.btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #020617 !important;
  font-weight: 500;
}

/* Hover / active стани для кращого відгуку */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  filter: brightness(1.05);
  color: #020617 !important;
}

/* Неон-тема: легкий сяючий ефект */
body.theme-neonflux .btn-primary {
  box-shadow: 0 0 12px rgba(56,248,255,0.7);
}

/* =========================
   THEME PAGINATION
   ========================= */

.pagination .page-link {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-soft) !important;
  font-size: 0.85rem;
}

.pagination .page-link:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--accent) !important;
}

/* Активна сторінка */
.page-item.active .page-link {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #020617 !important;
}

/* Disabled – трохи приглушені */
.page-item.disabled .page-link {
  opacity: 0.5;
}

/* Неон-тема: glow для активної сторінки */
body.theme-neonflux .page-item.active .page-link {
  box-shadow: 0 0 16px rgba(56,248,255,0.8);
}

/* =========================
   GROUPS BADGES & BUTTON
   ========================= */
.groups-badge-active {
  background: var(--accent) !important;
  color: var(--text-on-accent) !important;
}

.groups-badge-disabled {
  background: var(--border-soft) !important;
  color: var(--text-muted) !important;
}

.groups-badge-color {
  color: var(--text-on-accent) !important;
}

.groups-btn-accent {
  background: var(--accent) !important;
  color: var(--text-on-accent) !important;
  border: 1px solid var(--border-soft) !important;
}