/* =========================================================
   RAIZE DESIGN SYSTEM — FRONTOFFICE COMPONENTS
   1. Legacy shared classes (.btn, .card, .chip, .tbl…) reshaped
      to DS rules for the Frontoffice only.
   2. ds-* classes backing Components/Shared/Frontoffice/Ds/*.
   3. Investor dashboard compositions.
   Loaded last (after raize-client.css).
   ========================================================= */

/* =========================================================
   1. LEGACY CLASSES → DS
   ========================================================= */

/* ---------- BUTTONS: 800 weight, lift on hover, yellow glow ---------- */
.btn {
    height: 44px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 800;
    border-radius: var(--radius-input);
    border-width: 1.5px;
    text-decoration: none;
    transition: transform var(--d-fast) var(--ease), filter var(--d-fast) var(--ease),
                background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.btn:hover:not([disabled]) { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn:focus-visible { outline: 2px solid var(--blue-600); }

.btn-sm { height: 40px; padding: 0 18px; font-size: 14.5px; border-radius: 10px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 16px; border-radius: var(--radius-btn); }

.btn-primary {
    background: var(--raize-yellow);
    border-color: var(--raize-yellow);
    color: var(--raize-ink);
    box-shadow: var(--shadow-cta);
}
.btn-primary:hover,
.btn-primary:active { background: var(--raize-yellow); color: var(--raize-ink); filter: brightness(1.04); }
.btn-sm.btn-primary { box-shadow: var(--shadow-cta-nav); }

.btn-secondary { border-color: var(--border-strong); color: var(--raize-ink); }
.btn-ghost { color: var(--text-link); }
.btn-ghost:hover { color: var(--text-link-hover); }
.btn-danger { background: var(--red-150); color: var(--red-800); border-color: var(--red-150); }
.btn-danger:hover { background: var(--red-150); filter: brightness(.98); }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: .55; box-shadow: none; }

/* ---------- CARDS ---------- */
.card {
    border-color: var(--border-card);
    border-radius: var(--radius-card);
    box-shadow: none;
}
.card-pad { padding: var(--pad-card, 28px); }

/* ---------- CHIPS → pills ---------- */
.chip {
    height: 28px;
    padding: 0 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: var(--radius-pill);
}
.chip-dot { width: 7px; height: 7px; }
.chip-success .chip-dot { background: var(--success-dot); }
.chip-warning .chip-dot { background: var(--warning-dot); }

/* ---------- TABLES ---------- */
.tbl th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    color: var(--text-muted);
}
.tbl td {
    font-size: 14.5px;
    color: var(--text-strong);
    border-bottom-color: var(--border-divider);
}
/* Wide tables scroll inside their card on phones instead of squashing columns. */
@media (max-width: 720px) {
    .card:has(> .tbl) { overflow-x: auto !important; }
    .card > .tbl td,
    .card > .tbl th { white-space: nowrap; }
}

/* ---------- CLIENT COMPOSITIONS ---------- */
.opp-card,
.kyc-callout,
.investor-kpi-card { border-radius: var(--radius-card); }
.opp-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.hero-balance,
.cta-dark { background: var(--gradient-dark); border-radius: var(--radius-card); }
.hero-balance .label,
.cta-dark .cta-eyebrow { color: var(--raize-yellow); font-weight: 700; letter-spacing: .6px; }
.hero-balance .value,
.investor-kpi-value,
.summary-stat-value { font-weight: 900; letter-spacing: -.5px; }
.bar.brand > div { background: var(--gradient-yellow); }

/* ---------- MOTION: content enters with stepIn ---------- */
@keyframes raize-step-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.page-stack > * { animation: raize-step-in var(--dur-enter) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
    .page-stack > * { animation: none; }
}

/* =========================================================
   2. DS COMPONENTS
   ========================================================= */

/* ---------- Wordmark ---------- */
.ds-wordmark {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -.5px;
    line-height: 1;
    color: var(--raize-ink);
    white-space: nowrap;
}
.ds-wordmark.on-dark { color: #fff; }
.ds-wordmark-r { color: var(--raize-yellow); }

/* ---------- IconTile ---------- */
.ds-icon-tile {
    --tile-size: 40px;
    flex: none;
    width: var(--tile-size);
    height: var(--tile-size);
    border-radius: calc(var(--tile-size) * .27);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: calc(var(--tile-size) * .43);
    line-height: 1;
}
.ds-icon-tile.is-round { border-radius: 50%; }
.ds-icon-tile.is-mark {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: calc(var(--tile-size) * .33);
    letter-spacing: .5px;
}
.ds-icon-tile.tone-yellow    { background: var(--raize-yellow-150); color: var(--raize-yellow-700); }
.ds-icon-tile.tone-warning   { background: var(--raize-yellow-100); color: var(--raize-yellow-800); }
.ds-icon-tile.tone-accent    { background: var(--raize-yellow); color: var(--raize-ink); }
.ds-icon-tile.tone-blue      { background: var(--blue-100); color: var(--blue-600); }
.ds-icon-tile.tone-green     { background: var(--green-150); color: var(--green-700); }
.ds-icon-tile.tone-greenSoft { background: var(--green-50); color: var(--green-700); }
.ds-icon-tile.tone-neutral   { background: var(--grey-60); color: var(--grey-800); }
.ds-icon-tile.tone-dark      { background: var(--raize-ink); color: var(--raize-yellow); }

/* ---------- StatusPill ---------- */
.ds-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.ds-status-pill.size-sm { padding: 7px 15px; }
.ds-status-pill.size-lg { padding: 10px 18px; font-size: 14px; }
.ds-status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success-dot); }
.ds-status-pill.size-lg .ds-status-dot { width: 9px; height: 9px; }
.ds-status-pill.tone-success { background: var(--green-50); border-color: var(--green-250); color: var(--green-700); }
.ds-status-pill.tone-warning { background: var(--raize-yellow-50); border-color: var(--raize-yellow-300); color: var(--raize-yellow-800); }
.ds-status-pill.tone-warning .ds-status-dot { background: var(--warning-dot); }
.ds-status-pill.tone-neutral { background: #fff; border-color: var(--border-input); color: var(--blue-600); }
.ds-status-pill.tone-plain   { background: transparent; padding: 0; color: var(--grey-600); }

/* ---------- Card ---------- */
.ds-card {
    display: block;
    border-radius: var(--radius-card);
    padding: 28px;
    background: #fff;
    border: 1px solid var(--border-card);
    color: inherit;
    text-decoration: none;
    transition: transform var(--d-slow), box-shadow var(--d-slow);
}
.ds-card.variant-raised { box-shadow: var(--shadow-card); }
.ds-card.variant-soft   { background: var(--surface-soft); border-color: var(--grey-90); }
.ds-card.variant-muted  { background: var(--grey-60); border-color: transparent; }
.ds-card.variant-dark   { background: var(--raize-ink); border-color: transparent; color: #fff; }
.ds-card.is-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); color: inherit; }

.ds-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.ds-card-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--grey-950); }
.ds-card-subtitle { font-size: 14px; color: var(--grey-600); margin-top: 3px; }
.ds-card.variant-dark .ds-card-title { color: #fff; }
.ds-card.variant-dark .ds-card-subtitle { color: var(--grey-300); }

/* ---------- StatTile ---------- */
.ds-stat-tile {
    background: var(--surface-soft);
    border: 1px solid var(--grey-90);
    border-radius: var(--radius-tile);
    padding: 18px 20px;
}
.ds-stat-label { font-size: 13.5px; font-weight: 600; color: var(--grey-600); margin-bottom: 8px; }
.ds-stat-value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -.5px;
    color: var(--grey-950);
    font-variant-numeric: tabular-nums;
}
.ds-stat-value.tone-success { color: var(--green-700); }
.ds-stat-value.tone-info    { color: var(--blue-600); }
.ds-stat-hint { font-size: 13px; line-height: 1.5; color: var(--grey-600); margin-top: 8px; }

/* ---------- CompositionBar ---------- */
.ds-composition-track {
    display: flex;
    height: 14px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--grey-90);
    margin-bottom: 22px;
}
.ds-composition-seg { transition: width .4s; }
.ds-composition-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--grey-60);
}
.ds-composition-swatch { flex: none; width: 11px; height: 11px; border-radius: 3px; }
.ds-composition-text { flex: 1; min-width: 0; }
.ds-composition-label { font-size: 15px; font-weight: 600; color: var(--grey-950); }
.ds-composition-note { font-size: 13px; color: var(--grey-600); margin-top: 2px; }
.ds-composition-value { font-size: 15.5px; font-weight: 700; color: var(--grey-950); white-space: nowrap; }
.ds-composition-pct { font-size: 13.5px; color: var(--grey-600); width: 52px; text-align: right; }
.tone-yellow.ds-composition-seg, .tone-yellow.ds-composition-swatch { background: var(--raize-yellow); }
.tone-blue.ds-composition-seg,   .tone-blue.ds-composition-swatch   { background: var(--blue-600); }
.tone-green.ds-composition-seg,  .tone-green.ds-composition-swatch  { background: var(--green-500); }
.tone-grey.ds-composition-seg,   .tone-grey.ds-composition-swatch   { background: var(--grey-200); }

/* ---------- Alert ---------- */
.ds-alert {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border: 1px solid transparent;
    border-radius: var(--radius-card);
    padding: 24px 28px;
}
.ds-alert-tile {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
}
.ds-alert-body { flex: 1; min-width: 0; }
.ds-alert-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--grey-950); }
.ds-alert-text { font-size: 14.5px; line-height: 1.6; margin-top: 4px; }
.ds-alert-action { flex: none; align-self: center; }
.ds-alert.tone-success { background: var(--green-50); border-color: var(--green-250); }
.ds-alert.tone-success .ds-alert-tile { background: var(--green-150); color: var(--green-700); border-radius: 50%; }
.ds-alert.tone-success .ds-alert-text { color: #2C4A3C; }
.ds-alert.tone-warning { background: var(--raize-yellow-50); border-color: var(--raize-yellow-300); }
.ds-alert.tone-warning .ds-alert-tile { background: var(--raize-yellow-100); color: var(--raize-yellow-800); }
.ds-alert.tone-warning .ds-alert-text { color: var(--grey-700); }

@media (max-width: 720px) {
    .ds-alert { flex-wrap: wrap; padding: 20px; }
    .ds-alert-action { flex-basis: 100%; }
}

/* ---------- Text helpers ---------- */
.ds-link,
.ds-link-accent {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-link);
    text-decoration: none;
    white-space: nowrap;
}
.ds-link:hover { color: var(--text-link-hover); }
.ds-link-accent { display: inline-block; color: var(--raize-yellow); margin-top: 18px; }
.ds-link-accent:hover { color: var(--raize-yellow); filter: brightness(1.08); }
.ds-muted-text { font-size: 14.5px; color: var(--grey-600); margin: 0; }

.ds-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    text-decoration: none;
}
.ds-kv-k { color: var(--grey-600); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-kv-v { font-weight: 700; color: var(--grey-950); text-align: right; white-space: nowrap; }
.ds-kv.on-dark .ds-kv-k { color: var(--grey-300); }
.ds-kv.on-dark .ds-kv-v { color: #fff; }
a.ds-kv.on-dark:hover .ds-kv-k { color: #fff; }

/* =========================================================
   3. INVESTOR DASHBOARD
   ========================================================= */
.ds-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.ds-h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: var(--fs-h1-app);
    letter-spacing: var(--ls-h1-app);
    line-height: 1.1;
    color: var(--grey-950);
    margin: 6px 0 0;
}
.ds-lead { font-size: 16px; color: var(--grey-700); margin: 8px 0 0; }

.ds-section-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--grey-950);
    margin: 0 0 6px;
}
.ds-section-sub { font-size: 14.5px; color: var(--grey-600); margin: 0 0 18px; }

.ds-action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.ds-card.ds-action-card { padding: 22px; border-radius: var(--radius-16); }
.ds-action-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ds-action-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16.5px;
    line-height: 1.2;
    color: var(--grey-950);
}
.ds-action-text { font-size: 14.5px; line-height: 1.6; color: var(--grey-700); margin: 0 0 10px; }
.ds-action-link { font-size: 14px; font-weight: 700; color: var(--blue-600); }

.ds-dash-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}
.ds-dash-aside { display: flex; flex-direction: column; gap: 20px; }
.ds-dash-aside .ds-card { padding: 26px; }
.ds-dash-aside .ds-card-title { font-size: 17px; }

.ds-figure {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 26px;
    letter-spacing: -.5px;
    color: var(--grey-950);
    font-variant-numeric: tabular-nums;
}
.ds-figure-lg {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 32px;
    letter-spacing: -.6px;
    line-height: 1;
}
.ds-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--raize-yellow);
    margin-bottom: 12px;
}
.ds-dark-sub { font-size: 14.5px; color: var(--grey-300); margin-top: 8px; }
.ds-dark-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.ds-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--border-divider);
}

.ds-movement-list { display: flex; flex-direction: column; gap: 12px; }

.ds-card.ds-help-card { padding: 22px; }
.ds-help-title { font-weight: 700; font-size: 15px; color: var(--grey-950); margin-bottom: 6px; }
.ds-help-text { font-size: 14px; line-height: 1.6; color: var(--grey-700); margin: 0; }

@media (max-width: 1080px) {
    .ds-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-dash-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .ds-action-grid,
    .ds-stat-grid { grid-template-columns: minmax(0, 1fr); }
    .ds-card,
    .ds-dash-aside .ds-card { padding: 22px; }
    .ds-composition-pct { width: 40px; }
}

/* FocusOnNavigate (Routes.razor) focuses the page's first h1 after each navigation so screen readers announce
   the new page; it gets tabindex="-1" and is not keyboard-reachable, so the focus ring is just noise. */
h1[tabindex="-1"]:focus { outline: none; }