/* css/cd_computational_details.css */

/* --- Global and Header Styles (Azure Theme) --- */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; padding: 0; 
    background-color: #f4f4f9; 
}
header { 
    background-color: #0077b6; /* Deep Azure Blue */
    color: white; 
    padding: 20px 0; 
    text-align: center; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
header h1 { 
    margin: 0; 
    font-size: 1.8em; 
}
.main-container { 
    max-width: 95%; /* Wider container for more columns */
    margin: 30px auto; 
    padding: 20px; 
    background-color: azure; /* Azure container */
    border-radius: 8px; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* --- Input Form Styles --- */
.form-section { text-align: center; }
.form-group { margin-bottom: 20px; }
input[type="file"], select {
    padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%;
    max-width: 400px; box-sizing: border-box; font-size: 1em; margin-bottom: 15px;
}
button {
    background-color: #0077b6; 
    color: white; padding: 10px 20px; border: none; border-radius: 4px;
    cursor: pointer; font-size: 1em; transition: background-color 0.3s;
}
button:hover { background-color: #005f92; }
.warning-label { font-weight: bold; font-size: 1.1em; color: #dc3545; display: block; margin-top: 10px; }

/* Instructions Box Styling */
.instructions { 
    background-color: #e9ecef; 
    padding: 15px; 
    border-radius: 4px; 
    margin: 20px auto; /* Center it */
    text-align: left;
    white-space: pre-wrap;
    font-size: 0.9em;
    color: #555;
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
}

/* --- Report Table Styles --- */
.table-container { 
    overflow-x: auto; margin-top: 20px; border: 1px solid #ddd; border-radius: 6px;
}
table { 
    width: 100%; border-collapse: collapse; font-size: 0.75em;
}
th, td { padding: 8px 10px; border-right: 1px solid #ddd; }
th { 
    background-color: #e0f0ff;
    font-weight: bold; text-align: center; border-bottom: 2px solid #0077b6;
}
td { text-align: right; border-bottom: 1px solid #eee; }
tr:nth-child(even) { background-color: #fcfcfc; }

.total-row td { 
    font-weight: bold; border-top: 2px solid #333; border-bottom: 2px solid #333;
    background-color: #b3e5fc !important;
}
.action-bar { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd; }
.exit-link { text-align: center; padding: 20px; }

/* --- SIGNATURE STYLING --- */
.signature-notes-section {
    clear: both; margin-top: 40px; padding: 0 10px; text-align: center;
}
.inspection-note {
    font-size: 0.9em; text-align: left; margin-bottom: 30px; white-space: pre-wrap; 
}
.signature-line-group {
    display: flex; justify-content: space-between; gap: 100px; width: 100%;
    max-width: 700px; margin-left: auto; margin-right: auto;
}
.signature-block {
    width: 250px; text-align: center; position: relative; height: 30px; 
}
.signature-line {
    border-bottom: 1px solid black; height: 1px; width: 100%; margin-bottom: 5px;
    position: absolute; top: 0; left: 0;
}
.signature-block .label {
    display: block; font-size: 0.85em; font-weight: normal; text-align: center;
    position: absolute; width: 100%; top: 5px; 
}


/* --- Print Styles --- */
@media print {
    body { font-size: 7pt; }
    header, .action-bar, .exit-link, .instructions { display: none !important; }
    .main-container { max-width: 100%; }
    table { width: 100%; }
    th, td { border: 1px solid #000; padding: 1px 3px; }
    
    .signature-notes-section { display: block !important; margin-top: 20px; text-align: center; }
    .signature-line-group {
        display: flex; justify-content: space-between; gap: 30px; margin-top: 40px;
        width: 100%; max-width: 100%;
    }
    .signature-block { width: 45%; height: auto; }
    .signature-line { border-bottom: 1px solid black; top: 0; }
    .signature-block .label { font-weight: normal; font-size: 7pt; top: 5px; }
}