/* ===== RESPONSIVE DESIGN - MOBILE FIRST ===== */

/* Mobile styles (default) */
@media (max-width: 768px) {
    .pwa-login-card {
        padding: 30px 20px;
        margin: 20px;
        max-width: calc(100% - 40px);
    }

    .pwa-header {
        padding: 12px 16px;
        height: 50px;
    }

    .pwa-logo {
        font-size: 14px;
    }

    .pwa-content {
        padding: 12px;
        padding-bottom: 70px;
    }

    .pwa-job-card {
        padding: 14px;
        margin-bottom: 10px;
    }

    .pwa-modal-content {
        max-width: 100%;
        margin: 10px;
        border-radius: 12px;
    }

    .pwa-modal-header {
        padding: 16px;
    }

    .pwa-modal-body {
        padding: 16px;
    }

    /* Job detail modal full screen on mobile */
    .pwa-modal.job-detail-modal {
        padding: 0;
    }

    .pwa-modal.job-detail-modal .pwa-modal-content {
        max-width: 100%;
        max-height: 100%;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .pwa-job-detail-tabs {
        padding: 0;
        gap: 0;
        justify-content: space-around;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .pwa-job-detail-tabs .pwa-tab-button {
        flex: 0 0 auto;
        padding: 10px 12px;
        font-size: 12px;
    }

    .pwa-job-detail-tabs .pwa-tab-button span {
        display: none;
    }

    .pwa-job-detail-tabs .pwa-tab-button i {
        font-size: 16px;
    }

    /* Bottom navigation */
    .pwa-tab-nav {
        height: 56px;
        padding: 0;
    }

    .pwa-tab-nav button {
        padding: 6px;
    }

    .pwa-tab-nav button i {
        font-size: 18px;
    }

    .pwa-tab-nav button span {
        font-size: 10px;
    }

    /* Forms on mobile */
    .pwa-form-row {
        grid-template-columns: 1fr;
    }

    /* Photo grid responsive */
    .pwa-photo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    /* Profile sections */
    .pwa-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Checklist items */
    .pwa-checklist-item {
        padding: 8px 0;
    }

    .pwa-checklist-name {
        font-size: 13px;
    }

    /* Timesheet entries */
    .pwa-timesheet-entry {
        padding: 10px;
        margin-bottom: 6px;
    }

    /* Message positioning */
    .pwa-message {
        top: 60px;
        left: 10px;
        right: 10px;
        transform: none;
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .pwa-container {
        max-width: 768px;
        margin: 0 auto;
    }

    .pwa-content {
        padding: 16px;
    }

    .pwa-job-card {
        padding: 16px;
    }

    .pwa-modal-content {
        max-width: 600px;
    }

    .pwa-photo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Desktop styles */
@media (min-width: 1025px) {
    .pwa-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .pwa-content {
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 16px;
    }

    .pwa-jobs-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 16px;
    }

    .pwa-modal-content {
        max-width: 800px;
    }

    .pwa-photo-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Show tab text on desktop */
    .pwa-job-detail-tabs .pwa-tab-button span {
        display: inline;
    }
}

/* Small phone styles */
@media (max-width: 380px) {
    .pwa-login-header h1 {
        font-size: 24px;
    }

    .pwa-job-reference {
        font-size: 14px;
    }

    .pwa-job-card {
        padding: 12px;
    }

    .pwa-tab-nav button span {
        font-size: 9px;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    .pwa-header {
        height: 45px;
        padding: 8px 16px;
    }

    .pwa-content {
        padding-bottom: 60px;
    }

    .pwa-tab-nav {
        height: 50px;
    }

    .pwa-modal-content {
        max-height: 85vh;
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari */
    .pwa-container {
        height: 100vh;
        height: -webkit-fill-available;
    }

    .pwa-login-screen {
        height: 100vh;
        height: -webkit-fill-available;
    }

    /* Account for iOS safe areas */
    .pwa-tab-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .pwa-content {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    /* Already dark by default */
}

/* Light mode override if needed */
@media (prefers-color-scheme: light) {
    /* Keep dark theme regardless of system preference */
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .pwa-job-card {
        border-width: 2px;
    }

    .pwa-btn {
        border: 2px solid currentColor;
    }

    .pwa-form-control:focus {
        outline: 2px solid #22c55e;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .pwa-loading i {
        animation: none;
    }
}

/* Print styles */
@media print {
    .pwa-header,
    .pwa-tab-nav,
    .pwa-btn,
    .pwa-modal {
        display: none !important;
    }

    .pwa-container {
        position: static;
        height: auto;
        background: white;
        color: black;
    }

    .pwa-job-card {
        background: white;
        border: 1px solid black;
        page-break-inside: avoid;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Touch targets minimum 44x44px */
    .pwa-btn {
        min-height: 44px;
    }

    .pwa-checkbox input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    .pwa-tab-nav button {
        min-height: 44px;
    }

    /* Larger close buttons for modals */
    .pwa-btn-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Scrollbar styles for different screen sizes */
@media (max-width: 768px) {
    /* Hide scrollbars on mobile for cleaner look */
    .pwa-content::-webkit-scrollbar {
        display: none;
    }

    .pwa-content {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
}

/* Status bar adjustments for PWA */
@media (display-mode: standalone) {
    .pwa-header {
        padding-top: env(safe-area-inset-top);
    }
}

/* Notch/cutout handling */
@supports (padding: max(0px)) {
    .pwa-header {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .pwa-tab-nav {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}