.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}
.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}
.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}
.cem-btn{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:7px 11px;font:inherit;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}
.cem-btn:hover{background:#f8fafc;border-color:#c7d2fe}
.cem-btn.primary{background:#2563eb;color:#fff;border-color:#2563eb}
.cem-btn.primary:hover{background:#1d4ed8;border-color:#1d4ed8}
.cem-btn:disabled{cursor:default;opacity:.55}
.cem-btn.primary:disabled{background:#cbd5e1;border-color:#cbd5e1;color:#64748b;opacity:1}
.cem-btn.primary:disabled:hover{background:#cbd5e1;border-color:#cbd5e1}
.cem-btn.danger{color:#b91c1c;border-color:#fecaca;background:#fff7f7}
.cem-btn.danger:hover{background:#fef2f2;border-color:#fca5a5}
.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}

.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}

/* 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}

.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}
  .cem-income-line{grid-template-columns:1fr 1fr auto}
  .cem-income-line > label:first-child{grid-column:1 / -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)}
.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}
.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:9px}
.cem-income-line{display:grid;
  grid-template-columns:minmax(0,2.6fr) 1fr .9fr .9fr 1.1fr .9fr auto;gap:8px;align-items: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}

/* === 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}

.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}
.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}
/* 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. */
.bv-tabela-otoczka{overflow-x:auto;overflow-y:auto;max-width:100%;max-height:70vh}
.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"). */
.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}

/* 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. */
.cem-kontakt-potwierdz{display:flex;align-items:flex-start;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-top:2px;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}

/* === 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}
button.al-brak-kosztu{border:1px solid #dc2626;background:#fff;color:#b91c1c;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:#dc2626;color:#fff}
.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. */
.al-olowek{width:34px;text-align:center}
.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}