/* Cienka linia pod całym nagłówkiem (zakładki/statystyki/toolbar) - oddziela wizualnie strefę
   "sterowania" (filtry, akcje zbiorcze) od strefy "treści" (lista kart) pod spodem. */
header { padding-bottom: 6px; border-bottom: 1px solid var(--sk-border); margin-bottom: 18px; }
header h1 { font: 700 24px/1.3 var(--sk-font); margin: 0; letter-spacing: -0.01em; }
.header-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }

.view-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.view-tab {
  font: 600 13px/1.2 var(--sk-font);
  padding: 8px 16px;
  border-radius: var(--sk-radius-sm);
  border: none;
  cursor: pointer;
  background: var(--sk-bg-soft);
  color: var(--sk-text-muted);
}
.view-tab.active { background: var(--sk-accent); color: #fff; }

.stats-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.stat-tile {
  background: var(--sk-accent-soft);
  border-radius: var(--sk-radius-sm);
  padding: 10px 14px;
  min-width: 96px;
}
.stat-value { font: 700 20px/1.2 var(--sk-font); color: var(--sk-accent); }
.stat-label { font-size: 11px; color: var(--sk-text-muted); margin-top: 2px; }

.select-all-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 13px/1.2 var(--sk-font);
  color: var(--sk-text-muted);
  white-space: nowrap;
}
.select-all-label input { width: 15px; height: 15px; accent-color: var(--sk-accent); }

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--sk-accent-soft);
  border-radius: var(--sk-radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.bulk-bar[hidden] { display: none; }
.bulk-count { font: 600 13px/1.2 var(--sk-font); color: var(--sk-accent); white-space: nowrap; }

.card-header input.card-select { width: 16px; height: 16px; accent-color: var(--sk-accent); }

/* Toolbar podzielony na dwa czytelne rzędy zamiast jednej ściany 9 kontrolek: rząd wyszukiwania
   (zaznacz widoczne + szukaj + odśwież) i osobny, wizualnie wydzielony panel filtrów+sortowania
   (jasne tło + etykieta "Filtry"), żeby dało się od razu odróżnić "czego szukam" od "jak filtruję
   listę". Akcja "Oznacz wymagające zakupu" wypchnięta na prawą krawędź panelu filtrów (margin-left:
   auto), bo to jedyna nie-filtrująca akcja w tym rzędzie. */
.toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.toolbar-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.toolbar-search-row input[type="text"] {
  flex: 1;
  min-width: 200px;
  font: 400 14px/1.4 var(--sk-font);
  padding: 9px 12px;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
}
.toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--sk-bg-soft);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
  padding: 10px 12px;
}
.toolbar-filters-label {
  font: 700 11px/1.2 var(--sk-font);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sk-text-muted);
  margin-right: 2px;
}
.toolbar-filters-action { margin-left: auto; }

.count-label { font-size: 12px; color: var(--sk-text-muted); margin-bottom: 14px; }

.contest-card {
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  margin-bottom: 12px;
  background: var(--sk-bg-soft);
  overflow: hidden;
}
/* Kolor po lewej stronie karty = status, na pierwszy rzut oka widać co jest zgłoszone/oczekujące
   itd. Tło (urgency-*) to osobny, niezależny sygnał "termin się zbliża" - dokładany TYLKO dla
   "Oczekuje" (patrz computeUrgencyClass w manage.js), więc nigdy nie koliduje ze statusem. */
.contest-card.status-oczekuje { border-left: 4px solid var(--sk-accent); }
.contest-card.status-dokupienia { border-left: 4px solid var(--sk-info); }
.contest-card.status-zgloszono { border-left: 4px solid var(--sk-warn); }
.contest-card.status-wygrana { border-left: 4px solid var(--sk-success); }
.contest-card.status-przegrana { border-left: 4px solid var(--sk-error); }
.contest-card.urgency-soon { background: var(--sk-warn-soft); border-left-color: var(--sk-warn-border); }
.contest-card.urgency-due { background: var(--sk-error-soft); border-left-color: var(--sk-error); }
.card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
}
.card-title { font: 600 14px/1.3 var(--sk-font); flex: 1; min-width: 160px; }
.card-title a { color: var(--sk-text); text-decoration: none; }
.card-title a:hover { color: var(--sk-accent); }
.card-header .category-badge {
  font: 600 11px/1.4 var(--sk-font);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sk-accent-soft);
  color: var(--sk-accent);
  white-space: nowrap;
}
.card-header .date-label { font-size: 12px; color: var(--sk-text-muted); white-space: nowrap; }
.card-header .results-badge {
  font: 600 11px/1.4 var(--sk-font);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sk-bg-soft);
  color: var(--sk-text-muted);
  white-space: nowrap;
}
.card-header .results-badge.results-due { background: var(--sk-error-soft); color: var(--sk-error); }
.card-header select.status-select { font-size: 12px; padding: 5px 8px; }
.card-header .status-saving-indicator { font-size: 11px; color: var(--sk-text-muted); white-space: nowrap; }
.card-header .status-saving-indicator[hidden] { display: none; }

.edit-form {
  border-top: 1px solid var(--sk-border);
  padding: 16px;
  background: #fff;
}
.edit-form[hidden] { display: none; }

/* Pola pogrupowane w kolorowe sekcje (patrz buildSection w dom-fields.js) zamiast jednej płaskiej
   siatki - każda grupa (Podstawowe informacje/Zadanie/Warunki/Regulamin/Odpowiedź) ma swój kolor
   obwódki+tła, żeby dało się od razu rozróżnić, gdzie kończy się jedna grupa pól a zaczyna druga. */
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 2px; }
.edit-section {
  background: var(--sk-bg-soft);
  border: 1px solid var(--sk-border);
  border-left: 4px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
  padding: 12px 14px 2px;
}
.edit-section.full { grid-column: 1 / -1; }
.edit-section-title {
  font: 700 11px/1.3 var(--sk-font);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sk-text-muted);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.edit-section.color-accent { background: var(--sk-accent-soft); border-left-color: var(--sk-accent); }
.edit-section.color-accent .edit-section-title { color: var(--sk-accent-hover); }
.edit-section.color-warn { background: var(--sk-warn-soft); border-left-color: var(--sk-warn); }
.edit-section.color-warn .edit-section-title { color: var(--sk-warn); }
.edit-section.color-info { background: var(--sk-info-soft); border-left-color: var(--sk-info); }
.edit-section.color-info .edit-section-title { color: var(--sk-info); }
.edit-section.color-violet { background: var(--sk-violet-soft); border-left-color: var(--sk-violet); }
.edit-section.color-violet .edit-section-title { color: var(--sk-violet); }
.edit-section.color-success { background: var(--sk-success-soft); border-left-color: var(--sk-success); }
.edit-section.color-success .edit-section-title { color: var(--sk-success); }

.edit-row { display: flex; gap: 12px; }
.edit-row > .field { flex: 1; min-width: 0; }
.edit-row.compact { gap: 22px; flex-wrap: wrap; }
.edit-row.compact > .field { flex: 0 0 auto; }

.edit-form .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.edit-form .field.full { width: 100%; }
.edit-form label { font-weight: 600; font-size: 12px; }
.edit-form .field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.edit-form .field-jump-link { font: 600 11px/1.2 var(--sk-font); color: var(--sk-accent); text-decoration: none; white-space: nowrap; }
.edit-form .field-jump-link:hover { text-decoration: underline; }
.edit-form .field-jump-link[hidden] { display: none; }
.edit-form input[type="text"], .edit-form input[type="date"], .edit-form textarea, .edit-form .edit-form textarea { min-height: 56px; resize: vertical; }
.edit-form .checkbox-field { flex-direction: row; align-items: center; gap: 6px; }
.edit-form .checkbox-field label { font-weight: 400; }
.edit-form .checkbox-field input { width: 15px; height: 15px; accent-color: var(--sk-accent); }
.edit-form .write-answer-row { flex-direction: row; align-items: center; gap: 10px; margin-top: -4px; flex-wrap: wrap; }
.edit-form .answer-counter { font-size: 12px; color: var(--sk-text-muted); margin-top: -6px; }
.edit-form .answer-counter.error { color: var(--sk-error); }
.edit-form .answer-counter.success { color: var(--sk-success); }
.edit-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.edit-actions .edit-status { font-size: 12px; color: var(--sk-text-muted); }
.edit-actions .edit-status.error { color: var(--sk-error); }
.edit-actions .edit-status.success { color: var(--sk-success); }



/* Przycisk „Filtry” widoczny tylko na telefonie - rozwija/zwija panel filtrów, który na wąskim
   ekranie zajmowałby inaczej pół wysokości ekranu nad listą. */
.filters-toggle { display: none; }
.archive-only[hidden], .active-only[hidden] { display: none; }

/* Nagłówek formularza edycji - widoczny tylko na telefonie, gdzie formularz otwiera się na pełnym
   ekranie (patrz media query niżej). */
.edit-form-mobile-header { display: none; }

@media (max-width: 640px) {
  header h1 { font-size: 20px; }
  .hint { display: none; }

  .view-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 4px; scrollbar-width: none; }
  .view-tabs::-webkit-scrollbar { display: none; }
  .view-tab { flex: 0 0 auto; }

  .stats-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 4px; scrollbar-width: none; }
  .stats-row::-webkit-scrollbar { display: none; }
  .stat-tile { flex: 0 0 auto; min-width: 84px; padding: 8px 12px; }
  .stat-value { font-size: 17px; }

  .toolbar-search-row input[type="text"] { min-width: 0; flex: 1 1 100%; order: -1; }
  .filters-toggle { display: inline-flex; margin-left: auto; }
  .toolbar-filters { display: none; }
  .toolbar-filters.open { display: flex; }
  .toolbar-filters select { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .toolbar-filters-label { flex-basis: 100%; }
  .toolbar-filters-action { margin-left: 0; }

  /* Pasek akcji zbiorczych przyklejony do dołu ekranu - zostaje pod kciukiem przy przewijaniu. */
  .bulk-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    margin: 0;
    border-radius: 14px 14px 0 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(30, 27, 46, .12);
  }
  .bulk-bar select { flex: 1 1 auto; }

  .card-header { padding: 12px; gap: 8px; }
  .card-title { flex: 1 1 calc(100% - 32px); min-width: 0; order: 0; }
  .card-header .category-badge, .card-header .date-label, .card-header .results-badge { order: 1; }
  .card-header select.status-select { order: 2; flex: 1 1 auto; }
  .card-header .status-saving-indicator { order: 3; }
  .card-header .edit-toggle-btn { order: 4; }

  /* Formularz edycji na pełny ekran: w karcie na liście byłby ściśnięty i łatwo zgubić miejsce. */
  .edit-form:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-y: auto;
    border-top: none;
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
  }
  .edit-form-mobile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -16px 12px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--sk-border);
  }
  .edit-form-mobile-header .title { flex: 1; font: 700 15px/1.3 var(--sk-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .edit-actions {
    position: sticky;
    bottom: 0;
    margin: 14px -16px 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--sk-border);
  }
  .edit-actions button { flex: 1 1 calc(50% - 10px); }
  .edit-actions .edit-status { flex-basis: 100%; }
  body:has(.edit-form:not([hidden])) { overflow: hidden; }

  .edit-grid { grid-template-columns: 1fr; }
  .edit-row { flex-direction: column; gap: 0; }
  .edit-row.compact { flex-direction: row; }
  .edit-form .write-answer-row button { flex: 1 1 auto; }
}