/* StratSync Comprehensive Mobile Fixes
 * Addresses all mobile responsiveness issues across the entire application
 * Tested for screens under 480px (phones) and 768px (tablets)
 */

/* ===== GLOBAL MOBILE FIXES ===== */

/* Prevent horizontal scroll on all pages */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Fix viewport meta for proper scaling */
@viewport {
    width: device-width;
    initial-scale: 1.0;
    maximum-scale: 1.0;
    user-scalable: no;
}

/* ===== NAVIGATION FIXES ===== */

@media (max-width: 768px) {
    /* Fix top navigation for mobile */
    .navbar {
        padding: 0.5rem !important;
        line-height: normal !important;
    }
    
    .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    
    /* Mobile hamburger menu */
    .navbar-toggler {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 8px !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
    }
    
    /* Fix admin sidebar on mobile */
    .sidebar-mini .app-sidebar {
        transform: translateX(-100%);
        position: fixed !important;
        z-index: 1050 !important;
        width: 260px !important;
        transition: transform 0.3s ease !important;
    }
    
    .sidebar-mini.sidebar-open .app-sidebar {
        transform: translateX(0) !important;
    }
    
    /* Overlay for sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1049;
    }
    
    .sidebar-open .sidebar-overlay {
        display: block !important;
    }
}

/* ===== LOGIN/REGISTRATION FIXES ===== */

@media (max-width: 480px) {
    /* Login form adjustments */
    .login-container,
    .register-container {
        padding: 1rem !important;
        width: 100% !important;
    }
    
    .login-form,
    .register-form {
        padding: 1.5rem !important;
        margin: 0 !important;
    }
    
    /* Form inputs - prevent zoom on iOS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 48px !important;
        padding: 12px !important;
    }
    
    /* Social login buttons */
    .social-logins-box {
        flex-direction: column !important;
    }
    
    .social-login-button {
        width: 100% !important;
        min-height: 48px !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Submit buttons */
    .login-main-button,
    .register-button {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
    }
}

/* ===== DASHBOARD FIXES ===== */

@media (max-width: 768px) {
    /* Main dashboard layout */
    .app-content {
        padding: 1rem !important;
        margin-left: 0 !important;
    }
    
    .side-app,
    .full-app {
        padding: 0 0.5rem !important;
    }
    
    /* Dashboard cards */
    .card {
        margin-bottom: 1rem !important;
        border-radius: 8px !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    /* Dashboard grid layouts */
    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }
    
    .col-lg-3,
    .col-lg-4,
    .col-lg-6,
    .col-md-6,
    .col-sm-6 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Stats cards */
    .stats-card {
        min-height: auto !important;
        padding: 1rem !important;
    }
    
    .stats-value {
        font-size: 1.5rem !important;
    }
    
    .stats-label {
        font-size: 0.875rem !important;
    }
}

/* ===== PRICING/SUBSCRIPTION PAGE FIXES ===== */

@media (max-width: 768px) {
    /* Pricing cards layout */
    #prices-wrapper .row {
        flex-direction: column !important;
    }
    
    #prices-wrapper .card {
        width: 100% !important;
        min-width: auto !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Plan features list */
    .plan-features {
        padding: 1rem !important;
        font-size: 14px !important;
    }
    
    .plan-features li {
        padding: 0.5rem 0 !important;
        line-height: 1.4 !important;
    }
    
    /* Pricing toggle */
    .tabs-menu ul {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .tabs-menu ul li {
        width: 100% !important;
    }
    
    .tabs-menu ul li a {
        width: 100% !important;
        padding: 1rem !important;
        min-height: 48px !important;
    }
    
    /* Subscribe buttons */
    .subscribe-button {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
        margin-top: 1rem !important;
    }
}

/* ===== ADMIN PANEL FIXES ===== */

@media (max-width: 768px) {
    /* Admin tables - make scrollable */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table {
        min-width: 600px !important; /* Force horizontal scroll */
    }
    
    /* Admin forms */
    .admin-form .form-group {
        margin-bottom: 1rem !important;
    }
    
    .admin-form label {
        font-size: 14px !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Admin action buttons */
    .admin-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .admin-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
    }
}

/* ===== MODAL/POPUP FIXES ===== */

@media (max-width: 768px) {
    /* Modal positioning */
    .modal-dialog {
        margin: 1rem !important;
        max-width: calc(100% - 2rem) !important;
    }
    
    .modal-content {
        border-radius: 8px !important;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem !important;
    }
    
    /* Modal buttons */
    .modal-footer {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .modal-footer .btn {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
    }
}

/* ===== CHAT/WIZARD INTERFACE FIXES ===== */

@media (max-width: 768px) {
    /* Chat container */
    .chat-main-container {
        height: calc(100vh - 60px) !important;
        padding: 0 !important;
    }
    
    /* Chat sidebar - convert to overlay */
    .chat-sidebar {
        position: fixed !important;
        left: -100% !important;
        top: 60px !important;
        bottom: 0 !important;
        width: 80% !important;
        max-width: 300px !important;
        z-index: 1040 !important;
        transition: left 0.3s ease !important;
    }
    
    .chat-sidebar.active {
        left: 0 !important;
    }
    
    /* Chat messages */
    .chat-messages {
        padding: 1rem !important;
        font-size: 14px !important;
    }
    
    .message-bubble {
        max-width: 85% !important;
        padding: 0.75rem !important;
        border-radius: 12px !important;
    }
    
    /* Chat input */
    .chat-input-container {
        padding: 1rem !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        border-top: 1px solid #e2e8f0 !important;
        z-index: 100 !important;
    }
    
    .chat-input {
        font-size: 16px !important; /* Prevent iOS zoom */
        min-height: 44px !important;
    }
    
    .chat-send-button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* ===== TYPOGRAPHY & READABILITY ===== */

@media (max-width: 480px) {
    /* Headings */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    
    h4 {
        font-size: 1.125rem !important;
    }
    
    h5, h6 {
        font-size: 1rem !important;
    }
    
    /* Body text */
    p, .text-body {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* Small text */
    small, .small {
        font-size: 12px !important;
    }
}

/* ===== BUTTON & TOUCH TARGET FIXES ===== */

@media (hover: none) and (pointer: coarse) {
    /* All interactive elements need 44px minimum */
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"],
    .dropdown-item,
    .nav-link,
    .tab-link,
    .clickable {
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
    }
    
    /* Remove hover effects on touch devices */
    *:hover {
        transition: none !important;
        transform: none !important;
    }
}

/* ===== LANDING PAGE SPECIFIC FIXES ===== */

@media (max-width: 768px) {
    /* Hero section */
    #main-wrapper .text-container h1 {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }
    
    #main-wrapper .text-container h6 {
        font-size: 1.125rem !important;
    }
    
    #main-wrapper .text-container p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Feature cards */
    #features-wrapper .features-nav-menu .nav-tabs {
        flex-direction: column !important;
    }
    
    #features-wrapper .features-nav-menu .nav-tabs .nav-link {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Benefits section */
    #benefits-wrapper .benefits-box-wrapper {
        margin-bottom: 1rem !important;
    }
    
    /* Templates section */
    #templates-wrapper .templates-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ===== FORMS & INPUT GROUPS ===== */

@media (max-width: 768px) {
    /* Input groups */
    .input-group {
        flex-direction: column !important;
    }
    
    .input-group-prepend,
    .input-group-append {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .input-group .btn {
        width: 100% !important;
        border-radius: 6px !important;
        margin-top: 0.5rem !important;
    }
    
    /* File upload */
    .file-upload-wrapper {
        padding: 1rem !important;
    }
    
    .file-upload-area {
        padding: 2rem 1rem !important;
        font-size: 14px !important;
    }
}

/* ===== TABLES ===== */

@media (max-width: 768px) {
    /* Make tables stackable */
    .table-mobile-responsive {
        display: block !important;
    }
    
    .table-mobile-responsive thead {
        display: none !important;
    }
    
    .table-mobile-responsive tbody,
    .table-mobile-responsive tr,
    .table-mobile-responsive td {
        display: block !important;
        width: 100% !important;
    }
    
    .table-mobile-responsive tr {
        margin-bottom: 1rem !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 0.5rem !important;
    }
    
    .table-mobile-responsive td {
        text-align: left !important;
        padding: 0.5rem !important;
        position: relative !important;
        padding-left: 40% !important;
    }
    
    .table-mobile-responsive td:before {
        content: attr(data-label);
        position: absolute !important;
        left: 0.5rem !important;
        width: 35% !important;
        text-align: left !important;
        font-weight: 600 !important;
        color: #64748b !important;
    }
}

/* ===== DROPDOWN MENUS ===== */

@media (max-width: 768px) {
    .dropdown-menu {
        position: fixed !important;
        left: 1rem !important;
        right: 1rem !important;
        width: auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .dropdown-item {
        padding: 1rem !important;
        min-height: 44px !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Focus visible for keyboard navigation */
@media (max-width: 768px) {
    *:focus-visible {
        outline: 3px solid #3b82f6 !important;
        outline-offset: 2px !important;
    }
    
    /* Skip to content link */
    .skip-to-content {
        position: absolute !important;
        left: -9999px !important;
        z-index: 2000 !important;
    }
    
    .skip-to-content:focus {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 1rem !important;
        background: #1e1e2d !important;
        color: white !important;
        text-align: center !important;
        text-decoration: none !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

@media (max-width: 768px) {
    /* Reduce animations on mobile */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Disable parallax on mobile */
    .parallax {
        background-attachment: scroll !important;
    }
    
    /* Optimize images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ===== SAFE AREA INSETS (iPhone X+) ===== */

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        body {
            padding-top: env(safe-area-inset-top) !important;
            padding-left: env(safe-area-inset-left) !important;
            padding-right: env(safe-area-inset-right) !important;
        }
        
        .fixed-bottom,
        .chat-input-container,
        .mobile-bottom-nav {
            padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
        }
        
        .fixed-top,
        .navbar {
            padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
        }
    }
}

/* ===== LANDSCAPE ORIENTATION FIXES ===== */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .navbar {
        padding: 0.25rem 1rem !important;
        min-height: 44px !important;
    }
    
    .hero-section {
        min-height: auto !important;
        padding: 2rem 1rem !important;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    /* Hide less critical elements */
    .decorative-element,
    .background-pattern {
        display: none !important;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    /* Hide navigation and non-essential elements */
    .navbar,
    .sidebar,
    .footer,
    .mobile-bottom-nav,
    .chat-sidebar,
    .action-buttons,
    .no-print {
        display: none !important;
    }
    
    /* Ensure content uses full width */
    .container,
    .app-content {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ===== Z-INDEX MANAGEMENT ===== */

/* Ensure proper stacking order on mobile */
@media (max-width: 768px) {
    .modal-backdrop { z-index: 1040 !important; }
    .modal { z-index: 1050 !important; }
    .dropdown-menu { z-index: 1030 !important; }
    .fixed-top { z-index: 1020 !important; }
    .sticky-top { z-index: 1010 !important; }
    .chat-input-container { z-index: 100 !important; }
    .mobile-bottom-nav { z-index: 1000 !important; }
    .sidebar { z-index: 1035 !important; }
    .sidebar-overlay { z-index: 1034 !important; }
}

/* ===== EMERGENCY FIXES FOR DAVINCI CONFLICTS ===== */

@media (max-width: 768px) {
    /* Override DaVinci's aggressive styles */
    body.app {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    .page-main {
        margin-left: 0 !important;
    }
    
    /* Fix DaVinci dropdown issues */
    .dropdown-menu-arrow:before,
    .dropdown-menu-arrow:after {
        display: none !important;
    }
    
    /* Fix DaVinci modal positioning */
    .modal.show {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
    }
}