/* ==========================================================================
   pages.css — layout that belongs to one page and is not reused elsewhere.

   If a rule here would be useful to a second page, it belongs in
   components.css instead.

   Built so far: the login screens, the employee module's pages, the dashboard.

   The officer app's own pieces live in components.css (the verdict card, the
   result list, the lockout) and layout.css (the phone frame) — only its
   sign-in card is here, because only that is unique to one page.

   Still to come:
     - Equipment list / detail / form / rejection pages
     - Settings page tabs (Users, Lists, Thresholds, Data)
     - Export page

   The first-time-setup and cannot-reach-server screens are deliberately NOT
   here — they carry their own styles inside js/main.js so they still render on
   a device where a stylesheet failed to load.
   ========================================================================== */

/* ---------- Auth screens (login + change password) ----------
   Both are the same centered card on an empty page, so they share the
   .login-wrap / .login-card shell rather than duplicating it. */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  background: var(--card);
  padding: 34px;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  width: 400px;
  max-width: 92vw;
}
.login-card .mark {
  color: var(--primary);
  font-weight: 800;
  font-size: 26px;
  text-align: center;
  letter-spacing: 1px;
}
/* The login screen puts the app icon here instead of the wordmark. Sized in CSS
   as well as on the tag so the layout does not jump before the PNG loads, and
   height:auto so a future non-square source is not squashed. */
.login-card .mark img {
  display: block;
  margin-inline: auto;
  width: 72px;
  height: auto;
}
.login-card h1 { margin: 6px 0 4px; font-size: 18px; text-align: center; }
.login-card .sub {
  color: var(--text2);
  font-size: 12.5px;
  text-align: center;
  margin-block-end: 22px;
}

.lang-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-block-end: 18px;
}

/* Secondary action under the primary button — the sign-out escape hatch on the
   change-password screen. */
.auth-footer {
  display: flex;
  justify-content: center;
  margin-block-start: 16px;
}

/* One-shot banner after an involuntary logout (session expired / superseded). */
/* The copyright line under the sign-in button. `--muted` rather than `--text2`
   because it is a footer, not content — legible, and the last thing the eye
   reaches. */
.login-legal {
  margin-block-start: 20px;
  color: var(--muted);
  font-size: 11.5px;
  text-align: center;
}

.login-notice {
  background: var(--warn-bg);
  color: var(--warn-dark);
  border-radius: var(--radius-control);
  padding: 9px 12px;
  font-size: 12.5px;
  text-align: center;
  margin-block-end: 16px;
}

/* ---------- Dashboard (Section 5.5) ----------
   One block per module, stacked: KPI row, then charts. The grids below are the
   only page-specific layout; the cards inside them are plain .card. */
.dash-section { margin-block-end: 26px; }
.dash-section:last-child { margin-block-end: 0; }

/* KPI row — four cards, equal width. */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-block-end: 16px;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.kpi .n { font-size: 32px; font-weight: 800; line-height: 1.1; }
.kpi .l { color: var(--text2); font-size: 12.5px; margin-block-start: 2px; }

/* The employee KPI row mixes units on purpose (Section 5.5), so most cards
   carry a note saying what they actually count. */
.kpi-note {
  color: var(--muted);
  font-size: 11px;
  margin-block-start: 6px;
}

.kpi-split {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-block-start: 8px;
  font-size: 11.5px;
  color: var(--text2);
}

.kpi.blue  .n { color: var(--primary); }
.kpi.red   .n { color: var(--danger); }
.kpi.amber .n { color: var(--warning); }
.kpi.green .n { color: var(--success); }

/* Chart rows. The column count is in the class because it is a property of the
   row's contents, not of the module — a future module asking for three charts
   reuses .chart-row-3 rather than adding a rule. */
.chart-row {
  display: grid;
  gap: 16px;
  margin-block-end: 16px;
}
.chart-row:last-child { margin-block-end: 0; }
.chart-row-1 { grid-template-columns: 1fr; }
.chart-row-2 { grid-template-columns: 1fr 1fr; }
.chart-row-3 { grid-template-columns: repeat(3, 1fr); }

/* What a chart card shows instead of a chart: loading, an error, or nothing
   to plot. */
.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
}
.chart-empty-hint { font-size: 11.5px; line-height: 1.5; max-inline-size: 34ch; }

/* ---------- Bar charts ----------
   Divs, not SVG, so they flip in Arabic — see the header of
   js/components/charts.js. */
.bar-row { margin-block-end: 10px; }
.bar-row:last-child { margin-block-end: 0; }

.bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  margin-block-end: 4px;
}
.bar-label {
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-value { font-weight: 700; color: var(--text); }

.bar-track {
  block-size: 8px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  block-size: 100%;
  border-radius: 999px;
  transition: inline-size 0.2s ease;
}

/* A divided bar: the stack is the whole fill, the segments share it out.
   No radius on the segments — only the stack is rounded, so a two-colour bar
   still reads as one pill rather than two beads. */
.bar-stack {
  display: flex;
  block-size: 100%;
  border-radius: 999px;
  overflow: hidden;
  transition: inline-size 0.2s ease;
}
.bar-seg {
  block-size: 100%;
  min-inline-size: 2px;
}

/* The legend above a stacked bar chart. Horizontal because it labels colours
   rather than reporting values — the numbers are on the bars. */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-block-end: 14px;
  font-size: 12px;
}

/* ---------- Donut ---------- */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  min-block-size: 120px;
}
.donut { inline-size: 120px; block-size: 120px; flex: none; }
.donut-total { font-size: 19px; font-weight: 800; fill: var(--text); }
.donut-caption { font-size: 10px; fill: var(--text2); }

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  min-inline-size: 0;
}
.legend-row { display: flex; align-items: center; gap: 8px; }
.legend-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 3px;
  flex: none;
}
.legend-label { color: var(--text2); }
.legend-value { color: var(--text); }

/* ---------- RDT coverage card ---------- */
.rdt-coverage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 120px;
}
.rdt-headline {
  font-size: 34px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}
.target-bar { margin-block-start: 10px; }
.target-caption {
  font-size: 12px;
  color: var(--text2);
  margin-block-start: 6px;
}
.rdt-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-block-start: 8px;
}

/* ==========================================================================
   RDT page (#/rdt) and its log (#/rdt/history)
   ========================================================================== */

.employee-rdt .card + .card { margin-block-start: 16px; }

/* ---------- Yearly progress hero ---------- */
.rdt-hero-cols {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}
.rdt-big {
  font-size: 40px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.05;
}
.rdt-big span {
  font-size: 24px;
  font-weight: 700;
  color: var(--muted);
}
.rdt-sub {
  font-size: 13px;
  color: var(--text2);
  margin-block-start: 4px;
}
.rdt-phase { margin-block-start: 10px; }

.rdt-facts {
  min-inline-size: 220px;
  font-size: 13px;
}
.rdt-facts-title {
  font-weight: 700;
  color: var(--text);
  margin-block-end: 8px;
}
.rdt-fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 3px;
  color: var(--text2);
}
.rdt-fact b { color: var(--text); }

/* The bar is scaled to the yearly target, with a tick where the first round
   ends. Both live in the same stacking context so the tick can be positioned
   against the track rather than the fill. */
.rdt-progress { margin-block-start: 20px; }
.rdt-bar-track {
  position: relative;
  block-size: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: visible;
}
.rdt-bar-fill {
  block-size: 100%;
  border-radius: 999px;
  background: var(--primary);
  transition: inline-size 0.3s ease;
}
.rdt-bar-marker {
  position: absolute;
  inset-block: -3px;
  inline-size: 2px;
  background: var(--text2);
  opacity: 0.55;
}
.rdt-bar-legend {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
  margin-block-start: 6px;
}

/* ---------- Card heads and feet ---------- */
.rdt-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-block-end: 14px;
}
.rdt-card-head h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.rdt-card-sub {
  font-size: 12.5px;
  color: var(--text2);
  margin-block-start: 4px;
}
.rdt-note {
  font-size: 12px;
  color: var(--muted);
  margin-block-start: 6px;
  max-inline-size: 70ch;
}
.rdt-card-foot {
  margin-block-start: 12px;
  display: flex;
  justify-content: flex-end;
}

/* ---------- Import preview (inside the import dialog) ---------- */
.rdt-import-summary {
  margin-block-start: 14px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rdt-import-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
}

/* ---------- This month ---------- */
.rdt-empty {
  padding-block: 28px;
  text-align: center;
}
.rdt-empty p {
  color: var(--text2);
  margin-block-end: 14px;
}
.rdt-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---------- Recent activity ---------- */
.rdt-recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 9px;
  border-block-end: 1px solid var(--border);
  font-size: 13px;
}
.rdt-recent-row:last-of-type { border-block-end: none; }
.rdt-recent-when {
  color: var(--muted);
  min-inline-size: 100px;
  flex: none;
}
.rdt-recent-who {
  flex: 1;
  color: var(--text);
  font-weight: 600;
}

/* ---------- Onboarding ---------- */
.rdt-onboard {
  text-align: center;
  padding-block: 40px;
}
.rdt-onboard-icon {
  font-size: 40px;
  color: var(--primary);
  margin-block-end: 12px;
}
.rdt-onboard h3 {
  font-size: 17px;
  font-weight: 700;
  margin-block-end: 10px;
}
.rdt-onboard p {
  color: var(--text2);
  max-inline-size: 62ch;
  margin-inline: auto;
  margin-block-end: 20px;
  line-height: 1.55;
}
.rdt-onboard .rdt-note { margin-inline: auto; }

/* ---------- The log ---------- */
.rdt-notes-cell {
  max-inline-size: 280px;
  color: var(--text2);
  font-size: 12.5px;
}

/* A name that navigates but is not styled as a link until hovered — the same
   affordance the clickable table rows elsewhere use. */
.link-plain {
  color: inherit;
  cursor: pointer;
}
.link-plain:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ---------- Recently updated ---------- */
.recent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 9px;
  border-block-end: 1px solid var(--border);
  cursor: pointer;
}
.recent-row:last-child { border-block-end: none; }
.recent-row:hover { background: var(--surface-sunken); }
.recent-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.recent-main { flex: 1; min-inline-size: 0; font-size: 12.5px; }
.recent-when { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ---------- Settings (Sections 3.3, 3.4, 3.7) ----------
   Four tabs sharing one page. The tab strip and the switch are components; what
   is here is the layout each tab body needs. */
.tab-intro {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text2);
  max-inline-size: 80ch;
}

/* Two cards side by side. The Data tab's own row — deliberately not .chart-row,
   which belongs to the dashboard and would couple the two pages' layouts. */
.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-block-end: 16px;
  align-items: start;
}
.settings-row:last-child { margin-block-end: 0; }

/* Lists tab — one panel per FieldOptions list. */
.list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.list-head h3 { margin: 0; }
.list-rows { margin-block: 12px; }
.list-row {
  display: grid;
  grid-template-columns: 1fr 76px auto auto;
  align-items: center;
  gap: 8px;
  padding-block: 5px;
}
.list-row input[type="text"],
.list-row input[type="number"] {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  min-inline-size: 0;
}
.list-row input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.list-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--border);
}

/* Thresholds tab. */
.threshold-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-block-end: 16px;
}

/* Data tab — the health readout. The import panel is just a file field; the
   review that follows it happens in a modal. */
.health-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  overflow: hidden;
  margin-block-end: 14px;
}
.health-row {
  display: grid;
  grid-template-columns: 1fr 80px 130px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
  border-block-end: 1px solid var(--border);
}
.health-row:last-child { border-block-end: none; }
.health-head {
  background: var(--surface-sunken);
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.health-count { font-weight: 700; }

.health-counters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-block-end: 12px;
}

/* ---------- Export page ----------
   The three format cards, ported from OHS-DB. A card is a button, so being
   over the cap disables it the way any other unavailable control is disabled. */
.export-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ex-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  text-align: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ex-card:hover:not(:disabled) {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.ex-card:disabled { cursor: not-allowed; opacity: .65; }

.ex-icon {
  font-size: 24px;
  line-height: 1;
  color: var(--primary);
  flex: none;
}
.ex-body { min-inline-size: 0; }
.ex-name { font-weight: 700; font-size: 14px; color: var(--text); }
.ex-desc {
  font-size: 12px;
  color: var(--text2);
  margin-block-start: 3px;
  line-height: 1.5;
}
.ex-warn { font-size: 11.5px; color: var(--danger); margin-block-start: 6px; }
.ex-note { font-size: 11.5px; color: var(--primary); margin-block-start: 6px; }

.export-note {
  margin-block-start: 14px;
  font-size: 11.5px;
  color: var(--muted);
}

.filter-bar .count-error { color: var(--danger); }

/* ---------- Import review modal ----------
   A wide modal holding a scrollable table: one row per spreadsheet line, each
   with its own action. The table scrolls inside the modal rather than growing
   it, so the summary and the buttons stay reachable on a thousand-row file. */
.import-warnings ul {
  margin: 6px 0 0;
  padding-inline-start: 18px;
  line-height: 1.6;
}

.import-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-block: 14px 10px;
}
.import-summary { font-size: 12.5px; font-weight: 600; color: var(--text2); }
.import-bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.import-table-wrap {
  max-block-size: 48vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}
.import-table-wrap .tbl { border: none; border-radius: 0; }
.import-table-wrap thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}
.import-table-wrap select { min-inline-size: 110px; }

/* ---------- Employee form ----------
   The certificate editor is the only part of the form with a shape of its own:
   one bordered panel per certificate, each holding an expiry date and a Drive
   link. Everything else reuses .detail-grid and .field from components.css. */
.cert-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cert-edit {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 12px;
  background: var(--surface-sunken);
}
.cert-edit-title { font-weight: 600; font-size: 13px; margin-block-end: 8px; }
/* The link field is always the last one in the panel; the flags block below it
   brings its own leading space. Keyed off adjacency rather than :last-child,
   which stopped matching when the flags block became the final element. */
.cert-edit .field + .field { margin-block-end: 0; }

/* The two per-certificate flags (Section 6.1), stacked under the date and the
   link. A hairline separates them from the fields they override, so the panel
   reads as "here is the record, and here is what overrides it". */
.cert-edit-flags {
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cert-edit-flags .check { font-size: 12px; }

/* A ticked flag tints its whole panel. The fields dim under N/A because they
   are disabled; the flag itself stays at full strength — it is the one thing
   still saying something.

   Each flag tints with its own state's tokens, so ticking a box here previews
   the badge the row will wear once saved: slate for N/A, yellow for suspended.
   This panel used the amber --plan tokens while `suspended` was violet, because
   a violet tint read as slate's opposite rather than its sibling; now that the
   state is yellow, the borrowed pair is one shade away from the real one and
   there is nothing left for it to solve. */
.cert-edit-na { background: var(--na-bg); border-color: var(--na-bg); }
.cert-edit-na .field { opacity: 0.55; }
.cert-edit-na .cert-flag-na { color: var(--na-tx); font-weight: 600; }
.cert-edit-na .cert-flag-suspended { opacity: 0.4; cursor: not-allowed; }

.cert-edit-suspended { background: var(--suspended-bg); border-color: var(--suspended-bg); }
.cert-edit-suspended .cert-flag-suspended { color: var(--suspended-tx); font-weight: 600; }

/* ---------- Narrow desktops ----------
   The sidebar is fixed at 230px, so below roughly 1100px the three-column
   detail grid and the two-column certificate grids stop fitting. They collapse
   rather than scrolling sideways — a horizontal scrollbar on a form is worse
   than a taller form. */
@media (max-width: 1100px) {
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-list,
  .cert-edit-grid { grid-template-columns: 1fr; }

  /* Four KPIs and three charts stop fitting first. Two columns keeps the cards
     comparable side by side; one column would make the row a stack of numbers
     with no relationship. */
  .kpi-row,
  .chart-row-3 { grid-template-columns: repeat(2, 1fr); }

  .list-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .detail-grid { grid-template-columns: 1fr; }

  .kpi-row,
  .chart-row-2,
  .chart-row-3 { grid-template-columns: 1fr; }

  .settings-row,
  .threshold-grid,
  .export-cards,
  .health-counters { grid-template-columns: 1fr; }
}

/* ---------- Placeholder bodies (removed once real pages land) ----------
   .stage-placeholder fills the viewport, for screens that draw without a shell
   around them. .page-placeholder sits inside .content, under the topbar. */
.stage-placeholder {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
}

.page-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Officer sign-in card (Section 7.2) ----------
   Full-bleed navy rather than the admin's centered white card. The difference
   is the point: one URL serves two apps, and an officer opening the platform
   on a phone should know within a second which one they are in. */
.officer-login {
  padding: 34px 22px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: var(--navy-text-strong);
}
.officer-login .mark {
  color: var(--primary);
  font-weight: 800;
  font-size: 34px;
  text-align: center;
  letter-spacing: 2px;
}
.officer-login h1 { font-size: 20px; text-align: center; margin: 6px 0 4px; }
.officer-login .sub {
  color: var(--navy-text);
  font-size: 13px;
  text-align: center;
  margin-block-end: 30px;
}

/* Overrides .field from components.css: on navy, a white input would glare. */
.officer-login .field { margin-block-end: 14px; }
.officer-login .field label {
  font-size: 12.5px;
  color: var(--navy-text);
  font-weight: 600;
}
.officer-login .field input {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-mobile);
  border: 1px solid var(--navy-border);
  background: var(--navy-soft);
  color: var(--navy-text-strong);
  font-size: 15px;
}
.officer-login .field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.officer-login-notice {
  background: var(--warn-bg);
  color: var(--warn-dark);
  padding: 10px 12px;
  border-radius: var(--radius-control);
  font-size: 12.5px;
  text-align: center;
  margin-block-end: 16px;
}
.officer-login-err {
  color: var(--blocked-bg);
  font-size: 13px;
  text-align: center;
  min-height: 18px;
  margin-block: 8px;
}

.officer-login-lang {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-block-start: 22px;
}
.officer-login-lang button {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-control);
  background: var(--navy-soft);
  color: var(--navy-text);
  font-size: 13px;
}
.officer-login-lang button.active {
  background: var(--primary);
  color: var(--navy-text-strong);
}

/* ==========================================================================
   Data Quality (Section 3.10)

   The worklist itself needs no CSS: it is .filter-bar + table.tbl + .pager,
   the same three pieces every other admin list is built from. Only the
   pattern note below the table is new, and it borrows .tbl too.
   ========================================================================== */

.dq-patterns { margin-block-start: 22px; }

.dq-patterns-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-block-end: 10px;
  max-width: 70ch;
}

/* The pattern table is reference, not work — narrower and quieter than the
   worklist above it, so it cannot be mistaken for more findings. */
.dq-patterns .tbl { max-width: 460px; }

/* A person under an expanded job title. Indented and tinted so the hierarchy
   is readable without a second table nested inside the first. */
.dq-patterns .dq-subrow > td:first-child { padding-inline-start: 28px; }
.dq-patterns .dq-subrow { background: var(--bg); }

/* The open/closed marker on a job-title row. */
.dq-caret {
  display: inline-block;
  width: 14px;
  color: var(--muted);
  font-size: 11px;
}