/* module-portal-gaps.css — CDS-total-rollout gap closures (MMDB-1688 slice).
   Every rule here backs a class a component already renders but that had no
   matching rule anywhere in the Central Design System (repo-wide "defined
   nowhere" audit). Zero inline styles, zero new hex colours — every colour
   is var() of an existing token already declared elsewhere in
   public/_design-system/. */

/* --- StatusTab.tsx (HR master data, employee file) ----------------------
   .emp-status-tab wraps the readonly employment-status block and the
   Disable/Retire action row. The sibling tab panel .emp-ingest
   (portal-core.css) uses the same flex-column + gap pattern to separate
   stacked sections — mirrored here so the actions row doesn't sit flush
   against the last readonly row. */
.emp-status-tab {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- JmlProcessFlowCanvas.tsx (IT JML process-owner review atlas) -------
   .ds-process-modal-main (components.css) owns the scrollable second grid
   column of .ds-process-modal-body; jml-screen-pane is the inner stack of
   that column's real screen captures / BLOCKED cards and needs its own
   flex + gap so multiple screens don't collide. jml-screen-figure resets
   the UA <figure> default margin (1em 40px) that otherwise indents every
   captured screenshot. */
.jml-screen-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.jml-screen-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- ProcEa2Renderer.tsx (Procurement EA2 line-items table) -------------
   .ds-pf-lines (components.css) is not in the global "banded (zebra)
   tables" selector list (portal-core.css) that every other DS table class
   gets automatically, so the component compensates with its own
   .ds-table-banded modifier — this is the rule that was never written for
   it. Matches the same var(--paper-2) band + hover every other banded
   table in the system uses. */
.ds-table-banded tbody tr:nth-child(even) > td {
  background: var(--paper-2);
}
.ds-table-banded tbody tr:hover > td {
  background: color-mix(in srgb, var(--paper-2) 72%, var(--ink) 9%);
}

/* --- HubDesktop.tsx (Procurement2 hub launcher) --------------------------
   gsp-hub-swatch is the "section's Letterpress accent swatch" the file's
   own header comment describes — a small colour chip keyed off the
   data-plp-section attribute already set on the row's <td> (see
   windowTypes.tsx sectionForType). Colours reuse the --plp-* section-accent
   tokens already declared in letterpress-procurement.css under .plp
   (ProcDesktop.tsx renders the procurement2 desktop root with the .plp
   scope class, so these tokens are in scope here); "commercial" maps to
   --plp-agreements and "master data" maps to --plp-reference, the closest
   existing tokens for those two section keys. */
.gsp-hub-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: var(--ds-radius-sm);
  background: var(--plp-ink-mute, var(--ink-mute));
  vertical-align: middle;
}
[data-plp-section="purchasing"] .gsp-hub-swatch { background: var(--plp-purchasing); }
[data-plp-section="demand"] .gsp-hub-swatch { background: var(--plp-demand); }
[data-plp-section="sourcing"] .gsp-hub-swatch { background: var(--plp-sourcing); }
[data-plp-section="suppliers"] .gsp-hub-swatch { background: var(--plp-suppliers); }
[data-plp-section="commercial"] .gsp-hub-swatch { background: var(--plp-agreements); }
[data-plp-section="master data"] .gsp-hub-swatch { background: var(--plp-reference); }