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

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

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

.salary-table thead th {
    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;
}

.salary-table tbody td {
    font-size: .9rem;
    vertical-align: middle;
}

/* Copy buttons sit inside table cells, so they have to be visually quiet
   until the row is hovered - otherwise eight rows x three columns of blue
   icons drown out the numbers, which are the point of the table. */
.copy-value-btn {
    padding: 0 .25rem;
    margin-left: .35rem;
    line-height: 1;
    color: #adb5bd;
    text-decoration: none;
    opacity: .55;
    transition: opacity .15s ease, color .15s ease;
    vertical-align: baseline;
}

.copy-value-btn:hover,
.copy-value-btn:focus {
    color: var(--calculator-color, #6366f1);
    opacity: 1;
}

.salary-table tbody tr:hover .copy-value-btn {
    opacity: 1;
}

.copy-value-btn .fa-check {
    color: #198754;
}

.salary-cell-value {
    font-variant-numeric: tabular-nums;
}

/* Optional mode field groups get a left rule so it is obvious they belong to
   the switch immediately above them. */
.mode-fields {
    border-left: 3px solid var(--calculator-color, #6366f1);
    margin-left: .25rem;
    padding-left: .75rem;
}

.scenario-block + .scenario-block {
    margin-top: 1.5rem;
}

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

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

/* The conversion grid is the point of the page - give it room on print and
   drop the interactive chrome. */
@media print {
    .salary-scroll {
        overflow: visible;
        border: 0;
    }

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

    .tab-content .tab-pane {
        display: block !important;
        opacity: 1 !important;
    }
}

@media (max-width: 575.98px) {
    .salary-table tbody td,
    .salary-table thead th {
        font-size: .8rem;
        padding: .35rem .4rem;
    }

    .copy-value-btn {
        opacity: 1;
        margin-left: .2rem;
    }
}