/* solarlog.cornelcaba.com — Sentinel-style PV monitoring. No external deps. */
:root{
  --bg:#1e1e1e; --card:#252526; --surface:#2d2d2d; --bar:#333; --line:#3c3c3c;
  --text:#e8e8e8; --muted:#a6a6a6;
  --prod:#3ecf8e;      /* production green */
  --cons:#f2a85b;      /* consumption amber */
  --feed:#5aa9ff;      /* feed-in blue */
  --accent:#f5a623;    /* solar */
  --bad:#ff6b6b; --warn:#f5a623; --ok:#3ecf8e;
  --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 8px 24px rgba(0,0,0,.45);
  --ring:0 0 0 3px rgba(245,166,35,.35);
  --r:14px; --r-sm:10px;
  --ink:#121316;       /* fixed dark text on bright chips */
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f5f7; --card:#ffffff; --surface:#f1f2f4; --bar:#fff; --line:#e3e6ea;
  --text:#1a1d21; --muted:#5b6672;
  --e1:0 1px 2px rgba(16,24,40,.06); --e2:0 10px 30px rgba(16,24,40,.12);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text); min-height:100dvh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
@media (pointer:coarse){ input,select,textarea{ font-size:16px } }
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.shell{display:flex;flex-direction:column;min-height:100dvh}

/* ---- header ---- */
.top{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 20px;background:var(--bar);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:30px;height:30px;flex:none;color:var(--accent);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.brand-tx{display:flex;flex-direction:column;min-width:0}
.brand-tx strong{font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-tx span{font-size:12px}
.tabs{display:flex;gap:4px;margin-left:8px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  height:44px;display:flex;align-items:center;padding:0 16px;border-radius:var(--r-sm);
  color:var(--muted);font-weight:600;white-space:nowrap;cursor:pointer;
}
.tab:hover{color:var(--text);background:var(--surface)}
.tab.active{color:var(--text);background:var(--surface);box-shadow:inset 0 -2px 0 var(--accent)}
.tab:focus-visible{outline:none;box-shadow:var(--ring)}
.top-actions{display:flex;align-items:center;gap:10px}

.pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;
  font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--line)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.pill-ok{color:var(--ok)} .pill-ok .dot{background:var(--ok);box-shadow:0 0 0 3px rgba(62,207,142,.18)}
.pill-bad{color:var(--bad)} .pill-bad .dot{background:var(--bad);box-shadow:0 0 0 3px rgba(255,107,107,.18)}
.pill-muted{color:var(--muted)}

.icon-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);color:var(--text);cursor:pointer}
.icon-btn:hover{background:var(--card)}
.icon-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i-moon{display:none}
:root[data-theme="light"] .i-sun{display:none}
:root[data-theme="light"] .i-moon{display:block}

.lang{position:relative}
.lang-btn{width:44px;height:44px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);
  font-size:20px;line-height:1;cursor:pointer}
.lang-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.lang-menu{position:absolute;right:0;top:50px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--e2);padding:6px;display:flex;flex-direction:column;gap:2px;z-index:30}
.lang-menu button{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border:0;background:none;
  color:var(--text);font-size:15px;border-radius:8px;cursor:pointer;white-space:nowrap}
.lang-menu button:hover{background:var(--surface)}

/* ---- main ---- */
.main{flex:1;padding:20px;max-width:1240px;width:100%;margin:0 auto}
.banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);margin-bottom:18px;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--e1)}
.banner svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.banner.bad{border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.08);color:var(--bad)}
.banner.warn{border-color:rgba(245,166,35,.5);background:rgba(245,166,35,.08);color:var(--warn)}
.banner.ok{border-color:rgba(62,207,142,.4);background:rgba(62,207,142,.07);color:var(--ok)}
.banner b{color:var(--text)}

.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--e1);
  display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi .k-head{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600}
.kpi .k-head svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kpi .k-val{font-size:30px;font-weight:700;line-height:1.05;letter-spacing:-.5px;overflow-wrap:anywhere}
.kpi .k-val small{font-size:15px;font-weight:600;color:var(--muted);margin-left:4px}
.kpi.prod .k-val{color:var(--prod)} .kpi.prod .k-head{color:var(--prod)}
.kpi.cons .k-val{color:var(--cons)} .kpi.cons .k-head{color:var(--cons)}
.kpi.feed .k-val{color:var(--feed)} .kpi.feed .k-head{color:var(--feed)}
.kpi .k-sub{font-size:12px;color:var(--muted)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--e1);padding:18px;margin-bottom:18px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card-h h2{font-size:16px;margin:0}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{height:34px;padding:0 14px;border:0;background:none;color:var(--muted);font-weight:600;font-size:13px;border-radius:999px;cursor:pointer}
.seg button.active{background:var(--card);color:var(--text);box-shadow:var(--e1)}
.seg button:focus-visible{outline:none;box-shadow:var(--ring)}

.chart-wrap{position:relative;width:100%}
svg.chart{width:100%;height:280px;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--muted);font-size:11px}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}

table{width:100%;border-collapse:collapse}
.tscroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
td .st{display:inline-flex;align-items:center;gap:7px;font-weight:600}
td .st .dot{width:8px;height:8px;border-radius:50%}
.meter{height:8px;border-radius:999px;background:var(--surface);overflow:hidden;min-width:90px}
.meter>i{display:block;height:100%;background:var(--accent)}

.empty{padding:40px 16px;text-align:center;color:var(--muted)}
.skeleton{background:linear-gradient(90deg,var(--surface),var(--card),var(--surface));
  background-size:200% 100%;animation:sh 1.3s infinite;border-radius:8px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}

.alerts{display:flex;flex-direction:column;gap:10px}
.alert{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line)}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.alert.bad{color:var(--bad)} .alert.warn{color:var(--warn)} .alert.ok{color:var(--ok)}
.alert .a-tx{min-width:0}
.alert .a-tx b{color:var(--text);display:block}
.alert .a-tx span{font-size:13px;color:var(--muted)}

@media (max-width:860px){
  .top{gap:10px;padding:10px 14px}
  .tabs{order:3;width:100%;margin-left:0}
  .main{padding:14px}
  svg.chart{height:230px}
}

.dl{display:flex;flex-direction:column;gap:2px}
.dl-row{display:flex;justify-content:space-between;gap:16px;padding:11px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dl-row:last-child{border-bottom:0}
.dl-k{color:var(--muted);font-size:13px}
.dl-v{font-weight:600;text-align:right;overflow-wrap:anywhere;min-width:0}