/* Flood overlay added after native qgis2web export. Background structure remains qgis2web. */
#floodAnimPanel{position:absolute;right:18px;bottom:18px;z-index:10000;background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.25);padding:12px 14px;min-width:330px;max-width:460px;font-family:Arial,sans-serif;color:#122}
#floodAnimPanel .floodTitle{font-weight:800;color:#0d47a1;margin-bottom:6px;font-size:15px}
#floodAnimPanel .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:4px 0}
#floodAnimPanel button{border:0;background:#f2f5f7;border-radius:9px;padding:7px 10px;font-weight:700;cursor:pointer}
#floodAnimPanel button:hover{background:#e3f2fd}
#floodAnimPanel input[type=range]{width:100%}
#floodAnimPanel .muted{color:#667;font-size:12px}
#floodAnimPanel label.mode{background:#f7fbff;border:1px solid #d7e5f4;border-radius:8px;padding:5px 8px;font-weight:700;font-size:12px;color:#123}
#floodLayersBox{max-height:140px;overflow:auto;margin:6px 0;border-top:1px solid #e4edf5;border-bottom:1px solid #e4edf5;padding:5px 0}
#floodLayersBox label{display:block;margin:3px 0;font-size:12px}
.floodPanelLayer{border-bottom:1px solid #eef3f7;padding:3px 0}
.floodLegend{margin:3px 0 4px 22px;font-size:12px;color:#334}
.floodLegendRow{display:flex;align-items:center;gap:6px;line-height:1.35;margin:2px 0}
.floodLegendSwatch{display:inline-block;width:18px;height:14px;border:1px solid rgba(0,0,0,.08)}
.floodLegendIcon{width:18px;height:18px;object-fit:contain}
#floodLegendInLayerSwitcher{margin:6px 0;padding:6px;border-top:1px solid #dce5ef;font-size:12px}
#floodLegendInLayerSwitcher .floodLsTitle{font-weight:800;margin:3px 0 5px;color:#123}
#floodLegendInLayerSwitcher .floodLsLayer{margin:4px 0}
#floodLegendPanel{position:absolute;right:18px;top:18px;z-index:10003;background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.25);padding:12px 14px;min-width:260px;max-width:420px;max-height:78vh;overflow:auto;font-family:Arial,sans-serif;color:#122}
#floodLegendPanel .floodLsTitle{font-weight:800;margin:3px 0 7px;color:#123}
#floodLegendPanel .floodLsLayer{margin:5px 0 8px 0}
#floodLegendPanel .floodLegend{margin-left:24px}
.layer-switcher.floodMovePanel,#layersList.floodMovePanel,.ol-layerswitcher.floodMovePanel{position:absolute!important;z-index:10020!important;max-height:86vh;overflow:auto;box-shadow:0 6px 24px rgba(0,0,0,.22);border-radius:8px}
.layer-switcher.floodMovePanel{right:18px;top:18px}
#layersList.floodMovePanel,.ol-layerswitcher.floodMovePanel{right:18px;top:18px;background:#fff;padding:8px}
.floodQgisLayerPanel{touch-action:none}
#floodAttrPanel{position:absolute;right:18px;top:18px;z-index:10002;background:#fff;border-radius:18px;box-shadow:0 6px 24px rgba(0,0,0,.28);padding:14px;max-width:760px;width:760px;max-height:72vh;overflow:auto;font-family:Arial,sans-serif;color:#122}
#floodAttrPanel h3,#floodTsPanel h3{margin:0 0 6px;font-size:22px;color:#122}
#floodAttrPanel .muted,#floodTsPanel .muted{color:#667;margin-bottom:6px}
#floodAttrPanel button,#floodTsPanel button{border:0;background:#f2f5f7;border-radius:10px;padding:8px 11px;margin:2px;font-weight:700;cursor:pointer}
.floodAttrTable{border-collapse:collapse;width:100%;font-size:13px;background:#f7f7f7}
.floodAttrTable th{background:#e8eef5;text-align:left;padding:7px;border:1px solid #cfd8dc;width:46%;font-weight:800}
.floodAttrTable td{padding:7px;border:1px solid #cfd8dc;vertical-align:top;background:#fbfdff}
#floodTsPanel{position:absolute;right:18px;top:18px;z-index:10001;background:#fff;border-radius:18px;box-shadow:0 6px 24px rgba(0,0,0,.25);padding:14px;width:760px;max-width:calc(100vw - 80px);max-height:72vh;overflow:auto;font-family:Arial,sans-serif;color:#122}
#floodChart{width:100%;height:360px}
#popup.ol-popup{max-width:none}
#popup-content .floodAttrTable{font-size:12px}

/* Movable/closable Flood panels and left dock bar */
#floodDockBar{position:absolute;left:12px;top:110px;z-index:10060;display:flex;flex-direction:column;gap:8px;pointer-events:auto;font-family:Arial,sans-serif}
.floodDockBtn{width:42px;height:42px;border:0;border-radius:12px;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.28);cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center}
.floodDockBtn:hover{background:#e3f2fd;transform:translateY(-1px)}
.floodMovePanel{resize:both;overflow:auto;touch-action:none}
.floodPanelHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:move;user-select:none;border-bottom:1px solid #dfe8f2;margin:-2px -2px 8px -2px;padding:0 0 8px 0}
.floodPanelHeaderTitle{font-weight:800;color:#0d47a1;font-size:18px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.floodPanelHeaderActions{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.floodPanelHeaderActions button{width:28px;height:28px;border:0;border-radius:8px;background:#eef4fa;color:#123;font-size:16px;line-height:1;font-weight:800;cursor:pointer;padding:0;margin:0}
.floodPanelHeaderActions button:hover{background:#d8eafd}
.floodPanelDragHint{font-size:11px;color:#667;font-weight:600;margin-left:4px}
#floodAnimPanel.floodMovePanel{max-height:82vh}
#floodAttrPanel.floodMovePanel,#floodTsPanel.floodMovePanel{min-width:360px;min-height:150px}
.layer-switcher .floodLsHeader{font-family:Arial,sans-serif;margin-bottom:6px;padding:5px 6px;border-bottom:1px solid #dfe8f2;background:rgba(255,255,255,.92);border-radius:6px}
.layer-switcher .floodLsHeader .floodPanelHeaderTitle{font-size:13px;color:#123}
@media(max-width:900px){#floodAttrPanel,#floodTsPanel{left:10px;right:10px;width:auto;max-width:none}#floodAnimPanel{left:10px;right:10px;min-width:0;max-width:none}}