/* ====== JobHaven Pro Suite — Theme CSS ====== */

/* ====== FONTS ====== */
* { font-family: 'Inter', sans-serif; }

/* ====== THEME VISIBILITY ====== */
.theme-light .dark-only { display: none !important; }
.theme-dark .light-only { display: none !important; }

/* ====== LIGHT THEME BASE ====== */
.theme-light body { background: #f8fafc; }

/* ====== DARK THEME BASE ====== */
.theme-dark body { background: #000000; color: #f8fafc; }

/* ====== SIDEBAR LAYOUT ====== */
.sidebar { width: 264px; }
@media (max-width: 1023px) {
  .sidebar {
    transform: translateX(-100%);
    position: fixed;
    z-index: 50;
    transition: transform 0.3s ease;
  }
  .sidebar.open { transform: translateX(0); }
}

/* ====== SIDEBAR THEME ====== */
.theme-light .sidebar-bg { background: #ffffff; border-right: 1px solid #e5e7eb; }
.theme-dark .sidebar-bg { background: #0a0a0a; border-right: 1px solid #2a2a2a; }

.theme-light .sidebar-logo-gradient { background: linear-gradient(to bottom right, #4f46e5, #7c3aed); }
.theme-dark .sidebar-logo-gradient { background: linear-gradient(to bottom right, #475569, #3b82f6); }

.theme-light .sidebar-title { color: #0f172a; }
.theme-dark .sidebar-title { color: #ffffff; }

.theme-light .sidebar-subtitle { color: #6366f1; }
.theme-dark .sidebar-subtitle { color: #3b82f6; }

.theme-light .sidebar-section-label { color: #9ca3af; }
.theme-dark .sidebar-section-label { color: #6b7280; }

.theme-light .nav-link { color: #4b5563; }
.theme-light .nav-link:hover { background: #f9fafb; color: #111827; }
.theme-light .nav-link.active { background: #eef2ff; color: #4338ca; font-weight: 600; }

.theme-dark .nav-link { color: #d1d5db; }
.theme-dark .nav-link:hover { background: rgba(59,130,246,0.2); color: #93c5fd; }
.theme-dark .nav-link.active { background: rgba(59,130,246,0.25); color: #93c5fd; font-weight: 600; }

.theme-light .nav-badge { background: #e0e7ff; color: #4338ca; }
.theme-dark .nav-badge { background: rgba(59,130,246,0.25); color: #93c5fd; }

.theme-light .nav-count { color: #9ca3af; }
.theme-dark .nav-count { color: #6b7280; }

.theme-light .role-text { color: #4b5563; }
.theme-dark .role-text { color: #d1d5db; }

.theme-light .sidebar-border { border-color: #f3f4f6; }
.theme-dark .sidebar-border { border-color: #2a2a2a; }

.theme-light .sidebar-footer-text { color: #9ca3af; }
.theme-dark .sidebar-footer-text { color: #6b7280; }

.theme-light .theme-toggle-btn { color: #64748b; }
.theme-light .theme-toggle-btn:hover { color: #334155; background: #f8fafc; }
.theme-dark .theme-toggle-btn { color: #9ca3af; }
.theme-dark .theme-toggle-btn:hover { color: #e5e7eb; background: rgba(42,42,42,0.5); }

/* System status (admin sidebar) */
.theme-light .status-label { color: #4b5563; }
.theme-dark .status-label { color: #d1d5db; }
.theme-light .status-value { color: #059669; }
.theme-dark .status-value { color: #34d399; }
.theme-light .status-value-warn { color: #d97706; }
.theme-dark .status-value-warn { color: #fbbf24; }

/* ====== HEADER THEME ====== */
.theme-light .header-bg { background: rgba(255,255,255,0.8); border-bottom: 1px solid #e5e7eb; }
.theme-dark .header-bg { background: rgba(10,10,10,0.9); border-bottom: 1px solid #2a2a2a; }

.theme-light .header-title { color: #111827; }
.theme-dark .header-title { color: #ffffff; }

.theme-light .header-subtitle { color: #6b7280; }
.theme-dark .header-subtitle { color: #9ca3af; }

.theme-light .search-input { background: #f3f4f6; color: #374151; }
.theme-light .search-input:focus { background: #ffffff; }
.theme-dark .search-input { background: #1a1a1a !important; color: #f8fafc !important; border-color: #333333 !important; }
.theme-dark .search-input:focus { background: #111111 !important; }

.theme-light .search-kbd { background: rgba(229,231,235,0.7); color: #9ca3af; }
.theme-dark .search-kbd { background: #1a1a1a; color: #9ca3af; }

.theme-light .bell-btn { color: #6b7280; }
.theme-light .bell-btn:hover { background: #f3f4f6; }
.theme-dark .bell-btn { color: #9ca3af; }
.theme-dark .bell-btn:hover { background: rgba(42,42,42,0.5); }

.theme-light .user-name { color: #111827; }
.theme-dark .user-name { color: #ffffff; }

.theme-light .user-role-text { color: #6b7280; }
.theme-dark .user-role-text { color: #9ca3af; }

.theme-light .avatar-gradient { background: linear-gradient(to bottom right, #6366f1, #7c3aed); }
.theme-dark .avatar-gradient { background: linear-gradient(to bottom right, #475569, #3b82f6); }

.theme-light .header-divider { background: #e5e7eb; }
.theme-dark .header-divider { background: #333333; }

/* ====== FOOTER THEME ====== */
.theme-light .footer-bg { background: #ffffff; border-top: 1px solid #e5e7eb; }
.theme-dark .footer-bg { background: #0a0a0a; border-top: 1px solid #2a2a2a; }

.theme-light .footer-text { color: #9ca3af; }
.theme-dark .footer-text { color: #6b7280; }

/* ====== USER DROPDOWN ====== */
.theme-light .dropdown-bg { background: #ffffff; border: 1px solid #f3f4f6; }
.theme-dark .dropdown-bg { background: #111111; border: 1px solid #333333; }

.theme-light .dropdown-name { color: #111827; }
.theme-dark .dropdown-name { color: #ffffff; }

.theme-light .dropdown-email { color: #6b7280; }
.theme-dark .dropdown-email { color: #9ca3af; }

.theme-light .dropdown-link { color: #374151; }
.theme-light .dropdown-link:hover { background: #f9fafb; }
.theme-dark .dropdown-link { color: #d1d5db; }
.theme-dark .dropdown-link:hover { background: rgba(42,42,42,0.5); }

/* ====== WELCOME BANNER ====== */
.theme-light .welcome-banner { background: linear-gradient(to right, #4f46e5, #4338ca, #7c3aed); }
.theme-dark .welcome-banner { background: linear-gradient(to right, #334155, #334155, #2563eb); }

.theme-light .welcome-subtitle { color: #c7d2fe; }
.theme-dark .welcome-subtitle { color: #94a3b8; }

.theme-light .welcome-stat-label { color: #c7d2fe; }
.theme-dark .welcome-stat-label { color: #94a3b8; }

/* ====== CONTENT AREA — DARK MODE OVERRIDES ====== */
/* These override Tailwind utility classes in the content area for dark mode */

/* Backgrounds */
.theme-dark .bg-white { background: #111111 !important; }
.theme-dark [class*="bg-white\/"] { background: rgba(17,17,17,0.9) !important; }
.theme-dark .bg-gray-50 { background: #000000 !important; }
.theme-dark .bg-gray-100 { background: rgba(42,42,42,0.5) !important; }
.theme-dark .bg-gray-200\/70 { background: rgba(42,42,42,0.7) !important; }
.theme-dark .bg-slate-50, .theme-dark .bg-slate-100 { background: rgba(42,42,42,0.5) !important; }
.theme-dark .bg-slate-200 { background: #2a2a2a !important; }

/* Colored backgrounds */
.theme-dark .bg-indigo-50, .theme-dark .bg-indigo-100 { background: rgba(79,70,229,0.25) !important; }
.theme-dark .bg-blue-50, .theme-dark .bg-blue-100 { background: rgba(59,130,246,0.2) !important; }
.theme-dark .bg-emerald-50, .theme-dark .bg-green-50 { background: rgba(16,185,129,0.2) !important; }
.theme-dark .bg-amber-50, .theme-dark .bg-amber-100 { background: rgba(245,158,11,0.2) !important; }
.theme-dark .bg-red-50 { background: rgba(239,68,68,0.2) !important; }
.theme-dark .bg-violet-50, .theme-dark .bg-violet-100 { background: rgba(139,92,246,0.2) !important; }
.theme-dark .bg-rose-50, .theme-dark .bg-rose-100 { background: rgba(244,63,94,0.2) !important; }
.theme-dark .bg-orange-100 { background: rgba(249,115,22,0.2) !important; }
.theme-dark .bg-teal-100 { background: rgba(20,184,166,0.2) !important; }
.theme-dark .bg-cyan-100 { background: rgba(6,182,212,0.2) !important; }
.theme-dark .bg-pink-100 { background: rgba(236,72,153,0.2) !important; }

/* Text */
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4 { color: #ffffff !important; }
.theme-dark .text-slate-900, .theme-dark .text-gray-900 { color: #ffffff !important; }
.theme-dark .text-slate-800, .theme-dark .text-gray-800 { color: #f8fafc !important; }
.theme-dark .text-slate-700, .theme-dark .text-gray-700 { color: #e5e7eb !important; }
.theme-dark .text-slate-600, .theme-dark .text-gray-600 { color: #d1d5db !important; }
.theme-dark .text-slate-500, .theme-dark .text-gray-500 { color: #9ca3af !important; }
.theme-dark .text-slate-400, .theme-dark .text-gray-400 { color: #9ca3af !important; }

/* Colored text */
.theme-dark .text-indigo-700, .theme-dark .text-blue-700 { color: #93c5fd !important; }
.theme-dark .text-indigo-600, .theme-dark .text-blue-600 { color: #60a5fa !important; }
.theme-dark .text-indigo-500, .theme-dark .text-blue-500 { color: #60a5fa !important; }
.theme-dark .text-emerald-700, .theme-dark .text-green-700 { color: #6ee7b7 !important; }
.theme-dark .text-emerald-600, .theme-dark .text-green-600 { color: #34d399 !important; }
.theme-dark .text-amber-700, .theme-dark .text-yellow-700 { color: #fcd34d !important; }
.theme-dark .text-amber-600, .theme-dark .text-yellow-600 { color: #fbbf24 !important; }
.theme-dark .text-violet-700, .theme-dark .text-purple-700 { color: #c4b5fd !important; }
.theme-dark .text-violet-600, .theme-dark .text-purple-600 { color: #a78bfa !important; }
.theme-dark .text-red-700 { color: #fca5a5 !important; }
.theme-dark .text-red-600 { color: #f87171 !important; }

/* Inputs */
.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.theme-dark select,
.theme-dark textarea { background: #1a1a1a !important; border-color: #333333 !important; color: #f8fafc !important; }
.theme-dark input::placeholder,
.theme-dark textarea::placeholder { color: #9ca3af; }

/* IMPORTANT: Borders border-gray-100/200 are intentionally NOT overridden.
   Tailwind's default light gray provides high contrast against the black background,
   matching the Pure Dark mockup design. */

/* Tables */
.theme-dark .data-table thead tr { background: rgba(42,42,42,0.5) !important; }
.theme-dark .data-table tbody tr:hover { background: rgba(42,42,42,0.3) !important; }
.theme-dark table th { color: #d1d5db !important; }

/* Misc dark overrides */
.theme-dark kbd { background: #1a1a1a; border-color: #333333; color: #d1d5db; }
.theme-dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.theme-dark .ring-white { --tw-ring-color: #111111; }
.theme-dark .skill-tag { background: rgba(59,130,246,0.2) !important; color: #93c5fd !important; }

/* Hover state overrides */
.theme-dark .hover\:bg-gray-100:hover { background: rgba(42,42,42,0.5) !important; }
.theme-dark .hover\:bg-gray-50:hover { background: rgba(42,42,42,0.3) !important; }
.theme-dark .hover\:bg-slate-50:hover { background: rgba(42,42,42,0.3) !important; }
.theme-dark .hover\:text-gray-900:hover { color: #ffffff !important; }
.theme-dark .hover\:text-slate-700:hover { color: #e5e7eb !important; }
.theme-dark .hover\:bg-red-50:hover { background: rgba(239,68,68,0.2) !important; }
.theme-dark .hover\:bg-indigo-50:hover { background: rgba(79,70,229,0.25) !important; }
.theme-dark .hover\:bg-blue-50:hover { background: rgba(59,130,246,0.2) !important; }

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.theme-dark ::-webkit-scrollbar-thumb { background: #333333; }

/* ====== SIDEBAR OVERLAY ====== */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 40;
}
.sidebar-overlay.active { display: block; }

/* ====== CARD HOVER EFFECT ====== */
.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }

/* ====== PROGRESS RING ANIMATION ====== */
@keyframes ringFill {
  from { stroke-dashoffset: var(--ring-circumference); }
  to   { stroke-dashoffset: var(--ring-offset); }
}
.progress-ring-circle {
  animation: ringFill 1.2s ease-out forwards;
}

/* ====== ANIMATIONS ====== */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

@keyframes blink-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}
.status-dot-green { animation: blink-green 2s ease-in-out infinite; }

/* ====== STAT CARD ACCENT STRIPS ====== */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 1rem 1rem 0 0;
}
.stat-card-indigo::before { background: linear-gradient(90deg, #4f46e5, #818cf8); }
.stat-card-emerald::before { background: linear-gradient(90deg, #059669, #34d399); }
.stat-card-amber::before { background: linear-gradient(90deg, #d97706, #fbbf24); }
.stat-card-violet::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.stat-card-red::before { background: linear-gradient(90deg, #dc2626, #f87171); }
.stat-card-blue::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }

/* ====== JOB DESCRIPTION — DARK MODE ====== */
.theme-dark .job-description h1,
.theme-dark .job-description h2,
.theme-dark .job-description h3,
.theme-dark .job-description h4,
.theme-dark .job-description h5,
.theme-dark .job-description h6 { color: #f8fafc; }
.theme-dark .job-description a { color: #60a5fa; }
.theme-dark .job-description a:hover { color: #93c5fd; }
.theme-dark .job-description th { background: rgba(42,42,42,0.5); }
.theme-dark .job-description blockquote { border-color: #333333; color: #9ca3af; }
.theme-dark .job-description hr { border-color: #333333; }
.theme-dark .job-description th,
.theme-dark .job-description td { border-color: #333333; }

/* ====== DROP ZONE — DARK MODE ====== */
.theme-dark .drop-zone { border-color: #333333; }
.theme-dark .drop-zone.drag-over { border-color: #3b82f6; background-color: rgba(59,130,246,0.1); }

/* ====== FLASH MESSAGE — DARK MODE ====== */
.theme-dark .flash-message { background: rgba(16,185,129,0.15); border-color: #333333; color: #34d399; }

/* ====== AUTH PAGE THEME ====== */
.theme-light .auth-card { background: #ffffff; }
.theme-dark .auth-card { background: #111111; border: 1px solid #333333; }

.theme-light .auth-logo-gradient { background: linear-gradient(to bottom right, #4f46e5, #7c3aed); }
.theme-dark .auth-logo-gradient { background: linear-gradient(to bottom right, #475569, #3b82f6); }

.theme-light .auth-title { color: #0f172a; }
.theme-dark .auth-title { color: #ffffff; }

.theme-light .auth-subtitle-text { color: #6366f1; }
.theme-dark .auth-subtitle-text { color: #3b82f6; }