/* =============================================================================================
 * ADAS-496 (Time and Attendance table at laptop widths). Every rule is scoped to .ta-screen.ta-main-screen, the Time and Attendance page's own root
 * (Views/Employee/_TimeAndAttendance.cshtml; .ta-screen alone is also worn by the piecework list, .adagin-sticky-stack by Wage Facilitator), so the other
 * pages that use .adagin-table-scroll are untouched. Removing the class is the rollback.
 *
 * 1. Compact Approved grid at 1,399.98px and under. The MOD-789 Employee (180px) and Department (200px) columns made the grid at least 1,760px, so at
 *    1,366px (a 1,047px table frame with the sidebar open) the Approved tab scrolled sideways although the 1,040px rule of the 1,399.98px step was meant to
 *    fit it. Now Employee is 118px and Department 88px, the four totals and the Actions column are a little narrower, and the seven day blocks share the
 *    rest (about 68px each): the label sits above the figure and the block's height follows its content. The 24px hit areas of the lock, note and menu
 *    buttons are unchanged; when all three do not fit on the bar's one line, the menu goes to a second line.
 * ============================================================================================= */

@media (max-width: 1399.98px) {
  .ta-screen.ta-main-screen table.approved-attendance.approved {
    --ta-col-employee-w: 118px;
    --ta-col-department-w: 88px;
    --ta-day-block-min-w: 60px;
    min-width: 1000px; /* below this the day blocks would be narrower than a readable figure: the grid scrolls instead */
    width: 100%;
  }

  .ta-screen.ta-main-screen table.approved-attendance.approved > thead > tr > th:nth-child(10) { width: 64px; }
  .ta-screen.ta-main-screen table.approved-attendance.approved > thead > tr > th:nth-child(11) { width: 48px; }
  .ta-screen.ta-main-screen table.approved-attendance.approved > thead > tr > th:nth-child(12) { width: 58px; }
  .ta-screen.ta-main-screen table.approved-attendance.approved > thead > tr > th:nth-child(13) { width: 58px; }
  .ta-screen.ta-main-screen table.approved-attendance.approved > thead > tr > th:nth-child(14) { width: 108px; }

  .ta-screen.ta-main-screen table.approved-attendance.approved > tbody > tr > td:nth-child(-n+2) {
    padding: 8px 6px;
  }

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

  .ta-screen.ta-main-screen .approved-attendance .ta-day.ta-day-block {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 72px;
    padding: 0 2px 4px;
  }

  .ta-screen.ta-main-screen .approved-attendance .ta-day-block__header {
    flex-wrap: wrap;
    height: auto;
    min-height: 24px;
  }

  .ta-screen.ta-main-screen .approved-attendance .ta-day-block .ta-day-line {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .ta-screen.ta-main-screen .approved-attendance .ta-day-block .ta-day-line--nt,
  .ta-screen.ta-main-screen .approved-attendance .ta-day-block .ta-day-line:not(.ta-day-line--nt) {
    min-height: 0;
  }

  .ta-screen.ta-main-screen .approved-attendance .ta-day-block .ta-day-line--empty {
    display: none;
  }

  .ta-screen.ta-main-screen .approved-attendance .ta-day-hours--nt {
    font-size: 14px;
    line-height: 18px;
  }

  .ta-screen.ta-main-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: var(--adagin-font-size-caption); /* MOD-695: 12px, was 13px */
    line-height: 16px;
  }

  .ta-screen.ta-main-screen .approved-attendance .ta-day-block .ta-day-category--normal,
  .ta-screen.ta-main-screen .approved-attendance td .ta-day-block .ta-day-category > div:not(:has(.searchselect)) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ta-screen.ta-main-screen .approved-attendance td .ta-day-block .ta-day-category .searchselect > .dropdown-toggle,
  .ta-screen.ta-main-screen .approved-attendance td .ta-day-block .ta-day-category:not(.ta-day-category--normal) > div:not(:has(.searchselect)) {
    height: auto;
    min-height: 28px;
    padding: 2px 14px 2px 3px;
    line-height: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* =============================================================================================
 * 2. The Unapproved, Unapproved Overheads and Rejected lists pin their select and employee columns at the left of the table's box while it scrolls
 *    sideways. Only the Approved list pinned its Employee column (section 5 of the theme); here the header cells (th.ta-select-col, th.ta-col-employee)
 *    had no horizontal offset and the body cells were plain, so a table wider than its box lost the employee name under the other columns. The pins are
 *    native: the box is the horizontal scrollport. Widths and offsets: the select column is --ta-select-col-w (40px, 0 on Rejected, which has no
 *    selection box) and the employee column sticks at that offset. The body cells take the row's own colour (the tint is on the row, opaque by the base
 *    rule below) so the cells that slide under them are hidden; the header cells sit above the other header cells (101 against 99), the body cells above
 *    the rows' other cells and below the sticky header row, the same layers as the Approved Employee column.
 * ============================================================================================= */

.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) {
  --ta-select-col-w: 40px;
}

.ta-screen.ta-main-screen table.dataTable.ta-rejected {
  --ta-select-col-w: 0px;
}

/* The box has the column's 15px padding; a sticky cell sticks inside the padding, which would leave a 15px strip where the scrolled cells show beside the pin. As the
   Approved list's box (theme section 6, "padding-left: 0"), these boxes have none. */
.ta-screen.ta-main-screen .adagin-table-scroll:has(> table.dataTable:is(.is-query, .is-query-over, .ta-rejected)) {
  padding-left: 0;
  padding-right: 0;
}

/* The row is opaque (white unless a state tint or an Exception colour is set on it, which out-rank this zero-specificity base), so a pinned cell that takes
   its colour from the row never lets the cells that slide under it show through. */
:where(.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > tbody > tr) {
  background-color: var(--adagin-white);
}

.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th.ta-select-col,
.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > tbody > tr > td.ta-select-cell {
  box-sizing: border-box;
  width: var(--ta-select-col-w);
  min-width: var(--ta-select-col-w);
  max-width: var(--ta-select-col-w);
  padding-left: 6px;
  padding-right: 6px;
}

.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th:is(.ta-select-col, .ta-col-employee),
.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > tbody > tr > td:is(.ta-select-cell, .ta-emp-cell) {
  position: sticky;
  left: 0;
  z-index: var(--ta-frozen-col-z);
  background-color: inherit;
}

.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th:is(.ta-select-col, .ta-col-employee) {
  z-index: var(--ta-frozen-col-z-head);
  background-color: var(--ta-frozen-col-bg-head);
}

.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th.ta-col-employee,
.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > tbody > tr > td.ta-emp-cell {
  left: var(--ta-select-col-w);
}

/* The edge of the pinned group: a shadow on a pseudo-element, not on the cell, so the selected row's tint (an inset shadow on the cell) is kept. */
.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th.ta-col-employee::after,
.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > tbody > tr > td.ta-emp-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: var(--ta-frozen-col-edge);
  pointer-events: none;
}

/* A stack too short to pin (MOD-829, .adagin-unpinned) scrolls its header row away, but the columns still pin sideways. */
.ta-screen.ta-main-screen.adagin-unpinned table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th:is(.ta-select-col, .ta-col-employee) {
  position: sticky;
}

/* =============================================================================================
 * 3. The sideways scrollbar stays in reach. The table's box scrolls sideways only (MOD-753: it has no height limit, so it never scrolls up or down and the
 *    page is the one vertical scroller), which put its own scrollbar under the last row of the page. _Layout.cshtml adds .ta-hscroll after each wide box: a
 *    scrollbar of the same range that sticks to the bottom of the window while the table is on screen and rests under the table at its end. The two
 *    scroll together; the box's own scrollbar is hidden while the bar is there (.ta-has-hscroll), and stays where the script does not run.
 * ============================================================================================= */

.ta-screen.ta-main-screen .ta-hscroll {
  position: sticky;
  bottom: 0;
  z-index: 100;
  flex: 0 0 100%;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  background-color: var(--adagin-white);
}

.ta-screen.ta-main-screen .ta-hscroll > .ta-hscroll__track {
  height: 1px;
}

.ta-screen.ta-main-screen .ta-hscroll::-webkit-scrollbar {
  height: 14px;
}

.ta-screen.ta-main-screen .ta-hscroll::-webkit-scrollbar-track {
  background-color: var(--adagin-off-white);
}

.ta-screen.ta-main-screen .ta-hscroll::-webkit-scrollbar-thumb {
  border: 3px solid var(--adagin-off-white);
  border-radius: var(--adagin-radius-pill);
  background-color: var(--adagin-control-border-tinted);
}

.ta-screen.ta-main-screen .adagin-table-scroll.ta-has-hscroll {
  scrollbar-width: none;
}

.ta-screen.ta-main-screen .adagin-table-scroll.ta-has-hscroll::-webkit-scrollbar {
  display: none;
}

/* =============================================================================================
 * MOD-1077 (P4-13a): the 8px spacing standard on Time & Attendance. Every rule is scoped to .ta-screen.ta-main-screen: the tab and pane rules in the theme are
 * shared with the Wage Facilitator, Bins and Piecework pages, which keep their own sizes.
 *   - Tabs: 16px / 24px text, 8px above and below, so a tab is 40px tall. The label is wrapped in .ta-tab-label, whose ::after holds an invisible bold copy
 *     of the same words (data-label) so the bold active tab reserves its width in every state and selecting another tab moves no neighbour. The count pill
 *     (12px / 18px, the theme's) sits 8px after the label: the link is a flex row, so the space between the label and the pill collapses.
 *   - Gaps: the pane's top edge to the day cards, the day cards to the action pane and the action pane to the table header are each 8px. The day-card strip
 *     (.date-header) carries the 8px above and below its cards itself, so the gap stays when it is frozen under the bar; --adagin-date-header-h
 *     (_Layout.cshtml) measures its real height and the frozen action pane and header row offsets follow it, with no value repeated here. The two  
 *     spacer rows of the list partials (.ta-spacer, 19px each) are no longer drawn: the 8px is the table box's top margin (on the Approved tab, which
 *     has the key bar between, the spacer is 8px tall and the key's own bottom margin is the gap above the table).
 *   - Tables: a 40px header row and 8px above and below a row's cells.
 * ============================================================================================= */
.ta-screen.ta-main-screen .ta-nav .nav-link {
  display: flex;
  align-items: center;
  padding-block: var(--adagin-space-2);
  font-size: 16px;
  line-height: 24px;
}

.ta-screen.ta-main-screen .ta-nav .nav-link.active {
  padding-bottom: var(--adagin-space-2); /* the theme adds the 1px it overlaps the pane's border by to the padding; the 1px now comes from the margin alone */
}

.ta-screen.ta-main-screen .ta-nav .ta-tab-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.ta-screen.ta-main-screen .ta-nav .ta-tab-label::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  font-weight: 700;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.ta-screen.ta-main-screen .tab-content.tasi-tab {
  padding: 0 var(--adagin-space-2) var(--adagin-space-2);
}

.ta-screen.ta-main-screen .date-header {
  min-height: 0; /* the view's own <style> block gives it 84px: 8px above the cards, 12px below */
  padding-top: calc(var(--adagin-space-2) - var(--adagin-outline-width)); /* the pane's 1px border is part of the 8px from its top edge */
  padding-bottom: var(--adagin-space-2);
}

.ta-screen.ta-main-screen .ta-day-pills {
  margin-top: 0;
}

.ta-screen.ta-main-screen #pending > .ta-menu,
.ta-screen.ta-main-screen #overhead > .ta-menu {
  margin-top: 0; /* the day-card strip above it ends with the 8px */
}

.ta-screen.ta-main-screen .ta-spacer {
  display: none;
}

.ta-screen.ta-main-screen #approved .ta-spacer { /* the Approved tab has no day cards: this is the 8px between its action pane and the key bar (the key's own 8px margin is the one above the table) */
  display: block;
  height: var(--adagin-space-2);
  overflow: hidden;
  line-height: 0;
}

.ta-screen.ta-main-screen :is(#pending, #overhead) .adagin-table-scroll {
  margin-top: var(--adagin-space-2);
}

/* .approved is the Approved list's table on this screen; the Piecework and Bin tables that also wear it are on pages without .ta-main-screen */
.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected, .approved) {
  margin-top: 0 !important; /* table.dataTable (the DataTables sheet) sets 6px !important; the 8px is on the box (above), so the header row starts at the box's top, where _Layout.cshtml measures its stick point */
}

.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > thead > tr > th,
.ta-screen.ta-main-screen table.approved > thead > tr > th {
  box-sizing: border-box;
  height: 40px;
  padding-block: var(--adagin-space-2);
  white-space: nowrap; /* one 18px line: a two-line title ("Clock in Time" in an 80px column) made the row 55px */
}

.ta-screen.ta-main-screen table.dataTable:is(.is-query, .is-query-over, .ta-rejected) > tbody > tr > td,
.ta-screen.ta-main-screen table.approved > tbody > tr > td,
.ta-screen.ta-main-screen table.approved > tfoot > tr > td {
  padding-block: var(--adagin-space-2);
}

/* =============================================================================================
 * MOD-1077 attempt 2: the Approved header row is one 40px line, and the space above the tabs gives back 27px. Same scope (.ta-screen.ta-main-screen).
 *   - Approved header: each day column's date, its "No data" note and its "..." menu sit in one row (the cell's two inline column wrappers, _ApprovedAttendance
 *     and _ApprovedAttendanceDayHeader, are turned to rows here, hence !important); the Department title and its "Farm / Admin" line share one line. The menu
 *     button stays 24px wide and tall but takes 3px off the row above and below it, so the row is 40px, not 43px. No label text is changed.
 *   - Above the tabs: the &nbsp; line (19px) between the top cards and the tab row is not drawn (the cards' own 8px bottom margin is the gap), and the three
 *     cards' bodies are 136px, not 160px (the donut is 130px, the approval card's content sets its own height).
 * ============================================================================================= */
.ta-screen.ta-main-screen table.approved > thead > tr > th > div {
  flex-direction: row !important;
  flex-wrap: nowrap;
  gap: var(--adagin-space-1);
}

.ta-screen.ta-main-screen table.approved > thead > tr > th > div > span {
  margin-bottom: 0 !important;
  white-space: nowrap;
}

.ta-screen.ta-main-screen table.approved > thead > tr > th > div > div {
  flex-direction: row !important;
  gap: var(--adagin-space-1);
}

.ta-screen.ta-main-screen table.approved > thead .ta-dayheader-nodata {
  margin-bottom: 0;
}

.ta-screen.ta-main-screen table.approved > thead .day-menu {
  display: inline-flex;
}

.ta-screen.ta-main-screen table.approved > thead .day-menu .day-menu-btn {
  min-width: 24px;
  min-height: 24px;
  margin-block: -3px;
}

.ta-screen.ta-main-screen table.approved-attendance.approved > thead > tr > th.ta-dept-head > :is(.ta-dept-head__title, .ta-dept-head__sub) {
  display: inline;
  margin: 0;
}

.ta-screen.ta-main-screen table.approved-attendance.approved > thead > tr > th.ta-dept-head > .ta-dept-head__sub {
  margin-left: 4px;
}

.ta-screen.ta-main-screen .ta-top-cards ~ div:not([class]) {
  display: none;
}

.ta-screen.ta-main-screen .attendance-charts.ta-top-cards .ta-chart-body:not(.ta-approval) {
  height: 136px;
}

/* MOD-1077: the drawn job costing (.ta-jc, 160px for six rows and the hint) and an opened "Other" list keep the theme's growable body;
 * the 136px rule above out-ranks the theme's :has() height:auto, so it is restored here at a higher specificity. */
.ta-screen.ta-main-screen .attendance-charts.ta-top-cards .ta-chart-body:not(.ta-approval):is(:has(> .ta-jc), :has(.ta-expand__list:not([hidden]))) {
  height: auto;
}

.ta-screen.ta-main-screen .attendance-charts.ta-top-cards :is(.ta-approval, #queryTypeCount) {
  min-height: 136px;
}

/* MOD-1077: the query summary body grows with its legend (13 to 14 items are seven 24px rows, 168px), so the 136px is its floor, not its height. */
.ta-screen.ta-main-screen .attendance-charts.ta-top-cards #queryTypeCount {
  height: auto;
}

.ta-screen.ta-main-screen table.approved-attendance.approved > thead > tr > th.ta-dept-head > .ta-dept-head__sub {
  white-space: nowrap;
}

/* MOD-1077: the one-line 40px day header needs about 100px per day column; the compact grid (1,399.98px and under) gives about 65px, so the header wraps there
 * (the cell grows taller, 55px at 1,366px) instead of growing wider and bringing back the sideways scroll. */
@media (max-width: 1399.98px) {
  .ta-screen.ta-main-screen table.approved > thead > tr > th > div {
    flex-wrap: wrap;
  }

  .ta-screen.ta-main-screen table.approved > thead > tr > th > div > span {
    white-space: normal;
  }

  /* the Department column is 88px here: its title and "Farm / Admin" line stay stacked (one line is wider than the column) */
  .ta-screen.ta-main-screen table.approved-attendance.approved > thead > tr > th.ta-dept-head > :is(.ta-dept-head__title, .ta-dept-head__sub) {
    display: block;
  }

  .ta-screen.ta-main-screen table.approved-attendance.approved > thead > tr > th.ta-dept-head > .ta-dept-head__sub {
    margin-left: 0;
  }
}