/* =========================================================================
   PersonaFi UI — the shared look (first built for the Forecast tab, Oct 2026)
   Opt in with class="pf-ui" on a page or tab root.

   * Canvas: soft green-grey; content sits on white panels (.pf-panel, or the
     .tab-content under folder tabs).
   * One header pattern: title, one line of description, controls on the
     right (.pf-head). No eyebrow labels.
   * Key figures: a deep-green band (.pf-figures > .pf-figure dt/dd/small).
   * Tables: green-tinted headers in sentence case, right-aligned figures,
     colour only for meaning (negatives red).
   * Type: Manrope for titles and figures, Inter for reading. Brand greens.
   ========================================================================= */
.pf-ui {
  --pf-ink: #1d2939;
  --pf-text: #344054;
  --pf-muted: #667085;
  --pf-line: #e4e7ec;
  --pf-line-strong: #d0d5dd;
  --pf-line-green: #CDEFDB;
  --pf-wash: #F0FDF4;
  --pf-brand: #047857;
  --pf-brand-dark: #065F46;
  --pf-neg: #b42318;
  --pf-pos: #047857;
  --pf-canvas: #ECFDF3;
  --pf-band: #065F46;
  --pf-band-2: #0F766E;
  --pf-head: #D1FAE5;
  --pf-head-text: #065F46;
  --pf-section: #F0FDF4;
  /* legacy names used by the forecast templates */
  --fc-ink: var(--pf-ink); --fc-text: var(--pf-text); --fc-muted: var(--pf-muted); --fc-line: var(--pf-line);
  --fc-line-strong: var(--pf-line-strong); --fc-wash: var(--pf-wash); --fc-brand: var(--pf-brand);
  --fc-brand-dark: var(--pf-brand-dark); --fc-neg: var(--pf-neg); --fc-pos: var(--pf-pos); --fc-canvas: var(--pf-canvas);
  color: var(--pf-text);
  font-variant-numeric: tabular-nums;
  background: var(--pf-canvas);
  border-radius: 1rem;
  padding: 1.5rem 1.5rem 2rem;
}
@media (max-width: 575.98px) { .pf-ui { padding: 1rem .75rem 1.5rem; border-radius: .75rem; } }

/* ---- page title + folder tabs ------------------------------------------- */
.pf-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.pf-top h4 { font-family: Manrope, Inter, sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--pf-ink); margin: 0; }
.pf-top p { color: var(--pf-muted); margin: 0; font-size: .9rem; }

.pf-ui .pf-tabs {
  display: flex; flex-wrap: nowrap; gap: .35rem; overflow-x: auto; scrollbar-width: none;
  border-bottom: 0; margin: 0; padding: 0; list-style: none;
}
.pf-ui .pf-tabs::-webkit-scrollbar { display: none; }
.pf-ui .pf-tabs .nav-link {
  background: none !important; border: 0 !important; padding: .65rem 1.1rem; border-radius: .6rem .6rem 0 0;
  color: #2F6B57 !important; font-weight: 500; font-size: .95rem; white-space: nowrap;
}
.pf-ui .pf-tabs .nav-link:hover { background: rgba(255, 255, 255, .55) !important; color: var(--pf-ink) !important; }
.pf-ui .pf-tabs .nav-link.active { background: #fff !important; color: var(--pf-band) !important; font-weight: 600; box-shadow: inset 0 3px 0 var(--pf-brand); }
.pf-ui .pf-tabs .nav-link:focus-visible { outline: 2px solid var(--pf-brand); outline-offset: 2px; }
.pf-ui .pf-tabs .nav-link:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.pf-ui .pf-tabs .nav-link.active:focus:not(:focus-visible) { box-shadow: inset 0 3px 0 var(--pf-brand); }

/* white panels: under folder tabs (.tab-content) or on their own (.pf-panel) */
.pf-ui .tab-content, .pf-ui .pf-panel {
  background: #fff !important; border: 0 !important; border-radius: .75rem !important; padding: 1.5rem !important;
  box-shadow: 0 1px 2px rgba(16, 40, 30, .06) !important;
}
.pf-ui .pf-tabs + .tab-content { border-top-left-radius: 0 !important; }
.pf-ui .pf-panel + .pf-panel, .pf-ui .pf-panel-gap { margin-top: 1.25rem; }
@media (max-width: 575.98px) {
  .pf-ui .tab-content, .pf-ui .pf-panel { padding: 1rem .85rem !important; }
  .pf-ui .pf-tabs + .tab-content { border-radius: 0 0 .75rem .75rem !important; }
}

/* ---- header: title, one line of description, controls ------------------ */
.pf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.pf-head h5 { font-family: Manrope, Inter, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--pf-ink); margin: 0 0 .25rem; }
.pf-head p { color: var(--pf-muted); font-size: .9rem; margin: 0; max-width: 62ch; line-height: 1.5; }
.pf-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.pf-ui h6, .pf-ui .pf-h { font-family: Manrope, Inter, sans-serif; font-weight: 700; color: var(--pf-ink); }
.pf-ui .pf-sub { color: var(--pf-muted); font-size: .85rem; }

/* ---- key figures: deep-green band --------------------------------------- */
.pf-figures {
  display: flex; flex-wrap: wrap; margin: 0 0 1.5rem; padding: .25rem 1.25rem; color: #fff;
  background: linear-gradient(120deg, var(--pf-band, #065F46), var(--pf-band-2, #0F766E)); border-radius: .75rem;
}
.pf-figure { flex: 1 1 10rem; min-width: 9rem; padding: 1rem 1.25rem 1rem 0; margin-right: 1.25rem; border-right: 1px solid rgba(255, 255, 255, .16); }
.pf-figure:last-child { border-right: 0; margin-right: 0; }
.pf-figure dt { font-weight: 500; font-size: .8rem; color: rgba(255, 255, 255, .72); margin-bottom: .2rem; }
.pf-figure dd { font-family: Manrope, Inter, sans-serif; font-weight: 700; font-size: 1.5rem; color: #fff; margin: 0; line-height: 1.2; }
.pf-figure dd.is-neg { color: #FCA5A5; }
.pf-figure dd.is-pos { color: #86EFAC; }
.pf-figure small { display: block; color: rgba(255, 255, 255, .7); font-size: .78rem; margin-top: .15rem; }
@media (max-width: 575.98px) {
  .pf-figure { flex-basis: 45%; border-right: 0; margin-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .pf-figure:last-child { border-bottom: 0; }
}

/* ---- controls ------------------------------------------------------------ */
.pf-ui label.form-label, .pf-ui .pf-label { font-size: .8rem; font-weight: 500; color: var(--pf-muted); text-transform: none !important; letter-spacing: 0; margin-bottom: .3rem; }
.pf-ui .form-control, .pf-ui .form-select, .pf-ui select.form-control, .pf-ui .custom-select { border-color: var(--pf-line-strong); border-radius: .45rem; color: var(--pf-ink); font-size: .875rem; box-shadow: none; }
.pf-ui .form-control:focus, .pf-ui .form-select:focus { border-color: var(--pf-brand); box-shadow: 0 0 0 3px rgba(4, 120, 87, .18); }
.pf-ui select.form-select, .pf-ui select.form-select-sm {
  /* Bootstrap 4 has no .form-select: same look as inputs */
  display: block; width: 100%; height: calc(1.5em + .75rem + 2px); padding: 0 .6rem; border: 1px solid var(--pf-line-strong); background-color: #fff;
}
.pf-ui .btn { border-radius: .45rem; font-weight: 600; }
.pf-ui .btn-success, .pf-ui .btn-primary { background: var(--pf-brand); border-color: var(--pf-brand); color: #fff; box-shadow: none; }
.pf-ui .btn-success:hover, .pf-ui .btn-primary:hover { background: var(--pf-brand-dark); border-color: var(--pf-brand-dark); color: #fff; }
.pf-ui .btn-outline-success, .pf-ui .btn-outline-secondary, .pf-ui .btn-outline-primary { color: var(--pf-brand); border-color: var(--pf-line-strong); background: #fff; }
.pf-ui .btn-outline-success:hover, .pf-ui .btn-outline-secondary:hover, .pf-ui .btn-outline-primary:hover { color: var(--pf-brand-dark); border-color: var(--pf-brand); background: var(--pf-wash); }
.pf-ui .btn-outline-danger { border-color: #fecdca; color: var(--pf-neg); background: #fff; }
.pf-ui .btn-outline-danger:hover { background: #fef3f2; color: var(--pf-neg); border-color: var(--pf-neg); }
.pf-ui .btn:focus-visible { outline: 2px solid var(--pf-brand); outline-offset: 2px; }

/* segmented control */
.pf-seg { display: inline-flex; padding: 3px; background: var(--pf-canvas, #ECFDF3); border-radius: .6rem; gap: 2px; flex-wrap: wrap; }
.pf-ui .pf-seg .btn, .pf-ui .pf-seg .nav-link {
  border: 0 !important; background: transparent !important; color: var(--pf-muted) !important; border-radius: .45rem !important;
  padding: .35rem .9rem !important; margin: 0 !important; font-weight: 500; font-size: .875rem; box-shadow: none !important;
}
.pf-ui .pf-seg .btn.active, .pf-ui .pf-seg .btn[aria-pressed="true"], .pf-ui .pf-seg .nav-link.active {
  background: #fff !important; color: var(--pf-ink) !important; font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .1) !important;
}

/* ---- tables -------------------------------------------------------------- */
.pf-ui .table { color: var(--pf-text); margin-bottom: 0; font-size: .85rem; }
.pf-ui .table thead th, .pf-ui .report-table thead th {
  background: var(--pf-head) !important; color: var(--pf-head-text) !important; box-shadow: none !important;
  text-transform: none !important; letter-spacing: 0 !important; font-size: .78rem !important; font-weight: 600 !important;
  border: 0 !important; padding: .6rem .75rem; vertical-align: bottom; white-space: nowrap;
}
.pf-ui .table thead tr th:first-child { border-top-left-radius: .5rem; }
.pf-ui .table thead tr th:last-child { border-top-right-radius: .5rem; }
.pf-ui .table tbody td { border-top: 0; border-bottom: 1px solid #f2f4f7; padding: .55rem .75rem; vertical-align: middle; }
.pf-ui .table tbody tr, .pf-ui .report-table tbody tr:nth-of-type(odd), .pf-ui .report-table tbody tr:nth-of-type(even) { --row-bg-color: #fff; background-color: #fff; }
.pf-ui .table-hover tbody tr:hover td, .pf-ui .report-table tbody tr:hover td { background-color: #F3FBF6; }
.pf-ui .text-danger, .pf-ui .num.neg { color: var(--pf-neg) !important; }
.pf-ui .table-responsive { position: relative; }

/* ---- panels, lists, badges, alerts --------------------------------------- */
.pf-ui .card { border: 1px solid var(--pf-line-green) !important; border-radius: .6rem; box-shadow: none !important; background: #fff; }
.pf-ui .card.bg-light, .pf-ui .bg-light, .pf-ui .pf-soft { background: #F6FEF9 !important; border-color: var(--pf-line-green) !important; }
.pf-ui .card.border-success { border-color: var(--pf-brand) !important; }
.pf-ui .list-group-item { border-color: var(--pf-line); background: #fff; }
.pf-ui .badge { font-weight: 600; border-radius: .35rem; }
.pf-ui .pf-pill { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--pf-wash); color: var(--pf-brand-dark); }
.pf-ui .pf-pill.is-warn { background: #fffaeb; color: #93370d; }
.pf-ui .pf-pill.is-neg { background: #fef3f2; color: var(--pf-neg); }
.pf-ui details > summary { font-family: Manrope, Inter, sans-serif; font-weight: 700; color: var(--pf-ink); cursor: pointer; }
.pf-ui .alert-warning { background: #fffaeb; border-color: #fedf89; color: #93370d; }
.pf-ui .alert-info { background: var(--pf-wash); border-color: var(--pf-line-green); color: var(--pf-brand-dark); }
.pf-ui .text-success { color: var(--pf-brand) !important; }

@media (prefers-reduced-motion: reduce) {
  .pf-ui * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---- page-specific touches ------------------------------------------------ */
/* About (dashboard tab and public page): words unchanged, look aligned */
.pf-ui.pf-about { max-width: 1040px; padding: 2rem 2.25rem 2.5rem; }
.pf-ui.pf-about h1 { font-family: Manrope, Inter, sans-serif; font-weight: 700; color: var(--pf-ink); }
.pf-ui.pf-about .section-title { font-family: Manrope, Inter, sans-serif; font-weight: 700; color: var(--pf-ink); margin-top: .5rem; }
.pf-ui.pf-about .text-primary { color: var(--pf-brand) !important; }
.pf-ui.pf-about .text-uppercase { text-transform: none !important; letter-spacing: 0 !important; }
.pf-ui.pf-about h3.h6 { font-family: Manrope, Inter, sans-serif; font-weight: 700; font-size: .95rem; color: var(--pf-ink); }
.pf-ui.pf-about hr { border-color: var(--pf-line-green); margin: 2rem 0; }
.pf-ui.pf-about .card { border: 0 !important; box-shadow: 0 1px 2px rgba(16, 40, 30, .06) !important; }
.pf-ui.pf-about a { color: var(--pf-brand); }
@media (max-width: 575.98px) { .pf-ui.pf-about { padding: 1.25rem 1rem 1.5rem; } }

/* Profile */
.pf-ui.pf-profile { padding: 2rem 2rem 2.25rem; }
.pf-ui.pf-profile .pf-account { background: #fff; border-color: var(--pf-line-green); }
.pf-ui.pf-profile .pf-section-card { border-color: var(--pf-line-green); box-shadow: 0 1px 2px rgba(16, 40, 30, .06); }
@media (max-width: 575.98px) { .pf-ui.pf-profile { padding: 1.25rem 1rem; } }

/* Bank pages */
.pf-ui.pf-conn, .pf-ui.pf-bank { padding-top: 2rem; padding-bottom: 2rem; }
.pf-ui.pf-conn h1, .pf-ui.pf-bank h1 { font-family: Manrope, Inter, sans-serif; font-weight: 700; color: var(--pf-ink); }

/* ---- headline figures: same greens as the top banner, numbers as callouts -- */
.pf-figures {
  background: linear-gradient(135deg, #065F46, #047857 55%, #0F766E);
  padding: .5rem 1.5rem; position: relative; overflow: hidden;
  box-shadow: 0 10px 24px rgba(4, 120, 87, .18);
}
.pf-figures::before { /* the banner's bright green, as a thin accent */
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, #22C55E, #4ADE80);
}
.pf-figure { padding: 1.15rem 1.5rem 1.2rem 0; margin-right: 1.5rem; border-right-color: rgba(255, 255, 255, .14); }
.pf-figure dt { font-size: .78rem; font-weight: 600; color: rgba(236, 253, 243, .78); margin-bottom: .35rem; }
.pf-figure dd {
  font-size: clamp(1.75rem, 1.15rem + 1.3vw, 2.35rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  color: #fff; text-shadow: 0 1px 0 rgba(6, 78, 59, .25);
}
.pf-figure dd.is-pos { color: #86EFAC; }
.pf-figure dd.is-neg { color: #FCA5A5; }
.pf-figure small { margin-top: .35rem; color: rgba(236, 253, 243, .7); }
@media (max-width: 575.98px) { .pf-figure dd { font-size: 1.9rem; } }

/* phones: the dashboard's nested panels each add padding; keep more width for content */
@media (max-width: 575.98px) {
  .dashboard-shell .wide-container > .tab-content.border-top-0 { padding-left: .35rem !important; padding-right: .35rem !important; }
  .dashboard-shell .wide-container { padding-left: .25rem; padding-right: .25rem; }
  .pf-ui { padding-left: .5rem; padding-right: .5rem; }
  .pf-ui .tab-content, .pf-ui .pf-panel { padding: .9rem .6rem !important; }
}