/* Mobile-First Responsive Design for Jiraffe */

/* Base Mobile Styles */
@media (max-width: 768px) {
    /* Typography adjustments for mobile */
    h1 {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }
    
    h3 {
        font-size: 1.125rem !important;
        line-height: 1.5rem !important;
    }
    
    /* Button adjustments */
    .btn-mobile {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        min-height: 44px; /* iOS touch target minimum */
    }
    
    /* Form inputs for better mobile interaction */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 44px;
    }
    
    /* Table responsiveness */
    .table-mobile {
        font-size: 0.875rem;
    }
    
    .table-mobile th,
    .table-mobile td {
        padding: 0.5rem 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }
    
    /* Card adjustments */
    .card-mobile {
        margin: 0.5rem;
        padding: 1rem;
        border-radius: 0.5rem;
    }
    
    /* Modal adjustments */
    .modal-mobile {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        border-radius: 0.75rem;
    }
    
    /* Navigation adjustments */
    .nav-mobile {
        padding: 0.5rem;
    }
    
    /* Grid adjustments */
    .grid-mobile-1 {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .grid-mobile-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    /* Spacing adjustments */
    .space-mobile {
        margin: 0.5rem 0;
    }
    
    /* Touch-friendly elements */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Swipe gestures */
    .swipeable {
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }
    
    /* Sticky elements adjustments */
    .sticky-mobile {
        position: sticky;
        top: 57px; /* Account for mobile header */
        z-index: 30;
    }
    
    /* Bottom sheet style modals */
    .bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
        z-index: 50;
    }
    
    .bottom-sheet.open {
        transform: translateY(0);
    }
    
    /* Pull-to-refresh indicator */
    .pull-to-refresh {
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        padding: 1rem;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 2rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
    
    /* Loading states */
    .loading-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        font-size: 0.875rem;
        color: #6b7280;
    }
    
    /* Error states */
    .error-mobile {
        padding: 1rem;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 0.5rem;
        color: #dc2626;
        font-size: 0.875rem;
        text-align: center;
    }
    
    /* Success states */
    .success-mobile {
        padding: 1rem;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: 0.5rem;
        color: #16a34a;
        font-size: 0.875rem;
        text-align: center;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .tablet-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tablet-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Show tablet-specific elements */
    .tablet-only {
        display: block !important;
    }
    
    /* Hide mobile-only on tablet */
    .mobile-only {
        display: none !important;
    }
}

/* Desktop adjustments */
@media (min-width: 1024px) {
    /* Hide mobile-only elements */
    .mobile-only {
        display: none !important;
    }
    
    .tablet-only {
        display: none !important;
    }
    
    /* Show desktop-only elements */
    .desktop-only {
        display: block !important;
    }
}

/* Dark mode support for mobile */
@media (prefers-color-scheme: dark) {
    @media (max-width: 768px) {
        .card-mobile {
            background-color: #1f2937;
            border-color: #374151;
            color: #f9fafb;
        }
        
        .bottom-sheet {
            background-color: #1f2937;
            border-color: #374151;
        }
        
        .error-mobile {
            background-color: #7f1d1d;
            border-color: #dc2626;
            color: #fca5a5;
        }
        
        .success-mobile {
            background-color: #14532d;
            border-color: #16a34a;
            color: #86efac;
        }
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Focus states */
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    a:focus {
        outline: 2px solid #7c3aed;
        outline-offset: 2px;
    }
    
    /* High contrast mode */
    @media (prefers-contrast: high) {
        .card-mobile {
            border-width: 2px;
        }
        
        button {
            border-width: 2px;
        }
    }
    
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .bottom-sheet {
            transition: none;
        }
        
        .pull-to-refresh {
            transition: none;
        }
        
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Print styles */
@media print {
    .mobile-only,
    .desktop-only,
    .tablet-only,
    .bottom-sheet,
    .pull-to-refresh,
    nav,
    .sidebar,
    button {
        display: none !important;
    }
    
    .card-mobile {
        border: 1px solid #000;
        break-inside: avoid;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .landscape-hide {
        display: none !important;
    }
    
    .modal-mobile {
        max-height: calc(100vh - 1rem);
    }
    
    /* Adjust bottom navigation for landscape */
    .bottom-nav-landscape {
        height: 3rem;
    }
    
    .bottom-nav-landscape .nav-item {
        font-size: 0.75rem;
    }
    
    .bottom-nav-landscape svg {
        width: 1rem;
        height: 1rem;
    }
}