:root{--bg:#071019;--bg2:#0a151f;--panel:#0d1a25;--panel2:#101f2c;--nav:#06111b;--ink:#e8f0f7;--muted:#8395a6;--line:#1f3445;--accent:#29a8ff;--cyan:#29d3ff;--green:#35d08b} *{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}body{background:radial-gradient(circle at 65% -20%,#12304a 0,#071019 42%)} .layout{display:grid;grid-template-columns:255px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,#06111b,#071722);border-right:1px solid var(--line);padding:22px 16px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}.brand b{font-size:19px}.brand small{display:block;color:#7894aa;margin-top:4px}.dam{width:40px;height:40px;border:1px solid #268dcc;border-radius:11px;display:grid;place-items:center;color:#41c7ff;font-size:27px}.section-title{font-size:11px;color:#607d94;margin:16px 4px 8px;letter-spacing:.12em}.sidebar input{width:100%;border:1px solid #1e4056;background:#091b29;color:#e6f2fb;padding:11px;border-radius:9px;outline:none}.sidebar input:focus{border-color:#288bc7}.areas{margin-top:10px;display:flex;flex-direction:column;gap:7px}.area-btn{padding:11px 12px;border-radius:9px;cursor:pointer;color:#a9bdcc;border:1px solid transparent}.area-btn:hover,.area-btn.active{background:#0d2d43;border-color:#1c668e;color:#fff}.area-btn small{display:block;color:#668ba4;margin-top:4px}.sidebar-note{position:absolute;bottom:18px;left:16px;right:16px;color:#5f8299;font-size:11px;border-top:1px solid #163043;padding-top:12px} main{padding:22px;overflow:hidden}.topbar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:80px;margin-bottom:16px}.heading h1{margin:0;font-size:28px}.heading p{margin:5px 0 0;color:var(--muted)}.period-wrap{justify-self:center;text-align:center;background:#0c1c29;border:1px solid #244052;border-radius:13px;padding:9px 16px;min-width:330px}.period-wrap span{display:block;color:#6f8da2;font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}.period-wrap select{width:100%;text-align:center;font-weight:700}.status-pill{justify-self:end;border:1px solid #1a684d;color:#52e1a0;background:#0c261e;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:700;letter-spacing:.08em} select{padding:8px 12px;border:1px solid #274257;border-radius:8px;background:#0a1925;color:#e8f0f7;outline:none}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.card,.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:13px;box-shadow:0 8px 24px rgba(0,0,0,.2)}.card{padding:15px;display:flex;gap:12px;align-items:center}.card>span{width:37px;height:37px;display:grid;place-items:center;border-radius:10px;background:#0b2a3c;color:#45c9ff;font-size:21px}.card small{display:block;color:var(--muted);margin-bottom:5px}.card b{font-size:18px}.grid.two{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin-bottom:12px}.bottom-grid{margin-top:12px}.panel{padding:13px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.panel-head>b{font-size:14px}.panel-head>span{color:var(--muted);font-size:11px}.tabs{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.tabs button{border:1px solid #274257;background:#0a1925;color:#a7bbc9;padding:6px 9px;border-radius:7px;cursor:pointer}.tabs button:hover,.tabs button.active{background:#0d5985;color:#fff;border-color:#238ac2}#map{height:430px;border-radius:9px;overflow:hidden;background:#061018}.leaflet-control-layers,.leaflet-bar a{background:#0d1b27!important;color:#e5edf4!important;border-color:#243b4b!important}.leaflet-control-layers-expanded{color:#dce8f1!important}.leaflet-control-layers-separator{border-color:#28404e!important}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:9px}.layer-card{border:1px solid #203849;border-radius:9px;overflow:hidden;background:#091722;cursor:pointer;transition:.15s}.layer-card:hover{transform:translateY(-2px);border-color:#2e8ec1}.layer-card img{width:100%;height:145px;object-fit:cover;display:block;background:#050b10}.layer-card .cap{padding:8px;font-size:12px}.layer-card .cap small{display:block;margin-top:3px;color:#68869a}.infra-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.infra-chip{padding:10px;border:1px solid #203849;border-radius:9px;background:#091722;display:flex;justify-content:space-between;gap:10px}.infra-chip span{color:#7893a5;font-size:12px}pre{white-space:pre-wrap;max-height:280px;overflow:auto;font-size:11px;background:#07131d;color:#aac0cf;padding:10px;border-radius:8px;border:1px solid #1a3040}.weather-panel{min-width:0}.weather-head select{max-width:180px}.weather-panel canvas{height:275px!important;max-height:275px}.weather-latest{margin-top:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-height:145px;overflow:auto;padding-right:3px}.weather-chip{background:#081721;border:1px solid #1c3343;border-radius:7px;padding:7px;min-width:0}.weather-chip span{display:block;color:#6e8b9f;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.weather-chip b{display:block;margin-top:3px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.muted{color:var(--muted)}.error-toast{position:fixed;bottom:12px;right:12px;background:#7d1d2d;color:#fff;padding:11px 13px;border-radius:8px;z-index:99999} @media(max-width:1150px){.layout{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.sidebar-note{position:static;margin-top:20px}.topbar{grid-template-columns:1fr}.period-wrap,.status-pill{justify-self:stretch;margin-top:10px}.cards{grid-template-columns:repeat(2,1fr)}.grid.two{grid-template-columns:1fr}.weather-latest{grid-template-columns:repeat(3,1fr)}} /* BEGIN OM_SAFE_PROB_INFRA_CSS_V4 */ /* Keep the taller map/weather version */ #map { height: 560px !important; } #weatherChart { min-height: 520px !important; max-height: 520px !important; } /* ------------------------------------------------------- 50 / 50 probability + critical ------------------------------------------------------- */ .om-prob-infra-row-v4 { width: 100%; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 14px !important; align-items: stretch !important; margin-bottom: 14px; } .om-prob-infra-row-v4 > * { min-width: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; } .om-water-prob-v4 { display: flex; flex-direction: column; min-height: 480px; } .om-water-prob-v4-image { flex: 1; min-height: 390px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; background: rgba(3, 12, 22, .34); } .om-water-prob-v4-image img { display: block; width: 100%; height: 100%; max-height: 470px; object-fit: contain; } .om-water-prob-v4-note { margin-top: 8px; font-size: 11px; opacity: .62; } .om-critical-v4 { min-height: 480px; } /* Do not show an old probability card in gallery */ .om-probability-card { display: none !important; } @media (max-width: 1000px) { .om-prob-infra-row-v4 { grid-template-columns: 1fr !important; } } /* END OM_SAFE_PROB_INFRA_CSS_V4 */ /* BEGIN OM_PNG_PILLS_CSS_V4 */ /* Hide original rectangular layer buttons */ #layerButtons{ display:none !important; } .om-png-pills-v4{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; width:100%; margin:0 0 11px 0; } .om-png-pill-v4{ appearance:none; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:999px; font-size:11px; font-weight:750; white-space:nowrap; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; } .om-png-pill-v4:hover{ transform:translateY(-1px); } .om-png-pill-v4.active{ box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.20); } .om-png-pill-v4 .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; } /* WATER / HYDROLOGY */ .om-png-pill-v4.water{ color:#dff7ff; background:rgba(17,126,190,.20); border:1px solid rgba(48,188,246,.60); } .om-png-pill-v4.water.active{ background:rgba(15,139,205,.55); border-color:#4bd0ff; } /* VEGETATION */ .om-png-pill-v4.vegetation{ color:#e4ffe9; background:rgba(37,143,75,.20); border:1px solid rgba(66,197,102,.56); } .om-png-pill-v4.vegetation.active{ background:rgba(37,155,80,.55); border-color:#70e394; } /* SENTINEL-1 / RADAR */ .om-png-pill-v4.radar{ color:#f1e8ff; background:rgba(111,73,181,.20); border:1px solid rgba(161,116,231,.56); } .om-png-pill-v4.radar.active{ background:rgba(120,76,190,.55); border-color:#b88bff; } /* INFRASTRUCTURE */ .om-png-pill-v4.infra{ color:#fff2dd; background:rgba(195,115,24,.20); border:1px solid rgba(238,157,59,.58); } .om-png-pill-v4.infra.active{ background:rgba(200,118,24,.55); border-color:#ffb659; } /* TERRAIN / SOIL */ .om-png-pill-v4.terrain{ color:#f5eee6; background:rgba(121,96,71,.20); border:1px solid rgba(176,145,115,.52); } .om-png-pill-v4.terrain.active{ background:rgba(125,97,68,.53); border-color:#ceb08c; } /* RGB / OTHER */ .om-png-pill-v4.generic{ color:#eaf3f9; background:rgba(84,104,124,.18); border:1px solid rgba(137,160,180,.48); } .om-png-pill-v4.generic.active{ background:rgba(83,110,134,.50); border-color:#aac6da; } /* END OM_PNG_PILLS_CSS_V4 */