/*
 * Bootstrap 5 compatibility rules for pages ported from Bootstrap 4.
 * Load AFTER bootstrap.min.css and after the DataTables bundle.
 */

/*
 * 1. Display-utility precedence.
 *
 * The app reveals hidden elements by ADDING a display class on top of d-none
 * (242 sites across 14 pages, e.g. mbupload.php:524 and :530):
 *
 *     document.getElementById("Addnew").classList.add('d-inline');
 *
 * Both utilities are !important, so which one wins is decided purely by their
 * order in bootstrap.css. Bootstrap 4 emits .d-none first and .d-inline after
 * it, so the element became visible. Bootstrap 5 reverses that order, d-none
 * wins, and every such element stays invisible with no error anywhere.
 *
 * Restore the Bootstrap 4 outcome. The proper fix is for that JS to call
 * classList.remove('d-none') instead; until then this keeps all 242 working.
 */
.d-none.d-inline       { display: inline       !important; }
.d-none.d-inline-block { display: inline-block !important; }
.d-none.d-block        { display: block        !important; }
.d-none.d-flex         { display: flex         !important; }
.d-none.d-inline-flex  { display: inline-flex  !important; }
.d-none.d-table        { display: table        !important; }
.d-none.d-grid         { display: grid         !important; }

/*
 * 2. Table cell backgrounds.
 *
 * DataTables' bootstrap5 integration paints every cell opaque:
 *
 *     table.table.dataTable > :not(caption) > * > * { background-color: var(--bs-table-bg) }
 *
 * with --bs-table-bg resolving to #fff. Under Bootstrap 4 the cells were
 * transparent, so the container's own background showed through and DataTables'
 * inset box-shadow stripe read clearly against it. Making the cells transparent
 * again restores the Bootstrap 4 appearance without touching either bundle.
 */
table.table.dataTable > tbody > tr > * { --bs-table-bg: transparent; }

/*
 * 3. Navbar horizontal padding.
 *
 * Bootstrap 4's .navbar hardcoded "padding: .5rem 1rem". Bootstrap 5 sets
 * --bs-navbar-padding-x to 0 and expects a .container inside the navbar to
 * supply the horizontal padding instead. These pages put the nav children
 * directly in <nav class="navbar">, with no inner container, so under BS5 the
 * brand logo ends up flush against the left edge and the right-hand links
 * against the right edge. Restore the Bootstrap 4 value.
 */
.navbar { --bs-navbar-padding-x: 1rem; }

/*
 * 4. Buttons that are also badges.
 *
 * The file-count control is <button class="btn btn-outline-success badge">.
 * Bootstrap 4's .badge declared no colour, so the button's own green text showed
 * through and the control read as green-on-transparent with a green border.
 * Bootstrap 5's .badge DOES set a colour (--bs-badge-color, white), and since it
 * comes after the button rules with equal specificity it wins -- leaving white
 * text on a transparent background, i.e. an empty-looking badge with a green
 * outline. Hand the colour back to whichever .btn-* variant is present;
 * --bs-btn-color is defined by that variant. Hover is restored separately
 * because this rule would otherwise outrank .btn:hover.
 */
.btn.badge        { color: var(--bs-btn-color); }
.btn.badge:hover  { color: var(--bs-btn-hover-color); }

/*
 * 5. PayPal hosted-cart "Add to Cart" button width.
 *
 * NOT a Bootstrap issue -- it lives here because this stylesheet is already
 * loaded on exactly the pages that embed the cart (shop, shopil, index,
 * indexil, maof) and nowhere else that matters.
 *
 * PayPal sizes every control in the card to the same 374px. Its <select> is
 * box-sizing: border-box and lands on 374px, but its button is content-box
 * with ~25.8px of padding each side, so it renders 426px -- 52px wider than
 * the quantity dropdown above it and wider than its own container, which is
 * why it looked off-centre. Bootstrap's reboot sets border-box on *, but
 * PayPal's own injected styles override it for their button.
 *
 * Making the button border-box brings it to 374px, flush with the select.
 */
paypal-add-to-cart-button button,
paypal-cart-button button { box-sizing: border-box; }

/*
 * 6. ...and centre the card on what PayPal actually renders.
 *
 * PayPal caps its controls at 374px and gives that block margin:0, so in a
 * wider card everything hugs the left edge with dead space on the right. The
 * component cannot be shrink-wrapped to fix it -- its internals are sized in
 * percentages, so width:fit-content on either the host or the card collapses
 * the whole thing to nothing (measured: button 52px, select 41px).
 *
 * So cap the card instead and centre it in its column: 374px of PayPal content
 * + 2 x 16px of .w3-padding = 406px. On all five cart pages .w3-third appears
 * exactly three times and always wraps a PayPal card, so this reaches those 15
 * cards and nothing else.
 *
 * If PayPal ever changes that 374px, the effect degrades to today's behaviour
 * (a gap on one side) rather than breaking -- it is a max-width, and their
 * content is itself capped, so it cannot overflow.
 */
.w3-third > .w3-card {
    max-width: 406px;
    margin-left: auto;
    margin-right: auto;
}