/* CoachAI Mobile Responsive Styles */

/* Mobile View Detection */
@media only screen and (max-width: 768px), 
       only screen and (max-device-width: 768px) {
    
    /* Hide desktop-specific elements */
    .desktop-only {
        display: none !important;
    }
    
    /* General Mobile Styles */
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        font-size: 16px;
    }
    
    /* Mobile Form Styles */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 12px !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-appearance: none;
        appearance: none;
    }
    
    /* Mobile Button Styles */
    button,
    .button,
    .btn,
    input[type="submit"],
    input[type="button"] {
        padding: 12px 24px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        min-height: 44px; /* Apple's recommended touch target size */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile Table Styles */
    table {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Card and Container Styles */
    .container,
    .card,
    .panel,
    .box {
        padding: 16px !important;
        margin: 8px !important;
        border-radius: 12px;
    }
    
    /* Mobile Grid System */
    .row,
    .grid {
        display: block !important;
    }
    
    .col,
    .column,
    [class*="col-"] {
        width: 100% !important;
        padding: 8px !important;
        margin-bottom: 16px !important;
    }
    
    /* Mobile Navigation Adjustments */
    .navbar,
    .header,
    .top-bar {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding: 12px 16px !important;
    }
    
    /* Mobile Modal Styles */
    .modal,
    .dialog,
    .popup {
        width: 90% !important;
        max-width: none !important;
        margin: 20px auto !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Mobile Dropdown Styles */
    .dropdown,
    .select2-container {
        width: 100% !important;
    }
    
    /* Mobile Calendar Styles */
    .fc-view-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .fc-event {
        font-size: 12px !important;
        padding: 2px !important;
    }
    
    /* Mobile Chart Styles */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Mobile Typography */
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    h5, h6 { font-size: 14px !important; }
    
    p, span, div {
        line-height: 1.6 !important;
    }
    
    /* Mobile Spacing */
    .p-1 { padding: 8px !important; }
    .p-2 { padding: 12px !important; }
    .p-3 { padding: 16px !important; }
    .p-4 { padding: 20px !important; }
    .p-5 { padding: 24px !important; }
    
    .m-1 { margin: 8px !important; }
    .m-2 { margin: 12px !important; }
    .m-3 { margin: 16px !important; }
    .m-4 { margin: 20px !important; }
    .m-5 { margin: 24px !important; }
    
    /* Mobile ACF Form Styles */
    .acf-form .acf-field {
        padding: 12px 0 !important;
    }
    
    .acf-form .acf-label {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    
    .acf-form .acf-input {
        padding: 0 !important;
    }
    
    /* Mobile DataTable Styles */
    .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Mobile Tab Styles */
    .nav-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        margin-bottom: 16px;
    }
    
    .nav-tabs li {
        flex: 0 0 auto;
    }
    
    /* Mobile Alert Styles */
    .alert,
    .notice,
    .message {
        padding: 12px !important;
        margin: 8px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
    
    /* Mobile Loading Styles */
    .loader,
    .spinner {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
    }
    
    /* Mobile Tooltip Adjustments */
    .tooltip,
    .tippy-box {
        font-size: 12px !important;
        max-width: 200px !important;
    }
    
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Touch-friendly link spacing */
    a {
        padding: 8px 4px;
        display: inline-block;
        text-decoration: none;
    }
    
    /* Mobile Image Styles */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Mobile Video Styles */
    video {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Mobile iframe styles - exclude embedded views */
    iframe:not(.mobile-content-iframe) {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Responsive embeds */
    .embed-responsive {
        position: relative;
        display: block;
        width: 100%;
        padding: 0;
        overflow: hidden;
    }
    
    .embed-responsive::before {
        display: block;
        content: "";
        padding-top: 56.25%; /* 16:9 aspect ratio */
    }
    
    .embed-responsive iframe,
    .embed-responsive video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
}

/* Tablet Specific Styles */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 100% !important;
        padding: 20px !important;
    }
    
    .col-md-6 {
        width: 50% !important;
        float: left;
    }
    
    .col-md-4 {
        width: 33.333% !important;
        float: left;
    }
    
    .col-md-3 {
        width: 25% !important;
        float: left;
    }
}

/* iOS Specific Fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific styles */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        -webkit-appearance: none;
        border-radius: 0; /* Remove iOS default styling */
    }
    
    /* Fix for iOS bounce effect */
    .mobile-main-content {
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
    }
}

/* Android Specific Fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    /* Android Chrome specific styles */
    select {
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2714%27%20height%3D%278%27%20viewBox%3D%270%200%2014%208%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M7%208L0%200h14z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 30px;
    }
}

/* Print Styles for Mobile */
@media print {
    .no-print,
    .mobile-header,
    .mobile-top-bar,
    .mobile-bottom-nav,
    .mobile-dropdown-menu {
        display: none !important;
    }
    
    body {
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }
}