/* ControlsBar Component - Filter + Action layout molecule
 * Single source of truth for filter/action row layout
 * Used by Panel organism and can be used standalone
 */

/* Main container - flexbox with space-between */
.controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Filters container (left side).

   WRAPS. Nothing in this bar shrinks any more -- every filter is one of two fixed
   widths -- so wrapping is what stops a crowded header CLIPPING its controls off the
   edge, which is how History lost its Search button entirely (TLP-963). A filter that
   will not fit moves to a second row where it can still be clicked. */
.controls-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Actions container (right side) */
.controls-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Opt-in extra separation before the actions cluster (TLP-602).
   Only rendered when a panel passes actionsSeparator: true. A wider token gap,
   not a divider line -- no existing bar has a rule, so this stays precedent-light. */
.controls-actions--spaced {
  padding-left: var(--space-5);
}

/* Tab-style filter buttons */
.controls-filter-tabs {
  display: flex;
  gap: var(--space-1);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: var(--bg-surface);
}

.controls-tab-btn {
  border-radius: 0;
  border: none;
}

.controls-tab-btn:first-child {
  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
}

.controls-tab-btn:last-child {
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

/* Filter sizing -- a filter is one of exactly TWO widths, and that is the whole of it
   (TLP-963). No floors, no viewport bands, nothing that shrinks.

   `width`, not `min-width`. The old pins were min-widths, which is why they behaved
   differently per control: a select's content is narrower than its pin, so the pin sized
   it, while a search box's content is WIDER, so its pin never bound and it rendered at
   182-196px on every screen. One property, one number, both behave the same.

   Deliberately not applied to `.controls-filter-date-range`: a range renders real dates
   ("3 - 10 Sep 2026", 127px measured) and is the one control whose content genuinely
   sets its width. It stays content-sized, as it has always been. */
.controls-filter-select,
.controls-filter-search,
.controls-filter-date {
  width: var(--controls-filter-width);
}

/* Opt-in narrow, for a field whose content is short -- a room number, a code, a
   quantity. Set `narrow: true` on the filter; never hand-roll a width in a module. */
.controls-filter--narrow {
  width: var(--controls-filter-width-narrow);
}

/* Checkbox filter styling */
.controls-filter-checkbox {
  white-space: nowrap;
}

/* ===================
   GROUPED MODE: 1-3 filter groups distributed across the bar
   =================== */

.controls-bar.controls-bar--groups {
    justify-content: space-between;
}

.controls-bar.controls-bar--groups-1 {
    justify-content: flex-start;
}

/* 2 groups: left group flush left, right group flush right against actions */
.controls-bar.controls-bar--groups-2 {
    justify-content: flex-start;
}

.controls-bar.controls-bar--groups-2 > .controls-filter-group:nth-child(2) {
    margin-left: auto;
}

/* The standard for a sub-tabbed lookup bar (TLP-1087): the LEFT group is the
   sub-tab's own filters and is the one that gives way -- it wraps inside itself
   and may shrink -- while the right group stays one indivisible item, so a short
   row moves the right group down whole (flush right, actions after it) instead of
   splitting Period / Status / text field across two lines. */
.controls-bar.controls-bar--groups-2 > .controls-filter-group:first-child {
    flex-wrap: wrap;
    flex-shrink: 1;
    min-width: 0;
}

/* 3 groups: CSS grid for true left / centre / right alignment.
   Columns: left(auto) | centre(1fr, centred) | right(auto) | actions(auto).
   Right group and actions sit adjacent, flush right. */
.controls-bar.controls-bar--groups-3 {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-4);
}

.controls-bar.controls-bar--groups-3 > .controls-filter-group:nth-child(2) {
    justify-self: center;
}

.controls-filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* Desk-tablet band -- below --breakpoint-xl (1280px), the width H Hotels run on.
   The ONE responsive rule in this file: an action that carries an icon drops its word
   and renders icon-only, the same shape Complaints authors its search action in
   ({ label: '', icon, ariaLabel }), padding included. Only an action that HAS an icon
   collapses; a word-only button has nothing left to show.

   The label is CLIPPED, never display:none. A display:none label is dropped from the
   accessibility tree, and losing the visible word must not lose the accessible name.
   This is the .sr-only shape from utilities.css, inlined because the decision is made
   by viewport rather than by a class the markup could carry. (TLP-962)

   The filter half of this band is gone (TLP-963): it existed to claw width back from
   pins that were too wide, and the pins came down instead. */
@media (max-width: 1279px) {
  .controls-actions .btn:has(.btn-icon) .btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Responsive behavior */
@media (max-width: 768px) {
  .controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .controls-filters {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .controls-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* On the stacked mobile bar the actions are a full-width row, so the extra
     left padding would read as a stray indent -- reset it. */
  .controls-actions--spaced {
    padding-left: 0;
  }

  /* Beats the two fixed widths above -- a stacked bar gives every control the row. */
  .controls-filter-select,
  .controls-filter-search,
  .controls-filter-date,
  .controls-filter--narrow {
    width: 100%;
  }

  .controls-filter-tabs {
    width: 100%;
  }

  .controls-tab-btn {
    flex: 1;
  }
}