/* Simex Distribution Hub - administrace
   Vlastní styl bez externího frameworku: méně závislostí a přísnější CSP. */

:root {
    --bg: #f6f7fb;
    --surface: #ffffff;
    --border: #ecedf3;
    --border-strong: #dcdfe9;
    --text: #171b26;
    --muted: #6b7280;
    --primary: #5b4fe9;
    --primary-dark: #4a3fd4;

    /* Tlumené varianty stavových barev. Slouží jako podklad odznaků a ikon:
       plná barva na velké ploše překřičí obsah, o který ve výpisu jde. */
    --primary-soft: #eeecfe;
    --ok: #14804a;
    --ok-soft: #e6f6ee;
    --warn: #b45309;
    --warn-soft: #fdf3e3;
    --danger: #c62828;
    --danger-soft: #fdecec;
    --info-soft: #e8f0fe;

    --sidebar: #10131f;
    --sidebar-text: #98a1b8;

    /* Jednotné zaoblení. Karta, tabulka i vstupní pole musí mít stejný tvar,
       jinak se plocha rozpadne na nesourodé obdélníky. */
    --radius: 14px;
    --radius-sm: 10px;

    /* Paleta grafů. Odstíny se liší i světlostí, ne jen barvou - graf tak
       zůstane čitelný na černobílém tisku i pro barvoslepé uživatele. */
    --chart-1: #5b4fe9;
    --chart-2: #2f8fd4;
    --chart-3: #23a094;
    --chart-4: #a855f7;
    --chart-warn: #d98324;
    --chart-danger: #c23b3b;
    --chart-track: #eeeff5;

    /* Stíny jsou měkké a skoro neviditelné. Karta se má od pozadí oddělit
       vzduchem, ne rámečkem - proto je hranice světlá a stín rozostřený. */
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .04);
    --shadow-md: 0 6px 20px rgba(17, 24, 39, .07);
}

* { box-sizing: border-box; }

html {
    /* Bez tohoto zvětší iOS v na šířku otočeném telefonu písmo podle vlastního
       uvážení a rozvržení se rozjede. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);

    /* Stránka se nesmí dát posouvat do strany.
       Dva důvody, proč by se dala: vysunutá postranní lišta stojí mimo
       viditelnou plochu vlevo a některé mobilní prohlížeče kvůli ní rozšíří
       rolovatelnou oblast; a široká tabulka by jinak roztáhla celý dokument.
       Tabulky se proto posouvají samy uvnitř sebe, ne přes celou stránku. */
    overflow-x: hidden;
}

h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.022em; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.012em; margin: 1.5rem 0 .75rem; }
h3 { font-size: .95rem; font-weight: 650; margin: 1.25rem 0 .5rem; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: .85em; }
/* Výpis kódu (třeba značek <meta>) se zalamuje: jeden dlouhý řádek by na telefonu
   roztáhl kartu a stránkou by šlo posouvat do strany. */
.kod-vypis { white-space: pre-wrap; overflow-wrap: anywhere; margin: .35rem 0 0; }
.small { font-size: .85em; }
.muted { color: var(--muted); }
.required { color: var(--danger); }

/* --- Rozvržení --- */
.layout { display: flex; min-height: 100vh; }

/* Přepínač postranní lišty. Na velkých obrazovkách se neuplatní vůbec -
   lišta je trvale vidět a přepínač i horní pruh jsou skryté. */
.nav-toggle { display: none; }
.topbar { display: none; }
.nav-backdrop { display: none; }
.nav-close { display: none; }

/* Lišta drží celou výšku okna a zůstává na místě při rolování stránky.
   Bez toho se s delší nabídkou odsune spodní blok s přihlášeným uživatelem
   a odhlášením pod okraj obrazovky - a protože stránka roluje obsahem
   vpravo, nešlo se k němu dostat. */
.sidebar {
    width: 250px;
    flex: 0 0 250px;
    background: var(--sidebar);
    color: #dbe3ef;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand { display: flex; gap: .75rem; align-items: center; padding: 0 1.5rem 1.75rem; }
.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    border-radius: var(--radius-sm);
    letter-spacing: .04em;
}
.brand-name { font-size: .85rem; line-height: 1.25; color: #fff; font-weight: 600; }

/* min-height: 0 je tu nutné - flex položka se jinak nezmenší pod výšku svého
   obsahu a overflow by se nikdy neuplatnil. Roluje jen nabídka, značka nahoře
   a uživatel dole zůstávají vidět. */
.nav-menu { flex: 1; min-height: 0; overflow-y: auto; padding: 0 .75rem; }
.nav-menu::-webkit-scrollbar { width: 6px; }
.nav-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
.nav-menu { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
.nav-list { list-style: none; margin: 0; padding: 0; }

/* Nadpis sekce. Drobné prostrkané verzálky, aby sekci bylo vidět, ale aby si
   ji oko nespletlo s položkou - nadpis se neklikatelný a nesmí vypadat jako
   odkaz. Odsazení zleva sedí s textem položek, ne s jejich ikonami. */
.nav-group {
    margin: 1.1rem 0 .35rem;
    padding: 0 .75rem;
    color: #7f89a3;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.nav-list-ucet { margin-top: 1.1rem; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.1); }

/* Nadpis sekce, ve které je právě otevřená stránka, zesvětlá. Bez toho nabídka
   po překreslení neřekne, kde se uživatel nachází - zvýrazněná je jen položka
   a ta může být odrolovaná mimo. */
.nav-group:has(+ .nav-list a.active) { color: #ffffff; }

/* Položka je zaoblený pruh, ne řádek přes celou lištu. Aktivní stránka se tak
   pozná tvarem, ne jen barvou - to funguje i při špatném kontrastu monitoru. */
.nav-menu a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .75rem;
    margin-bottom: .15rem;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-size: .92rem;
    white-space: nowrap;
}
.nav-menu a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-menu a.active { background: var(--primary); color: #fff; font-weight: 600; }

/* Ikona nese význam jen spolu s textem vedle sebe, proto je pro odečítač
   obrazovky skrytá - jinak by četl dvakrát totéž. */
.nav-menu svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; opacity: .85; }
.nav-menu a.active svg { opacity: 1; }

/* Oddělovač mezi provozními sekcemi a osobním nastavením. */
.nav-separator { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.1); }

.user-box { flex: 0 0 auto; padding: 1rem 1.25rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.user-name { color: #fff; margin-bottom: .35rem; }

/* min-width: 0 je zásadní - flex položka se jinak nesmrskne pod šířku svého
   obsahu, takže by jedna široká tabulka roztáhla celé rozvržení. */
.content-area { flex: 1; min-width: 0; max-width: 100%; }
main { padding: 1.75rem 2rem; max-width: 1400px; }

/* Dlouhé souvislé řetězce bez mezer (klíče idempotence, hashe, URL)
   by jinak přetekly ven z karty. */
.card, main p, .alert { overflow-wrap: anywhere; }

.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
/* Tlačítko vedle dlouhého nadpisu (název reklamy nebo kampaně) se nesmí zalomit
   na "Zpět na / seznam" - ustoupit má nadpis, ten se lámat smí. */
.page-header > .btn { white-space: nowrap; }
/* Pod nadpisem detailu stojí odznaky a tlačítko (Přejmenovat). Na telefonu se do
   jednoho řádku nevejdou a bez zalomení by tlačítko vyjelo za pravý okraj. */
.subtitle { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.page-message { padding: 4rem 2rem; text-align: center; }

/* --- Banner nad obsahem --- */
.banner { padding: .7rem 2rem; display: flex; gap: 1rem; align-items: center; }
.banner-stop { background: var(--danger); color: #fff; }
.banner-stop a { color: #fff; text-decoration: underline; }

/* --- Karty a dlaždice --- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.card-danger { border-color: var(--danger); border-width: 2px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

/* Dlaždice je karta s ikonou vlevo. Ikona nese stav barvou, takže hodnota
   pod popiskem může zůstat neutrální a čte se jako číslo, ne jako poplach. */
.tile {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.15rem;
}
.tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary);
}
.tile-icon svg { width: 1.35rem; height: 1.35rem; }
.tile-label { font-size: .82rem; color: var(--muted); }
.tile-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin-top: .1rem; font-variant-numeric: tabular-nums; }
.tile-ok .tile-icon { background: var(--ok-soft); color: var(--ok); }
.tile-warn .tile-icon { background: var(--warn-soft); color: var(--warn); }
.tile-danger .tile-icon { background: var(--danger-soft); color: var(--danger); }

/* Porovnání s minulým obdobím. Šipka i barva říkají směr, samotné číslo
   by u poklesu vypadalo stejně jako u růstu. */
.tile-trend { font-size: .78rem; margin-top: .2rem; color: var(--muted); }
.tile-trend.up { color: var(--ok); }
.tile-trend.down { color: var(--danger); }

/* Řada dlaždic s částkami v měně. "12 345,67 Kč" se do 190px dlaždice nevejde
   a mezery v částce jsou nezlomitelné, takže by přetekla přes okraj. Dvě třídy
   v selektoru schválně: pravidla .tiles pro mobil stojí v souboru níž a jednu
   třídu by přebila zpátky na úzké dlaždice. */
.tiles.tiles-siroke { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Široká dlaždice (Placená reklama na Přehledu): částka a poznámka se vejdou na
   jeden řádek a dlaždice nevyroste nad ostatní. Pod 900 px zůstane jednoduchá -
   v jednosloupcové mřížce by span 2 založil implicitní druhý sloupec. */
@media (min-width: 900px) {
    .tile-siroka { grid-column: span 2; }
}

/* --- Tabulky --- */
/* Ořez kvůli zaoblenému rámečku. clip ořízne stejně jako hidden, ale z tabulky
   neudělá rolovací kontejner, takže v ní funguje position: sticky (pevný
   sloupec akcí). Starší prohlížeč clip přeskočí a zůstane u hidden. */
.grid { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; overflow: clip; }
.grid.narrow { max-width: 520px; }
.grid th, .grid td { padding: .8rem .75rem; text-align: left; border-bottom: 1px solid var(--border); }
/* Krajní sloupce drží odsazení od rámečku, uvnitř tabulky stačí užší mezera.
   Osm sloupců po dvou centimetrech odsazení sebere přes šedesát pixelů, které
   pak chybí sloupci s názvem - a ten se kvůli tomu zalamuje. */
.grid th:first-child, .grid td:first-child { padding-left: 1rem; }
.grid th:last-child, .grid td:last-child { padding-right: 1rem; }

/* Buňka nese skoro vždy atomickou hodnotu - typ, stav, datum, počet, jméno
   obsluhy. Ta se nesmí lámat: "E-mail" rozseknutý na "E-" a "mail" kvůli
   jednomu chybějícímu písmenu vypadá jako rozbitá stránka a čte se hůř než
   vodorovné posunutí tabulky. Sloupce s volným textem (název, předmět,
   adresa, chybová hláška) se označují třídou .wrap. */
.grid td { white-space: nowrap; }
/* Sloupec s volným textem si bere zbylé místo v řádku. Ostatní sloupce se
   nelámou, takže mají pevnou šířku danou obsahem - bez tohohle by prohlížeč
   zúžil právě ten jediný sloupec, který zúžit smí, a název kampaně by se
   lámal i tam, kde je místa dost. */
.grid td.wrap { white-space: normal; overflow-wrap: anywhere; width: 100%; min-width: 16rem; }

/* Když se tabulka do šířky nevejde, posune se do strany. Zúžit sloupec pod
   šířku jeho obsahu znamená lámat slova, a to je vždycky horší. Obal nemá
   vlastní rámeček ani pozadí - zaoblení a linky si nese tabulka sama. */
.tabulka-posuv { max-width: 100%; overflow-x: auto; }
.tabulka-posuv .grid { min-width: 100%; }

/* Ovládací prvek v buňce si drží čitelnou šířku. Sloupec s volným textem si
   bere zbylé místo, takže bez tohohle se rozbalovací seznam zúží na dvě
   písmena ("N", "Z") a uživatel nevidí, co vlastně vybírá. */
.grid td .input, .grid td select { min-width: 9.5rem; width: auto; }

/* Akce v řádku jsou tlačítka, ne podtržené odkazy. V tabulce plné odkazů na
   detail se odkaz na akci od odkazu na řádek nedal rozeznat a "Smazat"
   vypadalo stejně nevinně jako název kampaně. */
.radek-akce { display: flex; gap: .4rem; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
/* inline-flex kvůli odkazu v roli tlačítka: <a class="btn"> by měl na telefonu
   (min-height 44 px) text nahoře, <button> vedle něj uprostřed. */
.radek-akce .btn { display: inline-flex; align-items: center; justify-content: center; padding: .3rem .7rem; font-size: .82rem; line-height: 1.25; }
.radek-akce .muted { margin-right: .1rem; }

/* Sloupec akcí u široké tabulky zůstane vidět i při posunu do strany. U placené
   reklamy je v něm tlačítko Zastavit a to nesmí odjet za okraj. Pozadí je nutné,
   jinak by pod pevným sloupcem prosvítaly buňky, které pod ním projíždějí. */
.grid th.akce-pevne, .grid td.akce-pevne { position: sticky; right: 0; background: var(--surface); box-shadow: inset 1px 0 0 var(--border); z-index: 1; }
.grid tbody tr:hover td.akce-pevne { background: #fafbfd; }

/* Tlačítka v pevném sloupci jsou pod sebou. Vedle sebe by sloupec měřil přes
   300 px (Detail, Zastavit, Potvrdit ruční zastavení) a na telefonu by byl
   širší než celá tabulka, takže by pod ním zbytek řádku nešel odrolovat. Pod
   sebou je sloupec jen tak široký jako nejdelší tlačítko. Pevný sloupec přikryje
   to, co pod ním projíždí, takže tabulka s ním má být tak úzká, aby se na běžném
   monitoru nemusela posouvat vůbec (viz .grid.reklamy níž). */
.grid td.akce-pevne .radek-akce { flex-direction: column; align-items: stretch; }

/* Nejdelší popisek v pevném sloupci ("Potvrdit ruční zastavení") se láme na dva
   řádky, jinak by sloupec měl 190 px - na telefonu přes polovinu tabulky a při
   1280 px by přikryl Rozpočet. Mezi prvními dvěma slovy je v popisku pevná
   mezera, takže zlom je jen jeden a sloupec zůstane tak široký jako "Potvrdit
   ruční". overflow-wrap: normal je nutné: karta dědí anywhere a s ním by
   prohlížeč sloupec smrskl na jedno písmeno a tlačítka psal po písmenech. */
.grid td.akce-pevne .btn-dva-radky { white-space: normal; overflow-wrap: normal; text-align: center; }

/* Seznam placených reklam: odznaky stavu zůstávají na jednom řádku - provozovatel
   si výslovně stěžoval na texty zlomené do dvou řádků. Aby se tabulka při 1280 px
   vešla i bez posouvání (jinak by pevný sloupec akcí přikryl Rozpočet), jsou
   popisky stavů krátké (nejdelší "U Mety: Doručuje se - utrácí") a místo jim
   uvolní sloupec Název: ten se zalamovat smí a tady má menší nejmenší šířku
   než obecné .wrap. Přeměřeno na náhledu: 1280 px, šest stavů, bez posunu. */
.grid.reklamy td.stav, .grid.reklamy td.stav .badge { white-space: nowrap; }
.grid.reklamy td.wrap { min-width: 11rem; }

/* Dvousloupcová tabulka štítek - hodnota s víceřádkovými poznámkami (potvrzení
   spuštění reklamy, nastavení reklamy). Tady se zalamovat musí: poznámka
   o pojistce by v nowrap buňce roztáhla tabulku na trojnásobek šířky telefonu.
   Štítek se ale láme jen mezi slovy a .wrap tu nebere celou šířku: sloupec se
   šířkou 100 % by štítky smáčkl na jejich nejmenší šířku, a protože anywhere
   dovoluje zlom kdekoli, stál by pak "Celkový rozpočet" po písmenech pod sebou. */
.grid.klic-hodnota td { white-space: normal; overflow-wrap: anywhere; }
.grid.klic-hodnota td:first-child { width: 14rem; color: var(--muted); overflow-wrap: normal; }
.grid.klic-hodnota td.wrap { min-width: 0; width: auto; }
@media (max-width: 560px) {
    /* Na telefonu by pevných 14rem štítku vzalo hodnotě polovinu řádku. */
    .grid.klic-hodnota td:first-child { width: 40%; }

    /* Jediná výjimka z nezalomitelných odznaků: "přečteno z Mety, ne z databáze"
       je na telefonu širší než celý sloupec hodnot a potvrzení spuštění by se
       kvůli němu posouvalo do strany. Zalomí se mezi slovy uvnitř bubliny. */
    .grid.klic-hodnota .badge { white-space: normal; }
}

/* Sloupec s textem letáku je ten, který má ustoupit. Pevná hlavička ostatních
   sloupců jinak tabulku roztáhne přes kartu a text příspěvku je jediné pole,
   kterému užší místo nevadí - píše se do něj po řádcích. */
.grid td textarea.input { min-width: 0; }

/* Přejmenování kampaně stojí na místě nadpisu, takže si drží jeho velikost -
   jinak by se při přepnutí do úprav celá hlavička poskočila. */
.prejmenovani { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0 0 .35rem; }
.prejmenovani .input { max-width: 32rem; font-size: 1.1rem; font-weight: 600; }
/* Hlavička se nezalamuje. Verzálky s prostrkáním se lámou uprostřed slova
   ("VELIKOS / T") a v úzkém sloupci to vypadá jako rozbitá stránka. Zúžit se
   místo toho musí obsah - tabulka se v případě potřeby posune do strany. */
.grid th { background: transparent; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; white-space: nowrap; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: #fafbfd; }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.grid .total td { border-top: 2px solid var(--border); background: #f8fafc; }
.row-stale { background: #fef3c7; }
.row-error { background: #fef2f2; }
.error-text { color: var(--danger); max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Náhledy letáků ---
   Jeden vzhled náhledu místo inline stylů na každé stránce. contain, protože
   leták se nesmí oříznout - obsluha podle náhledu poznává, který to je. */
.nahled-letaku { display: block; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #f8fafc; }
.nahled-letaku--maly { width: 48px; height: 48px; }
.nahled-letaku--tabulka { width: 6rem; height: 4rem; }
/* min() kvůli telefonu: 320 px je víc než obsah karty na displeji 375 px.
   max-height, protože letáky jsou na výšku a náhled vrací originál: jen se
   šířkou by vyšel o 40 % vyšší než dřívější inline styly (320x448 místo
   229x320). Obrázek nemá width/height, takže při dvou maximech drží poměr stran. */
.nahled-letaku--stredni { max-width: min(200px, 100%); max-height: 200px; height: auto; }
.nahled-letaku--velky { max-width: min(320px, 100%); max-height: 320px; height: auto; }

/* --- Formuláře --- */
label { display: block; font-size: .85rem; font-weight: 600; margin: .75rem 0 .25rem; }
label.checkbox { display: flex; gap: .5rem; align-items: center; font-weight: 400; margin: .35rem 0; }

.input {
    width: 100%;
    padding: .6rem .8rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    background: #fff;
}
.input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.input.inline { width: auto; display: inline-block; }
.input.code { font-family: "Cascadia Mono", Consolas, monospace; font-size: .85em; }
textarea.input { resize: vertical; }

fieldset { border: 1px solid var(--border); border-radius: .375rem; padding: .75rem 1rem; margin: 1rem 0; }
legend { font-size: .85rem; font-weight: 600; padding: 0 .35rem; }

.filters { display: flex; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; flex-wrap: wrap; }
.filters .input { width: auto; min-width: 16rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.actions { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }

/* --- Tlačítka --- */
/* Barva a podtržení se určují výslovně, protože tlačítkem může být i odkaz
   (náhled otevírá vlastní koncový bod, takže musí jít o skutečnou navigaci).
   Bez toho by <a class="btn"> zdědil fialovou barvu odkazů a vedle stejně
   vypadajícího <button> by působil jako jiný ovládací prvek. Barevné varianty
   níž si vlastní barvu textu přepisují. */
.btn {
    padding: .55rem 1.1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn:hover:not(:disabled) { background: #f6f7fb; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { padding: .3rem .7rem; font-size: .85rem; }
.btn-block { width: 100%; margin-top: 1rem; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-warning { background: var(--warn); border-color: var(--warn); color: #fff; }

/* Barevná tlačítka potřebují vlastní stav při najetí. Obecné .btn:hover má
   vyšší specifičnost než samotná barevná třída a dalo by jim světlé pozadí -
   bílý text "Zastavit" by na něm zmizel právě ve chvíli, kdy na něj míří myš. */
.btn-danger:hover:not(:disabled) { background: #a82222; }
.btn-warning:hover:not(:disabled) { background: #97460a; }

/* Velké tlačítko pro krizové akce (Zastavit všechny reklamy, Spustit utrácení).
   Dřív stálo v bloku úvodní stránky, a kdyby ten blok někdo smazal, krizová
   tlačítka by se tiše zmenšila. */
.btn-lg { padding: .8rem 1.5rem; font-size: 1rem; }

/* Druhé tlačítko nesmí soupeřit s tím hlavním - proto jen obrys. */
.btn-ghost { background: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

.link-button { background: none; border: 0; color: var(--primary); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }

/* --- Pole pro heslo s kukátkem --- */
.password-field { position: relative; display: block; }
.password-field .input { padding-right: 2.9rem; }

.password-toggle {
    /* Bez JavaScriptu se tlačítko nezobrazí - třídu "js" nasazuje password-toggle.js. */
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.6rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0 .375rem .375rem 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
}
html.js .password-toggle { display: flex; }
.password-toggle:hover { color: var(--text); background: #f1f5f9; }
.password-toggle svg { width: 1.15rem; height: 1.15rem; }

/* Ikona se řídí stavem tlačítka, ne třídou navíc - stav stejně musí být
   v aria-pressed kvůli odečítačům obrazovky. */
.password-toggle .icon-hide { display: none; }
.password-toggle[aria-pressed="true"] .icon-show { display: none; }
.password-toggle[aria-pressed="true"] .icon-hide { display: block; }

/* --- Záložky --- */
.tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--border); margin-bottom: 1.25rem; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: .6rem 1rem; cursor: pointer; font: inherit; color: var(--muted); }
.tab-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* --- Odznaky --- */
/* Odznak nese barvu tečkou a tlumeným podkladem. Sytá výplň by v tabulce
   přebila samotná data, kvůli kterým se tam obsluha dívá. */
/* Odznak se nelomí nikdy, ani uvnitř buňky s volným textem - ta má
   zalamování povolené a odznak by ho po ní zdědil. "Bez schválení" na dvou
   řádcích uvnitř bubliny vypadá jako chyba vykreslení. */
.badge { display: inline-flex; align-items: center; gap: .38rem; padding: .2rem .6rem; border-radius: 1rem; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge-ok { background: var(--ok-soft); color: #146c42; }
.badge-info { background: var(--info-soft); color: #1a4fa0; }
.badge-warn { background: var(--warn-soft); color: #91480a; }
.badge-danger { background: var(--danger-soft); color: #a52020; }
.badge-neutral { background: #f1f2f7; color: var(--muted); }

/* --- Hlášky --- */
.alert { padding: .85rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; border-left: 3px solid; }
.alert ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.alert-info { background: var(--primary-soft); border-color: var(--primary); }
.alert-success { background: var(--ok-soft); border-color: var(--ok); }
.alert-warning { background: var(--warn-soft); border-color: var(--warn); }
.alert-error { background: var(--danger-soft); border-color: var(--danger); }

.pager { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }

/* ---------------------------------------------------------------------------
   Grafy
   Vše je inline SVG vykreslené na serveru. Žádná knihovna, žádný požadavek
   na cizí zdroj - CSP administrace je nepovoluje a graf o pár desítkách bodů
   je nepotřebuje.
   --------------------------------------------------------------------------- */
.chart-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
.chart-card { margin-bottom: 0; display: flex; flex-direction: column; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.chart-head h2 { margin: 0; font-size: 1rem; }
.chart-now { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-now small { font-size: .75rem; font-weight: 400; color: var(--muted); }
.chart-empty { color: var(--muted); font-size: .9rem; padding: 1.25rem 0; text-align: center; }

.sparkline { width: 100%; height: 64px; display: block; }

/* --- Prstenec --- */
.donut-wrap { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.donut { width: 130px; height: 130px; flex: 0 0 auto; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: var(--chart-track); stroke-width: 4; }
.donut-seg { fill: none; stroke-width: 4; transition: stroke-dasharray .3s ease; }
.donut-value, .donut-label { transform: rotate(90deg); transform-origin: 21px 21px; text-anchor: middle; }
.donut-value { font-size: 6px; font-weight: 700; fill: var(--text); }
.donut-label { font-size: 2.6px; fill: var(--muted); text-transform: uppercase; letter-spacing: .12em; }

.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 9rem; font-size: .875rem; }
.donut-legend li { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.donut-legend .dot { width: .7rem; height: .7rem; border-radius: 2px; flex: 0 0 auto; }
.donut-legend-label { flex: 1; color: var(--muted); }
.donut-legend-value { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- Trychtýř --- */
.funnel { display: flex; flex-direction: column; gap: .875rem; margin: .5rem 0 1rem; }
.funnel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .3rem; }
.funnel-label { font-size: .875rem; }
.funnel-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.funnel-pct { color: var(--muted); font-weight: 400; margin-left: .4rem; font-size: .85em; }
.funnel-track { height: .625rem; background: var(--chart-track); border-radius: 1rem; overflow: hidden; }
.funnel-bar { height: 100%; border-radius: 1rem; transition: width .35s ease; min-width: 2px; }
.funnel-note { font-size: .8rem; color: var(--muted); margin-top: .25rem; }

/* --- Průběh --- */
.progress { margin: .25rem 0 1.25rem; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .35rem; font-size: .9rem; }
.progress-numbers { font-variant-numeric: tabular-nums; color: var(--muted); }
.progress-numbers strong { color: var(--text); margin-left: .4rem; }
.progress-track { position: relative; height: .75rem; background: var(--chart-track); border-radius: 1rem; overflow: hidden; }
.progress-fill { height: 100%; background: var(--chart-2); border-radius: 1rem; transition: width .35s ease; }
.progress-failed { position: absolute; top: 0; right: 0; height: 100%; background: var(--chart-danger); }

/* ---------------------------------------------------------------------------
   Doladění vzhledu
   Jen stíny, přechody a stavy - žádné změny rozměrů, aby se rozvržení
   ověřené na mobilu nikde neposunulo.
   --------------------------------------------------------------------------- */
.card { box-shadow: var(--shadow-sm); }
.tile { box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
.tile:hover { box-shadow: var(--shadow-md); }
.grid { box-shadow: var(--shadow-sm); }
.grid tbody tr { transition: background .1s ease; }
.btn { transition: background .15s ease, box-shadow .15s ease; }
.btn-primary, .btn-danger, .btn-warning { box-shadow: var(--shadow-sm); }
.badge { border: 1px solid rgba(0, 0, 0, .06); }
.tab { transition: color .15s ease, border-color .15s ease; }

/* Nadpis uvnitř karty odděluje bloky, ale nemá soupeřit s nadpisem stránky. */
h3 { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 1.5rem; }

/* Přechod dává liště hloubku, aniž by ubral na kontrastu textu. */
.sidebar { background: linear-gradient(180deg, #191d2e 0%, var(--sidebar) 45%); }

/* Klávesnicová obsluha musí být vidět. V liště je pozadí tmavé,
   takže tam se rámeček obrací na bílý. */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sidebar :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------------------
   Přihlášení

   Jediná obrazovka, kterou uživatel vidí dřív, než systém pozná, kdo je.
   Proto je to jediné místo se sytým pozadím - karta na něm stojí jako
   samostatný objekt a nic kolem ní neodvádí pozornost od dvou polí.
   --------------------------------------------------------------------------- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--sidebar);

    /* Dva rozostřené kruhy v barvě značky. Statický obrázek by znamenal další
       požadavek na server a přísná CSP administrace ho nepovoluje. */
    background-image:
        radial-gradient(60rem 40rem at 12% -10%, rgba(91, 79, 233, .38), transparent 60%),
        radial-gradient(45rem 35rem at 105% 105%, rgba(91, 79, 233, .22), transparent 60%);
}

.login-card {
    background: var(--surface);
    padding: 2.5rem;
    border-radius: 20px;
    width: 100%;
    max-width: 25rem;
    box-shadow: 0 24px 60px rgba(6, 8, 18, .45);
}
.login-brand { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.75rem; }
.login-brand h1 { font-size: 1.05rem; margin: 0; letter-spacing: -.01em; }

/* Nadpis nad poli říká, co se po uživateli chce. Bez něj je karta jen
   dvojice rámečků a název aplikace nad nimi. */
.login-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .35rem; }
.login-lead { color: var(--muted); margin: 0 0 1.5rem; font-size: .92rem; }

/* --- Chybová lišta Blazoru --- */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fef3c7;
    border-top: 1px solid var(--warn);
    padding: .7rem 1.25rem;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ---------------------------------------------------------------------------
   Pruh se spuštěním kampaně

   Stojí hned pod hlavičkou kampaně a na každé záložce, aby obsluha bez rolování
   viděla, co je další krok a kdy se kampaň spustí. Dřív bylo obojí až na konci
   jedné konkrétní záložky a uživatel to nenašel. Levý pruh kartu odliší
   od ostatních karet na stránce.
   --------------------------------------------------------------------------- */
.launch { border-left: 4px solid var(--primary); }
.launch-next { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.launch-caption { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.launch-step { font-size: 1.15rem; font-weight: 600; margin-top: .1rem; }
.launch-hint { margin: .5rem 0 0; }

/* Plánování je zásah do kampaně, ne popisek stavu - linka ho odděluje od kroku. */
.launch-plan {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
}
.launch-plan label { margin: 0 0 .25rem; }
.launch-reason { flex-basis: 100%; margin: .15rem 0 0; }

/* Krok, který je na řadě, musí jít v seznamu poznat na první pohled -
   je to jediný řádek, u kterého se dá něco udělat. */
.grid.steps { max-width: 720px; }
.grid .step-current td { background: #eff6ff; }
.grid .step-action { text-align: right; white-space: nowrap; }

/* Potvrzení stojí u tlačítka, které ho vyvolalo, ne přes celou šířku formuláře. */
.alert.confirm { margin: .75rem 0 0; }
.alert.confirm .actions { margin-top: .6rem; }

/* ---------------------------------------------------------------------------
   Mobil a tablet
//
   Postranní lišta se nenaskládá nad obsah, ale vysune se zleva přes něj.
   Naskládaná lišta zabrala celou první obrazovku a uživatel musel na každé
   stránce nejdřív odrolovat menu, aby vůbec viděl, co si otevřel.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .layout { flex-direction: column; }

    /* Přepínač zůstává v pořadí tabulátoru, jen není vidět. Kdyby se schoval
       přes display:none, menu by nešlo otevřít z klávesnice - label sám
       zaostřit nejde. pointer-events:none zajistí, že prst vždy trefí
       hamburger nad ním, ne neviditelné pole pod ním. */
    .nav-toggle {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }
    .nav-toggle:focus-visible ~ .layout .burger { outline: 2px solid #fff; outline-offset: -2px; }

    /* --- Horní pruh s tlačítkem menu --- */
    .topbar {
        display: flex;
        align-items: center;
        gap: .75rem;
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--sidebar);
        color: #fff;
        padding: .5rem .75rem;
        min-height: 3.25rem;
    }

    .topbar-title { font-size: .95rem; font-weight: 600; }

    /* Hamburger. Plocha 44x44 px je spodní hranice, kterou se dá spolehlivě
       trefit prstem - menší cíle vedou k opakovaným pokusům. */
    .burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        cursor: pointer;
        border-radius: .375rem;
        flex: 0 0 auto;
    }
    .burger span {
        display: block;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform .2s, opacity .2s;
    }
    .nav-toggle:checked ~ .layout .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked ~ .layout .burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .layout .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* --- Vysouvací lišta --- */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 270px;
        max-width: 84vw;
        flex: none;
        z-index: 70;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 2px 0 12px rgba(0,0,0,.35);
    }
    .nav-toggle:checked ~ .layout .sidebar { transform: none; }

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 60;
        background: rgba(0,0,0,.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
    }
    .nav-toggle:checked ~ .layout .nav-backdrop { opacity: 1; pointer-events: auto; }

    .nav-close {
        display: block;
        margin-left: auto;
        padding: .5rem .75rem;
        font-size: 1.1rem;
        color: #b9c5d8;
        cursor: pointer;
    }

    /* Položky menu jako dotykové cíle. */
    .nav-menu a { padding: .85rem 1.25rem; }
    .user-box { padding-bottom: 1rem; }

    /* --- Obsah --- */
    main { padding: 1rem .875rem 3rem; }
    .banner { padding: .7rem .875rem; flex-wrap: wrap; gap: .5rem; }
    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.1rem; }

    .page-header { flex-direction: column; align-items: stretch; gap: .75rem; }
    .grid-2 { grid-template-columns: 1fr; }
    .card { padding: 1rem; }
    .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .625rem; }
    .tile-value { font-size: 1.3rem; }

    /* --- Formuláře --- */
    .filters { flex-direction: column; align-items: stretch; }
    .filters .input, .filters label { width: 100%; min-width: 0; }
    .input.inline { width: 100%; }

    /* Písmo pod 16 px nutí iOS při zaostření pole stránku přiblížit
       a uživatel pak vidí useknuté rozhraní. */
    .input, select.input, textarea.input { font-size: 16px; padding: .6rem .7rem; }
    .password-field .input { padding-right: 3.1rem; }
    .password-toggle { width: 44px; }

    /* --- Tlačítka --- */
    .btn {
        min-height: 44px;
        padding: .6rem 1rem;
        font-size: .95rem;
    }
    .actions { gap: .5rem; }
    .actions .btn { flex: 1 1 10rem; justify-content: center; }
    .btn-sm { min-height: 38px; }

    /* Odkaz stylovaný jako tlačítko potřebuje také plochu na dotyk -
       v tabulkách je to jediný způsob, jak úlohu opakovat nebo zahodit. */
    .link-button { padding: .5rem 0; display: inline-block; min-height: 38px; }

    /* --- Tabulky ---
       Široké tabulky se na úzké obrazovce posouvají vodorovně uvnitř sebe.
       Bez toho by roztáhly celou stránku a vodorovně by se rolovalo úplně vše. */
    /* Na úzké obrazovce se do strany posouvá sama tabulka. Vnější obal by
       byl druhý posuvník uvnitř prvního - uživatel by musel trefit ten
       správný. */
    .tabulka-posuv { overflow-x: visible; }
    .grid {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .grid.narrow { max-width: none; }
    .grid th, .grid td { padding: .5rem .6rem; }
    .error-text { max-width: 14rem; }

    /* --- Pruh se spuštěním kampaně ---
       Tlačítko kroku i plánování jdou přes celou šířku; vedle sebe by se
       na úzké obrazovce zmáčkly na nečitelné cíle. */
    .launch-next { align-items: stretch; }
    .launch-next .btn { width: 100%; justify-content: center; }
    .launch-plan { flex-direction: column; align-items: stretch; }
    .launch-plan .btn { width: 100%; }
    .grid.steps { max-width: none; }

    /* --- Záložky --- */
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab { white-space: nowrap; min-height: 44px; }

    .pager { flex-wrap: wrap; gap: .625rem; }
    .login-card { padding: 1.5rem 1.25rem; margin: 0 .875rem; }

    /* --- Grafy ---
       Vedle sebe se na mobilu nevejdou; prstenec se zmenší, aby zbylo
       místo na legendu vedle něj. */
    .chart-row { grid-template-columns: 1fr; gap: .875rem; margin-bottom: 1rem; }
    .donut { width: 108px; height: 108px; }
    .donut-wrap { gap: 1rem; }
    .chart-head { gap: .5rem; }
    .chart-now { font-size: 1.3rem; }
    .funnel { gap: .75rem; }
}

/* Velmi úzké displeje - tlačítka v řadě už se nevejdou vedle sebe. */
@media (max-width: 420px) {
    .actions .btn { flex: 1 1 100%; }
    .tiles { grid-template-columns: 1fr 1fr; }
}

/* Uživatel má v systému vypnuté animace. */
@media (prefers-reduced-motion: reduce) {
    .sidebar, .nav-backdrop, .burger span,
    .donut-seg, .funnel-bar, .progress-fill, .tile { transition: none; }
}