/* ============================================================================
   codex-ds-app.css — bridges the Codex design system onto the shared app
   chrome (browse/form card scaffolding, X* controls) that codex-dashboard.css,
   written for the dashboard widgets, does not cover.

   Everything is prefixed `.codex-ds`; nothing here applies outside the wrapper.
   Loaded after codex-dashboard.css so it can also reclaim the declarations
   override.css marks !important — link order alone never wins against those.
   ========================================================================== */

/* ── 1. Page shell ──────────────────────────────────────────────────────────
   CodexLayout already supplies the outer inset (padding: 6rem 1rem 0 1rem) and
   the page colour: style.css --body-bg #e6ebee is the same value as
   --cdx-gray-200 / --cdx-surface-page. The wrapper must add neither, or the
   content sits in a double-inset, subtly-redrawn band.

   ── The type scale ──
   Three tokens, and every size below refers to one of them. Retuning the module is
   editing these three lines rather than hunting rem values through the file.

   They replace a scale lifted from the Sales Order page — a fluid base that resolved to
   1.5rem (24px) with 1.15rem controls. A catalog page read at arm's length can carry
   24px; an HR browse list cannot. Anything the page did not size explicitly inherited
   that base, so the two lines framing every list — "Filtered Results:" above the table
   and "Total Records" below it — rendered *larger* than the records between them, and
   the DTR edit dialog (built from `.small` rows, i.e. 0.875em of whatever it inherits)
   came out at 21px throughout.

   The values sit against the app's own: override.css gives unthemed pages 16px controls
   and cells. Page text matches that, and the dense surfaces — cells, inputs, buttons,
   menus — sit one step under it. Fixed rather than fluid, because a viewport-scaled base
   makes every derived em size move with the window too.

   codex-dashboard.css sets .codex-ds to --cdx-text-base (14px); the two-class selector
   beats it without !important. The tokens are declared on .codex-ds alone so the
   dashboard — which wraps in .codex-ds without .cdx-page and keeps its own 14px base —
   still resolves them in the shared rules below. */
.codex-ds {
    --cdx-page-text: 1rem;         /* 16px — inherited page text */
    --cdx-page-control: 0.9375rem; /* 15px — cells, inputs, buttons, menus */
    --cdx-page-caps: 0.8125rem;    /* 13px — uppercase table headers */
}

.codex-ds.cdx-page {
    padding: 0;
    background: transparent;
    font-size: var(--cdx-page-text);
}

/* There was a `cdx-page--dense` variant here that dropped operational screens — payroll,
   DTR, leave and overtime management — to 1.15rem, on the reasoning that a wide grid is
   read leaning in rather than at arm's length. It was removed: one scale across the whole
   module matters more than per-screen tuning, and two scales read as two designs. */

/* ── 2. Reclaims from override.css ──────────────────────────────────────────
   override.css forces font-size on every control and cell (lines 4-33),
   color #00273a on every cell (36-43), and strips .form-control's border and
   radius (159-165) — all !important, so codex-dashboard.css loses regardless
   of link order and its table/input rules never fire. These restate the
   theme's intent at the same weight, scoped so nothing outside .codex-ds moves.

   Cells match the controls beside them, and headers sit one step down, still uppercase
   so they read as headers rather than as data. */
.codex-ds .table th,
.codex-ds .table thead th,
.codex-ds .table th.h4 {
    font-size: var(--cdx-page-caps) !important;
    color: var(--cdx-text-muted) !important;
    font-weight: 600;
    letter-spacing: var(--cdx-tracking-caps);
    text-transform: uppercase;
    line-height: 1.3;

    /* style.css:24352 sets `white-space: nowrap` on every table header. With table-layout:
       fixed the column cannot widen to fit, so a two-word header simply ran over the one
       beside it — "DATE APPLIEDOVERTIME HOURPURPOSE" on the overtime list. Headers wrap
       onto a second line instead.

       Wrapping at spaces only: `overflow-wrap: anywhere` here let a single word break
       mid-letter, which turned a narrow Action column into "ACTIO / N". Cells still get
       `anywhere` through cdx-cell-wrap, where reducing min-content is the point. */
    white-space: normal;
    overflow-wrap: normal;
}

/* white-space is the load-bearing declaration here. style.css:24358 and codex.css:30604
   both set `.table tbody tr td { white-space: nowrap }`, which stops a cell wrapping at
   all — and overflow-wrap cannot undo it, because overflow-wrap only decides how to
   break *within* a word once wrapping is already allowed. Without this, a long address
   ran in one line straight past its column. */
/* Several pages put the heading class on a <span> inside the th rather than on the th
   itself. The span is not a table cell, so override.css never touched it and
   style.css's `.h4 { font-size: 1.125rem }` still applies — leaving those headers a
   different size from every other page's. Folding the span into its cell fixes it
   without having to rewrite the markup on each page. */
.codex-ds .table th span,
.codex-ds .table th .h4 {
    font-size: inherit !important;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.codex-ds .table td {
    font-size: var(--cdx-page-control) !important;
    color: var(--cdx-text-body) !important;
    white-space: normal;
}

/* codex.css:30633 drops .table-sm cells to 0.8125rem, which is where the benefit and
   deduction tabs got their cramped look. The rules above already reclaim the size; this
   restores the padding too, so "compact" means tighter rows rather than smaller text. */
.codex-ds .table-sm > :not(caption) > * > * {
    padding: var(--cdx-space-2) var(--cdx-space-3);
}

.codex-ds label,
.codex-ds .form-label,
.codex-ds .col-form-label,
.codex-ds .form-control,
.codex-ds .form-control-sm,
.codex-ds .form-select {
    font-size: var(--cdx-page-control) !important;
}

.codex-ds .btn {
    font-size: var(--cdx-page-control) !important;
}

/* The row Action menu and its items are the same commands as the buttons above them,
   so they read at the same size. codex-dashboard.css sizes .dropdown-menu at 14px,
   which was written for the dashboard's own base. */
.codex-ds .dropdown-menu,
.codex-ds .dropdown-item {
    font-size: var(--cdx-page-control);
}

/* Badges stay a step below the text they annotate. */
.codex-ds .badge {
    font-size: var(--cdx-page-caps);
}

/* style.css:21011 sets .accordion-body to .85rem — 13.6px — and the DTR list renders its
   whole day-by-day breakdown inside one, so every date and time in it stayed tiny however
   large the page around it got. */
.codex-ds .accordion-body {
    font-size: var(--cdx-page-control);
}

.codex-ds .form-control,
.codex-ds .form-select {
    border: 1px solid var(--cdx-border-default) !important;
    border-radius: var(--cdx-radius-md) !important;
}

.codex-ds .form-control:focus,
.codex-ds .form-select:focus {
    border-color: var(--cdx-emerald) !important;
    box-shadow: var(--cdx-shadow-focus) !important;
}

.codex-ds .input-rounded {
    border-radius: var(--cdx-radius-md) !important;
}

/* override.css:81-85 repaints .btn-outline-secondary's background to #00273a on hover and
   focus but leaves `color` at the same #00273a its base rule sets — dark navy text on a
   dark navy fill, so the label vanishes the moment the pointer touches it. Only the text
   colour is reclaimed here; the fill is left as the app intends it. */
.codex-ds .btn-outline-secondary:hover,
.codex-ds .btn-outline-secondary:focus,
.codex-ds .btn-outline-secondary:active {
    color: #fff !important;
}

/* Same collision on the filled variant, and this one is broken at rest rather than only on
   hover: codex-dashboard.css:313 styles .btn-secondary as a white button with navy text,
   while override.css:59-62 forces the fill to #00273a !important. Navy on navy — the
   Reset button in the filter dialogs rendered as a solid black rectangle with no label. */
.codex-ds .btn-secondary,
.codex-ds .btn-secondary:hover,
.codex-ds .btn-secondary:focus,
.codex-ds .btn-secondary:active {
    color: #fff !important;
}

/* codex-dashboard.css styles primary, secondary, light and link, but leaves the semantic
   filled buttons to the app's own CSS — where style.css:2749 gives .btn-danger black text
   on red. Stating them here keeps Cancel, Confirm and the rest reading the same on every
   themed page. */
.codex-ds .btn-danger,
.codex-ds .btn-danger:hover,
.codex-ds .btn-danger:focus {
    background-color: var(--cdx-danger);
    border-color: var(--cdx-danger);
    color: #fff !important;
}

.codex-ds .btn-success,
.codex-ds .btn-success:hover,
.codex-ds .btn-success:focus {
    background-color: var(--cdx-emerald-700);
    border-color: var(--cdx-emerald-700);
    color: #fff !important;
}

/* The outline variants are unstyled by the theme too, so the four forms that use
   DangerOutline for Cancel rendered as bare red text with no border at all. */
.codex-ds .btn-outline-danger {
    background-color: transparent;
    border-color: var(--cdx-danger);
    color: var(--cdx-danger) !important;
}

.codex-ds .btn-outline-danger:hover,
.codex-ds .btn-outline-danger:focus {
    background-color: var(--cdx-danger);
    border-color: var(--cdx-danger);
    color: #fff !important;
}

/* A dropdown entry is a menu row, not a call to action. The payroll row menu carried
   .btn-primary on two of its anchors, which painted them as solid emerald bars sitting
   under three plain text rows — the colour is dropped so the menu reads as one list. */
.codex-ds .dropdown-item.btn,
.codex-ds .dropdown-item.btn:hover,
.codex-ds .dropdown-item.btn:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--cdx-text-body) !important;
}

.codex-ds .dropdown-item.btn:hover {
    background-color: var(--cdx-gray-50) !important;
}

/* ── 2b. Heading scale ──────────────────────────────────────────────────────
   codex-dashboard.css gives headings a family, a colour and weight 600, but no size, so
   they kept style.css's absolute values — h4 1.125rem, h5 1rem, h6 0.938rem — which do
   not move with the page scale at all, so section headings looked inconsistent from page
   to page depending on which tag the author reached for.

   Sized in em so they track whatever they sit in — a page section from the page base, a
   row title (h6, the employee name in a list) from its cell — and normalised to one
   weight: the markup mixes fw-bold (391 uses) with fw-semibold (80) on headings, and the
   brand guide specifies 600. The !important is needed only because .fw-bold carries one;
   these selectors are more specific, so they win. Weight utilities on non-heading
   elements are untouched.

   The ratios are the browser's default scale shifted up one step, so the bottom of the
   scale lands *on* the surrounding text rather than under it: h5 and h6 carry section
   headings and row titles here, and at the default 0.92em/0.83em they came out smaller
   than the body text they head — the same inversion this block was written to fix. */
.codex-ds h1 { font-size: 1.7500em; }
.codex-ds h2 { font-size: 1.5000em; }
.codex-ds h3 { font-size: 1.3125em; }
.codex-ds h4 { font-size: 1.1250em; }
.codex-ds h5 { font-size: 1.0625em; }
.codex-ds h6 { font-size: 1.0000em; }

.codex-ds h1,
.codex-ds h2,
.codex-ds h3,
.codex-ds h4,
.codex-ds h5,
.codex-ds h6 {
    font-weight: 600 !important;
    line-height: 1.25;
}

/* Section headings inside cards are the same rank whichever tag carries them. */
.codex-ds .card-title {
    font-size: 1em;
    font-weight: 600 !important;
    color: var(--cdx-navy);
}

/* ── 2c. Checkboxes and switches ────────────────────────────────────────────
   Neither codex-dashboard.css nor Bootstrap ties .form-check-input to the page scale:
   style.css:2139 sizes it `width: 1em; height: 1em` against the *input's own* font-size,
   which browsers default to about 13px whatever the page is doing. Next to a label at the
   themed scale the toggle rendered roughly a third of its height, which is why the Night
   Differential switch read as broken rather than merely off.

   The fix is one font-size on .form-check, not a hand-set width and height. Bootstrap
   builds the whole switch in em — track 2em wide, knob 1em, label offset 2.5em, input
   pulled back by -2.5em — so those all line up as long as everything shares one font
   size. Overriding width/height instead knocked the knob out of its track, and setting
   the size on the input alone left .form-check computing its padding from the page base
   while the input computed its margin from 1.15rem. */
.codex-ds .form-check {
    font-size: var(--cdx-page-control);
}

/* Inputs do not inherit font-size from their parent — the browser gives them their own —
   so the em base has to be handed to them explicitly. */
.codex-ds .form-check-input {
    font-size: inherit;
    border-color: var(--cdx-border-default);
}

.codex-ds .form-check-input:checked {
    background-color: var(--cdx-emerald);
    border-color: var(--cdx-emerald);
}

.codex-ds .form-check-input:focus {
    border-color: var(--cdx-emerald);
    box-shadow: var(--cdx-shadow-focus);
}

.codex-ds .form-check-input:disabled {
    opacity: .5;
}

.codex-ds .form-check-label {
    color: var(--cdx-text-body);
}

/* ── 3. Sticky headers ──────────────────────────────────────────────────────
   style.css:22384 declares `.card-header { position: relative }` *after*
   .sticky-top (6053) at equal specificity, so `card-header sticky-top` is not
   actually sticky today and the inline top/z-index on these pages is dead.
   Four classes beat it without !important. The app header is out of flow and
   --dz-header-height tall, so top:0 would tuck the card header underneath it. */
.codex-ds .card > .card-header.sticky-top {
    position: sticky;
    top: var(--dz-header-height, 5rem);
    z-index: 4;
    background: var(--cdx-surface-card);
    border-top-left-radius: var(--cdx-radius-lg);
    border-top-right-radius: var(--cdx-radius-lg);
}

/* The table's own <thead> scrolls inside a different scrollport (the
   .table-responsive box) and needs its own fill, or rows show through it.
   On th, not thead: thead backgrounds do not paint reliably under
   border-collapse: separate. */
.codex-ds .table-responsive > .table > thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--cdx-surface-card);
}

/* ── 4. Containment: vertical scrolling only ────────────────────────────────
   .table-responsive defaults to overflow-x:auto (style.css:1884). With
   table-layout:fixed there is nothing left to scroll horizontally, so this is
   a guard rather than the fix. min-width:0 because flex and grid children
   default to min-width:auto and otherwise refuse to shrink below their
   content — which is how a wide table drags its card open. */
.codex-ds .table-responsive {
    overflow-x: hidden;
    overflow-y: auto;
}

.codex-ds .card,
.codex-ds .card-body,
.codex-ds .col-12 {
    min-width: 0;
}

/* ── 5. Cell content utilities ──────────────────────────────────────────────
   Three classes deep so these beat `.codex-ds .table td` above, which sets
   white-space: normal for every cell — the ones that must not wrap have to be able
   to say so.

   `anywhere` rather than `break-word`: only `anywhere` reduces the element's
   min-content contribution, which is what stops an unbroken token (a formula
   expression, a URL inside an address) from forcing its column open. */
.codex-ds .table .cdx-cell-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.codex-ds .table .cdx-cell-clip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.codex-ds .table .cdx-cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* nowrap on the data cells only. On a `th` these utilities outrank the header rule
   above (3 classes beats 2 classes + element), so "Overtime Hours" could not wrap and
   spilled into the next column — "OVERTIME HOURPURPOSE". Values must not break;
   headers must. */
.codex-ds .table td.cdx-cell-num,
.codex-ds .table td.cdx-cell-action {
    white-space: nowrap;
}

/* ── 6. Card footer (codex-dashboard.css covers card-header only) ───────────*/
.codex-ds .card-footer {
    background: transparent;
    border-top: 1px solid var(--cdx-border-subtle);
    border-radius: 0 0 var(--cdx-radius-lg) var(--cdx-radius-lg);
    padding: var(--cdx-space-4) var(--cdx-space-5);
}

/* ── 7. XNoRecord / XFilterLink / XPager ────────────────────────────────────
   Bootstrap's .link-* helpers are !important, so matching them is the only way
   to bring the filter links onto the brand link colour. */
.codex-ds .link-primary {
    color: var(--cdx-text-link) !important;
}

.codex-ds .link-secondary {
    color: var(--cdx-text-muted) !important;
}

/* The filter line sits between the card header and the table, and had no spacing of its
   own — the "Showing all" badge pressed straight against the table header beneath it.
   The margin lives here rather than on the control so only themed pages are affected. */
.codex-ds .x-filter-link {
    margin-bottom: var(--cdx-space-4);
}

.codex-ds .x-filter-link .badge {
    vertical-align: middle;
}

.codex-ds .form-input-content.error-page {
    padding: var(--cdx-space-8) 0;
}

/* Colour only. These used to set 1rem and 0.8125rem, which made the "No Record(s)"
   message the smallest text on an otherwise large page; the heading scale above already
   sizes them in proportion. */
.codex-ds .error-page h4 {
    color: var(--cdx-navy);
}

.codex-ds .error-page h5 {
    color: var(--cdx-text-muted);
}

/* ── 8. Search box clear button ─────────────────────────────────────────────
   These pages place the search field's clear X with an inline
   `position: relative; left: -35px` — a magic number tuned to the icon at the old
   ~19px type scale. The element stays in flow, so the offset only ever *looked*
   like an overlay; the larger scale grew the icon past 35px and the X drifted out
   of the field.

   Taking it out of flow drops the dependency on icon width altogether. Beating an
   inline style needs !important, and the rule is scoped to .codex-ds so the ~39
   other pages sharing this markup keep the offset they are still correct for. */
.codex-ds .card-header .d-flex.flex-fill.align-items-center {
    position: relative;
}

.codex-ds .card-header .icon[role="button"] {
    position: absolute !important;
    left: auto !important;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    line-height: 1;
}

/* Room for the X, so a long search term does not run underneath it. */
.codex-ds .card-header .d-flex.flex-fill.align-items-center .form-control {
    padding-right: 2.75rem;
}

/* ── 9. container-md rhythm ─────────────────────────────────────────────────
   The gutter is deliberately left at Bootstrap's default. The breadcrumb sits in a
   plain container-md outside this wrapper, so any gutter set here would make the card
   and the breadcrumb above it different widths — which is exactly what a narrower
   gutter did.

   The two forms that nest a second container-md inside the first would otherwise
   inset twice. */
.codex-ds .container-md .container-md {
    --bs-gutter-x: 0;
}