/*
 * Bootstrap 4 -> 5 compatibility (all layouts: front-end, admin, login, Pop Ice).
 *
 * The views were written for Bootstrap 4. These rules bring back the Bootstrap 4
 * defaults that Bootstrap 5 removed or changed, so the pages keep their layout.
 * Load right after bootstrap.min.css. Remove a rule once the views no longer need it.
 */

/* Links were not underlined in Bootstrap 4 (only on hover) */
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Bootstrap 4 gave every grid column position: relative. Views place captions and
   overlays inside columns with position: absolute (e.g. "Kategori Lain" cards);
   without this they stretch over the whole page and cover other links. */
.col,
[class^="col-"],
[class*=" col-"] {
    position: relative;
}

/* Grid gutters: Bootstrap 4 used 15px per side (30px), Bootstrap 5 uses 12px (1.5rem) */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.row {
    --bs-gutter-x: 30px;
}
.g-0,
.gx-0 {
    --bs-gutter-x: 0;
}

/* Bootstrap 4 padded every column 15px left/right, also outside a .row.
   Bootstrap 5 only pads direct children of .row (via the gutter above). */
:not(.row) > .col,
:not(.row) > [class^="col-"]:not(.col-form-label),
:not(.row) > [class*=" col-"]:not(.col-form-label) {
    padding-right: 15px;
    padding-left: 15px;
}

/* Navbar: Bootstrap 4 had 1rem left/right padding, Bootstrap 5 has none */
.navbar {
    --bs-navbar-padding-x: 1rem;
}

/* .form-group was removed in Bootstrap 5 (62 uses in the admin forms) */
.form-group {
    margin-bottom: 1rem;
}

/* Bootstrap 4 gave every label a bottom margin */
label {
    display: inline-block;
    margin-bottom: .5rem;
}
.col-form-label {
    margin-bottom: 0;
}

/* <hr>: Bootstrap 5 draws it at 25% opacity with border-box sizing;
   Bootstrap 4 used a full-opacity light border and content-box sizing */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    color: inherit;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
    opacity: 1;
}

/* Single-line <select class="form-control"> had a fixed height in Bootstrap 4 */
select.form-control:not([size]):not([multiple]) {
    height: calc(2.25rem + 2px);
}
select.form-control-sm:not([size]):not([multiple]) {
    height: calc(1.8125rem + 2px);
}
select.form-control-lg:not([size]):not([multiple]) {
    height: calc(2.875rem + 2px);
}

/* .text-justify was removed in Bootstrap 5 */
.text-justify {
    text-align: justify !important;
}

/* Bootstrap 5 adds a 1320px container at >= 1400px; keep the Bootstrap 4 maximum (1140px) */
@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1140px;
    }
}

/* Bootstrap 5 scales headings with the viewport (RFS); Bootstrap 4 used fixed sizes */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }