/* ============================================================================
   responsive.css - wspolna warstwa RWD panelu SpyCent
   Laduje sie PO app.css i radzen-adapter.css.

   Progi (jedne dla calego panelu):
     <= 1199.98 px             tabele jako zwarte wiersze (3 dane w linii)
     <= 1023.98 px  tablet     menu boczne jako szuflada (MainLayout.razor.css)
     <=  768    px  telefon    2 dane w linii, formularze w jednej kolumnie,
                               dialogi od dolu ekranu
     <=  479.98 px  maly tel.  dociesnienie odstepow

   768 (a nie 767.98) jest celowe: tyle uzywa Radzen w swoim trybie reflow.
   Nasze reguly tabel sa od niego niezalezne (dzialaja takze 769-1023 px),
   ale nie moga sie z nim rozjechac w pikselu przejscia.

   Tabele - kontrakt kolumn (CssClass na RadzenDataGridColumn):
     col-main     glowna komorka wiersza (tytul), pelna szerokosc, bez etykiety.
                  Bez niej glowna jest pierwsza kolumna.
     col-lead     mala komorka przed tytulem (logo, checkbox), bez etykiety.
                  Tak samo traktujemy kolumne rozwijania wiersza Radzena.
     col-actions  przyciski akcji - w pierwszej linii, przy prawej krawedzi.
     col-side     to samo miejsce dla czegos, co nie jest akcja (np. status).
                  Bez klasy rozpoznajemy .spy-actions-cell albo ostatnia kolumne
                  bez tytulu.
     col-full     zwykla komorka z etykieta, ale na cala szerokosc.
     col-hide-card  kolumna, ktorej w trybie kart nie pokazujemy (jej dane idą
                  np. do podsumowania w komorce glownej).
     col-nolabel  bez etykiety (wartosc sama sie tlumaczy: status, e-mail, typ).
     col-status   plakietka statusu; w wariancie --list otwiera linie danych.
   Wewnatrz szablonow: .u-card-only (tylko w trybie kart), .u-table-only (tylko w tabeli).
   Warianty tabeli: --list (proste listy: tytul, pod nim dane plynace w tekscie),
   --meta3 (trzy krotkie dane w linii), --clickable.
   Pozostale kolumny ukladaja sie po dwie w linii, z etykieta nad wartoscia.
   Automatyczne rozpoznawanie (pierwsza kolumna, akcje) siedzi w :where(), zeby
   nie mialo wiekszej specyficznosci niz jawne klasy i reguly konkretnej strony.
   Etykiety bierzemy z .rz-column-title, ktore Radzen dokleja przy Responsive=true.
   ============================================================================ */

/* ── Siatki stron ── */
.strategy-cards-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.alert-type-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* Siatka kart o minimalnej szerokosci kolumny. min(100%, ...) sprawia, ze na
   waskim ekranie kolumna nigdy nie jest szersza niz kontener. */
.auto-grid {
    --auto-grid-min: 280px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--auto-grid-min)), 1fr));
    gap: 12px;
}

/* Tresc strony nie moze rozpychac kolumny grida/flexa. */
.page-content,
.c-card,
.c-card__body {
    min-width: 0;
}

/* ── Widocznosc zalezna od szerokosci ──
   .u-show-sm istnieje tylko na telefonie, .u-hide-sm tylko powyzej. Chowamy przez
   media query po przeciwnej stronie, zeby nie nadpisywac wlasnego display elementu. */
@media (min-width: 769px) {
    .u-show-sm {
        display: none !important;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   TABLET - do 1024 px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .strategy-cards-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .alert-type-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   TELEFON - do 768 px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .u-hide-sm {
        display: none !important;
    }

    /* ── Typografia ── */
    h2 {
        font-size: 1.45rem;
        line-height: 1.2;
    }

    h3 {
        font-size: 1.15rem;
    }

    h4 {
        font-size: 1.02rem;
    }


    /* ── Naglowek strony ── */
    .c-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin: 14px 0 16px;
    }

    .c-header__title h2 {
        font-size: 32px;
    }

    .c-header__title p {
        margin-top: 2px;
        font-size: 13px;
        color: var(--sc-text-muted);
    }

    .c-header__action {
        flex-wrap: wrap;
        gap: 8px;
    }

        /* Przyciski rosna rowno, ale nie schodza ponizej swojej tresci - dwa krotkie
           stana obok siebie, dlugie zawina sie do nowej linii. */
        .c-header__action > .c-btn,
        .c-header__action > a.c-btn {
            flex: 1 0 auto;
            min-height: 40px;
            padding-inline: 12px;
        }

    /* Formularze edycji: Anuluj/Zapisz jako pasek przyklejony do dolu ekranu,
       zeby po wypelnieniu dlugiego formularza nie wracac na gore strony. */
    .c-header--form .c-header__action {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 25;
        flex-wrap: nowrap;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--sc-border);
        box-shadow: 0 -6px 20px rgba(11, 11, 13, .06);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

        .c-header--form .c-header__action > .c-btn {
            flex: 1 1 0;
            min-height: 44px;
        }

    article.content:has(.c-header--form) {
        padding-bottom: 88px;
    }

    .c-empty {
        padding: 32px 18px;
    }

    .c-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .c-kpi {
        padding: 14px;
    }

    .c-kpi__value {
        font-size: 26px;
    }

    .c-kpi__value--sm {
        font-size: 15px;
    }

    .c-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 16px;
    }

    .c-stat {
        padding: 14px 16px;
    }

        .c-stat + .c-stat {
            border-left: 0;
        }

        .c-stat:nth-child(even) {
            border-left: 1px solid var(--sc-border);
        }

        .c-stat:nth-child(n + 3) {
            border-top: 1px solid var(--sc-border);
        }

    .c-stat__value {
        font-size: 32px;
    }

    .c-stat__value--text {
        font-size: 16px;
    }

    /* Nieparzysty ostatni kafel na cala szerokosc zamiast samotnej polowki. */
    .c-kpis > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* ── Siatki ── */
    .strategy-cards-5,
    .alert-type-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .strategy-cards-5 > :last-child:nth-child(odd),
        .alert-type-cards > :last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }

    .grid {
        gap: 16px;
    }

    /* ── Karty ── */
    .c-card__header {
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 14px 16px;
    }

        .c-card__header .c-title {
            gap: 10px;
            min-width: 0;
        }

    .c-card__body {
        padding: 16px;
    }

    .c-card__footer {
        padding: 14px 16px;
    }

    /* ── Formularze ── */
    .c-form {
        gap: 18px;
    }

    .c-field.inline {
        grid-template-columns: 1fr;
    }

    .c-banner {
        padding: 12px 14px;
        font-size: 12.5px;
        line-height: 1.55;
    }


    /* Pasek filtrow: jedna linia przewijana w poziomie zamiast trzech linii przyciskow. */
    .c-filterbar {
        padding: 10px 0 10px 14px;
    }

    .c-filterbar__label {
        display: none;
    }

    .c-filterbar__items {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-right: 14px;
        scrollbar-width: none;
    }

        .c-filterbar__items::-webkit-scrollbar {
            display: none;
        }

    /* Przyciski i akcje w wierszach: pole dotyku min. 36 px. */
    .c-btn {
        min-height: 36px;
    }

    .c-btn--sm {
        min-height: 32px;
        height: auto;
    }

    .spy-action-btn {
        width: 36px;
        height: 36px;
    }


    /* ── Karty integracji: ikona z boku, bez pustych przestrzeni ── */
    .integ-section {
        margin-bottom: 24px;
    }

    .integ-grid {
        gap: 10px;
    }

    .integ-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 4px 12px;
        padding: 14px;
    }

        .integ-card > * {
            grid-column: 2;
        }

        .integ-card > .integ-card__icon {
            grid-column: 1;
            grid-row: 1 / span 3;
            width: 36px;
            height: 36px;
            border-radius: 4px;
            font-size: 18px;
        }

    .integ-card--wide {
        display: flex;
        padding: 16px;
    }

    .integ-card__action,
    .integ-card__badge {
        justify-self: start;
        margin-top: 6px;
    }

    /* ── Pager ── */
    .rz-pager {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 10px 8px !important;
        border-top: 1px solid var(--sc-border);
    }

        .rz-pager .rz-pager-summary {
            flex: 0 0 100%;
            order: 10;
            margin: 2px 0 0 !important;
            text-align: center;
            font-size: 12px;
            color: var(--sc-text-muted);
        }

        .rz-pager .rz-pager-first,
        .rz-pager .rz-pager-last {
            display: none !important;
        }

        .rz-pager .rz-pager-element {
            min-width: 36px;
            height: 36px;
        }

    /* ── Zakladki: rowne szerokosci, wszystkie widoczne (dlugi napis sie
       zawija) - przewijany pasek ucinal ostatnia zakladke w pol slowa. ── */
    .rz-tabview-nav {
        flex-wrap: nowrap !important;
    }

        .rz-tabview-nav > li {
            flex: 1 1 0;
            min-width: 0;
        }

            .rz-tabview-nav > li > a {
                justify-content: center;
                height: 100%;
                padding: 12px 6px !important;
                text-align: center;
            }

        .rz-tabview-nav .rz-tabview-title {
            font-size: 12.5px !important;
            letter-spacing: .02em;
            white-space: normal;
            line-height: 1.25;
        }

    .rz-tabview-panels {
        padding-inline: 0 !important;
    }

    /* ── Dialogi Radzena: arkusz od dolu ekranu ── */
    .rz-dialog-wrapper {
        align-items: flex-end !important;
    }

    .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 32px) !important;
        border-radius: 8px 8px 0 0 !important;
        transform: none !important;
    }

    .rz-dialog-confirm,
    .rz-dialog-alert {
        width: calc(100% - 24px) !important;
        max-width: 420px !important;
    }

    .rz-dialog-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .rz-dialog-titlebar {
        padding-inline: 16px !important;
    }

    /* Wlasne okna modalne stron - tez jako arkusz od dolu. */
    .c-modal {
        align-items: flex-end;
        padding: 0;
    }

    .c-modal__box {
        width: 100%;
        max-height: calc(100dvh - 32px);
        border-radius: 8px 8px 0 0;
    }

    .c-modal__head {
        padding: 16px;
    }

    .c-modal__body {
        padding: 16px;
    }

    .c-modal__foot {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }

        .c-modal__foot .c-btn {
            flex: 1 1 0;
            min-height: 44px;
        }

    /* ── Powiadomienia (toasty) na cala szerokosc ── */
    .rz-notification {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
    }

        .rz-notification .rz-notification-item-wrapper {
            width: 100% !important;
        }
}


/* Tresc szablonu widoczna tylko w jednym z trybow tabeli. */
@media (min-width: 1200px) {
    .c-table .u-card-only {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    .c-table .u-table-only {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABELE - ponizej 1200 px wiersze zamiast kolumn.
   Tabele maja stale szerokosci kolumn i jedna kolumne "auto" na tresc glowna.
   Ponizej ~1200 px okna (a od 1024 px menu zabiera jeszcze 190 px) ta kolumna
   kurczy sie do kilku pikseli i tresc znika - dlatego przelaczamy sie tutaj,
   a nie dopiero przy menu-szufladzie.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
    /* ── Tabele (RadzenDataGrid.c-table) jako zwarte wiersze ──
       Szerokosc zwyklej komorki idzie przez --cell-basis: progi i warianty
       zmieniaja tylko zmienna, wiec nie konkuruja o specyficznosc z komorkami
       specjalnymi (glowna, akcje, lead), ktore ustawiaja flex samodzielnie. */
    .c-table {
        --cell-basis: calc(33.333% - 11px);
    }

    .c-table.rz-data-grid {
        background: var(--sc-surface);
        border: 1px solid var(--sc-border) !important;
        border-radius: var(--sc-radius-lg) !important;
        box-shadow: var(--sc-shadow-sm);
        overflow: hidden;
    }

    .c-table .rz-data-grid-data {
        overflow: visible !important;
    }

    .c-table .rz-data-grid-data > table,
    .c-table .rz-data-grid-data > table > tbody {
        display: block !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    .c-table .rz-data-grid-data > table > colgroup,
    .c-table .rz-data-grid-data > table > thead,
    .c-table .rz-data-grid-data > table > tfoot {
        display: none !important;
    }

    .c-table tbody > tr.rz-data-row {
        position: relative;
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px 16px;
        width: 100%;
        padding: 14px 16px;
        border-bottom: 1px solid var(--sc-border);
        background: transparent !important;
    }

        .c-table tbody > tr.rz-data-row:last-child {
            border-bottom: 0;
        }

        /* Wymuszone zlamanie linii po komorce glownej i akcjach. */
        .c-table tbody > tr.rz-data-row::after {
            content: "";
            order: 1;
            flex: 0 0 100%;
            height: 0;
            margin-top: -10px;
        }

        .c-table tbody > tr.rz-data-row > td {
            order: 2;
            display: block !important;
            flex: 1 1 var(--cell-basis);
            min-width: 0;
            width: auto !important;
            max-width: 100% !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            text-align: left !important;
            font-size: 13.5px;
            color: var(--sc-text);
        }

            /* Komorka glowna: pierwsza kolumna albo jawnie .col-main. */
            .c-table tbody > tr.rz-data-row > td.col-main,
            .c-table tbody > tr.rz-data-row:where(:not(:has(> td.col-main))) > td:where(:first-child) {
                order: 0;
                flex: 1 1 0;
                font-size: 14px;
                font-weight: 600;
            }

            .c-table tbody > tr.rz-data-row > td.col-lead,
            .c-table tbody > tr.rz-data-row > td.rz-col-icon {
                order: 0;
                flex: 0 0 auto;
                align-self: center;
            }

            .c-table tbody > tr.rz-data-row > td.col-actions,
            .c-table tbody > tr.rz-data-row > td.col-side,
            .c-table tbody > tr.rz-data-row > td:where(:has(.spy-actions-cell)),
            .c-table tbody > tr.rz-data-row > td:where(:last-child:not(.col-main):has(> .rz-column-title:empty)) {
                order: 1;
                flex: 0 0 auto;
                margin-top: -2px;
            }

            .c-table tbody > tr.rz-data-row > td.col-full {
                flex-basis: 100%;
            }

            .c-table tbody > tr.rz-data-row > td.col-hide-card {
                display: none !important;
            }

            /* Pusta komorka (np. brak daty) nie zajmuje miejsca w siatce. */
            .c-table tbody > tr.rz-data-row > td:not(.col-main):not(:first-child):has(> .rz-cell-data:empty) {
                display: none !important;
            }

            /* Etykieta tym samym krojem co wartosc, tylko mniejsza i szara -
               wersaliki przy kazdej wartosci robily z wiersza formularz. */
            .c-table tbody > tr.rz-data-row > td > .rz-column-title {
                display: block !important;
                margin: 0 0 3px;
                font-size: 11.5px;
                font-weight: 500;
                line-height: 1.25;
                letter-spacing: 0;
                text-transform: none;
                color: var(--sc-text-muted);
            }

            .c-table tbody > tr.rz-data-row > td.col-main > .rz-column-title,
            .c-table tbody > tr.rz-data-row:where(:not(:has(> td.col-main))) > td:where(:first-child) > .rz-column-title,
            .c-table tbody > tr.rz-data-row > td.col-lead > .rz-column-title,
            .c-table tbody > tr.rz-data-row > td.rz-col-icon > .rz-column-title,
            .c-table tbody > tr.rz-data-row > td.col-actions > .rz-column-title,
            .c-table tbody > tr.rz-data-row > td.col-side > .rz-column-title,
            .c-table tbody > tr.rz-data-row > td:where(:has(.spy-actions-cell)) > .rz-column-title,
            .c-table tbody > tr.rz-data-row > td > .rz-column-title:empty {
                display: none !important;
            }

            /* Radzen przycina tresc komorki do jednej linii - na telefonie tekst ma sie
               zawijac, a dlugie ciagi (URL, kody) lamac w dowolnym miejscu. */
            .c-table tbody > tr.rz-data-row > td > .rz-cell-data {
                display: block;
                white-space: normal !important;
                overflow: visible !important;
                text-overflow: clip !important;
                overflow-wrap: anywhere;
            }

    .c-table .spy-actions-cell {
        justify-content: flex-end;
        gap: 4px;
    }

    /* Akcje w wierszu jako lekkie ikony - obramowane przyciski dominowaly nad trescia. */
    .c-table .spy-action-btn {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 4px;
        background: var(--sc-surface-muted);
        box-shadow: none;
    }

    /* Siatka wewnatrz karty albo zakladki nie dostaje drugiej ramki - wiersze
       rozdzielaja linie, tresc wyrownuje sie z reszta karty. */
    .c-card__body > .c-table.rz-data-grid,
    .rz-tabview-panels .c-table.rz-data-grid {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none;
        background: transparent;
    }

        .c-card__body > .c-table.rz-data-grid tbody > tr.rz-data-row,
        .rz-tabview-panels .c-table.rz-data-grid tbody > tr.rz-data-row {
            padding-inline: 0;
        }

    /* ── Wariant listowy: tytul, a pod nim dane plynace w tekscie ──
       Dla prostych tabel (kolejka, kanaly, uzytkownicy). Etykieta stoi przed
       wartoscia w tej samej linii, a przy col-nolabel znika. */
    .c-table.c-table--list tbody > tr.rz-data-row {
        align-items: center;
        gap: 4px 14px;
        padding-block: 12px;
    }

        .c-table.c-table--list tbody > tr.rz-data-row::after {
            margin-top: -4px;
        }

        /* Etykieta i wartosc w jednej linii; dluga wartosc zawija sie obok
           etykiety, a nie spada pod nia. */
        .c-table.c-table--list tbody > tr.rz-data-row > td:not(.col-main, .col-actions, .col-side, .col-lead, .col-hide-card, .rz-col-icon) {
            order: 3;
            display: inline-flex !important;
            flex-wrap: nowrap;
            align-items: baseline;
            gap: 0 5px;
            flex: 0 1 auto;
            font-size: 13px;
            color: #4a4a52;
        }

            /* Status zawsze otwiera linie danych - w srodku linii plakietka
               "plywala" w innym miejscu w kazdym wierszu. */
            .c-table.c-table--list tbody > tr.rz-data-row > td.col-status {
                order: 2;
                align-self: center;
            }

            .c-table.c-table--list tbody > tr.rz-data-row > td.col-full {
                flex-basis: 100%;
            }

            .c-table.c-table--list tbody > tr.rz-data-row > td:not(.col-nolabel, .col-main, .col-actions, .col-side, .col-lead, .rz-col-icon) > .rz-column-title {
                display: inline !important;
                margin: 0 !important;
                font-size: 12px;
            }

            .c-table.c-table--list tbody > tr.rz-data-row > td > .rz-column-title {
                flex: none;
            }

            .c-table.c-table--list tbody > tr.rz-data-row > td > .rz-cell-data {
                display: inline !important;
                min-width: 0;
            }

        .c-table.c-table--list tbody > tr.rz-data-row > td.col-main {
            align-self: center;
            font-size: 14px;
        }

        /* Pusta komorka nie zostawia dziury w linii. */
        .c-table.c-table--list tbody > tr.rz-data-row > td:not(.col-main):has(> .rz-cell-data:empty) {
            display: none !important;
        }

    .c-table tbody > tr.rz-data-row > td.col-nolabel > .rz-column-title {
        display: none !important;
    }

    .c-table tbody > tr.rz-datatable-emptymessage,
    .c-table tbody > tr.rz-datatable-emptymessage > td {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
        text-align: center !important;
    }

        .c-table tbody > tr.rz-datatable-emptymessage > td {
            padding: 28px 16px !important;
        }

    .c-table tbody > tr.rz-data-row:hover,
    .c-table tbody > tr.rz-data-row:hover > td {
        background: transparent !important;
    }

    .c-table tbody > tr.rz-data-row.is-clickable:active,
    .c-table--clickable tbody > tr.rz-data-row:active {
        background: var(--sc-surface-muted) !important;
    }
}

/* Telefon: dwie dane w linii, wariant --meta3 trzy (daty, statusy, kwoty). */
@media (max-width: 768px) {
    .c-table {
        --cell-basis: calc(50% - 8px);
    }

    .c-table.c-table--meta3 {
        --cell-basis: calc(33.333% - 11px);
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   MALY TELEFON - do 480 px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 479.98px) {
    .c-card__header {
        padding: 12px 14px;
    }

    .c-card__body {
        padding: 14px;
    }
}