
/* IoT + Hybrid extension */
.nav-section-label{padding:13px 16px 5px;color:#9db0d0;font-size:8px;font-weight:800;letter-spacing:.08em}
.hybrid-mode{background:linear-gradient(135deg,rgba(20,167,108,.18),rgba(255,157,0,.14));border:1px solid rgba(255,255,255,.12)}
.iot-connectivity-strip{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:10px;margin:14px 0}
.connectivity-main,.connectivity-stat{background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px}
.connectivity-main{background:linear-gradient(135deg,#082c6c,#12468f);color:#fff}
.connectivity-main .pulse-dot{box-shadow:0 0 0 7px rgba(39,218,139,.13)}
.connectivity-main b,.connectivity-main small,.connectivity-stat b,.connectivity-stat small{display:block}
.connectivity-main small{color:#cbd9f3;font-size:8px}.connectivity-stat small{color:var(--muted);font-size:8px}.connectivity-stat strong{margin-right:auto;color:var(--navy)}
.data-source-panel{border:1px solid #cfe0f8;background:linear-gradient(135deg,#f5f9ff,#fff9ef);border-radius:18px;padding:16px;margin-bottom:18px}
.data-source-panel h4{margin:3px 0}.data-source-panel p{margin:0;color:var(--muted);font-size:10px}
.source-mode-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0}
.source-mode-selector label{cursor:pointer}.source-mode-selector input{position:absolute;opacity:0}
.source-mode-selector span{display:block;text-align:center;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;font-weight:800;font-size:10px}
.source-mode-selector input:checked+span{border-color:var(--orange);background:#fff3dd;color:var(--navy);box-shadow:0 0 0 2px rgba(255,157,0,.12)}
.source-actions{display:flex;gap:8px;flex-wrap:wrap}.sensor-import-status{font-size:9px;color:var(--muted);margin-top:10px;padding-top:9px;border-top:1px dashed #d7e1ef}
.sensor-import-status.success{color:var(--green);font-weight:700}.sensor-import-status.warning{color:#aa6c00}
.iot-hero{background:linear-gradient(135deg,#061e4e,#0b3d84 63%,#ff9d00);color:#fff}
.iot-hero p{color:#dce8fb}.hero-live-cluster{min-width:165px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:12px 16px;border-radius:17px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1px 9px}
.hero-live-cluster small{grid-column:2;color:#dce8fb;font-size:8px}.pulse-dot{width:10px;height:10px;border-radius:50%;background:#24d88a;display:inline-block;box-shadow:0 0 0 0 rgba(36,216,138,.45);animation:pulseIoT 1.8s infinite}
@keyframes pulseIoT{70%{box-shadow:0 0 0 10px rgba(36,216,138,0)}100%{box-shadow:0 0 0 0 rgba(36,216,138,0)}}
.iot-main-grid{align-items:stretch}.live-sensor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.live-sensor-card{border:1px solid var(--line);border-radius:15px;padding:12px;background:#fbfcff;position:relative;overflow:hidden}
.live-sensor-card:before{content:"";position:absolute;right:0;top:0;bottom:0;width:4px;background:var(--sensor-accent,#082c6c)}
.live-sensor-card.warning:before{background:#ff9d00}.live-sensor-card.offline:before{background:#e84d5b}
.sensor-card-top{display:flex;justify-content:space-between;align-items:center}.sensor-card-top span{font-size:8px;color:var(--muted)}
.sensor-value{font-size:24px;color:var(--navy);font-weight:900;margin:9px 0 2px}.sensor-value small{font-size:10px;color:var(--muted)}
.sensor-card-meta{display:flex;justify-content:space-between;font-size:8px;color:var(--muted)}.sensor-spark{height:28px;margin-top:8px}
.gateway-card{background:linear-gradient(180deg,#fff,#f7faff)}.gateway-metrics{display:grid;gap:9px}
.gateway-metric{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px}.gateway-metric span{color:var(--muted);font-size:9px}
.gateway-flow{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding:12px;background:#edf4ff;border-radius:13px;color:var(--navy);font-size:9px;font-weight:800}
.tank-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tank-mini{background:#f8faff;border:1px solid var(--line);border-radius:14px;padding:11px}
.tank-mini strong,.tank-mini small{display:block}.tank-mini small{color:var(--muted);font-size:8px}.mini-level{height:7px;background:#e9eef7;border-radius:10px;overflow:hidden;margin:8px 0}.mini-level i{display:block;height:100%;background:linear-gradient(90deg,#082c6c,#ff9d00);border-radius:10px}
.iot-event-feed{display:grid;gap:8px}.iot-event{display:grid;grid-template-columns:35px 1fr auto;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:8px 0}.iot-event:last-child{border:0}
.iot-event-icon{width:35px;height:35px;border-radius:11px;background:#edf4ff;display:grid;place-items:center}.iot-event b,.iot-event small{display:block}.iot-event small{font-size:8px;color:var(--muted)}.iot-event time{font-size:8px;color:var(--muted)}
.device-health-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.device-health-item{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px;box-shadow:var(--shadow)}.device-health-item strong{font-size:21px;color:var(--navy);display:block}.device-health-item span{font-size:9px;color:var(--muted)}
.device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.device-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.device-card.offline{border-color:#f4cbd0;background:#fffafb}.device-card.warning{border-color:#f4d59a}
.device-head{display:flex;justify-content:space-between;gap:10px}.device-title{display:flex;gap:10px}.device-icon{width:42px;height:42px;border-radius:13px;background:#edf4ff;display:grid;place-items:center;font-size:19px}
.device-title b,.device-title small{display:block}.device-title small{font-size:8px;color:var(--muted)}
.device-reading{display:flex;align-items:end;justify-content:space-between;margin:15px 0}.device-reading strong{font-size:25px;color:var(--navy)}.device-reading small{color:var(--muted)}
.device-bars{display:grid;grid-template-columns:1fr 1fr;gap:9px}.device-bar label{font-size:8px;color:var(--muted);display:flex;justify-content:space-between}.device-bar div{height:6px;background:#edf1f6;border-radius:10px;overflow:hidden;margin-top:4px}.device-bar i{height:100%;background:#14a76c;display:block}
.device-foot{display:flex;gap:6px;margin-top:13px;border-top:1px solid var(--line);padding-top:11px}.device-foot .btn{flex:1}
.tank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:18px 0}.tank-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.tank-visual-wrap{display:grid;grid-template-columns:100px 1fr;gap:16px;align-items:center;margin:15px 0}.tank-vessel{height:180px;border:6px solid #dbe5f4;border-radius:30px 30px 22px 22px;position:relative;overflow:hidden;background:#f8fbff}.tank-liquid{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#ffb43d,#ff8d00);transition:.5s}.tank-liquid:before{content:"";position:absolute;top:-7px;left:-10%;width:120%;height:14px;background:rgba(255,255,255,.35);border-radius:50%}
.tank-percent{position:absolute;inset:0;display:grid;place-items:center;color:#082c6c;font-size:19px;font-weight:900;z-index:2}.tank-stats{display:grid;gap:8px}.tank-stat{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:7px}.tank-stat span{font-size:8px;color:var(--muted)}
.rule-mini-list,.automation-rules,.calibration-list{display:grid;gap:9px}.rule-mini,.automation-rule,.calibration-item{border:1px solid var(--line);border-radius:14px;padding:11px;background:#fbfcff}
.rule-mini{display:flex;gap:9px;align-items:center}.rule-mini i{width:9px;height:9px;border-radius:50%;background:#14a76c}.rule-mini.warning i{background:#ff9d00}
.fleet-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}.fleet-map{height:500px;background:linear-gradient(180deg,#f5f9ff,#fff9ef);border-radius:18px;overflow:hidden;border:1px solid var(--line);position:relative}
.map-road{position:absolute;height:5px;background:#ccd9eb;border-radius:5px;transform-origin:right center}.map-site,.map-vehicle{position:absolute;transform:translate(50%,-50%);text-align:center}.map-site i{width:42px;height:42px;border-radius:14px;background:#082c6c;color:#fff;display:grid;place-items:center;font-style:normal}.map-site small,.map-vehicle small{display:block;font-size:7px;margin-top:4px;font-weight:800}.map-vehicle i{width:34px;height:34px;border-radius:50%;background:#ff9d00;display:grid;place-items:center;font-style:normal;box-shadow:0 8px 20px rgba(255,157,0,.35)}
.vehicle-list{display:grid;gap:10px}.vehicle-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:var(--shadow)}.vehicle-card-top{display:flex;justify-content:space-between}.vehicle-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}.vehicle-meta div{background:#f7f9fd;border-radius:10px;padding:8px}.vehicle-meta small,.vehicle-meta b{display:block}.vehicle-meta small{font-size:7px;color:var(--muted)}.vehicle-meta b{font-size:9px}
.integrity-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.integrity-card{background:#f7f9fd;border:1px solid var(--line);border-radius:14px;padding:13px}.integrity-card strong{font-size:22px;color:var(--navy);display:block}.integrity-card span{font-size:8px;color:var(--muted)}
.source-badge{display:inline-flex;padding:4px 7px;border-radius:8px;background:#eaf9f2;color:#087a4c;font-size:8px;font-weight:800}.source-badge.manual{background:#fff3dd;color:#a56300}
.automation-rule{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.automation-rule .rule-icon{width:38px;height:38px;border-radius:12px;background:#edf4ff;display:grid;place-items:center}.automation-rule b,.automation-rule small{display:block}.automation-rule small{font-size:8px;color:var(--muted)}
.switch{position:relative;width:42px;height:23px}.switch input{opacity:0}.switch span{position:absolute;inset:0;background:#ccd5e4;border-radius:20px;transition:.2s}.switch span:before{content:"";position:absolute;width:17px;height:17px;right:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+span{background:#14a76c}.switch input:checked+span:before{transform:translateX(-19px)}
.calibration-item{display:grid;grid-template-columns:1fr auto;gap:8px}.calibration-item small{display:block;color:var(--muted);font-size:8px}.calibration-progress{height:6px;background:#edf1f6;border-radius:9px;margin-top:8px;overflow:hidden}.calibration-progress i{display:block;height:100%;background:#14a76c}.calibration-item.due .calibration-progress i{background:#ff9d00}
.fallback-warning{background:#fff3dd;border:1px solid #f4d59a;color:#845300;padding:10px;border-radius:12px;font-size:9px;margin:12px 0}
@media(max-width:1200px){.device-grid,.tank-grid{grid-template-columns:repeat(2,1fr)}.live-sensor-grid{grid-template-columns:repeat(2,1fr)}.iot-connectivity-strip{grid-template-columns:repeat(3,1fr)}.connectivity-main{grid-column:span 2}}
@media(max-width:960px){.fleet-layout{grid-template-columns:1fr}.fleet-map{height:390px}.device-health-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.iot-connectivity-strip{grid-template-columns:1fr 1fr}.connectivity-main{grid-column:span 2}.live-sensor-grid,.device-grid,.tank-grid{grid-template-columns:1fr}.tank-summary-grid{grid-template-columns:1fr 1fr}.source-mode-selector{grid-template-columns:1fr}.source-actions .btn{width:100%}.hero-live-cluster{width:100%}.tank-visual-wrap{grid-template-columns:90px 1fr}.fleet-map{height:330px}.device-health-strip{grid-template-columns:1fr 1fr}.iot-event{grid-template-columns:35px 1fr}.iot-event time{grid-column:2}.automation-rule{grid-template-columns:auto 1fr}.automation-rule .switch{grid-column:2}}
