/* ========================================================================
   admin-modal-fix.css

   This file fixes two related problems on the admin site:

   1) The site uses Tailwind v2.2.19 (CDN), which does NOT support arbitrary
      value classes such as `max-h-[92vh]`, `z-[60]`, `text-[10px]`, etc.
      Those classes silently do nothing in Tailwind v2, which left modal
      panels with no max-height constraint — they grew far beyond the
      viewport, and the inner `flex-1 overflow-y-auto` scrolling never
      engaged because the panel itself had no bounded height.
      We polyfill the bracket-syntax classes used in the markup so the
      original intent is honored.

   2) Even with proper max-h, the modal overlays used
      `flex items-center justify-center` with no overflow handling. When
      the panel was taller than the viewport, the centered panel was
      clipped at BOTH the top and the bottom and unreachable.

      We switch every dimmed overlay to CSS Grid (place-items: center) +
      overflow-y: auto. In Grid, when a child is taller than the implicit
      row, the row grows to fit the child and the overlay's overflow
      produces a real scrollbar — so all modal content (including sticky
      footers) is reachable. Centering is preserved when the panel fits.
   ======================================================================== */

/* ---------- Tailwind v2 polyfills: arbitrary value classes ---------- */

/* z-index */
.z-\[55\]  { z-index: 55; }
.z-\[60\]  { z-index: 60; }

/* min-height / min-width */
.min-h-\[3\.25rem\] { min-height: 3.25rem; }
.min-h-\[154px\]    { min-height: 154px;   }
.min-w-\[154px\]    { min-width:  154px;   }

/* max-height */
.max-h-\[55vh\] { max-height: 55vh; }
.max-h-\[85vh\] { max-height: 85vh; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[92vh\] { max-height: 92vh; }

/* max-width */
.max-w-\[200px\]  { max-width:  200px;  }
.max-w-\[9rem\]   { max-width:  9rem;   }
.max-w-\[1200px\] { max-width:  1200px; }
.max-w-\[1600px\] { max-width:  1600px; }

/* font-size */
.text-\[10px\] { font-size: 10px; line-height: 1;   }
.text-\[11px\] { font-size: 11px; line-height: 1.2; }

/* transition-property */
.transition-\[width\,transform\] { transition-property: width, transform; }

/* ---------- Universal modal scroll fix ---------- */

/*
 * Make every dimmed modal overlay scrollable so that panels which exceed
 * the viewport height remain fully reachable. We target the existing
 * Tailwind class combination used by every modal on the site.
 */
.fixed.inset-0.bg-black.bg-opacity-50,
.fixed.inset-0.bg-black.bg-opacity-75 {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/*
 * When the overlay is shown (it has the `flex` class — every modal toggle
 * on the site sets this), switch from flex centering (which clips taller
 * panels) to CSS Grid centering (which scrolls cleanly).
 */
.fixed.inset-0.bg-black.bg-opacity-50.flex,
.fixed.inset-0.bg-black.bg-opacity-75.flex {
    display: grid;
    place-items: center;
    padding: 1rem;
}

/*
 * `hidden` must always win over the display override above.
 */
.fixed.inset-0.bg-black.bg-opacity-50.hidden,
.fixed.inset-0.bg-black.bg-opacity-75.hidden {
    display: none;
}

/*
 * Defensive cap: if a panel uses Tailwind's `max-h-screen`, that combined
 * with the previous flex centering also clipped content. Keep the panel
 * just shy of the viewport so the outer overlay can scroll the rest.
 */
.fixed.inset-0.bg-black.bg-opacity-50 .max-h-screen,
.fixed.inset-0.bg-black.bg-opacity-75 .max-h-screen {
    max-height: calc(100vh - 2rem);
}