/* Base Reset */
* {
    box-sizing: border-box;
}

body {
    background-color: #555;
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
    -webkit-print-color-adjust: exact;
}

/* Page Container (A4) */
.page-container {
    background-color: white;
    width: 210mm;
    /* Fixed A4 height logic or min-height */
    min-height: 297mm;
    padding: 10mm 10mm;
    /* Standard margins */
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Standardized spacer tweaks for filling A4 */

/* Header Section */
.header-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2mm;
    /* Compact again */
    align-items: center;
    /* Vertically center items including logo */
}

.logo-container img {
    height: 90px;
    /* Increased per user request */
    width: auto;
}

/* ... */

/* General Section Styles */
.section {
    border: 1px solid black;
    margin-bottom: 3mm;
    /* Compact spacing */
    page-break-inside: avoid;
}

/* ... */

.text-area-large {
    height: 70px;
    /* Reduced to fit page */
    padding: 5px;
}

/* ... */

.text-area-medium {
    height: 40px;
    /* Reduced */
}

/* ... */

.split-grid {
    display: flex;
    min-height: 130px;
    /* Slight increase to perfectly match calculated Applicant height */
}

/* ... */

/* Remarks in Split Grid (IT / Approvals) */
.remarks-row {
    display: flex;
    min-height: 80px;
    /* Increased to allow more text input */
    height: auto;
    flex: 1;
    /* Grow to fill the section height */
    border-top: none !important;
    /* Strict removal of top border */
}

.remarks-row .sub-label {
    min-width: 35mm;
    max-width: 35mm;
    border-right: 1px solid black;
    border-bottom: none !important;
    /* Strict removal of bottom border */
    border-top: none !important;
    /* Strict removal */
    align-items: flex-start;
    padding-top: 6px;
}

.remarks-row .sub-input {
    flex: 1;
    background-color: #dbeaff;
    border-bottom: none !important;
    /* Strict removal of bottom border */
    border-top: none !important;
    /* Strict removal */
}

.remarks-row textarea,
.remarks-row input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    resize: none;
    padding: 4px;
    font-family: inherit;
    font-size: inherit;
}

.company-list label {
    display: flex;
    /* Better alignment */
    align-items: center;
    font-size: 8pt;
    /* Slightly smaller to accommodate 5 items */
    margin-bottom: 3px;
    cursor: pointer;
    font-weight: bold;
    color: #333;
    line-height: 1.1;
}

.company-list input[type="checkbox"] {
    margin-right: 5px;
    width: 12px;
    height: 12px;
}

.form-title-box {
    border: 1px solid black;
    /* Simple thin border */
    /* Double border effect using box-shadow instead for elegance if needed, 
       but user wants clean lines. Let's stick to simple 1px or standard double 3px is fine if section borders are thin.
       User circled the SECTION border. Let's make Title Box standard 1px to match. */
    padding: 5px 10px;
    text-align: center;
    width: 240px;
    height: auto;
    /* Allow auto height */
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    /* Remove top margin for perfect alignment */
    border-radius: 10px;
    /* Rounded Corners */
    overflow: hidden;
}

.form-title-box h1 {
    font-size: 13pt;
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

/* General Section Styles */
.section {
    border: 1px solid black;
    margin-bottom: 3mm;
    /* Compact spacing */
    page-break-inside: avoid;
    border-radius: 10px;
    /* Rounded Corners */
    overflow: hidden;
    /* Clip inner content to corners */
}

.section-title {
    font-weight: 800;
    font-size: 10pt;
    padding: 4px 5px;
    border-bottom: 1px solid black;
    /* Restored */
    background-color: white;
    text-transform: uppercase;
    position: relative;
    /* Ensure it sits above content */
    z-index: 20;
    /* High priority for Header Border */
}

/* Common Cell Styles */
.label-cell {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    padding: 4px 6px;
    font-size: 9pt;
    display: flex;
    align-items: center;
    font-weight: normal;
    /* Labels usually normal weight in forms */
    background-color: white;
    position: relative;
    /* Ensure border visibility */
    z-index: 5;
}

.input-cell {
    background-color: #dbeaff;
    /* Softer blue */
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    padding: 0;
    position: relative;
    /* Ensure border visibility */
    z-index: 5;
}

/* Typography for Inputs */
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 10pt;
    padding: 4px 6px;
    color: #000;
}

textarea {
    resize: none;
    line-height: 1.3;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    background-color: #fffde7;
    /* Yellow highlight on focus */
}

/* ------------------------------- */
/* Specific Section Layouts */
/* ------------------------------- */

/* APPLICANT GRID (Custom Layout) */
.applicant-grid {
    display: grid;
    /* Define columns precisely: Label(35mm) | Input(Auto) | Label(25mm) | Input(Auto) */
    grid-template-columns: 35mm 1fr 25mm 0.65fr;
}

/* Borders for Applicant Grid - Standardize All Cells */
.applicant-grid>div {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

/* Remove right border for the last column (every 4th item) */
.applicant-grid>div:nth-child(4n) {
    border-right: none;
}

/* Remove bottom border for the last items (Complex Col and Signature Box) */
/* Complex Col spans 1-2, Signature 3-4. Total items in last "visual" row are 2. */
/* But in DOM, they are the 9th and 10th items. */
.complex-left-col,
.signature-box-large {
    border-bottom: none !important;
}

/* Enforce 30px height for the first 2 rows */
.applicant-grid>div:nth-child(-n+8) {
    height: 30px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Remove right border for the last column (every 4th item) */
.applicant-grid>div:nth-child(4n) {
    border-right: none;
}

/* Complex Merged Cells in Applicant */
.complex-left-col {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    border-right: none !important;
    position: relative;
}

.complex-left-col::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background-color: black;
    z-index: 10;
    /* High z-index */
}

.signature-box-large {
    grid-column: 3 / 5;
    position: relative;
    border-right: none !important;
    background-color: white;
}

/* Sub-rows inside complex columns */
.sub-grid-row {
    display: flex;
    border-bottom: none !important;
    /* Strict removal of container border */
    height: 30px;
    box-sizing: border-box;
}

.sub-label {
    width: 35mm;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    /* Restored */
    flex-shrink: 0;
}

.sub-input {
    flex: 1;
    border-right: none;
    border-bottom: 1px solid black;
    /* Restored */
}

/* Purpose Area */
.purpose-label {
    padding: 4px 6px;
    font-size: 9pt;
    border-bottom: 1px solid black;
    background-color: white;
}

.purpose-area {
    flex: 1;
    padding: 0;
    background-color: #dbeaff;
    /* Ensure no bottom border for the text area container if it's the last item */
    border-bottom: none;
}

/* ... Text Area styles ... */
.text-area-large {
    height: 70px;
    padding: 5px;
}

/* Signature Line */
.signature-line {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    border-top: 1px solid black;
    font-size: 8pt;
    padding-top: 2px;
    color: #444;
    z-index: 20;
    /* Ensure visibility above overlapping elements */
}

/* Applicant Grid - Column 3 Vertical Line Fix */
.applicant-grid>div:nth-child(4n-1) {
    border-right: none;
    position: relative;
}

.applicant-grid>div:nth-child(4n-1)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background-color: black;
    z-index: 10;
}

/* ASSET CONFIGURATION GRID */
.asset-grid {
    display: flex;
}

.asset-grid .label-cell:first-child {
    width: 35mm;
    flex-shrink: 0;
    border-right: 1px solid black !important;
}

/* Asset Grid - Middle Vertical Line (Input Cell 2) */
.asset-grid .input-cell:nth-child(2) {
    width: 79mm;
    border-right: none !important;
    flex-shrink: 0;
    position: relative;
}

.asset-grid .input-cell:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background-color: black;
    z-index: 10;
}

/* Asset Grid - Value Label Vertical Line */
.asset-grid .label-cell:nth-child(3) {
    width: 55mm;
    flex-shrink: 0;
    border-right: none !important;
    position: relative;
}

.asset-grid .label-cell:nth-child(3)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background-color: black;
    z-index: 10;
}

.asset-grid .input-cell:last-child {
    flex: 1;
    border-right: none !important;
}

.full-row-label {
    border-bottom: 1px solid black;
    padding: 4px 6px;
    font-size: 9pt;
    font-weight: normal;
}

.full-row-input {
    background-color: #dbeaff;
    padding: 0;
    border-bottom: none !important;
    /* Last row needs no bottom border */
}

.text-area-medium {
    height: 90px;
}


/* IT & APPROVALS (Split 60/40) */
.split-grid {
    display: flex;
}

.left-col {
    width: 60%;
    border-right: none !important;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* Force Vertical Line for Split Grid */
.left-col::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background-color: black;
    z-index: 10;
}

.right-col {
    width: 40%;
    position: relative;
    background-color: white;
    border-left: none !important;
}

/* Remove .right-col::before as it causes double vertical lines */

/* 
   Prevent Double Bottom Borders on the very last row of a column.
   The Row Container AND its Cells must not have a bottom border, 
   so the Section's bottom border is the distinct single line.
*/
.left-col>div:last-child,
.left-col>div:last-child .sub-label,
.left-col>div:last-child .sub-input,
.left-col>div:last-child .label-cell,
.left-col>div:last-child .input-cell {
    border-bottom: none !important;
}

/* Duplicate sub-grid-row rule REMOVED */

/* Force missing line in IT Section (Reason Row) specifically */
/* IT Section is typically the 3rd .section (Applicant, Asset, IT) */
.section:nth-of-type(3) .left-col>.sub-grid-row:nth-child(2) {
    position: relative;
    /* Ensure no conflicts */
}

.section:nth-of-type(3) .left-col>.sub-grid-row:nth-child(2)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: black;
    z-index: 25;
    /* Force visibility over any background */
}


/* PRINT OPTIMIZATION */
@media print {
    @page {
        size: A4 portrait;
        margin: 0;
        /* Browser handles margins usually, but we set body/page-container */
    }

    body {
        margin: 0;
        padding: 0;
        background-color: white;
    }

    .page-container {
        width: 100%;
        min-height: auto;
        /* Allow auto height for print */
        height: 100vh;
        /* Force full height? */
        box-shadow: none;
        margin: 0;
        padding: 10mm;
        /* Print margin */
        border: none;
    }

    /* Force background colors */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
}