/* Continuum PFP brand stylesheet v2 (29 Oct 2026)
   Upload: IO > Organisation > Applications & Brands > pfp > Customise >
   Advanced > Stylesheet Resource URL. Replaces the old brand.css
   (#fdc200 / #29373e, selectors from the retired PFP UI).

   Palette (brand guide, section 03):
   Amber #F0AB00 · Dark #282728 · Grey #75787B
   Orange #D86633 · Blue #0B4D8B · Green #5D772F

   Limits: each dashboard card is a web component with shadow DOM.
   This file can only reach the card frame (.widget), page background,
   header/footer and the --color-plus / --color-minus / --color-networth
   variables. Icons, buttons, the green "All caught up" tick, the goals
   star and the card font are set inside the components and cannot be
   changed from here. The !important on the variables is needed because
   the dashboard app CSS declares them on :root after this file loads.
*/

:root {
  --color-plus: #5D772F !important;
  --color-minus: #D86633 !important;
  --color-networth: #0B4D8B !important;
  --cfs-amber: #F0AB00;
  --cfs-dark: #282728;
  --cfs-line: #E4E4E5;
  --cfs-page: #F5F5F4;
}

/* Header and footer rules: neutral line instead of amber */
.border-bottom.border-primary,
footer.border-top.border-primary {
  border-color: var(--cfs-line) !important;
}

/* Page background: flat light grey so white cards stand out */
.background {
  background: var(--cfs-page) !important;
}

/* Cards: neutral border, soft shadow, slim amber accent on top */
.widget.border-primary {
  border: 1px solid var(--cfs-line) !important;
  border-top: 3px solid var(--cfs-amber) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(40, 39, 40, .05), 0 6px 20px rgba(40, 39, 40, .06) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}

.widget.border-primary:hover {
  box-shadow: 0 2px 4px rgba(40, 39, 40, .06), 0 12px 28px rgba(40, 39, 40, .10) !important;
  transform: translateY(-2px);
}

/* Links: dark text (amber text on white is too low contrast).
   Underline only links inside text and the footer, not tabs or list rows. */
a:not(.btn):not(.nav-link) {
  color: var(--cfs-dark);
}

p a,
footer a {
  text-decoration: underline;
  text-decoration-color: var(--cfs-amber);
  text-underline-offset: 3px;
}

/* ---------- Inner pages (documents, portfolio, messages, tasks, goals,
   insights, settings, profile). These pages are plain DOM, not shadow DOM,
   so everything here is reachable. ---------- */

/* Dark 1px rules and panel borders become a neutral line */
.border-primary:not(.rounded-circle):not(.widget) {
  border-color: var(--cfs-line) !important;
}

/* Content panels: same treatment as the dashboard cards */
.rounded-30.border-primary {
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(40, 39, 40, .05), 0 6px 20px rgba(40, 39, 40, .06) !important;
}

/* Tabs above panels: neutral outline, amber marker on the active tab */
.nav-tabs .nav-link.active {
  border-color: var(--cfs-line) var(--cfs-line) #fff !important;
  box-shadow: inset 0 3px 0 var(--cfs-amber);
}

/* Ringed icons and avatars (page titles, profile sections, adviser photo):
   amber ring, echoing the circle in the Continuum logo */
.rounded-circle.border-primary {
  border-color: var(--cfs-amber) !important;
}

/* Profile section tiles: progress ring in amber on a light track
   (was a heavy dark double ring) */
.pie-tile svg circle:first-child {
  stroke: var(--cfs-line) !important;
}

.pie-tile svg circle:last-child {
  stroke: var(--cfs-amber) !important;
}