/*
* Tailwind v4 utility-order regression fix.
*
* v4 emits display utilities alphabetically, so the generated `.hidden`
* (display: none) appears BEFORE `.inline-flex`, `.inline`, `.table`, etc.
* Elements that carry both classes (very common with conditional buttons —
* see #vutAiOptimizeErrorBtn, which is created with
* class="… inline-flex … hidden"
* and toggled visible/hidden by JS) silently lose to the later rule and
* render as empty boxes. Tailwind v3 placed `.hidden` last specifically to
* avoid this; v4 dropped that ordering guarantee.
*
* This file is loaded AFTER tailwind.built.css on every page, so the
* !important wins regardless of source order.
*/
.hidden { display: none !important; }
/* ── Responsive show-utilities must still beat the !important .hidden above ──
* The `!important` above (needed for JS-toggled inline-flex/hidden buttons)
* also clobbers Tailwind's responsive show pattern `hidden sm:block` — a
* non-important media-query utility can't override !important, so elements
* like the AuxMode header logo (class="hidden sm:block") stay hidden at every
* width. Re-assert each responsive display utility the app actually uses, with
* !important, scoped to its breakpoint. [class~="…"] targets the utility by
* name (it's a whole class token) without enumerating every element, and these
* rules sit AFTER `.hidden` so they win at and above their breakpoint while the
* element stays hidden below it.
*/
@media (min-width: 40rem) { /* sm */
[class~="sm:block"] { display: block !important; }
[class~="sm:inline"] { display: inline !important; }
[class~="sm:inline-block"] { display: inline-block !important; }
}
@media (min-width: 48rem) { /* md */
[class~="md:flex"] { display: flex !important; }
[class~="md:grid"] { display: grid !important; }
}
/* ── Required-field column headers ─────────────────────────────────────
* Removed: previously this file marked every required-field | red
* unconditionally. That visually conflicted with the dynamic logic in
* updateVutHeaderValidation / updateAutHeaderValidation /
* updateOutHeaderValidation, which already toggles the | to
* bg-red-600 only when at least one cell in that column has an error
* (empty required value), and back to bg-gray-50 when all cells are
* filled. Letting the JS drive header colour gives a useful per-column
* "you have an unfilled required cell here" signal instead of a noisy
* always-red reminder.
*/
/* ── jQuery Sparkline tooltip (.jqstooltip) ────────────────────────────
* jQuery Sparkline injects its tooltip CSS via a runtime |