/* ==========================================================================
   PohodaSYNC — tmavé téma (věrně dle _design/Pohoda SYNC.dc.html)
   ========================================================================== */

:root {
    --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --green: #46d35a;
    --orange: #f7951e;
    --blue: #3b82f6;
    --blue-bright: #5fa3fb;

    /* Motivové proměnné povrchů/textu/rámečků — TMAVÉ výchozí (světlé přepíše synclight).
       Používají je inline styly stránek přes var(--…), aby fungoval světlý i tmavý režim. */
    --surf-1: #0f1623;   /* hlavní panel */
    --surf-2: #101a2e;   /* karta – světlejší část gradientu */
    --surf-3: #0c1322;   /* karta – tmavší část gradientu */
    --surf-card: #111927;/* karta/dropdown */
    --surf-deep: #0b111c;/* XML box */
    --surf-tile1: #0d1424;
    --surf-tile2: #0a0f1c;
    --tx-1: #e8eef7;     /* primární text */
    --tx-2: #cdd8e6;     /* sekundární */
    --tx-3: #aebccf;     /* tlumený */
    --tx-4: #8b99ad;     /* popisky */
    --tx-5: #5f6e87;     /* nejtlumenější */
    --bd: rgba(255,255,255,.08);
    --bd-strong: rgba(255,255,255,.14);
    --inp: rgba(255,255,255,.04);
}

/* Světlý přepis motivových proměnných */
html[data-theme="synclight"] {
    --surf-1: #ffffff;
    --surf-2: #f6f8fc;
    --surf-3: #eef2f8;
    --surf-card: #ffffff;
    --surf-deep: #f2f5f9;
    --surf-tile1: #f7f9fc;
    --surf-tile2: #eef2f8;
    --tx-1: #1c2531;
    --tx-2: #2f3a49;
    --tx-3: #46505f;
    --tx-4: #6a7686;
    --tx-5: #8a94a4;
    --bd: rgba(16,24,40,.12);
    --bd-strong: rgba(16,24,40,.2);
    --inp: #eef2f8;
}

*[data-theme="syncdark"], [data-theme="syncdark"] * { box-sizing: border-box; }

/* Barevné schéma pro nativní ovládací prvky (zaškrtávátka, selecty) — jinak je prohlížeč
   kreslí dle OS a v opačném motivu jsou neviditelné. */
html[data-theme="syncdark"] { color-scheme: dark; }
html[data-theme="synclight"] { color-scheme: light; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--blue); }

[data-theme="syncdark"] html, [data-theme="syncdark"] body,
html[data-theme="syncdark"], body[data-theme="syncdark"] {
    margin: 0; padding: 0;
    background: radial-gradient(1200px 700px at 50% -10%, #0e1626 0%, #080b12 60%) fixed, #080b12;
    color: #e6edf3;
    font-family: var(--font-sans); font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

[data-theme="syncdark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="syncdark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 6px; }
[data-theme="syncdark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
[data-theme="syncdark"] ::-webkit-scrollbar-track { background: transparent; }

[data-theme="syncdark"] .mono { font-family: var(--font-mono); }

@keyframes flowR { to { background-position-x: 28px; } }
@keyframes flowL { to { background-position-x: -28px; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
/* topologie ve stylu Můstku */
@keyframes flowDotR { 0%{left:-2%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:102%;opacity:0} }
@keyframes flowDotL { 0%{right:-2%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{right:102%;opacity:0} }
@keyframes pulseRing { 0%{transform:scale(.85);opacity:.55} 70%{transform:scale(1.7);opacity:0} 100%{transform:scale(1.7);opacity:0} }

/* ---------- Shell ---------- */
.app-bg-glow {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(900px 520px at 16% -8%, rgba(59,130,246,.12), transparent 60%),
                radial-gradient(720px 520px at 102% 104%, rgba(249,115,22,.06), transparent 55%);
}
.app-shell { display: flex; height: 100vh; overflow: hidden; position: relative; }

.sidebar {
    width: 252px; flex-shrink: 0; background: #0b0f18;
    border-right: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column; padding: 18px 14px;
    position: relative; z-index: 2;
}
.app-main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }

.topbar {
    height: 66px; flex-shrink: 0; background: #0b101a;
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: space-between; padding: 0 30px;
}
.app-content { flex: 1; overflow: auto; padding: 28px 34px 40px; }

.app-footer {
    height: 40px; flex-shrink: 0; background: #0b0f18;
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: space-between; padding: 0 30px;
    font-size: 12px; color: #8b99ad; font-family: var(--font-mono);
}
.app-footer .left { display: flex; align-items: center; gap: 16px; }
.app-footer .sep { color: #2a3340; }
.app-footer .val { color: #aebccf; }

/* ---------- Brand / logo ---------- */
.brand { display: flex; align-items: center; gap: 13px; padding: 6px 8px 18px; }
.brand-logo-wrap { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.brand-logo-glow { position: absolute; inset: -7px; background: #3b82f6; filter: blur(15px); opacity: .5; border-radius: 16px; }
.brand-logo {
    position: relative; width: 44px; height: 44px; border-radius: 13px;
    background: linear-gradient(158deg,#3886f7,#1f5bcc);
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 -2px 6px rgba(8,30,80,.6), 0 7px 18px -6px rgba(59,130,246,.8);
}
.brand-name { font-weight: 700; font-size: 16.5px; letter-spacing: .2px; }
.brand-name span { color: #5fa3fb; }
.brand-sub { font-size: 11px; color: #8b99ad; margin-top: 2px; }

/* ---------- Navigace ---------- */
.nav { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.nav-syncitem {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px;
    border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500;
    border: 1px solid transparent; text-decoration: none; color: #8b99ad; transition: all .15s;
}
.nav-syncitem:hover { background: rgba(255,255,255,.04); color: #cfd9e6; }
.nav-syncitem.active {
    font-weight: 600; border-color: rgba(59,130,246,.35); color: #eaf1fb;
    background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.04));
    box-shadow: 0 0 0 1px rgba(59,130,246,.08), 0 8px 24px -14px rgba(59,130,246,.7);
}
.nav-syncitem .ico { flex-shrink: 0; }
.nav-syncitem .lbl { flex: 1; }
.nav-badge {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #bfe9c6;
    background: rgba(70,211,90,.16); border: 1px solid rgba(70,211,90,.35);
    border-radius: 999px; padding: 1px 8px;
}

/* ---------- Patička sidebaru — instance ---------- */
.instance-wrap { margin-top: auto; padding: 14px 12px 4px; }
.instance-panel { border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.02); padding: 13px 14px; }
.instance-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.instance-title { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: #8b99ad; }
.instance-tag { font-size: 10px; font-weight: 600; color: #8fe0a0; background: rgba(70,211,90,.13); border: 1px solid rgba(70,211,90,.3); border-radius: 5px; padding: 1px 6px; }
.instance-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.instance-row:last-child { margin-bottom: 0; }
.instance-row .label { flex: 1; min-width: 0; font-size: 12.5px; color: #aebccf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.instance-row .status { flex-shrink: 0; margin-left: auto; font-family: var(--font-mono); font-size: 11px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.green { background: #46d35a; box-shadow: 0 0 8px #46d35a; animation: blink 2.4s ease-in-out infinite; }
.dot.orange { background: #f7951e; box-shadow: 0 0 8px #f7951e; animation: blink 2.4s ease-in-out infinite .4s; }

/* ---------- Topbar ---------- */
.topbar-title { display: flex; align-items: baseline; gap: 14px; }
.topbar-title h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.2px; color: #e8eef7; }
.topbar-title .sub { font-size: 12.5px; color: #aebccf; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.dir-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #aebccf; font-weight: 600; }
.dir-switch {
    display: flex; align-items: center; gap: 11px; padding: 7px 14px;
    border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: #141d2b;
    font-size: 12.5px; cursor: pointer; color: #e8eef7;
}
.dir-switch:hover { background: #1a2536; border-color: rgba(255,255,255,.18); }
.dir-seg { display: flex; align-items: center; gap: 7px; }
.dir-seg .name { color: #9fb0c4; }
.dot7 { width: 7px; height: 7px; border-radius: 50%; }
.dot7.green { background: #46d35a; box-shadow: 0 0 7px #46d35a; }
.dot7.orange { background: #f7951e; box-shadow: 0 0 7px #f7951e; }
.btn-odhlasit {
    font-size: 13px; font-weight: 500; color: #aebccf; background: #161e2c;
    border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 8px 16px;
    cursor: pointer; text-decoration: none;
}
.btn-odhlasit:hover { background: #1d273a; color: #fff; }

/* ---------- Karty / pomocné ---------- */
.card2 { border: 1px solid rgba(255,255,255,.07); border-radius: 15px; background: #111927; padding: 19px 21px; }
.card2-title { font-size: 15px; font-weight: 600; color: #e8eef7; margin: 0 0 12px; }

/* ---------- Bootstrap dark overrides (zatím nepřevedené obrazovky) ---------- */
[data-theme="syncdark"] .table { --bs-table-bg: transparent; --bs-table-color: #e8eef7; --bs-table-border-color: rgba(255,255,255,.06); color: #e8eef7; --bs-table-striped-bg: rgba(255,255,255,.025); --bs-table-striped-color: #e8eef7; --bs-table-hover-bg: rgba(59,130,246,.08); --bs-table-hover-color: #e8eef7; }
[data-theme="syncdark"] .table > :not(caption) > * > * { border-color: rgba(255,255,255,.06); }
[data-theme="syncdark"] .table-light, [data-theme="syncdark"] .table-light th { --bs-table-bg: #0f1623; color: #aebccf; border-color: rgba(255,255,255,.06); }
[data-theme="syncdark"] .card { background: #111927; border-color: rgba(255,255,255,.07); color: #e8eef7; }
[data-theme="syncdark"] .bg-light { background: #0f1623 !important; }
[data-theme="syncdark"] .text-muted { color: #8b99ad !important; }
[data-theme="syncdark"] .form-control, [data-theme="syncdark"] .form-select { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); color: #e8eef7; }
[data-theme="syncdark"] .form-control:focus, [data-theme="syncdark"] .form-select:focus { background: rgba(255,255,255,.05); border-color: #3b82f6; color: #e8eef7; box-shadow: 0 0 0 .2rem rgba(59,130,246,.2); }
/* Tmavé položky v rozbaleném select menu (jinak bílé pozadí = nečitelné) */
[data-theme="syncdark"] select option, [data-theme="syncdark"] .form-select option { background-color: #111927; color: #e8eef7; }
[data-theme="syncdark"] .form-check-input { background-color: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
[data-theme="syncdark"] .form-check-input:checked { background-color: #3b82f6; border-color: #3b82f6; }
[data-theme="syncdark"] .btn-primary { background: linear-gradient(180deg,#3e8bf8,#2667db); border: none; }
[data-theme="syncdark"] .alert-danger { background: rgba(220,80,80,.08); border-color: rgba(220,80,80,.3); color: #f08a8a; }
[data-theme="syncdark"] .alert-info { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.3); color: #5fa3fb; }
[data-theme="syncdark"] .modal-content { background: #111927; border: 1px solid rgba(255,255,255,.12); color: #e8eef7; }
[data-theme="syncdark"] a { color: #5fa3fb; }

/* ---------- Patička (StatusBar — funkční výběr jednotky/roku) ---------- */
.status-bar {
    height: 40px; flex-shrink: 0; display: flex; align-items: center; padding: 0 24px;
    background: #0b0f18; border-top: 1px solid rgba(255,255,255,.06);
    font-family: var(--font-mono); font-size: 12px; color: #8b99ad; position: relative;
}
.status-bar-section { display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.status-bar-label { color: #8b99ad; }
.status-bar-value { color: #aebccf; }
.status-bar-separator { width: 1px; height: 16px; background: #2a3340; }
.status-bar-spacer { flex: 1; }
.status-bar-clickable { cursor: pointer; padding: 3px 8px; border-radius: 6px; color: #aebccf; user-select: none; }
.status-bar-clickable:hover { background: rgba(255,255,255,.05); color: #fff; }
.dropdown-arrow { font-size: .55rem; margin-left: 4px; opacity: .6; }
.status-dropdown {
    position: absolute; bottom: 100%; left: 0; min-width: 240px; max-height: 320px; overflow-y: auto;
    background: #111927; border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
    box-shadow: 0 -6px 20px rgba(0,0,0,.45); z-index: 1000; margin-bottom: 6px;
}
.status-dropdown-narrow { min-width: 92px; }
.status-dropdown-item { padding: 8px 13px; cursor: pointer; font-size: 12.5px; color: #aebccf; white-space: nowrap; }
.status-dropdown-item:hover { background: rgba(59,130,246,.12); color: #fff; }
.status-dropdown-item.active { background: linear-gradient(90deg, rgba(59,130,246,.25), rgba(59,130,246,.08)); color: #fff; }

/* ---------- Přepínač tématu (lišta) ---------- */
.btn-tema {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; font-size: 16px; line-height: 1;
    color: #aebccf; background: #161e2c; border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px; cursor: pointer; transition: all .15s;
}
.btn-tema:hover { background: #1d273a; color: #fff; }

/* ==========================================================================
   PohodaSYNC — SVĚTLÉ téma (synclight)
   Aditivní přepis tmavého chromu; tmavé Bootstrap přepisy jsou scoped na
   [data-theme="syncdark"], takže ve světlém režimu se vrátí výchozí (světlý)
   vzhled tabulek/formulářů/modálů.
   ========================================================================== */
html[data-theme="synclight"], html[data-theme="synclight"] body {
    background: #eef1f6;
    color: #2f3a49;
}
html[data-theme="synclight"] .app-bg-glow {
    background: radial-gradient(900px 520px at 16% -8%, rgba(59,130,246,.07), transparent 60%),
                radial-gradient(720px 520px at 102% 104%, rgba(249,115,22,.05), transparent 55%);
}
html[data-theme="synclight"] ::-webkit-scrollbar-thumb { background: rgba(16,24,40,.18); }
html[data-theme="synclight"] ::-webkit-scrollbar-thumb:hover { background: rgba(16,24,40,.3); }

/* Shell */
html[data-theme="synclight"] .sidebar { background: #ffffff; border-right: 1px solid rgba(16,24,40,.1); }
html[data-theme="synclight"] .topbar { background: #ffffff; border-bottom: 1px solid rgba(16,24,40,.1); }
html[data-theme="synclight"] .app-footer { background: #f7f9fc; border-top: 1px solid rgba(16,24,40,.1); color: #6a7686; }
html[data-theme="synclight"] .app-footer .val { color: #46505f; }
html[data-theme="synclight"] .app-footer .sep { color: #c5cdd9; }

/* Brand / nav */
html[data-theme="synclight"] .brand-sub { color: #6a7686; }
html[data-theme="synclight"] .nav-syncitem { color: #5a6676; }
html[data-theme="synclight"] .nav-syncitem:hover { background: rgba(16,24,40,.05); color: #1c2531; }
html[data-theme="synclight"] .nav-syncitem.active {
    color: #1746a8; border-color: rgba(59,130,246,.45);
    background: linear-gradient(90deg, rgba(59,130,246,.14), rgba(59,130,246,.03));
    box-shadow: 0 0 0 1px rgba(59,130,246,.06), 0 8px 24px -16px rgba(59,130,246,.6);
}

/* Instance panel */
html[data-theme="synclight"] .instance-panel { border: 1px solid rgba(16,24,40,.1); background: #f7f9fc; }
html[data-theme="synclight"] .instance-title { color: #6a7686; }
html[data-theme="synclight"] .instance-row .label { color: #46505f; }

/* Topbar */
html[data-theme="synclight"] .topbar-title h1 { color: #1c2531; }
html[data-theme="synclight"] .topbar-title .sub { color: #6a7686; }
html[data-theme="synclight"] .dir-label { color: #6a7686; }
html[data-theme="synclight"] .dir-switch { background: #f0f3f8; border: 1px solid rgba(16,24,40,.12); color: #1c2531; }
html[data-theme="synclight"] .dir-switch:hover { background: #e7ecf4; border-color: rgba(16,24,40,.2); }
html[data-theme="synclight"] .dir-seg .name { color: #46505f; }
html[data-theme="synclight"] .btn-odhlasit { background: #f0f3f8; color: #46505f; border: 1px solid rgba(16,24,40,.12); }
html[data-theme="synclight"] .btn-odhlasit:hover { background: #e7ecf4; color: #1c2531; }
html[data-theme="synclight"] .btn-tema { background: #f0f3f8; color: #46505f; border: 1px solid rgba(16,24,40,.12); }
html[data-theme="synclight"] .btn-tema:hover { background: #e7ecf4; color: #1c2531; }

/* Karty */
html[data-theme="synclight"] .card2 { background: #ffffff; border: 1px solid rgba(16,24,40,.1); box-shadow: 0 1px 3px rgba(16,24,40,.06); }
html[data-theme="synclight"] .card2-title { color: #1c2531; }

/* Status bar */
html[data-theme="synclight"] .status-bar { background: #f7f9fc; border-top: 1px solid rgba(16,24,40,.1); color: #6a7686; }
html[data-theme="synclight"] .status-bar-label { color: #6a7686; }
html[data-theme="synclight"] .status-bar-value { color: #46505f; }
html[data-theme="synclight"] .status-bar-separator { background: #c5cdd9; }
html[data-theme="synclight"] .status-bar-clickable { color: #46505f; }
html[data-theme="synclight"] .status-bar-clickable:hover { background: rgba(16,24,40,.05); color: #1c2531; }
html[data-theme="synclight"] .status-dropdown { background: #ffffff; border: 1px solid rgba(16,24,40,.14); box-shadow: 0 -6px 20px rgba(16,24,40,.15); }
html[data-theme="synclight"] .status-dropdown-item { color: #46505f; }
html[data-theme="synclight"] .status-dropdown-item:hover { background: rgba(59,130,246,.1); color: #1c2531; }
html[data-theme="synclight"] .status-dropdown-item.active { background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.05)); color: #1746a8; }

/* ---------- Mobil (≤ 900 px): sidebar se vysouvá přes hamburger, kompaktní lišta ---------- */
.menu-tlacitko { display: none; }
.menu-zaclona { display: none; }
@media (max-width: 900px) {
    .app-shell { height: 100dvh; }

    /* Sidebar jako vysouvací panel přes obsah */
    .sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 120;
        width: 264px; max-width: 84vw;
        transform: translateX(-104%);
        transition: transform .22s ease;
        box-shadow: 24px 0 60px rgba(0,0,0,.45);
        overflow-y: auto;
    }
    .sidebar.otevreny { transform: translateX(0); }
    .menu-zaclona { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.5); }

    /* Hamburger v horní liště */
    .menu-tlacitko {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; flex: none;
        background: var(--inp); border: 1px solid var(--bd-strong); border-radius: 10px;
        color: var(--tx-1); cursor: pointer; font-size: 19px; line-height: 1;
    }

    /* Kompaktní horní lišta — smí se zalomit na 2 řádky */
    .topbar { height: auto; min-height: 56px; padding: 8px 12px; gap: 10px; flex-wrap: wrap; }
    .topbar-title { gap: 8px; min-width: 0; }
    .topbar-title h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .topbar-title .sub { display: none; }
    .topbar-right { gap: 8px; flex-wrap: wrap; }
    .dir-label { display: none; }

    /* Obsah: menší odsazení; širší tabulky/mřížky se posouvají vodorovně, ale nerozbijí stránku */
    .app-content { padding: 12px 10px 26px; overflow-x: auto; }

    /* Patička na mobilu zabírá místo a nic zásadního nenese */
    .app-footer { display: none; }
}