:root{
  --bg:#eef3f8;--panel:#fff;--soft:#f7f9fc;--text:#132238;--muted:#6d7a8c;--line:#e3e9f0;
  --primary:#1769aa;--teal:#168b98;--navy:#0b1728;--navy2:#102238;--green:#169b68;
  --orange:#e58a2d;--red:#d9535f;--violet:#7557c7;--shadow:0 12px 34px rgba(24,45,72,.08);
  --radius:18px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45}button,input{font:inherit}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}
.industrial-shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;min-height:100vh;padding:24px 18px 20px;display:flex;flex-direction:column;color:#fff;background:linear-gradient(180deg,var(--navy),var(--navy2) 64%,#0c1b2e);z-index:40;box-shadow:12px 0 34px rgba(7,17,30,.12)}
.brand-block{display:flex;align-items:center;gap:12px;padding:2px 8px 22px}.brand-icon{width:43px;height:43px;border-radius:14px;background:linear-gradient(145deg,#1eb5a8,#2879d0);display:grid;place-items:center;font-size:12px;font-weight:900;letter-spacing:.6px;box-shadow:0 10px 24px rgba(33,143,154,.25)}.brand-block strong,.brand-block span{display:block}.brand-block strong{font-size:14px;letter-spacing:-.1px}.brand-block span{font-size:9px;color:#8ea3b9;margin-top:3px;letter-spacing:.7px}
.system-strip{display:flex;align-items:center;gap:8px;margin:0 6px 15px;padding:10px 11px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.045);font-size:9px;color:#9aafc3}.system-strip b{margin-left:auto;color:#69d9c2;font-size:9px}.led{display:inline-block;width:7px;height:7px;border-radius:50%;background:#aab6c3;flex:0 0 auto}.led.online{background:var(--green);box-shadow:0 0 0 4px rgba(22,155,104,.12)}.led.warning{background:var(--orange);box-shadow:0 0 0 4px rgba(229,138,45,.12)}
.nav-menu{display:grid;gap:5px}.nav-section{padding:14px 11px 5px;color:#647d95;font-size:8px;font-weight:900;letter-spacing:1.2px}.nav-link{text-decoration:none;color:#aebfd0;padding:10px 11px;border-radius:12px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;transition:.2s}.nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.075)}.nav-link.active{box-shadow:inset 3px 0 #39c4b7}.nav-code{min-width:27px;height:25px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.055);color:#7f9bb9;font-size:9px;font-weight:900}.nav-link.active .nav-code{color:#61d6ca;background:rgba(97,214,202,.09)}.nav-link em{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:9px;font-style:normal}.nav-link em.alarm-count{background:#d95d66;color:white}
.sidebar-footer{margin-top:auto;padding:14px 6px 0}.mini-kpi{display:flex;justify-content:space-between;align-items:center;padding:10px 11px;border-top:1px solid rgba(255,255,255,.07);font-size:9px;color:#7f96ac}.mini-kpi strong{font-size:10px;color:#c9d6e3}.build{padding:12px 11px 0;color:#657d93;font-size:8px}
.workspace{margin-left:260px;width:calc(100% - 260px);min-width:0}.topbar{position:sticky;top:0;z-index:30;height:84px;padding:0 30px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(16px)}.menu-toggle{display:none;border:0;background:transparent;color:var(--text);font-size:22px;cursor:pointer;margin-right:8px}.page-heading span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:1.2px;font-weight:900}.page-heading h1{margin:3px 0 0;font-size:24px;letter-spacing:-.6px}.topbar-status{margin-left:auto;display:flex;align-items:center;gap:16px}.status-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid #caeadf;border-radius:99px;background:#f1fbf7;color:var(--green);font-size:10px;font-weight:900}.clock-box{text-align:right}.clock-box span,.clock-box strong{display:block}.clock-box span{font-size:8px;color:var(--muted)}.clock-box strong{font-size:11px}.industrial-button{border:0;cursor:pointer;color:#fff;background:var(--primary);padding:10px 14px;border-radius:11px;font-weight:900;font-size:10px;box-shadow:0 8px 18px rgba(23,105,170,.2)}.industrial-button:hover{background:#12588e}
.page-content{max-width:1720px;margin:0 auto;padding:28px 30px 36px}.alarm-banner,.safety-banner{display:flex;align-items:center;gap:13px;margin-bottom:18px;padding:14px 17px;border:1px solid #f0d6bf;border-radius:15px;background:#fff8f0;color:#805126;box-shadow:0 8px 24px rgba(95,61,25,.04)}.alarm-icon{width:31px;height:31px;border-radius:10px;background:#ffebd8;color:#d27128;display:grid;place-items:center;font-weight:900}.alarm-banner div,.safety-banner span{min-width:0}.alarm-banner strong,.alarm-banner span{display:block}.alarm-banner strong{font-size:11px}.alarm-banner span,.safety-banner span{font-size:10px;color:#9a6b42}.alarm-banner a{margin-left:auto;text-decoration:none;color:#c26a22;font-size:9px;font-weight:900}.safety-banner strong{font-size:10px;padding:5px 8px;border-radius:8px;background:#ffead7;color:#bd641f;white-space:nowrap}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.kpi-card{position:relative;overflow:hidden;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}.kpi-card:before{content:"";position:absolute;right:-35px;top:-35px;width:90px;height:90px;border-radius:50%;background:#eff6fc}.kpi-card.warning:before{background:#fff1e3}.kpi-label{position:relative;display:block;color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.9px}.kpi-card>strong{position:relative;display:block;margin:7px 0 2px;font-size:31px;letter-spacing:-1.2px}.kpi-card>small{position:relative;color:var(--muted);font-size:9px}.bar{height:4px;margin-top:13px;border-radius:99px;background:#edf1f5;overflow:hidden}.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1f8fc1,#36b5aa)}.kpi-card.warning .bar i{background:var(--orange)}
.page-grid{display:grid;gap:18px;margin-top:18px}.page-grid.two-one{grid-template-columns:2fr 1fr}.page-grid.one-one{grid-template-columns:repeat(2,1fr)}.industrial-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}.panel-head{min-height:74px;padding:17px 19px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}.panel-head>div:first-child{min-width:0}.panel-head span:first-child{display:block;color:var(--primary);font-size:8px;font-weight:900;letter-spacing:1px}.panel-head h2{margin:2px 0 0;font-size:16px;letter-spacing:-.25px}.panel-head p{margin:3px 0 0;color:var(--muted);font-size:9px}.panel-head>a{margin-left:auto;text-decoration:none;color:var(--primary);font-size:9px;font-weight:900}.tag{margin-left:auto;padding:6px 8px;border-radius:8px;background:#eef5fb;color:var(--primary)!important;font-size:8px!important;font-weight:900;white-space:nowrap}
.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px}.module-card{text-decoration:none;border:1px solid var(--line);border-radius:15px;padding:15px;background:linear-gradient(180deg,#fff,#fbfcfe);transition:.2s}.module-card:hover{transform:translateY(-2px);border-color:#cbdceb;box-shadow:0 10px 24px rgba(24,45,72,.08)}.module-top{display:flex;align-items:center;justify-content:space-between}.module-code,.point-code{font-size:8px;font-weight:900;color:var(--primary);letter-spacing:.5px}.state{display:inline-flex;align-items:center;gap:6px;font-size:8px;font-weight:900;color:var(--green)}.state i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(22,155,104,.1)}.state.warning{color:var(--orange)}.state.info{color:var(--primary)}.module-card h3{margin:14px 0 2px;font-size:13px}.module-card p{margin:0;color:var(--muted);font-size:9px}.module-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.module-meta span{font-size:7px;color:#8b98a8}.module-meta b{display:block;color:var(--text);font-size:9px;margin-bottom:2px}
.compact-readings{padding:7px 18px 15px}.compact-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #edf1f4}.compact-row:last-child{border-bottom:0}.compact-row>span{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:9px}.compact-row strong{font-size:13px}.compact-row small{font-size:8px;color:var(--muted);font-weight:700}.event-list{padding:4px 18px 12px}.event-row{display:grid;grid-template-columns:64px 1fr auto;gap:11px;align-items:start;padding:12px 0;border-bottom:1px solid #edf1f4}.event-row:last-child{border-bottom:0}.event-row strong{font-size:10px}.event-row p{margin:2px 0 0;color:var(--muted);font-size:9px}.event-row time{font-size:8px;color:#8a98a9}.severity{display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:0 7px;border-radius:7px;background:#eef4f9;color:#52708a;font-size:7px;font-weight:900}.severity.warning{background:#fff1e2;color:#c16c23}.severity.critical{background:#fdebed;color:#c94853}.severity.info{background:#ebf4fb;color:#1769aa}.severity.recovered{background:#eaf8f3;color:#13845d}
.page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px;padding:13px 16px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(24,45,72,.045)}.page-toolbar>div{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.page-toolbar b,.page-toolbar span,.toolbar-link{font-size:9px}.page-toolbar span{color:var(--muted)}.page-toolbar b{color:var(--text)}.toolbar-link{text-decoration:none;color:var(--primary);font-weight:900}.floor-summary,.alarm-stats,.network-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.floor-summary>div,.alarm-stats>div,.network-summary>div{padding:14px 16px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(24,45,72,.045)}.floor-summary span,.alarm-stats span,.network-summary span{display:block;color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.7px}.floor-summary strong,.alarm-stats strong,.network-summary strong{display:block;margin-top:4px;font-size:20px}.alarm-stats .warning{border-color:#f3d9bd;background:#fffaf4}.alarm-stats .critical{border-color:#f0c7ca;background:#fff8f8}
.floor-groups{display:grid;gap:18px}.sensor-group-panel{overflow:visible}.industrial-sensor-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;padding:15px}.industrial-sensor{min-width:0;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.industrial-sensor.warning{border-color:#f1d3b4;background:#fff9f2}.industrial-sensor>div:first-child{display:flex;align-items:center;justify-content:space-between}.industrial-sensor>strong{display:block;margin-top:13px;font-size:22px;letter-spacing:-.6px}.industrial-sensor>strong small{margin-left:4px;color:var(--muted);font-size:9px}.industrial-sensor p{margin:5px 0 0;color:var(--muted);font-size:8px}.industrial-sensor p b{color:var(--text)}.quality{display:block;margin-top:10px;padding-top:8px;border-top:1px solid #e6ebf0;color:#8491a1;font-size:7px;font-weight:800}
.sensor-display-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}.sensor-display{padding:16px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow)}.sensor-display.warning{border-color:#f1d3b4;background:#fffaf4}.sensor-code{display:flex;justify-content:space-between;align-items:center;color:var(--primary);font-size:8px;font-weight:900}.sensor-name{display:block;margin-top:10px;color:var(--muted);font-size:9px}.digital-value{margin-top:5px;font-size:29px;font-weight:800;letter-spacing:-1px}.digital-value small{font-size:9px;color:var(--muted);margin-left:4px}.sensor-footer{display:flex;justify-content:space-between;gap:10px;margin-top:13px;padding-top:10px;border-top:1px solid var(--line);color:#8290a1;font-size:7px}
.chart-panel{min-width:0}.chart{height:260px;padding:14px 16px 10px}.chart.large{height:300px}.chart.xl{height:340px}.chart svg{width:100%;height:100%;overflow:visible}.chart-grid-line{stroke:#e8edf2;stroke-width:1}.chart-label{fill:#8491a1;font-size:9px}.chart-line{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.chart-point{stroke:#fff;stroke-width:2}.legend{margin-left:auto;display:flex;gap:12px;align-items:center}.legend span{display:flex!important;align-items:center;gap:5px;color:var(--muted)!important;font-size:8px!important;letter-spacing:0!important}.legend i{width:8px;height:8px;border-radius:50%}.legend .l1{background:#35c8d0}.legend .l2{background:#6ed36b}.legend .l3{background:#f2b84b}
.compass-panel{min-height:380px}.industrial-compass{position:relative;width:215px;height:215px;margin:24px auto;border:12px solid #f2f5f8;border-radius:50%;box-shadow:inset 0 0 0 1px #dbe3eb;background:radial-gradient(circle,#fff 0 46%,#f8fafc 47% 100%)}.industrial-compass>.n,.industrial-compass>.e,.industrial-compass>.s,.industrial-compass>.w{position:absolute;font-size:9px;font-weight:900;color:#6f7f90}.industrial-compass>.n{top:8px;left:50%;transform:translateX(-50%)}.industrial-compass>.s{bottom:8px;left:50%;transform:translateX(-50%)}.industrial-compass>.e{right:11px;top:50%;transform:translateY(-50%)}.industrial-compass>.w{left:11px;top:50%;transform:translateY(-50%)}.needle{position:absolute;left:50%;top:50%;width:4px;height:75px;background:linear-gradient(#d9535f 0 50%,#9eb0c1 50%);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(var(--angle));border-radius:99px}.compass-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;display:grid;place-items:center;align-content:center;background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px rgba(24,45,72,.12)}.compass-center strong{font-size:16px}.compass-center span{font-size:8px;color:var(--muted)}.wind-bottom{display:flex;justify-content:center;gap:28px;padding:0 18px 18px;color:var(--muted);font-size:8px}.wind-bottom b{color:var(--text);margin-left:4px}
.actuator-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.actuator-card{padding:16px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow)}.actuator-title{display:flex;align-items:start;justify-content:space-between;gap:12px}.actuator-title span:first-child{font-size:8px;color:var(--primary);font-weight:900}.actuator-title h3{margin:2px 0 0;font-size:13px}.actuator-process{display:grid;grid-template-columns:54px 1fr;gap:15px;margin:17px 0}.vertical-track{position:relative;height:150px;border-radius:16px;background:#edf2f6;overflow:hidden;border:1px solid #dce4eb}.position-fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#46bfb2,#2078b7);border-radius:12px}.target-marker{position:absolute;left:-3px;right:-3px;height:3px;background:#e89031;box-shadow:0 0 0 2px rgba(232,144,49,.14)}.actuator-data>span{font-size:8px;color:var(--muted);font-weight:900}.actuator-data>strong{display:block;font-size:30px;letter-spacing:-1px}.actuator-data>strong small{font-size:10px;color:var(--muted)}.actuator-data dl{margin:10px 0 0}.actuator-data dl div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #edf1f4;font-size:8px}.actuator-data dt{color:var(--muted)}.actuator-data dd{margin:0;font-weight:800}.industrial-range{display:block;padding-top:12px;border-top:1px solid var(--line)}.industrial-range>span,.industrial-range output{font-size:8px;font-weight:900}.industrial-range output{float:right;color:var(--primary)}.target-range{width:100%;accent-color:var(--primary);margin-top:9px}.control-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:11px}.control-buttons button{border:1px solid #d9e3eb;background:#f7fafc;color:#496379;padding:9px 6px;border-radius:9px;font-size:8px;font-weight:900;cursor:pointer}.control-buttons button:hover{border-color:#b9cedf;background:#edf5fb}.control-buttons .stop{color:#bd4b54;border-color:#efc9cc;background:#fff6f7}
.trend-toolbar{display:flex;align-items:center;gap:7px;margin-bottom:16px}.trend-toolbar button{border:1px solid #dbe4ec;background:#fff;color:#64768a;padding:8px 11px;border-radius:9px;font-size:8px;font-weight:900;cursor:pointer}.trend-toolbar button.active{border-color:#b9d3e7;background:#edf6fc;color:var(--primary)}.trend-toolbar span{margin-left:auto;color:var(--muted);font-size:8px}
.industrial-table-wrap{overflow:auto}.industrial-table{width:100%;border-collapse:collapse;min-width:760px}.industrial-table th,.industrial-table td{padding:12px 15px;text-align:left;border-bottom:1px solid #edf1f4}.industrial-table th{background:#f8fafc;color:#758498;font-size:8px;letter-spacing:.5px}.industrial-table td{font-size:9px}.industrial-table tbody tr:hover{background:#fbfdff}
.device-diagnostic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:18px}.device-diagnostic{padding:18px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow)}.device-diagnostic.warning{border-color:#f0d1b1;background:#fffaf5}.device-head{display:flex;align-items:center;justify-content:space-between}.device-glyph{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#edf5fb;color:var(--primary);font-size:17px}.device-diagnostic>.module-code{display:block;margin-top:15px}.device-diagnostic h2{margin:3px 0 2px;font-size:14px}.device-diagnostic p{margin:0;color:var(--muted);font-size:9px}.device-diagnostic dl{margin:15px 0 0}.device-diagnostic dl div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #edf1f4;font-size:8px}.device-diagnostic dt{color:var(--muted)}.device-diagnostic dd{margin:0;font-weight:800}.diagnostic-bar{height:5px;background:#edf1f5;border-radius:99px;overflow:hidden;margin-top:14px}.diagnostic-bar i{display:block;height:100%;background:linear-gradient(90deg,#168b98,#36b58c)}
.toast{position:fixed;right:24px;bottom:24px;z-index:80;max-width:330px;padding:12px 15px;border-radius:12px;background:#11263d;color:#fff;font-size:10px;box-shadow:0 14px 34px rgba(8,21,35,.22);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1280px){.industrial-sensor-grid{grid-template-columns:repeat(4,1fr)}.sensor-display-grid{grid-template-columns:repeat(3,1fr)}.actuator-grid{grid-template-columns:repeat(3,1fr)}.device-diagnostic-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.sidebar{transform:translateX(-105%);transition:.25s}.sidebar.open{transform:translateX(0)}.workspace{margin-left:0;width:100%}.menu-toggle{display:block}.kpi-grid{grid-template-columns:repeat(2,1fr)}.page-grid.two-one,.page-grid.one-one{grid-template-columns:1fr}.actuator-grid{grid-template-columns:repeat(2,1fr)}.industrial-sensor-grid{grid-template-columns:repeat(3,1fr)}.topbar{padding:0 20px}.page-content{padding:22px 20px 30px}}
@media(max-width:680px){.topbar{height:72px}.topbar-status{gap:7px}.clock-box{display:none}.industrial-button{padding:9px}.page-heading h1{font-size:19px}.page-content{padding:16px 13px 24px}.kpi-grid,.floor-summary,.alarm-stats,.network-summary{grid-template-columns:1fr 1fr;gap:10px}.module-grid{grid-template-columns:1fr}.sensor-display-grid,.industrial-sensor-grid,.actuator-grid,.device-diagnostic-grid{grid-template-columns:1fr}.panel-head{padding:14px}.page-toolbar{align-items:flex-start;flex-direction:column}.alarm-banner{align-items:flex-start;flex-wrap:wrap}.alarm-banner a{margin-left:44px}.event-row{grid-template-columns:58px 1fr}.event-row time{display:none}.legend{display:none}.chart{height:220px;padding:8px}.sensor-footer{flex-direction:column}.topbar .status-chip{display:none}}

/* Sensor report */
.report-filter-panel{margin-bottom:16px}.report-filter-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end;padding:16px}.report-field{display:block;min-width:0}.report-field>span{display:block;margin-bottom:7px;color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.6px}.report-field input,.report-field select{width:100%;height:40px;border:1px solid #dbe4ec;border-radius:10px;background:#f9fbfd;color:var(--text);padding:0 11px;font-size:10px;outline:none}.report-field input:focus,.report-field select:focus{border-color:#8bb9dc;box-shadow:0 0 0 3px rgba(23,105,170,.08);background:#fff}.report-filter-actions{display:flex;gap:7px}.report-primary,.report-secondary,.report-export{height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-size:8px;font-weight:900;letter-spacing:.35px;text-decoration:none;white-space:nowrap;cursor:pointer}.report-primary{padding:0 15px;border:1px solid var(--primary);background:var(--primary);color:#fff}.report-secondary{padding:0 12px;border:1px solid #dbe4ec;background:#fff;color:#687a8d}.report-quick-range{display:flex;align-items:center;gap:8px;padding:0 16px 16px}.report-quick-range>span{margin-right:3px;color:#8794a4;font-size:7px;font-weight:900;letter-spacing:.6px}.report-quick-range a{padding:6px 9px;border:1px solid #e0e7ee;border-radius:8px;background:#f8fafc;color:#64768a;text-decoration:none;font-size:8px;font-weight:800}.report-quick-range a:hover{border-color:#bfd4e5;color:var(--primary);background:#f1f7fb}.report-summary-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:12px;margin-bottom:16px}.report-summary-card{padding:15px 16px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(24,45,72,.045)}.report-summary-card span{display:block;color:var(--muted);font-size:7px;font-weight:900;letter-spacing:.7px}.report-summary-card strong{display:block;margin-top:5px;font-size:20px;letter-spacing:-.4px}.report-summary-card small{display:block;margin-top:3px;color:#8996a5;font-size:8px}.report-table-head{gap:12px}.report-head-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.report-range-label{color:var(--muted);font-size:8px!important;letter-spacing:0!important}.report-export{height:34px;padding:0 12px;border:1px solid #b7d9cf;background:#effaf6;color:#148062}.report-table{min-width:980px}.report-table td{vertical-align:middle}.report-cell-sub{display:block;margin-top:3px;color:#8b98a7;font-size:7px}.report-channel-code{display:inline-block;padding:5px 7px;border-radius:7px;background:#edf5fb;color:var(--primary);font-size:8px;font-weight:900}.report-value{font-size:11px}.report-empty{padding:32px;text-align:center;color:var(--muted)}.report-empty strong,.report-empty span{display:block}.report-empty strong{color:var(--text);font-size:11px}.report-empty span{margin-top:5px;font-size:9px}.report-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:8px}.report-pagination>div{display:flex;align-items:center;gap:8px}.report-pagination a,.report-pagination>div>span{padding:7px 9px;border:1px solid #dfe7ee;border-radius:8px;background:#fff;text-decoration:none;font-weight:900;color:#617488}.report-pagination a:hover{border-color:#b9cfe0;color:var(--primary)}
@media(max-width:1180px){.report-filter-form{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filter-actions{grid-column:1/-1}.report-summary-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.report-filter-form{grid-template-columns:1fr}.report-filter-actions{grid-column:auto}.report-filter-actions>*{flex:1}.report-quick-range{flex-wrap:wrap}.report-summary-grid{grid-template-columns:1fr 1fr}.report-summary-card:first-child{grid-column:1/-1}.report-head-actions{width:100%;margin-left:0;justify-content:space-between}.report-table-head{align-items:flex-start;flex-direction:column}.report-pagination{align-items:flex-start;flex-direction:column}}

/* Realtime sensor graph */
.nav-live-dot{width:7px;height:7px;border-radius:50%;margin-left:auto;background:#31bd8d;box-shadow:0 0 0 4px rgba(49,189,141,.12)}
.realtime-monitor{display:grid;gap:16px}.realtime-control-panel{overflow:visible}.realtime-connection{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:8px;letter-spacing:.5px}.realtime-controls{display:grid;grid-template-columns:1fr 1.5fr .8fr .75fr;gap:12px;padding:16px}.realtime-refresh-box{min-height:67px;padding:9px 11px;border:1px solid #dbe4ec;border-radius:10px;background:#f9fbfd}.realtime-refresh-box>span{display:block;color:var(--muted);font-size:7px;font-weight:900;letter-spacing:.6px}.realtime-refresh-box>strong{display:block;margin:3px 0 5px;font-size:10px;color:#16826e}.realtime-refresh-box button{width:100%;border:0;border-radius:7px;background:#eaf3f9;color:var(--primary);padding:7px;font-size:7px;font-weight:900;cursor:pointer}.realtime-refresh-box button.loading{opacity:.55;pointer-events:none}
.realtime-kpi-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:12px}.realtime-kpi{min-height:104px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.realtime-kpi>span{display:block;color:var(--muted);font-size:7px;font-weight:900;letter-spacing:.7px}.realtime-kpi>strong,.realtime-kpi>div strong{display:inline-block;margin-top:8px;font-size:26px;letter-spacing:-.8px}.realtime-kpi small,.realtime-kpi>div small{margin-left:4px;color:#7f8f9f;font-size:9px;font-weight:800}.realtime-kpi p{margin:5px 0 0;color:#8b98a7;font-size:8px}.realtime-kpi.featured{border-color:#b8d7e9;background:linear-gradient(145deg,#ffffff,#f3f9fd)}.realtime-kpi.featured>div strong{font-size:34px;color:#145f91}
.realtime-chart-panel{overflow:hidden}.realtime-chart-head p{margin:4px 0 0;color:#7f8e9e;font-size:8px;font-weight:800}.realtime-chart-status{text-align:right}.realtime-chart-status>span{display:flex;align-items:center;justify-content:flex-end;gap:7px;color:#16826e;font-size:8px;font-weight:900;letter-spacing:.5px}.realtime-chart-status small{display:block;margin-top:5px;color:#8a98a8;font-size:7px}.live-pulse{width:8px;height:8px;border-radius:50%;background:#28b986;box-shadow:0 0 0 0 rgba(40,185,134,.45);animation:livePulse 1.6s infinite}@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(40,185,134,.45)}70%{box-shadow:0 0 0 8px rgba(40,185,134,0)}100%{box-shadow:0 0 0 0 rgba(40,185,134,0)}}.realtime-chart-wrap{position:relative;height:390px;padding:12px 14px 0;background:linear-gradient(180deg,#fbfdff,#fff)}.realtime-chart{position:relative;width:100%;height:100%}.realtime-chart svg{display:block;width:100%;height:100%;overflow:visible}.realtime-grid-line{stroke:#e7edf2;stroke-width:1}.realtime-axis-label{fill:#8493a3;font-size:10px;font-weight:700}.realtime-line{fill:none;stroke:#2688c7;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.realtime-area{pointer-events:none}.realtime-threshold-line{stroke:#e5a04b;stroke-width:1.3;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}.realtime-threshold-text{fill:#bf7a29;font-size:9px;font-weight:900}.realtime-latest-ring{fill:#2688c7;opacity:.16}.realtime-latest-point{fill:#2688c7;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}.realtime-hit-layer{cursor:crosshair}.realtime-tooltip{position:absolute;z-index:5;min-width:96px;padding:8px 10px;border-radius:9px;background:#11263d;color:#fff;box-shadow:0 8px 22px rgba(14,34,55,.2);pointer-events:none}.realtime-tooltip strong,.realtime-tooltip span{display:block}.realtime-tooltip strong{font-size:10px}.realtime-tooltip span{margin-top:3px;color:#b9c9d7;font-size:7px}.realtime-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--muted)}.realtime-empty[hidden]{display:none}.realtime-empty strong{color:var(--text);font-size:12px}.realtime-empty span{margin-top:5px;font-size:9px}.realtime-chart-footer{display:flex;justify-content:space-between;gap:12px;padding:10px 18px 13px;border-top:1px solid #edf1f4;color:#8392a2;font-size:7px;font-weight:900;letter-spacing:.5px}
.realtime-channel-panel{margin-bottom:4px}.realtime-device-groups{padding:4px 16px 17px}.realtime-device-group+.realtime-device-group{margin-top:17px;padding-top:16px;border-top:1px solid #edf1f4}.realtime-device-group-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.realtime-device-group-head>div{display:flex;align-items:center;gap:9px}.realtime-device-group-head strong{font-size:9px;color:var(--primary)}.realtime-device-group-head span,.realtime-device-group-head small{color:var(--muted);font-size:8px}.realtime-channel-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.realtime-channel-button{position:relative;min-width:0;padding:10px;border:1px solid #dfe7ee;border-radius:11px;background:#fbfcfd;text-align:left;cursor:pointer;transition:.15s}.realtime-channel-button:hover{border-color:#b7cede;background:#f4f9fc}.realtime-channel-button.active{border-color:#7cb5da;background:#eef7fc;box-shadow:0 0 0 2px rgba(38,136,199,.08)}.realtime-channel-button>span{display:block;overflow:hidden;color:#638096;font-size:7px;font-weight:900;white-space:nowrap;text-overflow:ellipsis}.realtime-channel-button>strong{display:inline-block;margin-top:5px;font-size:15px;color:#243b51}.realtime-channel-button>small{margin-left:3px;color:#8b98a7;font-size:7px}.realtime-channel-button.active:after{content:'';position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:#27b486}
@media(max-width:1180px){.realtime-controls{grid-template-columns:1fr 1fr}.realtime-kpi-grid{grid-template-columns:repeat(3,1fr)}.realtime-kpi.featured{grid-column:span 1}.realtime-channel-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:680px){.realtime-controls{grid-template-columns:1fr}.realtime-kpi-grid{grid-template-columns:1fr 1fr}.realtime-kpi.featured{grid-column:1/-1}.realtime-chart-wrap{height:300px;padding:4px 5px 0}.realtime-chart-footer{flex-direction:column}.realtime-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.realtime-chart-status small{display:none}}

/* =========================================================
   Comfortable typography / larger information text
   Added for improved readability on monitoring displays.
   ========================================================= */
.brand-block strong{font-size:16px}
.brand-block span{font-size:11px}
.system-strip,.system-strip b{font-size:11px}
.nav-section{font-size:10px}
.nav-link{font-size:14px}
.nav-code,.nav-link em{font-size:11px}
.mini-kpi{font-size:11px}
.mini-kpi strong{font-size:12px}
.build{font-size:10px}

.page-heading span{font-size:11px}
.page-heading h1{font-size:26px}
.status-chip{font-size:12px}
.clock-box span{font-size:10px}
.clock-box strong{font-size:13px}
.industrial-button{font-size:12px}

.alarm-banner strong{font-size:13px}
.alarm-banner span,.safety-banner span{font-size:12px}
.alarm-banner a{font-size:11px}
.safety-banner strong{font-size:12px}

.kpi-label{font-size:11px}
.kpi-card>strong{font-size:35px}
.kpi-card>small{font-size:12px}

.panel-head span:first-child{font-size:10px}
.panel-head h2{font-size:18px}
.panel-head p{font-size:12px}
.panel-head>a{font-size:11px}
.tag{font-size:10px!important}

.module-code,.point-code{font-size:10px}
.state{font-size:10px}
.module-card h3{font-size:15px}
.module-card p{font-size:12px}
.module-meta span{font-size:10px}
.module-meta b{font-size:12px}

.compact-row>span{font-size:12px}
.compact-row strong{font-size:16px}
.compact-row small{font-size:10px}
.event-row strong{font-size:12px}
.event-row p{font-size:11px}
.event-row time{font-size:10px}
.severity{font-size:9px}

.page-toolbar b,.page-toolbar span,.toolbar-link{font-size:11px}
.floor-summary span,.alarm-stats span,.network-summary span{font-size:10px}
.floor-summary strong,.alarm-stats strong,.network-summary strong{font-size:24px}

.industrial-sensor .module-code,.industrial-sensor .point-code{font-size:10px}
.industrial-sensor>strong{font-size:28px}
.industrial-sensor>strong small{font-size:11px}
.industrial-sensor p{font-size:11px}
.quality{font-size:10px}

.sensor-code{font-size:10px}
.sensor-name{font-size:12px}
.digital-value{font-size:34px}
.digital-value small{font-size:11px}
.sensor-footer{font-size:10px}

.chart-label{font-size:11px}
.legend span{font-size:10px!important}

.actuator-title span:first-child{font-size:10px}
.actuator-title h3{font-size:15px}
.actuator-data>span{font-size:10px}
.actuator-data>strong{font-size:34px}
.actuator-data>strong small{font-size:12px}
.actuator-data dl div{font-size:10px}
.industrial-range>span,.industrial-range output{font-size:10px}
.control-buttons button{font-size:10px}
.trend-toolbar button,.trend-toolbar span{font-size:10px}

.industrial-table th{font-size:10px}
.industrial-table td{font-size:11px}

.report-field>span{font-size:10px}
.report-field input,.report-field select{font-size:12px}
.report-primary,.report-secondary,.report-export{font-size:10px}
.report-quick-range>span,.report-quick-range a{font-size:10px}
.report-summary-card span{font-size:10px}
.report-summary-card strong{font-size:24px}
.report-summary-card small{font-size:10px}
.report-range-label{font-size:10px!important}
.report-cell-sub{font-size:9px}
.report-channel-code{font-size:10px}
.report-value{font-size:13px}
.report-empty strong{font-size:13px}
.report-empty span{font-size:11px}
.report-pagination{font-size:10px}

.realtime-connection{font-size:10px}
.realtime-refresh-box>span{font-size:10px}
.realtime-refresh-box>strong{font-size:12px}
.realtime-refresh-box button{font-size:10px}
.realtime-kpi>span{font-size:10px}
.realtime-kpi>strong,.realtime-kpi>div strong{font-size:30px}
.realtime-kpi small,.realtime-kpi>div small{font-size:11px}
.realtime-kpi p{font-size:10px}
.realtime-kpi.featured>div strong{font-size:38px}
.realtime-chart-head p{font-size:10px}
.realtime-chart-status>span{font-size:10px}
.realtime-chart-status small{font-size:9px}
.realtime-axis-label{font-size:11px}
.realtime-threshold-text{font-size:10px}
.realtime-tooltip strong{font-size:12px}
.realtime-tooltip span{font-size:9px}
.realtime-empty strong{font-size:14px}
.realtime-empty span{font-size:11px}
.realtime-chart-footer{font-size:9px}
.realtime-device-group-head strong{font-size:11px}
.realtime-device-group-head span,.realtime-device-group-head small{font-size:10px}
.realtime-channel-button>span{font-size:9px}
.realtime-channel-button>strong{font-size:18px}
.realtime-channel-button>small{font-size:9px}

@media(max-width:680px){
  .page-heading h1{font-size:22px}
  .nav-link{font-size:14px}
  .kpi-card>strong{font-size:32px}
  .digital-value{font-size:32px}
  .industrial-sensor>strong{font-size:27px}
  .realtime-kpi.featured>div strong{font-size:35px}
}

/* Weather Station 1-second AJAX realtime feedback */
.digital-value .js-value{transition:opacity .16s ease,transform .16s ease}
.digital-value .js-value.live-value-pulse{animation:liveValuePulse .32s ease-out}
@keyframes liveValuePulse{0%{opacity:.55;transform:translateY(1px)}100%{opacity:1;transform:translateY(0)}}
#weatherRealtime .needle{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
#weatherRealtime .page-toolbar b{font-variant-numeric:tabular-nums}

/* =========================================================
   CONTROL CENTER V2 · flowchart-inspired operator interface
   ========================================================= */
.control-notice{display:flex;gap:14px;align-items:center;margin-bottom:14px;padding:12px 16px;border:1px solid #cae7d9;border-radius:12px;background:#f0fbf6}.control-notice strong{font-size:11px;color:#15785f}.control-notice span{font-size:12px;color:#557467}.control-notice.success:before{content:'✓';display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#27b486;color:white;font-weight:900}
.control-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:14px;padding:22px 24px;border:1px solid #d8e3ec;border-radius:16px;background:linear-gradient(135deg,#102b49 0%,#173d63 58%,#1d5375 100%);box-shadow:0 10px 28px rgba(16,43,73,.12);color:white}.control-kicker{font-size:10px;font-weight:900;letter-spacing:1.2px;color:#9ccbe7}.control-title-line{display:flex;align-items:center;gap:12px;margin-top:5px}.control-title-line h2{margin:0;font-size:30px;letter-spacing:-.8px}.control-hero-copy p{max-width:720px;margin:7px 0 0;color:#c4d8e7;font-size:12px;line-height:1.55}.control-state-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.6px}.control-state-pill i{width:7px;height:7px;border-radius:50%}.control-state-pill.safe{background:rgba(43,190,137,.16);color:#90e5c6;border:1px solid rgba(114,230,188,.3)}.control-state-pill.safe i{background:#4bd4a0}.control-state-pill.warning{background:rgba(243,173,68,.16);color:#ffd498;border:1px solid rgba(255,199,116,.3)}.control-state-pill.warning i{background:#f2b24c}.control-hero-meta{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:8px;min-width:390px}.control-hero-meta>div{padding:13px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.06)}.control-hero-meta span{display:block;font-size:8px;font-weight:900;color:#9fbcd2;letter-spacing:.6px}.control-hero-meta strong{display:block;margin-top:5px;font-size:23px;color:#fff}
.mode-selector-panel{margin-bottom:14px}.mode-selector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 17px}.mode-switch-form{min-width:0}.mode-choice{position:relative;width:100%;min-height:112px;padding:16px 16px 14px;border:1px solid #dce5ec;border-radius:14px;background:#fbfdff;text-align:left;cursor:pointer;transition:.18s;overflow:hidden}.mode-choice:hover:not(:disabled){transform:translateY(-1px);border-color:#a8bfd0;box-shadow:0 8px 18px rgba(22,53,79,.08)}.mode-choice:disabled{cursor:default}.mode-choice:before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:#879bac}.mode-choice.mode-s1:before{background:#3489c7}.mode-choice.mode-s2:before{background:#28ad78}.mode-choice.mode-manual:before{background:#e5a447}.mode-choice.active{background:linear-gradient(145deg,#f7fbff,#eef6fb);border-color:#9dc8e5;box-shadow:inset 0 0 0 1px rgba(52,137,199,.08)}.mode-choice.mode-s2.active{background:linear-gradient(145deg,#f5fcf9,#edf9f3);border-color:#9dd8c1}.mode-choice.mode-manual.active{background:linear-gradient(145deg,#fffaf2,#fff5e6);border-color:#edc987}.mode-choice strong{display:block;margin:8px 0 3px;font-size:17px;color:#203b54}.mode-choice small{display:block;font-size:10px;color:#718496}.mode-choice b{display:block;margin-top:11px;font-size:9px;color:#6e8496;letter-spacing:.5px}.mode-choice.active b{color:#1874aa}.mode-radio{display:grid;place-items:center;width:20px;height:20px;border:2px solid #c6d3dd;border-radius:50%}.mode-radio i{width:8px;height:8px;border-radius:50%;background:transparent}.mode-choice.active .mode-radio{border-color:#2a8bc8}.mode-choice.active .mode-radio i{background:#2a8bc8}.mode-choice.mode-s2.active .mode-radio{border-color:#28ad78}.mode-choice.mode-s2.active .mode-radio i{background:#28ad78}.mode-choice.mode-manual.active .mode-radio{border-color:#e5a447}.mode-choice.mode-manual.active .mode-radio i{background:#e5a447}
.control-grid{display:grid;gap:14px;margin-bottom:14px}.control-grid-main{grid-template-columns:1.6fr 1fr}.control-grid-bottom{grid-template-columns:1.25fr 1fr}.weather-control-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0 16px 17px}.control-metric{padding:13px;border:1px solid #e0e7ed;border-radius:12px;background:#fbfcfd}.control-metric>div{display:flex;justify-content:space-between;align-items:center;gap:6px}.control-metric span{font-size:10px;font-weight:800;color:#647b8e}.control-metric strong{display:flex;align-items:baseline;gap:4px;margin-top:8px}.control-metric strong b{font-size:23px;color:#203d55;font-variant-numeric:tabular-nums}.control-metric strong small{font-size:9px;color:#8494a3}.control-metric p{margin:5px 0 0;font-size:9px;color:#93a0ac}.health-device-list{padding:0 16px 16px}.health-device{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #edf1f4}.health-device:last-child{border-bottom:0}.health-device>div strong,.health-device>div small{display:block}.health-device>div strong{font-size:11px;color:#233d53}.health-device>div small{margin-top:2px;font-size:9px;color:#8795a2}.health-device>b{font-size:10px;color:#536b7d}
.facade-panel{margin-bottom:14px}.facade-overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 16px 17px}.facade-axis{padding:12px;border:1px solid #e0e7ed;border-radius:12px;background:#fbfcfd}.facade-axis-head{display:flex;justify-content:space-between;align-items:center}.facade-axis-head>strong{font-size:12px;color:#1d4c70}.facade-position-line{position:relative;height:11px;margin:18px 3px 10px;border-radius:999px;background:#e6edf2;overflow:visible}.position-fill-horizontal{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#2793c9,#36bea6);transition:width .45s ease}.target-pin{position:absolute;top:-5px;width:2px;height:21px;background:#e5a447;box-shadow:0 0 0 3px rgba(229,164,71,.12);transition:left .3s ease}.facade-axis-values{display:flex;justify-content:space-between;gap:8px}.facade-axis-values span{font-size:9px;color:#8493a1}.facade-axis-values b{color:#243e55;font-size:11px}
.decision-stage{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:0 16px 13px;padding:11px 12px;border:1px solid #dfe8ee;border-radius:10px;background:#f7fafc}.decision-stage>span{padding:4px 7px;border-radius:6px;background:#e9f3fa;color:#216f9f;font-size:9px;font-weight:900}.decision-stage strong{font-size:12px;color:#203a51}.decision-stage time{font-size:9px;color:#8393a2}.decision-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 16px;margin:0}.decision-detail-grid>div{padding:10px;border-radius:10px;background:#fbfcfd;border:1px solid #edf1f4}.decision-detail-grid dt{font-size:8px;font-weight:900;color:#8495a4;text-transform:uppercase;letter-spacing:.5px}.decision-detail-grid dd{margin:5px 0 0;font-size:11px;color:#30485c;line-height:1.45}.decision-result{display:inline-flex;padding:4px 7px;border-radius:6px;background:#eaf3fa;color:#2776a4;font-size:8px;font-weight:900;letter-spacing:.4px}.decision-result.warning{background:#fff2dd;color:#a96c14}.decision-result.error{background:#fde7e7;color:#b24444}.decision-result.success{background:#e8f7f0;color:#25825f}.control-empty{padding:26px 18px;text-align:center;color:#82909d}.control-empty strong,.control-empty span{display:block}.control-empty strong{color:#344c60;font-size:12px}.control-empty span{margin-top:5px;font-size:10px}
.safety-check-list{padding:0 16px 16px}.safety-check{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #edf1f4}.safety-check:last-child{border-bottom:0}.safety-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#e8f7f0;color:#25825f;font-size:11px;font-weight:900}.safety-check.warning .safety-icon,.safety-check.offline .safety-icon{background:#fff0dd;color:#b16f15}.safety-check.info .safety-icon{background:#eaf3fa;color:#297aa8}.safety-check div strong,.safety-check div small{display:block}.safety-check div strong{font-size:10px;color:#2b4357}.safety-check div small{margin-top:2px;font-size:8px;color:#8b98a5}.safety-check>b{font-size:9px;color:#536b7d;text-align:right}.safety-check.warning>b,.safety-check.offline>b{color:#a96a13}

/* System Mode page */
.mode-page-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;margin-bottom:14px}.mode-page-hero>div:first-child>span{font-size:9px;font-weight:900;color:#73899c}.mode-page-hero h2{margin:5px 0 4px;font-size:26px;color:#173d5d}.mode-page-hero p{max-width:760px;margin:0;color:#718393;font-size:11px;line-height:1.5}.mode-page-state{text-align:right}.mode-page-state>span,.mode-page-state>small{display:block;font-size:8px;color:#8796a3}.mode-page-state>strong{display:inline-block;margin:5px 0;padding:5px 8px;border-radius:6px;font-size:10px}.mode-page-state>strong.safe{background:#e8f7f0;color:#21805e}.mode-page-state>strong.warning{background:#fff0dd;color:#a96b14}.mode-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.mode-page-card{width:100%;min-height:180px;padding:20px;border:1px solid #dce5ec;border-radius:15px;background:#fff;text-align:left;cursor:pointer;transition:.18s}.mode-page-card:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 24px rgba(27,57,82,.08)}.mode-page-card.active{border-width:2px}.mode-page-card.blue.active{border-color:#3989c2;background:#f4faff}.mode-page-card.green.active{border-color:#36ae80;background:#f2fbf6}.mode-page-card.amber.active{border-color:#e1a54d;background:#fff9ef}.mode-page-card>span{font-size:8px;font-weight:900;color:#8795a2;letter-spacing:.5px}.mode-page-card>strong{display:block;margin-top:12px;font-size:18px;color:#203b53}.mode-page-card>p{min-height:48px;margin:7px 0 14px;font-size:10px;line-height:1.5;color:#768898}.mode-page-card>b{font-size:9px;color:#347fae}.mode-content-grid{align-items:start}.rule-stage-list{padding:0 16px 17px}.rule-stage-list article{display:grid;grid-template-columns:60px 1fr 28px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #edf1f4}.rule-stage-list article:last-child{border-bottom:0}.rule-stage-list article>span{font-size:9px;font-weight:900;color:#25825f}.rule-stage-list article strong{font-size:11px;color:#273f53}.rule-stage-list article p{margin:3px 0 0;font-size:9px;color:#8594a1}.rule-stage-list article>b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#edf7f2;color:#27805f;font-size:9px}.safety-check-list.compact{padding-bottom:10px}.mode-transition-panel{margin-top:14px}.transition-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 16px 14px}.transition-grid>div{padding:11px;border:1px solid #e3e9ee;border-radius:10px;background:#fafcfd}.transition-grid strong,.transition-grid span{display:block}.transition-grid strong{font-size:10px;color:#24435b}.transition-grid span{margin-top:4px;font-size:9px;color:#81909d;line-height:1.45}.integration-note{display:flex;gap:12px;margin:0 16px 16px;padding:10px 12px;border-radius:9px;background:#fff8ea;border:1px solid #f1ddb6}.integration-note strong{font-size:9px;color:#9c6a20}.integration-note span{font-size:9px;color:#7e704f}

/* Decision log */
.decision-report-filter{margin-bottom:14px;padding:14px 16px}.decision-filter-form{display:grid;grid-template-columns:180px 180px 220px auto;gap:10px;align-items:end}.decision-filter-form label>span{display:block;margin-bottom:5px;font-size:9px;font-weight:900;color:#76899a}.decision-filter-form input,.decision-filter-form select{width:100%;height:38px;padding:0 10px;border:1px solid #dce5ec;border-radius:8px;background:#fff;color:#2b4458;font-size:11px}.decision-filter-actions{display:flex;gap:7px}.decision-filter-actions button,.decision-filter-actions a{display:inline-flex;height:38px;align-items:center;justify-content:center;padding:0 14px;border-radius:8px;font-size:9px;font-weight:900;text-decoration:none}.decision-filter-actions button{border:0;background:#1d6f9f;color:#fff}.decision-filter-actions a{border:1px solid #dce5ec;color:#637b8e;background:#fff}.decision-table td small{display:block;margin-top:2px;color:#8d9aa5;font-size:8px}.mode-table-badge{display:inline-flex;padding:4px 7px;border-radius:6px;font-size:8px;font-weight:900}.mode-table-badge.s1{background:#e9f3fa;color:#2675a5}.mode-table-badge.s2{background:#e8f7f0;color:#21805e}.mode-table-badge.manual{background:#fff0dd;color:#a96b14}

@media(max-width:1180px){.control-hero{align-items:flex-start;flex-direction:column}.control-hero-meta{min-width:0;width:100%}.control-grid-main,.control-grid-bottom{grid-template-columns:1fr}.weather-control-grid{grid-template-columns:repeat(3,1fr)}.facade-overview-grid{grid-template-columns:repeat(2,1fr)}.decision-filter-form{grid-template-columns:1fr 1fr}.decision-filter-actions{grid-column:1/-1}.mode-content-grid{grid-template-columns:1fr!important}}
@media(max-width:720px){.control-title-line{align-items:flex-start;flex-direction:column}.control-title-line h2{font-size:25px}.control-hero-meta{grid-template-columns:1fr 1fr}.mode-selector-grid,.mode-page-grid{grid-template-columns:1fr}.weather-control-grid{grid-template-columns:1fr 1fr}.facade-overview-grid{grid-template-columns:1fr}.decision-detail-grid,.transition-grid{grid-template-columns:1fr}.decision-filter-form{grid-template-columns:1fr}.decision-filter-actions{grid-column:auto}.mode-page-hero{align-items:flex-start;flex-direction:column}.mode-page-state{text-align:left}.health-device{grid-template-columns:auto 1fr}.health-device>b{grid-column:2}.safety-check{grid-template-columns:auto 1fr}.safety-check>b{grid-column:2;text-align:left}.control-hero-meta>div:last-child{grid-column:1/-1}}


/* =========================================================
   Actuator rotary encoder zero calibration
   ========================================================= */
.encoder-calibration{
    margin-top:10px;
    padding:11px 12px;
    border:1px solid #d9e6ef;
    border-radius:11px;
    background:#f7fbfd;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}
.encoder-calibration>div{min-width:0}
.encoder-calibration span{
    display:block;
    color:#45677f;
    font-size:10px;
    font-weight:900;
    letter-spacing:.45px
}
.encoder-calibration small{
    display:block;
    margin-top:4px;
    color:#8192a1;
    font-size:9px;
    line-height:1.35
}
.zero-encoder-button{
    flex:0 0 auto;
    min-width:92px;
    border:1px solid #d7b56d;
    border-radius:9px;
    background:#fff9e9;
    color:#9a6918;
    padding:10px 12px;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
    transition:.15s
}
.zero-encoder-button:hover{
    background:#fff2cf;
    border-color:#cfa347
}
.zero-encoder-button:disabled,
.zero-encoder-button.is-sending{
    opacity:.55;
    cursor:not-allowed
}
@media(max-width:680px){
    .encoder-calibration{align-items:stretch;flex-direction:column}
    .zero-encoder-button{width:100%}
}


/* =========================================================
   Remote AC control
   ========================================================= */
.ac-control-layout{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
    gap:16px;
    margin-bottom:16px
}
.ac-power-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:14px 0 18px
}
.ac-power-button{
    border:1px solid #d9e4ec;
    background:#f7fafc;
    color:#617688;
    min-height:52px;
    border-radius:12px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.35px;
    cursor:pointer
}
.ac-power-button.on.active{
    border-color:#87d5b6;
    background:#edf9f4;
    color:#137a55
}
.ac-power-button.off.active{
    border-color:#d7dee4;
    background:#edf1f4;
    color:#445868
}
.ac-setpoint-block{
    border:1px solid #dce7ee;
    border-radius:14px;
    padding:16px;
    background:#fbfdfe
}
.ac-setpoint-block>span,
.ac-select-grid label>span{
    display:block;
    color:#6a7f90;
    font-size:11px;
    font-weight:900;
    letter-spacing:.45px;
    margin-bottom:10px
}
.ac-setpoint-control{
    display:grid;
    grid-template-columns:48px 1fr 48px;
    gap:12px;
    align-items:center
}
.ac-setpoint-control button{
    height:44px;
    border:1px solid #d8e3eb;
    background:#fff;
    border-radius:10px;
    font-size:24px;
    font-weight:700;
    color:#315b77;
    cursor:pointer
}
.ac-setpoint-control strong{
    text-align:center;
    font-size:36px;
    line-height:1;
    color:#173c57
}
.ac-setpoint-control strong small{
    font-size:14px;
    margin-left:4px;
    color:#7590a3
}
#acSetpointRange{width:100%;margin:17px 0 12px}
.ac-apply-temp{width:100%;min-height:40px}
.ac-select-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:14px
}
.ac-select-grid label{
    border:1px solid #dce7ee;
    border-radius:12px;
    padding:13px;
    background:#fbfdfe
}
.ac-select-grid select{
    width:100%;
    border:1px solid #d7e3eb;
    border-radius:9px;
    background:#fff;
    min-height:42px;
    padding:0 10px;
    color:#284f69;
    font-weight:800
}
.ac-telemetry-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
.ac-telemetry-grid>div{
    border:1px solid #e0e8ee;
    background:#fafcfd;
    border-radius:11px;
    padding:13px
}
.ac-telemetry-grid span{
    display:block;
    color:#798c9b;
    font-size:10px;
    font-weight:900;
    letter-spacing:.4px
}
.ac-telemetry-grid strong{
    display:block;
    margin-top:6px;
    color:#1f4b67;
    font-size:16px
}
@media(max-width:960px){
    .ac-control-layout{grid-template-columns:1fr}
}
@media(max-width:620px){
    .ac-select-grid,.ac-telemetry-grid{grid-template-columns:1fr}
}


/* =========================================================
   GLOBAL STATUS COLOR STANDARD
   ONLINE  = GREEN
   OFFLINE = RED
   WARNING = ORANGE
   ========================================================= */

.state.online,
.tag.online,
.status.online,
.badge.online,
.device-status.online,
.connection-status.online,
.system-status.online {
    color: #0f8a5f !important;
    background: #eaf8f2 !important;
    border-color: #8bd8b8 !important;
}

.state.offline,
.tag.offline,
.status.offline,
.badge.offline,
.device-status.offline,
.connection-status.offline,
.system-status.offline {
    color: #c83232 !important;
    background: #fff0f0 !important;
    border-color: #efaaaa !important;
}

.state.warning,
.tag.warning,
.status.warning,
.badge.warning,
.device-status.warning,
.connection-status.warning,
.system-status.warning {
    color: #b76a08 !important;
    background: #fff6e8 !important;
    border-color: #f1c57c !important;
}

.state.online i,
.status.online i,
.device-status.online i,
.connection-status.online i,
.system-status.online i,
.online .status-dot,
.status-dot.online,
.live-dot.online {
    background: #22b573 !important;
    box-shadow: 0 0 0 4px rgba(34,181,115,.12) !important;
}

.state.offline i,
.status.offline i,
.device-status.offline i,
.connection-status.offline i,
.system-status.offline i,
.offline .status-dot,
.status-dot.offline,
.live-dot.offline {
    background: #e34b4b !important;
    box-shadow: 0 0 0 4px rgba(227,75,75,.12) !important;
}

.state.warning i,
.status.warning i,
.device-status.warning i,
.connection-status.warning i,
.system-status.warning i,
.warning .status-dot,
.status-dot.warning,
.live-dot.warning {
    background: #e89a2f !important;
    box-shadow: 0 0 0 4px rgba(232,154,47,.12) !important;
}

.control-state-pill.safe,
.control-state-pill.online {
    color: #0f8a5f !important;
    background: #eaf8f2 !important;
    border-color: #8bd8b8 !important;
}

.control-state-pill.warning {
    color: #b76a08 !important;
    background: #fff6e8 !important;
    border-color: #f1c57c !important;
}

.control-state-pill.offline,
.control-state-pill.danger,
.control-state-pill.fault {
    color: #c83232 !important;
    background: #fff0f0 !important;
    border-color: #efaaaa !important;
}

.control-state-pill.safe i,
.control-state-pill.online i {
    background: #22b573 !important;
}

.control-state-pill.offline i,
.control-state-pill.danger i,
.control-state-pill.fault i {
    background: #e34b4b !important;
}

.device-card.online,
.status-card.online {
    border-color: #a4dec6 !important;
}

.device-card.offline,
.status-card.offline {
    border-color: #efaaaa !important;
    background: #fff8f8 !important;
}

.device-card.warning,
.status-card.warning {
    border-color: #f1c57c !important;
}

.text-online,
.status-text.online {
    color: #0f8a5f !important;
}

.text-offline,
.status-text.offline {
    color: #c83232 !important;
}

.text-warning,
.status-text.warning {
    color: #b76a08 !important;
}

.device-card .offline,
.status-card .offline,
.industrial-panel .offline,
.control-hero .offline,
.table-wrap .offline {
    color: #c83232 !important;
}

.device-card .online,
.status-card .online,
.industrial-panel .online,
.control-hero .online,
.table-wrap .online {
    color: #0f8a5f !important;
}


/* =========================================================
   ACTUATOR MOTOR CONTROL
   ========================================================= */
.motor-live-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 12px;
    margin:10px 0;
    border:1px solid #dbe6ed;
    border-radius:11px;
    background:#f9fbfc;
}
.motor-live-row>div>span{
    display:block;
    font-size:10px;
    font-weight:900;
    letter-spacing:.45px;
    color:#60798b;
}
.motor-live-row>div>small{
    display:block;
    margin-top:3px;
    font-size:10px;
    color:#8497a5;
}
.motor-state-value{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-width:70px;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid #d9e3e9;
    font-size:11px;
    font-weight:900;
}
.motor-state-value i{
    width:8px;
    height:8px;
    border-radius:50%;
}
.motor-state-value.is-on{
    color:#0f8a5f;
    background:#eaf8f2;
    border-color:#8bd8b8;
}
.motor-state-value.is-on i{
    background:#22b573;
    box-shadow:0 0 0 4px rgba(34,181,115,.12);
}
.motor-state-value.is-off{
    color:#c83232;
    background:#fff0f0;
    border-color:#efaaaa;
}
.motor-state-value.is-off i{
    background:#e34b4b;
    box-shadow:0 0 0 4px rgba(227,75,75,.12);
}
.motor-control-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:8px 0 12px;
}
.motor-control-buttons button{
    min-height:38px;
    border-radius:9px;
    border:1px solid #d8e3ea;
    font-size:11px;
    font-weight:900;
    letter-spacing:.35px;
    cursor:pointer;
}
.motor-off-button{
    color:#bd3838;
    background:#fff4f4;
    border-color:#efb4b4 !important;
}
.motor-on-button{
    color:#0f8058;
    background:#eef9f4;
    border-color:#9bd9c0 !important;
}
.motor-control-buttons button:disabled{
    opacity:.55;
    cursor:not-allowed;
}


/* =========================================================
   MOTOR 3-STATE: MAJU / MUNDUR / OFF
   ========================================================= */
.motor-direction-buttons{
    grid-template-columns:1fr 1fr 1fr !important;
}
.motor-forward-button{
    color:#0f8058;
    background:#eef9f4;
    border-color:#9bd9c0 !important;
}
.motor-reverse-button{
    color:#245f9b;
    background:#eef5fc;
    border-color:#a9c8e9 !important;
}

.motor-state-value.is-forward{
    color:#0f8a5f;
    background:#eaf8f2;
    border-color:#8bd8b8;
}
.motor-state-value.is-forward i{
    background:#22b573;
    box-shadow:0 0 0 4px rgba(34,181,115,.12);
}

.motor-state-value.is-reverse{
    color:#245f9b;
    background:#eef5fc;
    border-color:#a9c8e9;
}
.motor-state-value.is-reverse i{
    background:#397fc2;
    box-shadow:0 0 0 4px rgba(57,127,194,.12);
}

.motor-state-value.is-off{
    color:#c83232;
    background:#fff0f0;
    border-color:#efaaaa;
}
.motor-state-value.is-off i{
    background:#e34b4b;
    box-shadow:0 0 0 4px rgba(227,75,75,.12);
}


/* =========================================================
   FINAL ACTUATOR CONTROL
   Manual motor and target position are separate controls.
   ========================================================= */
.target-position-control{
    margin:10px 0 12px;
    padding:12px;
    border:1px solid #dce7ee;
    border-radius:12px;
    background:#fbfdfe;
}
.target-position-control .industrial-range{
    margin:0 0 10px;
}
.set-target-button{
    width:100%;
    min-height:40px;
    border:1px solid #8eb8d4;
    border-radius:9px;
    background:#eef7fc;
    color:#1e628b;
    font-size:11px;
    font-weight:900;
    letter-spacing:.4px;
    cursor:pointer;
}
.set-target-button:hover{
    background:#e3f2fa;
}
.set-target-button:disabled,
.set-target-button.is-sending{
    opacity:.55;
    cursor:not-allowed;
}


/* =========================================================
   SIDEBAR - no green live dots
   ========================================================= */
.sidebar .nav-live-dot,
.sidebar .system-strip .led{
    display:none !important;
}

/* =========================================================
   POWER MONITORING - 6 PZEM
   ========================================================= */
.power-dashboard{
    display:grid;
    gap:18px;
}
.power-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}
.power-summary-card{
    padding:17px 18px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--shadow);
}
.power-summary-card>span{
    display:block;
    color:var(--muted);
    font-size:8px;
    font-weight:900;
    letter-spacing:.8px;
}
.power-summary-card>strong{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-top:7px;
    font-size:27px;
    letter-spacing:-.8px;
}
.power-summary-card>strong b{
    font:inherit;
}
.power-summary-card>strong small{
    color:var(--muted);
    font-size:10px;
    letter-spacing:0;
}
.power-summary-card>p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:8px;
}
.power-meter-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}
.power-meter-card{
    min-width:0;
}
.power-reading-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    padding:6px 17px 15px;
}
.power-reading{
    min-width:0;
    padding:13px 10px;
    border-bottom:1px solid #edf1f4;
}
.power-reading:nth-last-child(-n+2){
    border-bottom:0;
}
.power-reading>span{
    display:block;
    color:var(--muted);
    font-size:8px;
    font-weight:900;
    letter-spacing:.55px;
}
.power-reading>strong{
    display:flex;
    align-items:baseline;
    gap:5px;
    margin-top:5px;
    font-size:20px;
    letter-spacing:-.45px;
}
.power-reading>strong b{
    font:inherit;
}
.power-reading>strong small{
    color:var(--muted);
    font-size:9px;
}

@media (max-width:1200px){
    .power-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .power-meter-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:720px){
    .power-summary-grid,
    .power-meter-grid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   GLOBAL GATEWAY STATUS
   Visible on every monitoring/control/analytics menu.
   ========================================================= */
.global-gateway-status{
    margin-bottom:18px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 22px rgba(24,45,72,.045);
}
.global-gateway-status-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:11px;
}
.global-gateway-status-head span{
    display:block;
    color:var(--primary);
    font-size:8px;
    font-weight:900;
    letter-spacing:1px;
}
.global-gateway-status-head strong{
    display:block;
    margin-top:2px;
    font-size:14px;
}
.global-gateway-status-head small{
    color:var(--muted);
    font-size:8px;
    font-weight:800;
}
.global-gateway-status-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
}
.gateway-status-item{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:9px 10px;
    border:1px solid #e7edf2;
    border-radius:11px;
    background:#f9fbfd;
}
.gateway-status-item>div{
    min-width:0;
}
.gateway-status-item strong,
.gateway-status-item span{
    display:block;
}
.gateway-status-item strong{
    overflow:hidden;
    color:var(--text);
    font-size:9px;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.gateway-status-item>div>span{
    margin-top:2px;
    color:var(--muted);
    font-size:7px;
    font-weight:800;
}
.gateway-status-badge{
    flex:0 0 auto;
    min-width:58px;
    padding:5px 7px;
    border-radius:999px;
    text-align:center;
    font-size:7px;
    font-weight:900;
    letter-spacing:.4px;
}
.gateway-status-badge.online,
.state.online{
    border:1px solid #bce8d5;
    background:#eaf8f2;
    color:#168a5f;
}
.gateway-status-badge.warning,
.state.warning{
    border:1px solid #f0d4ae;
    background:#fff4e5;
    color:#cb7625;
}
.gateway-status-badge.offline,
.state.offline{
    border:1px solid #efc4c8;
    background:#fff0f1;
    color:#cf4e59;
}
.power-meter-head .gateway-status-badge{
    margin-left:auto;
}

/* Sidebar tetap tanpa titik status hijau. */
.sidebar .nav-live-dot,
.sidebar .system-strip .led{
    display:none !important;
}

@media (max-width:1400px){
    .global-gateway-status-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}
@media (max-width:900px){
    .global-gateway-status-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:520px){
    .global-gateway-status-grid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   SIDEBAR SCROLL FIX
   Sidebar tetap fixed tetapi isi dapat di-scroll vertikal.
   ========================================================= */
.sidebar{
    height:100vh;
    height:100dvh;
    min-height:0;

    overflow-y:auto;
    overflow-x:hidden;

    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;

    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.20) transparent;
}

/* Jangan biarkan item sidebar mengecil ketika tinggi layar terbatas. */
.sidebar .brand-block,
.sidebar .system-strip,
.sidebar .nav-menu,
.sidebar .sidebar-footer{
    flex-shrink:0;
}

/* Footer tetap di bawah jika ruang cukup,
   tetapi tetap bisa dicapai dengan scroll jika menu lebih panjang. */
.sidebar .sidebar-footer{
    margin-top:auto;
    padding-bottom:6px;
}

/* Scrollbar Chrome / Edge / Safari */
.sidebar::-webkit-scrollbar{
    width:6px;
}

.sidebar::-webkit-scrollbar-track{
    background:transparent;
}

.sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.18);
    border-radius:999px;
}

.sidebar::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.32);
}

/* Pada mobile sidebar yang slide-in tetap memiliki full-height scroll. */
@media(max-width:980px){
    .sidebar{
        height:100dvh;
        max-height:100dvh;
        overflow-y:auto;
    }
}


/* =========================================================
   SIDEBAR WIDTH FIX
   Lebarkan sidebar agar nama menu tidak turun ke dua baris.
   ========================================================= */
@media (min-width:981px){
    .sidebar{
        width:310px;
    }

    .workspace{
        margin-left:310px;
        width:calc(100% - 310px);
    }
}

/* Beri ruang maksimum pada nama menu dan cegah wrapping. */
.sidebar .nav-link > span:not(.nav-code){
    flex:1 1 auto;
    min-width:0;
    white-space:nowrap;
}

/* Badge channel tetap berada di sisi kanan. */
.sidebar .nav-link > em{
    flex:0 0 auto;
    margin-left:auto;
}

/* Mobile: sidebar tetap nyaman dan tidak melebihi lebar layar. */
@media (max-width:980px){
    .sidebar{
        width:min(310px, calc(100vw - 24px));
        max-width:calc(100vw - 24px);
    }
}


/* =========================================================
   SIDEBAR HIDE / UNHIDE TOGGLE
   ========================================================= */
.sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

@media (min-width:981px){
    .sidebar,
    .workspace,
    .sidebar-visibility-toggle{
        transition:
            transform .24s ease,
            margin-left .24s ease,
            width .24s ease,
            left .24s ease;
    }

    .sidebar-visibility-toggle{
        position:fixed;
        z-index:70;
        top:94px;
        left:293px;

        width:34px;
        height:42px;

        display:grid;
        place-items:center;

        padding:0;
        border:1px solid #d7e1ea;
        border-radius:0 10px 10px 0;

        background:#fff;
        color:#47647d;

        box-shadow:5px 6px 18px rgba(9,28,48,.12);
        cursor:pointer;
    }

    .sidebar-visibility-toggle:hover{
        background:#f5f9fc;
        color:var(--primary);
    }

    .sidebar-toggle-icon{
        display:block;
        font-size:25px;
        line-height:1;
        transform:translateY(-1px);
    }

    body.sidebar-hidden .sidebar{
        transform:translateX(-100%);
    }

    body.sidebar-hidden .workspace{
        margin-left:0;
        width:100%;
    }

    body.sidebar-hidden .sidebar-visibility-toggle{
        left:0;
        border-radius:0 10px 10px 0;
    }
}

/* Mobile sudah menggunakan hamburger/menuButton bawaan. */
@media (max-width:980px){
    .sidebar-visibility-toggle{
        display:none !important;
    }
}


/* =========================================================
   S1 / S2 REACTIVE CONTROL
   ========================================================= */
.s1s2-alert{
    margin-bottom:16px;
    padding:12px 14px;
    border:1px solid #b9dfd0;
    border-radius:12px;
    background:#ecf8f3;
    color:#177256;
    font-size:10px;
    font-weight:800;
}
.s1s2-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
    padding:22px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(24,45,72,.05);
}
.s1s2-kicker{
    color:var(--primary);
    font-size:8px;
    font-weight:900;
    letter-spacing:1px;
}
.s1s2-hero h1{
    margin:5px 0 6px;
    font-size:23px;
}
.s1s2-hero p{
    margin:0;
    color:var(--muted);
    font-size:10px;
}
.s1s2-hero-status{
    min-width:260px;
    padding:14px;
    border:1px solid #e2eaf0;
    border-radius:13px;
    background:#f8fbfd;
}
.s1s2-hero-status span,
.s1s2-hero-status strong,
.s1s2-hero-status small{
    display:block;
}
.s1s2-hero-status span{
    color:var(--muted);
    font-size:7px;
    font-weight:900;
    letter-spacing:.7px;
}
.s1s2-hero-status strong{
    margin:4px 0;
    font-size:14px;
}
.s1s2-hero-status small{
    color:var(--muted);
    font-size:8px;
    line-height:1.45;
}
.s1s2-grid-two{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-bottom:16px;
}
.s1s2-panel{
    margin-bottom:16px;
}
.s1s2-mode-buttons{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.s1s2-mode-buttons form{
    margin:0;
}
.s1s2-mode-button{
    width:100%;
    min-height:114px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:3px;
    padding:16px;
    border:1px solid #dce6ed;
    border-radius:14px;
    background:#f8fbfd;
    color:var(--text);
    cursor:pointer;
    text-align:left;
}
.s1s2-mode-button:hover{
    border-color:#b8d2e5;
    background:#f2f8fc;
}
.s1s2-mode-button.selected{
    border-color:#7fb4d7;
    background:#edf7fd;
    box-shadow:inset 0 0 0 1px rgba(22,105,158,.08);
}
.s1s2-mode-button b{
    color:var(--primary);
    font-size:22px;
}
.s1s2-mode-button span{
    font-size:12px;
    font-weight:900;
}
.s1s2-mode-button small{
    color:var(--muted);
    font-size:8px;
}
.s1s2-note{
    margin:12px 0 0;
    color:var(--muted);
    font-size:8px;
    line-height:1.6;
}
.s1s2-engine-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:12px;
}
.s1s2-engine-row>div{
    padding:12px;
    border:1px solid #e4ebf1;
    border-radius:12px;
    background:#f9fbfd;
}
.s1s2-engine-row span,
.s1s2-engine-row strong{
    display:block;
}
.s1s2-engine-row span{
    color:var(--muted);
    font-size:7px;
    font-weight:900;
}
.s1s2-engine-row strong{
    margin-top:4px;
    font-size:13px;
}
.s1s2-action-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.s1s2-action-row form{
    margin:0;
}
.s1s2-wide-button{
    width:100%;
}
.s1s2-warning-box{
    margin-top:12px;
    padding:11px 12px;
    border:1px solid #f0d3ac;
    border-radius:10px;
    background:#fff6e9;
    color:#a9621f;
    font-size:8px;
    font-weight:800;
    line-height:1.55;
}
.s1s2-readiness-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.s1s2-readiness-item{
    padding:12px;
    border:1px solid #e4ebf1;
    border-radius:12px;
    background:#fafcfd;
}
.s1s2-readiness-item span,
.s1s2-readiness-item strong,
.s1s2-readiness-item small{
    display:block;
}
.s1s2-readiness-item span{
    color:var(--muted);
    font-size:7px;
    font-weight:900;
}
.s1s2-readiness-item strong{
    margin:4px 0;
    font-size:10px;
}
.s1s2-readiness-item strong.ok{
    color:#15845b;
}
.s1s2-readiness-item strong.not-ready{
    color:#c56f23;
}
.s1s2-readiness-item small{
    color:var(--muted);
    font-size:8px;
}
.s1s2-metric-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.s1s2-metric-grid>div{
    padding:13px;
    border:1px solid #e4ebf1;
    border-radius:12px;
    background:#f9fbfd;
}
.s1s2-metric-grid span,
.s1s2-metric-grid strong{
    display:block;
}
.s1s2-metric-grid span{
    color:var(--muted);
    font-size:7px;
    font-weight:900;
}
.s1s2-metric-grid strong{
    margin-top:5px;
    font-size:15px;
}
.s1s2-threshold-list{
    display:grid;
    gap:0;
}
.s1s2-threshold-list>div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:9px 2px;
    border-bottom:1px solid #edf1f4;
    font-size:9px;
}
.s1s2-threshold-list>div:last-child{
    border-bottom:0;
}
.s1s2-threshold-list span{
    color:var(--muted);
}
.s1s2-decision-table-wrap{
    width:100%;
    overflow:auto;
}
.s1s2-decision-table{
    width:100%;
    min-width:1050px;
    border-collapse:collapse;
}
.s1s2-decision-table th{
    padding:9px 10px;
    border-bottom:1px solid #dce5ec;
    color:var(--muted);
    font-size:7px;
    letter-spacing:.5px;
    text-align:left;
}
.s1s2-decision-table td{
    padding:11px 10px;
    border-bottom:1px solid #edf1f4;
    vertical-align:top;
    font-size:8px;
}
.s1s2-decision-table td strong,
.s1s2-decision-table td span,
.s1s2-decision-table td small{
    display:block;
}
.s1s2-decision-table td span{
    margin-top:2px;
    color:var(--muted);
    line-height:1.45;
}
.s1s2-decision-table td small{
    margin-top:4px;
    color:#8594a3;
    font-size:7px;
}
.s1s2-result{
    display:inline-block !important;
    width:max-content;
    padding:5px 7px;
    border-radius:999px;
    background:#edf2f6;
    color:#54697c !important;
    font-size:7px;
    font-weight:900;
}
.s1s2-result.queued,
.s1s2-result.enabled{
    background:#e9f8f1;
    color:#15845b !important;
}
.s1s2-result.dry_run,
.s1s2-result.paused,
.s1s2-result.blocked,
.s1s2-result.not_integrated{
    background:#fff3e3;
    color:#bd6a21 !important;
}
.s1s2-result.clamped{
    background:#eef3fa;
    color:#496d95 !important;
}
@media(max-width:1000px){
    .s1s2-grid-two{
        grid-template-columns:1fr;
    }
    .s1s2-readiness-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:640px){
    .s1s2-hero{
        align-items:stretch;
        flex-direction:column;
    }
    .s1s2-hero-status{
        min-width:0;
    }
    .s1s2-mode-buttons,
    .s1s2-action-row,
    .s1s2-engine-row,
    .s1s2-metric-grid,
    .s1s2-readiness-grid{
        grid-template-columns:1fr;
    }
}