/* public/css/calculators/amortization-calculator.css
   Page-specific styles for the amortization schedule calculator. Loaded
   after loan-calculator.css, which supplies the shared .input-panel /
   .result-card / .quick-tips-list styling. */

.amortization-scroll {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
}

.amortization-table {
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.amortization-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--bs-border-color, #dee2e6);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    font-weight: 600;
}

.amortization-table tbody td {
    font-size: .875rem;
}

.chart-box {
    position: relative;
    height: 320px;
}

.chart-box.chart-box-sm {
    height: 240px;
}

.one-time-row .form-control-sm,
.one-time-row .form-select-sm {
    font-variant-numeric: tabular-nums;
}

/* The schedule is the point of the page - give it room on print and drop
   the interactive chrome. */
@media print {
    .amortization-scroll {
        max-height: none;
        overflow: visible;
        border: 0;
    }

    .sticky-mobile-total,
    .page-header .breadcrumb,
    #calcTabs,
    .related-calculators-plain,
    .quick-tips {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .amortization-scroll {
        max-height: 420px;
    }

    .amortization-table tbody td,
    .amortization-table thead th {
        font-size: .8rem;
        padding: .35rem .4rem;
    }
}