/* =============================================================
   Etalon Tools CRM — koppintó komponens-réteg (F1)
   A tokenek a /tokens.css-ben. Mobil-first, desktop ≥1024 shell.
   ============================================================= */

html, body { overscroll-behavior: none; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }

.hidden { display: none !important; }
.center { text-align: center; }
.big { font-size: 1.3rem; font-weight: 700; color: var(--text-strong); letter-spacing: -.02em; }
.muted { color: var(--text-muted); font-size: .85rem; }
.label {
  color: var(--text-muted); font-size: var(--fs-11); text-transform: uppercase;
  letter-spacing: .09em; font-weight: 700; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.label .icon { width: 14px; height: 14px; }

/* ---------- APP SHELL ---------- */
.app-shell { min-height: 100dvh; }
.side-rail { display: none; }
.wrap { max-width: 480px; margin: 0 auto; padding: 12px 14px calc(var(--nav-h) + var(--dock-h) + 28px + env(safe-area-inset-bottom)); }

/* ---------- FEJLÉC ---------- */
header.app-header {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 2px 12px; min-height: 50px;
}
.brand-lockup { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-lockup img { height: 28px; width: 28px; }
.brand-copy { line-height: 1.05; white-space: nowrap; }
.brand-copy strong { display: block; color: var(--text-strong); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.brand-copy span { display: block; margin-top: 2px; color: var(--brand-ink); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#user-nev { color: var(--text-muted); font-size: .78rem; text-align: right; }
#user-nev a { color: var(--brand-ink); font-weight: 700; text-decoration: none; font-size: .74rem; }

.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; margin: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  color: var(--text-muted); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset;
  transition: transform .08s ease;
}
.icon-btn:active { transform: scale(.93); }

/* sync-chip: koppintva a függő-lista nyílik */
.sync-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  color: var(--text-muted); font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.sync-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.sync-chip.pending .dot { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); animation: blink 1.2s ease-in-out infinite; }
.sync-chip.offline .dot { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.sync-chip.hiba .dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

/* ---------- KÁRTYA ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-1);
}

/* ---------- GOMBOK ---------- */
button {
  border: 1px solid var(--brand); border-radius: var(--r-md); font-size: 1rem; font-weight: 700;
  color: var(--on-brand); cursor: pointer; padding: 13px; width: 100%; margin-top: 10px;
  background: var(--brand); display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .08s ease, filter .15s ease, opacity .2s; touch-action: manipulation;
  min-height: var(--tap-min);
}
button:active { transform: scale(.97); filter: brightness(1.06); }
button.sec {
  background: var(--surface-subtle); border: 1px solid var(--border); color: var(--text);
}
button.sec:hover { border-color: var(--border-strong); background: var(--surface-hover); }
button.warn { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
button.ok { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); color: var(--success); }
button:disabled { opacity: .45; pointer-events: none; }
button .icon { width: 17px; height: 17px; }

.fkrip {
  position: absolute; border-radius: 50%;
  background: color-mix(in srgb, currentColor 20%, transparent);
  transform: scale(0); animation: fkrip .5s ease-out forwards; pointer-events: none;
}
@keyframes fkrip { to { transform: scale(2.6); opacity: 0; } }
.busy { opacity: .6; pointer-events: none; }
button.busy::after {
  content: ''; display: inline-block; width: 13px; height: 13px; margin-left: 8px;
  vertical-align: -2px; border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor; border-radius: 50%; animation: prg .7s linear infinite;
}
@keyframes prg { to { transform: rotate(360deg); } }

/* ---------- MEZŐK ---------- */
input, select {
  width: 100%; padding: 12px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 1.05rem; margin-top: 8px;
  min-height: var(--control-lg);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent);
}
input[type=date] { cursor: pointer; }
textarea {
  width: 100%; min-height: 110px; padding: 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 1rem; margin-top: 8px; font-family: inherit; resize: vertical;
}

/* ---------- HERO: aktuális tevékenység ---------- */
#hero {
  text-align: center; padding: 20px 16px 16px; position: relative; overflow: hidden;
  border-color: color-mix(in srgb, var(--hero-c, var(--brand)) 32%, var(--border));
  background:
    radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--hero-c, var(--brand)) 16%, transparent), transparent 62%),
    var(--surface);
}
#hero .ring {
  width: 78px; height: 78px; margin: 0 auto 10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--hero-c, var(--brand));
  background: color-mix(in srgb, var(--hero-c, var(--brand)) 14%, var(--surface));
  border: 2px solid var(--hero-c, var(--brand)); position: relative; z-index: 1;
  animation: pulse 2.4s ease-in-out infinite;
}
#hero .ring .icon { width: 34px; height: 34px; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hero-c, var(--brand)) 22%, transparent); }
  50% { box-shadow: 0 0 0 12px transparent; }
}
#hero .nev { font-size: 1.3rem; font-weight: 700; color: var(--text-strong); letter-spacing: -.02em; position: relative; z-index: 1; }
#hero .cel { color: var(--text-muted); margin-top: 3px; font-size: .95rem; position: relative; z-index: 1; }
#hero .timer {
  font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 6px;
  color: var(--hero-c, var(--brand-ink)); position: relative; z-index: 1; letter-spacing: -.02em;
}
#hero button { position: relative; z-index: 1; }

/* ---------- STAT-CSEMPÉK ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 4px; text-align: center; }
.stat .v { font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--text-strong); display: flex; align-items: center; justify-content: center; gap: 5px; }
.stat .v .icon { width: 14px; height: 14px; color: var(--text-muted); }
.stat .k { color: var(--text-muted); font-size: .68rem; margin-top: 2px; }

/* ---------- VÁLTÓ (dock mobilon, kártya desktopon) ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.tile {
  margin-top: 0; padding: 14px 10px; font-size: .92rem; background: var(--surface-subtle);
  border: 1px solid var(--border); color: var(--text-muted); font-weight: 600;
  display: flex; flex-direction: column; gap: 6px; align-items: center; border-radius: var(--r-md);
}
.tile .icon { width: 22px; height: 22px; }
.tile:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); }
.tile.now {
  color: var(--tile-c, var(--brand-ink));
  border-color: var(--tile-c, var(--brand));
  background: color-mix(in srgb, var(--tile-c, var(--brand)) 14%, var(--surface));
  opacity: 1; pointer-events: none;
}
.tile.vez { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.tile.vez:hover { background: var(--brand-hover); }
.grid.busy { opacity: .45; pointer-events: none; }
.tile small.dock-timer { font-size: .62rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: -3px; }

/* ---------- IDŐVONAL ---------- */
.tl { position: relative; padding-left: 4px; }
.tev { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .88rem; align-items: center; }
.tev:last-child { border-bottom: 0; }
.tev .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tev .ido { color: var(--text-muted); font-size: .76rem; white-space: nowrap; width: 84px; font-variant-numeric: tabular-nums; }
.tev .tart { color: var(--text-muted); font-size: .76rem; white-space: nowrap; }
.tev .tev-ic { width: 15px; height: 15px; vertical-align: -3px; color: var(--text-muted); display: inline-block; }
.badge {
  font-size: .68rem; padding: 3px 8px; border-radius: var(--r-pill); font-weight: 700;
  background: var(--surface-subtle); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap;
}
.badge.aktiv { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); color: var(--brand-ink); animation: blink 2s ease-in-out infinite; }
.badge.fuggo { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); color: var(--warning); }
/* F23at: közös badge-tónusok (eddig oldalanként duplikálva — UI-KÁNON 6.) */
.badge.b-ok { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); color: var(--success); }
.badge.b-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
@keyframes blink { 50% { opacity: .55; } }

/* ---------- F23/K1: címke-chip (token-paletta) + projekt-jelvény + haladás-sáv ---------- */
.cimke-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--cimke-szurke-bg); color: var(--cimke-szurke-ink); border: 1px solid transparent;
}
.cimke-chip .pont { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.cimke-chip.cimke-brand { background: var(--cimke-brand-bg); color: var(--cimke-brand-ink); }
.cimke-chip.cimke-kek { background: var(--cimke-kek-bg); color: var(--cimke-kek-ink); }
.cimke-chip.cimke-zold { background: var(--cimke-zold-bg); color: var(--cimke-zold-ink); }
.cimke-chip.cimke-sarga { background: var(--cimke-sarga-bg); color: var(--cimke-sarga-ink); }
.cimke-chip.cimke-narancs { background: var(--cimke-narancs-bg); color: var(--cimke-narancs-ink); }
.cimke-chip.cimke-piros { background: var(--cimke-piros-bg); color: var(--cimke-piros-ink); }
.cimke-chip.cimke-lila { background: var(--cimke-lila-bg); color: var(--cimke-lila-ink); }
.cimke-chip.cimke-szurke { background: var(--cimke-szurke-bg); color: var(--cimke-szurke-ink); }
.cimke-chip.cimke-indigo { background: var(--cimke-indigo-bg); color: var(--cimke-indigo-ink); }
.cimke-chip.cimke-turkiz { background: var(--cimke-turkiz-bg); color: var(--cimke-turkiz-ink); }
.cimke-chip.cimke-rozsaszin { background: var(--cimke-rozsaszin-bg); color: var(--cimke-rozsaszin-ink); }
.cimke-chip.cimke-barna { background: var(--cimke-barna-bg); color: var(--cimke-barna-ink); }
/* választható chip (szűrősor + űrlap): halványabb, kattintható, aktív állapotban keretes */
.cimke-val { cursor: pointer; opacity: .82; border: 1px solid transparent; }
.cimke-val:hover { opacity: 1; }
.cimke-val.on { opacity: 1; border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; }
.cimke-sor { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.cimke-sor::-webkit-scrollbar { height: 4px; }
.cimke-sor .semleges { background: var(--surface-subtle); color: var(--text-muted); }
.projekt-blokk .p-kartya { display: block; width: 100%; text-align: left; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 6px; cursor: pointer; }
.projekt-blokk .p-kartya:hover { background: var(--surface-hover); border-color: var(--brand); }
.projekt-blokk .p-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; }
.projekt-blokk .p-meta { font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
.halado { height: 6px; border-radius: var(--r-pill); background: var(--surface-subtle); overflow: hidden; margin-top: 7px; }
.halado > i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width .3s; }
.projekt-jel { font-size: .7rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; }
/* F23at: tel: link a teendő-soron (az iroda.html-ből beolvasztva) */
.tel-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border));
  color: var(--success); font-weight: 700; font-size: .76rem; text-decoration: none; white-space: nowrap;
}
.tel-link .icon { width: 12px; height: 12px; }
/* F23at: Kiosztottam-kártya sorai (az iroda.html-ből beolvasztva) */
.ki-sor { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px solid var(--border); cursor: pointer; }
.ki-sor:last-child { border-bottom: 0; }
.ki-sor .kt { flex: 1; min-width: 0; }
.ki-sor .kt .fel { font-weight: 700; color: var(--text-strong); font-size: .82rem; }
.ki-sor .kt .sz2 { font-size: .84rem; color: var(--text); margin-top: 1px; }
.ki-sor .kt .meta2 { font-size: .74rem; color: var(--text-muted); margin-top: 2px; }
.ki-sor .badge { flex-shrink: 0; }
.projekt-blokk .p-uj { display: inline-flex; align-items: center; gap: 5px; width: auto; background: none; border: 1px dashed var(--border-strong); color: var(--text-muted); border-radius: var(--r-sm); padding: 7px 12px; margin-top: 8px; font-size: .82rem; cursor: pointer; }
.projekt-blokk .p-uj:hover { border-color: var(--brand); color: var(--brand); }

.list-item { padding: 13px 10px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: var(--r-xs); }
.list-item:active { background: var(--surface-hover); }
.list-item:last-child { border-bottom: 0; }
.list-item .varos { color: var(--text-muted); font-size: .82rem; margin-top: 2px; }

/* ---------- SHEET (alsó modal / desktop oldal-panel) ----------
   Z-INDEX SZABÁLY (regressziós tanulság): a modál + fátyla MINDEN lap-elem
   (sticky fejlécek: #karton-fej 26, #nezett-sav 30, .side-rail 40) FÖLÖTT áll,
   de a toast (50), a Ctrl+K palette (120) és az etConfirm (200) alatt. */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface-raised);
  border-radius: var(--r-xl) var(--r-xl) 0 0; border: 1px solid var(--border); border-bottom: 0;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
  max-width: 480px; margin: 0 auto; box-shadow: var(--shadow-2);
  animation: up .22s ease; max-height: 84vh; overflow-y: auto;
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
#overlay { position: fixed; inset: 0; background: rgba(10, 12, 16, .5); backdrop-filter: blur(2px); z-index: 44; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
/* nagy listás sheetek mobilon: több hely (desktopon a 80vh fix-keret érvényes) */
@media (max-width: 1023px) { #idovonal-card, #lezartak-card { max-height: 92vh; } }

/* ---------- LEZÁRT NAP ---------- */
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; text-align: center; }
.summary .box { background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 6px; }
.summary .box .v { font-size: 1.25rem; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.summary .box .k { color: var(--text-muted); font-size: .72rem; margin-top: 3px; }

/* ---------- ALSÓ TAB-SÁV (mobil) ---------- */
#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  background: var(--sidebar); border-top: 1px solid var(--sidebar-border); display: flex;
  max-width: 480px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom);
  min-height: var(--nav-h);
}
#tabbar button {
  flex: 1; background: none; border: 0; border-radius: 0; margin: 0; padding: 8px 2px 9px;
  color: var(--sidebar-muted); font-size: .66rem; font-weight: 700; display: flex; flex-direction: column;
  gap: 3px; align-items: center; justify-content: center; position: relative; min-height: 54px;
}
#tabbar button .icon { width: 20px; height: 20px; }
#tabbar button.on { color: var(--sidebar-text); }
#tabbar button.on::before {
  content: ''; position: absolute; top: 0; width: 26px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--brand);
}
#tabbar .pont {
  position: absolute; top: 4px; left: calc(50% + 6px); background: var(--brand); color: var(--on-brand);
  font-size: .62rem; border-radius: var(--r-pill); padding: 1px 5px; font-weight: 800;
}

/* ---------- MOST-SÁV (aktív tevékenység más füleken) ---------- */
#most-bar {
  position: fixed; z-index: 9; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  width: 100%; max-width: 480px; display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border); font-size: .82rem; font-weight: 600; color: var(--text);
}
#most-bar .icon { width: 16px; height: 16px; color: var(--most-c, var(--brand-ink)); }
#most-bar .mb-timer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--most-c, var(--brand-ink)); }

/* ---------- TEENDŐ / TERV / CÉG LISTÁK ---------- */
.todo { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.todo:last-child { border-bottom: 0; }
.todo .cb {
  width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--border-strong); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 1px;
  color: transparent; background: var(--surface);
}
.todo.kesz .cb { background: var(--success); border-color: var(--success); color: #fff; }
.todo.kesz .sz { text-decoration: line-through; color: var(--text-muted); }
.todo .hat { font-size: .75rem; color: var(--text-muted); }
.todo .hat.lejart { color: var(--danger); font-weight: 700; }
.todo .cegn { font-size: .78rem; color: var(--brand-ink); font-weight: 600; }
.tier-badge { font-size: .65rem; font-weight: 800; padding: 2px 7px; border-radius: var(--r-xs); background: var(--surface-subtle); border: 1px solid var(--border); color: var(--text-muted); }
.tier-badge.A { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); color: var(--brand-ink); }
.tier-badge.B { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 40%, var(--border)); color: var(--info); }
/* F22: időpontos terv-tétel óra-jelvénye (mobil lista + asztali plan-grid + Ma-nézet + vezetői) */
.time-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; margin-right: 2px;
  border-radius: var(--r-pill); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
  color: var(--brand-ink); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.time-badge .icon { width: 11px; height: 11px; }
.todo.kesz .time-badge, .plan-company.kesz .time-badge { opacity: .55; }
/* F22: részleges szabadság — sheet-szegmensek + mettől-sor + idővonal-sor + jelvény */
.szab-tipus-sor { margin: 4px 0 2px; }
.szab-tipus-sor button { font-size: .78rem; padding: 9px 4px; flex: 1; min-width: 0; }
.szab-mettol-sor { display: flex; gap: 8px; align-items: center; margin: 6px 0 2px; }
.szab-mettol-sor input { flex: 1; margin-top: 0; padding: 9px; font-size: .9rem; }
.tev.szab-sor .tev-ic { color: var(--vacation); }
.szab-jelveny { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--vacation-soft); border: 1px solid color-mix(in srgb, var(--vacation) 40%, var(--border));
  color: var(--vacation); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.szab-jelveny .icon { width: 12px; height: 12px; }
.hetnav { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.hetnav button { width: auto; margin: 0; padding: 10px 16px; }
.hetnav .cim { flex: 1; text-align: center; font-weight: 700; color: var(--text-strong); }
.mic { width: auto !important; padding: 12px 18px !important; }
.mic.aktiv { background: var(--danger-soft) !important; border-color: var(--danger) !important; color: var(--danger) !important; animation: blink 1.2s ease-in-out infinite; }
/* B3: elo hangszint-csik a diktalas alatt — latszik, hogy tenyleg erkezik-e hang */
.mic-szint {
  display: inline-block; width: 42px; height: 6px; margin-right: 6px; vertical-align: middle;
  border-radius: var(--r-pill); background: var(--border); overflow: hidden;
}
.mic-szint > i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .08s linear; }
.mic-szint.nema > i { background: var(--danger); }
.mic-valaszto { display: block; margin-top: 4px; max-width: 100%; font-size: .78rem; }
.tipus-valto { display: flex; gap: 8px; margin-top: 6px; }
.tipus-valto button { margin: 0; padding: 10px; font-size: .9rem; background: var(--surface-subtle); border: 1px solid var(--border); color: var(--text-muted); }
.tipus-valto button.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.gyors-datum { display: flex; gap: 8px; flex-wrap: wrap; }
.gyors-datum button { width: auto; flex: 1; margin-top: 6px; padding: 9px; font-size: .82rem; background: var(--surface-subtle); border: 1px solid var(--border); color: var(--text-muted); }
.gyors-datum button.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.progress { height: 8px; background: var(--surface-inset); border-radius: var(--r-pill); overflow: hidden; margin-top: 8px; }
.progress div { height: 100%; background: linear-gradient(90deg, var(--brand), #ff9a41); border-radius: var(--r-pill); transition: width .6s ease; }
#game-card { padding: 12px 16px; }
#game-card .sor { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; }
#game-card .streak { font-weight: 700; color: var(--brand-ink); }
.adatlap-sor { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.adatlap-sor:last-child { border-bottom: 0; }
.adatlap-sor .k { color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.adatlap-sor a { color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.jegyzet-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.jegyzet-item .meta { color: var(--text-muted); font-size: .74rem; margin-bottom: 3px; }

/* koppintható chip */
.tap {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface-subtle); border: 1px solid var(--border); color: var(--text);
  font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: transform .08s ease, background .15s; user-select: none;
}
.tap .icon { width: 13px; height: 13px; }
.tap:active { transform: scale(.92); background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.badge[onclick] { transition: transform .08s ease; cursor: pointer; }
.badge[onclick]:active { transform: scale(.9); }

#toast {
  position: fixed; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); background: var(--sidebar-raised); color: var(--sidebar-text);
  border: 1px solid var(--sidebar-border);
  padding: 13px 20px; border-radius: var(--r-md); max-width: 90%; opacity: 0; transition: opacity .3s;
  pointer-events: none; z-index: 50; font-weight: 600; box-shadow: var(--shadow-2); font-size: .9rem;
}
#toast.show { opacity: 1; }
#toast.jo { border-color: color-mix(in srgb, var(--success) 55%, var(--sidebar-border)); }

#offline-sav {
  background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
  color: var(--warning); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 12px;
  font-size: .85rem; font-weight: 600; text-align: center; cursor: pointer;
}

#asztali-sav {
  background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
  color: var(--warning); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 12px;
  font-size: .85rem; font-weight: 600; text-align: left;
  display: flex; align-items: center; gap: 10px;
}
#asztali-sav.hidden { display: none; }

/* R7: ceg-allapot jelvenyek (szuz / alvo savok) — kis pill a tier-badge mellett */
.allapot-badge {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: .66rem; font-weight: 700; vertical-align: 1px; white-space: nowrap;
}
.allapot-badge.szuz { background: color-mix(in srgb, var(--vacation) 16%, transparent); color: var(--vacation); }
.allapot-badge.alvo1 { background: var(--warning-soft); color: var(--warning); }
.allapot-badge.alvo2 { background: color-mix(in srgb, var(--warning) 28%, transparent); color: var(--warning); }
.allapot-badge.alvo3 { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
#asztali-sav .asztali-sav-x {
  margin-left: auto; flex: 0 0 auto; min-height: 0; width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer;
}

.m-only { display: none; }

/* ---------- IDŐVONAL NAP-LAPOZÓ nyilak: látható ‹ › pár, 44px célfelület ---------- */
button.naplo-nyil {
  width: var(--tap-min); height: var(--tap-min); min-height: var(--tap-min);
  flex: 0 0 auto; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-subtle); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-sm); font-weight: 600;
}
button.naplo-nyil .icon { width: 18px; height: 18px; }
button.naplo-nyil:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-hover); }
button.naplo-nyil:disabled { opacity: .35; pointer-events: none; }

/* ---------- KOPPINTÓ FEJLÉC-KERET + FÜL-SOR (final-gpt page-topbar + module-tabs) — CSAK desktop ---------- */
#konzol-fej, #konzol-tabs { display: none; }
@media (min-width: 1024px) {
  /* fejléc-keret: eyebrow + cím + dátum (a jobb oldali akciókat az app-header viszi ugyanabban a sorban) */
  #konzol-fej { display: block; grid-column: 1; min-width: 0; margin: 0 0 6px; }
  #konzol-fej .eyebrow {
    display: flex; align-items: center; gap: 7px; margin: 0 0 3px;
    color: var(--brand-ink); font-size: var(--fs-11); font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
  }
  #konzol-fej .eyebrow .icon { width: 13px; height: 13px; }
  #konzol-fej h1 {
    margin: 0; font-size: clamp(22px, 1.6vw, 30px); font-weight: 700;
    color: var(--text-strong); letter-spacing: -.025em; line-height: 1.12;
  }
  #konzol-fej .konzol-datum { margin: 5px 0 0; color: var(--text-muted); font-size: var(--fs-13); }

  /* teljes soros fül-sor a fejléc-keret alatt (GPT module-tabs) */
  #konzol-tabs {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 2px;
    margin: 0 0 var(--sp-4); padding: 3px; overflow-x: auto;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-subtle);
  }
  #konzol-tabs .tab {
    display: inline-flex; align-items: center; gap: 7px; width: auto; margin: 0;
    padding: 7px 15px; min-height: 36px; border: 0; border-radius: 6px;
    background: transparent; color: var(--text-muted);
    font-size: var(--fs-13); font-weight: 600; white-space: nowrap;
  }
  #konzol-tabs .tab:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 65%, transparent); }
  #konzol-tabs .tab[aria-selected="true"] { color: var(--text-strong); background: var(--surface); box-shadow: 0 1px 2px rgba(20, 22, 18, .1); }
  #konzol-tabs .tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); flex: 0 0 auto; }
  #konzol-tabs .tab[aria-selected="true"] .tab-dot { background: var(--brand); }
  #konzol-tabs .pont {
    background: var(--brand); color: var(--on-brand); font-size: .62rem;
    border-radius: var(--r-pill); padding: 1px 6px; font-weight: 800;
  }
}

/* ---------- SWR "frissítés…" pötty: cache-ből már látszik az adat, a friss úton van ---------- */
.swr-pont {
  width: 9px; height: 9px; flex: 0 0 auto; align-self: center; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
  animation: swrPulz 1.3s ease-in-out infinite;
}
@keyframes swrPulz { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .swr-pont { animation: none; opacity: .7; } }

/* ---------- SKELETON: közös töltés-jelzés (tokens-alap, reduced-motion-barát) ---------- */
.skeleton {
  display: inline-block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-inset) 25%, var(--surface-subtle) 50%, var(--surface-inset) 75%);
  background-size: 200% 100%; animation: skel 1.1s linear infinite;
}
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background: var(--surface-inset); } }

/* ---------- DESKTOP (egér): ripple KI, helyette rövid benyomódás ---------- */
@media (pointer: fine) {
  .fkrip { display: none !important; }
  button:active:not(:disabled) { transform: scale(.98); filter: brightness(.96); transition: transform .1s ease, filter .1s ease; }
  .tap:active, .list-item:active, .todo .cb:active { transform: scale(.98); transition: transform .1s ease; }
  .list-item:active { filter: brightness(.97); }
}

/* ---------- KÉPVISELŐ-VÁLTÓ (koppintó fejléc — CSAK desktop) + csak-olvasás sáv ---------- */
#rep-valto { display: none; }
@media (min-width: 1024px) {
  #rep-valto:not(.hidden) {
    display: block; width: auto; min-width: 215px; margin: 0; padding: 8px 11px;
    min-height: 38px; font-size: .85rem; border-radius: var(--r-sm);
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
  }
  #rep-valto.aktiv { border-color: var(--info); background: var(--info-soft); color: var(--info); font-weight: 700; }
  #nezett-sav { grid-column: 1 / -1; }
  #nezett-stats { grid-column: 2; }
}
#nezett-sav {
  position: sticky; top: 8px; z-index: 30; display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 45%, var(--border));
  color: var(--info); font-size: .85rem; font-weight: 700; box-shadow: var(--shadow-1);
}
#nezett-sav .icon { width: 16px; height: 16px; flex: 0 0 auto; }
#nezett-sav button {
  width: auto; margin: 0 0 0 auto; padding: 6px 12px; min-height: 32px; font-size: .78rem;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--info) 45%, var(--border)); color: var(--info);
}
body.nezett-mod .nezett-hide { display: none !important; }

/* ---------- MOBIL: fix váltó-DOCK a Ma fülön ---------- */
@media (max-width: 779px) {
  #valaszto-card .d-only { display: none; }
  #valaszto-card .m-only { display: inline; }
  #valaszto-card {
    position: fixed; z-index: 12; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
    width: 100%; max-width: 480px; margin: 0; padding: 8px 10px;
    display: flex; gap: 6px; align-items: stretch;
    border-radius: 0; border: 0; border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px);
    box-shadow: 0 -10px 34px rgba(21, 23, 19, .08);
  }
  #valaszto-card .label { display: none; }
  #tev-grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 0; }
  .tile { min-height: 58px; padding: 5px 2px; gap: 3px; font-size: .6rem; font-weight: 700; border-radius: var(--r-md); justify-content: center; }
  .tile .icon { width: 19px; height: 19px; }
  #valaszto-card > button.warn {
    width: 58px; flex: 0 0 58px; margin: 0; padding: 5px 2px; font-size: .6rem; font-weight: 700;
    display: flex; flex-direction: column; gap: 3px; justify-content: center; border-radius: var(--r-md);
  }
  #valaszto-card > button.warn .icon { width: 19px; height: 19px; }
  /* P1-4 (mobil-audit): a toast a DOCK + MOST-sáv FÖLÉ kerül — nem takarja a váltó-csempéket */
  #toast { bottom: calc(var(--nav-h) + var(--dock-h) + 14px + env(safe-area-inset-bottom)); }
}

/* ---------- P0-3 (mobil-audit): FIX-KERET a mobil sheeteken is ----------
   A torzsos sheet gombsora MINDIG a viewportban — a törzs görget (a desktop F10-B minta
   átemelése). :has()-szal, wrapper NÉLKÜL — a dialógus-őr :scope > button szelektora és a
   DOM-szerkezet érintetlen. Torzs nélküli (kicsi) sheetek változatlanok. */
@media (max-width: 1023px) {
  .sheet:has(.sheet-torzs) { display: flex; flex-direction: column; overflow-y: hidden; }
  .sheet:has(.sheet-torzs) > * { flex: 0 0 auto; }
  .sheet:has(.sheet-torzs) .sheet-torzs { overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
}

/* ---------- P2-7 (mobil-audit, szűkített): 44px-es fejléc-célok mobil-sávban ----------
   PADDING-BELÜL hizlalás + negatív margó — a fejléc-konténer magassága NEM nő
   (a fő session DPI-figyelmeztetése). Desktopon változatlan. */
@media (max-width: 1023px) {
  header.app-header .icon-btn { width: 44px; height: 44px; }
  #user-nev .tap { padding: 14px 15px !important; margin: -10px -3px; }
}

/* ---------- C-kör (mobil-audit, Egon-lelet): EGYSOROS mobil-fejléc + avatar-menü ----------
   Mobilon a név + bug/fiók ikonok + témaváltó az AVATAR-MENÜBE költöznek — a fejléc:
   [logó + név] …… [sync-pötty] [avatar]. Desktopon minden marad a régiben. */
#avatar-gomb {
  background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  color: var(--brand-ink); font-size: .82rem; font-weight: 800; letter-spacing: .02em;
}
#profil-gombok button { margin-top: 8px; }
@media (max-width: 1023px) {
  #user-nev, #tema-gomb { display: none; }
  header.app-header { min-height: 0; padding: 6px 2px 10px; }
}
@media (min-width: 1024px) {
  #avatar-gomb { display: none; }
}

/* ---------- D-kör (mobil-audit, Egon-lelet): Teendők mobil-ergonómia ----------
   1) sor-akciók: az 5 apró ikon desktopon marad, mobilon EGY ⋯ (akció-sheet) —
      a szöveg-oszlop visszakapja a teljes szélességet (a "szavanként törő" km-teendő fix)
   2) kártyák szélig (edge-to-edge): a rácsos háttér-csík eltűnik kétoldalt */
@media (max-width: 1023px) {
  .teendo-akciok-d { display: none !important; }
}
@media (min-width: 1024px) {
  .teendo-akciok-m { display: none !important; }
}
@media (max-width: 779px) {
  .wrap .card {
    margin-left: -14px; margin-right: -14px;
    border-radius: 0; border-left: 0; border-right: 0;
  }
  /* a fix dock (maga is .card) és a sheetek NEM érintettek */
  #valaszto-card { margin: 0; }
}

/* ---------- P1-6 + P1-7 (mobil-audit): tipus-valto mobil-ergonómia ---------- */
@media (max-width: 1023px) {
  /* fül-feliratok nem törhetnek szó közben ("Látogat ás") — nowrap + enyhén kisebb betű */
  .tipus-valto button { white-space: nowrap; overflow: hidden; font-size: .84rem; padding: 10px 6px; min-width: 0; }
  /* teendő-szűrők: teljes-széles gomb-oszlop helyett vízszintes, görgethető pill-sor */
  #teendo-szurok { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; }
  #teendo-szurok button { width: auto; flex: 0 0 auto; margin: 0; padding: 8px 13px; min-height: 38px; border-radius: var(--r-pill); font-size: .8rem; }
}

@media (min-width: 780px) {
  .wrap { padding-bottom: calc(var(--nav-h) + 40px); }
  #most-bar { border: 1px solid var(--border); border-radius: var(--r-md); bottom: calc(var(--nav-h) + 10px + env(safe-area-inset-bottom)); width: auto; min-width: 300px; box-shadow: var(--shadow-1); }
}

/* ---------- ASZTALI NÉZET (≥1024): oldalsáv-shell + GPT terepnapló-elrendezés (F9) ---------- */
@media (min-width: 1024px) {
  .app-shell { display: grid; grid-template-columns: var(--rail-wide) minmax(0, 1fr); }
  .side-rail {
    position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column;
    height: 100vh; height: 100dvh; padding: var(--sp-4) var(--sp-3); overflow: hidden;
    background: var(--sidebar); color: var(--sidebar-text); border-right: 1px solid var(--sidebar-border);
  }
  .side-rail .brand-lockup { min-height: 44px; padding: 4px 6px 14px; }
  .side-rail .brand-lockup img { width: 36px; height: 36px; }
  .side-rail .brand-copy strong { color: var(--sidebar-text); font-size: 15px; }
  .side-rail .brand-copy span { color: var(--sidebar-muted); font-size: 10px; }
  .snav { display: grid; gap: 3px; margin-top: var(--sp-2); }
  .snav button {
    position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 11px;
    min-height: 40px; margin: 0; padding: 0 10px; border: 1px solid transparent;
    border-radius: var(--r-sm); background: transparent; color: var(--sidebar-muted);
    font-size: var(--fs-13); font-weight: 500; width: 100%;
  }
  .snav button:hover { color: var(--sidebar-text); background: var(--sidebar-raised); }
  .snav button.on { color: var(--sidebar-text); background: var(--sidebar-active); border-color: var(--sidebar-border); }
  .snav button.on::before { content: ''; position: absolute; left: -13px; width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--brand); }
  .snav button .pont { margin-left: auto; background: var(--brand); color: var(--on-brand); font-size: .62rem; border-radius: var(--r-pill); padding: 1px 6px; font-weight: 800; }
  .snav .sn-sep { height: 1px; margin: 10px 6px; background: var(--sidebar-border); }
  .snav a {
    display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px;
    border-radius: var(--r-sm); color: var(--sidebar-muted); text-decoration: none;
    font-size: var(--fs-13); font-weight: 500;
  }
  .snav a:hover { color: var(--sidebar-text); background: var(--sidebar-raised); }
  .side-meta { margin-top: auto; padding: var(--sp-3) 9px 2px; color: var(--sidebar-muted); font-size: var(--fs-11); }
  .side-meta strong { display: block; margin-bottom: 3px; color: var(--sidebar-text); font-size: var(--fs-12); font-weight: 600; }

  #tabbar { display: none; }
  #most-bar { left: auto; right: 20px; transform: none; bottom: 20px; }
  /* KÖZÖS KERET: teljes szélesség a közös plafonig, felette középre zárva (GPT page-frame) */
  .wrap {
    max-width: var(--content-max); width: 100%; margin: 0 auto;
    display: grid; grid-template-columns: minmax(360px, .82fr) minmax(480px, 1.18fr); gap: 0 var(--sp-5);
    /* F23bj (Egon-hiba): dense — a bal hasáb kártyái (pl. a lezárt-nap összesítő, ami a DOM-ban
       az idővonal UTÁN áll) a hosszú jobb-oszlopos idővonal MELLÉ töltődnek fel, nem alá */
    grid-auto-flow: row dense;
    align-items: start; padding: var(--sp-5) var(--sp-6) 60px;
  }
  header.app-header { grid-column: 2; align-self: end; }
  /* a brandet a bal oldalsav viszi — a fejlecben nem duplikaljuk */
  header.app-header .brand-lockup { display: none; }
  header.app-header { justify-content: flex-end; }
  /* kijelentkezett allapot: rejtett oldalsav → a racs egy hasabra esik ossze */
  .app-shell:has(> .side-rail.hidden) { grid-template-columns: minmax(0, 1fr); }
  .wrap:has(> #konzol-fej.hidden) { display: block; max-width: 560px; }
  #offline-sav { grid-column: 1 / -1; }
  /* Ma-fül GPT-ritmusa: bal státusz-konzol, jobb SZÉLES idővonal-oszlop */
  #v-login, #v-nyit, #v-nap, #v-kesz, #v-cim { grid-column: 1; }
  #ma-terv-card, #regi-nap-card, #hianyzo-card, #idovonal-kartya { grid-column: 2; }
  /* Teendők-fül: széles lista balra, felvivő + nemrég elvégzett jobbra */
  #v-teendok { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 0 var(--sp-5); align-items: start; }
  #v-teendok > .card:first-child { grid-column: 1; grid-row: span 4; }
  #v-teendok > .card:not(:first-child) { grid-column: 2; }
  /* Heti terv-fül: teljes szélesség (hétfő→péntek rács alatta) */
  #v-terv { grid-column: 1 / -1; display: block; }
  /* Cégek-fül: master-detail — lista + fix jobb oldali gyors-panel (GPT split-view) */
  #v-cegek { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); gap: 0 var(--sp-3); align-items: start; }
  #v-cegek > .card { grid-column: 1; margin-bottom: 0; }
  #v-cegek > #ceg-elonezet {
    grid-column: 2; position: sticky; top: var(--sp-4);
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  }
  /* F10-B P1-2: desktopon SEMMI nem nyílik jobb-fiókban — MINDEN sheet közép-modál.
     Stabil keret (H4): fix szélesség, felső él rögzítve (tartalom-váltásra nem ugrál),
     a törzs (.sheet-torzs) görget, a fejléc + gombsor mindig látható. Mobil alsó-sheet változatlan. */
  .sheet {
    left: 50%; right: auto; top: 9vh; bottom: auto; transform: translateX(-50%);
    width: min(680px, 92vw); max-width: none; height: auto; max-height: 80vh; margin: 0;
    border: 1px solid var(--border-strong); border-radius: var(--r-lg);
    display: flex; flex-direction: column; overflow-y: auto;
    animation: kozepPop .18s ease;
  }
  @keyframes kozepPop { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } }
  .sheet > .label { flex: 0 0 auto; }
  .sheet .sheet-torzs { overflow-y: auto; min-height: 0; flex: 0 1 auto; }
  /* fix-keret: a gombsor SOSEM zsugorodik / csúszik ki — mindig a törzs görget */
  .sheet > button, .sheet > input, .sheet > .tipus-valto, .sheet > .muted, .sheet > div:not(.sheet-torzs) { flex: 0 0 auto; }
  /* kis modál az 1-2 mezős űrlapokhoz (leltár: "kis közép-modál") */
  .sheet.sheet-kicsi { width: min(460px, 92vw); }
  /* kereső/böngésző-modál: FIX magasság — a találat-lista váltása nem méretezi át a keretet */
  .sheet.sheet-fix { height: min(80vh, 780px); }
}

/* ---------- CÉGEK GYORS-PANEL (csak desktop — mobilon a lista-koppintás kartont nyit) ---------- */
#ceg-elonezet { overflow: hidden; }
#ceg-elonezet .elonezet-hero {
  margin: -16px -16px 10px; padding: var(--sp-4); border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--surface) 55%, var(--brand-soft));
}
#ceg-elonezet .elonezet-hero h2 { margin: 0; color: var(--text-strong); font-size: var(--fs-18); font-weight: 700; letter-spacing: -.015em; }
#ceg-elonezet .elonezet-hero p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-12); }
#ceg-elonezet .mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: 10px; }
#ceg-elonezet .mini-metric { padding: 9px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-subtle); min-width: 0; }
#ceg-elonezet .mini-metric span { display: block; color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; }
#ceg-elonezet .mini-metric strong { display: block; margin-top: 4px; overflow: hidden; color: var(--text-strong); font-size: var(--fs-13); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
#ceg-elonezet .elonezet-jegyzet { padding-left: 12px; border-left: 2px solid var(--brand); color: var(--text-muted); font-size: var(--fs-12); margin-top: 6px; }
@media (max-width: 1023px) { #ceg-elonezet { display: none !important; } }
.list-item.kijelolt { background: var(--surface-selected); box-shadow: inset 3px 0 0 var(--brand); }

/* ---------- HETI TERV — hétfő→péntek rács (GPT plan-grid, csak desktop) ---------- */
@media (min-width: 1024px) {
  .plan-grid-wrap { overflow-x: auto; padding-bottom: 4px; }
  .plan-grid { display: grid; grid-template-columns: repeat(5, minmax(188px, 1fr)); gap: var(--sp-2); min-width: 980px; }
  .plan-day { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
  .plan-day.today { border-color: var(--brand); box-shadow: inset 0 3px var(--brand); }
  .plan-day-head { padding: 12px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
  .plan-day-head strong { display: block; color: var(--text-strong); }
  .plan-day-head span { color: var(--text-muted); font-size: var(--fs-11); }
  .plan-day-head .progress { height: 6px; margin-top: 8px; }
  .plan-list { display: grid; gap: 6px; padding: 9px; align-content: start; }
  .plan-company {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px;
    min-height: 48px; padding: 8px 9px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); text-align: left; cursor: pointer;
  }
  .plan-company:hover { border-color: var(--border-strong); background: var(--surface-hover); }
  .plan-company.kesz { border-color: color-mix(in srgb, var(--success) 30%, var(--border)); background: var(--success-soft); }
  .plan-company strong { display: block; overflow: hidden; color: var(--text-strong); font-size: var(--fs-12); text-overflow: ellipsis; white-space: nowrap; }
  .plan-company span.pc-varos { display: block; margin-top: 2px; overflow: hidden; color: var(--text-muted); font-size: var(--fs-11); text-overflow: ellipsis; white-space: nowrap; }
  .plan-company .tap { padding: 4px 7px; }
  .plan-vacation { margin: 9px; padding: 12px; border-radius: var(--r-sm); color: var(--vacation); background: var(--vacation-soft); font-size: var(--fs-12); text-align: center; }
  /* R2: tervezett home office sáv — türkiz (a --c-home token) */
  .plan-ho { margin: 9px; padding: 12px; border-radius: var(--r-sm); color: var(--c-home); background: color-mix(in srgb, var(--c-home) 14%, transparent); font-size: var(--fs-12); text-align: center; }
  .plan-osszegzo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--text-muted); font-size: var(--fs-12); }
  .plan-osszegzo .progress { flex: 1; height: 6px; margin-top: 0; }
}

/* ---------- F10-B P2-2: extrém tartalom tördelés-védelme (3301px-es sor fix) ---------- */
.jegyzet-item, .todo, .adatlap-sor, .list-item, .tev, .plan-company,
#ceg-elonezet, #karton-adat, #karton-fej, .sheet, .elonezet-jegyzet { overflow-wrap: anywhere; }

/* ---------- F10-B P2-4 + P3-6: toast undo-gombbal (a pénzügy-minta átvétele) ---------- */
#toast #toast-undo {
  pointer-events: auto; width: auto; margin: 0 0 0 12px; padding: 5px 12px; min-height: 0;
  font-size: .8rem; font-weight: 700; background: transparent; color: var(--brand);
  border: 1px solid var(--sidebar-border); border-radius: var(--r-sm); display: inline-flex;
  vertical-align: middle;
}
#toast #toast-undo:hover { border-color: var(--brand); }

/* ---------- F10-B P1-3: CÉGKARTON-OLDAL (csak desktop — mobilon marad az alsó-sheet karton) ---------- */
#v-karton .cim-sor h2 { margin: 0; font-size: var(--fs-18); font-weight: 700; color: var(--text-strong); letter-spacing: -.015em; }
@media (min-width: 1024px) {
  #v-karton { grid-column: 1 / -1; }
  #karton-fej {
    position: sticky; top: 10px; z-index: 26;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 13px 16px; margin-bottom: var(--sp-4); box-shadow: var(--shadow-1);
  }
  #karton-fej .cim-sor { flex: 1 1 260px; min-width: 0; }
  #karton-fej .cim-sor .varos { color: var(--text-muted); font-size: var(--fs-12); margin-top: 2px; }
  #karton-fej button { width: auto; margin: 0; padding: 9px 14px; min-height: 38px; font-size: .85rem; flex: 0 0 auto; }
  #karton-fej .akciok { display: flex; gap: 8px; flex-wrap: wrap; }
  .karton-racs { display: grid; grid-template-columns: minmax(330px, .85fr) minmax(0, 1.45fr); gap: 0 var(--sp-4); align-items: start; }
  .karton-racs > .card { margin-bottom: 0; }
  /* az idővonal a tartalomban görgethető, a kártya a nézethez méretezett — szűrésnél SEMMI nem ugrál */
  #karton-ido {
    display: flex; flex-direction: column;
    position: sticky; top: 84px;
    height: calc(100vh - 104px); height: calc(100dvh - 104px);
  }
  #karton-ido-lista { flex: 1 1 auto; min-height: 200px; overflow-y: auto; padding-right: 4px; }
  #karton-adat { max-height: calc(100vh - 104px); overflow-y: auto; position: sticky; top: 84px; }
}
@media (max-width: 1023px) { #v-karton { display: none !important; } }

/* cégnév-link (teendő-sor, lezártak, terv, terepnapló-idővonal): karton-hivatkozás új-füllel is */
a.cegn, .cegn a, a.tev-ceg { text-decoration: none; cursor: pointer; }
a.tev-ceg { color: inherit; }
a.tev-ceg:hover, a.cegn:hover { text-decoration: underline; }

/* ---------- KONTAKT-VÁLASZTÓ (jegyzet-űrlap): kompakt, kereshető, max ~3 sor görgethető ----------
   Regressziós tanulság: 13+ kontaktos cégen a chip-fal nem feszítheti szét a modált. */
.kontakt-valaszto {
  display: flex; gap: 6px; flex-wrap: wrap; align-content: flex-start;
  margin-top: 6px; max-height: 118px; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px;
}
.kontakt-valaszto .jk-chip { cursor: pointer; padding: 7px 12px; font-size: .82rem; }
.kontakt-valaszto .jk-chip.on {
  background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink);
}
#jegyzet-kontakt-kereso { margin-top: 6px; padding: 9px 12px; font-size: .9rem; min-height: 0; }
/* F18: quick-add chip a chip-sor végén — szaggatott keret, brand-szín; offline tiltott állapot */
.kontakt-valaszto .jk-chip.jk-uj {
  border-style: dashed; border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  background: var(--surface); color: var(--brand-ink);
  display: inline-flex; align-items: center; gap: 4px;
}
.kontakt-valaszto .jk-chip.jk-uj .icon { width: 12px; height: 12px; }
.kontakt-valaszto .jk-chip.jk-uj.off { opacity: .55; cursor: not-allowed; color: var(--text-muted); border-color: var(--border); }

/* ---------- F18: KÉT-HASÁBOS JEGYZET-MODÁL (csak desktop; mobil alsó-sheet egy-hasábos marad) ----------
   Bal: típus-váltó + kontakt-blokk (+quick-add) + szöveg + diktálás · Jobb: köv. lépés + ígéret + előre-jelző.
   Cél: 1366×768-on SEMMI görgetés normál használatban (csak a kontakt-fal görget belül, F14 szabály). */
@media (min-width: 1024px) {
  /* F23jav2 (Egon, 5A): SZÉLESEBB modál (több kontakt fér egy sorba) + MAGASABB fal, a VALÓS
     CSS-magassághoz igazítva (150% Windows-DPI mellett az "1080p" ~720 CSS px — a régi képlet
     ezt kis laptopnak látta). A régi "768-on semmi görgetés" garancia helyett: a fal kap helyet,
     a törzs görgethet, ha muszáj (a dialógus-őr ≤80vh + gombsor-látszik szabálya őrzi a keretet). */
  #jegyzet-card.kethasab { width: min(1180px, 96vw); }
  #jegyzet-card.kethasab .kontakt-valaszto { max-height: clamp(150px, calc(100vh - 560px), 44vh); }
  /* F23bj (Egon): a fejléc-gyorslinkek (Vezetői nézet / Pénzügy pill a user-név alatt) csak
     mobilon élnek — desktopon a bal menü viszi, itt csak zavart keltett */
  .fej-gyorslink { display: none; }
  #jegyzet-card.kethasab .sheet-torzs {
    display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 0 var(--sp-5);
  }
  #jegyzet-card.kethasab #jegyzet-hasab-jobb {
    display: flex; flex-direction: column; align-content: start;
    border-left: 1px solid var(--border); padding-left: var(--sp-5); min-width: 0;
  }
  /* bal hasáb flex-oszlop: a textarea RUGALMAS — nagy viewporton kitölti a hasábot,
     1366×768 worst-case-ben 96px-ig zsugorodik, így a törzs MÉRTEN nem görget */
  #jegyzet-card.kethasab #jegyzet-hasab-bal { min-width: 0; display: flex; flex-direction: column; }
  #jegyzet-card.kethasab #jegyzet-hasab-bal > * { flex: 0 0 auto; }
  #jegyzet-card.kethasab #jegyzet-hasab-bal textarea { flex: 1 1 auto; min-height: 96px; }
  #jegyzet-card.kethasab .mic { padding: 9px 14px !important; }
  /* a spec-sorrend a jobb hasábban: köv. lépés → ígéret → előre-jelző (mobil DOM-sorrend érintetlen) */
  #jegyzet-card.kethasab #jegyzet-hasab-jobb > #jegyzet-next-blokk { order: 1; }
  #jegyzet-card.kethasab #jegyzet-hasab-jobb > #jegyzet-igeret-sor { order: 2; }
  #jegyzet-card.kethasab #jegyzet-hasab-jobb > #jegyzet-elorejelzo { order: 3; }
  /* enyhe tömörítés a jobb hasábban, hogy vezető+pénzügy kombinációban is görgetés-mentes 768-on */
  #jegyzet-card.kethasab #jegyzet-hasab-jobb input,
  #jegyzet-card.kethasab #jegyzet-hasab-jobb select { padding: 9px 12px; min-height: 42px; font-size: .95rem; }
  #jegyzet-card.kethasab #jegyzet-hasab-jobb .gyors-datum button { padding: 8px; }
}

/* ---------- TEENDŐ-SZŰRŐ SOR: darabszám-badge-dzsel (desktopon GPT chip-sor) ---------- */
#teendo-szurok button .db {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px;
  border-radius: var(--r-pill); background: var(--surface-inset); color: var(--text-muted);
  font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.5;
}
#teendo-szurok button.on .db { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); color: var(--brand-ink); }
@media (min-width: 1024px) {
  #teendo-szurok { gap: 6px; flex-wrap: wrap; }   /* P1-6: a korábbi inline flex-wrap CSS-be költözött */
  #teendo-szurok button {
    width: auto; flex: 0 0 auto; padding: 7px 12px; min-height: 30px;
    border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 600;
  }
  /* F10-B P2-3: a szűrő-sor 567 sornyi lista fölött is elérhető marad görgetésnél */
  #teendo-szurok {
    position: sticky; top: 0; z-index: 7;
    margin: 0 -16px; padding: 10px 16px;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
}

/* ---------- F17: IDŐVONAL-ÁTÉPÍTÉS (cégkarton történet-folyam) ---------- */
/* állapot-jelvények (a penzugy.html F13 jelvény-nyelve — közösítve) */
.badge.b-ok { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); color: var(--success); }
.badge.b-warn { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); color: var(--warning); }
.badge.b-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
.badge.b-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 40%, var(--border)); color: var(--info); }
.badge.b-brand { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); color: var(--brand-ink); }

/* hónap-elválasztó — sticky a görgethető történet-folyamban */
.iv-honap {
  position: sticky; top: 0; z-index: 3;
  padding: 7px 0 5px; background: var(--surface);
  color: var(--text-muted); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.iv-honap::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* hosszú szöveg: 5-soros clamp + „Tovább" kibontó (az adat nem vész el, csak a megjelenítés csukott) */
.iv-clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.iv-tovabb { color: var(--brand-ink); font-weight: 700; font-size: .78rem; cursor: pointer; display: inline-block; margin-top: 3px; }
.iv-tovabb:hover { text-decoration: underline; }

/* nyitott teendők állandó fejblokkja (Pipedrive Focus / Salesforce Upcoming-minta) */
.iv-nyitott {
  border: 1px solid color-mix(in srgb, var(--info) 35%, var(--border));
  border-radius: var(--r-sm); background: var(--info-soft);
  padding: 8px 12px 9px; margin: 6px 0 10px;
}
.iv-nyitott .cim { color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.iv-nyitott-lista { max-height: 236px; overflow-y: auto; overscroll-behavior: contain; }
.iv-nyitott-sor { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: .85rem; cursor: pointer; }
.iv-nyitott-sor:last-child { border-bottom: 0; }
.iv-nyitott-sor:hover { background: color-mix(in srgb, var(--surface) 45%, transparent); }
.iv-nyitott-sor .cb {
  flex: 0 0 auto; width: 21px; height: 21px; margin-top: 1px; border-radius: 6px;
  border: 2px solid var(--border-strong); cursor: pointer; background: var(--surface);
}
.iv-nyitott-sor .cb:hover { border-color: var(--success); }
.iv-nyitott-sor .hat { font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.iv-nyitott-sor .hat.lejart { color: var(--danger); font-weight: 700; }

/* kitűzött jegyzet — a nyitott-blokk FELETT, halvány brand-kiemeléssel (HubSpot pin-minta) */
.iv-kituzott {
  border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--border));
  border-radius: var(--r-sm); background: var(--brand-soft);
  padding: 4px 12px 8px; margin: 6px 0 10px;
}
.iv-kituzott .cim { color: var(--brand-ink); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; display: flex; align-items: center; gap: 6px; padding-top: 6px; }
.iv-kituzott .jegyzet-item { border-bottom: 0; }

/* MiniCRM örökség-futam összecsukott sora */
.iv-orokseg {
  padding: 9px 0; border-bottom: 1px solid var(--border);
  color: var(--text-muted); font-size: .82rem; cursor: pointer; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
}
.iv-orokseg:hover { color: var(--text); }

/* lezárás-esemény + kattintható teendő-sorok a folyamban */
.jegyzet-item.iv-katt { cursor: pointer; }
.jegyzet-item.iv-katt:hover { background: var(--surface-hover); }
.iv-teendo-lab { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.iv-teendo-lab .sor { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .78rem; color: var(--text-muted); cursor: pointer; }
.iv-teendo-lab .sor:hover .badge { border-color: var(--brand); }

/* ---------- F19 Fiókom sheet (jelszó + 2FA + eszközök) ---------- */
.fiok-szekcio { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; margin-top: 10px; }
.fiok-cim { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; }
.fiok-sor { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .88rem; align-items: center; }
.fiok-sor > b { text-align: right; overflow-wrap: anywhere; }
.fiok-sor .fiok-mini { width: auto; margin: 0; padding: 6px 10px; min-height: 0; font-size: .75rem; flex: 0 0 auto; }
.fiok-vk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; margin: 8px 0; text-align: center; user-select: all; }
#fiok-qr { display: block; margin: 10px auto 6px; background: #fff; border: 1px solid var(--border); border-radius: 8px; max-width: 100%; }

/* ============================================================
   F23dk: ASZTALI INTERAKCIÓ-RÉTEG (Material "state layer" — Egon 2026-07-20 kérése,
   Gmail-minta). UI-KÁNON 5.: minden interaktív elem hoverre JELEZ, mielőtt kattintanál.
   @media (hover:hover) mögött — érintőn nem ragad be, a mobil ripple+vibra változatlan.
   ============================================================ */
@media (hover: hover) {
  /* sorok: háttér-emelés + finom kiemelkedés */
  .list-item:hover,
  .todo:hover:not(.kesz),
  .todo.kesz[role="button"]:hover,
  .ki-sor:hover,
  .jegyzet-item.iv-katt:hover,
  .iv-nyitott-sor:hover,
  .fl-sor:hover,
  .jegyzet-sor:hover,
  .besz-sor:hover {
    background: var(--surface-hover);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  }
  /* ikon-gombok + tap-elemek: Gmail-féle halvány kör-réteg */
  .tap:hover, .icon-btn:hover, .naplo-nyil:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text) 9%, transparent);
    border-radius: 50%;
  }
  .tap { border-radius: 50%; transition: background .12s; }
  .icon-btn { transition: background .12s; }
  /* chipek, fülek, szűrők: kiemelés + keret-erősödés */
  .tab:hover:not(.on) { color: var(--text-strong); background: var(--surface-hover); }
  .tipus-valto button:hover:not(.on) { border-color: var(--border-strong); background: var(--surface-hover); }
  .snav a:hover, .snav button:hover:not(.on) { background: var(--surface-hover); color: var(--text-strong); }
  .badge[href]:hover, a.badge:hover { filter: brightness(.96); box-shadow: 0 0 0 1px currentColor inset; }
  .tel-link:hover { filter: brightness(.95); box-shadow: 0 0 0 1px currentColor inset; }
  .gyors-datum button:hover:not(.on) { border-color: var(--border-strong); background: var(--surface-hover); }
  tr[onclick]:hover td { background: color-mix(in srgb, var(--surface-hover) 70%, transparent); }
  /* F23jav (Egon): TELJES lefedés — a kattintható osztályok gépi átfésüléséből pótolt tételek */
  .jk-chip:hover:not(.on):not(.off) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
  .cb:hover { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
  .chip:hover:not(.on) { border-color: var(--border-strong); background: var(--surface-hover); }
  a.cegn:hover { color: var(--brand-ink); text-decoration: underline; }
  .mic:hover, .sync-chip:hover, .cp-close:hover, .iv-tovabb:hover, .sortable:hover,
  .fiok-mini:hover, .vz-kezel:hover, .iv-orokseg[onclick]:hover, .tev-ceg[onclick]:hover {
    background: var(--surface-hover); border-color: var(--border-strong);
  }
  .lnk:hover { text-decoration: underline; }
  span.badge[onclick]:hover, .num[onclick]:hover { box-shadow: 0 0 0 1px currentColor inset; cursor: pointer; }
  /* F23jav2 (Egon): összecsukó blokk-fejlécek (Projektek / Lezárt projektek) — látható hover */
  .blokk-fej:hover { background: var(--surface-hover); }
}
/* F23jav3: a blokk-fej ALAP-stílusa OSZTÁLYBAN (a korábbi inline background:none ütötte a hovert
   — UI-KÁNON: kattintható elemen inline background TILOS, mert a :hover sosem győzhet ellene) */
.blokk-fej {
  background: none; border: 0; padding: 8px 6px 2px; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; border-radius: var(--r-sm);
}
/* F23jav3: a szabadság-nap szerkesztő-blokkja — koppintásra ide fókuszálunk, villantással */
.szab-szerk-blokk { border-radius: var(--r-sm); padding: 2px 4px; }
.szab-szerk-blokk.szab-villan { animation: szabvillan .9s ease-out; }
@keyframes szabvillan { 0%, 100% { background: transparent; } 30% { background: var(--vacation-soft); } }
/* fókusz-gyűrű billentyűzethez — egységesen, minden interaktív elemen (UI-KÁNON 5.) */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 70%, var(--text));
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- F23dk: saját dátum/idő-popover (datum.js — desktop) ---------- */
.et-pop {
  position: fixed; z-index: 140; width: 264px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
  display: none;
}
.et-pop.nyitva { display: block; }
.et-fej { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.et-cim { font-weight: 700; font-size: .88rem; color: var(--text-strong); text-transform: capitalize; }
.et-nyil { width: 30px; height: 30px; margin: 0; padding: 0; min-height: 0; font-size: 1.05rem;
  background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); }
.et-nyil:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.et-racs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.et-napfejek span { text-align: center; font-size: .66rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; padding: 3px 0; }
.et-napfejek .et-hetvege { color: var(--text-faint); }
.et-nap { width: 100%; aspect-ratio: 1; margin: 0; padding: 0; min-height: 0; font-size: .82rem;
  background: none; border: 0; border-radius: 50%; color: var(--text); font-variant-numeric: tabular-nums; }
.et-nap.et-hetvege { color: var(--text-muted); }
.et-nap:hover { background: var(--surface-hover); }
.et-nap.et-ma { box-shadow: 0 0 0 1px var(--brand) inset; color: var(--brand-ink); font-weight: 700; }
.et-nap.et-on { background: var(--brand); color: #fff; font-weight: 700; }
.et-lab { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
/* F23jav2: cím-gomb (év/hó gyors-választó nyitása) + hónap-rács */
.et-cim-gomb { width: auto; margin: 0; padding: 4px 10px; min-height: 0; background: none; border: 0;
  font-weight: 700; font-size: .88rem; color: var(--text-strong); border-radius: var(--r-sm); cursor: pointer; }
.et-cim-gomb:hover { background: var(--surface-hover); }
.et-ho-racs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.et-ho { width: 100%; margin: 0; padding: 10px 0; min-height: 0; font-size: .82rem; text-transform: capitalize;
  background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); }
.et-ho:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.et-ho.et-ma { box-shadow: 0 0 0 1px var(--brand) inset; color: var(--brand-ink); font-weight: 700; }
.et-ho.et-on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.et-mini { width: auto; margin: 0; padding: 5px 12px; min-height: 0; font-size: .76rem; font-weight: 600;
  background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--text); }
.et-mini:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.et-sugo { font-size: .7rem; color: var(--text-faint); }
.et-ido-racs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 240px;
  overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.et-ido { width: 100%; margin: 0; padding: 6px 0; min-height: 0; font-size: .8rem;
  background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font-variant-numeric: tabular-nums; }
.et-ido:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.et-ido.et-on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }