/* ============================================================
 * Scan to Pay — Bootstrap 5 Theme Layer
 *
 * Maps the brand --stp-* tokens (scan-to-pay.css) onto Bootstrap 5's
 * --bs-* variables, then applies brand-specific component overrides.
 *
 * Load order (in template.tag):
 *   1. bootstrap5.min.css      (framework defaults)
 *   2. scan-to-pay.css         (--stp-* tokens + type)
 *   3. scan-to-pay-theme.css   (THIS FILE — token bridge + components)
 *   4. scan-to-pay-compat.css  (BS2 grid/form shim, transitional)
 * ============================================================ */

/* ---------- Token bridge: Bootstrap 5 reads brand tokens ---------- */
:root {
  --bs-primary:        var(--stp-orange);
  --bs-primary-rgb:    255, 76, 0;
  --bs-secondary:      var(--stp-fg-2);
  --bs-success:        var(--stp-success);
  --bs-warning:        var(--stp-warning);
  --bs-danger:         var(--stp-danger);
  --bs-info:           var(--stp-info);

  --bs-body-bg:        var(--stp-bg-sunken);
  --bs-body-color:     var(--stp-fg-1);
  --bs-body-font-family: var(--stp-font-sans);
  --bs-body-font-weight: var(--stp-w-light);   /* brand: light body */
  --bs-body-font-size: var(--stp-fs-body);
  --bs-body-line-height: var(--stp-lh-body);

  --bs-emphasis-color: var(--stp-ink);
  --bs-secondary-color: var(--stp-fg-2);
  --bs-tertiary-color: var(--stp-fg-3);

  --bs-border-color:   var(--stp-line-2);
  --bs-border-radius:        var(--stp-r-md);
  --bs-border-radius-sm:     var(--stp-r-sm);
  --bs-border-radius-lg:     var(--stp-r-lg);
  --bs-border-radius-pill:   var(--stp-r-pill);

  --bs-box-shadow-sm:  var(--stp-shadow-1);
  --bs-box-shadow:     var(--stp-shadow-2);
  --bs-box-shadow-lg:  var(--stp-shadow-3);

  --bs-link-color:           var(--stp-blue);
  --bs-link-color-rgb:       75, 9, 255;
  --bs-link-hover-color:     var(--stp-orange);
  --bs-link-hover-color-rgb: 255, 76, 0;

  --bs-font-sans-serif: var(--stp-font-sans);
  --bs-emphasis-color-rgb: 14, 14, 16;
}

/* ---------- Base ---------- */
body {
  background: var(--stp-bg-sunken);
  color: var(--stp-fg-1);
  font-family: var(--stp-font-sans);
  font-weight: var(--stp-w-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-weight: var(--stp-w-bold);
  color: var(--stp-ink);
  letter-spacing: var(--stp-tracking-tight);
}
a { color: var(--stp-blue); text-decoration: none; }
a:hover { color: var(--stp-orange); }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-border-radius: var(--stp-r-pill);   /* retail-friendly pill CTAs */
  font-weight: var(--stp-w-semibold);
  padding: 0.5rem 1.25rem;
  transition: background-color var(--stp-dur-fast) var(--stp-ease-out),
              box-shadow var(--stp-dur-fast) var(--stp-ease-out),
              transform var(--stp-dur-fast) var(--stp-ease-out);
}
.btn-primary {
  --bs-btn-bg: var(--stp-orange);
  --bs-btn-border-color: var(--stp-orange);
  --bs-btn-hover-bg: #E64500;            /* ~6% darker */
  --bs-btn-hover-border-color: #E64500;
  --bs-btn-active-bg: #CC3D00;
  --bs-btn-active-border-color: #CC3D00;
  --bs-btn-disabled-bg: var(--stp-orange);
  --bs-btn-disabled-border-color: var(--stp-orange);
  color: #fff;
}
.btn-secondary {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--stp-line-2);
  --bs-btn-color: var(--stp-fg-1);
  --bs-btn-hover-bg: var(--stp-orange-light);
  --bs-btn-hover-border-color: var(--stp-line-2);
  --bs-btn-hover-color: var(--stp-ink);
}
.btn-danger  { --bs-btn-bg: var(--stp-danger); --bs-btn-border-color: var(--stp-danger); }
.btn-info    { --bs-btn-bg: var(--stp-info);   --bs-btn-border-color: var(--stp-info); }
.btn:active  { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.4; }
.btn-lg { padding: 0.7rem 1.6rem; }

/* BS2 legacy button sizes still present in markup */
.btn-large { padding: 0.7rem 1.6rem; font-size: 1.05rem; }
.btn-small { padding: 0.3rem 0.8rem; font-size: var(--stp-fs-small); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: var(--stp-r-sm);
  border: 1px solid var(--stp-line-2);
  min-height: 44px;                      /* touch-friendly */
  color: var(--stp-fg-1);
  /* Inputs must be white — the page background is warm off-white, so
     without this they blend into the page (--bs-body-bg is the sunken tone). */
  background-color: var(--stp-bg);
}
.form-control:focus, .form-select:focus { background-color: var(--stp-bg); }
.form-control:disabled, .form-control[readonly], .form-select:disabled {
  background-color: var(--stp-bg-sunken);
}
/* Legacy un-migrated inputs (compat shim) — keep them white too. */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"], textarea, select {
  background-color: var(--stp-bg);
}
.form-control::placeholder { color: var(--stp-fg-mute); }
.form-control:focus, .form-select:focus {
  border-color: var(--stp-orange);
  box-shadow: 0 0 0 4px rgba(255, 76, 0, 0.15);   /* soft orange ring */
}
.form-label { font-weight: var(--stp-w-medium); color: var(--stp-fg-2); }

/* jquery.validate / nod.js error styling → brand danger */
label.error, .error-message, #passwordForm label.error {
  color: var(--stp-danger);
  font-size: var(--stp-fs-small);
}
.form-control.error, input.error { border-color: var(--stp-danger); }
.expired { color: var(--stp-danger); }

/* ---------- Cards ---------- */
.card {
  --bs-card-border-color: rgba(20, 12, 8, 0.06);
  --bs-card-border-radius: var(--stp-r-md);
  background: var(--stp-bg-elev);
  box-shadow: var(--stp-shadow-1);
}

/* ---------- Tables (displaytag uses table table-striped table-hover) ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--stp-fg-1);
  --bs-table-border-color: var(--stp-line);
  --bs-table-striped-bg: var(--stp-bg-sunken);
  --bs-table-hover-bg: var(--stp-orange-light);
  vertical-align: middle;
}
.table > thead {
  --bs-table-color: var(--stp-fg-2);
  font-size: var(--stp-fs-small);
  font-weight: var(--stp-w-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table > thead th { border-bottom: 1px solid var(--stp-line-2); }

/* ---------- Modals ---------- */
.modal-content {
  border: none;
  border-radius: var(--stp-r-lg);
  box-shadow: var(--stp-shadow-3);
}
.modal-header { border-bottom: 1px solid var(--stp-line); }
.modal-footer { border-top: 1px solid var(--stp-line); }
.modal-title, .modal-header h3 {
  font-weight: var(--stp-w-bold);
  color: var(--stp-ink);
  font-size: var(--stp-fs-h4);
  margin: 0;
}

/* ---------- Badges / status ---------- */
.badge { font-weight: var(--stp-w-semibold); border-radius: var(--stp-r-pill); }

/* ---------- Dropdown menu (account menu) ---------- */
.dropdown-menu {
  --bs-dropdown-border-color: var(--stp-line);
  --bs-dropdown-border-radius: var(--stp-r-md);
  --bs-dropdown-link-active-bg: var(--stp-orange-light);
  --bs-dropdown-link-active-color: var(--stp-ink);
  box-shadow: var(--stp-shadow-2);
}
.dropdown-item:hover { background: var(--stp-orange-light); color: var(--stp-ink); }

/* ---------- Focus-visible (keyboard nav) ---------- */
:focus-visible {
  outline: 2px solid var(--stp-orange);
  outline-offset: 2px;
}

/* ---------- Lucide icon sizing ---------- */
[data-lucide] { width: 1em; height: 1em; vertical-align: -0.125em; stroke-width: 2; }
.btn [data-lucide] { width: 16px; height: 16px; margin-right: 0.4em; }

/* ============================================================
 *  Shared page layout helpers (use across all migrated pages)
 * ============================================================ */
.stp-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--stp-s-4) var(--stp-s-2) var(--stp-s-12);
}
/* Full-bleed variant for wide data tables (e.g. transactions): use the whole screen width. */
.stp-page--wide { max-width: none; }
.stp-page-header { margin-bottom: var(--stp-s-6); }
.stp-page-title {
  font-size: var(--stp-fs-h2);
  font-weight: var(--stp-w-bold);
  letter-spacing: var(--stp-tracking-tight);
  color: var(--stp-ink);
  margin: 0 0 var(--stp-s-2);
}
.stp-page-sub { font-size: var(--stp-fs-body); color: var(--stp-fg-2); margin: 0; }

.stp-card {
  background: var(--stp-bg-elev);
  border: 1px solid rgba(20, 12, 8, 0.06);
  border-radius: var(--stp-r-md);
  box-shadow: var(--stp-shadow-1);
  padding: var(--stp-s-6);
  margin-bottom: var(--stp-s-6);
}
.stp-card__title {
  font-size: var(--stp-fs-h4);
  font-weight: var(--stp-w-bold);
  color: var(--stp-ink);
  margin: 0 0 var(--stp-s-5);
}
.stp-card .table { margin-bottom: 0; }

/* A toolbar row above tables (filters / "New" buttons) */
.stp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stp-s-3);
  align-items: flex-end;
  margin-bottom: var(--stp-s-5);
}
.stp-toolbar .spacer { flex: 1 1 auto; }

/* ============================================================
 *  Top navigation bar  (Scan to Pay branded)
 * ============================================================ */
.stp-navbar {
  background: #fff;
  border-bottom: 1px solid var(--stp-line);
  box-shadow: var(--stp-shadow-1);
  min-height: 48px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.stp-navbar .navbar-brand img { height: 30px; width: auto; }
.stp-navbar .nav-link {
  color: var(--stp-fg-2);
  font-weight: var(--stp-w-medium);
  border-radius: var(--stp-r-sm);
  padding: 0.4rem 0.8rem;
}
.stp-navbar .nav-link:hover { color: var(--stp-ink); background: var(--stp-orange-light); }
.stp-navbar .nav-item.active > .nav-link,
.stp-navbar .nav-link.active { color: var(--stp-orange); }
.stp-navbar .dropdown-toggle { display: inline-flex; align-items: center; gap: 0.4rem; }

footer { color: var(--stp-fg-3); }