/* ─── Talentfly Jobs DESIGN SYSTEM ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--bg);color:var(--text);transition:background .2s,color .2s}
button,input,textarea,select{font-family:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:3px}

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  --accent:         #FF1493;
  --accent-strong:  #C7006F;
  --accent-soft:    #FFE4F3;
  --accent-glow:    rgba(255,20,147,0.35);
  --accent-grad:    linear-gradient(135deg,#FF1493 0%,#FF69B4 100%);

  --bg:             #F7F8FB;
  --surface:        #FFFFFF;
  --surface2:       #FBFBFD;
  --border:         #E6E8EE;
  --border-soft:    #EFF1F5;
  --text:           #0B0F22;
  --text-muted:     #5B6478;
  --text-subtle:    #8B92A4;
  --shadow:         0 1px 2px rgba(11,15,34,.04),0 8px 24px -8px rgba(11,15,34,.08);
  --shadow-lg:      0 4px 12px rgba(11,15,34,.06),0 24px 48px -12px rgba(11,15,34,.18);
  --nav-bg:         rgba(255,255,255,.88);
  --chip-bg:        #F1F3F8;
  --hairline:       rgba(11,15,34,.06);

  --success:  #10B981; --success-soft: #D1FAE5; --success-fg: #047857;
  --warning:  #F59E0B; --warning-soft: #FEF3C7; --warning-fg: #92400E;
  --danger:   #EF4444; --danger-soft:  #FEE2E2; --danger-fg:  #B91C1C;
}
[data-theme="dark"] {
  --bg:         #0A0D1C;
  --surface:    #11142A;
  --surface2:   #161B36;
  --border:     #22273F;
  --border-soft:#1A1E36;
  --text:       #F4F5FB;
  --text-muted: #A1A6BC;
  --text-subtle:#6E7491;
  --shadow:     0 2px 4px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.4);
  --shadow-lg:  0 8px 16px rgba(0,0,0,.4),0 32px 64px rgba(0,0,0,.55);
  --nav-bg:     rgba(10,13,28,.88);
  --chip-bg:    #1A1E36;
  --hairline:   rgba(255,255,255,.06);
}

/* ─── LAYOUT ────────────────────────────────────────────────────────────── */
.container{max-width:1312px;margin:0 auto;padding:0 64px}
@media(max-width:900px){.container{padding:0 24px}}
.page-content{min-height:calc(100vh - 72px)}

/* ─── NAV ───────────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:100;height:72px;
  display:flex;align-items:center;gap:32px;
  padding:0 64px;
  background:var(--nav-bg);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--hairline);
}
.nav-logo{display:flex;align-items:center}
.nav-logo-img{height:40px;width:auto;display:block;object-fit:contain}
.mobile-nav-logo{height:32px;width:auto}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:500;color:var(--text-muted)}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active{color:var(--text);font-weight:600}
.nav-spacer{flex:1}
.nav-actions{display:flex;align-items:center;gap:8px}
.user-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--border);cursor:pointer}
.user-initials{width:36px;height:36px;border-radius:50%;background:var(--accent-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;cursor:pointer;flex:none}

/* ─── BUTTONS ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 16px;height:40px;border-radius:10px;
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  border:none;cursor:pointer;white-space:nowrap;
  transition:transform .12s,box-shadow .2s,background .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-primary{background:var(--accent-grad);color:#fff;box-shadow:0 8px 24px -8px var(--accent-glow)}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid transparent}
.btn-ghost:hover{background:var(--chip-bg);color:var(--text)}
.btn-danger{background:var(--danger-soft);color:var(--danger-fg);border:1px solid #FECACA}
.btn-success{background:var(--success-soft);color:var(--success-fg);border:1px solid #A7F3D0}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn-lg{height:48px;padding:0 22px;font-size:15px;border-radius:12px}
.btn-xl{height:56px;padding:0 28px;font-size:16px;border-radius:14px}
.btn-full{width:100%}
.btn svg{flex:none}

/* ─── CARDS ─────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow);
}
.card-padded{padding:20px}
.card:hover{box-shadow:var(--shadow-lg)}

/* ─── BADGE ─────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
}
.badge-accent{background:var(--accent-soft);color:var(--accent-strong)}
.badge-success{background:var(--success-soft);color:var(--success-fg)}
.badge-warning{background:var(--warning-soft);color:var(--warning-fg)}
.badge-danger{background:var(--danger-soft);color:var(--danger-fg)}
.badge-neutral{background:var(--chip-bg);color:var(--text-muted)}
.badge-dark{background:var(--text);color:var(--surface)}

/* ─── FORM ───────────────────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:13px;font-weight:600;color:var(--text)}
.form-input{
  height:44px;padding:0 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text);font-size:14px;
  transition:border-color .15s,box-shadow .15s;
  outline:none;
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-input::placeholder{color:var(--text-subtle)}
.form-textarea{
  padding:12px 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text);font-size:14px;resize:vertical;
  transition:border-color .15s,box-shadow .15s;
  outline:none;width:100%;
}
.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-select{
  height:44px;padding:0 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text);font-size:14px;cursor:pointer;outline:none;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;
}
.form-hint{font-size:12px;color:var(--text-muted)}
.form-error{font-size:12px;color:var(--danger-fg);font-weight:500}

/* ─── TABLE ──────────────────────────────────────────────────────────────── */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;padding:10px 16px;font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}
.table td{padding:14px 16px;border-bottom:1px solid var(--border-soft);color:var(--text)}
.table tr:hover td{background:var(--surface2)}
.table tr:last-child td{border-bottom:none}

/* ─── CHIP ───────────────────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:600;
  background:var(--chip-bg);color:var(--text);
  border:1px solid var(--border);cursor:pointer;
  letter-spacing:-.005em;transition:background .12s,color .12s;
}
.chip.active,.chip:hover{background:var(--accent);color:#fff;border-color:transparent}
.chip-sm{padding:4px 10px;font-size:11px;border-radius:6px}

/* ─── PROGRESS ───────────────────────────────────────────────────────────── */
.progress-bar{height:6px;background:var(--border-soft);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent-grad);border-radius:999px;transition:width .4s}

/* ─── AVATAR ─────────────────────────────────────────────────────────────── */
.avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-grad);color:#fff;
  font-size:15px;font-weight:700;
}

/* ─── ALERT ──────────────────────────────────────────────────────────────── */
.alert{padding:14px 18px;border-radius:12px;font-size:14px;display:flex;align-items:flex-start;gap:12px}
.alert-info{background:var(--accent-soft);color:var(--accent-strong);border:1px solid #C7D2FE}
.alert-success{background:var(--success-soft);color:var(--success-fg);border:1px solid #A7F3D0}
.alert-warning{background:var(--warning-soft);color:var(--warning-fg);border:1px solid #FDE68A}
.alert-danger{background:var(--danger-soft);color:var(--danger-fg);border:1px solid #FECACA}

/* ─── MODAL ──────────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:500;padding:24px;
}
.modal{background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);max-width:540px;width:100%;max-height:90vh;overflow-y:auto}
.modal-header{padding:24px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}

/* ─── SECTION HEADERS ────────────────────────────────────────────────────── */
.section-badge{margin-bottom:12px}
.section-title{font-size:42px;font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--text)}
.section-body{font-size:17px;color:var(--text-muted);line-height:1.55;max-width:600px}

/* ─── SKELETON LOADER ────────────────────────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--border-soft) 25%,var(--border) 50%,var(--border-soft) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ─── COURSE CARD ────────────────────────────────────────────────────────── */
.course-card{
  border-radius:14px;overflow:hidden;background:var(--surface);
  border:1px solid var(--border);display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .15s;
}
.course-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.course-thumb{height:160px;display:flex;align-items:center;justify-content:center;font-size:52px;position:relative}
.course-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}

/* ─── JOB CARD ───────────────────────────────────────────────────────────── */
.job-card{padding:18px;border-radius:14px;background:var(--surface);border:1px solid var(--border);transition:box-shadow .15s,border-color .15s;cursor:pointer}
.job-card:hover,.job-card.active{box-shadow:var(--shadow-lg);border-color:var(--accent)}

/* ─── SIDEBAR NAV (admin) ────────────────────────────────────────────────── */
.sidebar{
  width:240px;min-height:100vh;background:#0A0D1C;color:#F4F5FB;
  display:flex;flex-direction:column;border-right:1px solid #1A1E36;
  flex:none;
}
.sidebar-logo{padding:20px 18px 16px;border-bottom:1px solid #1A1E36;display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.025em}
.sidebar-section{padding:8px 12px 0;font-size:10px;font-weight:700;color:#6E7491;letter-spacing:.1em;text-transform:uppercase;margin-top:12px}
.sidebar-link{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:13px;font-weight:500;color:#A1A6BC;cursor:pointer;margin:1px 0;
  transition:background .12s,color .12s;border:1px solid transparent;
}
.sidebar-link:hover{background:#161B36;color:#F4F5FB}
.sidebar-link.active{background:linear-gradient(180deg,#1F2547,#161B36);color:#F4F5FB;border-color:#2A3158}
.sidebar-badge{margin-left:auto;font-size:11px;padding:1px 6px;border-radius:4px;background:#1A1E36;color:#A1A6BC;font-weight:700}

/* ─── EMPTY STATE ────────────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:80px 24px;color:var(--text-muted)}
.empty-state svg{margin:0 auto 16px;opacity:.4}
.empty-state h3{font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px}

/* ─── TOAST ──────────────────────────────────────────────────────────────── */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:8px}
.toast{
  padding:14px 18px;border-radius:12px;font-size:14px;font-weight:500;
  background:var(--text);color:var(--bg);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:10px;min-width:280px;
  animation:slideIn .25s ease;
}
.toast-success{background:#047857;color:#fff}
.toast-error{background:#B91C1C;color:#fff}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ─── NAV SKELETON (shows while JS hydrates) ─────────────────────────────── */
#nav-root:empty{
  height:72px;display:block;
  background:var(--nav-bg);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--hairline);
  position:sticky;top:0;z-index:100;
}

/* ─── MOBILE NAV DRAWER ──────────────────────────────────────────────────── */
.mob-hamburger{
  display:none;align-items:center;justify-content:center;
  width:36px;height:36px;border:none;background:transparent;
  cursor:pointer;color:var(--text);border-radius:8px;flex:none;
}
.mob-hamburger:hover{background:var(--chip-bg)}
.mobile-nav-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:200;backdrop-filter:blur(2px);
}
.mobile-nav-overlay.open{display:block}
.mobile-nav{
  position:fixed;top:0;right:-100%;width:280px;max-width:85vw;
  height:100vh;background:var(--surface);z-index:201;
  box-shadow:-8px 0 32px rgba(0,0,0,.18);
  transition:right .25s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;
}
.mobile-nav.open{right:0}
.mobile-nav-header{
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex:none;
}
.mobile-nav-logo{height:32px;width:auto}
.mobile-nav-links{padding:12px 8px;display:flex;flex-direction:column;gap:2px;flex:1}
.mobile-nav-link{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:10px;font-size:15px;font-weight:500;
  color:var(--text-muted);text-decoration:none;
  transition:background .12s,color .12s;
}
.mobile-nav-link:hover,.mobile-nav-link.active{background:var(--surface2);color:var(--text)}
.mobile-nav-divider{height:1px;background:var(--border);margin:8px 12px}
.mobile-nav-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;gap:8px;flex-direction:column;flex:none}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .nav{padding:0 16px;gap:12px}
  .nav-links{display:none}
  .nav-actions .btn-secondary,.nav-actions .btn-primary{display:none}
  .mob-hamburger{display:flex}
  .container{padding:0 16px}
  .sidebar{display:none}
  .section-title{font-size:clamp(22px,6vw,38px)}
  .section-body{font-size:15px}
}
@media(max-width:480px){
  .nav{padding:0 12px;height:60px}
  .nav-logo-img{height:32px}
  .modal{border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;max-width:100%;max-height:92vh}
  .modal-overlay{align-items:flex-end;padding:0}
  .toast-container{left:12px;right:12px;bottom:16px}
  .toast{min-width:0;width:100%}
  .btn-xl{height:50px;font-size:15px}
}

/* ─── TABLE SCROLL ON MOBILE ─────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:768px){
  .table th,.table td{padding:10px 12px;white-space:nowrap}
}

/* ─── PAGE TRANSITIONS ───────────────────────────────────────────────────── */
@keyframes pageFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
body{animation:pageFadeIn .18s ease both}
body.page-leaving{opacity:0;transform:translateY(-4px);transition:opacity .12s ease,transform .12s ease;pointer-events:none}