/* ==========================================================================
   COMBINED VIEW LAYOUTS
   ========================================================================== */

/* ROWS Layout: All 3 sections stacked vertically (equal height) */
.viz-content.combined-layout-rows {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.viz-content.combined-layout-rows #maps-section,
.viz-content.combined-layout-rows #charts-section,
.viz-content.combined-layout-rows #tables-section {
    display: block !important;
    flex: 1 1 33.333% !important;
    min-height: 0 !important;
    border-bottom: 1px solid #e1e5e9 !important;
    overflow: auto !important;
    padding: 0 !important;
}

.viz-content.combined-layout-rows #tables-section {
    border-bottom: none !important;
}

/* COLUMNS Layout: 2 columns - Map left (50%), Charts+Tables stacked right (50%) */
.viz-content.combined-layout-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    height: 100% !important;
    gap: 0 !important;
}

/* Map takes full left column */
.viz-content.combined-layout-columns #maps-section {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    border-right: 1px solid #e1e5e9 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Charts in top-right */
.viz-content.combined-layout-columns #charts-section {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    border-bottom: 1px solid #e1e5e9 !important;
    overflow: auto !important;
    padding: 0 !important;
}

/* Tables in bottom-right */
.viz-content.combined-layout-columns #tables-section {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    overflow: auto !important;
    padding: 0 !important;
}

/* Force map containers to fill their sections completely */
.viz-content.combined-layout-rows #maps-section .leaflet-container,
.viz-content.combined-layout-rows #maps-section .mapboxgl-map,
.viz-content.combined-layout-columns #maps-section .leaflet-container,
.viz-content.combined-layout-columns #maps-section .mapboxgl-map {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Charts and tables should also fill their sections */
.viz-content.combined-layout-rows .visualization-widget,
.viz-content.combined-layout-columns .visualization-widget,
.viz-content.combined-layout-rows .table-container,
.viz-content.combined-layout-columns .table-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}

/* Ensure chart/table content scales properly */
.viz-content.combined-layout-rows canvas,
.viz-content.combined-layout-rows svg,
.viz-content.combined-layout-columns canvas,
.viz-content.combined-layout-columns svg {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   DYNAMIC TABLE SIZING - Responsive to view mode
   ========================================================================== */

/* Center tables in their containers */
#tables-section {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 20px !important;
}

/* Normal view: Larger tables */
#tables-section table {
    font-size: 1.1em !important;
}

#tables-section th,
#tables-section td {
    padding: 10px 16px !important;
    font-size: 1.05em !important;
    line-height: 1.7 !important;
}

/* ROWS view: Full size (1/3 height available) */
.viz-content.combined-layout-rows #tables-section {
    padding: 16px !important;
}

.viz-content.combined-layout-rows #tables-section table {
    font-size: 1em !important;
    line-height: 1.6 !important;
}

.viz-content.combined-layout-rows #tables-section th,
.viz-content.combined-layout-rows #tables-section td {
    padding: 8px 12px !important;
    font-size: 1em !important;
}

/* COLUMNS view: Medium size (1/4 space - 50% width, 50% height) */
.viz-content.combined-layout-columns #tables-section {
    padding: 12px !important;
}

.viz-content.combined-layout-columns #tables-section table {
    font-size: 0.9em !important;
    line-height: 1.5 !important;
}

.viz-content.combined-layout-columns #tables-section th,
.viz-content.combined-layout-columns #tables-section td {
    padding: 6px 10px !important;
    font-size: 0.9em !important;
}

/* Ensure table containers scroll for long tables in all views */
.viz-content.combined-layout-rows #tables-section,
.viz-content.combined-layout-columns #tables-section {
    overflow: auto !important;
}