/* Shared CSS for Hire & Onboard pages — referenced via <link> import or inlined.
   Single source of truth for layout / nav / table / drawer / modal styles
   so every Hire & Onboard sub-page has identical chrome.

   NOTE: Per feedback_rcc_css_hardcode.md, text colours are hardcoded
   (#0D1829 / #3D4E63 / #64748b) — never use CSS vars for text on
   RCC-style pages because conflicting :root blocks can override them. */
:root {
  --bg:#F5F7FC; --panel:#ECF0F7; --card:#FFFFFF;
  --teal:#25a1b0; --teal-dim:rgba(37,161,176,.08);
  --gold:#eabd23; --gold-dim:rgba(234,189,35,.10);
  --amber:#d97706; --amber-dim:rgba(217,119,6,.10);
  --red:#dc2626; --red-dim:rgba(220,38,38,.08);
  --green:#16a34a; --green-dim:rgba(22,163,74,.08);
  --blue:#2563eb; --blue-dim:rgba(37,99,235,.10);
  --purple:#7c3aed; --purple-dim:rgba(124,58,237,.10);
  --grey:#64748b; --grey-dim:rgba(100,116,139,.10);
  --muted-green:#3f8b5c; --muted-green-dim:rgba(63,139,92,.10);
  --border:rgba(13,24,41,.10); --border-mid:rgba(13,24,41,.16);

  /* ── Menu palette · LOCKED 2026-05-09 ───────────────────────────
     Mirrors the canonical tokens from apps/intelletto-menus.html so
     every page sharing this stylesheet (hire-*, customer-maintenance,
     integrations, longlist-settings) gets the same topbar + sidebar
     palette. Lift to a top-level shared file when a third surface
     adopts. */
  --menu-petrol:       #155962;
  --menu-petrol-2:     #1B747F;
  --menu-petrol-3:     #228FA0;
  --menu-teal:         #25A1B0;
  --menu-teal-hover:   #2EBCCB;
  --menu-green-accent: #2BA283;
  --menu-active:       #EABD23;

  --topbar:var(--menu-petrol); --topbar-text:#E8EDF5;
  --side-nav-bg:var(--menu-petrol);
  --input-bg:#dbe8ee; --input-border:#52a4ba;
  --input-focus-bg:#D6CCBE; --input-focus-border:#25a1b0;
  --th-bg:#EDF3F5;
  --radius:8px;
  --font-ui:'Inter',sans-serif; --font-head:'Ubuntu Condensed',sans-serif; --font-mono:'JetBrains Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:#0D1829;font:14px/1.5 var(--font-ui);min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--topbar);padding:14px 24px;display:flex;align-items:center;gap:16px;flex-shrink:0}
.topbar-brand{color:var(--topbar-text);font:700 18px var(--font-head);letter-spacing:.06em;text-transform:uppercase}
.topbar-meta{color:var(--topbar-text);opacity:.7;font:12px var(--font-mono);margin-left:auto}
.layout{display:grid;grid-template-columns:200px 1fr;flex:1;min-height:0}
.side{background:var(--side-nav-bg);padding:18px 0;color:#cbd5e1;overflow-y:auto}
.side h3{font:600 10px var(--font-ui);text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.55);padding:0 18px 8px;margin-bottom:6px}
.side a{display:flex;align-items:center;gap:10px;padding:10px 18px;color:rgba(255,255,255,.78);font:500 13px var(--font-ui);text-decoration:none;border-left:3px solid transparent;transition:background .12s,border-color .12s,color .12s}
.side a:hover{background:rgba(255,255,255,.04);color:#fff}
.side a.active{background:rgba(234,189,35,.16);border-left-color:var(--menu-active);color:#fff;font-weight:600}
.side a .ico{width:18px;text-align:center;font-size:14px}
.main{padding:18px 24px;display:flex;flex-direction:column;gap:14px;min-width:0;overflow:auto}
h1{font:700 22px var(--font-head);color:#0D1829;margin-bottom:2px}
h2{font:700 17px var(--font-head);color:#0D1829;margin-bottom:2px}
.lede{color:#3D4E63;font-size:13px;margin-bottom:6px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:3px;flex:0 0 auto}
.field label{font:600 10px var(--font-ui);color:#3D4E63;text-transform:uppercase;letter-spacing:.04em}
.input,select.input,textarea.input{background:var(--input-bg);border:1px solid var(--input-border);color:#0D1829;font:13px var(--font-ui);padding:8px 12px;border-radius:var(--radius);outline:none}
.input:focus,select.input:focus,textarea.input:focus{background:var(--input-focus-bg);border-color:var(--input-focus-border);box-shadow:0 0 0 3px rgba(37,161,176,.14)}
textarea.input{min-height:80px;resize:vertical;font-family:var(--font-ui)}
.search-input{min-width:300px}
.btn{font:600 13px var(--font-ui);padding:8px 14px;border:none;border-radius:var(--radius);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:opacity .12s}
.btn:hover{opacity:.88}.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-teal{background:var(--teal);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--border-mid);color:#3D4E63;padding:7px 12px;font-size:12px}
.btn-sm{padding:5px 10px;font-size:11px}
.filter-row{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0}
.fchip{padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:#3D4E63;font:600 11px var(--font-ui);cursor:pointer;user-select:none}
.fchip:hover{background:var(--panel)} .fchip.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.tablewrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:auto;box-shadow:0 2px 8px rgba(13,24,41,.04);flex:1;min-height:300px}
table{width:100%;border-collapse:collapse}
thead{background:#EDF3F5;position:sticky;top:0;z-index:1}
th{font:600 10px var(--font-ui);color:#3D4E63;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;background:#EDF3F5}
td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;color:#0D1829}
tr:last-child td{border-bottom:none} tbody tr{cursor:pointer} tbody tr:hover{background:var(--teal-dim)}
.state-pill{display:inline-block;padding:2px 9px;border-radius:10px;font:600 11px var(--font-ui);white-space:nowrap}

/* Offer status pills */
.pill-offer-draft         {background:var(--grey-dim);        color:#475569;       border:1px solid rgba(100,116,139,.30)}
.pill-offer-pending       {background:var(--amber-dim);       color:#92400e;       border:1px solid rgba(217,119,6,.35)}
.pill-offer-approved      {background:var(--teal-dim);        color:#0e7e8c;       border:1px solid rgba(37,161,176,.32)}
.pill-offer-sent          {background:var(--blue-dim);        color:#1d4ed8;       border:1px solid rgba(37,99,235,.32)}
.pill-offer-negotiation   {background:var(--purple-dim);      color:#5b21b6;       border:1px solid rgba(124,58,237,.32)}
.pill-offer-accepted      {background:var(--green-dim);       color:#15803d;       border:1px solid rgba(22,163,74,.32)}
.pill-offer-declined      {background:var(--red-dim);         color:#b91c1c;       border:1px solid rgba(220,38,38,.32)}
.pill-offer-withdrawn     {background:var(--grey-dim);        color:#475569;       border:1px solid rgba(100,116,139,.30)}

/* Onboarding status pills */
.pill-onb-not-started     {background:var(--grey-dim);        color:#475569;       border:1px solid rgba(100,116,139,.30)}
.pill-onb-triggered       {background:var(--blue-dim);        color:#1d4ed8;       border:1px solid rgba(37,99,235,.32)}
.pill-onb-in-progress     {background:var(--teal-dim);        color:#0e7e8c;       border:1px solid rgba(37,161,176,.32)}
.pill-onb-blocked         {background:var(--red-dim);         color:#b91c1c;       border:1px solid rgba(220,38,38,.32)}
.pill-onb-ready-day-one   {background:var(--green-dim);       color:#15803d;       border:1px solid rgba(22,163,74,.32)}
.pill-onb-completed       {background:var(--muted-green-dim); color:#2f6a47;       border:1px solid rgba(63,139,92,.30)}

/* Approval status pills */
.pill-appr-pending        {background:var(--amber-dim);       color:#92400e;       border:1px solid rgba(217,119,6,.35)}
.pill-appr-approved       {background:var(--green-dim);       color:#15803d;       border:1px solid rgba(22,163,74,.32)}
.pill-appr-rejected       {background:var(--red-dim);         color:#b91c1c;       border:1px solid rgba(220,38,38,.32)}
.pill-appr-returned       {background:var(--purple-dim);      color:#5b21b6;       border:1px solid rgba(124,58,237,.32)}

/* A tinted pill is translucent, so a striped row darkens what it sits on (the stripe of _app-chrome.js): the teal pills stand at 4.14:1 on
   a white row and the green ones at 4.30:1 and fall to 3.89 and 4.05 on the stripe. In a table cell they take the theme's text-safe inks for
   the same two hues (4.7:1 or more on both rows), as the dashboards' tables do (_dataviz.css, `.dv-table .state-pill`, which stays); a pill
   outside a table is as it was. The hire pages do not load the theme, so the theme's own values are the fallback. */
td .state-pill.pill-offer-approved,
td .state-pill.pill-onb-in-progress   { color: var(--viz-teal-ink, #0b716a); }
td .state-pill.pill-offer-accepted,
td .state-pill.pill-onb-ready-day-one,
td .state-pill.pill-appr-approved     { color: var(--viz-green-ink, #1f7343); }

.empty{padding:40px 20px;text-align:center;color:#64748b}
.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:0 1px 3px rgba(13,24,41,.04)}
.kpi-label{font:600 10px var(--font-ui);color:#3D4E63;text-transform:uppercase;letter-spacing:.05em}
.kpi-value{font:700 26px var(--font-head);color:#0D1829;margin-top:6px}
.kpi-delta{font:600 11px var(--font-mono);color:var(--green);margin-top:3px}
.kpi-delta.down{color:var(--red)}
.toast{position:fixed;bottom:22px;left:24px;padding:10px 16px;border-radius:var(--radius);font:600 13px var(--font-ui);color:#fff;z-index:999;opacity:0;transform:translateY(8px);transition:all .25s}
.toast.show{opacity:1;transform:translateY(0)} .toast-ok{background:var(--green)} .toast-err{background:var(--red)}
.drawer-overlay{position:fixed;inset:0;background:rgba(13,24,41,.40);z-index:50;display:none}
.drawer-overlay.show{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:600px;max-width:92vw;background:var(--card);box-shadow:-12px 0 36px rgba(13,24,41,.20);z-index:51;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column}
.drawer.show{transform:translateX(0)}
.drawer-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:start}
.drawer-title{font:700 18px var(--font-head);color:#0D1829}
.drawer-meta{font:12px var(--font-mono);color:#64748b;margin-top:4px}
.drawer-close{background:none;border:none;color:#64748b;font-size:22px;cursor:pointer}
.drawer-body{padding:18px 22px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.drawer-actions{display:flex;flex-wrap:wrap;gap:6px;padding:14px 22px;border-top:1px solid var(--border);background:var(--panel)}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:13px}
.kv .k{color:#3D4E63;font-weight:500}
.kv .v{color:#0D1829}
.tl-event{padding:8px 10px;background:var(--panel);border-radius:6px;color:#3D4E63;font:12px var(--font-mono);margin-bottom:6px}
.tl-event .tag{display:inline-block;padding:1px 7px;background:var(--teal-dim);color:var(--teal);font:600 10px var(--font-ui);border-radius:8px;margin-right:6px;text-transform:uppercase}
.tl-event .when{color:#64748b;font-size:10px;margin-top:3px}
.modal-overlay{position:fixed;inset:0;background:rgba(13,24,41,.45);z-index:60;display:none;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:var(--card);border-radius:var(--radius);width:540px;max-width:92vw;box-shadow:0 30px 80px rgba(13,24,41,.30);display:flex;flex-direction:column;max-height:90vh}
.modal-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font:700 16px var(--font-head);color:#0D1829}
.modal-body{padding:18px 20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.modal-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.bulk{display:none;gap:10px;align-items:center;background:var(--gold-dim);border:1px solid rgba(234,189,35,.40);padding:8px 12px;border-radius:var(--radius);font-size:12px;color:#0D1829}
.bulk.show{display:flex}

/* Section card — used to group fields on Offers / Templates / Settings */
.section-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 3px rgba(13,24,41,.04)}
.section-title{font:700 13px var(--font-head);color:#0D1829;text-transform:uppercase;letter-spacing:.04em}
.section-sub{font-size:12px;color:#3D4E63}

/* Money/numeric callouts (offer comp summary) */
.money{font:600 14px var(--font-mono);color:#0D1829}
.money-strong{font:700 18px var(--font-head);color:#0D1829}

/* Mono key/value for IDs and audit fields */
.mono{font:12px var(--font-mono);color:#3D4E63}

/* ─────────────────────────────────────────────────────────────────────
   Print stylesheet — theme v2 §14.7

   Recruiters routinely print Hire & Onboard pages: an offer summary,
   a candidate's task list, the approval-chain audit. The screen
   chrome (topbar, sidebar, drawer, modals, filter chips, action
   buttons) is paper-wasting noise. On print:

     • the chrome disappears
     • surfaces revert to pure white (no tone-shifted backgrounds)
     • shadows + tinted hovers drop (waste of toner)
     • borders shift to a darker pen-weight for clarity
     • the main column expands to the page width
     • status pills get a small monochrome outline so they read
       on greyscale printers
─────────────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff !important; color: #0D1829 !important; }
  .layout { grid-template-columns: 1fr !important; }

  /* Hide chrome that doesn't belong on paper. */
  .topbar,
  .side,
  .toolbar,
  .filter-row,
  .row-actions,
  .drawer-overlay,
  .modal-overlay,
  .toast,
  .drawer-actions,
  .bulk,
  .btn,
  .topbar-meta { display: none !important; }

  /* If a drawer is open at print time, print it as an inline panel
     rather than a fixed side-slider. */
  .drawer {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .main { padding: 0 !important; }

  /* Cards & tables — flat, paper-friendly. */
  .section-card,
  .card,
  .tablewrap {
    border-color: rgba(13,24,41,.30) !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  th { background: #fff !important; border-color: rgba(13,24,41,.40) !important; }
  td { border-color: rgba(13,24,41,.20) !important; }

  /* Status pills — outline-only so colour-blind and greyscale
     readers don't lose state information. */
  .state-pill,
  .fchip {
    background: #fff !important;
    color: #0D1829 !important;
    border: 1px solid rgba(13,24,41,.45) !important;
  }

  /* Page-break helpers. */
  table, tr { page-break-inside: avoid; }
  thead { display: table-header-group; }

  /* Inputs print as values, not field chrome. */
  input, select, textarea {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(13,24,41,.30) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #0D1829 !important;
  }

  /* Identity-chip is position:fixed; explicit hide. */
  #identity-chip,
  .identity-chip { display: none !important; }

  /* Per-page hooks. */
  .no-print { display: none !important; }
  .print-only { display: initial !important; }

  /* Anchors print as text. */
  a, a:visited { color: #0D1829 !important; text-decoration: none !important; }
}