/* Custom styles for the Cleaning Job Scheduler */

/* Ensure mobile-friendly inputs */
@media (max-width: 640px) {
    .grid {
        grid-template-columns: 1fr !important;
    }
}

/* Animation for loading spinner */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Custom scrollbar for modal */
.max-h-screen::-webkit-scrollbar {
    width: 6px;
}

.max-h-screen::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.max-h-screen::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.max-h-screen::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Toast notifications positioning */
.fixed.top-4.right-4 {
    z-index: 9999;
}

/* Improve form input appearance on mobile */
input[type="date"], 
input[type="time"], 
input[type="tel"], 
input[type="number"], 
select, 
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Focus states for better accessibility */
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* Status indicators */
.status-scheduled {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-in-progress {
    background-color: #DBEAFE;
    color: #1E40AF;
}

.status-completed {
    background-color: #D1FAE5;
    color: #065F46;
}

.status-cancelled {
    background-color: #FEE2E2;
    color: #991B1B;
}

/* Swedish flag colors accent */
.sweden-accent {
    border-left: 4px solid #FFD700;
    background: linear-gradient(135deg, #005293 0%, #FFD700 100%);
    color: white;
}

/* Mobile-first responsive design improvements */
@media (max-width: 768px) {
    .text-lg {
        font-size: 1rem;
    }
    
    .p-6 {
        padding: 1rem;
    }
    
    .space-y-4 > * + * {
        margin-top: 1rem;
    }
    
    .max-w-7xl {
        max-width: 100%;
        padding: 0 1rem;
    }
}

/* Print styles for job details */
@media print {
    .bg-gray-50,
    .bg-white {
        background: white !important;
    }
    
    .shadow,
    .shadow-lg,
    .shadow-xl {
        box-shadow: none !important;
    }
    
    button {
        display: none !important;
    }
}