/*
 * Adrena Exam Volta — Global Stylesheet
 * Theme-aware: works with both [data-theme="dark"] and [data-theme="light"]
 * All colors use CSS variables — never hardcode rgba/hex here
 */

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === SELECTION === */
::selection {
  background: rgba(37,162,90,0.35);
  color: var(--text-primary);
}

/* === LINKS === */
a { color: inherit; transition: color 0.2s; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* =====================================================
   THEME-AWARE COMPONENT OVERRIDES
   These fix the hardcoded rgba values in templates
   ===================================================== */

/* Cards */
.dash-card,
.result-card,
.form-card,
.pin-card,
.pin-gen-card,
.prev-result-card,
.answer-panel,
.question-card,
.side-panel .nav-link-item,
.postutme_dashboard .subject-label {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Text inside cards */
.card-desc,
.card-title,
.mode-name,
.school-name,
.panel-subject-name,
.question-text,
.option-label,
.subject-label,
.nav-link-item {
  color: var(--text-primary) !important;
}

.card-desc,
.exam-user,
.q-number,
.bank-row .blabel,
.summary-row,
.prev-score-label,
.section-title,
.panel-title,
.divider-label {
  color: var(--text-secondary) !important;
}

/* Inputs (theme-aware) */
.form-group input,
.pay-select,
.search-wrap input,
.notify-form input {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.form-group input::placeholder,
.pay-select::placeholder,
.search-wrap input::placeholder {
  color: var(--text-muted) !important;
}

/* Option labels in exam */
.option-label {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.option-label:hover {
  background: var(--input-focus-bg) !important;
  border-color: var(--school-light) !important;
}

/* Subject tabs */
.subject-tab {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.subject-tab:hover {
  color: var(--text-primary) !important;
}

/* Answer grid dots */
.ans-dot {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* Social links */
.social-link {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* Contact bar */
.contact-bar {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

/* Marquee bar */
.marquee-bar {
  background: var(--footer-bg) !important;
  border-color: var(--border) !important;
}

/* Exam topbar */
.exam-topbar {
  background: var(--topbar-bg) !important;
  border-color: var(--border) !important;
}

/* Bank details */
.bank-details {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
}

.bank-row {
  border-color: var(--border) !important;
}

.bank-row .bvalue {
  color: var(--text-primary) !important;
}

/* Countdown units */
.cd-unit {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
}

/* Stat cards */
.stat-card {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
}

.stat-label { color: var(--text-muted) !important; }

/* Typewriter box */
.typewriter-box {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
}

.typewriter-box p { color: var(--text-secondary) !important; }
#tw-text { color: var(--text-primary) !important; }

/* Rule/info banners */
.rule-banner,
.warn-banner,
.info-banner.gold {
  background: var(--bg-input) !important;
}

/* PIN dots */
.pin-dot { background: var(--bg-input) !important; }

/* Gen PIN hint */
.gen-pin-hint {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

/* Previous result card */
.prev-result-card {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
}

/* Page headers */
.page-header h1,
.dash-greeting h1,
.hero-title {
  color: var(--text-primary) !important;
}

.page-header p,
.dash-greeting p,
.hero p {
  color: var(--text-secondary) !important;
}

/* Welcome side panel */
.nav-link-item {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* Mode option (generate pin) */
.mode-label {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
}

/* =====================================================
   LIGHT MODE SPECIFIC OVERRIDES
   Force things that are still wrong in light mode
   ===================================================== */

[data-theme="light"] .flash-success { background: rgba(26,107,60,0.12) !important; color: #0a4a20 !important; border-color: rgba(26,107,60,0.3) !important; }
[data-theme="light"] .flash-error,
[data-theme="light"] .flash-danger   { background: rgba(180,30,30,0.1) !important; color: #7a0000 !important; }
[data-theme="light"] .flash-info     { background: rgba(30,80,160,0.1) !important; color: #0d3b80 !important; }
[data-theme="light"] .flash-warning  { background: rgba(140,100,10,0.1) !important; color: #6b4a00 !important; }

[data-theme="light"] .timer-pill     { background: rgba(180,30,30,0.08) !important; color: #b00 !important; }
[data-theme="light"] .exam-topbar    { background: rgba(255,255,255,0.96) !important; }

[data-theme="light"] .btn-secondary  { color: var(--text-primary) !important; }

[data-theme="light"] .marquee-content { color: var(--text-secondary) !important; }

[data-theme="light"] .q-subject-tag  { background: rgba(26,107,60,0.1) !important; }
[data-theme="light"] .live-badge     { background: rgba(26,107,60,0.1) !important; }

[data-theme="light"] ::selection     { color: #0a3a1a; }

[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* =====================================================
   UTILITY CLASSES
   ===================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.text-center { text-align: center; }
.text-muted  { color: var(--text-muted) !important; }

/* === BADGES === */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
}

.badge-green { background: rgba(26,107,60,0.2); color: var(--school-glow); border: 1px solid rgba(46,204,113,0.25); }
.badge-gold  { background: rgba(201,168,76,0.15); color: var(--gold-light); border: 1px solid rgba(201,168,76,0.3); }
.badge-red   { background: rgba(180,30,30,0.18); color: #ff8a8a; border: 1px solid rgba(255,80,80,0.25); }

[data-theme="light"] .badge-green { background: rgba(26,107,60,0.1); color: var(--school-primary); }
[data-theme="light"] .badge-gold  { background: rgba(140,100,10,0.1); color: #7a5500; }
[data-theme="light"] .badge-red   { background: rgba(180,30,30,0.1); color: #900; }

/* === DIVIDER === */
.divider { height: 1px; background: var(--border); margin: 24px 0; }

/* === SPINNER === */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--school-glow);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === EMPTY STATE === */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px 24px;
  text-align: center; color: var(--text-muted); gap: 12px;
}
.empty-state-icon  { font-size: 2.5rem; }
.empty-state-title { font-size: 1rem; font-weight: 600; color: var(--text-secondary); }
.empty-state-desc  { font-size: 0.85rem; }

/* === DATA TABLE === */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.data-table th {
  text-align: left; padding: 10px 14px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary); vertical-align: middle;
}

.data-table tr:hover td {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* === RESULT / SCORE CARDS === */
.result-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  transition: border-color 0.22s, background 0.3s;
}

.result-card:hover { border-color: var(--school-light); }

.score-circle {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(26,107,60,0.15);
  border: 2px solid rgba(37,162,90,0.4);
  display: flex; align-items: center;
  justify-content: center; flex-direction: column;
}

.score-circle .score-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem; font-weight: 700;
  color: var(--school-glow); line-height: 1;
}

.score-circle .score-pct {
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

[data-theme="light"] .score-circle { background: rgba(26,107,60,0.08); }

/* === ANIMATIONS === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-fade-up   { animation: fadeUp 0.5s ease both; }
.animate-delay-1   { animation-delay: 0.1s; }
.animate-delay-2   { animation-delay: 0.2s; }
.animate-delay-3   { animation-delay: 0.3s; }

/* === RESPONSIVE HELPERS === */
@media (max-width: 768px) { .hide-mobile  { display: none !important; } }
@media (min-width: 769px) { .hide-desktop { display: none !important; } }