/* ==========================================================================
   SERVESAAS HR - PAYROLL ENGINE RESPONSIVE STYLES
   ========================================================================== */

/* Responsive Payroll Tabs */
.payroll-tabs-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.payroll-tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    white-space: nowrap !important;
    user-select: none !important;
}

.payroll-tab-btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-2px) !important;
}

.payroll-tab-btn.active {
    background: #3182ce !important;
    color: #ffffff !important;
    border-color: #3182ce !important;
    box-shadow: 0 4px 12px rgba(49, 130, 206, 0.25) !important;
}

@media (max-width: 900px) {
    .payroll-tabs-bar {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    .payroll-tab-btn {
        padding: 10px 8px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .payroll-tabs-bar {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .payroll-tab-btn {
        padding: 8px 4px !important;
        font-size: 10px !important;
    }
}

/* Payroll List Styles */
.payroll-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px; border: 1px solid #edf2f7; border-radius: 10px;
    margin-bottom: 10px; background: #fff; transition: 0.2s;
}
.payroll-row:hover { border-color: #cbd5e0; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.pr-emp-info h4 { font-size: 14px; color: #1a202c; margin-bottom: 3px; }
.pr-emp-info p { font-size: 11px; color: #718096; }
.pr-salary-info { text-align: right; }
.pr-net { font-size: 16px; font-weight: 800; color: #38a169; display: block; }
.pr-gross { font-size: 11px; color: #a0aec0; text-decoration: line-through; display: block; }

.status-tag { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 12px; margin-top: 5px; display: inline-block;}
.status-tag.pending { background: #feebc8; color: #dd6b20; }
.status-tag.processed { background: #c6f6d5; color: #22543d; }

.pr-actions { display: flex; gap: 8px; align-items: center; }
.btn-icon-pay { background: #ebf8ff; border: none; color: #3182ce; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 14px;}
.btn-icon-pay:hover { background: #bee3f8; }

/* Payslip Modal Tables */
.ps-info-table td { padding: 4px 0; color: #4a5568; }
.ps-money-table { border-collapse: collapse; }
.ps-money-table th, .ps-money-table td { padding: 10px; border-bottom: 1px solid #edf2f7; font-size: 13px; }
.ps-money-table th { background: #f8fafc; color: #2d3748; text-align: left; font-weight: 700; }
.ps-money-table tfoot th { background: #fff; font-size: 14px; border-top: 2px solid #cbd5e0; border-bottom: none; }

/* ================= PRINT STYLES ================= */
@media print {
    body * { visibility: hidden; }
    #payslip-print-area, #payslip-print-area * { visibility: visible; }
    #payslip-print-area { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; padding: 0; }
    .no-print { display: none !important; }
    .custom-modal { background: none; }
    .payslip-container { box-shadow: none; border: none; }
}