/* ═══════════════════════════════════════════════
   SHELLY PRO EM — Monitor Energético
   ═══════════════════════════════════════════════ */

:root, [data-theme='light'] {
  --bg:       #f0f4f8;
  --surface:  #ffffff;
  --surf2:    #f5f8fb;
  --surfoff:  #e8edf2;
  --border:   #d0d9e2;
  --divider:  #dce4ec;
  --text:     #0f1c2e;
  --muted:    #5a6a7a;
  --faint:    #9aacba;

  --c-primary: #1a7fd4;
  --c-primary-h: rgba(26,127,212,0.12);
  --c-ok:    #1a9e3f;
  --c-ok-bg: rgba(26,158,63,0.1);
  --c-warn:  #b36b00;
  --c-err:   #c0392b;
  --c-err-bg: rgba(192,57,43,0.1);

  /* Canal 0 = azul, Canal 1 = verde */
  --ch0:        #2563eb;
  --ch0-bg:     rgba(37,99,235,0.10);
  --ch1:        #16a34a;
  --ch1-bg:     rgba(22,163,74,0.10);
  --ch-total:   #d97706;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --sh-sm: 0 1px 3px rgba(0,0,0,0.07);
  --sh-md: 0 4px 16px rgba(0,0,0,0.09);
  --t: 150ms cubic-bezier(0.16,1,0.3,1);
  --sidebar-w: 230px;
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

[data-theme='dark'] {
  --bg:       #0d1117;
  --surface:  #161b22;
  --surf2:    #1c2128;
  --surfoff:  #21262d;
  --border:   #30363d;
  --divider:  #21262d;
  --text:     #e6edf3;
  --muted:    #8b949e;
  --faint:    #484f58;
  --c-primary: #58a6ff;
  --c-primary-h: rgba(88,166,255,0.13);
  --c-ok:    #3fb950;
  --c-ok-bg: rgba(63,185,80,0.12);
  --c-warn:  #d29922;
  --c-err:   #f85149;
  --c-err-bg: rgba(248,81,73,0.12);
  --ch0:        #58a6ff;
  --ch0-bg:     rgba(88,166,255,0.12);
  --ch1:        #3fb950;
  --ch1-bg:     rgba(63,185,80,0.12);
  --ch-total:   #f0883e;
  --sh-sm: 0 1px 3px rgba(0,0,0,0.25);
  --sh-md: 0 4px 16px rgba(0,0,0,0.35);
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    --bg:#0d1117; --surface:#161b22; --surf2:#1c2128; --surfoff:#21262d;
    --border:#30363d; --divider:#21262d; --text:#e6edf3; --muted:#8b949e; --faint:#484f58;
    --c-primary:#58a6ff; --c-primary-h:rgba(88,166,255,0.13);
    --c-ok:#3fb950; --c-ok-bg:rgba(63,185,80,0.12);
    --c-warn:#d29922; --c-err:#f85149; --c-err-bg:rgba(248,81,73,0.12);
    --ch0:#58a6ff; --ch0-bg:rgba(88,166,255,0.12);
    --ch1:#3fb950; --ch1-bg:rgba(63,185,80,0.12);
    --ch-total:#f0883e;
    --sh-sm:0 1px 3px rgba(0,0,0,0.25); --sh-md:0 4px 16px rgba(0,0,0,0.35);
  }
}

/* BASE */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body { font-family:var(--font); font-size:14px; line-height:1.5; color:var(--text); background:var(--bg); }
img, svg { display:block; max-width:100%; }
button { cursor:pointer; font:inherit; color:inherit; background:none; border:none; }
table  { border-collapse:collapse; width:100%; }

/* LAYOUT */
#app { display:grid; grid-template-columns:var(--sidebar-w) 1fr; height:100dvh; }

/* SIDEBAR */
.sidebar {
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
}
.sidebar-brand { padding:18px 14px 14px; border-bottom:1px solid var(--divider); display:flex; align-items:center; gap:10px; }
.brand-icon { width:34px; height:34px; background:var(--c-primary); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-name { font-weight:700; font-size:13px; }
.brand-sub  { font-size:11px; color:var(--muted); margin-top:1px; }

.sidebar-nav { padding:10px 8px; }
.nav-label { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:0 8px; margin:10px 0 4px; }
.nav-item { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:var(--r-sm); font-size:13px; font-weight:500; color:var(--muted); width:100%; text-align:left; transition:background var(--t),color var(--t); }
.nav-item:hover  { background:var(--surfoff); color:var(--text); }
.nav-item.active { background:var(--c-primary-h); color:var(--c-primary); }
.nav-icon { width:15px; height:15px; flex-shrink:0; }

.sidebar-range { padding:0 8px 8px; }
.range-btns { display:flex; gap:4px; flex-wrap:wrap; padding:0 8px; }
.range-btn { padding:4px 8px; border-radius:var(--r-sm); font-size:11px; font-weight:500; color:var(--muted); border:1px solid var(--border); background:none; transition:all var(--t); cursor:pointer; }
.range-btn:hover  { border-color:var(--c-primary); color:var(--c-primary); }
.range-btn.active { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }

.sidebar-footer { padding:12px 14px; border-top:1px solid var(--divider); margin-top:auto; }
.device-info { background:var(--surfoff); border-radius:var(--r-sm); padding:10px 12px; }
.di-label { font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; }
.di-id    { font-family:var(--mono); font-size:11px; color:var(--muted); word-break:break-all; margin-bottom:6px; }
.di-row   { margin-bottom:3px; color:var(--muted); }
.di-status { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); margin-top:6px; }
.dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dot.online  { background:var(--c-ok); box-shadow:0 0 0 3px var(--c-ok-bg); animation:pulse 2s infinite; }
.dot.offline { background:var(--c-err); }
.dot.loading { background:var(--c-warn); animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* MAIN */
.main-wrap { display:flex; flex-direction:column; overflow:hidden; }

/* TOPBAR */
.topbar { background:var(--surface); border-bottom:1px solid var(--border); padding:11px 22px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.topbar-title { font-size:15px; font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.refresh-label { font-size:12px; color:var(--muted); min-width:22px; }
.btn-icon { width:32px; height:32px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:background var(--t),color var(--t); }
.btn-icon:hover { background:var(--surfoff); color:var(--text); }
.btn-icon.spinning svg { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.ring { width:26px; height:26px; flex-shrink:0; }
.ring circle { fill:none; stroke-width:2.5; stroke-linecap:round; transform-origin:center; transform:rotate(-90deg); transition:stroke-dashoffset 1s linear; }
.ring-bg { stroke:var(--border); }
.ring-fg { stroke:var(--c-primary); }

/* CONTENT */
.content { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:18px 22px; }

/* ALERTS */
.alert { border-radius:var(--r-md); padding:11px 14px; font-size:13px; display:flex; align-items:flex-start; gap:8px; margin-bottom:14px; }
.alert-error { background:var(--c-err-bg); border:1px solid var(--c-err); color:var(--c-err); }

/* POWER HERO */
.power-hero {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px 22px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.hero-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.hero-value { font-size:clamp(36px,5vw,56px); font-weight:700; font-variant-numeric:tabular-nums; line-height:1; color:var(--ch-total); }
.hero-unit  { font-size:20px; font-weight:500; color:var(--muted); margin-left:4px; }
.hero-channels { display:flex; gap:24px; }
.hero-ch { text-align:center; }
.hero-ch-label { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:4px; }
.hero-ch-val { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }

/* CHANNEL HEADER */
.ch-header { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ch-color); margin:16px 0 8px; }
.ch-dot { width:8px; height:8px; border-radius:50%; background:var(--ch-color); flex-shrink:0; }

/* KPI GRID */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; margin-bottom:10px; }
.kpi-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:13px; position:relative; overflow:hidden; transition:box-shadow var(--t); }
.kpi-card:hover { box-shadow:var(--sh-md); }
.kpi-accent { position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--r-md) var(--r-md) 0 0; }
.kpi-label { font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.kpi-val   { font-size:clamp(18px,2.2vw,26px); font-weight:700; font-variant-numeric:tabular-nums lining-nums; line-height:1; }
.kpi-unit  { font-size:12px; font-weight:500; color:var(--muted); margin-left:2px; }
.kpi-sub   { font-size:11px; color:var(--muted); margin-top:5px; }

/* SKELETON */
.skel { background:linear-gradient(90deg,var(--surfoff) 25%,var(--divider) 50%,var(--surfoff) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:4px; }
.skel-val { height:28px; width:80px; margin-bottom:5px; }
@keyframes shimmer { to { background-position:-200% 0; } }

/* CHART GRID */
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.chart-full  { grid-column:1/-1; }
@media (max-width:860px) { .chart-grid { grid-template-columns:1fr; } }
.chart-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:14px; }
.chart-hdr  { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.chart-title{ font-size:13px; font-weight:600; }
.chart-sub  { font-size:11px; color:var(--muted); }
.chart-wrap { position:relative; height:170px; }
.chart-wrap.tall { height:210px; }

/* ENERGY SUMMARY */
.energy-summary { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 18px; margin-bottom:16px; }
.es-title { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:12px; }
.es-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.es-item  { }
.es-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; color:var(--muted); }
.es-val   { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.es-unit  { font-size:13px; font-weight:500; color:var(--muted); }
.es-ret   { font-size:11px; color:var(--muted); margin-top:2px; }
.es-total .es-val { color:var(--ch-total); }

/* TABLE */
.table-card  { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.table-hdr   { padding:12px 16px; border-bottom:1px solid var(--divider); display:flex; align-items:center; justify-content:space-between; }
.table-title { font-size:13px; font-weight:600; }
.table-count { font-size:11px; color:var(--muted); }
.table-scroll{ overflow-x:auto; max-height:62vh; overflow-y:auto; }

.data-table { font-size:12px; font-variant-numeric:tabular-nums lining-nums; }
.data-table th { font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); padding:8px 10px; text-align:left; background:var(--surf2); border-bottom:1px solid var(--divider); position:sticky; top:0; z-index:1; white-space:nowrap; }
.data-table td { padding:7px 10px; border-bottom:1px solid var(--divider); white-space:nowrap; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--surfoff); }

.mono    { font-family:var(--mono); }
.muted   { color:var(--muted); }
.ch0-val { color:var(--ch0); font-weight:600; }
.ch1-val { color:var(--ch1); font-weight:600; }
.total-val { color:var(--ch-total); font-weight:600; }
.c-ok  { color:var(--c-ok); }
.c-err { color:var(--c-err); }

/* LOADING */
.loading-state { display:flex; align-items:center; justify-content:center; min-height:200px; color:var(--muted); font-size:13px; gap:8px; }
.spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--c-primary); border-radius:50%; animation:spin .7s linear infinite; }
.empty-cell { text-align:center; padding:24px; color:var(--muted); }

/* RESPONSIVE */
@media (max-width:660px) {
  :root { --sidebar-w:0px; }
  #app { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .content { padding:12px; }
  .topbar  { padding:10px 12px; }
  .hero-channels { display:none; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .es-grid  { grid-template-columns:1fr; }
}