/**
 * style.css — Centrální styly pro IS Benediktinský aeroklub Broumov (LKBR)
 *
 * Struktura:
 *  1. CSS proměnné (design tokens)
 *  2. Reset a základní typografie
 *  3. Layout (body, container)
 *  4. IS hlavička (back link + název stránky)
 *  5. Tlačítka
 *  6. Formuláře
 *  7. Tabulky
 *  8. Alerty a zprávy
 *  9. Sekce a boxy
 * 10. Odznaky (štítky)
 * 11. Stránkování
 * 12. Utility třídy
 * 13. Responzivita
 */

/* ============================================================
   1. CSS PROMĚNNÉ
   ============================================================ */
:root {
    /* Primární paleta (shodná s veřejným webem lkbr.cz) */
    --color-primary:    #0ea5e9;
    --color-primary-dk: #0369a1;
    --color-dark:       #1e3a5f;

    /* Stavové barvy */
    --color-success:  #16a34a;
    --color-success-bg: #dcfce7;
    --color-danger:   #dc2626;
    --color-danger-bg: #fee2e2;
    --color-warning:  #d97706;
    --color-warning-bg: #fef3c7;
    --color-info:     #0891b2;
    --color-info-bg:  #e0f2fe;
    --color-purple:   #7c3aed;
    --color-purple-bg: #ede9fe;

    /* Neutrální */
    --bg-body:    #f1f5f9;
    --bg-card:    #ffffff;
    --bg-section: #f8fafc;
    --bg-muted:   #f1f5f9;

    /* Text */
    --text-main:  #1e293b;
    --text-muted: #64748b;
    --text-light: #94a3b8;

    /* Okraje */
    --border:       #e2e8f0;
    --border-focus: #0ea5e9;

    /* Zaoblení */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 8px;

    /* Stíny */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow:    0 2px 8px rgba(0,0,0,0.10);

    /* Typografie */
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-base: 14px;
}

[data-theme="dark"] {
    --color-primary:    #38bdf8;
    --color-primary-dk: #0284c7;
    --color-dark:       #f8fafc;

    --color-success:  #22c55e;
    --color-success-bg: rgba(34, 197, 94, 0.18);
    --color-danger:   #f87171;
    --color-danger-bg: rgba(239, 68, 68, 0.18);
    --color-warning:  #fbbf24;
    --color-warning-bg: rgba(245, 158, 11, 0.18);
    --color-info:     #22d3ee;
    --color-info-bg:  rgba(6, 182, 212, 0.18);
    --color-purple:   #c084fc;
    --color-purple-bg: rgba(168, 85, 247, 0.18);

    --bg-body:    #0f172a;
    --bg-card:    #1e293b;
    --bg-section: #0f172a;
    --bg-muted:   #0f172a;

    --text-main:  #f8fafc;
    --text-muted: #94a3b8;
    --text-light: #64748b;

    --border:       #334155;
    --border-focus: #38bdf8;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow:    0 2px 8px rgba(0,0,0,0.5);
}

/* ============================================================
   AUTOMATICKÝ GLOBÁLNÍ FILTR TMAVÉHO REŽIMU PRO VŠECHNY MODULY
   Přepíše lokální světlé styly na všech podstránkách najednou
   ============================================================ */
[data-theme="dark"] .form-box,
[data-theme="dark"] .admin-box,
[data-theme="dark"] .sekce-box,
[data-theme="dark"] .sekce,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .filtr-box,
[data-theme="dark"] .stat-box,
[data-theme="dark"] .stav-pokladny,
[data-theme="dark"] .tab-content,
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .panel,
[data-theme="dark"] .panel-default,
[data-theme="dark"] .box,
[data-theme="dark"] fieldset {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .tab, 
[data-theme="dark"] .tab-btn,
[data-theme="dark"] .nav-tabs > li > a {
    background-color: var(--bg-section) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .tab.active, 
[data-theme="dark"] .tab-btn.active,
[data-theme="dark"] .nav-tabs > li.active > a {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    border-top-color: var(--color-primary) !important;
    border-bottom-color: var(--bg-card) !important;
    color: var(--color-primary) !important;
}

[data-theme="dark"] .tab-nav,
[data-theme="dark"] .tab-bar {
    border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .tab-btn {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .tab-btn:hover {
    background-color: var(--bg-section) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .tab-btn.active {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
    background-color: rgba(56, 189, 248, 0.15) !important;
}

[data-theme="dark"] tfoot tr,
[data-theme="dark"] tfoot tr[style*="background: #f8fafc"],
[data-theme="dark"] tfoot tr[style*="background:#f8fafc"] {
    background-color: var(--bg-card) !important;
    border-top-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .modal-box {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .modal-header h3 {
    color: var(--text-main) !important;
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border) !important;
}

[data-theme="dark"] #form-prukaz,
[data-theme="dark"] .form-prukaz-box,
[data-theme="dark"] .form-container,
[data-theme="dark"] .form-box,
[data-theme="dark"] .sekce-form,
[data-theme="dark"] .sekce,
[data-theme="dark"] .tech-sekce,
[data-theme="dark"] #form-sazba,
[data-theme="dark"] #form-servis {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .popisek {
    color: var(--text-main) !important;
}

[data-theme="dark"] .btn-dark {
    background-color: var(--bg-section) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .sekce-vlek {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .stat-label {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .stat-val {
    color: var(--color-primary) !important;
}

[data-theme="dark"] .filter-bar,
[data-theme="dark"] .filtr-box {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

/* Dark Mode pravidla pro cashflow.php */
[data-theme="dark"] .kpi-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .kpi-title,
[data-theme="dark"] .kpi-sub {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .kpi-value {
    color: var(--text-main) !important;
}

[data-theme="dark"] .cf-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .cf-title {
    color: var(--text-main) !important;
}

[data-theme="dark"] .timeline-table th {
    background-color: var(--bg-section) !important;
    color: var(--text-main) !important;
    border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .timeline-table td {
    border-bottom-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .timeline-table tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .timeline-table tr[style*="background: #f1f5f9"],
[data-theme="dark"] .timeline-table tr[style*="background:#f1f5f9"] {
    background-color: var(--bg-section) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .nav-link-item {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .nav-link-item:hover {
    background-color: var(--bg-section) !important;
    color: var(--color-primary) !important;
}

[data-theme="dark"] .btn-print {
    background-color: var(--bg-section) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .btn-print:hover {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .form-group label {
    color: var(--text-muted) !important;
}

/* Dark Mode pravidla pro kalkulace_detail.php */
[data-theme="dark"] .summary-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .summary-val {
    color: var(--text-main) !important;
}

[data-theme="dark"] .kalkulace-tab-header {
    background-color: var(--bg-section) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] tr[style*="background-color: #f8fafc"],
[data-theme="dark"] tr[style*="background-color:#f8fafc"] {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .vzkaz {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .vzkaz-hlavicka {
    border-bottom-color: var(--border) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .vzkaz-nadpis,
[data-theme="dark"] .vzkaz-text {
    color: var(--text-main) !important;
}

[data-theme="dark"] .priloha {
    background-color: var(--bg-section) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

/* Dark Mode pravidla pro kalendar.php modal */
[data-theme="dark"] #udalost-modal {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] #modal-nadpis {
    color: var(--text-main) !important;
}

[data-theme="dark"] #modal-popis {
    color: var(--text-muted) !important;
}

/* Dark Mode pravidla pro dochazka.php */
[data-theme="dark"] .member-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .member-item:hover {
    border-color: var(--color-primary) !important;
    background-color: var(--bg-section) !important;
}

[data-theme="dark"] .member-item.auto {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: var(--text-main) !important;
}

/* Dark Mode pravidla pro štítky (badges) napříč všemi moduly */
[data-theme="dark"] .stitek-primary { background-color: rgba(37, 99, 235, 0.25) !important; color: #60a5fa !important; }
[data-theme="dark"] .stitek-success { background-color: rgba(22, 163, 74, 0.25) !important; color: #4ade80 !important; }
[data-theme="dark"] .stitek-danger  { background-color: rgba(220, 38, 38, 0.25) !important; color: #f87171 !important; }
[data-theme="dark"] .stitek-warning { background-color: rgba(245, 158, 11, 0.25) !important; color: #fbbf24 !important; }
[data-theme="dark"] .stitek-info    { background-color: rgba(2, 132, 199, 0.25) !important; color: #38bdf8 !important; }
[data-theme="dark"] .stitek-purple  { background-color: rgba(147, 51, 234, 0.25) !important; color: #c084fc !important; }
[data-theme="dark"] .stitek-gray    { background-color: rgba(255, 255, 255, 0.1) !important; color: #cbd5e1 !important; }

/* Dark Mode pravidla pro sklad.php */
[data-theme="dark"] .obal-tag {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: #fb923c !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

/* Dark Mode pravidla pro Quill WYSIWYG Editor v web_sprava.php */
[data-theme="dark"] .ql-toolbar,
[data-theme="dark"] .ql-container {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .ql-editor {
    color: var(--text-main) !important;
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .ql-stroke {
    stroke: var(--text-main) !important;
}

[data-theme="dark"] .ql-fill {
    fill: var(--text-main) !important;
}

[data-theme="dark"] .ql-picker {
    color: var(--text-main) !important;
}

[data-theme="dark"] .ql-picker-options {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .settlement-box {
    background-color: var(--bg-card) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .settlement-title,
[data-theme="dark"] .settlement-val {
    color: var(--color-primary) !important;
}

[data-theme="dark"] .radek-odleteno {
    background-color: var(--bg-section) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .badge-paid {
    background-color: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

[data-theme="dark"] .badge-unpaid {
    background-color: rgba(220, 38, 38, 0.2) !important;
    color: #f87171 !important;
}

[data-theme="dark"] .badge-settled {
    background-color: var(--bg-section) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .akce-select {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .stat-box {
    background-color: var(--bg-section) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .stat-box strong {
    color: var(--color-primary) !important;
}

[data-theme="dark"] .badge-ok {
    background-color: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

[data-theme="dark"] .badge-warn {
    background-color: rgba(234, 179, 8, 0.2) !important;
    color: #facc15 !important;
}

[data-theme="dark"] .badge-info {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}

[data-theme="dark"] tr.tr-editing,
[data-theme="dark"] tr:target,
[data-theme="dark"] tr[style*="#fff3cd"],
[data-theme="dark"] tr[style*="#fff9c4"],
[data-theme="dark"] tr[style*="background-color:#fff3cd"],
[data-theme="dark"] tr[style*="background-color: #fff3cd"],
[data-theme="dark"] tr[style*="background-color: #e2e3e5"],
[data-theme="dark"] tr[style*="background-color:#e2e3e5"] {
    background-color: rgba(245, 158, 11, 0.25) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] tr.tr-editing td,
[data-theme="dark"] tr:target td,
[data-theme="dark"] tr[style*="#fff3cd"] td,
[data-theme="dark"] tr[style*="#fff9c4"] td {
    color: var(--text-main) !important;
}

[data-theme="dark"] tr.tr-editing small,
[data-theme="dark"] tr:target small,
[data-theme="dark"] tr[style*="#fff3cd"] small,
[data-theme="dark"] tr[style*="#fff9c4"] small {
    color: var(--text-muted) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] legend {
    color: var(--text-main) !important;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Ochrana proti bilemu pozadi pri automatickem vyplneni hesla/emailu v prohlizeci */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover, 
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: #f8fafc !important;
    -webkit-box-shadow: 0 0 0px 1000px #0f172a inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Prepis zlutozlatych zvyraznovacich boxu v tmavem rezimu */
[data-theme="dark"] [style*="background: #fff8e1"],
[data-theme="dark"] [style*="background:#fff8e1"],
[data-theme="dark"] [style*="background: #fff3cd"],
[data-theme="dark"] [style*="background:#fff3cd"],
[data-theme="dark"] [style*="background: #fafafa"],
[data-theme="dark"] [style*="background:#fafafa"] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] table {
    border-color: var(--border) !important;
}
[data-theme="dark"] th {
    background-color: var(--bg-section) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] td {
    border-color: var(--border) !important;
}
[data-theme="dark"] tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}
[data-theme="dark"] tr:hover td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ============================================================
   2. RESET A ZÁKLADNÍ TYPOGRAFIE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font);
    font-size: var(--font-size-base);
    background: var(--bg-body);
    color: var(--text-main);
    margin: 0;
    padding: 20px;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    color: var(--color-dark);
    margin-top: 0;
}

a { color: var(--color-primary-dk); }
a:hover { color: var(--color-primary); }

/* ============================================================
   3. LAYOUT
   ============================================================ */

/* Standardní kontejner (většina IS stránek) */
.container {
    background: var(--bg-card);
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Úzký kontejner (formuláře, pokladna) */
.container-sm {
    max-width: 820px;
}

/* Široký kontejner (kniha letů, tisk) */
.container-lg {
    max-width: 1340px;
}

/* ============================================================
   4. IS HLAVIČKA (back link + název stránky)
   ============================================================ */
.is-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.is-header h1,
.is-header h2 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--color-dark);
}

.btn-zpet {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9em;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-zpet:hover {
    background: var(--bg-muted);
    color: var(--text-main);
    border-color: #cbd5e1;
}

/* Záhlaví sekce (h2/h3 s oddělovací čárou) */
.sekce-titulek {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--color-dark);
    margin-top: 24px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}

/* ============================================================
   5. TLAČÍTKA
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, background 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Varianty */
.btn-primary   { background: var(--color-primary);    color: white; }
.btn-primary:hover   { background: var(--color-primary-dk); color: white; }

.btn-dark      { background: var(--color-dark);       color: white; }
.btn-dark:hover      { background: #163059; color: white; }

.btn-success   { background: var(--color-success);    color: white; }
.btn-success:hover   { background: #15803d; color: white; }

.btn-danger    { background: var(--color-danger);     color: white; }
.btn-danger:hover    { background: #b91c1c; color: white; }

.btn-warning   { background: var(--color-warning);    color: white; }
.btn-warning:hover   { background: #b45309; color: white; }

.btn-purple    { background: var(--color-purple);     color: white; }
.btn-purple:hover    { background: #6d28d9; color: white; }

.btn-info      { background: var(--color-info);       color: white; }
.btn-info:hover      { background: #0e7490; color: white; }

.btn-secondary {
    background: var(--bg-muted);
    color: var(--text-main);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background: #e2e8f0; }

.btn-outline {
    background: transparent;
    color: var(--color-primary-dk);
    border: 1px solid var(--color-primary);
}
.btn-outline:hover { background: var(--color-info-bg); }

/* Velikosti */
.btn-sm { padding: 5px 10px; font-size: 0.8em; border-radius: var(--radius-sm); }
.btn-lg { padding: 11px 22px; font-size: 1em; }
.btn-block { width: 100%; justify-content: center; }

/* ============================================================
   6. FORMULÁŘE
   ============================================================ */
label {
    display: block;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--text-muted);
    margin-bottom: 5px;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.95em;
    color: var(--text-main);
    background: var(--bg-card);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

textarea { resize: vertical; min-height: 80px; }

/* Mřížkové layouty formulářů */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr;         gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr;     gap: 16px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }

/* Formulářová skupina */
.form-group { margin-bottom: 14px; }

/* ============================================================
   7. TABULKY
   ============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    margin-top: 8px;
}

th {
    background: var(--bg-section);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 12px;
    border: 1px solid var(--border);
    text-align: left;
}

td {
    padding: 10px 12px;
    border: 1px solid var(--border);
    vertical-align: middle;
}

tr:hover td { background: var(--bg-muted); }

/* Seřaditelné sloupce */
.th-klik {
    cursor: pointer;
    color: var(--color-primary-dk);
    user-select: none;
}
.th-klik:hover { text-decoration: underline; }
.th-sort { color: var(--color-primary-dk); text-decoration: none; user-select: none; white-space: nowrap; }
.th-sort:hover { text-decoration: underline; }
.th-sort .sort-icon { font-size: 0.8em; color: #aaa; margin-left: 2px; }
.th-sort.sort-active .sort-icon { color: var(--color-primary-dk); }

/* Textový filtr pod hlavičkou */
.filter-input,
.filter-date {
    width: 100%;
    padding: 4px 6px;
    margin-top: 5px;
    font-weight: normal;
    font-size: 0.85em;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-family: var(--font);
    box-sizing: border-box;
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================================
   8. ALERTY A ZPRÁVY
   ============================================================ */
.zprava,
.alert,
.alert-success {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.zprava,
.alert-success { background: var(--color-success);    color: white; }
.chyba,
.alert-danger  { background: var(--color-danger);     color: white;
                 padding: 12px 16px; border-radius: var(--radius);
                 font-weight: 600; margin-bottom: 16px; }
.alert-warning { background: var(--color-warning-bg); color: #92400e;
                 border: 1px solid #fde68a; }
.alert-info    { background: var(--color-info-bg);    color: #0c4a6e;
                 border: 1px solid #bae6fd; }

/* Jemnější varianty (nezvýrazněné) */
.alert-success-soft {
    background: var(--color-success-bg);
    color: #14532d;
    border: 1px solid #86efac;
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
}
.alert-danger-soft {
    background: var(--color-danger-bg);
    color: #7f1d1d;
    border: 1px solid #fca5a5;
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
}

/* ============================================================
   9. SEKCE A BOXY
   ============================================================ */

/* Obecný ohraničený box (s barevným levým pruhem) */
.sekce-box {
    background: var(--bg-section);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 20px;
    border-left: 4px solid var(--color-primary);
}

.sekce-box.zelena  { border-left-color: var(--color-success); }
.sekce-box.cervena { border-left-color: var(--color-danger);  }
.sekce-box.fialova { border-left-color: var(--color-purple);  }
.sekce-box.oranzova { border-left-color: var(--color-warning); }

/* Admin / formulářový box */
.admin-box,
.filtr-box {
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}

/* Box se zůstatkem / velkým číslem */
.zustatek-box {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.zustatek-box .label {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.zustatek-box .castka-velka {
    font-size: 2.6em;
    font-weight: 700;
    line-height: 1.1;
}

/* ============================================================
   10. ODZNAKY (ŠTÍTKY)
   ============================================================ */
.stitek {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.stitek-primary { background: #dbeafe; color: #1d4ed8; }
.stitek-success { background: var(--color-success-bg); color: #14532d; }
.stitek-danger  { background: var(--color-danger-bg);  color: #7f1d1d; }
.stitek-warning { background: var(--color-warning-bg); color: #78350f; }
.stitek-info    { background: var(--color-info-bg);    color: #0c4a6e; }
.stitek-purple  { background: var(--color-purple-bg);  color: #4c1d95; }
.stitek-gray    { background: #f1f5f9; color: #475569; }

/* Starý styl štítku (tmavé pozadí, bílý text) — zpětná kompatibilita */
.stitek-dark {
    background: #475569;
    color: white;
    display: inline-block;
    padding: 3px 7px;
    border-radius: var(--radius-sm);
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
}

/* ============================================================
   11. STRÁNKOVÁNÍ
   ============================================================ */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.page-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
    font-family: var(--font);
}

.page-btn:hover    { background: var(--bg-muted); color: var(--text-main); }
.page-btn.active   { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.page-btn:disabled { opacity: 0.45; cursor: default; }

/* ============================================================
   12. UTILITY TŘÍDY
   ============================================================ */
.plus   { color: var(--color-success); }
.minus  { color: var(--color-danger);  }

.text-muted  { color: var(--text-muted); }
.text-light  { color: var(--text-light); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-bold   { font-weight: 700; }

.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mt-1  { margin-top: 8px; }
.mb-1  { margin-bottom: 8px; }
.mt-2  { margin-top: 16px; }
.mb-2  { margin-bottom: 16px; }
.mt-3  { margin-top: 24px; }
.mb-3  { margin-bottom: 24px; }

.d-flex       { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.flex-wrap { flex-wrap: wrap; }

.w-auto { width: auto !important; }

/* Wrapper pro horizontálně scrollovatelné tabulky na mobilu */
.table-wrap {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Responzivní gridy pro formuláře (pojmenované varianty) */
.grid-2-1   { display: grid; grid-template-columns: 2fr 1fr;       gap: 16px; }
.grid-3-col { display: grid; grid-template-columns: 1fr 1fr 1fr;   gap: 16px; }
.grid-2-2-1 { display: grid; grid-template-columns: 2fr 2fr 1fr;   gap: 16px; }

/* ============================================================
   13. RESPONZIVITA
   ============================================================ */
@media (max-width: 768px) {
    body { padding: 10px; }

    .container { padding: 16px; border-radius: var(--radius); }

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-2-1,
    .grid-3-col,
    .grid-2-2-1 { grid-template-columns: 1fr; }

    table { font-size: 0.82em; }
    th, td { padding: 8px; }

    .is-header { flex-direction: column; align-items: flex-start; gap: 8px; }

    .btn-lg { padding: 9px 16px; font-size: 0.95em; }

    /* Flex řádky s tlačítky — zalamovat na mobilu */
    .flex-row-btns {
        flex-direction: column;
        align-items: stretch;
    }
    .flex-row-btns .btn { justify-content: center; }
}

@media (max-width: 480px) {
    .pagination { gap: 2px; }
    .page-btn   { padding: 5px 9px; font-size: 0.82em; }

    /* Boxy se zůstatkem — menší číslo */
    .zustatek-box .castka-velka { font-size: 2em; }
}

/* ============================================================
   14. TLAČÍTKO "NAHORU"
   ============================================================ */
#btn-nahoru {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-dark);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 44px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s, background 0.2s;
    z-index: 999;
}

#btn-nahoru.viditelny {
    opacity: 1;
    visibility: visible;
}

#btn-nahoru:hover {
    background: var(--color-primary-dk);
}

@media (max-width: 768px) {
    #btn-nahoru { bottom: 16px; right: 16px; width: 40px; height: 40px; line-height: 40px; }
}

/* ============================================================
   15. PLÁNOVAČ SLUŽEB RADIO
   ============================================================ */
.badge-volno {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid rgba(217, 119, 6, 0.3);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
}

.badge-obsazeno {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid rgba(22, 163, 74, 0.3);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.88em;
}

.badge-moje {
    background-color: var(--color-purple-bg);
    color: var(--color-purple);
    border: 1px solid rgba(124, 58, 237, 0.3);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.88em;
}

[data-theme="dark"] .badge-volno {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #facc15 !important;
    border-color: rgba(250, 204, 21, 0.3) !important;
}

[data-theme="dark"] .badge-obsazeno {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

[data-theme="dark"] .badge-moje {
    background-color: rgba(168, 85, 247, 0.2) !important;
    color: #c084fc !important;
    border-color: rgba(192, 132, 252, 0.3) !important;
}

/* ============================================================
   16. STANDARDIZOVANÁ VÝŠKA PRVKŮve FILTROVACÍCH BARECH (42px)
   ============================================================ */
.filter-input,
.form-control-std {
    height: 42px !important;
    min-height: 42px !important;
    line-height: 40px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-size: 0.92rem !important;
    border-radius: 6px !important;
}

.filtr-box .btn,
.filter-bar .btn {
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    font-size: 0.92rem !important;
}

/* ============================================================
   DARK MODE OVERRIDES - SKLAD A KANTÝNA
   ============================================================ */
[data-theme="dark"] .tab-bar {
    border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .tab-btn {
    background-color: var(--bg-section) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .tab-btn:hover {
    background-color: var(--bg-muted) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .tab-btn.active {
    background-color: var(--bg-card) !important;
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .polozka-row {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .polozka-row input[readonly],
[data-theme="dark"] input[readonly] {
    background-color: var(--bg-section) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] [id^="obaly_wrap_"],
[data-theme="dark"] [style*="background:#fff7ed"],
[data-theme="dark"] [style*="background: #fff7ed"],
[data-theme="dark"] [style*="background:#f0f9ff"],
[data-theme="dark"] [style*="background: #f0f9ff"] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .input-skutecnost {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .input-skutecnost:focus {
    border-color: #38bdf8 !important;
    background-color: #1e293b !important;
}

[data-theme="dark"] tr.inv-row:hover {
    background-color: var(--bg-section) !important;
}

[data-theme="dark"] .kpi-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .kpi-title {
    color: var(--text-muted) !important;
}

/* ============================================================
   14. DETAIL SKLADOVÉ KARTY - LEVÉ VERTIKÁLNÍ ZÁLOŽKY (ERP / K2 STYL)
   ============================================================ */
.card-editor-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 16px;
}

.card-editor-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 16px;
}

.card-sidebar-header {
    padding: 8px 12px 12px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.card-sidebar-title {
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0;
}

.card-editor-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius);
    transition: all 0.15s ease;
    margin-bottom: 8px;
    background: var(--bg-section);
    border: 1px solid var(--border);
}

.card-nav-back:hover {
    color: var(--color-primary-dk);
    border-color: var(--color-primary);
    background: var(--bg-card);
}

.card-nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.card-nav-btn:hover {
    background: var(--bg-section);
    color: var(--color-primary-dk);
}

.card-nav-btn.active {
    background: var(--color-info-bg);
    color: var(--color-primary-dk);
    font-weight: 700;
    border-color: var(--color-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.card-nav-btn .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.card-nav-badge {
    margin-left: auto;
    font-size: 0.75em;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--bg-section);
    color: var(--text-muted);
    font-weight: 600;
}

.card-nav-btn.active .card-nav-badge {
    background: var(--color-primary);
    color: #ffffff;
}

.card-editor-content {
    flex-grow: 1;
    min-width: 0;
}

.card-tab-panel {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.card-tab-panel.active {
    display: block;
}

.card-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}

.card-panel-title {
    margin: 0;
    font-size: 1.3em;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
}

.card-code-link {
    color: var(--color-primary-dk, #0369a1);
    background: var(--color-info-bg, #e0f2fe);
    border: 1px solid var(--border);
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
    display: inline-block;
}

.card-code-link:hover {
    background: var(--color-primary, #0ea5e9);
    color: #ffffff !important;
    border-color: var(--color-primary-dk);
}

.card-name-link {
    color: var(--color-primary-dk, #0369a1);
    text-decoration: none;
    font-size: 1.02em;
    transition: color 0.15s ease;
}

.card-name-link:hover {
    color: var(--color-primary, #0ea5e9);
    text-decoration: underline;
}

@media (max-width: 860px) {
    .card-editor-layout {
        flex-direction: column;
    }
    .card-editor-sidebar {
        width: 100%;
        position: static;
    }
    .card-editor-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .card-nav-btn {
        white-space: nowrap;
        width: auto;
    }
}