/* iOS WebView Optimizations - Global Styles */

/* Prevent zoom on input focus */
.ios-webview input,
.ios-webview select,
.ios-webview textarea {
    font-size: 16px !important;
    padding: 12px 16px !important;
}

/* Optimize touch targets */
.ios-webview button,
.ios-webview a,
.ios-webview .nav-item,
.ios-webview .form-group {
    min-height: 44px !important;
    min-width: 44px !important;
}

.ios-webview .nav-item {
    padding: 12px 16px !important;
    font-size: 16px !important;
}

.ios-webview .calculate-btn,
.ios-webview .clear-btn,
.ios-webview .service-button {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
}

/* Disable hover effects in WebView - but keep menu items clickable */
.webview-mode *:hover {
    transform: none !important;
    box-shadow: none !important;
}

.webview-mode .nav-item:hover {
    background: #F3F4F6 !important;
    color: #111111 !important;
}

.webview-mode .calculate-btn:hover,
.webview-mode .clear-btn:hover,
.webview-mode .service-button:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

/* Ensure menu items are clickable in WebView */
.webview-mode .nav-item,
.webview-mode .quick-access-item,
.webview-mode .mobile-service-item,
.webview-mode .quick-service-item,
.webview-mode .service-card {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Safe area for iPhone X and newer */
@supports (padding: max(0px)) {
    .ios-webview .container,
    .ios-webview .main-content,
    .ios-webview .dashboard-header {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }
    
    .ios-webview .nav-panel {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }
    
    .ios-webview .dashboard-header {
        padding-top: max(16px, env(safe-area-inset-top)) !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .ios-webview .container {
        padding: 12px !important;
    }
    
    .ios-webview .form-section,
    .ios-webview .result-section {
        padding: 16px !important;
        border-radius: 8px !important;
    }
    
    .ios-webview .header h1 {
        font-size: 20px !important;
    }
    
    .ios-webview .header p {
        font-size: 14px !important;
    }
    
    .ios-webview .content {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Prevent double-tap zoom */
.ios-webview * {
    touch-action: manipulation;
}

/* Optimize scrolling */
.ios-webview {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
}

/* Form optimizations */
.ios-webview form {
    touch-action: manipulation;
}

.ios-webview input:focus,
.ios-webview select:focus,
.ios-webview textarea:focus {
    font-size: 16px !important;
    transform: none !important;
}

/* Button optimizations */
.ios-webview button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Link optimizations */
.ios-webview a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection on buttons */
.ios-webview button,
.ios-webview .nav-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Ensure all menu items are clickable */
.ios-webview .nav-item,
.ios-webview .quick-access-item,
.ios-webview .mobile-service-item,
.ios-webview .quick-service-item,
.ios-webview .service-card {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
    min-height: 44px !important;
    min-width: 44px !important;
}

/* Loading states for WebView */
.ios-webview .loading {
    pointer-events: none;
    opacity: 0.7;
}

.ios-webview .loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Standalone mode optimizations */
.standalone-mode {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.standalone-mode .dashboard-header {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
}

/* Prevent pull-to-refresh in WebView */
.ios-webview body {
    overscroll-behavior-y: none;
}

/* Optimize images for WebView */
.ios-webview img {
    max-width: 100%;
    height: auto;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* Table optimizations for mobile */
.ios-webview table {
    font-size: 14px !important;
}

.ios-webview table th,
.ios-webview table td {
    padding: 8px 12px !important;
}

/* Modal and overlay optimizations */
.ios-webview .modal,
.ios-webview .overlay {
    -webkit-overflow-scrolling: touch;
}

/* Prevent zoom on double-tap */
.ios-webview * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ios-webview input,
.ios-webview textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}