/* ============================================================================
   23c-ustawienia-poczta.css — USTAWIENIA → POCZTA (e-mail): grupa paneli, edytor szablonów z podglądem, lista wysłanych, okna „Wyślij e-mailem”,
   „Moje konto” (powiadomienia e-mailem) i strona „Ustaw hasło” z linku. Markup: js/poczta/*. Same tokeny (00-tokens.css), progi z kanonu.
   Panel, przełącznik, pole, tabela i pigułka stanu to istniejące klocki (23-ustawienia.css, 11-klocki-wzoru.css, 16-dashboard.css) — tu tylko różnice.
   ============================================================================ */
/* Siatka pól konta: dwie kolumny, pole z klasą .full na całą szerokość; telefon — jedna kolumna (reguła ogólna .settings-form-grid). */
.poczta-siatka { align-items: start; }
.poczta-siatka > .full { grid-column: 1 / -1; }
.poczta-siatka .field { min-width: 0; }
.poczta-siatka textarea { min-height: calc(var(--h-control) * 2); resize: vertical; }
.poczta-form { padding: 0; gap: var(--s-3); }
.poczta-form .pole-klucza input { min-width: 0; }

/* Wynik wiadomości testowej: pusty nie zajmuje miejsca. */
.poczta-wynik:empty { display: none; }

/* --- Edytor szablonów --- */
/* Pola edytora (temat, treść, zmienne, błąd, akcje, podgląd) to dzieci jednego bloku — bez siatki stykały się bez odstępów. */
.poczta-edytor { display: grid; gap: var(--s-3); }
.poczta-jezyki { justify-self: start; max-width: 100%; }
.poczta-jezyki button { min-width: 0; }
.poczta-szablony textarea { min-height: calc(var(--h-control) * 6); font-family: var(--font-mono); font-size: var(--t-sm); line-height: var(--lh-base); resize: vertical; }
.poczta-zmienne-blok { display: grid; gap: var(--s-2); }
.poczta-zmienne { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.poczta-zmienna { font-family: var(--font-mono); font-size: var(--t-xs); }
.poczta-blad { margin: 0; }
.poczta-akcje-szablonu { justify-content: flex-start; gap: var(--s-2); }
.poczta-akcje-szablonu .ui-sp { flex: 1 1 0; min-width: 0; }
.poczta-podglad { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.poczta-podglad-tytul { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
.poczta-podglad-temat { margin: 0; color: var(--text-muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.poczta-ramka { width: 100%; height: 420px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.poczta-tekstowa summary { cursor: pointer; color: var(--text-muted); font-size: var(--t-sm); }
.poczta-tekstowa pre { margin: var(--s-2) 0 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-family: var(--font-mono); font-size: var(--t-xs); line-height: var(--lh-base); white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- Ostatnie wysłane --- */
/* Tabela mieści się w panelu bez przewijania w bok (kolumna „Status” zostawała schowana): komórki zawijają tekst, adres i temat łamią się w dowolnym miejscu. */
.poczta-tabela th, .poczta-tabela td { padding-inline: var(--s-2); white-space: normal; }
.poczta-tabela td.poczta-adres, .poczta-tabela td.poczta-temat { overflow-wrap: anywhere; }
.poczta-tabela td { vertical-align: top; }
/* Kolumna adresu nie kurczy się do kilku znaków (łamało „…589ff3 / d@”): adres mieści się w całości, łamie się dopiero za „@” albo w ostateczności gdziekolwiek. Telefon ma karty — bez tego. */
:root:not([data-ui="mobile"]) .poczta-tabela td.poczta-adres { min-width: 20ch; }
.poczta-blad-tekst { color: var(--danger); }

/* --- Okna „Wyślij e-mailem” (oferta, zamówienie) --- */
.modal.poczta-okno { width: min(560px, 100%); }
.poczta-okno-forma { display: grid; gap: var(--s-3); }
.poczta-okno-opis { margin: 0; }
.poczta-okno-blad { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r); background: var(--danger-soft); color: var(--danger); font-size: var(--t-sm); line-height: var(--lh-base); }
.poczta-okno-forma textarea { min-height: calc(var(--h-control) * 2); resize: vertical; }

/* Opis pod nazwą przełącznika: zwykłą wagą (jak pozostałe podpowiedzi), nazwa zostaje pogrubiona — wspólny wiersz dziedziczył wagę etykiety. */
:is(.poczta-panel, .poczta-moje, .poczta-zaproszenie) .settings-switch-row small { font-weight: var(--w-regular); }

/* Pole adresu z podpowiedziami (datalist): zamiast pełnego trójkąta przeglądarki ta sama strzałka co w listach rozwijanych programu (--strzalka). */
.poczta-okno input[list]::-webkit-calendar-picker-indicator { width: var(--s-4); height: var(--s-4); padding: 0; background: var(--strzalka) no-repeat center / contain; color: transparent; opacity: 1; cursor: pointer; }

/* --- Moje konto: powiadomienia e-mailem --- */
.poczta-moje { display: grid; gap: var(--s-2); }
.poczta-rodzaje { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: 0 var(--s-2); }
.poczta-rodzaj { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); cursor: pointer; }
.poczta-rodzaj:has(input:disabled) { opacity: .55; cursor: not-allowed; }

/* --- Kartoteka Użytkownicy: zaproszenie mailem --- */
.poczta-zaproszenie .settings-switch-row { margin-top: var(--s-1); }

/* --- Strona „Ustaw hasło” z linku --- */
.poczta-link-opis { text-align: left; }
/* Cztery wymagania hasła w dwóch równych kolumnach — przy wąskiej karcie ostatnie zostawało samo w drugim wierszu. */
.poczta-ustaw .haslo-wymagania { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Telefon: panel już ma własny odstęp (.panel-body.settings-form-body); formularz w środku nie dokłada drugiego (reguła telefonu 6-pulpit… ma wyższą swoistość niż .poczta-form). */
:root[data-ui="mobile"] .settings-form-body.poczta-form { padding: 0; }

/* Telefon: lista wysłanych układa się w karty (data-label — wspólna reguła .dash-table), ramka podglądu niższa, przyciski na całą szerokość. */
:root[data-ui="mobile"] .poczta-ramka { height: 320px; }
:root[data-ui="mobile"] .poczta-akcje-szablonu .button { flex: 1 1 100%; }
:root[data-ui="mobile"] .poczta-akcje-szablonu .ui-sp { display: none; }