/* ==========================================================
   Prime HR Advisory - recruitment tracker
   Operations console: deep slate shell, paper workspace,
   navy as the only brand accent. Green/amber/red are
   reserved for role state and never used decoratively.
   ========================================================== */

:root{
  --ink:#12161D;
  --ink-2:#1B212B;
  --ink-3:#2A323F;
  --paper:#F6F7F9;
  --surface:#FFFFFF;
  --line:#E3E7ED;
  --line-2:#EEF1F5;
  --text:#161B22;
  --muted:#6B7482;
  --faint:#98A1AE;

  --navy:#22406E;
  --navy-2:#2E5793;
  --navy-soft:#EAF0F9;

  --good:#1E7A3C;  --good-bg:#E6F3EA;
  --warn:#A96700;  --warn-bg:#FCF0DC;
  --bad:#AC2A20;   --bad-bg:#FBE7E4;
  --calm:#5A6373;  --calm-bg:#EEF0F3;
  --violet:#5B3E9B;--violet-bg:#EEE9F8;

  --r:8px; --r-sm:5px;
  --shadow:0 1px 2px rgba(18,22,29,.05), 0 8px 24px rgba(18,22,29,.06);
  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display:"Archivo", "Inter", sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--paper); color:var(--text);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); margin:0; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
.num{font-variant-numeric:tabular-nums}

/* ---------------- sign in / install ---------------- */
.auth-body{
  min-height:100vh; display:grid; place-items:center;
  background:
    radial-gradient(1200px 500px at 50% -10%, #1E2836 0%, transparent 60%),
    var(--ink);
  padding:24px;
}
.auth-card{
  width:100%; max-width:380px; background:var(--surface);
  border-radius:12px; padding:34px 30px 30px; box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.auth-mark{
  font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.16em;
  color:var(--ink); margin-bottom:22px;
}
.auth-mark span{color:var(--navy-2)}
.auth-title{font-size:23px; font-weight:600; margin-bottom:6px}
.auth-note{color:var(--muted); font-size:13px; margin:0 0 18px}
.auth-note.err{color:var(--bad); background:var(--bad-bg); padding:9px 11px; border-radius:var(--r-sm)}
.auth-note.ok{color:var(--good); background:var(--good-bg); padding:9px 11px; border-radius:var(--r-sm)}
.auth-form{display:grid; gap:14px}
.auth-form label{display:grid; gap:6px; font-size:12px; font-weight:500; color:var(--muted)}
.auth-form input{
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); font-size:14px;
}
.auth-form input:focus{outline:2px solid var(--navy-2); outline-offset:1px; border-color:transparent}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding:8px 14px; border-radius:var(--r-sm); border:1px solid transparent;
  font-size:13px; font-weight:500; cursor:pointer; background:transparent;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
  white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--navy-2); outline-offset:2px}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-ghost{border-color:var(--line); background:var(--surface); color:var(--text)}
.btn-ghost:hover{background:var(--line-2)}
.btn-danger{background:var(--bad-bg); color:var(--bad); border-color:#F1CFCA}
.btn-danger:hover{background:#F7DAD5}
.btn-block{width:100%}
.btn-sm{padding:5px 10px; font-size:12px}
.btn[disabled]{opacity:.55; cursor:not-allowed}

/* ---------------- shell ---------------- */
.app{display:grid; grid-template-columns:212px 1fr; min-height:100vh}
.rail{
  background:var(--ink); color:#C6CCD6; display:flex; flex-direction:column;
  padding:20px 0 14px; position:sticky; top:0; height:100vh;
}
.rail-mark{
  font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.16em;
  color:#fff; padding:0 20px 22px;
}
.rail-mark span{color:#7FA0D4}
.rail-nav{display:grid; gap:2px; padding:0 10px}
.rail-nav a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-sm);
  font-size:13px; font-weight:500; color:#AEB7C4; transition:background .12s, color .12s;
}
.rail-nav a:hover{background:var(--ink-2); color:#fff}
.rail-nav a.on{background:var(--ink-3); color:#fff}
.ri{width:15px; text-align:center; font-size:12px; opacity:.75}
.rail-foot{margin-top:auto; padding:0 12px}
.rail-user{display:flex; gap:10px; align-items:center; padding:12px 8px; border-top:1px solid #242C38; margin-bottom:6px}
.rail-avatar{
  width:30px; height:30px; border-radius:50%; background:var(--navy-2); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:13px;
}
.rail-name{font-size:12.5px; color:#fff; font-weight:500}
.rail-role{font-size:11px; color:#79828F; text-transform:capitalize}
.rail-link{
  display:block; width:100%; text-align:left; padding:6px 8px; border:0; background:none;
  color:#79828F; font-size:12px; cursor:pointer; border-radius:var(--r-sm);
}
.rail-link:hover{color:#fff; background:var(--ink-2)}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px; background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.topbar h1{font-size:19px; font-weight:600}
.topbar-sub{margin:2px 0 0; font-size:12.5px; color:var(--muted)}
.topbar-right{display:flex; gap:8px; align-items:center}
.view{padding:22px 24px 60px; min-width:0}

/* ---------------- KPI band ---------------- */
.kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin-bottom:18px;
}
.kpi{background:var(--surface); padding:13px 14px 14px}
.kpi-l{font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--faint)}
.kpi-v{font-family:var(--display); font-size:25px; font-weight:600; margin-top:3px; line-height:1.1}
.kpi-n{font-size:11.5px; color:var(--muted); margin-top:1px}
.kpi.bad .kpi-v{color:var(--bad)}
.kpi.good .kpi-v{color:var(--good)}
.kpi.warn .kpi-v{color:var(--warn)}

/* ---------------- pipeline strip ---------------- */
.pipe{
  display:flex; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-bottom:18px; flex-wrap:wrap;
}
.pipe-cell{background:var(--surface); padding:10px 13px; flex:1 1 105px; min-width:105px}
.pipe-cell b{font-family:var(--display); font-size:17px; font-weight:600; display:block}
.pipe-cell span{font-size:11px; color:var(--muted)}

/* ---------------- panels ---------------- */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:18px; overflow:hidden;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 15px; border-bottom:1px solid var(--line-2);
}
.panel-head h2{font-size:13.5px; font-weight:600}
.panel-head p{margin:2px 0 0; font-size:12px; color:var(--muted)}
.panel-body{padding:15px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
@media (max-width:1000px){.grid-2{grid-template-columns:1fr}}

/* ---------------- filters ---------------- */
.filters{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:11px 15px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); margin-bottom:14px;
}
.filters select,.filters input{
  padding:6px 9px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); font-size:12.5px; max-width:190px;
}
.filters input[type="search"],.filters input[type="text"]{min-width:190px}
.filters input[type="checkbox"]{min-width:0; width:auto; margin:0}
.filters label{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); white-space:nowrap}
.filters select:focus,.filters input:focus{outline:2px solid var(--navy-2); outline-offset:1px}
.filters .spacer{margin-left:auto; font-size:12px; color:var(--muted)}

/* ---------------- tables ---------------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:12.5px}
.tbl th{
  text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); padding:9px 11px; border-bottom:1px solid var(--line);
  background:var(--surface); position:sticky; top:0; white-space:nowrap; z-index:2;
}
.tbl td{padding:9px 11px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl tbody tr:hover td{background:#FBFCFD}
.tbl tbody tr.closed td{color:var(--faint)}
.tbl .r{text-align:right}
.tbl .c{text-align:center}
.tbl-foot td{font-weight:600; background:var(--line-2); border-bottom:0}
.tbl td:first-child{min-width:170px}
.tbl td:nth-child(2){min-width:150px}
.role-title{font-weight:500; color:var(--text)}
.role-sub{font-size:11px; color:var(--muted); margin-top:1px}
.code{font-family:var(--display); font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.02em}
.empty{padding:44px 20px; text-align:center; color:var(--muted)}
.empty b{display:block; font-family:var(--display); font-size:15px; color:var(--text); margin-bottom:5px}

/* ---------------- pills ---------------- */
.pill{
  display:inline-block; padding:3px 8px; border-radius:100px; font-size:11px; font-weight:500;
  white-space:nowrap; background:var(--calm-bg); color:var(--calm);
}
.pill.blue{background:var(--navy-soft); color:var(--navy)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.good{background:var(--good-bg); color:var(--good)}
.pill.bad{background:var(--bad-bg); color:var(--bad)}
.pill.violet{background:var(--violet-bg); color:var(--violet)}
.pill-tag{background:var(--line-2); color:var(--muted); font-size:10.5px}

/* ---------------- the SLA rail: signature element ----------------
   Every open role carries a small clock. The bar fills toward the
   ageing mark, then the breach mark. The tick is the ageing line. */
.sla{min-width:104px}
.sla-top{display:flex; align-items:baseline; gap:5px}
.sla-days{font-family:var(--display); font-weight:600; font-size:13px}
.sla-unit{font-size:10.5px; color:var(--faint)}
.sla-bar{
  position:relative; height:3px; border-radius:2px; background:var(--line);
  margin-top:5px; overflow:visible;
}
.sla-fill{position:absolute; inset:0 auto 0 0; border-radius:2px; background:var(--good)}
.sla-bar.warn .sla-fill{background:var(--warn)}
.sla-bar.bad  .sla-fill{background:var(--bad)}
.sla-tick{position:absolute; top:-2px; width:1px; height:7px; background:var(--faint); opacity:.65}
.sla.done .sla-days{color:var(--faint)}
.sla.done .sla-fill{background:var(--faint)}

/* ---------------- inline editors ---------------- */
.inline-num{
  width:52px; padding:4px 6px; text-align:center; border:1px solid transparent;
  border-radius:var(--r-sm); background:transparent; font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
.inline-num:hover{border-color:var(--line); background:var(--surface)}
.inline-num:focus{outline:2px solid var(--navy-2); outline-offset:0; background:var(--surface); border-color:transparent}
.inline-sel{
  padding:3px 6px; border:1px solid transparent; border-radius:100px; font-size:11px;
  font-weight:500; cursor:pointer; appearance:none; text-align:center;
}
.inline-sel:hover{border-color:var(--line)}
.inline-sel:focus{outline:2px solid var(--navy-2)}
.saved{animation:flash .8s ease}
@keyframes flash{0%{background:var(--good-bg)}100%{background:transparent}}

/* ---------------- bar cell ---------------- */
.bar{height:3px; background:var(--line); border-radius:2px; margin-top:4px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--navy-2); border-radius:2px}

/* ---------------- attention list ---------------- */
.att{display:grid; gap:1px; background:var(--line-2)}
.att-row{
  display:flex; align-items:center; gap:12px; padding:10px 15px; background:var(--surface);
  cursor:pointer;
}
.att-row:hover{background:#FBFCFD}
.att-main{flex:1; min-width:0}
.att-main b{font-weight:500; font-size:13px}
.att-main span{display:block; font-size:11.5px; color:var(--muted)}

/* ---------------- modal ---------------- */
.modal-layer{
  position:fixed; inset:0; background:rgba(18,22,29,.45); display:grid; place-items:center;
  padding:20px; z-index:100; animation:fade .12s ease;
}
.modal-layer[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface); border-radius:11px; width:100%; max-width:760px;
  max-height:90vh; display:flex; flex-direction:column; box-shadow:0 30px 70px rgba(0,0,0,.3);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; border-bottom:1px solid var(--line);
}
.modal-head h2{font-size:15.5px; font-weight:600}
.modal-x{border:0; background:none; font-size:15px; color:var(--muted); cursor:pointer; padding:4px 6px; border-radius:var(--r-sm)}
.modal-x:hover{background:var(--line-2); color:var(--text)}
.modal-body{padding:18px; overflow-y:auto}
.modal-foot{
  display:flex; justify-content:flex-end; gap:8px; padding:13px 18px;
  border-top:1px solid var(--line); background:#FCFCFD; border-radius:0 0 11px 11px;
}
.modal-foot .left{margin-right:auto}

/* ---------------- forms ---------------- */
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.fgrid .wide{grid-column:1 / -1}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}}
.f{display:grid; gap:5px}
.f label{font-size:11.5px; font-weight:500; color:var(--muted)}
.f input,.f select,.f textarea{
  padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); font-size:13px; width:100%;
}
.f textarea{min-height:64px; resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--navy-2); outline-offset:1px; border-color:transparent}
.f .hint{font-size:11px; color:var(--faint)}
.fsec{
  grid-column:1/-1; font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); padding-top:6px; border-top:1px solid var(--line-2); margin-top:4px;
}
.fsec:first-child{border-top:0; padding-top:0; margin-top:0}
.checks{display:flex; gap:14px; flex-wrap:wrap}
.checks label{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text); font-weight:400}
.checks input{width:auto}
.form-err{
  grid-column:1/-1; background:var(--bad-bg); color:var(--bad);
  padding:9px 11px; border-radius:var(--r-sm); font-size:12.5px;
}

/* ---------------- setup lists ---------------- */
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 8px 5px 11px;
  background:var(--line-2); border-radius:100px; font-size:12.5px;
}
.chip button{border:0; background:none; cursor:pointer; color:var(--faint); font-size:12px; padding:0 2px; border-radius:50%}
.chip button:hover{color:var(--bad)}
.chip-add{display:flex; gap:6px; margin-top:11px}
.chip-add input{padding:6px 9px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:12.5px; min-width:190px}

/* ---------------- toasts ---------------- */
.toasts{position:fixed; bottom:20px; right:20px; display:grid; gap:8px; z-index:200}
.toast{
  background:var(--ink); color:#fff; padding:10px 14px; border-radius:var(--r-sm);
  font-size:13px; box-shadow:var(--shadow); animation:rise .16s ease;
  max-width:340px;
}
.toast.err{background:var(--bad)}
@keyframes rise{from{transform:translateY(6px); opacity:0}to{transform:none; opacity:1}}

.loading{padding:50px; text-align:center; color:var(--muted); font-size:13px}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .rail{
    position:static; height:auto; flex-direction:row; align-items:center;
    padding:10px 14px; gap:12px; overflow-x:auto;
  }
  .rail-mark{padding:0 8px 0 0}
  .rail-nav{display:flex; padding:0; gap:4px}
  .rail-foot{margin:0 0 0 auto; padding:0; display:flex; gap:6px; align-items:center}
  .rail-user{border:0; padding:0; margin:0}
  .rail-link{width:auto; white-space:nowrap}
  .topbar{flex-wrap:wrap}
  .view{padding:16px 14px 50px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}