.toolbar.task-toolbar {
  display: grid;
  gap: 10px;
  margin: 0 0 var(--space-5);
  padding: 8px;
  min-width: 0;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
}

.task-toolbar__main,
.task-toolbar__context,
.task-toolbar__filters,
.task-toolbar__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.task-toolbar__main,
.task-toolbar__context {
  flex-wrap: wrap;
}

.task-toolbar__main:empty {
  display: none;
}

.toolbar.task-toolbar.task-toolbar--workflow {
  grid-template-columns: 1fr;
}

.task-toolbar--workflow .task-toolbar__context {
  width: 100%;
}

.task-toolbar__search {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 280px;
}

.task-toolbar__search > .icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 13px;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.task-toolbar__search input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 48px 9px 42px;
  background: var(--surface-2);
}

.task-toolbar__clear {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  color: var(--text-muted);
}

.task-toolbar__search input:placeholder-shown ~ .task-toolbar__clear {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.task-toolbar__filters {
  width: 100%;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.task-toolbar__select {
  min-width: min(100%, 156px);
  max-width: 100%;
  flex: 1 1 156px;
}

.task-toolbar__select .filter-select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  background-color: var(--surface-2);
}

.task-toolbar__summary {
  width: 100%;
  min-height: 20px;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.task-toolbar__actions {
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.task-toolbar .button,
.task-toolbar .icon-button,
.task-toolbar .segmented button {
  min-height: 44px;
}

.task-toolbar .button {
  max-width: 100%;
  white-space: nowrap;
}

.task-toolbar__icon-action {
  flex: 0 0 44px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.task-toolbar__primary {
  max-width: 100%;
  flex: 1 1 180px;
}

.task-toolbar .segmented {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.task-toolbar .segmented button {
  flex: 0 1 auto;
  max-width: 100%;
}

.task-filter-empty {
  min-height: 148px;
  padding: var(--space-8) var(--space-5);
  color: var(--text-muted);
  text-align: center;
}

.task-filter-empty strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text);
}

@media (min-width: 720px) {
  .task-toolbar__filters {
    width: auto;
    flex: 0 1 auto;
    flex-wrap: nowrap;
  }

  .task-toolbar .segmented button {
    flex: 1 0 auto;
  }

  .task-toolbar__select {
    flex: 0 1 190px;
  }

  .task-toolbar__summary {
    width: auto;
    margin-right: auto;
    padding-inline: var(--space-1);
    white-space: nowrap;
  }

  .task-toolbar__actions {
    flex: 0 1 auto;
  }

  .task-toolbar__primary {
    flex: 0 0 auto;
  }
}

@media (min-width: 1350px) {
  .toolbar.task-toolbar {
    grid-template-columns: minmax(360px, 1fr) auto;
    align-items: center;
  }

  .task-toolbar__context {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}

@media (max-width: 719px) {
  .task-toolbar input,
  .task-toolbar select {
    font-size: 16px;
  }

  .task-toolbar__filters,
  .task-toolbar__actions,
  .task-toolbar__search,
  .task-toolbar__select {
    max-width: 100%;
  }

  .task-toolbar__filters {
    flex: 1 1 100%;
  }

  .task-toolbar .segmented {
    gap: 4px;
    row-gap: 4px;
    align-content: flex-start;
  }

  .task-toolbar .segmented button {
    flex: 0 1 auto;
    white-space: nowrap;
  }

  .task-toolbar .button {
    white-space: normal;
  }

  .task-toolbar__actions .button {
    flex: 1 1 auto;
  }

  .task-toolbar__context > .task-toolbar__primary {
    width: 100%;
    max-width: 100%;
  }
}

@media (pointer: coarse) {
  .task-toolbar .button,
  .task-toolbar .icon-button,
  .task-toolbar input,
  .task-toolbar select,
  .task-toolbar .segmented button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-toolbar *,
  .task-toolbar *::before,
  .task-toolbar *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .task-toolbar {
    display: none !important;
  }
}