/* ==========================================================
   PROBUILD | RN STELLING SPECIFIEKE STYLING
   ========================================================== */

.calc-grid {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--ghost-bg, #f8f9fa);
    border-radius: 10px;
    align-items: center;
    margin-bottom: 12px;
    border: 1px solid var(--border);
}

[data-theme="dark"] .result-item {
    background: #222;
}

.status-badge {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    min-width: 120px;
    text-align: center;
    text-transform: uppercase;
}

.status-ok {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success, #27ae60);
    border: 1px solid var(--success, #27ae60);
}

.status-fail {
    background: rgba(192, 57, 43, 0.15);
    color: var(--danger, #c0392b);
    border: 1px solid var(--danger, #c0392b);
}

.calculation-detail {
    background: var(--ghost-bg, #080808);
    padding: 35px;
    border-radius: 15px;
    border: 1px solid var(--border, #444);
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    line-height: 1.8;
    white-space: pre-wrap;
    margin-top: 25px;
}

.calculation-detail strong {
    color: var(--primary);
    font-size: 1.25rem;
    display: block;
    margin: 25px 0 10px 0;
    border-bottom: 1px solid var(--border, #333);
    padding-bottom: 5px;
}

.theory-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 30px;
}

@media print {
    .calc-grid { grid-template-columns: 1fr; }
    .calculation-detail { color: black; background: white; border: 1px solid #ddd; }
    .status-badge { border: 1px solid #000; color: black; background: none; }
}