/* =====================================================================
   SyndykApp — warstwa wyglądu (kierunek „narzędzie”, jak Stripe)
   Gęsto, precyzyjnie, chłodno. Host Grotesk w tytułach i liczbach, Instrument Sans w treści,
   jeden kolor akcji (elektryczny błękit), granat tylko w znaku kancelarii,
   siatka 4/8/12/16, promień 6 px, linie 1 px. Kolor tylko tam, gdzie znaczy.
   ===================================================================== */

@font-face {
  font-family: "Host Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/host-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Host Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/host-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Znak kancelarii zostaje granatowy — jedyne miejsce dla granatu */
  --ciemny:     #1E4258;
  --zielen:     #3E7D5B;
  --bursztyn:   #B08A3E;
  --ceglany:    #A65540;

  /* Kolor akcji: elektryczny błękit — przyciski główne, zaznaczenia, aktywne zakładki */
  --akcja:        #074ce0;
  --akcja-hover:  #0a43c4;
  --akcja-aktywny:#05348f;
  --akcent-tlo:   #e8eefc;

  /* Powierzchnie i linie */
  --tlo:        #fcfcfd;            /* strona */
  --pow:        #ffffff;            /* karty */
  --tlo-sekcji: #f3f4f6;            /* wyciszone pola wewnątrz */
  --obramowanie:#dde0e6;            /* ramki kart, tabel */
  --linia-slaba:#e9ecf0;            /* podziały wierszy */
  --linia-mocna:#c9cfd8;            /* pola formularzy */

  /* Tekst */
  --tekst:      #16191f;
  --tekst-2:    #454c58;
  --tekst-wyciszony: #6b7382;       /* 4,9:1 na bieli */

  /* Tokeny semantyczne — wszystkie ≥ 4,5:1 */
  --pilne-tekst: #A3412B;  --pilne-tlo: #FBEDE9;  --pilne-ramka: #EFC9BF;
  --uwaga-tekst: #8A5A00;  --uwaga-tlo: #FBF1D8;  --uwaga-ramka: #EBD9A8;
  --ok-tekst:    #237047;  --ok-tlo:    #E3F3EA;  --ok-ramka:    #BFE0CC;
  --sprawa-nowa-tekst:       #074ce0;  --sprawa-nowa-tlo:       #e8eefc;
  --sprawa-w-toku-tekst:     #16191f;  --sprawa-w-toku-tlo:     #e9ecf0;
  --sprawa-zakonczona-tekst: #454c58;  --sprawa-zakonczona-tlo: #f3f4f6;

  --sans:    "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --display: "Host Grotesk", "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --promien: 6px;
  --promien-karty: 12px;
  --ruch: 160ms;
  --krzywa: ease-out;
  --fokus: 0 0 0 3px rgba(7,76,224,.25);
  --cien-karty: 0 1px 2px rgba(22,25,31,.04), 0 6px 16px -10px rgba(22,25,31,.10);
  --cien-przycisku: 0 0 0 1px rgba(22,25,31,.08), 0 1px 1px rgba(22,25,31,.08), 0 2px 5px rgba(22,25,31,.06);
  --cien-okna: 0 24px 60px -12px rgba(22,25,31,.35), 0 0 0 1px rgba(22,25,31,.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--tlo); }
body {
  font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--tekst); background: var(--tlo);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--akcja); }
b, strong { font-weight: 600; }
kbd { font: inherit; font-size: 11px; color: var(--tekst-wyciszony); border: 1px solid var(--obramowanie); border-radius: 4px; padding: 0 5px; background: var(--tlo); }

/* ---------- Układ ---------- */
.uklad { display: flex; min-height: 100vh; }
.pomin-menu { position: fixed; top: 8px; left: 8px; z-index: 70; background: var(--akcja); color: #fff; font-weight: 500; padding: 6px 12px; border-radius: var(--promien); text-decoration: none; transform: translateY(-200%); transition: transform .12s; }
.pomin-menu:focus-visible { transform: none; outline: none; box-shadow: var(--fokus); }
.tresc:focus { outline: none; }
.menu {
  width: 220px; flex-shrink: 0; background: var(--tlo); border-right: 1px solid var(--obramowanie);
  padding: 14px 10px 12px; display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: flex-start; height: 100vh;
}
.marka { display: flex; align-items: center; gap: 8px; padding: 2px 6px 12px; }
/* Sygnet SyndykApp: stempel z literą S (pełna wersja, wektor w index.html). */
.marka-znak { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; }
.marka-znak svg { width: 100%; height: 100%; display: block; }
.marka-nazwa { font-family: var(--display); font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--ciemny, #1E4258); }
.marka-nazwa-app { font-weight: 500; }
.marka-wersja { font-size: 11px; color: var(--tekst-wyciszony); line-height: 1.2; margin-top: 1px; }
.szukaj-przycisk {
  display: flex; align-items: center; gap: 8px; width: 100%; background: #fff; border: 1px solid var(--obramowanie);
  border-radius: var(--promien); padding: 6px 8px; color: var(--tekst-wyciszony); margin-bottom: 12px; text-align: left;
  box-shadow: inset 0 1px 1px rgba(26,31,54,.04);
}
.szukaj-przycisk svg { width: 14px; height: 14px; flex-shrink: 0; }
.szukaj-przycisk span { flex: 1; }
.szukaj-przycisk:hover { border-color: var(--linia-mocna); color: var(--tekst-2); }
.szukaj-przycisk:focus-visible { outline: none; box-shadow: var(--fokus); }
.menu-grupa { display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; }
.menu-etykieta { font-size: 11px; font-weight: 500; color: var(--tekst-wyciszony); padding: 6px 8px 4px; }
.menu-pozycja {
  display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; border-radius: var(--promien);
  color: var(--tekst-2); text-align: left; padding: 6px 8px; font-weight: 500; transition: background .1s, color .1s;
}
.menu-ikona { width: 16px; height: 16px; flex-shrink: 0; color: var(--tekst-wyciszony); }
.menu-pozycja:hover { background: #EDF0F3; color: var(--tekst); }
.menu-pozycja:focus-visible { outline: none; box-shadow: var(--fokus); }
.menu-pozycja.aktywna { background: #eceef2; color: var(--tekst); }
.menu-pozycja.aktywna .menu-ikona { color: var(--akcja); }
.menu-licznik { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--pilne-tekst); background: var(--pilne-tlo); border-radius: 10px; padding: 0 6px; }
.menu-licznik:empty { display: none; }
.menu-dol { margin-top: auto; margin-bottom: 0; padding-top: 10px; border-top: 1px solid var(--obramowanie); }
.menu-uzytkownik { display: flex; align-items: center; gap: 8px; padding: 6px 8px 2px; }
.menu-uzytkownik-opis { flex: 1; }
.menu-uzytkownik .menu-wyloguj { font-size: 11px; padding: 2px 6px; flex-shrink: 0; }
.menu-inicjaly {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: #CBD5E1; color: var(--tekst);
  display: inline-grid; place-items: center; font-size: 10px; font-weight: 600;
}
.menu-inicjaly:empty { display: none; }
.menu-uzytkownik-opis { font-size: 11px; color: var(--tekst-wyciszony); line-height: 1.25; min-width: 0; }
.menu-uzytkownik-opis b { display: block; font-size: 12.5px; font-weight: 500; color: var(--tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tresc { flex: 1; min-width: 0; padding: 24px 32px 64px; max-width: 1240px; }
.sekcja { display: none; }
.sekcja.widoczna { display: block; }

/* ---------- Nagłówek ekranu: tytuł po lewej, akcje po prawej ---------- */
.naglowek-ekranu { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.naglowek-ekranu > div:first-child { min-width: 0; flex: 1 1 260px; }
h1 { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.podtytul { font-size: 13px; color: var(--tekst-wyciszony); margin-top: 2px; }
.podtytul:empty { display: none; }
.naglowek-akcje { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
h2 { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
h3 { font-size: 13px; font-weight: 600; color: var(--tekst-2); margin-bottom: 8px; }
.drobny { font-size: 12px; color: var(--tekst-wyciszony); margin-bottom: 12px; }
.okruszki { font-size: 12.5px; color: var(--tekst-wyciszony); margin-bottom: 6px; }
.okruszki button, .okruszki a { background: none; border: none; padding: 0; color: var(--akcja); font-weight: 500; text-decoration: none; border-radius: 3px; }
.okruszki button:hover { text-decoration: underline; }
.okruszki button:focus-visible { outline: none; box-shadow: var(--fokus); }

/* ---------- Karty i sekcje ---------- */
.karta { background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); padding: 16px; margin-bottom: 16px; box-shadow: var(--cien-karty); }
.karta > h2 { margin-bottom: 2px; }
.karta > h2 + .drobny { margin-bottom: 12px; }
.sekcja-lista { background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); margin-bottom: 16px; overflow: hidden; box-shadow: var(--cien-karty); }
.sekcja-lista-naglowek { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--obramowanie); }
.sekcja-lista-naglowek h2 { margin: 0; }
.sekcja-lista-naglowek .drobny { margin: 0; }
.sekcja-lista-naglowek a, .sekcja-lista-naglowek button.link { font-size: 12.5px; font-weight: 500; color: var(--akcja); text-decoration: none; background: none; border: none; padding: 0; }
.sekcja-lista-naglowek a:hover, .sekcja-lista-naglowek button.link:hover { text-decoration: underline; }
.sekcja-lista .pusty { padding: 14px 16px; font-size: 12.5px; color: var(--tekst-wyciszony); }

/* ---------- Formularze ---------- */
.siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.siatka label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--tekst-2); }
.siatka input, .siatka select, .pole-tabeli, .pasek-narzedzi input[type="search"], .pasek-narzedzi select,
.zgl-sekcja input, .zgl-sekcja select, .zgl-sekcja textarea, .wniosek-wlasne input, #nowy-termin input, #adres-ics {
  font-size: 13px; color: var(--tekst); background: #fff; padding: 6px 9px; border: 1px solid var(--linia-mocna);
  border-radius: var(--promien); box-shadow: inset 0 1px 1px rgba(26,31,54,.04); transition: border-color .1s, box-shadow .1s;
}
.siatka input:focus, .siatka select:focus, .pole-tabeli:focus, .pasek-narzedzi input:focus, .pasek-narzedzi select:focus,
.zgl-sekcja input:focus, .zgl-sekcja select:focus, .zgl-sekcja textarea:focus, .wniosek-wlasne input:focus, #nowy-termin input:focus {
  outline: none; border-color: var(--akcja); box-shadow: var(--fokus);
}
.siatka select[multiple] { min-height: 110px; }
.wiersz-przyciskow { grid-column: 1 / -1; margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pole-wyboru { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tekst-2); }
.pole-wyboru input[type="checkbox"], .pole-wyboru input[type="radio"] { accent-color: var(--akcja); width: 14px; height: 14px; }

/* ---------- Przyciski ---------- */
.przycisk {
  font-size: 13px; font-weight: 500; color: #fff; background: var(--akcja); border: none; border-radius: var(--promien);
  padding: 6px 12px; box-shadow: 0 0 0 1px var(--akcja), 0 1px 1px rgba(22,25,31,.2), inset 0 1px 0 rgba(255,255,255,.12);
  transition: background var(--ruch) var(--krzywa), transform var(--ruch) var(--krzywa), box-shadow var(--ruch) var(--krzywa);
}
.przycisk:hover { background: var(--akcja-hover); transform: translateY(-1px); box-shadow: 0 0 0 1px var(--akcja-hover), 0 2px 4px rgba(22,25,31,.2), inset 0 1px 0 rgba(255,255,255,.12); }
.przycisk:active { background: var(--akcja-aktywny); transform: none; }
.przycisk:disabled { opacity: .55; cursor: default; }
.przycisk-drugorzedny {
  font-size: 13px; font-weight: 500; color: var(--tekst); background: #fff; border: none; border-radius: var(--promien);
  padding: 6px 12px; box-shadow: var(--cien-przycisku);
  transition: background var(--ruch) var(--krzywa), transform var(--ruch) var(--krzywa);
}
.przycisk-drugorzedny:hover { background: #F7F9FB; transform: translateY(-1px); }
.przycisk-drugorzedny:active { background: #EEF1F4; transform: none; }
.przycisk-ikona {
  width: 28px; height: 28px; font-size: 18px; line-height: 1; color: var(--tekst-2); background: #fff; border: none;
  border-radius: var(--promien); box-shadow: var(--cien-przycisku); display: inline-grid; place-items: center;
}
.przycisk-ikona:hover { background: #F7F9FB; color: var(--tekst); }
.przelacznik { display: inline-flex; background: #fff; border-radius: var(--promien); box-shadow: var(--cien-przycisku); padding: 2px; }
.przelacznik-opcja { font-size: 12.5px; font-weight: 500; color: var(--tekst-2); background: none; border: none; border-radius: 4px; padding: 4px 10px; }
.przelacznik-opcja:hover { color: var(--tekst); }
.przelacznik-opcja.aktywny { background: var(--akcja); color: #fff; }
.przycisk-usun {
  font-size: 13px; font-weight: 500; color: var(--pilne-tekst); background: #fff; border: none; border-radius: var(--promien);
  padding: 6px 12px; margin-left: auto; box-shadow: var(--cien-przycisku);
}
.przycisk-usun:hover { background: var(--pilne-tlo); }
.przycisk-usun-maly { font-size: 12px; font-weight: 500; color: var(--tekst-wyciszony); background: none; border: none; border-radius: 4px; padding: 3px 7px; }
.przycisk-usun-maly:hover { color: var(--pilne-tekst); background: var(--pilne-tlo); }
.przycisk:focus-visible, .przycisk-drugorzedny:focus-visible, .przycisk-usun:focus-visible, .przycisk-usun-maly:focus-visible,
.przycisk-ikona:focus-visible, .przelacznik-opcja:focus-visible, .powrot:focus-visible, .zakladka:focus-visible, .kal-termin:focus-visible,
.pulpit-wiersz:focus-visible { outline: none; box-shadow: var(--fokus); }
.powrot { font-size: 12.5px; color: var(--tekst-wyciszony); background: none; border: none; padding: 0; margin-bottom: 8px; border-radius: 3px; }
.powrot:hover { color: var(--akcja); }

/* ---------- Pasek narzędzi (filtry) ---------- */
.pasek-narzedzi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pasek-narzedzi input[type="search"] { width: 300px; }
.pasek-narzedzi .przycisk { margin-left: auto; }

/* ---------- Puste stany ---------- */
.pusty-stan { background: var(--pow); border: 1px dashed var(--linia-mocna); border-radius: var(--promien-karty); padding: 40px 24px; text-align: center; color: var(--tekst-wyciszony); }
.pusty-stan p:first-child { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--tekst); margin-bottom: 4px; }
.pusty-stan .drobny { max-width: 48ch; margin: 0 auto; }

/* ---------- Tabele ---------- */
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); overflow: hidden; box-shadow: var(--cien-karty); }
.tabela th { text-align: left; font-size: 12px; font-weight: 500; color: var(--tekst-wyciszony); padding: 8px 14px; border-bottom: 1px solid var(--obramowanie); white-space: nowrap; }
.tabela td { padding: 9px 14px; border-bottom: 1px solid var(--linia-slaba); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }
.tabela td .drobny { margin: 1px 0 0; }
.tabela td b { font-weight: 500; }
.wiersz-klikalny { cursor: pointer; }
.wiersz-klikalny:hover td { background: #F7F9FB; }
.tabela-podmian { margin-top: 8px; font-size: 12px; }
.tabela-podmian td, .tabela-podmian th { padding: 5px 10px; }
.pole-tabeli { font-size: 12.5px; padding: 4px 7px; max-width: 150px; }

/* ---------- Odznaki statusów i chipy ---------- */
.status, .zgl-chip, .znacznik, .typ {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px;
  font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1;
}
.status-nowa       { background: var(--sprawa-nowa-tlo);       color: var(--sprawa-nowa-tekst); }
.status-w-toku     { background: var(--sprawa-w-toku-tlo);     color: var(--sprawa-w-toku-tekst); }
.status-zakonczona { background: var(--sprawa-zakonczona-tlo); color: var(--sprawa-zakonczona-tekst); }
.zgl-chip.zgl-pelne, .zgl-chip-ok { background: var(--ok-tlo); color: var(--ok-tekst); }
.zgl-chip.zgl-czesc, .zgl-chip-braki, .znacznik { background: var(--uwaga-tlo); color: var(--uwaga-tekst); }
.zgl-chip.zgl-odmowa, .zgl-chip-po-terminie { background: var(--pilne-tlo); color: var(--pilne-tekst); }
.zgl-chip.zgl-brak, .zgl-chip-termin { background: var(--tlo-sekcji); color: var(--tekst-2); }
.zgl-chip-uwaga { background: var(--pilne-tlo); color: var(--pilne-tekst); cursor: help; }
.typ { background: var(--akcent-tlo); color: var(--akcja); }
.kafel-uwaga { color: var(--pilne-tekst); font-weight: 500; }

/* ---------- Dziś: wskaźniki, pasek 14 dni, listy ---------- */
.wskazniki { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); margin-bottom: 16px; overflow: hidden; box-shadow: var(--cien-karty); }
.wskaznik { background: none; border: none; border-right: 1px solid var(--linia-slaba); text-align: left; padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; transition: background .1s; }
.wskaznik:last-child { border-right: none; }
.wskaznik:hover { background: #F7F9FB; }
/* pierścień fokusu od środka — zewnętrzny obcina overflow: hidden karty */
.wskaznik:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--akcja); }
.wskaznik-etykieta { font-size: 12px; font-weight: 500; color: var(--tekst-wyciszony); }
.wskaznik-liczba { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-top: 4px; }
.wskaznik-opis { font-size: 12px; color: var(--tekst-wyciszony); margin-top: 4px; }
.wskaznik-pilny .wskaznik-liczba { color: var(--pilne-tekst); }
.wskaznik-ok .wskaznik-liczba { color: var(--ok-tekst); }
.wskaznik-uwaga .wskaznik-liczba { color: var(--uwaga-tekst); }
.wskaznik-opis.ok { color: var(--ok-tekst); }
.wskaznik-pilne { color: var(--pilne-tekst); font-weight: 500; }

/* sekcje list: kafel przewija do nagłówka z marginesem, fokus na h2 bez widocznego pierścienia */
.pulpit-sekcja { scroll-margin-top: 16px; }
.pulpit-sekcja h2[tabindex="-1"]:focus { outline: none; }
.pulpit-sekcja .sekcja-lista-naglowek { padding: 10px 16px; }
.pulpit-cicho { font-size: 12.5px; color: var(--tekst-wyciszony); padding: 2px 16px 0; }

/* zero po terminie: jedyny zielony blok na ekranie, zasłużony */
.zero-zaleglosci { display: flex; align-items: center; gap: 14px; background: var(--ok-tlo); border: 1px solid var(--ok-ramka); border-radius: var(--promien-karty); padding: 14px 16px; margin-bottom: 16px; }
.zero-znak { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--pow); color: var(--ok-tekst); display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1px var(--ok-ramka); }
.zero-znak svg { width: 18px; height: 18px; }
.zero-ptaszek { stroke-dasharray: 24; stroke-dashoffset: 24; animation: zero-ptaszek 360ms cubic-bezier(.2,.8,.2,1) 120ms forwards; }
@keyframes zero-ptaszek { to { stroke-dashoffset: 0; } }
.zero-zaleglosci h2 { font-size: 17px; color: var(--ok-tekst); margin: 0; }
.zero-zaleglosci p { font-size: 12.5px; color: var(--tekst-2); margin-top: 2px; }

/* pasek 14 dni: nagłówek listy „Najbliższe 14 dni”, nie osobna karta */
.dni-pasek { padding: 10px 16px 22px; border-bottom: 1px solid var(--linia-slaba); background: #FAFBFC; }
.slupki { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 32px; }
.slupek { display: block; background: #D7E3EC; border-radius: 3px 3px 0 0; position: relative; min-height: 3px; cursor: default; }
.slupek.slupek-dzis { background: var(--akcja); }
.slupek.slupek-weekend { background: #E6ECF1; }
.slupek[data-ile]:not([data-ile="0"]) { cursor: pointer; }
.slupek::after { content: attr(data-dzien); position: absolute; top: 100%; left: -4px; right: -4px; text-align: center; font-size: 10.5px; color: var(--tekst-wyciszony); margin-top: 4px; white-space: nowrap; }
.slupek.slupek-dzis::after { color: var(--akcja); font-weight: 600; }
.slupek[data-ile]:not([data-ile="0"])::before { content: attr(data-ile); position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--tekst-2); margin-bottom: 2px; }

.agenda-grupa { }
.agenda-naglowek { display: flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 500; color: var(--tekst-wyciszony); padding: 8px 16px 6px; background: #FAFBFC; border-bottom: 1px solid var(--linia-slaba); border-top: 1px solid var(--linia-slaba); }
.agenda-grupa:first-child .agenda-naglowek { border-top: none; }
.agenda-naglowek.agenda-pilna { color: var(--pilne-tekst); }

/* wiersz: [sprawa] [co] [stan] [akcja] na jednej wspólnej siatce — stan i akcja tworzą pion.
   Link na komórce sprawy rozciąga się na cały wiersz; przycisk akcji leży nad nim. */
.pulpit-wiersz {
  position: relative; display: grid; grid-template-columns: minmax(200px, 1.1fr) minmax(0, 1fr) 196px 92px;
  grid-template-areas: "sprawa opis stan akcja"; gap: 14px; align-items: center;
  min-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--linia-slaba); transition: background .1s;
}
.pulpit-wiersz:last-child { border-bottom: none; }
.pulpit-wiersz:hover { background: #F7F9FB; }
.pulpit-wiersz:focus-within { background: #F7F9FB; }
.pulpit-sprawa { grid-area: sprawa; font-size: 12.5px; color: var(--tekst); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulpit-sprawa b { font-size: 13px; font-weight: 600; }
.pulpit-sprawa span { color: var(--tekst-wyciszony); font-size: 12px; }
.pulpit-link { color: inherit; text-decoration: none; border-radius: 3px; }
.pulpit-link::after { content: ""; position: absolute; inset: 0; }
.pulpit-link:focus-visible { outline: none; }
.pulpit-wiersz:has(.pulpit-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--akcja); }
.pulpit-opis { grid-area: opis; font-size: 13px; font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulpit-opis .typ { margin-right: 4px; vertical-align: 1px; }
.pulpit-stan { grid-area: stan; display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; }
.pulpit-data-bezwzgledna { font-size: 12px; color: var(--tekst-wyciszony); white-space: nowrap; }
.pulpit-akcja { grid-area: akcja; display: flex; gap: 6px; justify-content: flex-end; }
.pulpit-akcja .przycisk-drugorzedny { position: relative; z-index: 1; padding: 3px 9px; font-size: 12.5px; white-space: nowrap; }
.pulpit-akcja .przycisk-drugorzedny:disabled { opacity: .55; cursor: default; transform: none; }
.pulpit-pilny .pulpit-data-bezwzgledna { color: var(--pilne-tekst); }

/* okno obok Worda (nawigacja 220 px + treść ≤ ~780 px): wiersz w dwóch liniach,
   wskaźniki w dwóch rzędach, stan i akcja nadal po prawej */
@media (max-width: 1000px) {
  .wskazniki { grid-template-columns: repeat(2, 1fr); }
  .wskaznik { border-bottom: 1px solid var(--linia-slaba); }
  .wskaznik:nth-child(2n) { border-right: none; }
  .wskaznik:last-child { grid-column: 1 / -1; border-bottom: none; }
  .pulpit-wiersz { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sprawa stan" "opis akcja"; gap: 4px 12px; padding: 8px 16px; }
  .pulpit-opis { font-weight: 400; color: var(--tekst-2); }
  .pulpit-stan { justify-content: flex-end; }
  .slupki { gap: 4px; }
  .slupek::after { font-size: 10px; }
}
@media (min-width: 1001px) and (max-width: 1180px) {
  .wskazniki { grid-template-columns: repeat(3, 1fr); }
  .wskaznik:nth-child(3n) { border-right: none; }
  .wskaznik:nth-child(-n+3) { border-bottom: 1px solid var(--linia-slaba); }
  .wskaznik:nth-child(5) { grid-column: 2 / -1; border-right: none; }
}

/* ---------- Karta sprawy: strona obiektu ---------- */
.karta-sprawy { padding: 0; border: none; background: none; }
.sprawa-naglowek { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.sprawa-tytul { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sprawa-tytul h1 { font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.sprawa-sygnatury { font-size: 13px; color: var(--tekst-wyciszony); margin-top: 3px; }
.sprawa-akcje { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.etapy { list-style: none; display: flex; gap: 4px; margin: 14px 0 16px; }
/* bieżący etap nigdy nie jest ucinany — dostaje więcej miejsca, a w wąskim oknie łamie się na dwie linie */
.etapy li { flex: 1; min-width: 0; font-size: 11.5px; color: var(--tekst-wyciszony); padding-top: 7px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapy li.etap-biezacy { flex: 1.6; }
@media (max-width: 1100px) { .etapy li.etap-biezacy { white-space: normal; overflow: visible; line-height: 1.25; } }
.etapy li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--obramowanie); }
.etapy li.etap-wykonany { color: var(--tekst-2); }
.etapy li.etap-wykonany::before { background: var(--tekst); }
.etapy li.etap-biezacy { color: var(--akcja); font-weight: 600; }
.etapy li.etap-biezacy::before { background: var(--akcja); }
.etapy:empty { display: none; }
.kolumny { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
/* minmax(0, …) także w jednej kolumnie: inaczej tabele kwot i plan spłaty rozpychają kolumnę poza okno */
@media (max-width: 1100px) { .kolumny { grid-template-columns: minmax(0, 1fr); } }
.kolumny > div, .kolumny > aside { min-width: 0; }
/* kolumna Szczegóły: na szerokim ekranie zawsze otwarta, bez nagłówka; w wąskim oknie zwijana pod treścią */
.szczegoly-zwijane > summary { display: none; }
@media (max-width: 1100px) {
  .szczegoly-zwijane > summary { display: block; cursor: pointer; font-size: 13px; font-weight: 600; padding: 8px 0 10px; color: var(--tekst-2); }
  .szczegoly-zwijane > summary::marker { color: var(--tekst-wyciszony); }
}
.szczegoly { background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); margin-bottom: 12px; box-shadow: var(--cien-karty); }
.szczegoly h3 { font-size: 13px; font-weight: 600; color: var(--tekst); padding: 9px 14px; border-bottom: 1px solid var(--obramowanie); margin: 0; }
.kv { padding: 10px 14px; display: flex; flex-direction: column; gap: 9px; }
.kv > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kv dt { font-size: 11.5px; color: var(--tekst-wyciszony); }
.kv dd { font-size: 12.5px; overflow-wrap: anywhere; }
.kv dd button { background: none; border: none; padding: 0; color: var(--akcja); font-weight: 500; text-align: left; border-radius: 3px; }
.kv dd button:hover { text-decoration: underline; }
.zakladki { display: flex; gap: 2px; border-bottom: 1px solid var(--obramowanie); margin: 0 0 12px; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; }
/* w wąskim oknie zakładki zawijają się w dwa rzędy zamiast chować trzy ostatnie za przewijaniem */
@media (max-width: 1100px) { .zakladki { flex-wrap: wrap; overflow-x: visible; row-gap: 0; } }
.zakladka { font-size: 13px; font-weight: 500; color: var(--tekst-2); background: none; border: none; border-bottom: 2px solid transparent; padding: 7px 10px; white-space: nowrap; margin-bottom: -1px; border-radius: 4px 4px 0 0; }
.zakladka:hover { color: var(--tekst); }
.zakladka.aktywna { color: var(--akcja); border-bottom-color: var(--akcja); }
.zakladka-licznik { font-size: 11px; font-weight: 500; color: var(--tekst-wyciszony); margin-left: 4px; }
/* licznik „N po terminie” na zakładce Terminy: ceglany chip, jak na „Dziś” */
.zakladka-licznik-pilny { color: var(--pilne-tekst); background: var(--pilne-tlo); border-radius: 4px; padding: 1px 6px; font-weight: 500; }
.zakladka-licznik:empty { display: none; }
.zakladka-tresc { }
.panel-sprawy { background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--cien-karty); }
.panel-sprawy h2 { font-size: 14px; }
.statystyki { display: none; }

/* Wiersze-karty (adresaci, terminy, odpowiedzi) */
.wiersz-akcje { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.wiersz-wskazany { box-shadow: inset 0 0 0 2px var(--akcja); transition: box-shadow 600ms ease-out; }
.terminy-wykonane { margin-top: 10px; }
.terminy-wykonane > summary { cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--tekst-2); padding: 6px 0 8px; }
.terminy-wykonane > summary .zakladka-licznik { margin-left: 2px; }
.terminy-wykonane > summary:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 3px; }
.gen-zapowiedz { font-size: 12.5px; color: var(--tekst-2); margin: 2px 0 10px; }
.lista-kart { display: flex; flex-direction: column; border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); overflow: hidden; background: var(--pow); }
.wiersz-karty { display: grid; grid-template-columns: minmax(120px, auto) 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; min-height: 40px; border-bottom: 1px solid var(--linia-slaba); background: var(--pow); }
.wiersz-karty:last-child { border-bottom: none; }
.wiersz-karty:hover { background: #F7F9FB; }
.wiersz-karty-opis { font-size: 13px; }
.wiersz-karty .pisma-adresata { font-size: 12.5px; }
.wiersz-karty .przycisk-drugorzedny { padding: 3px 9px; font-size: 12.5px; }
.pulpit-data { font-size: 12px; color: var(--tekst-wyciszony); line-height: 1.3; white-space: nowrap; }
.pulpit-data b { color: var(--tekst); font-weight: 500; }
.pulpit-pilny .pulpit-data, .pulpit-pilny .pulpit-data b { color: var(--pilne-tekst); }
.wiersz-wykonany, .wiersz-wykonany .pulpit-data, .wiersz-wykonany .drobny, .wiersz-wykonany .pulpit-data b { color: var(--tekst-wyciszony); }
.wiersz-wykonany .pulpit-data b { text-decoration: line-through; }
.wiersz-adresata { grid-template-columns: minmax(220px, 1.2fr) 1fr auto; }
.pulpit-pilny.wiersz-karty { box-shadow: inset 3px 0 0 var(--pilne-tekst); }

/* Adresaci */
.pisma-adresata { display: flex; flex-direction: column; gap: 3px; }
.pisma-adresata .pole-wyboru { font-size: 12.5px; }
.dodawanie-adresata, .podglad-arkusza { background: var(--tlo); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); padding: 14px; margin-top: 12px; }
.dodawanie-adresata .drobny { margin: 10px 0 0; }
.podglad-arkusza h3 { margin: 0 0 8px; }
.podglad-arkusza ul { margin: 4px 0 10px; padding-left: 20px; }
.wyniki-wyszukiwania { display: flex; flex-direction: column; gap: 4px; }
.wynik-wyszukiwania { font-size: 13px; background: #fff; border: 1px solid var(--obramowanie); border-radius: var(--promien); padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wynik-wyszukiwania .drobny { margin: 0 0 0 8px; display: inline; }
.wynik-akcje { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Ostrzeżenia, raporty */
.ostrzezenia { background: var(--uwaga-tlo); border: 1px solid var(--uwaga-ramka); border-radius: var(--promien); padding: 8px 12px; margin-bottom: 12px; }
.ostrzezenia p { font-size: 12.5px; color: var(--uwaga-tekst); margin: 2px 0; }
.raport-blad  { color: var(--pilne-tekst); font-size: 13px; margin: 4px 0; }
.raport-uwaga { color: var(--uwaga-tekst); font-size: 13px; margin: 4px 0; }
.raport-dokument { margin: 6px 0; }
.raport-dokument summary { cursor: pointer; font-size: 13px; color: var(--ok-tekst); }
.do-druku { background: var(--tlo); border: 1px solid var(--obramowanie); border-radius: var(--promien); padding: 8px 12px; margin: 10px 0; font-size: 13px; }
.statystyka { font-size: 12px; color: var(--tekst-2); background: var(--tlo-sekcji); border-radius: 4px; padding: 3px 8px; }
.statystyka-pilna { background: var(--pilne-tlo); color: var(--pilne-tekst); }

/* Checklista */
.checklista { list-style: none; margin: 0 0 12px; border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); overflow: hidden; }
.checklista li { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border-bottom: 1px solid var(--linia-slaba); font-size: 13px; }
.checklista li:last-child { border-bottom: none; }
.checklista li input[type="checkbox"] { accent-color: var(--akcja); width: 14px; height: 14px; }
.checklista .wykonane { text-decoration: line-through; color: var(--tekst-wyciszony); }
.checklista .drobny { margin: 0; }
.checklista .przycisk-usun-maly { margin-left: auto; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 20px; right: 20px; max-width: 460px; z-index: 60; background: var(--tekst); color: #fff;
  padding: 10px 12px 10px 16px; border-radius: var(--promien-karty); font-size: 13px; display: flex; align-items: center; gap: 12px;
  opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s, transform .18s;
  box-shadow: 0 10px 30px -8px rgba(26,31,54,.5);
}
.toast.pokazany { opacity: 1; pointer-events: auto; transform: none; }
.toast.blad { background: var(--pilne-tekst); }
.toast-tekst { flex: 1; }
.toast-przycisk { font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); border-radius: 4px; padding: 3px 9px; white-space: nowrap; }
.toast-przycisk:hover { background: rgba(255,255,255,.26); }
.toast-zamknij { font-size: 18px; line-height: 1; color: #fff; background: none; border: none; padding: 0 2px; opacity: .85; }
.toast-zamknij:hover { opacity: 1; }
.toast-przycisk:focus-visible, .toast-zamknij:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Okno potwierdzenia ---------- */
.okno-tlo { position: fixed; inset: 0; z-index: 50; background: rgba(26,31,54,.45); display: flex; align-items: center; justify-content: center; padding: 24px; animation: tlo-wejscie .12s ease-out; }
.okno { background: #fff; border-radius: 10px; padding: 20px 22px; width: min(480px, 100%); box-shadow: var(--cien-okna); animation: okno-wejscie .14s ease-out; }
.okno h2 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.okno-opis { font-size: 13px; line-height: 1.5; color: var(--tekst-2); margin-bottom: 18px; }
.okno-opis b { color: var(--tekst); }
.okno-przyciski { display: flex; justify-content: flex-end; gap: 8px; }
.okno-przyciski .przycisk-usun { margin-left: 0; background: var(--pilne-tekst); color: #fff; box-shadow: 0 0 0 1px var(--pilne-tekst), 0 1px 1px rgba(26,31,54,.2); }
.okno-przyciski .przycisk-usun:hover { background: #8A3422; }
@keyframes okno-wejscie { from { opacity: 0; transform: translateY(4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes tlo-wejscie { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Paleta szukania (⌘K) ---------- */
.paleta-tlo { position: fixed; inset: 0; z-index: 55; background: rgba(26,31,54,.35); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 24px 24px; animation: tlo-wejscie .12s ease-out; }
.paleta { width: min(620px, 100%); background: #fff; border-radius: 10px; box-shadow: var(--cien-okna); overflow: hidden; animation: okno-wejscie .14s ease-out; }
.paleta input { width: 100%; border: none; border-bottom: 1px solid var(--obramowanie); padding: 14px 16px; font-size: 15px; background: #fff; }
.paleta input:focus { outline: none; }
.paleta-wyniki { max-height: 48vh; overflow-y: auto; padding: 6px; }
.paleta-wyniki:empty { display: none; }
.paleta-grupa { font-size: 11px; font-weight: 500; color: var(--tekst-wyciszony); padding: 8px 10px 4px; }
.paleta-wynik { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; border-radius: var(--promien); padding: 7px 10px; text-align: left; font-size: 13px; }
.paleta-wynik:hover, .paleta-wynik.zaznaczony { background: #EDF0F3; }
.paleta-wynik b { font-weight: 500; }
.paleta-wynik span { color: var(--tekst-wyciszony); font-size: 12px; margin-left: auto; white-space: nowrap; }
.paleta-pusto { padding: 14px 16px; font-size: 12.5px; color: var(--tekst-wyciszony); }
.paleta-stopka { display: flex; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--obramowanie); font-size: 11.5px; color: var(--tekst-wyciszony); }
.paleta-stopka kbd { margin-right: 3px; }

/* ---------- Kalendarz ---------- */
.kal-tytul { font-family: var(--display); font-size: 15px; font-weight: 700; margin-left: 6px; letter-spacing: -.01em; }
.kal-naglowki { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; font-size: 11.5px; font-weight: 500; color: var(--tekst-wyciszony); }
.kal-naglowki div { padding: 2px 8px; }
.kal-siatka { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(92px, auto); gap: 4px; }
.kal-siatka-tydzien { grid-auto-rows: minmax(320px, auto); }
.kal-dzien { background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien); padding: 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kal-weekend { background: #FAFBFC; }
.kal-poza { opacity: .5; }
.kal-dzis { border-color: var(--akcja); box-shadow: inset 0 0 0 1px var(--akcja); }
.kal-numer { font-size: 11.5px; font-weight: 600; color: var(--tekst-2); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; white-space: nowrap; }
.kal-dzis .kal-numer { color: #fff; background: var(--akcja); }
.kal-termin { font-size: 11.5px; line-height: 1.3; text-align: left; border: none; border-radius: 4px; padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; }
.kal-siatka-tydzien .kal-termin { font-size: 12.5px; -webkit-line-clamp: 4; }
.kal-oczekuje { background: var(--akcent-tlo); color: var(--akcja); }
.kal-oczekuje:hover { background: #DCE8F1; }
.kal-po-terminie { background: var(--pilne-tlo); color: var(--pilne-tekst); }
.kal-po-terminie:hover { background: #F3DCD5; }
.kal-wykonany { background: var(--tlo-sekcji); color: var(--tekst-wyciszony); text-decoration: line-through; font-weight: 400; }
.kal-legenda { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 1px 7px; border-radius: 4px; }

/* ---------- Zgłoszenia wierzytelności ---------- */
.zgl-kafle { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.kafel { flex: 1 1 150px; background: var(--tlo-sekcji); border-radius: var(--promien); padding: 8px 12px; min-width: 150px; }
.kafel-liczba { display: block; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.kafel-z { font-size: 12.5px; font-weight: 400; color: var(--tekst-2); }
.kafel-etykieta { display: block; font-size: 11.5px; color: var(--tekst-2); margin-top: 2px; }   /* tekst-2 na tle kafla: 7,8:1 */
.kafel-ostrzezenie { background: var(--uwaga-tlo); }
.kafel-ostrzezenie .kafel-liczba { color: var(--uwaga-tekst); }
.kafel .zgl-pasek { margin-top: 6px; }
.zgl-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.zgl-wiersz { background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); overflow: hidden; }
.zgl-wiersz:hover { border-color: var(--linia-mocna); }
.zgl-podsumowanie:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--akcja); }
.zgl-podsumowanie { display: grid; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; border-radius: var(--promien-karty);
                    grid-template-columns: 30px minmax(180px, 1.3fr) minmax(210px, 1fr) minmax(150px, auto) 20px; }
@media (max-width: 980px) {
  .zgl-podsumowanie { grid-template-columns: 30px 1fr 20px; }
  .zgl-kwoty, .zgl-statusy { grid-column: 2; }
  .zgl-statusy { justify-content: flex-start; }
}
.zgl-nr { width: 26px; height: 26px; border-radius: 50%; background: var(--akcent-tlo); color: var(--akcja); font-weight: 600; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.zgl-nazwa { font-weight: 500; }
.zgl-meta { font-size: 12px; color: var(--tekst-wyciszony); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zgl-kwoty-linia { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.zgl-kwoty-linia span { color: var(--tekst-wyciszony); }
.zgl-pasek { height: 4px; background: var(--obramowanie); border-radius: 2px; overflow: hidden; margin: 5px 0 3px; }
.zgl-pasek-wypelnienie { height: 100%; border-radius: 2px; transition: width .3s; }
.zgl-pelne { background: var(--zielen); } .zgl-czesc { background: var(--bursztyn); } .zgl-odmowa { background: var(--ceglany); }
.zgl-brak { background: #B9C6D0; } .zgl-nadmiar { background: var(--ceglany); }
.zgl-kategorie { display: flex; flex-wrap: wrap; gap: 4px; }
.zgl-kat { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--tlo-sekcji); color: var(--tekst-2); }
.zgl-kat b { color: var(--tekst); margin-right: 3px; }
.zgl-statusy { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.zgl-rozwin { color: var(--tekst-wyciszony); font-size: 13px; text-align: center; }
.zgl-edytor { border-top: 1px solid var(--obramowanie); background: var(--tlo); padding: 14px; }
.zgl-sekcje { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 20px; }
.zgl-sekcja h3, .zgl-sekcja h4 { font-size: 12px; font-weight: 600; color: var(--tekst-2); margin-bottom: 8px; }
.zgl-sekcja label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 500; color: var(--tekst-2); margin-bottom: 8px; }
.zgl-sekcja label.pole-wyboru { flex-direction: row; align-items: center; }
.zgl-sekcja-kwoty { grid-column: 1 / -1; min-width: 0; overflow-x: auto; }
.zgl-tabela-kwot { border-collapse: collapse; max-width: 520px; width: 100%; min-width: 340px; }
.zgl-tabela-kwot th, .zgl-tabela-kwot td { padding: 3px 6px; text-align: right; font-size: 12.5px; }
.zgl-tabela-kwot th:first-child { text-align: left; color: var(--tekst-wyciszony); width: 44px; }
.zgl-tabela-kwot thead th { color: var(--tekst-wyciszony); font-weight: 500; }
.zgl-tabela-kwot tfoot td { font-weight: 600; border-top: 1px solid var(--obramowanie); padding-top: 6px; }
.zgl-tabela-kwot input.zgl-kwota { width: 100%; text-align: right; }
.zgl-tabela-kwot tr.zgl-przekroczenie input[data-pole$="_uzn"] { border-color: var(--ceglany); background: #FBF1EF; }
input.zgl-blad { border-color: var(--ceglany) !important; background: #FBF1EF !important; }
.zgl-ostrzezenia { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.zgl-ostrzezenia p { font-size: 12.5px; color: var(--uwaga-tekst); margin: 0; }
.zgl-stopka { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.zgl-zapis { font-size: 12px; color: var(--ok-tekst); min-height: 16px; }
.zgl-zapis.zgl-zapis-blad { color: var(--pilne-tekst); }

/* Wniosek o wynagrodzenie */
.wniosek-wyliczenia { font-size: 12.5px; color: var(--tekst-wyciszony); margin: -4px 0 8px; }
.wniosek-wyliczenia b { color: var(--tekst); }
.wniosek-czynnosci { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.wniosek-czynnosci .pole-wyboru { align-items: flex-start; }
.wniosek-czynnosci .pole-wyboru input { margin-top: 3px; }
.wniosek-wlasne { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Zespół w Ustawieniach ---------- */
.wiersz-uzytkownika { grid-template-columns: minmax(260px, 1.4fr) minmax(180px, auto) auto; }
.wiersz-uzytkownika .inicjaly { width: 24px; height: 24px; font-size: 10.5px; margin-right: 8px; }
.przekazanie-dane { padding: 6px 0; }
.przekazanie-dane code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--tlo-sekcji); padding: 2px 6px; border-radius: 4px; }

/* ---------- Miara tygodniowa syndyka ---------- */
.tydz { background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); box-shadow: var(--cien-karty); padding: 12px 16px 12px; margin-bottom: 16px; }
.tydz-naglowek { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.tydz-teraz { font-size: 12.5px; color: var(--tekst-wyciszony); display: flex; align-items: baseline; gap: 8px; }
.tydz-liczba { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.tydz-liczba-pilna { color: var(--pilne-tekst); }
.tydz-liczba-ok { color: var(--ok-tekst); }
.tydz-lepiej { color: var(--ok-tekst); font-weight: 600; }
.tydz-gorzej { color: var(--pilne-tekst); font-weight: 600; }
.tydz-slupki { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; align-items: end; height: 60px; }
.tydz-slupek-kol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.tydz-wartosc { font-size: 11px; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.tydz-slupek { width: 100%; max-width: 48px; border-radius: 3px 3px 0 0; background: #e4b8ad; }
.tydz-slupek-pilny { background: #E9B4A6; }
.tydz-slupek-ok { background: #BFE0CC; }
.tydz-slupek-biezacy { outline: 2px solid var(--akcja); outline-offset: 1px; }
.tydz-etykieta { font-size: 10.5px; color: var(--tekst-wyciszony); }
.tydz-slupek-kol:last-child .tydz-etykieta { color: var(--akcja); font-weight: 600; }

/* ---------- Szkielety ładowania i błąd w miejscu sekcji ---------- */
.szkielet { background: linear-gradient(90deg, #eceef2 25%, #f5f6f8 40%, #eceef2 55%); background-size: 400% 100%; animation: szkielet-fala 1.4s ease-in-out infinite; border-radius: 4px; height: 10px; }
@keyframes szkielet-fala { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.szkielet-wiersze { background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); overflow: hidden; }
.szkielet-wiersz { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--linia-slaba); }
.szkielet-wiersz:last-child { border-bottom: none; }
.szkielet-odznaka { width: 72px; height: 18px; margin-left: auto; border-radius: 4px; }
.szkielet-kafle { display: contents; }
.szkielet-kafel { height: 72px; margin: 10px 14px; border-radius: 6px; }
.szkielet-linie { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.szkielet-linia { height: 10px; width: 70%; }
.szkielet-linia:nth-child(even) { width: 50%; }
.panel-sprawy .szkielet-wiersze { border: none; }
.sekcja-blad { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--pilne-tlo); border: 1px solid var(--pilne-ramka); border-radius: var(--promien-karty); color: var(--pilne-tekst); font-size: 13px; }
.sekcja-blad b { color: var(--pilne-tekst); }
.sekcja-blad .drobny { color: var(--pilne-tekst); opacity: .85; }
.kv .sekcja-blad { margin: 4px 0; }

/* ---------- Lista startowa nowej kancelarii ---------- */
.start-lista { background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); box-shadow: var(--cien-karty); padding: 20px 24px 8px; max-width: 760px; }
.start-naglowek h2 { font-size: 18px; }
.start-naglowek .drobny { margin-bottom: 6px; }
.start-kroki { list-style: none; }
.start-krok { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linia-slaba); }
.start-numer { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--display); font-size: 13px; font-weight: 700; background: var(--tlo-sekcji); color: var(--tekst-2); }
.start-biezacy .start-numer { background: var(--akcja); color: #fff; }
.start-wykonany .start-numer { background: var(--ok-tlo); color: var(--ok-tekst); }
.start-tresc { flex: 1; min-width: 0; }
.start-tytul { font-weight: 600; font-size: 14px; }
.start-wykonany .start-tytul { color: var(--tekst-wyciszony); text-decoration: line-through; }
.start-tresc .drobny { margin: 2px 0 0; max-width: 60ch; }
.start-akcje { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Zespół: inicjały i wybór osoby ---------- */
.inicjaly {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: #E8ECF0; color: var(--tekst-2); font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  vertical-align: middle; margin-right: 6px; cursor: default;
}
.wybor-osoby {
  font-size: 12px; color: var(--tekst-2); background: #fff; border: 1px solid var(--obramowanie);
  border-radius: 4px; padding: 2px 4px; max-width: 150px;
}
.wybor-osoby:hover { border-color: var(--linia-mocna); color: var(--tekst); }
.wybor-osoby:focus-visible { outline: none; box-shadow: var(--fokus); border-color: var(--akcja); }
.wiersz-osoba { display: inline-flex; align-items: center; white-space: nowrap; }
.checklista .wiersz-osoba { margin-left: auto; }
.checklista .wiersz-osoba + .przycisk-usun-maly { margin-left: 0; }
.komorka-osoba { white-space: nowrap; }
.komorka-osoba .drobny { display: inline; }
.kv .wybor-osoby { max-width: 100%; width: 100%; margin-top: 2px; }
.wskaznik-opis span { white-space: nowrap; }
.pulpit-sprawa .inicjaly { margin-right: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Logowanie */
.logowanie-tlo { position: fixed; inset: 0; background: var(--tlo, #F6F8FA); display: flex; align-items: center;
                 justify-content: center; z-index: 50; padding: 16px; }
.logowanie-okno { width: min(420px, 100%); background: #fff; border: 1px solid var(--obramowanie); border-radius: 10px;
                  padding: 28px 28px 22px; box-shadow: 0 10px 30px rgba(26,31,54,.08); }
.logowanie-marka { display: flex; align-items: center; gap: 10px; color: var(--ciemny); margin-bottom: 18px; }
.logowanie-marka .marka-znak { width: 28px; height: 28px; }
.logowanie-logo { height: 44px; width: auto; display: block; }
.logowanie-marka .marka-nazwa { font-size: 17px; }
.logowanie-okno h2 { margin-bottom: 6px; }
.logowanie-okno form { display: flex; flex-direction: column; gap: 10px; }
.logowanie-okno label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tekst-2, #4F566B); }
.logowanie-okno input { font: inherit; padding: 9px 10px; border: 1px solid var(--linia-mocna, #CDD5DE); border-radius: 6px; }
.logowanie-okno .przycisk { margin-top: 6px; }
.logowanie-blad { color: var(--ceglany); font-size: 13px; min-height: 18px; margin: 0; }
.menu-wyloguj { font: inherit; font-size: 12px; color: var(--tekst-wyciszony, #697386); background: none; border: 1px solid var(--obramowanie);
                border-radius: 6px; padding: 3px 8px; cursor: pointer; margin-left: auto; }
.menu-wyloguj:hover { color: var(--akcja); border-color: var(--linia-mocna, #CDD5DE); }
.tylko-odczyt .przycisk-usun, .tylko-odczyt .przycisk-usun-maly { display: none; }
.wiersz-uzytkownika { grid-template-columns: 1fr auto auto; }
.wiersz-blad td { color: var(--ceglany); }

/* ---------- Plan spłaty wierzycieli (PPSW) ---------- */
.ppsw-naglowek { margin-bottom: 4px; }
.ppsw-naglowek .drobny { margin-bottom: 6px; }
.ppsw-uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
@media (max-width: 1400px) { .ppsw-uklad { grid-template-columns: 1fr; } }
/* panel karty jest kontenerem: dwie kolumny planu tylko, gdy sam panel ma ≥ 900 px */
.panel-sprawy { container-type: inline-size; }
@container (max-width: 900px) { .ppsw-uklad { grid-template-columns: minmax(0, 1fr); } }
.ppsw-uklad > * { min-width: 0; }
.ppsw-wierzyciele { min-width: 0; }
.ppsw-formularz .zgl-sekcje { margin-bottom: 12px; }
.ppsw-formularz textarea { resize: vertical; }
.ppsw-radio { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ppsw-radio .pole-wyboru { font-size: 12.5px; }
.ppsw-segment { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.ppsw-segment .przycisk-usun-maly { margin-bottom: 10px; }
.ppsw-wierzyciele { background: var(--tlo); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); padding: 12px 14px; margin-top: 12px; }
[data-ppsw-tabela] { overflow-x: auto; }
.ppsw-tabela { max-width: none; }
.ppsw-tabela th.ppsw-nazwa, .ppsw-tabela td.ppsw-nazwa { text-align: left; min-width: 180px; }
.ppsw-tabela td.ppsw-nazwa input { width: 100%; }
.ppsw-tabela input.zgl-kwota { min-width: 92px; }
.ppsw-tabela tbody th { color: var(--tekst-wyciszony); font-weight: 500; }
.ppsw-wiersz-akcje { white-space: nowrap; display: flex; gap: 2px; }
.ppsw-dane-pisma { margin-top: 12px; }
.ppsw-dane-pisma > summary, .ppsw-szczegoly > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--tekst-2); padding: 6px 0; }
.ppsw-akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ppsw-akcje input { font: inherit; padding: 6px 10px; border: 1px solid var(--linia-mocna); border-radius: var(--promien); background: #fff; min-width: 180px; }
.ppsw-komunikaty { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ppsw-komunikat { font-size: 12.5px; padding: 6px 10px; border-radius: var(--promien); border: 1px solid var(--obramowanie); background: var(--tlo-sekcji); color: var(--tekst-2); margin: 0; }
.ppsw-komunikat.ppsw-blad { background: var(--pilne-tlo); border-color: var(--pilne-ramka); color: var(--pilne-tekst); }
.ppsw-komunikat.ppsw-ostrzezenie { background: var(--uwaga-tlo); border-color: var(--uwaga-ramka); color: var(--uwaga-tekst); }
.ppsw-tekst { background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); margin-bottom: 10px; }
.ppsw-punkt { position: relative; padding: 8px 64px 8px 12px; border-bottom: 1px solid var(--linia-slaba); }
.ppsw-punkt:last-child { border-bottom: none; }
.ppsw-punkt pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12.5px; line-height: 1.5; margin: 0; }
.ppsw-naglowek-pisma pre { color: var(--tekst-2); }
.ppsw-kopiuj { position: absolute; top: 6px; right: 8px; font-size: 11.5px; font-weight: 500; color: var(--akcja); background: var(--akcent-tlo); border: none; border-radius: 4px; padding: 2px 8px; opacity: 0; transition: opacity .12s; }
.ppsw-punkt:hover .ppsw-kopiuj, .ppsw-kopiuj:focus-visible { opacity: 1; }
.ppsw-szczegoly { margin-bottom: 8px; }
.ppsw-akapity p { font-size: 12.5px; line-height: 1.5; margin: 6px 0; }
.ppsw-stat td:not(:first-child), .ppsw-harmonogram td:not(:first-child), .ppsw-harmonogram th:not(:first-child) { text-align: right; }
.ppsw-przewijane { overflow-x: auto; }
.ppsw-warianty { margin-top: 12px; }
.ppsw-warianty h3 { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ppsw-wariant { grid-template-columns: minmax(140px, auto) 1fr auto auto; border: 1px solid var(--obramowanie); border-radius: var(--promien); margin-bottom: 6px; }
.ppsw-wariant-otwarty { border-color: var(--akcja); background: var(--akcent-tlo); }
.ppsw-tabela td[data-razem-wiersza], .ppsw-tabela tfoot td { white-space: nowrap; }
.ppsw-stat td, .ppsw-harmonogram td:first-child, .ppsw-harmonogram td:nth-child(2) { white-space: nowrap; }
.ppsw-stat { width: auto; min-width: 100%; }
.ppsw-szczegoly > div { overflow-x: auto; }
.ppsw-wariant { grid-template-columns: 1fr auto auto; }
.ppsw-wariant .wiersz-karty-opis { color: var(--tekst-2); font-size: 12.5px; margin-top: 2px; }
.ppsw-stat { width: 100%; min-width: 0; }
.ppsw-stat td, .ppsw-stat th { padding: 6px 8px; font-size: 12.5px; }
.ppsw-wariant { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ppsw-wariant > div:first-child { flex: 1 1 220px; min-width: 0; }
.ppsw-wezwanie { background: var(--tlo); border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); padding: 12px 14px; margin-top: 10px; }
.ppsw-wezwanie .ppsw-akcje { margin-bottom: 0; }
.ppsw-wezwanie label.ppsw-pole-daty { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 500; color: var(--tekst-2); }

/* ---------- import zbiorczego arkusza ZW i znacznik „do decyzji” ---------- */
.zgl-do-decyzji { background: var(--pilne-tlo); border: 1px solid var(--pilne-ramka); border-radius: var(--promien); padding: 8px 12px; margin: 10px 0; font-size: 12.5px; color: var(--pilne-tekst); }
.zgl-do-decyzji ul { margin: 4px 0 8px 18px; }
.zgl-do-decyzji-mini { font-size: 12px; color: var(--pilne-tekst); margin: 2px 0 4px; }
.import-sprawa { background: var(--pow); border: 1px solid var(--obramowanie); border-radius: var(--promien); padding: 10px 12px; margin: 8px 0; }
.import-sprawa h4 { font-size: 13px; margin-bottom: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.import-sprawa ul { margin: 2px 0 6px 18px; font-size: 12.5px; }

/* Tryb serwera (SYNDYK_TRYB=serwer): plików nie da się otworzyć na komputerze użytkownika,
   więc przyciski „Otwórz folder / załącznik” znikają — pobieranie z przeglądarki to część 2. */
body.tryb-serwer [data-otworz-folder], body.tryb-serwer #gen-folder, body.tryb-serwer #otworz-odpowiedz { display: none; }

/* ---------- pliki sprawy (pliki.js): zakładka z drzewem plików i linki „Pobierz” ---------- */
.pliki-naglowek { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pliki-naglowek h2 { margin: 0; }
a.przycisk, a.przycisk-drugorzedny { text-decoration: none; display: inline-block; line-height: normal; }
.pliki-folder { border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); margin-top: 10px; background: var(--pow); overflow: hidden; }
.pliki-folder > summary { padding: 9px 14px; cursor: pointer; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; list-style: none; }
.pliki-folder > summary::-webkit-details-marker { display: none; }
.pliki-folder > summary::before { content: "▸"; color: var(--tekst-wyciszony); font-size: 11px; }
.pliki-folder[open] > summary::before { content: "▾"; }
.pliki-folder > summary .drobny { margin: 0; font-weight: 400; }
.pliki-tabela { width: 100%; border-collapse: collapse; border-top: 1px solid var(--linia-slaba); }
.pliki-tabela td { padding: 7px 14px; border-bottom: 1px solid var(--linia-slaba); font-size: 13px; vertical-align: middle; }
.pliki-tabela tr:last-child td { border-bottom: none; }
.pliki-tabela td:first-child { width: 100%; }
.pliki-typ { display: inline-block; min-width: 40px; text-align: center; font-size: 11px; font-weight: 600; padding: 1px 6px; margin-right: 8px; border-radius: 4px; background: var(--tlo-sekcji); color: var(--tekst-2); }
.pliki-meta { white-space: nowrap; color: var(--tekst-wyciszony); font-size: 12.5px; }
.pliki-akcja { text-align: right; white-space: nowrap; }
.pliki-link { color: var(--akcja); font-weight: 500; text-decoration: none; white-space: nowrap; }
.pliki-link:hover { text-decoration: underline; }
.pliki-linki, .pliki-zamiast { font-size: 12.5px; color: var(--tekst-2); margin-left: 6px; }
.pliki-zbiorczo { margin-top: 10px; }
/* tryb serwera: przyciski otwierające folder (plan spłaty, wezwanie) i synchronizacja z kalendarzem Apple
   znikają — ich miejsce zajmują linki „Pobierz” i zdanie o kanale ICS z pliki.js */
body.tryb-serwer #synchronizuj-kalendarz, body.tryb-serwer [data-ppsw-folder], body.tryb-serwer [data-wezwanie-folder] { display: none; }

/* ---------- notatki sprawy (notatki.js): kartka z zapiskami zespołu ---------- */
.notatki-nowa { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.notatki-nowa textarea, .notatki-edycja textarea { width: 100%; min-height: 72px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--linia-mocna); border-radius: var(--promien); background: #fff; }
.notatki-nowa textarea:focus, .notatki-edycja textarea:focus { outline: none; border-color: var(--akcja); box-shadow: var(--fokus); }
.notatki-nowa-akcje { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.notatki-wpis { border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); background: var(--pow); padding: 10px 14px; margin-bottom: 8px; }
.notatki-przypieta { border-color: var(--uwaga-ramka); background: var(--uwaga-tlo); }
.notatki-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 12.5px; margin-bottom: 4px; }
.notatki-naglowek .drobny { margin: 0; }
.notatki-tresc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; }
.notatki-akcje, .notatki-edycja-akcje { display: flex; gap: 6px; margin-top: 8px; }
.notatki-edycja { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
/* konto tylko do podglądu: czyta notatki, nie dodaje i nie zmienia */
body.tylko-odczyt .notatki-nowa, body.tylko-odczyt .notatki-akcje { display: none; }

/* ---------- dzwonek: powiadomienia (powiadomienia.js) ---------- */
.powiadomienia-lista { display: flex; flex-direction: column; gap: 6px; }
.powiadomienie { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; font: inherit; font-size: 13px; line-height: 1.45; padding: 10px 14px; border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); background: var(--pow); color: var(--tekst); cursor: pointer; }
.powiadomienie:hover { border-color: var(--linia-mocna); }
.powiadomienie:focus-visible { outline: none; box-shadow: var(--fokus); }
.powiadomienie-nowe { background: var(--uwaga-tlo); border-color: var(--uwaga-ramka); }
.powiadomienie-kropka { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: transparent; }
.powiadomienie-nowe .powiadomienie-kropka { background: var(--akcja); }
.powiadomienie-tresc { min-width: 0; overflow-wrap: anywhere; }
.powiadomienie-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin-bottom: 2px; }
.powiadomienie-naglowek .drobny { margin: 0; }

/* ---------- dyskusja w ramach sprawy (dyskusja.js) ---------- */
.dyskusja-watek { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 2px; margin-bottom: 14px; }
.dyskusja-wpis { border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); background: var(--pow); padding: 10px 14px; max-width: 85%; align-self: flex-start; }
.dyskusja-moja { align-self: flex-end; background: var(--tlo-sekcji); }
.dyskusja-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 12.5px; margin-bottom: 4px; }
.dyskusja-naglowek .drobny { margin: 0; }
.dyskusja-usun { font: inherit; font-size: 12px; color: var(--tekst-wyciszony); background: none; border: none; padding: 0; cursor: pointer; margin-left: auto; }
.dyskusja-usun:hover { color: var(--pilne-tekst); text-decoration: underline; }
.dyskusja-tresc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; }
.dyskusja-wzmianka { background: var(--uwaga-tlo); color: var(--uwaga-tekst); border-radius: 4px; padding: 0 3px; font-weight: 500; }
.dyskusja-nowa { display: flex; flex-direction: column; gap: 8px; }
.dyskusja-nowa textarea { width: 100%; min-height: 64px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--linia-mocna); border-radius: var(--promien); background: #fff; }
.dyskusja-nowa textarea:focus { outline: none; border-color: var(--akcja); box-shadow: var(--fokus); }
.dyskusja-nowa-akcje { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dyskusja-osoby { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dyskusja-osoby .drobny { margin: 0; }
.dyskusja-osoba { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--obramowanie); border-radius: 10px; background: var(--pow); color: var(--tekst); cursor: pointer; }
.dyskusja-osoba:hover { border-color: var(--akcja); color: var(--akcja); }
/* konto tylko do podglądu: czyta dyskusję, nie pisze */
body.tylko-odczyt .dyskusja-nowa, body.tylko-odczyt .dyskusja-usun { display: none; }

/* ---------- „Zgłoś uwagę” (uwagi.js): panel dla każdego i lista uwag w Ustawieniach ---------- */
.uwagi-karta { max-width: 720px; }
.uwagi-formularz { display: flex; flex-direction: column; gap: 12px; }
.uwagi-pole { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--tekst-2); }
.uwagi-formularz textarea, .uwagi-formularz input[name="gdzie"], .uwagi-odpowiedz textarea { width: 100%; font: inherit; font-size: 13px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--linia-mocna); border-radius: var(--promien); background: #fff; color: var(--tekst); }
.uwagi-formularz textarea { min-height: 120px; resize: vertical; }
.uwagi-odpowiedz textarea { min-height: 52px; resize: vertical; }
.uwagi-formularz textarea:focus, .uwagi-formularz input:focus, .uwagi-odpowiedz textarea:focus { outline: none; border-color: var(--akcja); box-shadow: var(--fokus); }
.uwagi-pilne { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst); cursor: pointer; align-self: flex-start; }
.uwagi-pilne input { width: 16px; height: 16px; margin: 0; accent-color: var(--pilne-tekst); }
.uwagi-akcje { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uwagi-akcje .drobny { margin: 0 0 0 auto; }
.uwagi-kontakt { margin: 14px 0 0; }
.uwagi-kontakt a { color: var(--akcja); font-weight: 500; }
.uwagi-wpis { border: 1px solid var(--obramowanie); border-radius: var(--promien-karty); background: var(--pow); padding: 10px 14px; margin-bottom: 8px; }
.uwagi-nowa { border-color: var(--uwaga-ramka); background: var(--uwaga-tlo); }
.uwagi-naglowek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; margin-bottom: 4px; }
.uwagi-naglowek .drobny { margin: 0; }
.uwagi-gdzie { font-size: 12px; color: var(--tekst-wyciszony); margin-bottom: 4px; overflow-wrap: anywhere; }
.uwagi-tresc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; }
.uwagi-odpowiedz { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--tekst-2); }
.uwagi-wpis-akcje { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.uwagi-link { font: inherit; font-size: 12px; color: var(--tekst-wyciszony); background: none; border: none; padding: 0; cursor: pointer; }
.uwagi-link:hover { color: var(--akcja); text-decoration: underline; }
.uwagi-chip-pilna { background: var(--pilne-tlo); color: var(--pilne-tekst); }
.uwagi-chip-zwykla { background: var(--tlo-sekcji); color: var(--tekst-2); }
.uwagi-chip-nowa { background: var(--uwaga-tlo); color: var(--uwaga-tekst); border: 1px solid var(--uwaga-ramka); }
.uwagi-chip-przeczytana { background: var(--ok-tlo); color: var(--ok-tekst); }
h2 .uwagi-chip-nowa { vertical-align: middle; margin-left: 6px; }

/* Ustawienia: rzeczy tylko dla wersji na komputerze (folder spraw, kopie, kalendarz Apple) */
body.tryb-serwer [data-tylko-lokalnie] { display: none !important; }

/* Ekran logowania: czyja to instancja i stopka produktu */
.logowanie-kancelaria { margin: -6px 0 16px; font-size: 14px; color: var(--tekst); }
.logowanie-kancelaria span { color: var(--tekst-wyciszony); margin-left: 6px; }
.logowanie-stopka { margin: 18px 0 0; font-size: 12px; color: var(--tekst-wyciszony); text-align: center; }

/* Pulpit: kilka odpowiedzi w jednej sprawie zwinięte do jednego wiersza */
.pulpit-zwijana > summary { list-style: none; cursor: pointer; }
.pulpit-zwijana > summary::-webkit-details-marker { display: none; }
.pulpit-zwijana > summary .pulpit-rozwin { font-size: 12px; color: var(--akcja); white-space: nowrap; }
.pulpit-zwijana:not([open]) > summary .pulpit-rozwin::after { content: " ▾"; }
.pulpit-zwijana[open] > summary .pulpit-rozwin::after { content: " ▴"; }
.pulpit-zwijana > .pulpit-wiersz { padding-left: 32px; background: #FAFBFC; }
.pulpit-zwijana > .pulpit-wiersz:last-child { border-bottom: 1px solid var(--linia-slaba); }