/* One field/action sizing contract for filter rows. Loaded after component styles. */
.toolbar-row:not([hidden]):not([data-route-hidden]) {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.toolbar-row > label {
  display: flex !important; flex-direction: column; align-items: stretch;
  gap: 8px; margin: 0; padding: 0; min-width: 150px; max-width: 280px;
  flex: 0 1 220px; font-size: 14px; line-height: 1.5;
}
.toolbar-row > :is(input:not([type=checkbox]),select,button),
.toolbar-row > label > :is(input:not([type=checkbox]),select) {
  box-sizing: border-box !important;
  height: 44px !important; min-height: 44px !important; max-height: 44px !important;
  padding: 10px 14px !important; border-radius: 10px !important;
  font-size: 14px !important; line-height: 22px !important;
  margin: 0 !important; font-family: inherit;
}
.toolbar-row > :is(input:not([type=checkbox]),select,button) {flex: 0 1 auto; width: auto; max-width: 100%;}
.toolbar-row > label > :is(input:not([type=checkbox]),select,textarea) {width: 100% !important; max-width: 100% !important; min-width: 0;}
.toolbar-row > button {align-self: flex-end; white-space: nowrap;}
.toolbar-row > button:not(.primary):not(.calendar-add-primary):not(.punch-admin-primary),
.calendar-period-controls > button {border:1px solid #d2d3c7;background:#fdfcf9;color:#57634d;font-weight:600;}
.calendar-period-controls {display:flex;align-items:center;gap:10px;min-height:44px;}
.calendar-period-controls > button {height:44px;min-height:44px;padding:10px 14px;border-radius:10px;font-size:14px;}
.calendar-period-controls > strong {white-space:nowrap;}
.toolbar-row > .toolbar-check {flex: 0 0 auto; min-width: 0; max-width: none; flex-direction: row; align-items: center; min-height: 44px;}
.toolbar-row > .toolbar-note {flex: 0 0 100%; margin: 0; max-width: 100%;}
.toolbar-row > .toolbar-note:empty {display: none;}
.toolbar-row > [hidden] {display: none !important;}
.toolbar-row > label:has(> textarea) {flex: 1 1 100%; max-width: none;}
.toolbar-row > label > textarea {height: auto; min-height: 88px;}
.toolbar-row :is(input,select,button):focus-visible {outline: 2px solid #b49773; outline-offset: 3px;}
@media(max-width:640px) {
  .toolbar-row > :is(label,input:not([type=checkbox]),select,button) {
    flex: 0 0 100% !important; width: 100% !important;
    min-width: 0 !important; max-width: 100% !important;
  }
  .toolbar-row > .toolbar-check {flex-direction: row; justify-content: flex-start;}
  .toolbar-row > .calendar-period-controls {flex:0 0 100%;display:grid;grid-template-columns:44px 1fr 44px auto;width:100%;}
  .calendar-period-controls > button {width:auto;min-width:0;padding:8px;}
  .calendar-period-controls > strong {text-align:center;}
}