/* ==========================================================================
   Fakturkovo admin
   Farby a tvary odvodené z verejného webu: navy + zlatá, guľaté pill tvary,
   mäkké tiene. Doména je primárny kľúč, preto je všade v monospace.
   ========================================================================== */

:root {
    /* Farby */
    /* Modrá z loga. Admin nenačítava `css/theme/style.css`, takže tu musí
       stáť vlastná kópia — pri zmene odtieňa treba upraviť aj `--brand-navy`
       tam. Sú to jediné dve miesta, kde farba značky žije. */
    --color-navy:        #2d2e79;  /* rgb(45, 46, 121) */
    --color-navy-soft:   #3b3c96;
    --color-indigo:      #4355b9;
    --color-indigo-bg:   #eef0fb;
    --color-gold:        #e4be6e;  /* rgb(228, 190, 110) — zlatá z loga */
    --color-gold-deep:   #c9a052;
    --color-bg:          #f5f6fa;
    --color-surface:     #ffffff;
    --color-heading:     #16205a;
    --color-text:        #6e7699;
    --color-line:        #e6e9f2;
    --color-live:        #21a67a;
    --color-paused:      #a8aec6;
    --color-danger:      #c8452f;
    --color-danger-bg:   #fdeeeb;
    --color-danger-line: #f4cec6;
    --color-danger-deep: #a5341f;
    --color-danger-soft: #fffaf9;
    --color-alert-soft:  #f3a08f;

    /* Stavy a označenia: farby odznakov, delta a noticov. Predtým sa
       písali na každom pravidle natvrdo a rozchádzali sa (okraj úspechu
       bol raz #b8e5d0 a raz #b8e6d3). */
    --color-ok-bg:       #e3f6ee;
    --color-ok:          #147754;
    --color-ok-line:     #b8e5d0;
    --color-warn-bg:     #fdf0d8;
    --color-warn:        #8a6512;
    --color-warn-bg-soft:#ffe8d6;
    --color-warn-deep:   #a2541a;
    --color-neutral-bg:  #eef0f5;
    --color-zebra:       #fbfcfe;
    --color-line-soft:   #ccd2e4;
    --color-muted:       #d6dae8;

    /* Typografia */
    --font-primary: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-size-base: 1rem;
    --line-height-base: 1.6;

    /* Tvary */
    --radius-card: 20px;
    --radius-pill: 999px;
    --radius-field: 12px;
    --shadow-card: 0 1px 2px rgba(14, 26, 60, .04), 0 12px 32px rgba(14, 26, 60, .06);
    --shadow-lift: 0 2px 4px rgba(14, 26, 60, .06), 0 20px 44px rgba(14, 26, 60, .12);
    --gap: 1.5rem;
}

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    color: var(--color-heading);
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
}

/*
 * Dlhé slovo bez medzery nesmie roztiahnuť stránku.
 *
 * Doména, e-mail, slug alebo názov trhu napísaný jedným slovom sa nemá kde
 * zalomiť, takže určuje najmenšiu možnú šírku svojho rodiča — a cez neho
 * celej stránky. Na telefóne z toho bolo vodorovné posúvanie o pár desiatok
 * pixelov, ktoré sa nedalo pripísať žiadnemu viditeľnému prvku.
 *
 * Musí to byť `anywhere`, nie `break-word`: obe lámu až keď sa slovo inak
 * nezmestí, ale iba `anywhere` zároveň zníži najmenšiu možnú šírku prvku —
 * a práve tá cez mriežky a flexy tlačí stránku do šírky. Bežný text sa
 * správa rovnako ako predtým, lámu sa len slová, ktoré sa nezmestia.
 */
h1, h2, h3, p, dd, li, .hint, .label { overflow-wrap: anywhere; }

/* Textový stĺpec v hlavičke musí vedieť ustúpiť, inak sa lámanie vyššie
   nemá kde prejaviť — flex položka sa bez tohto nezmenší pod svoj obsah. */
.dashboard-head > div, .page-head-row > div { min-width: 0; }

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

:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Značka --------------------------------------------------------------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.03em;
}

.brand-logo {
    display: block;
    width: 10rem;
    height: auto;
    /* Nápis dedí farbu rodiča cez currentColor, líška ostáva zlatá. Šírka, nie
       výška: slogan je pod nápisom a pri pevnej výške by nápis zmenšoval. */
}

/* --- Horná lišta ---------------------------------------------------------- */

.topbar {
    background: var(--color-navy);
    color: #fff;
    padding: .9rem 0;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.topbar .brand { color: #fff; }

.topbar-tag {
    margin-left: .6rem;
    padding: .15rem .6rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-pill);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .68);
}

.topbar-user strong { color: #fff; font-weight: 600; }

/* --- Rozloženie ----------------------------------------------------------- */

.shell { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }

.page { padding: 3rem 0 4rem; }

.page-head { margin-bottom: 2.25rem; }

.kicker {
    display: block;
    margin-bottom: .6rem;
    color: var(--color-gold-deep);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/*
 * Popis nad obsahom. Vykresľuje ho layout z definície bočného panela, takže
 * pomenúva presne tú položku, ktorá v paneli svieti — ručne písaný sa s ňou
 * rozišiel na polovici obrazoviek.
 */
.crumb {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-paused);
}

.crumb a { color: var(--color-indigo); }
.crumb a:hover { text-decoration: underline; }
.crumb-sep { color: var(--color-line); }

.page-head h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); }

.page-head p {
    max-width: 58ch;
    margin: .75rem 0 0;
}

/* --- Oznamy --------------------------------------------------------------- */

/*
 * Oznam v obsahu.
 *
 * Bez bodky pred textom a bez žltej: väčšina oznamov niečo vysvetľuje
 * („DPH sa neúčtuje", „vyber konkrétny trh") a žltá ich čítala ako výstrahu,
 * hoci nič nie je zle. Modrá je v admine farba informácie — tá istá, akú
 * majú odkazy a otvorená položka ponuky.
 *
 * Kto naozaj varuje, má `.notice-warn` (červená); kto potvrdzuje, `.notice-ok`.
 */
.notice {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.75rem;
    padding: .9rem 1.25rem;
    border-radius: var(--radius-field);
    background: var(--color-indigo-bg);
    border: 1px solid rgba(67, 85, 185, .16);
    color: var(--color-navy);
    font-weight: 600;
}

.errors {
    margin: 0 0 1.5rem;
    padding: .9rem 1.25rem .9rem 2.6rem;
    border-radius: var(--radius-field);
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-line);
    color: var(--color-danger);
    font-size: .9rem;
    font-weight: 600;
}

.errors li + li { margin-top: .3rem; }

/* --- Adresný prúžok (signature) ------------------------------------------- */

.address {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .9rem;
    border-radius: var(--radius-pill);
    background: var(--color-indigo-bg);
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-indigo);
    overflow: hidden;
}

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

.status {
    flex: none;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--color-paused);
}

.status-live {
    background: var(--color-live);
    box-shadow: 0 0 0 3px rgba(33, 166, 122, .18);
}

.address-open {
    flex: none;
    margin-left: auto;
    padding: .15rem .6rem;
    border-radius: var(--radius-pill);
    background: rgba(67, 85, 185, .12);
    font-family: var(--font-primary);
    font-size: .72rem;
    font-weight: 700;
    transition: background .15s ease-out;
}

.address-open:hover { background: rgba(67, 85, 185, .24); }

/* --- Karty marketov ------------------------------------------------------- */

.markets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--gap);
}

.market {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease-out, transform .2s ease-out;
}

.market:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.market-paused { opacity: .72; }

.market-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-paused);
}

/* Nadpis sa vykresľuje v tom istom reze ako na živej stránke — admin vidí
   presne to, čo návštevník. */
.market-headline {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-heading);
    letter-spacing: -.02em;
}

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.chip {
    padding: .3rem .7rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-heading);
}

.chip-code { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

.market-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-line);
}

.state {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text);
}

/* --- Tlačidlá ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease-out, color .16s ease-out, border-color .16s ease-out;
}

.primary-btn { background: var(--color-gold); color: var(--color-navy); }
.primary-btn:hover { background: transparent; border-color: var(--color-gold-deep); color: var(--color-gold-deep); }

.secondary-btn { background: transparent; border-color: var(--color-line); color: var(--color-heading); }
.secondary-btn:hover { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

.ghost-btn {
    background: transparent;
    border-color: rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .85);
    padding: .45rem 1rem;
    font-size: .82rem;
}
.ghost-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.btn-block { width: 100%; justify-content: center; padding: .85rem 1.35rem; }

/* --- Formulár ------------------------------------------------------------- */

.card {
    padding: 2rem;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

/* Dve karty pod sebou (detail zákazníka, správa admina) sa nesmú dotýkať. */
.card + .card { margin-top: var(--gap); }

/* Sekcie úvodnej stránky. Každá karta je zabalená vo vlastnom `.section-block`
   (kvôli poradiu a skrytému poľu), takže karty nie sú susedia a pravidlo vyššie
   na ne nedosiahne — medzeru preto drží obal. */
.section-block + .section-block { margin-top: var(--gap); }

/*
 * To isté cez formulár.
 *
 * Nastavenia trhu majú dve karty a každá je vlastný formulár — ukladajú sa
 * zvlášť. Susedia sú preto formuláre, nie karty, `.card + .card` na ne
 * nedosiahne a obe karty sa dotýkali bez jediného pixela medzi nimi.
 * Medzeru musí vytvoriť obal.
 *
 * `:has(> .card)` je tu podstatné: formuláre, ktoré kartu neobaľujú —
 * prepínač obdobia na dashboarde, filtre, vlastný rozsah — sa nesmú
 * odsadzovať, niektoré stoja vedľa seba v riadku.
 */
form:has(> .card) + form:has(> .card),
form:has(> .card) + .card,
.card + form:has(> .card) { margin-top: var(--gap); }

/* Posledný prvok v karte nesmie pridávať k spodnému paddingu — inak má každá
   karta iné dno podľa toho, čím končí (tabuľka, zoznam, odstavec). */
.card > *:last-child { margin-bottom: 0; }

.field { margin-bottom: 1.5rem; }

/* :not(.switch) je nutné — inak by `.field label` (0,1,1) prebilo `.switch`
   (0,1,0), prepínač by prestal byť flex kontajner a dráha by skolabovala. */
.field label:not(.switch) {
    display: block;
    margin-bottom: .5rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-heading);
}

.field .hint {
    margin: .5rem 0 0;
    font-size: .82rem;
    color: var(--color-text);
}

/* Vysvetlivka, ktorá varuje: pole sa uloží aj prázdne, len to niečo stojí
   (služba bez kontaktnej osoby). Oranžová, nie červená — nie je to chyba. */
.field .hint.is-warning {
    color: var(--color-warn-deep);
}

.input {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-heading);
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
}

.input:focus {
    outline: none;
    border-color: var(--color-indigo);
    box-shadow: 0 0 0 4px rgba(67, 85, 185, .12);
}

/* Pole nadpisu píše v tom istom reze, v akom sa nadpis zobrazí na webe. */
.input-headline {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--color-heading);
}

/* --- Zaškrtávacie pole -----------------------------------------------------
   Jeden vzhľad pre celý admin. Rovnaká špecifickosť ako `.switch input`, ale
   skôr v súbore — prepínač si svoje skrytie ponechá. */

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    border: 1.5px solid #c3c9dd;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: background .12s ease-out, border-color .12s ease-out;
}

input[type="checkbox"]:hover { border-color: var(--color-indigo); }

input[type="checkbox"]:checked {
    border-color: var(--color-navy);
    background: var(--color-navy) center / .7rem no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3.2L13 5'/%3E%3C/svg%3E");
}

/* Stav „časť vybraná" pri hlavičkovom poli v tabuľke. */
input[type="checkbox"]:indeterminate {
    border-color: var(--color-navy);
    background: var(--color-navy) center / .7rem no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}

input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

/* --- Prepínač ------------------------------------------------------------- */

.switch {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    cursor: pointer;
}

.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-track {
    flex: none;
    position: relative;
    width: 2.9rem;
    height: 1.6rem;
    border-radius: var(--radius-pill);
    background: var(--color-muted);
    transition: background .18s ease-out;
}

.switch-track::after {
    content: '';
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(14, 26, 60, .25);
    transition: transform .18s ease-out;
}

.switch input:checked + .switch-track { background: var(--color-live); }
.switch input:checked + .switch-track::after { transform: translateX(1.3rem); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--color-gold); outline-offset: 3px; }

.switch-text strong { display: block; color: var(--color-heading); font-weight: 700; font-size: .95rem; }
.switch-text span { font-size: .82rem; font-weight: 400; color: var(--color-text); }

/* Vypnutý prepínač je červený, nie šedý. Šedá je farba nefunkčného prvku —
   admin ju prečíta ako „toto sa nedá prepnúť", nie ako „toto je vypnuté".
   Červená naopak povie, že niečo na webe práve nie je.
   `input[type="checkbox"]` je nutné: `.switch` má vedľa neho aj skryté pole
   s nulou a to nie je nikdy `:checked` — bez typu by bol každý prepínač
   trvalo vypnutý. */
.switch input[type="checkbox"]:not(:checked) + .switch-track { background: var(--color-danger); }

.switch:has(input[type="checkbox"]:not(:checked)) { border-color: var(--color-danger-line); background: var(--color-danger-soft); }

/* Text prepínača sa mení so stavom — dôsledok vypnutia patrí k vypnutiu,
   nie do trvalého popisu, ktorý sa aj tak prehliadne. */
.switch input[type="checkbox"]:checked ~ .switch-text .switch-off,
.switch input[type="checkbox"]:not(:checked) ~ .switch-text .switch-on { display: none; }

.switch-text strong.switch-off { color: var(--color-danger); }
.switch-text span.switch-off { color: var(--color-danger); }

/* Zamknutý prepínač (vlastný účet, posledný superadmin) nesmie strašiť —
   nie je to voľba, ktorú by mal admin ísť opraviť. */
.switch:has(input[type="checkbox"]:disabled) { border-color: var(--color-line); background: transparent; }
.switch input[type="checkbox"]:disabled:not(:checked) + .switch-track { background: var(--color-muted); }
.switch input[type="checkbox"]:disabled ~ .switch-text strong.switch-off,
.switch input[type="checkbox"]:disabled ~ .switch-text span.switch-off { color: var(--color-text); }

/* --- Meta prehľad --------------------------------------------------------- */

.meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    margin-top: 2rem;
    border-radius: var(--radius-field);
    background: var(--color-line);
    overflow: hidden;
}

.meta div { padding: .9rem 1.1rem; background: var(--color-zebra); }
.meta dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-paused); }
.meta dd { margin: .25rem 0 0; font-weight: 600; color: var(--color-heading); }
.meta .mono { font-family: var(--font-mono); font-size: .85rem; }

.form-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 2rem;
}

/*
 * Čiara nad tlačidlami patrí len dovnútra karty, kde uzatvára jej obsah.
 *
 * Polovica formulárov v admine má lištu vnútri karty a polovica pod ňou na
 * šedom pozadí — tam nebola čiara oddeľovačom, ale zabudnutým okrajom, ktorý
 * visel vo vzduchu. Namiesto prepisovania dvadsiatich šablón rozhoduje o nej
 * miesto, kde lišta naozaj stojí.
 */
.card .form-actions {
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-line);
}

.back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
}

.back:hover { color: var(--color-indigo); }

/* --- Prihlásenie ---------------------------------------------------------- */

.login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.login-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: 3rem;
    background: var(--color-navy);
    color: #fff;
}

.login-aside h2 {
    max-width: 18ch;
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.25;
}

.login-aside p { max-width: 40ch; color: rgba(255, 255, 255, .6); margin: .9rem 0 0; }

/* Bez zoznamu domén má aside len logo a text — auto okraj drží text v strede. */
.login-aside > div { margin: auto 0; }

.login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.login-form { width: 100%; max-width: 25rem; }

.login-form h1 { font-size: 1.75rem; margin-bottom: .5rem; }
.login-form > p { margin: 0 0 2rem; }

/* Vlastná trieda, nie `.check` — tá je v admine orámovaný box s dráhou. */
.login-remember {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-heading);
    cursor: pointer;
}

.login-remember input { margin: 0; }

/* --- Chybová stránka (403, 404, 419…) ------------------------------------- */

.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.error-page .brand { color: var(--color-navy); }

.error-page__body { max-width: 32rem; }

.error-page__code {
    margin: 0 0 .5rem;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-gold);
}

.error-page__body h1 { font-size: 1.5rem; margin-bottom: .5rem; }
.error-page__body p { margin: 0 0 1.75rem; }

ul { list-style: none; margin: 0; padding: 0; }

@media (max-width: 860px) {
    .login { grid-template-columns: 1fr; min-height: 0; }
    .login-aside { padding: 2rem 1.5rem; }
    .login-main { padding: 2.5rem 1.5rem 3.5rem; }
    .card { padding: 1.5rem; }
    .form-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .market:hover { transform: none; }
}

/* --- Kontextová lišta ----------------------------------------------------- */

.contextbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
}

.contextbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.tabs { display: flex; gap: .35rem; flex-wrap: wrap; }

/* Medzera medzi záložkami a obsahom pod nimi. Dva formuláre ju mali
   inline — odtiaľ sťahujeme na jedno miesto. */
.tabs--mb { margin-bottom: 1.75rem; }

.tab {
    padding: .45rem 1rem;
    border-radius: var(--radius-pill);
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
    transition: background .15s ease-out, color .15s ease-out;
}

.tab:hover { background: var(--color-indigo-bg); color: var(--color-indigo); }
.tab-on { background: var(--color-navy); color: #fff; }
.tab-on:hover { background: var(--color-navy); color: #fff; }

.market-switch {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.market-switch label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-paused);
}

.select {
    padding: .5rem .9rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-heading);
    cursor: pointer;
}

/* Vo formulároch je select plnohodnotné pole, nie pilulka. */
.field .select { width: 100%; border-radius: var(--radius-field); font-weight: 400; }

/* Obal polí, ktoré rola „viewer" dostane zamknuté (disabled fieldset).
   Bez rámu a odsadení — v zapisovateľnom stave nesmie zmeniť layout. */
.fields-lock { border: 0; margin: 0; padding: 0; min-width: 0; }
.fields-lock:disabled { opacity: .65; }

.market-switch .btn { padding: .5rem 1.1rem; font-size: .82rem; }

/* --- Tabuľky -------------------------------------------------------------- */

/*
 * Tabuľka sa posúva, nestláča.
 *
 * Samotné `overflow-x: auto` nestačilo: tabuľka sa zmestí do akejkoľvek šírky
 * tým, že zalomí obsah buniek, takže sa nikdy nemala prečo posunúť. Na
 * telefóne z toho bolo meno na dvoch riadkoch a suma „1 549,80 €" na troch.
 *
 * Spodná hranica šírky ju donúti radšej prečnievať a rolovať. Nad ňou
 * pravidlo nerobí nič — tabuľka je aj tak `width: 100%`.
 */
.table-wrap {
    overflow-x: auto;
    /* Posuvník je jediný signál, že vpravo ešte niečo je. Preto je vidieť
       a nie je to systémový pás cez celú šírku. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-line-soft) transparent;
}

/* 28 rem je najužšia šírka, v ktorej sa štvorstĺpcová tabuľka ešte číta.
   Viac by rolovalo aj na širokom monitore v dvojstĺpcovej mriežke, kde
   karta má okolo 30 rem a tabuľka sa do nej pohodlne zmestí. */
.table-wrap > table { min-width: 28rem; }

.table-wrap::-webkit-scrollbar { height: .5rem; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--color-line-soft); border-radius: var(--radius-pill); }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--color-paused); }

.table { width: 100%; border-collapse: collapse; font-size: .9rem; }

.table th {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--color-line);
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-paused);
    white-space: nowrap;
}

.table td {
    padding: .7rem .75rem;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-heading);
    vertical-align: top;
}

.table tr:last-child td { border-bottom: 0; }
.table .mono { font-family: var(--font-mono); font-size: .82rem; white-space: nowrap; }

/*
 * Pole vnútri tabuľky je súčasť riadku, nie samostatný formulár. `.input` má
 * 1rem a 0.8rem odsadenie, riadok tabuľky 0.9rem — v navigácii a v odkazoch
 * pätičky tak boli editovateľné položky viditeľne väčšie než všetko okolo
 * a na telefóne z nich bola tabuľka samých políčok.
 */
.table .input,
.table .ts-wrapper .ts-control { padding: .45rem .65rem; font-size: .85rem; }
.table .ts-wrapper .ts-control { min-height: 0; }
.table .hint { margin: 0; }

.tag {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: var(--radius-pill);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.tag-created     { background: var(--color-ok-bg); color: var(--color-ok); }
.tag-overwritten { background: var(--color-warn-bg); color: var(--color-warn); }
.tag-skipped     { background: var(--color-neutral-bg); color: var(--color-text); }

/* Stavy objednávky. Názvy tried sú z OrderStatus::badge(), aby farba
   znamenala to isté v admine aj na webe. */
.tag-is-success { background: var(--color-ok-bg); color: var(--color-ok); }
.tag-is-info    { background: var(--color-indigo-bg); color: var(--color-indigo); }
.tag-is-neutral { background: var(--color-neutral-bg); color: var(--color-text); }
.tag-is-danger  { background: var(--color-danger-bg); color: var(--color-danger); }

.notice-warn { background: var(--color-danger-bg); border-color: var(--color-danger-line); color: var(--color-danger-deep); }
.notice-warn::before { background: var(--color-danger); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }

/* V mriežke medzeru rieši gap. Bez tejto nuly by druhá karta v riadku dostala
   margin z `.card + .card` a začínala nižšie ako prvá. */
.grid-2 > .card + .card { margin-top: 0; }

/* Rovnaký odstup medzi všetkými blokmi obsahu, nielen medzi dvoma kartami. */
.card + .grid-2,
.grid-2 + .card,
.grid-2 + .grid-2 { margin-top: var(--gap); }

@media (max-width: 860px) {
    .contextbar-inner { align-items: flex-start; }
    .market-switch { width: 100%; }
    .market-switch .select { flex: 1; min-width: 0; }
}

/* --- Formuláre katalógu ---------------------------------------------------- */

.page-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.section-title {
    margin: 2.5rem 0 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--color-line);
    font-size: 1rem;
    letter-spacing: 0;
}

.card > .section-title:first-child { margin-top: 0; }

/* Prvá sekcia v stĺpci nemá čo odsadzovať — 2.5rem navrchu ju posúvalo
   nižšie než kartu v pravom paneli a stĺpce nezačínali na jednej linke. */
.detail-main > :first-child > .section-title:first-child,
.detail-side > :first-child > .section-title:first-child { margin-top: 0; }

textarea.input { resize: vertical; font-family: inherit; line-height: 1.5; }
.input.mono { font-family: var(--font-mono); font-size: .875rem; }

.price-row {
    display: grid;
    grid-template-columns: 8rem repeat(auto-fit, minmax(160px, 1fr));
    align-items: start;
    gap: 0 1rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: .75rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background: var(--color-zebra);
}

.price-row-label {
    padding-top: 1.9rem;
    color: var(--color-heading);
    font-weight: 700;
}

.price-row .field { margin-bottom: .5rem; }

.switch + .switch { margin-top: .6rem; }

.danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--color-danger-line);
    border-radius: var(--radius-card);
    background: var(--color-danger-bg);
}

.danger-zone strong { color: var(--color-danger); }
.danger-zone .hint { margin: .25rem 0 0; }

.danger-btn { background: var(--color-danger); color: #fff; }
.danger-btn:hover { background: transparent; border-color: var(--color-danger); color: var(--color-danger); }

@media (max-width: 700px) {
    .price-row { grid-template-columns: 1fr; }
    .price-row-label { padding-top: 0; margin-bottom: .5rem; }
}

/* ==========================================================================
   App shell — sidebar + topbar (od v5)
   ========================================================================== */

.app {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    min-height: 100vh;
}

/* --- Sidebar -------------------------------------------------------------- */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem 1rem;
    background: var(--color-navy);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

/* Tieň za zásuvkou. Nad 960 px žiadna zásuvka nie je, takže by to bol len
   ďalší stĺpec v mriežke `.app`. */
.nav-veil { display: none; }
.sidebar-brand { color: #fff; padding: .35rem .75rem; }

/* Krížik patrí zásuvke. Na širokej obrazovke panel nikam nemizne, takže
   tam nie je čo zavierať. */
.navclose { display: none; }

.nav { display: flex; flex-direction: column; gap: .15rem; }

.nav-group {
    margin: 1.25rem 0 .4rem;
    padding: 0 .75rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

.nav-group:first-child { margin-top: 0; }

.nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .68);
    transition: background .15s ease-out, color .15s ease-out;
}

/* Názov si berie zvyšok riadku, aby počet ostal pri pravom okraji aj vtedy,
   keď je názov krátky. */
.nav-text { flex: 1; min-width: 0; }

/* Ikona dedí farbu odkazu a je o stupeň tichšia — v paneli sa čítajú názvy,
   ikona je len značka, podľa ktorej sa v pätnástich riadkoch triafa okom.
   Na otvorenej položke svieti spolu s textom. */
.nav-link .ico { font-size: 1.15rem; opacity: .62; }
.nav-link:hover .ico, .nav-link-on .ico { opacity: 1; }

/* Počet položiek vedľa odkazu. Tichý údaj — nesmie prekričať názov. */
.nav-count {
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .38);
}

.nav-link-on .nav-count { color: rgba(45, 46, 121, .55); }

.nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.nav-link-on {
    background: var(--color-gold);
    color: var(--color-navy);
}

.nav-link-on:hover { background: var(--color-gold); color: var(--color-navy); }

.sidebar-foot {
    margin-top: auto;
    padding: .55rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
}

.sidebar-foot:hover { color: #fff; }

/* --- Topbar --------------------------------------------------------------- */

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

.appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 2rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.appbar-left { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.appbar-right { display: flex; align-items: center; gap: 1.25rem; }

.appbar-link { font-size: .875rem; font-weight: 600; color: var(--color-text); white-space: nowrap; }
.appbar-link:hover { color: var(--color-indigo); }

/* --- Ikonka menu ---------------------------------------------------------- */

/* Tri čiarky nakreslené jedným prvkom: prostredná je pozadie, krajné tiene.
   Bez obrázka aj bez troch <span> v šablóne. */
.navtoggle {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background: var(--color-surface);
    color: var(--color-heading);
    cursor: pointer;
}

.navtoggle:hover { background: var(--color-indigo-bg); border-color: var(--color-indigo-bg); }

.navtoggle-bars,
.navtoggle-bars::before,
.navtoggle-bars::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.navtoggle-bars { position: relative; }
.navtoggle-bars::before, .navtoggle-bars::after { content: ''; position: absolute; left: 0; }
.navtoggle-bars::before { top: -.4rem; }
.navtoggle-bars::after { top: .4rem; }

.content { padding: 2.5rem 2rem 4rem; }

/*
 * Obsah ide na celú šírku. Predtým tu bol strop 1080 px, čo na širokom
 * monitore nechávalo vpravo od dashboardu aj od tabuliek prázdnu polovicu
 * obrazovky — a to práve pri obrazovkách, kde sa najviac zíde vidieť viac
 * stĺpcov naraz.
 *
 * Text sa napriek tomu neroztiahne do nečitateľných riadkov: odstavce
 * v `.page-head` majú vlastný `max-width` v `ch`.
 */
.content > * { max-width: none; }

/* --- Rozbaľovacie menu (bez JS) ------------------------------------------- */

.switcher, .usermenu { position: relative; min-width: 0; }

.switcher summary, .usermenu summary {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: .45rem .8rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.switcher summary::-webkit-details-marker,
.usermenu summary::-webkit-details-marker { display: none; }

.switcher summary:hover, .usermenu summary:hover { background: var(--color-indigo-bg); }

.switcher-code {
    padding: .2rem .55rem;
    border-radius: 8px;
    background: var(--color-navy);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
}

/* Lišta sa už na užšom okne nezalamuje do dvoch riadkov, takže názov trhu
   musí vedieť ustúpiť — dlhý názov by inak roztlačil celú lištu a stránka
   by sa dala ťahať do strany. Skráti sa trojbodkou; celý je v ponuke,
   ktorú prepínač otvára. */
.switcher-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.switcher-text strong, .switcher-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-text strong { color: var(--color-heading); font-size: .9rem; font-weight: 700; }
.switcher-text span { font-size: .72rem; color: var(--color-text); }

.caret { color: var(--color-paused); font-size: .7rem; }

.avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-indigo);
    color: #fff;
    font-weight: 800;
    font-size: .875rem;
}

.menu {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    min-width: 20rem;
    padding: .5rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background: #fff;
    box-shadow: var(--shadow-lift);
    z-index: 30;
}

.menu-right { left: auto; right: 0; min-width: 14rem; }

.menu-title {
    display: block;
    padding: .5rem .7rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-paused);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem .7rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease-out;
}

.menu-item:hover { background: var(--color-indigo-bg); }
.menu-item-on { background: var(--color-indigo-bg); }
.menu-item-text { display: flex; flex-direction: column; line-height: 1.3; }
.menu-item-text strong { color: var(--color-heading); font-weight: 700; }
.menu-item-text .mono { font-family: var(--font-mono); font-size: .72rem; color: var(--color-text); }
.menu-item-btn { color: var(--color-danger); font-weight: 600; }

.menu-foot {
    display: block;
    margin-top: .3rem;
    padding: .6rem .7rem;
    border-top: 1px solid var(--color-line);
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-indigo);
}

/* --- Výber pracovného priestoru -------------------------------------------
   Tá istá reč ako dashboard trhu: svetlé pozadie, jedna tabuľka, čísla
   v stĺpcoch. Predtým to bola tmavá obrazovka so žltým tlačidlom a červenými
   pilulkami — používateľ pri každom prihlásení prešiel cez „krikľavú"
   stránku do pokojnej a pôsobilo to ako dva rôzne systémy. */

.selector-body { background: var(--color-bg); min-height: 100vh; }

.selector-main { max-width: 1180px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

.selector-head { margin-bottom: 1.75rem; }
.selector-head h1 { color: var(--color-heading); font-size: clamp(1.6rem, 4vw, 2.2rem); }
.selector-head .kicker { color: var(--color-text); }

/* --- Naposledy otvorené -------------------------------------------------------
   Pri tridsiatich trhoch admin pracuje s hŕstkou a zvyšok otvára zriedka. */
.recent { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

.recent-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-paused);
}

.recent-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    color: var(--color-heading);
    font-size: .82rem;
    font-weight: 600;
}

.recent-item:hover { border-color: var(--color-indigo); color: var(--color-indigo); }
.recent-code { color: var(--color-text); font-size: .72rem; font-weight: 800; letter-spacing: .06em; }

/* Nástroje pod zoznamom. Zakladanie trhu je operácia raz za pol roka —
   textový odkaz, nie tlačidlo na prvom mieste obrazovky. */
.toolbar {
    margin: 1.5rem 0 0;
    font-size: .85rem;
}

.toolbar a { color: var(--color-text); font-weight: 600; }
.toolbar a:hover { color: var(--color-indigo); }

/* --- Filtre výberu trhu ------------------------------------------------------- */

.workspace-filters { margin-bottom: 1.25rem; }

/* Hľadanie dostane zvyšok riadku — filtre vedľa neho majú pevný obsah. */
.field-grow { flex: 1 1 16rem; }

/* Prípona domény vo formulári nového trhu — je pevná, preto nie je pole. */
.domain-suffix { flex: none; color: var(--color-paused); font-size: .88rem; }

/* --- Dashboard ------------------------------------------------------------ */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.35rem 1.5rem;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    transition: box-shadow .18s ease-out;
}

.stat:hover { box-shadow: var(--shadow-lift); }
.stat-value { font-size: clamp(1.35rem, 5.5vw, 2rem); font-weight: 800; letter-spacing: -.03em; color: var(--color-heading); }
.stat-label { font-size: .8rem; font-weight: 600; color: var(--color-text); }
.stat-warn .stat-value { color: var(--color-danger); }

/* Suma v dlaždici je dlhá („1 234,56 €"). V dvoch stĺpcoch na telefóne sa
   lámala po znakoch a z čísla bolo päť riadkov — preto sa v úzkom okne
   dlaždice zúžia, zmenšia odsadenie a číslo sa nezalamuje. */
@media (max-width: 560px) {
    .stats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin-bottom: 1.5rem; }
    .stat { padding: .9rem 1rem; gap: .2rem; }
    .stat-value { white-space: nowrap; }
    .stat-label { font-size: .72rem; }
}

/* --- Responzívne ---------------------------------------------------------- */

/*
 * Panel ako zásuvka.
 *
 * Predtým sa na tejto šírke lámal do vodorovného pásu odkazov: skupiny
 * („Predaj", „Katalóg") sa skryli, z pätnástich položiek boli vidieť tri
 * a zvyšok sa hľadal ťahaním do strany. Zásuvka drží ten istý zoznam, aký
 * je na širokej obrazovke — aj s nadpismi skupín.
 */
@media (max-width: 960px) {
    .app { grid-template-columns: 1fr; }

    .navtoggle { display: inline-flex; }
    .navclose {
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        flex: none;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: rgba(255, 255, 255, .08);
        color: #fff;
        font-family: inherit;
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
    }

    .navclose:hover { background: rgba(255, 255, 255, .16); }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 60;
        width: min(17.5rem, 86vw);
        height: 100%;
        /* dvh, aby lišta prehliadača na telefóne neodrezala spodok panela. */
        height: 100dvh;
        gap: 1.5rem;
        box-shadow: 0 0 40px rgba(14, 26, 60, .35);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .22s ease-out, visibility .22s;
    }

    .nav-veil {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(14, 26, 60, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease-out;
    }

    /* Zásuvka je otvorená. Trieda sedí na <html>, aby sa dalo zamknúť
       rolovanie stránky pod ňou — inak sa pri ťahaní posúva obsah vzadu. */
    .nav-open .sidebar { transform: none; visibility: visible; }
    .nav-open .nav-veil { opacity: 1; pointer-events: auto; }
    .nav-open, .nav-open body { overflow: hidden; }

    .appbar { padding: .75rem 1.25rem; gap: .75rem; }
    .content { padding: 2rem 1.25rem 3rem; }
    .switcher-text span { display: none; }

    /* Ponuka sa nesmie zmestiť „mimo" obrazovku — na 320 px by 20rem
       vytlačilo pravý okraj a stránka by sa dala ťahať do strany. */
    .menu { min-width: 16rem; max-width: calc(100vw - 2rem); }
    .menu-right { right: 0; }
}

/* Prepínač trhu a odkaz na web sa na telefóne zmestia len ako značka a šípka.
   Názov trhu ostáva v ponuke, ktorú prepínač otvára. */
@media (max-width: 560px) {
    .appbar { padding: .7rem 1rem; }
    .appbar-right { gap: .75rem; }
    .appbar-link-text { display: none; }
    .switcher-text { display: none; }
    .switcher summary, .usermenu summary { gap: .45rem; padding: .4rem .6rem; }

    /*
     * Ponuka sa vešia na lištu, nie na tlačidlo pod ňou. Pri malom tlačidle
     * vzadu vľavo jej 16 rem šírky prečnievalo cez pravý okraj a stránka sa
     * dala ťahať do strany. Lišta je `sticky`, takže je platný rodič.
     */
    .switcher, .usermenu { position: static; }

    .switcher .menu, .usermenu .menu {
        left: 1rem;
        right: 1rem;
        min-width: 0;
        max-width: none;
    }
}

/* --- Rich editor (Quill z CDN) -------------------------------------------- */

/*
 * Pevná výška, obsah sa roluje vnútri. Právne dokumenty majú aj niekoľko
 * strán a editor, ktorý rástol s obsahom, tlačil ďalší dokument tak hlboko,
 * že sa k nemu človek dostal len dlhým rolovaním celej stránky.
 *
 * Rolovanie zabezpečí samotný Quill — `.ql-editor` má z knižnice
 * `height: 100%` a `overflow-y: auto`, treba mu len ohraničiť obal.
 */
.editor {
    height: 24rem;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 0 0 var(--radius-field) var(--radius-field);
    background: #fff;
    font-family: var(--font-primary);
    font-size: 1rem;
}

/* Bez JS ostane viditeľná textarea a editor je skrytý. */
.editor:not([hidden]) { display: block; }
.editor-fallback.is-hidden { display: none; }

.ql-toolbar.ql-snow {
    border-color: var(--color-line) !important;
    border-radius: var(--radius-field) var(--radius-field) 0 0;
    background: var(--color-zebra);
}

.ql-container.ql-snow { border-color: var(--color-line) !important; }
.ql-editor { min-height: 100%; line-height: 1.6; color: var(--color-heading); }
.ql-editor h2, .ql-editor h3, .ql-editor h4 { color: var(--color-heading); font-weight: 800; }
.ql-snow .ql-stroke { stroke: var(--color-text); }
.ql-snow .ql-fill { fill: var(--color-text); }
.ql-snow .ql-picker { color: var(--color-heading); }

/* Zdrojový kód — textarea nastúpi na miesto editora a drží sa lišty. */
.editor-fallback.is-code {
    /* Zdrojový kód nastúpi na miesto editora, takže drží jeho výšku — inak by
       sa stránka pri prepnutí do kódu skokom natiahla. */
    height: 24rem;
    max-height: 70vh;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: var(--color-zebra);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--color-heading);
    white-space: pre-wrap;
    tab-size: 2;
}

/* V režime kódu platí to, čo je napísané — formátovacie tlačidlá sú mimo hry. */
.ql-toolbar.ql-snow.is-code .ql-formats:not(.ql-code-formats) {
    opacity: .35;
    pointer-events: none;
}

.ql-snow.ql-toolbar button.ql-source.ql-active .ql-stroke { stroke: var(--color-indigo); }

/* Bublina s popisom tlačidla. Natívny `title` čaká vyše sekundy, redaktor
   dovtedy hádže myšou inam — preto vlastná, hneď pod lištou. */
.ql-toolbar [data-tip] { position: relative; }

.ql-toolbar [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + .45rem);
    left: 50%;
    z-index: 30;
    transform: translateX(-50%);
    padding: .32rem .55rem;
    border-radius: 8px;
    background: var(--color-heading);
    color: #fff;
    font-family: var(--font-primary);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease-out;
}

.ql-toolbar [data-tip]:hover::after,
.ql-toolbar [data-tip]:focus-visible::after { opacity: 1; visibility: visible; }

/* Na dotykovom zariadení niet čo „prejsť myšou" — bublina by po ťuknutí
   ostala visieť a pri krajnom tlačidle by trčala mimo obrazovky. */
@media (hover: none) {
    .ql-toolbar [data-tip]::after { display: none; }
}

/* Otvorená ponuka štýlov je nad bublinou, inak by ju prekryla. */
.ql-toolbar .ql-picker.ql-expanded .ql-picker-label[data-tip]::after { display: none; }

/* „Normálny text" je dlhší než anglické „Normal" — ponuka na to potrebuje miesto. */
.ql-toolbar.ql-snow .ql-picker.ql-header { width: 8.75rem; }

/* Bublina odkazu je z Quillu po anglicky. */
.ql-container.ql-snow .ql-tooltip::before { content: 'Odkaz:'; }
.ql-container.ql-snow .ql-tooltip[data-mode=link]::before { content: 'Zadaj odkaz:'; }
.ql-container.ql-snow .ql-tooltip a.ql-action::after { content: 'Upraviť'; }
.ql-container.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: 'Uložiť'; }
.ql-container.ql-snow .ql-tooltip a.ql-remove::before { content: 'Zrušiť'; }

/* --- Fotky ---------------------------------------------------------------- */

.photo-current {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
    padding: .75rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background: var(--color-zebra);
}

.photo-current img {
    width: 4rem;
    height: 4rem;
    border-radius: 12px;
    object-fit: cover;
}

.photo-remove {
    display: inline-flex !important;
    align-items: center;
    gap: .45rem;
    margin: 0 !important;
    font-size: .82rem !important;
    font-weight: 600;
    color: var(--color-danger) !important;
    cursor: pointer;
}

.input.file { padding: .6rem; font-size: .875rem; cursor: pointer; }

/* Fotka a meno vedľa seba.
   Flex je na vnútornom obale, nie na `<td>`: bunka s `display: flex` prestane
   byť bunkou tabuľky, takže si spodnú čiaru nakreslí vo výške vlastného obsahu
   namiesto výšky riadku — pri riadku s dvojriadkovým kontaktom potom čiara pod
   menom visela vyššie než pod zvyškom riadku. */
.person-cell > .person { display: flex; align-items: center; gap: .7rem; }
.avatar-img { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; flex: none; }

/* --- Preraďovanie --------------------------------------------------------- */

.order { display: inline-flex; gap: .2rem; }

.order-btn {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text);
    font-size: .65rem;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease-out, color .12s ease-out, border-color .12s ease-out;
}

.order-btn:hover:not(:disabled) {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

.order-btn:disabled { opacity: .3; cursor: default; }

.table td.order-cell { white-space: nowrap; width: 1%; }

/* --- Objednávky ----------------------------------------------------------- */

/* Hľadanie je širšie, ostatné filtre rovnaké. `auto-fit` drží riadok aj keď
   obrazovka filter pribudne alebo ubudne. */
.filters {
    display: grid;
    grid-template-columns: 2fr repeat(auto-fit, minmax(9rem, 1fr)) auto;
    align-items: end;
    gap: 0 1rem;
    margin-bottom: 1.5rem;
}

.filters .field { margin-bottom: 0; }
.filters-actions { display: flex; gap: .5rem; }

/* Obyčajná zaškrtávacia voľba vo filtri. `.switch` je prepínač s dráhou,
   ktorý si vlastný input skrýva — tu by ostalo prázdne miesto. */
.check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding-bottom: .55rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-heading);
    cursor: pointer;
}

.check input { accent-color: var(--color-indigo); }

/* ==========================================================================
   Viacnásobný výber (Tom Select)
   Vzhľad je náš, knižnica rieši len správanie. Jeden štýl pre celý admin —
   nový filter stačí označiť atribútom `data-multiselect`.
   ========================================================================== */

/* Knižnica prenesie triedy pôvodného `<select>` na svoj obal, takže obal aj
   ovládací prvok vnútri dostanú rámik z `.input` — dva rámiky nad sebou.
   Rámik patrí len tomu vnútornému. */
.ts-wrapper {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.ts-wrapper.focus { box-shadow: none; }

.ts-wrapper.multi .ts-control {
    min-height: 2.85rem;
    padding: .35rem .5rem;
    gap: .3rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background: #fff;
    font-family: inherit;
    font-size: .9rem;
    color: var(--color-heading);
    box-shadow: none;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--color-indigo);
    box-shadow: 0 0 0 3px rgba(67, 85, 185, .14);
}

.ts-control input { font-family: inherit; font-size: .9rem; color: var(--color-heading); }
.ts-control input::placeholder { color: var(--color-paused); }

/* Vybraná hodnota ako pilulka — rovnaký tvar ako značky filtrov nad tabuľkou. */
.ts-wrapper.multi .ts-control > .item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .12rem .3rem .12rem .6rem;
    border-radius: var(--radius-pill);
    background: var(--color-indigo-bg);
    color: var(--color-indigo);
    font-size: .78rem;
    font-weight: 700;
}

.ts-wrapper.multi .ts-control > .item.active {
    background: var(--color-navy);
    color: #fff;
}

.ts-wrapper.multi .ts-control > .item .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: inherit;
    font-size: .9rem;
    line-height: 1;
}

.ts-wrapper.multi .ts-control > .item .remove:hover { background: rgba(45, 46, 121, .14); }

.ts-dropdown {
    margin-top: .35rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    box-shadow: var(--shadow-lift);
    font-size: .875rem;
    color: var(--color-heading);
}

.ts-dropdown .option { padding: .55rem .8rem; border-radius: 8px; }
.ts-dropdown .active { background: var(--color-indigo-bg); color: var(--color-indigo); }
.ts-dropdown .no-results { padding: .6rem .8rem; color: var(--color-paused); }
.ts-dropdown-content { padding: .3rem; }

/* ==========================================================================
   Zoznam objednávok
   ========================================================================== */

/* Vymieňaný zoznam. Počas načítania sa stlmí, aby bolo vidieť, že sa niečo
   deje, ale neposkakuje — výška ostáva. */
#orders-list.is-loading { opacity: .5; transition: opacity .12s ease-out; }

/* Filtre v jednom riadku. Šesť polí pod sebou zaberalo pol obrazovky skôr,
   než sa človek dostal k tabuľke. */
.filters-row {
    grid-template-columns: minmax(11rem, 1.6fr) repeat(5, minmax(7.5rem, 1fr)) auto;
    gap: .75rem;
}

@media (max-width: 1100px) {
    .filters-row { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

/* Počet nájdených a značky filtrov nad tabuľkou. */
.list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: -.25rem 0 1rem;
}

.list-count { font-size: .85rem; color: var(--color-text); }
.list-count strong { color: var(--color-heading); font-weight: 800; }

.filter-chips { margin: 0; }

.chip-filter {
    background: var(--color-indigo-bg);
    border-color: transparent;
    color: var(--color-indigo);
    font-size: .75rem;
}

.chip-filter:hover { background: var(--color-navy); color: #fff; }

/* Dlaždice stavu. Neuhradené sú modré (ešte prídu), po splatnosti červené. */
.stat-info .stat-value { color: var(--color-indigo); }

/* --- Hromadné akcie --------------------------------------------------------- */

.bulkbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .75rem 1.1rem;
    border-radius: var(--radius-field);
    background: var(--color-navy);
    color: #fff;
}

.bulkbar[hidden] { display: none; }
.bulkbar-count { font-size: .875rem; margin-right: auto; }
.bulkbar-count strong { font-size: 1.05rem; font-weight: 800; }
.bulkbar .secondary-btn { border-color: rgba(255, 255, 255, .3); color: #fff; }
.bulkbar .secondary-btn:hover { background: #fff; border-color: #fff; color: var(--color-navy); }
.bulkbar .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Tabuľka objednávok ------------------------------------------------------ */

.table-orders td { vertical-align: middle; }
.table-orders .col-check { width: 1%; padding-right: 0; }
.table-orders .col-actions { width: 1%; text-align: right; }
.nowrap { white-space: nowrap; }

.orow { cursor: pointer; transition: background .12s ease-out; }
.orow:hover { background: var(--color-bg); }

/* Bez farebného pruhu vľavo: typ aj stav sú v riadku ako odznaky a pruh
   hovoril to isté tretíkrát. */

/* Nová objednávka = ešte ju nikto neotvoril. */
.orow.is-new { background: #f4f7ff; }
.orow.is-new:hover { background: #e9eefb; }

.table-orders .is-danger { color: var(--color-danger); font-weight: 700; }

/* --- Ponuka riadku ---------------------------------------------------------- */

.rowmenu { position: relative; display: inline-block; }

.rowmenu > summary {
    padding: .1rem .5rem;
    border-radius: 8px;
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}

.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu > summary:hover { background: var(--color-indigo-bg); color: var(--color-indigo); }
.rowmenu[open] > summary { background: var(--color-indigo-bg); color: var(--color-indigo); }
.rowmenu .menu { left: auto; right: 0; min-width: 15rem; }

/*
 * Ponuka patrí nad stránku, nie do tabuľky. `.table-wrap` má vodorovné
 * posúvanie, a to zvisle oreže všetko, čo z neho vytŕča — ponuka posledného
 * riadku by končila skratom o pol položky.
 *
 * Riešením nie je `overflow: visible`: obal by prestal orezávať aj do strán
 * a tabuľka širšia než obrazovka by roztiahla celú stránku (na telefóne
 * z 390 na 735 px). Namiesto toho obal na čas otvorenia narastie dole
 * o výšku ponuky a záporný okraj tú výšku vráti rozloženiu — posúvanie
 * ostáva zapnuté, takže tabuľka neskočí späť na začiatok.
 */
.table-wrap:has(.rowmenu[open]) { padding-bottom: 16rem; margin-bottom: -16rem; }

/* `.menu-item-btn` je inde červené tlačidlo odhlásenia — v ponuke riadku sú
   to bežné položky a červená patrí len mazaniu. */
.rowmenu .menu-item-btn { color: var(--color-heading); font-weight: 400; }
.rowmenu .menu-item-btn.is-danger { color: var(--color-danger); font-weight: 600; }
.rowmenu .menu-item[disabled] { color: var(--color-paused); cursor: not-allowed; }
.rowmenu .menu-item[disabled]:hover { background: transparent; }

/* Prečo je akcia sivá. Tooltip to nepovie nikomu, kto na tlačidlo neukáže
   myšou — a na dotykovom displeji ani vtedy. */
.rowmenu .menu-note {
    display: block;
    padding: 0 1rem .7rem;
    margin-top: -.35rem;
    font-size: .74rem;
    line-height: 1.35;
    color: var(--color-text);
}

/* Ponuka v hlavičke detailu stojí vedľa odznakov, nie v tabuľke. */
.detail-head-actions { align-items: center; }

.detail-head-actions .rowmenu > summary {
    padding: .3rem .7rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
}

/* --- Výber dátumu ------------------------------------------------------------
   Natívny `input[type=date]` sa riadi jazykom prehliadača — flatpickr drží
   d.m.rrrr bez ohľadu na to, ako má admin nastavený systém. */

.flatpickr-calendar {
    border-radius: var(--radius-field);
    box-shadow: var(--shadow-lift);
    font-family: var(--font-primary);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--color-navy);
    border-color: var(--color-navy);
}

.flatpickr-day.today { border-color: var(--color-gold); }
.flatpickr-day:hover { background: var(--color-indigo-bg); }
.flatpickr-months .flatpickr-month { color: var(--color-heading); }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700; }

/* --- Dialóg ------------------------------------------------------------------ */

.dialog {
    width: min(28rem, calc(100vw - 2rem));
    padding: 1.75rem;
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift);
    color: var(--color-text);
}

.dialog::backdrop { background: rgba(14, 26, 60, .45); }
.dialog h2 { margin-bottom: 1.25rem; font-size: 1.1rem; }
.dialog .field:last-of-type { margin-bottom: 0; }

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.5rem;
}

/* --- Stránkovanie ------------------------------------------------------------ */

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.pager-summary { font-size: .82rem; color: var(--color-text); }
.pager-pages { display: flex; align-items: center; gap: .25rem; }

.pager-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text);
}

.pager-link:hover { background: var(--color-indigo-bg); color: var(--color-indigo); }
.pager-link.is-on { background: var(--color-navy); color: #fff; }
.pager-link.is-on:hover { background: var(--color-navy); color: #fff; }
.pager-link.is-off { color: var(--color-paused); }
.pager-link.is-off:hover { background: transparent; color: var(--color-paused); }
.pager-gap { padding: 0 .25rem; color: var(--color-paused); }

/* --- Odznaky stavov ---------------------------------------------------------- */

.tag-order { background: var(--color-indigo-bg); color: var(--color-indigo); }
.tag-quote { background: var(--color-warn-bg); color: var(--color-warn); }

.state-new         { background: var(--color-indigo-bg); color: var(--color-indigo); }
.state-confirmed   { background: var(--color-warn-bg); color: var(--color-warn); }
.state-in_progress { background: var(--color-warn-bg-soft); color: var(--color-warn-deep); }
.state-completed   { background: var(--color-ok-bg); color: var(--color-ok); }
.state-cancelled   { background: var(--color-neutral-bg); color: var(--color-text); }

/* Nezaplatené a po splatnosti musia biť do očí — obe červené, po splatnosti
   navyše tučné a s rámikom. */
.pay-paid     { background: var(--color-ok-bg); color: var(--color-ok); }
.pay-unpaid   { background: var(--color-danger-bg); color: var(--color-danger); }
.pay-pending  { background: var(--color-warn-bg); color: var(--color-warn); }
.pay-refunded { background: var(--color-neutral-bg); color: var(--color-text); }

.pay-overdue {
    background: var(--color-danger);
    color: #fff;
    font-weight: 800;
}

.child-row td { color: var(--color-text); background: var(--color-zebra); }
.child-row td:first-child { padding-left: 1.75rem; }

.pagination { margin-top: 1.25rem; font-size: .875rem; }
.pagination svg { width: 1rem; height: 1rem; display: inline-block; vertical-align: middle; }

.card h3 {
    margin: 0 0 .75rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-paused);
}

@media (max-width: 860px) {
    .filters { grid-template-columns: 1fr; gap: 0; }
    .filters .field { margin-bottom: 1rem; }
}

/* ==========================================================================
   Filtre ako zásuvka (do 960 px)
   Šesť polí nad tabuľkou zabralo na telefóne pol obrazovky skôr, než sa dalo
   pozrieť na prvý riadok zoznamu. Formulár sa nikam nepresúva — ostáva ten
   istý `<form data-filters>` na tom istom mieste, len ho tieto pravidlá
   umiestnia ako panel, takže ho list.js aj orders.js obsluhujú ďalej.

   Všetko visí na triede `filters-drawer`, ktorú nasadzuje admin-filters.js:
   bez skriptu ostane riadok filtrov na obrazovke a nie je čo otvárať.
   ========================================================================== */

.filterbtn { display: none; }
.filters-head, .filters-foot { display: none; }

@media (max-width: 960px) {
    .filters-drawer .filterbtn {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin-bottom: 1.25rem;
        padding: .6rem 1.1rem;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-pill);
        background: var(--color-surface);
        color: var(--color-heading);
        font-family: inherit;
        font-size: .875rem;
        font-weight: 700;
        cursor: pointer;
    }

    .filters-drawer .filterbtn:hover { background: var(--color-indigo-bg); border-color: var(--color-indigo-bg); }
    .filters-drawer .filterbtn .ico { color: var(--color-paused); font-size: 1.05rem; }

    /* Počet zapnutých filtrov. Aj zo zavretej zásuvky musí byť vidieť, či je
       zoznam orezaný, alebo je to všetko. */
    .filters-drawer .filterbtn-count {
        display: grid;
        place-items: center;
        min-width: 1.35rem;
        height: 1.35rem;
        padding: 0 .35rem;
        border-radius: var(--radius-pill);
        background: var(--color-navy);
        color: #fff;
        font-size: .72rem;
        font-weight: 800;
    }

    .filters-drawer .filters {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 62;
        display: flex;
        flex-direction: column;
        /* Mriežka filtrov má `align-items: end`, aby polia v riadku sedeli
           na jednej linke. V stĺpci by to isté pravidlo znamenalo „k pravému
           okraju" a polia by stáli odsadené a každé inak široké. */
        align-items: stretch;
        gap: 0;
        width: min(22rem, 88vw);
        height: 100dvh;
        margin: 0;
        padding: 0;
        border-radius: 0;
        overflow-y: auto;
        box-shadow: 0 0 40px rgba(14, 26, 60, .35);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .22s ease-out, visibility .22s;
    }

    .filters-drawer .filters .field { margin: 0 0 1.1rem; padding: 0 1.25rem; }

    /* Hlavička a pätka kreslí skript — v šablóne by to boli dva prvky, ktoré
       bez zásuvky nemajú čo robiť. */
    /* Odstup pod hlavičkou drží ona sama, nie prvé pole: `:first-of-type` by
       muselo mieriť na prvý `div` v paneli a tým je práve táto hlavička. */
    .filters-drawer .filters-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.35rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--color-line);
        background: var(--color-surface);
    }

    .filters-title {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-paused);
    }

    .filters-close {
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        flex: none;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: var(--color-bg);
        color: var(--color-heading);
        font-family: inherit;
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
    }

    .filters-close:hover { background: var(--color-indigo-bg); color: var(--color-indigo); }

    .filters-drawer .filters-foot {
        position: sticky;
        bottom: 0;
        display: block;
        margin-top: auto;
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--color-line);
        background: var(--color-surface);
    }

    /* Zrušenie filtrov patrí k poliam, nie k potvrdeniu — ostáva medzi nimi. */
    .filters-drawer .filters-actions { margin: 0 0 1.1rem; padding: 0 1.25rem; }

    .filters-open .filters { transform: none; visibility: visible; }
    .filters-open, .filters-open body { overflow: hidden; }

    /* Tieň za zásuvkou. Pseudoprvok, nie ďalší <div> v každej zo siedmich
       šablón — zavretie klikom vedľa rieši skript podľa polohy kliknutia. */
    .filters-open body::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 52;
        background: rgba(14, 26, 60, .5);
    }
}

/* Zvislý variant — pri nepárnom počte položiek nenecháva prázdne bunky. */
.meta-list { grid-template-columns: 1fr; }
.meta-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.meta-list dt { flex: none; }
.meta-list dd { text-align: right; word-break: break-word; }
.meta-list .mono { white-space: normal; }

/* ==========================================================================
   Dashboard — prehľad biznisu
   ========================================================================== */

.dashboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap);
    flex-wrap: wrap;
}

.dashboard-controls {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Prepínač obdobia. Sú to submit tlačidlá v GET formulári, nie odkazy —
   voľba tak ostáva v adrese a dá sa poslať, a zároveň funguje bez JS. */
.period-switch {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.period-switch .tab {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* Reset tlačidla je špecifickejší než .tab-on, aktívne obdobie preto musí navy vrátiť. */
.period-switch .tab-on,
.period-switch .tab-on:hover { background: var(--color-navy); color: #fff; }

.custom-range {
    margin: 0 0 var(--gap);
}

.custom-range > summary {
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-indigo);
    list-style: none;
}

.custom-range > summary::-webkit-details-marker { display: none; }

.custom-range__form {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 0;
    padding: 1.25rem;
    background: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.custom-range__form label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-heading);
}

/* --- Veľké čísla ---------------------------------------------------------- */

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gap);
    margin: 0 0 var(--gap);
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.4rem 1.5rem;
    background: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* Dlaždica, ktorá vedie do zoznamu za číslom. Farbu textu si drží sama —
   bez toho by ju odkaz prefarbil na modrú a z prehľadu by bola navigácia. */
.kpi-link {
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}

.kpi-link:hover {
    box-shadow: var(--shadow-card-hover, 0 6px 20px rgba(22, 32, 90, .14));
    transform: translateY(-1px);
}

.kpi-link:focus-visible {
    outline: 2px solid var(--color-indigo);
    outline-offset: 2px;
}

.kpi-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text);
}

.kpi-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-heading);
}

.kpi-note {
    font-size: .78rem;
    color: var(--color-paused);
}

/* Faktúry po splatnosti. Zlé číslo musí byť červené na prvý pohľad — farba,
   rámik aj popisky, nielen odtieň pozadia. */
.kpi.is-danger { background: var(--color-danger-bg); }

.kpi.is-danger .kpi-label,
.kpi.is-danger .kpi-value,
.kpi.is-danger .kpi-note { color: var(--color-danger); }

.delta {
    align-self: flex-start;
    padding: .12rem .55rem;
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 700;
}

.delta.is-up   { background: var(--color-ok-bg); color: var(--color-ok); }
.delta.is-down { background: var(--color-danger-bg); color: var(--color-danger); }
.delta.is-flat { background: var(--color-neutral-bg); color: var(--color-text); }
.delta.is-none { background: none; color: var(--color-paused); padding-left: 0; font-weight: 500; }

/* --- Grafy ---------------------------------------------------------------- */

/* Chart.js potrebuje rodiča s určenou výškou, inak plátno rastie donekonečna
   pri každom prekreslení. Výška prichádza inline z komponentu. */
.chart {
    position: relative;
    width: 100%;
}

.chart canvas { max-width: 100%; }

/* --- Graf tržieb s prepínačom metriky -------------------------------------- */

.chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.chart-head .tab {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    background: var(--color-bg);
}

.chart-head .tab-on,
.chart-head .tab-on:hover { background: var(--color-navy); color: #fff; }

.chart-aside {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.chart-compare {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.chart-compare input { accent-color: var(--color-indigo); }

.chart-total {
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-heading);
    white-space: nowrap;
}

/* Prázdny graf je len mriežka bez informácie — na jej mieste je veta.
   `display` musí ustúpiť atribútu hidden, inak veta visí nad grafom aj vtedy,
   keď dáta sú. */
.chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-field);
    color: var(--color-paused);
    font-size: .9rem;
}

.chart-empty[hidden] { display: none; }

.chart-legend { margin: 1rem 0 0; font-size: .8rem; }
.abandoned-more { margin: 1rem 0 0; }


/* --- Plávajúci widget upozornení --------------------------------------------
   Nie sekcia prehľadu, ale výzva na akciu: drží sa v rohu obrazovky, obsah pod
   ním sa neposúva a dá sa zavrieť. */

.alerts {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 30;
    width: min(23rem, calc(100vw - 3rem));
    max-height: min(32rem, calc(100vh - 3rem));
    overflow-y: auto;
    padding: 1rem 1.15rem 1.15rem;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-lift);
}

.alerts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.alerts-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-paused);
}

.alerts-close {
    border: 0;
    background: none;
    padding: 0 .25rem;
    color: var(--color-paused);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.alerts-close:hover { color: var(--color-heading); }

/* Faktúry po splatnosti. Jediná položka s tlačidlom — ostatné stačí otvoriť. */
.alerts-money {
    margin-top: .75rem;
    padding: .85rem .9rem;
    border-radius: var(--radius-field);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.alerts-money p {
    display: flex;
    flex-direction: column;
    margin: 0 0 .7rem;
    font-size: .85rem;
    line-height: 1.35;
}

.alerts-money strong { font-size: .95rem; font-weight: 800; }

.alerts-money .primary-btn {
    width: 100%;
    justify-content: center;
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

.alerts-money .primary-btn:hover { background: var(--color-danger-deep); border-color: var(--color-danger-deep); color: #fff; }

.alerts-list {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    font-size: .85rem;
}

.alerts-list > li {
    padding: .5rem 0;
    border-bottom: 1px solid var(--color-line);
}

.alerts-list > li:last-child { border-bottom: 0; padding-bottom: 0; }

.alerts-list a {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--color-text);
}

.alerts-list a:hover { color: var(--color-indigo); }

.alerts-count {
    flex: 0 0 auto;
    min-width: 1.9rem;
    padding: .05rem .45rem;
    border-radius: var(--radius-pill);
    background: var(--color-danger-bg);
    color: var(--color-danger);
    font-weight: 800;
    text-align: center;
}

.alerts-note { color: var(--color-gold-deep); font-weight: 600; }

/* Detail chýbajúcich cien je zabalený — widget má ostať krátky. */
.alerts-details > summary {
    cursor: pointer;
    color: var(--color-gold-deep);
    font-weight: 600;
    list-style: none;
}

.alerts-details > summary::-webkit-details-marker { display: none; }
.alerts-details .table-wrap { margin-top: .75rem; }
.alerts-details .table { font-size: .8rem; }
.alerts-details p { margin: .5rem 0 0; }

/* Na telefóne je 32 rem widgetu vyše polovica obrazovky a prehľad pod ním
   sa nedá čítať bez zavretia. Nižší strop z neho spraví lištu s rolovaním. */
@media (max-width: 640px) {
    .alerts {
        right: .75rem;
        bottom: .75rem;
        width: calc(100vw - 1.5rem);
        max-height: min(18rem, 45vh);
    }
}

/* Vlastný tooltip grafu. Visí na <body>, aby ho neorezal `overflow` karty. */
.chart-tip {
    position: absolute;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    /* Šírka nesmie závisieť od toho, kde bublina práve stojí — inak by ju
       skript pri okraji zmeral užšiu a zle vycentroval. `max-content` ju
       drží rovnakú všade, strop ju drží na obrazovke. */
    width: max-content;
    max-width: min(17rem, calc(100vw - 1.5rem));
    min-width: 9rem;
    padding: .6rem .75rem;
    border-radius: var(--radius-field);
    background: var(--color-navy);
    color: #fff;
    font-size: .8rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-100% - .6rem));
    transition: opacity .12s ease-out;
}

.chart-tip.is-on { opacity: 1; }
.chart-tip-date { color: rgba(255, 255, 255, .6); font-weight: 600; }
.chart-tip-value { font-size: 1.05rem; font-weight: 700; }
.chart-tip-change { font-weight: 700; }
.chart-tip-change.is-up { color: #6fdcae; }
.chart-tip-change.is-down { color: #ff9d8a; }
.chart-tip-change.is-none { color: rgba(255, 255, 255, .5); font-weight: 500; }

/* --- Konverzný lievik ----------------------------------------------------- */

/* Kroky v jednom riadku so šípkami. Graf pod nimi hovoril to isté druhýkrát. */
.funnel-flow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .35rem;
    flex-wrap: wrap;
}

.funnel-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    min-width: 0;
    text-align: center;
}

.funnel-node-value {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
}

.funnel-node-share { font-size: .78rem; font-weight: 700; }
.funnel-node-share.is-ok  { color: var(--color-live); }
.funnel-node-share.is-mid { color: var(--color-gold-deep); }
.funnel-node-share.is-low { color: var(--color-danger); }

.funnel-node-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-text);
}

.funnel-arrow {
    align-self: center;
    margin-top: -.6rem;
    color: var(--color-paused);
    font-size: .9rem;
}

.funnel-foot {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 0;
    padding: .85rem 1rem;
    border-radius: var(--radius-field);
    background: var(--color-bg);
    font-size: .82rem;
    color: var(--color-text);
}

.funnel-foot strong { color: var(--color-heading); }

/* --- Zloženie zákazníkov --------------------------------------------------- */

.donuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.5rem 2rem;
}

/* Deliaca čiara medzi skupinami, nie druhá karta — je to jeden údaj v dvoch
   pohľadoch. Pri zalomení pod seba by čiara vľavo visela vo vzduchu. */
.donut + .donut { border-left: 1px solid var(--color-line); padding-left: 2rem; }

@media (max-width: 720px) {
    .donut + .donut { border-left: 0; padding-left: 0; }
}

.donut { display: flex; align-items: center; gap: 1.25rem; }

.donut-chart {
    position: relative;
    flex: 0 0 auto;
    width: 120px;
}

.donut-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--color-heading);
    pointer-events: none;
}

.donut-legend { flex: 1; min-width: 0; }

.donut-title {
    margin: 0 0 .6rem;
    font-size: .9rem;
    font-weight: 800;
    color: var(--color-heading);
}

.donut-legend ul { list-style: none; margin: 0; padding: 0; }

.donut-legend li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
    font-size: .85rem;
}

.donut-dot { width: .6rem; height: .6rem; border-radius: 50%; }
.donut-dot.is-first  { background: var(--color-navy); }
.donut-dot.is-second { background: var(--color-gold); }

.donut-label { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-percent { font-weight: 700; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.donut-count { color: var(--color-paused); font-size: .8rem; }

/*
 * Na telefóne zjedol 120 px kruh toľko šírky, že z popisky vedľa neho ostalo
 * „Firmy a sp…". Pod kruhom má legenda celú kartu.
 *
 * Kruh aj nadpis idú do stredu, nie k ľavému okraju: sám na riadku pri kraji
 * vyzeral ako zabudnutý. Riadky legendy ostávajú zarovnané vľavo a vpravo —
 * názov a percento sa čítajú v stĺpci, nie od stredu.
 */
@media (max-width: 480px) {
    .donut { flex-direction: column; align-items: center; gap: .9rem; }
    .donut-legend { width: 100%; }
    .donut-title { text-align: center; }
}

/* --- Drobné ---------------------------------------------------------------- */

.inline-stats {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
}

.inline-stats > div { display: flex; flex-direction: column; }

.inline-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-heading);
}

.inline-label { font-size: .8rem; color: var(--color-text); }

/* --- Rebríček zákazníkov --------------------------------------------------- */

.people {
    list-style: none;
    margin: 0;
    padding: 0;
}

.person {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--color-line);
}

.person:last-child { border-bottom: 0; padding-bottom: 0; }
.person:first-child { padding-top: 0; }

.person-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.person-main strong { color: var(--color-heading); font-size: .95rem; }

.person-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-link:hover { color: var(--color-indigo); }
.person-link svg { flex: 0 0 auto; width: .9rem; height: .9rem; }

/* Kontakt v tabuľke: e-mail a telefón pod sebou, nie za sebou v riadku. */
.contact-cell { display: flex; flex-direction: column; gap: .1rem; }

.person-figures {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
}

.person-figures strong { color: var(--color-heading); white-space: nowrap; }
.person-figures .hint { margin: 0; font-size: .78rem; }

.big-number {
    margin: 0 0 .5rem;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-heading);
}

.health {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.health li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--color-line);
    font-size: .9rem;
}

.health li:last-child { border-bottom: 0; }
.health li > span { color: var(--color-text); }
.health li.is-ok strong { color: var(--color-live); }
.health li.is-warn strong { color: var(--color-danger); }

/* Varovanie sa má dať rozoznať aj bez farby — nie každý ju rozlíši. */
.health li.is-warn > span::before {
    content: "⚠ ";
    color: var(--color-danger);
}

.btn-sm {
    padding: .4rem .9rem;
    font-size: .8rem;
}

.ta-right { text-align: right; }

/* Hlavička stĺpca musí stáť nad svojimi číslami, nie vedľa nich: `.table th`
   má vlastné `text-align: left` a to samotnú `.ta-right` prebíjalo. */
.table th.ta-right, .table td.ta-right { text-align: right; }

/*
 * Riadok tabuľky je údaj, nie odstavec.
 *
 * Bunky sa preto nelámu. Meno na dvoch riadkoch, dátum na dvoch a suma
 * rozdelená medzi číslo a „€" sa nedajú prečítať a už vôbec nie porovnať
 * s riadkom nad nimi — a pritom na to nie je dôvod, tabuľka má vedľa seba
 * miesto, len ho nedostala. Radšej nech prečnieva a `.table-wrap` ju posunie.
 */
.table th, .table td { white-space: nowrap; }

/*
 * Výnimka: stĺpce, ktorých obsahom je veta, a prázdne stavy cez celý riadok.
 * Tie sa lámať musia — inak je tabuľka široká ako celá otázka. Strop šírky
 * drží stĺpec v rozumnej miere aj na širokom monitore.
 */
.table .cell-text,
.table .cell-question,
.table .cell-services,
.table .cell-position,
.table td[colspan] { white-space: normal; }

/* Spodná hranica je dôležitejšia než horná: keď sa ostatné stĺpce nelámu,
   celé stláčanie tabuľky odnesie práve tento jeden a z vety je stĺpik po
   dvoch slovách. Pod hranicu už nejde — tabuľka sa radšej posunie. */
.table .cell-text { min-width: 16rem; max-width: 26rem; }

.table .cell-question { min-width: 16rem; max-width: 34rem; }

/*
 * Názov pozície v navigácii a v pätičke má pod sebou celú vetu vysvetlenia.
 * Ako `nowrap` (predvolené pre bunku) z nej bol jeden riadok dlhý cez tri
 * obrazovky a tabuľka nastavení sa na telefóne ťahala do nekonečna.
 */
.table .cell-position { min-width: 10rem; max-width: 22rem; }
.table .cell-position .hint { margin-top: .25rem; font-size: .78rem; line-height: 1.45; }

/* ==========================================================================
   Navigácia a odkazy v pätičke (Nastavenia webu)
   Štyri stĺpce, z ktorých tri sú formulárové polia. Na telefón sa taká
   tabuľka nezmestí ani zďaleka — `.table-wrap` ju síce roluje do strany,
   ale položka menu je vec, ktorú treba vidieť celú naraz, nie po stĺpcoch.
   Do 700 px sa preto riadok rozloží na kartu: názov, pod ním jeho polia.
   ========================================================================== */

@media (max-width: 700px) {
    /* `.table-wrap > table` má min-width 28 rem — tá by kartu držala širšiu
       než obrazovka a rolovanie do strany by ostalo aj po rozložení. */
    .table-wrap > .table-fixednav { min-width: 0; }

    .table-fixednav,
    .table-fixednav tbody,
    .table-fixednav tr,
    .table-fixednav td { display: block; width: auto; }

    .table-fixednav thead { display: none; }

    .table-fixednav tr {
        padding: 1.1rem 0;
        border-bottom: 1px solid var(--color-line);
    }

    .table-fixednav tr:first-child { padding-top: 0; }
    .table-fixednav tr:last-child { padding-bottom: 0; border-bottom: 0; }

    .table-fixednav td {
        padding: 0;
        border: 0;
        white-space: normal;
        max-width: none;
    }

    .table-fixednav td + td { margin-top: .85rem; }

    /* Bez hlavičky tabuľky by z polí bol rad políčok bez popisu — meno stĺpca
       nastúpi nad svoju bunku. */
    .table-fixednav td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .35rem;
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .02em;
        color: var(--color-text);
    }

    /* `.table .cell-position` má strop 22 rem a spodok 10 rem — v karte nemá
       čo obmedzovať, a rovnaká špecifickosť by inak vyhrala. */
    .table-fixednav .cell-position { min-width: 0; max-width: none; }
    .table-fixednav .cell-position strong { font-size: 1rem; color: var(--color-heading); }
    .table-fixednav .cell-position .hint { margin-top: .3rem; }

    /* Adresa je dlhý reťazec bez medzery; ako `nowrap` by kartu roztiahla. */
    .table-fixednav .mono { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 860px) {
    .dashboard-head { flex-direction: column; }
}

/*
 * Lievik na telefóne. Päť krokov so šípkami sa do riadku nezmestí a pri
 * zalomení ostávali šípky visieť na koncoch riadkov a ukazovať do prázdna.
 * Mriežka po dvoch drží kroky pod sebou v poradí, v akom idú.
 */
@media (max-width: 560px) {
    .funnel-flow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem .5rem;
    }

    .funnel-arrow { display: none; }
}

/* ==========================================================================
   Detail objednávky
   Hierarchia je celý zmysel tejto obrazovky: číslo a suma sa čítajú na diaľku,
   položky a zákazník normálne, technické údaje až keď ich niekto hľadá.
   ========================================================================== */

/* --- Hlavička --------------------------------------------------------------- */

.ohead {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-line);
}

.ohead-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ohead-nav .back { margin: 0; }

.ohead-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.ohead-ident h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: -.03em;
}

.ohead-date { margin: .15rem 0 0; font-size: .82rem; color: var(--color-paused); }

/* Jediná suma na stránke. V rozpise vpravo je už len to, z čoho vznikla. */
.ohead-sum { text-align: right; }

.ohead-sum strong {
    display: block;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
}

.ohead-sum-note {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-paused);
}

.ohead-who {
    margin: .9rem 0 0;
    font-size: .92rem;
    line-height: 1.6;
}

.ohead-who strong { color: var(--color-heading); font-weight: 700; }
.ohead-who a { color: var(--color-indigo); }
.ohead-who a:hover { text-decoration: underline; }
.ohead-who .sep { margin: 0 .5rem; color: var(--color-paused); }

.ohead-tags {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.ohead-tags-right {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.chip-firma {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

.chip-zivnostnik {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);
}

.ohead-tags .rowmenu > summary {
    padding: .3rem .7rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-heading);
}

.ohead-tags .rowmenu > summary .caret { font-size: .6rem; }

/* --- Prechádzanie objednávok ------------------------------------------------ */

.ordernav { display: flex; align-items: center; gap: .5rem; font-size: .78rem; }

.ordernav-link {
    padding: .2rem .5rem;
    border-radius: 8px;
    font-family: var(--font-mono);
    color: var(--color-text);
}

.ordernav-link:hover { background: var(--color-indigo-bg); color: var(--color-indigo); }
.ordernav-link.is-off { color: var(--color-paused); }

/* --- Dva stĺpce -------------------------------------------------------------- */

.detail-cols {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--gap);
}

.detail-main { min-width: 0; }
.detail-main > * + * { margin-top: var(--gap); }

/* Pravý panel drží pri sebe: admin ho používa počas čítania položiek. */
.detail-side { position: sticky; top: 1.5rem; min-width: 0; }
.detail-side > * + * { margin-top: 1rem; }
.detail-side .card + .card { margin-top: 1rem; }

@media (max-width: 1100px) {
    .detail-cols { grid-template-columns: 1fr; }
    .detail-side { position: static; }
}

/* --- Položky ---------------------------------------------------------------- */

.card-tight { padding: .5rem 1.25rem 1rem; }

.itable { width: 100%; border-collapse: collapse; }

.itable th {
    padding: .7rem .5rem;
    border-bottom: 1px solid var(--color-line);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-paused);
}

.itable td { padding: .8rem .5rem; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.itable tr:last-child td { border-bottom: 0; }
.itable .col-qty { width: 3rem; }

.irow { transition: background .12s ease-out; }
.irow:hover, .irow:focus-visible { background: var(--color-zebra); outline: 0; }

.irow-name { display: block; color: var(--color-heading); font-size: .95rem; font-weight: 700; }
.irow-service { display: block; margin-top: .1rem; font-size: .8rem; color: var(--color-text); }
.irow-gross { display: block; color: var(--color-heading); font-weight: 700; font-variant-numeric: tabular-nums; }

/*
 * Cenový detail drží miesto aj keď nie je vidieť — riadok tak pri prejdení
 * myšou neposkočí. Kde sa myš nedá použiť, je vidieť vždy.
 */
.irow-net {
    display: block;
    margin-top: .1rem;
    font-size: .78rem;
    color: var(--color-text);
    opacity: 0;
    transition: opacity .12s ease-out;
}

.irow:hover .irow-net,
.irow:focus-visible .irow-net,
.irow:focus-within .irow-net { opacity: 1; }

@media (hover: none) {
    .irow-net { opacity: 1; }
}

.irow-addon td { color: var(--color-text); font-size: .85rem; padding-top: .4rem; padding-bottom: .4rem; }
.irow-addon td:first-child { padding-left: 1.5rem; }
.irow-mark { color: var(--color-paused); margin-right: .2rem; }

.tag-onrequest { background: var(--color-warn-bg); color: var(--color-warn); }

/* --- Poznámka zákazníka ------------------------------------------------------ */

/* Poznámka je obyčajná karta so zlatým prúžkom po ľavej strane, nie celá
   zlatá plocha. Vyplnené pole hlásilo dôležitosť, akú citát od zákazníka
   nemá — vedľa tabuľky položiek si na seba ťahalo pozornosť ako výstraha. */
.note-customer {
    border-left: 3px solid var(--color-gold);
    box-shadow: none;
}

.note-customer h3 {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .5rem;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-paused);
}

.note-customer h3 .ico { font-size: .95rem; }

/* Text poznámky je citát, preto kurzíva a väčší riadok — je to jediné
   miesto na obrazovke, kde hovorí zákazník, nie systém. */
.note-customer p {
    margin: 0;
    font-style: italic;
    line-height: 1.55;
    color: var(--color-heading);
}

/* --- Zákazník ----------------------------------------------------------------- */

.cust-block + .cust-block {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--color-line);
}

.cust-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cust-name { color: var(--color-heading); font-size: 1.05rem; font-weight: 700; }
.cust-company { color: var(--color-heading); font-size: .95rem; font-weight: 700; }
.cust-link { font-size: .82rem; color: var(--color-indigo); }
.cust-link:hover { text-decoration: underline; }
.cust-muted { margin: 0; font-size: .82rem; color: var(--color-paused); }

.cust-lines { margin: .3rem 0 0; font-size: .88rem; line-height: 1.65; }
.cust-lines a { color: var(--color-indigo); }
.cust-lines a:hover { text-decoration: underline; }

.cust-ids {
    margin: .3rem 0 0;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--color-text);
    word-break: break-word;
}

.tag-rc { background: var(--color-ok-bg); color: var(--color-ok); margin-left: .4rem; }

/* --- Bočný panel -------------------------------------------------------------- */

.side-card { padding: 1.25rem 1.35rem; }
.side-card h3 { margin-bottom: .9rem; }

.sfield { margin-bottom: .9rem; }

.sfield label {
    display: block;
    margin-bottom: .3rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-paused);
}

.sfield .select { width: 100%; border-radius: var(--radius-field); font-weight: 400; }

.srows { margin: 0 0 1rem; }

.srows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    font-size: .85rem;
}

.srows dt { color: var(--color-text); }
.srows dd { margin: 0; text-align: right; font-weight: 700; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.srows .is-minus { color: var(--color-live); }
.srows .is-note { font-size: .78rem; font-weight: 600; color: var(--color-gold-deep); }

.side-note {
    margin: 1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--color-line);
    font-size: .8rem;
    color: var(--color-text);
}

/* Rozpis je predvolene zbalený — celková suma je hore v hlavičke. */
.side-fold > summary {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-paused);
    cursor: pointer;
}

.side-fold > summary::marker { color: var(--color-paused); }
.side-fold[open] > summary { margin-bottom: .9rem; }

.side-more { margin-top: .5rem; }

.side-more > summary {
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-indigo);
    cursor: pointer;
}

.side-more > summary::marker { color: var(--color-indigo); }
.side-more .timeline { margin-top: .75rem; }

/* --- Časová os --------------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; }

.tl {
    position: relative;
    padding: 0 0 .9rem 1.25rem;
    border-left: 2px solid var(--color-line);
}

/* Posledný bod už nemá kam pokračovať — čiara pod ním by visela vo vzduchu. */
.tl:last-child { padding-bottom: 0; border-left-color: transparent; }

.tl-dot {
    position: absolute;
    left: -.42rem;
    top: .3rem;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--color-paused);
    box-shadow: 0 0 0 3px var(--color-surface);
}

/* Farba bodu hovorí typ zmeny: zelená peniaze, modrá postup, červená koniec. */
.tl.is-paid   .tl-dot { background: var(--color-live); }
.tl.is-status .tl-dot { background: var(--color-indigo); }
.tl.is-cancel .tl-dot { background: var(--color-danger); }

.tl-when { margin: 0; font-size: .82rem; }
.tl-when .mono { font-family: var(--font-mono); font-size: .74rem; }
.tl-when strong { color: var(--color-heading); font-weight: 700; }
.tl-who { margin: .05rem 0 0; font-size: .74rem; color: var(--color-paused); }
.tl-note { margin: .2rem 0 0; font-size: .78rem; color: var(--color-text); font-style: italic; }

/* ==========================================================================
   Dopyt — pracovný priestor
   ========================================================================== */

/* --- Pipeline stavu ---------------------------------------------------------- */

.qpipe { list-style: none; margin: 0; padding: 0; }

.qstep { position: relative; padding-left: 1.25rem; border-left: 2px solid var(--color-line); }
.qstep:last-of-type { padding-bottom: 0; }

.qstep > button {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .3rem 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: .85rem;
    text-align: left;
    color: var(--color-text);
    cursor: pointer;
}

.qstep > button:not([disabled]):hover { color: var(--color-indigo); }
.qstep > button[disabled] { cursor: default; }

.qdot {
    position: absolute;
    left: -.4rem;
    width: .62rem;
    height: .62rem;
    border: 2px solid var(--color-line);
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 0 0 3px var(--color-surface);
}

.qstep-label { padding-left: .1rem; }

.qstep.is-done .qdot { border-color: var(--color-indigo); background: var(--color-indigo); }
.qstep.is-on .qdot { border-color: var(--color-navy); background: var(--color-navy); }
.qstep.is-on .qstep-label { color: var(--color-heading); font-weight: 700; }
.qstep.is-next .qstep-label { color: var(--color-paused); }

.qoutcomes {
    display: flex;
    gap: .5rem;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--color-line);
}

.qoutcome {
    flex: 1;
    padding: .45rem .6rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: background .12s ease-out, color .12s ease-out;
}

.qoutcome.is-accept:not([disabled]):hover { background: var(--color-ok-bg); border-color: var(--color-ok-line); color: var(--color-ok); }
.qoutcome.is-reject:not([disabled]):hover { background: var(--color-danger-bg); border-color: var(--color-danger-line); color: var(--color-danger); }
.qoutcome.is-accept.is-on { background: var(--color-ok-bg); border-color: var(--color-ok-line); color: var(--color-ok); }
.qoutcome.is-reject.is-on { background: var(--color-danger-bg); border-color: var(--color-danger-line); color: var(--color-danger); }
.qoutcome[disabled]:not(.is-on) { opacity: .45; cursor: not-allowed; }

/* --- Záložky bez JavaScriptu --------------------------------------------------
   Skryté prepínače, nie odkazy na kotvu: kotva by pri každom prepnutí posunula
   stránku na začiatok panela. Ktorá je otvorená po odoslaní formulára,
   rozhoduje `?tab=` — to prepínač nevie a server hej. */

.rtabs { position: relative; }

/* Prepínač musí ostať zaostriteľný, preto sa neskrýva cez display:none. */
.rtab-in {
    position: absolute;
    top: .9rem;
    left: .9rem;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rtab-bar {
    display: flex;
    gap: .35rem;
    margin: -.35rem -.35rem 1.5rem;
    border-bottom: 1px solid var(--color-line);
}

.rtab-bar label {
    padding: .6rem .9rem;
    border-bottom: 2px solid transparent;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.rtab-bar label:hover { color: var(--color-indigo); }

.rtab-count {
    display: inline-block;
    min-width: 1.2rem;
    margin-left: .3rem;
    padding: 0 .3rem;
    border-radius: var(--radius-pill);
    background: var(--color-indigo-bg);
    color: var(--color-indigo);
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
}

.rtab-pane { display: none; }

#qtab-info:checked ~ #qpane-info,
#qtab-log:checked ~ #qpane-log { display: block; }

#qtab-info:checked ~ .rtab-bar label[for="qtab-info"],
#qtab-log:checked ~ .rtab-bar label[for="qtab-log"] {
    border-bottom-color: var(--color-navy);
    color: var(--color-heading);
}

#qtab-info:focus-visible ~ .rtab-bar label[for="qtab-info"],
#qtab-log:focus-visible ~ .rtab-bar label[for="qtab-log"] {
    outline: 3px solid var(--color-gold);
    outline-offset: -3px;
    border-radius: 4px;
}

/* --- Formulár dopytu ---------------------------------------------------------- */

/* Nadpis sekcie oddeľuje skupinu polí — bez linky splývali všetky do jednej
   dlhej stránky formulára. */
.quote-card h3 {
    margin: 1.75rem 0 1.1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-line);
}

/*
 * Pevné tri stĺpce, nie `auto-fit`. Pri automatickom počte mala dvojica polí
 * inú šírku než trojica pod ňou a formulár vyzeral, akoby sa každý riadok
 * rozhodoval sám.
 */
.qgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0 1.25rem;
}

.qgrid .field { margin-bottom: 1.25rem; }
.qgrid .hint { margin-top: .35rem; }
.qstatic { margin: .35rem 0 0; }

@media (max-width: 1500px) {
    .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .qgrid { grid-template-columns: 1fr; }
}

.qsum {
    margin: 0 0 1.25rem;
    padding: .7rem 1rem;
    border-radius: var(--radius-field);
    background: var(--color-bg);
    font-size: .88rem;
}

.qsum strong { color: var(--color-heading); font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* --- Priebeh dopytu ------------------------------------------------------------ */

.qlog { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }

.qmsg {
    max-width: 85%;
    padding: .7rem .9rem;
    border-radius: var(--radius-field);
    font-size: .88rem;
}

/* Zákazník vľavo, my vpravo — konverzáciu tak vidno bez čítania mien. */
.qmsg.is-customer { align-self: flex-start; border: 1px solid var(--color-line); background: var(--color-surface); }
.qmsg.is-admin { align-self: flex-end; background: var(--color-indigo-bg); }

/* Interná poznámka nie je súčasť konverzácie — stojí na plnú šírku a šedo. */
.qmsg.is-internal {
    align-self: stretch;
    max-width: none;
    border-left: 3px solid var(--color-paused);
    background: #f4f5f9;
}

.qmsg.is-system {
    align-self: center;
    max-width: none;
    padding: .2rem 0;
    background: transparent;
    font-size: .78rem;
    color: var(--color-paused);
    text-align: center;
}

.qmsg.is-empty {
    align-self: stretch;
    max-width: none;
    padding: 1.25rem;
    border: 1px dashed var(--color-line);
    background: transparent;
    color: var(--color-paused);
    text-align: center;
}

.qmsg-head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 .25rem;
    font-size: .72rem;
    color: var(--color-paused);
}

.qmsg-head .mono { font-family: var(--font-mono); }
.qmsg-who { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.qmsg-body { margin: 0; color: var(--color-heading); }
.qmsg-note { margin: .3rem 0 0; font-size: .74rem; color: var(--color-paused); }

/* Strojový preklad pod originálom. Odsadený zvislou linkou, aby bolo na prvý
   pohľad jasné, že je to odvodený text — nie druhá správa. */
.qmsg-translation {
    margin: .45rem 0 0;
    padding-left: .6rem;
    border-left: 2px solid var(--color-border);
    font-size: .82rem;
    color: var(--color-paused);
}
.qmsg-warn {
    margin: .35rem 0 0;
    padding: .35rem .5rem;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-warning-bg, #fff5e6);
    color: var(--color-warning-text, #8a5a00);
    font-size: .76rem;
}

.qmsg-translation__label {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .15rem;
}
.qmsg.is-system .qmsg-head { justify-content: center; margin: 0; }
.qmsg.is-system .qmsg-body { color: inherit; font-size: .78rem; }

.qform { padding-top: 1.25rem; border-top: 1px solid var(--color-line); }

.qform-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.qform-kind { display: flex; gap: 1rem; flex-wrap: wrap; }

.qradio {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--color-text);
    cursor: pointer;
}

/* --- Drobné ------------------------------------------------------------------- */

.quote-card .hint,
.cust .hint { font-size: .82rem; color: var(--color-text); }

@media (max-width: 720px) {
    .ohead-main { flex-direction: column; align-items: flex-start; }
    .ohead-sum { text-align: left; }
    .ohead-tags-right { margin-left: 0; }
    .qmsg { max-width: 100%; }
    .qform-actions { flex-direction: column; align-items: stretch; }
}

/* --- Ikony ------------------------------------------------------------------- */

/* Veľkosť aj farba sa dedia z textu, takže tá istá ikona sedí v odkaze
   aj v nadpise. */
.ico {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -.12em;
}

.cust-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .35rem 0 0;
    font-size: .88rem;
}

.cust-line .ico { color: var(--color-paused); font-size: 1.05rem; }
.cust-line a { color: var(--color-indigo); word-break: break-word; }
.cust-line a:hover { text-decoration: underline; }

/* --- Potvrdzovací dialóg ------------------------------------------------------ */

.confirm { width: min(26rem, calc(100vw - 2rem)); }
.confirm h2 { margin-bottom: .75rem; }
.confirm-text { margin: 0; color: var(--color-text); }

/* --- Jednoduchý výber (Tom Select, single) ------------------------------------ */

.ts-wrapper.single .ts-control {
    min-height: 2.85rem;
    padding: .55rem .9rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background: #fff;
    font-family: inherit;
    font-size: .9rem;
    color: var(--color-heading);
    box-shadow: none;
    cursor: pointer;
}

/* Vlastná šipka — natívna patrí `<select>`, ktorý knižnica skryla. */
.ts-wrapper.single .ts-control::after {
    content: "";
    position: absolute;
    right: .95rem;
    top: 50%;
    width: .45rem;
    height: .45rem;
    margin-top: -.3rem;
    border-right: 2px solid var(--color-paused);
    border-bottom: 2px solid var(--color-paused);
    transform: rotate(45deg);
    pointer-events: none;
}

.ts-wrapper.single.dropdown-active .ts-control::after { margin-top: -.1rem; transform: rotate(225deg); }
.ts-wrapper.single .ts-control > .item { padding-right: 1rem; }

/* Odznak typu zákazníka v zozname — vedľa mena, nie ako vlastný stĺpec. */
.chip-sm {
    padding: .05rem .5rem;
    margin-left: .4rem;
    font-size: .68rem;
    vertical-align: .05em;
}

/* ==========================================================================
   Zoznam zákazníkov
   Rovnaké prvky ako pri objednávkach: dlaždice sú filtre, riadok má farbu
   podľa typu a akcie sú v ponuke, nie ako text „Detail".
   ========================================================================== */

/* Zapnutá dlaždica-filter musí byť rozoznateľná aj bez farby. */
.stat-on {
    background: var(--color-navy);
    box-shadow: var(--shadow-lift);
}

.stat-on .stat-value,
.stat-on .stat-label { color: #fff; }

/* --- Radenie klikom na hlavičku ---------------------------------------------- */

.sortlink {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: inherit;
    white-space: nowrap;
}

.sortlink:hover { color: var(--color-indigo); }

/* Šípka drží miesto aj keď stĺpec nie je zoradený — inak by hlavička poskakovala. */
.sortarrow {
    display: inline-block;
    min-width: .6rem;
    color: var(--color-navy);
    font-size: .8rem;
}

/* --- Riadok zákazníka --------------------------------------------------------- */

.table-customers td { vertical-align: middle; }
.table-customers .col-check { width: 1%; padding-right: 0; }
.table-customers .col-actions { width: 1%; text-align: right; }

.crow { cursor: pointer; transition: background .12s ease-out; }
.crow:hover { background: var(--color-bg); }

/* Vypnutý účet je tichý — nie je to chyba, len sa nepoužíva. */
.crow.is-off { background: #f7f8fb; }
.crow.is-off:hover { background: var(--color-neutral-bg); }
.crow.is-off td { color: var(--color-paused); }
.crow.is-off strong { color: var(--color-text); }

/* Ikona a text sú jeden odkaz — kliknúť sa dá na oboje. */
.contact-cell a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--color-indigo);
}

.contact-cell a:hover { text-decoration: underline; }
.contact-cell a .ico { color: var(--color-paused); font-size: .95rem; }
.contact-cell .hint { font-size: .78rem; color: var(--color-text); }

/* Nula nie je hodnota, ktorú treba čítať — len údaj, že tam nič nie je. */
.is-zero { color: var(--color-paused); }

.chip-row { padding: .08rem .55rem; font-size: .7rem; }

/* ==========================================================================
   Detail zákazníka
   Rovnaká kostra ako detail objednávky — hlavička, dva stĺpce, lepkavý panel.
   Odlišné sú len bloky, ktoré zákazník má a objednávka nie.
   ========================================================================== */

.ohead-name { font-family: var(--font-primary); font-size: clamp(1.7rem, 3.5vw, 2.3rem); }

.ohead-since {
    font-size: .78rem;
    color: var(--color-paused);
    white-space: nowrap;
}

/* Kontaktné odkazy mimo vyhradených blokov — hlavička objednávky a zoznam
   kontaktných osôb. Ikona sa musí zmestiť do riadka s textom, preto
   inline-flex; bez neho by sa odsadila na vlastný riadok. */
.ohead-who a[href^="mailto:"],
.ohead-who a[href^="tel:"],
td a[href^="mailto:"],
td a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.ohead-who .ico,
td a .ico {
    color: var(--color-paused);
}

/* Kontakt v hlavičke: ikony namiesto oddeľovacej bodky. */
.ohead-contact { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ohead-contact a { display: inline-flex; align-items: center; gap: .45rem; }
.ohead-contact .ico { color: var(--color-paused); font-size: 1.05rem; }

/* --- Prázdny stav ------------------------------------------------------------- */

/* Prázdna tabuľka s hlavičkami vyzerá ako rozbitá stránka. Krátka veta
   a tlačidlo hovoria to isté a neklamú. */
.empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.35rem;
}

.empty p { margin: 0; color: var(--color-text); }
.empty .hint { font-size: .82rem; }

/* --- Súhrn nad tabuľkou ------------------------------------------------------- */

.linestats {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0;
    padding: .85rem 0;
    border-bottom: 1px solid var(--color-line);
    font-size: .85rem;
    color: var(--color-text);
}

.linestats strong { color: var(--color-heading); font-variant-numeric: tabular-nums; }
.linestats .sep { color: var(--color-paused); }

.card-more { margin: 1rem 0 0; font-size: .85rem; }
.card-more a:not(.btn) { color: var(--color-indigo); font-weight: 600; }
.card-more a:not(.btn):hover { text-decoration: underline; }

.orow-link { cursor: pointer; }

/* --- Malé karty (firmy, adresy) ------------------------------------------------ */

/* auto-fit, nie auto-fill: pri jednej firme by auto-fill nechalo prázdne
   stĺpce a karta by stála ako útržok v ľavej tretine sekcie. Takto sa
   roztiahne cez šírku, ktorú má k dispozícii. */
.minicards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}

.minicard {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.minicard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.minicard-head strong { color: var(--color-heading); font-size: .95rem; }
.minicard-marks { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.star { color: var(--color-gold-deep); font-size: .9rem; }

.minicard-ids {
    margin: .5rem 0 0;
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--color-text);
    line-height: 1.6;
}

.minicard-line { margin: .5rem 0 0; font-size: .85rem; color: var(--color-text); }

.minicard-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: auto;
    padding-top: .9rem;
}

/* Na širokej karte sa údaje a tlačidlá poskladajú do riadka — inak by pod
   dvomi riadkami textu ostal pás prázdna a akcie kdesi dole vpravo. */
@media (min-width: 900px) {
    .minicard {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 1.5rem;
    }

    .minicard-head,
    .minicard-ids,
    .minicard-line {
        grid-column: 1;
    }

    .minicard-head { justify-content: flex-start; gap: .6rem; }

    .minicard-actions {
        grid-column: 2;
        grid-row: 1 / span 3;
        padding-top: 0;
        margin-top: 0;
    }
}

.iconbtn {
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: transparent;
    color: var(--color-paused);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease-out, color .12s ease-out;
}

.iconbtn:hover { background: var(--color-danger-bg); border-color: var(--color-danger-line); color: var(--color-danger); }

/* --- Trhy v paneli -------------------------------------------------------------- */

.mkts { list-style: none; margin: 0; padding: 0; }

.mkt {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--color-line);
    font-size: .85rem;
}

.mkt:last-of-type { border-bottom: 0; padding-bottom: 0; }
.mkt-name { flex: 1; min-width: 0; color: var(--color-text); }
.mkt-name strong { color: var(--color-heading); font-family: var(--font-mono); }
.mkt-since { flex: 0 0 auto; font-size: .76rem; color: var(--color-paused); }

/* Prepínač je zároveň stavom — dve veci vedľa seba by hovorili to isté. */
.mkt-toggle {
    flex: 0 0 auto;
    padding: .2rem .7rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    color: var(--color-paused);
    cursor: pointer;
    transition: background .12s ease-out, color .12s ease-out;
}

.mkt-toggle:hover { border-color: var(--color-indigo); color: var(--color-indigo); }

.mkt-toggle.is-on {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

.mkt-toggle.is-on:hover { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }

.side-card .srows + form { margin-top: .9rem; }

/* ==========================================================================
   Zľavové kódy
   Kód sa najčastejšie neupravuje, ale posiela zákazníkovi — preto je pri ňom
   kopírovanie a nie ceruzka. Tržba je hlavná metrika: kód, ktorý nič
   nezarobil, je len zľava.
   ========================================================================== */

/* --- Kód s tlačidlom kopírovania --------------------------------------------- */

.code-cell { display: flex; align-items: center; gap: .35rem; }

.copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-field);
    background: transparent;
    color: var(--color-paused);
    font-size: .95rem;
    cursor: pointer;
    transition: background .12s ease-out, color .12s ease-out;
}

.copy:hover { background: var(--color-indigo-bg); color: var(--color-indigo); }
.copy:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

/* V hlavičke detailu je kód nadpis — ikona ho nesmie preťažiť. */
.ohead-name.code-cell { gap: .6rem; }
.ohead-name .copy { width: 2.1rem; height: 2.1rem; font-size: 1.1rem; }

/* Potvrdenie kopírovania má vlastný štýl v public/css/toast.css — spoločný
   s ostatnými oznámeniami. Pilulka pri spodku obrazovky, ktorá tu bola, sa
   volala `.toast` a novému systému prepisovala polohu aj šírku. */

/* --- Využitie limitu ---------------------------------------------------------- */

/* Číslo „12 / 100" povie koľko, pás povie koľko zostáva — to druhé sa z čísel
   počíta pomalšie, než sa naň dá pozrieť. */
.usage-cell { min-width: 6.5rem; }

.meter {
    display: block;
    height: .3rem;
    margin-top: .35rem;
    border-radius: var(--radius-pill);
    background: var(--color-line);
    overflow: hidden;
}

.meter > span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-live);
}

.meter.is-high > span { background: var(--color-gold-deep); }
.meter.is-full > span { background: var(--color-danger); }

.table-discounts .col-actions { width: 1%; text-align: right; }
.table-discounts td { vertical-align: middle; }

/* Vyčerpaný kód je stav medzi „platí" a „skončil" — oranžová, nie červená. */
.tag-is-warning { background: var(--color-warn-bg-soft); color: var(--color-warn-deep); }

/* Zľava je odpočet, nie suma. Rovnaká farba ako v súhrne objednávky. */
.is-minus { color: var(--color-live); }

/* ==========================================================================
   Formulár zľavového kódu
   Tri karty namiesto jedného plochého zoznamu polí: čo je kód, kedy platí
   a či je zapnutý sú tri rôzne otázky.
   ========================================================================== */

.card-title {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.card-note { margin: 0 0 1.35rem; font-size: .85rem; color: var(--color-text); }
.card-title + .field, .card-title + .grid-2 { margin-top: 1.35rem; }

/* Vnútri karty už odsadenie rieši karta sama — mriežka nepotrebuje plný gap. */
.grid-tight { gap: 0 var(--gap); }
.grid-tight > div > .field:last-child, .grid-tight > .field:last-child { margin-bottom: 0; }

/* --- Pole s tlačidlom --------------------------------------------------------- */

.input-row { display: flex; align-items: center; gap: .5rem; }
.input-row .input { flex: 1; min-width: 8rem; }
.input-row .btn { flex: none; white-space: nowrap; }

/* --- Pole s jednotkou --------------------------------------------------------- */

/* Jednotka je vnútri rámika, nie vedľa neho: „10" a „%" sú jeden údaj. */
.input-unit { position: relative; }
.input-unit .input { padding-right: 3rem; }

.input-unit .unit {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--color-paused);
    font-size: .9rem;
    font-weight: 700;
    pointer-events: none;
}

/* --- Prepínač dvoch možností -------------------------------------------------- */

/* Dve možnosti — rozbaľovací zoznam by pýtal dva kliky namiesto jedného. */
.radios { display: flex; flex-direction: column; gap: .5rem; }

.radio {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background: var(--color-surface);
    font-size: .9rem;
    color: var(--color-heading);
    cursor: pointer;
    transition: border-color .12s ease-out, background .12s ease-out;
}

.radio:hover { border-color: var(--color-indigo); }
.radio input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--color-navy); }
.radio:has(input:checked) { border-color: var(--color-navy); background: var(--color-indigo-bg); font-weight: 600; }
.radio:has(input:focus-visible) { outline: 3px solid var(--color-gold); outline-offset: 2px; }

/* --- Chyba pri poli ----------------------------------------------------------- */

/* Hláška patrí k poľu, ktorého sa týka. Zoznam chýb nad formulárom ostáva —
   je to jediné, čo uvidí admin bez JavaScriptu. */
.field-error {
    margin: .45rem 0 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-danger);
}

.field-error[hidden] { display: none; }
.field-error.is-warn { color: var(--color-warn); }

/* Varovanie vnútri karty, nie nad obrazovkou — patrí k poľu, ktoré ho vyvolalo. */
.notice-inline { margin: 1.35rem 0 0; font-size: .875rem; }
.notice-inline[hidden] { display: none; }

@media (max-width: 640px) {
    .input-row { flex-wrap: wrap; }
    .input-row .input { flex-basis: 100%; }
}

/* ==========================================================================
   Systémové obrazovky mimo trhu
   Hlavička je spoločná pre výber trhu (tmavý) aj pre admin účty a globálny
   zoznam zákazníkov (svetlé). Odkazy sú odkazy, nie tlačidlá — primárna
   akcia tu je vybrať si trh, nie odskočiť do správy účtov.
   ========================================================================== */

.sysbar { padding: 0; }

/* Cez celú šírku a s tým istým odsadením ako lišta vnútri trhu (.appbar) —
   hlavička nie je obsah, nemá sa preto zarovnávať do stredového stĺpca. */
.sysbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 2rem;
    flex-wrap: wrap;
    /* Šírka natvrdo: pruh je flex kontajner a bez nej by sa vnútro zmestilo
       do svojho obsahu — obe skupiny by skončili nalepené vľavo. */
    width: 100%;
    padding: .75rem 2rem;
}

.sysbar-left { display: flex; align-items: center; gap: 2rem; min-width: 0; }
.sysbar-right { display: flex; align-items: center; gap: 1.25rem; }

.sysbar-brand { flex: none; }
.sysbar-brand .brand-logo { width: 8.5rem; }

/* Kto je prihlásený, stojí pri odhlásení: je to tá istá otázka. */
.sysbar-who { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; }

.sysbar-avatar {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.sysbar-name { font-weight: 700; white-space: nowrap; }

.sysbar-links { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.sysbar-right form { margin: 0; }

.sysbar-link {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .14s ease-out;
}

/* Odhlásenie je posledné a odsadené — je to odchod, nie ďalšia položka menu. */
.sysbar-logout { margin-left: .4rem; font-weight: 400; }

/* Navy pruh cez celú šírku, pevná výška — je to hlavička systému, nie obsah
   stránky. Zvyšok obrazovky je svetlý ako dashboard.

   Rovnaká je na výbere trhu aj na admin účtoch a všetkých zákazníkoch:
   sú to tri obrazovky jedného celku a hlavička, ktorá medzi nimi mení farbu,
   vyzerá ako iný systém. Svetlá varianta preto zanikla. */
.sysbar-dark {
    min-height: 56px;
    display: flex;
    align-items: center;
    background: var(--color-navy);
}

.sysbar-dark .brand { color: #fff; }
.sysbar-dark .sysbar-who { color: #fff; }
.sysbar-dark .sysbar-link { color: rgba(255, 255, 255, .72); }
.sysbar-dark .sysbar-link:hover { color: #fff; }
.sysbar-dark .sysbar-link.is-on { color: var(--color-gold); }
/* --- Zásuvka systémových obrazoviek --------------------------------------- */

/* Ikonka menu stojí v navy pruhu, nie na svetlom pozadí ako vnútri trhu —
   preto svetlé čiarky a priehľadné pozadie namiesto bielej karty. */
.sysbar-toggle {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.sysbar-toggle:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); }

/* Nad 960 px je všetko v pruhu a zásuvka nemá čo zobrazovať. */
.sysnav { display: none; }


.system-body { background: var(--color-bg); min-height: 100vh; }

.system-main { padding-top: 2.5rem; padding-bottom: 4rem; }
.system-main .back { margin-bottom: 1.5rem; }

/* ==========================================================================
   Výber pracovného priestoru — čísla na karte
   Karta má povedať, KAM ísť a ČO tam robiť. Bez čísel sa admin musel
   prekliknúť dovnútra, aby zistil, či tam vôbec niečo čaká.
   ========================================================================== */

/* Orientačný súčet naprieč trhmi. Malý a šedý zámerne — je to kontext pred
   rozhodnutím, nie údaj, s ktorým sa pracuje.

   Farby sú z premenných, nie biele: výber trhu bol kedysi tmavý a po prechode
   na svetlé pozadie ostal tento riadok biely na bielom — vyzeral ako prázdna
   medzera medzi nadpisom a „Naposledy". */
.overall {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .5rem 0 0;
    font-size: .85rem;
    color: var(--color-text);
}

.overall strong { color: var(--color-heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.overall .sep { color: var(--color-muted); }
.overall .is-alert strong { color: var(--color-danger); }

/* --- Upozornenia ------------------------------------------------------------- */

/* Každé vedie rovno do zoznamu, ktorý ho rieši — inak je to len číslo,
   ku ktorému sa admin musí doklikať sám. */
.walerts {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--color-line);
}

.walert {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 600;
    transition: filter .14s ease-out;
}

.walert:hover { filter: brightness(.94); }
.walert strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.walert-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.walert-warn { background: var(--color-warn-bg); color: var(--color-warn); }

/* --- Stav webu --------------------------------------------------------------- */

/* Bodka hovorí, či web naozaj odpovedá, nie len či je trh zapnutý. Sivá
   znamená „ešte sa nevie" — odpoveď si stránka vypýta až po vykreslení. */
.status-up { background: var(--color-live); box-shadow: 0 0 0 3px rgba(33, 166, 122, .18); }
.status-down { background: var(--color-danger); box-shadow: 0 0 0 3px rgba(200, 69, 47, .18); }
.status-off { background: var(--color-paused); }
.status-unknown { background: var(--color-line); }

/* --- Zoznam trhov v tabuľke -------------------------------------------------- */

/* Trh v prvom stĺpci: kód, názov a pod nimi meta riadok s menou, jazykom
   a stavom setupu. Tri údaje v troch stĺpcoch by tabuľku roztiahli a čítali
   by sa horšie než jeden sivý riadok. */
.mkt { display: flex; align-items: baseline; gap: .55rem; }

/* Vlajka pred kódom. Trh sa v tridsiatich riadkoch hľadá očami, nie čítaním —
   farba krajiny nájde riadok skôr než dvojpísmenový kód. Zarovnaná na text,
   nie na účiaru, inak sedí o kúsok vyššie než kód vedľa nej. */
.mkt-flag {
    flex: none;
    align-self: center;
    width: 1.25rem;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(23, 25, 61, .12);
}

.recent-item .mkt-flag { margin-right: .35rem; vertical-align: -.15em; }

.mkt-code {
    flex: none;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--color-text);
}

.mkt-name { color: var(--color-heading); font-weight: 700; }
.mkt:hover .mkt-name, .mkt:hover .mkt-code { color: var(--color-indigo); }

.mkt-meta {
    display: block;
    margin-top: .15rem;
    font-size: .74rem;
    color: var(--color-paused);
}

/* Stav webu v meta riadku je kontext, nie údaj — preberá jeho veľkosť aj
   farbu, farebná ostáva len bodka. */
.mkt-meta .state {
    gap: .3rem;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.mkt-meta .status { width: .45rem; height: .45rem; }
.mkt-meta .status-up { box-shadow: 0 0 0 2px rgba(33, 166, 122, .18); }
.mkt-meta .status-down { box-shadow: 0 0 0 2px rgba(200, 69, 47, .18); }

/* Čísla v stĺpcoch nahradili farebné pilulky. Tá istá informácia, ale
   nevyzerá ako incident. */
.mkt-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkt-num a { color: var(--color-heading); }
.mkt-num a:hover { color: var(--color-indigo); }

/* Jediné číslo s dôrazom — peniaze, ktoré ležia. Tlmená červená, jedna
   farba, žiadne pozadie ani rám. */
.mkt-num--due { color: var(--color-danger); font-weight: 700; }
.mkt-num--due:hover { color: var(--color-danger-deep); }

/* Vypnutý trh sa spravovať dá, len nie je živý — preto stlmený, nie skrytý. */
.row-off { opacity: .45; }

/* Tabuľka trhov sa na užšom okne posúva do strany (`.table-wrap`), takže
   tu ostáva len hlavička, ktorá by sa inak lámala na dva riadky. */
/* Do 960 px sa z pruhu stane ikonka menu a značka. Odkazy, meno aj
   odhlásenie sa zalamovali pod seba a hlavička bola tri riadky na výšku —
   teraz sú všetky v zásuvke (.sysnav) ako v paneli vnútri trhu. */
@media (max-width: 960px) {
    .sysbar-inner { padding: .75rem 1.25rem; gap: .75rem; }
    .sysbar-left { gap: .85rem; }

    /* Vpravo ostane len ikonka menu. Meno aj odhlásenie sú v zásuvke, takže
       `.sysbar-right` sa neskrýva celý — inak by zmizlo aj tlačidlo, ktoré
       zásuvku otvára. */
    .sysbar-links, .sysbar-who, .sysbar-right form { display: none; }
}
/* Zásuvka výberu trhu, admin účtov a všetkých zákazníkov. Rovnaká mechanika
   ako bočný panel vnútri trhu — tie isté triedy .nav-veil a .navclose,
   tá istá trieda .nav-open na <html> a ten istý skript. */
@media (max-width: 960px) {
    .sysnav {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 60;
        width: min(17.5rem, 86vw);
        /* dvh, aby lišta prehliadača na telefóne neodrezala spodok panela. */
        height: 100dvh;
        padding: 1.5rem 1rem;
        background: var(--color-navy);
        overflow-y: auto;
        box-shadow: 0 0 40px rgba(14, 26, 60, .35);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .22s ease-out, visibility .22s;
    }

    .nav-open .sysnav { transform: none; visibility: visible; }

    .sysnav-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
    .sysnav-links { display: flex; flex-direction: column; gap: .15rem; }

    .sysnav-link {
        padding: .6rem .75rem;
        border-radius: 10px;
        color: rgba(255, 255, 255, .72);
        font-size: .9rem;
        font-weight: 600;
        transition: background .14s ease-out, color .14s ease-out;
    }

    .sysnav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
    .sysnav-link.is-on { background: rgba(255, 255, 255, .12); color: var(--color-gold); }

    /* Kto som a ako odídem na spodku panela — to isté miesto ako „Všetky trhy"
       v paneli trhu. */
    .sysnav-foot {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: .75rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .sysnav-who { display: flex; align-items: center; gap: .6rem; color: #fff; min-width: 0; }
    .sysnav .sysbar-avatar { flex: none; }
    .sysnav-who-text { display: grid; min-width: 0; font-size: .78rem; line-height: 1.35; }
    .sysnav-who-text strong { font-size: .9rem; }

    .sysnav-who-text span {
        color: rgba(255, 255, 255, .6);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sysnav-foot form { margin: 0; }

    .sysnav-logout {
        width: 100%;
        padding: .55rem .75rem;
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 10px;
        background: transparent;
        color: #fff;
        font-family: inherit;
        font-size: .85rem;
        cursor: pointer;
    }

    .sysnav-logout:hover { background: rgba(255, 255, 255, .1); }
}


/* ==========================================================================
   Všetci zákazníci (naprieč trhmi)
   Jeden riadok = jeden účet. Trhy sú odznaky v stĺpci, nie ďalší riadok —
   ten istý človek dvakrát je presný opak toho, načo je táto obrazovka.
   ========================================================================== */

.markets-cell { display: flex; gap: .3rem; flex-wrap: wrap; }

/* Odznak trhu je odkaz — otvorí zákazníka práve v tom trhu. */
.markets-cell .chip-code { transition: background .14s ease-out; }
.markets-cell .chip-code:hover { background: var(--color-indigo); border-color: var(--color-indigo); }

/* Dve meny pod sebou, nie vedľa seba: sú to dve sumy, nie jeden výraz. */
.money-line { display: block; font-variant-numeric: tabular-nums; }
.money-line + .money-line { margin-top: .15rem; font-size: .82rem; color: var(--color-text); }

/* ==========================================================================
   Admin používatelia
   Rola je odznak, nie veta. Čo ktorá smie, patrí do formulára a do
   dokumentácie — nie do každého riadku tabuľky.
   ========================================================================== */

.table-admins .col-actions { width: 1%; text-align: right; }
.table-admins td { vertical-align: middle; }

.role-superadmin { background: var(--color-navy); color: #fff; }
.role-market_admin { background: var(--color-indigo-bg); color: var(--color-indigo); }
.role-viewer { background: var(--color-neutral-bg); color: var(--color-text); }

/* --- Rola vo formulári -------------------------------------------------------- */

/* Rola má pri sebe jednu vetu, čo znamená — dropdown by ju musel natlačiť
   do jedného riadku voľby. */
.radio-wide { align-items: flex-start; padding: .85rem 1rem; }
.radio-wide input { margin-top: .2rem; }
.radio-text { display: flex; flex-direction: column; line-height: 1.35; }
.radio-text strong { color: var(--color-heading); font-weight: 700; }
.radio-text span { font-size: .82rem; font-weight: 400; color: var(--color-text); }

.radio input[disabled] { cursor: not-allowed; }
.radio:has(input[disabled]) { opacity: .5; cursor: not-allowed; }

/* --- Priradené trhy ----------------------------------------------------------- */

/* Zaškrtávacie pole, nie prepínač s dráhou: pri piatich trhoch je zoznam
   prepínačov vyšší než zvyšok formulára. */
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem; }

.check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .9rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    cursor: pointer;
    transition: border-color .12s ease-out, background .12s ease-out;
}

.check:hover { border-color: var(--color-indigo); }
.check input { width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; accent-color: var(--color-navy); }
.check:has(input:checked) { border-color: var(--color-navy); background: var(--color-indigo-bg); }
.check-text { display: flex; flex-direction: column; line-height: 1.35; }
.check-text strong { color: var(--color-heading); font-size: .9rem; font-weight: 700; }
.check-text .mono { font-family: var(--font-mono); font-size: .74rem; color: var(--color-text); }

/* Rozbalenie cez grid-template-rows — animuje sa aj bez známej výšky obsahu.
   Predvolený stav je otvorený: bez JavaScriptu musí byť sekcia vidieť,
   inak by sa trhy nedali priradiť vôbec. Zatvára ju až skript. */
.reveal {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows .22s ease-out, opacity .22s ease-out;
}

.reveal > * { overflow: hidden; }
.reveal.is-closed { grid-template-rows: 0fr; opacity: 0; }
.reveal[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; }
}

/* --- Jednorazové heslo -------------------------------------------------------- */

/* Zelená, nie zlatá: je to potvrdenie, nie upozornenie. Ukáže sa raz —
   v databáze je len hash. */
.notice-ok { background: var(--color-ok-bg); border-color: var(--color-ok-line); color: var(--color-ok); }
.notice-ok::before { background: var(--color-live); }
.notice-ok .mono { font-family: var(--font-mono); font-size: 1rem; letter-spacing: .02em; }
.notice-ok .copy { color: var(--color-ok); }
.notice-ok .copy:hover { background: rgba(20, 119, 84, .12); color: #0f5d41; }

/* ==========================================================================
   Kategórie služieb
   ========================================================================== */

.table-groups .col-actions { width: 1%; text-align: right; }
.table-groups .order-cell { width: 1%; white-space: nowrap; }

/* Vypnutá kategória sa nemá stratiť, len ustúpiť — riadok stlmíme, štítok
   v ňom ostáva červený. */
.table-groups tr.is-off td { color: var(--color-paused); }
.table-groups tr.is-off a strong { color: var(--color-text); }

/* --- Výber jazyka na formulári -----------------------------------------------
   Bol to rad odznakov, jeden na jazyk, prepínaný skrytým prepínačom cez
   `:has()`. Pravidlo sa muselo napísať na každý jazyk zvlášť, takže ich bolo
   päť a šiesty jazyk by sa nezobrazil. Jazykov má byť rádovo tridsať —
   preto je to zoznam a panely prepína lang-switch.js.

   Bez skriptu ostanú jazyky pod sebou: dlhšie, ale úplné. Skryť panely
   v CSS a nevedieť ich prepnúť by bola strata polí. */

/* Nižší a užší než pole vo formulári — je to ovládač v hlavičke karty, nie
   údaj. Pravidlo platí pre samotný `<select>` aj pre obal, ktorý naň nasadí
   Tom Select: knižnica prenesie triedy na obal, ale výšku drží `.ts-control`
   vnútri. */
.lang-select {
    width: auto;
    min-width: 11rem;
    max-width: 100%;
    padding-top: .4rem;
    padding-bottom: .4rem;
    font-size: .82rem;
    font-weight: 600;
}

.ts-wrapper.lang-select {
    padding-top: 0;
    padding-bottom: 0;
}

.ts-wrapper.lang-select .ts-control {
    min-height: 0;
    padding: .4rem 2rem .4rem .8rem;
    font-size: .82rem;
    font-weight: 600;
}

.lang-panel[hidden] { display: none; }

/* Preklad stojí pri prepínači, lebo platí pre ten istý jazyk, ktorý prepína.
   Vlastný riadok mu netreba — je to doplnok k výberu, nie akcia karty. */
.lang-tools {
    display: flex;
    flex: none;
    align-items: center;
    gap: .5rem;
}

.translate .confirm-text { margin: -.75rem 0 1.25rem; font-size: .88rem; }
.translate .field-error { margin-top: 1rem; }

/* Text vľavo, adresa vpravo. Adresa je krátka a nemenná, text nie — preto
   nedostane rovnakú polovicu, ale menšiu. */
.grid-6040 { display: grid; grid-template-columns: 3fr 2fr; gap: 0 var(--gap); }
.card-title + .grid-6040 { margin-top: 1.35rem; }
.grid-6040 > div > .lang-panel:last-child > .field:last-child,
.grid-6040 > div > .field:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .grid-6040 { grid-template-columns: 1fr; }
}

/* --- Nahrávanie obrázka -----------------------------------------------------
   Natívne pole súboru ostáva vidieť dovtedy, kým ho neprevezme upload.js —
   bez skriptu je jediná cesta, ako obrázok nahrať. */

.upload { position: relative; }
.upload-input { font-size: .875rem; }
.upload.is-ready .upload-input { position: absolute; opacity: 0; width: 0; height: 0; }
.upload .upload-drop[hidden], .upload .upload-preview[hidden] { display: none; }

.upload label.upload-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 1.75rem 1.25rem;
    border: 1.5px dashed var(--color-line-soft);
    border-radius: var(--radius-field);
    background: var(--color-zebra);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease-out, background .15s ease-out;
}

.upload label.upload-drop:hover,
.upload label.upload-drop.is-over { border-color: var(--color-indigo); background: var(--color-indigo-bg); }

.upload-icon { display: block; color: var(--color-paused); }
.upload-icon svg { width: 1.75rem; height: 1.75rem; display: block; }

.upload-title { font-size: .9rem; font-weight: 700; color: var(--color-heading); }
.upload-note { font-size: .78rem; font-weight: 400; color: var(--color-text); }

.upload-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background: var(--color-zebra);
}

.upload-preview img {
    width: 4.5rem;
    height: 3rem;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}

/* Dokument nemá náhľad — na mieste obrázka stojí ikona rovnakej veľkosti,
   aby pole s PDF a pole s obrázkom neposkakovali vedľa seba. */
.upload-file {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 3rem;
    flex: none;
    border-radius: 8px;
    background: #fff;
    color: var(--color-paused);
}

.upload-file svg { width: 1.5rem; height: 1.5rem; display: block; }

.upload-open {
    flex: none;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-indigo);
    text-decoration: none;
    white-space: nowrap;
}

.upload-open:hover { text-decoration: underline; }
.upload-open[hidden] { display: none; }

.upload-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--color-text);
}

.upload-clear {
    flex: none;
    padding: .4rem .8rem;
    border: 1px solid var(--color-danger-line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-danger);
    cursor: pointer;
}

.upload-clear:hover { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }

.upload .field-error { margin-top: .6rem; }

/* ==========================================================================
   Karta s hlavičkou a jazykovým prepínačom
   ========================================================================== */

/* Nadpis karty vľavo, jazyk vpravo. Prepínač patrí ku karte, ktorej polia
   prepína — jeden na celý formulár by pri štyroch kartách nebolo jasné,
   čoho sa týka. */
.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.35rem;
}

.card-head > div { min-width: 0; }
.card-head .card-title, .card-head .card-note { margin: 0; }
.card-head .card-note { margin-top: .35rem; }
.card-head .lang-select { flex: none; margin: 0; }
.card-head .lang-tools { margin: 0; }
.card-head + .field, .card-head + .grid-2, .card-head + .lang-panel { margin-top: 0; }

/* Tlačidlo prekladu a výber jazyka majú spolu cez 17 rem — vedľa nadpisu
   karty z neho na telefóne ostal jeden lámaný znak na riadok. Pod nadpisom
   je na ne celá šírka karty. */
@media (max-width: 620px) {
    .card-head .lang-tools { width: 100%; }
    .card-head .lang-select,
    .card-head .ts-wrapper.lang-select { flex: 1 1 auto; min-width: 0; }
}

/* ==========================================================================
   Zoznam služieb
   ========================================================================== */

.table-services .col-actions { width: 1%; text-align: right; }
.table-services .order-cell { width: 1%; white-space: nowrap; }
.table-services tr.is-off td { color: var(--color-paused); }
.table-services tr.is-off .cell-name strong { color: var(--color-text); }

/* Slug pod názvom, nie vo vlastnom stĺpci — dlhý slug inak roztiahne tabuľku
   a pritom je to údaj, ktorý sa číta až druhý. */
.cell-name strong { display: block; }
.cell-name .cell-sub {
    display: block;
    margin-top: .15rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--color-paused);
}

/* ==========================================================================
   Balíčky ako karty
   ========================================================================== */

/* Rovnaké rozloženie ako cenník na webe: admin vidí cenové rozostupy medzi
   balíčkami bez toho, aby otvoril tri formuláre za sebou. */
.pkgcards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--gap);
}

.pkgcard {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.pkgcard.is-star { border: 2px solid var(--color-gold); }
.pkgcard.is-off { background: #fbfbfd; }
.pkgcard.is-off .pkgcard-name { color: var(--color-paused); }

.pkgcard-head { display: flex; align-items: flex-start; gap: .5rem; justify-content: space-between; }
.pkgcard-name { margin: 0; font-size: 1rem; font-weight: 800; color: var(--color-heading); }
.pkgcard-star { flex: none; color: var(--color-gold); font-size: .95rem; }
.pkgcard-slug { margin: .2rem 0 0; font-family: var(--font-mono); font-size: .72rem; color: var(--color-paused); }

.pkgcard-prices { margin: 1rem 0 0; padding: .75rem .85rem; border-radius: var(--radius-field); background: var(--color-bg); }

.pkgcard-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .85rem;
}

.pkgcard-price + .pkgcard-price { margin-top: .35rem; }
.pkgcard-price dt { color: var(--color-text); }
.pkgcard-price dd { margin: 0; font-weight: 700; color: var(--color-heading); }
.pkgcard-price dd.is-request { font-weight: 600; color: var(--color-indigo); }
.pkgcard-price dd.is-missing { font-weight: 600; color: var(--color-danger); }

.pkgcard-meta { margin: .85rem 0 0; font-size: .8rem; color: var(--color-text); }
.pkgcard-meta span + span::before { content: '·'; margin: 0 .4rem; color: var(--color-paused); }

.pkgcard-foot { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }
.pkgcard-foot .btn { flex: 1; text-align: center; }
.pkgcard-foot .order { flex: none; }

/* Prázdny stav aj tlačidlo pridania sú karta rovnakej výšky — mriežka tak
   nemá dieru na mieste, kde sa balíček pridáva. */
.pkgcard-new {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: 1.25rem;
    border: 1.5px dashed var(--color-line-soft);
    border-radius: var(--radius-card);
    background: var(--color-zebra);
    font-weight: 700;
    color: var(--color-indigo);
}

.pkgcard-new:hover { border-color: var(--color-indigo); background: var(--color-indigo-bg); }

/* ==========================================================================
   Náhľad vo výsledkoch vyhľadávania
   ========================================================================== */

/* Meta title a description sa čítajú ako dve políčka formulára, ale na webe
   sú jeden odstavec. Náhľad je tá istá vec v tvare, v akom ju uvidí človek. */
.seo-preview {
    margin-top: 1.35rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background: #fff;
}

.seo-preview-title {
    display: block;
    font-size: 1.05rem;
    line-height: 1.35;
    color: #1a0dab;
}

.seo-preview-url { display: block; margin: .2rem 0; font-size: .8rem; color: #006621; }
.seo-preview-text { display: block; font-size: .85rem; line-height: 1.5; color: #4d5156; }
.seo-preview .is-empty { color: var(--color-paused); font-style: italic; }

/* ==========================================================================
   Ponuka akcií v hlavičke detailu
   ========================================================================== */

/* `flex-wrap` je tu dôležitejšie než zarovnanie: v hlavičke stoja aj tri
   tlačidlá a na telefóne sa bez neho posledné z nej vysunulo von. */
.head-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.head-actions .rowmenu > summary {
    padding: .55rem .9rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: .875rem;
    font-weight: 600;
}

/* Záložka, ktorá zatiaľ nemá obsah. Nie je to odkaz, takže `.tab` na nej
   nemá čo zvýrazňovať — musí sa dať poznať, že čaká na uloženie. */
.tab-off {
    opacity: .45;
    cursor: not-allowed;
    background: transparent;
}

.tab-off:hover { background: transparent; color: var(--color-text); }

/* ==========================================================================
   Otázky (FAQ)
   ========================================================================== */


/* Pripojenie existujúcej otázky nad zoznamom v službe. Jedno pole a tlačidlo —
   karta filtrov by naň nasadila mriežku pre šesť stĺpcov a pole by z nej
   vyšlo užšie než najkratšia otázka. */
.faq-attach { margin-bottom: 1.5rem; padding: 1.35rem 1.5rem; }
.faq-attach .field { margin-bottom: .85rem; }
.table-faqs .col-actions { width: 1%; text-align: right; }
.table-faqs .col-check { width: 1%; }
.table-faqs tr.is-off td { color: var(--color-paused); }
.table-faqs .cell-question strong { font-weight: 700; }

/* Varovanie o duplicitách. Nie je to chyba, ktorá by bránila uloženiu —
   je to nález, ktorý si má niekto pozrieť. */
.notice-dupes { margin-bottom: var(--gap); }

/* --- Prepínač, ktorý nie je vypínač -----------------------------------------
   „Odporúčaný balíček" alebo „vyžaduje konzultáciu" sú vlastnosti, nie
   deaktivácia — vypnuté neznamenajú problém, len inú voľbu. Červená by tu
   klamala. */
.switch-neutral:has(input[type="checkbox"]:not(:checked)) { border-color: var(--color-line); background: transparent; }
.switch-neutral input[type="checkbox"]:not(:checked) + .switch-track { background: var(--color-muted); }
.switch-neutral .switch-text strong.switch-off { color: var(--color-heading); }
.switch-neutral .switch-text span.switch-off { color: var(--color-text); }

/* --- Ceny v tabuľke ------------------------------------------------------- */

.table-prices th[scope="row"] { font-weight: 700; color: var(--color-heading); white-space: nowrap; }
.table-prices td { vertical-align: top; }
.table-prices .input { min-width: 8rem; }
.table-prices .hint { margin: .4rem 0 0; }
.table-prices .price-warn-row td { padding-top: 0; }
.table-prices .price-warn-row .notice { margin-top: 0; }

/* --- Radenie ťahaním ------------------------------------------------------ */

.col-drag { width: 1%; white-space: nowrap; }

.draghandle {
    display: inline-block;
    padding: 0 .3rem;
    color: var(--color-paused);
    font-size: 1.05rem;
    line-height: 1;
    cursor: grab;
}

tr.is-dragging { opacity: .45; }
tr[data-id][draggable="true"] { cursor: default; }

/* --- Cena v riadku zoznamu -------------------------------------------------
   Dva typy zákazníka pod sebou v jednej bunke. Vlastný stĺpec na každý typ by
   tabuľku rozšíril o dva a pritom sa čítajú spolu. */
.pricelet { display: flex; justify-content: space-between; gap: .75rem; font-size: .82rem; }
.pricelet + .pricelet { margin-top: .2rem; }
.pricelet-type { color: var(--color-text); }
.pricelet strong { color: var(--color-heading); }
.pricelet .is-request { color: var(--color-indigo); font-weight: 600; }
.pricelet .is-missing { color: var(--color-danger); font-weight: 600; }

/* --- Odporúčané služby ---------------------------------------------------- */

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gap); }

/* --- Odporúčané služby ---------------------------------------------------
   Zoznam riadkov, nie mriežka dlaždíc. Dlaždíc býva jedna aj šesť a stĺpce
   rovnakej výšky z toho robili rad prázdnych obdĺžnikov — náhľad každej
   dlaždice pritom začínal inde, lebo texty sú rôzne dlhé. V riadku stojí
   výber a hneď vedľa neho to, čo dlaždica ponesie. */
.relrows { display: flex; flex-direction: column; gap: .55rem; }

.relrow {
    display: grid;
    grid-template-columns: 1.6rem minmax(11rem, 20rem) 1fr auto;
    align-items: center;
    gap: .85rem;
    padding: .6rem .8rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background: var(--color-zebra);
}

.relrow-num {
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-paused);
}

.relrow .field { margin: 0; }

.relrow-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .7rem;
    min-width: 0;
    margin: 0;
}

.relrow-note .hint { margin: 0; }

.relrow-tools {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.relrows-add { margin: .8rem 0 0; }

/* Na užšom okne sa riadok zalomí: číslo a výber hore, náhľad pod nimi. */
@media (max-width: 60rem) {
    .relrow { grid-template-columns: 1.6rem 1fr auto; }
    .relrow-note { grid-column: 2 / span 2; }
}

/* Popis, ktorý potrebuje čítačka obrazovky, ale na obrazovke by len rušil —
   nad poľom už je očíslovaný nadpis dlaždice. */
.is-hidden-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Prepínač trhu v nastaveniach ------------------------------------------
   Nastavenia nemajú prekladateľné polia, druhý jazyk je druhý trh — preto
   odkazy, nie panely. Rad odznakov to bol dovtedy, kým boli trhy tri;
   pri tridsiatich je to rozbaľovacia ponuka, rovnaká ako v hornej lište. */
.lang-switch { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex: none; }
.lang-switch .hint { font-size: .72rem; }

/*
 * Prepínač trhu na užšom okne.
 *
 * V hlavičke stojí vpravo od nadpisu, preto je obsah zarovnaný doprava. Keď
 * sa hlavička zalomí, ostane z bloku úzky stĺpec pri ľavom okraji — a pilulka
 * zarovnaná doprava vnútri neho visela v odsadení, ktoré nesedelo ani
 * s nadpisom, ani s vysvetlivkou pod ňou.
 *
 * Na vlastnom riadku sa preto zarovnáva doľava, k tej istej linke ako nadpis.
 */
@media (max-width: 860px) {
    .lang-switch { align-items: flex-start; width: 100%; }

    /* Ponuka sa otvára na tú stranu, na ktorej stojí pilulka. `.menu-right`
       ju vešia na pravý okraj prepínača a od ľavého okraja obrazovky tak
       celá vyšla mimo — vidieť z nej bolo posledné písmeno. */
    .lang-switch .menu { left: 0; right: auto; }
}

.marketpick { position: relative; }

.marketpick > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}

.marketpick > summary::-webkit-details-marker { display: none; }
.marketpick > summary:hover { border-color: var(--color-indigo); color: var(--color-indigo); }
.marketpick[open] > summary { border-color: var(--color-navy); background: var(--color-navy); color: #fff; }

/* --- Sekcie úvodnej stránky --------------------------------------------------
   Karty sekcií sa dajú presúvať, takže hlavička nesie navyše šípky a prepínač
   zapnutia. Vnorené bloky (odrážky, kartičky, počítadlá) sa len vypínajú —
   presúvať ich nie je kam, sú vnútri svojej sekcie. */

.section-tools { display: flex; align-items: center; gap: .6rem; flex: none; }
.section-move { display: flex; gap: .25rem; }

/* Na telefóne stojí v hlavičke karty popri šípkach a prepínači aj výber
   jazyka, ktorý si berie celú šírku (`.card-head .lang-tools`). Bez zalomenia
   ho `.section-tools` držali v jednom riadku a karta sa roztrhla. */
@media (max-width: 620px) {
    .section-tools { flex: 1 1 100%; flex-wrap: wrap; row-gap: .6rem; }
}


/* Prepínač v hlavičke karty. Ten istý mechanizmus ako veľký `.switch`, len bez
   rámu a s jedným slovom namiesto vety — vysvetlenie nesie samotná karta. */
.switch-mini { padding: .3rem .6rem; gap: .5rem; border-radius: var(--radius-pill); }
.switch-mini .switch-track { width: 2.2rem; height: 1.25rem; }
.switch-mini .switch-track::after { width: .9rem; height: .9rem; top: .175rem; left: .175rem; }
.switch-mini input:checked + .switch-track::after { transform: translateX(.95rem); }
.switch-mini .switch-text strong { font-size: .78rem; font-weight: 700; }

/* Vypnutá sekcia sfarbí celú svoju kartu, nie len prepínač — inak sa v dlhom
   formulári prehliadne, že sa jej obsah na web nedostane. Podmienka je viazaná
   na hlavičku tej istej karty: hero má pod sebou ešte odrážky a kartičky
   s vlastnými prepínačmi a tie sa vypínajú samostatne. */
.card:has(> .card-head .switch-mini input[type="checkbox"]:not(:checked)) {
    border-color: var(--color-danger-line);
    background: var(--color-danger-soft);
}

/* Slot opakovaného bloku (kartička, počítadlo) v mriežke troch stĺpcov. */
.slotbox {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
}

.slotbox > .field:last-child, .slotbox > .lang-panel:last-child > .field:last-child { margin-bottom: 0; }

/* --- Lišta uloženia ----------------------------------------------------------
   Fixná na spodku obrazovky, viditeľná až keď je čo uložiť. */

.savebar {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--color-navy);
    color: #fff;
    box-shadow: 0 12px 30px rgba(14, 26, 60, .28);
    transform: translateX(-50%);
}

.savebar[hidden] { display: none; }
.savebar-text { font-size: .875rem; font-weight: 600; margin-right: .5rem; }
.savebar .secondary-btn { border-color: rgba(255, 255, 255, .3); color: #fff; background: transparent; }
.savebar .secondary-btn:hover { background: #fff; border-color: #fff; color: var(--color-navy); }

/* Aby posledné tlačidlo formulára neostalo pod lištou. */
body.has-savebar .form-actions { padding-bottom: 3.5rem; }

/*
 * Na telefóne je lišta pás cez celú šírku, nie pilulka v strede: text
 * „Máš neuložené zmeny." s dvoma tlačidlami má cez 24 rem a na 360 px
 * vytŕčala oboma koncami mimo obrazovku.
 */
@media (max-width: 560px) {
    .savebar {
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        gap: .5rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        border-radius: var(--radius-card);
        transform: none;
    }

    .savebar-text { width: 100%; margin: 0; }
    .savebar .btn { flex: 1; justify-content: center; }
}

/* --- Hviezdičky hodnotenia ---------------------------------------------------
   Päť prepínačov, ktoré vyzerajú ako hviezdičky. Bez JavaScriptu: hodnotu
   nesie `input[type=radio]`, farbu rieši `:has()` a súrodenecké selektory. */

/* Popisok nad hviezdičkami. Nie <label>, lebo neukazuje na jedno pole —
   hviezdičiek je päť a každá má vlastný prepínač. */
.field > .label {
    display: block;
    margin-bottom: .5rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-heading);
}

.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.stars input { position: absolute; opacity: 0; width: 0; height: 0; }

.stars label {
    color: var(--color-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease-out;
}

/* Poradie je obrátené, takže „vybraná a všetky pred ňou" sú súrodenci za ňou. */
.stars input:checked + label,
.stars input:checked + label ~ label,
.stars label:hover,
.stars label:hover ~ label { color: var(--color-gold); }

.stars input:focus-visible + label { outline: 3px solid var(--color-gold); outline-offset: 2px; }

/* Hviezdičky v zozname sú údaj, nie ovládanie — preto len text. */
.stars-value { color: var(--color-gold); font-size: .8rem; letter-spacing: .05em; }
.stars-value .is-empty { color: var(--color-muted); }

/* --- Nástroje na výbere trhu -------------------------------------------------
   Veci, ktoré nepatria žiadnemu trhu a v bočnom paneli by len zaberali miesto:
   admin účty, globálny zoznam zákazníkov, kopírovanie obsahu. */

/* Nástroje sú riadok odkazov, nie dlaždice. Chodí sa do nich raz za čas
   a veľká karta im dávala váhu, ktorú nemajú. */
.toolbar {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    font-size: .82rem;
}

.toolbar-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
}

.toolbar a { color: rgba(255, 255, 255, .72); font-weight: 600; }
.toolbar a:hover { color: #fff; }
.toolbar .sep { color: rgba(255, 255, 255, .25); }

/* Ručné uloženie do archívu. Pole a tlačidlo nad zoznamom verzií — akcia
   „odlož mi, ako to vyzerá teraz" patrí pred zoznam toho, čo už odložené je. */
.archive-save {
    padding: 0 0 1.25rem;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 1.25rem;
}

.archive-save .field {
    max-width: 32rem;
}

/* ==========================================================================
   Náhľad verzie z archívu

   Predtým stál na `srows` — dvojstĺpcovom zozname z bočného panela detailu
   zákazníka. V karte cez celú šírku z neho bola popiska vľavo a hodnota
   o meter ďalej vpravo, a štvorriadkový odsek zarovnaný doprava sa nedal
   čítať. Tu má krátky údaj mriežku a dlhý text popisku nad sebou.
   ========================================================================== */
.ver-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem 2rem;
}

.ver-item {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.ver-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-text);
}

.ver-value {
    font-size: .95rem;
    color: var(--color-heading);
    overflow-wrap: anywhere;
}

/* Dlhé texty. Strop šírky je kvôli čítaniu: riadok cez celú obrazovku oko
   na konci stratí a začiatok nasledujúceho hľadá. */
.ver-texts {
    display: grid;
    gap: 1.25rem;
}

.ver-text p {
    max-width: 78ch;
    margin: .25rem 0 0;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--color-text);
}

/* Ceny pod sebou, nie v jednom riadku oddelené interpunkciou — dve sadzby
   na trh sú dva údaje, nie veta. */
.ver-price {
    display: block;
    font-size: .9rem;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .ver-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Objednávka čaká na platbu

   Jeden riadok so zlatou linkou, nie farebný blok cez celú šírku: je to
   podmienka práce, nie porucha, a odznak „Nezaplatená" stojí o kúsok vyššie.
   Blok tú istú vec kričal tretíkrát.
   ========================================================================== */
.paywait {
    margin: -.4rem 0 1.5rem;
    padding: .1rem 0 .1rem .85rem;
    border-left: 3px solid var(--color-gold);
    font-size: .875rem;
    line-height: 1.55;
    color: var(--color-text);
}

.paywait strong {
    color: var(--color-heading);
}

/* Riadok nezaplatenej objednávky v zozname. Stlmený, nie zvýraznený —
   nekričí o prácu, ktorá sa ešte nezačala. Zrušiť ho musí `is-new`, inak by
   modrá „nová objednávka" prekryla to, že sa nespracúva. */
.orow.is-awaiting,
.orow.is-awaiting.is-new {
    background: var(--color-zebra);
}

.orow.is-awaiting:hover,
.orow.is-awaiting.is-new:hover {
    background: var(--color-bg);
}

.orow.is-awaiting .mono strong,
.orow.is-awaiting .ocust strong {
    color: var(--color-text);
}

/* Prepínač kôp nad zoznamom objednávok. Rovnaké chipy ako filtre, len
   s počtom — zvolená kopa je tmavomodrá, aby bolo vidieť, na čo sa pozerám. */
.viewchips {
    margin: 0 0 1.25rem;
}

.viewchips .chip b {
    margin-left: .35rem;
    font-weight: 700;
}

.viewchips .chip.is-on {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

/* ==========================================================================
   Podklady k objednávke

   Čeklist hore, súbory pod ním: prvá otázka obsluhy je „máme už všetko?",
   nie „čo tu leží".
   ========================================================================== */
.doclist {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .4rem;
}

.doclist-item {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    font-size: .9rem;
    color: var(--color-text);
}

.doclist-item.is-done {
    color: var(--color-heading);
}

.doclist-mark {
    width: 1rem;
    text-align: center;
    font-weight: 700;
    color: var(--color-paused);
}

.doclist-item.is-done .doclist-mark {
    color: var(--color-ok);
}

.doclist-note {
    margin-left: .35rem;
    font-size: .78rem;
    color: var(--color-paused);
}

/* Formulár na priloženie stojí pod zoznamom — najprv čo tu je, potom čo
   pridať. Linka ho oddelí bez ďalšieho nadpisu. */
.fileform {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-line);
}

/* Vyžiadanie podkladov e-mailom. Zbalené v `details`, lebo je to akcia raz za
   čas — rozbalené by zaberalo pol karty aj vtedy, keď netreba nič posielať. */
.askform {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-line);
}

.askform > summary {
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-navy);
}

.askform > summary::-webkit-details-marker { display: none; }

.askform > summary::after {
    content: ' ▾';
    color: var(--color-paused);
}

.askform[open] > summary::after { content: ' ▴'; }

.askform form { margin-top: 1rem; }

.askform-checks {
    display: grid;
    gap: .4rem;
    margin-bottom: 1rem;
}

.askform-checks label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--color-heading);
    cursor: pointer;
}