/* ════════════════════════════════════════════════════════════════
   Dark Mode Theme for IndiaExamsHub
   Add this to your style.css or link it separately
   ═════════════════════════════════════════════════════════════════ */

/* Dark Theme Colors */
:root[data-theme="dark"] {
  --primary:              #94A3B8;   /* lighter purple for visibility */
  --primary-light:        #CBD5E1;
  --primary-dark:         #64748B;
  --accent:               #14B8A6;   /* stays vibrant in dark */
  --accent-light:         #2DD4BF;
  --success:              #10b981;   /* adjusted green */
  --danger:               #ef4444;   /* adjusted red */
  --light-bg:             #0f172a;   /* dark navy */
  --card-bg:              #1e293b;   /* slightly lighter */
  --muted-purple:         #1E293B;   /* dark purple */
  --muted-orange:         #134E4A;   /* dark orange */
  --dark:                 #f1f5f9;   /* light text */
  --text:                 #e2e8f0;   /* light gray text */
  --gray:                 #94a3b8;   /* medium gray */
  --border:               #334155;   /* dark slate border */
  --border-color:         #334155;
  --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:            0 6px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg:            0 16px 48px rgba(0, 0, 0, 0.6);
  background:             #0f172a;   /* html bg matches body — no flash */
}

/* Scrollbar styling for dark mode */
:root[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--card-bg);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Light scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Smooth transition for theme switch */
* {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Don't animate these */
img, video, canvas, svg, button:hover, a:hover {
  transition: none;
}

/* Dark mode specific overrides */
:root[data-theme="dark"] .navbar {
  background: var(--card-bg);
  border-bottom-color: var(--border);
}

:root[data-theme="dark"] .logo {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:root[data-theme="dark"] .nav-links a:hover {
  background: var(--muted-purple);
  color: var(--primary-light);
}

:root[data-theme="dark"] .nav-links a.active {
  background: var(--primary);
  color: var(--light-bg);
}

:root[data-theme="dark"] .btn {
  transition: all 0.2s ease;
}

:root[data-theme="dark"] .btn-primary {
  background: var(--primary);
  color: var(--light-bg);
  border: none;
}

:root[data-theme="dark"] .btn-primary:hover {
  background: var(--primary-light);
  color: var(--light-bg);
}

:root[data-theme="dark"] .btn-outline {
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] .btn-outline:hover {
  background: var(--muted-purple);
  border-color: var(--primary);
  color: var(--primary-light);
}

:root[data-theme="dark"] .btn-outline-dark {
  border-color: var(--primary);
  color: var(--primary-light);
}

:root[data-theme="dark"] .btn-outline-dark:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #ffffff;
}

:root[data-theme="dark"] .card {
  background: var(--card-bg);
  border-color: var(--border);
}

:root[data-theme="dark"] .card-header {
  background: linear-gradient(135deg, var(--muted-purple), var(--card-bg));
}

:root[data-theme="dark"] .section-head {
  color: var(--dark);
}

:root[data-theme="dark"] .filter-tab {
  border-color: var(--border);
  color: var(--text);
  background: var(--card-bg);
}

:root[data-theme="dark"] .filter-tab:hover {
  background: var(--muted-purple);
  border-color: var(--primary);
  color: var(--primary-light);
}

:root[data-theme="dark"] .filter-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--light-bg);
}

:root[data-theme="dark"] .level-btn {
  border-color: var(--border);
  color: var(--text);
  background: var(--card-bg);
}
:root[data-theme="dark"] .level-btn:hover {
  background: var(--muted-purple);
  border-color: var(--primary);
  color: var(--primary-light);
}
:root[data-theme="dark"] .level-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--light-bg);
}
:root[data-theme="dark"] .filter-group-label { color: var(--gray); }

/* Official source pill — in dark mode primary is light lavender, so use dark text */
:root[data-theme="dark"] .trust-link {
  background: var(--primary);
  color: #1a1333;
}
:root[data-theme="dark"] .trust-link:hover {
  background: var(--primary-light);
  color: #1a1333;
}

:root[data-theme="dark"] .search-wrap input {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] .search-wrap input::placeholder {
  color: var(--gray);
}

:root[data-theme="dark"] .search-wrap input:focus {
  border-color: var(--primary);
  background: var(--card-bg);
}

:root[data-theme="dark"] footer,
:root[data-theme="dark"] .footer {
  background: var(--card-bg);
  border-top-color: var(--border);
}

:root[data-theme="dark"] .footer-bottom {
  border-top-color: var(--border);
}

:root[data-theme="dark"] .footer-grid {
  border-bottom-color: rgba(148, 163, 184, 0.18);
}

:root[data-theme="dark"] .footer-brand p,
:root[data-theme="dark"] .footer-bottom,
:root[data-theme="dark"] .footer-subscribe input::placeholder {
  color: rgba(226, 232, 240, 0.68);
}

:root[data-theme="dark"] .footer-col h4 {
  color: var(--dark);
}

:root[data-theme="dark"] .footer-col a {
  color: rgba(196, 181, 253, 0.92);
}

:root[data-theme="dark"] .footer-col a:hover {
  color: white;
}

:root[data-theme="dark"] .footer-subscribe input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.2);
  color: var(--text);
}

/* Form inputs in dark mode */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.1);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: var(--gray);
}

/* Tables in dark mode */
:root[data-theme="dark"] .comparison-table {
  background: var(--card-bg);
}

:root[data-theme="dark"] .comparison-table th {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--light-bg);
}

:root[data-theme="dark"] .comparison-table td {
  border-bottom-color: var(--border);
}

:root[data-theme="dark"] .comparison-table tr:hover {
  background: var(--muted-purple);
}

/* Dashboard cards in dark mode */
:root[data-theme="dark"] .dashboard-card {
  background: var(--card-bg);
  border-color: var(--border);
}

:root[data-theme="dark"] .quick-stat {
  background: var(--muted-purple);
  border-color: var(--border);
}

:root[data-theme="dark"] .timetable-item,
:root[data-theme="dark"] .assignment-item,
:root[data-theme="dark"] .exam-item {
  background: var(--muted-purple);
  border-color: var(--border);
}

/* Modals and dialogs */
:root[data-theme="dark"] .auth-container > div {
  background: var(--card-bg);
  border-color: var(--border);
}

:root[data-theme="dark"] .profile-action-card {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] .profile-action-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 32px rgba(148, 163, 184, 0.15);
}

/* Empty states */
:root[data-theme="dark"] .empty-state {
  color: var(--gray);
}

/* Notice banners */
:root[data-theme="dark"] .notice-banner {
  background: rgba(148, 163, 184, 0.1);
  border-left-color: var(--primary);
  color: var(--text);
}

:root[data-theme="dark"] .tips-card {
  background: var(--muted-purple);
  border-left-color: var(--primary);
  color: var(--text);
}

/* Job cards */
:root[data-theme="dark"] .job-card {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] .job-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 24px rgba(148, 163, 184, 0.15);
}

/* Paper cards */
:root[data-theme="dark"] .paper-card {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] .paper-title,
:root[data-theme="dark"] .job-title,
:root[data-theme="dark"] .library-item-title,
:root[data-theme="dark"] .tracked-exam-title,
:root[data-theme="dark"] .recommendation-head h3,
:root[data-theme="dark"] .resource-name {
  color: var(--dark);
}

:root[data-theme="dark"] .paper-meta,
:root[data-theme="dark"] .job-meta,
:root[data-theme="dark"] .library-item-meta,
:root[data-theme="dark"] .tracked-exam-meta,
:root[data-theme="dark"] .tracked-exam-dates,
:root[data-theme="dark"] .tracked-exam-footer,
:root[data-theme="dark"] .card-subtitle,
:root[data-theme="dark"] .card-detail-label,
:root[data-theme="dark"] .recommendation-head p,
:root[data-theme="dark"] .recommendation-note,
:root[data-theme="dark"] .resource-category,
:root[data-theme="dark"] .resource-meta-info,
:root[data-theme="dark"] .resource-footer-info,
:root[data-theme="dark"] .empty-resources,
:root[data-theme="dark"] .section-head p {
  color: rgba(226, 232, 240, 0.74);
}

:root[data-theme="dark"] .recommendation-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 27, 75, 0.9));
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .recommendation-icon,
:root[data-theme="dark"] .paper-icon,
:root[data-theme="dark"] .library-item-icon {
  background: rgba(148, 163, 184, 0.12);
  color: var(--primary-light);
}

:root[data-theme="dark"] .trust-pill {
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
}

:root[data-theme="dark"] .trust-link {
  background: var(--primary);
  color: #1a1333;
}
:root[data-theme="dark"] .trust-link:hover {
  background: var(--primary-light);
  color: #1a1333;
}

:root[data-theme="dark"] .resource-filter-btn,
:root[data-theme="dark"] .resource-cost-btn,
:root[data-theme="dark"] .resource-card {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] .resource-filter-btn:hover,
:root[data-theme="dark"] .resource-cost-btn:hover {
  border-color: var(--primary);
  color: var(--primary-light);
}

:root[data-theme="dark"] .resource-filter-btn.active,
:root[data-theme="dark"] .resource-cost-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--light-bg);
}

:root[data-theme="dark"] .resource-type-badge {
  background: rgba(20, 184, 166, 0.16);
  color: #5EEAD4;
}

:root[data-theme="dark"] .tag {
  background: rgba(148, 163, 184, 0.14);
  color: var(--primary-light);
}

:root[data-theme="dark"] .tag.popular {
  background: rgba(20, 184, 166, 0.16);
  color: #5EEAD4;
}

:root[data-theme="dark"] .resource-footer {
  border-top-color: var(--border);
}

:root[data-theme="dark"] .free-badge {
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
}

/* Result table */
:root[data-theme="dark"] .results-table-wrap {
  box-shadow: 0 0 0 1px var(--border);
}

:root[data-theme="dark"] .results-table {
  background: var(--card-bg);
}

:root[data-theme="dark"] .results-table thead {
  background: var(--muted-purple);
  border-bottom-color: var(--border);
}

:root[data-theme="dark"] .results-table tbody tr:hover {
  background: var(--muted-purple);
}

/* Theme toggle button */
.theme-toggle {
  background: var(--muted-purple) !important;
  border: 2px solid var(--border) !important;
  color: var(--text) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 1.1rem !important;
  transition: all 0.3s !important;
}

.theme-toggle:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--light-bg) !important;
}

/* Countdown banner dark mode */
:root[data-theme="dark"] .countdown-banner {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--light-bg);
}

/* Make sure all text is readable */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
  color: var(--dark);
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] a,
:root[data-theme="dark"] li,
:root[data-theme="dark"] span {
  color: var(--text);
}

:root[data-theme="dark"] a {
  color: var(--primary-light);
}

:root[data-theme="dark"] a:hover {
  color: var(--primary);
}

/* Hero section in dark mode */
:root[data-theme="dark"] .hero {
  background: linear-gradient(135deg, var(--light-bg), var(--muted-purple));
}

:root[data-theme="dark"] .hero-orb-orange {
  background: rgba(20, 184, 166, 0.1);
}

/* Ensure good contrast everywhere */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* ── Results status badges ── */
:root[data-theme="dark"] .status-live     { background: rgba(22, 101, 52, 0.35);  color: #86efac; }
:root[data-theme="dark"] .status-expected { background: rgba(146, 64, 14, 0.35);  color: #fcd34d; }
:root[data-theme="dark"] .status-announced{ background: rgba(12, 74, 110, 0.35);  color: #7dd3fc; }

/* ── Exam card status badges (override blanket span rule) ── */
:root[data-theme="dark"] span.status-open     { background: #dcfce7; color: #14532d; }
:root[data-theme="dark"] span.status-ongoing  { background: #fef9c3; color: #78350f; }
:root[data-theme="dark"] span.status-results  { background: #fee2e2; color: #7f1d1d; }
:root[data-theme="dark"] span.status-upcoming { background: #e0e7ff; color: #1E293B; }

/* ── Jobs page tags ── */
:root[data-theme="dark"] .tag-salary    { background: rgba(22, 101, 52, 0.3);  color: #86efac; }
:root[data-theme="dark"] .tag-deadline  { background: rgba(153, 27, 27, 0.3);  color: #fca5a5; }
:root[data-theme="dark"] .tag-eligibility{ background: rgba(74, 85, 104,0.25);   color: #CBD5E1; }
:root[data-theme="dark"] .tag-posted    { background: rgba(12, 74, 110, 0.3);  color: #7dd3fc; }

/* ── Jobs sector select ── */
:root[data-theme="dark"] #sectorFilter  { background: var(--card-bg) !important; color: var(--text) !important; }

/* ── Compare exam checkboxes ── */
:root[data-theme="dark"] .compare-exam-checkbox { background: var(--card-bg); border-color: var(--border); }
:root[data-theme="dark"] .exam-label             { color: var(--text); }

/* ── Mock exam nav dropdown ── */
:root[data-theme="dark"] .nav-dropdown-btn { color: var(--text); }
:root[data-theme="dark"] .nav-dropdown-btn:hover,
:root[data-theme="dark"] .nav-dropdown:hover .nav-dropdown-btn,
:root[data-theme="dark"] .nav-dropdown.open .nav-dropdown-btn { background: var(--muted-purple); color: var(--primary); }
:root[data-theme="dark"] .nav-dropdown-menu { background: #1E293B; border-color: var(--border); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .nav-dropdown-item { color: var(--text) !important; }
:root[data-theme="dark"] .nav-dropdown-item:hover { background: var(--muted-purple) !important; color: #CBD5E1 !important; }
:root[data-theme="dark"] .dropdown-exam-name { color: var(--text); }
:root[data-theme="dark"] .nav-dropdown-item:hover .dropdown-exam-name { color: #CBD5E1; }
:root[data-theme="dark"] .dropdown-exam-sub { color: var(--text-muted); }

/* ── Profile dropdown ── */
:root[data-theme="dark"] #profileDropdown > div  { background: var(--card-bg); border-color: var(--border); }
:root[data-theme="dark"] .dropdown-header        { background: linear-gradient(135deg, #1E293B, #334155); color: #CBD5E1; border-bottom-color: var(--border); }
:root[data-theme="dark"] .dropdown-item          { color: var(--text); }
:root[data-theme="dark"] .dropdown-item:hover    { background: var(--muted-purple); color: var(--primary); }
:root[data-theme="dark"] .dropdown-signout       { color: #fca5a5; border-top-color: var(--border); }
:root[data-theme="dark"] .dropdown-signout:hover { background: rgba(153, 27, 27, 0.25); }

/* ── Mobile hamburger dropdown ── */
@media (max-width: 1024px) {
  :root[data-theme="dark"] .nav-links.active {
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
  :root[data-theme="dark"] .nav-links.active a {
    color: var(--text);
  }
  :root[data-theme="dark"] .nav-links.active a:hover,
  :root[data-theme="dark"] .nav-links.active a.active {
    background: var(--muted-purple);
    color: var(--primary);
  }
  :root[data-theme="dark"] .mobile-nav-sep { background: var(--border); }
  :root[data-theme="dark"] .mobile-nav-pheader { color: var(--text-muted); }
  :root[data-theme="dark"] .mobile-nav-pitem { color: var(--text); }
  :root[data-theme="dark"] .mobile-nav-pitem:hover { background: var(--muted-purple); }
  :root[data-theme="dark"] .mobile-nav-psignout { color: #ef9a9a; }
  :root[data-theme="dark"] .mobile-nav-psignout:hover { background: rgba(229, 57, 53, 0.15); }
  :root[data-theme="dark"] .mobile-nav-signin {
    background: var(--muted-purple);
    border-color: var(--border);
    color: var(--primary);
  }
}