/* ==========================================================================
   CarAsset — Simulation (simulation.css)
   Hanya aturan bersama lintas section Simulasi & Perlindungan. Setiap
   section tetap punya file CSS sendiri untuk gaya spesifiknya.
   ========================================================================== */

.ca-page--simulation {
    background-color: var(--ca-color-white);
}

/* Section spacing bersama */
.ca-assumptions,
.ca-one-unit,
.ca-multiple-units,
.ca-protection,
.ca-simulation-disclaimer {
    padding-block: var(--ca-section-space);
}

@media (max-width: 1180px) {
    .ca-assumptions,
    .ca-one-unit,
    .ca-multiple-units,
    .ca-protection,
    .ca-simulation-disclaimer {
        padding-block: var(--ca-section-space-small);
    }
}

/* -------------------------------------------------------------------------
   STATUS BADGE — "Contoh tampilan — menunggu angka final klien"
   Wajib konsisten di seluruh section, TIDAK memakai warna Green.
   ------------------------------------------------------------------------- */
.ca-simulation-status {
    display: inline-flex;
    align-items: center;
    gap: var(--ca-space-2);
    padding: var(--ca-space-2) var(--ca-space-4);
    background-color: var(--ca-bg-gold-soft);
    border: 1px solid var(--ca-color-gold);
    border-radius: var(--ca-radius-pill);
    color: var(--ca-color-navy);
    font-family: var(--ca-font-ui);
    font-weight: 500;
    font-size: var(--ca-text-sm);
}

.ca-simulation-status__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--ca-color-gold);
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   DATA LABEL / VALUE — dipakai di seluruh panel data
   ------------------------------------------------------------------------- */
.ca-simulation-label {
    display: block;
    font-family: var(--ca-font-ui);
    font-weight: 500;
    font-size: var(--ca-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ca-color-slate);
}

.ca-simulation-value {
    display: block;
    font-family: var(--ca-font-heading);
    font-weight: 600;
    font-size: var(--ca-text-lg);
    color: var(--ca-color-navy);
}

/* Nilai yang belum final — Slate, bukan angka buatan */
.ca-simulation-value.is-pending {
    font-family: var(--ca-font-body);
    font-weight: 500;
    font-size: var(--ca-text-sm);
    font-style: italic;
    color: var(--ca-color-slate);
}

.ca-simulation-value.is-final {
    color: var(--ca-color-navy);
}

/* -------------------------------------------------------------------------
   PANEL TERPADU — dipakai assumptions, one-unit summary, protection panel
   ------------------------------------------------------------------------- */
.ca-simulation-panel {
    background-color: var(--ca-color-white);
    border: 1px solid var(--ca-border-color);
    border-radius: var(--ca-radius-xl);
    padding: var(--ca-space-10);
    box-shadow: var(--ca-shadow-sm);
}

/* -------------------------------------------------------------------------
   NOTE / DISCLAIMER KECIL DI DALAM SECTION
   ------------------------------------------------------------------------- */
.ca-simulation-note {
    font-family: var(--ca-font-body);
    font-size: var(--ca-text-sm);
    color: var(--ca-color-slate);
}

/* -------------------------------------------------------------------------
   FLOW LINE — garis putus-putus penghubung node/skenario
   ------------------------------------------------------------------------- */
.ca-simulation-flow-line {
    background: repeating-linear-gradient(
        90deg,
        var(--ca-color-light-gray) 0,
        var(--ca-color-light-gray) 8px,
        transparent 8px,
        transparent 14px
    );
}

/* -------------------------------------------------------------------------
   PLACEHOLDER — teks fallback generik bila dibutuhkan di luar .ca-simulation-value
   ------------------------------------------------------------------------- */
.ca-simulation-placeholder {
    color: var(--ca-color-slate);
    font-style: italic;
}