/* ============================================================================
   ARABTEC RECRUITMENT HUB — APPROVED DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Source of visual truth: the approved UI mockup (August 2026).
   This sheet loads LAST so it is the final word on chrome, colour, type and
   geometry. It restyles the EXISTING production class structure — it does not
   introduce a second component library, and it never changes behaviour.

   The system in one paragraph:
     Arial/Helvetica. One interactive colour (#008064 green) for everything the
     user can act on. Red (#D01827) is reserved for the brand rule and for
     critical/destructive states — never as a general accent. The canvas is
     #F4F5F7, cards are white with a 20px radius and NO shadow, and every
     control that can be a pill is a pill. Blue is not an interactive colour
     here; it survives only where an existing feature encodes meaning in it.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* Typography — approved: Arial / Helvetica, nothing else. */
  --font: Arial, Helvetica, sans-serif;
  --font-arabic: Arial, Helvetica, sans-serif;

  /* Brand red — the 2px rule, critical states, destructive actions. */
  --brand: #D01827; --brand-dark: #B01420; --brand-tint: #FCEEEF; --brand-tint-bd: #F3C9CD;
  --brand-accent: #D01827;
  --danger: #D01827; --danger-hover: #B01420; --danger-tint: #FCEEEF;
  --critical: #B01420;

  /* Interactive green — buttons, links, focus, active nav, selected tabs. */
  --green: #008064; --green-700: #00664F; --green-50: #E6F4F0; --green-border: #B7DCD3;
  --action: #008064; --action-dark: #00664F;
  --action-tint: #E6F4F0; --action-tint-bd: #B7DCD3;
  --action-primary: #008064; --action-primary-hover: #00664F; --action-primary-tint: #E6F4F0;
  --action-success: #008064; --action-success-hover: #00664F; --action-success-tint: #E6F4F0;
  --success: #00664F;
  --brand-primary: #008064; --brand-primary-dark: #00664F; --brand-primary-tint: #E6F4F0;
  --ring-action: 0 0 0 3px #E6F4F0;
  --ring: 0 0 0 3px #E6F4F0;

  /* Amber — "needs attention", never an action. */
  --warning: #E09600; --warning-ink: #8A5A00; --warning-text: #8A5A00; --warning-tint: #FFF6E0;

  /* Surfaces */
  --canvas: #F4F5F7; --app-bg: #F4F5F7; --bg: #F4F5F7;
  --surface: #FFFFFF; --card-bg: #FFFFFF; --surface-2: #F4F5F7; --surface-3: #ECEEF0;
  --neutral-tint: #F0F1F3;
  --sidebar-bg: #E8EAED; --sidebar-line: #D8DCE1;

  /* Ink */
  --ink: #1A1A1A; --text-strong: #1A1A1A; --text: #1A1A1A; --primary: #1A1A1A;
  --ink-soft: #4A4641; --muted: #6F6A64; --faint: #736E66; --text-gray: #6F6A64; --text-dark: #1A1A1A;

  /* Hairlines */
  --line: rgba(26, 26, 26, .10); --line-strong: rgba(26, 26, 26, .18);
  --border: rgba(26, 26, 26, .10); --border-soft: rgba(26, 26, 26, .06);

  /* Geometry — 20px cards, pill controls, no shadows. */
  --card-radius: 20px; --radius: 14px; --r-md: 14px; --r-pill: 999px;
  --shadow-card: none; --shadow: none;
  --shadow-pop: 0 24px 64px rgba(16, 20, 26, .22);
  --sidebar-w: 236px; --topbar-h: 68px;

  /* Pipeline stage palette — one green ramp plus the two semantic ends.
     Blue is retired here: a stage is either progressing, waiting, or over. */
  --stage-sourced: #8A867F;
  --stage-matched: #4E9C88;
  --stage-shortlisted: #008064;
  --stage-interviewing: #00664F;
  --stage-waiting: #E09600;
  --stage-offer: #8A5A00;
  --stage-joined: #00664F;
  --stage-rejected: #D01827;

  --info: #00664F; --info-tint: #E6F4F0;
  --slate: #6F6A64; --slate-dark: #4A4641;
  --ticket-accent: #D01827; --ticket-accent-dark: #B01420;
  --ticket-chip-bg: #E6F4F0; --ticket-chip-border: #B7DCD3;
  --secondary: #D01827; --accent: #D01827; --button: #008064;
}

html, body, button, input, select, textarea, .field textarea {
  font-family: Arial, Helvetica, sans-serif;
}
html, body { background: var(--canvas); }
body { color: var(--ink); font-size: 13px; line-height: 1.45; font-weight: 400; }

/* ------------------------------------------------------------ 2. APP SHELL */
.shell {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  background: var(--canvas);
  position: relative;
}
/* The single red rule across the top of the application. */
.shell::before {
  content: ''; position: fixed; inset: 0 0 auto 0; height: 2px;
  background: #D01827; z-index: 60; pointer-events: none;
}

/* ------ Sidebar: light, quiet, pill navigation ------ */
.sidebar {
  background: var(--sidebar-bg); color: var(--ink);
  border-right: 1px solid var(--sidebar-line);
  padding: 18px 14px 20px; gap: 0;
  /* Full-height and self-scrolling, so the role-scope card stays reachable
     however long the page is — it was falling below the fold otherwise. */
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
}
.sidebar.collapsed { --sidebar-w: 72px; padding: 18px 10px 20px; }
.sidebar-head {
  min-height: 52px; padding: 0 8px 14px; border-bottom: 1px solid var(--sidebar-line);
  margin-bottom: 4px;
}
.sidebar-head::after { display: none; }
.side-mark { width: 38px; height: 34px; display: grid; place-items: center; }
/* Name over kicker, always two lines — they were running together as one. */
.side-txt { display: grid; gap: 1px; min-width: 0; }
.side-mark img, .side-mark svg { max-width: 38px; max-height: 32px; object-fit: contain; }
.side-txt strong, .sidebar-title { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.side-txt span {
  font-size: 9px; color: var(--faint); letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.nav { padding: 6px 0 0; gap: 2px; display: flex; flex-direction: column; }
.nav-section {
  font-size: 10px; color: var(--faint); letter-spacing: .12em; text-transform: uppercase;
  padding: 18px 10px 6px; font-weight: 700;
}
.nav-item {
  min-height: 36px; padding: 7px 10px; border-radius: 10px;
  color: var(--ink); font-size: 13px; font-weight: 400; border-left: 0;
  display: flex; align-items: center; gap: 10px;
}
.nav-item:hover { background: #DEE2E6; color: var(--ink); }
.nav-item.active { background: #D7E8E2; color: var(--green-700); font-weight: 700; border-left: 0; }
.nav-item.active::before { display: none; }
.nav-item .nav-icon { color: inherit; opacity: .85; }
.nav-item.active .nav-icon { color: var(--green-700); opacity: 1; }
.nav-item:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Count pill on a nav row (Candidate Review / Interviews / Offers). */
.nav-count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #ECEEF0; color: var(--muted); font-size: 10px; font-weight: 700;
  display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
}
.nav-item.active .nav-count { background: #fff; color: var(--green-700); }
.sidebar.collapsed .nav-count { display: none; }

/* Role scope card — states, in the user's own words, what their role can reach. */
.scope-card {
  margin-top: auto; border: 1px solid var(--line); background: #fff; border-radius: 14px;
  padding: 12px 13px; display: grid; gap: 4px;
}
.scope-card strong { font-size: 11.5px; color: var(--ink); }
.scope-card p { margin: 0; font-size: 10.5px; line-height: 1.45; color: var(--muted); }
.sidebar.collapsed .scope-card { display: none; }

/* ------ Topbar ------ */
.topbar {
  height: var(--topbar-h); background: #fff; border-top: 0;
  border-bottom: 1px solid var(--line); padding: 0 28px; gap: 16px; backdrop-filter: none;
}
.topbar .tb-brand .bn strong { font-size: 14px; color: var(--ink); font-weight: 700; }
.topbar .tb-brand .bn span { font-size: 10px; color: var(--faint); }
/* Two menu buttons, one visible at a time: the drawer trigger below 900px,
   the sidebar collapse toggle above it. */
.topbar .menu-btn { display: none; }
.topbar .collapse-btn { display: grid; place-items: center; }
.gsearch {
  height: 38px; border-radius: 999px; background: #F4F5F7; border: 1px solid transparent;
  color: var(--muted); font-size: 12px; padding: 0 14px;
}
.gsearch:hover { background: #ECEEF0; }
.gsearch:focus-visible, .gsearch:focus-within {
  border-color: var(--green); box-shadow: var(--ring-action); outline: none; background: #fff;
}
.kbd {
  border-radius: 999px; background: #fff; border: 1px solid var(--line);
  color: var(--faint); font-size: 9.5px; padding: 2px 7px;
}
.icon-btn {
  border-radius: 999px; background: #fff; color: var(--green-700);
  border: 1px solid var(--green-border); width: 38px; height: 38px;
}
.icon-btn:hover { background: var(--green-50); border-color: var(--green-700); }
.icon-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.avatar { width: 36px; height: 36px; background: var(--green-700); color: #fff; font-weight: 700; }
.profile-name { font-size: 12.5px; color: var(--ink); font-weight: 700; }
.profile-role { font-size: 10.5px; color: var(--muted); }
.menu { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-pop); overflow: hidden; }
.notif-panel { border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.notif-dot { background: var(--brand); }

/* ------ Page canvas + the single watermark ------ */
.main { background: transparent; }
.content {
  position: relative; isolation: isolate; background: var(--canvas);
  /* The bottom padding reserves the anyhelp launcher's corner, so the last row
     of a table or list is never sitting under the floating button. */
  padding: 28px 30px 104px; min-height: calc(100vh - var(--topbar-h));
  overflow: visible; overflow-x: clip;
}
/* APPROVED WATERMARK — exactly one, bottom-right, ~3% opacity, small.
   The ONLY definition of .content::before. It is anchored inside .content
   (absolute, zero insets) so it can never extend the page's scroll width:
   negative offsets here made every phone page 78px wider than the screen,
   and `overflow: hidden` let focus scroll that hidden strip into view. */
.content::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset-inline-end: 0; inset-block-end: 0; width: min(34vw, 440px); height: min(46vh, 420px);
  background: url('/arabtec-watermark.webp') no-repeat right bottom / contain;
  opacity: .03; filter: none;
}
.content > * { position: relative; z-index: 1; }
/* The footer line is a sibling of the page, after it, at the same z-index —
   so it painted over every modal the page opened (a modal's z-index only counts
   inside the page's stacking context). One step down keeps it above the
   watermark (z-index -1) and below the page. */
.content > .knowledge-line { z-index: 0; }

/* ------ Page headers ------ */
.page-head { margin-bottom: 20px; align-items: flex-end; }
.breadcrumb, .dash-eyebrow {
  font-size: 11px; color: var(--green-700); font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase;
}
.page-title, .page-head .page-title, .dash-head .page-title {
  font-family: Arial, Helvetica, sans-serif; font-size: 34px; line-height: 1.18;
  letter-spacing: -.02em; font-weight: 400; color: var(--ink); margin: 4px 0 0;
}
.page-sub { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 640px; }
.section-title { font-size: 15px; font-weight: 700; color: var(--ink); }

/* -------------------------------------------------------------- 3. SURFACES */
.card, .toolbar, .ticket-header-card, .cand-card, .rq-card, .ticket-card,
.login-card, .forced-pw-card, .notice, .pcard {
  box-shadow: none;
}
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius);
}
.card.red-top, .ticket-header-card { border-top: 1px solid var(--line); }
.card.red-top::before, .ticket-header-card::before { display: none; }
.card-head {
  min-height: 60px; padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.card-head h2, .card-head h3 {
  font-family: Arial, Helvetica, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0;
}
.card-pad { padding: 20px; }
.dash-headnote, .card-head .muted { font-size: 11.5px; color: var(--muted); }
.toolbar {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px; margin-bottom: 16px;
}

/* -------------------------------------------------------------- 4. CONTROLS */
/* Every button is a pill. The default is an outlined green pill on white — the
   mockup deliberately has no heavy solid fills, so a screen full of actions
   reads as a list rather than a wall of colour. */
.btn {
  min-height: 38px; padding: 0 16px; border-radius: 999px;
  background: #fff; color: var(--green-700); border: 1.5px solid var(--green);
  font-size: 12.5px; font-weight: 700; box-shadow: none;
}
.btn:hover { background: var(--green-50); border-color: var(--green-700); color: var(--green-700); }
.btn:active { transform: translateY(.5px); }
/* The mockup's mint focus ring is ~1.4:1 against white — below the 3:1 that
   WCAG asks of a focus indicator. Same 3px ring, on-palette, in the green
   that is already the interactive colour, so it is actually visible. */
.btn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; box-shadow: none; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-sm, .btn.small { min-height: 32px; padding: 0 13px; font-size: 12px; }
.btn-block { width: 100%; }

/* Secondary / neutral: the same pill in ink. */
.btn-secondary, .btn-ghost {
  background: #fff; color: var(--ink); border: 1.5px solid var(--ink);
}
.btn-secondary:hover, .btn-ghost:hover { background: #F0F1F3; border-color: var(--ink); color: var(--ink); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink-soft); }
.btn-ghost:hover { border-color: var(--ink); }

/* Success / navy / outline-blue all fold into the one interactive green. */
.btn-success, .btn-navy, .btn-outline-blue {
  background: #fff; color: var(--green-700); border: 1.5px solid var(--green);
}
.btn-success:hover, .btn-navy:hover, .btn-outline-blue:hover {
  background: var(--green-50); border-color: var(--green-700);
}

/* Destructive stays red and outlined; the solid red is kept for the one
   irreversible confirm inside a dialog. */
.btn-danger { background: #fff; color: var(--brand-dark); border: 1.5px solid var(--brand); }
.btn-danger:hover { background: var(--brand-tint); border-color: var(--brand-dark); }
.btn-danger-solid { background: var(--brand); color: #fff; border: 1.5px solid var(--brand); }
.btn-danger-solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* The one filled action, used sparingly (dialog primary, composer send). */
.btn-primary-solid { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.btn-primary-solid:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* Login keeps its own solid sign-in button — it is the only action on the page. */
.login-card .btn { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.login-card .btn:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* Inputs, selects, textareas — pill fields on the canvas tint. */
.field input, .field select, .field textarea,
.toolbar input, .toolbar select, .cmdk-input,
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], input[type=datetime-local], select {
  background: #F4F5F7; border: 1px solid var(--line); border-radius: 999px;
  min-height: 38px; padding: 0 14px; color: var(--ink); font-size: 12.5px;
}
.field textarea, textarea { border-radius: 14px; padding: 10px 13px; min-height: 84px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus,
.toolbar input:focus, .toolbar select:focus, textarea:focus, select:focus,
input:focus {
  outline: none; border-color: var(--green); box-shadow: var(--ring-action); background: #fff;
}
.field label, .field > span { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.field-hint { font-size: 10.5px; color: var(--muted); }
.field-error { color: var(--brand-dark); font-size: 10.5px; }

/* Tabs — a pill track with a white selected pill. */
.tabbar, .profile-tabs, .seg-tabs, .tabs {
  display: flex; width: max-content; max-width: 100%; padding: 3px; gap: 2px;
  background: #ECEEF0; border: 0; border-radius: 999px; overflow-x: auto;
}
.tabbar-btn, .profile-tab, .seg-tab {
  min-height: 34px; border: 0; border-radius: 999px; padding: 0 14px;
  color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.tabbar-btn.active, .profile-tab.active, .seg-tab.active {
  background: #fff; color: var(--green-700); border: 0; border-bottom-color: transparent;
  box-shadow: none; font-weight: 700;
}
.tabbar-btn:focus-visible, .profile-tab:focus-visible, .seg-tab:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}
.seg-count {
  margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #fff; color: var(--muted); font-size: 10px; font-weight: 700;
  display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
}
.seg-tab.active .seg-count { background: var(--green-50); color: var(--green-700); }
.view-toggle { background: #ECEEF0; border-radius: 999px; border: 0; padding: 3px; }
.view-toggle-btn { border-radius: 999px; border: 0; color: var(--muted); font-weight: 700; }
.view-toggle-btn.active { background: #fff; color: var(--green-700); box-shadow: none; }

/* --------------------------------------------------------------- 5. STATUS */
.badge, .status-chip, .meta-chip, .chip, .src-chip, .count-pill, .code-pill {
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
}
.badge { min-height: 24px; padding: 2px 9px; }
.badge-soft { background: #F0F1F3; border-color: var(--line); color: var(--muted); }
.badge-success { background: var(--green-50); border-color: var(--green-border); color: var(--green-700); }
.badge-info { background: var(--green-50); border-color: var(--green-border); color: var(--green-700); }
.badge-warning { background: var(--warning-tint); border-color: #F3D48A; color: var(--warning-ink); }
.badge-critical { background: var(--brand-tint); border-color: var(--brand-tint-bd); color: var(--brand-dark); }
.status-chip { height: 24px; }
.status-chip.sourcing, .status-chip.progress, .status-chip.reopened {
  background: var(--green-50); border-color: var(--green-border); color: var(--green-700);
}
.code-pill { background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-border); }
.count-pill { background: #ECEEF0; color: var(--muted); border: 1px solid var(--line); }
.sla-green, .pq-green { color: var(--green-700); }
.sla-amber, .pq-amber { color: var(--warning-ink); }
.sla-red, .pq-red { color: var(--brand-dark); }
.dot { border-radius: 999px; }

/* Notices carry meaning in a 4px left rule, never a coloured field. */
/* Notices: a hairline box like every other surface — no side bar (owner
   review, 4 Oct 2026: the 4px bar on a rounded box read as a bracket that
   matched nothing else). Tone is the tint and the border colour, never an edge.
   Corner radius comes from claude-system.css §5 (the card radius). */
.notice { border: 1px solid var(--line); background: #fff; }
.notice-info { border-color: var(--line); background: #fff; }
.notice-success { border-color: var(--green-100, var(--line)); background: var(--green-50); }
.notice-warn { border-color: #F3D48A; background: var(--warning-tint); }
.notice-danger { border-color: #F3C3C8; background: var(--brand-tint); }
/* A refresh failed but the rows underneath are still usable — this reports it
   without taking the page, which is what `LoadError` does and what makes sense
   only on a first load. Warning, not danger: nothing is broken, the content is
   simply not current. Sits in flow above the list so it cannot cover a row. */
.refetch-error {
  display: flex; align-items: center; gap: var(--cl-3, 8px);
  margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid #F3D48A;
  border-radius: var(--cl-r-xl, 10px); background: var(--warning-tint); color: var(--warning-ink);
  font-size: 12.5px;
}
.refetch-error > span { flex: 1 1 auto; min-width: 0; }
.refetch-error > .btn { flex: 0 0 auto; color: var(--warning-ink); }
.error-banner { border-radius: 14px; border: 1px solid var(--brand-tint-bd); background: var(--brand-tint); color: var(--brand-dark); }
.success-banner { border-radius: 14px; border: 1px solid var(--green-border); background: var(--green-50); color: var(--green-700); }

/* --------------------------------------------------------------- 6. TABLES */
.table, table { font-size: 13px; }
table.table thead th, .table thead th, table thead th {
  background: #F5F5F5; color: var(--muted); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--line);
}
table.table tbody td, .table tbody td, table tbody td {
  font-size: 13px; padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--ink);
}
table.table tbody tr:hover, .table tbody tr:hover { background: #F4F5F7; }
tr.row-selected > td { background: var(--green-50); }
.cell-strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.cell-sub, .cell-sub-only { font-size: 11.5px; color: var(--muted); }
.sort-th { color: var(--muted); }
/* Hiring plan by project: table-layout is auto and every cell was left/start
   aligned, so the long Project name column pushed its leftover width onto
   "Planned seats" / "Open roles" — a 2-digit or 1-digit value then sat far
   from its header and from the Progress bar. Right-align header and body
   together for the plain-number columns so each value reads under its own
   label; the name and Progress columns are unaffected. */
.plan-table th:nth-child(2), .plan-table th:nth-child(3), .plan-table th:nth-child(4),
.plan-table td:nth-child(2), .plan-table td:nth-child(3), .plan-table td:nth-child(4) {
  text-align: right;
}
.pager { font-size: 12px; color: var(--muted); }
.pager-page { border-radius: 999px; }

/* --------------------------------------------------------- 7. DASHBOARD KIT */
.dash-head { margin-bottom: 20px; }
/* Three across is the approved rhythm. A row that genuinely carries four (the
   Reports page) gets four rather than a 3+1 orphan. */
.dash-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.dash-kpi-row.kpi-4,
.dash-kpi-row:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dash-kpi {
  min-height: 136px; padding: 20px; border-radius: var(--card-radius);
  border: 1px solid var(--line); background: #fff; box-shadow: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.dash-kpi::before { display: none; }
.dash-kpi.kpi-risk { border-color: var(--brand-tint-bd); }
.dash-kpi.kpi-attn { border-color: #F3D48A; }
.dash-kpi-label {
  font-size: 11px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.dash-kpi-val {
  font-family: Arial, Helvetica, sans-serif; font-size: 43px; line-height: 1.05;
  font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums;
}
.dash-kpi-hint { font-size: 12.5px; color: var(--muted); }
/* A tile whose source did not load shows a muted dash, never a zero: a zero
   reads as "nothing to do", which a failed read cannot claim. */
.dash-kpi-unavailable .dash-kpi-val { color: var(--muted); }
/* One muted line under rows that did load, when another source for the same
   list failed. The page-level notice carries the reason and the retry. */
.section-caveat { display: flex; align-items: center; gap: 8px; padding: 10px 20px 14px; font-size: 12.5px; color: var(--muted); }
.section-caveat > svg { color: var(--warning-ink); }
/* The candidate's current application, one line under the identity header. */
.app-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 13px; }
.app-context > .btn { margin-left: auto; }
/* Bulk move bar: the scope on the left, the action on the right, both wrap. */
/* The pipeline's bulk bar is the Talent Pool's bulk bar (brand background,
   white text, defined in styles.css); these rules only let it wrap and keep
   its two halves apart, and give the scope caveat legible ink on that field. */
.bulk-bar { flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.bulk-bar .muted { color: rgba(255, 255, 255, .82); }
/* Buttons on the brand field: the primary action is white with brand ink, the
   ghost is outlined in white. Later layers paint .btn brand-on-brand and
   .btn-ghost white-on-white here, which hid both labels. */
.bulk-bar .btn { background: #fff; color: var(--green-700); border-color: #fff; }
.bulk-bar .btn:hover:not(:disabled) { background: #F4F5F7; color: var(--green-700); }
.bulk-bar .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.bulk-bar .btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .14); color: #fff; }
.bulk-bar select { color: #fff; }
.bulk-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bulk-actions select { min-width: max-content; }
/* The system administrator's dashboard view switcher sits under the title. */
.dash-view-tabs { margin: -4px 0 18px; }
/* The knowledge line: a hairline, a short red dash, one quiet sentence and
   its author. Sits under the page content, never in the way of it. */
.knowledge-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 40px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.knowledge-line .kl-dash { flex: 0 0 auto; width: 18px; height: 2px; background: var(--brand); align-self: center; }
.knowledge-line .kl-quote { flex: 1 1 220px; min-width: 0; max-width: 68ch; }
.knowledge-line .kl-by { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dash-kpi-top .dash-ico { display: none; }
.dash-grid-2 { gap: 16px; }
.dash-bar-fill { border-radius: 999px; }
.dash-bar-track, .funnel-mini, .dash-ftrack { background: #ECEEF0; border-radius: 999px; }
.dash-link { color: var(--green-700); font-weight: 700; }
.dash-donut span { font-family: Arial, Helvetica, sans-serif; font-weight: 400; }
.dash-state-ico { background: var(--green-50); color: var(--green-700); }

/* Action list — the "waiting on you" pattern: signal, what, why, one action. */
/* Same fixed-launcher collision as .role-health below: this list's action sits
   on the content's right edge, so as the list scrolls past the launcher the
   button lands inside its footprint and stops taking clicks. Measured across
   the full scroll range at 1440/1200/1024, this was the one remaining overlap
   after .role-health got its lane. Reserve the same lane, for the same reason. */
.action-list { display: grid; padding-right: 48px; }
.action-item {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.action-item:last-child { border-bottom: 0; }
.action-item .signal { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-top: 2px; }
.action-item .signal.risk { background: var(--brand); }
.action-item .signal.warn { background: var(--warning); }
.action-item .signal.good { background: var(--green); }
.action-copy strong { display: block; font-size: 13.5px; color: var(--ink); }
.action-copy span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.action-copy em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; margin-top: 3px; color: var(--muted); }
.action-copy em.risk { color: var(--brand-dark); }
.action-copy em.warn { color: var(--warning-ink); }
.action-copy em.good { color: var(--green-700); }
.reassurance {
  padding: 14px 20px; border-top: 1px solid var(--line); font-size: 12.5px;
  color: var(--muted); background: #fff; border-radius: 0 0 var(--card-radius) var(--card-radius);
}
.reassurance::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: 8px; vertical-align: 2px;
}

/* "Today" rail — tinted event cards; tone is the tint, no side rule. */
.event-list { display: grid; gap: 10px; padding: 16px 20px; }
.event {
  border: 1px solid var(--line);
  border-radius: var(--cl-r-xl, 10px); padding: 11px 13px; background: #F9F9FA;
}
.event strong { display: block; font-size: 12.5px; color: var(--ink); }
.event span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.event.good { background: var(--green-50); }
.event.warn { background: var(--warning-tint); }
.event.risk { background: var(--brand-tint); }
.event.risk strong { color: var(--brand-dark); }

/* Role health rows — one line per requisition. */
/* The anyhelp launcher rests as a fixed 56x56 box anchored 22px off the
   viewport's right/bottom edge (see section 11 below). This list's last
   column (the age label + Open button) runs along that same right edge, and
   because both offsets are fixed px values, the Open button lands ~33px
   inside the launcher's footprint at every width from 1024 to 1440,
   whichever row's vertical position happens to line up with it. The
   launcher's Y position moves with scroll, so dodging it vertically isn't
   reliable — reserve a lane clear of its X range instead, which is constant. */
.role-health { display: grid; padding-right: 48px; }
.role-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) 120px minmax(0, .9fr) 92px;
  gap: 12px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.role-row:last-child { border-bottom: 0; }
.role-row .cell-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.role-row .cell-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.role-row .idle { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); }
/* Age label + Open button, 4th column. Both are inline-level, so without this
   they sat on the same baseline with a 0px gap (the "0d" reading as part of
   the button). Stack them with a real gap instead of the old inline
   `margin-top:6px` on the button, which does nothing for two inline siblings. */
.role-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.progress, .fit-bar { height: 10px; border-radius: 999px; background: #ECEEF0; overflow: hidden; }
.progress > span, .fit-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--green); }

/* ------------------------------------------------------- 8. PIPELINE BOARD */
.kanban { gap: 12px; }
.kan-col { border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.kan-head { border-top: 0; border-bottom: 1px solid var(--line); padding: 13px 15px; }
.kan-title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.kan-count { border-radius: 999px; background: #ECEEF0; color: var(--muted); font-size: 10.5px; font-weight: 700; }
.kan-body { background: #F4F5F7; }
.pcard { border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: none; }
.pcard-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.pcard-role, .pcard-facts .fact { font-size: 11.5px; color: var(--muted); }
.pcard-av, .idcell-av, .cmdk-av, .intake-avatar, .profile-header .ph-avatar {
  background: var(--green-700); color: #fff;
}
.pipe-count { color: var(--muted); }

/* -------------------------------------------------- 9. PROFILES & TICKETS */
.profile-header { padding: 18px 20px; border-radius: var(--card-radius); }
.profile-header .ph-name { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 400; }
.profile-header .ph-headline { font-size: 12.5px; color: var(--muted); }
/* The approved design carries exactly ONE red element: the 2px rule at the top
   of the application. A solid red bar on every ticket card competed with it and
   said nothing a reader could act on — priority is already a badge on the card.
   Kept in the DOM (other views measure it) but reduced to a hairline. */
.rq-rail { background: var(--line); }
.rq-card { border-top: 1px solid var(--line); }
/* A flush card holds a table edge-to-edge; the footer note has to keep the
   card's own bottom radius. */
.card.flush { overflow: hidden; }
.card.flush .table-wrap { overflow-x: auto; }
.rq-title { font-size: 15px; font-weight: 700; }
.rq-meta dt { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.rq-meta dd { font-size: 12.5px; color: var(--ink); }
.rq-card, .ticket-card { border-radius: var(--card-radius); border: 1px solid var(--line); }

/* ------------------------------------------------------------- 10. OVERLAYS */
/* A dialog owns the screen while it is open: header and footer stay put, only
   the body scrolls, so Cancel/Save are always reachable without hunting for
   them at the bottom of a long form. */
.modal {
  border-radius: var(--card-radius); box-shadow: var(--shadow-pop); border: 1px solid var(--line);
  display: flex; flex-direction: column; max-height: min(92vh, 100%); overflow: hidden;
}
.modal > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal > .modal-head, .modal > .modal-foot { flex: 0 0 auto; }
/* A dialog is modal: neither the launcher nor the bottom navigation may sit on
   top of it. The nav was cutting the Cancel/Save row in half on a phone. */
body:has(.modal-overlay) .anyhelp-fab,
body:has(.intake-modal-backdrop) .anyhelp-fab,
body:has(.modal-overlay) .mobile-nav,
body:has(.intake-modal-backdrop) .mobile-nav,
body:has(.modal-overlay) .more-sheet { display: none; }
.modal-overlay { background: rgba(20, 20, 20, .46); }
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-head h3, .modal-head h2 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 700; }
.modal-body { padding: 20px 22px; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); gap: 10px; }
.cmdk { border-radius: var(--card-radius); box-shadow: var(--shadow-pop); border: 1px solid var(--line); }
.cmdk-row.active, .cmdk-row:hover { background: var(--green-50); }
.empty { color: var(--muted); }
.empty-title { color: var(--ink); font-size: 15px; font-weight: 700; }
.skeleton { background: #ECEEF0; border-radius: 999px; }
.spin { border-top-color: var(--green); }

/* ================================================================ 11. ANYHELP
   The assistant + team-chat dock. `anyhelp` is the product name everywhere the
   user can see it, including assistive text. */
/* The launcher rests as its mark and opens to the approved labelled pill on
   hover or keyboard focus.

   WHY IT RESTS SMALL. As a permanently expanded pill it sat, at 1440x900, on
   top of the "Open" button in the last visible row of the dashboard's role
   list — a fixed element covering a real control. Resting at 56x56 keeps it out
   of the row-action column, and reaching for it still shows the full "anyhelp /
   Team + AI" pill, so nothing about the approved design is lost at the moment
   the user actually looks at it. The accessible name is on the button itself
   and never depends on the label being painted. */
.anyhelp-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  min-height: 56px; padding: 7px; gap: 0;
  border: 1.5px solid var(--green); border-radius: 999px;
  background: #fff; color: var(--green-700); display: flex; align-items: center;
  justify-content: flex-start;
  box-shadow: 0 18px 40px rgba(16, 20, 26, .16); cursor: pointer; font: inherit;
  transition: padding .16s ease, gap .16s ease, background .16s ease, opacity .18s ease;
}
/* Yielding state — see the AnyHelp component. Opacity and pointer-events only:
   nothing here changes the launcher's size or position, so it cannot shift
   anything while it fades, and it can never be the reason a click misses. */
.anyhelp-fab.is-yielding { opacity: .18; pointer-events: none; }
.anyhelp-fab:hover, .anyhelp-fab:focus-visible {
  padding: 7px 16px 7px 7px; gap: 10px; background: var(--green-50);
}
.anyhelp-fab:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.anyhelp-fab.is-open { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .anyhelp-fab { transition: none; } }
.anyhelp-fab-mark {
  width: 40px; height: 40px; border-radius: 50%; background: var(--green-700); color: #fff;
  display: grid; place-items: center; font-size: 18px; font-weight: 700; flex: 0 0 auto;
}
/* The label collapses to ZERO WIDTH at rest, not merely to zero opacity. An
   invisible-but-laid-out label is still a flex item: it stole space from the
   mark inside the button's fixed width and pushed it off-centre, where the
   rounded overflow clipped it. Collapsing max-width lets the button size itself
   to the mark alone, so there is nothing to clip and nothing to centre against. */
.anyhelp-fab-copy {
  text-align: left; white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transition: max-width .16s ease, opacity .12s ease;
}
.anyhelp-fab:hover .anyhelp-fab-copy,
.anyhelp-fab:focus-visible .anyhelp-fab-copy { max-width: 130px; opacity: 1; }
.anyhelp-fab-copy strong { display: block; font-size: 12px; }
.anyhelp-fab-copy small { display: block; font-size: 10.5px; color: var(--muted); }

.anyhelp-dock {
  position: fixed; top: 76px; right: 18px; bottom: 18px;
  width: min(400px, calc(100vw - 28px)); background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(1.05) blur(8px);
  border: 1px solid var(--line); border-radius: var(--card-radius); z-index: 85;
  display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  overflow: hidden; box-shadow: var(--shadow-pop);
}
.anyhelp-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 16px 10px;
}
.anyhelp-kicker {
  margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-700); font-weight: 700;
}
.anyhelp-head strong { display: block; font-size: 16px; margin-top: 2px; color: var(--ink); }
.anyhelp-context {
  margin: 0 16px 10px; padding: 10px 12px; border: 1px solid var(--green-border);
  background: var(--green-50); border-radius: 14px;
}
.anyhelp-context span { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.anyhelp-context small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.anyhelp-tabs { display: flex; gap: 6px; padding: 0 16px 10px; }
/* The base reserves the selected state's 1.5px border so selecting a tab adds
   colour, never width. `.on` below repaints it; it must never re-declare it. */
.anyhelp-tabs button {
  min-height: 32px; border: 1.5px solid transparent; border-radius: 999px; padding: 0 14px;
  background: #ECEEF0; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.anyhelp-tabs button.on { background: #fff; color: var(--green-700); border: 1.5px solid var(--green); }
.anyhelp-tabs button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.anyhelp-notice { margin: 0 16px 10px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.anyhelp-thread { overflow: auto; padding: 0 16px 12px; display: grid; gap: 10px; align-content: start; }
.anyhelp-msg {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #F4F5F7;
}
.anyhelp-msg.ai { background: var(--green-50); border-color: var(--green-border); }
.anyhelp-msg.mine { background: #fff; }
.anyhelp-msg.system { background: #fff; border-style: dashed; }
.anyhelp-msg.failed { background: var(--brand-tint); border-color: var(--brand-tint-bd); }
.anyhelp-who { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.anyhelp-who b { font-size: 12px; color: var(--ink); }
.anyhelp-who span { font-size: 10px; color: var(--faint); }
.anyhelp-msg p { margin: 0; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.anyhelp-results { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.anyhelp-results li {
  border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 10px; font-size: 12px;
}
.anyhelp-results strong { display: block; font-size: 12.5px; }
.anyhelp-results small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.anyhelp-composer {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end;
  padding: 12px 16px 16px; border-top: 1px solid var(--line); background: #fff;
}
.anyhelp-composer textarea {
  width: 100%; min-height: 44px; max-height: 120px; border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 10px; resize: vertical; background: #F4F5F7; font-size: 12.5px;
}
.anyhelp-composer .btn { min-width: 76px; background: var(--green-700); color: #fff; border-color: var(--green-700); }
.anyhelp-composer .btn:hover { background: var(--green); color: #fff; border-color: var(--green); }
.anyhelp-composer .btn:disabled { background: #ECEEF0; color: var(--muted); border-color: var(--line); }
.anyhelp-empty { padding: 18px 4px; text-align: center; font-size: 12px; color: var(--muted); }

/* ======================================================== 12. MOBILE CHROME */
.mobile-nav { display: none; }
.more-sheet { display: none; }
.sidebar-scrim { display: none; }

@media (max-width: 1180px) {
  :root { --sidebar-w: 214px; }
  /* The previous stylesheet collapsed the sidebar to a 66px icon rail here.
     The approved design keeps a readable sidebar down to the 900px drawer
     breakpoint, so the labels — and the role-scope card — stay visible. */
  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  /* .side-txt's base rule (line 117) is `display: grid` so "Arabtec" stacks
     over "Recruitment Hub" on two lines. Restoring visibility here with
     `display: block` flattened that grid, so the two lines ran together
     inline with a 0px gap ("ArabtecRECRUITMENT HUB"). Give it back its own
     display instead of sharing the flat `block` meant for the other two. */
  .sidebar .side-txt { display: grid; }
  .sidebar .nav-section,
  .sidebar .nav-item > span:not(.nav-icon) { display: block; }
  .sidebar .nav-item > span:not(.nav-icon) { flex: 1; }
  .sidebar .nav-item { justify-content: flex-start; padding-left: 10px; padding-right: 10px; }
  .sidebar .nav-count { display: inline-grid; }
  .sidebar-head { justify-content: flex-start; padding-left: 8px; padding-right: 8px; }
  .nav { padding: 6px 0 0; }
  .content { padding-left: 20px; padding-right: 20px; }
  .dash-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .dash-kpi-row.kpi-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .shell { display: block; grid-template-columns: none; }
  .sidebar {
    /* Pinned top-to-bottom: `height` is left to the inset pair so the drawer
       always reaches the bottom of the viewport, whatever the browser chrome
       is doing to 100vh on that device. */
    position: fixed; top: 2px; bottom: 0; left: 0; right: auto; height: auto;
    z-index: 95; width: min(300px, 88vw);
    transform: translateX(-105%); overflow-y: auto;
    /* A closed drawer must be INERT, not merely off-screen. Moved out of view
       by transform alone it kept `visibility: visible`, so every one of its
       ~24 navigation buttons stayed in the tab order and in the accessibility
       tree: on a phone you tabbed through the whole hidden menu before
       reaching the page, and a screen reader read it out. `visibility:
       hidden` removes both, and delaying it by the slide duration lets the
       close animation still play before the drawer goes inert. */
    visibility: hidden;
    transition: transform .18s ease, visibility 0s linear .18s;
  }
  .sidebar.mobile-open {
    transform: translateX(0); box-shadow: 18px 0 50px rgba(0, 0, 0, .13);
    visibility: visible;
    transition: transform .18s ease, visibility 0s linear 0s;
  }
  .sidebar.collapsed { --sidebar-w: 236px; width: min(300px, 88vw); padding: 18px 14px 20px; }
  /* Drawer rows are touch targets here, not pointer targets: they measured
     34px, against the 44px floor the rest of the phone UI already holds
     (arabtec-responsive.css). Height only — the label, icon and count chip
     keep their desktop sizes. */
  .sidebar .nav-item { min-height: 44px; }
  .sidebar .nav-section { padding-top: 18px; }
  .sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: 90; background: rgba(20, 20, 20, .38);
    border: 0; padding: 0;
  }
  .main { display: block; }
  .topbar { height: 58px; padding: 0 12px; gap: 8px; }
  .topbar .tb-brand { display: none; }
  .topbar .menu-btn { display: grid; place-items: center; }
  .topbar .collapse-btn { display: none; }
  .gsearch { flex: 1; min-width: 0; }
  .gsearch .gsearch-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gsearch .kbd { display: none; }
  .profile > div:not(.avatar):not(.menu) { display: none; }
  .content { padding: 20px 16px 128px; min-height: calc(100vh - 58px); }
  .page-title, .page-head .page-title, .dash-head .page-title { font-size: 30px; }
  .page-head { display: block; }
  .page-head-actions, .dash-actions { margin-top: 14px; flex-wrap: wrap; }
  .content::before { width: 78vw; height: 40vh; opacity: .028; }

  /* Five-item bottom navigation, as approved. */
  .mobile-nav {
    position: fixed; display: grid; grid-template-columns: repeat(5, 1fr);
    left: 0; right: 0; bottom: 0; height: calc(66px + env(safe-area-inset-bottom));
    padding: 5px 4px env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
    z-index: 70; backdrop-filter: blur(12px);
  }
  .mobile-nav button {
    border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 9.5px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border-radius: 10px; cursor: pointer; padding: 0 2px; line-height: 1.15; text-align: center;
  }
  .mobile-nav button.active { color: var(--green-700); font-weight: 700; background: var(--green-50); }
  .mobile-nav button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
  .mobile-nav svg { width: 18px; height: 18px; }

  .more-sheet {
    display: block; position: fixed;
    inset: auto 8px calc(72px + env(safe-area-inset-bottom)) 8px;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    box-shadow: var(--shadow-pop); padding: 10px; z-index: 78; max-height: 66vh; overflow: auto;
  }
  .more-sheet .nav-section { padding: 4px 6px 8px; }
  .more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .more-grid button {
    min-height: 48px; border: 1px solid var(--line); background: #fff; border-radius: 12px;
    text-align: left; padding: 8px 10px; font: inherit; font-size: 11.5px; font-weight: 700;
    color: var(--ink); cursor: pointer;
  }
  .more-grid button.active { background: var(--green-50); border-color: var(--green-border); color: var(--green-700); }

  /* The dock becomes a bottom sheet that clears the bottom navigation. */
  .anyhelp-fab { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .anyhelp-dock {
    top: auto; right: 8px; left: 8px; bottom: calc(74px + env(safe-area-inset-bottom));
    width: auto; height: min(72vh, 640px); border-radius: 18px 18px 12px 12px;
  }
  .dash-grid-2, .report-grid, .form-grid { grid-template-columns: 1fr; }
  .kanban { grid-auto-columns: 82vw; }
  /* The desktop FAB-lane reservations above (.role-health / .action-list
     padding-right) are sized for the anyhelp launcher's desktop anchor
     (right:22/bottom:22). At this width the launcher already relocates
     (right:12px, bottom: 80px+ safe-area, just below) so the lane isn't
     needed — drop it rather than waste width on an already-narrow screen. */
  .role-health, .action-list { padding-right: 0; }
}

@media (max-width: 640px) {
  html { font-size: 15px; }
  .shell { grid-template-columns: none; }
  .content { padding: 16px 14px 132px; }
  .card { border-radius: 18px; }
  .card-pad { padding: 16px; }
  .card-head { padding: 14px 16px; min-height: 54px; }
  .page-title, .page-head .page-title, .dash-head .page-title { font-size: 30px; }

  /* KPI cards scroll horizontally inside their own row — the page never does. */
  .dash-kpi-row, .dash-kpi-row.kpi-4, .grid-kpi {
    display: flex; grid-template-columns: none; overflow-x: auto;
    scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .dash-kpi, .kpi { min-width: 238px; min-height: 126px; padding: 16px; scroll-snap-align: start; flex: 0 0 auto; }
  .dash-kpi-val { font-size: 38px; }

  /* Touch targets. */
  .btn, .btn-sm, .btn.small { min-height: 44px; }
  .tabbar-btn, .profile-tab, .seg-tab { min-height: 44px; }
  /* The Cards/Table switch was a 28px target — below the 44px a thumb needs. */
  .view-toggle-btn { min-height: 40px; padding: 0 14px; }
  .view-toggle { padding: 2px; }
  .toolbar input, .toolbar select, .field input, .field select { min-height: 44px; }
  .icon-btn { width: 42px; height: 42px; }

  /* Tables become stacked records. Every cell keeps its column name so nothing
     is hidden; the row stays one tap target. */
  .table-wrap, .card > .table-wrap { overflow-x: visible; }
  table.responsive-table, .responsive-table { display: block; }
  .responsive-table thead { display: none; }
  .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table tr {
    border: 1px solid var(--line); border-radius: 16px; background: #fff;
    padding: 12px 14px; margin-bottom: 10px;
  }
  .responsive-table tbody tr:hover { background: #fff; }
  .responsive-table td { border: 0; padding: 5px 0; display: flex; gap: 12px; align-items: baseline; }
  .responsive-table td::before {
    content: attr(data-label); flex: 0 0 40%; font-size: 10.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--faint); font-weight: 700;
  }
  .responsive-table td:first-child { display: block; }
  .responsive-table td:first-child::before { display: none; }
  .responsive-table td.cell-actions { justify-content: flex-end; }
  .responsive-table td.cell-actions::before { display: none; }

  /* The launcher becomes its mark alone below 640px. The pill's label is the
     part that reaches across a row's action buttons, and on a phone the mark
     is recognisable without it — this is the fix for the FAB sitting on top of
     row actions, and it keeps the approved shape everywhere it fits. */
  .anyhelp-fab { min-height: 52px; padding: 6px; }
  .anyhelp-fab:hover, .anyhelp-fab:focus-visible { padding: 6px; gap: 0; }
  .anyhelp-fab-copy, .anyhelp-fab:hover .anyhelp-fab-copy { display: none; max-width: 0; }
  .anyhelp-fab-mark { width: 38px; height: 38px; }

  /* Filters: the search box owns its row, the selects pair up. The previous
     sheet stacked all five controls one-per-row, which pushed the first result
     clean off a 375px screen. */
  .toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .toolbar input { flex: 1 1 100%; width: auto; min-width: 0; }
  .toolbar select { flex: 1 1 calc(50% - 6px); width: auto; min-width: 0; }
  .toolbar .btn { flex: 0 0 auto; }
  .toolbar .spacer { display: none; }

  .action-item { grid-template-columns: 8px minmax(0, 1fr); row-gap: 10px; }
  .action-item .btn { grid-column: 1 / -1; width: 100%; }
  .role-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .role-row > div:last-child { text-align: left !important; display: flex; align-items: center; gap: 12px; }
  .content::before { width: min(100%, 420px); height: 34vh; opacity: .025; }
  .toolbar { padding: 10px; }
  .modal { border-radius: 18px; max-height: 92vh; }
  .cand-grid, .ats-card-grid { grid-template-columns: 1fr; }
}

/* Nothing may push the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ------------------------------------------------------------ 13. A11Y ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200; background: #fff;
  color: var(--green-700); border: 1.5px solid var(--green); border-radius: 0 0 12px 0;
  padding: 10px 16px; font-weight: 700;
}
.skip-link:focus { left: 0; }
:focus-visible { outline-color: var(--green); }

/* Assistant status line. The dock states what it is doing and, on a failure,
   what the server said — it never implies an outcome the backend has not
   reported. */
.anyhelp-status {
  font-size: 11.5px; color: var(--muted); padding: 2px 2px 4px;
  display: flex; align-items: center; gap: 8px;
}
.anyhelp-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  animation: anyhelpPulse 1.1s ease-in-out infinite; flex: 0 0 auto;
}
.anyhelp-status.failed { color: var(--brand-dark); }
.anyhelp-status.failed::before { background: var(--brand); animation: none; }
@keyframes anyhelpPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .anyhelp-status::before { animation: none; } }
.anyhelp-empty select {
  width: 100%; margin-top: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; min-height: 38px; padding: 0 14px; font: inherit; font-size: 12.5px;
}

/* A table inside a half-width dashboard column must scroll, not wrap to one
   word per line. Long project and role names are the norm here, not the edge. */
.dash-grid-2 .table-wrap { overflow-x: auto; }
.dash-grid-2 .table-wrap table { min-width: 420px; }

/* A flush card clips to keep its corners; the table inside must therefore own
   its own horizontal scroll, or columns simply disappear on a narrow screen. */
.card.flush > .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card > .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------- 14. LOGIN
   The mockup has no sign-in screen, so the login LAYOUT is left exactly as it
   was — artwork panel on the left, card on the right. Only the palette and
   geometry are brought onto the approved system, which the card already
   inherits (20px radius, no shadow, Arial, pill fields, green action). The two
   rules below finish the job: the panel's fallback colour was a navy that read
   as a different product next to the approved near-black, and the page's one
   action deserves a full touch target. */
.login-wrap { background-color: #1A1A1A; }
.login-brand::after {
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, .58) 100%);
}
.login-card { padding: 28px; }
.login-card h2 { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: 700; }
.login-card .btn { font-size: 13px; }
.login-brand-label { border-radius: 999px; }

/* ------------------------------------------------- 15. NOTIFICATIONS CONSOLE
   A checkbox matrix: one row per event, one tick per recipient. The recipient
   cell wraps rather than scrolls, because a half-visible tick is a setting
   somebody will get wrong. */
.recip-grid { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.recip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink); white-space: nowrap; cursor: pointer;
}
.recip input { margin: 0; cursor: pointer; }
.recip span { line-height: 1.3; }
/* An external recipient leaves the company. Marked, so ticking one is a
   deliberate act rather than an accident of a wide row. */
.recip-external span { color: var(--warning-ink); font-weight: 700; }
.recip-external::after {
  content: 'external'; font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--warning-ink); background: var(--warning-tint);
  border: 1px solid #F3D48A; border-radius: 999px; padding: 1px 6px;
}
/* The matrix is dense; give its checkboxes a real target without stretching rows. */
.table td > input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--green); }
.recip input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--green); }
@media (max-width: 640px) {
  .recip-grid { gap: 10px 14px; }
  .recip, .recip input { min-height: 28px; }
}

/* Roles & Permissions — two-pane layout that reflows instead of crushing the
   permission column on narrow screens (pilot fix). */
.roles-grid { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 16px; }
@media (max-width: 820px) { .roles-grid { grid-template-columns: 1fr; } }

/* ================================================= 16. UI READINESS RELEASE
   Production stabilization: clear action hierarchy, readable intake review,
   resilient admin layouts and safe horizontal overflow. This section is
   deliberately last while the three historical stylesheets still coexist. */
:root {
  --at-action: #008064;
  --at-action-hover: #00664F;
  --at-action-tint: #E6F4F0;
  --at-danger: #D01827;
  --at-danger-hover: #B01420;
  --at-focus-ring: 0 0 0 3px rgba(0, 128, 100, .32);
  --at-control-h: 40px;
}

/* Default actions are now recognisable primary actions. Explicit ghost and
   secondary classes retain the quieter outline treatment. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--at-control-h); height: auto; padding: 9px 17px;
  background: var(--at-action); color: #fff; border-color: var(--at-action);
  line-height: 1.2; text-align: center; white-space: nowrap; overflow: visible;
}
.btn:hover { background: var(--at-action-hover); color: #fff; border-color: var(--at-action-hover); }
/* ONE focus treatment, for every button and every field: a 2px green outline
   at 2px offset, and nothing else.
   Two things were wrong before. A `.btn` drew the outline AND a 3px
   `--at-focus-ring` halo — two rings, overlapping between 2px and 3px out,
   which is not one indicator. And the scoped fields drew NO outline at all:
   `.field input:focus { outline: none }` is (0,2,1) and the rule that was
   meant to restore it, `input:focus-visible`, is only (0,1,1), so every
   `.field` and `.toolbar` control fell back to the pale #E6F4F0 halo — about
   1.1:1 on white, the very contrast this sheet already rejected for buttons a
   few hundred lines above. The scoped forms are therefore spelled out here so
   they match the `outline: none` they have to beat, and `box-shadow: none`
   leaves exactly one ring on all of them. `.login-card .btn` is listed for the
   same reason: styles.css pins a `--ring` shadow on it at (0,2,1).
   Ring WIDTH, OFFSET and STYLE are geometry and are restated in section 20 of
   claude-system.css; this rule owns the colour. */
.btn:focus-visible, .login-card .btn:focus-visible,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.toolbar input:focus-visible, .toolbar select:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--at-action); outline-offset: 2px; box-shadow: none;
}
.btn-secondary, .btn-ghost {
  background: #fff; color: var(--ink-soft); border-color: var(--line-strong);
}
.btn-secondary:hover, .btn-ghost:hover {
  background: var(--at-action-tint); color: var(--at-action-hover); border-color: var(--green-border);
}
.btn-success, .btn-navy, .btn-outline-blue, .btn-primary-solid {
  background: var(--at-action); color: #fff; border-color: var(--at-action);
}
.btn-danger { background: #fff; color: var(--at-danger); border-color: var(--at-danger); }
.btn-danger:hover { background: var(--danger-tint); color: var(--at-danger-hover); border-color: var(--at-danger-hover); }
.btn-danger-solid { background: var(--at-danger); color: #fff; border-color: var(--at-danger); }
.btn-sm, .btn.small { min-height: 34px; padding: 7px 13px; }

/* Contextual empty states finally use their requested icon. Errors are clearly
   different without making ordinary zero-data states alarming. */
.empty .ico { font-size: 28px; line-height: 1; }
.empty-error { background: #FFF8F8; }
.empty-error .ico { background: var(--danger-tint); color: var(--at-danger); }
.empty-error .empty-title { color: var(--at-danger-hover); }

/* Roles and permissions — readable selection, stable columns and real wrapping. */
.roles-layout { display: grid; grid-template-columns: minmax(210px, 240px) minmax(0, 1fr); gap: 16px; align-items: start; }
.roles-list .nav-item { width: 100%; text-align: left; color: var(--ink); }
.roles-list .nav-item.active { color: var(--at-action-hover); background: var(--at-action-tint); font-weight: 700; }
.permissions-panel { display: grid; }
.permission-toggle { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.permission-toggle input { flex: 0 0 auto; margin-top: 4px; accent-color: var(--at-action); }

/* One tab treatment for the Control Center; red remains reserved for risk. */
.control-tabs { display: flex; gap: 4px; margin-bottom: 18px; padding: 3px; width: max-content; max-width: 100%; overflow-x: auto; background: #ECEEF0; border-radius: 999px; }
.control-tab { min-height: 36px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.control-tab:hover { color: var(--at-action-hover); }
.control-tab.active { background: #fff; color: var(--at-action-hover); }
.control-tab:focus-visible { outline: 2px solid var(--at-action); outline-offset: -2px; }

/* Bare legacy tables own their horizontal overflow instead of being clipped by
   body overflow-x:hidden. Responsive tables keep their stacked mobile rules. */
.card:has(table:not(.responsive-table):not(.review-table):not(.parse-review-table):not(.assess-table)),
.card-pad:has(table:not(.responsive-table):not(.review-table):not(.parse-review-table):not(.assess-table)),
.modal-body:has(table:not(.responsive-table):not(.review-table):not(.parse-review-table):not(.assess-table)) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card table:not(.responsive-table):not(.review-table):not(.parse-review-table):not(.assess-table),
.modal-body table:not(.responsive-table):not(.review-table):not(.parse-review-table):not(.assess-table) { min-width: 680px; }

/* CV intake belongs to the same readable product as the rest of the ATS. */
.intake-queue { border-top-color: var(--at-action); }
.intake-list-copy strong { font-size: 13px; }
.intake-list-copy small { font-size: 11.5px; }
/* Why this CV needs a person. It is the reason the row exists, so it is allowed
   to wrap rather than being ellipsed away like the metadata line above it. */
.intake-list-copy .intake-why {
  margin-top: 2px;
  color: var(--ink-soft);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
}
.intake-state, .preview-status-badge { font-size: 10.5px; }
.intake-review-head p, .intake-back { font-size: 12.5px; }
.intake-banner { font-size: 12.5px; line-height: 1.5; }
.intake-banner strong { font-size: 13px; }
.review-summary > div { border-radius: var(--cl-r-xl, 10px); }
.review-summary span { font-size: 10.5px; }
.review-panel { border-radius: 16px; }
.review-panel-head h2 { font-size: 16px; }
.review-panel-head p { font-size: 12px; line-height: 1.45; }
.review-table th { font-size: 10.5px; }
.review-table td, .review-table td > strong { font-size: 12.5px; }
.review-table td > small, .evidence-cell small, .preview-table td small { font-size: 11px; }
.evidence-quote, .decision-select, .review-edit { font-size: 12px; }
.decision-select, .review-edit { min-height: 38px; height: auto; }

.fatal-state { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--canvas); }
.fatal-state-card { width: min(520px, 100%); text-align: center; }
.fatal-state-card h1 { margin: 6px 0 10px; font-size: 26px; }
.fatal-state-mark { width: 48px; height: 48px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--danger-tint); color: var(--at-danger); font-size: 24px; font-weight: 700; }
.fatal-state-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

@media (max-width: 1180px) {
  .dash-kpi-row.kpi-4,
  .dash-kpi-row:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .roles-layout { grid-template-columns: 1fr; }
  .roles-list .card-pad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .review-panel-head, .review-submit { align-items: flex-start; flex-direction: column; }
  .intake-head-actions { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .btn, .btn-sm, .btn.small { min-height: 44px; }
  .btn { white-space: normal; }
  .roles-list .card-pad { grid-template-columns: 1fr; }
  .control-tabs { width: 100%; }
  .modal-overlay { padding: 8px; align-items: end; }
  .modal, .modal[style] { width: 100%; max-width: 100% !important; height: auto !important; margin: 0; border-radius: 20px 20px 14px 14px !important; max-height: 94vh; }
  .modal-head, .modal-body, .modal-foot { padding-left: 16px; padding-right: 16px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 140px; }
  .review-table { min-width: 760px; }
  .review-summary { grid-template-columns: 1fr; }
}

/* Approved shared control and pipeline inks. Geometry is in claude-system.css. */
.empty .ico { opacity: 1; background: transparent; }
.btn-secondary, .btn-ghost { border-color: rgba(26,26,26,.18); }
.role-choice { background: var(--surface); border-color: transparent; color: var(--ink); }
.role-choice:hover { background: var(--green-050, #E6F4F0); }
.role-choice.active { background: var(--green-050, #E6F4F0); border-color: var(--action); color: var(--action-dark); font-weight: 600; }
.permissions-save { background: var(--surface); }
.permission-code { color: var(--muted); }
.perm-area { border-top: 1px solid var(--line); }
.perm-area-head h4 { color: var(--text-strong); font-size: 15px; }
.perm-area-count { font-size: 13px; }
button.pcard-name { color: var(--ink); background: transparent; }
.pcard-menu-trigger, .pipeline-menu .menu-item { color: var(--ink); background: transparent; }
.pipeline-menu .menu-item:hover, .pipeline-menu .menu-item:focus-visible { background: var(--green-050, #E6F4F0); }
.pipeline-menu .menu-danger { color: #B01420; }
.pcard-facts, .pcard-request, .pcard-residual { color: #5B6472; }
.pcard-footer { border-color: rgba(26,26,26,.10); }
.pcard-match { color: var(--action-dark); }
.kan-drop-active { outline: 2px dashed var(--action); outline-offset: -2px; }

/* ============================================================================
   CV Intake control panel  (cvi-*)
   Borders, never shadows. One radius. Red stays an accent: the only saturated
   surface here is the primary Approve button, which is the single decision on
   the page that spends money.
   ========================================================================== */

.cvi-alert { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.cvi-alert--bad { border-color: #F3C4C8; background: #FEF2F3; color: #B01420; }
.cvi-alert--ok  { border-color: #BFE3CC; background: #F0FDF4; color: #15803D; }

.cvi-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.cvi-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.cvi-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.cvi-filters input[type="date"] { height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font: inherit; color: var(--ink); background: var(--surface); }
.cvi-spacer { flex: 1 1 auto; }

.cvi-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 16px; }
.cvi-metric { display: flex; flex-direction: column; gap: 4px; }
.cvi-metric strong { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }

.cvi-states { display: flex; flex-wrap: wrap; gap: 20px; }
.cvi-state { display: inline-flex; align-items: center; gap: 8px; }
.cvi-state strong { font-variant-numeric: tabular-nums; font-size: 18px; }

.cvi-badge { display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cvi-badge--neutral { background: var(--canvas); color: var(--muted); border: 1px solid var(--line); }
.cvi-badge--info    { background: #EFF6FF; color: #1D4ED8; border: 1px solid #C7DBFB; }
.cvi-badge--ok      { background: #F0FDF4; color: #15803D; border: 1px solid #BFE3CC; }
.cvi-badge--warn    { background: #FFFBEB; color: #B45309; border: 1px solid #F2DFB0; }
.cvi-badge--bad     { background: #FEF2F3; color: #B01420; border: 1px solid #F3C4C8; }

.cvi-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cvi-cat { display: flex; flex-direction: column; align-items: start; gap: 2px; text-align: start;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  padding: 10px 14px; cursor: pointer; font: inherit; color: var(--ink); }
.cvi-cat:hover { border-color: var(--line-strong); }
.cvi-cat.is-active { border-color: var(--action); box-shadow: inset 3px 0 0 var(--action); }
.cvi-cat strong { font-size: 14px; font-weight: 600; }
.cvi-cat span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Unclassified is a to-do list, not a job. Muted so it never reads as a category. */
.cvi-cat--unclassified strong { color: var(--muted); font-style: italic; }

.cvi-batchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 0; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.cvi-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cvi-count.is-over { color: #B01420; font-weight: 600; }

.cvi-table-scroll { overflow-x: auto; }
.cvi-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cvi-table th { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cvi-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cvi-table tbody tr:hover { background: var(--canvas); }
.cvi-table tr.is-selected { background: var(--action-tint); }
.cvi-table tr.is-duplicate td:first-child { box-shadow: inset 3px 0 0 #B45309; }
.cvi-table td strong { font-weight: 600; }
.cvi-tick { width: 40px; }
.cvi-num { text-align: end; font-variant-numeric: tabular-nums; }
.cvi-file { color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvi-row-actions { text-align: end; white-space: nowrap; }
.cvi-table td .cvi-badge { margin-inline-start: 8px; }

.cvi-limits .cvi-limit-row { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.cvi-limits label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.cvi-limits input[type="number"] { height: 40px; width: 140px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font: inherit; color: var(--ink); background: var(--surface); font-variant-numeric: tabular-nums; }

.cvi-footnote { margin-top: 16px; font-size: 13px; }

.cvi-drawer-scrim { position: fixed; inset: 0; background: rgba(21, 24, 29, .38); z-index: 60; display: flex; justify-content: flex-end; }
.cvi-drawer { width: min(460px, 100%); height: 100%; background: var(--surface); border-inline-start: 1px solid var(--line); padding: 24px; overflow-y: auto; }
.cvi-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cvi-dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; margin: 0; font-size: 14px; }
.cvi-dl dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; align-self: center; }
.cvi-dl dd { margin: 0; word-break: break-word; }

@media (max-width: 720px) {
  .cvi-metrics { grid-template-columns: repeat(2, 1fr); }
  .cvi-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .cvi-dl dd { margin-bottom: 10px; }
}

/* ============================================================================
   CV REVIEW SIDE PANEL — colour, type and the brand rule
   ----------------------------------------------------------------------------
   The panel's BOX lives in claude-system.css section 21. Everything that is a
   colour or a type decision lives here, with the rest of the palette, and uses
   only tokens already declared in section 1 — no new hue is introduced.

   The head carries the same 3px red rule every other full-height overlay in
   the product carries (`.parse-review-panel`, `.rq-pop-head`): red is the
   brand rule, never an action. Every action in this panel is green.
   ========================================================================== */
.cvrev-panel {
  background: var(--surface);
  border-inline-start: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  box-shadow: var(--shadow-pop);
}
.cvrev-head-id h3 { font-family: var(--font); font-size: 18px; font-weight: 700; color: var(--ink); }
.cvrev-head-sub { font-size: 12px; color: var(--muted); }

.cvrev-col-title {
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.cvrev-details { background: var(--surface); border-inline-end: 1px solid var(--line); }
.cvrev-cv { background: var(--canvas); }

.cvrev-table { font-size: 13px; }
.cvrev-table td { border-bottom: 1px solid var(--border-soft); }
.cvrev-table td:first-child { color: var(--muted); }
.cvrev-table td:last-child { color: var(--ink); font-weight: 600; }
.cvrev-section-row td {
  border-bottom: 0; color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

.cvrev-note { background: var(--surface); border-top: 1px solid var(--line); }
.cvrev-note-label { font-size: 12px; font-weight: 700; color: var(--ink); }
.cvrev-note-hint { font-size: 11.5px; color: var(--muted); }

/* Stacked, the details pane's inline-end hairline would draw a line down the
   middle of nothing; it becomes the divider between the two stacked panes. */
@media (max-width: 900px) {
  .cvrev-details { border-inline-end: 0; border-bottom: 1px solid var(--line); }
}


/* ---- data-quality labels on a Talent Pool card ----------------------------
   Rendered with the canonical <Badge>, so colour and shape come from the
   palette; only the row they sit in is defined here. A candidate carrying one is
   a full member of the pool — the badge says what the CV left uncertain. */
.cc-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* ---- fine print ---------------------------------------------------------
   Two named sizes for text that was set inline at 11px in a dozen places.
   fine-label: an uppercase field label above a value (Info, permission
   groups, status keys). fine-key: secondary text beside or under a value
   (technical keys, timestamps, hints). Naming them is what lets the phone
   stylesheet lift both together — an inline style can't be overridden. */
.fine-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.fine-key { font-size: 11px; }


/* ================================================================ 12. WORKFORCE
   The premium visual layer (docs/design/PREMIUM_UI_SPEC.md, Figma "Arabtec
   Workforce UI Direction"). Company colours, logo and favicon are unchanged.
   This section owns colour and typeface only; sizes, radii and spacing stay in
   claude-system.css. Inter Tight / Inter fall back to Arial when the font host
   is unreachable, which is the on-prem case. */
:root {
  --font-display: 'Inter Tight', Inter, Arial, Helvetica, sans-serif;
  --font-ui: Inter, Arial, Helvetica, sans-serif;
  --card-radius: 10px; --radius: 10px; --r-md: 10px;
  /* Owner, 4 Oct 2026: light grey, a little darker than the page canvas (#F4F5F7), as on the phone. */
  --sidebar-bg: #E8EAED; --sidebar-line: #D8DCE1;
}
html, body, button, input, select, textarea, .field textarea { font-family: var(--font-ui); }
.page-title, .page-head .page-title, .dash-head .page-title, .dash-kpi-val, .kpi-value,
.card-head h2, .card-head h3, .modal-head h2, .modal-head h3, .empty-title, .login-card h1 {
  font-family: var(--font-display);
}
.page-sub { max-width: 68ch; }

/* Eyebrow: muted, tracked, and led by the brand's one red dash. */
.breadcrumb, .page-head .breadcrumb, .dash-eyebrow, .dash-kpi-label, .kpi-label { color: var(--muted); }
.page-head .breadcrumb::before, .dash-eyebrow::before {
  content: ''; display: inline-block; width: 18px; height: 2px; margin: 0 8px 3px 0;
  background: var(--brand); vertical-align: middle;
}

/* Sidebar: light grey rail (a step darker than the canvas), dark text, and the
   phone menu's green for the active item and its count. */
.sidebar { background: var(--sidebar-bg); color: var(--ink); border-right: 1px solid var(--sidebar-line); }
.sidebar-head { border-bottom-color: var(--sidebar-line); }
.side-txt strong, .sidebar-title { color: var(--ink); }
.side-txt span { color: var(--muted); }
.nav-section { color: var(--muted); }
.nav-item { color: var(--ink); position: relative; }
.nav-item:hover { background: #DCDFE3; color: var(--ink); }
.nav-item.active { background: var(--green-50); color: var(--green-700); font-weight: 700; }
.nav-item.active::before { display: none; }
.nav-item .nav-icon { color: var(--muted); opacity: 1; }
.nav-item.active .nav-icon { color: var(--green-700); }
.nav-item:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.nav-count { background: #fff; color: var(--ink-soft); }
.nav-item.active .nav-count { background: #fff; color: var(--green-700); }
.scope-card { background: #fff; border-color: var(--sidebar-line); }
.scope-card strong { color: var(--ink); }
.scope-card p { color: var(--muted); }

/* Buttons: one solid green action, white secondary, transparent ghost.
   Colour only — the box (height, padding, border width) stays in claude-system.css. */
.btn { background: var(--green-700); color: #fff; border-color: var(--green-700); font-weight: 600; }
.btn:hover { background: #00523F; border-color: #00523F; color: #fff; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: #F5F5F5; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: transparent; }
.btn-ghost:hover { background: rgba(26, 26, 26, .05); color: var(--ink); border-color: transparent; }
.btn-danger { background: #fff; color: var(--brand-dark); border-color: var(--brand); }
.btn-danger:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Badges: small, 6px corners, never a pill. */
.badge, .status-chip { border-radius: 6px; font-weight: 700; }

/* Hint: one fact the product can vouch for, with its emoji, beside or under
   the work. Never an opinion, never inside a table or a button. */
.hint {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--cl-r-xl, 10px);
  background: #fff; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.hint-emoji { flex: 0 0 auto; font-size: 15px; line-height: 1.25; }
.hint-text { flex: 1 1 240px; min-width: 0; max-width: 68ch; }
.hint-text strong { color: var(--ink); }
.hint-action { flex: 0 0 auto; margin-left: auto; }

/* Phone & WhatsApp sender card: one column, it lives in the narrow aside. */
.msg-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.msg-form .field { min-width: 0; }
.msg-form p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.msg-form .email-settings-actions { margin: 4px 0 0; }

/* Knowledge line: the topic's emoji leads the dash. */
.knowledge-line .kl-emoji { flex: 0 0 auto; font-size: 13px; align-self: center; }

/* §12b. Compact composition — the colour half of claude-system.css 19b. */
.toolbar, .toolbar.ask-bar { background: transparent; border-color: transparent; }
/* Talent Pool Ask bar: a secondary row over a hairline, its input without a
   box of its own until it has focus (geometry in arabtec-responsive.css). */
.toolbar.ask-bar { border-bottom-color: var(--border); }
.ask-bar .ask-input { border-color: transparent; background: transparent; box-shadow: none; }
.ask-bar .ask-input:focus { border-color: var(--border); background: var(--surface); }
.seg-tabs { background: transparent; border-color: var(--line); }
.tabbar, .tabs { background: transparent; border-color: var(--line); }
.tabbar-btn, .tabbar-btn.active { border-width: 0 0 2px; border-style: solid; }
.tabbar-btn { background: transparent; color: var(--muted); border-color: transparent; }
.tabbar-btn:hover { background: transparent; color: var(--ink); }
.tabbar-btn.active { background: transparent; color: var(--ink); border-color: var(--green-700); }
.seg-tab, .seg-tab.active { border-width: 0 0 2px; border-style: solid; }
.seg-tab { background: transparent; color: var(--muted); border-color: transparent; }
.seg-tab:hover { background: transparent; color: var(--ink); }
.seg-tab.active { background: transparent; color: var(--ink); border-color: var(--green-700); }
.seg-tab .seg-count { background: #ECEEF0; color: var(--muted); }
.seg-tab.active .seg-count { background: var(--green-50); color: var(--green-700); }
.profile-tab.active { color: var(--ink); border-bottom-color: var(--green-700); }
.ticket-header-card, .card.profile-shell, section.card:has(> .cvi-status) { background: transparent; border-color: var(--line); }
.kan-col { border-radius: 10px; background: #EEF0F2; border-color: transparent; }
.dash-kpi.kpi-attn { border-color: #E9C46A; }
.dash-kpi.kpi-risk { border-color: var(--brand-tint-bd); }
.dash-kpi.kpi-risk .dash-kpi-val { color: var(--brand); }

/* Empty states carry a faint blueprint grid — the one place the construction
   identity shows inside the working area. Local data URI, no remote host. */
.empty {
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M32 0H0v32' fill='none' stroke='%231A1A1A' stroke-opacity='.045'/></svg>");
  background-size: 32px 32px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 30%, transparent 100%);
}
.empty-kicker { color: var(--muted); font-weight: 600; }
.empty-error .empty-kicker { color: var(--brand); }

/* Standalone interview / offer picker and the knowledge-lines editor: colour
   only (geometry in claude-system.css). */
.standalone-results { border-color: var(--border); background: var(--surface); }
.standalone-results > li:hover { background: var(--surface-2); }
.kl-editor-count { color: var(--muted); }
.kl-editor-count.error { color: var(--danger); }

/* Interview calendar: colour and type only (geometry in claude-system.css).
   Status reads from both the label and the colour, never colour alone. */
.cal-toolbar, .cal-head, .cal-dayhead, .cal-col, .cal-month-head .cal-dow, .cal-mcell, .cal-strip { border-color: var(--line); }
.cal-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.cal-dow { font-size: 11px; font-weight: 700; color: var(--muted); }
.cal-dom { font-size: 18px; font-weight: 700; color: var(--ink); }
.cal-dayhead.today { border-bottom-color: var(--action); }
.cal-dayhead.today .cal-dom { color: var(--action); }
.cal-dayhead.offday, .cal-col.offday { background: var(--surface-2); }
.cal-time { font-size: 11px; color: var(--muted); }
.cal-slot { background: transparent; border-bottom-color: var(--border-soft); }
.cal-slot:nth-child(even) { border-bottom-color: var(--line); }
button.cal-slot:hover, button.cal-slot:focus-visible { background: var(--action-tint); }
.cal-slot.past { background: var(--surface-2); }
.cal-now, .cal-now::before { background: var(--danger); }
.cal-ev { font-size: 12px; line-height: 1.3; color: var(--ink); background: var(--surface); border-color: var(--line); }
.cal-ev:focus-visible, .cal-mev:focus-visible, .cal-mdate:focus-visible { box-shadow: var(--at-focus-ring); }
.cal-ev-time { font-weight: 700; }
.cal-ev-status { font-size: 11px; font-weight: 700; }
.cal-s-scheduled { background: var(--action-tint); border-inline-start-color: var(--action); }
.cal-s-rescheduled { background: var(--warning-tint); border-inline-start-color: var(--warning); }
.cal-s-rescheduled .cal-ev-status { color: var(--warning-ink); }
.cal-s-completed { background: var(--surface-2); border-inline-start-color: var(--line-strong); color: var(--muted); }
.cal-s-no_show { background: var(--brand-tint); border-inline-start-color: var(--danger); }
.cal-s-no_show .cal-ev-status { color: var(--critical); }
.cal-s-cancelled { background: var(--surface); color: var(--muted); }
.cal-mcell.out { background: var(--surface-2); }
.cal-mcell.out .cal-mdate { color: var(--muted); }
.cal-mfill { background: transparent; }
.cal-mfill:hover, .cal-mfill:focus-visible { background: var(--action-tint); }
.cal-mdate { font-size: 13px; font-weight: 700; color: var(--ink); background: transparent; }
.cal-mcell.today .cal-mdate { background: var(--action); color: var(--surface); }
.cal-mev { font-size: 12px; color: var(--ink); background: var(--surface); }
.cal-more { font-size: 12px; font-weight: 600; color: var(--muted); background: transparent; }
.cal-strip-day { background: transparent; border-color: transparent; color: var(--ink); }
.cal-strip-day > span { font-size: 11px; font-weight: 700; color: var(--muted); }
.cal-strip-day > strong { font-size: 16px; }
.cal-strip-day.active { background: var(--action-tint); border-color: var(--action-tint-bd); }
.cal-strip-day.today > strong { color: var(--action); }

/* Candidate Review CV side panel: colour only (geometry in claude-system.css). */
.intake-cv-side { background: var(--surface); border-color: var(--line); }
.intake-cv-side-head { border-color: var(--line); }
.intake-cv-side-head > strong { font-size: 13px; color: var(--ink); }
@media (max-width: 1100px) { .intake-cv-side { box-shadow: var(--shadow-pop); } }

/* Row "More" menu (RowMenu in app.jsx): colour only. */
.rq-pop .menu-item-danger { color: var(--danger); }
.rq-pop .menu-item.is-disabled { opacity: .45; cursor: not-allowed; }
.role-row-link { cursor: pointer; }
.role-row-link:hover { background: var(--surface-2); }
.role-row-link:focus-visible { outline: 2px solid var(--green-700); outline-offset: -2px; }
/* A request awaiting approval: neutral, not a health colour. */
.sla-waiting { color: var(--muted); }
.sla-waiting i { background: var(--muted); }
/* Priority bars: grey scale, Critical in the danger colour. */
.prio { color: var(--ink); }
.prio-bars i { background: var(--line); }
.prio-bars i.on { background: var(--ink-soft); }
.prio-critical { color: var(--danger); }
.prio-critical .prio-bars i.on { background: var(--danger); }

/* Offer expiry about to lapse (Offers list). */
.cell-sub.text-warn { color: var(--warning-ink); }
/* The candidate column reaches someone outside the company: amber heading and a tinted column. */
th.recip-external { color: var(--warning-ink); }
th.recip-external::after { content: none; }
td.recip-external { background: var(--warning-tint); }
.notif-grid td:first-child, .notif-grid th:first-child { background: var(--surface); }

/* Offer compose: the letter sits on the canvas grey, like paper on a desk. */
.offer-letter-pane { background: var(--canvas, #F4F5F7); border-color: var(--line); }
.assess-progress a { border-color: var(--line); background: #fff; color: var(--ink); }
.assess-progress a:hover { border-color: var(--line-strong, #cfd4da); }
.assess-history-list li { border-color: var(--line); }
.assess-history-when, .assess-history-reason { color: var(--muted); font-size: 12.5px; }

/* Interview scheduling & communications (claude-system.css §24). */
.iv-preview { background: var(--canvas, #F4F5F7); border-color: var(--line); }
.iv-preview-card, .iv-wa { background: #fff; border-color: var(--line); }
.iv-step-n { background: var(--green-50); color: var(--green-700); }
.iv-preview-meta, .iv-dispatch-reason { color: var(--muted); }
.iv-error { color: var(--danger, #B42318); }
.iv-avail-ok { color: var(--green-700); }
.chip-btn { background: #fff; border-color: var(--line); color: var(--ink); }
.chip-btn:hover { border-color: var(--green-700); color: var(--green-700); }
.iv-dispatch-list li { border-color: var(--line); }
.iv-step h4 { font-size: 15px; }
.iv-step-n { font-size: 12px; font-weight: 700; }
.iv-editor textarea, .iv-wa textarea, .chip-btn { font: inherit; }
.chip-btn { font-size: 12px; }
.iv-error { font-size: 13px; }
.iv-preview-meta, .iv-dispatch-reason { font-size: 12px; }
.iv-preview-body { font-size: 13px; line-height: 1.55; }

/* ---- SearchSelect, stakeholder decisions, CV full page (25 Oct 2026) ------
   Colour and type for the geometry declared in claude-system.css. */
.sselect > input::placeholder { color: var(--ink); opacity: 1; }
.sselect.open > input::placeholder { color: var(--muted); }
.sselect-caret { color: var(--muted); font-size: 12px; }
.sselect-clear { color: var(--muted); background: transparent; font-size: 16px; line-height: 1; border-radius: 4px; }
.sselect-clear:hover { color: var(--ink); background: var(--canvas); }
.sselect-list { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); }
.sselect-opt { font-size: 13px; color: var(--ink); border-radius: 6px; }
.sselect-opt > small { color: var(--muted); font-size: 11.5px; }
.sselect-opt.active { background: var(--canvas); }
.sselect-opt.selected { font-weight: 600; }
.sselect-empty { color: var(--muted); font-size: 12.5px; }
.pcard-decide { border-top: 1px dashed var(--line); }
.pcard-decide.compact { border-top: 0; }
.btn-danger-text { color: var(--critical); }
.btn-danger-text:hover { background: rgba(208, 24, 39, .08); }
.cvfull { background: var(--canvas); }
.cvfull-head { background: var(--surface); border-bottom: 1px solid var(--line); border-top: 3px solid var(--brand); }
.cvfull-head-id h1 { font-size: 17px; font-weight: 700; color: var(--ink); }
.cvfull-head-id span { font-size: 12px; color: var(--muted); }