:root{
  --bg:#f6f7f9;
  --bg2:#ffffff;
  --card:#ffffff;
  --card2:#fafbfc;
  --border:#e8eaee;
  --border2:#dcdfe5;
  --text:#101418;
  --muted:#606a76;
  --muted2:#9aa2ad;
  --accent:#12b886;
  --accent2:#0ca678;
  --green:#12b886;
  --red:#e0485b;
  --purple:#7c3aed;
  --blue:#2563eb;
  --yellow:#d97706;
  --pink:#db2777;
  --cyan:#0891b2;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05);
  --shadow-lg:0 8px 30px rgba(16,24,40,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.green{color:var(--green)!important}
.red{color:var(--red)!important}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:12px 22px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.2px}
.brand-mark{color:var(--accent);font-size:20px}
.brand-name{color:var(--text)}
.brand-accent{color:var(--accent);font-weight:700}
.mainnav{display:flex;gap:20px;margin-left:8px}
.mainnav a{color:var(--muted);font-weight:600;padding:6px 2px;border-bottom:2px solid transparent}
.mainnav a:hover{color:var(--text)}
.mainnav a.active{color:var(--accent);border-bottom-color:var(--accent)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.search input{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 14px;color:var(--text);width:270px;outline:none}
.search input:focus{border-color:var(--accent);background:#fff}
.btn{border-radius:10px;padding:8px 16px;font-weight:600;cursor:pointer;border:1px solid transparent;display:inline-block}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2)}
.btn-ghost{background:transparent;border-color:var(--border2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:9px}
.usermenu{position:relative}
.avatar{width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;font-weight:800;border:none;cursor:pointer;font-size:13px}
.menu{position:absolute;right:0;top:48px;background:#fff;border:1px solid var(--border);border-radius:14px;min-width:200px;padding:8px;display:none;box-shadow:var(--shadow-lg)}
.menu.open{display:block}
.menu-head{padding:8px 12px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--border);margin-bottom:6px}
.menu a{display:block;padding:9px 12px;border-radius:9px;color:var(--text)}
.menu a:hover{background:var(--card2)}

/* ---------- layout ---------- */
.content{max-width:1400px;margin:0 auto;padding:26px 22px 60px}
.footer{max-width:1400px;margin:0 auto;padding:22px;display:flex;justify-content:space-between;color:var(--muted2);border-top:1px solid var(--border);font-size:13px;flex-wrap:wrap;gap:8px}
.page-title{font-size:28px;font-weight:800;margin:6px 0 20px;letter-spacing:-.4px}
.flashes{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.flash{padding:11px 16px;border-radius:11px;border:1px solid var(--border2)}
.flash-error{background:#fdecee;border-color:#f5c2c8;color:#b4232f}
.flash-ok{background:#e7f8f1;border-color:#b6e6d3;color:#0b7a56}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.card h3{margin:0 0 14px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:16px}
.kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{font-weight:700}
.kv .v.sub{font-weight:600;color:var(--muted)}
.chip-cols{display:flex;gap:22px;font-size:11px;color:var(--muted2);justify-content:flex-end;padding-right:2px}

/* ---------- toggles / tabs ---------- */
.toggle{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:4px;gap:2px}
.toggle a,.toggle button{padding:6px 13px;border-radius:8px;color:var(--muted);font-weight:600;font-size:13px;border:none;background:transparent;cursor:pointer}
.toggle a.active,.toggle button.active{background:var(--accent);color:#fff}
.toggle a:hover,.toggle button:hover{color:var(--text)}

/* ---------- tables ---------- */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.addform{display:flex;gap:8px;margin-left:auto}
.addform input{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:8px 12px;color:var(--text);width:150px;outline:none}
table.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
table.tbl th,table.tbl td{padding:13px 12px;text-align:right;font-size:14px;white-space:nowrap}
table.tbl th{color:var(--muted2);font-size:11px;letter-spacing:.4px;text-transform:uppercase;font-weight:700;cursor:pointer;user-select:none;border-bottom:1px solid var(--border)}
table.tbl th:hover{color:var(--text)}
table.tbl th.left,table.tbl td.left{text-align:left}
table.tbl tbody tr{border-bottom:1px solid var(--border);transition:background .12s}
table.tbl tbody tr:last-child{border-bottom:none}
table.tbl tbody tr:hover{background:var(--card2)}
.tkr{display:flex;align-items:center;gap:11px}
.tkr .logo{width:34px;height:34px;border-radius:9px;background:var(--card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--accent)}
.tkr .sym{font-weight:800}
.tkr .nm{color:var(--muted2);font-size:12px}
.score-pill{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.badge{display:inline-block;min-width:34px;text-align:center;padding:3px 8px;border-radius:8px;font-weight:800;font-size:13px}
.g-a{background:rgba(18,184,134,.14);color:#0f8f66}
.g-b{background:rgba(37,99,235,.12);color:#1d4ed8}
.g-c{background:rgba(217,119,6,.15);color:#b45309}
.g-d{background:rgba(224,72,91,.13);color:#c62436}
.scorebar{width:56px;height:6px;background:var(--border);border-radius:6px;overflow:hidden}
.scorebar>span{display:block;height:100%;background:var(--accent)}

/* ---------- company ---------- */
.co-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:8px;flex-wrap:wrap}
.co-logo{width:72px;height:72px;border-radius:18px;background:var(--card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;color:var(--accent)}
.co-name{font-size:28px;font-weight:800;margin:0;letter-spacing:-.5px}
.co-sub{color:var(--muted);font-weight:600;margin-top:2px}
.co-crumb{color:var(--muted2);font-size:13px;margin-top:4px}
.co-price{margin-left:auto;text-align:right}
.co-price .big{font-size:32px;font-weight:800;letter-spacing:-.5px}
.co-tabs{display:flex;gap:12px;align-items:center;margin:18px 0 20px;flex-wrap:wrap}
.pill{padding:8px 14px;border-radius:11px;border:1px solid var(--border2);font-weight:600;cursor:pointer;background:var(--card)}
.pill.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pill.watch{color:#c62436;border-color:#f0c4ca;background:#fdf1f2}

.scorewrap{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center}
@media(max-width:720px){.scorewrap{grid-template-columns:1fr}}
.gauge{position:relative;text-align:center}
.gauge .num{font-size:52px;font-weight:800;line-height:1;letter-spacing:-1px}
.gauge .lbl{color:var(--muted);font-size:13px;margin-top:4px}
.cat-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.cat-row:last-child{border:none}
.cat-name{width:150px;color:var(--muted)}
.cat-bar{flex:1;height:9px;background:var(--border);border-radius:8px;overflow:hidden}
.cat-bar>span{display:block;height:100%}
.cat-val{width:42px;text-align:right;font-weight:800}

.chart{width:100%;height:230px}
.chart-lg{width:100%;height:340px}
.section-title{font-size:20px;font-weight:800;margin:30px 0 14px;letter-spacing:-.3px}

/* auth */
.auth{max-width:420px;margin:60px auto;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:34px;box-shadow:var(--shadow-lg)}
.auth h1{margin:0 0 6px;font-size:26px;letter-spacing:-.4px}
.auth p.sub{color:var(--muted);margin:0 0 22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:11px 13px;color:var(--text);outline:none}
.field input:focus,.field select:focus{border-color:var(--accent);background:#fff}
.auth .btn{width:100%;text-align:center;margin-top:6px;padding:12px}
.auth .alt{text-align:center;margin-top:16px;color:var(--muted)}

/* portfolio / stats */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
@media(max-width:800px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.stat .lbl{color:var(--muted);font-size:13px}
.stat .val{font-size:26px;font-weight:800;margin-top:4px;letter-spacing:-.5px}
.iconbtn{background:transparent;border:none;color:var(--muted2);cursor:pointer;font-size:15px}
.iconbtn:hover{color:var(--red)}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:20px;box-shadow:var(--shadow)}
.inline-form .field{margin:0}
.inline-form input{width:130px}

/* detail layout */
.detail-top{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:stretch}
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.charts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.detail-bottom{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media(max-width:1050px){.detail-top,.charts-grid,.detail-bottom{grid-template-columns:1fr}.cards-2{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards-2{grid-template-columns:1fr}}

/* filtry */
.tkr-select,.tkr-input{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text);outline:none}
.tkr-select:focus,.tkr-input:focus{border-color:var(--accent);background:#fff}
.tkr-input{min-width:280px}

/* autocomplete */
.ac{position:absolute;top:44px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;display:none;z-index:60}
.ac.open{display:block}
.ac-item{display:flex;align-items:center;gap:10px;padding:9px 13px;cursor:pointer}
.ac-item:hover,.ac-item.sel{background:var(--card2)}
.ac-tkr{font-weight:800;min-width:52px;color:var(--accent)}
.ac-nm{flex:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.ac-ex{color:var(--muted2);font-size:11px}
.card ul li{margin-bottom:5px}

/* status bar */
.statusbar{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow)}
.statusbar .dot{width:10px;height:10px;border-radius:50%;background:var(--muted2);flex:none}
.statusbar .dot.run{background:var(--yellow);animation:pulse 1.4s infinite}
.statusbar .dot.done{background:var(--green)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,119,6,.4)}70%{box-shadow:0 0 0 8px rgba(217,119,6,0)}100%{box-shadow:0 0 0 0 rgba(217,119,6,0)}}
.statusbar .progress{flex:1;height:8px;background:var(--border);border-radius:8px;overflow:hidden;max-width:340px}
.statusbar .progress>span{display:block;height:100%;width:0;background:var(--accent);transition:width .5s}

/* settings */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:800px){.settings-grid{grid-template-columns:1fr}}
.chk{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.hint{color:var(--muted2);font-size:12px;margin-top:4px}

/* ---- Vyskakovací AI asistent (chat) ---- */
.chat-fab{position:fixed;bottom:22px;right:22px;width:54px;height:54px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 6px 20px rgba(18,184,134,.4);z-index:900;transition:transform .15s}
.chat-fab:hover{transform:scale(1.08)}
.chat-panel{position:fixed;bottom:22px;right:22px;width:370px;max-width:calc(100vw - 24px);height:520px;
  max-height:calc(100vh - 44px);background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 12px 40px rgba(16,20,24,.18);z-index:901;display:flex;flex-direction:column;overflow:hidden}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;
  background:var(--accent);color:#fff;font-weight:700;font-size:15px}
.chat-x{cursor:pointer;opacity:.85;font-size:14px}
.chat-x:hover{opacity:1}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;background:var(--bg)}
.chat-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.5;white-space:normal}
.chat-msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.chat-msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:4px}
.chat-msg.thinking{opacity:.6}
.chat-msg.err{border-color:#f0c4ca;color:var(--red)}
.chat-act{align-self:center;font-size:11px;color:var(--muted2);background:var(--card2);border:1px solid var(--border);
  padding:2px 10px;border-radius:20px}
.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:var(--card)}
.chat-input input{flex:1;border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:13.5px;outline:none}
.chat-input input:focus{border-color:var(--accent)}
.chat-msg.notif{align-self:stretch;max-width:100%;background:#fff8e6;border:1px solid #ffe08a;color:#7a5c00;font-size:12.5px}
.chat-fab.has-unread::after{content:"";position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:#f6455d;border:2px solid #fff}
.chat-fab{position:fixed}
/* animované tečky „přemýšlím / analyzuji" v chatu */
.chat-dots{display:inline-flex;gap:4px;align-items:center;vertical-align:middle}
.chat-dots i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;animation:chatBounce 1.2s infinite ease-in-out both}
.chat-dots i:nth-child(1){animation-delay:-.24s}
.chat-dots i:nth-child(2){animation-delay:-.12s}
@keyframes chatBounce{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}
/* návrhová tlačítka v chatu (akce + navigace) */
.chat-sugg{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:95%;margin-top:2px}
.chat-sugg-btn{display:inline-block;background:#fff;border:1px solid var(--accent);color:var(--accent2);
  font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:20px;cursor:pointer;text-decoration:none;line-height:1.2}
.chat-sugg-btn:hover{background:var(--accent);color:#fff}
.chat-sugg-btn.nav{border-style:dashed}
/* AI analýza – markdown tabulky a kód */
.ai-tbl{border-collapse:collapse;width:100%;margin:12px 0;font-size:13px;line-height:1.5}
.ai-tbl th,.ai-tbl td{border:1px solid var(--border);padding:7px 10px;text-align:left;vertical-align:top}
.ai-tbl th{background:var(--card2);font-weight:600}
.ai-tbl tr:nth-child(even) td{background:var(--card2)}
#aiOut code{background:var(--card2);padding:1px 6px;border-radius:5px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
#aiOut h3,#aiOut h4{color:var(--ink,#101418)}

/* ---------- telefony (responzivita) ---------- */
/* Doplněno kvůli použitelnosti na mobilu. VŠECHNO je uvnitř @media dotazů,
   takže vzhled na desktopu zůstává bit za bitem stejný jako v balíčku —
   žádné pravidlo výše se nemění. Problém, který to řeší: obsah horní lišty
   měl na 375px šířku 1202px (logo + 7 odkazů + hledání 270px + avatar), takže
   se stránka na iPhonu odzoomovala a hledání i uživatelské menu byly mimo
   obrazovku. Tabulky bez scroll obalu rozšiřovaly stránku až na 1636px. */

@media(max-width:900px){
  /* Lišta na dva řádky: 1) logo + hledání + avatar, 2) navigace.
     Navigace se posouvá vodorovně, aby zůstaly všechny odkazy dostupné
     a nemusela se zavádět nová komponenta (hamburger) = jiný design. */
  .topbar-inner{flex-wrap:wrap;gap:10px 14px;padding:10px 14px}
  .brand{flex:0 0 auto;font-size:16px}
  .brand-mark{font-size:18px}
  .topbar-right{flex:1 1 auto;min-width:0;gap:10px}
  .search{flex:1 1 auto;min-width:0}
  .search input{width:100%;min-width:0}
  .mainnav{order:3;width:100%;margin-left:0;gap:18px;overflow-x:auto;
    overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
  .mainnav::-webkit-scrollbar{display:none}
  /* větší plocha na dotyk (Apple doporučuje ~44px) */
  .mainnav a{flex:0 0 auto;white-space:nowrap;padding:9px 2px}
  .content{padding:18px 14px 48px}
  .footer{padding:18px 14px}
}

@media(max-width:640px){
  /* Tabulky se posouvají uvnitř sebe, místo aby rozšiřovaly celou stránku.
     Části šablon mají <div style="overflow-x:auto">, ale 19 tabulek ne —
     tohle to řeší centrálně bez zásahu do šablon. */
  table.tbl{display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  table.tbl th,table.tbl td{padding:11px 10px}

  /* Přepínač profilů (Vyvážený/Hodnotový/…) se na 375px nevešel a byl odříznutý. */
  .toolbar{gap:10px}
  .toggle{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .toggle::-webkit-scrollbar{display:none}
  .toggle a,.toggle button{flex:0 0 auto;white-space:nowrap}

  /* Vstupy s pevnou šířkou → pružné, ať se vejdou do řádku. */
  .addform{margin-left:0;width:100%;flex-wrap:wrap}
  .addform input{width:auto;flex:1 1 150px;min-width:0}
  .inline-form input,.inline-form select{width:auto;flex:1 1 110px;min-width:0}
  .tkr-input{min-width:0;width:100%}
  .cat-name{width:auto;min-width:104px}

  /* Titulky ať nekradou půl obrazovky. */
  h1{font-size:26px}
  .section-title{font-size:15px}
}

@media(max-width:380px){
  /* iPhone SE a užší: přehledové dlaždice na jeden sloupec, ať se čísla nelámou. */
  .stat-row{grid-template-columns:1fr}
}

/* Mřížky, které mají počet sloupců zadrátovaný INLINE v šabloně
   (views/company.ejs: repeat(3,1fr) u grafů, 1fr 1fr u spodní části,
   repeat(2,1fr) u druhé sady grafů, repeat(4,1fr) u údajů o firmě).
   Inline styl přebije i media query, takže na telefonu zůstávaly tři sloupce
   grafů v kontejneru širokém 347px — ECharts si podle toho vykreslil canvasy
   o šířce 429px (pevná pixelová šířka) a roztáhl stránku na 612px.
   !important je tu jediná cesta, jak inline styl porazit bez zásahu do šablon
   (design z balíčku se nemá měnit). Vše platí jen na úzkých displejích. */
@media(max-width:1050px){
  /* minmax(0,1fr), ne 1fr: `1fr` má minimum min-content, takže canvas grafu
     s pevnou šířkou 429px roztlačí sloupec i v kontejneru širokém 347px
     (klasický "grid blowout"). S minmax(0,…) se sloupec drží šířky kontejneru,
     ECharts si při inicializaci přečte správnou šířku a canvas vykreslí
     na míru — bez deformace i bez odříznutí. */
  .charts-grid,.detail-bottom,.detail-top,.cards-2{grid-template-columns:minmax(0,1fr)!important}
  .charts-grid>*,.detail-bottom>*,.detail-top>*,.cards-2>*,.card,.chart,.chart-lg{min-width:0}
}
@media(max-width:640px){
  /* údaje o firmě (Sektor / Odvětví / Zaměstnanci / …): 4 sloupce → 2 */
  div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
}