:root {
    --input-bg: #ffffff; 
    --border-color: #000;
    --header-bg: #e0e0e0; /* Gray for titles */
    
    --btn-print: #333;
    --btn-pdf: #dc3545;
    --btn-export: #17a2b8;
    --btn-import: #ffc107;
    --btn-save: #28a745;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #525659;
    margin: 0;
    padding: 20px;
}

/* --- CONTROLS --- */
.options-bar {
    width: 210mm; margin: 0 auto 15px auto; background-color: white; padding: 10px;
    border-radius: 5px; display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.btn-group { display: flex; gap: 10px; }
button {
    padding: 10px 18px; border: none; border-radius: 4px; cursor: pointer;
    font-weight: bold; color: white; font-size: 13px; text-transform: uppercase;
}
.btn-print { background-color: var(--btn-print); }
.btn-pdf { background-color: var(--btn-pdf); }
.btn-export { background-color: var(--btn-export); }
.btn-import { background-color: var(--btn-import); color: black; }
.btn-save { background-color: var(--btn-save); }
#file-input-fallback { display: none; }
#status-bar { width: 210mm; margin: 0 auto 10px auto; padding: 10px; text-align: center; display: none; color: white; border-radius: 4px; font-weight: bold; }
.status-success { background-color: #28a745; }
.status-error { background-color: #dc3545; }
.status-info { background-color: #17a2b8; }

/* --- A4 PAGE LAYOUT --- */
.container {
    width: 210mm;
    height: 296mm; 
    max-height: 296mm;
    background-color: white;
    margin: 0 auto;
    padding: 15px; 
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

/* --- GLOBAL INPUTS --- */
input {
    background-color: var(--input-bg); 
    border: none; 
    width: 100%; 
    height: 100%;
    font-family: inherit; 
    font-size: 11px;
    box-sizing: border-box; 
    color: #000000; 
    padding: 2px 4px;
}
input:focus { outline: 1px solid #000; z-index: 10; position: relative; }

/* Keep JOB NO Red */
.job-no-input { color: #cc0000; font-weight: bold; font-size: 13px; width: 100px; }

.header-title {
    text-align: center; font-size: 20px; font-weight: 800; 
    padding-bottom: 5px; border-bottom: 2px solid var(--border-color); margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 1px; color: #000;
}

/* --- GRID FORM --- */
.form-grid { display: grid; border: 2px solid var(--border-color); margin-bottom: 8px; }

.row { display: flex; border-bottom: 1px solid var(--border-color); min-height: 24px; }
.row:last-child { border-bottom: none; }

.cell { 
    padding: 2px 5px; 
    display: flex; align-items: center; border-right: 1px solid var(--border-color); 
    font-size: 11px; font-weight: bold; color: #000;
}
.cell:last-child { border-right: none; }

.flex-1 { flex: 1; } 
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.w-label { width: 95px; flex-shrink: 0; } 
.w-label-sm { width: 45px; flex-shrink: 0; }

.checkbox-group { display: flex; gap: 15px; font-size: 10px; align-items: center; width: 100%; color: #000; }
.checkbox-group label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* --- CHARGES TABLE --- */
.table-container { flex-grow: 1; } 

table.charges-table {
    width: 100%; border-collapse: collapse; font-size: 10px; border: 2px solid var(--border-color);
}
table.charges-table th {
    background-color: var(--header-bg); border: 1px solid var(--border-color); padding: 4px; text-align: left; color: #000;
}
table.charges-table td { border: 1px solid var(--border-color); padding: 0; height: 18px; }

table.charges-table input { text-align: right; background-color: white; font-size: 10px; padding-right: 5px; color: #000; }

/* Money columns bold black */
table.charges-table td:nth-child(3) input,
table.charges-table td:nth-child(4) input { font-weight: bold; }

.subtotal-row td { background-color: var(--header-bg); font-weight: bold; text-align: right; color: #000; }

/* --- SIGNATURES --- */
.footer-sigs {
    margin-top: 8px;
    margin-bottom: 0;
    display: flex; justify-content: space-between; font-size: 11px; font-weight: bold; border: 1px solid black; color: #000;
}
.footer-col {
    padding: 5px; border-right: 1px solid black; flex: 1; text-align: center;
    height: 80px; 
    display: flex; align-items: flex-start; justify-content: center;
}
.footer-col:last-child { border-right: none; }

/* --- PRINT CSS --- */
@media print {
    body { background-color: white; padding: 0; margin: 0; }
    .options-bar, #status-bar { display: none !important; }
    .container { box-shadow: none; margin: 0; width: 100%; height: 100%; border: none; }
    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    input[type=number] { -moz-appearance: textfield; }
}