/**
 * XMarket Tablet Optimization Styles
 * Provides enhanced compatibility for iOS and Android tablets
 */

/* Base Tablet Optimizations */
@media (max-width: 1024px) {
    /* Improve touch targets */
    .btn, 
    .nav-link, 
    .dropdown-item,
    .form-check-label,
    .page-link {
        padding: 0.625rem 1rem !important;
        min-height: 44px !important; /* Apple's recommended minimum touch target size */
    }
    
    /* Improve form elements for touch */
    .form-control, 
    .form-select,
    .input-group,
    .custom-select {
        min-height: 44px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Enhance card layouts */
    .card {
        height: 100%;
        margin-bottom: 1rem !important;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    /* Reduce some font sizes for better fit */
    h1 {
        font-size: calc(1.75rem + 1.5vw) !important;
    }
    
    h2 {
        font-size: calc(1.5rem + 1vw) !important;
    }
    
    /* Improved table scrolling on tablets */
    .table-responsive {
        overflow-y: auto;
    }
    
    /* Better spacing for grids on tablets */
    .row {
        margin-right: -0.75rem;
        margin-left: -0.75rem;
    }
    
    .row > * {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
    
    /* Increase tap area for clickable elements */
    a.card, 
    button.card,
    .clickable {
        cursor: pointer;
    }
    
    /* Optimize nav tabs for touch */
    .nav-tabs .nav-link {
        padding: 0.75rem 1.25rem;
    }
    
    /* Better modal handling */
    .modal-dialog {
        margin: 1rem auto;
    }
}

/* Small tablet specific adjustments */
@media (max-width: 768px) {
    /* Further reduce some elements on small tablets */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Adjusted grid for better small tablet layout */
    .row {
        margin-right: -0.5rem;
        margin-left: -0.5rem;
    }
    
    .row > * {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    /* Reduce excessive margins on cards */
    .card {
        margin-bottom: 0.75rem !important;
    }
    
    .card-body {
        padding: 1rem;
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific styles */
    body {
        cursor: pointer; /* Helps with iOS link activation */
    }
    
    /* Fix for iOS momentum scrolling */
    .scrollable-area {
        overflow-y: auto;
    }
    
    /* Prevent unwanted highlights */
    a, button, input, select {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
}

/* Android specific fixes */
@supports not (-webkit-touch-callout: none) {
    /* Android-specific styles */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        height: 44px; /* Better date inputs on Android */
    }
}

/* Prevent text size adjustment on orientation change */
html {
    /* Vendor prefixes for text-size-adjust */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    
    /* Additional properties to help with mobile text rendering */
    font-size: 100%; /* Ensure base font size is consistent */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure proper viewport height on mobile browsers */
.vh-100 {
    height: 100vh;
    height: -webkit-fill-available;
    height: fill-available;
}

/* Improve sticky positioning on mobile browsers */
.sticky-top {
    position: -webkit-sticky;
    position: sticky;
}

/* Enhanced focus states for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(58, 91, 188, 0.4);
    outline-offset: 2px;
}