/*
 * Overrides for Tailwind utility class names that collide with legacy
 * Bootstrap 3 class names.
 *
 * The React bundle (Scripts/react/components/app.css) is built with Tailwind's
 * `important` flag, so every Tailwind utility ships as `!important`. Tailwind's
 * visibility utility `.collapse` therefore beats Bootstrap 3's `.collapse`
 * accordion class: the panel still expands (Bootstrap toggles `display`), but
 * its content is invisible on every legacy page that uses an accordion
 * (project details, reports, settings, ...).
 *
 * The rules below must sit in Tailwind's own `utilities` cascade layer. For
 * `!important` declarations the cascade reverses layer order and ranks
 * unlayered rules lowest, so an unlayered `!important` override - however
 * specific - still loses to Tailwind's layered one. Same layer + loaded after
 * the bundle = this file wins.
 *
 * `inherit` neutralises Tailwind's declaration rather than forcing visibility
 * on: it restores the behaviour these elements had before the bundle shipped,
 * where nothing set `visibility` on them at all.
 *
 * Keep this file limited to genuine Bootstrap/Tailwind name collisions.
 *
 * Temporary. The collisions exist because the React bundle is built with
 * Tailwind's `important` flag and because the legacy pages carry a second,
 * separately-generated Tailwind sheet (Content/tailwind.css). Once the sidebar
 * menu work lands we drop the flag, scan the legacy templates from the one
 * bundle, and delete both that sheet and this file.
 */
@layer utilities {
    .collapse {
        visibility: inherit !important;
    }

    /*
     * Bootstrap buttons carry `.btn` plus a variant class, and three of those
     * variant names are web-ui button utilities too. The bundle's versions set
     * `display: flex`, which makes a legacy button block-level: it drops onto
     * its own line instead of sitting next to its siblings (Rediger / Slett in
     * the Infrakit config table). Hand the box model back to bootstrap.css and
     * ditio-modern.css, which style `.btn` as `inline-flex`.
     *
     * web-ui's own buttons never carry `.btn` - they render as
     * `relative btn-danger btn-md ...` - so React components are untouched.
     */
    .btn.btn-primary,
    .btn.btn-danger,
    .btn.btn-link {
        display: inline-flex !important;
        height: auto !important;
    }

    /*
     * Not a Bootstrap name this time - `.fixed` is ours. mtd.css uses it as a
     * modifier on the tree toolbars to mean "fixed 32px height"
     * (div.mtd-tree-button-menu.fixed), while Tailwind's `.fixed` is the
     * position utility. The bundle wins, so the toolbar leaves normal flow:
     * it shrinks to its content (727px -> 121px on Period planning) and the
     * jstree below slides up underneath it, so the icons sit on top of the
     * first tree rows.
     *
     * Hand positioning back to mtd.css, which sets `position: relative` on the
     * unmodified `div.mtd-tree-button-menu`. The compound selector keeps real
     * Tailwind `.fixed` users - every React component - untouched.
     *
     * Only UserPeriodePlanning.htm carries this class (4 toolbars), and mtd.css
     * is its only definition, so renaming the modifier would kill the collision
     * outright - the better fix once the `important` flag is dropped and this
     * file goes away. Kept as an override for now to stay out of shared legacy
     * CSS while #3295 is in review. See #3886.
     */
    .mtd-tree-button-menu.fixed {
        position: relative !important;
    }
}