/* =========================================================
   RAIZE BORROWER CLIENT SPACE — APP COMPOSITIONS
   Borrower/Investor self-service look (top nav + hero + dark
   footer). Mirrors raize/project/ui_kits/client_app.css and
   borrower_app/index.html. Composes only tokens declared in
   raize-tokens.css — no new colours, fonts, or shadows here.
   Load order: tokens -> components -> mudblazor -> app -> client.
   ========================================================= */

/* ---------- TOP NAV (client app, horizontal) ---------- */
.cnav {
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.cnav .cnav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
}

.cnav .cnav-brand img {
    height: 22px;
    width: auto;
    max-width: 140px;
    display: block;
    object-fit: contain;
}

.cnav .cnav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}

.cnav-link {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0 12px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-right: 4px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}

.cnav-link:hover { color: var(--ink); }

.cnav-link.is-on,
.cnav-link.active {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--brand);
}

.cnav .cnav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
}

/* ---------- PAGE CONTAINER (client app) ---------- */
.cpage {
    width: 100%;
    box-sizing: border-box;
    padding: 24px;
    max-width: 1240px;
    margin: 0 auto;
}

.cpage-wizard {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 1280px) {
    .cpage { padding: 32px; }
}

.cpage-stack,
.page-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-main {
    flex: 1 1 320px;
    min-width: 0;
}

.page-header-main .t-h1 { margin: 4px 0 0; }
.page-header-main .t-small { margin: 4px 0 0; }

.row-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
}

@media (max-width: 1080px) {
    .row-2-1 { grid-template-columns: 1fr; }
}

.section-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--hairline);
    gap: 12px;
}

.section-card-head .t-h3 { margin: 0; }
.section-card-head .t-small { margin: 2px 0 0; }

.section-card-body { padding: 18px; }
.section-card-body-flush { padding: 0; }

/* ---------- DARK FOOTER ---------- */
.cfoot {
    background: var(--ink);
    color: var(--muted-2);
    padding: 24px;
    margin-top: 56px;
}

.cfoot a {
    color: var(--muted-2);
    text-decoration: none;
    transition: color var(--d-fast) var(--ease);
}

.cfoot a:hover { color: var(--surface); }

/* ---------- HERO BALANCE CARD (ink-black with brand accent) ---------- */
.hero-balance {
    position: relative;
    background: var(--ink);
    color: var(--surface);
    border-radius: var(--r-md);
    padding: 24px;
    overflow: hidden;
    min-height: 180px;
}

.hero-balance::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: var(--brand);
    opacity: 0.15;
    pointer-events: none;
}

.hero-balance > * { position: relative; z-index: 1; }

.hero-balance .label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.hero-balance .hero-amount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--surface);
}

.hero-balance .hero-meta {
    font-size: 13px;
    color: var(--muted-2);
    margin-top: 6px;
}

.hero-balance .hero-accent {
    color: var(--brand);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
}

/* Ghost button variant for use on dark backgrounds */
.btn-on-dark {
    background: transparent;
    color: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-on-dark:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--surface);
}

/* ---------- PROGRESS BAR (4-px track) ---------- */
.bar {
    width: 100%;
    height: 6px;
    background: var(--paper-2);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.bar > div {
    height: 100%;
    background: var(--ink-2);
    border-radius: var(--r-pill);
    transition: width var(--d-base) var(--ease);
}

.bar.success > div { background: var(--success); }
.bar.warning > div { background: var(--warning); }
.bar.danger > div  { background: var(--danger); }
.bar.brand > div   { background: var(--brand); }

/* ---------- DARK CTA CARD (use on Inicio bottom row) ---------- */
.cta-dark {
    position: relative;
    background: var(--ink);
    color: var(--surface);
    border: none;
    overflow: hidden;
}

.cta-dark::before {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: var(--brand);
    opacity: 0.18;
    pointer-events: none;
}

.cta-dark > * { position: relative; z-index: 1; }

.cta-dark .t-h3,
.cta-dark h3 {
    color: var(--surface);
}

.cta-dark .cta-eyebrow {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
}

.cta-dark .cta-body {
    font-size: 13px;
    color: var(--muted-2);
    max-width: 360px;
}

/* ---------- ACTIVITY TIMELINE ---------- */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.activity-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.activity-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    margin-top: 7px;
    background: var(--muted-2);
    flex: 0 0 auto;
}

.activity-dot.tone-success { background: var(--success); }
.activity-dot.tone-warning { background: var(--warning); }
.activity-dot.tone-danger  { background: var(--danger); }
.activity-dot.tone-brand   { background: var(--brand); }

.activity-text {
    flex: 1;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
}

.activity-time {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

/* ---------- COMPANY MONOGRAM TILE (used in cnav user trigger) ---------- */
.cnav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    border: none;
    background: transparent;
    font: inherit;
    transition: background var(--d-fast) var(--ease);
}

.cnav-user:hover { background: var(--paper-2); }

.cnav-user-mono {
    width: 28px;
    height: 28px;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    flex: 0 0 auto;
}

.cnav-user-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}

.cnav-user-sub {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.1;
    margin-top: 1px;
}

/* ---------- SUMMARY STAT STRIP (5-up KPI row inside a card) ---------- */
.summary-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

@media (max-width: 1180px) {
    .summary-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .summary-strip { grid-template-columns: repeat(2, 1fr); }
}

.summary-stat-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.summary-stat-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    margin-top: 4px;
}

.summary-stat-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

/* ---------- LIST ROW (used in tables for plano de pagamentos) ---------- */
.tbl tr.is-next td {
    background: var(--brand-soft);
}

.tbl tr.is-next td:first-child,
.tbl tr.is-next td .next-label {
    color: var(--brand-ink);
    font-weight: 600;
}

/* ---------- DOC ROW STATUS HELPERS ---------- */
.doc-row-thumb-pdf {
    width: 38px;
    height: 46px;
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    font-size: 9px;
    font-family: var(--font-mono);
    color: var(--muted);
}

/* ---------- COMPANY PROFILE GRADE TILE (large variant) ---------- */
.company-grade-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.company-grade-tile {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: var(--success-soft);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    flex: 0 0 auto;
}

.company-grade-tile.is-empty {
    background: var(--paper-2);
    color: var(--muted);
    font-size: 22px;
}

/* ---------- 2-COL GRID HELPERS ---------- */
.cgrid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 980px) {
    .cgrid-2 { grid-template-columns: 1fr; }
}

.cgrid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 980px) {
    .cgrid-3 { grid-template-columns: 1fr; }
}

/* ---------- LABEL/VALUE ROWS (used in contrato cards, profile) ---------- */
.kv-grid {
    display: flex;
    flex-direction: column;
}

.kv-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--hairline);
    font-size: 13px;
}

.kv-row:last-child {
    border-bottom: none;
}

.kv-row-label {
    flex: 1;
    color: var(--muted);
}

.kv-row-value {
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---------- INVESTOR CLIENT APP SHELL ---------- */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
}

.app-shell > main {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.cnav-divider {
    width: 1px;
    height: 24px;
    background: var(--hairline);
    flex: 0 0 auto;
}

.hero-balance .value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--surface);
    margin-top: 8px;
}

.hero-kpi-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 14px;
}

@media (max-width: 1180px) {
    .hero-kpi-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .hero-kpi-grid { grid-template-columns: 1fr; }
}

.investor-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 120px;
}

.investor-kpi-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.investor-kpi-value.accent-success { color: var(--success); }
.investor-kpi-value.accent-warning { color: var(--warning); }
.investor-kpi-value.accent-brand { color: var(--brand-ink); }

.investor-kpi-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: auto;
}

/* ---------- OPPORTUNITY CARD (marketplace) ---------- */
.opp-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
}

.opp-card:hover {
    border-color: var(--hairline-strong);
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
}

.opp-card-mono {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--paper-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    flex: 0 0 auto;
}

.opp-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px 0;
    border-top: 1px dashed var(--hairline);
    border-bottom: 1px dashed var(--hairline);
}

.opp-stat-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.opp-stat-value {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 14px;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ---------- RISK GRADE PILLS ---------- */
.grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    background: var(--neutral-soft);
    color: var(--ink);
}

.grade.g-aa { background: #DCEBE0; color: #1F8A4C; }
.grade.g-a  { background: #E6F0DA; color: #4A7A1F; }
.grade.g-b  { background: var(--warning-soft); color: var(--warning); }
.grade.g-c  { background: var(--danger-soft); color: var(--danger); }

/* ---------- MARKETPLACE LAYOUT ---------- */
.market-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}

.filter-rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
}

.filter-section-title {
    margin-bottom: 10px;
}

.filter-section-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.market-sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .market-layout { grid-template-columns: 1fr; }
    .filter-rail { position: static; }
    .market-grid { grid-template-columns: 1fr; }
}

/* ---------- MOVEMENT ROW ---------- */
.movement-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.movement-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
}

.movement-icon.positive {
    background: var(--success-soft);
    color: var(--success);
}

.movement-icon.negative {
    background: var(--paper-2);
    color: var(--muted);
}

.movement-amount {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.movement-amount.positive { color: var(--success); }
.movement-amount.negative { color: var(--ink); }

/* ---------- INVEST SIDEBAR ---------- */
.invest-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
    align-self: flex-start;
}

.invest-cta-card {
    background: var(--brand-soft);
    border: 1px solid var(--brand);
}

.detail-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 980px) {
    .detail-layout { grid-template-columns: 1fr; }
    .invest-sidebar { position: static; }
}

.cfoot-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
}

.cfoot-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.cfoot-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cfoot-brand img {
    height: 18px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.home-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
}

@media (max-width: 980px) {
    .home-split { grid-template-columns: 1fr; }
}

.wallet-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1180px) {
    .wallet-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .wallet-kpi-grid { grid-template-columns: 1fr; }
}

.kyc-callout {
    background: var(--warning-soft);
    border: 1px solid var(--warning);
    border-radius: var(--r-md);
    padding: 20px 24px;
}

.ledger-search {
    max-width: 400px;
    margin-bottom: 12px;
}