/* ══════════════════════════════════════════════
   FANAL — Shared Stylesheet v3
   4 palety × 2 témata = 8 kombinací
══════════════════════════════════════════════ */

/* ── INDIGO dark (default) ── */
[data-theme="dark"][data-palette="indigo"]{
  --bg:#0f1117;--bg2:#1a1d27;--bg3:#22263a;--border:#2d3148;
  --text:#e8eaf6;--text2:#9fa3c0;--text3:#5c607d;
  --acc:#4f8ef7;--acc2:#3d7de8;--acc-dim:#1e3a6e;--acc-text:#fff;
  --green:#2ecc71;--gdim:#1a4a2e;--gtext:#2ecc71;
  --yellow:#f1c40f;--ydim:#3d3000;--ytext:#f1c40f;
  --red:#e74c3c;--rdim:#3d1212;--rtext:#e74c3c;
  --mag:#e20074;--mdim:#3d0020;
  --o2:#0a9e6e;--o2dim:#003d2a;
  --acc-rgb:79,142,247;
  --shadow:0 4px 24px rgba(0,0,0,.5);
  /* legacy aliases */
  --blue:#4f8ef7;--blue-dim:#1e3a6e;
  --green-dim:#1a4a2e;--yellow-dim:#3d3000;--red-dim:#3d1212;
}
/* ── INDIGO light ── */
[data-theme="light"][data-palette="indigo"]{
  --bg:#f4f5fb;--bg2:#ffffff;--bg3:#eef0f8;--border:#d6d9ec;
  --text:#1a1d2e;--text2:#4a4f72;--text3:#8b90b0;
  --acc:#4264d0;--acc2:#3355c0;--acc-dim:#dce4ff;--acc-text:#fff;
  --green:#1a9e52;--gdim:#d4f4e2;--gtext:#1a9e52;
  --yellow:#b58900;--ydim:#fff3c4;--ytext:#b58900;
  --red:#c0392b;--rdim:#fde8e8;--rtext:#c0392b;
  --mag:#c0005a;--mdim:#ffe0ef;
  --o2:#087a52;--o2dim:#d4f4ea;
  --acc-rgb:66,100,208;
  --shadow:0 4px 24px rgba(60,60,120,.12);
  --blue:#4264d0;--blue-dim:#dce4ff;
  --green-dim:#d4f4e2;--yellow-dim:#fff3c4;--red-dim:#fde8e8;
}
/* ── TEAL dark ── */
[data-theme="dark"][data-palette="teal"]{
  --bg:#0d1515;--bg2:#162020;--bg3:#1e2c2c;--border:#263838;
  --text:#e0f0f0;--text2:#7db8b8;--text3:#4a8080;
  --acc:#2dd4bf;--acc2:#20b8a4;--acc-dim:#0d4040;--acc-text:#0d1515;
  --green:#34d399;--gdim:#0d3a28;--gtext:#34d399;
  --yellow:#fbbf24;--ydim:#3a2c00;--ytext:#fbbf24;
  --red:#f87171;--rdim:#3a1212;--rtext:#f87171;
  --mag:#e879f9;--mdim:#3a0a3a;
  --o2:#2dd4bf;--o2dim:#0d4040;
  --acc-rgb:45,212,191;
  --shadow:0 4px 24px rgba(0,0,0,.5);
  --blue:#2dd4bf;--blue-dim:#0d4040;
  --green-dim:#0d3a28;--yellow-dim:#3a2c00;--red-dim:#3a1212;
}
/* ── TEAL light ── */
[data-theme="light"][data-palette="teal"]{
  --bg:#f0fbfa;--bg2:#ffffff;--bg3:#e4f7f5;--border:#b8e8e4;
  --text:#0d2020;--text2:#2a6060;--text3:#6aacaa;
  --acc:#0f9488;--acc2:#0a7a70;--acc-dim:#ccf0ec;--acc-text:#fff;
  --green:#059669;--gdim:#d1fae5;--gtext:#059669;
  --yellow:#d97706;--ydim:#fef3c7;--ytext:#d97706;
  --red:#dc2626;--rdim:#fee2e2;--rtext:#dc2626;
  --mag:#a21caf;--mdim:#fae8ff;
  --o2:#0f9488;--o2dim:#ccf0ec;
  --acc-rgb:15,148,136;
  --shadow:0 4px 24px rgba(0,80,70,.1);
  --blue:#0f9488;--blue-dim:#ccf0ec;
  --green-dim:#d1fae5;--yellow-dim:#fef3c7;--red-dim:#fee2e2;
}
/* ── ROSE dark ── */
[data-theme="dark"][data-palette="rose"]{
  --bg:#130d10;--bg2:#1e1218;--bg3:#2a1820;--border:#3d2030;
  --text:#f5e8ec;--text2:#c48098;--text3:#7a4055;
  --acc:#f472b6;--acc2:#e860a4;--acc-dim:#4a0030;--acc-text:#130d10;
  --green:#4ade80;--gdim:#0d3018;--gtext:#4ade80;
  --yellow:#fcd34d;--ydim:#3a2800;--ytext:#fcd34d;
  --red:#fb7185;--rdim:#3a0e14;--rtext:#fb7185;
  --mag:#f472b6;--mdim:#4a0030;
  --o2:#34d399;--o2dim:#0d3028;
  --acc-rgb:244,114,182;
  --shadow:0 4px 24px rgba(0,0,0,.5);
  --blue:#f472b6;--blue-dim:#4a0030;
  --green-dim:#0d3018;--yellow-dim:#3a2800;--red-dim:#3a0e14;
}
/* ── ROSE light ── */
[data-theme="light"][data-palette="rose"]{
  --bg:#fff5f7;--bg2:#ffffff;--bg3:#ffe8ee;--border:#fcc8d8;
  --text:#1a0810;--text2:#7a2040;--text3:#c07090;
  --acc:#e11d6a;--acc2:#c81860;--acc-dim:#ffe0ec;--acc-text:#fff;
  --green:#16a34a;--gdim:#dcfce7;--gtext:#16a34a;
  --yellow:#ca8a04;--ydim:#fef9c3;--ytext:#ca8a04;
  --red:#dc2626;--rdim:#fee2e2;--rtext:#dc2626;
  --mag:#e11d6a;--mdim:#ffe0ec;
  --o2:#0d9488;--o2dim:#ccfbf1;
  --acc-rgb:225,29,106;
  --shadow:0 4px 24px rgba(180,0,60,.1);
  --blue:#e11d6a;--blue-dim:#ffe0ec;
  --green-dim:#dcfce7;--yellow-dim:#fef9c3;--red-dim:#fee2e2;
}
/* ── SLATE dark ── */
[data-theme="dark"][data-palette="slate"]{
  --bg:#0c0e12;--bg2:#161820;--bg3:#1e2230;--border:#2a2e40;
  --text:#e2e4f0;--text2:#8890b0;--text3:#505878;
  --acc:#818cf8;--acc2:#6d7af4;--acc-dim:#1e2060;--acc-text:#fff;
  --green:#6ee7b7;--gdim:#0c3028;--gtext:#6ee7b7;
  --yellow:#fde68a;--ydim:#382e00;--ytext:#fde68a;
  --red:#fca5a5;--rdim:#380e10;--rtext:#fca5a5;
  --mag:#c084fc;--mdim:#2e0060;
  --o2:#34d399;--o2dim:#0c3028;
  --acc-rgb:129,140,248;
  --shadow:0 4px 24px rgba(0,0,0,.5);
  --blue:#818cf8;--blue-dim:#1e2060;
  --green-dim:#0c3028;--yellow-dim:#382e00;--red-dim:#380e10;
}
/* ── SLATE light ── */
[data-theme="light"][data-palette="slate"]{
  --bg:#f8f9fc;--bg2:#ffffff;--bg3:#f0f2f8;--border:#dde0ee;
  --text:#1a1c28;--text2:#4c5080;--text3:#9098c0;
  --acc:#4f46e5;--acc2:#4338ca;--acc-dim:#e0e7ff;--acc-text:#fff;
  --green:#059669;--gdim:#d1fae5;--gtext:#059669;
  --yellow:#d97706;--ydim:#fef3c7;--ytext:#d97706;
  --red:#dc2626;--rdim:#fee2e2;--rtext:#dc2626;
  --mag:#7c3aed;--mdim:#ede9fe;
  --o2:#0d9488;--o2dim:#ccfbf1;
  --acc-rgb:79,70,229;
  --shadow:0 4px 24px rgba(60,60,120,.1);
  --blue:#4f46e5;--blue-dim:#e0e7ff;
  --green-dim:#d1fae5;--yellow-dim:#fef3c7;--red-dim:#fee2e2;
}

/* ── Global non-theme variables ── */
:root{
  --font:system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'SF Mono','Consolas','Monaco',monospace;
  --radius:8px;
}

/* ══════════════════════════════════════════════
   BASE RESET
══════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;transition:background-color .2s,border-color .2s,color .1s}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.5}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
input,button,select,textarea{font-family:inherit;transition:background .15s,border-color .15s,color .1s}
a{color:inherit;text-decoration:none}
svg{vertical-align:middle;flex-shrink:0}

/* ══════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════ */
.app{display:flex;flex-direction:column;min-height:100vh}
.app-fixed{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.topbar{flex-shrink:0;height:56px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 18px;gap:0;position:relative;z-index:300;box-shadow:var(--shadow)}
.nav2{flex-shrink:0;height:42px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:stretch;padding:0 18px;z-index:200}
.content{flex:1;overflow:auto}

/* ══════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════ */
.logo{display:flex;align-items:center;gap:9px;cursor:pointer;margin-right:20px;flex-shrink:0;text-decoration:none}
.logo-mark{width:30px;height:30px;background:var(--acc);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--acc-text)}
.logo-name{font-size:14px;font-weight:600;color:var(--text);line-height:1}
.logo-sub{font-size:10px;color:var(--text3);display:block;margin-top:1px}
.stat-strip{display:flex;align-items:center;flex:1;gap:0}
.stile{display:flex;align-items:center;gap:8px;padding:0 16px;border-right:1px solid var(--border);cursor:default;flex-shrink:0}
.stile:first-child{padding-left:0}.stile:last-child{border-right:none}
.si{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.si.b{background:var(--acc-dim);color:var(--acc)}
.si.g{background:var(--gdim);color:var(--gtext)}
.si.a{background:var(--ydim);color:var(--ytext)}
.si.r{background:var(--rdim);color:var(--rtext)}
.sv{font-size:15px;font-weight:600;color:var(--text);line-height:1}
.sl{font-size:11px;color:var(--text3);line-height:1.3}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:5px;flex-shrink:0}
.ib{width:34px;height:34px;border-radius:7px;border:1px solid var(--border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:var(--text2)}
.ib:hover{background:var(--bg3);color:var(--text)}
.ndot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--red);border:2px solid var(--bg2)}
.notif-ib{position:relative}
.nb-count{position:absolute;top:4px;right:3px;background:var(--red);color:#fff;font-size:9px;font-weight:700;min-width:14px;height:14px;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1;border:1.5px solid var(--bg2)}
.tb-sep{width:1px;height:20px;background:var(--border);margin:0 2px;flex-shrink:0}
.tb-tag{display:flex;align-items:center;gap:4px;height:26px;padding:0 8px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);font-size:11px;color:var(--text3);white-space:nowrap;cursor:default;flex-shrink:0;line-height:1}
.tb-tag-btn{cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.tb-tag-btn:hover{background:var(--bg);color:var(--text2)}
.tb-tag-val{font-weight:600;font-size:11px;line-height:1;color:inherit}
.tb-tag-dim{font-weight:400;opacity:.55}
.av{width:32px;height:32px;border-radius:50%;background:var(--acc-dim);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--acc);cursor:pointer;border:1px solid var(--border);margin-left:4px}

/* ══════════════════════════════════════════════
   THEME PANEL
══════════════════════════════════════════════ */
.theme-panel{position:absolute;right:6px;top:58px;width:300px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;z-index:999;overflow:hidden;display:none;box-shadow:var(--shadow)}
.theme-panel.open{display:block}
.tp-head{padding:12px 16px;font-size:13px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.tp-section{padding:12px 16px;border-bottom:1px solid var(--border)}
.tp-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.mode-row{display:flex;gap:8px}
.mode-btn{flex:1;padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px}
.mode-btn:hover{background:var(--bg2);color:var(--text)}
.mode-btn.active{border-color:var(--acc);background:var(--acc-dim);color:var(--acc)}
.pal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pal-btn{border-radius:8px;border:2px solid transparent;cursor:pointer;overflow:hidden;aspect-ratio:1;display:flex;flex-direction:column}
.pal-btn:hover{border-color:var(--border)}
.pal-btn.active{border-color:var(--acc)}
.pal-swatch{flex:1;display:flex}
.pal-name{font-size:10px;font-weight:500;padding:4px 6px;text-align:center;background:var(--bg3);color:var(--text2)}
.sw-indigo-d{background:#0f1117}.sw-indigo-a{background:#4f8ef7}.sw-indigo-g{background:#2ecc71}
.sw-teal-d{background:#0d1515}.sw-teal-a{background:#2dd4bf}.sw-teal-g{background:#34d399}
.sw-rose-d{background:#130d10}.sw-rose-a{background:#f472b6}.sw-rose-g{background:#4ade80}
.sw-slate-d{background:#0c0e12}.sw-slate-a{background:#818cf8}.sw-slate-g{background:#6ee7b7}

/* ══════════════════════════════════════════════
   DROPDOWNS
══════════════════════════════════════════════ */
.drop{position:absolute;background:var(--bg2);border:1px solid var(--border);border-radius:10px;z-index:999;overflow:hidden;display:none;box-shadow:var(--shadow)}
.drop.open{display:block}
.drop-av{width:290px;right:6px;top:58px}
/* Avatar dropdown — profil + update */
.av-section{padding:12px 15px;border-bottom:1px solid var(--border)}
.av-section-title{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:9px}
.av-field{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.av-field label{font-size:10px;color:var(--text3)}
.av-field input{background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:5px 8px;font-size:12px;color:var(--text);outline:none;font-family:inherit;width:100%}
.av-field input:focus{border-color:var(--acc)}
.av-field-row{display:grid;grid-template-columns:80px 1fr;gap:6px}
.av-save-row{display:flex;justify-content:flex-end;margin-top:4px}
.av-update-box{padding:12px 15px}
.av-update-desc{font-size:11px;color:var(--text3);margin-bottom:9px;line-height:1.5}
.av-update-desc strong{color:var(--text2)}
.btn-update{width:100%;padding:8px;background:var(--acc-dim);border:1px solid var(--acc);border-radius:6px;color:var(--acc);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s}
.btn-update:hover{background:var(--acc);color:var(--acc-text)}
.btn-update:disabled{opacity:.5;cursor:wait}
.av-update-status{font-size:11px;margin-top:6px;text-align:center;min-height:14px;color:var(--gtext)}
.av-logout{display:flex;align-items:center;gap:7px;padding:11px 15px;font-size:12px;color:var(--red);text-decoration:none;border-top:1px solid var(--border);transition:background .12s}
.av-logout:hover{background:var(--rdim,#3d1212)}
.dh{padding:11px 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.dh span{font-size:13px;font-weight:600;color:var(--text)}
.avh{padding:13px 15px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.avb{width:34px;height:34px;border-radius:50%;background:var(--acc-dim);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--acc);flex-shrink:0}
.avn{font-size:13px;font-weight:600;color:var(--text)}
.avr{font-size:11px;color:var(--text3)}
.ai{display:flex;align-items:center;gap:9px;padding:9px 15px;font-size:13px;color:var(--text2);cursor:pointer}
.ai:hover{background:var(--bg3);color:var(--text)}
.asep{height:1px;background:var(--border);margin:3px 0}

/* ══════════════════════════════════════════════
   NAV2
══════════════════════════════════════════════ */
.n2l{display:flex;align-items:stretch;flex:1;gap:0}
.n2r{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-left:8px}
.ni{display:flex;align-items:center;gap:6px;padding:0 13px;font-size:13px;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:color .1s;white-space:nowrap;flex-shrink:0;text-decoration:none}
.ni:hover{color:var(--text)}
.ni.active{color:var(--acc);border-bottom-color:var(--acc);font-weight:500}
.n2sep{width:1px;background:var(--border);margin:9px 4px;flex-shrink:0}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn{padding:6px 13px;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.btn-primary{background:var(--acc);color:var(--acc-text)}.btn-primary:hover{background:var(--acc2)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg3);color:var(--text)}
.btn-danger{background:var(--rdim);color:var(--rtext);border:1px solid var(--rdim)}.btn-danger:hover{opacity:.8}
.btn-warn{background:var(--ydim);color:var(--ytext);border:1px solid var(--ydim)}.btn-warn:hover{opacity:.8}
.btn-sm{padding:5px 10px;font-size:11px}
/* legacy compat */
.btn-p{background:var(--acc);color:var(--acc-text);border:none}.btn-p:hover{background:var(--acc2);color:var(--acc-text)}

/* ══════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════ */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px}
.card-sm{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:18px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:18px}
.kv{font-size:19px;font-weight:700;font-family:'SF Mono','Fira Code',monospace;line-height:1}
.kl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.ks{font-size:11px;color:var(--text3);margin-top:3px}

/* ══════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════ */
.badge{padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.1px;display:inline-block}
.b-acc{background:var(--acc-dim);color:var(--acc)}
.b-green{background:var(--gdim);color:var(--gtext)}
.b-red{background:var(--rdim);color:var(--rtext)}
.b-yellow{background:var(--ydim);color:var(--ytext)}
.b-gray{background:var(--bg3);color:var(--text3)}
.b-mag{background:var(--mdim);color:var(--mag)}
.b-o2{background:var(--o2dim);color:var(--o2)}

/* ══════════════════════════════════════════════
   TABLE
══════════════════════════════════════════════ */
.tw{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.dt{width:100%;border-collapse:collapse;font-size:12px}
.dt th{padding:8px 12px;text-align:left;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);background:var(--bg3);border-bottom:1px solid var(--border)}
.dt td{padding:7px 12px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle}
.dt tr:last-child td{border-bottom:none}
.dt tr.click{cursor:pointer}.dt tr.click:hover td{background:var(--bg3);color:var(--text)}
.mono{font-family:'SF Mono','Fira Code',monospace;font-size:11px}
.tf{padding:9px 14px;border-top:1px solid var(--border);font-size:11px;color:var(--text3);display:flex;justify-content:space-between;align-items:center}

/* ══════════════════════════════════════════════
   MISC UI
══════════════════════════════════════════════ */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:14px;flex-shrink:0}
.tab{padding:8px 15px;font-size:13px;font-weight:500;background:transparent;border:none;cursor:pointer;color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--text2)}.tab.active{color:var(--acc);border-bottom-color:var(--acc)}
.warn-box{background:var(--ydim);border:1px solid var(--yellow);border-left:3px solid var(--yellow);border-radius:0 8px 8px 0;padding:10px 13px;margin-bottom:13px;font-size:12px;color:var(--ytext);display:flex;gap:8px;align-items:flex-start;flex-shrink:0}
.back-btn{width:32px;height:32px;border-radius:7px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.back-btn:hover{background:var(--bg3)}
.ph{display:flex;align-items:center;gap:11px;margin-bottom:18px;flex-shrink:0}
.pt{font-size:17px;font-weight:700;color:var(--text)}
.ps{font-size:13px;color:var(--text3)}
.irow{display:flex;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.irow:last-child{border-bottom:none}
.scroll{overflow-y:auto;flex:1}
.padded{padding:20px}
.detail-section-title{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;color:var(--text3);gap:10px;text-align:center}
.empty-state svg{opacity:.4}

/* ══════════════════════════════════════════════
   SPLIT LAYOUT
══════════════════════════════════════════════ */
.split{display:flex;flex:1;overflow:hidden;gap:0}
.split-list{width:300px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.split-list-header{padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.split-list-search{width:100%;padding:7px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:12px;outline:none}
.split-list-search:focus{border-color:var(--acc)}
.split-list-body{flex:1;overflow-y:auto}
.list-item{padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.list-item:hover{background:var(--bg3)}
.list-item.active{background:var(--acc-dim);border-left:2px solid var(--acc)}
.list-item:last-child{border-bottom:none}
.li-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px;display:flex;align-items:center;gap:6px;justify-content:space-between}
.li-sub{font-size:11px;color:var(--text3)}
.li-meta{display:flex;align-items:center;gap:6px;margin-top:4px}

/* ══════════════════════════════════════════════
   SESSION CARDS (faktury přehled)
══════════════════════════════════════════════ */
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:20px}
.sc{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:15px;cursor:pointer;transition:transform .15s,border-color .15s}
.sc:hover{border-color:var(--acc);transform:translateY(-1px)}
.sc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.sc-op{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.sc-op.tm{background:var(--mdim);color:var(--mag)}
.sc-op.o2{background:var(--o2dim);color:var(--o2)}
.sc-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.sc-sub{font-size:11px;color:var(--text3)}
.sc-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 0}
.sm{background:var(--bg3);border-radius:6px;padding:7px 9px}
.sml{font-size:11px;color:var(--text3);margin-bottom:2px}
.smv{font-size:13px;font-weight:700;font-family:'SF Mono',monospace}
.sc-actions{display:flex;gap:6px;margin-top:10px}

/* ══════════════════════════════════════════════
   FILTER CHIPS
══════════════════════════════════════════════ */
.filter-block{padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.filter-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.filter-row{display:flex;flex-wrap:wrap;gap:5px}
.filter-chip{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;transition:.1s}
.filter-chip:hover{border-color:var(--acc);color:var(--acc)}
.filter-chip.on{border-color:var(--acc);background:var(--acc-dim);color:var(--acc)}
.filter-select{width:100%;padding:5px 8px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;outline:none}
.filter-select:focus{border-color:var(--acc)}

/* ══════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════ */
.field{margin-bottom:14px}
.field label,.field-label{display:block;font-size:12px;color:var(--text2);margin-bottom:5px;font-weight:500}
.field input,.field select,.field textarea,
.finput,.fselect{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:8px 11px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus,
.finput:focus,.fselect:focus{border-color:var(--acc)}
.field textarea{resize:vertical;min-height:72px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ══════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;width:540px;max-width:95vw;max-height:90vh;overflow-y:auto}
.modal-title{font-size:14px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}

/* ══════════════════════════════════════════════
   COMMAND PALETTE
══════════════════════════════════════════════ */
.cmd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:800;display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
.cmd-overlay.open{display:flex}
.cmd-box{background:var(--bg2);border:1px solid var(--border);border-radius:14px;width:520px;max-width:96vw;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.35)}
.cmd-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.cmd-input-row svg{color:var(--text3);flex-shrink:0}
.cmd-input{flex:1;background:none;border:none;outline:none;font-size:15px;color:var(--text)}
.cmd-results{max-height:340px;overflow-y:auto}
.cmd-section{padding:6px 14px 2px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.cmd-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;font-size:13px;color:var(--text2)}
.cmd-item:hover,.cmd-item.sel{background:var(--bg3);color:var(--text)}
.cmd-item svg{color:var(--text3);flex-shrink:0}
.cmd-item .cmd-meta{margin-left:auto;font-size:11px;color:var(--text3)}
.cmd-kbd{font-size:10px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-family:monospace;color:var(--text3)}
.cmd-footer{padding:8px 14px;border-top:1px solid var(--border);display:flex;gap:12px;font-size:11px;color:var(--text3)}
.cmd-empty{padding:20px;text-align:center;font-size:13px;color:var(--text3)}

/* ══════════════════════════════════════════════
   TOAST & CONFIRM
══════════════════════════════════════════════ */
.toast{position:fixed;bottom:20px;right:20px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 16px;font-size:13px;color:var(--text);z-index:600;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;max-width:320px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{border-color:var(--gtext)}
.toast.warn{border-color:var(--ytext)}
.toast.err{border-color:var(--rtext)}
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;display:none;align-items:center;justify-content:center}
.confirm-overlay.open{display:flex}
.confirm-modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:22px 24px;min-width:320px;max-width:420px}
.confirm-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:8px}
.confirm-desc{font-size:13px;color:var(--text2);margin-bottom:18px;line-height:1.5}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px}

/* ══════════════════════════════════════════════
   UPLOAD ZONE
══════════════════════════════════════════════ */
.upload-zone{border:2px dashed var(--border);border-radius:12px;padding:44px 20px;text-align:center;background:var(--bg2);cursor:pointer;transition:.2s;margin-bottom:20px}
.upload-zone:hover,.upload-zone.drag{border-color:var(--acc);background:var(--acc-dim)}
.upload-zone-ico{font-size:36px;margin-bottom:12px;display:block;color:var(--text3)}
.upload-zone-title{font-size:15px;font-weight:500;margin-bottom:6px;color:var(--text)}
.upload-zone-sub{font-size:12px;color:var(--text2)}

/* ══════════════════════════════════════════════
   ALERT BANNER (expiring contracts)
══════════════════════════════════════════════ */
.alert-banner{background:var(--ydim);border:1px solid var(--yellow);border-radius:10px;padding:14px 18px;margin-bottom:18px}
.alert-banner-title{font-size:13px;color:var(--ytext);margin-bottom:10px;font-weight:600;display:flex;align-items:center;gap:6px}
.alert-item{display:flex;align-items:center;gap:10px;font-size:12px;padding:5px 0;border-top:1px solid rgba(241,196,15,.15)}
.alert-item:first-of-type{border-top:none}
.alert-days{background:var(--yellow);color:#000;border-radius:4px;padding:2px 7px;font-weight:700;font-size:11px;white-space:nowrap}
.alert-days.urgent{background:var(--red);color:#fff}

/* ══════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════ */
.progress-wrap{position:fixed;top:0;left:0;right:0;z-index:1000;height:3px;background:var(--border)}
.progress-bar{height:100%;background:var(--acc);width:0;transition:width .3s}

/* ══════════════════════════════════════════════
   UTILITY
══════════════════════════════════════════════ */
.c-acc{color:var(--acc)}
.c-ok{color:var(--gtext)}
.c-warn{color:var(--ytext)}
.c-err{color:var(--rtext)}
.c-muted{color:var(--text3)}
.c-dim{color:var(--text2)}
.c-primary{color:var(--text)}
.fw-5{font-weight:500}
.fw-6{font-weight:600}
.fs-10{font-size:10px}
.fs-11{font-size:11px}
.fs-12{font-size:12px}
.ml-a{margin-left:auto}
.mb-0{margin-bottom:0}
.mt-2{margin-top:2px}
.mt-8{margin-top:8px}
.hidden{display:none}
.r{text-align:right}
th.r{text-align:right}
.small-muted{font-size:11px;color:var(--text3)}
.small-dim{font-size:11px;color:var(--text2)}
.strong-primary{font-weight:500;color:var(--text)}

/* ── stat strip links ── */
a.stile{cursor:pointer;text-decoration:none;transition:background .15s}
a.stile:hover{background:var(--bg3);border-radius:6px}

/* ── sidebar filter chips ── */
.sf-section{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.sf-label{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.sf-chips{display:flex;gap:4px;flex-wrap:wrap}
.sf-chip{padding:3px 9px;border-radius:10px;font-size:11px;font-weight:500;border:1px solid var(--border);background:none;color:var(--text2);cursor:pointer;font-family:inherit}
.sf-chip:hover{border-color:var(--acc);color:var(--acc)}
.sf-chip.on{background:var(--acc-dim);border-color:var(--acc);color:var(--acc)}
.sf-select{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:5px 8px;color:var(--text2);font-size:11px;font-family:inherit;outline:none}
.sf-select:focus{border-color:var(--acc)}

/* ══════════════════════════════════════════════
   SUBNAV (Přehled / Šablony tabs)
══════════════════════════════════════════════ */
.subnav{flex-shrink:0;height:40px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:stretch;padding:0 20px;gap:0;z-index:150}
.sni{display:flex;align-items:center;gap:6px;padding:0 15px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:inherit;transition:color .1s;white-space:nowrap;text-decoration:none}
.sni:hover{color:var(--text)}
.sni.active{color:var(--acc);border-bottom-color:var(--acc)}
.sni-r{margin-left:auto;display:flex;align-items:center;gap:6px;padding-left:12px}

/* ══════════════════════════════════════════════
   VIEW TOGGLE (Zákazník / Obchodník)
══════════════════════════════════════════════ */
.view-toggle{display:flex;background:var(--bg3);border-radius:7px;border:1px solid var(--border);padding:2px;gap:2px;margin-right:4px}
.vt-btn{padding:4px 10px;border-radius:5px;border:none;background:transparent;color:var(--text2);font-size:11px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.vt-btn:hover{color:var(--text)}
.vt-btn.active{background:var(--acc-dim);color:var(--acc)}
[data-view="zakaznik"] .view-obch{display:none!important}
[data-view="obchodnik"] .view-zak{display:none!important}

/* ══════════════════════════════════════════════
   SEGMENT CHIPS (Telco / Energie / Pojištění)
══════════════════════════════════════════════ */
.seg-chips{display:flex;gap:4px;align-items:center;padding:0 6px}
.seg-chip{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;transition:.1s;font-family:inherit}
.seg-chip:hover{border-color:var(--acc);color:var(--acc)}
.seg-chip.on{border-color:var(--acc);background:var(--acc-dim);color:var(--acc)}

/* ══════════════════════════════════════════════
   MOBILE / PWA
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .stat-strip{display:none}
  .topbar{padding:0 12px;gap:8px}
  .logo-sub{display:none}
  .logo-mark{width:28px;height:28px;font-size:12px}
  .logo-name{font-size:14px}
  .nav2{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 8px}
  .nav2::-webkit-scrollbar{display:none}
  .ni{white-space:nowrap;padding:0 10px;font-size:12px;gap:4px}
  .n2sep{display:none}
  .app{min-width:0}
  .cards,.kcard-grid{grid-template-columns:1fr!important}
  .report-cards{grid-template-columns:1fr 1fr!important}
  .page-head{padding:16px 12px 12px}
  .section{padding:0 12px 12px}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .btn-group{flex-wrap:wrap}
  .klient-header{flex-direction:column;gap:8px;align-items:flex-start}
}
@media (max-width: 480px) {
  .report-cards{grid-template-columns:1fr!important}
  .topbar .ib:not(:last-child){display:none}
}