/* Panel wycen: jeden plik, bez preprocesora, bez zasobow zewnetrznych (CSP 'self').
   Tokeny i decyzje: docs/panel/projekt-panelu.md, sekcja 2. */

:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ground: #F4F5F7; --surface: #FFFFFF; --ink: #182129; --ink-2: #55616C;
  --rule: #D9DEE4; --rule-strong: #182129; --field: #6B7680;
  --accent: #0B6E63; --accent-hover: #095A51; --accent-soft: #E3F3F0;
  --warn-bg: #FFF1CC; --warn-text: #5C4100; --warn-solid: #9A6500;
  --bad-bg: #FCE8E8; --bad-text: #8A1C1C; --bad-solid: #B42318;
  --ok-bg: #E1F2E7; --ok-text: #1B5E33; --info-bg: #E4EDF8; --info-text: #1F4E86;
  --neutral-bg: #EAEDF1; --neutral-text: #3B4652;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.5;
  color: var(--ink); background: var(--ground); overflow-wrap: anywhere;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 8px; }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.125rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; margin-top: 16px; }
p { margin: 0 0 8px; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* naglowek */

.naglowek { background: var(--surface); border-bottom: 2px solid var(--rule-strong); }

.naglowek-tresc {
  max-width: 1200px; margin: 0 auto; min-height: 56px; padding: 0 16px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}

.firma { font-size: 1.125rem; font-weight: 700; color: var(--ink); text-decoration: none; }

.nawigacja { display: flex; gap: 16px; }
.nawigacja a { color: var(--ink); text-decoration: none; padding: 16px 0; border-bottom: 2px solid transparent; }
.nawigacja a.aktywna { font-weight: 600; border-bottom-color: var(--accent); }

.stan { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.stan-skrzynki.uwaga { color: var(--warn-solid); font-weight: 600; }
.stan-skrzynki.zle { color: var(--bad-solid); font-weight: 600; }

.wyloguj-form { margin: 0; }
.jak-link {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* miernik */

.meter { width: 100%; height: 3px; background: var(--accent-soft); }
.meter-duzy { height: 8px; border-radius: 2px; overflow: hidden; margin: 8px 0; }
.meter-fill { height: 100%; background: var(--accent); }
.meter-fill.uwaga { background: var(--warn-solid); }
.meter-fill.zle { background: var(--bad-solid); }

/* Szerokosci klasami, bo CSP bez 'unsafe-inline' blokuje style="" (PanelMiernik). */
.w0 { width: 0; } .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; }
.w25 { width: 25%; } .w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; }
.w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; }
.w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; }
.w100, .szeroki { width: 100%; }

/* Tekst drugorzedny (14 px, --ink-2) jedna regula zamiast jedenastu takich samych. */
.drobne, .stan, .stan-bloku, .lista-naglowek, .dzien h2, .meta, .definicje dt, .tabela thead th,
.etykieta-wbudowana, .kafel .etykieta, .wiodaca .etykieta { font-size: 0.875rem; color: var(--ink-2); }
.kol-godzina, .pod-liczba, .pusto, .pusto-drobne { color: var(--ink-2); }

/* tresc, banery */

.tresc { max-width: 1200px; margin: 0 auto; padding: 16px; }

/* Ramka = currentColor, wiec wariant niesie tylko pare tlo/tekst (wspolna ze stemplem). */
.baner { padding: 16px; margin-bottom: 16px; border: 1px solid currentColor; border-radius: 2px; }
.baner.ok { background: var(--ok-bg); color: var(--ok-text); }

.tytul-listy { margin-bottom: 16px; }

/* filtry */

.filtry { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }

.segment { display: flex; border: 1px solid var(--rule); border-radius: 2px; background: var(--surface); }
.segment a {
  padding: 10px 12px; color: var(--ink); text-decoration: none; min-height: 44px;
  display: flex; align-items: center; transition: background-color 150ms ease;
}
.segment a + a { border-left: 1px solid var(--rule); }
.segment a.aktywny { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.filtr-status { display: flex; gap: 8px; align-items: center; margin: 0; }
.etykieta-wbudowana { font-weight: 600; }

/* Element, nie [type="password"]: atrybut bil klase i .pole-blad przegrywal (QA 07.09). */
select, input, textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--field); border-radius: 4px; padding: 8px 10px; min-height: 44px;
}
textarea { min-height: 5rem; width: 100%; max-width: 40rem; }
select:focus, input:focus, textarea:focus { border: 2px solid var(--accent); }
.pole-blad { border-color: var(--bad-solid); }

.przycisk-glowny, .przycisk-drugi {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: 2px; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background-color 150ms ease;
}
.przycisk-glowny { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.przycisk-glowny:hover { background: var(--accent-hover); color: #fff; }
.przycisk-drugi { background: var(--surface); color: var(--ink); border: 1px solid var(--field); font-weight: 400; }
.przycisk-drugi:hover { background: var(--ground); color: var(--ink); }
.przycisk-glowny:active, .przycisk-drugi:active { transform: scale(0.98); transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.przycisk-glowny[disabled], .przycisk-drugi[disabled] {
  background: var(--neutral-bg); color: var(--ink-2); border-color: var(--neutral-bg); cursor: not-allowed;
}

/* lista */

.lista-naglowek, .wiersz > a {
  display: grid; grid-template-columns: 56px 180px 1fr 200px 110px 240px;
  gap: 12px; align-items: center;
}
.lista-naglowek { padding: 8px 12px; font-weight: 600; }

.lista { list-style: none; margin: 0; padding: 0; background: var(--surface); border-top: 1px solid var(--rule); }
.wiersz { border-bottom: 1px solid var(--rule); border-left: 3px solid transparent; }
.wiersz.uwaga { border-left-color: var(--warn-solid); }
.wiersz.uwaga-zle { border-left-color: var(--bad-solid); }
.wiersz > a { padding: 10px 12px; min-height: 44px; color: var(--ink); text-decoration: none; }
.wiersz > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (hover: hover) { .wiersz > a:hover { background: var(--ground); transition: background-color 150ms ease; } }

.kol-godzina { font-variant-numeric: tabular-nums; }
.kol-nadawca { font-weight: 600; }
.kol-temat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kol-netto { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.kol-uwagi { display: flex; flex-wrap: wrap; gap: 4px; }
.do-prawej { text-align: right; }

.dzien { position: sticky; top: 0; background: var(--ground); padding: 8px 12px; }
.dzien h2 { font-weight: 600; margin: 0; }

.stronicowanie { display: flex; gap: 16px; padding: 16px 12px; }
.stronicowanie a { min-height: 44px; display: inline-flex; align-items: center; }

.pusto { background: var(--surface); padding: 48px; text-align: center; border: 1px solid var(--rule); }
.uwaga-drobna { font-size: 0.8125rem; padding: 0 12px; }

/* stemple */

.stempel {
  display: inline-block; font-size: 0.8125rem; font-weight: 600;
  padding: 2px 6px; border-radius: 2px; white-space: nowrap;
}
.baner.zle, .stempel.zle, .blok-blad { background: var(--bad-bg); color: var(--bad-text); }
.baner.uwaga, .stempel.uwaga, .blok-uwaga { background: var(--warn-bg); color: var(--warn-text); }
.stempel.info { background: var(--info-bg); color: var(--info-text); }
.stempel.neutralny { background: var(--neutral-bg); color: var(--neutral-text); }

/* szczegol */

.powrot { margin-bottom: 8px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 24px; }

.sciezka { display: flex; flex-direction: column; gap: 24px; }

.blok { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }
.blok-tresc { background: var(--surface); border: 1px solid var(--rule); padding: 16px; }
.znacznik { position: relative; border-left: 2px solid var(--rule); }
.znacznik::before {
  content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--field);
}
.znacznik.zrobione::before { background: var(--accent); border-color: var(--accent); }
.znacznik.blad::before { background: var(--bad-solid); border-color: var(--bad-solid); border-radius: 0; }

.blok-blad, .blok-uwaga { padding: 8px 12px; border-radius: 2px; }
.stopka-bloku { font-size: 0.8125rem; color: var(--ink-2); margin-top: 16px; }
.podsumowanie { font-size: 1rem; }
.wynik-wyceny { font-size: 1.25rem; font-weight: 600; }

.proza {
  font-family: var(--font); font-size: 1rem; white-space: pre-wrap; max-width: 72ch;
  margin: 8px 0; background: var(--ground); padding: 12px; border-radius: 2px;
}

.lista-prosta, .lista-numerowana { margin: 8px 0; padding-left: 20px; }
.lista-prosta { list-style: disc; }
.definicje { margin: 8px 0; }

.definicje dd { margin: 0 0 8px; }

/* tabele */

.tabela { width: 100%; border-collapse: collapse; margin: 16px 0; }
.tabela caption { text-align: left; font-size: 1rem; font-weight: 600; padding-bottom: 8px; }
.tabela th, .tabela td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--rule); font-weight: 400; }
.tabela thead th { font-weight: 600; }
.tabela .liczba { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tfoot .suma th, .tabela tfoot .suma td { border-top: 2px solid var(--rule-strong); font-weight: 600; }
.tabela .ostrzezenie th { color: var(--warn-text); }
.wiersz-bledu td { color: var(--bad-text); }

.udzial { display: flex; align-items: center; gap: 8px; }
.pasek { display: inline-block; height: 8px; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 2px; }

/* dzialania */

.dzialania { margin-top: 32px; }
.przyciski { display: flex; flex-wrap: wrap; gap: 16px; }
.przycisk-akcji { max-width: 18rem; }
.przycisk-akcji p { margin-top: 4px; }

.potwierdzenie { border: 1px solid var(--rule-strong); border-radius: 6px; padding: 16px; background: var(--surface); max-width: 40rem; }
.potwierdzenie h3 { font-size: 1.125rem; margin-top: 0; }
.anuluj { margin-left: 16px; }

.historia { list-style: none; padding: 0; margin: 16px 0 0; }
.historia li { border-bottom: 1px solid var(--rule); padding: 8px 0; }

/* koszty */

.wiodaca { margin: 24px 0; }
.liczba-wiodaca { font-size: 2rem; font-weight: 600; line-height: 1.1; margin: 0; }

.kafle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); margin: 24px 0; }
.kafel { background: var(--ground); padding: 16px; }
.kafel .etykieta, .wiodaca .etykieta { margin: 0; }
.kafel .wartosc { font-size: 1.5rem; font-weight: 600; margin: 0; }

.budzet { margin: 24px 0; }
.budzet h2 { font-size: 1.125rem; }

.tabele { display: grid; grid-template-columns: 1fr; gap: 24px; }
.podpis { margin-top: -8px; }

/* logowanie i bledy */

body.gosc { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.logowanie, .strona-bledu { width: 100%; max-width: 360px; }
.strona-bledu { max-width: 40rem; }
.panel-logowania { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 24px; }
.firma-duza { font-size: 1.5rem; font-weight: 700; margin-bottom: 0; }
.podtytul { color: var(--ink-2); margin-bottom: 24px; }
.panel-logowania label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; }
.panel-logowania input { width: 100%; margin-bottom: 8px; }
.blad-pola { font-size: 0.875rem; color: var(--bad-text); }

/* progi. Siatka wiersza listy (sekcja 3.2), ponizej 960 px rozpisana JAWNIE, bo przy
   automatycznej temat szedl do kolumny wyniku, a netto do kolumny godziny (QA 07.09):
   >= 960  56 | 180 | 1fr | 200 | 110 | 240; jeden wiersz: godzina, nadawca, temat, wynik,
           netto (do prawej), uwagi.
   640-959 56 | 1fr | 200 | 110; wiersz 1: godzina, nadawca, wynik, netto; kolumna 2 ma
           jeszcze temat (14 px) w wierszu 2 i stemple w wierszu 3.
   < 640   1fr | auto; wiersz 1: godzina i netto, dalej nadawca, temat i uwagi na calosc. */

@media (max-width: 959px) { .lista-naglowek { display: none; } }

@media (min-width: 640px) and (max-width: 959px) {
  .wiersz > a { grid-template-columns: 56px 1fr 200px 110px; align-items: start; }
  .kol-godzina { grid-area: 1 / 1; } .kol-nadawca { grid-area: 1 / 2; }
  .kol-wynik { grid-area: 1 / 3; } .kol-netto { grid-area: 1 / 4; }
  .kol-temat { grid-area: 2 / 2; font-size: 0.875rem; color: var(--ink-2); }
  .kol-uwagi { grid-area: 3 / 2; }
}

@media (max-width: 639px) {
  .naglowek-tresc { padding: 8px 16px; }
  .stan { margin-left: 0; width: 100%; }
  /* Tresc zachowuje boczne 16 px; od krawedzi do krawedzi idzie tylko ksiega zlecen. */
  .lista, .dzien { margin-left: -16px; margin-right: -16px; }
  .tytul-szczegolu { font-size: 1.25rem; }
  .wiersz > a { grid-template-columns: 1fr auto; padding: 12px 16px; }
  .kol-godzina { grid-area: 1 / 1; } .kol-netto { grid-area: 1 / 2; }
  .kol-nadawca, .kol-temat, .kol-wynik, .kol-uwagi { grid-column: 1 / 3; }
  .kol-temat { white-space: normal; }
  .kafle { grid-template-columns: 1fr; }
  .przyciski { flex-direction: column; }
  .przycisk-akcji, .przycisk-akcji .przycisk-drugi { max-width: none; width: 100%; }
  .liczba-wiodaca { font-size: 2rem; }
  /* Tabele "zwin" (parametry, pozycje, koszty) jako listy definicji: data-label nad
     wartoscia. Bez tego naglowki lamaly sie na sylaby (QA 07.09.2026). */
  .zwin thead { display: none; }
  .zwin tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .zwin th, .zwin td { display: block; border-bottom: 0; padding: 2px 0; }
  .zwin td[data-label]::before { content: attr(data-label); display: block; color: var(--ink-2); font-size: 0.875rem; }
}

@media (min-width: 960px) {
  .tresc, .naglowek-tresc { padding-left: 24px; padding-right: 24px; }
  .blok { grid-template-columns: 24px 1fr; gap: 16px; }
  .sciezka { gap: 32px; }
  .kafle { grid-template-columns: repeat(4, 1fr); }
  .tabele { grid-template-columns: 1fr 1fr; }
  .tabele .szeroka { grid-column: 1 / 3; }
  .liczba-wiodaca { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
  .przycisk-glowny:active, .przycisk-drugi:active { transform: none; }
}