/* Paleta z pliku logo NSP MOST (skill design §8) */
:root {
  --zielen: #7DAC56; --zielen-ciemna: #5f8c3c;
  --granat: #0C3F73; --zolty: #FBAE1A; --blekit: #BFD9F2; --krem: #F4F1E6;
  --karta: #FFFFFF; --linia: #E3DDCB; --szary: #5F6B78; --czerwien: #B3412E;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--krem); color: var(--granat); font: 16px/1.55 "Lato", "Nunito Sans", system-ui, sans-serif; }
h1, h2, h3, .nazwa, .gora-tytul, .przycisk, .kafel strong { font-family: "Montserrat", "Nunito Sans", sans-serif; }
h1 { font-size: 26px; margin: 0 0 13px; font-weight: 800; }
h2 { font-size: 18px; margin: 0 0 13px; font-weight: 700; }
h3 { font-size: 15px; margin: 21px 0 8px; }
a { color: var(--granat); }

.pasek-testowy { background: var(--zolty); color: var(--granat); text-align: center; font-size: 14px; padding: 5px 13px; }
.pasek-testowy a { font-weight: 700; margin-left: 8px; }
.gora { display: flex; align-items: center; gap: 21px; padding: 13px 21px; background: var(--karta); border-bottom: 3px solid var(--zielen); }
.logo img { height: 55px; display: block; }
.gora-tytul { font-weight: 700; font-size: 18px; flex: 1; }
.kto { text-align: right; font-size: 14px; }
.menu { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 21px; background: var(--granat); }
.menu a { color: #fff; text-decoration: none; padding: 8px 13px; border-radius: 21px; font-size: 15px; }
.menu a:hover { background: rgba(255,255,255,.13); }
.menu a.aktywne { background: var(--zielen); }
main { max-width: 1100px; margin: 0 auto; padding: 21px 16px 55px; }
footer { text-align: center; font-size: 13px; color: var(--szary); padding: 21px; }

.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 13px; padding: 21px; margin-bottom: 13px; }
.waska { max-width: 560px; margin-left: auto; margin-right: auto; }
.naglowek-strony { display: flex; align-items: center; justify-content: space-between; gap: 13px; flex-wrap: wrap; margin-bottom: 13px; }
.naglowek-strony h1 { margin: 0; }
.licznik { background: var(--zolty); border-radius: 21px; padding: 0 13px; font-size: 18px; vertical-align: middle; }

.przycisk { display: inline-block; border: 0; border-radius: 34px; background: var(--zielen); color: #fff; font-weight: 700;
  font-size: 15px; padding: 10px 21px; cursor: pointer; text-decoration: none; }
.przycisk:hover { background: var(--zielen-ciemna); }
.przycisk.jasny { background: #fff; color: var(--granat); border: 2px solid var(--granat); }
.przycisk.jasny:hover { background: var(--blekit); }
.przycisk.maly { font-size: 13px; padding: 5px 13px; }

label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 13px; }
input, select, textarea { display: block; width: 100%; margin-top: 5px; font: inherit; color: var(--granat); padding: 10px 12px;
  border: 1px solid #cfc7b0; border-radius: 8px; background: #fff; font-weight: 400; }
::placeholder { color: #9aa3ad; font-weight: 400; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--blekit); border-color: var(--granat); }
.dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.check { display: inline-flex; align-items: center; gap: 5px; margin-right: 13px; font-weight: 400; }
.check input { width: auto; margin: 0; }

.komunikat { background: #EAF3E1; border-left: 5px solid var(--zielen); padding: 10px 13px; border-radius: 8px; margin-bottom: 13px; word-break: break-all; }
.komunikat.blad { background: #FBEAE6; border-color: var(--czerwien); }
.pusto { color: var(--szary); text-align: center; padding: 21px; }
.meta { color: var(--szary); font-size: 14px; }

.karta-naglowek { display: flex; justify-content: space-between; gap: 13px; align-items: flex-start; }
.nazwa { font-weight: 700; font-size: 17px; }
.szczegoly { display: flex; flex-wrap: wrap; gap: 8px 21px; margin: 13px 0 0; }
.szczegoly dt { font-size: 12px; color: var(--szary); text-transform: uppercase; letter-spacing: .03em; }
.szczegoly dd { margin: 0; }
.uwagi { background: var(--krem); padding: 8px 13px; border-radius: 8px; margin: 13px 0 0; }
.uwagi.blad { background: #FBEAE6; }

.status { display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 11px; border-radius: 21px; white-space: nowrap; }
.s-nowe { background: #FFF1D3; color: #8a5a00; }
.s-zatwierdzone { background: var(--blekit); color: var(--granat); }
.s-zrealizowane { background: #E1EFD5; color: #3d6a1f; }
.s-odrzucone { background: #FBEAE6; color: var(--czerwien); }
.s-anulowane { background: #ECECEC; color: #666; }

.decyzja, .realizacja { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 13px; padding-top: 13px; border-top: 1px dashed var(--linia); }
.decyzja input { flex: 1; min-width: 200px; margin: 0; }
.realizacja label { flex: 1; min-width: 150px; margin: 0; }

.lista-osob { display: grid; gap: 8px; }
.osoba { width: 100%; text-align: left; background: var(--krem); border: 1px solid var(--linia); border-radius: 8px; padding: 10px 13px;
  cursor: pointer; font: inherit; color: var(--granat); display: flex; justify-content: space-between; gap: 8px; }
.osoba:hover { border-color: var(--zielen); background: #EAF3E1; }
.osoba span { color: var(--szary); font-size: 14px; }

.filtry { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; }
.filtry a { text-decoration: none; background: #fff; border: 1px solid var(--linia); border-radius: 21px; padding: 5px 13px; font-size: 14px; }
.filtry a.aktywne { background: var(--granat); color: #fff; border-color: var(--granat); }
.tabela-owijka { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--szary); border-bottom: 2px solid var(--linia); padding: 8px; }
.tabela td { border-bottom: 1px solid var(--linia); padding: 8px; vertical-align: top; }
.tabela tfoot td { font-weight: 800; border-top: 2px solid var(--granat); }
.tabela .liczba { text-align: right; white-space: nowrap; }
.tabela td:first-child { white-space: nowrap; }
.wylaczone { opacity: .5; }
.pasek-kol { width: 34%; }
.pasek { display: block; height: 13px; background: var(--zielen); border-radius: 5px; min-width: 3px; }

.okres { display: flex; flex-wrap: wrap; gap: 13px; align-items: flex-end; }
.okres label { margin: 0; }
.kafle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 13px; }
.kafel { background: var(--granat); color: #fff; border-radius: 13px; padding: 13px 21px; }
.kafel span { display: block; font-size: 13px; opacity: .85; }
.kafel strong { font-size: 22px; }
.kafel:first-child { background: var(--zielen); }
.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; }
.tresc-maila { white-space: pre-wrap; font: 14px/1.5 "Lato", sans-serif; background: var(--krem); padding: 8px 13px; border-radius: 8px; word-break: break-all; }

@media (max-width: 760px) {
  .gora { padding: 8px 16px; gap: 13px; }
  .logo img { height: 40px; }
  .gora-tytul { font-size: 15px; }
  .dwie, .kafle, .dwie-kolumny { grid-template-columns: 1fr; }
  .menu { padding: 8px 16px; }
  .karta { padding: 16px; }
  .karta-naglowek { flex-direction: column; }
}