/* SpyCent - panel w kolorach strony spycent.pl (wariant "Tusz", 10.2026)
   Paleta: biel i jasna szarosc, czarny tusz (menu, naglowki tabel, ciemne karty),
   magenta jako jedyny akcent. Bez zieleni i niebieskiego: stan "w porzadku" jest
   zwyklym tuszem, "uwaga" magenta, czerwien tylko dla bledow i wartosci ujemnych.
   Fonty jak na stronie: Anybody (waski, tytuly i duze liczby) + Instrument Sans.
   Ikony: phosphor duotone. Nazwy: c-* (komponenty), u-* (narzedzia), is-* (stany).
*/

/* Fonty self-hosted (OFL), te same pliki co na stronie: subset latin + Latin
   Extended-A, Anybody z szerokoscia zamrozona na 75. Po podmianie plikow podbij ?v=. */
@font-face { font-family: 'Anybody'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('../fonts/brand/Anybody-latin-ext.woff2?v=1') format('woff2'); unicode-range: U+0100-017F, U+0218-021B; }
@font-face { font-family: 'Anybody'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('../fonts/brand/Anybody-latin.woff2?v=1') format('woff2'); unicode-range: U+0000-00FF, U+2010-2027, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF; }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('../fonts/brand/InstrumentSans-Italic-latin-ext.woff2?v=1') format('woff2'); unicode-range: U+0100-017F, U+0218-021B; }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('../fonts/brand/InstrumentSans-Italic-latin.woff2?v=1') format('woff2'); unicode-range: U+0000-00FF, U+2010-2027, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/brand/InstrumentSans-latin-ext.woff2?v=1') format('woff2'); unicode-range: U+0100-017F, U+0218-021B; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/brand/InstrumentSans-latin.woff2?v=1') format('woff2'); unicode-range: U+0000-00FF, U+2010-2027, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF; }

/* 1) Reset & base */
:root {
    /* kolory */
    --sc-ink: #0b0b0d; /* tusz: menu, naglowki tabel, ciemne karty */
    --sc-bg: #f2f2f2; /* tlo aplikacji */
    --sc-surface: #ffffff; /* karta */
    --sc-surface-muted: #f2f2f3; /* pola, drobne bloki */
    --sc-surface-accent: var(--sc-ink); /* ciemna karta */
    --sc-table-header: var(--sc-ink); /* naglowek tabel i siatek */
    --sc-border: #e3e3e6;
    --sc-border-strong: rgba(11, 11, 13, .22);
    --sc-text: #0b0b0d;
    --sc-text-muted: #5f5f67;
    --sc-text-invert: #ffffff;
    --sc-accent: #e70069; /* wypelnienia z bialym tekstem (przyciski, aktywne menu) */
    --sc-accent-600: #c2005b; /* akcent jako tekst na bieli */
    --sc-accent-100: #ffe3ef; /* tlo plakietek i zaznaczen */
    --sc-accent-bright: #ff2f8e; /* kreski, paski, znaczniki, wykresy */
    --sc-hl: rgba(255, 47, 142, .32); /* zakreslacz jak na stronie */
    /* stany */
    --sc-success: #0b0b0d;
    --sc-warning: #c2005b;
    --sc-danger: #d0312d;
    /* cienie: karty sa plaskie, cien tylko pod tym, co plywa (listy, okna) */
    --sc-shadow-sm: none;
    --sc-shadow-md: 0 8px 24px rgba(11, 11, 13, .10);
    --sc-shadow-lg: 0 18px 44px rgba(11, 11, 13, .16);
    /* promienie */
    --sc-radius-sm: 4px;
    --sc-radius-md: 6px;
    --sc-radius-lg: 6px;
    --sc-radius-xl: 8px;
    /* odstepy (siatka 4 px) */
    --sc-space-1: .25rem;
    --sc-space-2: .5rem;
    --sc-space-3: .75rem;
    --sc-space-4: 1rem;
    --sc-space-5: 1.25rem;
    --sc-space-6: 1.5rem;
    --sc-space-8: 2rem;
    --sc-space-10: 2.5rem;
    --sc-space-12: 3rem;
    /* typografia */
    --sc-font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --sc-font-display: "Anybody", "Instrument Sans", system-ui, sans-serif;
    --sc-font-size: 14px;
    --sc-leading: 1.45;
    /* rozne */
    --sc-focus: 0 0 0 3px rgba(255, 47, 142, .35);
    --sc-transition: 180ms cubic-bezier(.2,.7,.2,1);
}

/* Duze liczby i tytuly waskim krojem strony. Szerokosc 75 jest zamrozona w pliku,
   font-stretch tylko ja deklaruje (bez niego przegladarka szuka 100%). */
.u-display {
    font-family: var(--sc-font-display);
    font-stretch: 75%;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

html {
    font-size: var(--sc-font-size);
}

body {
    margin: 0;
    color: var(--sc-text);
    background: var(--sc-bg);
    font-family: var(--sc-font-family);
    line-height: var(--sc-leading);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--sc-focus);
}

/* 2) Layout primitives */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--sc-space-6);
}

.stack > * + * {
    margin-top: var(--sc-space-4);
}

.cluster {
    display: flex;
    gap: var(--sc-space-3);
    align-items: center;
    flex-wrap: wrap;
}

.grid {
    display: grid;
    gap: var(--sc-space-6);
}

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

.grid--3 {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.grid--4 {
    grid-template-columns: repeat(4, minmax(0,1fr));
}

/* Siatka kart platform (monitoring marketplace / sklepow WWW). */
.platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: 20px;
}

/* Breakpointy � mo�esz dostroi� warto�ci */
@media (max-width: 992px) {
    .grid--3 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

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

@media (max-width: 768px) {
    /* telefon: wszystko na 1 kolumn� */
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

.c-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px 24px;
    margin: 28px 0 22px;
}

.c-header__title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .c-header__title * {
        margin: 0px;
    }

    /* Tytul strony waskim krojem strony, jak naglowki na spycent.pl. */
    .c-header__title h2 {
        font-family: var(--sc-font-display);
        font-stretch: 75%;
        font-size: 40px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.005em;
    }

    .c-header__title p {
        font-size: 14px;
        color: var(--sc-text-muted);
    }

.c-header__action {
    display: flex;
    gap: 5px;
    align-items: center;
}
/* 3) Components */
/* Card */
.c-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-sm);
}

/* Ciemna karta (podsumowania, portfel): czarny tusz, akcent magenta niesie
   tresc - etykieta z paskiem, znaczniki, liczby wymagajace uwagi. */
.c-card--accent {
    background: var(--sc-surface-accent);
    color: var(--sc-text-invert);
    border-color: transparent;
}

    .c-card--accent .c-card__header {
        border-bottom-color: rgba(255, 255, 255, .14);
    }

/* Etykieta z magentowym paskiem - ta sama co nad sekcjami strony www. */
.c-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

    .c-eyebrow::before {
        content: "";
        flex: none;
        width: 18px;
        height: 9px;
        background: var(--sc-accent-bright);
    }

.c-card__header {
    padding: var(--sc-space-4) var(--sc-space-5);
    border-bottom: 1px solid var(--sc-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

    .c-card__header .c-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }

        .c-card__header .c-title * {
            margin: 0px;
            padding: 0px;
        }

        .c-card__header .c-title p {
            font-size: 12px;
        }

.c-card__body {
    padding: var(--sc-space-5);
}

.c-card__footer {
    padding: var(--sc-space-4) var(--sc-space-5);
    border-top: 1px solid var(--sc-border);
}

/* Buttons
   Jeden przycisk w calym panelu, jak na stronie: prostokat z malym zaokragleniem,
   glowny magenta (najechany przechodzi w tusz), drugorzedny bialy z cienka ramka.
   Fokus z klawiatury daje pierscien w kolorze wariantu, wylaczony blednie. Kazda
   akcja ma ikone przed tekstem (ph-duotone), przycisk z sama ikona dostaje --icon.
     (bez wariantu) / --ghost   drugorzedny: biale tlo, ramka
     --primary                  glowna akcja ekranu, jedna na widok
     --danger                   nieodwracalne (usun, anuluj subskrypcje)
     --sm / --lg                wysokosc 32 / 44 px, domyslnie 38 px
     --icon                     kwadrat z sama ikona (akcje w wierszu tabeli) */
.c-btn {
    --_h: 38px;
    --_bg: var(--sc-surface);
    --_bg-hover: var(--sc-surface);
    --_bg-active: #ececee;
    --_fg: var(--sc-text);
    --_fg-hover: var(--sc-text);
    --_icon: #5f5f67;
    --_bd: var(--sc-border-strong);
    --_bd-hover: var(--sc-ink);
    --_ring: rgba(11, 11, 13, .22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--_h);
    padding: 0 15px;
    border: 1px solid var(--_bd);
    border-radius: var(--sc-radius-sm);
    background: var(--_bg);
    color: var(--_fg);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

    .c-btn > i {
        flex: none;
        margin-left: -2px;
        font-size: 17px;
        color: var(--_icon);
        transition: color 140ms ease;
    }

    .c-btn:hover:not(:disabled) {
        background: var(--_bg-hover);
        border-color: var(--_bd-hover);
        color: var(--_fg-hover);
    }

    .c-btn:active:not(:disabled) {
        background: var(--_bg-active);
    }

    .c-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--_ring);
    }

    .c-btn:disabled,
    .c-btn[aria-disabled="true"] {
        opacity: .5;
        cursor: not-allowed;
    }

.c-btn--primary {
    --_bg: var(--sc-accent);
    --_bg-hover: var(--sc-ink);
    --_bg-active: #26262b;
    --_fg: #fff;
    --_fg-hover: #fff;
    --_icon: #fff;
    --_bd: transparent;
    --_bd-hover: transparent;
    --_ring: rgba(255, 47, 142, .4);
}

.c-btn--danger {
    --_bg: var(--sc-danger);
    --_bg-hover: #b0231f;
    --_bg-active: #951d1a;
    --_fg: #fff;
    --_fg-hover: #fff;
    --_icon: #fff;
    --_bd: transparent;
    --_bd-hover: transparent;
    --_ring: rgba(208, 49, 45, .32);
}

.c-btn--sm {
    --_h: 32px;
    gap: 6px;
    padding: 0 11px;
    font-size: 13px;
}

    .c-btn--sm > i {
        font-size: 15px;
    }

.c-btn--lg {
    --_h: 44px;
    padding: 0 20px;
    font-size: 14.5px;
}

.c-btn--icon {
    width: var(--_h);
    padding: 0;
}

    .c-btn--icon > i {
        margin: 0;
    }

/* Logo sklepu z zapasowa ikona (ShopLogo) - obrazek przykrywa ikone,
   a gdy sie nie wczyta, znika i zostaje ikona. */
.c-logo {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--logo-size, 30px);
    height: var(--logo-size, 30px);
    overflow: hidden;
    border-radius: 4px;
    background: var(--sc-surface-muted);
    color: var(--sc-text-muted);
    font-size: calc(var(--logo-size, 30px) * .55);
}

    .c-logo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: var(--sc-surface);
    }

/* Badges / Status chips
   Zwykly tekst w prostokacie, bez wersalikow. Tony z palety strony:
     (bez wariantu)  szary - stan neutralny (szkic, nieaktywny)
     --success       szary z tuszem - "w porzadku" nie potrzebuje koloru
     --accent        magenta - wyroznienie (najtansza oferta, polecany plan)
     --warning       jasna magenta - wymaga uwagi
     --danger        tusz - stan zly albo zablokowany (niedostepne, blad)
     --info          bialy z ramka - informacja (proforma, typ kanalu) */
.c-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 3px;
    background: #ececee;
    color: #3c3c42;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.c-badge--small {
    padding: 1px 6px;
    font-size: 11px;
}

.c-badge--accent {
    background: var(--sc-accent);
    color: #fff;
}

.c-badge--success {
    color: var(--sc-ink);
}

.c-badge--warning {
    background: var(--sc-accent-100);
    color: var(--sc-accent-600);
}

.c-badge--danger {
    background: var(--sc-ink);
    color: #fff;
}

.c-badge--info {
    background: var(--sc-surface);
    box-shadow: inset 0 0 0 1px var(--sc-border-strong);
    color: var(--sc-ink);
}

/* Tables */
.c-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .c-table th, .c-table td {
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--sc-border);
        vertical-align: middle;
    }

    .c-table tbody tr:hover {
        background: #fafafa;
    }

    .c-table .is-right {
        text-align: right;
    }

    .c-table .is-center {
        text-align: center;
    }

    /* Wiersz prowadzacy gdzies dalej - kursor i podswietlenie jak w siatkach. */
    .c-table tbody tr.is-clickable,
    .c-table--clickable tbody tr.rz-data-row {
        cursor: pointer;
    }


    /* === TABELA (RadzenDataGrid oraz tabele pisane recznie) ===
       Tlo jest plaskie i siedzi na komorkach, a nie na <thead> - dzieki temu
       daje sie zaokraglic naroza i nic sie nie pasmuje na styku komorek.
       text-align jest jawne, bo przegladarka domyslnie centruje <th>. */
    .c-table th {
        background: var(--sc-table-header) !important;
        color: #fff !important;
        text-align: left;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        padding: .7rem .75rem !important;
        border-bottom: 0 !important;
    }

    /* Radzen 8 zawija tytul kolumny w dwa spany plus ikone sortowania.
       Kolor z <th> nie kaskaduje przez element, ktory ma wlasny, wiec bierzemy
       wszystkie trzy - inaczej naglowek siatki zostaje szary na granacie. */
    .c-table thead .rz-column-title,
    .c-table thead .rz-column-title-content,
    .c-table thead .rz-sortable-column-icon,
    .c-table thead th .rz-cell-filter,
    .c-table thead th a {
        color: #fff !important;
    }

    .c-table thead {
        background: transparent;
    }

    /* Waska kolumna z dluzszym tytulem: tytul w dwoch liniach zamiast
       "Prioryt..." - ikona sortowania zostaje obok. Selektor mocniejszy niz
       Radzenowy (.rz-grid-table thead th ...), ktory tnie do jednej linii. */
    .c-table .rz-grid-table thead th .rz-column-title,
    .c-table .rz-grid-table thead th .rz-column-title-content {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }

    .c-table thead tr th:first-child {
        border-top-left-radius: var(--sc-radius-md);
    }

    .c-table thead tr th:last-child {
        border-top-right-radius: var(--sc-radius-md);
    }

    /* Gestszy wariant dla tabel osadzonych w kartach. */
    .c-table--compact th,
    .c-table--compact td {
        padding: .45rem .6rem !important;
    }

    .c-table td {
        padding: .625rem .75rem !important;
        border-bottom: 1px solid var(--sc-border) !important;
        vertical-align: middle !important;
    }

    /* Radzen tnie tresc komorki do jednej linii (nowrap + overflow hidden). Przy
       wlasnych szablonach z blokami w srodku elipsa sie nie pojawia i tekst po
       prostu znika za krawedzia - dlatego pozwalamy mu sie zawinac. Selektor
       musi byc mocniejszy niz Radzenowy, bo motyw laduje sie po naszych arkuszach. */
    .c-table .rz-grid-table td,
    .c-table .rz-grid-table td > .rz-cell-data {
        white-space: normal;
    }

    .c-table tbody tr:hover td {
        background: #fafafa !important;
    }


/* 4) Utilities (ma�a paczka) */
.u-muted {
    color: var(--sc-text-muted);
}

.u-invert {
    color: var(--sc-text-invert);
}

.u-center {
    display: grid;
    place-items: center;
}

.u-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.u-shadow-md {
    box-shadow: var(--sc-shadow-md);
}

.u-radius-lg {
    border-radius: var(--sc-radius-lg);
}

.u-gap-2 {
    gap: var(--sc-space-2);
}

.u-gap-3 {
    gap: var(--sc-space-3);
}

.u-gap-4 {
    gap: var(--sc-space-4);
}

.u-mt-4 {
    margin-top: var(--sc-space-4);
}

.u-mb-4 {
    margin-bottom: var(--sc-space-4);
}

.u-mt-6 {
    margin-top: var(--sc-space-6);
}

.u-mb-6 {
    margin-bottom: var(--sc-space-6);
}

.u-p-4 {
    padding: var(--sc-space-4);
}

/* Krecaca sie ikona (ph-circle-notch, ph-arrows-clockwise) - stan "w toku". */
.u-spin {
    display: inline-block;
    animation: u-spin 900ms linear infinite;
}

@keyframes u-spin {
    to {
        transform: rotate(360deg);
    }
}

/* === LOADING === */
.spy-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
}

    .spy-loading p {
        margin: 0;
        font-size: .8125rem;
        font-weight: 600;
        color: var(--sc-text-muted);
    }



/* Grupa produktu: kwadrat w kolorze grupy i nazwa zwyklym tekstem
   (kolor grupy wybiera klient, wiec nie moze byc tlem pod bialym tekstem). */
.spy-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #3c3c42;
}

    .spy-tag::before {
        content: "";
        flex: none;
        width: 9px;
        height: 9px;
        background: var(--tag-color, #a3a3aa);
    }

/* === AKCJE W WIERSZU ===
   Kwadrat z ikona; ton (--_tone) mowi, co akcja robi. Stany jak w .c-btn:
   najechanie i wcisniecie barwia tlo tonem, fokus z klawiatury daje pierscien. */
.spy-actions-cell {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.spy-action-btn {
    --_tone: #3c3c42;
    --_bg: #f2f2f3;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--sc-radius-sm);
    background: var(--_bg);
    color: var(--_tone);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

    .spy-action-btn i {
        font-size: 17px;
    }

    .spy-action-btn:hover:not(:disabled) {
        background: color-mix(in srgb, var(--_tone) 14%, var(--_bg));
    }

    .spy-action-btn:active:not(:disabled) {
        background: color-mix(in srgb, var(--_tone) 22%, var(--_bg));
    }

    .spy-action-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--_tone) 30%, transparent);
    }

    .spy-action-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

/* Edycja w magencie (najczestsza akcja), reszta w odcieniach tuszu; usuwanie
   ma czerwien dopiero po najechaniu - w spoczynku nie krzyczy z kazdego wiersza. */
.spy-action-view {
    --_tone: #3c3c42;
}

.spy-action-edit {
    --_tone: var(--sc-accent-600);
    --_bg: var(--sc-accent-100);
}

.spy-action-accept {
    --_tone: #fff;
    --_bg: var(--sc-ink);
}

    .spy-action-accept:hover:not(:disabled) {
        background: #2a2a30;
    }

.spy-action-delete {
    --_tone: #3c3c42;
}

    .spy-action-delete:hover:not(:disabled) {
        background: color-mix(in srgb, var(--sc-danger) 12%, #fff);
        color: var(--sc-danger);
    }



/* --- Lista klucz/wartosc (karta produktu, karta planu) ---
   Klasy byly uzywane w markupie od dawna, ale nigdy nie mialy definicji,
   wiec renderowaly sie jako goly stos divow. */
.kv {
    display: grid;
    gap: 2px;
}

.kv-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sc-space-4);
    padding: .5rem 0;
    border-bottom: 1px solid var(--sc-border);
}

    .kv-item:last-child {
        border-bottom: 0;
    }

.kv-key {
    font-size: 12px;
    color: var(--sc-text-muted);
}

.kv-val {
    font-size: 13px;
    text-align: right;
}

.kv-val--strong {
    font-weight: 700;
    color: var(--sc-text);
}

/* Na ciemnej karcie te same klasy musza sie odwrocic kolorystycznie. */
.c-card--accent .kv-item {
    border-bottom-color: rgba(255, 255, 255, .14);
}

.c-card--accent .kv-key {
    color: rgba(255,255,255,.62);
}

.c-card--accent .kv-val,
.c-card--accent .kv-val--strong {
    color: var(--sc-text-invert);
}

/* Baner informacyjny (komponent Banner) - jeden wyglad w calym panelu: nad
   lista, w formularzu i w dialogu. Biala karta, ikona w kolorze tonu, szary
   tekst. Ton zmienia tylko ikone i ramke, ksztalt zostaje ten sam. */
.c-banner {
    --_tone: var(--sc-accent);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 20px;
    padding: 14px 20px;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-surface);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--sc-text-muted);
}

    .c-banner:last-child,
    .c-form > .c-banner {
        margin-bottom: 0;
    }

    .c-banner strong {
        color: var(--sc-text);
    }

.c-banner__icon {
    flex: none;
    margin-top: 1px;
    font-size: 20px;
    color: var(--_tone);
}

.c-banner__body {
    flex: 1;
    min-width: 0;
}

.c-banner__title {
    display: block;
    font-weight: 700;
    color: var(--sc-text);
}

.c-banner--success {
    --_tone: var(--sc-ink);
}

.c-banner--warning {
    --_tone: var(--sc-accent-600);
    border-color: color-mix(in srgb, var(--sc-accent-bright) 45%, var(--sc-border));
}

.c-banner--danger {
    --_tone: var(--sc-danger);
    border-color: color-mix(in srgb, var(--sc-danger) 35%, var(--sc-border));
}

/* Okno modalne rysowane przez strone (bez DialogService) - np. zapis presetu
   filtrow, reczne linki do ofert. Szerokosc przez --modal-w. */
.c-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(11, 11, 13, .45);
}

.c-modal__box {
    width: var(--modal-w, 480px);
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: var(--sc-radius-xl);
    box-shadow: var(--sc-shadow-lg);
}

.c-modal__head {
    padding: 20px 24px;
    border-bottom: 1px solid var(--sc-border);
}

    .c-modal__head h4 {
        margin: 0;
    }

.c-modal__body {
    padding: 24px;
}

.c-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--sc-border);
}

/* Pusty stan listy/strony: ikona, tytul, opis. */
.c-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--sc-text-muted);
}

    .c-empty h4 {
        margin: 0 0 8px;
        color: var(--sc-text);
    }

    .c-empty p {
        max-width: 520px;
        margin: 0 auto;
    }

.c-empty__icon {
    display: block;
    margin-bottom: 12px;
    font-size: 40px;
    color: var(--sc-text-muted);
}

/* Drobna informacja w naglowku strony (np. licznik aktywnych platform). */
.c-header__meta {
    font-size: 12px;
    color: var(--sc-text-muted);
}

    .c-header__meta strong {
        color: var(--sc-accent-600);
    }

.c-header__meta-warn {
    margin-left: 8px;
    color: var(--sc-danger);
}

/* Kafle KPI: etykieta nad duza liczba. Kolumny dopasowuja sie do szerokosci. */
.c-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}

.c-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 18px 20px;
}

.c-kpi__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--sc-text-muted);
}

.c-kpi__value {
    font-family: var(--sc-font-display);
    font-stretch: 75%;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.c-kpi__value--sm {
    font-size: 16px;
    font-weight: 700;
}

.c-kpi__hint {
    font-size: 12px;
    color: var(--sc-text-muted);
}

/* Pasek liczb strony (pulpit, analiza konkurencji): jedna karta, pola
   rozdzielone linia, etykieta z ikona, duza liczba, podpis. Pole moze byc
   linkiem. Na telefonie dwa w rzedzie. */
.c-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    margin-bottom: 20px;
    overflow: hidden;
}

.c-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 20px 24px 18px;
    color: inherit;
    text-decoration: none;
    transition: background-color 140ms ease;
}

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

    a.c-stat:hover {
        background: #fafafa;
    }

    .c-stat:focus-visible {
        outline: none;
        box-shadow: inset 0 0 0 2px rgba(255, 47, 142, .45);
    }

.c-stat__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sc-text-muted);
}

    .c-stat__label i {
        font-size: 16px;
        color: var(--sc-text-muted);
    }

/* Duza liczba waskim krojem strony. */
.c-stat__value {
    font-family: var(--sc-font-display);
    font-stretch: 75%;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .005em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

    .c-stat__value.is-accent {
        color: var(--sc-accent-600);
    }

    .c-stat__value.is-danger {
        color: var(--sc-danger);
    }

    .c-stat__value.is-empty {
        color: var(--sc-text-muted);
    }

    /* Nazwa zamiast liczby (np. sprzedawca) - mniejsza, zeby nie lamala pola. */
    .c-stat__value--text {
        font-family: var(--sc-font-family);
        font-stretch: normal;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
    }

.c-stat__hint {
    font-size: 13px;
    line-height: 1.4;
    color: var(--sc-text-muted);
}

/* Opis pod naglowkiem karty (przed lista pol/wyborow). */
.c-card__lead {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--sc-text-muted);
}

/* Pasek filtrow-przelacznikow nad lista (statusy rekomendacji itp.). */
.c-filterbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
}

.c-filterbar__label {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-text-muted);
}

.c-filterbar__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

    .c-filterbar__items .c-btn {
        white-space: nowrap;
    }

.c-filterbar__count {
    padding: 0 6px;
    border-radius: 3px;
    background: rgba(11, 11, 13, .07);
    font-size: 11.5px;
    font-weight: 700;
}

.c-btn--primary .c-filterbar__count {
    background: rgba(255, 255, 255, .25);
}

/* === Integracje: sekcje, siatka i karty (import i eksport) === */
.integ-section {
    margin-bottom: 32px;
}

    .integ-section__title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--sc-text);
        margin: 0 0 12px 0;
    }

        .integ-section__title::before {
            content: "";
            flex: none;
            width: 18px;
            height: 9px;
            background: var(--sc-accent-bright);
        }

.integ-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}

.integ-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--sc-border);
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

    .integ-card:hover:not(.integ-card--soon) {
        border-color: var(--sc-ink);
    }

.integ-card--wide {
    grid-column: 1 / -1;
    padding: 24px;
}

.integ-card--soon {
    opacity: 0.6;
}

.integ-card__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.integ-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: var(--sc-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

/* Integracja z zewnetrzna platforma (jeszcze niedostepna) - szara, nie cyjan. */
.integ-card__icon--brand {
    background: var(--sc-surface-muted);
    color: var(--sc-text-muted);
}

.integ-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--sc-text);
}

.integ-card__desc {
    margin: 0;
    font-size: .82rem;
    color: var(--sc-text-muted);
    line-height: 1.5;
    flex: 1;
}

.integ-card__action {
    margin-top: 8px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.integ-card__actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.integ-card__badge {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    background: #ececee;
    color: var(--sc-text-muted);
    margin-top: 8px;
}

.integ-card__body {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Grupa uprawnien w formularzu uzytkownika (panel klienta i super-admin). */
.perm-group {
    overflow: hidden;
    border: 1px solid var(--sc-border);
    border-radius: 6px;
    background: #fff;
}

.perm-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-surface-muted);
}

.perm-group__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
}

    .perm-group__title i {
        font-size: 18px;
        color: var(--sc-accent-600);
    }

.perm-group__toggle {
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--sc-accent-600);
    cursor: pointer;
}

.perm-group__list {
    display: grid;
    padding: 6px 14px 10px;
}

.perm-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sc-surface-muted);
    cursor: pointer;
}

    .perm-item:last-child {
        border-bottom: 0;
    }

    .perm-item input {
        margin-top: 1px;
    }

.perm-item__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .perm-item__text b {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
    }

    .perm-item__text small {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 10.5px;
        color: var(--sc-text-muted);
        overflow-wrap: anywhere;
    }