/* /Components/Branding/LivePreview.razor.rz.scp.css */
/* Zywy podglad sklepu w ramce. Styl dotyczy WYLACZNIE obudowy podgladu w panelu admina —
   wnetrze ramki to osobny dokument i te reguly go nie dotykaja (CSS isolation i tak by tam nie wszedl). */

.lay-live[b-lsgdbn5c1o] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lay-live-bar[b-lsgdbn5c1o] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.lay-live-stage[b-lsgdbn5c1o] {
    /* Ramka wezsza od sceny (tablet/telefon) ma stac na srodku, a nie przy lewej krawedzi. */
    display: flex;
    justify-content: center;
    background: var(--bs-secondary-bg, #f1f3f5);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    padding: 0.75rem;
    overflow: auto;
}

.lay-live-frame[b-lsgdbn5c1o] {
    /* Wysokosc stala, nie procentowa: rodzic nie ma wlasnej wysokosci, wiec procent dalby 0 px.
       Ramka i tak przewija sie w srodku, wiec dluga strona jest dostepna. */
    height: 70vh;
    min-height: 420px;
    border: 0;
    border-radius: 0.375rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    transition: width 0.15s ease;
}

.lay-live-hint[b-lsgdbn5c1o] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
}
/* /Components/Branding/ShopColorEditor.razor.rz.scp.css */
/* Edytor kolorow sklepu. Wszystkie kolory MAKIETY ida z inline style w znaczniku — tutaj jest
   wylacznie geometria, zeby podglad reagowal na zmiane przed zapisem. */

.sce[b-u6owxhczb3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sce-head[b-u6owxhczb3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.sce-title[b-u6owxhczb3] {
    font-weight: 600;
    font-size: 0.95rem;
}

.sce-sub[b-u6owxhczb3] {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    line-height: 1.45;
    max-width: 62ch;
}

/* ── Przelacznik jasne / ciemne ─────────────────────────────── */
.sce-toggle[b-u6owxhczb3] {
    display: inline-flex;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 0.4rem;
    overflow: hidden;
    flex-shrink: 0;
}

.sce-toggle button[b-u6owxhczb3] {
    border: 0;
    background: #fff;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
}

.sce-toggle button.is-on[b-u6owxhczb3] {
    background: var(--brand-primary, #2563eb);
    color: #fff;
}

/* ── Galeria zestawow ───────────────────────────────────────── */
.sce-gallery[b-u6owxhczb3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.6rem;
}

.sce-scheme[b-u6owxhczb3] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
    padding: 0;
    border: 1.5px solid var(--border-light, #e5e7eb);
    border-radius: 0.5rem;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sce-scheme:hover[b-u6owxhczb3] {
    border-color: var(--brand-primary-light, #3b82f6);
}

.sce-scheme.is-on[b-u6owxhczb3] {
    border-color: var(--brand-primary, #2563eb);
    box-shadow: inset 0 0 0 1px var(--brand-primary, #2563eb);
}

.sce-strip[b-u6owxhczb3] {
    display: flex;
    height: 34px;
}

.sce-strip span[b-u6owxhczb3] {
    flex: 1;
}

.sce-strip span:first-child[b-u6owxhczb3] {
    flex: 2;
}

.sce-scheme-name[b-u6owxhczb3] {
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0 0.6rem;
}

.sce-scheme-desc[b-u6owxhczb3] {
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--text-muted, #64748b);
    padding: 0 0.6rem 0.55rem;
}

/* ── Makieta i panel ────────────────────────────────────────── */
.sce-stage[b-u6owxhczb3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 1rem;
    align-items: start;
}

/* Tryb samego podgladu (zakladka „Szablon") — panel kolorow nie jest renderowany,
   wiec makieta bierze cala szerokosc. */
.sce-stage.is-preview-only[b-u6owxhczb3] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 991.98px) {
    .sce-stage[b-u6owxhczb3] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sce-surface-bar[b-u6owxhczb3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.sce-hint[b-u6owxhczb3] {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    max-width: 52ch;
}

/* ── Powierzchnia: karta produktu ───────────────────────────── */
.sce-body-product[b-u6owxhczb3] {
    align-items: flex-start;
}

.sce-col[b-u6owxhczb3] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sce-photo[b-u6owxhczb3] {
    height: 78px;
    border: 1px solid;
}

.sce-tabs[b-u6owxhczb3] {
    display: flex;
    gap: 0.4rem;
    padding: 0.2rem 0;
}

    .sce-tabs span[b-u6owxhczb3] {
        padding: 0.15rem 0.35rem;
        border-bottom: 2px solid transparent;
    }

        .sce-tabs span:first-child[b-u6owxhczb3] {
            font-weight: 700;
        }

.sce-ladder[b-u6owxhczb3] {
    border: 1px solid;
    overflow: hidden;
}

.sce-ladder-row[b-u6owxhczb3] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.2rem 0.4rem;
    border-left: 3px solid transparent;
}

    .sce-ladder-row.is-on[b-u6owxhczb3] {
        font-weight: 700;
    }

.sce-buy[b-u6owxhczb3] {
    width: 150px;
    flex-shrink: 0;
    border: 1px solid;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sce-buy-price[b-u6owxhczb3] {
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.1;
}

.sce-buy-vat[b-u6owxhczb3],
.sce-buy-stock[b-u6owxhczb3] {
    font-size: 0.62rem;
}

.sce-buy-stock[b-u6owxhczb3] {
    color: #166534;
}

.sce-buy-qty[b-u6owxhczb3] {
    border: 1px solid;
    padding: 0.1rem 0.35rem;
    font-size: 0.66rem;
    align-self: flex-start;
    min-width: 2.2rem;
    text-align: center;
}

/* ── Powierzchnia: koszyk ───────────────────────────────────── */
.sce-body-cart[b-u6owxhczb3] {
    align-items: flex-start;
}

.sce-lines[b-u6owxhczb3] {
    flex: 1;
    min-width: 0;
    border: 1px solid;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sce-line[b-u6owxhczb3] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.sce-line-img[b-u6owxhczb3] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 0.2rem;
    background: rgba(127, 127, 127, .14);
}

.sce-line-name[b-u6owxhczb3] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sce-line-sum[b-u6owxhczb3] {
    font-weight: 800;
    flex-shrink: 0;
}

.sce-summary[b-u6owxhczb3] {
    width: 160px;
    flex-shrink: 0;
    border: 1px solid;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sce-summary-title[b-u6owxhczb3] {
    font-weight: 700;
}

.sce-summary-row[b-u6owxhczb3] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .sce-buy[b-u6owxhczb3],
    .sce-summary[b-u6owxhczb3] {
        width: 120px;
    }
}

.sce-chips[b-u6owxhczb3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
}

.sce-chips button[b-u6owxhczb3] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--border-light, #e5e7eb);
    background: #fff;
    color: var(--text-mid, #1e293b);
    border-radius: 999px;
    font-size: 0.76rem;
    padding: 0.2rem 0.7rem;
}

.sce-chips button.is-on[b-u6owxhczb3] {
    border-color: var(--brand-primary, #2563eb);
    background: var(--brand-primary, #2563eb);
    color: #fff;
}

.sce-chip-dot[b-u6owxhczb3] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}

.sce-preview[b-u6owxhczb3] {
    border: 1px solid var(--border-light, #e5e7eb);
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.4;
    user-select: none;
}

/* Kazdy obszar jest klikalny; obwodka pokazuje, ktory jest wlasnie edytowany. */
.sce-area[b-u6owxhczb3] {
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color .12s ease;
}

.sce-area:hover[b-u6owxhczb3] {
    outline-color: rgba(37, 99, 235, .35);
}

.sce-area.is-armed[b-u6owxhczb3] {
    outline-color: var(--brand-primary, #2563eb);
}

.sce-preview > .sce-area:first-child[b-u6owxhczb3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
}

.sce-brand[b-u6owxhczb3] {
    font-weight: 800;
    white-space: nowrap;
}

.sce-search[b-u6owxhczb3] {
    flex: 1;
    padding: 0.2rem 0.5rem;
    opacity: .85;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sce-icons[b-u6owxhczb3] {
    display: flex;
    gap: 0.45rem;
    flex-shrink: 0;
}

.sce-preview > .sce-area:nth-child(2)[b-u6owxhczb3] {
    display: flex;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid rgba(127, 127, 127, .16);
    border-bottom: 1px solid rgba(127, 127, 127, .16);
}

.sce-preview > .sce-area:nth-child(2) span[b-u6owxhczb3] {
    padding: 0.12rem 0.5rem;
}

.sce-body[b-u6owxhczb3] {
    display: flex;
    gap: 0.6rem;
    padding: 0.7rem;
}

.sce-rail[b-u6owxhczb3] {
    width: 120px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.35rem;
}

.sce-rail span[b-u6owxhczb3] {
    padding: 0.16rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sce-tiles[b-u6owxhczb3] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .sce-tiles[b-u6owxhczb3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sce-rail[b-u6owxhczb3] {
        width: 88px;
    }
}

.sce-tile[b-u6owxhczb3] {
    border: 1px solid;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.sce-tile-img[b-u6owxhczb3] {
    position: relative;
    height: 42px;
    background: rgba(127, 127, 127, .14);
    border-radius: 0.2rem;
}

.sce-tile-badge[b-u6owxhczb3] {
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0 0.25rem;
}

.sce-tile-name[b-u6owxhczb3] {
    font-size: 0.66rem;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sce-tile-price[b-u6owxhczb3] {
    font-weight: 800;
    font-size: 0.74rem;
}

.sce-tile-buy[b-u6owxhczb3] {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.2rem 0.25rem;
}

.sce-footer[b-u6owxhczb3] {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgba(127, 127, 127, .16);
}

/* ── Panel obszaru ──────────────────────────────────────────── */
.sce-panel[b-u6owxhczb3] {
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 0.5rem;
    background: var(--surface-subtle, #f8fafc);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* PODGLAD jedzie z lista pol, a nie odwrotnie. Wczesniej przyklejony byl panel pol — bezskutecznie,
   bo przy kilkunastu polach jest wyzszy od ekranu, wiec i tak sie przewijal. Przewijana jest kolumna
   z polami, a podglad ma zostac w kadrze, inaczej administrator przesuwa suwak i nie widzi skutku. */
.sce-left[b-u6owxhczb3] {
    position: sticky;
    top: 4.5rem;
}

@media (max-width: 991.98px) {
    /* Jedna kolumna: przyklejanie ustawiloby podglad NAD polami i zjadlo pol ekranu. */
    .sce-left[b-u6owxhczb3] {
        position: static;
    }
}

.sce-panel-head[b-u6owxhczb3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.sce-field[b-u6owxhczb3] {
    background: #fff;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 0.4rem;
    padding: 0.45rem 0.5rem;
    /* Kotwica dla dymka z wyjasnieniem — dymek ma sie rozciagnac na szerokosc pola,
       a nie na szerokosc samej ikonki. */
    position: relative;
}

.sce-field.is-set[b-u6owxhczb3] {
    border-color: var(--brand-primary, #2563eb);
}

.sce-field-row[b-u6owxhczb3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.sce-reset[b-u6owxhczb3] {
    border: 1px solid var(--border-light, #e5e7eb);
    background: #fff;
    color: var(--text-muted, #64748b);
    border-radius: 0.3rem;
    padding: 0.15rem 0.4rem;
    flex-shrink: 0;
}

.sce-reset:disabled[b-u6owxhczb3] {
    opacity: .4;
}

.sce-field-name[b-u6owxhczb3] {
    font-weight: 600;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Ikonka „i" z wyjasnieniem. Dymek pokazuje sie po najechaniu ORAZ po ustawieniu fokusu klawiatura —
   samo :hover odcinaloby obsluge z klawiatury, a to jedyne miejsce, gdzie stoi opis pola. */
.sce-help[b-u6owxhczb3] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--border-light, #e5e7eb);
    color: var(--text-muted, #64748b);
    font-size: 0.62rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    cursor: help;
    user-select: none;
}

    .sce-help:hover[b-u6owxhczb3],
    .sce-help:focus-visible[b-u6owxhczb3] {
        background: var(--brand-primary, #2563eb);
        color: #fff;
        outline: none;
    }

    .sce-help[b-u6owxhczb3]::after {
        content: attr(data-help);
        position: absolute;
        left: 0.4rem;
        right: 0.4rem;
        top: calc(100% - 0.3rem);
        z-index: 40;
        display: none;
        background: #0f172a;
        color: #fff;
        font-weight: 400;
        font-style: normal;
        font-size: 0.7rem;
        line-height: 1.35;
        text-align: left;
        padding: 0.4rem 0.5rem;
        border-radius: 0.35rem;
        box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.55);
    }

    .sce-help:hover[b-u6owxhczb3]::after,
    .sce-help:focus-visible[b-u6owxhczb3]::after {
        display: block;
    }

.sce-field-help[b-u6owxhczb3] {
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--text-muted, #64748b);
}

/* Przelacznik pol drugiego planu. Celowo nie wyglada jak przycisk akcji — nic nie zmienia w sklepie,
   tylko pokazuje to, co juz jest. */
.sce-more[b-u6owxhczb3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    border: 1px dashed var(--border-light, #e5e7eb);
    background: none;
    border-radius: 0.4rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
}

    .sce-more:hover[b-u6owxhczb3] {
        border-color: var(--brand-primary, #2563eb);
        color: var(--brand-primary, #2563eb);
    }

/* Licznik zmienionych ustawien — po zwinieciu to jedyny slad, ze cos tam siedzi. */
.sce-more-count[b-u6owxhczb3] {
    margin-left: auto;
    min-width: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--brand-primary, #2563eb);
    color: #fff;
    font-size: 0.65rem;
    line-height: 1.15rem;
    text-align: center;
}

.sce-warn[b-u6owxhczb3] {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    line-height: 1.35;
    color: #92400e;
    background: #fef3c7;
    border-radius: 0.3rem;
    padding: 0.25rem 0.4rem;
}
/* /Components/Branding/ThemePreviewFragment.razor.rz.scp.css */
/* Mini-podglady dla zakladki „Wyglad". Wszystkie kolory czerpane z var(--...) ustawionych
   inline na .tpf-frame (efektywna paleta), wiec podglad reaguje na zywo na edycje kontrolek.
   Klasy odwzorowuja wizualnie realne elementy — odpowiedniki regul scoped z MainLayout.razor.css
   / NavMenu.razor.css / app.css (te nie dosiegaja tego komponentu przez ::deep, wiec replikujemy). */

.tpf-frame[b-oajtv0vb6c] {
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    padding: 10px;
    font-size: 0.82rem;
    line-height: 1.25;
}

/* ---------- Sidebar ---------- */
.tpf-sidebar[b-oajtv0vb6c] {
    width: 100%;
    max-width: 250px;
    border-radius: 10px;
    padding: 12px 10px;
    background: var(--sidebar-gradient, linear-gradient(180deg, #0f172a 0%, #1e293b 100%));
}

.tpf-sb-brand[b-oajtv0vb6c] {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 2px 6px 10px;
}

.tpf-sb-section[b-oajtv0vb6c] {
    color: var(--el-sidebar-section, rgba(255, 255, 255, 0.55));
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 6px 4px;
}

.tpf-sb-link[b-oajtv0vb6c] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--el-sidebar-text, rgba(255, 255, 255, 0.82));
    padding: 7px 8px;
    margin-bottom: 3px;
    border-radius: 8px;
    font-size: 0.8rem;
}

.tpf-sb-link-active[b-oajtv0vb6c] {
    background: var(--sidebar-active-bg, linear-gradient(180deg, #3b82f6, #2563eb));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.tpf-sb-ico[b-oajtv0vb6c] {
    opacity: 0.85;
    font-size: 0.85rem;
}

/* ---------- Topbar (sync z MainLayout.razor.css: .topbar, ::deep .page-header-*, ::deep .*-trigger) ---------- */
.tpf-topbar[b-oajtv0vb6c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-light, #e2e8f0);
    background: var(--topbar-bg, #fff);
}

.tpf-tb-left[b-oajtv0vb6c] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tpf-tb-icon[b-oajtv0vb6c] {
    font-size: 1.1rem;
    color: var(--topbar-icon-color, var(--brand-primary, #2563eb));
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.tpf-tb-title[b-oajtv0vb6c] {
    font-weight: 600;
    color: var(--topbar-text-color, var(--text-dark, #0f172a));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpf-tb-right[b-oajtv0vb6c] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tpf-tb-btn[b-oajtv0vb6c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--topbar-button-bg, #ffffff);
    border: 1px solid var(--topbar-button-border, #e5e7eb);
    color: var(--topbar-button-text, var(--text-dark, #0f172a));
}

.tpf-tb-badge[b-oajtv0vb6c] {
    background: var(--el-cart-badge-bg, var(--brand-primary, #2563eb));
    color: var(--el-cart-badge-text, #fff);
    border-radius: 999px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ---------- Catalog / karta produktu ---------- */
.tpf-cat-head[b-oajtv0vb6c] {
    background: var(--table-header-bg, #64707d);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
}

.tpf-card[b-oajtv0vb6c] {
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    background: #fff;
}

.tpf-prod[b-oajtv0vb6c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.tpf-prod-img[b-oajtv0vb6c] {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--surface-subtle, #f1f5f9);
    display: grid;
    place-items: center;
    color: var(--text-soft, #94a3b8);
    font-size: 0.6rem;
}

.tpf-prod-body[b-oajtv0vb6c] {
    flex: 1;
    min-width: 0;
}

.tpf-prod-title[b-oajtv0vb6c] {
    font-weight: 700;
    color: var(--el-link, var(--text-mid, #1e293b));
    font-size: 0.82rem;
}

.tpf-prod-sku[b-oajtv0vb6c] {
    color: var(--text-muted, #64748b);
    font-size: 0.7rem;
    margin: 2px 0;
}

.tpf-prod-pricerow[b-oajtv0vb6c] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tpf-prod-price[b-oajtv0vb6c] {
    font-weight: 700;
    color: var(--el-price, var(--brand-primary-dark, #1e40af));
}

.tpf-badge-promo[b-oajtv0vb6c] {
    background: var(--el-promo-bg, var(--danger, #dc2626));
    color: #fff;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 0.68rem;
    font-weight: 700;
}

.tpf-prod-side[b-oajtv0vb6c] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.tpf-stock[b-oajtv0vb6c] {
    color: var(--el-stock-text, #15803d);
    background: var(--el-stock-bg, rgba(34, 197, 94, 0.12));
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 600;
}

.tpf-btn-primary[b-oajtv0vb6c] {
    background: var(--btn-primary-bg, var(--brand-primary, #2563eb));
    color: #fff;
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.tpf-producer[b-oajtv0vb6c] {
    background: var(--el-producer-bg, #212529);
    color: var(--el-producer-text, #fff);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 0.62rem;
    font-weight: 600;
}

.tpf-inline[b-oajtv0vb6c] {
    background: var(--el-inline-bg, rgba(255, 193, 7, 0.18));
    color: var(--el-inline-text, #8a5a00);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Cart ---------- */
.tpf-cart-trigger[b-oajtv0vb6c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border-light, #e2e8f0);
    color: var(--text-mid, #1e293b);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.tpf-cart-card[b-oajtv0vb6c] {
    padding: 4px 12px;
}

.tpf-cart-line[b-oajtv0vb6c] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    color: var(--text-mid, #1e293b);
    font-size: 0.78rem;
}

.tpf-cart-name[b-oajtv0vb6c] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpf-cart-val[b-oajtv0vb6c] {
    color: var(--text-muted, #64748b);
    flex-shrink: 0;
}

.tpf-cart-total[b-oajtv0vb6c] {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    font-weight: 700;
    color: var(--text-dark, #0f172a);
}

.tpf-cart-sum[b-oajtv0vb6c] {
    color: var(--brand-primary, #2563eb);
}

/* ---------- Buttons & akcenty ---------- */
.tpf-btn-row[b-oajtv0vb6c] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tpf-btn-row-2[b-oajtv0vb6c] {
    margin-top: 10px;
}

.tpf-btn-disabled[b-oajtv0vb6c] {
    background: var(--btn-primary-disabled-bg, #9ca3af);
    color: #fff;
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.tpf-link[b-oajtv0vb6c] {
    color: var(--el-link-hover, var(--brand-primary, #2563eb));
    font-weight: 600;
    text-decoration: underline;
    font-size: 0.8rem;
}

/* ---------- Palette ---------- */
.tpf-pal-grid[b-oajtv0vb6c] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tpf-pal-item[b-oajtv0vb6c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
}

.tpf-pal-chip[b-oajtv0vb6c] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.tpf-pal-label[b-oajtv0vb6c] {
    font-size: 0.62rem;
    color: var(--text-muted, #64748b);
    text-align: center;
    line-height: 1.1;
}
/* /Components/Common/AgentSessionBanner.razor.rz.scp.css */
.agent-session-banner[b-lulrlnjj4d] {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
    border-bottom: 2px solid #991b1b;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.18);
    position: sticky;
    top: 0;
    z-index: 1040;
}

.agent-session-banner i[b-lulrlnjj4d] {
    flex-shrink: 0;
}

.agent-session-banner .min-w-0[b-lulrlnjj4d] {
    min-width: 0;
}

.agent-session-banner .btn-light[b-lulrlnjj4d] {
    color: #b91c1c;
    border: 1px solid #fee2e2;
    font-weight: 600;
}

.agent-session-banner .btn-light:hover[b-lulrlnjj4d] {
    background: #fef2f2;
    color: #7f1d1d;
}
/* /Components/Common/ColorPicker.razor.rz.scp.css */
.cp[b-z2tme1p3r0] {
    position: relative;
    flex-shrink: 0;
}

/* ── Przycisk otwierajacy ───────────────────────────────────── */
.cp-trigger[b-z2tme1p3r0] {
    width: 34px;
    height: 30px;
    padding: 2px;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 0.3rem;
    background: #fff;
    display: block;
}

.cp.is-open .cp-trigger[b-z2tme1p3r0] {
    border-color: var(--brand-primary, #2563eb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary, #2563eb) 22%, transparent);
}

.cp-trigger-swatch[b-z2tme1p3r0] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.2rem;
    /* Szachownica pod probka — bez niej biel i przezroczystosc wygladaja identycznie. */
    background-image: linear-gradient(45deg, #e9ecef 25%, transparent 25%), linear-gradient(-45deg, #e9ecef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9ecef 75%), linear-gradient(-45deg, transparent 75%, #e9ecef 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

/* Warstwa lapiaca klikniecie poza panelem. Musi byc POD panelem (z-index 29 < 30), zeby samo
   wnetrze probnika dalo sie nadal obslugiwac, i „fixed", zeby objela cale okno niezaleznie od tego,
   jak gleboko w formularzu stoi probnik. Bez tla — ma zamykac, a nie przyciemniac. */
.cp-backdrop[b-z2tme1p3r0] {
    position: fixed;
    inset: 0;
    z-index: 29;
}

/* ── Panel ──────────────────────────────────────────────────── */
.cp-panel[b-z2tme1p3r0] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.35rem);
    left: 0;
    width: 216px;
    padding: 0.6rem;
    background: #fff;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 16px 34px -18px rgba(15, 23, 42, .45);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Przy prawej krawedzi panelu ustawien okno wyszlo by poza ekran. */
@media (max-width: 991.98px) {
    .cp-panel[b-z2tme1p3r0] {
        left: auto;
        right: 0;
    }
}

/* ── Kwadrat nasycenia i jasnosci ───────────────────────────── */
.cp-field[b-z2tme1p3r0] {
    position: relative;
    height: 130px;
    border-radius: 0.35rem;
    cursor: crosshair;
    touch-action: none;
    /* Warstwy: czern od dolu, biel od lewej, pod spodem czysty odcien z suwaka. */
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, transparent),
        var(--cp-hue, #f00);
}

.cp-field:focus-visible[b-z2tme1p3r0] {
    outline: 2px solid var(--brand-primary, #2563eb);
    outline-offset: 2px;
}

.cp-knob[b-z2tme1p3r0] {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
    pointer-events: none;
}

/* ── Suwak odcienia ─────────────────────────────────────────── */
.cp-hue[b-z2tme1p3r0] {
    position: relative;
    height: 12px;
    border-radius: 999px;
    cursor: pointer;
    touch-action: none;
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

.cp-hue-knob[b-z2tme1p3r0] {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .3);
    pointer-events: none;
}

/* ── Wiersz z podgladem i kodem ─────────────────────────────── */
.cp-row[b-z2tme1p3r0] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cp-preview[b-z2tme1p3r0] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 0.3rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.cp-hex[b-z2tme1p3r0] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.76rem;
    min-width: 0;
}

.cp-icon[b-z2tme1p3r0] {
    flex-shrink: 0;
    border: 1px solid var(--border-light, #e5e7eb);
    background: #fff;
    color: var(--text-muted, #64748b);
    border-radius: 0.3rem;
    padding: 0.15rem 0.4rem;
}

.cp-icon:hover[b-z2tme1p3r0] {
    color: var(--brand-primary, #2563eb);
}

/* ── Szybkie probki ─────────────────────────────────────────── */
.cp-swatches[b-z2tme1p3r0] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.25rem;
}

.cp-swatch[b-z2tme1p3r0] {
    height: 20px;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, .12);
    padding: 0;
}

.cp-swatch.is-on[b-z2tme1p3r0] {
    box-shadow: 0 0 0 2px var(--brand-primary, #2563eb);
}
/* /Components/Common/IconPicker.razor.rz.scp.css */
.icon-picker[b-b634dcj4qt] {
    position: relative;
    flex: 0 0 auto;
}

.icon-picker-toggle[b-b634dcj4qt] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.45rem;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    color: #212529;
    line-height: 1;
    cursor: pointer;
}

.icon-picker-toggle:hover[b-b634dcj4qt] {
    border-color: #86b7fe;
}

.icon-picker-toggle > .bi:first-child[b-b634dcj4qt] {
    font-size: 1.05rem;
}

.icon-picker-caret[b-b634dcj4qt] {
    font-size: 0.65rem;
    color: #6c757d;
}

/* Podkladka na cala strone — zamyka siatke klikiem gdziekolwiek obok.
   Warstwa NIZSZA niz sama siatka, zeby nie przechwytywala klikniec w ikony. */
.icon-picker-backdrop[b-b634dcj4qt] {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.icon-picker-menu[b-b634dcj4qt] {
    position: absolute;
    z-index: 1051;
    top: calc(100% + 0.25rem);
    left: 0;
    width: 21rem;
    max-height: 17rem;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem;
    padding: 0.35rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.18);
}

.icon-picker-item[b-b634dcj4qt] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.4rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    font-size: 0.78rem;
    text-align: left;
    color: #212529;
    cursor: pointer;
}

.icon-picker-item .bi[b-b634dcj4qt] {
    font-size: 1rem;
    width: 1.25rem;
    flex: 0 0 auto;
    text-align: center;
}

.icon-picker-item > span[b-b634dcj4qt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-picker-item:hover[b-b634dcj4qt] {
    background: #f1f3f5;
}

.icon-picker-item.is-active[b-b634dcj4qt] {
    background: #e7f1ff;
    border-color: #86b7fe;
    font-weight: 600;
}

/* Na waskim ekranie dwie kolumny nazw sie nie mieszcza — zostaje jedna. */
@media (max-width: 575.98px) {
    .icon-picker-menu[b-b634dcj4qt] {
        width: 14rem;
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Common/ShadowPicker.razor.rz.scp.css */
.shp[b-mqlxf92gyw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Przelacznik ustawien szczegolowych. Wyglada jak odnosnik, nie jak przycisk — nie jest akcja,
   tylko pokazaniem tego, co juz jest. */
.shp-more[b-mqlxf92gyw] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    background: none;
    padding: 0;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    cursor: pointer;
}

    .shp-more:hover[b-mqlxf92gyw] {
        color: var(--brand-primary, #2563eb);
    }

.shp-preview-row[b-mqlxf92gyw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Probka na SZAREJ podkladce: cien na bialym tle jest praktycznie niewidoczny, wiec administrator
   przesuwalby suwaki na slepo. */
.shp-preview[b-mqlxf92gyw] {
    width: 46px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 0.35rem;
    background: #fff;
    outline: 1px solid rgba(15, 23, 42, 0.08);
}

.shp-preview-row[b-mqlxf92gyw] {
    background: #eef1f5;
    border-radius: 0.4rem;
    padding: 0.5rem;
}

.shp-hex[b-mqlxf92gyw] {
    min-width: 0;
}

.shp-slider[b-mqlxf92gyw] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

    .shp-slider label[b-mqlxf92gyw] {
        font-size: 0.75rem;
        color: var(--bs-secondary-color, #6c757d);
        display: flex;
        justify-content: space-between;
    }

    .shp-slider b[b-mqlxf92gyw] {
        font-variant-numeric: tabular-nums;
        color: var(--bs-body-color, #212529);
    }

    .shp-slider .form-range[b-mqlxf92gyw] {
        margin: 0;
    }

.shp-raw[b-mqlxf92gyw] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.shp-raw-note[b-mqlxf92gyw] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
}
/* /Components/Common/SimpleHtmlEditor.razor.rz.scp.css */
.simple-editor[b-7ih8puuaxy] {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    overflow: hidden;
    background: #fff;
}

.simple-editor-toolbar[b-7ih8puuaxy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.45rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.simple-editor-toolbar button[b-7ih8puuaxy] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    padding: 0.22rem 0.5rem;
    font-size: 0.8rem;
    color: #212529;
    line-height: 1.2;
    cursor: pointer;
}

.simple-editor-toolbar button:hover[b-7ih8puuaxy] {
    background: #fff;
    border-color: #ced4da;
}

.simple-editor-sep[b-7ih8puuaxy] {
    width: 1px;
    align-self: stretch;
    margin: 0.1rem 0.3rem;
    background: #dee2e6;
}

.simple-editor-area[b-7ih8puuaxy] {
    padding: 0.9rem 1rem;
    max-height: 60vh;
    overflow-y: auto;
    outline: none;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* `contenteditable` nie ma atrybutu `placeholder` — pusty obszar rysuje podpowiedz sam. */
.simple-editor-area:empty[b-7ih8puuaxy]::before {
    content: attr(data-placeholder);
    color: #adb5bd;
    pointer-events: none;
}

/* Odstepy wewnatrz obszaru pisania — bez nich akapity i listy zlewaja sie w jeden blok
   i autor nie widzi struktury, ktora wlasnie tworzy. */
.simple-editor-area[b-7ih8puuaxy]  p {
    margin: 0 0 0.75rem;
}

.simple-editor-area[b-7ih8puuaxy]  h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.2rem 0 0.5rem;
}

.simple-editor-area[b-7ih8puuaxy]  h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem 0 0.4rem;
}

.simple-editor-area[b-7ih8puuaxy]  ul,
.simple-editor-area[b-7ih8puuaxy]  ol {
    margin: 0 0 0.75rem;
    padding-left: 1.4rem;
}

.simple-editor-area[b-7ih8puuaxy]  li {
    margin-bottom: 0.25rem;
}

.simple-editor-area[b-7ih8puuaxy]  a {
    color: #2563eb;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Komunikat bledu obwodu Blazora. Renderowany przez MainLayout (poza rama), wiec jego style
   musza zostac tutaj — CSS isolation dolacza atrybut zakresu komponentu, ktory element renderuje.
   Style samej ramy klasycznej sa w Shells/ClassicShell.razor.css. */

#blazor-error-ui[b-3r6lncoz1p] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-3r6lncoz1p] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
:host[b-rxomiarq73] {
    display: block;
    height: 100%;
}

[b-rxomiarq73] .nav-link {
    text-decoration: none;
}

[b-rxomiarq73] .nav-link:hover {
    text-decoration: none;
}

[b-rxomiarq73] .nav-link.active {
    text-decoration: none;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-s2p2vmvgjt],
.components-reconnect-repeated-attempt-visible[b-s2p2vmvgjt],
.components-reconnect-failed-visible[b-s2p2vmvgjt],
.components-pause-visible[b-s2p2vmvgjt],
.components-resume-failed-visible[b-s2p2vmvgjt],
.components-rejoining-animation[b-s2p2vmvgjt] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-s2p2vmvgjt],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-s2p2vmvgjt],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-s2p2vmvgjt],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-s2p2vmvgjt],
#components-reconnect-modal.components-reconnect-retrying[b-s2p2vmvgjt],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-s2p2vmvgjt],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-s2p2vmvgjt],
#components-reconnect-modal.components-reconnect-failed[b-s2p2vmvgjt],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-s2p2vmvgjt] {
    display: block;
}


#components-reconnect-modal[b-s2p2vmvgjt] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-s2p2vmvgjt 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-s2p2vmvgjt 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-s2p2vmvgjt 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-s2p2vmvgjt]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-s2p2vmvgjt 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-s2p2vmvgjt {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-s2p2vmvgjt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-s2p2vmvgjt {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-s2p2vmvgjt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-s2p2vmvgjt] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-s2p2vmvgjt] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-s2p2vmvgjt] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-s2p2vmvgjt] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-s2p2vmvgjt] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-s2p2vmvgjt] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-s2p2vmvgjt 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-s2p2vmvgjt] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-s2p2vmvgjt {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/Shells/ClassicShell.razor.rz.scp.css */
/* Style ramy klasycznej — przeniesione 1:1 z MainLayout.razor.css.
   Zmienil sie wylacznie wlasciciel zakresu CSS isolation (MainLayout -> ClassicShell);
   reguly ::deep nadal siegaja calego poddrzewa .page-shell, bo to korzen tego komponentu. */

.page-shell[b-33mvzyuy0s] {
    min-height: 100vh;
    display: flex;
    background: #f4f7fb;
}

.sidebar-shell[b-33mvzyuy0s] {
    width: 280px;
    height: 100vh;
    height: 100dvh; /* dynamiczna wysokosc viewportu — uwzglednia pasek przegladarki na mobile */
    position: sticky;
    top: 0;
    overflow-y: auto;
    background: var(--sidebar-gradient, linear-gradient(180deg, var(--text-dark, #0f172a) 0%, var(--text-mid, #1e293b) 100%));
}

.topbar[b-33mvzyuy0s] {
    background: var(--topbar-bg, #fff) !important;
    color: var(--topbar-text-color, var(--text-dark, #0f172a)) !important;
    min-height: 3.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.topbar a[b-33mvzyuy0s],
.topbar .text-body[b-33mvzyuy0s] {
    color: var(--topbar-text-color, var(--text-dark, #0f172a)) !important;
}

.hamburger-btn[b-33mvzyuy0s] {
    color: var(--topbar-text-color, var(--text-dark, #0f172a)) !important;
}

[b-33mvzyuy0s] .user-dropdown-trigger,
[b-33mvzyuy0s] .mini-cart-trigger {
    background: var(--topbar-button-bg, #ffffff) !important;
    border-color: var(--topbar-button-border, #e5e7eb) !important;
    color: var(--topbar-button-text, var(--text-dark, #0f172a)) !important;
}

[b-33mvzyuy0s] .user-dropdown-trigger:hover,
[b-33mvzyuy0s] .mini-cart-trigger:hover {
    background: var(--topbar-button-bg, #ffffff) !important;
    border-color: var(--topbar-button-border, #e5e7eb) !important;
    color: var(--topbar-button-text, var(--text-dark, #0f172a)) !important;
    filter: brightness(0.96);
}

[b-33mvzyuy0s] .page-header-icon {
    font-size: 1.35rem;
    color: var(--topbar-icon-color, var(--brand-primary, #2563eb));
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    flex-shrink: 0;
}

[b-33mvzyuy0s] .page-header-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--topbar-text-color, var(--text-dark, #0f172a));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
    min-width: 0;
}

@media (max-width: 575.98px) {
    [b-33mvzyuy0s] .page-header-title {
        font-size: 1rem;
    }
}

.content-shell[b-33mvzyuy0s] {
    flex: 1;
    min-width: 0;
}

.topbar[b-33mvzyuy0s] {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Pasek gorny tej ramy JEST przyklejony i ma ~62 px, wiec przyklejony filtr katalogu musi
   zaczynac sie pod nim. Zmienne CSS dziedzicza w dol niezaleznie od izolacji stylow,
   wiec ustawienie jej na korzeniu ramy dociera do .products-filter-bar w Products.razor. */
.page-shell[b-33mvzyuy0s] {
    --shop-filter-top: 62px;
}

/* Pasek linkow do stron tresciowych. `:empty` chowa go w calosci, gdy zadna strona nie jest
   wlaczona — bez tego sklep sprzed wdrozenia dostalby pusta kreske pod trescia. */
.classic-page-links[b-33mvzyuy0s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    padding: 0.9rem 1.25rem 1.4rem;
    border-top: 1px solid #e9ecef;
    font-size: 0.82rem;
}

.classic-page-links:empty[b-33mvzyuy0s] {
    display: none;
    border-top: 0;
    padding: 0;
}

.classic-page-links[b-33mvzyuy0s]  a {
    color: #64748b;
    text-decoration: none;
}

.classic-page-links[b-33mvzyuy0s]  a:hover {
    text-decoration: underline;
}

.hamburger-btn[b-33mvzyuy0s] {
    background: transparent;
    border: 0;
    padding: 0.25rem 0.6rem;
    color: #1e293b;
    line-height: 1;
    font-size: 1.5rem;
    border-radius: 0.375rem;
}

.hamburger-btn:hover[b-33mvzyuy0s],
.hamburger-btn:focus[b-33mvzyuy0s] {
    background: #f1f5f9;
    outline: none;
}

.sidebar-backdrop[b-33mvzyuy0s] {
    display: none;
}

@media (max-width: 991.98px) {
    .page-shell[b-33mvzyuy0s] {
        display: block;
    }

    .sidebar-shell[b-33mvzyuy0s] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh; /* na mobile fixed overlay = realna wysokosc widocznego obszaru, nie najwiekszy viewport */
        width: 280px;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .sidebar-shell.is-open[b-33mvzyuy0s] {
        transform: translateX(0);
    }

    .sidebar-backdrop[b-33mvzyuy0s] {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 1040;
    }

    .sidebar-backdrop.is-visible[b-33mvzyuy0s] {
        display: block;
    }

    .content-shell[b-33mvzyuy0s] {
        padding-bottom: 72px;
    }
}
/* /Components/Pages/Admin/Configuration.razor.rz.scp.css */
/* Naglowek sekcji na stronie-hubie. Celowo drobny i bez ramki: ma dzielic kafelki na grupy,
   a nie konkurowac z ich tytulami o uwage. */
.config-group[b-tyjt8fszr4] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
}
/* /Components/Pages/Admin/LayoutConfig.razor.rz.scp.css */
/* Pasek zapisu przyklejony do dolu okna.

   „sticky", a nie „fixed": pasek zostaje czescia strony, wiec nie zaslania stopki ani historii zmian,
   gdy administrator dojedzie na sam dol — po prostu przestaje sie przyklejac. Fixed trzeba by bylo
   kompensowac zapasem na dole calej strony. */
.layout-save-bar[b-1ppcfozt68] {
    position: sticky;
    bottom: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;

    margin-bottom: 1.5rem;
    padding: 0.6rem 0.75rem;

    /* Polprzezroczyste tlo z rozmyciem: pod paskiem przewija sie tresc i bez tego przyciski
       zlewaly sie z tym, co akurat pod nimi przejezdza. */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 -6px 16px -12px rgba(15, 23, 42, 0.6);
}
/* /Components/Pages/Admin/Products.razor.rz.scp.css */
/* Nazwa produktu jako akcja otwierajaca edycje.

   Zerowanie stylow przycisku, a nie uzycie <div> z @onclick: element ma byc w kolejnosci tabulacji
   i zglaszac sie czytnikowi ekranu jako przycisk. Wyglad zostaje taki jak dotychczasowy tekst,
   zeby wiersz sie nie zmienil — dopiero najechanie pokazuje, ze to klikalne. */
.admin-product-title[b-2bz3i36ylp] {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;

    font-weight: 600;
    line-height: inherit;
    color: inherit;
    cursor: pointer;
}

    .admin-product-title:hover[b-2bz3i36ylp],
    .admin-product-title:focus-visible[b-2bz3i36ylp] {
        color: var(--brand-primary, #2563eb);
        text-decoration: underline;
    }

    .admin-product-title:focus-visible[b-2bz3i36ylp] {
        outline: 2px solid var(--brand-primary, #2563eb);
        outline-offset: 2px;
        border-radius: 0.2rem;
    }

/* Kolumny cenowe listy: kwota netto pierwszoplanowa, brutto pod nia mniejsza czcionka.
   Brutto jest tu informacja pomocnicza — admin planuje marze na netto. */
.admin-price-net[b-2bz3i36ylp] {
    font-weight: 600;
    white-space: nowrap;
}

.admin-price-gross[b-2bz3i36ylp] {
    font-size: 0.72rem;
    color: var(--text-soft, #6c7683);
    white-space: nowrap;
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
/* Ustawienia podstawowe — lista z grupami zamiast siatki kafelkow.

   Powod zmiany: dziesiec ustawien, kazde w kafelku z wlasnym akapitem, dawalo strone na ~2200 px,
   w ktorej najwyzszy kafelek byl 3,4x wyzszy od najnizszego (rzad wyrownuje sie do najwyzszego,
   wiec „Minimum logistyczne" dostawalo pustke). Wartosci staly w roznych miejscach kafelkow,
   wiec nie dalo sie ich przeczytac w dol — a to jest glowne pytanie tej strony.

   Uklad wiersza: [ikona] [nazwa + podpowiedz + plakietka] [wartosc — STALA kolumna] [Edytuj]. */

.settings-list[b-x4bq967e2a] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    /* Kolumna tresci panelu ma 1800 px. Rozciagniety na nia wiersz stawia nazwe i wartosc
       na dwoch koncach pustki, wiec oko musi przeskoczyc pol ekranu, zeby je polaczyc —
       a to jest dokladnie ta czynnosc, dla ktorej ta lista powstala. */
    max-width: 68rem;
}

/* Naglowek grupy: etykieta plus kreska ciagnaca sie do konca — dzieli liste na trzy tematy,
   nie rysujac kolejnej ramki. */
.settings-group[b-x4bq967e2a] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.35rem 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}

.settings-group[b-x4bq967e2a]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-light, rgba(148, 163, 184, 0.3));
}

.settings-group:first-child[b-x4bq967e2a] {
    margin-top: 0;
}

.setting-rows[b-x4bq967e2a] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--border-light, rgba(148, 163, 184, 0.3));
    border-radius: 0.75rem;
    overflow: hidden;
}

.setting-row[b-x4bq967e2a] {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border-light, rgba(148, 163, 184, 0.18));
}

.setting-row:last-child[b-x4bq967e2a] {
    border-bottom: 0;
}

.setting-row:hover[b-x4bq967e2a] {
    background: rgba(13, 110, 253, 0.03);
}

.setting-row-icon[b-x4bq967e2a] {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    font-size: 0.9rem;
}

/* Nazwa, znak „i" i plakietka lezą w JEDNYM strumieniu tekstu, a nie w kontenerze flex.
   Przy flexie zawinieta nazwa spychala znak „i" do wlasnej linii — wygladalo to jak sierota
   pod tytulem. Inline sprawia, ze znak idzie zaraz za ostatnim slowem, gdziekolwiek ono wypadnie. */
.setting-row-name[b-x4bq967e2a] {
    min-width: 0;
    line-height: 1.35;
}

.setting-row-title[b-x4bq967e2a] {
    font-size: 0.9rem;
    font-weight: 550;
}

/* Plakietka skutku („przelicza katalog", „brak adresu") zostaje na wierzchu, bo mowi o tym,
   co sie stanie po zapisie — a to jest ostrzezenie, nie definicja pola. */
.setting-row-warn[b-x4bq967e2a] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 0.35rem;
    border: 1px solid #f5d982;
    background: #fef9e7;
    color: #7a5b00;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

/* tabular-nums: kwoty i procenty stoja jedna pod druga, wiec cyfry musza miec rowna szerokosc. */
.setting-row-value[b-x4bq967e2a] {
    text-align: right;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.setting-row-value .setting-unit[b-x4bq967e2a] {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--bs-secondary-color, #6c757d);
}

.setting-on[b-x4bq967e2a] {
    color: #16a34a;
}

.setting-row-edit[b-x4bq967e2a] {
    white-space: nowrap;
}

/* Ponizej md wiersz rozpada sie na dwa poziomy: nazwa nad wartoscia, przycisk po prawej.
   Bez tego kolumna wartosci i przycisk sciskaja nazwe do dwoch znakow na wiersz. */
@media (max-width: 767.98px) {
    .setting-row[b-x4bq967e2a] {
        grid-template-columns: 2rem minmax(0, 1fr) auto;
        grid-template-areas:
            "icon name edit"
            "icon value edit";
        row-gap: 0.15rem;
        padding: 0.65rem 0.75rem;
    }

    .setting-row-icon[b-x4bq967e2a]  { grid-area: icon; align-self: center; }
    .setting-row-name[b-x4bq967e2a]  { grid-area: name; }
    .setting-row-value[b-x4bq967e2a] { grid-area: value; text-align: left; font-size: 0.9rem; }
    .setting-row-edit[b-x4bq967e2a]  { grid-area: edit; align-self: center; }
}