/* ===================================================
   JOBSHUB — LIGHT THEME OVERRIDE
   Loaded last on every page so it can override both the
   shared theme.css and each page's own stylesheet.
   Only active when <html data-theme="light">.
=================================================== */

[data-theme="light"] {
  color-scheme: light;
}

/* ---------- BASE ---------- */
[data-theme="light"] body {
  background: #f3f6f4 !important;
  color: #1a1f1c !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] small,
[data-theme="light"] li,
[data-theme="light"] label,
[data-theme="light"] strong,
[data-theme="light"] td,
[data-theme="light"] th {
  color: #1a1f1c;
}

[data-theme="light"] a {
  color: #15803d;
}

/* ---------- HEADER / FOOTER / NAV ---------- */
[data-theme="light"] .header,
[data-theme="light"] .footer,
[data-theme="light"] .navbar {
  background: #ffffff !important;
  border-color: #d1fae5 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .nav-menu {
  background: #ffffff !important;
}

[data-theme="light"] .nav-link,
[data-theme="light"] .logo,
[data-theme="light"] .footer-col h2,
[data-theme="light"] .footer-col h3,
[data-theme="light"] .footer-col p,
[data-theme="light"] .footer-col li,
[data-theme="light"] .footer-col a,
[data-theme="light"] .footer-bottom p {
  color: #1a1f1c !important;
}

[data-theme="light"] .footer-bottom {
  border-top: 1px solid #e5e7eb;
}

/* ---------- CARDS / BOXES (shared across the whole site) ---------- */
[data-theme="light"] .job-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .section-box,
[data-theme="light"] .welcome-box,
[data-theme="light"] .resume-card,
[data-theme="light"] .alert-card,
[data-theme="light"] .chart-card,
[data-theme="light"] .auth-container,
[data-theme="light"] .admin-box,
[data-theme="light"] .activity-box,
[data-theme="light"] .activity-card,
[data-theme="light"] .app-card,
[data-theme="light"] .application-card,
[data-theme="light"] .apply-box,
[data-theme="light"] .category-card,
[data-theme="light"] .company-card,
[data-theme="light"] .contact-form-box,
[data-theme="light"] .dashboard-card,
[data-theme="light"] .dashboard-empty-card,
[data-theme="light"] .empty-state,
[data-theme="light"] .delete-box,
[data-theme="light"] .detail-card,
[data-theme="light"] .empty-box,
[data-theme="light"] .forgot-box,
[data-theme="light"] .hero-card,
[data-theme="light"] .info-card,
[data-theme="light"] .job-admin-card,
[data-theme="light"] .job-detail-card,
[data-theme="light"] .loader-box,
[data-theme="light"] .message-card,
[data-theme="light"] .newsletter-box,
[data-theme="light"] .notification-box,
[data-theme="light"] .overview-card,
[data-theme="light"] .profile-box,
[data-theme="light"] .profile-top-card,
[data-theme="light"] .search-box,
[data-theme="light"] .sidebar-card,
[data-theme="light"] .stat-box,
[data-theme="light"] .tag-box,
[data-theme="light"] .team-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .why-card,
[data-theme="light"] .deadline-card,
[data-theme="light"] .contact-info,
[data-theme="light"] .job-list,
[data-theme="light"] .faq-item,
[data-theme="light"] .modal-box,
[data-theme="light"] .settings-panel,
[data-theme="light"] .settings-drawer,
[data-theme="light"] .settings-content,
[data-theme="light"] .job-card-admin,
[data-theme="light"] .activity-item,
[data-theme="light"] .profile-dropdown,
[data-theme="light"] .dropdown-header,
[data-theme="light"] .affiliate-card {
  background: #ffffff !important;
  border: 1px solid #e2e8e4 !important;
  color: #1a1f1c;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .job-card *,
[data-theme="light"] .stat-card *,
[data-theme="light"] .section-box *,
[data-theme="light"] .welcome-box *,
[data-theme="light"] .resume-card *,
[data-theme="light"] .alert-card *,
[data-theme="light"] .chart-card *,
[data-theme="light"] .auth-container *,
[data-theme="light"] .admin-box *,
[data-theme="light"] .activity-box *,
[data-theme="light"] .activity-card *,
[data-theme="light"] .app-card *,
[data-theme="light"] .application-card *,
[data-theme="light"] .apply-box *,
[data-theme="light"] .category-card *,
[data-theme="light"] .company-card *,
[data-theme="light"] .contact-form-box *,
[data-theme="light"] .dashboard-card *,
[data-theme="light"] .dashboard-empty-card *,
[data-theme="light"] .empty-state *,
[data-theme="light"] .delete-box *,
[data-theme="light"] .detail-card *,
[data-theme="light"] .empty-box *,
[data-theme="light"] .forgot-box *,
[data-theme="light"] .hero-card *,
[data-theme="light"] .info-card *,
[data-theme="light"] .job-admin-card *,
[data-theme="light"] .job-detail-card *,
[data-theme="light"] .loader-box *,
[data-theme="light"] .message-card *,
[data-theme="light"] .newsletter-box *,
[data-theme="light"] .notification-box *,
[data-theme="light"] .overview-card *,
[data-theme="light"] .profile-box *,
[data-theme="light"] .profile-top-card *,
[data-theme="light"] .search-box *,
[data-theme="light"] .sidebar-card *,
[data-theme="light"] .stat-box *,
[data-theme="light"] .tag-box *,
[data-theme="light"] .team-card *,
[data-theme="light"] .testimonial-card *,
[data-theme="light"] .why-card *,
[data-theme="light"] .deadline-card *,
[data-theme="light"] .contact-info *,
[data-theme="light"] .job-list *,
[data-theme="light"] .faq-item *,
[data-theme="light"] .modal-box *,
[data-theme="light"] .settings-panel *,
[data-theme="light"] .settings-drawer *,
[data-theme="light"] .settings-content *,
[data-theme="light"] .job-card-admin *,
[data-theme="light"] .activity-item *,
[data-theme="light"] .profile-dropdown *,
[data-theme="light"] .dropdown-header *,
[data-theme="light"] .affiliate-card-text * {
  color: #1a1f1c;
}

[data-theme="light"] .welcome-badge,
[data-theme="light"] .welcome-badge * {
  color: #ffffff !important;
}

/* Buttons/status pills/links inside cards keep their own
   (usually colored-background + white text) styling. Deliberately
   NOT including a blanket "a.btn" here — that used to force white
   text onto outline-style buttons too (which have a light
   background in this theme), making their text invisible. */
[data-theme="light"] .job-card .btn.btn-primary,
[data-theme="light"] .job-card .job-badge,
[data-theme="light"] .activity-card .activity-icon,
[data-theme="light"] .dashboard-card .btn.btn-primary,
[data-theme="light"] .app-card button,
[data-theme="light"] .application-card .status-badge,
[data-theme="light"] .btn-primary,
[data-theme="light"] a.btn-primary,
[data-theme="light"] .delete-job,
[data-theme="light"] .job-badge,
[data-theme="light"] .job-badge * {
  color: #ffffff !important;
}

/* Secondary/muted text that was light-gray-on-dark needs to stay
   readable on white too */
[data-theme="light"] .job-department,
[data-theme="light"] .job-deadline,
[data-theme="light"] .company-name,
[data-theme="light"] .team-role,
[data-theme="light"] .team-desc,
[data-theme="light"] .legal-updated,
[data-theme="light"] .browse-subtitle {
  color: #4b5563 !important;
}

/* ---------- FORMS ---------- */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #ffffff !important;
  color: #1a1f1c !important;
  border: 1px solid #cbd5c9 !important;
}

/* Dropdowns stay black background in both themes, per request */
[data-theme="light"] select {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #16a34a55 !important;
}

[data-theme="light"] select option {
  background: #000000 !important;
  color: #ffffff !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #6b7280 !important;
}

/* ---------- BUTTONS ---------- */
[data-theme="light"] .btn-outline {
  border: 1px solid #15803d !important;
  color: #15803d !important;
  background: transparent !important;
}

[data-theme="light"] .save-btn,
[data-theme="light"] .edit-job,
[data-theme="light"] .btn-outline {
  background: #f0fdf4 !important;
  color: #15803d !important;
}

/* ---------- MODAL OVERLAYS ---------- */
[data-theme="light"] .apply-modal,
[data-theme="light"] .delete-modal,
[data-theme="light"] .settings-overlay {
  background: rgba(0, 0, 0, 0.35) !important;
}

/* ---------- HOMEPAGE MAJOR SECTIONS ----------
   Every one of these has its OWN hardcoded dark
   gradient background in style.css — listed exhaustively
   here (checked against the file directly) so none of
   them are left half-converted. */
[data-theme="light"] #heroSection,
[data-theme="light"] .stats,
[data-theme="light"] #categoriesSection,
[data-theme="light"] #letestjobsSection,
[data-theme="light"] .about-section,
[data-theme="light"] .team-section,
[data-theme="light"] .companies-section,
[data-theme="light"] .testimonials-section,
[data-theme="light"] .faq-section {
  background: #f3f6f4 !important;
}

[data-theme="light"] #heroSection *,
[data-theme="light"] .stats *,
[data-theme="light"] #categoriesSection *,
[data-theme="light"] #letestjobsSection *,
[data-theme="light"] .about-section *,
[data-theme="light"] .team-section *,
[data-theme="light"] .companies-section *,
[data-theme="light"] .testimonials-section *,
[data-theme="light"] .faq-section * {
  color: #1a1f1c;
}

/* Buttons/badges keep their own (usually white-on-green) text —
   don't let the broad rule above darken it */
[data-theme="light"] #heroSection .btn,
[data-theme="light"] .stats .btn,
[data-theme="light"] #categoriesSection .btn,
[data-theme="light"] #letestjobsSection .btn,
[data-theme="light"] .about-section .btn,
[data-theme="light"] .team-section .btn,
[data-theme="light"] .companies-section .btn,
[data-theme="light"] .testimonials-section .btn,
[data-theme="light"] .faq-section .btn,
[data-theme="light"] .job-badge,
[data-theme="light"] .job-badge * {
  color: #ffffff !important;
}

[data-theme="light"] .browse-hero,
[data-theme="light"] .job-detail-hero,
[data-theme="light"] .scholarship-hero,
[data-theme="light"] .dashboard-hero {
  background: #f3f6f4 !important;
}

[data-theme="light"] .browse-hero *,
[data-theme="light"] .job-detail-hero *,
[data-theme="light"] .scholarship-hero *,
[data-theme="light"] .dashboard-hero * {
  color: #1a1f1c;
}

[data-theme="light"] #jobCount {
  background: #f0fdf4 !important;
  border: 1px solid #16a34a55 !important;
  color: #15803d !important;
}

[data-theme="light"] .hero-stat {
  background: #ffffff !important;
  border: 1px solid #e2e8e4 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .hero-stat strong,
[data-theme="light"] .hero-stat span {
  color: #1a1f1c !important;
}

[data-theme="light"] .hero-badge {
  background: #f0fdf4 !important;
  border: 1px solid #16a34a55 !important;
  color: #15803d !important;
}

/* ---------- THEME TOGGLE BUTTON ---------- */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid #4ade8055;
  color: inherit;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: 0.2s;
  margin-left: 10px;
}

.theme-toggle-btn:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}