body{font-family:Arial,Helvetica,sans-serif;margin:0;padding:0;overflow-y:visible;background-color:white;}
.chart-wrap{position:relative;max-width:360px;margin:0 auto;}
canvas{width:100%;height:300px;display:block;max-height:300px;}
.controls-row{position:absolute;top:4px;display:flex;gap:6px;align-items:center;z-index:2;}
.controls-left{left:34px;}
.controls-right{right:4px;}
.controls-middle{left:50%;transform:translateX(-50%);font-weight:bold;font-size:12px;color:#505050;margin-top:4px;}
.controls-row button{border:1px solid #ccc;background:#f7f7f7;padding:2px 4px;border-radius:4px;cursor:pointer;height:20px;}
.controls-row input[type=date]{
    border:1px solid #ccc;
    background:#f7f7f7;
    padding:2px 4px;
    border-radius:4px;
    cursor:pointer;
    width:16px;
    height:16px;
    -webkit-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
}
.controls-row input[type=date]::-webkit-datetime-edit{display:none;}
.controls-row input[type=date]::-webkit-inner-spin-button{display:none;}
.controls-row input[type=date]::-webkit-clear-button{display:none;}
.controls-row input[type=date]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer;}
.controls-row input[type=date]{color:transparent;text-shadow:0 0 0 transparent;}
.controls-row button:disabled{opacity:0.5;cursor:default;}

.page-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,0.9);z-index:5;transition:opacity 0.2s ease;}
.page-loader.is-hidden{opacity:0;pointer-events:none;}
.loader-spinner{width:26px;height:26px;border:3px solid #d1d5db;border-top-color:#4b5563;border-radius:50%;animation:spin 0.8s linear infinite;}
.loader-text{font-size:12px;color:#4b5563;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Electricity status bar chart */
.elec-chart{height:160px;padding:8px 6px 10px;display:flex;flex-direction:column;gap:6px;}
.elec-label{font-size:12px;font-weight:600;color:#6b7280;line-height:1;padding-left:4px;}
.elec-plot{height:120px;display:flex;flex-direction:column;justify-content:space-between;position:relative;padding-top:24px;}
.elec-bar{height:28px;border-radius:6px;background:#e5e7eb;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);}
.elec-bar-track{height:100%;display:flex;}
.elec-seg{height:100%;}
.elec-seg.on{background:linear-gradient(180deg,#b8e17a 0%,#8cc14a 100%);}
.elec-seg.off{background:linear-gradient(180deg,#f17676 0%,#d64545 100%);}
.elec-axis{position:relative;flex:1;width:100%;margin-left:auto;margin-right:auto;}
.elec-tick{position:absolute;bottom:34px;transform:translateX(-50%);text-align:center;font-size:11px;color:#6b7280;white-space:nowrap;width:0;height:0;}
.elec-tick-text{position:absolute;left:50%;bottom:0;transform:translateX(-50%) rotate(-90deg);transform-origin:center;font-weight:400;line-height:1;white-space:nowrap;}
.elec-grid-line{position:absolute;top:-28px;height:34px;width:1px;background:#bbc0c5;transform:translateX(-50%);pointer-events:none;}
.elec-tooltip{position:absolute;top:-8px;padding:6px 8px;border-radius:4px;background:#1f1f1f;color:#fff;font-size:11px;line-height:1.2;pointer-events:none;white-space:nowrap;transform:translateX(-50%);opacity:0;transition:opacity 0.1s ease;z-index:999;box-shadow:0 2px 6px rgba(0,0,0,0.35);}
.elec-tooltip::after{content:'';position:absolute;left:calc(50% + var(--arrow-offset,0px));bottom:-6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #1f1f1f;transform:translateX(-50%);}
.elec-tooltip-time{display:block;font-weight:600;}
.elec-tooltip-status{display:block;}