:root{--bg:#06101e;--surface:#0a1728;--surface2:#0e1e32;--border:#1b3048;--text:#ecf4ff;--muted:#7f94ac;--blue:#2e8cff;--green:#22c887;--purple:#a774ff;--orange:#ffad32;--red:#ff5364;--gold:#e8b53f;--sidebar:260px}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:15px}button,input,select,textarea{font:inherit}button,a{transition:.18s ease}a{color:inherit;text-decoration:none}.muted{color:var(--muted)}.eyebrow{color:#5d87b4;font-size:14px;font-weight:800;letter-spacing:1.45px}.eyebrow.gold{color:var(--gold)}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font-size:14px;font-weight:900;box-shadow:0 0 18px #e8b53f25}.brand-mark.large{width:64px;height:64px;font-size:20px;margin-bottom:28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:6px;padding:11px 16px;color:white;font-weight:700;cursor:pointer}.btn.primary{background:linear-gradient(135deg,#1672e8,#2d8cff);box-shadow:0 8px 24px #1672e82c}.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}.btn.full{width:100%}.alert{padding:11px 13px;border:1px solid #35506c;background:#13243a;color:#cce3ff;border-radius:6px;margin:14px 0}.alert.error{border-color:#743642;background:#2a1720;color:#ffadb5}.alert.success{border-color:#176745;background:#0c2d24;color:#81e2b7}.login-page{min-height:100vh;background:radial-gradient(circle at 18% 25%,#11335d 0,transparent 32%),linear-gradient(125deg,#06101e 0%,#08172a 54%,#050d18 100%)}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}.login-brand{padding:9vw;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.login-brand:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#1a355026 1px,transparent 1px),linear-gradient(90deg,#1a355026 1px,transparent 1px);background-size:45px 45px;mask-image:linear-gradient(90deg,#000,transparent);z-index:-1}.login-brand h1{font-size:clamp(36px,4.7vw,68px);line-height:1.06;max-width:730px;margin:18px 0 20px;letter-spacing:-2.5px}.login-brand>p{font-size:16px;line-height:1.75;color:#91a9c3;max-width:600px}.login-stats{display:flex;gap:55px;margin-top:50px}.login-stats div{display:flex;flex-direction:column}.login-stats strong{font-size:26px;color:#fff}.login-stats span{font-size:14px;color:var(--muted);margin-top:5px}.login-card-wrap{display:grid;place-items:center;padding:30px;background:#050c16aa;border-left:1px solid #14263c}.login-card{width:min(430px,100%);padding:42px;background:#0b1829;border:1px solid #213750;border-radius:12px;box-shadow:0 35px 80px #0008}.login-card h2{font-size:29px;margin:10px 0 7px}.login-card label,.modal-card label{display:block;color:#a9bbce;font-size:15px;font-weight:650;margin:18px 0 7px}.login-card input,.modal-card input,.modal-card select{width:100%;margin-top:8px;background:#071322;border:1px solid #243a53;border-radius:6px;color:#eaf3ff;padding:12px 13px;outline:0}.login-card input:focus,.modal-card input:focus,.modal-card select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2e8cff1f}.input-wrap{position:relative;display:block}.input-wrap input{padding-left:38px;margin:0}.input-icon{position:absolute;z-index:1;left:13px;top:13px;color:#59718d}.toggle-password{position:absolute;right:6px;top:6px;background:transparent;border:0;color:#6f87a2;padding:8px;cursor:pointer}.security-note{text-align:center;color:#5e7187;font-size:14px;margin:20px 0 0}.mobile-logo{display:none;align-items:center;gap:10px;font-weight:900;margin-bottom:30px}.mobile-logo.visible{display:flex}.center-card{min-height:100vh;display:grid;place-items:center;padding:25px}.login-card.compact{max-width:470px}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:#071321;border-right:1px solid #152a40;z-index:20;display:flex;flex-direction:column}.brand{height:68px;display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid #152a40}.brand>b,.brand span{display:block}.brand b{font-size:16px;letter-spacing:2px}.brand small{display:block;color:#677f98;font-size:12px;letter-spacing:1.2px;margin-top:2px}.sidebar nav{padding:15px 10px;flex:1;overflow-y:auto;scrollbar-width:thin}.nav-label{display:block;font-size:12px;color:#425974;font-weight:800;letter-spacing:1.2px;padding:13px 12px 7px}.sidebar nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;color:#7890a9;border-radius:5px;margin:2px 0;font-size:14px}.sidebar nav a i{font-style:normal;font-size:16px;width:17px;text-align:center}.sidebar nav a:hover{background:#0e2035;color:#d7e7f8}.sidebar nav a.active{background:linear-gradient(90deg,#0e4e94,#113a68);color:white;box-shadow:inset 3px 0 var(--blue)}.system-status{margin:12px;padding:12px;border:1px solid #17334a;background:#0a1b2b;border-radius:6px}.system-status span{font-size:13px;font-weight:700}.system-status i,.live i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:6px;box-shadow:0 0 8px var(--green)}.system-status small{display:block;color:#4f6a83;font-size:12px;margin-top:6px}.main-wrap{margin-left:var(--sidebar);min-height:100vh}.topbar{height:68px;position:sticky;top:0;z-index:15;background:#071321ee;backdrop-filter:blur(10px);border-bottom:1px solid #152a40;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.search{height:34px;width:350px;display:flex;align-items:center;gap:8px;background:#0b1a2c;border:1px solid #1a3047;border-radius:5px;color:#617a94;padding:0 11px;font-size:14px}.search kbd{margin-left:auto;background:#122a42;color:#5f7893;padding:3px 5px;border-radius:3px}.top-actions{display:flex;align-items:center;gap:16px}.icon-btn,.logout,.menu-toggle{background:transparent;border:0;color:#91a8c0;cursor:pointer}.icon-btn{position:relative;font-size:20px}.icon-btn b{position:absolute;right:0;top:-2px;width:12px;height:12px;background:var(--red);border-radius:50%;font-size:11px;display:grid;place-items:center;color:white}.date{display:flex;flex-direction:column;border-left:1px solid #213248;padding-left:16px}.date small{font-size:12px;color:#617990}.date strong{font-size:14px;margin-top:2px}.profile{display:flex;align-items:center;gap:8px}.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#314a66,#17283c);display:grid;place-items:center;font-size:13px;border:1px solid #415b75}.profile>span:last-child{display:flex;flex-direction:column}.profile strong{font-size:13px}.profile small{font-size:12px;color:#5f7893;margin-top:2px}.logout{font-size:19px}.menu-toggle{display:none;font-size:20px}.content{padding:23px;max-width:1800px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.page-heading h1{font-size:22px;margin:5px 0}.page-heading p{margin:0;color:#6e859e;font-size:14px}.live{padding:7px 10px;border:1px solid #1d3e45;background:#0c2829;border-radius:4px;color:#6bdab3;font-size:13px;font-weight:800;letter-spacing:.7px}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.kpi{position:relative;display:flex;align-items:center;gap:12px;padding:15px;background:linear-gradient(135deg,#0d1e32,#0a1728);border:1px solid #1a3047;border-radius:7px;overflow:hidden}.kpi:after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}.kpi.blue{--accent:var(--blue)}.kpi.green{--accent:var(--green)}.kpi.purple{--accent:var(--purple)}.kpi.orange{--accent:var(--orange)}.kpi-icon{width:38px;height:38px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-size:19px}.kpi>div:nth-child(2){display:flex;flex-direction:column}.kpi span{color:#8097b0;font-size:13px}.kpi strong{font-size:20px;margin:3px 0}.kpi small{font-size:12px;color:#5a728b}.kpi em{margin-left:auto;align-self:flex-start;color:var(--accent);font-size:13px;font-style:normal;background:color-mix(in srgb,var(--accent) 12%,transparent);padding:4px 6px;border-radius:4px}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr .72fr;gap:12px}.panel{background:#091727;border:1px solid #1a3047;border-radius:7px;padding:15px;min-width:0}.panel.span-2{grid-column:span 2}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.panel-head h3{font-size:15px;margin:3px 0}.panel-head a{font-size:13px;color:var(--blue)}.panel-head select,.table-search{border:1px solid #223950;background:#0b1a2c;color:#7991aa;border-radius:4px;padding:6px 9px;font-size:13px}.legend{display:flex;gap:12px;font-size:12px;color:#6f879e}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px}.red{background:var(--red)}.yellow{background:var(--orange)}.green{background:var(--green)}.more{border:0;background:transparent;color:#668098}.map-body{height:290px;position:relative;background:radial-gradient(circle at center,#123250 0,#081522 70%);border-radius:5px;overflow:hidden}.map-body:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#29445b18 1px,transparent 1px),linear-gradient(90deg,#29445b18 1px,transparent 1px);background-size:25px 25px;pointer-events:none}.map-body svg{width:100%;height:100%}.map-shape{fill:url(#land);stroke:#2e6795;stroke-width:2}.map-lines path{fill:none;stroke:#2a4b67;stroke-width:1}.markers circle{filter:url(#glow)}.risk-high{fill:var(--red)}.risk-med{fill:var(--orange)}.risk-low{fill:var(--green)}.pulse{opacity:.25}.map-labels text{font-size:12px;fill:#8faac2}.map-floating{position:absolute;right:12px;bottom:12px;z-index:2;width:150px;background:#071522df;border:1px solid #294159;padding:10px;border-radius:5px}.map-floating span,.map-floating small{display:block;font-size:11px;color:#657f99}.map-floating strong{display:block;font-size:14px;margin:4px 0}.progress{height:3px;background:#213245;margin-top:7px}.progress i{display:block;height:100%;background:var(--red)}.donut-wrap{display:flex;align-items:center;justify-content:center;gap:20px;min-height:270px}.donut{width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--blue) 0 30%,var(--green) 30% 55%,var(--purple) 55% 75%,var(--orange) 75% 90%,var(--red) 90%);display:grid;place-items:center;flex:none}.donut:before{content:"";position:absolute;width:88px;height:88px;border-radius:50%;background:#091727}.donut div{position:relative;display:flex;flex-direction:column;text-align:center}.donut strong{font-size:19px}.donut span{font-size:12px;color:#698098}.breakdown{list-style:none;padding:0;margin:0;min-width:120px}.breakdown li{display:grid;grid-template-columns:8px 1fr auto auto;gap:5px;align-items:center;margin:10px 0;font-size:12px}.breakdown li>i{width:5px;height:5px;border-radius:50%}.breakdown span{color:#7890a8}.breakdown em{font-style:normal;color:#557089}.bg-blue{background:var(--blue)}.bg-green{background:var(--green)}.bg-purple{background:var(--purple)}.bg-orange{background:var(--orange)}.bg-red{background:var(--red)}.chart{height:250px;position:relative;padding:5px 8px 25px 32px}.chart svg{width:100%;height:200px}.grid-lines path{stroke:#1a2c40;stroke-width:1}.area{fill:url(#area)}.line{fill:none;stroke:var(--blue);stroke-width:3;filter:drop-shadow(0 0 4px #2e8cff)}.chart-points circle{fill:#091727;stroke:var(--blue);stroke-width:3}.y-labels{position:absolute;left:0;top:5px;height:200px;display:flex;flex-direction:column;justify-content:space-between;color:#526a83;font-size:11px}.x-labels{display:flex;justify-content:space-between;color:#526a83;font-size:11px;padding:0 5px}.alerts-list{display:flex;flex-direction:column;gap:8px}.alert-item{display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;padding:10px;background:#0c1b2c;border:1px solid #192f45;border-left:2px solid var(--state);border-radius:4px}.alert-item>i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--state) 13%,transparent);color:var(--state);font-weight:800}.alert-item div{display:flex;flex-direction:column}.alert-item b{font-size:13px}.alert-item span{font-size:11px;color:#5e7790;margin-top:4px}.alert-item em{font-size:11px;font-style:normal;color:var(--state)}.alert-item.critical{--state:var(--red)}.alert-item.warning{--state:var(--orange)}.alert-item.safe{--state:var(--green)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:720px}th{text-align:left;padding:11px;color:#58718b;font-size:12px;letter-spacing:.6px;border-bottom:1px solid #1b3047}td{padding:12px 11px;border-bottom:1px solid #12263a;color:#8da3ba;font-size:13px}td strong{color:#dce9f6}.badge{display:inline-block;padding:4px 7px;border-radius:4px;font-size:11px;font-weight:800}.badge.tinggi{background:#3a1720;color:#ff7d8a}.badge.sedang{background:#382b13;color:#ffc25d}.badge.rendah{background:#123629;color:#5fdaa9}.badge.admin{background:#231b41;color:#bca2ff}.badge.kominda{background:#122f51;color:#7ab7ff}.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:5px}.reports-kpi{margin-bottom:14px}.inline-form{display:inline}.link-btn{background:none;border:0;color:#54a5ff;cursor:pointer;padding:0}.modal{display:none;position:fixed;inset:0;background:#02070dbb;z-index:50;place-items:center;padding:20px}.modal.show{display:grid}.modal-card{position:relative;background:#0b192a;border:1px solid #27415d;border-radius:8px;width:min(430px,100%);padding:28px;box-shadow:0 25px 80px #000}.modal-card h2{margin:8px 0 18px}.modal-close{position:absolute;right:14px;top:11px;background:none;border:0;color:#8097af;font-size:25px;cursor:pointer}.modal-card form label{margin-top:13px}.overlay{display:none}
@media(max-width:1100px){.dashboard-grid{grid-template-columns:1fr 1fr}.dashboard-grid>.panel:last-child{grid-column:span 2}.kpi-grid{grid-template-columns:repeat(2,1fr)}.search{width:250px}.date{display:none}}
@media(max-width:760px){:root{--sidebar:270px}.sidebar{transform:translateX(-100%);transition:.22s}.sidebar.open{transform:none}.main-wrap{margin-left:0}.menu-toggle{display:block}.overlay.show{display:block;position:fixed;inset:0;background:#0009;z-index:19}.topbar{padding:0 14px}.search{display:none}.profile>span:last-child{display:none}.content{padding:16px}.page-heading{align-items:flex-start;gap:12px}.page-heading h1{font-size:19px}.page-heading p{max-width:260px}.kpi-grid{grid-template-columns:1fr 1fr}.dashboard-grid{display:block}.dashboard-grid>.panel{margin-bottom:12px}.map-body{height:260px}.login-shell{display:block}.login-brand{display:none}.login-card-wrap{min-height:100vh;border:0;padding:18px}.login-card{padding:28px 22px}.mobile-logo{display:flex}.donut-wrap{min-height:230px}.top-actions{gap:10px}}
@media(max-width:480px){.kpi-grid{grid-template-columns:1fr}.live{display:none}.map-floating{width:135px}.donut-wrap{gap:12px}.login-card h2{font-size:25px}.panel{padding:12px}}

/* CCTV */
.camera-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.dashboard-cctv{margin-top:12px}.dashboard-camera-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.camera-card{overflow:hidden;background:#081421;border:1px solid #1b3047;border-radius:7px}.camera-card.camera-disabled{opacity:.62}.camera-player{position:relative;aspect-ratio:16/9;background:radial-gradient(circle at center,#16314b,#030912);overflow:hidden}.camera-player iframe,.camera-player video{display:block;width:100%;height:100%;border:0;object-fit:cover;background:#030912}.camera-live{position:absolute;left:9px;top:9px;z-index:2;padding:4px 7px;border-radius:3px;background:#08101ccc;color:#fff;font-size:11px;font-weight:900;letter-spacing:.7px}.camera-live i{display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:var(--red);box-shadow:0 0 7px var(--red)}.camera-info{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px}.camera-info h3{margin:0 0 5px;font-size:14px}.camera-info p{margin:0;color:#617b94;font-size:12px}.source-chip{flex:none;padding:4px 6px;border-radius:3px;background:#102944;color:#69adf5;font-size:11px}.camera-admin{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-top:1px solid #15283c;color:#5f7892;font-size:12px}.camera-unavailable{width:100%;height:100%;display:grid;place-items:center;color:#647b92;font-size:14px;background:repeating-linear-gradient(135deg,#091522,#091522 10px,#0b1928 10px,#0b1928 20px)}.empty-state{text-align:center;padding:70px 20px}.empty-state h2{margin:12px 0 5px}.empty-state p{color:var(--muted);margin:0 0 20px}.empty-camera{font-size:45px;color:#335473}.camera-dashboard-empty{min-height:130px;display:flex;align-items:center;justify-content:center;gap:18px;color:#63809c}.camera-dashboard-empty>span{font-size:35px}.camera-dashboard-empty strong{color:#c5d6e6}.camera-dashboard-empty p{margin:5px 0 0;font-size:13px}.camera-dashboard-empty .btn{margin-left:20px}.cctv-modal{max-height:92vh;overflow:auto}.source-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 5px}.source-tabs label{margin:0}.source-tabs input{position:absolute;opacity:0;pointer-events:none}.source-tabs span{display:block;text-align:center;padding:11px 8px;border:1px solid #243a53;border-radius:5px;color:#7590a9;cursor:pointer}.source-tabs input:checked+span{border-color:var(--blue);background:#102d4d;color:#d9ebff}.modal-card label small{display:block;margin-top:6px;color:#607991;font-size:13px;line-height:1.45}.modal-card .check-label{display:flex;align-items:center;gap:8px;margin:15px 0}.modal-card .check-label input{width:auto;margin:0}.modal-card [hidden]{display:none!important}
@media(max-width:1200px){.dashboard-camera-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.camera-grid,.dashboard-camera-grid{grid-template-columns:1fr}.camera-dashboard-empty{flex-direction:column;text-align:center}.camera-dashboard-empty .btn{margin:0}}

/* OpenStreetMap / Leaflet */
.map-panel{position:relative}.osm-map{isolation:isolate;background:#0a1728}.map-body.osm-map{height:290px}.monitoring-map-panel{margin-bottom:12px}.monitoring-map{height:480px;border-radius:5px;overflow:hidden}.map-body .leaflet-overlay-pane svg{width:auto;height:auto}.osm-map .leaflet-tile-pane{filter:brightness(.62) saturate(.72) contrast(1.12)}.osm-map .leaflet-control-attribution{background:#071321d9;color:#8ca0b5;font-size:12px}.osm-map .leaflet-control-attribution a{color:#6eb2ff}.osm-map .leaflet-control-zoom a{background:#0b1c2e;color:#d6e8f8;border-color:#294158}.osm-map .leaflet-control-zoom a:hover{background:#15314c;color:#fff}.risk-map-icon{background:transparent;border:0}.risk-marker{--marker:#22c887;position:relative;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--marker) 23%,transparent);border:1px solid color-mix(in srgb,var(--marker) 60%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--marker) 55%,transparent)}.risk-marker i{width:9px;height:9px;border-radius:50%;background:var(--marker);border:2px solid #dff9f1}.risk-marker.high{--marker:#ff5364;animation:mapPulse 1.8s infinite}.risk-marker.medium{--marker:#ffad32}.risk-marker.low{--marker:#22c887}@keyframes mapPulse{0%,100%{box-shadow:0 0 0 0 #ff536477,0 0 14px #ff536455}50%{box-shadow:0 0 0 8px #ff536400,0 0 18px #ff536477}}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#091827;color:#d9e8f7}.leaflet-popup-content-wrapper{border:1px solid #29435c;border-radius:6px;box-shadow:0 12px 35px #0009}.leaflet-popup-content{margin:11px 13px}.map-popup{display:flex;flex-direction:column;min-width:145px}.map-popup span{color:#ffb447;font-size:12px;font-weight:800;text-transform:uppercase}.map-popup strong{font-size:15px;margin:4px 0}.map-popup small{color:#7891a9;font-size:12px}.leaflet-container a.leaflet-popup-close-button{color:#6f879e}.leaflet-container{font-family:inherit}
@media(max-width:760px){.monitoring-map{height:390px}.map-body.osm-map{height:260px}}

/* CCTV HLS, map picker, and player dialog */
.camera-thumbnail{position:relative;width:100%;height:100%;border:0;cursor:pointer;color:#fff;background:radial-gradient(circle at 50% 45%,#183a59 0,#091a2a 42%,#040a12 100%);overflow:hidden}.camera-thumbnail:before{content:"CCTV";position:absolute;inset:0;display:grid;place-items:center;color:#315471;font-size:42px;font-weight:900;letter-spacing:8px;opacity:.25}.camera-thumbnail-image{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;background:#040a12;transition:transform .25s ease,filter .25s ease}.camera-thumbnail:hover .camera-thumbnail-image{transform:scale(1.035);filter:brightness(.8)}.camera-thumbnail-image[hidden]{display:none}.camera-scanlines{position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,#fff0 0,#fff0 3px,#8cc7ff0a 4px);animation:cameraScan 7s linear infinite}.play-button{position:absolute;z-index:3;left:50%;top:50%;width:50px;height:50px;display:grid;place-items:center;transform:translate(-50%,-50%);padding-left:3px;border:1px solid #85c1ff99;border-radius:50%;background:#0b2842d9;box-shadow:0 0 30px #2e8cff66;font-size:17px}.camera-thumbnail:hover .play-button{transform:translate(-50%,-50%) scale(1.1);background:#1766aa}.camera-type-watermark{position:absolute;z-index:3;right:9px;bottom:8px;color:#d5eaff;font-size:12px;font-weight:800;letter-spacing:1px;text-shadow:0 1px 4px #000}@keyframes cameraScan{to{background-position:0 60px}}.cctv-map-panel{margin-bottom:14px}.cctv-map{height:430px;border-radius:6px;overflow:hidden}.camera-dot{background:#34a7ff}.cctv-map-icon{background:transparent;border:0}.cctv-map-icon span{display:grid;place-items:center;width:30px;height:30px;border:2px solid #9bd3ff;border-radius:8px 8px 8px 2px;transform:rotate(-45deg);background:#1474bb;color:#fff;box-shadow:0 0 0 5px #168be82e,0 5px 15px #0009;font-size:15px}.cctv-map-icon span::first-letter{transform:rotate(45deg)}.leaflet-tooltip{background:#091827;color:#dbeeff;border:1px solid #29435c;box-shadow:0 5px 18px #0008;font-size:13px}.leaflet-tooltip-top:before{border-top-color:#29435c}.picker-map{height:280px;margin-top:8px;border:1px solid #29435c;border-radius:6px;overflow:hidden}.coordinate-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.coordinate-row label{margin-top:10px}.modal-card label b{color:var(--red)}.player-modal{z-index:80}.player-modal-card{position:relative;width:min(960px,96vw);background:#071321;border:1px solid #29435c;border-radius:9px;padding:17px;box-shadow:0 30px 90px #000c}.player-heading{display:flex;align-items:center;justify-content:space-between;padding:0 35px 12px 2px}.player-heading h2{font-size:17px;margin:3px 0}.player-heading p{font-size:13px;color:#6f879f;margin:0}.player-heading .camera-live{position:static}.modal-video-wrap{position:relative;aspect-ratio:16/9;max-height:75vh;background:#02060b;border-radius:6px;overflow:hidden}.modal-video-wrap video{width:100%;height:100%;object-fit:contain;background:#000}.player-loading,.player-message{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:#7992aa;background:radial-gradient(circle,#102b44,#030912);padding:25px}.player-loading[hidden],.player-message[hidden]{display:none}.player-loading i{width:30px;height:30px;border:3px solid #24445f;border-top-color:var(--blue);border-radius:50%;animation:playerSpin .8s linear infinite}.player-message{color:#e5b36a}.rtsp-notice strong,.rtsp-notice small{display:block;text-align:center}.rtsp-notice small{max-width:330px;margin:7px auto;color:#7891a8}@keyframes playerSpin{to{transform:rotate(360deg)}}
@media(max-width:760px){.cctv-map{height:350px}.picker-map{height:230px}.player-modal-card{padding:10px}.player-heading h2{font-size:16px}.coordinate-row{grid-template-columns:1fr}}
.player-actions{display:flex;align-items:center;gap:10px}.direct-stream-link{font-size:12px;color:#77baff;border:1px solid #24517b;border-radius:4px;padding:6px 8px;background:#0d2740}.direct-stream-link:hover{background:#153c61;color:#fff}.direct-stream-link[hidden]{display:none}@media(max-width:580px){.player-actions{align-items:flex-end;flex-direction:column}.direct-stream-link{font-size:11px}}

/* EWIS application logo */
.login-brand-logo{display:block;width:min(290px,55%);aspect-ratio:1.833/1;object-fit:cover;border-radius:12px;border:1px solid #dcb85d66;box-shadow:0 18px 55px #0008,0 0 34px #3edcec24;margin-bottom:28px}.sidebar-brand-logo,.mobile-brand-logo{display:block;object-fit:cover;object-position:center;border:1px solid #dcb85d66;box-shadow:0 0 16px #3edcec22}.sidebar-brand-logo{width:39px;height:39px;border-radius:50%}.mobile-brand-logo{width:42px;height:42px;border-radius:50%}
@media(max-width:760px){.login-brand-logo{width:230px}}
.modal-video-wrap iframe{display:block;width:100%;height:100%;border:0;background:#000}.modal-video-wrap iframe[hidden]{display:none}

/* Batas administratif kecamatan Bandar Lampung */
.kecamatan-tooltip{padding:6px 9px!important;border-color:#8ecbff!important;background:#071827ed!important;color:#ecf7ff!important;font-size:13px!important;font-weight:800;letter-spacing:.25px;text-transform:capitalize;box-shadow:0 5px 18px #0009!important}.kecamatan-tooltip:before{border-top-color:#8ecbff!important}.leaflet-kecamatanPane path{transition:fill-opacity .16s ease,stroke-width .16s ease}

/* Filter dan status CCTV pada peta */
.cctv-filter{display:flex;align-items:center;gap:8px}.cctv-filter label{color:#7189a1;font-size:13px}.cctv-filter select{min-width:150px;border:1px solid #29435c;border-radius:5px;background:#0b1a2c;color:#d9e9f8;padding:7px 9px;font-size:13px}.cctv-map-legend{display:flex;align-items:center;gap:16px;margin:-3px 0 11px;color:#7c94aa;font-size:12px}.cctv-map-legend span{display:flex;align-items:center;gap:5px}.cctv-map-legend small{margin-left:auto;color:#58728b}.pin-legend{width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor}.pin-legend.active{color:#34a7ff;background:#34a7ff}.pin-legend.inactive{color:#ff5364;background:#ff5364}.cctv-map-icon.inactive span{border-color:#ffc0c7;background:#d9283d;box-shadow:0 0 0 5px #ff53642e,0 5px 15px #0009}.cctv-map-icon.active span{background:#1474bb}.camera-card[hidden]{display:none}@media(max-width:580px){.cctv-map-panel .panel-head{align-items:flex-start;gap:10px}.cctv-filter{align-items:flex-start;flex-direction:column}.cctv-map-legend{align-items:flex-start;flex-wrap:wrap}.cctv-map-legend small{width:100%;margin:0}}

/* Watermark dan perekam lokal CCTV */
.cctv-player-watermark{position:absolute;z-index:4;right:13px;top:13px;display:flex;align-items:center;gap:7px;padding:5px 9px 5px 5px;border:1px solid #e7c46766;border-radius:6px;background:#06101dcc;box-shadow:0 5px 20px #0008;pointer-events:none;opacity:.88}.cctv-player-watermark img{width:31px;height:31px;border-radius:50%;object-fit:cover;border:1px solid #e7c46799}.cctv-player-watermark span{color:#f3d681;font-size:12px;font-weight:900;letter-spacing:.9px;text-shadow:0 1px 3px #000}.recording-controls{display:flex;align-items:center;gap:6px}.record-btn,.record-stop-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #334c64;border-radius:4px;padding:6px 9px;background:#0c1d2e;color:#a9bfd3;font-size:12px;font-weight:800;cursor:pointer}.record-btn i{width:7px;height:7px;border-radius:50%;background:#ff5364}.record-btn:not(:disabled):hover{border-color:#ff5364;color:#fff}.record-stop-btn:not(:disabled):hover{border-color:#e5b55d;color:#fff}.record-btn:disabled,.record-stop-btn:disabled{cursor:not-allowed;opacity:.38}.recording-status{display:flex;align-items:center;gap:5px;color:#ff8b97;font-size:12px}.recording-status[hidden]{display:none}.recording-status i{width:7px;height:7px;border-radius:50%;background:#ff3349;box-shadow:0 0 9px #ff3349;animation:recordPulse 1s infinite}@keyframes recordPulse{50%{opacity:.35}}@media(max-width:700px){.player-heading{align-items:flex-start}.player-actions{gap:6px}.recording-controls{flex-wrap:wrap}.cctv-player-watermark span{display:none}}
.reports-nav-group .nav-sub-label{display:block;padding:9px 13px 4px;color:#91a7bc;font-size:12px;font-weight:800;letter-spacing:.2px}.reports-nav-group>a{display:flex!important;align-items:center;gap:7px}.reports-nav-group>a>i{width:auto!important;height:auto!important;background:transparent!important;font-size:13px}.reports-nav-group .nav-level-2{padding-left:34px!important;color:#7895af!important;font-size:12px!important}.reports-nav-group .nav-level-2:before{content:'›';color:#3d78ad}.reports-nav-group[open]{max-height:none}

/* Laporan Intelijen */
.report-dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:12px}.report-dashboard-grid>main{display:flex;flex-direction:column;gap:12px;min-width:0}.report-dashboard-side{display:flex;flex-direction:column;gap:12px}.report-summary{padding:13px}.report-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.report-kpis article{--tone:#2e8cff;display:flex;align-items:center;gap:10px;min-height:86px;padding:12px;border:1px solid color-mix(in srgb,var(--tone) 28%,#1a3047);border-radius:6px;background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 14%,#0a1728),#091625)}.report-kpis article.green{--tone:#22c887}.report-kpis article.orange{--tone:#ffad32}.report-kpis article.purple{--tone:#a774ff}.report-kpis article.cyan{--tone:#39c9d6}.report-kpis article>i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--tone) 22%,transparent);color:var(--tone);font-style:normal;font-weight:900}.report-kpis span{display:flex;flex-direction:column;color:#a3b4c6;font-size:11px;text-transform:uppercase}.report-kpis strong{margin:3px 0;color:#fff;font-size:23px}.report-kpis small{color:var(--tone);font-size:11px;text-transform:none}.report-methods{display:grid;grid-template-columns:1fr 1fr;gap:14px}.report-methods article{display:flex;gap:15px;min-height:195px;padding:20px;border:1px solid #24384e;border-radius:7px;background:linear-gradient(140deg,#0d1c2e,#091625)}.report-methods article.automatic{border-color:#164d88;background:linear-gradient(140deg,#0c2139,#091625)}.report-methods article>i{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#402061;color:#d892ff;font-style:normal;font-weight:900}.report-methods .automatic>i{background:#123f78;color:#6db5ff}.report-methods b{color:#dca0ff}.report-methods .automatic b{color:#62aaff}.report-methods p,.report-methods li{color:#7690a8;font-size:12px;line-height:1.55}.report-methods ul{padding-left:18px}.report-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:12px;padding:14px;border:1px solid #1a3047;border-radius:6px}.report-flow>div{position:relative;display:flex;align-items:center;gap:9px}.report-flow>div:not(:last-child):after{content:'→';position:absolute;right:-17px;color:#41617f}.report-flow i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#12365e;color:#77b9ff;font-style:normal;font-weight:900}.report-flow span{display:flex;flex-direction:column}.report-flow b{font-size:12px}.report-flow small{color:#627b94;font-size:10px}.report-filters{display:flex;gap:5px}.report-filters a{padding:6px 9px;border:1px solid #213c57;border-radius:4px}.report-table-panel td small{display:block;margin-top:4px;color:#57718a}.report-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.report-quick-actions a{padding:13px 9px;border:1px solid #223b54;border-radius:5px;background:#0c1c2e;color:#a9bed2;text-align:center;font-size:12px}.report-quick-actions a:hover{border-color:#2e8cff;color:#fff}.report-latest{display:flex;flex-direction:column;gap:8px}.report-latest article{display:grid;grid-template-columns:28px 1fr auto;gap:7px;align-items:center;padding:8px;border-bottom:1px solid #15283b}.report-latest article>i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#123b70;color:#6db3ff;font-style:normal}.report-latest span{display:flex;min-width:0;flex-direction:column}.report-latest b{font-size:11px}.report-latest small{color:#617a93;font-size:10px;margin-top:3px}.report-latest em{font-size:9px;font-style:normal;color:#ffbf5a}.report-latest em.completed{color:#61d7a7}.mini-donut{position:relative;display:grid;place-items:center;width:120px;height:120px;margin:10px auto;border-radius:50%}.mini-donut:before{content:'';position:absolute;width:78px;height:78px;border-radius:50%;background:#091727}.mini-donut span{z-index:1;display:flex;flex-direction:column;text-align:center;color:#6d849a;font-size:11px}.mini-donut b{color:#fff;font-size:20px}.report-distribution ul{list-style:none;padding:0}.report-distribution li{display:grid;grid-template-columns:8px 1fr auto;gap:7px;margin:8px 0;color:#7f96ad;font-size:12px}.report-distribution li i{width:7px;height:7px;border-radius:50%}.purple-dot{background:#a774ff}.report-settings-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px}.report-guide ol{padding-left:20px;color:#8ea4b9;line-height:2}.report-ai-chip{padding:5px 8px;border:1px solid #245ba0;border-radius:4px;background:#102b4c;color:#67adff;font-size:11px;font-weight:900}.report-form-actions{display:flex;align-items:center;gap:15px;margin-top:14px}.report-form-actions span{color:#678097;font-size:12px}.report-composer{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.report-source-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.report-source-columns h4{margin:3px 0 8px}.report-source-list{height:285px;overflow:auto;border:1px solid #20374e;border-radius:6px;background:#07131f}.report-source-list label{display:flex;gap:9px;padding:10px;border-bottom:1px solid #14283b;cursor:pointer}.report-source-list label:hover{background:#0e2135}.report-source-list input{flex:none;margin-top:3px}.report-source-list span{display:flex;flex-direction:column}.report-source-list b{font-size:12px}.report-source-list small{margin-top:4px;color:#607b95;font-size:10px}.report-source-list p{padding:15px;color:#637d96}.report-input-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.report-input-grid label{display:flex;flex-direction:column;gap:7px;color:#9cb0c3;font-size:13px}.report-input-grid input,.report-input-grid textarea{width:100%;border:1px solid #243a53;border-radius:5px;background:#071322;color:#eaf3ff;padding:11px}.report-input-grid small{color:#617b94}.report-input-grid .wide{grid-column:1/-1}.report-generate{margin-top:15px}.report-result{border-color:#225697}.report-document{max-width:950px;margin:0 auto 18px;padding:32px;background:#0c1b2a;border:1px solid #294058;border-radius:5px;color:#bed0df;line-height:1.75}.report-source-form>.panel-head{position:sticky;top:70px;z-index:2;background:#091727;padding:5px 0}
@media(max-width:1250px){.report-dashboard-grid{grid-template-columns:1fr}.report-dashboard-side{display:grid;grid-template-columns:repeat(3,1fr)}.report-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.report-dashboard-side{display:flex}.report-kpis{grid-template-columns:1fr 1fr}.report-methods,.report-source-columns,.report-input-grid,.report-settings-layout{grid-template-columns:1fr}.report-flow{grid-template-columns:1fr}.report-flow>div:not(:last-child):after{display:none}.report-input-grid .wide{grid-column:auto}.report-form-actions{align-items:flex-start;flex-direction:column}}
@media(max-width:480px){.report-kpis{grid-template-columns:1fr}.report-methods article{padding:14px}.report-document{padding:18px}.report-source-list{height:230px}}
.report-settings-layout textarea{width:100%;margin-top:7px;padding:12px;border:1px solid #243a53;border-radius:5px;background:#071322;color:#eaf3ff;line-height:1.55;resize:vertical}
.report-support-images{display:flex;flex-direction:column;gap:7px;margin-top:15px;padding:14px;border:1px dashed #315579;border-radius:6px;background:#0a1a2a;color:#a9bed1;font-size:13px}.report-support-images input{padding:10px;border:1px solid #243a53;border-radius:5px;background:#071322;color:#eaf3ff}.report-support-images small{color:#647e97;font-size:11px}
.dashboard-reference-kpis{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.dashboard-reference-kpis .kpi{min-height:88px;padding:13px 11px}.dashboard-reference-kpis .kpi-icon{width:40px;height:40px;flex:none;border-radius:50%}.dashboard-reference-kpis .kpi strong{font-size:22px}.dashboard-reference-kpis .kpi em{font-size:10px}.kpi.red{--accent:var(--red)}.kpi.cyan{--accent:#31cbd4}.osm-map[data-osm-map="dashboard"] .leaflet-control-container{display:none!important}.osm-map[data-osm-map="dashboard"]{border:1px solid #164a78;box-shadow:inset 0 0 45px #0b5cad17}.osm-map[data-osm-map="dashboard"] .leaflet-tile-pane{filter:brightness(.48) saturate(.95) contrast(1.3) hue-rotate(8deg)}
.dashboard-kpi-link{cursor:pointer;outline:0}.dashboard-kpi-link:hover,.dashboard-kpi-link:focus-visible{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 18%,transparent)}.dashboard-kpi-link:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
@media(max-width:1450px){.dashboard-reference-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.dashboard-reference-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.dashboard-reference-kpis{grid-template-columns:1fr}}
.login-brand-logo,.sidebar-brand-logo,.mobile-brand-logo,.cctv-player-watermark img{border:0;border-radius:0;box-shadow:none}
.live.offline{border-color:#67424a;background:#2c1920;color:#ff929d}.live.offline i{background:#ff5364;box-shadow:0 0 8px #ff5364}
.report-live-status{min-height:17px;margin-top:7px;color:#65829b;font-size:11px}.report-search-card.is-loading{opacity:.72}.report-search-card.is-loading .report-search-form{pointer-events:none}
.report-kpis article>i img{display:block;width:21px;height:21px;object-fit:contain}
.dashboard-reference-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}.dashboard-grid>.map-panel{grid-column:1/-1}.dashboard-grid>.map-panel+article{display:none}.dashboard-grid>.map-panel .map-body{height:390px}.trend-legend{display:flex;gap:14px;margin-top:7px;color:#7890a8;font-size:11px}.trend-legend span{display:flex;align-items:center;gap:6px}.trend-legend i{display:block;width:22px;height:3px;border-radius:4px}.trend-legend .blue-line{background:#2e8cff}.trend-legend .orange-line{background:#ffad32}.trend-media-line{stroke:#2e8cff}.trend-report-line{stroke:#ffad32;filter:drop-shadow(0 0 4px #ffad32)}.trend-report-points circle{stroke:#ffad32}.dashboard-latest-reports{margin:12px 0}.dashboard-report-list{display:flex;flex-direction:column}.dashboard-report-list>a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border-bottom:1px solid #152b40}.dashboard-report-list>a:hover{background:#0d2237}.dashboard-report-list>a>i{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:#12314e;color:#6ab0f2;font-style:normal}.dashboard-report-list>a>i.high{background:#3a1720;color:#ff7785}.dashboard-report-list>a>i.medium{background:#382b13;color:#ffc25d}.dashboard-report-list>a>div{display:flex;min-width:0;flex-direction:column}.dashboard-report-list b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.dashboard-report-list span{margin-top:4px;color:#647f98;font-size:11px}.dashboard-report-list em{padding:4px 7px;border-radius:4px;background:#123629;color:#5fdaa9;font-size:10px;font-style:normal;font-weight:900}.dashboard-report-list em.medium{background:#382b13;color:#ffc25d}.dashboard-report-list em.high{background:#3a1720;color:#ff7d8a}@media(max-width:1200px){.dashboard-reference-kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.dashboard-reference-kpis{grid-template-columns:1fr}.dashboard-report-list>a{grid-template-columns:30px minmax(0,1fr)}.dashboard-report-list em{grid-column:2;justify-self:start}}
.dashboard-grid>.map-panel+article{display:block}
.dashboard-grid>.dashboard-latest-reports{grid-column:1/-1;margin:0}
.report-input-grid select{width:100%;border:1px solid #243a53;border-radius:5px;background:#071322;color:#eaf3ff;padding:11px}
.dashboard-reference-kpis .kpi.green{background:linear-gradient(135deg,#0d1e32,#0a1728)}.dashboard-reference-kpis .kpi-icon img{display:block;width:22px;height:22px;object-fit:contain}
.sidebar nav .nav-group summary .nav-assistant-icon{display:grid;place-items:center;width:17px}.sidebar nav .nav-group summary .nav-assistant-icon img{display:block;width:18px;height:18px}