/* ============================================================================
   pk-modern.css — modern skin portalu (F-MODERN-UI, 2026-07-08)
   Nakładka CZYSTO WIZUALNA na istniejące style (Unify + Bootstrap 3 z Apache).
   Ładowana jako OSTATNI arkusz w genericScreen.jsp — nadpisuje kolory, cienie,
   promienie i typografię; nie zmienia layoutu ani markupu.
   Docelowo plik może przejść do Apache obok pozostałych styli (jedna ścieżka
   w genericScreen.jsp).
   ========================================================================== */

:root {
    --pk-ink: #1c2434;          /* podstawowy tekst */
    --pk-ink-soft: #5b6779;     /* tekst drugorzędny */
    --pk-bg-top: #f7f8fc;
    --pk-bg-bottom: #eef1f7;
    --pk-card: #ffffff;
    --pk-line: #e8ecf3;         /* hairline */
    --pk-red: #c8102e;          /* czerwień logo */
    --pk-red-deep: #8f1020;
    --pk-blue: #1a56db;         /* akcent akcji (dawny #337ab7) */
    --pk-blue-deep: #1544ad;
    --pk-green: #15803d;
    --pk-radius: 16px;
    --pk-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -14px rgba(16, 24, 40, .16);
    --pk-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 22px 44px -18px rgba(16, 24, 40, .24);
}

/* ----------------------------------------------------------------- tło + typografia */

body {
    background: linear-gradient(180deg, var(--pk-bg-top) 0%, var(--pk-bg-bottom) 100%) fixed;
    color: var(--pk-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Montserrat", "Open Sans", sans-serif;
    color: var(--pk-ink);
}

::selection { background: rgba(200, 16, 46, .16); }

/* delikatne wejście strony */
@media (prefers-reduced-motion: no-preference) {
    body { animation: pkFadeIn .35s ease-out; }
    @keyframes pkFadeIn {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: none; }
    }
}

/* ----------------------------------------------------------------- navbar */

/* ciemny zostaje (logo bialo-czerwone wymaga ciemnego tla), ale glęboki
   granat-ink zamiast czarno-szarego — spojny z niebieska paleta skorki */
.s-header-v2__navbar,
.s-header-v2 {
    /* ukosny: granat pod logo -> czern pod menu (ok. -30% vs #24345a/#33497d) */
    background: linear-gradient(115deg, #243459 0%, #182541 45%, #0a101f 100%) !important;
}

.s-header-v2 {
    border-bottom: 1px solid rgba(148, 163, 184, .14);
    box-shadow: 0 10px 30px -12px rgba(10, 14, 22, .55);
}

/* niebieska linia akcentu na gornej krawedzi paska */
.s-header-v2::before {
    content: "";
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    z-index: 1001; /* .s-header-v2__navbar ma z-index 1000 — linia musi byc nad nim */
    background: linear-gradient(90deg, #1e40af, #3b82f6 45%, #60a5fa);
}

/* linki: pigulkowy hover; ujemne marginesy kompensuja padding,
   zeby wysokosc paska (64px, fixed) nie drgnela */
.s-header-v2__nav-link {
    color: #f4f6fa !important;
    letter-spacing: .04em;
    padding: 8px 13px !important;
    margin: -8px -3px !important;
    border-radius: 10px;
    transition: color .18s ease, background .18s ease;
    position: relative;
}

.s-header-v2__nav-link:hover,
.s-header-v2__nav-link:focus,
.open > .s-header-v2__nav-link {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .12);
}

/* hover w nav: pigulka zamiast podkreslen (kreska ladowala w srodku tekstu) */

/* menu OPERACJE/ADMIN: biala karta jak pozostale dropdowny skorki
   (bylo: ciemny kanciasty panel motywu) */
.s-header-v2__dropdown-menu {
    background: #fff !important;
    border: 1px solid var(--pk-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px -18px rgba(10, 14, 22, .35) !important;
    padding: 6px !important;
    margin-top: 10px !important;
}

/* niewidzialny mostek POD li (wzor bee: .bee-nav__dd::after): odstep 10px
   miedzy paskiem a menu wypada poza li, wiec przejscie kursorem zrywalo
   :hover (menu otwierane przez .dropdown-on-hover:hover) i submenu znikalo.
   Mostek na LI istnieje zawsze — bez cyklicznej zaleznosci od display menu. */
.s-header-v2__dropdown-on-hover::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 14px;
}

.s-header-v2__dropdown-menu-link {
    color: #33415c !important;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}

.s-header-v2__dropdown-menu-link:hover,
.s-header-v2__dropdown-menu-link:focus {
    color: var(--pk-blue-deep) !important;
    background: #f3f6fc !important;
}

.s-header-v2__dropdown-menu-link .glyphicon { color: var(--pk-blue); }

.s-header-v2__dropdown-menu .divider { background: var(--pk-line) !important; }

/* ----------------------------------------------------------------- panele → karty */

.panel.panel-default {
    border: 0;
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.panel.panel-default:hover {
    box-shadow: var(--pk-shadow-hover);
}

/* karty tną zawartość do rogów (overflow:hidden) — otwarte menu dropdownu
   (np. filtr kategorii na liście wiadomości) było obcinane na krawędzi karty;
   na czas otwarcia (.open od bootstrapa) puszczamy overflow */
.panel:has(.open) {
    overflow: visible !important;
}

/* !important: stare style (styles/style.css z Apache) ustawiają szare tło nagłówka z !important,
   a część JSP ma inline padding (np. "Nowa wiadomość": padding:7px — nagłówek robił się mikry).
   :not(.note-toolbar) — summernote też używa klasy panel-heading (toolbar edytora). */
.panel.panel-default > .panel-heading:not(.note-toolbar),
.panel-heading.small-panel-heading,
.panel > .panel-heading:not(.note-toolbar) {
    background: #fff !important;
    border-bottom: 1px solid var(--pk-line) !important;
    color: var(--pk-ink) !important;
    padding: 13px 18px 12px 20px !important;
    position: relative;
    /* flow-root+clear: nagłówek nie nachodzi na niedomknięte floaty poprzednich sekcji.
       Bez tego pozycjonowane białe tło nagłówka PRZYKRYWAŁO treść (widok wiadomości:
       pasek "Klient: ..." z ikonami KSeF wyglądał jak wielka pusta dziura). */
    display: flow-root;
    clear: both;
}

/* widoki wielosekcyjne (np. Moje konto): jeden panel z wieloma nagłówkami w środku.
   Decyzja 2026-07-08: BEZ linii — sekcje rozbite wizualnie na OSOBNE KARTY z odstępem
   (tło strony widoczne między nimi). Panel-kontener przestaje być kartą, kartę tworzą
   pary nagłówek (góra, zaokrąglona) + body (dół, zaokrąglony). Wykrycie przez :has(). */
.panel.panel-default:has(> .panel-heading:not(:first-child):not(.note-toolbar)) {
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.panel.panel-default:has(> .panel-heading:not(:first-child):not(.note-toolbar)) > .panel-heading:not(.note-toolbar) {
    border-radius: var(--pk-radius) var(--pk-radius) 0 0;
    box-shadow: var(--pk-shadow);
}

.panel.panel-default:has(> .panel-heading:not(:first-child):not(.note-toolbar)) > .panel-heading:not(.note-toolbar):not(:first-child) {
    margin-top: 13px;
}

.panel.panel-default:has(> .panel-heading:not(:first-child):not(.note-toolbar)) > .panel-body {
    background: #fff;
    border-radius: 0 0 var(--pk-radius) var(--pk-radius);
    box-shadow: var(--pk-shadow);
}

/* toolbar summernote (markup: panel-heading wewnątrz .note-editor.panel.panel-default) */
.panel-heading.note-toolbar {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--pk-line) !important;
    padding: 8px 10px;
}

/* akcent: krótka niebieska belka z lewej strony nagłówka karty
   (decyzja 2026-07-08: jedna spójna kolorystyka paneli = niebieski jak FAKTURY;
   czerwień marki zostaje w logo/navbarze) */
.panel.panel-default > .panel-heading:not(.note-toolbar)::before {
    content: "";
    position: absolute;
    left: 0; top: 11px; bottom: 11px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #3b82f6, #1e40af);
}

.panel-heading .h4, .panel-heading .h5 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--pk-ink);
}

/* ikona nagłówka w miękkim niebieskim kwadracie (spójnie z belką) */
.panel-heading > .glyphicon,
.panel-heading span.glyphicon {
    color: #1d4ed8;
    background: rgba(29, 78, 216, .10);
    padding: 7px;
    border-radius: 9px;
    top: 0;
    vertical-align: middle;
}

/* --------------------------------------------------- dashboard: 4 panele homepage
   (rozpoznawane po ikonie nagłówka przez :has(); markup bez zmian) */

/* więcej powietrza w kartach dashboardu (kontra dla inline padding-top:3px z JSP) */
.panel.panel-default:has(> .panel-heading .glyphicon-envelope) > .panel-body,
.panel.panel-default:has(> .panel-heading .glyphicon-list-alt) > .panel-body,
.panel.panel-default:has(> .panel-heading .glyphicon-euro) > .panel-body,
.panel.panel-default:has(> .panel-heading .glyphicon-cog) > .panel-body {
    padding: 10px 16px 14px !important;
}

/* linki akcji na dole paneli ("wszystkie wiadomości", "nowa faktura"…) → dyskretne chipy */
.panel.panel-default .panel-body > .row.small a {
    display: inline-block;
    padding: 6px 14px;
    margin-top: 8px;
    border-radius: 999px;
    background: #f1f4fa;
    color: #33415c;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.panel.panel-default .panel-body > .row.small a:hover {
    background: rgba(29, 78, 216, .10);
    color: var(--pk-blue-deep);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .08);
}

/* pierwszy wiersz tabeli w karcie: bez border-top (dublował się z kreską nagłówka) */
.panel .table > tbody:first-child > tr:first-child > td,
.panel .table > tbody > tr:first-child > td {
    border-top: 0 !important;
}

/* wiersze wiadomości: akcent przy hoverze — niebieski, spójny z belką nagłówka karty */
.panel .table > tbody > tr[onclick]:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--pk-blue);
}

/* wiersze faktur na dashboardzie: to samo podświetlenie co wiadomości, ale bez pointera —
   w FV z dashboardu nie da się wejść (akcje tylko przez trybik), więc kursor zostaje domyślny.
   small-panel-heading odróżnia dashboard od strony listy faktur (tam zwykły panel-heading);
   :has(.btn-group) = tylko wiersze danych (z trybikiem), bez wiersza "Brak zapisanych faktur" */
.panel.panel-default:has(> .panel-heading.small-panel-heading .glyphicon-list-alt) .table > tbody > tr:has(.btn-group) {
    transition: background-color .15s ease;
    cursor: default;
}

.panel.panel-default:has(> .panel-heading.small-panel-heading .glyphicon-list-alt) .table > tbody > tr:has(.btn-group):hover {
    background-color: #f5f8fe;
}

.panel.panel-default:has(> .panel-heading.small-panel-heading .glyphicon-list-alt) .table > tbody > tr:has(.btn-group):hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--pk-blue);
}

/* sub-headery miesięcy na liście faktur: "lipiec (2 FV)"; !important + reguła :hover
   to kontra dla legacy .table-hover tbody tr:hover td {background:#e1e1e1 !important} */
.pk-month-subheader > td {
    background-color: #f7f9fc !important;
    color: #44506b;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.table-hover tbody tr.pk-month-subheader:hover > td {
    background-color: #f7f9fc !important;
}

.pk-month-subheader .pk-month-count {
    color: #8a94ad;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.pk-month-subheader .pk-month-count b {
    font-weight: 600;
    color: #44506b;
}

/* FV ze statusem "Faktura w KSeF": klik w wiersz otwiera podgląd PDF (jak w Moje faktury w KSeF),
   więc pointer — na dashboardzie (nadpisuje cursor:default powyżej) i na liście faktur */
.panel.panel-default:has(> .panel-heading.small-panel-heading .glyphicon-list-alt) .table > tbody > tr.ksef-preview-row:has(.btn-group),
.panel .table > tbody > tr.ksef-preview-row {
    cursor: pointer;
}

/* kontra dla pk_static/styles/style.css: `.table-hover tbody tr:hover td {background:#e1e1e1 !important}`
   malowało szare tło NA komórkach, kryjąc niebieskie podświetlenie wiersza (wiadomości/klienci na dashboardzie);
   listy na podstronach mają własną kontrę td-level (reguły fixedtable niżej) */
.panel:has(> .panel-heading.small-panel-heading) .table > tbody > tr:hover > td {
    background-color: transparent !important;
}

/* saldo: linia statusu pod kwotą ("Dziękujemy za terminowe regulowanie...") — lekki oddech od pigułki */
.panel.panel-default:has(> .panel-heading .glyphicon-euro) .panel-body .text-success.strong,
.panel.panel-default:has(> .panel-heading .glyphicon-euro) .panel-body .text-primary.strong,
.panel.panel-default:has(> .panel-heading .glyphicon-euro) .panel-body .text-danger.strong {
    display: inline-block;
    margin-top: 10px;
}

/* saldo: pigułka kwoty (zmniejszona — nachodziła na tekst obok) */
.panel.panel-default:has(> .panel-heading .glyphicon-euro) .label-pill {
    font-size: 13px !important;
    padding: .35em .85em;
    background: rgba(91, 103, 121, .10) !important;
    color: var(--pk-ink) !important;
    font-weight: 700;
}

/* ----------------------------------------------------------------- tabele w kartach */

.panel .table > tbody > tr > td,
.panel .table > thead > tr > th {
    border-color: #eef1f6 !important;
}

.panel .table > tbody > tr[onclick] { transition: background-color .15s ease; }

.table-hover > tbody > tr:hover,
.panel .table > tbody > tr[onclick]:hover {
    background-color: #f5f8fe !important;
}

/* ----------------------------------------------------------------- etykiety → pigułki */

.label {
    border-radius: 999px;
    font-weight: 600;
    padding: .35em .85em .35em;
    letter-spacing: .02em;
}

/* !important: kontra dla starych regul labeli z Apache */
.label-success { background: rgba(21, 128, 61, .12) !important; color: var(--pk-green) !important; }
.label-default { background: rgba(91, 103, 121, .14) !important; color: #46536a !important; }
.label-warning { background: rgba(180, 83, 9, .14) !important; color: #b45309 !important; }
.label-info    { background: rgba(3, 105, 161, .12) !important; color: #0369a1 !important; }
.label-danger  { background: rgba(200, 16, 46, .12) !important; color: #b3122c !important; }
.label-primary { background: rgba(29, 78, 216, .12) !important; color: #1d4ed8 !important; }

/* liczniki bootstrapa (np. Zapisano 47/47 na listach ksiąg) — miękko, spójnie z pigułkami */
.badge {
    background: rgba(29, 78, 216, .12);
    color: #1d4ed8;
    border-radius: 999px;
    font-weight: 600;
}

/* ----------------------------------------------------------------- przyciski */

.btn {
    border-radius: 10px;
    transition: background-color .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .18s ease;
}

.btn-default {
    border-color: #dfe5ee;
    color: #3b4657;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.btn-default:hover, .btn-default:focus {
    background: #f6f8fc;
    border-color: #c7d0de;
    color: var(--pk-ink);
    box-shadow: 0 3px 8px rgba(16, 24, 40, .10);
}

/* primary DOKŁADNIE w stylu chipów dashboardu ("wszystkie wiadomości"/"nowa wiadomość"):
   spoczynek jasnoszary, hover delikatny niebieski tint — BEZ pełnego wypełnienia
   (feedback 2026-07-08: mocne niebieskie tło na hover było za ostre) */
.btn-primary {
    background: #f1f4fa;
    /* ramka-wlosek: bez niej chip znika na tle strony (poza biala karta
       #f1f4fa == tlo strony) */
    border-color: #d9e1ee;
    color: #33415c;
    font-weight: 600;
    box-shadow: none;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:active:hover, .btn-primary:active:focus {
    background: rgba(29, 78, 216, .10);
    border-color: rgba(37, 99, 235, .25);
    color: var(--pk-blue-deep);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .08);
}

/* pozostałe kolory akcji w tym samym wzorcu (hover = głębszy tint, nie pełne wypełnienie) */
.btn-success {
    background: rgba(21, 128, 61, .10);
    border-color: transparent;
    color: var(--pk-green);
    font-weight: 600;
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
    background: rgba(21, 128, 61, .18);
    border-color: transparent;
    color: #115e2f;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .08);
}

.btn-danger {
    background: rgba(200, 16, 46, .10);
    border-color: transparent;
    color: #b3122c;
    font-weight: 600;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background: rgba(200, 16, 46, .18);
    border-color: transparent;
    color: #8f1020;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .08);
}

/* Ikonki-przyciski ZACHOWUJĄ ramki (decyzja 2026-07-08: ghost wycofany — chodziło
   wyłącznie o PODWÓJNĄ ramkę: chip ikony wewnątrz obramowanego przycisku, patrz niżej). */

/* ikony wewnątrz przycisków w nagłówkach kart NIE dostają niebieskiego kwadratu
   (reset chipa ikony nagłówka — np. zębatka przy "Faktury zakupowe") */
.panel-heading .btn .glyphicon {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
}

/* ----------------------------------------------------------------- linki */

a { color: var(--pk-blue); }
a:hover, a:focus { color: var(--pk-blue-deep); }

/* ----------------------------------------------------------------- dropdowny */

.dropdown-menu {
    border: 1px solid var(--pk-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px -16px rgba(16, 24, 40, .28);
    padding: 6px;
}

.dropdown-menu > li > a {
    border-radius: 8px;
    padding: 7px 12px;
    transition: background-color .14s ease;
}

.dropdown-menu > li > a:hover { background: #f3f6fc; }

.dropdown-menu .divider { background-color: var(--pk-line); }

/* ----------------------------------------------------------------- formularze */

.form-control {
    border-radius: 10px;
    border-color: #dfe5ee;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* input-groupy (szukajka, zakresy dat): zaokrąglone ZEWNĘTRZNE rogi grupy
   (bootstrap zostawia 4px/0 — niespójnie z resztą kontrolek) */
.input-group > .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn:first-child {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.input-group > .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn:last-child {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* pojedynczy przycisk w input-group (np. dropdown "Wszystkie wiadomości") — pełne rogi */
.input-group-btn:first-child:last-child > .btn {
    border-radius: 10px !important;
}

/* addony (lupa, kalendarz, od/do) — spójne z paletą zamiast szarego #eee */
.input-group-addon {
    background: #f1f4fa;
    border-color: #dfe5ee;
    color: #5b6779;
}

/* natywne selecty bez .form-control też z rogami */
select {
    border-radius: 10px;
}

/* ----------------------------------------------------------------- modale */

.modal-content {
    border: 0;
    border-radius: var(--pk-radius);
    box-shadow: 0 30px 70px -20px rgba(10, 14, 22, .5);
}

.modal-footer { border-top-color: var(--pk-line); }

/* nagłówek modala: bootstrap-dialog maluje płaski kolorowy pas (type-primary
   #428bca + biały tytuł) — zamiast tego nagłówek jak w kartach: biel, ciemny
   tytuł, niebieska belka z lewej, rogi spójne z .modal-content */
.modal-header {
    background: #eef3fb !important; /* jak naglowki Sprzedawca/Nabywca; TYLKO modale - karty zostaja biale */
    border-bottom: 1px solid #d3ddf0;
    padding: 14px 18px 13px 20px;
    position: relative;
    border-top-left-radius: var(--pk-radius) !important;
    border-top-right-radius: var(--pk-radius) !important;
}

.modal-header::before {
    content: "";
    display: block; /* bootstrapowy clearfix daje display:table -> wysokosc 0 przy top/bottom */
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #3b82f6, #1e40af);
}

.bootstrap-dialog .bootstrap-dialog-title,
.modal-header .modal-title {
    color: var(--pk-ink) !important;
    font-weight: 700;
}

/* ----------------------------------------------------------------- lista wiadomości
   Styl "wiersze-pastylki" (v2 po feedbacku: bez bieli na całość i bez pionowych akcentów):
   wiersze to oddzielone odstępem pastylki — przeczytane = normalny tekst,
   NIEPRZECZYTANE (tr.pk-msg-unread) = czarny + bold; bez bootstrapowego tr.success.
   fixedtable = tylko messageList. */

.table.fixedtable {
    background: transparent;
}

/* leciutkie zaokrąglenie tabel list (lista faktur/wiadomości + pozostałe tabele z nagłówkiem tr.info);
   border-radius jest ignorowany przy border-collapse:collapse — stąd separate (spacing 0 = wizualnie to samo);
   narożne komórki 7px (= 8px ramki minus 1px), żeby tło nagłówka nie wystawało z ramki */
.table.fixedtable,
.table:has(> tbody > tr.info) {
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 8px;
}

.table:has(> tbody > tr.info) > tbody > tr:first-child > td:first-child,
.table:has(> tbody > tr.info) > tbody > tr:first-child > th:first-child {
    border-top-left-radius: 7px;
}

.table:has(> tbody > tr.info) > tbody > tr:first-child > td:last-child,
.table:has(> tbody > tr.info) > tbody > tr:first-child > th:last-child {
    border-top-right-radius: 7px;
}

.table:has(> tbody > tr.info) > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: 7px;
}

.table:has(> tbody > tr.info) > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: 7px;
}

/* nagłówek kolumn: miękkie niebieskawe tło (nieprzezroczyste = kryje row-hover), mocniejsza
   dolna kreska. :has(tr.info) = ten sam wzorzec dla WSZYSTKICH list z takim nagłówkiem
   (lista faktur itd.) — spójnie z listą wiadomości */
.table.fixedtable > tbody > tr.info > td,
.table:has(> tbody > tr.info) > tbody > tr.info > td,
.table:has(> tbody > tr.info) > tbody > tr.info > th {
    background: #eef3fb !important;
    color: #4a5872 !important;
    font-weight: 700;
    letter-spacing: .07em;
    border: 0 !important;
    border-bottom: 2px solid #d3ddf0 !important;
    padding: 10px 8px !important;
}

/* kolumna kropki odczytu: szersza, żeby kropka + ikona nie siedziały na sobie */
.table.fixedtable > tbody > tr.info > td:first-child {
    width: 56px !important;
}

/* wiersze danych: czysta tabela z poziomym hairline */
.table.fixedtable > tbody > tr:not(.info) > td,
.table:has(> tbody > tr.info) > tbody > tr:not(.info) > td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #eef1f6 !important;
    padding: 10px 8px;
    vertical-align: middle;
}

/* NIEPRZECZYTANE: TYLKO czarny + bold. Nic innego — bez tła, bez kolorowania ikon/etykiet
   (feedback 2026-07-12: wcześniejsze wersje z tłem/akcentem/kolorowaniem ikon = za dużo
   niebieskiego i wizualny bałagan). PRZECZYTANE: bez żadnych zmian, naturalny wygląd. */
.table.fixedtable > tbody > tr.pk-msg-unread > td {
    color: #000 !important;
    font-weight: 700 !important;
}

/* hover TYLKO na wierszach danych (nagłówek ma nieprzezroczyste tło wyżej) */
.table.fixedtable > tbody > tr[onclick]:hover > td,
.table:has(> tbody > tr.info) > tbody > tr[onclick]:hover > td {
    background: #f3f6fc !important;
}

/* znacznik odczytu = gwiazdka jak na dashboardzie (feedback 2026-07-09: kropka ○/● była
   niespójna z gwiazdką na stronie głównej): nieprzeczytana = pełna niebieska gwiazdka,
   przeczytana = pusta wyblakła (utrzymuje wyrównanie kolumny i rozróżnialność jak dawna kropka) */
.table.fixedtable > tbody > tr:not(.info) > td:first-child {
    white-space: nowrap;
}

.table.fixedtable > tbody > tr:not(.info) > td:first-child::before {
    content: "\e007"; /* glyphicon-star-empty */
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    color: #c3ccdb;
    font-size: 12px;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -1px; /* wycentrowanie w pionie z ikonami typu wiadomości (glyphicony siedzą o oczko wyżej) */
}

.table.fixedtable > tbody > tr.pk-msg-unread > td:first-child::before {
    content: "\e006"; /* glyphicon-star */
    color: var(--pk-blue);
}

.table.fixedtable > tbody > tr.pk-msg-read > td:first-child::before {
    content: "\e007"; /* glyphicon-star-empty */
    color: #c3ccdb;
}

/* sub-headery miesięcy/nieodczytanych na liście wiadomości: fixedtable ma reguły td-level
   z !important (wyszarzenie przeczytanych, gwiazdka ::before) — kontra o wyższej specyficzności */
.table.fixedtable > tbody > tr.pk-month-subheader:not(.info) > td {
    background-color: #f7f9fc !important;
    color: #44506b !important;
}

.table.fixedtable > tbody > tr.pk-month-subheader:not(.info) > td:first-child::before {
    content: none;
}

/* gwiazdka nieprzeczytanej na dashboardzie: kolor z palety pk zamiast bootstrapowego text-primary */
.panel .table .glyphicon-star.text-primary {
    color: var(--pk-blue);
}

/* ikony statusu w liście — bez zmian koloru, naturalny rozmiar */
.table.fixedtable .glyphicon-envelope {
    font-size: 14px !important;
}

/* pigułki kategorii (JSP ma inline font-size:10px/weight:400) */
.table.fixedtable .label-pill {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .05em;
}

/* --------------------------------------------------- karty statusu (błąd / informacja / OK) */

/* fragmenty general/genericError|Info|OK: glossy PNG (error/info/ok.png) zastąpione glyphiconem
   w kapsule jak w nagłówkach kart dashboardu; wąska wycentrowana karta zamiast pustej płachty */
.pk-status-card {
    max-width: 860px;
    margin: 26px auto 40px;
}

.pk-status-card > .panel-heading .h5 {
    margin: 0 0 0 6px;
    display: inline-block;
    vertical-align: middle;
}

.pk-status-card > .panel-body {
    padding: 22px 24px 26px;
    font-size: 15px;
}

.pk-status-card--error > .panel-heading .glyphicon {
    color: #b3122c;
    background: rgba(200, 16, 46, .10);
}

.pk-status-card--ok > .panel-heading .glyphicon {
    color: var(--pk-green);
    background: rgba(21, 128, 61, .10);
}

/* belka akcentu nagłówka w kolorze statusu (bazowa niebieska: reguła panel-default wyżej) */
.panel.panel-default.pk-status-card--error > .panel-heading:not(.note-toolbar)::before {
    background: linear-gradient(180deg, #ef4444, #991b1b);
}

.panel.panel-default.pk-status-card--ok > .panel-heading:not(.note-toolbar)::before {
    background: linear-gradient(180deg, #22c55e, #166534);
}

/* ----------------------------------------------------------------- edytor faktur (KSeF) */

/* baza rozwijanych sekcji .ksef-panel: edytor faktur ma te reguły inline w ksefInvoiceSection.jsp,
   tu ta sama baza dla stron używających wzorca poza edytorem (np. edycja danych klienta) */
.ksef-panel > .panel-heading {
    cursor: pointer;
    padding: 8px 12px;
    background: #f5f5f5;
    border-color: #ddd;
    color: #333;
}

.ksef-panel .panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 14px;
}

.ksef-panel .section-chevron {
    transition: transform 0.2s ease;
    font-size: 12px;
}

.ksef-panel > .panel-heading.collapsed .section-chevron {
    transform: rotate(-90deg);
}

.ksef-panel > .panel-heading:not(.collapsed) .section-chevron {
    transform: rotate(0deg);
}

/* strona edytora (sekcje .ksef-panel): zewnętrzny panel przestaje być jedną białą płachtą —
   tytuł ekranu jako samodzielna karta, sekcje jako osobne karty na tle strony */
.panel.panel-default:has(.ksef-panel) {
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.panel.panel-default:has(.ksef-panel) > .panel-heading:not(.note-toolbar) {
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow);
    border-bottom: 0 !important;
    margin-bottom: 16px;
}

.panel.panel-default:has(.ksef-panel) > .panel-body {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

/* sekcje edytora (Dane podstawowe / Kontrahenci / Pozycje / Płatności...) jako karty */
.panel.ksef-panel {
    border: 0;
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow);
    overflow: hidden;
    background: #fff;
    margin-bottom: 16px;
}

.panel.ksef-panel > .panel-heading {
    position: relative;
}

.panel.ksef-panel > .panel-heading::before {
    content: "";
    position: absolute;
    left: 0; top: 11px; bottom: 11px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #3b82f6, #1e40af);
}

/* pod-karty sekcji (Sprzedawca / Nabywca): wyciszony tint zamiast kolejnej bieli */
.ksef-panel .panel.panel-info {
    background: #f8fafc;
    border: 1px solid var(--pk-line);
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
}

.ksef-panel .panel.panel-info > .panel-heading {
    background: #eef3fb !important;
    border-bottom: 1px solid #d3ddf0 !important;
    /* niski naglowek (~39px zamiast 61px): motyw daje spanowi .h5 display:block
       + margin 10px 0 - to on pompowal wysokosc */
    padding: 12px 18px 11px 20px !important;
}

.ksef-panel .panel.panel-info > .panel-heading .h5 {
    margin: 0 !important;
}

/* pasek akcji pod edytorem KSeF (edytor to przezroczysty wrapper — przyciski
   wisialy na tle strony): biala karta z podpowiedzia + przyciski */
.pk-actionbar {
    background: #fff;
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    flex-wrap: wrap;
}

.pk-actionbar__info {
    color: #5b6779;
    font-size: 13px;
}

.pk-actionbar__buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pk-actionbar__buttons .btn { min-width: 170px; }

/* ----------------------------------------------------------------- breadcrumb */

/* breadcrumb stoi NAD kartą, na tle strony (niezależnie od nagłówka) */
.pk-breadcrumb {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #8b96a8;
    padding: 2px 4px 8px;
}

.pk-breadcrumb a {
    color: var(--pk-blue);
    text-decoration: none;
}

.pk-breadcrumb a:hover {
    color: var(--pk-blue-deep);
    text-decoration: underline;
}

.pk-breadcrumb__sep {
    margin: 0 6px;
    color: #b9c2d0;
}

/* ----------------------------------------------------------------- szczegóły wiadomości */

/* karta szczegółów (panel-message, nie panel-default — nie łapała wyglądu karty) */
.panel.panel-message {
    border: 0;
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow);
    overflow: hidden;
    background: #fff;
}

/* nagłówek szczegółów (panel-message, nie panel-default — nie łapał belki):
   niebieska kreska z lewej przy wierszu tytułu, jak w innych nagłówkach */
.panel-message .panel-heading .row.valign {
    position: relative;
}

.panel-message .panel-heading .row.valign::before {
    content: "";
    display: block; /* bootstrapowy clearfix daje .row::before display:table — tabela nie rozciąga się z top/bottom */
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #3b82f6, #1e40af);
}

/* układ nagłówka: belka | "Wiadomość" | pigułka kategorii | tytuł — kolumny auto-width,
   żeby tytuł siedział zaraz za pigułką (bez dziury z col-md-2/col-md-10) */
.panel-message .panel-heading .row.valign > [class*="col"] {
    width: auto !important;
}

/* chip kategorii: TEKST zamiast ikonki (VAT / DOCHODOWY / ZUS / PŁATNOŚĆ...),
   pigułka jak na liście wiadomości; niebieski box .bg-info wyłączony */
.panel-message .row.valign .bg-info {
    background: transparent !important;
}

.panel-message .row.valign .bg-info .glyphicon {
    display: none;
}

.panel-message .row.valign .bg-info .left5 {
    display: inline-block;
    background: rgba(29, 78, 216, .10);
    color: var(--pk-blue-deep) !important;
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

/* bąbel treści (.msgblock ze starych styli: #f5f5f5 + ramka #ccc + radius 4) — spójnie
   z kartami; bez !important, żeby kolorowe warianty z inline bg (notatki, ostrzeżenia)
   zachowały swoje tła */
.msgblock {
    background-color: #f8fafc;
    border: 1px solid var(--pk-line);
    border-radius: 12px;
    padding: 14px 16px;
}

/* ----------------------------------------------------------------- welle (boxy statusów) */

.well, .well.well-sm {
    border-radius: 12px;
    border-color: var(--pk-line);
    background: #f8fafc;
    box-shadow: none;
}

/* zielone boxy statusów certyfikatów/uprawnień (JSP ma INLINE #dff0d8 — stąd [style*=…] i !important);
   feedback 2026-07-08: zieleń była za ostra i za duża */
.well[style*="dff0d8"] {
    background: rgba(21, 128, 61, .07) !important;
    border-color: rgba(21, 128, 61, .18) !important;
    color: #1f5133;
    padding: 9px 14px;
}

/* pomarańczowe/czerwone odpowiedniki (bootstrapowe inline kolory ostrzeżeń/błędów) */
.well[style*="fcf8e3"] {
    background: rgba(180, 83, 9, .07) !important;
    border-color: rgba(180, 83, 9, .20) !important;
    padding: 9px 14px;
}

.well[style*="f2dede"] {
    background: rgba(200, 16, 46, .06) !important;
    border-color: rgba(200, 16, 46, .18) !important;
    padding: 9px 14px;
}

/* ikony statusów w wellach: mniejsze niż inline 60px z JSP.
   TYLKO obrazki z inline height:60px (ikony certów) — .well img bez zawężenia
   zmniejszał też screenshoty pomocy KSeF (ksefHelp.php, klasa ksef-help-img)! */
.well img[style*="height: 60px"] {
    height: 38px !important;
    width: auto !important;
}

/* ----------------------------------------------------------------- lista faktur KSeF (ksefInvoiceList / ksefUserInvoiceList)
   10-12 kolumn musi zmieścić się w standardowym .container (~1170px) — strona zostaje
   przy szerokości reszty serwisu, a to DANE zawijają się do nowych wierszy.
   table-layout:fixed + jawne szerokości kolumn (suma = 100%) — tabela z definicji
   nie przekracza karty, auto-layout nie ma nic do "negocjowania". Każdy wariant
   strony ma inny zestaw kolumn, stąd klasa ksef-cols-* na <table> obok ksef-fixed.
   overflow-wrap:anywhere jest tu bezpieczny (przy fixed nie zeruje szerokości
   kolumny jak przy auto) i domyka tokeny bez spacji: nr faktury ze slashami,
   nr KSeF, długie nazwy firm. */
.ksef-fixed {
    table-layout: fixed;
    width: 100%;
}
.ksef-fixed > tbody > tr > td {
    overflow-wrap: anywhere;
}

/* biuro — zakupowe: # | 3 daty | nr | sprzedawca | nabywca | netto vat brutto | waluta | księgowanie */
.ksef-cols-office-purchase tr.info td:nth-child(1)  { width: 3%; }
.ksef-cols-office-purchase tr.info td:nth-child(2)  { width: 8%; }
.ksef-cols-office-purchase tr.info td:nth-child(3)  { width: 8%; }
.ksef-cols-office-purchase tr.info td:nth-child(4)  { width: 8%; }
.ksef-cols-office-purchase tr.info td:nth-child(5)  { width: 15%; }
.ksef-cols-office-purchase tr.info td:nth-child(6)  { width: 13%; }
.ksef-cols-office-purchase tr.info td:nth-child(7)  { width: 13%; }
.ksef-cols-office-purchase tr.info td:nth-child(8)  { width: 6.5%; }
.ksef-cols-office-purchase tr.info td:nth-child(9)  { width: 5.5%; }
.ksef-cols-office-purchase tr.info td:nth-child(10) { width: 6.5%; }
.ksef-cols-office-purchase tr.info td:nth-child(11) { width: 4.5%; }
.ksef-cols-office-purchase tr.info td:nth-child(12) { width: 9%; }

/* biuro — sprzedażowe: jak wyżej, bez księgowania */
.ksef-cols-office-sales tr.info td:nth-child(1)  { width: 3%; }
.ksef-cols-office-sales tr.info td:nth-child(2)  { width: 8.5%; }
.ksef-cols-office-sales tr.info td:nth-child(3)  { width: 8%; }
.ksef-cols-office-sales tr.info td:nth-child(4)  { width: 8%; }
.ksef-cols-office-sales tr.info td:nth-child(5)  { width: 17.5%; }
.ksef-cols-office-sales tr.info td:nth-child(6)  { width: 15%; }
.ksef-cols-office-sales tr.info td:nth-child(7)  { width: 15%; }
.ksef-cols-office-sales tr.info td:nth-child(8)  { width: 7%; }
.ksef-cols-office-sales tr.info td:nth-child(9)  { width: 6%; }
.ksef-cols-office-sales tr.info td:nth-child(10) { width: 7%; }
.ksef-cols-office-sales tr.info td:nth-child(11) { width: 5%; }

/* klient — zakupowe: bez nabywcy, z księgowaniem */
.ksef-cols-client-purchase tr.info td:nth-child(1)  { width: 3%; }
.ksef-cols-client-purchase tr.info td:nth-child(2)  { width: 8.5%; }
.ksef-cols-client-purchase tr.info td:nth-child(3)  { width: 8%; }
.ksef-cols-client-purchase tr.info td:nth-child(4)  { width: 8%; }
.ksef-cols-client-purchase tr.info td:nth-child(5)  { width: 16%; }
.ksef-cols-client-purchase tr.info td:nth-child(6)  { width: 18%; }
.ksef-cols-client-purchase tr.info td:nth-child(7)  { width: 7%; }
.ksef-cols-client-purchase tr.info td:nth-child(8)  { width: 6%; }
.ksef-cols-client-purchase tr.info td:nth-child(9)  { width: 7%; }
.ksef-cols-client-purchase tr.info td:nth-child(10) { width: 5%; }
.ksef-cols-client-purchase tr.info td:nth-child(11) { width: 13.5%; }

/* klient — sprzedażowe: bez sprzedawcy i księgowania */
.ksef-cols-client-sales tr.info td:nth-child(1)  { width: 3%; }
.ksef-cols-client-sales tr.info td:nth-child(2)  { width: 9%; }
.ksef-cols-client-sales tr.info td:nth-child(3)  { width: 8.5%; }
.ksef-cols-client-sales tr.info td:nth-child(4)  { width: 8.5%; }
.ksef-cols-client-sales tr.info td:nth-child(5)  { width: 17%; }
.ksef-cols-client-sales tr.info td:nth-child(6)  { width: 24%; }
.ksef-cols-client-sales tr.info td:nth-child(7)  { width: 8.5%; }
.ksef-cols-client-sales tr.info td:nth-child(8)  { width: 7%; }
.ksef-cols-client-sales tr.info td:nth-child(9)  { width: 8.5%; }
.ksef-cols-client-sales tr.info td:nth-child(10) { width: 6%; }

/* ----------------------------------------------------------------- pasek ikon KSeF */

/* marginesy +5px: wyrównanie krawędzi karty paska do krawędzi kart dashboardu
   (row ma bootstrapowy margines -15px, karty paneli zaczynają się 20px dalej) */
#ksefIconsPanel {
    background: var(--pk-card);
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow);
    padding: 7px 4px 5px;
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-bottom: 22px !important;
}

/* mniejsze, wyrównane ikony statusów (kontra inline height:50/60px z JSP) + mikro-hover */
#ksefIconsPanel img {
    height: 38px !important;
    width: auto !important;
    vertical-align: middle;
    transition: transform .16s ease, filter .16s ease;
}

#ksefIconsPanel a:hover img {
    transform: translateY(-1px) scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(16, 24, 40, .2));
}

#ksefIconsPanel .label { vertical-align: middle; }

/* link "Jak wystawiać faktury w KSeF" na dashboardzie: -30% (inline 28px/14px z JSP) */
#ksefIconsPanel a[href^="/ksefHelp.php"] .glyphicon {
    font-size: 20px !important;
}

#ksefIconsPanel a[href^="/ksefHelp.php"] span:not(.glyphicon) {
    font-size: 11px !important;
}

/* bootstrapowe kontekstowe .info w tabelach (nagłówek tabeli pozycji faktury,
   komórki SUMA w edytorach) — cyjan #d9edf7 → tint palety, spójny z nagłówkami
   subkart Sprzedawca/Nabywca i nagłówkami list */
.table > thead > tr.info > th,
.table > thead > tr.info > td,
.table > tbody > tr.info > th,
.table > tbody > tr.info > td,
.table > thead > tr > th.info,
.table > thead > tr > td.info,
.table > tbody > tr > th.info,
.table > tbody > tr > td.info {
    background-color: #eef3fb;
}

/* ----------------------------------------------------------------- gołe kontrolki w tabelach
   Macierz rozliczeń (editBook) i pokrewne: inputy/selecty/textarea BEZ .form-control
   (stary markup, natywny wygląd) — ubieramy jak .form-control, strażnik :not() nie rusza
   kontrolek już ostylowanych. */

.table-bordered td input[type="text"]:not(.form-control),
.table-bordered td textarea:not(.form-control) {
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
    padding: 4px 10px;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .18s ease, box-shadow .18s ease;
    color: inherit;
}

.table-bordered td select:not(.form-control) {
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
    padding: 4px 8px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.table-bordered td input[type="text"]:not(.form-control):focus,
.table-bordered td textarea:not(.form-control):focus,
.table-bordered td select:not(.form-control):focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    outline: none;
}

/* checkboxy/radia w całej appce w kolorze palety zamiast systemowego */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--pk-blue);
}

/* --- macierz rozliczeń: edytor inline (.pk-mx w editBook.jsp) ---
   wiersze label+kontrolka zamiast tekstu przetykanego <br> */

.pk-mx { max-width: 640px; }

.pk-mx__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 7px 0;
}

.pk-mx__row > label {
    margin: 0;
    font-weight: 400;
    color: #33415c;
    min-width: 230px;
}

.pk-mx__row > label.pk-mx__check {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.pk-mx__check input[type="checkbox"] { margin: 0; }

/* pole + jednostka (PLN, netto PLN, "do: data") jako nierozrywalna grupa */
.pk-mx__field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.pk-mx__section { margin-top: 16px; }

.pk-mx__section-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #7c8aa5;
    margin-bottom: 4px;
}

.pk-mx__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #5b6779;
    white-space: nowrap;
}

.pk-mx__divider::before,
.pk-mx__divider::after {
    content: "";
    height: 1px;
    background: var(--pk-line);
    flex: 1;
}

.pk-mx__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 10px 0 2px;
}

.pk-mx__actions--calc {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
}

.pk-mx__history {
    margin-top: 10px;
    color: #8b96a8;
    font-size: 12.5px;
}

.pk-mx__payments {
    color: #5b6779;
    font-size: 12.5px;
    line-height: 1.7;
}

.pk-mx__payments-note { margin-top: 6px; color: #8b96a8; }

/* ----------------------------------------------------------------- landing (welcome) */

/* zdjęcia luzem (mapa): miękki cień + delikatny lift na hover */
.img-responsive.img-rounded:not(article *) {
    border-radius: 14px;
    box-shadow: 0 10px 26px -14px rgba(10, 14, 22, .22);
    transition: transform .35s cubic-bezier(.2, .6, .25, 1), box-shadow .35s ease;
}

.img-responsive.img-rounded:not(article *):hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 22px 44px -18px rgba(10, 14, 22, .38);
}

/* 3 sekcje (Nowoczesne narzędzia / Kompleksowe usługi / Pomoc...):
   article = pełna karta, na hover karta lift a zdjęcie zoomuje WEWNĄTRZ
   kadru (overflow hidden przycina) — wzór z bateseyeexercises */
article:has(img.img-rounded) {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .05);
    border-radius: var(--pk-radius);
    overflow: hidden;
    box-shadow: var(--pk-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

article:has(img.img-rounded) img.img-rounded {
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    display: block;
    transition: transform .4s ease;
}

article:has(img.img-rounded) > div {
    box-shadow: none !important;
    position: relative;
    z-index: 1;
    background: #fff;
}

/* bez @media prefers-reduced-motion — na macOS z wlaczonym Reduce Motion
   hover bylby martwy (tak wlasnie bylo; bee ma te reguly bezwarunkowo) */
article:has(img.img-rounded):hover {
    transform: translateY(-5px);
    box-shadow: var(--pk-shadow-hover);
}

article:has(img.img-rounded):hover img.img-rounded {
    transform: scale(1.05);
}

/* ----------------------------------------------------------------- footer */

footer, .g-bg-color--dark {
    background: #14161c !important;
}

/* ----------------------------------------------------------------- scrollbar + focus */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #c7cfdc;
    border-radius: 999px;
    border: 2px solid var(--pk-bg-bottom);
}
::-webkit-scrollbar-thumb:hover { background: #aab5c7; }

:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .55);
    outline-offset: 1px;
}

/* zaznaczenie tekstu: theme/red.css daje czerwone tło + biały tekst (sprany,
   nieczytelny róż — m.in. selekcje ustawiane przez JS w inputach edytorów);
   zamiast tego miękki niebieski, tekst zostaje w swoim kolorze */
::selection {
    background: rgba(37, 99, 235, .22);
    color: currentColor;
    text-shadow: none;
}

::-moz-selection {
    background: rgba(37, 99, 235, .22);
    color: currentColor;
    text-shadow: none;
}

/* ----------------------------------------------------------------- cennik.php: karty pakietów
   Scope przez :has(panel-primary + panel-success w kolumnach col-md-4) — ta kombinacja
   występuje tylko na cenniku. Równe wysokości kart (flex), cena przypięta do dołu,
   lekki lift na hover, kolorowy akcent na górnej krawędzi karty. */
.panel-body:has(> .col-md-4 > .panel-primary):has(> .col-md-4 > .panel-success) {
    display: flex;
    flex-wrap: wrap;
}

.panel-body:has(> .col-md-4 > .panel-primary):has(> .col-md-4 > .panel-success) > .col-md-4 {
    display: flex;
}

.panel-body:has(> .col-md-4 > .panel-primary):has(> .col-md-4 > .panel-success) > .col-md-4 > .panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.panel-body:has(> .col-md-4 > .panel-primary):has(> .col-md-4 > .panel-success) > .col-md-4 > .panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(26, 86, 219, .14);
}

.panel-body:has(> .col-md-4 > .panel-primary):has(> .col-md-4 > .panel-success) > .col-md-4 > .panel-primary {
    border-top: 3px solid var(--pk-blue);
}

.panel-body:has(> .col-md-4 > .panel-primary):has(> .col-md-4 > .panel-success) > .col-md-4 > .panel-success {
    border-top: 3px solid var(--pk-green);
}

.panel-body:has(> .col-md-4 > .panel-primary):has(> .col-md-4 > .panel-success) > .col-md-4 > .panel > .panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.panel-body:has(> .col-md-4 > .panel-primary):has(> .col-md-4 > .panel-success) > .col-md-4 > .panel > .panel-body > .row {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* blok z ceną / CTA zawsze na dole karty, niezależnie od długości opisu */
.panel-body:has(> .col-md-4 > .panel-primary):has(> .col-md-4 > .panel-success) > .col-md-4 > .panel > .panel-body > .row > div:last-child {
    margin-top: auto;
    padding-bottom: 6px;
}

/* opis pakietu: wycentrowany, wyciszony (span.h5 jest inline — text-center z JSP nie działał) */
.panel-body:has(> .col-md-4 > .panel-primary):has(> .col-md-4 > .panel-success) > .col-md-4 .panel-body span.h5 {
    display: block;
    text-align: center;
    color: #5b6579;
}

/* ----------------------------------------------------------------- logowanie: plakietka SSL
   surowy <img> z pk_static — ubieramy w miękką kartę i centrujemy w pionie względem formularza */
.panel-body > .row:has(> div > img[alt="ssl security"]) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

img[alt="ssl security"] {
    border-radius: 14px;
    border: 1px solid var(--pk-line);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
    transition: transform .18s ease, box-shadow .18s ease;
}

img[alt="ssl security"]:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .15);
}