/* Custom styles for COGS Tracker */

.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-container table {
    min-width: 100%;
}

/* Remove spinner from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Smooth transitions */
button, input, select {
    transition: all 0.2s ease-in-out;
}

/* Focus styles */
input:focus,
button:focus {
    outline: none;
}

/* Loading spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

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

/* Modal styles */
.modal-overlay {
    z-index: 9999;
}

.modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

/* Mobile-friendly improvements */
@media (max-width: 768px) {
    /* Larger touch targets */
    button, a {
        min-height: 44px; /* Apple's recommended touch target size */
        min-width: 44px;
    }
    
    /* Better table scrolling on mobile */
    .table-container {
        font-size: 0.875rem;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    .table-container table {
        min-width: 800px; /* Force horizontal scroll on very small screens */
    }
    
    .table-container th,
    .table-container td {
        padding: 0.75rem 0.5rem;
        white-space: nowrap;
    }
    
    /* Stack buttons vertically on mobile */
    .flex.gap-2 {
        flex-wrap: wrap;
    }
    
    /* Larger form inputs */
    input[type="text"],
    input[type="number"],
    input[type="date"] {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    /* Better modal sizing */
    .modal-content {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    /* Compact header on mobile */
    .text-2xl {
        font-size: 1.5rem;
    }
    
    .text-3xl {
        font-size: 2rem;
    }
}

/* Very small screens */
@media (max-width: 640px) {
    .table-container table {
        min-width: 700px;
        font-size: 0.8rem;
    }
    
    .table-container th,
    .table-container td {
        padding: 0.5rem 0.25rem;
    }
    
    /* Make action buttons stack */
    .flex.justify-center.gap-2 {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .flex.justify-center.gap-2 button,
    .flex.justify-center.gap-2 a {
        width: 100%;
        justify-content: center;
    }
}