/* Repeated list-page chrome: empty states, page headers (extend later). */

.page-header {
  display: grid;
  gap: 0.45rem;
  margin-block-end: 1.25rem;
  max-width: 42rem;
}

.page-header h1 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.page-header p {
  margin: 0;
  color: var(--color-muted);
}

.empty-state {
  display: grid;
  gap: 0.85rem;
  max-width: 36rem;
  padding: 1.25rem 0;
}

.empty-state__message {
  margin: 0;
  color: var(--color-muted);
}

.empty-state--error .empty-state__message {
  color: var(--color-text);
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0;
}

.empty-state__link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.empty-state__link:hover,
.empty-state__link:focus-visible {
  text-decoration: underline;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
}

.filter-bar label {
  display: grid;
  gap: 0.35rem;
  min-width: min(12rem, 100%);
  flex: 1 1 10rem;
}

.filter-bar .form-input,
.filter-bar select.form-input {
  width: 100%;
  min-height: 2.75rem;
}

@media (max-width: 640px) {
  .filter-bar {
    display: grid;
    gap: 0.65rem;
  }

  .filter-bar label {
    min-width: 0;
  }

  .filter-bar .btn {
    width: 100%;
    min-height: 2.75rem;
  }
}

/* Dual CTA / form action rows — sticky on narrow screens */
.page-actions {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-start;
  margin-block: 1.25rem 0;
}

.page-actions .btn {
  flex: 1 1 10rem;
  min-width: min(100%, 9.5rem);
}

.page-actions .btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 640px) {
  .page-actions {
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    border-block-start: 1px solid var(--color-border);
    bottom: 0;
    gap: 0.5rem;
    inset-inline: 0;
    justify-content: stretch;
    margin-block: 1rem 0;
    padding: 0.75rem max(0.75rem, env(safe-area-inset-inline-end, 0px))
      max(0.75rem, env(safe-area-inset-bottom, 0px))
      max(0.75rem, env(safe-area-inset-inline-start, 0px));
    position: sticky;
    z-index: 40;
  }

  .page-actions .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }
}