/* SPARK Loty — wspolny arkusz. Bez frameworka, mobile-first, z trybem ciemnym.
   Zadnych stylow w szablonach: CSP dopuszcza wylacznie pliki z 'self'. */

:root {
  --tlo: #f6f6f3;
  --karta: #ffffff;
  --tekst: #1b1b1b;
  --przygaszony: #595959;
  --ramka: #d6d6d0;
  --akcent: #0a58e6;
  --akcent-tekst: #ffffff;
  --ok-tlo: #e6f5eb;
  --ok: #145c2c;
  --blad-tlo: #fdecec;
  --blad: #8a1c1c;
  --uwaga-tlo: #fff5dc;
  --uwaga: #614300;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #121314;
    --karta: #1c1d20;
    --tekst: #ececec;
    --przygaszony: #a9a9a9;
    --ramka: #36383c;
    --akcent: #7aa7ff;
    --akcent-tekst: #0b0b0b;
    --ok-tlo: #12301c;
    --ok: #9fe0b2;
    --blad-tlo: #3a1717;
    --blad: #ffb4b4;
    --uwaga-tlo: #3a2e10;
    --uwaga: #ffd98a;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: var(--tlo);
  color: var(--tekst);
}

a { color: var(--akcent); }

/* ------------------------------------------------------------ naglowek */

.naglowek { background: var(--karta); border-bottom: 1px solid var(--ramka); }

.naglowek-wnetrze {
  max-width: 52rem;
  margin: 0 auto;
  padding: .75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}

.logo { font-weight: 700; color: var(--tekst); text-decoration: none; margin-right: auto; }

nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
nav a { text-decoration: none; padding: .35rem 0; }
nav a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }

.wyloguj { display: inline; margin: 0; }

/* ------------------------------------------------------------ tresc */

main { max-width: 52rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.karta h2:first-child { margin-top: 0; }
p { margin: 0 0 1rem; }

.przygaszony { color: var(--przygaszony); }
.waska { max-width: 26rem; margin: 0 auto; }

.karta {
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.kafelki { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.kafelki .karta { margin: 0; }
a.karta { display: block; text-decoration: none; color: var(--tekst); }
a.karta h2 { color: var(--akcent); margin: 0 0 .25rem; }

footer { max-width: 52rem; margin: 0 auto; padding: 0 1rem 2rem; font-size: .8rem; color: var(--przygaszony); }

/* ------------------------------------------------------------ formularze */

.pole { margin-bottom: 1rem; }
label { display: block; font-weight: 600; margin-bottom: .25rem; }

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  font: inherit;
  padding: .6rem .7rem;
  border: 1px solid var(--ramka);
  border-radius: .4rem;
  background: var(--tlo);
  color: var(--tekst);
}

input[readonly] { color: var(--przygaszony); }

button {
  font: inherit;
  cursor: pointer;
  border-radius: .4rem;
  padding: .55rem 1rem;
  border: 1px solid var(--akcent);
  background: var(--akcent);
  color: var(--akcent-tekst);
}

button.drugorzedny { background: transparent; color: var(--akcent); }
button.niebezpieczny { background: transparent; color: var(--blad); border-color: var(--blad); }
button.jak-link { background: none; border: none; padding: .35rem 0; color: var(--akcent); }
button[disabled] { opacity: .6; cursor: progress; }

input:focus-visible,
button:focus-visible,
a:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }

.podpowiedz { font-size: .875rem; color: var(--przygaszony); margin: .25rem 0 0; }

/* ------------------------------------------------------------ komunikaty */

.komunikat { border-radius: .4rem; padding: .75rem 1rem; margin-bottom: 1rem; }
.komunikat.ok { background: var(--ok-tlo); color: var(--ok); }
.komunikat.blad { background: var(--blad-tlo); color: var(--blad); }
.komunikat.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }

/* ------------------------------------------------------------ panel */

.zakladki { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--ramka); margin-bottom: 1rem; }
.zakladki a { padding: .5rem 0; text-decoration: none; }
.zakladki a[aria-current="page"] { font-weight: 600; border-bottom: 2px solid var(--akcent); }

.lista { list-style: none; padding: 0; margin: 0; }
.lista > li {
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: .5rem;
  padding: .75rem 1rem;
  margin-bottom: .75rem;
}

.wiersz-tytul { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; overflow-wrap: anywhere; }

.znaczek {
  font-size: .75rem;
  font-weight: 600;
  padding: .05rem .5rem;
  border-radius: 1rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.znaczek.ok { color: var(--ok); }
.znaczek.blad { color: var(--blad); }
.znaczek.uwaga { color: var(--uwaga); }
.znaczek.neutralny { color: var(--przygaszony); }

.szczegoly { font-size: .875rem; color: var(--przygaszony); margin: .25rem 0 .5rem; }

.akcje { display: flex; flex-wrap: wrap; gap: .5rem; }
.akcje form { margin: 0; }

.link-do-skopiowania { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.link-do-skopiowania input {
  flex: 1 1 14rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .85rem;
}

/* przycisk kopiowania dziala tylko ze skryptem; bez niego zostaje pole */
html:not(.js) .tylko-js { display: none; }

/* HTMX bez wlasnych stylow wskaznika (CSP), wiec wskaznik jest tutaj */
.htmx-request button { opacity: .6; }

/* ------------------------------------------------------------ wyszukiwanie */

input[type="date"],
input[type="number"],
select {
  width: 100%;
  font: inherit;
  padding: .55rem .6rem;
  border: 1px solid var(--ramka);
  border-radius: .4rem;
  background: var(--tlo);
  color: var(--tekst);
  min-height: 2.6rem;
}

input[aria-invalid="true"] { border-color: var(--blad); }
.blad-pola { color: var(--blad); font-size: .875rem; margin: .25rem 0 0; }

fieldset { border: 1px solid var(--ramka); border-radius: .5rem; margin: 0 0 1rem; padding: .75rem 1rem 0; min-width: 0; }
legend { font-weight: 600; padding: 0 .35rem; }

.dwie-kolumny { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .dwie-kolumny { grid-template-columns: 1fr 1fr; } }

.wybory { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-bottom: .75rem; }
label.wybor { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; margin-bottom: .75rem; }
label.wybor input { margin-top: .3rem; flex: none; width: 1.1rem; height: 1.1rem; }
.pole-wyboru { display: flex; align-items: flex-end; }

/* pola podrozy w obie strony tylko przy wybranym typie; bez :has() widac wszystkie */
.formularz-szukaj:has(#typ-jedna:checked) .tylko-obie { display: none; }
.formularz-szukaj:has(#tryb-noce:checked) .tylko-daty { display: none; }
.formularz-szukaj:has(#tryb-daty:checked) .tylko-noce { display: none; }

.koszt { border-top: 1px solid var(--ramka); margin-top: 1rem; padding-top: .5rem; }

dl.pary { display: grid; grid-template-columns: 1fr; gap: .15rem 1rem; margin: 0 0 1rem; }
dl.pary dt { font-weight: 600; }
dl.pary dd { margin: 0 0 .5rem; overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  dl.pary { grid-template-columns: max-content 1fr; }
  dl.pary dd { margin: 0; }
}

.opis-zapytania { font-weight: 600; overflow-wrap: anywhere; }
.zrodla { list-style: none; padding: 0; margin: 0 0 1rem; }
.zrodla li { margin-bottom: .5rem; overflow-wrap: anywhere; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.komunikat ul { margin: .25rem 0 0; padding-left: 1.25rem; }

.filtry { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin-bottom: 1rem; }
.filtry label { font-weight: 400; margin: 0; }
.filtry select { width: auto; max-width: 100%; display: block; margin-top: .25rem; }
.filtry label.wybor { margin: 0 0 .5rem; }
html.js .bez-js { display: none; }

.przewijanie { overflow-x: auto; }
.tabela-ofert { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--karta); }
.tabela-ofert caption { text-align: left; color: var(--przygaszony); padding: .25rem 0 .5rem; }
.tabela-ofert th, .tabela-ofert td { text-align: left; vertical-align: top; padding: .5rem; border-bottom: 1px solid var(--ramka); }
.tabela-ofert thead th { font-size: .8rem; color: var(--przygaszony); white-space: nowrap; }
.tabela-ofert tbody.podroz { border-top: 2px solid var(--ramka); }
.tabela-ofert td strong { white-space: nowrap; }

/* telefon: kazda oferta to karta, etykiety kolumn z data-etykieta */
@media (max-width: 40rem) {
  .tabela-ofert thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-ofert, .tabela-ofert tbody, .tabela-ofert tr, .tabela-ofert td, .tabela-ofert th { display: block; width: 100%; }
  /* podpis w tabeli przelaczonej na bloki: jako table-caption dostalby wlasna,
     anonimowa tabele o szerokosci najdluzszego slowa (slowo w wierszu) */
  .tabela-ofert caption { display: block; width: auto; padding: 0 0 .5rem; }
  .tabela-ofert tr { border: 1px solid var(--ramka); border-radius: .5rem; margin-bottom: .75rem; padding: .25rem 0; }
  .tabela-ofert tbody.podroz { border: 1px solid var(--ramka); border-radius: .5rem; margin-bottom: 1rem; padding: .25rem; }
  .tabela-ofert tbody.podroz tr { border: none; margin: 0; border-top: 1px dashed var(--ramka); }
  .tabela-ofert tbody.podroz tr:first-child { border-top: none; }
  .tabela-ofert th, .tabela-ofert td { border: none; padding: .3rem .75rem; }
  .tabela-ofert [data-etykieta]::before {
    content: attr(data-etykieta);
    display: block;
    font-size: .75rem;
    color: var(--przygaszony);
  }
}

details.karta summary { cursor: pointer; font-weight: 600; }