GNU nano 8.4                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         style.css
:root { --ink:#173b35; --muted:#71867e; --line:#deebe5; --cream:#f6fbf8; --yellow:#e7b331; --blue:#338d78; --green:#19a16c; --purple:#5c9c82; --sidebar:#0d302b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:#f4f8f6; font-family:Manrope,Arial,sans-serif; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:252px; flex:none; background:linear-gradient(180deg,#0b3029,#12473b); color:#d6e8df; padding:32px 20px 22px; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; }
.brand { color:#fff; font-size:21px; font-weight:800; letter-spacing:-.8px; text-decoration:none; display:flex; align-items:center; gap:10px; padding:0 11px 39px; }.brand>span:last-child span{color:#f8bd30}.brand-mark{width:24px;height:24px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:skewY(-9deg)}.brand-mark i{background:#f7bd30;border-radius:2px}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:#ffe29a}
.institution-logos{display:flex;align-items:center;gap:8px;flex:none}.institution-logos img{width:31px;height:31px;object-fit:contain}.login-logos{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px}.login-logos img{width:62px;height:62px;object-fit:contain}.login-brand{padding:0;justify-content:center;font-size:16px;line-height:1.25}.login-brand .brand-mark{width:22px;height:22px}.login-card h1{margin-top:25px}
.main-nav { display:grid; gap:7px; }.nav-item { display:flex; gap:14px; align-items:center; padding:12px 13px; border-radius:8px; color:#aebbd1; text-decoration:none; font-size:13px; font-weight:600; }.nav-item:hover,.nav-item.active{background:#253554;color:white}.nav-item.active{box-shadow:inset 3px 0 #f7bc31}.nav-icon{font-size:19px;width:17px;text-align:center;font-weight:400}
.plant-card{margin-top:auto;background:#22314f;border:1px solid #304260;border-radius:10px;padding:15px 14px 12px;display:flex;flex-direction:column;gap:4px}.mini-label,.eyebrow{font-family:'DM Mono',monospace;letter-spacing:.7px;font-size:10px;font-weight:500;color:#8b9ab4}.plant-card strong{font-size:12px;color:#fff;margin-top:3px}.plant-card>span:not(.mini-label){font-size:10px;color:#a4b2ca}.switch-plant{color:#d5ddeb;background:none;border:0;border-top:1px solid #344665;margin:8px 0 0;padding:9px 0 0;text-align:left;font:600 10px Manrope;cursor:pointer}.switch-plant b{float:right;font-size:13px}.sidebar-footer{font-size:10px;color:#718099;margin:19px 9px 0}
.main-content{width:calc(100% - 252px);margin-left:252px;max-width:1560px;padding:32px 46px 50px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.topbar h1{font-size:23px;letter-spacing:-.8px;margin:6px 0 0}.topbar h1 span{font-size:18px}.eyebrow{margin:0}.topbar-actions{display:flex;align-items:center;gap:18px}.icon-button,.profile,.menu-button,.more-button{border:0;background:none;cursor:pointer}.icon-button{font-size:24px;color:#738098;position:relative}.icon-button em{position:absolute;background:#eb4d5c;border:2px solid #f7f9fc;width:9px;height:9px;border-radius:50%;right:1px;top:1px}.profile{display:flex;gap:9px;align-items:center;color:#768197}.profile span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e7cbad;color:#704a32;font-size:11px;font-weight:800}.menu-button{display:none}
.hero-status{min-height:176px;border-radius:13px;padding:28px 36px;background:#fff6dc;display:flex;justify-content:space-between;overflow:hidden;position:relative;margin-bottom:21px}.status-copy{z-index:1}.live-badge{display:inline-flex;gap:7px;align-items:center;border-radius:20px;background:#f8e6af;color:#9b6a00;font:500 10px 'DM Mono';padding:5px 9px}.live-badge span{width:6px;height:6px;border-radius:50%;background:#e9a511;box-shadow:0 0 0 3px #f6db91}.hero-status h2{font-size:20px;margin:13px 0 5px;letter-spacing:-.5px}.hero-status p{font-size:12px;color:#66738a;margin:0}.hero-status p strong{color:#19865f}.updated{font:10px 'DM Mono';color:#8c94a2;margin-top:19px}.updated span{font-size:15px;color:#9ba4ad;vertical-align:-1px}.sun-illustration{width:260px;position:relative}.sun{position:absolute;right:66px;top:32px;width:52px;height:52px;border-radius:50%;background:#f6bc35;box-shadow:0 0 0 17px #fae7a9}.sun-rays{position:absolute;right:50px;top:16px;width:84px;height:84px;border:2px dashed #f1c95e;border-radius:50%;opacity:.8}.solar-panel{position:absolute;right:6px;bottom:-14px;width:178px;height:79px;background:repeating-linear-gradient(90deg,#345274 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,#345274 0 1px,#47779a 1px 25px);border:4px solid #2f5576;transform:perspective(190px) rotateX(43deg) rotateZ(-8deg);box-shadow:0 9px 0 #d9aa3d}.solar-panel span{display:none}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:20px}.metric-card,.panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 6px rgba(27,41,66,.015)}.metric-card{padding:19px 19px 15px;min-height:164px}.metric-card.highlight{background:#fffdf8;border-color:#f2e5c3}.metric-heading{display:flex;justify-content:space-between;align-items:center;color:#6e7a90;font-size:11px;font-weight:600}.metric-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;font-size:16px;font-weight:bold}.yellow{background:#fff1c8;color:#dc9811}.blue{background:#e7f0ff;color:#3a7ee8}.green{background:#e4f7f0;color:#20a87b}.purple{background:#f0eafa;color:#936bdd}.metric-value{margin:15px 0 6px;letter-spacing:-1px}.metric-value strong{font-size:26px}.metric-value span{font:500 12px 'DM Mono';color:#69758c;letter-spacing:0}.metric-card p{font-size:10px;margin:0}.positive{color:#1b9a6d!important;font-weight:700}.positive span{color:#8c96a7;font-weight:500}.neutral{color:#8490a4}.tiny-bars{height:26px;display:flex;align-items:end;gap:4px;margin-top:9px}.tiny-bars i{flex:1;display:block;background:#f7cf70;border-radius:2px 2px 0 0}.tiny-bars i:nth-child(1){height:20%}.tiny-bars i:nth-child(2){height:31%}.tiny-bars i:nth-child(3){height:38%}.tiny-bars i:nth-child(4){height:50%}.tiny-bars i:nth-child(5){height:63%}.tiny-bars i:nth-child(6){height:72%}.tiny-bars i:nth-child(7){height:89%}.tiny-bars i:nth-child(8){height:100%;background:#f2b634}.tiny-bars i:nth-child(9){height:92%}.tiny-bars i:nth-child(10){height:70%}.tiny-bars i:nth-child(11){height:48%}.tiny-bars i:nth-child(12){height:29%}.progre>
.content-grid{display:grid;grid-template-columns:minmax(0,1.52fr) minmax(320px,.85fr);gap:20px;margin-bottom:20px}.panel{padding:21px}.panel-header{display:flex;justify-content:space-between;align-items:flex-start}.panel h3{font-size:14px;margin:0 0 4px;letter-spacing:-.2px}.panel-header p,.panel p{font-size:10px;color:#8792a4;margin:0}.chart-tabs{display:flex;background:#f4f6f9;border-radius:6px;padding:2px}.chart-tabs button{border:0;border-radius:4px;padding:5px 9px;background:transparent;color:#8190a3;font:600 9px Manrope;cursor:pointer}.chart-tabs .active{color:#36445a;background:#fff;box-shadow:0 1px 3px #dfe4ec}.chart-summary{margin:22px 0 5px;display:flex;align-items:center;gap:9px}.chart-summary strong{font-size:21px;letter-spacing:-.7px}.chart-summary span{font-size:10px}.chart-wrap{height:231px;position:relative;padding-left:31px}.y-axis{left:0;top:10px;bottom:45px;position:absolute;display:flex;flex-direction:column;justify-content:space-between;font:9px 'DM Mono';color:#99a4b4}.chart-wrap svg{display:block;height:196px;width:100%;overflow:visible}.grid-lines line{stroke:#e9edf3;stroke-dasharray:3 3}.chart-line{fill:none;stroke:#efb52d;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-wrap circle{fill:#efb52d;stroke:#fff;stroke-width:3}.x-axis{display:flex;justify-content:space-between;padding:6px 0 0;font:9px 'DM Mono';color:#99a4b4}
.devices{margin-top:15px}.device{display:flex;align-items:center;gap:10px;border-bottom:1px solid #edf0f5;padding:11px 0}.device-icon{flex:none;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-size:15px}.inverter{background:#fff2cf;color:#da9e19}.panel-icon{background:#e5f0ff;color:#4785e9}.battery{background:#e3f7ef;color:#1ea878}.device div{min-width:0;display:grid;gap:2px}.device strong{font-size:10px}.device small{font:9px 'DM Mono';color:#8a95a7}.online{margin-left:auto;color:#1c9b70;font:9px 'DM Mono';white-space:nowrap}.view-all{display:block;text-align:center;color:#2f78e4;font-size:10px;font-weight:700;text-decoration:none;padding-top:16px}.view-all span{font-size:14px;margin-left:3px}.more-button{font-weight:800;color:#8591a4;letter-spacing:2px;padding:0}
.bottom-grid{display:grid;grid-template-columns:1fr 1fr 1.06fr;gap:20px}.bottom-grid .panel{min-height:112px;display:flex;align-items:center;justify-content:space-between;padding:19px 20px}.weather-panel{background:#eff8ff;border-color:#dceefa}.weather-panel h3,.revenue-panel h3{font-size:25px;letter-spacing:-1px;margin:7px 0 6px}.weather-panel h3 span{font-size:12px;letter-spacing:0;margin-left:3px}.weather-panel p strong{color:#546276}.weather-sun{font-size:49px;color:#f2b533;filter:drop-shadow(0 0 7px #f7d87d)}.revenue-panel{background:#f8f5ff;border-color:#e9e2fb}.revenue-panel h3{color:#7957c8}.revenue-panel h3 span{font-size:19px}.revenue-icon{font-size:34px;color:#a585e2}.alert-panel{background:#f0fbf6;border-color:#d9f3e7;justify-content:flex-start!important;gap:13px}.alert-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:#d1f1e2;color:#209d72;font-size:19px}.alert-panel h3{color:#207e61}.alert-panel p{font-size:10px}
@media (max-width:1100px){.main-content{padding:28px}.metrics-grid{grid-template-columns:repeat(2,1fr)}.bottom-grid{grid-template-columns:1fr 1fr}.alert-panel{grid-column:span 2}.sidebar{width:222px}.main-content{width:calc(100% - 222px);margin-left:222px}}
@media (max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s;z-index:5;width:252px}.sidebar.open{transform:none}.main-content{width:100%;margin:0;padding:21px 15px 30px}.menu-button{display:block;font-size:19px;margin-right:10px}.topbar{justify-content:flex-start}.topbar-actions{margin-left:auto}.topbar h1{font-size:18px}.hero-status{padding:23px;min-height:190px}.hero-status h2{font-size:17px;max-width:210px}.sun-illustration{position:absolute;opacity:.45;right:-31px;bottom:-17px}.metrics-grid,.content-grid,.bottom-grid{grid-template-columns:1fr}.metric-card{min-height:145px}.chart-panel{overflow:hidden}.content-grid{gap:15px}.alert-panel{grid-column:auto}.bottom-grid{gap:15px}.chart-wrap{height:220px}.chart-tabs button{padding:5px 6px}.topbar .eyebrow{font-size:8px}.profile b{display:none}}

/* Tema EcoWatt: hijau profesional untuk PLTS SMPN 282 Jakarta */
.brand>span:last-child span{color:#a9e15c}.brand-mark i{background:#68c783}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:#b7e970}.nav-item{color:#b1cdbf}.nav-item:hover,.nav-item.active{background:#1d5547}.nav-item.active{box-shadow:inset 3px 0 #a9e15c}.plant-card{background:#16483e;border-color:#2c6759}.mini-label,.eyebrow{color:#789e90}.plant-card>span:not(.mini-label){color:#b7d0c4}.switch-plant{color:#d0e5db;border-color:#337161}.sidebar-footer{color:#7ba797}
.hero-status{background:linear-gradient(112deg,#e8f7eb,#f7f9df);border:1px solid #d8eadb}.live-badge{background:#d4efdc;color:#177451}.live-badge span{background:#24a06e;box-shadow:0 0 0 3px #bfe6ca}.hero-status p{color:#577568}.hero-status p strong{color:#167c55}.updated{color:#78958a}.updated span{color:#509178}.sun{background:#e4b332;box-shadow:0 0 0 17px #e7f1b9}.sun-rays{border-color:#afce76}.solar-panel{background:repeating-linear-gradient(90deg,#25564d 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,#25564d 0 1px,#4d8776 1px 25px);border-color:#1e5147;box-shadow:0 9px 0 #8fbd70}
.metric-card.highlight{background:#fbfefb;border-color:#d5ead9}.metric-heading{color:#678177}.yellow{background:#f8efcf;color:#ba8c16}.blue{background:#e0f3eb;color:#238465}.purple{background:#e4f2e9;color:#438a6d}.progress span{background:#2e9a78}.tiny-bars i{background:#86ca96}.tiny-bars i:nth-child(8){background:#259c6e}.gauge{background:conic-gradient(from 270deg at 50% 100%,#4aa47d 0 174deg,#e4efe8 174deg 180deg)}.gauge b{background:#277759}
.chart-line{stroke:#229c70}.chart-wrap circle{fill:#229c70}.chart-tabs .active{color:#24644f}.weather-panel{background:#eef8f2;border-color:#d8ebe0}.weather-sun{color:#dfad2e;filter:drop-shadow(0 0 7px #e8d97d)}.revenue-panel{background:#f1f8f1;border-color:#dcebdc}.revenue-panel h3{color:#31815f}.revenue-icon{color:#6aac87}
.thermometer{background:#fff0e5;color:#db7437}.meter-icon{background:#e0f3eb;color:#238465}.sensor-panel h3{font-size:25px;letter-spacing:-1px;margin:7px 0 6px}.sensor-panel h3 b{font:600 13px 'DM Mono';letter-spacing:0}.temperature-panel{background:#fff7ec;border-color:#f4e3ca}.powermeter-panel{background:#eef8f2;border-color:#d8ebe0}.sensor-icon{font-size:35px}.temperature-panel .sensor-icon{color:#d67d3e}.powermeter-panel .sensor-icon{color:#278965}.sensor-status{color:#1e9870;font-weight:700}
.history-panel{margin-top:20px;padding:22px}.history-header{align-items:center}.history-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.date-picker{display:flex;align-items:center;gap:8px;color:#71867e;font:600 10px Manrope}.date-picker input{border:1px solid #d8e6dd;border-radius:6px;background:#f7fbf8;padding:7px 8px;color:#24644f;font:500 10px 'DM Mono';outline-color:#49a77f}.export-button{border:0;border-radius:6px;background:#237d5d;color:#fff;padding:8px 11px;font:700 10px Manrope;cursor:pointer;box-shadow:0 2px 5px #b5d9c5}.export-button:hover{background:#176848}.history-scroll{max-height:420px;overflow:auto;margin-top:18px;border:1px solid #e4eee8;border-radius:8px}table{width:100%;border-collapse:collapse;min-width:720px;font-size:10px}th,td{padding:10px 13px;text-align:left;border-bottom:1px solid #e9f0ec;white-space:nowrap}thead{position:sticky;top:0;background:#f3f9f5;z-index:1}thead th{font:600 9px 'DM Mono';letter-spacing:.3px;color:#668277}tbody td{font-family:'DM Mono';color:#466257}tbody tr:hover{background:#f7fbf8}tfoot{background:#e6f4eb}tfoot th,tfoot td{font:700 10px 'DM Mono';color:#176848;border-bottom:0}.history-error{text-align:center;padding:25px;color:#a4563b;font-family:Manrope}.history-error code{background:#eef4f0;padding:2px 5px;border-radius:3px;color:#166744}@media(max-width:760px){.history-header{align-items:flex-start;gap:14px}.history-actions{gap:7px}.date-picker{width:100%;justify-content:space-between}.date-picker input{flex:1}.export-button{width:100%}}
.revenue-card{background:linear-gradient(145deg,#f5fbf6,#fcfdf9);border-color:#d9eadc}.metric-value.currency{display:flex;align-items:baseline;gap:4px}.metric-value.currency>span{font:700 14px Manrope;color:#29825f}.metric-value.currency strong{font-size:23px;color:#216e53}.revenue-line{margin-top:12px;padding-top:9px;border-top:1px solid #e1eee5;display:flex;justify-content:space-between;font-size:9px;color:#84978d}.revenue-line strong{font:500 9px 'DM Mono';color:#3d8068}.revenue-period{display:flex;justify-content:space-between;align-items:baseline;margin:11px 0}.revenue-period span{font-size:10px;color:#71867e}.revenue-period strong{font:700 12px 'DM Mono';color:#277858;letter-spacing:-.3px}.revenue-card .neutral{margin-top:8px}
.edit-tariff{margin-top:9px;padding:0;border:0;background:none;color:#277858;font:700 9px Manrope;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.tariff-dialog{width:min(380px,calc(100vw - 32px));border:0;border-radius:13px;padding:0;color:#173b35;box-shadow:0 20px 60px #102b233d}.tariff-dialog::backdrop{background:#0d302b88}.tariff-dialog form{position:relative;padding:27px}.tariff-dialog h2{font-size:19px;margin:7px 0}.tariff-dialog p:not(.eyebrow){font-size:11px;line-height:1.6;color:#71867e;margin:0 0 20px}.tariff-dialog label{display:block;color:#426b5b;font-size:10px;font-weight:700;margin-bottom:7px}.tariff-dialog input{width:100%;border:1px solid #cfe0d5;border-radius:7px;padding:11px;color:#1e654d;font:600 14px 'DM Mono';outline-color:#2c9b72}.dialog-close{position:absolute;right:14px;top:12px;border:0;background:none;color:#78988b;font-size:23px;cursor:pointer}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.cancel-button,.save-tariff{border:0;border-radius:6px;padding:9px 13px;font:700 10px Manrope;cursor:pointer}.cancel-button{background:#eef4f0;color:#537266}.save-tariff{background:#237d5d;color:#fff}
.tariff-note{font-size:9px!important;color:#71867e!important;margin-top:6px!important}
.logout-button{border:1px solid #cfe0d5;border-radius:6px;background:#fff;color:#277858;padding:7px 10px;font:700 10px Manrope;cursor:pointer}.logout-button:hover{background:#edf7f0}
.negative{color:#c95b55!important;font-weight:700}
.history-tabs{display:flex;gap:5px;margin:18px 0 0;border-bottom:1px solid #e4eee8}.history-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:8px 10px;color:#789187;font:700 10px Manrope;cursor:pointer}.history-tabs button.active{color:#237d5d;border-color:#237d5d}.history-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}.history-summary article{display:flex;flex-direction:column;gap:6px;border:1px solid #dcebe1;border-radius:9px;background:#f7fbf8;padding:16px}.history-summary span{font-size:10px;color:#71867e}.history-summary strong{font:700 19px 'DM Mono';color:#176848;overflow-wrap:anywhere}.history-summary small{font-size:9px;color:#90a39a}
@media(max-width:760px){.topbar{margin-bottom:16px}.topbar-actions{gap:7px}.logout-button{padding:6px 8px}.chart-panel{padding:15px}.chart-panel .panel-header{gap:10px;flex-direction:column}.chart-tabs{align-self:stretch;justify-content:space-between}.chart-tabs button{flex:1}.chart-summary{margin-top:15px}.history-panel{padding:15px}.history-tabs{overflow-x:auto;white-space:nowrap}.history-tabs button{flex:0 0 auto}.history-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.history-summary article{padding:12px}.history-summary article:last-child{grid-column:span 2}.panel-header{gap:10px}.panel-header h3{font-size:13px}}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#e5f3e8,#f7f9df)}.login-card{width:min(390px,100%);padding:32px;border:1px solid #d5e7da;border-radius:15px;background:#fff;box-shadow:0 16px 45px #16483e1c}.login-card h1{margin:16px 0 7px;font-size:25px}.login-card p{margin:0;color:#71867e;font-size:12px;line-height:1.6}.login-form{display:grid;gap:14px;margin-top:25px}.login-form label{display:grid;gap:6px;color:#426b5b;font-size:11px;font-weight:700}.login-form input{border:1px solid #cfe0d5;border-radius:7px;padding:11px;color:#173b35;font:500 14px Manrope;outline-color:#2c9b72}.login-submit{border:0;border-radius:7px;background:#237d5d;color:#fff;padding:12px;font:700 12px Manrope;cursor:pointer}.login-submit:hover{background:#176848}.login-error{min-height:18px;color:#b94d42!important;font-size:11px!important}
.topbar h1 span{font-size:18px;font-weight:600;letter-spacing:-.4px;color:#6d8a7e}.metric-heading{font-size:12px}.metric-card p{font-size:11px}.panel-header p,.panel p{font-size:11px}.device strong{font-size:11px}.device small{font-size:10px}table{font-size:11px}thead th{font-size:10px}
@media(max-width:760px){.topbar h1{font-size:18px;line-height:1.2}.topbar h1 span{display:block;font-size:14px;margin-top:3px}.topbar .eyebrow{font-size:9px}.metric-heading{font-size:12px}.metric-card p{font-size:11px}.panel-header p,.panel p{font-size:11px}}
.map-panel{margin-bottom:20px;padding:21px}.map-panel .panel-header{margin-bottom:14px}.map-label{font:500 10px 'DM Mono';color:#6d8a7e;background:#eef8f2;border-radius:5px;padding:6px 8px}.map-frame{height:280px;border-radius:9px;overflow:hidden;border:1px solid #dcebe1}.map-frame iframe{width:100%;height:100%;display:block;border:0}
.nav-item{font-size:14px}.panel-header h3{font-size:16px}.panel-header p,.panel p{font-size:12px}.metric-heading{font-size:13px}.metric-card p{font-size:11px}.device strong{font-size:12px}.device small{font-size:11px}.history-description,.history-actions,.date-picker{font-size:11px}.history-summary span{font-size:11px}.history-summary small{font-size:10px}
@media(max-width:760px){.map-panel{padding:15px}.map-frame{height:230px}.map-label{font-size:9px}.panel-header h3{font-size:15px}.panel-header p,.panel p{font-size:12px}.nav-item{font-size:14px}}
.map-panel{max-width:820px}.map-frame{height:210px}.map-panel .panel-header h3{font-size:17px}.map-panel .panel-header p{font-size:13px}.map-label{font-size:11px}.chart-tabs{width:max-content}.chart-tabs button{font-size:11px;padding:7px 12px}
.y-axis,.x-axis{font-size:10px}.chart-summary span{font-size:11px}
@media(max-width:760px){.map-panel{max-width:none}.map-frame{height:175px}.map-panel .panel-header h3{font-size:16px}.map-panel .panel-header p{font-size:12px}.map-label{font-size:10px}.chart-tabs{width:max-content}.chart-tabs button{font-size:10px;padding:7px 8px}}
.top-feature-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:20px;margin-bottom:20px;align-items:stretch}.top-feature-grid .hero-status,.top-feature-grid .map-panel{margin-bottom:0}.top-feature-grid .map-panel{max-width:none}.top-feature-grid .map-frame{height:180px}
@media(max-width:1100px){.top-feature-grid{grid-template-columns:1fr}.top-feature-grid .map-frame{height:210px}}
@media(max-width:760px){.top-feature-grid{display:grid;grid-template-columns:1fr;gap:15px}.top-feature-grid .map-frame{height:175px}}
/* Grafik memenuhi area setelah panel status perangkat dihapus. */
.content-grid{grid-template-columns:1fr}
.power-details{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px;padding-top:12px;border-top:1px solid #dcebe1}.power-details div{display:grid;gap:4px}.power-details span{font-size:10px;color:#71867e}.power-details strong{font:700 13px 'DM Mono';color:#277858}.temperature-metric-card .metric-value{margin-bottom:7px}.temperature-metric-card p{color:#71867e}.bottom-grid{grid-template-columns:1fr}.bottom-grid .alert-panel{min-height:86px}
.metric-heading{font-size:15px}.metric-card p{font-size:13px}.metric-value span{font-size:13px}.power-details span{font-size:12px}.power-details strong{font-size:15px}.revenue-period span{font-size:13px}.revenue-period strong{font-size:14px}.revenue-line{font-size:12px}.revenue-line strong{font-size:12px}.tariff-note{font-size:11px!important}
.logout-button{padding:10px 16px;font-size:12px}

/* Login: lockup aplikasi sebagai identitas utama, logo instansi sebagai dukungan. */
.login-page{min-height:100vh;display:grid;place-items:center;padding:28px;background:#f4f8f6}
.login-card{width:min(940px,100%);min-height:520px;display:grid;grid-template-columns:270px minmax(0,1fr);padding:0;overflow:hidden;border:1px solid #d5e7da;border-radius:10px;background:#fff;box-shadow:0 16px 45px #16483e1c}
.login-identity{display:flex;flex-direction:column;padding:27px 24px 23px;background:#11765f;color:#fff}
.login-lockup{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.login-lockup .login-logo{flex:none;width:40px;height:40px;display:block;object-fit:contain;border-radius:9px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.login-lockup .brand-mark{flex:none;width:34px;height:34px;gap:3px;padding:6px;border-radius:6px;background:#b8eed1;transform:none}
.login-lockup .brand-mark i{background:#11765f;border-radius:50%}
.login-lockup strong,.login-lockup small{display:block}
.login-lockup strong{font-size:15px;line-height:1.15;letter-spacing:-.3px}
.login-lockup small{margin-top:2px;font-size:12px;font-weight:600;line-height:1.15}
.login-tagline{max-width:210px;margin:28px 0 0;color:#fff!important;font-size:14px!important;font-weight:700;line-height:1.7!important}
.login-supported{margin-top:auto;padding-top:14px;border-top:1px solid #82c6b2}
.login-supported>span{display:block;color:#e4f7ed;font-size:11px;font-weight:700}
.login-logos{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:9px 0 0}
.login-logos img{width:auto;height:32px;max-width:82px;object-fit:contain}
.login-logo-divider{width:1px;height:24px;background:#82c6b2}
.login-form-panel{padding:36px 40px 40px;align-self:center}
.login-form-panel h1{margin:0 0 7px;font-size:25px;color:#111}
.login-form-panel>p{color:#111;font-size:13px}
.login-form{max-width:440px;gap:14px;margin-top:28px}
.login-form label{color:#111;font-size:12px}
.login-form input{border-color:#d9d9d9;border-radius:7px;padding:10px 13px;color:#173b35;font-size:16px}
.login-submit{margin-top:8px;border-radius:7px;background:#11765f;padding:12px;font-size:14px}
.login-submit:hover{background:#0d604e}
@media(max-width:650px){.login-page{padding:14px}.login-card{display:block;min-height:0}.login-identity{min-height:270px;padding:24px}.login-tagline{margin-top:22px}.login-supported{margin-top:30px}.login-form-panel{padding:30px 24px 32px}}

/* Penyempurnaan visual login agar lebih tenang, seimbang, dan profesional. */
.login-page{padding:32px;background:radial-gradient(circle at 15% 10%,#e2f2e8 0,#f4f8f6 42%,#eef5f0 100%)}
.login-card{width:min(980px,100%);min-height:570px;grid-template-columns:310px minmax(0,1fr);border-color:#d4e5dc;border-radius:14px;box-shadow:0 22px 60px rgba(22,72,62,.14)}
.login-identity{position:relative;isolation:isolate;padding:38px 32px 30px;background:linear-gradient(160deg,#0f765f 0%,#0e6b57 58%,#095744 100%);overflow:hidden}
.login-identity::after{content:'';position:absolute;z-index:-1;width:230px;height:230px;right:-120px;top:160px;border:1px solid rgba(205,244,220,.18);border-radius:50%;box-shadow:0 0 0 28px rgba(205,244,220,.04),0 0 0 57px rgba(205,244,220,.03)}
.login-lockup{gap:13px}
.login-lockup .login-logo{width:40px;height:40px}
.login-lockup strong{font-size:16px;letter-spacing:-.35px}
.login-lockup small{font-size:12px;color:#d7f2e1}
.login-tagline{max-width:220px;margin-top:34px;font-size:14px!important;line-height:1.75!important;color:#e9f8ef!important}
.login-supported{padding-top:18px}
.login-supported>span{font-size:10px;letter-spacing:.45px;text-transform:uppercase;color:#cbeadc}
.login-logos{gap:14px;margin-top:11px}
.login-logos img{height:30px;max-width:86px}
.login-logo-divider{height:22px;background:rgba(205,244,220,.45)}
.login-form-panel{display:flex;flex-direction:column;justify-content:center;padding:54px 68px}
.login-form-panel h1{margin:0 0 9px;font-size:28px;letter-spacing:-.7px;font-weight:800;color:#173b35}
.login-form-panel>p{font-size:13px;line-height:1.6;color:#71867e}
.login-form{width:100%;max-width:455px;gap:17px;margin-top:32px}
.login-form label{gap:8px;color:#315d4e;font-size:12px}
.login-form input{width:100%;min-height:44px;border:1px solid #d4e2da;border-radius:8px;padding:11px 14px;background:#fcfefd;transition:border-color .2s,box-shadow .2s}
.login-form input:focus{border-color:#2c9b72;box-shadow:0 0 0 3px rgba(44,155,114,.13);outline:0}
.login-submit{min-height:44px;margin-top:6px;border-radius:8px;background:#11765f;font-size:13px;letter-spacing:.1px;box-shadow:0 5px 12px rgba(17,118,95,.18);transition:background .2s,transform .2s,box-shadow .2s}
.login-submit:hover{background:#0d604e;box-shadow:0 7px 16px rgba(17,118,95,.24);transform:translateY(-1px)}
.login-submit:disabled{cursor:wait;opacity:.72;transform:none}
@media(max-width:760px){.login-card{grid-template-columns:1fr;min-height:0}.login-identity{min-height:285px;padding:30px 28px 25px}.login-identity::after{right:-105px;top:110px}.login-form-panel{padding:38px 30px 42px}.login-form-panel h1{font-size:25px}}
@media(max-width:420px){.login-page{padding:12px}.login-identity{padding:25px 22px 22px}.login-form-panel{padding:32px 22px 35px}.login-lockup .login-logo{width:36px;height:36px}.login-lockup strong{font-size:15px}.login-tagline{font-size:13px!important}}

/* Nama instansi ditampilkan dekat logonya dalam dua baris kredensial. */
.login-logos{display:grid;gap:10px;margin-top:11px}
.login-logos .institution-credit{display:flex;align-items:center;gap:10px;min-width:0}
.login-logos .institution-credit img{flex:none;width:38px;height:38px;max-width:38px;object-fit:contain}
.login-logos .institution-credit img[src*="logo-pnj"]{transform:scale(1.2)}
.login-logos .institution-credit span{min-width:0;color:#d7f2e1;font-size:9px;line-height:1.3;font-weight:600}
.sidebar-support-logos{display:grid;gap:9px;margin-top:10px}
.sidebar-support-logos .institution-credit{display:flex;align-items:center;gap:9px;min-width:0}
.sidebar-support-logos .institution-credit img{flex:none;width:34px;height:34px;max-width:34px;object-fit:contain}
.sidebar-support-logos .institution-credit img[src*="logo-pnj"]{transform:scale(1.2)}
.sidebar-support-logos .institution-credit span{min-width:0;color:#b7d0c4;font-size:8px;line-height:1.25;font-weight:600}

/* Dashboard sidebar: lockup aplikasi utama dan logo instansi sebagai dukungan. */
.dashboard-brand{align-items:center;gap:12px;padding:0 11px 39px}
.dashboard-brand .dashboard-logo{flex:none;width:40px;height:40px;display:block;object-fit:contain;border-radius:9px}
.dashboard-brand>span{display:block;min-width:0}
.dashboard-brand strong,.dashboard-brand small{display:block}
.dashboard-brand strong{font-size:16px;line-height:1.15;letter-spacing:-.35px}
.dashboard-brand small{margin-top:3px;font-size:12px;line-height:1.15;font-weight:600;color:#d7f2e1}
.sidebar-support{padding:15px 9px 0;border-top:1px solid #337161}
.sidebar-support>span{display:block;color:#b7d0c4;font-size:10px;letter-spacing:.45px;text-transform:uppercase;font-weight:700}
.sidebar-support-logos{display:flex;align-items:center;gap:11px;margin-top:10px}
.sidebar-support-logos img{width:auto;height:28px;max-width:75px;object-fit:contain}
.sidebar-support-logos i{width:1px;height:21px;background:#337161;flex:none}
.sidebar-footer{margin-top:15px}
@media(max-width:760px){.dashboard-brand{padding-bottom:30px}.sidebar-support{padding-top:13px}.sidebar-support-logos{margin-top:8px}}