body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f3f4f6; 
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar { 
    width: 8px; 
}
.custom-scrollbar::-webkit-scrollbar-track { 
    background: #f1f1f1; 
}
.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: #888; 
    border-radius: 10px; 
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { 
    background: #555; 
}

/* Modal Base */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 50; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.5); 
    animation: fadeIn 0.3s; 
}
.modal-content { 
    animation: slideIn 0.3s; 
    margin-bottom: 5rem; /* Add space at bottom for mobile */
}

/* Modal Animations */
@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}
@keyframes slideIn { 
    from { transform: translateY(-50px); opacity: 0; } 
    to { transform: translateY(0); opacity: 1; } 
}

/* Action Buttons */
.action-btn { 
    padding: 4px 8px; 
    font-size: 12px; 
    border-radius: 4px; 
    font-weight: 500; 
    color: white; 
    border: none; 
    cursor: pointer; 
    transition: background-color 0.2s; 
}
.edit-btn { 
    background-color: #3b82f6; /* blue-600 */
}
.edit-btn:hover { 
    background-color: #2563eb; /* blue-700 */
}
.delete-btn { 
    background-color: #ef4444; /* red-500 */
}
.delete-btn:hover { 
    background-color: #dc2626; /* red-600 */
}

/* Exit/Reactivate Buttons */
.exit-btn { 
    background-color: #f97316; /* orange-500 */
}
.exit-btn:hover { 
    background-color: #ea580c; /* orange-600 */
}
.reactivate-btn { 
    background-color: #10b981; /* emerald-500 */
}
.reactivate-btn:hover { 
    background-color: #059669; /* emerald-600 */
}

/* History Link Style */
.history-detail-link { 
    color: #3b82f6; 
    font-weight: 500; 
    cursor: pointer; 
}
.history-detail-link:hover { 
    text-decoration: underline; 
}

/* NEW: WhatsApp Reminder UI Classes */
.wa-link-item {
    transition: opacity 0.3s;
}
.wa-link-item.skipped {
    opacity: 0.4;
    pointer-events: none;
}
.wa-open-btn.clicked {
    background-color: #6b7280; /* gray-500 */
    color: white;
    pointer-events: none;
}
.wa-skip-btn.skipped {
    background-color: #9ca3af; /* gray-400 */
    color: white;
    pointer-events: none;
}

/* NEW: Responsive Payroll Card */
@media (max-width: 768px) {
    .payroll-card-layout {
        flex-direction: column;
        align-items: flex-start;
    }
    .payroll-card-actions {
        width: 100%;
        margin-top: 1rem;
        flex-direction: column;
        align-items_left: flex-start;
    }
    .payroll-card-actions button {
        width: 100%;
    }
    .payroll-card-inputs {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .payroll-card-inputs > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .payroll-card-inputs input {
        width: 100px;
    }
}