/* ── Modern áttekintés ─────────────────────────────── */
.dash { max-width: 1680px; margin: 0 auto; }

/* mérő választó csempék */
.dev-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { background: var(--surface); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 14px; cursor: pointer; border: 1.5px solid transparent; min-width: 200px; transition: border-color .15s, transform .15s; }
.chip:hover { border-color: var(--primary); transform: translateY(-1px); }
.chip.sel { border-color: var(--primary); background: linear-gradient(180deg, var(--sel), var(--surface)); }
.chip-n { font-weight: 600; font-size: .88em; display: flex; align-items: center; gap: 7px; color: var(--text-strong); }
.chip-v { font-size: .8em; color: var(--text-3); margin-top: 2px; }
.chip-v b { font-family: var(--mono); color: var(--text-strong); }

/* hero */
.hero {
  background: var(--hero-grad);
  color: #fff; border-radius: 14px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  box-shadow: 0 6px 22px rgba(26,58,92,.25); margin-bottom: 16px; flex-wrap: wrap; position: relative; overflow: hidden;
}
:root[data-theme="dark"] .hero { box-shadow: 0 6px 22px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.05); }
.hero::after { content: ''; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.04); pointer-events: none; }
.hero-title { display: flex; align-items: center; gap: 10px; }
.hero-title h2 { font-size: 1.45em; font-weight: 600; letter-spacing: .2px; }
.hero-site { font-size: .75em; padding: 2px 9px; border-radius: 10px; background: rgba(255,255,255,.13); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 7px; font-size: .8em; color: #c9d6e3; align-items: center; }
.hero-meta b { color: #fff; font-weight: 600; }
.hero-meta .muted { color: #8fa4b8; }
.hero-meta .badge { font-size: .85em; }
.hero-meta .badge.ok { background: #d5f5e3; color: #1e7e46; } .hero-meta .badge.err { background: #fadbd8; color: #b03a2e; }
.hero-meta .err-text { color: #ffb4a8; }
.hero-stats { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.hs { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 8px 14px; min-width: 110px; }
.hs-l { font-size: .68em; text-transform: uppercase; letter-spacing: .6px; color: #9fb3c8; font-weight: 600; }
.hero .hs-v { font-family: var(--mono); font-size: 1.45em; font-weight: 700; line-height: 1.25; }
.hs-u { font-size: .7em; color: #9fb3c8; }
.live { width: 12px; height: 12px; border-radius: 50%; background: #95a5a6; position: relative; flex-shrink: 0; }
.live.on { background: #2ecc71; }
.live.on::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #2ecc71; animation: pulse 1.8s infinite; }
.live.off { background: #e74c3c; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

/* KPI kártyák */
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi2 { --c: var(--k-p); background: var(--surface); border-radius: var(--card-r); box-shadow: var(--shadow); padding: 12px 14px 0; position: relative; overflow: hidden; min-height: 122px; display: flex; flex-direction: column; }
.kpi2::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--c); opacity: .9; }
.kpi2.c-energy { --c: var(--k-energy); } .kpi2.c-p { --c: var(--k-p); } .kpi2.c-q { --c: var(--k-q); } .kpi2.c-s { --c: var(--k-s); } .kpi2.c-pf { --c: var(--k-pf); } .kpi2.c-f { --c: var(--k-f); }
.k-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.k-label { font-size: .68em; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); }
.k-val { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; }
.k-val .v { font-family: var(--mono); font-size: 1.85em; font-weight: 700; color: var(--text-strong); letter-spacing: -.5px; white-space: nowrap; }
.k-unit { font-size: .82em; color: var(--text-4); font-weight: 600; }
.k-sub { font-size: .74em; color: var(--text-3); min-height: 1.3em; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.k-spark { width: calc(100% + 28px); height: 40px; margin: auto -14px 0; display: block; }
.k-spark .l { fill: none; stroke: var(--c); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.k-spark .a { fill: var(--c); opacity: .09; }
:root[data-theme="dark"] .k-spark .a { opacity: .16; }
.ph-mini { font-family: var(--mono); display: inline-flex; align-items: center; gap: 4px; }
.ph-mini::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.tag { font-size: .68em; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: var(--surface-3); color: var(--text-2); }
.tag.ok { background: var(--ok-bg); color: var(--ok-fg); } .tag.warn { background: var(--warn-bg); color: var(--warn-fg); } .tag.err { background: var(--err-bg); color: var(--err-fg); }

/* rács + kártyák */
.dgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.span4 { grid-column: span 4; } .span8 { grid-column: span 8; } .span6 { grid-column: span 6; } .span12 { grid-column: span 12; }
.card { background: var(--surface); border-radius: var(--card-r); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 4px; flex-wrap: wrap; }
.card-t { font-size: .74em; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.card-t::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--primary); }
.card-link { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--primary); text-decoration: none; font-size: 1.05em; }
.card-link:hover { text-decoration: underline; }
.card-x { display: flex; gap: 8px; flex-wrap: wrap; }
.card-b { padding: 8px 16px 14px; flex: 1; min-width: 0; }
.seg2 { display: inline-flex; background: var(--surface-3); border-radius: 7px; padding: 2px; gap: 2px; }
.seg2 button { border: none; background: transparent; padding: 3px 9px; border-radius: 5px; font-size: .74em; font-weight: 600; color: var(--text-3); cursor: pointer; font-family: inherit; }
.seg2 button:hover { color: var(--text-strong); }
.seg2 button.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* műszerek */
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gauge { text-align: center; position: relative; }
.gauge svg { width: 100%; max-width: 195px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.g-track { fill: none; stroke: var(--surface-3); stroke-width: 11; stroke-linecap: round; }
.g-val { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dasharray .6s cubic-bezier(.3,.7,.3,1); }
.g-tip { fill: var(--surface); transition: cx .6s cubic-bezier(.3,.7,.3,1), cy .6s cubic-bezier(.3,.7,.3,1); }
.g-band { fill: none; stroke-width: 3; stroke-linecap: round; }
.g-band.ok { stroke: #27ae60; opacity: .55; }
.g-mark { stroke: var(--text-strong); stroke-width: 1.6; opacity: .45; }
.g-value { font-family: var(--mono); font-size: 24px; font-weight: 700; fill: var(--text-strong); }
.g-unit { font-size: 12px; fill: var(--text-4); font-weight: 600; }
.g-min, .g-max { font-size: 10.5px; fill: var(--text-4); font-family: var(--mono); }
.g-label { font-size: .78em; font-weight: 700; color: var(--text-2); margin-top: -10px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.gauge.out .g-value { fill: var(--hi); }
.ph-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; vertical-align: 0; margin-right: 2px; }
.mini-kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.mini-kv > div { display: flex; flex-direction: column; align-items: center; background: var(--surface-2); border-radius: 8px; padding: 5px 4px; }
.mini-kv span { font-size: .66em; text-transform: uppercase; color: var(--text-3); font-weight: 700; letter-spacing: .4px; white-space: nowrap; }
.mini-kv b { font-size: .98em; color: var(--text-strong); }
.mini-kv small { font-size: .65em; color: var(--text-4); }

/* fázis táblázat */
.dash .ph-table td { padding: 8px 6px; font-size: .95em; }
.dash .ph-table td:first-child { display: flex; align-items: center; gap: 4px; }
.dash .ph-table td:nth-child(2) { position: relative; }
.dash .ph-table td:nth-child(2) span { position: relative; }
.pbar { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 2px; transition: width .5s; }

/* mini trend */
.mini-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8em; margin-bottom: 6px; min-height: 1.4em; align-items: center; }
.ml { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.ml i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.ml b { color: var(--text-strong); }
.ml-t { margin-left: auto; color: var(--text-4); font-size: .92em; }
.dash .mini-chart { height: 285px; }

/* energia */
.en-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.en-row { background: var(--surface-2); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; }
.en-row span { font-size: .68em; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.en-row b { font-size: 1.1em; color: var(--text-strong); margin-top: 2px; }
.en-row small { font-size: .68em; color: var(--text-4); }
.share { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--surface); }
.share i { display: block; min-width: 2px; }
.share-l { display: flex; justify-content: space-between; font-size: .76em; color: var(--text-2); margin-top: 6px; font-family: var(--mono); }

/* minőség */
.qrow { display: grid; grid-template-columns: 42px 1fr 64px; align-items: center; gap: 8px; margin: 5px 0; }
.ql { font-size: .78em; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.qbar { height: 8px; background: var(--surface-3); border-radius: 4px; position: relative; }
.qbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transition: width .5s; }
.qbar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--hi); opacity: .7; }
.qrow b { text-align: right; font-size: .9em; color: var(--text-strong); }
.qrow b small { color: var(--text-4); font-weight: 400; margin-left: 1px; }
.qrow b.bad { color: var(--hi); }

/* demand */
.dem-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.dem-big > div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.dem-big .hs-l { color: var(--text-3); }
.dem-v { font-size: 1.5em; font-weight: 700; color: var(--text-strong); }
.dem-v small { font-size: .5em; color: var(--text-4); font-weight: 600; }
.dash .kv-grid { font-size: .84em; gap: 7px 12px; }
.ok-text { color: var(--ok-text); font-weight: 700; } .err-text { color: var(--err-text); font-weight: 700; }

/* elavult adat */
.is-stale .k-val .v, .is-stale .g-value { fill: var(--text-4); color: var(--text-4); }

/* 7 napos mini oszlopok (energia KPI) */
.k-bars { display: flex; gap: 4px; align-items: flex-end; height: 50px; margin: auto 0 8px; }
.kb { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 2px; }
.kb i { display: block; width: 100%; background: var(--k-energy); opacity: .3; border-radius: 3px 3px 1px 1px; min-height: 2px; transition: height .4s; }
.kb.today i { opacity: .9; }
.kb span { font-size: 10.5px; color: var(--text-4); line-height: 1; text-transform: lowercase; }
.cons-grid .kpi2 { min-height: 0; padding-bottom: 12px; }

@media (max-width: 1500px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .span4 { grid-column: span 6; } .span8 { grid-column: span 12; } }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span4, .span6, .span8 { grid-column: span 12; } .hero-stats { width: 100%; } .hs { flex: 1; } }