:root {
  --tlo: #f5f6f8;
  --karta: #ffffff;
  --tekst: #1b2430;
  --brzeg: #dde1e7;
  --akcent: #1e5f8c;
  --akcent-hover: #164a6e;
  --blad: #b3261e;
  --ok: #1e7d40;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--tlo);
  color: var(--tekst);
}
main { max-width: none; margin: 0 auto; padding: 24px 24px 64px; }

/* Sztywny układ kolumn — tabela zawsze mieści się w szerokości okna
   (także w Safari, które ignoruje max-width na komórkach); kolumna bez
   szerokości w <colgroup> bierze resztę miejsca i jest przycinana. */
.tabela-sztywna { table-layout: fixed; width: 100%; }
.tabela-sztywna th, .tabela-sztywna td { overflow: hidden; text-overflow: ellipsis; }
h1 { margin-top: 0; }
.opis { color: #55606e; max-width: 70ch; }

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--akcent);
  color: white;
  padding: 12px 20px;
  flex-wrap: wrap;
}
.nav a { color: white; text-decoration: none; opacity: 0.9; }
.nav a:hover { opacity: 1; text-decoration: underline; }
.nav-brand { font-weight: 700; margin-right: 12px; }
.nav-logout { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-logout button {
  background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.4);
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
}

.karta {
  background: var(--karta);
  border: 1px solid var(--brzeg);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.karta-login { max-width: 360px; margin: 60px auto; }

form label { display: block; margin-bottom: 12px; font-size: 0.9em; }
form input, form select {
  display: block;
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
  border: 1px solid var(--brzeg);
  border-radius: 6px;
  font-size: 1em;
}
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
form.inline input, form.inline select { width: auto; margin: 0; }

form.filtry {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  background: var(--karta);
  border: 1px solid var(--brzeg);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
form.filtry .pole {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
form.filtry label {
  margin: 0;
  font-size: 0.78em;
  color: #55606e;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
form.filtry input, form.filtry select {
  display: block;
  width: auto;
  height: 38px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--brzeg);
  border-radius: 6px;
  font-size: 0.95em;
  font-family: inherit;
  background: #fff;
  color: var(--tekst);
  line-height: 36px;
}
form.filtry select { min-width: 170px; }

button {
  background: var(--akcent);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95em;
}
button:hover { background: var(--akcent-hover); }
button.btn-usun { background: transparent; color: var(--blad); border: 1px solid var(--blad); }
button.btn-usun:hover { background: #fbeceb; }

.tabela { width: 100%; border-collapse: collapse; background: var(--karta); }
.tabela th, .tabela td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--brzeg);
  vertical-align: middle;
  font-size: 0.92em;
  height: 44px;
  white-space: nowrap;
}
.tabela th { background: #eef1f5; }
/* Siatka 2 kolumn: lewa = pole (ile / kto), prawa = pionowa kolumna
   przycisków tej samej szerokości. Bez karnetu samo „Edytuj” ląduje w
   prawej kolumnie, wyśrodkowane w pionie. */
.akcje-wrap {
  display: grid;
  grid-template-columns: auto 64px;
  gap: 4px 6px;
  min-height: 64px;
  align-content: center;
  align-items: center;
  justify-content: end;
}
.akcje-wrap form.inline { display: contents; }
.akcje-wrap .akcja-edytuj { grid-column: 2; }
.akcje-wrap .akcja-mezo { grid-column: 1; justify-self: end; }
.akcje-wrap input, .akcje-wrap select { height: 30px; padding: 0 6px; margin: 0; font-size: 0.85em; }

.btn-akcja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--akcent);
  color: white;
  text-decoration: none;
  font-size: 0.85em;
  cursor: pointer;
  box-sizing: border-box;
}
.btn-akcja:hover { background: var(--akcent-hover); }

.panel-pracownika-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--karta);
  border: 1px solid var(--brzeg);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
}

.dziennik-naglowek {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.dziennik-naglowek h1 { margin-bottom: 4px; }

.przycisk-link {
  display: inline-block;
  background: var(--akcent);
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.95em;
  white-space: nowrap;
}
.przycisk-link:hover { background: var(--akcent-hover); }
.przycisk-link.przycisk-maly { padding: 5px 10px; font-size: 0.85em; }
.przycisk-link.przycisk-drugorzedny {
  background: transparent;
  color: var(--akcent);
  border: 1px solid var(--brzeg);
  margin-left: 8px;
}
.przycisk-link.przycisk-drugorzedny:hover { background: #eef1f5; }

fieldset {
  border: 1px solid var(--brzeg);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 16px;
}
fieldset legend { font-size: 0.85em; color: #55606e; padding: 0 6px; }
label.radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95em;
  margin-bottom: 10px;
}
label.radio input[type="radio"], label.radio input[type="checkbox"] {
  width: auto; display: inline; margin: 0; flex: 0 0 auto;
}
label.radio input[type="number"], label.radio select { width: auto; display: inline; margin: 0; }
label.radio:last-child { margin-bottom: 0; }

/* Zwarte tabele w Ustawieniach — szerokość wg zawartości, bez rozciągania
   na cały monitor; przyciski w jednym rzędzie, w kolumnie wyrównanej. */
.tabela-zwarta { width: auto; min-width: 520px; }
.tabela-zwarta th, .tabela-zwarta td { height: 46px; padding: 6px 14px; }
.akcje-rzad { display: flex; gap: 6px; align-items: center; }
.pola-rzad { display: flex; gap: 6px; align-items: center; }
.pola-rzad input, .pola-rzad select, .pole-male {
  height: 30px; padding: 0 8px; margin: 0; font-size: 0.85em; width: auto; display: inline-block;
}
input.pole-male, form.inline input.pole-male { width: 80px; }
.btn-akcja.btn-akcja-usun { background: transparent; color: var(--blad); border: 1px solid var(--blad); }
.btn-akcja.btn-akcja-usun:hover { background: #fbeceb; }
.karta-zwarta { max-width: 760px; margin-top: 16px; }

/* Zakładki Ustawień: tabela i karta pod nią trzymają tę samą szerokość. */
.sekcja-ust { max-width: 1100px; }
.sekcja-ust .tabela-zwarta { width: 100%; min-width: 0; }
.sekcja-ust .karta, .sekcja-ust .karta-zwarta { max-width: none; }
.wiersz-wyszarzony td { color: #8a939e; }

/* Nagłówek osoby w Rozliczeniach: nazwisko + kwota po lewej, „Szczegóły” po prawej. */
.naglowek-osoby { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.naglowek-osoby h2 { margin: 0 0 10px; }
.btn-akcja.btn-akcja-szeroki { width: auto; padding: 0 14px; }

/* Kolumna kwot — dosunięta do prawej krawędzi tabeli, wąska, bez łamania. */
.tabela td.kwota, .tabela th.kwota { text-align: right; width: 1%; white-space: nowrap; }

/* Historia spalania w wierszu karnetu — drobne linie pod licznikiem rat. */
.tabela td.raty-kom { white-space: normal; line-height: 1.25; }
.spalenie { display: block; font-size: 0.78em; color: #55606e; white-space: nowrap; }
.naglowek-sekcji { margin: 32px 0 8px; font-size: 1.15em; }

/* Podział prowizji 70/30 („zapisała ktoś inny”): mała notka pod nazwiskiem
   w dzienniku, wyraźny czerwony dopisek pod kwotą w rozliczeniu. */
.tabela td.pracownik-kom, .tabela td.typ-kom { white-space: normal; line-height: 1.25; }
.typ-notka { display: block; font-size: 0.78em; color: #55606e; }
.podzial-notka { display: block; font-size: 0.78em; color: var(--blad); white-space: nowrap; }
.podzial-wykonanie { font-weight: 600; }
.podzial-znacznik { color: var(--blad); font-size: 0.85em; font-weight: 600; margin-left: 6px; }
.tabela tr.wiersz-podzial td { color: var(--blad); font-weight: 600; }

.zakladki { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.zakladki .zakladka { background: #eef1f5; color: var(--tekst); }
.zakladki .zakladka.aktywna { background: var(--akcent); color: white; }
.ukryte { display: none; }
.siatka-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.siatka-2 label { margin-bottom: 8px; }
.btn-akcja.btn-akcja-off { background: #eef1f5; color: #55606e; }
.btn-akcja.btn-akcja-off:hover { background: #dde1e7; }

.blad { color: var(--blad); font-weight: 600; }
.ok { color: var(--ok); font-weight: 600; }
code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; }

/* Uprawnienia — nagłówki grup w tabeli ról i w formularzu osoby. */
.tabela tr.wiersz-grupy td { background: #eef1f5; }
.grupa-upr { margin: 14px 0 6px; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; color: #55606e; }
.grupa-upr:first-child { margin-top: 4px; }

/* Próg zł/h w rozliczeniach. */
.prog-linia { margin: 0 0 10px; font-size: 0.92em; }
.prog-linia.prog-dol { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--brzeg); }
.prog-info { font-size: 0.6em; font-weight: 400; color: var(--blad); }

/* Przełącznik „Mezo” w dzienniku: włączony = zielony, wyłączony = szary. */
.btn-akcja.btn-akcja-mezo { background: var(--ok); }
.btn-akcja.btn-akcja-mezo:hover { background: #16602f; }
.typ-notka.typ-mezo { color: var(--ok); }

.dziennik-naglowek form.inline { margin-top: 4px; }