/* ==========================================================
   data.kusovykoberec.cz — jednotný vzhled
   1) designové tokeny  2) převzatý CSS reportů (postupně se
   převádí na tokeny)  3) nové komponenty (login, přepínač trhu)
   ========================================================== */

/* ============================================================
   data.kusovykoberec.cz — jednotné styly
   ZÁKLAD = designové tokeny. Žádné barvy natvrdo v komponentách,
   všechno se odkazuje na proměnné níže (pravidlo Fáze 2).
   ============================================================ */

:root {
    /* Brand mujkoberec */
    --barva-primarni:       #00937A;
    --barva-primarni-tmava: #00735E;
    --barva-zlata:          #C8972E;

    /* Neutrály */
    --barva-text:        #1c2b27;
    --barva-text-slaba:  #5f7370;
    --barva-pozadi:      #f4f6f5;
    --barva-plocha:      #ffffff;
    --barva-linka:       #dde5e2;

    /* Stavové */
    --barva-ok:      #1d8a4f;
    --barva-varovani:#c07f10;
    --barva-chyba:   #c0392b;

    /* Rozměry */
    --radius:   10px;
    --stin:     0 1px 3px rgba(16, 40, 33, .08), 0 4px 16px rgba(16, 40, 33, .06);
    --mezera-1: 8px;
    --mezera-2: 16px;
    --mezera-3: 24px;
    --mezera-4: 40px;

    /* Písmo */
    --pismo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--pismo);
    color: var(--barva-text);
    background: var(--barva-pozadi);
    font-size: 15px;
    line-height: 1.5;
}


/* ═══ PŘEVZATÝ CSS REPORTŮ (stará aplikace) ═══ */
/*
 * Bod zvratu — Apple style
 * Čistá paleta, systémové fonty, jemné stíny, dostatek whitespace.
 */

/* ================= RESET & FUNDAMENTALS ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Helvetica Neue", "Inter", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1d1d1f;
    background: #f5f5f7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; color: #1d1d1f; }
p { margin: 0; }
a { color: #007AFF; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ================= REPORTY — aktuální období + YoY ghost ================= */
/* Aktuální (rozdělaný) den / týden / měsíc — jen šedé pozadí, černý text. */
.minireport-table tr.current-period {
    background: #f0f0f3 !important;
    color: #1d1d1f;
}
.minireport-table tr.current-period td:first-child::after {
    content: ' · probíhá';
    color: #86868b;
    font-size: 11px;
    font-weight: normal;
}
/* YoY ghost mini řádek pod hlavním (jen v týdenním/měsíčním). */
.minireport-table tr.ghost-yoy {
    background: #fbfbfd;
    color: #6e6e73;
    font-size: 12px;
}
.minireport-table tr.ghost-yoy td {
    padding-top: 4px;
    padding-bottom: 4px;
    border-top: 0;
}
.ghost-arrow { color: #c7c7cc; margin-right: 4px; }
/* Mini chip pro Δ% v ghost řádku */
.cmp-chip-row {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}
.cmp-chip-row.kpi-delta-up   { background: #e8f7ec; color: #0a7d2b; }
.cmp-chip-row.kpi-delta-down { background: #ffe5e5; color: #c00; }
.cmp-chip-row.kpi-delta-flat { background: #f5f5f7; color: #86868b; }

/* ================= CRON ALERT BANNER ================= */
.cron-alert {
    background: #c00;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 60; /* nad topbarem */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.cron-alert-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
}
.cron-alert-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.cron-alert-link {
    margin-left: auto;
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}
.cron-alert-link:hover {
    color: #fff;
    text-decoration: none;
}

/* ================= TOPBAR ================= */
.topbar {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-inner {
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
/* Hamburger tlačítko — schované na desktopu */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 9px 8px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #1d1d1f;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 17px;
    color: #1d1d1f;
    text-decoration: none;
}
.logo-icon { font-size: 22px; }
.logo-img { height: 32px; width: auto; display: block; }
.logo:hover { text-decoration: none; }
.topnav {
    display: flex;
    gap: 4px;
    align-items: center;
}
.topnav a {
    padding: 8px 14px;
    border-radius: 8px;
    color: #1d1d1f;
    font-weight: 500;
    font-size: 14px;
    transition: background 0.15s;
}
.topnav a:hover {
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
}
.topnav a.active {
    background: #007AFF;
    color: white;
}
.topnav a.logout {
    color: #86868b;
    margin-left: 8px;
}

/* Oranžová tečka = položku vidí jen hlavní správce. Ostatní (i to, co je
   dostupné adminovi) zůstává bez značky — jedna tečka, jeden význam.
   Platí na samostatných odkazech (.topnav a.is-admin), na dropdown triggerech
   (.nav-group-trigger.is-admin) i uvnitř dropdownu (.nav-group-menu a.is-admin). */
.is-admin::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #FF9500;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
/* Když je položka aktivní (modré pozadí), tečka musí být kontrastní — bílá. */
.topnav a.active.is-admin::after,
.nav-group.active > .nav-group-trigger.is-admin::after,
.nav-group-menu a.active.is-admin::after {
    background: white;
}

/* ================= NAV DROPDOWN GROUPS (desktop) =================
   Skupiny „Přehledy", „Ceny", „Admin". Na desktopu je trigger tlačítko
   se šipkou ▾ a po kliknutí se rozevře menu s podpoložkami. Mobile chování
   je v @media níž (≤768px) — tam se trigger skryje a menu je rovnou rozbalené. */
.nav-group {
    position: relative;
}
.nav-group-trigger {
    background: none;
    border: 0;
    padding: 8px 14px;
    border-radius: 8px;
    color: #1d1d1f;
    font-weight: 500;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s;
}
.nav-group-trigger:hover { background: rgba(0, 0, 0, 0.05); }
.nav-group.active > .nav-group-trigger {
    background: #007AFF;
    color: white;
}
.nav-caret {
    font-size: 22px;
    line-height: 1;
    opacity: 1;
    display: inline-block;
    margin-top: -2px;        /* drobné optické zarovnání s baseline textu */
    transition: transform 0.15s;
}
.nav-group.open .nav-caret { transform: rotate(180deg); }

.nav-group-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 200px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 6px;
    z-index: 100;
    flex-direction: column;
    gap: 2px;
}
.nav-group.open > .nav-group-menu {
    display: flex;
}
.nav-group-menu a {
    padding: 8px 12px;
    border-radius: 6px;
    color: #1d1d1f;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.15s;
}
.nav-group-menu a:hover {
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
}
.nav-group-menu a.active {
    background: #007AFF;
    color: white;
}

/* Mobil — logo + hamburger v jednom řádku, menu jako rozbalovací dropdown.
   POZOR: tahle media query MUSÍ být ZA defaultem .topnav { display: flex } výš,
   jinak ji desktop default přepíše (CSS kaskáda — pozdější pravidlo vyhrává
   při stejné specifity). Toto pořadí kdokoliv mění → mobile menu se rozbije. */
@media (max-width: 768px) {
    .topbar-inner {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 10px;
    }
    .nav-toggle {
        display: flex;
        margin-left: auto; /* zarovná hamburger doprava */
    }
    /* Menu defaultně skryté, po otevření celou šířku pod logem/hamburgerem */
    .topnav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        margin-top: 4px;
    }
    .topbar.nav-open .topnav {
        display: flex;
        /* Mobile fix: rozbalené menu může mít víc položek než viewport. Bez scrollu
           by spodní položky vypadly mimo obrazovku (zvlášť při sticky topbar). */
        max-height: calc(100vh - 70px);
        max-height: calc(100dvh - 70px);  /* dvh respektuje URL bar prohlížeče */
        overflow-y: auto;
        overscroll-behavior: contain;     /* scroll uvnitř menu, ne body za ním */
        padding-bottom: 16px;             /* aby poslední položka šla úplně dolů */
        -webkit-overflow-scrolling: touch; /* iOS plynulý scroll */
    }
    .topnav a {
        padding: 12px 14px;
        border-radius: 0;
        font-size: 15px;
    }
    .topnav a.logout {
        margin-left: 0;
        margin-top: 4px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    /* Mobile: dropdown skupiny se chovají jako sekce s nadpisem (data-label),
       trigger tlačítko skryjeme a obsah ukážeme natvrdo. Uživatel vidí všechno
       najednou — žádné klikání. */
    .nav-group {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .nav-group-trigger { display: none; }
    .nav-group-menu {
        display: flex !important;
        position: static;
        flex-direction: column;
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        min-width: 0;
    }
    .nav-group-menu a {
        padding: 12px 14px 12px 26px;   /* odsazení = vizuální „indent" pod nadpisem */
        border-radius: 0;
        font-size: 15px;
    }
    .nav-group::before {
        content: attr(data-label);
        display: block;
        padding: 12px 14px 4px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #86868b;
        font-weight: 600;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        margin-top: 4px;
    }
}

/* ================= LAYOUT ================= */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 80px;
    width: 100%;
    flex: 1;
}
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
}
.page-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.page-sub {
    color: #86868b;
    font-size: 16px;
}
.page-beta-note {
    color: #b6701e;
    background: #fff4e5;
    border-left: 3px solid #ffa94d;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-style: italic;
    margin: 4px 0 18px;
    line-height: 1.5;
    max-width: 900px;
}

/* ================= CARDS ================= */
.card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
}
.card-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}
.card-sub {
    color: #86868b;
    font-size: 14px;
    margin-bottom: 16px;
}
/* Sbalitelná sekce (klikací hlavička s šipkou) */
.section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    text-align: left;
}
.section-caret {
    color: #86868b;
    font-size: 13px;
    transition: transform 0.15s;
}
.section-toggle.collapsed .section-caret { transform: rotate(-90deg); }
.section-toggle:hover .card-title { color: #0071e3; }

/* ================= CALC LAYOUT ================= */
.calc-layout {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) 2fr;
    gap: 20px;
    align-items: start;
}
.card-form { position: sticky; top: 88px; }
.results { display: flex; flex-direction: column; gap: 0; }

@media (max-width: 980px) {
    .calc-layout { grid-template-columns: 1fr; }
    .card-form { position: static; }
}

/* ================= FORMS ================= */
.form-section + .form-section {
    border-top: 1px solid #e5e5e7;
    margin-top: 24px;
    padding-top: 24px;
}
.form-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #86868b;
    margin-bottom: 14px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.field-label {
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 6px;
}

.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field textarea {
    width: 100%;
    padding: 11px 14px;
    font-size: 15px;
    font-family: inherit;
    color: #1d1d1f;
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
}
.field input:focus,
.field textarea:focus {
    outline: none;
    background: #ffffff;
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}
.field textarea { resize: vertical; min-height: 60px; }

.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1d1d1f;
    margin-bottom: 16px;
    cursor: pointer;
}
.checkbox input { width: 16px; height: 16px; accent-color: #007AFF; }

/* ================= BUTTONS ================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primary {
    background: #007AFF;
    color: white;
}
.btn-primary:hover { background: #0063cc; }
.btn-ghost {
    background: transparent;
    color: #007AFF;
    border: 1px solid #e5e5e7;
}
.btn-ghost:hover { background: #f5f5f7; }
.btn-danger { color: #ff3b30; border-color: #ffd2d0; }
.btn-danger:hover { background: #fff0f0; color: #ff3b30; }
.btn-block { width: 100%; }

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.save-status {
    margin-top: 10px;
    font-size: 13px;
    color: #86868b;
    min-height: 18px;
}
.save-status.ok { color: #0a7d2b; }
.save-status.err { color: #ff3b30; }

/* ================= LOGIN ================= */
.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    padding: 40px 20px;
    flex: 1;
}
.login-card {
    background: white;
    border-radius: 18px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 20px 60px rgba(0,0,0,0.08);
    text-align: center;
}
.login-logo { font-size: 48px; margin-bottom: 12px; }
.login-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}
.login-sub {
    color: #86868b;
    font-size: 14px;
    margin-bottom: 28px;
}
.login-form { text-align: left; }

.alert {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 16px;
}
.alert-error { background: #fff0f0; color: #c0000c; }

/* ================= CHART WRAP ================= */
.chart-wrap {
    position: relative;
    height: 300px;
    width: 100%;
    margin-top: 8px;
}
.chart-wrap canvas {
    max-height: 300px;
}
@media (min-width: 1100px) {
    .chart-wrap { height: 340px; }
    .chart-wrap canvas { max-height: 340px; }
}

/* ================= KPI GRID ================= */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.kpi-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.kpi-hl {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
    border: 1px solid rgba(0, 122, 255, 0.15);
}
.kpi-sub {
    font-size: 12px;
    color: #86868b;
    margin-top: 6px;
    font-weight: 500;
}
.card-target {
    border: 1px solid rgba(0, 122, 255, 0.2);
}

/* ================= COST KPI / BREAKDOWN ================= */
.kpi-cost {
    background: #fff8eb;
}
.kpi-cost .kpi-value { color: #b35a00; }
.kpi-total {
    background: #ffe8e6;
}
.kpi-total .kpi-value { color: #c0000c; }

.cost-breakdown {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e5e5e7;
}
.cost-breakdown summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #007AFF;
    user-select: none;
    padding: 4px 0;
}
.cost-breakdown summary:hover { color: #0063cc; }
.breakdown-list {
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}
.breakdown-list > div {
    background: #f5f5f7;
    padding: 10px 12px;
    border-radius: 8px;
}
.breakdown-list dt {
    font-size: 11px;
    color: #86868b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 3px;
}
.breakdown-list dd {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: #1d1d1f;
}

/* ================= SUM ROW (form) ================= */
.sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding: 12px 14px;
    background: #f0f7ff;
    border-radius: 10px;
    border: 1px solid rgba(0, 122, 255, 0.15);
}
.sum-label {
    font-size: 13px;
    color: #1d1d1f;
    font-weight: 500;
}
.sum-value {
    font-size: 16px;
    color: #007AFF;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.form-section-hint {
    font-size: 12px;
    color: #86868b;
    margin: -8px 0 14px;
    line-height: 1.4;
}

/* ================= SIMULATOR ================= */
.baseline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.baseline-grid select {
    width: 100%;
    padding: 11px 14px;
    font-size: 15px;
    font-family: inherit;
    color: #1d1d1f;
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: 10px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%231d1d1f' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}
.baseline-grid select:focus {
    outline: none;
    background-color: #fff;
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}

/* HEATMAPA */
.heatmap-wrap {
    margin-top: 12px;
    overflow-x: auto;
}
.heatmap-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    font-variant-numeric: tabular-nums;
}
.heatmap-table th {
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    padding: 8px 10px;
    background: transparent;
    text-align: center;
    white-space: nowrap;
}
.heatmap-table thead th { padding-bottom: 4px; }
.heatmap-table tbody th {
    text-align: right;
    background: #f5f5f7;
    border-radius: 6px;
}
.hm-corner {
    font-size: 11px !important;
    color: #86868b !important;
    text-align: right !important;
    background: transparent !important;
}
.hm-cell {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    color: #1d1d1f;
    transition: transform 0.1s, box-shadow 0.1s;
    min-width: 80px;
}
.hm-cell:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2;
    position: relative;
}
.hm-good { background: #34C759; color: white; }
.hm-ok   { background: #c3f0d0; color: #0a5e23; }
.hm-warn { background: #ffe0a3; color: #7a4500; }
.hm-bad  { background: #ffb8b3; color: #8a0008; }
.hm-current {
    outline: 3px solid #007AFF;
    outline-offset: -3px;
}
.heatmap-hint {
    font-size: 12px;
    color: #86868b;
    margin-top: 12px;
}

/* Legend */
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 4px 0 12px;
    vertical-align: middle;
}
.legend-good { background: #34C759; }
.legend-ok   { background: #c3f0d0; }
.legend-warn { background: #ffe0a3; }
.legend-bad  { background: #ffb8b3; }

/* SIM SLOUPCE */
.sim-scenarios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}
@media (max-width: 900px) {
    .sim-scenarios { grid-template-columns: 1fr; }
}
.sim-col {
    background: #f5f5f7;
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid transparent;
}
.sim-col[data-col="A"] { border-color: rgba(52, 199, 89, 0.2); }
.sim-col[data-col="B"] { border-color: rgba(0, 122, 255, 0.2); }
.sim-col[data-col="C"] { border-color: rgba(255, 149, 0, 0.2); }

.sim-name {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    background: transparent;
    border: 1px dashed transparent;
    border-radius: 6px;
    padding: 4px 8px;
    margin: -4px -8px 0;
    width: calc(100% + 16px);
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.sim-name:hover { border-color: #d2d2d7; }
.sim-name:focus {
    outline: none;
    background: white;
    border-color: #007AFF;
    border-style: solid;
}

.sim-slider-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sim-slider-row label {
    font-size: 12px;
    color: #86868b;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}
.sim-slider-row label .sim-val {
    font-weight: 700;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
}
.sim-slider-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.sim-slider-top > span {
    font-size: 12px;
    color: #86868b;
    font-weight: 500;
}
.sim-trzba-input {
    width: 130px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #1d1d1f;
    background: white;
    border: 1px solid #e5e5e7;
    border-radius: 6px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    -webkit-appearance: none;
    appearance: textfield;
}
.sim-trzba-input::-webkit-outer-spin-button,
.sim-trzba-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sim-trzba-input:focus {
    outline: none;
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.sim-slider-row input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #d2d2d7;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.sim-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #007AFF;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}
.sim-slider-row input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
.sim-slider-row input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #007AFF;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.sim-result {
    background: white;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    margin-top: 4px;
}
.sim-result-label {
    font-size: 11px;
    color: #86868b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.sim-result-value {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.sim-result-sub {
    font-size: 12px;
    color: #86868b;
    margin-top: 8px;
    line-height: 1.5;
}

.sim-winner {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
}
.sim-winner-good {
    background: #e3f7e7;
    color: #0a5e23;
}
.sim-winner-bad {
    background: #fff0f0;
    color: #8a0008;
}
.kpi {
    background: #f5f5f7;
    border-radius: 12px;
    padding: 16px;
    transition: background 0.2s;
}
.kpi-label {
    font-size: 12px;
    font-weight: 500;
    color: #86868b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.kpi-unit {
    font-size: 11px;
    color: #86868b;
    margin-top: 4px;
}

.kpi.good  .kpi-value { color: #0a7d2b; }
.kpi.warn  .kpi-value { color: #b35a00; }
.kpi.bad   .kpi-value { color: #ff3b30; }

/* ================= TOOLTIP ================= */
.tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #d2d2d7;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    cursor: help;
    position: relative;
    outline: none;
    transition: background 0.15s;
    user-select: none;
}
.tooltip:hover,
.tooltip:focus { background: #007AFF; }
.tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1d1d1f;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    width: max-content;
    max-width: 260px;
    white-space: normal;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1d1d1f;
    margin-bottom: -2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 100;
}
.tooltip:hover::after,
.tooltip:focus::after,
.tooltip:hover::before,
.tooltip:focus::before { opacity: 1; }

/* Tooltipy u posledních KPI v řadě — posunout doleva, ať nepřetékají */
.kpi:last-child .tooltip::after {
    left: auto;
    right: 0;
    transform: none;
}
.kpi:last-child .tooltip::before {
    left: auto;
    right: 2px;
    transform: none;
}

/* ================= BADGE ================= */
.badge {
    display: inline-flex;
    align-items: center;
    background: #f5f5f7;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    color: #1d1d1f;
}

/* ================= SCENARIO LOADER ================= */
.scenario-loader {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 8px 14px 8px 16px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.scenario-loader-label {
    font-size: 13px;
    color: #86868b;
    font-weight: 500;
    white-space: nowrap;
}
.scenario-loader select {
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #1d1d1f;
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%231d1d1f' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    min-width: 180px;
    font-weight: 500;
}
.scenario-loader select:hover { background-color: #ebebed; }
.scenario-loader select:focus {
    outline: none;
    background-color: white;
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}

/* ================= SCENARIOS ================= */
.scenarios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.scenario-card { margin-bottom: 0; position: relative; }
.scenario-zisk   { border-left: 4px solid #0a7d2b; }
.scenario-ztrata { border-left: 4px solid #ff3b30; }
.scenario-nula   { border-left: 4px solid #b35a00; }
.scenario-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.scenario-name {
    font-size: 17px;
    font-weight: 600;
}
.scenario-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.badge-zisk   { background: #e3f7e7; color: #0a7d2b; }
.badge-ztrata { background: #ffeded; color: #ff3b30; }
.badge-nula   { background: #fff4e0; color: #b35a00; }
.scenario-note {
    font-size: 13px;
    color: #86868b;
    margin-bottom: 14px;
    line-height: 1.4;
}
.scenario-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 16px;
}
.scenario-stats > div {
    background: #f5f5f7;
    padding: 10px 12px;
    border-radius: 8px;
}
.scenario-stats dt {
    font-size: 11px;
    color: #86868b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}
.scenario-stats dd {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.scenario-stats .highlight { color: #007AFF; font-size: 15px; }
.scenario-stats .muted { color: #86868b; font-weight: 400; }
.scenario-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid #e5e5e7;
    padding-top: 14px;
    margin-top: 4px;
}

/* ================= COMPARE TABLE ================= */
.card-compare { padding: 24px; }
.table-wrap { overflow-x: auto; }
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.compare-table th,
.compare-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #e5e5e7;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.compare-table thead th {
    font-weight: 600;
    color: #1d1d1f;
    background: #f5f5f7;
    position: sticky;
    top: 0;
}
.compare-table td:first-child,
.compare-table th:first-child {
    font-weight: 500;
    color: #86868b;
}
.compare-table tr.sep th {
    background: #e8e8ed;
    padding-top: 12px;
    padding-bottom: 8px;
    color: #1d1d1f;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.compare-table td.pos { color: #0a7d2b; font-weight: 600; }
.compare-table td.neg { color: #ff3b30; font-weight: 600; }

/* ================= EMPTY STATE ================= */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}
.empty-state p { color: #86868b; margin-bottom: 20px; font-size: 15px; }

/* ================= FOOTER ================= */
.footer {
    padding: 24px;
    text-align: center;
    color: #86868b;
    font-size: 12px;
}

/* ================= MOBILE POLISH ================= */
@media (max-width: 640px) {
    .topbar-inner { padding: 12px 16px; }
    .container { padding: 20px 16px 60px; }
    .page-title { font-size: 26px; }
    .card { padding: 18px; border-radius: 14px; }
    .login-card { padding: 28px 20px; }
    .scenario-stats { grid-template-columns: 1fr; }
}

/* ================= MINIREPORT ================= */
.minireport-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
/* Segmented control CZ / SK / CZ+SK */
.tab-buttons {
    display: inline-flex;
    background: #ececf0;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.tab-btn {
    padding: 7px 16px;
    border-radius: 8px;
    color: #1d1d1f;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, box-shadow 0.15s;
}
.tab-btn:hover:not(.active) { background: rgba(0,0,0,0.04); }
.tab-btn.active {
    background: #fff;
    color: #0a0a0a;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04);
}
.date-range {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    color: #1d1d1f;
}
.date-range input[type="date"] {
    padding: 6px 10px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 14px;
}
.minireport-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.minireport-table th, .minireport-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e5ea;
    text-align: left;
    white-space: nowrap;
}
.minireport-table th {
    background: #f5f5f7;
    font-weight: 600;
    color: #1d1d1f;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
}
.minireport-table td.num, .minireport-table th.num { text-align: right; }
.minireport-table tbody tr:hover { background: #fafafa; }
.minireport-table tfoot .total-row {
    background: #f5f5f7;
    font-weight: 600;
}
.minireport-table tfoot td { border-top: 2px solid #1d1d1f; }

/* Minireport — široká verze bez horizontálního scrollu */
.minireport-wide {
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
}
.minireport-wide .minireport-table {
    font-size: 12px;
    width: 100%;
    table-layout: auto;
}
.minireport-wide .minireport-table th,
.minireport-wide .minireport-table td {
    padding: 6px 8px;
    white-space: nowrap;
}
.minireport-wide .minireport-table th {
    font-size: 10px;
    letter-spacing: 0.02em;
}

/* Minireport: podbarvení celého řádku podle zisku po reklamě (barva přes CSS proměnnou z PHP) */
.minireport-table tr.zisk-tint td { background: var(--row-bg); }

/* Legenda barvení řádků nad tabulkou — tři pevné stupně zisku po reklamě */
.row-tint-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 12px 10px; font-size: 12px; color: #6e6e73; }
.row-tint-legend .rtl-label { font-weight: 600; }
.row-tint-legend .rtl-steps { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-tint-legend .rtl-step { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #6e6e73; }
.row-tint-legend .rtl-step i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #e5e5ea; }
.row-tint-legend .rtl-note { font-size: 11px; color: #86868b; }

.minireport-table tr.profit-neg  td { background: #ffe5e5; }
.minireport-table tr.profit-low  td { background: #fff4d6; }
.minireport-table tr.profit-ok   td { background: #fffdf0; }
.minireport-table tr.profit-good td { background: #e8f7ec; }

.minireport-table tr.profit-neg  td.profit-cell { color: #c00; font-weight: 700; }
.minireport-table tr.profit-low  td.profit-cell { color: #b6701e; font-weight: 600; }
.minireport-table tr.profit-ok   td.profit-cell { color: #5c5c1e; font-weight: 600; }
.minireport-table tr.profit-good td.profit-cell { color: #0a7d2b; font-weight: 700; }

.minireport-table tr:hover td { filter: brightness(0.97); }

/* ================= STATUS BAR (checklist nad tabulkou) ================= */
.status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    margin-bottom: 20px;
    background: #f5f5f7;
    border-radius: 10px;
    font-size: 13px;
}
.status-bar-label {
    font-weight: 600;
    color: #1d1d1f;
}
.status-bar-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    background: #fff;
    font-size: 12px;
    cursor: help;
    border: 1px solid #e5e5ea;
}
.status-badge .status-icon {
    font-weight: 700;
    font-size: 13px;
}
.status-ok { background: #e8f7ec; border-color: #b8e6c1; }
.status-ok .status-icon { color: #0a7d2b; }
/* Oranžová — u reklamních kanálů, když poslední fetch je starší než 90 min. */
.status-warn { background: #fff4e5; border-color: #ffd7a0; }
.status-warn .status-icon { color: #b6701e; }
.status-err { background: #ffe5e5; border-color: #f5b8b8; }
.status-err .status-icon { color: #c00; }
.status-none { background: #f5f5f7; color: #86868b; border-color: #e5e5ea; }
.status-none .status-icon { color: #86868b; }

/* Anomálie v buňkách */
.anomaly {
    display: inline-block;
    margin-left: 4px;
    color: #b6701e;
    font-weight: 700;
    cursor: help;
    font-size: 11px;
    padding: 1px 4px;
    border-radius: 4px;
    background: #fff4d6;
}
.anomaly:hover, .anomaly:focus {
    outline: 2px solid #b6701e;
    outline-offset: 0;
}

/* Malé písmo pro sloupec Kurz */
.minireport-table .rate-col {
    font-size: 10px;
    color: #86868b;
    font-weight: 400;
}

/* ================= QUICK BAR (předvolby + srovnání) — Apple pill styl ================= */
.quick-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 0;
    margin: 0 0 22px;
    padding: 14px 18px;
    background: #fbfbfd;
    border: 1px solid #ececf0;
    border-radius: 12px;
    font-size: 13px;
}
.quick-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 0 22px;
}
.quick-group:first-child { padding-left: 0; }
.quick-group + .quick-group {
    border-left: 1px solid #dcdce0;
}
.quick-label {
    color: #8e8e93;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 8px;
    padding-right: 4px;
    border-right: 0;
}
.quick-btn {
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #424245;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    background: transparent;
    line-height: 1.4;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.quick-btn:hover:not(.active) {
    background: rgba(0,0,0,0.04);
    color: #1d1d1f;
}
.quick-btn.active {
    background: #1d1d1f;
    color: #fff;
    border-color: #1d1d1f;
}
/* Vlastní rozsah v quick-baru — inline datumový formulář */
.quick-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.quick-date label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6e6e73;
    font-size: 11.5px;
}
.quick-date input[type="date"] {
    border: 1px solid #d2d2d7;
    border-radius: 7px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
    color: #1d1d1f;
    background: #fff;
}
.quick-date button.quick-btn {
    border: 1px solid #d2d2d7;
    cursor: pointer;
}

/* Srovnávací řádky v tfoot */
.minireport-table tfoot .compare-row td {
    background: #f5f5f7;
    color: #1d1d1f;
    font-weight: 400;
    border-top: 1px solid #e5e5ea;
}
.minireport-table tfoot .delta-row td {
    background: #fafafa;
    font-size: 12px;
    border-top: 0;
}
.delta { font-weight: 600; }
.delta-up   { color: #0a7d2b; }
.delta-down { color: #c00; }
.delta-flat { color: #86868b; }

/* ================= ADMIN — OPRÁVNĚNÍ ================= */
.perms-row td {
    background: #fbfbfd;
    padding: 18px 24px !important;
    border-top: 1px solid #e5e5ea;
    border-bottom: 1px solid #e5e5ea;
}
.perms-form { display: block; }
.perms-group {
    margin-bottom: 14px;
}
.perms-group-label {
    font-size: 11px;
    font-weight: 600;
    color: #6e6e73;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.perms-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 18px;
    margin-bottom: 4px;
    font-size: 13px;
    cursor: pointer;
}
.perms-check input { width: 16px; height: 16px; cursor: pointer; }

/* Status badge — čas poslední aktualizace */
.status-time {
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid rgba(0,0,0,0.08);
    font-size: 11px;
    color: #6e6e73;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

/* ================= HERO KPI (decentní souhrn) ================= */
.hero-kpi {
    margin-bottom: 18px;
}
.hero-kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 0 4px;
    font-size: 12px;
}
.hero-kpi-shop {
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: 0.01em;
}
.hero-kpi-period {
    color: #6e6e73;
    font-variant-numeric: tabular-nums;
}
.hero-kpi-days { color: #a1a1a6; }
.hero-kpi-cmp {
    color: #6e6e73;
    font-size: 11px;
    font-style: italic;
}

/* Sjednocený pás s tenkými oddělovači mezi dlaždicemi */
.hero-kpi .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 1px;
    background: #ececf0;
    border: 1px solid #ececf0;
    border-radius: 10px;
    overflow: hidden;
}
.hero-kpi .kpi-tile {
    background: #fff;
    border: 0;
    border-radius: 0;
    padding: 9px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 52px;
}
.hero-kpi .kpi-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6e6e73;
    font-weight: 500;
    line-height: 1;
}
.hero-kpi .kpi-value {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.hero-kpi .kpi-unit {
    font-size: 11px;
    font-weight: 500;
    color: #86868b;
    margin-left: 1px;
}
.kpi-delta {
    font-size: 11px;
    font-weight: 500;
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.kpi-delta-up   { color: #0a7d2b; }
.kpi-delta-down { color: #c00; }
.kpi-delta-flat { color: #86868b; }

/* Varovný banner (zastaralá data) */
.warning-banner {
    background: #fff4d6;
    border: 1px solid #e8cc80;
    color: #7a5e1f;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
}
.warning-banner code {
    background: #fffbea;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* ================= MOBIL — responsive úpravy ================= */
@media (max-width: 900px) {
    .minireport-wide { padding-left: 12px; padding-right: 12px; }
    .minireport-filters { gap: 12px; }
    .quick-bar { gap: 12px 18px; padding: 12px 14px; }
    .status-bar { padding: 10px 12px; gap: 10px; }
}

@media (max-width: 640px) {
    /* KPI — 2 sloupce na mobilu, stále sjednocený pás */
    .hero-kpi .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-kpi .kpi-tile { padding: 8px 10px 9px; min-height: 48px; }
    .hero-kpi .kpi-value { font-size: 14.5px; }
    .hero-kpi-header { margin-bottom: 6px; font-size: 11px; }

    /* Segmented CZ/SK/Total na plnou šířku */
    .minireport-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .tab-buttons { width: 100%; justify-content: center; }
    .tab-btn { flex: 1; justify-content: center; font-size: 12px; padding: 6px 8px; }
    .date-range {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px;
    }
    .date-range label { flex: 1; font-size: 12px; }
    .date-range input { width: 100%; }

    /* Quick bar — jedna skupina na řádek, oddělovač horizontální */
    .quick-bar { flex-direction: column; gap: 0; padding: 12px 14px; }
    .quick-group {
        width: 100%;
        padding: 10px 0 !important;
        border-left: 0 !important;
    }
    .quick-group:first-child { padding-top: 0 !important; }
    .quick-group:last-child  { padding-bottom: 0 !important; }
    .quick-group + .quick-group { border-top: 1px solid #dcdce0; }
    .quick-btn { font-size: 11.5px; padding: 4px 9px; }

    /* Status bar — menší badges */
    .status-bar { flex-direction: column; align-items: flex-start; padding: 10px 12px; }
    .status-badge { font-size: 11px; padding: 3px 8px; }
    .status-time { font-size: 10px; }

    /* Tabulka — ještě menší font, horizontální scroll zůstává */
    .minireport-wide .minireport-table {
        font-size: 11px;
    }
    .minireport-wide .minireport-table th,
    .minireport-wide .minireport-table td {
        padding: 5px 6px;
    }
    .minireport-wide .minireport-table th { font-size: 9.5px; }

    /* Page title kompaktní */
    .page-title { font-size: 22px; margin-bottom: 12px; }

    /* Karta s importní sekcí padding menší */
    .card { padding: 14px !important; }
}

@media (max-width: 400px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .kpi-value { font-size: 18px; }
}

/* ================= COLUMN HELP (otazníček v th) ================= */
.col-help {
    display: inline-flex;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #d2d2d7;
    color: #515154;
    border: 0;
    font-size: 9.5px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-left: 3px;
    vertical-align: 1px;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}
.col-help:hover, .col-help:focus {
    background: #007AFF;
    color: #fff;
    outline: none;
}

/* PNO snapshot tlačítko — emoji 📊 místo kulatého "?". Sdílí JS s .col-help. */
.pno-snap-btn {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 4px;
    font-size: 13px;
    padding: 1px 4px;
    margin-left: 4px;
    line-height: 1;
    vertical-align: middle;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.12s, background 0.12s;
}
.pno-snap-btn:hover, .pno-snap-btn:focus {
    background: #e8f1ff;
    color: inherit;
    opacity: 1;
    outline: none;
}
.help-popover table th, .help-popover table td { padding: 3px 6px; }

/* ================= HELP POPOVER (po kliknutí) ================= */
.help-popover {
    display: none;
    position: absolute;
    z-index: 1000;
    background: #1d1d1f;
    color: #f5f5f7;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 460px;
    min-width: 220px;
    /* Fallback pro velmi vysoké popovery na desktopu — interní scroll místo přetečení */
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    box-shadow: 0 12px 36px rgba(0,0,0,0.25);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.help-popover.visible { display: block; }

/* Číselné buňky v popoveru (typicky PNO timeline) nesmí zalamovat — „24,0 %" ani
   „35 440 Kč" nemá důvod jít přes dva řádky. White-space: nowrap je preferovaný
   před zužováním písma. */
.help-popover table th,
.help-popover table td { white-space: nowrap; }

/* MOBIL — bottom sheet. Když je trigger u spodního okraje stránky (např. řádek PNO
   na konci tabulky na /dnes), absolutně umístěný popover by skončil mimo viewport.
   Na mobilu ho proto přepneme na fixed pozici u spodku obrazovky, ať vždy padne
   do viewportu a má vlastní vertikální scroll. */
@media (max-width: 640px) {
    .help-popover {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;
        max-width: none;
        max-height: 70vh;
        z-index: 10000;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.45);
        -webkit-overflow-scrolling: touch;
    }
}
.help-popover strong { color: #fff; font-weight: 600; }
.help-popover .hp-source {
    margin-top: 4px;
    font-size: 11px;
    color: #9fa3a7;
}
.help-popover .hp-source strong { color: #70d6ff; }
.help-popover .hp-desc {
    margin-top: 8px;
    color: #d1d1d6;
}
.help-popover .hp-formula {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.06);
    border-left: 2px solid #70d6ff;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11.5px;
    color: #e5e5ea;
    white-space: pre-wrap;
}
.help-popover .hp-formula-label {
    display: block;
    font-family: -apple-system, sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9fa3a7;
    margin-bottom: 3px;
}

/* ================= VALIDATION (kontrola dat) ================= */
.validation-ok {
    padding: 12px 14px;
    background: #e8f7ec;
    border: 1px solid #b8e6c1;
    color: #0a6223;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 10px;
}
.validation-item {
    padding: 12px 14px;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
}
.validation-warn {
    background: #fff4d6;
    border: 1px solid #e8cc80;
    color: #7a5e1f;
}
.validation-err {
    background: #ffe5e5;
    border: 1px solid #f5b8b8;
    color: #8a1010;
}
.validation-title {
    font-weight: 600;
    margin-bottom: 4px;
}
.validation-detail { font-size: 12.5px; }
.validation-list {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 12px;
}
.validation-list li { margin-bottom: 3px; }
.validation-date {
    display: inline-block;
    margin-right: 6px;
    color: #515154;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
details summary { cursor: pointer; }
details[open] summary { margin-bottom: 4px; }

/* ================= PRODUKT FILTRY ================= */
.product-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-end;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: #fbfbfd;
    border: 1px solid #ececf0;
    border-radius: 10px;
}
.product-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: #6e6e73;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.product-filters input[type="search"],
.product-filters input[type="text"],
.product-filters select {
    padding: 7px 10px;
    border: 1px solid #d2d2d7;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #1d1d1f;
    background: #fff;
    min-height: 34px;
}
.product-filters input[type="search"] { min-width: 240px; }
.product-filters select { min-width: 180px; cursor: pointer; }
.product-filters .btn { min-height: 34px; padding: 0 16px; }
@media (max-width: 640px) {
    .product-filters label { flex: 1 1 100%; }
    .product-filters input, .product-filters select { width: 100%; }
}

/* ================= TOGGLE REKLAMNÍ DETAIL (chevron v <th>) ================= */
.minireport-table th.has-toggle { white-space: nowrap; }
.toggle-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 22px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid #1d1d1f;
    border-radius: 14px;
    background: #1d1d1f;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    vertical-align: middle;
    transition: background 0.12s, border-color 0.12s;
}
.toggle-chevron:hover { background: #424245; border-color: #424245; }
.toggle-chevron[aria-expanded="true"] { background: #424245; border-color: #424245; }

/* Skrýt reklamní detail sloupce když je tabulka collapsed */
.minireport-table.ads-detail-hidden .ads-channel-col {
    display: none;
}

/* ================= PAGE HEADER (h1 + shop segmented) ================= */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.page-header .page-title { margin: 0; }

/* Hlavička stránky, která má vpravo vlastní ovládání (např. odkaz „Administrace").
   Na desktopu tam plave globální přepínač trhu (fixed, pravý horní roh), takže se
   celá hlavička posune níž — jinak by se prvky překryly. Mobil přepínač plovoucí
   nemá (je v menu), proto se tam nic neposouvá. */
@media (min-width: 769px) {
    .page-header.s-pravym-ovladanim { padding-top: 28px; }
}

/* ================= DATE BAR (presety + vlastní rozsah v jedné liště) ================= */
.date-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: #fbfbfd;
    border: 1px solid #ececf0;
    border-radius: 12px;
    font-size: 13px;
}
.date-presets {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-right: 18px;
    border-right: 1px solid #dcdce0;
}
/* Sjednocený pilulkový styl — date-presets, cmp-chip, OK tlačítko */
.date-preset-btn {
    padding: 5px 14px;
    border: 1px solid #d2d2d7;
    border-radius: 16px;
    color: #424245;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    background: #fff;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.date-preset-btn:hover:not(.active) {
    background: #f5f5f7;
    color: #1d1d1f;
}
.date-preset-btn.active {
    background: #1d1d1f;
    color: #fff;
    border-color: #1d1d1f;
}
.date-custom {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.date-custom label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6e6e73;
    font-weight: 500;
}
.date-custom input[type="date"] {
    padding: 5px 8px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 12.5px;
    color: #1d1d1f;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", sans-serif;
    font-variant-numeric: tabular-nums;
}
/* Výběr v liště období (Bestsellery: týden, typ produktu) — stejná výška
   i rámeček jako políčka s datem, ať prvky v jedné řadě neposkakují. */
.date-custom select {
    padding: 5px 8px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 12.5px;
    color: #1d1d1f;
    background: #fff;
    font-family: inherit;
    line-height: 1.4;
}
.date-custom .btn,
.date-custom button[type="submit"] {
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 16px;
    border: 1px solid #1d1d1f;
    background: #1d1d1f;
    color: #fff;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.12s, border-color 0.12s;
    font-family: inherit;
    box-shadow: none;
}
.date-custom .btn:hover,
.date-custom button[type="submit"]:hover {
    background: #424245;
    border-color: #424245;
}

/* KPI sublabel (produktová / celková) */
.kpi-label .kpi-sublabel {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 10px;
    color: #a1a1a6;
    margin-left: 2px;
}

/* Mobil: date-bar vertikálně */
@media (max-width: 640px) {
    .date-bar { gap: 10px 0; flex-direction: column; align-items: stretch; padding: 10px 12px; }
    .date-presets {
        width: 100%;
        padding: 0 0 10px;
        border-right: 0;
        border-bottom: 1px solid #dcdce0;
    }
    .date-custom { width: 100%; }
    .date-custom label { flex: 1; font-size: 11px; }
    .date-custom input { flex: 1; width: 100%; }
}

/* Srovnání v hero-kpi — chip-style toggle mezi nadpisem a KPI dlaždicemi */
.hero-kpi-compare {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-bottom: 10px;
    padding: 0 4px;
}
.hero-kpi-compare-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #8e8e93;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 6px;
}
.cmp-chip {
    padding: 4px 11px;
    border: 1px solid #d2d2d7;
    border-radius: 14px;
    font-size: 11.5px;
    color: #424245;
    text-decoration: none;
    background: #fff;
    font-weight: 500;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cmp-chip:hover:not(.active) { background: #f5f5f7; color: #1d1d1f; }
.cmp-chip.active {
    background: #1d1d1f;
    color: #fff;
    border-color: #1d1d1f;
}

/* ================= INTEGRITY BANNER (decentní řádek pod status-bar) ================= */
.data-integrity-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    margin: -6px 0 14px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    transition: opacity 0.12s;
}
.data-integrity-banner:hover { opacity: 0.7; }
.integrity-ok   { color: #0a7d2b; }
.integrity-warn { color: #b6701e; }
.integrity-err  { color: #c00; }
.integrity-arrow {
    font-size: 10px;
    opacity: 0.55;
    transition: transform 0.15s;
}
.data-integrity-banner:hover .integrity-arrow { transform: translateY(2px); }

/* ================= CHECK LIST (detailní kontrola dat) ================= */
.check-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 6px 14px;
}
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.4;
}
.check-list .check-icon {
    font-weight: 700;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.check-list .check-ok   { background: #f3faf5; color: #1d3d26; }
.check-list .check-ok .check-icon   { color: #0a7d2b; }
.check-list .check-warn { background: #fffaee; color: #4a3a10; }
.check-list .check-warn .check-icon { color: #b6701e; }
.check-list .check-err  { background: #fef4f4; color: #5e1010; }
.check-list .check-err .check-icon  { color: #c00; }

/* Link "(dokumentace)" za nadpisem */
.doc-link {
    font-size: 13px;
    font-weight: 400;
    color: #007AFF;
    text-decoration: none;
    margin-left: 6px;
    vertical-align: middle;
}
.doc-link:hover { text-decoration: underline; }

/* Odkaz „Administrace" vpravo v hlavičce stránky (jen pro admina).
   Decentní, aby nekonkuroval nadpisu — vstup do správy dané stránky. */
.page-admin-link {
    font-size: 13px;
    font-weight: 500;
    color: #86868b;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid #e3e3e6;
    border-radius: 8px;
    background: #fff;
    white-space: nowrap;
}
.page-admin-link:hover { color: #1d1d1f; border-color: #c9c9ce; }

/* ═══ NOVÉ KOMPONENTY ═══ */
/* ---------- Přihlašovací obrazovka ---------- */
.login-scena {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--mezera-3);
}

.login-karta {
    width: 100%;
    max-width: 380px;
    background: var(--barva-plocha);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    padding: var(--mezera-4);
}

.login-karta h1 {
    margin: 0 0 4px;
    font-size: 22px;
}

.login-karta .podtitul {
    margin: 0 0 var(--mezera-3);
    color: var(--barva-text-slaba);
    font-size: 13px;
}

.pole { margin-bottom: var(--mezera-2); }

.pole label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.pole input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--barva-linka);
    border-radius: calc(var(--radius) - 4px);
    font: inherit;
}

.pole input:focus {
    outline: 2px solid var(--barva-primarni);
    outline-offset: 0;
    border-color: var(--barva-primarni);
}

.tlacitko {
    display: inline-block;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: calc(var(--radius) - 4px);
    background: var(--barva-primarni);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tlacitko:hover { background: var(--barva-primarni-tmava); }

.hlaska-chyba {
    background: color-mix(in srgb, var(--barva-chyba) 10%, white);
    color: var(--barva-chyba);
    border-radius: calc(var(--radius) - 4px);
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: var(--mezera-2);
}

/* ---------- Kostra přihlášené aplikace (zatím minimum) ---------- */
.horni-lista {
    background: var(--barva-plocha);
    border-bottom: 1px solid var(--barva-linka);
    padding: 10px var(--mezera-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.horni-lista .logo { font-weight: 700; color: var(--barva-primarni-tmava); text-decoration: none; }

.obsah { max-width: 1200px; margin: 0 auto; padding: var(--mezera-3); }

.karta {
    background: var(--barva-plocha);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    padding: var(--mezera-3);
    margin-bottom: var(--mezera-2);
}

.odkaz-tichy { color: var(--barva-text-slaba); text-decoration: none; font-size: 13px; }
.odkaz-tichy:hover { color: var(--barva-text); }

/* ---------- Globální přepínač trhu (vpravo nahoře, všude stejně) ---------- */
.trh-prepinac {
    display: inline-flex;
    border: 1px solid var(--barva-linka);
    border-radius: 999px;
    overflow: hidden;
    margin-right: 14px;
    vertical-align: middle;
}
.trh-prepinac a {
    padding: 4px 12px;
    font-size: 13px;
    text-decoration: none;
    color: var(--barva-text-slaba);
    border-bottom: none;
}
.trh-prepinac a.aktivni {
    background: var(--barva-primarni);
    color: #fff;
    font-weight: 600;
}
.trh-prepinac a:hover:not(.aktivni) { background: var(--barva-pozadi); }

/* ---------- Správa uživatelů (admin) ---------- */
.hlaska-ok {
    background: color-mix(in srgb, var(--barva-ok) 12%, white);
    color: var(--barva-ok);
    border-radius: calc(var(--radius) - 4px);
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: var(--mezera-2);
}
.uzivatel-blok {
    border: 1px solid var(--barva-linka);
    border-radius: var(--radius);
    padding: var(--mezera-2);
    margin-bottom: var(--mezera-2);
}
.uzivatel-radek { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uzivatel-akce { margin-left: auto; display: flex; gap: 6px; }
.stitek {
    font-size: 12px; padding: 2px 8px; border-radius: 20px;
    background: var(--barva-pozadi); border: 1px solid var(--barva-linka);
}
.stitek-admin { background: color-mix(in srgb, var(--barva-primarni) 12%, white); color: var(--barva-primarni-tmava); border-color: var(--barva-primarni); }
.tl-maly {
    font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer;
    border: 1px solid var(--barva-linka); border-radius: 16px; background: var(--barva-plocha);
}
.tl-maly:hover { border-color: var(--barva-primarni); color: var(--barva-primarni-tmava); }
.tl-nebezpecny { color: var(--barva-chyba); border-color: color-mix(in srgb, var(--barva-chyba) 40%, white); }
.tl-nebezpecny:hover { border-color: var(--barva-chyba); color: var(--barva-chyba); }
.prava-form { margin-top: var(--mezera-2); border-top: 1px dashed var(--barva-linka); padding-top: var(--mezera-2); }
.prava-sloupce { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--mezera-3); }
.prava-sloupce h4 { margin: 0 0 8px; font-size: 13px; color: var(--barva-text-slaba); text-transform: uppercase; letter-spacing: .04em; }
.prava-polozka { display: block; font-size: 14px; margin-bottom: 4px; cursor: pointer; }

/* ============================================================
   MENU VLEVO (desktop) — v2: oddělené sekce, měnitelná šířka (tažením
   za pravou hranu), skrývání (⟨ / ☰), přepínač trhu plovoucí vpravo
   nahoře. Mobil (≤768 px) zůstává: horní lišta + hamburger.
   ============================================================ */
:root { --sidebar-w: 240px; }

#sidebar-uchyt, #sidebar-schovat, #sidebar-otevrit, .trh-plovouci { display: none; }

@media (min-width: 769px) {
    body { padding-left: var(--sidebar-w); transition: padding-left .15s ease; }

    .topbar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: var(--sidebar-w);
        border-bottom: none;
        border-right: 1px solid var(--barva-linka);
        overflow-y: auto;
        z-index: 100;
        transition: transform .15s ease, width .0s;
    }
    .topbar-inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: 100%;
        padding: 14px 12px;
        gap: 8px;
    }

    /* Logo nesmí přetékat šířku menu */
    .logo { padding: 0 6px 4px; overflow: hidden; }
    .logo img, .logo-img { max-width: 100%; height: 28px; width: auto; object-fit: contain; object-position: left center; }

    .topnav {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        flex: 1;
        width: 100%;
    }
    .topnav > a { display: block; }

    /* ── Oddělené sekce ──────────────────────────────────────── */
    .nav-group {
        width: 100%;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--barva-linka);
    }
    .nav-group::before {
        content: attr(data-label);
        display: block;
        padding: 0 12px 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--barva-text-slaba);
    }
    .nav-group-trigger { display: none; }
    .nav-group-menu {
        display: flex !important;
        position: static;
        flex-direction: column;
        gap: 2px;
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        min-width: 0;
    }
    .nav-group-menu a { border-radius: 8px; }

    /* Trh v menu na desktopu NENÍ (přání Pavla) — je plovoucí vpravo nahoře */
    .trh-v-menu { display: none; }
    .trh-plovouci {
        display: inline-flex;
        position: fixed;
        top: 12px;
        right: 20px;
        z-index: 95;
        background: var(--barva-plocha);
        border: 1px solid var(--barva-linka);
        border-radius: 22px;
        padding: 3px;
        box-shadow: var(--stin);
        gap: 2px;
    }
    .trh-plovouci a {
        padding: 6px 14px;
        border-radius: 18px;
        font-size: 13px;
        font-weight: 600;
        color: var(--barva-text);
        text-decoration: none;
    }
    .trh-plovouci a:hover { background: var(--barva-pozadi); }
    .trh-plovouci a.aktivni { background: var(--barva-primarni); color: #fff; }
    /* obsah stránek nepodlézat pod plovoucí přepínač */
    .obsah { padding-top: 56px; }

    /* Spodek menu: 2FA + odhlásit */
    .topnav a.logout { margin: auto 0 0; text-align: center; }

    /* ── Úchyt pro změnu šířky ───────────────────────────────── */
    #sidebar-uchyt {
        display: block;
        position: fixed;
        top: 0; bottom: 0;
        left: calc(var(--sidebar-w) - 3px);
        width: 7px;
        cursor: col-resize;
        z-index: 110;
    }
    #sidebar-uchyt:hover { background: color-mix(in srgb, var(--barva-primarni) 25%, transparent); }

    /* ── Skrytí / zobrazení ──────────────────────────────────── */
    #sidebar-schovat {
        display: block;
        position: absolute;
        top: 10px; right: 8px;
        border: 1px solid var(--barva-linka);
        background: var(--barva-plocha);
        border-radius: 8px;
        width: 26px; height: 26px;
        cursor: pointer;
        font: inherit;
        color: var(--barva-text-slaba);
        line-height: 1;
    }
    #sidebar-schovat:hover { color: var(--barva-text); border-color: var(--barva-primarni); }
    #sidebar-otevrit {
        position: fixed;
        top: 10px; left: 10px;
        z-index: 120;
        border: 1px solid var(--barva-linka);
        background: var(--barva-plocha);
        border-radius: 8px;
        width: 34px; height: 34px;
        cursor: pointer;
        font-size: 16px;
        box-shadow: var(--stin);
    }
    html.sidebar-skryty body { padding-left: 0; }
    html.sidebar-skryty .topbar { transform: translateX(-100%); }
    html.sidebar-skryty #sidebar-uchyt { display: none; }
    html.sidebar-skryty #sidebar-otevrit { display: block; }
    html.sidebar-skryty .cron-alert { margin-left: 0; }

    .cron-alert { margin-left: var(--sidebar-w); }
}

/* ============================================================
   SIDEBAR v3 — tmavý styl po vzoru Samba (přání Pavla 5. 8.):
   bílý pruh s logem a tlačítkem „Sbalit" nahoře, tmavé tělo menu,
   tlumené nadpisy sekcí, aktivní položka = světlá pilulka.
   ============================================================ */
@media (min-width: 769px) {
    :root {
        --menu-tmave:       #16211e;                  /* tmavá brand zeleno-černá */
        --menu-text:        #d9e2e0;
        --menu-text-slaby:  #869b95;
        --menu-hover:       rgba(255, 255, 255, .07);
        --menu-aktivni:     rgba(255, 255, 255, .16);
        --menu-linka:       rgba(255, 255, 255, .09);
    }

    .topbar {
        background: var(--menu-tmave);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-right: 1px solid var(--menu-tmave);
    }
    .topbar-inner { padding: 0 0 14px; gap: 0; }

    /* Bílý pruh s logem nahoře (jako Samba) */
    .logo {
        background: #fff;
        margin: 0;
        padding: 14px 44px 12px 16px;   /* vpravo místo pro tlačítko Sbalit */
        border-bottom: 1px solid var(--barva-linka);
    }

    /* Sbalit — textové tlačítko v bílém pruhu */
    #sidebar-schovat {
        top: 14px; right: 10px;
        width: auto; height: auto;
        padding: 4px 10px;
        border: 1px solid var(--barva-linka);
        border-radius: 14px;
        background: #fff;
        color: var(--barva-text-slaba);
        font-size: 12px;
    }

    .topnav { padding: 10px 10px 0; }

    .topbar .topnav a {
        color: var(--menu-text);
        font-weight: 400;
    }
    .topbar .topnav a:hover { background: var(--menu-hover); }
    .topbar .topnav a.active,
    .topbar .nav-group-menu a.active {
        background: var(--menu-aktivni);
        color: #fff;
        font-weight: 600;
    }

    .nav-group { border-top: 1px solid var(--menu-linka); }
    .nav-group::before { color: var(--menu-text-slaby); }

    .topbar .topnav a.logout { color: var(--menu-text-slaby); }
    .topbar .topnav a.logout:hover { color: var(--menu-text); background: none; }
    .topbar .odkaz-tichy { color: var(--menu-text-slaby); }

    /* Oranžová admin tečka ať na tmavé svítí decentně dál */
    .topbar .nav-group-menu a.is-admin { color: var(--menu-text); }
}

/* ============================================================
   SIDEBAR v4 — sbalitelné sekce s klikacím nadpisem (větší písmo).
   Nadpis sekce = .nav-group-trigger (na desktopu viditelný a klikací).
   ============================================================ */
@media (min-width: 769px) {
    .nav-group::before { display: none; }   /* nadpis dělá trigger, ne ::before */

    .topbar .nav-group-trigger {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        background: none;
        border: 0;
        cursor: pointer;
        padding: 10px 12px 5px;
        font-family: inherit;
        font-size: 13px;              /* větší nadpis sekce (bývalo 11px) */
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--menu-text-slaby);
    }
    .topbar .nav-group-trigger:hover { color: var(--menu-text); background: none; }
    .topbar .nav-caret {
        font-size: 10px;
        transition: transform .15s ease;
        transform: none;
    }
    .topbar .nav-group.sbalena .nav-caret { transform: rotate(-90deg); }
    .topbar .nav-group.sbalena .nav-group-menu { display: none !important; }
}

/* SIDEBAR v5 — větší písmo položek, klidné nadpisy (bez hover změny),
   sbalení = jen šipka na konci řádku */
@media (min-width: 769px) {
    .topbar .topnav a { font-size: 15px; padding: 9px 12px; }
    .topbar .nav-group-trigger { font-size: 13.5px; }
    .topbar .nav-group-trigger:hover { color: var(--menu-text-slaby); }  /* žádná změna na hover */
    .topbar .nav-caret { margin-left: auto; opacity: .8; }
}

/* SIDEBAR v6 — výrazná šipka sbalování.
   Pozn.: 5. 8. byly tečky vypnuté úplně, protože je měly všechny admin položky
   a bylo jich v menu moc. Od 11. 8. mají jiný, užší význam — nosí je jen to,
   co vidí výhradně hlavní správce (Integrace, Logování, pracovní stránky),
   takže jsou zpátky zapnuté. */
@media (min-width: 769px) {
    .topbar .nav-caret {
        font-size: 17px;
        line-height: 1;
        opacity: 1;
        color: var(--menu-text);
    }
}

/* SIDEBAR v7 — nadpis sekce bez modrého zvýraznění (i když je sekce aktivní);
   výraznější oddělení sekcí (větší mezera + zřetelnější linka) */
@media (min-width: 769px) {
    .topbar .nav-group.active > .nav-group-trigger,
    .topbar .nav-group.active > .nav-group-trigger:hover {
        background: none;
        color: var(--menu-text-slaby);
        box-shadow: none;
    }
    .nav-group {
        margin-top: 22px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .16);
    }
}

/* SIDEBAR v8 — bez loga v hlavičce menu; zůstává jen tlačítko Sbalit */
@media (min-width: 769px) {
    .logo { display: none; }
    .topbar-inner { padding-top: 46px; }   /* místo pro tlačítko Sbalit nahoře */
    #sidebar-schovat {
        background: none;
        border-color: rgba(255, 255, 255, .25);
        color: var(--menu-text-slaby);
    }
    #sidebar-schovat:hover { color: var(--menu-text); border-color: rgba(255, 255, 255, .5); }
}


/* ═══════════════════════════════════════════════════════════
   MASKOT ALADIN
   Dekorace na místech BEZ dat: přihlášení, patička, prázdné
   stavy, hlavička domovské stránky. Maskot nikdy neleží přes
   tabulku ani graf — všechny varianty jsou v toku stránky,
   žádná nepoužívá position:absolute nad obsahem.
   Vykreslí se jen tam, kde je místo; na úzkých displejích se
   schová, ať nekrade prostor číslům.
   ═══════════════════════════════════════════════════════════ */
.aladin {
    display: block;
    height: auto;
    /* neklikatelný a nevybíratelný — je to dekorace, ne ovládací prvek */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ---------- Přihlašovací obrazovka: aladin vedle karty ---------- */
.login-blok {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mezera-4);
}
.aladin-login {
    width: 190px;
    flex: 0 0 auto;
    /* jediná animace v celé sadě: pomalé vznášení nad kobercem */
    animation: aladin-vznaseni 6s ease-in-out infinite;
}
@keyframes aladin-vznaseni {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
/* Kdo má v systému vypnuté animace, dostane maskota v klidu. */
@media (prefers-reduced-motion: reduce) {
    .aladin-login { animation: none; }
}
/* Užší okno = maskot pryč, přihlašovací karta má přednost. */
@media (max-width: 720px) {
    .aladin-login { display: none; }
}

/* ---------- Patička: malý aladin vlevo od textu ---------- */
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.aladin-paticka {
    width: 46px;
    opacity: .9;                  /* decentní, ale ne vybledlý */
    transition: opacity .2s ease;
}
.footer:hover .aladin-paticka { opacity: 1; }
@media (max-width: 640px) {
    .aladin-paticka { display: none; }
}

/* ---------- Prázdný stav: aladin s lupou nad hláškou ---------- */
.aladin-prazdny {
    width: 118px;
    margin: 0 auto 14px;
    opacity: .9;
}
.empty-state .empty-tip {
    color: #98989d;
    font-size: 13px;
    margin-bottom: 0;
}

/* ---------- Hlavička stránky: aladin vlevo od nadpisu ----------
   Vlevo záměrně: vpravo nahoře je ukotvený plovoucí přepínač trhu
   a tlačítka stránek (viz informace/ui-konvence.md), tam maskot
   nesmí. Skládá se do řádku s titulkem, nic nepřekrývá. */
.page-header-s-maskotem {
    display: flex;
    align-items: center;
    gap: 14px;
}
.aladin-nadpis {
    width: 52px;
    flex: 0 0 auto;
}
@media (max-width: 640px) {
    .aladin-nadpis { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   SPRÁVCE SLOUPCŮ PŘEHLEDŮ (assets/js/sloupce.js)
   Lišta nad tabulkou s tlačítkem „Sloupce", panel se seznamem
   a úchyty pro tažení šířky v hlavičce tabulky.
   ───────────────────────────────────────────────────────────── */

/* Lišta nad tabulkou — tlačítko plave vpravo, aby nekradlo místo datům. */
.tbl-nastroje {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    /* Spodní mezera je povinná — bez ní se tlačítko dotýká hlavičky tabulky
       (přehledy bez legendy: týdenní a měsíční report). */
    padding: 14px 12px 12px;
}
.sl-obal { position: relative; }

.sl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    background: #fff;
    color: #1d1d1f;
    font-size: 13px;
    cursor: pointer;
}
.sl-btn:hover { background: #f5f5f7; }
.sl-btn[aria-expanded="true"] { border-color: #0071e3; color: #0071e3; }

/* Panel se seznamem sloupců */
.sl-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: 260px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
    padding: 10px 0 8px;
}
.sl-panel-nadpis {
    padding: 2px 14px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #86868b;
    font-weight: 600;
}
.sl-seznam { list-style: none; margin: 0; padding: 0; }
.sl-polozka {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    font-size: 13px;
    color: #1d1d1f;
}
.sl-polozka:hover { background: #f5f5f7; }
.sl-polozka label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.sl-polozka input[type="checkbox"] { margin: 0; flex: none; }
.sl-nazev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-uchyt { color: #c7c7cc; cursor: grab; display: flex; flex: none; }
.sl-polozka:hover .sl-uchyt { color: #86868b; }
.sl-taha-se { opacity: .45; background: #eef5ff; }
.sl-zamcena { color: #86868b; }
.sl-zamcena .sl-ikona-zamek { color: #c7c7cc; display: flex; flex: none; }

.sl-patka {
    display: flex;
    gap: 14px;
    padding: 8px 14px 2px;
    margin-top: 6px;
    border-top: 1px solid #e5e5ea;
}
.sl-odkaz {
    background: none;
    border: 0;
    padding: 0;
    font-size: 12px;
    color: #0071e3;
    cursor: pointer;
}
.sl-odkaz:hover { text-decoration: underline; }
.sl-napoveda {
    margin: 6px 0 0;
    padding: 0 14px;
    font-size: 11px;
    line-height: 1.45;
    color: #86868b;
    white-space: normal;
}

/* Skrytý sloupec — platí pro hlavičku i buňky */
.minireport-table .sl-skryty { display: none !important; }

/* Vlastní šířky → pevné rozvržení tabulky, jinak si je prohlížeč přepočítá po svém.
   Delší text se pak ořízne třemi tečkami (viz informace/ui-konvence.md). */
.minireport-table.sl-sirky { table-layout: fixed; }
.minireport-table.sl-sirky th,
.minireport-table.sl-sirky td { overflow: hidden; text-overflow: ellipsis; }

/* Úchyt pro tažení šířky v pravém okraji hlavičky (th je sticky = drží ukotvení sám) */
.sl-tahni {
    position: absolute;
    top: 0;
    right: 0;
    width: 9px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}
.sl-tahni::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 15%;
    height: 70%;
    width: 2px;
    border-radius: 1px;
    background: transparent;
}
.sl-tahni:hover::after { background: #0071e3; }
.minireport-table.sl-tahne-se { user-select: none; cursor: col-resize; }
.minireport-table.sl-tahne-se .sl-tahni::after { background: #0071e3; }

/* Lišta se sloupci uvnitř legendy barvení řádků — tlačítko doprava na její řádek */
.row-tint-legend .tbl-nastroje { margin-left: auto; padding: 0; }

/* Přesouvání sloupce tažením za název v hlavičce */
.minireport-table th.sl-presunutelny { cursor: grab; }
.minireport-table.sl-presouva-se { user-select: none; }
.minireport-table.sl-presouva-se th.sl-presunutelny { cursor: grabbing; }
.minireport-table th.sl-zdroj { background: #eef5ff; color: #0071e3; }
/* Modrá čára ukazuje, kam sloupec spadne */
.minireport-table th.sl-cil-pred { box-shadow: inset 3px 0 0 0 #0071e3; }
.minireport-table th.sl-cil-za   { box-shadow: inset -3px 0 0 0 #0071e3; }

/* Dělicí čárka mezi sloupci se ukáže po najetí na hlavičku — aby bylo vidět,
   že se za okraj dá táhnout. Pod kurzorem přímo na okraji zmodrá. */
.minireport-table th:hover .sl-tahni::after { background: #c7c7cc; }
.minireport-table th .sl-tahni:hover::after { background: #0071e3; }