/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Loan & EMI Calculator — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Loan type tab pills ─────────────────────────────────────────────────────── */
.loan-type-tabs {
    display:    flex;
    gap:        0.5rem;
    flex-wrap:  wrap;
    margin-bottom: 1.5rem;
}

.loan-tab-btn {
    padding:        0.45rem 1.1rem;
    border:         2px solid var(--border);
    border-radius:  999px;
    background:     transparent;
    color:          var(--text-secondary, #64748B);
    font-size:      0.875rem;
    font-weight:    600;
    font-family:    'IBM Plex Sans', sans-serif;
    cursor:         pointer;
    transition:     border-color 0.18s, background 0.18s, color 0.18s;
    white-space:    nowrap;
    line-height:    1;
}

.loan-tab-btn:hover {
    border-color: var(--accent, #E8472F);
    color:        var(--accent, #E8472F);
}

.loan-tab-btn.active {
    border-color: var(--accent, #E8472F);
    background:   var(--accent, #E8472F);
    color:        #fff;
}

/* ── Input prefix (SGD) ──────────────────────────────────────────────────────── */
.input-prefix-wrap {
    display:     flex;
    align-items: stretch;
    border:      1.5px solid var(--border, #E2E4E8);
    border-radius: 8px;
    overflow:    hidden;
    transition:  border-color 0.18s;
    background:  #fff;
}

.input-prefix-wrap:focus-within {
    border-color: var(--accent, #E8472F);
}

.input-prefix {
    display:     flex;
    align-items: center;
    padding:     0 0.75rem;
    background:  var(--bg, #FFFFFF);
    border-right: 1.5px solid var(--border, #E2E4E8);
    font-size:   0.9375rem;
    font-weight: 600;
    color:       var(--text-secondary, #64748B);
    white-space: nowrap;
    user-select: none;
}

.input-prefix-wrap .tool-input {
    border:        none;
    border-radius: 0;
    outline:       none;
    flex:          1;
    min-width:     0;
}

.input-prefix-wrap .tool-input:focus {
    box-shadow: none;
}

/* ── Rate hint text ──────────────────────────────────────────────────────────── */
.rate-hint {
    font-size:  0.8125rem;
    color:      var(--muted, #64748B);
    margin-top: 0.3rem;
    min-height: 1.1em;
    transition: opacity 0.2s;
}

/* ── Tenure toggle (Years / Months) ─────────────────────────────────────────── */
.tenure-input-row {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.tenure-unit-toggle {
    display:     flex;
    border:      1.5px solid var(--border, #E2E4E8);
    border-radius: 8px;
    overflow:    hidden;
    flex-shrink: 0;
}

.tenure-unit-btn {
    padding:        0.55rem 0.85rem;
    border:         none;
    background:     transparent;
    font-size:      0.8125rem;
    font-weight:    600;
    font-family:    'IBM Plex Sans', sans-serif;
    color:          var(--text-secondary, #64748B);
    cursor:         pointer;
    transition:     background 0.15s, color 0.15s;
    white-space:    nowrap;
    line-height:    1;
}

.tenure-unit-btn.active {
    background: var(--accent, #E8472F);
    color:      #fff;
}

.tenure-unit-btn:not(.active):hover {
    background: var(--bg, #FFFFFF);
    color:      var(--accent, #E8472F);
}

/* ── Finance disclaimer banner ───────────────────────────────────────────────── */
.finance-disclaimer {
    display:        flex;
    align-items:    flex-start;
    gap:            0.6rem;
    background:     #fffbf5;
    border:         1px solid #f4d5a8;
    border-radius:  8px;
    padding:        0.75rem 1rem;
    margin-top:     1.25rem;
    font-size:      0.8125rem;
    color:          #7a5c2e;
    line-height:    1.5;
}

.finance-disclaimer-icon {
    font-size:   1rem;
    flex-shrink: 0;
    margin-top:  0.05rem;
}

/* ── Results panel ───────────────────────────────────────────────────────────── */
.emi-results-panel {
    margin-top:    1.75rem;
    padding-top:   1.5rem;
    border-top:    2px solid var(--border, #E2E4E8);
    animation:     fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── EMI hero number ─────────────────────────────────────────────────────────── */
.emi-hero {
    text-align:    center;
    margin-bottom: 1.5rem;
}

.emi-hero-label {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--text-secondary, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}

.emi-hero-value {
    font-family:  'IBM Plex Serif', serif;
    font-size:    clamp(2.5rem, 8vw, 3.5rem);
    font-weight:  400;
    color:        var(--accent, #E8472F);
    line-height:  1.1;
    letter-spacing: -0.02em;
}

.emi-hero-sub {
    font-size:  0.8125rem;
    color:      var(--muted, #64748B);
    margin-top: 0.25rem;
}

/* ── Summary stats grid ──────────────────────────────────────────────────────── */
.emi-stats-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1rem;
    margin-bottom:         1.5rem;
}

.emi-stat-card {
    background:    var(--bg, #FFFFFF);
    border:        1px solid var(--border, #E2E4E8);
    border-radius: 10px;
    padding:       0.875rem 1rem;
}

.emi-stat-label {
    font-size:     0.775rem;
    font-weight:   600;
    color:         var(--text-secondary, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}

.emi-stat-value {
    font-size:   1.125rem;
    font-weight: 700;
    color:       var(--text-primary, #0D1B2A);
    line-height: 1.2;
}

.emi-stat-sub {
    font-size:  0.775rem;
    color:      var(--muted, #64748B);
    margin-top: 0.15rem;
}

/* ── SVG Donut chart ─────────────────────────────────────────────────────────── */
.donut-chart-wrap {
    display:        flex;
    align-items:    center;
    gap:            1.5rem;
    justify-content: center;
    margin-bottom:  1.5rem;
    flex-wrap:      wrap;
}

.donut-svg {
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));
}

.donut-legend {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
}

.donut-legend-item {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.875rem;
}

.donut-legend-swatch {
    width:         12px;
    height:        12px;
    border-radius: 3px;
    flex-shrink:   0;
}

.donut-legend-swatch.principal { background: var(--accent, #E8472F); }
.donut-legend-swatch.interest  { background: #f4c8b0; }

.donut-legend-name  { font-weight: 600; color: var(--text-primary, #0D1B2A); }
.donut-legend-pct   { color: var(--text-secondary, #64748B); margin-left: 0.25rem; }

/* ── Amortisation table ──────────────────────────────────────────────────────── */
.amort-toggle-btn {
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
    background:     transparent;
    border:         1.5px solid var(--border, #E2E4E8);
    border-radius:  8px;
    padding:        0.55rem 1rem;
    font-size:      0.875rem;
    font-weight:    600;
    color:          var(--text-secondary, #64748B);
    cursor:         pointer;
    transition:     border-color 0.15s, color 0.15s;
    font-family:    'IBM Plex Sans', sans-serif;
    margin:         0 auto 1rem;
}

.amort-toggle-btn:hover {
    border-color: var(--accent, #E8472F);
    color:        var(--accent, #E8472F);
}

.amort-toggle-icon {
    transition:   transform 0.22s ease;
    display:      inline-block;
    font-style:   normal;
}

.amort-toggle-btn.open .amort-toggle-icon {
    transform: rotate(180deg);
}

.amort-table-wrap {
    overflow-x:  auto;
    border:      1px solid var(--border, #E2E4E8);
    border-radius: 10px;
    margin-top:  0.5rem;
    display:     none;
}

.amort-table-wrap.visible {
    display: block;
    animation: fadeInUp 0.25s ease;
}

.amort-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.8125rem;
    min-width:       480px;
}

.amort-table thead th {
    background:    var(--bg, #FFFFFF);
    padding:       0.6rem 0.75rem;
    text-align:    right;
    font-weight:   700;
    color:         var(--text-secondary, #64748B);
    font-size:     0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border, #E2E4E8);
    white-space:   nowrap;
}

.amort-table thead th:first-child {
    text-align: center;
}

.amort-table tbody tr {
    border-bottom: 1px solid var(--border, #E2E4E8);
    transition:    background 0.1s;
}

.amort-table tbody tr:last-child {
    border-bottom: none;
}

.amort-table tbody tr:hover {
    background: #fff9f6;
}

.amort-table tbody td {
    padding:    0.5rem 0.75rem;
    text-align: right;
    color:      var(--text-primary, #0D1B2A);
}

.amort-table tbody td:first-child {
    text-align: center;
    color:      var(--text-secondary, #64748B);
    font-weight: 600;
}

.amort-table .td-interest {
    color: #b85a1a;
}

/* ── Collapsed rows fade hint ────────────────────────────────────────────────── */
.amort-more-hint {
    text-align:  center;
    font-size:   0.8125rem;
    color:       var(--muted, #64748B);
    padding:     0.75rem;
    background:  var(--bg, #FFFFFF);
    border-top:  1px solid var(--border, #E2E4E8);
    display:     none;
}

.amort-table-wrap.visible .amort-more-hint {
    display: block;
}

/* ── Form field labels ───────────────────────────────────────────────────────── */
.calc-field {
    margin-bottom: 1.125rem;
}

.calc-label {
    display:       block;
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--text-primary, #0D1B2A);
    margin-bottom: 0.4rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .emi-stats-grid {
        grid-template-columns: 1fr;
    }

    .donut-chart-wrap {
        flex-direction: column;
        gap: 1rem;
    }

    .donut-legend {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem 1.25rem;
    }

    .amort-table {
        font-size: 0.75rem;
    }

    .amort-table thead th,
    .amort-table tbody td {
        padding: 0.45rem 0.5rem;
    }
}

/* cache-buster: 2026-05-24T05:06:05Z */