/* ==========================================================================
   AI Recruiter — design system: "Corporate Premium"
   Deep navy + champagne gold, serif display type, elevated surfaces.
   Built for an MD-facing tool: authoritative, unhurried, precise.
   ========================================================================== */

:root{
  /* surface + structure */
  --ink:      #101A2E;   /* deep navy-charcoal — body text, dark surfaces */
  --steel:    #3C4762;   /* secondary navy-grey */
  --paper:    #F6F3EC;   /* warm ivory page background */
  --surface:  #FFFFFF;
  --field:    #FBF9F4;   /* warm off-white form fields */
  --line:     #E4DECE;   /* warm hairline */
  --line-soft:#EFEADD;
  --muted:    #756D5C;   /* warm grey-brown for secondary text */

  /* signal */
  --gold:     #B8903F;   /* primary accent — champagne gold */
  --gold-dk:  #96742E;
  --gold-lt:  #D8B876;
  --emerald:  #1F6F54;   /* strong / positive */
  --emerald-dk:#175A43;
  --terracotta:#B0611C;  /* review band / caution */
  --burgundy: #7E2340;   /* destructive */

  /* tints */
  --gold-t:      #FBF3E1;
  --emerald-t:   #E9F3EF;
  --terracotta-t:#FBEFE0;
  --burgundy-t:  #F8ECEF;

  /* legacy aliases so nothing elsewhere has to change name */
  --resin:    var(--gold);
  --resin-dk: var(--gold-dk);
  --amber:    var(--terracotta);
  --brick:    var(--burgundy);
  --resin-t:  var(--gold-t);
  --amber-t:  var(--terracotta-t);
  --brick-t:  var(--burgundy-t);

  /* type */
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "Inter", system-ui, -apple-system, sans-serif;

  /* metrics */
  --rail: 236px;
  --r: 6px;

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--body);
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

a{ color:var(--gold-dk); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:2px; }

::selection{ background:var(--gold-t); color:var(--ink); }

/* ==========================================================================
   Motion primitives — used throughout via animation / class
   ========================================================================== */

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes scaleIn{
  from{ opacity:0; transform:scale(.97); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes slideDown{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes shimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}
@keyframes goldPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(184,144,63,.28); }
  50%{ box-shadow:0 0 0 5px rgba(184,144,63,0); }
}
@keyframes railGlow{
  0%,100%{ opacity:.35; }
  50%{ opacity:.8; }
}

.container > *{ animation:fadeUp .5s var(--ease) both; }
.container > *:nth-child(1){ animation-delay:.02s; }
.container > *:nth-child(2){ animation-delay:.06s; }
.container > *:nth-child(3){ animation-delay:.10s; }
.container > *:nth-child(4){ animation-delay:.14s; }
.container > *:nth-child(5){ animation-delay:.18s; }
.container > *:nth-child(n+6){ animation-delay:.20s; }

/* Card-like lists get their own gentle stagger, on top of the container's */
.candidate-list > *,.jd-card,.data-table tbody tr{ animation:fadeUp .45s var(--ease) both; }
.candidate-list > *:nth-child(1),.jd-card:nth-of-type(1){ animation-delay:.04s; }
.candidate-list > *:nth-child(2),.jd-card:nth-of-type(2){ animation-delay:.09s; }
.candidate-list > *:nth-child(3),.jd-card:nth-of-type(3){ animation-delay:.14s; }
.candidate-list > *:nth-child(4),.jd-card:nth-of-type(4){ animation-delay:.19s; }
.candidate-list > *:nth-child(5),.jd-card:nth-of-type(5){ animation-delay:.24s; }
.candidate-list > *:nth-child(n+6),.jd-card:nth-of-type(n+6){ animation-delay:.28s; }
.data-table tbody tr:nth-child(1){ animation-delay:.03s; }
.data-table tbody tr:nth-child(2){ animation-delay:.06s; }
.data-table tbody tr:nth-child(3){ animation-delay:.09s; }
.data-table tbody tr:nth-child(4){ animation-delay:.12s; }
.data-table tbody tr:nth-child(n+5){ animation-delay:.15s; }

/* ==========================================================================
   1. App shell
   ========================================================================== */

.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--rail);
  flex:0 0 var(--rail);
  background:var(--ink);
  background-image:
    linear-gradient(180deg, rgba(184,144,63,.10) 0%, transparent 240px),
    linear-gradient(170deg,#141F38 0%,#080D1A 100%);
  color:#B7C0D4;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  transition:width .22s var(--ease), flex-basis .22s var(--ease);
  box-shadow: 2px 0 24px -8px rgba(0,0,0,.35);
}
.sidebar::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,rgba(184,144,63,.035) 0 1px,transparent 1px 26px);
  pointer-events:none;
}

.sidebar-top{
  padding:22px 18px 18px;
  border-bottom:1px solid rgba(184,144,63,.18);
  display:flex;
  align-items:flex-start;
  gap:10px;
  position:relative;
  z-index:1;
}
.brand-block{ display:flex; align-items:center; gap:11px; min-width:0; }
.brand-logo{ height:28px; width:auto; flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.brand-text{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
  color:#9CA8C2;
}
.sidebar-toggle{
  margin-left:auto;
  background:none; border:0;
  color:#5C6786;
  font-size:13px;
  cursor:pointer;
  padding:2px 5px;
  border-radius:var(--r);
  flex:0 0 auto;
  transition:color .18s ease, transform .18s ease;
}
.sidebar-toggle:hover{ color:var(--gold-lt); transform:scale(1.1); }

.sidebar-nav{ padding:16px 10px; display:flex; flex-direction:column; gap:2px; position:relative; z-index:1; }
.sidebar-nav a{
  display:flex; align-items:center; gap:12px;
  padding:10px 13px;
  color:#8E9AB8;
  border-radius:var(--r);
  font-size:14px;
  border-left:2px solid transparent;
  position:relative;
  transition:background .2s var(--ease-soft),color .2s var(--ease-soft),border-color .2s var(--ease-soft),padding-left .2s var(--ease-soft);
}
.sidebar-nav a:hover{ background:rgba(184,144,63,.08); color:#E4E9F5; text-decoration:none; padding-left:16px; }
.sidebar-nav a.active{
  background:linear-gradient(90deg, rgba(184,144,63,.16) 0%, rgba(184,144,63,.04) 100%);
  color:#fff;
  border-left-color:var(--gold);
}
.sidebar-nav a.active .nav-icon{ color:var(--gold-lt); animation:railGlow 2.4s ease-in-out infinite; }
.nav-icon{ width:16px; text-align:center; font-size:13px; flex:0 0 16px; opacity:.85; }
.nav-label{ white-space:nowrap; overflow:hidden; }

.sidebar-bottom{
  margin-top:auto;
  padding:16px 14px 20px;
  border-top:1px solid rgba(184,144,63,.18);
  position:relative; z-index:1;
}
.user-block{ display:flex; align-items:center; gap:10px; margin-bottom:12px; min-width:0; }
.user-avatar{
  width:31px; height:31px; flex:0 0 31px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, var(--gold-lt), var(--gold-dk));
  color:#1A1408;
  font-family:var(--display);
  font-weight:700;
  font-size:13px;
  border-radius:var(--r);
  box-shadow:0 2px 8px -2px rgba(184,144,63,.5);
}
.user-name{ font-size:13.5px; color:#D6DCEC; text-overflow:ellipsis; overflow:hidden; }
.user-role{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#66719A;
  display:block;
}
.logout-link{
  display:flex; align-items:center; gap:11px;
  color:#7B87A8; font-size:13.5px;
  padding:8px 2px;
  transition:color .18s ease;
}
.logout-link:hover{ color:var(--terracotta); text-decoration:none; }

/* collapsed rail */
.app-shell.rail-collapsed .sidebar{ width:60px; flex-basis:60px; }
.app-shell.rail-collapsed .nav-label,
.app-shell.rail-collapsed .brand-text,
.app-shell.rail-collapsed .user-name,
.app-shell.rail-collapsed .user-role{ display:none; }
.app-shell.rail-collapsed .sidebar-nav a{ justify-content:center; padding:11px 0; }
.app-shell.rail-collapsed .sidebar-nav a:hover{ padding-left:0; }
.app-shell.rail-collapsed .sidebar-top{ flex-direction:column; align-items:center; gap:8px; }
.app-shell.rail-collapsed .sidebar-toggle{ margin-left:0; transform:rotate(180deg); }
.app-shell.rail-collapsed .user-block{ justify-content:center; }
.app-shell.rail-collapsed .logout-link{ justify-content:center; }

.main-area{ flex:1; min-width:0; display:flex; flex-direction:column; }
.container{ max-width:1080px; width:100%; margin:0 auto; padding:38px 36px 76px; }

/* ==========================================================================
   2. Typography + page head
   ========================================================================== */

.page-head{ margin-bottom:28px; }
.eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-dk);
  margin:0 0 8px;
  font-weight:600;
}
h1{
  font-family:var(--display);
  font-weight:700;
  font-style:normal;
  font-size:clamp(26px,3.2vw,35px);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 9px;
  color:var(--ink);
}
h2{
  font-family:var(--display);
  font-weight:600;
  font-size:17px;
  letter-spacing:-.003em;
  margin:0 0 4px;
  color:var(--ink);
}
h3{ font-family:var(--display); font-weight:600; font-size:15px; margin:0 0 6px; color:var(--ink); }

.lede{ margin:0; color:var(--muted); font-size:14.5px; max-width:64ch; }
.muted{ color:var(--muted); }
.hint{ font-size:13px; color:var(--muted); margin:6px 0 0; }
.text-warn{ color:var(--terracotta); }

.section-label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 10px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
}
.section-label::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line-soft), transparent);
}

/* ==========================================================================
   3. Cards + panels
   ========================================================================== */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 26px;
  margin-bottom:18px;
  box-shadow:0 1px 2px rgba(16,26,46,.04), 0 8px 24px -16px rgba(16,26,46,.10);
  transition:box-shadow .28s var(--ease-soft), transform .28s var(--ease-soft), border-color .28s var(--ease-soft);
}
.card:hover{
  box-shadow:0 2px 4px rgba(16,26,46,.05), 0 16px 32px -14px rgba(16,26,46,.16);
  border-color:#DCCFA8;
}
.card-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:16px;
}
.card-head p{ margin:2px 0 0; }

.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  margin-bottom:22px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(16,26,46,.04), 0 8px 24px -16px rgba(16,26,46,.10);
}
.stat{
  background:var(--surface);
  padding:17px 19px;
  position:relative;
  transition:background .22s ease;
}
.stat:hover{ background:var(--gold-t); }
.stat-num{
  font-family:var(--display);
  font-weight:700;
  font-size:28px;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.stat-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:7px;
  font-weight:500;
}
.stat.is-live{ position:relative; }
.stat.is-live .stat-num{ color:var(--gold-dk); }
.stat.is-live::before{
  content:"";
  position:absolute; top:12px; right:12px;
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  animation:goldPulse 2s ease-in-out infinite;
}

.empty{
  border:1px dashed var(--line);
  border-radius:var(--r);
  background:var(--surface);
  padding:38px 26px;
  text-align:center;
  color:var(--muted);
  animation:fadeIn .5s ease both;
}
.empty strong{ display:block; color:var(--ink); font-family:var(--display); font-size:16px; margin-bottom:5px; }

/* ==========================================================================
   4. Forms
   ========================================================================== */

.form-stack{ display:flex; flex-direction:column; }
.form-stack label,
.field-label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
  margin:16px 0 7px;
  display:block;
  font-weight:600;
}
.form-stack > label:first-of-type{ margin-top:0; }
.form-stack label .muted,
.form-stack label .text-warn{
  font-family:var(--body);
  letter-spacing:normal;
  text-transform:none;
  font-size:12px;
  font-weight:400;
}

input[type="text"],input[type="email"],input[type="password"],
input[type="date"],input[type="time"],input[type="file"],
select,textarea{
  width:100%;
  font-family:var(--body);
  font-size:14.5px;
  color:var(--ink);
  background:var(--field);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:11px 14px;
  outline:none;
  transition:border-color .18s var(--ease-soft),background .18s var(--ease-soft),box-shadow .18s var(--ease-soft);
}
textarea{ resize:vertical; min-height:76px; line-height:1.55; }
select{ appearance:none; background-image:none; cursor:pointer; padding-right:34px; }
.select-wrap{ position:relative; }
.select-wrap::after{
  content:"";
  position:absolute; right:14px; top:50%;
  width:6px; height:6px;
  border-right:1.5px solid var(--steel);
  border-bottom:1.5px solid var(--steel);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
input:hover,select:hover,textarea:hover{ border-color:var(--gold-lt); }
input:focus,select:focus,textarea:focus{
  background:var(--surface);
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,144,63,.16);
}
input[type="file"]{ padding:9px 12px; font-family:var(--mono); font-size:12.5px; }
input[type="file"]::file-selector-button{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--ink);
  color:#fff;
  border:0;
  border-radius:var(--r);
  padding:7px 12px;
  margin-right:12px;
  cursor:pointer;
  transition:background .18s ease;
}
input[type="file"]::file-selector-button:hover{ background:var(--gold-dk); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.inline-form{ display:flex; flex-direction:column; }
.inline-form button{ margin-top:14px; align-self:flex-start; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

button,.btn{
  font-family:var(--body);
  font-weight:600;
  font-size:14px;
  letter-spacing:.005em;
  border-radius:var(--r);
  padding:11px 19px;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .2s var(--ease-soft),border-color .2s var(--ease-soft),color .2s var(--ease-soft),transform .08s ease,box-shadow .2s var(--ease-soft);
  display:inline-block;
  text-align:center;
  position:relative;
  overflow:hidden;
}
button::after,.btn::after{
  content:"";
  position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-18deg);
  transition:left .55s var(--ease);
  pointer-events:none;
}
button:hover::after,.btn:hover::after{ left:130%; }
button:active,.btn:active{ transform:translateY(1px) scale(.99); }

button[type="submit"],.btn-primary{
  background:linear-gradient(155deg, #182645, var(--ink)); color:#fff; border-color:var(--ink);
  box-shadow:0 2px 8px -2px rgba(16,26,46,.35);
}
button[type="submit"]:hover,.btn-primary:hover{
  background:linear-gradient(155deg, #223460, #182645); border-color:#223460; color:#fff; text-decoration:none;
  box-shadow:0 4px 14px -3px rgba(16,26,46,.42);
}

.btn-secondary,.btn-download{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--line);
}
.btn-secondary:hover,.btn-download:hover{
  border-color:var(--gold); background:var(--gold-t); text-decoration:none;
}

.btn-approve,.btn-approve-link{
  background:linear-gradient(155deg, #2A8266, var(--emerald)); color:#fff; border-color:var(--emerald);
  box-shadow:0 2px 8px -2px rgba(31,111,84,.35);
}
.btn-approve:hover,.btn-approve-link:hover{
  background:linear-gradient(155deg, #237058, var(--emerald-dk)); border-color:var(--emerald-dk); color:#fff; text-decoration:none;
}

.btn-reject,.btn-reject-link{
  background:var(--surface); color:var(--burgundy); border-color:#E6C7D1;
}
.btn-reject:hover,.btn-reject-link:hover{
  background:var(--burgundy-t); border-color:var(--burgundy); text-decoration:none;
}

.btn-ghost{
  background:none; border-color:transparent; color:var(--muted);
  padding:8px 10px; font-size:13px;
}
.btn-ghost:hover{ color:var(--burgundy); background:var(--burgundy-t); text-decoration:none; }

.btn-sm{ padding:8px 14px; font-size:13px; }

button:disabled{ opacity:.5; cursor:not-allowed; }
button:disabled::after{ display:none; }
button:disabled:active{ transform:none; }

.actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.actions form{ display:inline; }

/* ==========================================================================
   6. Badges + decision tags
   ========================================================================== */

.badge{
  display:inline-block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid;
  white-space:nowrap;
}
.badge-strong  { color:var(--emerald-dk); background:var(--emerald-t); border-color:#BFDDD1; }
.badge-shortlist{ color:var(--terracotta);   background:var(--terracotta-t); border-color:#EFD5B0; }
.badge-low     { color:var(--muted);    background:var(--field);   border-color:var(--line); }
.badge-pending { color:var(--steel);    background:var(--field);   border-color:var(--line); }
.badge-reject  { color:var(--burgundy);    background:var(--burgundy-t); border-color:#EBC5D0; }

.decision-tag{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.02em;
  padding:10px 13px;
  border-radius:var(--r);
  border-left:3px solid;
  margin-top:12px;
  animation:slideDown .3s var(--ease-soft) both;
}
.decision-selected{ background:var(--emerald-t); border-left-color:var(--emerald); color:var(--emerald-dk); }
.decision-rejected{ background:var(--burgundy-t); border-left-color:var(--burgundy); color:var(--burgundy); }
.decision-warn    { background:var(--terracotta-t); border-left-color:var(--terracotta); color:var(--terracotta); }

/* ==========================================================================
   7. The preform gauge — match % drawn as a filling mould cavity
   ========================================================================== */

.gauge{ display:block; flex:0 0 auto; animation:scaleIn .4s var(--ease) both; }
.gauge-shell{ fill:var(--line); }
.gauge-fill{ fill:var(--muted); }
.gauge.tone-strong    .gauge-fill{ fill:var(--emerald); }
.gauge.tone-shortlist .gauge-fill{ fill:var(--terracotta); }
.gauge.tone-low       .gauge-fill{ fill:#BFB49A; }
.gauge-tick{ stroke:var(--surface); stroke-width:.5; }

.gauge-block{ display:flex; align-items:center; gap:12px; }
.gauge-read{ text-align:right; }
.score-num{
  font-family:var(--display);
  font-weight:700;
  font-size:23px;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.score-unit{ font-size:13px; font-weight:600; color:var(--muted); }

/* ==========================================================================
   8. Candidate / role lists
   ========================================================================== */

.candidate-list{ display:flex; flex-direction:column; gap:12px; }

.candidate-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--line);
  border-radius:var(--r);
  padding:19px 21px;
  box-shadow:0 1px 2px rgba(16,26,46,.03);
  transition:box-shadow .25s var(--ease-soft), transform .25s var(--ease-soft), border-left-color .25s var(--ease-soft);
}
.candidate-card:hover{
  box-shadow:0 10px 26px -14px rgba(16,26,46,.22);
  transform:translateY(-1px);
}
.candidate-card.tone-strong   { border-left-color:var(--emerald); }
.candidate-card.tone-shortlist{ border-left-color:var(--terracotta); }
.candidate-card.tone-low      { border-left-color:var(--line); }

.candidate-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; margin-bottom:10px;
}
.candidate-name{
  font-family:var(--display);
  font-weight:600;
  font-size:17px;
  letter-spacing:-.005em;
  color:var(--ink);
}
.candidate-file{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--muted);
  margin-top:3px;
  word-break:break-word;
}
.candidate-score{ text-align:right; flex:0 0 auto; }
.candidate-reason{
  margin:0 0 4px;
  font-size:14px;
  color:#33405E;
  line-height:1.6;
}
.candidate-actions{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:14px; }
.candidate-actions form{ display:inline; }

.meta-row{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  font-family:var(--mono); font-size:11.5px; color:var(--muted);
  margin:10px 0 0;
}
.meta-row b{ color:var(--ink); font-weight:600; }

/* ==========================================================================
   9. JD blocks
   ========================================================================== */

.jd-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:19px 21px;
  margin-bottom:12px;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(16,26,46,.03);
  transition:box-shadow .25s var(--ease-soft);
}
.jd-card:hover{ box-shadow:0 10px 26px -14px rgba(16,26,46,.2); }
.jd-card:last-child{ margin-bottom:0; }
.jd-card-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line-soft);
}
.jd-card-head strong{ font-family:var(--display); font-size:17px; color:var(--ink); }
.jd-card-head .muted{ font-family:var(--mono); font-size:11px; }

.jd-text{ font-size:14px; line-height:1.7; color:#33405E; }
.jd-text h3,.jd-text h4{ font-family:var(--display); font-size:14px; margin:16px 0 6px; color:var(--ink); }
.jd-text ul{ margin:6px 0; padding-left:20px; }
.jd-text li{ margin-bottom:4px; }
.jd-text p{ margin:0 0 10px; }

details.jd-fold summary{
  cursor:pointer;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold-dk);
  padding:6px 0;
  list-style:none;
  transition:color .18s ease;
}
details.jd-fold summary:hover{ color:var(--gold); }
details.jd-fold summary::-webkit-details-marker{ display:none; }
details.jd-fold summary::before{ content:"▸ "; }
details.jd-fold[open] summary::before{ content:"▾ "; }
details.jd-fold[open] summary{ margin-bottom:8px; }
details.jd-fold[open] .jd-text{ animation:fadeUp .3s var(--ease-soft) both; }

.jd-actions{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
}
.jd-actions form{ display:flex; gap:10px; align-items:flex-end; }
.jd-actions .approve-field{ display:flex; flex-direction:column; }
.jd-actions .approve-field label{ margin:0 0 6px; }
.jd-actions .approve-field input{ width:170px; }

/* ==========================================================================
   10. Progress
   ========================================================================== */

.progress-wrap{ margin:10px 0 4px; }
.progress-bar{
  height:7px;
  background:var(--field);
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--gold-dk), var(--gold), var(--gold-lt));
  background-size:200% 100%;
  border-radius:999px;
  transition:width .25s var(--ease-soft);
  animation:shimmer 1.6s linear infinite;
}
.progress-text{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--muted);
  margin-top:9px;
  letter-spacing:.02em;
}

.result-list{ margin-top:16px; display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.result-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  background:var(--surface);
  font-size:14px;
  animation:fadeUp .3s var(--ease-soft) both;
}
.result-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-pct{ font-family:var(--mono); font-size:13px; font-weight:600; flex:0 0 auto; }
.result-error .result-name{ color:var(--burgundy); }

/* ==========================================================================
   11. Question paper
   ========================================================================== */

.question-list{ margin:14px 0 0; padding-left:26px; }
.question-list li{
  margin-bottom:16px;
  padding-left:6px;
  font-size:14.5px;
  line-height:1.65;
}
.question-list li::marker{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  color:var(--gold-dk);
}
.q-category{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:3px;
}
.answer-rule{
  margin-top:10px;
  border-bottom:1px dashed var(--line);
  height:16px;
}

.documents-box{
  background:var(--terracotta-t);
  border:1px solid #EFD5B0;
  border-radius:var(--r);
  padding:14px 17px;
  margin-top:16px;
  font-size:13.5px;
}
.documents-box ul{ margin:8px 0 0; padding-left:20px; }
.documents-box li{ margin-bottom:3px; }
.documents-box .hint{ margin-top:10px; }

/* ==========================================================================
   12. Flash messages
   ========================================================================== */

.flash-wrap{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.flash{
  font-size:14px;
  line-height:1.5;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--steel);
  border-radius:var(--r);
  padding:12px 16px;
  animation:slideDown .32s var(--ease-soft) both;
  box-shadow:0 4px 14px -8px rgba(16,26,46,.18);
}
.flash::before{
  content:attr(data-label);
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  margin-bottom:3px;
}
.flash-error,.flash-danger{ border-left-color:var(--burgundy); background:var(--burgundy-t); }
.flash-success{ border-left-color:var(--emerald); background:var(--emerald-t); }
.flash-warning{ border-left-color:var(--terracotta); background:var(--terracotta-t); }

/* ==========================================================================
   12b. Master-data tables — list, search, add
   ========================================================================== */

.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:19px 23px;
  background:linear-gradient(180deg, #FDFBF6, var(--surface));
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;
}
.panel-head h2{
  margin:0;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold-dk);
}
.panel-body{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:0 0 var(--r) var(--r);
  padding:19px 23px 23px;
  box-shadow:0 1px 2px rgba(16,26,46,.04), 0 8px 24px -16px rgba(16,26,46,.10);
}

.search-row{ margin-bottom:16px; max-width:340px; position:relative; }
.search-row input{ padding-right:38px; }
.search-row::after{
  content:"";
  position:absolute; right:14px; top:50%;
  width:11px; height:11px;
  border:1.5px solid var(--muted);
  border-radius:50%;
  transform:translateY(-70%);
  pointer-events:none;
}

.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.data-table th{
  text-align:left;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--steel);
  font-weight:600;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.data-table td{
  padding:13px 12px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}
.data-table tbody tr:last-child td{ border-bottom:0; }
.data-table tbody tr{ transition:background .16s ease; }
.data-table tbody tr:hover{ background:var(--gold-t); }
.data-table .num{
  font-family:var(--mono); font-size:12.5px; color:var(--muted); width:56px;
}
.data-table .name{ font-weight:600; }
.data-table .desc{ color:var(--muted); }
.data-table .actions-cell{ white-space:nowrap; width:1%; }
.data-table .actions-cell form{ display:inline; }

.status-pill{
  display:inline-block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid;
  cursor:pointer;
  background:none;
  transition:all .18s ease;
}
.status-active{ color:#fff; background:var(--emerald); border-color:var(--emerald); }
.status-active:hover{ background:var(--emerald-dk); border-color:var(--emerald-dk); }
.status-inactive{ color:var(--muted); background:var(--field); border-color:var(--line); }
.status-inactive:hover{ border-color:var(--gold); color:var(--gold-dk); }

.icon-btn{
  background:none; border:1px solid var(--line);
  border-radius:var(--r);
  padding:6px 10px;
  color:var(--steel);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:all .18s ease;
}
.icon-btn:hover{ border-color:var(--gold); color:var(--gold-dk); text-decoration:none; }
.icon-btn.danger:hover{ border-color:var(--burgundy); color:var(--burgundy); }

.no-results{
  padding:26px 12px; text-align:center; color:var(--muted); font-size:14px;
}

.form-panel{ max-width:560px; }
.form-panel .form-stack label:first-of-type{ margin-top:0; }
.form-actions{
  display:flex; gap:10px; align-items:center;
  margin-top:26px; padding-top:18px;
  border-top:1px solid var(--line-soft);
}

@media (max-width:640px){
  .data-table thead{ display:none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td{ display:block; width:100%; }
  .data-table tr{
    border:1px solid var(--line); border-radius:var(--r);
    margin-bottom:10px; padding:6px 4px;
  }
  .data-table td{ border:0; padding:6px 12px; }
  .data-table td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); margin-bottom:2px;
  }
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width:900px){
  .grid-2{ grid-template-columns:1fr; gap:26px; }
  .container{ padding:26px 20px 60px; }
}

@media (max-width:760px){
  .app-shell{ flex-direction:column; }
  .sidebar{
    width:100%; flex-basis:auto; height:auto; position:static;
    flex-direction:row; align-items:center; gap:10px;
    padding:0 12px; overflow-x:auto;
  }
  .sidebar-top{ border-bottom:0; border-right:1px solid rgba(184,144,63,.18); padding:12px 14px 12px 4px; }
  .brand-text{ display:none; }
  .sidebar-toggle{ display:none; }
  .sidebar-nav{ flex-direction:row; padding:8px 0; gap:2px; }
  .sidebar-nav a{ border-left:0; border-bottom:2px solid transparent; padding:8px 11px; }
  .sidebar-nav a:hover{ padding-left:11px; }
  .sidebar-nav a.active{ border-left:0; border-bottom-color:var(--gold); }
  .nav-label{ display:none; }
  .nav-icon{ font-size:15px; }
  .sidebar-bottom{
    margin-top:0; margin-left:auto;
    border-top:0; border-left:1px solid rgba(184,144,63,.18);
    padding:10px 4px 10px 14px;
    display:flex; align-items:center; gap:12px;
  }
  .user-block{ margin-bottom:0; }
  .user-name,.user-role{ display:none; }
  .candidate-top{ flex-direction:column; gap:12px; }
  .candidate-score{ text-align:left; }
  .jd-actions form{ flex-wrap:wrap; }
  .jd-actions .approve-field input{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  button:active,.btn:active{ transform:none; }
  .progress-fill{ animation:none; }
}

/* ==========================================================================
   14. Print — question papers go on paper
   ========================================================================== */

@media print{
  .sidebar,.flash-wrap,.actions,.candidate-actions,.no-print{ display:none !important; }
  body{ background:#fff; font-size:12pt; }
  .container{ max-width:none; padding:0; }
  .container > *{ animation:none !important; }
  .card{ border:0; padding:0; margin-bottom:18pt; break-inside:avoid; box-shadow:none; }
  .question-list li{ break-inside:avoid; margin-bottom:20pt; }
  .answer-rule{ height:38pt; border-bottom:1px solid #999; }
  h1{ font-size:19pt; }
  a{ color:#000; }
}