/* ============================================================================
   workforce.css — layout utilities for the ported Jacob Workforce pages.
   Uses ONLY existing design tokens (styles.css). No new colour system.
   ========================================================================== */

.wf-fresh { color: var(--muted); font-weight: 600; }

/* KPI strip ---------------------------------------------------------------*/
.wf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.wf-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.wf-kpi-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; }
.wf-kpi-val { font-size: 26px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wf-kpi-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.wf-kpi.is-positive .wf-kpi-val { color: var(--under); }
.wf-kpi.is-risk .wf-kpi-val { color: var(--over); }

/* Filter / toolbar --------------------------------------------------------*/
.wf-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.wf-filters input, .wf-filters select {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; color: var(--ink); font: inherit;
}
.wf-filters input:focus, .wf-filters select:focus { outline: 2.5px solid var(--jacobs-2); outline-offset: 1px; }

/* Pagination --------------------------------------------------------------*/
.wf-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; color: var(--muted); font-size: 13px; }
.wf-pager button { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; color: var(--ink); cursor: pointer; font: inherit; }
.wf-pager button:disabled { opacity: .45; cursor: default; }
.wf-pager button:not(:disabled):hover { border-color: var(--jacobs-2); }

/* Heatmap (certifications) ------------------------------------------------*/
.wf-heat { border-collapse: separate; border-spacing: 2px; }
.wf-heat td.cell { width: 16px; height: 16px; border-radius: 3px; }
.wf-heat td.cell.green { background: var(--under); }
.wf-heat td.cell.yellow { background: var(--st-progress); }
.wf-heat td.cell.red { background: var(--over); }
.wf-heat td.cell.blank { background: color-mix(in srgb, var(--muted) 25%, transparent); }

/* Collapsible workforce nav sections -------------------------------------*/
.nav-sec { border: none; margin: 0; }
.nav-sec > summary { list-style: none; cursor: pointer; }
.nav-sec > summary::-webkit-details-marker { display: none; }
.nav-sec > summary.nav-group-col::after { content: '▸'; float: right; opacity: .6; transition: transform .2s; }
.nav-sec[open] > summary.nav-group-col::after { transform: rotate(90deg); }

/* Mini legend used by cert/heatmap pages ---------------------------------*/
.wf-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0; font-size: 12px; color: var(--muted); }
.wf-legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.wf-legend .sw.green { background: var(--under); } .wf-legend .sw.yellow { background: var(--st-progress); }
.wf-legend .sw.red { background: var(--over); } .wf-legend .sw.blank { background: color-mix(in srgb, var(--muted) 25%, transparent); }