/* =====================================================
   LoanFlow — Main Stylesheet
   ===================================================== */

:root {
  --navy: #0d2b55;
  --gold: #c8a951;
}

/* Layout */
body { font-size: 0.9rem; color: #333; }

.bg-navy { background-color: var(--navy) !important; }
.text-navy { color: var(--navy) !important; }

/* Navbar */
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.8); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active { color: #fff; }

/* Stage badges */
.stage-badge { font-size: 0.75rem; padding: 0.3em 0.65em; border-radius: 20px; font-weight: 600; }
.stage-lead              { background: #e9ecef; color: #495057; }
.stage-application       { background: #cfe2ff; color: #084298; }
.stage-doc_collection    { background: #fff3cd; color: #664d03; }
.stage-processing        { background: #d1ecf1; color: #0c5460; }
.stage-underwriting      { background: #d6d8db; color: #1b1e21; }
.stage-conditional_approval { background: #fde8d8; color: #7c3a00; }
.stage-clear_to_close    { background: #d1e7dd; color: #0a3622; }
.stage-closed            { background: #d3d3d3; color: #333; }
.stage-funded            { background: #c3e6cb; color: #155724; }
.stage-cancelled         { background: #f8d7da; color: #721c24; }
.stage-submitted_to_lender { background: #cfe2ff; color: #052c65; }
/* Denied uses stronger red than cancelled to convey formal adverse action */
.stage-denied            { background: #dc3545; color: #fff; }

/* Document checklist rows */
.doc-row { transition: background 0.15s; }
.doc-row:hover { background: #f8f9fa; }
.doc-missing  { }
.doc-uploaded { background: #fffbf0; }
.doc-verified { background: #f0fff4; }
.doc-rejected { background: #fff5f5; }
.doc-expired  { background: #fff5f5; }

/* Activity feed */
.activity-feed { max-height: 400px; overflow-y: auto; }

/* Cards */
.card { border-radius: 10px; }
.card-header { border-radius: 10px 10px 0 0 !important; }

/* Card header variants — use instead of inline background styles */
.card-header-navy {
  background-color: var(--navy) !important;
  color: #fff;
}
.card-header-light {
  background-color: #f8f9fa !important;
}

/* Tables */
.table > :not(caption) > * > * { padding: 0.6rem 0.75rem; }

/* Buttons */
.btn-primary { background-color: var(--navy); border-color: var(--navy); }
.btn-primary:hover { background-color: #0a2244; border-color: #0a2244; }
.btn-primary:focus-visible { box-shadow: 0 0 0 0.25rem rgba(13,43,85,0.4); }
.btn-outline-primary { color: var(--navy); border-color: var(--navy); }
.btn-outline-primary:hover { background-color: var(--navy); border-color: var(--navy); color: #fff; }

/* Application side nav */
.app-sidenav { border-radius: 10px; overflow: hidden; }
.app-sidenav .list-group-item { border-left: 3px solid transparent; font-size: 0.82rem; }
.app-sidenav .list-group-item.active { background: var(--navy); border-left-color: var(--gold); color: #fff; }
.app-sidenav .list-group-item:not(.active):hover { background: #f0f4ff; }

/* Section headings inside application form */
.section-heading { font-size: 1rem; font-weight: 700; color: var(--navy);
  border-bottom: 2px solid var(--navy); padding-bottom: 0.5rem; margin-bottom: 1.25rem; }

/* Loading overlay — shared across public pages */
.loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.loading-overlay.is-active { display: flex; }
.loading-bars { display: flex; align-items: flex-end; gap: 5px; height: 48px; }
.loading-bars span {
  display: inline-block;
  width: 8px;
  border-radius: 4px;
  background: var(--gold);
  animation: lwave 1s infinite ease-in-out;
}
.loading-bars span:nth-child(1) { height: 28px; animation-delay: 0s; }
.loading-bars span:nth-child(2) { height: 40px; animation-delay: 0.1s; }
.loading-bars span:nth-child(3) { height: 48px; animation-delay: 0.2s; }
.loading-bars span:nth-child(4) { height: 36px; animation-delay: 0.3s; }
.loading-bars span:nth-child(5) { height: 24px; animation-delay: 0.15s; }
@keyframes lwave {
  0%, 60%, 100% { transform: scaleY(0.6); opacity: 0.7; }
  30% { transform: scaleY(1.1); opacity: 1; }
}

/* Rescan spin animation */
@keyframes spin { to { transform: rotate(360deg); } }
.spin-icon { display: inline-block; animation: spin 1s linear infinite; }

/* =====================================================
   Docs page — rendered Markdown content
   ===================================================== */
.docs-content h1, .docs-content h2, .docs-content h3 {
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
}
.docs-content h1 { font-size: 1.5rem; border-bottom: 2px solid #e9ecef; padding-bottom: 0.4rem; }
.docs-content h2 { font-size: 1.2rem; border-bottom: 1px solid #e9ecef; padding-bottom: 0.3rem; }
.docs-content h3 { font-size: 1rem; }
.docs-content table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.9rem; }
.docs-content table th { background: #f8f9fa; border: 1px solid #dee2e6; padding: 0.4rem 0.75rem; text-align: left; font-weight: 600; }
.docs-content table td { border: 1px solid #dee2e6; padding: 0.4rem 0.75rem; vertical-align: top; }
.docs-content table tr:nth-child(even) td { background: #f8f9fa; }
.docs-content code { background: #f1f3f5; padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.88em; color: #c0392b; }
.docs-content pre { background: #1e2127; color: #abb2bf; padding: 1rem; border-radius: 6px; overflow-x: auto; font-size: 0.85rem; }
.docs-content pre code { background: none; color: inherit; padding: 0; }
.docs-content blockquote { border-left: 4px solid var(--navy); padding: 0.5rem 1rem; background: #eaf0fb; border-radius: 0 4px 4px 0; margin: 1rem 0; }
.docs-content ul, .docs-content ol { padding-left: 1.4rem; }
.docs-content li { margin-bottom: 0.25rem; }
.docs-content a { color: var(--navy); }

/* Social proof strip — used on public home page */
.social-proof-strip { background: #f8f9fa; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; }

/* Error page number display */
.error-code { font-size: 5rem; line-height: 1; color: var(--navy); font-weight: 700; }

/* Realtor portal milestone rows */
.milestone-row { padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0; }
.milestone-row:last-child { border-bottom: none; }
.milestone-label { font-weight: 600; color: #555; }
.milestone-value { color: var(--navy); font-weight: 500; }

/* Public nav brand icon accessibility */
.navbar-brand .bi { display: inline-block; }

/* Responsive tweaks */
@media (max-width: 576px) {
  .container-fluid { padding: 1rem; }
}

/* =====================================================
   Utility classes — replaces scattered inline styles
   ===================================================== */

/* Icon container — fixed width so icons align in rows */
.icon-col-sm { width: 20px; flex-shrink: 0; }
.icon-col-md { width: 24px; flex-shrink: 0; }

/* Step circles — used on borrower dashboard empty state */
.step-circle {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
}
.step-circle-primary { background-color: var(--navy); }
.step-circle-secondary { background-color: #6c757d; }

/* Small badge font sizes — avoids repetitive inline style="font-size:..." */
.badge-xs { font-size: 0.6rem !important; }
.badge-sm { font-size: 0.65rem !important; }

/* Tiny text utilities */
.text-xs   { font-size: 0.70rem !important; }
.text-xxs  { font-size: 0.65rem !important; }

/* Review queue offcanvas fixed width */
.offcanvas-review-queue { width: 420px; max-width: 100vw; }

/* Audit log table — monospaced tiny cells */
.audit-timestamp { font-size: 0.75rem; }
.audit-event     { font-size: 0.75rem; }
.audit-ip        { font-size: 0.70rem; }
.audit-badge     { font-size: 0.70rem !important; }
.audit-detail-btn { font-size: 0.75rem; }
.audit-detail-pre {
  font-size: 0.70rem;
  white-space: pre-wrap;
}

/* Readiness gate rows inside loan detail sidebar */
.gate-icon { font-size: 1rem; min-width: 18px; }
.gate-body  { min-width: 0; }
.gate-missing-list { font-size: 0.7rem; }
.gate-badge { font-size: 0.65rem !important; }

/* Audit log link inside card header */
.card-header-link { font-size: 0.8rem; }

/* Document row sub-text */
.doc-subtext { font-size: 0.75rem; }

/* Activity log timestamp */
.activity-ts { font-size: 0.72rem; }

/* Inline state-field uppercase */
.input-uppercase { text-transform: uppercase; }

/* Form cards with constrained width — admin forms */
.form-card-lg { max-width: 640px; }

/* Loan overview — action-needed left-accent card */
.card-accent-warning {
  border-left: 4px solid var(--gold) !important;
}

/* Pipeline — borrower portal status badges (tiny) */
.borrower-status-badge { font-size: 0.6rem !important; }

/* Pipeline — completion column minimum width */
.col-completion { min-width: 120px; }

/* Realtor portal */
body.realtor-portal { background: #f5f7fa; }

/* Public home page */
.hero { background: linear-gradient(135deg, var(--navy) 0%, #1a4a8a 100%); }
.step-circle-home {
  width: 40px; height: 40px; border-radius: 50%;
  background: #e8f0fe;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
  color: var(--navy); flex-shrink: 0;
}
.trust-bar { background: #fff; border-bottom: 1px solid #dee2e6; }
.trust-bar .trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: #555; font-weight: 500;
}
.loan-type-card {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  padding: 10px 12px;
}
.loan-type-card:hover { border-color: #0d6efd; background: #f0f7ff; }
.loan-type-card.selected { border-color: #0d6efd; background: #e8f0fe; }
.loan-type-card input[type=radio] { display: none; }

/* Rate results page */
.filter-sidebar {
  width: 200px; min-width: 200px; background: #fff;
  border-right: 1px solid #dee2e6; padding: 16px;
  position: sticky; top: 56px;
  max-height: calc(100vh - 56px); overflow-y: auto;
}
.filter-sidebar .form-label { font-size: 0.75rem; font-weight: 600; margin-bottom: 2px; }
.filter-sidebar .form-control,
.filter-sidebar .form-select { font-size: 0.78rem; padding: 4px 8px; }
.results-area { flex: 1; padding: 16px; min-width: 0; }
.quote-title {
  background: #fff; border-bottom: 1px solid #dee2e6;
  padding: 12px 16px; margin: -16px -16px 16px;
}
.quote-title h4 { color: var(--navy); font-weight: 700; margin: 0; }
.quote-subtitle { color: #dc3545; font-size: 0.82rem; font-weight: 600; }
.rate-section {
  background: #fff; border: 1px solid #c8d6e5;
  border-radius: 6px; margin-bottom: 20px; overflow: hidden;
}
.rate-section-header {
  background: var(--navy); color: #fff; padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.9rem; font-weight: 600;
}
.rate-section-header .btn-compare-hdr {
  background: var(--gold); color: #000; border: none;
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 3px; cursor: pointer;
}
.rate-section-header .btn-compare-hdr:hover { background: #b8952e; }
.rate-section-header .btn-apply-hdr {
  background: #dc3545; color: #fff; border: none;
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 3px; cursor: pointer;
  text-decoration: none;
}
.rate-section-header .btn-apply-hdr:hover { background: #bb2d3b; }
.rate-table { margin: 0; font-size: 0.82rem; }
.rate-table th {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--navy); background: #eaf0f6;
  border-bottom: 2px solid #c8d6e5; padding: 8px 12px;
}
.rate-table td { padding: 7px 12px; vertical-align: middle; border-bottom: 1px solid #e9ecef; }
.rate-table tbody tr:hover { background: #f0f7ff; }
.rate-table tbody tr:last-child td { border-bottom: none; }
.par-row td:nth-child(2) { font-weight: 700; color: var(--navy); font-size: 0.9rem; }
.view-link { color: var(--navy); font-style: italic; font-size: 0.8rem; text-decoration: none; }
.view-link:hover { text-decoration: underline; }
.compare-check { cursor: pointer; }
.pts-positive { color: #dc3545; }
.pts-negative { color: #198754; }
.pts-zero { color: #888; }
#compareFloat {
  display: none; position: fixed; bottom: 28px; right: 28px;
  z-index: 500; align-items: center; gap: 6px;
}
#compareFloat.is-active { display: flex; }
#detailModal .modal-content { border-radius: 8px; }
.detail-modal-dialog { max-width: 900px; }
.scenario-sidebar {
  width: 220px; min-width: 220px; background: #f8f9fa;
  border-right: 1px solid #dee2e6; padding: 20px 16px; overflow-y: auto;
}
.scenario-sidebar dt { font-size: 0.72rem; color: #888; margin-bottom: 1px; margin-top: 8px; }
.scenario-sidebar dd { font-size: 0.82rem; color: #222; margin: 0; font-weight: 600; }
.detail-main { flex: 1; padding: 24px; overflow-y: auto; }
.detail-rate-line { color: var(--navy); font-weight: 600; font-size: 0.9rem; }
.detail-payment { font-size: 1.2rem; font-weight: 700; color: var(--navy); }
.fee-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.8rem; }
.fee-line.indent { padding-left: 16px; color: #555; }
.fee-line .fee-val { font-weight: 500; }
.fee-line .fee-val.credit { color: #198754; }
.fee-total {
  display: flex; justify-content: space-between; padding: 8px 0;
  font-weight: 700; border-top: 2px solid var(--navy);
  margin-top: 4px; color: var(--navy);
}
.detail-notice { font-size: 0.75rem; color: #555; line-height: 1.5; }
.nav-underline .nav-link { font-size: 0.82rem; color: #555; padding: 6px 14px; }
.nav-underline .nav-link.active { color: var(--navy); font-weight: 700; border-bottom: 2px solid var(--navy); }
.compare-table th { background: var(--navy); color: #fff; font-size: 0.78rem; text-align: center; }
.compare-table th span { font-size: 0.75rem; font-weight: 400; }
.compare-table td { font-size: 0.82rem; text-align: center; }
.breakeven-box { background: #f0fff4; border: 1px solid #c3e6cb; border-radius: 4px; padding: 12px 16px; font-size: 0.82rem; }
.disclaimer { font-size: 0.7rem; color: #999; line-height: 1.5; border-top: 1px solid #dee2e6; margin-top: 8px; padding-top: 8px; }
#filterOverlay {
  display: none; position: fixed; inset: 0;
  background: rgba(13,43,85,0.6);
  z-index: 9999; justify-content: center; align-items: center;
  flex-direction: column; gap: 12px;
}
#filterOverlay.is-active { display: flex; }
#filterOverlay .spinner-border { width: 3rem; height: 3rem; color: var(--gold); border-width: 4px; }
#filterOverlay span { color: #fff; font-weight: 600; font-size: 0.95rem; letter-spacing: .03em; }
@media (max-width: 767px) {
  .filter-sidebar {
    display: block !important; width: 100%; min-width: 0;
    position: static; max-height: none;
    border-right: none; border-bottom: 1px solid #dee2e6;
  }
}

/* Portal upload page */
.portal-header { background-color: var(--navy); color: #fff; padding: 1.25rem 0; }
.portal-brand { font-size: 1.3rem; font-weight: 700; color: #fff; }
.portal-brand .bi { color: var(--gold); }
.doc-card { border-left: 4px solid #dee2e6; }
.doc-card.status-missing  { border-left-color: #adb5bd; }
.doc-card.status-uploaded { border-left-color: #ffc107; }
.doc-card.status-verified { border-left-color: #198754; }
.doc-card.status-rejected { border-left-color: #dc3545; }
.doc-card.status-expired  { border-left-color: #dc3545; }
.upload-zone {
  border: 2px dashed #dee2e6; border-radius: 8px; padding: 1rem;
  text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.upload-zone:hover, .upload-zone:focus-within {
  border-color: var(--navy); background: #f0f4ff;
}
.upload-zone input[type=file] { display: none; }

/* Rate results page — mobile sticky CTA bar */
.mobile-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
  background: var(--navy); padding: 12px 16px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
}
@media (max-width: 767px) {
  .mobile-cta-bar { display: flex; align-items: center; gap: 10px; }
  .results-area { padding-bottom: 80px; }
}

/* Borrower document upload — constrained file input */
.file-input-sm { max-width: 220px; }

/* Auth login page */
.login-card { max-width: 420px; width: 100%; }
.brand-logo { font-size: 1.8rem; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.brand-logo .bi { color: var(--gold); }

/* LOX preview box in processing overview */
.lox-preview-pre {
  white-space: pre-wrap;
  max-height: 280px;
  overflow-y: auto;
  font-size: 0.78rem;
}

/* Application sidenav — sticky top offset clears fixed navbar */
.sidenav-sticky { position: sticky; top: 80px; }

/* Application sidenav icon — fixed width for alignment */
.nav-status-icon { min-width: 16px; flex-shrink: 0; }

/* Docs sidebar — fixed width icon container */
.nav-icon-sm { width: 14px; flex-shrink: 0; }

/* Docs nav category label */
.docs-nav-category { font-size: 0.7rem; letter-spacing: 0.08em; }

/* Review queue full-page — scan badge container */
.review-scan-dot { width: 20px; flex-shrink: 0; }

/* Realtor portal — constrained content width */
.realtor-portal-body { max-width: 800px; }

/* Portal upload page — slightly narrower constrained width */
.portal-body { max-width: 720px; }

/* Address section — constrained input group */
.input-group-sm-w { max-width: 200px; }

/* Gold badge — used on public home page hero */
.badge-gold { background: var(--gold) !important; color: #1a1a1a !important; }

/* News feed cards — JS-generated title text */
.news-title { font-size: 0.9rem; }

/* Application document checklist inside borrower app — category section header */
.doc-category-label { font-size: 0.7rem; letter-spacing: 0.05em; }

/* Application — autosave indicator (JS-controlled, complex compound style) */
.autosave-indicator {
  z-index: 1055;
  opacity: 0;
  transition: opacity 0.3s;
  background: #fff;
  border: 1px solid #dee2e6;
}

/* Rate results — sticky navbar z-index (prevents sidebar from overlapping) */
.navbar-sticky-rate { z-index: 400; }

/* Rate results — full-height content wrapper */
.rate-results-wrapper { min-height: calc(100vh - 56px); }

/* Rate results — next-step accent card */
.card-accent-navy {
  border-left: 4px solid var(--navy) !important;
  border-radius: 4px;
}

/* Loan overview — doc status icon column (slightly narrower than icon-col-md) */
.icon-col-xs { width: 20px; flex-shrink: 0; }

/* Flexbox min-width fix — prevents overflow in flex children with text-truncate */
.min-width-0 { min-width: 0; }

/* Review queue offcanvas — truncated filename column max-width */
.rq-filename-col { max-width: 200px; }

/* Denied loan — loan detail banner left-accent for visual weight */
.alert-denied-accent {
  border-left: 5px solid #9b1c1c !important;
}

/* Adverse action checklist — numbered step circles */
.adverse-step-circle {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.1rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}
.adverse-step-circle-danger   { background-color: #dc3545; }
.adverse-step-circle-secondary { background-color: #6c757d; }

/* Letter panel — sub-text date/meta line (replaces inline style="font-size:0.75rem") */
.letter-item-meta { font-size: 0.75rem; }

/* Letter panel — revocation reason line (replaces inline style="font-size:0.7rem") */
.letter-revoke-reason { font-size: 0.7rem; }

/* Letter templates table — body preview column (replaces inline style with font-size+max-width+truncation) */
.letter-tpl-preview { max-width: 32ch; }

/* Letter template editor — placeholder chip buttons (monospace, small) */
.placeholder-chip { font-size: 0.75rem; font-family: var(--bs-font-monospace, monospace); }

/* Military service section — VA context fieldset reset */
.military-fieldset { border: none; padding: 0; margin: 0; }
.military-fieldset legend { font-size: inherit; }

/* Gate card — ready state icon pulse (subtle) */
.gate-icon.text-success { filter: none; }

/* Submission package gate icon — distinct from generic send */
.gate-icon.bi-file-earmark-zip { color: #6f42c1; }
.gate-icon.bi-file-earmark-zip.text-success { color: #198754 !important; filter: none; }