/* =============================================================================================
 * MOD-734 (batch 3b): Bin Management's Filters panel and applied chips. Every rule is scoped to .adagin-page-shell.bin-page: this sheet is
 * linked on every page (Services/PageStylesheets.cs) and .adagin-page-shell alone is also Piecework's, Sync Management's, Reports' ..., so .bin-page (Bin
 * Management's own class beside it, Views/Bin/_BinFilter.cshtml) keeps every rule on this page; removing either class is the rollback.
 * The panel, its filters, the count dot and the chip row are Time & Attendance's classes (.ta-filters-panel, .ta-filter, .ta-filter-count, .ta-chips); only what
 * differs is here: two filters, so the panel is a narrow single column; the dot's navy number (T&A's is scoped to #ta-filters-btn); #filter-data (the empty
 * element the page always had) is not a flex item of the bar; and the Period slot: Is live (the switch) and Start date, caption and control on one line.
 * ============================================================================================= */
.adagin-page-shell.bin-page .ta-filters-panel--bin {
  width: min(420px, 100%);
}

.adagin-page-shell.bin-page .ta-filters-panel--bin .ta-filters-groups {
  grid-template-columns: minmax(0, 1fr);
}

.adagin-page-shell.bin-page #bin-filters-btn .ta-filter-count {
  color: var(--adagin-dark-navy);
}

.adagin-page-shell.bin-page .adagin-page-shell__bar > #filter-data {
  display: none;
}

/* The bar pushes the Bin cycle, Filters and Search to the right end (the search box sits there on the pages that have one). MOD-931: the Bin cycle dropdown is the
   first of them, left of Filters. */
.adagin-page-shell.bin-page .adagin-page-shell__bar > .bin-bar__cycle {
  margin-left: auto;
}

.adagin-page-shell.bin-page .adagin-page-shell__period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--adagin-space-2) var(--adagin-space-5);
}

.adagin-page-shell.bin-page .bin-bar__live .form-group.row,
.adagin-page-shell.bin-page .bin-bar__date .form-group.row {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--adagin-space-2);
  margin: 0;
}

.adagin-page-shell.bin-page .bin-bar__live .form-group.row > *,
.adagin-page-shell.bin-page .bin-bar__date .form-group.row > * {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.adagin-page-shell.bin-page .bin-bar__date .form-group.row > :not(label) {
  width: 11rem;
}

.adagin-page-shell.bin-page .bin-bar__live .form-group.row > label,
.adagin-page-shell.bin-page .bin-bar__date .form-group.row > label {
  font-size: var(--adagin-label-font-size);
  line-height: var(--adagin-label-line-height);
  font-weight: var(--adagin-label-font-weight);
}
/* end MOD-734 */

/* =============================================================================================
 * MOD-784 (batch 3b): Bin Management on the page shell. Every rule is scoped to .adagin-page-shell.bin-page, as above. The title, the sentence-
 * case breadcrumb, the tabs and pane (MOD-711), the table header (MOD-712) and the pager (MOD-713) come from the shell's own rules above; what is here is what Bin
 * Management adds: the action toolbar (.ta-menu: Bulk Add, Bulk Edit, Archive Selected, Download Bin Info) scrolls with the page
 * (it was frozen at offsets of the old tall form, which would now sit over the pinned column headers; its secondary buttons are the theme's shared
 * .adagin-page-shell .ta-menu > .adagin-btn rule, MOD-709 / MOD-782); and the Zone dropdown, a tab in the row whose
 * options are the zones, takes the selected-tab look (the toggle is .active while a zone is shown, an option is .active while it is the zone shown).
 * ============================================================================================= */
.adagin-page-shell.bin-page .ta-menu {
  position: static;
}

.adagin-page-shell.bin-page .nav-tabs .dropdown-menu {
  min-width: 12rem;
  max-height: 60vh;
  margin-top: var(--adagin-space-1);
  padding: var(--adagin-space-1) 0;
  overflow-y: auto;
  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);
}

.adagin-page-shell.bin-page .nav-tabs .dropdown-item {
  padding: var(--adagin-space-2) var(--adagin-space-4);
  color: var(--adagin-dark-navy);
  white-space: normal;
  overflow-wrap: anywhere;
}

.adagin-page-shell.bin-page .nav-tabs .dropdown-item:hover,
.adagin-page-shell.bin-page .nav-tabs .dropdown-item:focus {
  background-color: var(--ta-tab-hover-bg);
  color: var(--adagin-dark-navy);
}

.adagin-page-shell.bin-page .nav-tabs .dropdown-item.active,
.adagin-page-shell.bin-page .nav-tabs .dropdown-item.active:hover {
  background-color: var(--adagin-outline);
  color: var(--adagin-white);
  font-weight: 700;
}

.adagin-page-shell.bin-page .nav-tabs .dropdown-item:focus-visible {
  outline: 3px solid var(--adagin-teal);
  outline-offset: -3px;
}

.adagin-page-shell.bin-page .nav-tabs .dropdown-item.active:focus-visible {
  outline-color: var(--adagin-white);
}
/* end MOD-784 */

/* =============================================================================================
 * MOD-931: the Bin cycle dropdown in the top bar, the helper line, the selectable zone cards and the bulk hint. Same scope rule as above.
 * ============================================================================================= */
.adagin-page-shell.bin-page .bin-bar__cycle {
  display: inline-flex;
  align-items: center;
  gap: var(--adagin-space-2);
  margin-bottom: 0;
}

.adagin-page-shell.bin-page .bin-bar__cycle-caption {
  color: var(--adagin-text-muted);
  white-space: nowrap;
}

.adagin-page-shell.bin-page .bin-cycle-select {
  min-width: 14rem;
  max-width: 100%;
}

.adagin-page-shell.bin-page .bin-metrics__help,
.adagin-page-shell.bin-page .bin-bulk-hint {
  margin: var(--adagin-space-2) 0 0;
  color: var(--adagin-text-muted);
  font-size: var(--adagin-label-font-size);
}

/* A zone card is a button: its look is the card's, the button's own chrome is reset. */
.adagin-page-shell.bin-page .bin-metrics .bin-zone-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}

.adagin-page-shell.bin-page .bin-metrics .bin-zone-card > span {
  display: block;
}

/* MOD-941: keyboard focus is the design system's button ring (2px --adagin-btn-focus-color, offset --adagin-btn-focus-offset). */
.adagin-page-shell.bin-page .bin-metrics .bin-zone-card:focus-visible {
  outline: var(--adagin-btn-focus-width) solid var(--adagin-btn-focus-color);
  outline-offset: var(--adagin-btn-focus-offset);
}

.adagin-page-shell.bin-page .bin-metrics .bin-zone-card.is-selected {
  border-color: var(--adagin-outline);
  box-shadow: inset 0 0 0 1px var(--adagin-outline);
  background-color: var(--adagin-outline-tint);
}

.adagin-page-shell.bin-page .bin-metrics .bin-zone-card.is-selected .card-header {
  background-color: var(--adagin-outline-tint);
}

.adagin-page-shell.bin-page .bin-metrics .bin-zone-card.is-muted {
  /* MOD-931: the card carries "border-dark", whose border-color is !important (Bootstrap, then .card.border-dark in adagin-theme.css),
     so the muted grey needs !important too to win. */
  border-color: var(--adagin-grey) !important;
  color: var(--adagin-text-muted);
}

.adagin-page-shell.bin-page .bin-metrics .bin-zone-card.is-muted .card-header {
  color: var(--adagin-text-muted);
}

.adagin-page-shell.bin-page .bin-zone-card__tag {
  align-self: center;
  margin: 0 0 var(--adagin-space-2);
  padding: 0 var(--adagin-space-2);
  border-radius: var(--adagin-radius-tag);
  font-size: var(--adagin-label-font-size);
  font-weight: 700;
}

.adagin-page-shell.bin-page .bin-zone-card__tag[hidden] {
  display: none;
}

.adagin-page-shell.bin-page .bin-zone-card__tag--selected {
  color: var(--adagin-teal);
}

.adagin-page-shell.bin-page .bin-zone-card__tag--anchor {
  color: var(--adagin-white);
  background-color: var(--adagin-teal);
}
/* end MOD-931 */

/* =============================================================================================
 * MOD-941: the zone cards' hover (the Time & Attendance selectable-item pattern). A card that cannot be chosen (disabled) gets none. The hover tint has no
 * token yet, so it is named here once. The 1px light-teal ring is the card's own border; the border carries "border-dark" (!important), hence !important.
 * ============================================================================================= */
.adagin-page-shell.bin-page .bin-metrics {
  --bin-zone-card-hover-tint: #F0F3F9;
}

.adagin-page-shell.bin-page .bin-metrics .bin-zone-card,
.adagin-page-shell.bin-page .bin-metrics .bin-zone-card .card-header,
.adagin-page-shell.bin-page .bin-metrics .zone-missed-badge {
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, outline-color 150ms ease;
}

/* Not chosen (including the muted cards): tint and light-teal ring. */
.adagin-page-shell.bin-page .bin-metrics .bin-zone-card:not(.is-selected):not(:disabled):not([aria-disabled="true"]):hover {
  background-color: var(--bin-zone-card-hover-tint);
  border-color: var(--adagin-light-teal) !important;
}

.adagin-page-shell.bin-page .bin-metrics .bin-zone-card:not(.is-selected):not(:disabled):not([aria-disabled="true"]):hover .card-header {
  background-color: transparent;
}

/* Muted: the text returns to the full text colour, to show the card can still be chosen. */
.adagin-page-shell.bin-page .bin-metrics .bin-zone-card.is-muted:not(:disabled):not([aria-disabled="true"]):hover,
.adagin-page-shell.bin-page .bin-metrics .bin-zone-card.is-muted:not(:disabled):not([aria-disabled="true"]):hover .card-header {
  color: var(--adagin-dark-navy);
}

/* Chosen: keeps its tint and shows the 2px outline (the border plus the inset ring the chosen card already has). Not while the card has keyboard focus: the focus ring wins. */
.adagin-page-shell.bin-page .bin-metrics .bin-zone-card.is-selected:not(:disabled):not([aria-disabled="true"]):not(:focus-visible):hover {
  outline: 2px solid var(--adagin-outline);
  outline-offset: -2px;
}

/* The red "N missed" pill keeps its own danger hover. */
.adagin-page-shell.bin-page .bin-metrics .zone-missed-badge:hover {
  background-color: var(--adagin-btn-danger-hover);
}
/* end MOD-941 */