/* Wygląd w kolorach Perfect Look Clinic - 1:1 jak Panel PLC (panel.janeccy.pl, marka.css z 29.09).
   Doładowywany PO stylach strony: usunięcie <link> w nagłówku przywraca poprzedni wygląd.
   Logika i rozmiary przycisków / wierszy bez zmian. Bez gradientów i cieni.
   Fonty: Marcellus (znak, H1), tekst: Biko docelowo - do czasu pliku Montserrat. */
:root {
  --tlo: #F6FAFA; --karta: #FFFFFF; --tekst: #0E3A4A; --szary: #5E7F8B;
  --linia: #DCE7E8; --linia-2: #E8F0F1;
  --akcent: #0E3A4A; --akcent-ciemny: #2E8C91;
  --turkus: #4DB6BA; --turkus-tlo: #E4F4F4; --turkus-linia: #BFE3E4;
  --ok: #2E8C63; --blad: #B23A2F;
  --font-marka: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;   /* 1.10: Montserrat u wszystkich (Biko mają tylko niektóre komputery - wyglądałoby różnie) */
  --font-znak: "Marcellus", Georgia, serif;
}
body { font-family: var(--font-marka); font-size: 15px; background: var(--tlo); color: var(--tekst); }
button, select, input, textarea { font-family: inherit; }
select, input, textarea { color: var(--tekst); }
.wrap > section { margin-top: 18px; }
h1 { font-family: var(--font-znak); font-weight: 400; letter-spacing: .03em; font-size: 30px; line-height: 1.2; margin: 0 0 4px; color: var(--tekst); }
a { color: var(--akcent-ciemny); }
.podtytul, .info, label, .pusto { color: var(--szary); }

/* Pasek menu: biały, turkusowa linia 2px, aktywna zakładka turkusowa z podkreśleniem. */
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; background: #fff; color: var(--tekst);
  border-bottom: 2px solid var(--turkus); padding: 12px 24px; }
.nav-brand { font-family: var(--font-znak); font-weight: 400; letter-spacing: .32em; font-size: 15px; line-height: 1.1; margin-right: 18px; color: var(--tekst); white-space: nowrap; }
.nav-brand small { display: block; font-size: 9px; letter-spacing: .45em; color: var(--turkus); margin-top: 2px; }
.nav .zakladki { display: flex; flex-wrap: wrap; gap: 6px 20px; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; overflow: visible; }
.nav .zakladka, .nav a.nav-link { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 4px 0; margin: 0;
  font-size: 14px; font-weight: 400; color: var(--tekst); opacity: 1; text-decoration: none; white-space: nowrap; }
.nav .zakladka:hover:not(:disabled), .nav a.nav-link:hover { background: none; color: var(--akcent-ciemny); border-color: transparent; }
.nav .zakladka.aktywna, .nav .zakladka.aktywna:hover:not(:disabled), .nav a.nav-link.aktywna {
  background: none; color: var(--turkus); border-bottom-color: var(--turkus); font-weight: 400; }
.nav a.nav-zewnetrzny { color: var(--turkus); font-size: 14px; text-decoration: none; padding: 4px 0; white-space: nowrap; }
.nav a.nav-zewnetrzny:hover { color: var(--akcent-ciemny); }
.nav-prawa { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nav-prawa span { color: var(--szary); font-size: 14px; }
.nav-prawa select { height: 32px; width: auto; font-weight: 500; font-size: 14px; padding: 0 30px 0 12px; border-radius: 999px; }
.nav-prawa button, .nav-prawa a.przycisk-gora { display: inline-flex; align-items: center; height: auto; background: #fff; color: var(--tekst);
  border: 1px solid var(--linia); border-radius: 999px; padding: 5px 14px; font-size: 14px; font-weight: 400; text-decoration: none; }
.nav-prawa button:hover:not(:disabled), .nav-prawa a.przycisk-gora:hover { border-color: var(--turkus); color: var(--akcent-ciemny); background: #fff; }
.naglowek-strony { margin: 4px 0 2px; }

/* Zakładki wewnątrz strony (Ustawienia): pigułki, aktywna granatowa. */
.wrap .zakladki { background: none; border: 0; border-radius: 0; padding: 0; gap: 8px; margin: 14px 0 18px; }
.wrap .zakladki .zakladka { background: #fff; color: var(--tekst); border: 1px solid var(--linia); border-radius: 999px; opacity: 1; margin: 0; font-weight: 400; }
.wrap .zakladki .zakladka:hover:not(:disabled) { background: var(--turkus-tlo); }
.wrap .zakladki .zakladka.aktywna, .wrap .zakladki .zakladka.aktywna:hover:not(:disabled) { background: var(--akcent); color: #fff; border-color: var(--akcent); font-weight: 400; }

/* Przyciski: granat, pigułki; drugorzędne białe z obrysem. Rozmiary bez zmian. */
button { background: var(--akcent); border-color: var(--akcent); border-radius: 999px; font-weight: 500; }
button:hover:not(:disabled) { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); }
button.cichy { background: #fff; color: var(--tekst); border-color: var(--linia); }
button.cichy:hover:not(:disabled) { background: var(--turkus-tlo); border-color: var(--linia); }
button.usun, button.btn-usun { background: #fff; color: var(--blad); border: 1px solid #E9C3BE; }
.przelacznik { border-color: var(--linia); border-radius: 10px; }   /* jak pola daty i listy - Filip 1.10 */
.przelacznik button { border-radius: 0; border-right-color: var(--linia); font-weight: 400; }
.przelacznik button:hover:not(:disabled) { background: var(--turkus-tlo); border-right-color: var(--linia); }
.przelacznik button.wl, .przelacznik button.wl:hover:not(:disabled) { background: var(--akcent); color: #fff; }
.grupa:hover:not(:disabled) { border-color: var(--turkus); }
.rodzaj { border-radius: 12px; border-color: var(--linia); }
.rodzaj:hover:not(:disabled) { border-color: var(--turkus); background: #fff; }
.rodzaj.wybrana, .rodzaj.wybrana:hover:not(:disabled) { border-color: var(--turkus); background: var(--turkus-tlo); box-shadow: none; }
.raport .wiecej { border-radius: 0; color: var(--akcent-ciemny); }

/* Karty. */
.karta { border-color: var(--linia); border-radius: 12px; padding: 18px 20px; }
.karta h2 { color: var(--szary); font-weight: 500; }
.kafel, .raport { border-color: var(--linia); border-radius: 12px; }
.kafel .w, .rozl-suma { font-weight: 500; font-variant-numeric: tabular-nums; }
.wersja { border-color: var(--linia); border-radius: 12px; background: #FAFDFD; }
.podglad, .blok-tresci { background: #F1F7F7; border-color: var(--linia); border-radius: 10px; }
.raport .etk, .znaczek { background: var(--turkus-tlo); color: var(--tekst); }
.baner { border-radius: 12px; }
.baner.zamkniete { background: #EEF6F6; border-color: var(--linia); color: var(--szary); }
.baner.gotowe, .sukces { background: #EDF7F2; border-color: #BFE0CF; color: var(--ok); }
.baner.pilne, .blad { background: #FDF4F3; border-color: #E9C3BE; color: var(--blad); }
.pas-symulacji, .ostrzezenie, .uwaga-pomiar { border-radius: 10px; }
.link { background: #F1F7F7; border-color: var(--linia); }

/* Tabele: nagłówek na tle, cieńsze linie, podświetlenie wiersza. */
table { font-variant-numeric: tabular-nums; }
th { background: #EEF6F6; color: var(--szary); font-weight: 500; letter-spacing: .03em; padding: 8px 10px; border-bottom-color: var(--linia-2); }
td { padding: 9px 10px; border-bottom-color: var(--linia-2); }
td.l { padding-right: 14px; }
tbody tr:hover td { background: #FAFDFD; }
thead tr th:first-child { border-radius: 10px 0 0 0; } thead tr th:last-child { border-radius: 0 10px 0 0; }
.grupa-wiersz td, tbody tr:hover .grupa-wiersz td { background: #EEF6F6; color: var(--szary); }
.tab-leady tr.do-sprawdzenia td, .tab-leady tr.do-sprawdzenia:hover td { background: #FDF4F3; color: var(--blad); }
.tab-leady tr.do-sprawdzenia td:first-child { box-shadow: none; border-left: 3px solid var(--blad); }
.tab-leady tr.do-sprawdzenia .zabieg, .tab-leady tr.do-sprawdzenia .tresc-mala { color: var(--blad); }

/* Pola formularzy. */
select, input[type=number], input[type=date], input[type=text], input[type=email], input[type=password], input:not([type]), textarea, .m-oferta input {
  border-color: var(--linia); border-radius: 10px; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--turkus); box-shadow: 0 0 0 3px var(--turkus-tlo); }
input[type=checkbox]:focus { box-shadow: none; }
textarea[readonly] { background: #F1F7F7; color: var(--szary); }
input[type=checkbox] { accent-color: var(--akcent); }

/* Paski i wykresy: turkus. */
.pasek { background: var(--linia-2); } .pasek i, .lejek .pas { background: var(--turkus); }
.wykres .siatka { stroke: var(--linia-2); } .wykres .baza { stroke: var(--linia); }
.dymek { background: var(--tekst); }

/* Logowanie i ustawianie hasła: znak marki nad formularzem. */
.znak-logowania { text-align: center; font-family: var(--font-znak); letter-spacing: .32em; font-size: 20px; color: var(--tekst); margin: 0 0 18px; }
.znak-logowania small { display: block; font-size: 10px; letter-spacing: .5em; color: var(--turkus); margin-top: 4px; }
body.strona-logowania form, body.strona-logowania .karta { border-color: var(--linia); border-radius: 16px; padding: 28px; }
body.strona-logowania h1 { font-size: 22px; margin-bottom: 6px; }
body.strona-logowania input { border-color: var(--linia); border-radius: 10px; }
body.strona-logowania button { border: 0; }

@media (max-width: 760px) {
  .wrap { padding: 16px 12px 48px !important; }
  .nav { gap: 8px 16px; padding: 10px 14px; }
  .nav .zakladki { gap: 4px 16px; }
  h1 { font-size: 26px; }
}

/* Telefon i daty w tabelach w jednej linii. */
td.bz, th.bz { white-space: nowrap; }
td a[href^="tel:"] { color: var(--tekst); text-decoration: none; border-bottom: 1px solid var(--turkus-linia); }

/* Menu w grupach: Analiza / Klientki rozwijają się po kliknięciu. Grupa bez dostępnych pozycji znika. */
.nav .zakladki { align-items: center; }
.nav-grupa { position: relative; }
.nav .nav-grupa-btn { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 4px 0; margin: 0;
  font-size: 14px; font-weight: 400; color: var(--tekst); white-space: nowrap; cursor: pointer; }
.nav .nav-grupa-btn:hover:not(:disabled) { background: none; color: var(--akcent-ciemny); border-color: transparent; }
.nav .nav-grupa-btn .strzalka { font-size: 11px; color: var(--szary); margin-left: 2px; }
.nav-grupa:has(.zakladka.aktywna) > .nav-grupa-btn { color: var(--turkus); border-bottom-color: var(--turkus); }
.nav-grupa:not(:has(.zakladka:not(.ukryte))) { display: none; }
.nav-menu { display: none; position: absolute; top: calc(100% + 8px); left: -14px; z-index: 30; flex-direction: column; gap: 2px;
  min-width: 190px; background: #fff; border: 1px solid var(--linia); border-radius: 12px; padding: 6px; }
.nav-grupa.otwarta .nav-menu { display: flex; }
.nav .nav-menu .zakladka { text-align: left; padding: 8px 12px; border: 0; border-radius: 8px; }
.nav .nav-menu .zakladka:hover:not(:disabled) { background: var(--turkus-tlo); color: var(--tekst); }
.nav .nav-menu .zakladka.aktywna, .nav .nav-menu .zakladka.aktywna:hover:not(:disabled) { color: var(--turkus); background: none; border: 0; }
/* Banery są teraz tylko w zakładce Wysyłka. */
section > .baner { margin: 0 0 16px; }

/* Wybór lokalizacji to filtr treści - stoi przy nagłówku strony, nie w menu (menu mieści się w jednym wierszu). */
.naglowek-strony { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.naglowek-strony select { width: auto; min-width: 210px; font-weight: 500; }
.wrap > section { margin-top: 0; }

button.usun:hover:not(:disabled), button.btn-usun:hover:not(:disabled) { background: #FDF4F3; border-color: #E9C3BE; color: var(--blad); }