/**
 * IdeaDunes Mobile & Responsive Design Enhancements
 * Addresses: Viewport audits, sidebar mobile, DataTables scroll, touch targets, navigation
 */

/* ========================================================
   Mobile Viewport Optimization (375px, 768px breakpoints)
   ======================================================== */

@media (max-width: 375px) {
    /* Extra small phones */
    body { font-size: 0.8125rem; }
    .page, .container { padding: 0.5rem; }
    
    /* Headers and titles */
    h1 { font-size: 1.3rem; margin: 0.5rem 0; }
    h2 { font-size: 1.1rem; margin: 0.375rem 0; }
    h3, h4, h5, h6 { font-size: 0.95rem; margin: 0.25rem 0; }
    
    /* Forms */
    .form-group { margin-bottom: 0.625rem; }
    .form-control, .form-select, select, textarea, input[type="text"], input[type="email"], input[type="password"] {
        font-size: 1rem; /* Prevents auto-zoom on iOS */
        padding: 0.625rem; /* Touch-friendly */
        min-height: 2.75rem; /* Minimum tap target size */
    }
    
    /* Buttons */
    .btn, button {
        min-height: 2.75rem;
        min-width: 2.75rem;
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
        margin: 0.25rem 0.125rem;
    }
    
    /* Modals */
    .modal-dialog { margin: 0.5rem; width: 96vw; }
    .modal-body { max-height: 60vh; overflow-y: auto; padding: 0.75rem; }
    .modal-header { padding: 0.625rem; }
    
    /* Tables */
    .table { font-size: 0.75rem; margin-bottom: 0; }
    .table thead { display: none; } /* Hide table headers on mobile, use data attributes instead */
    .table tbody, .table tr, .table td {
        display: block;
        width: 100%;
    }
    .table tr { margin-bottom: 0.75rem; border: 1px solid #ddd; border-radius: 0.25rem; padding: 0.5rem; }
    .table td {
        text-align: right;
        padding: 0.5rem 1rem;
        position: relative;
        padding-left: 50%;
    }
    .table td::before { content: attr(data-label); position: absolute; left: 8px; font-weight: 600; }
    
    /* Sidebar */
    .sidebar-left { 
        position: fixed;
        left: -100%;
        top: 0;
        width: 85%;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
        background: #fff;
        overflow-y: auto;
    }
    .sidebar-left.active { left: 0; }
    
    /* Off-canvas backdrop */
    .sidebar-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; }
    .sidebar-left.active ~ .sidebar-backdrop { display: block; }
    
    /* Hamburger menu button */
    .mobile-menu-toggle {
        display: block;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1001;
        background: #6c587b;
        color: white;
        border: none;
        padding: 0.5remr0.75rem.75rem;
        border-radius: 4px
        cursor: pointer;
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    /* Small tablets and large phones */
    
    /* Navigation tabs */
    .nav-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }
    .nav-tabs > li {
        flex: 1 1 auto;
        min-width: 100px;
    }
    
    /* DataTables horizontal scroll */
    .datatable-wrapper, .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    
    /* Pagination */
    .pagination { font-size: 12px
    .pagination > li > a, .pagination > li > span {
        padding: 0.375rem 0.5rem;
        min-width: 32px;
        text-align: center;
    }
    
    /* Cards and panels */
    .card, .panel, .dash-panel {
        margin-bottom: 0.5rem;
    }
    
    /* Grid adjustments */
    .col-md-3, .col-md-4, .col-md-6 { 
        min-height: 1px; /* Prevent overly compressed columns */
    }
    
    /* Alert messages */
    .alert {
        margin: 0.5rem 0;
        padding: 0.6875rem;
        font-size: 0.8125rem;
    }
    .alert button { margin-top: 0.25rem; width: 100%; }
    
    /* Lists */
    .list-group-item {
        padding: 0.6875rem;
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }
    
    /* Dropdowns */
    .dropdown-menu {
        max-width: 90vw;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    /* Footer */
    footer { padding: 0.75rem; font-size: 0.75rem; }
}

/* ========================================================
   Touch-Friendly Design (iOS & Android)
   ======================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Touch devices */
    
    /* Increase tap target size (44x44px minimum) */
    a, button, input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"] {
        min-height: 2.75rem;
        min-width: 2.75rem;
        padding: 0.5rem;
    }
    
    /* Remove hover-only actions */
    *:hover { /* No background changes on hover */ }
    
    /* Add active/focus states */
    button:active, a:active { opacity: 0.7; }
    button:focus, a:focus { outline: 2px solid #6c587b; outline-offset: 2px; }
    
    /* Disable double-tap zoom delay */
    a, button, input, select, textarea { touch-action: manipulation; }
    
    /* Improve scrolling */
    * { -webkit-tap-highlight-color: transparent; }
    .scrollable { -webkit-overflow-scrolling: touch; }
}

/* ========================================================
   Bottom Tab Navigation (Mobile)
   ======================================================== */

@media (max-width: 768px) {
    body { padding-bottom: 60px; }
    
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: white;
        border-top: 1px solid #ddd;
        display: flex;
        z-index: 100;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    }
    
    .mobile-bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #666;
        font-size: 0.6875rem;
        transition: all 0.2s;
        padding: 4px;
    }
    
    .mobile-bottom-nav-item:active,
    .mobile-bottom-nav-item.active {
        color: #6c587b;
        background: #f5f5f5;
    }
    
    .mobile-bottom-nav-item i {
        font-size: 1.25rem;
        margin-top: 0.5rem;
    }
}

/* ========================================================
   Progressive Web App Enhancements
   ======================================================== */

@media (display-mode: standalone) {
    /* Running as installed PWA app */
    
    /* Safe area insets for notch devices */
    body {
        padding-top: max(12px, env(safe-area-inset-top));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    /* Hide browser chrome elements */
    .web-only { display: none; }
}

/* ========================================================
   Landscape Orientation (Mobile)
   ======================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    /* Hide less important UI in landscape */
    .sidebar-left { display: none; }
    .mobile-menu-toggle { display: block; }
    
    /* Reduce padding and heights */
    body { padding: 4px; }
    .btn, button { padding: 4px 8px; font-size: 12px; }
    
    /* Sidebar as overlay in landscape */
    .sidebar-left {
        position: fixed;
        left: 0;
        top: 0;
        width: 70%;
        max-height: 100vh;
    }
}

/* ========================================================
   Print Styles (Mobile-aware)
   ======================================================== */

@media print {
    .no-print, .mobile-menu-toggle, .mobile-bottom-nav, .sidebar-left { display: none !important; }
    body { padding: 0.75rem; }
    * { background: white !important; color: black !important; text-shadow: none !important; }
    a { text-decoration: underline; }
    a::after { content: " (" attr(href) ")"; }
}

/* ========================================================
   Accessibility & High-DPI Screens
   ======================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* High DPI screen adjustments */
    body { -webkit-font-smoothing: antialiased; }
    
    /* Borders visible on high-DPI */
    * { border-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Respect user's motion preferences */
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}