/* GENERATED FILE — DO NOT EDIT DIRECTLY.
 * Canonical source: frontend/src/styles/css/04-semantic-classes/toolbar.css
 * Edit the canonical React stylesheet source, then regenerate mirrors with:
 *   node scripts/sync-public-stylesheets.cjs
 */
/* ============================================================================
   TOOLBAR UTILITIES
   Canonical toolbar component with BEM variants for control bars, header
   actions, and inline button groups across the application.
   ========================================================================= */

/* === BASE TOOLBAR === */
/* Extends .hstack with toolbar-specific gap */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--toolbar-group-gap);
  flex-wrap: wrap;
  overflow: visible;
  box-sizing: border-box;
  flex: 0 1 auto;
  min-width: var(--min-content);
  max-width: var(--size-100pct);
  margin-inline-start: auto;
}

.toolbar--justify-center {
  justify-content: center;
}

.toolbar--collapsed {
  position: relative;
  flex-wrap: nowrap;
}

.toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: var(--toolbar-group-gap);
  flex-wrap: nowrap;
  flex: 0 0 auto;
  min-width: 0;
  max-width: max-content;
}

.toolbar--wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-1-5px);
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--size-100pct);
  margin-inline-start: 0;
}

.toolbar__wrap-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1-5px);
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
  max-width: var(--size-100pct);
}

.toolbar__wrap-row--justify-center {
  justify-content: center;
}

/* ── Toolbar vertical divider — separates action icons from view switcher ── */
.toolbar__divider {
  width: var(--size-1px);
  align-self: stretch;
  background: var(--text-color-primary);
  opacity: 0.35;
  flex-shrink: 0;
  margin: var(--space-1px) 0;
}

@media (max-width: 767px) {
  .toolbar {
    margin-left: 0;
    order: 2;
    min-width: 0;
    justify-content: flex-end;
    overflow: visible;
  }
}

.column-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5px);
}

.column-picker__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5px);
}

.progressive-disclosure-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5px);
}

.saved-views-switcher__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-1-5px);
  flex-wrap: wrap;
}