/*
 * legacy-compat.css — the MINIMUM legacy shim still required.
 *
 * Bootstrap 5 removed these component classes outright (not renamed,
 * gone). ~150 view files were written against Bootstrap 3/4 and still use
 * them; rewriting every view's markup is a separate, larger effort tracked
 * module-by-module. This file re-implements just enough of each so nothing
 * renders unstyled in the meantime. Delete rules here as each view is
 * migrated to native Bootstrap 5 / components.css markup.
 */

/* ---------- .panel -> card ---------- */
.panel {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}
.panel-heading {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--surface-border);
  background: transparent;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.panel-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); }
.panel-body { padding: var(--space-5); }
.panel-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--surface-border);
  background: transparent;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.panel-default > .panel-heading { background: transparent; }

/* ---------- .well ---------- */
.well {
  background: var(--surface-body);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

/* ---------- .label -> badge ---------- */
.label {
  display: inline-block;
  padding: 0.3em 0.65em;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  color: var(--text-inverse);
  background: var(--gray-500);
}
.label-default, .label-default-custom { background: var(--gray-400); }
.label-primary, .label-primary-custom { background: var(--color-primary); }
.label-success, .label-success-custom { background: var(--color-success); }
.label-info, .label-info-custom { background: var(--color-info); }
.label-warning, .label-warning-custom { background: var(--color-warning); }
.label-danger, .label-danger-custom { background: var(--color-danger); }

/* ---------- Form label / addon (BS5 dropped the special styling) ---------- */
.control-label { font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-2); }
.form-group { margin-bottom: var(--space-4); }
.input-group-addon {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  background-color: var(--gray-100);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
}
.input-group > .input-group-addon:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.input-group > .input-group-addon:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }

/* ---------- Buttons BS5 no longer defines ---------- */
.btn-default {
  color: var(--text-primary);
  background-color: var(--surface-card);
  border: 1px solid var(--surface-border);
}
.btn-default:hover { background-color: var(--gray-100); color: var(--text-primary); }
.btn-xs { padding: 0.125rem 0.5rem; font-size: var(--fs-xs); border-radius: var(--radius-sm); }

/* ---------- .close (X) button, BS5 renamed to .btn-close ---------- */
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  opacity: 0.5;
  background: transparent;
  border: 0;
}
.close:hover { opacity: 0.85; }

/* .thumbnail (Bootstrap 3, removed in BS4/5) */
.thumbnail {
  display: block;
  padding: 4px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
}

/* ---------- Horizontal forms (.form-horizontal, removed in BS5) ----------
   The Frontend module (~28 views) and other legacy pages lay out each field as
   `.form-group > .col-md-3.control-label + .col-md-6`, but BS5 grid columns need
   a flex `.row` parent to sit side by side — and these never wrap the columns in
   a row. Without this, label and field stack at odd widths (looks broken). Turn
   each horizontal form-group back into a flex row. */
.form-horizontal .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: -12px;
  margin-right: -12px;
}
.form-horizontal .form-group > [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}
.form-horizontal .control-label { padding-top: calc(0.375rem + 1px); margin-bottom: 0; }
@media (min-width: 768px)   { .form-horizontal .control-label { text-align: right; } }
@media (max-width: 767.98px) { .form-horizontal .control-label { text-align: left; margin-bottom: var(--space-2); } }

/* Required-field asterisk */
.required { color: var(--color-danger); font-weight: 600; margin-left: 2px; }

/* .form-bordered — subtle separators between rows (BS3 look) */
.form-bordered .form-group:not(:last-child) {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--surface-border);
  margin-bottom: var(--space-4);
}

/* ---------- .tabs-custom (legacy Porto tabbed panel) ---------- */
.tabs-custom > .nav-tabs { padding: 0 var(--space-4); margin-bottom: 0; }
.tabs-custom > .tab-content { padding: var(--space-5); }

/* Primary action button inside these legacy tab panels — the save/submit button
   ships as a plain .btn-default (weak, white); make it read as the CTA it is. */
.tabs-custom .panel-footer button[name="save"],
.tabs-custom .panel-footer .btn-default[type="submit"] {
  color: var(--text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.tabs-custom .panel-footer button[name="save"]:hover,
.tabs-custom .panel-footer .btn-default[type="submit"]:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--text-inverse);
}

/* ---------- Bootstrap 3 grid offsets -> BS5 -------------------------------
   BS3 wrote the offset as `col-md-offset-10`; BS5 renamed it to `offset-md-10`
   and dropped the old name. 115 view files still use the old spelling, so every
   one of those offsets has been silently doing nothing — most visibly the
   `col-md-offset-10 col-md-2` Save buttons in panel footers, which are supposed
   to sit at the right-hand end of the row and were instead hard against the
   left edge.

   Re-implemented rather than renamed across 115 files: the shim is one place to
   delete when those views are migrated, whereas a bulk rename would have to be
   verified view by view. Only the offsets actually in use are defined; add a
   line here if a view starts using another.

   Breakpoints match Bootstrap 5 (sm 576, md 768, lg 992). Offsets are
   margin-left in twelfths, exactly as the grid computes them. */
@media (min-width: 576px) {
  .col-sm-offset-3  { margin-left: 25%; }
}
@media (min-width: 768px) {
  .col-md-offset-2  { margin-left: 16.66666667%; }
  .col-md-offset-3  { margin-left: 25%; }
  .col-md-offset-5  { margin-left: 41.66666667%; }
  .col-md-offset-6  { margin-left: 50%; }
  .col-md-offset-8  { margin-left: 66.66666667%; }
  .col-md-offset-9  { margin-left: 75%; }
  .col-md-offset-10 { margin-left: 83.33333333%; }
}