/* ============================================================================
   bs5-compat.css  —  Bootstrap 3 → Bootstrap 5 compatibility shim
   ----------------------------------------------------------------------------
   Loaded ONLY by pages running on Bootstrap 5 (via php/render/head.php). It
   re-implements the handful of BS3 classes that BS5 removed/renamed, so a page
   can be switched to BS5 without rewriting every legacy markup idiom at once.
   This is what makes the migration INCREMENTAL: convert pages one at a time;
   anything still using BS3 class names keeps rendering acceptably until touched.
   Scope is global (BS5 pages only) — legacy BS3 pages never load this file.
   ============================================================================ */

/* ── Panels → cards ──────────────────────────────────────────────────────── */
.panel{position:relative;margin-bottom:1rem;background:#fff;border:1px solid var(--bs-border-color,#dee2e6);border-radius:.5rem;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.panel-heading{padding:.6rem .9rem;border-bottom:1px solid var(--bs-border-color,#dee2e6);border-top-left-radius:.5rem;border-top-right-radius:.5rem;background:#f8f9fa;font-weight:600;}
.panel-title{margin:0;font-size:1rem;}
.panel-body{padding:.9rem;}
.panel-footer{padding:.6rem .9rem;border-top:1px solid var(--bs-border-color,#dee2e6);background:#f8f9fa;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;}
.panel-default>.panel-heading{background:#f8f9fa;color:inherit;}
.panel-primary{border-color:#0d6efd;}
.panel-primary>.panel-heading{background:#0d6efd;color:#fff;border-color:#0d6efd;}
.panel-success>.panel-heading{background:#198754;color:#fff;}
.panel-info>.panel-heading{background:#0dcaf0;color:#000;}
.panel-warning>.panel-heading{background:#ffc107;color:#000;}
.panel-danger>.panel-heading{background:#dc3545;color:#fff;}

/* ── Buttons: BS3 names BS5 dropped ──────────────────────────────────────── */
.btn-default{--bs-btn-color:#212529;--bs-btn-bg:#fff;--bs-btn-border-color:#ced4da;--bs-btn-hover-bg:#f8f9fa;--bs-btn-hover-border-color:#adb5bd;--bs-btn-hover-color:#212529;--bs-btn-active-bg:#e9ecef;--bs-btn-active-border-color:#adb5bd;}
.btn-xs{--bs-btn-padding-y:.1rem;--bs-btn-padding-x:.4rem;--bs-btn-font-size:.75rem;}

/* ── Labels → badges (BS3 .label) ────────────────────────────────────────── */
.label{display:inline-block;padding:.25em .5em;font-size:.75em;font-weight:600;line-height:1;color:#fff;text-align:center;white-space:nowrap;border-radius:.375rem;}
.label-default{background:#6c757d;}.label-primary{background:#0d6efd;}.label-success{background:#198754;}
.label-info{background:#0dcaf0;color:#000;}.label-warning{background:#ffc107;color:#000;}.label-danger{background:#dc3545;}

/* ── Float helpers (BS5 = float-start/float-end) ─────────────────────────── */
.pull-left{float:left!important;}
.pull-right{float:right!important;}

/* ── Text alignment (BS5 = text-start/text-end) ──────────────────────────── */
.text-right{text-align:right!important;}
.text-left{text-align:left!important;}

/* ── col-xs-* (BS5 dropped the xs infix; plain .col-N is the equivalent) ─── */
.col-xs-1{flex:0 0 8.3333%;max-width:8.3333%;}.col-xs-2{flex:0 0 16.6667%;max-width:16.6667%;}
.col-xs-3{flex:0 0 25%;max-width:25%;}.col-xs-4{flex:0 0 33.3333%;max-width:33.3333%;}
.col-xs-5{flex:0 0 41.6667%;max-width:41.6667%;}.col-xs-6{flex:0 0 50%;max-width:50%;}
.col-xs-7{flex:0 0 58.3333%;max-width:58.3333%;}.col-xs-8{flex:0 0 66.6667%;max-width:66.6667%;}
.col-xs-9{flex:0 0 75%;max-width:75%;}.col-xs-10{flex:0 0 83.3333%;max-width:83.3333%;}
.col-xs-11{flex:0 0 91.6667%;max-width:91.6667%;}.col-xs-12{flex:0 0 100%;max-width:100%;}
[class*="col-xs-"]{position:relative;width:100%;padding-right:.75rem;padding-left:.75rem;float:left;}

/* ── Responsive visibility (BS5 = d-none / d-{bp}-block utilities) ─────────── */
.hidden-xs{display:initial;}
@media (max-width:575.98px){.hidden-xs{display:none!important;}}
.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{display:none!important;}
@media (max-width:575.98px){
  .visible-xs-block{display:block!important;}
  .visible-xs-inline{display:inline!important;}
  .visible-xs-inline-block{display:inline-block!important;}
}

/* ── Forms / inputs ──────────────────────────────────────────────────────── */
.input-sm{min-height:calc(1.5em + .5rem + 2px);padding:.25rem .5rem;font-size:.875rem;border-radius:.25rem;}
.input-lg{min-height:calc(1.5em + 1rem + 2px);padding:.5rem 1rem;font-size:1.25rem;border-radius:.5rem;}
.control-label{font-weight:600;margin-bottom:.25rem;}
.help-block{display:block;margin-top:.25rem;font-size:.875em;color:#6c757d;}
.input-group-addon{display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;background:#e9ecef;border:1px solid #ced4da;border-radius:.375rem;}
/* BS3 wrapped appended buttons in a <span class="input-group-btn">; BS5 puts the
   button directly in .input-group. Make the wrapper a flex cell so its button sits
   inline with the field instead of dropping below / outside it. */
.input-group > .input-group-btn{display:flex;}
.input-group > .input-group-btn > .btn{height:100%;}
.input-group > .input-group-btn:not(:first-child) > .btn{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px;}
.input-group > .input-group-btn:not(:last-child) > .btn{border-top-right-radius:0;border-bottom-right-radius:0;}

/* ── BS3 nav-tabs / nav-pills: link styling lived on .nav>li>a; BS5 styles .nav-link
   instead, so BS3 tab markup renders as bare <a> links. Re-style the BS3 markup. ── */
.nav-tabs,.nav-pills{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none;}
.nav-tabs{border-bottom:1px solid #dee2e6;}
.nav-tabs > li,.nav-pills > li{margin-bottom:-1px;}
.nav-tabs > li > a,.nav-pills > li > a{display:block;padding:.5rem 1rem;color:var(--vss-accent,#2f6fed);text-decoration:none;border:1px solid transparent;}
.nav-tabs > li > a{border-top-left-radius:.375rem;border-top-right-radius:.375rem;}
.nav-tabs > li > a:hover{border-color:#e9ecef #e9ecef #dee2e6;background:#f8f9fa;}
.nav-tabs > li.active > a,.nav-tabs > li > a.active{color:#495057;background:#fff;border-color:#dee2e6 #dee2e6 #fff;}
.nav-pills > li > a{border-radius:.375rem;margin-right:.25rem;}
.nav-pills > li.active > a,.nav-pills > li > a.active{color:#fff;background:var(--vss-accent,#2f6fed);}

/* BS3 horizontal forms: .form-group used to behave like a grid .row so its
   .col-sm-* children (incl. a trailing pull-right button) laid out side by side.
   BS5 made .form-group a no-op, so the columns collapse and floated buttons spill
   outside their container. Restore the row behaviour for horizontal forms. */
.form-horizontal .form-group{display:flex;flex-wrap:wrap;align-items:center;}
.form-horizontal .form-group > [class*="col-"]{padding-right:.5rem;padding-left:.5rem;}
/* A column (and its button) flagged pull-right — the BS3 idiom — should align to
   the right WITHOUT floating out of the flex row (floats also collapse the cell). */
.form-horizontal .form-group .pull-right{float:none!important;}
.form-horizontal .form-group > .pull-right{margin-left:auto;text-align:right;}

/* ── Misc BS3 leftovers ──────────────────────────────────────────────────── */
.well{padding:1rem;margin-bottom:1rem;background:#f8f9fa;border:1px solid #e9ecef;border-radius:.5rem;}
.img-responsive{display:block;max-width:100%;height:auto;}
.table-condensed>:not(caption)>*>*{padding:.25rem;}
.checkbox,.radio{margin-bottom:.5rem;}
.checkbox label,.radio label{padding-left:1.5rem;}

/* BS3 contextual table/row classes (BS5 still has table-* but bg-* differ) */
.text-muted{color:#6c757d!important;}

/* ── Modals: BS3 markup keeps working (JS bridged by bs3-js-compat.js) ────── */
/* BS3 close button (×) — BS5 replaced it with .btn-close (an SVG). BS3 markup puts
   the close button BEFORE the title and floated it right; BS5's flex header keeps
   DOM order, so order:1 + margin-left:auto sends the × back to the right. */
.modal-header .close,
button.close{padding:0;margin:0 0 0 auto;background:transparent;border:0;font-size:1.6rem;font-weight:700;line-height:1;color:#000;opacity:.45;cursor:pointer;}
.modal-header .close{order:1;}
button.close:hover{opacity:.75;}
.modal-header{align-items:flex-start;}

/* ── A .panel placed directly in a .row (no .col wrapper — a common BS3 shortcut).
   Under BS5 the panel became a shrink-to-content flex item, leaving white space
   beside it; make it fill the row like a full-width column. ─────────────────── */
.row > .panel{flex:0 0 100%;max-width:100%;}

/* ── BS3 contextual TABLE ROW classes (.danger/.success/.warning/.info/.active).
   BS5 renamed them to .table-* and colours rows via --bs-table-bg, so bare BS3
   row classes lost their highlight (e.g. bad-signal ONU rows). Re-map them. ── */
.table > :not(caption) > * > tr.success{--bs-table-bg:#d1e7dd;}
.table > :not(caption) > * > tr.danger {--bs-table-bg:#f8d7da;}
.table > :not(caption) > * > tr.warning{--bs-table-bg:#fff3cd;}
.table > :not(caption) > * > tr.info   {--bs-table-bg:#cff4fc;}
.table > :not(caption) > * > tr.active {--bs-table-bg:#ececec;}
/* tables that aren't .table (plain) still honour the row colour */
tr.danger > td{background-color:#f8d7da;} tr.success > td{background-color:#d1e7dd;}
tr.warning > td{background-color:#fff3cd;} tr.info > td{background-color:#cff4fc;}