/* FoodStream Approvals Flow - Custom Styles */

/* Base variables already defined in HTML, this file for additional customizations */

/* Form inputs */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* Button hover effects */
.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Card shadows */
.card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Toast animations */
.toast-enter {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ========================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Ensure touch targets are large enough */
@media (max-width: 768px) {
    button, a.btn-primary, .plan-button, .cta-button, [type="submit"] {
        min-height: 44px;
    }

    /* Prevent horizontal overflow globally */
    body {
        overflow-x: hidden;
    }

    /* Admin page header tweaks */
    .flex.justify-between.items-center.mb-8 {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Filter grids stack on mobile */
    .grid.grid-cols-1.md\:grid-cols-4,
    .grid.grid-cols-1.md\:grid-cols-5 {
        grid-template-columns: 1fr !important;
    }

    /* Stat cards - 2 per row on mobile */
    .grid.grid-cols-1.md\:grid-cols-4.gap-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tables should scroll horizontally */
    .card.overflow-hidden {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Card padding reduction */
    .card {
        padding: 1rem;
    }

    .card.p-6 {
        padding: 1rem;
    }

    /* Modal responsiveness */
    .fixed.inset-0.bg-black.bg-opacity-50 > div {
        margin: 1rem;
        max-width: calc(100vw - 2rem) !important;
        max-height: calc(100vh - 2rem) !important;
    }

    /* Grid column details in modals */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Toast position */
    #toast-container {
        left: 1rem;
        right: 1rem;
    }

    /* Action button rows */
    .flex.space-x-3 {
        flex-direction: column;
        gap: 0.5rem;
    }

    .flex.space-x-3 > * {
        margin-left: 0 !important;
    }

    /* Table text sizing */
    table th, table td {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    /* License key monospace */
    code.font-mono {
        font-size: 0.7rem;
        word-break: break-all;
    }
}

@media (max-width: 480px) {
    /* Stat cards single column on very small screens */
    .grid.grid-cols-1.md\:grid-cols-4.gap-4 {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .card.p-4 {
        padding: 0.75rem;
    }

    .text-2xl {
        font-size: 1.25rem;
    }

    /* Tighter spacing */
    .mb-6 {
        margin-bottom: 1rem;
    }

    .mb-8 {
        margin-bottom: 1.25rem;
    }
}