/* =========================================================================
   Smart Energy Meter - modular widget styles (v2.4)
   Every widget is wrapped in .sem-w and fully self-contained, so it renders
   correctly whether placed alone in an Elementor column or stacked together.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

.sem-w{
  --sem-blue:#0c63e7; --sem-bg:#f4f7fb; --sem-card:#ffffff; --sem-text:#17233c;
  --sem-muted:#6f7b91; --sem-border:#dfe7f1;
  --sem-l1:#25b747; --sem-l2:#ed3340; --sem-l3:#ffa21f; --ok:#16a34a; --bad:#dc2626;
  --f-num:'Space Grotesk',system-ui,sans-serif; --f:'Inter',system-ui,sans-serif;
  --r:18px; --r-sm:12px; --sh:0 10px 30px rgba(18,42,76,.06); --sh-lg:0 22px 50px -20px rgba(18,42,76,.22);
  color:var(--sem-text); font-family:var(--f); line-height:1.45; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; box-sizing:border-box;
}
.sem-w *,.sem-w *::before,.sem-w *::after{box-sizing:border-box}
.sem-w h2{margin:0}
.sem-num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.sem-w-title{font-size:20px;letter-spacing:-.02em;margin:0 0 14px;font-weight:700}

/* stacking helpers used by [sem_dashboard] */
.sem-stack{display:flex;flex-direction:column;gap:24px}
.sem-two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
@media(max-width:900px){.sem-two-col{grid-template-columns:1fr}}

/* ---- shared card look ---- */
.sem-panel{background:var(--sem-card);border:1px solid var(--sem-border);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}

/* ---- status cards ---- */
.sem-status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sem-st{display:flex;align-items:center;gap:12px;background:var(--sem-card);border:1px solid var(--sem-border);
  border-radius:var(--r-sm);padding:14px 16px;box-shadow:var(--sh)}
.sem-st .sem-dot{width:10px;height:10px;border-radius:50%;background:#c7d0dd;flex:none}
.sem-st.is-online .sem-dot{background:var(--ok);box-shadow:0 0 0 4px rgba(22,163,74,.15)}
.sem-st.is-offline .sem-dot{background:var(--bad);box-shadow:0 0 0 4px rgba(220,38,38,.15)}
.sem-st-body{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.sem-st-body small{font-size:11px;color:var(--sem-muted);text-transform:uppercase;letter-spacing:.08em}
.sem-st-body strong{font-size:15px}
@media(max-width:900px){.sem-status-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sem-status-grid{grid-template-columns:1fr}}

/* ---- KPI summary ---- */
.sem-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.sem-kpi{background:var(--sem-card);border:1px solid var(--sem-border);border-radius:var(--r);padding:20px;
  box-shadow:var(--sh);transition:transform .18s,box-shadow .18s}
.sem-kpi:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.sem-kpi-lab{display:block;font-size:11px;color:var(--sem-muted);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.sem-kpi-val{display:flex;align-items:baseline;gap:5px;margin-top:14px}
.sem-kpi-val .sem-num{font-size:clamp(24px,2.2vw,34px);font-weight:600}
.sem-kpi-val i{font-style:normal;font-size:14px;color:var(--sem-muted)}
.sem-kpi .sem-spark{display:block;margin-top:12px;width:100%;height:30px}
@media(max-width:1080px){.sem-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.sem-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.sem-kpis{grid-template-columns:1fr}}

/* ---- phase cards ---- */
.sem-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sem-pcard{--c:var(--sem-l1);position:relative;overflow:hidden;background:var(--sem-card);border:1px solid var(--sem-border);
  border-radius:var(--r);padding:22px;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s}
.sem-pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.sem-pcard::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--c)}
.sem-p1{--c:var(--sem-l1)} .sem-p2{--c:var(--sem-l2)} .sem-p3{--c:var(--sem-l3)}
.sem-pc-top{display:flex;align-items:center;gap:10px}
.sem-pc-badge{font-family:var(--f-num);font-weight:700;color:#fff;background:var(--c);border-radius:10px;padding:5px 12px;font-size:15px}
.sem-pc-name{font-weight:700;font-size:16px}
.sem-pc-state{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:#eef3fb;color:var(--sem-muted);border:1px solid var(--sem-border)}
.sem-pc-state.is-online{background:#eafaf0;color:var(--ok);border-color:#bfe9cd}
.sem-pc-state.is-offline{background:#fdeaea;color:var(--bad);border-color:#f3c4c4}
.sem-pc-primary{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:18px 0 6px}
.sem-pc-volt{display:flex;align-items:baseline;gap:6px}
.sem-pc-volt .sem-num{font-size:clamp(30px,3vw,40px);font-weight:700;color:var(--c)}
.sem-pc-volt i{font-style:normal;font-size:18px;color:var(--sem-muted)}
.sem-pc-spark{width:96px;height:34px;flex:none}
.sem-pc-sub{display:flex;gap:8px;margin:12px 0 16px;padding:12px 0;border-top:1px dashed var(--sem-border);border-bottom:1px dashed var(--sem-border)}
.sem-pc-sub div{flex:1;text-align:center;min-width:0}
.sem-pc-sub small{display:block;font-size:10px;color:var(--sem-muted);text-transform:uppercase;letter-spacing:.06em}
.sem-pc-sub b{font-family:var(--f-num);font-size:17px;font-weight:600}
.sem-pmet{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.sem-pmet div{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;min-width:0}
.sem-pmet span{color:var(--sem-muted)}
.sem-pmet b{font-family:var(--f-num);font-weight:600}
@media(max-width:900px){.sem-phases{grid-template-columns:1fr}}

/* ---- device status ---- */
.sem-dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sem-dev{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;background:#f7f9fc;
  border:1px solid var(--sem-border);border-radius:var(--r-sm);font-size:14px}
.sem-dev span{color:var(--sem-muted)}
.sem-dev b{font-family:var(--f-num);font-weight:600}
.sem-dev b.is-online{color:var(--ok)} .sem-dev b.is-offline{color:var(--bad)}
@media(max-width:520px){.sem-dev-grid{grid-template-columns:1fr}}

/* ---- relays ---- */
.sem-relays{display:flex;flex-direction:column;gap:10px}
.sem-relay{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#f7f9fc;border:1px solid var(--sem-border);border-radius:var(--r-sm)}
.sem-relay .sem-rdot{width:10px;height:10px;border-radius:50%;background:#c7d0dd;flex:none}
.sem-relay.is-on .sem-rdot{background:var(--ok);box-shadow:0 0 0 4px rgba(22,163,74,.15)}
.sem-relay strong{font-size:14px}
.sem-relay .sem-rstate{margin-left:auto;font-family:var(--f-num);font-weight:600;font-size:13px;color:var(--sem-muted)}
.sem-relay.is-on .sem-rstate{color:var(--ok)}

/* ---- energy summary ---- */
.sem-energy-total{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--sem-border)}
.sem-energy-total .sem-kpi-lab{font-size:11px;color:var(--sem-muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.sem-energy-big{display:flex;align-items:baseline;gap:6px;margin-top:8px}
.sem-energy-big .sem-num{font-size:clamp(30px,3vw,42px);font-weight:700;color:var(--sem-blue)}
.sem-energy-big i{font-style:normal;font-size:16px;color:var(--sem-muted)}
.sem-energy-rows{display:flex;flex-direction:column;gap:10px}
.sem-erow{--c:var(--sem-l1);display:flex;justify-content:space-between;align-items:center;padding:12px 14px 12px 16px;
  background:#f7f9fc;border:1px solid var(--sem-border);border-left:4px solid var(--c);border-radius:var(--r-sm)}
.sem-erow.sem-p1{--c:var(--sem-l1)} .sem-erow.sem-p2{--c:var(--sem-l2)} .sem-erow.sem-p3{--c:var(--sem-l3)}
.sem-erow span{color:var(--sem-muted);font-size:14px}
.sem-erow b{font-family:var(--f-num);font-weight:600}

/* ---- live charts ---- */
.sem-chart-block{margin-top:10px}
.sem-chart-block+.sem-chart-block{margin-top:22px}
.sem-chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.sem-chart-head span{color:var(--sem-muted);font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.sem-chart-head b{font-family:var(--f-num);font-weight:600;font-size:18px}
.sem-chart{width:100%;height:120px;display:block}

/* ---- events ---- */
.sem-events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto}
.sem-event{display:flex;gap:10px;align-items:baseline;font-size:13px;padding:10px 12px;background:#f7f9fc;border:1px solid var(--sem-border);border-radius:var(--r-sm)}
.sem-event time{font-family:var(--f-num);color:var(--sem-muted);font-size:12px;flex:none}
.sem-event.is-good{border-left:3px solid var(--ok)}
.sem-event.is-bad{border-left:3px solid var(--bad)}
.sem-event--muted{color:var(--sem-muted)}

.sem-w a:focus-visible{outline:2px solid var(--sem-blue);outline-offset:2px;border-radius:8px}
@media(prefers-reduced-motion:reduce){.sem-w *{animation:none!important;transition:none!important}}

/* ---- Wi-Fi signal bars ---- */
.sem-wifi-strong{display:inline-flex;align-items:center;gap:8px}
.sem-wifi-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.sem-wifi-bars i{width:3px;border-radius:1px;background:#c7d0dd;display:block}
.sem-wifi-bars i:nth-child(1){height:5px}
.sem-wifi-bars i:nth-child(2){height:8px}
.sem-wifi-bars i:nth-child(3){height:11px}
.sem-wifi-bars i:nth-child(4){height:14px}
.sem-wifi-bars[data-level="1"] i:nth-child(-n+1),
.sem-wifi-bars[data-level="2"] i:nth-child(-n+2),
.sem-wifi-bars[data-level="3"] i:nth-child(-n+3),
.sem-wifi-bars[data-level="4"] i:nth-child(-n+4){background:var(--ok)}
.sem-wifi-bars[data-level="1"] i:nth-child(-n+2),
.sem-wifi-bars[data-level="2"] i:nth-child(-n+2){background:#f5a524}
.sem-wifi-bars[data-level="1"] i:nth-child(1){background:#dc2626}

/* ---- refined phase sub-row (full labels, balanced) ---- */
.sem-pc-sub small{font-size:10px;letter-spacing:.02em;line-height:1.2;min-height:12px}
.sem-pc-sub b{font-size:16px}
.sem-pmet{gap:12px 18px}
.sem-pmet div{flex-direction:column;align-items:flex-start;gap:2px}
.sem-pmet span{font-size:11px;color:var(--sem-muted);text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;line-height:1.2}
.sem-pmet b{font-size:15px;white-space:nowrap}

/* ---- wifi "no signal" slashed state ---- */
.sem-wifi-bars[data-level="off"]{position:relative}
.sem-wifi-bars[data-level="off"] i{background:#c7d0dd}
.sem-wifi-bars[data-level="off"]::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:2px;
  background:var(--bad);transform:rotate(-32deg);border-radius:2px}
.sem-st.is-offline .sem-wifi-bars i{opacity:.6}

/* ---- live charts: two columns on desktop, stacked on mobile ---- */
@media(min-width:820px){
  .sem-live-charts{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .sem-live-charts .sem-w-title{grid-column:1 / -1;margin-bottom:0}
  .sem-live-charts .sem-chart-block{margin-top:0}
  .sem-live-charts .sem-chart-block+.sem-chart-block{margin-top:0}
}