/* ============================================================
 * Scan to Pay — Bootstrap 2 -> 5 Compatibility Shim  (TRANSITIONAL)
 *
 * Re-implements the Bootstrap 2.3.1 grid/form/utility classes that page
 * bodies still use (row-fluid, spanN, control-group, controls, control-label,
 * hidden, pull-*) on top of Bootstrap 5, so legacy JSP markup keeps its EXACT
 * layout while pages are migrated to native BS5 one wave at a time.
 *
 * REMOVE this file (and the BS2 css/js) once every page in
 * docs/reskin/MIGRATION.md has been migrated to native Bootstrap 5 markup.
 * Percentages below are copied verbatim from Bootstrap v2.3.1 .row-fluid.
 * ============================================================ */

/* ---------- Fluid grid (row-fluid + spanN) ---------- */
.row-fluid { width: 100%; }
.row-fluid::before, .row-fluid::after { display: table; content: ""; line-height: 0; }
.row-fluid::after { clear: both; }

.row-fluid [class*="span"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.127659574468085%;
  box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child { margin-left: 0; }

.row-fluid .span12 { width: 99.99999999999999%; }
.row-fluid .span11 { width: 91.48936170212765%; }
.row-fluid .span10 { width: 82.97872340425532%; }
.row-fluid .span9  { width: 74.46808510638297%; }
.row-fluid .span8  { width: 65.95744680851064%; }
.row-fluid .span7  { width: 57.44680851063829%; }
.row-fluid .span6  { width: 48.93617021276595%; }
.row-fluid .span5  { width: 40.42553191489362%; }
.row-fluid .span4  { width: 31.914893617021278%; }
.row-fluid .span3  { width: 23.404255319148934%; }
.row-fluid .span2  { width: 14.893617021276595%; }
.row-fluid .span1  { width: 6.382978723404255%; }

/* Static spanN (non-fluid rows), BS2 fixed widths with 20px gutter */
.row { margin-left: 0; }
[class*="span"] { float: left; min-height: 1px; margin-left: 20px; }
.row > [class*="span"]:first-child { margin-left: 0; }
.span12 { width: 940px; } .span11 { width: 860px; } .span10 { width: 780px; }
.span9  { width: 700px; } .span8  { width: 620px; }  .span7  { width: 540px; }
.span6  { width: 460px; } .span5  { width: 380px; }  .span4  { width: 300px; }
.span3  { width: 220px; } .span2  { width: 140px; }  .span1  { width: 60px; }
/* Inside fluid containers the .row-fluid rules above override these. */

/* ---------- Legacy form layout (control-group / controls / control-label) ---------- */
.control-group { margin-bottom: var(--stp-s-4); }
.control-group .control-label {
  display: block;
  margin-bottom: var(--stp-s-2);
  font-weight: var(--stp-w-medium);
  color: var(--stp-fg-2);
}
.control-group .controls { display: block; }
/* Give legacy bare inputs the Bootstrap 5 .form-control look (border, padding,
   radius) so un-migrated control-group forms (password modal, create-code modal,
   notifications, etc.) are styled without editing each one. */
.control-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.control-group select,
.control-group textarea {
  display: block;
  width: 100%;
  max-width: 460px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--stp-line-2);
  border-radius: var(--stp-r-sm);
  background: var(--stp-bg);
  color: var(--stp-fg-1);
}
.control-group textarea { min-height: 90px; }
.control-group input:focus,
.control-group select:focus,
.control-group textarea:focus {
  outline: none;
  border-color: var(--stp-orange);
  box-shadow: 0 0 0 4px rgba(255, 76, 0, 0.15);
}

/* Catch-all: give EVERY un-migrated bare control (no .form-control / .form-select,
 * not inside a .control-group) the Bootstrap 5 input look, within any form / modal
 * body / card / well. Ensures all forms are styled even where snippets weren't
 * natively migrated. Checkboxes, radios, hidden, file, submit and buttons excluded. */
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not(.form-control):not(.form-check-input),
.modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not(.form-control):not(.form-check-input),
.stp-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not(.form-control):not(.form-check-input),
form select:not(.form-select),
.modal-body select:not(.form-select),
.stp-card select:not(.form-select),
form textarea:not(.form-control),
.modal-body textarea:not(.form-control),
.stp-card textarea:not(.form-control) {
  display: block;
  width: 100%;
  max-width: 460px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--stp-line-2);
  border-radius: var(--stp-r-sm);
  background-color: var(--stp-bg);
  color: var(--stp-fg-1);
}
form textarea:not(.form-control),
.modal-body textarea:not(.form-control),
.stp-card textarea:not(.form-control) { min-height: 80px; }
form input:not(.form-control):not([type="checkbox"]):not([type="radio"]):focus,
.modal-body input:not(.form-control):not([type="checkbox"]):not([type="radio"]):focus,
form select:not(.form-select):focus,
.modal-body select:not(.form-select):focus,
form textarea:not(.form-control):focus,
.modal-body textarea:not(.form-control):focus {
  outline: none;
  border-color: var(--stp-orange);
  box-shadow: 0 0 0 4px rgba(255, 76, 0, 0.15);
}

/* BS2 input groups (input with an attached add-on or button) -> lay out inline. */
.input-append,
.input-prepend {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  vertical-align: middle;
}
.input-append > input,
.input-prepend > input,
.input-append > .form-control,
.input-prepend > .form-control {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
}
.input-append > .add-on,
.input-prepend > .add-on {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--stp-s-3);
  border: 1px solid var(--stp-line-2);
  background: var(--stp-bg-sunken);
  color: var(--stp-fg-3);
}
.input-append > .btn { white-space: nowrap; }

/* Datepicker calendar add-on: glyphicon fonts are gone, so render a calendar
   icon (Lucide style) via SVG. The add-on opens the flatpickr picker (wired in
   stp-bs-compat.js $.fn.datetimepicker). */
.input-append .add-on,
.input-prepend .add-on { cursor: pointer; }
.input-append .add-on > i,
.input-prepend .add-on > i {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237A7A85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
}
.help-block, .help-inline { color: var(--stp-fg-3); font-size: var(--stp-fs-small); }
.help-inline { display: inline-block; padding-left: var(--stp-s-2); }

/* Horizontal form (passwordForm etc.) */
.form-horizontal .control-group { display: flex; flex-wrap: wrap; align-items: center; }
.form-horizontal .control-label { flex: 0 0 160px; margin-bottom: 0; text-align: right; padding-right: var(--stp-s-4); }
.form-horizontal .controls { flex: 1 1 auto; min-width: 240px; }

/* ---------- Legacy utilities ---------- */
.hidden { display: none !important; }
.pull-right { float: right !important; }
.pull-left  { float: left !important; }
.text-error { color: var(--stp-danger) !important; }
.text-success { color: var(--stp-success) !important; }
.muted { color: var(--stp-fg-mute); }

/* BS2 input sizing helpers occasionally used (.inputN / .spanN on inputs) */
input.span9, textarea.span9 { width: 74%; }
input.span6, textarea.span6 { width: 48%; }
input.span4, textarea.span4 { width: 31%; }

/* ---------- Legacy modal close button (BS2 .close -> BS5 .btn-close) ----------
 * BS2 markup puts the close button BEFORE the title, but BS5's .modal-header is
 * a flex row with justify-content:space-between — which would drop the × on the
 * left and the title on the right. `order: 1` moves the × to the end (right) and
 * keeps the title on the left, matching BS5. Covers every legacy .close header
 * (template.tag shared modals + audit/note/clientLog tags). */
.modal-header .close {
  order: 1;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--stp-fg-3);
  opacity: 0.7;
  cursor: pointer;
}
.modal-header .close:hover { opacity: 1; color: var(--stp-ink); }
/* BS2 modals used .hide to stay hidden; BS5 hides .modal by default. */
.modal.hide { display: none; }

/* ---------- Agent-migration form fix (horizontal field layout) ----------
 * Several search forms (transactions tabs, refund) were migrated with label/field
 * col-* nested DIRECTLY inside a `.col-md-8.offset-md-2` with no `.row`, so they
 * failed to lay out (stacked/centred). Drop the offset and flow the inner columns
 * horizontally (inline-block wraps without needing the parent to be a flex row).
 * This signature (`col-md-8.offset-md-2` > col-*) is unique to those botched forms. */
.col-md-8.offset-md-2 { margin-left: 0 !important; }
.col-md-8.offset-md-2 > [class*="col-md-"] {
  display: inline-block;
  width: auto;
  max-width: none;
  vertical-align: middle;
  padding: 0;
  margin: 0 var(--stp-s-4) var(--stp-s-2) 0;
}
.col-md-8.offset-md-2 .input-append { display: inline-flex; align-items: center; }

/* ---------- Checkboxes & radios — brand them orange (native + legacy) ---------- */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--stp-orange);
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15em;
  cursor: pointer;
}
.form-check-input:checked { background-color: var(--stp-orange); border-color: var(--stp-orange); }
.form-check-input:focus { border-color: var(--stp-orange); box-shadow: 0 0 0 4px rgba(255, 76, 0, 0.15); }

/* ---------- Tabs (.nav-tabs) — works for both BS5 (.nav-link) and legacy
 *            (li>a) markup; normalizeTabs() in the shim adds .nav-link/.nav-item. */
.nav-tabs {
  border-bottom: 1px solid var(--stp-line);
  margin-bottom: var(--stp-s-5);
  gap: var(--stp-s-1);
}
.nav-tabs .nav-link,
.nav-tabs > li > a {
  color: var(--stp-fg-2);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--stp-s-3) var(--stp-s-4);
  font-weight: var(--stp-w-medium);
  text-decoration: none;
  background: transparent;
}
.nav-tabs .nav-link:hover,
.nav-tabs > li > a:hover { color: var(--stp-ink); border-bottom-color: var(--stp-line-2); }
.nav-tabs .nav-link.active,
.nav-tabs > li.active > a {
  color: var(--stp-orange);
  background: transparent;
  border-bottom-color: var(--stp-orange);
}

/* ---------- pnotify growl notifications ----------
 * pnotify styles its container with BS2 alert classes (.alert / .alert-error /
 * .alert-success / .alert-info) or jQuery-UI state classes (.ui-state-*). The
 * backgrounds for those used to come from Bootstrap 2's bootstrap.css (now
 * removed), so growls render with no background. Re-provide them, brand-styled. */
.ui-pnotify .ui-pnotify-container {
  border-radius: var(--stp-r-md);
  box-shadow: var(--stp-shadow-2);
  border: 1px solid var(--stp-line-2);
  background: var(--stp-bg-elev);
  color: var(--stp-fg-1);
  padding: var(--stp-s-4) var(--stp-s-5);
}
/* Bootstrap-style classes pnotify applies for each type */
.ui-pnotify .alert-success {
  background: var(--stp-success-bg); border-color: var(--stp-success); color: var(--stp-success);
}
.ui-pnotify .alert-error,
.ui-pnotify .alert-danger {
  background: var(--stp-danger-bg); border-color: var(--stp-danger); color: var(--stp-danger);
}
.ui-pnotify .alert-info {
  background: var(--stp-info-bg); border-color: var(--stp-info); color: var(--stp-info);
}
/* jQuery-UI-style classes (used when pnotify styling = jqueryui) */
.ui-pnotify .ui-state-highlight {
  background: var(--stp-success-bg); border-color: var(--stp-success); color: var(--stp-success);
}
.ui-pnotify .ui-state-error {
  background: var(--stp-danger-bg); border-color: var(--stp-danger); color: var(--stp-danger);
}
.ui-pnotify .ui-pnotify-title { font-weight: var(--stp-w-bold); margin-bottom: var(--stp-s-1); }

/* BS2 .well container */
.well {
  background: var(--stp-bg-elev);
  border: 1px solid var(--stp-line);
  border-radius: var(--stp-r-md);
  box-shadow: var(--stp-shadow-1);
  padding: var(--stp-s-5);
}