/*
 * MOD-79: Adagin brand override stylesheet for Portal.Net10.
 *
 * Loaded LAST in Views/Shared/_Head.cshtml, after bootstrap.min.css (lib/bootstrap/css) and the
 * DataTables Bootstrap4 integration CSS (lib/datatables/css) so its selectors win the cascade.
 *
 * MECHANISM NOTE: the ported markup (MOD-70..73) is Bootstrap v4.4.1, not v5 -- verified from the
 * "Bootstrap v4.4.1" version banner at the top of the legacy Portal/Content/bootstrap.css this PR
 * copies from.
 *
 * WARNING FOR FUTURE EDITS OF THIS COMMENT BLOCK: CSS comments do not nest. This block originally
 * quoted that banner's own opening and closing comment-delimiter characters verbatim, which closed
 * THIS comment eight lines early and silently turned the rest of the intended comment -- and the
 * real CSS rules after it -- into malformed, mostly-ignored CSS. A curl check or a build/test pass
 * that only confirms the file loads will NOT catch this; only an actual browser render will. Do
 * not paste literal comment-delimiter character pairs into this block again, in any form.
 *
 * Bootstrap 4 compiles its component colours (.btn-primary, .bg-primary, table
 * borders, etc.) from Sass at BUILD time, not from the `:root` custom properties bootstrap.css
 * ships (those exist in v4 but do not drive the compiled component CSS the way they do in
 * Bootstrap 5's CSS-variable-first components). So this file does two distinct things:
 *   1. Defines Adagin's own `--adagin-*` custom properties, for NEW Portal.Net10 markup going
 *      forward to consume directly.
 *   2. Directly overrides the relevant compiled Bootstrap 4 component selectors (.btn-primary,
 *      .form-control, .table thead th, .bg-primary, etc.) with Adagin's hex values, since v4 gives
 *      us no custom-property hook to retarget instead.
 *
 * Scope (MOD-79): shared layout chrome only (_Layout/_Head/_Footer/_PageState/_BreadCrumbView +
 * the left-nav/header markup they pull in) plus generic Bootstrap component overrides. No
 * per-view-family (Bin/Farm/Packhouse/etc.) styling and no module colour accents -- see the ticket
 * for the scope boundary.
 *
 * MOD-79 round-4 fix (Codex PR #366): the not-yet-copied legacy Portal/Content/styles.css (see
 * _Head.cshtml's own round-4 PORT-NOTE) sets `body` font-family and `.btn-primary`/`.btn-secondary`
 * background/border-color with `!important`. A normal-specificity rule here can never win against
 * that regardless of source order, so once that file is eventually copied into wwwroot (a future,
 * in-scope-elsewhere ticket -- see the _Head.cshtml note), body copy and both button variants would
 * silently revert to the legacy styling this theme replaces. The `body` font-family and every
 * `.btn-primary`/`.btn-secondary` background-color/border-color declaration below are marked
 * `!important` for exactly this reason -- not decoration, a required match against a specific,
 * already-known !important in the legacy stylesheet this file is meant to supersede.
 */

/* ---------------------------------------------------------------------------------------------
 * 1. Adagin brand tokens
 * ------------------------------------------------------------------------------------------- */
:root {
  /* Primary palette (this pass) */
  --adagin-dark-navy: #101729;
  --adagin-teal: #1F4F63;
  --adagin-light-green: #9CBF5D;
  --adagin-off-white: #F2F2F2;
  --adagin-white: #FFFFFF;

  /* Secondary palette */
  --adagin-black: var(--adagin-dark-navy);   /* MOD-691: one text colour (#101729); was #141414 */
  --adagin-grey: #C5C9CE;
  --adagin-light-grey: #DFE2E6;
  --adagin-navy: color-mix(in srgb, var(--adagin-dark-navy) 94%, white); /* MOD-691: the one navy is --adagin-dark-navy; this is its hover/secondary step, derived (about 15:1 with white text), not a second navy */
  --adagin-light-teal: #6F94A3;
  --adagin-green: #6B9E3B;

  /* Controlled accent only -- never a large background or body-text colour (brand guidelines,
     "accent colour discipline"). Not used anywhere in this pass; defined so later, in-scope
     small-icon/CTA usages don't have to re-derive the hex. */
  --adagin-orange: #E76E09;
  --adagin-orange-tint: #FFF9F5;   /* MOD-709: the warm tint of a control that holds an applied value (the search box with a term applied) */
  --adagin-orange-text: #B34700;   /* MOD-691: the accent as TEXT: 5.5:1 on white and 5.2:1 on --adagin-orange-tint (--adagin-orange itself is 3.2:1, a fill or border only) */

  /* MOD-296: one scale for the shared chrome and components (section 10). */
  --adagin-text-error: var(--ta-state-invalid-text); /* MOD-691: the one error-text colour (#73170D, 12:1 on white, 5:1 or better on the red tints); replaces plain red text */
  --adagin-text-muted: #48566F;       /* MOD-691: the one secondary-text colour on every background (7.4:1 on white, 6.8:1 on the grey page); was #5A6472 */
  --adagin-radius: 6px;
  --adagin-shadow: 0 1px 2px rgba(16, 23, 41, 0.06);
  --adagin-shadow-raised: 0 8px 24px rgba(16, 23, 41, 0.16);
  --adagin-space-1: 4px;
  --adagin-space-2: 8px;
  --adagin-space-3: 12px;
  --adagin-space-4: 16px;
  --adagin-space-5: 24px;
  --adagin-space-6: 32px;
  --adagin-header-h: 64px;
  --adagin-header-trim: 79px;         /* legacy header height (143px) minus --adagin-header-h; see section 6 */
  --adagin-backdrop-tint: rgba(16, 23, 41, 0.10); /* MOD-780: the page backdrop behind a filter popup or the week picker (.adagin-backdrop): navy tint ... */
  --adagin-backdrop-blur: 2px;                    /* ... and the blur of the page behind it; two variables so other pages reuse them */
  --adagin-nav-width: 217px;          /* MOD-881: the fixed left menu width anything placed beside it (the T&A Undo message) reads; 47px when the menu toggle hides it (rule below the block) */

  /* MOD-756 (portal UI alignment, wave 1; decided with the designer 13 Oct): one outline colour, one radius scale and one header / label type for
     every page. Rules read these names, never a hex or a px literal for the same thing.
     Outline: 1px secondary blue on component outlines (panes, cards, day cards, summary cards, shift blocks, toolbars, the filter panel) and the
     selected tab's fill, which joins its pane with no seam. Dividers inside tables and blocks are --adagin-divider. Buttons keep their own navy
     outline (--btn-border, the .adagin-btn tokens): they do not read --adagin-outline. */
  --adagin-outline: var(--adagin-teal);            /* #1F4F63 */
  --adagin-outline-width: 1px;
  --adagin-outline-tint: #E8EEF0;                  /* MOD-931: the fill of a chosen card (Bin Management zone cards): the secondary blue's tint, navy text on it is 15:1 */
  --adagin-divider: #E3E7EF;
  --adagin-control-border-tinted: #63748D;         /* a control's border on a tinted row: 3:1 or more on white and on every row tint */
  /* Radius scale. Concentric rule: a shape that sits flush in a padded or bordered container takes the container's radius minus that gap. */
  --adagin-radius-card: 20px;
  --adagin-radius-card-sm: 16px;
  --adagin-radius-modal: 28px;                     /* popups and modals */
  --adagin-radius-menu: 16px;                      /* menus and popovers */
  --adagin-radius-pane: 12px;
  --adagin-radius-block: 8px;                      /* buttons, blocks (day cards, shift blocks, the action pane), the table box */
  --adagin-radius-tag: 6px;
  --adagin-radius-input: 6px;
  --adagin-radius-pill: 999px;
  /* Table headers and form labels: sentence case (no text-transform), 12px / 18px, semibold. Button and tab labels stay Title Case. */
  --adagin-label-font-size: 12px;
  --adagin-label-line-height: 18px;
  --adagin-label-font-weight: 600;
  --adagin-menu-border: #D5DBE8;                   /* MOD-788: the user menu popup's 1px edge */
  /* MOD-695: the type scale, seven sizes and four weights, for every page. Headings are Onest, body text is Inter; each stack ends in a fallback
     (the fonts load with font-display: swap from the Google Fonts link in _Head.cshtml). */
  --adagin-font-heading: 'Onest', 'Inter', sans-serif;
  --adagin-font-body: 'Inter', sans-serif;
  --adagin-font-size-h1: 30px;       --adagin-line-height-h1: 38px;         /* page title, approval percentage */
  --adagin-font-size-h2: 24px;       --adagin-line-height-h2: 32px;         /* popup titles */
  --adagin-font-size-h3: 20px;       --adagin-line-height-h3: 28px;         /* day card date, section headings */
  --adagin-font-size-title: 18px;    --adagin-line-height-title: 26px;      /* dialog titles, empty-state title */
  --adagin-font-size-subtitle: 16px; --adagin-line-height-subtitle: 24px;   /* card titles, tabs */
  --adagin-font-size-body: 14px;     --adagin-line-height-body: 22px;       /* table text, buttons, dropdowns, links, help text */
  --adagin-font-size-caption: 12px;  --adagin-line-height-caption: 18px;    /* day names, tags, counts, NT/OT/ST labels */
  --adagin-font-weight-regular: 400;
  --adagin-font-weight-medium: 500;
  --adagin-font-weight-semibold: 600;
  --adagin-font-weight-bold: 700;
}
body:has(nav.left-nav:not(.open)) { --adagin-nav-width: 47px; } /* MOD-881 */

/* ---------------------------------------------------------------------------------------------
 * 2. Typography
 *    Onest (Semi Bold) for headings, Inter (Regular) for body copy. Font files are loaded via the
 *    Google Fonts <link> in _Head.cshtml (same CDN-link pattern as the existing Font Awesome
 *    include there) -- no @import here, and no local font files exist in this repo.
 * ------------------------------------------------------------------------------------------- */
body {
  font-family: 'Inter', sans-serif !important; /* matches legacy styles.css's !important on this
                                                   same property -- see the header comment */
  font-weight: 400;
  line-height: 1.2; /* 120% */
  letter-spacing: 0;
  color: var(--adagin-black);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--adagin-font-heading);
  font-weight: 600; /* Semi Bold */
  line-height: 1; /* 100% */
  letter-spacing: -0.02em; /* -2% */
}

/* ---------------------------------------------------------------------------------------------
 * 3. Buttons (.btn-primary / .btn-secondary)
 *    Primary: solid Dark Navy bg, white text. Secondary: white outline, Dark Navy text (MOD-296, section 10; was a light-grey pill).
 *    Hover/focus/disabled states aren't shown in the guidelines deck (applied-example slides
 *    only) -- these are judgement calls: hover/focus darken/lighten by one step and add a visible
 *    Teal focus ring for keyboard accessibility; disabled follows Bootstrap's own convention
 *    (reduced opacity, no pointer events) rather than inventing a new one.
 * ------------------------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--adagin-dark-navy) !important;
  border-color: var(--adagin-dark-navy) !important;
  color: var(--adagin-white);
}

.btn-primary:hover {
  /* One step lighter than Dark Navy (Adagin Navy) -- keeps white text at 15.1:1, still reads as
     "the same button", distinguishable from the resting state. */
  background-color: var(--adagin-navy) !important;
  border-color: var(--adagin-navy) !important;
  color: var(--adagin-white);
}

.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--adagin-navy) !important;
  border-color: var(--adagin-teal) !important;
  color: var(--adagin-white);
  box-shadow: 0 0 0 0.2rem rgba(31, 79, 99, 0.5); /* Teal focus ring, WCAG-visible on Dark Navy */
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--adagin-dark-navy) !important;
  border-color: var(--adagin-dark-navy) !important;
  opacity: 0.5;
}

/* MOD-79 round-1 fix (Codex PR #366): Bootstrap 4's own compiled :active/.active/dropdown-open
   selectors (`.btn-primary:not(:disabled):not(.disabled):active`, `.active`,
   `.show > .btn-primary.dropdown-toggle`) are MORE specific than the plain `.btn-primary` override
   above, so without a matching override here they win the cascade and the button flashes/sticks to
   Bootstrap's default blue (#0062cc) on press or while an attached dropdown is open. */
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--adagin-navy) !important;
  border-color: var(--adagin-navy) !important;
  color: var(--adagin-white);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(31, 79, 99, 0.5); /* same Teal focus ring as the plain :focus state */
}

/* .btn-secondary: see section 10 (MOD-296 outline style). */

/* ---------------------------------------------------------------------------------------------
 * 4. Text inputs (.form-control / .form-label)
 *    Thin Adagin Grey border, white fill, label in a muted grey positioned above the field.
 *    Focus state (not shown in the deck): Teal border + matching focus ring, replacing Bootstrap
 *    4's default blue -- judgement call, chosen to stay on-brand and keep the ring clearly
 *    visible against the white fill (contrast, not just colour, since focus rings aren't text).
 * ------------------------------------------------------------------------------------------- */
.form-control {
  background-color: var(--adagin-white);
  border: 1px solid var(--adagin-grey);
  border-radius: var(--adagin-radius-input); /* MOD-756; Bootstrap's input-group joins (0,3,0) still square the inner corners */
  color: var(--adagin-black);
}

.form-control:focus {
  background-color: var(--adagin-white);
  border-color: var(--adagin-teal);
  color: var(--adagin-black);
  box-shadow: 0 0 0 0.2rem rgba(31, 79, 99, 0.25);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--adagin-off-white);
  border-color: var(--adagin-light-grey);
  opacity: 0.75;
}

.form-control.is-invalid {
  /* Validation-error state isn't in the deck either -- kept semantically red (not in the Adagin
     palette) since colour is the only accessible signal Bootstrap's built-in validation JS reads;
     substituting a brand colour here would silently break error detection for anyone relying on
     Bootstrap's .is-invalid/.invalid-feedback convention. */
  border-color: #dc3545;
}

/* MOD-79 round-5 fix (self-audit + Codex PR #366): excludes label.switch -- _EditControl.cshtml's
   "Switch" field type wraps BOTH the checkbox and its coloured slider in a single
   <label class="switch">, not just text, so applying opacity to every <label> composited the whole
   control at 75% opacity and made enabled switches look disabled. Opacity on a parent cannot be
   undone by a child rule, so this can only be fixed by not applying it to .switch in the first
   place, not by overriding .slider's own opacity. Genuine textual field labels (.form-label and
   plain <label>) keep the muted-grey treatment; the switch control keeps full opacity so its
   on/off colour state (see .slider's own rules) reads correctly. */
.form-label,
label:not(.switch):not(.adagin-btn) {
  color: var(--adagin-navy);
  opacity: 0.75; /* "muted grey" per the spec, derived from Adagin Navy rather than a flat grey so
                    it still reads as on-brand instead of a generic Bootstrap grey */
  font-size: var(--adagin-label-font-size);       /* MOD-756: 12px / 18px semibold, sentence case as written */
  line-height: var(--adagin-label-line-height);
  font-weight: var(--adagin-label-font-weight);
  margin-bottom: 0.25rem;
  display: inline-block;
}

/* MOD-756 audit: an OPTION label (the text of a checkbox, radio, segment or chip) is not a field caption and keeps the type it had before the label tokens:
   14px (styles.css's old !important), the line height it inherited, and the 500 weight of the rule above's old body. Each selector ties the field-label
   rule at (0,2,1) and comes after it, so it wins; the page rules that out-rank it (.fm-layer-list label.fm-check:not(.switch), (0,3,1)) still do. */
.fs-segmented label:not(.switch),
.fs-chips label:not(.switch),
.heat-panel label:not(.switch),
label.fm-check:not(.switch),
label.fm-radio:not(.switch),
label.fst-check:not(.switch),
label.form-check-label:not(.switch) {
  font-size: 14px;
  line-height: inherit;
  font-weight: 500;
}

/* ---------------------------------------------------------------------------------------------
 * 5. Tables (.table / DataTables)
 *    Header row: Dark Navy background, white text (the default header-colour variant from the
 *    guidelines deck's p.66 "Microsoft Stylings" table example -- Teal/Light-Green header variants
 *    also shown there are module-specific and out of scope for this pass). Body rows: thin Adagin
 *    Light Grey borders.
 * ------------------------------------------------------------------------------------------- */
.table thead th,
table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--adagin-dark-navy);
  color: var(--adagin-white);
  border-color: var(--adagin-dark-navy);
  vertical-align: middle;
  font-size: var(--adagin-label-font-size);       /* MOD-756: 12px / 18px semibold */
  line-height: var(--adagin-label-line-height);
  font-weight: var(--adagin-label-font-weight);
}

/* MOD-756: table headers are sentence case portal-wide. Legacy main.css's ".table th { text-transform: uppercase }" (0,1,1) loads before this file, so
   the same selector here wins by source order; the dataTable selectors out-rank it. This only resets text-transform: a header shows its text exactly as
   written in the view or script (no header text was changed for this). */
.table th,
table.dataTable th,
table.dataTable thead td {
  text-transform: none;
}

/* MOD-756: the portal's own header cells (not .table / dataTable) take the same 12px / 18px semibold, sentence case. Their local rules set colour, sticky
   position and padding only; .fst-table's old "font: 600 13px/44px" shorthand is replaced below so this rule is not out-ranked. */
.geo-table thead th,
.fm-table thead th,
.fst-table thead th,
.report-viewer-table thead th,
.fs-windows thead th,
.fs-breaks thead th {
  font-size: var(--adagin-label-font-size);
  line-height: var(--adagin-label-line-height);
  font-weight: var(--adagin-label-font-weight);
  text-transform: none;
  vertical-align: middle;
}

.table td,
.table th,
table.dataTable td,
table.dataTable th {
  border-color: var(--adagin-divider);
}

.table-bordered,
table.dataTable.table-bordered {
  border-color: var(--adagin-divider);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--adagin-off-white);
}

.table-hover tbody tr:hover {
  background-color: rgba(156, 191, 93, 0.15); /* faint Light-Green tint, not a solid fill -- a
                                                  solid Light-Green row would fail body-text
                                                  contrast against the existing dark row text */
}

/* ---------------------------------------------------------------------------------------------
 * MOD-705 begin. Table header rows in secondary blue: Time & Attendance and the Wage Facilitator.
 *     Two variables are the one place for the header look (secondary blue --adagin-teal, white text, 8.9:1); the grouped rule below reads them for every
 *     T&A / Wage Facilitator table header, so another page opts in by adding its header selector to the group and copies no value. Everything else keeps
 *     section 5's navy header (.table thead th, the pinned .tablegrid header): primary navy stays for the side menu, top bar and buttons.
 *     Each selector out-specifies the rules it replaces (section 5, the pinned grid header, MOD-599's, the Wage page's inline is-confirmable rule), so the
 *     block does not depend on its position. The header cells are sticky and opaque, so the pinned header and the Approved grid's sticky cells keep this
 *     fill while the list scrolls. Header controls: links and the sort button are white, the focus ring white (the teal ring is invisible on the fill).
 * ------------------------------------------------------------------------------------------- */
:root {
  --adagin-table-header-bg: var(--adagin-teal);
  --adagin-table-header-fg: var(--adagin-white);
  --adagin-table-header-rule: var(--adagin-teal);
}

.ta-screen .table > thead > tr > th,
.adagin-sticky-stack:not(.ta-screen) .table > thead > tr > th,
.wf-grid.wf-grid .tablegrid :is(.tablegrid-header, .tablegrid-multiselect-header, .tablegrid-action-header) th,
.adagin-page-shell.adagin-page-shell .tablegrid :is(.tablegrid-header, .tablegrid-multiselect-header, .tablegrid-action-header) th, /* MOD-712: the shared page shell's grids */
.ta-record-units.table > thead > tr > th,
.ta-history-table > thead > tr > th {
  background-color: var(--adagin-table-header-bg);
  border-color: var(--adagin-table-header-bg);
  color: var(--adagin-table-header-fg);
  font-size: var(--adagin-label-font-size);       /* MOD-756: sentence case (section 5), 12px / 18px semibold */
  line-height: var(--adagin-label-line-height);
  font-weight: var(--adagin-label-font-weight);
}

/* A column header of the Units page is a button, which does not inherit its header's case on its own. */
.ta-record-units.table > thead > tr > th .ta-units-colmenu {
  text-transform: inherit;
}

/* Wage Facilitator: its links (and the day menu button) were the page's grey-blue link colour, ~1.9:1 on the fill. */
.adagin-sticky-stack:not(.ta-screen) .table > thead a,
.adagin-sticky-stack:not(.ta-screen) .table > thead a:hover,
.wf-grid.wf-grid .tablegrid :is(.tablegrid-header, .tablegrid-multiselect-header, .tablegrid-action-header) th a,
.wf-grid.wf-grid .tablegrid :is(.tablegrid-header, .tablegrid-multiselect-header, .tablegrid-action-header) th a:hover,
.adagin-page-shell.adagin-page-shell .tablegrid :is(.tablegrid-header, .tablegrid-multiselect-header, .tablegrid-action-header) th a,
.adagin-page-shell.adagin-page-shell .tablegrid :is(.tablegrid-header, .tablegrid-multiselect-header, .tablegrid-action-header) th a:hover {
  color: var(--adagin-table-header-fg);
}

.adagin-sticky-stack:not(.ta-screen) .table > thead :is(.ta-sort-btn, a, input):focus-visible,
.ta-record-units.table > thead .ta-units-colmenu:focus-visible,
.ta-history-table > thead a:focus-visible,
.adagin-page-shell.adagin-page-shell .tablegrid :is(.tablegrid-header, .tablegrid-multiselect-header, .tablegrid-action-header) th :is(a, button, input):focus-visible {
  outline: 2px solid var(--adagin-table-header-fg);
  outline-offset: 2px;
}

/* Totals rows keep a 2px rule in the same blue above them: the Unapproved / Overheads / Approved "Page totals" and the Units page's total. */
.ta-screen.ta-screen table:is(.is-query, .is-query-over, .approved-attendance) > tfoot > tr.ta-page-totals > :is(th, td),
.ta-record-units.table > tfoot > tr.ta-record-units-total > :is(th, td) {
  border-top: 2px solid var(--adagin-table-header-rule);
}
/* MOD-705 end. */

/* ---------------------------------------------------------------------------------------------
 * 6. Layout chrome: top header bar + left nav (MOD-79, reworked by MOD-296)
 *    _Layout.cshtml has no Bootstrap `.navbar` component -- the ported legacy DOM uses a plain
 *    `<header class="header">` top bar and a `<nav class="left-nav">` side menu (see
 *    Views/Shared/_Layout.cshtml and Views/Workflow/GetMyAdminWorkflow.cshtml).
 *    MOD-296: one dark-navy sidebar in BOTH its open and collapsed states (legacy styles.css painted
 *    the open one #FAFAFA, so pages that collapsed it looked like a different app), and one compact
 *    header bar: breadcrumb left, signed-in user right, var(--adagin-header-h) tall.
 * ------------------------------------------------------------------------------------------- */

/* Header + content offsets. Legacy header 143px -> 64px; the sticky toolbars on the Piecework / T&A / Bins / Wage pages subtract
   --adagin-header-trim from their legacy `top` so they still stack directly under it. The nav is 217px wide and 47px when
   collapsed (legacy left:-170px), so header and content start exactly where it ends: no white strip, no horizontal scroll. */
.animate.right {
  left: 217px;
  width: calc(100% - 217px);
}

.animate.left {
  left: 47px;
  width: calc(100% - 47px);
}

/* One offset at every width: legacy's <=767px rule (left 250px, MOD-172's matching width) is overridden by the two rules above
   too, since the nav is 217px there as well. */

header.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--adagin-space-4);
  top: 0;
  height: var(--adagin-header-h);
  padding: 0 var(--adagin-space-5);
  background-color: var(--adagin-dark-navy);
  color: var(--adagin-white);
}

section.content {
  margin-top: var(--adagin-header-h);
  padding: var(--adagin-space-5) var(--adagin-space-5) 0;
}

.content h1 {
  color: var(--adagin-dark-navy);
}

header.header .user {
  display: flex;
  align-items: center;
  gap: var(--adagin-space-2);
  flex: 0 0 auto;
  float: none;
  margin: 0;
  opacity: 1;
  font-size: var(--adagin-font-size-body);
  white-space: nowrap;
}

header.header .user img {
  height: 16px;
  width: auto;
}

header.header .user,
header.header .user .text-muted,
header.header .user a,
header.header .divider {
  color: var(--adagin-grey) !important;
}

header.header .user strong,
header.header .user a.sign-out {
  color: var(--adagin-white) !important;
  font-weight: 600;
}

header.header .user a.sign-out:hover {
  text-decoration: underline;
}

/* Phones: only Sign out stays in the strip (the breadcrumb is already hidden below md), so it never runs off-screen. */
@media (max-width: 767px) {
  header.header .user > .text-muted,
  header.header .user > img,
  header.header .user > strong,
  header.header .user > .divider {
    display: none;
  }
}

#breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

#breadcrumb .breadcrumb {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  font-size: var(--adagin-font-size-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#breadcrumb .breadcrumb li,
#breadcrumb .breadcrumb a {
  color: var(--adagin-grey);
}

#breadcrumb .breadcrumb li:last-of-type {
  color: var(--adagin-white);
}

#breadcrumb .breadcrumb a:hover {
  color: var(--adagin-white);
}

#breadcrumb .breadcrumb > li:after {
  padding: 0 var(--adagin-space-2);
  color: var(--adagin-light-teal);
}

#breadcrumb .breadcrumb > li:last-of-type:after {
  content: none;
}

/* A page's toolbar actions (MOD-223's summary / employee pages) render inside the breadcrumb list. */
#breadcrumb .breadcrumb > .adagin-btn {
  margin-left: var(--adagin-space-2);
}

/* Sidebar ---------------------------------------------------------------------------------------- */
nav.left-nav {
  background: var(--adagin-dark-navy);
  color: var(--adagin-white);
}

nav.left-nav.open {
  background: var(--adagin-dark-navy); /* legacy `.left-nav.open` painted it #FAFAFA */
}

nav.left-nav .navbar-menu {
  font-size: 20px;
  color: var(--adagin-grey);
}

/* MOD-404: a fixed height, so the arrow row is the same in both states (it was 52 px open, 53.19 px collapsed). */
nav.left-nav .navigation-arrow button {
  display: flex;
  align-items: center;
  gap: var(--adagin-space-2);
  box-sizing: border-box;
  height: 52px;
  margin: 0;
  padding: var(--adagin-space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* MOD-873: the hide/show control is a <button> now (it was a nameless link around the chevron). Same focus ring as the user menu trigger below. */
nav.left-nav .navigation-arrow button:focus { outline: none; }

nav.left-nav .navigation-arrow button:focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-light-teal);
  outline-offset: calc(var(--adagin-btn-focus-width) * -1);
}

/* MOD-873: a subtle "Hide menu" beside the chevron while the menu is open: the sidebar's secondary grey (#C5C9CE, about 10:1 on the navy), small, plain text. */
nav.left-nav .nav-menu-toggle__label {
  color: var(--adagin-grey);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

nav.left-nav .navigation-arrow button:hover .navbar-menu,
nav.left-nav .navigation-arrow button:hover .nav-menu-toggle__label {
  color: var(--adagin-white);
}

/* Hidden menu: the 47 px strip shows the chevron alone (named "Show menu" by its aria-label and tooltip). */
nav.left-nav:not(.open) .nav-menu-toggle__label {
  display: none;
}

/* MOD-404: display/height are set here because the styles.css rules that used to carry display:block are gone,
   and an SVG loaded through `content:` needs explicit sizing. */
nav.left-nav.open .navigation-logo {
  content: url('Images/adagin-logo-text-white.svg');
  display: block;
  box-sizing: content-box; /* the 136 px is the wordmark itself, not the box with its padding */
  width: 136px;
  height: auto;
  padding: 0 var(--adagin-space-4) var(--adagin-space-5);
}

nav.left-nav:not(.open) .navigation-logo {
  content: url('../Images/adagin-icon.svg');
  display: block;
  /* The collapsed strip is 47 px wide, so the icon is 31 px with 8 px each side. The nav sits 5 px off-screen,
     hence the margin. The bottom padding is 9 px less than the open state's because the icon is 9 px taller than
     the wordmark: both headers are then the same height and the menu does not jump on toggle. */
  box-sizing: content-box;
  width: 31px;
  height: auto;
  margin-left: 5px;
  padding: 0 var(--adagin-space-2) calc(var(--adagin-space-5) - 9px);
}

nav.left-nav .nav-item a.navbar {
  align-items: center;
  padding: 11px var(--adagin-space-4);
  border-left: 0;
  box-shadow: none;
}

nav.left-nav .nav-item a.navbar .nav-title,
nav.left-nav .nav-user-profile {
  font-weight: 500;
}

nav.left-nav .nav-item a.navbar .nav-title,
nav.left-nav .nav-item a.navbar i,
nav.left-nav .nav-user-profile {
  color: var(--adagin-light-grey);
}

nav.left-nav .nav-item a.navbar i {
  font-size: 16px;
}

nav.left-nav .nav-item a.navbar:hover,
nav.left-nav .nav-item a.navbar:focus {
  background-color: var(--adagin-navy);
}

nav.left-nav .nav-item a.navbar:hover .nav-title,
nav.left-nav .nav-item a.navbar:hover i,
nav.left-nav .nav-item a.navbar:focus .nav-title,
nav.left-nav .nav-item a.navbar:focus i {
  color: var(--adagin-white);
}

/* MOD-701: Time And Attendance / Bin Management use white SVG images, not font glyphs. 20px matches the glyphs' font-size and the image keeps its
   own white fill in every state (normal, hover, selected). Open: left-aligned like the floated glyphs; collapsed: centred in the strip. */
nav.left-nav .nav-item a.navbar .nav-icon-img {
  display: block;
  width: 20px;
  height: 20px;
}

nav.left-nav:not(.open) .nav-item a.navbar .nav-icon-img {
  margin: 0 auto;
}

/* Current page: Teal fill, white text (8.9:1), a Light-Green bar on the leading edge. */
nav.left-nav .nav-item a.navbar.active-nav-item {
  background-color: var(--adagin-teal);
  box-shadow: inset 3px 0 0 var(--adagin-light-green);
}

nav.left-nav .nav-item a.navbar.active-nav-item .nav-title,
nav.left-nav .nav-item a.navbar.active-nav-item i {
  color: var(--adagin-white);
}

nav.left-nav .nav-item a.navbar.active-nav-item .nav-title {
  font-weight: 600;
}

nav.left-nav .nav-inner-bottom-border {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

nav.left-nav .nav-item-user-profile {
  align-items: center;
  padding: 11px var(--adagin-space-4);
}

nav.left-nav .nav-item-user-profile:hover {
  background-color: var(--adagin-navy);
}

nav.left-nav .profile-card-container {
  background-color: var(--adagin-white);
  color: var(--adagin-black);
  border-radius: var(--adagin-radius-menu); /* MOD-756: a popover */
  box-shadow: var(--adagin-shadow-raised);
  /* MOD-788: 280 px, 1 px edge, 8 px padding; the height follows the rows (styles.css fixed it at 277 x 210). */
  box-sizing: border-box;
  width: 280px;
  height: auto;
  padding: var(--adagin-space-2);
  border: 1px solid var(--adagin-menu-border);
}

/* MOD-788: the user menu's trigger is a <button> now: reset the browser button look, keep the row it replaced. */
nav.left-nav button.nav-item-user-profile {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

nav.left-nav button.nav-item-user-profile:focus { outline: none; }

nav.left-nav button.nav-item-user-profile:focus-visible {
  background-color: var(--adagin-navy);
  outline: var(--adagin-btn-focus-width) solid var(--adagin-light-teal);
  outline-offset: calc(var(--adagin-btn-focus-width) * -1);
}

nav.left-nav .user-menu__chevron {
  display: inline-flex;
  margin-left: auto;
  color: var(--adagin-light-grey);
  font-size: 18px;
  transition: transform 0.15s ease;
}

nav.left-nav button.nav-item-user-profile[aria-expanded="true"] .user-menu__chevron { transform: rotate(180deg); }

nav.left-nav:not(.open) .user-menu__chevron { display: none; }

/* MOD-788: header. Logo tile 40 px (radius 8), email 14/20 semibold on one line, organisation 13/20, code 12/18, plan as a status tag. */
nav.left-nav .user-menu__header {
  display: flex;
  align-items: center;
  gap: var(--adagin-space-3);
  padding: var(--adagin-space-2) var(--adagin-space-2) var(--adagin-space-3);
}

nav.left-nav .user-menu__logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--adagin-radius-block);
  background-color: #F4F6FA;
}

nav.left-nav .user-menu__logo img { height: 24px; width: auto; margin: 0; }

nav.left-nav .user-menu__details { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }

nav.left-nav .profile-card-container .profile-card-username {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #101729;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

nav.left-nav .profile-card-container .profile-card-company-name {
  color: #101729;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

nav.left-nav .profile-card-container .profile-card-company-code {
  color: #48566F;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

nav.left-nav .user-menu__plan {
  margin-top: var(--adagin-space-1);
  padding: 0 var(--adagin-space-2);
  border-radius: var(--adagin-radius-pill);
  background-color: #E4F2D0;
  color: #3A5C1F;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

/* MOD-788: rows are tertiary (ghost) buttons, 40 px, radius 8, no outline. Specificity (0,3,1) beats the global `a:hover` (0,1,1) and the bare .adagin-btn colour. */
nav.left-nav .user-menu__list { display: flex; flex-direction: column; gap: 0; }

nav.left-nav .user-menu__list a.user-menu__item {
  --adagin-btn-radius: var(--adagin-radius-block);
  --btn-fg: #101729;
  --btn-bg-hover: #F4F6FA;
  --btn-bg-pressed: #F4F6FA;
  justify-content: flex-start;
  gap: var(--adagin-space-3);
  width: 100%;
  padding: 0 var(--adagin-space-3);
  border: 0;
  color: #101729;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

nav.left-nav .user-menu__list a.user-menu__item:hover,
nav.left-nav .user-menu__list a.user-menu__item:focus {
  background-color: #F4F6FA;
  color: #101729;
  text-decoration: none;
}

nav.left-nav .user-menu__list a.user-menu__item:focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-light-teal);
  outline-offset: 0;
}

nav.left-nav .user-menu__item .user-menu__label { flex: 1 1 auto; text-align: left; }

nav.left-nav .user-menu__item .user-menu__external { display: inline-flex; width: 18px; height: 18px; font-size: 18px; color: var(--adagin-teal); }

nav.left-nav .user-menu__divider { height: 1px; margin: var(--adagin-space-1) var(--adagin-space-2); background-color: var(--adagin-divider); }

/* ---------------------------------------------------------------------------------------------
 * 7. Bootstrap utility-class overrides
 *    Ported views may already use .bg-primary/.text-primary/.border-primary; Bootstrap 4's
 *    compiled defaults point at its own $primary (blue), not Adagin's palette, so these are
 *    re-pointed at Dark Navy directly (same v4 Sass-vs-custom-property limitation as the .btn-*
 *    overrides above).
 * ------------------------------------------------------------------------------------------- */
.bg-primary {
  background-color: var(--adagin-dark-navy) !important;
}

.text-primary {
  color: var(--adagin-dark-navy) !important;
}

.border-primary {
  border-color: var(--adagin-dark-navy) !important;
}

/* ---------------------------------------------------------------------------------------------
 * 8. Grid row actions (MOD-269): superseded by section 10's row-action rules (MOD-296).
 * ------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------
 * 9. Sticky list toolbars (MOD-275)
 *    The Time & Attendance / Piecework / Bins tab toolbar (.ta-menu: Previous Page ... Bulk Add)
 *    sticks under the header while its list scrolls. Legacy gave it a white background in each
 *    view's own <style> (Portal/Views/Employee/_TimeAndAttendance.cshtml:154-163); QA saw the rows
 *    through it on Portal.Net10, so the solid background is held here, in the stylesheet every page
 *    loads last, whatever a page's inline block or a later rule says.
 * ------------------------------------------------------------------------------------------- */
.ta-menu {
  background-color: var(--adagin-white) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------------------------------
 * 10. Shared components (MOD-296)
 *     One scale for every page: spacing steps of 4/8/12/16/24/32px, one radius, one card shadow,
 *     one button height. Everything here targets the shared markup (Bootstrap classes, the
 *     _TableGrid toolbar, the tablegrid plugin's DOM, the ta-menu toolbars, the config hub), never a
 *     single page.
 * ------------------------------------------------------------------------------------------- */

/* Buttons: one height, no wrapping, the block radius (MOD-756: buttons, blocks and table boxes are 8). Bootstrap's .btn-group / .input-group join rules
   out-rank this (0,1,0) rule, so joined buttons keep square inner corners. */
.btn {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: var(--adagin-radius-block);
  white-space: nowrap;
}

/* MOD-756 audit: a searchselect's toggle is a .btn but it is a select input, so it keeps the input radius (6, what it had before). */
.searchselect > .dropdown-toggle {
  border-radius: var(--adagin-radius-input);
}

/* MOD-832: a lookup with nothing to pick (Bulk Add's Bin Class, no active class) has its dropdown button disabled by adagin-label-binding.js; this keeps it greyed. */
.searchselect > .dropdown-toggle:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn:not(.btn-sm):not(.btn-lg) {
  padding: 6px 14px;
}

/* Grid toolbar (_TableGrid.cshtml): title left; search, actions, then the refresh / clear-filter icon buttons right. The legacy
   markup floats everything right in reverse DOM order and leaves the title as bare text, so the order is set here: the title
   text and the clearfix ::after spacer stay at order 0, everything else follows. */
h1.tablegrid-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--adagin-space-2);
  margin: 0 0 var(--adagin-space-4);
  padding: 0;
  min-height: 36px;
  font-size: 20px;
  color: var(--adagin-dark-navy);
}

h1.tablegrid-toolbar-actions::after {
  flex: 1 1 auto;
  order: 0;
}

h1.tablegrid-toolbar-actions > * {
  float: none !important;
  margin: 0 !important;
}

h1.tablegrid-toolbar-actions > span:not(.filter-strikethrough):not(.tablegrid-title) {
  order: 1;
  font-family: 'Inter', sans-serif;
  font-size: var(--adagin-font-size-body) !important;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--adagin-text-muted);
}

/* MOD-512: inside a tab pane the tab already names the list ("Farm Types" tab, then "Farm Types"), so the grid's title is hidden there,
   visually only: it stays the heading's text for screen readers. The toolbar keeps its row, pushed right by the ::after spacer. A grid
   without a tab keeps its title, the list's only heading, and so does one whose tab names something else (.tablegrid-title--kept,
   TableGridViewModelStub.KeepTitleInTab: Bin Tracking's zone tabs over "Bin Summary Detail"). */
.tab-pane h1.tablegrid-toolbar-actions > .tablegrid-title:not(.tablegrid-title--kept) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* MOD-498: inside a tab pane the toolbar row sits centred between the tab line (or the tab's own button row above it) and the table:
   the same space above as below (16px each), never against the tab line. Below, the 16px is the heading's bottom margin, so legacy's
   blank line above the table (.tablegrid-spacer, 19px) goes. The clearfix spacer that pushed the tools right is swapped for
   justify-content: when the row wraps (375px) it was left alone on an empty first line, adding the 8px row gap above the tools only.
   A kept title (Bin Tracking's zone tabs) still holds the left. Margins sit inside the sticky .tab-header (its .row is flex), so the
   stuck toolbar keeps the same spacing and tablegrid-sticky.js measures it with the bar. Grids without tabs are unchanged. */
.tab-pane h1.tablegrid-toolbar-actions {
  justify-content: flex-end;
  margin-top: var(--adagin-space-4);
}

.tab-pane h1.tablegrid-toolbar-actions::after {
  display: none;
}

.tab-pane h1.tablegrid-toolbar-actions > .tablegrid-title--kept {
  margin-right: auto !important;
}

.tab-pane .well-grid .tablegrid-spacer {
  display: none;
}

/* MOD-365: the search label and input grouped in one non-wrapping flex item so they stay together at narrow
   widths (1440px) instead of the input wrapping independently. The group is a flex container itself so the
   label and input align on one line, and flex: 0 0 auto prevents the group from shrinking (each child takes
   its minimum width: label text + 240px input). */
h1.tablegrid-toolbar-actions > .tablegrid-search-group {
  order: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

h1.tablegrid-toolbar-actions > .tablegrid-search-group > .tablegrid-search-label {
  font-family: 'Inter', sans-serif;
  font-size: var(--adagin-font-size-body) !important;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--adagin-text-muted);
  white-space: nowrap;
}

h1.tablegrid-toolbar-actions > .tablegrid-search-group > input.form-control {
  width: 240px !important;
  height: 36px;
  font-size: 14px;
  flex: 0 0 auto;
}

h1.tablegrid-toolbar-actions > input.form-control {
  order: 2;
  width: 240px !important;
  height: 36px;
  font-size: 14px;
}

h1.tablegrid-toolbar-actions > a:not(.btn-secondary) {
  order: 3;
}

h1.tablegrid-toolbar-actions > a.btn-secondary {
  order: 4;
}

h1.tablegrid-toolbar-actions > .btn,
.tablegrid-footer-buttons > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
}

h1.tablegrid-toolbar-actions > .btn i {
  color: inherit;
}

/* Secondary = outline: white fill, Adagin Grey border, Dark Navy icon/text. Replaces the pale-grey pill whose white icons washed
   out (legacy styles.css colours toolbar icons white for the old dark buttons). */
.btn-secondary,
.btn-secondary:disabled,
.btn-secondary.disabled {
  background-color: var(--adagin-white) !important;
  border-color: var(--adagin-grey) !important;
  color: var(--adagin-dark-navy) !important;
  border-radius: var(--adagin-radius-block);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--adagin-off-white) !important;
  border-color: var(--adagin-light-teal) !important;
  color: var(--adagin-dark-navy) !important;
}

h1.tablegrid-toolbar-actions > a.btn-secondary,
.tablegrid-footer-buttons > a.btn-secondary {
  min-width: 36px;
  width: 36px;
  padding: 0;
}

.tablegrid-footer-buttons > .adagin-btn + .adagin-btn {
  margin-left: var(--adagin-space-2);
}

/* The clear-filter glyph is a white PNG; render it Dark Navy on the white button. */
.btn-secondary .filter-strikethrough {
  filter: brightness(0);
  opacity: 0.85;
}

/* Grid body: one row height for data and action rows (the plugin syncs them, but a taller action cell used to push its row a
   few pixels per row), long text ends in an ellipsis inside its own column instead of running under the pinned Actions column
   (the full text is already the cell's title tooltip). */
.tablegrid .tablegrid-detail td,
.tablegrid .tablegrid-action td {
  padding: 6px 10px;
  line-height: 20px;
  vertical-align: middle;
}

/* MOD-578: a denser grid so wide lists read in full. Body one step below the table's 14px, headers 12px (they may wrap to two lines; the body never does).
   The columns are then sized to their content by wwwroot/js/tablegrid-compact.js. */
.tablegrid .tablegrid-detail td {
  font-size: var(--adagin-font-size-body);
}

.tablegrid .tablegrid-header th.tablegrid-column,
.tablegrid .tablegrid-multiselect-header th,
.tablegrid .tablegrid-action-header th {
  padding: 8px 10px;
  font-size: var(--adagin-label-font-size);   /* MOD-756: 12px / 18px semibold, as every table header */
  line-height: var(--adagin-label-line-height);
  font-weight: var(--adagin-label-font-weight);
  white-space: normal;
  vertical-align: middle;
}

/* MOD-578: tablegrid-compact.js measures the columns at their natural width: both tables lay out automatically, nothing clipped, headers at their narrowest. */
.tablegrid table.tablegrid-measuring {
  table-layout: auto !important;
  width: max-content !important;
}

.tablegrid table.tablegrid-measuring td,
.tablegrid table.tablegrid-measuring th {
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

.tablegrid table.tablegrid-measuring-head {
  width: min-content !important;
}

/* MOD-578: the first data column stays in view, beside the checkbox column, while a wide list scrolls sideways (tablegrid-compact.js sets its left offset). */
.tablegrid .tablegrid-detail td.tablegrid-pin,
.tablegrid .tablegrid-header th.tablegrid-pin {
  position: sticky;
  z-index: 2;
}

/* MOD-578: the pinned header cell keeps the navy header background (section 5's .table thead th, which the white text needs) and stays opaque so scrolled headers do not show through. */
.tablegrid .tablegrid-header th.tablegrid-pin {
  background-color: var(--adagin-dark-navy);
}

.tablegrid .tablegrid-action-detail td,
.tablegrid .tablegrid-action-header th {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* MOD-578/MOD-737: with a "..." menu the Actions column is as wide as its buttons (View + the 32px trigger + the cell padding), the same on
   every row. It was pinned to 124px, but that content measures 132px in the shared font (more on other machines' text rendering), and the
   column's own overflow: auto showed a sideways scrollbar above the pager. Left to size itself, the plugin and tablegrid-compact.js read the
   column's real width for the body and header cells. */

.tablegrid .tablegrid-detail tr.tablegrid-row > td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* MOD-317: a grid whose columns have fixed widths (TableGridColumn.Width) can be wider than its frame. In a .tablegrid-scroll-x
   wrapper it scrolls sideways inside the frame (the plugin moves its header with the body), never the page. */
.tablegrid-scroll-x .tablegrid,
.tablegrid-scroll-x .tablegrid-view {
  max-width: 100%;
}

.tablegrid-scroll-x .tablegrid-header {
  overflow: hidden;
}

.tablegrid-scroll-x .tablegrid-detail {
  overflow-x: auto;
}

/* MOD-426: the footer's pager (the page-size select, then the page links) never grows wider than the grid: the links wrap onto
   another line under it rather than push the select off the screen. tablegrid-pager.js keeps the links to a window of pages; this
   holds whatever their number. */
.tablegrid .tablegrid-footer .tablegrid-footer-pager {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}

.tablegrid .tablegrid-footer .tablegrid-footer-pagesize {
  flex: none;
}

.tablegrid .tablegrid-footer .tablegrid-footer-pager .pagination {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Row actions (MOD-269 right-aligned them; MOD-296): left-aligned in one fixed order, with Print -- the one action a row may drop --
   moved last, so View / Edit / Archive sit in the same place on every row and a missing Print leaves no gap. */
tr.tablegrid-action-row > td {
  text-align: left;
  white-space: nowrap;
}

.tablegrid-action-buttons {
  display: inline-flex !important;
  align-items: center;
  gap: var(--adagin-space-4);
  float: none !important;
}

.table .tablegrid-action-buttons > a:not(.adagin-btn) {
  display: inline-flex;
  align-items: center;
  gap: var(--adagin-space-1);
  font-size: var(--adagin-font-size-body);
  font-weight: 500;
  color: var(--adagin-teal);
}

.table .tablegrid-action-buttons > a:not(.adagin-btn):hover {
  color: var(--adagin-dark-navy);
  text-decoration: underline;
}

.tablegrid-action-buttons > a i {
  color: inherit;
}

.tablegrid-action-buttons > a.print {
  order: 1;
}

/* MOD-578: the 3-dot trigger is a compact 32px square in every grid. MOD-554: the Reports list's Actions, right to left: 3-dot menu, View, then Print (only on a row that has one). The cells and the ACTIONS header
   are right-aligned, so View and the 3-dot button sit in the same place on every row whether or not Print shows. The 3-dot button is a 32px
   square with the dots centred (it was a ~55px btn with the dots at the left). The rows of this separate table keep the plugin's synced heights. */
:is(#dataexport, #dataexport_archived) + .tablegrid tr.tablegrid-action-row > td,
:is(#dataexport, #dataexport_archived) + .tablegrid .tablegrid-action-header th {
  text-align: right;
}

:is(#dataexport, #dataexport_archived) + .tablegrid .tablegrid-action-buttons {
  justify-content: flex-end;
  width: 100%;
}

:is(#dataexport, #dataexport_archived) + .tablegrid .tablegrid-action-buttons > a.print {
  order: 0;
}

.tablegrid .tablegrid-action-buttons > a.row-menu {
  justify-content: center;
  width: 28px; /* MOD-757: the row menu is a tertiary 28 x 24 button around the 20 px Material keyboard_arrow_down (MOD-957; was more_vert) */
  height: 24px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--adagin-btn-default);
  margin-left: 0;
  /* Bootstrap's .btn-group > .btn (flex: 1 1 auto) and styles.css's .btn (min-width: 80px) made it 80px (157px on rows without Print) despite the width. */
  flex: none;
  min-width: 0;
}

/* MOD-554 (QA 8 Oct): the Actions table is separate from the grid and the plugin copies row heights across by index; the last rows came out 12-18px
   apart (40.5 against 52.5 measured). Pin the rows of both tables to the same height, which the plugin's inline heights cannot override. */
:is(#dataexport, #dataexport_archived) + .tablegrid :is(tr.tablegrid-row, tr.tablegrid-grouprow, tr.tablegrid-action-row, tr.tablegrid-action-grouprow) {
  height: 53px !important;
}

/* MOD-554: the page-size select in the footer overlapped the last row's actions. */
:is(#dataexport, #dataexport_archived) + .tablegrid .tablegrid-footer {
  margin-top: var(--adagin-space-4);
}

/* MOD-364: the Reports list's 3-dot menu sits last, at the right of the row; its dropdown is drawn by Views/List/Index.cshtml. */
.tablegrid-action-buttons > a.row-menu {
  order: 2;
  margin-left: auto;
}

/* MOD-756 audit: every Bootstrap dropdown menu (the grid / report 3-dot menus, the units menu, the searchselect's menu and its list) is a menu: the menu
   radius and the outline, over Bootstrap's 0.25rem and grey border (same 1px width). The datetimepicker widget is a .dropdown-menu too but keeps its
   vendor box: its arrow is drawn by :before / :after borders in its own grey, which an outline-coloured box would not match. */
.dropdown-menu:not(.bootstrap-datetimepicker-widget) {
  border: var(--adagin-outline-width) solid var(--adagin-outline);
  border-radius: var(--adagin-radius-menu);
}

/* Only the outer menu surface is outlined: a .dropdown-menu nested in another (the searchselect's list, ul.dropdown-menu.inner inside its
   div.dropdown-menu, rojobaco-plugins SearchSelect) is part of that surface, not a second box: no border, corners, shadow or second padding. Same
   (0,2,0) as the rule above and after it, so it wins; the list keeps its own scrolling (overflow-y, max-height). */
.dropdown-menu .dropdown-menu,
.dropdown-menu.inner {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.report-row-menu {
  z-index: 1035;
  min-width: 160px;
  border-radius: var(--adagin-radius-menu);
  box-shadow: var(--adagin-shadow-raised);
}

.report-row-menu .dropdown-item i,
.report-row-menu .dropdown-item .adagin-inline-icon {
  width: 16px;
  margin-right: var(--adagin-space-1);
}

.report-row-menu .report-row-menu-archive {
  color: var(--adagin-btn-danger);
}

/* MOD-595: the day cell's 3-dot button (T&A Approved, Wage Confirmed and Paid grids); its menu is the report-row-menu above, the hidden source links never show. */
.day-menu { display: inline-block; vertical-align: middle; }
.day-menu .day-menu-btn { display: inline-block; padding: 0 var(--adagin-space-2); color: var(--adagin-text-muted); cursor: pointer; text-decoration: none; }
.day-menu .day-menu-btn:hover, .day-menu .day-menu-btn:focus-visible { color: var(--adagin-black); }
.day-menu .day-menu-source { display: none; }
.report-row-menu .dropdown-item.disabled { opacity: .55; cursor: not-allowed; }

/* MOD-555: the Reports list's group headings ("My favourites", "All reports") are left aligned, bold, in the secondary colour (not centred grey). */
:is(#dataexport, #dataexport_archived) + .tablegrid tr.tablegrid-grouprow > td {
  text-align: left;
  font-weight: 700;
  color: var(--adagin-teal);
}

/* MOD-496: the Reports list's Favourite column is only as wide as its header (star + "Favourite"), fixed so a filter, sort or page never moves it;
   the sort / filter icons sit over the header's edge instead of widening it. The star is centred. */
#dataexport + .tablegrid th.column-header-favourite,
#dataexport + .tablegrid tr.tablegrid-row > td:first-child {
  box-sizing: border-box;
  width: 7.5rem;
  min-width: 7.5rem;
  max-width: 7.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  white-space: nowrap;
}

/* MOD-496 (QA 7 Oct): the grid is table-layout: fixed, so its column widths come from the hidden sizing row (tr.tablegrid-firstrow),
   whose cells Grid.adjustSize (rojobaco-plugins) sizes inline to an equal share of the grid -- the rules above on the data cells alone
   left the column a third of the table wide. Override the sizing row: the Favourite cell gets the header's width and the Name cell goes
   auto, so it takes the freed space (and the Description's too, when that is hidden below 900px). The header cells copy these widths. */
#dataexport + .tablegrid tr.tablegrid-firstrow > td:first-child {
  box-sizing: border-box;
  width: 7.5rem !important;
}

#dataexport + .tablegrid tr.tablegrid-firstrow > td:nth-child(2) {
  width: auto !important;
}

#dataexport + .tablegrid th.column-header-favourite {
  position: relative;
}

/* MOD-496 (QA 8 Oct): the header's content is the star + "Favourite" (96px measured) and the caret is absolutely placed, so the header keeps the caret's
   room (4px gap + 6px caret + 4px) in its right padding instead of letting the caret sit over the last letter. */
#dataexport + .tablegrid th.column-header-favourite {
  padding-right: 0.875rem;
}

#dataexport + .tablegrid th.column-header-favourite > i {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75em;
}

/* MOD-364 (QA 7 Oct): "My favourites" with nothing to show says why in the grid's own empty row (Views/List/Index.cshtml), in the table above
   its footer, at the grid's normal text size and centred, not as small print under the footer. */
#dataexport + .tablegrid tr.tablegrid-emptyrow > td.report-favourites-empty {
  padding: var(--adagin-space-6) var(--adagin-space-4);
  font-size: 14px;
  text-align: center;
  color: var(--adagin-text-muted);
  white-space: normal;
}

/* MOD-364: hide the Reports list's Description column (its last data column, so second-to-last: the grid appends a blank cell for the row-actions column) below 900px. Data rows and the hidden sizing row (tablegrid-firstrow, which sets the fixed-layout widths): the action, group-heading and empty rows are one wide cell and are left alone. */
@media (max-width: 899.98px) {
  #dataexport + .tablegrid th.column-header-description,
  #dataexport + .tablegrid tr.tablegrid-row > td:nth-last-child(2),
  #dataexport + .tablegrid tr.tablegrid-firstrow > td:nth-last-child(2),
  #dataexport_archived + .tablegrid th.column-header-description,
  #dataexport_archived + .tablegrid tr.tablegrid-row > td:nth-last-child(2),
  #dataexport_archived + .tablegrid tr.tablegrid-firstrow > td:nth-last-child(2) {
    display: none;
  }
}

/* MOD-364: the full-screen report view (wwwroot/js/Report/ReportViewer.js). Below the bootstrap modal (1040/1050) so Change filters opens over it. */
body.report-viewer-open {
  overflow: hidden;
}

/* MOD-553: the fixed left nav (z-index 99999) sits above this, so start the viewer at the nav's edge (217px open, 47px collapsed)
   instead of under it. Same offsets as the #ajaxModal rule above. */
.report-viewer {
  position: fixed;
  inset: 0 0 0 217px;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  background: var(--adagin-white);
}

body:has(nav.left-nav:not(.open)) .report-viewer {
  left: 47px;
}

.report-viewer-header {
  display: flex;
  align-items: center;
  gap: var(--adagin-space-3);
  padding: var(--adagin-space-3) var(--adagin-space-4);
  border-bottom: 1px solid var(--adagin-divider);
}

.report-viewer-title {
  flex: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--adagin-dark-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-viewer-actions {
  display: flex;
  align-items: center;
  gap: var(--adagin-space-2);
}

.report-viewer-close {
  margin-left: var(--adagin-space-2);
}

.report-viewer-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--adagin-space-2);
  padding: var(--adagin-space-2) var(--adagin-space-4);
  background: var(--adagin-off-white);
  border-bottom: 1px solid var(--adagin-divider);
}

.report-viewer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--adagin-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-viewer-chip {
  padding: 2px var(--adagin-space-2);
  border: 1px solid var(--adagin-grey);
  border-radius: var(--adagin-radius-pill);
  background: var(--adagin-white);
  font-size: 13px;
}

.report-viewer-chip-label {
  color: var(--adagin-text-muted);
}

.report-viewer-change {
  color: var(--adagin-teal);
  font-weight: 500;
}

.report-viewer-search {
  width: 260px;
  max-width: 100%;
  margin-left: auto;
}

.report-viewer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 0 var(--adagin-space-4);
}

.report-viewer-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.report-viewer-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.report-viewer-table th,
.report-viewer-table td {
  padding: var(--adagin-space-1) var(--adagin-space-2);
  border-bottom: 1px solid var(--adagin-divider);
  white-space: nowrap;
}

.report-viewer-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--adagin-white);
  color: var(--adagin-dark-navy);
  font-weight: var(--adagin-label-font-weight);
  border-bottom: 2px solid var(--adagin-grey);
}

.report-viewer-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.report-viewer-table tbody tr:nth-child(even) {
  background: var(--adagin-off-white);
}

.report-viewer-total td {
  font-weight: 600;
  border-top: 2px solid var(--adagin-grey);
  background: var(--adagin-white);
}

.report-viewer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--adagin-space-3);
  padding: var(--adagin-space-2) var(--adagin-space-4);
  border-top: 1px solid var(--adagin-divider);
  color: var(--adagin-text-muted);
}

.report-viewer-pager {
  display: flex;
  align-items: center;
  gap: var(--adagin-space-2);
}

@media (max-width: 599.98px) {
  .report-viewer-header {
    flex-wrap: wrap;
  }

  .report-viewer-search {
    width: 100%;
    margin-left: 0;
  }
}

/* MOD-364: print / export progress and failure notices. Above the modal so they stay readable when a popup is open. */
.report-toasts {
  position: fixed;
  right: var(--adagin-space-4);
  bottom: var(--adagin-space-4);
  z-index: 1060;
  display: flex;
  flex-direction: column;
  gap: var(--adagin-space-2);
  max-width: calc(100vw - 2 * var(--adagin-space-4));
}

.report-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--adagin-space-3);
  width: 360px;
  max-width: 100%;
  padding: var(--adagin-space-3) var(--adagin-space-4);
  border-left: 4px solid var(--adagin-teal);
  border-radius: var(--adagin-radius-block);
  background: var(--adagin-white);
  box-shadow: var(--adagin-shadow-raised);
  font-size: 13px;
}

.report-toast > span {
  flex: 1;
}

.report-toast-error {
  border-left-color: var(--adagin-btn-danger);
}

/* Pager */
.page-link {
  color: var(--adagin-teal) !important;
}

.page-item.active .page-link {
  background: var(--adagin-dark-navy) !important;
  border-color: var(--adagin-dark-navy) !important;
  color: var(--adagin-white) !important;
}

.page-item:first-child .page-link {
  border-top-left-radius: var(--adagin-radius-block);
  border-bottom-left-radius: var(--adagin-radius-block);
}

.page-item:last-child .page-link {
  border-top-right-radius: var(--adagin-radius-block);
  border-bottom-right-radius: var(--adagin-radius-block);
}

/* Tabs */
.nav-tabs .nav-link {
  color: var(--adagin-teal);
}

/* MOD-756: the selected tab is filled with the shared outline colour and sits on a tab line of the same colour, so tab and pane join with no seam
   (Bootstrap's -1px margin overlaps the line). Same selector as Bootstrap's (0,3,0), later in the cascade; Time & Attendance's .ta-nav rules are
   (0,4,0) and keep their own shell (MOD-681). The label keeps its case (Title Case). */
.nav-tabs {
  border-bottom-color: var(--adagin-outline);
}

.nav-tabs .nav-link.active {
  background-color: var(--adagin-outline);
  border-color: var(--adagin-outline);
  color: var(--adagin-white);
  font-weight: 600;
}

/* List toolbars (.ta-menu: Previous Page ... Bulk Add on T&A / Piecework / Bins / Wage). Views pin each button to min-width:180px,
   which with the flex row's shrinking wrapped labels onto two lines ("Previous / Page"). Natural widths, never wrapped; a row too
   wide for the window scrolls sideways instead of growing taller (the sticky rows below are offset by its one-row height). */
.ta-menu {
  flex-wrap: nowrap;
  justify-content: safe center !important;
  gap: var(--adagin-space-2);
  overflow-x: auto;
}

/* MOD-756: every list toolbar (T&A Unapproved / Overheads, the Bins zone toolbar, the four Piecework tab toolbars) is a pane with the shared outline
   and block corners. The views' own <style> blocks (_BinFilter, _PieceworkFilter, _TimeAndAttendance) give .ta-menu a legacy bottom-only #ddd
   border at (0,1,0) and come after this file in the page, so this rule is (0,2,0): every toolbar sits directly in its .tab-content or in a pane in it. */
.tab-content .ta-menu {
  border: var(--adagin-outline-width) solid var(--adagin-outline);
  border-radius: var(--adagin-radius-block);
}

.ta-menu > .btn,
.ta-menu__actions > .btn {
  flex: 0 0 auto;
  min-width: 0 !important;
}

/* Filter bars with the shared week picker (T&A / Piecework / Bins / Wage): each filter sits in a fixed col-2, so with the nav open
   the picker's arrows wrapped under a clipped date and a two-line label pushed its dropdown down. The date takes whatever the two
   arrows leave (legacy col-xl-9 did not leave them room), and every filter's control sits on the same baseline whatever its
   label's height. */
.form-group.row > .bs-weekview.bs-weekpicker-on {
  flex: 1 1 0;
  max-width: none;
  min-width: 0;
  padding: 0;
}

.form-group.row > .bs-weekview.bs-weekpicker-on > input.form-control {
  padding-left: var(--adagin-space-1);
  padding-right: var(--adagin-space-1);
}

.form-group.row > .bs-weekview.bs-weekpicker-on > input.form-control,
select#wf-payrun.form-control,
input.form-control[type="date"],
input.form-control[type="datetime-local"],
.bs-datepicker.form-control,
.bs-datetimepicker.form-control,
.bs-timepicker.form-control,
.bs-monthpicker.form-control {
  /* MOD-500 / MOD-505: the same box as its neighbours, the searchselect buttons (.btn: 14px text from styles.css, a .5px light-grey
     border, line-height 1.5, .375rem padding). A plain .form-control is 16px text with a 1px border, so a date box stood taller and
     heavier than the dropdowns. The height is the dropdowns' 36px as measured on portal-qa (the calc() it replaced came to 34px). The week picker keeps its tight side padding (above) for its two arrows. */
  font-size: 14px;
  border-width: 0.5px;
  border-style: solid;
  height: 36px;
  /* MOD-756: the shared input radius, as every .form-control. */
  border-radius: var(--adagin-radius-input);
}

/* Not on focus or when invalid: the teal focus border and the red .is-invalid border must win. */
.form-group.row > .bs-weekview.bs-weekpicker-on > input.form-control:not(:focus):not(.is-invalid):not(.adagin-field--warning):not(:disabled):not([readonly]),
select#wf-payrun.form-control:not(:focus):not(.is-invalid):not(:disabled),
input.form-control[type="date"]:not(:focus):not(.is-invalid):not(.adagin-field--warning):not(:disabled):not([readonly]),
input.form-control[type="datetime-local"]:not(:focus):not(.is-invalid):not(.adagin-field--warning):not(:disabled):not([readonly]),
.bs-datepicker.form-control:not(:focus):not(.is-invalid):not(.adagin-field--warning):not(:disabled):not([readonly]),
.bs-datetimepicker.form-control:not(:focus):not(.is-invalid):not(.adagin-field--warning):not(:disabled):not([readonly]),
.bs-timepicker.form-control:not(:focus):not(.is-invalid):not(.adagin-field--warning):not(:disabled):not([readonly]),
.bs-monthpicker.form-control:not(:focus):not(.is-invalid):not(.adagin-field--warning):not(:disabled):not([readonly]) {
  border-color: #d3d3d3;
}

select#wf-payrun.form-control,
input.form-control[type="date"],
input.form-control[type="datetime-local"],
.bs-datepicker.form-control,
.bs-datetimepicker.form-control,
.bs-timepicker.form-control,
.bs-monthpicker.form-control {
  /* The dropdowns' inner padding (.btn:not(.btn-sm):not(.btn-lg): 6px 14px), so the text starts at the same x. */
  padding: 6px 14px;
}

/* MOD-537: from 1300px the week picker's text starts at the dropdowns' 14px (the full row leaves the date room). From 1440px the arrows +
   box together also span the dropdowns' width: a dropdown fills its cell less the 15px gutters (193px in a 222px cell at 1600px, measured
   on portal-qa), while the picker's row runs gutter to gutter, so it takes the same 15px on each side. That leaves 138px for the box at
   1600px and ~110px at 1440px; narrower than that the date would be cramped, so the full row stays. MOD-763: with 40px arrows (MOD-450)
   the gutters left the box only 85-109px at 1440-1584px with the side menu open (measured in Chromium), under the 110px "04 May 2026"
   needs, so they start at 1600px (box 112px there). */
@media (min-width: 1300px) {
  .form-group.row > .bs-weekview.bs-weekpicker-on > input.form-control {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (min-width: 1600px) {
  .form-group.row > .fa-chevron-left:has(+ .bs-weekview) {
    margin-left: 15px;
  }
  .form-group.row > .bs-weekview + .fa-chevron-right {
    margin-right: 15px;
  }
}

/* MOD-505: the Farm Map's date overlay (Views/Farm/_Map.cshtml) is not a form beside dropdowns: it keeps the plain .form-control padding and, MOD-756, the shared input radius. */
.fm-date-overlay input.form-control[type="date"] {
  padding: 0.375rem 0.75rem;
  border-radius: var(--adagin-radius-input);
}

/* MOD-505: a plain date / time picker's column (_EditControl.cshtml: .col-xl-9.bs-weekview) is an ordinary form column, exactly the
   dropdowns' (.col-xl-9, with its own padding, width and the dialog overrides in section 12). Only the week picker, whose two arrows
   sit beside it in the bar, takes the row's remainder with no padding (above). The date had that too, so it ran wider and further
   left than the dropdowns around it. */

.row:has(> [class*="col-"] > .form-group.row > .bs-weekview) > [class*="col-"] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* MOD-474: the week selector's two arrows are 27px each (.p-2). Its filter bars (Time & Attendance, Wage Facilitator, Piecework) put six
   filters across from 1200px, and with the side menu open a sixth of the bar is only 153-166px until the window is about 1280px wide:
   too little for two 40px arrows (MOD-450) and a date such as "04 May 2026" (about 110px). 1200-1439px uses the stacked layout at the end
   of the week picker rules (MOD-763); below 1200px the bars' own column classes give each filter more room. */

/* MOD-474: legacy styles.css moves the week selector's label 25px right (.WeekView { left: 25px }, past the previous arrow). Below
   1200px that label takes its column's whole width, so where the filters stack (one per row) it ran 25px past the bar and the page
   scrolled sideways by a pixel. */
@media (max-width: 1199.98px) {
  .form-group.row > label.WeekView,
  .form-group.row > span.detail-caption.WeekView {
    max-width: calc(100% - 25px);
  }
}

/* MOD-476: two things below the filter bars are wider than a 320px window leaves them (about 160-180px inside the page's panels), and
   each made the whole page scroll sideways. Below 375px only; from 375px nothing changes.
   - A grid toolbar's search box (240px, _TableGrid.cshtml): no wider than the toolbar.
   - The attendance lists' day buttons ("Wednesday - 16 September (0)" on one line, up to 239px): the text may wrap. */
@media (max-width: 374.98px) {
  h1.tablegrid-toolbar-actions > input.form-control {
    max-width: 100%;
  }

  a.btn.weekday, a.btn.ta-rejected-weekday {
    max-width: 100%;
    white-space: normal;
  }
}

/* MOD-601, restyled by MOD-681: the Unapproved and Overheads tabs' seven day cards (_UnapprovedAttendance.cshtml). One card per day, seven equal
   columns across the full width (fewer per row on a narrow window, never sideways scroll): white, grey border, 8px corners, the day name at 12px, the date
   ("5 Oct") at 20px bold and a status tag below ("N pending", "All done", "No data" or "No matches"). The selected card (the .disabled class the scripts select on, kept) is secondary blue (--adagin-teal) with
   white text, the same as the selected tab. The tag is the one span of the card (TimeAndAttendance.js setDayPillCount writes it and swaps ta-day-review /
   ta-day-empty): "N pending" is --adagin-orange and "All done" is --adagin-green (both with navy text, 5.6:1 each), "No data" and "No matches" the grey of a count pill (9.3:1); never white. */
.ta-day-pills {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--adagin-space-2);
  margin-top: var(--adagin-space-2);
}

/* Narrower than 900px the cards make rows of four, each as wide as a quarter of the list, but never narrower than 10.5rem (168px): the weekday (about 30px), the 8px gap and the widest tag on one line
   ("1,299 pending") plus the card's padding and border. Four fixed columns left a card about 75px in a 375px window, and the one-line tags ("No matches")
   ran into the next card. So a list too narrow for four such cards has three, two or one to a row; one narrower than a single card has one column, and
   there the text may wrap (the rule after the tag's) rather than run out of the card. The 1px keeps four in a row against rounding. */
@media (max-width: 899.98px) {
  .ta-day-pills {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(10.5rem, calc((100% - 3 * var(--adagin-space-2)) / 4 - 1px))), 1fr));
  }
}

/* MOD-746 (P4-1): the day card standard, one grid per card: row 1 the weekday (12px / 18px, 500) left and the status tag (the pill) right, row 2 the
   date (20px / 28px, 600, Onest). About 150 x 64px (8px padding, 1px border, 18 + 28px of text). One flex-wrap line, never clipped: the weekday (flex 1 0 auto) never shrinks below its text and the pill (its word always shows in full, no ellipsis) wraps onto its own line, right-aligned, when it cannot sit beside the weekday (very large counts, a narrow window); the card is then taller than 64px. At 1,366px a card is about 142px (1,047px content less 6 x 8px gaps, / 7), 124px inside: 'Wed' about 25px + 8px gap + '123 pending' about 82px = 115px fits; '1,299 pending' about 93px = 126px wraps. The markup keeps its order (name, date, tag) so the tab order
   and every hook TimeAndAttendance.js reads are untouched; .ta-day-label is display: contents so the name and the date are the card's own grid items. Normal
   state is a secondary button (white, 1px --adagin-teal outline, 8px corners), hover --adagin-btn-tint-hover, keyboard focus a 2px --adagin-teal ring. The
   Rejected Records tab's cards (a.ta-rejected-weekday, not a.weekday: the Unapproved day hook must not fire for them) are the same card. */
a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--adagin-space-2);
  box-sizing: border-box;
  min-width: 0;
  min-height: 64px;
  margin: 0;
  padding: var(--adagin-space-2);
  white-space: nowrap;
  line-height: 18px;
  font-weight: 500;
  text-align: left;
  border: var(--adagin-outline-width) solid var(--adagin-outline);
  border-radius: var(--adagin-radius-block);
  background-color: var(--adagin-white);
  color: var(--adagin-dark-navy);
  opacity: 1;
}

a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill:hover {
  background-color: var(--adagin-btn-tint-hover);
  border-color: var(--adagin-outline);
  color: var(--adagin-dark-navy);
}

a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill:focus-visible {
  outline: 2px solid var(--adagin-teal);
  outline-offset: 2px;
  box-shadow: none;
}

a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill.ta-day-selected {
  background-color: var(--adagin-outline);
  border-color: var(--adagin-outline);
  color: var(--adagin-white);
}

a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill .ta-day-label {
  display: contents;
  font-weight: 500;
}

a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill .ta-day-name {
  flex: 1 0 auto;
  order: 1;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill .ta-day-date {
  flex: 0 0 100%;
  order: 3;
  font-family: 'Onest', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill .ta-day-tag {
  flex: 0 0 auto;
  order: 2;
  margin-left: auto;
  max-width: 100%;
  padding: 0 6px;
  border-radius: var(--adagin-radius-pill);
  background-color: var(--ta-tab-count-grey-bg);
  color: var(--ta-tab-count-grey-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill.ta-day-review .ta-day-tag {
  background-color: var(--adagin-orange);
  color: var(--adagin-dark-navy);
}

a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill.ta-day-done .ta-day-tag {
  background-color: var(--adagin-green);
  color: var(--adagin-dark-navy);
}

@media (max-width: 899.98px) {
  a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill {
    white-space: normal;
  }

  a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill .ta-day-tag {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Cards (Bootstrap .card and the config hub's own cards) */
.card {
  border-color: var(--adagin-outline);
  border-radius: var(--adagin-radius-card);
}

/* MOD-756: the KPI / graph / piecework / bin cards are marked class="card border-dark", and Bootstrap's ".border-dark" is "border-color: #343a40 !important".
   Only an !important rule of higher specificity beats it, so this one is scoped to .card.border-dark (0,2,0) rather than being a blanket override. */
.card.border-dark {
  border-color: var(--adagin-outline) !important;
}

/* MOD-756 concentric corners: a header / footer sits flush inside the card's 1px outline, so it rounds at the card's radius minus the outline
   (Bootstrap's .card-header:first-child / .card-footer:last-child are (0,2,0); these are (0,3,0)). */
.card > .card-header:first-child {
  border-radius: calc(var(--adagin-radius-card) - var(--adagin-outline-width)) calc(var(--adagin-radius-card) - var(--adagin-outline-width)) 0 0;
}

.card > .card-footer:last-child {
  border-radius: 0 0 calc(var(--adagin-radius-card) - var(--adagin-outline-width)) calc(var(--adagin-radius-card) - var(--adagin-outline-width));
}

/* Modals: legacy Light-Green header/footer with white text is 2.1:1; Dark Navy header, plain footer. */
.modal-content {
  border: 0;
  border-radius: var(--adagin-radius-modal);
  box-shadow: var(--adagin-shadow-raised);
}

/* Corners rounded on the header/footer themselves, not by clipping .modal-content: date pickers inside a modal open outside it.
   MOD-756: .modal-content has no border, so the flush header and footer take its radius unchanged (concentric rule, gap 0). */
.modal-header {
  background-color: var(--adagin-dark-navy);
  color: var(--adagin-white);
  border-top-left-radius: var(--adagin-radius-modal);
  border-top-right-radius: var(--adagin-radius-modal);
}

.modal-footer {
  background-color: var(--adagin-off-white);
  color: var(--adagin-black);
  border-bottom-left-radius: var(--adagin-radius-modal);
  border-bottom-right-radius: var(--adagin-radius-modal);
}

/* MOD-305: acumen.showDetail(el, evt, width) sizes its dialog with an inline "width:<n>px;position:absolute;transform:translate(-30%,5%)"
   on .modal-content-wrap, inside Bootstrap's 500px .modal-dialog centred on the viewport: a 1024px dialog at 1440 starts at 155px, under
   the fixed nav (z-index 99999). Centre it in the content area instead: the area right of the nav (217px open, 47px collapsed), with the
   content gutter each side, and never wider than that area. */
#ajaxModal .modal-dialog:has(> .modal-content-wrap[style*="width:"]) {
  display: flex;
  justify-content: center;
  max-width: none;
  margin: 1.75rem var(--adagin-space-4) 1.75rem calc(217px + var(--adagin-space-4));
}

body:has(nav.left-nav:not(.open)) #ajaxModal .modal-dialog:has(> .modal-content-wrap[style*="width:"]) {
  margin-left: calc(47px + var(--adagin-space-4));
}

#ajaxModal .modal-content-wrap[style*="width:"] {
  position: relative !important;
  transform: none !important;
  max-width: 100%;
}

/* MOD-473: acumen.min.js no longer forces a dialog's .modal-content to 800px on a screen narrower than 1200px (legacy
   Portal/Scripts/acumen.js:426, 532, 730: an inline width, so no rule here could answer it). It was a tablet width: it widened the
   default 500px dialog and narrowed the wide ones, whatever the window had room for, so on a phone the dialog was 800px in a 375px
   window that cannot be panned, and on a 1024px tablet it ran off the right edge. A dialog's width now comes from the rules here at
   every screen size: one opened with a width is bound to the content area by the MOD-305 rules above; one opened without a width
   is Bootstrap's 500px dialog centred on the window, as before, until the window is too narrow for that: then it stays clear of
   the nav (217px open, 47px collapsed, fixed above the dialog) and of the window's right edge, and only then gets narrower. */
#ajaxModal .modal-dialog:not(:has(> .modal-content-wrap[style*="width:"])) {
  --adagin-dialog-left: max(calc(217px + var(--adagin-space-4)), calc((100% - 500px) / 2));
  margin-left: var(--adagin-dialog-left);
  margin-right: max(var(--adagin-space-4), calc(100% - 500px - var(--adagin-dialog-left)));
}

body:has(nav.left-nav:not(.open)) #ajaxModal .modal-dialog:not(:has(> .modal-content-wrap[style*="width:"])) {
  --adagin-dialog-left: max(calc(47px + var(--adagin-space-4)), calc((100% - 500px) / 2));
}

/* MOD-660: the GT1 Configuration Add form (_AdvancedSettingsLayout, opened without a width, so Bootstrap's 500px dialog) is two columns, the
   settings and the GT-1 picture, and its labels are col-xl-3 of the settings column: at 500px they wrapped a word a line and the dropdowns
   shrank to a sliver. The dialog is the content-area width up to 1024px (the same box as a dialog opened with a width, MOD-305); keyed on the
   form, not on the Add button, because acumen.enableEdit() rebinds every .modal-viewmodel button without a width once a dialog has opened.
   The Edit page is not in a .modal and keeps the layout MOD-533 gave it. */
#ajaxModal .modal-dialog:not(:has(> .modal-content-wrap[style*="width:"])):has(.gt1-settings-row) {
  display: flex;
  justify-content: center;
  max-width: none;
  margin-left: calc(217px + var(--adagin-space-4));
  margin-right: var(--adagin-space-4);
}

body:has(nav.left-nav:not(.open)) #ajaxModal .modal-dialog:not(:has(> .modal-content-wrap[style*="width:"])):has(.gt1-settings-row) {
  margin-left: calc(47px + var(--adagin-space-4));
}

#ajaxModal .modal-dialog:has(.gt1-settings-row) > .modal-content-wrap {
  width: 1024px;
  max-width: 100%;
}

/* In the dialog: settings two thirds, picture one third; the label 40% of the settings column on one line, the control the other 60%,
   at every window width (Bootstrap's col-xl-* only apply from 1200px). */
.modal .gt1-settings-row > .gt1-settings-fields {
  flex: 0 0 66.667%;
  max-width: 66.667%;
}

.modal .gt1-settings-row > .gt1-settings-image {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

.modal .gt1-settings-fields .form-group.row > label.col-xl-3,
.modal .gt1-settings-fields .form-group.row > span.detail-caption.col-xl-3 {
  flex: 0 0 40%;
  max-width: 40%;
}

.modal .gt1-settings-fields .form-group.row > div.col-xl-9 {
  flex: 0 0 60%;
  max-width: 60%;
}

/* Below 768px the picture is hidden (d-none d-md-block), so the settings column, each label and each control take the full row. */
@media (max-width: 767.98px) {
  .modal .gt1-settings-row > .gt1-settings-fields,
  .modal .gt1-settings-fields .form-group.row > label.col-xl-3,
  .modal .gt1-settings-fields .form-group.row > span.detail-caption.col-xl-3,
  .modal .gt1-settings-fields .form-group.row > div.col-xl-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* The dropdowns' name, clear icon and arrow in one row inside the box (as the report parameter form, section 13): the name takes what is
   left and ends in "...", so the x and the arrow no longer sit over the text or outside the control. */
.gt1-settings-fields .searchselect {
  width: 100%;
}

.gt1-settings-fields .searchselect > .dropdown-toggle {
  display: flex;
  align-items: center;
  width: 100%;
}

.gt1-settings-fields .searchselect > .dropdown-toggle > span {
  flex: 1 1 auto;
  min-width: 0;
  float: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.gt1-settings-fields .searchselect > .dropdown-toggle > .clearinput-icon {
  flex: 0 0 auto;
  padding: 0 8px;
}

.gt1-settings-fields .searchselect > .dropdown-toggle::after {
  flex: 0 0 auto;
}

/* MOD-473: the two-column dialog forms (.row.w-100 of two .col-6: Time & Attendance Bulk Add, Reprocess, Bulk Query Update, Employee
   archive reason, Farm Area add) kept two columns at every width: about 100px a field on a phone, too narrow to show a date. Below
   768px each cell takes the row, in the order of the markup; the divider between the two columns goes with them. */
@media (max-width: 767.98px) {
  .modal .row.w-100 > .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .modal .row.w-100 > .col-6.border-left {
    border-left: 0 !important;
  }
}

/* MOD-305: a multi-select CheckList (_EditControl.cshtml) keeps legacy's empty x-editable anchor (data-type="checklist") beside its
   select2; styled .form-control it drew an empty box above the picker and pushed it below its label. The select2 is the control. */
dd > a.editable[data-type="checklist"]:empty {
  display: none;
}

/* Config hub (Config/ConfigHub.Portal.cshtml): the three header cards, Quick Links and the link groups are one card style on one
   grid, cards in a row stretch to the same height. */
#container-view .card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--adagin-space-4);
  margin-bottom: var(--adagin-space-4);
}

#container-view .config-card,
#container-view .config-quick-links,
#container-view .simple-group-list {
  width: auto;
  margin: 0;
  padding: var(--adagin-space-5);
  background: var(--adagin-white);
  border: var(--adagin-outline-width) solid var(--adagin-outline);
  border-radius: var(--adagin-radius-card);
  box-shadow: var(--adagin-shadow);
  opacity: 1;
  float: none;
  position: static;
}

#container-view .config-card {
  display: flex;
  align-items: center;
  gap: var(--adagin-space-4);
}

#container-view .config-card:hover {
  border-color: var(--adagin-light-teal);
}

#container-view .config-card > img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: var(--adagin-radius-block);
}

#container-view .config-card .text-container {
  flex: 1 1 auto;
  min-width: 0;
}

#container-view .config-card-title,
#container-view .config-quick-links h5,
#container-view .simple-group-list > span {
  margin: 0 0 var(--adagin-space-1);
  font-family: 'Onest', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--adagin-dark-navy);
}

#container-view .link-container {
  align-items: center;
  gap: var(--adagin-space-3);
}

#container-view .config-card-description {
  font-size: 14px;
  line-height: 1.4;
  color: var(--adagin-text-muted);
}

#container-view .fa-arrow-circle-right {
  font-size: 20px !important;
  color: var(--adagin-green);
}

#container-view .config-quick-links {
  grid-column: 1 / -1;
}

#container-view .config-quick-links ul,
#container-view .simple-group-list ul {
  margin: var(--adagin-space-2) 0 0;
  padding: 0;
  list-style: none;
}

#container-view .config-quick-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--adagin-space-2) var(--adagin-space-5);
}

#container-view .config-quick-links ul a {
  position: static !important;
}

#container-view .simple-group-list ul li {
  list-style: none;
  margin: 0;
  padding: var(--adagin-space-1) 0;
}

#container-view .config-quick-links ul a,
#container-view .simple-group-list ul li a {
  font-size: 14px;
  color: var(--adagin-teal);
  text-decoration: none;
}

#container-view .config-quick-links ul a:hover,
#container-view .simple-group-list ul li a:hover {
  color: var(--adagin-dark-navy);
  text-decoration: underline;
}

#container-view .content-section-dark {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--adagin-space-4);
  margin-top: var(--adagin-space-2);
}

#container-view .simple-group-list > span {
  display: block;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* Login (Account/Login.cshtml via _LoginLayout): the form centred in the left half, the photo the right half. */
.login .login-inner {
  width: 50%;
  padding: var(--adagin-space-6);
}

.login .login-inner .container-fluid {
  width: 100%;
  max-width: 380px;
  margin: 0;
  padding: 0;
}

.login .login-inner .img-fluid {
  display: block;
  width: 220px;
  margin: 0 auto var(--adagin-space-5);
  padding: 0;
}

.login .login-inner .col.text-left {
  padding: 0;
}

.login .login-inner hr {
  display: none;
}

.login .login-inner label {
  color: var(--adagin-navy);
  font-weight: var(--adagin-label-font-weight); /* MOD-756: the form label weight */
}

.login .login-inner .form-control {
  height: 44px;
  border: 1px solid var(--adagin-grey);
  border-radius: var(--adagin-radius-input);
}

.login .login-inner .form-control:focus {
  border-color: var(--adagin-teal);
}

.login .login-inner .adagin-btn[type="submit"] {
  margin-top: var(--adagin-space-2); /* MOD-452 part 2: the shared md button; the old 44px override is gone */
}

.login .login-inner .forgot-password > a {
  color: var(--adagin-teal);
  font-weight: 500;
}

/* MOD-357: SVG logo -- max-width so it never stretches past the form column; height follows the viewBox. */
.login .login-inner .login-logo {
  max-width: 100%;
  height: auto;
}

.login .login-inner .login-consent,
.login .login-inner .login-version {
  margin: var(--adagin-space-4) 0 0;
  font-size: 12px;
  color: #5f6670;
  text-align: center;
}

.login .login-inner .login-consent a {
  color: var(--adagin-teal);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
}

.login .login-inner .login-version {
  margin-top: var(--adagin-space-2);
}

.portal-env-tag {
  display: inline-block;
  margin-right: var(--adagin-space-1);
  padding: 1px var(--adagin-space-2);
  border-radius: var(--adagin-radius-pill);
  font-size: var(--adagin-font-size-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.portal-env-tag--prod {
  background: var(--adagin-light-grey);
  color: #5f6670;
}

.portal-env-tag--nonprod {
  background: var(--adagin-orange);
  color: var(--adagin-white);
}

@media (max-width: 1024px) {
  .login .login-inner {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 11. Sticky list stacks with a boxed table (MOD-327): Time & Attendance and Wage Facilitator (.adagin-sticky-stack)
 *     The toolbar wraps instead of scrolling sideways; T&A's day bar sticks under the frozen top bar (MOD-605). _Layout.cshtml measures the real
 *     heights into --adagin-ta-menu-h (0 for a toolbar that is not sticky) and --adagin-date-header-h. The list table sits in its own box
 *     (.adagin-table-scroll), so a wide week never widens the page. Columns take their natural width (the views' legacy 120px column minimum
 *     made the T&A table 1306px and the Wage table 2190px).
 *     MOD-753 replaces the box's vertical scroll: ONE vertical scroller, the page. The frozen stack is header, the T&A bar, the day cards, then the
 *     action pane (.ta-menu, sticky again, under the day cards: top adds --adagin-date-header-h), then the table's header row. The box scrolls
 *     sideways only (no max-height, so it never has a vertical overflow and the wheel scrolls the page). The header row stays inside the box, so it
 *     moves sideways with the body natively; its window-level stick is the cells' own sticky `top` (--adagin-thead-top on the thead), which
 *     _Layout.cshtml sets from the box's cached page position on a passive, rAF-throttled scroll listener (no layout read per frame). A sticky
 *     offset, unlike a transform, keeps the cells the containing block of nothing fixed (the sort menu stays window-placed) and stops at the
 *     table's end by itself. The pager follows the box (end of the table); .ta-screen keeps a gutter under it for the back-to-top button.
 * ------------------------------------------------------------------------------------------- */
.adagin-sticky-stack .ta-menu {
  position: sticky;
  top: calc(var(--adagin-header-h) + var(--adagin-bar-h, 0px) + var(--adagin-date-header-h, 0px)); /* MOD-753: frozen under the day cards */
  z-index: 99;
  flex-wrap: wrap;
  row-gap: var(--adagin-space-2);
  overflow-x: visible;
}

/* max-width: TimeAndAttendance.js's setTabListener widens the day bar to the table's width + 20px inline on a tab click (legacy
   stretched it over the page-wide table); the table is boxed now, so the bar stays within the page. */
.adagin-sticky-stack .date-header {
  top: calc(var(--adagin-header-h) + var(--adagin-bar-h, 0px)); /* MOD-605: directly under the frozen bar; the toolbar is not in the stack */
  max-width: 100%;
}

/* MOD-829: a window too short for the frozen stack plus a usable band of rows (175% zoom on a 1440x900 window: 514px for a 606px stack) leaves no
   room for a single row. _Layout.cshtml measures that and sets .adagin-unpinned on the stack; the whole stack then scrolls away with the page. */
.adagin-sticky-stack.adagin-unpinned :is(.ta-bar-wrap, .date-header, .ta-menu) {
  position: static;
}

/* MOD-780: unpinned and phone width keep the bar wrapper in its own z-index 110 layer (relative, not static), so the Filters panel and the calendar stay above the backdrop. */
.adagin-sticky-stack.adagin-unpinned .ta-bar-wrap {
  position: relative;
  top: auto; /* the frozen rule's top would otherwise shift a relative wrapper down */
}

.adagin-sticky-stack.adagin-unpinned .adagin-table-scroll > table > thead {
  animation: none;
  --adagin-thead-top: 0px !important; /* beats the scroll listener's inline value where animation-timeline is missing */
}

.adagin-sticky-stack.adagin-unpinned .adagin-table-scroll > table > thead th:not(.ta-name-cell):not(.ta-dept-head) {
  position: static;
}

/* MOD-753: sideways only. overflow-x: auto makes the box a scroll container in both axes, but with no max-height its content never overflows it
   vertically, so it never scrolls up or down and a wheel over it scrolls the page (page first, then nothing else: ONE vertical scroller).
   MOD-829 keeps that order. A box that scrolled vertically (the first MOD-829 try) put the wheel on the table first, pinned the header to the
   box instead of the frozen stack, and collapsed to no height at 175% zoom, so the box has no height limit. */
.adagin-sticky-stack .adagin-table-scroll {
  overflow: auto;
  max-height: none;
}

/* The header row cannot use plain sticky: the box (a scroll container for the sideways scroll) is the cells' sticky scrollport and never scrolls
   vertically. Its window-level stick is the cells' sticky `top`, --adagin-thead-top on the thead: how far below the box's top the row must sit to
   be under the frozen stack (0 while the box's top is still below the stack, capped at the table's end). The property is registered so it can be
   animated. Where the browser has scroll-driven animations the value follows the page's scroll in the same frame as the scroll (below), so the
   row never lags or jumps; _Layout.cshtml writes it from a scroll listener only where they are missing. */
@property --adagin-thead-top {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@keyframes adagin-thead-stick {
  from { --adagin-thead-top: 0px; }
  to { --adagin-thead-top: var(--adagin-thead-max, 0px); } /* 1px per scroll px over the measured travel (table height minus header row) set by _Layout.cshtml */
}

@supports (animation-timeline: scroll()) {
  /* --adagin-thead-start: the page scroll offset (px) at which the box's top reaches the stack. */
  .adagin-sticky-stack .adagin-table-scroll > table > thead {
    animation-name: adagin-thead-stick;
    animation-duration: 1s; /* ignored by a scroll timeline, but required by browsers that read the shorthand */
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
    animation-range-start: var(--adagin-thead-start, 0px);
    animation-range-end: calc(var(--adagin-thead-start, 0px) + var(--adagin-thead-max, 0px));
  }
}

/* Sticky here, not only in the views: the views make only some list classes sticky (Wage's is-confirmable, not a plain approved
   list), and a boxed header that scrolls away with its rows would leave a long list without column titles. */
.adagin-sticky-stack .adagin-table-scroll > table > thead th {
  position: sticky;
  z-index: 99;
  top: var(--adagin-thead-top, 0px) !important;
  min-width: 0 !important;
}

/* MOD-753: the back-to-top button (.adagin-back-to-top: fixed 1.5rem above the window's bottom, 2.5rem tall, at the right; MOD-833) would sit on the pager's last button
   (Next Page / Download Print View, at the table's right edge) once the page is scrolled to its end. The page keeps a gutter that tall under the
   pager, so at the end the button is in the gutter, not on a button. */
.adagin-sticky-stack.ta-screen {
  padding-bottom: calc(1.5rem + 2.5rem + var(--adagin-space-2)); /* MOD-833: .adagin-back-to-top's bottom offset + the lg icon button's height + a step */
}

/* MOD-753: Wage Facilitator, the same model on the standard grid (_WageFacilitatorGrid, the tablegrid plugin). The plugin already draws the
   column headers as their own strips outside the body's sideways scroller and moves them with it (scrollLeft synced from the body's scroll), and
   sets no height, so the page is the only vertical scroller. The grid's toolbar (Search) is frozen under the header like T&A's bar, and the
   header strips (columns, the select column's, the Actions column's) under it at window level: _Layout.cshtml measures the toolbar into
   --adagin-wf-toolbar-h. The pager stays at the end of the grid (not the MOD-396 sticky footer); the action bar (Confirm / Mark Paid / Unpaid and Download) sits above the grid, so no button is under it. */
.adagin-sticky-stack .wf-grid > .tab-header {
  position: sticky;
  top: var(--adagin-header-h);
  z-index: 99;
  background: var(--adagin-white, #fff);
}

.adagin-sticky-stack .wf-grid .tablegrid :is(.tablegrid-header, .tablegrid-multiselect-header, .tablegrid-action-header) {
  position: sticky;
  top: calc(var(--adagin-header-h) + var(--adagin-wf-toolbar-h, 0px));
  z-index: 98;
}

/* The Wage day headers' dates ("28-09-2026") would otherwise break at their hyphens once the column is no wider than it needs. */
.adagin-sticky-stack .adagin-table-scroll > table > thead th span {
  white-space: nowrap;
}

/* MOD-609: the sort control in a T&A list's Employee header (ItemTemplates/_AttendanceSortMenu.cshtml, bindSortMenu in TimeAndAttendance.js).
   The header cell is sticky (z-index 99) inside .adagin-table-scroll (overflow: auto), which clips or scrolls an absolutely placed menu, so
   the menu is position: fixed: it is placed from the button's rectangle when it opens (top / left inline) and is not clipped by the box. No
   ancestor up to the page sets transform, filter or contain, so fixed is relative to the window. It sits below the header row, over the rows,
   inside the header cell's own stacking context (z-index 99), above the unpositioned rows. A scroll or resize closes it. */
.ta-sort-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.ta-sort-btn:focus-visible,
.ta-sort-item:focus-visible {
  outline: 2px solid var(--adagin-teal);
  outline-offset: 2px;
}

.ta-sort-current {
  white-space: nowrap;
}

.ta-sort-dir {
  font-size: var(--adagin-font-size-caption);
}

.ta-sort-menu {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  margin: 0;
  padding: var(--adagin-space-2) 0;
  background: var(--adagin-white);
  color: var(--adagin-black);
  border: var(--adagin-outline-width) solid var(--adagin-outline);
  border-radius: var(--adagin-radius-menu);
  box-shadow: var(--adagin-shadow-raised);
  text-align: left;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  white-space: nowrap;
}

/* MOD-609: every header cell is sticky with the same z-index, so each is its own stacking context and a later cell paints over an earlier
   one. The open menu belongs to the Employee cell and overlaps the cell to its right (which cut off the page-only note), so that cell is
   lifted above its siblings while its menu is open. */
table > thead th:has(.ta-sort-btn[aria-expanded="true"]) {
  z-index: 100;
}

.ta-sort-menu[hidden] {
  display: none;
}

.ta-sort-note {
  margin: 0;
  padding: 0 var(--adagin-space-3) var(--adagin-space-2);
  border-bottom: 1px solid var(--adagin-divider);
  font-size: 12px;
  color: var(--adagin-text-muted);
}

.ta-sort-item {
  display: block;
  width: 100%;
  padding: 6px var(--adagin-space-3) 6px 28px;
  position: relative;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.ta-sort-item:hover,
.ta-sort-item:focus {
  background: #e6e9f2;
}

.ta-sort-item[aria-checked="true"] {
  font-weight: 600;
}

.ta-sort-item[aria-checked="true"]::before {
  content: "\2713";
  position: absolute;
  left: 10px;
}

/* ---------------------------------------------------------------------------------------------
 * 12. Dialog forms (MOD-327)
 *     _CreateNewEntity.cshtml splits a form's fields into two .col-sm-6 halves directly inside the <form>, which is not a flex row,
 *     so the halves stack, each half the dialog wide: in the 500px dialog every label got 25% of 234px, 29px of text ("Usernam",
 *     "Passwor"). The halves take the dialog's full width, and the label column a third of it (legacy col-xl-3 / col-xl-9 was
 *     sized for full-page forms), so a label wraps between words instead of running under its control.
 * ------------------------------------------------------------------------------------------- */
.modal form > .col-sm-6 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .modal .form-group.row > .col-xl-3.col-form-label {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  .modal .form-group.row > .col-xl-9 {
    flex: 0 0 66.667%;
    max-width: 66.667%;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 13. Report parameter form (MOD-336)
 *     _ReportParameterForm.cshtml (the Reports list's Print dialog and the GetReport page) puts its two .info-half columns in a
 *     .pop-up-window-content that is a flex item of a .row with no width, so it shrank to about two thirds of the dialog and the
 *     halves stacked: each lookup got ~295px. The content takes the row's width and lays the halves side by side.
 *     The searchselect's button set the selected name in a float with nowrap, so a long name ran over the clear icon and pushed the
 *     arrow out of the box. The button lays out name, clear icon and arrow in a row; the name takes what is left and ends in "...".
 * ------------------------------------------------------------------------------------------- */
#report-parameter-form .pop-up-window-content {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  max-width: 100%;
}

#report-parameter-form .searchselect > .dropdown-toggle {
  display: flex;
  align-items: center;
}

#report-parameter-form .searchselect > .dropdown-toggle > span {
  flex: 1 1 auto;
  min-width: 0;
  float: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

#report-parameter-form .searchselect > .dropdown-toggle > .clearinput-icon {
  flex: 0 0 auto;
  padding: 0 8px;
}

#report-parameter-form .searchselect > .dropdown-toggle::after {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------------------------
 * MOD-361: Sync Management status (Status column, status filter, Update tag, nav health dot).
 * Colour is never the only signal: every dot sits next to its label (or carries an aria-label).
 * ------------------------------------------------------------------------------------------- */
.sync-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--adagin-space-1);
  border-radius: 50%;
  vertical-align: middle;
}

.sync-dot--red { background: #D93025; }
.sync-dot--amber { background: #F2A900; }
.sync-dot--green { background: #2E9E44; }
.sync-dot--inactive { background: var(--adagin-grey); }

.sync-status { white-space: nowrap; }

/* MOD-712: secondary line under the name (email, group code, allocation); was --adagin-grey (1.7:1 on white) */
.sync-username { color: var(--adagin-text-muted); }

.sync-version-outdated {
  color: #B26A00;
  font-weight: 700;
}

.sync-update-pill {
  display: inline-block;
  padding: 0 var(--adagin-space-2);
  border-radius: var(--adagin-radius-pill);
  background: #F2A900;
  color: var(--adagin-dark-navy);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
}

/* ---------------------------------------------------------------------------------------------
 * 11. Profile-card menu icons (MOD-368; MOD-788 moved them to the Material sprite, the user menu rules live next to the nav's in section 6)
 *    Legacy supplied these via CSS content:url() over PNGs that were never ported to Portal.Net10
 *    (Portal/Content/styles.css:1012-1033 and the PNG files in Portal/Content/images); Font Awesome glyphs avoid
 *    adding binary assets. Sized/coloured to match the row's own link colour (inline #5D7885 below).
 * ------------------------------------------------------------------------------------------- */
/* MOD-365: the icon itself is the badge's anchor, sized to its glyph (not .icon-container, which is wider and left-aligns the
 * icon -- anchoring to it drifted the badge off the icon and over the "Sync Management" label, MOD-361's QA defect). */
.sync-nav-icon { position: relative; display: inline-block; }

/* ...and the glyph must stay in flow: styles.css floats the open sidebar's `.nav-item a i` left, which took the icon out of this
 * wrapper and collapsed it to 0 x 0 at the icon's left edge, so `right: -8px` landed the badge over the icon's TOP-LEFT (the
 * MOD-365 retest defect). Un-floated, the wrapper is exactly the glyph's box and the badge sits on its top-right corner, open or collapsed.
 * Selector outranks `.left-nav.open .nav-item a i`. */
.left-nav .nav-item a .sync-nav-icon > i { float: none; }

.sync-nav-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid var(--adagin-dark-navy); /* crisp edge against the sidebar's dark background */
  box-shadow: 0 0 0 1px var(--adagin-white);
  border-radius: var(--adagin-radius-pill);
  background: #D93025;
  color: var(--adagin-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}

.sync-nav-badge--amber {
  background: #F2A900;
  color: var(--adagin-dark-navy);
}

/* MOD-365: the Sync Status column's icon (icon + text, not a pill or dot; colour is never the only signal -- the label
 * always sits beside it). */
.sync-status-icon { margin-right: var(--adagin-space-1); vertical-align: middle; }

.sync-status-icon--red { color: #D93025; }
.sync-status-icon--amber { color: #F2A900; }
.sync-status-icon--green { color: #2E9E44; }
.sync-status-icon--stale,
.sync-status-icon--never,
.sync-status-icon--inactive { color: var(--adagin-text-muted); } /* MOD-712: was --adagin-grey, 1.7:1 on white; ADAS-506: Stale / Never synced / Inactive share the grey, told apart by icon and label */

/* ---------------------------------------------------------------------------------------------
 * 14. Alert (MOD-436): the one popup message, built by wwwroot/js/adagin-alert.js
 *     A white card with the category's accent on its left edge and its icon; the text stays Dark Navy on white in every
 *     category, so the category is told by accent, icon and title together, never by colour alone. Only colours the theme
 *     already has: Info is Teal, Success is Green, Warning is the Orange accent (edge and icon only, as section 1 requires of
 *     it), Error is the red the sync status already uses (#D93025; the palette has no red token). The ticket's tinted
 *     backgrounds have no token and are not used.
 * ------------------------------------------------------------------------------------------- */
.adagin-alert-layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000; /* above the left nav (99999) and any Bootstrap modal */
  background: var(--adagin-dark-navy);
  opacity: 0.4;
}

.adagin-alert {
  --adagin-alert-accent: var(--adagin-teal);
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100001;
  box-sizing: border-box;
  width: 560px;
  max-width: calc(100% - var(--adagin-space-6));
  max-height: calc(100% - 128px);
  overflow: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: var(--adagin-space-3);
  row-gap: var(--adagin-space-4);
  align-items: start;
  padding: var(--adagin-space-4);
  background: var(--adagin-white);
  color: var(--adagin-dark-navy);
  border: 1px solid var(--adagin-light-grey);
  border-left: 6px solid var(--adagin-alert-accent);
  border-radius: var(--adagin-radius-block);
  box-shadow: var(--adagin-shadow-raised);
  font-size: 14px;
  line-height: 1.5;
}

.adagin-alert--success { --adagin-alert-accent: var(--adagin-green); }
.adagin-alert--warning { --adagin-alert-accent: var(--adagin-orange); }
.adagin-alert--error { --adagin-alert-accent: #D93025; }

/* MOD-438: the inline field hint (AdaginAlert.hint). Warning colours: an orange rule and outline on the field, the text a darker
   orange (#9A4500, 6.5:1 on white; the accent orange alone is 3.3:1, too light for text). jquery.validate's error labels carry it too. */
.adagin-hint {
  margin-top: var(--adagin-space-1, 4px);
  padding-left: var(--adagin-space-2, 8px);
  border-left: 3px solid var(--adagin-orange);
  color: #9A4500;
  font-size: 13px;
  line-height: 1.4;
}
/* main.css: label.error{color:red;font-style:italic;font-weight:bold} out-specifies .adagin-hint, so restate on the label. */
label.error.adagin-hint { color: #9A4500; font-style: normal; font-weight: normal; }
.adagin-field--warning,
.adagin-field--warning:focus { border-color: var(--adagin-orange); outline: 1px solid var(--adagin-orange); }

.adagin-alert__icon {
  color: var(--adagin-alert-accent);
  font-size: 22px;
  line-height: 24px;
}

.adagin-alert__content {
  min-width: 0;
  overflow-wrap: anywhere; /* a long unbroken text wraps inside the card */
}

.adagin-alert__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.adagin-alert__body:not(:empty) {
  margin-top: var(--adagin-space-1);
}

/* Compact: title and text on one row. */
.adagin-alert--inline {
  position: static;
  transform: none;
  z-index: auto;
  width: auto;
  max-width: none;
  max-height: none;
  margin: var(--adagin-space-3) 0;
}

.adagin-alert--compact .adagin-alert__content {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--adagin-space-2);
}

.adagin-alert--compact .adagin-alert__body:not(:empty) {
  margin-top: 0;
  line-height: 24px;
}

/* The close button: an icon with a 44px target, drawn back into the card's padding so the icon lines up with the title. */
.adagin-alert__dismiss {
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;
  padding: 0;
  border: 0;
  border-radius: var(--adagin-radius-block);
  background: transparent;
  color: var(--adagin-text-muted);
  font-size: 16px;
  cursor: pointer;
}

.adagin-alert__dismiss:hover {
  color: var(--adagin-dark-navy);
  background: var(--adagin-off-white);
}

.adagin-alert__dismiss:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(31, 79, 99, 0.5); /* the buttons' Teal focus ring (section 3) */
}

/* Actions: their own row, right-aligned, the secondary button left of the primary. */
.adagin-alert__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--adagin-space-2);
}

.adagin-alert__actions .adagin-btn {
  min-width: var(--adagin-btn-dialog-min-width); /* MOD-452 part 2: the shared md button (32px high, 72px minimum) */
}

/* MOD-443: an Error's technical details (adagin-alert.js). "More details" is in the row of buttons, on its left (it comes last in the
   row's markup, so the buttons keep their order for the keyboard); the panel is above the row. The box has a fixed height and scrolls
   inside itself; its text wraps. Only what the theme has: muted text, the light grey border, off-white, the buttons' Teal focus ring.
   Inside an Error alert the box carries the alert's own red (its left rule); in a dialog or on a result page it is neutral. */
.adagin-details__toggle {
  order: -1;
  margin-right: auto;
  min-height: 44px;
  padding: 0 var(--adagin-space-2);
  margin-left: calc(-1 * var(--adagin-space-2));
  border: 0;
  border-radius: var(--adagin-radius-block);
  background: transparent;
  color: var(--adagin-text-muted);
  font-size: 13px;
  cursor: pointer;
}

.adagin-details__toggle .fa {
  width: 14px;
  margin-right: var(--adagin-space-1);
  font-size: 11px;
}

.adagin-details__toggle:hover { color: var(--adagin-dark-navy); }

.adagin-details__toggle:focus,
.adagin-details__box:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(31, 79, 99, 0.5); /* the buttons' Teal focus ring (section 3) */
}

.adagin-details {
  grid-column: 1 / -1;
  min-width: 0;
}

.adagin-details[hidden] { display: none; }

/* An Error box in the page (a chart that failed to load): the panel comes after the row of buttons in the markup, so the keyboard
   goes from "More details" into the panel; it is still shown above the row. */
.adagin-alert--inline .adagin-alert__actions { order: 1; }

.adagin-details__heading { font-weight: 600; }

.adagin-details__sub {
  color: var(--adagin-text-muted);
  font-size: 13px;
}

.adagin-details__box {
  box-sizing: border-box;
  height: 168px;
  margin-top: var(--adagin-space-2);
  padding: var(--adagin-space-3);
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--adagin-light-grey);
  border-radius: var(--adagin-radius-block);
  background: var(--adagin-off-white);
  color: var(--adagin-dark-navy);
  font-size: 13px;
  line-height: 1.5;
}

.adagin-details--error .adagin-details__box { border-left: 3px solid var(--adagin-alert-accent, #D93025); }

.adagin-details__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--adagin-space-2);
  margin-top: var(--adagin-space-2);
}

.adagin-details__status {
  margin-right: auto;
  color: var(--adagin-text-muted);
  font-size: 13px;
}

/* The text area and link Copy details and Download use for a moment: on the page, out of sight. */
.adagin-details__offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* On a result page: the button first in the markup (the keyboard meets it before the panel it opens), the panel shown above it. */
.adagin-details-page {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--adagin-space-3);
  max-width: 560px;
  margin-top: var(--adagin-space-4);
  font-size: 14px;
}

/* MOD-502 (reverses MOD-445's in-flow calendar): in a modal the picker floats, as on the page and in legacy. MOD-445 made the widget
   static so it pushed the fields and buttons below it down and the dialog grew while it was open; it is Bootstrap's absolute
   .dropdown-menu again, over the dialog's content, and the dialog keeps its size. The plugin places it (widgetPositioning auto): under
   its field, or above it when the window has no room below (measured at 1440, 1024 and 375 px: always inside the window). It may cover the next
   field while open: a date calendar closes on a pick (a date and time one stays for the time), and every picker on Escape or a click
   outside. .modal-content does not clip it (see .modal-header above). */

/* MOD-470: in a modal the widget never leaves its field's column, so never its dialog. The date and time picker is opened side by side
   (acumen.min.js: sideBySide), for which the vendored stylesheet sets width: 38em (608px) from a 768px window, whatever the dialog's
   width: in Bulk Add it ran off the dialog and the screen. Capped to the column; a column narrower than the calendar's own cells
   scrolls the widget sideways instead of clipping it. */
.modal .bs-datepicker ~ .bootstrap-datetimepicker-widget.dropdown-menu,
.modal .bs-datetimepicker ~ .bootstrap-datetimepicker-widget.dropdown-menu,
.modal .bs-timepicker ~ .bootstrap-datetimepicker-widget.dropdown-menu,
.modal .bs-monthpicker ~ .bootstrap-datetimepicker-widget.dropdown-menu {
  max-width: 100%;
  overflow-x: auto;
}
/* MOD-767: the one report date field (acumen.js acumenDateField): the text box with a calendar button inside its right end, the picker's hint
   under it, and the parsed date ("Tue 29 Sep 2026") under that. The box is the dropdowns' 36px / 14px box (MOD-505); the button is that tall too. */
.adagin-date-field {
  position: relative;
}
.adagin-date-field > input.form-control {
  height: 36px;
  font-size: 14px;
  padding: 6px 40px 6px 14px;
}
.adagin-date-field > .adagin-date-open {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--adagin-teal);
  cursor: pointer;
}
.adagin-date-field > .adagin-date-open:focus-visible {
  outline: 2px solid var(--adagin-teal);
  outline-offset: -2px;
}
.adagin-date-echo {
  min-height: 1.25rem;
  font-size: 12px;
  color: var(--adagin-text-muted);
}

/* MOD-676: a report's date parameter (Report/_ReportParameterControl.cshtml) is a dd/mm/yyyy text box with this picker; it has no .bs-datepicker class
   (acumen.min.js would format it as DD MMM YYYY), so it gets the same MOD-470 cap and, like every picker here, no in-flow rule: the widget floats (MOD-502). */
.modal .report-date-display ~ .bootstrap-datetimepicker-widget.dropdown-menu {
  max-width: 100%;
  overflow-x: auto;
}
/* Side by side: the date and the time are Bootstrap col-md-6 halves, split by the window's width, not the dialog's. Here each takes
   half only while both have room for their cells, and otherwise the time goes under the date. The row's negative margins and the
   halves' gutters are dropped (they would overflow the capped widget); the gap keeps the two apart. */
.modal .bs-datetimepicker ~ .bootstrap-datetimepicker-widget.timepicker-sbs > .row {
  margin-left: 0;
  margin-right: 0;
  gap: var(--adagin-space-2);
}
.modal .bs-datetimepicker ~ .bootstrap-datetimepicker-widget.timepicker-sbs > .row > .datepicker,
.modal .bs-datetimepicker ~ .bootstrap-datetimepicker-widget.timepicker-sbs > .row > .timepicker {
  flex: 1 1 15em;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* The picker's column keeps a usable width under a label that takes the whole row: the rule beside the filter bars' week picker rule
   above (MOD-472; first inside .modal only, MOD-470). */

/* ---------------------------------------------------------------------------------------------
 * Sticky grids (MOD-396): opt-in per grid (TableGridViewModelStub.Sticky), first the Sync Management page.
 *     As on Time & Attendance the page scrolls as a whole (no inner scroll box) and the bars stick below the fixed top bar, in order:
 *     the tab bar (.adagin-sticky-tabs, on the page), the grid's toolbar (filter row), then the column headers; the footer (page size
 *     and pager) sticks to the bottom of the window. tablegrid-sticky.js measures the two bars above the headers (they may wrap).
 *     The plugin draws the header and the Actions column header as separate tables from the body; they stay aligned because the
 *     headers only stick: the plugin still sets their widths from the body, and nothing here changes a width.
 * ------------------------------------------------------------------------------------------- */
.adagin-sticky-tabs {
  position: sticky;
  top: var(--adagin-header-h);
  z-index: 104;
  background: var(--adagin-white, #fff);
}

.tab-header.tablegrid-sticky {
  position: sticky;
  top: calc(var(--adagin-header-h) + var(--adagin-sticky-tabs-h, 0px));
  z-index: 103;
  background: var(--adagin-white, #fff);
}

.well-grid.tablegrid-sticky .tablegrid-header,
.well-grid.tablegrid-sticky .tablegrid-action-header {
  position: sticky;
  top: calc(var(--adagin-header-h) + var(--adagin-sticky-tabs-h, 0px) + var(--adagin-sticky-toolbar-h, 0px));
  z-index: 102;
  background: var(--adagin-white, #fff);
}

.well-grid.tablegrid-sticky .tablegrid-footer {
  position: sticky;
  bottom: 0;
  z-index: 102;
  background: var(--adagin-white, #fff);
}

/* ---------------------------------------------------------------------------------------------
 * 15. Row actions and the dialog's loading indicator (MOD-469)
 *     The Time & Attendance row actions (Edit, Split shift, Bulk Edit, Approve, Reject, "Bulk Add", "Refresh") and Bins' Edit are
 *     real buttons, so Tab reaches them and Enter / Space press them. They look as the address-less links they were: no box, the
 *     row's own font, and the colour those links had (Bootstrap's `a:not([href])` inherits; main.css's `.table td a` is black; a
 *     row's inline colour still wins). The other row actions stay links with role="button" (acumen.min.js presses them).
 * ------------------------------------------------------------------------------------------- */
button.edit-detail-record,
button.edit-detail-bin,
button.approval-reject-item,
button.bulk-add-link,
button.bulk-refresh-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.table td button.edit-detail-record,
.table td button.edit-detail-bin,
.table td button.approval-reject-item,
.table td button.bulk-add-link,
.table td button.bulk-refresh-link {
  color: black;
}

/* No ring after a mouse click (the links had none); the keyboard gets one in the text's own colour, white on an exception row. */
button.edit-detail-record:focus,
button.edit-detail-bin:focus,
button.approval-reject-item:focus,
button.bulk-add-link:focus,
button.bulk-refresh-link:focus {
  outline: 0;
}

button.edit-detail-record:focus-visible,
button.edit-detail-bin:focus-visible,
button.approval-reject-item:focus-visible,
button.bulk-add-link:focus-visible,
button.bulk-refresh-link:focus-visible,
[role="button"]:not(button):not([href]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* The empty placeholder a dialog shows in its body from opening until its content arrives (acumen.dialogBusy); the tier 2 veil sits over it. */
.adagin-dialog-loading {
  min-height: 120px;
}

/* ---------------------------------------------------------------------------------------------
 * Shared button (MOD-452 / BDS-1): <adagin-button> (TagHelpers/AdaginButtonTagHelper.cs).
 * Rounded md standard (MOD-494): 32px (2rem) high, 8px radius (25% of height), 13px / 500 label, 14px side padding, 16px icon, 6px
 * icon-to-label gap, 8px between related buttons. Every value is a token below (rem, so buttons follow browser zoom); the size
 * modifiers .adagin-btn--sm / --lg / --xl only re-point the tokens. .adagin-btn--icon is the icon-only square. Variants: default, outline, ghost,
 * danger. States: rest, hover, pressed (:active), focus (:focus-visible), disabled, and data-state="loading" / "success" (set by
 * BDS-2 / BDS-3). Loading and success keep the rest size (min-width is not changed, the spinner takes the icon's 20px slot).
 * The click is the browser's own: it fires on release inside the button and dragging off cancels it.
 * ------------------------------------------------------------------------------------------- */
:root {
  --adagin-btn-danger: #D63A21; /* 4.7:1 with white (MOD-451 D3); the sampled #E8442B is about 4:1 */
  --adagin-btn-success: #4F7F28; /* 4.8:1 with white */
  /* MOD-917: the persistent green of Approve Selected and Bulk Add while rows are selected (green outline, option A): #2F7A24 text and border on white is 5.3:1; the hover and pressed
     tints keep the text above 4.5:1 (hover 4.8:1, pressed 4.6:1). Separate from --adagin-btn-success, the transient filled "done" state. */
  --adagin-btn-selected: #2F7A24;
  --adagin-btn-selected-hover: #EEF6EB;
  --adagin-btn-selected-pressed: #E7F2E3;
  /* State colours, the MOD-452 consolidated table (06/10/2026, proposed values: design to confirm the steps). */
  --adagin-btn-default: var(--adagin-dark-navy); /* MOD-682: one navy for buttons, header and text */
  --adagin-btn-default-hover: #1D2939;
  --adagin-btn-default-pressed: #344054;
  --adagin-btn-neutral-hover: #F2F4F7; /* Outline and Ghost hover */
  --adagin-btn-neutral-pressed: #E4E7EC; /* Outline and Ghost pressed */
  --adagin-btn-tint-hover: #E8EEF8; /* MOD-682: hover of the T&A secondary and tertiary buttons (light navy tint) */
  --adagin-btn-tint-pressed: #D6E1F2; /* MOD-682: pressed and busy of the same */
  --adagin-btn-tint-hover-on-dark: rgba(255, 255, 255, 0.16); /* MOD-682: hover of a T&A tertiary button on the dark-red exception row (white text stays readable) */
  --adagin-btn-tint-pressed-on-dark: rgba(255, 255, 255, 0.24); /* MOD-682: pressed and busy of the same */
  --adagin-btn-disabled-fg-on-dark: rgba(255, 255, 255, 0.72); /* MOD-682: a not-approvable T&A action on the dark-red exception row (5.5:1 on darkred; the muted grey is unreadable there) */
  --adagin-btn-danger-hover: #C2331C;
  --adagin-btn-danger-pressed: #A82D18;
  --adagin-btn-disabled-opacity: 0.4; /* legacy .btn only; the shared button uses the readable disabled colours below (MOD-458) */
  /* MOD-458 (BDS-6): a disabled button stays readable (>= 4.5:1, not the old 0.4 fade that left white on pale grey at about 2.5:1): filled variants
     (Default, Danger) go to a light grey fill with dark grey text, Outline and Ghost keep their surface with grey text and a light border. */
  --adagin-btn-disabled-fill: #E4E7EC;
  --adagin-btn-disabled-fill-fg: #475467;
  --adagin-btn-disabled-plain-fg: #48566F; /* the muted text colour: 7.4:1 on white */
  --adagin-btn-disabled-border: #D0D5DD;
  /* The focus ring: 2px, 2px away from the button, in teal (8.9:1 on white, 8.0:1 on the off-white footer: WCAG 1.4.11 needs 3:1). */
  --adagin-btn-focus-color: var(--adagin-teal);
  /* Size tokens, md. The size modifiers below override the same names on the button itself. */
  --adagin-btn-height: 2rem;
  --adagin-btn-radius: 0.5rem;
  --adagin-btn-font-size: var(--adagin-font-size-body);
  --adagin-btn-font-weight: 500;
  --adagin-btn-pad-x: 0.875rem;
  --adagin-btn-icon-size: 1rem;
  --adagin-btn-icon-gap: 0.375rem;
  --adagin-btn-gap: 0.5rem; /* between related buttons */
  --adagin-btn-dialog-min-width: 4.5rem;
  --adagin-btn-focus-width: 0.125rem;
  --adagin-btn-focus-offset: 0.125rem; /* the ring follows border-radius, so it curves at radius + offset (10px at md) */
}

.adagin-btn--sm { --adagin-btn-height: 1.5rem; --adagin-btn-radius: var(--adagin-radius-block); --adagin-btn-font-size: 0.75rem; --adagin-btn-pad-x: 0.625rem; --adagin-btn-icon-size: 0.875rem; --adagin-btn-icon-gap: 0.25rem; }
.adagin-btn--lg { --adagin-btn-height: 2.5rem; --adagin-btn-radius: var(--adagin-radius-block); --adagin-btn-font-size: 0.875rem; --adagin-btn-pad-x: 1rem; --adagin-btn-icon-size: 1.125rem; }
.adagin-btn--xl { --adagin-btn-height: 3rem; --adagin-btn-radius: var(--adagin-radius-block); --adagin-btn-font-size: 1rem; --adagin-btn-pad-x: 1.25rem; --adagin-btn-icon-size: 1.25rem; --adagin-btn-icon-gap: 0.5rem; }

.adagin-btn {
  --btn-bg: var(--adagin-btn-default);
  --btn-bg-hover: var(--adagin-btn-default-hover);
  --btn-bg-pressed: var(--adagin-btn-default-pressed);
  --btn-fg: var(--adagin-white);
  --btn-border: var(--adagin-btn-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--adagin-btn-icon-gap);
  box-sizing: border-box;
  height: var(--adagin-btn-height);
  padding: 0 var(--adagin-btn-pad-x);
  border: 1px solid var(--btn-border);
  border-radius: var(--adagin-btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: 'Inter', sans-serif;
  font-size: var(--adagin-btn-font-size);
  font-weight: var(--adagin-btn-font-weight);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

/* Icon-only: a square of the button's height, same radius; the markup carries a title (tooltip) and an aria-label. */
.adagin-btn--icon { width: var(--adagin-btn-height); padding: 0; }

/* MOD-833: the shared back-to-top button (Views/Shared/_BackToTop.cshtml, Time & Attendance and Sync Management): the secondary (outline) lg button, 40 px high, radius 8,
   16 px side padding, Inter 14/600, navy text and 1 px navy border on white; hover and pressed are the light navy tints, the focus ring is the button's own 2 px teal ring with a 2 px gap.
   Fixed 24 px from the right and bottom (a sync grid's sticky footer lifts it clear of its pager, 0 elsewhere), above the sticky grid footer (102) and the page chrome.
   .adagin-btn sets display, which beats the hidden attribute, so the hidden state is stated here. The selectors are (0,2,0): they beat the (0,1,0) variant tokens and the global label rules. */
.adagin-btn.adagin-back-to-top {
  --btn-bg-hover: var(--adagin-btn-tint-hover);
  --btn-bg-pressed: var(--adagin-btn-tint-pressed);
  position: fixed;
  right: 1.5rem;
  bottom: calc(1.5rem + var(--adagin-sticky-footer-h, 0px));
  z-index: 120;
  font-weight: 600;
  box-shadow: var(--adagin-shadow-raised);
}
.adagin-btn.adagin-back-to-top[hidden] { display: none; }
/* A phone: icon only, a 40 x 40 square (the aria-label and the title carry the name). */
@media (max-width: 767.98px) {
  .adagin-btn.adagin-back-to-top { width: var(--adagin-btn-height); padding: 0; }
  .adagin-btn.adagin-back-to-top .adagin-btn__label { display: none; }
}
/* The back-to-top click parks focus on the page title (tabindex=-1, never in the Tab order); it is a landing point, not a control, so no ring. */
.adagin-page-shell__title[tabindex="-1"]:focus, .ta-screen[tabindex="-1"]:focus, #container-view[tabindex="-1"]:focus { outline: none; }

/* MOD-452: styles.css forces every <label> to 14px with !important; a label that wears the button keeps the button's own size. */
label.adagin-btn { font-size: var(--adagin-btn-font-size) !important; }

/* MOD-452: a file picker wears the button (a <label class="adagin-btn"> around <input type="file">): the input stays in the page for the browser's picker and form post, visually hidden, and the label shows its keyboard focus. */
.adagin-btn:has(input[type="file"]) { position: relative; }
.adagin-btn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.adagin-btn:has(input[type="file"]:focus-visible) { outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color); outline-offset: var(--adagin-btn-focus-offset); }

/* A close (X) in a dark popup header: the ghost button reads white on the navy, with a light wash for hover and pressed. */
.modal-header .adagin-btn--ghost { --btn-fg: var(--adagin-white); --btn-bg-hover: rgba(255, 255, 255, 0.15); --btn-bg-pressed: rgba(255, 255, 255, 0.25); }

/* An href renders as <a class="adagin-btn"> (Download Template, Download PDF, Cancel and sign out): same look, no link colour or underline. */
.adagin-btn:is(a), .adagin-btn:is(a):hover, .adagin-btn:is(a):focus { color: var(--btn-fg); text-decoration: none; }

/* Footer of a popup: right-aligned, one height, 8px apart, primary last (on the right). */
.adagin-btn-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--adagin-btn-gap); }
.adagin-btn-footer > .adagin-btn { min-width: var(--adagin-btn-dialog-min-width); }

/* A row of related buttons outside a .ta-menu or a popup footer (Wage Facilitator's tab actions): 8px apart, wrapping rather than overflowing. */
.adagin-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--adagin-btn-gap); }
.ta-menu > .adagin-btn,
.ta-menu__actions > .adagin-btn { flex: 0 0 auto; }
/* .ta-menu scrolls sideways (overflow-x: auto), which clips what sticks out of it: keep the first and last button's focus ring (2px + 2px offset) inside.
   MOD-681: on Time & Attendance the action buttons sit in a group (.ta-menu__actions) that is the row's last child, so the row's last button is that group's. */
.ta-menu > .adagin-btn:first-child { margin-left: calc(var(--adagin-btn-focus-width) + var(--adagin-btn-focus-offset)); }
.ta-menu > .adagin-btn:last-child,
.ta-menu > .ta-menu__actions:last-child > .adagin-btn:last-child { margin-right: calc(var(--adagin-btn-focus-width) + var(--adagin-btn-focus-offset)); }
h1.tablegrid-toolbar-actions > .adagin-btn:not(.adagin-btn--icon) { order: 3; } /* MOD-452 part 2: the descriptor actions (Add, Archive Selected, ...) sit with the old anchors' order, before the icon squares */
h1.tablegrid-toolbar-actions > .adagin-btn--icon { order: 4; }
.adagin-btn--outline .filter-strikethrough { filter: brightness(0); opacity: 0.85; }

.adagin-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--adagin-btn-icon-size);
  width: var(--adagin-btn-icon-size);
  height: var(--adagin-btn-icon-size);
  font-size: var(--adagin-btn-icon-size);
  line-height: 1;
}

/* MOD-456 (BDS-4): the glyph is an svg <use> of a Material Symbols Rounded symbol (img/icons/material-rounded.svg). It fills the 16 px icon box (1em of the box's font-size),
   takes the button's text colour (so a selected/inverted button keeps the same glyph in white) and is never a hit target of its own. */
.adagin-btn__svg { display: block; width: 1em; height: 1em; fill: currentColor; flex: none; pointer-events: none; }
/* MOD-757: the row-menu chevron is the Material keyboard_arrow_down (button sprite, MOD-957), 20 px; centred in its button wherever the button is inline-block. */
.day-menu .day-menu-btn .adagin-btn__svg { width: 20px; height: 20px; margin: 0 auto; }
/* MOD-757: a Material glyph beside a link's words (the Confirm thumb_up): 1em, on the text line. */
.adagin-inline-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; }
.adagin-inline-icon .adagin-btn__svg { width: 1em; height: 1em; }
.ta-units-edit-lock .adagin-btn__svg { margin: 0 auto; }
.tablegrid .tablegrid-action-buttons > a.row-menu .adagin-btn__svg { width: 20px; height: 20px; }
.tablegrid .tablegrid-action-buttons > a.row-menu .adagin-btn__icon { flex-basis: 20px; width: 20px; height: 20px; font-size: 20px; }
/* user menu: 20px glyphs (MOD-788); kept after the shared .adagin-btn__icon rule so that rule stays the first match */
nav.left-nav .user-menu__item .adagin-btn__icon { --adagin-btn-icon-size: 20px; color: var(--adagin-teal); }
.tablegrid .tablegrid-action-buttons > a.row-menu:hover { background: var(--adagin-btn-neutral-hover); }

.adagin-btn:hover { background: var(--btn-bg-hover); }
.adagin-btn:active { background: var(--btn-bg-pressed); } /* pressed = a fill step only: no size or position change (MOD-453) */
.adagin-btn[aria-pressed="true"] { background: var(--btn-bg-pressed); } /* a toggle that is on (My favourites) holds the pressed fill */
.adagin-btn:focus { outline: none; }
.adagin-btn:focus-visible { outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color); outline-offset: var(--adagin-btn-focus-offset); } /* also on Ghost: the ring is the only edge it has */

.adagin-btn--outline {
  --btn-bg: var(--adagin-white);
  --btn-bg-hover: var(--adagin-btn-neutral-hover);
  --btn-bg-pressed: var(--adagin-btn-neutral-pressed);
  --btn-fg: var(--adagin-btn-default);
  --btn-border: var(--adagin-btn-default);
}

.adagin-btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--adagin-btn-neutral-hover);
  --btn-bg-pressed: var(--adagin-btn-neutral-pressed);
  --btn-fg: var(--adagin-btn-default);
  --btn-border: transparent;
}

.adagin-btn--danger {
  --btn-bg: var(--adagin-btn-danger);
  --btn-bg-hover: var(--adagin-btn-danger-hover);
  --btn-bg-pressed: var(--adagin-btn-danger-pressed);
  --btn-fg: var(--adagin-white);
  --btn-border: var(--adagin-btn-danger);
}

.adagin-btn:disabled:not([aria-busy="true"]):not([data-state="success"]),
.adagin-btn[aria-disabled="true"]:not([aria-busy="true"]):not([data-state="success"]),
.adagin-btn.disabled:not([aria-busy="true"]):not([data-state="success"]) { /* MOD-452: script-built row actions mark a disabled one with .disabled */
  --btn-bg: var(--adagin-btn-disabled-fill);
  --btn-bg-hover: var(--adagin-btn-disabled-fill);
  --btn-bg-pressed: var(--adagin-btn-disabled-fill);
  --btn-fg: var(--adagin-btn-disabled-fill-fg);
  --btn-border: var(--adagin-btn-disabled-fill);
  cursor: not-allowed;
}
.adagin-btn--outline:disabled:not([aria-busy="true"]):not([data-state="success"]), .adagin-btn--outline[aria-disabled="true"]:not([aria-busy="true"]):not([data-state="success"]),
.adagin-btn--ghost:disabled:not([aria-busy="true"]):not([data-state="success"]), .adagin-btn--ghost[aria-disabled="true"]:not([aria-busy="true"]):not([data-state="success"]) {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-bg-pressed: transparent;
  --btn-fg: var(--adagin-btn-disabled-plain-fg);
  --btn-border: var(--adagin-btn-disabled-border);
}
.adagin-btn--ghost:disabled:not([aria-busy="true"]):not([data-state="success"]), .adagin-btn--ghost[aria-disabled="true"]:not([aria-busy="true"]):not([data-state="success"]) { --btn-border: transparent; }

/* Loading (MOD-453 / BDS-2, wwwroot/js/adagin-button-loading.js). aria-busy is set at the click: the button holds its pressed fill at once (a fill
   step, no scale, no dim), so the press shows in the same frame. At 200 ms data-state="loading" adds the spinner; the box keeps its rest size and
   colour (no grey disabled look). Any button can be hooked, so the spinner is also drawn over the label of a legacy .btn. */
button[aria-busy="true"] { pointer-events: none; cursor: progress; }
.adagin-btn[aria-busy="true"]:not([data-state="loading"]) { background: var(--btn-bg-pressed); }
.adagin-btn[data-state="loading"] .adagin-btn__icon > .adagin-btn__svg { display: none; }
.adagin-btn[data-state="loading"] .adagin-btn__icon::after,
button[aria-busy="true"][data-state="loading"]:not(.adagin-btn)::after {
  content: "";
  box-sizing: border-box;
  width: var(--adagin-btn-icon-size, 1rem);
  height: var(--adagin-btn-icon-size, 1rem);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: adagin-btn-spin 0.8s linear infinite;
}
button[aria-busy="true"][data-state="loading"]:not(.adagin-btn) { position: relative; color: transparent; }
button[aria-busy="true"][data-state="loading"]:not(.adagin-btn)::after { position: absolute; top: calc(50% - 8px); left: calc(50% - 8px); border-color: #fff; border-right-color: transparent; }
button[aria-busy="true"][data-state="loading"]:is(.btn-secondary, .btn-default, .btn-light, .btn-link, [class*="btn-outline-"]):not(.adagin-btn)::after { border-color: #053341; border-right-color: transparent; }

/* A button waiting for its list (adagin-button-loading.js lock): the disabled look is right here, nothing is running on it. */
button[aria-disabled="true"]:not([aria-busy="true"]):not(.adagin-btn) { opacity: var(--adagin-btn-disabled-opacity); cursor: not-allowed; }

/* Past 10 s: the slow message with Cancel, beside the button. */
.adagin-busy-note { margin-left: 8px; font-size: 14px; color: var(--adagin-dark-navy); }
.adagin-busy-note__cancel { margin-left: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

.adagin-btn[data-state="success"] { --btn-bg: var(--adagin-btn-success); --btn-bg-hover: var(--adagin-btn-success); --btn-border: var(--adagin-btn-success); --btn-fg: var(--adagin-white); pointer-events: none; }

/* Download button states (MOD-455 / BDS-3, <adagin-button download>). The three labels (rest, Preparing, Downloaded) sit stacked in one grid cell and only
   the current state's is visible, so the box is as wide as the widest from rest on: Preparing + spinner and Downloaded + tick swap in without a width
   jump. The tick takes the icon's slot, as the spinner does. */
.adagin-btn__label--states { display: inline-grid; justify-items: center; }
.adagin-btn__label--states > .adagin-btn__state { grid-area: 1 / 1; visibility: hidden; white-space: nowrap; }
.adagin-btn:not([data-state]) .adagin-btn__state[data-label="rest"],
.adagin-btn[data-state="loading"] .adagin-btn__state[data-label="loading"],
.adagin-btn[data-state="success"] .adagin-btn__state[data-label="success"] { visibility: visible; }
.adagin-btn[aria-busy="true"]:not([data-state]) .adagin-btn__state[data-label="rest"] { visibility: visible; }
/* inert while it ticks (adagin-button-loading.js locks it): not the greyed disabled look */
.adagin-btn[data-state="success"][aria-disabled="true"] { opacity: 1; cursor: default; }
.adagin-btn[data-state="success"] .adagin-btn__icon > .adagin-btn__svg { display: none; }
.adagin-btn[data-state="success"] .adagin-btn__icon::after {
  content: "";
  box-sizing: border-box;
  width: 0.3125rem;
  height: 0.625rem;
  margin-bottom: 0.125rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@keyframes adagin-btn-spin { to { transform: rotate(360deg); } }
@keyframes adagin-btn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* Reduce Motion: the spinner stays still (a whole ring) and pulses instead of rotating. */
@media (prefers-reduced-motion: reduce) {
  .adagin-btn[data-state="loading"] .adagin-btn__icon::after,
  button[aria-busy="true"][data-state="loading"]:not(.adagin-btn)::after { animation: adagin-btn-pulse 1.5s ease-in-out infinite; border-right-color: currentColor; }
  button[aria-busy="true"][data-state="loading"]:not(.adagin-btn)::after { border-right-color: #fff; }
  button[aria-busy="true"][data-state="loading"]:is(.btn-secondary, .btn-default, .btn-light, .btn-link, [class*="btn-outline-"]):not(.adagin-btn)::after { border-right-color: #053341; }
}

/* MOD-500: the week picker picks whole weeks (MOD-763 reworked it to whole-week bands), by any click in a week's row. adagin-weekpicker.js takes the greying (.disabled) and the single
   selected day (.active) off every day, so the days look like normal dates and click anywhere on a row selects its week. The week is always one band:
   hovering a day, the week number or the row tints the whole row #E8EEF8 (the day under the pointer gets none of its own), the selected week is that
   tint outlined in #1F4F63 with the week number in bold, and while the keyboard moves (.wk-previewing) the previewed week is the band and the
   selected one steps back. The weekday under the keyboard (.wk-focus) is outlined inside the band. Selectors keep the vendored picker's own
   td.day:hover / td.active rules (0,3,1) beaten at (0,5,2) or more, because those are what the days would otherwise show. */
.bs-weekpicker-on .bootstrap-datetimepicker-widget .adagin-week-hint {
  padding: 4px 8px;
  font-size: 12px;
  color: #555;
  text-align: center;
}

.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days td.day,
.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days td.day:hover,
.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days td.day.active,
.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days td.day.active:hover {
  cursor: pointer;
  background: transparent;
  color: inherit;
  text-shadow: none;
}

.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days td.day.old,
.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days td.day.new {
  color: #999;
}

.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days td.cw {
  cursor: pointer;
}

.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days tbody tr:hover td.day,
.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days tbody tr:hover td.cw {
  background: #E8EEF8;
}

/* The selected band styles the marked cells themselves (td.wk-sel; adagin-weekpicker.js marks them), never the grid row: a pay-run period that starts or ends
   mid-row paints only its own days. wk-sel-start / wk-sel-end are the first and last selected cell of each row and carry the outline's ends. */
.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days tbody td.day.wk-sel,
.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days tbody td.cw.wk-sel {
  background: #E8EEF8;
  color: #053341;
  border-top: 1px solid #1F4F63;
  border-bottom: 1px solid #1F4F63;
}

.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days tbody td.wk-sel.wk-sel-start {
  border-left: 1px solid #1F4F63;
}

.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days tbody td.wk-sel.wk-sel-end {
  border-right: 1px solid #1F4F63;
}

.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days tbody td.cw.wk-sel {
  font-weight: 700;
}

/* Keyboard preview: only the previewed week is the band; the selected one steps back until Enter or Escape. */
.bs-weekpicker-on .bootstrap-datetimepicker-widget.wk-previewing .datepicker-days tbody td.day.wk-sel,
.bs-weekpicker-on .bootstrap-datetimepicker-widget.wk-previewing .datepicker-days tbody td.cw.wk-sel {
  background: transparent;
  border-color: transparent;
}

.bs-weekpicker-on .bootstrap-datetimepicker-widget.wk-previewing .datepicker-days tbody tr td.day.wk-prev.wk-prev,
.bs-weekpicker-on .bootstrap-datetimepicker-widget.wk-previewing .datepicker-days tbody tr td.day.wk-prev.wk-prev:hover {
  background: #E8EEF8;
  color: #053341;
  border-top: 1px solid #1F4F63;
  border-bottom: 1px solid #1F4F63;
}

.bs-weekpicker-on .bootstrap-datetimepicker-widget .datepicker-days td.day.wk-focus {
  outline: 2px solid #1F4F63;
  outline-offset: -3px;
}

/* MOD-450: the summary under the box ("Week 41, Tue 6 Oct to Mon 12 Oct 2026") and touch-sized arrows (the 27px boxes were not). */
.bs-weekview > .adagin-week-summary {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: #555;
  text-align: center;
  white-space: normal;
}

.form-group.row > .fa-chevron-left:has(+ .bs-weekview),
.form-group.row > .bs-weekview + .fa-chevron-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
}

/* MOD-763: with the side menu open, six filters sit across from 1200px and a week filter's row is (window - 268px) / 6: 155px at 1200,
   172px at 1300, 195px at 1440, 222px at 1600 (measured in Chromium against this CSS, 270px menu). Two 40px arrows (MOD-450: "at least 40 px wide", so they never
   shrink) beside a date such as "04 May 2026" need 110 + 2 x 40 = 190px, which the row first holds at about 1410px. Below 1440px the row
   wraps instead: the date box takes the full row and the two arrows share the line under it, each at least 40px. The summary stays
   inside the date box's cell. From 1440px the arrows flank the date (box 115px or more; MOD-537's 15px gutters wait until 1600px).
   Time & Attendance's week control is not a filter cell (a fixed 250px in its one-line bar) and is excluded just below. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .form-group.row > .bs-weekview.bs-weekpicker-on {
    flex: 0 0 100%;
    min-width: 110px;
    order: 1;
  }
  .form-group.row > .fa-chevron-left:has(+ .bs-weekview) {
    flex: 1 1 50%;
    order: 2;
  }
  .form-group.row > .bs-weekview + .fa-chevron-right {
    flex: 1 1 50%;
    order: 3;
  }
}

/* MOD-763: Time & Attendance's bar holds the week control in a fixed 250px (.ta-bar__week, one line, no wrap): never stacked and no
   MOD-537 gutters at any width. Arrow, 170px date box, arrow, in that order; (0,5,0) beats the stacked and gutter rules' (0,4,0). The
   summary would wrap to two lines in 170px and grow the frozen bar, so it is hidden visually there and stays for assistive technology
   (its live region and the box's title carry the same text). */
.ta-bar__week .form-group.row > .bs-weekview.bs-weekpicker-on {
  flex: 1 1 0;
  min-width: 0;
  order: 0;
}

.ta-bar__week .form-group.row > .fa-chevron-left:has(+ .bs-weekview),
.ta-bar__week .form-group.row > .bs-weekview + .fa-chevron-right {
  flex: 0 0 40px;
  order: 0;
  margin-left: 0;
  margin-right: 0;
}

.ta-bar__week .bs-weekview > .adagin-week-summary,
.bs-weekview > .adagin-week-live {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* MOD-504: the Piecework filter's Employee Team / Shift Activity lists wrap a long name instead of scrolling sideways. */
div[id="Instance.FarmTeam"] .searchselect .dropdown-menu.inner,
div[id="Instance.FarmActivity"] .searchselect .dropdown-menu.inner {
  overflow-x: hidden;
}

div[id="Instance.FarmTeam"] .searchselect .dropdown-menu.inner > li,
div[id="Instance.FarmActivity"] .searchselect .dropdown-menu.inner > li {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   MOD-520: farm location + block outline data colours. Text/background pairs are 4.5:1 or better (measured 6.3 to 7.5),
   and the hues are blue / orange-brown / grey, which stay distinct under the common colour-blindness types; every badge
   also carries an icon and a text label, so colour is never the only signal.
   ========================================================================== */
:root {
  --adagin-gps-located: #0B4F6C;
  --adagin-gps-located-bg: #DCEEF5;
  --adagin-gps-none: #4A5563;
  --adagin-gps-none-bg: #E8EBEF;
  --adagin-gps-far: #8A3B00;
  --adagin-gps-far-bg: #FDE9D3;
  --adagin-outline-status-outlined: #0B4F6C;
  --adagin-outline-status-outlined-bg: #DCEEF5;
  --adagin-outline-status-none: #4A5563;
  --adagin-outline-status-none-bg: #E8EBEF;
  --adagin-outline-status-differs: #8A3B00;
  --adagin-outline-status-differs-bg: #FDE9D3;
  /* map strokes (read by the map scripts through getComputedStyle) */
  --adagin-map-outline-selected: #FFD166;
  --adagin-map-outline-other: #FFFFFF;
  --adagin-map-outline-current: #FFFFFF;
  --adagin-map-outline-import: #4CC9F0;
}

.gps-badge, .outline-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--adagin-radius-tag);
  font-size: 12px; line-height: 18px; white-space: nowrap;
}
.gps-badge--located { color: var(--adagin-gps-located); background: var(--adagin-gps-located-bg); }
.gps-badge--none { color: var(--adagin-gps-none); background: var(--adagin-gps-none-bg); }
.gps-badge--far { color: var(--adagin-gps-far); background: var(--adagin-gps-far-bg); }
.outline-badge--outlined { color: var(--adagin-outline-status-outlined); background: var(--adagin-outline-status-outlined-bg); }
.outline-badge--none { color: var(--adagin-outline-status-none); background: var(--adagin-outline-status-none-bg); }
.outline-badge--differs { color: var(--adagin-outline-status-differs); background: var(--adagin-outline-status-differs-bg); }

.geo-map { width: 100%; height: 480px; border-radius: var(--adagin-radius-pane); border: var(--adagin-outline-width) solid var(--adagin-outline); }
.geo-map--small { height: 320px; }
.geo-readonly { background-color: #e9ecef; color: #6c757d; cursor: default; }
.geo-note { background: #fff8e1; border-radius: var(--adagin-radius-block); padding: 8px 12px; }
/* MOD-675: the collapsible Details section of a detail page (Views/Shared/_DetailView.cshtml): light grey divider above it, the toggle on the
   field labels' left edge and in their size and weight. */
.detail-details { border-top: 1px solid var(--adagin-divider); padding-top: 0.5rem; }
.detail-toggle { background: none; border: 0; padding: 0.375rem 0; font: inherit; font-size: 14px; font-weight: 500; color: var(--adagin-navy); cursor: pointer; text-align: left; }
.detail-toggle .fa { font-size: 0.75em; margin-right: 0.25rem; transition: transform 0.15s; }
.detail-toggle[aria-expanded="true"] .fa { transform: rotate(180deg); }
.geo-warning { color: var(--adagin-gps-far); background: var(--adagin-gps-far-bg); border-radius: var(--adagin-radius-block); padding: 8px 12px; margin-bottom: 8px; }
.geo-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.geo-toolbar input[type=search], .geo-toolbar input[type=text] { min-width: 240px; }
.geo-status { color: var(--adagin-text-muted); min-height: 20px; }
.geo-overlay { position: fixed; inset: 0; background: rgba(16, 23, 41, 0.5); z-index: 1060; display: none; align-items: center; justify-content: center; }
.geo-overlay.is-open { display: flex; }
.geo-dialog { background: var(--adagin-white); border-radius: var(--adagin-radius-modal); padding: 16px; width: min(760px, 94vw); max-height: 94vh; overflow: auto; box-shadow: var(--adagin-shadow-raised); }
.geo-table { width: 100%; border-collapse: collapse; }
.geo-table th, .geo-table td { padding: 6px 8px; border-bottom: 1px solid var(--adagin-divider); text-align: left; }
.geo-table tr.is-selected td { background: var(--adagin-off-white); }

/* ==========================================================================
   MOD-520 phase B: the Farm Map page (Views/Farm/_Map.cshtml, js/Farm/Map.js). The colour ramp is viridis (low yellow, high purple),
   which reads in order under the common colour-blindness types and stays visible on satellite imagery. Highlighted table text is
   4.5:1 or better on its tint; the highlight also changes weight or carries the value, so colour is never the only signal.
   ========================================================================== */
:root {
  --adagin-ramp-low: #FDE725;
  --adagin-ramp-mid: #21918C;
  --adagin-ramp-high: #440154;
  --adagin-ramp-none: #9AA5B1;
  --adagin-map-label-fg: #FFFFFF;
  --adagin-map-cluster: #1F4F63;
  --adagin-map-cluster-fg: #FFFFFF;
  --adagin-metric-above: #A34A00;
  --adagin-metric-above-bg: #FDE9D3;
  --adagin-metric-below: #1F4F63;
  --adagin-metric-below-bg: #DCEEF5;
  --adagin-table-group-bg: var(--adagin-teal);
  --adagin-table-group-fg: var(--adagin-white);
  --adagin-table-total-bg: var(--adagin-dark-navy);
  --adagin-table-total-fg: var(--adagin-white);
  --adagin-table-key-bg: var(--adagin-metric-above);
  --adagin-chip-bg: #E8EBEF;
  --adagin-chip-fg: #4A5563;
}

/* MOD-520: the page is at least the window under the header (and the content padding) tall, so the active pane stretches to fill it; if the filter rows
   wrap or the window is short/zoomed the page simply grows and scrolls normally (no fixed height, so the loading overlay always covers all of .fm-page). */
.fm-page { width: 100%; display: flex; flex-direction: column; gap: 8px; position: relative; min-height: calc(100vh - var(--adagin-header-h) - var(--adagin-space-5) - 8px); min-height: calc(100dvh - var(--adagin-header-h) - var(--adagin-space-5) - 8px); }
/* MOD-520 (QA 11 Oct): min-height alone never bounds a pane, so a long Table View grew the page (about 4,900 px) instead of scrolling inside .fm-table-scroll.
   From 700 px of window height up the page is exactly the window tall, which bounds the pane; below that it keeps the growing min-height above. */
@media (min-height: 700px) {
  .fm-page { height: calc(100vh - var(--adagin-header-h) - var(--adagin-space-5) - 8px); height: calc(100dvh - var(--adagin-header-h) - var(--adagin-space-5) - 8px); }
}
.fm-page > :not(.fm-pane) { flex: none; }
.fm-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fm-tabs { display: flex; gap: 4px; }
.fm-tab { border: 1px solid var(--adagin-grey); background: var(--adagin-white); color: var(--adagin-teal); padding: 6px 16px; border-radius: var(--adagin-radius-block) var(--adagin-radius-block) 0 0; font-weight: 600; }
.fm-tab.is-active { background: var(--adagin-outline); color: var(--adagin-white); border-color: var(--adagin-outline); }
.fm-breadcrumb { color: var(--adagin-text-muted); }
.fm-link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
.fm-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
/* MOD-520 (QA 11 Oct): one slim row at 1366 px. The selects share what is left (they were as wide as their longest option and pushed View onto a second line). */
.fm-filter { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 120px; max-width: 260px; position: relative; }
.fm-filter select { width: 100%; text-overflow: ellipsis; }
.fm-filter--date { flex: none; max-width: none; }
.fm-filter label { margin: 0; font-size: var(--adagin-label-font-size); color: var(--adagin-text-muted); }
.fm-date { display: flex; gap: 4px; align-items: center; }
.fm-date-trigger { min-width: 190px; height: 32px; border: 1px solid var(--adagin-grey); border-radius: var(--adagin-radius-block); background: var(--adagin-white); padding: 0 12px; text-align: left; }
.fm-date-overlay { position: absolute; top: 100%; left: 0; z-index: 1050; margin-top: 4px; width: 320px; background: var(--adagin-white); border-radius: var(--adagin-radius-menu); padding: 12px; box-shadow: var(--adagin-shadow-raised); display: flex; flex-direction: column; gap: 6px; }
.fm-date-overlay[hidden] { display: none; }
.fm-radio { font-weight: 600; margin: 0; }
.fm-mode-body { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.fm-mode-body[hidden] { display: none; }
.fm-hint { font-size: 12px; color: var(--adagin-text-muted); }
.fm-error { color: var(--adagin-gps-far); min-height: 18px; }
.fm-overlay-actions { display: flex; justify-content: flex-end; gap: 8px; }
.fm-status { color: var(--adagin-text-muted); min-height: 20px; }
/* MOD-541: the shared page-loading overlay (wwwroot/js/adagin-page-loading.js). It covers its host (position: relative) with a scrim; the panel
   stays in view while the host scrolls. */
.adagin-page-loading { position: absolute; inset: 0; z-index: 20; display: flex; justify-content: center; align-items: flex-start; background: rgba(16, 23, 41, 0.35); border-radius: var(--adagin-radius-block); }
.adagin-page-loading[hidden] { display: none; }
.adagin-page-loading__panel { position: sticky; top: 30vh; margin-top: 30vh; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 320px; max-width: 90%; padding: 20px 24px; background: var(--adagin-white); border-radius: var(--adagin-radius-modal); box-shadow: var(--adagin-shadow-raised); text-align: center; }
.adagin-page-loading__text { font-weight: 600; color: var(--adagin-dark-navy); }
.adagin-page-loading__meter { display: flex; align-items: center; gap: 8px; width: 100%; }
.adagin-page-loading__meter[hidden], .adagin-page-loading__panel > [hidden] { display: none; }
.adagin-page-loading__bar { flex: 1; height: 10px; accent-color: var(--adagin-teal); }
.adagin-page-loading__figure { min-width: 3em; text-align: right; font-variant-numeric: tabular-nums; }
.adagin-page-loading.is-error .adagin-page-loading__text { color: var(--adagin-gps-far); }
.fm-pane { flex: 1; min-height: 320px; display: flex; flex-direction: column; gap: 8px; }
.fm-pane[hidden] { display: none; }

.fm-map-wrap { position: relative; display: flex; flex: 1; min-height: 0; border: var(--adagin-outline-width) solid var(--adagin-outline); border-radius: var(--adagin-radius-pane); overflow: hidden; }
.fm-map { flex: 1; min-width: 0; }
.fm-layers { width: 260px; flex: none; background: var(--adagin-white); border-right: 1px solid var(--adagin-divider); overflow-y: auto; }
.fm-layers-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fm-layers-head { display: flex; justify-content: space-between; align-items: center; }
.fm-layers-strip { display: none; writing-mode: vertical-rl; border: 0; background: var(--adagin-teal); color: var(--adagin-white); padding: 12px 6px; height: 100%; }
.fm-layers-closed .fm-layers, .fm-details-left .fm-layers { width: auto; }
.fm-layers-closed .fm-layers-body, .fm-details-left .fm-layers-body { display: none; }
.fm-layers-closed .fm-layers-strip, .fm-details-left .fm-layers-strip { display: block; }
/* MOD-543: the global `label:not(.switch)` rule (specificity 0,2,1: :not() counts as its argument) forces display:inline-block and beats a bare .fm-check (0,1,0) and
   .fm-layer-list .fm-check (0,2,0), so the layer labels flowed inline and ran together. `.fm-layer-list label.fm-check:not(.switch)` (0,3,1) wins; one layer per line, checkboxes in one column,
   wrapped text hangs under its own label. */
.fm-layer-list { display: flex; flex-direction: column; gap: 8px; }
.fm-check, .fm-layer-list label.fm-check:not(.switch) { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-weight: normal; }
.fm-layer-list .fm-check input { flex: none; margin: 2px 0 0; }
.fm-check.is-locked { color: var(--adagin-text-muted); }
.fm-legend-title { font-size: 12px; font-weight: 600; }
.fm-legend-bar { height: 10px; border-radius: 4px; background: linear-gradient(to right, var(--adagin-ramp-low), var(--adagin-ramp-mid), var(--adagin-ramp-high)); }
.fm-legend-ends { display: flex; justify-content: space-between; font-size: 12px; }
.fm-map-actions { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.fm-map-actions [hidden] { display: none; }
.fm-details { position: absolute; top: 12px; bottom: 12px; width: 340px; background: var(--adagin-white); border-radius: var(--adagin-radius-pane); box-shadow: var(--adagin-shadow-raised); padding: 12px; overflow-y: auto; z-index: 4; display: flex; flex-direction: column; gap: 8px; }
.fm-details[hidden] { display: none; }
.fm-details.is-left { left: 12px; }
.fm-details.is-right { right: 60px; }
.fm-details-head { display: flex; justify-content: space-between; align-items: center; }
.fm-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
.fm-facts dt { font-weight: normal; color: var(--adagin-text-muted); }
.fm-facts dd { margin: 0; }
.fm-metrics, .fm-popup table { width: 100%; border-collapse: collapse; }
.fm-metrics th, .fm-metrics td, .fm-popup th, .fm-popup td { padding: 3px 4px; border-bottom: 1px solid var(--adagin-divider); font-size: 13px; }
.fm-metrics th, .fm-popup th { font-weight: normal; }
.fm-metrics td, .fm-popup td { text-align: right; }
.fm-metrics tr.is-locked td { color: var(--adagin-text-muted); }
.fm-popup { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.fm-empty, .fm-nogps { position: absolute; z-index: 3; background: var(--adagin-white); border-radius: var(--adagin-radius-pane); box-shadow: var(--adagin-shadow-raised); padding: 12px; }
.fm-empty { top: 12px; left: 50%; transform: translateX(-50%); }
.fm-nogps { bottom: 72px; right: 60px; max-height: 40%; overflow-y: auto; }
.fm-nogps ul { margin: 4px 0 0; padding-left: 18px; }
.fm-empty[hidden], .fm-nogps[hidden] { display: none; }
.fm-map-label { text-shadow: 0 0 3px var(--adagin-dark-navy), 0 0 3px var(--adagin-dark-navy); }

.fm-table-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.fm-table-view select { min-width: 220px; }
.fm-table-export { justify-self: end; }
.fm-range { color: var(--adagin-text-muted); }
.fm-table-scroll { flex: 1; min-height: 0; overflow: auto; border: var(--adagin-outline-width) solid var(--adagin-outline); border-radius: var(--adagin-radius-block); }
.fm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.fm-table th, .fm-table td { padding: 6px 8px; border-bottom: 1px solid var(--adagin-divider); white-space: nowrap; }
.fm-table td { text-align: right; }
.fm-table thead th { position: sticky; top: 0; z-index: 2; background: var(--adagin-off-white); text-align: right; }
.fm-table thead th:first-child, .fm-table tbody th { text-align: left; }
.fm-row--group th, .fm-row--group td { background: var(--adagin-table-group-bg); color: var(--adagin-table-group-fg); font-weight: 600; }
.fm-row--item th { padding-left: 24px; font-weight: normal; }
.fm-row--total th, .fm-row--total td { background: var(--adagin-table-total-bg); color: var(--adagin-table-total-fg); font-weight: 700; }
.fm-row--total td.fm-cell--key { background: var(--adagin-table-key-bg); }
.fm-row--item td.fm-cell--above { color: var(--adagin-metric-above); background: var(--adagin-metric-above-bg); }
.fm-row--item td.fm-cell--below { color: var(--adagin-metric-below); background: var(--adagin-metric-below-bg); }
.fm-row--item td.fm-cell--high { color: var(--adagin-metric-above); font-weight: 700; }
.fm-row--group td.fm-cell--above, .fm-row--group td.fm-cell--high { text-decoration: underline; }
.fm-table tr.is-marked th, .fm-table tr.is-marked td { outline: 2px solid var(--adagin-orange); outline-offset: -2px; }
.fm-chip { display: inline-block; padding: 1px 6px; border-radius: var(--adagin-radius-tag); font-size: 11px; background: var(--adagin-chip-bg); color: var(--adagin-chip-fg); font-weight: normal; }
.fm-row--group .fm-link, .fm-row--group a, .fm-row--total a { color: inherit; }
.fm-none { text-align: center; color: var(--adagin-text-muted); }

/* ==========================================================================
   MOD-520 phase C: GPS heat map. The five heat stops run light to dark (lightness falls at every step, so the ramp reads in greyscale and
   under the common colour-blindness types) from yellow to dark red; they sit on satellite imagery, so the low end is deliberately pale.
   Panel text is Adagin black on white (above 4.5:1). The map draws the ramp from these tokens, so a change here is the whole change.
   ========================================================================== */
:root {
  --adagin-heat-1: #FFE08A;
  --adagin-heat-2: #FDAE61;
  --adagin-heat-3: #F46D43;
  --adagin-heat-4: #D73027;
  --adagin-heat-5: #7F0000;
  /* MOD-908: the GT1 points view's dot, one colour (the map's light-blue accent) with a dark outline, so it reads on satellite and on the heat ramp. */
  --adagin-map-gt1-point: #4CC9F0;
  --adagin-map-gt1-point-outline: #1F4F63;
  /* MOD-944: the Bin points view's dot: leaf green with a navy outline, larger than the GT1 dot (the map draws both from these tokens). */
  --adagin-map-bin-point: #9CBF5D;
  --adagin-map-bin-point-outline: #1F4F63;
  /* MOD-954: a GT1 scan sent without a GPS fix (Accuracy 0): a hollow grey ring, not a normal dot, never heat. */
  --adagin-map-gt1-nofix: #9AA0A6;
}

.heat-panel { background: var(--adagin-white); color: var(--adagin-black); border-radius: var(--adagin-radius-pane); box-shadow: var(--adagin-shadow-raised); padding: 8px 12px; margin: 10px; min-width: 220px; font-size: 13px; }
.heat-panel label { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-weight: normal; }
.heat-panel .heat-count { margin-left: auto; color: var(--adagin-text-muted); font-variant-numeric: tabular-nums; }
.heat-panel .heat-key { display: flex; align-items: center; gap: 6px; margin: 2px 0 0 0; color: var(--adagin-text-muted); }
.heat-panel .heat-dot { display: inline-block; border-radius: 50%; border: 1px solid; flex: none; }
.heat-panel .heat-dot-gt1 { width: 8px; height: 8px; background: var(--adagin-map-gt1-point); border-color: var(--adagin-map-gt1-point-outline); }
.heat-panel .heat-dot-gt1-nofix { width: 8px; height: 8px; background: transparent; border-color: var(--adagin-map-gt1-nofix); border-width: 2px; }
.heat-panel .heat-dot-bin { width: 12px; height: 12px; background: var(--adagin-map-bin-point); border-color: var(--adagin-map-bin-point-outline); border-width: 1.5px; }
.heat-panel .heat-sources { margin-left: 18px; border-left: 2px solid var(--adagin-divider); padding-left: 8px; }
.heat-legend { margin-top: 6px; }
.heat-legend-bar { height: 10px; border-radius: 5px; background: linear-gradient(to right, var(--adagin-heat-1), var(--adagin-heat-2), var(--adagin-heat-3), var(--adagin-heat-4), var(--adagin-heat-5)); }
.heat-legend-scale { display: flex; justify-content: space-between; color: var(--adagin-text-muted); font-size: 12px; }
.heat-status { color: var(--adagin-text-muted); min-height: 16px; font-size: 12px; }

/* ---------------------------------------------------------------------------------------------
 * Time & Attendance day colours (MOD-515 P10; Krispy's rule, Justin's answers of 6 Oct 2026)
 * The day figures on T&A Approved and the Wage Facilitator tabs (ItemTemplates/_ApprovedAttendanceDay; both wrappers carry
 * .approved-attendance). MOD-687: they take the figure colour of the same five families as the Unapproved rows (section 17's --ta-state-*): as
 * expected = green, overtime and the invalid types = red, short time and unpaid leave = orange, paid leave and public holiday = blue, absent = grey.
 * The text below is the MOD-515 history it replaces: absent / unpaid leave / anything short = red, overtime = orange, short time = Adagin
 * Light Blue, paid leave = blue, public holiday = Adagin Dark Blue. The brand palette names no "Light Blue" or "Dark Blue": they are read as
 * Adagin Light Teal and Adagin Navy, and paid leave takes the theme's plain blue so the three blues stay apart. Green and red are the
 * accessible success / danger tokens. Legacy: green, red, orange (unpaid leave and short time), navy #284350 (paid leave and PH shift),
 * and a red overtime figure; the WF grid had none of these rules (they lived in the T&A partial's own <style>).
 * ------------------------------------------------------------------------------------------- */
:root {
  --adagin-day-normal: var(--ta-state-normal-text);
  --adagin-day-absent: #48566F;
  --adagin-day-overtime: var(--ta-state-overtime-accent);
  --adagin-day-invalid: var(--ta-state-invalid-accent);
  --adagin-day-short-time: var(--ta-state-short-time-text);
  --adagin-day-paid-leave: #1F4F63;
  --adagin-day-public-holiday: var(--adagin-day-paid-leave);
}
.approved-attendance .expected { color: var(--adagin-day-normal); font-weight: bold; }
.approved-attendance .hour-error { color: var(--adagin-day-invalid); font-weight: bold; }
.approved-attendance .absent { color: var(--adagin-day-absent); font-weight: bold; }
.approved-attendance .overtime { color: var(--adagin-day-overtime); font-weight: bold; }
.approved-attendance .short-time { color: var(--adagin-day-short-time); font-weight: bold; }
.approved-attendance .paid-leave { color: var(--adagin-day-paid-leave); font-weight: bold; }
.approved-attendance .public-holiday { color: var(--adagin-day-public-holiday); font-weight: bold; }

/* MOD-685: the note icon (a speech bubble with lines, no fill) on a day with a note, Adagin teal; it opens the note's pop-up. On
   .approved-attendance, so the Wage Facilitator's day cells (same partial, same wrapper class) have it too. */
.approved-attendance .ta-day-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--adagin-teal);
  line-height: 0;
  cursor: pointer;
  vertical-align: middle;
}

.approved-attendance .ta-day-note-icon:focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: var(--adagin-btn-focus-offset);
}

/* MOD-685: the Unapproved row's note box, read-only until the row menu's Add / Edit note opens it: a filled note highlighted. */
textarea.ta-row-note[readonly] {
  background-color: #FFF3C4;
  color: var(--adagin-dark-navy);
}

/* ---------------------------------------------------------------------------------------------
 * 16. Farm Shift pages (MOD-571): Views/FarmShift/ShiftEditor.cshtml, wwwroot/js/Farm/ShiftDetail.js, and the Farm Shifts list's Type
 *     badge. Cards and summary cards after the Harvest Trends screen; the timeline's colours are the ticket's brand values (Shift
 *     Adagin Navy, window before #BFD3DB outlined in Adagin Teal, window after Adagin Teal, break Adagin Grey, gridlines #EEF0F3,
 *     conflict dashed #B42318). Text on white is at least 4.5:1 (muted #5A6472 is 6.1:1); amber text #7A3E00 on #FFF4E5 is about 8:1.
 * ------------------------------------------------------------------------------------------- */
:root {
  --fs-before: #BFD3DB;
  --fs-grid: #EEF0F3;
  --fs-conflict: #B42318;
  --fs-error-bg: #FEF3F2;
  --fs-warning-fg: #7A3E00;
  --fs-warning-bg: #FFF4E5;
  --fs-warning-border: #F5C891;
  --fs-success-fg: #2B5216;
  --fs-success-bg: #EEF6E6;
  --fs-info-bg: #EDF3F5;
  --fs-calc-bg: #EDF3F5;
}

.fs-page { max-width: 1240px; padding: var(--adagin-space-4) var(--adagin-space-4) var(--adagin-space-6); }
.fs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--adagin-space-4); margin-bottom: var(--adagin-space-2); }
.fs-title { font-size: 2rem; margin: 0 0 var(--adagin-space-2); color: var(--adagin-dark-navy); }
.fs-subtitle { margin: 0; color: var(--adagin-text-muted); }
.fs-actions { display: flex; gap: var(--adagin-space-2); align-items: center; }
.fs-actions--bottom { margin-top: var(--adagin-space-2); }
.fs-fix { min-height: 1.2em; margin: 0 0 var(--adagin-space-2); color: var(--fs-conflict); font-weight: 600; text-align: right; }
#fs-fix-bottom { text-align: left; margin-top: var(--adagin-space-4); }
.fs-save.fs-blocked { opacity: 0.55; } /* greyed while errors show; a click focuses the first error (not aria-disabled: the layout swallows those clicks) */

.fs-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--adagin-space-4); margin: var(--adagin-space-4) 0; }
.fs-summary-card { display: flex; align-items: stretch; background: var(--adagin-white); border: var(--adagin-outline-width) solid var(--adagin-outline); border-radius: var(--adagin-radius-card-sm); box-shadow: var(--adagin-shadow); overflow: hidden; }
.fs-summary-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 64px; background: var(--adagin-light-grey); color: var(--adagin-dark-navy); font-size: 1.25rem; }
.fs-summary-card > div { padding: var(--adagin-space-3) var(--adagin-space-4); }
.fs-summary-label { color: var(--adagin-text-muted); font-size: 0.875rem; }
.fs-summary-value { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 1.75rem; color: var(--adagin-dark-navy); margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.fs-summary-note { display: inline-block; background: var(--adagin-off-white); border-radius: var(--adagin-radius-tag); padding: 2px 6px; font-size: 0.75rem; color: var(--adagin-black); }

.fs-card { background: var(--adagin-white); border: var(--adagin-outline-width) solid var(--adagin-outline); border-radius: var(--adagin-radius-card); box-shadow: var(--adagin-shadow); padding: var(--adagin-space-5); margin-bottom: var(--adagin-space-4); }
.fs-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--adagin-space-2); }
.fs-card-title { font-size: 1.25rem; margin: 0 0 var(--adagin-space-2); color: var(--adagin-dark-navy); display: flex; align-items: center; gap: var(--adagin-space-2); }
.fs-card-sub { color: var(--adagin-text-muted); margin: 0 0 var(--adagin-space-4); }
.fs-grid { display: grid; gap: var(--adagin-space-4); margin-bottom: var(--adagin-space-4); }
.fs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-field { border: 0; padding: 0; margin: 0 0 var(--adagin-space-2); min-width: 0; }
.fs-label { display: block; font-weight: var(--adagin-label-font-weight); font-size: var(--adagin-label-font-size); line-height: var(--adagin-label-line-height); color: var(--adagin-black); margin-bottom: var(--adagin-space-1); }
.fs-optional { font-weight: 400; color: var(--adagin-text-muted); }
.fs-help-text { color: var(--adagin-text-muted); font-size: 0.8125rem; margin: var(--adagin-space-1) 0 0; }
.fs-page .form-control:focus,
.fs-page input[type="radio"]:focus-visible + label,
.fs-page input[type="checkbox"]:focus-visible + label,
.fs-help:focus-visible,
.fs-link-button:focus-visible { outline: 2px solid var(--adagin-teal); outline-offset: 2px; box-shadow: none; }
.fs-page .form-control.fs-invalid { border-color: var(--fs-conflict); }
.fs-page .form-control.fs-warn { border-color: var(--adagin-orange); }
.fs-locked, .fs-page .form-control[readonly].fs-locked { background: var(--fs-calc-bg); }

/* Segmented control (shift type, start from): native radios, so arrow keys move the choice. */
.fs-segmented { display: inline-flex; border: 1px solid var(--adagin-grey); border-radius: var(--adagin-radius-block); overflow: hidden; }
.fs-segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fs-segmented label { margin: 0; padding: 8px 16px; cursor: pointer; color: var(--adagin-dark-navy); background: var(--adagin-white); }
.fs-segmented input:checked + label { background: var(--adagin-dark-navy); color: var(--adagin-white); }
.fs-segmented input:disabled + label { color: var(--adagin-text-muted); cursor: not-allowed; }

/* Day chips: native check boxes. */
.fs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--adagin-space-2); }
.fs-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fs-chips label { margin: 0; min-width: 52px; text-align: center; padding: 6px 14px; border: 1px solid var(--adagin-grey); border-radius: var(--adagin-radius-pill); cursor: pointer; background: var(--adagin-white); color: var(--adagin-dark-navy); }
.fs-chips input:checked + label { background: var(--adagin-teal); border-color: var(--adagin-teal); color: var(--adagin-white); }
.fs-chips input:disabled + label { cursor: not-allowed; opacity: 0.8; }
.fs-chip-count { color: var(--adagin-text-muted); margin-left: var(--adagin-space-2); }

.fs-banner { display: flex; align-items: center; gap: var(--adagin-space-2); border-radius: 6px; padding: 10px 14px; margin: 0 0 var(--adagin-space-4); }
.fs-banner--info { background: var(--fs-info-bg); border: 1px solid #C9DAE1; color: var(--adagin-black); }
.fs-banner--warning { background: var(--fs-warning-bg); border: 1px solid var(--fs-warning-border); color: var(--fs-warning-fg); }
.fs-banner[hidden] { display: none; }

.fs-help { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--adagin-dark-navy); border-radius: 50%; background: var(--adagin-white); color: var(--adagin-dark-navy); font-size: 0.75rem; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; }
.fs-help:hover { background: var(--adagin-off-white); }
.fs-link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

.fs-table-wrap { overflow-x: auto; }
.fs-windows, .fs-breaks { width: 100%; border-collapse: separate; border-spacing: var(--adagin-space-3) var(--adagin-space-2); margin: 0 calc(-1 * var(--adagin-space-3)); }
.fs-windows th, .fs-breaks th { font-size: 0.8125rem; font-weight: 600; color: var(--adagin-black); text-align: left; white-space: nowrap; }
.fs-windows tbody th { font-size: 0.9375rem; }
.fs-unit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--adagin-text-muted); }
.fs-unit .form-control { width: auto; flex: 1 1 auto; min-width: 72px; }
.fs-time { max-width: 120px; }
.fs-unit .form-control.fs-minutes { max-width: 96px; }
.fs-calc { display: block; min-width: 96px; padding: 7px 12px; border-radius: 6px; background: var(--fs-calc-bg); color: var(--adagin-teal); font-weight: 700; font-variant-numeric: tabular-nums; }
.fs-calc--unset { color: var(--adagin-text-muted); font-weight: 400; }
.fs-tag { display: inline-block; padding: 2px 8px; border-radius: var(--adagin-radius-pill); background: var(--adagin-light-grey); color: var(--adagin-dark-navy); font-size: 0.75rem; font-weight: 600; }
.fs-tag[hidden] { display: none; }
.fs-add-break { margin-top: var(--adagin-space-2); }

.fs-note { border-radius: 6px; padding: 8px 12px; margin-top: var(--adagin-space-2); font-size: 0.875rem; }
.fs-note--error { background: var(--fs-error-bg); border: 1px solid #F4B8B2; color: var(--fs-conflict); }
.fs-note--warning { background: var(--fs-warning-bg); border: 1px solid var(--fs-warning-border); color: var(--fs-warning-fg); }
.fs-note--success { background: var(--fs-success-bg); border: 1px solid #C7DDB1; color: var(--fs-success-fg); }
.fs-note--info { background: var(--fs-info-bg); color: var(--adagin-black); }

.fs-view-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--adagin-space-3) var(--adagin-space-4); margin: 0 0 var(--adagin-space-4); }
.fs-view-grid dt, .fs-view-list dt { font-size: 0.8125rem; color: var(--adagin-text-muted); font-weight: 600; }
.fs-view-grid dd, .fs-view-list dd { margin: 2px 0 0; }
.fs-view-list > div { display: grid; grid-template-columns: 160px 1fr; gap: var(--adagin-space-2); padding: 6px 0; border-bottom: 1px solid var(--adagin-divider); }
.fs-break-list { margin: 0; padding-left: 1.25rem; }

/* Shift type badge (the page and the Farm Shifts list). */
.fs-type { display: inline-block; padding: 2px 10px; border-radius: var(--adagin-radius-pill); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.fs-type--day { background: var(--fs-info-bg); color: var(--adagin-teal); }
.fs-type--night { background: var(--adagin-navy); color: var(--adagin-white); }
.fs-type--holiday { background: var(--fs-warning-bg); color: var(--fs-warning-fg); border: 1px solid var(--fs-warning-border); }
.fs-type--legacy { background: var(--fs-error-bg); color: var(--fs-conflict); border: 1px solid #F4B8B2; margin-top: var(--adagin-space-1); }
.fs-type[hidden] { display: none; }
.child-grid-row-link { cursor: pointer; }

/* The shift timeline: a 190px name column and a plot that scrolls sideways in its own box below 1000px (plot at least 700px). */
.fs-legend { display: flex; flex-wrap: wrap; gap: var(--adagin-space-3); list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.fs-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fs-key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.fs-key--shift { background: var(--adagin-navy); }
.fs-key--before { background: var(--fs-before); border: 1px solid var(--adagin-teal); }
.fs-key--after { background: var(--adagin-teal); }
.fs-key--break { background: var(--adagin-grey); }
.fs-timeline { overflow-x: auto; }
.fs-tl { display: grid; grid-template-columns: 190px minmax(700px, 1fr); padding-right: 24px; } /* room for the last hour label */
.fs-tl-name { box-sizing: border-box; padding-right: var(--adagin-space-3); }
.fs-tl-name--days { height: 34px; }
.fs-tl-name--axis { height: 28px; display: flex; align-items: center; font-weight: 600; }
.fs-tl-name--mark { height: 22px; }
.fs-tl-name--row { height: 84px; padding-top: 14px; border-top: 1px solid var(--fs-grid); }
.fs-tl-name-title { font-weight: 600; }
.fs-tl-name-sub { color: var(--adagin-text-muted); font-size: 0.75rem; margin-top: 2px; }
.fs-tl-plot { position: relative; }
.fs-tl-days { position: relative; height: 34px; }
.fs-tl-day { position: absolute; top: 0; height: 30px; display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.fs-tl-day--first { background: var(--adagin-navy); color: var(--adagin-white); border-radius: 6px 0 0 6px; }
.fs-tl-day--second { background: var(--adagin-light-teal); color: var(--adagin-black); border-radius: 0 6px 6px 0; }
.fs-tl-axis { position: relative; height: 28px; }
.fs-tl-hour { position: absolute; top: 6px; transform: translateX(-50%); font-size: 0.75rem; color: var(--adagin-text-muted); white-space: nowrap; }
.fs-tl-mark { position: relative; height: 22px; } /* "Next day" on its own line, under the hour labels, never over them */
.fs-tl-nextday { position: absolute; top: 2px; transform: translateX(-50%); font-size: 0.75rem; font-weight: 700; color: var(--adagin-teal); white-space: nowrap; }
.fs-tl-rows { position: relative; }
.fs-tl-row { position: relative; height: 84px; border-top: 1px solid var(--fs-grid); }
.fs-tl-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--fs-grid); }
.fs-tl-shade { position: absolute; top: 0; bottom: 0; background: rgba(197, 201, 206, 0.35); pointer-events: none; }
.fs-tl-midnight { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--adagin-navy); }
.fs-tl-shift { position: absolute; top: 20px; height: 30px; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; box-sizing: border-box; background: var(--adagin-navy); color: var(--adagin-white); border-radius: 6px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.fs-tl-before, .fs-tl-after { position: absolute; top: 20px; height: 22px; box-sizing: border-box; }
.fs-tl-before { background: var(--fs-before); border: 1px solid var(--adagin-teal); border-radius: 4px 0 0 4px; }
.fs-tl-after { background: var(--adagin-teal); border-radius: 0 4px 4px 0; }
.fs-tl-marker { position: absolute; top: 14px; height: 34px; width: 2px; margin-left: -1px; background: var(--adagin-dark-navy); }
.fs-tl-time { position: absolute; top: 22px; padding: 0 6px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.fs-tl-mins { position: absolute; top: 50px; padding: 0 4px; font-size: 0.6875rem; color: var(--adagin-text-muted); white-space: nowrap; }
.fs-tl-unset { position: absolute; top: 26px; transform: translateX(-50%); font-size: 0.75rem; color: var(--adagin-text-muted); }
.fs-tl-conflict { position: absolute; top: 16px; height: 30px; box-sizing: border-box; border: 2px dashed var(--fs-conflict); border-radius: 4px; }
.fs-tl-conflict-label { position: absolute; top: 0; font-size: 0.6875rem; font-weight: 700; color: var(--fs-conflict); white-space: nowrap; }
.fs-tl-break { position: absolute; top: 14px; height: 20px; background: var(--adagin-grey); border-radius: 4px; }
.fs-tl-break-label { position: absolute; top: 38px; transform: translateX(-50%); text-align: center; font-size: 0.6875rem; white-space: nowrap; }
.fs-tl-break-name { font-weight: 700; }

@media (max-width: 999px) {
  .fs-summary, .fs-grid--3, .fs-view-grid { grid-template-columns: minmax(0, 1fr); }
}

/* MOD-580: Farm Shifts - Table View */
.fst-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.fst-search { width: 220px; }
.fst-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fst-chip { border: 1px solid #C9DAE1; background: #fff; color: var(--adagin-navy); border-radius: var(--adagin-radius-pill); padding: 4px 12px; font-size: 13px; cursor: pointer; }
.fst-chip[aria-pressed="true"] { background: var(--adagin-navy); color: #fff; border-color: var(--adagin-navy); }
.fst-check { margin: 0; font-weight: 400; }
.fst-counter { color: var(--adagin-text-muted); font-size: 13px; }
.fst-spacer { flex: 1 1 auto; }
.fst-scroll { max-width: 100%; overflow-x: auto; }
.fst-table { width: 100%; border-collapse: collapse; }
.fst-table thead th { position: sticky; top: 0; z-index: 1; background: var(--adagin-navy); color: #fff; font-family: Inter, sans-serif; height: 44px; padding: 0 10px; white-space: nowrap; }
.fst-sort { background: none; border: 0; color: inherit; font: inherit; padding: 0; cursor: pointer; }
/* MOD-957: the chevron mark (see the MOD-957 block at the end of the file) replaces the old text triangles. */
.fst-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--adagin-divider); vertical-align: top; font-size: 13px; }
.fst-row { cursor: pointer; }
.fst-row:hover, .fst-row.fst-selected { background: #F4F8FA; }
.fst-row[hidden] { display: none; }
.fst-table a:focus-visible, .fst-table button:focus-visible, .fst-table input:focus-visible, .fst-chip:focus-visible, .fst-sort:focus-visible { outline: 2px solid var(--adagin-teal); outline-offset: 2px; }
.fst-c-name { display: flex; gap: 8px; align-items: flex-start; }
.fst-swatch { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px; margin-top: 3px; }
.fst-name-block { display: flex; flex-direction: column; }
.fst-name { font-weight: 600; }
.fst-sub { color: var(--adagin-text-muted); font-size: 12px; }
.fst-c-act a { margin-right: 8px; }
.fst-amber { color: var(--fs-warning-fg); font-weight: 600; }
.fst-today { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: var(--adagin-radius-pill); font-size: 12px; background: #EEF0F2; color: var(--adagin-text-muted); }
.fst-today--applies { background: #E6F0DA; color: #3D6B14; font-weight: 600; }
.fst-flag { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; border-radius: var(--adagin-radius-pill); font-size: 12px; }
.fst-flag--ok { background: #E6F0DA; color: #3D6B14; }
.fst-flag--warn { background: var(--fs-warning-bg); color: var(--fs-warning-fg); border: 1px solid var(--fs-warning-border); }
.fst-flag--info { background: #E3EEFB; color: #174A8B; }
.fst-flag--more { background: #EEF0F2; color: var(--adagin-text-muted); }
.fst-archived { margin-top: 16px; padding: 12px; background: #FAFAFA; }
.fst-empty { padding: 24px; text-align: center; color: var(--adagin-text-muted); }
.fst-empty[hidden], .fst-archived[hidden], .fst-scroll[hidden] { display: none; }
.fst-dialog { border: 0; border-radius: var(--adagin-radius-modal); padding: 20px; max-width: 480px; box-shadow: 0 8px 32px rgba(0, 0, 0, .25); }
.fst-dialog::backdrop { background: rgba(26, 38, 64, .45); }
.fst-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
@media (max-width: 1279px) { .fst-windows { display: none; } }
@media (max-width: 999px) {
  .fst-table, .fst-table tbody, .fst-table tr, .fst-table td { display: block; width: 100%; }
  .fst-table thead { display: none; }
  .fst-row { border: var(--adagin-outline-width) solid var(--adagin-outline); border-radius: var(--adagin-radius-card-sm); margin-bottom: 8px; padding: 6px; }
  .fst-table tbody td { border: 0; padding: 4px 6px; }
  .fst-windows { display: block; }
}

/* ---------------------------------------------------------------------------------------------
 * MOD-626 begin. Time & Attendance "Units and piecework" popup of one record (#ta-record-units-modal in _AttendanceGraphs.cshtml, body
 *     ItemTemplates/_RecordUnits.cshtml). Read-only. The default rate is grey italic in brackets; a bonus is black and a top-up dark red
 *     (#B42318, 6.6:1 on white), each also named in words.
 * --------------------------------------------------------------------------------------------- */
.ta-record-units-cell { margin-top: var(--adagin-space-2); }
/* Beside the fixed left nav (217px open, 47px collapsed, z-index 99999 above the modal), as the #ajaxModal dialogs do (MOD-305): the dialog
   starts a gutter right of the nav, ends a gutter before the window's right edge, is at most 1400px, and is centred in the content area
   when there is room to spare. Bootstrap's modal-xl (1140px, centred on the window) put its left ~100px under the nav at 1366px. */
#ta-record-units-modal { --ta-units-nav: 217px; --ta-units-max: 1400px; }
body:has(nav.left-nav:not(.open)) #ta-record-units-modal { --ta-units-nav: 47px; }
#ta-record-units-modal .modal-dialog {
  max-width: min(var(--ta-units-max), calc(100% - var(--ta-units-nav) - 2 * var(--adagin-space-4)));
  margin-left: calc(var(--ta-units-nav) + var(--adagin-space-4) + max(0px, (100% - var(--ta-units-nav) - 2 * var(--adagin-space-4) - var(--ta-units-max)) / 2));
  margin-right: var(--adagin-space-4);
}
#ta-record-units-modal .modal-body { min-width: 0; }
/* MOD-639: the top Units popup (#ta-units-modal) is the same table, so it sits and scrolls the same way. */
#ta-units-modal { --ta-units-nav: 217px; --ta-units-max: 1400px; }
body:has(nav.left-nav:not(.open)) #ta-units-modal { --ta-units-nav: 47px; }
#ta-units-modal .modal-dialog {
  max-width: min(var(--ta-units-max), calc(100% - var(--ta-units-nav) - 2 * var(--adagin-space-4)));
  margin-left: calc(var(--ta-units-nav) + var(--adagin-space-4) + max(0px, (100% - var(--ta-units-nav) - 2 * var(--adagin-space-4) - var(--ta-units-max)) / 2));
  margin-right: var(--adagin-space-4);
}
#ta-units-modal .modal-body { min-width: 0; }
/* Whatever is wider than the dialog scrolls inside it instead of being clipped. */
.ta-record-units-wrap { max-width: 100%; overflow-x: auto; }
.ta-record-units { margin-bottom: 0; }
.ta-record-units th, .ta-record-units td { padding-left: 0.5rem; padding-right: 0.5rem; }
.ta-record-units .ta-units-default-rate { display: block; }
.ta-record-units th, .ta-record-units td { text-align: left; vertical-align: middle; }
.ta-record-units th.ta-units-num, .ta-record-units td.ta-units-num { text-align: right; }
/* Figures never break; a header may wrap onto two lines (so the table fits a 1366px window without sideways scroll), but not mid-word. */
.ta-record-units td.ta-units-num { white-space: nowrap; }
.ta-record-units th.ta-units-num { white-space: normal; overflow-wrap: normal; word-break: normal; }
.ta-record-units .ta-units-default-rate { color: var(--adagin-text-muted); font-style: italic; font-weight: 400; }
.ta-record-units .ta-units-bonus { color: #000; }
.ta-record-units .ta-units-topup { color: #B42318; }
.ta-record-units tfoot .ta-record-units-total th, .ta-record-units tfoot .ta-record-units-total td { font-weight: 700; border-top: 2px solid var(--adagin-text-muted); }
/* MOD-626 end. */

/* ---------------------------------------------------------------------------------------------
 * MOD-642. The read-only "Units page" (ItemTemplates/_RecordUnits.cshtml in #ta-units-modal and #ta-record-units-modal): the header's
 *     Bulk Costing Override, the KPI strip, the table controls (the standard grid's Search group and icon buttons, _TableGrid.cshtml) and the
 *     column header menus. "No piecework rate" is the muted text colour, never the top-up red.
 * --------------------------------------------------------------------------------------------- */
.ta-units-header { align-items: center; gap: var(--adagin-space-2); }
.ta-units-header .ta-units-override { margin-left: auto; flex: 0 0 auto; }
.ta-units-header .ta-units-override[hidden] { display: none; }
.ta-units-header .ta-units-override:not([hidden]) + .close { margin-left: 0; }
.ta-units-kpis { display: flex; flex-wrap: wrap; gap: var(--adagin-space-2); margin-bottom: var(--adagin-space-3); }
.ta-units-kpi {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: var(--adagin-space-1); padding: var(--adagin-space-2) var(--adagin-space-3);
  border: var(--adagin-outline-width) solid var(--adagin-outline); border-radius: var(--adagin-radius-card-sm); background: var(--adagin-white); box-shadow: var(--adagin-shadow);
}
.ta-units-kpi__label { font-size: 0.75rem; font-weight: 500; color: var(--adagin-text-muted); }
.ta-units-kpi__value { font-size: 1.125rem; font-weight: 700; color: var(--adagin-dark-navy); white-space: nowrap; }
.ta-units-kpi__value.ta-units-topup, .ta-record-units tfoot .ta-units-topup { color: #B42318; }
.ta-units-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--adagin-space-2); margin-bottom: var(--adagin-space-2); }
.ta-units-showing { font-size: var(--adagin-font-size-body); font-weight: 500; color: var(--adagin-text-muted); }
.ta-units-toolbar > .ta-units-search-group { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; flex: 0 0 auto; margin: 0 0 0 auto; }
.ta-units-toolbar > .ta-units-search-group > .tablegrid-search-label { font-family: 'Inter', sans-serif; font-size: var(--adagin-font-size-body) !important; font-weight: 500; color: var(--adagin-text-muted); white-space: nowrap; }
.ta-units-toolbar > .ta-units-search-group > input.form-control { width: 240px; height: 36px; font-size: 14px; flex: 0 0 auto; }
/* A column header is one button (its caption, the sort and filter marks, the caret); it wraps as the plain header did. */
.ta-record-units th .ta-units-colmenu {
  display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; white-space: inherit;
}
.ta-record-units th .ta-units-colmenu:focus-visible { outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color); outline-offset: var(--adagin-btn-focus-offset); }
.ta-record-units th .ta-units-colmenu > i { margin-left: 5px; }
.ta-record-units th .ta-units-colmenu > i:not(.fa) { display: none; }
.ta-record-units .ta-units-norate { color: var(--adagin-text-muted); }
.ta-record-units .ta-units-activity { cursor: pointer; }
.ta-record-units tbody tr[hidden] { display: none; }
/* The menu is fixed to the window (placed under its header by the script) inside the popup, so the table's sideways scroll never clips it. */
.ta-units-menu { position: fixed; min-width: 220px; z-index: 1060; }
.ta-units-menu .dropdown-item > i { margin-right: 5px; }
.ta-units-menu__filter { display: block; margin: 0; padding: var(--adagin-space-1) 1.5rem; font-size: var(--adagin-font-size-body); color: var(--adagin-text-muted); }
.ta-units-menu__filter > input.form-control { margin-top: var(--adagin-space-1); height: 32px; font-size: 14px; }

/* ---------------------------------------------------------------------------------------------
 * MOD-643. The Units page of a day in edit mode (ItemTemplates/_RecordUnitsEdit.cshtml): the Bulk Costing Override inside the page. The
 *     header's Cancel and Save changes (n) stand where Bulk Costing Override stood; the table keeps the read page's columns, with an input
 *     or a select in the editable cells. A changed cell is amber (border and tint) and its row carries an amber bar; an area or activity
 *     still to choose is red, as is a value that is not a number. A locked row (wage confirmed or paid) is muted.
 * ------------------------------------------------------------------------------------------- */
.ta-units-header .ta-units-edit-cancel { margin-left: auto; flex: 0 0 auto; }
.ta-units-header .ta-units-edit-save { flex: 0 0 auto; }
.ta-units-header .ta-units-edit-cancel[hidden], .ta-units-header .ta-units-edit-save[hidden] { display: none; }
.ta-units-header > .adagin-btn:not([hidden]) ~ .close { margin-left: 0; }
.ta-units-edit-note { margin: 0 0 var(--adagin-space-2); font-size: var(--adagin-font-size-body); color: var(--adagin-text-muted); }
.ta-units-edit-status { min-height: 20px; margin-bottom: var(--adagin-space-2); font-size: var(--adagin-font-size-body); font-weight: 600; color: #B42318; }
.ta-units-edit-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--adagin-space-2); margin-bottom: var(--adagin-space-2); padding: var(--adagin-space-2) var(--adagin-space-3); border: 1px solid #B42318; border-radius: 4px; background: #FEF3F2; color: #7A271A; font-size: 14px; }
.ta-units-edit-error[hidden] { display: none; }
.ta-units-edit-error .ta-units-edit-error__text { flex: 1 1 320px; }
.ta-units-edit-error .ta-units-edit-reload { flex: 0 0 auto; }

/* MOD-786: the Units popup's context under its heading (_AttendanceGraphs.cshtml): what the figures cover and the applied filters as read-only
   chips (the filter bar's chip shape, without its remove button). The popup is moved to <body> when it opens, so the hook is the popup's own id. */
#ta-units-modal .ta-units-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--adagin-space-2); padding: var(--adagin-space-2) 1rem; border-bottom: 1px solid var(--adagin-light-grey); }
#ta-units-modal .ta-units-context[hidden] { display: none; }
#ta-units-modal .ta-units-context__scope { margin: 0; font-size: var(--adagin-font-size-body); font-weight: 600; color: var(--adagin-dark-navy); }
#ta-units-modal .ta-units-context__chips { display: flex; flex-wrap: wrap; gap: var(--adagin-space-1); margin: 0; padding: 0; list-style: none; }
#ta-units-modal .ta-units-context__chip { display: inline-flex; align-items: center; padding: 2px var(--adagin-space-3); background: var(--adagin-off-white); border: 1px solid var(--adagin-light-grey); border-radius: var(--adagin-radius-pill); font-size: var(--adagin-font-size-body); }
#ta-units-modal .ta-units-context__chip--none { background: none; border-style: dashed; color: var(--adagin-text-muted); }
/* The read page's captions sit in a button (the column menu), which the browser never upper-cases; the same captions here are plain text. */
.ta-units-edit-table thead th { text-transform: none; letter-spacing: normal; }
/* Twelve columns with five fields each row must fit the popup at 1366px without scrolling sideways: tighter cells, fields that give way. */
.ta-units-edit-table th, .ta-units-edit-table td { padding-left: 0.375rem; padding-right: 0.375rem; }
.ta-units-edit-table td[data-col="activity"] { white-space: nowrap; }
.ta-units-edit-table td[data-col="performance"] { white-space: normal; }
.ta-units-edit-table .ta-units-edit-select { display: inline-block; width: 100%; min-width: 88px; max-width: 220px; height: 32px; padding: 2px 4px; font-size: 14px; }
.ta-units-edit-table td[data-col="activity"] .ta-units-edit-lock + .ta-units-edit-select { width: calc(100% - 22px); }
.ta-units-edit-table .ta-units-edit-input { display: inline-block; width: 84px; height: 32px; padding: 2px 6px; font-size: 14px; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.ta-units-edit-table .ta-units-edit-input::-webkit-outer-spin-button, .ta-units-edit-table .ta-units-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ta-units-edit-table .ta-units-edit-input::placeholder { color: var(--adagin-text-muted); font-style: italic; }
.ta-units-edit-table td.ta-units-changed { background: #FFF7E0; }
.ta-units-edit-table td.ta-units-changed > .form-control { border-color: #B54708; box-shadow: 0 0 0 1px #B54708; }
.ta-units-edit-table tr.ta-units-row-changed > td:first-child { box-shadow: inset 4px 0 0 #B54708; }
.ta-units-edit-table td.ta-units-missing > .form-control, .ta-units-edit-table td.ta-units-bad > .form-control { border-color: #B42318; box-shadow: 0 0 0 1px #B42318; color: #B42318; }
.ta-units-edit-table tr.ta-units-edit-locked > td { color: var(--adagin-text-muted); }
.ta-units-edit-lock { display: inline-block; width: 18px; margin-right: 4px; color: var(--adagin-text-muted); text-align: center; }

/* ---------------------------------------------------------------------------------------------
 * MOD-613. "Page totals" footer of the Time & Attendance Unapproved / Unapproved Overheads lists (a tfoot, so no list script that iterates
 *     tbody rows sees it). The three figures sit in a nested table that mirrors the row's own (_AttendanceRow's td colspan=3), so they
 *     line up under Hours Worked / Overtime Worked / Expected hours.
 * ------------------------------------------------------------------------------------------- */
.ta-page-totals th,
.ta-page-totals > td {
  background-color: var(--adagin-off-white);
  border-top: 2px solid var(--adagin-light-grey);
  color: var(--adagin-dark-navy);
  font-weight: 700;
  vertical-align: middle;
}

.ta-page-totals-cells {
  width: 100%;
}

.ta-page-totals-cells td {
  width: 200px;
  max-width: 200px;
  min-width: 120px;
  border: 0;
  padding: 0;
  font-weight: 700;
}

/* MOD-613: the footer's label cell is a th, and the Time & Attendance list's header rule (".table.is-query th", ".table.is-query-over th", inline in
 * Views/Employee/_TimeAndAttendance.cshtml) selects every th in the table, so it leaked sticky + top + z-index 99 + min-width + the green
 * background onto it, at a higher specificity than ".ta-page-totals th". This out-specifies it and resets each leaked property. */
table.is-query > tfoot > tr.ta-page-totals > th,
table.is-query-over > tfoot > tr.ta-page-totals > th {
  position: static;
  top: auto;
  z-index: auto;
  min-width: 0;
  background-color: var(--adagin-off-white);
  border-top: 2px solid var(--adagin-light-grey);
  color: var(--adagin-dark-navy);
  font-weight: 700;
  vertical-align: middle;
}

/* MOD-604: the Time & Attendance draft differs from the data on screen: a dot on Search and the cue beside it. */
#filter[data-pending="true"] { position: relative; }
#filter[data-pending="true"]::after { content: ""; position: absolute; top: -0.25rem; right: -0.25rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--adagin-orange); border: 2px solid var(--adagin-white); box-sizing: content-box; }
.ta-pending-cue { font-size: var(--adagin-font-size-body); font-weight: 600; }


/* ---------------------------------------------------------------------------------------------
 * 12. Time & Attendance top bar, Filters panel and applied-filter chips (MOD-605)
 *     One frozen bar (.ta-bar-wrap): week, "Employee search", Filters, Search (the MOD-604 cue floats under it). The chip row of the filters the data
 *     on screen was loaded with follows the wrapper and is NOT frozen. The wrapper sticks under the header; _Layout.cshtml measures its height into
 *     --adagin-bar-h and section 11 adds that to the day pills' and table box's offsets. Stack order: the wrapper is z-index 110 (its stacking context
 *     holds the panel at 101 and the lookups' menus), above the pills and table header (99) and the open sort header (100, MOD-609). The Filters panel is absolutely placed below the bar
 *     and sets no overflow, so the lookups' dropdown menus (absolute, inside the panel) are never clipped by it.
 * ------------------------------------------------------------------------------------------- */
/* Without .ta-bar-wrap--frozen (the view sets it) the bar scrolls with the page and _Layout.cshtml measures --adagin-bar-h as 0. */
.ta-bar-wrap {
  position: relative;
  background: var(--adagin-white, #fff);
  padding: var(--adagin-space-2) 0;
  border-bottom: 1px solid var(--adagin-light-grey);
}

.ta-bar-wrap--frozen {
  position: sticky;
  top: var(--adagin-header-h);
  z-index: 110; /* above the day pills / table header (99) and an open sort header (100), so the Filters panel and its lookups are never covered */
}

/* MOD-709: the shared page shell's bar takes the same box as the T&A bar, always frozen (not below 768px); its own rule so the T&A rules above stay standalone. */
.adagin-page-shell .adagin-page-shell__bar-wrap {
  background: var(--adagin-white, #fff);
  padding: var(--adagin-space-2) 0;
  border-bottom: 1px solid var(--adagin-light-grey);
  position: sticky;
  top: var(--adagin-header-h);
  z-index: 110; /* above the day pills / table header (99) and an open sort header (100), so the Filters panel and its lookups are never covered */
}

.ta-bar,
.adagin-page-shell .adagin-page-shell__bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--adagin-space-2) var(--adagin-space-3);
}

/* The week control is the existing widget; only its box is trimmed so it sits in the line (its caption stays for assistive technology). */
/* MOD-645: #filter-data only carries the search URL; as a flex item it still added one row gap after Search, pushing the buttons 12px short of the chip row's right end. */
.ta-bar > #filter-data {
  display: none;
}

.ta-bar__week {
  flex: 0 0 auto;
  width: 250px;
  max-width: 100%;
}

.ta-bar__week .form-group,
.ta-bar__week .form-group.row {
  margin: 0;
}

.ta-bar__week .form-group > label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* One row: arrow, date box (the shared week-picker rules above size it, 36px tall), arrow. Bootstrap's .row wraps; the caption is out of flow. */
.ta-bar__week .form-group.row {
  flex-wrap: nowrap;
  align-items: center;
}

.ta-filter-count {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: var(--adagin-space-2);
  padding: 0 0.375rem;
  border-radius: var(--adagin-radius-pill);
  background: var(--adagin-orange);
  color: var(--adagin-white, #fff);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

.ta-filter-count[hidden],
.ta-chips[hidden],
.ta-filters-panel[hidden] {
  display: none;
}

/* The draft cue floats under the frozen bar so a pending change never adds to the frozen height. */
.ta-bar-wrap .ta-pending-cue {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  padding: 2px var(--adagin-space-2);
  background: var(--adagin-white, #fff);
  border: 1px solid var(--adagin-light-grey);
  border-top: 0;
  border-radius: 0 0 var(--adagin-radius-tag) var(--adagin-radius-tag);
}

.ta-bar-wrap .ta-pending-cue:empty {
  display: none;
}

/* MOD-780: the backdrop of a filter popup or the week picker (not of the small three-dot menus). Fixed over the window from under the frozen bar down; the bar
   wrapper (z-index 110) holds the popup and the calendar above it, so only they and the bar stay sharp. Where backdrop-filter is not supported the tint alone is used. */
.adagin-backdrop {
  position: fixed;
  top: calc(var(--adagin-header-h) + var(--adagin-bar-h, 0px));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 109;
  background: var(--adagin-backdrop-tint);
}

.adagin-backdrop[hidden] {
  display: none;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .adagin-backdrop {
    -webkit-backdrop-filter: blur(var(--adagin-backdrop-blur));
    backdrop-filter: blur(var(--adagin-backdrop-blur));
  }
}

.ta-filters-panel {
  position: absolute;
  top: calc(100% + var(--adagin-space-2));
  right: 0;
  z-index: 101;
  width: min(900px, 100%);
  padding: var(--adagin-space-4);
  background: var(--adagin-white, #fff);
  border: var(--adagin-outline-width) solid var(--adagin-outline);
  border-radius: var(--adagin-radius-pane);
  box-shadow: var(--adagin-shadow-raised);
}

.ta-filters-panel:focus {
  outline: none;
}

.ta-filters-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--adagin-space-3);
}

.ta-filters-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--adagin-space-2);
}

.ta-filters-panel__title {
  margin: 0;
  font-size: 1.125rem;
}

.ta-filters-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--adagin-space-4);
  align-items: start;
}

/* MOD-756 audit: the People / Work / Review group labels are labels: 12/18/600, sentence case as written (no upper-casing or tracking). */
.ta-filters-group__title {
  margin: 0 0 var(--adagin-space-2);
  font-size: var(--adagin-label-font-size);
  line-height: var(--adagin-label-line-height);
  font-weight: var(--adagin-label-font-weight);
  letter-spacing: 0;
  text-transform: none;
  color: var(--adagin-teal);
}

/* One filter (MOD-673 / MOD-781): bold caption, the hint on its own line (italic, muted), then the control; 4px inside a filter, 8px between filters,
   the same for every filter. The _FormColumn form group is made transparent so its label and control become grid items; nothing about how the
   control renders or works changes. */
.ta-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--adagin-space-1);
  align-content: start;
  margin-bottom: var(--adagin-space-2);
}

.ta-filter > .form-group {
  display: contents;
}

.ta-filter > .form-group > label {
  grid-row: 1;
  margin: 0;
  padding: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.2; /* MOD-756 audit: MOD-781 shipped 14px / 700 / 16.8px (1.2 inherited); the label tokens' 18px must not reach it */
  font-weight: 700;
}

.ta-filter > .form-group > :not(label) {
  grid-row: 3;
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.ta-filter__hint {
  grid-row: 2;
  /* one line high even when empty or wrapped, so the dropdowns line up across the columns */
  min-height: 1.25em;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--adagin-text-muted);
}

/* MOD-781: the closed lookup is 36px high; the arrow owns a fixed 40px zone at the right and the value (one line, ellipsis) never enters it. */
.ta-filter .searchselect > .dropdown-toggle {
  position: relative;
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 40px 0 var(--adagin-space-3);
  text-align: left;
}

.ta-filter .searchselect > .dropdown-toggle > span {
  display: block;
  float: none !important;
  overflow: hidden;
  line-height: 34px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ta-filter .searchselect > .dropdown-toggle > .clearinput-icon {
  position: absolute;
  top: 50%;
  right: 28px;
  padding-right: 0;
  transform: translateY(-50%);
}

/* MOD-781: a selected value shows the clear icon left of the arrow, so reserve its zone too and the text ellipsizes before it. */
.ta-filter .searchselect > .dropdown-toggle:has(> .clearinput-icon) {
  padding-right: 60px;
}

.ta-filter .searchselect > .dropdown-toggle::after {
  position: absolute;
  top: 50%;
  right: 12px;
  margin: -2px 0 0;
}

/* The list: 36px rows, light tint on hover, wrapping long values, 280px then it scrolls. */
.ta-filter .searchselect .dropdown-menu.inner {
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
}

.ta-filter .searchselect .dropdown-item {
  min-height: 36px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ta-filter .searchselect .dropdown-item:hover,
.ta-filter .searchselect .dropdown-item:focus,
.ta-filter .searchselect .dropdown-item[aria-selected="true"] {
  background: #E8EEF8;
  color: inherit;
}

/* MOD-781: the chosen row is tinted and carries a check at the right (drawn, no icon font). */
.ta-filter .searchselect .dropdown-item {
  position: relative;
  padding-right: 36px;
}

.ta-filter .searchselect .dropdown-item[aria-selected="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 6px;
  height: 11px;
  border: solid #1F4F63;
  border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg);
}

/* ADAS-484: one picked-row state for every multi-select (a searchselect with data-searchselect-multiple: the Time and Attendance, Wage Facilitator and Bin
   Management Filters and the report Print dialog), whichever page decorates it. The plugin marks a picked row .active; styles.css paints .active white on
   #1385c7 (4.0:1) and the Filters panel's tint under it left pale text on a pale row (1.1:1). A picked row is the Filters' outline tint with navy text
   (15:1), semibold, and a teal tick at the right (8:1 on the tint; 3:1 needed); an unpicked row is navy text on white. The state is never colour alone. */
.searchselect--multiple .dropdown-item {
  position: relative;
  min-height: 36px;
  padding-right: 36px;
  color: var(--adagin-black);
  white-space: normal;
  overflow-wrap: anywhere;
}

.searchselect--multiple .dropdown-item:hover,
.searchselect--multiple .dropdown-item:focus {
  background: #E8EEF8;
  color: var(--adagin-black);
}

/* (0,5,0) to beat rojobaco-plugins .searchselect .dropdown-item.active:not(:hover){color:#f0ffff!important} (0,4,0): pale text on the pale tint, 1.1:1. */
.dropdown.searchselect.searchselect--multiple .dropdown-item.active,
.dropdown.searchselect.searchselect--multiple .dropdown-item.active:hover,
.dropdown.searchselect.searchselect--multiple .dropdown-item.active:focus {
  background: var(--adagin-outline-tint) !important;
  color: var(--adagin-black) !important;
  font-weight: 600;
}

.searchselect--multiple .dropdown-item.active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 6px;
  height: 11px;
  border: solid var(--adagin-teal);
  border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg);
}

.searchselect--multiple .dropdown-item:focus-visible {
  outline: 2px solid var(--adagin-teal);
  outline-offset: -2px;
}

/* ADAS-484: the select2 multi-select (Bulk Add / Bulk Query Update "Employee", the edit forms' checklists) gets the same picked-row state. select2.css paints a picked row
   #ddd on white (1.4:1, no other cue) and the hovered row white on #5897fb (2.9:1). Scoped to the multi list (aria-multiselectable); single selects are untouched. */
.select2-container--default .select2-results__options[aria-multiselectable="true"] .select2-results__option {
  position: relative;
  padding-right: 36px;
  color: var(--adagin-black);
}

.select2-container--default .select2-results__options[aria-multiselectable="true"] .select2-results__option--highlighted[aria-selected] {
  background: #E8EEF8;
  color: var(--adagin-black);
}

.select2-container--default .select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected="true"] {
  background: var(--adagin-outline-tint);
  color: var(--adagin-black);
  font-weight: 600;
}

.select2-container--default .select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 6px;
  height: 11px;
  border: solid var(--adagin-teal);
  border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg);
}

/* MOD-781: the search box is for lists of more than 8 values (the script sets .ta-many). */
.ta-filter .searchselect:not(.ta-many) .search-control {
  display: none;
}

.ta-filter .searchselect > .dropdown-toggle:focus-visible,
.ta-filter .searchselect .dropdown-item:focus-visible,
.ta-filter .searchselect .search-control input:focus-visible {
  outline: 2px solid #1F4F63;
  outline-offset: -2px;
}

/* MOD-781: the footer; Apply filters is the primary action at the right. */
.ta-filters-panel__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--adagin-space-2);
  margin-top: var(--adagin-space-3);
}

.ta-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--adagin-space-3);
  padding-top: var(--adagin-space-2);
}

/* MOD-645: the title and chips wrap among themselves; Clear all stays at the right end, level with the first line. */
.ta-chips__main {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--adagin-space-2);
  min-width: 0;
}

/* MOD-756 audit: the "Applied" label, as the filter group labels: 12/18/600, sentence case as written. */
.ta-chips__title {
  font-size: var(--adagin-label-font-size);
  line-height: var(--adagin-label-line-height);
  font-weight: var(--adagin-label-font-weight);
  letter-spacing: 0;
  text-transform: none;
  color: var(--adagin-teal);
}

.ta-chips__list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ta-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--adagin-space-1);
  padding: 2px 2px 2px var(--adagin-space-3);
  background: var(--adagin-off-white);
  border: 1px solid var(--adagin-light-grey);
  border-radius: var(--adagin-radius-pill);
  font-size: var(--adagin-font-size-body);
}

.ta-chip__x {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--adagin-dark-navy);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.ta-chip__x:hover {
  background: var(--adagin-light-grey);
}

.ta-chip__x:focus-visible,
.ta-chips__clear:focus-visible {
  outline: 2px solid var(--adagin-teal);
  outline-offset: 1px;
}

.ta-chips__clear {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--adagin-teal);
  font-size: var(--adagin-font-size-body);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* MOD-709 Search-active: orange = something applied. The box with an applied term has an orange border and a warm tint; the applied row shows the term as an
   orange chip (right aligned, level with Clear all) and its Clear all turns orange. The row is the page's own and hidden while no filter is set; with a term
   it shows (adagin-search-active.js). Navy text on the orange chip is 5.6:1; the orange Clear all is the accent the ticket names (underlined, 600). */
.adagin-bar-search__input.is-search-active {
  border-color: var(--adagin-orange);
  background-color: var(--adagin-orange-tint);
}

/* ADAS-494: the search box's own clear control (adagin-search-active.js adds the button right after the input). An orange round x inside the right end of the
   box, shown while the box holds text; the browser's grey x of a type=search box is hidden so there is one, visible control. The group is the positioning
   context: its right edge is the box's right edge at every width. Navy on orange is 5.6:1 (as the search chip); the focus ring is the chips' teal one. */
.adagin-bar-search {
  position: relative;
}

.adagin-bar-search__input::-webkit-search-cancel-button,
.adagin-bar-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.adagin-bar-search__input:not(:placeholder-shown) {
  padding-right: 36px;
}

.adagin-bar-search__clear {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0 0 2px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: var(--adagin-orange);
  color: var(--adagin-dark-navy);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.adagin-bar-search__clear[hidden],
.adagin-bar-search__input:disabled + .adagin-bar-search__clear {
  display: none;
}

.adagin-bar-search__clear:hover {
  background: var(--adagin-orange-tint);
  box-shadow: inset 0 0 0 1px var(--adagin-orange);
}

.adagin-bar-search__clear:focus-visible {
  outline: 2px solid var(--adagin-teal);
  outline-offset: 1px;
}

/* !important: bootstrap.css hides [hidden] with !important, so without it the row stays hidden under an applied search (MOD-709). */
.ta-chips.ta-chips--has-search[hidden] {
  display: flex !important;
}

.ta-chip--search {
  margin-left: auto;
  padding-right: 2px;
  background: var(--adagin-orange);
  border-color: var(--adagin-orange);
  color: var(--adagin-dark-navy);
}

.ta-chip--search .ta-chip__x:hover {
  background: var(--adagin-orange-tint);
}

.ta-chips--has-search .ta-chips__clear {
  color: var(--adagin-orange-text);
}

/* Below 1000px the bar may wrap (week, then the search line, then the buttons) and the panel's groups stack; nothing overlaps. */
@media (max-width: 1099px) {
  .ta-filters-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ta-filters-panel {
    left: 0;
    width: auto;
    /* The stacked groups are taller than a short window and the bar is frozen, so the page cannot scroll to the rest: the panel scrolls itself instead. */
    max-height: calc(100vh - var(--adagin-header-h) - var(--adagin-bar-h, 0px) - var(--adagin-space-4));
    overflow-y: auto;
  }
}

/* MOD-781: one column below 760px. */
@media (max-width: 759px) {
  .ta-filters-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A phone-width window cannot spare the height: the bar scrolls with the page there (_Layout.cshtml then measures 0 for it, so the pills stick directly under the header).
   MOD-780: relative (not static) keeps a layer of its own (z-index 110) above the backdrop; it still scrolls with the page. */
@media (max-width: 767px) {
  .ta-bar-wrap--frozen {
    position: relative;
    top: auto;
  }

  .adagin-page-shell .adagin-page-shell__bar-wrap {
    position: static;
  }
}

/* ---------------------------------------------------------------------------------------------
 * T&A button standard (MOD-599): Time & Attendance only (.ta-screen is on its root; .adagin-sticky-stack is shared with Wage Facilitator).
 *     1. Table header: the design-system navy (--adagin-dark-navy, the section 5 header token) with white text on every T&A list.
 *     2. Toolbar and the Search / Filters buttons: primary = the shared <adagin-button> default variant (solid navy), chosen in the views.
 *     3. Row, card and Approved-grid actions: ghost secondary (outlined, transparent, navy text and border). The script-bound ones
 *        (.approval-reject-item, .edit-detail-record, .ta-unreject, .day-menu-btn) keep their exact markup, so they are
 *        styled here on their own classes with the shared button's size and state tokens. The inline display: none / inline the scripts
 *        toggle (jQuery show / hide) is respected: only a visible action gets display: inline-flex.
 *     Colour is only ever an addition to the label: Approve / Reject keep their words and thumbs glyphs.
 * ------------------------------------------------------------------------------------------- */
.ta-screen .table > thead > tr > th {
  background-color: var(--adagin-table-header-bg); /* MOD-705: secondary blue through the shared header token (was navy) */
  color: var(--adagin-table-header-fg);
}

/* Controls inside the header (MOD-705: secondary blue, was navy): the sort button inherits white; links (the day column's menu button, MOD-646; its R before) were teal link-colour; the focus ring is white (the teal one is ~1.5:1 on navy). */
.ta-screen .table > thead a,
.ta-screen .table > thead a:hover {
  color: var(--adagin-white);
}

/* MOD-646: the day column's "..." (the Approved grid's header menu, in place of the R): the day cell's button below (its size, border and radius), white on the navy.
   The grid's layout is fixed (MOD-619, week grid width), so the button never widens its column; under 1,400 px it is 24 px wide, as the cell's is. */
.ta-screen .table > thead .day-menu .day-menu-btn {
  display: inline-flex;
  box-sizing: border-box;
  min-height: 1.75rem;
  min-width: 1.75rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: var(--adagin-btn-radius);
  background: transparent;
  font-size: var(--adagin-btn-font-size);
  line-height: 1;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ta-screen .table > thead .day-menu .day-menu-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* MOD-686 (Design v28): the heading's menu is a tertiary button, white dots on the secondary blue row (--adagin-teal) with no outline; the hover tint
   and the white focus ring above still mark it. A day with no record on the page says "No data" under its date (U14), white like the date. */
.ta-screen .table.approved-attendance > thead .day-menu .day-menu-btn {
  border-color: transparent;
  color: var(--adagin-white);
}

.ta-screen .table.approved-attendance > thead .ta-dayheader-nodata {
  margin-bottom: 4px;
  font-size: var(--adagin-label-font-size);
  font-weight: 400;
  color: var(--adagin-white);
}

@media (max-width: 1399.98px) {
  .ta-screen .table.approved-attendance > thead .day-menu .day-menu-btn {
    min-width: 1.5rem;
  }
}

.ta-screen .table > thead i.fa-thumbs-down {
  color: var(--adagin-white) !important; /* inline gray is ~4:1 on navy */
}

.ta-screen .table > thead .ta-sort-btn:focus-visible,
.ta-screen .table > thead a:focus-visible,
.ta-screen .table > thead input:focus-visible {
  outline: 2px solid var(--adagin-white);
  outline-offset: 2px;
}

/* Row and card actions, ghost. Shared geometry; the colour is the button's text colour, so the border follows it (white on a dark-red exception row, grey on an archived one). */
.ta-screen .table td button.approval-reject-item,
.ta-screen .table td a.approval-reject-item.approval-disabled,
.ta-screen .table td button.edit-detail-record,
.ta-screen .table td button.ta-unreject,
.ta-screen .table td .day-menu .day-menu-btn {
  box-sizing: border-box;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border: 1px solid currentColor;
  border-radius: var(--adagin-btn-radius);
  background: transparent;
  color: var(--adagin-btn-default);
  font-family: 'Inter', sans-serif;
  font-size: var(--adagin-btn-font-size);
  font-weight: var(--adagin-btn-font-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--adagin-btn-icon-gap);
  cursor: pointer;
}

.ta-screen .table td button.approval-reject-item:not([style*="display:none"]):not([style*="display: none"]),
.ta-screen .table td a.approval-reject-item.approval-disabled,
.ta-screen .table td button.edit-detail-record,
.ta-screen .table td button.ta-unreject {
  display: inline-flex !important;
}

/* Approve and Reject (enabled or not) are one width, so the pair stacks as two equal buttons. */
.ta-screen .table td button.approval-reject-item,
.ta-screen .table td a.approval-reject-item.approval-disabled {
  min-width: 6rem;
}

.ta-screen .table td .day-menu .day-menu-btn {
  display: inline-flex;
  padding: 0;
  min-width: 1.75rem;
}

.ta-screen .table td button.approval-reject-item:hover,
.ta-screen .table td button.edit-detail-record:hover,
.ta-screen .table td button.ta-unreject:hover,
.ta-screen .table td .day-menu .day-menu-btn:hover {
  background: var(--adagin-btn-neutral-hover);
  color: var(--adagin-btn-default);
}

.ta-screen .table td button.approval-reject-item:active,
.ta-screen .table td button.edit-detail-record:active,
.ta-screen .table td button.ta-unreject:active,
.ta-screen .table td .day-menu .day-menu-btn:active {
  background: var(--adagin-btn-neutral-pressed);
}

/* The thumbs keep a colour cue (green up, red down) in addition to the label; on a dark-red exception row they follow the white text. */
.ta-screen .table td button.approval-reject-item .fa-thumbs-up { color: var(--adagin-btn-success); }
.ta-screen .table td button.approval-reject-item .fa-thumbs-down { color: var(--adagin-btn-danger); }

/* Edit / Bulk Edit / Unreject glyphs follow the label (no second colour). */
.ta-screen .table td button.edit-detail-record .fa,
.ta-screen .table td button.ta-unreject .fa {
  color: inherit;
}

/* Not approvable (the day is not finished, "Invalid Query Type"): the shared disabled look for a ghost button (muted text, light border). The inline opacity: 0.5 the row sets
   would fade it to ~3:1, so it is reset; the title and the reason line stay. */
.ta-screen .table td a.approval-reject-item.approval-disabled {
  opacity: 1 !important;
  border-color: var(--adagin-btn-disabled-border);
  border-style: dashed;
  color: var(--adagin-btn-disabled-fill-fg) !important; /* #475467: 5.1:1 even on the orange short-time tint (the shared #5A6472 is 4.0:1 there) */
  cursor: not-allowed;
}

.ta-screen .table td a.approval-reject-item.approval-disabled .fa {
  color: inherit;
}

/* Exception (dark red) and archived rows keep the text colours they already set. */
.ta-screen .table tr.bg-isexception td button.edit-detail-record,
.ta-screen .table tr.bg-isexception td button.ta-unreject,
.ta-screen .table tr.bg-isexception td button.approval-reject-item,
.ta-screen .table tr.bg-isexception td .day-menu .day-menu-btn {
  color: var(--adagin-white);
}

.ta-screen .table tr.bg-isexception td button.approval-reject-item .fa {
  color: inherit;
}

.ta-screen .table tr.bg-isexception td button.edit-detail-record:hover,
.ta-screen .table tr.bg-isexception td button.ta-unreject:hover,
.ta-screen .table tr.bg-isexception td button.approval-reject-item:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--adagin-white);
}

.ta-screen .table tr.bg-archived td button.edit-detail-record,
.ta-screen .table tr.bg-archived td button.approval-reject-item {
  color: var(--adagin-text-muted);
}

.ta-screen .table tr.bg-archived td button.approval-reject-item .fa {
  color: inherit;
}

/* A not-approvable action on a dark-red exception row: white (the muted grey is invisible on dark red), dashed so it still reads as unavailable. */
.ta-screen .table tr.bg-isexception td a.approval-reject-item.approval-disabled {
  color: var(--adagin-white) !important;
  border-color: var(--adagin-white);
  border-style: dashed;
}

/* Keyboard focus: the shared ring (teal, 2px, 2px away) on the light rows; the existing currentColor rings on the script-bound buttons stay (white on an exception row). */
.ta-screen .table td .day-menu .day-menu-btn:focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: var(--adagin-btn-focus-offset);
}

/* The Filters count badge: an orange dot with a navy number (white on the accent orange was 3.6:1, the navy text is 5.0:1; MOD-682: the button is white now, the orange against it is the 3:1 the badge needs as a shape). */
.ta-screen #ta-filters-btn .ta-filter-count {
  color: var(--adagin-dark-navy);
}

/* ---------------------------------------------------------------------------------------------
 * 17. Time & Attendance: one colour system for a row's state (MOD-600). Decided palette (MOD-687: five families, no yellow): Normal = green accent on a white row, Overtime =
 *     red, Short time / Unpaid leave / Unexpected Hours = orange, Absent = grey, Paid leave / Public holiday = blue, Piecework mismatch = red, Overlap (the MOD-602 shift
 *     label) = the same red (MOD-623, which also maps every query type to one of these groups). Each state has a tint (the row), an accent (the left border and the pie slice) and a text colour for its label (>= 4.5:1
 *     on the tint and on white; the accent is >= 3:1 on the tint). The class comes from AttendanceRowState (ViewModels/AttendanceScreens.cs),
 *     added beside the existing row classes, which are untouched; the colour is never the only cue (the tag has text and an icon).
 *     The Daily Query Types pie reads the --ta-state-*-accent values (TimeAndAttendance.js taStateColor). The rules are one block so they
 *     out-rank the page's inline tr.bg-isquery tints by specificity, not by order.
 * ------------------------------------------------------------------------------------------- */
:root {
  --ta-state-normal-bg: #FFFFFF;     --ta-state-normal-accent: #3A5C1F;                    --ta-state-normal-text: #3A5C1F;
  --ta-state-overtime-bg: var(--ta-state-mismatch-bg); --ta-state-overtime-accent: var(--ta-state-mismatch-accent); --ta-state-overtime-text: var(--ta-state-mismatch-text);
  --ta-state-short-time-bg: #FBE0C7; --ta-state-short-time-accent: #C25C07;                --ta-state-short-time-text: #8A4205;
  --ta-state-paid-leave-bg: #C4D5DB; --ta-state-paid-leave-accent: #1A3F4F;                --ta-state-paid-leave-text: #122E3A;
  --ta-state-absent-bg: #E8ECF3;     --ta-state-absent-accent: #63748D;                    --ta-state-absent-text: #333D54;
  --ta-state-mismatch-bg: #FCD8D5;   --ta-state-mismatch-accent: #A32314;                  --ta-state-mismatch-text: #73170D;
  /* MOD-623, MOD-687: the colour follows the query type NUMBER (AttendanceRowState.ForQueryType), five families. Green (normal) = as expected; red = all four
     Overtime types, piecework mismatch, Overlap and the invalid types (overtime, mismatch, overlap and invalid share the mismatch tokens); orange
     (short-time) = Short Time, Unpaid Leave, Unexpected Hours; blue (paid-leave) = Paid Leave, Public Holiday; grey (absent) = Absent. No yellow. */
  --ta-state-overlap-bg: var(--ta-state-mismatch-bg); --ta-state-overlap-accent: var(--ta-state-mismatch-accent); --ta-state-overlap-text: var(--ta-state-mismatch-text);
  --ta-state-invalid-bg: var(--ta-state-mismatch-bg); --ta-state-invalid-accent: var(--ta-state-mismatch-accent); --ta-state-invalid-text: var(--ta-state-mismatch-text);
  --ta-state-neutral-accent: #7B8794; /* a pie slice whose category name is outside the palette */
}

table tr.summary.ta-state-normal { background-color: var(--ta-state-normal-bg); }
table tr.summary.ta-state-overtime { background-color: var(--ta-state-overtime-bg); }
table tr.summary.ta-state-short-time { background-color: var(--ta-state-short-time-bg); }
table tr.summary.ta-state-absent { background-color: var(--ta-state-absent-bg); }
table tr.summary.ta-state-paid-leave { background-color: var(--ta-state-paid-leave-bg); }
table tr.summary.ta-state-mismatch:not(.bg-isexception) { background-color: var(--ta-state-mismatch-bg); } /* an Exception row that is also a mismatch keeps its dark red */
table tr.summary.ta-state-invalid:not(.bg-isexception) { background-color: var(--ta-state-invalid-bg); } /* an Exception row keeps its dark red and white text */

table tr.summary.ta-state-normal > td:first-child { border-left: 5px solid var(--ta-state-normal-accent); }
table tr.summary.ta-state-overtime > td:first-child { border-left: 5px solid var(--ta-state-overtime-accent); }
table tr.summary.ta-state-short-time > td:first-child { border-left: 5px solid var(--ta-state-short-time-accent); }
table tr.summary.ta-state-absent > td:first-child { border-left: 5px solid var(--ta-state-absent-accent); }
table tr.summary.ta-state-paid-leave > td:first-child { border-left: 5px solid var(--ta-state-paid-leave-accent); }
table tr.summary.ta-state-mismatch > td:first-child { border-left: 5px solid var(--ta-state-mismatch-accent); }
table tr.summary.ta-state-invalid > td:first-child { border-left: 5px solid var(--ta-state-invalid-accent); }

/* The tag under a row's approval controls: icon + text, in the state's text colour on its tint. */
.ta-state-tag {
  display: inline-block;
  margin-top: var(--adagin-space-2);
  padding: 0 var(--adagin-space-2);
  border: 1px solid transparent;
  border-radius: var(--adagin-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
tr.ta-state-normal .ta-state-tag { color: var(--ta-state-normal-text); background-color: var(--ta-state-normal-bg); border-color: var(--ta-state-normal-accent); }
tr.ta-state-overtime .ta-state-tag { color: var(--ta-state-overtime-text); background-color: var(--ta-state-overtime-bg); border-color: var(--ta-state-overtime-accent); }
tr.ta-state-short-time .ta-state-tag { color: var(--ta-state-short-time-text); background-color: var(--ta-state-short-time-bg); border-color: var(--ta-state-short-time-accent); }
tr.ta-state-absent .ta-state-tag { color: var(--ta-state-absent-text); background-color: var(--ta-state-absent-bg); border-color: var(--ta-state-absent-accent); }
tr.ta-state-paid-leave .ta-state-tag { color: var(--ta-state-paid-leave-text); background-color: var(--ta-state-paid-leave-bg); border-color: var(--ta-state-paid-leave-accent); }
tr.ta-state-mismatch .ta-state-tag { color: var(--ta-state-mismatch-text); background-color: var(--ta-state-mismatch-bg); border-color: var(--ta-state-mismatch-accent); }
tr.ta-state-invalid .ta-state-tag { color: var(--ta-state-invalid-text); background-color: var(--ta-state-invalid-bg); border-color: var(--ta-state-invalid-accent); }

/* MOD-623: the row's own coloured text on the four group tints. Bootstrap's text-danger (#DC3545, the hours that differ) is 3.7 to 4.2:1 on them and
   text-muted (#6C757D, the "Type:" line) 3.9 to 4.4:1; the red group's text colour is 6.4:1 or more and #475467 6.3:1 or more on every tint. Not on an
   Exception row (dark red, its own colours). */
table tr.summary:is(.ta-state-paid-leave, .ta-state-short-time, .ta-state-absent, .ta-state-overtime, .ta-state-mismatch, .ta-state-invalid):not(.bg-isexception) .text-danger { color: var(--ta-state-mismatch-text) !important; }
table tr.summary:is(.ta-state-paid-leave, .ta-state-short-time, .ta-state-absent, .ta-state-overtime, .ta-state-mismatch, .ta-state-invalid):not(.bg-isexception) .query-type-line { color: var(--adagin-btn-disabled-fill-fg) !important; }

/* MOD-749 (replaces MOD-602's text line): the relation to the previous shift is one 16px icon in the top-left corner of the start-time cell of the second and
   later shifts. No outline, no background. It is absolutely placed, so the centred times do not move. The shape (link / link_off / layers) and the tooltip
   carry the meaning; the colour only adds weight: back to back #48566F, gap #8A4205, overlap #73170D. */
.ta-screen table.detail td.shift-start {
  position: relative;
}
.ta-screen table.detail td.shift-start > .shift-link {
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  width: 16px;
  height: 16px;
  line-height: 0;
  border: 0;
  background: none;
}
.ta-screen table.detail td.shift-start > .shift-link > svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}
/* MOD-749 round 3: the marker is keyboard-focusable (tabindex 0) and its one-line tooltip shows on hover and on focus (keyboard and tap), so the minutes need
   no hover-only title. Out of the flow (absolute), so the centred times never move; it hangs just under the icon, left-aligned to the cell. */
.ta-screen table.detail td.shift-start > .shift-link:focus { outline: 2px solid #1F5FBF; outline-offset: 1px; }
.ta-screen table.detail td.shift-start > .shift-link > .shift-link-tip {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: 230px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #1D2939;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
}
.ta-screen table.detail td.shift-start > .shift-link:is(:hover, :focus) > .shift-link-tip { display: block; }
.ta-screen table.detail td.shift-start > .shift-link.shift-link--back-to-back { color: #48566F; }
.ta-screen table.detail td.shift-start > .shift-link.shift-link--gap { color: #8A4205; }
.ta-screen table.detail td.shift-start > .shift-link.shift-link--overlap { color: #73170D; }

/* MOD-751: a shift block is filled only for a reason worth a look. Peach is the existing "detailexception" (#F8DFC4); an auto clock-out (the system
   closed the shift) is the red family's tint (--ta-state-mismatch-bg, #FCD8D5). The red fill is (0,3,1), so it also out-ranks the white
   "table.detail.isexception" the script adds when the row turns into an Exception row. Every fill carries a chip that says the reason in words. */
.ta-screen table.detail.detailautoclockout {
  background-color: var(--ta-state-mismatch-bg);
}
.shift-exception-chip {
  width: fit-content;
  margin: 0 auto var(--adagin-space-1);
  padding: 0 var(--adagin-space-2);
  border: 1px solid var(--ta-state-short-time-accent);
  border-radius: var(--adagin-radius-pill);
  background-color: var(--adagin-white);
  color: var(--ta-state-short-time-text);
  font-size: 12px;
  font-weight: bold;
}
.shift-exception-chip.shift-exception-chip-autoclockout {
  border-color: var(--ta-state-mismatch-accent);
  color: var(--ta-state-mismatch-text);
}
.shift-exception-chip::before {
  content: "\f071"; /* Font Awesome 5 solid: exclamation-triangle */
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  margin-right: var(--adagin-space-1);
}
.shift-exception-comment {
  font-size: 12px;
  font-style: italic;
}

/* ---------------------------------------------------------------------------------------------
 * MOD-618. Time & Attendance row actions in one stack (_AttendanceRow's Actions cell: Unapproved, Unapproved Overheads, Rejected Records).
 *     Top to bottom: the state label (MOD-600's .ta-state-tag, whose text is now the query type's name), Approve, History, Reject; on Rejected
 *     Records the chip, History, Unreject. One centred column and one button width. The Approve / Reject markup is unchanged: their <strong>
 *     wrappers are display: contents, so the controls themselves are the stack's items and one the script hides (display: none) leaves no gap.
 *     History is the shared <adagin-button> outline in the row buttons' geometry (MOD-599), transparent so the row tint shows through, white
 *     on a dark-red exception row. A query type with no colour group gets the neutral label (grey on white, no row tint, no bar).
 * ------------------------------------------------------------------------------------------- */
.ta-screen .table td .ta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--adagin-space-2);
}

.ta-screen .table td .ta-actions > strong {
  display: contents;
}

/* The label tops the stack (its own margin is the stack's gap now); a long type name ("Automated system clock out") wraps instead of widening the column. */
.ta-screen .table td .ta-actions .ta-state-tag {
  max-width: 9rem;
  margin-top: 0;
  border-radius: var(--adagin-radius-tag); /* MOD-756: a wrapped tag */
  white-space: normal;
}

tr.ta-state-neutral .ta-state-tag { color: var(--adagin-btn-disabled-fill-fg); background-color: var(--adagin-white); border-color: var(--ta-state-neutral-accent); }

/* One width for every button in the stack: Approve and Reject (enabled or not), History, Unreject. */
.ta-screen .table td .ta-actions button.approval-reject-item,
.ta-screen .table td .ta-actions a.approval-reject-item.approval-disabled,
.ta-screen .table td .ta-actions .ta-history-btn,
.ta-screen .table td .ta-actions .ta-units-btn,
.ta-screen .table td .ta-actions button.ta-unreject {
  width: 6.5rem;
}

.ta-screen .table td .ta-actions .ta-history-btn,
.ta-screen .table td .ta-actions .ta-units-btn {
  --btn-bg: transparent;
  height: auto;
  min-height: 1.75rem;
  padding: 0 0.625rem;
}

.ta-screen .table tr.bg-isexception td .ta-actions .ta-history-btn,
.ta-screen .table tr.bg-isexception td .ta-actions .ta-units-btn {
  --btn-fg: var(--adagin-white);
  --btn-border: var(--adagin-white);
  --btn-bg-hover: rgba(255, 255, 255, 0.16);
  --btn-bg-pressed: rgba(255, 255, 255, 0.24);
}

.ta-screen .table tr.bg-isexception td .ta-actions .ta-history-btn:focus-visible,
.ta-screen .table tr.bg-isexception td .ta-actions .ta-units-btn:focus-visible {
  outline-color: var(--adagin-white);
}

/* ---------------------------------------------------------------------------------------------
 * MOD-612. Time & Attendance Approved tab, built to the review prototype where the page supports it. Every rule is scoped to .ta-screen: the Approved
 *     cell and row partials are shared with the Wage Facilitator grid, which keeps its look (its markup also lacks the ta-* elements below).
 *     1. The row's week Confirm / Unapprove: ghost, as the day "..." button already is (MOD-599).
 *     2. The note under the hours: a grey italic "Add note" when the day has none, the note's text highlighted when it has one.
 *     3. The lock's reason in words beside the lock icon.
 *     4. The day "..." menu (ApprovedDayMenu.js keeps it on body, outside the table's scroll box, with z-index 1035 above the sticky header's 99, and adds .ta-day-menu when its button is inside .ta-screen):
 *        one item height, the icon left of the label, a clear disabled look that keeps its reason as a tooltip, a visible keyboard focus.
 *     5. The "Page totals" footer row.
 * ------------------------------------------------------------------------------------------- */
.ta-screen .approved-attendance td > a.unapproval-reject-item,
.ta-screen .approved-attendance td > a.unapproval-confirm-item {
  display: inline-flex;
  box-sizing: border-box;
  min-height: 1.75rem;
  min-width: 6rem;
  padding: 0 0.625rem;
  border: 1px solid currentColor;
  border-radius: var(--adagin-btn-radius);
  background: transparent;
  color: var(--adagin-btn-default);
  font-family: 'Inter', sans-serif;
  font-size: var(--adagin-btn-font-size);
  font-weight: var(--adagin-btn-font-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--adagin-btn-icon-gap);
  cursor: pointer;
}

.ta-screen .approved-attendance td > a.unapproval-reject-item:hover,
.ta-screen .approved-attendance td > a.unapproval-confirm-item:hover {
  background: var(--adagin-btn-neutral-hover);
  color: var(--adagin-btn-default);
}

.ta-screen .approved-attendance td > a.unapproval-reject-item:active,
.ta-screen .approved-attendance td > a.unapproval-confirm-item:active {
  background: var(--adagin-btn-neutral-pressed);
}

.ta-screen .approved-attendance td > a.unapproval-reject-item:focus-visible,
.ta-screen .approved-attendance td > a.unapproval-confirm-item:focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: var(--adagin-btn-focus-offset);
}

/* The thumbs keep a colour cue in addition to the label, as on the Unapproved rows. */
.ta-screen .approved-attendance td > a.unapproval-confirm-item .fa-thumbs-up,
.ta-screen .approved-attendance td > a.unapproval-confirm-item .adagin-inline-icon { color: var(--adagin-btn-success); }
.ta-screen .approved-attendance td > a.unapproval-reject-item .fa-thumbs-down { color: var(--adagin-btn-danger); }

/* The lock: icon and the reason beside it. */
.ta-screen .approved-attendance td a.unapproval-lock-item:has(> .ta-lock-note) {
  display: inline-flex;
  align-items: center;
  gap: var(--adagin-space-1);
  vertical-align: middle;
}

.ta-screen .approved-attendance .ta-lock-note {
  color: #475467;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* The day menu. */
.report-row-menu.ta-day-menu {
  min-width: 12rem;
  padding: var(--adagin-space-1) 0;
}

.report-row-menu.ta-day-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--adagin-space-2);
  min-height: 2.25rem;
  padding: 0 var(--adagin-space-3);
  white-space: nowrap;
}

.report-row-menu.ta-day-menu .dropdown-item i,
.report-row-menu.ta-day-menu .dropdown-item .adagin-inline-icon {
  flex: none;
  margin-right: 0;
  text-align: center;
}

.report-row-menu.ta-day-menu .dropdown-item:focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: -2px;
}

/* Not available (the confirm of a day that needs a category): muted text, not faded (the shared 0.55 opacity was ~2:1), dashed so it reads as unavailable, and the
   pointer events stay on so the title (the reason) shows on hover; the click does nothing (ApprovedDayMenu.choose). */
.report-row-menu.ta-day-menu .dropdown-item.disabled {
  opacity: 1;
  pointer-events: auto;
  color: #475467;
  background: transparent;
  border-top: 1px dashed var(--adagin-btn-disabled-border);
  border-bottom: 1px dashed var(--adagin-btn-disabled-border);
  cursor: not-allowed;
}

/* The page's totals. The footer's look is MOD-613's (.ta-page-totals, background and bold text); the figures line up under the day columns. The Approved list's header rule
   (".table.approved th", inline in Views/Employee/_TimeAndAttendance.cshtml) selects every th of the table and leaked sticky + z-index 99 + the navy background onto the label cell,
   so it is reset here, as MOD-613 does for the Unapproved lists. */
.ta-screen table.approved-attendance > tfoot > tr.ta-page-totals > th {
  position: static;
  top: auto;
  z-index: auto;
  min-width: 0;
  background-color: var(--adagin-off-white);
  border-top: 2px solid var(--adagin-light-grey);
  color: var(--adagin-dark-navy);
  font-weight: 700;
  vertical-align: middle;
}

.ta-screen table.approved-attendance > tfoot > tr.ta-page-totals > th,
.ta-screen table.approved-attendance > tfoot > tr.ta-page-totals > td {
  font-variant-numeric: tabular-nums;
  padding-top: var(--adagin-space-2);
  padding-bottom: var(--adagin-space-2);
}

/* ---------------------------------------------------------------------------------------------
 * MOD-614. Time & Attendance lists (Unapproved, Unapproved Overheads, Rejected) fit a 1,366 px window: density only.
 *     .ta-screen scopes it (the Wage Facilitator shares the templates and the sticky stack but has no .ta-screen; the Approved grid is another table).
 *     Sizes follow MOD-578's dense grid (.tablegrid): body 13px, headers 12px / line-height 1.25, 6px / 8px cell padding. What made the table 1,191 px
 *     with one shift and 1,465 px with two: the hours block's three 120-200px figure cells (and the notes box at 100% of them), the 200-250px shift block,
 *     Bootstrap's 12px cell padding, and the one-line employee cell. The figures now share the block in equal thirds, the same in the row and in the
 *     "Page totals" footer (MOD-613), so the totals still sit under Hours / OT / Exp. One header cell spans the shift columns; the body keeps one cell
 *     per shift (the single Shifts cell is a separate item).
 * ------------------------------------------------------------------------------------------- */
.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th {
  padding: 8px 8px;
  font-size: var(--adagin-label-font-size);       /* MOD-756: 12px / 18px, as every table header */
  line-height: var(--adagin-label-line-height);
  white-space: normal;
  vertical-align: middle;
}

.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > tbody > tr > td {
  padding: 6px 8px;
  font-size: var(--adagin-font-size-body);
}

.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th.ta-col-time {
  width: 5rem;
  min-width: 0; /* as above: the page's 120px header minimum */
  padding-left: 4px;
  padding-right: 4px;
}

.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th.ta-col-hours {
  width: 4.25rem;
  min-width: 0;
  padding-left: 4px;
  padding-right: 4px;
}

.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th.ta-col-employee {
  width: 8.5rem;
}

.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th.ta-select-col {
  padding-left: 6px;
  padding-right: 6px;
}

/* The employee cell wraps (a long name no longer sets the column's width). */
.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > tbody > tr > td:has(> strong > a.link) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* MOD-749: every shift block is exactly 250px, the legacy portal's width (table.detail { width: 250px }). MOD-602 had set width: auto here, so a block shrank
   to its content (236px and 191px in one 523px column on portal-qa); width, min-width and max-width are all pinned so neither the cell nor the scroll box
   can resize it. The block is denser inside; its inline-styled "break hours" line was 0.85em of 14px and stays 12px, the minimum, now the text is 13px.
   Text wraps between words, never inside a word that fits on a line (word-break stays normal). overflow-wrap: anywhere, not break-word, is the last resort for a
   single token wider than the block (a long farm / area / activity code with no spaces): both break only that token, but anywhere also lowers the cell's
   min-content width, so under automatic table layout the token cannot push the table past its pinned 250px. The outline is 1px teal #1F4F63 (--adagin-teal), the inner lines left as they were. */
.ta-screen table.table.dataTable.bordered.detail {
  box-sizing: border-box;
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  font-size: var(--adagin-font-size-body);
  border: var(--adagin-outline-width) solid var(--adagin-outline);
  overflow-wrap: anywhere;
  word-break: normal;
}

.ta-screen table.table.dataTable.bordered.detail > tbody > tr > td {
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* The Farm line: teal, weight 600 (the strong inside the link is bold, 700, by default). */
.ta-screen table.table.dataTable.bordered.detail > tbody > tr > td > a.link,
.ta-screen table.table.dataTable.bordered.detail > tbody > tr > td > a.link > strong {
  color: var(--adagin-teal);
  font-weight: 600;
}

/* ...except on an archived row, where the inline page style "tr.bg-archived td a" greys links (it was #888, 2.4:1). The Farm rule above out-ranks that one, so the
   state names the block and the strong again, one class and one element heavier than the Farm rule. An Exception row needs no override: the shift block
   inside it is white or peach / pale red (never dark red), so teal stays readable and out-ranks the inline "tr.bg-isexception td a" white (MOD-749). */
.ta-screen tr.bg-archived table.table.dataTable.bordered.detail > tbody > tr > td > a.link,
.ta-screen tr.bg-archived table.table.dataTable.bordered.detail > tbody > tr > td > a.link > strong {
  color: var(--adagin-text-muted);
}

/* An approved block keeps its green fill (inline rgb(162, 196, 94)) on an archived row too, where the muted grey of the inline "tr.bg-archived td" and of the
   link above is only 3.74:1. Its cells (times, worked / break, units, area, activity) and the Farm link keep the block's own dark navy text (9.0:1 there),
   one class heavier than the archived rules. Every other fill the archived block can show clears 4.5:1 with the muted colour. */
.ta-screen tr.bg-archived table.table.dataTable.bordered.detail.detailapproved > tbody > tr > td,
.ta-screen tr.bg-archived table.table.dataTable.bordered.detail.detailapproved > tbody > tr > td > a.link,
.ta-screen tr.bg-archived table.table.dataTable.bordered.detail.detailapproved > tbody > tr > td > a.link > strong {
  color: var(--adagin-dark-navy);
}

.ta-screen table.detail > tbody > tr > td {
  padding: 4px 6px;
}

/* MOD-602 review (JD, 11/10): corners as the primary buttons; blocks in a row line up along the top; the Edit / Bulk Edit / Split shift ghost buttons
   drop their border inside the block (the block's own lines frame them); the Gap / Back to back / Overlap label is italic under the hours. */
.ta-screen table.table.dataTable.bordered.detail {
  border-radius: var(--adagin-radius-block);
}

.ta-screen td.shift-detail {
  vertical-align: top;
}

.ta-screen .table td.shift-detail button.edit-detail-record {
  border: 0;
}

.ta-screen table.detail span[style*="font-size: 0.85em"] {
  font-size: 12px !important;
}

/* MOD-749: 5px a side, so two 250px blocks side by side are 2 x (250 + 10) = 520px, inside the 523px Shift column (6px made it 524px). */
.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > tbody > tr > td.shift-detail,
.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > tbody > tr > td.max-detail-column {
  padding-left: 5px;
  padding-right: 5px;
}

/* The hours block is nudged up 13px inline (position: relative; top: -13px) because Bootstrap padded the cell 12px and each figure cell 12px. The dense
   padding left no room for that: the figures rode up under the sticky header. The offset is cancelled here and the clearance comes from padding instead:
   6px on the cell + 6px above the figures puts the digits 14px under the row's top edge (13px before). The cell's 4px sides match the Hours / OT / Exp headers'. */
.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > tbody > tr > td:has(> table.isquery-select-col) {
  padding: 6px 4px;
}

/* The footer's figure cell spans the same three columns with the same side padding, so its thirds fall under the header's. */
.ta-screen table.dataTable:is(.is-query, .is-query-over) > tfoot > tr.ta-page-totals > td {
  padding-left: 4px;
  padding-right: 4px;
}

/* The hours block: Hours / OT / Exp in equal thirds of the three header columns. The cells carry inline width / min-width 120-200px, hence !important. */
.ta-screen table.isquery-select-col,
.ta-screen table.ta-page-totals-cells {
  table-layout: fixed;
  width: 100%;
}

.ta-screen table.isquery-select-col {
  top: 0 !important; /* the inline -13px, see above */
}

.ta-screen table.isquery-select-col > tbody > tr > td,
.ta-screen table.ta-page-totals-cells > tbody > tr > td {
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 2px;
}

.ta-screen table.isquery-select-col > tbody > tr > td {
  padding: 4px 2px 0;
}

.ta-screen table.isquery-select-col > tbody > tr:first-child > td {
  padding: 6px 2px 4px;
}

.ta-screen table.isquery-select-col > tbody > tr:first-child > td,
.ta-screen table.ta-page-totals-cells > tbody > tr:first-child > td {
  width: 33.333% !important;
}

/* The notes box no longer sets the block's width: it fills it, shorter, and still resizes vertically. */
.ta-screen table.isquery-select-col textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 4.5em;
  min-height: 2.75em;
  padding: 4px 6px;
  font-size: var(--adagin-font-size-body);
  line-height: 1.3;
  resize: vertical;
}

/* A row with a shift block is at least ~300px tall whatever the hours block holds, so there the notes box can have the 134px it had (rows=5) without making the row
   taller; a row with no shift block (no scans, rejected without a shift) is as tall as its hours block, so the box stays short there. */
.ta-screen table.dataTable > tbody > tr:has(> td.shift-detail) table.isquery-select-col textarea {
  height: 134px;
}

/* The category dropdown sits in a Bootstrap .col-xl-12 whose 15px side padding left the box 30px short of the block; its label ("Unexpected Hours") was clipped. */
.ta-screen table.isquery-select-col .col-xl-12 {
  padding-left: 0;
  padding-right: 0;
}

/* MOD-610's type line was Bootstrap's .small (80%), 10px on the 13px cell. */
.ta-screen .query-type-line {
  font-size: 12px;
}

/* ---------------------------------------------------------------------------------------------
 * MOD-619. Time & Attendance Approved tab: the day cell is one centred stack in all three layouts (day as expected, overtime, short time), in this order:
 *     the lock note (its line is kept, empty, on an open day so the hours line up across the row), the hours with the "..." menu beside them, the note,
 *     the query category. Only the T&A Approved tab draws .ta-day (the Wage Facilitator's markup is unchanged), and every rule is scoped to .ta-screen.
 * ------------------------------------------------------------------------------------------- */
.ta-screen .approved-attendance .ta-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.ta-screen .approved-attendance .ta-day-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.25rem; /* the line stays when there is no lock */
}

.ta-screen .approved-attendance .ta-day-values {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--adagin-space-2);
}

/* The figures are one group: two figures sit side by side while the day column has room for them and go one above the other when it has not; the
   menu stays beside them either way. */
.ta-screen .approved-attendance .ta-day-values {
  max-width: 100%;
}

.ta-screen .approved-attendance .ta-day-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--adagin-space-2);
  min-width: 0;
}

.ta-screen .approved-attendance .ta-day-hours {
  font-variant-numeric: tabular-nums;
}

.ta-screen .approved-attendance .ta-day-category {
  max-width: 100%;
  min-width: 0;
}

/* ---------------------------------------------------------------------------------------------
 * MOD-619 (week grid width). Time & Attendance Approved tab: the week grid fits its frame instead of scrolling sideways inside it.
 *     The table was laid out automatically, so each column was as wide as its widest piece that could not shrink, whatever the window: 1,929 px on QA in a
 *     1,605 px frame at 1,920, and the same table at 1,440 and 1,366. A day column was 217 px: the note (11rem of one-line text + its paperclip, 193 px) or
 *     the category picker (the whole name on one line + 30 px of column padding + 28 px of button padding and icons), "Wage confirmed" on one line (110 px)
 *     and two figures with the menu (124 px), each + Bootstrap's 24 px of cell padding. The outer columns were 748 px: a 14 px one-line header word
 *     ("NIGHTSHIFT" 85 px, "EXPECTED" 73 px) + 24 px, and the 111 px Unapprove button + 24 px.
 *     Now the table's layout is fixed: the eight outer columns have the widths below, the seven days share the rest equally, and what is inside a cell
 *     follows its column. Density is MOD-614's, the page's other lists: body 13px, headers 12px / 1.25, 6px / 8px padding. Three steps:
 *       - 1,840 px and wider: one line for the lock note, the two figures and the picker, as before;
 *       - below 1,840 px (a day column under 117 px): tighter outer columns and padding, the table takes the frame's 15 px side padding, the lock note takes
 *         two lines (so the line kept on an open day is two lines high and the hours still line up), the note is its text only, on up to two lines;
 *       - below 1,400 px: the tightest columns, the dates break after the month, the menu button is 24 px wide, the picker's text is 12px. The grid needs
 *         1,040 px: a 1,366 px window leaves 1,047 px with both scrollbars showing (1,081 px without), anything narrower scrolls sideways as it did.
 *     Two figures go one above the other (.ta-day-figures wraps) wherever the day column has no room for both; the menu stays beside them.
 *     Every rule is scoped to .ta-screen, which the Wage Facilitator does not have: its grid draws the same day cells and keeps its look.
 * ------------------------------------------------------------------------------------------- */
.ta-screen table.approved-attendance {
  table-layout: fixed;
}

.ta-screen table.approved-attendance > thead > tr > th {
  box-sizing: border-box;
  padding: 8px 6px;
  font-size: var(--adagin-label-font-size);       /* MOD-756: 12px / 18px, as every table header */
  line-height: var(--adagin-label-line-height);
}

.ta-screen table.approved-attendance > tbody > tr > td,
.ta-screen table.approved-attendance > tfoot > tr > td {
  padding: 6px 8px;
  font-size: var(--adagin-font-size-body);
}

/* The day cells (columns 3 to 9) and the Actions cell. */
.ta-screen table.approved-attendance > tbody > tr > td:nth-child(n+3):nth-child(-n+9) {
  padding-left: 6px;
  padding-right: 6px;
}

.ta-screen table.approved-attendance > tbody > tr > td:last-child {
  padding-left: 4px;
  padding-right: 4px;
}

/* A total is never broken over two lines. */
.ta-screen table.approved-attendance > tbody > tr > td:nth-child(n+10):nth-child(-n+13),
.ta-screen table.approved-attendance > tfoot > tr > td {
  white-space: nowrap;
}

.ta-screen table.approved-attendance > tfoot > tr > th {
  font-size: var(--adagin-font-size-body);
}

/* The outer columns: Employee, Department, NightShift hours, Week Total, Expected hours, Overtime Total, Actions. Each fits its longest header
   word and its widest fixed content (a total, the Unapprove button); names and departments wrap. The day columns have no width and share what is left. */
.ta-screen table.approved-attendance > thead > tr > th:nth-child(1) { width: 96px; }
.ta-screen table.approved-attendance > thead > tr > th:nth-child(2) { width: 60px; }
.ta-screen table.approved-attendance > thead > tr > th:nth-child(10) { width: 86px; }
.ta-screen table.approved-attendance > thead > tr > th:nth-child(11) { width: 58px; }
.ta-screen table.approved-attendance > thead > tr > th:nth-child(12) { width: 76px; }
.ta-screen table.approved-attendance > thead > tr > th:nth-child(13) { width: 74px; }
.ta-screen table.approved-attendance > thead > tr > th:nth-child(14) { width: 120px; }

.ta-screen .approved-attendance .ta-day-lock {
  max-width: 100%;
}

/* The category picker (the searchselect _EditControl draws from the hidden input): no wider than the day column. Its column padding goes, the name wraps
   instead of running on one line (it was a nowrap float), and the arrow is placed on the button, not after the name, so it never takes a line of its own.
   The list it opens keeps Bootstrap's 10rem minimum, so it is as wide as before under a narrow button. */
.ta-screen .approved-attendance .ta-day-category > div {
  max-width: 100%;
}

.ta-screen .approved-attendance .ta-day-category .col-xl-12 {
  padding: 0;
}

.ta-screen .approved-attendance .ta-day-category .searchselect > .dropdown-toggle {
  min-width: 0; /* styles.css: .btn 80px */
  padding: 6px 18px 6px 4px;
  font-size: var(--adagin-font-size-body);
  overflow-wrap: break-word;
  text-align: center;
  white-space: normal;
}

.ta-screen .approved-attendance .ta-day-category .searchselect > .dropdown-toggle > span {
  float: none !important;
}

.ta-screen .approved-attendance .ta-day-category .searchselect > .dropdown-toggle > .clearinput-icon {
  padding: 0 0 0 3px;
  font-size: 14px;
}

.ta-screen .approved-attendance .ta-day-category .searchselect > .dropdown-toggle::after {
  position: absolute;
  top: 50%;
  right: 2px;
  margin: 0;
  transform: translateY(-50%);
}

/* MOD-622's "To review" / "Rejected": the word goes under the icon when the day column is narrower than the one-line button. */
.ta-screen .approved-attendance td button.ta-day-toreview,
.ta-screen .approved-attendance td button.ta-day-rejected {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  white-space: normal;
}

@media (max-width: 1839.98px) {
  .ta-screen .adagin-table-scroll:has(> table.approved-attendance) {
    padding-left: 0;
    padding-right: 0;
  }

  .ta-screen table.approved-attendance > thead > tr > th {
    padding-left: 3px;
    padding-right: 3px;
  }

  .ta-screen table.approved-attendance > tbody > tr > td,
  .ta-screen table.approved-attendance > tfoot > tr > td,
  .ta-screen table.approved-attendance > tbody > tr > td:nth-child(n+3):nth-child(-n+9) {
    padding-left: 4px;
    padding-right: 4px;
  }

  .ta-screen table.approved-attendance > tbody > tr > td:last-child {
    padding-left: 3px;
    padding-right: 3px;
  }

  .ta-screen table.approved-attendance > thead > tr > th:nth-child(1) { width: 88px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(2) { width: 52px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(10) { width: 80px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(11) { width: 54px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(12) { width: 70px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(13) { width: 68px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(14) { width: 110px; }

  /* The row's Confirm / Unapprove (MOD-612: 6rem minimum, 0.625rem sides) is its label's width. */
  .ta-screen .approved-attendance td > a.unapproval-reject-item,
  .ta-screen .approved-attendance td > a.unapproval-confirm-item {
    min-width: 0;
    padding: 0 0.375rem;
  }

  .ta-screen .approved-attendance .ta-day-values {
    gap: var(--adagin-space-1);
  }

  /* "Wage confirmed" takes two lines, the icon on the first; the line kept on an open day is as high, so the hours line up across the row. */
  .ta-screen .approved-attendance .ta-day-lock {
    min-height: 2rem;
  }

  .ta-screen .approved-attendance td .ta-day-lock a.unapproval-lock-item:has(> .ta-lock-note) {
    display: block;
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .ta-screen .approved-attendance .ta-day-lock .ta-lock-note {
    white-space: normal;
  }

  /* The picker's arrow sits under the name, in the button's bottom padding, so every line of the name has the button's whole width. */
  .ta-screen .approved-attendance .ta-day-category .searchselect > .dropdown-toggle {
    padding: 3px 4px 14px;
  }

  .ta-screen .approved-attendance .ta-day-category .searchselect > .dropdown-toggle::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
  }

  .ta-screen .approved-attendance td button.ta-day-toreview,
  .ta-screen .approved-attendance td button.ta-day-rejected {
    padding: 0.125rem 0.25rem;
    line-height: 1rem;
  }
}

@media (max-width: 1399.98px) {
  /* Seven 68 px day columns + the outer columns below. Under that the grid scrolls sideways in its frame rather than overlap its own cells. */
  .ta-screen table.approved-attendance {
    min-width: 1040px;
  }

  .ta-screen table.approved-attendance > thead > tr > th {
    padding-left: 2px;
    padding-right: 2px;
  }

  .ta-screen table.approved-attendance > tbody > tr > td:nth-child(n+3):nth-child(-n+9) {
    padding-left: 3px;
    padding-right: 3px;
  }

  .ta-screen table.approved-attendance > tbody > tr > td:last-child {
    padding-left: 2px;
    padding-right: 2px;
  }

  .ta-screen table.approved-attendance > thead > tr > th:nth-child(1) { width: 84px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(2) { width: 50px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(10) { width: 77px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(11) { width: 52px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(12) { width: 67px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(13) { width: 65px; }
  .ta-screen table.approved-attendance > thead > tr > th:nth-child(14) { width: 107px; }

  /* The day's date ("14-09-2026", 68 px, kept on one line by section 11) breaks after the month. */
  .ta-screen .adagin-table-scroll > table.approved-attendance > thead th span {
    white-space: normal;
  }

  .ta-screen .approved-attendance .ta-day-values {
    gap: 2px;
  }

  .ta-screen .table.approved-attendance td .day-menu .day-menu-btn {
    min-width: 1.5rem;
  }

  .ta-screen .approved-attendance .ta-day-category .searchselect > .dropdown-toggle {
    padding: 3px 2px 14px;
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------------------------------
   MOD-630: the T&A tab count pill. One shape for every tab. MOD-681: the amber and green pill colours are retired. A pill is grey
   (#2F3A44 on #E3E7EB 9.34:1, computed in TimeAndAttendanceTabCountPillTests); on the selected tab it is white with a secondary-blue number
   (--adagin-teal on --adagin-white). Only Unapproved, Unapproved Overheads and Rejected Records have a pill (MOD-647).
   The old solid orange fill on the Overheads tab is gone.
   MOD-877: the two tabs that hold work to approve (Unapproved, Unapproved Overheads) show their count in orange (#101729 on #E76E09 5.64:1, computed in TimeAndAttendanceTabCountPillTests) while that tab is
   NOT the open one and the count is above 0 (the hidden pill takes no colour); the open tab keeps white on blue, and Rejected Records stays grey. */
:root {
  --ta-tab-count-grey-bg: #E3E7EB;   --ta-tab-count-grey-text: #2F3A44;   --ta-tab-count-grey-border: #7B8794;
  --ta-tab-count-wait-bg: #E76E09;   --ta-tab-count-wait-text: #101729;
}

.ta-tab-count {
  display: inline-block;
  min-width: 1.75em;
  margin-left: 0.35em;
  padding: 0 0.5em;
  border: 1px solid transparent;
  border-radius: var(--adagin-radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  vertical-align: baseline;
  color: var(--ta-tab-count-grey-text);
  background-color: var(--ta-tab-count-grey-bg);
}

.ta-tab-count[hidden] { display: none; }

/* MOD-681: the pill sits inside the tab after its name (the mockup's tab strip); a tab with no pill (count 0, or Approved / Approved Piecework) is just its
   name. MOD-647's corner badge, which kept labels still when a pill came or went, is replaced by this inline pill. The selected tab's pill is white. */
.ta-nav .nav-link .ta-tab-count { margin-left: var(--adagin-space-2); }
.ta-nav .nav-link.active .ta-tab-count { color: var(--adagin-teal); background-color: var(--adagin-white); }

.ta-nav .nav-link:not(.active) .ta-tab-count[data-count-for="pending"],
.ta-nav .nav-link:not(.active) .ta-tab-count[data-count-for="overhead"] { color: var(--ta-tab-count-wait-text); background-color: var(--ta-tab-count-wait-bg); }

/* MOD-883 (WF0-1): the Wage Facilitator's two tab tags (Validation Checks = employees to fix, T & A Approved = days to confirm), the T&A pill's shape in its
   work-to-do orange (the same two tokens, so the same computed contrast). The Wage Facilitator's tabs are Bootstrap's own (the open tab is white), so the tag is
   orange on every tab, open or not; it is hidden at 0 (WageFacilitatorPayrollChecks.js sets `hidden`). */
.wf-nav .wf-tab-count {
  display: inline-block;
  min-width: 1.75em;
  margin-left: var(--adagin-space-2);
  padding: 0 0.5em;
  border: 1px solid transparent;
  border-radius: var(--adagin-radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  vertical-align: baseline;
  color: var(--ta-tab-count-wait-text);
  background-color: var(--ta-tab-count-wait-bg);
}

.wf-nav .wf-tab-count[hidden] { display: none; }

/* ---------------------------------------------------------------------------------------------
 * MOD-684 hours layout. Time & Attendance UI pass 2, U6: hours as labelled lines, NT (normal time) first. Every rule is scoped to .ta-screen (the
 *     Time & Attendance page alone; the Wage Facilitator grid draws the same partials and keeps its look), and every colour is a token below.
 *     1. The Approved day block (ItemTemplates/_ApprovedAttendanceDay, TaDay): every day that holds a record is one fixed-size block,
 *        --ta-day-block-w x --ta-day-block-h (MOD-686 sizes the empty days from the same two properties). A slim header line (the lock note on
 *        the left, .ta-day-block__header-end kept for the MOD-685 note icon on the right), NT 16px bold, the second figure 14px bold (OT, ST, PL
 *        or ABS), the note, then the query category as a 12px word (the picker on an open query day).
 *        Width: a block is 172px where its day column has the room (a table of about 1,890px, a window of about 2,190px with the navigation open);
 *        below that it follows the column (MOD-619's fixed layout shares what the outer columns leave between the seven days), down to
 *        --ta-day-block-min-w (130px: the widest NT line, "NT 10h 30m", with the "..." menu beside it). The table's minimum is seven minimum blocks
 *        with their 4px cell padding and the outer columns' widest step (630px): 1,596px, which a 1,920px window holds (1,920 - 217 navigation
 *        - 68 page padding - 34 scrollbars = 1,601; the frame's side padding is given up at every width, as MOD-619 already did below 1,840px).
 *        Narrower windows (1,440: 1,121px; 1,366: 1,047px) scroll the grid sideways in its frame rather than squeeze a block under its content.
 *        Each line of the block stays one line and ends in an ellipsis rather than run into the next piece.
 *     2. The labels (NT, OT, ST, PL, ABS, OVER, EXP): class .ta-hours-label, never the weekday pills' .ta-day-label (their selected state is white on
 *        teal); 12px, Adagin dark navy; the key bar above the Approved grid uses the same labels.
 *     3. The Approved week totals: OT total in the overtime red; the page totals row's NT and OT per day.
 *     4. The Unapproved / Unapproved Overheads / Rejected Records Hours column (ItemTemplates/_AttendanceRow) and its Page totals: NT, then OT
 *        or ST or OVER, then EXP small and last. OVER (hours above the expected, none recorded as overtime) is the muted EXP colour. An Exception row (white on dark red) keeps its white text.
 *     MOD-748 (pass 4, P4-3) restyles the block: 130 to 172 x 110 (the 130px floor is by decision, not the ticket's 150px: a 150px floor makes the seven-day grid at least 1,736px, wider than the 1,601px usable at 1,920, so it would scroll sideways), a 1px #1F4F63 outline, radius 8; a 24px top bar (the lock button and the note icon on the left, the day
 *        menu on the right; the lock's explanation is .ta-pop); NT and the second figure as lines with the label left and the figure right; the query dropdown at the block's
 *        full width at the bottom, 28px. The older header rules above (the "Wage confirmed" words, the MOD-685 slot) no longer apply to the block.
 *     Contrast: every figure colour is at least 4.5:1 on white and on each row tint (TimeAndAttendanceHoursLayoutStyleTests).
 * ------------------------------------------------------------------------------------------- */
:root {
  --ta-day-block-w: 172px;
  --ta-day-block-min-w: 130px;
  --ta-day-block-h: 110px;
  --ta-day-block-outline: var(--adagin-outline);          /* MOD-756: the shared outline, #1F4F63 */
  --ta-day-dropdown-border: var(--adagin-control-border-tinted);   /* MOD-756: #63748D */
  --ta-hours-label: var(--adagin-dark-navy);
  --ta-hours-nt: var(--ta-state-normal-text);
  --ta-hours-ot: var(--adagin-day-overtime);
  --ta-hours-st: var(--adagin-day-short-time);
  --ta-hours-pl: var(--adagin-day-paid-leave);
  --ta-hours-abs: var(--adagin-day-absent);
  --ta-hours-exp: #48566F;
  --ta-hours-over: var(--ta-hours-exp);
  --ta-frozen-col-bg: var(--adagin-white);
  --ta-frozen-col-bg-head: var(--adagin-table-header-bg);
  --ta-frozen-col-bg-totals: var(--adagin-off-white);
  --ta-frozen-col-edge: 3px 0 4px -1px rgba(16, 23, 41, 0.22);
  --ta-frozen-col-z: 2;
  --ta-frozen-col-z-head: 101;
}

/* 1. The Approved day block. */
.ta-screen table.approved-attendance {
  min-width: calc(7 * (var(--ta-day-block-min-w) + 8px) + 570px); /* seven minimum blocks with their cell padding, and the seven outer columns (MOD-789: one Department column) */
}

.ta-screen .adagin-table-scroll:has(> table.approved-attendance) {
  padding-left: 0;
  padding-right: 0;
}

.ta-screen table.approved-attendance > tbody > tr > td:nth-child(n+3):nth-child(-n+9) {
  padding-left: 4px;
  padding-right: 4px;
}

.ta-screen .approved-attendance .ta-day.ta-day-block {
  box-sizing: border-box;
  width: min(var(--ta-day-block-w), 100%);
  min-width: var(--ta-day-block-min-w);
  height: var(--ta-day-block-h);
  margin: 0 auto;
  padding: 0 6px 6px;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  position: relative; /* the lock's and the note's popover (.ta-pop) is placed against the block */
  border: 1px solid var(--ta-day-block-outline);
  border-radius: var(--adagin-radius-block);
}

.ta-screen .approved-attendance .ta-day-block__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  height: 24px;
  min-height: 24px;
  font-size: 12px;
  line-height: 16px;
}

.ta-screen .approved-attendance .ta-day-block__header .ta-day-lock {
  flex: none;
  min-width: 0;
  min-height: 0;
  justify-content: flex-start;
}

/* Nothing to show on an open day: the bar needs no placeholder (its height is fixed). */
.ta-screen .approved-attendance .ta-day-block__header .ta-day-lock--none {
  display: none;
}

.ta-screen .approved-attendance .ta-day-block__note {
  display: inline-flex;
  flex: none;
}

.ta-screen .approved-attendance .ta-day-block__header-end {
  display: inline-flex;
  flex: none;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 16px;
  min-height: 16px;
}

/* MOD-748: the bar's icon controls, 24px hit areas around 16px Material Symbols (the button sprite). Lock and note are buttons (the note is MOD-685's icon),
   so the keyboard reaches them; the menu is the day menu's own button. */
.ta-screen .approved-attendance td .ta-day-block .ta-day-block__header :is(.ta-pop-btn, .ta-day-note-icon, .day-menu .day-menu-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.ta-screen .approved-attendance td .ta-day-block .ta-day-block__header :is(.ta-day-note-icon, .day-menu .day-menu-btn) {
  color: var(--ta-day-block-outline);
}

.ta-screen .approved-attendance td .ta-day-block .ta-day-block__header button.ta-lock-btn {
  color: var(--adagin-dark-navy);
}

.ta-screen .approved-attendance td .ta-day-block .ta-day-block__header :is(.ta-pop-btn, .ta-day-note-icon, .day-menu .day-menu-btn):is(:hover, :focus-visible) {
  background: var(--adagin-btn-tint-hover);
  opacity: 1;
}

.ta-screen .approved-attendance td .ta-day-block .ta-day-block__header :is(.ta-pop-btn, .ta-day-note-icon, .day-menu .day-menu-btn):focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: var(--adagin-btn-focus-offset);
}

.ta-screen .approved-attendance .ta-day-block__header .adagin-btn__svg {
  width: 16px;
  height: 16px;
}

/* The explanation of the lock (and a locked day's note): on hover, on keyboard focus, or opened by a click (.is-open, TimeAndAttendance.js); Escape closes it. */
.ta-screen .approved-attendance .ta-day-block .ta-pop {
  display: none;
  position: absolute;
  top: 26px;
  right: 4px;
  left: 4px;
  z-index: 5;
  padding: 4px 8px;
  border-radius: var(--adagin-radius-menu); /* MOD-756: a popover */
  background: var(--ta-day-block-outline);
  box-shadow: 0 2px 6px rgba(16, 23, 41, 0.28);
  color: var(--adagin-white);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  /* Stay inside the block (below the bar, above its bottom edge) so the table's scroll box never clips it; a longer note scrolls inside the popover. */
  max-height: calc(var(--ta-day-block-h) - 34px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ta-screen .approved-attendance .ta-day-block .ta-pop-host:is(:hover, :focus-within):not(.is-dismissed) .ta-pop,
.ta-screen .approved-attendance .ta-day-block .ta-pop-host.is-open .ta-pop {
  display: block;
}

.ta-screen .approved-attendance .ta-day-block .ta-day-values {
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}

.ta-screen .approved-attendance .ta-day-block .ta-day-values > .day-menu {
  flex: none;
}

.ta-screen .approved-attendance .ta-day-block .ta-day-figures {
  flex: 1 1 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

.ta-screen .approved-attendance .ta-day-block .ta-day-line {
  max-width: 100%;
  justify-content: space-between; /* the label on the left, the figure on the right */
}

.ta-screen .approved-attendance .ta-day-block .ta-day-hours {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ta-screen .approved-attendance .ta-day-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.ta-screen .approved-attendance .ta-day-block .ta-day-line--nt {
  min-height: 20px;
}

.ta-screen .approved-attendance .ta-day-block .ta-day-line:not(.ta-day-line--nt) {
  min-height: 18px;
}

.ta-screen .approved-attendance .ta-day-hours--nt {
  color: var(--ta-hours-nt);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.ta-screen .approved-attendance .ta-day-hours:is(.ta-day-hours--ot, .ta-day-hours--st, .ta-day-hours--pl, .ta-day-hours--abs, .ta-day-hours--over) {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.ta-screen .approved-attendance .ta-day-hours--ot { color: var(--ta-hours-ot); }
.ta-screen .approved-attendance .ta-day-hours--st { color: var(--ta-hours-st); }
.ta-screen .approved-attendance .ta-day-hours--pl { color: var(--ta-hours-pl); }
.ta-screen .approved-attendance .ta-day-hours--abs { color: var(--ta-hours-abs); }
.ta-screen .approved-attendance .ta-day-hours--over { color: var(--ta-hours-over); }

.ta-screen .approved-attendance .ta-day-block .ta-day-category {
  margin-top: auto; /* the category is the block's last line */
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.ta-screen .approved-attendance .ta-day-block .ta-day-category--normal {
  color: var(--ta-hours-nt);
  font-weight: 600;
}

/* The category word on one line (a locked day's name, "Normal time"); the picker's list is not inside these, so nothing clips it. */
.ta-screen .approved-attendance .ta-day-block .ta-day-category--normal,
.ta-screen .approved-attendance td .ta-day-block .ta-day-category > div:not(:has(.searchselect)) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* MOD-748: the query dropdown is the block's last line at its full width: 28px high, radius 6, transparent fill, 1px border; a locked day's category name is the same
   box at 60% (the picker is not drawn there). The padding and the arrow are set at every width (the narrower steps above put the arrow under the name). */
.ta-screen .approved-attendance td .ta-day-block .ta-day-category .searchselect {
  display: block;
  width: 100%;
}

.ta-screen .approved-attendance td .ta-day-block .ta-day-category .searchselect > .dropdown-toggle {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 28px;
  overflow: hidden;
  padding: 0 22px 0 8px;
  border: 1px solid var(--ta-day-dropdown-border);
  border-radius: var(--adagin-radius-input);
  background: transparent;
  font-size: 12px;
  line-height: 26px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ta-screen .approved-attendance td .ta-day-block .ta-day-category:not(.ta-day-category--normal) > div:not(:has(.searchselect)) {
  box-sizing: border-box;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--ta-day-dropdown-border);
  border-radius: var(--adagin-radius-input);
  line-height: 26px;
  opacity: 0.6;
  text-align: left;
}

.ta-screen .approved-attendance td .ta-day-block .ta-day-category .searchselect > .dropdown-toggle::after {
  top: 50%;
  right: 6px;
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
}

/* 2. The labels, and the key bar above the Approved grid. */
.ta-screen .ta-hours-label {
  color: var(--ta-hours-label);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: help;
}

.ta-screen .ta-hours-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 8px;
  color: var(--ta-hours-label);
  font-size: 12px;
}

.ta-screen .ta-hours-key .ta-hours-label {
  cursor: default;
}

/* 3. The Approved week totals and the page totals row. */
.ta-screen table.approved-attendance td.ta-total-ot {
  color: var(--ta-hours-ot);
}

.ta-screen table.approved-attendance > tfoot > tr.ta-page-totals > td.ta-page-totals-day .ta-day-line {
  justify-content: center;
}

.ta-screen table.approved-attendance > tfoot > tr.ta-page-totals > td.ta-page-totals-day .ta-day-hours {
  font-size: var(--adagin-font-size-body);
  line-height: 16px;
}

/* 4. The Hours column of the Unapproved lists and Rejected Records, and their Page totals.
 *    MOD-684 column widths. The Hours heading, its body cell and its Page totals cell are ONE table column (they spanned three: the body had one cell
 *    over three columns no cell sized, so under the table's automatic layout those columns took nearly all its spare width, ~950px at 1,920, while
 *    Shift wrapped to 6+ lines and Actions shrank to its narrowest, ~110px, stacking the category, Approve and the menu on three lines). The
 *    widths sit on the header cells (a cell's width here is its content box; the padding adds to it):
 *    - MOD-747: the Hours and Actions columns are ONE column, "Hours, query and actions" (th.ta-col-actions), holding the row's summary card: the hours,
 *      the category at the card's full width, then one line of buttons. The widest line is Rejected Records': the Rejected chip (57px in Inter), Unreject
 *      (MOD-618's 6.5rem) and the 28px three-dot button with their 4px gaps, 57 + 4 + 104 + 4 + 28 = 197px, inside the card's 8px padding and 1px border
 *      (18px): 215px. So one width for every list: 15rem (240px), 14rem (224px) at 1,500px and under;
 *    - the checkbox column a fixed 1.25rem, so the only column without a width is Shift (or Shifts): it takes the rest of the table. */
.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th.ta-col-actions {
  width: 15rem;
}

.ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th.ta-select-col {
  width: 1.25rem;
  min-width: 0;
}

@media (width <= 1500px) { /* the MOD-681 / MOD-683 breakpoint, in range syntax: TimeAndAttendanceButtonHierarchyTests reads the first "max-width: 1500px" query as MOD-681's */
  .ta-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th.ta-col-actions {
    width: 14rem;
  }
}

.ta-screen table.isquery-select-col > tbody > tr:first-child > td.ta-hours {
  width: 100% !important; /* one cell over the block's three columns (MOD-614 split the first row in thirds) */
}

.ta-screen .ta-hours-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1.3;
}

.ta-screen .ta-hours-line--nt .ta-hours-figure { color: var(--ta-hours-nt); }
.ta-screen .ta-hours-line--ot .ta-hours-figure { color: var(--ta-hours-ot); }
.ta-screen .ta-hours-line--st .ta-hours-figure { color: var(--ta-hours-st); }
.ta-screen .ta-hours-line--over .ta-hours-figure { color: var(--ta-hours-over); }

.ta-screen .ta-hours-line--exp,
.ta-screen .ta-hours-line--exp .ta-hours-figure {
  color: var(--ta-hours-exp);
  font-size: 12px;
}

.ta-screen .ta-hours-line--exp .ta-hours-figure strong {
  font-weight: 400;
}

.ta-screen .table tr.bg-isexception .ta-hours-line,
.ta-screen .table tr.bg-isexception .ta-hours-line .ta-hours-label,
.ta-screen .table tr.bg-isexception .ta-hours-line .ta-hours-figure {
  color: inherit;
}

/* The Approved tab's four week-total headings: the rule's tooltip is on a focusable label (Bootstrap shows it on hover and on focus), marked as abbr is. */
.ta-screen table.approved-attendance > thead > tr > th.ta-total-head > .ta-total-head__label {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  white-space: normal; /* section 11 (.adagin-sticky-stack ... thead th span, 0-2-4) keeps a header span on one line; in these narrow fixed-layout columns "NT TOTAL" and "NIGHT (IN NT)" ran out of the cell and were cut by the next one. Two lines, balanced ("Night / (in NT)"). */
  text-wrap: balance;
}

.ta-screen table.approved-attendance > thead > tr > th.ta-total-head > .ta-total-head__label:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* 5. The frozen Employee column. Below about 1,600px the Approved grid scrolls sideways in .adagin-table-scroll (overflow: auto), so the Employee cell (the
   header's, every row's and the Page totals label, all .ta-name-cell, the table's first column) sticks to the left edge of that box and the rest slides under it.
   Approved rows carry no tint (no bg-* class on the tr or the td; the day colours are on the figures), so the cell is opaque in the row's own colour: white in the
   body, the header blue in the head, off-white in the totals row. Stacking: the body cell (--ta-frozen-col-z, 2) is above the day blocks (unpositioned or
   auto) and below the sticky header row (99), so rows pass under the header; the header cell (--ta-frozen-col-z-head, 101) is above every other header
   cell (99) and an open sort header (100), so the day headers slide under it. Open menus stay above it: the day "..." menu (1035, on body) and the
   dropdown lists (1000) are far higher. The cell is not a positioned container for anything it holds (the name link and the sort button keep their own). */
.ta-screen table.approved-attendance > :is(thead, tbody, tfoot) > tr > .ta-name-cell {
  position: sticky;
  left: 0;
  z-index: var(--ta-frozen-col-z);
  background-color: var(--ta-frozen-col-bg);
  box-shadow: var(--ta-frozen-col-edge);
}

.ta-screen table.approved-attendance > thead > tr > th.ta-name-cell {
  z-index: var(--ta-frozen-col-z-head);
  background-color: var(--ta-frozen-col-bg-head);
}

.ta-screen table.approved-attendance > tfoot > tr.ta-page-totals > th.ta-name-cell {
  position: sticky;
  z-index: var(--ta-frozen-col-z);
  background-color: var(--ta-frozen-col-bg-totals);
}
/* MOD-1112: the Department column is frozen with Employee. It sticks at left: the Employee column's width (--ta-col-employee-w, the width the th and so the whole
   column takes: 180px, 118px at 1,399.98px and under, so at 1,366px too), body, header and Page totals slot alike, opaque in the same colours as the Employee
   cells and at the same stack levels (body 2, below the sticky header row 99; head 101, above the day headers and the sort header), so no row text shows through the
   pinned corner. The edge shadow is on this cell, the last frozen one; Employee keeps its own, which the Department cell paints over. */
.ta-screen table.approved-attendance > tbody > tr > td.ta-dept-cell,
.ta-screen table.approved-attendance > tfoot > tr.ta-page-totals > td:nth-child(2) {
  position: sticky;
  left: var(--ta-col-employee-w);
  z-index: var(--ta-frozen-col-z);
  background-color: var(--ta-frozen-col-bg);
  box-shadow: var(--ta-frozen-col-edge);
}

.ta-screen table.approved-attendance > thead > tr > th.ta-dept-head {
  position: sticky;
  left: var(--ta-col-employee-w);
  z-index: var(--ta-frozen-col-z-head);
  background-color: var(--ta-frozen-col-bg-head);
  box-shadow: var(--ta-frozen-col-edge);
}

.ta-screen table.approved-attendance > tfoot > tr.ta-page-totals > td:nth-child(2) {
  background-color: var(--ta-frozen-col-bg-totals);
}

/* end MOD-684 hours layout */

/* MOD-876 (reworks MOD-750): the In and Out cells of the Unapproved lists and Rejected Records, every line centred. Line 1 is the actual EAS clock time
   (.ta-actual-time, 16px / 700, #101729; a dash in #48566F when there is none; "+1" on a later day). Lines 2 and 3 are "Scheduled" and the scheduled time
   (12px / 400, #1F4F63, no underline in any state): one link (a.ta-sched-time, opens the shift read only) or, when the caller could not open the shift,
   the same two lines as plain text (span.ta-sched-text). Line 4 is the tag (ViewModels/ShiftPunctuality.cs): 12px / 600, full round, no outline. The words
   always carry the meaning; the fill only repeats it: muted text with no fill for On time, an early clock-in and a No scan on an Absent day (#48566F), #8A4205
   for a late clock-in or an early clock-out, #A32314 for a clock-out after the end, #1F4F63 for No scan, #E8EEF8 with #1F4F63 text for Working; white text on
   the dark fills. Spans and a link, never a <label>, so the global label:not(.switch):not(.adagin-btn) rule (0,2,1) never reaches them; these rules are
   (0,4,1) and up, above main.css's `.table td a` (0,1,2). */
.ta-screen .table td.ta-sched-cell .ta-actual-time {
  display: block;
  color: var(--adagin-dark-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.ta-screen .table td.ta-sched-cell .ta-actual-time--none {
  color: var(--adagin-text-muted);
}

.ta-screen .table td.ta-sched-cell .ta-actual-time .ta-actual-plus {
  font-size: 12px;
  font-weight: 700;
}

.ta-screen .table td.ta-sched-cell a.ta-sched-time,
.ta-screen .table td.ta-sched-cell span.ta-sched-text {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
}

.ta-screen .table td.ta-sched-cell a.ta-sched-time:hover,
.ta-screen .table td.ta-sched-cell a.ta-sched-time:focus {
  text-decoration: none;
}

.ta-screen .table td.ta-sched-cell span.ta-sched-text {
  color: var(--adagin-teal);
}

.ta-screen .table td.ta-sched-cell .ta-sched-label,
.ta-screen .table td.ta-sched-cell .ta-sched-when {
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

.ta-screen .table td.ta-sched-cell .ta-punctuality {
  display: inline-block;
  margin-top: 2px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--adagin-radius-pill);
  outline: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.ta-screen .table td.ta-sched-cell .ta-punctuality--muted {
  background-color: transparent;
  color: var(--adagin-text-muted);
}

.ta-screen .table td.ta-sched-cell .ta-punctuality--warn,
.ta-screen .table td.ta-sched-cell .ta-punctuality--alert,
.ta-screen .table td.ta-sched-cell .ta-punctuality--noscan {
  color: #FFFFFF;
}

.ta-screen .table td.ta-sched-cell .ta-punctuality--warn { background-color: #8A4205; }   /* 7.3:1 with white */
.ta-screen .table td.ta-sched-cell .ta-punctuality--alert { background-color: #A32314; }  /* 7.5:1 with white */
.ta-screen .table td.ta-sched-cell .ta-punctuality--noscan { background-color: #1F4F63; } /* 9.3:1 with white */
.ta-screen .table td.ta-sched-cell .ta-punctuality--working {
  background-color: #E8EEF8;
  color: #1F4F63; /* 7.4:1 on the fill */
}

/* On the dark red Exception row the dark and grey texts are unreadable: follow the row's white, as the Hours lines do. */
.ta-screen .table tr.bg-isexception td.ta-sched-cell .ta-actual-time,
.ta-screen .table tr.bg-isexception td.ta-sched-cell span.ta-sched-text,
.ta-screen .table tr.bg-isexception td.ta-sched-cell .ta-punctuality--muted {
  color: inherit;
}

/* An Archived row greys its links on purpose (not active): the plain-text variant of the scheduled time follows. */
.ta-screen .table tr.bg-archived td.ta-sched-cell span.ta-sched-text {
  color: var(--adagin-text-muted);
}

/* ---------------------------------------------------------------------------------------------
 * MOD-620. Weekly Approval card (#approvalCard): percentage colour states and count pills.
 * ------------------------------------------------------------------------------------------- */
/* MOD-620: Weekly Approval card (#approvalCard, _AttendanceGraphs.cshtml; filled by showApprovalCard in TimeAndAttendance.js).
   The percentage is green only when approved = total (--full), amber for anything below that (--partial); the script decides from the counts,
   not the rounded number. Amber on white is 3.17:1, so it is used only at the percentage's 2.5rem bold (large text, 3:1), never for small text.
   Pills: navy (#101729) on --adagin-orange is 5.82:1 (the same amber and text as the day buttons' "to review" tag); white on
   --adagin-btn-success is 4.77:1. Both carry their count and a word, so colour is never the only cue. The pct selectors carry three classes so
   they out-rank the view's own `.attendance-charts .ta-approval__pct` rule. */
.attendance-charts .ta-approval__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--adagin-space-2); margin-top: var(--adagin-space-1); }
.attendance-charts .ta-approval__pill {
  display: inline-block;
  margin: 0;
  padding: 0 var(--adagin-space-3);
  border: 0;
  border-radius: var(--adagin-radius-pill);   /* MOD-688: a full pill */
  font-size: var(--adagin-font-size-body);
  font-weight: 700;
  line-height: 1.5rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* MOD-688: the pill fills and the percentage's colour moved to the "MOD-688 top cards" block at the end of this file. */
.attendance-charts button.ta-approval__pill { cursor: pointer; }
.attendance-charts button.ta-approval__pill:hover { filter: brightness(0.92); }
.attendance-charts button.ta-approval__pill:focus-visible { outline: 2px solid var(--adagin-black); outline-offset: 2px; }

/* MOD-624: the Query summary (Daily Query Types): a donut and a legend of counts. Only the items that filter (a real query category) are buttons: they
   alone get the pointer and the hover; "Normal Hours" and "Other" are plain rows. The legend is a column-major grid (rows/cols set inline by taLegendGrid): up to 6 types in one column, more split over two; 14 types need 7 rows
   (168px), so the card body is a 160px minimum that grows rather than clipping or scrolling. */
.attendance-charts .ta-qs { display: flex; align-items: center; gap: var(--adagin-space-3); height: 100%; padding: 0 var(--adagin-space-3); }
.attendance-charts .ta-qs__donut { flex: 0 0 auto; width: 130px; height: 130px; }
.attendance-charts #queryTypeCount { height: auto; min-height: 160px; }
.attendance-charts .ta-qs__legend { flex: 1 1 auto; min-width: 0; display: grid; grid-auto-flow: column; grid-template-columns: repeat(var(--ta-qs-cols, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--ta-qs-rows, 6), auto); column-gap: var(--adagin-space-3); }
.attendance-charts .ta-qs__item { display: flex; min-width: 0; align-items: center; gap: var(--adagin-space-2); width: 100%; margin: 0; padding: 0 var(--adagin-space-2); border: 0; background: none; text-align: left; font-size: var(--adagin-font-size-body); line-height: 1.5rem; color: inherit; }
.attendance-charts .ta-qs__swatch { flex: 0 0 auto; width: 0.75rem; height: 0.75rem; border-radius: 2px; }
.attendance-charts .ta-qs__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attendance-charts .ta-qs__count { flex: 0 0 auto; font-weight: 700; }
.attendance-charts .ta-qs__over { flex: 0 0 auto; font-size: var(--adagin-font-size-caption); line-height: 1; color: var(--adagin-dark-navy); opacity: 0.75; white-space: nowrap; }
.attendance-charts .ta-qs__swatch--none { background-color: transparent !important; border: 1px dashed currentColor; opacity: 0.5; }
.attendance-charts .ta-qs__item--click, .attendance-charts .ta-qs__slice--click { cursor: pointer; }
.attendance-charts .ta-qs__item--click:hover { background-color: var(--adagin-bg-subtle, rgba(0, 0, 0, 0.06)); }
.attendance-charts .ta-qs__slice--click:hover { opacity: 0.8; }
.attendance-charts .ta-qs__item--click:focus-visible { outline: 2px solid var(--adagin-black); outline-offset: 1px; }

/* MOD-625: Job costing: one bar row per activity, the Rand value and hours as text. MOD-641: the top 5 plus "Other (N activities)", which opens the rest (.ta-jc__rest).
   Six rows and the hint are 164px, so the 160px is the block's minimum (rows stay centred in it) and the card body takes the block's height.
   The bars are a neutral slate (--adagin-text-muted, 6.0:1 on the card's white): the blue is the query colour system's Paid Leave (--ta-state-*).
   The value column is as wide as the card's longest value (--ta-jc-value-ch, set by drawActivityCosting), so every track is one width and the bars one scale. */
.attendance-charts .ta-jc { min-height: 160px; padding: 0 var(--adagin-space-3); display: flex; flex-direction: column; justify-content: center; }
.attendance-charts .card-body.ta-chart-body:has(> .ta-jc) { height: auto; }
.attendance-charts .ta-jc__row { display: flex; align-items: center; gap: var(--adagin-space-2); width: 100%; margin: 0; padding: 0 var(--adagin-space-2); border: 0; background: none; text-align: left; font-size: var(--adagin-font-size-body); line-height: 1.5rem; color: inherit; }
.attendance-charts .ta-jc__name { flex: 0 1 max(28%, 10rem); /* MOD-641: 10rem holds "Other (12 activities)" and its chevron in a 1,366px window; it gives way (ellipsis) when the card is too narrow for it, the track and the value first */ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attendance-charts .ta-jc__track { flex: 1 0 2rem; min-width: 2rem; height: 0.75rem; /* MOD-641: never narrower than 2rem; the name shrinks before the track does */ }
.attendance-charts .ta-jc__bar { display: block; height: 100%; /* MOD-688: fill and rounded ends are in the "MOD-688 top cards" block */ }
.attendance-charts .ta-jc__value { flex: 0 0 auto; min-width: calc(var(--ta-jc-value-ch, 0) * 1ch); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.attendance-charts .ta-jc__hint { padding: 0 var(--adagin-space-2); font-size: 0.75rem; line-height: 1.25rem; color: var(--adagin-text-muted); }
.attendance-charts .ta-jc__row--click { cursor: pointer; }
.attendance-charts .ta-jc__row--click:hover { background-color: var(--adagin-bg-subtle, rgba(0, 0, 0, 0.06)); }
.attendance-charts .ta-jc__row--click:focus-visible { outline: 2px solid var(--adagin-black); outline-offset: 1px; }
/* MOD-644: a row that opens a list under it (taExpand* in TimeAndAttendance.js; not tied to what the row is): the button carries aria-expanded, its
   chevron points right when closed and down when open, and the list is hidden by its own `hidden` attribute. A card body holding an open list
   grows from its 160px instead of clipping it; closed, nothing changes. */
.attendance-charts .ta-expand__chevron { display: inline-block; width: 0.375rem; height: 0.375rem; margin: 0 0.5rem 0.125rem 0.125rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.1s; }
.attendance-charts .ta-expand__toggle[aria-expanded="true"] .ta-expand__chevron { transform: rotate(45deg); }
.attendance-charts .ta-expand__list[hidden] { display: none; }
.attendance-charts .card-body.ta-chart-body:has(.ta-expand__list:not([hidden])) { height: auto; min-height: 160px; }
/* MOD-644: Job costing's use of it: a shared activity name's farm lines, each a row of the same columns, set in under the name. */
.attendance-charts .ta-jc__line .ta-jc__name { padding-left: 1.125rem; color: var(--adagin-text-muted); }
.attendance-charts .ta-jc__line .ta-jc__bar { opacity: 0.7; /* a lighter tint of the rows' slate: 3.1:1 on white */ }
/* MOD-641: the rows inside Other are set in under it like a shared name's lines (the name only, so the tracks stay aligned); a shared name in there sets its lines in once more. */
.attendance-charts .ta-jc__rest > .ta-jc__row > .ta-jc__name { padding-left: 1.125rem; }
.attendance-charts .ta-jc__rest .ta-jc__line .ta-jc__name { padding-left: 2.25rem; }
/* MOD-641: the card's header: the heading, then Override and Units as one pair of equal outline buttons. The pair wraps under the heading when the
   card is too narrow for both, and the heading wraps in itself; nothing is cut off. */
.attendance-charts .ta-jc-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--adagin-space-1) var(--adagin-space-3); }
.attendance-charts .ta-jc-header__title { min-width: 0; }
.attendance-charts .ta-jc-header__actions { display: inline-flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: var(--adagin-btn-gap); }
.attendance-charts .ta-jc-header__actions .adagin-btn { min-width: 6rem; }
/* MOD-1081: the top cards row is compact (at most about 240px at 1,440px): the card's date sits on the heading's line (no w-100 / d-block in the view),
   a card's date <small> is inline (styles.min.css makes every <small> a block), and the cards are 8px apart (the row's columns carry 4px each side, the row's own side margin takes the same 4px back so the outer edges stay where
   they were; row-gap is the same 8px when the columns wrap). Scoped to .ta-top-cards: the payroll tiles reuse .attendance-charts. */
.row.attendance-charts.ta-top-cards { margin-left: calc(var(--adagin-space-1) * -1); margin-right: calc(var(--adagin-space-1) * -1); row-gap: var(--adagin-space-2); }
.attendance-charts.ta-top-cards > [class*="col-"] { padding-left: var(--adagin-space-1); padding-right: var(--adagin-space-1); }
.attendance-charts.ta-top-cards .card-header > small { display: inline; /* styles.min.css makes every <small> a block */ margin-left: var(--adagin-space-1); }
/* MOD-695: styles.min.css gives every <small> 13px; in the T&A screen (and its top cards) a small is a caption: 12px / 18px. Other pages keep the global small. */
.ta-screen small,
.attendance-charts.ta-top-cards .card-header > small { font-size: var(--adagin-font-size-caption); line-height: var(--adagin-line-height-caption); }
/* MOD-695: Bootstrap and styles.min.css give strong and b "bolder", which resolves to 900 inside a 600 parent; the scale has 700 as its top weight. */
.ta-screen strong,
.ta-screen b { font-weight: var(--adagin-font-weight-bold); }

/* ---------------------------------------------------------------------------------------------
 * MOD-628. Login: the button spans the form and Forgot Password is a centred link.
 * ------------------------------------------------------------------------------------------- */
/* MOD-628: Login. The Login button spans the form (class w-100 on the button; radius stays var(--adagin-btn-radius)); Forgot Password is a centred link. */
.login .login-inner .forgot-password {
  display: block;
  margin-top: var(--adagin-space-3);
  text-align: center;
}

/* ---------------------------------------------------------------------------------------------
 * MOD-621. Time & Attendance Approved tab and Wage Facilitator grids: the day cell with no record (ItemTemplates/_ApprovedAttendanceDay.cshtml).
 *     Outside the employee's contract: the contract icon, a link to the profile, in the grid's own link colour: the same --adagin-ta-grid-link
 *     that the employee name link (a.link in _TimeAndAttendance.cshtml / _WageFacilitator.cshtml) uses. NOT the Paid leave blue (--adagin-day-paid-leave = var(--blue)).
 *     Inside it: a grey dash (the muted text token), not a link. Both are >= 3:1 against the white and #F5F5F5 row backgrounds (graphical object).
 * ------------------------------------------------------------------------------------------- */
:root { --adagin-ta-grid-link: var(--adagin-teal); }   /* MOD-691: was blue */
a.ta-day-contract,
.table td a.ta-day-contract { color: var(--adagin-ta-grid-link, var(--adagin-teal)); }
a.ta-day-contract:hover { color: var(--adagin-ta-grid-link, var(--adagin-teal)); }
a.ta-day-contract:focus-visible { outline: 2px solid var(--adagin-black); outline-offset: 2px; }
.ta-day-none { color: var(--adagin-text-muted); }
/* MOD-686: on the T&A Approved tab the dash holds a day block's space (no outline), so a week's empty days line up with its records. */
.ta-screen .approved-attendance td .ta-day-none {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto;
  width: min(var(--ta-day-block-w), 100%); min-width: var(--ta-day-block-min-w); height: var(--ta-day-block-h);
}

/* ---------------------------------------------------------------------------------------------
 * MOD-622. Time & Attendance Approved tab only: the empty day inside the contract whose record is not approved (ItemTemplates/_ApprovedAttendanceDay.cshtml).
 *     MOD-686 (Design v28): each is a dashed block the size of a day block (--ta-day-block-w x --ta-day-block-h), its icon left of its word, a button
 *     that opens that list for the employee and day. "Pending" (button.ta-day-toreview: the record is on the Unapproved / Unapproved Overheads list):
 *     navy tint, dashed navy outline, navy text, clock icon. "Rejected" (the record is in Rejected Records): grey tint, dashed grey outline, slate
 *     text, thumbs-down icon. Both carry their word, so neither is colour alone. Text >= 4.5:1 on its tint, outline >= 3:1 on the white and striped rows.
 * ------------------------------------------------------------------------------------------- */
:root { --adagin-ta-pending-bg: #E6E9F0; --adagin-ta-rejected-bg: #E8ECF3; --adagin-ta-rejected-border: var(--adagin-control-border-tinted); --adagin-ta-rejected-text: #333D54; }
button.ta-day-toreview,
button.ta-day-rejected {
  display: flex; align-items: center; justify-content: center; gap: 0.375rem; box-sizing: border-box; margin: 0 auto; padding: 0 0.5rem;
  width: min(var(--ta-day-block-w), 100%); min-width: var(--ta-day-block-min-w); height: var(--ta-day-block-h); border-radius: var(--adagin-radius-block);
  font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap; cursor: pointer;
}
button.ta-day-toreview { color: var(--adagin-dark-navy); background-color: var(--adagin-ta-pending-bg); border: 1px dashed var(--adagin-dark-navy); }
button.ta-day-rejected { color: var(--adagin-ta-rejected-text); background-color: var(--adagin-ta-rejected-bg); border: 1px dashed var(--adagin-ta-rejected-border); }
button.ta-day-toreview:hover,
button.ta-day-rejected:hover { text-decoration: underline; }
button.ta-day-toreview:focus-visible,
button.ta-day-rejected:focus-visible { outline: 2px solid var(--adagin-black); outline-offset: 2px; }

/* ---------------------------------------------------------------------------------------------
 * MOD-682 begin. Time & Attendance button hierarchy (supersedes items 2 and 3 of the MOD-599 button standard above). T&A only: every rule is scoped to .ta-screen.
 *     Secondary (top bar, action pane, pager): white fill, 1px navy border, navy text and left icon, semibold. It is the shared button's colour tokens
 *     re-pointed, so the markup keeps the default variant, its ids and data-testids; the Filters panel's own outline buttons share the look.
 *     Tertiary (every button inside a table): no outline, no fill, navy text and icon (the thumbs lose their green and red), light navy tint on hover.
 *     States for both: hover = --adagin-btn-tint-hover, pressed / busy = --adagin-btn-tint-pressed, focus-visible = the shared 2px ring 2px away,
 *     disabled = the shared disabled colours (muted text 6.1:1, light border, no tint, not-allowed cursor).
 *     The table header's own controls (white on navy) are not touched here. On the dark-red exception row the text stays white and every state has
 *     its own rule below (white ring, translucent white tint, no outline), because the older exception-row rules out-rank the plain tertiary ones.
 * ------------------------------------------------------------------------------------------- */
.ta-screen .ta-bar .adagin-btn:not([data-state="success"]),
.ta-screen .ta-menu > .adagin-btn:not([data-state="success"]),
.ta-screen .ta-menu__actions > .adagin-btn:not([data-state="success"]),
.ta-screen .ta-menu__actions .ta-more-menu > .adagin-btn:not([data-state="success"]),
.ta-screen .ta-pager > .adagin-btn:not([data-state="success"]) {
  --btn-bg: var(--adagin-white);
  --btn-bg-hover: var(--adagin-btn-tint-hover);
  --btn-bg-pressed: var(--adagin-btn-tint-pressed);
  --btn-fg: var(--adagin-dark-navy);
  --btn-border: var(--adagin-dark-navy);
  font-weight: 600;
}

.ta-screen .ta-bar .adagin-btn:is(:disabled, [aria-disabled="true"], .disabled):not([aria-busy="true"]):not([data-state="success"]),
.ta-screen .ta-menu > .adagin-btn:is(:disabled, [aria-disabled="true"], .disabled):not([aria-busy="true"]):not([data-state="success"]),
.ta-screen .ta-menu__actions > .adagin-btn:is(:disabled, [aria-disabled="true"], .disabled):not([aria-busy="true"]):not([data-state="success"]),
.ta-screen .ta-menu__actions .ta-more-menu > .adagin-btn:is(:disabled, [aria-disabled="true"], .disabled):not([aria-busy="true"]):not([data-state="success"]),
.ta-screen .ta-pager > .adagin-btn:is(:disabled, [aria-disabled="true"], .disabled):not([aria-busy="true"]):not([data-state="success"]) {
  --btn-bg: var(--adagin-white);
  --btn-bg-hover: var(--adagin-white);
  --btn-bg-pressed: var(--adagin-white);
  --btn-fg: var(--adagin-btn-disabled-plain-fg);
  --btn-border: var(--adagin-btn-disabled-border);
}

/* MOD-917: Approve Selected and Bulk Add (both Unapproved panes) go green while 1 or more rows are selected, or Select All is on; at none they keep the outline look above.
   TimeAndAttendance.js (taSyncSelectionPane) sets data-selection="active" from the same count it prints as "N of M selected". Green outline: 2px border, green text, white
   fill. The border grows by 1px and the side padding gives 1px back, so the button keeps its outer size and nothing beside it moves. The focus ring is the shared
   one (.adagin-btn:focus-visible). (0,5,0) beats the rest look (0,4,0) and loses to the disabled look (0,6,0), so a button that cannot be used still reads disabled. */
.ta-screen .ta-menu__actions .ta-more-menu > .adagin-btn[data-selection="active"]:not([data-state="success"]),
.ta-screen .ta-menu__actions > .adagin-btn[data-selection="active"]:not([data-state="success"]) {
  --btn-bg: var(--adagin-white);
  --btn-bg-hover: var(--adagin-btn-selected-hover);
  --btn-bg-pressed: var(--adagin-btn-selected-pressed);
  --btn-fg: var(--adagin-btn-selected);
  --btn-border: var(--adagin-btn-selected);
  border-width: 2px;
  padding-inline: calc(var(--adagin-btn-pad-x) - 1px);
}

/* Tertiary, the row, card and Approved-grid actions that are not the shared button. Only the outline and the colour change: the 1px border stays,
   transparent, so the box keeps its size. The box itself (height, padding, widths, display) stays with the sections that own it: MOD-599 for the row
   and card actions and the three-dot button, MOD-612 for the Approved tab's week Confirm / Unapprove, MOD-618 for the Actions stack's one width.
   Those sections also narrow the box at their breakpoints (the week links to their label's width under 1840px, the three-dot button to 24px under
   1400px); a padding or min-width repeated here would come later at the same or a higher specificity and undo that, so no rule for a control inside
   a table sets a box property in this block. For the same reason table.approved is not a selector here: the Approved tab's own grid carries that
   class too (table.approved.approved-attendance), and _ApprovedPieceworkAttendance.cshtml renders no week link (its one .unapproval-reject-item is
   the icon-only day link in a nested table, which stays a link). */
.ta-screen .table td button.approval-reject-item,
.ta-screen .table td a.approval-reject-item.approval-disabled,
.ta-screen .table td button.edit-detail-record,
.ta-screen .table td button.ta-unreject,
.ta-screen .table td .day-menu .day-menu-btn,
.ta-screen .approved-attendance td > a.unapproval-reject-item,
.ta-screen .approved-attendance td > a.unapproval-confirm-item {
  border-color: transparent;
  color: var(--adagin-dark-navy);
}

.ta-screen .table td button.approval-reject-item:hover:not(:disabled):not(.disabled),
.ta-screen .table td button.edit-detail-record:hover:not(:disabled):not(.disabled),
.ta-screen .table td button.ta-unreject:hover:not(:disabled):not(.disabled),
.ta-screen .table td .day-menu .day-menu-btn:hover:not(.disabled),
.ta-screen .approved-attendance td > a.unapproval-reject-item:hover:not(.disabled),
.ta-screen .approved-attendance td > a.unapproval-confirm-item:hover:not(.disabled) {
  background: var(--adagin-btn-tint-hover);
  color: var(--adagin-dark-navy);
}

.ta-screen .table td button.approval-reject-item:active:not(:disabled):not(.disabled),
.ta-screen .table td button.edit-detail-record:active:not(:disabled):not(.disabled),
.ta-screen .table td button.ta-unreject:active:not(:disabled):not(.disabled),
.ta-screen .table td .day-menu .day-menu-btn:active:not(.disabled),
.ta-screen .approved-attendance td > a.unapproval-reject-item:active:not(.disabled),
.ta-screen .approved-attendance td > a.unapproval-confirm-item:active:not(.disabled),
.ta-screen .table td button[aria-busy="true"].approval-reject-item,
.ta-screen .table td button[aria-busy="true"].ta-unreject {
  background: var(--adagin-btn-tint-pressed);
}

.ta-screen .table td button.approval-reject-item:focus-visible,
.ta-screen .table td button.edit-detail-record:focus-visible,
.ta-screen .table td button.ta-unreject:focus-visible,
.ta-screen .table td .day-menu .day-menu-btn:focus-visible,
.ta-screen .approved-attendance td > a.unapproval-reject-item:focus-visible,
.ta-screen .approved-attendance td > a.unapproval-confirm-item:focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: var(--adagin-btn-focus-offset);
}

/* Disabled (not approvable, no permission): muted text, no border, no tint. */
.ta-screen .table td button.approval-reject-item:disabled,
.ta-screen .table td button.edit-detail-record:disabled,
.ta-screen .table td button.ta-unreject:disabled,
.ta-screen .table td .day-menu .day-menu-btn.disabled,
.ta-screen .approved-attendance td > a.unapproval-reject-item.disabled,
.ta-screen .approved-attendance td > a.unapproval-confirm-item.disabled {
  background: transparent;
  color: var(--adagin-btn-disabled-plain-fg);
  cursor: not-allowed;
}

/* The thumbs follow the label: navy, not green and red. */
.ta-screen .table td button.approval-reject-item .fa,
.ta-screen .approved-attendance td > a.unapproval-confirm-item .fa,
.ta-screen .approved-attendance td > a.unapproval-reject-item .fa {
  color: inherit;
}

/* The three-dot button: bold dots (a larger, heavier glyph than the 13px label). */
.ta-screen .table td .day-menu .day-menu-btn .fa {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

/* On the dark-red exception row the text stays white (the MOD-599 rules), so the ring is white there too. */
.ta-screen .table tr.bg-isexception td button.approval-reject-item:focus-visible,
.ta-screen .table tr.bg-isexception td button.edit-detail-record:focus-visible,
.ta-screen .table tr.bg-isexception td button.ta-unreject:focus-visible,
.ta-screen .table tr.bg-isexception td .day-menu .day-menu-btn:focus-visible {
  outline-color: var(--adagin-white);
}

/* ...and so are hover, pressed and busy: the light navy tint would sit under white text (also set inline by _AttendanceRow.cshtml), so the exception row gets a translucent white tint instead. Each selector is the tertiary one plus tr.bg-isexception, so it always out-ranks it. */
.ta-screen .table tr.bg-isexception td button.approval-reject-item:hover:not(:disabled):not(.disabled),
.ta-screen .table tr.bg-isexception td button.edit-detail-record:hover:not(:disabled):not(.disabled),
.ta-screen .table tr.bg-isexception td button.ta-unreject:hover:not(:disabled):not(.disabled),
.ta-screen .table tr.bg-isexception td .day-menu .day-menu-btn:hover:not(.disabled) {
  background: var(--adagin-btn-tint-hover-on-dark);
  color: var(--adagin-white);
}

.ta-screen .table tr.bg-isexception td button.approval-reject-item:active:not(:disabled):not(.disabled),
.ta-screen .table tr.bg-isexception td button.edit-detail-record:active:not(:disabled):not(.disabled),
.ta-screen .table tr.bg-isexception td button.ta-unreject:active:not(:disabled):not(.disabled),
.ta-screen .table tr.bg-isexception td .day-menu .day-menu-btn:active:not(.disabled),
.ta-screen .table tr.bg-isexception td button[aria-busy="true"].approval-reject-item,
.ta-screen .table tr.bg-isexception td button[aria-busy="true"].ta-unreject {
  background: var(--adagin-btn-tint-pressed-on-dark);
  color: var(--adagin-white);
}

/* A not-approvable Approve / Reject on the exception row has no outline either (MOD-599 kept a dashed white one there, in a selector that out-ranks
   the tertiary rule). The muted grey is unreadable on dark red, so its text is a dimmed white, which reads as unavailable beside the enabled buttons'
   full white; !important as MOD-599's own colour there, and over the row's inline colour. */
.ta-screen .table tr.bg-isexception td a.approval-reject-item.approval-disabled {
  border-color: transparent;
  color: var(--adagin-btn-disabled-fg-on-dark) !important;
}

/* Tertiary, the shared outline buttons in a row's Actions stack (History, View units): the same tokens, no border. */
.ta-screen .table td .ta-history-btn,
.ta-screen .table td .ta-units-btn {
  --btn-bg: transparent;
  --btn-bg-hover: var(--adagin-btn-tint-hover);
  --btn-bg-pressed: var(--adagin-btn-tint-pressed);
  --btn-fg: var(--adagin-dark-navy);
  --btn-border: transparent;
}

.ta-screen .table td .ta-history-btn:disabled,
.ta-screen .table td .ta-units-btn:disabled {
  --btn-bg-hover: transparent;
  --btn-fg: var(--adagin-btn-disabled-plain-fg);
}

/* ...and on the exception row: MOD-618's rule there (white text, white border) also names the Actions stack, so it out-ranks the two rules above.
   These have its specificity and come later, so they take the border off and keep the white text on the translucent tint. They name the shared
   button's own class instead of the stack, which only the MOD-618 section styles. */
.ta-screen .table tr.bg-isexception td .adagin-btn.ta-history-btn,
.ta-screen .table tr.bg-isexception td .adagin-btn.ta-units-btn {
  --btn-bg-hover: var(--adagin-btn-tint-hover-on-dark);
  --btn-bg-pressed: var(--adagin-btn-tint-pressed-on-dark);
  --btn-fg: var(--adagin-white);
  --btn-border: transparent;
}
/* MOD-682 end. */

/* MOD-784 begin. The shared page shell's toolbar and top-bar buttons (MOD-709, MOD-712) take the MOD-682 secondary group's tokens. They sit outside the T&A-only block above because they are not scoped to .ta-screen; the shell's .ta-menu toolbar buttons (Piecework, Bin Management) are the MOD-709 block's .adagin-page-shell .ta-menu rule. */
.adagin-page-shell h1.tablegrid-toolbar-actions > .adagin-btn:not([data-state="success"]),
.adagin-page-shell .adagin-page-shell__bar .adagin-btn:not([data-state="success"]) {
  --btn-bg: var(--adagin-white);
  --btn-bg-hover: var(--adagin-btn-tint-hover);
  --btn-bg-pressed: var(--adagin-btn-tint-pressed);
  --btn-fg: var(--adagin-dark-navy);
  --btn-border: var(--adagin-dark-navy);
  font-weight: 600;
}

.adagin-page-shell h1.tablegrid-toolbar-actions > .adagin-btn:is(:disabled, [aria-disabled="true"], .disabled):not([aria-busy="true"]):not([data-state="success"]),
.adagin-page-shell .adagin-page-shell__bar .adagin-btn:is(:disabled, [aria-disabled="true"], .disabled):not([aria-busy="true"]):not([data-state="success"]) {
  --btn-bg: var(--adagin-white);
  --btn-bg-hover: var(--adagin-white);
  --btn-bg-pressed: var(--adagin-white);
  --btn-fg: var(--adagin-btn-disabled-plain-fg);
  --btn-border: var(--adagin-btn-disabled-border);
}
/* MOD-784 end. */

/* MOD-696 begin. The list footer (.ta-pager, ItemTemplates/_TaPager.cshtml): under the table and its Page totals row, at the table's right edge, "Page N of M",
   Previous Page, Next Page and, on the Approved tab, Download Print View. The buttons are secondary through the MOD-682 rules above (.ta-pager > .adagin-btn).
   It follows the table in the DOM (keyboard order: table, then these controls); no CSS order. The left side is empty: there is no rows-per-page selector. */
.ta-screen .ta-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--adagin-space-2);
  margin-top: var(--adagin-space-2);
  /* the 2px ring + 2px offset of the last button stays inside the box */
  padding: var(--adagin-space-2) calc(var(--adagin-btn-focus-width) + var(--adagin-btn-focus-offset));
}

.ta-screen .ta-pager__text {
  margin-right: var(--adagin-space-2);
  color: var(--adagin-text-muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.ta-screen .ta-pager > .adagin-btn { flex: 0 0 auto; }
/* MOD-696 end. */

/* ---------------------------------------------------------------------------------------------
 * 18. Progress bars (MOD-659): one fill colour for every .progress-bar (Bootstrap's blue is not a brand colour); a finished bar is green.
 *     The Bin Import status text (waiting / running) uses the same teal as the fill, so activity reads as activity, not muted grey.
 * ------------------------------------------------------------------------------------------- */
.progress-bar { background-color: var(--adagin-teal); }
.progress-bar.progress-bar-complete { background-color: var(--adagin-green); }
.import-status-active { color: var(--adagin-teal); font-weight: 600; }

/* =============================================================================================
 * MOD-681 (T&A UI pass 2, U3): page shell. Tabs and pane as one outlined shape, day cards (above, with the MOD-601 rules), one action pane.
 * One delimited block; every rule is scoped to .ta-screen (Time & Attendance only). Colours are variables; the 4px tab gap, 12px pane corners, 8px
 * card corners and the 18px / 12px / 20px sizes are the design page's (type-scale variables are MOD-695's).
 * ============================================================================================= */
:root {
  /* MOD-756: the radius scale (--adagin-radius-block / -pane / -pill) and the outline colour are section 1's shared tokens. */
  --ta-tab-hover-bg: #E8EEF8;      /* light navy tint on a hovered, unselected tab (navy #101729 text on it is 16:1) */
}

/* The tab row: 18px text tabs, 4px apart, sitting on the pane. The active tab overlaps the pane's top border by 1px so the two read as one shape. */
.ta-screen .ta-nav,
.adagin-page-shell .nav-tabs { /* MOD-711: the shared page shell's tabs take the T&A tab standard */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--adagin-space-1);
  border-bottom: 0;
}

.ta-screen .ta-nav .nav-item,
.adagin-page-shell .nav-tabs .nav-item { margin: 0; }

.ta-screen .ta-nav .nav-link,
.adagin-page-shell .nav-tabs .nav-link {
  margin: 0;
  padding: var(--adagin-space-3) var(--adagin-space-5);
  border: 0;
  border-radius: var(--adagin-radius-pane) var(--adagin-radius-pane) 0 0;
  background-color: transparent;
  color: var(--adagin-dark-navy);
  font-family: var(--adagin-font-heading); /* MOD-695: the tab strip is Onest 16 / 24 (body would otherwise inherit Inter) */
  font-size: var(--adagin-font-size-subtitle);
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

.ta-screen .ta-nav .nav-link:hover,
.adagin-page-shell .nav-tabs .nav-link:hover {
  background-color: var(--ta-tab-hover-bg);
  color: var(--adagin-dark-navy);
}

.ta-screen .ta-nav .nav-link.active,
.ta-screen .ta-nav .nav-link.active:hover,
.adagin-page-shell .nav-tabs .nav-link.active,
.adagin-page-shell .nav-tabs .nav-link.active:hover {
  position: relative;
  z-index: 1;
  margin-bottom: calc(-1 * var(--adagin-outline-width));
  padding-bottom: calc(var(--adagin-space-3) + var(--adagin-outline-width));
  background-color: var(--adagin-outline);
  color: var(--adagin-white);
  font-weight: 700;
}

.ta-screen .ta-nav .nav-link:focus-visible,
.adagin-page-shell .nav-tabs .nav-link:focus-visible {
  outline: 3px solid var(--adagin-teal);
  outline-offset: 2px;
}

.ta-screen .ta-nav .nav-link.active:focus-visible,
.adagin-page-shell .nav-tabs .nav-link.active:focus-visible {
  outline-color: var(--adagin-dark-navy);
}

/* The pane under the tabs: 1px secondary-blue border, 12px corners, the top-left corner square (the first tab carries that round). */
.ta-screen .tab-content.tasi-tab,
.adagin-page-shell .tab-content.tasi-tab {
  padding: var(--adagin-space-3);
  border: var(--adagin-outline-width) solid var(--adagin-outline);
  border-radius: 0 var(--adagin-radius-pane) var(--adagin-radius-pane) var(--adagin-radius-pane);
  background-color: var(--adagin-white);
}

/* Unapproved and Overheads: the action pane goes under the day cards. The day cards are the first thing the list script renders into #unapproved-list /
   #unapproved-overhead-list, which sit after the toolbar in the page, so the list wrappers stop being boxes (display: contents) and the tab pane is a flex
   column that orders the day cards first, the toolbar (.ta-menu) second and the rest of the list in its own order. No element moves in the DOM, so ids,
   handlers and tab order are unchanged. */
.ta-screen .tab-content > #pending.active,
.ta-screen .tab-content > #overhead.active {
  display: flex;
  flex-direction: column;
}

.ta-screen #unapproved-list,
.ta-screen #unapproved-overhead-list { display: contents; }

.ta-screen #unapproved-list > img,
.ta-screen #unapproved-overhead-list > img { align-self: center; }

/* MOD-818: the list's loader host (TimeAndAttendance.js) joins the same flex layout: boxless while idle, so the day cards stay the pane's flex items, a
   block (first in the pane, like the day cards) while the list loads so the veil has an area to cover. */
/* A list that was empty before it loads (first visit to a tab) has no height to hold: the host still gets an area for the veil and its label. A measured
   height (inline min-height from the script) is larger and wins. */
.ta-screen .ta-list-host--loading { min-height: 8rem; }

.ta-screen #pending > .ta-list-host,
.ta-screen #overhead > .ta-list-host { display: contents; }

.ta-screen #pending > .ta-list-host.ta-list-host--loading,
.ta-screen #overhead > .ta-list-host.ta-list-host--loading,
.ta-screen #pending > .ta-list-host:has(> .adagin-loader),
.ta-screen #overhead > .ta-list-host:has(> .adagin-loader) { display: block; order: -2; }
/* AdLoader keeps a drawn veil up to its minimum show time after the list has loaded: the host stays a box until the veil is gone, or the absolute veil would
   escape to the tab pane and cover the new cards and the toolbar. */

.ta-screen #unapproved-list > .date-header,
.ta-screen #unapproved-overhead-list > .date-header { order: -2; }

.ta-screen #pending > .ta-menu,
.ta-screen #overhead > .ta-menu { order: -1; }

/* The action pane: white, the shared 1px outline and block corners (MOD-756, section 10's .tab-content .ta-menu); "N of M selected" at the left, then the page buttons and the action buttons at the right, in the
   order they have, on one line while the width allows. The buttons themselves are not restyled here (U4). */
.ta-screen #pending > .ta-menu,
.ta-screen #overhead > .ta-menu,
.ta-screen #approved > .ta-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: var(--adagin-space-2);
  margin-top: var(--adagin-space-2);
  padding: var(--adagin-space-2) var(--adagin-space-3);
}

.ta-screen .ta-menu .ta-selection-count {
  margin-right: var(--adagin-space-2);
  color: var(--adagin-text-muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* The action buttons are one group (.ta-menu__actions) pushed to the right end; a row too narrow for the count, the page buttons and the group puts the group on
   a row of its own, right-aligned, with its buttons still on one line. */
.ta-screen .ta-menu > .ta-menu__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--adagin-space-2);
  margin-left: auto;
}

.ta-screen .ta-menu__actions > .adagin-btn { flex: 0 0 auto; }

/* MOD-681: the count and the six buttons are one line at 1366 and 1440 as well (the page has a 288px side menu, so the pane is 340px narrower than the window). Only
   the buttons' side padding and the gaps tighten; labels, order, height and font size are unchanged. Below 1366 the pane wraps (the group takes a row of its own and wraps
   inside it, right-aligned) rather than overflow. */
@media (max-width: 1500px) {
  .ta-screen #pending > .ta-menu,
  .ta-screen #overhead > .ta-menu,
  .ta-screen #approved > .ta-menu { padding-inline: var(--adagin-space-2); }

  .ta-screen .ta-menu .ta-selection-count { margin-right: 0; }

  .ta-screen .ta-menu > .ta-menu__actions { gap: var(--adagin-space-1); }

  .ta-screen .ta-menu__actions > .adagin-btn { --adagin-btn-pad-x: 0.3125rem; --adagin-btn-icon-gap: var(--adagin-space-1); }
}

@media (max-width: 1365.98px) {
  .ta-screen .ta-menu > .ta-menu__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
/* end MOD-681 page shell */

/* ---------------------------------------------------------------------------------------------
 * MOD-683 row actions. Time & Attendance Unapproved / Unapproved Overheads / Rejected Records rows (ItemTemplates/_AttendanceRow.cshtml, the Actions cell).
 *     The MOD-618 stack becomes one centred line: the query category (.ta-row-category: the existing dropdown on a query row, "Normal time" on a normal
 *     one), then .ta-row-buttons: Approve (Rejected Records: the Rejected chip and Unreject) and the three-dot menu (.ta-row-menu, the Approved day
 *     cell's .day-menu, so its button already has the MOD-599 / MOD-682 tertiary look). The state chip is gone: its tag is visually hidden text now
 *     (.sr-only in the markup). Each rule names classes the markup puts on the elements it styles; the one child combinator (the <strong> wrappers,
 *     as MOD-618 does) is tied to the markup by TimeAndAttendanceRowActionsTests, so a wrapper added later fails a test instead of dropping a rule.
 *     The MOD-618 rules (one width for Approve / Unreject) still apply inside the line.
 * ------------------------------------------------------------------------------------------- */
.ta-screen .table td .ta-row-actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--adagin-space-2);
}

.ta-screen .table td .ta-row-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--adagin-space-1);
}

/* Approve's <strong> wrapper (MOD-747: the reason moved to the summary card's warning bar): the controls themselves are the line's items, so one the script hides leaves no gap. */
.ta-screen .table td .ta-row-buttons > strong {
  display: contents;
}

.ta-screen .table td .ta-row-category {
  min-width: 0;
  max-width: 11rem;
}

/* The category dropdown: 28px high, transparent fill, grey border, its list opening directly beneath it. */
.ta-screen .table td .ta-row-category .col-xl-12 {
  padding-left: 0;
  padding-right: 0;
}

.ta-screen .table td .ta-row-category .searchselect .dropdown-toggle {
  box-sizing: border-box;
  height: 1.75rem;
  min-height: 1.75rem;
  min-width: 0;
  max-width: 11rem;
  padding: 0 1.25rem 0 0.5rem;
  border: 1px solid var(--adagin-grey);
  border-radius: var(--adagin-btn-radius);
  background: transparent;
  color: var(--adagin-dark-navy);
  font-size: var(--adagin-font-size-body);
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* Round-cap audit F1: the searchselect plugin draws the name as <span class="float-left"> (float:left !important), then .clearinput-icon and the ::after
   caret in flow, so a long name ("Automated system clock out") pushed the icon and the caret onto a second line inside the 28px box, with no ellipsis.
   As the Approved grid's picker (.ta-day-category): the span stops floating and the caret is placed on the button; here the name then truncates on
   one line, the clear icon right after it and the caret at the right edge. */
.ta-screen .table td .ta-row-category .searchselect > .dropdown-toggle > span {
  float: none !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.ta-screen .table td .ta-row-category .searchselect > .dropdown-toggle > .clearinput-icon {
  flex: 0 0 auto;
  padding: 0 0 0 3px;
  font-size: 12px;
}

.ta-screen .table td .ta-row-category .searchselect > .dropdown-toggle::after {
  position: absolute;
  top: 50%;
  right: 6px;
  margin: 0;
  transform: translateY(-50%);
}

/* Round-cap audit F2: hover takes the MOD-682 tertiary tint, keyboard focus the row's three-dot button's ring (Bootstrap's 25% shadow was about 1.3:1). */
.ta-screen .table td .ta-row-category .searchselect .dropdown-toggle:hover {
  background: var(--adagin-btn-tint-hover);
  color: var(--adagin-dark-navy);
}

.ta-screen .table td .ta-row-category .searchselect .dropdown-toggle:focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: var(--adagin-btn-focus-offset);
  box-shadow: none;
}

.ta-screen .table td .ta-row-category .searchselect .dropdown-menu {
  margin-top: 0;
}

.ta-screen .table td .ta-row-category__normal {
  color: var(--adagin-dark-navy);
  font-size: var(--adagin-font-size-body);
  white-space: nowrap;
}

/* On the dark-red exception row the text stays white (as every control there). */
.ta-screen .table tr.bg-isexception td .ta-row-category .searchselect .dropdown-toggle {
  border-color: var(--adagin-white);
  color: var(--adagin-white);
}

/* ...its hover the tertiary buttons' translucent white tint there (the navy one would sit under white text), its focus ring white, as the three-dot button's. */
.ta-screen .table tr.bg-isexception td .ta-row-category .searchselect .dropdown-toggle:hover {
  background: var(--adagin-btn-tint-hover-on-dark);
  color: var(--adagin-white);
}

.ta-screen .table tr.bg-isexception td .ta-row-category .searchselect .dropdown-toggle:focus-visible {
  outline-color: var(--adagin-white);
}

/* The MOD-681 breakpoint: the category narrows with the page so Approve and the menu stay on its line. */
@media (max-width: 1500px) {
  .ta-screen .table td .ta-row-category,
  .ta-screen .table td .ta-row-category .searchselect .dropdown-toggle {
    max-width: 9rem;
  }
}
/* MOD-683 end. */

/* ---------------------------------------------------------------------------------------------
 * MOD-747 row summary card. Time & Attendance Unapproved / Unapproved Overheads / Rejected Records rows (ItemTemplates/_AttendanceRow.cshtml, the one
 *     "Hours, query and actions" cell): .ta-summary is one card (radius 8, 1px teal outline, no fill) holding, top to bottom, the warning bar
 *     (.ta-summary__warning, only while the row is blocked), MOD-684's hours (NT 16/700, OT / ST / OVER 14/700 in their colours, EXP 12 muted), MOD-683's
 *     category at the card's full width, then Approve (.ta-summary__approve, tertiary: no outline, the Material thumb_up) with the three-dot menu at the
 *     right. Approve turns green while pressed and while its request is out (.is-busy, TimeAndAttendance.js Confirmation); while the row is blocked it is
 *     disabled at 45%. The controls in the card (the category dropdown, the note box) are transparent with a #63748D border: #8090AA (the page's control
 *     border) is about 2.5:1 on the red tint. Each rule names classes the row template renders (TimeAndAttendanceRowSummaryCardTests).
 * ------------------------------------------------------------------------------------------- */
:root {
  --ta-summary-outline: var(--adagin-outline);   /* MOD-756: the shared outline, #1F4F63 */
  --ta-summary-control-border: var(--adagin-control-border-tinted);   /* MOD-756: #63748D; 3:1 or more on white and on every row tint (TimeAndAttendanceRowSummaryCardTests) */
  --ta-summary-warning: #A32314;              /* the blocked reason: 4.5:1 or more on white and on every row tint */
  --ta-summary-approve-pressed-fg: #3A5C1F;
  --ta-summary-approve-pressed-bg: #E4F2D0;
}

.ta-screen .table td .ta-summary {
  display: flex;
  flex-direction: column;
  gap: var(--adagin-space-2);
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--ta-summary-outline);
  border-radius: var(--adagin-radius-block);
  background: transparent;
  text-align: left;
}

/* The warning bar: the card's top edge, a warning icon and the reason in words. MOD-760 turns it into a button that opens the details. */
.ta-screen .table td .ta-summary__warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: -8px -8px 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--ta-summary-outline);
  border-radius: calc(var(--adagin-radius-block) - var(--adagin-outline-width)) calc(var(--adagin-radius-block) - var(--adagin-outline-width)) 0 0; /* MOD-756 concentric: flush inside the 1px outline */
  color: var(--ta-summary-warning);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

/* MOD-757: the Material warning triangle, 16 px, in the bar's colour (white on the exception row, the warning colour elsewhere). */
.ta-screen .table td .ta-summary__warning-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* The exception row is dark red with white text: the navy outline (1.1:1) and the 45% navy / 45% white (2.8:1) of the blocked Approve would disappear there,
   so the card's outline is white (10:1) like the row's other controls, and a blocked Approve is the dimmed white the row's other unavailable actions use (5.5:1). */
.ta-screen .table tr.bg-isexception td .ta-summary {
  border-color: var(--adagin-white);
}

.ta-screen .table tr.bg-isexception td .ta-summary button.ta-summary__approve:disabled,
.ta-screen .table tr.bg-isexception td .ta-summary a.approval-reject-item.approval-disabled {
  opacity: 1 !important;
  color: var(--adagin-btn-disabled-fg-on-dark) !important; /* over the row's inline white */
}

.ta-screen .table tr.bg-isexception td .ta-summary__warning {
  border-bottom-color: var(--adagin-white);
  color: var(--adagin-white);
}

/* The hours: each line its label at the left and its figure at the right. */
.ta-screen .table td .ta-summary table.isquery-select-col > tbody > tr:first-child > td.ta-hours {
  padding: 0;
}

.ta-screen .table td .ta-summary .ta-hours-line {
  justify-content: space-between;
}

.ta-screen .table td .ta-summary .ta-hours-label {
  font-size: 12px;
  font-weight: 600;
}

.ta-screen .table td .ta-summary .ta-hours-line--nt .ta-hours-figure {
  font-size: 16px;
  font-weight: 700;
}

.ta-screen .table td .ta-summary .ta-hours-line--ot .ta-hours-figure,
.ta-screen .table td .ta-summary .ta-hours-line--st .ta-hours-figure,
.ta-screen .table td .ta-summary .ta-hours-line--over .ta-hours-figure {
  font-size: 14px;
  font-weight: 700;
}

/* The category and the buttons stack: the category at the card's full width, then Approve at the left and the menu at the right. */
.ta-screen .table td .ta-summary .ta-row-actions {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
}

.ta-screen .table td .ta-summary .ta-row-category {
  width: 100%;
  max-width: none;
}

.ta-screen .table td .ta-summary .ta-row-category .searchselect .dropdown-toggle {
  width: 100%;
  max-width: none;
  border-color: var(--ta-summary-control-border);
  border-radius: var(--adagin-radius-input);
}

.ta-screen .table td .ta-summary .ta-row-buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.ta-screen .table td .ta-summary .ta-row-menu {
  margin-left: auto;
}

/* Approve: tertiary (no outline, no fill), navy, the thumb_up before the word. MOD-618's one button width does not apply in the card. */
.ta-screen .table td .ta-summary button.ta-summary__approve,
.ta-screen .table td .ta-summary a.approval-reject-item.approval-disabled {
  width: auto;
  min-width: 0;
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--adagin-dark-navy);
  justify-content: flex-start;
  gap: 0.375rem;
}

.ta-screen .table td .ta-summary .ta-summary__approve-icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
  pointer-events: none;
}

.ta-screen .table td .ta-summary button.ta-summary__approve:hover {
  background: var(--adagin-btn-tint-hover);
  color: var(--adagin-dark-navy);
}

/* Pressed, and while the approve request is out: green. The !important beats the white an exception row writes inline (style="color: white"). */
.ta-screen .table td .ta-summary .ta-row-buttons button.ta-summary__approve:not(:disabled):is(:active, .is-busy) {
  background: var(--ta-summary-approve-pressed-bg);
  color: var(--ta-summary-approve-pressed-fg) !important;
}

/* Blocked: disabled at 45% (the button, and the day-not-finished link, whose older rule holds opacity 1 and a dashed border with !important). */
.ta-screen .table td .ta-summary button.ta-summary__approve:disabled {
  opacity: 0.45;
  cursor: not-allowed !important; /* the row writes cursor: pointer inline */
}

.ta-screen .table td .ta-summary button.ta-summary__approve:disabled:hover {
  background: transparent;
}

.ta-screen .table td .ta-summary a.approval-reject-item.approval-disabled {
  opacity: 0.45 !important;
  color: var(--adagin-dark-navy) !important;
}

/* The note box in the card: transparent on the row's tint, the card's control border. */
.ta-screen .table td .ta-summary table.isquery-select-col textarea.form-control,
.ta-screen .table td .ta-summary table.isquery-select-col textarea.form-control:focus,
.ta-screen .table td .ta-summary table.isquery-select-col textarea.form-control[readonly] {
  border: 1px solid var(--ta-summary-control-border);
  background-color: transparent;
  color: var(--adagin-dark-navy);
}

.ta-screen .table tr.bg-isexception td .ta-summary table.isquery-select-col textarea.form-control {
  border-color: var(--adagin-white);
  color: var(--adagin-white);
}
/* MOD-747 end. */

/* ---------------------------------------------------------------------------------------------
 * MOD-760 blocked-row warning details. The MOD-747 warning bar of a blocked row (ItemTemplates/_AttendanceRow.cshtml .ta-summary__warning--details) names
 *     its cause: the title is a button (.ta-summary__warning-btn: the bar's own colour, underlined so it reads as a control, a 2px focus ring) with the
 *     one-sentence reason under it (.ta-summary__warning-text), and the button opens the details panel (.ta-summary__details, a dialog for assistive
 *     tech) under the bar: radius 16 like the menus, white with the card's outline and the raised shadow, three lines (What happened / What to do /
 *     Then), each a small bold label over 12px navy text (17:1 on white). The panel is white on every row, so it reads on the dark red exception row
 *     too; there the button is the bar's white (the MOD-747 override). Each rule names classes the row template renders and out-ranks the page's
 *     (0,2,1) label rule (TimeAndAttendanceBlockedRowWarningTests).
 * ------------------------------------------------------------------------------------------- */
.ta-screen .table td .ta-summary__warning--details {
  flex-wrap: wrap;
}

.ta-screen .table td .ta-summary__warning-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ta-screen .table td .ta-summary__warning-btn {
  align-self: flex-start;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.ta-screen .table td .ta-summary__warning-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.ta-screen .table td .ta-summary__warning--details .ta-summary__warning-text {
  font-weight: 400;
}

.ta-screen .table td .ta-summary__details {
  flex: 0 0 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid var(--ta-summary-outline);
  border-radius: var(--adagin-radius-menu);
  background: var(--adagin-white);
  box-shadow: var(--adagin-shadow-raised);
  color: var(--adagin-dark-navy);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

.ta-screen .table td .ta-summary__details[hidden] {
  display: none;
}

.ta-screen .table td .ta-summary__details:focus {
  outline: 2px solid var(--ta-summary-outline);
  outline-offset: 1px;
}

.ta-screen .table td .ta-summary__details .ta-summary__details-list {
  margin: 0;
}

.ta-screen .table td .ta-summary__details .ta-summary__details-line + .ta-summary__details-line {
  margin-top: 6px;
}

.ta-screen .table td .ta-summary__details .ta-summary__details-list dt {
  margin: 0;
  color: var(--adagin-dark-navy);
  font-size: var(--adagin-font-size-caption);
  font-weight: 700;
}

.ta-screen .table td .ta-summary__details .ta-summary__details-list dd {
  margin: 0;
  color: var(--adagin-dark-navy);
}

.ta-screen .table tr.bg-isexception td .ta-summary__warning-btn {
  color: var(--adagin-white);
}
/* MOD-760 end. */

/* ---------------------------------------------------------------------------------------------
 * MOD-761 blocked-row action buttons. Under the warning's reason, inside the bar (ItemTemplates/_AttendanceRow.cshtml .ta-summary__actions, at the bar's full
 *     width so it drops under the title and the reason, above the hours), and again at the foot of the details panel (.ta-summary__details-foot): one
 *     secondary button per action (.ta-summary__action-btn: white, 1px navy #1F4F63 outline, the block radius (8, MOD-756 buttons), 28px high, the card's full width, 12/600 navy text,
 *     17:1 on its own white), hover the T&A secondary tint, keyboard focus a 2px navy ring. It carries its own white fill, so it reads the same on every row
 *     tint and on the dark red exception row, where its outline turns white (the navy outline is 1.1:1 on dark red) and its focus ring is white. Each rule
 *     names classes the row template renders and out-ranks the page's (0,2,1) label rule (TimeAndAttendanceBlockedRowActionTests).
 * ------------------------------------------------------------------------------------------- */
.ta-screen .table td .ta-summary__warning .ta-summary__actions {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.ta-screen .table td .ta-summary__details .ta-summary__details-foot {
  margin-top: 8px;
}

.ta-screen .table td .ta-summary .ta-summary__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--adagin-teal);
  border-radius: var(--adagin-radius-block);
  background: var(--adagin-white);
  color: var(--adagin-dark-navy);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ta-screen .table td .ta-summary .ta-summary__action-btn:hover {
  background: var(--adagin-btn-tint-hover);
  color: var(--adagin-dark-navy);
  text-decoration: none;
}

.ta-screen .table td .ta-summary .ta-summary__action-btn:focus-visible {
  outline: 2px solid var(--adagin-teal);
  outline-offset: 2px;
}

/* On the dark red row, the buttons under the reason (not those in the white panel, which keep the navy outline): a white outline and a white ring. */
.ta-screen .table tr.bg-isexception td .ta-summary__warning > .ta-summary__actions .ta-summary__action-btn {
  border-color: var(--adagin-white);
  color: var(--adagin-dark-navy);
}

.ta-screen .table tr.bg-isexception td .ta-summary__warning > .ta-summary__actions .ta-summary__action-btn:focus-visible {
  outline-color: var(--adagin-white);
}
/* MOD-761 end. */

/* MOD-692: empty states of the Unapproved / Unapproved Overheads lists, centred under the action pane (ItemTemplates/_AttendanceEmptyState, taSyncEmptyState). Text is
   navy / muted (11:1 / 6.1:1 on white); the icons are decoration (aria-hidden) in the brand green and the calm light teal, never a warning colour. */
.ta-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--adagin-space-2);
  padding: var(--adagin-space-6) var(--adagin-space-4);
  text-align: center;
}

.ta-empty-state[hidden] { display: none; }
.ta-empty-state__icon { flex: 0 0 auto; }
.ta-empty-state__icon--done { color: var(--adagin-green); }
.ta-empty-state__icon--warn { color: var(--adagin-orange); } /* MOD-916: All caught up under a filter or search */
.ta-empty-state__icon--info { color: var(--adagin-light-teal); }

.ta-empty-state__title {
  margin: 0;
  color: var(--adagin-navy);
  font-size: 1.125rem;
  font-weight: 600;
}

.ta-empty-state__body {
  margin: 0;
  max-width: 36rem;
  color: var(--adagin-text-muted);
  font-size: 0.875rem;
}

/* MOD-916: "Clear filter: N records are pending" is the shared outline button (adagin-button variant="outline", adagin-btn--outline) in the warning colour: an orange edge on the
   warm tint (--adagin-orange-tint, as an applied search), navy text (--adagin-dark-navy on the tint is above 15:1) and the orange glyph. Hover and pressed keep the tint's step. */
.ta-empty-state .adagin-btn.ta-empty-state__clear {
  --btn-bg: var(--adagin-orange-tint);
  --btn-bg-hover: var(--adagin-white);
  --btn-bg-pressed: var(--adagin-white);
  --btn-fg: var(--adagin-dark-navy);
  --btn-border: var(--adagin-orange);
}
.ta-empty-state .adagin-btn.ta-empty-state__clear .adagin-btn__icon { color: var(--adagin-orange); }
/* end MOD-692 empty states */

/* MOD-688 top cards: the Weekly Approval card, the Query summary donut and the Job costing bars (Time & Attendance). Colours and wording only.
   Chart ramp: the secondary-blue ramp, darkest first. --ta-chart-1 .. -5 are the donut's slices in size order (largest first); --ta-chart-6 is the donut's "Other";
   --ta-chart-5 is also the approval bar's remainder and the job costing "Other" bar; --ta-chart-1 is the job costing bars; --ta-chart-1-dark is their hover / selected row.
   Contrast: white on --adagin-teal 9:1, --adagin-dark-navy on --adagin-orange 5.6:1, on --adagin-green 5.5:1; the donut's names and counts are in the legend's text colour
   on white, not on the slice, so the pale ramp steps carry no text. */
:root {
  --ta-chart-1: #1F4F63;
  --ta-chart-2: #477184;
  --ta-chart-3: var(--adagin-light-teal);   /* #6F94A3 */
  --ta-chart-4: #9AB5C0;
  --ta-chart-5: #C4D5DB;
  --ta-chart-6: #E1EAED;                    /* Other */
  --ta-chart-1-dark: #1A3F4F;
}
.attendance-charts .ta-approval__pct { color: var(--adagin-dark-navy); }
.attendance-charts .ta-approval__bar { width: 100%; max-width: 12rem; height: 0.5rem; margin: var(--adagin-space-1) 0; border-radius: var(--adagin-radius-pill); background-color: var(--ta-chart-5); overflow: hidden; }
.attendance-charts .ta-approval__bar-fill { display: block; height: 100%; border-radius: var(--adagin-radius-pill); background-color: var(--adagin-teal); }
.attendance-charts .ta-approval__pill--review { background-color: var(--adagin-orange); color: var(--adagin-dark-navy); }
.attendance-charts .ta-approval__pill--done { background-color: var(--adagin-green); color: var(--adagin-dark-navy); }
.attendance-charts .ta-approval__pill--approved { background-color: var(--adagin-teal); color: var(--adagin-white); }
/* ADAS-514: the overhead pending pill sits next to the regular one, outlined so the two flows read apart. */
.attendance-charts .ta-approval__pill--overhead { background-color: transparent; border: 1px solid var(--adagin-orange); color: var(--adagin-dark-navy); }
.attendance-charts .ta-approval__sub--over { font-size: 0.75rem; opacity: 0.8; }
.attendance-charts .ta-jc__bar { border-radius: var(--adagin-radius-pill); background-color: var(--ta-chart-1); }
.attendance-charts .ta-jc__bar--other { background-color: var(--ta-chart-5); }
.attendance-charts .ta-jc__row--click:is(:hover, :focus-visible, [aria-expanded="true"]) .ta-jc__bar:not(.ta-jc__bar--other) { background-color: var(--ta-chart-1-dark); }
/* end MOD-688 top cards */

/* MOD-706 labelled search: a bold 14px label on the left of a search box, pushed to the right of a flex bar (just before its buttons). Generic
   (.adagin-bar-search) so other pages' bars can reuse it; today only Time & Attendance's .ta-bar uses it. Width (viewport units, the ticket's "page"):
   the box is 30vw, never below 220px, never above 480px and never above one third of the viewport (max-width: 33.33vw): 410px at 1366,
   432px at 1440, 480px at 1920. Below 900px the group takes its own row at full width and the box fills what the label leaves. */
:root {
  --adagin-border-control: #8090AA;   /* MOD-706: control border (3.2:1 on white) */
  --adagin-placeholder: #48566F;      /* MOD-706: placeholder text (MOD-691: now the same value as --adagin-text-muted) */
}

.adagin-bar-search {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--adagin-space-2);
  margin-left: auto;
  max-width: 100%;
}

/* The global `label:not(.switch):not(.adagin-btn)` rule is (0,2,1): :not() counts as its argument, so each :not(.x) adds a class. It sets 500 weight,
   muted navy, 0.75 opacity and a bottom margin. This selector is (0,3,1) (group + label.class + :not(.switch)), strictly greater, so it wins
   without relying on source order or !important. A (0,2,0) scope under the group would lose. */
.adagin-bar-search label.adagin-bar-search__label:not(.switch) {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--adagin-dark-navy);
  opacity: 1;
  white-space: nowrap;
}

.adagin-bar-search__input {
  flex: 0 1 auto;
  box-sizing: border-box;
  width: clamp(220px, 30vw, 480px);
  min-width: 0;
  max-width: 33.33vw;
  border: 1px solid var(--adagin-border-control);
}

.adagin-bar-search__input::placeholder {
  color: var(--adagin-placeholder);
  opacity: 1;
}

.adagin-bar-search__input:disabled {
  cursor: not-allowed;
}

@media (max-width: 899.98px) {
  .adagin-bar-search {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .adagin-bar-search__input {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
}
/* end MOD-706 labelled search */

/* MOD-684 Approved grid: employee and department columns */
/* Portal-qa build 658 broke these cells mid-word ("Patens / ie / Farms", "MOTLALEP / ULA"). Cause: the grid is table-layout: fixed with the first three columns at
   96 / 60 / 60px (84 / 50 / 50px under 1,440px) and the cells carry `overflow-wrap: break-word` (".ta-screen table.approved-attendance > tbody > tr > td", 0,2,4).
   In a fixed layout the column width is law, so break-word splits any word wider than it. The fix is the widths: each column is as wide as its longest realistic
   word plus the cell padding (measured in Chromium at 13px Inter: bold MOTLALEPULA 98px; Patensie 51, Kirkwood 54, Overhead 57, Packhouse 64, Harvesting 62), so
   the text wraps only at spaces and hyphens. word-break is normal; overflow-wrap stays break-word, which (unlike break-all and `anywhere`) breaks a word only when
   it cannot fit on a line of its own, the last resort for a token longer than the column. The table's minimum width carries the three columns, so the grid scrolls
   sideways a little more rather than squeezing the day blocks (their 130px floor is unchanged). The Employee cell stays position: sticky (its own rule above); a
   wider sticky cell just keeps its column and Admin Dept starts after it. The selectors add .approved (0,4,4) to out-rank the 0,3,4 width rules in every media query. */
:root {
  --ta-col-employee-w: 180px; /* MOD-789: 124px before; the cell now holds the name and "code - employee type" */
  --ta-col-department-w: 200px; /* MOD-789: ONE Department column replaces Admin Dept (84px) and Farm Dept (96px) */
}

.ta-screen table.approved-attendance.approved {
  /* the MOD-684 minimum: seven minimum day blocks with their padding, and the seven outer columns (570px with Employee and Department at 96 + 60px) */
  min-width: calc(7 * (var(--ta-day-block-min-w) + 8px) + 570px - 156px + var(--ta-col-employee-w) + var(--ta-col-department-w));
}

.ta-screen table.approved-attendance.approved > thead > tr > th:nth-child(1) { width: var(--ta-col-employee-w); min-width: var(--ta-col-employee-w); }
.ta-screen table.approved-attendance.approved > thead > tr > th:nth-child(2) { width: var(--ta-col-department-w); min-width: var(--ta-col-department-w); }
/* end MOD-684 Approved grid: employee and department columns */

/* MOD-789 Approved grid Department column */
/* The Approved grid's first two columns are Employee (180px, frozen) and ONE Department column (200px; was Admin Dept and Farm Dept). Each cell is two lines, left- and
   top-aligned, 12px padding, 2px between the lines, and nothing breaks mid-word (overflow-wrap and word-break are normal; the MOD-684 break-word rule is gone).
   Employee: line 1 the name link (14/20, 600, #1F4F63), line 2 "code - employee type" (12/18, #48566F). Department: line 1 the farm department (14/20, #101729, up to two
   lines), line 2 the admin department (12/18, #48566F, one line with an ellipsis; "No admin department" in muted italics when there is none). The department cell is
   focusable (tabindex 0) and carries a Bootstrap tooltip (hover and focus) with both full names, one per line (pre-line).
   Overflow rule (applies to the name link, the employee meta line and both department lines): text wraps ONLY between words (never overflow-wrap: anywhere / break-word),
   up to 2 lines (the admin line: 1). A single token wider than the whole column (an all-caps surname from the 100-character Employee.Name, a long employee type) cannot
   be wrapped, so each of these elements is a block with min-width 0, overflow hidden and text-overflow ellipsis: the token is clipped inside its cell and can never paint
   over the neighbouring (frozen) cell. The full text stays in the link / the department tooltip.
   Specificity: every rule is table.approved-attendance.approved > tbody > tr > td:nth-child(-n+2) (0,4,4) or deeper, which out-ranks the cell rules it overrides:
   the 6px 8px cell padding and the media steps' 4px sides (0,2,4 and 0,3,4), Bootstrap's .text-center (!important, no longer on these cells) and main.css ".table td a" (0,1,2). */
.ta-screen table.approved-attendance.approved > tbody > tr > td:nth-child(-n+2) {
  padding: 12px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
}

.ta-screen table.approved-attendance.approved > thead > tr > th:nth-child(2) {
  text-align: left;
}

/* MOD-756: the header's two lines take the shared header type (12/18); the title keeps the header weight, the "Farm / Admin" sub-line stays regular. */
.ta-screen table.approved-attendance.approved > thead > tr > th.ta-dept-head > .ta-dept-head__title {
  display: block;
  font-size: var(--adagin-label-font-size);
  line-height: var(--adagin-label-line-height);
}

.ta-screen table.approved-attendance.approved > thead > tr > th.ta-dept-head > .ta-dept-head__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--adagin-label-font-size);
  font-weight: 400;
  line-height: var(--adagin-label-line-height);
}

.ta-screen table.approved-attendance.approved > tbody > tr > td.ta-name-cell > a.link,
.ta-screen table.approved-attendance.approved > tbody > tr > td.ta-name-cell > a.link > strong {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--adagin-teal);
  overflow-wrap: normal;
  word-break: normal;
}

.ta-screen table.approved-attendance.approved > tbody > tr > td.ta-name-cell > a.link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ta-screen table.approved-attendance.approved > tbody > tr > td.ta-name-cell > .ta-emp__meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: #48566F;
}

.ta-screen table.approved-attendance.approved > tbody > tr > td.ta-dept-cell > .ta-dept__farm {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #101729;
}

.ta-screen table.approved-attendance.approved > tbody > tr > td.ta-dept-cell > .ta-dept__admin {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: #48566F;
}

.ta-screen table.approved-attendance.approved > tbody > tr > td.ta-dept-cell > .ta-dept__admin--none {
  font-style: italic;
  color: #5A6780;
}

.ta-screen table.approved-attendance.approved > tbody > tr > td.ta-dept-cell:focus-visible {
  outline: 2px solid var(--adagin-light-teal);
  outline-offset: -2px;
}

.tooltip.ta-dept-tip .tooltip-inner {
  max-width: 320px;
  text-align: left;
  white-space: pre-line;
}
/* end MOD-789 Approved grid Department column */


/* MOD-817 (BDS-3, wwwroot/js/adagin-loader.js): the one shared loader. --window is the full-window blocker (navy #101729 at 50%, 2px blur, 48px
   fans, over the menu by design); --panel is the veil inside one panel (white at 70%, 24px fans, the panel keeps its height). The fans are three
   blades (#A0C450) that sweep small to large, 160ms apart, on a 1.5s loop; with reduced motion the blades stand still and the label pulses. */
.adagin-loader { display: flex; align-items: center; justify-content: center; outline: none; }
.adagin-loader--window { position: fixed; inset: 0; z-index: 100000; /* above the left nav (99999) and any open dialog, as .adagin-alert-layer */ background: rgba(16, 23, 41, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.adagin-loader--panel { position: absolute; inset: 0; z-index: 10; background: rgba(255, 255, 255, 0.7); }
.adagin-loader__box { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 90%; text-align: center; }
.adagin-loader__fans { width: 48px; height: 48px; }
.adagin-loader--panel .adagin-loader__fans { width: 24px; height: 24px; }
.adagin-loader__blade { fill: none; stroke: #A0C450; stroke-width: 4; stroke-linecap: round; opacity: 0.25; animation: adagin-loader-sweep 1.5s ease-in-out infinite; }
.adagin-loader__blade--2 { animation-delay: 160ms; }
.adagin-loader__blade--3 { animation-delay: 320ms; }
@keyframes adagin-loader-sweep { 0%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
.adagin-loader__label, .adagin-loader__more, .adagin-loader__progress { font-size: 12px; font-weight: 500; color: #5B6475; }
.adagin-loader--window .adagin-loader__label, .adagin-loader--window .adagin-loader__more, .adagin-loader--window .adagin-loader__progress { color: #DFE5F0; }
.adagin-loader__more:empty, .adagin-loader__progress:empty, .adagin-loader__retry[hidden] { display: none; }
@keyframes adagin-loader-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .adagin-loader__blade { animation: none; opacity: 1; }
  .adagin-loader__label { animation: adagin-loader-pulse 1.5s ease-in-out infinite; }
}

/* MOD-776/777 breadcrumbs and Back
   The header's rules above are #breadcrumb .breadcrumb li / a (1,1,1), li:last-of-type (1,2,1) and li:after (1,1,2). The current level is no longer
   the list's last li (the Back item follows it), so it is marked .bc-current; every rule below is an #id + ol.breadcrumb chain of at least (1,2,2) so it beats
   those, and the Back link's hover (1,4,3) beats #breadcrumb .breadcrumb a:hover (1,2,1). Pinned by BreadcrumbCssTests. */
#breadcrumb { position: relative; }
#breadcrumb ol.breadcrumb > li.bc-current { color: var(--adagin-white); }
#breadcrumb ol.breadcrumb > li.bc-current:after,
#breadcrumb ol.breadcrumb > li.bc-back:after { content: none; }
#breadcrumb ol.breadcrumb > li.bc-current .bc-edit-tag {
  display: inline-block;
  margin-left: var(--adagin-space-2);
  padding: 1px 6px;
  border: 1px solid var(--adagin-light-teal);
  border-radius: var(--adagin-radius-tag);
  font-size: var(--adagin-font-size-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--adagin-light-teal);
  vertical-align: 1px;
}
#breadcrumb ol.breadcrumb > li.bc-back { display: inline-block; margin-left: 12px; letter-spacing: normal; text-transform: none; }
#breadcrumb ol.breadcrumb > li.bc-back .bc-back-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  margin-right: 12px;
  background: rgba(138, 147, 166, 0.45);
  vertical-align: middle;
}
#breadcrumb ol.breadcrumb > li.bc-back a.bc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #8A93A6;
  text-decoration: none;
  vertical-align: middle;
}
#breadcrumb ol.breadcrumb > li.bc-back a.bc-back-link:hover,
#breadcrumb ol.breadcrumb > li.bc-back a.bc-back-link:focus-visible { color: #FFFFFF; }
#breadcrumb ol.breadcrumb > li.bc-back a.bc-back-link:focus-visible,
#breadcrumb ol.breadcrumb .bc-fold-btn:focus-visible,
#breadcrumb .bc-fold-menu a:focus-visible { outline: 2px solid var(--adagin-light-teal); outline-offset: 2px; border-radius: var(--adagin-radius-tag); }
#breadcrumb ol.breadcrumb > li.bc-fold .bc-fold-btn {
  padding: 0 2px;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--adagin-grey);
  cursor: pointer;
}
#breadcrumb ol.breadcrumb > li.bc-fold .bc-fold-btn:hover { color: var(--adagin-white); }
#breadcrumb ul.bc-fold-menu {
  position: absolute;
  top: 100%;
  z-index: 1060;
  min-width: 180px;
  margin: 2px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--adagin-dark-navy);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--adagin-radius-menu);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
/* Long names (Codex round 5): the list is a one-row flex box from md up (bootstrap's d-md-block is display:block !important, so this needs !important
   too; below md d-none still hides it). The crumb levels shrink and end in an ellipsis -- the current level first, the middle ones next -- while the
   Back item, the "..." fold and the Edit tag are flex:none, so Back is never clipped off the end. The toolbar actions (MOD-223) were float:right and
   now sit at the right end of the row (order, auto margin). */
@media (min-width: 768px) {
  #breadcrumb ol.breadcrumb { display: flex !important; align-items: center; }
}
#breadcrumb ol.breadcrumb > li { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#breadcrumb ol.breadcrumb > li.bc-current { display: flex; align-items: center; flex-shrink: 4; }
#breadcrumb ol.breadcrumb > li.bc-current .bc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#breadcrumb ol.breadcrumb > li.bc-current .bc-edit-tag { flex: none; }
#breadcrumb ol.breadcrumb > li.bc-back,
#breadcrumb ol.breadcrumb > li.bc-fold { flex: none; overflow: visible; }
#breadcrumb ol.breadcrumb > .adagin-btn { order: 1; flex: none; }
#breadcrumb ol.breadcrumb > .adagin-btn:first-of-type { margin-left: auto; }
#breadcrumb ul.bc-fold-menu[hidden] { display: none; }
#breadcrumb ul.bc-fold-menu a {
  display: block;
  padding: 6px 14px;
  font-size: var(--adagin-font-size-body);
  font-weight: 600;
  white-space: nowrap;
  color: var(--adagin-grey);
  text-decoration: none;
}
#breadcrumb ul.bc-fold-menu a:hover,
#breadcrumb ul.bc-fold-menu a:focus-visible { color: var(--adagin-white); background: rgba(255, 255, 255, 0.08); }
/* end MOD-776/777 breadcrumbs and Back */

/* MOD-758 Wage Facilitator export popups: Download (Export approvals, #frm_exportattendance) and Export Sage VIP (#frm_exportsage).
   Scoped to the dialog that holds one of the two forms, so no other popup changes. The scope is (2,2,0) -- #ajaxModal and the form id -- so
   every rule below out-ranks the global label (styles.css), .modal-header (styles.css), .alert-info (bootstrap.css) and .modal-title rules; the
   cascade is pinned by WageFacilitatorExportPopupTests. The header's text is set by Employee/WageFacilitator.js (acumen.showDetail always
   builds "Details"); the body carries no title of its own. */
/* MOD-756: the dialog and its header corners read the modal radius token (28px). */
#ajaxModal .modal-content:has(:is(#frm_exportattendance, #frm_exportsage)) {
  border-radius: var(--adagin-radius-modal);
}

#ajaxModal .modal-content:has(:is(#frm_exportattendance, #frm_exportsage)) .modal-header {
  border-top-left-radius: var(--adagin-radius-modal);
  border-top-right-radius: var(--adagin-radius-modal);
}

/* The header names the action: 18px / 26px, 600. */
#ajaxModal .modal-content:has(:is(#frm_exportattendance, #frm_exportsage)) .modal-header .modal-title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}

/* The info message in the portal's alert language (section 14: white card, 1px light-grey edge, 6px teal accent on the left, Dark Navy text),
   inline in the form: the shared AdaginAlert is a floating popup and no inline message component exists in adagin-theme.css. */
#ajaxModal .modal-content:has(:is(#frm_exportattendance, #frm_exportsage)) .alert.alert-info {
  background: var(--adagin-white);
  color: var(--adagin-dark-navy);
  border: 1px solid var(--adagin-light-grey);
  border-left: 6px solid var(--adagin-teal);
  border-radius: var(--adagin-radius-block);
  padding: var(--adagin-space-3) var(--adagin-space-4);
  font-size: 14px;
  line-height: 1.5;
}

/* Footer: Cancel (ghost) then the primary, right-aligned with 8px between (.adagin-btn-footer); the labels are 14px, the buttons stay 32px high. */
#ajaxModal .modal-content:has(:is(#frm_exportattendance, #frm_exportsage)) .adagin-btn-footer .adagin-btn {
  font-size: 14px;
  height: 32px;
}
/* end MOD-758 */

/* MOD-792: a read-only value is a span, not a <label> (a screen reader announced values as labels), and its caption is a span.detail-caption (a <label> with no control
   to point at). Both keep the muted navy look of the theme's label (above). The caption takes the MOD-756 label type tokens, exactly as the label it replaced. */
span.detail-caption {
  color: var(--adagin-navy);
  opacity: 0.75;
  font-weight: var(--adagin-label-font-weight);
  font-size: var(--adagin-label-font-size);
  line-height: var(--adagin-label-line-height);
  margin-bottom: 0.25rem;
  display: inline-block;
}

/* The value is the field's content, not a label: it stays 14px body text (no body-size token exists in :root; 14px is the portal's literal body size, as the
   other 14px rules here) at the legacy label weight, with the body line-height inherited. It must not render as a 12px semibold label. */
.detail-value {
  color: var(--adagin-navy);
  opacity: 0.75;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 0.25rem;
  display: inline-block;
}
/* end MOD-792 */

/* =============================================================================================
 * MOD-704 (portal UI alignment), batch 3a: the shared PAGE SHELL, the Time & Attendance page shape for every other list page.
 * Markup: Views/Shared/PageShell/_PageShell.cshtml (PageShellModel); script: wwwroot/js/adagin-page-shell.js. Every rule is scoped to .adagin-page-shell
 * (the page's container) or .adagin-page-shell-page (its body, set by the partial), so removing the class from a page is its rollback.
 * Pages: Reports and the My Administration lists (Views/List/Index.cshtml), Sync Management. Batch 3b (Piecework, Wage Facilitator, Bin Management,
 * Dashboard) reuses this block as it is. Colours, outlines and radii read the shared tokens (MOD-756); where a T&A rule already holds the look
 * (MOD-681 tabs, MOD-682 buttons, MOD-705 header, MOD-706 search) the shell's selector is added to that rule's group instead of copying its values.
 * ============================================================================================= */

/* MOD-708: the breadcrumb in sentence case, 14px. styles.css's ".breadcrumb { text-transform: uppercase }" (0,1,0) and the header's 13px / 600 / 0.06em
   (#breadcrumb .breadcrumb, 1,1,0) lose to this rule (1,2,0). The levels are regular weight; the current page is white (MOD-776's .bc-current) and semi-bold.
   The trail, the fold menu and Back (_BreadCrumbView.cshtml, MOD-776 / MOD-777) are untouched. */
.adagin-page-shell-page #breadcrumb .breadcrumb {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.adagin-page-shell-page #breadcrumb ol.breadcrumb > li.bc-current {
  font-weight: 600;
}

/* MOD-708: the page title, a white band under the navy header bar with a 1px divider below it; it scrolls away with the page. */
.adagin-page-shell .adagin-page-shell__head {
  margin: 0 0 var(--adagin-space-4);
  padding: var(--adagin-space-2) 0 var(--adagin-space-4);
  background: var(--adagin-white);
  border-bottom: 1px solid var(--adagin-divider);
}

.adagin-page-shell .adagin-page-shell__title {
  margin: 0;
  font-family: var(--adagin-font-heading);
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--adagin-dark-navy);
}

/* MOD-708: the page title names the list, so a grid's own title (a list without tabs) is hidden visually, as MOD-512 does inside a tab pane; it stays the
   toolbar heading's text for screen readers. A kept title (TableGridViewModelStub.KeepTitleInTab) still shows. */
.adagin-page-shell h1.tablegrid-toolbar-actions > .tablegrid-title:not(.tablegrid-title--kept) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* MOD-708: on scroll the title band scrolls away and each grid's column headers pin under the header bar and the shell's top bar (MOD-709 measures the
   bar into --adagin-page-shell-bar-h; 0 without one). The tab row and the grid's own toolbar scroll with the page, so the header row sits straight under the
   bar. (0,4,0) out-ranks MOD-396's sticky grid header (.well-grid.tablegrid-sticky .tablegrid-header, 0,3,0). The plugin still sets the header's widths
   from the body; nothing here changes a width. */
.adagin-page-shell .well-grid .tablegrid :is(.tablegrid-header, .tablegrid-multiselect-header, .tablegrid-action-header) {
  position: sticky;
  top: calc(var(--adagin-header-h) + var(--adagin-page-shell-bar-h, 0px));
  z-index: 102;
  background: var(--adagin-white);
}

/* Sync Management's MOD-396 sticky tab row and grid toolbar scroll inside the shell (only the bar and the header row pin), and its footer is not frozen
   (MOD-713: the pager row ends the table). Each selector out-ranks the MOD-396 rule it neutralises. */
.adagin-page-shell .adagin-sticky-tabs,
.adagin-page-shell .tab-header.tablegrid-sticky,
.adagin-page-shell .well-grid.tablegrid-sticky .tablegrid-footer {
  position: static;
}

/* MOD-709: the shared top bar. Its box, its stickiness under the header bar (z-index 110) and its flex row come from Time & Attendance's bar through
   the .ta-bar-wrap / .ta-bar-wrap--frozen / .ta-bar groups (section 12); its labelled search is MOD-706's .adagin-bar-search (at most one third of the
   page, at least 220px, its own row below 900px); its buttons are secondary through the MOD-682 group. adagin-page-shell.js measures its height into
   --adagin-page-shell-bar-h for the column headers that pin under it. */
.adagin-page-shell .adagin-page-shell__bar-wrap {
  margin-bottom: var(--adagin-space-4);
}

.adagin-page-shell .adagin-page-shell__period {
  flex: 0 0 auto;
}
/* MOD-710: each grid's own search box (_TableGrid.cshtml's .tablegrid-search-group, "Search:" and "Type to search...") is hidden, not removed: the
   bar's labelled box drives it (adagin-page-shell.js), so the grid's handler, its 300 ms debounce and its request are the ones that run. (0,3,1) beats the
   toolbar's display: flex (h1.tablegrid-toolbar-actions > .tablegrid-search-group, 0,2,1). The refresh and clear-filter squares stay: they still work. */
.adagin-page-shell h1.tablegrid-toolbar-actions > .tablegrid-search-group {
  display: none;
}

/* MOD-709: the shell's buttons (the top bar's, and the grid toolbar's Add, My favourites, Try New Reports (Beta), Archive / Unarchive Selected, refresh,
   clear filters) wear MOD-682's secondary look. The MOD-682 block is T&A only (every rule starts with .ta-screen, which its test requires), so the same
   declarations are repeated here on the shell's selectors, from the same tokens. */
.adagin-page-shell h1.tablegrid-toolbar-actions > .adagin-btn:not([data-state="success"]),
.adagin-page-shell .ta-menu > .adagin-btn:not([data-state="success"]), /* MOD-782: Piecework's tab toolbars (.ta-menu) */
.adagin-page-shell .wf-actions > .adagin-btn:not([data-state="success"]), /* MOD-891: Wage Facilitator's T & A Approved action bar */
.adagin-page-shell .adagin-page-shell__bar .adagin-btn:not([data-state="success"]) {
  --btn-bg: var(--adagin-white);
  --btn-bg-hover: var(--adagin-btn-tint-hover);
  --btn-bg-pressed: var(--adagin-btn-tint-pressed);
  --btn-fg: var(--adagin-dark-navy);
  --btn-border: var(--adagin-dark-navy);
  font-weight: 600;
}

.adagin-page-shell h1.tablegrid-toolbar-actions > .adagin-btn:is(:disabled, [aria-disabled="true"], .disabled):not([aria-busy="true"]):not([data-state="success"]),
.adagin-page-shell .ta-menu > .adagin-btn:is(:disabled, [aria-disabled="true"], .disabled):not([aria-busy="true"]):not([data-state="success"]),
.adagin-page-shell .wf-actions > .adagin-btn:is(:disabled, [aria-disabled="true"], .disabled):not([aria-busy="true"]):not([data-state="success"]),
.adagin-page-shell .adagin-page-shell__bar .adagin-btn:is(:disabled, [aria-disabled="true"], .disabled):not([aria-busy="true"]):not([data-state="success"]) {
  --btn-bg: var(--adagin-white);
  --btn-bg-hover: var(--adagin-white);
  --btn-bg-pressed: var(--adagin-white);
  --btn-fg: var(--adagin-btn-disabled-plain-fg);
  --btn-border: var(--adagin-btn-disabled-border);
}

/* MOD-891: Wage Facilitator's T & A Approved action bar (Select All, Confirm Selected, Confirm All), above the grid and left aligned. It is frozen under the shell's top
   bar like the grid's header strips, which stick under it: _Layout.cshtml measures its height into --adagin-wf-actions-h on the pane (0 where it is not sticky), and the
   strips' top below adds it. The buttons are the secondary look through the shell's .adagin-btn rules above. z-index 103 sits over the strips (102) and under the top bar (110). */
.adagin-page-shell .wf-actions {
  position: sticky;
  top: calc(var(--adagin-header-h) + var(--adagin-page-shell-bar-h, 0px));
  z-index: 103;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--adagin-btn-gap);
  padding: var(--adagin-space-2) 0;
  background: var(--adagin-white);
  border-bottom: var(--adagin-outline-width) solid var(--adagin-outline);
}

.adagin-page-shell .wf-actions > .adagin-btn { flex: 0 0 auto; }

/* MOD-893: the Wage Facilitator Paid tab's bar is rendered hidden and shown while the tab has rows; display: flex above would otherwise beat the hidden attribute. */
.adagin-page-shell .wf-actions[hidden] { display: none; }

/* MOD-891: Wage Facilitator's grid header strips stick under the bar above (0px on the tabs that have none). */
.adagin-page-shell .wf-grid .tablegrid :is(.tablegrid-header, .tablegrid-multiselect-header, .tablegrid-action-header) {
  top: calc(var(--adagin-header-h) + var(--adagin-page-shell-bar-h, 0px) + var(--adagin-wf-actions-h, 0px));
}

/* MOD-712: tables, buttons and links as on Time & Attendance. The header row is MOD-705's secondary blue through that block's group; the toolbar's
   buttons are secondary through the rules just above.
   Text in the rows is one navy; links in the rows are the secondary blue in every state (no visited purple), navy on hover, never underlined. */
.adagin-page-shell .tablegrid .tablegrid-detail td {
  color: var(--adagin-dark-navy);
}

.adagin-page-shell .tablegrid .tablegrid-detail a:not(.adagin-btn),
.adagin-page-shell .tablegrid .tablegrid-detail a:not(.adagin-btn):visited {
  color: var(--adagin-teal);
  text-decoration: none;
}

.adagin-page-shell .tablegrid .tablegrid-detail a:not(.adagin-btn):hover,
.adagin-page-shell .tablegrid .tablegrid-detail a:not(.adagin-btn):focus-visible {
  color: var(--adagin-dark-navy);
  text-decoration: none;
}

/* MOD-942: group (parent) rows keep the grid's white bold text on their dark level backgrounds (#384B5F, #5D7883, orange). The row and link rules
   above are (0,3,1) and (0,4,1) and so beat rojobaco-plugins' `.tablegrid tr.tablegrid-parentrow td` (0,2,2), which turned a parent row's text and
   links navy/teal on dark. These are (0,3,2) and (0,5,2), so they out-rank the row and link rules in every link state. */
.adagin-page-shell .tablegrid tr.tablegrid-parentrow td {
  color: var(--adagin-white);
  font-weight: bold;
}

.adagin-page-shell .tablegrid .tablegrid-detail tr.tablegrid-parentrow a:not(.adagin-btn),
.adagin-page-shell .tablegrid .tablegrid-detail tr.tablegrid-parentrow a:not(.adagin-btn):visited,
.adagin-page-shell .tablegrid .tablegrid-detail tr.tablegrid-parentrow a:not(.adagin-btn):hover,
.adagin-page-shell .tablegrid .tablegrid-detail tr.tablegrid-parentrow a:not(.adagin-btn):focus-visible {
  color: var(--adagin-white);
  font-weight: bold;
}

/* MOD-712: the row actions are tertiary: no outline, no fill, navy text and icon, the light navy tint on hover and pressed, the shared focus ring; the
   secondary actions stay behind the row's three-dot menu (tablegrid-compact.js / the Reports list's own). Out-ranks the grid's teal underlined link
   (.table .tablegrid-action-buttons > a:not(.adagin-btn), 0,3,1, and its :hover). */
.adagin-page-shell .table .tablegrid-action-buttons > a:not(.adagin-btn),
.adagin-page-shell .table .tablegrid-action-buttons > a:not(.adagin-btn):visited {
  height: var(--adagin-btn-height);
  padding: 0 var(--adagin-space-2);
  border-radius: var(--adagin-btn-radius);
  color: var(--adagin-dark-navy);
  text-decoration: none;
}

.adagin-page-shell .table .tablegrid-action-buttons > a:not(.adagin-btn):hover {
  background: var(--adagin-btn-tint-hover);
  color: var(--adagin-dark-navy);
  text-decoration: none;
}

.adagin-page-shell .table .tablegrid-action-buttons > a:not(.adagin-btn):active {
  background: var(--adagin-btn-tint-pressed);
}

.adagin-page-shell .table .tablegrid-action-buttons > a:not(.adagin-btn):focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: var(--adagin-btn-focus-offset);
}

/* The three-dot button is the shared outline button (rojobaco-plugins' adaginButton): tertiary is its tokens re-pointed, so its size stays. */
.adagin-page-shell .tablegrid-action-buttons > a.row-menu.adagin-btn {
  --btn-bg: transparent;
  --btn-bg-hover: var(--adagin-btn-tint-hover);
  --btn-bg-pressed: var(--adagin-btn-tint-pressed);
  --btn-fg: var(--adagin-dark-navy);
  --btn-border: transparent;
}

/* MOD-712: the Reports list's favourite star: grey #8090AA (3.2:1, MOD-706's control border) off, the accent orange on. The star's inline colour reads
   these two variables (ListController.DataExportGridModel), falling back to its old colours outside the shell. */
.adagin-page-shell {
  --report-star-off: var(--adagin-border-control);
  --report-star-on: var(--adagin-orange);
}

/* MOD-713: the pager at the bottom right of each grid, under its table and as wide: "Rows per page" (the plugin's page-size select) at the left, then
   "Page N of M", Previous Page and Next Page at the right (adagin-page-shell.js labels and names them; .adagin-page-shell__pager marks the footer it has
   set up). A 40px row with the #F8F9FC footer fill and a light grey line above it; it ends the table and is not frozen (708 un-freezes Sync's). The
   numbered page links are hidden: Previous / Next still click them (tablegrid-pager.js), so the same request goes out for the same page. */
.adagin-page-shell .tablegrid .tablegrid-footer.adagin-page-shell__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--adagin-space-2);
  min-height: 40px;
  padding: var(--adagin-space-1) var(--adagin-space-3);
  background: #F8F9FC;
  border-top: 1px solid var(--adagin-light-grey);
  color: var(--adagin-dark-navy);
}

.adagin-page-shell .tablegrid .tablegrid-footer.adagin-page-shell__pager > .tablegrid-footer-buttons {
  float: none !important;
}

.adagin-page-shell .tablegrid .tablegrid-footer.adagin-page-shell__pager > .tablegrid-footer-pager {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--adagin-space-2);
  float: none !important;
}

.adagin-page-shell .tablegrid .tablegrid-footer.adagin-page-shell__pager .tablegrid-footer-pagesize {
  display: flex;
  align-items: center;
  gap: var(--adagin-space-2);
  margin-right: auto;
  float: none !important;
}

/* (0,5,1) beats the global label rule (0,2,1); the size and weight stay the label tokens, the colour is the caption colour. */
.adagin-page-shell .tablegrid .tablegrid-footer-pagesize label.adagin-page-shell__rows-label:not(.switch) {
  margin: 0;
  color: var(--adagin-placeholder);
  opacity: 1;
  white-space: nowrap;
}

.adagin-page-shell .tablegrid .tablegrid-footer .adagin-page-shell__page-text {
  color: var(--adagin-dark-navy);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.adagin-page-shell .tablegrid .tablegrid-footer .pagination {
  flex-wrap: nowrap;
  gap: var(--adagin-space-2);
  margin: 0;
}

.adagin-page-shell .tablegrid .tablegrid-footer .pagination > li:is(.tablegrid-footer-page, .tablegrid-footer-gap) {
  display: none;
}

/* Previous Page / Next Page are secondary buttons (MOD-682's look). The theme's ".page-link { color: teal !important }" needs an !important that out-ranks
   it; nothing else here does. */
.adagin-page-shell .tablegrid .tablegrid-footer .pagination > li > .page-link {
  display: inline-flex;
  align-items: center;
  height: var(--adagin-btn-height);
  margin: 0;
  padding: 0 var(--adagin-btn-pad-x);
  border: 1px solid var(--adagin-dark-navy);
  border-radius: var(--adagin-btn-radius);
  background: var(--adagin-white);
  color: var(--adagin-dark-navy) !important;
  font-size: var(--adagin-btn-font-size);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
}

.adagin-page-shell .tablegrid .tablegrid-footer .pagination > li:not(.disabled) > .page-link:hover {
  background: var(--adagin-btn-tint-hover);
}

.adagin-page-shell .tablegrid .tablegrid-footer .pagination > li:not(.disabled) > .page-link:active {
  background: var(--adagin-btn-tint-pressed);
}

.adagin-page-shell .tablegrid .tablegrid-footer .pagination > li > .page-link:focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: var(--adagin-btn-focus-offset);
}

/* At an end: the shared readable disabled look (muted text, light border, no tint, not-allowed). */
.adagin-page-shell .tablegrid .tablegrid-footer .pagination > li.disabled > .page-link {
  border-color: var(--adagin-btn-disabled-border);
  background: var(--adagin-white);
  color: var(--adagin-btn-disabled-plain-fg) !important;
  cursor: not-allowed;
}


/* end MOD-704 page shell */

/* ---------------------------------------------------------------------------------------------
 * MOD-691. Time & Attendance and Wage Facilitator text and links (Design v28, "Text and links").
 *     Titles, body and table text are --adagin-dark-navy (#101729; --adagin-black now follows it), secondary text is --adagin-text-muted (#48566F),
 *     and every text link is --adagin-teal (#1F4F63), semibold, no underline, hover --adagin-dark-navy. The link colour is set for :link AND :visited
 *     (and focus), so the browser's default purple for a visited link never shows; the pseudo-class selectors out-rank the legacy ".table td a" and
 *     "a:hover" rules. Not links in this sense and left alone: a link on a dark-red Exception row (white, the teal is 1.1:1 there) and on an archived
 *     row (greyed on purpose).
 * ------------------------------------------------------------------------------------------- */
:root {
  --adagin-link: var(--adagin-teal);
  --adagin-link-hover: var(--adagin-dark-navy);
  --adagin-ta-grid-link: var(--adagin-link);
}

/* The text links of these screens (Codex round 2: the list is the sweep of every <a> with visible text in the T&A / Wage Facilitator templates and
   the scripts that build their markup, not only the name link): the grid links (a.link: the employee name and the shift block's farm), the Approved
   tab's contract icon, the Unapproved / Overheads / Rejected rows' scheduled times (a.ta-sched-time, legacy ".table td a" black), the piecework
   popup's activity links (a.ta-units-activity), the history drawer's employee, "Show all" / "Load more" and "Back to the day" links (outside the
   page root, so the drawer is in the scope; Bootstrap blue before), the Wage Facilitator grid's "Select all ... matching the filters", "Clear" and
   "Try again" links, its Payroll checks tab's "Show all employees" (a.wf-clear-group-link), and a standard grid's text action links. Left out on
   purpose: buttons and icon-only actions (approve / reject / lock / note icons keep their state colours), the day pills (a.btn), the tabs (a.nav-link),
   the menu items (a.dropdown-item: menu text, not a link) and the back-to-top button. The scope is classes only, so these rules stay (0,4,1). */
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) :is(a.link, a.ta-day-contract, a.ta-sched-time, a.ta-units-activity, a.ta-history-employee, a.ta-history-more, a.ta-history-back, a.wf-select-filtered-link, a.wf-clear-filtered, a.wf-load-retry, a.wf-grid-retry, a.wf-clear-group-link, .tablegrid-action-buttons > a:not(.adagin-btn)):is(:link, :visited, :active, :focus),
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) :is(a.link, a.ta-day-contract) > strong {
  color: var(--adagin-link);
  text-decoration: none;
}

:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) :is(a.link, a.ta-day-contract, a.ta-sched-time, a.ta-units-activity, a.ta-history-employee, a.ta-history-more, a.ta-history-back, a.wf-select-filtered-link, a.wf-clear-filtered, a.wf-load-retry, a.wf-grid-retry, a.wf-clear-group-link, .tablegrid-action-buttons > a:not(.adagin-btn)):is(:link, :visited):hover,
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) a.link:hover > strong {
  color: var(--adagin-link-hover);
  text-decoration: none;
}

/* State rows keep their state colour on links (Codex round 1). The two rows whose tint is not light: an Exception row (dark red, links white; teal is 1.1:1)
   and an Archived row (grey, links greyed on purpose, not active). The other states (query / overtime / short time / paid leave / absent / mismatch / invalid,
   all light tints) read teal at 6:1 or more. The direct-child strong is covered too, because the rule above colours it explicitly. A link inside a shift
   block (table.detail) keeps its own, heavier MOD-749 rule, so these overrides do not reach it. */
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) tr.bg-isexception :is(a.link, a.ta-day-contract, a.ta-sched-time, a.ta-units-activity, a.ta-history-employee, a.ta-history-more, a.ta-history-back, a.wf-select-filtered-link, a.wf-clear-filtered, a.wf-load-retry, a.wf-grid-retry, a.wf-clear-group-link, .tablegrid-action-buttons > a:not(.adagin-btn)):is(:link, :visited, :active, :focus, :hover),
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) tr.bg-isexception :is(a.link, a.ta-day-contract) > strong {
  color: #fff;
}
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) tr.bg-archived :is(a.link, a.ta-day-contract, a.ta-sched-time, a.ta-units-activity, a.ta-history-employee, a.ta-history-more, a.ta-history-back, a.wf-select-filtered-link, a.wf-clear-filtered, a.wf-load-retry, a.wf-grid-retry, a.wf-clear-group-link, .tablegrid-action-buttons > a:not(.adagin-btn)):is(:link, :visited, :active, :focus, :hover),
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) tr.bg-archived :is(a.link, a.ta-day-contract) > strong {
  color: var(--adagin-text-muted);
}

/* MOD-691 (decision 15 Oct): the employee name link is always teal, on every row, Archived (grey above) included, so a name
   always looks clickable. Not Exception rows (retest 19 Oct): dark red, teal is 1.1:1 there, so the name stays white like the other links (4.5:1 wins).
   The extra .ta-emp-name class out-ranks the Archived state rule above; the other links on those rows keep their state colour. */
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) .table tr.bg-archived a.link.ta-emp-name:is(:link, :visited, :active, :focus),
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) .table tr.bg-archived a.link.ta-emp-name > strong {
  color: var(--adagin-link);
}
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) .table tr.bg-archived a.link.ta-emp-name:is(:link, :visited):hover,
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) .table tr.bg-archived a.link.ta-emp-name:hover > strong {
  color: var(--adagin-link-hover);
}

/* The employee name link: 14px / 600, the same on every tab (the inner strong would otherwise be bold 700). */
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) a.link.ta-emp-name,
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) a.link.ta-emp-name > strong {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

/* Table text: legacy main.css paints ".table, .dataTables_info" #898A8A (3.5:1 on white) and ".table th" black; on these screens (the drawer and the
   piecework popup included) both are the body text colour. A cell that sets its own colour is the template's to set: the T&A templates' ".default"
   cells and the shift block now use the same token (Codex round 2), and the state colours (overtime red, expected green, the row tints) are kept.
   The th rule is body and footer cells only ((0,2,3), above main.css's ".table th" (0,1,1)), so a header row keeps its own (white on navy) colour.
   A form label (legacy #898A8A, then the navy at 75% opacity) is the one secondary-text colour. */
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) .table,
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) .table > :is(tbody, tfoot) > tr > th,
:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) .dataTables_info {
  color: var(--adagin-dark-navy);
}

:is(.ta-screen, .adagin-sticky-stack, .ta-history-drawer, .ta-units-page) :is(.form-label, span.detail-caption, label:not(.switch):not(.adagin-btn):not(.adagin-bar-search__label)) {
  color: var(--adagin-text-muted);
  opacity: 1;
}
/* end MOD-691 */

/* ---------------------------------------------------------------------------------------------
 * MOD-773 begin. Farm shift editor streamlined (Views/FarmShift/ShiftEditor.cshtml, js/Farm/ShiftDetail.js): the shift timeline on top
 * with the figures in its header (the three summary cards are gone), two lanes (Shift with breaks as hatched gaps, On-time windows),
 * the error count as a link to the first error, and each break's error in its own row. Colours and radii are the shared tokens
 * (section 1 and section 16); nothing here changes what the form posts.
 * ------------------------------------------------------------------------------------------- */
.fs-tl-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); gap: var(--adagin-space-3) var(--adagin-space-4); margin: var(--adagin-space-2) 0 var(--adagin-space-4); }
.fs-tl-figures > div { min-width: 0; padding: var(--adagin-space-2) var(--adagin-space-3); background: var(--fs-calc-bg); border-radius: var(--adagin-radius-tag); }
.fs-tl-figures dt { font-size: 0.8125rem; font-weight: 600; color: var(--adagin-text-muted); }
.fs-tl-figures dd { margin: 2px 0 0; font-family: 'Onest', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--adagin-dark-navy); font-variant-numeric: tabular-nums; }
.fs-tl-figures .fs-tl-figure--when dd { font-family: inherit; font-size: 0.9375rem; font-weight: 600; }

.fs-key--gap { background: repeating-linear-gradient(135deg, var(--adagin-grey) 0 3px, var(--adagin-white) 3px 6px); border: 1px solid var(--adagin-grey); }
.fs-tl-gap { position: absolute; top: 20px; height: 30px; box-sizing: border-box; background: repeating-linear-gradient(135deg, var(--adagin-grey) 0 4px, var(--adagin-white) 4px 8px); border: 1px solid var(--adagin-grey); }
.fs-tl-gap-note { position: absolute; transform: translateX(-50%); font-size: 0.6875rem; color: var(--adagin-black); white-space: nowrap; }
.fs-tl-track { position: absolute; top: 30px; height: 2px; background: var(--adagin-light-grey); }
.fs-tl-window-label { position: absolute; transform: translateX(-50%); font-size: 0.75rem; font-weight: 700; color: var(--adagin-teal); white-space: nowrap; }
.fs-tl-window-label--unset { font-weight: 400; color: var(--adagin-text-muted); }

.fs-fix-link { padding: 0; border: 0; background: none; color: var(--fs-conflict); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.fs-fix-link:focus-visible { outline: 2px solid var(--adagin-teal); outline-offset: 2px; border-radius: var(--adagin-radius-tag); }
.fs-breaks td > .fs-note { margin-top: var(--adagin-space-1); white-space: normal; }

@media (max-width: 999px) {
  .fs-tl-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* MOD-773 end. */

/* MOD-775 begin. The farm page after a shift save (Views/FarmShift/_TableView.cshtml): the line beside the farm's footer buttons while its Save is off. */
.adagin-btn-footer > .farm-shift-saved-note { margin: 0 var(--adagin-space-2) 0 0; color: var(--adagin-text-muted); font-size: 0.875rem; }
/* MOD-775 end. */

/* MOD-830 begin. Login photo: the Adagin vineyard picture with a 10% --adagin-navy tint over it, replacing appels.jpg. This overrides the
   background-image of the old rule in styles.min.css (which is left untouched), so the page no longer requests appels.jpg. The url is relative to
   /css/, the same folder the old photo lived in. Size, position and the hidden-at-1024px breakpoint are the old rule's. */
.login .background-image-container {
  background-image:
    linear-gradient(color-mix(in srgb, var(--adagin-navy) 10%, transparent), color-mix(in srgb, var(--adagin-navy) 10%, transparent)),
    url("Images/adagin-background.jpg");
}
/* MOD-830 end. */

/* MOD-786 begin. An empty Unapproved / Unapproved Overheads pane shows only its message (taSyncEmptyState sets .ta-pane--empty on #pending / #overhead; the first
   paint is covered by :has() on the server-drawn state). CSS only: no markup is removed, so every id and selector the scripts use is still there. Hidden: the table
   header row, the pager and the pending-only controls (the "N of M selected" count, Approve All - Unqueried, Select All, Approve Selected, Bulk Query Update).
   Kept: Bulk Costing Override, Bulk Add, Reprocess and the message. The frozen action pane (MOD-753) is sticky by CSS and _Layout.cshtml re-measures its height when
   the list is replaced; a hidden header row has no height of its own to add. */
.ta-screen .ta-pane--empty .ta-menu .ta-selection-count,
.ta-screen .ta-pane--empty #approve-unapproved-all,
.ta-screen .ta-pane--empty #approve-unapproved-all-over,
.ta-screen .ta-pane--empty #approve-selectall,
.ta-screen .ta-pane--empty #approve-selectall-over,
.ta-screen .ta-pane--empty #approve-unapproved-selected,
.ta-screen .ta-pane--empty #approve-unapproved-selected-over,
.ta-screen .ta-pane--empty #update-unapproved-all,
.ta-screen .ta-pane--empty #update-unapproved-overhead-all,
.ta-screen .ta-pane--empty table > thead,
.ta-screen .ta-pane--empty .ta-pager { display: none; }

.ta-screen .tab-pane:has(.ta-empty-state:not([data-state=""])) .ta-menu .ta-selection-count,
.ta-screen .tab-pane:has(.ta-empty-state:not([data-state=""])) #approve-unapproved-all,
.ta-screen .tab-pane:has(.ta-empty-state:not([data-state=""])) #approve-unapproved-all-over,
.ta-screen .tab-pane:has(.ta-empty-state:not([data-state=""])) #approve-selectall,
.ta-screen .tab-pane:has(.ta-empty-state:not([data-state=""])) #approve-selectall-over,
.ta-screen .tab-pane:has(.ta-empty-state:not([data-state=""])) #approve-unapproved-selected,
.ta-screen .tab-pane:has(.ta-empty-state:not([data-state=""])) #approve-unapproved-selected-over,
.ta-screen .tab-pane:has(.ta-empty-state:not([data-state=""])) #update-unapproved-all,
.ta-screen .tab-pane:has(.ta-empty-state:not([data-state=""])) #update-unapproved-overhead-all,
.ta-screen .tab-pane:has(.ta-empty-state:not([data-state=""])) table > thead,
.ta-screen .tab-pane:has(.ta-empty-state:not([data-state=""])) .ta-pager { display: none; }

/* The message takes focus when the last row leaves (tabindex -1): no ring on the block itself. */
.ta-empty-state:focus { outline: none; }

/* "View approved records" is the shared outline variant (adagin-button variant="outline", adagin-btn--outline); only its place under the text is set here. */
.ta-screen .ta-empty-state > .adagin-btn {
  align-self: center;
  margin-top: var(--adagin-space-2);
}
/* MOD-786 end. */

/* =============================================================================================
 * MOD-811. Time & Attendance approve popup (taApproveAll in TimeAndAttendance.js): Approve All - Unqueried and Approve Selected on Unapproved and
 * Unapproved Overheads. It is the shared alert (section 14) with .ta-approve-confirm, a class only that popup carries: the alert is a child of body,
 * outside .ta-screen, so its rules key on that class as the day menu's key on .ta-day-menu. Design Guide: the popup at --adagin-radius-modal (28),
 * the KPI cards at --adagin-radius-card (20) with the secondary blue outline, the title Onest 18/26, the body Inter 14/22, captions #48566F 12/18
 * (--adagin-text-muted), overtime #A32314 (7.4:1 on white). The amber line is #7A3E00 on #FFF4E5 (about 8:1) with the orange accent on its edge.
 * ============================================================================================= */
.adagin-alert.ta-approve-confirm {
  width: 640px;
  padding: var(--adagin-space-5);
  border: var(--adagin-outline-width) solid var(--adagin-light-grey);
  border-radius: var(--adagin-radius-modal);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 22px;
}

.adagin-alert.ta-approve-confirm .adagin-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--adagin-radius-pill);
  background: #EEF5E8; /* the green at 12% on white */
  color: var(--adagin-green);
  font-size: 20px;
  line-height: 1;
}

.adagin-alert.ta-approve-confirm .adagin-alert__title {
  font-family: 'Onest', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.adagin-alert.ta-approve-confirm .adagin-alert__line {
  color: var(--adagin-text-muted);
}

/* The blocks span the popup under the icon and the close button, as in the design: the icon column is 40px, the close button takes 34px (44px drawn
   10px into the padding), each with the grid's 12px gap. */
.ta-approve-confirm .ta-approve {
  display: grid;
  gap: var(--adagin-space-3);
  margin: var(--adagin-space-3) calc(-34px - var(--adagin-space-3)) 0 calc(-40px - var(--adagin-space-3));
  color: var(--adagin-dark-navy);
}

.ta-approve-confirm .ta-approve__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--adagin-space-2);
}

.ta-approve-confirm .ta-approve__chip {
  padding: 2px var(--adagin-space-2);
  border-radius: var(--adagin-radius-pill);
  background: #E8EEF1; /* the secondary blue at 10% on white */
  color: var(--adagin-teal);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.ta-approve-confirm .ta-approve__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--adagin-space-3);
}

.ta-approve-confirm .ta-approve__kpis--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ta-approve-confirm .ta-approve__kpi {
  padding: var(--adagin-space-3) var(--adagin-space-4);
  border: var(--adagin-outline-width) solid var(--adagin-outline);
  border-radius: var(--adagin-radius-card);
}

.ta-approve-confirm .ta-approve__kpi-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.ta-approve-confirm .ta-approve__kpi-value {
  font-family: var(--adagin-font-heading);
  white-space: nowrap;
  font-size: var(--adagin-font-size-title); /* MOD-695: the dialog has no 24px title; the headline figure is the title size */
  font-weight: 600;
  line-height: var(--adagin-line-height-title);
  letter-spacing: -0.02em;
}

.ta-approve-confirm .ta-approve__caption {
  color: var(--adagin-text-muted);
  font-size: 12px;
  line-height: 18px;
}

.ta-approve-confirm .ta-approve__caption.ta-approve__ot {
  color: #A32314;
  font-weight: 600;
}

.ta-approve-confirm .ta-approve__activities {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 168px 88px;
  align-items: center;
  column-gap: var(--adagin-space-3);
  row-gap: var(--adagin-space-2);
  padding: var(--adagin-space-3) var(--adagin-space-4);
  border: var(--adagin-outline-width) solid var(--adagin-divider);
  border-radius: var(--adagin-radius-card-sm);
}

.ta-approve-confirm .ta-approve__activities--no-rand {
  grid-template-columns: minmax(0, 1fr) auto 168px;
}

.ta-approve-confirm .ta-approve__heading,
.ta-approve-confirm .ta-approve__more {
  grid-column: 1 / -1;
}

.ta-approve-confirm .ta-approve__heading {
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.ta-approve-confirm .ta-approve__activity {
  display: contents;
}

.ta-approve-confirm .ta-approve__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ta-approve-confirm .ta-approve__hours,
.ta-approve-confirm .ta-approve__rand {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ta-approve-confirm .ta-approve__bar {
  display: block;
  height: 6px;
  border-radius: var(--adagin-radius-pill);
  background: var(--adagin-divider);
  overflow: hidden;
}

.ta-approve-confirm .ta-approve__fill {
  display: block;
  height: 100%;
  border-radius: var(--adagin-radius-pill);
  background: var(--adagin-teal);
}

.ta-approve-confirm .ta-approve__skipped {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--adagin-space-1) var(--adagin-space-2);
  padding: var(--adagin-space-2) var(--adagin-space-3);
  border: var(--adagin-outline-width) solid var(--adagin-orange);
  border-radius: var(--adagin-radius-block);
  background: #FFF4E5;
  color: #7A3E00;
}

.ta-approve-confirm .ta-approve__skipped .adagin-inline-icon {
  color: var(--adagin-orange);
}

.ta-approve-confirm .ta-approve__review {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--adagin-teal);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.ta-approve-confirm .ta-approve__review:focus-visible {
  outline: 2px solid var(--adagin-dark-navy);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .ta-approve-confirm .ta-approve__kpis,
  .ta-approve-confirm .ta-approve__kpis--two {
    grid-template-columns: minmax(0, 1fr);
  }

  .ta-approve-confirm .ta-approve__activities {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  /* No Rand column and the bar is hidden here, so a non-cost activity is only a name and hours: two columns, or the next name lands in a spare third cell. */
  .ta-approve-confirm .ta-approve__activities--no-rand {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ta-approve-confirm .ta-approve__bar {
    display: none;
  }
}
/* MOD-811 end. */
/* MOD-691: the per-shift "break" and "overtime" lines in the T&A detail cell: shared tokens (muted grey, overtime text red), not inline #007bff / red. */
.ta-detail-break { color: var(--adagin-text-muted); font-size: 12px; }
.ta-detail-overtime { color: var(--ta-state-overtime-text); font-weight: bold; }
/* ...but dark navy on an approved (green) block, archived or not: the muted grey is 3.74:1 on that green. */
.ta-screen table.detail.detailapproved .ta-detail-break { color: var(--adagin-dark-navy); }

/* MOD-934: the status line of a bulk write running in the background (adagin-bulk-write.js): fixed, bottom right, the page stays usable. */
.adagin-bulk-status { position: fixed; right: 16px; bottom: 16px; z-index: 1090; display: flex; flex-direction: column; gap: 8px; width: 320px; max-width: calc(100vw - 32px); }
.adagin-bulk-status__row { background: #fff; border: 1px solid #DFE5F0; border-radius: var(--adagin-radius-input); padding: 10px 12px; box-shadow: 0 2px 8px rgba(16, 23, 41, 0.15); }
.adagin-bulk-status__text { font-size: 12px; font-weight: 500; color: #101729; }
.adagin-bulk-status__bar { height: 4px; margin-top: 8px; border-radius: var(--adagin-radius-tag); background: #DFE5F0; overflow: hidden; }
.adagin-bulk-status__bar > span { display: block; height: 100%; width: 0; background: #A0C450; transition: width 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .adagin-bulk-status__bar > span { transition: none; } }

/* MOD-957: one down-chevron for every row menu and sortable header. Rows use the sprite's keyboard_arrow_down (ButtonIcons); headers draw the same path as a mask,
   so it takes the header's text colour. An inactive sortable header shows it at 55%, the active-sort column at full opacity (flipped for ascending, as the old
   triangles were) over a header one step darker: the header's own colour (navy, or the T&A secondary blue) under a 20% black shade, so every header variant
   gets its own darker step and no new colour is introduced. The old sort glyph (sort-icon) is hidden: the chevron carries the state. */
:root {
  --adagin-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M469-358q-5-2-10-7L261-563q-9-9-8.5-21.5T262-606q9-9 21.5-9t21.5 9l175 176 176-176q9-9 21-8.5t21 9.5q9 9 9 21.5t-9 21.5L501-365q-5 5-10 7t-11 2q-6 0-11-2Z'/%3E%3C/svg%3E");
  --adagin-table-header-active-shade: color-mix(in srgb, black 20%, transparent);
}
th i.fa-caret-down,
.fst-sort::after {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  opacity: 0.55;
}
th i.fa-caret-down::before,
.fst-sort::after {
  content: "";
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--adagin-chevron-down) center / contain no-repeat;
  mask: var(--adagin-chevron-down) center / contain no-repeat;
}
/* The icon's own pseudo fills the 14px <i>; .fst-sort::after keeps the 14px it is given above. */
th i.fa-caret-down::before { width: 100%; height: 100%; }
.fst-sort::after { display: inline-block; margin-left: 4px; }
th i.sort-icon.fa { display: none; }
th:has(i.sort-icon.fa) i.fa-caret-down,
.fst-table thead th[aria-sort="ascending"] .fst-sort::after,
.fst-table thead th[aria-sort="descending"] .fst-sort::after { opacity: 1; }
th:has(i.sort-icon.fa-sort-alpha-down) i.fa-caret-down,
.fst-table thead th[aria-sort="ascending"] .fst-sort::after { transform: rotate(180deg); }
th:has(i.sort-icon.fa),
.fst-table thead th[aria-sort="ascending"],
.fst-table thead th[aria-sort="descending"] {
  background-image: linear-gradient(var(--adagin-table-header-active-shade), var(--adagin-table-header-active-shade));
}
/* MOD-957: the grid footer's More actions button is a .dropdown-toggle whose ellipsis-v icon now renders as keyboard_arrow_down, so the toggle's own ::after chevron
   (styles.css / bootstrap) would make it two chevrons: the sprite glyph is the only one. */
.adagin-btn.dropdown-toggle[data-action-icon="ellipsis-v"]::after { display: none; }

/* MOD-1080 (WF0-6b): the Wage Facilitator period total opens a read-only allocation popup; the link keeps the figure's look. */
.wf-grid .wf-alloc-link { color: inherit; text-decoration: underline dotted; cursor: pointer; }
.wf-alloc__who { margin-bottom: 8px; }
.wf-alloc__code { color: var(--adagin-muted, #6b7280); margin-left: 6px; }
.wf-alloc__table { width: 100%; }
.wf-alloc__num { text-align: right; }
.wf-alloc__total th { border-top: 2px solid currentColor; }

/* ---------------------------------------------------------------------------------------------
 * MOD-1115 (P4-13c): narrow windows keep each frozen row to ONE line
 *     At 175% zoom on a 1,440 x 900 screen the window is 823 x 514 CSS px and the frozen stack (top bar 64, filter bar 143 because it wrapped, day cards 288 in four
 *     rows, bulk bar 110 in two rows, header row) was about 660px: more than the window. The wrapping was the cost, so at a narrow window (1,100px and under; the
 *     breakpoint is written in each query, a custom property cannot sit in a media query) every frozen row is one line:
 *       - the filter bar (.ta-bar: week, Employee search, Filters, Search): the search box takes whatever the other three leave, the Search button is its icon
 *         (its label stays for assistive technology) and the search label is visually hidden under 900px. At 790px and over; a narrower window wraps as before;
 *       - the day cards (.ta-day-pills): one row of compact cards (weekday, date and tag on one line) that scrolls sideways;
 *       - the action group (.ta-menu__actions): one row; what does not fit moves into a "More" menu (adagin-action-overflow.js, .ta-more-*), the same buttons.
 *     Every rule is inside a max-width: 1100px query, so a window wider than that (1,440 and 1,920 at 100%) is unchanged. The classes are the shared ones, so
 *     Piecework, Wage Facilitator and Bin Management pick the rows up by wearing them. --adagin-compact-pad / --adagin-compact-control-h are the narrow
 *     spacing and control height (one step down: 4px, 32px, the button standard).
 * ------------------------------------------------------------------------------------------- */
:root {
  --adagin-compact-pad: var(--adagin-space-1);
  --adagin-compact-control-h: 32px;
}

.ta-more-toggle[hidden],
.ta-more-menu[hidden] {
  display: none !important;
}

.ta-more-chevron {
  width: 6px;
  height: 6px;
  margin-left: var(--adagin-space-2);
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

.ta-more-toggle[aria-expanded="true"] .ta-more-chevron {
  transform: translateY(1px) rotate(225deg);
}

.ta-more-menu {
  position: absolute;
  top: calc(100% + var(--adagin-space-1));
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--adagin-space-1);
  min-width: 14rem;
  padding: var(--adagin-space-2);
  background: var(--adagin-white);
  border: var(--adagin-outline-width) solid var(--adagin-outline);
  border-radius: var(--adagin-radius-block);
  box-shadow: var(--adagin-shadow-raised);
}

.ta-more-menu > .adagin-btn {
  width: 100%;
  justify-content: flex-start;
}

@media (min-width: 790px) and (max-width: 1100px) {
  .ta-bar-wrap {
    padding-block: var(--adagin-compact-pad);
  }

  .ta-bar {
    flex-wrap: nowrap;
    gap: var(--adagin-space-2);
  }

  .ta-bar .adagin-bar-search {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 0;
  }

  .ta-bar .adagin-bar-search__input {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 96px;
    height: var(--adagin-compact-control-h);
  }

  .ta-bar > .adagin-btn {
    flex: 0 0 auto;
  }
}

@media (min-width: 790px) and (max-width: 899.98px) {
  .ta-bar .adagin-bar-search label.adagin-bar-search__label:not(.switch) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .ta-bar > #filter .adagin-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

@media (max-width: 1100px) {
  .ta-day-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .ta-day-pills a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill {
    flex: 1 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    min-height: var(--adagin-compact-control-h);
    padding: var(--adagin-compact-pad) var(--adagin-space-2);
    white-space: nowrap;
  }

  .ta-day-pills a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill:focus-visible {
    outline-offset: -2px;
  }

  .ta-day-pills a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill .ta-day-name {
    flex: 0 0 auto;
    line-height: 20px;
  }

  .ta-day-pills a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill .ta-day-date {
    flex: 0 0 auto;
    order: 2;
    font-size: 14px;
    line-height: 20px;
  }

  .ta-day-pills a.btn:is(.weekday, .ta-rejected-weekday).ta-day-pill .ta-day-tag {
    order: 3;
    max-width: none;
    overflow-wrap: normal;
    line-height: 20px;
  }

  .ta-screen:is(.ta-main-screen) .tab-pane .date-header {
    padding-block: var(--adagin-compact-pad);
  }

  .ta-screen :is(#pending, #overhead, #approved) > .ta-menu {
    flex-wrap: nowrap;
    padding-block: var(--adagin-compact-pad);
  }

  .ta-screen .ta-menu > .ta-menu__actions {
    position: relative;
    flex: 1 1 0;
    flex-wrap: nowrap;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-end;
  }

  .ta-screen .ta-menu > .ta-selection-count {
    flex: 0 0 auto;
  }

  .adagin-sticky-stack .ta-menu.ta-menu--more-open {
    z-index: 105; /* above the table header row (99) that follows the toolbar, below the frozen bar (110) */
  }
}