/* Shared compact filter geometry. Viewport tokens never depend on Sidebar or
   available workspace width. Form fields and report/card grids keep their layout. */
:root {
  --filter-control-width: clamp(180px, 18vw, 260px);
  --filter-organization-width: 260px;
  --filter-period-width: clamp(280px, 24vw, 360px);
  --filter-control-height: clamp(52px, calc(62 * var(--u)), 62px);
}

/* #275: organization immediately precedes the date in every shared toolbar.
   Keep their existing handlers and month/range semantics, not copied controls. */
.page-context {
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:12px;margin-left:auto;min-width:0;max-width:100%;flex:0 0 auto;
}
.page-toolbar {align-items:center;gap:12px;}
.page-context > :is(.page-organization,.page-period) {
  flex:0 0 auto;min-height:var(--filter-control-height);height:var(--filter-control-height);
  min-width:0;max-width:100%;margin:0;border:1px solid var(--line);border-radius:10px;
  background:#fff;box-sizing:border-box;
}
.page-context > .page-organization {width:var(--filter-organization-width);}
.page-context > .page-period {width:var(--filter-control-width);}
.page-context > .date-range {width:var(--filter-period-width);}
.page-organization :is(.filter-value,strong) {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.page-organization strong {font-weight:inherit;}
.page-context-toolbar {justify-content:flex-end;}
.page-toolbar .cash-context {margin-left:auto;max-width:100%;}
.page-toolbar .date-range span {overflow:hidden;text-overflow:ellipsis;}
.statement-controls .periodbar {margin-bottom:0;padding-bottom:0;}
.statement-controls .iam-toolbar:empty {display:none;}

/* One page-level control row. Functional tabs scroll within their own lane;
   secondary filters cannot displace the organization/month lane. Currency
   rates do not use this composition and keep their existing geometry. */
.page-main-toolbar {
  /* Use the existing waste/organization field height from :root. Alignment
     does not change the established size of the quick-period buttons. */
  --filter-organization-width:clamp(150px,16vw,230px);
  --filter-control-width:clamp(162px,16vw,208px);
  --filter-period-width:clamp(254px,22vw,280px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:12px;flex:none;min-width:0;max-width:100%;margin:0 0 16px;
}
.page-main-toolbar.page-toolbar-context-only {grid-template-columns:minmax(0,1fr);}
.page-main-toolbar .page-context {flex-wrap:nowrap;gap:8px;max-width:100%;}
#content .page-main-toolbar.page-toolbar > .page-primary-tabs {
  display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0;
  max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;
  margin:0;padding:0;border:0;
}
#content .page-main-toolbar > .page-primary-tabs > button {
  flex:none;
  white-space:nowrap;
}
.page-primary-tabs > .tariff-hint {flex:none;white-space:nowrap;margin:0;}
.page-main-toolbar .page-context > :is(.page-organization,.page-period,.org-type-filter) {
  padding:4px 12px;font-size:1rem;font-weight:400;line-height:1.2;border-radius:10px;
}
.page-main-toolbar .page-context > .page-organization:has(> .caret) {
  position:relative;display:flex;align-items:center;padding-right:36px;
}
.page-main-toolbar .page-context > .page-organization > .caret {
  position:absolute;right:12px;top:50%;transform:translateY(-25%);margin:0;
}
.page-main-toolbar .page-period {justify-content:center;gap:8px;}
.page-main-toolbar .page-period > span {min-width:0;}
.page-main-toolbar .page-period svg {width:20px;height:20px;flex:none;}
.page-main-toolbar .org-type-filter {height:var(--filter-control-height);min-height:var(--filter-control-height);}
.page-toolbar-empty {display:none!important;}
@media(max-width:700px) {
  .page-main-toolbar {grid-template-columns:minmax(0,1fr);}
  .page-main-toolbar .page-context {width:100%;}
  .page-main-toolbar .page-context > :is(.page-organization,.page-period) {flex:1 1 0;width:0;}
}
/* A phone cannot fit a readable full date range beside an organization. Keep
   both controls intact on separate rows; tablet/Desktop retain the fixed row. */
@media(max-width:480px) {
  .page-main-toolbar .page-context {flex-wrap:wrap;}
  .page-main-toolbar .page-context > :is(.page-organization,.page-period) {flex-basis:100%;width:100%;}
}

/* Existing toolbar aliases share one wrapping policy. Free space belongs to
   the workspace; a new row is preferable to stretching or squeezing a filter. */
:is(.filters, .commerce-filters, .acc-context, .acc-toolbar-filters,
    .settle-filters, .commerce-catalog-toolbar, .catalog-price-toolbar, .biz-calendar-toolbar,
    .biz-bank-toolbar, .employee-toolbar, .tpl-toolbar, .id-context) {
  display: flex;
  flex-wrap: wrap;
}
.acc-toolbar { flex-wrap: wrap; }
.periodbar { flex-wrap: wrap; }
.periodbar .shortcuts { flex: 0 1 auto; }

:is(.filters, .commerce-filters, .acc-context, .acc-toolbar-filters,
    .settle-filters, .commerce-catalog-toolbar, .catalog-price-toolbar, .biz-calendar-toolbar,
    .biz-bank-toolbar, .biz-integration-filter, .employee-toolbar,
    .utilities-filter, .access-request-toolbar) >
    :is(.fieldbox, .acc-form-field, .catalog-group-filter),
:is(.pay-filters, .iam-toolbar, .oai-toolbar, .cloud-toolbar, .diia-context, .gpt-context,
    .vc-toolbar, .ocr-toolbar, .ao-toolbar, .warehouse-toolbar) select,
.iam-toolbar > .acc-choice-button,
:is(.mono-toolbar, .md-context, .np-toolbar, .gml-toolbar, .tg-toolbar, .id-context) > label,
.gml-workspace .gml-toolbar > label,
.tpl-toolbar > button,
.org-type-filter,
.filters > :is(label, .filter) {
  flex: 0 0 auto;
  width: var(--filter-control-width);
  min-width: 0;
  max-width: 100%;
}
.filters > :is(label, .filter) :is(input, select, .acc-choice-button) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Native date/month inputs have different intrinsic heights. Match the existing
   44px choice buttons when compact filters wrap onto separate rows. */
.filters > label > input:is([type="date"], [type="month"]) { height: 44px; }

/* Labels may be long; their full value remains available in the choice menu. */
:is(.filters, .commerce-filters, .acc-context, .acc-toolbar-filters,
    .commerce-catalog-toolbar, .biz-calendar-toolbar, .biz-bank-toolbar,
    .biz-integration-filter, .employee-toolbar, .utilities-filter,
    .access-request-toolbar) .filter-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
:is(.mono-toolbar, .md-context, .np-toolbar, .gml-toolbar, .tg-toolbar, .id-context) > label select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.periodbar .date-range {
  flex: 0 0 auto;
  width: var(--filter-period-width);
  min-width: 0;
  max-width: 100%;
}
.salary-periodbar .salary-organization,
.cash-periodbar .cash-organization,
.utility-tabs-row > .acc-choice-button {
  flex: 0 0 auto;
  width: var(--filter-organization-width);
  min-width: 0;
  max-width: 100%;
}
.utility-tabs-row:has(> .acc-choice-button) { grid-template-columns: minmax(0, 1fr) var(--filter-organization-width); }
.utility-tabs-row > .acc-choice-button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cash-periodbar .cash-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}
.cash-periodbar .cash-organization {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cash-periodbar .cash-organization strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#agent-context {
  flex: 0 0 var(--header-context-width);
  width: var(--header-context-width);
  min-width: 0;
}

/* Genuine phone layouts may use the whole row. This breakpoint is a viewport
   decision, so expanded/collapsed desktop and iPad sidebars cannot trigger it. */
@media (max-width: 700px) {
  :root {
    --filter-control-width: 100%;
    --filter-organization-width: 100%;
    --filter-period-width: 100%;
  }
  #agent-context { flex: 1 1 160px; width: auto; }
  .utility-tabs-row:has(> .acc-choice-button) { grid-template-columns: minmax(0, 1fr); }
}

/* Month controls share the existing compact-filter token in every toolbar. */
.month-trigger, .utilities-month {
  flex: 0 0 auto; width: var(--filter-control-width); min-width: 0; max-width: 100%;
}
.filters > .month-trigger, .filters > .utility-period-filter, .utilities-month { margin-left: auto; }
.utilities-toolbar { align-items: center; }