/**
 * AFP Funds — Fund Explorer & Fund Detail
 * Aligned to the GWS / AFP design tokens (defined in afp_data.css :root,
 * which is preloaded on every page). Navy + slate, hairline structure,
 * tabular figures, restrained motion.
 */

/* ============================================================
   FUND EXPLORER
   ============================================================ */

/* Filters — transparent panel; no card chrome so collapse/expand has
   nothing visible to "shake". The toggle sits inline with the search. */
.afp-filters { margin-bottom: 1rem; }

/* Bar uses flex with the button anchored to the right. Search input lives
   to its left and is the only element that animates — the toggle button
   stays at the same x position whether collapsed or expanded. */
.afp-filters-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}
.afp-filters-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  opacity: 1;
  transition:
    max-width 280ms var(--ease),
    flex-basis 280ms var(--ease),
    opacity 180ms var(--ease) 60ms,
    margin-right 240ms var(--ease);
}
.afp-filters.is-collapsed .afp-filters-search {
  max-width: 0;
  flex: 0 1 0;
  margin-right: -0.55rem; /* absorb the gap so the button doesn't shift */
  opacity: 0;
  pointer-events: none;
  transition:
    max-width 240ms var(--ease),
    flex-basis 240ms var(--ease),
    opacity 140ms var(--ease),
    margin-right 240ms var(--ease);
}

/* Compact, square icon buttons used in the filters bar (toggle, export).
   Single shared visual so the buttons match in size and feel. */
.afp-filters-iconbtn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem;
  background: #fff;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  color: hsl(var(--primary, 210 29% 24%));
  border-radius: var(--radius-sm, 7px);
  cursor: pointer;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), box-shadow 150ms var(--ease), color 150ms var(--ease);
}
.afp-filters-iconbtn:hover {
  border-color: hsl(var(--primary, 210 29% 24%));
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.afp-filters-iconbtn svg { width: 1.05rem; height: 1.05rem; }
/* Collapsed-state cue for the filters toggle specifically. */
.afp-filters.is-collapsed #fundsFiltersToggle {
  background: hsl(var(--primary, 210 29% 24%));
  border-color: hsl(var(--primary, 210 29% 24%));
  color: #fff;
}

/* Smooth height animation using grid-template-rows (no max-height jitter,
   no leftover white box, no "bad" intermediate state). */
.afp-filters-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 220ms var(--ease), opacity 180ms var(--ease), margin-top 220ms var(--ease);
  opacity: 1;
  margin-top: 0.75rem;
}
.afp-filters-body-inner {
  /* overflow: visible so multi-select dropdown panels can extend below
     the filter area. Clipping is done at .afp-filters-body during the
     collapse animation instead (its 0fr grid track does the trick). */
  overflow: visible;
  min-height: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.afp-filters.is-collapsed .afp-filters-body {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
  overflow: hidden;  /* clip during the collapse to keep it clean */
}

.afp-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.afp-filters-check { padding-left: 1.65rem; }

/* Celular (<768px — ver _breakpoints.css) */
@media (max-width: 767.98px) {
  .afp-filters-grid { grid-template-columns: 1fr 1fr; }
}

/* ----- Multi-select dropdown ----- */
.afp-multi { position: relative; }
.afp-multi-trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  width: 100%; height: 2.15rem;
  padding: 0 0.65rem;
  background: #fff;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: var(--radius-sm, 7px);
  color: hsl(var(--ink, 217 33% 17%));
  font-size: 0.82rem; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.afp-multi-trigger:hover { border-color: hsl(var(--primary, 210 29% 24%) / 0.6); }
.afp-multi.is-open .afp-multi-trigger,
.afp-multi-trigger:focus {
  border-color: hsl(var(--primary, 210 29% 24%));
  box-shadow: 0 0 0 3px hsl(var(--primary, 210 29% 24%) / 0.12);
  outline: none;
}
.afp-multi.has-selection .afp-multi-trigger {
  /* Selected state keeps a white background; just the border + count
     text turn navy as the cue. */
  border-color: hsl(var(--primary, 210 29% 24%));
  background: #fff;
}
.afp-multi-trigger-label { font-weight: 600; }
.afp-multi-trigger-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  font-weight: 600;
}
.afp-multi.has-selection .afp-multi-trigger-count {
  color: hsl(var(--primary, 210 29% 24%));
}
.afp-multi-trigger-chev {
  width: 0.7rem; height: 0.7rem;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  transition: transform 180ms var(--ease);
}
.afp-multi.is-open .afp-multi-trigger-chev { transform: rotate(180deg); }

.afp-multi-panel {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-height: 18rem;
  padding: 0.35rem 0;
  background: #fff;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: var(--radius-sm, 7px);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
  overflow-y: auto;
  z-index: 30;
}
.afp-multi-group-label {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  padding: 0.5rem 0.85rem 0.25rem;
}
.afp-multi-option {
  display: flex; align-items: center;
  padding: 0.4rem 0.75rem;
  margin: 0.1rem 0.35rem;
  font-size: 0.84rem;
  color: hsl(var(--ink, 217 33% 17%));
  cursor: pointer;
  user-select: none;
  border-radius: 5px;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
/* Checkbox hidden visually but kept in the DOM so the form still
   submits its value and accessibility tools can read state. */
.afp-multi-option input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.afp-multi-option:hover { background: hsl(var(--background, 210 20% 98%)); }
.afp-multi-option:has(input:checked) {
  background: hsl(var(--primary, 210 29% 24%));
  color: #fff;
  font-weight: 600;
}
.afp-multi-option:has(input:checked):hover {
  background: hsl(var(--primary-deep, 210 35% 18%));
}

/* ----- Load more ----- */
.afp-loadmore-wrap {
  display: flex; justify-content: center;
  margin: 1.25rem 0 0.5rem;
}
.afp-loadmore-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.4rem;
  background: #fff;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: 999px;
  color: hsl(var(--primary, 210 29% 24%));
  font-size: 0.84rem; font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.afp-loadmore-btn:hover {
  background: hsl(var(--primary, 210 29% 24%));
  color: #fff;
  border-color: hsl(var(--primary, 210 29% 24%));
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.18);
}
.afp-loadmore-btn svg { width: 0.9rem; height: 0.9rem; transition: transform 220ms var(--ease); }
.afp-loadmore-btn:hover svg { transform: translateY(2px); }
.afp-loadmore-btn.is-loading { opacity: 0.65; pointer-events: none; }
.afp-loadmore-btn.is-loading svg { animation: afp-spin 800ms linear infinite; }
@keyframes afp-spin { to { transform: rotate(360deg); } }

.afp-funds-summary {
  text-align: center;
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  font-variant-numeric: tabular-nums;
}

/* ----- Anti-flicker on filter refresh ----- */
/* The table card briefly dims while the partial AJAX is in flight. No
   content swap, just a subtle opacity fade so the user sees the change
   is happening without anything jumping. */
.afp-funds-table-card {
  /* Paint the entire card navy and let everything inside cascade through
     as transparent, except the actual data cells which are white. Any
     subpixel gap, border, or padding leftover ends up navy automatically. */
  background-color: hsl(var(--primary, 210 29% 24%)) !important;
  border: 1px solid hsl(var(--primary, 210 29% 24%)) !important;
  box-shadow: none !important;
  transition: opacity 180ms var(--ease);
}
.afp-funds-table-card .afp-card-content,
.afp-funds-table-card .table-responsive,
.afp-funds-table-card .funds-table {
  background-color: transparent !important;
}
.afp-funds-table-card .afp-card-content { padding: 0 !important; }
.afp-funds-table-card .funds-table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}
.afp-funds-table-card .funds-table thead th {
  background-color: hsl(var(--primary, 210 29% 24%)) !important;
}
.afp-funds-table-card .funds-table tbody,
.afp-funds-table-card .funds-table tbody tr,
.afp-funds-table-card .funds-table tbody td {
  background-color: #fff !important;
}
/* Kill the 1px light-gray border Bootstrap renders on tbody's first row
   via --bs-table-border-color — that's the thin strip between the navy
   header and the table rows. */
.funds-table tbody tr:first-child td { border-top: 0 !important; }
.afp-funds-table-card.is-loading { opacity: 0.55; }

/* Small NAV-source date shown under the price in the fund detail
   validation table (transparency about which day the NAV came from
   when the calendar month-end was a weekend/holiday). */
.afp-nav-src-date {
  display: block;
  font-size: 0.62rem;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 0.1rem;
  font-variant-numeric: tabular-nums;
}

/* Row-level fade animations for AJAX diff updates. Short and asymmetric:
   incoming rows fade in (visible cue), outgoing ones drop without delay
   (the JS removes them on the next frame, the opacity is just a hint). */
.funds-table tbody tr.afp-row {
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}
.funds-table tbody tr.afp-row.is-entering {
  opacity: 0;
  transform: translateY(-2px);
}
.funds-table tbody tr.afp-row.is-leaving {
  opacity: 0;
}

/* Search + filters card inherits .afp-card; refine the controls inside */
.afp-funds-container .form-control,
.afp-funds-container .form-select {
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: var(--radius-sm, 7px);
  font-size: 0.85rem;
  color: hsl(var(--ink, 217 33% 17%));
  transition: border-color 150ms var(--ease, ease), box-shadow 150ms var(--ease, ease);
}
.afp-funds-container .form-control::placeholder { color: hsl(215 16% 60%); }
.afp-funds-container .form-control:focus,
.afp-funds-container .form-select:focus {
  border-color: hsl(var(--primary, 210 29% 24%));
  box-shadow: 0 0 0 3px hsl(var(--primary, 210 29% 24%) / 0.12);
  outline: none;
}

.afp-funds-container .input-group .btn-primary {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Buttons → navy / slate */
.afp-funds-container .btn-primary {
  background: hsl(var(--primary, 210 29% 24%));
  border-color: hsl(var(--primary, 210 29% 24%));
  font-weight: 600;
}
.afp-funds-container .btn-primary:hover {
  background: hsl(var(--primary-deep, 210 30% 17%));
  border-color: hsl(var(--primary-deep, 210 30% 17%));
}
.afp-funds-container .btn-outline-primary {
  color: hsl(var(--primary, 210 29% 24%));
  border-color: hsl(var(--primary, 210 29% 24%));
  font-weight: 600;
}
.afp-funds-container .btn-outline-primary:hover {
  background: hsl(var(--primary, 210 29% 24%));
  border-color: hsl(var(--primary, 210 29% 24%));
  color: #fff;
}
.afp-funds-container .btn-outline-secondary {
  color: hsl(var(--muted-foreground, 215 16% 47%));
  border-color: hsl(var(--border-strong, 213 27% 84%));
  font-weight: 600;
}
.afp-funds-container .btn-outline-secondary:hover {
  background: hsl(var(--background, 210 20% 98%));
  border-color: hsl(var(--border-strong, 213 27% 84%));
  color: hsl(var(--ink, 217 33% 17%));
}
.afp-funds-container .btn:active { transform: scale(0.97); }

.afp-funds-container .form-check-input:checked {
  background-color: hsl(var(--primary, 210 29% 24%));
  border-color: hsl(var(--primary, 210 29% 24%));
}
.afp-funds-container .form-check-input:focus {
  border-color: hsl(var(--primary, 210 29% 24%));
  box-shadow: 0 0 0 3px hsl(var(--primary, 210 29% 24%) / 0.12);
}
.afp-funds-container .form-check-label { font-size: 0.82rem; color: hsl(var(--muted-foreground, 215 16% 47%)); }

/* Results summary line */
.afp-funds-container .text-muted { color: hsl(var(--muted-foreground, 215 16% 47%)) !important; }

/* ── Clean financial table ───────────────────────────────── */
.funds-table {
  --bs-table-bg: transparent;
  --bs-table-color: hsl(var(--ink, 217 33% 17%));
  --bs-table-hover-bg: hsl(var(--background, 210 20% 98%));
  --bs-table-hover-color: inherit;
  --bs-table-border-color: hsl(var(--border, 214 32% 91%));
  width: 100%;
  margin: 0;
  font-size: 0.85rem;
}

/* Override Bootstrap's --bs-table-color for the header row so text is
   actually white. Bootstrap's `.table > :not(caption) > * > *` rule has
   higher specificity than `.funds-table thead th`, so a plain `color`
   declaration loses; setting the variable wins because Bootstrap reads
   the variable in its own selector. */
.funds-table thead {
  --bs-table-color: #fff;
  --bs-table-bg: hsl(var(--primary, 210 29% 24%));
  --bs-table-border-color: transparent;
}
.funds-table thead th {
  background-color: hsl(var(--primary, 210 29% 24%));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.75rem 1rem;
  border: 0 !important;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: none;
}
.funds-table thead tr { border: 0; }

.funds-table tbody td {
  padding: 0.7rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid hsl(var(--border, 214 32% 91%));
  color: hsl(var(--ink, 217 33% 17%));
  font-variant-numeric: tabular-nums;
}
.funds-table tbody tr:last-child td { border-bottom: none; }
.funds-table tbody tr { transition: background-color 150ms var(--ease, ease); }

.funds-table tbody tr.text-muted td { color: hsl(var(--muted-foreground, 215 16% 47%)); }

/* Sort links — entire cell clickable, clear up/down indicator at all times. */
.funds-table thead th .sort-link,
.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  transition: opacity 150ms var(--ease, ease);
}
.sort-link:hover,
.sort-link:focus { color: #fff !important; text-decoration: none; opacity: 0.85; }
.sort-link span { color: inherit; }
/* SVG sort glyph — always visible. Stays neutral when the column isn't
   the active sort; flips and brightens when it is. */
.sort-icon {
  width: 0.7rem; height: 0.7rem;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 150ms var(--ease, ease), transform 150ms var(--ease, ease);
}
.sort-link.is-active .sort-icon { opacity: 1; }
.sort-link.is-active.is-desc .sort-icon { transform: rotate(180deg); }

/* No extra accent on the active sort column — keeps the header clean
   and avoids any white outline sticking out beneath the navy. */
.funds-table thead th.is-sorted { box-shadow: none; }

/* Fund name link */
.fund-name-link {
  color: hsl(var(--ink, 217 33% 17%));
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms var(--ease, ease);
}
.fund-name-link:hover { color: hsl(var(--primary, 210 29% 24%)); text-decoration: underline; }

/* Flow direction colours */
.funds-table .text-success { color: hsl(var(--chart-2, 160 84% 39%)) !important; }
.funds-table .text-danger { color: hsl(var(--chart-3, 0 84% 60%)) !important; }

/* Inactive badge */
.funds-table .badge.bg-secondary {
  background: hsl(210 24% 93%) !important;
  color: hsl(210 25% 38%);
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Pagination → navy ───────────────────────────────────── */
.pagination { gap: 0.25rem; }
.afp-funds-container .pagination .page-link {
  border: 1px solid hsl(var(--border, 214 32% 91%));
  color: hsl(var(--ink, 217 33% 17%));
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm, 7px);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 150ms var(--ease, ease), border-color 150ms var(--ease, ease), color 150ms var(--ease, ease);
}
.afp-funds-container .pagination .page-link:hover {
  background: hsl(var(--background, 210 20% 98%));
  border-color: hsl(var(--primary, 210 29% 24%));
  color: hsl(var(--primary, 210 29% 24%));
}
.afp-funds-container .pagination .page-item.active .page-link {
  background: hsl(var(--primary, 210 29% 24%));
  border-color: hsl(var(--primary, 210 29% 24%));
  color: #fff;
}
.afp-funds-container .pagination .page-item.disabled .page-link {
  color: hsl(215 16% 65%);
  background: hsl(var(--background, 210 20% 98%));
  border-color: hsl(var(--border, 214 32% 91%));
}

/* ============================================================
   FUND DETAIL (aligned colours; refine if redesigned later)
   ============================================================ */
.afp-fund-detail-container .card {
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
}
.afp-fund-detail-container .card-header {
  background: #fafbfc;
  border-bottom: 1px solid hsl(var(--border, 214 32% 91%));
  font-weight: 600;
  padding: 1rem 1.5rem;
}
.afp-fund-detail-container .metric-value { font-size: 1.5rem; font-weight: 700; color: hsl(var(--ink, 217 33% 17%)); font-variant-numeric: tabular-nums; }
.afp-fund-detail-container .metric-label {
  font-size: 0.72rem; color: hsl(var(--muted-foreground, 215 16% 47%));
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.afp-fund-detail-container .table thead { background: #fafbfc; }
.afp-fund-detail-container .table thead th {
  font-weight: 700; color: hsl(var(--muted-foreground, 215 16% 47%));
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.8rem 1rem; border-bottom: 1px solid hsl(var(--border, 214 32% 91%));
}
.afp-fund-detail-container .table tbody tr { border-bottom: 1px solid hsl(var(--border, 214 32% 91%)); }
.afp-fund-detail-container .table tbody tr:hover { background: hsl(var(--background, 210 20% 98%)); }
.afp-fund-detail-container .table tbody td { padding: 0.7rem 1rem; font-variant-numeric: tabular-nums; }
.afp-fund-detail-container canvas { max-height: 300px; }

/* ============================================================
   Filter row — uniform control height
   ============================================================ */
#fundsSearchForm .form-control,
#fundsSearchForm .form-select,
#fundsSearchForm .input-group > .btn,
.afp-clear-btn {
  height: 2.6rem;
  font-size: 0.85rem;
}
#fundsSearchForm .form-select {
  padding-top: 0;
  padding-bottom: 0;
}

/* ============================================================
   AUM (numeric, sortable) header aligns with its right-aligned
   values: caret sits to the LEFT of the label.
   ============================================================ */
.funds-table thead th.text-end .sort-link { flex-direction: row-reverse; }

/* ============================================================
   Lifecycle distinction: new / active / deprecated
   Subtle left accent + small chip (noticeable, not loud).
   ============================================================ */
/* White (not transparent) so the navy card background behind the table
   doesn't show through as a left strip on normal rows. Status colours
   (new/inactive) override below. */
.funds-table tbody tr.afp-row td:first-child { border-left: 3px solid #fff; }
.funds-table tbody tr.afp-row-new td:first-child { border-left-color: hsl(var(--chart-2, 160 84% 39%)); }
.funds-table tbody tr.afp-row-inactive td:first-child { border-left-color: hsl(38 92% 55%); }
.funds-table tbody tr.afp-row-inactive td { color: hsl(var(--muted-foreground, 215 16% 47%)); }
.funds-table tbody tr.afp-row-new td:first-child { background: hsl(var(--chart-2, 160 84% 39%) / 0.025); }

.afp-state {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.12rem 0.42rem;
  border-radius: 0.3rem;
  vertical-align: middle;
}
.afp-state-new { background: hsl(var(--pos-bg, 160 70% 95%)); color: hsl(160 84% 28%); }
.afp-state-dep { background: hsl(38 92% 90%); color: hsl(30 74% 36%); }

/* ============================================================
   Clear filters — refined ghost button
   ============================================================ */
.afp-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.15rem;                 /* match the multi-select triggers */
  padding: 0 0.65rem;
  font-size: 0.82rem;
  border: 1px solid hsl(var(--border-strong, 213 27% 84%));
  background: #fff;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  font-weight: 600;
  border-radius: var(--radius-sm, 7px);
  cursor: pointer;
  transition: background-color 150ms var(--ease, ease), border-color 150ms var(--ease, ease), color 150ms var(--ease, ease);
}
.afp-clear-btn svg { width: 0.85rem; height: 0.85rem; }
.afp-clear-btn:hover {
  background: hsl(var(--neg-bg, 0 86% 97%));
  border-color: hsl(var(--chart-3, 0 84% 60%) / 0.5);
  color: hsl(var(--chart-3, 0 84% 60%));
}
.afp-clear-btn:active { transform: scale(0.97); }

/* Match the navy header bg so the 3px sacrificed for the row status
   accent stays invisible in the header. */
.funds-table thead th:first-child { border-left: 3px solid hsl(var(--primary, 210 29% 24%)); }

/* Proper spacing between icon and label in the Search / Export buttons */
#fundsSearchForm .btn-primary,
#exportFundsBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ============================================================
   ISIN shown inline next to local-fund names (explorer)
   ============================================================ */
.afp-isin-inline {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.68rem;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  background: hsl(210 24% 95%);
  padding: 0.05rem 0.4rem;
  border-radius: 0.3rem;
  vertical-align: middle;
}

/* ============================================================
   Fund detail — GWS-aligned header, chips, controls
   ============================================================ */
.afp-detail-head { margin-bottom: 1.25rem; }
.afp-back {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.8rem; font-weight: 600; color: hsl(var(--muted-foreground, 215 16% 47%));
  text-decoration: none; margin-bottom: 0.75rem;
  transition: color 150ms var(--ease, ease);
}
.afp-back:hover { color: hsl(var(--primary, 210 29% 24%)); text-decoration: none; }
.afp-back svg { width: 0.95rem; height: 0.95rem; }
/* Navy header bar — same fill as the section / title bars */
.afp-detail-bar {
  background: linear-gradient(135deg, hsl(var(--primary, 210 29% 24%)) 0%, hsl(var(--primary-deep, 210 30% 17%)) 100%);
  color: #fff;
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
  padding: 1.1rem 1.3rem;
}
.afp-detail-title {
  margin: 0 0 0.7rem; font-size: 1.4rem; font-weight: 700;
  color: #fff; letter-spacing: -0.015em; line-height: 1.2;
}
.afp-detail-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.afp-meta-chip {
  font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.2rem 0.6rem; border-radius: 1rem;
}
.afp-meta-chip.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; color: #fff; background: rgba(255, 255, 255, 0.2); }
.afp-meta-chip.muted { color: rgba(255, 255, 255, 0.72); }

.afp-detail-isins {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.55rem; align-items: center;
}
.afp-detail-isins-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
  margin-right: 0.15rem;
}

.afp-months-select {
  height: 2.1rem; border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.95); color: hsl(var(--primary, 210 29% 24%));
  border-radius: var(--radius-sm, 7px); font-size: 0.8rem; font-weight: 600;
  padding: 0 0.55rem; cursor: pointer;
}
.afp-months-select:focus { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 1px; }