/* ============================================================
   calc-compound.css — khas Engine Bunga Majemuk (Sesi 86/86b/86c).
   Kerangka diwarisi dari calculator.css.
   86c: Opsi C — grid 2 kolom rapat TANPA field full-width
        (hapus aturan :has full-width yg jadi biang lubang).
        Field bulan meredup & terkunci saat Tahunan (grid stabil).
   ============================================================ */

.calc-wrap-wide { max-width: 860px; }

/* ---------- Grid input rapat (86c) ---------- */
/* Semua field mengisi 2 kolom penuh; TIDAK ada yang full-width.
   Durasi & kenaikan muat 1 sel karena sub-kolomnya sudah sempit. */
#compoundApp .calc-inputs { gap: .8rem .9rem; }
#compoundApp .calc-field label { margin-bottom: .25rem; }
#compoundApp .calc-input-row input,
#compoundApp .cc-select { padding-top: .55rem; padding-bottom: .55rem; }
#compoundApp .calc-help { margin-top: .2rem; }

/* Select mengikuti gaya input-row. */
.cc-select {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: .55rem .75rem;
    font-size: 1rem;
    color: #111827;
    background: transparent;
    appearance: none;
    cursor: pointer;
}

/* Affix Rp di kiri untuk mode kenaikan rupiah. */
.cc-affix-start {
    border-right: 1px solid #e5e7eb;
    border-left: 0;
}

/* Durasi: dua sub-kolom (tahun | bulan) di dalam satu sel grid. */
.cc-duration-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

/* Kenaikan setoran: mode (select) + nilai, di dalam satu sel grid. */
.cc-growth-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: .5rem;
}
.cc-growth-mode {
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
}

/* ---------- Field bulan terkunci saat Tahunan (86c) ---------- */
/* Meredup tapi tetap menempati ruang -> grid tidak melompat. */
.cc-months-field.is-locked {
    opacity: .45;
    pointer-events: none;
}
.cc-months-field.is-locked input {
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* ---------- Ringkasan ---------- */
.cc-summary { margin-top: 1.25rem; }
.cc-eff .calc-result-label { display: flex; flex-direction: column; gap: .1rem; }
.cc-eff-note {
    font-size: .6875rem;
    font-weight: 500;
    color: #9ca3af;
}

/* ---------- Judul blok ---------- */
.cc-block-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 1.5rem 0 .65rem;
}

/* ---------- Grafik ---------- */
.cc-chart {
    width: 100%;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: .5rem;
}
.cc-chart svg { display: block; width: 100%; height: auto; }
.cc-grid  { stroke: #e5e7eb; stroke-width: 1; }
.cc-axis  { fill: #9ca3af; font-size: 11px; font-family: inherit; }
.cc-area  { fill: color-mix(in srgb, var(--brand, #F07A29) 12%, transparent); stroke: none; }
.cc-line  { fill: none; stroke: var(--brand, #F07A29); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Tabel ---------- */
.cc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}
.cc-table th, .cc-table td {
    padding: .5rem .7rem;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
    white-space: nowrap;
}
.cc-table thead th {
    background: #f9fafb;
    font-weight: 700;
    color: #374151;
    border-bottom: 1.5px solid #e5e7eb;
    position: sticky;
    top: 0;
}
.cc-table .cc-num { text-align: right; }
.cc-table .cc-strong { font-weight: 700; color: #111827; }
.cc-table tbody tr:nth-child(even) { background: #fcfcfd; }
.cc-table tbody tr:hover { background: color-mix(in srgb, var(--brand, #F07A29) 6%, white); }

/* ---------- Desktop: 2 kolom rapat, TANPA full-width ---------- */
@media (min-width: 768px) {
    /* Sengaja TIDAK ada aturan grid-column:1/-1 di sini.
       Semua 6 field mengalir 2 kolom => 3 baris penuh, tak ada lubang. */
    #compoundApp .calc-inputs { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   86d — Ikon hint (?) + tooltip, menggantikan teks help.
   ============================================================ */
.cc-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: .25rem;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    position: relative;
    vertical-align: middle;
    user-select: none;
    transition: background .15s, color .15s;
}
.cc-hint:hover, .cc-hint:focus {
    background: var(--brand, #F07A29);
    color: #fff;
    outline: none;
}
/* Balon tooltip */
.cc-hint::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 240px;
    padding: .5rem .65rem;
    border-radius: 8px;
    background: #111827;
    color: #f9fafb;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
/* Panah kecil */
.cc-hint::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #111827;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    z-index: 20;
}
.cc-hint:hover::after, .cc-hint:focus::after,
.cc-hint:hover::before, .cc-hint:focus::before {
    opacity: 1;
    visibility: visible;
}
/* Di layar sempit, jangan meluber ke kiri */
@media (max-width: 520px) {
    .cc-hint::after { max-width: 180px; }
}

/* Baris Tahun 0 di tabel: sedikit redup, penanda kondisi awal. */
.cc-table .cc-row-zero td { color: #9ca3af; }
.cc-table .cc-row-zero td.cc-strong { color: #6b7280; }

/* ============================================================
   86e — Tombol Reset (kosongkan semua field).
   Di bawah area input, sebelum ringkasan. Ramah jempol di mobile.
   ============================================================ */
.cc-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}
.cc-reset {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    color: #6b7280;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.cc-reset:hover, .cc-reset:focus {
    border-color: var(--brand, #F07A29);
    color: var(--brand, #F07A29);
    outline: none;
}
.cc-reset:active { background: #f9fafb; }
.cc-reset-ic { font-size: 1rem; line-height: 1; }

/* Di mobile, tombol melebar penuh supaya mudah ditekan. */
@media (max-width: 520px) {
    .cc-actions { justify-content: stretch; }
    .cc-reset { width: 100%; justify-content: center; padding: .7rem; }
}