.session-state{font-weight:700;font-size:11px;padding:4px 7px;border-radius:4px}.session-state.live{background:#e3f7f4;color:#087f7d}.session-state.done{background:#edf2f5;color:#516675}.session-dl{display:grid;grid-template-columns:160px 1fr;gap:10px;margin:0}.session-dl dt{color:#657587;font-weight:700}.session-dl dd{margin:0}#session-detail pre{max-height:280px;overflow:auto;background:#f5f8fa;padding:12px;font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere}

/* A lista férjen ki vízszintes görgetés nélkül: kompakt oszlopok, tördelt időpont. */
#sessions-list td{font-size:12px;padding:9px 8px;vertical-align:middle}
#sessions-list td small{display:block;margin-top:1px;font-size:11px;color:#8a93a6}
#sessions-list .session-tag{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
#sessions-list button{padding:5px 11px;font-size:11px;white-space:nowrap}
/* A .log-table 1550 px minimumot örököl az OCPP-naplótól, aminek széles JSON
   oszlopai vannak. Itt nincs ilyen oszlop, tehát a lista kiférhet görgetés nélkül. */
#sessions-page .log-table table,#reports-page .log-table table{width:100%;min-width:0;table-layout:auto}
#reports-page .log-table th,#reports-page .log-table td{padding:9px 10px}
#sessions-page .log-table th{padding:9px 8px;font-size:10.5px;white-space:nowrap}

/* Energiamix a részletekben: a szám a lényeg, a sáv csak illusztrál. */
/* Az energiamix a kártya jobb felső sarkában, körábrával. A definíciós lista
   balra folyik tovább, így a szám akkor is szem előtt van, ha hosszú a lista. */
.session-detail-layout{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start}
.session-detail-layout .session-dl{grid-column:1;grid-row:1}
.mix-card{grid-column:2;grid-row:1;width:212px;padding:14px;border:1px solid #e6e9f4;border-radius:14px;background:linear-gradient(180deg,#fbfcff,#f5f7fd);text-align:center;cursor:help}
.mix-card.is-empty{display:flex;align-items:center;justify-content:center;min-height:110px;background:#fbfcfe;cursor:default}
.mix-card.is-empty small{font-size:11.5px;color:#8a93a6;line-height:1.5}
.mix-card h4{margin:0 0 8px;font:800 10px Inter,system-ui,sans-serif;color:#8a93a6;text-transform:uppercase;letter-spacing:.08em}
.mix-donut{width:132px;height:132px;display:block;margin:0 auto 6px;transform:rotate(-90deg)}
.mix-ring{fill:none;stroke-width:17}
.mix-ring-grid{stroke:#59647a}
.mix-ring-pv{stroke:#f0a202;transition:stroke-dasharray .4s ease}
.mix-donut-value,.mix-donut-label{transform:rotate(90deg);transform-origin:70px 70px;text-anchor:middle}
.mix-donut-value{font:700 23px Inter,system-ui,sans-serif;fill:#14243e}
.mix-donut-label{font:600 10px Inter,system-ui,sans-serif;fill:#8a93a6;letter-spacing:.04em}
.mix-legend{display:grid;gap:4px;text-align:left;font-size:12px;color:#4a5568}
.mix-legend div{display:flex;align-items:center;gap:7px}
.mix-legend b{margin-left:auto;font-weight:700;color:#14243e;font-size:12px}
.mix-legend-total{margin-top:3px;padding-top:5px;border-top:1px solid #e6e9f4;color:#8a93a6}
.mix-dot{width:10px;height:10px;border-radius:3px;flex:none}
.mix-dot.pv{background:#f0a202}
.mix-dot.grid{background:#59647a}
@media(max-width:720px){.session-detail-layout{grid-template-columns:1fr}.mix-card{grid-column:1;grid-row:1;width:100%}}
/* Riport: összegsor és a szűrő új mezői. */
#report-list tr.report-total td{background:#f2f4fa;font-weight:700;color:#14243e;border-top:2px solid #dfe5f2}
#report-list tr.report-total small{display:block;font-weight:400;font-size:10.5px;color:#8a93a6}
#report-list td small{display:block;font-size:10.5px;color:#8a93a6}
.reports-toolbar .report-empty{display:flex;align-items:center;gap:6px;font-size:12px;color:#4c5b6b;white-space:nowrap}
.reports-toolbar label small{display:block;font-size:10px;color:#8a93a6;font-weight:400}

/* Rendellenes töltések: az összegzés van elöl, nem a felsorolás. Egy hibás töltés
   véletlen is lehet — az operátornak azt kell látnia, hogy hányból hány, és melyik
   pisztoly termeli újra. */
.anomaly-panel{margin-bottom:14px;padding:14px 16px;border:1px solid #f0dcd4;border-left:3px solid #d98a5f;border-radius:12px;background:#fffaf6}
.anomaly-panel[hidden]{display:none}
.anomaly-head{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.anomaly-head b{font-size:15px;color:#8a4a22}
.anomaly-head small{display:block;margin-top:2px;color:#8a7f76;font-size:11.5px}
.anomaly-chips{display:flex;gap:8px;flex-wrap:wrap}
.anomaly-chip{border:1px solid #e6d7cd;border-radius:999px;background:#fff;color:#6b5f56;font:700 11.5px Inter,system-ui,sans-serif;padding:6px 12px;cursor:pointer;white-space:nowrap}
.anomaly-chip b{font-size:12.5px;color:#3c3630;margin-right:3px}
.anomaly-chip:hover{border-color:#c9a68f}
.anomaly-chip.is-active{background:#3c3630;border-color:#3c3630;color:#fff}
.anomaly-chip.is-active b{color:#fff}
.anomaly-chip.bad b{color:#b3282d}
.anomaly-chip.is-active.bad b{color:#ffb3b6}
.anomaly-hotspots{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid #f2e4db}
.anomaly-hotspots>small{font:750 10px Inter,system-ui,sans-serif;color:#a8988c;text-transform:uppercase;letter-spacing:.4px}
.anomaly-hotspot{font-size:11.5px;color:#6b5f56}
.anomaly-hotspot b{color:#3c3630}
.anomaly-clean{color:#4a7a52;font-size:12.5px}
.anomaly-tag{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:999px;background:#f3ece7;color:#7a6a5e;font:700 10px Inter,system-ui,sans-serif;white-space:nowrap}
.anomaly-tag.bad{background:#fdeaea;color:#b3282d}
.anomaly-tag.warn{background:#fdf3e3;color:#94621b}

/* Amit a napló megmondott. A gyártói hibaszöveg a leggyorsabb út a megoldáshoz,
   ezért az látszik; a teendő az egérrel odaérve olvasható. */
.anomaly-causes{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid #f2e4db}
.anomaly-causes>small{font:750 10px Inter,system-ui,sans-serif;color:#a8988c;text-transform:uppercase;letter-spacing:.4px}
.anomaly-cause{padding:4px 10px;border-radius:8px;background:#fff;border:1px solid #e6d7cd;font-size:11.5px;color:#3c3630;cursor:help}
.anomaly-cause b{color:#b3282d}
.anomaly-silent{display:block;margin-top:7px;font-size:11px;color:#a8988c;font-style:italic}
.anomaly-cause-inline{display:block;margin-top:4px;max-width:230px;font-size:10.5px;line-height:1.35;color:#94621b;cursor:help}