.flood-detail-page{min-height:60vh;background:#f4f7f6;color:#10253b;padding-bottom:2rem}
.flood-detail-shell{width:min(1180px,calc(100% - 30px));margin:0 auto}
.flood-detail-shell .breadcrumb{padding:1rem 0;background:transparent}
.flood-detail-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,240px);align-items:center;gap:24px;padding:1.2rem 0 1.5rem}
.flood-detail-hero h1{margin:0 0 .6rem;font-size:clamp(2rem,4vw,3.2rem);line-height:1.12}
.flood-detail-hero p:last-child{max-width:780px;color:#344b5f;font-size:1.08rem;line-height:1.5}
.flood-detail-hero img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain}
.flood-detail-eyebrow{margin:0 0 .35rem;color:#0f6b4f;font-size:.78rem;font-weight:800;text-transform:uppercase}
.flood-detail-warning,.flood-detail-error{margin:1rem 0;padding:1rem 1.15rem;border-left:5px solid #b42318;background:#fff1f0;color:#7a1711}
.flood-detail-section{padding:1.4rem 0;border-top:1px solid #dce5e2}
.flood-detail-section h2{margin:0;font-size:1.45rem}
.flood-detail-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.flood-detail-heading p[role=status]{margin:0;color:#526879;font-size:.9rem}
.flood-detail-map-controls{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-bottom:.75rem;padding:.75rem 1rem;border-radius:4px;background:#0b6840}
.flood-detail-map-controls label{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-weight:700;color:#fff;cursor:pointer}
.flood-detail-map-controls input{width:18px;height:18px;accent-color:#0b6840}
#flood-detail-map{height:480px;min-height:350px;border:1px solid #c7d5d1;background:#dfe8e5}
#flood-detail-map canvas.leaflet-zoom-animated,#flood-detail-map svg.leaflet-zoom-animated{max-width:none!important;max-height:none!important}
.flood-detail-map-legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding:.75rem;border:1px solid #dce5e2;border-top:0;background:#fff;font-size:.85rem}
.flood-detail-map-legend span{display:inline-flex;align-items:center;gap:.35rem}
.flood-detail-map-legend i{display:inline-block;flex:none;width:18px;height:12px;border:2px solid transparent}
.flood-detail-legend-ppri{background:rgba(139,30,63,.12);border-color:#8b1e3f!important}
.flood-detail-legend-cizi-01{background:#176b87}
.flood-detail-legend-cizi-02{background:#0f9d8a}
.flood-detail-legend-cizi-03{background:#e6a817}
.flood-detail-legend-cizi-04{background:#d9544d}
.flood-detail-legend-boundary{background:transparent;border-color:#173b2e!important}
.flood-detail-map-popup{min-width:170px;max-width:240px}
.flood-detail-map-popup strong,.flood-detail-map-popup span{display:block}
.flood-detail-map-popup strong{color:#10253b;margin-bottom:.25rem}
.flood-detail-map-popup span{color:#344b5f;font-size:.85rem}
.flood-detail-map-popup a{display:inline-block;margin-top:.45rem;color:#0b6840;font-weight:700;text-decoration:underline}
.flood-detail-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.flood-detail-kpis>div{min-height:112px;padding:1rem;border:1px solid #dce5e2;border-top:4px solid #0f6b4f;border-radius:6px;background:#fff}
.flood-detail-kpis span,.flood-detail-kpis small{display:block;color:#526879}
.flood-detail-kpis span{font-size:.84rem;font-weight:750}
.flood-detail-kpis strong{display:block;margin:.25rem 0;color:#0b6840;font-size:1.75rem;line-height:1.2}
.flood-detail-chart{display:grid;gap:.55rem;max-width:850px}
.flood-detail-chart-row{display:grid;grid-template-columns:minmax(170px,1fr) minmax(120px,2fr) 70px;align-items:center;gap:.75rem;padding:.55rem .7rem;background:#fff;border:1px solid #dce5e2;border-radius:4px}
.flood-detail-chart-row span{font-weight:700}
.flood-detail-swatch{display:inline-block;width:.8rem;height:.8rem;margin-right:.45rem;border:1px solid #63736e;border-radius:2px;vertical-align:-.04rem}
.flood-detail-chart-row strong{text-align:right;color:#0b6840}
.flood-detail-chart-track{height:14px;border-radius:3px;background:#e6edeb;overflow:hidden}
.flood-detail-chart-track i{display:block;height:100%;background:#0f9d8a}
.flood-detail-note{margin:1rem 0 0;color:#526879;font-size:.9rem}
.flood-detail-controls{display:grid;grid-template-columns:220px minmax(220px,1fr);gap:1rem;margin-bottom:1rem;padding:1rem;background:#0b6840;border-radius:4px}
.flood-detail-controls label{display:block;margin-bottom:.35rem;color:#fff;font-weight:750}
.flood-detail-controls input,.flood-detail-controls select{width:100%;min-height:42px;padding:.45rem .65rem;border:1px solid #9eb5ad;border-radius:4px;background:#fff;color:#10253b}
.flood-detail-table-wrap{overflow-x:auto;background:#fff;border:1px solid #dce5e2}
.flood-detail-table-wrap table{width:100%;min-width:900px;border-collapse:collapse}
.flood-detail-table-wrap caption{padding:.75rem;color:#526879;caption-side:top;text-align:left}
.flood-detail-table-wrap th,.flood-detail-table-wrap td{padding:.7rem .75rem;border-bottom:1px solid #dce5e2;text-align:left;vertical-align:top}
.flood-detail-table-wrap thead th{background:#eaf3ee;color:#123c2b}
.flood-detail-table-wrap tbody tr:nth-child(even){background:#f7faf8}
.flood-detail-table-wrap a,.flood-detail-links a{color:#0b6840;text-decoration:underline}
.flood-detail-type{display:inline-block;padding:.2rem .45rem;border-left:4px solid #0f9d8a;background:#eef7f3;font-size:.84rem;font-weight:750;white-space:nowrap}
.flood-detail-type--ppri{border-color:#8b1e3f;background:#fbeef2}
.flood-detail-pages{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
.flood-detail-pages button,.flood-detail-links a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.45rem .75rem;border:1px solid #0b6840;border-radius:4px;background:#0b6840;color:#fff;text-decoration:none;font-weight:750}
.flood-detail-pages button:disabled{opacity:.5;cursor:not-allowed}
.flood-detail-pages button:not(:disabled):hover,.flood-detail-links a:hover{background:#084b37;color:#fff}
.flood-detail-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.flood-detail-section>p{max-width:900px;line-height:1.6}
.flood-detail-shell :focus-visible{outline:3px solid #d48816;outline-offset:3px}
@media(max-width:850px){.flood-detail-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.flood-detail-shell{width:min(100% - 20px,1180px)}.flood-detail-hero{grid-template-columns:1fr}.flood-detail-hero img{max-height:220px}.flood-detail-heading{display:block}.flood-detail-kpis{grid-template-columns:1fr}.flood-detail-controls{grid-template-columns:1fr}.flood-detail-chart-row{grid-template-columns:1fr 80px}.flood-detail-chart-track{grid-column:1/-1;grid-row:2}.flood-detail-chart-row strong{grid-column:2;grid-row:1}.flood-detail-pages{gap:.45rem;font-size:.8rem}#flood-detail-map{height:380px;min-height:320px}}
