/* ============================================================
   Kropka — okno „Zgłoś problem"

   Wyspa strony w przestrzeni `.kp-zgl-*`. Nazwy rodzajowe (`kp-btn`,
   `kp-field`, `kp-modal`, `kp-modal-box`) należą do katalogu — tutaj
   są wyłącznie ZAWĘŻANE złożeniem, nigdy definiowane od nowa.

   Do 2026-08-12 ten wygląd mieszkał wprost w `templates/base.html`:
   ~300 linii z wpisanymi wartościami palety landing page'a
   (`#3C2A21`, `#F4EAE0`) i osobnym blokiem `body.dark` dla każdej
   reguły. Tutaj kolory pochodzą wyłącznie z tokenów, a tryb ciemny
   wynika z liczenia względem `--surface` — dlatego w tym pliku NIE MA
   ani jednej reguły `body.dark`. Jeśli kiedyś się pojawi, znaczy to,
   że któryś kolor przestał być tokenem.

   Atrybut `hidden` gasi katalog (`[hidden] { display: none !important }`
   w `kp-components.css`), więc stany ukrycia nie potrzebują tu reguł.
   ============================================================ */

/* ── Pływający przycisk ─────────────────────────────────────── */

.kp-zgl-fab-wrap {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 60;
}

.kp-zgl-fab {
  position: relative;
  width: 56px;
  height: 56px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--blue-600);
  color: var(--on-overlay);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.kp-zgl-fab:hover {
  background: var(--blue-700);
  box-shadow: var(--shadow-deep);
}

.kp-zgl-fab:active { transform: scale(0.98); }

/* Licznik nieprzeczytanych — widzi go wyłącznie administracja (procesor
   kontekstu zwraca zeru dla pozostałych ról), więc to sygnał triażu,
   nie stan zgłaszającego. Czerwień jest tu statusem, zgodnie z regułą
   „nasycone barwy tylko celowo". */
.kp-zgl-fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--status-urgent);
  color: var(--on-overlay);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Okno ───────────────────────────────────────────────────── */

/* Zawężenie prymitywu: katalog daje `.kp-modal-box` własny padding, a to
   okno ma nagłówek i stopkę odcięte kreską na całą szerokość. Padding
   schodzi więc do sekcji, a przewija się sam korpus — nagłówek i stopka
   zostają na miejscu przy długim opisie. */
.kp-modal-box.kp-zgl-box {
  max-width: 560px;
  padding: 0;
  overflow: hidden;
}

.kp-zgl-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.kp-zgl-eyebrow {
  margin: 0 0 2px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.kp-zgl-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.15;
  color: var(--ink);
}

.kp-zgl-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}

.kp-zgl-close:hover {
  color: var(--ink);
  border-color: var(--divider);
}

.kp-zgl-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.kp-zgl-group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.kp-zgl-label {
  display: block;
  padding: 0;
  margin-bottom: var(--sp-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.kp-zgl-optional { font-weight: 400; }
.kp-zgl-req { color: var(--status-urgent); }

/* ── Chipsy typu zgłoszenia ─────────────────────────────────── */

/* Kontrolki, nie kategorie: powierzchnia zostaje neutralna, a wybór
   niesie akcent kontrolek funkcjonalnych. Wypełnienie barwą jest w DS
   zarezerwowane dla przedmiotów i skali ocen — a kolor i tak kodowałby
   tu priorytet, którego zgłaszający nie ustawia. */
.kp-zgl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.kp-zgl-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-chip);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.kp-zgl-chip:hover { border-color: var(--divider); }

.kp-zgl-chip:has(input:checked) {
  background: var(--blue-600);
  border-color: transparent;
  color: var(--on-overlay);
}

/* Pole radiowe jest `.sr-only`, więc obrys fokusu musi przejąć etykieta —
   inaczej nawigacja klawiaturą po grupie jest niewidoczna. */
.kp-zgl-chip:focus-within {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

/* ── Opis ───────────────────────────────────────────────────── */

.kp-zgl-textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.45;
}

/* ── Zrzut ekranu ───────────────────────────────────────────── */

.kp-zgl-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px dashed var(--divider);
  border-radius: var(--r-card);
  background: var(--paper);
  text-align: center;
  transition: border-color .12s ease, background-color .12s ease;
}

.kp-zgl-drop.is-dragover {
  border-color: var(--blue-600);
  border-style: solid;
  background: color-mix(in srgb, var(--blue-600) 6%, var(--surface));
}

.kp-zgl-file {
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
}

.kp-zgl-drop-hint {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

.kp-zgl-kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--r-chip);
  background: var(--surface);
  color: var(--ink-2);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.kp-btn.kp-zgl-paste { font-size: 12px; }

.kp-zgl-preview {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--sp-3);
}

.kp-zgl-preview img {
  display: block;
  max-height: 140px;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.kp-zgl-preview-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink-3);
  color: var(--on-overlay);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

/* ── Komunikat zwrotny ──────────────────────────────────────── */

.kp-zgl-feedback {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-card);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
}

.kp-zgl-feedback--ok {
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
}

.kp-zgl-feedback--warn {
  background: var(--status-warning-bg);
  color: var(--status-warning-ink);
}

.kp-zgl-feedback--error {
  background: var(--status-urgent-bg);
  color: var(--status-urgent);
}

/* ── Stopka ─────────────────────────────────────────────────── */

.kp-zgl-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--border);
}

.kp-zgl-foot-actions {
  margin-left: auto;
  display: flex;
  gap: var(--sp-2);
}

.kp-zgl-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-600);
  text-decoration: none;
}

.kp-zgl-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .kp-zgl-foot { flex-wrap: wrap; }
  .kp-zgl-foot-actions { width: 100%; }
  .kp-zgl-foot-actions .kp-btn { flex: 1; justify-content: center; }
}