/* =============================================================================================
 * MOD-782 (portal UI alignment, batch 3b): the Piecework page on the shared page shell. Markup: Views/Employee/_PieceworkFilter.cshtml; scripts:
 * wwwroot/js/Employee/PieceworkFiltersPanel.js (the Filters panel, chips and count) and adagin-page-shell.js. The shell's own rules (title, bar, tabs on one outlined
 * pane, secondary-blue table header, secondary bar buttons, tertiary row buttons, pager) come from .adagin-page-shell above; the Filters panel, its chips and the
 * count are Time & Attendance's classes (.ta-filters-*, .ta-filter, .ta-chips, .ta-filter-count). Only what is Piecework's own is here, scoped to .pw-screen, so
 * removing .adagin-page-shell and .pw-screen from the page is its rollback.
 * ============================================================================================= */

/* The bar's left side: the week control (the shared .ta-bar__week box) and the view group, on one line. */
.pw-screen .pw-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--adagin-space-2) var(--adagin-space-3);
}

/* The Filters count badge: the orange dot of .ta-filter-count with the navy number T&A's button has (that rule is scoped to .ta-screen, which Piecework does not wear). */
.pw-screen #pw-filters-btn .ta-filter-count {
  color: var(--adagin-dark-navy);
}

/* Device View / Weight View as one segmented group (the caption keeps the shared label type, 12/18/600). They are the two switches they always were (the same checkbox, name and change handler); the slider is
   not drawn, the caption is the segment, the checked one is filled with the secondary blue, and the checkbox's own label covers the segment so a click or Space
   anywhere on it toggles it. PieceworkFilter.js still shows the one that belongs to the shown tab (jQuery show / hide on the switch and its form group), so the
   group shows that one. (0,4,0)+ out-ranks the global label rule (0,2,1) and bootstrap's .form-group / .row margins. */
.pw-screen .pw-view-toggle {
  display: inline-flex;
  align-items: stretch;
  height: var(--adagin-btn-height);
  overflow: hidden;
  border: var(--adagin-outline-width) solid var(--adagin-outline);
  border-radius: var(--adagin-btn-radius);
  background: var(--adagin-white);
}

.pw-screen .pw-view-toggle > .form-group.row {
  position: relative;
  display: flex;
  margin: 0;
}

.pw-screen .pw-view-toggle > .form-group.row + .form-group.row {
  border-left: var(--adagin-outline-width) solid var(--adagin-outline);
}

.pw-screen .pw-view-toggle > .form-group.row > label.col-form-label.Switch:not(.switch) {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 var(--adagin-space-4);
  background: var(--adagin-white);
  color: var(--adagin-dark-navy);
  font-size: var(--adagin-label-font-size);
  font-weight: var(--adagin-label-font-weight);
  line-height: var(--adagin-label-line-height);
  opacity: 1;
  white-space: nowrap;
}

.pw-screen .pw-view-toggle > .form-group.row:has(input:not(:checked)):hover > label.col-form-label.Switch:not(.switch) {
  background: var(--adagin-btn-tint-hover);
}

.pw-screen .pw-view-toggle > .form-group.row:has(input:checked) > label.col-form-label.Switch:not(.switch) {
  background: var(--adagin-outline);
  color: var(--adagin-white);
}

.pw-screen .pw-view-toggle > .form-group.row:has(input:focus-visible) {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: -3px;
}

.pw-screen .pw-view-toggle dd {
  position: absolute;
  inset: 0;
  margin: 0;
}

.pw-screen .pw-view-toggle dd > .switch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.pw-screen .pw-view-toggle dd > .switch > .slider,
.pw-screen .pw-view-toggle dd > label:not(.switch) {
  display: none;
}

/* The Filters panel lists two groups (Employee, Shift) where Time & Attendance's lists three: two columns, and a narrower panel from 1100px (below that the shared
   rules stack the groups and let the panel fill the bar). A filter hidden by the page (Approved Piecework's two, MOD-759) is out: [hidden] loses to .ta-filter's display. */
.pw-screen .ta-filter[hidden] {
  display: none;
}

@media (min-width: 760px) {
  .pw-screen .ta-filters-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .pw-screen .pw-filters-panel {
    width: min(640px, 100%);
  }
}

/* Approved Piecework's list keeps its Time & Attendance look (.ta-screen); its column header pins under the shell's header bar and top bar, as the grids' do. */
.pw-screen .table.approved th {
  top: calc(var(--adagin-header-h) + var(--adagin-page-shell-bar-h, 0px));
}
/* end MOD-782 */