/* =========================================================
   UIX modernization layer — PAGE-SPECIFIC ADJUSTMENTS
   Scope: .uix-page-<name> under .uix-app
   Add one block per migrated screen. Keep page rules minimal —
   prefer shared components in uix-components.css. Page namespaces
   match the data-page / wrapper class added per screen, e.g.:
     .uix-page-index, .uix-page-personal-information, ...
   ========================================================= */

/* =========================================================
   Step 13 — submitted.aspx (Figma 133:37319 canonical / 104:1349 approved)
   Shared .uix-layout--hero: 600px column on the 96px gutter + hero panel.
   Everything structural now lives in uix-components.css; only the page's own
   rhythm stays here.
   ========================================================= */
.uix-app .uix-page-submitted {
  width: 100%;
  /* the hero panel bleeds to the viewport edge; `hidden` is the pre-Safari-16
     fallback for `clip` (nothing here is sticky, so it behaves the same) */
  overflow-x: hidden;
  overflow-x: clip;
}
.uix-app .uix-page-submitted .uix-layout {
  --uix-layout-main: 600px;
  --uix-layout-top: 64px; /* Figma: content starts at y=128 = header + 64 */
}
.uix-app .uix-page-submitted__main {
  display: flex;
  flex-direction: column;
  gap: var(--uix-space-6); /* 40px — Flex Vertical column gap */
  align-self: flex-start;  /* row layout: pins the title to the top */
}
/* Title block → stepper is 40px in Figma. The gap cannot come from __main's
   column gap because the whole state (intro + stepper) sits inside ONE
   server-toggled state div, so it is carried by the intro itself. */
.uix-app .uix-page-submitted__intro {
  display: flex;
  flex-direction: column;
  gap: var(--uix-space-2); /* 12px */
  margin-bottom: var(--uix-space-6); /* 40px */
}
/* EF-10: confirmation shown after returning from the upload screen. */
.uix-app .uix-page-submitted__confirmation { margin-bottom: var(--uix-space-5); }
.uix-app .uix-page-submitted__intro .uix-subtitle {
  color: var(--uix-color-text-tertiary); /* Figma: subtitle tertiary */
}

/* Tablet + mobile: the title block centers (the stepper stays left-aligned),
   and on mobile the H3 drops to 24/28. The 1250px threshold matches the hero
   breakpoint in uix-components.css (client: below 1250 is a tablet). */
@media (max-width: 1249px) {
  /* The layout turns into a column here, so the cross axis flips to horizontal
     and the desktop `align-self: flex-start` would pin the 600px column to the
     left gutter instead of centering it (Figma tablet: column at x=117). */
  .uix-app .uix-page-submitted__main { align-self: center; }
  .uix-app .uix-page-submitted__intro {
    text-align: center;
    align-items: center;
  }
}
@media (max-width: 576px) {
  .uix-app .uix-page-submitted .uix-title {
    font-size: 24px;
    line-height: 28px;
  }
}

/* =========================================================
   Step 14 — uploadFiles.aspx (Figma 104:1072)
   Single 600px content column + "Need Help" side card, drag&drop upload.
   ========================================================= */
.uix-app .uix-page-upload {
  width: 100%;
  /* the hero panel bleeds to the viewport edge; `hidden` is the pre-Safari-16
     fallback for `clip` (nothing here is sticky, so it behaves the same) */
  overflow-x: hidden;
  overflow-x: clip;
}
.uix-app .uix-page-upload .uix-layout {
  --uix-layout-main: 600px;
  --uix-layout-top: 93px; /* Figma: H3 at y=157 = header (64) + 93 */
}
/* Everything else is shared: uix-intro, uix-doc-section, uix-upload*, uix-actions
   and uix-hero all live in uix-components.css. */


/* =========================================================
   Step 15 — fund.aspx (Figma 104:2008 / Select Deposit Method 131:11280)
   Funding hub: content column + method cards + "Need Help" side card.
   ========================================================= */
.uix-app .uix-page-fund { width: 100%; }
.uix-app .uix-page-fund .uix-layout { --uix-layout-main: 640px; }
.uix-app .uix-page-fund__meta {
  margin: var(--uix-space-2) 0;
  font-size: var(--uix-body-sm-size);
  color: var(--uix-color-text-tertiary);
}
.uix-app .uix-page-fund__upload { margin: var(--uix-space-4) 0; }
.uix-app .uix-page-fund__methods-intro { margin-bottom: var(--uix-space-3); }
.uix-app .uix-page-fund__methods-intro .uix-section-title { margin-bottom: var(--uix-space-1); }
.uix-app .uix-page-fund__note {
  margin-top: var(--uix-space-4);
  font-size: var(--uix-body-sm-size);
  color: var(--uix-color-text-tertiary);
}

/* =========================================================
   Entry — index.aspx (create account / sign in)
   No Figma frame yet; styled with the shared system for consistency.
   Narrow content column, everything else comes from components.
   ========================================================= */
.uix-app .uix-page-entry { width: 100%; }
.uix-app .uix-page-entry .uix-layout { --uix-layout-main: 480px; }
.uix-app .uix-page-entry__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uix-space-3);
  flex-wrap: wrap;
}
.uix-app .uix-page-entry__switch {
  margin: var(--uix-space-4) 0 0;
  display: flex;
  align-items: center;
  gap: var(--uix-space-1);
  flex-wrap: wrap;
  font-size: var(--uix-body-sm-size);
  color: var(--uix-color-text-secondary);
}
.uix-app .uix-page-entry__error {
  margin-top: var(--uix-space-3);
  text-align: center;
}

/* =========================================================
   Step 15 (details) — fundAch / fundWire / fundCheck / fundTransfer
   ONE page class for all four funding screens (Figma 127:3081, 132:33170,
   131:11290). Layout comes from the shared .uix-layout; only content deltas here.
   ========================================================= */
.uix-app .uix-page-funding { width: 100%; }
.uix-app .uix-page-funding .uix-layout { --uix-layout-main: 640px; }
.uix-app .uix-page-funding__note {
  margin: 0 0 var(--uix-space-3);
  color: var(--uix-color-text-secondary);
}
.uix-app .uix-page-funding__note a { color: var(--uix-color-brand-text); }
.uix-app .uix-page-funding__list {
  margin: 0 0 var(--uix-space-4);
  padding-left: var(--uix-space-4);
  color: var(--uix-color-text-secondary);
  font-size: var(--uix-body-sm-size);
  line-height: 22px;
}
.uix-app .uix-page-funding__details { margin-bottom: var(--uix-space-4); }
.uix-app .uix-page-funding__address {
  margin: var(--uix-space-2) 0 0;
  font-style: normal;
  font-size: var(--uix-body-sm-size);
  line-height: 22px;
  color: var(--uix-color-text-secondary);
}
.uix-app .uix-page-funding__address a { color: var(--uix-color-brand-text); }
.uix-app .uix-page-funding__figure {
  margin: 0 0 var(--uix-space-4);
  padding: var(--uix-space-4);
  border-radius: var(--uix-radius-lg);
  background: var(--uix-color-surface-muted);
  text-align: center;
}
.uix-app .uix-page-funding__figure-img { max-width: 100%; height: auto; }

/* =========================================================
   Step 2 — applications.aspx (Figma "Active Applications" 40000933:2567)
   972px content column @ x=96, intro (title+subtitle), uix-table lists,
   primary CTA. Help card kept (site-wide pattern; the Figma frame leaves the
   right side empty — recorded as a known difference).
   ========================================================= */
.uix-app .uix-page-applications { width: 100%; }
.uix-app .uix-page-applications .uix-layout {
  --uix-layout-main: 972px;
  --uix-layout-top: 104px; /* Figma: content at y=168 = header (64) + 104 */
}
/* Wide desktop (1280px and up): 972 + 40 gap + 300 aside would overflow the
   mirrored 96px gutter, so the right inset is reduced rather than shrinking the
   Figma table width. Below 992px the layout is a single centered column and must
   keep the symmetric 40/16px gutters. */
@media (min-width: 993px) {
  .uix-app .uix-page-applications .uix-layout { padding-right: var(--uix-space-4); }
}
/* 993-1279px: the "Need Help?" card goes UNDER the tables on this screen.
   Beside them it took ~350px, leaving the column 564px wide at 1024px - the worst
   clipping of all measured widths (client report 2026-09-15). Measured threshold:
   at 1200px with the card beside the column the title column drops to 109px and
   its header overflows again; from 1280px it is 170px and everything fits. */
@media (min-width: 993px) and (max-width: 1279px) {
  .uix-app .uix-page-applications .uix-layout {
    flex-direction: column;
    padding-right: var(--uix-gutter);
  }
  .uix-app .uix-page-applications .uix-layout__main,
  .uix-app .uix-page-applications .uix-layout__aside {
    flex-basis: auto;
    width: 100%;
    max-width: var(--uix-layout-main);
  }
}
.uix-app .uix-page-applications .uix-intro .uix-subtitle { color: var(--uix-color-text-tertiary); }
.uix-app .uix-page-applications__section { margin-top: var(--uix-space-4); }
.uix-app .uix-page-applications__section .uix-section-title { margin: 0 0 var(--uix-space-2); }
.uix-app .uix-page-applications__cta { margin-top: var(--uix-space-5); }

/* Column geometry — client reviews: "the elements in the tables should be
   aligned" and "dimensions are cut on the table" (2026-09-15).
   Both tables are built from the SAME five cells in code-behind (account type,
   title, #applicants, date, action), so one fixed grid keeps them aligned
   column-for-column; without table-layout:fixed each table sizes to its own
   content and the two grids drift apart.
   The grid used to be pure percentages, and a percentage cannot hold content of a
   fixed width: the action column (21%) dropped below the 146px "Continue
   Application" button on every table narrower than ~850px, and the cell's
   overflow:hidden cut the button off - at 7 of 11 measured widths, worst at 1024px
   (44px). Columns whose content has a fixed width are now fixed; only the title
   flexes. Measured in Roboto at the sizes below:
     Account Type   24%    "Sole Proprietorship" 136px + 32px padding (24% >= 173px from 720px up)
     Account Title  auto   the only free-length value; ellipsis
     #Applicants    124px  "#APPLICANTS" header 85px + 32px
     Date           148px  "DATE COMPLETED" header 109px + 32px
     Action         180px  "Continue Application" button 146px + 32px
   NB: the Figma frame cannot be copied for this — it is a raster paste-up of the
   old page whose two tables are themselves at different zooms (see
   spec-applications-funding.md), and it has no tablet or phone variant. */
.uix-app .uix-page-applications .uix-table { table-layout: fixed; }
.uix-app .uix-page-applications .uix-table th:nth-child(1),
.uix-app .uix-page-applications .uix-table td:nth-child(1) { width: 24%; }
.uix-app .uix-page-applications .uix-table th:nth-child(2),
.uix-app .uix-page-applications .uix-table td:nth-child(2) { width: auto; }
.uix-app .uix-page-applications .uix-table th:nth-child(3),
.uix-app .uix-page-applications .uix-table td:nth-child(3) { width: 124px; }
.uix-app .uix-page-applications .uix-table th:nth-child(4),
.uix-app .uix-page-applications .uix-table td:nth-child(4) { width: 148px; }
.uix-app .uix-page-applications .uix-table th:nth-child(5),
.uix-app .uix-page-applications .uix-table td:nth-child(5) { width: 180px; text-align: right; }
/* Long values (account title, e-mail-like text) must not blow the fixed grid. */
.uix-app .uix-page-applications .uix-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ...but the action cell must never clip its button. */
.uix-app .uix-page-applications .uix-table td:nth-child(5) {
  overflow: visible;
  text-overflow: clip;
}
/* Keep both header rows the same height even when one would wrap. */
.uix-app .uix-page-applications .uix-table th { white-space: nowrap; }

/* Fallback for browsers without container queries (below): keep the grid whole
   and let .uix-table-wrap scroll it, rather than crushing it. 720px = the card
   threshold, i.e. the narrowest width the grid above is designed for. */
@media (max-width: 768px) {
  .uix-app .uix-page-applications .uix-table { min-width: 720px; }
}

/* Cards instead of a grid whenever the TABLE itself is narrower than 720px - phones
   and iPad portrait. Queried on the table's container, not the viewport, so it holds
   whatever sits beside the column. Each row becomes a card: label | value lines,
   empty values hidden, the action button full width.
   Labels come from CSS because the rows are generated in code-behind (HtmlTable);
   they repeat the column headers of applications.aspx and must be kept in step with
   them. Trade-off: with display:block the table loses its table semantics for
   assistive technology; the generated labels are still read out. */
.uix-app .uix-page-applications .uix-table-wrap { container-type: inline-size; }
@container (max-width: 719px) {
  .uix-app .uix-page-applications .uix-table {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }
  .uix-app .uix-page-applications .uix-table,
  .uix-app .uix-page-applications .uix-table tbody,
  .uix-app .uix-page-applications .uix-table tr {
    display: block;
    width: auto;
  }
  .uix-app .uix-page-applications .uix-table thead,
  .uix-app .uix-page-applications .uix-table tr:has(> th) {
    display: none;
  }
  .uix-app .uix-page-applications .uix-table tr {
    margin-bottom: var(--uix-space-2);
    padding: 12px 16px 16px;
    border: 1px solid var(--uix-color-border);
    border-radius: var(--uix-radius-lg);
    background: var(--uix-color-surface);
  }
  /* :nth-child(n) matches the specificity of the column-width rules above, so they lose. */
  .uix-app .uix-page-applications .uix-table td:nth-child(n) {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    width: auto;
    padding: 6px 0;
    border: 0;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    text-align: left;
  }
  .uix-app .uix-page-applications .uix-table td:empty { display: none; }
  .uix-app .uix-page-applications .uix-table td::before {
    color: var(--uix-color-text-secondary);
    font-size: 14px;
  }
  .uix-app .uix-page-applications .uix-table td:nth-child(1)::before { content: "Account Type"; }
  .uix-app .uix-page-applications .uix-table td:nth-child(2)::before { content: "Account Title"; }
  .uix-app .uix-page-applications .uix-table td:nth-child(3)::before { content: "Applicants"; }
  .uix-app .uix-page-applications__section--incomplete .uix-table td:nth-child(4)::before { content: "Date Started"; }
  .uix-app .uix-page-applications__section--completed .uix-table td:nth-child(4)::before { content: "Date Completed"; }
  .uix-app .uix-page-applications .uix-table td:nth-child(5) {
    display: block;
    padding-top: 12px;
  }
  .uix-app .uix-page-applications .uix-table td:nth-child(5)::before { content: none; }
  .uix-app .uix-page-applications .uix-table td:nth-child(5) .btn {
    width: 100%;
    min-height: 40px;
    font-size: 14px;
  }
}

/* Row action buttons/links are generated in code-behind with legacy classes
   (btn btn-success btn-xs) or as bare anchors — retokenize them here instead
   of touching C#. Compact pill per Figma (Resume button 51×22). */
.uix-app .uix-page-applications .uix-table td a,
.uix-app .uix-page-applications .uix-table .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 var(--uix-space-2);
  border: 0;
  border-radius: var(--uix-radius-btn);
  background: var(--uix-color-primary);
  color: var(--uix-color-on-primary);
  font-family: var(--uix-font-family);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.uix-app .uix-page-applications .uix-table td a:hover,
.uix-app .uix-page-applications .uix-table .btn:hover {
  background: var(--uix-color-primary-hover);
  color: var(--uix-color-on-primary);
}

/* =========================================================
   TestEnv.aspx — environment diagnostics (internal tool, no Figma frame)
   One wide column in the application's own visual language: the same shell,
   tokens, form fields, alert and table skin as the customer screens, so no
   extra stylesheet exists for it.
   ========================================================= */
.uix-app .uix-page-testenv { width: 100%; }
.uix-app .uix-page-testenv .uix-layout { --uix-layout-main: 972px; }
.uix-app .uix-page-testenv__form {
  max-width: 600px;
  margin-bottom: var(--uix-space-6);
}
.uix-app .uix-page-testenv__firm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--uix-space-3);
}
.uix-app .uix-page-testenv__hint {
  margin: 0 0 var(--uix-space-4);
  color: var(--uix-color-text-secondary);
  font-size: var(--uix-body-sm-size);
}
.uix-app .uix-page-testenv__summary { margin-bottom: var(--uix-space-5); }
.uix-app .uix-page-testenv__section { margin-bottom: var(--uix-space-5); }
.uix-app .uix-page-testenv__section .uix-section-title { margin: 0 0 var(--uix-space-2); }

/* Details carry host names, paths and procedure lists: they wrap, never widen the table. */
.uix-app .uix-page-testenv__table { table-layout: fixed; }
.uix-app .uix-page-testenv__table th:nth-child(1),
.uix-app .uix-page-testenv__table td:nth-child(1) { width: 88px; }
.uix-app .uix-page-testenv__table th:nth-child(2),
.uix-app .uix-page-testenv__table td:nth-child(2) { width: 200px; }
.uix-app .uix-page-testenv__table th:nth-child(4),
.uix-app .uix-page-testenv__table td:nth-child(4) { width: 88px; text-align: right; }
.uix-app .uix-page-testenv__table td { vertical-align: top; }
.uix-app .uix-page-testenv__name { font-weight: 500; }
.uix-app .uix-page-testenv__details {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: var(--uix-body-sm-size);
}
.uix-app .uix-page-testenv__time {
  color: var(--uix-color-text-secondary);
  font-size: var(--uix-body-sm-size);
  white-space: nowrap;
}

.uix-app .uix-page-testenv__plain summary {
  cursor: pointer;
  font-weight: 500;
}
.uix-app .uix-page-testenv__plain pre {
  margin: var(--uix-space-2) 0 0;
  padding: var(--uix-space-3);
  border: 1px solid var(--uix-color-border);
  border-radius: var(--uix-radius-md);
  background: var(--uix-color-surface-muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--uix-caption-size);
  line-height: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Phones: firm fields stack; each check becomes a block (status, name, details, time). */
@media (max-width: 576px) {
  .uix-app .uix-page-testenv__firm { grid-template-columns: minmax(0, 1fr); }
  .uix-app .uix-page-testenv__table,
  .uix-app .uix-page-testenv__table tbody,
  .uix-app .uix-page-testenv__table tr { display: block; }
  .uix-app .uix-page-testenv__table thead { display: none; }
  .uix-app .uix-page-testenv__table tr { padding: 12px 16px; border-bottom: 1px solid var(--uix-color-border); }
  .uix-app .uix-page-testenv__table tr:last-child { border-bottom: 0; }
  .uix-app .uix-page-testenv__table td:nth-child(n) {
    display: block;
    width: auto;
    padding: 2px 0;
    border: 0;
    text-align: left;
  }
}

/* ---------- Test-environment approval panel (submitted.aspx) ----------
   Deliberately NOT in the visual language of the customer journey: a dashed, muted
   frame set well apart from the screen above, so nobody reads it as a step of the
   application. It only ever renders off production. */
.uix-app .uix-testpanel {
  margin-top: var(--uix-space-8);
  padding: var(--uix-space-5);
  border: 1px dashed var(--uix-color-border);
  border-radius: var(--uix-radius-md);
  background: var(--uix-color-surface-muted);
}
.uix-app .uix-testpanel__title {
  margin: 0 0 var(--uix-space-2);
  font-size: var(--uix-body-size);
  font-weight: 700;
  color: var(--uix-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.uix-app .uix-testpanel__text {
  margin: 0 0 var(--uix-space-4);
  font-size: var(--uix-body-sm-size);
  line-height: 20px;
  color: var(--uix-color-text-tertiary);
}
.uix-app .uix-testpanel__confirm,
.uix-app .uix-testpanel__result { margin-top: var(--uix-space-4); }