/* The return calculator's panel (js/calc-ui.js), on the dashboard and in the visit form. */
.calc-panel h4,
.docs-panel h4 {
    margin: 0 0 4px;
    color: var(--primary-color);
}

.calc-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 16px;
    align-items: start;
    margin: 8px 0;
}

.calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px 12px;
}

.calc-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85rem;
}

.calc-field input {
    padding: 4px 6px;
}

.calc-result {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.9rem;
}

.calc-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
}

.calc-line.strong {
    font-weight: 700;
}

@media (max-width: 700px) {
    .calc-body {
        grid-template-columns: 1fr;
    }
}


.calc-title {
    margin: 0 0 4px;
    color: var(--primary-color, #2c5282);
}

.calc-field small[hidden] {
    display: none;
}

/* The visit form doesn't have the dashboard's small and plain buttons or grey text. */
.calc-panel .muted {
    color: #718096;
    font-size: 0.85rem;
}

.calc-panel .row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.calc-panel .btn-sm {
    padding: 5px 10px;
    font-size: 0.8rem;
}

.calc-panel .btn-plain {
    background: none;
    color: var(--secondary-color, #2c5282);
    border: 1px solid var(--border-color, #e2e8f0);
}

.calc-field input:disabled {
    background: #f7fafc;
}