/* public/style.css */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f9fafb;
}

/* This new rule will handle horizontal scrolling for the paystub,
   allowing the user to scroll sideways to see the full table. */
.paystub-preview-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-column {
    height: calc(100vh - 12rem);
    overflow-y: auto;
}

.paystub-container {
    font-family: 'Arial', sans-serif;
    border: 1px solid #dee2e6;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    font-size: 14px;
    background-color: white;
}
.paystub-table th, .paystub-table td {
    padding: 0.25rem 0.5rem;
    vertical-align: top;
    white-space: nowrap; /* 🔥 prevent line breaks in table cells */
}
.paystub-table th {
    font-weight: bold;
    color: #333;
}
.paystub-table td {
    color: #212529;
}
.border-b-heavy {
    border-bottom: 2px solid black;
}
.border-t-heavy {
    border-top: 2px solid black;
}
.section-title {
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 0.5rem;
}
.detachable-stub {
    border-top: 2px dashed #999;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

/* Custom style for invalid fields */
.invalid-field {
    border-color: #ef4444 !important; /* Tailwind red-500 */
    background-color: #fef2f2 !important; /* Tailwind red-50 */
}

/* Cropper.js max-height for image in modal */
#logo-editor-image-container > img {
    max-height: 50vh;
}

@media (max-width: 1023px) { /* Below lg screens */
    .scrolling-column {
        height: auto;
        overflow-y: visible;
    }
}

/* --- PRINT STYLES --- */
@media print {
    /* --- FIX for squeezed Admin Codes row --- */
    .admin-codes-row > div {
        white-space: nowrap !important;
        min-width: 60px !important;  /* ensures each code has breathing room */
        font-size: 11px !important;
    }
    .admin-codes-row {
        display: grid;
        grid-template-columns: repeat(5, minmax(70px, 1fr)); /* balance spacing */
        gap: 8px;
    }
    body { margin: 0; padding: 0; background-color: #fff; }
    @page { size: letter; margin: 0 !important; }
    
    body * { visibility: hidden; }
    #paystubs-wrapper, #paystubs-wrapper * { visibility: visible; }
    .no-print, header, footer, #logo-editor-modal { display: none !important; }

    #paystubs-wrapper {
        position: absolute; left: 0; top: 0; width: 100%; padding: 0;
    }
    .scrolling-column { height: auto; overflow-y: visible; }
    
    .paystub-instance-wrapper {
        page-break-inside: avoid !important;
        page-break-after: always;
        width: 100%;
    }
    .paystub-instance-wrapper:last-child { page-break-after: avoid; }

    .paystub-container {
        border: none !important; box-shadow: none !important;
        font-size: 12px !important; padding: 1rem !important;
    }
    .detachable-stub { padding-top: 1rem !important; }
    .paystub-table th, .paystub-table td { padding: 3px 5px !important; }

    /* Hide mobile scroll hint in print/PDF */
    .mobile-scroll-indicator {
        display: none !important;
    }

    /* --- FIX for squeezed admin codes --- */
    .paystub-table th,
    .paystub-table td {
        white-space: nowrap !important;
    }

    /* Specifically force the first "admin codes" cell row to have more width */
    .admin-codes-row td {
        min-width: 140px !important;    /* 🔥 guarantee space */
        font-size: 11px !important;     /* keep it compact but inline */
    }
}

.paystub-container .section-title + table td:first-child { padding-left: 0; }