/*!
 * bs3-compat.css — Bootstrap 3 -> 4.6 consolidation bridge (admin only)
 *
 * The admin front-end is being consolidated onto Bootstrap 4.6, whose full
 * stylesheet is already shipped in public/assets/css/all.css. The legacy
 * public/css/vendor.css (Bootstrap 3.3.7 + AdminLTE2 + plugin CSS) stays loaded
 * for AdminLTE/plugin styles and its JS runtime, so this file bridges the few
 * Bootstrap-3 layout behaviours that would otherwise conflict with Bootstrap-4
 * column/utility markup once templates are migrated. It is loaded LAST in
 * resources/views/include/head.blade.php so it wins where needed.
 *
 * Scope is deliberately limited to SAFE, well-understood BS3<->BS4 bridges:
 * the grid (float -> flex) and the float helper utilities. Structural
 * components with a different box model in BS4 (input groups: table -> flex)
 * or JavaScript-coupled classes (.hide is toggled by app.js) are intentionally
 * NOT touched here — they keep rendering via vendor.css (BS3) until migrated
 * with per-screen visual verification.
 */

/* --- Grid: BS4 flex rows -------------------------------------------------
 * Bootstrap 4 rows are flexbox; Bootstrap 3 rows are float clearfix. Forcing
 * flex lets migrated BS4 columns (.col-6, .col-md-4, ...) size correctly even
 * when a sibling column in the same row is still legacy BS3 markup. Existing
 * BS3 float columns become flex items and keep their percentage widths, so
 * side-by-side columns stay side-by-side. */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* The admin uses the BS3 pattern of `.col-md-* + <div class="clearfix">` to
 * force a new grid line. Under floats the clearfix cleared the float; under
 * flex we reproduce that by making a clearfix that is a DIRECT child of a row
 * a full-width, zero-height line break (the standard BS4 `.w-100` technique).
 * This keeps every existing clearfix-based row break working after the switch
 * to flex, so no template edits are needed for the break divs. */
.row > .clearfix {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* DataTables and a few plugins emit their own `.row` control strips (length
 * menu / search / pagination). Keep them vertically centred under flex, which
 * matches their previous BS3 float appearance. */
.dataTables_wrapper > .row {
    align-items: center;
}

/* --- Float helpers -------------------------------------------------------
 * BS4 renamed .pull-left/.pull-right to .float-left/.float-right. all.css
 * already ships .float-*, but we keep the BS3 aliases working too so that any
 * un-migrated template or JS-generated markup is unaffected during rollout. */
.pull-left  { float: left  !important; }
.pull-right { float: right !important; }

/* --- Responsive images ---------------------------------------------------
 * BS3's .img-responsive set `display: block`; BS4's .img-fluid does not. The
 * AdminLTE profile picture centres itself with `margin: 0 auto`, which only
 * applies to a block element, so it stopped centring when the templates were
 * renamed to .img-fluid. Restore it for that component only — making every
 * .img-fluid block would change inline images across the app. */
.profile-user-img {
    display: block;
}