/* __OM_LAYOUT_REPAIR_V28_CSS__ */ /* ========================================================== ONE CONTROLLER: V20 owns Area + Actions + Timeline. No V27 timeline row. ========================================================== */ #om-v20-hero-row { width: 100% !important; display: grid !important; grid-template-columns: minmax(260px,1fr) max-content !important; grid-template-rows: auto auto !important; grid-template-areas: "area actions" "timeline timeline" !important; align-items: center !important; column-gap: 18px !important; row-gap: 14px !important; margin: 10px 0 14px 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================== ROW 1 — AREA ========================================================== */ #om-v20-area-slot { grid-area: area !important; width: auto !important; max-width: none !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; } /* ========================================================== ROW 1 — BUTTONS ========================================================== */ #om-v20-actions-slot { grid-area: actions !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; justify-self: end !important; width: max-content !important; min-width: max-content !important; visibility: visible !important; opacity: 1 !important; } #om-v20-actions-slot #om-v18-actions { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 9px !important; margin: 0 !important; position: static !important; } #om-v20-actions-slot #om-new-area-launch, #om-v20-actions-slot #om-v18-compare { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; position: static !important; min-width: 122px !important; width: auto !important; height: 41px !important; margin: 0 !important; padding: 0 14px !important; } /* ========================================================== ROW 2 — TIMELINE ========================================================== */ #om-v20-timeline-slot { grid-area: timeline !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; } #om-v20-timeline-slot #omCanonicalTimelineV7 { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } #om-v20-timeline-slot .om-v7-timeline-panel { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } /* ========================================================== KILL ANY STALE V27 CONTAINER ========================================================== */ #om-v27-timeline-row { display: none !important; } /* ========================================================== METRIC ROW BELOW HERO/TIMELINE ========================================================== */ #om-v26-metrics-row { display: grid !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; gap: 12px !important; margin: 0 0 16px 0 !important; } #om-v26-metrics-row .card { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* ========================================================== MAIN DASHBOARD MUST REMAIN VISIBLE ========================================================== */ main > .grid.two, main > .panel, main > .grid.two.bottom-grid, #waterExtentPanel { visibility: visible !important; opacity: 1 !important; } /* * Map/weather main grid specifically. */ main > section.grid.two { display: grid !important; } /* * Normal panel sections. */ main > section.panel { display: block !important; } /* ========================================================== MOBILE ========================================================== */ @media(max-width:800px) { #om-v20-hero-row { grid-template-columns: 1fr !important; grid-template-areas: "area" "actions" "timeline" !important; } #om-v20-actions-slot { justify-self: start !important; } #om-v26-metrics-row { grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } } /* ========================================================== __OM_GRID_ALIGN_V30__ Match hero/timeline to the exact same 4-column geometry used by: Water | Infrastructure | Weather | PNG layers ========================================================== */ /* ---------------------------------------------------------- HERO GRID = SAME 4 COLUMNS AS METRIC ROW ---------------------------------------------------------- */ #om-v20-hero-row { width: 100% !important; display: grid !important; grid-template-columns: repeat( 4, minmax(0, 1fr) ) !important; grid-template-rows: auto auto !important; column-gap: 12px !important; row-gap: 14px !important; align-items: center !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- AREA INFO occupies first THREE columns ---------------------------------------------------------- */ #om-v20-area-slot { grid-column: 1 / 4 !important; grid-row: 1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; align-self: center !important; } /* ---------------------------------------------------------- BUTTONS occupy LAST / FOURTH column ---------------------------------------------------------- */ #om-v20-actions-slot { grid-column: 4 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; justify-self: stretch !important; align-self: center !important; } #om-v20-actions-slot #om-v18-actions { width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 9px !important; margin: 0 !important; } /* * Buttons share the fourth column nicely. */ #om-v20-actions-slot #om-new-area-launch, #om-v20-actions-slot #om-v18-compare { flex: 1 1 0 !important; min-width: 0 !important; max-width: 150px !important; height: 41px !important; padding: 0 12px !important; } /* ---------------------------------------------------------- TIMELINE FULL WIDTH: first column -> fourth column therefore its right edge matches exactly Available PNG layers. ---------------------------------------------------------- */ #om-v20-timeline-slot { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; box-sizing: border-box !important; } #om-v20-timeline-slot #omCanonicalTimelineV7 { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } #om-v20-timeline-slot .om-v7-timeline-panel { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- METRIC ROW Force same exact geometry so timeline/card edges align. ---------------------------------------------------------- */ #om-v26-metrics-row { width: 100% !important; display: grid !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; gap: 12px !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- Responsive ---------------------------------------------------------- */ @media(max-width:1000px) { #om-v20-hero-row { grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } #om-v20-area-slot { grid-column: 1 !important; } #om-v20-actions-slot { grid-column: 2 !important; } #om-v20-timeline-slot { grid-column: 1 / -1 !important; } } @media(max-width:650px) { #om-v20-hero-row { grid-template-columns: 1fr !important; } #om-v20-area-slot, #om-v20-actions-slot, #om-v20-timeline-slot { grid-column: 1 !important; } #om-v20-actions-slot { justify-content: flex-start !important; } #om-v20-actions-slot #om-v18-actions { justify-content: flex-start !important; } } /* ========================================================== __OM_HERO_FULL_SPAN_V31__ IMPORTANT: header.topbar is itself a grid. The hero must span ALL of the parent's columns. ========================================================== */ /* ---------------------------------------------------------- HERO OCCUPIES ENTIRE HEADER WIDTH ---------------------------------------------------------- */ header.topbar > #om-v20-hero-row { grid-column: 1 / -1 !important; grid-row: auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; justify-self: stretch !important; align-self: stretch !important; box-sizing: border-box !important; } /* * This is the actual V30 four-column layout, * now allowed to use the WHOLE header width. */ #om-v20-hero-row { grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } /* ---------------------------------------------------------- FIRST ROW ---------------------------------------------------------- */ /* * Area information spans columns 1-3. */ #om-v20-area-slot { grid-column: 1 / 4 !important; grid-row: 1 !important; width: 100% !important; } /* * Actions occupy column 4. */ #om-v20-actions-slot { grid-column: 4 / 5 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; justify-self: stretch !important; } #om-v20-actions-slot #om-v18-actions { width: 100% !important; display: flex !important; justify-content: flex-end !important; gap: 9px !important; } /* * Now that column 4 has its proper width, * restore normal button widths. */ #om-v20-actions-slot #om-new-area-launch, #om-v20-actions-slot #om-v18-compare { flex: 0 1 135px !important; width: auto !important; min-width: 118px !important; max-width: 145px !important; height: 41px !important; padding: 0 13px !important; } /* ---------------------------------------------------------- SECOND ROW: TIMELINE = ALL FOUR COLUMNS ---------------------------------------------------------- */ #om-v20-timeline-slot { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; display: block !important; } #om-v20-timeline-slot #omCanonicalTimelineV7, #om-v20-timeline-slot .om-v7-timeline-panel { width: 100% !important; max-width: none !important; min-width: 0 !important; } /* ---------------------------------------------------------- SAME EXACT WIDTH AS FOUR METRIC CARDS BELOW ---------------------------------------------------------- */ #om-v26-metrics-row { width: 100% !important; max-width: none !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; gap: 12px !important; }