/*
 * Cica Tanoda – közös fejléc (shell.js): egy fejléc-sáv minden felületen.
 * Előfeltétel: brand/cica-tokens.css. Csak --ct-* tokenek; a befogadó oldal saját CSS-étől független osztálynevek
 * (ct-shell*, ct-tabbar*, ct-crumbs*). Telefonon alsó fülsor, 768 px felett a menü a fejlécben, 1100 px felett
 * a szóvédjegy és a fekvő menüpontok is.
 */

:root {
  --ct-shell-h: 56px;          /* a fejléc-sáv magassága (biztonsági sáv nélkül) */
  --ct-shell-tab-h: 64px;      /* az alsó fülsor magassága */
  --ct-shell-sticky: var(--ct-shell-h);  /* ennyivel kerüljenek lejjebb az oldal saját ragadós elemei */
}
html[data-ct-shell="focus"] { --ct-shell-sticky: 0px; }
@media (min-width: 768px) {
  :root { --ct-shell-h: 64px; }
}

/* A helyőrző (<div id="ct-shell">) a modul betöltéséig foglalja a sáv helyét, hogy az oldal ne ugorjon. */
#ct-shell {
  display: block; min-height: calc(var(--ct-shell-h) + env(safe-area-inset-top));
  border-bottom: var(--ct-border-width) solid var(--ct-color-line);
}

/* ---------------------------------------------------------------- fejléc-sáv */
.ct-shell {
  position: sticky; top: 0; z-index: var(--ct-z-nav);
  background: color-mix(in srgb, var(--ct-color-bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: var(--ct-border-width) solid var(--ct-color-line);
  color: var(--ct-color-text);
  font-family: var(--ct-font-body); font-size: var(--ct-text-md); line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
/* Fókuszmódban (lecke, feladatlap) a tartalom saját sávja a ragadós; a héj sávja elgördül. */
.ct-shell[data-mode="focus"] { position: relative; }
.ct-shell *, .ct-tabbar *, .ct-crumbs * { box-sizing: border-box; }
.ct-shell ul, .ct-tabbar ul, .ct-crumbs ol { margin: 0; padding: 0; list-style: none; }

.ct-shell__bar {
  display: flex; align-items: center; gap: var(--ct-space-3);
  width: 100%; max-width: var(--ct-container-wide); margin: 0 auto;
  min-height: calc(var(--ct-shell-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--ct-gutter), env(safe-area-inset-right)) 0 max(var(--ct-gutter), env(safe-area-inset-left));
}

.ct-shell__ico { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; }
.ct-shell__ico svg { width: 100%; height: 100%; }
.ct-shell__sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* márkajel: festett Misu-fej + szóvédjegy → a szerep kezdőlapja */
.ct-shell__brand {
  display: inline-flex; align-items: center; gap: var(--ct-space-2); flex: none;
  min-height: var(--ct-touch-min); padding-right: var(--ct-space-1);
  border-radius: var(--ct-radius-sm); color: inherit; text-decoration: none;
}
.ct-shell__head { display: block; width: 40px; height: 40px; object-fit: contain; }
.ct-shell__word { display: none; width: auto; height: 23px; }
.ct-shell__title {
  min-width: 0; flex: 0 1 auto;
  padding-left: var(--ct-space-3); border-left: 2px solid var(--ct-color-line);
  font-weight: var(--ct-weight-semibold); color: var(--ct-color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* fő menü a sávban (768 px felett) */
.ct-shell__nav { display: none; }
.ct-shell__nav-list { display: flex; align-items: center; justify-content: center; gap: var(--ct-space-1); }
.ct-shell__link {
  --_app: var(--ct-app-honlap);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 64px; min-height: 56px; padding: var(--ct-space-1) var(--ct-space-2);
  border-radius: var(--ct-radius-sm);
  color: var(--ct-color-text-muted); text-decoration: none;
  font-size: var(--ct-text-xs); font-weight: var(--ct-weight-semibold); line-height: 1.2; white-space: nowrap;
  transition: background var(--ct-duration-base) var(--ct-ease-standard), color var(--ct-duration-base) var(--ct-ease-standard);
}
.ct-shell__link--feladatgyar { --_app: var(--ct-app-feladatgyar); }
.ct-shell__link--orafoglalo { --_app: var(--ct-app-orafoglalo); }
a.ct-shell__link:hover { color: var(--ct-color-text); background: var(--ct-color-surface-soft); }
.ct-shell__link[aria-current="page"] { color: var(--ct-color-text); background: var(--ct-color-primary-soft); }
.ct-shell__nav .ct-shell__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--ct-space-2); right: var(--ct-space-2); bottom: 3px;
  height: 3px; border-radius: 3px; background: var(--_app);
}
.ct-shell__link.is-soon { color: var(--ct-color-text-subtle); cursor: default; }
.ct-shell__soon {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ct-shell__badge {
  position: absolute; top: 2px; left: calc(50% + 6px);
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--ct-radius-pill); border: 2px solid var(--ct-color-surface);
  background: var(--ct-color-accent); color: var(--ct-color-on-accent);
  font-size: var(--ct-text-xs); font-weight: var(--ct-weight-bold); line-height: 1; font-variant-numeric: tabular-nums;
}

/* jobb oldal: nyelv, fiók vagy Kilépés */
.ct-shell__end { display: flex; align-items: center; gap: var(--ct-space-2); flex: none; margin-left: auto; }

.ct-shell__lang { display: inline-flex; align-items: center; gap: 2px; }
.ct-shell__lang-btn {
  display: inline-grid; place-items: center;
  min-width: var(--ct-touch-min); min-height: var(--ct-touch-min); padding: 0 6px;
  border: 0; border-radius: var(--ct-radius-pill); background: transparent;
  color: var(--ct-color-text-muted); font: inherit; font-size: var(--ct-text-sm); font-weight: var(--ct-weight-bold);
  letter-spacing: 0.04em; cursor: pointer;
}
.ct-shell__lang-btn:hover { background: var(--ct-color-surface-soft); color: var(--ct-color-text); }
/* az oldal saját nyelvi menüje (feladatlap) ugyanabban a méretben */
.ct-shell__langnode .lang-btn { min-height: var(--ct-touch-min); font-family: var(--ct-font-body); }
.ct-shell__lang-btn[aria-pressed="true"] { background: var(--ct-color-primary-soft); color: var(--ct-color-text); }

.ct-shell__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ct-space-2);
  min-height: var(--ct-touch-min); min-width: var(--ct-touch-min); padding: 0 var(--ct-space-4);
  border: var(--ct-border-width) solid var(--ct-color-line-strong); border-radius: var(--ct-radius-sm);
  background: var(--ct-color-surface); color: var(--ct-color-text);
  font: inherit; font-weight: var(--ct-weight-semibold); line-height: 1.2; text-decoration: none; cursor: pointer;
}
.ct-shell__btn:hover { background: var(--ct-color-primary-soft); color: var(--ct-color-text); }
.ct-shell__btn--primary { background: var(--ct-color-primary); border-color: var(--ct-color-primary); color: var(--ct-color-on-primary); }
.ct-shell__btn--primary:hover { background: var(--ct-color-primary-hover); border-color: var(--ct-color-primary-hover); color: var(--ct-color-on-primary); }
.ct-shell__exit .ct-shell__ico { width: 20px; height: 20px; }

/* fiókmenü */
.ct-shell__account { position: relative; }
.ct-shell__who {
  display: inline-flex; align-items: center; gap: var(--ct-space-2);
  min-height: var(--ct-touch-min); padding: 3px var(--ct-space-2) 3px 3px;
  border: var(--ct-border-width) solid var(--ct-color-line); border-radius: var(--ct-radius-pill);
  background: var(--ct-color-surface); color: var(--ct-color-text); font: inherit; cursor: pointer;
}
.ct-shell__who:hover { border-color: var(--ct-color-line-strong); }
.ct-shell__who-text { display: none; text-align: left; line-height: 1.15; }
.ct-shell__who-text b { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ct-text-sm); }
.ct-shell__who-text small { display: block; font-size: var(--ct-text-xs); color: var(--ct-color-text-muted); }
.ct-shell__chev { width: 18px; height: 18px; color: var(--ct-color-text-muted); transition: transform var(--ct-duration-base) var(--ct-ease-standard); }
.ct-shell__who[aria-expanded="true"] .ct-shell__chev { transform: rotate(180deg); }
.ct-shell__avatar {
  display: inline-grid; place-items: center; flex: none;
  width: var(--s, 36px); height: var(--s, 36px); border-radius: 50%;
  background: var(--c, var(--ct-color-primary)); color: var(--ct-color-on-primary);
  font-family: var(--ct-font-display); font-weight: var(--ct-weight-bold); font-size: calc(var(--s, 36px) * 0.44); line-height: 1;
}

.ct-shell__menu {
  position: absolute; right: 0; top: calc(100% + var(--ct-space-2)); z-index: var(--ct-z-overlay);
  width: min(320px, calc(100vw - 2 * var(--ct-gutter)));
  max-height: calc(100dvh - var(--ct-shell-h) - var(--ct-space-5)); overflow-y: auto;
  padding: var(--ct-space-2);
  background: var(--ct-color-surface); color: var(--ct-color-text);
  border: var(--ct-border-width) solid var(--ct-color-line); border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-shadow-lg); text-align: left;
}
.ct-shell__menu-head {
  display: flex; align-items: center; gap: var(--ct-space-3);
  padding: var(--ct-space-2) var(--ct-space-2) var(--ct-space-3);
  margin-bottom: var(--ct-space-1); border-bottom: var(--ct-border-width) solid var(--ct-color-line);
}
.ct-shell__menu-head b { display: block; }
.ct-shell__menu-head small { display: block; color: var(--ct-color-text-muted); font-size: var(--ct-text-xs); word-break: break-all; }
.ct-shell__menu-list, .ct-shell__views { display: grid; gap: 2px; }
.ct-shell__views, .ct-shell__menu-list--end {
  margin-top: var(--ct-space-1); padding-top: var(--ct-space-1); border-top: var(--ct-border-width) solid var(--ct-color-line);
}
.ct-shell__menu-title {
  margin: 0; padding: var(--ct-space-2) var(--ct-space-3) var(--ct-space-1);
  font-size: var(--ct-text-xs); font-weight: var(--ct-weight-bold); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ct-color-text-muted);
}
.ct-shell__mi {
  display: flex; align-items: center; gap: var(--ct-space-3);
  width: 100%; min-height: 48px; padding: 0 var(--ct-space-3);
  border: 0; border-radius: var(--ct-radius-sm); background: none;
  color: var(--ct-color-text); font: inherit; font-weight: var(--ct-weight-semibold); line-height: 1.25;
  text-align: left; text-decoration: none; cursor: pointer;
}
.ct-shell__mi .ct-shell__ico { color: var(--ct-color-text-muted); }
.ct-shell__mi:hover, .ct-shell__mi[aria-current] { background: var(--ct-color-primary-soft); color: var(--ct-color-text); }
.ct-shell__check { margin-left: auto; color: var(--ct-color-primary) !important; }

/* ---------------------------------------------------------------- „hol vagy” sor */
.ct-crumbs {
  width: 100%; max-width: var(--ct-shell-content, 920px); margin: 0 auto;
  padding: var(--ct-space-2) var(--ct-gutter) 0;
  font-family: var(--ct-font-body); font-size: var(--ct-text-sm); color: var(--ct-color-text-muted);
}
.ct-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ct-space-2); }
.ct-crumbs__list li { display: inline-flex; align-items: center; gap: var(--ct-space-2); }
.ct-crumbs__list li + li::before { content: "›"; color: var(--ct-color-text-subtle); }
.ct-crumbs a {
  display: inline-flex; align-items: center; min-height: var(--ct-touch-min);
  color: var(--ct-color-link); font-weight: var(--ct-weight-semibold); text-underline-offset: 0.18em;
}
.ct-crumbs [aria-current="page"] { color: var(--ct-color-text); font-weight: var(--ct-weight-semibold); }

/* ---------------------------------------------------------------- alsó fülsor (telefon) */
.ct-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ct-z-nav);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--ct-color-surface);
  border-top: var(--ct-border-width) solid var(--ct-color-line);
  font-family: var(--ct-font-body);
}
.ct-tabbar__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 0 var(--ct-space-1); }
.ct-tabbar .ct-shell__link {
  min-width: 0; min-height: var(--ct-shell-tab-h); padding: var(--ct-space-1) 2px; border-radius: var(--ct-radius-md);
  background: none;
}
.ct-tabbar .ct-shell__nav-ico {
  width: 56px; height: 30px; padding: 3px 0; border-radius: var(--ct-radius-pill);
  transition: background var(--ct-duration-base) var(--ct-ease-standard);
}
.ct-tabbar .ct-shell__nav-ico svg { width: 24px; height: 24px; }
.ct-tabbar a.ct-shell__link:hover { background: none; }
.ct-tabbar .ct-shell__link[aria-current="page"] { color: var(--ct-color-primary); background: none; }
.ct-tabbar .ct-shell__link[aria-current="page"] .ct-shell__nav-ico { background: var(--ct-color-primary-soft); box-shadow: inset 0 -3px 0 var(--_app); }
.ct-tabbar .ct-shell__badge { top: 4px; }
.ct-tabbar .ct-shell__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767.98px) {
  html.ct-shell-pad body { padding-bottom: calc(var(--ct-shell-tab-h) + env(safe-area-inset-bottom)); }
}
@media (max-width: 479.98px) {
  .ct-shell__exit { padding: 0; }
  .ct-shell__exit-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359.98px) {
  .ct-shell__bar { gap: var(--ct-space-2); }
  .ct-shell__lang-btn { min-width: 38px; }
}

/* ---------------------------------------------------------------- táblagép és asztali */
@media (min-width: 768px) {
  .ct-tabbar { display: none !important; }
  .ct-shell__nav { display: flex; flex: 1 1 auto; justify-content: center; min-width: 0; }
}
@media (min-width: 1100px) {
  .ct-shell__word { display: block; }
  .ct-shell__nav .ct-shell__link {
    flex-direction: row; gap: var(--ct-space-2);
    min-height: var(--ct-touch-min); padding: 0 var(--ct-space-3);
    font-size: var(--ct-text-md);
  }
  .ct-shell__nav .ct-shell__ico { width: 20px; height: 20px; }
  .ct-shell__nav .ct-shell__badge { position: static; border-color: transparent; }
  .ct-shell__nav .ct-shell__soon {
    position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    padding: 1px var(--ct-space-2); border-radius: var(--ct-radius-pill);
    background: var(--ct-color-surface-sunken); color: var(--ct-color-text-muted);
    font-size: var(--ct-text-xs); font-weight: var(--ct-weight-semibold);
  }
}
@media (min-width: 1280px) {
  .ct-shell__who-text { display: block; }
}

/* ---------------------------------------------------------------- megerősítés (kilépés) */
.ct-shell-dialog {
  width: min(100% - 2 * var(--ct-gutter), 460px); max-width: none; padding: var(--ct-space-5);
  border: 0; border-radius: var(--ct-radius-xl);
  background: var(--ct-color-surface); color: var(--ct-color-text); box-shadow: var(--ct-shadow-lg);
  font-family: var(--ct-font-body); font-size: var(--ct-text-md); line-height: var(--ct-leading-body);
}
.ct-shell-dialog::backdrop { background: var(--ct-color-overlay); }
.ct-shell-dialog__title {
  margin: 0 0 var(--ct-space-2); font-family: var(--ct-font-display); font-size: var(--ct-text-2xl);
  font-weight: var(--ct-weight-bold); line-height: var(--ct-leading-tight); letter-spacing: 0;
}
.ct-shell-dialog__body { margin: 0 0 var(--ct-space-5); color: var(--ct-color-text-muted); }
.ct-shell-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ct-space-3); }

/* ---------------------------------------------------------------- hozzáférhetőség */
.ct-shell-skip {
  position: absolute; left: var(--ct-space-3); top: -80px; z-index: var(--ct-z-toast);
  padding: var(--ct-space-2) var(--ct-space-4); border-radius: var(--ct-radius-sm);
  background: var(--ct-color-primary); color: var(--ct-color-on-primary);
  font-family: var(--ct-font-body); font-weight: var(--ct-weight-semibold); text-decoration: none;
}
.ct-shell-skip:focus { top: var(--ct-space-3); color: var(--ct-color-on-primary); }
.ct-shell :focus-visible, .ct-tabbar :focus-visible, .ct-crumbs :focus-visible, .ct-shell-dialog :focus-visible, .ct-shell-skip:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-color-focus); outline-offset: var(--ct-focus-offset); border-radius: var(--ct-radius-sm);
}
.ct-shell__mi:focus-visible, .ct-tabbar .ct-shell__link:focus-visible { outline-offset: calc(-1 * var(--ct-focus-width)); }

@media (prefers-reduced-motion: reduce) {
  .ct-shell__link, .ct-shell__chev, .ct-tabbar .ct-shell__nav-ico { transition: none; }
}
@media (forced-colors: active) {
  .ct-shell__link[aria-current="page"], .ct-shell__lang-btn[aria-pressed="true"], .ct-shell__mi[aria-current] { outline: 2px solid CanvasText; }
}
@media print {
  .ct-shell, .ct-tabbar, .ct-crumbs, .ct-shell-skip, .ct-shell-dialog { display: none !important; }
  html.ct-shell-pad body { padding-bottom: 0; }
}