:root{
  --petrol:#023D4B; --petrol2:#0A5C66; --orange:#E94E1B;
  --cream:#F7F4EF; --bg:#F7F6F3; --ink:#1d2b30; --muted:#637781;
  --line:rgba(0,0,0,.08); --line2:rgba(0,0,0,.05);
  --ok:#0F6E56; --okbg:#E1F0E8; --warn:#854F0B; --warnbg:#F3ECDA;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); font-size:15px; line-height:1.5;}
a{color:inherit; text-decoration:none;}

/* Layout */
.app{display:flex; min-height:100vh;}
.sidebar{width:208px; background:var(--petrol); color:#fff; display:flex; flex-direction:column; flex:none; position:sticky; top:0; height:100vh;}
.sidebar .brand{padding:18px 20px 14px; border-bottom:1px solid rgba(255,255,255,.10);}
.sidebar .brand img{height:30px; display:block;}
.nav{padding:10px 0; flex:1; overflow-y:auto;}
.nav a{display:flex; align-items:center; gap:11px; padding:10px 20px; color:rgba(255,255,255,.78);
  font-size:13.5px; border-left:3px solid transparent;}
.nav a:hover{color:#fff; background:rgba(255,255,255,.06);}
.nav a.active{color:#fff; background:var(--petrol2); border-left-color:var(--orange);}
.nav .ico{width:18px; text-align:center; opacity:.9;}
.nav .sep{margin:10px 20px 4px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.40);}
/* Nedostupné (připravované) položky menu — bez odkazu, ztlumené */
.nav .soon{display:flex; align-items:center; gap:11px; padding:10px 20px; font-size:13.5px;
  color:rgba(255,255,255,.40); border-left:3px solid transparent; cursor:default; user-select:none;}
.nav .soon .ico{opacity:.6;}
.nav .soon .soon-tag{margin-left:auto; font-size:9px; letter-spacing:.5px; text-transform:uppercase;
  color:rgba(255,255,255,.45); background:rgba(255,255,255,.08); border-radius:10px; padding:2px 7px; white-space:nowrap;}
.userbox{padding:12px 20px; border-top:1px solid rgba(255,255,255,.10); display:flex; align-items:center; gap:10px;}
.userbox .av{width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none;}
.userbox .nm{font-size:12.5px;color:#fff;line-height:1.25;}
.userbox .rl{font-size:11px;color:rgba(255,255,255,.55);}
.userbox a.out{margin-left:auto;color:rgba(255,255,255,.65);}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{display:flex; align-items:center; gap:14px; padding:13px 24px; background:#fff; border-bottom:0.5px solid var(--line);}
.topbar h1{margin:0; font-size:17px; font-weight:600; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topbar .spacer{flex:1;}
.content{padding:22px 24px;}

/* Tlačítko „☰ Menu" v liště – na desktopu skryté, jen pro mobil/tablet */
.menu-toggle{display:none; align-items:center; justify-content:center; flex:none;
  width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:#fff;
  color:var(--petrol); font-size:19px; line-height:1; cursor:pointer; padding:0;}
.menu-toggle:hover{background:var(--cream);}
/* Tmavé pozadí (overlay) za vysunutým panelem – na desktopu skryté */
.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(0,61,76,.45);
  z-index:90; opacity:0; transition:opacity .2s ease;}

/* Tlačítka */
.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:8px;
  padding:9px 15px;font-size:13.5px;font-weight:600;cursor:pointer;}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{filter:brightness(.95);}
.btn-block{width:100%;justify-content:center;padding:11px;}
.btn-secondary{background:var(--petrol);color:#fff;}
.btn-secondary:hover{background:var(--petrol2);}
.btn-ghost{background:#fff;color:var(--petrol);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--cream);}
.btn-danger{background:#fff;color:#A32D2D;border:1px solid #E7C9C9;}
.btn-danger:hover{background:#FCEBEB;}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:7px;}
.btn-xs{padding:4px 9px;font-size:12px;border-radius:6px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* Formulářové prvky */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.form-grid.cols-1{grid-template-columns:1fr;}
.form-grid .full{grid-column:1/-1;}
label.lbl{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:500;}
.inp,select.inp,textarea.inp{width:100%;padding:9px 11px;border:1px solid #d6dde0;border-radius:8px;
  font-size:14px;outline:none;background:#fff;color:var(--ink);font-family:inherit;}
.inp:focus,select.inp:focus,textarea.inp:focus{border-color:var(--petrol2);box-shadow:0 0 0 3px rgba(0,92,102,.12);}
textarea.inp{resize:vertical;min-height:64px;}
.check{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink);cursor:pointer;}
.check input{width:16px;height:16px;accent-color:var(--orange);}
.checks{display:flex;flex-wrap:wrap;gap:14px;}
fieldset.fs{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 16px;}
fieldset.fs legend{font-size:12px;font-weight:600;color:var(--petrol);padding:0 6px;text-transform:uppercase;letter-spacing:.5px;}

/* Toolbar / filtry / vyhledávání */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.toolbar .grow{flex:1;min-width:160px;}
.searchbar{position:relative;flex:1;min-width:200px;}
.searchbar input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:9px;font-size:14px;outline:none;background:#fff;}
.searchbar input:focus{border-color:var(--petrol2);box-shadow:0 0 0 3px rgba(0,92,102,.10);}
.searchbar::before{content:"⌕";position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;}

/* Tabulky */
.table-wrap{background:#fff;border:0.5px solid var(--line);border-radius:var(--radius);overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
table.tbl th{text-align:left;padding:11px 14px;background:var(--cream);color:var(--petrol);
  font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line);white-space:nowrap;}
table.tbl td{padding:10px 14px;border-bottom:0.5px solid var(--line2);vertical-align:middle;}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl tbody tr:hover{background:var(--cream);}
table.tbl tr.inactive td{opacity:.5;}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;}
table.tbl td.actions{text-align:right;white-space:nowrap;}
.row-link{cursor:pointer;}

/* Štítky / odznaky */
.badge{display:inline-block;font-size:11px;padding:2px 9px;border-radius:20px;font-weight:600;white-space:nowrap;}
.badge.ok{background:var(--okbg);color:var(--ok);}
.badge.warn{background:var(--warnbg);color:var(--warn);}
.badge.off{background:#EEE9E1;color:var(--muted);}
.badge.vip{background:#F3E3D8;color:#9A4A0B;}
.badge.top{background:#E3ECF3;color:#1A5A7A;}
.badge.info{background:#E6F0F2;color:var(--petrol2);}
/* Stavy TIPů – VÝRAZNĚ odlišené barvy (každý stav jiná barva) */
.badge.st-new{background:#FBE0CC;color:#B8480D;}    /* Nový – oranžová */
.badge.st-prog{background:#D4E6F7;color:#13547E;}   /* V řešení / rozpracováno – modrá */
.badge.st-wait{background:#FBEFC2;color:#876200;}   /* Čeká na klienta – žlutá */
.badge.st-done{background:#D2EEDB;color:#1C7A49;}   /* Uzavřeno / sjednáno – zelená */
.badge.st-none{background:#E3DDD3;color:#6B6B6B;}   /* Bez realizace / storno – šedá */
.tags{display:inline-flex;gap:5px;flex-wrap:wrap;}

/* Stavová hlavička detailu (pracovní plocha) */
.detail-head{background:#fff;border:0.5px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;}
.detail-head .top{display:flex;align-items:flex-start;gap:14px;}
.detail-head h2{margin:0;font-size:20px;color:var(--petrol);font-weight:600;}
.detail-head .meta{color:var(--muted);font-size:13px;margin-top:3px;}
.detail-head .top .spacer{flex:1;}

/* Záložky (taby) v detailu */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap;}
.tabs a{padding:9px 15px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;font-weight:500;}
.tabs a:hover{color:var(--ink);}
.tabs a.active{color:var(--petrol);border-bottom-color:var(--orange);font-weight:600;}
.tabs .count{font-size:11px;background:var(--cream);border-radius:10px;padding:1px 7px;margin-left:5px;color:var(--muted);}

/* Dvousloupcový layout detailu */
.split{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start;}
@media (max-width:900px){.split{grid-template-columns:1fr;}}

/* Hlášky (flash) */
.flash{border-radius:9px;padding:10px 14px;font-size:13.5px;margin-bottom:16px;border:1px solid transparent;}
.flash.ok{background:var(--okbg);color:var(--ok);border-color:#BFE0D0;}
.flash.err{background:#FCEBEB;color:#A32D2D;border-color:#E7C9C9;}
.flash.warn{background:var(--warnbg);color:var(--warn);border-color:#E6D6B0;}

/* Prázdný stav */
.empty{text-align:center;color:var(--muted);padding:40px 20px;font-size:14px;}
.empty .big{font-size:30px;opacity:.4;margin-bottom:8px;}

/* Stránkování */
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:16px;}
.pager a,.pager span{padding:6px 11px;border:1px solid var(--line);border-radius:7px;font-size:13px;color:var(--ink);background:#fff;}
.pager .cur{background:var(--petrol);color:#fff;border-color:var(--petrol);}
.pager .disabled{opacity:.4;pointer-events:none;}

/* Pomocné */
.muted{color:var(--muted);}
.right{text-align:right;}
.nowrap{white-space:nowrap;}
.mb0{margin-bottom:0;}
.mt16{margin-top:16px;}
.section-title{font-size:14px;font-weight:600;color:var(--petrol);margin:0 0 10px;}
.help{font-size:12px;color:var(--muted);margin-top:4px;}
.hint-row{font-size:12.5px;color:var(--muted);margin-bottom:12px;}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px;}
.kv dt{color:var(--muted);}
.kv dd{margin:0;color:var(--ink);}

/* Karty / dlaždice */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px;}
.card{background:#fff;border:0.5px solid var(--line);border-radius:var(--radius);padding:14px 16px;}
.metric .lbl{font-size:12px;color:var(--muted);margin-bottom:6px;}
.metric .val{font-size:24px;font-weight:600;color:var(--petrol);}
.panel{background:#fff;border:0.5px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.panel .head{padding:12px 16px;border-bottom:0.5px solid var(--line);font-weight:600;font-size:14px;color:var(--petrol);}
.panel .body{padding:16px;}

/* Přehledový seznam stavů (dashboard) */
.status-list{list-style:none;margin:0;padding:0;}
.status-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink);
  padding:8px 0;border-bottom:0.5px solid var(--line2);line-height:1.45;}
.status-list li:last-child{border-bottom:none;}
.status-list li .badge{flex:none;margin-top:1px;}
.status-list li:not(.done){color:var(--muted);}
a.card.metric:hover{border-color:var(--petrol2);box-shadow:0 0 0 3px rgba(0,92,102,.06);}

/* Přihlášení */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--cream);padding:20px;}
.auth-card{width:100%;max-width:380px;background:#fff;border:0.5px solid var(--line);
  border-radius:14px;padding:30px 28px;box-shadow:0 8px 30px rgba(0,61,76,.08);}
.auth-card .logo{text-align:center;margin-bottom:8px;}
.auth-card .logo img{height:42px;}
.auth-card h1{font-size:17px;font-weight:600;text-align:center;color:var(--ink);margin:6px 0 22px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;}
.field input{width:100%;padding:10px 12px;border:1px solid #d6dde0;border-radius:8px;font-size:14px;outline:none;}
.field input:focus{border-color:var(--petrol2);box-shadow:0 0 0 3px rgba(0,92,102,.12);}
.alert{background:#FCEBEB;color:#A32D2D;border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:14px;}
.auth-foot{text-align:center;font-size:12px;color:var(--muted);margin-top:18px;}
.badge{font-size:11px;padding:2px 9px;border-radius:20px;}
.badge.ok{background:var(--okbg);color:var(--ok);}

/* === Vyladění výběrových dlaždic (TIPy) a kalkulaček === */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.pick{position:relative;display:block;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;transition:.12s;text-align:left;width:100%;}
.pick:hover{border-color:var(--petrol2);box-shadow:0 3px 12px rgba(0,61,76,.08);}
.pick .ico{font-size:24px;display:block;margin-bottom:8px;}
.pick .t{font-weight:600;color:var(--ink);font-size:14px;}
.pick .s{font-size:12px;color:var(--muted);margin-top:2px;}
.pick.selected{border-color:var(--orange);border-width:2px;background:#FFF3EC;box-shadow:0 0 0 3px rgba(252,76,2,.14);}
.pick.selected::after{content:"✓";position:absolute;top:8px;right:10px;width:20px;height:20px;background:var(--orange);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.pick.acc{border-top-width:4px;}
/* Barevné akcenty sekcí dle kódu */
.acc-flo{border-top-color:#2E7DB5;} .acc-maj{border-top-color:#2E9E6B;} .acc-ziv{border-top-color:#E0556B;}
.acc-pod{border-top-color:#7A5BB0;} .acc-pen{border-top-color:#C08A2E;} .acc-uvr{border-top-color:#2E8E9E;}
.acc-inv{border-top-color:#3FA34D;} .acc-obn{border-top-color:#5A9E2E;} .acc-ss{border-top-color:#B0852E;}
.acc-zla{border-top-color:#C9A227;} .acc-zvi{border-top-color:#9E6B2E;}
/* Menší dlaždice podsekcí */
.subtiles{display:flex;flex-wrap:wrap;gap:8px;}
.subtile{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:8px 13px;font-size:13px;color:var(--ink);cursor:pointer;}
.subtile:hover{border-color:var(--petrol2);}
.subtile.selected{border-color:var(--orange);border-width:2px;background:#FFF3EC;font-weight:600;color:var(--petrol);}
/* Krokový nadpis */
.step-head{display:flex;align-items:center;gap:10px;margin:0 0 14px;}
.step-head .n{width:26px;height:26px;border-radius:7px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none;}
.step-head h3{margin:0;font-size:15px;color:var(--petrol);font-weight:600;}
/* Karty s logem (kalkulačky/odkazy) */
.logo-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.logo-card{display:flex;align-items:center;gap:12px;background:#fff;border:0.5px solid var(--line);border-radius:12px;padding:14px;transition:.12s;}
.logo-card:hover{box-shadow:0 5px 16px rgba(0,61,76,.10);border-color:var(--petrol2);transform:translateY(-1px);}
.logo-card .logo{width:50px;height:50px;border-radius:10px;object-fit:contain;background:var(--cream);padding:5px;flex:none;}
.logo-card .logo.ph{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--petrol);font-size:18px;}
.logo-card .nm{font-weight:600;color:var(--petrol);font-size:14px;line-height:1.3;}
.logo-card .ds{font-size:12px;color:var(--muted);margin-top:2px;}
/* Zvolený specialista – souhrn */
.chosen{display:flex;align-items:center;gap:11px;background:#FFF3EC;border:1px solid #F3C9B0;border-radius:10px;padding:11px 14px;}
.chosen .av{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex:none;}
.chosen .nm{font-weight:600;color:var(--petrol);}
.chosen .ds{font-size:12.5px;color:var(--muted);}
/* Povinné pole */
label.lbl.req::after,.req-star::after{content:" *";color:var(--orange);font-weight:700;}
/* Větší vstup (Potenciál) */
.inp.big{font-size:18px;padding:12px 14px;font-weight:600;}

/* Zvoneček notifikací v liště */
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;font-size:18px;color:var(--ink);}
.bell:hover{background:var(--cream);}
.bell.active{background:var(--cream);}
.bell-badge{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--orange);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;}

/* === Vizitka specialisty (Nový TIP) === */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.spec-card{position:relative;display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.12s;}
.spec-card:hover{border-color:var(--petrol2);box-shadow:0 4px 14px rgba(0,61,76,.10);}
.spec-card.selected{border-color:var(--orange);border-width:2px;background:#FFF3EC;box-shadow:0 0 0 3px rgba(252,76,2,.14);}
.spec-card.selected::after{content:"✓";position:absolute;top:10px;right:12px;width:20px;height:20px;background:var(--orange);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.spec-card .sc-top{display:flex;align-items:center;gap:11px;}
.spec-card .sc-av{width:42px;height:42px;border-radius:50%;background:var(--petrol);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;flex:none;overflow:hidden;}
.spec-card .sc-av img{width:100%;height:100%;object-fit:cover;}
.spec-card .sc-id{min-width:0;}
.spec-card .sc-nm{font-weight:700;color:var(--petrol);font-size:15px;line-height:1.2;}
.spec-card .sc-role{font-size:12.5px;color:var(--muted);}
.spec-card .sc-avail{margin-top:10px;}
.spec-card .sc-meta{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink);}
.spec-card .sc-meta .r{display:flex;gap:7px;align-items:flex-start;}
.spec-card .sc-meta .r .k{color:var(--muted);min-width:54px;flex:none;}
.spec-card.is-off{opacity:.62;}
.badge.accept{background:var(--okbg);color:var(--ok);}
.badge.reject{background:#FCEBEB;color:#A32D2D;}
/* Info hláška (upozornění na informování klienta) */
.infobox{display:flex;gap:10px;align-items:flex-start;background:#E6F0F2;border:1px solid #BcD8DE;border-left:4px solid var(--petrol2);border-radius:9px;padding:11px 14px;font-size:13.5px;color:var(--petrol);margin:0 0 16px;}
.infobox .i{font-size:17px;line-height:1;flex:none;}

/* === Indikátor "Systém pracuje" === */
#progbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--orange);z-index:9999;
  box-shadow:0 0 8px rgba(252,76,2,.5);transition:width .3s ease;opacity:0;}
#progbar.run{opacity:1;}
/* Hláška „Načítám data…" – UPROSTŘED obrazovky: bílé políčko, šedý text,
   oranžové točící se kolečko (dle požadovaného vzoru). */
#working{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;
  pointer-events:none;}
#working.show{display:flex;}
#working .work-box{display:flex;align-items:center;gap:12px;
  background:#fff;color:#5A6B72;padding:16px 22px;border-radius:14px;font-size:15px;font-weight:700;
  box-shadow:0 16px 44px rgba(0,61,76,.22);border:1px solid var(--line);
  animation:workpop .18s ease-out;}
@keyframes workpop{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}
#working .spin{width:20px;height:20px;border:3px solid #F3E0D6;border-top-color:var(--orange);
  border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Info ikonka s bublinou (nápověda při najetí myší) */
.hint-i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  background:var(--petrol2);color:#fff;font-size:11px;font-weight:700;font-style:normal;cursor:help;position:relative;margin-left:5px;vertical-align:middle;}
/* Bublina se zobrazí POD ikonkou a zarovnaná doleva (nahoře ji ořezával okraj sekce). */
.hint-i::after{content:attr(data-tip);position:absolute;left:0;top:150%;
  background:var(--petrol);color:#fff;padding:9px 12px;border-radius:8px;font-size:12px;font-weight:400;
  width:240px;max-width:70vw;line-height:1.45;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s;
  box-shadow:0 6px 18px rgba(0,61,76,.22);z-index:200;white-space:normal;}
.hint-i:hover::after{opacity:1;visibility:visible;}

/* ===========================================================================
   RESPONZIVITA – mobil a tablet
   Na úzkých obrazovkách se levý panel (.sidebar) skryje mimo plochu (off-canvas)
   a v horní liště se objeví tlačítko „☰ Menu", které ho vysune jako překryv.
   Na širokých obrazovkách (>1024px) zůstává vše beze změny (žádná regrese).
   =========================================================================== */
@media (max-width:1024px){
  /* Tablet i mobil: panel mimo plochu, tlačítko v liště se zobrazí */
  .menu-toggle{display:inline-flex;}
  .sidebar{position:fixed; top:0; left:0; height:100vh; height:100dvh; z-index:100;
    transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 0 28px rgba(0,61,76,.30);}
  /* Když je menu otevřené – panel vyjede a překryv ztmaví zbytek */
  .app.nav-open .sidebar{transform:translateX(0);}
  .app.nav-open .sidebar-overlay{display:block; opacity:1;}
  /* Obsah zabere celou šířku; menší boční padding ať se nic needře */
  .content{padding:18px 16px;}
  .topbar{padding:11px 16px; gap:10px;}
  .topbar h1{font-size:16px;}
}
@media (max-width:820px){
  /* Mobil: ještě užší padding a o něco užší vysunutý panel */
  .content{padding:14px 12px;}
  .topbar{padding:10px 12px; gap:8px;}
  .topbar h1{font-size:15px;}
  .sidebar{width:84vw; max-width:300px;}
  /* Tabulky a karty ať se vejdou; mřížky spadnou do jednoho sloupce */
  .cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .form-grid{grid-template-columns:1fr;}
}