/* style-het.css — WingZ Game v2: screens/het.js (Hét-nézet: Napcsík + Hőtérkép).
   Csak .het- előtagú szelektorok; a tokenek a főszál :root-jából jönnek (lásd agent-contract).
   Flat szelektorok (nincs .het-h1/.het-h2 wrapper) — a #view már ad függőleges gap-et a
   top-level szekciók közt, ahogy a többi képernyő is (ma.js, feladatok.js). */

/* ═══ Közös: hétléptető fejléc ═══ */
.het-topbar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.het-navbtn { width:34px; height:34px; min-height:0; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink-2); display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; }
.het-navbtn:active { transform:scale(.95); }
.het-weektitle { display:flex; flex-direction:column; align-items:center; line-height:1.2; text-align:center; }
.het-weektitle-main { font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:.2px; text-transform:uppercase; }
.het-weektitle-sub { font-size:12.5px; color:var(--ink-3); }

/* ═══ Napcsík — csapatcél-sáv ═══ */
.het-goalbar { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; display:flex; flex-direction:column; gap:7px; box-shadow:var(--shadow); }
.het-goalbar-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.het-goalbar-loc { font-size:13px; font-weight:700; color:var(--ink-2); }
.het-goalbar-pct { font-family:var(--display); font-variant-numeric:tabular-nums; font-weight:800; font-size:16px; color:var(--ink); white-space:nowrap; }
.het-goalbar-pctsign { font-size:12px; font-weight:700; color:var(--ink-3); }
.het-goalbar-word { font-size:12px; font-weight:600; color:var(--ink-3); }
.het-goalbar-barwrap { position:relative; }
.het-goalbar-target { position:absolute; top:-3px; width:2px; height:14px; background:var(--ink-3); border-radius:2px; transform:translateX(-1px); }
.het-goalbar-bottom { font-size:12px; font-weight:600; color:var(--ink-3); text-align:right; }
.het-goalbar-note { text-align:right; margin-top:-3px; }

/* ═══ Napcsík — 7 napos csempesor ═══ */
.het-days { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.het-day { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 1px 7px; min-height:74px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--paper); }
.het-day-name { font-size:12px; color:var(--ink-3); font-weight:700; }
.het-day-num { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.het-ring { flex-shrink:0; overflow:visible; }
.het-day--today { border-color:var(--red); background:var(--surface-2, var(--cream-dk)); box-shadow:var(--glow, 0 0 0 2px var(--red-dim)); }
.het-day-badge { position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:800; line-height:1; letter-spacing:.3px; color:var(--white); background:var(--red); border-radius:999px; padding:2px 7px; white-space:nowrap; }
.het-day-star { position:absolute; top:3px; right:3px; color:var(--gold); }
.het-day--future { border-style:dashed; opacity:.8; }
.het-day-plan { font-size:11px; color:var(--ink-3); font-weight:600; }
.het-day--selected { background:var(--surface-2, var(--cream-dk)); border-color:var(--line-2); }
.het-day:active { transform:scale(.97); }

.het-ring-track { fill:none; stroke:var(--line-2); stroke-width:3; }
.het-ring-track--dashed { stroke-dasharray:2.4 3.4; stroke:var(--line-2); }
.het-ring-fg { fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:94.248; stroke-dashoffset:94.248; transform:rotate(-90deg); transform-origin:18px 18px; animation:het-ringfill 600ms cubic-bezier(.2,.7,.2,1) forwards; }
.het-ring-ok { stroke:var(--green); }
.het-ring-warn { stroke:var(--amber); }
.het-ring-bad { stroke:var(--bad, var(--red)); }
.het-ring-none { stroke:var(--line-2); }

/* ═══ Napcsík — kiválasztott nap listája ═══ */
.het-list { display:flex; flex-direction:column; gap:6px; }
.het-chips { margin-top:2px; }

/* ═══ Hőtérkép — KPI-sáv (4 oszlop) ═══ */
.het-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.het-kpi { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 2px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); }
.het-kpi--faint { opacity:.65; }
.het-kpi-num { font-family:var(--display); font-weight:800; font-size:19px; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink); }
.het-kpi-num--ok { color:var(--green); }
.het-kpi-num--warn { color:var(--amber); }
.het-kpi-num--bad { color:var(--bad, var(--red)); }
.het-kpi-label { font-size:11px; color:var(--ink-3); text-align:center; font-weight:600; }

/* ═══ Hőtérkép — ember×nap rács ═══ */
.het-heatmap { display:flex; flex-direction:column; gap:4px; overflow-x:auto; padding-bottom:2px; }
.het-heatmap-head, .het-heatmap-row { display:grid; grid-template-columns:44px repeat(7,30px) 26px; gap:3px; align-items:center; }
.het-heatmap-daycol { font-size:11.5px; text-align:center; color:var(--ink-3); font-weight:700; padding-bottom:3px; border-bottom:2px solid transparent; }
.het-heatmap-daycol--today { color:var(--red); border-bottom-color:var(--red); }
.het-heatmap-sumcol { font-size:11.5px; text-align:center; color:var(--ink-3); font-weight:700; }
.het-heatmap-name { font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.het-cell { width:30px; height:26px; border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-2); border:1px solid transparent; opacity:0; transform:scale(.85); animation:het-cellenter 250ms ease forwards; animation-delay:var(--het-d,0ms); }
.het-cell--ok { background:var(--green-dim); color:var(--green); }
.het-cell--warn { background:var(--amber-dim); color:var(--amber); }
.het-cell--bad { background:var(--bad-dim, var(--red-dim)); color:var(--bad, var(--red)); }
.het-cell--terv { background:transparent; border-color:var(--line-2); border-style:dashed; color:var(--ink-3); }
.het-cell--empty { background:transparent; color:var(--ink-3); font-weight:500; }
.het-cell--today { box-shadow:inset 0 -2px 0 0 var(--red); }
.het-heatmap-sum { font-size:12px; font-weight:800; text-align:center; color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* ═══ Hőtérkép — jelmagyarázat ═══ */
.het-legend { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--ink-3); padding:1px 2px; }
.het-legend-item { display:inline-flex; align-items:center; gap:4px; }
.het-legend-dot { width:8px; height:8px; border-radius:999px; flex-shrink:0; }
.het-legend-dot--ok { background:var(--green); }
.het-legend-dot--warn { background:var(--amber); }
.het-legend-dot--bad { background:var(--bad, var(--red)); }
.het-legend-dot--terv { background:transparent; border:1.5px dashed var(--line-2); }

/* ═══ Hőtérkép — „Elmaradtak ezen a héten" ═══ */
.het-misslist { display:flex; flex-direction:column; gap:7px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 12px; }
.het-misslist-title { font-family:var(--display); font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--ink); }
.het-missrow { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 7px; font-size:12.5px; border-top:1px solid var(--line); padding-top:7px; width:100%; text-align:left; }
.het-missrow:first-of-type { border-top:none; padding-top:0; }
.het-missrow-day { color:var(--bad, var(--red)); font-weight:700; text-transform:capitalize; flex-shrink:0; }
.het-missrow-task { color:var(--ink); font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.het-missrow-who { color:var(--ink-3); flex-shrink:0; font-size:12px; }
.het-missrow:active { opacity:.85; }

/* ═══ Animációk ═══ */
@keyframes het-ringfill { from { stroke-dashoffset:94.248; } to { stroke-dashoffset:var(--het-off,0); } }
@keyframes het-cellenter { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }

@media (prefers-reduced-motion:reduce) {
  .het-ring-fg { animation:none; stroke-dashoffset:var(--het-off,0); }
  .het-cell { animation:none; opacity:1; transform:scale(1); }
}