/* E-biuro – styl „tablica spraw” (kierunek C) */
/* motyw: zmienne kolorów; html[data-motyw] (Ustawienia, każdy dla siebie) podmienia tylko ten blok. Kolory statusów (zielony, fiolet, pomarańcz zadań) wspólne. */
:root {
  --tlo: #f7f1e8; --tlo2: #efe5d6; --tlo2-hover: #e6d8c4; --karta: #fff; --pole: #fffdf9; --hover: #faf5ee; --tlo-jasne: #fffaf3; --weekend: #fdfaf5;
  --tekst: #2b2118; --szary: #5e4c3c; --szary2: #6b5947;
  --linia: #eadfcf; --linia2: #d9c9b2; --linia-jasna: #f5eee4;
  --akcent: #c2512a; --akcent-ciemny: #a8431f; --akcent-jasny: #fbe3d4; --akcent-ramka: #f1b48f; --zielony: #3f8a63;
  --awatar-tlo: #fde1cc; --awatar-tekst: #7a3209; --wyslana: #fff8f1; --wybrany: #fff6ef;
  --inny1: #f6f0e7; --inny2: #f2ebe1; --inny-nr: #b3a594; --inny-hover: #efe6da; --inny-wybr: #f6ede2;
  --kol-nowe: #f1e3d3; --kol-w_toku: #efe5d6; --kol-czeka: #ece6ec; --kol-zamkniete: #e6ebe0; --kol-odrzucona: #ebe7e2;
  --cien-rgb: 80, 50, 20; --font-tytul: Fraunces, Georgia, serif; --lamele: 0px;
  --cien: 0 1px 2px rgba(var(--cien-rgb), .08), 0 8px 24px rgba(var(--cien-rgb), .06);
}
/* pastelowy niebieski */
html[data-motyw=niebieski] {
  --tlo: #edf3f9; --tlo2: #dde8f3; --tlo2-hover: #cfdeed; --karta: #fff; --pole: #fbfdff; --hover: #f2f7fc; --tlo-jasne: #f6f9fd; --weekend: #f7fafd;
  --tekst: #1d2a38; --szary: #46586c; --szary2: #56687c;
  --linia: #d9e4ef; --linia2: #c2d2e3; --linia-jasna: #e8eff7;
  --akcent: #3b70a8; --akcent-ciemny: #2f5c8c; --akcent-jasny: #dce9f7; --akcent-ramka: #9dbde0;
  --awatar-tlo: #d8e7f7; --awatar-tekst: #234d7a; --wyslana: #f3f8fd; --wybrany: #edf4fc;
  --inny1: #eef2f7; --inny2: #e6ecf3; --inny-nr: #98a7b8; --inny-hover: #e1e8f0; --inny-wybr: #e7eef7;
  --kol-nowe: #dbe7f5; --kol-w_toku: #f3edda; --kol-czeka: #e7e3f4; --kol-zamkniete: #ddefe5; --kol-odrzucona: #e5e9ee;
  --cien-rgb: 30, 60, 100;
}
/* grafit: szaro-srebrny, nowoczesny, akcenty orzecha, lamele z drewna wzdłuż lewej krawędzi */
html[data-motyw=grafit] {
  --tlo: #eceef0; --tlo2: #dfe2e6; --tlo2-hover: #d2d6db; --karta: #fbfbfc; --pole: #fff; --hover: #f2f3f5; --tlo-jasne: #f5f6f7; --weekend: #f6f7f8;
  --tekst: #1d2125; --szary: #474e56; --szary2: #5a626b;
  --linia: #d8dce0; --linia2: #c2c8ce; --linia-jasna: #e6e9ec;
  --akcent: #7a4b2a; --akcent-ciemny: #5e391f; --akcent-jasny: #efe3d8; --akcent-ramka: #c8a284;
  --awatar-tlo: #ebdfd4; --awatar-tekst: #5e391f; --wyslana: #f7f5f3; --wybrany: #f6f0ea;
  --inny1: #eef0f2; --inny2: #e6e9ec; --inny-nr: #9aa1a9; --inny-hover: #e1e4e8; --inny-wybr: #ebe6e1;
  --kol-nowe: #e6e1dc; --kol-w_toku: #e8e5dc; --kol-czeka: #e3e2ea; --kol-zamkniete: #dfe6e1; --kol-odrzucona: #e2e4e7;
  --cien-rgb: 20, 25, 30; --font-tytul: 'DM Sans', system-ui, sans-serif; --lamele: 36px;
}
html[data-motyw=grafit] body { padding-left: var(--lamele); background: linear-gradient(180deg, #f1f2f4, #e4e7ea) fixed; }
html[data-motyw=grafit] body::before {
  content: ""; position: fixed; z-index: 5; left: 0; top: 0; bottom: 0; width: var(--lamele); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .14)),
    repeating-linear-gradient(90deg, #6e4426 0 2px, #93613b 2px 6px, #7d5130 6px 8px, #2b2521 8px 12px);
}
html[data-motyw=grafit] .menu { background: linear-gradient(180deg, #e9ecef, #d8dde2); }
html[data-motyw=grafit] h1, html[data-motyw=grafit] .logo { letter-spacing: -.01em; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--tlo); color: var(--tekst); font: 15px/1.5 'DM Sans', system-ui, sans-serif; }
h1 { font-family: var(--font-tytul); font-weight: 650; margin: 0; }
a { color: var(--akcent); }

.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-tytul); font-size: 22px; font-weight: 650; }
.logo .znak { width: 36px; height: 36px; border-radius: 12px; background: var(--akcent); display: flex; align-items: center; justify-content: center; }

/* logowanie i ustawianie hasła */
body.wejscie { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.karta { width: 100%; max-width: 400px; background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; padding: 28px; box-shadow: var(--cien); }
.karta h1 { font-size: 28px; margin-top: 24px; }
.opis { color: var(--szary); margin: 4px 0 20px; }
form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 14px; }
input[type=text], input[type=password], input[type=email], select {
  font: inherit; padding: 11px 14px; border: 1px solid var(--linia2); border-radius: 12px; background: var(--pole); color: var(--tekst);
}
input:focus { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: var(--akcent); }
.przycisk {
  font: inherit; font-weight: 700; border: 0; border-radius: 12px; padding: 12px 18px; background: var(--akcent); color: #fff;
  cursor: pointer; text-decoration: none; text-align: center; display: inline-block;
}
.przycisk:hover { background: var(--akcent-ciemny); }
.przycisk.drugi { background: var(--tlo2); color: var(--tekst); font-weight: 500; }
.przycisk.drugi:hover { background: var(--tlo2-hover); }
.przycisk.maly { padding: 6px 12px; font-size: 13px; }
.alert, .info { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.alert { background: #f9e1d6; color: #7a2e12; }
.info { background: #e2f3ec; color: #1d5e45; }

/* panel */
.gora { display: flex; align-items: center; gap: 20px; padding: 18px 28px; flex-wrap: wrap; }
.menu { display: flex; gap: 4px; background: var(--tlo2); padding: 4px; border-radius: 14px; flex-wrap: wrap; }
.menu span, .menu a { padding: 7px 14px; border-radius: 10px; color: var(--szary); text-decoration: none; }
.menu a:hover { color: var(--tekst); }
.logo-link { color: inherit; text-decoration: none; }
.menu .wkrotce { opacity: .55; cursor: not-allowed; }
.menu .wybrane { background: var(--karta); color: var(--tekst); font-weight: 500; box-shadow: 0 1px 2px rgba(var(--cien-rgb), .12); }
/* komunikat po akcji: w wolnym miejscu nagłówka, nie przesuwa strony; po chwili gaśnie */
.gora { position: relative; }
.komunikat-miejsce { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }   /* podstawa 0: nigdy nie łamie nagłówka */
.komunikat { margin: 0; min-width: 0; padding: 7px 14px 7px 12px; border-radius: 12px; background: #e2f3ec; color: #1d5e45; font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: komunikat-gasnie .4s ease 8s forwards; }
.komunikat::before { content: "✓"; margin-right: 8px; font-weight: 700; }
@keyframes komunikat-gasnie { to { opacity: 0; visibility: hidden; } }
.konto { margin-left: auto; flex-direction: row; align-items: center; gap: 10px; }
.konto small { color: var(--szary2); display: block; font-size: 12px; line-height: 1.2; }
.awatar { width: 32px; height: 32px; border-radius: 16px; background: var(--awatar-tlo); color: var(--awatar-tekst); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.powitanie { padding: 24px 28px; max-width: 720px; }
.powitanie h1 { font-size: 30px; }

/* poczta */
.poczta { display: flex; gap: 20px; padding: 0 28px 28px; align-items: flex-start; }
.boczny { flex: 0 0 260px; display: flex; flex-direction: column; gap: 14px; }
.pudelko { background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.pudelko h2, .watek h1 { font: 650 17px var(--font-tytul); margin: 0 0 6px 6px; }
.skrzynka { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--tekst); text-decoration: none; font-size: 14px; }
.skrzynka:hover { background: var(--hover); }
.skrzynka.wybrana { background: var(--tlo2); }
.skrzynka .nazwa { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skrzynka b { font-size: 12px; color: var(--akcent); }
.kropka { width: 10px; height: 10px; border-radius: 5px; background: var(--kolor); flex-shrink: 0; }
.maly-opis { font-size: 12px; color: var(--szary2); margin: 6px 6px 0; }
.chipy { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.chip { font-size: 13px; border-radius: 8px; padding: 3px 9px; background: var(--tlo2); color: var(--tekst); text-decoration: none; }
.chip small { color: var(--szary2); }
.chip.wybrany { background: var(--akcent); color: #fff; }
.chip.wybrany small { color: var(--awatar-tlo); }
.lista { flex: 1 1 auto; min-width: 0; background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; overflow: hidden; }
.lista-gora { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--linia-jasna); flex-wrap: wrap; }
.lista-gora h1 { font-size: 22px; margin-right: 12px; overflow-wrap: anywhere; }
.filtry { display: flex; gap: 6px; flex-wrap: wrap; }
.filtr { border: 1px solid var(--linia2); border-radius: 20px; padding: 5px 12px; color: var(--szary); text-decoration: none; font-size: 14px; }
.filtr.wybrany { background: var(--tekst); border-color: var(--tekst); color: #fff; }
.szukaj { margin-left: auto; min-width: 240px; flex-direction: row; }
.szukaj input { font: inherit; width: 100%; padding: 8px 12px; border: 1px solid var(--linia2); border-radius: 12px; background: var(--pole); color: var(--tekst); }
.lista > .alert { margin: 12px 18px 0; }
.aktywne { margin: 0; padding: 10px 18px; font-size: 13px; color: var(--szary); background: var(--tlo-jasne); border-bottom: 1px solid var(--linia-jasna); }
.pusto { padding: 40px 18px; text-align: center; color: var(--szary); margin: 0; }
.watki { list-style: none; margin: 0; padding: 0; }
.watki li { border-bottom: 1px solid var(--linia-jasna); }
.watki a { display: flex; align-items: center; gap: 14px; padding: 12px 18px; color: var(--tekst); text-decoration: none; }
.watki a:hover { background: var(--hover); }
.watki .nowy { background: var(--tlo-jasne); }
.watki .nowy .nadawca, .watki .nowy .temat { font-weight: 700; }
.watki .nadawca { flex: 0 0 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watki .nadawca small, .kto small { color: var(--szary2); font-weight: 400; }
.watki .tekst { flex-grow: 1; min-width: 0; display: flex; gap: 8px; overflow: hidden; white-space: nowrap; }
.watki .temat { flex-shrink: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.watki .zajawka { color: var(--szary); overflow: hidden; text-overflow: ellipsis; }
.watki time { font-size: 12px; color: var(--szary2); flex: 0 0 56px; text-align: right; }
.spinacz { color: var(--szary2); display: flex; }
.zalacznik .ikona { vertical-align: -2px; }
.lista-dol { display: flex; gap: 10px 20px; align-items: center; flex-wrap: wrap; padding: 12px 18px; background: var(--tlo-jasne); color: var(--szary); font-size: 13px; }
.stronicowanie { display: flex; gap: 14px; }
.synch { margin-left: auto; color: var(--szary2); }

/* wątek */
.watek { flex-direction: column; align-items: stretch; max-width: 1400px; gap: 12px; }
.watek h1 { font-size: 26px; margin: 4px 0; overflow-wrap: anywhere; }
.watek-gora { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.skrzynka-chip { font-size: 13px; padding: 3px 10px; border-radius: 8px; background: var(--tlo2); border-left: 4px solid var(--kolor); }
.wiadomosc { background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; }
.wiadomosc.wyslana { border-left: 4px solid var(--zielony); }
.wiadomosc > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.wiadomosc > summary::-webkit-details-marker { display: none; }
.wiadomosc .kto { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiadomosc .kto .zajawka { display: block; color: var(--szary); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.wiadomosc[open] .kto .zajawka { display: none; }
.wiadomosc time { font-size: 13px; color: var(--szary2); white-space: nowrap; }
.szczegoly { padding: 0 18px 18px 62px; }
.szczegoly .do { font-size: 13px; color: var(--szary2); margin-bottom: 12px; overflow-wrap: anywhere; }
.tresc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; max-width: 860px; }   /* długie linie męczą – karta może być szersza od tekstu */
.cytat { color: var(--szary); margin: 6px 0; }
.cytat > summary { font-size: 12px; cursor: pointer; color: var(--szary2); width: fit-content; padding: 2px 8px; border-radius: 6px; background: var(--tlo2); list-style: none; }
.cytat[open] { border-left: 3px solid var(--linia2); padding-left: 10px; }
.zalaczniki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.zalacznik { font-size: 13px; padding: 6px 10px; border: 1px solid var(--linia2); border-radius: 10px; color: var(--tekst); text-decoration: none; overflow-wrap: anywhere; }
.zalacznik small { color: var(--szary2); }
.oryginal { margin-top: 14px; }
.oryginal > summary { font-size: 13px; color: var(--akcent); cursor: pointer; }
.oryginal .zew { display: inline-block; margin: 8px 0 0; font-size: 13px; color: var(--akcent); }
.oryginal iframe { width: 100%; height: 520px; border: 1px solid var(--linia); border-radius: 12px; margin-top: 8px; background: #fff; }
.uwaga { font-size: 13px; color: var(--szary2); }
.odpowiedz { background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.odpowiedz-gora { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.odpowiedz h2 { font: 650 18px var(--font-tytul); margin: 0; }
.tryb { display: flex; gap: 4px; background: var(--tlo2); padding: 4px; border-radius: 12px; }
.tryb a { padding: 5px 12px; border-radius: 9px; color: var(--szary); text-decoration: none; font-size: 13px; font-weight: 500; }
.tryb a.wybrane { background: var(--karta); color: var(--tekst); box-shadow: var(--cien); }
.odpowiedz .od { margin: 0; font-size: 14px; color: var(--szary); overflow-wrap: anywhere; }
.odpowiedz .uwaga { margin: 0; overflow-wrap: anywhere; }
.podpis { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; font-size: 14px; }
.podpis pre { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-left: 3px solid var(--linia2); color: var(--szary); font: 13px/1.45 'DM Sans', system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.podpis a { font-size: 13px; grid-row: 1; grid-column: 2; }
label.wybor { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
label.wybor input { width: 18px; height: 18px; accent-color: var(--akcent); margin: 0; }
textarea { font: inherit; padding: 11px 14px; border: 1px solid var(--linia2); border-radius: 12px; background: var(--pole); color: var(--tekst); resize: vertical; min-height: 160px; }
.zal-wybor { border: 1px solid var(--linia); border-radius: 12px; padding: 8px 14px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.zal-wybor legend { font-size: 14px; font-weight: 500; padding: 0 4px; }
.zal-wybor label.wybor { font-weight: 400; font-size: 14px; overflow-wrap: anywhere; }
.zal-wybor small, label.pliki small { color: var(--szary2); font-weight: 400; }
input[type=file] { font: inherit; font-size: 14px; padding: 10px; border: 1px dashed var(--linia2); border-radius: 12px; background: var(--pole); color: var(--szary); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 500; border: 0; border-radius: 9px; padding: 6px 12px; margin-right: 10px; background: var(--tlo2); color: var(--tekst); cursor: pointer; }
.podpis .uwaga { grid-column: 1 / -1; }
.wiad-akcje { margin: 14px 0 0; }
.napisz { white-space: nowrap; }
.lista-gora .napisz { display: none; }   /* na telefonie panel boczny jest pod listą – Napisz w nagłówku listy */
button:disabled { opacity: .6; cursor: progress; }
textarea:focus { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: var(--akcent); }
/* ustawienia */
.ustawienia { max-width: 720px; padding: 0 28px 28px; display: flex; flex-direction: column; gap: 16px; }
.ustawienia h1 { font-size: 26px; margin: 4px 0; }
.ramka { background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ramka h2 { font: 650 18px var(--font-tytul); margin: 0; }
.ramka h2 .skrzynka-chip { font: 500 14px 'DM Sans', system-ui, sans-serif; }
.ramka .uwaga { margin: 0; }
.ramka textarea { min-height: 90px; }
.ustawienia-link { color: inherit; text-decoration: none; }
.ustawienia-link:hover { color: var(--akcent); }
.z-panelu { margin-left: 6px; padding: 1px 7px; border-radius: 8px; background: #e2f3ec; color: #1d5e45; font-size: 12px; }

/* sprawy: tablica */
.sprawy { padding: 0 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.sprawy-gora { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.sprawy-gora h1 { font-size: 28px; margin-right: 6px; }
.sprawy-gora .filtr small { color: var(--akcent); font-weight: 700; }
.sprawy-gora .szukaj { margin-left: auto; }
.sprawy .aktywne { border: 0; border-radius: 12px; }
.sprawy-uklad { display: flex; gap: 18px; align-items: flex-start; }
.tablica { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.kolumna { --tlo-kol: var(--kol-nowe); --kolor: var(--akcent); background: var(--tlo-kol); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; transition: box-shadow .15s; }
.kolumna.nad { box-shadow: inset 0 0 0 2px var(--kolor); }
.kol-w_toku { --tlo-kol: var(--kol-w_toku); --kolor: #d39b1f; }
.kol-czeka { --tlo-kol: var(--kol-czeka); --kolor: #7d5bbf; }
.kol-zamkniete { --tlo-kol: var(--kol-zamkniete); --kolor: var(--zielony); }
.kol-odrzucona { --tlo-kol: var(--kol-odrzucona); --kolor: #8a7e72; }
.kolumna h2 { font: 650 16px var(--font-tytul); margin: 2px 4px; display: flex; align-items: center; gap: 8px; }
.kolumna h2 small { font: 500 13px 'DM Sans', system-ui, sans-serif; color: var(--szary2); }
.pusto-kol { margin: 6px 4px; color: var(--szary2); font-size: 13px; }
.kol-opis { margin: 0 4px; color: var(--szary2); font-size: 12px; }
.karta-sprawy { background: var(--karta); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; color: var(--tekst); text-decoration: none; box-shadow: 0 1px 2px rgba(var(--cien-rgb), .08); border: 1px solid transparent; cursor: pointer; }
.karta-sprawy:hover { border-color: var(--linia2); }
.karta-sprawy.wyroznij { border-color: var(--akcent-ramka); box-shadow: 0 0 0 3px var(--akcent-jasny); }
.karta-sprawy.ciagnieta { opacity: .5; }
.karta-gora { display: flex; align-items: center; gap: 8px; }
.karta-gora time { margin-left: auto; font-size: 12px; color: var(--szary2); white-space: nowrap; }
.karta-sprawy .tytul { font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; margin-top: 2px; }
.karta-sprawy .klient { font-size: 13px; color: var(--szary); overflow-wrap: anywhere; }
.fakty { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--szary); }
.fakty .ikona, .liczba .ikona { vertical-align: -2px; }
.karta-dol { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.liczba { flex-grow: 1; font-size: 12px; color: var(--szary2); display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.liczba .nowa { color: var(--akcent); }
.awatar.maly { width: 26px; height: 26px; font-size: 11px; flex-shrink: 0; }
.awatar.brak { background: transparent; border: 1.5px dashed var(--linia2); color: var(--szary2); }
.zrodlo { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; }
.zrodlo-formularz { background: #fde8dc; color: #8f3412; }
.zrodlo-email { background: #efe9f9; color: #4d2f86; }
.zrodlo-reczna { background: #e2f3ec; color: #1d5e45; }
.zespol { flex: 0 0 230px; }
.zespol .maly-opis a { display: block; margin-top: 6px; }

/* sprawy: karta sprawy */
.okruszki { font-size: 13px; color: var(--szary2); }
.okruszki a { color: var(--szary); }
.sprawa { padding: 0 28px 28px; display: flex; gap: 20px; align-items: flex-start; }
.sprawa-tresc { flex: 1 1 auto; min-width: 0; max-width: 1400px; display: flex; flex-direction: column; gap: 14px; }
.sprawa-gora { display: flex; gap: 12px 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sprawa-naglowek { min-width: 0; flex: 1 1 320px; }
.sprawa-naglowek h1 { font-size: 28px; margin: 6px 0 2px; overflow-wrap: anywhere; }
.chipy-karty { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.klient-linia { margin: 0; color: var(--szary); font-size: 14px; overflow-wrap: anywhere; }
.sprawa-przyciski { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.w-linii { display: inline-flex; flex-direction: row; gap: 0; margin: 0; }
.przycisk.zielony { background: var(--zielony); }
.przycisk.zielony:hover { background: #2f6e4e; }
.etapy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: var(--karta); border: 1px solid var(--linia); border-radius: 16px; padding: 6px; }
.etap { font: inherit; font-size: 13px; font-weight: 500; border: 0; border-radius: 11px; padding: 9px 8px; background: transparent; color: var(--szary); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.etap .kropka { --kolor: var(--linia2); }
.etap:hover { background: var(--hover); }
.etap.bylo .kropka { --kolor: var(--szary2); }
.etap.teraz { background: var(--tlo2); color: var(--tekst); font-weight: 700; cursor: default; opacity: 1; }
.etap-nowe.teraz .kropka { --kolor: var(--akcent); }
.etap-w_toku.teraz .kropka { --kolor: #d39b1f; }
.etap-czeka.teraz .kropka { --kolor: #7d5bbf; }
.etap-zamkniete.teraz .kropka { --kolor: var(--zielony); }
.os { display: flex; flex-direction: column; gap: 10px; }
.os .wiadomosc.wyslana { margin-left: 40px; background: var(--wyslana); }
.notatka { background: #fff4d6; border: 1px dashed #e0b84c; border-radius: 16px; padding: 12px 16px; margin-left: 40px; scroll-margin-top: 16px; }
.notatka-gora { margin: 0 0 4px; display: flex; gap: 8px; align-items: baseline; font-size: 14px; flex-wrap: wrap; }
.notatka-gora small { color: #8a6a12; }
.notatka-gora time { margin-left: auto; font-size: 13px; color: var(--szary2); }
.zmiana { margin: 0; text-align: center; font-size: 13px; color: var(--szary); scroll-margin-top: 16px; }
.zmiana span { background: var(--tlo2); padding: 3px 10px; border-radius: 8px; }
.zmiana small { color: var(--szary2); margin-left: 4px; }
.sprawa-bok { flex: 0 0 320px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.sprawa-bok .ramka { gap: 10px; }
.sprawa-bok input[type=text], .sprawa-bok input[type=email], .sprawa-bok select { padding: 8px 12px; }
.watek-link { display: flex; gap: 10px; align-items: center; color: var(--tekst); text-decoration: none; font-size: 14px; padding: 6px 4px; border-radius: 10px; overflow-wrap: anywhere; }
.watek-link:hover { background: var(--hover); }
.watek-link small { color: var(--szary2); }
.sprawa-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 10px; border-radius: 8px; background: var(--tlo2); color: var(--tekst); text-decoration: none; font-weight: 500; }
.sprawa-chip:hover { background: var(--tlo2-hover); }
.sprawa-chip .kropka { --kolor: var(--akcent); }
.sprawa-chip.status-w_toku .kropka { --kolor: #d39b1f; }
.sprawa-chip.status-czeka .kropka { --kolor: #7d5bbf; }
.sprawa-chip.status-zamkniete .kropka { --kolor: var(--zielony); }
.sprawa-chip.status-odrzucona .kropka { --kolor: #8a7e72; }
/* kontakty i obiekty */
.rodzaj { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; flex-shrink: 0; background: var(--tlo2); color: var(--szary); }
.rodzaj-wlasciciel { background: #e2f3ec; color: #1d5e45; }
.rodzaj-biuro { background: #efe9f9; color: #4d2f86; }
.rodzaj-wyjazd { background: #fde8dc; color: #8f3412; }
.rodzaj.nieaktywny { background: #ebe7e2; color: #6b5947; }
.watki .tekst { align-items: center; }
.ile-spraw { flex: 0 0 110px; font-size: 13px; color: var(--szary2); text-align: right; white-space: nowrap; }
.ile-spraw b { color: var(--akcent); }
.obiekty .nadawca { flex-basis: 300px; }
.watek-link time { margin-left: auto; white-space: nowrap; font-size: 13px; color: var(--szary2); }
.watek-link .sprawa-chip { flex-shrink: 0; }
.kontakt-linia { margin: 0 4px; font-size: 14px; overflow-wrap: anywhere; }
.adres-wiersz { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; padding: 2px 4px; }
.adres-wiersz span { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }
.usun-x { font: inherit; font-size: 18px; line-height: 1; border: 0; background: none; color: var(--szary2); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.usun-x:hover { background: #f9e1d6; color: #7a2e12; }
.adres-dodaj { flex-direction: row; gap: 8px; }
.adres-dodaj input { flex: 1 1 auto; min-width: 0; }
.usun-kontakt { align-items: flex-start; }
.maly-link { font-size: 12px; font-weight: 400; margin-left: 6px; }
.pole-szerokie { grid-column: 1 / -1; }
input[type=search] { -webkit-appearance: none; appearance: none; }
/* nowa sprawa */
.pola2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.przyciski { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .poczta { flex-direction: column; align-items: stretch; }
  .boczny { flex: none; order: 2; }
  .boczny .napisz { display: none; }
  .lista-gora .napisz { display: inline-block; }
  .watki .nadawca { flex-basis: 120px; }
  .watki .tekst { flex-direction: column; gap: 0; align-items: flex-start; }
  .watki .temat { max-width: none; }
  .sprawy-uklad, .sprawa { flex-direction: column; align-items: stretch; }
  .zespol, .sprawa-bok { flex: none; position: static; }
  .sprawa-bok { order: 2; }
}
@media (max-width: 640px) {
  html[data-motyw=grafit] { --lamele: 10px; }
  .poczta, .ustawienia, .sprawy, .sprawa { padding: 0 16px 16px; }
  .sprawy-gora .szukaj { order: 5; }
  .nowa-sprawa { margin-left: auto; }
  .etapy { grid-template-columns: 1fr 1fr; }
  .os .wiadomosc.wyslana, .notatka { margin-left: 16px; }
  .pola2 { grid-template-columns: 1fr; }
  .sprawa-naglowek h1 { font-size: 23px; }
  .szukaj { min-width: 0; width: 100%; margin-left: 0; }
  .watki a { flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px; }
  .watki .nadawca { flex: 1 1 auto; }
  .ile-spraw { flex-basis: auto; }
  .watki .tekst { flex: 1 1 100%; order: 5; }
  .szczegoly { padding: 0 14px 14px; }
  .synch { margin-left: 0; }
  .gora { padding: 14px 16px; gap: 12px; }
  .komunikat-miejsce { position: absolute; top: 14px; right: 16px; max-width: calc(100% - 150px); justify-content: flex-end; }   /* obok logo */
  .konto { margin-left: 0; width: 100%; }
  .powitanie { padding: 16px; }
}

/* kalendarz */
.menu .licznik { display: inline-block; min-width: 19px; margin-left: 4px; padding: 0 5px; border-radius: 10px; background: var(--akcent); color: #fff; font-size: 11px; line-height: 19px; text-align: center; }
.kalendarz { padding: 0 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.kal-gora h1 { min-width: 9.5em; }
.kal-nawigacja { display: flex; gap: 6px; }
.kal-nawigacja .przycisk { min-width: 36px; }
.kal-uklad { display: flex; gap: 18px; align-items: flex-start; }
.kal-glowny { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.kal-bok { flex: 0 0 340px; display: flex; flex-direction: column; gap: 14px; }
.kal-bok h2 small, .ramka h2 small { font: 500 13px 'DM Sans', system-ui, sans-serif; color: var(--szary2); margin-left: 4px; }
.legenda { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--szary); align-items: center; }
.legenda span::before { content: ""; display: inline-block; width: 22px; height: 10px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; background: var(--pasek-tlo); border: 1px solid var(--pasek-ramka); }
.legenda small { color: var(--szary2); }
/* kolory pozycji: wspólne dla pasków, legendy, obłożenia i list */
.pobyt { --pasek-tlo: var(--zielony); --pasek-ramka: var(--zielony); --pasek-tekst: #fff; }
.pobyt.zapytanie { --pasek-tlo: #e2f3ec; --pasek-ramka: #8cc4a8; --pasek-tekst: #1d5e45; }
.zadanie { --pasek-tlo: #fde8dc; --pasek-ramka: #f1b48f; --pasek-tekst: #8f3412; }
.zadanie.zrobione { --pasek-tlo: #f1ece5; --pasek-ramka: #e0d6c8; --pasek-tekst: #8a7e72; }
.wydarzenie { --pasek-tlo: #efe9f9; --pasek-ramka: #c7b6ea; --pasek-tekst: #4d2f86; }
.kolizja { --pasek-tlo: var(--akcent); --pasek-ramka: var(--akcent-ciemny); --pasek-tekst: #fff; }

.miesiac { background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; overflow: hidden; }
.dni-tyg { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--linia); }
.dni-tyg span { padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--szary2); text-transform: uppercase; letter-spacing: .04em; }
.dni-tyg .weekend { color: var(--akcent); }
.tydzien { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 30px repeat(var(--pasy), 24px) minmax(14px, 1fr); row-gap: 3px; min-height: 118px; border-bottom: 1px solid var(--linia); }
.tydzien:last-child { border-bottom: 0; }
.dzien { grid-row: 1 / -1; display: flex; flex-direction: column; padding: 6px 8px 4px; border-left: 1px solid var(--linia); color: var(--tekst); text-decoration: none; min-width: 0; }
.dzien[style*="grid-column: 1"] { border-left: 0; }
.dzien:hover { background: var(--hover); }
.dzien.weekend { background: var(--weekend); }
.dzien .nr { font-size: 14px; font-weight: 500; width: max-content; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: -2px 0 0 -4px; }
.dzien.dzis .nr { background: var(--akcent); color: #fff; font-weight: 700; }
.dzien.wybrany { box-shadow: inset 0 0 0 2px var(--akcent); background: var(--wybrany); }
/* dni sąsiednich miesięcy – wyraźnie słabiej */
.dzien.inny { background: repeating-linear-gradient(135deg, var(--inny1) 0 6px, var(--inny2) 6px 12px); }
.dzien.inny .nr { color: var(--inny-nr); font-weight: 400; }
.dzien.inny:hover { background: var(--inny-hover); }
.dzien.inny.wybrany { background: var(--inny-wybr); }
.pasek.poza { opacity: .45; }
.dzien .wiecej { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--szary); }
.pasek { z-index: 1; margin: 0 4px; min-width: 0; display: flex; align-items: center; padding: 0 7px; border-radius: 7px; font-size: 12px; line-height: 1; text-decoration: none;
  background: var(--pasek-tlo); color: var(--pasek-tekst); border: 1px solid var(--pasek-ramka); }
.pasek:hover { filter: brightness(.96); box-shadow: 0 1px 3px rgba(var(--cien-rgb), .2); }
.pasek.wczesniej { margin-left: 0; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pasek.dalej { margin-right: 0; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pasek.zrobione .pasek-tekst { text-decoration: line-through; }
.pasek-tekst { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kal-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.kal-wiersz { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; border-radius: 10px; font-size: 14px; }
.kal-wiersz:hover { background: var(--hover); }
.kal-tekst { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.kal-tekst > a { color: var(--tekst); text-decoration: none; font-weight: 500; }
.kal-tekst > a:hover { color: var(--akcent); }
.kal-tekst small { color: var(--szary2); font-size: 12px; }
.kal-tekst small b { color: var(--akcent); }
.kal-wiersz.zrobione .kal-tekst > a { text-decoration: line-through; color: var(--szary2); }
.znacznik { width: 20px; height: 12px; border-radius: 4px; margin-top: 4px; flex-shrink: 0; background: var(--pasek-tlo); border: 1px solid var(--pasek-ramka); }
.odhacz { display: block; margin: 0; }
.ptaszek { width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 2px solid #e09a72; background: var(--karta); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.ptaszek:hover { background: #fde8dc; }
.ptaszek.tak { background: var(--zielony); border-color: var(--zielony); }
.ptaszek.tak::after, .ptaszek:hover::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
.ptaszek:hover:not(.tak)::after { color: var(--akcent); }
.kal-wiersz.zalegle .ptaszek { border-color: var(--akcent); }
.kal-dodaj summary { list-style: none; width: max-content; }
.kal-dodaj summary::-webkit-details-marker { display: none; }
.kal-dodaj[open] summary { margin-bottom: 12px; }
.kal-form { gap: 10px; }
.kal-form input[type=text], .kal-form select, input[type=date], input[type=time] { font: inherit; padding: 8px 12px; border: 1px solid var(--linia2); border-radius: 12px; background: var(--pole); color: var(--tekst); min-width: 0; width: 100%; }
.kal-form textarea { min-height: 60px; }
.rodzaje { display: flex; gap: 16px; }
.pola3 { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 8px; }
.pola3 label { font-size: 13px; }
.podpowiedz { margin-top: -6px; font-size: 12px; color: var(--zielony); }
.podpowiedz.zle { color: var(--akcent); }

.oblozenie-ramka { overflow-x: auto; background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; }
.oblozenie { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.oblozenie th, .oblozenie td { border-bottom: 1px solid var(--linia); }
.oblozenie thead th { padding: 6px 0; min-width: 26px; font-weight: 700; color: var(--szary); text-align: center; line-height: 1.2; }
.oblozenie thead th small { display: block; font-weight: 400; color: var(--szary2); }
.oblozenie thead th.dzis { color: var(--akcent); }
.oblozenie th[scope=row], .oblozenie thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--karta); text-align: left; padding: 6px 12px; min-width: 200px; max-width: 260px; font-size: 13px; font-weight: 500; border-right: 1px solid var(--linia); }
.oblozenie th[scope=row] a { color: var(--tekst); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oblozenie td { height: 30px; padding: 2px 1px; text-align: center; color: #fff; font-weight: 700; }
.oblozenie td.weekend, .oblozenie thead th.weekend { background: var(--weekend); }
.oblozenie td.pobyt, .oblozenie td.kolizja { background: var(--pasek-tlo); background-clip: content-box; color: var(--pasek-tekst); }
.oblozenie td a { display: block; height: 100%; min-height: 24px; }
.oblozenie tbody tr:last-child > * { border-bottom: 0; }

@media (max-width: 1100px) {
  .kal-uklad { flex-direction: column; align-items: stretch; }
  .kal-bok { flex: none; }
}
@media (max-width: 640px) {
  .kalendarz { padding: 0 12px 16px; }
  .kal-gora h1 { min-width: 0; font-size: 24px; flex: 1 1 auto; }
  .tydzien { grid-template-rows: 26px repeat(var(--pasy), 7px) minmax(10px, 1fr); row-gap: 2px; min-height: 64px; }
  .dzien { padding: 4px 3px 2px; align-items: center; }
  .dzien .nr { font-size: 13px; margin: 0; padding: 0 4px; min-width: 22px; height: 22px; }
  .dzien .wiecej { font-size: 10px; }
  .dni-tyg span { padding: 6px 0; text-align: center; font-size: 11px; }
  .pasek { margin: 0 2px; padding: 0; border-radius: 4px; }
  .pasek-tekst { display: none; }
  .legenda { font-size: 12px; }
  .legenda small { flex-basis: 100%; }
  .pola3 { grid-template-columns: 1fr 1fr; }
  .pola3 label:last-child { grid-column: 1 / -1; }
  .oblozenie th[scope=row], .oblozenie thead th:first-child { min-width: 130px; max-width: 150px; padding: 6px 8px; }
}

/* Ustawienia: zakładki, motyw, hasło; Zespół: konta, link do hasła, logowania */
.zakladki { width: fit-content; }
.motywy { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; }
.motyw-wybor { flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--linia); border-radius: 12px; cursor: pointer; font-size: 14px; color: var(--tekst); }
.motyw-wybor:has(input:checked) { border-color: var(--akcent); box-shadow: 0 0 0 2px var(--akcent-jasny); }
.motyw-wybor input { accent-color: var(--akcent); }
.probka { display: inline-flex; border-radius: 7px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
.probka i { width: 14px; height: 26px; }
.probka-cieply i:nth-child(1) { background: #f6f1ea; } .probka-cieply i:nth-child(2) { background: #ffffff; } .probka-cieply i:nth-child(3) { background: #c2512a; }
.probka-niebieski i:nth-child(1) { background: #edf3f9; } .probka-niebieski i:nth-child(2) { background: #ffffff; } .probka-niebieski i:nth-child(3) { background: #3b70a8; }
.probka-grafit i:nth-child(1) { background: repeating-linear-gradient(90deg, #6e4426 0 2px, #93613b 2px 5px, #2b2521 5px 7px); } .probka-grafit i:nth-child(2) { background: linear-gradient(#f4f5f6, #d9dcdf); } .probka-grafit i:nth-child(3) { background: #7a4b2a; }
.konta { list-style: none; margin: 0; padding: 0; }
.konta li + li { border-top: 1px solid var(--linia-jasna); }
.konta a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; color: inherit; text-decoration: none; border-radius: 8px; }
.konta a:hover { background: var(--hover); }
.konto-dane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.konto-dane small.ja { display: inline; font-weight: 400; }
.konto-dane small { color: var(--szary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konta time { font-size: 12px; color: var(--szary2); white-space: nowrap; min-width: 130px; text-align: right; }
.stan { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.stan-ok { background: #e2f3ec; color: #1d5e45; }
.stan-czeka { background: #fdf0d8; color: #855306; }
.stan-blokada, .stan-nieaktywny { background: #fbe4e1; color: #9b2c1f; }
h2 small { font-size: 13px; font-weight: 400; color: var(--szary); margin-left: 8px; }
.link-hasla { border: 2px solid var(--akcent); }
.kopiuj { display: flex; gap: 8px; }
.kopiuj input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 13px; }
.zle { color: #9b2c1f; }
.logowania { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.logowania li { display: flex; gap: 12px; padding: 5px 0; border-top: 1px solid var(--linia-jasna); }
.logowania li:first-child { border-top: 0; }
.logowania time { min-width: 120px; color: var(--szary); }
.logowania .nieudane span { color: #9b2c1f; }
.logowania small { margin-left: auto; color: var(--szary2); }
@media (max-width: 640px) {
  .konta a { flex-wrap: wrap; row-gap: 6px; }
  .konto-dane { flex-basis: calc(100% - 40px); }
  .konta .rodzaj { margin-left: 38px; }
  .konta time { min-width: 0; text-align: left; margin-left: auto; }
  .kopiuj { flex-direction: column; }
}