/* The compact treatment belongs only to large desktop screens for non-logistics roles. */
@media (min-width: 1701px) and (hover: hover) and (pointer: fine) {
@container (min-width: 1701px) {
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) {
    grid-template-columns: 90px minmax(140px, 240px) minmax(120px, 180px) minmax(140px, 230px) minmax(180px, 300px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    align-items: center !important;
  }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) > label {
    grid-row: 1 !important;
    grid-column: auto !important;
  }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) > .period-filter {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
    align-items: center !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    padding: 0 !important;
  }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) > .spec-workbar { grid-row: 3 !important; grid-column: 1 / -1 !important; }
  body:not(.logistics-user) .app-shell > .filters > label,
  body:not(.logistics-user) .app-shell > .filters .period-filter > label {
    position: relative;
    height: 40px !important;
    min-height: 40px !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  body:not(.logistics-user) .app-shell > .filters .period-filter > label { flex: 0 1 150px; width: 150px !important; }
  body:not(.logistics-user) .app-shell > .filters .compact-filter-caption {
    position: absolute; top: 4px; left: 10px; z-index: 1;
    font-size: 11px; line-height: 13px; color: #c4ccd3; pointer-events: none;
  }
  body:not(.logistics-user) .app-shell > .filters label > .custom-select { position: static; }
  body:not(.logistics-user) .app-shell > .filters label > .custom-select > .custom-select-button,
  body:not(.logistics-user) .app-shell > .filters .period-filter input[type=date] {
    width: 100% !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important;
    margin: 0 !important; padding: 14px 30px 2px 10px !important;
    border: 1px solid #58616b !important; border-radius: 7px !important;
    background: #414a54; font-size: 14px !important; line-height: 20px !important; font-weight: 500;
  }
  body:not(.logistics-user) .app-shell > .filters label > .custom-select > .custom-select-button::after { top: 14px; right: 10px; }
  body:not(.logistics-user) .app-shell > .filters .period-filter input[type=date] { padding-right: 8px !important; }
  body:not(.logistics-user) .app-shell > .filters #periodClearButton,
  body:not(.logistics-user) .app-shell > .filters #missingStockFilterButton {
    flex: 0 0 auto; width: auto !important; max-width: none !important;
    height: 32px !important; min-height: 32px !important; padding: 4px 8px !important;
    border: 0 !important; background: transparent; box-shadow: none; font-size: 13px !important;
  }
  body:not(.logistics-user) .app-shell > .filters #missingStockFilterButton { display: inline-flex; align-items: center; gap: 8px; }
  body:not(.logistics-user) .app-shell > .filters #missingStockFilterButton::before { content: ''; width: 15px; height: 15px; flex: 0 0 15px; border: 1px solid #939ba2; border-radius: 3px; }
  body:not(.logistics-user) .app-shell > .filters #missingStockFilterButton.is-active::before { content: '✓'; background: #80bd19; color: #25303a; border-color: #80bd19; line-height: 15px; text-align: center; }
  body:not(.logistics-user) .app-shell > .filters #missingStockFilterButton .missing-stock-filter-clear { display: none; }
}

}
/* Keep the desktop action area beside the two filter rows. */
@media (min-width: 1701px) and (hover: hover) and (pointer: fine) {
@container (min-width: 1701px) {
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) {
    grid-template-columns: 100px 240px 190px 240px 220px minmax(0, 1fr) 600px !important;
    grid-template-rows: auto auto !important;
  }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(1) { grid-column: 1 !important; }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) #yearFilter + .custom-select > .custom-select-button {
    padding-right: 16px !important;
    font-size: 12px !important;
  }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) #yearFilter + .custom-select > .custom-select-button::after { right: 4px; }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(2) { grid-column: 2 !important; }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(3) { grid-column: 3 !important; }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(4) { grid-column: 4 !important; }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(5) { grid-column: 5 !important; }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) > .period-filter {
    grid-column: 1 / 6 !important;
    grid-row: 2 !important;
  }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) > .spec-workbar {
    grid-column: 7 !important;
    grid-row: 1 / 3 !important;
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    grid-template-rows: repeat(2, minmax(40px, auto)) !important;
    align-items: center !important;
    justify-content: end !important;
    align-self: stretch !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-group {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
  }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) #desktopFiltersToggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
  }
  body:not(.logistics-user) .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-modules {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }
}
}

/* Keep legacy tablet/logistics filters from stretching across wide grid tracks. */
@media (min-width: 1100px) {
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:has(#yearFilter) { max-width: 100px !important; justify-self: start !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:has(#customerFilter) { max-width: 240px !important; justify-self: start !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:has(#specFilter) { max-width: 190px !important; justify-self: start !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:has(#equipmentFilter) { max-width: 240px !important; justify-self: start !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:has(#statusFilter) { max-width: 220px !important; justify-self: start !important; }
}
@media (min-width: 1100px) {
@container (min-width: 1100px) and (max-width: 1700px) {
  body .app-shell > .filters:not(.desktop-filters-collapsed) {
    grid-template-columns: 100px 240px 190px 240px 220px minmax(0, 1fr) !important;
    grid-template-rows: repeat(3, max-content) !important;
    align-content: start !important;
    gap: 8px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(1) { grid-column: 1 !important; grid-row: 1 !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(2) { grid-column: 2 !important; grid-row: 1 !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(3) { grid-column: 3 !important; grid-row: 1 !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(4) { grid-column: 4 !important; grid-row: 1 !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(5) { grid-column: 5 !important; grid-row: 1 !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > .period-filter {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
    grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > .spec-workbar {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    align-items: center !important; justify-content: flex-start !important;
    grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-group,
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-modules {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    align-items: center !important; width: auto !important; margin: 0 !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-modules { margin-left: auto !important; }
}
}

/* Physical 150% scaling reduces the CSS viewport; keep the compact controls there too. */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
@container (min-width: 1000px) {
  body .app-shell > .filters:not(.desktop-filters-collapsed) {
    grid-template-columns: 80px 180px 150px 180px 170px minmax(0, 1fr) 580px !important;
    grid-template-rows: repeat(2, max-content) !important;
    align-content: start !important;
    gap: 8px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label {
    position: relative; height: 40px !important; min-height: 40px !important;
    grid-row: 1 !important; width: 100% !important; min-width: 0 !important;
    padding: 0 !important; gap: 0 !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(1) { grid-column: 1 !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(2) { grid-column: 2 !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(3) { grid-column: 3 !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(4) { grid-column: 4 !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(5) { grid-column: 5 !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .compact-filter-caption {
    position: absolute; top: 4px; left: 10px; z-index: 1;
    color: #c4ccd3; font-size: 11px; line-height: 13px; pointer-events: none;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) label > .custom-select { position: static; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) label > .custom-select > .custom-select-button,
  body .app-shell > .filters:not(.desktop-filters-collapsed) .period-filter input[type=date] {
    width: 100% !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important;
    margin: 0 !important; padding: 14px 30px 2px 10px !important;
    border: 1px solid #58616b !important; border-radius: 7px !important;
    background: #414a54; font-size: 14px !important; line-height: 20px !important; font-weight: 500;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) label > .custom-select > .custom-select-button::after { top: 14px; right: 8px; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #yearFilter + .custom-select > .custom-select-button { padding-right: 16px !important; font-size: 12px !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #yearFilter + .custom-select > .custom-select-button::after { right: 4px; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > .period-filter {
    display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
    grid-column: 1 / 6 !important; grid-row: 2 !important;
    width: 100% !important; padding: 0 !important; gap: 8px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .period-filter > label {
    position: relative; flex: 0 1 120px !important; width: 120px !important;
    min-width: 0 !important; height: 40px !important; min-height: 40px !important;
    padding: 0 !important; gap: 0 !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .period-filter > label:nth-of-type(3) { flex-basis: 130px !important; width: 130px !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .period-filter input[type=date] { padding-right: 4px !important; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #periodClearButton,
  body .app-shell > .filters:not(.desktop-filters-collapsed) #missingStockFilterButton {
    flex: 0 0 auto !important; width: auto !important; height: 32px !important;
    min-height: 32px !important; max-height: 32px !important;
    padding: 4px 8px !important; border: 0 !important; background: transparent;
    font-size: 12px !important; white-space: nowrap !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #missingStockFilterButton::before {
    content: ''; width: 15px; height: 15px; flex: 0 0 15px;
    border: 1px solid #939ba2; border-radius: 3px;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #missingStockFilterButton { display: inline-flex !important; gap: 6px; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #missingStockFilterButton.is-active::before {
    content: '✓'; background: #80bd19; color: #25303a;
    border-color: #80bd19; line-height: 15px; text-align: center;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #missingStockFilterButton .missing-stock-filter-clear { display: none; }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > .spec-workbar {
    grid-column: 7 !important; grid-row: 1 / 3 !important;
    display: grid !important; grid-template-columns: max-content max-content !important;
    grid-template-rows: repeat(2, minmax(40px, auto)) !important;
    align-items: center !important; justify-content: end !important; align-self: stretch !important;
    gap: 8px !important; min-width: 0 !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-group {
    grid-column: 2 !important; grid-row: 1 !important;
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-self: end !important; align-self: center !important;
    width: auto !important; margin: 0 !important; gap: 6px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-label {
    width: auto !important; min-height: 32px !important;
    padding: 0 8px 0 0 !important; font-size: 12px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-button {
    width: auto !important; min-width: 0 !important; height: 32px !important;
    min-height: 32px !important; padding: 0 8px !important;
    font-size: 11px !important; white-space: nowrap !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #desktopFiltersToggle {
    grid-column: 1 !important; grid-row: 1 !important;
    justify-self: start !important; align-self: center !important;
    min-width: 118px !important; width: auto !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-modules {
    grid-column: 1 / -1 !important; grid-row: 2 !important;
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-self: end !important; align-self: center !important;
    width: auto !important; margin: 0 !important; gap: 8px !important;
  }
}
}
body .app-shell > .filters .period-filter #missingStockFilterButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 8px !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: none !important;
  padding: 0 8px !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #fff;
  font-size: 12px !important;
  cursor: pointer;
  white-space: nowrap;
}
body .app-shell > .filters .period-filter #missingStockFilterButton.is-active {
  border-color: #7ab719 !important;
  background: #303943 !important;
}
body .app-shell > .filters #missingStockFilterButton::before { content: none !important; }
body .app-shell > .filters #missingStockFilterCheckbox {
  appearance: none;
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0;
  border: 1px solid #8c969e;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
body .app-shell > .filters #missingStockFilterCheckbox:checked { background: #80bd19; border-color: #80bd19; }
body .app-shell > .filters #missingStockFilterCheckbox:checked::after {
  content: "";
  width: 8px;
  height: 4px;
  border: solid #25303a;
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg);
}
body .app-shell > .filters #missingStockFilterCheckbox:focus {
  outline: none;
  box-shadow: none;
}
body .app-shell > .filters #missingStockFilterCheckbox:focus:not(:checked) { border-color: #8c969e; }
@media (hover: hover) and (pointer: fine) {
  body .app-shell > .filters #missingStockFilterCheckbox:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
}

/* A 150%-scaled desktop needs a coherent third row instead of scattered actions. */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
@container (min-width: 1000px) and (max-width: 1449px) {
  body .app-shell > .filters:not(.desktop-filters-collapsed) {
    grid-template-columns: 80px 200px 160px 200px 180px minmax(0, 1fr) !important;
    grid-template-rows: 40px 40px minmax(48px, auto) !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > .period-filter {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > .spec-workbar {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-group,
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-modules {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    gap: 6px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #desktopFiltersToggle {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-modules button {
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}
}

/* The expanded intermediate desktop header follows the existing iPad order. */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  body .app-shell:has(> .filters:not(.desktop-filters-collapsed)) {
    grid-template-rows: max-content max-content max-content minmax(0, 1fr) !important;
  }
@container (min-width: 1000px) and (max-width: 1700px) {
  body .app-shell > .filters:not(.desktop-filters-collapsed) {
    --intermediate-toolbar: 1;
    grid-template-columns: clamp(95px, 10%, 140px) repeat(3, minmax(0, 1fr)) minmax(0, 1.22fr) !important;
    grid-template-rows: minmax(54px, auto) minmax(60px, auto) minmax(60px, auto) !important;
    column-gap: clamp(8px, 1vw, 16px) !important;
    row-gap: 10px !important;
  }
  @container (min-width: 1450px) {
    body .app-shell > .filters:not(.desktop-filters-collapsed) {
      grid-template-columns: 100px 240px 190px 240px 220px minmax(0, 1fr) !important;
    }
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > .spec-workbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(228, 229, 229, .16) !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-group,
  body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-modules {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    gap: 6px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #desktopFiltersToggle {
    min-width: 0 !important;
    margin: 0 !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:nth-of-type(n) {
    grid-row: 2 !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    align-content: start !important;
    gap: 4px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label:is(:has(#yearFilter), :has(#customerFilter), :has(#specFilter), :has(#equipmentFilter), :has(#statusFilter)) {
    width: 100% !important;
    max-width: none !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .compact-filter-caption {
    position: static !important;
    font-size: 13px !important;
    line-height: 16px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > label > .custom-select > .custom-select-button,
  body .app-shell > .filters:not(.desktop-filters-collapsed) .period-filter > label > .custom-select > .custom-select-button,
  body .app-shell > .filters:not(.desktop-filters-collapsed) .period-filter input[type=date] {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 30px 0 10px !important;
    font-size: 13px !important;
    line-height: 32px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .period-filter input[type=date] {
    padding-right: 8px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) label > .custom-select > .custom-select-button::after {
    top: 50% !important;
    transform: translateY(-50%);
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) > .period-filter {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    align-items: start !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .period-filter > label {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) .period-filter > label:nth-of-type(n) {
    flex: 0 0 clamp(140px, 15%, 160px) !important;
    width: clamp(140px, 15%, 160px) !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #periodClearButton {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 16px !important;
    border: 1px solid #58616b !important;
    border-radius: 7px !important;
    background: #414a54 !important;
    font-size: 13px !important;
  }
  body .app-shell > .filters:not(.desktop-filters-collapsed) #periodClearButton,
  body .app-shell > .filters:not(.desktop-filters-collapsed) #missingStockFilterButton {
    align-self: end !important;
  }
  @container (max-width: 1319px) {
    body .app-shell > .filters:not(.desktop-filters-collapsed) {
      grid-template-columns: 95px 168px 168px 168px 208px minmax(0, 1fr) !important;
      grid-template-rows: auto auto auto !important;
      column-gap: 10px !important;
      row-gap: 4px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) > .spec-workbar {
      justify-content: flex-start !important;
      gap: 8px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-group {
      flex: 0 0 auto !important;
      justify-content: flex-start !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) #desktopFiltersToggle {
      flex: 0 0 auto !important;
      min-width: 0 !important;
      font-size: 13px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-modules {
      flex: 0 0 auto !important;
      justify-content: flex-start !important;
      margin-left: auto !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-button,
    body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-modules button {
      min-height: 36px !important;
      padding: 0 10px !important;
      font-size: 12px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) .period-filter > label:nth-of-type(n) {
      flex: 0 0 150px !important;
      width: 150px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) #missingStockFilterButton {
      height: 32px !important;
      min-height: 32px !important;
    }
  }
  @container (min-width: 1320px) {
    body .app-shell > .filters:not(.desktop-filters-collapsed) {
      grid-template-columns: 140px 250px 250px 250px 310px minmax(0, 1fr) !important;
      column-gap: 16px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) > .spec-workbar {
      gap: 24px !important;
      padding-bottom: 14px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-group {
      min-height: 68px !important;
      padding: 0 12px !important;
      gap: 14px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-label {
      min-height: 40px !important;
      font-size: 14px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-button {
      height: 40px !important;
      min-height: 40px !important;
      padding: 0 16px !important;
      font-size: 15px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) #desktopFiltersToggle {
      height: 44px !important;
      min-height: 44px !important;
      min-width: 196px !important;
      padding: 0 16px !important;
      font-size: 15px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-modules {
      gap: 14px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) .spec-workbar-modules button {
      height: 40px !important;
      min-height: 40px !important;
      padding: 0 14px !important;
      font-size: 15px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) > label:is(:has(#yearFilter), :has(#customerFilter), :has(#specFilter), :has(#equipmentFilter), :has(#statusFilter)) {
      width: 100% !important;
      max-width: none !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) > .period-filter {
      gap: 14px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) .period-filter > label:nth-of-type(n) {
      flex: 0 0 160px !important;
      width: 160px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) #periodClearButton {
      height: 32px !important;
      min-height: 32px !important;
      padding: 0 16px !important;
      border: 1px solid #58616b !important;
      border-radius: 7px !important;
      background: #414a54 !important;
      font-size: 13px !important;
    }
    body .app-shell > .filters:not(.desktop-filters-collapsed) #missingStockFilterButton {
      height: 32px !important;
      min-height: 32px !important;
    }
  }
}
}