/* =============================================================================
   ARABTEC RESPONSIVE REFLOW LAYER
   ----------------------------------------------------------------------------
   Loads LAST, after styles.css, arabtec-approved-ui.css,
   arabtec-design-system.css and claude-system.css.

   This sheet does not invent a new visual language. It stops the existing
   desktop information layouts from being compressed into phone width.

   ROOT CAUSE (Hiring Requests + Talent Pool at ~390px):
   `.responsive-table` already turns rows into cards below 640px, but each
   cell stays `display: flex` (row) with `td::before { flex: 0 0 40% }`.
   A cell that carries two values — title + department, position + company,
   university + major — therefore lays them out as:

     LABEL | value-one | value-two

   on a 390px screen. That is the overlap in the production screenshots.
   The same squeeze appears on `.rq-meta` (nowrap + fixed dt) and
   `.cand-card .cc-face` (two 1fr columns + nowrap).

   HARD RULES FOR THIS FILE
   - Reflow, do not shrink.
   - No production-data, API, RBAC or schema changes live here.
   - Colour / typeface / brand identity stay with the design system.
   ========================================================================== */

:root {
  --ats-nav-h: 66px;
  --ats-fab-size: 52px;
  --ats-fab-gutter: 12px;
}

/* ------------------------------------------------------------------ primitives
   Long construction-industry names are the norm, not the edge. Anything that
   can sit in a flex/grid child must be allowed to shrink and wrap. */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
img, svg, video, canvas {
  max-width: 100%;
}
.page-head-main,
.page-head-actions,
.idcell,
.idcell-txt,
.cell-strong,
.cell-sub,
.cell-sub-only,
.rq-title,
.rq-meta,
.rq-meta dd,
.cc-id,
.cc-name,
.cc-headline,
.cc-uni,
.cc-uni-name,
.cc-uni-major,
.pcard,
.pcard-name,
.pcard-role,
.pcard-facts,
.toolbar-search,
.gsearch,
.profile-header,
.ph-name,
.ph-headline {
  min-width: 0;
}
.cell-strong,
.cell-sub,
.cell-sub-only,
.rq-title,
.cc-name,
.cc-headline,
.cc-uni-name,
.cc-uni-major,
.pcard-name,
.pcard-role,
.pcard-facts,
.pcard-request,
.idcell-txt,
.action-copy strong,
.action-copy span,
.role-row .cell-title,
.role-row .cell-meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Value clusters inside a stacked cell must themselves stack. */
.cell-strong { display: block; }
.cell-sub { display: block; }

/* Link-to-request is a control, not a desktop-only chip. */
.rq-linkwrap,
.rq-links,
.rq-link-chip,
.rq-link-btn {
  max-width: 100%;
  min-width: 0;
}
.rq-link-chip,
.rq-link-btn {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

/* ================================================================= tablet
   Keep true tables for comparison, but never let a column crush its text.
   Secondary columns already hide between 641–1200 in claude-system.css. */
@media (max-width: 1024px) {
  .dash-grid-2,
  .report-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .role-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .page-head,
  .dash-head {
    align-items: flex-start;
  }
}

/* ======================================================== phone + large phone */
@media (max-width: 640px) {
  /* ---- stacked operational tables: COLUMN, not squeezed row ---- */
  .table-wrap,
  .card > .table-wrap,
  .card.flush > .table-wrap {
    overflow-x: visible;
  }
  table.responsive-table,
  .responsive-table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .responsive-table thead { display: none; }
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .responsive-table tr {
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  /* Symmetric padding. This used to reserve a 56px lane down the right of every
     card so the floating help button could never cover an action. The price was
     paid on every card, all the time: dividers stopped short and the content sat
     off-centre. The button floats over whatever card scrolls beneath it — the
     standard pattern — and a scroll moves it clear; the page's bottom padding
     already keeps the last card reachable. */
  .responsive-table tr,
  .cand-card,
  .rq-card,
  .ticket-card {
    padding-right: 16px;
  }

  /* A stacked cell grows with its content. claude-system.css fixes desktop rows
     at `table.table tbody td { height: var(--cl-row-h) }` (0,1,3), which outranks
     the plain `.responsive-table td` below — so without this the cell stayed 40px,
     the value spilled 8px out of it, and the next cell's border struck through
     the text. Two selectors: one ties on specificity and wins on load order, the
     other outranks it outright, so a later reordering cannot bring the bug back. */
  table.responsive-table tbody td,
  table.table.responsive-table tbody td {
    height: auto;
    min-height: 0;
    /* Numbers are right-aligned on desktop so they line up down a column
       (`.plan-table td:nth-child(n)`, 0,2,1 — outranked here at 0,2,3). A
       stacked card has no column to align against; right-aligned, the label
       (drawn by ::before, which inherits this) sat on the right while its value
       sat on the left. Everything in a stacked card reads from the start. */
    text-align: start;
  }

  /* THE FIX: label on its own line, then each value on its own line. */
  .responsive-table td {
    display: flex;
    flex-direction: column;
    /* flex-start, not stretch: a badge or a pill hugs its label instead of
       becoming a full-width bar that reads as an input field. Text still wraps —
       every child is capped at max-width: 100% below. */
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 8px 0;
    border: 0;
  }
  .responsive-table td::before {
    content: attr(data-label);
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 700;
  }
  .responsive-table td > * {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Descendants only — applying display:block to the TD itself (e.g. class=
     cell-sub-only) would cancel flex-direction:column and glue the label to
     the value: PROJECT / SITEHills of One. */
  .responsive-table td .cell-strong,
  .responsive-table td .cell-sub,
  .responsive-table td .cell-sub-only {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
  }
  .responsive-table td.cell-sub-only,
  .responsive-table td.cell-strong {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  /* Ticket / checkbox lead cell stays a header, not a labelled row. */
  .responsive-table td:first-child {
    display: block;
    padding-top: 0;
  }
  .responsive-table td:first-child::before { display: none; }
  .responsive-table td.th-sel,
  .responsive-table td.cell-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
  .responsive-table td.cell-actions {
    justify-content: stretch;
  }
  .responsive-table td.cell-actions::before { display: none; }
  .responsive-table td.cell-actions .btn {
    flex: 1 1 auto;
  }
  .responsive-table [data-priority="secondary"] {
    display: flex;
    flex-direction: column;
  }

  /* Identity cell: avatar + name stay a row; the name wraps. */
  .idcell {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
  }
  .idcell-txt { flex: 1 1 auto; min-width: 0; }
  .idcell-tags { margin-left: 0; }

  /* ---- hiring-request cards ---- */
  .rq-card,
  .ticket-card {
    min-height: 0;
    height: auto;
    overflow: visible;
  }
  .rq-title {
    white-space: normal;
    overflow: visible;
    display: block;
  }
  .rq-meta > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
  }
  .rq-meta dt {
    flex: 0 0 auto;
    width: auto;
  }
  .rq-meta dd {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
  }

  /* ---- talent-pool cards: two columns become one stack ---- */
  .cand-card {
    min-height: 0;
    overflow: visible;
  }
  .cand-card .cc-face {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
  }
  .cand-card .cc-uni {
    grid-column: 1 / -1;
    text-align: left;
  }
  .cand-card .cc-headline,
  .cand-card .cc-uni-name,
  .cand-card .cc-uni-major {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
  }
  .cand-card .cc-foot {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  /* ---- chrome: never hide content behind nav / FAB ---- */
  .content,
  .content.has-dock {
    padding-bottom: calc(var(--ats-nav-h) + env(safe-area-inset-bottom, 0px) + var(--ats-fab-size) + 24px);
  }
  .mobile-nav {
    height: calc(var(--ats-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-nav button {
    min-height: 44px;
    min-width: 0;
  }
  .anyhelp-fab {
    right: var(--ats-fab-gutter);
    bottom: calc(var(--ats-nav-h) + env(safe-area-inset-bottom, 0px) + var(--ats-fab-gutter));
    min-height: var(--ats-fab-size);
    padding: 6px;
  }
  .anyhelp-fab:hover,
  .anyhelp-fab:focus-visible {
    padding: 6px;
    gap: 0;
  }
  .anyhelp-dock {
    bottom: calc(var(--ats-nav-h) + env(safe-area-inset-bottom, 0px) + 8px);
  }
  .more-sheet {
    inset: auto 8px calc(var(--ats-nav-h) + env(safe-area-inset-bottom, 0px) + 8px) 8px;
  }

  /* ---- headers / toolbars: stack, do not cram ---- */
  /* Row + wrap, not column: the Talent Pool composition rule below (`.tp-page
     > .page-head`) already explains why — claude-system.css's
     `.page-head-main { flex: 1 1 320px }` is a ROW basis, and flipping this
     container to a column turns that same declaration into a 320px basis on
     HEIGHT, reserving 320px of empty page under a ~60px title block. Wrapping
     a row gets the same stacked look without redefining what the basis means. */
  .page-head,
  .dash-head {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
  }
  .page-head-main {
    flex: 1 1 100%;
  }
  .page-head-actions,
  .dash-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Content width, never stretched (R17): a zoomed desktop page reaches this
     block too, and a row of buttons each widened to fill it read as a grid of
     bars. The row wraps instead. */
  .page-head-actions > .btn,
  .page-head-actions > .view-toggle {
    flex: 0 0 auto;
  }
  .view-toggle {
    display: inline-flex;
    flex-wrap: wrap;
  }
  .view-toggle-btn {
    min-height: 44px;
    flex: 1 1 auto;
  }
  .filter-toolbar {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .toolbar-search {
    flex: 1 1 100%;
    min-width: 0;
  }
  .toolbar-count {
    width: 100%;
  }
  .topbar {
    height: auto;
    min-height: 52px;
    padding: 6px 10px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    flex-wrap: nowrap;
    gap: 8px;
  }
  .gsearch {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
  }
  .icon-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 auto;
  }

  /* ---- other operational surfaces ---- */
  .form-grid,
  .detail-grid,
  .roles-grid,
  .roles-layout,
  .email-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .action-item {
    grid-template-columns: 8px minmax(0, 1fr);
  }
  .action-item .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .role-row {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Phone: avatar and identity share the first row, the actions take a full
     row beneath. As a single flex row the identity column was squeezed to a
     sliver between the avatar and the (non-shrinking) buttons, wrapping the
     name letter by letter and stacking every chip. */
  .profile-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 14px;
  }
  .profile-header > :last-child {
    grid-column: 1 / -1;
  }
  .profile-header > :last-child .btn {
    flex: 0 0 auto;
  }
  .profile-header .ph-name,
  .profile-header .ph-headline {
    overflow-wrap: anywhere;
  }
  /* A card title never wraps under its own subtitle: on a phone the subtitle
     drops to its own line. */
  .card-head {
    flex-wrap: wrap;
    gap: 2px 12px;
  }
  .card-head > .dash-headnote {
    flex-basis: 100%;
  }
  .tabbar,
  .profile-tabs,
  .seg-tabs,
  .control-tabs {
    max-width: 100%;
  }
}


/* =============================================================================
   TALENT POOL COMPOSITION
   The Ask bar is unique to Talent Pool, so `.page-head:has(+ .ask-bar)` scopes
   these rules without a page rewrite. `.tp-page` / `.tp-actions` apply when the
   matching markup is present. Control height comes from --cl-ctl-lg; only the
   compact 32px variants are scoped here.
   Mobile 44px floor is preserved below 640px.
   ========================================================================== */
/* Give the actions their own full-width row WITHOUT changing the flex
   direction. Turning this container into a column looks equivalent and is not:
   claude-system.css sets `.page-head-main { flex: 1 1 320px }` as a deliberate
   ROW basis, so that the title block claims a full line once the actions wrap.
   In a column the same declaration becomes a 320px BASIS ON HEIGHT, and the
   title block — about 60px of real content — reserved 320px of empty page
   between the heading and the toolbar. Wrapping a row achieves the intended
   stacking and leaves that basis meaning what it was written to mean. */
.page-head:has(+ .ask-bar),
.tp-page > .page-head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 8px;
}
.page-head:has(+ .ask-bar) > .page-head-main,
.tp-page > .page-head > .page-head-main {
  flex: 1 1 100%;
}
.page-head:has(+ .ask-bar) .page-head-actions,
.tp-page .page-head-actions {
  padding-top: 16px;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.page-head:has(+ .ask-bar) .view-toggle {
  margin-right: 8px; /* 8px gap + 8px = 16px between groups (claude-system.css 18c, R-b) */
}
.tp-page .tp-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* R17 — ONE BUTTON SPEC. The head row is one primary (Parse CV) and equal
   secondaries, every one of them the product's own .btn box from
   claude-system.css (40px, padding from tokens), sized by its label and never
   stretched: `flex: 0 0 auto` at every width, so a zoomed page wraps the row
   instead of widening its buttons. This block used to redeclare the button
   height, padding and a 32px compact size for this page alone, and pulled the
   Bulk Upload hint out of its box with `display: contents`; both are gone. */
.page-head:has(+ .ask-bar) .page-head-actions > .btn,
.tp-page .tp-actions .btn {
  flex: 0 0 auto;
  width: auto;
}
/* The view switch sits in the same row, so its outer box is the button height:
   3px track + 34px segment + 3px track = 40px. */
.page-head:has(+ .ask-bar) .view-toggle-btn,
.tp-page .view-toggle-btn {
  min-height: 34px;
}
/* The Ask bar is a secondary, borderless row: an input with no box of its
   own, over a hairline, and a secondary Ask button. It no longer stacks a
   second bordered rectangle between the head and the filter row. */
.page-head:has(+ .ask-bar) + .ask-bar,
.tp-page .ask-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 8px;
  margin-bottom: 12px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.page-head:has(+ .ask-bar) + .ask-bar .ask-input,
.tp-page .ask-input {
  flex: 1 1 auto;
  min-width: 0;
  /* Takes the control token like every other field. It was pinned to 36px at
     every width from 641 up, which left it a different height from the filter
     row directly beneath it. The min-width release above is the part that
     matters here and is unchanged. */
  min-height: var(--cl-ctl-lg);
  height: auto;
}
.ask-bar ~ div > .toolbar:not(.filter-toolbar):not(.ask-bar),
.tp-page .tp-filters {
  display: grid;
  grid-template-columns: minmax(160px, 1.3fr) minmax(110px, .7fr) minmax(110px, .7fr) minmax(160px, 1.2fr) minmax(140px, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.ask-bar ~ div > .toolbar:not(.filter-toolbar) input,
.ask-bar ~ div > .toolbar:not(.filter-toolbar) select,
.tp-page .tp-filters input,
.tp-page .tp-filters select {
  width: 100%;
  min-width: 0;
  /* No height here. It used to say 36px; it was already inert (clamped by
     min-height on the control) but it is exactly the kind of viewport-adjacent
     height pin that becomes a seam the moment a clamp is relaxed. */
}
.ask-bar ~ div > .toolbar:not(.filter-toolbar) .spacer,
.tp-page .tp-filters .spacer { display: none; }
.ask-bar ~ div > .toolbar:not(.filter-toolbar) .count-pill,
.tp-page .tp-filters .count-pill {
  justify-self: end;
}
.ask-bar ~ div > .notice-info,
.tp-unlinked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 16px;
}
.ask-bar ~ div > .notice-info .btn,
.tp-unlinked .btn {
  flex: 0 0 auto;
}
@media (max-width: 1024px) {
  .ask-bar ~ div > .toolbar:not(.filter-toolbar),
  .tp-page .tp-filters {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr);
  }
  .ask-bar ~ div > .toolbar:not(.filter-toolbar) .count-pill,
  .tp-page .tp-filters .count-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
@media (max-width: 640px) {
  .tp-page .tp-actions,
  .page-head:has(+ .ask-bar) .page-head-actions {
    width: 100%;
  }
  /* No stretch here either: the 44px touch floor comes from claude-system.css
     for every button, and the width stays the label's. */
  .page-head:has(+ .ask-bar) + .ask-bar,
  .tp-page .ask-bar {
    flex-wrap: wrap;
  }
  .page-head:has(+ .ask-bar) + .ask-bar .ask-input,
  .tp-page .ask-input {
    flex: 1 1 100%;
    min-height: 44px;
    height: 44px;
  }
  .ask-bar ~ div > .toolbar:not(.filter-toolbar),
  .tp-page .tp-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================================
   LAPTOP RANGE — 1024px to 1440px
   The control metrics are sized for a large screen: buttons, inputs and selects
   render 40px tall at every desktop width. On a 1366 or 1280 laptop at 100%
   zoom the content column is only ~1000-950px wide, so a toolbar of 40px
   controls runs out of room and wraps into ragged rows. Zooming out looked
   "fixed" only because it bought back CSS pixels.
   This block steps the same controls down to the two sizes the system allows —
   control height at all any more — and lets toolbars wrap on their own terms. It
   does not touch >1440px, and the <=1024px mobile floor blocks are untouched.
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1440px) {
  /* The control-height overrides that used to live here are gone, and the
     reason is worth keeping. They set .btn / .toolbar input to 36px and
     .icon-btn to 32x32 across 1024-1440 only, which put a step at BOTH edges
     of the band, not one:

         1441 -> 40px      1440 -> 36px
         1024 -> 36px      1023 -> 40px

     Controls were therefore SMALLEST in the middle of the range and grew
     towards both ends: a tablet at 1023px got larger controls than a laptop at
     1280px. That is not a density gradient, it is a bump, and it inverts the
     one rule the rest of the system follows — a control never shrinks as the
     viewport does, because the floor it is walking towards is the 44px touch
     target at 640px.

     Heights are now monotonic and come from one token: 40px (--cl-ctl-lg) from
     641px up, 44px below. No seam at 1023/1024, none at 1440/1441.

     What stays is everything below, which is genuinely about this width and
     causes no size jump: the toolbar wraps, gets real gaps, lets every child
     shrink, and swaps rigid tracks for fluid ones. Wrapping is content-driven
     and graceful — it changes where things sit, never how big they are. */

  /* Wrapping is the intended behaviour at this width; give it real gaps and
     let every child shrink, so a long label narrows its own control instead of
     pushing a neighbour onto a line of its own. */
  .toolbar, .filter-toolbar, .page-head-actions {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .toolbar > *, .filter-toolbar > *, .page-head-actions > * { min-width: 0; }
  .toolbar-search, .filter-toolbar .toolbar-search { flex: 1 1 220px; min-width: 0; }

  /* Six rigid tracks need 720px before gaps, which is more than the content
     column has at the bottom of this range. Fluid tracks fill whatever is
     there and reflow to fewer per row instead of overflowing. */
  .ask-bar ~ div > .toolbar:not(.filter-toolbar),
  .tp-page .tp-filters {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.login-phone-mark { display: none; }

/* ---- sign-in on a phone ------------------------------------------------
   The sign-in artwork (/bgats.png, 2821x1366) is a wide landscape picture with
   the logo and a "© All Rights Reserved" line painted into it. Cropped to a
   portrait phone it showed a sliver of the logo at the right edge and a
   copyright line cut off mid-word — the first screen every user sees. Below
   the breakpoint where the brand column is already dropped (860px, styles.css),
   the page is the plain brand dark behind the card instead. The sign-in page is
   outside the app shell, so this can't live in the .shell-phone stylesheet. */
@media (max-width: 860px) {
  .login-wrap {
    background-image: none;
    background-color: #1A1A1A;
  }
  .login-form-side {
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }
  .login-form-side > .login-card { width: 100%; }
  .login-phone-mark { display: block; }
}
/* Talent Pool keeps the same eight columns at every viewport. */
.card.flush > .talent-table-wrap { overflow-x: auto; max-width: 100%; }
.card.flush > .table-wrap > table.talent-pool-table.candidates-table { table-layout: fixed; min-width: 1080px; width: 100%; }
.talent-pool-table > thead > tr > th[data-col="name"] { width: 22%; }
.talent-pool-table > thead > tr > th[data-col="position"] { width: 14%; }
.talent-pool-table > thead > tr > th[data-col="university"] { width: 14%; }
.talent-pool-table > thead > tr > th[data-col="graduation"] { width: 7%; }
.talent-pool-table > thead > tr > th[data-col="location"] { width: 10%; }
.talent-pool-table > thead > tr > th[data-col="apply-date"] { width: 11%; }
.talent-pool-table > thead > tr > th[data-col="ranking"] { width: 10%; }
.talent-pool-table > thead > tr > th[data-col="request"] { width: 12%; }
table.talent-pool-table > tbody > tr > td,
table.talent-pool-table > thead > tr > th {
  padding: 12px 8px; vertical-align: middle; text-align: left;
  white-space: normal; overflow-wrap: anywhere; overflow: visible;
}
.talent-pool-table td[data-label="Location"] { display: table-cell; white-space: normal; overflow: visible; text-overflow: clip; }
.pool-candidate, .pool-candidate-heading { display: flex; align-items: center; gap: 8px; }
.pool-candidate > div { min-width: 0; }
.pool-candidate-heading button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.pool-request-link { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 4px 0; border: 0; background: transparent; color: var(--action-success); font: inherit; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.pool-request-link + .pool-request-link { margin-top: 8px; }
.pool-status { display: inline-block; max-width: 100%; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; line-height: 1.4; font-weight: 600; }
.pool-status-new { color: var(--green-700); background: var(--green-50); border-color: var(--green-border); }
.pool-status-considered { color: var(--warning-ink); background: var(--warning-tint); border-color: #F3D48A; }
.pool-status-shortlisted { color: #1D4ED8; background: #EFF6FF; border-color: #C7DBFB; }
.pool-status-blacklisted { color: #B42318; background: #FEF3F2; border-color: #FECDCA; }
.pool-status-unknown { color: var(--muted); background: var(--surface); }
.pool-status-guide { display: flex; justify-content: flex-end; margin: 8px 0; }
.pool-status-desktop { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pool-status-mobile { display: none; }
@media (max-width: 640px) {
  .pool-status-desktop { display: none; }
  .pool-status-mobile { display: block; }
  .pool-status-mobile summary { cursor: pointer; font-size: 12px; }
  .pool-status-mobile > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .card.flush > .table-wrap.talent-table-wrap { overflow-x: auto; }
}
.talent-pool-table .datecell { white-space: normal; }
.pool-cv-actions { display: flex; gap: 4px; margin-top: 4px; }

/* Talent Pool table polish (2026-10-14): ONLY this eight-column table.
   Header/cell alignment is stable regardless of candidate content; the entire
   table scrolls at phone widths instead of clipping actions or dropping fields. */
.talent-table-wrap { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.table-wrap > table.talent-pool-table.candidates-table {
  border-collapse: separate;
  border-spacing: 0;
}
table.talent-pool-table > thead > tr > th,
table.talent-pool-table > tbody > tr > td {
  box-sizing: border-box;
  padding: 12px 8px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.4;
  min-width: 0;
}
table.talent-pool-table > thead > tr > th { white-space: normal; }
.talent-pool-table .sort-th-inner,
.talent-pool-table .pool-candidate-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
}
.talent-pool-table .sort-th-inner .sort-label {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.talent-pool-table .sort-th .sort-caret { flex: 0 0 16px; margin-left: 0; }
.talent-pool-table .pool-candidate .cell-strong {
  display: block;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.talent-pool-table .pool-candidate .pool-status { margin: 4px 0; }
.talent-pool-table .pool-candidate .cell-sub { overflow-wrap: anywhere; }
.talent-pool-table td[data-label="Apply Date"] .datecell { white-space: nowrap; }
.talent-pool-table td[data-label="Request"] .pool-request-link {
  max-width: 100%;
  min-height: 30px;
  gap: 4px;
  padding: 4px 0;
  line-height: 1.35;
}
.talent-pool-table .pool-cv-actions .icon-btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  /* Override generic stacked-table behaviour ONLY for Talent Pool. */
  .card.flush > .table-wrap.talent-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: thin;
  }
  .card.flush > .table-wrap > table.talent-pool-table.candidates-table {
    table-layout: fixed;
    min-width: 1080px;
    width: 1080px;
  }
}

/* Talent Pool table — calm, level rows (2026-10-15, owner direction).
   - No separate status badge: the candidate's NAME is the tinted pill; the
     legend above the table explains each tint once.
   - Every row is the same height: two fixed lines in the candidate and request
     cells, one line everywhere else, overflow ends in "…" with the full text on
     hover (title). Carbon's "tall" density: 64px for two-line rows. */
table.talent-pool-table.candidates-table > tbody > tr > td {
  height: 64px; padding-top: 0; padding-bottom: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
}
table.talent-pool-table.candidates-table > thead > tr > th {
  height: 44px; padding-top: 0; padding-bottom: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.talent-pool-table.candidates-table .datecell { white-space: nowrap; }
.talent-pool-table .pool-candidate {
  /* The ONLY layout rule for the table's candidate cell. Three grid tracks:
     selection | identity (shrinks, ends in "…") | CV actions (fixed width).
     A grid rather than flex so no broader rule can let the action track
     shrink — a `> div { flex: 1 1 auto }` rule did, clipping Download by 10px
     on phones — and so the icons sit at the same x on every row. */
  display: grid; align-items: center; column-gap: 12px; min-width: 0;
  /* 36 = selection hit area; 92 = two 44px touch icon buttons + 4px gap, reserved
     on every row (desktop 40px buttons fit inside it, right-aligned). */
  grid-template-columns: 36px minmax(0, 1fr) 92px;
}
.talent-pool-table .pool-id { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.talent-pool-table .pool-id .cell-sub {
  display: block; max-width: 100%; font-size: 12px; line-height: 16px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.talent-pool-table .pool-id-actions { display: flex; justify-content: flex-end; }
.talent-pool-table .pool-id-actions .pool-cv-actions { margin-top: 0; gap: 4px; }

.pool-name {
  display: inline-flex; align-items: center; max-width: 100%; height: 24px; padding: 0 12px;
  border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 24px; white-space: nowrap;
}
.pool-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-name-new         { color: var(--green-700); background: var(--green-50); }
.pool-name-considered  { color: #92400E; background: var(--warning-tint); }
.pool-name-shortlisted { color: #1D4ED8; background: #EFF6FF; }
.pool-name-blacklisted { color: #B42318; background: #FEF3F2; }
.pool-name-unknown     { color: var(--text-strong, #1F2937); background: #F2F4F7; }

.talent-pool-table td[data-label="Request"] .pool-request-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 0; padding: 0; max-width: 100%; white-space: nowrap;
}
.talent-pool-table .pool-req-code,
.talent-pool-table .pool-req-title { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talent-pool-table .pool-req-code { font-weight: 600; line-height: 18px; }
.talent-pool-table .pool-req-title { font-size: 12px; line-height: 16px; color: var(--muted); }

/* Legend: same pills as the names, quieter. */
.pool-status-guide { align-items: center; gap: 12px; margin: 4px 0 12px; }
.pool-status-caption { font-size: 12px; color: var(--muted); }
.pool-status-desktop { gap: 8px; }
.pool-status-guide .pool-name { height: 22px; line-height: 22px; padding: 0 8px; font-size: 12px; font-weight: 500; }
@media (max-width: 640px) { .pool-status-desktop-caption { display: none; } }

/* Notification Settings: every event row two lines high (2026-10-15). */
.notif-desc { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-desc .notif-ext { color: #92400E; font-weight: 600; }
/* Assessment Settings: section and field rows share one height (2026-10-15). */
.assess-pol-table tbody th, .assess-pol-table tbody td { height: 40px; box-sizing: border-box; }
/* KPI cards: a label that wraps no longer pushes its hint below its
   neighbours'. Two label lines are reserved on desktop (2026-10-15). */
@media (min-width: 900px) {
  .dash-kpi .dash-kpi-label { line-height: 1.3; min-height: 2.6em; }
}
/* The Candidate header is a button; buttons reset case and tracking. Match the
   other column headers exactly (2026-10-15). */
.talent-pool-table .pool-candidate-heading button { text-transform: inherit; letter-spacing: inherit; font-weight: inherit; }
/* Pipeline card menu at page level (2026-10-15): never cropped by the board. */
.pipeline-menu.pipeline-menu-floating { z-index: 1200; overflow-y: auto; overscroll-behavior: contain; }
.scroll-anchor { scroll-margin-top: 72px; }