/* =============================================================================================
 * MOD-783 (portal UI alignment), batch 3b: the Wage Facilitator on the shared page shell (Views/Employee/_WageFacilitator.cshtml, .adagin-page-shell on its container).
 * What the shell block above already gives the page by its selectors: the title band, the bar (MOD-709), the labelled search (MOD-706), the tabs and the one outlined
 * pane (MOD-711: the page's .nav-tabs and .tab-content.tasi-tab), the secondary-blue sentence-case column headers and link colours (MOD-712) and the pager
 * (MOD-713). This block adds only what is the page's own: the period group in the bar, the Filters panel's wiring to the T&A panel look (the .ta-filters-*,
 * .ta-filter and .ta-chips rules of section 12 are not scoped to T&A, the page uses them as they are), the grid's frozen header under the bar, the tertiary row
 * actions and the secondary action buttons. Every rule is scoped to .adagin-page-shell.wf-screen (the page's own hook, as Bin's .bin-page; MOD-783 follow-up to the page-sheet guard): removing the classes is the rollback.
 * ============================================================================================= */

/* The period (Start date, Pay run, and the line naming the period) at the left of the bar. The Start date control is T&A's week box (.ta-bar__week). */
.adagin-page-shell.wf-screen .wf-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--adagin-space-1) var(--adagin-space-3);
}

/* MOD-783 (portal-qa build 741): the period never grows wider than the bar. The shell gives it flex: 0 0 auto (it does not shrink), so it took its
   one-line width (week box + Pay run, sized to its longest option, + the period line), 1049px, and at 1280px ran 64px past the bar and gave the page a
   sideways scroll (scrollWidth 1305). Held to the bar, its own wrap puts the period line under the controls. */
.adagin-page-shell.wf-screen .adagin-page-shell__period {
  max-width: 100%;
  min-width: 0;
}

.adagin-page-shell.wf-screen .wf-period .wf-payrun {
  display: flex;
  align-items: center;
  gap: var(--adagin-space-2);
}

/* (0,3,1) beats the global label rule (0,2,1); a caption beside its select, not above it. */
.adagin-page-shell.wf-screen .wf-period .wf-payrun > label {
  margin: 0;
  white-space: nowrap;
}

.adagin-page-shell.wf-screen .wf-period .wf-payrun > #wf-payrun {
  width: 9rem; /* MOD-888: with the period strip and the week box the bar must hold one row at 1,366px: a long run name is cut with an ellipsis, the full text is in the list */
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
}

/* WageFacilitator.js hides the Pay run for a single pay run with visibility:hidden (jQuery writes "visibility: hidden", the markup "visibility:hidden"). In a
   bar the kept place is only an empty slot, so a hidden Pay run takes none; a shown one is untouched. */
.adagin-page-shell.wf-screen #wf-payrun-col[style*="visibility:hidden"],
.adagin-page-shell.wf-screen #wf-payrun-col[style*="visibility: hidden"] {
  display: none;
}

.adagin-page-shell.wf-screen .wf-period #wf-period-label {
  flex: 1 0 100%;
  margin: 0;
}

/* MOD-888 (WF0-11): ONE bar. The pay run period (arrows around the run's name and period) is the first item of the period group, then the week box (the date entry and
   the fallback before a period is named), then the Pay run choice, all on the bar's row (no row of its own). Until setPeriod names the period (WageFacilitator.js
   writes visibility:visible and adds .wf-period--named) the strip takes no place and the week box keeps its own arrows; once named, the strip's arrows are the one
   pair, so the week box's own are dropped (the box and its calendar stay). */
.adagin-page-shell.wf-screen .wf-period .wf-period-nav {
  display: flex;
  flex: 0 0 auto;
  order: 0;
  align-items: center;
  gap: var(--adagin-space-2);
}

.adagin-page-shell.wf-screen .wf-period .wf-period-nav[style*="visibility:hidden"],
.adagin-page-shell.wf-screen .wf-period .wf-period-nav[style*="visibility: hidden"] {
  display: none;
}

.adagin-page-shell.wf-screen .wf-period > .ta-bar__week {
  order: 1;
}

.adagin-page-shell.wf-screen .wf-period > .wf-payrun {
  order: 2;
}

.adagin-page-shell.wf-screen .wf-period.wf-period--named > .ta-bar__week {
  width: 176px;
}

.adagin-page-shell.wf-screen .wf-period.wf-period--named .ta-bar__week .form-group.row > .fa-chevron-left,
.adagin-page-shell.wf-screen .wf-period.wf-period--named .ta-bar__week .form-group.row > .fa-chevron-right {
  display: none;
}

.adagin-page-shell.wf-screen .wf-period .wf-period-nav #wf-period-label {
  flex: 0 1 auto;
}

.adagin-page-shell.wf-screen .wf-period .wf-period-nav > .wf-period-arrow {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
}

/* The Filters count: an orange dot with a navy number on the white secondary button (as on Time & Attendance, MOD-682). */
.adagin-page-shell.wf-screen .adagin-page-shell__bar .ta-filter-count {
  color: var(--adagin-dark-navy);
}

/* The Search the page already had is the bar's (its pending-change dot is T&A's). The hidden state carrier is no flex item. */
.adagin-page-shell.wf-screen .adagin-page-shell__bar > #filter-data {
  display: none;
}

/* The grid's toolbar and the legacy sticky stack: in the shell only the bar and the column headers pin (MOD-708). The page's MOD-753 rules froze the grid's
   toolbar under the header and the column headers under that toolbar; here the toolbar scrolls with the page and the header row sits straight under the bar
   (the shell rule above, 0,4,0, comes later than MOD-753's and ties it, so it wins; this one is the toolbar). */
.adagin-page-shell.wf-screen .wf-grid > .tab-header {
  position: static;
}

/* MOD-712: the Actions column's links (Confirm, Unapprove, Unconfirm, Unpay, and the day's Confirm / Reset) are tertiary: no outline, no fill, navy text and
   icon, the light navy tint on hover and pressed, the shared focus ring. The cell and its other links keep the shell's link colour. A disabled (locked)
   one keeps the shared disabled colours; the thumbs lose their green and red. */
.adagin-page-shell.wf-screen .wf-grid .tablegrid-detail td a:is(.unapproval-confirm-item, .unapproval-reject-item, .unapproval-unpay-item, .day-confirm-item):not(.disabled),
.adagin-page-shell.wf-screen .wf-grid .tablegrid-detail td a:is(.unapproval-confirm-item, .unapproval-reject-item, .unapproval-unpay-item, .day-confirm-item):not(.disabled):visited {
  display: inline-block;
  padding: var(--adagin-space-1) var(--adagin-space-2);
  border: 1px solid transparent;
  border-radius: var(--adagin-btn-radius);
  background: transparent;
  color: var(--adagin-dark-navy);
  font-weight: 600;
  text-decoration: none;
}

.adagin-page-shell.wf-screen .wf-grid .tablegrid-detail td a:is(.unapproval-confirm-item, .unapproval-reject-item, .unapproval-unpay-item, .day-confirm-item):not(.disabled):hover {
  background: var(--adagin-btn-tint-hover);
  color: var(--adagin-dark-navy);
}

.adagin-page-shell.wf-screen .wf-grid .tablegrid-detail td a:is(.unapproval-confirm-item, .unapproval-reject-item, .unapproval-unpay-item, .day-confirm-item):not(.disabled):active {
  background: var(--adagin-btn-tint-pressed);
}

.adagin-page-shell.wf-screen .wf-grid .tablegrid-detail td a:is(.unapproval-confirm-item, .unapproval-reject-item, .unapproval-unpay-item, .day-confirm-item):not(.disabled):focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: var(--adagin-btn-focus-offset);
}

.adagin-page-shell.wf-screen .wf-grid .tablegrid-detail td a:is(.unapproval-confirm-item, .unapproval-reject-item, .unapproval-unpay-item, .day-confirm-item) .fa {
  color: inherit;
}

/* MOD-682: the action buttons under each tab (Confirm Selected / All, Download, Export Sage VIP, Paid ..., Unpaid ...) are secondary, as T&A's action pane:
   white fill, 1px navy border, navy text and icon, semibold; the shared button's tokens re-pointed, so its markup, ids and handlers are untouched. */
.adagin-page-shell.wf-screen .tab-content .adagin-btn-row .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.wf-screen .tab-content .adagin-btn-row .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-783 verification (portal-qa build 739): every tab's grid scrolls sideways inside the outlined pane, never the page. The grid's flex wrapper
   (.form-inline) let a grid with fixed column widths (Payroll Checks, MOD-340) grow to its table's width and run past the pane's border and the
   window; the three Wage Facilitator tabs already held theirs (the view's own .wf-grid rules). One rule for the four tabs, the same as .wf-grid's:
   the grid and its view stay at the pane's width, the header clips, the rows scroll sideways (the plugin moves the header with them). */
.adagin-page-shell.wf-screen .tab-content.tasi-tab .tablegrid,
.adagin-page-shell.wf-screen .tab-content.tasi-tab .tablegrid-view {
  max-width: 100%;
}

.adagin-page-shell.wf-screen .tab-content.tasi-tab .tablegrid-header {
  overflow: hidden;
}

.adagin-page-shell.wf-screen .tab-content.tasi-tab .tablegrid-detail {
  overflow-x: auto;
}
/* end MOD-783 */

/* MOD-1071 (WF0-3a): the Validation Checks tab's Notes cell is one line per issue (Services/PayrollChecksNotes.cs), 14 px, wrapping inside its column (the
   column is NotesWidth wide) so the grid does not scroll sideways at 1,366 px. Each line ends in its link (the employee's profile, or T & A Approved). */
.adagin-page-shell.wf-screen #payrollchecks-list td:has(.wf-notes) {
  white-space: normal;
  overflow-wrap: anywhere;
}

.adagin-page-shell.wf-screen #payrollchecks-list .wf-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.adagin-page-shell.wf-screen #payrollchecks-list .wf-notes .wf-note + .wf-note {
  margin-top: 2px;
}

.adagin-page-shell.wf-screen #payrollchecks-list .wf-notes .wf-note-link {
  white-space: nowrap;
}
/* end MOD-1071 */

/* MOD-1072 (WF0-12a) Wage Facilitator grid: ONE Employee column and ONE Department column on T & A Approved, Wage Confirmed and Wage Paid.
   The same look as T&A Approved's (MOD-789 above): the Employee cell is the name link (14/20, 600) over "code - employee type" (12/18), the Department cell the
   farm department (14/20, up to two lines) over the admin department (12/18, one line; "No admin department" muted and italic when there is none). The grid is the
   tablegrid plugin's, not T&A's table, so the cell parts are styled by class under .wf-grid rather than by td position. Text wraps only between words, and each
   part is a clipped block, so one long token can never paint over the next cell. The header says "Department" over "Farm / Admin" and holds the Employee sort
   menu (the .ta-sort rules in section 2, the same menu as T&A's, here sorting the whole list on the server). */
.adagin-page-shell.wf-screen .wf-grid .tablegrid-detail td:has(> .ta-emp-name),
.adagin-page-shell.wf-screen .wf-grid .tablegrid-detail td:has(> .ta-dept-cell) {
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.adagin-page-shell.wf-screen .wf-grid a.link.ta-emp-name {
  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;
  overflow-wrap: normal;
  word-break: normal;
  color: var(--adagin-teal);
}

.adagin-page-shell.wf-screen .wf-grid .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;
}

.adagin-page-shell.wf-screen .wf-grid .ta-dept-cell {
  min-width: 0;
  max-width: 100%;
  text-align: left;
}

.adagin-page-shell.wf-screen .wf-grid .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;
}

.adagin-page-shell.wf-screen .wf-grid .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;
}

.adagin-page-shell.wf-screen .wf-grid .ta-dept-cell > .ta-dept__admin--none {
  font-style: italic;
  color: #5A6780;
}

.adagin-page-shell.wf-screen .wf-grid .ta-dept-cell:focus-visible {
  outline: 2px solid var(--adagin-light-teal);
  outline-offset: 2px;
}

.adagin-page-shell.wf-screen .wf-grid th.ta-dept-head > span > .ta-dept-head__title {
  display: block;
  font-size: var(--adagin-label-font-size);
  line-height: var(--adagin-label-line-height);
}

.adagin-page-shell.wf-screen .wf-grid th.ta-dept-head > span > .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);
}
/* end MOD-1072 Wage Facilitator grid Employee and Department columns */

/* MOD-1072 (WF0-12a) Wage Facilitator spacing: the filter bar, the applied-filter chips, the cards, the tabs and the table's pane are one step apart, the 8px
   step (--adagin-space-2). Each gap is carried once, by the element above it: the bar's wrap carries the gap below the bar, the chips row carries the gap
   below itself (its top padding from the theme's .ta-chips, section 12, is zeroed here so it does not add a second step on top of the bar's), the cards'
   block carries the gap below the cards and no top margin of its own, and the pane takes the step as padding. The chips row is hidden (display: none, the
   [hidden] rule of the theme) whenever no filter is applied, so it adds no box and no margin then and the bar's step runs straight to the cards. */
.adagin-page-shell.wf-screen .adagin-page-shell__bar-wrap {
  margin-bottom: var(--adagin-space-2);
}

.adagin-page-shell.wf-screen > .wf-chips {
  padding-top: 0;
  margin-bottom: var(--adagin-space-2);
}

.adagin-page-shell.wf-screen > .wf-cards {
  margin-bottom: var(--adagin-space-2);
}

.adagin-page-shell.wf-screen .tab-content.tasi-tab {
  padding: var(--adagin-space-2);
}

/* MOD-1072: the Code and Admin column filters (WageFacilitator.js decorateHeaders) sit in the Employee and Department headers beside the plugin's own menu. */
.adagin-page-shell.wf-screen .wf-grid .wf-colfilter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 0 8px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--adagin-label-font-size);
  line-height: var(--adagin-label-line-height);
  font-weight: 400;
  cursor: pointer;
}

.adagin-page-shell.wf-screen .wf-grid .wf-colfilter.is-active {
  font-weight: 700;
}

.adagin-page-shell.wf-screen .wf-grid .wf-colfilter:focus-visible {
  outline: 2px solid var(--adagin-light-teal);
  outline-offset: 2px;
}

/* MOD-1074 (WF0-12b) Validation Checks grid: the same Employee and Department cells, headers and Code / Admin filter buttons as the Wage Facilitator's other tabs
   (the MOD-1072 rules above, written for .wf-grid; this grid sits in #payrollchecks-list, outside .wf-grid, so each rule is repeated here under it with the same
   declarations). */
.adagin-page-shell.wf-screen #payrollchecks-list .tablegrid-detail td:has(> .ta-emp-name),
.adagin-page-shell.wf-screen #payrollchecks-list .tablegrid-detail td:has(> .ta-dept-cell) {
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.adagin-page-shell.wf-screen #payrollchecks-list a.link.ta-emp-name {
  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;
  overflow-wrap: normal;
  word-break: normal;
  color: var(--adagin-teal);
}

.adagin-page-shell.wf-screen #payrollchecks-list .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;
}

.adagin-page-shell.wf-screen #payrollchecks-list .ta-dept-cell {
  min-width: 0;
  max-width: 100%;
  text-align: left;
}

.adagin-page-shell.wf-screen #payrollchecks-list .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;
}

.adagin-page-shell.wf-screen #payrollchecks-list .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;
}

.adagin-page-shell.wf-screen #payrollchecks-list .ta-dept-cell > .ta-dept__admin--none {
  font-style: italic;
  color: #5A6780;
}

.adagin-page-shell.wf-screen #payrollchecks-list .ta-dept-cell:focus-visible {
  outline: 2px solid var(--adagin-light-teal);
  outline-offset: 2px;
}

.adagin-page-shell.wf-screen #payrollchecks-list th.ta-dept-head > span > .ta-dept-head__title {
  display: block;
  font-size: var(--adagin-label-font-size);
  line-height: var(--adagin-label-line-height);
}

.adagin-page-shell.wf-screen #payrollchecks-list th.ta-dept-head > span > .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);
}
/* end MOD-1074 Validation Checks grid Employee and Department columns */

/* MOD-1074: the Code and Admin column filters (WageFacilitatorPayrollChecks.js) in the Validation Checks Employee and Department headers. */
.adagin-page-shell.wf-screen #payrollchecks-list .wf-colfilter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 0 8px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--adagin-label-font-size);
  line-height: var(--adagin-label-line-height);
  font-weight: 400;
  cursor: pointer;
}

.adagin-page-shell.wf-screen #payrollchecks-list .wf-colfilter.is-active {
  font-weight: 700;
}

.adagin-page-shell.wf-screen #payrollchecks-list .wf-colfilter:focus-visible {
  outline: 2px solid var(--adagin-light-teal);
  outline-offset: 2px;
}

/* MOD-1074 (WF0-12b) Validation Checks spacing: the page-level steps (bar, chips, cards, tabs, pane) are MOD-1072's 8px step above, unchanged. Inside the pane the
   "Sub checks" switch sat 8px (mt-2) under the pane's own 8px padding, so the grid started further down than on the other tabs; the switch now carries only the
   one 8px step below it, and the "Showing employees failing" badge row (shown while a block's filter is on) the same step in place of its 16px top padding. */
.adagin-page-shell.wf-screen #payrollchecks > .wf-subchecks {
  margin-top: 0;
  margin-bottom: var(--adagin-space-2);
}

.adagin-page-shell.wf-screen #payrollchecks > .wf-group-filter {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: var(--adagin-space-2);
}

/* MOD-892: the expanded week uses the T&A Approved day block (_ApprovedAttendanceDay, WageFacilitatorCells.DayBlock). These rules are the
   adagin-theme.css .ta-screen .approved-attendance block rules re-hooked on the Wage Facilitator grid; the cells and their data are unchanged. */
.adagin-page-shell.wf-screen .wf-grid .ta-hours-label {
  color: var(--ta-hours-label);
  font-size: 12px;
  font-weight: 600;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.25rem; /* the line stays when there is no lock */
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-values {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--adagin-space-2);
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-values {
  max-width: 100%;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--adagin-space-2);
  min-width: 0;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-hours {
  font-variant-numeric: tabular-nums;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-category {
  max-width: 100%;
  min-width: 0;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-lock {
  max-width: 100%;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-category > div {
  max-width: 100%;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-category .col-xl-12 {
  padding: 0;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-category .searchselect > .dropdown-toggle {
  min-width: 0; /* styles.css: .btn 80px */
  padding: 6px 18px 6px 4px;
  font-size: 13px;
  overflow-wrap: break-word;
  text-align: center;
  white-space: normal;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-category .searchselect > .dropdown-toggle > span {
  float: none !important;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-category .searchselect > .dropdown-toggle > .clearinput-icon {
  padding: 0 0 0 3px;
  font-size: 14px;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-category .searchselect > .dropdown-toggle::after {
  position: absolute;
  top: 50%;
  right: 2px;
  margin: 0;
  transform: translateY(-50%);
}
@media (max-width: 1839.98px) {
  .adagin-page-shell.wf-screen .wf-grid .ta-day-values {
    gap: var(--adagin-space-1);
  }
  .adagin-page-shell.wf-screen .wf-grid .ta-day-lock {
    min-height: 2rem;
  }
  .adagin-page-shell.wf-screen .wf-grid .ta-day-category .searchselect > .dropdown-toggle {
    padding: 3px 4px 14px;
  }
  .adagin-page-shell.wf-screen .wf-grid .ta-day-category .searchselect > .dropdown-toggle::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 1399.98px) {
  .adagin-page-shell.wf-screen .wf-grid .ta-day-values {
    gap: 2px;
  }
  .adagin-page-shell.wf-screen .wf-grid .ta-day-category .searchselect > .dropdown-toggle {
    padding: 3px 2px 14px;
    font-size: 12px;
  }
}

.adagin-page-shell.wf-screen .wf-grid .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);
}
.adagin-page-shell.wf-screen .wf-grid .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;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block__header .ta-day-lock {
  flex: none;
  min-width: 0;
  min-height: 0;
  justify-content: flex-start;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block__header .ta-day-lock--none {
  display: none;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block__note {
  display: inline-flex;
  flex: none;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block__header-end {
  display: inline-flex;
  flex: none;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 16px;
  min-height: 16px;
}
.adagin-page-shell.wf-screen .wf-grid 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;
}
.adagin-page-shell.wf-screen .wf-grid td .ta-day-block .ta-day-block__header :is(.ta-day-note-icon, .day-menu .day-menu-btn) {
  color: var(--ta-day-block-outline);
}
.adagin-page-shell.wf-screen .wf-grid td .ta-day-block .ta-day-block__header button.ta-lock-btn {
  color: var(--adagin-dark-navy);
}
.adagin-page-shell.wf-screen .wf-grid 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;
}
.adagin-page-shell.wf-screen .wf-grid 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);
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block__header .adagin-btn__svg {
  width: 16px;
  height: 16px;
}
.adagin-page-shell.wf-screen .wf-grid .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;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block .ta-pop-host:is(:hover, :focus-within):not(.is-dismissed) .ta-pop,
.adagin-page-shell.wf-screen .wf-grid .ta-day-block .ta-pop-host.is-open .ta-pop {
  display: block;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block .ta-day-values {
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block .ta-day-values > .day-menu {
  flex: none;
}
.adagin-page-shell.wf-screen .wf-grid .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%;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block .ta-day-line {
  max-width: 100%;
  justify-content: space-between; /* the label on the left, the figure on the right */
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block .ta-day-hours {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block .ta-day-line--nt {
  min-height: 20px;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block .ta-day-line:not(.ta-day-line--nt) {
  min-height: 18px;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-hours--nt {
  color: var(--ta-hours-nt);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}
.adagin-page-shell.wf-screen .wf-grid .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;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-hours--ot {
  color: var(--ta-hours-ot);
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-hours--st {
  color: var(--ta-hours-st);
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-hours--pl {
  color: var(--ta-hours-pl);
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-hours--abs {
  color: var(--ta-hours-abs);
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-hours--over {
  color: var(--ta-hours-over);
}
.adagin-page-shell.wf-screen .wf-grid .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;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block .ta-day-category--normal {
  color: var(--ta-hours-nt);
  font-weight: 600;
}
.adagin-page-shell.wf-screen .wf-grid .ta-day-block .ta-day-category--normal,
.adagin-page-shell.wf-screen .wf-grid td .ta-day-block .ta-day-category > div:not(:has(.searchselect)) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adagin-page-shell.wf-screen .wf-grid td .ta-day-block .ta-day-category .searchselect {
  display: block;
  width: 100%;
}
.adagin-page-shell.wf-screen .wf-grid 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;
}
.adagin-page-shell.wf-screen .wf-grid 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;
}
.adagin-page-shell.wf-screen .wf-grid td .ta-day-block .ta-day-category .searchselect > .dropdown-toggle::after {
  top: 50%;
  right: 6px;
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
}

/* MOD-1079 (WF0-14b): the admin-department group row above each department's employees (drawn by Employee/WageFacilitator.js drawGroupRows):
   the department and its employee count, with the hours subtotals under their columns on T & A Approved and Wage Confirmed. One line, so its twin rows
   in the select and action tables (empty) stay the same height; the plugin's own grey centred group-row look is replaced by a left-aligned band. */
.adagin-page-shell.wf-screen .wf-grid tr.wf-group-row,
.adagin-page-shell.wf-screen #payrollchecks-list tr.wf-group-row {
  background: #eef1f5;
  font-weight: 600;
  text-align: left;
}
.adagin-page-shell.wf-screen .wf-grid tr.wf-group-row > td,
.adagin-page-shell.wf-screen #payrollchecks-list tr.wf-group-row > td {
  height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.adagin-page-shell.wf-screen .wf-grid tr.wf-group-row > td.wf-group-count,
.adagin-page-shell.wf-screen #payrollchecks-list tr.wf-group-row > td.wf-group-count {
  font-weight: 400;
  color: var(--adagin-text-muted);
}
.adagin-page-shell.wf-screen .wf-grid tr.wf-group-row .wf-group-continued,
.adagin-page-shell.wf-screen #payrollchecks-list tr.wf-group-row .wf-group-continued {
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: var(--adagin-radius-input);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

/* MOD-1084 (WF0-14c): Collapse all / Expand all above each tab's grid and the toggle in each group row. A collapsed department's rows are hidden, never removed
   (Employee/WageFacilitator.js applyCollapse), in the main, select and action tables alike so their rows stay level. */
.adagin-page-shell.wf-screen .wf-grid .wf-group-toolbar,
.adagin-page-shell.wf-screen #payrollchecks .wf-group-toolbar {
  display: flex;
  gap: 8px;
  margin: 0 0 10px 0;
}
.adagin-page-shell.wf-screen .wf-grid tr.wf-group-collapsed,
.adagin-page-shell.wf-screen #payrollchecks-list tr.wf-group-collapsed {
  display: none;
}
.adagin-page-shell.wf-screen .wf-grid tr.wf-group-row .wf-group-toggle,
.adagin-page-shell.wf-screen #payrollchecks-list tr.wf-group-row .wf-group-toggle {
  margin: 0 6px 0 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 1;
  cursor: pointer;
}
.adagin-page-shell.wf-screen .wf-grid tr.wf-group-row .wf-group-toggle:focus-visible,
.adagin-page-shell.wf-screen #payrollchecks-list tr.wf-group-row .wf-group-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
.adagin-page-shell.wf-screen .wf-grid tr.wf-group-row .wf-group-toggle .wf-group-caret::before,
.adagin-page-shell.wf-screen #payrollchecks-list tr.wf-group-row .wf-group-toggle .wf-group-caret::before {
  content: "\25BE";
}
.adagin-page-shell.wf-screen .wf-grid tr.wf-group-row .wf-group-toggle[aria-expanded="false"] .wf-group-caret::before,
.adagin-page-shell.wf-screen #payrollchecks-list tr.wf-group-row .wf-group-toggle[aria-expanded="false"] .wf-group-caret::before {
  content: "\25B8";
}

/* MOD-1087 (WF0-14d): the number to fix on the Validation Checks group row (same band as the Wage Facilitator tabs; its rules above also cover #payrollchecks-list). */
.adagin-page-shell.wf-screen #payrollchecks-list tr.wf-group-row > td.wf-group-tofix {
  font-weight: 400;
  color: var(--adagin-text-muted);
}
.adagin-page-shell.wf-screen #payrollchecks-list tr.wf-group-row > td.wf-group-tofix--some {
  font-weight: 600;
  color: inherit;
}

/* MOD-888: the labelled Employee search is a little narrower here than the shared 30vw (410px at 1,366px), so the period strip, week box, Pay run, search, Filters
   and Search hold one row from 1,366px up with the Pay run shown too. Still 220px at the least; the shared cap of 480px and one third of the page apply. */
.adagin-page-shell.wf-screen .adagin-page-shell__bar .adagin-bar-search__input {
  width: clamp(220px, 24vw, 480px);
}

/* MOD-1113: the tick box and Employee columns stay in view when a week is scrolled sideways on T & A Approved, Wage Confirmed and Wage Paid. The tick box column is the
   plugin's own strip at the grid's left edge (.tablegrid-multiselect, absolute, outside the sideways scroller), so it already stays. The Employee column is in the scrolled
   table, in the header strip and in every row alike, so it sticks at left: the strip's width (--wf-select-w, kept on the tab's root by WageFacilitator.js pinSelectWidth,
   0px when the tab has no strip), which is the width the placeholder cell under the strip takes. Opaque in the row's own colours so the day cells passing under it do not
   show through (the selected row keeps the plugin's grey), with the T&A frozen column's edge shadow. The body cell (z-index 2) is below the pinned header strips (98);
   the header cell (3) is above the other header cells in its strip. The strips' vertical pin (--adagin-thead-top / the MOD-891 top) is on the strip, not the cell, so it is untouched. */
.adagin-page-shell.wf-screen .wf-grid .tablegrid-detail td:has(> .ta-emp-name) {
  position: sticky;
  left: var(--wf-select-w, 0px);
  z-index: var(--ta-frozen-col-z);
  background-color: #F2F5F6; /* the plugin's body cell colour (rojobaco-plugins .tablegrid-detail td); the grid has no hover or striped rows */
  box-shadow: var(--ta-frozen-col-edge);
}

.adagin-page-shell.wf-screen .wf-grid .tablegrid-detail tr.tablegrid-row-selected td:has(> .ta-emp-name) {
  background-color: #e9ecef;
}

.adagin-page-shell.wf-screen .wf-grid .tablegrid-header th.tablegrid-column.column-header-employee {
  position: sticky;
  left: var(--wf-select-w, 0px);
  z-index: 3;
  background-color: var(--ta-frozen-col-bg-head);
  box-shadow: var(--ta-frozen-col-edge);
}

/* The plugin's header hover (.tablegrid .tablegrid-column:hover, lightgray) is out-ranked by the pinned cell's background above; restored here, still opaque. */
.adagin-page-shell.wf-screen .wf-grid .tablegrid-header th.tablegrid-column.column-header-employee:hover {
  background-color: lightgray;
}

/* The group row's cell at the Employee position (Collapse/Expand toggle and department label; one cell, drawn by WageFacilitator.js drawGroupRows) is pinned like the
   data rows' Employee cells. Its colour is the one the group row shows, the plugin's body cell colour (the cell covers the row's own band). */
.adagin-page-shell.wf-screen .wf-grid .tablegrid-detail tr.wf-group-row > td.wf-group-name {
  position: sticky;
  left: var(--wf-select-w, 0px);
  z-index: var(--ta-frozen-col-z);
  background-color: #F2F5F6;
  box-shadow: var(--ta-frozen-col-edge);
}
/* end MOD-1113 */