/* ==========================================================================
   Roboloan Professional UI Polish
   --------------------------------------------------------------------------
   Purpose: a single, shared refinement layer loaded LAST in every app layout.
   It upgrades buttons, form controls, tables, cards, KPI panels, badges and
   micro-typography across the platform-admin, lender and borrower surfaces
   without changing the brand palette.

   Rules honored here:
   - No new hues. Only the existing Roboloan palette is used
     (navy #071629 / #0b1f3a / #123257, red #d7193f / #b20f31, blue
     #2d63d7 / #245ea8, text #152033, muted #667085, borders #dfe4ec).
   - Calm, professional motion (150ms ease), fully disabled under
     prefers-reduced-motion.
   - No !important except where legacy inline/third-party styles force it.
   ========================================================================== */

:root {
  --pui-radius-sm: 8px;
  --pui-radius: 10px;
  --pui-radius-lg: 14px;
  --pui-border: #dfe4ec;
  --pui-border-strong: #cfd7e6;
  --pui-text: #152033;
  --pui-muted: #667085;
  --pui-focus: 0 0 0 3px rgba(45, 99, 215, .18);
  --pui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --pui-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 6px rgba(16, 24, 40, .05);
  --pui-shadow-lg: 0 4px 10px rgba(16, 24, 40, .06), 0 12px 28px rgba(16, 24, 40, .09);
  --pui-ease: cubic-bezier(.2, .6, .2, 1);
}

/* ---------------------------------------------------------------- 1. Focus */
:where(a, button, input, select, textarea, [tabindex], summary):focus-visible {
  outline: 2px solid #2d63d7;
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible, .btn:focus,
.form-control:focus, .form-select:focus {
  outline: 2px solid #2d63d7;
  outline-offset: 1px;
  box-shadow: var(--pui-focus);
}

/* ------------------------------------------------------------ 2. Buttons */
/* Shared skeleton for every button family across the app surfaces. */
.btn, a.btn, button.btn,
.pa-btn, a.pa-btn,
.command-btn,
.role-btn, a.role-btn,
.borrower-primary-btn,
.borrower-secondary-btn,
.app-help-submit,
.app-help-secondary {
  min-height: 42px;
  padding: .55rem 1.1rem;
  border-radius: var(--pui-radius);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.25;
  letter-spacing: .005em;
  transition: background-color .15s var(--pui-ease), border-color .15s var(--pui-ease),
              color .15s var(--pui-ease), box-shadow .15s var(--pui-ease),
              transform .15s var(--pui-ease);
}

/* Primary buttons (red) */
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active,
.pa-btn--primary,
.command-btn--accent,
.role-btn--primary,
.borrower-primary-btn {
  background: #d7193f;
  border-color: #d7193f;
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.pa-btn--primary:hover,
.command-btn--accent:hover,
.role-btn--primary:hover,
.borrower-primary-btn:hover {
  background: #b20f31;
  border-color: #b20f31;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(178, 15, 49, .22);
}
.btn-primary:active,
.pa-btn--primary:active,
.role-btn--primary:active,
.borrower-primary-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Secondary / outline buttons */
.btn-secondary, .btn-outline-secondary,
.pa-btn--secondary, .pa-btn--ghost,
.command-btn--ghost,
.role-btn:not(.role-btn--primary),
.borrower-secondary-btn,
.app-help-secondary {
  background: #fff;
  border: 1px solid #cfd7e6;
  color: #344054;
}
.btn-secondary:hover, .btn-outline-secondary:hover,
.pa-btn--secondary:hover, .pa-btn--ghost:hover,
.command-btn--ghost:hover,
.role-btn:not(.role-btn--primary):hover,
.borrower-secondary-btn:hover {
  background: #f4f6f9;
  border-color: #b8c3d4;
  color: #0b1f3a;
  transform: translateY(-1px);
  box-shadow: var(--pui-shadow-sm);
}

/* Quiet / text buttons */
.btn-link, a.pa-text-link, .borrower-text-link, .command-link {
  font-weight: 600;
  color: #245ea8;
  text-decoration: none;
  border-radius: 4px;
}
.btn-link:hover, a.pa-text-link:hover, .borrower-text-link:hover, .command-link:hover {
  color: #194d8f;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Disabled state, unified */
.btn:disabled, .btn.disabled,
.pa-btn[disabled], .pa-btn.disabled,
.command-btn[disabled], .role-btn[disabled],
.borrower-primary-btn[disabled],
button[disabled].pa-btn {
  opacity: .55;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Small buttons keep proportion */
.btn-sm, .pa-btn--small {
  min-height: 34px;
  padding: .35rem .75rem;
  font-size: .8125rem;
}

/* Bootstrap outline variants recolored to the brand neutrals */
.btn-outline-primary {
  color: #d7193f;
  border-color: #d7193f;
}
.btn-outline-primary:hover {
  background: #d7193f;
  border-color: #d7193f;
  color: #fff;
}
.btn-outline-primary:focus, .btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(215, 25, 63, .16);
}

/* ----------------------------------------------------- 3. Form controls */
.form-control, .form-select,
.role-field input, .role-field select, .role-field textarea,
.app-help-field input, .app-help-field select, .app-help-field textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"], input[type="search"],
select.form-control {
  min-height: 44px;
  padding: .6rem .85rem;
  border: 1px solid #cfd7e6;
  border-radius: var(--pui-radius);
  background: #fff;
  color: var(--pui-text);
  font-size: 16px; /* prevents iOS focus zoom; visually normalized below */
  line-height: 1.4;
  transition: border-color .15s var(--pui-ease), box-shadow .15s var(--pui-ease);
}
/* Visually 14px inputs on desktop only (keeps 16px on touch to avoid zoom) */
@media (hover: hover) and (pointer: fine) {
  .form-control, .form-select,
  .role-field input, .role-field select, .role-field textarea,
  .app-help-field input, .app-help-field select, .app-help-field textarea {
    font-size: .875rem;
  }
}
.form-control:hover, .form-select:hover,
.role-field input:hover, .app-help-field input:hover {
  border-color: #b8c3d4;
}
.form-control:focus, .form-select:focus,
.role-field input:focus, .role-field select:focus, .role-field textarea:focus,
.app-help-field input:focus, .app-help-field select:focus, .app-help-field textarea:focus {
  border-color: #2d63d7;
  box-shadow: var(--pui-focus);
}
.form-control::placeholder,
.role-field input::placeholder, .app-help-field input::placeholder {
  color: #98a2b3;
  opacity: 1;
}
.form-control:disabled, .form-select:disabled,
.role-field input:disabled {
  background: #f2f4f7;
  color: #98a2b3;
  border-color: #e4e9f0;
  cursor: not-allowed;
}

/* Labels and help text */
.form-label, .role-field label, .app-help-field label {
  margin-bottom: .35rem;
  color: #344054;
  font-size: .8125rem;
  font-weight: 650;
}
.form-text, .text-muted {
  font-size: .75rem;
}

/* Validation states */
.form-control.is-invalid, .form-select.is-invalid {
  border-color: #d7193f;
  background-image: none;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(215, 25, 63, .14);
}
.invalid-feedback, .field-validation-error {
  color: #b20f31;
  font-size: .75rem;
  font-weight: 550;
  margin-top: .3rem;
}
.form-control.is-valid, .form-select.is-valid {
  border-color: #287348;
}
.form-control.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(40, 115, 72, .14);
}
.field-validation-valid, .valid-feedback { color: #287348; font-size: .75rem; }

/* Checkboxes and radios */
.form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid #cfd7e6;
  cursor: pointer;
}
.form-check-input:checked {
  background-color: #d7193f;
  border-color: #d7193f;
}
.form-check-input:focus {
  border-color: #2d63d7;
  box-shadow: var(--pui-focus);
}
.form-check-label { color: #344054; font-size: .875rem; }

/* Input groups */
.input-group > .form-control, .input-group > .form-select {
  min-height: 44px;
}
.input-group-text {
  background: #f4f6f9;
  border: 1px solid #cfd7e6;
  color: #667085;
  font-size: .8125rem;
  font-weight: 600;
}

/* ------------------------------------------------------------- 4. Cards */
.workspace-card, .table-card, .form-card,
.command-panel, .command-metric,
.pa-panel, .sky-card,
.role-card, .role-metric,
.borrower-card {
  border: 1px solid #e5e9f2;
  border-radius: var(--pui-radius-lg);
  box-shadow: var(--pui-shadow-sm);
  transition: border-color .15s var(--pui-ease), box-shadow .15s var(--pui-ease),
              transform .15s var(--pui-ease);
}
/* Interactive cards only lift on hover */
a.workspace-card:hover, .role-quicklinks a:hover, .trial-explore__steps a:hover,
.portal-loan-card:hover {
  border-color: #cfd7e6;
  box-shadow: var(--pui-shadow);
  transform: translateY(-1px);
}
/* Section headers inside cards */
.card-section-header h2, .command-panel__header h2,
.pa-panel__header h2, .role-card__header h2, .borrower-card header h2 {
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ------------------------------------------------------------- 5. Tables */
.workspace-table th, .command-table th, .pa-table th,
.role-table th, .borrower-table th {
  padding: .7rem 1rem;
  background: #f8fafc;
  color: #667085;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid #e7ebf1;
  white-space: nowrap;
}
.workspace-table td, .command-table td, .pa-table td,
.role-table td, .borrower-table td {
  padding: .8rem 1rem;
  border-bottom: 1px solid #edf0f5;
  color: #344054;
  font-size: .875rem;
  vertical-align: middle;
}
.workspace-table tbody tr, .command-table tbody tr, .pa-table tbody tr,
.role-table tbody tr, .borrower-table tbody tr {
  transition: background-color .12s var(--pui-ease);
}
.workspace-table tbody tr:hover, .command-table tbody tr:hover,
.pa-table tbody tr:hover, .role-table tbody tr:hover,
.borrower-table tbody tr:hover {
  background: #f8fafc;
}
.table > :not(caption) > * > * {
  padding: .8rem 1rem;
}
/* Numeric columns */
td.text-end, th.text-end { white-space: nowrap; }
/* Links in tables */
.pa-table-link, .workspace-table td a, .command-table td a {
  color: #0b1f3a;
  font-weight: 650;
  text-decoration: none;
}
.pa-table-link:hover, .workspace-table td a:hover, .command-table td a:hover {
  color: #245ea8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* The shared 320px cap on every table-responsive clips normal tables;
   keep horizontal scroll, drop the arbitrary height limit. */
.table-responsive {
  max-height: none;
  min-height: 0;
}

/* ---------------------------------------------------- 6. KPI & metrics */
.command-metric strong, .metric-card strong, .metric-value,
.role-metric strong, .borrower-metric strong,
.pa-dash-kpi strong, .pa-analytics-kpi > strong {
  letter-spacing: -.02em;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.command-metric span, .role-metric span,
.pa-dash-kpi__label, .borrower-metric > div > span,
.metric-card small {
  font-size: .74rem; /* was 0.68-0.7rem in places */
  letter-spacing: .045em;
}

/* KPI icon chips: the font-glyph look is normalized (SVG friendly) */
.pa-kpi-icon, .borrower-metric__icon, .borrower-quick-icon {
  font-size: 1rem;
  line-height: 1;
}
.pa-kpi-icon svg, .borrower-metric__icon svg, .borrower-quick-icon svg {
  display: block;
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

/* Delta / trend chips */
.pa-kpi-delta, .command-metric b {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .14rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  font-style: normal;
  background: #f2f4f7;
  color: #667085;
}
.pa-kpi-delta.is-favorable, .is-favorable:not(.pa-dash-kpi) {
  background: #e9f7ef;
  color: #176b38;
}
.pa-kpi-delta.is-unfavorable, .is-unfavorable:not(.pa-dash-kpi) {
  background: #fff1f3;
  color: #a90e2d;
}

/* ---------------------------------------------------- 7. Badges & pills */
.status-pill, .role-badge, .pa-sky-pill,
.notification-preview__body strong {
  font-size: .75rem;
  font-weight: 650;
}
.status-pill, .role-badge {
  padding: .28rem .65rem;
  border-radius: 999px;
  border: 1px solid #dfe4ec;
  background: #f8fafc;
  color: #475467;
  letter-spacing: .01em;
}

/* ---------------------------------------------------- 8. Nav & sidebar */
/* Readability floor for the smallest sidebar/topbar labels (kept on-palette) */
.app-workspace-type { font-size: .7rem; color: #a8bad2; }
.app-topbar__context span { font-size: .7rem; }
.app-account-copy small { font-size: .72rem; color: #55627a; }
.notification-preview__body small { font-size: .72rem; }
.command-kicker { font-size: .75rem; color: #a8bad2; }
.app-nav-label { font-size: .7rem; letter-spacing: .07em; }

.app-side-link {
  border-radius: var(--pui-radius-sm);
  transition: background-color .15s var(--pui-ease), color .15s var(--pui-ease);
}
.app-side-link:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.app-side-link.is-active {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: inset 3px 0 0 #d7193f;
}
.app-drawer-nav a {
  border-radius: var(--pui-radius-sm);
}

/* Bottom mobile tab bar */
.app-bottom-nav a, .app-bottom-nav button {
  transition: color .15s var(--pui-ease);
}
.app-bottom-nav .is-active {
  color: #d7193f;
}

/* ------------------------------------------------ 9. Dropdowns & menus */
.dropdown-menu, .notification-dropdown, .app-account-dropdown {
  border: 1px solid #e5e9f2;
  border-radius: 12px;
  box-shadow: var(--pui-shadow-lg);
  overflow: hidden;
}
.dropdown-item {
  padding: .55rem .9rem;
  font-size: .875rem;
  color: #344054;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: #f4f6f9;
  color: #0b1f3a;
}
.dropdown-divider { border-color: #edf0f5; }
.dropdown-header { color: #667085; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }

/* ------------------------------------------------------- 10. Alerts */
.alert {
  border-radius: var(--pui-radius);
  border: 1px solid transparent;
  font-size: .875rem;
  padding: .8rem 1rem;
}
.alert-success { background: #f0faf3; border-color: #a8d5b5; color: #176b38; }
.alert-danger { background: #fff1f3; border-color: #efb2bf; color: #a90e2d; }
.alert-warning { background: #fff8e7; border-color: #f0cf92; color: #8a5b00; }
.alert-info { background: #eef4fb; border-color: #b9d2ec; color: #245ea8; }
.alert-dismissible .btn-close { padding: .9rem 1rem; }

/* ------------------------------------------------- 11. Empty states */
.empty-state h2, .empty-state h3,
.command-empty strong, .pa-empty-chart strong, .borrower-empty {
  color: #344054;
  font-weight: 700;
}

/* ------------------------------------- 12. Per-surface character (subtle) */
/* Platform admin: panels get a quiet top rule; KPI cards keep their tint. */
.platform-admin-app .pa-panel { border-top: 3px solid #edf0f5; }
.platform-admin-app .pa-dash-kpi { border-top: 3px solid #dfe4ec; }
.platform-admin-app .pa-kpi-card--green { border-top-color: #21a366; }
.platform-admin-app .pa-kpi-card--blue { border-top-color: #3b82f6; }
.platform-admin-app .pa-kpi-card--purple { border-top-color: #7c5cd6; }
.platform-admin-app .pa-kpi-card--orange { border-top-color: #f07821; }
.platform-admin-app .pa-kpi-card--cyan { border-top-color: #0e9bb5; }

/* Lender command center: shortcuts get a refined hover underline. */
.command-shortcuts a { transition: background-color .15s var(--pui-ease); }
.command-shortcuts a:hover { background: #f8fafc; }
.command-metric { border-top-width: 3px; border-top-color: #dfe4ec; }
.command-metric--primary { border-top-color: #123257; }
.command-metric--warning { border-top-color: #d7193f; }

/* Borrower portal: the payoff progress bar gets a calmer track. */
.portal-progress__track { background: #edf1f5; height: 12px; }
.borrower-status-dot.is-on { background: #287348; }
.borrower-status-dot.is-off { background: #98a2b3; }
.borrower-primary-btn { border-radius: var(--pui-radius); }

/* -------------------------------------------------- 13. Motion safety */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------- 14. Print polish */
@media print {
  .app-sidebar, .app-topbar, .app-bottom-nav, .offcanvas, .public-mobile-cta {
    display: none !important;
  }
  .workspace-card, .command-panel, .pa-panel, .role-card, .borrower-card {
    box-shadow: none;
    border: 1px solid #dfe4ec;
  }
}

/* --------------------------------------------- 15. Skip-to-content link */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 2000;
  padding: .6rem 1rem;
  background: #0b1f3a;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  box-shadow: var(--pui-shadow-lg);
  transition: top .15s var(--pui-ease);
}
.skip-link:focus, .skip-link:focus-visible {
  top: 0;
  color: #fff;
  outline: 2px solid #2d63d7;
  outline-offset: 2px;
}
.skip-link--landing { border-radius: 0 0 0 10px; }

/* ==========================================================================
   16. Responsive card grids - cards keep their multi-column "desktop" fit
   at every viewport. minmax(min(100%, Npx), 1fr) means: as many columns as
   comfortably fit, automatically collapsing to one only on the narrowest
   screens. Specificity is raised with a body prefix so these rules win over
   per-page scoped stylesheets (attribute selectors) and legacy media-query
   collapses, keeping the UI visually identical in structure across devices.
   ========================================================================== */

/* --- KPI / metric grids: always fill the row, never a lonely full-width card --- */
body.authenticated-app .metric-grid,
body.authenticated-app .command-metrics,
body.authenticated-app .role-metrics,
body.authenticated-app .borrower-metrics,
body.authenticated-app .pa-dash-kpis,
body.authenticated-app .lender-kpis,
body.authenticated-app .pa-analytics-kpis,
body.platform-admin-app .pa-dash-kpis,
body.platform-admin-app .pa-analytics-kpis {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr));
  gap: 10px;
}

/* --- Shortcut strips and quick-link tiles --- */
body.authenticated-app .command-shortcuts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
}
body.authenticated-app .role-quicklinks,
body.authenticated-app .trial-explore__steps {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr));
}
body.borrower-app .borrower-quick-access {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr));
  gap: 10px;
}

/* --- Featured two-column blocks keep their proportions --- */
body.authenticated-app .command-grid,
body.authenticated-app .command-grid--analytics,
body.authenticated-app .command-grid--bottom,
body.authenticated-app .pa-dashboard-grid--primary {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
body.authenticated-app .pa-dashboard-grid--primary .pa-panel--wide {
  grid-column: auto;
}
body.authenticated-app .pa-dash-secondary,
body.authenticated-app .lender-secondary-grid,
body.authenticated-app .lender-payment-tables,
body.authenticated-app .borrower-hero-grid,
body.authenticated-app .borrower-main-grid,
body.authenticated-app .borrower-bottom-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

/* --- Card internals stay composed in narrow columns --- */
body.authenticated-app .pa-dash-kpi,
body.authenticated-app .command-metric,
body.authenticated-app .role-metric,
body.authenticated-app .borrower-metric,
body.authenticated-app .metric-card,
body.authenticated-app .lender-kpi {
  min-width: 0;
}
body.authenticated-app .pa-dash-kpi > strong,
body.authenticated-app .command-metric strong,
body.authenticated-app .role-metric strong,
body.authenticated-app .borrower-metric strong,
body.authenticated-app .lender-kpi > strong {
  font-size: clamp(1.02rem, 1rem + .9vw, 1.55rem);
  overflow-wrap: break-word;
}
body.authenticated-app .pa-dash-kpi__label,
body.authenticated-app .command-metric span,
body.authenticated-app .role-metric span,
body.authenticated-app .borrower-metric > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
body.authenticated-app .pa-dash-kpi small,
body.authenticated-app .command-metric small,
body.authenticated-app .lender-kpi > small {
  overflow-wrap: break-word;
}

/* --- The bottom mobile tab bar stays above thumb reach, full-bleed cards get padding --- */
@media (max-width: 767.98px) {
  body.authenticated-app .app-content {
    padding-left: 12px;
    padding-right: 12px;
  }
  body.authenticated-app .workspace-card,
  body.authenticated-app .command-panel,
  body.authenticated-app .pa-panel,
  body.authenticated-app .role-card,
  body.authenticated-app .borrower-card {
    border-radius: 12px;
  }
  body.authenticated-app .table-responsive {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   17. Premium finish (restrained, classic, non-futuristic)
   ========================================================================== */

/* Sticky table headers inside scrolling regions */
.table-responsive thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.workspace-table thead th, .command-table thead th,
.pa-table thead th, .role-table thead th, .borrower-table thead th {
  box-shadow: inset 0 -1px 0 #e7ebf1;
}

/* Page / panel headers: quiet rule, generous breathing room */
.pa-dash-header, .workspace-header, .portal-hero, .role-hero {
  padding-bottom: .9rem;
  border-bottom: 1px solid #e7ebf1;
  margin-bottom: 1.1rem;
}
.pa-dash-header__heading h1, .workspace-header h1 {
  letter-spacing: -.025em;
}
.pa-panel__header h2, .command-panel__header h2 {
  letter-spacing: -.012em;
}

/* KPI cards: composed elevation, calm top accent */
.command-metric, .pa-dash-kpi, .role-metric, .borrower-metric, .lender-kpi {
  box-shadow: var(--pui-shadow-sm);
}
.command-metric:hover, .pa-dash-kpi:hover, .role-metric:hover,
.borrower-metric:hover, .lender-kpi:hover {
  box-shadow: var(--pui-shadow);
}

/* Lender KPI icon chips — parity with the scoped dashboard sheet, so the
   cards stay composed even if the scoped bundle ever fails to load. */
body.authenticated-app .lender-kpi {
  position: relative;
}
body.authenticated-app .lender-kpi__icon {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
}
body.authenticated-app .lender-kpi__icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
body.authenticated-app .lender-kpi--purple .lender-kpi__icon { background: #7165da; }
body.authenticated-app .lender-kpi--green .lender-kpi__icon { background: #27a66b; }
body.authenticated-app .lender-kpi--blue .lender-kpi__icon { background: #3f71ea; }
body.authenticated-app .lender-kpi--red .lender-kpi__icon { background: #e14c42; }
body.authenticated-app .lender-kpi--amber .lender-kpi__icon { background: #ff7826; }
body.authenticated-app .lender-kpi--cyan .lender-kpi__icon { background: #10a9c6; }
body.authenticated-app .lender-kpi__delta { display: inline-block; font-size: 10.5px; font-weight: 650; }
body.authenticated-app .lender-kpi__delta.is-favorable { color: #18864e; }
body.authenticated-app .lender-kpi__delta.is-unfavorable { color: #c4322b; }

/* Status dots and live indicators get a soft halo instead of a hard ring */
.pa-live-dot, .borrower-status-dot.is-on {
  box-shadow: 0 0 0 3px rgba(40, 115, 72, .12);
}

/* Borrower portal interior normalization — parity with the workspace shells:
   bare Bootstrap headings, muted text, and definition lists inside borrower
   cards pick up the same voice as the lender/admin panels. Borrower brand
   colors stay untouched; only rhythm, type weight, and palette greys align. */
body.borrower-app .borrower-card h2.h5,
body.borrower-app .borrower-card h3.h6,
body.borrower-app .role-card h2.h5,
body.borrower-app .role-card h3.h6 {
  margin: 0 0 4px;
  color: #0a1f3d;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}
body.borrower-app .borrower-card .text-muted,
body.borrower-app .role-card .text-muted,
body.borrower-app .borrower-card .text-secondary,
body.borrower-app .role-card .text-secondary {
  color: #69778b !important;
}
body.borrower-app .detail-grid > div {
  padding: 12px 18px;
  border-bottom-color: #edf1f5;
}
body.borrower-app .detail-grid dt {
  color: #66758a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}
body.borrower-app .detail-grid dd {
  margin-top: 4px;
  color: #0a1f3d;
  font-size: 13px;
  font-weight: 700;
}
body.borrower-app .form-actions {
  gap: 9px;
}

/* Sidebar polish: smooth drawer, refined account block */
.app-mobile-drawer .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.app-sidebar__account, .pa-sidebar__account {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 10px;
}

/* Attention rows get a composed hover treatment */
.pa-attention-list a, .command-list__row, .action-row {
  transition: background-color .15s var(--pui-ease);
}
.pa-attention-list a:hover, .command-list__row:hover {
  background: #f8fafc;
}

/* Timeline dots and activity markers use the brand red consistently */
.command-timeline__item > span {
  background: #d7193f;
}

/* Donut centers: tabular figures */
.pa-donut__center strong, .lender-donut .pa-donut__center strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* Focus ring on chart points (keyboard-accessible tooltips) */
.pa-trend-dot:focus-visible, .lender-dot:focus-visible,
.borrower-balance-dot:focus-visible, .pa-chart-column:focus-visible {
  outline: 2px solid #2d63d7;
  outline-offset: 2px;
}

/* ==========================================================================
   18. SaaS-standard canvas: capped, centered content at every viewport
   (Linear/Stripe/Vercel convention: full-width chrome, content column
   capped near 1400-1500px and centered, so ultrawide monitors never
   stretch cards or push widgets apart).
   ========================================================================== */

/* app-content has no full-bleed background, so it gets the cap directly.
   NOTE: padding percentages resolve against the containing block, not the
   element's own width — a "padding centering" trick breaks as soon as the
   element also has a max-width (the page collapses toward 850px on
   ultrawide). A direct max-width + auto margins is the robust form. */
body.authenticated-app .app-content {
  max-width: 1548px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* The topbar and footer keep full-bleed backgrounds, so their inner column
   is created with padding; for full-width elements the percentage resolves
   against their own width, which is exactly right here. */
body.authenticated-app .app-topbar,
body.authenticated-app .app-footer {
  padding-left: max(24px, calc((100% - 1500px) / 2));
  padding-right: max(24px, calc((100% - 1500px) / 2));
}
@media (max-width: 767.98px) {
  body.authenticated-app .app-content {
    padding-left: 12px;
    padding-right: 12px;
  }
  body.authenticated-app .app-topbar,
  body.authenticated-app .app-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   19. Deterministic KPI columns - no orphaned cards
   Dashboards with a fixed six-card strip use explicit column counts with a
   clean collapse ladder; generic KPI sections keep auto-fit with a track
   small enough that six cards share one row on any desktop viewport.
   ========================================================================== */

/* Lender portfolio overview: always six KPIs. */
body .lender-reference .lender-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}
body .pa-dashboard-reference .pa-dash-kpis--reference {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}
@media (max-width: 1280px) {
  body .lender-reference .lender-kpis,
  body .pa-dashboard-reference .pa-dash-kpis--reference {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  body .lender-reference .lender-kpis,
  body .pa-dashboard-reference .pa-dash-kpis--reference {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Generic strips: auto-fit, but with a 150px floor so six cards always
   co-exist on one row at normal desktop widths. */
body.authenticated-app .metric-grid,
body.authenticated-app .command-metrics,
body.authenticated-app .role-metrics,
body.authenticated-app .borrower-metrics,
body.authenticated-app .pa-dash-kpis,
body.authenticated-app .pa-analytics-kpis,
body.platform-admin-app .pa-analytics-kpis {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  grid-auto-rows: 1fr;
}

/* Equal-height siblings in multi-panel rows: rows share the grid track. */
body.authenticated-app .pa-dash-secondary,
body.authenticated-app .lender-secondary-grid,
body.authenticated-app .lender-payment-tables,
body.authenticated-app .pa-dash-bottom {
  align-items: stretch;
}
body.authenticated-app .pa-dash-secondary .pa-panel,
body.authenticated-app .lender-secondary-grid .pa-panel,
body.authenticated-app .lender-payment-tables .pa-panel {
  height: 100%;
}

/* ==========================================================================
   20. Composition fixes
   ========================================================================== */

/* Chart legend: keep series labels separated and swatches aligned. */
body .lender-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 22px;
  row-gap: 6px;
}
body .lender-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
body .lender-chart-legend i {
  flex: 0 0 auto;
}

/* Donut layouts keep a stable footprint on narrow columns. */
body .lender-donut-layout,
body .pa-donut-wrap {
  align-items: center;
}

/* ==========================================================================
   21. Sidebar auto-adjust: rail flyout labels
   ========================================================================== */

/* Fixed-position tooltip naming each destination while the sidebar is
   collapsed to the icon rail (992px-1440px auto-collapse or manual toggle).
   Rendered at body level and positioned from JS so overflow on .app-sidebar
   and .app-side-nav can never clip it. Palette matches the sidebar chrome. */
.app-sidebar-rail-flyout {
  position: fixed;
  z-index: 1080;
  padding: 7px 12px;
  background: #0b1f3a;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(4,19,38,.35);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity .14s ease, transform .14s ease;
  will-change: opacity, transform;
}

.app-sidebar-rail-flyout::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #0b1f3a;
  border-left: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  transform: translateY(-50%) rotate(45deg);
}

.app-sidebar-rail-flyout.is-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar-rail-flyout {
    transition: none;
  }
}