.cem-topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#fff}
.cem-topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.cem-topbar-title{margin:0;font-size:clamp(16px,4vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* ALARM O KOPII ZAPASOWEJ -- musi sie roznic od spokojnych plakietek obok (audyt 24.08.2026,
   problem 17: nieudana kopia nie docierala do nikogo). Czerwony, ale bez migania. */
.cem-alarm-badge{display:inline-block;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;
  border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;cursor:help;margin-left:8px}
.cem-readonly-badge{flex:none;background:#f1f5f9;color:#475569;border:1px solid #cbd5e1;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;white-space:nowrap}
body.cem-readonly .cem-hide-if-readonly{display:none!important}
@media (max-width:760px){
  .cem-topbar-inner{padding:10px 14px}
  .cem-month-picker select{padding:9px 8px;font-size:13px}
  .cem-month-picker button{padding:0 10px}
}

.cem-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.18);z-index:15}
.cem-overlay.show{display:block}
.cem-drawer{position:fixed;right:-560px;top:0;bottom:0;width:560px;max-width:100vw;background:#fff;box-shadow:-30px 0 70px rgba(15,23,42,.2);z-index:20;padding:24px;overflow:auto;transition:.2s}
.cem-drawer--wide{width:760px;right:-760px;padding:8px 26px}
.cem-drawer.open{right:0}
.cem-drawer-close{float:right;border:0;background:transparent;font-size:26px;cursor:pointer;line-height:1}
.cem-drawer h2{margin-top:0}
.cem-drawer--wide h2{margin:0 0 4px;font-size:19px}

/* Trwaly, niedestrukcyjny komunikat wewnatrz otwartej szuflady (konflikt/odrzucenie zapisu w tle,
   patrz ui.js: showDrawerBlockedNotice) -- NIGDY nie zastepuje tresci formularza, tylko dokleja sie
   jako dodatkowy blok. */
.cem-drawer-blocked-notice{margin-top:16px;padding:14px 16px;background:#fef2f2;
  border:1px solid #fecaca;border-radius:10px;color:#7f1d1d;font-size:13.5px;line-height:1.5}
.cem-drawer-blocked-notice p{margin:0 0 10px}

/* Komunikat "nie udalo sie odswiezyc" (ui.js: showDrawerTransientError) -- nieudana proba
   loadFromServer() po kliknieciu "Odśwież dane", tez WYLACZNIE przez appendChild. */
.cem-drawer-refresh-error{margin-top:10px;color:#b91c1c;font-size:13px;font-weight:600}
.cem-form{display:flex;flex-direction:column;gap:12px}
.cem-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#475569}
.cem-form input,.cem-form select,.cem-form textarea{border:1px solid #cbd5e1;border-radius:10px;padding:9px 11px;font:inherit}
.cem-form-error{color:#c0392b;font-size:13px}
.cem-form-hint{color:#c0392b;font-size:11.5px;font-weight:600;line-height:1.2;margin-top:-2px}
/* Wyjasnienie, nie blad -- `cem-form-hint` jest czerwony i pogrubiony, bo sluzy do bledow pola.
   Nota przy koszcie powtarzalnym ma tlumaczyc, a nie krzyczec (wlasciciel 24.08.2026: otworzyl
   w sierpniu skladke zaczeta w marcu i data wygladala jak pomylka). */
.cem-form-nota{color:#475569;font-size:12px;line-height:1.45;margin:-2px 0 6px;
  background:#f8fafc;border-left:3px solid #94a3b8;padding:7px 10px;border-radius:0 6px 6px 0}
.cem-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cem-form-row > label{min-width:0}
.cem-form-compact{gap:3px}
.cem-form-compact label{gap:1px}
.cem-form-compact .cem-form-row{gap:9px}
.cem-form-compact input,.cem-form-compact select{padding:6px 10px}
.cem-form-compact textarea{padding:6px 10px;resize:vertical;min-height:30px}
.cem-form-compact .cem-choice-btn{padding:5px 12px;font-size:12.5px}
.cem-form-compact .cem-form-total{padding:7px 12px;font-size:13px}

.cem-staff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(680px,100%),1fr));gap:16px;padding:20px}
.cem-checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:4px 12px;max-height:220px;overflow-y:auto;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;background:#f8fafc;margin-top:4px}
.cem-checkbox-item{display:flex!important;flex-direction:row!important;align-items:center;gap:7px;font-size:13px;font-weight:400!important;color:#334155}
.cem-checkbox-item input{width:auto!important}
.cem-staff-card{--tint-card:#e8f0fe;--tint-box:#d3e3fb;--tint-border:#a9c8ec;
  background:var(--tint-card);border:1px solid var(--tint-border);border-radius:16px;padding:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -14px rgba(15,23,42,.08);transition:box-shadow .18s ease,transform .18s ease}
.cem-staff-card:nth-child(6n+2){--tint-card:#e6f7ec;--tint-box:#cdf0da;--tint-border:#9edcb6}
.cem-staff-card:nth-child(6n+3){--tint-card:#f1eafd;--tint-box:#e2d2f8;--tint-border:#c6a4e8}
.cem-staff-card:nth-child(6n+4){--tint-card:#fdf2dd;--tint-box:#fbe3b3;--tint-border:#edbf6a}
.cem-staff-card:nth-child(6n+5){--tint-card:#fce9f0;--tint-box:#f9d3e1;--tint-border:#eeaac8}
.cem-staff-card:nth-child(6n){--tint-card:#e6f6f6;--tint-box:#c6ecec;--tint-border:#86d6d6}
.cem-staff-card:hover{box-shadow:0 2px 6px rgba(15,23,42,.06),0 16px 32px -14px rgba(15,23,42,.14);transform:translateY(-1px)}
.cem-staff-card header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cem-staff-card h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.cem-staff-card .muted{color:#64748b;font-size:13px}
.cem-staff-card .cem-actions-row .cem-btn{border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:500;color:#475569;border-color:#e2e8f0;background:#fff}
.cem-staff-card .cem-actions-row .cem-btn:hover{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.cem-staff-card .cem-actions-row .cem-btn.danger{color:#b91c1c;border-color:#fecaca;background:#fff7f7}
.cem-staff-card .cem-actions-row .cem-btn.danger:hover{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}
.cem-staff-section{border:1px solid #eef2f7;border-radius:10px;padding:10px 12px;margin-top:10px}
.cem-staff-section-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#94a3b8;margin:0 0 6px}
.cem-staff-section .cem-rule-row:first-of-type{border-top:0}
.cem-badge{border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700;background:#f1f5f9;color:#64748b}
.cem-badge-num{width:28px;height:28px;border-radius:50%;background:#eef2ff;color:#4338ca;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.cem-badge.ok{background:#dcfce7;color:#166534}
.cem-badge.danger{background:#fee2e2;color:#b91c1c}
.cem-badge.warn{background:#fef3c7;color:#92400e}
/* PRZYCISKI (wlasciciel 2026-08-18: "popraw wszedzie ten przycisk -- ma byc ladniejszy").
   Jedna definicja dla calego programu: mocniejsze zaokraglenie, wieksze pole klikniecia,
   miekki cien zamiast plaskiej ramki i wyrazna reakcja na najechanie/przycisniecie. */
.cem-btn{border:1px solid #dbe2ea;background:linear-gradient(180deg,#fff,#f8fafc);color:#0f172a;
  border-radius:10px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;line-height:1.2;
  cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.06);
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .08s ease}
.cem-btn:hover{background:#f1f5f9;border-color:#c7d2fe;box-shadow:0 2px 6px rgba(15,23,42,.09)}
.cem-btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.cem-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.28)}
.cem-btn.primary{background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;
  box-shadow:0 1px 3px rgba(37,99,235,.35)}
.cem-btn.primary:hover{background:linear-gradient(180deg,#2563eb,#1d4ed8);border-color:#1d4ed8;
  box-shadow:0 3px 10px rgba(37,99,235,.32)}
.cem-btn:disabled{cursor:default;opacity:.55;box-shadow:none}
.cem-btn:disabled:hover{transform:none}
.cem-btn.primary:disabled{background:#cbd5e1;border-color:#cbd5e1;color:#64748b;opacity:1;box-shadow:none}
.cem-btn.primary:disabled:hover{background:#cbd5e1;border-color:#cbd5e1;box-shadow:none}
.cem-btn.danger{color:#b91c1c;border-color:#fecaca;background:linear-gradient(180deg,#fff,#fff5f5)}
.cem-btn.danger:hover{background:#fef2f2;border-color:#fca5a5;box-shadow:0 2px 6px rgba(185,28,28,.12)}
.cem-btn.book-cta{background:#dc2626;color:#fff;border-color:#dc2626;font-weight:600;padding:9px 16px;box-shadow:0 1px 3px rgba(220,38,38,.35)}
.cem-btn.book-cta:hover{background:#b91c1c;border-color:#b91c1c}
.cem-btn-icon{display:inline-flex;align-items:center;gap:7px}
.cem-btn-icon svg{flex:none}
.cem-btn-icon-only{padding:10px;width:48px;height:48px;justify-content:center;border-radius:50%;
  background:#eff6ff;border-color:#dbeafe;color:#2563eb;box-shadow:0 1px 2px rgba(37,99,235,.08);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}
.cem-btn-icon-only:hover{background:#dbeafe;border-color:#bfdbfe;color:#1d4ed8;transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(37,99,235,.4)}
.cem-btn-icon-only:active{transform:translateY(0)}

/* "Uwagi" (dayNotes) w Przychody dnia -- na wyrazne zyczenie uzytkownika: pelna szerokosc panelu,
   nie waski domyslny <textarea>. */
.cem-day-note-textarea{display:block;width:100%;border:1px solid #cbd5e1;border-radius:10px;
  padding:10px 12px;font:inherit;font-size:14px;color:#0f172a;resize:none;overflow:hidden}
.cem-day-note-textarea:focus{outline:none;border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.cem-actions-row{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.cem-owner-block{background:var(--tint-box,#f8fafc);border-radius:10px;padding:10px 12px;margin-top:8px}
.cem-owner-block h4{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#94a3b8}
.cem-owner-block .row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}
.cem-owner-block .total{font-weight:700;border-top:1px solid #e2e8f0;margin-top:4px;padding-top:5px}
.cem-owner-block.result{background:#eff6ff;border:1px solid #bfdbfe}
.cem-owner-block.result h4{color:#2563eb}
.cem-owner-block.result .total b{color:#2563eb;font-size:16px}
.cem-owner-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.cem-owner-split .cem-owner-block{margin-top:0;border-left:3px solid transparent}
.cem-owner-split .cem-owner-block.piotr{border-left-color:#2563eb}
.cem-owner-split .cem-owner-block.robert{border-left-color:#ea580c}
.cem-rule-row{display:grid;grid-template-columns:280px 1fr auto;align-items:center;gap:14px;padding:8px 6px;border-top:1px solid #eef2f7;font-size:13px;border-radius:6px;transition:background-color .12s ease;overflow-x:auto}
.cem-rule-row>span{text-align:left;white-space:nowrap}
.cem-rule-row>span:first-child{white-space:normal}
.cem-rule-row:hover{background:rgba(15,23,42,.05)}
@media (max-width:760px){
  .cem-rule-row{grid-template-columns:1fr;justify-items:start;gap:4px;overflow-x:visible}
}
.cem-rule-row:first-of-type{border-top:0}
.cem-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px 0}
.cem-income-toolbar input[type="date"]{border:1px solid #dbe3ef;border-radius:9px;padding:9px 12px;font:inherit;font-size:14px;background:#fff;
  color:#0f172a;transition:border-color .15s ease,box-shadow .15s ease}
.cem-income-toolbar input[type="date"]:focus{outline:none;border-color:#93b4f5;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.cem-income-toolbar .cem-btn{border-radius:9px;padding:9px 16px;font-weight:600;transition:background-color .15s ease,transform .1s ease,box-shadow .15s ease}
.cem-income-toolbar .cem-btn.primary{box-shadow:0 1px 2px rgba(37,99,235,.15)}
.cem-income-toolbar .cem-btn.primary:hover{background:#1d4ed8;border-color:#1d4ed8}
.cem-income-toolbar .cem-btn:not(.primary):hover{background:#f8fafc;border-color:#c7d2fe}
.cem-income-toolbar .cem-btn:active{transform:translateY(1px)}
.cem-month-picker{display:flex;align-items:stretch;border:1px solid #dbe3ef;border-radius:999px;background:#fff;overflow:hidden}
.cem-month-picker button{border:0;background:transparent;color:#2563eb;font-size:16px;font-weight:600;padding:0 14px;cursor:pointer;display:flex;align-items:center}
.cem-month-picker button:disabled{color:#cbd5e1;cursor:default}
.cem-month-picker button:first-child{border-right:1px solid #eef1f6}
.cem-month-picker button:last-child{border-left:1px solid #eef1f6}
/* appearance:none zdejmuje natywna "prostokatna" ramke/tlo przegladarki wokol <select> (samo
   border:0 tego nie robi we wszystkich przegladarkach) -- bez tego "Lipiec 2026" wygladalo inaczej
   (bardziej kanciasto) niz zaokraglone przyciski Dzien/Miesiac/Rok obok. Wlasna strzalka w tle,
   bo appearance:none usuwa tez natywna strzalke rozwijania. */
.cem-month-picker select{border:0;background:transparent;font:inherit;font-size:14px;padding:9px 22px 9px 14px;color:#0f172a;cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center}
.cem-month-picker select:focus,.cem-month-picker button:focus{outline:none}
/* <input type="date"> (uzywany w widoku "Dzien") ma wlasna, kanciasta ramke przegladarki, ktora nie
   byla tu wczesniej zdejmowana (tylko select/button byly stylowane) -- stad wygladala inaczej niz
   reszta zaokraglonego paska. */
.cem-month-picker input[type="date"],.cem-month-picker input[type="month"]{border:0;background:transparent;font:inherit;font-size:13.5px;padding:9px 10px;color:#0f172a;cursor:pointer}
.cem-month-picker input[type="date"]:focus,.cem-month-picker input[type="month"]:focus{outline:none}
.cem-month-picker input[type="date"]::-webkit-calendar-picker-indicator,.cem-month-picker input[type="month"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55}
@media (max-width:760px){
  .cem-month-picker input[type="date"],.cem-month-picker input[type="month"]{padding:9px 6px;font-size:12.5px}
}
@media (max-width:760px){
  .cem-month-picker select{padding:9px 20px 9px 8px;font-size:13px}
}
.cem-self-block{border-left:4px solid #2563eb;background:var(--tint-box,#f8fafc);border-radius:10px;padding:12px;margin-top:10px}
.cem-self-block.robert{border-left-color:#ea580c}
.cem-self-block h4{margin:0 0 8px;font-size:14px}
.cem-self-block h4 small{font-weight:400;color:#64748b}
.cem-self-footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.cem-self-stats{display:flex;gap:10px;flex-wrap:wrap}
.cem-self-stat{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:8px 12px;font-size:13px}
/* KWOTY JEDNA POD DRUGA, JAK RACHUNEK (wlasciciel 25.08.2026: "niech kwoty beda jedne pod
   drugimi zeby sie nie mylilo za co to jest"). Pierwsza wersja stawiala je obok siebie i cztery
   liczby w jednej linii czytalo sie jak jeden ciag cyfr. Teraz: podpis po lewej, kwota po prawej,
   przecinki w jednej kolumnie (`tabular-nums`), zeby dalo sie przejsc rachunek oczami z gory na
   dol. Wpis to osobna, biala kartka -- widac, gdzie sie konczy jeden, a zaczyna drugi. */
.cem-self-wpis{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin-top:8px}
.cem-self-wpis.czeka{border-color:#fde68a;background:#fffdf5}
.cem-self-glowa{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-bottom:8px;border-bottom:1px solid #eef2f7}
.cem-self-glowa b{font-size:13.5px;color:#0f172a}
.cem-self-data{font-size:11.5px;color:#94a3b8;margin-top:2px;line-height:1.45}
.cem-self-akcje{flex:0 0 auto;white-space:nowrap}
.cem-self-kwoty{margin-top:6px;max-width:420px}
.cem-self-linia{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:3px 0;font-size:13px}
.cem-self-linia span{color:#64748b}
.cem-self-linia b{color:#0f172a;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Znizka to jedyna pozycja, ktora od ceny ODEJMUJEMY -- stad minus i inny kolor. */
.cem-self-linia.znizka b{color:#b45309}
.cem-self-linia.bez-znizki b{color:#94a3b8;font-weight:400}
/* PO CO TO WSZYSTKO: oszczednosc. Zielona i oddzielona kreska -- to wynik rachunku, a nie
   kolejna jego pozycja. */
.cem-self-linia.oszczednosc{border-top:1px solid #e2e8f0;margin-top:4px;padding-top:7px}
.cem-self-linia.oszczednosc span{color:#166534;font-weight:600}
.cem-self-linia.oszczednosc b{color:#15803d;font-size:14.5px}
/* Materialy to TWOJ koszt, a nie czesc rachunku pacjenta -- drobniej i szarzej, pod kreska. */
/* TA SAMA KWOTA POD DRUGA NAZWA -- cichsza, zeby nie czytalo sie jak druga suma ani jak blad
   programu. Zielona zostaje, bo to nadal ta sama, korzystna liczba. */
.cem-self-linia.oszczednosc-echo{padding-top:1px}
.cem-self-linia.oszczednosc-echo span{color:#64748b}
.cem-self-linia.oszczednosc-echo b{color:#15803d;font-weight:600}
.cem-self-nota{font-size:11px;color:#94a3b8;text-align:right;margin:1px 0 2px;font-style:italic}
.cem-self-linia.material{font-size:12px;padding-top:6px;border-top:1px dashed #eef2f7;margin-top:4px}
.cem-self-linia.material span,.cem-self-linia.material b{color:#94a3b8;font-weight:400}
.cem-self-stat{min-width:190px}
.cem-self-stat-tytul{display:block;font-size:11.5px;color:#64748b;letter-spacing:.03em;
  text-transform:uppercase;margin-bottom:4px}
.cem-self-stat.oszczednosc{border-color:#bbf7d0;background:#f0fdf4}
.cem-self-stat.oszczednosc .cem-self-stat-tytul{color:#166534}
/* Rodzaj znizki (% albo zl) tuz przy jej wartoscia -- inaczej to dwa osobne pola, ktore nie
   wygladaja na jedno pytanie. */
.cem-self-znizka{display:flex;gap:6px}
.cem-self-znizka select{flex:0 0 64px}
.cem-self-znizka input{flex:1;min-width:0}
@media (max-width:640px){
  .cem-self-glowa{flex-direction:column}
  .cem-self-kwoty{max-width:none}
}
/* Zastrzezenie pod suma -- liczba bez niego wyglada na policzona do konca. */
.cem-self-doprawki{margin:8px 0 0;font-size:12.5px;color:#92400e;background:#fffbeb;
  border:1px solid #fde68a;border-radius:8px;padding:7px 10px;line-height:1.5}

.cem-panel{background:#fff;border:1px solid #dbe3ef;border-radius:16px;padding:12px 14px;margin:10px 20px}
.cem-panel h3{margin:0 0 6px;font-size:15.5px;line-height:1.25}

/* Centrum Zarzadzania -- elegantszy uklad: podniesione karty z cieniem, ikony przy naglowkach,
   naglowki grup sekcji (jak etykiety grup w bocznym menu), zeby dluga strona byla latwiej skanowalna. */
.cem-cc-page .cem-panel{box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 28px -16px rgba(15,23,42,.12);border-color:#e7ecf3;transition:box-shadow .15s ease}
.cem-cc-page .cem-panel:hover{box-shadow:0 1px 2px rgba(15,23,42,.06),0 14px 32px -14px rgba(15,23,42,.16)}
.cem-cc-page .cem-panel h3{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:700;color:#1e293b}
.cem-cc-section-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#94a3b8;margin:24px 22px 2px;display:flex;align-items:center;gap:10px}
.cem-cc-section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#e2e8f0,transparent)}
.cem-cc-section-label:first-of-type{margin-top:6px}
.cem-cc-picon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;color:#fff;flex:none;box-shadow:0 2px 5px -1px rgba(15,23,42,.35)}

.cem-barter-link{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:8px 10px;margin-top:7px}
.cem-barter-link-row{display:flex;gap:6px;margin-top:6px}
.cem-barter-link-input{flex:1;min-width:0;border:1px solid #e2e8f0;border-radius:8px;padding:8px 10px;font-size:12.5px;color:#475569;background:#fff}
.cem-barter-link-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

/* Zakladka Barter -- pasek statystyk w toolbarze zamiast osobnego panelu, karty kontrahentow obok
   siebie na szerokim ekranie. Wszystko zawsze rozwiniete (na wyrazne zyczenie) -- zadnego
   zwijania/scrolla w miniaturowym okienku, kazda pozycja od razu widoczna z pelnymi kwotami. */
/* CALA ZAKLADKA GESCIEJ (właściciel 2026-08-16: „miałeś zmniejszyć wszystkie wiersze, a nie tylko
   usługi"). Poprzednia zmiana ścisnęła wyłącznie listę wpisów — a miejsce zjadały tak samo:
   pasek u góry, nagłówki kart, kafelki podsumowań i sekcje pod listą. Skala jest ta sama
   co przy wierszach: odstępy w dół o połowę, pismo o jeden–dwa punkty, powietrze zamiast pustki. */
.cem-barter-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:8px 16px 6px}
.cem-barter-stats-inline{display:flex;gap:12px;flex-wrap:wrap;flex:1 1 480px}
.cem-barter-chip{position:relative;background:#fff;border:1px solid #e6ebf2;border-radius:16px;
  padding:9px 16px 10px;flex:1 1 200px;min-width:200px;max-width:100%;overflow-x:auto;
  box-shadow:0 1px 2px rgba(15,23,42,.04)}
/* Kolor niesie cienki pasek z lewej, nie tło całej karty — gradient pod trzema liczbami robił
   z podsumowania plakat. */
.cem-barter-chip::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0}
.cem-barter-chip.month::before{background:#2563eb}
.cem-barter-chip.year::before{background:#7c3aed}
.cem-barter-chip>span{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:5px}
.cem-barter-chip.month>span{color:#2563eb}
.cem-barter-chip.year>span{color:#7c3aed}
/* Trzy kwoty w rzedzie oddzielone cienka linia -- zamiast pod soba (kazda etykieta+kwota jako
   oddzielny "flex item" zawijala sie w kolumne na wezszym pasku), zeby zawsze bylo wiadomo od razu
   ile to jest, bez przewijania wzrokiem w dol. "Po rabacie" jest najwieksze i kolorowe -- to jest
   liczba, ktora realnie interesuje na pierwszy rzut oka, reszta to kontekst. */
.cem-barter-chip .cem-barter-amounts{display:flex;flex-wrap:nowrap;gap:0;margin-top:0;align-items:flex-end;justify-content:space-between}
.cem-barter-chip .cem-barter-amount{padding:0 12px;border-left:1px solid rgba(15,23,42,.07);white-space:nowrap}
.cem-barter-chip .cem-barter-amount:first-child{padding-left:0;border-left:0}
.cem-barter-chip .cem-barter-amount span{font-size:10px}
/* KWOTY BEZ POGRUBIENIA (właściciel 2026-08-16: "nie pogrubiaj kwot"). Pogrubienie było tu
   użyte jako podkreślenie ważności — ale gdy pogrubione są wszystkie trzy liczby, żadna nie jest
   ważniejsza, a całość robi się ciężka. Hierarchię niesie teraz ROZMIAR i KOLOR: „po rabacie"
   jest większe i w kolorze karty, reszta mniejsza i szara. */
.cem-barter-chip .cem-barter-amount b{font-size:15px;font-weight:400;color:#475569}
.cem-barter-chip .cem-barter-amount.after b{font-size:21px;font-weight:500;letter-spacing:-.01em}
.cem-barter-chip.month .cem-barter-amount.after b{color:#1d4ed8}
.cem-barter-chip.year .cem-barter-amount.after b{color:#6d28d9}

.cem-barter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:12px;align-items:start;padding:2px 16px 16px}
.cem-barter-card{background:#fff;border:1px solid #e6ebf2;border-left:4px solid #cbd5e1;border-radius:14px;padding:10px 14px;min-width:0;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -14px rgba(15,23,42,.08);transition:box-shadow .18s ease,transform .18s ease}
.cem-barter-card:hover{box-shadow:0 8px 24px -12px rgba(15,23,42,.20)}
.cem-barter-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px}
.cem-barter-card-head h3{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px;min-width:0}
.cem-barter-card-head-actions{display:flex;align-items:center;gap:8px;flex:none}
.cem-barter-avatar{width:21px;height:21px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex:none;box-shadow:0 1px 2px rgba(15,23,42,.15)}

/* Lista wpisow -- CELOWO bez max-height/scroll: wszystko ma byc widoczne od razu, bez zwijania
   ani przewijania w miniaturowym okienku. Karta po prostu rosnie. */
.cem-barter-entries{display:flex;flex-direction:column;gap:0;margin:0 -4px;padding:0 4px}
/* JEDEN WPIS = JEDEN WIERSZ (właściciel 2026-08-16: „to jeden wpis a zajmuje mnóstwo miejsca,
   powinny być na 1 stronie min 3 wpisy zmieścić"). Było cztery wiersze na wpis: nazwa, data,
   a pod spodem trzy kwoty, każda z etykietą NAD sobą. Teraz wszystko w jednej linii, a etykiety
   kwot stoją RAZ w nagłówku listy — przy trzech liczbach w rzędzie powtarzanie „Cena / Koszt /
   Po rabacie" przy każdym wpisie zabierało tyle miejsca, co same dane. */
/* WYSOKOSC WIERSZA O POLOWE MNIEJSZA (właściciel 2026-08-16: „jeszcze za dużo zajmuje, zmniejsz
   tą wysokość o 50%"). Z ~31px na ~16px. Składają się na to cztery rzeczy naraz, bo samo zmniejszenie
   paddingu nic by nie dało — resztę wysokości niosła interlinia i wielkość pisma:
     padding 6px → 1px,  line-height domyślna (~1.4) → 1.2,  pismo 13,5px → 12,5px,
     przyciski 26px → 18px (to one wyznaczały minimalną wysokość wiersza).
   Odstęp między wierszami trzyma teraz sama kreska, bez dodatkowego powietrza. */
.cem-barter-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:10px;padding:0 6px;line-height:1.15;border-top:1px solid #f1f5f9;border-radius:6px;
  transition:background-color .12s ease}
.cem-barter-row:first-child{border-top:0}
.cem-barter-row:hover{background:#f8fafc}
/* Nagłówek kolumn: te same ślady szerokości, tylko mniejszy i szary. */
.cem-barter-row-naglowek{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;
  color:#b3bcc9;padding-bottom:1px}
.cem-barter-row-naglowek:hover{background:transparent}
.cem-barter-row-naglowek .cem-barter-kwota{color:#b3bcc9;font-size:9.5px}
.cem-barter-data{font-size:11px;color:#94a3b8;font-variant-numeric:tabular-nums;white-space:nowrap}
.cem-barter-nazwa{min-width:0;font-size:12px;color:#0f172a;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cem-barter-nazwa small{color:#94a3b8;font-size:11px}
/* Trzy kwoty w stałej kolejności i o stałej szerokości — to ONE zastępują podpisy przy wpisie. */
.cem-barter-kwoty{display:flex;gap:0;white-space:nowrap}
.cem-barter-kwota{display:inline-block;min-width:84px;text-align:right;font-size:12px;
  font-weight:400;color:#64748b;font-variant-numeric:tabular-nums;padding-left:10px}
.cem-barter-kwota.cost{color:#c2410c}
.cem-barter-kwota.after{color:#2563eb}
.cem-barter-row-actions{display:flex;gap:2px;flex:none}
/* Na wąskim ekranie kwoty schodzą pod nazwę, ale wpis dalej ma dwa wiersze, nie cztery. */
@media (max-width:520px){
  .cem-barter-row{grid-template-columns:1fr auto;gap:4px 10px}
  .cem-barter-data{grid-column:1}
  .cem-barter-nazwa{grid-column:1}
  .cem-barter-kwoty{grid-column:1;justify-content:space-between}
  .cem-barter-kwota{min-width:0;padding-left:0}
  .cem-barter-row-actions{grid-column:2;grid-row:1 / span 3;align-self:center}
}
/* Przyciski wyznaczały minimalną wysokość wiersza — 26px nie dało się zejść niżej niż 26px. */
.cem-barter-icon-btn{border:1px solid transparent;background:transparent;border-radius:5px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:10px;color:#b3bcc9;transition:all .12s ease}
.cem-barter-icon-btn:hover{background:#eef2ff;color:#3730a3}
.cem-barter-icon-btn.danger:hover{background:#fef2f2;color:#b91c1c}

/* Cena / koszt / po rabacie -- trzy osobne, wyraznie podpisane liczby, widoczne przy KAZDEJ
   pozycji (nie schowane w jednej drobnej linijce). */
.cem-barter-amounts{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.cem-barter-amount{display:flex;flex-direction:column;line-height:1.2}
.cem-barter-amount span{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:#94a3b8;font-weight:600}
.cem-barter-amount b{font-size:15px;font-weight:400;color:#0f172a;font-variant-numeric:tabular-nums}
.cem-barter-amount.cost b{color:#c2410c}
.cem-barter-amount.after b{color:#2563eb;font-size:16px}

.cem-barter-card-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}
.cem-barter-stat{background:#f8fafc;border:1px solid #eef2f7;border-radius:10px;padding:6px 11px}
.cem-barter-stat span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;font-weight:600;margin-bottom:1px}
.cem-barter-stat b{font-size:14px;font-weight:400;color:#0f172a;font-variant-numeric:tabular-nums;line-height:1.2}
.cem-barter-stat small{display:block;color:#94a3b8;font-size:10px;margin-top:0}

.cem-barter-section{margin-top:8px}
.cem-barter-section-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em}
.cem-barter-section-title .cem-badge{margin-left:auto}
.cem-barter-section-icon{font-size:12.5px}
.cem-barter-section-body{margin-top:7px;background:#fff;border:1px solid #eef2f7;border-radius:12px;padding:10px 12px}

.cem-barter-form-preview{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:9px 12px;font-size:13px;display:flex;justify-content:space-between;align-items:center;color:#1e3a8a}
.cem-barter-form-preview b{font-size:16px;color:#1d4ed8}

@media (max-width:900px){
  .cem-barter-grid{grid-template-columns:1fr}
}
.cem-panel p.muted,.cem-panel>p{margin:0 0 8px;line-height:1.3}
.cem-income-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:6px}
.cem-income-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;padding:7px 12px}
.cem-income-card span{display:block;font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.cem-income-card b{font-size:16px;font-weight:600}
.cem-income-card.total{background:#eff6ff;border-color:#bfdbfe}
.cem-income-card.total b{color:#2563eb;font-size:22px}
.cem-income-card.vat b{color:#7c3aed}
.cem-income-card.exempt b{color:#166534}
.cem-income-card.taxed b{color:#b45309}
.cem-income-card.warn{background:#fff7ed;border-color:#fed7aa}
.cem-income-card.warn b{color:#c2410c}
.cem-income-card.danger{background:#fef2f2;border-color:#fecaca}
.cem-income-card.danger b{color:#b91c1c}
/* ODDANE -- para do .danger, ta sama sila koloru. Uzywa jej kafelek "Do zwrotu od Roberta"
   w Kosztach Excel: zielono, gdy pieniadze wrocily, czerwono, gdy jeszcze nie. */
.cem-income-card.paid{background:#f0fdf4;border-color:#bbf7d0}
.cem-income-card.paid b{color:#15803d}

/* Faza 4A: "Dokumenty z inFakt" -- poczekalnia klasyfikacji */
.cem-infakt-filter-buttons{display:flex;flex-wrap:wrap;gap:6px}
.cem-infakt-cards{display:flex;flex-direction:column;gap:10px}
.cem-infakt-card{padding:14px 16px}
.cem-infakt-card--ignored{opacity:.55}
.cem-infakt-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cem-infakt-card-main{min-width:0}
.cem-infakt-amounts{display:flex;gap:14px;align-items:baseline;margin:8px 0;flex-wrap:wrap}
.cem-infakt-amounts b{font-size:16px}
.cem-infakt-warning{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;border-radius:8px;padding:6px 10px;font-size:12.5px;margin:8px 0}
.cem-infakt-invalid-amount{color:#c2410c;font-weight:600;font-size:0.9em}
/* Faza 4B: oznaczenie "uwzgledniany w kosztach"/"nieuwzgledniany" + edycja udzialu Roberta per faktura */
.cem-infakt-cost-inclusion{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-radius:8px;padding:6px 10px;font-size:12.5px;margin:8px 0}
.cem-infakt-cost-inclusion--included{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.cem-infakt-cost-inclusion--excluded{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
/* Faza 4B.1: zatwierdzony, ale NIEUZGODNIONY dokument -- nie jest liczony, wiec musi wygladac jak
   otwarte zadanie (ostrzegawczy, nie neutralny), tak jak reszta stanow "wymaga decyzji". */
.cem-infakt-cost-inclusion--pending{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
/* Faza 4B.2: formularz zatwierdzania faktury (rodzaj + status + duplikat + jeden przycisk). */
.cem-hidden{display:none!important}
.cem-infakt-approval{border:1px solid #e2e8f0;border-radius:8px;padding:10px 12px;margin-top:8px;background:#f8fafc}
.cem-infakt-field{margin-bottom:10px}
.cem-infakt-field-label{display:block;font-weight:600;font-size:12.5px;margin-bottom:4px;color:#334155}
.cem-infakt-opt{display:flex;align-items:center;gap:6px;font-size:13px;margin:2px 0}
.cem-infakt-manual-picker{margin-top:6px}
.cem-infakt-manual-search{width:100%;max-width:520px;font:inherit;padding:5px 7px;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:4px}
.cem-infakt-reconcile-cost{width:100%;max-width:520px;font:inherit;padding:5px 7px;border:1px solid #e2e8f0;border-radius:6px}
.cem-costs-unavailable{border-left:4px solid #c2410c}
/* Wiersz "Koszty Excel" pochodzacy z faktury inFakt -- tylko do odczytu, wizualnie odrozniony. */
.cem-cost-row-infakt{background:#f8fafc}
/* Faza 4B.5: panel waluty/kursu na karcie dokumentu. */
.cem-infakt-currency{border-radius:8px;padding:8px 10px;margin:8px 0;font-size:12.5px}
.cem-infakt-currency p{margin:2px 0}
.cem-infakt-currency--pending{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.cem-infakt-currency--done{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.cem-infakt-rate-box:empty{display:none}
.cem-infakt-rate-proposal{margin-top:8px;padding:8px;border:1px solid #e2e8f0;border-radius:6px;background:#fff}
.cem-infakt-manual-rate{margin-top:8px;padding-top:8px;border-top:1px dashed #cbd5e1}
.cem-infakt-rate-input,.cem-infakt-rate-date{font:inherit;padding:4px 6px;border:1px solid #e2e8f0;border-radius:6px}
.cem-infakt-manual-tax{width:120px;font:inherit;padding:4px 6px;border:1px solid #e2e8f0;border-radius:6px}
.cem-infakt-share-label{display:flex;align-items:center;gap:5px}
.cem-infakt-share-input{width:56px;font:inherit;padding:3px 5px;border:1px solid #e2e8f0;border-radius:6px}
.cem-infakt-desc-label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#475569;margin:8px 0}
.cem-infakt-desc{resize:vertical;font:inherit;padding:6px 8px;border:1px solid #e2e8f0;border-radius:7px}
.cem-infakt-pagination{display:flex;justify-content:center;align-items:center;gap:14px;padding:12px 0}
.cem-income-table{width:100%;border-collapse:collapse;font-size:13px}
.cem-income-table th,.cem-income-table td{padding:7px 9px;border-bottom:1px solid #eef2f7;text-align:left}
.cem-income-table th{color:#64748b;font-weight:600;font-size:12px}

.cem-referral-source{border:1px solid #eef2f7;border-radius:10px;padding:2px 12px;margin:8px 0}
.cem-referral-source+.cem-referral-source{margin-top:8px}
.cem-referral-source summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;font-weight:600}
.cem-referral-source summary::-webkit-details-marker{display:none}
.cem-referral-source summary::before{content:'▸';margin-right:8px;color:#94a3b8;font-size:11px}
.cem-referral-source[open] summary::before{content:'▾'}
.cem-referral-source-name{text-align:left;margin-right:auto;color:var(--ref-fg,#4338ca);background:var(--ref-bg,#eef2ff);border-radius:999px;padding:3px 12px;font-weight:700}
.cem-referral-summary-meta{color:#64748b;font-weight:500;font-size:12.5px;white-space:nowrap}
.cem-referral-source table{margin-bottom:10px}
.cem-referral-row{background:var(--ref-bg,#f8fafc);color:#000}
.cem-referral-row td{border-bottom-color:var(--ref-bg,#eef2f7)}

/* Lista pacjentow w Przychody -- na wyrazne zyczenie uzytkownika ("wiersze sie zlewaja"):
   naprzemienne tlo wierszy + wyraznsze podswietlenie pod kursorem, zeby latwiej bylo sledzic
   wiersz wzrokiem w szerokiej tabeli. */
.cem-income-detail-table tbody tr{transition:background-color .12s ease}
.cem-income-detail-table tbody tr:nth-child(even){background:#e7ecf5}
.cem-income-detail-table tbody tr:hover{background:#d6e0f5}
.cem-income-detail-table td{border-bottom:2px solid #cbd5e1;padding-top:10px;padding-bottom:10px}

.cem-hours-table-wrap{overflow-x:auto}
.cem-hours-table{width:100%;border-collapse:collapse;font-size:13px}
.cem-hours-table th{padding:0 10px 8px;color:#94a3b8;font-weight:700;font-size:11px;letter-spacing:.03em;text-transform:uppercase;text-align:center}
.cem-hours-table th:first-child{text-align:left}
.cem-hours-table td{padding:3px 10px;border-bottom:1px solid #f1f5f9;text-align:center;vertical-align:middle}
.cem-hours-table td.cem-hours-day{text-align:left;white-space:nowrap;font-size:12.5px}
.cem-hours-table td.cem-hours-day span{text-transform:lowercase}
.cem-hours-table tbody tr{transition:background-color .12s ease}
.cem-hours-table tbody tr:hover{background:#f8fafc}
.cem-hours-table tbody tr.weekend{background:#fbf8f2}
.cem-hours-table tbody tr.weekend:hover{background:#f6f0e2}
.cem-hours-table tbody tr.week-start td{border-top:1px solid #e2e8f0}
.cem-hours-table tbody tr.total-row td{border-top:2px solid #dbe3ef;border-bottom:none;padding-top:9px;font-weight:700;color:#0f172a}
.cem-hours-input{width:56px;text-align:center;border:1px solid #dbe3ef;border-radius:8px;padding:5px 2px;font:inherit;font-size:13px;color:#0f172a;background:#fff;transition:border-color .12s ease,box-shadow .12s ease}
.cem-hours-input:hover{border-color:#94a3b8}
.cem-hours-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.cem-chat-panel{display:flex;flex-direction:column;height:min(64vh,640px)}
.cem-chat-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 4px 10px}
.cem-chat-bubble{max-width:78%;border-radius:14px;padding:9px 13px;font-size:13.5px;line-height:1.45}
.cem-chat-bubble.user{align-self:flex-end;background:#2563eb;color:#fff;border-bottom-right-radius:4px}
.cem-chat-bubble.assistant{align-self:flex-start;background:#f1f5f9;color:#0f172a;border-bottom-left-radius:4px}
.cem-chat-bubble-text{white-space:pre-wrap}
.cem-chat-bubble-head{display:flex;justify-content:flex-end;margin:-3px -5px 2px 0}
.cem-chat-bubble-delete{border:none;background:transparent;cursor:pointer;font-size:11px;line-height:1;padding:3px;border-radius:4px;opacity:.55}
.cem-chat-bubble-delete:hover{opacity:1;background:rgba(0,0,0,.12)}
.cem-chat-bubble.user .cem-chat-bubble-delete{color:#fff}
.cem-chat-bubble.assistant .cem-chat-bubble-delete{color:#0f172a}
.cem-chat-typing{color:#94a3b8;font-style:italic}
.cem-chat-image{margin-top:8px}
.cem-chat-image img{max-width:100%;border-radius:10px;display:block}
.cem-chat-image-caption{font-size:12px;color:#64748b;margin-top:4px}
.cem-chat-form{display:flex;gap:8px;padding-top:10px;border-top:1px solid #eef2f7;margin-top:6px}
.cem-chat-form textarea{flex:1;resize:none;border:1px solid #dbe3ef;border-radius:10px;padding:8px 12px;font:inherit;font-size:13.5px;color:#0f172a}
.cem-chat-form textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.cem-chat-form button{align-self:flex-end}
.cem-cal-edit-row td{padding:6px 9px;vertical-align:middle}
.cem-cal-edit-row input,.cem-cal-edit-row select{border:1px solid #dbe3ef;border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;background:#fff;color:#0f172a}
.cem-cal-edit-row input:focus,.cem-cal-edit-row select:focus{outline:none;border-color:#93b4f5;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.cem-cal-edit-row .cem-cal-edit-date{min-width:130px}
.cem-cal-edit-row .cem-cal-edit-person,.cem-cal-edit-row .cem-cal-edit-room{min-width:140px}

.cem-choices{display:flex;gap:8px;flex-wrap:wrap}
.cem-choice-btn{border:1px solid #cbd5e1;background:#fff;border-radius:999px;padding:8px 16px;cursor:pointer;font:inherit}
.cem-choice-btn.active{background:#2563eb;color:#fff;border-color:#2563eb}
/* Dzien/Miesiac/Rok -- rozne dlugosci etykiet daja rozne szerokosci przyciskow; wymuszamy jednakowa
   szerokosc (dopasowana do najdluzszej: "Miesiąc"), zeby wszystkie trzy wygladaly tak samo. */
.cem-mode-toggle .cem-choice-btn{min-width:80px;text-align:center}
.cem-form-total{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:10px 14px;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}

.cem-cal-page .cem-toolbar{padding:22px 24px 4px}
.cem-cal-page h1{letter-spacing:-.01em}
.cem-cal-grid{display:flex;flex-direction:column;gap:20px;padding:24px;min-width:0}
.cem-cal-person-card{background:#fff;border:1px solid #e7ecf3;border-left:3px solid #94a3b8;border-radius:18px;padding:24px;min-width:0;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(15,23,42,.08);transition:box-shadow .18s ease,transform .18s ease}
.cem-cal-person-card:hover{box-shadow:0 2px 6px rgba(15,23,42,.06),0 16px 32px -14px rgba(15,23,42,.14);transform:translateY(-1px)}
.cem-cal-person-card header{margin-bottom:4px}
.cem-cal-person-card h3{font-weight:600;letter-spacing:-.01em}
.cem-badge-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(155deg,#eef2ff,#e0e7ff);color:#4338ca;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none;box-shadow:inset 0 0 0 1px rgba(67,56,202,.12)}
.cem-cal-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;align-items:end;margin:18px 0 14px;
  background:#f8fafc;border:1px solid #eef1f6;border-radius:14px;padding:16px}
.cem-cal-fields label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#94a3b8}
.cem-cal-fields input,.cem-cal-fields select{border:1px solid #dbe3ef;border-radius:9px;padding:9px 12px;font:inherit;font-size:14px;width:100%;
  background:#fff;color:#0f172a;transition:border-color .15s ease,box-shadow .15s ease}
.cem-cal-fields input:focus,.cem-cal-fields select:focus{outline:none;border-color:#93b4f5;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.cem-cal-fields button{justify-self:start;padding:10px 22px;border-radius:9px;font-weight:600;transition:background-color .15s ease,transform .1s ease}
.cem-cal-fields button.cem-btn.primary:not(:disabled):hover{background:#1d4ed8;border-color:#1d4ed8}
.cem-cal-fields button.cem-btn.primary:not(:disabled):active{transform:translateY(1px)}
.cem-cal-fields button.cem-btn.primary:disabled{background:#e2e8f0;border-color:#e2e8f0;color:#94a3b8;cursor:default}
.cem-cal-quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.cem-cal-quick .cem-btn{border-radius:999px;padding:7px 16px;font-size:13px;font-weight:500;color:#475569;border-color:#e2e8f0;
  background:#fff;transition:all .15s ease}
.cem-cal-quick .cem-btn:hover{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.cem-cal-page .cem-owner-block{background:#f8fafc;border:1px solid #eef1f6;border-radius:12px}
.cem-cal-page .cem-owner-block .total{border-top:1px solid #e2e8f0}
.cem-cal-page .cem-income-table{font-size:13.5px}
.cem-cal-page .cem-income-table th{color:#94a3b8;font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:11px;padding-bottom:10px}
.cem-cal-page .cem-income-table td{padding:10px 9px}
.cem-cal-page .cem-income-table tbody tr{transition:background-color .12s ease}
.cem-cal-page .cem-income-table tbody tr:hover{background:#f8fafc}

/* "Rozliczenie godzin pracy"/"Grafik pracy" (cem-schedule-grid) -- czysto do odczytu (bez formularzy
   edycji jak Kalendarz pracy), wiec wiersze/bloki moga byc znacznie ciasniej upakowane, zeby na
   ekranie mieszczilo sie wiecej naraz -- na wyrazna prosbe uzytkownika. */
.cem-schedule-grid{gap:10px}
.cem-schedule-grid .cem-cal-person-card{padding:14px 18px}
.cem-schedule-grid .cem-cal-person-card header{margin-bottom:0}
.cem-schedule-grid .cem-owner-block{padding:6px 12px;margin-top:5px}
.cem-schedule-grid .cem-owner-block h4{margin-bottom:2px}
.cem-schedule-grid .cem-owner-block .row{padding:1px 0}
.cem-schedule-grid .cem-owner-block .total{margin-top:2px;padding-top:3px}
.cem-schedule-grid .cem-income-table td{padding:4px 9px}
.cem-schedule-grid .cem-income-table th{padding-bottom:5px}

/* Kalendarz pracy (cem-hours-grid) -- ma edytowalne formularze (data/miejsce/godziny + przyciski
   skrotow), wiec zostaje klikalne/czytelne, ale mniej "powietrza" miedzy elementami niz dawniej --
   na wyrazna prosbe uzytkownika ("za wysokie te pasy z danymi pracownika"). */
.cem-hours-grid{gap:7px;padding:16px}
.cem-hours-grid .cem-cal-person-card{padding:9px 14px;border-radius:10px;box-shadow:none}
.cem-hours-grid .cem-cal-person-card:hover{box-shadow:none;transform:none}
.cem-hours-grid .cem-cal-person-card header{margin-bottom:0}
.cem-hours-grid .cem-cal-fields{margin:7px 0 5px;padding:7px;gap:7px}
.cem-hours-grid .cem-cal-fields label{gap:2px}
.cem-hours-grid .cem-cal-fields input,.cem-hours-grid .cem-cal-fields select{padding:4px 7px}
.cem-hours-grid .cem-cal-fields button{padding:5px 12px}
.cem-hours-grid .cem-cal-quick{margin-bottom:5px;gap:3px}
.cem-hours-grid .cem-cal-quick .cem-btn{padding:2px 8px;font-size:12px}
.cem-hours-grid .cem-owner-block{padding:3px 8px;margin-top:2px;border-radius:8px}
.cem-hours-grid .cem-income-table td{padding:2px 8px}
.cem-hours-grid .cem-income-table th{padding-bottom:3px}

/* Personel (cem-staff-compact) -- ta sama kompaktowa obrobka co Kalendarz pracy, na wyrazna
   prosbe uzytkownika. Osobna klasa, nie ruszamy bazowego .cem-staff-grid (reuzywanego przez
   Centrum Zarzadzania dla kart kont uzytkownikow) ani bazowego .cem-owner-block/.cem-rule-row
   (uzywanych tez np. w "Moje wynagrodzenie"). */
.cem-staff-compact{gap:8px;padding:12px}
.cem-staff-compact .cem-staff-card{padding:10px 14px;border-radius:10px;box-shadow:none}
.cem-staff-compact .cem-staff-card:hover{box-shadow:none;transform:none}
.cem-staff-compact .cem-actions-row{gap:5px;margin:6px 0}
.cem-staff-compact .cem-staff-section{padding:6px 10px;margin-top:6px}
.cem-staff-compact .cem-staff-section-label{margin-bottom:3px}
.cem-staff-compact .cem-owner-block{padding:4px 10px;margin-top:4px;border-radius:8px}
.cem-staff-compact .cem-owner-block h4{margin-bottom:3px}
.cem-staff-compact .cem-owner-block .row{padding:1px 0}
.cem-staff-compact .cem-owner-block .total{margin-top:2px;padding-top:3px}
.cem-staff-compact .cem-owner-split{gap:5px;margin-top:5px}
.cem-staff-compact .cem-rule-row{padding:4px 6px;gap:10px}
.cem-staff-compact .cem-self-block{padding:8px;margin-top:6px}
.cem-staff-compact .cem-self-block h4{margin-bottom:4px}

.cem-cal-page .cem-panel{box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -14px rgba(15,23,42,.08);border-color:#e7ecf3}

.cem-filters{box-shadow:0 1px 2px rgba(15,23,42,.04);border-color:#e7ecf3}
.cem-filter-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.cem-filter-row label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#94a3b8}
.cem-filter-row input,.cem-filter-row select{border:1px solid #dbe3ef;border-radius:9px;padding:9px 12px;font:inherit;font-size:14px;
  background:#fff;color:#0f172a;transition:border-color .15s ease,box-shadow .15s ease}
.cem-filter-row input:focus,.cem-filter-row select:focus{outline:none;border-color:#93b4f5;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.cem-filter-row .cem-filter-search{flex:1;min-width:240px}
.cem-filter-row .cem-filter-year{max-width:110px}
.cem-costs-count{color:#94a3b8;font-weight:400;font-size:13px}
.cem-costs-page{box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -14px rgba(15,23,42,.08);border-color:#e7ecf3}
.cem-table-scroll{overflow-x:auto;border-radius:12px;border:1px solid #eef2f7}
.cem-table-scroll::-webkit-scrollbar{height:10px}
.cem-table-scroll::-webkit-scrollbar-track{background:transparent}
.cem-table-scroll::-webkit-scrollbar-thumb{background:#dbe3ef;border-radius:99px}
.cem-costs-table th{color:#94a3b8;font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:10.5px;padding-bottom:10px;position:sticky;top:0;background:#fff}
.cem-costs-table td{padding:9px}
.cem-costs-table tbody tr{transition:background-color .12s ease}
.cem-costs-table tbody tr:nth-child(even){background:#f9fafb}
.cem-costs-table tbody tr:hover{background:#eef2ff}
.cem-costs-table .cem-costs-amount{font-weight:700;color:#0f172a}

/* Sticky identifying columns (Data, Termin, Kontrahent, Koszt) so you keep your bearings while scrolling right */
.cem-costs-table th:nth-child(-n+4),.cem-costs-table td:nth-child(-n+4){position:sticky;background:#fff;z-index:1}
.cem-costs-table th:nth-child(-n+4){z-index:3}
.cem-costs-table tbody tr:nth-child(even) td:nth-child(-n+4){background:#f9fafb}
.cem-costs-table tbody tr:hover td:nth-child(-n+4){background:#eef2ff}
/* KOLUMNA AKCJI PRZYKLEJONA DO PRAWEJ. Tabela kosztow ma ponad 2000 px szerokosci, wiec przy
   oknie 1366 px przyciski "Edytuj"/"Usun" wypadaly na pozycji ~2284 px -- zeby do nich dotrzec,
   trzeba bylo przewinac tabele o tysiac pikseli w prawo. Wlasciciel zglosil to jako "nie moge
   ani edytowac, ani usunac". Pierwsze cztery kolumny sa przyklejone do lewej od poczatku; ta
   jest ich odpowiednikiem po drugiej stronie. */
.cem-costs-table th:last-child,.cem-costs-table td:last-child{
  position:sticky;right:0;background:#fff;z-index:2;
  box-shadow:-8px 0 12px -10px rgba(15,23,42,.35)}
.cem-costs-table th:last-child{z-index:4}
.cem-costs-table tbody tr:nth-child(even) td:last-child{background:#f9fafb}
.cem-costs-table tbody tr:hover td:last-child{background:#eef2ff}
.cem-costs-table th:nth-child(1),.cem-costs-table td:nth-child(1){left:0;width:88px;min-width:88px}
.cem-costs-table th:nth-child(2),.cem-costs-table td:nth-child(2){left:88px;width:88px;min-width:88px}
.cem-costs-table th:nth-child(3),.cem-costs-table td:nth-child(3){left:176px;width:132px;min-width:132px;max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cem-costs-table th:nth-child(4),.cem-costs-table td:nth-child(4){left:308px;width:140px;min-width:140px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:4px 0 6px -4px rgba(15,23,42,.10)}

/* Right-align amount/percentage columns with tabular figures for easy scanning */
.cem-costs-table th:nth-child(n+7):nth-child(-n+9),.cem-costs-table td:nth-child(n+7):nth-child(-n+9),
.cem-costs-table th:nth-child(n+14):nth-child(-n+16),.cem-costs-table td:nth-child(n+14):nth-child(-n+16){
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Subtle dividers between logical column groups */
.cem-costs-table th:nth-child(7),.cem-costs-table td:nth-child(7),
.cem-costs-table th:nth-child(10),.cem-costs-table td:nth-child(10),
.cem-costs-table th:nth-child(13),.cem-costs-table td:nth-child(13),
.cem-costs-table th:nth-child(17),.cem-costs-table td:nth-child(17),
.cem-costs-table th:nth-child(19),.cem-costs-table td:nth-child(19),
.cem-costs-table th:nth-child(22),.cem-costs-table td:nth-child(22){border-left:1px solid #eef2f7}

.cem-costs-table .cem-actions-row{margin:0;flex-wrap:nowrap;white-space:nowrap}
.cem-costs-table .cem-actions-row .cem-btn{padding:4px 9px;font-size:11.5px;border-radius:6px}
.cem-badge.type-fixed{background:#ede9fe;color:#6d28d9}
.cem-badge.type-once{background:#f1f5f9;color:#64748b}
.cem-badge.owner-shared{background:#e0f2fe;color:#0369a1}
.cem-badge.owner-private{background:#fce7f3;color:#a21caf}
.cem-badge.owner-biz{background:#eef2ff;color:#4338ca}

.cem-patients-table th{color:#94a3b8;font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:10.5px;padding-bottom:10px;position:sticky;top:0;background:#fff}
.cem-patients-table td{padding:10px 9px}
.cem-patients-table tbody tr{transition:background-color .12s ease}
.cem-patients-table tbody tr:nth-child(even){background:#f9fafb}
.cem-patients-table tbody tr:hover{background:#eef2ff}
.cem-patients-table tbody tr.rank-1{background:#eff6ff}
.cem-patients-table tbody tr.rank-1:hover{background:#e0edff}
.cem-patients-table th:nth-child(-n+2),.cem-patients-table td:nth-child(-n+2){position:sticky;background:#fff;z-index:1}
.cem-patients-table th:nth-child(-n+2){z-index:3}
.cem-patients-table tbody tr:nth-child(even) td:nth-child(-n+2){background:#f9fafb}
.cem-patients-table tbody tr.rank-1 td:nth-child(-n+2){background:#eff6ff}
.cem-patients-table tbody tr:hover td:nth-child(-n+2){background:#eef2ff}
.cem-patients-table tbody tr.rank-1:hover td:nth-child(-n+2){background:#e0edff}
.cem-patients-table th:nth-child(1),.cem-patients-table td:nth-child(1){left:0;width:44px;min-width:44px;text-align:center}
.cem-patients-table td:nth-child(1) .cem-badge-num{margin:0 auto;width:24px;height:24px;font-size:11.5px}
.cem-patients-table th:nth-child(2),.cem-patients-table td:nth-child(2){left:44px;width:170px;min-width:170px;max-width:220px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:4px 0 6px -4px rgba(15,23,42,.10)}
.cem-patients-table th:nth-child(n+3):nth-child(-n+8),.cem-patients-table td:nth-child(n+3):nth-child(-n+8){
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cem-patients-table th:nth-child(9),.cem-patients-table td:nth-child(9),
.cem-patients-table th:nth-child(11),.cem-patients-table td:nth-child(11){border-left:1px solid #eef2f7}
.cem-patients-table .cem-patient-amount{font-weight:700;color:#0f172a}
.cem-patients-table .cem-patient-tags{display:flex;flex-wrap:wrap;gap:4px}
.cem-badge.segment-once{background:#f1f5f9;color:#64748b}
.cem-badge.segment-regular{background:#e0f2fe;color:#0369a1}
.cem-badge.segment-staly{background:#ede9fe;color:#6d28d9}
.cem-badge.notice{background:#fff7ed;color:#c2410c}

/* WYDATKI NA AI -- dzien po dniu, paskami. Sama kwota za dzis nic nie mowi, dopoki nie ma
   z czym jej porownac; pasek pokazuje to jednym spojrzeniem. */
.cem-ai-dni{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.cem-ai-dzien{display:grid;grid-template-columns:44px 1fr 78px 56px;align-items:center;gap:10px;font-size:12.5px}
.cem-ai-dzien>span{color:#64748b;font-variant-numeric:tabular-nums}
.cem-ai-dzien>b{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.cem-ai-dzien>small{text-align:right}
.cem-ai-pasek{height:8px;border-radius:999px;background:#eef2f7;overflow:hidden}
.cem-ai-pasek i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#818cf8,#6366f1)}
@media (max-width:640px){ .cem-ai-dzien{grid-template-columns:40px 1fr 70px} .cem-ai-dzien>small{display:none} }

/* CO DOSTAJA POZA WYPLATA -- spokojna ramka pod tabela wynagrodzen, nie alarm. */
.cem-cc-poza-wyplata{margin-top:12px;padding:10px 14px;border-radius:10px;background:#f8fafc;
  border:1px solid #e2e8f0}
.cem-cc-poza-wyplata p{margin:0 0 4px}
.cem-cc-poza-wyplata p:last-child{margin-bottom:0;font-size:12.5px}
.cem-cc-alerts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cem-cc-alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:#f8fafc;border-left:3px solid #cbd5e1}
.cem-cc-alert.bad{background:#fef2f2;border-left-color:#dc2626}
.cem-cc-alert.warn{background:#fffbeb;border-left-color:#f59e0b}
.cem-cc-alert.good{background:#f0fdf4;border-left-color:#16a34a}

.cem-independent-banner{display:flex;align-items:center;gap:8px;background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;color:#92400e;font-weight:600;font-size:13.5px;border-radius:10px;padding:12px 16px;margin-bottom:14px}
.cem-indep-toggle{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 14px;margin:2px 0}
.cem-indep-toggle input{width:auto!important;margin-top:3px;flex:none}
.cem-indep-toggle strong{color:#92400e}
.cem-indep-toggle small{display:block;color:#78716c;font-weight:400;margin-top:2px}
.cem-cc-alert-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:#94a3b8}
.cem-cc-alert.bad .cem-cc-alert-dot{background:#dc2626}
.cem-cc-alert.warn .cem-cc-alert-dot{background:#f59e0b}
.cem-cc-alert.good .cem-cc-alert-dot{background:#16a34a}

.cem-cc-scroll-list{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px;margin-top:10px}
.cem-cc-list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;border:1px solid #eef2f7;border-radius:9px;background:#f8fafc}
.cem-cc-list-row b{font-size:13.5px;color:#0f172a}

.cem-collapse-body{display:none;margin-top:10px}
.cem-collapse.is-open .cem-collapse-body{display:block}

/* === KAFELEK ROZWIJANY ========================================================================
   Właściciel: „czy możesz tworzyć ładniejsze buttony (…) naprawdę nie ma ładniejszego designu?".
   Szary prostokąt z daszkiem zastąpiony kafelkiem na całą szerokość: ikona w kolorowym kwadracie,
   nazwa, jedno zdanie o zawartości i strzałka. Podpis jest po to, żeby nie trzeba było klikać,
   żeby sprawdzić, czy warto klikać. */
.cem-akordeon-box { margin-top: 10px; }
.cem-akordeon { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border: 1px solid #e6ecf4; border-radius: 12px; background: #fff;
  font: inherit; cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease; }
.cem-akordeon:hover { border-color: #cbd8e8; background: #fcfdff; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.cem-akordeon .cem-cc-picon { flex: none; margin: 0; }
.cem-akordeon-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cem-akordeon-tekst b { font-size: 14px; font-weight: 600; color: #1e293b; line-height: 1.25; }
.cem-akordeon-tekst small { font-size: 12px; color: #94a3b8; line-height: 1.35; }
.cem-akordeon-strzalka { flex: none; width: 24px; height: 24px; display: flex; align-items: center;
  justify-content: center; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 12px;
  transition: transform .16s ease, background-color .14s ease, color .14s ease; }
.cem-akordeon:hover .cem-akordeon-strzalka { background: #e2e8f0; color: #334155; }
.cem-akordeon-box.is-open .cem-akordeon { border-color: #cbd8e8; background: #f8fafc;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cem-akordeon-box.is-open .cem-akordeon-strzalka { transform: rotate(180deg); background: #e2e8f0; }
.cem-akordeon-box.is-open .cem-collapse-body { margin-top: 0; padding: 12px 14px 14px;
  border: 1px solid #cbd8e8; border-top: 0; border-radius: 0 0 12px 12px; background: #fff; }


.cem-cal-panel-layout{display:flex;gap:18px;align-items:flex-start;min-width:0}
.cem-cal-day-nav{flex:none;width:88px;max-height:460px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;
  border-right:1px solid #eef1f6;padding-right:12px;scrollbar-width:thin}
.cem-cal-day-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid transparent;
  background:#f8fafc;border-radius:9px;padding:6px 4px;cursor:pointer;font:inherit;font-size:11px;color:#64748b;transition:all .12s ease}
.cem-cal-day-btn:hover{background:#eef2ff;color:#3730a3}
.cem-cal-day-btn.active{background:#2563eb;color:#fff;box-shadow:0 2px 6px rgba(37,99,235,.25)}
.cem-cal-day-btn .cem-cal-day-num{font-size:14px;font-weight:700;line-height:1.2}
.cem-cal-day-btn .cem-cal-day-wd{text-transform:lowercase;letter-spacing:.02em}
.cem-cal-day-btn.has-entries:not(.active)::after{content:'';position:absolute;top:5px;right:6px;width:5px;height:5px;border-radius:50%;background:#2563eb}
.cem-cal-day-btn.cem-cal-day-all{flex-direction:row;justify-content:center;width:100%;font-size:11.5px;font-weight:600;padding:8px 4px;margin-bottom:2px}
.cem-cal-panel-main{flex:1;min-width:0}

.cem-advisor-grid{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.cem-advisor-card{border-left:4px solid #94a3b8;background:#f8fafc;border-radius:10px;padding:14px 16px}
.cem-advisor-card h4{margin:0 0 8px;font-size:14px;font-weight:700;color:#0f172a}
.cem-advisor-card h4 small{font-weight:400;color:#64748b;text-transform:none;letter-spacing:0;font-size:12.5px}
.cem-advisor-card p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:#334155}
.cem-advisor-card p:last-child{margin-bottom:0}
.cem-advisor-card.blue{border-left-color:#2563eb}
.cem-advisor-card.green{border-left-color:#16a34a}
.cem-advisor-card.gold{border-left-color:#ca8a04;background:#fffbeb}
.cem-advisor-card.patient{border-left-color:#a21caf;background:#fdf4ff}
.cem-advisor-card.patient p{font-style:italic}
.cem-advisor-card.patient2{border-left-color:#0891b2;background:#f0fdfa}
.cem-advisor-card.patient2 p{font-style:italic}
.cem-advisor-card.teal{border-left-color:#0f766e;background:#f0fdfa}
.cem-advisor-card.rose{border-left-color:#be185d;background:#fff1f5}

/* KARTA DORADCY MA CZTERY CZESCI (właściciel 2026-08-16: „doradcy mają dokładnie się wypowiadać"):
   kto mówi / co widzi / co zrobić / ile to da. Wcześniej był jeden akapit i linijka „Działanie:",
   więc rada bez skutku w złotówkach wyglądała tak samo jak rada z nim. */
.cem-advisor-kto{margin:0 0 9px}
.cem-advisor-kto h4{margin:0;font-size:14.5px;font-weight:700;color:#0f172a}
.cem-advisor-kto small{display:block;margin-top:1px;font-size:12px;color:#64748b}
.cem-advisor-widze{margin:0 0 10px}
.cem-advisor-etykieta{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:#64748b;margin-bottom:3px}
.cem-advisor-action{font-size:13.5px;line-height:1.5;color:#1e293b;background:rgba(255,255,255,.75);
  border:1px solid rgba(148,163,184,.25);border-radius:9px;padding:9px 11px;margin-top:2px}
.cem-advisor-efekt{font-size:13.5px;line-height:1.5;color:#134e4a;background:#ecfdf5;
  border:1px solid #a7f3d0;border-radius:9px;padding:9px 11px;margin-top:7px;font-variant-numeric:tabular-nums}
.cem-advisor-efekt .cem-advisor-etykieta{color:#047857}
.cem-advisor-teraz{margin:9px 0 0!important;font-size:12.5px;color:#64748b}
.cem-advisor-teraz strong{color:#475569}
.cem-advisor-accepted{color:#166534;font-weight:600;font-size:13px;margin:8px 0 0}
.cem-advisor-tasks{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cem-advisor-task{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:9px 12px}
.cem-advisor-task-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cem-advisor-task-row label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#1e293b;flex:1;min-width:0}
.cem-advisor-task-row label input{width:auto;flex:none}
.cem-advisor-task.done .cem-advisor-task-row label span{text-decoration:line-through;color:#94a3b8}
.cem-advisor-howto{margin:8px 0 0;padding-left:20px;font-size:13px;line-height:1.6;color:#334155}
.cem-advisor-howto li{margin-bottom:4px}
.cem-advisor-howto li:last-child{margin-bottom:0}

/* Telefon (<=760px): mniej marginesu na boki, jednokolumnowe formularze, wieksze pola dotykowe,
   16px na inputach (ponizej tego iOS Safari automatycznie przybliza ekran przy fokusie -- irytujace
   przy kazdym wpisywaniu liczby). Tabele NIE sa tu przerabiane na karty -- przewijanie w poziomie
   (juz wszedzie w .cem-table-scroll/overflow-x:auto) zostaje jako swiadomy wybor dla tego zakresu. */
@media (max-width:760px){
  .cem-panel{margin:8px 10px;padding:12px}
  .cem-toolbar{padding:10px 12px 0;flex-wrap:wrap;gap:8px}
  .cem-form-row{grid-template-columns:1fr}
  /* Na waskim ekranie kwoty ida po dwie w rzedzie -- piec obok siebie nie miesci sie czytelnie. */
  .cem-income-line{grid-template-columns:1fr 1fr auto}
  .cem-income-line > label:first-of-type{grid-column:1 / 3;grid-row:1}
  .cem-income-line > .cem-line-remove{grid-column:3;grid-row:1}
  .cem-owner-split{grid-template-columns:1fr}
  .cem-cal-fields{grid-template-columns:1fr}
  .cem-filter-row{gap:10px}
  .cem-filter-row .cem-filter-search{min-width:0;flex:1 1 100%}
  .cem-drawer{padding:16px}
  .cem-drawer--wide{padding:12px 16px}
  .cem-btn{padding:9px 13px}
  .cem-choice-btn{padding:9px 14px}

  .cem-barter-link-input,.cem-hours-input,.cem-cal-fields input,.cem-cal-fields select,
  .cem-filter-row input,.cem-filter-row select,.cem-income-toolbar input[type="date"],
  .cem-cal-edit-row input,.cem-cal-edit-row select,.cem-form input,.cem-form select,.cem-form textarea{
    font-size:16px;
  }

  /* Przypiete kolumny (Data/Termin/Kontrahent/Koszt) w tabeli kosztow razem zajmuja 448px --
     szersze niz ekran telefonu, wiec przy sticky przewijanie w poziomie nie odslania reszty danych.
     Na waskim ekranie wylaczamy sticky, zeby przewijanie faktycznie dzialalo. */
  .cem-costs-table th:nth-child(-n+4),.cem-costs-table td:nth-child(-n+4){position:static;box-shadow:none}
}

/* Ekran logowania -- karta na wysrodkowanym, lekko gradientowym tle, wspolne logo z sidebarem. */
.cem-login-page{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:
    radial-gradient(900px 600px at 12% -8%,rgba(59,130,246,.10),transparent 60%),
    radial-gradient(800px 560px at 108% 108%,rgba(29,78,216,.08),transparent 55%),
    #f7f9fc}
.cem-login-card{width:100%;max-width:380px;background:#fff;border:1px solid #e7ecf3;border-radius:20px;
  padding:34px 30px 30px;box-shadow:0 24px 48px -22px rgba(15,23,42,.20),0 2px 6px rgba(15,23,42,.04)}
.cem-login-logo{width:52px;height:52px;border-radius:14px;margin:0 auto 16px;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8 65%,#1e3a8a);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px -8px rgba(37,99,235,.55)}
.cem-login-title{text-align:center;font-size:19px;font-weight:700;letter-spacing:-.01em;color:#0f172a;margin:0 0 3px}
.cem-login-subtitle{text-align:center;font-size:12.5px;color:#94a3b8;margin:0 0 24px}
.cem-login-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:12.5px;
  padding:9px 12px;border-radius:9px;margin-bottom:16px}

/* Baner "zapis nie dotarł na serwer, ponawiamy" -- patrz app.js: showSaveErrorBanner. Nie blokuje
   pracy (w odróżnieniu od cem-drawer używanego przez konflikt/odrzucenie zapisu), tylko trzyma się
   widocznie dopóki retry w tle się nie powiedzie. */
.cem-save-status{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(14px);
  max-width:min(92vw,480px);background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
  font-size:13px;font-weight:600;line-height:1.4;padding:10px 18px;border-radius:11px;
  box-shadow:0 10px 30px rgba(15,23,42,.18);z-index:50;opacity:0;pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;text-align:center}
.cem-save-status.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Przełącznik „Pokaż archiwum" w filtrach historii Biovisu (audyt 1.09.2026, „co nie działa" 4). */
.bv-filtr-check{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap;
  padding-top:6px}
.bv-filtr-check input{margin:0}

/* Materiały, które nie zmieszczą się w tym numerze gazetki (audyt 1.09.2026, znal. 11) --
   wymienione z nazwy, żeby nie znikały bez słowa. */
.nl-poczeka{opacity:.75}
.nl-poczeka li{color:#64748b}

/* Opis w CEM na ZATWIERDZONEJ fakturze -- czyta się, nie edytuje (audyt 1.09.2026, znal. 3). */
.cem-inf-modal-opis{margin:0 0 10px;font-size:13px;line-height:1.45;color:#334155}

/* „Przeniosłem Cię na dzień, na który zapisałeś" -- patrz income.js (audyt 1.09.2026, znal. 4).
   Wpis zapisany na inną datę znikał z ekranu bez słowa i wyglądał jak niezapisany. */
.cem-przeniesienie{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;margin-bottom:10px}

/* Pasek błędu w cenniku ALAB -- stoi NAD działającą zakładką (audyt 1.09.2026, znalezisko 2).
   Wcześniej nieudane „Usuń” podmieniało cały ekran na jedno czerwone zdanie. */
.al-blad-akcji{display:flex;gap:12px;align-items:center;justify-content:space-between;
  background:#fef2f2;border:1px solid #fecaca}

/* Pasek "cofnęliśmy jedną zmianę, reszta zapisuje się dalej" -- patrz app.js: showRevertedBanner.
   Audyt 1.09.2026, punkt 7. W odróżnieniu od paska wyżej TEN czeka na kliknięcie krzyżyka (nie
   znika sam po udanym zapisie), bo mówi o czymś, co człowiek musi zobaczyć: jego wpis wrócił do
   poprzedniej wartości. Stąd `pointer-events:auto` -- krzyżyk musi dać się kliknąć. */
.cem-cofniete{position:fixed;left:50%;top:14px;transform:translateX(-50%);
  max-width:min(94vw,560px);background:#fffbeb;border:1px solid #fcd34d;color:#92400e;
  font-size:13px;line-height:1.45;padding:10px 14px;border-radius:11px;
  box-shadow:0 10px 30px rgba(15,23,42,.18);z-index:60;pointer-events:auto;
  display:flex;gap:10px;align-items:flex-start}
.cem-cofniete b{font-weight:700}
.cem-cofniete-x{flex:0 0 auto;border:0;background:transparent;color:#92400e;font-size:16px;
  line-height:1;cursor:pointer;padding:2px 4px;border-radius:6px}
.cem-cofniete-x:hover{background:#fef3c7}
.cem-login-field{display:block;margin-bottom:14px}
.cem-login-field span{display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:5px}
.cem-login-field input{width:100%;padding:10px 12px;border:1px solid #dbe3ef;border-radius:10px;
  font:inherit;font-size:14px;color:#0f172a;transition:border-color .12s ease,box-shadow .12s ease}
.cem-login-field input:focus{outline:none;border-color:#93b4f5;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.cem-login-submit{width:100%;padding:11px;border:0;border-radius:10px;font-weight:600;font-size:14px;
  color:#fff;background:linear-gradient(135deg,#3b82f6,#1d4ed8);margin-top:4px;
  box-shadow:0 10px 20px -10px rgba(37,99,235,.55);transition:transform .12s ease,box-shadow .12s ease}
.cem-login-submit:hover{transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(37,99,235,.6)}
.cem-login-submit:active{transform:translateY(0)}

/* === Faza 4B.11: karta dokumentu inFakt =======================================================
   WSZYSTKIE reguly ponizej sa ograniczone prefiksem `.cem-inf-` (albo zagniezdzone w `.cem-inf-card`),
   wiec NIE MOGA wplynac na zaden inny modul programu.

   UKLAD: karta ma DWA uporzadkowane poziomy -- dane dokumentu i pasek decyzji -- rozdzielone cienka
   linia. Poprzedni uklad probowal zmiescic jedno i drugie w JEDNYM poziomym wierszu; przy czterech
   waskich kolumnach nazwa firmy lamala sie na pojedyncze slowa, a przyciski nachodzily na siebie.

   STABILNOSC: nic, co reaguje na klikniecie, nie zmienia metryk. Zaznaczenie przelacza WYLACZNIE
   kolory; ramka ma stale 1px, czcionka stala grubosc, znacznik ✓ jest zawsze w ukladzie
   (`visibility`), a udzial Roberta i teksty podpowiedzi maja zarezerwowane miejsce. */
.cem-infakt-cards{display:grid;grid-template-columns:1fr;gap:14px}

.cem-inf-card{padding:0;margin:0;overflow:hidden;border-color:#e2e8f0;border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);color:#0f172a}
.cem-inf-card.is-settled{background:#fbfdff}
.cem-inf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cem-inf-sep{color:#94a3b8;padding:0 2px}

/* --- etykieta stanu, w linii z nazwa firmy ---------------------------------------------------
   Zastapila pasek przez cala szerokosc karty. `line-height:16px` jest MNIEJSZY niz 21px nazwy
   firmy, wiec etykieta miesci sie w tym samym wierszu i NIE dokłada ani piksela do wysokosci. */
.cem-inf-seller-row{display:flex;align-items:baseline;gap:8px;min-width:0}
.cem-inf-badge{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.04em;line-height:16px;
  padding:0 7px;border-radius:5px;border:1px solid;white-space:nowrap}
.cem-inf-badge--todo{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.cem-inf-badge--warn{background:#fffbeb;color:#92400e;border-color:#fde68a}
.cem-inf-badge--bad{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.cem-inf-badge--ok{background:#f0fdf4;color:#166534;border-color:#bbf7d0}

/* --- POZIOM 1: dane dokumentu (stale, nie reaguje na klikanie decyzji) --- */
.cem-inf-main{display:grid;grid-template-columns:1fr;gap:8px 16px;padding:11px 16px;align-items:center}
.cem-inf-identity{min-width:0}
/* Nazwa firmy: maksymalnie dwie linie, lamane MIEDZY slowami. `overflow-wrap:anywhere` (poprzedni
   uklad) rozbijal ja w waskiej kolumnie na pojedyncze litery. */
.cem-inf-seller{min-width:0;font-size:17px;font-weight:600;line-height:21px;color:#0f172a;
  overflow-wrap:normal;word-break:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.cem-inf-number{color:#94a3b8;font-size:11.5px;line-height:16px;margin-top:3px}
/* --- PASEK KWOT nad lista dokumentow ("ile realnie wydaje") ---------------------------------
   Zasada: JEDNA rzecz ma przyciagac wzrok -- kwota "Koszt firmy". Wszystko inne schodzi o poziom
   nizej kolorem i wielkoscia, zeby pasek byl widoczny, ale nie halasowal.
   Bez gradientow i cieni: plaskie tlo i cienkie linie czytaja sie spokojniej i sa spojne z reszta. */
.cem-inf-sumy{display:flex;flex-direction:column;gap:14px;padding:16px 18px}

/* Naglowek: nazwa okresu po lewej, przelacznik po prawej. */
.cem-inf-sumy-naglowek{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.cem-inf-sumy-okres{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8}

/* Przelacznik okresu: segmentowany, lekki -- nie konkuruje z filtrami dokumentow ponizej. */
.cem-inf-okres-przelacznik{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.cem-inf-okres-btn{height:28px;padding:0 12px;font:inherit;font-size:12px;font-weight:600;
  color:#64748b;background:#fff;border:1px solid #e2e8f0;border-right-width:0;cursor:pointer}
.cem-inf-okres-btn:first-child{border-radius:8px 0 0 8px}
.cem-inf-okres-btn:last-of-type{border-right-width:1px;border-radius:0 8px 8px 0}
.cem-inf-okres-btn:hover{background:#f8fafc;color:#334155}
.cem-inf-okres-btn.is-wybrany{background:#0f172a;border-color:#0f172a;color:#fff}
.cem-inf-okres-pole{height:28px;margin-left:10px;padding:0 8px;font:inherit;font-size:12px;
  color:#334155;background:#fff;border:1px solid #e2e8f0;border-radius:8px}
.cem-inf-okres-pole:focus-visible{outline:2px solid #2563eb;outline-offset:1px}

/* DWIE KWOTY GLOWNE. Pierwsza jest wieksza i ciemniejsza -- to odpowiedz na pytanie "ile wydaje".
   Druga stoi obok, oddzielona cienka pionowa kreska, spokojniejsza kolorystycznie. */
.cem-inf-kwoty{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 34px}
.cem-inf-kwota{display:flex;flex-direction:column;gap:2px;min-width:0;padding-left:16px;
  border-left:3px solid #e2e8f0}
.cem-inf-kwota--wiodaca{border-left-color:#0f172a}
.cem-inf-kwota-etykieta{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8}
.cem-inf-kwota-brutto{font-size:23px;font-weight:600;line-height:29px;color:#475569;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.cem-inf-kwota--wiodaca .cem-inf-kwota-brutto{font-size:30px;line-height:36px;font-weight:700;color:#0f172a}
.cem-inf-kwota-pod{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.cem-inf-kwota-netto{font-size:12px;line-height:16px;color:#94a3b8;white-space:nowrap;font-variant-numeric:tabular-nums}
.cem-inf-kwota-ile{font-size:11px;line-height:16px;color:#cbd5e1;white-space:nowrap}

/* ROZBICIE: spokojne pigulki. Wyroznione tylko "w tym Twoje" -- reszta to kontekst. */
.cem-inf-sumy-rozbicie{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid #f1f5f9;padding-top:12px}
.cem-inf-poz{display:inline-flex;align-items:baseline;gap:7px;padding:4px 10px;background:#f8fafc;
  border:1px solid #eef2f7;border-radius:999px;white-space:nowrap}
.cem-inf-poz--mocna{background:#eff6ff;border-color:#dbeafe}
.cem-inf-poz-etykieta{font-size:11.5px;color:#94a3b8}
.cem-inf-poz--mocna .cem-inf-poz-etykieta{color:#1d4ed8}
.cem-inf-poz-kwota{font-size:12.5px;font-weight:600;color:#334155;font-variant-numeric:tabular-nums}
.cem-inf-poz--mocna .cem-inf-poz-kwota{color:#1d4ed8}
.cem-inf-poz-ile{font-size:11px;color:#cbd5e1;font-variant-numeric:tabular-nums}

/* UWAGI: bursztynowo, ale bez krzyku -- to informacja, nie blad. */
.cem-inf-sumy-uwagi{display:flex;flex-direction:column;gap:4px}
.cem-inf-uwaga{display:inline-flex;align-items:flex-start;gap:7px;font-size:12px;line-height:17px;color:#92400e}
.cem-inf-uwaga::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:5px;
  background:#f59e0b;border-radius:50%}

@media(max-width:760px){
  .cem-inf-kwota--wiodaca .cem-inf-kwota-brutto{font-size:25px;line-height:31px}
  .cem-inf-sumy-naglowek{flex-direction:column;align-items:flex-start}
}

/* Podpowiedz kategorii: dyskretna, klikalna, NIC nie zapisuje sama. */
.cem-inf-sugestia{align-self:flex-start;margin-top:2px;padding:2px 8px;font:inherit;font-size:11.5px;
  color:#1d4ed8;background:#eff6ff;border:1px solid #dbeafe;border-radius:999px;cursor:pointer;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cem-inf-sugestia:hover{background:#dbeafe;border-color:#bfdbfe}
.cem-inf-sugestia-ile{color:#93c5fd;margin-left:5px;font-size:11px}

/* --- PANEL ZARZADZANIA KATEGORIAMI ------------------------------------------------------------
   Wejscie to dyskretny link, nie przycisk: to czynnosc rzadka, ktora nie ma konkurowac z praca
   nad fakturami. Sam panel jest gesty i tabelaryczny -- to lista do przejrzenia, nie formularz. */
.cem-inf-kat-pasek{display:flex;justify-content:flex-end;margin:-4px 20px 0}
.cem-inf-kat-link{padding:0;border:0;background:none;font:inherit;font-size:12px;color:#64748b;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cem-inf-kat-link:hover{color:#1d4ed8}

.cem-inf-kat{padding:14px 18px}
.cem-inf-kat-naglowek{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cem-inf-kat-podpowiedz{margin:6px 0 10px;font-size:12px;line-height:17px;color:#64748b}
.cem-inf-kat-tabela{width:100%;border-collapse:collapse;font-size:13px}
.cem-inf-kat-tabela td{padding:6px 8px 6px 0;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.cem-inf-kat-tabela tr:last-child td{border-bottom:0}
.cem-inf-kat-nazwa{color:#0f172a}
.cem-inf-kat-wyl .cem-inf-kat-nazwa{color:#94a3b8}
.cem-inf-kat-znacznik{font-size:11px;color:#94a3b8;font-style:italic;margin-left:4px}
.cem-inf-kat-ile{width:92px;color:#94a3b8;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cem-inf-kat-akcje{width:1%;white-space:nowrap;text-align:right}
.cem-inf-kat-akcje>*{margin-left:6px}
.cem-inf-kat-btn{height:26px;padding:0 10px;font:inherit;font-size:12px;color:#475569;background:#fff;
  border:1px solid #e2e8f0;border-radius:7px;cursor:pointer}
.cem-inf-kat-btn:hover{background:#f8fafc;border-color:#cbd5e1}
.cem-inf-kat-btn--usun{color:#b91c1c;border-color:#fecaca}
.cem-inf-kat-btn--usun:hover{background:#fef2f2;border-color:#fca5a5}
.cem-inf-kat-scal select{height:26px;padding:0 6px;font:inherit;font-size:12px;color:#475569;
  background:#fff;border:1px solid #e2e8f0;border-radius:7px;cursor:pointer}

/* --- "ZA CO JEST TA FAKTURA?" ------------------------------------------------------------------
   Blok pod nazwa sprzedawcy. To on ma odpowiadac na pytanie jednym spojrzeniem, wiec jest
   wyrazniejszy niz numer faktury i NIP (te zeszly do roli pomocniczej).

   DWIE POZYCJE = DWA WIERSZE, kazdy uciety wielokropkiem po jednej linii -- dzieki temu druga
   pozycja nigdy nie znika przez dlugosc pierwszej.
   JEDNA POZYCJA moze zajac DWIE linie (`--jedna`) i dopiero wtedy zostaje ucieta -- pelna nazwa
   jest wtedy najwazniejsza i jest na nia miejsce. */
.cem-inf-what{display:block;width:100%;max-width:100%;margin-top:4px;padding:0;border:0;
  background:none;text-align:left;font:inherit;font-size:13.5px;line-height:19px;color:#0f172a;
  cursor:pointer;min-width:0}
.cem-inf-what:hover{color:#1d4ed8;background:none}
.cem-inf-what-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Jedna pozycja: do dwoch linii, potem wielokropek. */
.cem-inf-what--jedna .cem-inf-what-line{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.cem-inf-what-more{display:block;font-size:12px;line-height:16px;color:#64748b;margin-top:1px}
/* Brak jakiegokolwiek opisu -- neutralnie i bez zargonu; NIE jest przyciskiem. */
.cem-inf-what--brak{color:#94a3b8;font-style:italic;cursor:default;font-size:13px}

/* --- pozycje w oknie "Uwagi" --- */
.cem-inf-modal-items{margin-top:14px;border-top:1px solid #eef2f7;padding-top:10px}
.cem-inf-modal-h4{margin:0 0 8px;font-size:13px;color:#0f172a}
.cem-inf-items-box{overflow-x:auto}
.cem-inf-items-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cem-inf-items-table th{text-align:left;font-weight:600;color:#64748b;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.03em;padding:4px 8px 4px 0;border-bottom:1px solid #e2e8f0}
.cem-inf-items-table td{padding:5px 8px 5px 0;border-bottom:1px solid #f1f5f9;color:#0f172a;vertical-align:top}
.cem-inf-items-table tr:last-child td{border-bottom:0}
.cem-inf-items-unnamed{color:#94a3b8;font-style:italic}
.cem-inf-items-corr{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;
  letter-spacing:.03em;color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;border-radius:5px;padding:0 5px}
.cem-inf-dates{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:18px;color:#334155;white-space:nowrap}
.cem-inf-date-label{color:#94a3b8}
.cem-inf-overdue{color:#b91c1c;font-weight:600}
.cem-inf-money{min-width:0}

/* --- kwoty --- */
.cem-inf-amounts{display:flex;flex-direction:column;gap:0}
.cem-inf-amount-main{display:flex;align-items:baseline;gap:5px}
.cem-inf-amount-value{font-size:24px;font-weight:700;color:#0f172a;line-height:28px;white-space:nowrap}
.cem-inf-amount-side{display:flex;flex-wrap:wrap;gap:0 12px;font-size:12.5px;line-height:17px;color:#64748b}
.cem-inf-tag{display:inline-block;font-size:11.5px;background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;border-radius:999px;padding:1px 7px;margin-left:4px}

/* --- POZIOM 2: pasek decyzji --- */
/* JEDEN poziomy pasek: rodzaj kosztu | zaplata dostawcy | komunikat + akcje. Na waskim ekranie
   `flex-wrap` przenosi segmenty do kolejnych rzedow -- bez zadnego kodu JS. */
.cem-inf-decision-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;
  padding:9px 16px 11px;border-top:1px solid #eef2f7;background:#fcfdff}
/* Pasek decyzji faktury z KSeF: te same odstepy, co segmenty karty z inFaktu.
   Bez tego zagniezdzony blok siedzialby w jednej kolumnie flexa i przyciski nie mialyby
   gdzie sie zawinac na weższym ekranie. */
.cem-inf-decision-bar .kbi-decyzja{flex:1;min-width:0;margin-top:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cem-inf-seg{border:0;padding:0;margin:0;min-width:0}
/* Sposob rozliczenia i zaplata to grupy przyciskow -- musza pozostac w calosci, wiec NIE kurcza
   sie i nie sa dzielone. Zawijanie dotyczy CALYCH segmentow, nie ich wnetrza. */
.cem-inf-seg--kind,.cem-inf-seg--pay{flex:0 0 auto}
.cem-inf-money{min-width:0;flex:0 0 auto}
.cem-inf-amount-value{flex:0 0 auto}
.cem-inf-legend{display:block;font-size:11px;font-weight:600;color:#64748b;padding:0;
  line-height:14px;text-transform:uppercase;letter-spacing:.04em}

/* --- plaskie przyciski decyzji --- */
.cem-inf-opts{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin-top:3px}
.cem-inf-opt{position:relative;flex:0 0 auto}
.cem-inf-opt-input{position:absolute;opacity:0;width:1px;height:1px}
.cem-inf-opt label{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:36px;padding:0 12px;white-space:nowrap;cursor:pointer;font-size:13px;font-weight:600;
  color:#334155;background:#fff;border:1px solid #dbe3ef;border-radius:9px;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.cem-inf-opt label:hover{border-color:#64748b;background:#f8fafc;box-shadow:0 1px 3px rgba(15,23,42,.10)}
.cem-inf-opt label:active{transform:translateY(1px)}
/* Znacznik zajmuje miejsce ZAWSZE -- inaczej zaznaczenie poszerzaloby przycisk. */
.cem-inf-opt-label{font-weight:inherit}
/* PTASZEK TYLKO NA WYBRANYM. Miejsce jest rezerwowane zawsze (`visibility`, nie `display`), wiec
   zaznaczenie nie zmienia szerokosci przycisku.
   PROBA, KTORA SIE NIE UDALA: wczesniej ptaszek byl widoczny (na szaro) rowniez na niewybranych,
   zeby przycisk "wygladal na klikalny". Efekt byl dokladnie odwrotny -- cztery szare przyciski
   z ptaszkami czytaly sie jako "nieaktywne" albo "wszystko juz zaznaczone" i wlasciciel zglosil,
   ze nie da sie nic wybrac. */
.cem-inf-opt-check{visibility:hidden;font-size:12px;line-height:1}

/* NIEZAZNACZONY: bialy srodek, wyrazna ciemna ramka, czytelny tekst -- klasyczny wyglad przycisku
   do wcisniecia. Szare tlo bylo tu bledem: szarosc oznacza "wylaczone". */
.cem-inf-opt:not(.is-selected):not(.is-disabled) label{
  border-color:#94a3b8;background:#fff;color:#1e293b}

/* WYBRANY: WYPELNIONY na niebiesko, bialy tekst. Roznica ma byc jednoznaczna na pierwszy rzut oka,
   a nie subtelnym odcieniem tla. Zmieniamy WYLACZNIE kolory -- zadnej wlasciwosci wplywajacej na
   metryki (grubosc czcionki, ramki, padding), inaczej wybor przesuwalby sasiednie przyciski. */
.cem-inf-opt.is-selected label{background:#2563eb;border-color:#1d4ed8;color:#fff}
.cem-inf-opt.is-selected .cem-inf-opt-check{visibility:visible;color:#fff}
.cem-inf-opt.is-selected label:hover{background:#1d4ed8;border-color:#1e40af}
.cem-inf-opt-input:focus-visible+label{outline:2px solid #2563eb;outline-offset:2px}
.cem-inf-opt.is-disabled label{opacity:.5;cursor:not-allowed;background:#f8fafc}
.cem-inf-opt.is-disabled label:hover{border-color:#dbe3ef;background:#f8fafc}
/* --- Kategoria kosztu: lista wyszukiwalna ---------------------------------------------------
   Osobne pole od "Sposobu rozliczenia": tamto mowi CZYJ jest koszt i steruje pieniedzmi, to
   mowi ZA CO placimy i nie wplywa na zadna kwote. */
.cem-inf-seg--cat{display:flex;flex-direction:column;gap:4px;flex:1 1 200px;min-width:170px;max-width:280px}
.cem-inf-cat-search,.cem-inf-cat-select{width:100%;min-width:0}
.cem-inf-cat-search{height:28px;padding:0 8px;font:inherit;font-size:12.5px;color:#334155;
  background:#fff;border:1px solid #dbe3ef;border-radius:8px}
.cem-inf-cat-search:focus-visible{outline:2px solid #2563eb;outline-offset:1px}
.cem-inf-cat-select{height:36px;padding:0 8px;font:inherit;font-size:13px;font-weight:600;
  color:#334155;background:#fff;border:1px solid #94a3b8;border-radius:9px;cursor:pointer}
.cem-inf-cat-select:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.cem-inf-cat-select:hover{border-color:#64748b;background:#f8fafc}


/* Udzial Roberta: slot o STALEJ szerokosci obok przyciskow rodzaju kosztu. Chowany `visibility`,
   wiec pojawienie sie po wyborze "Wspólny" nie przesuwa niczego obok. */
.cem-inf-share{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 9px;
  margin-left:2px;font-size:12.5px;color:#334155;background:#fff;border:1px solid #dbe3ef;border-radius:9px;
  white-space:nowrap}
.cem-inf-share.is-off{visibility:hidden}
.cem-inf-share-name{color:#64748b}
.cem-inf-share input[type="number"]{width:46px;font:inherit;font-size:12.5px;padding:2px 4px;
  border:1px solid #e2e8f0;border-radius:6px;color:#0f172a}

/* --- akcje ---
   Komunikat stal WCZESNIEJ w jednej linii z przyciskami i mial STALE 190px. Przy czterech
   segmentach te 190px bylo tym, co wypychalo "Uwagi" i "Zatwierdz" poza krawedz karty.
   Teraz komunikat ma WLASNY wiersz nad przyciskami: moze sie zawijac i zwezac do zera, a
   przyciski zachowuja pelna szerokosc. Wysokosc jest rezerwowana na stale (min-height), wiec
   pojawienie sie komunikatu nadal nie przesuwa przyciskow. */
.cem-inf-seg--actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  margin-left:auto;min-width:0}
.cem-inf-actions-row{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.cem-inf-todo{width:100%;min-width:0;min-height:16px;text-align:right;font-size:12px;
  line-height:16px;color:#b45309;overflow-wrap:anywhere}
.cem-inf-notes-btn,.cem-inf-submit-btn,.cem-inf-reset-btn{height:36px;white-space:nowrap;font-size:13px;flex:0 0 auto}
.cem-inf-notes-btn{position:relative;padding:0 14px}
.cem-inf-notes-dot{color:#b45309;font-size:20px;line-height:0;vertical-align:middle;margin-left:4px}
.cem-inf-submit-btn{padding:0 20px;font-weight:600}
/* Nieaktywny "Zatwierdź" ma zostac CZYTELNY -- wyszarzamy tlo, nie tekst. */
.cem-inf-submit-btn:disabled{opacity:1;background:#e2e8f0;color:#64748b;border-color:#e2e8f0;
  box-shadow:none;cursor:not-allowed}
.cem-inf-submit-btn.is-busy{cursor:progress}
.cem-inf-reset-btn{padding:0 12px;font-size:12.5px}

/* --- responsywnosc ---------------------------------------------------------------------------
   >=1500px: pelne dwa poziomy -- dane w trzech slotach, decyzje w trzech segmentach.
   1100-1499px: dane nadal w trzech slotach, decyzje w dwoch uporzadkowanych grupach
                (rodzaj + zaplata w jednym rzedzie, akcje pod nimi po prawej).
   <1100px:     jedna kolumna, przyciski zachowuja normalna szerokosc i moga sie zawijac. */
@media(min-width:1100px){
  /* `minmax(0,...)` w pierwszej kolumnie: nazwa sprzedawcy, numer i lista pozycji MOGA sie zwezac
     (maja wlasne ucinanie wielokropkiem). Daty zwezaja sie do wlasnej tresci. Kwota to `auto`
     BEZ dolnego ograniczenia z gory -- track dopasowuje sie do niej i nigdy jej nie przycina. */
  .cem-inf-main{grid-template-columns:minmax(0,2.2fr) minmax(0,auto) auto}
  .cem-inf-money{text-align:right}
  .cem-inf-amounts{align-items:flex-end}
  .cem-inf-amount-side{justify-content:flex-end}
}
/* PASEK DECYZJI NIGDY NIE MA `nowrap`.
   Poprzednio przy >=1400px pasek dostawal `flex-wrap:nowrap` -- regula skalibrowana dla TRZECH
   segmentow. Po dolozeniu czwartego (kategoria kosztu) zawartosc przestala sie miescic, a przy
   wylaczonym zawijaniu nie mialo dokad zejsc: prawa czesc karty (kwota, "Uwagi", "Zatwierdz",
   komunikat) byla po prostu UCINANA.
   Zawijanie jest jedyna gwarancja, ktora nie zalezy od szerokosci tekstu w przyciskach -- a ta
   zmienia sie z kazda nowa etykieta i z ustawieniami czcionek u uzytkownika. Karta bywa o rzad
   wyzsza; to swiadomy kompromis wobec ucinania tresci. */
@media(max-width:1099px){
  .cem-inf-opts{flex-wrap:wrap}
  .cem-inf-seg--actions{margin-left:0;width:100%;justify-content:flex-start}
  .cem-inf-todo{width:auto;text-align:left}
  .cem-inf-share{margin-left:0}
}

/* --- lancuch przeliczenia walutowego (w oknie "Uwagi") --- */
.cem-inf-fx{display:flex;align-items:stretch;flex-wrap:wrap;gap:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px;margin-bottom:8px}
.cem-inf-fx-step{display:flex;flex-direction:column;gap:1px;font-size:13px;color:#0f172a}
.cem-inf-fx-step--result{margin-left:auto;text-align:right}
.cem-inf-fx-label{font-size:11.5px;color:#64748b;text-transform:uppercase;letter-spacing:.02em}
.cem-inf-fx-meta{font-size:11.5px;color:#64748b}
.cem-inf-fx-arrow{align-self:center;color:#94a3b8}
.cem-inf-fx-actions{align-self:center;margin-left:8px}

/* --- notatki --- */
.cem-inf-note{font-size:12.5px;border-radius:10px;padding:6px 10px;margin:0 16px 12px;border:1px solid}
.cem-inf-note--warn{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.cem-inf-note--muted{background:#f8fafc;color:#64748b;border-color:#e2e8f0}

/* --- podsumowanie po zatwierdzeniu --- */
.cem-inf-decision{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;width:100%}
.cem-inf-decision-text{display:flex;gap:7px;font-size:13px;color:#166534}
.cem-inf-decision-mark{font-weight:700}
.cem-inf-decision-actions{display:flex;flex-wrap:wrap;gap:8px}

/* --- okno "Uwagi do dokumentu" --------------------------------------------------------------
   Okno jest DZIECKIEM karty (patrz notesModalHtml w widoku), ale `position:fixed` rysuje je nad
   cala strona. Zaden przodek karty nie ma transform/filter/contain, ktore by to zmienily. */
.cem-inf-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;
  justify-content:center;padding:20px;z-index:60}
.cem-inf-modal.cem-hidden{display:none}
.cem-inf-modal-box{background:#fff;border-radius:14px;padding:20px 22px;width:100%;max-width:640px;
  max-height:88vh;overflow-y:auto;box-shadow:0 20px 45px rgba(15,23,42,.25);text-align:left}
.cem-inf-modal-title{margin:0 0 2px;font-size:17px;color:#0f172a}
.cem-inf-modal-sub{margin:0 0 14px;font-size:12.5px;color:#64748b}
.cem-inf-modal-details{margin-top:14px;border-top:1px solid #eef2f7;padding-top:10px}
.cem-inf-modal-details>summary{cursor:pointer;font-size:13px;font-weight:600;color:#334155;list-style:revert}
.cem-inf-modal-details-body{margin-top:10px}
.cem-inf-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.cem-inf-desc-label{display:flex;flex-direction:column;gap:5px;margin:0}
.cem-inf-desc{resize:none;overflow:hidden;font:inherit;font-size:13.5px;padding:8px 10px;
  border:1px solid #dbe3ef;border-radius:10px;min-height:74px;color:#0f172a}
.cem-inf-desc:focus{outline:none;border-color:#93b4f5;box-shadow:0 0 0 3px rgba(37,99,235,.14)}

/* --- pola wewnatrz okna --- */
.cem-inf-field{border:0;padding:0;margin:0 0 12px}
.cem-inf-hint{font-size:12px;color:#64748b;margin:4px 0 0}
.cem-inf-manual input[type="search"]{min-width:min(320px,100%);font:inherit;padding:6px 9px;border:1px solid #dbe3ef;border-radius:8px}

/* --- przelacznik duplikatu --- */
.cem-inf-switch{display:inline-flex;border:1px solid #dbe3ef;border-radius:10px;overflow:hidden;margin-top:5px}
.cem-inf-switch-input{position:absolute;opacity:0;width:1px;height:1px}
.cem-inf-switch label{padding:7px 16px;font-size:12.5px;font-weight:600;color:#475569;background:#fff;cursor:pointer;white-space:nowrap}
.cem-inf-switch label+input+label,.cem-inf-switch input+label:not(:first-of-type){border-left:1px solid #dbe3ef}
.cem-inf-switch-input:checked+label{background:#2563eb;color:#fff}
.cem-inf-switch-input:focus-visible+label{outline:2px solid #2563eb;outline-offset:-2px}

/* --- wyszukiwarka kosztu recznego --- */
.cem-inf-manual{margin-top:8px}
.cem-inf-manual-list{list-style:none;margin:6px 0 0;padding:0;max-height:180px;overflow-y:auto;border:1px solid #e2e8f0;border-radius:10px}
.cem-inf-manual-item{display:block;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid #f1f5f9;
  padding:7px 9px;font:inherit;font-size:12.5px;color:#334155;cursor:pointer}
.cem-inf-manual-item:hover{background:#f8fafc}
.cem-inf-manual-item.is-selected{background:#eff6ff;color:#1d4ed8;font-weight:600}
.cem-inf-manual-item:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
.cem-inf-dup{font-size:12.5px;margin:5px 0 0}
.cem-inf-dup--warn{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:10px;padding:8px 10px}
.cem-inf-dup--warn p{margin:0 0 6px}
.cem-inf-dup-why{display:block;font-size:11.5px;color:#64748b}


/* === Faza 4B.12: sekcja Integracje =============================================================
   Kazdy selektor zaczyna sie od .cem-int- -- blok nie moze wplynac na zaden inny widok. */
.cem-int-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px; }
.cem-int-block { border-top:1px solid var(--line,#e3e3e3); padding-top:8px; margin-top:8px; }
.cem-int-block h5 { margin:0 0 6px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.cem-int-row { margin:3px 0; font-size:.92em; }
/* Nota pod paskiem kwot -- ma byc czytelna, ale nie konkurowac z liczbami. */
.cem-inf-sumy-nota { margin:6px 0 0; font-size:.85em; line-height:1.35; }
/* POLE KWOTY MIESIECZNEJ w liscie kosztow. Wlasciciel: "popraw ten kwadracik gdzie wpisuje koszt
   na cos ladniejszego" -- wygladalo jak surowy input przegladarki wciśnięty w komorke.
   Ma sie nadal miescic w komorce (stad staly `width`), ale wygladac jak pole, a nie jak szpara:
   wieksze odstepy, zaokraglenie, wyrazna ramka i widoczny fokus. Strzalki spinnera zdjete --
   w tabeli tylko zabieraly miejsce i kusily do klikania zamiast wpisywania. */
.cem-cost-kwota-mies {
  width:104px; text-align:right; padding:5px 9px; font-size:.95em; font-variant-numeric:tabular-nums;
  border:1px solid #cbd5e1; border-radius:7px; background:#fff; color:#0f172a;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.cem-cost-kwota-mies:hover { border-color:#94a3b8; }
.cem-cost-kwota-mies:focus {
  outline:none; border-color:#2563eb; background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.cem-cost-kwota-mies::placeholder { color:#94a3b8; font-style:italic; }
/* Strzalki liczbowe zabieraja polowe szerokosci pola i nie sluza do niczego przy kwotach. */
.cem-cost-kwota-mies::-webkit-outer-spin-button,
.cem-cost-kwota-mies::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.cem-cost-kwota-mies { -moz-appearance:textfield; appearance:textfield; }
.cem-cost-brak-kwoty { margin-left:6px; font-size:.8em; color:#b45309; }
/* Miesiac z kwota inna niz podstawowa -- ma byc widoczny, zeby doplata nie wygladala na pomylke. */
.cem-cost-nadpisana { margin-left:6px; font-size:.78em; color:#1d4ed8; font-weight:600; }
/* Status platnosci na przycisku w PRZYKLEJONEJ kolumnie akcji -- kolumna "Status" jest 18 z 21
   i przy typowym oknie stoi poza ekranem, wiec ta informacja musi byc tutaj. */
.cem-cost-status-btn { font-weight:600; }
.cem-cost-status-btn.jest-zaplacone { color:#15803d; border-color:#86efac; background:#f0fdf4; }
.cem-cost-status-btn.jest-niezaplacone { color:#b45309; border-color:#fde68a; background:#fffbeb; }
.cem-cost-kwota-mies.jest-nadpisana { border-color:#60a5fa; background:#eff6ff; font-weight:600; color:#1d4ed8; }
/* Zastepnik pola kwoty przy pozycji ze zmienna kwota -- ma wygladac na wylaczony, nie na puste pole. */
#cem-cost-kwota-info input { font-style:italic; color:#64748b; background:#f8fafc; }
/* Wiersz podsumowania w tabeli "Skad pochodzi przychod" -- ma sie odcinac od skladowych. */
.cem-row-sum td { border-top:2px solid var(--line,#e3e3e3); background:#f8fafc; }
/* Podpowiedz kolejnosci pod przyciskiem pobierania. Ma byc czytelna, ale NIE konkurowac
   z przyciskiem -- stad kolor przygaszony i rozmiar jak w pozostalych wierszach bloku. */
.cem-int-hint { margin:-4px 0 8px; font-size:.88em; color:var(--muted,#666); line-height:1.35; }
.cem-int-label { color:var(--muted,#666); }
.cem-int-status { font-weight:normal; font-size:.9em; }
.cem-int-dot.on { color:#2e7d32; }
.cem-int-dot.off { color:#9e9e9e; }
.cem-int-meta { font-size:.85em; margin-top:6px; }
.cem-int-secret { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.cem-int-input { padding:5px 7px; border:1px solid var(--line,#ccc); border-radius:4px; font:inherit; }
.cem-int-secret .cem-int-input { flex:1 1 200px; min-width:0; }
.cem-int-warning { border-left:3px solid #c62828; }
.cem-int-ok { border-left:3px solid #2e7d32; }
.cem-int-create { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.cem-int-create .cem-int-input { flex:1 1 160px; min-width:0; }
.cem-int-hint { font-size:.85em; margin:4px 0 0; }
.cem-int-newpractice { margin-top:10px; }

/* === PO TERMINIE (2026-08-05) ================================================================
   Termin rozliczenia to 15. dzien miesiaca, ktorego dotycza koszty wspolne (ustawienie
   `settings.robertSettlementDay`). Miesiac z niezaplacona reszta PO tej dacie ma byc widoczny
   od razu -- wlasciciel prosil wprost o "ile dni na czerwono".
   Mocniejsze tlo niz zwykle "Do zwrotu": tamto znaczy "jeszcze nie zaplacone", to znaczy
   "juz za pozno". */
.rb-month-late{background:#fee2e2}
.rb-month-late .rb-badge,
.rb-badge-late{background:#dc2626;color:#fff;border-color:#dc2626}
.rb-late{color:#b91c1c;font-weight:700;font-size:12px;white-space:nowrap}
.rb-late-summary{margin:10px 0 0;padding:8px 12px;border-radius:8px;background:#fef2f2;
  border:1px solid #fecaca;color:#991b1b}

/* „Za co jest ta faktura" w rozliczeniu Piotr-Robert (2026-08-05). Pozycje z KSeF przy kosztach
   wspolnych -- Robert placi polowe, wiec ma prawo wiedziec, za co. Mniejsze i szare, zeby nie
   konkurowaly z nazwa kontrahenta. */
.rb-zaco{display:inline-block;margin-top:2px;font-size:12px;color:#475569}

/* === UKLAD FORMULARZA PRZYCHODU (2026-08-05) =================================================
   Wlasciciel: "pacjent zrob na jeden wiersz, pod spodem telefon, mail w jednym wierszu, pod
   spodem w jednym wierszu usluga (...) dopasuj do okna komputera".
   `--single` to wiersz JEDNOKOLUMNOWY: pole dostaje cala szerokosc zamiast polowy. */
.cem-form-row--single{grid-template-columns:1fr}

/* === USLUGI JEDNEJ WIZYTY (2026-08-11) =======================================================
   Wlasciciel: "czasami pacjent ma wiecej uslug na jednej wizycie i kazda ma inny % lub jest
   zwolniony". Usluga + kwota + stawka VAT tworza powtarzalny wiersz. Nazwa uslugi jest najdluzsza,
   wiec dostaje najwiecej miejsca; przycisk usuwania to waska kolumna na koncu, wyrownana do dolu,
   zeby stal w linii z polami, a nie z ich etykietami. */
.cem-income-lines{display:flex;flex-direction:column;gap:10px}
/* USLUGA ZAJMUJE CALY WIERSZ, KWOTY STOJA POD NIA (wlasciciel 25.08.2026: "usluga powinna miec
   caly wiersz a ponizej powinna byc cena, znizka, ile do zaplaty i vat, wtedy bedzie wszystko
   widoczne").
   Wczesniej siedem pol dzielilo jedna linijke: na nazwe uslugi zostawalo tyle miejsca, ze przy
   nazwach w rodzaju "EMSlim - Elektromagnetyczna stymulacja miesni... - pakiet 8 zabiegow" widac
   bylo pierwsze dwa slowa, a kwoty sciskaly sie do szerokosci trzech cyfr.
   Szesc kolumn: piec na kwoty, szosta na krzyzyk. Nazwa rozciaga sie na piec pierwszych,
   krzyzyk jest PRZYPISANY do pierwszego wiersza (inaczej ustawilby sie na koncu drugiego). */
.cem-income-line{display:grid;
  grid-template-columns:1fr .9fr .9fr 1.1fr .9fr auto;gap:8px 10px;align-items:end;
  border:1px solid #e8edf3;border-radius:12px;padding:10px 12px;background:#fbfcfe}
.cem-income-line > label:first-of-type{grid-column:1 / 6;grid-row:1}
.cem-income-line > .cem-line-remove{grid-column:6;grid-row:1;align-self:end}
/* Kwota do zaplaty jest LICZONA, nie wpisywana -- inne tlo mowi to bez podpisu. */
.cem-line-topay{background:#f1f5f9;font-weight:600;color:#0f172a}
.cem-line-disc-value:disabled{background:#f8fafc;color:#94a3b8}
.cem-income-line > label{min-width:0}
.cem-line-remove{align-self:end;height:34px;width:34px;border:1px solid #cbd5e1;border-radius:10px;
  background:#fff;color:#64748b;cursor:pointer;font-size:14px;line-height:1;padding:0}
.cem-line-remove:hover{border-color:#f0b4b4;color:#b91c1c;background:#fef2f2}
#cem-income-add-line{align-self:flex-start;margin-top:2px}
/* Naglowek szuflady mniejszy -- wlasciciel zgodzil sie go zmniejszyc, zeby formularz zmiescil sie
   w oknie bez przewijania. Dotyczy TYLKO szuflady przychodu (cem-drawer--income). */
.cem-drawer--income h2{margin:0 0 6px;font-size:17px}
.cem-drawer--income .cem-form-row{gap:10px}
.cem-drawer--income label{gap:2px}

/* CALE OKNO "DODAJ PRZYCHOD" MA BYC WIDOCZNE (wlasciciel 25.08.2026: "zeby nie trzeba przesuwac
   w dol"). Trzy rzeczy naraz:

   1. SZERZEJ. Przy 760 px dwukolumnowe rzedy byly waskie i czesc pol zawijala sie na dwie linie,
      co rosло w gore. 920 px miesci te same pola nizej. Na mniejszym ekranie `max-width:100vw`
      i tak przycina okno do szerokosci monitora.
   2. CIASNIEJ. Odstepy miedzy rzedami z 12 na 7 px, pola nieco nizsze. To jest granica, ponizej
      ktorej formularz robi sie nieczytelny -- dalej nie schodzimy.
   3. KWOTA I "ZAPISZ" PRZYKLEJONE DO DOLU. Formularz ma kilkanascie pol i na nizszym ekranie i tak
      sie caly nie zmiesci; ale dwie rzeczy, po ktore czlowiek tu przychodzi, nie moga chowac sie
      pod krawedzia. Przewijanie dotyczy wtedy juz tylko pol, ktore wlasnie wypelnia. */
.cem-drawer--income{width:920px;right:-920px;padding:10px 22px 0}
.cem-drawer--income.open{right:0}
.cem-drawer--income .cem-form{gap:7px}
.cem-drawer--income .cem-form-row{gap:7px 10px}
.cem-drawer--income input,.cem-drawer--income select{padding:5px 10px}
.cem-drawer--income textarea{padding:5px 10px;min-height:26px}
.cem-drawer--income .cem-income-line{padding:8px 10px;gap:6px 10px}
.cem-drawer--income .cem-choice-btn{padding:4px 11px;font-size:12.5px}

.cem-income-stopka{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;
  padding:10px 0 12px;margin-top:4px;background:#fff;
  box-shadow:0 -10px 14px -12px rgba(15,23,42,.35)}
.cem-income-stopka .cem-form-total{flex:1;margin:0}
.cem-income-stopka button[type="submit"]{flex:0 0 auto;padding:10px 22px;font-weight:600}

/* === CENTRUM ZARZADZANIA -- czytelnosc (2026-08-05) ==========================================
   Wlasciciel: "zrob ladniejsza zakladke centrum zarzadzania". Zmiany sa WYLACZNIE wygladem --
   zadna liczba, zadna regula ani zaden panel nie zmienil tresci.

   Co bylo nie tak: obie kolumny (Piotr / Robert) wygladaly identycznie poza cienkim paskiem
   z lewej, a WYNIK -- jedyna liczba, po ktora sie tu przychodzi -- byl szosta kartka w siatce
   dziewieciu, nie do odroznienia od "Liczby wizyt". */

/* Naglowek kolumny wlasciciela: kropka w jego kolorze i nazwa czytelnym rozmiarem, zamiast
   drobnego szarego napisu wielkimi literami. Od razu wiadomo, czyja to kolumna. */
.cem-cc-page .cem-owner-split .cem-owner-block h4{
  display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.02em;
  text-transform:none;color:#334155;margin-bottom:10px;
}
.cem-cc-owner-dot{width:9px;height:9px;border-radius:50%;background:#cbd5e1;flex:none}
.cem-cc-page .cem-owner-block.piotr .cem-cc-owner-dot{background:#2563eb}
.cem-cc-page .cem-owner-block.robert .cem-cc-owner-dot{background:#ea580c}
.cem-cc-page .cem-owner-split .cem-owner-block{border-left-width:4px;padding:12px 14px}
.cem-cc-page .cem-owner-block.piotr{background:linear-gradient(180deg,#f5f9ff,#f8fafc 60%)}
.cem-cc-page .cem-owner-block.robert{background:linear-gradient(180deg,#fff7f2,#f8fafc 60%)}

/* WYNIK -- osobny pasek nad siatka, z kwota w rozmiarze, ktory widac z drugiego konca biurka.
   Kolor mowi znak: zielony na plusie, czerwony na minusie. */
.cem-cc-wynik{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 14px;margin:0 0 10px;border-radius:10px;background:#fff;
  border:1px solid #e2e8f0;
}
.cem-cc-wynik span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
.cem-cc-wynik b{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.cem-cc-wynik.dodatni{border-color:#bbf7d0;background:#f0fdf4}
.cem-cc-wynik.dodatni b{color:#15803d}
.cem-cc-wynik.ujemny{border-color:#fecaca;background:#fef2f2}
.cem-cc-wynik.ujemny b{color:#b91c1c}

/* Kwoty na kartach ustawione w kolumnie -- cyfry o stalej szerokosci. Przy porownywaniu Piotr
   kontra Robert oko przestaje skakac. */
.cem-cc-page .cem-income-card b{font-variant-numeric:tabular-nums}
.cem-cc-page .cem-income-card{transition:border-color .12s, background .12s}
.cem-cc-page .cem-income-card:hover{border-color:#cbd5e1;background:#fff}

/* Tabele w tej zakladce: wiersze latwiejsze do sledzenia wzrokiem. */
.cem-cc-page .cem-income-table tbody tr:hover{background:#f8fafc}
.cem-cc-page .cem-income-table td{font-variant-numeric:tabular-nums}

/* PASEK POWITANIA (2026-08-06) -- powitanie z konta + przeslanie na dany dzien.
   Byla to znikajaca chmurka nad trescia (position:fixed, 560px, gasla po kilkunastu sekundach).
   Wlasciciel: "niech ten pasek bedzie wyzej, tam gdzie napis Przychody Piotr, i w dluzszej linii,
   zeby nie zakrywac zakladek pracy" + "jak nie bedzie przeszkadzal, to moze byc caly dzien".
   Dlatego pasek jest ZWYKLYM ELEMENTEM UKLADU nad paskiem z tytulem zakladki (#cem-powitanie
   w core/router.js): spycha reszte w dol zamiast ja zaslaniac, ciagnie sie przez cala szerokosc
   czesci roboczej i moze wisiec caly dzien. Wyglad: cieply krem ze zlota linia u gory.
   Ta sama receptura stoi przy .mp-greeting w public/moj-panel.html -- zmieniajac jedno, zmien drugie. */
.cem-greeting{position:relative;flex:none;display:flex;align-items:baseline;gap:16px;padding:11px 24px 10px;
  background:linear-gradient(158deg,#fffdf7 0%,#fbf6ea 55%,#f7f0e3 100%);color:#33302a;
  border-bottom:1px solid rgba(201,162,39,.30)}
/* Zlota linia u gory paska. Gasnie na obu koncach, zeby nie czytala sie jak pasek postepu.
   position:absolute, wiec mimo display:flex nie wchodzi do ukladu jako dodatkowa kolumna. */
.cem-greeting::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,rgba(201,162,39,0),#c9a227 22%,#e8d18a 50%,#c9a227 78%,rgba(201,162,39,0))}
/* Powitanie i przeslanie ida W JEDNEJ LINII (o to chodzilo w "dluzszej linii"); dopiero na waskim
   ekranie zawijaja sie na dwie, zamiast rozpychac pasek na pol ekranu. */
.cem-greeting-tresc{flex:1;min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.cem-greeting p{margin:0;font-size:15px;line-height:1.45;white-space:pre-line;letter-spacing:.01em}
.cem-greeting p.cem-greeting-powitanie{font-weight:500}
.cem-greeting p.cem-greeting-przeslanie{font-style:italic;color:#6b5c3c;
  font-family:Georgia,"Times New Roman",serif}
/* Zlota kreska oddzielajaca przeslanie od powitania -- tylko gdy przed nim FAKTYCZNIE jest
   powitanie. Konto moze miec samo przeslanie; wtedy kreska wisialaby przed niczym. */
.cem-greeting p.cem-greeting-przeslanie:not(:first-child){padding-left:14px;
  border-left:1px solid rgba(201,162,39,.45)}
.cem-greeting-close{flex:0 0 auto;align-self:center;border:0;background:transparent;cursor:pointer;
  font-size:20px;line-height:1;color:#b09a68;padding:0 2px}
.cem-greeting-close:hover{color:#6b5c3c}
@media (max-width:760px){
  .cem-greeting{padding:9px 14px 8px;gap:10px}
  .cem-greeting p{font-size:14px}
  /* Na waskim ekranie przeslanie laduje pod powitaniem, wiec pionowa kreska przed nim nie ma sensu. */
  .cem-greeting-tresc{flex-direction:column;gap:3px}
  .cem-greeting p.cem-greeting-przeslanie:not(:first-child){padding-left:0;border-left:0}
}

/* Przeslanie na dzien (2026-08-06) -- sekcja w karcie konta w Centrum zarzadzania: lista tekstow
   wlasciciela + propozycje z zapasu programu. Stoi POZA formularzem konta (patrz controlCentre.js),
   wiec potrzebuje wlasnych stylow pola tekstowego. */
.cem-przeslania{margin-top:16px;padding-top:14px;border-top:1px solid rgba(36,59,83,.10)}
.cem-przeslania h5{margin:0 0 4px;font-size:13px;font-weight:600;color:#243b53;text-transform:uppercase;letter-spacing:.04em}
.cem-przeslania h5 + .muted{margin-top:0}
.cem-przeslania .muted{font-size:12px;line-height:1.5}
.cem-przeslania textarea{width:100%;box-sizing:border-box;margin-top:6px;padding:10px 12px;
  border:1px solid #d9e2ec;border-radius:10px;font:inherit;font-size:13px;line-height:1.6;
  color:#243b53;background:#fff;resize:vertical}
.cem-przeslania textarea:focus{outline:0;border-color:#9fb3c8;box-shadow:0 0 0 3px rgba(159,179,200,.25)}
.cem-przeslania-pasek{display:flex;gap:10px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin:6px 0 14px}
.cem-przeslania-propozycja{display:flex;gap:12px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:6px;padding:9px 12px;border:1px solid #e3eaf1;border-radius:10px;
  background:#f8fafc;font-size:13px;line-height:1.5;color:#243b53}
.cem-przeslania-akcje{display:flex;gap:6px;flex:0 0 auto}
.cem-przeslania-akcje .cem-btn{padding:4px 12px;font-size:12px}

/* === Zakladka "Polecenia" (2026-08-06) -- pacjenci z polecenia + odhaczenie "rozliczone" ======
   Wszystkie selektory z prefiksem .cem-ref- (plus wiersz .cem-ref-paid wewnatrz tej zakladki),
   zaden nie zmienia wygladu innych modulow. */
.cem-ref-month-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.cem-ref-month-head h3{margin:0;font-size:17px;text-transform:capitalize}
.cem-ref-month-meta{flex:1;min-width:0;color:#627d98;font-size:13px}
.cem-ref-month-meta b{color:#243b53}
.cem-ref-ok{color:#2f855a;font-weight:600;white-space:nowrap}
/* Rozliczony wiersz ma byc czytelny, ale wyraznie "zalatwiony" -- oko ma lecieć do nierozliczonych. */
.cem-ref-paid td{background:#f4faf6}

/* Rozliczenie Piotr-Robert: podzial "na fakture / bez faktury" (2026-08-06). Prefiks rb-, wiec
   selektory mieszcza sie w regule sekcji ponizej. */
.cem-badge.rb-na-fv{background:#e6f0fb;color:#1c4f8b}
.cem-badge.rb-bez-fv{background:#fdf0e3;color:#8a5a1a}
.rb-summary .cem-income-card.rb-card-fv b{color:#1c4f8b}
.rb-summary .cem-income-card.rb-card-bezfv b{color:#8a5a1a}
/* Prowizja juz oddana Robertowi -- kwota zostaje widoczna, ale ma byc od razu odrozniana
   od tej, ktora dopiero czeka na rozliczenie. */
.bv-prowizja-rozliczona{color:#1f6b39;font-weight:600}

/* === ROZLICZENIE BIOVIS ===================================================================== */
.bvr-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bvr-miesiac{cursor:pointer}
.bvr-miesiac:hover{background:#f8fafc}
.bvr-strzalka{color:var(--cem-muted,#5b6572);display:inline-block;width:12px}
/* ZIELONY = ODDANE, CZERWONY = DO ODDANIA (wlasciciel 2026-08-15: "rozliczone są na zielono,
   a nie rozliczone powinny być na czerwono"). Bursztyn, ktory tu stal wczesniej, czytal sie jak
   "uwaga, sprawdz" -- a to nie jest ostrzezenie, tylko NIEZAPLACONY DLUG. Czerwien mowi wprost,
   ze te pieniadze wciaz sa do oddania. Znaczenie niesie NAPIS ("rozliczone" / "do rozliczenia"),
   kolor jest tylko pomoca dla oka -- kto nie rozroznia barw, czyta dokladnie to samo. */
.bvr-rozliczone{background:#dff3e4;color:#1f6b39}
.bvr-do-rozliczenia{background:#fde8e8;color:#a12d2d}
.bvr-rozliczone-kwota{color:#1f6b39}
.bvr-do-rozliczenia-kwota{color:#a12d2d;font-weight:600}
.cem-income-card.bvr-card-rozliczone b{color:#1f6b39}
.cem-income-card.bvr-card-do b{color:#a12d2d}
.bvr-detal>td{background:#f8fafc;padding:10px 12px}
.bvr-pobranie{cursor:pointer}
.bvr-pobranie:hover{background:#eef2f6}
/* ZA CO DOKLADNIE -- lista badan pod pobraniem. Waska, monospace przy kodzie, zeby kody staly
   w slupku i dalo sie je porownac z cennikiem jednym spojrzeniem. */
.bvr-badania>td{background:#fff;padding:6px 12px 10px 34px}
.bvr-badania-tabela{width:100%;border-collapse:collapse;font-size:12px}
.bvr-badania-tabela td{padding:3px 8px;border-bottom:1px solid #eef2f6}
.bvr-kod{font-family:ui-monospace,monospace;white-space:nowrap;color:#475569}
.bvr-badania-suma td{font-weight:600;border-bottom:none;padding-top:6px}
.bvr-wg-cennika{font-size:11px;white-space:nowrap}
.bvr-lekarz{align-self:center;font-weight:600}
.bvr-badania-uwaga td{border-bottom:none;color:var(--cem-muted,#5b6572);font-size:11px;padding-top:2px}

/* POTRACENIE PROWIZJA w oknie wplaty -- jedno zaznaczenie, ktore zamyka dwa rachunki naraz.
   Wyrozniamy je ramka, bo to jedyne pole w tym oknie, ktore rusza czyms poza ta wplata. */
.rb-potracenie{display:flex;align-items:flex-start;gap:8px;margin:10px 0;padding:9px 11px;
  background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;line-height:1.45}
.rb-potracenie input{margin-top:3px}

/* === Faza 4B.9: zakladka "Robert" -- miesieczne rozrachunki ================================
   Wszystkie klasy z prefiksem rb- oraz .cem-income-card wewnatrz .rb-summary. Zaden selektor nie
   zmienia wygladu innych modulow. */
.rb-toolbar{align-items:center}
.rb-summary{gap:10px}
.rb-card-remaining b{color:#b45309}
.rb-warning{border-left:4px solid #f59e0b;background:#fffbeb;font-size:13.5px;line-height:1.5}
.rb-small{font-size:12px}
.rb-months td{vertical-align:middle}
.rb-month-row{cursor:pointer}
.rb-month-row:hover{background:#f8fafc}
.rb-caret{display:inline-block;width:12px;color:#94a3b8}
.rb-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent}
/* Kolory miesiaca: zielony = rozliczone, pomaranczowy = czesciowo, czerwony = brak wplat przy
   istniejacym zobowiazaniu, neutralny = nie ma czego zadac (w tym korekta ujemna). */
.rb-month-settled{background:#f0fdf4}
.rb-month-settled .rb-badge{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.rb-month-partial{background:#fffbeb}
.rb-month-partial .rb-badge{background:#fef3c7;color:#92400e;border-color:#fde68a}
.rb-month-unpaid{background:#fef2f2}
.rb-month-unpaid .rb-badge{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.rb-month-neutral .rb-badge{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
.rb-detail>td{padding:0;background:#f8fafc}
.rb-detail-box{padding:14px 16px}
.rb-detail-box h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
.rb-detail-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
.rb-items{font-size:13px}
.rb-owed{color:#b91c1c;font-weight:600}
.rb-clear{color:#15803d}
.rb-no-doc{color:#b45309;font-weight:600}
.rb-doc-unset{color:#94a3b8;font-style:italic}
.rb-overpaid{color:#1d4ed8;font-weight:700}
.rb-card-overpaid b{color:#1d4ed8}
.rb-list{margin:0 0 10px;padding-left:18px;font-size:13px;line-height:1.7}
.rb-reversed{opacity:.55;text-decoration:line-through}
.rb-reversed .rb-small{text-decoration:none}
.rb-link{border:0;background:none;padding:0 2px;font-size:12px;color:#2563eb;text-decoration:underline;cursor:pointer}
.rb-link:hover{background:none;color:#1d4ed8}
/* Okienko rejestracji wplaty/dokumentu */
.rb-dialog-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
.rb-dialog{background:#fff;border-radius:12px;padding:20px 22px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 45px rgba(15,23,42,.25)}
.rb-dialog h3{margin:0 0 12px;font-size:17px}
.rb-dialog label{display:block;margin-bottom:10px;font-size:13px;color:#334155}
.rb-dialog label input,.rb-dialog label select,.rb-dialog label textarea{display:block;width:100%;margin-top:4px;padding:7px 9px;border:1px solid #cbd5e1;border-radius:8px;font:inherit}
.rb-alloc{border:1px solid #e2e8f0;border-radius:8px;padding:10px 12px;margin:4px 0 12px}
.rb-alloc legend{font-size:12px;color:#64748b;padding:0 4px}
.rb-alloc-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px}
.rb-alloc-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-alloc-amount{flex:0 0 110px;width:110px;margin-top:0}
.rb-balance{margin:8px 0 0;font-size:12.5px;color:#334155;font-weight:600}
.rb-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.rb-dialog-error{color:#b91c1c;font-size:13px;margin:8px 0 0;min-height:1em}
@media(max-width:760px){
  .rb-detail-cols{grid-template-columns:1fr}
  .rb-alloc-row{flex-wrap:wrap}
  .rb-alloc-amount{flex:0 0 90px;width:90px}
}


/* === REMONT CEM -- prywatny rejestr remontu lokalu ==========================================
   Wszystkie klasy z prefiksem rem-. Zaden selektor nie siega poza .rem-* ani poza tabele w tej
   zakladce, wiec ta sekcja nie moze zmienic wygladu zadnego innego ekranu. */
/* === REMONT CEM ==============================================================================
   Wszystko ponizej dotyka WYLACZNIE klas rem-* albo elementow w srodku .rem-saldo/.rem-tabela.
   Kafelki .cem-income-card, .cem-badge i .cem-income-table sa wspolne z przychodami, kosztami
   i VAT-em -- zmiana ich "u zrodla" przemalowalaby pol aplikacji, wiec zakladka ma wlasne. */
.rem-naglowek{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.rem-naglowek h3{margin:0}
.rem-naglowek>div{min-width:0}
/* Zdania objasniajace: wieksze i ciemniejsze od zwyklego .muted (10-11px, szare) -- to normalny
   tekst do czytania, nie systemowy przypis. Ograniczone do ~78 znakow w wierszu. */
.rem-wstep,.rem-podtytul{margin:3px 0 0;max-width:78ch;font-size:12.5px;line-height:1.55;color:#64748b}
.rem-toolbar{padding-bottom:2px}
.rem-podglad{background:#f8fafc}
.rem-podglad p{margin:0;font-size:12.5px;line-height:1.5;color:#475569}
.rem-filtry{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 10px}
.rem-filtry .cem-btn{border-radius:999px;padding:5px 13px;font-size:12px}
.rem-tabela td,.rem-tabela th{vertical-align:middle}
.rem-tabela thead th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#64748b;background:#f8fafc;white-space:nowrap;border-bottom:1px solid #e2e8f0}
.rem-tabela tbody tr:hover>td{background:#eef2f7}
/* Kropka PRZED napisem statusu -- napis zostaje napisem (wydruk, monitor, wzrok), kropka tylko
   go wzmacnia, tak samo jak kolor wiersza. */
.rem-tabela .cem-badge::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:6px;vertical-align:1px;background:currentColor}
.rem-tabela .rem-data{white-space:nowrap}
.rem-tabela .rem-kwota{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rem-tabela .rem-akcje{white-space:nowrap;text-align:right}
.rem-tabela .rem-akcje .cem-btn{padding:3px 8px;font-size:11.5px}

/* STATUS: kolor wiersza jest DODATKIEM do napisu w kolumnie "Status", nigdy jedynym nosnikiem
   informacji -- na wydruku i przy slabym monitorze zostaje sam napis i nadal wszystko wiadomo. */
.rem-tabela tr.rem-rozliczone>td{background:#f0fdf4}
.rem-tabela tr.rem-otwarte>td{background:#fffbeb}
.rem-tabela tr.rem-rozliczone:hover>td{background:#e4f8ec}
.rem-tabela tr.rem-otwarte:hover>td{background:#fdf3d8}

.rem-tabela tr.rem-form-row>td{background:#eff6ff}
.rem-tabela tr.rem-form-row input,.rem-tabela tr.rem-form-row select{width:100%;min-width:82px;
  padding:4px 6px;border:1px solid #cbd5e1;border-radius:6px;font-size:12.5px;background:#fff}
.rem-tabela tr.rem-form-row .rem-percent{margin-top:4px}
/* Podpowiedź przy polu procentowym -- mówi, kiedy w ogóle da się je wypełnić (pytanie właściciela
   1.09.2026: „jak tu wpisać %"). Procent liczy się WYŁĄCZNIE przy podziale „Niestandardowy". */
.rem-tabela tr.rem-form-row .rem-percent-hint{display:block;font-size:11px;line-height:1.3;margin-top:2px}
.rem-tabela tr.rem-form-row .rem-percent:disabled{background:#f1f5f9;color:#94a3b8}

.rem-saldo{padding:14px 16px 16px}
.rem-saldo h3{font-size:16.5px}
.rem-osoby{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:10px;margin-top:12px}
/* Karta osoby: inicjal w kolku + podpis + kwota. Kolor przypisany na stale (Piotr indygo,
   Robert blekit), zeby wzrok trafial w swoja kolumne bez czytania podpisu. */
.rem-osoba{display:flex;align-items:center;gap:11px;padding:11px 14px;
  border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0}
.rem-osoba-tresc{display:flex;flex-direction:column;gap:1px;min-width:0}
/* KTO ILE WYLOZYL -- pierwszy panel zakladki Remont (wlasciciel 24.08.2026: "wez to na sama gore
   i ladnie pokaz"). Dwie duze kwoty na wierzchu = wklad we WSPOLNY remont, a pod nimi, mniejszym
   drukiem, inwestycje wlasne -- bo to inna kategoria pieniedzy i nie wchodzi do tamtych liczb. */
.rem-wklad{border-left:4px solid #0d9488}
.rem-wklad h3{margin-bottom:2px}
.rem-wklad-glowny{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;
  margin-top:12px}
.rem-wklad-karta{background:linear-gradient(180deg,#f0fdfa,#ecfeff);border:1px solid #99f6e4;
  border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.rem-wklad-karta .rem-etykieta{font-size:12px;color:#0f766e;font-weight:600;letter-spacing:.02em}
.rem-wklad-karta b{font-size:26px;font-weight:650;line-height:1.1;color:#0f172a;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rem-wklad-ind{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;
  margin-top:10px;padding-top:10px;border-top:1px dashed #cbd5e1}
.rem-wklad-ind>div{display:flex;flex-direction:column;gap:2px}
.rem-wklad-ind .rem-etykieta{font-size:11.5px;color:#64748b}
.rem-wklad-ind b{font-size:16px;font-weight:600;color:#334155;font-variant-numeric:tabular-nums}
/* Kursywa w etykiecie duzej karty: "— bez inwestycji wlasnych". Ma byc czytelne od razu, ale nie
   krzyczec glosniej niz samo imie (wlasciciel 24.08.2026). */
.rem-wklad-karta .rem-etykieta i{font-style:normal;font-weight:500;color:#0f766e;opacity:.85}
.rem-wklad-drobne{font-size:11px;color:#94a3b8;font-variant-numeric:tabular-nums;margin-top:1px}
@media (max-width:640px){.rem-wklad-karta b{font-size:22px}}
.rem-osoba .rem-etykieta{font-size:11.5px;color:#64748b}
.rem-osoba b{font-size:19px;font-weight:650;line-height:1.15;color:#0f172a;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rem-inicjal{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;
  height:34px;border-radius:50%;font-size:14px;font-weight:700;color:#fff;background:#94a3b8}
.rem-osoba-piotr{background:#eef2ff;border-color:#c7d2fe}
.rem-osoba-piotr .rem-inicjal{background:#4f46e5}
.rem-osoba-robert{background:#ecfeff;border-color:#a5f3fc}
.rem-osoba-robert .rem-inicjal{background:#0891b2}
.rem-osoba-roznica{background:#fff7ed;border-color:#fed7aa}
.rem-osoba-roznica b{color:#c2410c}

/* Pasek postepu: JEDNA wielkosc, wiec jeden kolor -- blekit Roberta z karty obok, na neutralnym
   torze. Liczby stoja NAPISEM nad paskiem (atramentem, nie kolorem serii), wiec sam pasek jest
   dla czytnika ekranu niewidoczny -- inaczej powtarzalby to samo drugi raz. */
.rem-postep{margin-top:12px}
.rem-postep-opis{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:5px;font-size:12px;color:#475569}
.rem-postep-opis b{font-size:12.5px;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums}
.rem-postep-tor{height:8px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.rem-postep-tor i{display:block;height:100%;border-radius:999px;background:#0891b2;
  min-width:3px;transition:width .25s ease}

.rem-saldo-glowne{display:flex;flex-direction:column;gap:3px;margin-top:12px;padding:14px 16px;
  border-radius:14px;background:#eff6ff;border:1px solid #bfdbfe}
.rem-saldo-glowne span{font-size:10.5px;color:#64748b;text-transform:uppercase;letter-spacing:.04em}
/* 18,5px zamiast 22 -- zdanie jest dluzsze niz sama kwota i przy 22px lamalo sie na trzy linie. */
.rem-saldo-glowne b{font-size:18.5px;font-weight:700;color:#1d4ed8;line-height:1.35}
.rem-saldo-glowne.exempt{background:#f0fdf4;border-color:#bbf7d0}
.rem-saldo-glowne.exempt b{color:#166534}
.rem-blad{background:#fef2f2;border-color:#fecaca;color:#b91c1c}

/* Kafelki inwestycji sa jednoczesnie filtrem tabeli -- musza wygladac na klikalne. */
.rem-kafelek-filtr{display:block;width:100%;text-align:left;cursor:pointer;font:inherit}
.rem-kafelek-filtr:hover{border-color:#94a3b8}
.rem-kafelek-filtr.rem-wybrany{background:#eff6ff;border-color:#60a5fa}
.rem-kafelek-filtr.rem-wybrany b{color:#1d4ed8}

/* ==========================================================================================
   BIOVIS -- skierowania laboratoryjne (views/biovis.js).
   Wszystkie klasy z prefiksem bv-. Zaden selektor nie siega poza .bv-*, wiec ten blok nie ma
   jak wplynac na zadna inna zakladke aplikacji.

   UKLAD MEDICAL HISTORY: siatka auto-fill, a nie sztywne 2/3 kolumny -- liczba kolumn wynika
   z szerokosci okna, wiec na waskim desktopie kategorie nie sciskaja sie do nieczytelnosci,
   a na szerokim nie zostaje pusty pas. Kategorie sa oddzielone wlasna karta z ramka, bo jedna
   dluga lista 60 rozpoznan bez podzialu jest nie do odczytania wzrokiem.
   ========================================================================================== */
/* CZYTELNOSC BEZ MECZENIA OCZU (prosba wlasciciela 2026-08-11).
   Zmierzone kontrasty na bialym tle:
     #7b8492 (stary szary tekst) 3.8:1  -- nie przechodzi nawet WCAG AA
     #5b6572 (stary "muted")     5.9:1  -- ponizej AAA
     #000000 (czysta czern)     21.0:1  -- MAKSIMUM, i wlasnie to meczy
     #1a1f26 (atrament)         16.6:1  -- czyta sie jak czern, bez drgania liter
     #2f3742 (drugi plan)       12.0:1  -- nadal grubo powyzej AAA
   Czysta czern na bieli daje najwyzszy mozliwy kontrast i na jasnym ekranie rozlewa sie
   na krawedziach liter. Ciemny atrament wyglada tak samo czarno, a nie kluje.
   DRUGA POLOWA TO NIE KOLOR: zmeczenie bierze sie bardziej z ciasnoty niz z odcienia, wiec
   tabela dostaje wiekszy stopien pisma, wyzszy wiersz i wiecej powietrza w komorce. */
.bv-modul{display:flex;flex-direction:column;gap:16px;
  --cem-muted:#2f3742;--bv-atrament:#1a1f26;color:var(--bv-atrament)}

.bv-podzakladki{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--cem-border,#dcdfe4)}
.bv-podzakladka{background:none;border:none;border-bottom:2px solid transparent;padding:9px 14px;
  cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--cem-muted,#5b6572)}
.bv-podzakladka:hover{color:var(--cem-text,#1d2733)}
.bv-podzakladka-aktywna{border-bottom-color:var(--cem-accent,#2f6feb);color:var(--cem-text,#1d2733)}

/* min-width:0 JEST KONIECZNE, nie kosmetyczne. Element w gridzie/flexie domyslnie NIE ZWEZA sie
   ponizej swojej zawartosci -- szeroka tabela w srodku rozpychala wiec cala sekcje, a przez nia
   strone, i prawa krawedz wychodzila poza ekran. Z min-width:0 sekcja moze byc wezsza niz to,
   co w niej stoi, a przewijaniem zajmuje sie otoczka tabeli. */
.bv-sekcja{border:1px solid var(--cem-border,#dcdfe4);border-radius:10px;padding:14px 16px;
  background:#fff;min-width:0}
.bv-sekcja-tytul{margin:0 0 12px;font-size:12px;letter-spacing:.06em;color:var(--cem-muted,#5b6572)}
.bv-formularz{display:flex;flex-direction:column;gap:14px;min-width:0}
/* KROK PACJENTA -- pierwszy ekran nowego skierowania (widokKrokPacjenta). */
.bv-podtytul{margin:18px 0 8px;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--cem-muted,#5b6572);border-top:1px solid var(--cem-border,#dcdfe4);padding-top:14px}
.bv-krok-pacjenta .bv-akcje{margin-top:12px}

/* === KROK 1: KTO TO JEST? ==================================================================
   Ekran odpowiada na jedno pytanie i ma dokladnie dwie odpowiedzi: pacjent juz u nas byl albo
   jest pierwszy raz. Dlatego DWIE KARTY obok siebie, a nie jedna sciana pol z naglowkiem
   w srodku -- oko ma zobaczyc wybor, zanim zacznie czytac. Na waskim ekranie ustawiaja sie
   jedna pod druga i "albo" laduje miedzy nimi jako poziomy separator. */
.bv-krok-naglowek{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding:2px 2px 4px}
.bv-krok-numer{flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--cem-accent,#2f6feb);color:#fff;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.bv-krok-tytul{margin:2px 0 2px;font-size:19px;font-weight:650;letter-spacing:-.01em}
.bv-krok-opis{margin:0;font-size:13px;color:var(--cem-muted,#5b6572)}
.bv-krok-lekarz{margin-left:auto;min-width:210px}

.bv-drogi{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;margin-top:14px}
.bv-droga{border:1px solid var(--cem-border,#dcdfe4);border-radius:12px;padding:16px 18px;
  background:#fff}
.bv-droga-szukaj{background:#fbfcfe}
.bv-droga-tytul{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.02em}
.bv-droga-tytul::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:8px;vertical-align:middle;background:var(--cem-accent,#2f6feb)}
.bv-droga-nowy .bv-droga-tytul::before{background:#b5534c}

/* "albo" na pionowej kresce miedzy kartami -- czyta sie jako rozwidlenie, a nie jako kolejny
   krok do wykonania po poprzednim. */
.bv-drogi-albo{position:relative;width:56px;display:flex;align-items:center;justify-content:center}
.bv-drogi-albo::before{content:'';position:absolute;top:14px;bottom:14px;width:1px;
  background:var(--cem-border,#dcdfe4)}
.bv-drogi-albo span{position:relative;background:var(--cem-bg,#f5f6f8);padding:4px 0;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cem-muted,#5b6572)}

@media (max-width: 880px){
  .bv-drogi{grid-template-columns:1fr}
  .bv-drogi-albo{width:auto;height:44px}
  .bv-drogi-albo::before{top:50%;bottom:auto;left:14px;right:14px;width:auto;height:1px}
  .bv-lekarz{min-width:0;flex:1 1 100%}
}
/* Potwierdzenie zapisu przy samym przycisku -- patrz sekcjaStatus(). */
.bv-komunikat-przy-akcji{margin:12px 0 0;font-size:12px}

.bv-siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
/* WIERSZ SCISNIETY: data urodzenia, plec, PESEL, telefon i kod pacjenta maja zmiescic sie w jednej
   linii. Krotkie pola przy 190px lamalyby sie na dwa rzedy na zwyklym monitorze. Nadal auto-fit,
   wiec na waskim ekranie zawijaja sie same -- to nie jest sztywne pieciokolumnowe pudlo. */
.bv-siatka-waska{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* KOD PACJENTA PRZY NOWYM PACJENCIE. Puste znaczy "serwer nada kolejny" -- i ma to byc widac bez
   czytania podpowiedzi. Czerwien jest przygaszona, bo to NIE jest blad, tylko informacja; napis
   bialy, zeby dalo sie go przeczytac. Gasnie sama w chwili, gdy ktos zacznie pisac wlasny numer
   z papierowej historii -- :placeholder-shown przestaje wtedy pasowac. */
.bv-kod-auto:placeholder-shown{background:#b5534c;border-color:#b5534c;color:#fff}
.bv-kod-auto:placeholder-shown::placeholder{color:#fff;opacity:1;font-size:11px;letter-spacing:.02em}

/* PRZEBIEG PACJENTA -- kolor CALEGO wiersza, bo to on ma zatrzymac wzrok przy przegladaniu listy.
   Tla sa blade: wiersz ma sie wyroznic, a nie krzyczec, i tekst musi zostac czytelny.
   Wyszarzenie znaczy "nie liczy sie do niczego", NIE "usuniete" -- dokument zostaje wazny
   i czeka na pacjenta, wiec bez przekreslenia. */
.bv-przebieg-uwagi{background:#fdecea}
.bv-przebieg-uwagi td{border-color:#f3c9c4}
/* NIE PRZYSZLA -- jedyny czerwony wiersz w tabeli. Kod i barcode sa nadane, probki nie ma.
   Lewa krawedz niesie to takze wtedy, gdy ktos drukuje liste w czerni. */
.bv-przebieg-nieprzyszla{background:#fdecec;box-shadow:inset 3px 0 0 #c0392b}
.bv-przebieg-wrealizacji{background:#eef4ff}
.bv-przebieg-gotowe{background:#e8f5e9}
/* ZAMKNIETE POBRANIE NIE BARWI JUZ WIERSZA. Po imporcie historii WSZYSTKIE pobrania sa
   "omowione", wiec tlo stanu pokrywalo cala tabele i strona wygladala na szara -- barwa, ktora
   miala wyrozniac jeden wiersz, przestaje cokolwiek znaczyc, gdy maja ja wszystkie. Stan niesie
   PLAKIETKA w kolumnie "Status" (.bv-stan-omowione), czyli maly, celowany znacznik. Wlasciciel
   poprosil 2026-08-11: "zrob tak jak w rejestrze pacjentow" -- tam wiersze sa czyste. */
.bv-wiersz-pominiety{background:#f1f2f4}
/* RAPORT ROZBIEZNOSCI -- rozwiniety domyslnie, bo jego cala rola to byc PRZECZYTANYM. */
.bv-rozbieznosci{margin-top:12px;border:1px solid var(--cem-border,#dcdfe4);border-radius:8px;
  padding:10px 12px;background:#fcfcfd}
.bv-rozbieznosci summary{cursor:pointer;font-size:13px;font-weight:600}
/* JEDEN STAN, PIEC ODCIENI: szkic neutralny, do wyslania czeka, w realizacji w drodze,
   wykonane zielone, omowione wygaszone -- sprawa zamknieta. */
.bv-stan-szkic{background:#eceff3;color:#4a5260}
.bv-stan-do_wyslania{background:#fff3cd;color:#7a5a12}
.bv-stan-w_realizacji{background:#dbe7ff;color:#2f4f8f}
.bv-stan-wykonane{background:#c8e6c9;color:#2e5c31}
.bv-stan-omowione{background:#e4e7eb;color:#2b313a}
.bv-znacznik-uwagi{background:#f8d7da;color:#8c2f2f}
/* "ZMIENIONO" -- ta sama rola, co w zakladce kosztow: liczba wpisana recznie ma sie ODROZNIAC
   od wyliczonej, inaczej nie wiadomo, czy patrzy sie na rachunek, czy na podpowiedz systemu. */
.bv-zmieniono{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  font-size:10px;font-weight:600;background:#fff3cd;color:#7a5a12;white-space:nowrap}
.bv-wiersz-zaplata td{border-top:1px solid var(--cem-border,#dcdfe4)}
.bv-kol-zaplata{white-space:nowrap}
/* MIEJSCE DO WPISANIA -- MOCNE CZERWONE TLO NA CALEJ KOMORCE (prosba wlasciciela 2026-08-14).
   Nie znacznik obok danych, tylko sama komorka: chodzi o to, zeby przy przewijaniu dlugiej
   historii dalo sie ZOBACZYC, gdzie sa dziury, bez czytania wiersz po wierszu.
   Tlo #f3b7b7 z tekstem #6b1414 daje kontrast 7,07:1 -- mocne, a nadal czytelne.
   Swieci WYLACZNIE tam, gdzie dane naprawde brakuje (patrz brakDoWpisania w biovis.js):
   dokument w stanie "nie przyszedl" jest kompletny bez daty i bez kwoty. */
.bv-do-wpisania{background:#f3b7b7}
.bv-do-wpisania-napis{color:#6b1414;font-weight:700;font-size:12px;white-space:nowrap}
.bv-kwota{font-family:var(--cem-mono,ui-monospace,monospace);font-size:12px;font-weight:600}
.bv-kwota-zaplacona{font-size:13px;margin-right:6px}
/* WYSLIJ SWIECI, DOPOKI MATERIAL NIE POJECHAL. Jedyna czynnosc na tej liscie, ktorej nie da sie
   odrobic i o ktorej najlatwiej zapomniec przy pakowaniu partii. Po wyslaniu przycisk znika,
   a stan obok robi sie zielony -- kolor niesie wtedy te sama informacje. */
/* "WYSLIJ" MA WOLAC, DOPOKI NIE ZOSTANIE KLIKNIETY. Recepcja pakuje probowki partiami i to jest
   ten jeden krok, o ktorym najlatwiej zapomniec -- a jego brak widac dopiero, gdy laboratorium
   nie odsyla wyniku. Dlatego pelny przycisk, a nie odnosnik: wyroznia sie z listy sam z siebie
   i nie gasnie po najechaniu. */
/* SELEKTOR PODWOJNY (.bv-link.bv-do-wyslania), A NIE SAM .bv-do-wyslania. Przycisk nosi OBIE
   klasy, a `.bv-link` stoi w tym pliku NIZEJ -- przy rownej specyficznosci wygrywala regula
   pozniejsza i jej `background:none` + `color:#2f6feb` zdejmowaly czerwien i biel. Zostawal sam
   `:hover` (bo `.bv-link` nie ma reguly hover), wiec przycisk czerwienil sie DOPIERO pod myszka.
   Podwojna klasa wygrywa specyficznoscia, wiec kolejnosc regul w pliku przestaje o tym decydowac. */
.bv-link.bv-do-wyslania{display:inline-block;background:#c0392b;border:1px solid #a53324;
  border-radius:7px;padding:5px 12px;color:#fff;font-weight:700;font-size:11px;letter-spacing:.03em;
  text-transform:uppercase}
.bv-link.bv-do-wyslania:hover{background:#a5332a;border-color:#8f2b23;color:#fff}
/* KROK PRZED WYSYLKA -- CICHSZY NIZ "WYSLIJ", i to jest cala roznica. Oba przyciski stoja w tym
   samym miejscu wiersza, wiec gdyby wygladaly tak samo, kliknieciem rzadzilby odruch, a nie
   wzrok. "Do wysłania" jest odwracalne (wystarczy przestawic stan), "Wyślij" nie jest -- dlatego
   obwodka zamiast wypelnienia. Selektor PODWOJNY z tego samego powodu, co wyzej: `.bv-link`
   stoi w pliku nizej i przy rownej specyficznosci zdjalby te reguly. */
.bv-link.bv-hist-do-wyslania{display:inline-block;background:#fff;border:1px solid #b7c0cc;
  border-radius:7px;padding:5px 12px;color:#41506a;font-weight:600;font-size:11px;
  letter-spacing:.03em;text-transform:uppercase}
.bv-link.bv-hist-do-wyslania:hover{background:#eef2f7;border-color:#8f9cae;color:#2b3648}
/* SLAD PO WYSYLCE. Ten sam ksztalt i to samo miejsce, co dwa przyciski wyzej -- zeby kolumna nie
   podskakiwala po klikniecu -- ale WYSZARZONY i bez obwodki, bo nie ma juz czego klikac.
   `cursor:default` mowi to samo myszka, zanim czlowiek sprobuje. */
/* BRAK DECYZJI "KOD CZY NAZWISKO". Bursztyn, a nie czerwien: czerwony w tej tabeli znaczy
   "nie ma czego wpisac" albo "to jest nieodwracalne", a tu jest co zrobic i da sie to zrobic
   od reki. Ten sam ksztalt, co pozostale przyciski kroku -- kolumna nie ma podskakiwac. */
.bv-link.bv-hist-wybor-widocznosci{display:inline-block;background:#fdf3e0;border:1px solid #e0b463;
  border-radius:7px;padding:5px 12px;color:#8a5a11;font-weight:700;font-size:11px;
  letter-spacing:.03em;text-transform:uppercase}
.bv-link.bv-hist-wybor-widocznosci:hover{background:#f8e8cd;border-color:#c99a45;color:#6f470c}
/* ZDANIE ZAMIAST PRZYCISKU ZAPISU na dokumencie, ktory juz pojechal. Stoi w tym samym miejscu,
   co "ZAPISZ WSZYSTKO", zeby od razu bylo widac, dlaczego przycisku nie ma. */
.bv-podglad-info{display:inline-block;max-width:520px;padding:8px 12px;border-radius:8px;
  background:#eef2f7;border:1px solid #d3dae4;color:#41506a;font-size:12px;line-height:1.4}
/* KOD POLECAJACEGO -- ten sam ksztalt, co inne krotkie oznaczenia w tabelach. Monospace, bo
   to napis PRZEPISYWANY z kartki, a nie czytany: przy jednakowej szerokosci znakow latwiej
   zauwazyc, ze "O" jest zerem. */
.bv-kod-polecajacego{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.02em;background:#eef2f7;border:1px solid #d3dae4;
  border-radius:6px;padding:2px 7px;color:#33445e}
.bv-polecajacy-nowy{background:#fff;border:1px solid #e8ecf1;border-radius:12px;
  padding:16px;margin:0 0 16px}
.bv-hist-wyslane-slad{display:inline-block;padding:5px 12px;border:1px solid transparent;
  border-radius:7px;background:#eceff1;color:#7b8794;font-weight:600;font-size:11px;
  letter-spacing:.03em;text-transform:uppercase;cursor:default}
.bv-znacznik-oplacone{background:#c8e6c9;color:#2e5c31;margin-left:0;margin-right:5px}
.bv-kwota-hurt{color:var(--cem-muted,#5b6572)}
/* LOGO -- podglad w tej samej skali, w jakiej wyjdzie na papier (32 mm to okolo 120 px przy
   96 dpi), zeby nie bylo niespodzianki po wydruku. */
.bv-logo-blok{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:14px 0 4px;
  padding:14px 16px;border:1px dashed var(--cem-border,#dcdfe4);border-radius:10px;background:#fafbfc}
.bv-logo-podglad{max-width:120px;max-height:80px;object-fit:contain;
  background:#fff;padding:6px;border:1px solid var(--cem-border,#dcdfe4);border-radius:8px}

/* OPLACONE MA BYC WIDAC. Maly kwadracik obok dlugiej etykiety ginal miedzy polami, a to jedna
   z dwoch rzeczy, ktorych recepcja szuka na tym ekranie wzrokiem. Caly przelacznik klika sie
   jak przycisk i zmienia kolor -- stan widac z drugiego konca biurka. */
.bv-oplata-przelacznik{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:8px 14px;border-radius:10px;border:1.5px solid #e0e4ea;background:#fafbfc;
  transition:background .12s,border-color .12s}
.bv-oplata-przelacznik:hover{border-color:#c9d1db;background:#fff}
.bv-oplata-przelacznik input{position:absolute;opacity:0;pointer-events:none}
.bv-oplata-znak{width:22px;height:22px;flex:none;border-radius:6px;border:1.5px solid #c9d1db;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#2e5c31}
.bv-oplata-tekst{font-size:13px;font-weight:600;color:var(--cem-muted,#5b6572)}
.bv-oplata-tak{background:#e8f5e9;border-color:#8fc493}
.bv-oplata-tak:hover{background:#e0f0e1;border-color:#7cb681}
.bv-oplata-tak .bv-oplata-znak{background:#2e7d32;border-color:#2e7d32;color:#fff}
.bv-oplata-tak .bv-oplata-tekst{color:#2e5c31}
.bv-przebieg-etykieta{font-size:11px;font-weight:600;letter-spacing:.02em}
.bv-kol-przebieg{white-space:nowrap}
.bv-znacznik-obiegu{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:4px;
  font-size:10px;font-weight:600;background:#e4e7eb;color:#4a5260}
.bv-znacznik-odbior{background:#c8e6c9;color:#2e5c31}
/* WYSLANO jest znacznikiem NIEODWRACALNYM w praktyce -- od niego zalezy, czy dokument wolno
   jeszcze skasowac. Dlatego wyglada mocniej niz pozostale. */
.bv-znacznik-wyslano{background:#3f5977;color:#fff}
/* BADANIE JUZ NA SKIEROWANIU. Zostaje na liscie (zeby bylo widac, ze sie je ma), ale przestaje
   wygladac na klikalne -- inaczej brak reakcji czyta sie jak zaciety program. */
/* TOZSAMOSC PRZY PACJENCIE. Gdy jej brak -- pole wpisu od razu tutaj, bo bez niej wydruk jest
   odmawiany, a odsylanie do drugiej zakladki w srodku wizyty to strata czasu. */
.bv-pacjent-pesel{font-family:var(--cem-mono,ui-monospace,monospace);font-size:13px;
  color:var(--cem-muted,#5b6572)}
.bv-pacjent-brak{display:inline-flex;align-items:center;gap:6px}
.bv-pacjent-brak input{width:230px;padding:5px 8px;font-size:12px;border-radius:6px;
  border:1.5px solid #b5534c}

/* WYBOR NA KAFLE. Dwa male kolka radiowe z dlugim zdaniem obok czytalo sie jak drobny druk --
   a to jest decyzja o tym, ile laboratorium dowie sie o pacjencie. Kafel klika sie caly, wybrany
   jest widoczny z daleka, a opis siedzi w srodku zamiast pod spodem. */
.bv-kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.bv-kafel{display:flex;flex-direction:column;gap:2px;cursor:pointer;padding:10px 12px;
  border:1.5px solid var(--cem-border,#dcdfe4);border-radius:10px;background:#fff}
.bv-kafel:hover{border-color:#b9c3d0;background:#fbfcfd}
.bv-kafel{flex-direction:row;align-items:center;gap:11px}
.bv-kafel input{position:absolute;opacity:0;pointer-events:none}
.bv-kafel-znak{width:26px;height:26px;flex:none;border-radius:7px;border:1.5px solid #c9d1db;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#2e5c31}
.bv-kafel-opis-blok{display:flex;flex-direction:column;gap:1px}
.bv-kafel-tytul{font-size:14px;font-weight:650}
.bv-kafel-opis{font-size:11px;color:var(--cem-muted,#5b6572)}
.bv-kafel-stan{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#2e5c31}
/* ZAZNACZONY NA ZIELONO, tak samo jak wybor lekarza -- obie decyzje sa tego samego rodzaju:
   nie da sie ich zrobic za czlowieka i widac z daleka, czy w ogole zapadly. */
.bv-kafel-wybrany{border-color:#6aa96f;background:#e8f5e9;box-shadow:0 0 0 3px rgba(46,125,50,.12)}
.bv-kafel-wybrany .bv-kafel-znak{background:#2e7d32;border-color:#2e7d32;color:#fff}
.bv-kafel-wybrany .bv-kafel-tytul{color:#1f5c24}
.bv-kafle-brak{display:block;margin-top:7px;color:#8c2f2f}
.bv-lekarz-ustalony{display:flex;flex-direction:column;gap:1px;padding:8px 11px;
  border-radius:9px;background:#eef0f4}

/* PACJENT Z REJESTRU ma byc widac od razu -- to najwazniejsza informacja na tym ekranie.
   Kod monospacem i wiekszy, cale pole na jasnym tle z akcentem z lewej. */
.bv-pacjent-wybrany{border-left:3px solid var(--cem-accent,#2f6feb);background:#eef4ff;
  padding:11px 13px}
.bv-pacjent-wybrany .bv-pacjent-kod{font-size:16px}
.bv-pacjent-wybrany .bv-pacjent-opis{font-size:14px;font-weight:600}
.bv-pole{display:flex;flex-direction:column;gap:5px;min-width:0}
.bv-pole-szerokie{grid-column:1/-1}
.bv-pole-etykieta{font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--cem-muted,#5b6572)}

/* POLA WPISYWANIA. Wyzsze i spokojniejsze: obwodka bez kontrastu, jasne tlo, ktore bieleje
   dopiero pod kursorem, i WYRAZNY pierscien przy pisaniu -- czlowiek ma widziec, w ktorym polu
   stoi, nie domyslac sie tego z migajacej kreski. Przejscia sa krotkie (.12s), bo pola przy
   przechodzeniu tabulatorem zmieniaja sie jedno po drugim i dluzsza animacja robi z tego falę. */
.bv-pole input,.bv-pole select,.bv-pole textarea{width:100%;box-sizing:border-box;
  padding:9px 11px;border:1px solid #e0e4ea;border-radius:9px;font:inherit;font-size:13px;
  background:#fafbfc;color:inherit;transition:border-color .12s,background .12s,box-shadow .12s}
.bv-pole input:hover,.bv-pole select:hover,.bv-pole textarea:hover{border-color:#c9d1db;
  background:#fff}
.bv-pole input:focus,.bv-pole select:focus,.bv-pole textarea:focus{outline:none;background:#fff;
  border-color:var(--cem-accent,#2f6feb);box-shadow:0 0 0 3px rgba(47,111,235,.14)}
.bv-pole input::placeholder,.bv-pole textarea::placeholder{color:#5f6875}

/* POLE WYMAGANE, DOPOKI PUSTE. To NIE jest blad -- czlowiek jeszcze nic nie zrobil zle. Dlatego
   blade tlo i obwodka, a nie czerwony krzyk: ma przyciagac wzrok przy przegladaniu formularza
   i zgasnac w chwili wpisania. Pod kursorem i przy pisaniu zachowuje sie jak kazde inne pole,
   zeby nie wygladalo na zablokowane. */
.bv-pole input.bv-wymagane-puste,.bv-pole select.bv-wymagane-puste{
  background:#fdf2f1;border-color:#e7bcb7}
.bv-pole input.bv-wymagane-puste:hover,.bv-pole select.bv-wymagane-puste:hover{
  background:#fff7f6;border-color:#d99f98}
.bv-pole input[type="date"],.bv-pole input[type="time"]{min-height:37px}
.bv-pole select{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6572' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.bv-pole textarea{resize:vertical;min-height:56px;line-height:1.45}

/* === PRZELACZNIK LEKARZY ====================================================================
   Buduje sie ze slownika, wiec dziala dla dowolnej liczby lekarzy -- trzeci pojawi sie tu sam.
   Kazdy kafel niesie prefiks serii, bo to on rozstrzyga, w czyich numerach pracujemy. */
/* WYBOR LEKARZA PO LEWEJ, DUZE KAFLE. To pierwsza decyzja na tym ekranie i jedyna, ktorej nie da
   sie zrobic za czlowieka -- ma wiec wygladac jak decyzja, a nie jak ustawienie w rogu. Zaznaczony
   swieci na zielono, z ptaszkiem i slowem "zaznaczono": z drugiego konca biurka widac, czy wybor
   w ogole zostal zrobiony. */
.bv-lekarz-etykieta{display:block;margin-bottom:7px}
.bv-krok-lekarz{margin:14px 0 0}
.bv-lekarze{display:flex;flex-wrap:wrap;gap:10px}
.bv-lekarz{display:flex;align-items:center;gap:11px;cursor:pointer;text-align:left;
  padding:13px 18px;min-width:230px;border-radius:12px;font:inherit;
  border:1.5px solid #e0e4ea;background:#fafbfc;
  transition:background .12s,border-color .12s,box-shadow .12s}
.bv-lekarz:hover{border-color:#c9d1db;background:#fff}
.bv-lekarz-znak{width:26px;height:26px;flex:none;border-radius:7px;border:1.5px solid #c9d1db;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#2e5c31}
.bv-lekarz-opis{display:flex;flex-direction:column;gap:1px}
.bv-lekarz-imie{font-size:15px;font-weight:650}
.bv-lekarz-prefiks{font-family:var(--cem-mono,ui-monospace,monospace);font-size:11px;
  color:var(--cem-muted,#5b6572)}
.bv-lekarz-stan{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#2e5c31}
.bv-lekarz-wybrany{background:#e8f5e9;border-color:#6aa96f;box-shadow:0 0 0 3px rgba(46,125,50,.12)}
.bv-lekarz-wybrany:hover{background:#e0f0e1;border-color:#5c9c62}
.bv-lekarz-wybrany .bv-lekarz-znak{background:#2e7d32;border-color:#2e7d32;color:#fff}
.bv-lekarz-wybrany .bv-lekarz-imie{color:#1f5c24}

.bv-podpowiedz{font-size:12px;color:var(--cem-muted,#5b6572);line-height:1.45}

.bv-check{display:flex;align-items:flex-start;gap:6px;cursor:pointer;font-size:13px;line-height:1.35}
.bv-check input{margin-top:2px;flex:0 0 auto}

/* WYSZUKIWARKA I KOLEJNOSC W JEDNEJ LINII -- to jedno pytanie ("jak znalezc badanie") zadane
   dwoma polami. Na waskim ekranie przelacznik zjezdza pod pole sam (flex-wrap), a pole szukania
   nie kurczy sie ponizej 240px. */
.bv-szukaj{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bv-szukaj input{flex:1 1 240px;min-width:0;box-sizing:border-box;padding:9px 11px;
  border:1px solid var(--cem-border,#dcdfe4);border-radius:8px;font:inherit}
.bv-sort-badan{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;
  color:var(--cem-muted,#6b7280)}
.bv-sort-badan select{padding:8px 9px;border:1px solid var(--cem-border,#dcdfe4);border-radius:8px;
  font:inherit;font-size:13px;background:#fff;color:inherit}
.bv-wyniki{list-style:none;margin:8px 0 0;padding:0;max-height:420px;overflow-y:auto;
  border:1px solid var(--cem-border,#dcdfe4);border-radius:9px;background:#fff}
.bv-wyniki li+li{border-top:1px solid var(--cem-border,#dcdfe4)}
/* WIERSZ WYNIKU TO SIATKA, a nie tekst plynacy. Kod, nazwa i material stoja w stalych kolumnach,
   wiec oko jedzie w dol po jednej linii zamiast szukac poczatku nazwy w kazdym wierszu osobno. */
.bv-wynik{display:grid;grid-template-columns:22px 62px 1fr auto;align-items:center;gap:10px;
  width:100%;text-align:left;background:none;border:none;padding:9px 12px;cursor:pointer;
  font:inherit;font-size:13px;color:inherit;border-radius:0;
  /* Badanie wybiera się także dwuklikiem -- bez tego drugi klik podświetla nazwę badania. */
  -webkit-user-select:none;user-select:none}
.bv-wynik:hover{background:#f3f5f8}
/* WIERSZ PACJENTA MA WLASNY UKLAD (zgloszenie wlasciciela 1.09.2026: "data urodzenia wchodzi na
   nazwisko"). Siatka wyzej jest skrojona pod listę BADAN -- 22px na ptaszek i 62px na kod -- a tu
   stoja zupelnie inne rzeczy: numer pacjenta, nazwisko, data urodzenia i ostatnie pobranie.
   Wiersz plynie wiec w linii, zawija sie przy waskim ekranie, a data ma swoj odstep i nie wpada
   na nazwisko. */
.bv-wynik-pacjent{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.bv-wynik-pacjent .bv-wynik-kod{font-family:var(--cem-mono,ui-monospace,monospace);font-weight:600;
  white-space:nowrap}
.bv-wynik-pacjent .bv-wynik-osoba{font-weight:600}
.bv-wynik-pacjent .bv-wynik-dob{color:#6b7280;white-space:nowrap}
/* Ostatnie pobranie zawsze na koncu wiersza -- to znacznik, a nie czesc nazwiska. */
.bv-wynik-pacjent .bv-ostatnie-pobranie{margin-left:auto}
/* WYBRANE JEST WYSZARZONE (prośba właściciela 2026-08-13: "pojedynczy klik ma dodawać jak teraz
   i ma się wyszarzyć") -- przy przeglądaniu listy widać wtedy od razu, co jest już wzięte,
   i nie trzeba tego czytać po kolorze zaznaczenia.
   ALE NIE JEST WYŁĄCZONE. Dokładnie to było wcześniejszym błędem: wiersz robił się szary
   i `disabled`, czyli czytał się jak "niedostępny", a odkliknąć go nie było jak. Zostaje więc
   kursor, hover, `aria-pressed` i ptaszek -- to jest "już wzięte", a nie "nie można".
   Hover celowo CZERWONAWY: mówi, co zrobi klik w wyszarzoną pozycję -- zdejmie ją. */
.bv-wynik-zazn{background:#f0f2f5;color:#7b8593}
.bv-wynik-zazn .bv-kod{color:#8a93a1}
.bv-wynik-zazn .bv-material{background:#e6e9ee;color:#8a93a1}
.bv-wynik-zazn .bv-traf{background:#e8e4c8;color:#7b8593}
.bv-wynik-zazn:hover{background:#fdecec;color:#a5332a}
.bv-wynik-zazn:hover .bv-kod{color:#a5332a}
.bv-znacznik{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border:1.5px solid var(--cem-border,#c4cad3);border-radius:5px;background:#fff;
  color:#fff;font-size:12px;font-weight:700;line-height:1}
.bv-wynik-zazn .bv-znacznik{background:#95a0ae;border-color:#95a0ae}
.bv-wynik-zazn:hover .bv-znacznik{background:#c0564c;border-color:#c0564c}
.bv-kod{font-family:var(--cem-mono,ui-monospace,monospace);font-weight:700;font-size:12px;
  color:var(--cem-accent,#2f6feb)}
.bv-nazwa{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* MATERIAL JAKO PLAKIETKA PO PRAWEJ -- to cecha probowki, nie czesc nazwy badania. */
.bv-material{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#5b6572;background:#eef1f5;border-radius:20px;padding:3px 9px;white-space:nowrap}
.bv-traf{background:#fff3a3;color:inherit;border-radius:3px;padding:0 1px}
/* PASEK WYBRANYCH. Odpowiada na "co juz mam?" -- pytanie zadawane, ZANIM czlowiek zacznie szukac
   dalej -- wiec stoi nad wyszukiwarka, a nie pod lista. */
.bv-wybrane-pasek{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px;
  padding:9px 11px;background:#eaf7ee;border:1px solid #cbe6d5;border-radius:9px}
.bv-licznik{font-size:12px;font-weight:700;color:#26663f;white-space:nowrap}
.bv-plakietki{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto}
.bv-plakietka{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #cbe6d5;
  border-radius:20px;padding:3px 6px 3px 10px;cursor:pointer;font:inherit;font-size:11px;
  font-weight:700;color:#26663f;font-family:var(--cem-mono,ui-monospace,monospace)}
.bv-plakietka:hover{background:#fdecec;border-color:#e3b7b7;color:#a5332a}
.bv-plakietka-x{font-size:13px;line-height:1;opacity:.6}
.bv-plakietka:hover .bv-plakietka-x{opacity:1}

/* NAJCZĘŚCIEJ ZLECANE -- skrót do badań, które i tak wchodzą na większość skierowań.
   Osobny, chłodny kolor: to NIE jest lista wybranych (ta jest zielona wyżej), tylko katalog
   pod ręką. Plakietka mieści kod i skróconą nazwę, a wybrana dostaje ptaszek i wypełnienie --
   żeby po kliknięciu było widać, że badanie JUŻ jest na skierowaniu, a nie że przycisk nie działa. */
.bv-czeste{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;margin:0 0 10px;
  padding:9px 11px;background:#f4f7fb;border:1px solid #d9e2ee;border-radius:9px}
.bv-czeste-etykieta{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#3a5a86;white-space:nowrap;padding-top:4px}
.bv-czeste-lista{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto}
.bv-czeste-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #cdd9e8;
  border-radius:20px;padding:4px 11px;cursor:pointer;font:inherit;font-size:12px;color:#22334d;
  text-align:left;line-height:1.25;-webkit-user-select:none;user-select:none}
.bv-czeste-btn b{font-family:var(--cem-mono,ui-monospace,monospace);font-size:11px;color:#3a5a86}
.bv-czeste-btn:hover{background:#eaf1fb;border-color:#9fbbe0}
.bv-czeste-zazn{background:#f0f2f5;border-color:#d3d8e0;color:#7b8593}
.bv-czeste-zazn b{color:#8a93a1}
.bv-czeste-zazn:hover{background:#fdecec;border-color:#e3b7b7;color:#a5332a}
.bv-czeste-zazn:hover b{color:#a5332a}
.bv-czeste-ptaszek{font-size:12px;font-weight:700}

/* MEDICAL HISTORY -- karty kategorii. */
.bv-wywiad-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.bv-wywiad-karta{border:1px solid var(--cem-border,#dcdfe4);border-radius:9px;padding:10px 12px;background:#fbfcfd}
.bv-wywiad-kategoria{margin:0 0 8px;font-size:11px;letter-spacing:.05em;color:var(--cem-accent,#2f6feb)}
.bv-wywiad-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}

/* TABELA MA SIE PRZEWIJAC, A NIE ZGNIATAC. Samo overflow-x na otoczce nic nie dawalo: przy
   width:100% tabela zawsze mieściła się w otoczce, więc pasek przewijania się nie pojawiał,
   a kolumny robiły się nieczytelne. min-width pozwala jej urośnąć -- i dopiero wtedy otoczka
   naprawdę przewija. Na szerokim ekranie nic się nie zmienia. */
/* PASEK NAGLOWKA ZOSTAJE NA WIERZCHU przy przewijaniu w pionie -- przy kilkunastu kolumnach
   i dlugiej liscie inaczej trzeba pamietac, ktora kolumna jest ktora. */
/* PASEK PRZEWIJANIA MA BYC WIDOCZNY ZAWSZE, a nie dopiero gdy juz przewijasz.
   Zgloszenie wlasciciela 23.08.2026: "nie zawsze widze w historii skierowan pasek do przewijania
   na dole". Powod: przy domyslnych ustawieniach systemu przegladarka rysuje pasek NAKLADKOWY --
   pojawia sie na chwile w trakcie przewijania i znika. Przy kilkunastu kolumnach czlowiek nie ma
   wtedy zadnej wskazowki, ze w prawo jest jeszcze cos do zobaczenia.
   Nadanie wlasnego wygladu paskowi wymusza pasek KLASYCZNY, ktory zajmuje miejsce i stoi zawsze. */
/* OKNO TABELI. 70vh to wartosc AWARYJNA -- na wypadek, gdyby skrypt jeszcze nie zmierzyl ekranu.
   Prawdziwa wysokosc ustawia `dopasujOknoTabeli` w biovis.js: tyle, ile zostalo od gornej krawedzi
   tabeli do dolu ekranu. Wlasciciel 29.08.2026: "pasek przewijania w bok musze widziec caly czas"
   -- a przy stalym 70vh okno zaczynajace sie w polowie ekranu konczylo sie POD nim, razem z paskiem. */
.bv-tabela-otoczka{overflow-x:auto;overflow-y:auto;max-width:100%;max-height:70vh;
  scrollbar-width:auto;scrollbar-color:#b9c6d8 #eef2f7}
.bv-tabela-otoczka::-webkit-scrollbar{height:12px;width:12px}
.bv-tabela-otoczka::-webkit-scrollbar-track{background:#eef2f7;border-radius:99px}
.bv-tabela-otoczka::-webkit-scrollbar-thumb{background:#b9c6d8;border-radius:99px;
  border:2px solid #eef2f7}
.bv-tabela-otoczka::-webkit-scrollbar-thumb:hover{background:#93a5bd}
.bv-tabela thead th{position:sticky;top:0;z-index:2;background:#f2f4f7;
  box-shadow:inset 0 -1px 0 var(--cem-border,#dcdfe4)}
.bv-tabela{width:100%;min-width:760px;border-collapse:collapse;font-size:14px}
/* Tabela ZESTAWIENIA ma trzy waskie kolumny i stoi w srodku formularza -- wymuszanie na niej
   760px rozpychalo formularz, a nie ja sama. */
.bv-tabela-waska{min-width:0}
.bv-tabela th{text-align:left;font-size:11px;letter-spacing:.04em;color:var(--cem-muted,#5b6572);
  border-bottom:1px solid var(--cem-border,#dcdfe4);padding:7px 9px;white-space:nowrap}
.bv-tabela td{border-bottom:1px solid #eef1f4;padding:7px 9px;vertical-align:top}
/* === NAGLOWKI SORTUJACE -- POCZATEK =====================================================
   Naglowek, po ktorym da sie ustawic liste, jest PRZYCISKIEM, a nie samym napisem: musi dac
   sie w niego trafic klawiatura i musi byc widac, ze cos zrobi. Przycisk dziedziczy krój po
   `th`, zeby klikalne naglowki nie roznily sie od pozostalych niczym poza kursorem i strzalka
   -- inaczej tabela wygladalaby na dwie tabele obok siebie. */
.bv-tabela th.bv-th-sort{padding:0}
.bv-sort-historii{display:flex;align-items:center;gap:4px;width:100%;
  background:none;border:0;cursor:pointer;padding:7px 9px;
  font:inherit;letter-spacing:inherit;color:inherit;text-align:left;white-space:nowrap}
.bv-sort-historii:hover{color:var(--cem-tekst,#1f2937);background:#e8ecf1}
.bv-tabela th.bv-th-sort-aktywny{color:var(--cem-tekst,#1f2937)}
.bv-sort-strzalka{font-size:10px;line-height:1}
/* === NAGLOWKI SORTUJACE -- KONIEC ======================================================== */
/* TRESC TABEL NA CZARNO. Wczesniej wzmocnienie stalo tylko na rejestrze, zeby nie zgasic
   wyszarzenia wierszy niosacego znaczenie. Okazalo sie, ze nic nie ginie: stany maja WLASNE TLA
   (`.bv-przebieg-*`), a badanie nieaktywne dodatkowo przekreslenie nazwy -- szary tekst byl
   trzecim, najmniej czytelnym nosnikiem tej samej informacji. */
.bv-tabela td{color:var(--bv-atrament,#1a1f26);line-height:1.45;padding:9px}
.bv-tabela-rejestr td{font-size:14px}   /* rejestr byl wzorem -- teraz to samo maja wszystkie */
.bv-num{text-align:right;font-variant-numeric:tabular-nums}
/* Badanie, na ktorym sie doklada, ma byc widoczne z drugiego konca tabeli -- po to jest
   kolumna "zostaje". Sam minus przy liczbie ginie w kolumnie cyfr. */
.bv-kwota-ujemna{color:#c62828;font-weight:600}
.bv-akcje-kom{display:flex;gap:8px;flex-wrap:wrap}

.bv-status{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}
.bv-status-szkic{background:#eef1f4;color:#252c36}
.bv-status-uzupelnic{background:#fdf3d4;color:#7a5b09}
.bv-status-gotowe{background:#dff3e4;color:#1f6b39}
.bv-status-rzad{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bv-wersja{font-size:11px;color:var(--cem-muted,#5b6572)}

.bv-akcje{display:flex;gap:8px;flex-wrap:wrap}
.bv-btn{padding:8px 14px;border:1px solid var(--cem-border,#dcdfe4);border-radius:8px;background:#fff;
  cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.03em}
.bv-btn:hover{background:#f3f5f8}
.bv-btn-glowny{background:var(--cem-accent,#2f6feb);border-color:var(--cem-accent,#2f6feb);color:#fff}
/* TLO TRZEBA POWTORZYC, NIE TYLKO ROZJASNIC. `.bv-btn:hover` i `.bv-btn-glowny:hover` maja te sama
   specyficznosc, wiec o tlo rozstrzyga kolejnosc -- ale `.bv-btn-glowny` BEZ :hover jest slabsze
   od `.bv-btn:hover` i przegrywa. Przycisk pod kursorem dostawal wiec jasne tlo (#f3f5f8) przy
   bialym tekscie z reguly wyzej i robil sie pusty. Dotyczylo to KAZDEGO niebieskiego przycisku
   w module, nie tylko zakladania pacjenta. Samo filter: brightness() tego nie naprawia -- ono
   rozjasnia to tlo, ktore juz przegralo. */
.bv-btn-glowny:hover{background:var(--cem-accent,#2f6feb);filter:brightness(1.06)}
/* PRZYCISK WYBRANY W PRZELACZNIKU (kolejnosc katalogu). NIE `bv-btn-glowny`: tamten znaczy
   "kliknij mnie, to jest glowna akcja", a tu chodzi o stan -- ktora kolejnosc jest wlaczona.
   Stad tlo z akcentu w wersji bardzo jasnej i ramka w akcencie, bez odwracania kolorow. */
.bv-btn-wybrany{background:#eaf1fb;border-color:var(--cem-accent,#2f6feb);
  color:var(--cem-accent,#2f6feb);font-weight:600}
.bv-btn-wybrany:hover{background:#e0eafb}
/* Przelacznik kolejnosci: etykieta i dwa przyciski w jednej linii, ciasniej niz pasek akcji. */
.bv-katalog-kolejnosc{align-items:center;gap:8px;margin-bottom:8px}
.bv-katalog-kolejnosc .bv-btn{padding:5px 12px;font-size:13px}
.bv-link{background:none;border:none;padding:0;cursor:pointer;color:var(--cem-accent,#2f6feb);
  font:inherit;font-size:12px}
.bv-link[disabled]{color:#b9c0c9;cursor:default}
/* SZUKANIE BADAN MA SIE WYROZNIAC (prosba wlasciciela 2026-08-12: "zrob wieksze pole -- zlewa sie
   z innymi"). Przez to jedno pole przechodzi KAZDE badanie trafiajace na dokument, wiec nie ma
   prawa wygladac jak kolejna rubryka obok wzrostu i wagi. */
.bv-szukaj-duze{margin:4px 0 10px}
.bv-szukaj-duze input{width:100%;font-size:17px;padding:13px 16px;border-radius:10px;
  border:2px solid var(--cem-accent,#2f6feb);background:#fff}
.bv-szukaj-duze input:focus{outline:none;box-shadow:0 0 0 4px rgba(47,111,235,.16)}
.bv-szukaj-duze input::placeholder{color:#8a93a0;font-size:15px}
/* PRZYCISK WYLACZONY MA WYGLADAC NA WYLACZONY (zgloszenie wlasciciela 2026-08-12: "jest zapisano,
   ale przycisk nadal niebieski"). Do dzis `disabled` zmienialo TYLKO zachowanie -- niebieski
   "ZAPISZ WSZYSTKO" wygladal identycznie, czy bylo co zapisywac, czy nie. Klikniecie w wylaczony
   przycisk nie robi nic i nie ma prawa nic zrobic, wiec z zewnatrz bylo to nie do odroznienia od
   zepsutego przycisku -- i tak wlasnie bylo zglaszane, kilka razy. */
.bv-btn[disabled],.bv-btn:disabled{background:#eef1f5;border-color:#dcdfe4;color:#9aa3ad;
  cursor:default;filter:none}
.bv-btn[disabled]:hover,.bv-btn:disabled:hover{background:#eef1f5;filter:none}
.bv-btn-glowny[disabled],.bv-btn-glowny:disabled{background:#eef1f5;border-color:#dcdfe4;color:#9aa3ad}
.bv-btn-glowny[disabled]:hover,.bv-btn-glowny:disabled:hover{background:#eef1f5;filter:none}

.bv-filtry{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end;
  margin-bottom:14px}

/* Pasek nad lista wynikow: wyjscie z listy po lewej, podpowiedz o klawiszach po prawej. */
.bv-wyniki-pasek{display:flex;align-items:baseline;gap:10px;justify-content:space-between;
  margin:6px 0 4px}
/* PODSUMOWANIE HISTORII -- jeden panel na lekarza, obok siebie. Nigdy jedna wspolna kolumna:
   seria Piotra i seria Roberta to dwa osobne rachunki. */
/* === PANEL FINANSOWY -- POCZATEK ============================================================
   WSZYSTKIE reguly tego panelu stoja MIEDZY TYMI ZNACZNIKAMI i nigdzie indziej. Nie jest to
   porzadek dla ozdoby: `.bv-kafel`, `.bv-kafle` i `.bv-kwota` naleza w tym samym arkuszu do
   INNYCH komponentow, a panel, ktory nieopatrznie uzyl ich nazw, dziedziczyl cudze wlasciwosci
   (12 px na kwocie, uklad kolumnowy na kaflu) -- i wygladalo to jak brak efektu zmiany, a nie
   jak kolizja. Test w biovis-frontend.test.js sprawdza, ze zadna klasa uzyta w tym panelu nie
   ma reguly poza tym blokiem.
   Uklad dashboardowy, nie prezentacyjny (prosba wlasciciela 2026-08-14 po trzech rundach
   powiekszania: "liczby za duze, karty zajmuja ogromna czesc ekranu, calosc wyglada ciezko").
   Karta jest biala z wloskowata ramka, tresc niesie tlo kafli, a hierarchie -- grubosc pisma
   i ramka przy glownym wyniku, NIE stopien pisma.
   RESPONSYWNOSC BEZ MEDIA QUERY: `auto-fit` + `minmax` samo daje dwie kolumny na szerokim
   ekranie i jedna na telefonie, w tej samej regule -- nie ma progu do zapomnienia. */
/* ODSTEP OD TABELY PONIZEJ jest WIEKSZY niz odstep miedzy panelami (18 -> 28 px) i domkniety
   wlosowa kreska. Panel finansowy i historia pobran to DWIE ROZNE RZECZY: pierwsza sumuje okres,
   druga wylicza pojedyncze dokumenty -- a stykajac sie prawie bez przerwy czytaly sie jak jedna
   dluga sekcja (zgloszenie wlasciciela 2026-08-15: "oddziel panel rozliczeniowy od skierowan
   ponizej, bo teraz sie bardzo przyblizyly"). */
/* PIENIADZE ZWINIETE. Wlasciciel 29.08.2026: "jak wchodze w historie skierowan Biovis, to niech
   koszty beda zwiniete, rozwine, jak bede potrzebowal". Pasek nie pokazuje zadnej kwoty --
   "zwinac" znaczy schowac, a nie zostawic jedna liczbe na wierzchu. */
.bv-podsumowanie-zwiniete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 18px;padding:10px 14px;border:1px solid var(--cem-border,#dcdfe4);
  border-radius:10px;background:#faf8f4}
.bv-podsumowanie-zwiniete > span{font-weight:600;color:#3f3a33}

.bv-podsumowanie{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:16px;margin:0 0 28px;padding-bottom:22px;align-items:start;
  border-bottom:1px solid var(--cem-border,#dcdfe4)}
/* TRZECI PANEL -- "Cały Biovis" -- ma stac W TYM SAMYM RZEDZIE, co dwa pozostale (prosba
   wlasciciela 2026-08-15: "zrob to w 3 kolumnach, teraz sa dwie"). Prog `minmax` zszedl z 320
   na 300 px wlasnie po to: przy 320 trzeci panel spadal pod spod na typowym ekranie i suma
   czytala sie jak osobna sekcja, a nie jak trzecia kolumna tego samego rachunku.
   RESPONSYWNOSC ZOSTAJE: na waskim ekranie `auto-fit` nadal zwija panele do jednej kolumny. */
.bv-podsumowanie-razem{border-color:#c9d2e0;box-shadow:0 0 0 1px #eef1f6 inset}
.bv-podsumowanie-lekarz{background:#fff;border:1px solid #e8ecf1;border-radius:12px;padding:16px}
.bv-podsumowanie-lekarz h4{margin:0 0 1px;font-size:16px;font-weight:600;letter-spacing:.01em}
/* Wiersz "cala historia - dokumentow: 477" stoi CIASNO pod nazwiskiem: to podpis naglowka,
   a nie osobna informacja. */
.bv-podsumowanie-lekarz p{margin:0 0 12px;font-size:13px;color:#6b7480}
/* === KAFLE PODSUMOWANIA =====================================================================
   Wczesniej byla to lista wierszy "etykieta ...... kwota" pisana trzynastka -- wlasciciel
   zglosil 2026-08-14: "strasznie male te liczby i litery". Teraz kazda pozycja jest kaflem:
   etykieta NAD kwota, kwota duza, wlasne bardzo jasne tlo.
   ROZNICA TEL JEST ODCIENIEM, NIE JASNOSCIA (1,04-1,15 wzgledem karty): tla maja rozdzielac
   pozycje, a nie licytowac sie o uwage z liczbami. Znaczenie niesie etykieta -- kolor jest
   tylko pomoca dla oka i nikomu nie jest potrzebny do odczytania panelu.
   Kontrast tekstu policzony na kazdym tle: kwota >= 12:1, etykieta >= 4,9:1. */
/* NAZWY WLASNE (`bv-wskaznik*`), A NIE `bv-kafel*`. `.bv-kafel` i `.bv-kafle` naleza do
   INNEGO komponentu w tym samym arkuszu -- klikalnych kafli zakresu danych (patrz wyzej,
   ok. linii 1660) -- i niosa `cursor:pointer`, `flex-direction:column` oraz wariant w media
   query. Panel finansowy dziedziczyl z nich uklad kolumnowy, wiec wiersz "etykieta obok kwoty"
   nie skladal sie wcale. To ta sama pomylka, co wczesniej z `.bv-kwota` (12 px): nazwa klasy
   uzyta drugi raz w jednym arkuszu cicho przynosi cudze wlasciwosci. Pilnuje tego teraz test
   kolizji nazw w biovis-frontend.test.js. */
/* WSKAZNIKI JEDEN POD DRUGIM. Trzy podstawowe maja u obu lekarzy ten sam uklad i te sama wysokosc,
   wiec kolumny czytaja sie rownolegle. Kafle dodatkowe (prowizja, koncowy) stoja pod nimi
   w identycznym stylu i szerokosci -- to ta sama lista, tylko dopisana. */
.bv-wskazniki{display:grid;grid-template-columns:1fr;gap:6px}
.bv-wskazniki-dodatkowe{margin-top:6px}
/* ETYKIETA I KWOTA W JEDNEJ LINII, na wspolnej linii bazowej. To one daja te 40% wysokosci,
   ktorych zada prosba wlasciciela -- etykieta pod kwota kosztuje caly dodatkowy wiersz na kazdym
   kaflu, a nie wnosi nic, czego nie widac obok. Kwota dosunieta do PRAWEJ krawedzi: wszystkie
   kafle maja te sama szerokosc, wiec kwoty ustawiaja sie w pionie jedna pod druga -- i dopiero
   wtedy cyfry tabelarczne (.bv-liczba) robia to, po co sa.
   `flex-wrap` jest zabezpieczeniem, a nie ozdoba: na bardzo waskiej karcie kwota zjedzie pod
   etykiete zamiast wyjsc poza tlo albo zderzyc sie z napisem. */
/* WYMIARY WPISANE WPROST, BEZ SKALOWANIA (prosba wlasciciela 2026-08-14: "zastosuj dokladnie
   ponizsze wartosci, bez wlasnego zwiekszania"). Padding 10 px w pionie, 16 px w poziomie;
   wysokosc kafla wychodzi 43 px, a z dopiskiem 53 px -- w obu przypadkach ponizej zadanych 56.
   SIATKA, NIE FLEX: dopisek "w tym juz rozliczone" ma stanac POD ETYKIETA, w lewej kolumnie,
   a kwota zostac po prawej i nie podnosic kafla. Flex tego nie potrafi bez dodatkowego opakowania
   w markupie -- a markupu nie ruszamy. */
.bv-wskaznik{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:14px;
  padding:10px 16px;border-radius:10px;border:1px solid transparent;background:#f4f6f8}
.bv-wskaznik-etykieta{grid-column:1;grid-row:1;font-size:14px;line-height:1.25;color:#5b6472}
/* 20 px DLA KAZDEJ KWOTY, bez wyjatkow i bez skalowania -- takze dla "Zarobku" i "Koncowego".
   Wyroznienie wyniku niesie WYLACZNIE tlo i grubsza czcionka (600 zamiast 500), nigdy rozmiar.
   CYFRY TABELARYCZNE (patrz .bv-liczba): kwoty stoja jedna pod druga w kolumnie, wiec przecinki
   i grosze leza w tej samej pionowej linii. */
.bv-wskaznik-kwota{grid-column:2;grid-row:1 / span 2;align-self:center;
  font-size:20px;font-weight:500;line-height:1.15;color:#1f2937}
.bv-wskaznik-zarobek .bv-wskaznik-kwota,
.bv-wskaznik-koncowy .bv-wskaznik-kwota{font-weight:600}
/* Dopisek ("w tym juz rozliczone") POD ETYKIETA, w lewej kolumnie -- drobnym drukiem, zeby
   kafel prowizji mial te sama wysokosc, co pozostale. */
.bv-wskaznik-dopisek{grid-column:1;grid-row:2;font-size:11px;line-height:1.3;color:#5b6472}
/* GROSZE W DOPISKU LICZONE OD JEGO WLASNEGO STOPNIA PISMA. Kwoty w kaflach maja grosze wpisane
   na sztywno (15 px) -- w dopisku pisanym jedenastka wychodzily przez to WIEKSZE od samej
   liczby: "3 635,00" mialo koncowke wyzsza od tysiecy (zgloszenie wlasciciela 2026-08-15).
   Tutaj licza sie wzgledem dopisku, wiec zawsze sa od niego mniejsze. */
.bv-wskaznik-dopisek .bv-liczba-grosze,
.bv-wskaznik-dopisek .bv-liczba-waluta{font-size:0.8em}
/* Kolory znaczeniowe zostaja te same, tylko sciszone o jeden stopien. Kontrast policzony na
   kazdym tle: kwota >= 12,9:1, etykieta >= 5,2:1. */
.bv-wskaznik-koszt{background:#f4f6f8}
.bv-wskaznik-zaplacono{background:#f0f7f2}
.bv-wskaznik-zarobek{background:#eff4fc}
.bv-wskaznik-prowizja{background:#fdf7ea}
.bv-wskaznik-koncowy{background:#eef0fb}
/* GLOWNY WYNIK KARTY -- SAMO TLO, o stopien mocniejsze (prosba wlasciciela: wyroznienie ma
   wynikac wylacznie z koloru tla i grubszej czcionki). Ramka zdjeta. Odroznia to OSTATNIA liczbe
   rachunku danego lekarza: u wlasciciela "Zarobek", u Roberta "Koncowy".
   Kontrast na obu mocniejszych tlach: kwota >= 12,1:1, etykieta >= 4,9:1. */
.bv-wskaznik-zarobek.bv-wskaznik-glowny{background:#e6eefb}
.bv-wskaznik-koncowy.bv-wskaznik-glowny{background:#e6e9f9}
/* OBJASNIENIA: dostepne, ale wyraznie ciszej niz wyniki. Wloskowata kreska oddziela je od
   kafli, zeby czytaly sie jako przypis do calej karty, a nie jako opis ostatniego kafla. */
.bv-podsumowanie-notki{margin-top:12px;padding-top:10px;border-top:1px solid #eef1f5}
.bv-podsumowanie-notki p{margin:0 0 4px;font-size:13px;line-height:1.4;color:#6b7480}
.bv-podsumowanie-notki p:last-child{margin-bottom:0}
/* GROSZE MNIEJSZA CZCIONKA (prosba wlasciciela 2026-08-14). Przy kwotach szesciocyfrowych
   koncowka tej samej wielkosci co zlotowki wciaga wzrok i "400 388,28" czyta sie jak
   czterdziesci tysiecy. Nie wyszarzamy ich -- groszy trzeba dalej moc przeczytac, chodzi
   wylacznie o to, zeby nie konkurowaly ze zlotowkami o pierwsze spojrzenie. */
/* WLASNA KLASA, ODDZIELNA OD `.bv-kwota`. Tamta (wyzej w tym pliku, tabela historii) ma
   font-size:12px i monospace -- kwota w kaflu ja dziedziczyla i przez to NIE ROSLA razem
   z kaflem, mimo trzech kolejnych powiekszen. Tu font-size ma sie brac WYLACZNIE z kafla,
   wiec ta klasa go nie ustawia i ustawiac nie moze. */
.bv-liczba{white-space:nowrap;font-variant-numeric:tabular-nums}
/* Grosze mniejsze od zlotowek, ale NA TEJ SAMEJ LINII BAZOWEJ -- zadnego vertical-align, bo
   podniesiona koncowka czyta sie jak potega, a nie jak czesc kwoty. */
.bv-liczba-grosze{font-size:15px;font-weight:inherit}
/* Waluta jest podpisem kwoty, nie jej czescia: mniejsza i sciszona, ale nadal czytelna
   (kontrast >= 5,2:1 na kazdym tle kafla). */
/* 15 px WPROST, nie w em -- wartosc podana przez wlasciciela ma zostac ta wartoscia niezaleznie
   od tego, co kiedys stanie sie z rozmiarem kwoty. */
.bv-liczba-waluta{font-size:15px;font-weight:inherit;color:#5b6472}
/* === PANEL FINANSOWY -- KONIEC ============================================================== */
.bv-kwota-mocna{font-size:15px}

/* Kreska nad wynikiem byla potrzebna, dopoki panel byl lista wierszy. Kafle rozdzielaja
   pozycje same, a wynik wyroznia sie wielkoscia i szerokoscia na caly panel. */
.bv-import-wejscie{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
/* Wybor pliku i pole tekstowe maja byc jednakowo szerokie -- panel ustawia dzieci do lewej,
   wiec etykieta bez tego kurczy sie do szerokosci samego przycisku "Wybierz plik". */
.bv-import-wejscie .bv-pole{width:100%}
.bv-import-wejscie textarea{width:100%;box-sizing:border-box;padding:9px 11px;
  border:1px solid var(--cem-border,#dcdfe4);border-radius:8px;font-family:ui-monospace,monospace;font-size:12px}
.bv-import-podsumowanie{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.bv-licznik{padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600;background:#eef1f4;color:#4a5563}
.bv-import-new{background:#dff3e4;color:#1f6b39}
.bv-import-changed{background:#fdf3d4;color:#7a5b09}
.bv-import-unrecognized{background:#fbe3e3;color:#8c2f2f}
.bv-strzalka{color:var(--cem-muted,#5b6572);text-align:center}
.bv-import-pola{margin:0;display:grid;gap:2px;font-size:12px}
.bv-import-pola div{display:flex;gap:6px;align-items:baseline}
.bv-import-pola dt{margin:0;min-width:118px;color:var(--cem-muted,#5b6572)}
.bv-import-pola dd{margin:0;font-weight:600}

/* WYJSCIE Z ODMOWY -- przycisk stoi w tym samym pasku co komunikat, bo to jego czesc:
   zdanie mowi, co blokuje, a przycisk prowadzi tam, gdzie da sie to odblokowac. */
.bv-komunikat-akcja{margin-left:10px;padding:4px 12px;font-size:12px;vertical-align:middle}

.bv-notka{margin:10px 0 0;font-size:12px;color:var(--cem-muted,#5b6572)}
.bv-notka-brak{padding:9px 11px;background:#f7f8fa;border-radius:8px;border:1px dashed var(--cem-border,#dcdfe4)}
.bv-pusto{color:var(--cem-muted,#5b6572);font-size:13px;margin:10px 0}

.bv-komunikat{font-size:13px;border-radius:8px}
.bv-komunikat-pusty{display:none}
.bv-komunikat-ok{padding:9px 12px;background:#dff3e4;color:#1f6b39}
.bv-komunikat-blad{padding:9px 12px;background:#fbe3e3;color:#8c2f2f}
/* KONFLIKT ROKU W KODZIE. Ostrzezenie, nie blad -- dokument zapisal sie poprawnie, a rozjazd
   rozstrzyga czlowiek. Widzi je takze recepcja, wiec musi rzucac sie w oczy, ale nie wygladac
   jak awaria zapisu. */
.bv-komunikat-ostrzezenie{padding:10px 12px;background:#fdf3d8;color:#7a5a12;
  border:1px solid #e8d08a;border-radius:8px;margin-top:10px}
.bv-komunikat-ostrzezenie p{margin:0 0 8px}
.bv-komunikat-ostrzezenie p:last-child{margin-bottom:0}
.bv-znacznik-konflikt{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:6px;
  background:#fdf3d8;color:#7a5a12;font-size:10px;font-weight:600}
/* NUMER Z PAPIEROWEJ KARTKI. SZARY, i to jest cala decyzja: kod w rejestrze jest poprawny,
   rozjezdza sie tylko z papierem sprzed lat. Zolty ("rok?") wolalby o sprawdzenie, czerwony
   o dzialanie -- a tu nie ma czego sprawdzac ani robic, jest co PAMIETAC. */
.bv-znacznik-kartka{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:6px;
  background:#eceff1;color:#4a5560;font-size:10px;font-weight:600;cursor:help}
/* UWAGA PRZY NUMERZE PACJENTA -- gwiazdka z dymkiem. Bursztyn, nie czerwien: uwaga to notatka
   czlowieka o tym dokumencie, a nie usterka do naprawienia. Ta sama tresc stoi w polu "Uwagi"
   w dokumencie i przy kolumnie stanu; tutaj chodzi wylacznie o to, zeby dalo sie ja znalezc
   tam, gdzie sie patrzy -- przy numerze. */
.bv-znacznik-uwaga-kod{margin-left:5px;color:#a86b12;font-size:12px;font-weight:700;cursor:help}
/* WYSLANE NAZWISKIEM. Stalowy blekit, nie czerwien i nie zolc: to nie usterka i nie ostrzezenie,
   tylko sposob wysylki. Ma sie rozniac od "kod?" (czerwone) i "rok?" (zolte) na pierwszy rzut oka,
   bo tamte wolaja o sprawdzenie, a ten wylacznie informuje. */
.bv-znacznik-nazwisko{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:6px;
  background:#e7edf6;color:#3c5679;font-size:10px;font-weight:600;cursor:help}
/* Pole wpisywane w tresci komunikatu (numer pobrania z papierowej kartki) -- etykieta i input
   w jednej linii, zeby przycisk obok czytal sie jako domkniecie tego samego zdania. */
.bv-pole-inline{display:inline-flex;align-items:center;gap:6px;margin-right:8px;font-weight:600}
.bv-pole-inline input{padding:4px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* KOD, KTORY WYGLADA NA ZEPSUTY. Kod ZOSTAJE taki, jaki pojechal na papierze -- kolor mowi
   wylacznie "sprawdz to", a nie "poprawilem". Czerwien ta sama, co przy "kod do wpisania":
   z punktu widzenia patrzacego to jedna sprawa -- z tym kodem jest cos nie tak. */
.bv-kod-zly{color:#8f2323;font-weight:700}
.bv-znacznik-kod-zly{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:6px;
  background:#fbe3e3;color:#8f2323;font-size:10px;font-weight:700;cursor:help}
/* KOD DO DOPISANIA -- PUSTE MIEJSCE Z CZERWONYM TLEM, nie napis (prosba wlasciciela
   2026-08-14). Czerwien jest WEZWANIEM DO DZIALANIA, a nie informacja: dokument pojechal do
   laboratorium, a w rejestrze stoi bez kodu i nikt go za wlasciciela nie nada. Mocniejsza od
   "rok?" (zolty), bo tam kod JEST i tylko budzi watpliwosc.
   Przerywana ramka i szerokosc na caly kod (PNPL-123/4/2026) robia z tego RUBRYKE: pusty
   prostokat czyta sie jak miejsce do wypelnienia, a nie jak brak danych. */
.bv-kod-luka{display:inline-block;min-width:104px;height:1.15em;vertical-align:middle;
  border-radius:4px;background:#fbe3e3;border:1px dashed #c07575;cursor:help}
/* TA SAMA LUKA, ALE DO PISANIA (u wlasciciela). Wyglada IDENTYCZNIE jak pusta rubryka obok --
   inaczej dwie kolumny z ta sama trescia czytalyby sie jak dwa rozne stany dokumentu. Monospace
   i srodkowanie, bo w numerze liczy sie kazdy znak. */
input.bv-kod-luka{width:104px;height:auto;padding:2px 4px;color:#8f2323;font-weight:700;
  font-size:12px;text-align:center;cursor:text;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
input.bv-kod-luka:focus{outline:2px solid #c07575;background:#fff}
/* ARCHIWUM. Szary, NIE czerwony: zarchiwizowane skierowanie to nie awaria i nie ostrzezenie --
   dokument jest w porzadku, tylko wyjety z biezacej listy. Znacznik stoi obok statusu, wiec musi
   byc od niego wyrazniej stonowany, inaczej czytaloby sie to jak drugi status. */
.bv-znacznik-archiwum{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:6px;
  background:#eceef1;color:#5c636b;font-size:10px;font-weight:600}
/* Przelacznik archiwum w pasku filtrow. Bez etykiety nad polem (inaczej niz reszta filtrow) --
   to checkbox, wiec tekst nalezy obok, na tej samej linii co kwadracik. `width:auto` jest tu
   KONIECZNE: regula `.bv-pole input` daje wszystkim polom `width:100%`, co rozciagneloby kwadracik
   na cala kolumne filtra. Wysokosc jak u pozostalych pol, zeby przelacznik stanal w jednej linii
   z inputami, a nie przykleil sie do dolu komorki siatki. */
.bv-pole-przelacznik{flex-direction:row;align-items:center;gap:7px;min-height:34px;
  white-space:nowrap;cursor:pointer}
.bv-pole-przelacznik input{width:auto;margin:0;flex:none}
/* KATALOG: pasek akcji i karta badania. Modal jest celowo prosty -- katalog poprawia sie
   punktowo, wiec okno ma zmiescic siedem pol i dwa przyciski, nic wiecej. */
.bv-katalog-pasek{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
/* Nieaktywne badanie zostaje w liscie wlasciciela (inaczej nie dalo by sie go wlaczyc z powrotem),
   ale ma sie odrozniac od aktywnego na pierwszy rzut oka. */
.bv-badanie-nieaktywne{background:#fafbfc}
.bv-badanie-nieaktywne td:nth-child(2){text-decoration:line-through}
.bv-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;
  justify-content:center;padding:18px;z-index:60}
.bv-modal-okno{background:#fff;border-radius:14px;padding:20px 22px;width:100%;max-width:620px;
  max-height:90vh;overflow:auto;box-shadow:0 18px 48px rgba(15,23,42,.28)}
.bv-modal-tytul{margin:0 0 6px;font-size:17px}
/* Zdanie o snapshotach jest tresciowe, nie ozdobne: bez niego nikt nie odwazylby sie poprawic
   materialu przy badaniu uzytym juz na wystawionych skierowaniach. */
.bv-modal-notka{margin:0 0 14px;font-size:12px;line-height:1.45;color:var(--cem-muted,#5b6572);
  background:#f7f8fa;border:1px solid var(--cem-border,#dcdfe4);border-radius:8px;padding:9px 11px}
.bv-modal-pola{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.bv-modal-akcje{display:flex;gap:10px;margin-top:16px}
/* KOD NADANY -- najwazniejszy napis na tym ekranie. Recepcja przepisuje go znak po znaku
   z monitora na naklejke probowki, czesto na stojaco. Duzy monospace z odstepem miedzy znakami:
   w kodzie liczy sie KAZDY znak, a nie ogolny ksztalt slowa. */
.bv-kod-nadany strong{font-family:var(--cem-mono,ui-monospace,monospace);font-size:14px}
.bv-kod-wielki{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-radius:12px;
  background:#eef4ff;border:1.5px solid #b9cdf5}
.bv-kod-etykieta{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#3c5f9e}
.bv-kod-wartosc{font-family:var(--cem-mono,ui-monospace,monospace);font-size:26px;font-weight:700;
  letter-spacing:.04em;color:#1c3d75;line-height:1.15;word-break:break-all}
.bv-kod-przewidywany{background:#f7f8fa;border:1px dashed var(--cem-border,#dcdfe4);
  padding:9px 11px;border-radius:8px}
/* NUMER JUZ UZYTY. Czerwien znaczy "ten poszedl z poprzednia probowka" -- ma zatrzymac wzrok
   ZANIM ktos przepisze go na nowa probowke. Monospace jak kod pacjenta: numer czyta sie
   znak po znaku, a nie "z grubsza". */
.bv-ostatnie-pobranie{font-family:var(--cem-mono,ui-monospace,monospace);font-size:13px;
  color:#8c2f2f;background:#fbe3e3;border-radius:5px;padding:1px 6px;white-space:nowrap}
/* PACJENT WYBRANY Z REJESTRU. Kod pacjenta czytamy monospacem, bo to on jedzie na probowke --
   ma sie odczytywac znak po znaku, a nie "z grubsza". */
.bv-pacjent-wybrany{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 11px;background:#f7f8fa;border:1px solid var(--cem-border,#dcdfe4);border-radius:8px}
/* KOD NIGDY SIE NIE LAMIE. "PNPL-1/1/2026" przelamane po ukosniku czyta sie jak dwa rozne kody,
   a to jest napis, ktory laboratorium przepisuje na probowke. */
.bv-pacjent-kod{font-family:var(--cem-mono,ui-monospace,monospace);font-weight:600;font-size:14px;
  white-space:nowrap}
.bv-pacjent-opis{color:var(--cem-tekst,#333)}
.bv-pacjent-wybrany .bv-podpowiedz{margin-left:auto}
.bv-pacjent-wybrany .bv-link{margin-left:auto}
/* KARTA PACJENTA W REJESTRZE. Numer stoi w naglowku jako TEKST, nie jako pole -- jest staly
   i nie ma trasy, ktora by go zmieniala (server/biovis/pacjenci.js). */
.bv-karta-pacjenta{max-width:820px}
.bv-karta-naglowek{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:10px 12px;
  background:#f7f8fa;border:1px solid var(--cem-border,#dcdfe4);border-radius:8px;margin-bottom:14px}
.bv-karta-naglowek .bv-pacjent-kod{font-size:16px}
.bv-karta-naglowek .bv-podpowiedz{margin-left:auto}

/* Rozliczenie Piotr-Pawel (views/rozliczeniePawel.js).
   WLASNE nazwy klas, a nie ogolne "num"/"total": ogolnego ".num" w tym projekcie w ogole nie ma,
   a ".total" jest zdefiniowane WYLACZNIE wewnatrz .cem-owner-block i dotyczy wierszy <div>, nie
   komorek tabeli. Pozyczenie cudzej nazwy jest tu najgrozniejszym rodzajem bledu -- widok wyglada
   dobrze, dopoki ktos nie zmieni tamtego stylu. */
.cem-rozl-table .cem-rozl-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cem-rozl-table tfoot .cem-rozl-suma td{border-top:2px solid #dbe3ef;padding-top:9px;
  font-weight:700;color:#0f172a}
.cem-rozl-table tfoot .cem-rozl-suma+.cem-rozl-suma td{border-top:1px solid #eef2f7;padding-top:6px}
/* CZY PIENIADZE WYKONAWCY SA W KOSZTACH -- osobny blok pod tabela, bo to inne pytanie niz
   "ile mu jeszcze wisze". Czerwona ramka tylko wtedy, gdy czegos brakuje. */
.cem-rozl-koszty{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:#f8fafc;
  border:1px solid #e2e8f0}
.cem-rozl-koszty p{margin:0 0 6px}
.cem-rozl-koszty p:last-child{margin-bottom:0}
.cem-rozl-brak{background:#fef2f2;border-color:#fecaca;border-left:4px solid #b91c1c}

/* === ROZLICZENIE Z WYKONAWCA -- oprawa graficzna (23.08.2026) ==============================
   Wlasciciel: "zrób tę zakładkę ładniej graficznie i estetycznie". Zadnego nowego jezyka
   wizualnego: karta to `cem-panel`, liczby to `cem-income-card`, plakietki to `cem-badge` --
   te same, co w calym programie. Nowe sa TYLKO: uklad naglowka karty, pasek postepu
   i zageszczenie tabeli. Wszystkie klasy maja prefiks `cem-rozl-`, zeby nic nie zderzylo sie
   z innym widokiem. */
.cem-rozl-wstep{padding:0 20px;max-width:70ch}
.cem-rozl-lista{display:flex;flex-direction:column;gap:14px}
.cem-rozl-karta{padding:18px 22px}
.cem-rozl-naglowek{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #eef2f7}
.cem-rozl-naglowek h4{margin:0;font-size:17px}
.cem-rozl-naglowek p{margin:2px 0 0;font-size:12px}
.cem-rozl-kafelki{margin-bottom:4px}
.cem-income-card.ok{background:#f0fdf4;border-color:#bbf7d0}
.cem-income-card.ok b{color:#15803d}

/* Pasek "ile juz rozliczone" -- jedno spojrzenie zamiast odejmowania w glowie. */
.cem-rozl-pasek{height:8px;border-radius:999px;background:#eef2f7;overflow:hidden;margin:12px 0 6px}
.cem-rozl-pasek i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#16a34a)}
.cem-rozl-pasek-opis{margin:0 0 4px;font-size:12px;color:#64748b}

/* POLE WYBORU ROKU -- ramka z etykieta w srodku i wlasna strzalka, zamiast surowego <select>. */
.cem-rozl-rok{display:inline-flex;align-items:center;gap:10px;border:1px solid #dbe3ef;border-radius:10px;
  background:#fff;padding:6px 8px 6px 14px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.cem-rozl-rok>span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;font-weight:600}
.cem-rozl-rok select{appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font:inherit;font-size:15px;font-weight:600;color:#0f172a;cursor:pointer;padding:4px 26px 4px 0;
  background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
  background-position:calc(100% - 13px) 52%,calc(100% - 8px) 52%;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat}
.cem-rozl-rok:focus-within{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.15)}

/* TABELA MA ZAJAC CALA SZEROKOSC (wlasciciel 23.08.2026: "rozszerz pole bo wszystko się
   ścieśniło"). Klasa `.cem-table` nie ma w tym programie ZADNYCH regul -- tabela dostawala wiec
   domyslny wyglad przegladarki: szerokosc tylko na tresc i komorki bez oddechu, przez co siedem
   kolumn zbijalo sie w lewym rogu. Reguly sa WYLACZNIE dla `.cem-rozl-table`, zeby nie ruszyc
   pozostalych ekranow, ktore tez uzywaja `.cem-table`. */
.cem-rozl-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px;table-layout:auto}
.cem-rozl-table th,.cem-rozl-table td{padding:12px 14px;text-align:left;vertical-align:middle}
.cem-rozl-table tbody td{border-top:1px solid #f1f5f9}
.cem-rozl-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#64748b;
  font-weight:600;padding-bottom:9px;border-bottom:1px solid #e2e8f0}
/* Kolumny: kwoty maja swoja szerokosc, zeby nie skakaly przy zmianie miesiaca; przyciski
   dostaja tyle, ile potrzebuja, i to reszta ustepuje im miejsca, a nie odwrotnie. */
.cem-rozl-table th:nth-child(2),.cem-rozl-table th:nth-child(3){width:15%}
.cem-rozl-table th:first-child{width:16%}
.cem-rozl-table .cem-rozl-akcje{width:1%}
.cem-rozl-table tbody tr:hover{background:#f8fafc}
/* ZIELONY ZNACZNIK ZAPLATY: wlasna kolumna odstepu, nie cien pod tekstem. Wczesniej nazwa
   miesiaca dotykala paska (wlasciciel 23.08.2026: "miesiące dotykają do zielonej linii"). */
.cem-rozl-table tbody tr td:first-child{border-left:3px solid transparent;padding-left:14px}
.cem-rozl-table tbody tr.cem-rozl-zaplacony td:first-child{border-left-color:#22c55e}
.cem-rozl-mies-nazwa{display:block;font-weight:600}
.cem-rozl-mies small{display:block;font-size:11px;font-weight:400}
/* POGRUBIENIE TYLKO NA KWOTACH, KTORE COS ZNACZA -- nalezne i sumy. Reszta zwyklym tekstem;
   gdy pogrubione jest wszystko, nie jest pogrubione nic. */
.cem-rozl-kwota{font-weight:600}
.cem-rozl-suma td{font-weight:400}
.cem-rozl-suma-zwrot td{border-top:1px solid #eef2f7}
.cem-rozl-akcje{text-align:right;white-space:nowrap}
.cem-rozl-akcje .cem-btn{margin-left:6px}

/* ROZWIJANIE: "za co zapłaciłem" -- lista zabiegow pod miesiacem. */
.cem-rozl-rozwin{display:flex;align-items:baseline;gap:7px;border:0;background:transparent;
  font:inherit;text-align:left;padding:0;cursor:pointer;color:inherit}
.cem-rozl-rozwin:hover .cem-rozl-mies-nazwa{text-decoration:underline}
.cem-rozl-strzalka{color:#94a3b8;font-size:15px;line-height:1;transition:transform .12s;display:inline-block}
.cem-rozl-rozwin[aria-expanded="true"] .cem-rozl-strzalka{transform:rotate(90deg);color:#2563eb}
.cem-rozl-szczegoly>td{padding:0 14px 12px;background:#f8fafc;border-top:0}
.cem-rozl-szczegoly-box{border:1px solid #e2e8f0;border-radius:10px;background:#fff;padding:6px 14px 10px}
.cem-rozl-pozycje{width:100%;border-collapse:collapse;font-size:13.5px}
.cem-rozl-pozycje th{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:#94a3b8;
  font-weight:600;text-align:left;padding:8px 10px}
.cem-rozl-pozycje td{padding:9px 10px;border-top:1px solid #f1f5f9}
.cem-rozl-pozycje .cem-rozl-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* OPIS PRZY SWOJEJ KWOCIE -- para etykieta/liczba, a nie zdanie z dwiema liczbami w srodku. */
.cem-rozl-pary{display:flex;flex-wrap:wrap;gap:8px 28px}
.cem-rozl-para{display:flex;flex-direction:column;gap:1px}
.cem-rozl-para span{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#64748b;font-weight:600}
.cem-rozl-para b{font-size:16px;font-variant-numeric:tabular-nums}
.cem-rozl-zrodlo{margin:8px 0 0;font-size:12px}
.cem-rozl-ok{background:#f0fdf4;border-color:#bbf7d0}

@media (max-width:640px){
  .cem-rozl-karta{padding:12px}
  .cem-rozl-akcje{white-space:normal}
  .cem-rozl-akcje .cem-btn{margin:2px 0 0 4px}
  .cem-rozl-pary{gap:8px 18px}
}
/* PRZYCISK WYCISZONY -- droga poboczna, ktora ma byc dostepna, ale nie zapraszac.
   Uzyty przy "Pobierz sam inFakt": glowna droga jest jedna i nazywa sie "Pobierz faktury". */
.cem-btn-cichy{opacity:.62;font-weight:400}
.cem-btn-cichy:hover{opacity:1}
/* MIESIAC W TOKU -- pasek nad analizami. Zolty, nie czerwony: to nie jest blad, tylko informacja,
   ze patrzysz na niepelny miesiac. */
.cem-analizy-wtoku{border-left:4px solid #f59e0b;padding:10px 14px;margin:0 0 10px}
.cem-analizy-wtoku p{margin:0 0 4px}
.cem-analizy-wtoku p:last-child{margin-bottom:0}

/* LEKCJA DNIA dla recepcji (2026-08-16). Stoi NAD sentencją i wygląda inaczej niż ona: sentencja
   jest jednym miłym zdaniem, lekcja czegoś uczy. Trzy poziomy w środku — co spróbować (tytuł),
   jak to zrobić, i dlaczego to działa. Bez trzeciego zostaje polecenie, z nim — umiejętność. */
.cem-greeting.ma-lekcje{align-items:flex-start;padding-top:14px;padding-bottom:14px}
.cem-greeting.ma-lekcje .cem-greeting-tresc{flex-direction:column;align-items:stretch;gap:10px}
.cem-lekcja{background:#fff;border:1px solid #e2e8f0;border-left:4px solid #059669;
  border-radius:12px;padding:12px 16px;max-width:760px}
.cem-lekcja-naglowek{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#059669;margin-bottom:6px}
.cem-greeting p.cem-lekcja-tytul{font-size:15.5px;font-weight:650;color:#0f172a;margin-bottom:4px}
.cem-greeting p.cem-lekcja-tresc{font-size:14.5px;color:#334155;margin-bottom:5px}
.cem-greeting p.cem-lekcja-dlaczego{font-size:13.5px;color:#64748b;line-height:1.5}
@media (max-width:760px){.cem-lekcja{padding:11px 13px}
  .cem-greeting p.cem-lekcja-tytul{font-size:15px}
  .cem-greeting p.cem-lekcja-tresc{font-size:14px}}

/* VIP NA ZŁOTO (właściciel 2026-08-16: "VIP na złoty ma być", potem "zrób ładniejszy złoty").
   ZŁOTO ZAREZERWOWANE WYŁĄCZNIE DLA TEGO ZNACZNIKA — nie występuje nigdzie indziej w programie,
   więc nie da się go pomylić ze stanem (czerwony/bursztynowy/zielony) ani z kolorem sekcji.

   Dlaczego trzy przystanki w gradiencie, a nie dwa: prawdziwy metal ma jasny pas mniej więcej
   w jednej trzeciej wysokości, nie płynie równo od góry do dołu. Jasna kreska u góry
   (inset ... rgba(255,255,255,.75)) to odbicie światła — bez niej plakietka wygląda jak żółta
   naklejka, a nie jak coś tłoczonego. Cień jest CIEPŁY (brąz, nie czerń): szary cień pod złotem
   robi się brudny. */
.cem-vip{display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(160deg,#fffaf0 0%,#f7e6b4 38%,#e9cd82 100%);
  border:1px solid #d9bd6e;color:#6b4f0d;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  padding:2.5px 9px;border-radius:999px;white-space:nowrap;vertical-align:middle;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2.5px rgba(122,86,11,.22)}
button.cem-vip-klikalna{cursor:pointer;font-family:inherit;transition:filter .15s ease}
button.cem-vip-klikalna:hover{filter:brightness(1.06) saturate(1.08)}
.cem-vip-dodaj{border:0;background:none;color:#cbd5e1;font-size:15px;line-height:1;cursor:pointer;
  padding:0 4px;border-radius:6px;vertical-align:middle;transition:color .15s ease}
.cem-vip-dodaj:hover{color:#c9971f;background:#fffaf0}

/* Pasek nad listą dnia — recepcja ma to ZOBACZYĆ, nie najechać myszką, żeby się dowiedzieć.
   Ten sam złoty co plakietka, tylko rozlany na większą powierzchnię i o ton jaśniejszy, żeby
   duży blok nie krzyczał. Lewa krawędź trzyma pełne nasycenie — to ona niesie kolor. */
.cem-vip-pasek{position:relative;display:flex;gap:14px;align-items:flex-start;margin:0 22px 14px;
  padding:14px 18px 14px 20px;border:1px solid #e6d09a;border-radius:14px;
  background:linear-gradient(150deg,#fffdf6 0%,#fdf4dd 55%,#f9ead0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(122,86,11,.10);overflow:hidden}
.cem-vip-pasek::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#e9cd82,#d9bd6e)}
.cem-vip-pasek-znak{flex:none;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(160deg,#fdf3d3,#e9cd82);color:#6b4f0d;
  display:grid;place-items:center;font-size:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(122,86,11,.18)}
.cem-vip-pasek strong{display:block;font-size:15.5px;color:#0f172a;margin-bottom:2px}
.cem-vip-pasek p{margin:0;font-size:14px;color:#6b4f0d;line-height:1.5}
@media (max-width:760px){.cem-vip-pasek{margin:0 14px 12px;padding:12px 14px 12px 16px}}

/* KAŻDA ZMIANA SENTENCJI MA INNY KOLOR (właściciel 2026-08-16: "zmiana sentencji powinna się
   zmieniać na inny kolor"). Nowe zdanie w tym samym miejscu i w tym samym kolorze wygląda jak to,
   które już się przeczytało — i nikt go nie czyta drugi raz.

   Trzy pory dnia, trzy tony tej samej jasności: rano złoty (jak dotąd), po południu chłodny
   błękit, wieczorem ciepły róż. Nasycenie jest CELOWO niskie — pasek stoi nad treścią przez
   cały dzień, więc mocny kolor zmęczyłby po tygodniu. Żaden z tych tonów nie pokrywa się
   ze statusami (czerwony/bursztynowy/zielony) ani ze złotem znacznika VIP. */
.cem-greeting.cem-greeting-pora-1{background:linear-gradient(158deg,#fbfdff 0%,#eef5fb 55%,#e6eff8 100%);
  border-bottom-color:rgba(37,99,235,.22)}
.cem-greeting.cem-greeting-pora-1::before{background:linear-gradient(90deg,rgba(37,99,235,0),#7aa5e8 22%,#bcd4f5 50%,#7aa5e8 78%,rgba(37,99,235,0))}
.cem-greeting.cem-greeting-pora-1 p.cem-greeting-przeslanie{color:#3b5375}
.cem-greeting.cem-greeting-pora-1 p.cem-greeting-przeslanie:not(:first-child){border-left-color:rgba(37,99,235,.30)}

.cem-greeting.cem-greeting-pora-2{background:linear-gradient(158deg,#fffcfc 0%,#fbf0ef 55%,#f7e8e6 100%);
  border-bottom-color:rgba(190,90,80,.22)}
.cem-greeting.cem-greeting-pora-2::before{background:linear-gradient(90deg,rgba(190,90,80,0),#d99b92 22%,#f0cac4 50%,#d99b92 78%,rgba(190,90,80,0))}
.cem-greeting.cem-greeting-pora-2 p.cem-greeting-przeslanie{color:#7a4b45}
.cem-greeting.cem-greeting-pora-2 p.cem-greeting-przeslanie:not(:first-child){border-left-color:rgba(190,90,80,.30)}

/* JEDEN WIERSZ: sentencja po lewej, „Na dziś" po prawej (właściciel 2026-08-16: "a może być
   sentencja po lewej a na dziś po prawej w jednym wierszu na górze?").
   Lewa strona bierze całą wolną szerokość, prawa tyle, ile potrzebuje lekcja — do jednej trzeciej,
   żeby długi tytuł nie zepchnął sentencji do jednego słowa w linii. Na wąskim ekranie kolumny
   układają się jedna pod drugą; wtedy lekcja idzie NA GÓRĘ, bo to ona uczy. */
.cem-greeting.ma-lekcje{align-items:stretch;padding-top:10px;padding-bottom:10px}
.cem-greeting.ma-lekcje .cem-greeting-tresc{flex-direction:row;align-items:stretch;gap:18px;flex-wrap:nowrap}
.cem-greeting-lewa{flex:1 1 30%;min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;align-self:center}
/* SZERSZE „NA DZIŚ" = NIŻSZY PASEK (właściciel 2026-08-16: "zrób szersze na dziś, i wtedy
   wysokość tego pola się zmniejszy"). Lekcja ma trzy krótkie zdania; im węższa kolumna, tym
   więcej razy się łamią i tym wyższy robi się cały pasek nad treścią. Przy 52% mieszczą się
   zwykle w jednym–dwóch wierszach każde. */
.cem-greeting-prawa{flex:1 1 52%;min-width:340px;display:flex}
.cem-greeting-prawa .cem-lekcja{width:100%;margin:0;padding:9px 13px}
/* Ciaśniejsze odstępy w środku lekcji — przy szerokiej kolumnie powietrze między wierszami
   jest tym, co zostało z wysokości. */
.cem-greeting-prawa .cem-lekcja-naglowek{margin-bottom:3px}
.cem-greeting.ma-lekcje p.cem-lekcja-tytul{margin-bottom:2px;line-height:1.3}
.cem-greeting.ma-lekcje p.cem-lekcja-tresc{margin-bottom:2px;line-height:1.4}
.cem-greeting.ma-lekcje p.cem-lekcja-dlaczego{line-height:1.4}
@media (max-width:900px){
  .cem-greeting.ma-lekcje .cem-greeting-tresc{flex-direction:column;gap:10px}
  .cem-greeting-prawa{order:-1;flex:1 1 auto;min-width:0}
}

/* Powitanie w JEDNYM wierszu — łamanie linii z bazy jest tu składane w jedną linię (patrz
   shell.js), więc `pre-line` na tym akapicie już tylko przeszkadza. */
.cem-greeting p.cem-greeting-powitanie{white-space:normal}
/* Uśmiech obejmujący — stoi przed powitaniem, nie w jego treści, więc przepisanie powitania
   go nie kasuje. Lekko uniesiony, żeby siedział w linii pisma, a nie na niej. */
.cem-greeting-usmiech{font-size:18px;line-height:1;white-space:nowrap;filter:saturate(1.05)}

/* Potwierdzenie kontaktu przy znanym pacjencie (views/income.js). Gdy wypada pytac -- pole robi
   sie zolte, zeby recepcja zobaczyla je zanim kliknie "Zapisz", a nie po komunikacie bledu. */
/* KRATKA W TEJ SAMEJ LINII CO ZDANIE (wlasciciel 25.08.2026: "zaznaczenie powinno byc w tym
   samym wierszu co to zdanie").
   To pole jest `<label>` wewnatrz `.cem-form`, a tamta regula ustawia KAZDEJ etykiecie
   `flex-direction:column` -- i wygrywala specyficznoscia (0,1,1 wobec 0,1,0). Kratka ladowala
   wiec NAD zdaniem, mimo ze tutaj stoi `display:flex`. Selektor `.cem-form label.<klasa>` (0,2,1)
   bije tamten, a przy okazji broni sie przed `.cem-drawer--income label{gap:2px}` (0,2,0), ktory
   sciskal odstep kratki od tekstu do dwoch pikseli. */
.cem-kontakt-potwierdz,
.cem-form label.cem-kontakt-potwierdz{display:flex;flex-direction:row;align-items:center;gap:9px;
  padding:8px 10px;margin:2px 0 6px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;
  font-size:13px;line-height:1.35;color:#334155}
.cem-kontakt-potwierdz input{margin:0;flex:none;width:16px;height:16px}
.cem-kontakt-potwierdz.jest-wymagane{border-color:#fcd34d;background:#fffbeb;color:#92400e}
.cem-kontakt-potwierdz.jest-wymagane .muted{color:#b45309}

/* === URLOP W KALENDARZU PRACY =================================================================
   Dzień oznaczony ręcznie jako wolny. Nie liczy się do prowizji (domain/payroll.js), więc musi być
   widoczny na karcie, a nie tylko w skutkach — i musi dać się odkliknąć jednym ruchem. */
.cem-urlop-btn{background:#fffbeb;border-color:#fcd34d;color:#92400e}
.cem-urlop-btn:hover{background:#fef3c7;border-color:#f59e0b}
.cem-urlopy{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 2px;font-size:12.5px}
.cem-urlopy-tytul{font-weight:600;color:#92400e}
.cem-urlop-dzien{border:1px solid #fcd34d;background:#fffbeb;color:#92400e;border-radius:999px;
  padding:2px 9px;font:inherit;font-size:12px;cursor:pointer;transition:background-color .12s ease}
.cem-urlop-dzien:hover{background:#fde68a}
.cem-urlopy-nota{color:#a8a29e;font-size:11.5px}

/* WOLNE (soboty i niedziele w recepcji) -- INNY KOLOR NIZ URLOP, bo to inna rzecz.
   Urlop jest bursztynowy (ktos wzial wolne), wolne jest chlodne i spokojne: tak jest zawsze
   i nie wymaga niczyjej decyzji. Dzien odznaczony ("mimo weekendu liczy sie") idzie na zielono
   -- to jedyny z nich, ktory niesie pieniadze. */
.cem-wolne{width:100%}
.cem-wolne-dzien{border-color:#cbd5e1;background:#f8fafc;color:#475569}
.cem-wolne-dzien:hover{background:#e2e8f0}
.cem-wolne-platne{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;margin-top:4px}
.cem-wolne-platny{border-color:#86efac;background:#f0fdf4;color:#166534}
.cem-wolne-platny:hover{background:#dcfce7}
/* Dzien tylko do odczytu (Grafik pracy, Rozliczenie godzin) -- ten sam ksztalt, ale bez kursora
   i bez podswietlenia: nie udaje przycisku, ktorego tam nie ma. */
.cem-dzien-tylko-odczyt{display:inline-block;cursor:default}
.cem-dzien-tylko-odczyt:hover{background:inherit}

/* === ROZLICZENIE BIOVIS: NAGŁÓWEK I WYBÓR ROKU ================================================
   Właściciel 2026-08-16: „popraw wizualnie to zdanie i ten przycisk wyboru lat". Trzy warunki
   siedziały w jednym szarym akapicie sklejone w ciąg — a to od nich zależy każda kwota niżej.
   Rok był listą rozwijaną: żeby zobaczyć, co jest do wyboru, trzeba ją było otworzyć. */
.bvr-naglowek{padding:16px 18px}
.bvr-naglowek-gora{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.bvr-naglowek-tekst{flex:1;min-width:240px}
.bvr-lead{margin:0 0 8px;font-size:14.5px;line-height:1.4;color:#1e293b}
.bvr-warunki{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.bvr-warunki li{position:relative;padding-left:20px;font-size:12.5px;line-height:1.45;color:#64748b}
.bvr-warunki li::before{content:"✓";position:absolute;left:0;top:0;color:#059669;font-weight:700;font-size:12px}
.bvr-warunki strong{color:#334155;font-weight:600}
.bvr-naglowek-kto{flex:none}
.bvr-naglowek .bvr-lekarz{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
  border-radius:999px;background:#fdf2f8;border:1px solid #fbcfe8;color:#9d174d;font-size:13.5px;font-weight:600}
.bvr-lekarz-wybor{display:flex;align-items:center;gap:8px;font-size:13px;color:#475569}

/* Rok jako rząd przycisków — wszystkie lata na wierzchu, wybrany podświetlony. */
.bvr-lata{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid #f1f5f9}
.bvr-rok{border:1px solid #e2e8f0;background:#fff;color:#64748b;border-radius:999px;padding:6px 14px;
  font:inherit;font-size:13px;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.bvr-rok:hover{background:#f8fafc;border-color:#cbd5e1;color:#334155}
.bvr-rok.jest-wybrany{background:#be185d;border-color:#be185d;color:#fff;font-weight:600}
.bvr-rok.jest-wybrany:hover{background:#9d174d;border-color:#9d174d;color:#fff}

/* === ANALIZY: „JAK ZARABIAĆ WIĘCEJ" ===========================================================
   Właściciel 2026-08-16: „mam mętlik oglądając to (…) dołóż praktyczne analizy". Każdy blok ma
   jedną liczbę na wierzchu, tabelę i zdanie „Do zrobienia" — bo analiza bez wniosku to ładniejsza
   wersja wyciągu z konta. */
.an-sprzedaz{display:flex;flex-direction:column;gap:14px}
.an-blok{padding:18px 20px}
.an-blok-glowa{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.an-blok-glowa h3{margin:0;font-size:16px;font-weight:600;color:#1e293b}
.an-liczba{font-size:22px;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums;white-space:nowrap}
.an-liczba.jest-uwaga{color:#b45309}
.an-blok>.muted{margin:0 0 12px;font-size:12.5px;line-height:1.5}
.an-tabela{width:100%}
.an-tabela .an-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.an-pasek{display:inline-block;width:52px;height:6px;border-radius:999px;background:#eef2f7;
  overflow:hidden;vertical-align:middle;margin-right:8px}
.an-pasek i{display:block;height:100%;background:#be185d}
.an-brak{color:#cbd5e1;font-size:12px}
.an-rada{margin:14px 0 0;padding:11px 14px;border-radius:10px;background:#fdf2f8;
  border:1px solid #fbcfe8;font-size:13px;line-height:1.5;color:#831843}
.an-rada strong{color:#9d174d}

/* Kalendarz telefonów w „Jak zarabiać więcej" — trzy grupy pilności, nie jedna długa lista. */
.an-powroty-grupa{margin:12px 0 0;border:1px solid #eef2f7;border-radius:10px;overflow:hidden}
.an-powroty-glowa{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f8fafc;
  border-bottom:1px solid #eef2f7;font-size:13px}
.an-powroty-glowa .muted{flex:1;font-size:12px}
.an-powroty-ile{flex:none;min-width:24px;height:22px;padding:0 8px;border-radius:999px;background:#e2e8f0;
  color:#475569;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.an-powroty-grupa.jest-pilne .an-powroty-glowa{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.an-powroty-grupa.jest-pilne .an-powroty-ile{background:#fecaca;color:#991b1b}
.an-powroty-grupa.jest-teraz .an-powroty-glowa{background:#fffbeb;border-color:#fde68a;color:#92400e}
.an-powroty-grupa.jest-teraz .an-powroty-ile{background:#fde68a;color:#92400e}
.an-powroty-grupa table{margin:0}
.an-gasnie{display:inline-block;padding:1px 7px;border-radius:999px;background:#fef2f2;color:#b91c1c;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;vertical-align:middle}
.an-trwa td{color:#94a3b8}

/* === UWAGI O PACJENCIE ========================================================================
   Właściciel: „powinienem mieć możliwość dopisywania uwag (…) wszędzie w analizie". Program widzi
   daty i kwoty; tego, że ktoś wyjechał albo przyprowadza znajomych, nie widzi nikt poza lekarzem. */
.cem-notatka-btn{border:0;background:none;padding:0 3px;font-size:13px;line-height:1;cursor:pointer;
  opacity:.35;transition:opacity .12s ease;vertical-align:middle}
.cem-notatka-btn:hover{opacity:1}
.cem-notatka-btn.ma-tresc{opacity:1}
.cem-notatka-tresc{margin:4px 0 0;padding:5px 9px;border-left:3px solid #c4b5fd;background:#f5f3ff;
  border-radius:0 7px 7px 0;font-size:12px;line-height:1.45;color:#4c1d95;white-space:pre-wrap}

/* === KONSYLIUM ================================================================================
   Pięciu specjalistów, każdy z jedną diagnozą i konkretnymi krokami. „Jedna rzecz na jutro" stoi
   na górze, bo konsylium kończące się dwudziestoma zadaniami kończy się zerem zrobionych. */
.an-konsylium{display:flex;flex-direction:column;gap:12px}
.an-konsylium-wstep{margin:0;font-size:12.5px}
.an-jedna{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
  background:linear-gradient(180deg,#f0fdfa,#fff);border:1px solid #99f6e4}
.an-jedna-znak{flex:none;width:30px;height:30px;border-radius:9px;background:#0f766e;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.an-jedna h3{margin:0 0 6px;font-size:15px;color:#0f766e}
.an-jedna p{margin:0 0 6px;font-size:14px;line-height:1.5;color:#134e4a}
.an-glos{padding:16px 18px}
.an-glos-glowa{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.an-glos-glowa h3{margin:0;font-size:15px;font-weight:600;color:#1e293b}
.an-glos-diagnoza{margin:8px 0 10px;padding:8px 12px;background:#f8fafc;border-radius:9px;
  font-size:13px;line-height:1.5;color:#334155;font-weight:500}
.an-glos-kroki{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.an-glos-kroki li{font-size:13px;line-height:1.55;color:#475569}
.an-glos-kroki li::marker{color:#0f766e}
.an-zrodlo-tel{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;
  background:#fdf2f8;color:#9d174d;font-size:10px;font-weight:600;vertical-align:middle}

/* Rozwój biznesu: konsylium na górze, kalkulatory pod kafelkami. */
.gr-skrot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px}
.gr-skrot p{margin:0;flex:1;min-width:240px;font-size:13px;line-height:1.5}
.gr-konsylium-glowa{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:10px}
.gr-konsylium-glowa h3{margin:0;font-size:16px}

/* === CELE I PROGNOZA ==========================================================================
   Właściciel 2026-08-16: „zrób ładniejsze pola do wpisywania". Cel wpisywało się do gołego pola
   szerokości 110 px wciśniętego w środek zdania — czytało się to jak błędny formularz, nie jak cel.
   Teraz każdy cel to karta: pasek, kwota, pole z widocznym „zł" i zdanie o tym, ile brakuje. */
.gr-cele{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.gr-cel{background:#fff;border:1px solid #e6ecf4;border-radius:12px;padding:16px 18px;
  display:flex;flex-direction:column;gap:8px}
.gr-cel-glowa{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gr-cel-nazwa{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}
.gr-cel-proc{font-size:13px;font-weight:700;color:#b45309;font-variant-numeric:tabular-nums}
.gr-cel-proc.jest-dobrze{color:#047857}
.gr-cel-kwota{font-size:24px;font-weight:700;color:#0f172a;line-height:1.1;font-variant-numeric:tabular-nums}
.gr-cel-pasek{height:8px;border-radius:999px;background:#eef2f7;overflow:hidden}
.gr-cel-pasek i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#38bdf8)}
.gr-cel-pole{display:flex;align-items:center;gap:8px;margin-top:2px;
  border:1px solid #dbe3ee;border-radius:10px;padding:6px 10px;background:#f8fafc;
  transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}
.gr-cel-pole:focus-within{background:#fff;border-color:#93b4f5;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.gr-cel-pole>span{flex:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8}
.gr-cel-pole input{flex:1;min-width:0;border:0;background:none;padding:0;font:inherit;font-size:16px;
  font-weight:600;color:#0f172a;text-align:right;font-variant-numeric:tabular-nums;outline:none}
.gr-cel-pole input::-webkit-outer-spin-button,.gr-cel-pole input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.gr-cel-pole input[type=number]{-moz-appearance:textfield}
.gr-cel-pole em{flex:none;font-style:normal;font-size:13px;font-weight:600;color:#64748b}
.gr-cel-nota{margin:0;font-size:12.5px;line-height:1.45;color:#64748b}
.gr-cel-nota.jest-dobrze{color:#047857}
.gr-cel-nota.jest-uwaga{color:#b45309}
.gr-cel-prognoza{background:linear-gradient(180deg,#f8fafc,#fff);border-color:#dbe3ee}
.gr-cel-prognoza .gr-cel-kwota{color:#1d4ed8}

/* Cenniki do porównania z rynkiem — formularz wgrywania w Rozwoju biznesu. */
.gr-cenniki{display:flex;flex-direction:column;gap:14px}
.gr-cennik-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
  align-items:end;padding:14px;background:#f8fafc;border:1px solid #eef2f7;border-radius:10px}
.gr-cennik-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#475569}
.gr-cennik-form label .muted{font-size:11px}
.gr-cennik-form input,.gr-cennik-form select{font:inherit;font-size:13.5px;padding:7px 9px;
  border:1px solid #dbe3ee;border-radius:8px;background:#fff;color:#1e293b}
.gr-cennik-form input[type=file]{padding:5px;border-style:dashed}
.gr-cennik-form button{align-self:end}
.gr-cennik-nota{font-size:12px}

/* === CENNIK ALAB: WYSZUKIWARKA DLA RECEPCJI ===================================================
   Właściciel 2026-08-16: „to ma być super wyszukiwarka". Pole jest największym elementem strony,
   bo to jedyne, po co się tu wchodzi — pacjent czeka przy telefonie. */
.al-strona{display:flex;flex-direction:column;gap:14px}
/* POLE SZUKANIA JEST NAJWIEKSZE NA STRONIE (wlasciciel 2026-08-16: „pole wpisywania badań zrób
   bardziej wyraźne!!"). To jedyne, po co się w tę zakładkę wchodzi — pacjent czeka przy telefonie,
   więc pole ma być widoczne z drugiego końca biurka, a nie szukane wzrokiem. */
.al-szukaj{display:flex;align-items:center;gap:14px;border:3px solid #2563eb;border-radius:16px;
  padding:16px 20px;background:#fff;box-shadow:0 2px 14px -6px rgba(37,99,235,.45);
  transition:border-color .12s ease,box-shadow .12s ease}
.al-szukaj:focus-within{border-color:#1d4ed8;box-shadow:0 0 0 5px rgba(37,99,235,.18)}
.al-lupa{flex:none;font-size:26px;opacity:.8}
.al-szukaj input{flex:1;min-width:0;border:0;background:none;padding:0;font:inherit;font-size:26px;
  font-weight:600;color:#0f172a;outline:none;line-height:1.25}
.al-szukaj input::placeholder{font-weight:400;color:#94a3b8;font-size:20px}
.al-szukaj-etykieta{display:block;margin:0 0 8px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:#2563eb}
/* Wyszukiwarka skierowań zostaje mała — to pomocnicze pole, nie główne. */
.al-szukaj.al-szukaj-mala{border-width:1px;border-color:#dbe3ee;border-radius:10px;padding:8px 12px;
  box-shadow:none}
.al-szukaj.al-szukaj-mala .al-lupa{font-size:16px}
.al-szukaj.al-szukaj-mala input{font-size:15px;font-weight:400}
.al-szukaj.al-szukaj-mala input::placeholder{font-size:14px}
.al-szukaj input::-webkit-search-cancel-button{display:none}
.al-czysc{flex:none;border:0;background:#eef2f7;color:#64748b;border-radius:999px;width:34px;height:34px;
  font-size:22px;line-height:1;cursor:pointer}
.al-czysc:hover{background:#e2e8f0;color:#334155}
.al-stan{margin:18px 2px 0;font-size:12px;line-height:1.55}
.al-ile{margin:14px 0 6px;font-size:12.5px;color:#64748b;font-weight:600}
.al-podpowiedz{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:#64748b;
  background:#f8fafc;border:1px dashed #dbe3ee;border-radius:10px;padding:14px 16px}
.al-tabela{font-size:13.5px}
.al-tabela td,.al-tabela th{padding:7px 10px}
.al-kod{font-variant-numeric:tabular-nums;color:#94a3b8;font-size:12px;white-space:nowrap}
.al-nazwa{font-weight:500;color:#0f172a}
.al-cena{font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums;white-space:nowrap}
.al-koszt{color:#94a3b8;font-variant-numeric:tabular-nums}
.al-zarobek{color:#047857;font-weight:600;font-variant-numeric:tabular-nums}
.al-strata{color:#b91c1c;font-weight:600}
#cem-alab-wklejka{width:100%;font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.65;padding:14px 16px;border:2px dashed #cbd8e8;border-radius:12px;
  background:#fbfdff;color:#1e293b;resize:vertical;transition:border-color .12s ease,background-color .12s ease}
#cem-alab-wklejka::placeholder{color:#a8bacd}
#cem-alab-wklejka:hover{border-color:#93b4f5}
#cem-alab-wklejka:focus{outline:none;border-style:solid;border-color:#2563eb;background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.al-wynik{margin:0;font-size:13px;padding:11px 14px;border-radius:10px;background:#ecfdf5;
  border:1px solid #a7f3d0;color:#065f46}
.al-wynik.ma-uwagi{background:#fffbeb;border-color:#fde68a;color:#78350f}
.al-wynik b{color:inherit}
.al-odrzucone{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:#64748b;display:flex;
  flex-direction:column;gap:3px}
/* === WKLEJKA CENNIKA ==========================================================================
   Właściciel 2026-08-16: „zrób ładniejsze to pole i napisy". Instrukcja była akapitem, w którym
   cztery nazwy kolumn trzeba było przeczytać i policzyć — teraz są ponumerowanymi plakietkami,
   więc od razu widać, że zgadzają się z arkuszem. */
.al-import{display:flex;flex-direction:column;gap:12px;padding:20px 22px}
.al-import-glowa{display:flex;align-items:flex-start;gap:12px}
.al-import-ikona{flex:none;width:34px;height:34px;border-radius:10px;background:#2563eb;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.al-import-glowa h3{margin:0;font-size:16px;font-weight:700;color:#0f172a}
.al-import-glowa p{margin:2px 0 0;font-size:12.5px;color:#64748b}
.al-import-stan{margin-left:auto;flex:none;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:#64748b;background:#f1f5f9;border-radius:999px;padding:5px 11px}
.al-kolumny{display:flex;flex-wrap:wrap;gap:6px}
.al-kolumna{display:inline-flex;align-items:center;gap:7px;background:#f8fafc;border:1px solid #e2e8f0;
  border-radius:8px;padding:5px 11px 5px 6px;font-size:12.5px;color:#334155;font-weight:500}
.al-kolumna em{flex:none;width:18px;height:18px;border-radius:5px;background:#dbeafe;color:#1d4ed8;
  font-style:normal;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.al-import-dol{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.al-import-uwaga{margin-left:auto;font-size:11.5px;color:#b45309;background:#fffbeb;
  border:1px solid #fde68a;border-radius:7px;padding:4px 10px}
.al-import.jest-pusty{border:2px solid #93b4f5;background:linear-gradient(180deg,#f5f9ff,#fff)}
.al-import.jest-pusty .al-import-glowa h3{color:#1d4ed8}

/* Rabat: jeden wybrany próg przelicza całą tabelę i skierowanie. Dziesięć kolumn obok siebie
   nie zmieściłoby się na ekranie recepcji, a przy pacjencie liczy się jedna liczba. */
.al-rabat{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px;
  padding:10px 12px;background:#f8fafc;border:1px solid #eef2f7;border-radius:10px}
.al-rabat-etykieta{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
.al-progi{display:flex;flex-wrap:wrap;gap:5px}
.al-prog{border:1px solid #dbe3ee;background:#fff;color:#475569;border-radius:999px;padding:5px 12px;
  font:inherit;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums}
.al-prog:hover{background:#eff6ff;border-color:#93b4f5;color:#1d4ed8}
.al-prog.jest-wybrany{background:#2563eb;border-color:#2563eb;color:#fff;font-weight:700}
.al-inny{display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b}
.al-inny input{width:64px;font:inherit;font-size:13px;padding:5px 8px;border:1px solid #dbe3ee;
  border-radius:8px;text-align:right;font-variant-numeric:tabular-nums}

/* Skierowanie: lista badań zbierana przy telefonie. */
.al-plus{width:34px;padding-right:0!important}
.al-dodaj{width:26px;height:26px;border:1px solid #dbe3ee;background:#fff;color:#64748b;
  border-radius:8px;font-size:15px;line-height:1;cursor:pointer;font-weight:700}
.al-dodaj:hover{background:#eff6ff;border-color:#93b4f5;color:#1d4ed8}
tr.al-wybrany{background:#f0f9ff}
tr.al-wybrany .al-dodaj{background:#2563eb;border-color:#2563eb;color:#fff}
.al-poRabacie{font-weight:700;color:#1d4ed8;font-variant-numeric:tabular-nums;white-space:nowrap}
.al-koszyk{display:flex;flex-direction:column;gap:12px;border:2px solid #93b4f5}
.al-koszyk-glowa{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.al-koszyk-glowa h3{margin:0;font-size:16px}
.al-koszyk-sumy{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.al-suma{display:flex;flex-direction:column;gap:1px;padding:10px 12px;background:#f8fafc;
  border:1px solid #eef2f7;border-radius:9px}
.al-suma span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
.al-suma b{font-size:19px;font-variant-numeric:tabular-nums;color:#0f172a}
.al-suma.jest-glowna{background:#eff6ff;border-color:#bfdbfe}
.al-suma.jest-glowna b{color:#1d4ed8}
.al-koszyk-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.al-koszyk-lista li{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:7px;font-size:13px}
.al-koszyk-lista li:hover{background:#f8fafc}
.al-koszyk-lista li span{flex:1;min-width:0}
.al-koszyk-lista li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.al-zdejmij{flex:none;width:22px;height:22px;border:0;background:#f1f5f9;color:#94a3b8;
  border-radius:6px;font-size:14px;line-height:1;cursor:pointer}
.al-zdejmij:hover{background:#fee2e2;color:#b91c1c}
.al-pracownicze{display:flex;gap:6px;flex-wrap:wrap}
.al-uwaga-tryb{flex-basis:100%;margin:2px 0 0;font-size:12px;color:#64748b}
.al-odwrocone{display:inline-block;margin-left:5px;width:16px;height:16px;line-height:16px;
  text-align:center;border-radius:50%;background:#fef2f2;color:#b91c1c;font-size:11px;font-weight:700;cursor:help}
/* CAŁA SZEROKOŚĆ WIERSZA (właściciel 2026-08-16: „rozszerz te pola, bo jest miejsce").
   Cztery pola w jednym rzędzie, w proporcjach do tego, co się w nich pisze: nazwisko i adres
   są długie, PESEL ma zawsze 11 znaków, a telefon dziewięć. Wcześniej wszystkie były równe
   i nazwisko urywało się w połowie, choć obok stało puste miejsce. */
.al-pacjent{display:grid;grid-template-columns:2.2fr 1fr 1.1fr 2.4fr;gap:12px}
.al-pacjent label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:#64748b;min-width:0}
.al-pacjent input{width:100%;box-sizing:border-box;font:inherit;font-size:15px;font-weight:500;
  text-transform:none;letter-spacing:0;padding:9px 12px;border:1px solid #dbe3ee;border-radius:8px;
  color:#1e293b;background:#fff}
.al-pacjent input:focus{outline:none;border-color:#93b4f5;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
@media (max-width:1000px){
  .al-pacjent{grid-template-columns:1fr 1fr}
  .al-pacjent-adres{grid-column:1/-1}
}
@media (max-width:560px){
  .al-pacjent{grid-template-columns:1fr}
}
.al-historia-zwinieta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.al-historia-zwinieta .muted{font-size:12.5px}
.al-historia{display:flex;flex-direction:column;gap:12px}
.al-szukaj-mala input{font-size:15px}
.al-akcje{white-space:nowrap;display:flex;gap:5px}
.al-suma b small{display:block;font-size:11px;font-weight:600;color:#64748b;margin-top:1px}

/* === CENNIK PRACOWNICZY: TŁO ZAMIAST SAMEJ ETYKIETY ===========================================
   Właściciel 2026-08-16: „zaznacz na delikatnie zielonym tle po kosztach — pracownik i rodzina
   tak samo, delikatnie inne tło". Ceny pracownicze wyglądały jak zwykłe i przy telefonie łatwo
   było podać je pacjentowi. Dwa odcienie, bo to dwa różne cenniki. */
.al-strona.jest-pracownik .al-szukaj-panel,
.al-strona.jest-pracownik .al-koszyk{background:#f0fdf4;border-color:#86efac}
.al-strona.jest-pracownik .al-szukaj{border-color:#16a34a;box-shadow:0 2px 14px -6px rgba(22,163,74,.45)}
.al-strona.jest-pracownik .al-szukaj-etykieta{color:#15803d}
.al-strona.jest-pracownik .al-suma{background:#dcfce7;border-color:#bbf7d0}
.al-strona.jest-pracownik .al-poRabacie{color:#15803d}
.al-strona.jest-pracownik tr.al-wybrany{background:#dcfce7}


/* Wybrany przycisk trybu w tym samym kolorze co tło, żeby było widać, skąd ten odcień. */
.al-prog-pracownik.jest-wybrany{background:#16a34a;border-color:#16a34a}
.al-prog-pracownik:hover{background:#f0fdf4;border-color:#86efac;color:#15803d}
.al-strona.jest-pracownik .al-uwaga-tryb{color:#15803d}
/* Paski ostrzegawcze stoją na samym dole strony i są tam JEDYNĄ rzeczą — wyśrodkowane
   (właściciel 2026-08-16: „wyśrodkuj na dole"). Dosunięte do lewej wyglądały jak początek
   kolejnej sekcji, której nie ma. */
.al-stratne-pasek{margin:10px 0 0;text-align:center}
.al-stratne-pasek button{border:1px solid #fecaca;background:#fef2f2;color:#991b1b;border-radius:9px;
  padding:8px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.al-stratne-pasek button:hover{background:#fee2e2;border-color:#fca5a5}
.al-stratne-pasek button.jest-wlaczony{background:#991b1b;border-color:#991b1b;color:#fff}
.al-koszyk.ma-strate{border-color:#dc2626}
.al-alarm{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;
  background:#fef2f2;border:2px solid #dc2626;color:#7f1d1d}
.al-alarm-znak{flex:none;width:26px;height:26px;border-radius:50%;background:#dc2626;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.al-alarm b{color:#991b1b}
.al-alarm ul{margin:6px 0 0;padding-left:18px;font-size:12.5px;display:flex;flex-direction:column;gap:3px}
.al-usun-stratne{border:1px solid #dc2626;background:#dc2626;color:#fff;border-radius:9px;
  padding:8px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-left:6px}
.al-usun-stratne:hover{background:#991b1b;border-color:#991b1b}
.al-wiersz-strata{background:#fef2f2}
.al-wiersz-strata .al-nazwa,.al-wiersz-strata .al-kod{color:#991b1b}
.al-wiersz-strata.al-wybrany{background:#fee2e2}
.al-pacjent-blok{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:10px;
  background:#f8fafc;border:1px solid #eef2f7}
.al-pacjent-tytul{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#475569}
.al-pacjent-tytul small{font-weight:400;text-transform:none;letter-spacing:0;color:#94a3b8;font-size:11px}
.al-poz-rabat{flex:none;display:flex;align-items:center;gap:2px;font-size:12px;color:#94a3b8}
.al-poz-rabat input{width:46px;font:inherit;font-size:12.5px;padding:3px 6px;border:1px solid #dbe3ee;
  border-radius:6px;text-align:right;font-variant-numeric:tabular-nums;background:#fff}
.al-poz-rabat.jest-wlasny input{border-color:#2563eb;color:#1d4ed8;font-weight:700}
.al-poz-rabat.jest-wlasny{color:#1d4ed8}
.al-poz-zarobek{flex:none;min-width:78px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums}
/* Koszt badania przy pozycji skierowania — szary, bo to liczba do orientacji, a nie kwota,
   którą płaci pacjent. Ta sama szerokość co „Zarabiamy", żeby kolumny stały równo. */
.al-poz-koszt{flex:none;min-width:78px;text-align:right;font-size:12px;color:#64748b;
  font-variant-numeric:tabular-nums}
.al-poz-koszt.al-nieznany{color:#b91c1c}

/* Pole obowiązkowe, którego nikt jeszcze nie wypełnił — czerwona ramka od razu, a nie dopiero
   po kliknięciu „Zapisz". */
.al-pacjent label.al-brak input{border-color:#f87171;background:#fff5f5}
.al-pacjent label.al-brak{color:#b91c1c}
.al-koszyk-lista li.al-poz-strata{background:#fef2f2}
.al-koszyk-lista li.al-poz-strata span{color:#991b1b}
.al-brak-kosztu{color:#a16207;font-size:12px;cursor:help;border-bottom:1px dotted #a16207}
.al-nieznany{color:#a16207}
.al-alarm.al-alarm-info{background:#fffbeb;border-color:#f59e0b;color:#78350f}
.al-alarm.al-alarm-info .al-alarm-znak{background:#f59e0b}
.al-alarm.al-alarm-info b{color:#92400e}
.al-wiersz-brak{background:#fef2f2}
.al-wiersz-brak .al-nazwa{color:#991b1b}
.al-dodaj.al-zablokowany{background:#dc2626;border-color:#dc2626;color:#fff;cursor:pointer}
.al-dodaj.al-zablokowany:hover{background:#991b1b;border-color:#991b1b;color:#fff}
/* BRAK CENY DLA GABINETU MA BYC WIDAC Z DRUGIEGO KONCA POKOJU (wlasciciel 25.08.2026: "zaznacz
   ich pole na czerwono"). Wczesniej pole bylo bialy prostokat z czerwona ramka -- przy 103 takich
   badaniach w cenniku ginelo w tabeli. Teraz to CZERWONE POLE z bialym napisem. */
button.al-brak-kosztu{border:1px solid #b91c1c;background:#dc2626;color:#fff;border-radius:7px;
  padding:3px 9px;font:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;cursor:pointer}
button.al-brak-kosztu:hover{background:#991b1b;border-color:#7f1d1d}
/* Cala komorka kosztu, nie sam przycisk -- zeby oko trafialo w kolumne, a nie w guzik.
   Klasa, nie `:has()`, zeby dzialalo takze w starszej przegladarce. */
td.al-koszt-brak{background:#fee2e2}
.al-brak-pasek button{border-color:#dc2626;background:#dc2626;color:#fff}
.al-brak-pasek button:hover{background:#991b1b;border-color:#991b1b}
.al-brak-pasek button.jest-wlaczony{background:#7f1d1d;border-color:#7f1d1d}

/* === WKLEJKA CENNIKA ==========================================================================
   Właściciel 2026-08-16: „zrób ładniejsze to pole i napisy". Instrukcja była akapitem, w którym
   cztery nazwy kolumn trzeba było przeczytać i policzyć — teraz są ponumerowanymi plakietkami. */
.al-import{gap:12px;padding:20px 22px}
.al-import-glowa{display:flex;align-items:flex-start;gap:12px}
.al-import-ikona{flex:none;width:34px;height:34px;border-radius:10px;background:#2563eb;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.al-import-glowa h3{margin:0;font-size:16px;font-weight:700;color:#0f172a}
.al-import-glowa p{margin:2px 0 0;font-size:12.5px;color:#64748b}
.al-import-stan{margin-left:auto;flex:none;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:#64748b;background:#f1f5f9;border-radius:999px;padding:5px 11px}
.al-kolumny{display:flex;flex-wrap:wrap;gap:6px}
.al-kolumna{display:inline-flex;align-items:center;gap:7px;background:#f8fafc;border:1px solid #e2e8f0;
  border-radius:8px;padding:5px 11px 5px 6px;font-size:12.5px;color:#334155;font-weight:500}
.al-kolumna em{flex:none;width:18px;height:18px;border-radius:5px;background:#dbeafe;color:#1d4ed8;
  font-style:normal;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.al-import-dol{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.al-import-uwaga{margin-left:auto;font-size:11.5px;color:#b45309;background:#fffbeb;
  border:1px solid #fde68a;border-radius:7px;padding:4px 10px}
.al-import.jest-pusty .al-import-glowa h3{color:#1d4ed8}
#cem-alab-wklejka{border:2px dashed #cbd8e8;border-radius:12px;background:#fbfdff;
  padding:14px 16px;line-height:1.65;transition:border-color .12s ease,background-color .12s ease}
#cem-alab-wklejka::placeholder{color:#a8bacd}
#cem-alab-wklejka:hover{border-color:#93b4f5}
#cem-alab-wklejka:focus{border-style:solid;border-color:#2563eb;background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.al-wynik{margin:0;padding:11px 14px;border-radius:10px;background:#ecfdf5;border:1px solid #a7f3d0;
  color:#065f46}
.al-wynik.ma-uwagi{background:#fffbeb;border-color:#fde68a;color:#78350f}

/* Przycisk ceny pracowniczej jest zielony ZAWSZE, nie dopiero po wybraniu — ma się odróżniać
   od progów rabatu, zanim ktokolwiek go kliknie. */
.al-prog-pracownik{border-color:#86efac;background:#f0fdf4;color:#15803d;font-weight:600}
.al-prog-pracownik:hover{background:#dcfce7;border-color:#4ade80;color:#166534}
.al-prog-pracownik.jest-wybrany{background:#16a34a;border-color:#16a34a;color:#fff}
.al-porzadki{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.al-porzadki .al-stratne-pasek{margin:0}


/* === CENNIK ALAB — DOPISKI 2026-08-16 ==========================================================
   Cztery rzeczy zgłoszone jednego dnia: ceny do poprawienia (tylko właściciel), blokada
   podwójnego dodania badania, nagłówki nad liczbami na skierowaniu i ładniejszy pasek akcji. */

/* Ołówek przy wierszu — tylko właściciel. Ma być widoczny dopiero, gdy się na wiersz patrzy:
   przy 2 326 pozycjach kolumna ołówków świeciłaby mocniej niż same ceny. */
/* Kolumna z akcjami wlasciciela: olowek (popraw ceny) i kosz (usun z cennika). Szersza niz
   dawniej, bo od 18.08.2026 stoja w niej DWA przyciski. */
.al-olowek{width:62px;text-align:center;white-space:nowrap}
/* Kosz jest wyszarzony jak olowek i dopiero pod kursorem robi sie CZERWONY -- kasowanie ma
   wygladac inaczej niz poprawianie, ale nie krzyczec z kazdego z 2327 wierszy. */
.al-usun-badanie{border:1px solid transparent;background:none;color:#94a3b8;border-radius:7px;
  padding:2px 6px;font-size:13px;line-height:1.4;cursor:pointer}
tr:hover .al-usun-badanie{border-color:#f1d4d4;color:#9b6b6b;background:#fdf7f7}
.al-usun-badanie:hover{border-color:#dc2626;color:#b91c1c;background:#fef2f2}
.al-usun-badanie:disabled{opacity:.5;cursor:default}
.al-edytuj{border:1px solid transparent;background:none;color:#94a3b8;border-radius:7px;
  padding:2px 7px;font-size:14px;line-height:1.4;cursor:pointer}
tr:hover .al-edytuj{border-color:#dbe3ee;color:#475569;background:#f8fafc}
.al-edytuj:hover{border-color:#2563eb;color:#1d4ed8;background:#eff6ff}
.al-edycja-wiersz td{background:#eff6ff;border-bottom:2px solid #bfdbfe}
.al-edycja{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:4px 2px}
.al-edycja-co{flex-basis:100%;font-size:12px;font-weight:700;color:#1d4ed8}
.al-edycja label{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:#475569}
.al-edycja input{width:120px;font:inherit;font-size:15px;font-weight:600;text-transform:none;
  letter-spacing:0;padding:8px 10px;border:1px solid #93b4f5;border-radius:8px;background:#fff;
  text-align:right;font-variant-numeric:tabular-nums}
.al-edycja small{flex-basis:100%;font-size:11px;color:#64748b}
.al-edycja .cem-form-error{flex-basis:100%;font-size:12px}

/* Badanie już dołożone: ptaszek zostaje zielony i NIE zdejmuje pozycji. */
.al-dodaj.jest-juz{background:#16a34a;border-color:#16a34a;color:#fff;cursor:default}
tr.al-wybrany .al-dodaj.jest-juz{background:#16a34a;border-color:#16a34a}
.al-juz-jest{margin:14px 0 0;padding:9px 13px;border-radius:9px;background:#ecfdf5;
  border:1px solid #a7f3d0;color:#065f46;font-size:12.5px;font-weight:600}

/* Nagłówki nad kolumnami skierowania — te same szerokości co w wierszach poniżej. */
.al-koszyk-naglowki{display:flex;align-items:center;gap:9px;padding:0 8px 4px;
  border-bottom:1px solid #e6edf6;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#64748b}
.al-koszyk-naglowki .al-nag-nazwa{flex:1;min-width:0;padding-left:31px}
.al-koszyk-naglowki .al-nag-rabat{flex:none;width:64px;text-align:center}
.al-koszyk-naglowki .al-nag-koszt{flex:none;min-width:78px;text-align:right}
.al-koszyk-naglowki .al-nag-zarobek{flex:none;min-width:78px;text-align:right}
.al-koszyk-naglowki .al-nag-cena{flex:none;min-width:82px;text-align:right}
.al-koszyk-lista li b{min-width:82px;text-align:right}

/* Większe pole procentu (właściciel: „zrób większe pole do wpisywania %") — wpisuje się w nie
   dwucyfrową liczbę w biegu, przy pacjencie, więc 46 px było celowaniem myszą. */
.al-poz-rabat{width:64px;justify-content:flex-end}
.al-poz-rabat input{width:46px;font-size:14px;font-weight:600;padding:6px 7px}

/* Pasek akcji skierowania: każdy kafelek mówi w drugiej linii, dla kogo jest ta kartka. */
.al-akcje-skier{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.al-akcja{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  padding:12px 14px;border:1px solid #dbe3ee;border-radius:11px;background:#fff;font:inherit;
  cursor:pointer;transition:border-color .12s,box-shadow .12s,background .12s}
.al-akcja b{font-size:13.5px;color:#0f172a}
.al-akcja small{font-size:11px;color:#64748b;line-height:1.4}
.al-akcja:hover{border-color:#93b4f5;background:#f8fbff;box-shadow:0 4px 14px -8px rgba(37,99,235,.5)}
.al-akcja.jest-glowna{background:#2563eb;border-color:#2563eb}
.al-akcja.jest-glowna b{color:#fff}
.al-akcja.jest-glowna small{color:#dbeafe}
.al-akcja.jest-glowna:hover{background:#1d4ed8;border-color:#1d4ed8}
.al-akcja.jest-czysc{background:#fcfdfe;border-style:dashed}
.al-akcja.jest-czysc:hover{border-color:#dc2626;background:#fef2f2}
.al-akcja.jest-czysc:hover b{color:#991b1b}
.al-status{font-size:12px;color:#64748b}

/* Płeć na wydruku — dwa gotowe zdania zamiast pola do wpisania. */

/* Pobranie krwi dokłada się samo do każdego skierowania — pozycja mówi to wprost, żeby nikt
   nie szukał, kto ją dodał. Zdjęta krzyżykiem nie wraca aż do wyczyszczenia listy. */
.al-samo{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  background:#eff6ff;color:#1d4ed8;font-size:10px;font-weight:700;font-style:normal;
  text-transform:uppercase;letter-spacing:.05em;vertical-align:1px}

/* === ALAB czy BIOVIS ==========================================================================
   Kolumny Biovisu w cenniku ALAB i panel z całą listą par. Kolumny mają własne, chłodniejsze tło,
   bo to dane z DRUGIEGO laboratorium — bez tego czyta się je jako kolejne ceny ALAB-u. */
.al-tabela th.al-bv-glowa{background:#eef2ff;color:#3730a3}
.al-tabela td.al-bv{background:#f8f9ff}
.al-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.03em;white-space:nowrap}
.al-chip-rowno{background:#f1f5f9;color:#64748b}
.al-porownanie{display:flex;flex-direction:column;gap:12px}




/* Kafelek porównania: jedno badanie, trzy pary liczb. Szerokość dobrana tak, żeby na typowym
   ekranie stały trzy w rzędzie — kafelek węższy niż ~260 px łamie nazwy badań na cztery linie. */
.al-karty{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.al-karta{border:1px solid #e6edf6;border-radius:12px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column}
.al-karta header{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;
  padding:10px 12px 8px;border-bottom:1px solid #f1f5f9}
.al-karta header b{font-size:13px;line-height:1.3;min-width:0}
.al-karta table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.al-karta thead th{padding:5px 12px 3px;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#94a3b8;text-align:right}
.al-karta thead th:first-child{text-align:left}
.al-karta tbody th{padding:5px 12px;font-size:11.5px;font-weight:600;color:#64748b;
  text-align:left;white-space:nowrap}
.al-karta tbody td{padding:5px 12px;text-align:right;font-size:13.5px;color:#334155}
/* TRZY RODZAJE LICZB, TRZY KOLORY. Kolor mówi, NA CO patrzysz: pomarańczowy — pieniądze, które
   wychodzą; niebieski — co płaci pacjent; zielony — co zostaje. Blada wersja to zwykła kwota,
   wypełniona — lepsza strona w tej parze. Ten sam kolor w obu rolach, bo osobny kolor „lepsze"
   zderzałby się ze znaczeniem wiersza. */
.al-karta tr.al-r-koszt th{color:#b45309}
.al-karta tr.al-r-koszt td{color:#92400e;background:#fffbeb}
.al-karta tr.al-r-koszt td.al-lepsza{background:#fde68a;color:#78350f;font-weight:700}
.al-karta tr.al-r-pacjent th{color:#1d4ed8}
.al-karta tr.al-r-pacjent td{color:#1e40af;background:#eff6ff}
.al-karta tr.al-r-pacjent td.al-lepsza{background:#bfdbfe;color:#1e3a8a;font-weight:700}
.al-karta tr.al-r-zarobek th{color:#15803d}
.al-karta tr.al-r-zarobek td{color:#166534;background:#f0fdf4;font-weight:600}
.al-karta tr.al-r-zarobek td.al-lepsza{background:#bbf7d0;color:#14532d;font-weight:700}
.al-karta tr.al-r-zarobek th,.al-karta tr.al-r-zarobek td{border-top:1px solid #f1f5f9}

/* Klucz kolorów w zdaniu nad kafelkami — trzy próbki w tych samych barwach co wiersze. */
.al-klucz{display:inline-flex;gap:5px;flex-wrap:wrap;vertical-align:middle}
.al-klucz span{padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700}
.al-klucz-koszt{background:#fde68a;color:#78350f}
.al-klucz-pacjent{background:#bfdbfe;color:#1e3a8a}
.al-klucz-zarobek{background:#bbf7d0;color:#14532d}

/* Badanie, którego nie zlecamy w Biovisie — zostaje na liście wyników (żeby dało się je ZNALEŹĆ),
   ale nie jest przyciskiem. Kolor stonowany, nie czerwony: to nie błąd recepcji, tylko decyzja. */
.bv-wynik-blokada{opacity:.62;cursor:not-allowed;background:#f8fafc}
.bv-wynik-blokada .bv-znacznik{color:#94a3b8}
.bv-do-alab{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
  background:#dcfce7;color:#166534;font-size:10.5px;font-weight:700;font-style:normal;
  letter-spacing:.03em;white-space:nowrap}

/* Odpowiednik w cenniku ALAB — na karcie badania w katalogu Biovis. */
.bv-alab-blok{margin-top:14px;padding:12px 14px;border:1px solid #e6edf6;border-radius:10px;
  background:#f8fafc;display:flex;flex-direction:column;gap:9px}
.bv-alab-tytul{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#64748b}
.bv-alab-pary,.bv-alab-kandydaci{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.bv-alab-pary li,.bv-alab-kandydaci li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:7px 10px;border-radius:8px;background:#fff;border:1px solid #e6edf6;font-size:13px}
.bv-alab-pary li{border-color:#bbf7d0;background:#f0fdf4}
.bv-alab-ceny{margin-left:auto;font-size:12px;color:#64748b;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.bv-alab-szukaj{display:flex;gap:8px;align-items:center}
.bv-alab-szukaj input{flex:1;min-width:0;font:inherit;font-size:14px;padding:8px 11px;
  border:1px solid #dbe3ee;border-radius:8px}

/* „Opłacone" przy skierowaniu — decyduje o kratce na wydruku, więc stoi obok wyboru formy zdania. */
.al-oplacone{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:9px;
  border:1px solid #e6edf6;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}
.al-oplacone input{width:17px;height:17px;cursor:pointer}
.al-oplacone em{font-style:normal;font-weight:400;font-size:11.5px;color:#64748b;margin-left:auto}
.al-oplacone.jest-oplacone{border-color:#86efac;background:#f0fdf4;color:#166534}
.al-oplacone.jest-oplacone em{color:#15803d}

/* Wybór postaci zniżki na wydruku — przy przyciskach drukowania, bo dotyczy tylko papieru. */
.al-znizka-wydruk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.al-znizka-wydruk>span{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#64748b}

/* Tryb poprawiania wystawionego skierowania — panel mówi to nagłówkiem i daje wyjście. */
.al-koszyk-glowa .cem-btn{flex:none}

/* === ZESPOŁ AI: Asystent, Manager kliniki, Księgowa, Doradca podatkowy =======================
   Właściciel 2026-08-18: „nie podoba mi się graficznie ta zakładka, zrób bardziej przyjazną".
   Zamiast paska szarych przycisków — cztery karty z twarzą i jednym zdaniem o tym, czym się
   zajmuje. Ustawienia (Analytics, stałe zadania) chowają się za jednym przyciskiem, żeby na
   wierzchu została rozmowa i dzisiejsza relacja. */
.cem-zespol{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:14px}
.cem-osoba{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:11px 12px;border-radius:14px;
  border:1px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.cem-osoba:hover{border-color:#cbd5e1;box-shadow:0 2px 10px rgba(15,23,42,.07);transform:translateY(-1px)}
.cem-osoba.is-active{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.cem-osoba-awatar{width:38px;height:38px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:19px;background:#eef2ff}
.cem-osoba.is-active .cem-osoba-awatar{background:#dbeafe}
.cem-osoba-imie{font-weight:700;font-size:13.5px;color:#0f172a;line-height:1.25}
.cem-osoba-rola{display:block;margin-top:3px;font-size:11.5px;line-height:1.35;color:#64748b}

.cem-relacja{border:1px solid #e2e8f0;border-radius:16px;background:#fff;padding:16px 18px;margin-bottom:14px}
.cem-relacja-glowa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cem-relacja-glowa h2{margin:0;font-size:15px;color:#0f172a}
.cem-relacja-data{font-size:11.5px;color:#94a3b8}
.cem-relacja-glowa .cem-btn{margin-left:auto}
.cem-relacja p{margin:0 0 9px;font-size:13.5px;line-height:1.6;color:#334155}
.cem-relacja-blok{margin-top:12px;padding:12px 14px;border-radius:12px;background:#f8fafc;border:1px solid #eef2f7}
.cem-relacja-blok h3{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.cem-relacja-blok ul{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.55;color:#334155}
.cem-relacja-zadanie{margin-top:12px;padding:13px 15px;border-radius:12px;background:#eff6ff;border:1px solid #bfdbfe}
.cem-relacja-zadanie p{color:#1e3a8a}
.cem-relacja-czeka{display:flex;align-items:center;gap:9px;color:#64748b;font-size:13px}
.cem-relacja-kropka{width:8px;height:8px;border-radius:50%;background:#2563eb;animation:cemPuls 1s infinite ease-in-out}
@keyframes cemPuls{0%,100%{opacity:.25}50%{opacity:1}}

.cem-ustawienia-pracownika{border:1px dashed #e2e8f0;border-radius:14px;padding:10px 14px;margin-bottom:14px;background:#fcfdff}
.cem-ustawienia-pracownika>summary{cursor:pointer;font-size:12.5px;color:#475569;list-style:none}
.cem-ustawienia-pracownika>summary::-webkit-details-marker{display:none}
.cem-ustawienia-pracownika>summary::before{content:"⚙ ";opacity:.7}
.cem-ustawienia-sekcja{margin-top:12px;padding-top:12px;border-top:1px solid #eef2f7}
.cem-ustawienia-sekcja:first-of-type{border-top:none;padding-top:4px}
.cem-lista-stale{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.cem-lista-stale li{display:flex;align-items:center;gap:8px;font-size:13px;color:#334155;
  background:#f8fafc;border:1px solid #eef2f7;border-radius:10px;padding:7px 10px}
.cem-lista-stale li .cem-btn{margin-left:auto;padding:3px 9px;font-size:11px}

@media (max-width:640px){
  .cem-zespol{grid-template-columns:1fr 1fr;gap:8px}
  .cem-osoba{padding:9px;flex-direction:column;align-items:center;text-align:center}
  .cem-osoba-rola{display:none}
}

/* Rozmowa z pracownikiem AI: nagłówek z twarzą i stan pusty, który sam podpowiada pytania.
   Właściciel 2026-08-18: „popraw też tą część -- ma być przyjazna graficznie". */
.cem-rozmowa{border:1px solid #e2e8f0;border-radius:16px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;height:min(62vh,620px)}
.cem-rozmowa-glowa{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #eef2f7;background:#fbfdff}
.cem-rozmowa-kto{display:flex;flex-direction:column;min-width:0;flex:1}
.cem-rozmowa-kto strong{font-size:13.5px;color:#0f172a}
.cem-rozmowa-kto span{font-size:11.5px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cem-rozmowa .cem-chat-scroll{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}
.cem-rozmowa .cem-chat-form{display:flex;gap:8px;padding:11px 12px;border-top:1px solid #eef2f7;background:#fbfdff}
.cem-rozmowa .cem-chat-form textarea{flex:1;border:1px solid #e2e8f0;border-radius:12px;padding:9px 12px;
  font:inherit;font-size:13.5px;resize:none;background:#fff}
.cem-rozmowa .cem-chat-form textarea:focus{outline:none;border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.1)}

.cem-rozmowa-start{margin:auto;text-align:center;max-width:520px}
.cem-rozmowa-start p{margin:0 0 12px;font-size:14px;color:#475569}
.cem-podpowiedzi{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.cem-podpowiedz{border:1px solid #dbeafe;background:#eff6ff;color:#1d4ed8;border-radius:999px;
  padding:7px 14px;font-size:12.5px;cursor:pointer;transition:background .15s,border-color .15s}
.cem-podpowiedz:hover{background:#dbeafe;border-color:#bfdbfe}

/* Lista pacjentów doklejona do odpowiedzi — składa ją program, nie model. */
.cem-zalacznik{margin-top:10px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:10px 12px}
.cem-zalacznik-glowa{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.cem-zalacznik-glowa strong{font-size:12.5px;color:#0f172a}
.cem-zalacznik-glowa span{margin-left:auto}
.cem-zalacznik table{font-size:12.5px}
.cem-chat-bubble.assistant .cem-zalacznik{background:#fff}

/* Wywiad: pracownik pyta o firmę (server/wywiad.js). Panel znika, gdy pytań już nie ma. */
.cem-wywiad{border:1px solid #dbeafe;background:#f8fbff;border-radius:16px;padding:14px 16px;margin-bottom:14px}
.cem-wywiad-glowa{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.cem-wywiad-glowa strong{font-size:13.5px;color:#0f172a}
.cem-wywiad-pytanie{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.cem-wywiad-pytanie span{font-size:13px;color:#334155}
.cem-wywiad-pytanie input{border:1px solid #e2e8f0;border-radius:10px;padding:8px 11px;font:inherit;font-size:13px;background:#fff}
.cem-wywiad-pytanie input:focus{outline:none;border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.1)}

/* Zakładka „Szkolenia" — lekcje dla recepcji. */
.cem-lekcja-naglowek{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin:16px 0 8px}
/* ARCHIWUM PRZEROBIONYCH (wlasciciel 26.08.2026: "moze zarchiwizowac przerobione").
   Naglowek dziala jak naglowek lekcji -- da sie w niego kliknac i ma strzalke. Zwiniete lekcje
   NIE SA usuwane ze strony, tylko chowane: rozwiniecie pokazuje je od razu, bez wczytywania. */
.cem-archiwum-glowa{cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none}
.cem-archiwum-glowa:hover{color:#0f172a}
.cem-archiwum-glowa:focus-visible{outline:2px solid #059669;outline-offset:3px;border-radius:6px}
.cem-archiwum-tresc.zwinieta{display:none}
.cem-lekcja{border:1px solid #e2e8f0;border-radius:14px;background:#fff;padding:12px 15px;margin-bottom:9px}
.cem-lekcja.zrobiona{background:#fbfefc;border-color:#dcfce7}
.cem-lekcja-glowa{display:flex;align-items:center;gap:10px;cursor:pointer}
/* STRZALKA MOWI, ZE DA SIE KLIKNAC. Do 24.08.2026 wczesniejsze lekcje pokazywaly sam tytul i nie
   bylo widac, ze maja tresc do rozwiniecia (zgloszenie wlasciciela: "szkolen nie mozna przerobic,
   bo nie mozna odczytac"). */
/* ZWIJANIE LEKCJI ROBI CSS, NIE HTML -- tresc jest w dokumencie zawsze, zeby "Drukuj" mial co
   wypuscic na papier (wlasciciel 24.08.2026: "chcialbym zeby Ola mogla sobie drukowac lekcje"). */
.cem-lekcja:not(.otwarta) .cem-lekcja-tresc{display:none}
.cem-lekcje-pasek{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
/* TAKI SAM PRZYCISK JAK POZOSTALE, TYLKO W INNYM KOLORZE (wlasciciel 24.08.2026). Rozni sie
   wylacznie kolorem: zielony, zeby nie mylil sie z niebieskim "Przerobione" w karcie lekcji.

   JEDEN ROZMIAR NA CALYM PASKU. `.cem-btn` ma font-size:13px, a `.cem-choice-btn` czcionke
   dziedziczona (wieksza) -- przyciski obok siebie mialy przez to rozna wielkosc. Najpierw
   powiekszylem druk do przelacznikow i wyszedl za duzy (wlasciciel: "teraz drukuj jest za duze --
   wyrownaj wszystkie przyciski"), wiec jest odwrotnie: WSZYSTKIE schodza do rozmiaru
   standardowego przycisku programu, tego samego co "Przerobione" w karcie lekcji. */
.cem-btn.drukuj{background:linear-gradient(180deg,#10b981,#059669);color:#fff;border-color:#059669;
  box-shadow:0 1px 3px rgba(5,150,105,.35)}
.cem-btn.drukuj:hover{background:linear-gradient(180deg,#059669,#047857);border-color:#047857;
  box-shadow:0 3px 10px rgba(5,150,105,.32)}
.cem-btn.drukuj:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(5,150,105,.3)}

/* WYDRUK: na papier idzie sama tresc lekcji. Menu, przyciski i przelaczniki znikaja, wszystkie
   lekcje sa rozwiniete (na kartce nie ma czego klikac), a karta nie pika sie w poprzek strony. */
@media print{
  .cem-nav, .cem-topbar, .cem-lekcje-pasek, .cem-btn, .cem-badge.ok,
  .cem-lekcja-strzalka, .cem-greeting{display:none !important}
  .cem-lekcja .cem-lekcja-tresc{display:block !important}
  .cem-lekcja{break-inside:avoid;page-break-inside:avoid;border:1px solid #94a3b8;border-radius:0;
    margin-bottom:8px;background:#fff}
  .cem-lekcja-naglowek{margin:14px 0 6px;color:#000}
  body{background:#fff}
  a[href]:after{content:""}
  /* DRUK SAMEGO ANGIELSKIEGO (wlasciciel 25.08.2026). Klase dokleja i zdejmuje przycisk
     "Drukuj sam angielski" dookola samego drukowania -- regula dziala TYLKO na papierze, wiec
     na ekranie nic nie mruga. */
  .cem-nie-drukuj{display:none !important}
}
/* Lekcja jezykowa ma byc rozpoznawalna z listy -- to inna rzecz do przerobienia niz zawodowa. */
.cem-badge-ang{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;
  background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:999px;padding:1px 7px;
  vertical-align:2px}
.cem-lekcja-strzalka{color:#64748b;font-size:12px;line-height:1;width:12px;flex:0 0 12px}
.cem-lekcja-glowa:hover strong{text-decoration:underline;text-underline-offset:3px}
.cem-lekcja-glowa:focus-visible{outline:2px solid #059669;outline-offset:3px;border-radius:6px}
.cem-lekcja-glowa>div{flex:1;min-width:0}
.cem-lekcja-glowa strong{font-size:14px;color:#0f172a}
.cem-lekcja ul{margin:9px 0 0;padding-left:19px;font-size:13.5px;line-height:1.6;color:#334155}
.cem-lekcja-cwiczenie{margin:9px 0 0;padding:9px 12px;border-radius:10px;background:#eff6ff;color:#1e3a8a;font-size:13px}

/* === DORADCA PODATKOWY ======================================================================
   Analiza ma stałą postać, więc i wygląd jest stały: wniosek dużym drukiem, potem punkty,
   skutki w trzech kolumnach, źródła z etykietą rodzaju. */
/* === DORADCA PODATKOWY ======================================================================
   Uklad odpowiada temu, po co sie tu wchodzi: najpierw wniosek, potem co zrobic, a dowody
   (zrodla, dokumenty, warianty) zwiniete. Kolory znacza jedno: niebieski to wniosek programu,
   bursztyn to cos, co czeka na czlowieka, czerwien to ryzyko wysokie. */
.dp-pytanie{border:1px solid #e2e8f0;border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:18px}
.dp-pytanie textarea{width:100%;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;font:inherit;font-size:13.5px;resize:vertical}
.dp-pytanie textarea:focus{outline:none;border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.dp-pytanie .cem-podpowiedzi{justify-content:flex-start;margin-top:10px}
.dp-tytul{font-size:16px;color:#0f172a;margin:18px 0 12px;line-height:1.4}
.dp-naglowek-warstwy{margin:0 0 8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#64748b}

/* lista spraw */
.dp-lista{display:flex;flex-direction:column;gap:8px}
.dp-sprawa{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:12px 14px;
  border:1px solid #e2e8f0;border-radius:14px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.dp-sprawa:hover{border-color:#c7d2fe;box-shadow:0 2px 10px rgba(15,23,42,.07)}
.dp-sprawa-tresc{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dp-sprawa-tresc strong{font-size:13.5px;color:#0f172a}
.dp-sprawa-boczek{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}

/* analiza */
.dp-analiza{border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:0;margin-bottom:14px;overflow:hidden}
/* TRZY WARSTWY ODPOWIEDZI MAJA BYC WIDOCZNIE TRZEMA (wlasciciel 26.08.2026: "poczatek jest dobry,
   ale pozniej wszystko sie miesza"). Wczesniej dzielila je wlosowa kreska i jeden odcien tla --
   przy dluzszej analizie tekst plynal jednym ciagiem i nie bylo wiadomo, gdzie konczy sie wniosek,
   a zaczyna to, co trzeba zrobic. Teraz kazda ma wlasny margines i wyrazna krawedz. */
.dp-warstwa{padding:18px 20px}
.dp-warstwa+.dp-warstwa{border-top:3px solid #eef2f7}
/* Warstwa wyniku to ta, ktora wlasciciel uznal za dobra ("poczatek jest dobry") -- zostaje bez
   ozdobnikow, ma tylko nieco wiecej powietrza u gory, zeby byla widocznym poczatkiem odpowiedzi. */
.dp-warstwa-wynik{padding-top:20px}
.dp-warstwa-dzialanie{background:#f7fbff;border-left:3px solid #2563eb}
.dp-warstwa-dzialanie .dp-naglowek-warstwy{color:#1d4ed8;font-size:12.5px}

/* RADA, O KTORA NIE PYTAL -- rozpoznania decydujace o zwolnieniu, forma dzialalnosci, jedna rzecz
   biznesowa. Stoi POD odpowiedzia i ma wlasny kolor, zeby nie czytalo sie jej jako czesci
   odpowiedzi na zadane pytanie: to jest cos, co doradca zauwazyl przy okazji. */
.dp-od-siebie{margin:14px 0 0;padding:11px 14px;border-radius:10px;border:1px solid #ddd6fe;
  background:#f5f3ff;line-height:1.55}
.dp-od-siebie p{margin:4px 0 0;color:#312e81;font-size:14px}
.dp-od-siebie-etykieta{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:#6d28d9;font-weight:700}
/* Rozpoznania to jedyny z tych trzech tematow, przy ktorym latwo o nadinterpretacje -- dostaje
   ostrzegawczy odcien, zeby nie czytalo sie tego jak gotowej recepty. */
.dp-od-siebie--rozpoznania{border-color:#fde68a;background:#fffbeb}
.dp-od-siebie--rozpoznania p{color:#78350f}
.dp-od-siebie--rozpoznania .dp-od-siebie-etykieta{color:#b45309}
.dp-glowa{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dp-ryzyko{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;background:#f1f5f9;color:#475569;white-space:nowrap}
.dp-ryzyko.ok{background:#dcfce7;color:#166534}
.dp-ryzyko.warn{background:#fef3c7;color:#92400e}
.dp-ryzyko.danger{background:#fee2e2;color:#991b1b}
.dp-ryzyko.maly{font-size:11px;padding:3px 9px}
.dp-ryzyko-czemu{font-size:12.5px;color:#64748b;line-height:1.5}
.dp-wniosek{font-size:16px;font-weight:600;line-height:1.55;color:#0f172a;margin:0;
  border-left:4px solid #2563eb;padding-left:14px}
.dp-rekomendacja{margin:14px 0 0;font-size:14px;line-height:1.6;color:#0f172a;background:#eff6ff;
  border-radius:12px;padding:12px 14px}
.dp-rekomendacja span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#2563eb;margin-bottom:4px}
.dp-skutki{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:14px}
.dp-skutki>div{background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;padding:11px 13px}
.dp-skutki h4{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.dp-skutki p{margin:0;font-size:13px;line-height:1.5;color:#334155}

/* co zrobic */
.dp-kroki{margin:0;padding-left:22px;font-size:13.5px;line-height:1.7;color:#0f172a}
.dp-kroki li{margin-bottom:4px}
.dp-wiszace{margin-top:14px;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:11px 14px}
.dp-wiszace h3{margin:0 0 5px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#92400e}
.dp-wiszace ul{margin:0;padding-left:19px;font-size:13px;line-height:1.6;color:#78350f}
.dp-czlowiek{margin-top:12px;padding:11px 14px;border-radius:12px;background:#fef3c7;color:#92400e;font-size:13px;line-height:1.5}
.dp-pytanie-agenta{margin-top:14px;padding:12px 14px;border-radius:12px;background:#eef2ff;border:1px solid #e0e7ff}
.dp-pytanie-agenta p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:#312e81}
.dp-odpowiedz{display:flex;gap:8px;flex-wrap:wrap}
.dp-odpowiedz input{flex:1;min-width:220px;border:1px solid #c7d2fe;border-radius:10px;padding:9px 11px;font:inherit;font-size:13px}
.dp-odpowiedz input:focus{outline:none;border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.12)}

/* dowody -- zwiniete */
.dp-dowody{border-top:1px solid #f1f5f9;background:#fcfdfe}
.dp-dowody>summary{cursor:pointer;padding:12px 20px;font-size:12.5px;font-weight:600;color:#475569;list-style:none}
.dp-dowody>summary::-webkit-details-marker{display:none}
.dp-dowody>summary::before{content:'▸ ';color:#94a3b8}
.dp-dowody[open]>summary::before{content:'▾ '}
.dp-dowody>*:not(summary){padding:0 20px}
.dp-dowody>*:last-child{padding-bottom:16px}
.dp-punkt{margin-top:14px}
.dp-punkt h3{margin:0 0 5px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.dp-punkt p{margin:0;font-size:13.5px;line-height:1.6;color:#334155}
.dp-punkt ul{margin:4px 0 0;padding-left:19px;font-size:13.5px;line-height:1.6;color:#334155}
.dp-wariant{border-left:3px solid #dbeafe;padding:2px 0 2px 11px;margin-bottom:9px}
.dp-wariant strong{font-size:13.5px;color:#0f172a}
.dp-zrodla{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.dp-zrodla li{font-size:13px;line-height:1.5}
.dp-zrodla a{color:#2563eb}
.dp-link{color:#2563eb;font-size:12px}

/* stopka analizy */
.dp-stopka{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px;
  border-top:1px solid #f1f5f9;background:#f8fafc}
.dp-meta{font-size:11.5px;color:#94a3b8;margin-right:auto;white-space:nowrap}
.dp-potwierdzenie{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dp-przyciski{display:flex;flex-wrap:wrap;gap:8px}
.dp-historia{margin:14px 0 0}
.dp-historia>summary{cursor:pointer;font-size:13px;font-weight:600;color:#475569;list-style:none;padding:6px 0}
.dp-historia>summary::-webkit-details-marker{display:none}
.dp-historia>summary::before{content:"▸ ";color:#94a3b8}
.dp-historia[open]>summary::before{content:"▾ "}
.dp-stara{margin:0 0 8px;padding:10px 12px;border-left:3px solid #e2e8f0;background:#fafcff;border-radius:0 10px 10px 0}
.dp-stara p{margin:0 0 4px;font-size:13px;color:#475569;line-height:1.55}
.dp-stara-glowa{display:flex;align-items:center;gap:8px}
.dp-zastapiona{opacity:.75}
.dp-zastapiona{opacity:.75;border-style:dashed}
.dp-sprawa .cem-badge{flex:none}
.dp-sprawa-tresc strong{white-space:normal;word-break:break-word}

/* Zalecenia sa zapisanym planem dzialania, nie druga kopia tekstu analizy. Stan wybiera czlowiek
   i kazda zmiana zostaje w dzienniku. */
.dp-zalecenia{margin:14px 0;padding:14px 16px;border:1px solid #bfdbfe;border-radius:14px;background:#f8fbff}
.dp-zalecenia h3{margin:0 0 3px;font-size:13px;color:#1e3a8a}
.dp-zalecenia>p{margin:0 0 10px}
.dp-zalecenia-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.dp-zalecenie{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;background:#fff;border:1px solid #dbeafe}
.dp-zalecenie>span{flex:1;min-width:0;font-size:13px;line-height:1.45;color:#1e293b}
.dp-zalecenie select{min-width:118px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:6px 8px;font:inherit;font-size:12px;color:#334155}
.dp-zalecenie--zrobione>span,.dp-zalecenie--odrzucone>span{text-decoration:line-through;color:#64748b}
.dp-zalecenie--do_zrobienia{border-color:#dbeafe;background:#fff}
.dp-zalecenie--zrobione{border-color:#bbf7d0;background:#f0fdf4}
.dp-zalecenie--w_toku{border-color:#fde68a;background:#fffbeb}
.dp-zalecenie--odrzucone{border-color:#e2e8f0;background:#f8fafc}

/* Pelny dziennik jest dostepny, ale zwiniety -- nie zaslania listy spraw. */
.dp-dziennik{margin:18px 0 4px;border-top:1px solid #e2e8f0;padding-top:10px}
.dp-dziennik>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:#475569;list-style:none}
.dp-dziennik>summary::-webkit-details-marker{display:none}
.dp-dziennik>summary::before{content:'▸ ';color:#94a3b8}
.dp-dziennik[open]>summary::before{content:'▾ '}
.dp-dziennik-lista{list-style:none;margin:10px 0 0;padding:0;max-height:360px;overflow:auto;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.dp-dziennik-lista li{display:grid;grid-template-columns:125px minmax(170px,1fr) minmax(120px,auto);gap:8px 12px;padding:8px 10px;border-bottom:1px solid #f1f5f9;align-items:baseline}
.dp-dziennik-lista li:last-child{border-bottom:0}
.dp-dziennik-lista strong{font-size:12.5px;color:#334155}
.dp-dziennik-kiedy{font-size:11.5px;color:#94a3b8;font-variant-numeric:tabular-nums}

@media(max-width:700px){
  .dp-zalecenie{align-items:stretch;flex-direction:column;gap:7px}
  .dp-zalecenie select{width:100%}
  .dp-dziennik-lista li{grid-template-columns:1fr;gap:2px}
}

/* Pytanie doradcy do właściciela — kończy analizę i zbiera brakującą informację. */
.dp-pytanie-agenta{margin-top:12px;padding:12px 14px;border-radius:12px;background:#f5f3ff;border:1px solid #ddd6fe}
.dp-pytanie-agenta p{margin:0 0 8px;font-size:13.5px;color:#4c1d95}
.dp-odpowiedz{display:flex;gap:8px;flex-wrap:wrap}
.dp-odpowiedz input{flex:1;min-width:220px;border:1px solid #ddd6fe;border-radius:10px;padding:8px 11px;font:inherit;font-size:13px}
.dp-odpowiedz input:focus{outline:none;border-color:#a78bfa;box-shadow:0 0 0 3px rgba(139,92,246,.15)}

/* Stan prawny — czy „sprawdzone dziś" znaczy naprawdę „aktualne na dziś". */
.dp-stan-prawny{margin-top:12px;padding:11px 13px;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:13px;line-height:1.55}
.dp-stan-prawny.ok{background:#f0fdf4;border-color:#bbf7d0;color:#166534}

/* Szczegóły weryfikacji prawa — lista nowelizacji schowana pod jednym zdaniem. */

/* Dokumenty doradcy: strefa upuszczania i lista załączników. */
.dp-dokumenty{border:1px dashed #dbe2ea;border-radius:14px;padding:12px 14px;margin:18px 0 14px;background:#fcfdff}
.dp-dokumenty>summary{cursor:pointer;font-size:13px;font-weight:600;color:#334155;list-style:none}
.dp-dokumenty>summary::-webkit-details-marker{display:none}
.dp-dokumenty>summary::before{content:'▸ ';color:#94a3b8}
.dp-dokumenty[open]>summary::before{content:'▾ '}
.dp-dokumenty-tytul{margin:8px 0 10px;font-size:12.5px}
.dp-strefa-upuszczania{display:flex;align-items:center;justify-content:center;min-height:64px;border:1px dashed #cbd5e1;
  border-radius:12px;background:#fff;color:#64748b;font-size:13px;cursor:pointer;text-align:center;padding:10px}
.dp-strefa-upuszczania:hover,.dp-dokumenty.nad .dp-strefa-upuszczania{border-color:#93c5fd;background:#f8fbff;color:#1d4ed8}
.dp-dokument-akcje{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dp-kosz{margin-top:10px;border-top:1px solid #e2e8f0;padding-top:8px}
.dp-kosz>summary{cursor:pointer;font-size:12.5px;color:#64748b}
.dp-lista-dokumentow{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.dp-dokument{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:8px 11px}
.dp-dokument>div{flex:1;min-width:0;font-size:13px}
.dp-uwaga{color:#b91c1c;font-size:12.5px}
/* NIECZYTELNE POLE (punkt 48 audytu). Bursztyn, nie czerwień: to nie jest błąd, który coś
   zepsuł — wpis jest cały i widoczny, brakuje jednego kawałka. Czerwień w tym programie znaczy
   „zajmij się tym teraz"; tu wystarczy „wiedz, że tak jest". */
.dp-uszkodzone,.bv-uszkodzone{color:#b45309;font-size:12.5px}

/* LIMIT ZWOLNIENIA Z VAT -- karta na gorze Doradcy. Zielona, dopoki jest zapas; czerwona po
   przekroczeniu. Kolor niesie tu informacje, wiec nie jest sam: obok stoi data i kwota. */
.dp-limit{border:1px solid #bbf7d0;background:#f0fdf4;border-radius:16px;padding:16px 18px;margin:0 0 18px}
.dp-limit.przekroczony{border-color:#fecaca;background:#fef2f2}
.dp-limit-naglowek{margin:0 0 6px;font-size:15px;font-weight:600;color:#166534}
.dp-limit.przekroczony .dp-limit-naglowek{color:#991b1b}
.dp-limit-licznik{margin:0 0 8px;font-size:14px;color:#334155}
.dp-limit-licznik strong{font-size:20px;color:#0f172a}
.dp-limit-miernik{display:block;height:8px;border-radius:999px;background:#e2e8f0;overflow:hidden;margin:0 0 10px}
.dp-limit-miernik>i{display:block;height:100%;background:#16a34a}
.dp-limit.przekroczony .dp-limit-miernik>i{background:#dc2626}
.dp-limit-moment{margin:0 0 8px;font-size:13.5px;color:#7f1d1d;line-height:1.55}
.dp-limit-vat{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid #fecaca;font-size:13.5px;color:#334155;line-height:1.6}
.dp-limit-vat>span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:#991b1b;font-weight:600}
.dp-limit-vat>strong{font-size:19px;color:#0f172a;margin-right:6px}
.dp-limit-warunek{margin:0 0 10px;padding:9px 11px;border-radius:10px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:13px;line-height:1.55}
.dp-limit-rozbicie{margin:10px 0 12px}
.dp-limit-rozbicie>summary{cursor:pointer;font-size:13px;font-weight:600;color:#334155;list-style:none}
.dp-limit-rozbicie>summary::-webkit-details-marker{display:none}
.dp-limit-rozbicie>summary::before{content:"▸ ";color:#94a3b8}
.dp-limit-rozbicie[open]>summary::before{content:"▾ "}
.dp-limit-tabela{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.dp-limit-tabela td{padding:4px 6px;border-bottom:1px solid #e8eef5}
.dp-limit-tabela td.num{text-align:right;font-variant-numeric:tabular-nums}
.dp-limit-tabela tr.tu td{font-weight:600;background:#fff1f2}

.cem-relacja-lekcja{margin:10px 0;font-size:13px;color:#475569;line-height:1.6}

/* Ostrzezenie doklejane przez PROGRAM do odpowiedzi Ksiegowej -- ma wygladac inaczej niz jej tekst,
   bo nie jest jej zdaniem. */
.cem-chat-ostrzezenie{display:block;margin:0 0 10px;padding:9px 12px;border-radius:10px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:13px;line-height:1.55}
.cem-chat-ostrzezenie>span{display:block;margin-top:3px;color:#7f1d1d;font-size:12px;opacity:.9}

/* "SPRAWDZ MIESIAC" -- lista kontrolna Ksiegowej. Kolor NIGDY sam: obok stoi slowo ("do zrobienia",
   "do sprawdzenia"), zeby stan dalo sie przeczytac takze bez rozrozniania barw. */
.km{margin:0 0 18px;padding:14px 16px;border:1px solid #dbe2ea;border-radius:16px;background:#fcfdff}
.km-belka{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.km-belka input[type="month"]{padding:6px 9px;border:1px solid #cbd5e1;border-radius:9px;font-size:13px}
.km-podsumowanie{margin:0 0 10px;font-size:13.5px;color:#334155}
.km-liczba-problem{color:#b91c1c}
.km-liczba-uwaga{color:#b45309}
.km-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.km-pozycja{border:1px solid #e8eef5;border-left:4px solid #cbd5e1;border-radius:0 12px 12px 0;padding:10px 12px;background:#fff}
.km-pozycja.km-problem{border-left-color:#dc2626;background:#fef7f7}
.km-pozycja.km-uwaga{border-left-color:#f59e0b;background:#fffdf5}
.km-pozycja.km-ok{border-left-color:#16a34a}
.km-pozycja p{margin:4px 0 0;font-size:13px;color:#475569;line-height:1.55}
.km-glowa{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.km-co-zrobic{color:#0f172a !important;font-weight:500}
.km-doradca{margin-top:8px}
.km-zamkniecie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid #e8eef5}

/* RAPORT MIESIECZNY KSIEGOWEJ -- dokument do czytania, nie tabela. Wniosek na wierzchu. */
.km-raport{margin:14px 0 0;padding:14px 16px;border:1px solid #dbe2ea;border-radius:16px;background:#fff}
.km-raport h3{margin:0;font-size:15px}
.km-raport-wtoku{margin:0 0 10px;padding:9px 11px;border-radius:10px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:13px;line-height:1.55}
.km-punkt{margin:10px 0 0;padding-top:10px;border-top:1px solid #eef2f7}
.km-punkt h4{margin:0 0 4px;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:#64748b}
.km-punkt p,.km-punkt li{margin:0 0 4px;font-size:13.5px;color:#334155;line-height:1.6}
.km-punkt ul{margin:0;padding-left:18px}
.km-punkt.glowny{border-top:none;padding-top:0}
.km-punkt.glowny p{font-size:16px;color:#0f172a;font-weight:500;line-height:1.5}

/* ZAKUPY DO ROZSTRZYGNIECIA -- lista faktur, przy ktorych pytanie o amortyzacje ma sens. */
.dp-zakupy{border:1px solid #dbe2ea;border-radius:14px;padding:12px 14px;margin:0 0 16px;background:#fcfdff}
.dp-zakupy>summary{cursor:pointer;font-size:13px;font-weight:600;color:#334155;list-style:none}
.dp-zakupy>summary::-webkit-details-marker{display:none}
.dp-zakupy>summary::before{content:"▸ ";color:#94a3b8}
.dp-zakupy[open]>summary::before{content:"▾ "}
.dp-lista-zakupow{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.dp-lista-zakupow li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #e8eef5;border-radius:10px;background:#fff}
.dz-kwota{font-variant-numeric:tabular-nums;font-weight:600;min-width:96px;text-align:right;font-size:13.5px}
.dz-opis{flex:1;display:flex;flex-direction:column;gap:2px;font-size:13px;min-width:0}
.dz-opis>span{white-space:normal}

/* FAKTURY Z KSeF BEZ ODPOWIEDNIKA W inFAKCIE -- czekaja na decyzje wlasciciela. */
/* BEZ TLA. Sekcja miala zolte tlo i zolta ramke -- od czasu, gdy byla lista WYJATKOW
   ("z KSeF, nie ma w inFakcie"). Dzis tedy przychodzi KAZDA nowa faktura, wiec zolte tlo
   kazalo czytac normalny stan jak ostrzezenie, a karty w srodku wygladaly, jakby byly
   inne niz pozostale (wlasciciel 23.08.2026: "chce zeby nie bylo tla"). */
.kbi{margin:0 0 16px;padding:0;border:0;border-radius:0;background:transparent}
.kbi-pusto{border:1px solid #e8eef5;border-radius:12px;background:#fcfdff;padding:10px 14px}
.kbi-belka{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;font-size:14px}
.kbi-lista{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.kbi-faktura{border:1px solid #e8eef5;border-radius:12px;padding:10px 12px;background:#fff}
.kbi-faktura.zdecydowana{border-color:#bbf7d0;background:#f8fffb}
.kbi-glowa{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kbi-kwota{font-variant-numeric:tabular-nums;font-weight:600;min-width:96px;text-align:right}
.kbi-opis{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px}
.kbi-uwaga{margin:6px 0 0;font-size:12.5px;color:#92400e;line-height:1.5}
/* Karta ZWINIETA po decyzji -- jedno zdanie zamiast calego formularza, tak samo jak
   przy dokumencie z inFaktu (wlasciciel 2026-08-23). */
.kbi-gotowa{gap:10px}
.kbi-podsumowanie{flex:1;min-width:0;font-size:13px;color:#166534;font-weight:600}
.kbi-decyzja{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.kbi-decyzja select{padding:5px 8px;border:1px solid #cbd5e1;border-radius:8px;font-size:13px}
/* ZA CO TA FAKTURA JEST -- pozycje pod naglowkiem, przed przyciskami decyzji. Wciete i drobne,
   zeby nie konkurowaly z kwota, ale czytelne bez klikania: to od nich zalezy decyzja. */
.kbi-pozycje{list-style:none;margin:6px 0 0;padding:0 0 0 12px;border-left:2px solid #e2e8f0}
.kbi-pozycje li{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:#475569;padding:1px 0}
.kbi-pozycje li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Udzial Roberta -- pole liczbowe przy koszcie wspolnym. */
.kbi-udzial{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#475569}
.kbi-udzial input{width:58px;padding:5px 6px;border:1px solid #cbd5e1;border-radius:8px;font-size:13px;text-align:right}
.kbi-zaplacona{font-size:12.5px;color:#475569;display:flex;align-items:center;gap:4px}

/* KARTA PACJENTA (wlasciciel 22.08.2026: "chcialbym gdzies wpisac imie i nazwisko pacjenta
   i zobaczyc wszystkie wizyty i za co zaplacil -- takie do sprawdzania"). Ekran do CZYTANIA:
   zadnych przyciskow zmieniajacych dane, wiec i wyglad jest spokojny -- liczby na wierzchu,
   reszta szara. */
/* POLE SZUKANIA -- szerokie i widoczne (wlasciciel 22.08.2026: "zrob ladniejsze pole (...)
   szerszy wiersz"). To jest pierwsza i najczesciej uzywana rzecz na tym ekranie, wiec nie moze
   wygladac jak zwykle pole formularza wciśnięte w rząd guzików. */
.kp-szukajka{padding:18px 20px}
.kp-pole{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dbe3ef;
  border-radius:999px;padding:6px 8px 6px 16px;max-width:640px;
  box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .15s,box-shadow .15s}
.kp-pole:focus-within{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.kp-lupa{font-size:16px;line-height:1;opacity:.55;flex:none}
.kp-pole input{flex:1 1 auto;border:0;outline:none;background:none;font:inherit;font-size:16px;
  padding:10px 0;color:#0f172a;min-width:0}
.kp-pole input::placeholder{color:#94a3b8}
/* Przegladarka dokleja do type=search wlasny krzyzyk -- mamy swoj, wiec tamten znika. */
.kp-pole input::-webkit-search-cancel-button{display:none}
.kp-czysc{border:0;background:#eef2f7;color:#475569;font-size:18px;line-height:1;cursor:pointer;
  width:30px;height:30px;border-radius:999px;flex:none}
.kp-czysc:hover{background:#e2e8f0;color:#0f172a}
.kp-podpowiedz{margin:10px 0 0;font-size:12.5px;color:#94a3b8;line-height:1.6}
.kp-podpowiedz b{color:#475569;font-weight:600}
.kp-kafelki{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 0}
.kp-kafelek{background:#f6f8fb;border:1px solid #e6ebf2;border-radius:12px;padding:10px 14px;min-width:150px}
.kp-kafelek dt{font-size:12px;color:#64748b;letter-spacing:.03em}
.kp-kafelek dd{margin:2px 0 0;font-size:20px;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums}
.kp-kafelek small{display:block;margin-top:2px;font-size:11.5px;color:#94a3b8}
/* Niezaplacone czerwone -- to jedyna rzecz na tym ekranie, ktora moze wymagac dzialania. */
.kp-alarm{color:#b91c1c}
.kp-niezaplacone td{background:#fff7f7}
.kp-uwagi{max-width:340px;color:#64748b;font-size:12.5px}
/* Udzielona znizka ma byc widac -- to nie jest kwota "jaka wyszla", tylko decyzja, ktora ktos
   swiadomie podjal (wlasciciel 25.08.2026: "brakuje mi cena regularna, znizka"). */
.kp-znizka{color:#b45309;font-weight:600}
/* MOJA UWAGA O PACJENCIE -- osobny panel, nie kolumna w tabeli: dotyczy calej osoby, a nie
   pojedynczej wizyty. Zolte tlo odroznia to, co napisal czlowiek, od tego, co policzyl program. */
.kp-uwaga-panel{background:#fffbeb;border:1px solid #fde68a}
.kp-uwaga-tresc{margin:6px 0 0;white-space:pre-wrap;color:#0f172a;line-height:1.6}
.kp-uwaga-pusta{margin:6px 0 0;color:#94a3b8}
/* "Nic nie trzeba robic" przy zgodzie podpisanej na tablecie. Zielony jak reszta stanow
   dokonanych w programie -- ma sie czytac jako ZALATWIONE, a nie jako kolejna instrukcja. */
.kp-zgoda-gotowe{margin:8px 0 0;padding:8px 10px;border-radius:8px;
  background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.kp-uwaga-kiedy{margin:8px 0 0;font-size:12px;color:#94a3b8}
.kp-lista{list-style:none;padding:0;margin:8px 0 0}
.kp-lista li{padding:4px 0;display:flex;align-items:center;gap:10px}
.kp-brak{margin-top:14px}
.cem-table-scroll{overflow-x:auto}

/* Stawka VAT drobnym drukiem obok kwoty -- tylko przy koszcie wpisanym recznie, gdzie
   stawka jest jedna i pewna. Faktura miewa kilka naraz, wiec tam stoi sama kwota. */
.cem-costs-vat-stawka{display:block;font-size:11px;color:var(--cem-muted,#5b6572);
  line-height:1.2;font-variant-numeric:tabular-nums}

/* Jedno zdanie pod kwota na kafelku -- tam, gdzie sama liczba kaze zgadywac, co znaczy. */
.cem-income-card-opis{display:block;margin-top:4px;font-size:11.5px;line-height:1.35;
  color:var(--cem-muted,#5b6572);font-weight:400}

/* Suma calego roku -- ostatni wiersz tabeli "Moj rok". Oddzielona kreska i tlem, zeby
   nie czytalo sie jej jak trzynastego miesiaca. */
.cem-cc-rok-razem td{border-top:2px solid #cbd5e1;background:#f8fafc;
  font-variant-numeric:tabular-nums}

/* Zakres szukania w Dokumentach z KSeF: wpisana fraza przeszukuje WSZYSTKIE zakladki, nie tylko
   otwarta (wlasciciel 25.08.2026). Bez tego napisu wyglada to jak zepsuta zakladka. */
.cem-inf-szukam-wszedzie{display:inline-block;margin-left:10px;font-size:12px;color:#1d4ed8;
  background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:3px 10px;white-space:nowrap}

/* "wpisane recznie" zamiast kreski w kolumnie "Nr faktury" -- roznica miedzy wierszem z faktura
   a wierszem wpisanym samodzielnie byla pokazana WYLACZNIE odcieniem tla, ktorego wlasciciel nie
   widzi (25.08.2026: "wszystkie sa niebieskie", "nic z tego nie rozumiem"). */
.cem-bez-faktury{font-size:11.5px;color:#64748b;background:#f1f5f9;border:1px solid #e2e8f0;
  border-radius:999px;padding:2px 9px;white-space:nowrap}

/* Wklejanie cennika uslug wprost z Excela (wlasciciel 25.08.2026). Schowane pod rozwijanym
   napisem, zeby nie rozpychalo panelu tym, kto wgrywa plik. */
.cem-svc-wklej{margin-top:10px;border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px;background:#f8fafc}
.cem-svc-wklej summary{cursor:pointer;font-size:13px;font-weight:600;color:#1d4ed8}
.cem-svc-wklej textarea{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  border:1px solid #cbd5e1;border-radius:8px;padding:8px;box-sizing:border-box}

/* CENNIK USLUG: mniejsze przyciski w wierszu i porzadne pudelko z wynikiem wczytania
   (wlasciciel 25.08.2026: "zrob mniejsze przyciski edytuj, usun", "zrob wczytano ladniej"). */
.cem-btn-maly{font-size:11.5px;padding:3px 9px;line-height:1.5;border-radius:6px;font-weight:500}
.cem-svc-akcje{white-space:nowrap;text-align:right}
.cem-svc-akcje .cem-btn-maly + .cem-btn-maly{margin-left:6px}

/* Kolor niesie ten sam stan, co tresc: zielony -- weszlo, bursztynowy -- weszlo, ale czesc
   wierszy wypadla, czerwony -- nie weszlo nic. Sama szara linijka nie odrozniala tych trzech. */
.cem-svc-wynik{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:9px 12px;
  border-radius:10px;font-size:13px;line-height:1.55;border:1px solid}
.cem-svc-wynik-znak{flex:0 0 18px;width:18px;height:18px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;margin-top:1px}
.cem-svc-wynik--ok{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.cem-svc-wynik--ok .cem-svc-wynik-znak{background:#16a34a}
.cem-svc-wynik--czesc{background:#fffbeb;border-color:#fde68a;color:#92400e}
.cem-svc-wynik--czesc .cem-svc-wynik-znak{background:#d97706}
.cem-svc-wynik--nic{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.cem-svc-wynik--nic .cem-svc-wynik-znak{background:#dc2626}

/* KATEGORIE PRZYCHODU w Centrum Zarzadzania (wlasciciel 25.08.2026: "gdzie to ustawiam
   w systemie?"). Dwie listy obok siebie, przy kazdej pozycji liczba wizyt -- to ona rozstrzyga,
   czy wolno ja skasowac. */
.cem-kat-kolumny{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px}
@media (max-width:820px){.cem-kat-kolumny{grid-template-columns:1fr}}
.cem-kat-tytul{margin:0 0 8px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#64748b}
.cem-kat-lista{list-style:none;margin:0 0 10px;padding:0;border:1px solid #e2e8f0;border-radius:10px;
  background:#fff;overflow:hidden}
.cem-kat-lista li{display:flex;align-items:center;gap:10px;padding:6px 10px;font-size:13px;
  border-top:1px solid #f1f5f9}
.cem-kat-lista li:first-child{border-top:0}
.cem-kat-nazwa{flex:1;min-width:0;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Liczba wizyt szara, "nieuzywana" jeszcze bledsza -- to podpowiedz, a nie wynik. */
.cem-kat-ile{flex:0 0 auto;font-size:11.5px;color:#64748b;font-variant-numeric:tabular-nums}
.cem-kat-ile.pusta{color:#cbd5e1}
.cem-kat-akcje{flex:0 0 auto;white-space:nowrap}
.cem-kat-akcje .cem-btn-maly + .cem-btn-maly{margin-left:6px}
.cem-kat-akcje .cem-btn-maly[disabled]{opacity:.45;cursor:not-allowed}

/* Propozycja cenowa w relacji Managera -- to jedyne zdanie w tej sekcji, ktore mowi "zrob tak",
   wiec ma sie odcinac od uwag nad nim (wlasciciel 26.08.2026: "nie daje propozycji"). */
.cem-relacja-propozycja{margin:8px 0 0;padding:9px 12px;border-radius:9px;background:#f0fdf4;
  border:1px solid #bbf7d0;color:#166534;font-weight:600;line-height:1.5}

/* Zdanie odrozniajace LICZNIK limitu od kwoty do opodatkowania (wlasciciel 26.08.2026: "to nie
   jest prawda bo opodatkowane jest ta powyzej 240 000"). Bez niego licznik czytalo sie jako
   "tyle mam opodatkowane" -- a to dwie rozne liczby, rozniace sie u niego o 238 tysiecy. */
.dp-limit-wyjasnienie{margin:8px 0 0;padding:9px 12px;border-radius:9px;background:#fffbeb;
  border:1px solid #fde68a;color:#78350f;font-size:13px;line-height:1.55}

/* === ZGODA NA ZABIEG (wlasciciel 27.08.2026: "zrob ta karte zgoda na zabieg ladniej,
   estetycznie"). Ten ekran oglada sie z pacjentem po drugiej stronie biurka, wiec ma wygladac
   jak dokument w dobrym gabinecie, a nie jak formularz do wypelnienia.
   DUZE POLA ZOSTAJA -- lekarz wpisuje tu opis ryzyka, a nie dwa slowa. */
.zz-panel{border:1px solid var(--kreska,#e5e7eb);border-radius:14px;padding:20px 22px;
  margin:0 0 16px;background:#fff;box-shadow:0 1px 2px rgba(17,24,39,.04),0 10px 26px -18px rgba(17,24,39,.25)}
.zz-panel > h3{margin:0 0 4px;font-size:17px;letter-spacing:-.2px}
.zz-panel > .zz-wstep{margin:0 0 16px;color:#6b7280;font-size:13.5px;line-height:1.5}
/* POLE SZUKANIA W PODPISANYCH ZGODACH. Bylo golym prostokatem na cala szerokosc, ze stylem
   wpisanym w atrybucie -- wygladalo jak pole na kwote, nie jak szukanie. */
.zp-szukaj-rzad{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.zp-szukaj{position:relative;flex:1 1 320px;max-width:460px}
.zp-szukaj-znak{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:14px;opacity:.55;pointer-events:none}
.zp-szukaj input{width:100%;padding:10px 36px 10px 36px;border:1px solid #d9d2c7;
  border-radius:10px;background:#fff;font-family:inherit;font-size:14.5px;color:#3f3a33}
.zp-szukaj input:focus{outline:none;border-color:#8a6d4f;box-shadow:0 0 0 3px rgba(138,109,79,.12)}
.zp-szukaj input::-webkit-search-cancel-button{display:none}
.zp-szukaj-kasuj{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;font-size:20px;line-height:1;color:#8a8378;cursor:pointer;
  padding:2px 7px;border-radius:7px}
.zp-szukaj-kasuj:hover{background:#efe9e0;color:#3f3a33}

/* ADRES DLA TABLETU -- do przepisania palcem na drugim urzadzeniu, wiec duzo wiekszy niz zwykly
   kod w tekscie i z odstepem miedzy znakami. */
.zz-adres{display:inline-block;background:#f6f2ea;border:1px solid #ddd5c8;border-radius:8px;
  padding:8px 14px;font-size:16px;letter-spacing:.02em;color:#3f3a33;word-break:break-all}

/* WYBOR ZABIEGU -- to jedyna decyzja na tym ekranie i ma tak wygladac (wlasciciel 27.08.2026:
   "zrob to pole ladniejsze estetycznie"). Wczesniej byla to zwykla lista rozwijana wsrod innych
   pol: napis "Wybierz zabieg" nad napisem "-- wybierz zabieg --", jedno pod drugim, dwa razy
   to samo. Teraz jest to jeden duzy kafel z wlasna strzalka i bez powtorzonego napisu. */
.zz-wybor{display:block;margin:0 0 20px;position:relative}
.zz-wybor select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:100%;font-size:17px;font-weight:600;color:#1c1a17;
  padding:16px 46px 16px 18px;border-radius:14px;cursor:pointer;
  border:1.5px solid #ddd6cc;
  background:linear-gradient(#fff,#fbf9f6);
  box-shadow:0 1px 2px rgba(28,26,23,.05)}
.zz-wybor select:hover{border-color:#c9bdae}
.zz-wybor select:focus{outline:none;border-color:#8a6d4f;box-shadow:0 0 0 3px rgba(138,109,79,.16)}
/* Wlasna strzalka -- systemowa w kazdej przegladarce wyglada inaczej i zwykle brzydko. */
.zz-wybor::after{content:"";position:absolute;right:20px;bottom:24px;width:10px;height:10px;
  border-right:2px solid #8a6d4f;border-bottom:2px solid #8a6d4f;
  transform:rotate(45deg);pointer-events:none}
.zz-wybor > span{display:block;margin:0 0 7px;font-size:12px;font-weight:700;color:#8a6d4f;
  letter-spacing:.8px;text-transform:uppercase}

/* ZDANIE OTWIERAJACE EKRAN. Nie jest to ostrzezenie ani podpowiedz, tylko zasada, wedlug ktorej
   ten ekran dziala -- wiec ma wygladac jak naglowek dokumentu, a nie jak szary drobny druk. */
.zz-naglowek{margin:0 0 18px;padding:0 0 0 14px;border-left:3px solid #8a6d4f;
  font-size:16px;line-height:1.5;color:#3f3a34;font-weight:500}

/* POZOSTALE POLA W TYM SAMYM JEZYKU (wlasciciel 27.08.2026: "to imie i nazwisko i pozostale pola
   tez tak zrob ladnie"). Ta sama etykieta drobnym drukiem, ten sam promien, ta sama ramka i to
   samo podswietlenie przy pisaniu -- zeby ekran wygladal na jeden dokument, a nie na zbior pol
   doklejanych po kolei. */
.zz-pole{display:block;margin:0 0 16px}
.zz-pole > span{display:block;margin:0 0 7px;font-size:12px;font-weight:700;color:#8a6d4f;
  letter-spacing:.8px;text-transform:uppercase}
.zz-pole input{width:100%;font-size:16.5px;color:#1c1a17;padding:14px 16px;border-radius:14px;
  border:1.5px solid #e3ddd4;background:#fcfbf9;box-shadow:0 1px 2px rgba(28,26,23,.04)}
.zz-pole textarea{width:100%;font:inherit;font-size:15px;color:#1c1a17;line-height:1.6;
  padding:13px 16px;border-radius:14px;border:1.5px solid #e3ddd4;background:#fcfbf9;
  box-shadow:0 1px 2px rgba(28,26,23,.04);resize:vertical}
.zz-pole textarea:hover{border-color:#d6cec2}
.zz-pole textarea:focus{outline:none;background:#fff;border-color:#8a6d4f;
  box-shadow:0 0 0 3px rgba(138,109,79,.14)}
.zz-pole input::placeholder,.zz-pole textarea::placeholder{color:#b0a89e;font-weight:400}
.zz-pole input:hover{border-color:#d6cec2}
.zz-pole input:focus{outline:none;background:#fff;border-color:#8a6d4f;
  box-shadow:0 0 0 3px rgba(138,109,79,.14)}
/* Nazwisko jest tu polem najwazniejszym -- od niego zalezy cala reszta, wiec dostaje wiecej wagi. */
.zz-pole.glowne input{font-size:19px;font-weight:600;padding:16px 18px}
/* Dwa pola obok siebie, ale na waskim ekranie jedno pod drugim. */
.zz-para{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.zz-para{grid-template-columns:1fr}}
/* Zdanie "Pacjent byl u nas..." -- pod polami, spokojne, bez krzyku. */
.zz-znalezione{margin:2px 0 0;padding:9px 12px;border-radius:10px;background:#f6f4f1;
  color:#6b6560;font-size:13.5px}
.zz-znalezione:empty{display:none}

/* Pola opisu: jedno pod drugim, z powietrzem. Wczesniej byly scisniete w dwie kolumny
   i opis ryzyka miescil sie w trzech linijkach. */
.zz-pola{display:block}
.zz-pola label{display:block;margin:0 0 16px}
.zz-pola label > span{display:block;margin:0 0 7px;font-size:12px;font-weight:700;color:#8a6d4f;
  letter-spacing:.8px;text-transform:uppercase}
.zz-pola textarea{display:block;width:100%;font:inherit;font-size:15px;color:#1c1a17;
  line-height:1.6;padding:13px 16px;border:1.5px solid #e3ddd4;border-radius:14px;
  background:#fcfbf9;box-shadow:0 1px 2px rgba(28,26,23,.04);resize:vertical}
.zz-pola textarea:hover{border-color:#d6cec2}
.zz-pola textarea:focus{outline:none;background:#fff;border-color:#8a6d4f;
  box-shadow:0 0 0 3px rgba(138,109,79,.14)}
.zz-wym{font-weight:600;font-size:10.5px;color:#b0a89e;letter-spacing:.5px}

/* Pasek zapisu opisu -- oddzielony kreska, zeby nie mylil sie z przyciskami wydruku. */
.zz-szablon-pasek{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between;border-top:1px dashed #e5e7eb;margin-top:4px;padding-top:14px}
.zz-zapisano{margin:10px 0 0;padding:9px 12px;border-radius:9px;background:#ecfdf5;
  border:1px solid #a7f3d0;color:#065f46;font-size:13.5px}

/* Kod dla tabletu -- to jedyna rzecz na tym ekranie, ktora czyta sie z odleglosci. */
.zz-kod{margin:8px 0 12px;font-size:40px;font-weight:700;letter-spacing:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#065f46}

/* Wzory do rysowania -- kafelki z podgladem, rowna wysokosc, bez rozjezdzania sie. */
.zz-wzory{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.zz-wzor{border:1px solid #e5e7eb;border-radius:12px;padding:12px;text-align:center;background:#fff}
.zz-wzor b{display:block;font-size:13.5px;margin-bottom:8px;color:#374151}
.zz-wzor img{width:100%;height:150px;object-fit:contain;background:#fafafa;border-radius:8px}
.zz-wzor .cem-actions-row{justify-content:center;margin-top:10px}

/* === PLAN REWITALIZACJI (wlasciciel 27.08.2026: "ma byc to zrobione ekskluzywnie, medycznie,
   wysokiej jakosci grafika"). Ten sam jezyk, co zgoda na zabieg -- lekarz przechodzi miedzy tymi
   ekranami w ciagu jednej wizyty i nie moga wygladac jak dwa rozne programy. */
.pr-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;
  margin-top:12px}
.pr-kafel{display:block;text-align:left;border:1.5px solid #e3ddd4;border-radius:14px;
  padding:15px 17px;background:linear-gradient(#fff,#fdfcfa);cursor:pointer;
  box-shadow:0 1px 2px rgba(28,26,23,.04);transition:border-color .12s,box-shadow .12s}
.pr-kafel:hover{border-color:#8a6d4f;box-shadow:0 6px 18px -10px rgba(138,109,79,.5)}
.pr-kafel b{display:block;font-size:16px;color:#1c1a17;margin-bottom:4px}
.pr-kafel span{display:block;font-size:12.5px;color:#8a8078}

/* Jedna pozycja planu -- karta z numerem, zeby przy szesciu zabiegach dalo sie je odroznic
   wzrokiem, a nie liczyc pola od gory. */
.pr-pozycja{border:1.5px solid #ece7e0;border-left:3px solid #8a6d4f;border-radius:14px;
  padding:16px 18px;margin:0 0 14px;background:#fdfcfa}
.pr-pozycja-glowa{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pr-numer{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;border:1.5px solid #8a6d4f;color:#8a6d4f;font-weight:700;font-size:14px}
.pr-pozycja .zz-pole{margin-bottom:12px}
.pr-pozycja .zz-pole:last-child{margin-bottom:0}

.pr-przelacznik{display:flex;align-items:center;gap:10px;margin:4px 0 0;font-size:14.5px;
  color:#3f3a34;cursor:pointer}
.pr-przelacznik input{width:18px;height:18px;accent-color:#8a6d4f}
.pr-suma{margin-left:auto;font-size:15px;color:#3f3a34}
.pr-suma b{font-size:17px;color:#1c1a17}

/* Uwagi do planu -- pole na cala szerokosc strony (wlasciciel 27.08.2026: "pole rozszerz na cala
   szerokosc"). Wpisuje sie tu zdania, a nie dwa slowa. */
.pr-uwagi{display:block;width:100%}
.pr-uwagi textarea{min-height:110px}

/* Kwota po znizce pod polami ceny -- lekarz ustala rabat i od razu widzi, co poda pacjentowi. */
.pr-po-znizce{margin:2px 0 0;font-size:14.5px;color:#3f3a34}
.pr-po-znizce:empty{display:none}
.pr-po-znizce b{font-size:16px;color:#1c1a17}
.pr-przed{margin-left:8px;color:#a09890;text-decoration:line-through;font-size:13px}

/* KALENDARZ ZABIEGU NA EKRANIE -- dwanascie miesiecy po cztery tygodnie. Male kratki, ale klikalne
   palcem: 22 px to minimum, ponizej ktorego trafia sie w sasiedni tydzien. */
.pr-kalendarz{margin:0 0 14px}
.pr-kal-tytul{display:block;margin:0 0 7px;font-size:12px;font-weight:700;color:#8a6d4f;
  letter-spacing:.8px;text-transform:uppercase}
.pr-kal-siatka{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
@media (max-width:820px){.pr-kal-siatka{grid-template-columns:repeat(6,1fr)}}
@media (max-width:460px){.pr-kal-siatka{grid-template-columns:repeat(4,1fr)}}
.pr-kal-miesiac{display:flex;flex-direction:column;align-items:center;gap:3px}
.pr-kal-miesiac > span{font-size:10.5px;font-weight:700;color:#8a8078;letter-spacing:.3px}
.pr-kal-tydz{width:100%;min-width:22px;height:22px;border:1.5px solid #e3ddd4;border-radius:6px;
  background:#fcfbf9;color:#b0a89e;font-size:11px;cursor:pointer;padding:0}
.pr-kal-tydz:hover{border-color:#c9bdae}
.pr-kal-tydz.zazn{background:#8a6d4f;border-color:#8a6d4f;color:#fff;font-weight:700}

/* PRZYPOMNIENIA -- licznik znakow SMS-a i wiersze po terminie. */
.pw-licznik{margin:0 0 12px;font-size:13.5px;color:#6b7280}
.pw-licznik b{color:#a3392f}
.pw-blad{display:block;margin-top:4px;font-size:12px;color:#a3392f}
.pw-po-terminie td{background:#fdf6f5}

/* KIEDY WYSLAC -- dwie kratki obok siebie. Moga byc zaznaczone obie: to wtedy dwa SMS-y. */
.pw-kiedy{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.pw-kratka{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid #d9d2c7;
  border-radius:10px;background:#fdfcfa;cursor:pointer;font-size:14px;user-select:none}
.pw-kratka:has(input:checked){border-color:#8a6d4f;background:#f6f1ea;font-weight:600}
.pw-kratka input{width:16px;height:16px;accent-color:#8a6d4f;cursor:pointer}

/* KTO PRZYPOMINA -- dwa centra jako kafelki. Pelna nazwa u gory, po co ono jest -- pod spodem,
   zeby wybor byl czytelny bez zastanawiania sie, ktore jest ktore. */
.pw-centra{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.pw-centra .pw-kratka{align-items:flex-start;padding:11px 15px;min-width:220px}
.pw-kratka span{display:flex;flex-direction:column;gap:2px;line-height:1.3}
/* KRATKA, KTORA JUZ SIE ZDARZYLA -- ten SMS istnieje, wiec nie ma czego zaznaczac. */
.pw-juz-jest{opacity:.72;cursor:default}
.pw-opis{color:#6b7280;font-size:12px;font-weight:400}
.pw-etykieta{margin:0 0 8px;font-size:13px;font-weight:600;color:#4b5563}

/* GOTOWE TEKSTY -- kafelki zamiast listy rozwijanej: wszystkie widac naraz, wybor to jeden klik. */
.pw-wzory{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.pw-wzor{padding:8px 14px;border:1px solid #d9d2c7;border-radius:999px;background:#fdfcfa;
  cursor:pointer;font-size:13.5px;color:#3f3a33;font-family:inherit}
.pw-wzor:hover{border-color:#b9a888;background:#f8f4ee}
.pw-wzor.wybrany{border-color:#8a6d4f;background:#8a6d4f;color:#fff;font-weight:600}

/* ILE KOSZTUJA SMS-Y -- trzy liczby obok siebie, kwota na wierzchu. */
.pw-koszt{display:flex;flex-wrap:wrap;gap:10px}
.pw-koszt-poz{flex:1 1 180px;border:1px solid #e2dbd0;border-radius:10px;padding:10px 14px;
  background:#fdfcfa;display:flex;flex-direction:column;gap:2px}
.pw-koszt-co{font-size:12.5px;color:#6b7280}
.pw-koszt-zl{font-size:19px;color:#3f3a33}

/* CENA JEDNEJ WIADOMOSCI -- pole na trzy cyfry, a nie na nazwisko. */
.pw-cena-rzad{display:flex;align-items:flex-end;gap:10px;margin:12px 0 10px;flex-wrap:wrap}
.pw-cena-pole{display:flex;flex-direction:column;gap:5px}
.pw-cena-pole>span{font-size:13px;color:#4b5563}
.pw-cena-wpis{display:inline-flex;align-items:center;gap:6px}
.pw-cena-wpis input{width:78px;padding:9px 10px;border:1px solid #d9d2c7;border-radius:9px;
  font-size:14px;font-family:inherit;text-align:right;background:#fff}
.pw-cena-wpis em{font-style:normal;font-size:13px;color:#6b7280}

/* CENNIK SMSAPI -- trzy stawki obok siebie, uzywana wyrozniona. */
.pw-cennik{display:flex;flex-wrap:wrap;gap:12px}
.pw-cennik .pw-cena-pole{flex:1 1 200px;border:1px solid #e2dbd0;border-radius:10px;
  padding:10px 12px;background:#fdfcfa}
.pw-cennik .pw-cena-pole.uzywany{border-color:#8a6d4f;background:#f6f1ea}

/* WLASNA LICZBA DNI -- pole na dwie cyfry wewnatrz kratki. */
.pw-ile{display:flex!important;flex-direction:row!important;align-items:center;gap:7px}
.pw-ile input{width:62px;padding:6px 8px;border:1px solid #d9d2c7;border-radius:8px;
  font-size:14px;font-family:inherit;text-align:right;background:#fff}

/* NEWSLETTER -- pacjent wykreslony z wysylki. Widac, ze jest na liscie, i widac, ze nie pojdzie. */
.nl-skreslony td{opacity:.45;text-decoration:line-through}
.nl-skreslony td:first-child{opacity:1;text-decoration:none}
/* BEZ KONTAKTU TO NIE TO SAMO, CO SKRESLONY: skreslonego pominales, ten czeka na numer. */
.nl-bez-kontaktu td{background:#fdf8f2}
.nl-brak{display:inline-block;background:#f6e2dc;color:#8a4b3a;border-radius:6px;
  padding:1px 7px;font-weight:600;font-size:12px}
.nl-uzupelnij{display:flex;gap:6px;margin-top:5px;align-items:center}
.nl-uzupelnij input{width:150px;padding:5px 8px;border:1px solid #d9d2c7;border-radius:7px;
  font-family:inherit;font-size:13px;background:#fff}
.nl-uzupelnij .cem-btn{padding:5px 10px;font-size:12.5px}

/* NEWSLETTER -- trzy kroki zamiast zakladek. Numer mowi, od czego zaczac. */
.nl-kroki{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.nl-krok{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #d9d2c7;
  border-radius:999px;background:#fdfcfa;cursor:pointer;font-size:14px;color:#4b5563;
  font-family:inherit}
.nl-krok b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:#e8e1d6;color:#6b5b45;font-size:12.5px}
.nl-krok.teraz{border-color:#8a6d4f;background:#f6f1ea;color:#3f3a33;font-weight:600}
.nl-krok.teraz b{background:#8a6d4f;color:#fff}

/* BANK MATERIALOW -- kazdy material jako kartka, zeby dalo sie je przegladac wzrokiem. */
.nl-material{border:1px solid #e2dbd0;border-radius:12px;padding:14px 16px;margin:0 0 12px;
  background:#fdfcfa}
.nl-material.odrzucony{opacity:.55}
.nl-material-gora{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.nl-material-tytul{margin:0 0 6px;font-weight:600;font-size:15.5px;color:#3f3a33}
.nl-material select{padding:8px 10px;border:1px solid #d9d2c7;border-radius:9px;
  font-family:inherit;font-size:13.5px;background:#fff}

/* PROGRAM SIE ZMIENIL -- pasek na dole, zeby nie zaslanial pracy, ale zeby go bylo widac.
   Zostaje do nacisniecia: znikniecie po chwili znaczyloby, ze kto nie patrzyl, dalej pracuje
   na starym kodzie. */
.cem-nowa-wersja{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#3f3a33;color:#fff;border-radius:12px;padding:14px 18px;font-size:14.5px;
  box-shadow:0 6px 24px rgba(0,0,0,.28)}
.cem-nowa-wersja button{background:#fff;color:#3f3a33;border:0;border-radius:9px;
  padding:9px 18px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.cem-nowa-wersja button:hover{background:#f0ece6}

/* GLOWNE PYTANIE NA KARCIE MATERIALU -- do ktorego numeru trafia. Reszta czynnosci schodzi
   pod nie i jest cichsza. */
.nl-mat-pytanie{margin:12px 0 6px;font-size:13.5px;font-weight:600;color:#3f3a33}
.nl-mat-miesiace .pw-wzor{padding:7px 14px;font-size:13.5px}
.nl-mat-drobne{gap:6px;padding-top:8px;border-top:1px solid #efe9e0}
.nl-mat-drobne .cem-btn{font-size:12.5px;padding:5px 11px}

/* MATERIAL WLASNIE ZAZNACZONY -- zostaje na ekranie, choc filtr juz go nie obejmuje. */
.nl-material.zaznaczony{border-color:#8a6d4f;box-shadow:0 0 0 2px #f0e7da}
.nl-mat-przeniesiony{margin:6px 0 0;font-size:12.5px;color:#6b5b45}

/* ILE WIZYT MA ZA SOBA -- liczby maja stac w jednej kolumnie, wiec cyfry o stalej szerokosci. */
.nl-wizyt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* NUMER PO KOLEI -- zeby bylo widac, ile osob jest na liscie, bez liczenia. */
.nl-lp{text-align:right;font-variant-numeric:tabular-nums;color:#8a8579}
.nl-ilu{margin:0 0 8px;font-size:14.5px}
/* KONTAKT JEST, ale ta droga zamknieta (brak zgody albo wykreslenie) -- numer widac, przygaszony. */
.nl-zamkniete{opacity:.72}
/* Z CZEGO POWSTANIE NUMER -- widac to przed nacisnieciem, a nie dopiero po. */
.nl-wejdzie{margin:0 0 12px;padding-left:22px;font-size:14px;line-height:1.7;color:#4a423a}

/* POROWNANIE Z WLASNA LISTA NAZWISK -- liczby, a pod nimi same nazwiska. */
.nl-porownanie{margin:14px 0 0;padding:14px 16px;background:#faf8f4;border:1px solid #e6e0d6;
  border-radius:10px;font-size:14.5px}
.nl-nazwiska{margin:0;font-size:13px;line-height:1.7;color:#6b5b45;max-height:190px;
  overflow-y:auto;word-break:break-word}

/* NUMER, KTORY JUZ POSZEDL DO LUDZI -- i slad po poprawkach zrobionych po wysylce. */
.nl-wydany{margin:0 0 14px;padding:10px 13px;border:1px solid #e0b4ae;background:#fdf6f5;
  border-radius:9px;font-size:14px;color:#7d2b23}
.nl-poprawiony{display:inline-block;padding:1px 8px;border-radius:999px;background:#f0ece5;
  color:#6b5b45;font-size:11.5px;font-weight:600;white-space:nowrap}

/* CO CZEKA NA NUMER -- miesiac po miesiacu: ile tematow i czy numer w ogole istnieje. */
.nl-stan-miesiecy{display:flex;flex-direction:column;gap:8px}
.nl-stan-wiersz{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#faf8f4;border:1px solid #e6e0d6;border-radius:9px;padding:10px 12px}
.nl-stan-nazwa{font-weight:700;color:#2f2a24;flex:0 0 130px}
.nl-stan-opis{flex:1 1 220px;font-size:13.5px;color:#6b5b45}

/* CO JUZ STOI W NUMERZE NA WYBRANY MIESIAC -- pasek nad lista banku. */
.nl-numer-miesiaca{background:#f6f2ea;border:1px solid #ddd5c8;border-radius:9px;
  padding:12px 14px;margin:0 0 14px;font-size:14px}

/* ILE RAZY ZDJECIE BYLO UZYTE -- przy jego karcie w banku. */
.nl-mat-uzycie{margin:10px 0 4px;font-size:13px;color:#6b7280}
.nl-mat-uzycie b{color:#3f3a33}

/* MIESIACE PRZY MATERIALE -- jedno klikniecie zamiast rozwijanej listy. Mniejsze niz kafelki
   przy skladaniu numeru, bo stoja przy kazdej pozycji banku. */
.nl-mat-miesiace{margin:0 0 4px}
.nl-mat-miesiace .pw-wzor{padding:5px 11px;font-size:12.5px}

/* SPRZATANIE BANKU -- ile miejsca zajmuja materialy, ktore juz zrobily swoje. */
.nl-sprzatanie{background:#faf8f4;border:1px solid #e6e0d6;border-radius:9px;
  padding:12px 14px;margin:12px 0 0;font-size:14px}

/* ARTYKUL W NUMERZE -- zwiniety do jednej linijki. Wlasciciel 29.08.2026: "strasznie trudno
   się to czyta, wszystko zlane ze sobą". Szesc artykulow rozwinietych naraz to kilka ekranow
   jednolitej scianki; zwiniete sa spisem tresci, po ktorym da sie przejsc wzrokiem. */
.nl-kawalek{background:#fdfcfa}
.nl-kawalek.zwiniety{padding-top:10px;padding-bottom:10px}
.nl-kawalek-glowa{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;
  flex-wrap:wrap}
.nl-kawalek-zwin{flex:1 1 260px;display:flex;align-items:flex-start;gap:10px;text-align:left;
  border:0;background:transparent;padding:0;cursor:pointer;font-family:inherit;color:inherit;
  min-width:0}
.nl-kawalek-nr{flex:0 0 26px;height:26px;border-radius:50%;background:#8a6d4f;color:#fff;
  font-size:13px;font-weight:700;line-height:26px;text-align:center;margin-top:1px}
.nl-kawalek-opis{display:flex;flex-direction:column;gap:2px;min-width:0}
.nl-kawalek-rubryka{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#8a6d4f;
  font-weight:700}
.nl-kawalek-tytul{font-size:15.5px;font-weight:600;color:#2f2a24;line-height:1.3}
.nl-kawalek-poczatek{font-size:13px;color:#6b7280;line-height:1.45}
.nl-kawalek-strzalka{color:#8a8378;font-size:13px;margin-left:6px;margin-top:4px}
.nl-kawalek-akcje{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nl-kawalek:not(.zwiniety) > .nl-kawalek-glowa{padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid #e6e0d6}

/* PROPOZYCJA AI -- ocena dowodow i ostrzezenia NAD tekstem, nie pod nim. */
.nl-propozycja{border:1px solid #d9d2c7;border-left:3px solid #8a6d4f;border-radius:10px;
  padding:12px 14px;margin:12px 0 0;background:#fff}
.nl-ostrzezenia{background:#fdf6f5;border:1px solid #e0b4ae;border-radius:9px;padding:9px 12px;
  margin:0 0 10px;font-size:13.5px}
.nl-ostrzezenia ul{margin:4px 0 0;padding-left:18px}
.nl-tekst{white-space:normal;font-size:14.5px;line-height:1.6;color:#3f3a33;
  background:#faf8f4;border-radius:9px;padding:12px 14px;margin-top:8px}

/* PRZENIESIENIE ARTYKULU DO INNEGO NUMERU -- otwiera sie pod naglowkiem kawalka. */
.nl-przenies{background:#f6f2ea;border:1px solid #ddd5c8;border-radius:9px;padding:10px 14px;
  margin:0 0 12px}

/* CO NAPRAWDE IDZIE W TEJ WYSYLCE -- tytuly artykulow wybranego numeru. */
.nl-co-idzie{background:#faf8f4;border:1px solid #e6e0d6;border-radius:9px;padding:10px 14px;
  margin:12px 0 0;font-size:14px}

/* BANK MATERIALOW ZWINIETY -- naglowek z licznikiem i przyciskiem w jednym rzedzie. */
.nl-bank-naglowek{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap}

/* PODGLAD NUMERU -- strona albo mail, telefon albo komputer.
   RAMKA TELEFONU MA STALE 390 px: to szerokosc zwyklego dzisiejszego telefonu. Podglad, ktory
   sam sie rozciaga do szerokosci ekranu, nie mowi nic o tym, co zobaczy pacjent w reku. */
.nl-przelacznik{display:inline-flex;gap:0;margin-right:10px}
.nl-przelacznik .cem-btn{border-radius:0;margin:0}
.nl-przelacznik .cem-btn:first-child{border-radius:8px 0 0 8px}
.nl-przelacznik .cem-btn:last-child{border-radius:0 8px 8px 0}
.nl-podglad-ramka{background:#f1ede6;border:1px solid #d9d2c7;border-radius:10px;padding:12px;
  display:flex;justify-content:center;overflow-x:auto}
.nl-podglad-ramka.telefon{padding:16px 12px}
.nl-podglad-okno{width:100%;height:620px;border:0;border-radius:8px;background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.12)}
.nl-podglad-ramka.telefon .nl-podglad-okno{width:390px;min-width:390px;height:680px;
  border-radius:18px}

/* WYBOR ZDJECIA -- miniatury z banku materialow, wybrane widac od razu. */
.nl-zdjecia{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.nl-zdjecie{width:88px;height:66px;padding:0;border:2px solid #d9d2c7;border-radius:9px;
  background:#fdfcfa;cursor:pointer;overflow:hidden;font-size:12px;color:#6b7280;
  font-family:inherit}
.nl-zdjecie img{width:100%;height:100%;object-fit:cover;display:block}
.nl-zdjecie.wybrane{border-color:#8a6d4f;box-shadow:0 0 0 2px #f0e7da}

/* GALERIA ZDJEC -- jedno miejsce na wszystkie zdjecia (wlasciciel 29.08.2026). Kafelki sa
   duze, bo tu sie WYBIERA zdjecie okiem, a nie odhacza pozycje na liscie. */
.nl-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.nl-galeria-kafel{border:1px solid #e2dbd0;border-radius:12px;background:#fdfcfa;padding:8px;
  display:flex;flex-direction:column}
.nl-galeria-kafel.wybrany{border-color:#8a6d4f;box-shadow:0 0 0 2px #f0e7da}
.nl-galeria-zdjecie{padding:0;border:0;background:none;cursor:pointer;display:block;
  border-radius:9px;overflow:hidden}
.nl-galeria-zdjecie img{width:100%;height:130px;object-fit:cover;display:block}
.nl-galeria-podpis{margin:8px 0 2px;font-size:13.5px;font-weight:600;line-height:1.3;
  word-break:break-word}
.nl-galeria-uzycie{margin:0;font-size:12px;color:#6b5b45}
.nl-galeria-uzycie.wolne{color:#8a8579}
.nl-galeria-akcje{margin-top:8px;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.nl-galeria-akcje .cem-btn{width:100%}

/* WYDANIA POGRUPOWANE PO MIESIACACH -- newsletter jako redakcja malego czasopisma. */
.nl-miesiac{border-left:3px solid #e2dbd0;padding:0 0 0 14px;margin:0 0 16px}
.nl-miesiac-nazwa{margin:0 0 6px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#8a6d4f;font-weight:700}
.nl-miesiac-wiersz{margin:0 0 6px;font-size:14.5px}

/* GENERATOR GRAFIKI -- pole opisu i przycisk, przy wyborze zdjecia. */
.nl-generator{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.nl-generator-pole{flex:1 1 260px;padding:9px 12px;border:1px solid #d9d2c7;border-radius:9px;
  font-family:inherit;font-size:14px;background:#fff}

/* WYBOR PLIKU -- systemowe pole jest ukryte, klika sie w etykiete wygladajaca jak przycisk
   programu. Pole zostaje w dokumencie, bo to ono niesie plik. */
.nl-plik{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nl-plik input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.nl-plik-przycisk{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  border:1px solid #d9d2c7;border-radius:10px;background:#fdfcfa;color:#3f3a33;font-size:14px;
  font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.nl-plik-przycisk::before{content:"↑";font-size:15px;color:#8a6d4f}
.nl-plik:hover .nl-plik-przycisk{border-color:#8a6d4f;background:#f6f1ea}
/* KLAWIATURA TEZ MA BYC WIDOCZNA -- kto chodzi tabem, musi wiedziec, gdzie stoi. */
.nl-plik input[type="file"]:focus-visible + .nl-plik-przycisk{border-color:#8a6d4f;
  box-shadow:0 0 0 3px #f0e7da}
.nl-plik-nazwa{font-size:13.5px;color:#8a8175}
.nl-plik-nazwa.jest{color:#3f3a33;font-weight:600}

/* ZWINIETY WYBOR ZDJECIA -- na wierzchu samo zdjecie i jeden przycisk. */
.nl-obraz-zwiniety{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.nl-obraz-podglad{width:96px;height:72px;object-fit:cover;border-radius:9px;
  border:1px solid #e2dbd0}

/* MOJE LISTY -- badania jako znaczki z krzyzykiem. */
.pw-znaczki{display:flex;flex-wrap:wrap;gap:8px}
.pw-znaczek{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:#f4f1ec;border:1px solid #e2dbd0;font-size:13px}
.pw-x{border:0;background:none;color:#a3392f;font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
.pw-x:hover{color:#7d2b23}
.pw-kiedy-znak{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:#f0ece5;color:#6b5b45;font-size:11px;font-weight:600;vertical-align:middle}

/* === TEN PACJENT MA COS OTWARTEGO ============================================================
   Pasek pod nazwiskiem w formularzu przychodu (public/js/views/income.js: rysujOtwarteSprawy).
   Wlasciciel 2.09.2026: recepcja ma WIEDZIEC przy ladzie, ze pacjent zaplacil z gory albo zalega
   -- bez zagladania do osobnych zakladek.

   DWA KOLORY, DWA ZNACZENIA: zielony = pieniadze JUZ SA (nie bierz drugi raz),
   pomaranczowy = pieniedzy BRAKUJE (wez zaplate). Nigdy jeden kolor na oba. */
.cem-otwarte-sprawy{display:flex;flex-direction:column;gap:8px;margin:-4px 0 14px}
.os-wiersz{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  border:1px solid var(--cem-border,#dcdfe4);border-left-width:4px;border-radius:8px;padding:10px 12px}
.os-wiersz b{display:block;font-size:14px;line-height:1.35}
.os-wiersz .cem-btn{flex:0 0 auto;white-space:nowrap}
.os-szczegol{font-size:12.5px;color:#5c6b73;line-height:1.45;margin-top:2px}
.os-zaplacone{border-left-color:#4a7c59;background:#f2f8f4}
.os-zaplacone b{color:#2f6b4f}
.os-dluzne{border-left-color:#b45309;background:#fffbeb}
.os-dluzne b{color:#92400e}
/* Zdanie przy wyzerowanej cenie -- stoi w wierszu uslugi, pod polami. */
.os-nota{flex:1 0 100%;margin:6px 0 0;font-size:12.5px;color:#2f6b4f;font-weight:600}
.os-przyciski{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.os-przyciski .cem-btn{white-space:nowrap}

/* Kurs waluty pod kwotą faktury z KSeF (views/ksefBezInfaktu.js: przeliczenieHtml).
   Wlasciciel 2.09.2026: "nie przelicza sie euro". Kwota glowna stoi w zlotowkach, a to zdanie
   mowi, skad sie wziela -- ile bylo na fakturze i po jakim kursie. */
.cem-inf-kurs{display:block;font-size:11.5px;color:#5c6b73;line-height:1.5}
.cem-inf-kurs.brak{color:#92400e;font-weight:600}