/* ============================================================
   Portal (pulpit) — nowoczesne karty wg projektu UI (zaily/ELITA).
   Ładowany tylko na stronach /portal/* (registerCssFile w widokach).
   Kolory bazowe projektu: #2563EB / #7C3AED / #10B981 / #EF4444 /
   #F59E0B; akcent klubu nadpisuje --brand-accent (branding).
   ============================================================ */

.portal {
    --p-blue:   #2563EB;
    --p-purple: #7C3AED;
    --p-green:  #10B981;
    --p-red:    #EF4444;
    --p-amber:  #F59E0B;
    --p-card:   #FFFFFF;
    --p-text:   #0D1424;
    --p-muted:  #6B7280;
    --p-border: #E5E7EB;
    --p-soft:   #F3F4F6;
    --p-accent: var(--brand-accent, #2563EB);
    max-width: 1180px;
    margin: 0 auto;
    padding: 4px 0 36px;
    color: var(--p-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}
[data-theme="ciemny"] .portal {
    --p-card:   #1A2338;
    --p-text:   #EDF1F7;
    --p-muted:  #93A1B8;
    --p-border: #2A3550;
    --p-soft:   #212C46;
}

/* ---------------- Nagłówek powitalny ---------------- */
.portal-head { margin: 6px 2px 18px; }
.portal-head h1 {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--p-text);
}
.portal-head__sub { margin: 0; font-size: 14px; color: var(--p-muted); }

/* ---------------- Przełącznik portalu (konto z kilkoma rolami) ----------------
   Widoczny tylko gdy użytkownik ma > 1 portal (np. Uczestnik + Instruktor).
   Pigułki: aktywna wypełniona akcentem, pozostałe to przyciski POST-owe.
   ---------------------------------------------------------------------------- */
.portal-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
}
.portal-switch__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--p-muted);
    margin-right: 2px;
}
.portal-switch__form { display: inline; margin: 0; }
.portal-switch__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--p-border);
    border-radius: 999px;
    background: var(--p-card);
    color: var(--p-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.portal-switch__item .glyphicon { font-size: 12px; top: 0; }
button.portal-switch__item:hover,
button.portal-switch__item:focus {
    border-color: var(--p-accent);
    color: var(--p-accent);
    background: var(--p-soft);
    outline: none;
}
.portal-switch__item.is-active {
    background: var(--p-accent);
    border-color: var(--p-accent);
    color: #fff;
    cursor: default;
}
.portal-empty .portal-switch { justify-content: center; margin-top: 14px; }

/* ---------------- Siatka kart ---------------- */
.portal-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
.portal-grid > .span-3  { grid-column: span 3; }
.portal-grid > .span-4  { grid-column: span 4; }
.portal-grid > .span-5  { grid-column: span 5; }
.portal-grid > .span-6  { grid-column: span 6; }
.portal-grid > .span-7  { grid-column: span 7; }
.portal-grid > .span-8  { grid-column: span 8; }
.portal-grid > .span-12 { grid-column: span 12; }
@media (max-width: 1199px) {
    .portal-grid > .span-3 { grid-column: span 6; }
}
@media (max-width: 991px) {
    .portal-grid > .span-4, .portal-grid > .span-5, .portal-grid > .span-6,
    .portal-grid > .span-7, .portal-grid > .span-8 { grid-column: span 12; }
}
@media (max-width: 560px) {
    .portal-grid > .span-3 { grid-column: span 12; }
}

/* ---------------- Karta ---------------- */
.portal-card {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.portal-card--flush { padding: 8px 8px; }

.portal-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 2px 12px;
}
.portal-card .portal-section-head { margin: 0 0 10px; }
.portal-section-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--p-text);
}
.portal-section-head a {
    font-size: 13px;
    font-weight: 600;
    color: var(--p-accent);
    text-decoration: none;
    white-space: nowrap;
}
.portal-section-head a:hover { text-decoration: underline; }

/* ---------------- Karta hero („Do zapłaty" itp.) ---------------- */
.portal-hero {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    padding: 20px 22px;
    color: #fff;
    background: var(--p-accent);
    background: linear-gradient(135deg, var(--p-accent) 0%,
        color-mix(in srgb, var(--p-accent) 55%, #0D1424) 100%);
    /* Longhand PO gradiencie: silniki bez color-mix() odrzucają gradient,
       ale zachowują background-color — karta zostaje w kolorze akcentu. */
    background-color: var(--p-accent);
    box-shadow: 0 8px 20px -8px rgba(16, 24, 40, 0.35);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 168px;
}
.portal-hero--ok {
    background: var(--p-green);
    background: linear-gradient(135deg, #10B981 0%, #047857 100%);
    box-shadow: 0 8px 20px -8px rgba(16, 185, 129, 0.45);
}
.portal-hero__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
    margin: 0 0 6px;
}
.portal-hero__amount {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.1;
}
.portal-hero__sub { margin: 6px 0 14px; font-size: 13px; opacity: 0.85; }
.portal-hero__ico {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}

/* ---------------- Przyciski ---------------- */
.portal-btn {
    display: inline-block;
    border: 0;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    background: var(--p-accent);
    color: #fff;
    transition: filter 0.15s ease;
}
.portal-btn:hover, .portal-btn:focus { filter: brightness(1.08); color: #fff; text-decoration: none; }
/* Kolor twardo, nie var(--p-text): w trybie ciemnym --p-text jest jasny,
   a tło przycisku pozostaje białe — tekst by znikał. */
.portal-btn--onhero { background: #fff; color: #0D1424; align-self: flex-start; }
.portal-btn--onhero:hover, .portal-btn--onhero:focus { background: #fff; color: #0D1424; filter: none; opacity: 0.92; }
.portal-btn--ghost {
    background: transparent;
    border: 1px solid var(--p-border);
    color: var(--p-text);
    font-weight: 600;
}
.portal-btn--ghost:hover, .portal-btn--ghost:focus {
    color: var(--p-accent);
    border-color: var(--p-accent);
    background: transparent;
    filter: none;
}

/* ---------------- Kafelki statystyk ---------------- */
.portal-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.portal-tiles--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 991px) { .portal-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .portal-tiles { grid-template-columns: 1fr; } }

a.portal-tile { text-decoration: none; }
.portal-tile {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--p-text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
a.portal-tile:hover {
    border-color: var(--p-accent);
    transform: translateY(-1px);
    color: var(--p-text);
}
.portal-tile__num {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}
.portal-tile__label { font-size: 13px; color: var(--p-muted); font-weight: 500; }

/* ---------------- Kolorowe „chipy" z ikonami ---------------- */
.portal-ico {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.portal-ico .glyphicon { top: 0; }
.portal-ico.is-blue   { background: rgba(37, 99, 235, 0.12);  color: #2563EB; }
.portal-ico.is-purple { background: rgba(124, 58, 237, 0.12); color: #7C3AED; }
.portal-ico.is-green  { background: rgba(16, 185, 129, 0.14); color: #0EA372; }
.portal-ico.is-red    { background: rgba(239, 68, 68, 0.12);  color: #EF4444; }
.portal-ico.is-amber  { background: rgba(245, 158, 11, 0.15); color: #D97706; }
.portal-ico.is-accent { background: rgba(37, 99, 235, 0.12); color: var(--p-accent); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .portal-ico.is-accent { background: color-mix(in srgb, var(--p-accent) 12%, transparent); }
}
[data-theme="ciemny"] .portal-ico.is-blue   { background: rgba(59, 130, 246, 0.22);  color: #7FAAF7; }
[data-theme="ciemny"] .portal-ico.is-purple { background: rgba(139, 92, 246, 0.22);  color: #B49AF6; }
[data-theme="ciemny"] .portal-ico.is-green  { background: rgba(16, 185, 129, 0.22);  color: #5BD3A9; }
[data-theme="ciemny"] .portal-ico.is-red    { background: rgba(239, 68, 68, 0.22);   color: #F19999; }
[data-theme="ciemny"] .portal-ico.is-amber  { background: rgba(245, 158, 11, 0.22);  color: #F0B45C; }

/* ---------------- Wiersze list ---------------- */
.portal-list { display: flex; flex-direction: column; }
.portal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--p-text);
}
.portal-row + .portal-row { border-top: 1px solid var(--p-border); }
a.portal-row:hover { background: var(--p-soft); color: var(--p-text); text-decoration: none; }
.portal-row__body { flex: 1 1 auto; min-width: 0; }
.portal-row__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.portal-row__sub {
    font-size: 12.5px;
    color: var(--p-muted);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.portal-row__side {
    flex: 0 0 auto;
    text-align: right;
    font-size: 13px;
    color: var(--p-muted);
}
.portal-row__side strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--p-text);
}
.portal-row__side .is-plus  { color: #0EA372; }
.portal-row__side .is-minus { color: var(--p-red); }

/* ---------------- Pastylki statusów ---------------- */
.portal-pill {
    display: inline-block;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.portal-pill.is-green { background: rgba(16, 185, 129, 0.14); color: #067A57; }
.portal-pill.is-red   { background: rgba(239, 68, 68, 0.12);  color: #C02626; }
.portal-pill.is-amber { background: rgba(245, 158, 11, 0.16); color: #A16207; }
.portal-pill.is-muted { background: var(--p-soft); color: var(--p-muted); }
[data-theme="ciemny"] .portal-pill.is-green { color: #5BD3A9; }
[data-theme="ciemny"] .portal-pill.is-red   { color: #F19999; }
[data-theme="ciemny"] .portal-pill.is-amber { color: #F0B45C; }

/* ---------------- Badge liczbowy przy tytule wiersza ---------------- */
.portal-count {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    background: var(--p-red);
    color: #fff;
}
.portal-count.is-zero { background: var(--p-soft); color: var(--p-muted); }

/* ---------------- Szybkie akcje ---------------- */
.portal-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.portal-quick a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--p-border);
    border-radius: 999px;
    padding: 8px 16px;
    background: var(--p-card);
    color: var(--p-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.portal-quick a:hover { border-color: var(--p-accent); color: var(--p-accent); }
.portal-quick .glyphicon { font-size: 12px; top: 1px; }

/* ---------------- Grupy (siatka mini-kart) ---------------- */
.portal-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 991px) { .portal-groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .portal-groups { grid-template-columns: 1fr; } }
a.portal-group {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--p-border);
    border-radius: 14px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--p-text);
    background: var(--p-card);
    transition: border-color 0.15s ease;
}
a.portal-group:hover { border-color: var(--p-accent); color: var(--p-text); }

/* ============================================================
   GridView na urządzeniach mobilnych (opt-in klasami na kontenerze):
   - .grid-cards      → <768px wiersze tabeli renderują się jako karty
                        (etykiety z data-label wypełnia js/grid-cards.js);
   - .grid-sticky-mob → 768–991px poziomy scroll z przyklejoną kolumną
                        nr 2 (nazwisko) i cieniem-podpowiedzią.
   - .grid-mob-hide   → komórki/kolumny ukrywane <768px (priorytety).
   Desktop (≥992px) pozostaje bez zmian.
   ============================================================ */
@media (max-width: 767px) {
    .grid-mob-hide { display: none !important; }

    .grid-cards table {
        display: block;
        border: 0;
        background: transparent;
        margin-bottom: 0;
        width: 100%;
    }
    /* Nagłówki znikają (sortowanie na desktopie), ale wiersz filtrów kolumn
       jest dostępny jako panel pod przyciskiem „Filtry" (grid-cards.js) —
       te same możliwości filtrowania co na desktopie. */
    .grid-cards table > thead { display: block; }
    .grid-cards table > thead > tr { display: none; }
    .grid-cards.grid-filters-open table > thead > tr.filters {
        display: block;
        background: #fff;
        border: 1px solid #E5E7EB;
        border-radius: 14px;
        padding: 10px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }
    .grid-cards.grid-filters-open table > thead > tr.filters > td,
    .grid-cards.grid-filters-open table > thead > tr.filters > th {
        display: block;
        border: 0 !important;
        background: transparent !important;
        padding: 5px 0;
        width: auto !important;
    }
    .grid-cards table > thead > tr.filters > td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: #6B7280;
        font-size: 12px;
        font-weight: 600;
    }
    .grid-cards table > thead > tr.filters .grid-filter-empty { display: none !important; }
    .grid-filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 0 0 10px;
        padding: 8px 16px;
        background: #fff;
        border: 1px solid #E5E7EB;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        color: #0D1424;
    }
    .grid-filters-toggle .glyphicon { font-size: 12px; top: 1px; }
    .grid-filters-toggle .badge { background: var(--brand-accent, #2563EB); }
    .grid-cards.grid-filters-open .grid-filters-toggle {
        border-color: var(--brand-accent, #2563EB);
        color: var(--brand-accent, #2563EB);
    }
    .grid-cards table > tbody { display: block; }
    .grid-cards table > tbody > tr {
        display: block;
        background: #fff;
        border: 1px solid #E5E7EB;
        border-radius: 14px;
        padding: 10px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }
    /* Wiersze „danger" (np. zaległe płatności) — czerwona belka jak w tabeli. */
    .grid-cards table > tbody > tr.danger {
        border-left: 4px solid #EF4444;
    }
    /* Karta z domyślną akcją „podgląd" (data-url wiersza albo link z ikoną oka;
       klasę stawia js/grid-cards.js) — cała klikalna, stąd kursor. */
    .grid-cards table > tbody > tr.grid-card-clickable {
        cursor: pointer;
    }
    .grid-cards table > tbody > tr.grid-card-clickable:active {
        background: #F3F4F6;
    }
    .grid-cards table > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        border: 0 !important;
        background: transparent !important;
        padding: 4px 0;
        text-align: left !important;
        min-width: 0;
    }
    .grid-cards table > tbody > tr > td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #6B7280;
        font-size: 12px;
        font-weight: 600;
    }

    /* --- Tryb „widok na komputer" (<768px) ---
       Użytkownik świadomie rezygnuje z kart na rzecz zwykłej tabeli: pokazujemy
       WSZYSTKIE kolumny (także te chowane normalnie na mobile) i pozwalamy
       przewijać poziomo. Klasę .grid-cards zdejmuje wtedy js/grid-cards.js,
       więc reguły kartowe wyżej po prostu przestają obowiązywać. */
    .grid-cards-off {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Bez minimalnej szerokości przeglądarka ścisnęłaby kolumny do nieczytelnych
       słupków zamiast dać pasek przewijania. */
    .grid-cards-off > table { min-width: 720px; }
    /* Kolumny drugorzędne wracają — po to jest ten tryb. */
    .grid-cards-off .grid-mob-hide { display: table-cell !important; }
    /* Panel filtrów jest częścią trybu kartowego; tu wiersz filtrów działa
       normalnie, jak na desktopie. */
    .grid-cards-off .grid-filters-toggle { display: none !important; }
}
/* Przyciski trybu mobilnego istnieją tylko poniżej 768px. */
@media (min-width: 768px) {
    .grid-filters-toggle,
    .grid-widok-toggle { display: none !important; }
}
/* Przycisk zmiany widoku — wygląd wspólny z „Filtry". */
.grid-widok-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #0D1424;
}
.grid-widok-toggle .glyphicon { font-size: 12px; top: 1px; }
[data-theme="ciemny"] .grid-widok-toggle { background: #1A2338; border-color: #2A3550; color: #EDF1F7; }
[data-theme="ciemny"] .grid-cards table > tbody > tr { background: #1A2338; border-color: #2A3550; }
[data-theme="ciemny"] .grid-cards table > tbody > tr > td[data-label]::before { color: #93A1B8; }
[data-theme="ciemny"] .grid-cards.grid-filters-open table > thead > tr.filters { background: #1A2338; border-color: #2A3550; }
[data-theme="ciemny"] .grid-cards table > thead > tr.filters > td[data-label]::before { color: #93A1B8; }
[data-theme="ciemny"] .grid-filters-toggle { background: #1A2338; border-color: #2A3550; color: #EDF1F7; }

@media (min-width: 768px) and (max-width: 991px) {
    .grid-sticky-mob {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .grid-sticky-mob table th:nth-child(2),
    .grid-sticky-mob table td:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 6px 0 8px -6px rgba(16, 24, 40, 0.18);
    }
    /* Paski zebry i wiersze danger — tło sticky-komórki jak reszta wiersza. */
    .grid-sticky-mob table.table-striped tbody tr:nth-of-type(odd) > td:nth-child(2) { background: #f9f9f9; }
    .grid-sticky-mob table tbody tr.danger > td:nth-child(2) { background: #f2dede; }
    [data-theme="ciemny"] .grid-sticky-mob table th:nth-child(2),
    [data-theme="ciemny"] .grid-sticky-mob table td:nth-child(2),
    [data-theme="ciemny"] .grid-sticky-mob table.table-striped tbody tr:nth-of-type(odd) > td:nth-child(2) {
        background: #1A2338;
    }
}

/* ---------------- Grafika grupy (upload lub auto-SVG) ---------------- */
.grupa-grafika {
    flex: 0 0 auto;
    display: block;
    border-radius: 12px;
    object-fit: cover;
}

/* ---------------- Puste stany / drobiazgi ---------------- */
.portal-empty {
    padding: 20px 10px;
    text-align: center;
    color: var(--p-muted);
    font-size: 13.5px;
}
.portal-footnote { margin-top: 10px; font-size: 12px; color: var(--p-muted); }
.portal mark {
    background: rgba(245, 158, 11, 0.2);
    color: inherit;
    padding: 0 3px;
    border-radius: 4px;
}

/* ============================================================
   Komponenty współdzielone poza portalem (widoki uczestnika i listy):
   poziome menu uczestnika, karta eksportu, karta podsumowań.
   Style samodzielne (nie wymagają rodzica .portal) + tryb ciemny.
   ============================================================ */

/* ---------------- Poziome menu uczestnika (taby z ikonami) ---------------- */
.ucz-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 8px 10px;
    margin: 4px 0 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.ucz-tabs__item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 84px;
    padding: 10px 12px 13px;
    border-radius: 12px;
    position: relative;
    color: #6B7280;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}
.ucz-tabs__item .glyphicon { font-size: 16px; top: 0; }
.ucz-tabs__item:hover, .ucz-tabs__item:focus {
    color: var(--brand-accent, #2563EB);
    background: #F3F4F6;
    text-decoration: none;
}
.ucz-tabs__item.active { color: var(--brand-accent, #2563EB); }
.ucz-tabs__item.active::after {
    content: '';
    position: absolute;
    left: 24%;
    right: 24%;
    bottom: 3px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-accent, #2563EB);
}
[data-theme="ciemny"] .ucz-tabs { background: #1A2338; border-color: #2A3550; }
[data-theme="ciemny"] .ucz-tabs__item { color: #93A1B8; }
[data-theme="ciemny"] .ucz-tabs__item:hover,
[data-theme="ciemny"] .ucz-tabs__item:focus { background: #212C46; }

/* ---------------- Karta eksportu ---------------- */
.export-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 16px 20px;
    margin: 18px 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.export-card__title { font-weight: 700; font-size: 15px; margin: 0 0 2px; color: #0D1424; }
.export-card__sub { margin: 0; font-size: 13px; color: #6B7280; }
.export-card__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.export-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 13.5px;
    color: #0D1424;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.export-btn:hover, .export-btn:focus {
    border-color: var(--brand-accent, #2563EB);
    color: var(--brand-accent, #2563EB);
    text-decoration: none;
}
.export-btn .glyphicon { font-size: 14px; top: 1px; }
.export-btn--excel .glyphicon { color: #10B981; }
.export-btn--pdf .glyphicon   { color: #EF4444; }
.export-btn--csv .glyphicon   { color: #2563EB; }
.export-btn--ics .glyphicon   { color: #7C3AED; }
.export-btn--jpeg .glyphicon  { color: #F59E0B; }
[data-theme="ciemny"] .export-card { background: #1A2338; border-color: #2A3550; }
[data-theme="ciemny"] .export-card__title { color: #EDF1F7; }
[data-theme="ciemny"] .export-card__sub { color: #93A1B8; }
[data-theme="ciemny"] .export-btn { background: #212C46; border-color: #2A3550; color: #EDF1F7; }

/* ---------------- Karta podsumowań pod tabelą ---------------- */
.sumy-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 16px 20px;
    margin: 18px 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.sumy-card__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px;
}
.sumy-card__label { font-size: 12.5px; color: #6B7280; margin: 0 0 4px; font-weight: 600; }
.sumy-card__value { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -0.02em; color: #0D1424; }
.sumy-card__value.is-red    { color: #EF4444; }
.sumy-card__value.is-green  { color: #0EA372; }
.sumy-card__value.is-blue   { color: #2563EB; }
.sumy-card__value.is-amber  { color: #D97706; }
.sumy-card__value.is-purple { color: #7C3AED; }
@media (min-width: 768px) {
    .sumy-card__item + .sumy-card__item {
        border-left: 1px solid #F3F4F6;
        padding-left: 16px;
    }
}
[data-theme="ciemny"] .sumy-card { background: #1A2338; border-color: #2A3550; }
[data-theme="ciemny"] .sumy-card__label { color: #93A1B8; }
[data-theme="ciemny"] .sumy-card__value { color: #EDF1F7; }
[data-theme="ciemny"] .sumy-card__item + .sumy-card__item { border-left-color: #2A3550; }