/*
 * Komponenty behawioralne z UX-DR3 uzywane przez powierzchnie domenowe:
 * `file-dropzone`, `import-error-report` nad `data-table`, `alert-banner`,
 * `button-primary`. Kazda wartosc pochodzi z warstwy tokenow - ten arkusz nie
 * zapisuje ani jednego koloru i ani jednego wymiaru wprost.
 *
 * Zasada wspolna dla calego arkusza: kolor nigdy nie jest jedynym nosnikiem stanu.
 * Pasek wiersza i pasek banera sa wzmocnieniem etykiety tekstowej, nie jej zamiennikiem.
 */

/* ── Formularz wgrania pliku ─────────────────────────────────────────────── */
.intake-form {
  display: flex;
  flex-direction: column;
  gap: var(--bsa-space-4);
  align-items: flex-start;
}

/* `file-dropzone`: obrys kreskowany, tlo wklesle, promien duzy (DESIGN.md).
   Przeciagniecie pliku na pole obsluguje przegladarka - stan "podczas przeciagania"
   z DESIGN.md wymagalby JavaScriptu, wiec zostaje odpowiednik dla klawiatury
   i wskaznika: podswietlenie obrysu, gdy fokus jest wewnatrz strefy. */
.file-dropzone {
  display: flex;
  flex-direction: column;
  gap: var(--bsa-space-2);
  width: 100%;
  padding: var(--bsa-space-5);
  border: var(--bsa-layout-dashed-border) dashed var(--bsa-color-border-input);
  border-radius: var(--bsa-radius-lg);
  background: var(--bsa-color-surface-sunken);
}

.file-dropzone:focus-within {
  border-color: var(--bsa-color-primary);
}

.file-dropzone__input {
  min-height: var(--bsa-space-density-row);
  font-family: var(--bsa-font-family-sans);
  font-size: var(--bsa-type-body-size);
  color: var(--bsa-color-ink-primary);
}

/* ── Przycisk akcji glownej ──────────────────────────────────────────────── */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bsa-layout-control-height);
  padding: var(--bsa-space-2) var(--bsa-space-5);
  border: var(--bsa-layout-hairline) solid var(--bsa-color-primary);
  border-radius: var(--bsa-radius-md);
  background: var(--bsa-color-primary);
  color: var(--bsa-color-primary-foreground);
  font-family: var(--bsa-font-family-sans);
  font-size: var(--bsa-type-body-size);
  font-weight: var(--bsa-type-label-weight);
  line-height: var(--bsa-type-body-line);
  cursor: pointer;
}

.button-primary:hover {
  background: var(--bsa-color-primary-hover);
  border-color: var(--bsa-color-primary-hover);
}

/* ── Baner komunikatu ────────────────────────────────────────────────────── */
.alert-banner {
  max-width: var(--bsa-layout-form-max-width);
  margin-bottom: var(--bsa-space-4);
  padding: var(--bsa-space-4) var(--bsa-space-5);
  border-radius: var(--bsa-radius-md);
  border-left: var(--bsa-layout-accent-bar) solid var(--bsa-color-status-neutral);
  background: var(--bsa-color-status-neutral-bg);
  color: var(--bsa-color-ink-primary);
}

.alert-banner--danger {
  border-left-color: var(--bsa-color-status-danger);
  background: var(--bsa-color-status-danger-bg);
}

.alert-banner--warning {
  border-left-color: var(--bsa-color-status-warning);
  background: var(--bsa-color-status-warning-bg);
  color: var(--bsa-color-status-warning);
}

.alert-banner__icon {
  margin-right: var(--bsa-space-2);
}

/* ── Tabela danych ───────────────────────────────────────────────────────── */
/* Panel raportu jest szerszy niz formularz: tabela dowodowa ma szesc kolumn
   i zawijanie komunikatow w kolumnie 640 px czynilo ja nieczytelna. */
.panel--wide {
  max-width: none;
}

/* Kontener przewijania jest fokusowalny - inaczej tresc szerszej tabeli byla
   nieosiagalna z klawiatury (WCAG 2.1.1). */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bsa-type-body-size);
}

.data-table caption {
  text-align: left;
}

.data-table th,
.data-table td {
  min-height: var(--bsa-space-density-row);
  padding: var(--bsa-space-2) var(--bsa-space-3);
  border-bottom: var(--bsa-layout-hairline) solid var(--bsa-color-border);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  background: var(--bsa-color-surface-sunken);
  font-size: var(--bsa-type-label-size);
  font-weight: var(--bsa-type-label-weight);
  line-height: var(--bsa-type-label-line);
  letter-spacing: var(--bsa-type-label-tracking);
  color: var(--bsa-color-ink-secondary);
}

.data-table tbody tr:hover {
  background: var(--bsa-color-surface-sunken);
}

.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Raport bledow importu ───────────────────────────────────────────────── */
/* Pasek przy pierwszej komorce jest WZMOCNIENIEM wagi, nigdy jej jedynym nosnikiem -
   wage niesie osobna kolumna z pelnym slowem. */
.import-error-report__row--error td:first-child {
  border-left: var(--bsa-layout-accent-bar) solid var(--bsa-color-status-danger);
}

.import-error-report__row--warning td:first-child {
  border-left: var(--bsa-layout-accent-bar) solid var(--bsa-color-status-warning);
}

/* ── Reflow do 320 px ────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .file-dropzone {
    padding: var(--bsa-space-4);
  }

  .alert-banner {
    padding: var(--bsa-space-3) var(--bsa-space-4);
  }
}

/* ── Stan pozycji wyniku kwalifikacji ────────────────────────────────────── */
/* Warianty dopisane razem z ekranem #2 (Story 2.6). Kolor jest WZMOCNIENIEM stanu,
   nigdy jego jedynym nosnikiem - kazda plakietka niesie pelne polskie slowo, a obok
   niej stoi kod techniczny z odpowiedzi API. */
.status-badge--success {
  color: var(--bsa-color-status-success);
  background: var(--bsa-color-status-success-bg);
}

.status-badge--warning {
  color: var(--bsa-color-status-warning);
  background: var(--bsa-color-status-warning-bg);
}

.status-badge--danger {
  color: var(--bsa-color-status-danger);
  background: var(--bsa-color-status-danger-bg);
}

/* ── Jawna zmiana kolejnosci wynikow (sort-chip) ─────────────────────────── */
/* Chip jest zwyklym odnosnikiem z parametrem `userSort`: zmiana kolejnosci wymaga
   swiadomego klikniecia i obowiazuje tylko dla tego zapytania (AD-37, UX-DR5).
   Chip aktywny niesie `aria-current`, wiec stan jest czytelny takze bez koloru. */
.sort-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bsa-space-2);
  margin: var(--bsa-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.sort-chip {
  display: inline-block;
  padding: var(--bsa-space-1) var(--bsa-space-3);
  border: var(--bsa-layout-hairline) solid var(--bsa-color-border-strong);
  border-radius: var(--bsa-radius-sm);
  color: var(--bsa-color-ink-primary);
  text-decoration: none;
}

.sort-chip--active {
  border-color: var(--bsa-color-primary);
  color: var(--bsa-color-primary-foreground);
  background: var(--bsa-color-primary);
}

/* ── Mapa zasiegow ───────────────────────────────────────────────────────── */
/* Wysokosc jest podana, bo kontener mapy bez wysokosci nie rysuje sie w ogole.
   Mapa jest dodatkiem do danych: ten sam zbior punktow jest obok jako GeoJSON. */
.coverage-map {
  height: 60vh;
  min-height: var(--bsa-layout-map-min-height);
  border: var(--bsa-layout-hairline) solid var(--bsa-color-border);
  border-radius: var(--bsa-radius-sm);
  background: var(--bsa-color-surface-sunken);
}