/* =============================================================================
   Reklama 2.0 – základní responzivní styly
   Mobile-first, breakpointy: 768px (tablet), 1024px (desktop)
   ============================================================================= */

/* ──────── Designové konstanty (CSS variables) ────────
   Sjednocená pravidla pro všechny komponenty napříč aplikací. */
:root {
    /* Výšky interaktivních prvků – tlačítka, inputy, selekty mají stejnou výšku
       36 px, takže se hezky srovnávají v řádce (filtr bar, form actions).
       Hodnotu sjednocenou na 36 px (původně 38) – mnoho šablon hardcodovalo
       36 px, takže to bylo nekonzistentní. */
    --ctl-height: 36px;
    --ctl-height-sm: 30px;
    --ctl-radius: 6px;
    --ctl-radius-sm: 4px;
    --ctl-padding-x: 14px;
    --ctl-padding-x-sm: 10px;
    --ctl-font-size: 13px;
    --ctl-border-color: #cbd5e1;
    --ctl-border-color-hover: #94a3b8;
    --ctl-bg: #fff;
    --ctl-divider-color: #cbd5e1;     /* předělová linka v segmented switch */

    /* Akcentové barvy (laděné s topbar #1f4e79) */
    --color-primary: #1f4e79;
    --color-primary-dark: #173d5c;
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #b91c1c;
    --color-secondary: #6b7280;

    /* Filter bar – pozadí a odsazení */
    --filter-bg: #f1f5f9;
    --filter-border: #e2e8f0;
    --filter-padding: 12px 14px;
    --filter-gap: 10px;

    /* Layout (klasický browser): topbar + footer mají fixní výšku, abychom
       v .main mohli min-height počítat přes calc(100vh - var(--topbar-height)
       - var(--footer-height)) a netřásl se layout při změně obsahu. */
    --topbar-height: 44px;
    --footer-height: 49px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Pevná minimální šířka okna 320 px. Pokud uživatel zúží okno (nebo má
   skutečně extra úzký displej), pod tuto hranici se layout neslepí — místo
   toho dostane vodorovný scroll, který zachová čitelnost a kliknutelnost
   prvků. Aplikuje se na html i body, ať to platí v shellu i mimo. */
html, body { min-width: 320px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #222;
    background: #f6f7f9;
}

a { color: #1f4e79; }
a:hover { text-decoration: underline; }

.skip-link {
    position: absolute; left: -9999px; top: 0; padding: 8px 16px;
    background: #1f4e79; color: #fff; z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ----- Inactive tag – tmavě šedý obdélník s bílým "NEAKTIVNÍ" -----
   Univerzální badge zobrazený před názvem neaktivní entity v mobilních
   listech. JS ho automaticky doplní do každého řádku s data-aktivni="0"
   (viz app.js). Sjednocuje vizuální značení napříč firmy/kampaně/položky/odkazy. */
.inactive-tag {
    display: inline-block;
    background: #475569;       /* tmavě šedá (slate-600) */
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ----- Shell režim (uvnitř PWA shell iframe) -----
   Skrývá globální topbar (shell má vlastní s tab barem), ale ponechává
   levé sidemenu – uživatel chce mít hlavní nabídku vždy po ruce.
   Klik na menu link naviguje v aktuálním tabu na vybranou sekci.
   Třída .in-shell se přidává JS v layout.phtml, když window.top.__reklamaShell. */
html.in-shell .topbar { display: none; }
html.in-shell .skip-link { display: none; }
/* Footer v iframe pod shell-em nedává smysl – branding + verze prostředí
   jsou v shell-baru parent okna, opakovat to v každé iframe jen zmenšuje
   pracovní plochu (~49 px pruh dole). Skryjeme. */
html.in-shell .footer { display: none; }
/* Obsah teď nemá topbar nad sebou – zruš sticky offsetting. */
html.in-shell body { margin: 0; }
html.in-shell .main-content,
html.in-shell main { padding-top: 12px; }
/* V shell režimu jsou topbar i footer skryté → .main může mít plnou výšku
   viewportu. Bez tohoto calc nahradila stará verze (100vh - footer) bílý
   prostor dole, kde footer „byl by". */
html.in-shell .main {
    min-height: 100vh;
    min-height: 100dvh; /* dynamic viewport – respektuje URL bar v mobile */
}

/* ----- Topbar -----
   Výška je fixně vynucená přes --topbar-height (44 px), ať se layout
   nepohne, když uživatel např. zúží okno (logo text zmizí, ale header
   musí mít přesnou výšku, jinak .main { min-height } přestane sedět). */
.topbar {
    display: flex; align-items: center; gap: 12px;
    background: #1f4e79; color: #fff;
    padding: 0 16px;
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    max-height: var(--topbar-height);
    box-sizing: border-box;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* Vizuální odlišení testovacího/vývojového prostředí – vínový topbar.
   Odkazované z layout.phtml přes <body class="env-{staging|development|production}">.
   Brand text v topbaru a title stránky se v PHP rozšiřují o " TEST" suffix. */
body.env-staging .topbar,
body.env-development .topbar {
    background: #722f37;
}
.topbar .logo {
    color: #fff; font-weight: bold; font-size: 1.1rem; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
}
.topbar .logo .logo-icon { width: 32px; height: 32px; display: block; flex-shrink: 0; }
@media (max-width: 480px) {
    .topbar .logo .logo-text { display: none; }
}
.topbar .userbox { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar .user-name { font-size: .9rem; }
.topbar .badge { background: rgba(255,255,255,.2); padding: 2px 8px; border-radius: 4px; font-size: .75rem; }
/* Tlačítko nápovědy v topbaru – kruhové „?" s decentním hover. */
/* Tlačítko Zpět – sedí mezi menu-toggle a logem. Defaultně skryté, JS ho
   odkryje, jen když existuje historie pro vrácení (typicky PWA standalone,
   kde browser back chybí). Stejný vizuál jako .btn-help / .btn-logout. */
.topbar .btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    margin-right: 4px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, transform .12s;
}
.topbar .btn-back:hover {
    background: rgba(255,255,255,.28);
    transform: scale(1.06);
}
.topbar .btn-back:active { transform: scale(0.96); }
.topbar .btn-back[hidden] { display: none; }

.topbar .btn-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color .15s, transform .12s;
    margin-right: 4px;
}
.topbar .btn-help:hover {
    background: rgba(255,255,255,.28);
    transform: scale(1.06);
    color: #fff;
    text-decoration: none;
}

/* Logout je teď ikona (power switch SVG). Obal jen pro hover state, žádný
   text padding – velikost je 32×32 px. */
.topbar .btn-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    padding: 4px;
    border-radius: 50%;
    background: transparent;
    text-decoration: none;
    transition: background-color .15s, transform .12s;
}
.topbar .btn-logout svg { width: 100%; height: 100%; display: block; }
.topbar .btn-logout:hover {
    background: rgba(255,255,255,.18);
    transform: scale(1.06);
}
.topbar .btn-logout:active {
    transform: scale(0.96);
}

.menu-toggle {
    /* Tři čárky vystředěné vertikálně + horizontálně, ne nahnané k vrchu */
    display: flex;
    flex-direction: column;
    justify-content: center;     /* vystředit vertikálně, ne start */
    align-items: stretch;
    gap: 5px;
    width: 32px; height: 32px;
    padding: 6px;
    background: transparent; border: none; cursor: pointer;
    box-sizing: border-box;
    position: relative;
}
.menu-toggle span {
    display: block;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.18s ease;
    transform-origin: center center;
}
/* Stav „otevřeno" – tři čárky se přerušují/rotují do tvaru ✕.
   JS v app.js přepíná aria-expanded="true" + .is-open na tlačítku
   a .is-open na <html>/<body>, podle implementace. Selektor pokrývá
   obě varianty. */
.menu-toggle[aria-expanded="true"] span:nth-child(1),
.menu-toggle.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2),
.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3),
.menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ----- Layout ----- */
.sidemenu {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
    background: #fff; border-right: 1px solid #e0e3e7;
    transform: translateX(-100%); transition: transform .25s ease;
    overflow-y: auto; z-index: 50;
}
.sidemenu.open { transform: translateX(0); }
.menu { padding: 8px 16px 16px; }   /* zmenšen padding-top, ať první položka není daleko od topbaru */
.menu h3 { font-size: .8rem; text-transform: uppercase; color: #6b7280; margin: 16px 0 4px; }
.menu-section { list-style: none; padding: 0; margin: 0 0 16px 0; }
.menu-section li { margin: 0; }
.menu-section a {
    display: block; padding: 8px 12px; border-radius: 4px;
    color: #222; text-decoration: none;
}
.menu-section a:hover, .menu-section a.active { background: #eef2f7; }

.main {
    padding: 16px;
    /* Výška = viewport mínus topbar a footer. Obě hodnoty pocházejí z CSS
       proměnných, takže pokud někdo později změní výšku topbaru/footeru,
       layout se automaticky přepočítá. */
    min-height: calc(100vh - var(--topbar-height) - var(--footer-height));
    /* Default overflow:auto – body může rolovat, .main je jen kontejner.
       Speciální stránky (presun, wide-list) si tento default přebíjí přes
       :has() selektor v jejich vlastních media queries pro flex roll. */
    overflow: auto;
}
.footer {
    padding: 0 16px;
    text-align: center;
    color: #6b7280; background: #fff; border-top: 1px solid #e0e3e7;
    /* Stejný princip jako topbar – fixní výška z proměnné, ať .main min-height
       sedí. Border-top se započítává do height (box-sizing:border-box). */
    height: var(--footer-height);
    min-height: var(--footer-height);
    max-height: var(--footer-height);
    box-sizing: border-box;
    /* Centrovat obsah svisle (footer má jen jednu řádku textu). */
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .menu-toggle { display: none; }
    .sidemenu { transform: translateX(0); }
    .main { margin-left: 240px; }
    .footer { margin-left: 240px; }
}

/* ----- Responzivní redukce desktop topbaru a hlavního menu -----
   Pravidla platí pro klasický desktop layout (mimo PWA shell – tam je topbar
   vůbec skrytý přes html.in-shell .topbar { display: none }).

   ≤ 720 px:
     - skryjeme topbar Zpět tlačítko (Zpět je v drobečkové navigaci)
     - v sidemenu skryjeme migrační sekci a sekundární admin položky
       (Audit log, Zálohy) – mobile use case je primárně práce s daty,
       ne provoz/audit.
   480-720 px:
     - skryjeme textový brand "Reklama 2.0", ponecháme jen ikonu
   ≤ 479 px:
     - skryjeme jméno uživatele (role badge zůstává jako identifikace) */
@media (max-width: 720px) {
    .topbar #topbar-back { display: none !important; }
    /* .menu-narrow-hide je třída na položkách hlavní nabídky (partial/menu.phtml),
       která se renderuje na DVOU místech: v classic webu jako .sidemenu, v PWA
       shellu jako .shell-mobile-menu. Skrýváme v obou. */
    .sidemenu .menu-narrow-hide,
    .shell-mobile-menu .menu-narrow-hide { display: none !important; }

    /* Zrcadlové schování VŠECH odkazů na sekce, které pod 720 px nejsou v menu.
       Princip: pokud user nedosáhne do sekce z menu, neměl by tam moct skočit
       ani ze sekundárních tlačítek v tabulkách / page-headerech. Selektor cílí
       URL prefixy, takže pokrývá:
         - /presun, /presun?entita=… → Přesunout tlačítka v page-header i cell-actions
         - /admin/audit/… → Audit log linky
         - /admin/zalohy/… → Zálohy
         - /admin/migrace, /admin/shadow-*, /admin/go-mode → dev nástroje
       Tlačítka uvnitř iframe (shell režim) sedí ve stejných šablonách, takže
       pravidlo zafunguje shodně. */
    a[href^="/presun"],
    a[href^="/admin/audit"],
    a[href^="/admin/zalohy"],
    a[href^="/admin/migrace"],
    a[href^="/admin/go-mode"],
    a[href^="/admin/shadow-"] {
        display: none !important;
    }
    /* Plus formuláře s action="/presun" (= bezpečnostní guard, pokud někdo
       přesun spustil přes POST). */
    form[action^="/presun"] {
        display: none !important;
    }
}
@media (min-width: 480px) and (max-width: 720px) {
    .topbar .logo-text { display: none; }
}
@media (max-width: 479px) {
    .topbar .logo-text { display: none; }
    .topbar .userbox .user-name { display: none; }
}

/* ----- Komponenty ----- */
.content { max-width: 1200px; margin: 0 auto; }
.card { background: #fff; border: 1px solid #e0e3e7; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
.card h1, .card h2 { margin-top: 0; }
/* Datový panel (Heatmap, Top IP, Top UA, …) – obsah se táhne přes celou plochu
   karty (bez paddingu), padding má jen nadpis. Tím tabulky / grafy dosahují
   až k okrajům karty a vypadají kompaktněji. */
.data-panel { padding: 0; }
.data-panel h1, .data-panel h2 { margin: 16px; }

/* ──────── Tlačítka ──────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ctl-height);
    padding: 0 var(--ctl-padding-x);
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--ctl-radius);
    cursor: pointer;
    font-size: var(--ctl-font-size);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; text-decoration: none; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-secondary { background: var(--color-secondary); border-color: var(--color-secondary); }
.btn-secondary:hover { background: #4b5563; border-color: #4b5563; }
.btn-danger    { background: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { background: #991b1b; border-color: #991b1b; }
.btn-success   { background: var(--color-success); border-color: var(--color-success); }
.btn-success:hover { background: #15803d; border-color: #15803d; }
.btn-warning   { background: var(--color-warning); border-color: var(--color-warning); color: #fff; }
.btn-warning:hover { background: #d97706; border-color: #d97706; color: #fff; }
.btn-info      { background: #0ea5e9; border-color: #0ea5e9; }
.btn-info:hover { background: #0284c7; border-color: #0284c7; }

/* Outline varianta – bílé pozadí, barevný okraj a text */
.btn-outline {
    background: #fff;
    color: var(--color-primary);
    border-color: var(--ctl-border-color);
}
.btn-outline:hover {
    background: #f1f5f9;
    border-color: var(--ctl-border-color-hover);
    color: var(--color-primary);
}
.btn-outline-secondary { background: #fff; color: #475569; border-color: var(--ctl-border-color); }
.btn-outline-secondary:hover { background: #f1f5f9; }

.btn-sm { height: var(--ctl-height-sm); padding: 0 var(--ctl-padding-x-sm); font-size: 12px; }

/* Ikonková tlačítka v tabulkách / akčních pruzích.
   Pevná velikost čtverce, aby všechny ikony (emoji 📊, SVG QR, 🗑️ atp.)
   měly identický rozměr a vizuálně tvořily jednotnou řadu. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    box-sizing: border-box;
    vertical-align: middle;
}
.btn-icon > svg { width: 18px; height: 18px; display: block; }
/* Danger varianta ikonkového tlačítka (např. koš) – ladí s outline okolím,
   červený jen text/border, ne plný background. */
.btn-icon.btn-danger {
    background: #fff;
    color: #b91c1c;
    border: 1px solid #b91c1c;
}
.btn-icon.btn-danger:hover {
    background: #b91c1c;
    color: #fff;
}
/* Sloupec se sadou ikonkových tlačítek. Třída se POUŽÍVÁ NA VNITŘNÍM <div>,
   ne přímo na <td> – jinak by display:inline-flex přebil display:table-cell
   a buňka by měla jinou výšku než ostatní v řádku. Šablony obalují obsah
   <td>...<div class="cell-actions">tlačítka</div></td>.
   Pro zpětnou kompatibilitu, kdyby class byla aplikovaná přímo na <td>,
   přidáváme níže pravidlo, které vrátí table-cell layout. */
.cell-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.cell-actions form { display: inline-flex; margin: 0; }
.cell-actions .btn-icon { margin: 0; }

/* Backwards-compat: pokud má .cell-actions na <td>, vrátíme table-cell
   chování (jinak by td vypadl z table layoutu a měl by jinou výšku).
   Postupně migrujeme šablony na obal <div class="cell-actions"> uvnitř <td>. */
td.cell-actions {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
    text-align: right;
}
td.cell-actions > form,
td.cell-actions > a,
td.cell-actions > button {
    /* Inline-flex obal pro vnitřní obsah, ať buttons stojí v řadě */
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 4px;
    vertical-align: middle;
}
td.cell-actions > *:first-child { margin-left: 0; }
/* Podtržení emoji aby měl tooltip vizuální cue */
.btn-icon[title] { cursor: help; }

/* Logo firmy v seznamu – sloupec úzký, miniatura max 64×32, deformaci se vyhne contain. */
.firma-logo-col { width: 72px; padding: 4px 8px; vertical-align: middle; }
/* Pod 1024 px (= když mizí sidemenu a layout je „kompaktní") schováme sloupec
   s logem firmy – 72 px navíc je na úzkém viewportu nepřiměřená cena za
   ozdobnou ikonku. Logo zůstává viditelné na detailu firmy. */
@media (max-width: 1023px) {
    .firma-logo-col { display: none !important; }
}
.firma-logo-mini {
    display: block;
    max-width: 64px;
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Logo+jméno firmy v jedné buňce (kampan/list, polozka/detail apod.) */
.firma-cell { display: flex; align-items: center; gap: 8px; }
.firma-cell .firma-name { flex: 1 1 auto; min-width: 0; }
/* Pevný slot pro logo – vždy 64×32 px bez ohledu na to, jestli logo existuje.
   Když chybí, zůstane prázdná plocha (zarovnání jména firmy zůstane).
   Logo se ukládá jako background-image s contain+center, takže menší obrázek
   se vycentruje a větší se zmenší aspect-ratio safe. */
.firma-cell .firma-logo-mini {
    flex: 0 0 64px;
    width: 64px;
    height: 32px;
    max-width: none;
    max-height: none;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Klikatelný název firmy v seznamu – modrý odkaz, trvale podtržený, normální (ne tučný) řez. */
.firma-name-link {
    color: #1f4e79;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 400;
}
.firma-name-link:hover { color: #163a5b; text-decoration-thickness: 2px; }
/* Logo jako klikatelná miniatura – jemný hover */
.firma-logo-col a { display: inline-block; }
.firma-logo-col a:hover .firma-logo-mini { opacity: 0.85; }

/* Filtrovací panel nad seznamem (firmy / kampaně) – vyhledávání + chipy + počítadlo. */
.list-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 0 0 1rem 0;
    padding: 12px 14px;
    background: #f5f7fa;
    border: 1px solid #e3e7ec;
    border-radius: 6px;
}
.list-filters .filter-search { flex: 1 1 240px; min-width: 200px; }
.list-filters .filter-search input { width: 100%; }
.list-filters .filter-active { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.list-filters .filter-stats {
    margin-left: auto;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}
/* Chipy aktivních filtrů – pill style, výrazný stav „is-active“. */
.filter-chip {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}
.filter-chip.is-active {
    background: #1f4e79;
    border-color: #1f4e79;
    color: #fff;
}
.filter-chip.is-active:hover { background: #163a5b; border-color: #163a5b; color: #fff; }

/* Skryje text vizuálně, ale ponechá pro screen-reader. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Logo firmy v detailu – kompaktní zobrazení, max 240×120, vlevo. */
.logo-section {
    margin: 0 0 1rem 0;
}
.logo-section img {
    max-width: 240px;
    max-height: 120px;
    object-fit: contain;
    display: block;
}

/* Kompaktní statistický řádek (pro detail firmy / kampaně) – inline metriky. */
.stats-compact {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
    padding: 8px 14px;
    background: #f5f7fa;
    border: 1px solid #e3e7ec;
    border-radius: 6px;
    margin: 0 0 1.5rem 0;
    font-size: 14px;
    color: #4b5563;
}
.stats-compact__label { font-weight: 500; color: #374151; }
.stats-compact__item { display: inline-flex; gap: 4px; align-items: baseline; }
.stats-compact__num { font-weight: 700; color: #1f4e79; font-size: 16px; }
.stats-compact__cap { color: #6b7280; }
.stats-compact__sep { color: #d1d5db; }
.stats-compact__link {
    margin-left: 8px;
    font-size: 13px;
    text-decoration: underline;
    color: #1f4e79;
}
.stats-compact__link:hover { color: #163a5b; }

/* Drobečková navigace – pod topbarem, kompaktní, modré odkazy s separátorem. */
.breadcrumbs {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #6b7280;
}
.breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
/* Separátor breadcrumb itemů – jen JEDEN pattern, ::before na následujícím
   itemu (viz pravidlo níže na řádku ~1214). Dříve byl tady duplikát s ::after,
   což vedlo k zobrazení dvou › znaků různými odstíny šedé. */
.breadcrumbs a {
    color: #1f4e79;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
    color: #111827;
    font-weight: 500;
}

/* Tlačítko Zpět v drobečkové navigaci – přidáváno JS v app.js, ale jen
   na mobile portrait (≤ 720 px), kde se shell-back / topbar back schovává.
   Šipka ← v kruhovém boxu, sedí vedle prvního breadcrumb itemu. */
.breadcrumbs__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #1f4e79;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-right: 4px;
}
.breadcrumbs__back:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #0f172a;
}
.breadcrumbs__back:focus-visible {
    outline: 2px solid #1f4e79;
    outline-offset: 2px;
}
/* Žádný „›" separátor mezi tlačítkem Zpět a první breadcrumb položkou. */
.breadcrumbs__back-item + .breadcrumbs__item::before {
    content: none !important;
}

.form-row { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.form-row label { font-weight: 500; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="url"],
.form-row input[type="datetime-local"],
.form-row input[type="number"],
.form-row textarea,
.form-row select {
    padding: 8px 10px;
    border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 1rem; font-family: inherit;
    background: #fff;
}
.form-row textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, SFMono-Regular, monospace; }
.form-row .hint { color: #6b7280; font-size: .85rem; }
.form-row .error { color: #b91c1c; font-size: .85rem; }

.form-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* tabulky */
.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; }
.table th { background: #f3f4f6; font-weight: 600; }
.table tr:hover td { background: #fafafa; }
.table .actions { text-align: right; white-space: nowrap; }

/* na mobilech tabulku převést na karty */
@media (max-width: 767px) {
    .table.responsive thead { display: none; }
    .table.responsive tbody tr { display: block; margin-bottom: 12px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px; background: #fff; }
    .table.responsive tbody td { display: block; border: none; padding: 4px 8px; }
    .table.responsive tbody td::before { content: attr(data-label) ": "; font-weight: 600; color: #6b7280; }
}

/* flash */
.flash-list { margin-bottom: 16px; }
.flash {
    padding: 12px 16px; border-radius: 4px; margin-bottom: 8px;
    border-left: 4px solid;
}
.flash-success { background: #d1fae5; border-color: #047857; color: #064e3b; }
.flash-error   { background: #fee2e2; border-color: #b91c1c; color: #7f1d1d; }
.flash-warning { background: #fef3c7; border-color: #b45309; color: #78350f; }
.flash-info    { background: #dbeafe; border-color: #1d4ed8; color: #1e3a8a; }

/* badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: .8rem; background: #e5e7eb; }
.badge-active { background: #d1fae5; color: #065f46; }
.badge-disabled { background: #fee2e2; color: #991b1b; }
.badge-test { background: #fef3c7; color: #78350f; }
.badge-bot { background: #fde68a; color: #92400e; }
.badge-spam { background: #fecaca; color: #7f1d1d; }
.badge-human { background: #d1fae5; color: #065f46; }

/* terminálový panel pro migraci/shadow */
.console {
    background: #0b0f17; color: #d1d5db; padding: 12px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: .85rem; line-height: 1.4; min-height: 200px; max-height: 600px;
    overflow-y: auto; border-radius: 4px;
    white-space: pre-wrap; word-break: break-word;
}
.console .log-info  { color: #d1d5db; }
.console .log-warn  { color: #fbbf24; }
.console .log-err   { color: #f87171; }
.console .log-ok    { color: #34d399; }

/* drop zone pro upload */
.dropzone {
    border: 2px dashed #cbd5e1; border-radius: 6px;
    padding: 32px 16px; text-align: center;
    background: #f9fafb; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.dropzone.dragover { background: #eff6ff; border-color: #1d4ed8; }
.dropzone p { margin: 4px 0; color: #6b7280; }

/* grafy */
.chart-wrap { background: #fff; padding: 12px; border-radius: 6px; border: 1px solid #e5e7eb; margin-bottom: 16px; }
.chart-wrap h3 { margin-top: 0; }
.chart-wrap canvas { width: 100% !important; height: 320px !important; }

/* QR svg block */
.qr-preview { display: inline-block; padding: 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; }
.qr-preview svg { display: block; }

.muted { color: #6b7280; }
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }

/* drobné utilities */
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.col { flex: 1 1 280px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }

/* =============================================================================
   Polozka & Soubory & Odkazy – specifické styly
   ============================================================================= */

.container { max-width: 1200px; margin: 0 auto; }

/* Mobile (≤ 720 px) – container vyplní celou šířku, ne max 1200px se středováním.
   Defaultní max-width by na úzkém mobilu vytvářel "nudli" v středu obrazovky
   s prázdnými okraji. Plus zúžíme padding .main, ať obsah doráží blíž k okrajům. */
@media (max-width: 720px) {
    .container {
        max-width: none;
        width: 100%;
    }
    .main {
        padding: 8px;
    }
}

.page-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 24px; gap: 16px;
}
.page-header h1 { margin: 0 0 8px 0; }
.page-header .breadcrumb {
    font-size: .9rem; color: #6b7280; margin: 0;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.page-header .breadcrumb a { color: #1f4e79; }
.page-header .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* content-section – nadpisy + markdown obsah */
.content-section { background: #fff; padding: 16px; border-radius: 6px; border: 1px solid #e5e7eb; margin-bottom: 16px; }
.content-section h2 { margin-top: 0; margin-bottom: 12px; }
.markdown-content { line-height: 1.6; }
.markdown-content h1, .markdown-content h2, .markdown-content h3,
.markdown-content h4, .markdown-content h5, .markdown-content h6 { margin: 16px 0 8px 0; line-height: 1.3; }
.markdown-content h1 { font-size: 1.6rem; }
.markdown-content h2 { font-size: 1.35rem; }
.markdown-content h3 { font-size: 1.15rem; }
.markdown-content h4 { font-size: 1.05rem; }
.markdown-content h5, .markdown-content h6 { font-size: 1rem; }
.markdown-content p { margin: 8px 0; }
.markdown-content ul, .markdown-content ol { margin: 8px 0; padding-left: 24px; }
.markdown-content li { margin: 2px 0; }
.markdown-content a { color: #1f4e79; text-decoration: underline; }
.markdown-content a:hover { color: #163a5b; }

/* Inline kód a víceřádkový blok kódu – jasný kontrast tmavý text na světlém pozadí. */
.markdown-content code {
    background: #f3f4f6;
    color: #be185d;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.9em;
}
.markdown-content pre {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #1f4e79;
    padding: 12px 14px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 12px 0;
}
.markdown-content pre code {
    background: transparent;
    color: #1f2937;
    padding: 0;
    border-radius: 0;
    font-size: 0.9rem;
    display: block;
}

/* Citace – levý okraj, kurzíva, šedý text. */
.markdown-content blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 4px solid #9ca3af;
    background: #f9fafb;
    color: #4b5563;
    font-style: italic;
}
.markdown-content blockquote p { margin: 4px 0; }

/* Vodorovná čára. */
.markdown-content hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 16px 0;
}

/* Tabulky – tmavomodrý header s bílým textem (čitelné), zebra řádky. */
.markdown-content table {
    border-collapse: collapse;
    margin: 12px 0;
    width: auto;
    max-width: 100%;
}
.markdown-content table th,
.markdown-content table td {
    border: 1px solid #d1d5db;
    padding: 6px 12px;
    text-align: left;
    vertical-align: top;
}
.markdown-content table th {
    background: #1f4e79;
    color: #fff;
    font-weight: 600;
}
.markdown-content table tr:nth-child(even) td {
    background: #f9fafb;
}

/* Obrázky uvnitř markdownu – nepřetečou kontejner. */
.markdown-content img { max-width: 100%; height: auto; }

/* Task list (GitHub Flavored Markdown: `- [ ] úkol`) – odstraní bullet
   u checkbox-řádek a posune checkbox vlevo, aby řádek působil jako úkol,
   ne jako odrážka s puntíkem. */
.markdown-content li.task-list-item {
    list-style: none;
    margin-left: -1.4em;
    padding-left: 1.4em;
    position: relative;
}
.markdown-content li.task-list-item input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.35em;
    margin: 0;
    cursor: default;
}
/* Pokud celý seznam tvoří task-list-itemy, schovej puntíky úplně. */
.markdown-content ul:has(> li.task-list-item) { padding-left: 1.5rem; list-style: none; }

/* files-section – upload + tabulka */
.files-section { background: #fff; padding: 16px; border-radius: 6px; border: 1px solid #e5e7eb; margin-bottom: 16px; }
.files-section h2 { margin-top: 0; margin-bottom: 12px; }
.files-section .dropzone { margin-bottom: 16px; }
.files-section .table { margin-bottom: 0; }

/* Header s tlačítkem +Přidat – nadpis vlevo, tlačítko v pravém rohu. */
.files-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.files-section__header h2 {
    margin: 0;
}
.btn-sm {
    padding: 4px 10px;
    font-size: 13px;
}

/* Mobile (≤ 720 px) – drag&drop skrýt (na mobile nefunguje), upload jen
   přes tlačítko +Přidat. Tabulka přílohy → kartový grid 2 řádky × 3 sloupce. */
@media (max-width: 720px) {
    .files-section { padding: 12px 8px; margin: 0 0 12px 0; }
    .files-section .dropzone { display: none; }
    .files-section .table-wrap { overflow: visible; }

    .table-soubory { display: block; width: 100%; }
    .table-soubory thead { display: none; }      /* nadpisy sloupců pryč */
    .table-soubory tbody { display: block; }
    .table-soubory tbody tr {
        display: grid;
        grid-template-columns: 60px 1fr auto;
        /* 3 řádky: název (přes celé tři sloupce) / typ+velikost / rozměry,
           přičemž preview a akce spanují řádky 2+3 (vertikálně vystředěné). */
        grid-template-rows: auto auto auto;
        gap: 2px 10px;
        padding: 10px 4px;
        border-top: 1px solid #e5e7eb;            /* tenká linka nad řádkem */
        align-items: center;
    }
    .table-soubory tbody tr:last-child {
        border-bottom: 1px solid #e5e7eb;          /* zakončení posledního řádku */
    }
    .table-soubory tbody td {
        padding: 0;
        border: none;
        vertical-align: top;
        font-size: 13px;
    }
    /* 1R: název přes 3 sloupce */
    .table-soubory tbody td.soubor-nazev {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        font-weight: 500;
        color: #1f2937;
        word-break: break-word;
    }
    /* 2R+3R 1C: náhled (vertikálně vystředěný přes obě data-řádky) */
    .table-soubory tbody td.soubor-preview-col {
        grid-column: 1 / 2;
        grid-row: 2 / 4;
        align-self: center;
    }
    /* 2R 2C: typ + velikost ("PNG, 1,45 KB") */
    .table-soubory tbody td.soubor-tv {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        font-size: 12px;
        color: #6b7280;
        align-self: end;
    }
    /* 3R 2C: rozměry pod typem+velikostí */
    .table-soubory tbody td.soubor-rozmery {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        font-size: 12px;
        color: #9ca3af;
        align-self: start;
    }
    /* 2R+3R 3C: akce (svisle vystředěné) */
    .table-soubory tbody td.soubor-akce {
        grid-column: 3 / 4;
        grid-row: 2 / 4;
        align-self: center;
        text-align: right;
        white-space: nowrap;
    }
    /* Náhled obrázek/ikon – stejná velikost ~50×50 */
    .table-soubory .soubor-thumb {
        width: 50px;
        height: 50px;
    }

    /* ===== Cílové odkazy – mobile (≤ 720 px) ===== */
    /* Layout: 1R: ID (col 1) | URL+popis (col 2 span 2) | Aktivní (col 3)
                2R: ID stays | Akce (col 2-3)                                       */
    .links-section { padding: 12px 8px; margin: 0 0 12px 0; }
    .links-section .table-wrap { overflow: visible; }
    .table-odkazy { display: block; width: 100%; }
    .table-odkazy thead { display: none; }
    .table-odkazy tbody { display: block; }
    .table-odkazy tbody tr {
        display: grid;
        grid-template-columns: 60px 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px 10px;
        padding: 10px 4px;
        border-top: 1px solid #e5e7eb;
        align-items: center;
    }
    .table-odkazy tbody tr:last-child { border-bottom: 1px solid #e5e7eb; }
    .table-odkazy tbody td { padding: 0; border: none; font-size: 13px; }
    /* ID button (1R+2R 1C) – vertikálně přes oba řádky, vystředěné */
    .table-odkazy tbody td.odkaz-id-col {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        align-self: center;
        text-align: center;
    }
    .table-odkazy tbody td.odkaz-id-col .entity-id--btn {
        font-size: 16px;
        padding: 8px 10px;
    }
    /* URL/popis – řádek 1, col 2-3 (vedle Aktivní toggle by se táhl).
       Aktivní v pravém horním rohu (col 3), Akce ve 2. řádku col 2-3. */
    .table-odkazy tbody td.odkaz-url-popis {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        word-break: break-all;
    }
    .table-odkazy tbody td.col-aktivni {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        text-align: right;
    }
    .table-odkazy tbody td.actions-col {
        grid-column: 2 / 4;
        grid-row: 2 / 3;
        text-align: right;
        white-space: nowrap;
    }
    /* Mobile redukce akcí v Cílových odkazech – zůstává jen Upravit + Smazat.
       Kopírování URL / zobrazení QR / sdílení / stažení SVG jsou v QR modalu
       (otevírá se klikem na číslo v 1. sloupci). Statistiky odkazu z hlavičky
       stránky. Tato redukce se NEAPLIKUJE na desktop (> 720 px) – tam zůstává
       plný set tlačítek. */
    .table-odkazy tbody td.actions-col .action-copy,
    .table-odkazy tbody td.actions-col .action-qr,
    .table-odkazy tbody td.actions-col .action-stats,
    .table-odkazy tbody td.actions-col .action-presun {
        display: none !important;
    }
}
.empty-state { text-align: center; color: #6b7280; padding: 32px 16px; }

/* links-section – nový odkaz + tabulka */
.links-section { background: #fff; padding: 16px; border-radius: 6px; border: 1px solid #e5e7eb; margin-bottom: 16px; }
.links-section h2 { margin-top: 0; margin-bottom: 12px; }
.links-section h3 { font-size: 1rem; margin: 0 0 12px 0; }
.new-link-form { background: #f9fafb; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
.form-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.form-inline input { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 4px; }
.form-inline input[type="url"], .form-inline input[type="text"] {
    flex: 1 1 200px; min-width: 150px;
}
.form-inline button { white-space: nowrap; }

/* markdown-preview */
.markdown-preview {
    background: #f9fafb; padding: 12px;
    border: 1px solid #e5e7eb; border-radius: 4px;
    min-height: 80px;
}

/* form-standard – edit formulář */
.form-standard { background: #fff; padding: 16px; border-radius: 6px; border: 1px solid #e5e7eb; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 4px; }
.form-group .required { color: #b91c1c; }
.form-group input[type="text"],
.form-group textarea {
    width: 100%; padding: 8px 10px;
    border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 1rem; font-family: inherit;
}
.form-group textarea {
    min-height: 200px; resize: vertical;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.form-group small { display: block; color: #6b7280; font-size: .85rem; margin-top: 4px; }

.btn-outline {
    background: #fff; color: #1f4e79;
    border: 1px solid #1f4e79;
}
.btn-outline:hover { background: #eef2f7; }

.badge-info { background: #dbeafe; color: #1e3a8a; }
.badge-warning { background: #fef3c7; color: #78350f; }

/* ----- Toast UI Editor obal ----- */
.md-editor-wrap {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    min-height: 300px;
}
.md-editor-wrap .toastui-editor-defaultUI { border: none; border-radius: 4px; }
.md-editor-wrap .toastui-editor-toolbar { background: #f3f4f6; border-bottom: 1px solid #e5e7eb; }
.md-editor-wrap .toastui-editor-mode-switch { background: #f3f4f6; }
.md-editor-wrap .toastui-editor-md-container,
.md-editor-wrap .toastui-editor-ww-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.md-editor-wrap .toastui-editor-contents { font-size: 1rem; line-height: 1.6; }
.md-editor-wrap .toastui-editor-contents h1 { font-size: 1.6rem; }
.md-editor-wrap .toastui-editor-contents h2 { font-size: 1.35rem; }
.md-editor-wrap .toastui-editor-contents h3 { font-size: 1.15rem; }
.md-editor-wrap .toastui-editor-contents table { border-collapse: collapse; }
.md-editor-wrap .toastui-editor-contents table th,
.md-editor-wrap .toastui-editor-contents table td {
    border: 1px solid #e5e7eb !important;
    padding: 6px 10px !important;
    color: #1f2937 !important;          /* tmavý text – Toast UI defaultně dává #fff */
    background-color: #fff !important;
}
.md-editor-wrap .toastui-editor-contents table th {
    background: #f3f4f6 !important;
    color: #111827 !important;
    font-weight: 600 !important;
}
.md-editor-wrap .toastui-editor-contents table tr:nth-child(even) td {
    background-color: #fafbfc !important;
}

/* Code blocky uvnitř editoru – tmavý text na světlém pozadí. */
.md-editor-wrap .toastui-editor-contents pre,
.md-editor-wrap .toastui-editor-contents code {
    color: #1f2937 !important;
    background-color: #f3f4f6 !important;
}
.md-editor-wrap .toastui-editor-contents blockquote {
    border-left: 4px solid #9ca3af !important;
    color: #4b5563 !important;
    background: #f9fafb !important;
    padding: 8px 14px !important;
    font-style: italic;
}

/* Mobilní úprava – zmenšit toolbar */
@media (max-width: 767px) {
    .md-editor-wrap .toastui-editor-toolbar-icons { width: 28px; height: 28px; }
}

/* =============================================================================
   Detail položky – náhledy souborů, QR overlay, public go URL
   ============================================================================= */

/* Sloupec s miniaturou – pevná šířka a centrované thumbs. */
.table-soubory .soubor-preview-col { width: 64px; padding: 4px 8px; vertical-align: middle; text-align: center; }

/* Klikatelná miniatura souboru – obrázek nebo emoji ikona. */
.soubor-thumb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 40px;
    padding: 2px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 120ms, box-shadow 120ms;
}
.soubor-thumb:hover:not([disabled]) {
    border-color: #1f4e79;
    box-shadow: 0 0 0 2px rgba(31, 78, 121, 0.15);
}
.soubor-thumb[disabled] { cursor: not-allowed; opacity: 0.5; }
.soubor-thumb img { max-width: 50px; max-height: 36px; object-fit: contain; }
.soubor-thumb--icon .soubor-emoji { font-size: 22px; line-height: 1; }

/* Veřejná /go/ URL v tabulce odkazů – výrazná, ale ne přílišná. */
.public-go-url {
    display: inline-block;
    padding: 2px 8px;
    background: #f3f4f6;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 13px;
    color: #1f2937;
    word-break: break-all;
}

/* Zkrácená cílová URL v tabulce odkazů. */
.odkaz-target { color: #1f4e79; text-decoration: underline; word-break: break-all; }

/* Buňka URL+popis ve sloučeném sloupci – URL nahoře (link), popis pod ní (světlejší). */
.odkaz-url-popis { vertical-align: middle; }
.odkaz-url-popis .odkaz-target {
    display: block;
    word-break: break-all;
    line-height: 1.35;
}
.odkaz-url-popis .odkaz-popis {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
    word-break: break-word;
}

/* Stav „zkopírováno“ pro tlačítko 📋. */
.copy-link.is-copied {
    background: #d1fae5; border-color: #10b981; color: #065f46;
}

/* ===== Overlay pro náhledy a QR – modal s černým pozadím ===== */
.preview-overlay {
    position: fixed; inset: 0;
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.preview-overlay[hidden] { display: none; }
.preview-overlay__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.72);
}
.preview-overlay__panel {
    position: relative;
    background: #fff;
    border-radius: 8px;
    max-width: min(95vw, 1100px);
    max-height: 92vh;
    width: 100%;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.preview-overlay__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}
.preview-overlay__title {
    margin: 0; font-size: 1rem; font-weight: 600;
    color: #111827;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preview-overlay__actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.preview-overlay__custom { display: contents; }
/* Dynamicky injektovaná tlačítka (QR – Zkopírovat / Odeslat PNG / Stáhnout SVG). */
.preview-overlay__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 13px;
    white-space: nowrap;
}
.preview-overlay__action svg { flex-shrink: 0; }
.preview-overlay__action.is-copied {
    background: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}
/* Pod 720 px schováme textové labely – zůstávají jen ikony, action sheet je čistší. */
@media (max-width: 720px) {
    .preview-overlay__action-label { display: none; }
    .preview-overlay__action {
        padding: 6px;
        width: 36px;
        height: 36px;
        justify-content: center;
    }
}
.preview-overlay__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px;
    display: flex; align-items: center; justify-content: center;
    background: #1f2937;
    min-height: 240px;
}
body.has-overlay { overflow: hidden; }

/* Obsah overlay – obrázek vyplní (ale nenatahuje se nad přirozenou velikost). */
.preview-image {
    max-width: 100%; max-height: 78vh;
    object-fit: contain;
    background: repeating-conic-gradient(#1f2937 0 25%, #111827 0 50%) 0 0/24px 24px;
    border-radius: 4px;
}

/* PDF – pomocí iframe zabíráme celou plochu modalu. */
.preview-iframe {
    width: 100%;
    height: 78vh;
    border: 0;
    background: #fff;
    border-radius: 4px;
}

/* Plain text / markdown – předformátovaná oblast. */
.preview-text {
    width: 100%;
    max-height: 78vh;
    overflow: auto;
    margin: 0;
    padding: 16px 20px;
    background: #fff;
    color: #111827;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* QR – bílé pozadí, centrovaný SVG, popisek pod ním a akční řádek. */
.preview-qr {
    background: #fff;
    border-radius: 6px;
    padding: 24px;
    text-align: center;
}
.preview-qr__img {
    width: min(60vh, 400px);
    height: min(60vh, 400px);
    max-width: 100%;
}
/* Inline SVG verze – obsahuje rovnou <svg>, ne <object>. Vynucujeme fluid sizing. */
.preview-qr__img--inline { display: inline-block; }
.preview-qr__img--inline svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
}
.preview-qr__caption {
    margin: 16px 0 0 0;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 13px;
    color: #4b5563;
    word-break: break-all;
}
/* Akční řádek pod QR – kopírovat URL / sdílet PNG / stáhnout SVG / zavřít. */
.preview-qr__actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}
.preview-qr__btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.preview-qr__btn.is-copied {
    background: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}

/* QR ikona uvnitř btn-icon – aby SVG bylo zarovnané a nemělo extra padding. */
.qr-show svg { display: block; }

/* =============================================================================
   Sjednocené formulářové prvky (input, select, textarea)
   Stejná výška jako .btn, stejný radius, stejné okrajové barvy.
   ============================================================================= */
.form-control,
input[type="text"].form-control,
input[type="number"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="search"].form-control,
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="url"].form-control,
input[type="tel"].form-control,
select.form-control {
    height: var(--ctl-height);
    padding: 0 var(--ctl-padding-x);
    font-size: var(--ctl-font-size);
    line-height: 1.4;
    color: #1f2937;
    background: var(--ctl-bg);
    border: 1px solid var(--ctl-border-color);
    border-radius: var(--ctl-radius);
    box-sizing: border-box;
    transition: border-color .12s, box-shadow .12s;
    font-family: inherit;
}
textarea.form-control {
    padding: 8px var(--ctl-padding-x);
    font-size: var(--ctl-font-size);
    line-height: 1.5;
    color: #1f2937;
    background: var(--ctl-bg);
    border: 1px solid var(--ctl-border-color);
    border-radius: var(--ctl-radius);
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}
.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}
.form-control:disabled { background: #f1f5f9; cursor: not-allowed; }
.form-control.is-error { border-color: var(--color-danger); }

/* ─── File input – Native UA renderuje [tlačítko] + jméno souboru. ───
   Fixní height 38 px ho rozplácne (text & tlačítko nesedí na střed),
   takže místo height používáme min-height + padding 8 px nahoře/dole.
   Tlačítko „Zvolit soubor" stylujeme přes ::file-selector-button na
   sjednocenou modrou primary podobu, ať odpovídá .btn-primary. */
input[type="file"],
input[type="file"].form-control {
    display: block;
    width: 100%;
    min-width: 280px;
    height: auto;
    min-height: var(--ctl-height);
    padding: 8px 10px;
    font-size: var(--ctl-font-size);
    color: #1f2937;
    background: var(--ctl-bg);
    border: 1px solid var(--ctl-border-color);
    border-radius: var(--ctl-radius);
    box-sizing: border-box;
    cursor: pointer;
    line-height: 1.4;
}
input[type="file"][hidden] { display: none; }
input[type="file"]:focus,
input[type="file"].form-control:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}
input[type="file"]:disabled { background: #f1f5f9; cursor: not-allowed; }

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    height: 28px;
    margin: 0 12px 0 0;
    padding: 0 14px;
    font-size: var(--ctl-font-size);
    font-family: inherit;
    font-weight: 500;
    color: #fff;
    background: var(--color-primary);
    border: 0;
    border-radius: var(--ctl-radius-sm);
    cursor: pointer;
    transition: background .12s;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--color-primary-dark);
}
input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled::-webkit-file-upload-button {
    background: #94a3b8;
    cursor: not-allowed;
}

/* Drobný popisek nad polem */
label {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: #334155;
    margin-bottom: 4px;
}
.form-text { font-size: 12px; color: #64748b; margin-top: 4px; display: block; }
.form-group { margin-bottom: 14px; }

/* =============================================================================
   Segmented switch – třístavový přepínač (Aktivní/Test/Vypnuto, Všechny/Aktivní/Neaktivní…)
   ============================================================================= */
.seg-switch {
    display: inline-flex;
    height: var(--ctl-height);
    border: 1px solid var(--ctl-border-color);
    border-radius: var(--ctl-radius);
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}
.seg-switch button,
.seg-switch a,
.seg-switch .seg-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 14px;
    background: #fff;
    border: 0;
    border-right: 1px solid var(--ctl-divider-color);
    color: #475569;
    font-size: var(--ctl-font-size);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .12s, color .12s;
    white-space: nowrap;
}
.seg-switch button:last-child,
.seg-switch a:last-child,
.seg-switch .seg-opt:last-child { border-right: 0; }
.seg-switch button:hover,
.seg-switch a:hover,
.seg-switch .seg-opt:hover { background: #f1f5f9; color: var(--color-primary); }
.seg-switch .is-active,
.seg-switch button.is-active,
.seg-switch a.is-active {
    background: var(--color-primary);
    color: #fff;
}
/* Variantní barvy pro speciální stavy (úspěch / varování / vypnuto) */
.seg-switch .seg-opt-success.is-active { background: var(--color-success); color: #fff; }
.seg-switch .seg-opt-warning.is-active { background: var(--color-warning); color: #fff; }
.seg-switch .seg-opt-danger.is-active  { background: var(--color-secondary); color: #fff; }

/* =============================================================================
   Filter bar – sjednocená oblast pro filtry nad seznamem
   ============================================================================= */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--filter-gap);
    background: var(--filter-bg);
    border: 1px solid var(--filter-border);
    border-radius: var(--ctl-radius);
    padding: var(--filter-padding);
    margin-bottom: 14px;
}
.filter-bar > .filter-field {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    flex: 0 1 auto;
}
.filter-bar > .filter-field--grow { flex: 1 1 240px; }
.filter-bar > .filter-field > label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}
.filter-bar > .filter-field input.form-control,
.filter-bar > .filter-field select.form-control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
/* Date / time inputy: width:100% v kombinaci s nativním iOS pickerem dělá to,
   že input vystrčí celý pravý okraj přes viewport (iOS Safari ignoruje
   width:100% a vykresluje native chrome v plné šířce). Řešení převzaté
   ze /statistiky/dashboard, kde to funguje: necháme inputu jeho intrinsic
   šířku (~ obsah „rrrr-mm-dd" + calendar button) a jen omezíme strop přes
   max-width, aby nepřetekl rodiče. */
.filter-bar > .filter-field input[type="date"],
.filter-bar > .filter-field input[type="time"],
.filter-bar > .filter-field input[type="datetime-local"] {
    width: auto;
    max-width: 100%;
    min-width: 0;
}
.filter-bar > .filter-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
}
.filter-bar > .filter-stats {
    align-self: center;
    font-size: 12px;
    color: #64748b;
    flex: 1 1 auto;
    text-align: right;
    min-width: 0;
}

/* Mobile (do 720 px) – wrap a plnoplošné prvky */
@media (max-width: 720px) {
    .filter-bar { padding: 10px; }
    .filter-bar > .filter-field {
        min-width: 0;
        flex: 1 1 100%;
    }
    .filter-bar > .filter-actions {
        margin-left: 0;
        flex: 1 1 100%;
        justify-content: flex-start;
    }
    .filter-bar > .filter-stats {
        text-align: left;
        flex: 1 1 100%;
    }
    .seg-switch { width: 100%; }
    .seg-switch button,
    .seg-switch a,
    .seg-switch .seg-opt { flex: 1 1 0; }
}

/* =============================================================================
   Drobečková navigace – sjednocená napříč stránkami
   ============================================================================= */
.breadcrumbs {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: #64748b;
}
.breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
}
.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
}
.breadcrumbs__item + .breadcrumbs__item::before {
    content: '›';
    margin: 0 8px;
    color: #cbd5e1;
}
.breadcrumbs__item a {
    color: var(--color-primary);
    text-decoration: none;
}
.breadcrumbs__item a:hover { text-decoration: underline; }
.breadcrumbs__item[aria-current="page"] { color: #334155; font-weight: 500; }

/* =============================================================================
   Stránka jako card list – scrollovaná oblast pro velké seznamy
   ============================================================================= */
/* (Třídy .wide-list, .wide-list-scroll už definované výš.) */

/* =============================================================================
   Collapsible markdown popis – v detailech entit (firma/kampan/polozka)
   může být POPIS_MD víc obrazovek dlouhý. Aby pod ním zůstala vidět
   tabulka položek/odkazů a stránka šla normálně rolovat, zkrátíme dlouhý
   popis na max-height (default 200 px) s gradient overlayem a tlačítkem
   „Zobrazit více".

   Aktivuje se přes class `collapsible` na .markdown-content + data-collapse-
   threshold (volitelné). JS změří scrollHeight, pokud přesahuje, přidá
   `is-collapsed` a vyrobí tlačítko (pokud není v markupu).
   ============================================================================= */
.markdown-content.collapsible.is-collapsed {
    max-height: var(--collapse-max, 200px);
    overflow: hidden;
    position: relative;
}
.markdown-content.collapsible.is-collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 90%);
    pointer-events: none;
}
.collapse-toggle {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 14px;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--ctl-border-color);
    border-radius: var(--ctl-radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background .12s, border-color .12s;
}
.collapse-toggle:hover {
    background: #f1f5f9;
    border-color: var(--color-primary);
}
.collapse-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* =============================================================================
   Lehký horizontální scroll wrapper okolo tabulky – jen overflow-x, bez
   flex-roll mechaniky `wide-list-scroll`, takže body roluje normálně.
   Použít v detailech entit (kampan/polozka/firma) pro vnitřní tabulky.
   ============================================================================= */
.table-wrap {
    width: 100%;
    overflow-x: auto;
}
.table-wrap > table {
    min-width: 100%;
}

/* =============================================================================
   Modal – sjednocený překryvný dialog (vytvořit / upravit / potvrdit).
   Použití starší (custom modaly typu edit-link-modal):
     <div class="modal-overlay"><div class="modal">…</div></div>
   Použití novější (RModal framework):
     RModal.openForm({url, title, size, onSaved}) → vytvoří DOM dynamicky
     .modal-overlay > .modal.modal--md > .modal__header / __body / __footer
   ============================================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal {
    background: #fff;
    border-radius: var(--ctl-radius);
    padding: 1.5rem 1.75rem;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.modal h2 { margin-top: 0; margin-bottom: 1rem; color: var(--color-primary); }
.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

/* ----- RModal framework: header / body / footer ---------------------------- */
/* Strukturovaný modal – třísekční layout. Header a footer jsou sticky,
   tělo má vlastní scroll, takže pozadí stránky se neroluje. */
.modal--framework {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* body uvnitř roluje, modal sám ne */
}
.modal--sm { max-width: 420px; }
.modal--md { max-width: 640px; }
.modal--lg { max-width: 880px; }
.modal--xl { max-width: 1100px; }

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
.modal__title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-primary);
    font-weight: 600;
    line-height: 1.25;
}
.modal__close {
    background: transparent;
    border: 0;
    width: 28px;
    height: 28px;
    font-size: 1.4rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
}
.modal__close:hover { color: #111827; background: #f3f4f6; }

.modal__body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* nutné, aby flex child mohl mít vlastní scroll */
}

.modal__footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

/* Chybový banner v modalu – validační chyby ze serveru. */
.modal__error {
    margin: 0 0 0.75rem 0;
    padding: 0.6rem 0.85rem;
    border-radius: 4px;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    font-size: 0.95rem;
}
.modal__error[hidden] { display: none; }
.modal__error ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

/* Loading state – mezi otevřením modalu a načtením formu přes AJAX. */
.modal__loading {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* Body lock – když je otevřený modal, nesmí scrollovat stránka pod ním.
   JS přidává .has-modal-open na <body>. */
body.has-modal-open { overflow: hidden; }

/* =============================================================================
   Sortable header – klikací hlavička tabulky (nebo subprvek hlavičky),
   která mění ?sort= v URL. Označená šipkou (▲ asc / ▼ desc) u aktivního.
   Server-side řazení (ne JS), aby "neaktivní vždy na konci" šlo přes SQL.

   Selektor je generický (.sortable, ne th.sortable), aby šlo dělat subkľíče
   uvnitř jedné hlavičky – např. v hledání odkazů má jeden <th> dva sortable
   spany: "Firma" a "Druh" pod sebou, každý klikací zvlášť.
   ============================================================================= */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 22px;          /* prostor pro šipku vpravo */
}
th.sortable:hover { background: #eef2f7; }
th.sortable .sort-arrow {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #94a3b8;
    line-height: 1;
}

/* Subprvek hlavičky (sortable span uvnitř <th>) – inline-flex, šipka napravo
   od textu (ne absolute, protože v jednom <th> může být víc spanů pod sebou). */
.sortable--sub {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sortable--sub .sort-arrow {
    font-size: 10px;
    color: #94a3b8;
    line-height: 1;
}
.sortable--sub:hover { color: var(--color-primary, #1f4e79); }

/* Aktivní stav – ať na <th> nebo na <span class="sortable--sub"> – primary barva. */
.sortable.is-active { color: var(--color-primary, #1f4e79); }
.sortable.is-active .sort-arrow { color: var(--color-primary, #1f4e79); }

/* Highlight řádku po AJAX reloadu – modal po uložení reloadne stránku
   a app.js najde tr[data-row-id="X"] + dá .row-highlight třídu. CSS pak
   animací vybledne z žlutého pozadí do transparent ve 2 s.
   Funguje na tabulkových řádcích i na div-card položkách (např. hledat-card). */
@keyframes row-highlight-fade {
    0%   { background-color: #fef08a; }   /* žlutá – pozornost */
    20%  { background-color: #fef9c3; }
    100% { background-color: transparent; }
}
.row-highlight {
    animation: row-highlight-fade 2.2s ease-out 1;
    /* Pro tabulkové <tr> potřebujeme box-shadow inset, protože tr nepřebírá
       animaci background spolehlivě napříč prohlížeči (collapse model). */
}
tr.row-highlight > td {
    animation: row-highlight-fade 2.2s ease-out 1;
}

/* Vnitřní formulář v modalu – kompaktnější mezery, ať se vejde víc. */
.modal__body .form-group { margin-bottom: 0.85rem; }
.modal__body .form-actions { display: none; } /* footer modalu má svoje tlačítka */
.modal__body > .container,
.modal__body > div > h1 { display: none; } /* defenziva pro případ omylem vrácených wrapperů */

/* =============================================================================
   Identifikátor entity (F55, T6, K486, P970) – chip-styl v page-header__sub
   nebo v breadcrumbu. Sjednocený vzhled napříč všemi entitami.
   Konvence: prefix písmenem (F/T/K/P) + číslo bez mezery, odkaz bez prefixu.
   ============================================================================= */
.entity-id {
    display: inline-block;
    padding: 1px 6px;
    background: #e2e8f0;
    color: #1f2937;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    user-select: all;
}
.entity-id:hover { background: #cbd5e1; cursor: text; }

/* Varianta s typem entity v data-entity atributu (F/T/K/P/O).
   Místo psaní písmenka v textu („F123") oddělíme typ a ID:
       <span class="entity-id" data-entity="F">123</span>
   CSS pak písmenko vykreslí přes ::before na obarveném podkladu
   (tmavě šedý SVG obdélník překrývající jen prefix). Číslo zůstává
   v normálním šedém pozadí.

   Výhoda: vizuální konzistence napříč seznamy, snadná identifikace
   typu entity i pro lidi, co prefix neumí zpaměti, a možnost
   změnit barvy/styling globálně bez zásahu do templatů.

   Pozor: pseudoelement není v user selection, takže copy-paste
   zkopíruje jen číslo. Pro sdílení „K184" je nutné psát ručně.
   Zachováváme proto user-select: all jako u základní varianty –
   uživatel zkopíruje aspoň ID. */
.entity-id[data-entity] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M0 0h1v1h-1' fill='%236b7280' /%3E%3C/svg%3E");
    background-position: -0.7em 50%;
    background-size: 2em;
    background-repeat: no-repeat;
    /* Doleva, aby SVG pruh nepřesahoval do čísla – kompenzace
       k -0.6em background-position. */
    padding-left: 0.4em;
}
.entity-id[data-entity]::before {
    content: attr(data-entity);
    color: white;
    text-align: left;
    display: inline-block;
    width: 1.1em;
}

/* entity-id jako button (kopíruje obsah do schránky) – kliknutí kurzor pointer. */
.entity-id--btn {
    border: 0;
    cursor: copy;
    font: inherit;
}
.entity-id--btn:hover { background: #cbd5e1; }
.entity-id--btn.is-copied {
    background: #bbf7d0;
    color: #166534;
}
/* Pokud je entity-id--btn použito jako spouštěč QR modalu (sloupec Odkaz
   v tabulce table-odkazy), kliknutí už nekopíruje – přepneme kurzor na
   ukazovátko a lehce zvýrazníme. */
.entity-id--btn.qr-show {
    cursor: pointer;
    padding: 3px 10px;
    font-size: 0.95em;
}

/* Neaktivní odkaz v tabulce odkazů (polozka/detail) – ztlumený vzhled, ať
   uživatel hned vidí, který odkaz byl dočasně vypnut. Klikatelné prvky
   (ID copy, akce) zůstávají plně funkční, jen ztlumené barvy. */
tr.odkaz-neaktivni { background: #fafafa; }
tr.odkaz-neaktivni > td { opacity: 0.65; }
tr.odkaz-neaktivni:hover > td { opacity: 0.9; }

/* Univerzální ztlumení řádku po deaktivaci (společné pro firmy / kampaně /
   položky / odkazy v tabulkách). JS class přidává po toggle akci. */
tr.row-inactive { background: #fafafa; }
tr.row-inactive > td:not(.cell-actions) { opacity: 0.65; }
tr.row-inactive:hover > td:not(.cell-actions) { opacity: 0.9; }

/* Toggle tlačítko pro rychlé přepínání AKTIVNI – kruhový "A" (zelený) /
   "N" (červený). Klik triggeruje JS v app.js, který vyvolá POST a překlopí
   stav. Sjednoceno se stylem v kampan-mobile-item__flag a obecnými .badge
   ve sloupcích Aktivní napříč detail-stránkami. */
.aktivni-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: none;
    font-size: 0;            /* skryj textový obsah "✓ Aktivní" / "✖ Neaktivní" – ::after ho nahradí písmenem */
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: filter 0.12s, transform 0.12s;
    color: #fff;
    vertical-align: middle;
}
.aktivni-toggle::after {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.aktivni-toggle--on  { background: #16a34a; }    /* zelená pro Aktivní */
.aktivni-toggle--on::after  { content: "A"; }
.aktivni-toggle--off { background: #dc2626; }    /* červená pro Neaktivní */
.aktivni-toggle--off::after { content: "N"; }
.aktivni-toggle:hover { filter: brightness(1.1); transform: scale(1.05); }
.aktivni-toggle:disabled { cursor: wait; opacity: 0.6; }

/* Statický badge (pro uživatele bez EDIT práv) ve sloupci Aktivní – stejný
   vizuál jako toggle (kruh A/N), jen není klikatelný. CSS targetuje badges
   uvnitř buněk s class .col-aktivni, aby se nezamíchaly jiné badges v listu
   (např. role uživatele, počet kliků apod.). */
.col-aktivni .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;       /* skryj textový obsah "Aktivní" / "Neaktivní" */
    color: #fff;
    border: none;
    vertical-align: middle;
}
.col-aktivni .badge::after {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.col-aktivni .badge-success           { background: #16a34a; }    /* zelená pro Aktivní */
.col-aktivni .badge-success::after    { content: "A"; }
.col-aktivni .badge-secondary         { background: #dc2626; }    /* červená pro Neaktivní */
.col-aktivni .badge-secondary::after  { content: "N"; }

/* Mobile (≤ 720 px) – sloupec Aktivní úplně skryjeme, info o stavu předá
   barva celého řádku (.row-inactive pro vypnuté) a [NEAKTIVNÍ] badge před názvem. */
@media (max-width: 720px) {
    th.col-aktivni,
    td.col-aktivni {
        display: none;
    }
    /* Mobile-grouped layout (kampan/list) má vlastní kulatý flag – taky skrýt */
    .kampan-mobile-item__flag {
        display: none;
    }
    /* Tlumení neaktivního řádku – tmavošedý text na světle šedém pozadí
       (větší kontrast než dosavadní opacity 0.65, lépe čitelné na mobile). */
    tr.row-inactive,
    li.row-inactive,
    .kampan-mobile-item.row-inactive {
        background: #e5e7eb !important;
        color: #4b5563;
    }
    tr.row-inactive > td:not(.cell-actions),
    li.row-inactive {
        opacity: 1;        /* override dřívější opacity 0.65 – stačí barva pozadí */
        color: #4b5563;
    }
    tr.row-inactive a,
    li.row-inactive a,
    .kampan-mobile-item.row-inactive a {
        color: #4b5563;
    }
}

/* Veřejný /go/ odkaz se sloučeným prefixem (světlejší) a chip ID (výrazný). */
.public-go-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.85em;
}
.public-go-prefix {
    color: #94a3b8;
    font-size: 0.92em;
    user-select: all;
}

/* =============================================================================
   Page header – nadpis + akce vpravo
   ============================================================================= */
.page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.page-header h1, .page-header h2 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.page-header__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Tlačítka v page-header__actions, která prošla iconify JS-em, mají
   strukturu <span class="btn-icon-glyph"><svg/></span><span class="btn-label">…</span>.
   Pravidla:
     - Desktop (> 720 px): zobrazujeme JEN textový label, ikonu schováme.
       Tlačítka tak vypadají standardně (Bootstrap-style btn s textem).
     - Mobile (≤ 720 px): zobrazujeme JEN ikonu, text skrýt (s accessible-name
       zachováno přes aria-label / title). Tlačítka zaberají 36×36 a vejdou
       se na jednu řádku i u dlouhých page-header nadpisů. */
.btn-with-glyph {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-icon-glyph {
    /* Default = desktop: schované, ať se nepředváděla ikona vedle textu. */
    display: none;
    align-items: center;
    line-height: 0;
}
.btn-icon-glyph svg { display: block; }
.btn-with-glyph .btn-label {
    /* Default = desktop: zobrazujeme text. */
    display: inline-block;
}

/* Mobile (≤ 720 px) – přesný opak: ikona zobrazená, text skrytý ale
   přístupný pro screenreadery (aria-label / title na tlačítku zůstává). */
@media (max-width: 720px) {
    .page-header__actions .btn-with-glyph .btn-icon-glyph {
        display: inline-flex;
    }
    .page-header__actions .btn-with-glyph .btn-label {
        /* Schováme vizuálně, ale ponecháme pro screenreadery. */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .page-header__actions .btn-with-glyph {
        gap: 0;
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        /* Pozadí potlačíme – ikona má vlastní barvu, button background by
           barvu vizuálně potlačil. Necháme jen 1px rámeček, ať je button rozlišitelný. */
        background: #fff;
        border: 1px solid #d1d5db;
        color: inherit;
    }
    .page-header__actions .btn-with-glyph:hover {
        background: #f3f4f6;
    }
    .page-header__actions .btn-with-glyph .btn-icon-glyph svg {
        width: 18px;
        height: 18px;
    }
    /* Formulář-wrapped tlačítka (Smazat) – inline-form vypneme paddingy,
       ať se tlačítko nedeformuje. */
    .page-header__actions form.inline-form {
        display: inline-flex;
        margin: 0;
        padding: 0;
    }
    /* Skrýt sekundární akce, které dávají smysl jen na desktopu (Uživatelé v detailu
       firmy – samostatná podstránka spravovaná z desktopu, na úzkém zobrazení se
       čistě jen plete s primárními akcemi). */
    .page-header__actions .action-users {
        display: none;
    }
}

/* =============================================================================
   Velké seznamy – plnoplošný layout, flex-roll na vysokých obrazovkách,
   bonus akce na velkých obrazovkách, print mode. Aplikuje se přes class
   `wide-list` na hlavním wrapperu seznamu (postupně dodávané v šablonách).
   ============================================================================= */

/* Plnoplošná šířka – seznamy nejsou omezené na max-width:1200px, ať se vejde
   víc sloupců (a uživatel s velkým monitorem nemusí scrollovat horizontálně). */
.wide-list {
    max-width: none;
    padding: 0 8px;
}

.wide-list > .list-filters {
    flex-shrink: 0;             /* filtry zůstanou nahoře, neuhne k pickeru */
}

/* Tabulka uvnitř wide-list využívá celou šířku */
.wide-list table {
    width: 100%;
    border-collapse: collapse;
}

/* Bonus column pro přesun – zobrazí se jen na hodně širokých obrazovkách,
   kde je dost místa na další ikonu v akcích. Defaultně skrytá. */
.action-presun { display: none; }

@media (min-width: 1600px) {
    .action-presun { display: inline-flex; }
}

/* Flex roll na vysokých obrazovkách – stejný princip jako u presun stránky.
   Stránka se nepřelije pod footer, scrolluje se jen tělo seznamu (tbody),
   filtry a hlavička zůstávají vidět. Aplikuje se přes :has() na <main class="main">,
   která obsahuje element s class="wide-list-scroll" – ten je scroll kontainer. */
@media (min-height: 800px) {
    html:has(.wide-list-scroll),
    body:has(.wide-list-scroll) {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
        margin: 0;
    }
    body:has(.wide-list-scroll) {
        display: flex;
        flex-direction: column;
    }
    body:has(.wide-list-scroll) > .main {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    body:has(.wide-list-scroll) .wide-list {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    /* Hlavička stránky a filtry zůstávají nahoře (auto výška) */
    body:has(.wide-list-scroll) .wide-list > h1,
    body:has(.wide-list-scroll) .wide-list > .list-filters,
    body:has(.wide-list-scroll) .wide-list > .page-header {
        flex-shrink: 0;
    }
    /* Vlastní scroll kontejner s tabulkou */
    body:has(.wide-list-scroll) .wide-list-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }
    /* Sticky hlavička tabulky uvnitř scrollu */
    body:has(.wide-list-scroll) .wide-list-scroll thead th {
        position: sticky;
        top: 0;
        background: #f8fafc;
        z-index: 2;
        box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    }
}

/* =============================================================================
   Mobile fallback (≤ 720 px) – vypnout flex-roll
   =============================================================================
   Na vysoké obrazovce (min-height: 800px) výše definovaný flex-roll vytvoří
   body { overflow: hidden } a scroll deleguje na .wide-list-scroll. Problém:
   mobile-grouped layouty (např. .kampan-mobile-list) bývají MIMO .wide-list-scroll,
   takže nemají kam rolovat – content je delší než viewport, ale body to nedovolí.
   Na úzkém okně proto flex-roll zrušíme a vrátíme normální tok – tělo roluje
   přirozeně, scroll funguje bez ohledu na to, kde je obsah uvnitř .wide-list. */
@media (max-width: 720px) {
    html:has(.wide-list-scroll),
    body:has(.wide-list-scroll) {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    body:has(.wide-list-scroll) {
        display: block;
    }
    body:has(.wide-list-scroll) > .main,
    body:has(.wide-list-scroll) .wide-list,
    body:has(.wide-list-scroll) .wide-list-scroll {
        flex: none;
        min-height: 0;
        display: block;
        overflow: visible;
    }
    /* Sticky thead pod 720 px zrušit – v běžném body scrollu by se thead
       lepilo k topu okna, ale tu už nahoře sedí shell-bar / topbar. */
    body:has(.wide-list-scroll) .wide-list-scroll thead th {
        position: static;
        box-shadow: none;
    }
}

/* =============================================================================
   Print mode – tisk seznamů přes více stránek
   ============================================================================= */
@media print {
    /* Boční menu, topbar, footer – pryč */
    .topbar, .sidemenu, .footer { display: none !important; }
    .menu-toggle, .skip-link { display: none !important; }

    /* Tělo plnoplošně, žádný side margin / žádný overflow scroll */
    body {
        background: #fff !important;
        margin: 0 !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }
    .main {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

    /* Wide-list scroll vypnout – tabulka se musí rozprostřít přes
       více stránek tisku (jinak by se ořízla na výšku scroll kontejneru). */
    .wide-list,
    .wide-list-scroll {
        max-width: none !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
    }
    .wide-list-scroll thead th {
        position: static !important;   /* sticky v tisku nedává smysl;
                                          místo toho použij thead repeat (níže) */
    }
    /* Hlavička tabulky se opakuje na každé stránce tisku */
    table thead { display: table-header-group; }
    table tfoot { display: table-footer-group; }
    /* Řádky neřežeme uprostřed (Chrome/FF respektují) */
    tr, td, th { page-break-inside: avoid; }

    /* Akční sloupce – vyhodit (na tisku jsou tlačítka k ničemu) */
    .cell-actions, td.cell-actions { display: none !important; }

    /* Odkazy zůstanou modré, ale podtržení odebrat (úspora inkoustu) */
    a { color: #1f4e79 !important; text-decoration: none !important; }

    /* Karty / headery: bez stínu, bez orámování barevné výplně */
    .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* =============================================================================
   AJAX přepínač úrovně přístupu (FIRMA_UZIVATEL) – toast + loading state
   ============================================================================= */
.uroven-switch.is-loading { opacity: 0.6; pointer-events: none; }

.uroven-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 40px));
}
.uroven-toast.is-visible { opacity: 1; transform: translateY(0); }
.uroven-toast--success { background: #16a34a; }
.uroven-toast--error   { background: #dc2626; }
.uroven-toast--info    { background: #1f4e79; }