/* ============================================================================
   SAITOS LISTA 3.0 — ARCULATI STÍLUSLAP
   ----------------------------------------------------------------------------
   A saitos.ro arculatát viszi be az alkalmazásba: Poppins + Playfair Display,
   a weboldal színei, az arany mint második akcentus, és a szekciócímek alatti
   gradiens vonal.

   HOGYAN MŰKÖDIK:
   Ez a fájl a </head> ELŐTT, tehát az oldalak saját <style> blokkja UTÁN
   töltődik be. Emiatt azonos fajsúlyú szabályoknál ez nyer - így a meglévő
   oldalak átírása nélkül is érvényre jut az arculat.
   Ahol egy oldalnak saját elrendezése van, az érintetlen marad.

   A tokenek "--sa-" előtaggal vannak, hogy ne ütközzenek az oldalak
   saját :root változóival (--primary, --light stb.).
   ============================================================================ */

:root {
    /* --- A weboldal színei, változtatás nélkül --- */
    --sa-red:        #dc3545;
    --sa-red-dark:   #c82333;
    --sa-cream:      #f4ede4;
    --sa-gold:       #ffc107;
    --sa-gold-deep:  #ff9800;
    --sa-ink:        #212529;
    --sa-text:       #495057;
    --sa-muted:      #6c757d;
    --sa-white:      #ffffff;
    --sa-surface:    #ffffff;

    /* --- Állapotjelzés: külön a márkaszíntől --- */
    --sa-ok:         #157347;
    --sa-ok-bg:      #e8f3ed;
    --sa-warn:       #8a6d07;
    --sa-warn-bg:    #fff6dd;
    --sa-bad:        #b02a37;
    --sa-bad-bg:     #fdecea;

    /* --- Vonalak, árnyékok --- */
    --sa-line:       rgba(220, 53, 69, .14);
    --sa-line-soft:  rgba(73, 80, 87, .10);
    --sa-glow-sm:    0 4px 18px rgba(220, 53, 69, .10);
    --sa-glow:       0 10px 40px rgba(220, 53, 69, .15);
    --sa-glow-gold:  0 10px 34px rgba(255, 193, 7, .28);

    /* --- Betűk --- */
    --sa-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sa-body:    'Poppins', 'Segoe UI', Tahoma, system-ui, sans-serif;

    /* --- Érintés --- */
    --sa-touch:   52px;
}

/* ============================================================
   ESTI ÜZEMMÓD
   Az eladók fél tízkor zárnak egy sötét plázában. Ugyanaz a
   márka, sötét meleg alapon.
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --sa-red:       #f2606f;
        --sa-red-dark:  #d84356;
        --sa-cream:     #241d19;
        --sa-gold:      #ffce4a;
        --sa-gold-deep: #ffb020;
        --sa-ink:       #f7f2ed;
        --sa-text:      #e2d9d1;
        --sa-muted:     #a89c92;
        --sa-white:     #1b1613;
        --sa-surface:   #262019;
        --sa-ok:        #4fc08a;
        --sa-ok-bg:     #172b22;
        --sa-warn:      #d6ae3c;
        --sa-warn-bg:   #2e2510;
        --sa-bad:       #ee7566;
        --sa-bad-bg:    #2f1a1c;
        --sa-line:      rgba(242, 96, 111, .22);
        --sa-line-soft: rgba(232, 224, 216, .12);
        --sa-glow-sm:   0 4px 18px rgba(0, 0, 0, .40);
        --sa-glow:      0 10px 40px rgba(0, 0, 0, .45);
        --sa-glow-gold: 0 10px 34px rgba(255, 206, 74, .18);
    }
}

/* ============================================================
   ALAP
   ============================================================ */

body {
    font-family: var(--sa-body);
    color: var(--sa-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* A weboldal háttere: krém színátmenet.
   Szándékosan nincs benne color-mix() - a régebbi Android WebView nem ismeri,
   és attól az EGÉSZ deklaráció érvénytelen lenne. */
body {
    background: linear-gradient(135deg, var(--sa-cream) 0%,
                                        var(--sa-white) 50%,
                                        var(--sa-cream) 100%);
    background-attachment: fixed;
}

/* A backdrop-filter olcsó Androidon akadozik - a forrásfájlokból el lett
   távolítva, ez a sor csak biztosíték arra, ami később visszakerülne. */
* { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ============================================================
   TIPOGRÁFIA — a márka arca
   ============================================================ */

h1, h2,
.page-header h1,
.header h1,
.logo-title,
.section-title {
    font-family: var(--sa-display);
    font-weight: 900;
    letter-spacing: -.5px;
    line-height: 1.15;
}

/* A weboldal aláírása: gradiens vonal a cím alatt.
   Csak a blokk-szintű oldalcímeknél, hogy ne törjön el a fejléc-elrendezés. */
.page-header h1,
.section-title {
    position: relative;
    padding-bottom: 16px;
}
.page-header h1::after,
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 170px;
    max-width: 60%;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--sa-red), var(--sa-red-dark), transparent);
}
/* Középre igazított szekciócímeknél a vonal is középre kerül */
.section-title[style*="center"]::after,
.section-title.center::after {
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--sa-red), var(--sa-red-dark), var(--sa-red), transparent);
}

/* Kis nagybetűs címkék */
.eyebrow,
.stat-card .label,
.card .label,
.summary-card .label,
.filter-group label {
    letter-spacing: .1em;
}

/* ============================================================
   SZÁMOK
   A főszámok display-betűvel: ettől néz ki egy kimutatás
   márkának, nem admin-panelnek. A táblázatok oszlopai maradnak
   Poppinsban, fix számjegyszélességgel — ott az egymás alá
   esés a fontos.
   ============================================================ */

.stat-card .value,
.card .value,
.summary-card .value,
.kpi .v,
.metric .v,
.hero .big {
    font-family: var(--sa-display);
    font-weight: 900;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* Táblázat-oszlopok: egymás alá eső számjegyek */
table td,
table th,
.num, .n, .v,
input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   ARANY — a teljesítmény színe
   A weboldalon az érmeké és a díjaké. Itt a bónusz szinteké,
   az elért céloké és a legjobb eredményeké.
   ============================================================ */

.sa-gold,
.tier.now,
.card.gold,
.stat-card.gold {
    border-color: var(--sa-gold) !important;
    box-shadow: var(--sa-glow-gold);
}
.sa-gold .value,
.tier.now .p,
.card.gold .value,
.stat-card.gold .value {
    color: var(--sa-gold-deep);
}

.sa-badge-gold {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    color: #4a3200;
    background: linear-gradient(135deg, var(--sa-gold), var(--sa-gold-deep));
    box-shadow: 0 2px 8px rgba(255, 152, 0, .3);
}

/* ============================================================
   ÁLLAPOTJELZÉS — forma ÉS szín
   Színvakság és rossz fényviszonyok mellett a szín önmagában
   kevés, ezért minden állapotcímke pöttyöt is kap.
   ============================================================ */

.sa-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 13px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
}
.sa-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.sa-pill.ok   { background: var(--sa-ok-bg);   color: var(--sa-ok); }
.sa-pill.warn { background: var(--sa-warn-bg); color: var(--sa-warn); }
.sa-pill.bad  { background: var(--sa-bad-bg);  color: var(--sa-bad); }
.sa-pill.idle { background: var(--sa-line-soft); color: var(--sa-muted); }

/* ============================================================
   ÉRINTÉS — telefonon, egy kézzel, este
   ============================================================ */

.btn,
.action-btn,
.filter-btn,
button[type="submit"],
.act {
    font-family: var(--sa-body);
    font-weight: 600;
}

/* Az eladói felület gombjai nagyobbak: ujjal, sietve kezelik.
   A .seller-page osztályt a body kapja a seller/ oldalakon. */
.sa-seller .btn,
.sa-seller .action-btn,
.sa-seller button[type="submit"] {
    min-height: var(--sa-touch);
}

input, select, textarea {
    font-family: var(--sa-body);
}

/* 16px alatt az iPhone ráközelít a mezőre és elcsúszik az elrendezés.
   Csak kis képernyőn kényszerítjük, hogy az asztali riportok sűrű
   szűrősorai ne essenek szét. */
@media (max-width: 820px) {
    input, select, textarea { font-size: max(16px, 1em); }
}

/* Billentyűzetes navigáció legyen látható */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--sa-gold);
    outline-offset: 2px;
}

/* ============================================================
   FINOMHANGOLÁS a meglévő komponenseken
   ============================================================ */

/* A kártyák árnyéka legyen egységesen meleg derengésű */
.card,
.stat-card,
.page-header,
.table-wrap,
.filters {
    box-shadow: var(--sa-glow-sm);
}

/* Táblázat: kicsit levegősebb sorok, halkabb elválasztók */
table td {
    border-bottom-color: var(--sa-line-soft);
}

/* Üres állapotok ne legyenek ridegek */
.empty-state,
.empty {
    color: var(--sa-muted);
}

/* ============================================================
   NYOMTATÁS — a HACCP napló és a havi riportok papíron is mennek
   ============================================================ */

@media print {
    body {
        background: #fff !important;
        color: #000;
    }
    .filters, .back-btn, .btn-back, .print-btn, .notice { display: none !important; }
    .page-header h1::after, .section-title::after { background: #999; }
    .card, .table-wrap, .page-header { box-shadow: none !important; }
}

/* ============================================================
   MOZGÁS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}