/*
Mobile WebView Optimizations
Specific enhancements for iOS app WebView integration
*/

/* ==========================================================================
   WEBVIEW DETECTION AND OPTIMIZATION
   ========================================================================== */

/* iOS WebView detection - when loaded in iOS app */
.webview-ios body {
    /* Remove iOS WebView bounce scrolling */
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;

    /* Optimize for WebView rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TOOLBAR HIDING FOR iOS APP INTEGRATION
   ========================================================================== */

/* Hide toolbar elements when accessed from iOS app */
.from-ios-app .ios-nav,
.from-ios-app .platform-toolbar,
.from-ios-app .navbar,
.from-ios-app .nav-header,
.from-ios-app .header-toolbar,
.from-ios-app .main-nav,
.from-ios-app .navigation-bar,
.from-ios-app .top-nav,
.from-ios-app #navbar,
.from-ios-app #main-nav,
.from-ios-app nav.navbar,
.from-ios-app header.navbar,
.hide-toolbar-in-app .ios-nav,
.hide-toolbar-in-app .platform-toolbar,
.hide-toolbar-in-app .navbar,
.hide-toolbar-in-app .nav-header,
.hide-toolbar-in-app .header-toolbar,
.hide-toolbar-in-app .main-nav,
.hide-toolbar-in-app .navigation-bar,
.hide-toolbar-in-app .top-nav,
.hide-toolbar-in-app #navbar,
.hide-toolbar-in-app #main-nav,
.hide-toolbar-in-app nav.navbar,
.hide-toolbar-in-app header.navbar {
    display: none !important;
}

/* Adjust layout when toolbar is hidden */
.from-ios-app .platform-content,
.hide-toolbar-in-app .platform-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Better centering for iOS app context */
.from-ios-app .content-wrapper,
.from-ios-app .main-content,
.from-ios-app .container,
.webview-ios .content-wrapper,
.webview-ios .main-content,
.webview-ios .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 100vh !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.from-ios-app .form-container,
.from-ios-app .card,
.from-ios-app .panel,
.webview-ios .form-container,
.webview-ios .card,
.webview-ios .panel {
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* ==========================================================================
   TOUCH AND GESTURE ENHANCEMENTS
   ========================================================================== */

/* Enhanced touch targets for mobile */
@media (max-width: 768px) {
    /* Ensure minimum 44px touch targets */
    .platform-btn, .platform-card, .nav-item, .analytics-time-option {
        min-height: 44px;
        min-width: 44px;
    }

    /* Larger interactive areas */
    .platform-feature-card {
        min-height: 80px;
        padding: var(--space-4);
    }

    /* Enhanced spacing for thumbs */
    .platform-grid {
        gap: var(--space-4);
    }

    /* Better button spacing */
    .platform-btn + .platform-btn {
        margin-top: var(--space-3);
    }

    /* iOS app specific touch improvements */
    .from-ios-app input,
    .from-ios-app select,
    .from-ios-app textarea,
    .from-ios-app button,
    .webview-ios input,
    .webview-ios select,
    .webview-ios textarea,
    .webview-ios button {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent iOS zoom on input focus */
    }

    .from-ios-app .btn,
    .from-ios-app button,
    .webview-ios .btn,
    .webview-ios button {
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
}

/* ==========================================================================
   MOBILE-SPECIFIC LAYOUT IMPROVEMENTS
   ========================================================================== */

/* Optimize content for mobile screens */
@media (max-width: 768px) {
    /* Reduce unnecessary padding in tight spaces */
    .platform-page {
        padding: var(--space-3);
    }

    /* Stack elements more efficiently */
    .flex-row-mobile-stack {
        flex-direction: column;
        gap: var(--space-3);
    }

    /* Full-width cards on mobile */
    .platform-card-mobile-full {
        width: 100%;
        margin: 0;
    }

    /* Better navigation spacing */
    .platform-nav {
        padding: var(--space-2) var(--space-3);
    }

    /* Compact analytics layout */
    .analytics-overview {
        padding: var(--space-3);
    }

    .analytics-stat {
        text-align: center;
        padding: var(--space-2);
    }
}

/* ==========================================================================
   TYPOGRAPHY ENHANCEMENTS FOR MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    /* Improve readability on small screens */
    h1 { font-size: 1.5rem; line-height: 1.3; }
    h2 { font-size: 1.25rem; line-height: 1.4; }
    h3 { font-size: 1.1rem; line-height: 1.4; }

    /* Better body text for mobile reading */
    body, .platform-text {
        font-size: 16px; /* Prevent iOS zoom on input focus */
        line-height: 1.5;
    }

    /* Compact but readable */
    .platform-text-small {
        font-size: 14px;
        line-height: 1.4;
    }
}

/* ==========================================================================
   SCROLL AND PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/* Smooth scrolling for WebView */
.webview-ios * {
    -webkit-overflow-scrolling: touch;
}

/* Optimize scrollable areas */
.scrollable-content {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Better momentum scrolling */
.platform-list, .analytics-content, .student-list {
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   WEBVIEW-SPECIFIC FIXES
   ========================================================================== */

/* Fix iOS WebView viewport issues */
@media screen and (max-width: 768px) {
    /* Prevent horizontal scrolling */
    .container, .platform-container {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Fix WebView form inputs */
    .platform-input, .platform-select {
        font-size: 16px; /* Prevent iOS zoom */
        -webkit-appearance: none;
        border-radius: 8px;
    }

    /* Better WebView modal handling */
    .platform-modal {
        margin: var(--space-2);
        max-height: calc(100vh - var(--space-4));
        overflow-y: auto;
    }
}

/* ==========================================================================
   ENHANCED MOBILE INTERACTIONS
   ========================================================================== */

/* Better tap feedback */
@media (hover: none) and (pointer: coarse) {
    .platform-btn:active,
    .platform-card:active,
    .platform-feature-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* Remove hover effects on touch devices */
    .platform-btn:hover,
    .platform-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   ACCESSIBILITY AND USABILITY
   ========================================================================== */

/* Improve focus indicators for keyboard navigation */
@media (max-width: 768px) {
    *:focus {
        outline: 2px solid var(--ios-blue);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Better contrast for mobile */
    .platform-text-muted {
        color: var(--text-secondary);
        opacity: 0.8;
    }
}

/* ==========================================================================
   QUICK ACTIONS AND SHORTCUTS
   ========================================================================== */

/* Mobile-optimized quick actions */
@media (max-width: 768px) {
    .quick-actions {
        position: sticky;
        bottom: 0;
        background: var(--system-background);
        border-top: 1px solid var(--ios-gray-4);
        padding: var(--space-3);
        display: flex;
        gap: var(--space-2);
    }

    .quick-action-btn {
        flex: 1;
        min-height: 44px;
        font-size: 14px;
        border-radius: 8px;
    }
}

/* ==========================================================================
   SAFE AREA HANDLING (iOS)
   ========================================================================== */

/* Handle iOS safe areas for WebView */
.webview-ios .platform-page {
    padding-top: max(var(--space-4), env(safe-area-inset-top));
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    padding-left: max(var(--space-3), env(safe-area-inset-left));
    padding-right: max(var(--space-3), env(safe-area-inset-right));
}

/* Navigation adjustments for safe areas */
.webview-ios .platform-nav {
    padding-top: max(var(--space-2), env(safe-area-inset-top));
}

/* iOS Status Bar Background Fix */
@media (max-width: 768px) {
    /* Create a pseudo-element to extend the nav background behind the status bar */
    .ios-nav::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-top, 44px);
        background: var(--ios-blue);
        z-index: -1;
        pointer-events: none;
    }

    /* Update the nav styling for better iOS integration */
    .ios-nav {
        position: relative;
        background: var(--ios-blue) !important;
        color: white !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        margin-top: 0 !important;
        padding-top: max(var(--space-4), env(safe-area-inset-top)) !important;
        border-radius: 0 !important;
    }

    /* Ensure text and icons are white in the blue header */
    .ios-nav,
    .ios-nav * {
        color: white !important;
    }

    /* Update SVG icons to use white fill */
    .ios-nav svg {
        fill: white !important;
    }

    /* Update membership badges for visibility on blue background */
    .ios-nav .lexy-membership-badge {
        background: rgba(255, 255, 255, 0.9) !important;
        color: var(--ios-blue) !important;
    }

    /* Platform branding text */
    .ios-nav .font-logo {
        color: white !important;
    }
}

/* ==========================================================================
   LOADING AND PERFORMANCE
   ========================================================================== */

/* Optimize images for mobile */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
        /* Improve image loading performance */
        loading: lazy;
    }

    /* Reduce animations on mobile for performance */
    .reduce-motion {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   OPTIMIZED LIST COMPONENTS - Better Space Usage
   ========================================================================== */

/* More compact ios-list styling */
@media (max-width: 768px) {
    .ios-list {
        background: var(--system-background-secondary);
        border-radius: var(--radius-large);
        overflow: hidden;
        margin: 0;
    }

    .ios-list-item {
        display: flex;
        align-items: center;
        padding: var(--space-3); /* Reduced from var(--space-4) */
        min-height: 52px; /* Reduced from 60px */
        transition: background-color 0.2s ease;
        border-bottom: 1px solid var(--ios-gray-6);
        gap: var(--space-3); /* Consistent gap */
        text-decoration: none;
        color: inherit;
    }

    .ios-list-item:last-child {
        border-bottom: none;
    }

    .ios-list-item:hover {
        background-color: var(--ios-gray-6);
    }

    .ios-list-item:active {
        background-color: var(--ios-gray-5);
        transform: scale(0.995);
    }

    /* Icon containers in lists */
    .ios-list-item > div:first-child {
        width: 30px !important; /* Reduced from 32px */
        height: 30px !important; /* Reduced from 32px */
        border-radius: 6px !important; /* Slightly smaller radius */
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0 !important; /* Remove margin, use gap instead */
    }

    /* Icon size adjustment */
    .ios-list-item svg {
        width: 16px;
        height: 16px;
    }

    /* Text content in list items */
    .ios-list-item .text-callout {
        font-size: 15px; /* Slightly smaller */
        line-height: 1.3;
        font-weight: 500;
        margin: 0 0 2px 0;
    }

    .ios-list-item .text-footnote {
        font-size: 12px; /* Smaller subtitle */
        line-height: 1.2;
        opacity: 0.7;
        margin: 0;
    }

    /* Chevron icons */
    .ios-list-item > svg:last-child {
        width: 14px;
        height: 14px;
        opacity: 0.5;
        flex-shrink: 0;
    }
}

/* Extra compact variant for dense lists */
@media (max-width: 768px) {
    .ios-list.compact .ios-list-item {
        padding: var(--space-2);
        min-height: 44px;
    }

    .ios-list.compact .ios-list-item > div:first-child {
        width: 26px !important;
        height: 26px !important;
    }

    .ios-list.compact .ios-list-item svg {
        width: 14px;
        height: 14px;
    }

    .ios-list.compact .text-callout {
        font-size: 14px;
    }

    .ios-list.compact .text-footnote {
        font-size: 11px;
    }
}

/* Student selection list optimizations */
@media (max-width: 768px) {
    .student-selection-list {
        margin: var(--space-3) 0 var(--space-4);
    }

    .student-list-item {
        padding: var(--space-3); /* Reduced from var(--space-4) */
        min-height: 50px; /* Reduced from 60px */
        gap: var(--space-3);
    }

    .student-avatar {
        width: 36px !important; /* Reduced from 44px */
        height: 36px !important;
        font-size: 14px; /* Smaller font */
    }

    .checkbox-container {
        min-width: 36px; /* Reduced from 44px */
        min-height: 36px;
    }

    .student-checkbox {
        width: 18px; /* Slightly smaller */
        height: 18px;
        max-width: 18px; /* Prevent horizontal stretching */
        max-height: 18px; /* Prevent vertical stretching */
        flex-shrink: 0;
        align-self: center; /* Prevent vertical stretching in flex containers */
        box-sizing: border-box;
    }
}

/* School card stats optimization */
@media (max-width: 768px) {
    .ios-stats-grid.school-stats-horizontal .ios-stat-card-small {
        min-height: 58px; /* Reduced from 65px */
        padding: var(--space-2); /* Consistent padding */
    }

    .ios-stat-value-small {
        font-size: 16px; /* Slightly smaller */
        margin-bottom: 1px;
    }

    .ios-stat-label-small {
        font-size: 9px; /* Smaller labels */
        line-height: 1;
    }
}

/* ==========================================================================
   PLATFORM-SPECIFIC FEATURES
   ========================================================================== */

/* Enhanced QR code display */
@media (max-width: 768px) {
    .qr-code-display {
        max-width: 200px;
        margin: 0 auto;
        padding: var(--space-3);
    }

    /* Better student list on mobile */
    .student-card {
        padding: var(--space-3);
        margin-bottom: var(--space-2);
        border-radius: 12px;
    }

    /* Analytics charts mobile optimization */
    .analytics-chart {
        height: 200px;
        overflow: visible;
    }

    /* Mobile-friendly forms */
    .platform-form-group {
        margin-bottom: var(--space-4);
    }

    .platform-form-row {
        flex-direction: column;
        gap: var(--space-3);
    }
}

/* ==========================================================================
   PRINT DIALOG MOBILE OPTIMIZATIONS
   ========================================================================== */

/* Print-ready content optimization */
@media print {
    /* Hide navigation and non-essential elements */
    .platform-nav,
    .ios-nav,
    .navbar,
    .platform-toolbar,
    .print-hide {
        display: none !important;
    }

    /* Ensure content fits properly */
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: white;
    }

    /* Optimize spacing for print */
    .platform-card,
    .ios-card {
        border: 1px solid #ccc;
        box-shadow: none;
        margin: 0 0 1rem 0;
        page-break-inside: avoid;
    }

    /* QR codes print optimization */
    .qr-code-image {
        max-width: 200px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* Student credentials for print */
    .student-credentials,
    #student-credentials {
        background: #f8f8f8 !important;
        border: 1px solid #ddd !important;
        padding: 1rem !important;
        font-family: monospace;
        font-size: 11pt;
        page-break-inside: avoid;
    }

    /* Ensure text is readable */
    .text-primary,
    .student-name,
    .qr-student-name {
        color: #000 !important;
    }

    .text-secondary {
        color: #666 !important;
    }
}

/* Mobile print dialog enhancements (when print is triggered) */
@media screen and (max-width: 768px) {
    /* Pre-print preparation - optimize content before print dialog */
    body.print-preparing {
        overflow: hidden;
    }

    body.print-preparing * {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Print button improvements */
    button[onclick*="print"],
    .print-button,
    .ios-button[onclick*="print"] {
        background: var(--ios-blue) !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        min-height: 44px !important;
        width: 100% !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    button[onclick*="print"]:active,
    .print-button:active {
        transform: scale(0.98) !important;
        background: var(--ios-blue-dark) !important;
    }

    /* Download button improvements */
    button[onclick*="download"],
    .download-button {
        background: var(--ios-green) !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        min-height: 44px !important;
        width: 100% !important;
        cursor: pointer !important;
        margin-bottom: 12px !important;
        transition: all 0.2s ease !important;
    }

    button[onclick*="download"]:active,
    .download-button:active {
        transform: scale(0.98) !important;
        background: var(--ios-green-dark) !important;
    }

    /* Print preparation styles */
    .print-content {
        background: white;
        color: black;
        padding: 20px;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
    }

    /* Optimize content layout for mobile print */
    .print-optimize {
        font-size: 14px !important;
        line-height: 1.4 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .print-optimize h1,
    .print-optimize h2,
    .print-optimize h3 {
        font-size: 18px !important;
        margin: 16px 0 8px 0 !important;
        color: black !important;
    }

    .print-optimize .qr-code-image {
        max-width: 150px !important;
        margin: 16px auto !important;
        display: block !important;
    }

    /* Student info print layout */
    .print-optimize .student-info,
    .print-optimize #student-credentials {
        background: #f5f5f5 !important;
        border: 1px solid #ddd !important;
        padding: 16px !important;
        margin: 16px 0 !important;
        border-radius: 4px !important;
        font-family: monospace !important;
    }

    /* Action button container for print */
    .print-actions {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 16px;
        border-top: 1px solid #ddd;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Responsive print preview */
    .print-preview {
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 16px;
        margin: 16px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        overflow: auto;
        max-height: 400px;
    }

    .print-preview img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

/* ==========================================================================
   FLAT DESIGN - GLOBAL BORDER REMOVAL
   ========================================================================== */

/* Flat Design - Global border removal for consistent look */
@media (max-width: 768px) {
    /* Remove borders from cards and containers */
    .platform-card,
    .ios-card,
    .ios-card-large,
    .qr-card,
    .student-selection-list,
    .platform-form,
    .platform-stat-card,
    .ios-stat-card,
    .ios-stat-card-small {
        border: none !important;
    }

    /* Remove borders from interactive elements but keep functionality */
    .dropdown-menu,
    .ios-list,
    .platform-list {
        border: none !important;
    }

    /* Keep only essential borders like form inputs and buttons for usability */
    .ios-input,
    .platform-input,
    .ios-select,
    .platform-select,
    .ios-textarea,
    .platform-textarea {
        border: 1px solid var(--ios-gray-5) !important; /* Keep input borders for clarity */
    }

    /* Subtle separator lines where needed for list items */
    .student-list-item:not(:last-child),
    .ios-list-item:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; /* Very subtle separator */
    }

    /* Remove borders from QR code elements */
    .qr-code-container,
    .qr-error,
    img[alt*="QR Code"] {
        border: none !important;
    }

    /* Global checkbox scaling fix for mobile */
    .webview-ios input[type="checkbox"] {
        max-width: 22px; /* Prevent horizontal stretching */
        max-height: 22px; /* Prevent vertical stretching */
        flex-shrink: 0;
        align-self: center; /* Prevent vertical stretching in flex containers */
        box-sizing: border-box;
    }

    .webview-ios .platform-checkbox,
    .webview-ios .student-checkbox,
    .webview-ios .ios-checkbox {
        max-width: 20px; /* Prevent horizontal stretching */
        max-height: 20px; /* Prevent vertical stretching */
        flex-shrink: 0;
        align-self: center;
        box-sizing: border-box;
    }
}