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

/* Zakladki zawijane do drugiej linii nachodzily na pierwsza (ramki +
   margin-bottom: -1px z Bootstrapa) - odstep 4px tylko miedzy wierszami. */
.nav-tabs {
    row-gap: 4px;
}

/* Nieaktywne zakladki - lekkie obramowanie, zeby bylo widac granice kazdej
   z nich (w BS5 maja przezroczysta ramke i zlewaly sie w jeden pasek). */
.nav-tabs .nav-link:not(.active) {
    border-color: #e4e8eb #e4e8eb transparent;
    background-color: #f8f9fa;
    margin-right: 2px;
}

.nav-tabs .nav-link:not(.active):hover {
    border-color: #ced4da #ced4da transparent;
    background-color: #f1f3f5;
}

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

/* Odziedziczone z LFR: bg-info bylo przemalowane na ciemny granat #1a3a5c,
   zeby bialy tekst byl czytelny - efektem byla plakietka wygladajaca na czarna
   i nieodrozialna od bg-dark (status 6 etapu).
   Zostawiamy bootstrapowy cyjan, a czytelnosc zalatwia ciemny tekst.
   Zapis przez rgba(--bs-info-rgb, --bs-bg-opacity) - inaczej twarde
   background-color zablokowaloby utility .bg-opacity-* (indexAll). */
.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: badge wyrównany w kolumnie, stała pozycja i szerokość --- */
#wniosekAccordion .accordion-button {
    position: relative;
}
#wniosekAccordion .accordion-button .badge {
    position: absolute;
    left: 280px;
    width: 140px;
    text-align: center;
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    #wniosekAccordion .accordion-button .badge {
        position: static;
        width: auto;
        margin-left: 0.5rem;
    }
}

/* --- Etap accordion (wniosek/show) --- */

/* Nagłówek etapu to <a data-bs-toggle="collapse"> - Bootstrap 5.3 podkreśla
   linki domyślnie (link-decoration), więc tytuły etapów były podkreślone.
   Podkreślenie zdejmujemy też z zagnieżdżonych plakietek statusu. */
#accordionEx .card-header > a,
#accordionEx .card-header > a:hover,
#accordionEx .card-header a.badge,
#accordionEx .card-header a.badge:hover {
    text-decoration: none;
}

#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;
}

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

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

/* W tych tabelach <th> to etykieta wiersza, nie nagłówek kolumny - globalna
   reguła table.table th robiła z nich kapitaliki (uppercase, 0.72rem, szare).
   Ma wyglądać jak pierwsza kolumna w podsumowaniu: bold, normalny tekst.
   UWAGA na specyficzność: `table.table th` to klasa + 2 elementy, więc
   `.dane-tabela th` (klasa + 1 element) by przegrało. Stąd `table.dane-tabela th`. */
table.dane-tabela th {
    font-weight: 700;
    text-transform: none !important;
    letter-spacing: normal;
    font-size: 0.83rem;
    color: #212529;
}

table.wsparcieinfo tr td:first-child { font-weight: 700; width: 50%; }

/* Tło wierszy: #f8f9fa było prawie białe i tabela zlewała się z kontenerem.
   Komórki z bg-light (nagłówki sekcji) muszą zostać ciemniejsze od wiersza,
   inaczej hierarchia znika - stąd druga reguła. */
table.wsparcieinfo tr { background-color: #f1f3f5 !important; }

/* Wiersze sekcji (bg-light + colspan) w obu tabelach danych - ten sam odcień.
   Wyraźnie ciemniejsze od wierszy danych, żeby czytelnie dzieliły tabelę. */
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; }
/* także jako samodzielna klasa - np. <ul class="micro-fonts"> z listą plików */
.micro-fonts         { font-size: 0.65rem; }

/* --- small-fonts / font-smaller ---
   Klasy odziedziczone po MDB - używane w 45 szablonach, ale nigdzie
   nie zdefiniowane (w LFR też były martwe). Stąd inline font-size
   rozsiane po tabelach. Definiujemy raz. */
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 ---
   Kolejne klasy po MDB używane jako podświetlenie komórki lub wiersza
   (note-success w 10 szablonach). Konwersja BS4->BS5 objęła tylko postać
   `note note-X`; te samodzielne zostały bez definicji, czyli bez tła.
   !important, bo Bootstrap maluje tło komórek przez
   `.table > :not(caption) > * > *`. */
.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; }

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

/* Tooltip z dluzsza trescia (np. objasnienia poziomow wyksztalcenia ISCED
   w formularzu uczestnika) - domyslne 200px lamalo opisy co dwa slowa. */
.tooltip-szeroki .tooltip-inner {
    max-width: 420px;
    text-align: left;
    padding: 0.5rem 0.75rem;
}

/* Migajacy wykrzyknik przy przycisku "Wiadomosci" - tylko dla strony, ktora
   ma nieprzeczytana wiadomosc od drugiej strony. */
.miga {
    animation: miganie 1s ease-in-out infinite;
}

@keyframes miganie {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.15; }
}

/* Uzytkownik moze miec wylaczone animacje w systemie - wtedy zostaje sam ikon. */
@media (prefers-reduced-motion: reduce) {
    .miga { animation: none; }
}

/* --- pole-opis ---
   Podpowiedź pod etykietą pola (motyw templates/form/podpowiedzi.html.twig).
   Ma być wyraźnie mniejsza od etykiety: domyślny `.form-label` to 1rem,
   a w skompaktowanym formularzu rejestracji 0.82rem - stąd osobna wartość. */
.pole-opis {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.25;
    color: #6c757d;
    margin: -2px 0 4px;
}

.form-rejestracja .pole-opis { font-size: 0.62rem; }

/* --- pole-wylaczone ---
   Pole nieaktywne w danym wariancie formularza (np. uzasadnienie doradztwa
   przy odpowiedzi NIE). Ustawiane readonly, nie disabled - wartość musi
   nadal trafiać do POST-a, inaczej zapis wyczyściłby zapisany tekst. */
.pole-wylaczone {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed;
}