/* ============================================================
   Fakturou.cz – Design System 2.0
   Gradient theme: Blue #2563eb → Violet #7c3aed
   ============================================================ */

/* ── Přepis Bootstrap barev (eliminace zelené) ────────────── */
:root {
    /* Bootstrap 5 success → teal místo zelené */
    --bs-success:           #10b981;
    --bs-success-rgb:       16,185,129;
    --bs-success-bg-subtle: rgba(16,185,129,.1);
    --bs-success-border-subtle: rgba(16,185,129,.25);
    --bs-success-text-emphasis: #065f46;

    /* Barva odkazů = fialová značky (Tomáš 12. 10. 2026: „proč jsou odkazy modré?“).
       #6d28d9 má na bílé kontrast 7,1 : 1, na světle šedé #f4f6fb 6,6 : 1 (AA i AAA). */
    --link:                     #6d28d9;
    --link-hover:               #5b21b6;
    --link-on-dark:             #c4b5fd;
    --bs-link-color:            #6d28d9;
    --bs-link-color-rgb:        109,40,217;
    --bs-link-hover-color:      #5b21b6;
    --bs-link-hover-color-rgb:  91,33,182;

    /* Bootstrap nav – eliminace zelené active stavu */
    --bs-nav-link-color:              #64748b;
    --bs-nav-link-hover-color:        #2563eb;
    --bs-navbar-active-color:         #2563eb;
    --bs-navbar-hover-color:          #2563eb;
    --bs-nav-pills-link-active-bg:    #2563eb;
    --bs-nav-pills-link-active-color: #fff;

    /* Bootstrap primary → brand blue */
    --bs-primary:       #2563eb;
    --bs-primary-rgb:   37,99,235;
}

/* ── Proměnné ─────────────────────────────────────────────── */
:root {
    --brand-start:   #2563eb;
    --brand-end:     #7c3aed;
    --brand-mid:     #6366f1;
    --brand-grad:    linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --brand-grad-h:  linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);

    --success-grad:  linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
    --danger-grad:   linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --warning-grad:  linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --info-grad:     linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);

    --surface:       #ffffff;
    --surface-2:     #f8fafc;
    --surface-3:     #f1f5f9;
    --surface-input: #f5f3ff;   /* světle fialové pozadí pro vyplnitelná pole */
    --border:        #e2e8f0;
    --border-focus:  #2563eb;

    --text:          #0f172a;
    --text-muted:    #64748b;
    --text-light:    #94a3b8;

    --radius:        10px;
    --radius-lg:     16px;
    --shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow:        0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
    --shadow-lg:     0 10px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;  /* iOS Safari nezvětšuje text při otočení na šířku */
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden; /* umožní LP sekce přes celou šířku bez scrollbaru */
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background-color: var(--surface-2);
    color: var(--text);
    /* + bezpečná zóna pro home indicator na iPhonech (viewport-fit=cover v header.php) */
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

/* Mezera pro fixed navbar – pevná hodnota, spolehlivá v každém prohlížeči */
body.has-navbar { padding-top: 64px !important; }

/* Šedý blik po klepnutí na Androidu – řešíme vlastním :active stavem. */
a, button, .btn, .nav-link, .dropdown-item, .invoice-card, .quick-action-btn {
    -webkit-tap-highlight-color: rgba(37, 99, 235, .12);
}

/* Fixed navbar respektuje výřez (landscape na iPhonu). */
.navbar.fixed-top {
    padding-left:  env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
strong { font-weight: 700; }

.detail-item { font-size: .82em; color: var(--text-muted); }

/* ── Odkaz ────────────────────────────────────────────────── */
/* .page-link musí být ve výjimkách, jinak by odkazy stránkování zmodraly –
   včetně aktivní stránky, kde by byl modrý text na modrofialovém gradientu. */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.badge):not(.page-link) {
    color: var(--link, #6d28d9);
    text-decoration: none;
    transition: color .15s;
}
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.badge):not(.page-link):hover,
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.badge):not(.page-link):focus {
    color: var(--link-hover, #5b21b6);
    text-decoration: underline;
}
/* Navštívené odkazy mají stejnou barvu. Podtržené jsou jen odkazy uvnitř textu (odstavce,
   nápovědy pod poli, upozornění, právní texty); odkazy v kartách, menu a patičce ne. */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.badge):not(.page-link):visited { color: var(--link, #6d28d9); }
:where(p, .form-text, .alert, dd, blockquote, .terms-page li, .nv-article li, .lp-faq-a) > a:not(.btn):not([class*="badge"]),
:where(p, .form-text, .alert, dd, blockquote) > :where(strong, b, em, span) > a:not(.btn) {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
    text-decoration-color: rgba(109, 40, 217, .4);
}
.alert-link { color: inherit !important; text-decoration: underline; }
.link-primary { color: var(--link, #6d28d9) !important; text-decoration-color: rgba(109, 40, 217, .4) !important; }
.link-primary:hover, .link-primary:focus { color: var(--link-hover, #5b21b6) !important; }
/* Tmavé pozadí (titulka: platby z avíz, eetecko, karta Max) – světlá fialová kvůli kontrastu. */
.lp-pay a:not([class]), .lp-sister a:not([class]), .lp-plan--why a:not([class]), .lp-promo-sec a:not([class]), .bg-dark a:not([class]) {
    color: var(--link-on-dark, #c4b5fd) !important;
}

/* ── Tlačítka ─────────────────────────────────────────────── */
.btn {
    border-radius: var(--radius) !important;
    padding-left:  1.25rem;
    padding-right: 1.25rem;
    font-weight: 500;
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:active { opacity: .85; }

/* Restore proper small/large button padding (our .btn override kills Bootstrap's btn-sm).
   Bootstrap velikost uvnitr skupiny nastavuje pres .btn-group-sm > .btn, kde uz
   tridy .btn-sm na tlacitkach nejsou - bez nich jim zustalo sirokych 1.25rem
   a ikonova tlacitka byly siroke prazdne obdelniky. */
.btn-sm,
.btn-group-sm > .btn {
    padding-left:  .625rem !important;
    padding-right: .625rem !important;
    font-size: .875rem;
}
.btn-lg,
.btn-group-lg > .btn {
    padding-left:  1.75rem !important;
    padding-right: 1.75rem !important;
}

/* Nase .btn { border-radius: ... !important } prebilo i Bootstrapu pravidla,
   ktera uvnitr .btn-group srazi vnitrni rohy na ostro. Skupina tak vypadala
   jako tri samostatne pilulky s prekryvajicimi se ramecky. Vracime je zpet;
   vyjimky pro filtry s mezerami jsou nize v mobilnich blocich. */
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.btn-group-vertical > .btn:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Primary – gradient modrá→fialová */
.btn-primary {
    background: var(--brand-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--brand-grad-h) !important;
    box-shadow: 0 6px 20px rgba(99,102,241,.45);
    filter: brightness(1.05);
}

/* Success – gradient zelená→modrá */
.btn-success {
    background: var(--success-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(16,185,129,.3);
}
.btn-success:hover, .btn-success:focus {
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(16,185,129,.4);
}

/* Danger */
.btn-danger {
    background: var(--danger-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus { filter: brightness(1.08); }

/* Warning */
.btn-warning {
    background: var(--warning-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Outline Primary */
.btn-outline-primary {
    border-color: var(--brand-start) !important;
    color: var(--brand-start) !important;
    background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--brand-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Outline Success */
.btn-outline-success {
    border-color: #10b981 !important;
    color: #10b981 !important;
}
.btn-outline-success:hover {
    background: var(--success-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Outline Secondary */
.btn-outline-secondary {
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}
.btn-outline-secondary:hover {
    background: var(--surface-3) !important;
    color: var(--text) !important;
}

/* Link btn */
.btn-link { color: var(--brand-start) !important; }
.btn-link:hover { color: var(--brand-end) !important; }

/* Icon btns */
.bi-facebook { color: #1877f2 !important; }
.bi-google   { color: #4285f4 !important; }

/* ── Custom utility: bg-purple / text-purple (Bootstrap 5.3 nemá fialovou utility) ── */
/* Sjednotit s bg-opacity-X / text-opacity-X mechanismem (rgb + var(--bs-bg-opacity)). */
.bg-purple {
    background-color: rgba(124, 58, 237, var(--bs-bg-opacity, 1)) !important;
}
.text-purple {
    color: rgba(124, 58, 237, var(--bs-text-opacity, 1)) !important;
}

/* ── Formuláře ────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea,
select {
    border-radius: var(--radius) !important;
    background-color: var(--surface-input) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
textarea:focus,
select:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
    outline: none;
}

/* Readonly / disabled – jemně šedé (nepřepisuje fialovou na vyplnitelných polích) */
input[readonly],
textarea[readonly],
select[readonly],
input:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--surface-3) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

/* Checkbox/Radio */
.form-check-input:checked {
    background-color: var(--brand-start) !important;
    border-color:     var(--brand-start) !important;
}
.form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='white' d='M16.7 5.3a1 1 0 0 0-1.4 0L8 12.6 4.7 9.3a1 1 0 1 0-1.4 1.4l4 4a1 1 0 0 0 1.4 0l8-8a1 1 0 0 0 0-1.4z'/%3e%3c/svg%3e") !important;
}

/* Form label */
.form-label { font-weight: 500; font-size: .88rem; color: var(--text); margin-bottom: .3rem; }

/* Hvězdička u povinných polí */
.req-mark { color: #dc2626; font-weight: 700; margin-left: 2px; }
.req-note { font-size: .78rem; color: var(--text-muted); }
.form-text  { font-size: .78rem; color: var(--text-muted); }

/* Input group button */
.input-group .btn {
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

/* ── Navbar ───────────────────────────────────────────────── */
:root { --navbar-h: 62px; }

.navbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    padding-top: .65rem;
    padding-bottom: .65rem;
    min-height: var(--navbar-h);
    box-shadow: var(--shadow-sm);
}

/* Toto zaručí, že obsah nikdy není pod navbarem */
/* padding-top je definován výše – 64px */

.navbar-brand {
    padding-top: .25rem;
    padding-bottom: .25rem;
    text-decoration: none !important;
}
.navbar-brand:hover { opacity: .85; }

/* Nav links */
.navbar .nav-link {
    color: var(--text-muted) !important;
    font-weight: 500;
    font-size: .9rem;
    border-radius: 8px;
    padding: .4rem .75rem !important;
    transition: color .15s, background .15s;
}
.navbar .nav-link:hover {
    color: var(--brand-start) !important;
    background: rgba(37,99,235,.07);
}
.navbar .nav-link.active {
    color: var(--brand-start) !important;
    background: rgba(37,99,235,.1);
    font-weight: 600;
}

/* Navbar toggler */
.navbar-toggler {
    border-color: var(--border) !important;
    border-radius: var(--radius) !important;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important; }

/* Dropdown menu */
.navbar .dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: .4rem;
}
.navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border-radius: 8px;
    color: var(--text);
    font-size: .9rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: rgba(37,99,235,.08) !important;
    color: var(--brand-start) !important;
    text-decoration: none;
}
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    background: var(--brand-grad) !important;
    color: #fff !important;
}

/* Logout btn v navbaru */
.navbar .btn-outline-secondary {
    font-size: .82rem;
    padding: .3rem .85rem;
}

/* Firma info v navbaru */
.navbar .firm-info strong { color: var(--text); }
.navbar .firm-info .badge-plan {
    font-size: .7rem; font-weight: 600;
    background: var(--brand-grad);
    color: #fff;
    border-radius: 20px;
    padding: 1px 8px;
    display: inline-block;
}
.navbar .firm-info .badge-free {
    /* 27. 10. 2026 (Tomáš): větší, aby byl tarif vidět vedle „Získejte další funkce“. */
    font-size: .8rem; font-weight: 700;
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 2px 11px;
    vertical-align: middle;
    display: inline-block;
}

/* ── Vodorovná lišta se musí vejít na JEDEN řádek (2026-09-08) ─────────
   Přihlášená lišta má 8 položek + firmu + odhlášení. Na 1280 px se lámala
   do dvou až tří řádků: „Nový doklad“ se zlomil na dvě slova, ozubené kolo
   i „Odhlásit“ spadly pod menu. Stahujeme proto odsazení, zakazujeme lámání
   slov a na užších displejích schováváme to, co nese nejmíň informace
   (ikony u položek, název firmy, odznak Free). Svislého menu se to netýká. */
@media (min-width: 992px) {
    body:not(.menu-vertical) .navbar-nav .nav-link {
        padding: .4rem .5rem !important;
        font-size: .86rem;
        white-space: nowrap;
    }
    body:not(.menu-vertical) .navbar-collapse { flex-wrap: nowrap; }
    body:not(.menu-vertical) .navbar-actions {
        flex-wrap: nowrap !important;
        margin-left: .5rem !important;
    }
    body:not(.menu-vertical) .navbar-actions .firm-info { white-space: nowrap; }
    /* Popisek „Nastavení“ a ikona u „Faktury“ jsou pro svislý panel a mobilní
       menu – vodorovná lišta by se s nimi zase zalomila. */
    body:not(.menu-vertical) .navbar-actions .nav-settings-label,
    body:not(.menu-vertical) .navbar-nav .nav-icon-vert { display: none; }
    /* Dlouhý název firmy jinak roztlačí lištu a menu se zase zalomí. */
    body:not(.menu-vertical) .navbar-actions .firm-info > div:first-child {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    body:not(.menu-vertical) .navbar-nav .nav-link {
        padding: .4rem .38rem !important;
        font-size: .82rem;
    }
    body:not(.menu-vertical) .navbar-nav .nav-link > i.bi:not(.nav-icon-keep) { display: none; }
    body:not(.menu-vertical) .navbar-actions .firm-info > div:first-child { display: none; }
    body:not(.menu-vertical) .navbar-actions .badge-free { display: none; }
}

/* ── Nav Pills ─────────────────────────────────────────────── */
.nav-pills .nav-link {
    color: var(--text-muted);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius) !important;
    margin-right: .3rem;
    margin-bottom: .3rem;
    padding: .4rem 1.1rem;
    font-weight: 500;
    font-size: .88rem;
    transition: all .15s;
}
.nav-pills .nav-link:hover {
    color: var(--brand-start);
    background: rgba(37,99,235,.06);
    border-color: rgba(37,99,235,.3);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--brand-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(99,102,241,.3);
}

/* ── Stránkování ──────────────────────────────────────────── */
/* Bootstrap default (hranaté, modrá #0d6efd) se tluče se zbytkem systému.
   Sjednoceno s .nav-pills: zaoblené dlaždice, gradient na aktivní stránce. */
.pagination {
    gap: .3rem;
    --bs-pagination-border-radius: var(--radius);
}
.pagination .page-link {
    border: 1px solid var(--border);
    border-radius: var(--radius) !important;
    background: var(--surface);
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 500;
    padding: .4rem .75rem;
    min-width: 38px;
    text-align: center;
    transition: color .15s, background .15s, border-color .15s;
    box-shadow: none;
}
.pagination .page-link:hover {
    background: rgba(37,99,235,.06);
    border-color: rgba(37,99,235,.3);
    color: var(--brand-start);
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
    color: var(--brand-start);
}
.pagination .page-item.active .page-link {
    background: var(--brand-grad);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(99,102,241,.3);
}
.pagination .page-item.disabled .page-link {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-light);
    opacity: 1;           /* Bootstrap dává .5 – v našem světle šedém provedení pak mizí */
    box-shadow: none;
}
/* Výpustka „…" je <span>, ne <a> – ať nevypadá jako klikatelná dlaždice.
   Zakázané šipky « » jsou <a>, ty si dlaždici nechají. */
.pagination .page-item.disabled > span.page-link {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* ── Profil loga: označení hlavního loga ──────────────────── */
/* Není to tlačítko, je to stav – proto jemný chip v barvě značky
   místo dřívějšího celozeleného gradient badge, který vypadal klikatelně. */
.logo-primary-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    background: rgba(37,99,235,.1);
    color: var(--brand-start);
    border: 1px solid rgba(37,99,235,.2);
    border-radius: var(--radius);
    font-size: .8rem;
    font-weight: 600;
    padding: .25rem .6rem;
    white-space: nowrap;
}
.logo-primary-chip .bi { font-size: .85rem; color: #f59e0b; }

/* ── Nav Tabs (záložky v nastavení firmy) ─────────────────── */
/* Design systém stylizoval jen .nav-pills, takže .nav-tabs zůstávaly
   ve výchozím Bootstrapu a do zbytku aplikace nezapadaly. */
.nav-tabs {
    border-bottom: 1px solid var(--border);
    gap: .15rem;
}
.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    color: var(--text-muted) !important;
    background: transparent;
    font-weight: 500;
    font-size: .9rem;
    padding: .55rem 1rem;
    margin-bottom: -1px;
    transition: color .15s, background .15s, border-color .15s;
}
.nav-tabs .nav-link i { opacity: .75; }
.nav-tabs .nav-link:hover {
    color: var(--brand-start) !important;
    background: rgba(37,99,235,.05);
    border-color: transparent;
    border-bottom-color: rgba(37,99,235,.3);
    isolation: auto;
}
.nav-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.nav-tabs .nav-link.active {
    color: var(--brand-start) !important;
    background: var(--surface);
    border-color: transparent;
    border-bottom: 2px solid var(--brand-start);
    font-weight: 600;
}
.nav-tabs .nav-link.active i { opacity: 1; }

/* Vodorovné rolování záložek na mobilu bez ošklivého scrollbaru. */
.nav-tabs.overflow-auto { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.nav-tabs.overflow-auto::-webkit-scrollbar { height: 3px; }
.nav-tabs.overflow-auto::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Vizuální náznak, že lišta záložek pokračuje vodorovně (na mobilu se do šířky
   nevejdou všechny záložky). Čistě CSS "scroll shadow": stín na kraji zmizí,
   jakmile už není kam rolovat. Barva krycího přechodu = pozadí za lištou. */
.nav-tabs.overflow-auto {
    background-color: var(--surface-2);
    background-image:
        linear-gradient(to right, var(--surface-2), rgba(248,250,252,0) 32px),
        linear-gradient(to left,  var(--surface-2), rgba(248,250,252,0) 32px),
        radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.17), rgba(15,23,42,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.17), rgba(15,23,42,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}
/* Uvnitř bílé karty (editace dokladu) je pozadí bílé, ne šedé. */
.card .nav-tabs.overflow-auto,
.settings-section .nav-tabs.overflow-auto {
    background-color: var(--surface);
    background-image:
        linear-gradient(to right, var(--surface), rgba(255,255,255,0) 32px),
        linear-gradient(to left,  var(--surface), rgba(255,255,255,0) 32px),
        radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.17), rgba(15,23,42,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.17), rgba(15,23,42,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

@media (max-width: 575px) {
    .nav-tabs .nav-link { padding: .5rem .7rem; font-size: .85rem; min-height: 44px; }
}

/* ── Karty ────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    font-weight: 600;
    padding: 1rem 1.25rem;
}
.card-body { padding: 1.25rem; }

/* Gradient accent card */
.card-accent-top {
    border-top: 3px solid transparent !important;
    border-image: var(--brand-grad) 1 !important;
}

/* Stat karty na dashboardu */
.stat-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--brand-grad);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat-card.success::before { background: var(--success-grad); }
.stat-card.danger::before  { background: var(--danger-grad); }
.stat-card.warning::before { background: var(--warning-grad); }
.stat-card.info::before    { background: var(--info-grad); }

.stat-card .stat-value {
    font-size: 1.8rem; font-weight: 800;
    color: var(--text); line-height: 1.1;
}
.stat-card .stat-label {
    font-size: .8rem; color: var(--text-muted);
    margin-top: 2px; font-weight: 500;
}
.stat-card .stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.stat-card .stat-icon.primary { background: rgba(37,99,235,.12); color: var(--brand-start); }
.stat-card .stat-icon.success { background: rgba(16,185,129,.12); color: #10b981; }
.stat-card .stat-icon.danger  { background: rgba(239,68,68,.12);  color: #ef4444; }
.stat-card .stat-icon.warning { background: rgba(245,158,11,.12); color: #f59e0b; }

/* ── Tabulky ─────────────────────────────────────────────── */
.table {
    font-size: .88rem;
    color: var(--text);
}
.table th {
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border) !important;
    background: var(--surface-2);
    padding: .65rem 1rem;
}
.table td { padding: .7rem 1rem; border-color: var(--border); vertical-align: middle; }
.table tbody tr {
    transition: background .12s;
}
.table tbody tr:hover { background: rgba(37,99,235,.035); }
.table-responsive { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }

/* Odznaky stavu faktur */
.badge-status {
    font-size: .72rem; font-weight: 600;
    padding: .3em .7em;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.badge-paid    { background: rgba(16,185,129,.12);  color: #059669; }
.badge-unpaid  { background: rgba(245,158,11,.12);  color: #d97706; }
.badge-overdue { background: rgba(239,68,68,.12);   color: #dc2626; }
.badge-offer   { background: rgba(99,102,241,.12);  color: #4f46e5; }
.badge-concept { background: rgba(148,163,184,.15); color: #64748b; }
.badge-order   { background: rgba(14,165,233,.12);  color: #0369a1; }
.badge-purchase{ background: rgba(34,197,94,.12);   color: #15803d; }
/* Zálohová faktura (výzva k platbě) a dobropis (vratka) */
.badge-proforma{ background: rgba(139,92,246,.12);  color: #6d28d9; }
.badge-credit  { background: rgba(236,72,153,.12);  color: #be185d; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius-lg) !important;
    border: none !important;
    font-size: .9rem;
}
.alert-success { background: rgba(16,185,129,.1);  color: #065f46; }
.alert-danger  { background: rgba(239,68,68,.1);   color: #7f1d1d; }
.alert-warning { background: rgba(245,158,11,.1);  color: #78350f; }
.alert-info    { background: rgba(37,99,235,.08);  color: #1e3a8a; }

/* ── Accordion ───────────────────────────────────────────── */
.accordion-item {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    margin-bottom: .5rem;
}
.accordion-button {
    font-weight: 600;
    font-size: .92rem;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    color: var(--brand-start) !important;
    background: rgba(37,99,235,.04) !important;
}
.accordion-button::after {
    filter: none;
}
.accordion-button:not(.collapsed)::after {
    filter: hue-rotate(190deg) saturate(2);
}

/* ── Modální okna ────────────────────────────────────────── */
.modal-content {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--border) !important;
    padding: 1.25rem 1.5rem;
}
.modal-title { font-weight: 700; font-size: 1.1rem; }
.modal-footer {
    border-top: 1px solid var(--border) !important;
    padding: 1rem 1.5rem;
}

/* Gradient modal header */
.modal-header-grad {
    background: var(--brand-grad);
    color: #fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-header-grad .modal-title { color: #fff; }
.modal-header-grad .btn-close { filter: invert(1); }

/* ── Social login tlačítka ───────────────────────────────── */
.btn-social {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    font-weight: 500;
    border-radius: var(--radius) !important;
    padding: .55rem 1rem;
    transition: background .15s, box-shadow .15s;
    width: 100%;
}
.btn-social:hover {
    background: var(--surface-2) !important;
    box-shadow: var(--shadow-sm);
}

/* ── Utility ─────────────────────────────────────────────── */
.text-gradient {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.divider-or {
    display: flex; align-items: center; gap: 12px;
    color: var(--text-muted); font-size: .82rem; margin: 1rem 0;
}
.divider-or::before, .divider-or::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

.section-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: .5rem;
}

/* bg helper třídy */
.bg-fakturou {
    background: var(--brand-grad) !important;
    color: #fff;
}
.bg-fakturou a { color: rgba(255,255,255,.85); text-decoration: none; }
.bg-fakturou a:hover { color: #fff; }

/* ── Přepis Bootstrap zelené všude ──────────────────────── */
/* Sjednoceno s --bs-bg-opacity / --bs-text-opacity mechanismem,
   aby bg-success bg-opacity-10 a text-success text-opacity-X fungovalo. */
/* text-success */
.text-success {
    color: rgba(16, 185, 129, var(--bs-text-opacity, 1)) !important;
}
/* bg-success */
.bg-success {
    background-color: rgba(16, 185, 129, var(--bs-bg-opacity, 1)) !important;
}
/* border-success */
.border-success { border-color: #10b981 !important; }
/* alert-success */
.alert-success {
    background: rgba(16,185,129,.1) !important;
    color: #065f46 !important;
    border: none !important;
}
/* form-check zelená → modrá */
.form-check-input:focus {
    border-color: var(--brand-start) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
}
/* progress bar */
.progress-bar.bg-success {
    background: var(--success-grad) !important;
}
/* badge bg-success */
.badge.bg-success {
    background: var(--success-grad) !important;
    color: #fff;
}

/* ── Landing page: break-out z Bootstrap .container ─────── */
/* Sekce musí jít přes celou šířku viewportu, i když jsou
   uvnitř .container z header.php.

   POZOR na 100vw: zahrnuje i šířku scrollbaru, takže sekce
   byly o ~8 px širší než viewport a stránka reálně šla
   odscrollovat doprava (body{overflow-x:hidden} to nechytlo).
   --sbw dopočítá šířku scrollbaru jako rozdíl 100vw a 100%
   nejbližšího blokového rodiče na plnou šířku.             */
:root {
    --sbw: 0px;
}

/* Pojistka, kdyby --sbw nestihl doběhnout (vypnutý JS, pomalé rozložení).
   `clip` na rozdíl od `hidden` nevytváří scroll kontejner, takže nerozbije
   position:sticky uvnitř stránky; hidden je fallback pro starší prohlížeče. */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

.lp-hero,
.lp-badge-strip,
.lp-cta {
    width:  calc(100vw - var(--sbw));
    margin-left:  calc(50% - (100vw - var(--sbw)) / 2);
    margin-right: calc(50% - (100vw - var(--sbw)) / 2);
    max-width: 100vw;
}
/* Vnitřní .container/.row sám řeší max-width a padding. */

/* ═══════════════════════════════════════════════════════════
   MODULE STYLES – seznam faktur, editace, zákazníci, nastavení
   ═══════════════════════════════════════════════════════════ */

/* ── Záhlaví stránky modulu ──────────────────────────────── */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem;
    margin-bottom: .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}
.page-header h1, .page-header h2 {
    margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--text);
}
.page-header .page-subtitle {
    font-size: .85rem; color: var(--text-muted); margin-top: 2px;
}

/* ── Stat boxy (tržby, nezaplaceno, po splatnosti) ───────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 767px) { .stats-row { grid-template-columns: 1fr; } }

.stat-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.stat-box::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    border-radius: 0;
}
.stat-box.primary::before { background: var(--brand-grad); }
.stat-box.warning::before { background: var(--warning-grad); }
.stat-box.danger::before  { background: var(--danger-grad); }
.stat-box.success::before { background: var(--success-grad); }
.stat-box .stat-box-label { font-size: .78rem; color: var(--text-muted); font-weight: 500; margin-bottom: 4px; }
.stat-box .stat-box-value { font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: var(--text); }
.stat-box.warning .stat-box-value { color: #d97706; }
.stat-box.danger  .stat-box-value { color: #dc2626; }
.stat-box.success .stat-box-value { color: #059669; }
.stat-box.primary .stat-box-value { color: var(--brand-start); }
.stat-box .stat-box-sub { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }

/* ── Upozornění blížící se splatnosti (dashboard) ─────────── */
.due-soon-alert {
    display: flex; align-items: flex-start; gap: .65rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius-lg);
    padding: .75rem 1rem;
    font-size: .9rem;
}
.due-soon-icon {
    color: #d97706; font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem;
}
.due-soon-body { flex: 1; color: var(--text); min-width: 0; }
.due-soon-list {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .15rem;
}
.due-soon-item {
    display: inline; gap: .3rem;
    margin-right: .5rem; color: var(--text-muted);
}
.due-soon-item a { color: var(--brand-start); font-weight: 600; text-decoration: none; }
.due-soon-item a:hover { color: var(--brand-end); text-decoration: underline; }
.due-soon-item span { font-size: .85rem; }
.due-soon-more {
    color: var(--brand-start); font-weight: 600; text-decoration: none; font-size: .85rem;
    white-space: nowrap;
}
.due-soon-more:hover { color: var(--brand-end); text-decoration: underline; }

/* ── Panel filtrů (nad tabulkou) ─────────────────────────── */
.filter-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .65rem .85rem;
    box-shadow: var(--shadow-sm);
}
.filter-bar .nav-pills { flex-wrap: wrap; gap: .3rem; }

/* Vyhledávací input v filtru */
.filter-bar .search-wrap {
    position: relative; flex: 1; min-width: 180px;
}
.filter-bar .search-wrap input {
    padding-left: 2.2rem !important;
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
.filter-bar .search-wrap .bi-search {
    position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: .85rem; pointer-events: none;
}

/* ── Karta faktury / dokladu ──────────────────────────────── */
.invoice-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .75rem 1rem .75rem 1.25rem;
    margin-bottom: .5rem;
    position: relative; overflow: visible;
    transition: box-shadow .15s, border-color .15s;
    box-shadow: var(--shadow-sm);
}
.invoice-card:hover { box-shadow: var(--shadow); border-color: rgba(37,99,235,.25); }
.invoice-card:has(.dropdown-menu.show) { z-index: 10; }
.invoice-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.invoice-card.paid::before    { background: var(--success-grad); }
.invoice-card.unpaid::before  { background: var(--warning-grad); }
.invoice-card.overdue::before { background: var(--danger-grad); }
.invoice-card.offer::before   { background: var(--info-grad); }
.invoice-card.concept::before { background: linear-gradient(135deg,#94a3b8,#64748b); }
.invoice-card.order::before   { background: linear-gradient(135deg,#0ea5e9,#0369a1); }
.invoice-card.purchase::before{ background: linear-gradient(135deg,#22c55e,#15803d); }
.invoice-card.proforma::before{ background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.invoice-card.credit::before  { background: linear-gradient(135deg,#ec4899,#be185d); }

/* ── Formulář editace faktury ────────────────────────────── */
.form-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .65rem .9rem;
    margin-bottom: .6rem;
    box-shadow: var(--shadow-sm);
}
.form-section-title {
    font-size: .72rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: .6rem; padding-bottom: .35rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: .5rem;
}
.form-section-title i {
    background: var(--brand-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; font-size: 1rem;
}

/* Řádek položky faktury */
.item-card {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    transition: border-color .15s, box-shadow .15s;
}
.item-card:focus-within {
    border-color: var(--brand-start) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.08) !important;
}
.item-card .item-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--brand-grad); color: #fff;
    font-size: .72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Celkový součet faktury */
.invoice-total-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
    text-align: right;
}
.invoice-total-box .total-label { font-size: .82rem; color: var(--text-muted); }
.invoice-total-box .total-value {
    font-size: 1.8rem; font-weight: 800;
    background: var(--brand-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Zákazníci – tabulka ─────────────────────────────────── */
.customer-row td { vertical-align: middle; }
.customer-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--brand-grad); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; flex-shrink: 0;
}
.table .table-danger { background: rgba(239,68,68,.05) !important; }
.table .table-success { background: rgba(16,185,129,.05) !important; }
.table .table-warning { background: rgba(245,158,11,.05) !important; }
.table .table-info    { background: rgba(99,102,241,.05) !important; }

/* ── Nastavení firmy – sekce ─────────────────────────────── */
.settings-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.settings-section-header {
    padding: .85rem 1.25rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-weight: 600; font-size: .9rem;
    display: flex; align-items: center; gap: .6rem;
    color: var(--text);
}
.settings-section-header i {
    background: var(--brand-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.settings-section-body { padding: 1.25rem; }

/* ── Import plateb ───────────────────────────────────────── */
.import-step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.import-step h4 {
    font-size: 1rem; font-weight: 700; margin-bottom: 1rem;
    padding-bottom: .75rem; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: .5rem; color: var(--text);
}
.import-step-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand-grad); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 800; flex-shrink: 0;
}

/* ── Dropzone logo upload ────────────────────────────────── */
.dropzone {
    border: 2px dashed var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface-2) !important;
    transition: border-color .2s, background .2s;
    min-height: 100px !important;
}
.dropzone:hover, .dropzone.dz-drag-hover {
    border-color: var(--brand-start) !important;
    background: rgba(37,99,235,.04) !important;
}
.dropzone .dz-message { color: var(--text-muted); font-size: .9rem; }

/* ── Top zákazníci řádek (hover) ─────────────────────────── */
.top-cust-row {
    transition: background-color .12s ease;
}
.top-cust-row:hover {
    background-color: rgba(37, 99, 235, .06);
}

/* ── Stav systému / dashboard widgety ───────────────────── */
.system-status-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--border);
}
.system-status-item:last-child { border-bottom: none; }
.status-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.ok     { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.5); }
.status-dot.warn   { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.5); }
.status-dot.error  { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.5); }

/* ── Rychlé akce v dashboardu ────────────────────────────── */
.quick-action-btn {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: all .15s;
    font-weight: 500; font-size: .9rem;
}
.quick-action-btn:hover {
    border-color: var(--brand-start);
    background: rgba(37,99,235,.04);
    color: var(--brand-start);
    transform: translateX(3px);
}
.quick-action-btn .qa-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.quick-action-btn.primary .qa-icon { background: rgba(37,99,235,.12); color: var(--brand-start); }
.quick-action-btn.secondary .qa-icon { background: var(--surface-3); color: var(--text-muted); }
.quick-action-btn.danger .qa-icon { background: rgba(239,68,68,.1); color: #dc2626; }

/* ══════════════════════════════════════════════════════════
   MOBIL / DOTYK
   ══════════════════════════════════════════════════════════ */

/* ── Zaseknutý :hover na dotykových zařízeních ───────────────
   Na telefonu zůstane :hover aktivní i po klepnutí, dokud uživatel
   neklepne jinam – karta zůstane posunutá / řádek zvýrazněný.
   Na zařízeních bez myši proto hover efekty vypínáme.            */
@media (hover: none) {
    .stat-card:hover        { transform: none; box-shadow: var(--shadow-sm); }
    .quick-action-btn:hover { transform: none; border-color: var(--border); background: var(--surface); color: var(--text); }
    .table tbody tr:hover   { background: transparent; }
    .top-cust-row:hover     { background-color: transparent; }
    .invoice-card:hover     { box-shadow: var(--shadow-sm); border-color: var(--border); }
    .btn-primary:hover, .btn-success:hover, .btn-danger:hover { filter: none; }

    /* Zpětná vazba na klepnutí místo hoveru */
    .invoice-card:active     { background: rgba(37,99,235,.04); }
    .quick-action-btn:active { background: rgba(37,99,235,.06); }
}

/* ── Vodorovné rolování tabulek ──────────────────────────────
   .table-responsive mělo overflow:hidden (kvůli zaoblení), takže
   se širší tabulka na mobilu ořízla a nešla odrolovat.            */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* ── Lepivá lišta pro uložení dokladu (jen mobil) ─────────────
   Formulář dokladu je dlouhý; na telefonu bylo tlačítko „Uložit"
   dosažitelné až po odrolování celé stránky.                     */
@media (max-width: 767px) {
    .save-bar {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin: 0 -.75rem;
        padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255,255,255,.94);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--border);
    }
    .save-bar .btn { width: 100%; min-height: 48px; }
}

/* ── Responzivita ────────────────────────────────────────── */
@media (max-width: 575px) {
    .stat-card .stat-value { font-size: 1.45rem; }
    .card-body { padding: 1rem; }
    .btn { padding-left: 1rem; padding-right: 1rem; }
    .table th, .table td { padding: .55rem .65rem; }

    /* iOS zoom prevention — input/select/textarea musí mít ≥16px font-size,
       jinak Safari při focusu zoomuje. Týká se i Bootstrap .form-control-sm / .form-select-sm. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Touch target minimum 44×44px pro „×" a „⋯" tlačítka v řádcích položek faktury.
       btn-sm má defaultně cca 30px výšku, na mobilu je to malé. */
    .item-card .btn-sm,
    .filter-bar .btn-sm {
        min-height: 44px;
        min-width: 44px;
    }

    /* Filter bar v seznamu faktur — stack ovládacích prvků. */
    .filter-bar { flex-wrap: wrap; gap: .5rem !important; }
    .filter-bar > * { width: 100%; }

    /* Sub-filtry (Všechny / Neuhrazené / …) — na mobilu mřížka 2×2 místo
       jednoho řádku, kde se texty ořezávaly a lámaly na dva řádky. */
    .filter-bar .btn-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .4rem;
    }
    .filter-bar .btn-group .btn {
        border-radius: var(--radius) !important;
        white-space: nowrap;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Cena za jednotku má na mobilu vlastní řádek (col-12),
       button × ať má víc prostoru a label se nezalamuje na 2 řádky. */
    .item-card .row > .col-12 .d-flex.gap-1 > input { min-width: 0; }

    /* Dotykové cíle v navbaru a lištách (WCAG 2.5.8 doporučuje ≥ 44 px). */
    .navbar .btn-sm,
    .navbar .nav-link,
    .navbar-toggler {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Rozbalený navbar může být delší než obrazovka → vlastní rolování. */
    .navbar-collapse {
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stránkování ať se dá trefit prstem a vejde se na úzký displej. */
    .pagination { gap: .25rem; }
    .pagination .page-link {
        min-width: 42px; min-height: 42px;
        display: flex; align-items: center; justify-content: center;
        padding: .4rem .5rem;
    }

    /* Dlouhá čísla dokladů / e-maily nesmí rozbít layout karty. */
    .invoice-card { overflow-wrap: anywhere; }

    /* Modální okno využije celou výšku a jde v něm rolovat. */
    .modal-dialog-centered { min-height: calc(100% - 1rem); }
    .modal-body { max-height: 75vh; max-height: 75dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 767px) {
    body { font-size: .93rem; }
    .modal-dialog { margin: .5rem; }
    .modal-content { border-radius: 14px !important; }

    /* Form section padding — méně dýchacího prostoru na mobilu */
    .form-section { padding: .75rem !important; }

    /* Statistické dlaždice: hodnota je to hlavní, ať je čitelná bez zoomu. */
    .stat-box { padding: .85rem 1rem; }
    .stat-box .stat-box-value { font-size: 1.4rem; }

    /* Hlavička stránky – nadpis a akce pod sebou, ne namačkané vedle sebe. */
    /* Nadpis a „Zpět“ patří na jeden řádek – sloupcové rozložení dělalo
       z odkazu tlačítko přes celou šířku a ukrajovalo půl obrazovky. */
    .page-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: .5rem;
        margin-bottom: .5rem;
        padding-bottom: .45rem;
    }
    .page-header h1, .page-header h2 { font-size: 1.2rem; }
    .page-header > .btn {
        flex: 0 0 auto;
        min-height: 36px;
        padding: .25rem .55rem;
        font-size: .8rem;
        white-space: nowrap;
    }

    /* Hromadná lišta výběru dokladů: vodorovné rolování místo přetékání. */
    #bulkToolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #bulkToolbar .btn { flex-shrink: 0; }

    /* Lišta období (Celý rok / Q1–Q4 / měsíc) se vejde na jeden posuvný řádek. */
    #rangeBar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
    #rangeBar > * { flex-shrink: 0; }

}

/* ════════════════════════════════════════════════════════════
   Hustota zobrazení – doladěno měřením v 390px viewportu
   a na desktopu 1440px (8/2026).
   ════════════════════════════════════════════════════════════ */

/* ── Bootstrapí .flex-wrap nese !important, takže pravidla výš,
      která chtěla nowrap, nikdy neplatila. Proto tady znovu. ── */
@media (max-width: 767px) {
    /* Lišta výběru dokladů je krátká, ta se vodorovně posouvat může.
       U lišty období to ale znamenalo uříznutý výběr měsíce, tlačítko
       „Uložit filtr" úplně mimo obrazovku a přes celou šířku posuvník.
       Dva klidné řádky jsou lepší než jeden posuvný. */
    #bulkToolbar { flex-wrap: nowrap !important; }
    #rangeBar { overflow-x: visible; }
    #rangeBar > * { flex-shrink: 1; }
}

@media (max-width: 575px) {
    /* ── Rozbalený filtr byl přes celou obrazovku ────────────────
          Uvnitř panelu stačí menší dotykové cíle (38 px) než u hlavních
          akcí – jinak se sem vejde jen filtr a žádný doklad. ── */
    #filtersWrap .filter-bar { padding: .5rem .55rem; gap: .35rem !important; }
    #filtersWrap .filter-bar > .btn,
    #filtersWrap .filter-bar .btn-group .btn,
    #filtersWrap #rangeBar .btn { min-height: 38px; padding: .3rem .55rem; font-size: .8rem; }
    #filtersWrap .filter-bar .form-select,
    #filtersWrap .filter-bar .form-control,
    #filtersWrap #rangeBar .form-select { min-height: 38px; font-size: .85rem; }

    /* Tisk, Přehled a účetní rok patří na jeden řádek. */
    #filtersWrap .filter-bar > form { margin-left: auto; }

    /* Období a měsíc taky na jeden řádek, ne pod sebe. */
    #filtersWrap #rangeBar { gap: .35rem !important; margin-bottom: .5rem !important; }
    #filtersWrap #rangeBar > .form-select,
    #filtersWrap #rangeBar select { width: auto; flex: 0 0 auto; }

    /* Sbalovací tlačítko nemusí být tak vysoké jako hlavní akce. */
    [data-bs-target="#filtersWrap"] { min-height: 38px; padding: .3rem .55rem; }
}

@media (max-width: 575px) {
    /* ── Karta dokladu kompaktněji ──────────────────────────────
          Karta měla na mobilu široké odsazení – na displej se vešly
          sotva dva doklady. Směr flexu NEMĚNIT: obsah i akce jsou v jednom
          kontejneru a řádkové rozložení text rozseká na svislé sloupce. ── */
    .invoice-card { padding: .6rem .7rem .6rem .95rem; margin-bottom: .4rem; }
    /* Tlačítka v kartě zůstávají dobře trefitelná, ale nemusí být tak vysoká
       jako samostatné akce nad seznamem. */
    .invoice-card .btn-sm { min-height: 40px; padding: .35rem .65rem; font-size: .82rem; }
    .invoice-card .badge { font-size: .7rem; }
}

@media (max-width: 575px) {
    /* ── Seznam dokladů: než se objevila první faktura, bylo potřeba
          odrolovat 810 px. Statistiky vedle sebe + tisk a účetní rok
          na jednom řádku to stlačily na ~540 px. ── */
    #statsRow { --bs-gutter-x: .4rem; --bs-gutter-y: .4rem; }
    #statsRow > [class*="col-"] { flex: 0 0 33.333%; max-width: 33.333%; width: 33.333%; }
    /* Tři dlaždice zabíraly tři řádky drobného textu. Popisek je teď jednořádkový
       a hodnota naopak větší, ať je čitelná – blok je nižší a přitom líp vidět. */
    #statsRow .stat-box { padding: .4rem .5rem; }
    #statsRow .stat-box-label {
        font-size: .72rem; line-height: 1.15; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis;
    }
    #statsRow .stat-box-label .stat-count { opacity: .7; }
    #statsRow .stat-box-value { font-size: 1.05rem; white-space: nowrap; line-height: 1.2; }

    /* Pořadí: ikony akcí a účetní rok na první řádek, pak filtry a hledání.
       Výchozí order má i každý další potomek, aby se nově přidané tlačítko
       (např. „Přehled dle protistrany") nevecpalo před tiskovou ikonu. */
    .filter-bar > * { order: 3; }
    .filter-bar > .btn { order: 1; width: auto; flex: 0 0 auto; min-width: 44px; }
    /* Samotné ikony byly nečitelné („co ta tlačítka?“) – necháme u nich
       krátký popisek, i za cenu jednoho řádku navíc. */
    .filter-bar > .btn > span { display: inline; font-size: .8rem; }
    .filter-bar > form { order: 2; width: auto; flex: 1 1 auto; justify-content: flex-end; }
    .filter-bar > .btn-group { order: 4; width: 100%; }
    .filter-bar > .btn-group > .btn { min-width: 0; }   /* podfiltry zůstávají široké */
    .filter-bar > .btn-group > .btn > span { display: inline; }
    .filter-bar > .position-relative { order: 5; width: 100%; max-width: none; }

    /* ── Náhled dokladu: tabulka položek přetékala o 84 px a sloupec
          „Celkem" byl uříznutý. ── */
    #previewModal .table { font-size: .78rem; }
    #previewModal .table th,
    #previewModal .table td { padding: .3rem .32rem; }
    #previewModal .table th { font-size: .68rem; letter-spacing: 0; }

    /* ── Adresář odběratelů: tabulka byla 570 px široká do 341 px místa. ── */
    #customerStats > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    #customersTable { table-layout: fixed; width: 100%; }
    #customersTable th:nth-child(1), #customersTable td:nth-child(1) { width: 40%; }
    #customersTable th:nth-child(4), #customersTable td:nth-child(4) { width: 30%; }
    #customersTable th:nth-child(5), #customersTable td:nth-child(5) { width: 30%; }

    /* Akce jako ikony vedle sebe – ušetří ~90 px šířky na řádek. */
    .cust-actions { flex-direction: row !important; flex-wrap: wrap; gap: .25rem !important; }
    .cust-actions .btn-label { display: none; }
    .cust-actions .btn { width: auto !important; min-width: 44px; min-height: 44px; padding: .25rem .3rem; }
    .cust-actions .btn .bi { margin-right: 0 !important; }

    /* ── Široké tabulky obecně (historie, opakované doklady). ── */
    .table-responsive .table { font-size: .84rem; }
    .table-responsive .table th,
    .table-responsive .table td { padding: .5rem .45rem; }

    /* Lámat slova jen tam, kde je fixed layout (adresář). Jinde by se
       rozsekala čísla dokladů a datumy doprostřed. */
    #customersTable th,
    #customersTable td { overflow-wrap: break-word; }

    /* Datum a čas se smí zalomit – tabulky jsou pak výrazně užší. */
    #activityTable .text-nowrap,
    #scheduleTable .text-nowrap { white-space: normal !important; }

    /* Interval u opakovaných dokladů: je vidět v detailu šablony. */
    #recurringTable th:nth-child(5),
    #recurringTable td:nth-child(5) { display: none; }

    .table-responsive .badge,
    .table-responsive .badge-status { font-size: .7rem; padding: .2rem .4rem; }
    .table-responsive { scrollbar-width: thin; }
    .table-responsive::-webkit-scrollbar { height: 3px; }
    .table-responsive::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* ── Dotykové cíle ──────────────────────────────────────────
          WCAG 2.5.5 doporučuje 44×44 px. .btn-sm měl 32 px.
          Samotné min-height ale nechalo drobné písmo plavat uprostřed
          vysokého rámečku – vypadalo to jako přepadaný padding. Proto
          k výšce ladíme i velikost písma a vnitřní odsazení. ── */
    .btn, .btn-sm { min-height: 44px; }
    .btn-sm {
        font-size: .875rem;
        padding: .45rem .8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
    }
    .navbar-brand { min-height: 44px; }

    /* Formulářové prvky mají 35–39 px – výběr roku, měsíce nebo filtru
       odběratelů se špatně trefoval prstem. */
    .form-select, .form-control,
    .form-select-sm, .form-control-sm { min-height: 44px; }

    /* Křížek v modalu měl 31×31 px. */
    /* .modal-header .btn-close od Bootstrapu má vyšší specificitu (padding .5rem),
       proto stejně specifický selektor, ne jen .btn-close. */
    .btn-close,
    .modal-header .btn-close {
        width: 44px; height: 44px;
        padding: 0;
        margin: 0 0 0 auto;
        background-size: 1rem;
    }

    /* Samostatné odkazy ve stylu tlačítka (Zapomenuté heslo, „Vše →"). */
    .btn-link,
    a.small.text-decoration-none {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Odkazy uvnitř textu (číslo dokladu, jméno odběratele) nesmí povyrůst,
       jinak se rozhodí karta. Padding na inline prvku zvětší plochu k trefení,
       ale řádkování nechá být. */
    footer a,
    .app-footer a,
    .cc-link,
    .due-soon-item a[href],
    .invoice-card a[href],
    .list-group-item a[href] { padding-block: .35rem; }
}

/* ── Dotykové cíle nezávisle na šířce ──────────────────────────
      Tablet na výšku nebo telefon na šířku mají přes 575 px, ale prst
      je pořád stejně velký. Šířkové pravidlo výš proto doplňujeme
      dotazem na ukazovací zařízení – myši na desktopu se to netýká,
      tam zůstává kompaktní zobrazení. */
@media (hover: none) and (pointer: coarse) {
    .btn, .btn-sm { min-height: 44px; }
    .btn-sm {
        font-size: .875rem;
        padding: .45rem .8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
    }
    .form-select, .form-control,
    .form-select-sm, .form-control-sm { min-height: 44px; }
    .navbar-brand { min-height: 44px; }
    .btn-close,
    .modal-header .btn-close {
        width: 44px; height: 44px;
        padding: 0;
        margin: 0 0 0 auto;
        background-size: 1rem;
    }
    .btn-link,
    a.small.text-decoration-none { min-height: 44px; display: inline-flex; align-items: center; }
    footer a,
    .app-footer a,
    .cc-link,
    .due-soon-item a[href],
    .invoice-card a[href],
    .list-group-item a[href] { padding-block: .35rem; }
}

/* Na úzkých telefonech (SE, 320 px) se šestimístná částka na jeden řádek
   nevejde – radši menší písmo a zalomení než přetečení dlaždice. */
@media (max-width: 400px) {
    #statsRow .stat-box-label { font-size: .7rem; }
    #statsRow .stat-box-value { font-size: .86rem; white-space: normal; }
}

/* ── Desktop: hustší výpis dokladů ─────────────────────────────
      Řádek měl 95 px na tři textové řádky pod sebou. Odběratel
      a popis se vejdou na jeden → 66 px a o čtvrtinu kratší stránka. */
@media (min-width: 992px) {
    .invoice-card { padding: .6rem .85rem !important; }
    .invoice-card .flex-grow-1 { display: block; line-height: 1.35; min-width: 0; }
    .invoice-card .flex-grow-1 > .text-muted.mt-1 { display: inline; margin-top: 0 !important; }
    .invoice-card .flex-grow-1 > .text-muted.small { display: inline; }
    .invoice-card .flex-grow-1 > .text-muted.mt-1::after { content: "·"; margin: 0 .4rem; opacity: .55; }

    .stat-box { padding: .7rem 1rem; }
    .stat-box-value { font-size: 1.35rem; }
    .stat-box-label { font-size: .72rem; }
    .card-body { padding: 1rem; }
    .card-header { padding: .7rem 1rem; }
    .form-section { padding: 1rem !important; }
    .table th, .table td { padding: .45rem .6rem; }
}

/* Šířky sloupců adresáře platí od tabletu výš (na mobilu je fixed layout). */
@media (min-width: 576px) {
    #customersTable th:nth-child(3) { width: 100px; }
    #customersTable th:nth-child(4) { min-width: 130px; }
    #customersTable th:nth-child(5) { width: 130px; }
}

/* ── Svislé menu (nastavení firmy: menu_layout = vertical) ──────────────
   Pod 992 px zůstává všechno jako dřív: sbalený navbar nahoře, ovládaný
   hamburgerem. Postranní panel se zapíná až na širokých displejích, kde
   je na něj místo – jinak by na mobilu ukrojil polovinu obrazovky. */
@media (min-width: 992px) {
    body.menu-vertical { padding-top: 0 !important; padding-left: 252px; }

    body.menu-vertical .navbar.fixed-top {
        width: 252px;
        height: 100vh;
        top: 0;
        left: 0;
        right: auto;
        overflow-y: auto;
        overflow-x: hidden;
        align-items: stretch;
        padding-top: .85rem;
        padding-bottom: .85rem;
        border-right: 1px solid var(--line, #e2e8f0);
        border-bottom: 0;
    }
    /* Vnitřní .container musí být sloupec přes celou výšku, jinak by se
       spodní blok (firma / odhlásit) neměl čím odsunout dolů. */
    body.menu-vertical .navbar.fixed-top > .container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        max-width: none;
        width: 100%;
        min-height: 100%;
        padding-left: .85rem;
        padding-right: .85rem;
    }
    body.menu-vertical .navbar-brand { margin: 0 0 .9rem 0; }

    body.menu-vertical .navbar-collapse {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        flex: 1 1 auto;
        width: 100%;
    }
    body.menu-vertical .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 0 !important;
    }
    body.menu-vertical .navbar-nav .nav-link {
        padding: .4rem .55rem;
        border-radius: .4rem;
    }

    /* Blok s firmou, ozubeným kolem a odhlášením patří dolů a pod sebe –
       vodorovně by se do 252 px nevešel a překrýval by položky menu. */
    body.menu-vertical .navbar-collapse > .d-flex {
        flex-direction: column;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        margin-left: 0 !important;
        margin-top: auto;
        padding-top: .85rem;
        gap: .5rem !important;
        border-top: 1px solid var(--line, #e2e8f0);
    }
    body.menu-vertical .navbar-collapse > .d-flex .firm-info {
        text-align: left !important;
        margin-bottom: 0 !important;
    }
    body.menu-vertical .navbar-collapse > .d-flex form { width: 100%; }
    body.menu-vertical .navbar-collapse > .d-flex form .btn { width: 100%; }

    /* Rozbalovací nabídky v panelu nemají kam vyjet – necháme je v toku. */
    body.menu-vertical .navbar .dropdown-menu {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        float: none;
        width: 100%;
        border: 0;
        box-shadow: none;
        padding: 0 0 .25rem .5rem;
        margin: 0;
        background: transparent;
        /* Rozbalená nabídka se v panelu roluje s celým panelem – vlastní
           scrollbar uvnitř sloupce vypadal jako okno v okně. */
        max-height: none !important;
        overflow: visible !important;
    }
    body.menu-vertical .navbar .dropdown-item {
        padding: .3rem .5rem;
        font-size: .85rem;
        min-height: 0;
    }
    body.menu-vertical .navbar .dropdown-menu .dropdown-divider { margin: .25rem 0; }
}

/* Uživatel bez myši musí na odkaz doskákat tabulátorem i v postranním panelu. */
body.menu-vertical .navbar .nav-link:focus-visible,
body.menu-vertical .navbar .dropdown-item:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ── Sekce ve svislém menu (2026-09-07, vzhled přepracován 2026-09-10) ──
   Ve svislém režimu se místo dropdownů vykreslují skupiny s nadpisem
   (index.php, $menuGroups). Nadpis je tlačítko: skupiny jsou sbalené a
   rozbalí se kliknutím (nebo samy, když je v nich otevřená stránka).
   2026-09-10 („to vertikální menu nějak vylepši“): drobné verzálky s čarou
   nad každou skupinou vypadaly spíš jako patička než jako menu. Nadpisy
   jsou teď běžné řádky se stejným sloupcem ikon jako horní položky,
   podpoložky mají vodítko vlevo, aktivní stránka proužek a „Nový doklad“
   je tlačítko úplně nahoře. */
body.menu-vertical .navbar-nav .nav-link,
body.menu-vertical .navbar-nav .nav-section-title,
body.menu-vertical .navbar-actions .nav-settings {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* mobilní pravidlo pro dotykové cíle jinak text centruje */
}
/* Jednotný sloupec ikon – text všech položek začíná na stejné svislici. */
body.menu-vertical .navbar-nav .nav-link > i.bi:first-child,
body.menu-vertical .navbar-nav .nav-section-title > i.bi:first-child,
body.menu-vertical .navbar-actions .nav-settings > i.bi:first-child {
    width: 1.25rem;
    flex: 0 0 1.25rem;
    text-align: center;
    margin-right: .55rem !important;
    font-size: 1rem;
}
body.menu-vertical .navbar .nav-link.active {
    box-shadow: inset 3px 0 0 var(--brand-start, #2563eb);
}
/* Admin odkaz „Správa Premium“ má popisek jen na širokém displeji kvůli
   vodorovné liště – v panelu je místa dost, samotná hvězdička byla záhada. */
body.menu-vertical .navbar-nav .nav-admin-label { display: inline !important; margin-left: 0 !important; }

/* „Nový doklad“ je hlavní akce aplikace – v panelu tlačítko úplně nahoře. */
body.menu-vertical .navbar-nav .nav-item-new { order: -1; margin-bottom: .6rem; }
body.menu-vertical .navbar-nav .nav-link.nav-new-doc {
    justify-content: center;
    background: var(--brand-grad, linear-gradient(135deg, #2563eb, #7c3aed));
    color: #fff !important;
    font-weight: 600;
    padding: .55rem .7rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
body.menu-vertical .navbar-nav .nav-link.nav-new-doc:hover,
body.menu-vertical .navbar-nav .nav-link.nav-new-doc.active {
    background: var(--brand-grad-h, linear-gradient(135deg, #1d4ed8, #6d28d9));
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(37,99,235,.35);
}
body.menu-vertical .navbar-nav .nav-link.nav-new-doc > i.bi:first-child {
    width: auto;
    flex: 0 0 auto;
    margin-right: .45rem !important;
}

body.menu-vertical .navbar-nav .nav-section-title {
    width: 100%;
    background: none;
    border: 0;
    border-radius: 8px;
    text-align: left;
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    padding: .4rem .55rem;
    margin: 0;
}
/* Jediná dělicí čára: mezi hlavními položkami a skupinami. */
body.menu-vertical .navbar-nav > .nav-item:not(.nav-section) + .nav-section {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid var(--border, #e2e8f0);
}
body.menu-vertical .navbar-nav .nav-section-title:hover {
    color: var(--brand-start, #2563eb);
    background: rgba(37,99,235,.07);
}
/* Rozbalená skupina má tmavší nadpis, ať je jasné, kam podpoložky patří. */
body.menu-vertical .navbar-nav .nav-section-title:not(.collapsed) { color: var(--text, #0f172a); }
body.menu-vertical .navbar-nav .nav-section-title:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
body.menu-vertical .navbar-nav .nav-section-caret {
    font-size: .7rem;
    opacity: .6;
    transition: transform .15s;
}
body.menu-vertical .navbar-nav .nav-section-title.collapsed .nav-section-caret {
    transform: rotate(-90deg);
}
@media (prefers-reduced-motion: reduce) {
    body.menu-vertical .navbar-nav .nav-section-caret { transition: none; }
}
/* Vodítko vede pod středem ikony nadpisu (odsazení .55rem + půl ikony). */
body.menu-vertical .navbar-nav .nav-section-items {
    margin: .1rem 0 .35rem 1.15rem;
    padding-left: .5rem;
    border-left: 1px solid var(--border, #e2e8f0);
}
body.menu-vertical .navbar-nav .nav-section-items .nav-link {
    font-size: .85rem;
    line-height: 1.3;
    padding: .3rem .55rem;
    border-radius: 6px;
}

/* Spodní blok panelu: firma jako karta, pod ní Nastavení a Odhlásit. */
@media (min-width: 992px) {
    body.menu-vertical .navbar-actions .firm-info {
        padding: .55rem .65rem;
        background: var(--surface-2, #f8fafc);
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 10px;
    }
    body.menu-vertical .navbar-actions .firm-info > div:first-child { margin-bottom: .2rem; }
    body.menu-vertical .navbar-actions .nav-settings { padding: .4rem .55rem; }
}

/* ====== Kompaktnější filtr faktur na mobilu (2026-09-05) ==================
   Uživatel: filtrační panel zabíral po rozbalení skoro celou obrazovku.
   Cíleno jen na #filtersWrap / #rangeBar, desktop beze změny. 44px dotykový
   cíl ustupuje kompaktnosti (36px je stále dobře trefitelné). */
@media (max-width: 575px) {
    button[data-bs-target="#filtersWrap"] { min-height: 40px; margin-bottom: .5rem !important; }
    #filtersWrap { margin-bottom: .25rem; }
    #filtersWrap .filter-bar {
        padding: .45rem .5rem !important;
        gap: .35rem !important;
        margin-bottom: .5rem !important;
    }
    #filtersWrap .filter-bar .btn-sm,
    #filtersWrap .filter-bar .form-select,
    #filtersWrap .filter-bar .form-control {
        min-height: 36px !important;
        padding-top: .25rem !important; padding-bottom: .25rem !important;
    }
    /* Stavové filtry (Vsechny/Neuhrazene/…) – tesna 2x2 mrizka. */
    #filtersWrap .filter-bar .btn-group { gap: .3rem; }
    #filtersWrap .filter-bar .btn-group .btn {
        min-height: 34px !important;
        font-size: .82rem;
        padding: .2rem .4rem !important;
    }
    /* Obdobi + Mesic – mensi mezery a nizsi prvky. */
    #rangeBar { gap: .35rem !important; margin-bottom: .6rem !important; }
    #rangeBar .btn-group { gap: .3rem; }
    /* Tady jsou tlacitka zamerne oddelena mezerou, takze ostre vnitrni rohy nechceme. */
    #rangeBar .btn-group > .btn { border-radius: var(--radius) !important; }
    #rangeBar .btn-sm { min-height: 34px !important; font-size: .82rem; padding: .2rem .55rem !important; }
    #rangeBar .form-select { min-height: 34px !important; padding-top: .2rem !important; padding-bottom: .2rem !important; }
    #rangeBar > .text-muted.small { width: 100%; margin-bottom: -.1rem; }
    /* Stavove filtry do JEDNOHO vodorovne rolovaciho radku misto 2x2 –
       usetri cely radek. Jemny fade napravo naznaci, ze se da rolovat. */
    #filtersWrap .filter-bar .btn-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: .3rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background-color: var(--surface);
        background-image:
            linear-gradient(to left, var(--surface), rgba(255,255,255,0) 28px),
            radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.16), rgba(15,23,42,0));
        background-position: right center, right center;
        background-repeat: no-repeat;
        background-size: 28px 100%, 14px 100%;
        background-attachment: local, scroll;
    }
    #filtersWrap .filter-bar .btn-group::-webkit-scrollbar { display: none; }
    #filtersWrap .filter-bar .btn-group .btn {
        flex: 0 0 auto !important;
        white-space: nowrap;
        min-height: 34px !important;
    }
}

/* ====== Adresar odberatelu na mobilu (2026-09-05) =======================
   Tabulka se do 375 px nevesla: dlouhy nazev pretekal pres obrat a 3 akcni
   tlacitka pod sebou. Na mobilu preklapime radky do karet + kompaktni
   souhrnne statistiky. Desktop (>=768 px) zustava tabulkou. */
@media (max-width: 767px) {
    #customerStats { margin-bottom: 1rem !important; }
    #customerStats > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    #customerStats .card-body { padding: .5rem .8rem !important; }
    #customerStats .card-body > .d-flex { gap: .65rem !important; }
    #customerStats .rounded-circle { width: 34px !important; height: 34px !important; }
    #customerStats .rounded-circle .bi { font-size: 1rem !important; }
    #customerStats .card-body .d-flex > div:last-child {
        display: flex; flex: 1; align-items: baseline;
        justify-content: space-between; gap: .5rem; min-width: 0;
    }
    #customerStats .fs-5 { font-size: 1.05rem !important; white-space: nowrap; }
    #customerStats .text-muted.small { font-size: .8rem; }

    #customersTable, #customersTable tbody, #customersTable tr, #customersTable td { display: block; width: 100%; }
    #customersTable thead { display: none; }
    #customersTable { table-layout: auto; border-collapse: separate; }
    #customersTable tr.cust-row {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        padding: .85rem;
        margin-bottom: .7rem;
    }
    #customersTable tr.cust-row.table-danger {
        border-color: rgba(239,68,68,.35);
        background: rgba(239,68,68,.03) !important;
    }
    #customersTable td { padding: 0 !important; border: 0 !important; }
    #customersTable td:first-child .d-flex { align-items: flex-start; }
    #customersTable td:first-child .d-flex > div { min-width: 0; }
    #customersTable td:first-child .fw-semibold { overflow-wrap: anywhere; }
    #customersTable td:first-child .small a { overflow-wrap: anywhere; word-break: break-all; }
    #customersTable td.text-end {
        text-align: left !important;
        margin-top: .6rem; padding-top: .6rem !important;
        border-top: 1px dashed var(--border) !important;
    }
    #customersTable .cust-actions {
        flex-direction: row !important; flex-wrap: nowrap;
        gap: .5rem !important;
        margin-top: .6rem; padding-top: .6rem;
        border-top: 1px dashed var(--border);
    }
    #customersTable .cust-actions .btn-label { display: none; }
    #customersTable .cust-actions > .btn,
    #customersTable .cust-actions > form { flex: 1 1 0; }
    #customersTable .cust-actions > form { display: flex; }
    #customersTable .cust-actions .btn {
        width: 100%; min-height: 42px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    #customersTable .cust-actions .btn .bi { margin: 0 !important; }
    /* Prazdna sekce obratu (odberatel bez dokladu) se na mobilu neukazuje. */
    #customersTable td.text-end.cust-empty { display: none !important; }
}

/* ====== Souhrnne statistiky -> tenke prouzky na mobilu (Dluznici, Projekty) */
@media (max-width: 575px) {
    .mob-stat-strip { --bs-gutter-y: .5rem; }
    .mob-stat-strip > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    /* Dluznici: karta label + castka na jednom radku. */
    .mob-stat-strip .card-body {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: .6rem; padding: .5rem .8rem !important;
    }
    .mob-stat-strip .card-body > * { margin: 0 !important; }
    .mob-stat-strip .card-body .text-muted.small,
    .mob-stat-strip .card-body .small { flex: 1; min-width: 0; }
    .mob-stat-strip .card-body .h5 { font-size: 1.05rem; white-space: nowrap; }
    /* Projekty: stat-box label + hodnota na jednom radku. */
    .mob-stat-strip .stat-box {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: .6rem; padding: .5rem .85rem;
    }
    .mob-stat-strip .stat-box .stat-box-label { margin-bottom: 0; flex: 1; min-width: 0; }
    .mob-stat-strip .stat-box .stat-box-value { font-size: 1.15rem; white-space: nowrap; }
}

/* ── Mobil: lišta vždy v jednom řádku (2026-10-08) ─────────────────────────
   Při zvětšeném písmu v telefonu (Android → Velikost textu) se lišta nepřihlášeného
   lámala do dvou řádků, ale obsah počítal s pevnými 64 px → horní část titulky
   zajela pod lištu. Teď se lišta nezalomí a odsazení obsahu se navíc dorovnává
   podle skutečné výšky lišty (--nav-h, viz skript v header.php). */
body.has-navbar { padding-top: var(--nav-h, 64px) !important; }
@media (min-width: 992px) { body.has-navbar.menu-vertical { padding-top: 0 !important; } }
@media (max-width: 575.98px) {
    /* jen lišta BEZ rozbalovacího menu (nepřihlášený) – přihlášenému se menu musí zalomit pod logo,
       jinak se rozbalené menu vmáčkne vedle loga (Tomáš 2026-10-12). Bez podpory :has platí původní zalamování. */
    .navbar > .container:not(:has(> .navbar-collapse)) { flex-wrap: nowrap; }
    .navbar > .container { gap: .5rem; }
    .navbar > .container > .navbar-brand { min-width: 0; flex: 0 1 auto; margin-right: 0; overflow: hidden; }
    .navbar > .container > .navbar-brand > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .navbar > .container > .ms-auto.d-flex { flex-wrap: nowrap !important; flex-shrink: 0; gap: .35rem !important; }
    .navbar > .container > .ms-auto.d-flex .btn { padding-left: .6rem; padding-right: .6rem; white-space: nowrap; }
}
/* Úzký telefon: registrace zůstává v tlačítkách „Začít zdarma“ na stránce, z lišty ustoupí */
@media (max-width: 399.98px) {
    .navbar > .container > .ms-auto.d-flex > [data-bs-target="#registerModal"] { display: none; }
    .navbar > .container > .ms-auto.d-flex > [data-bs-target="#loginModal"] .bi { display: none; }
    .navbar > .container > .ms-auto.d-flex > a[href="/navod"] { display: none; }
}