/* ─────────────────────────────────────────────────────────────
   egON — bs5-compat.css   (Bootstrap 3 → 5 migration bridge)

   Bootstrap 5 dropped a set of Bootstrap 3 classes outright
   (.hidden-*/.visible-*, .panel*, .well, .caret, .btn-block …) and
   restructured others (.checkbox/.radio wrappers). Rewriting all
   ~9,000 occurrences across 183 Handlebars templates by hand is the
   single biggest source of breakage risk in this migration, so this
   file reproduces the dropped CSS faithfully — the existing markup
   renders correctly on BS5 with no template edits.

   It is a TEMPORARY BRIDGE, deliberately scoped and self-contained so
   individual screens can be modernised to native BS5 over time and the
   matching block deleted here (Phase E whittles this down). Loaded
   (gated) after components-bs5.css; uses the design tokens so bridged
   components match the redesign look, not raw 2014 Bootstrap grey.

   NOT bridged (migrated to native BS5 by scripted rename instead):
   .label label-* → .badge text-bg-*, .input-group-addon →
   .input-group-text, .control-label → .form-label.
   ───────────────────────────────────────────────────────────── */

/* ═══ Responsive utilities — verbatim from Bootstrap 3.2 ═══
   BS3 breakpoints (xs<768 · sm 768–991 · md 992–1199 · lg ≥1200)
   are reproduced exactly so behaviour is identical regardless of
   BS5's different grid tiers. ~5,500 occurrences depend on these. */
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; }

@media (max-width: 767px) {
  .visible-xs { display: block !important; }
  table.visible-xs { display: table !important; }
  tr.visible-xs { display: table-row !important; }
  th.visible-xs, td.visible-xs { display: table-cell !important; }
  .visible-xs-block { display: block !important; }
  .visible-xs-inline { display: inline !important; }
  .visible-xs-inline-block { display: inline-block !important; }
  .hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm { display: block !important; }
  table.visible-sm { display: table !important; }
  tr.visible-sm { display: table-row !important; }
  th.visible-sm, td.visible-sm { display: table-cell !important; }
  .visible-sm-block { display: block !important; }
  .visible-sm-inline { display: inline !important; }
  .visible-sm-inline-block { display: inline-block !important; }
  .hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md { display: block !important; }
  table.visible-md { display: table !important; }
  tr.visible-md { display: table-row !important; }
  th.visible-md, td.visible-md { display: table-cell !important; }
  .visible-md-block { display: block !important; }
  .visible-md-inline { display: inline !important; }
  .visible-md-inline-block { display: inline-block !important; }
  .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
  .visible-lg { display: block !important; }
  table.visible-lg { display: table !important; }
  tr.visible-lg { display: table-row !important; }
  th.visible-lg, td.visible-lg { display: table-cell !important; }
  .visible-lg-block { display: block !important; }
  .visible-lg-inline { display: inline !important; }
  .visible-lg-inline-block { display: inline-block !important; }
  .hidden-lg { display: none !important; }
}

/* bare .hidden — BS5 dropped it (it uses .d-none). App markup uses it as
   a default-hidden state AND toggles it at runtime via jQuery
   addClass/removeClass('hidden') (rate calculators, smart/electric, etc.).
   Without this, hidden labels/rows render VISIBLE and the toggle is inert. */
.hidden { display: none !important; visibility: hidden !important; }

/* .embed-responsive* — BS5 replaced these with .ratio/.ratio-4x3. Reproduce
   the BS3 aspect-ratio container (used by the document/PDF previews). */
.embed-responsive { position: relative; display: block; width: 100%; overflow: hidden; }
.embed-responsive > .embed-responsive-item,
.embed-responsive > iframe, .embed-responsive > embed,
.embed-responsive > object, .embed-responsive > video {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.embed-responsive-4by3 { padding-bottom: 75%; }
.embed-responsive-16by9 { padding-bottom: 56.25%; }
/* bare .embed-responsive (no aspect modifier, e.g. the PDF preview whose
   child uses height:100%) needs a real height or it collapses to 0. */
.embed-responsive:not(.embed-responsive-4by3):not(.embed-responsive-16by9) { min-height: 70vh; }

/* .list-inline — BS5 only strips bullets/padding; each <li> must also carry
   .list-inline-item to sit inline. App markup (incl. Handlebars loops) omits
   it, so reproduce the inline rendering on the children directly. */
.list-inline > li { display: inline-block; }
.list-inline > li:not(:last-child) { margin-right: 5px; }

/* .sr-only — BS5 renamed it .visually-hidden. App JS emits ~200 .sr-only
   spans dynamically; reproduce the hide so they don't become visible. */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ═══ Form primitives BS5 renamed/restructured ═══ */
/* .form-group — BS5 uses .mb-3; reproduce the vertical spacing */
.form-group { margin-bottom: 1rem; }

/* .checkbox / .radio — BS3 wraps the input inside the label; BS5 uses
   .form-check with sibling input+label. Reproduce the BS3 wrapper so
   the existing "<div class=checkbox><label><input>…</label></div>"
   markup keeps its layout. */
.radio, .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; }
.radio label, .checkbox label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer; }
.radio input[type="radio"], .checkbox input[type="checkbox"] { position: absolute; margin-left: -20px; margin-top: 4px; }
.radio + .radio, .checkbox + .checkbox { margin-top: -5px; }
.radio-inline, .checkbox-inline { position: relative; display: inline-block; padding-left: 20px; margin-bottom: 0; vertical-align: middle; font-weight: 400; cursor: pointer; }
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-top: 0; margin-left: 10px; }

/* .control-label fallback (renamed to .form-label; kept as insurance) */
.control-label { margin-bottom: .5rem; font-weight: 500; }

/* horizontal form — BS3 turned .form-group into a row; BS5 wants an
   explicit .row. Reproduce for the ~9 .form-horizontal screens. */
.form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem)); margin-left: calc(-.5 * var(--bs-gutter-x, 1.5rem)); }
@media (min-width: 768px) {
  .form-horizontal .control-label, .form-horizontal .form-label { text-align: right; margin-bottom: 0; padding-top: calc(.375rem + 1px); }
}

/* .input-group-btn — BS3 wrapper; BS5 puts the button directly in the
   flex input-group. One occurrence; keep it laid out. */
.input-group-btn { display: flex; }
.input-group-btn > .btn { border-radius: 0; }

/* ═══ Buttons / carets BS5 removed ═══ */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 5px; }
input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; }

/* data-toggle="button"/"buttons" — BS5 removed JS button toggling.
   The <input> inside <label class="btn"> still toggles natively and
   egon's data-target="action:*" routing still fires; only the BS3
   visual pressed-state is gone. Hide the input (as BS3 did) and light
   the label from its :checked state (evergreen :has()) or an .active
   class (egon-/BS3-managed). */
.btn[data-toggle="button"] > input[type="checkbox"],
.btn[data-toggle="button"] > input[type="radio"],
[data-toggle="buttons"] .btn > input[type="checkbox"],
[data-toggle="buttons"] .btn > input[type="radio"] {
  position: absolute; clip: rect(0,0,0,0); pointer-events: none;
}
.btn[data-toggle="button"].active,
[data-toggle="buttons"] .btn.active,
.btn[data-toggle="button"]:has(> input:checked),
[data-toggle="buttons"] .btn:has(> input:checked) {
  color: var(--bs-btn-active-color, var(--fg-on-color));
  background-color: var(--bs-btn-active-bg, var(--bg-interactive-pressed));
  border-color: var(--bs-btn-active-border-color, var(--bg-interactive-pressed));
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

/* .caret — BS5 auto-renders a ::after caret on .dropdown-toggle; we
   keep the explicit BS3 .caret span (used app-wide + in chrome) and
   suppress the auto one so there is never a double caret. */
.dropdown-toggle::after { display: none; }
.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent; }

/* ═══ .panel* — BS5 dropped panels for .card. Reproduce as a card,
   including the .panel-collapse accordion (its collapse JS already
   migrated to data-bs-toggle by the codemod). ═══ */
.panel { position: relative; margin-bottom: 1rem; background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); }
.panel-body { padding: 1rem; }
.panel-heading { padding: .75rem 1rem; border-bottom: 1px solid var(--border-base); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.panel-heading > .panel-title,
.panel-title { margin: 0; font: var(--fw-medium) var(--txt-large)/var(--lh-large) var(--font-sans); color: var(--fg-base); }
.panel-title > a { color: inherit; text-decoration: none; }
.panel-footer { padding: .75rem 1rem; background: var(--bg-subtle); border-top: 1px solid var(--border-base); border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.panel-primary > .panel-heading { background: var(--bg-interactive); color: var(--fg-on-color); border-color: var(--bg-interactive); }
.panel-primary > .panel-heading .panel-title { color: var(--fg-on-color); }
.panel-group { margin-bottom: 1rem; }
.panel-group .panel + .panel { margin-top: 5px; }

/* ═══ Pagination — bootstrap-paginator (kept jQuery widget) emits BS3
   markup (.pagination > li > a). BS5 styles .page-item/.page-link,
   which the plugin doesn't add, so re-point the child selectors. ═══ */
.pagination { display: flex; padding-left: 0; list-style: none; gap: 0; }
.pagination > li { display: block; }
.pagination > li > a, .pagination > li > span {
  position: relative; display: block; padding: .375rem .75rem; margin-left: -1px;
  color: var(--fg-interactive); background: var(--bg-base);
  border: 1px solid var(--border-base); text-decoration: none;
}
.pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.pagination > li:last-child > a, .pagination > li:last-child > span { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.pagination > li > a:hover, .pagination > li > span:hover { background: var(--bg-subtle-hover); border-color: var(--border-base); }
.pagination > li.active > a, .pagination > li.active > span,
.pagination > li.active > a:hover { z-index: 1; color: var(--fg-on-color); background: var(--bg-interactive); border-color: var(--bg-interactive); }
.pagination > li.disabled > a, .pagination > li.disabled > span { color: var(--fg-disabled); pointer-events: none; background: var(--bg-base); }

/* ═══ Reseller public-page navbar — BS5 navbars ship no background and
   the nav links come from Fluid variables without .nav-link. Brand it
   and style the bare <li><a>. Scoped to .egon-reseller-nav only. ═══ */
.navbar.egon-reseller-nav { background: var(--brand-2); border-radius: var(--radius-md); }
.navbar.egon-reseller-nav .navbar-brand { color: var(--nav-fg-active); font-weight: var(--fw-medium); }
.navbar.egon-reseller-nav .navbar-nav > li > a,
.navbar.egon-reseller-nav .navbar-nav .nav-link {
  display: block; padding: .5rem 1rem; color: var(--nav-fg); text-decoration: none;
}
.navbar.egon-reseller-nav .navbar-nav > li > a:hover,
.navbar.egon-reseller-nav .navbar-nav .nav-link:hover { color: var(--nav-fg-active); }

/* ═══ .well / .thumbnail — BS5 dropped both ═══ */
.well { min-height: 20px; padding: 1rem; margin-bottom: 1rem; background: var(--bg-subtle); border: 1px solid var(--border-base); border-radius: var(--radius-md); }
.thumbnail { display: block; padding: 4px; margin-bottom: 1rem; background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-md); }
.thumbnail > img, .thumbnail a > img { display: block; max-width: 100%; height: auto; margin: 0 auto; }