/* =========================================================
   UIX modernization layer — LEGACY / BOOTSTRAP OVERRIDES
   Scope: .uix-app
   Last-resort overrides for legacy global CSS and Bootstrap that
   fight the new design. Every rule here MUST have a comment saying
   which legacy selector it neutralizes and why. Keep this file
   SMALL — prefer fixing at the source (per-page inline cleanup).
   Load order: this file is loaded LAST in the uix layer.
   ========================================================= */

/* ---------- Legacy wizard progress bar (.loader) ----------
   Neutralizes scss/custom.css: .application-form .loader { border-bottom:5px
   solid #f7f7f7 } / .loader-active { ... #28a745 }. Retokenized to the 2026
   palette. Scoped to .uix-page so ONLY migrated screens change — untouched
   wizard pages keep the old look until their slice lands. Markup unchanged. */
.uix-app .uix-page .loader {
  border-bottom: 4px solid var(--uix-color-border);
  border-radius: var(--uix-radius-pill);
}
.uix-app .uix-page .loader.loader-active {
  border-bottom-color: var(--uix-color-brand);
}

/* ---------- Bootstrap checks/radios recolor ----------
   Bootstrap 4 draws custom-control boxes via pseudo-elements colored #007bff
   and form-check natives default to the UA accent. Retokenized to the 2026
   primary. Scoped to .uix-page (migrated screens only). */
.uix-app .uix-page .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--uix-color-primary);
  border-color: var(--uix-color-primary);
}
.uix-app .uix-page .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: var(--uix-focus-ring);
}
.uix-app .uix-page .form-check-input {
  accent-color: var(--uix-color-primary);
}

/* ---------- jQuery UI datepicker skin ----------
   #ui-datepicker-div is appended to <body> (outside any .uix-page wrapper), so
   it is scoped to .uix-app. Neutralizes the stock jQuery UI "base" theme
   (grey gradients, #e6e6e6 buttons) to match tokens. Used on
   personalInformation (DOB); harmless elsewhere. */
.uix-app .ui-datepicker {
  font-family: var(--uix-font-family);
  border: 1px solid var(--uix-color-border);
  border-radius: var(--uix-radius-md);
  box-shadow: var(--uix-shadow-md);
  background: var(--uix-color-surface);
  padding: var(--uix-space-2);
}
.uix-app .ui-datepicker .ui-datepicker-header {
  background: var(--uix-color-surface);
  border: 0;
  color: var(--uix-color-text);
  font-weight: 500;
}
.uix-app .ui-datepicker .ui-state-default {
  background: var(--uix-color-surface);
  border: 1px solid transparent;
  color: var(--uix-color-text);
  text-align: center;
  border-radius: var(--uix-radius-sm);
}
.uix-app .ui-datepicker .ui-state-hover {
  background: var(--uix-color-surface-muted);
  border-color: var(--uix-color-border);
}
.uix-app .ui-datepicker .ui-state-active {
  background: var(--uix-color-primary);
  border-color: var(--uix-color-primary);
  color: var(--uix-color-on-primary);
}
.uix-app .ui-datepicker select.ui-datepicker-month,
.uix-app .ui-datepicker select.ui-datepicker-year {
  border: 1px solid var(--uix-color-border);
  border-radius: var(--uix-radius-sm);
  padding: 2px 4px;
  background: var(--uix-color-surface);
  color: var(--uix-color-text);
}

/* ---------- Bootstrap tooltip skin ----------
   .tooltip is appended to <body> → scoped to .uix-app. Neutralizes Bootstrap's
   default #000 bubble; used by accountSpecification info icons. */
.uix-app .tooltip-inner {
  background: var(--uix-color-text);
  color: var(--uix-color-text-inverse);
  font-family: var(--uix-font-family);
  font-size: var(--uix-body-sm-size);
  line-height: var(--uix-body-sm-line);
  border-radius: var(--uix-radius-sm);
  padding: var(--uix-space-1) var(--uix-space-2);
}

/* ---------- Legacy business resolutions: "people" input tables on phones ----------
   corpResolution.aspx and llcResolution.aspx (not yet redesigned) each carry two
   tables of text inputs: authorized officers (Name / Title / Signature) and authorized
   traders (Name / Relationship / Phone / Email). On a phone the 4-column table did not
   fit: the page scrolled sideways (387px of content at 360px) and the e-mail fields sat
   outside the screen - the same class of defect the client reported on the
   applications tables (2026-09-15), found by the layout sweep.
   Below 577px each row becomes a stacked group of labelled fields. Markup untouched:
   the tables are recognised by their first input (the llc page prefixes every id with
   "llc", hence $=), and the labels repeat each table's own column headers - keep them
   in step with the .aspx. */
@media (max-width: 576px) {
  .uix-app table.table:has(input[id$="AuthorizedOfficerName1"]),
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) {
    display: block;
    text-align: left;
  }
  .uix-app table.table:has(input[id$="AuthorizedOfficerName1"]) thead,
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) thead {
    display: none;
  }
  .uix-app table.table:has(input[id$="AuthorizedOfficerName1"]) tbody,
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) tbody,
  .uix-app table.table:has(input[id$="AuthorizedOfficerName1"]) tr,
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) tr {
    display: block;
  }
  .uix-app table.table:has(input[id$="AuthorizedOfficerName1"]) tr + tr,
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) tr + tr {
    border-top: 1px solid var(--uix-color-border);
  }
  .uix-app table.table:has(input[id$="AuthorizedOfficerName1"]) td,
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) td {
    display: block;
    padding: 6px 12px;
    border: 0;
    text-align: left;
  }
  .uix-app table.table:has(input[id$="AuthorizedOfficerName1"]) td::before,
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) td::before {
    display: block;
    margin-bottom: 4px;
    color: var(--uix-color-text-secondary);
    font-size: 14px;
  }
  .uix-app table.table:has(input[id$="AuthorizedOfficerName1"]) td:nth-child(1)::before,
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) td:nth-child(1)::before { content: "Name"; }
  .uix-app table.table:has(input[id$="AuthorizedOfficerName1"]) td:nth-child(2)::before { content: "Title"; }
  .uix-app table.table:has(input[id$="AuthorizedOfficerName1"]) td:nth-child(3)::before { content: "Signature (Type Full Name)"; }
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) td:nth-child(2)::before { content: "Relationship to Corporation"; }
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) td:nth-child(3)::before { content: "Contact Phone #"; }
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) td:nth-child(4)::before { content: "Email Address"; }
  .uix-app table.table:has(input[id$="AuthorizedOfficerName1"]) input.form-control,
  .uix-app table.table:has(input[id$="AuthorizedTraderName1"]) input.form-control {
    width: 100%;
    min-width: 0;
  }
}