/* ============================================================
   KaizenJobs — jobs.css  (shared across all pages)
   Dark mode, language, color-coded job status system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── THEME TOKENS ────────────────────────────────────────────── */
:root {
  --j-bg:       #f0f4fb;
  --j-surface:  #ffffff;
  --j-surface2: #f8fafc;
  --j-border:   #e2e8f0;
  --j-border2:  #cbd5e1;
  --j-text:     #0f172a;
  --j-text2:    #64748b;
  --j-text3:    #94a3b8;
  --j-blue:     #1e3c72;
  --j-mid:      #2a5298;
  --j-green:    #27ae60;
  --j-green2:   #4caf50;
  --j-shadow:   0 2px 14px rgba(0,0,0,.07);
  --j-shadow-lg:0 8px 32px rgba(0,0,0,.12);
  --j-radius:   10px;
  --j-radius-lg:14px;
  /* Job status colors */
  --j-fresh:    #27ae60;  /* green  - new / active */
  --j-warm:     #f59e0b;  /* yellow - filling fast */
  --j-hot:      #e74c3c;  /* red    - almost full / urgent */
  --j-closed:   #94a3b8;  /* gray   - closed */
}

[data-theme="dark"] {
  --j-bg:       #0f172a;
  --j-surface:  #1e293b;
  --j-surface2: #162032;
  --j-border:   #334155;
  --j-border2:  #475569;
  --j-text:     #f1f5f9;
  --j-text2:    #94a3b8;
  --j-text3:    #64748b;
  --j-blue:     #93c5fd;
  --j-mid:      #60a5fa;
  --j-shadow:   0 2px 14px rgba(0,0,0,.3);
  --j-shadow-lg:0 8px 32px rgba(0,0,0,.5);
}

*  { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--j-bg); color:var(--j-text); line-height:1.6; overflow-x:hidden; transition:background .3s,color .3s; }
a  { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
input, select, textarea, button { font-family:inherit; }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.j-container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ── NAVBAR ──────────────────────────────────────────────────── */
.j-nav {
  position:sticky; top:0; z-index:200;
  background:var(--j-surface);
  border-bottom:1px solid var(--j-border);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
  transition:background .3s;
}
.j-nav-inner {
  max-width:1200px; margin:0 auto; padding:0 20px;
  height:60px; display:flex; align-items:center; gap:16px;
}
.j-logo {
  font-size:18px; font-weight:800; color:var(--j-text);
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.j-logo-icon {
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,#1e3c72,#2a5298);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:#fff;
}
.j-logo-dot { color:#4caf50; }

.j-nav-search {
  flex:1; max-width:380px; position:relative;
}
.j-nav-search input {
  width:100%; padding:8px 14px 8px 36px;
  border:1px solid var(--j-border); border-radius:8px;
  background:var(--j-surface2); color:var(--j-text);
  font-size:13px; outline:none; transition:border .2s,box-shadow .2s;
}
.j-nav-search input:focus {
  border-color:var(--j-mid); box-shadow:0 0 0 3px rgba(42,82,152,.1);
  background:var(--j-surface);
}
.j-nav-search i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--j-text3); font-size:13px; }

.j-nav-right { display:flex; align-items:center; gap:10px; margin-left:auto; }

/* Notifications bell */
.j-notif-btn {
  position:relative; width:36px; height:36px;
  border-radius:9px; border:1px solid var(--j-border);
  background:var(--j-surface2); display:flex; align-items:center;
  justify-content:center; cursor:pointer; color:var(--j-text2);
  transition:all .2s; font-size:15px;
}
.j-notif-btn:hover { background:var(--j-surface); border-color:var(--j-border2); }
.j-notif-dot {
  position:absolute; top:7px; right:7px;
  width:7px; height:7px; border-radius:50%;
  background:#e74c3c; border:1.5px solid var(--j-surface);
}

/* Theme toggle */
.j-theme-btn {
  width:36px; height:36px; border-radius:9px;
  border:1px solid var(--j-border); background:var(--j-surface2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--j-text2); font-size:15px;
  transition:all .2s;
}
.j-theme-btn:hover { background:var(--j-surface); }

/* Lang selector */
.j-lang-sel {
  padding:6px 10px; border:1px solid var(--j-border);
  border-radius:8px; background:var(--j-surface2);
  color:var(--j-text2); font-size:12px; cursor:pointer;
  outline:none; appearance:none; padding-right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
  background-size:10px;
}

/* Auth buttons */
.j-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600;
  cursor:pointer; border:none; transition:all .2s; white-space:nowrap;
}
.j-btn-primary { background:linear-gradient(135deg,#27ae60,#4caf50); color:#fff; box-shadow:0 2px 10px rgba(76,175,80,.3); }
.j-btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(76,175,80,.4); }
.j-btn-outline { background:transparent; color:var(--j-mid); border:1.5px solid var(--j-mid); }
.j-btn-outline:hover { background:var(--j-mid); color:#fff; }
.j-btn-blue { background:linear-gradient(135deg,#1e3c72,#2a5298); color:#fff; }
.j-btn-blue:hover { opacity:.9; transform:translateY(-1px); }
.j-btn-sm { padding:6px 12px; font-size:12px; }
.j-btn-xs { padding:4px 10px; font-size:11px; border-radius:7px; }
.j-btn-ghost { background:var(--j-surface2); color:var(--j-text2); border:1px solid var(--j-border); }
.j-btn-ghost:hover { background:var(--j-surface); }
.j-btn-danger { background:linear-gradient(135deg,#e74c3c,#c0392b); color:#fff; }

/* ── JOB STATUS COLORS ───────────────────────────────────────── */
/* Green  = fresh / plenty of spots */
/* Yellow = filling fast             */
/* Red    = urgent / last few spots  */

.j-status-fresh  { background:#eafaf1; color:#1e8449; border-left:3px solid #27ae60; }
.j-status-warm   { background:#fef9e7; color:#b45309; border-left:3px solid #f59e0b; }
.j-status-hot    { background:#fdedec; color:#c0392b; border-left:3px solid #e74c3c; }
.j-status-closed { background:var(--j-surface2); color:var(--j-text3); border-left:3px solid var(--j-border2); }

.j-status-dot-fresh  { width:8px;height:8px;border-radius:50%;background:#27ae60;display:inline-block; }
.j-status-dot-warm   { width:8px;height:8px;border-radius:50%;background:#f59e0b;display:inline-block; }
.j-status-dot-hot    { width:8px;height:8px;border-radius:50%;background:#e74c3c;display:inline-block; animation:blink 1.5s infinite; }
.j-status-dot-closed { width:8px;height:8px;border-radius:50%;background:#94a3b8;display:inline-block; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.35} }

.j-badge-fresh  { background:#eafaf1;color:#1e8449;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700; }
.j-badge-warm   { background:#fef9e7;color:#b45309;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700; }
.j-badge-hot    { background:#fdedec;color:#c0392b;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700; }
.j-badge-closed { background:#f4f7fc;color:#94a3b8;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700; }
.j-badge-premium{ background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700; }
.j-badge-new    { background:#1e3c72;color:#fff;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700; }

/* ── CARDS ───────────────────────────────────────────────────── */
.j-card {
  background:var(--j-surface);
  border:1px solid var(--j-border);
  border-radius:var(--j-radius-lg);
  box-shadow:var(--j-shadow);
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.j-card:hover { box-shadow:var(--j-shadow-lg); }

/* ── JOB CARD ────────────────────────────────────────────────── */
.j-job-card {
  background:var(--j-surface);
  border:1px solid var(--j-border);
  border-radius:var(--j-radius-lg);
  padding:18px 20px;
  margin-bottom:12px;
  transition:all .25s;
  position:relative;
  display:flex; gap:14px; align-items:flex-start;
  overflow:hidden;
}
.j-job-card:hover { box-shadow:var(--j-shadow-lg); border-color:var(--j-border2); transform:translateY(-1px); }
.j-job-card .j-status-stripe {
  position:absolute; left:0; top:0; bottom:0; width:4px;
}
.j-job-logo {
  width:50px; height:50px; border-radius:12px;
  background:linear-gradient(135deg,#eaf0fb,#f0f4fb);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:var(--j-mid);
  flex-shrink:0; overflow:hidden; border:1px solid var(--j-border);
}
.j-job-logo img { width:100%;height:100%;object-fit:cover; }
.j-job-body { flex:1; min-width:0; }
.j-job-title { font-size:15px; font-weight:700; color:var(--j-text); margin-bottom:3px; }
.j-job-company { font-size:12px; color:var(--j-text2); margin-bottom:8px; display:flex; align-items:center; gap:4px; }
.j-job-meta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.j-job-meta span { font-size:11px; color:var(--j-text3); display:flex; align-items:center; gap:4px; }
.j-job-meta i { color:var(--j-mid); font-size:10px; }
.j-job-tags { display:flex; gap:6px; flex-wrap:wrap; }
.j-job-tag { padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; background:var(--j-surface2); color:var(--j-text2); border:1px solid var(--j-border); }
.j-job-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; min-width:120px; }
.j-salary { font-size:14px; font-weight:700; color:var(--j-text); white-space:nowrap; }
.j-wishlist-btn {
  width:30px; height:30px; border-radius:8px;
  border:1px solid var(--j-border); background:var(--j-surface2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--j-text3); font-size:14px;
  transition:all .2s;
}
.j-wishlist-btn:hover { border-color:#e74c3c; color:#e74c3c; }
.j-wishlist-btn.saved { background:#fdedec; border-color:#f5c6cb; color:#e74c3c; }
.j-apply-btn {
  background:linear-gradient(135deg,#27ae60,#4caf50);
  color:#fff; border:none; border-radius:8px;
  padding:8px 14px; font-size:12px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; gap:5px;
  transition:all .2s; white-space:nowrap;
}
.j-apply-btn:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(76,175,80,.35); }
.j-apply-btn.applied { background:#64748b; cursor:default; }
.j-apply-btn.filled  { background:#e74c3c; cursor:default; }

/* ── WISHLIST BANNER ─────────────────────────────────────────── */
.j-wishlist-empty {
  text-align:center; padding:48px 20px;
  color:var(--j-text3);
}
.j-wishlist-empty i { font-size:48px; display:block; margin-bottom:14px; opacity:.3; }

/* ── FORM ELEMENTS ───────────────────────────────────────────── */
.j-input, .j-select, .j-textarea {
  width:100%; padding:10px 13px;
  border:1px solid var(--j-border); border-radius:9px;
  background:var(--j-surface2); color:var(--j-text);
  font-size:13px; outline:none;
  transition:border .2s, box-shadow .2s, background .2s;
  box-sizing:border-box;
}
.j-input:focus, .j-select:focus, .j-textarea:focus {
  border-color:var(--j-mid);
  background:var(--j-surface);
  box-shadow:0 0 0 3px rgba(42,82,152,.1);
}
.j-label { display:block; font-size:11px; font-weight:700; color:var(--j-text2); margin-bottom:5px; text-transform:uppercase; letter-spacing:.4px; }
.j-form-group { margin-bottom:14px; }

/* ── STATS / METRICS ─────────────────────────────────────────── */
.j-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.j-stat-card {
  background:var(--j-surface); border:1px solid var(--j-border);
  border-radius:var(--j-radius-lg); padding:16px 18px;
  display:flex; align-items:center; gap:12px;
  box-shadow:var(--j-shadow);
}
.j-stat-icon { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.j-stat-label { font-size:11px; color:var(--j-text3); font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px; }
.j-stat-value { font-size:22px; font-weight:800; color:var(--j-text); line-height:1; }

/* ── PREMIUM LOCK ────────────────────────────────────────────── */
.j-lock-overlay {
  position:relative; overflow:hidden;
}
.j-lock-overlay::after {
  content:''; position:absolute; inset:0;
  background:var(--j-surface); opacity:.7;
  border-radius:var(--j-radius);
}
.j-lock-msg {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:12px; color:var(--j-text2); gap:6px;
}
.j-lock-msg i { font-size:20px; color:#f59e0b; }

/* ── NOTIFICATION DROPDOWN ───────────────────────────────────── */
.j-notif-panel {
  position:absolute; top:calc(100% + 8px); right:0;
  width:320px; background:var(--j-surface);
  border:1px solid var(--j-border); border-radius:var(--j-radius-lg);
  box-shadow:var(--j-shadow-lg); z-index:300;
  display:none;
}
.j-notif-panel.open { display:block; animation:dropIn .18s ease; }
@keyframes dropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.j-notif-head { padding:12px 16px; border-bottom:1px solid var(--j-border); font-size:13px; font-weight:700; color:var(--j-text); display:flex; justify-content:space-between; }
.j-notif-item { padding:12px 16px; border-bottom:1px solid var(--j-border); display:flex; gap:10px; align-items:flex-start; transition:background .2s; cursor:pointer; }
.j-notif-item:hover { background:var(--j-surface2); }
.j-notif-item:last-child { border-bottom:none; }
.j-notif-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.j-notif-text { font-size:12px; color:var(--j-text2); line-height:1.5; }
.j-notif-text strong { color:var(--j-text); }
.j-notif-time { font-size:10px; color:var(--j-text3); margin-top:2px; }
.j-notif-unread { background:var(--j-surface2); }
.j-notif-unread .j-notif-text::before { content:''; display:inline-block; width:6px; height:6px; background:var(--j-mid); border-radius:50%; margin-right:6px; vertical-align:middle; }

/* ── DASHBOARD LAYOUT ────────────────────────────────────────── */
.j-dash-layout { display:grid; grid-template-columns:240px 1fr; gap:20px; max-width:1200px; margin:0 auto; padding:20px; }
.j-sidebar { position:sticky; top:72px; height:fit-content; }
.j-sidebar-card { background:var(--j-surface); border:1px solid var(--j-border); border-radius:var(--j-radius-lg); overflow:hidden; box-shadow:var(--j-shadow); }
.j-sidebar-nav a {
  display:flex; align-items:center; gap:9px; padding:11px 16px;
  font-size:13px; font-weight:500; color:var(--j-text2);
  transition:all .2s; border-left:3px solid transparent;
}
.j-sidebar-nav a:hover { background:var(--j-surface2); color:var(--j-text); }
.j-sidebar-nav a.active { background:var(--j-surface2); color:var(--j-mid); border-left-color:var(--j-mid); font-weight:600; }
.j-sidebar-nav a i { width:16px; text-align:center; font-size:14px; }
.j-sidebar-nav .j-nav-badge { margin-left:auto; background:var(--j-mid); color:#fff; border-radius:20px; font-size:10px; font-weight:700; padding:1px 7px; }
.j-sidebar-nav .j-nav-badge.hot { background:#e74c3c; }

/* ── SECTION HEADERS ─────────────────────────────────────────── */
.j-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.j-section-title { font-size:16px; font-weight:700; color:var(--j-text); display:flex; align-items:center; gap:8px; }
.j-section-title i { color:var(--j-mid); font-size:14px; }

/* ── SEARCH & FILTER BAR ─────────────────────────────────────── */
.j-filter-bar { background:var(--j-surface); border:1px solid var(--j-border); border-radius:var(--j-radius-lg); padding:14px 18px; margin-bottom:18px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.j-filter-bar input, .j-filter-bar select { flex:1; min-width:150px; padding:8px 12px; border:1px solid var(--j-border); border-radius:8px; background:var(--j-surface2); color:var(--j-text); font-size:13px; outline:none; }
.j-filter-bar input:focus, .j-filter-bar select:focus { border-color:var(--j-mid); }

/* ── TOAST ───────────────────────────────────────────────────── */
.j-toast-wrap { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.j-toast {
  background:var(--j-surface); border:1px solid var(--j-border);
  border-radius:var(--j-radius); padding:12px 16px;
  font-size:13px; color:var(--j-text);
  box-shadow:var(--j-shadow-lg); display:flex; align-items:center; gap:8px;
  min-width:260px; animation:toastIn .3s ease;
}
@keyframes toastIn { from{transform:translateX(60px);opacity:0}to{transform:translateX(0);opacity:1} }
.j-toast.success { border-left:3px solid #27ae60; }
.j-toast.error   { border-left:3px solid #e74c3c; }
.j-toast.info    { border-left:3px solid var(--j-mid); }

/* ── PROFILE BANNER ──────────────────────────────────────────── */
.j-profile-banner {
  background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%);
  border-radius:var(--j-radius-lg); padding:22px 26px; color:#fff;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px;
  position:relative; overflow:hidden;
}
.j-profile-banner::before { content:''; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.05); }
.j-profile-avatar { width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; border:2px solid rgba(255,255,255,.3); flex-shrink:0; overflow:hidden; }
.j-profile-avatar img { width:100%;height:100%;object-fit:cover; border-radius:50%; }

/* ── PREMIUM CTA ─────────────────────────────────────────────── */
.j-premium-cta {
  background:linear-gradient(135deg,#7c3aed,#8b5cf6);
  border-radius:var(--j-radius-lg); padding:16px 20px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:20px; flex-wrap:wrap;
}

/* ── MODAL ───────────────────────────────────────────────────── */
.j-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9000; align-items:center; justify-content:center; }
.j-modal-overlay.active { display:flex; }
.j-modal { background:var(--j-surface); border-radius:var(--j-radius-lg); width:500px; max-width:94vw; max-height:90vh; overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.3); animation:modalUp .25s ease; }
@keyframes modalUp { from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1} }
.j-modal-head { padding:16px 22px; border-bottom:1px solid var(--j-border); display:flex; align-items:center; justify-content:space-between; }
.j-modal-head h3 { font-size:15px; font-weight:700; color:var(--j-text); margin:0; }
.j-modal-close { width:28px; height:28px; border-radius:50%; border:none; background:var(--j-surface2); color:var(--j-text2); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; }
.j-modal-body { padding:20px 22px; }
.j-modal-foot { padding:14px 22px; border-top:1px solid var(--j-border); display:flex; gap:10px; background:var(--j-surface2); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:900px){
  .j-stats-grid  { grid-template-columns:1fr 1fr; }
  .j-dash-layout { grid-template-columns:1fr; }
  .j-sidebar     { position:relative; top:0; }
  .j-sidebar-card { margin-bottom:10px; }
}
@media(max-width:640px){
  .j-stats-grid  { grid-template-columns:1fr 1fr; }
  .j-job-card    { flex-direction:column; }
  .j-job-right   { flex-direction:row; width:100%; justify-content:space-between; min-width:auto; }
  .j-nav-search  { display:none; }
  .j-filter-bar  { flex-direction:column; }
  .j-filter-bar input,.j-filter-bar select { min-width:100%; }
}
@media(max-width:480px){
  .j-stats-grid  { grid-template-columns:1fr; }
  .j-container,.j-dash-layout { padding:0 12px 12px; }
}

/* ── TRANSLATIONS (i18n via data-i18n attrs + JS) ─────────────── */
[data-i18n] { transition:opacity .15s; }

/* ── UTILITY ─────────────────────────────────────────────────── */
.j-divider { height:1px; background:var(--j-border); margin:16px 0; }
.j-empty-state { text-align:center; padding:48px 20px; color:var(--j-text3); }
.j-empty-state i { font-size:48px; display:block; margin-bottom:14px; opacity:.3; }
.j-empty-state h3 { font-size:17px; color:var(--j-text); margin-bottom:8px; }