/* ===========================================================================
   Carheel Workforce Platform — Applicant Tracking System.

   This file holds ONLY the components the Applicant Tracking System needs that
   the shared workspace library does not yet have. Everything the platform
   already owns — the top bar, the sidebar, the workspace header, the search
   bar, the metric strip, the work list, the record cards, the badges, the
   empty state, the buttons, the tables, the timeline — comes from
   /assets/platform-workspace.css and is used from there, not re-declared here.

   Two rules govern this file:

   1. No colour is invented. Every value below resolves to a token defined in
      platform-workspace.css, apart from three pale status tints declared just
      after this comment. The second palette this workspace used to carry is
      gone — not aliased, not renamed, removed — and no file on this page
      spells one of its names any more.

   2. Nothing here restyles a shared component. Four exceptions are declared,
      all layout-only, all marked below, and all proposed for promotion into
      the shared library rather than left here permanently.

   The modal/overlay family below has no equivalent in the shared library.
   Participant Success does its equivalent work in-page with `.ps-view`
   sections. That divergence predates this pass, is not resolved by it, and is
   raised through the Workforce Operating System architecture review gate
   rather than settled here — see docs/workforce-operating-system-design-
   standards.md. Until that review, the ATS keeps its modals and they are
   drawn with the shared tokens so they at least look like the platform.
   =========================================================================== */

/* The ATS used to carry a second palette — --navy, --slate, --light, --dark,
   --white, --yellow, --red — parallel to the platform's. It is gone: every
   colour on this workspace now resolves to a token defined in
   platform-workspace.css, and no alias remains to keep the old names alive.
   The three tint values below are the only additions, and each is the pale
   background of a shared status colour, used by the recommendation picker. */
:root{
  --green-bg:#d8ece3;
  --yellow-bg:#f5e8c5;
  --red-bg:#f0d5d1;
}

/* --- Utility ------------------------------------------------------------- */
.hidden{display:none!important}

/* --- Modal and drawer ---------------------------------------------------- */
.overlay{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;background:rgba(23,32,42,.55)}
.overlay.open{display:flex}
.modal{width:100%;max-width:760px;margin:auto;overflow:hidden;background:var(--paper);border:1px solid var(--line);box-shadow:0 24px 80px rgba(23,32,42,.3)}
.modal.wide{max-width:1080px}
.drawer .modal{max-width:680px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px;background:var(--ink);border-bottom:3px solid var(--orange);color:#fff}
.modal-head h2{margin:0;font:900 24px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.3px}
.modal-head p{margin:4px 0 0;color:#b9c0c8;font-size:12px}
.x{border:0;background:none;color:#b9c0c8;font-size:26px;line-height:1;cursor:pointer}
.x:hover{color:#fff}
.x:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.modal-body{max-height:72vh;padding:24px 26px;overflow-y:auto}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 26px;background:var(--cream);border-top:1px solid var(--line)}
.modal-foot .note{max-width:340px;color:var(--muted);font-size:12px;line-height:1.45}

/* --- Intake wizard ------------------------------------------------------- */
.steps{display:flex;gap:6px;margin-bottom:20px}
.steps .s{flex:1;padding-bottom:8px;border-bottom:3px solid var(--line);color:var(--muted);font-size:10px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:.8px}
.steps .s.active{border-bottom-color:var(--orange);color:var(--orange)}
.steps .s.done{border-bottom-color:var(--green);color:var(--green)}

/* --- Forms inside modals ------------------------------------------------- */
.fsec{margin:22px 0 15px;padding-bottom:9px;border-bottom:2px solid var(--line);font:800 16px "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.6px}
.fsec:first-child{margin-top:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.row.full{grid-template-columns:1fr}
.fg{display:grid;gap:6px;align-content:start}
.fg label{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.fg input,.fg select,.fg textarea{width:100%;min-height:44px;padding:11px 12px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;font-size:14px}
.fg input:focus-visible,.fg select:focus-visible,.fg textarea:focus-visible{outline:3px solid var(--orange);outline-offset:1px}
.fg textarea{min-height:90px;resize:vertical}
.conditional{display:none;margin:-4px 0 16px;padding:12px 14px;background:#fff8e8;border-left:3px solid var(--warning);color:#79520e;font-size:13px;line-height:1.5}
.conditional.show{display:block}
/* Explanatory prose and control rows inside a step. `.fnote` is the standing
   explanation above a control, `.fnote.fine` the smaller aside below one, and
   `.fbar` the row a step's buttons sit in. They replace the per-element inline
   styles the step markup used to carry. */
.fnote{margin:0 0 14px;color:var(--muted);font-size:13.5px;line-height:1.6}
.fnote.fine{margin:14px 0 0;font-size:12px;font-style:italic;line-height:1.5}
.fnote.tight{margin-bottom:6px}
.fbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Body prose and secondary text inside a modal. The colour is the shared body
   colour used by `.ps-record-table td` and `.ps-note-main>p`, named here so the
   ATS stops spelling a near-miss of it inline. */
.ats-prose{margin:0 0 16px;color:#2f3a46;font-size:13.5px;line-height:1.6}
.ats-meta{color:var(--muted);font-size:13px}
.fstack{margin-top:20px}
.fstack.close{margin-top:18px}
.fg.spaced{margin-bottom:14px}

/* --- Documents and attachments ------------------------------------------- */
.upload-zone{position:relative;padding:20px;border:2px dashed var(--line);background:#fff;text-align:center;cursor:pointer}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--orange);background:#fff8f4}
.upload-zone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.upload-zone .t{font-size:13px;font-weight:700}
.upload-zone .s{margin-top:3px;color:var(--muted);font-size:11px}
.uploads{display:grid;gap:9px;margin-top:12px}
.file{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--cream);border:1px solid var(--line)}
.file .ic{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;background:#fff;border:1px solid var(--line);color:var(--orange);font:800 11px "Barlow Condensed",sans-serif}
.file .info{flex:1;min-width:0}
.file .fn{overflow:hidden;font-size:13px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.file .fm{margin-top:1px;color:var(--muted);font-size:11px}
.file .act{display:flex;gap:6px}
.iconbtn{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:6px 10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;font-size:11px;font-weight:800;cursor:pointer}
.iconbtn:hover{border-color:var(--ink)}
.iconbtn.danger:hover{border-color:var(--danger);color:var(--danger)}
.iconbtn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.att-group{margin-bottom:16px}
.att-group-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.att-group-h .ttl{font:700 14px "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.5px}
.att-up{position:relative;display:inline-flex;align-items:center;gap:5px;overflow:hidden;padding:6px 10px;border:1px dashed var(--orange);background:#fff8f4;color:var(--orange);font-size:11px;font-weight:800;cursor:pointer}
.att-up:hover{background:#ffeee4}
.att-up input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.att-none{color:var(--muted);font-size:12px;font-style:italic}

/* --- AI candidate overview ----------------------------------------------- */
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.ai-rec{display:flex;align-items:center;gap:10px}
.ai-rec .dot{width:14px;height:14px;border-radius:50%}
.ai-rec .dot.green{background:var(--green)}
.ai-rec .dot.yellow{background:var(--warning)}
.ai-rec .dot.red{background:var(--danger)}
.ai-rec .txt{font:800 20px "Barlow Condensed",sans-serif;text-transform:uppercase}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ai-box{padding:14px 16px;background:var(--cream);border:1px solid var(--line)}
.ai-box.full{grid-column:1/-1}
.ai-box h4{margin:0 0 6px;color:var(--orange);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px}
.ai-box p{margin:0;color:#2f3a46;font-size:13px;line-height:1.55}
.ai-box ul{margin:0;padding-left:18px}
.ai-box li{margin-bottom:3px;color:#2f3a46;font-size:13px;line-height:1.5}
.ai-box.flag-red{background:#fdefec;border-color:var(--danger)}
.ai-box.flag-red h4{color:var(--danger)}
.ai-disclaimer{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);color:var(--muted);font-size:12px;font-style:italic;line-height:1.5}
.ai-suggested{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:#f5e8c5;color:#79520e;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.ai-suggested .d{width:9px;height:9px;border-radius:50%;background:var(--warning)}
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:ats-spin .7s linear infinite}
@keyframes ats-spin{to{transform:rotate(360deg)}}

/* --- Reviewer recommendation picker -------------------------------------- */
.recpick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.recopt{display:flex;align-items:center;gap:9px;min-height:44px;padding:12px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.recopt:hover{border-color:var(--orange)}
.recopt.sel{border-color:var(--orange);background:#fff8f4;box-shadow:inset 0 0 0 1px var(--orange)}
.recopt:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.recopt .d{width:11px;height:11px;border-radius:50%}
.recopt.green .d{background:var(--green)}
.recopt.yellow .d{background:var(--warning)}
.recopt.red .d{background:var(--danger)}

/* --- Extraction review (accept / edit / reject) -------------------------- */
.rev-row{display:grid;grid-template-columns:1fr 150px;gap:8px 14px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line)}
.rev-row .rl{margin-bottom:4px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.rev-row input{width:100%;min-height:40px;padding:8px 11px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;font-size:14px}
.rev-row .cur{margin-top:4px;color:var(--muted);font-size:11px}
.rev-row .cur b{color:var(--ink)}
.rev-apply{display:flex;align-items:center;gap:6px;padding-top:20px;font-size:11px;font-weight:800;white-space:nowrap}
.rev-warn{display:block;margin-top:3px;color:var(--danger);font-size:11px;white-space:normal}

/* --- File preview -------------------------------------------------------- */
.preview-frame{width:100%;height:68vh;border:1px solid var(--line);background:#fff}

/* --- Toast --------------------------------------------------------------- */
.toast{position:fixed;bottom:24px;left:50%;z-index:400;display:none;padding:13px 22px;background:var(--ink);border-left:3px solid var(--orange);color:#fff;font-size:14px;transform:translateX(-50%);box-shadow:0 10px 40px rgba(23,32,42,.3)}
.toast.show{display:block}

/* --- Declared modifiers on shared components ----------------------------- */
/* (1) The pipeline-stage counters are also the pipeline-stage filter, so each
   strip item is a button. The shared library has the same idiom already —
   `button.ps-profile-link` is the interactive form of a shared element, and
   `.ps-tab.active` is the same inset orange rule used below — so this follows
   the established pattern rather than inventing one. Proposed for promotion
   into platform-workspace.css as `button.ps-strip-item`, at which point this
   block is deleted rather than kept in two places. */
button.ps-strip-item{border-top:0;border-left:0;background:var(--paper);color:inherit;font-family:inherit;text-align:left;cursor:pointer}
button.ps-strip-item:hover{background:#fbfaf7}
button.ps-strip-item.active{background:#fff8f4;box-shadow:inset 0 3px 0 var(--orange)}
button.ps-strip-item:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
button.ps-strip-item.good strong{color:var(--green)}

/* (2) Layout only. `.ps-empty` centres its text; the shared action row
   `.ps-card-footer` packs left, which reads as misaligned inside it. */
.ps-empty .ps-card-footer{justify-content:center}

/* (3) Layout only. The comparison and settings tables are the shared
   `.ps-record-table`; `.cmp-k` is the row-label column width. */
.ps-record-table .cmp-k{width:170px;color:var(--muted);font-weight:700}

/* (4) Layout only. The shared notice carries no outer margin — Participant
   Success places it inside a grid that supplies the gap. The ATS renders it
   into modal bodies that do not, so the spacing is supplied here by container
   rather than by an inline style on each notice. */
.modal-body>.ps-inline-notice{margin:18px 0}
.modal-body>.ps-inline-notice:first-child{margin-top:0}
.modal-body>.ps-inline-notice:last-child{margin-bottom:0}

/* --- Responsive ---------------------------------------------------------- */
@media(max-width:900px){
  .row,.ai-grid,.recpick{grid-template-columns:1fr}
  .rev-row{grid-template-columns:1fr}
  .rev-apply{padding-top:0}
  .modal-body{padding:18px}
  .modal-head,.modal-foot{padding-left:18px;padding-right:18px}
}