/* ===================================================================
   Equal Height Elements in Grid Columns
   Scope: containers and portlet fragments nested inside a grid
          fragment with the class .equal-height-grid

   How to use
   ----------
   1. Apply .equal-height-grid to the parent Grid fragment.

   2. For CONTAINER fragments, apply one of:
        equal-height-container-align-center
        equal-height-container-align-top

   3. For PORTLET fragments (client extension widgets), apply BOTH
      classes — the propagation class and an alignment class:
        equal-height-portlet equal-height-portlet-align-center
        equal-height-portlet equal-height-portlet-align-top

   4. Upload this file to a CSS Client Extension and attach it
      to the page.
   =================================================================== */

/* -------------------------------------------------------------------
   SHARED FOUNDATION
   Steps 1 and 2 apply to all element types inside .equal-height-grid.
   ------------------------------------------------------------------- */

/*
 * Step 1: Override Liferay/Bootstrap's align-items-*-start utilities
 * (applied at all breakpoints on the .row element) so that all columns
 * stretch to the height of the tallest column.
 * !important is required because Bootstrap utility classes use it too.
 */
.equal-height-grid .row {
    align-items: stretch !important;
}

/*
 * Step 2: Turn each Bootstrap column into a flex column so that
 * child elements can grow along the vertical axis.
 */
.equal-height-grid .row > .col {
    display: flex;
    flex-direction: column;
}

/* -------------------------------------------------------------------
   CONTAINER FRAGMENTS
   Use these classes on Liferay Container fragments.
   ------------------------------------------------------------------- */

/*
 * Grows to fill the full column height and centers content vertically.
 */
.equal-height-grid .equal-height-container-align-center {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*
 * Grows to fill the full column height and pins content to the top.
 */
.equal-height-grid .equal-height-container-align-top {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* -------------------------------------------------------------------
   PORTLET FRAGMENTS (client extension widgets)
   Use these classes on portlet / widget fragments.

   Liferay wraps every portlet in several nested divs before the
   visible box:
     .equal-height-portlet         (the fragment element itself)
       > div#fragment-...          (Liferay fragment wrapper)
         > .portlet-boundary       (portlet infrastructure wrapper)
             > section.portlet
                 > .portlet-content
                     > .portlet-content-container
                         > .portlet-body

   Without propagating flex height through this chain each wrapper
   sizes to its content and the visible portlet box never reaches
   the equalized column height.

   min-height: 0 overrides the flex default of min-height: auto,
   which would otherwise prevent shrinking and break the calculation.
   ------------------------------------------------------------------- */

/*
 * Propagates the column height through every Liferay portlet wrapper.
 */
.equal-height-grid .equal-height-portlet,
.equal-height-grid .equal-height-portlet > div,
.equal-height-grid .equal-height-portlet .portlet-boundary,
.equal-height-grid .equal-height-portlet .portlet,
.equal-height-grid .equal-height-portlet .portlet-content,
.equal-height-grid .equal-height-portlet .portlet-content-container,
.equal-height-grid .equal-height-portlet .portlet-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The portlet title bar must not grow — keep it at natural height. */
.equal-height-grid .equal-height-portlet .portlet-header {
    flex: 0 0 auto;
}

/*
 * Centers the portlet body content vertically within the portlet box.
 */
.equal-height-grid .equal-height-portlet.equal-height-portlet-align-center .portlet-body {
    justify-content: center;
}

/*
 * Pins the portlet body content to the top of the portlet box.
 */
.equal-height-grid .equal-height-portlet.equal-height-portlet-align-top .portlet-body {
    justify-content: flex-start;
}

/* -------------------------------------------------------------------
   CHART WIDGET INNER CONTENT
   The rules above propagate height as far as .portlet-body. However,
   the visible white box is .chart-card, which is several levels deeper
   inside the chart widget's own DOM:

     .portlet-body
       > custom-element (e.g. nyiso-load, nyiso-current-fuel)
           > div#..._mainview
               > .display-charts
                   > div.row  (Bootstrap flex-row — kept as-is)
                       > .real-time-data-container
                           > .chart-card          ← visible white box
                               > .chart-card-body

   Each level below portlet-body needs flex: 1 1 auto to relay height
   down to .chart-card so the white box fills the full column height.
   min-height: 0 prevents flex items from refusing to shrink.
   ------------------------------------------------------------------- */

/* The custom web component (nyiso-load, nyiso-current-fuel, etc.)
   is the direct child of portlet-body. */
.equal-height-grid .equal-height-portlet .portlet-body > * {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The mainview div is the direct child of the custom element. */
.equal-height-grid .equal-height-portlet .portlet-body > * > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* .display-charts sits inside mainview. */
.equal-height-grid .equal-height-portlet .display-charts {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Bootstrap .row inside .display-charts is already flex-row.
   Don't change flex-direction — just allow it to grow vertically. */
.equal-height-grid .equal-height-portlet .display-charts > .row {
    flex: 1 1 auto;
    min-height: 0;
}

/* The col that wraps the chart-card. */
.equal-height-grid .equal-height-portlet .real-time-data-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The visible white box and its body. */
.equal-height-grid .equal-height-portlet .chart-card,
.equal-height-grid .equal-height-portlet .chart-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}