/* -----------------------------------------------------------------------------
   closina-fixed-height.css — Responsive wrapper for fixed-height container
   components (Phase U80 Sub-Phase D — Cluster 4: Responsive Wrapper Extension)
   -----------------------------------------------------------------------------
   Background: Several dashboard pages render <MudChart> containers with a
   hardcoded Height="280px" / Height="250px". A fixed pixel height does not
   shrink with the viewport, so at 768×1024 and 375×667 the chart consumes a
   disproportionate share of vertical real-estate (ERROR-tier chrome per the
   Cat 67 / UX-R20 tier ladder).

   Pattern (generalised from U72 Sub-Phase D's .closina-schedule-responsive):
   wrap the fixed-height container in <div class="closina-fixed-height-responsive">
   and change the component's hardcoded Height="...px" to Height="100%". The
   wrapper provides breakpoint-aware min-height/max-height; the inner component
   responds to its container's bounding box and grows/shrinks with the viewport.

   Generic (non-Schedule) sibling of closina-schedule.css — used by 6 chart
   consumer pages: Admin/Member Attribution dashboards, AdminCustomerHealth,
   AdminMemberOnboarding, AdminLeadScoringDashboard, AdminSupportAi.

   Sizing-only: no colour tokens, so no dark-mode variant is required.
   ----------------------------------------------------------------------------- */

.closina-fixed-height-responsive {
    /* Default (desktop): preserve the original ~280px feel as a generous floor,
       but let the chart breathe up to a viewport-aware ceiling. */
    min-height: 240px;
    max-height: 360px;
    /* Let the inner chart/map component fill the wrapper. */
    display: flex;
    flex-direction: column;
    /* X03 (long-tail sweep): a square-aspect MudChart (Donut/Pie with Width="100%")
       sizes to its CARD width — ~700px in a wide column — and renders far taller than
       this 360px band, bleeding down over sibling cards (confirmed on /a/health: the
       Risk Distribution donut covered "Monthly Outreach" + the "At-Risk Members"
       header). Contain it to the band and center the chart within it. */
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.closina-fixed-height-responsive > * {
    /* The wrapped container (MudChart root, SfChart, SfMap, …) fills the wrapper. */
    flex: 1 1 auto;
    min-height: 0; /* Flex item shrink-to-fit guard for nested overflow */
    max-height: 100%;
    max-width: 100%;
}

/* X03: never let a chart SVG exceed the band width. */
.closina-fixed-height-responsive svg {
    max-width: 100% !important;
}

/* X03: SQUARE-aspect charts (Donut/Pie) size to their card WIDTH, so in a wide column
   they render far TALLER than the height band — a `max-height: 100%` cap doesn't bite
   (the flex parent's height is indefinite, so the % can't resolve), leaving the chart
   clipped. `.closina-chart-square` caps the chart's WIDTH to the band's max-height per
   breakpoint, so a square chart renders as a centered circle that fits the band with no
   clipping. Applied on the OUTER ChartAccessibilityWrapper `Class=` (NOT the inner
   `closina-fixed-height-responsive` div — that must keep its exact class for the U80
   `CountWrapperDivs` + ChartAccessibility 600-char-window convention tests). Donut/Pie
   consumers only; wide Line/Bar charts keep full width. */
.closina-chart-square {
    max-width: 360px;
    margin-inline: auto;
}
@media (max-width: 959px) {
    .closina-chart-square { max-width: 280px; }
}
@media (max-width: 599px) {
    .closina-chart-square { max-width: 240px; }
}

/* Tablet (≤959px): page header + section chrome consumes more relative
   real-estate at 768×1024 — tighten the band so the chart no longer
   dominates the fold. */
@media (max-width: 959px) {
    .closina-fixed-height-responsive {
        min-height: 200px;
        max-height: 280px;
    }
}

/* Mobile (≤599px): cap aggressively so the chrome stack stays under the
   Foldable/Mobile tier budget at 375×667. */
@media (max-width: 599px) {
    .closina-fixed-height-responsive {
        min-height: 180px;
        max-height: 240px;
    }
}

/* Foldable folded (≤399px, e.g. Samsung Fold inner): preserve a readable
   minimum while keeping the chart from overflowing the short viewport. */
@media (max-width: 399px) {
    .closina-fixed-height-responsive {
        min-height: 160px;
        max-height: 220px;
    }
}