/* ==========================================================================
   compat.css — bridges the old Vuexy template markup to the new smm-* shell.
   Loaded AFTER theme.css + components.css. Hand-written for this project;
   the three files from the design kit stay untouched so they can be re-exported.
   ========================================================================== */

/* Page bodies still open .app-content > .content-wrapper > .content-body.
   The new .smm-main/.smm-wrap own the layout now, so strip Vuexy's offsets. */
.app-content,
.content-wrapper,
.content-body,
.content-overlay {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  position: static !important;
  background: none !important;
  overflow: visible !important;
}

/* Vuexy chrome that the new shell replaces outright. */
.header-navbar,
.header-navbar-shadow,
.main-menu,
.sidenav-overlay,
.drag-target,
.footer.footer-static {
  display: none !important;
}

/* html.loading hides the page until Vuexy's app.js clears it — we no longer
   load that file, so make sure nothing stays invisible. */
html.loading,
html.loading body {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Bootstrap rows carry -15px side margins that assumed Vuexy's container padding.
   Without it every row overflowed its box by 30px. Zero the margins; the columns
   keep their own 15px gutters. */
.smm-wrap .row {
  margin-left: 0;
  margin-right: 0;
}
.smm-wrap .row > [class*="col-"]:first-child { padding-left: 0; }
.smm-wrap .row > [class*="col-"]:last-child  { padding-right: 0; }

/* ---- Legacy Bootstrap buttons -------------------------------------------
   Page bodies still emit .btn/.btn-success/.btn-light etc. components.css only
   restyles .btn-primary, so give the rest the same shape and tokens. */
.smm-wrap .btn:not(.smm-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  border: var(--border-w) solid transparent;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-med);
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.smm-wrap .btn:not(.smm-btn).btn-sm { min-height: var(--tap-min); padding: 0 var(--s-4); font-size: var(--fs-sm); }
.smm-wrap .btn-secondary,
.smm-wrap .btn-light,
.smm-wrap .btn-outline-primary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}
.smm-wrap .btn-secondary:hover,
.smm-wrap .btn-light:hover,
.smm-wrap .btn-outline-primary:hover { background: var(--surface-3); }
.smm-wrap .btn-success { background: var(--done-ink); color: #fff; border-color: transparent; }
.smm-wrap .btn-danger  { background: var(--canc-ink); color: #fff; border-color: transparent; }
.smm-wrap .btn-dark    { background: var(--ink); color: var(--ink-inverse); border-color: transparent; }
.smm-wrap .btn-success:hover,
.smm-wrap .btn-danger:hover,
.smm-wrap .btn-dark:hover { filter: brightness(1.08); }
.smm-wrap .btn-icon { padding: 0; width: var(--tap); }

/* ---- Legacy form chrome -------------------------------------------------- */
.smm-wrap fieldset.form-group,
.smm-wrap .form-group { margin-bottom: var(--s-5); }
.smm-wrap fieldset.form-group > label,
.smm-wrap .form-group > label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-med);
  color: var(--ink);
}
.smm-wrap .input-group-text {
  background: var(--surface-2);
  border: var(--border-w) solid var(--border);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  border-radius: var(--r-md) 0 0 var(--r-md);
  padding: 0 var(--s-4);
}
.smm-wrap .invalid-feedback {
  color: var(--canc-ink);
  font-size: var(--fs-sm);
  margin-top: var(--s-2);
}

/* ---- Alerts (login/deposit/ticket errors) -------------------------------- */
.smm-wrap .alert {
  border-radius: var(--r-md);
  border: var(--border-w) solid var(--border);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-base);
}
.smm-wrap .alert-danger  { background: var(--canc-bg); color: var(--canc-ink); border-color: var(--canc-bd); }
.smm-wrap .alert-success { background: var(--done-bg); color: var(--done-ink); border-color: var(--done-bd); }
.smm-wrap .alert-info    { background: var(--prog-bg); color: var(--prog-ink); border-color: var(--prog-bd); }

/* ---- Bootstrap modals still used by orders.php / order.php --------------- */
.modal-content {
  background: var(--surface);
  color: var(--ink);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg);
}
.modal-header,
.modal-footer { border-color: var(--border); }
.modal-title { font-size: var(--fs-lg); }

/* Old markup leans on .card everywhere; components.css already restyles it,
   this just gives it the same outer rhythm as .smm-card. */
.smm-wrap .card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--s-5);
}
.smm-wrap .card-header {
  border-bottom: var(--border-w) solid var(--border);
  background: none;
}
.smm-wrap .card h4,
.smm-wrap .card h5 {
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-2);
}

/* Legacy inline-coloured status spans (getOrderStatus/getTicketStatus in
   core.php emit style="color:red|orange|limegreen|purple|black"). Those hexes
   fail contrast on both themes, so neutralise them and let the pill classes
   in components.css carry the meaning where markup has been converted. */
.smm-wrap span[style*="color:red"],
.smm-wrap span[style*="color:orange"],
.smm-wrap span[style*="color:limegreen"],
.smm-wrap span[style*="color:purple"],
.smm-wrap span[style*="color:black"] {
  color: var(--ink) !important;
  font-weight: var(--fw-med);
}

/* Tables in unconverted pages. */
.smm-wrap table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ink);
}
.smm-wrap table th,
.smm-wrap table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border-w) solid var(--border);
  text-align: left;
}
.smm-wrap table th {
  font-weight: var(--fw-med);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

/* Page footer (not part of the design kit). */
.smm-footer {
  padding: var(--s-5) var(--s-5) var(--s-6);
  color: var(--ink-subtle);
  font-size: var(--fs-sm);
}
.smm-footer p { margin: 0; }

/* Wide legacy tables must scroll inside their card, never the page. */
.smm-wrap .table-responsive,
.smm-wrap .card-body > table {
  display: block;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}