/* =========================================================================
   Bootstrap 5 → 4 compatibility shim (CSS half)

   The Playbook365 modal/page lab was authored against Bootstrap 5, but the
   production backend runs Bootstrap 4. Rather than rename thousands of
   utility classes across every file, this stylesheet back-fills the BS5
   utilities and component markup that BS4 doesn't ship, so the existing
   BS5-flavored markup renders correctly under BS4.

   Load order (every standalone page):
     1. bootstrap@4 CSS
     2. bootstrap-compat.css   ← this file (overrides/back-fills)
     3. playbook365.css        ← design system (wins where it is scoped)

   Pairs with assets/js/bootstrap-compat.js (the JS half: Modal / Offcanvas /
   Collapse / Dropdown / Tooltip without jQuery).
   ========================================================================= */

/* ---- Logical spacing utilities (BS5 ms-/me-/ps-/pe-) → physical (LTR) ---- */
.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}
.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}
.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}
.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}

/* ---- Text / float logical → physical ---- */
.text-start{text-align:left!important}.text-end{text-align:right!important}
.float-start{float:left!important}.float-end{float:right!important}

/* ---- flex/grid gap (BS5) — BS4 has no gap utilities ---- */
.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}
.row-gap-0{row-gap:0!important}.row-gap-1{row-gap:.25rem!important}.row-gap-2{row-gap:.5rem!important}.row-gap-3{row-gap:1rem!important}.row-gap-4{row-gap:1.5rem!important}.row-gap-5{row-gap:3rem!important}
.column-gap-0{column-gap:0!important}.column-gap-1{column-gap:.25rem!important}.column-gap-2{column-gap:.5rem!important}.column-gap-3{column-gap:1rem!important}.column-gap-4{column-gap:1.5rem!important}.column-gap-5{column-gap:3rem!important}

/* ---- Grid gutters (BS5 g-/gx-/gy- on .row) — BS4 has none.
        Replicates BS5: negative row margins + per-child padding/margin-top. ---- */
.row.g-0,.row.gx-0{margin-right:0;margin-left:0}
.row.g-0>*,.row.gx-0>*{padding-right:0;padding-left:0}
.row.g-1,.row.gx-1{margin-right:-.125rem;margin-left:-.125rem}
.row.g-1>*,.row.gx-1>*{padding-right:.125rem;padding-left:.125rem}
.row.g-2,.row.gx-2{margin-right:-.25rem;margin-left:-.25rem}
.row.g-2>*,.row.gx-2>*{padding-right:.25rem;padding-left:.25rem}
.row.g-3,.row.gx-3{margin-right:-.5rem;margin-left:-.5rem}
.row.g-3>*,.row.gx-3>*{padding-right:.5rem;padding-left:.5rem}
.row.g-4,.row.gx-4{margin-right:-.75rem;margin-left:-.75rem}
.row.g-4>*,.row.gx-4>*{padding-right:.75rem;padding-left:.75rem}
.row.g-5,.row.gx-5{margin-right:-1.5rem;margin-left:-1.5rem}
.row.g-5>*,.row.gx-5>*{padding-right:1.5rem;padding-left:1.5rem}
.row.g-0,.row.gy-0{margin-top:0}.row.g-0>*,.row.gy-0>*{margin-top:0}
.row.g-1,.row.gy-1{margin-top:-.25rem}.row.g-1>*,.row.gy-1>*{margin-top:.25rem}
.row.g-2,.row.gy-2{margin-top:-.5rem}.row.g-2>*,.row.gy-2>*{margin-top:.5rem}
.row.g-3,.row.gy-3{margin-top:-1rem}.row.g-3>*,.row.gy-3>*{margin-top:1rem}
.row.g-4,.row.gy-4{margin-top:-1.5rem}.row.g-4>*,.row.gy-4>*{margin-top:1.5rem}
.row.g-5,.row.gy-5{margin-top:-3rem}.row.g-5>*,.row.gy-5>*{margin-top:3rem}

/* ---- .form-select (BS5) — BS4 styles selects as .custom-select ---- */
.form-select{display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid #ced4da;border-radius:.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}
.form-select:disabled{background-color:#e9ecef}
.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:.25rem}
.form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem;border-radius:.5rem}

/* ---- .btn-close (BS5) — BS4 uses .close with a × glyph ---- */
.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em;color:#000;background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.375rem;opacity:.5}
.btn-close:hover{color:#000;opacity:.75}
.btn-close:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);opacity:1}
.btn-close:disabled{pointer-events:none;opacity:.25}

/* ---- Dropdown end-alignment (BS5 .dropdown-menu-end) — BS4 uses -right ---- */
.dropdown-menu-end{right:0;left:auto}

/* ---- Tooltip (BS5 markup: .tooltip > .tooltip-arrow + .tooltip-inner).
        BS4 names the arrow .arrow; our JS emits .tooltip-arrow, so supply the
        geometry here. .tooltip-inner colors live in playbook365.css. ---- */
.tooltip{position:absolute;z-index:1090;display:block;margin:0;font-size:.75rem;line-height:1.5;text-align:left;opacity:0}
.tooltip.show{opacity:1}
.tooltip .tooltip-arrow{position:absolute;display:block;width:.8rem;height:.4rem}
.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}
.bs-tooltip-top{padding:.4rem 0}
.bs-tooltip-top .tooltip-arrow{bottom:0}
.bs-tooltip-top .tooltip-arrow::before{top:-1px;border-width:.4rem .4rem 0;border-top-color:#000}
.bs-tooltip-bottom{padding:.4rem 0}
.bs-tooltip-bottom .tooltip-arrow{top:0}
.bs-tooltip-bottom .tooltip-arrow::before{bottom:-1px;border-width:0 .4rem .4rem;border-bottom-color:#000}
.bs-tooltip-start{padding:0 .4rem}
.bs-tooltip-start .tooltip-arrow{right:0;width:.4rem;height:.8rem}
.bs-tooltip-start .tooltip-arrow::before{left:-1px;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}
.bs-tooltip-end{padding:0 .4rem}
.bs-tooltip-end .tooltip-arrow{left:0;width:.4rem;height:.8rem}
.bs-tooltip-end .tooltip-arrow::before{right:-1px;border-width:.4rem .4rem .4rem 0;border-right-color:#000}

/* ---- Offcanvas (BS5) — BS4 has no offcanvas. Right-side drawer + backdrop. ---- */
.offcanvas{position:fixed;bottom:0;z-index:1045;display:flex;flex-direction:column;max-width:100%;visibility:hidden;background:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}
.offcanvas.offcanvas-end{top:0;right:0;width:400px;border-left:1px solid rgba(0,0,0,.1);transform:translateX(100%)}
.offcanvas.offcanvas-start{top:0;left:0;width:400px;border-right:1px solid rgba(0,0,0,.1);transform:translateX(-100%)}
.offcanvas.show{visibility:visible;transform:none}
.offcanvas-header{display:flex;align-items:center;justify-content:space-between;padding:1rem}
.offcanvas-title{margin-bottom:0;line-height:1.5}
.offcanvas-body{flex-grow:1;padding:1rem;overflow-y:auto}
.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background:#000}
.offcanvas-backdrop.fade{opacity:0;transition:opacity .15s linear}
.offcanvas-backdrop.show{opacity:.5}