/* CareerMatch - Production Styles with Light/Dark Theme */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
*{font-family:'Outfit',system-ui,-apple-system,sans-serif;box-sizing:border-box}
html{scroll-behavior:smooth}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* ======================== CSS VARIABLES ======================== */
:root {
  /* Background */
  --bg-body: linear-gradient(135deg,#0a0a1a 0%,#12122e 40%,#0a0a1a 100%);
  --bg-body-solid: #0a0a1a;
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,.65);
  --text-muted: rgba(255,255,255,.4);
  --text-faint: rgba(255,255,255,.25);

  /* Surfaces */
  --glass-bg: rgba(255,255,255,.05);
  --glass-strong-bg: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.22);
  --glass-strong-border: rgba(255,255,255,.28);
  --card-bg: rgba(255,255,255,.05);
  --card-border: rgba(255,255,255,.22);
  --card-hover-bg: rgba(255,255,255,.1);

  /* Inputs */
  --inp-bg: rgba(255,255,255,.06);
  --inp-border: rgba(255,255,255,.28);
  --inp-text: #ffffff;
  --inp-placeholder: rgba(255,255,255,.25);
  --inp-option-bg: #111827;

  /* Buttons */
  --btn-ghost-bg: rgba(255,255,255,.06);
  --btn-ghost-border: rgba(255,255,255,.24);
  --btn-ghost-hover-bg: rgba(255,255,255,.12);
  --btn-ghost-hover-border: rgba(255,255,255,.4);
  --btn-ghost-text: #ffffff;

  /* Tags */
  --tag-miss-bg: rgba(255,255,255,.05);
  --tag-miss-border: rgba(255,255,255,.22);
  --tag-miss-text: rgba(255,255,255,.35);

  /* Job card */
  --job-card-bg: linear-gradient(145deg,rgba(25,25,55,.85),rgba(15,15,35,.95));
  --job-card-border: rgba(99,102,241,.4);
  --job-card-hover-border: rgba(99,102,241,.6);

  /* Misc */
  --scrollbar-thumb: rgba(99,102,241,.3);
  --scrollbar-thumb-hover: rgba(99,102,241,.5);
  --spinner-track: rgba(255,255,255,.15);
  --stat-card-bg: rgba(255,255,255,.05);
  --stat-card-border: rgba(255,255,255,.22);
  --stat-label-color: rgba(255,255,255,.4);
  --toast-backdrop: blur(16px);
  --exp-row-bg: rgba(255,255,255,.05);
  --exp-row-border: rgba(255,255,255,.2);
  --bar-track: rgba(255,255,255,.1);
  --insight-cell-bg: rgba(255,255,255,.04);
  --insight-cell-border: rgba(255,255,255,.2);
  --tl-inactive: rgba(255,255,255,.2);
  --tl-line-inactive: rgba(255,255,255,.12);
  --tl-line-active: rgba(34,197,94,.4);
  --empty-icon: rgba(255,255,255,.15);
  --shadow-glow: 0 0 40px rgba(99,102,241,.1);
  --danger-bg: rgba(239,68,68,.1);
  --danger-border: rgba(239,68,68,.45);
  --danger-text: #f87171;
}

/* ======================== LIGHT THEME ======================== */
[data-theme="light"] {
  --bg-body: linear-gradient(135deg,#f0f2f9 0%,#e8eaf6 40%,#f5f5ff 100%);
  --bg-body-solid: #f0f2f9;
  --text-primary: #1a1a2e;
  --text-secondary: rgba(26,26,46,.7);
  --text-muted: rgba(26,26,46,.45);
  --text-faint: rgba(26,26,46,.3);

  --glass-bg: rgba(255,255,255,.75);
  --glass-strong-bg: rgba(255,255,255,.88);
  --glass-border: rgba(0,0,0,.18);
  --glass-strong-border: rgba(0,0,0,.24);
  --card-bg: rgba(255,255,255,.8);
  --card-border: rgba(0,0,0,.2);
  --card-hover-bg: rgba(255,255,255,.92);

  --inp-bg: rgba(255,255,255,.9);
  --inp-border: rgba(0,0,0,.25);
  --inp-text: #1a1a2e;
  --inp-placeholder: rgba(0,0,0,.3);
  --inp-option-bg: #ffffff;

  --btn-ghost-bg: rgba(0,0,0,.04);
  --btn-ghost-border: rgba(0,0,0,.22);
  --btn-ghost-hover-bg: rgba(0,0,0,.08);
  --btn-ghost-hover-border: rgba(0,0,0,.35);
  --btn-ghost-text: #1a1a2e;

  --tag-miss-bg: rgba(0,0,0,.04);
  --tag-miss-border: rgba(0,0,0,.2);
  --tag-miss-text: rgba(0,0,0,.4);

  --job-card-bg: linear-gradient(145deg,rgba(255,255,255,.94),rgba(245,245,255,.97));
  --job-card-border: rgba(99,102,241,.4);
  --job-card-hover-border: rgba(99,102,241,.65);

  --scrollbar-thumb: rgba(99,102,241,.25);
  --scrollbar-thumb-hover: rgba(99,102,241,.45);
  --spinner-track: rgba(0,0,0,.1);
  --stat-card-bg: rgba(255,255,255,.8);
  --stat-card-border: rgba(0,0,0,.2);
  --stat-label-color: rgba(26,26,46,.45);
  --toast-backdrop: blur(16px);
  --exp-row-bg: rgba(0,0,0,.03);
  --exp-row-border: rgba(0,0,0,.15);
  --bar-track: rgba(0,0,0,.08);
  --insight-cell-bg: rgba(255,255,255,.6);
  --insight-cell-border: rgba(0,0,0,.16);
  --tl-inactive: rgba(0,0,0,.2);
  --tl-line-inactive: rgba(0,0,0,.1);
  --tl-line-active: rgba(34,197,94,.35);
  --empty-icon: rgba(0,0,0,.12);
  --shadow-glow: 0 0 40px rgba(99,102,241,.08);
  --danger-bg: rgba(239,68,68,.08);
  --danger-border: rgba(239,68,68,.4);
  --danger-text: #dc2626;
}

/* ======================== BASE ======================== */
body{margin:0;padding:0;background:var(--bg-body);color:var(--text-primary);min-height:100vh;transition:background .4s,color .3s}

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

/* Glass */
.glass{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid var(--glass-border);transition:background .3s,border-color .3s}
.glass-strong{background:var(--glass-strong-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:2px solid var(--glass-strong-border);transition:background .3s,border-color .3s}
.glow{box-shadow:0 0 30px rgba(99,102,241,.12),inset 0 1px 0 rgba(255,255,255,.06)}

/* Inputs */
.inp{width:100%;padding:.625rem .875rem;border-radius:.75rem;background:var(--inp-bg);border:2px solid var(--inp-border);color:var(--inp-text);font-size:.875rem;transition:border-color .2s,box-shadow .2s,background .3s,color .3s;outline:none}
.inp:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.2)}
.inp::placeholder{color:var(--inp-placeholder)}
select.inp option{background:var(--inp-option-bg);color:var(--inp-text)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:.75rem;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s;border:none;outline:none;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:2px solid rgba(99,102,241,.5)}
.btn-primary:hover{background:linear-gradient(135deg,#6366f1,#8b5cf6);transform:translateY(-1px);box-shadow:0 4px 20px rgba(99,102,241,.3);border-color:rgba(99,102,241,.7)}
.btn-ghost{background:var(--btn-ghost-bg);border:2px solid var(--btn-ghost-border);color:var(--btn-ghost-text);transition:all .2s,background .3s}
.btn-ghost:hover{background:var(--btn-ghost-hover-bg);border-color:var(--btn-ghost-hover-border)}
.btn-danger{background:var(--danger-bg);border:2px solid var(--danger-border);color:var(--danger-text)}
.btn-danger:hover{opacity:.85}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* Cards */
.card{background:var(--card-bg);border:2px solid var(--card-border);border-radius:1rem;padding:1.25rem;transition:background .3s,border-color .3s}
.card-glow{box-shadow:var(--shadow-glow)}
.job-card{background:var(--job-card-bg);border:2px solid var(--job-card-border);border-radius:1rem;padding:1.25rem;transition:transform .2s,border-color .2s,background .3s}
.job-card:hover{transform:translateY(-2px);border-color:var(--job-card-hover-border)}

/* Skill tags */
.tag{padding:.25rem .625rem;border-radius:.5rem;font-size:.75rem;display:inline-flex;align-items:center;gap:.375rem;transition:all .2s}
.tag-tech{background:rgba(99,102,241,.14);border:2px solid rgba(99,102,241,.45);color:#6366f1}
.tag-soft{background:rgba(34,197,94,.14);border:2px solid rgba(34,197,94,.45);color:#16a34a}
.tag-tools{background:rgba(249,115,22,.14);border:2px solid rgba(249,115,22,.45);color:#ea580c}
.tag-lang{background:rgba(236,72,153,.14);border:2px solid rgba(236,72,153,.45);color:#db2777}
.tag-cert{background:rgba(6,182,212,.14);border:2px solid rgba(6,182,212,.45);color:#0891b2}
.tag-match{background:rgba(34,197,94,.18);border:2px solid rgba(34,197,94,.5);color:#16a34a}
.tag-miss{background:var(--tag-miss-bg);border:2px solid var(--tag-miss-border);color:var(--tag-miss-text)}

/* Dark mode override for tag text readability */
:root .tag-tech{color:#a5b4fc}
:root .tag-soft{color:#86efac}
:root .tag-tools{color:#fdba74}
:root .tag-lang{color:#f9a8d4}
:root .tag-cert{color:#67e8f9}
:root .tag-match{color:#4ade80}
[data-theme="light"] .tag-tech{color:#4f46e5}
[data-theme="light"] .tag-soft{color:#16a34a}
[data-theme="light"] .tag-tools{color:#c2410c}
[data-theme="light"] .tag-lang{color:#be185d}
[data-theme="light"] .tag-cert{color:#0e7490}
[data-theme="light"] .tag-match{color:#15803d}

/* Badges */
.badge{display:inline-block;padding:.125rem .5rem;border-radius:9999px;font-size:.625rem;font-weight:600;letter-spacing:.025em}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(99,102,241,.35)}50%{box-shadow:0 0 40px rgba(99,102,241,.55)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
.fade-up{animation:fadeUp .5s ease-out both}
.fade-in{animation:fadeIn .3s ease-out both}
.anim-glow{animation:pulse-glow 2.5s ease-in-out infinite}
.spinner{width:20px;height:20px;border:2.5px solid var(--spinner-track);border-top-color:#818cf8;border-radius:50%;animation:spin .7s linear infinite}

/* Stat card */
.stat-card{text-align:center;padding:1rem;border-radius:1rem;background:var(--stat-card-bg);border:2px solid var(--stat-card-border);transition:background .3s,border-color .3s}
.stat-card .stat-value{font-size:1.5rem;font-weight:700;line-height:1.2}
.stat-card .stat-label{font-size:.625rem;color:var(--stat-label-color);margin-top:.25rem;text-transform:uppercase;letter-spacing:.05em}

/* Toast */
.toast-wrap{position:fixed;bottom:1.5rem;right:1.5rem;z-index:200;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast-wrap>*{pointer-events:auto}
.toast{padding:.75rem 1rem;border-radius:.75rem;font-size:.8125rem;display:flex;align-items:center;gap:.5rem;animation:fadeUp .3s ease-out;backdrop-filter:var(--toast-backdrop);border:2px solid}
.toast-success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.45);color:#16a34a}
.toast-error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.45);color:#dc2626}
.toast-info{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.45);color:#6366f1}
:root .toast-success{color:#4ade80}
:root .toast-error{color:#f87171}
:root .toast-info{color:#a5b4fc}
[data-theme="light"] .toast-success{color:#15803d}
[data-theme="light"] .toast-error{color:#dc2626}
[data-theme="light"] .toast-info{color:#4338ca}

/* Progress ring */
.progress-ring{transform:rotate(-90deg)}
.progress-ring circle{transition:stroke-dashoffset .6s ease}

/* Timeline */
.tl-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.tl-line{width:2px;flex:1;min-height:24px}
.tl-active{background:#6366f1;box-shadow:0 0 12px rgba(99,102,241,.5)}

/* Nav active states */
.nav-active{color:var(--text-primary)!important;background:var(--btn-ghost-bg);font-weight:500}
.mob-active{color:#6366f1!important}

/* Nav bars */
.nav-bar{border-bottom:2px solid var(--glass-border)}
.mob-bar{border-top:2px solid var(--glass-border)}

/* ===== Enhanced Navigation Sizing ===== */
.nav-bar > div{height:5rem}
.nav-bar a > div:first-child{width:2.75rem;height:2.75rem}
.nav-bar a > div:first-child > svg{width:1.5rem;height:1.5rem}
.nav-bar a > span{font-size:1.25rem}
.nav-bar > div > .hidden a{font-size:1.125rem;font-weight:700}
.nav-bar .nav-btn{font-size:.9375rem;padding-top:.5rem;padding-bottom:.5rem}
.nav-bar button[aria-label="Menu"]{width:2.5rem;height:2.5rem}
.nav-bar a.btn-primary{font-size:1rem;padding:.75rem 1.5rem}
#mob-menu{top:5rem}
#mob-menu a:not(.btn){font-size:1.125rem;font-weight:700}
#mob-menu a.btn{font-size:1rem;padding:.625rem 1.25rem}

/* Theme toggle */
.theme-toggle{position:relative;width:40px;height:40px;border-radius:.625rem;background:var(--btn-ghost-bg);border:2px solid var(--btn-ghost-border);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;color:var(--text-secondary);flex-shrink:0}
.theme-toggle:hover{background:var(--btn-ghost-hover-bg);border-color:var(--btn-ghost-hover-border);color:var(--text-primary)}
.theme-toggle svg{width:18px;height:18px;transition:transform .4s,opacity .3s}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{position:absolute}
.theme-toggle .icon-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.theme-toggle .icon-moon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-toggle .icon-sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-toggle .icon-moon{opacity:0;transform:rotate(90deg) scale(.5)}

/* Theme-aware text helpers (override Tailwind grays for light mode) */
[data-theme="light"] .text-gray-300{color:rgba(26,26,46,.7)!important}
[data-theme="light"] .text-gray-400{color:rgba(26,26,46,.55)!important}
[data-theme="light"] .text-gray-500{color:rgba(26,26,46,.45)!important}
[data-theme="light"] .text-gray-600{color:rgba(26,26,46,.35)!important}
[data-theme="light"] .text-gray-700{color:rgba(26,26,46,.25)!important}
[data-theme="light"] .text-white{color:#1a1a2e!important}

/* Theme-aware background helpers */
[data-theme="light"] .bg-white\/5{background:rgba(0,0,0,.04)!important}
[data-theme="light"] .bg-white\/10{background:rgba(0,0,0,.06)!important}
[data-theme="light"] .bg-white\/\[\.02\]{background:rgba(0,0,0,.02)!important}
[data-theme="light"] .bg-white\/\[\.03\]{background:rgba(0,0,0,.03)!important}
[data-theme="light"] .bg-white\/\[\.05\]{background:rgba(0,0,0,.04)!important}

/* Theme-aware border helpers */
[data-theme="light"] .border-white\/5{border-color:rgba(0,0,0,.15)!important}
[data-theme="light"] .border-white\/10{border-color:rgba(0,0,0,.2)!important}
[data-theme="light"] .border-white\/\[\.05\]{border-color:rgba(0,0,0,.15)!important}
[data-theme="light"] .border-white\/\[\.06\]{border-color:rgba(0,0,0,.18)!important}

/* Light mode: keep accent colors legible on white */
[data-theme="light"] .text-indigo-400{color:#4f46e5!important}
[data-theme="light"] .text-purple-400{color:#7c3aed!important}
[data-theme="light"] .text-green-400{color:#16a34a!important}
[data-theme="light"] .text-emerald-400{color:#059669!important}
[data-theme="light"] .text-orange-400{color:#ea580c!important}
[data-theme="light"] .text-amber-400{color:#d97706!important}
[data-theme="light"] .text-cyan-400{color:#0891b2!important}
[data-theme="light"] .text-blue-400{color:#2563eb!important}
[data-theme="light"] .text-pink-400{color:#db2777!important}
[data-theme="light"] .text-red-400{color:#dc2626!important}
[data-theme="light"] .text-yellow-400{color:#ca8a04!important}

/* Light mode: nav hover should go dark not white */
[data-theme="light"] .nav-btn:hover{color:#1a1a2e!important}
[data-theme="light"] .hover\:text-white:hover{color:#1a1a2e!important}
[data-theme="light"] .hover\:text-red-400:hover{color:#dc2626!important}
[data-theme="light"] .hover\:border-indigo-500\/30:hover{border-color:rgba(79,70,229,.4)!important}
[data-theme="light"] .hover\:border-purple-500\/30:hover{border-color:rgba(124,58,237,.4)!important}
[data-theme="light"] .hover\:border-green-500\/30:hover{border-color:rgba(22,163,74,.4)!important}

/* Responsive helpers */
@media(max-width:640px){.hide-mobile{display:none!important}.stat-card .stat-value{font-size:1.25rem}}
@media(min-width:641px){.hide-desktop{display:none!important}}