/*
 * VCCU admin panel — custom styles
 *
 * Loaded into every Filament admin page via a renderHook in
 * AdminPanelProvider (PanelsRenderHook::HEAD_END). Static file, no
 * build step — Filament's deploy doesn't run npm/vite, so this is the
 * simplest path that survives a cache clear.
 *
 * If we ever set up a proper Filament theme (->viteTheme(...) in the
 * panel provider), these rules should migrate into that build pipeline
 * and this file can be deleted along with the renderHook.
 */

/* ---------------------------------------------------------------------
 * Interaction tag picker — left rail (Approach B)
 *
 * The left rail is a Filament Radio whose options are the patient's
 * clinic's tag groups. Default Filament styling has two problems for
 * our use case (~64 categories per clinic):
 *
 *   1. ->columns(1) outputs `columns-[--cols-default]` and
 *      `lg:columns-[--cols-lg]` Tailwind classes which use CSS
 *      multi-column layout. When the radiogroup has max-height set
 *      and content exceeds it, multi-column wraps the overflow into
 *      a SECOND visual column instead of giving us a vertical
 *      scrollbar. The hidden second column ends up rendered on top
 *      of the right pane and clipped by overflow-x: hidden.
 *
 *   2. Each option is wrapped in `<div class="break-inside-avoid pt-4">`
 *      with 1rem (or 2rem in the project's theme) of vertical padding,
 *      which stacks to ~2500px of header scroll for 64 categories.
 *
 * Both problems are scoped to elements carrying the
 * .vccu-tag-picker-rail class — set on the Radio via extraAttributes().
 * Filament's extraAttributes lands the class on the radiogroup element
 * itself (not a wrapper), so same-element selectors (no descendant
 * space) are what catch the column utility classes.
 *
 * See README.md changelog entries 0.4.2–0.4.6 for the iterative
 * diagnosis that landed on these selectors.
 * ------------------------------------------------------------------ */

/* Rail box: bounded height, vertical scroll only */
.vccu-tag-picker-rail {
    max-height: 480px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Pin every breakpoint's column-count CSS variable to 1. Filament Radio
 * applies Tailwind responsive classes like `lg:columns-[--cols-lg]` that
 * read these vars — keeping them all at 1 is one of two defenses against
 * multi-column layout. */
.vccu-tag-picker-rail {
    --cols-default: 1 !important;
    --cols-sm: 1 !important;
    --cols-md: 1 !important;
    --cols-lg: 1 !important;
    --cols-xl: 1 !important;
    --cols-2xl: 1 !important;
}

/* Nuke multi-column layout outright. The columns-* utility classes sit
 * on the SAME element as .vccu-tag-picker-rail (Filament extraAttributes
 * lands my class on the radiogroup itself), so we use same-element
 * selectors with no descendant space, plus explicit escaped class names
 * for unambiguous override. column-count: auto fully disables CSS
 * multi-column (different from column-count: 1, which is still single-
 * column multi-column and still wraps on max-height). */
.vccu-tag-picker-rail,
.vccu-tag-picker-rail.columns-\[--cols-default\],
.vccu-tag-picker-rail.lg\:columns-\[--cols-lg\],
.vccu-tag-picker-rail[class*="columns-"],
.vccu-tag-picker-rail [class*="columns-"],
.vccu-tag-picker-rail .fi-fo-radio,
.vccu-tag-picker-rail [role="radiogroup"] {
    column-count: auto !important;
    column-width: auto !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}

/* Per-option wrapper. Filament uses <div class="break-inside-avoid pt-4">
 * for each option (CSS column-break utility). Strip the padding and
 * neutralize the break behavior. */
.vccu-tag-picker-rail .break-inside-avoid,
.vccu-tag-picker-rail .break-inside-avoid.pt-4,
.vccu-tag-picker-rail [role="radiogroup"] > *,
.vccu-tag-picker-rail .fi-fo-radio-option {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    break-inside: auto !important;
}

/* Label line — just enough room for the radio dot, no extra whitespace. */
.vccu-tag-picker-rail label {
    line-height: 1.35rem !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}