/* Global CSS for Justus POS System */

/* Touch-friendly enhancements */
.touch-friendly {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.touch-button {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
    font-size: 16px; /* Minimum font size for touch */
}

.touch-input {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
}

/* Button styles */
.btn-primary {
    background: linear-gradient(135deg, #902020 0%, #6a1818 100%);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(144, 32, 32, 0.3), 0 3px 6px rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, #7a1c1c 0%, #5a1414 100%);
}

.btn-secondary {
    background: #6b7280;
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #4b5563;
}

/* Card styles */
.card-hover {
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Status badges */
.status-active {
    background-color: #dcfce7;
    color: #166534;
}

.status-inactive {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Notification toast */
.notification-toast {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.notification-toast.show {
    transform: translateX(0);
    opacity: 1;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    /* Adjust grid layouts for mobile */
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr 1fr;
    }
    
    .grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    /* Adjust table layouts for mobile */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Adjust padding and margins for mobile */
    .p-5 {
        padding: 1rem;
    }
    
    .px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 640px) {
    /* Stack grid items on small screens */
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr;
    }
    
    /* Larger touch targets for mobile */
    .btn-primary, .btn-secondary {
        min-height: 44px;
        font-size: 16px;
        padding: 10px 16px;
    }
    
    .form-input {
        min-height: 44px;
        font-size: 16px;
    }
    
    /* Remove hover effects on touch devices */
    .card-hover {
        transition: none;
    }
    
    .card-hover:hover {
        transform: none;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    }
    
    /* Adjust modal sizes for mobile */
    .max-w-2xl {
        max-width: 95vw;
    }
    
    .max-w-4xl {
        max-width: 95vw;
    }
    
    .max-w-md {
        max-width: 90vw;
    }
}

/* Ensure proper focus states for accessibility */
button:focus, input:focus, select:focus, textarea:focus {
    outline: 2px solid #902020;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12px;
    }
}