/* Luxpower dashboard — «Золота година».
 * Світла тема на :root, темна — через prefers-color-scheme (коли тема не задана вручну)
 * і через [data-theme="dark"] (ручний перемикач). Усі кольори графіків читаються JS-ом
 * з цих же токенів, тому KPI і ECharts завжди збігаються. */

:root {
    --bg: #F7F2EA;        --surface: #FFFCF7;   --surface-2: #F1EAE0;
    --border: #E2D8C8;    --text: #2A2319;      --muted: #6B6052;
    --accent: #B8641C;    --accent-hover: #9A5114; --on-accent: #FFFFFF;
    --pv: #C57A0A;        --battery: #159C86;   --grid: #5A5CCB;   --load: #C0408E;
    --grid-out: #9A9BE0;
    --cell-max: #DC5A3C;  --cell-min: #3579CF;  --cell-delta: #8A5BD0;
    --t-inv: #C1432B;     --t-bat: #0F8A76;
    --ok: #2E9457;        --warn: #D9731A;      --bad: #CF3F3A;    --info: #2F80C4;
    --pv-text: #A86407;   --battery-text: #0F7D6C;
    --ok-text: #26804B;   --warn-text: #AD5910; --bad-text: #CF3F3A; --info-text: #2E6FB0;
    --ok-bg:   color-mix(in srgb, var(--ok)   12%, transparent);
    --warn-bg: color-mix(in srgb, var(--warn) 12%, transparent);
    --bad-bg:  color-mix(in srgb, var(--bad)  12%, transparent);
    --info-bg: color-mix(in srgb, var(--info) 12%, transparent);
    --load-bg: color-mix(in srgb, var(--load) 10%, transparent);
    --area-alpha: 0.18;
    --shadow: 0 1px 2px rgba(42,35,25,.06), 0 4px 16px rgba(42,35,25,.08);
    --card-edge: transparent;
    --chart-split: #EDE5D8;
    --tooltip-bg: #FFFCF7;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1B1A21;        --surface: #25232C;   --surface-2: #2F2C37;
        --border: #3D3945;    --text: #F2EBE1;      --muted: #A79D91;
        --accent: #F0A24A;    --accent-hover: #F6B76A; --on-accent: #1B1A21;
        --pv: #F5B942;        --battery: #3ECDAC;   --grid: #9095F2;   --load: #E783C6;
        --grid-out: #B9BCFF;
        --cell-max: #FF8C66;  --cell-min: #74ACF6;  --cell-delta: #B892F2;
        --t-inv: #F27E5E;     --t-bat: #38C4A2;
        --ok: #62CB8E;        --warn: #F5A24E;      --bad: #F47068;    --info: #72B8F0;
        --pv-text: var(--pv); --battery-text: var(--battery);
        --ok-text: var(--ok); --warn-text: var(--warn); --bad-text: var(--bad); --info-text: var(--info);
        --ok-bg:   color-mix(in srgb, var(--ok)   16%, transparent);
        --warn-bg: color-mix(in srgb, var(--warn) 16%, transparent);
        --bad-bg:  color-mix(in srgb, var(--bad)  16%, transparent);
        --info-bg: color-mix(in srgb, var(--info) 16%, transparent);
        --load-bg: color-mix(in srgb, var(--load) 14%, transparent);
        --area-alpha: 0.22;
        --shadow: none;
        --card-edge: var(--border);
        --chart-split: #33303B;
        --tooltip-bg: #2F2C37;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #1B1A21;        --surface: #25232C;   --surface-2: #2F2C37;
    --border: #3D3945;    --text: #F2EBE1;      --muted: #A79D91;
    --accent: #F0A24A;    --accent-hover: #F6B76A; --on-accent: #1B1A21;
    --pv: #F5B942;        --battery: #3ECDAC;   --grid: #9095F2;   --load: #E783C6;
    --grid-out: #B9BCFF;
    --cell-max: #FF8C66;  --cell-min: #74ACF6;  --cell-delta: #B892F2;
    --t-inv: #F27E5E;     --t-bat: #38C4A2;
    --ok: #62CB8E;        --warn: #F5A24E;      --bad: #F47068;    --info: #72B8F0;
    --pv-text: var(--pv); --battery-text: var(--battery);
    --ok-text: var(--ok); --warn-text: var(--warn); --bad-text: var(--bad); --info-text: var(--info);
    --ok-bg:   color-mix(in srgb, var(--ok)   16%, transparent);
    --warn-bg: color-mix(in srgb, var(--warn) 16%, transparent);
    --bad-bg:  color-mix(in srgb, var(--bad)  16%, transparent);
    --info-bg: color-mix(in srgb, var(--info) 16%, transparent);
    --load-bg: color-mix(in srgb, var(--load) 14%, transparent);
    --area-alpha: 0.22;
    --shadow: none;
    --card-edge: var(--border);
    --chart-split: #33303B;
    --tooltip-bg: #2F2C37;
    color-scheme: dark;
}

/* ── База ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
button, select { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.unit { font-size: .55em; font-weight: 400; color: var(--muted); margin-left: .15em; }

main { padding: 16px; max-width: 1360px; margin: 0 auto; }
@media (min-width: 1024px) { main { padding: 24px; } }

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar {
    display: flex; align-items: center; gap: 16px;
    height: 52px; padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
@media (min-width: 1024px) { .topbar { position: sticky; top: 0; z-index: 10; padding: 0 24px; } }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; text-decoration: none; }
.brand .sun { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, var(--pv), var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pv) 22%, transparent); }
.nav { display: flex; gap: 4px; }
.nav a {
    color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
    padding: 6px 10px; border-radius: 6px; position: relative;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { color: var(--text); }
.nav a.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -13px; height: 2px; background: var(--accent); border-radius: 2px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.updated { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.updated .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.updated .dot.live { animation: pulse 2.4s ease-in-out infinite; }
.updated.late .dot { background: var(--muted); animation: none; }
.updated.error .dot { background: var(--bad); animation: none; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); } 60% { box-shadow: 0 0 0 6px transparent; } }
.theme-btn {
    width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; display: grid; place-items: center; font-size: 16px;
}
.theme-btn:hover { background: var(--surface-2); }
.theme-btn .ico { display: none; }
:root:not([data-theme]) .theme-btn .ico-auto { display: block; }
:root[data-theme="light"] .theme-btn .ico-light { display: block; }
:root[data-theme="dark"] .theme-btn .ico-dark { display: block; }
/* Гамбургер: до 767px меню ховається у випадний список під топбаром */
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 0; }
.menu-btn .line { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--text); transition: transform .2s ease, opacity .2s ease; }
.menu-btn[aria-expanded="true"] .line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .line:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 767px) {
    .topbar { position: sticky; top: 0; z-index: 10; }
    .menu-btn { display: flex; }
    .nav { display: none; position: absolute; left: 0; right: 0; top: 52px; flex-direction: column; gap: 0; padding: 6px 8px 10px;
           background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
    .nav.open { display: flex; }
    .nav a { padding: 12px 12px; font-size: 15px; border-radius: 8px; min-height: 44px; display: flex; align-items: center; }
    .nav a.active { background: var(--surface-2); }
    .nav a.active::after { display: none; }
    .updated .txt { display: none; }
}

footer.foot { color: var(--muted); font-size: 12px; text-align: center; padding: 24px 16px 32px; }
footer.foot span + span::before { content: "·"; margin: 0 8px; }

/* ── Банери ───────────────────────────────────────────────────────────────── */
.banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; margin: 0 0 16px; border-radius: 10px;
    border-left: 3px solid var(--warn); background: var(--warn-bg); color: var(--text); font-size: 14px;
}
.banner[hidden] { display: none; }
.banner.error { border-left-color: var(--bad); background: var(--bad-bg); }
.banner.stale { border-left-color: var(--border); background: var(--surface-2); color: var(--muted); }

/* ── Статус-рядок (домінанта) ─────────────────────────────────────────────── */
.status {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; margin-bottom: 16px; border-radius: 12px;
    background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--card-edge);
    font-size: 16px; font-weight: 500;
}
.status .led { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex: none; }
.status .sub { color: var(--muted); font-weight: 400; font-size: 14px; }
.status.grid .led { background: var(--ok); }
.status.eps { background: var(--warn-bg); border-color: var(--warn); }
.status.eps .led { background: var(--warn); }
.status.eps.low { background: var(--bad-bg); border-color: var(--bad); }
.status.eps.low .led { background: var(--bad); }
.status.unknown .led { background: var(--muted); }

/* ── Картки ───────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface); border-radius: 12px; padding: 16px 18px;
    box-shadow: var(--shadow); border: 1px solid var(--card-edge);
    position: relative; min-height: 96px;
}
.card::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--edge, var(--border));
}
.card.pv      { --edge: var(--pv); }
.card.battery { --edge: var(--battery); }
.card.grid    { --edge: var(--grid); }
.card.load    { --edge: var(--load); }
.card.warn    { --edge: var(--warn); }
.card.bad     { --edge: var(--bad); }
.card.dim .value, .card.dim .label { color: var(--muted); }
.label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.status-dot.warn { background: var(--warn); }
.status-dot.bad { background: var(--bad); }
.status-dot.none { display: none; }
.value { font-size: 32px; font-weight: 600; line-height: 1.1; margin: 6px 0 4px; letter-spacing: -.01em; }
.value.warn { color: var(--warn-text); }
.value.bad { color: var(--bad-text); }
.sub { color: var(--muted); font-size: 13px; line-height: 1.4; }
.sub .zone { font-weight: 500; }
.sub .zone.ok { color: var(--ok-text); } .sub .zone.warn { color: var(--warn-text); } .sub .zone.bad { color: var(--bad-text); }
.skeleton .value, .skeleton .sub { color: transparent; background: var(--surface-2); border-radius: 6px; }

/* ── Hero: потік енергії ──────────────────────────────────────────────────── */
.flow {
    display: grid; gap: 12px; margin-bottom: 16px;
    grid-template-columns: 1fr 1fr;
}
.flow .bus { display: none; }
@media (min-width: 900px) {
    .flow { grid-template-columns: 1fr 24px 1.35fr 24px 1fr 24px 1fr; gap: 0; align-items: stretch; }
    .flow .bus { display: block; position: relative; align-self: center; height: 2px; background: var(--border); }
    .flow .bus::after {
        content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px;
        border: 5px solid transparent; opacity: 0;
    }
    .flow .bus.on { background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px); background-size: 10px 2px; }
    .flow .bus.on.fwd::after { right: -2px; border-left-color: var(--c); opacity: 1; }
    .flow .bus.on.back::after { left: -2px; border-right-color: var(--c); opacity: 1; }
    .flow .bus.on { animation: dash 1.2s linear infinite; }
    .flow .bus.on.back { animation-direction: reverse; }
    .flow .bus.b-pv   { --c: var(--pv); }
    .flow .bus.b-load { --c: var(--load); }
    .flow .bus.b-grid { --c: var(--grid); }
}
@keyframes dash { to { background-position: 10px 0; } }
@media (prefers-reduced-motion: reduce) { .flow .bus.on, .updated .dot.live { animation: none; } }

.card.hero { padding: 18px 20px; }
.card.hero .value { font-size: 56px; font-weight: 700; line-height: 1; margin: 8px 0 10px; }
.bar { height: 6px; border-radius: 3px; background: var(--surface-2); position: relative; overflow: hidden; margin-bottom: 10px; }
.bar .fill { height: 100%; width: 0; background: var(--battery); border-radius: 3px; transition: width .6s ease; }
.bar .fill.low { background: var(--warn); }
.bar .mark { position: absolute; top: -2px; bottom: -2px; left: 20%; width: 1px; background: var(--muted); opacity: .5; }
.card.hero .eta { font-size: 14px; color: var(--text); margin-top: 6px; }
.card.hero .eta .muted { color: var(--muted); }
.card.hero .eta.warn { color: var(--warn-text); }
.card.hero .eta.bad { color: var(--bad-text); }
@media (max-width: 639px) {
    .value { font-size: 26px; }
    /* Телефон: батарея першою на всю ширину, під нею три вузли в ряд */
    .flow { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .card.hero { grid-column: 1 / -1; order: -1; }
    .card.hero .value { font-size: 48px; }
    .flow .card:not(.hero) { padding: 12px 12px 12px 14px; min-height: 0; }
    .flow .card:not(.hero) .value { font-size: 22px; margin: 4px 0 2px; }
    .flow .card:not(.hero) .sub { font-size: 12px; }
    .flow .card:not(.hero) .label { font-size: 11px; }
}

/* ── BMS ряд ──────────────────────────────────────────────────────────────── */
.section-title { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 20px 0 10px; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 20px; }
@media (max-width: 639px) { .kpis { grid-template-columns: 1fr 1fr; } .kpis .card:first-child { grid-column: 1 / -1; } }

/* ── Контроли ─────────────────────────────────────────────────────────────── */
.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 8px; }
.seg button, .seg a {
    border: 0; background: transparent; color: var(--muted); padding: 6px 12px; min-height: 36px;
    border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center;
}
.seg button:hover, .seg a:hover { color: var(--text); }
.seg button.active, .seg a.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.controls .spacer { flex: 1; }
.btn {
    min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; font-size: 14px;
}
.btn:hover { background: var(--surface-2); }
.controls select { min-height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }
@media (max-width: 639px) { .seg { overflow-x: auto; max-width: 100%; } }

/* ── Графіки ──────────────────────────────────────────────────────────────── */
.charts { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .charts { grid-template-columns: 1fr 1fr; } }
.chart-card { padding: 16px; }
.chart-card h2 { font-size: 12px; font-weight: 500; color: var(--muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .06em; }
.chart { width: 100%; height: clamp(220px, 32vh, 300px); }
.chart .empty { display: grid; place-items: center; height: 100%; color: var(--muted); }

/* ── Totals ───────────────────────────────────────────────────────────────── */
.totals { margin-top: 20px; }
.totals-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.totals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
@media (max-width: 639px) { .totals-grid { grid-template-columns: 1fr 1fr; } }
.tile { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.tile .lbl { color: var(--muted); font-size: 12px; }
.tile .val { font-size: 20px; font-weight: 600; margin-top: 2px; }

/* ── Події ────────────────────────────────────────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.page-header h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.empty-state { text-align: center; padding: 60px 20px; background: var(--surface); border-radius: 12px; color: var(--muted); box-shadow: var(--shadow); border: 1px solid var(--card-edge); }

table.events { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--card-edge); }
table.events th, table.events td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.events th { background: var(--surface-2); color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
table.events tr:last-child td { border-bottom: none; }
table.events tbody tr:hover { background: var(--surface-2); }
table.events tr { border-left: 3px solid transparent; }
table.events tr.row-critical { border-left-color: var(--bad); }
table.events tr.row-warning { border-left-color: var(--warn); }
table.events tr.row-info { border-left-color: var(--info); }
table.events td.ts { color: var(--muted); font-size: 13px; white-space: nowrap; }
table.events td.type code { font-size: 12px; background: var(--surface-2); padding: 2px 6px; border-radius: 4px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.pill.info { background: var(--info-bg); color: var(--info-text); }
.pill.warning { background: var(--warn-bg); color: var(--warn-text); }
.pill.critical { background: var(--bad-bg); color: var(--bad-text); }
table.events .msg { line-height: 1.5; }
table.events details.data { margin-top: 6px; font-size: 12px; color: var(--muted); }
table.events details.data summary { cursor: pointer; user-select: none; }
table.events details.data pre { background: var(--bg); padding: 8px 10px; border-radius: 6px; overflow: auto; margin: 6px 0 0; font-size: 11px; }
table.events .ok { color: var(--ok-text); }
table.events .pending { color: var(--muted); }
table.events .err { color: var(--bad-text); }
@media (max-width: 639px) {
    table.events, table.events tbody, table.events tr, table.events td { display: block; }
    table.events thead { display: none; }
    table.events tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
    table.events td { padding: 2px 0; border: 0; }
    table.events td.ts { display: inline; margin-right: 8px; }
    table.events td.sev { display: inline; }
    table.events td.type { display: inline; float: right; }
    table.events td.notified { font-size: 12px; }
}

/* ── /schedule: графік відключень ─────────────────────────────────────────── */
.schedule { display: grid; gap: 12px; }
.schedule .card.next .value { font-size: 36px; }
.schedule .card.next .value .unit { font-size: 14px; }
.schedule .card.next .sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.schedule .card.next .assessment { display: block; line-height: 1.5; }
.schedule .muted { color: var(--muted); }
.schedule .label .spacer { flex: 1; }
.schedule .label .total { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--warn-text); }
.schedule .label .total.ok { color: var(--ok-text); }
.schedule .hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-top: 10px; }
.schedule .hours .h { height: 28px; border-radius: 4px; background: var(--surface-2); border: 1px solid transparent; }
.schedule .hours .h.past { opacity: .45; }
.schedule .hours .h.now { border-color: var(--text); opacity: 1; }
.schedule .hours .h.k-planned, .schedule .legend i.k-planned { background: var(--bad); }
.schedule .hours .h.k-emergency, .schedule .legend i.k-emergency { background: var(--bad); background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.35) 4px 8px); }
.schedule .hours .h.k-possible, .schedule .legend i.k-possible { background: var(--warn-bg); border-color: var(--warn); }
.schedule .hours .h.k-manual, .schedule .legend i.k-manual { background: var(--warn); }
.schedule .hours .h.partial { background-image: linear-gradient(90deg, currentColor 0 50%, transparent 50%); background-size: 6px 100%; }
.schedule .ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.schedule .slots { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.schedule .pill.kind-planned, .schedule .pill.kind-emergency, .schedule .pill.verdict-short { background: var(--bad-bg); color: var(--bad-text); }
.schedule .pill.kind-possible, .schedule .pill.kind-manual, .schedule .pill.verdict-tight { background: var(--warn-bg); color: var(--warn-text); }
.schedule .pill.verdict-ok { background: var(--ok-bg); color: var(--ok-text); }
.schedule .pill.verdict-none { background: var(--surface-2); color: var(--muted); }
.schedule .meta { font-size: 12px; line-height: 1.6; }
.schedule .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin: 0 4px 0 8px; border: 1px solid transparent; }
@media (max-width: 639px) { .schedule .card.next .value { font-size: 28px; } .schedule .hours .h { height: 20px; } }

/* ── Аналітика: /outages, /reports ────────────────────────────────────────── */
.banner.open-outage { border-left-color: var(--warn); background: var(--warn-bg); }
.month-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 20px; }
.month-cards .value { font-size: 26px; }
.charts.one { grid-template-columns: 1fr; margin-top: 16px; }
.chart.calendar { height: clamp(180px, 22vh, 220px); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.events td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.events td.dur { font-weight: 600; }
table.events tr.row-open { border-left-color: var(--warn); background: var(--warn-bg); }
table.events tr.row-nodata td { color: var(--muted); }
table.events .muted, .muted { color: var(--muted); }
.report-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.report-blocks { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 16px; }
@media (min-width: 900px) { .report-blocks { grid-template-columns: 1fr 1fr; } }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 10px 0 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.delta { font-weight: 600; }
.delta.up { color: var(--ok-text); }
.delta.down { color: var(--bad-text); }
.card.load .delta.up { color: var(--warn-text); } .card.load .delta.down { color: var(--ok-text); }
@media (max-width: 639px) {
    table.events.outages, table.events.days { display: table; }
    table.events.outages thead, table.events.days thead { display: table-header-group; }
    table.events.outages tr, table.events.days tr { display: table-row; padding: 0; }
    table.events.outages td, table.events.days td, table.events.outages th, table.events.days th { display: table-cell; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
    table.events.outages td.ts, table.events.days td.ts { display: table-cell; margin: 0; }
    .report-kpis, .outage-kpis { grid-template-columns: 1fr 1fr; }
    .report-kpis .card:first-child, .outage-kpis .card:first-child { grid-column: auto; }
}

/* ── Батарея: /battery ────────────────────────────────────────────────────── */
.battery-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.battery-kpis .value .unit { margin-left: 6px; }
.battery-charts .chart { height: clamp(220px, 30vh, 280px); }
@media (max-width: 639px) { .battery-kpis { grid-template-columns: 1fr 1fr; } .battery-kpis .card:first-child { grid-column: 1 / -1; } }

/* ── Інвертор: /inverter ──────────────────────────────────────────────────── */
.card.tinv { --edge: var(--t-inv); }
.inverter-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.inverter-kpis .value .unit { margin-left: 6px; }
.inverter-charts .chart { height: clamp(220px, 30vh, 280px); }
.inverter-charts .chart-card .sub { margin-top: 8px; font-size: 12px; color: var(--muted); }
table.inverter-days th.num { text-align: right; }
table.inverter-days td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) { .inverter-kpis { grid-template-columns: 1fr 1fr; } .inverter-kpis .card:first-child { grid-column: 1 / -1; } }