/* =====================================================================
   screen-catalog.css — Products Library i Brands
   ---------------------------------------------------------------------
   Wlasciciel: agent "katalog". Nie dopisuj tu regul innych ekranow.
   Wymaga wczesniejszego zaladowania theme.css i components.css.

   Zrodlo ukladu (Figma, plik 5EhOBm4rUvbayzFZkwnQpT, strona 232:159):
       679:4277  Content Window / Products (988x604)
       677:4197  Content Window / Brands   (988x604)
       679:4260  Brand Widget 232x184 — karta produktu (nazwa + marka + warianty)
       677:6217  Brand Widget 232x167 — karta marki (sama nazwa, wysrodkowana)
       677:7803  Logotypy producentow — biala ramka 224x115, radius 4
       677:6208 / 677:6212  Quick View / Explore (110x16, radius 4)
       678:4104  Favorite (18x18)

   Kolory: WYLACZNIE tokeny z theme.css (paleta SIMTU-Qt6). Z Figmy bierzemy
   uklad, wymiary i typografie. Mapowania uzyte w tym pliku:
       "SIMTU white"     #ffffff -> var(--text-primary)
       "SIMTU light grey"#9c9c9c -> var(--text-secondary)
       "SIMTU accent 3"  #00adee -> var(--status-info)
       "SIMTU accent 1"  #e5058e -> var(--accent-primary)

   ZMIERZONE ODSTEPY SIATKI. Zadanie mowilo o 4px, ale odczyt pikseli z
   renderu 677:4197 (bialy obszar logo na x = 16/260/504/748, y = 44/223/402)
   daje karty 232x167 na skoku 244x179 — czyli przerwe 12px w obu osiach
   i margines 12px od krawedzi okna. Siatka idzie za pomiarem z Figmy;
   --module-gap (4px) zostaje odstepem miedzy MODULAMI, nie miedzy kartami.
   ===================================================================== */


/* =====================================================================
   01. POWLOKA EKRANU
   ---------------------------------------------------------------------
   W Figmie okno tresci nie ma paska tytulu — na gorze jest wylacznie
   rzad "Search by keyword" + "Filters" (12px od krawedzi, wysokosc 16px),
   a od y=40 zaczyna sie siatka. Chrom okna (radius 8, blur, cien) nalezy
   do layout.css — tutaj tylko wypelniamy jego wnetrze.
   ===================================================================== */

.products-screen,
.brands-screen {
    --catalog-gap: var(--space-3);   /* 12px — zmierzone w Figmie */

    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Rzad narzedzi: .searchrow (components.css) niesie padding 12px i gap 12px.
   Licznik wynikow dostawiamy na prawa krawedz — Figma go nie ma, ale bez
   niego uzytkownik nie wie, ile pozycji odsiala wyszukiwarka. */
.products-subtitle {
    margin-left: auto;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Akcja "Zglos marke / Zglos produkt" w rzedzie narzedzi. Ta sama geometria
   co Filters (h16, radius 6, glazed) — inaczej 26-pikselowy .btn-add rozepchnalby
   rzad, ktory w Figmie ma dokladnie 40px (12 + 16 + 12). */
.cat-toolbar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--control-h);
    padding: 0 9px;
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--glaze-3);
    color: var(--text-secondary);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--t-fast);
}
.cat-toolbar-btn:hover { color: var(--text-primary); }

/* Rzad filtrow — rozwijany przyciskiem "Filters". Chipy pochodza z
   components.css (.filter-chip / .chip-x). */
.cat-filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--panel-pad) var(--space-2);
    flex-shrink: 0;
}

.products-body {
    flex: 1;
    min-height: 0;
    padding: 0 var(--panel-pad) var(--panel-pad);
    overflow-y: auto;
}


/* =====================================================================
   02. SIATKA KART
   ---------------------------------------------------------------------
   Karty maja stala szerokosc 232px (sa projektowane co do piksela), wiec
   kolumny sa stale, a nadmiar miejsca zostaje po prawej. Przy szerokosci
   988px daje to dokladnie 4 kolumny: 12 + 4*232 + 3*12 + 12 = 988.
   ===================================================================== */

.products-grid,
.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--card-w));
    justify-content: start;
    gap: var(--catalog-gap, var(--space-3));
    align-items: start;
}


/* =====================================================================
   03. KARTA (Brand Widget)
   ---------------------------------------------------------------------
   Trzy warianty tej samej konstrukcji — rozni je tylko wysokosc bloku
   tekstowego, bo bialy obszar (115px) i rzad przyciskow (16px) sa stale:

     .product-tile              232 x 168  — bez przyciskow (kafelki na Home)
     .product-tile.tile-product 232 x 184  — Figma 679:4260 (nazwa + meta)
     .product-tile.brand-tile   232 x 167  — Figma 677:6217 (nazwa centralnie)

   Rozklad pionowy (Figma, wspolrzedne wzgledem karty):
       4        gorny margines bialej ramki
       4..119   Logotypy producentow, 224x115, radius 4
       133      srodek wiersza nazwy (Inter Bold 13/18)
       151      srodek wiersza meta   (Inter Regular 10/14) — tylko produkt
       bottom 4 Quick View / Explore, 110x16
   ===================================================================== */

.product-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--card-w);
    padding-bottom: var(--space-1);
    border-radius: var(--radius-md);
    background-color: var(--glaze-3);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--t-fast);
}

/* Glazed dark — te same trzy warstwy co .card w components.css.
   Pseudoelementy z-index:-1 maluja nad tlem karty, a pod jej trescia. */
.product-tile::before,
.product-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}
.product-tile::before { background: var(--glaze-1); mix-blend-mode: color-burn; }
.product-tile::after  { background: var(--glaze-2); mix-blend-mode: plus-lighter; }

@supports not (mix-blend-mode: color-burn) {
    .product-tile {
        background-color: var(--glaze-flat);
        box-shadow: inset 0 0 0 1px var(--glaze-edge);
    }
    .product-tile::before,
    .product-tile::after { display: none; }
}

.product-tile:hover,
.product-tile:focus-visible { box-shadow: 0 0 0 1px var(--border-accent); }
.product-tile[aria-selected="true"] { box-shadow: 0 0 0 1px var(--accent-primary); }

/* Wysokosci wariantow — patrz rozklad pionowy w komentarzu sekcji. */
.product-tile.tile-product { height: 184px; }
.product-tile.brand-tile   { height: var(--card-h); }   /* 167px */


/* --- Bialy obszar na logo / zdjecie (Figma 677:7803) -----------------
   Figma: "SIMTU white" #ffffff. Wg tabeli mapowan tego zadania idzie to na
   var(--text-primary) (#f0f0f0) — Qt6 nie ma osobnego tokenu na jasna
   powierzchnie, a nowych tokenow nie dokladamy (theme.css nalezy do innego
   agenta). Roznica wobec czystej bieli jest niewidoczna na tle --bg-void.

   Obraz idzie przez background-image ustawiany w JS (adres z backendu,
   pole image_url). background-origin: content-box + padding trzyma logo
   w bezpiecznym polu, zeby nie dotykalo krawedzi ramki — tak jak w Figmie,
   gdzie logo 79x79 siedzi w ramce 224x115. */
.product-tile-img {
    position: static;               /* serce pozycjonuje sie wzgledem karty */
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--card-logo-h);
    margin: var(--space-1) var(--space-1) 0;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    background-color: var(--text-primary);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-origin: content-box;
    overflow: hidden;
}

/* Brak obrazu — ramka zostaje (to ona niesie projekt), w srodku przygaszony
   znak. Kolor musi byc CIEMNY, bo tlo jest jasne. */
/* Ikony z Figmy niosa wymiar w atrybucie style (width: var(--ic-w, NNpx)),
   wiec sterujemy nimi przez --ic-w/--ic-h; ikony LEGACY z ui.js biora rozmiar
   z reguly .ic svg. Ustawiamy oba, zeby zadne zrodlo nie wypadlo z projektu. */
.product-tile-placeholder {
    --ic-w: var(--ic-file);
    --ic-h: var(--ic-file);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: var(--text-inverse);
    opacity: 0.22;
    pointer-events: none;
}
.product-tile-placeholder .ic svg,
.product-tile-placeholder > svg { width: var(--ic-file); height: var(--ic-file); }


/* --- Serce (Figma 678:4104, 18x18, left 208 / top 5) -----------------
   Lezy na bialej ramce, wiec domyslnie ciemne. Geometria 18x18 jest
   wyjatkiem od domyslnych 16px z .ic svg — nadpisujemy ja punktowo. */
.product-tile-fav {
    --ic-w: 18px;
    --ic-h: 18px;

    position: absolute;
    top: 5px;
    right: 6px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--text-inverse);
    line-height: 1;
    opacity: 0.55;
    cursor: pointer;
    transition: color var(--t-fast), opacity var(--t-fast);
}
.product-tile-fav .ic svg { width: 18px; height: 18px; }
.product-tile-fav:hover   { opacity: 1; color: var(--accent-primary); }
.product-tile-fav.active  { opacity: 1; color: var(--accent-primary); }


/* --- Blok tekstowy ---------------------------------------------------
   Produkt: 45px (nazwa 18 + meta 14, srodki na 133 i 151).
   Marka:   28px (sama nazwa, srodek na 133, wysrodkowana w poziomie). */
.product-tile-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 45px;
    padding: 5px var(--space-2) 0;
}

.product-tile-name {
    font: var(--fw-bold) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wiersz meta: marka do lewej, liczba wariantow / cena do prawej. */
.product-tile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
}

/* UWAGA: .product-tile-brand / -price bywaja tez BEZPOSREDNIMI dziecmi
   .product-tile-body (kafelki na ekranie Home, views/home.js — cudzy plik).
   Dlatego flex-owe reguly wiersza meta sa scisle zawezone do .product-tile-meta:
   `flex: 1` na luznym dziecku kolumny rozepchnaloby kafel w pionie. */
.product-tile-brand {
    min-width: 0;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "8 Variants" — SIMTU accent 3, liczba pogrubiona (Figma 679:4265). */
.product-tile-variants {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--status-info);
    white-space: nowrap;
}
.product-tile-variants b { font-weight: var(--fw-bold); }

.product-tile-price {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Podzial szerokosci wiersza meta — tylko wewnatrz niego. */
.product-tile-meta > .product-tile-brand { flex: 1; }
.product-tile-meta > .product-tile-variants,
.product-tile-meta > .product-tile-price,
.product-tile-meta > .pd-add { flex: none; }

/* Karta marki — nazwa wysrodkowana w obu osiach, bez wiersza meta. */
.brand-tile .product-tile-body {
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2);
}
.brand-tile .product-tile-name {
    width: 100%;
    text-align: center;
}


/* --- Rzad Quick View / Explore ---------------------------------------
   4 + 110 + 4 + 110 + 4 = 232. Same przyciski niesie components.css
   (.btn-quickview / .btn-explore, Figma 677:6208 / 677:6212) — tutaj
   tylko ich rozmieszczenie w karcie. */
.brand-tile-actions {
    display: flex;
    flex: none;
    gap: var(--space-1);
    padding: 0 var(--space-1);
}
.brand-tile-actions > * { flex: none; }


/* =====================================================================
   04. STANY PUSTE
   ===================================================================== */

.products-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    color: var(--text-secondary);
}
.products-empty .empty-state-icon {
    --ic-w: 40px;
    --ic-h: 40px;
    color: var(--text-tertiary);
}
.products-empty .empty-state-icon .ic svg,
.products-empty .empty-state-icon > svg { width: 40px; height: 40px; }

.products-empty-title {
    font: var(--fw-medium) var(--fs-section) / var(--lh-section) var(--font);
    color: var(--text-primary);
}
.products-empty-body {
    max-width: 420px;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}


/* =====================================================================
   05. DETAL PRODUKTU / KOLEKCJI
   ---------------------------------------------------------------------
   Figma nie projektuje tego ekranu (jest tylko w Qt6), wiec skladamy go
   z tego samego jezyka wizualnego: .card / .card-head / .kv z
   components.css + wlasne elementy ponizej.
   ===================================================================== */

.pd-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--submenu-h);
    padding: 0 var(--panel-pad);
    flex-shrink: 0;
}
.pd-title {
    flex: 1;
    min-width: 0;
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Logo firmy — ta sama biala ramka co na karcie, wiec nie duplikujemy regul,
   tylko ustawiamy szerokosc bloku. */
.pd-brand {
    flex: none;
    width: var(--card-w);
}
.pd-brand .product-tile-img { margin: 0; }

.pd-company {
    flex: 1;
    min-width: 0;
    font: var(--fw-bold) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
    text-transform: uppercase;
}

/* Kafelki wariantow w panelu "All variants" — wezsze niz w siatce glownej,
   bo mieszcza sie w polowie szerokosci okna. */
.pd-variants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--catalog-gap, var(--space-3));
    align-items: start;
}
.pd-variants .product-tile { width: 100%; height: auto; }
.pd-variants .product-tile-img { height: 96px; }

/* "+" — dodanie wariantu do listy pokoju. */
.pd-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    font: var(--fw-medium) var(--fs-list) / 1 var(--font);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pd-add:hover:not(:disabled) {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}
.pd-add:disabled { opacity: 0.35; cursor: default; }

/* Lista zalacznikow — ikona typu pliku (Figma 455:5310..5340, 32x32),
   nazwa i rozszerzenie. Tabela specyfikacji idzie przez .kv z components.css. */
.pd-file {
    --ic-w: var(--ic-file);
    --ic-h: var(--ic-file);

    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--row-h);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    text-decoration: none;
}
.pd-file:hover { background: var(--overlay-hover); }
.pd-file .ic svg { width: var(--ic-file); height: var(--ic-file); }
.pd-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-file-kind { flex: none; color: var(--text-secondary); text-transform: uppercase; }


/* =====================================================================
   06. WASKIE WIDOKI
   ---------------------------------------------------------------------
   Karta jest projektowana na stale 232px i tak zostaje az do momentu, w
   ktorym przestaje sie miescic — dopiero wtedy oddaje szerokosc kolumnie.
   ===================================================================== */

@media (max-width: 280px) {
    .products-grid,
    .brands-grid { grid-template-columns: minmax(0, 1fr); }
    .product-tile { width: 100%; }
}