/* =====================================================================
   Bharat India Map — V2 (HEATMAP redesign) styles
   Built on UX4G design tokens (public/css/UX4G/variables.css).
   Dedicated stylesheet for the V2 heatmap only — the existing
   AWCIndiaMap.css and heatmap screen remain untouched.
   The filter-bar band/labels/reset reuse ptv2_* classes from
   ptdashboardV2.css (loaded globally); here we only add the field
   wrapper + MUI overrides so the existing dropdowns fill their column.
   ===================================================================== */

/* Labelled field group: label stacked above the control */
.ptv2hm_field {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-2);
}

.ptv2hm_field .ptv2_filter_label {
  margin-bottom: 0;
}

/* MUI dropdown fields fill their grid column (override fixed widths) */
.ptv2hm_field .pt_awc_header_select_width,
.ptv2hm_field .pt_awc_dropdown_width,
.ptv2hm_field .pt_awc_dropdown_width_small,
.ptv2hm_field .MuiTextField-root,
.ptv2hm_field .MuiFormControl-root {
  width: 100% !important;
  max-width: 100% !important;
}

/* All V2 heatmap filter controls are native <select> fields (State, Range,
   Reporting period, Report, Age), so they share one consistent height. */
.ptv2hm_filter_bar .ptv2_filter_select {
  box-sizing: border-box;
}

/* Filter-bar row spacing on wrap */
.ptv2hm_filter_bar .row {
  row-gap: var(--ux4g-space-4);
}

.ptv2hm_filter_bar .ptv2_filter_home {
  padding-top: 0;
  height: 100%;
  /* Keep a gap so "India - NN%" doesn't touch the adjacent Select State field */
  padding-right: var(--ux4g-space-4);
}

/* ---------------------------------------------------------------------
   When the extra "Age Group" dropdown is present the row has 7 fields.
   At ux4g-col-2 (2/12) each, 7 fields = 14/12 and the Reset button wraps
   to a second line. On DESKTOP only, shrink each of the 7 columns to 1/7
   so they all fit on one row. Tablet/phone keep the framework's md/sm
   responsive columns untouched. Scoped to .ptv2hm_has_age.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
  .ptv2hm_filter_bar .ptv2hm_has_age>[class*="ux4g-col"] {
    flex: 0 0 14.2857%;
    max-width: 14.2857%;
    width: 14.2857%;
  }
}

/* =====================================================================
   V2 heatmap — responsive map/table stacking (scoped to .ptv2hm_section
   so the shared V1 map is unaffected).

   On desktop the map and the data table sit side by side
   (.pt_awc_india_map_main_div { flex-direction: row }). On tablets and
   phones that side-by-side layout is too cramped, so from <=991px we
   stack them vertically with the MAP FIRST and the TABLE BELOW, each
   full width. The DOM order inside .pt_awc_india_map_main_div is already
   map -> legend -> table, so a plain column stack preserves that order.
   ===================================================================== */
@media (max-width: 991px) {
  .ptv2hm_section .pt_awc_india_map_main_div {
    flex-direction: column;
    align-items: stretch;
  }

  /* map block first, full width */
  .ptv2hm_section .pt_awc_india_map_wrapper_div {
    width: 100%;
    order: 0;
  }

  /* table block below the map, full width + horizontal scroll if needed */
  .ptv2hm_section .pt_awc_india_map_main_div>div:last-child {
    width: 100%;
    order: 1;
    margin-top: var(--ux4g-space-6, 16px);
    margin-right: 0 !important;
    overflow-x: auto;
  }
}

/* =====================================================================
   V2 heatmap — map + legend stacking on mobile/tablet (scoped to
   .ptv2hm_section so the shared V1 map is unaffected).

   The map (.pt_awc_india_map_wrapper_div) and the non-floating legend
   bar (.pt_awc_legendBar_main_div_max_width) must sit ONE BELOW THE
   OTHER on smaller screens — map first, legend below — each full width,
   with the legend swatches allowed to wrap instead of being clipped by
   the 262px cap / right alignment used on desktop.
   ===================================================================== */
@media (max-width: 991px) {

  /* map fills the width */
  .ptv2hm_section .pt_awc_india_map_wrapper_div {
    width: 100%;
    flex-wrap: wrap;
  }

  /* legend drops below the map, full width, left aligned (not capped) */
  .ptv2hm_section .pt_awc_legendBar_main_div_max_width {
    max-width: 100%;
    width: 100%;
    justify-content: flex-start !important;
    margin-top: var(--ux4g-space-5, 12px);
  }

  /* the white legend card can use the full row and wrap its swatches */
  .ptv2hm_section .pt_awc_legendBar_second_div {
    max-width: 100%;
    width: 100%;
    flex-wrap: wrap;
  }

  .ptv2hm_section .pt_awc_legend_items_main_div {
    flex-wrap: wrap;
  }
}

/* =====================================================================
   V2 heatmap — Heat map view uses a UX4G grid (ux4g-col-7 map / ux4g-col-5
   table), NOT the flex .pt_awc_india_map_main_div. Those column widths are
   fixed across breakpoints, so on phones/tablets the map + table stay side
   by side and overflow. Force both columns to full width up to 991px so
   they STACK — map first (DOM order), table below. Scoped to the V2 row.
   ===================================================================== */
@media (max-width: 991px) {
  .ptv2hm_map_row {
    flex-direction: column;
  }

  .ptv2hm_map_row .ptv2hm_map_col,
  .ptv2hm_map_row .ptv2hm_table_col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* table sits below the map with a little breathing room + scrolls if wide */
  .ptv2hm_map_row .ptv2hm_table_col {
    margin-top: var(--ux4g-space-6, 16px);
    overflow-x: auto;
  }
}


/* =====================================================================
   V2 heatmap table — add a bottom border to each row/cell. The shared
   CustomTable (components/Table.tsx) sets borderBottom:none on its MUI
   cells; re-enable it here, scoped to .ptv2hm_table_col so only the
   heatmap table is affected (!important to beat MUI's styled class).
   ===================================================================== */
.ptv2hm_table_col .MuiTableBody-root .MuiTableCell-root {
  border-bottom: 1px solid var(--ux4g-color-neutral-200, #e5e5e5) !important;
}

/* keep the last row flush with the container's rounded bottom edge */
.ptv2hm_table_col .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root {
  border-bottom: none !important;
}