/* Component Styles */

/* Tiles */
.tile{background:rgba(16,22,32,0.7);border-radius:10px;border:1px solid var(--edge);padding:12px;backdrop-filter:blur(3px)}
.kpi{font-size:34px;font-weight:700;margin-top:6px;display:flex;align-items:center;gap:10px}
.label{opacity:.8}
.small{font-size:12px;color:var(--muted)}

/* Badges */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--edge);font-size:12px;margin-left:8px}
.badge.green{background:#0d1a12;color:#6cffb2}
.badge.yellow{background:#1a180d;color:#ffe17a}
.badge.red{background:#1a0d0d;color:#ff8a8a}
.badge.blue{background:#0d1420;color:#9fc9ff}
.badge.orange{background:#1a110c;color:#ffc0ab}

/* Progress Bars */
.bar{height:14px;background:var(--bar);border-radius:7px;margin-top:8px;border:1px solid var(--barEdge);position:relative;overflow:visible}
.fill{height:100%;background:linear-gradient(90deg,#3ad29f,#58f);width:0%;border-radius:7px;transition:width 0.5s ease}

/* Power Pills */
.powerrow{margin-top:20px}
.pill{padding:4px 8px;border-radius:8px;border:1px solid var(--edge);font-family:monospace}
.pv{background:rgba(39,196,107,.15);border-color:rgba(39,196,107,.4)}
.bin{background:rgba(112,227,166,.15);border-color:rgba(112,227,166,.4)}
.bout{background:rgba(255,216,102,.15);border-color:rgba(255,216,102,.4)}
.house{background:rgba(58,160,255,.12); border-color:rgba(58,160,255,.4)}
.power-current{font-size:22px;font-weight:700}

/* SOC Bar with Tails */
.slbar{height:16px;background:#0e1622;border:1px solid #1b293c;border-radius:10px;position:relative;overflow:visible;margin-top:8px}
.slfill{height:100%;background:#2ecf7e;width:0%;border-radius:10px;transition:width 0.5s ease}
.sltail{position:absolute;top:0;bottom:0;width:2px;background:#ffd866}
.sltail::after{content:'';position:absolute;top:-6px;left:-4px;width:10px;height:10px;border-radius:50%;background:#ffd866}
.sltail.min{background:#8aa2c6}
.sltail.min::after{background:#8aa2c6}
.tail-label{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(234,242,255,0.5);background:rgba(16,22,32,0.5);padding:2px 6px;border-radius:4px;border:1px solid #1c2533;white-space:nowrap;pointer-events:none;z-index:10}
.sltail.min .tail-label{top:auto;bottom:-22px}
#soc_min_tail .tail-label{top:-22px;bottom:auto}
.sltailtime{position:absolute;top:-18px;transform:translateX(-50%);font-size:10px;color:var(--muted);opacity:0.5}
.slmeta{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:12px;color:var(--muted)}

.lastfull{position:absolute;right:0;top:-18px;font-size:12px;color:var(--muted)}

/* Water Heater Badge */
.whopen{color:var(--blue);border-color:#2a3d5c}
.whclosed{color:var(--red);border-color:#5c2a2a}
.whbadge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--edge);font-size:12px;margin-left:6px}

/* Misc */
.dangerzone{position:absolute;top:0;bottom:0;right:0;pointer-events:none;display:none}
.bottom-strip{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}