/* -----------------------------------------------------------------------------
   closina-schedule.css — Responsive height for <SfSchedule> consumers (Phase U72 S1.D)
   -----------------------------------------------------------------------------
   Background: Three Schedule consumer sites (AdminTeamCalendarPage,
   MemberTeamCalendarPage, MemberAppointmentListPage) shipped with a hardcoded
   Height="650px" that overflows at 768×1024 (~85% chrome) and 375×667 (>100%)
   per UX-R20 audit. Tier ladder per Cat 67:
     - Detail tier (calendar pair, route has {TeamId:guid}): ≤22% / Foldable ≤20%
     - List tier (member appointments): ≤22.5% / Foldable ≤20%

   Pattern: wrap <SfSchedule> in <div class="closina-schedule-responsive">.
   The wrapper provides breakpoint-aware min-height/max-height; Syncfusion's
   internal layout responds to its container's bounding box and now grows/shrinks
   proportionally with the viewport.

   Token: --closina-layout-topbar-height (56px Sm+, 48px Xs via -xs variant) drives
   the ceiling computation so the schedule never crosses below the topbar.
   ----------------------------------------------------------------------------- */

.closina-schedule-responsive {
    /* Default (desktop, ≥1280px tall viewports): generous floor, viewport-aware ceiling.
       The 200px reserve accounts for page header (~64px) + filter chips (~48px) +
       page padding (~40px) + safety margin (~48px). */
    min-height: 400px;
    max-height: calc(100dvh - var(--closina-layout-topbar-height) - 200px);
    /* Let the inner Syncfusion schedule fill the wrapper. */
    display: flex;
    flex-direction: column;
}

.closina-schedule-responsive > .e-schedule {
    /* Syncfusion renders .e-schedule as the root. Make it fill the wrapper. */
    flex: 1 1 auto;
    min-height: 0; /* Flex item shrink-to-fit guard for nested overflow */
}

/* Tablet (≤959px): tighter ceiling — page header + tab chrome consumes more
   relative real-estate. Reserve a higher chrome budget. */
@media (max-width: 959px) {
    .closina-schedule-responsive {
        max-height: calc(100dvh - var(--closina-layout-topbar-height) - 240px);
    }
}

/* Mobile + Foldable (≤599px): topbar shrinks to -xs variant; preserve
   touch-friendly minimum but cap aggressively so chrome stack stays under
   20% per Foldable tier. */
@media (max-width: 599px) {
    .closina-schedule-responsive {
        min-height: 360px;
        max-height: calc(100dvh - var(--closina-layout-topbar-height-xs) - 200px);
    }
}

/* Foldable folded (≤399px, e.g. Samsung Fold inner): preserve readability,
   cap below 100dvh to prevent overflow on the 667px-tall canonical viewport. */
@media (max-width: 399px) {
    .closina-schedule-responsive {
        min-height: 320px;
        max-height: calc(100dvh - var(--closina-layout-topbar-height-xs) - 180px);
    }
}