*{box-sizing:border-box;margin:0;padding:0}
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --surface-0:#f1efe8;--surface-1:#fff;--surface-2:#f5f4ee;
  --border:#d3d1c7;--border-strong:#b4b2a9;
  --text-primary:#2c2c2a;--text-secondary:#5f5e5a;--text-muted:#888780;
  --text-accent:#185fa5;--text-danger:#a32d2d;--text-success:#3b6d11;--text-warning:#854f0b;
  --bg-accent:#e6f1fb;--bg-danger:#fcebeb;--bg-success:#eaf3de;--bg-warning:#faeeda;
  --border-accent:#b5d4f4;--border-danger:#f09595;--border-success:#c0dd97;
  --radius:8px;
}
body{font-family:var(--font-sans);height:100vh;display:flex;flex-direction:column;overflow:hidden;
     background:var(--surface-0);color:var(--text-primary);font-size:13px}

/* TOPBAR */
.topbar{height:48px;background:var(--surface-1);border-bottom:0.5px solid var(--border);
        display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0}
.logo{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px}
.logo-mark{width:26px;height:26px;background:#0F2942;border-radius:6px;display:flex;align-items:center;justify-content:center}
.logo-mark i{font-size:14px;color:#fff}
.tb-divider{width:0.5px;height:20px;background:var(--border);flex-shrink:0}
.tb-role{font-size:11px;background:var(--bg-accent);color:var(--text-accent);padding:2px 8px;border-radius:10px;font-weight:500}
.tb-spacer{flex:1}
.tb-user{font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
.tb-user i{font-size:15px}
.btn-plain{background:none;border:0.5px solid var(--border);border-radius:var(--radius);padding:5px 10px;
           font-size:12px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:5px;font-family:inherit}
.btn-plain:hover{background:var(--surface-2);color:var(--text-primary)}
/* Menu účtu (DT-200) */
.ucet{position:relative}
.ucet-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:900;min-width:260px;background:var(--surface-1);
           border:0.5px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.14);padding:4px}
.ucet-menu button,.ucet-menu a{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;background:none;
           border-radius:6px;font-size:12px;font-family:inherit;color:var(--text-primary);text-decoration:none;cursor:pointer;text-align:left}
.ucet-menu button:hover,.ucet-menu a:hover{background:var(--surface-2)}

/* LEVÉ MENU (DT-273): patro správy má položky pod sebou, záložky nahoře se s moduly nevešly.
   Úzké okno dostane položky zase do řádku nad obsahem. */
.sprava{flex:1;display:flex;min-height:0}
.tabs{width:220px;flex-shrink:0;background:var(--surface-1);border-right:0.5px solid var(--border);
      padding:12px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.tab{padding:8px 10px;border-radius:6px;font-size:13px;color:var(--text-secondary);cursor:pointer;border:none;
     display:flex;align-items:center;gap:8px;white-space:nowrap;background:none;font-family:inherit;text-align:left}
.tab i{font-size:16px}
.tab:hover{background:var(--surface-2);color:var(--text-primary)}
.tab.active{background:var(--bg-accent);color:var(--text-accent);font-weight:500}
.sprava>.content{min-width:0}
@media(max-width:760px){
  .sprava{flex-direction:column}
  .tabs{width:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:0.5px solid var(--border);padding:6px 8px}
}

/* CONTENT */
.content{flex:1;overflow-y:auto;padding:18px 16px}
.panel{display:none;max-width:900px;margin:0 auto}
.panel.active{display:block}
/* Provoz a náklady má široké tabulky (DT-202). */
.panel.panel-siroky{max-width:1180px}
.tabulka{width:100%;border-collapse:collapse;font-size:12px}
.tabulka th,.tabulka td{padding:6px 8px;border-bottom:0.5px solid var(--border);text-align:right;white-space:nowrap}
.tabulka th{color:var(--text-muted);font-weight:500;border-bottom:1px solid var(--border)}
.tabulka th:first-child,.tabulka td:first-child,.tabulka .vlevo{text-align:left}
.tabulka tfoot td{font-weight:600}
.card{background:var(--surface-1);border:0.5px solid var(--border);border-radius:10px;padding:16px;margin-bottom:14px}
.card h3{font-size:14px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:7px}
.card h3 i{color:var(--text-accent);font-size:17px}
.card .hint{font-size:12px;color:var(--text-muted);margin-bottom:12px;line-height:1.5}

.radek{display:flex;align-items:center;gap:10px;padding:9px 12px;border:0.5px solid var(--border);
       border-radius:var(--radius);margin-bottom:6px;background:var(--surface-1)}
.radek:hover{background:var(--surface-2)}
.radek-main{flex:1;min-width:0}
.radek-nazev{font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.radek-meta{font-size:11px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot.on{background:#22c55e}.dot.off{background:#d1d5db}

.znacka{font-size:10px;padding:1px 7px;border-radius:9px;font-weight:500;white-space:nowrap}
.znacka.fakturant{background:var(--surface-2);color:var(--text-secondary)}
.znacka.hlavni_ucetni{background:var(--bg-warning);color:var(--text-warning)}
.znacka.cfo{background:var(--bg-violet);color:var(--text-violet)}
.znacka.primy{background:var(--bg-success);color:var(--text-success)}
.znacka.admin{background:var(--bg-accent);color:var(--text-accent)}

/* Zaškrtávátka a přepínače sem nepatří (DT-93): `width:100%` jim roztáhlo rámeček přes
   celý řádek a popisek vedle nich odskočil na pravý okraj, kde se zalomil. */
input:not([type=checkbox]):not([type=radio]),select,textarea{border:0.5px solid var(--border-strong);border-radius:var(--radius);padding:7px 9px;
       font-size:12px;background:var(--surface-2);color:var(--text-primary);outline:none;font-family:inherit;width:100%}
input:focus,select:focus{border-color:#1B5FA8;background:var(--surface-1)}
select.maly{width:auto;padding:4px 6px;font-size:11px}
.mrizka{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mrizka .siroky{grid-column:1/-1}

.btn{border:none;border-radius:var(--radius);padding:8px 14px;font-size:12px;font-weight:500;cursor:pointer;
     display:inline-flex;align-items:center;gap:5px;font-family:inherit}
.btn.prim{background:#1B5FA8;color:#fff}
.btn.prim:hover{background:#154E8F}
.btn.sekund{background:var(--surface-2);color:var(--text-primary);border:0.5px solid var(--border-strong)}
.btn.nebezpecny{background:var(--bg-danger);color:var(--text-danger);border:0.5px solid var(--border-danger)}
.ra{width:26px;height:26px;border-radius:var(--radius);border:0.5px solid var(--border);background:var(--surface-2);
    cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0}
.ra:hover{background:var(--border);color:var(--text-primary)}
.ra.danger:hover{background:var(--bg-danger);color:var(--text-danger);border-color:var(--border-danger)}

.info{font-size:11px;margin-top:6px;min-height:14px}
.info.ok{color:var(--text-success)}
.info.err{color:var(--text-danger)}

.prazdno{text-align:center;padding:28px;color:var(--text-muted);font-size:12px}
.nacitani{color:var(--text-muted);font-size:12px;padding:10px}

.zam{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 30px;font-size:12px;border-top:0.5px solid var(--border)}
.klient-box{border:0.5px solid var(--border);border-radius:var(--radius);margin-bottom:8px;overflow:hidden;background:var(--surface-1)}
.klient-hlava{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface-2)}
.zam-blok{border-top:0.5px solid var(--border)}
.zam-blok .zam{border-top:none;padding:8px 12px 4px 30px}
.firmy-radek{display:flex;flex-wrap:wrap;gap:5px;padding:0 12px 8px 30px}
.firma-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;background:var(--bg-accent);
            color:var(--text-accent);border:0.5px solid var(--border-accent);border-radius:9px;padding:2px 8px}
.firma-chip i{cursor:pointer;font-size:12px;opacity:.6}
.firma-chip i:hover{opacity:1;color:var(--text-danger)}
.btn-firmy{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-family:inherit;cursor:pointer;
           border:0.5px solid var(--border-strong);background:var(--surface-2);color:var(--text-secondary);
           border-radius:var(--radius);padding:4px 8px;white-space:nowrap}
.btn-firmy:hover{color:var(--text-accent);border-color:var(--border-accent);background:var(--bg-accent)}
.btn-firmy.aktivni{color:var(--text-accent);border-color:var(--border-accent);background:var(--bg-accent)}
.firma-pridat{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--text-muted);
              border:0.5px dashed var(--border-strong);border-radius:9px;padding:2px 8px;cursor:pointer}
.firma-pridat:hover{color:var(--text-accent);border-color:var(--border-accent)}
.zam-novy{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 12px 12px 30px;
          border-top:0.5px dashed var(--border);background:var(--surface-2)}
@media(max-width:640px){.zam-novy{grid-template-columns:1fr}.zam-blok .zam,.firmy-radek,.zam-novy{padding-left:12px}}

/* Dlouhá tabulka s vlastním posuvníkem a hlavičkou, která zůstává nahoře (DT-201). */
.posuvnik{max-height:420px;overflow:auto;border:0.5px solid var(--border);border-radius:var(--radius)}
.posuvnik thead th{position:sticky;top:0;background:var(--surface-1);z-index:1}

/* Panel Nastavení klienta (DT-197) */
.btn.maly{padding:5px 10px;font-size:11px}
/* Detail zákazníka (DT-277): oddíly jako karty pod sebou, nahoře drobečky a skok na oddíl. */
.zk-hlava{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.zk-hlava .drobek{font-size:13px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.zk-hlava .drobek a{color:var(--text-accent);text-decoration:none}
.zk-hlava .drobek b{color:var(--text-primary);font-size:15px}
.zk-oddily{display:flex;flex-wrap:wrap;gap:4px}
.zk-oddily a{font-size:12px;padding:4px 10px;border-radius:6px;border:0.5px solid var(--border);color:var(--text-secondary);text-decoration:none;background:var(--surface-1)}
.zk-oddily a:hover{color:var(--text-primary);background:var(--surface-2)}
.nk-oddil{scroll-margin-top:12px}
.nk-ulozit{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px}
.nk-ulozit .info{margin:0}
.nk-pole{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--text-muted)}
.nk-oddil input,.nk-oddil select{height:36px}
.nk-nadpis{font-size:12px;font-weight:600;margin-bottom:2px}
.nk-popis{font-size:11px;color:var(--text-muted);line-height:1.5;margin-bottom:8px}
.nk-radek{display:flex;justify-content:space-between;font-size:12px;padding:3px 0}
/* Oprávnění k využití dat v panelu (DT-209) */
.nk-podnadpis{font-size:11px;font-weight:600;color:var(--text-secondary);margin:10px 0 4px}
.nk-op{padding:4px 0;border-bottom:0.5px dashed var(--border)}
.nk-op-detail{font-size:11px;color:var(--text-muted);line-height:1.5}
.nk-op-detail button{background:none;border:none;padding:0;font:inherit;color:var(--text-accent);cursor:pointer;text-decoration:underline}
.nk-op-form{margin-top:10px;padding:10px;border:0.5px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.nk-op-evidence{font-size:11px;color:var(--text-muted);margin-top:8px}
.nk-op-evidence summary{cursor:pointer}
.nk-op-evidence li{margin:3px 0 3px 16px;line-height:1.5}
.nk-nevratne{border-color:var(--border-danger)}

pre.log{background:#1c1c1c;color:#d8d8d8;border-radius:var(--radius);padding:12px;font-size:11px;
        line-height:1.6;max-height:56vh;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Menlo,Consolas,monospace}

@media(max-width:640px){
  .mrizka{grid-template-columns:1fr}
  .content{padding:12px 10px}
  .radek{flex-wrap:wrap}
}

/* Zpětná vazba (DT-194) */
.zv-pocet{display:inline-block;min-width:16px;height:16px;line-height:16px;border-radius:8px;padding:0 4px;
  background:#d97706;color:#fff;font-size:10px;font-weight:600;text-align:center;margin-left:4px}
/* `display` výš by jinak přebil atribut `hidden` a prázdný odznak by svítil */
.zv-pocet[hidden]{display:none}
.zv-zprava{border:0.5px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px}
.zv-zprava.vyresena{opacity:.65}
.zv-hlava{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:12px;color:var(--text-muted)}
.zv-hlava strong{color:var(--text-primary);font-size:13px}
.zv-text{white-space:pre-wrap;font-size:13px;margin:6px 0;color:var(--text-primary)}
.zv-kontext{font-size:11px;color:var(--text-muted)}
/* Souhrny nákladů (DT-184, krok 5): dvě velká čísla nahoře */
.sh-cisla{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:6px}
.sh-cisla div{display:flex;flex-direction:column}
.sh-cisla b{font-size:22px;font-weight:600}
.sh-cisla span{font-size:11px;color:var(--text-muted)}
/* Moduly portálu v nastavení klienta (DT-241) */
.nk-modul{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;cursor:pointer}
.nk-modul input{width:16px;height:16px}
.nk-popis.nk-chyba{color:var(--text-danger)}
/* Nabídka firem, které nikdo nemá, pod polem „IČO firmy“ v nastavení účtu (DT-264). Vzhled je
   týž jako u nabídky zkratek v editoru (`static/js/nabidka.js`, index.css a ucetni.css). */
.nabidka{position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:2px;max-height:260px;overflow-x:hidden;overflow-y:auto;background:var(--surface-1);border:0.5px solid var(--border-strong);border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,.15);font-size:12px}
.nabidka-nadpis{padding:6px 9px 2px;font-size:10px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.nabidka-volba{display:flex;justify-content:space-between;gap:8px;padding:5px 9px;cursor:pointer;color:var(--text-primary)}
.nabidka-volba>span:first-child{min-width:0;overflow-wrap:anywhere}
.nabidka-volba:hover,.nabidka-volba.aktivni{background:var(--surface-2)}
.nabidka-prazdna{padding:8px 9px;color:var(--text-muted)}
/* Využití a náklady (DT-284): řádek zákazníka, pod ním řešení; upozornění se štítkem vlevo */
.vy-hlava{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vy-hlava .hint{margin-bottom:0}
.vy-mesic{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--text-muted)}
.vy-mesic select{width:auto}
.tabulka tr.vy-zakaznik td{background:var(--surface-2);font-weight:600}
.tabulka tr.vy-zakaznik a{color:var(--text-primary);text-decoration:none}
.tabulka tr.vy-zakaznik a:hover{text-decoration:underline}
.tabulka .vy-kod{font-weight:400;color:var(--text-muted);margin-left:6px;font-size:11px}
.tabulka tr.vy-reseni td:first-child{padding-left:24px;color:var(--text-secondary)}
.tabulka tr.tlumene td{color:var(--text-muted)}
.vy-plus{color:var(--text-success)}
.vy-minus,.vy-tlumene{color:var(--text-muted)}
.vy-stitek{display:inline-block;font-size:10px;font-weight:600;border-radius:4px;padding:1px 6px;margin-left:6px;
  vertical-align:1px;border:0.5px solid var(--border-strong);color:var(--text-secondary);background:var(--surface-1)}
.vy-stitek.varovani{background:var(--bg-warning);color:var(--text-warning);border-color:var(--border-warning,#e8c48a)}
.vy-stitek.nebezpeci{background:var(--bg-danger);color:var(--text-danger);border-color:var(--border-danger)}
.vy-stitek.narust{background:var(--bg-violet);color:var(--text-violet);border-color:var(--border-violet)}
.vy-upozorneni{list-style:none;display:flex;flex-direction:column;gap:8px}
.vy-upozorneni li{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:10px 12px;
  border-radius:var(--radius);border:0.5px solid var(--border);border-left:3px solid var(--border-warning,#e8c48a)}
.vy-upozorneni li.narust{border-left-color:var(--border-violet)}
.vy-upozorneni li.vyrizene{opacity:.65}
.vy-upozorneni .co{font-weight:600}
.vy-upozorneni .proc{color:var(--text-secondary);font-size:12px;margin-top:2px}
.vy-upozorneni .kdy{color:var(--text-muted);font-size:11px;margin-top:2px}
.vy-vyrizena{margin-top:10px;font-size:12px;color:var(--text-muted)}
.vy-vyrizena summary{cursor:pointer;margin-bottom:8px}
.vy-dlazdice{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:12px}
.vy-dlazdice>div{border:0.5px solid var(--border);border-radius:var(--radius);padding:10px 12px;background:var(--surface-2)}
.vy-dlazdice .popis{font-size:11px;color:var(--text-muted)}
.vy-dlazdice .cislo{font-size:18px;font-weight:600;margin-top:2px}
.vy-dlazdice .vedle{font-size:11px;color:var(--text-secondary)}