/* Mobile-Friendly Responsive CSS - Add to all pages */

/* Base responsive improvements */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

body {
    font-size: 16px; /* Prevents iOS zoom on input focus */
}

/* Responsive navigation */
@media (max-width: 768px) {
    .header {
        padding: 0.5rem 0;
    }
    
    .nav-container {
        flex-direction: column;
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }
    
    .logo {
        font-size: 1.1rem;
        width: 100%;
        text-align: center;
    }
    
    .logo img {
        height: 35px !important;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        font-size: 0.85rem;
    }
    
    .nav-links a {
        padding: 0.5rem;
    }
    
    /* Hide text on mobile, show only icons */
    .nav-links a span:not(.fas):not(.fa) {
        display: none;
    }
    
    .nav-links a i {
        margin-right: 0;
        font-size: 1.2rem;
    }
}

/* Mobile container adjustments */
@media (max-width: 768px) {
    .container {
        padding: 0.5rem;
        margin: 0.5rem auto;
    }
    
    .page-header {
        padding: 1rem;
    }
    
    .page-header h1 {
        font-size: 1.5rem;
    }
    
    .section {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .section h2 {
        font-size: 1.3rem;
    }
}

/* Mobile hero section */
@media (max-width: 768px) {
    .hero {
        padding: 3rem 1rem 2rem;
    }
    
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .cta-button {
        display: block;
        margin: 0.5rem auto;
        width: 90%;
        max-width: 300px;
        text-align: center;
    }
    
    .call-button {
        margin-left: 0;
    }
}

/* Mobile responsive grids */
@media (max-width: 768px) {
    .services-grid,
    .stats-grid,
    .form-grid,
    .info-grid,
    .vehicle-details {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    .two-column {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile tables - make scrollable */
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
        font-size: 0.85rem;
    }
    
    th, td {
        padding: 0.5rem;
        white-space: nowrap;
    }
    
    /* Stack table cells 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 {
            border: 1px solid #ddd;
            margin-bottom: 1rem;
            border-radius: 5px;
        }
        
        td {
            border: none;
            position: relative;
            padding-left: 50%;
            white-space: normal;
        }
        
        td:before {
            position: absolute;
            left: 0.5rem;
            width: 45%;
            padding-right: 0.5rem;
            white-space: nowrap;
            font-weight: bold;
            content: attr(data-label);
        }
    }
}

/* Mobile forms */
@media (max-width: 768px) {
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    .button-group {
        flex-direction: column;
        width: 100%;
    }
    
    .submit-button,
    .cancel-button,
    .action-btn {
        width: 100%;
        text-align: center;
    }
    
    .quick-actions {
        flex-direction: column;
    }
    
    .quick-action-btn,
    .action-button {
        width: 100%;
        text-align: center;
    }
}

/* Mobile cards */
@media (max-width: 768px) {
    .service-card,
    .job-card,
    .contact-item,
    .vehicle-card,
    .stat-card {
        padding: 1rem;
    }
    
    .job-header,
    .contact-header,
    .vehicle-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .job-actions,
    .contact-actions,
    .vehicle-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* Mobile login page */
@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
        max-width: 100%;
        margin: 1rem;
    }
    
    .login-form-section,
    .register-form-section {
        border: none;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .login-form-section:last-child {
        border-bottom: none;
    }
}

/* Mobile filters */
@media (max-width: 768px) {
    .filters,
    .date-filter,
    .report-controls {
        padding: 1rem;
    }
    
    .filters form,
    .control-group {
        flex-direction: column;
    }
    
    .filter-group {
        width: 100%;
        flex-direction: column;
    }
    
    .filter-btn,
    .search-box,
    .form-group {
        width: 100% !important;
        min-width: 100%;
        max-width: 100%;
    }
}

/* Mobile job details */
@media (max-width: 768px) {
    .job-details {
        grid-template-columns: 1fr !important;
    }
    
    .photos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Touch-friendly buttons */
@media (max-width: 768px) {
    button,
    .action-btn,
    .submit-button,
    .filter-btn {
        min-height: 44px; /* iOS recommended touch target */
        padding: 0.75rem 1rem;
    }
}

/* Mobile stat cards */
@media (max-width: 768px) {
    .stat-card .number {
        font-size: 2rem;
    }
    
    .stat-icon {
        font-size: 2rem;
    }
}

/* Mobile timeline */
@media (max-width: 768px) {
    .timeline {
        padding-left: 1rem;
    }
    
    .timeline::before {
        left: 0;
    }
    
    .timeline-item::before {
        left: -1.2rem;
    }
}

/* Hide certain elements on mobile */
@media (max-width: 768px) {
    .no-mobile {
        display: none !important;
    }
}

/* Mobile message boxes */
@media (max-width: 768px) {
    .message {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}

/* Hamburger menu for mobile navigation (optional enhanced version) */
@media (max-width: 768px) {
    .nav-toggle {
        display: block;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
    }
    
    .nav-links.mobile-hidden {
        display: none;
    }
    
    .nav-links.mobile-visible {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: rgba(0, 0, 0, 0.1);
        padding: 1rem;
        border-radius: 5px;
        margin-top: 0.5rem;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 2rem 1rem;
    }
    
    .hero h1 {
        font-size: 1.5rem;
    }
}

/* Small phones (< 375px) */
@media (max-width: 375px) {
    body {
        font-size: 14px;
    }
    
    .page-header h1 {
        font-size: 1.3rem;
    }
    
    .section h2 {
        font-size: 1.1rem;
    }
    
    .stat-card .number {
        font-size: 1.5rem;
    }
}