/* Designový systém 88 Leads (E1-B1) — horní shell: pruh prostředí, menu 48 px,
   hledání, ikonová tlačítka, přepínač projektu, avatar, řádek karet leadů.
   Šablonu vykresluje js/shell.js, matici položek js/shell-menu.js. */
/* Vrstvy (rozhodnutí 2. kola revize): shell leží NAD obsahem stránky — rozbalovací prvky
   starých stránek mají z-index ≤ 80 (.fpanel 70, .idrop 75, menu detailu 80) a při scrollu
   musí zajet pod menu — a POD drawery (90/91), modaly (96) a jejich scrimy z theme.css.
   Popovery a paleta ⌘K jsou v <body> mimo #shell a mají vlastní (vyšší) vrstvu. */
#shell {
  position: sticky;
  top: 0;
  z-index: 85;
  background: var(--plocha);
  border-bottom: 1px solid var(--linka);
  font-family: var(--pismo-text), system-ui, sans-serif;
  font-size: var(--fs-13);
}
#shell:empty { min-height: var(--vyska-menu); }

/* theme.css dává html,body overflow-x:hidden → body se stane scroll kontejnerem a
   sticky #shell se chová jako relative (odjede při scrollu). `clip` schová přetečení
   stejně, ale scroll kontejner nevytvoří. */
body { overflow-x: clip; }

/* Lepivé/pevné prvky starých stránek počítaly se starou hlavičkou (53 px, ne lepivou):
   odsadit pod shell (48 px, s pruhem 77 px, s kartami víc) o původní mezeru.
   Hlídá server/test/e1-b1-stranky.test.js AK15c. */
body .cil-panel { top: calc(var(--vyska-shell, 48px) + 8px); } /* cíl hovorů, fixed z 70 */
body .fu-lista { top: calc(var(--vyska-shell, 48px) + 8px); } /* follow-upy: hromadné akce */
body .ns-nav { top: calc(var(--vyska-shell, 48px) + 14px); } /* nastavení: navigace */
body .nd-meta { top: calc(var(--vyska-shell, 48px) + 18px); } /* detail nabídky */
@media (max-width: 767.98px) {
  body .qdrop { top: calc(var(--vyska-shell, 48px) + 8px); } /* adresář: našeptávač */
  /* celoobrazovkový panel filtrů adresáře (z 80) má překrýt i shell */
  body #filter-panel.fpanel { z-index: 89; }
}
/* Výběr barvy a sady karet leadů patří k řádku karet ve shellu → vrstva popoverů */
body .w-taby__popover, body .w-taby__sady-menu { z-index: 1000; }

/* Pruh testovacího prostředí: bez ovládacích prvků, nejde zavřít */
#shell-pruh {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--vyska-pruhu);
  padding: 0 var(--m-4);
  background: var(--pruh-final-bg);
  color: var(--pruh-final-text);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: var(--lh-12);
  text-align: center;
}
.shell-pruh__kratky { display: none; }

.shell-nav {
  display: flex;
  align-items: center;
  gap: var(--m-2);
  height: var(--vyska-menu);
  padding: 0 var(--m-4);
}
.shell-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: var(--m-2);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
}
.shell-lista {
  display: flex;
  align-items: stretch;
  flex: 0 1 auto;
  gap: var(--m-1);
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shell-lista > li { display: flex; }
.shell-polozka {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 var(--m-3);
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: 500 var(--fs-13)/1 var(--pismo-text), system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--rychle) var(--krivka), background var(--rychle) var(--krivka);
}
.shell-polozka:hover { background: var(--plocha-2); color: var(--text); }
.shell-polozka:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.shell-polozka[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--znacka);
}

.shell-hledat {
  display: flex;
  align-items: center;
  gap: var(--m-2);
  flex: 1 1 160px;
  min-width: 120px;
  max-width: 320px;
  height: var(--vyska-tlacitka);
  margin-left: auto;
  padding: 0 var(--m-3);
  border: 1px solid var(--linka-silna);
  border-radius: var(--r-pill);
  background: var(--plocha-2);
  color: var(--text-2);
}
.shell-hledat:focus-within { border-color: var(--text); background: var(--plocha); }
.shell-hledat input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: 400 var(--fs-13)/1.2 var(--pismo-text), system-ui, sans-serif;
  cursor: pointer;
}
.shell-hledat input::placeholder { color: var(--text-2); }

#shell .w-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--m-2);
}
#shell .w-ibtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--vyska-tlacitka);
  height: var(--vyska-tlacitka);
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--rychle) var(--krivka);
}
#shell .w-ibtn:hover { background: var(--plocha-3); }
#shell .w-ibtn:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }

.shell-projekt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--vyska-tlacitka);
  padding: 0 var(--m-3);
  border: 1px solid var(--linka-silna);
  border-radius: var(--r-pill);
  background: var(--plocha);
  color: var(--text);
  font: 500 var(--fs-13)/1 var(--pismo-text), system-ui, sans-serif;
  white-space: nowrap;
}
button.shell-projekt { cursor: pointer; }
button.shell-projekt:hover { background: var(--plocha-2); }
button.shell-projekt:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.shell-avatar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--vyska-tlacitka);
  padding: 0 var(--m-1) 0 0;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.shell-avatar:hover { background: var(--plocha-3); }
.shell-avatar:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.shell-avatar__kruh {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--znacka-soft), var(--znacka-jasna));
  color: var(--text);
  font-size: var(--fs-11);
  font-weight: 600;
}

/* Řádek karet otevřených leadů: obsah a styl řeší js/taby-leadu.js + css/taby.css (E1-C) */
#shell-karty:empty { display: none; }

/* Paleta hledání ⌘K */
.shell-pal-zaves {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(10, 10, 10, .35);
}
.shell-pal {
  position: fixed;
  top: 96px;
  left: 50%;
  z-index: 1210;
  width: 560px;
  max-width: calc(100% - 32px);
  max-height: 70vh;
  overflow: hidden;
  transform: translateX(-50%);
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: var(--r-karta);
  box-shadow: var(--stin-3);
  font-family: var(--pismo-text), system-ui, sans-serif;
  font-size: var(--fs-13);
}
.shell-pal__hlava {
  display: flex;
  align-items: center;
  gap: var(--m-3);
  padding: var(--m-3) var(--m-4);
  border-bottom: 1px solid var(--linka);
}
.shell-pal__hlava input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: 400 var(--fs-14)/1.3 var(--pismo-text), system-ui, sans-serif;
}
.shell-pal__esc {
  padding: 2px 6px;
  border: 1px solid var(--linka-silna);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-11);
}
.shell-pal__vysledky { max-height: calc(70vh - 56px); overflow-y: auto; padding: var(--m-2); }
.shell-pal__skupina { padding: var(--m-2) var(--m-3) var(--m-1); color: var(--text-2); font-size: var(--fs-12); font-weight: 500; }
.shell-pal__vysledek {
  display: flex;
  align-items: center;
  gap: var(--m-3);
  min-height: 44px;
  padding: var(--m-2) var(--m-3);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
}
.shell-pal__vysledek:hover,
.shell-pal__vysledek:focus-visible { background: var(--plocha-3); outline: 0; }
.shell-pal__ava {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--znacka-soft), var(--znacka-jasna));
  font-size: var(--fs-11);
  font-weight: 600;
}
.shell-pal__txt { display: flex; flex-direction: column; min-width: 0; }
.shell-pal__txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-pal__txt i { color: var(--text-2); font-size: var(--fs-12); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-pal__txt i b { color: var(--text); }
.shell-pal__prazdno { padding: var(--m-6) var(--m-4); color: var(--text-2); text-align: center; }

@media (max-width: 1023.98px) {
  .shell-nav { gap: var(--m-1); padding: 0 var(--m-3); }
  .shell-hledat { flex-basis: 120px; }
}
@media (max-width: 767.98px) {
  .shell-hledat { min-width: 0; }
  #shell .w-ibtn, .shell-avatar, .shell-projekt { min-height: 44px; }
}

/* Avatar nese i třídu .w-ava (na ni se váže hledání zvonku a testy); přebít styl z theme.css */
#shell .shell-avatar.w-ava {
  width: auto;
  height: var(--vyska-tlacitka);
  border: 0;
  border-radius: var(--r-lg);
  overflow: visible;
  display: inline-flex;
  background: transparent;
  font-size: var(--fs-13);
  font-weight: 500;
}
/* Widgety, které do lišty vkládají zvonek.js a cile-hovoru.js (jejich vlastní styly mají
   staré velikosti písma): v shellu drží škálu; vzhled dopilovává E1-C */
#shell .cil-btn { font-size: var(--fs-12); }
#shell .cil-btn__cislo { font-size: var(--fs-12); }
#shell .zvonek-badge { font-size: var(--fs-11); }

/* ── Jediný přepínač projektu je v menu (E1-B2, P30) ─────────────────────
   Lokální segmenty starých stránek (adresář `#kat-seg` s data-kat, pipeline board
   přehledu s data-projekt) jsou skryté i s prázdným rodičem .seg; kód stránek se nemění
   (adresář přepíše E3, přehled E9). Stránka Pipeline vlastní přepínač už nemá (QA-10). */
.seg__b[data-kat], .seg__b[data-projekt] { display: none !important; }
.seg:not(:has(.seg__b:not([data-kat]):not([data-projekt]))) { display: none; }

/* Mobilní prvky shellu na desktopu nejsou */
.shell-mobil-nahore, .shell-mobil-menu, .shell-projekt-stitek, .shell-mobil-panel, .shell-mobil-dole { display: none; }

/* ── Mobilní shell (< 768 px, E1-B2): logo, štítek projektu, ☰; dole Přehled · Adresář · Úkoly · Hledat · Já ── */
.shell-odznak{margin-left:6px;min-width:18px;padding:0 6px;border-radius:9px;background:var(--znacka);color:#fff;font-weight:600;font-size:11px;line-height:18px;text-align:center}

@media (max-width: 767.98px) {
  .shell-nav { overflow: hidden; gap: var(--m-2); }
  .shell-nav .shell-lista, .shell-nav .shell-dalsi, .shell-nav .shell-hledat, .shell-nav .shell-avatar, .shell-nav .shell-projekt { display: none; }
  #shell-karty { display: none; }
  #shell .w-ibtn, .shell-avatar, .shell-projekt { min-height: 44px; }
  #shell .w-ibtn { min-width: 44px; }
  #shell .w-right { order: 2; margin-left: auto; }

  /* štítek a ☰ leží přímo v řádku menu (obal .shell-mobil-nahore jen seskupuje) */
  .shell-mobil-nahore { display: contents; }
  .shell-projekt-stitek {
    display: inline-flex;
    align-items: center;
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 44px;
    max-width: 40vw;
    padding: 0 var(--m-3);
    border: 1px solid var(--linka-silna);
    border-radius: var(--r-pill);
    background: var(--plocha);
    color: var(--text);
    font: 500 var(--fs-13)/1 var(--pismo-text), system-ui, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  button.shell-projekt-stitek { cursor: pointer; }
  .shell-mobil-menu {
    display: inline-grid;
    place-items: center;
    order: 3;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .shell-mobil-menu:focus-visible, .shell-projekt-stitek:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
  .shell-mobil-menu[aria-expanded="true"] { background: var(--plocha-3); }

  /* ☰: celé menu z matice pod lištou, přes obsah; posuvné, když se nevejde */
  .shell-mobil-panel:not([hidden]) {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--vyska-shell, 48px) - 56px);
    max-height: calc(100dvh - var(--vyska-shell, 48px) - 56px);
    overflow-y: auto;
    padding: var(--m-2) var(--m-3);
    background: var(--plocha);
    border-bottom: 1px solid var(--linka);
    box-shadow: var(--stin-3);
  }
  .shell-mobil-panel__polozka {
    display: flex;
    align-items: center;
    gap: var(--m-3);
    min-height: 44px;
    padding: 0 var(--m-3);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text);
    font: 500 var(--fs-14)/1.2 var(--pismo-text), system-ui, sans-serif;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .shell-mobil-panel__polozka:hover, .shell-mobil-panel__polozka:focus-visible { background: var(--plocha-3); outline: 0; }
  .shell-mobil-panel__polozka[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--znacka); }

  /* pruh prostředí: zkrácený, klepnutím celé znění */
  #shell-pruh { cursor: pointer; }
  .shell-pruh__kratky { display: block; }
  .shell-pruh__plny { display: none; }
  #shell-pruh.je-rozbaleny .shell-pruh__kratky { display: none; }
  #shell-pruh.je-rozbaleny .shell-pruh__plny { display: block; padding: var(--m-1) 0; }

  /* spodní lišta: pod drawery (90+) a modaly, nad obsahem */
  .shell-mobil-dole {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    display: flex;
    align-items: stretch;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--plocha);
    border-top: 1px solid var(--linka);
    font-family: var(--pismo-text), system-ui, sans-serif;
  }
  .shell-mobil-dole__b {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0; /* 5 položek na 320 px = 64 px každá; obsah nesmí položku roztáhnout */
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font: 500 var(--fs-11)/1 var(--pismo-text), system-ui, sans-serif;
    white-space: nowrap; /* „Další kroky“ zůstává na jednom řádku, výška lišty je pevná */
    text-decoration: none;
    cursor: pointer;
  }
  .shell-mobil-dole__b > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .shell-mobil-dole__b[aria-current="page"] { color: var(--text); box-shadow: inset 0 2px 0 var(--znacka); }
  .shell-mobil-dole__b:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}