/* ==================================================================
   Hireish design system (Phase 5 / P5.3).

   One stylesheet, loaded by every frame: the new pages (hireish/layout),
   the original portal pages (web/profile_layout) and the original public
   pages (web/web_layout). Before this, each frame carried its own tokens
   and had no shared vocabulary for the states a screen is actually in —
   which is why "no jobs yet" and "no applicants yet" both rendered as a
   full-width illustration with no heading and nothing to do next
   (review E04), and why status wording varied by page.

   hireish/layout.blade.php still declares the same tokens inline. That is
   deliberate: it is the public site's lifeline if this file ever fails to
   load. The values must stay in step.
   ================================================================== */
:root {
  --ink:#141A24; --ink2:#374151; --muted:#6B7280; --line:#E4E2DC;
  --bg:#FBFAF7; --panel:#FFFFFF;
  --office:#0B4DD8; --office-soft:#E7EEFF;
  --site:#E8622B;   --site-soft:#FDEBE2;
  --good:#177A46;   --good-soft:#E6F6EC;
  --warn:#9A3412;   --warn-soft:#FFF4E5;
  --bad:#B42318;    --bad-soft:#FEE4E2;
  --hz-r:14px;        /* card radius */
  --hz-gap:12px;
}

/* ---------- State: empty, error, loading -------------------------
   Every list and panel uses the same shape — an icon, a heading that
   names what is missing, one line saying what will appear here, and the
   action that makes it appear. A blank list is never the finished screen. */
.hz-state { text-align:center; padding:34px 20px; border:1px dashed var(--line); border-radius:var(--hz-r); background:var(--panel); }
.hz-state .hz-state-ic { width:46px; height:46px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--office-soft); color:var(--office); margin-bottom:10px; }
.hz-state h3 { font-family:"Bricolage Grotesque", Manrope, sans-serif; font-size:17px; color:var(--ink); margin:0 0 4px; }
.hz-state p { margin:0 auto; max-width:46ch; color:var(--muted); font-size:14px; line-height:1.5; }
.hz-state .hz-state-do { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
.hz-state.err { border-style:solid; border-color:#fca5a5; background:var(--bad-soft); }
.hz-state.err .hz-state-ic { background:#fff; color:var(--bad); }
.hz-state.err h3 { color:var(--bad); }

/* The original pages shipped a full-bleed "no data" illustration with no words.
   Until each of those views carries a real state, at least stop it dominating. */
img[src*="no-data"], img[src*="no_data"], img[alt="no data image"] { max-width:180px !important; width:auto !important; height:auto; opacity:.55; margin:0 auto; display:block; }

/* ---------- Loading ---------------------------------------------- */
.hz-skel { background:linear-gradient(90deg, #eceef1 25%, #f5f6f8 37%, #eceef1 63%); background-size:400% 100%; animation:hz-sk 1.3s ease infinite; border-radius:8px; }
.hz-skel-row { height:14px; margin:8px 0; }
.hz-skel-row.s { width:58%; } .hz-skel-row.m { width:80%; }
@keyframes hz-sk { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
@media (prefers-reduced-motion: reduce) { .hz-skel { animation:none; } }

/* ---------- Status labels ----------------------------------------
   One vocabulary and one colour per state, wherever a state is shown. */
.hz-st { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px; background:#F1F2F4; color:var(--ink2); white-space:nowrap; }
.hz-st::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.hz-st.new     { background:var(--office-soft); color:var(--office); }
.hz-st.seen    { background:#F1F2F4; color:var(--ink2); }
.hz-st.short   { background:var(--warn-soft); color:var(--warn); }
.hz-st.meeting { background:var(--site-soft); color:#B5451B; }
.hz-st.hired   { background:var(--good-soft); color:var(--good); }
.hz-st.no      { background:var(--bad-soft); color:var(--bad); }
.hz-st.off     { background:transparent; color:var(--muted); border:1px solid var(--line); font-weight:600; }

/* ---------- Priority panel (dashboards) --------------------------
   What needs doing, before anything promotional. */
.hz-do { background:var(--panel); border:1px solid var(--line); border-radius:var(--hz-r); padding:4px 0; margin:0 0 14px; }
.hz-do-h { font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:800; margin:12px 16px 6px; }
.hz-do-i { display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line); color:var(--ink2) !important; text-decoration:none !important; }
.hz-do > .hz-do-i:first-of-type { border-top:0; }
.hz-do-i:hover { background:#FAFBFC; }
.hz-do-n { min-width:30px; height:30px; padding:0 8px; border-radius:9px; background:var(--site-soft); color:#B5451B; font-weight:800; font-size:14px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.hz-do-n.calm { background:var(--office-soft); color:var(--office); }
.hz-do-t { flex:1 1 auto; min-width:0; }
.hz-do-t b { display:block; color:var(--ink); font-size:14.5px; font-weight:700; }
.hz-do-t span { display:block; color:var(--muted); font-size:13px; }
.hz-do-go { color:var(--muted); flex:none; }

/* ---------- Setup checklist (first-run) --------------------------- */
.hz-ck { list-style:none; margin:0; padding:0; }
.hz-ck li { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:14.5px; }
.hz-ck li:first-child { border-top:0; }
.hz-ck .bx { font-size:19px; flex:none; margin-top:1px; color:var(--muted); }
.hz-ck li.done { color:var(--muted); }
.hz-ck li.done .bx { color:var(--good); }
.hz-ck li.done b { font-weight:600; text-decoration:line-through; }
.hz-ck b { color:var(--ink); font-weight:700; }

/* ---------- Buttons ----------------------------------------------
   portal.css carries an identical .hz-btn for the original pages; this copy
   is what lets shared components render on the new public pages too. */
.hz-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:11px; background:var(--office); color:#fff !important; font-weight:800; font-size:14.5px; text-decoration:none !important; border:0; cursor:pointer; line-height:1.2; }
.hz-btn.ghost { background:var(--panel); color:var(--ink) !important; border:1px solid var(--line); }
.hz-btn.site { background:var(--site); }
.hz-btn:focus-visible { outline:2px solid var(--office); outline-offset:2px; }