/* Modern theme: glass cards, gradients, smooth effects, dark mode */
:root {
  --brand: #6b5bff;
  --brand-600: #5848ff;
  --accent: #22d3ee;
  --bg: #0f172a;
  --bg-soft: #111827;
  --surface: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
}

/* Light mode vars */
.theme-light {
  --bg: #f6f7fb;
  --bg-soft: #ffffff;
  --surface: #ffffff;
  --border: #eef0f3;
  --text: #0f172a;
  --muted: #6b7280;
  --shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
}

html, body {
  height: 100%;
}
body {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(107,91,255,0.18), transparent),
              radial-gradient(1000px 500px at 90% 10%, rgba(34,211,238,0.15), transparent),
              var(--bg);
  color: var(--text);
  transition: background 400ms ease, color 200ms ease;
}

.glass-card,
.main-content .card,
.login-container {
  background: var(--surface);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  border: none;
  box-shadow: 0 8px 16px rgba(107,91,255,0.25);
  transition: transform 120ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 22px rgba(107,91,255,0.35);
}
.btn-primary:active {
  transform: translateY(0);
}

.badge.bg-success { background: linear-gradient(135deg, #10b981, #34d399) !important; }
.badge.bg-warning { background: linear-gradient(135deg, #f59e0b, #fbbf24) !important; color: #111827; }
.badge.bg-danger { background: linear-gradient(135deg, #ef4444, #f87171) !important; }

table.table th {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--border) !important;
}
table.table td { vertical-align: middle; }

.sidebar {
  background: linear-gradient(180deg, #0b1020 0%, #10192e 100%);
  border-right: 1px solid var(--border);
}
.theme-light .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f9 100%);
}
.sidebar .nav-link { color: var(--muted); transition: color 150ms ease, background 150ms ease; }
.sidebar .nav { padding: 8px; }
.sidebar .nav-link { border-radius: 12px; margin: 2px 6px; display: flex; align-items: center; }
.sidebar .nav-link .bi { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,0.08); margin-right: 10px; }
.theme-light .sidebar .nav-link .bi { background: rgba(15,23,42,0.06); }
.sidebar .nav-link:hover { transform: translateX(2px); }
.theme-light .sidebar .nav-link { color: #374151; }
.theme-light .sidebar h4 { color: #0f172a; }
.theme-light .sidebar .nav-link .bi { color: #374151; opacity: .95; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { color: var(--text); background: rgba(255,255,255,0.06); }
.theme-light .sidebar .nav-link:hover, .theme-light .sidebar .nav-link.active { background: rgba(15,23,42,0.06); }
.theme-light .sidebar .nav-link.active,
.theme-light .sidebar .nav-link:hover { color: #0f172a !important; }
.theme-light .sidebar .nav-link.active .bi,
.theme-light .sidebar .nav-link:hover .bi { color: #0f172a !important; }
.sidebar h4 { font-weight: 700; color: var(--text); }
.sidebar .p-3 { border-bottom: 1px solid var(--border); }

/* Sidebar edge separation */
.sidebar { box-shadow: 6px 0 24px rgba(2,6,23,0.12); }

/* Subtle hover for rows */
table.table tbody tr { transition: background 160ms ease; }
table.table tbody tr:hover { background: rgba(255,255,255,0.04); }

/* Headings accent underline */
h2, .card-title { position: relative; }
h2::after, .card-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -8px;
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: 999px;
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

/* Typography */
h1, h2, h3, h4, h5, h6 { color: var(--text); letter-spacing: -.01em; }
p { color: var(--muted); }
.card-title, .modal-title { color: var(--text) !important; }
.text-body { color: var(--text) !important; }
.text-secondary, .form-text, small { color: var(--muted) !important; }
::placeholder { color: var(--muted); opacity: .8; }

/* Forms */
.form-control, .form-select, .form-check-input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(107,91,255,0.25);
}
.form-label { color: var(--muted); }

/* Links inside content */
.card a:not(.btn), .main-content a:not(.btn) { color: var(--text); text-decoration-color: rgba(255,255,255,0.3); }
.theme-light .card a:not(.btn), .theme-light .main-content a:not(.btn) { text-decoration-color: rgba(15,23,42,0.3); }

/* Alerts */
.alert { border-radius: 12px; border: 1px solid var(--border); }
.alert-success { background: rgba(16,185,129,0.12); color: #10b981; }
.alert-danger { background: rgba(239,68,68,0.12); color: #f87171; }

/* Modals */
.modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px; }
.btn-close { filter: invert(0.9); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.card-header { background: var(--surface) !important; color: var(--text); border-bottom: 1px solid var(--border) !important; }
.card-body { background: transparent !important; color: var(--text); padding: 1.25rem 1.5rem; }
/* Dark: make card-body slightly elevated, softer */
html:not(.theme-light) .card-body {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--border);
}
/* Light: keep it clean and subtle */
.theme-light .card-body { background: transparent; }
/* Card-body typography rhythm */
.card-body > * + * { margin-top: .75rem; }
.card-body h5, .card-body h6 { margin-top: 0; }
.card-body .form-label { margin-bottom: .35rem; }
.card-body .btn { margin-top: .25rem; }
/* Card-body text readability */
.card-body, .card-body p, .card-body li, .card-body td, .card-body th, .card-body label {
  color: var(--text) !important;
  line-height: 1.6;
}
.card-body .text-muted, .card-body small, .card-body .stats-label { color: var(--muted) !important; }
.card-body a:not(.btn) { color: var(--text); text-decoration-color: rgba(255,255,255,0.3); }
.theme-light .card-body a:not(.btn) { text-decoration-color: rgba(15,23,42,0.3); }

/* Tables */
.table { color: var(--text); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.025); }
.table-hover tbody tr:hover { background: rgba(255,255,255,0.05); }
.table, .table-responsive { background: transparent; }
.table thead { background: transparent; }
.card .table, .card .table thead, .card .table tbody, .card .table tr, .card .table td, .card .table th { background: transparent !important; }
/* Dark: soften zebra rows inside cards */
html:not(.theme-light) .card .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.02) !important; }

/* Muted text should follow theme */
.text-muted { color: var(--muted) !important; }

/* Nav and sidebar */
.nav-link { transition: color 150ms ease, background 150ms ease; }
.nav-link .bi { opacity: .9; }

/* Buttons secondary */
.btn-secondary { background: #384152; border: 1px solid #485167; color: #e5e7eb; }
.btn-secondary:hover { background: #46516a; }
.btn-danger { background: linear-gradient(135deg, #ef4444, #f87171); border: none; }

/* Utilities */
.shadow-soft { box-shadow: var(--shadow) !important; }
.rounded-2xl { border-radius: 16px !important; }
.text-muted-2 { color: var(--muted) !important; }
.bg-surface { background: var(--surface) !important; }

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .35s ease both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Dark-mode overrides for hardcoded light backgrounds */
html:not(.theme-light) .stat-card { 
  background: var(--surface) !important; 
  color: var(--text) !important; 
  border: 1px solid var(--border) !important; 
}
html:not(.theme-light) .csv-template {
  background: var(--surface) !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
}
html:not(.theme-light) .stats-table th { 
  background: var(--surface) !important; 
  color: var(--muted) !important;
}
html:not(.theme-light) .bg-white { 
  background: var(--surface) !important; 
}
html:not(.theme-light) .text-dark { 
  color: var(--text) !important; 
}
html:not(.theme-light) .bg-light { background: var(--surface) !important; }
html:not(.theme-light) .table-responsive { background: transparent !important; }
html:not(.theme-light) .table thead th { background: var(--surface) !important; }

/* Scrollbar inside responsive tables */
.table-responsive::-webkit-scrollbar { height: 10px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.35); border-radius: 999px; }
html:not(.theme-light) .table-responsive::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.25); }

/* Animate stat cards globally for nicer feel */
.stat-card { animation: fadeUp .35s ease both; }
.sidebar .nav-link.active { position: relative; }
.sidebar .nav-link.active::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
  border-radius: 0 3px 3px 0;
}