/* 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) */
.controls-filters {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: nowrap;
}

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

/* 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 inputs - ensure consistent sizing */
.controls-filter-select,
.controls-filter-search,
.controls-filter-date {
  min-width: 140px;
}

.controls-filter-search {
  min-width: 180px;
}

/* 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;
}

/* 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;
}

.controls-filter-group .controls-filter-select,
.controls-filter-group .controls-filter-search,
.controls-filter-group .controls-filter-date,
.controls-filter-group .controls-filter-date-range {
    min-width: unset;
}

/* 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;
  }

  .controls-filter-select,
  .controls-filter-search,
  .controls-filter-date {
    width: 100%;
    min-width: unset;
  }

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

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