/**
 * Portal - Enhanced Responsive Design
 * Mobile-First, Touch-Friendly, International Standards
 * Complements existing main.css with additional responsive features
 */

/* ============================================
   RESPONSIVE ENHANCEMENT SYSTEM
   Breakpoints: Mobile < 640px | Tablet 640-1024px | Desktop > 1024px
   Touch Targets: 44x44px minimum (WCAG 2.1 Level AAA)
   ============================================ */

/* ============================================
   1. BASE RESPONSIVE SETUP
   ============================================ */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* ============================================
   2. MOBILE (< 640px) ENHANCEMENTS
   ============================================ */
@media (max-width: 639px) {
    /* Typography scaling */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    h4 {
        font-size: 1.125rem !important;
    }
    
    /* Container adjustments */
    .container,
    .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Welcome Section Mobile */
    .text-center.mb-16 {
        margin-bottom: 2rem !important;
    }
    
    .text-3xl.sm\:text-4xl.md\:text-5xl {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    .text-lg.sm\:text-xl {
        font-size: 1rem !important;
    }
    
    /* Search Box Mobile */
    .search-wrapper {
        margin-bottom: 2rem !important;
    }
    
    .search-input {
        padding: 1rem 1rem 1rem 3rem !important;
        font-size: 16px !important; /* Prevent iOS zoom */
    }
    
    .search-kbd {
        display: none !important; /* Hide Ctrl+K on mobile */
    }
    
    /* Apps Grid - 1 column on mobile */
    .apps-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* App Card Optimization */
    .app-card {
        padding: 1.25rem !important;
    }
    
    .app-card h3 {
        font-size: 1.125rem !important;
    }
    
    .app-card p {
        font-size: 0.875rem !important;
    }
    
    /* Header Mobile */
    .header-glass .flex.items-center.justify-between {
        height: 3.5rem !important;
    }
    
    /* Touch-Friendly Buttons */
    button,
    a.btn,
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem !important;
    }
    
    /* FAB Mobile Adjustments */
    .fab-container {
        bottom: 1rem !important;
        right: 1rem !important;
        gap: 0.75rem !important;
    }
    
    .fab {
        width: 48px !important;
        height: 48px !important;
    }
    
    /* Modal Mobile Full Screen */
    .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .modal-body {
        max-height: calc(100vh - 140px) !important;
        overflow-y: auto !important;
    }
    
    /* Form Mobile */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-input,
    textarea.form-input,
    select.form-input {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 0.75rem !important;
    }
    
    /* Footer Mobile */
    footer .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }
    
    /* News Ticker Mobile */
    .news-ticker {
        padding: 0.625rem 0 !important;
    }
    
    .news-content {
        font-size: 0.8125rem !important;
    }
    
    .news-manage-btn {
        width: 32px !important;
        height: 32px !important;
        right: 10px !important;
    }
    
    /* Mobile Menu Enhancements */
    .mobile-menu-content {
        width: 85vw !important;
        max-width: 320px !important;
    }
    
    .mobile-menu-item {
        padding: 1rem !important;
        font-size: 1rem !important;
    }
    
    /* Search Modal Mobile */
    .search-modal-content {
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    
    .search-modal-input {
        font-size: 16px !important;
        padding: 1rem 1rem 1rem 3rem !important;
    }
    
    /* AI Chat Mobile */
    .ai-chat-container {
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    
    .ai-input {
        font-size: 16px !important;
    }
    
    .ai-suggestion-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Admin Login Mobile */
    .admin-login-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Color Presets Mobile */
    .color-presets {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .color-preset {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Icon Preview Mobile */
    .icon-preview {
        width: 80px !important;
        height: 80px !important;
    }
    
    /* File Upload Mobile */
    .file-upload-label {
        padding: 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* iOS Safe Area */
    @supports (padding: env(safe-area-inset-bottom)) {
        body {
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        .fab-container {
            bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        }
        
        footer {
            padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ============================================
   3. TABLET & iPAD (640px - 1023px)
   ============================================ */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Typography */
    h1 {
        font-size: 2.25rem !important;
    }
    
    h2 {
        font-size: 1.875rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    /* Container */
    .container,
    .max-w-7xl {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Apps Grid - 2 columns on tablet */
    .apps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }
    
    /* Welcome Section */
    .text-3xl.sm\:text-4xl.md\:text-5xl {
        font-size: 2.25rem !important;
    }
    
    .text-lg.sm\:text-xl {
        font-size: 1.125rem !important;
    }
    
    /* Search Box */
    .search-input {
        padding: 1.125rem 1.25rem 1.125rem 3.25rem !important;
    }
    
    /* Modal Tablet */
    .modal-content {
        width: 90% !important;
        max-width: 600px !important;
        height: auto !important;
        max-height: 85vh !important;
        border-radius: 1.5rem !important;
    }
    
    /* AI Chat Tablet */
    .ai-chat-container {
        width: 90% !important;
        max-width: 700px !important;
        max-height: 85vh !important;
    }
    
    .ai-suggestion-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Search Modal Tablet */
    .search-modal-content {
        width: 90% !important;
        max-width: 700px !important;
        max-height: 85vh !important;
        border-radius: 1.5rem !important;
    }
    
    /* Admin Login Tablet */
    .admin-login-container {
        width: 90% !important;
        max-width: 500px !important;
    }
    
    /* Footer Tablet */
    footer .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
    
    footer .grid.grid-cols-1.md\:grid-cols-3 > div:last-child {
        grid-column: 1 / -1 !important;
        text-align: center !important;
    }
}

/* ============================================
   4. DESKTOP (1024px - 1439px)
   ============================================ */
@media (min-width: 1024px) and (max-width: 1439px) {
    /* Apps Grid - 3 columns */
    .apps-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    /* Container */
    .max-w-7xl {
        max-width: 1200px !important;
    }
}

/* ============================================
   5. LARGE DESKTOP (1440px+)
   ============================================ */
@media (min-width: 1440px) {
    /* Apps Grid - 4 columns */
    .apps-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem !important;
    }
    
    /* Container */
    .max-w-7xl {
        max-width: 1400px !important;
    }
    
    /* Welcome Section */
    .text-3xl.sm\:text-4xl.md\:text-5xl {
        font-size: 3rem !important;
    }
}

/* ============================================
   6. EXTRA LARGE (1920px+) - 4K
   ============================================ */
@media (min-width: 1920px) {
    /* Apps Grid - 5 columns */
    .apps-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    
    .max-w-7xl {
        max-width: 1600px !important;
    }
}

/* ============================================
   7. TOUCH DEVICE ENHANCEMENTS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Touch targets minimum 44x44px */
    button,
    a,
    input,
    select,
    textarea,
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .app-card:hover,
    .btn:hover,
    a:hover {
        transform: none !important;
    }
    
    /* Better tap highlight */
    * {
        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    }
    
    /* Smooth scrolling */
    * {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Larger form controls */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }
    
    /* FAB touch friendly */
    .fab {
        width: 56px !important;
        height: 56px !important;
    }
}

/* ============================================
   8. iOS SPECIFIC FIXES
   ============================================ */
@supports (-webkit-touch-callout: none) {
    /* Safe areas for iPhone notch */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .header-glass {
        top: env(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
    }
    
    /* Prevent iOS elastic scroll on modals */
    .modal-backdrop.active,
    .search-modal.active,
    .ai-chat-modal.active {
        position: fixed;
        overflow: hidden;
    }
}

/* ============================================
   9. LANDSCAPE ORIENTATION (Mobile/Tablet)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce header height */
    .header-glass .flex.items-center.justify-between {
        height: 3rem !important;
    }
    
    /* Compact welcome section */
    .text-center.mb-16 {
        margin-bottom: 1rem !important;
    }
    
    .text-3xl.sm\:text-4xl.md\:text-5xl {
        font-size: 1.5rem !important;
    }
    
    .text-lg.sm\:text-xl {
        font-size: 0.875rem !important;
    }
    
    /* Compact search */
    .search-wrapper {
        margin-bottom: 1rem !important;
    }
    
    .search-input {
        padding: 0.75rem 1rem 0.75rem 2.75rem !important;
    }
    
    /* Modal adjustments */
    .modal-content,
    .ai-chat-container,
    .search-modal-content {
        max-height: 90vh !important;
    }
    
    .modal-body,
    .ai-messages,
    .search-modal-results {
        max-height: calc(90vh - 200px) !important;
    }
    
    /* Hide FAB labels in landscape */
    .fab-tooltip {
        display: none !important;
    }
}

/* ============================================
   10. PRINT STYLES
   ============================================ */
@media print {
    /* Hide interactive elements */
    .news-ticker,
    .header-glass,
    .search-wrapper,
    .fab-container,
    .mobile-menu-toggle,
    .mobile-menu-overlay,
    .modal-backdrop,
    .search-modal,
    button:not(.app-card button) {
        display: none !important;
    }
    
    /* Optimize for print */
    body {
        background: white !important;
        color: black !important;
    }
    
    .apps-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }
    
    .app-card {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    footer {
        break-before: page;
    }
}

/* ============================================
   11. ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High contrast mode */
@media (prefers-contrast: high) {
    .app-card,
    .modal-content,
    .search-modal-content,
    .ai-chat-container {
        border: 2px solid #000 !important;
    }
    
    button,
    .btn {
        border: 2px solid currentColor !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .news-content {
        animation: none !important;
    }
}

/* ============================================
   12. UTILITY CLASSES
   ============================================ */

/* Touch target */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Responsive visibility */
@media (max-width: 639px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }
    
    .show-tablet {
        display: block !important;
    }
}

@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }
    
    .show-desktop {
        display: block !important;
    }
}

/* Flex utilities for responsive */
@media (max-width: 639px) {
    .show-mobile-flex {
        display: flex !important;
    }
    
    .show-mobile-inline {
        display: inline !important;
    }
}

/* ============================================
   13. MOBILE MENU ENHANCEMENTS
   ============================================ */
@media (max-width: 1023px) {
    /* Mobile menu improvements */
    .mobile-menu-overlay {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    
    .mobile-menu-content {
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    }
    
    .mobile-menu-item {
        transition: all 0.2s ease;
    }
    
    .mobile-menu-item:active {
        background: rgba(102, 126, 234, 0.1);
        transform: scale(0.98);
    }
}

/* ============================================
   14. FORM ENHANCEMENTS
   ============================================ */
@media (max-width: 639px) {
    /* Stack form elements */
    .form-group {
        width: 100% !important;
    }
    
    /* Full width buttons in modals */
    .modal-footer {
        flex-direction: column-reverse !important;
        gap: 0.5rem !important;
    }
    
    .modal-footer button,
    .modal-footer .btn {
        width: 100% !important;
    }
    
    /* Color picker adjustments */
    .color-picker-wrapper {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .color-input {
        width: 100% !important;
        height: 60px !important;
    }
}

/* ============================================
   15. SEARCH MODAL RESPONSIVE
   ============================================ */
@media (max-width: 639px) {
    .search-section {
        padding: 1rem !important;
    }
    
    .search-list {
        gap: 0.5rem !important;
    }
    
    .search-result-item {
        padding: 0.875rem !important;
    }
    
    .search-tips {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .search-tip {
        font-size: 0.75rem !important;
    }
}

/* ============================================
   16. AI CHAT RESPONSIVE
   ============================================ */
@media (max-width: 639px) {
    .ai-chat-header {
        padding: 1rem !important;
    }
    
    .ai-avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    .ai-chat-title {
        font-size: 1.125rem !important;
    }
    
    .ai-suggestion-btn {
        padding: 0.875rem !important;
        font-size: 0.875rem !important;
    }
    
    .ai-message {
        padding: 0.875rem !important;
    }
    
    .ai-input-area {
        padding: 1rem !important;
    }
}

/* ============================================
   17. ADMIN LOGIN RESPONSIVE
   ============================================ */
@media (max-width: 639px) {
    .admin-login-header {
        padding: 1rem !important;
    }
    
    .admin-login-body {
        padding: 1rem !important;
    }
    
    .admin-login-actions {
        flex-direction: column-reverse !important;
        gap: 0.5rem !important;
    }
    
    .admin-login-actions button {
        width: 100% !important;
    }
}

/* ============================================
   18. NEWS TICKER RESPONSIVE
   ============================================ */
@media (max-width: 639px) {
    .news-ticker {
        overflow-x: hidden;
    }
    
    .news-content {
        animation-duration: 50s !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .news-content {
        animation-duration: 60s !important;
    }
}

/* ============================================
   19. FOOTER RESPONSIVE
   ============================================ */
@media (max-width: 639px) {
    .footer-glass {
        padding: 2rem 1rem !important;
    }
    
    footer h4 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    footer p,
    footer ul li {
        font-size: 0.875rem !important;
    }
}

/* ============================================
   20. ANIMATION OPTIMIZATIONS
   ============================================ */
@media (max-width: 639px) {
    /* Reduce animation complexity on mobile */
    .stagger-animation > * {
        animation-delay: 0s !important;
    }
    
    /* Simpler animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}