[hidden] {
  display: none !important;
}

.toolbar {
  display: flex;
  gap: 8px;
}

.danger {
  border-color: #793442;
  color: #ff7d8d;
}

.danger:hover {
  border-color: var(--red);
  color: #fff;
}

@media (max-width: 900px) {
  header {
    gap: 10px;
    height: auto;
  }

  .head-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .head-actions select {
    display: block;
    max-width: 180px;
  }

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

  .section-head {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .section-head select {
    min-width: 0;
    width: 100%;
  }
}