/* ============================================
   LFR System Aplikacyjny — Global Styles
   Bootstrap 5 clean
   ============================================ */

/* --- Typography --- */
html {
    min-height: 100%;
}

body {
    min-height: 100%;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    color: #333;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* --- Form fields: labels above, small & uppercase --- */
.form-label,
label.form-label,
.mb-3 > label,
form label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    margin-bottom: 0.15rem;
    text-align: left;
}

.form-control,
.form-select {
    font-size: 0.875rem;
    border-radius: 0.25rem;
    border: 1px solid #dee2e6;
    padding: 0.375rem 0.65rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
}

.form-check-label {
    font-size: 0.8rem;
    text-transform: none;
    font-weight: normal;
    color: #333;
}

/* Bootstrap 5 form layout generuje mb-3 na każdym polu — zmniejszamy */
.mb-3 {
    margin-bottom: 0.35rem !important;
}

/* --- Layout --- */
.container-frnt {
    max-width: 95%;
    padding: 0 !important;
    margin-left: auto;
    margin-right: auto;
    background-color: #f8f9fa;
    border: none !important;
    border-radius: 6px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.12);
    overflow: visible;
}

.container-frnt .page-content {
    padding: 0 25px 20px 25px;
}

.mh100 {
    min-height: 90vh;
    padding-top: 70px;
}

/* --- Section headers --- */
.section-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    padding: 0.4rem 0.6rem;
    margin-bottom: 1rem;
    background-color: #f0f1f3;
    border-radius: 3px;
    border-bottom: none;
}

.section-header i {
    color: #0d6efd;
}

/* --- Page header --- */
.page-header {
    display: flex;
    align-items: center;
    /* naglowek moze niesc trzeci element (np. przyciski trybow listy wnioskow) -
       na waskim ekranie ma sie zawinac pod tytul, a nie wejsc na niego */
    flex-wrap: wrap;
    row-gap: 8px;
    background-color: #e9ecef;
    padding: 12px 25px !important;
    margin: 0 0 0.25rem 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.container-frnt > .page-header:first-child {
    border-radius: 6px 6px 0 0 !important;
}

.page-header .icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #d5dbe1;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 1.1rem;
}

.page-header h4 {
    margin: 0;
    font-weight: 700;
    font-size: 1.15rem;
    color: #212529;
}

.page-header small {
    color: #6c757d;
    font-size: 0.78rem;
}

/* --- Buttons --- */
.btn {
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.btn-sm {
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
}

/* --- Nav tabs --- */
.nav-tabs .nav-link.active {
    font-weight: 700;
    border-bottom: 2px solid #0d6efd;
    background-color: #fff;
}

.nav-tabs .nav-link {
    color: #495057;
    font-size: 0.85rem;
}

.tab-content {
    background-color: #fff;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

/* White panel below tabs */
.tab-panel-white {
    background-color: #fff;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

/* --- Tables --- */
table.table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

table.table td {
    font-size: 0.83rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    vertical-align: middle;
}

table.table-hover tbody tr:hover {
    background-color: #f0f4ff;
}

/* --- Badges --- */
.badge {
    font-weight: 500;
    font-size: 0.72rem;
    padding: 0.3em 0.6em;
    border-radius: 0.25rem;
}

.badge-outline-info    { border: 1px solid #0dcaf0; background: #fff; color: #0dcaf0; }
.badge-outline-success { border: 1px solid #198754; background: #fff; color: #198754; }
.badge-outline-danger  { border: 1px solid #dc3545; background: #fff; color: #dc3545; }
.badge-outline-warning { border: 1px solid #ffc107; background: #fff; color: #856404; }
.badge-outline-dark    { border: 1px solid #212529; background: #fff; color: #212529; }

.badge.bg-light {
    color: #6c757d !important;
    border: 1px solid #dee2e6;
}

/* Bylo #1a3a5c (ciemny granat) - plakietka wygladala na czarna i zlewala sie
   z bg-dark na tej samej skali statusow. Zostaje bootstrapowy cyjan, czytelnosc
   zalatwia ciemny tekst.
   Zapis przez rgba(--bs-info-rgb, --bs-bg-opacity) zamiast twardego hexa - inaczej
   utility .bg-opacity-* nie zadziala. Fallback ", 1" jest obowiazkowy: poza
   miejscami, ktore jawnie ustawiaja --bs-bg-opacity, kolor by zniknal. */
.badge.bg-info {
    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
    color: #212529 !important;
}

/* --- Cards --- */
.card {
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

/* --- Accordion: plakietka statusu przy prawej krawedzi naglowka ---
   Bylo `position: absolute; left: 280px; width: 140px` - staly odstep dobrany pod
   krotkie tytuly ("I. Dane wnioskodawcy"). Po zmianie nazw sekcji na dluzsze
   ("Czesc I: Dane osobowe wnioskodawcy") tytul wchodzil pod plakietke.

   Teraz plakietka jest zwyklym elementem flexa i sama odsuwa sie na prawo,
   niezaleznie od dlugosci tytulu - nie trzeba dobierac zadnej liczby. */
#wniosekAccordion .accordion-button {
    flex-wrap: wrap;      /* na waskim ekranie plakietka schodzi pod tytul */
    gap: 0.35rem;
}

#wniosekAccordion .accordion-button .badge {
    margin-left: auto;    /* dopycha plakietke do prawej krawedzi */
    flex-shrink: 0;
    white-space: nowrap;
}

/* Strzalka accordionu tez ma `margin-left: auto`. Bez tego wolna przestrzen
   dzielilaby sie miedzy nia a plakietke i badge zawisalby w polowie naglowka. */
#wniosekAccordion .accordion-button::after {
    margin-left: 0.75rem;
}
/* Byla tu regula mobilna wylaczajaca pozycjonowanie absolutne plakietki
   na waskim ekranie. Niepotrzebna - zalatwia to flex-wrap na naglowku. */

/* --- Etap accordion (wniosek/show) — admin "zaakceptuj" badge --- */
#accordionEx .accordion-header {
    position: relative;
}
#accordionEx .accordion-header > a.badge,
#accordionEx .accordion-header > span.badge {
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    left: auto !important;
    transform: translateY(-50%);
    z-index: 5;
    text-decoration: none;
    padding: 0.45em 0.75em;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* --- Notatka na liscie wnioskow: ikona + popover (wniosek/indexAll) --- */
.notatka-ikona {
    color: #e0a800;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}

.notatka-ikona:hover { color: #a87c00; }

/* Bootstrap 5.3 buduje popover na zmiennych CSS - podmiana samych zmiennych
   koloruje tez strzalke, bez nadpisywania regul .popover-arrow */
.popover-notatka {
    --bs-popover-max-width: 340px;
    --bs-popover-bg: #fff8b8;
    --bs-popover-border-color: #e6d47a;
}

/* Krzyzyk zamykajacy - doklejany z JS, bo popover nie ma naglowka */
.popover-notatka .notatka-zamknij {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
    width: 0.6rem;
    height: 0.6rem;
    padding: 0;
    opacity: 0.5;
}

.popover-notatka .notatka-zamknij:hover { opacity: 1; }

.popover-notatka .popover-body {
    /* zapas z prawej, zeby tekst nie wchodzil pod krzyzyk */
    padding-right: 1.4rem;
    /* pre-wrap, bo tresc wstawiamy jako czysty tekst (html: false) i lamania
       linii z pola notatki musza zostac zachowane */
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #4a4327;
}

/* --- Notatka administratora: przyklejona karteczka (wniosek/show_v2) ---
   Domyslnie w normalnym przeplywie pod akordeonem. Po przeciagnieciu JS ustawia
   position: fixed i wspolrzedne - stad reguly dla obu stanow. */
.notatka-karteczka {
    width: 260px;
    margin: 1rem 0 0 0;
    background: #fff8b8;
    border: 1px solid #e6d47a;
    border-radius: 2px;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.18);
    font-size: 0.8rem;
    color: #4a4327;
    /* lekki obrot - karteczka ma wygladac na przyklejona, nie wklejona */
    transform: rotate(-2.5deg);
}

/* Po przeciagnieciu: wyrwana z przeplywu, zawsze nad trescia */
.notatka-karteczka.notatka-przypieta {
    position: fixed;
    margin: 0;
    z-index: 1030;
}

/* W trakcie przeciagania - bez obrotu i bez animacji, zeby kursor trzymal sie rogu */
.notatka-karteczka.notatka-przenoszona {
    transform: none;
    box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.28);
    user-select: none;
}

.notatka-uchwyt {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.4rem;
    background: rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid #e6d47a;
    cursor: grab;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b6033;
}

.notatka-uchwyt:active { cursor: grabbing; }

.notatka-tytul { flex-grow: 1; font-weight: 700; }

.notatka-reset {
    border: none;
    background: none;
    padding: 0;
    line-height: 1;
    color: #6b6033;
    opacity: 0.55;
    cursor: pointer;
}

.notatka-reset:hover { opacity: 1; }

.notatka-tresc {
    padding: 0.5rem 0.6rem;
    max-height: 340px;
    overflow-y: auto;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

.notatka-edytuj {
    display: block;
    padding: 0 0.6rem 0.45rem 0.6rem;
    font-size: 0.68rem;
    color: #6b6033;
    text-decoration: none;
}

.notatka-edytuj:hover { color: #000; text-decoration: underline; }

@media print {
    .notatka-karteczka { display: none !important; }
}

/* --- Helpers --- */
.text-shadow  { text-shadow: 1px 1px 2px rgba(150,150,150,0.4); }
.bb-1         { border-bottom: 1px solid #e9ecef; }
.help-block   { font-size: 0.72rem; font-style: italic; color: #6c757d; }
.mikro-label  { font-size: 0.68rem; font-style: italic; color: #6c757d; margin-top: -4px; }

/* --- Width utilities --- */
.w-1  { width:  1% !important; }
.w-2  { width:  2% !important; }
.w-3  { width:  3% !important; }
.w-5  { width:  5% !important; }
/* .w-7 bylo uzywane w indexAll i export/index (kolumna DataOceny), ale nigdy
   niezdefiniowane - czyli nie robilo nic. Definicja domyka te dwa miejsca. */
.w-7  { width:  7% !important; }
.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }

/* --- Hover wiersza: prowadzenie wzroku (WSZYSTKIE tabele) ---
   Dziala niezaleznie od klasy .table-hover, ktorej wiekszosc tabel w systemie
   nie ma.

   Celujemy w KOMORKI (`tr:hover > *`), nie w wiersz: Bootstrap 5.3 maluje tla
   selektorem `.table > :not(caption) > * > *`, wiec tlo ustawione na <tr>
   zostaloby przykryte przez komorki.

   Czerwona linia przez box-shadow, a nie border-bottom - zmiana grubosci ramki
   przy hoverze przesuwalaby wiersze i tabela by "skakala".

   Bez !important: reguly z `!important` (np. `table.wsparcieinfo tr`) maja
   wygrac, podobnie jak inline style kolumny BUR na liscie wnioskow - dzieki
   temu na hoverze nie gubimy koloru statusu z Jaspera. */
table.table tbody tr:hover > * {
    background-color: #eceff1;
    box-shadow: inset 0 -1px 0 0 #dc3545;
}

/* --- DataTables --- */
table.dataTable {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    border-collapse: collapse !important;
}

.buttons-html5 {
    background-color: #0d6efd !important;
    border: none;
    padding: 4px 12px !important;
    font-size: 0.75rem;
}

/* --- dane-tabela / wsparcieinfo --- */
.dane-tabela th,
.dane-tabela td { padding: 1px 5px !important; }

/* UWAGA na specyficznosc: globalne `table.table th` to klasa + 2 elementy, wiec
   `.dane-tabela th` (klasa + 1 element) przegralo z nim bez wzgledu na kolejnosc
   w pliku i etykiety wierszy wychodzily kapitalikami. Musi byc `table.dane-tabela th`.
   W tabelach danych <th> to etykieta wiersza, nie naglowek kolumny. */
table.dane-tabela th {
    font-weight: 700;
    text-transform: none !important;
    letter-spacing: normal;
    font-size: 0.83rem;
    color: #212529;
}

/* vertical-align nie jest dziedziczone - .align-middle na <table> opiera sie
   na `vertical-align: inherit` w tbody, co jest kruche */
table.dane-tabela td { vertical-align: middle; }

table.wsparcieinfo tr td:first-child { font-weight: 700; width: 50%; }
table.wsparcieinfo tr { background-color: #f1f3f5 !important; }

/* Wiersze sekcji (bg-light + colspan) - bylo prawie biale i zlewalo sie
   z wierszami danych. !important, bo Bootstrap maluje tlo komorek selektorem
   `.table > :not(caption) > * > *`, ktory bije pojedyncza klase. */
table.wsparcieinfo td.bg-light,
table.dane-tabela td.bg-light {
    background-color: #ced4da !important;
    color: #212529 !important;
    font-weight: 700;
}

/* --- Micro fonts --- */
table.micro-fonts td,
table.micro-fonts th { font-size: 0.65rem !important; color: #333; }
td.micro-fonts       { font-size: 0.6rem !important; }

/* takze jako samodzielna klasa - <span class="micro-fonts">, <p class="micro-fonts"> */
.micro-fonts { font-size: 0.65rem; }

/* --- small-fonts / font-smaller ---
   Klasy odziedziczone po MDB: uzywane w kilkudziesieciu szablonach, ale nigdy
   niezdefiniowane - nie rzucaly bledu, po prostu nic nie robily. Stad inline
   font-size rozsiane po tabelach. */
table.small-fonts td,
table.small-fonts th { font-size: 0.76rem; }
.small-fonts         { font-size: 0.76rem; }

table.font-smaller td,
table.font-smaller th { font-size: 0.72rem; }
.font-smaller         { font-size: 0.72rem; }

/* --- note-* / gi-bglight ---
   Podswietlenie komorki lub wiersza. Konwersja BS4->BS5 objela tylko postac
   `note note-X`; samodzielne zostaly bez definicji.
   !important, bo Bootstrap maluje tlo komorek przez
   `.table > :not(caption) > * > *`, co bije pojedyncza klase. */
.note-success { background-color: #d1e7dd !important; }
.note-danger  { background-color: #f8d7da !important; }
.note-warning { background-color: #fff3cd !important; }
.note-info    { background-color: #cff4fc !important; }
.gi-bglight   { background-color: #e9ecef !important; }

/* Na <tr> samo tlo wiersza nie wystarczy: w BS 5.3 komorki dostaja wlasne
   nieprzezroczyste tlo (`--bs-table-bg`) plus box-shadow z paskowania
   (`--bs-table-bg-type`), wiec przykrywaja wiersz. Trzeba pomalowac komorki
   i zgasic cien, inaczej table-striped wygrywa co drugi wiersz. */
tr.note-success > *,
tr.note-danger  > *,
tr.note-warning > *,
tr.note-info    > *,
tr.gi-bglight   > * {
    background-color: inherit !important;
    box-shadow: none !important;
}

/* --- Animations --- */
.fa-bounce-custom { animation: bounce 1s infinite; }
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

.fa-pulse-custom { animation: pulse 2s infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.fa-15 { font-size: 1.2em; }

.spin { animation: spin 2s linear infinite; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Navbar --- */
.navbar-logo {
    width: 140px;
}

/* --- Responsive --- */

/* Tablet */
@media (max-width: 991.98px) {
    .navbar-logo { width: 110px; }
    .page-header h4 { font-size: 1rem; }
    .page-header small { font-size: 0.7rem; }
    .page-header .icon { width: 32px; height: 32px; font-size: 0.9rem; margin-right: 8px; }
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link { white-space: nowrap; font-size: 0.78rem; padding: 0.4rem 0.7rem; }
    .container-frnt .page-content { padding: 0 15px 15px 15px; }
    .page-header { padding: 10px 15px !important; }
    footer .btn { margin-top: 5px; }
}

/* Mobile */
@media (max-width: 575.98px) {
    .navbar-logo { width: 90px; }
    .container-frnt { max-width: 100%; border-radius: 0; box-shadow: none; }
    .mh100 { padding-top: 56px; }
    .page-header .icon { width: 32px; height: 32px; font-size: 0.9rem; margin-right: 8px; flex-shrink: 0; }
    .page-header h4 { font-size: 1.05rem; }
    .page-header small { font-size: 0.75rem; }
    .container-frnt .page-content { padding: 0 12px 12px 12px; }
    .section-header { font-size: 0.68rem; }
    table.table td, table.table th { font-size: 0.75rem; padding: 0.25rem 0.4rem; }
    .btn-sm { font-size: 0.72rem; }
    footer { font-size: 0.75rem; }
    .tab-content, .tab-panel-white { padding: 10px; }
    .accordion-button { font-size: 0.85rem; padding: 0.5rem 0.8rem; }
    .accordion-body { padding: 0.8rem; }
    dl.row dt, dl.row dd { font-size: 0.8rem; }
}

/* --- Print --- */
@media print {
    .navbar, footer, .btn, .no-print { display: none !important; }
    .container-frnt { max-width: 100%; box-shadow: none; }
}

/* --- DateTimeType: data i godzina obok siebie ---
   Klasa .dt-split trafia z FormType ('attr') na kontener widgetu compound.
   Selektory nie mogą polegać na [type=date|time] — datepicker/timepicker
   zamieniają te pola na type=text (zostają klasy .dp-input / .tp-input). */
.dt-split {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.dt-split > input { max-width: 170px; }
.dt-split > input[type="time"],
.dt-split > input.tp-input { max-width: 120px; }
.dt-split > .invalid-feedback,
.dt-split > .form-error-message { flex: 0 0 100%; }

/* Pola złożone (DateTimeType, ChoiceType expanded) renderują <legend> zamiast <label>.
   Legenda ma w Bootstrapie duży font i własne marginesy, przez co kolumna z takim
   polem siadała niżej niż sąsiednie. Wyrównujemy ją do wyglądu zwykłej etykiety. */
form legend,
form legend.col-form-label,
.page-content legend {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    margin-bottom: 0.15rem;
    padding: 0;
    line-height: 1.5;
    float: none;
    width: 100%;
}

/* Przyciski akcji w nagłówku widoku (m.in. "Wróć" jako pierwszy od prawej) */
.page-header .btn + .btn { margin-left: 0.5rem; }

/* --- Kreator wniosku (show_v2): krok zablokowany --------------------------
   Sekcje akordeonu otwieraja sie po kolei - dopoki poprzednia nie jest
   kompletna, naglowek jest wylaczony (<button disabled>, wiec przegladarka
   sama blokuje klikniecie i fokus; nie trzeba zdejmowac data-bs-toggle).

   Nie uzywamy `opacity` na calym naglowku - przygaszone byloby wtedy takze
   wyjasnienie, ktore ma byc czytelne. Kolory ustawione wprost. */
#wniosekAccordion .accordion-button.krok-zablokowany {
    background-color: #f4f5f7;
    color: #9aa0a6;
    cursor: not-allowed;
    box-shadow: none;
}

/* Strzalka rozwijania znika - zablokowanej sekcji i tak nie da sie otworzyc,
   a chevron sugerowalby, ze wystarczy kliknac. */
#wniosekAccordion .accordion-button.krok-zablokowany::after {
    display: none;
}

/* Wyjasnienie "Najpierw uzupelnij i zapisz: ..." odsuwa sie na prawo tak samo
   jak plakietka statusu w odblokowanych sekcjach (margin-left: auto). */
#wniosekAccordion .krok-zamek {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.7rem;
    color: #6c757d;
}

/* --- Tresc klauzul w kroku 4 wniosku (show_v2 i edycja oswiadczen) ---
   Przewijane pole - klauzula informacyjna ma 15 punktow i bez tego rozciagalaby
   akordeon na kilka ekranow. Litery a) b) c) jak w PDF: wlasny licznik, bo
   list-style lower-alpha nie stawia nawiasu. */
.klauzula-tresc {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #fafbfc;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    text-align: justify;
}
.klauzula-tresc p {
    margin-bottom: 0.4rem;
}
.klauzula-tresc ol {
    padding-left: 1.2rem;
    margin-bottom: 0;
}
.klauzula-tresc ul.literka {
    list-style: none;
    counter-reset: lit;
    padding-left: 1.2rem;
    margin-bottom: 0.2rem;
}
.klauzula-tresc ul.literka li {
    counter-increment: lit;
}
.klauzula-tresc ul.literka li:before {
    content: counter(lit, lower-alpha) ") ";
}

/* Dymek z rozpiska punktacji (przycisk "i" w show_v2).
   Miesci dluzszy tekst niz zwykla podpowiedz - opisy kryteriow sa zdaniami -
   wiec mniejsza czcionka, szerszy dymek i wyrownanie do lewej zamiast
   domyslnego srodkowania.
   Wlaczany przez data-bs-custom-class="tooltip-punktacja" (Bootstrap 5.2+;
   w projekcie jest 5.3.3, wiec atrybut dziala). Celowo NIE ruszamy .tooltip-inner
   globalnie - te same dymki pokazuja podpis elektroniczny pliku i plakietke ZRK. */
.tooltip-punktacja .tooltip-inner {
    font-size: 0.68rem;
    line-height: 1.35;
    max-width: 320px;
    text-align: left;
}