/* Global Responsive Styles for AgWise */

/* Mobile First - Base styles for mobile */
* {
    box-sizing: border-box;
}

/* Tables */
@media (max-width: 768px) {
    table {
        font-size: 0.85rem;
    }
    
    th, td {
        padding: 0.5rem !important;
    }
    
    /* Stack table on very small screens */
    @media (max-width: 480px) {
        table, thead, tbody, th, td, tr {
            display: block;
        }
        
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        
        tr {
            margin-bottom: 1rem;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 0.5rem;
        }
        
        td {
            border: none;
            position: relative;
            padding-left: 50% !important;
            text-align: right;
        }
        
        td:before {
            content: attr(data-label);
            position: absolute;
            left: 0.5rem;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }
    }
}

/* Forms */
@media (max-width: 768px) {
    input, select, textarea, button {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    .auth-container {
        margin: 50px auto !important;
        padding: 20px !important;
    }
}

/* Grid layouts */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .runs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Containers */
@media (max-width: 768px) {
    .container {
        padding: 0 0.5rem !important;
    }
    
    .header {
        padding: 1rem !important;
    }
    
    .header h1 {
        font-size: 1.5rem !important;
    }
}

/* Modals */
@media (max-width: 768px) {
    .modal-content {
        width: 95% !important;
        margin: 10% auto !important;
        padding: 1rem !important;
    }
}

/* Buttons */
@media (max-width: 768px) {
    button {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* Pagination */
@media (max-width: 480px) {
    .pagination {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .pagination button {
        width: 100%;
    }
}

/* Tabs */
@media (max-width: 768px) {
    .tabs {
        flex-wrap: wrap;
        gap: 0.25rem !important;
    }
    
    .tab-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
    }
}

/* Charts */
@media (max-width: 768px) {
    canvas {
        max-height: 250px !important;
    }
}

/* Maps */
@media (max-width: 768px) {
    #map {
        height: 300px !important;
    }
}

/* Step workflow */
@media (max-width: 768px) {
    .step-container {
        padding: 1rem !important;
    }
    
    .step-header h2 {
        font-size: 1.25rem !important;
    }
}

/* Cards */
@media (max-width: 768px) {
    .card {
        margin: 0.5rem 0 !important;
    }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .header {
        padding: 0.75rem !important;
    }
    
    .header h1 {
        font-size: 1.25rem !important;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 95%;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    button, a, .clickable {
        min-height: 44px;
        min-width: 44px;
    }
}