/* ==========================================================================
   ATX Solutions - Mobile Base Styles
   Foundation CSS for mobile-first responsive design
   ========================================================================== */

/* ==========================================================================
   CSS Variables - Mobile Design Tokens
   ========================================================================== */

:root {
    /* Touch Target Sizing (WCAG 2.1 AAA - 44x44px minimum) */
    --mobile-touch-target-min: 44px;
    --mobile-touch-target-comfortable: 48px;
    --mobile-touch-target-large: 56px;
    
    /* Spacing Scale for Mobile */
    --mobile-space-xs: 4px;
    --mobile-space-sm: 8px;
    --mobile-space-md: 16px;
    --mobile-space-lg: 24px;
    --mobile-space-xl: 32px;
    
    /* Touch-friendly padding */
    --mobile-touch-padding: 12px;
    --mobile-touch-padding-sm: 8px;
    --mobile-touch-padding-lg: 16px;
    
    /* Font sizes optimized for mobile readability */
    --mobile-font-xs: 12px;
    --mobile-font-sm: 14px;
    --mobile-font-base: 16px;
    --mobile-font-lg: 18px;
    --mobile-font-xl: 20px;
    --mobile-font-2xl: 24px;
    
    /* Line heights for better touch interaction */
    --mobile-line-height-tight: 1.25;
    --mobile-line-height-base: 1.5;
    --mobile-line-height-relaxed: 1.75;
    
    /* Border radius for mobile UI elements */
    --mobile-radius-sm: 4px;
    --mobile-radius-md: 8px;
    --mobile-radius-lg: 12px;
    --mobile-radius-full: 9999px;
    
    /* Z-index layers */
    --mobile-z-offcanvas: 1045;
    --mobile-z-modal: 1050;
    --mobile-z-toast: 1060;
    --mobile-z-bottom-nav: 1040;
    
    /* Safe area insets for notched devices (iOS) */
    --mobile-safe-area-top: env(safe-area-inset-top);
    --mobile-safe-area-bottom: env(safe-area-inset-bottom);
    --mobile-safe-area-left: env(safe-area-inset-left);
    --mobile-safe-area-right: env(safe-area-inset-right);
    
    /* Transition timing */
    --mobile-transition-fast: 150ms;
    --mobile-transition-base: 250ms;
    --mobile-transition-slow: 350ms;
    
    /* Shadow depths for elevation */
    --mobile-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --mobile-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --mobile-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Mobile-Only Display Utilities
   ========================================================================== */

/* Show only on mobile (< 768px) */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* Hide on mobile (< 768px) */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

/* ==========================================================================
   Touch Target Standards (WCAG 2.1 AAA Compliance)
   ========================================================================== */

@media (max-width: 767px) {
    /* Ensure all interactive elements meet minimum touch target size */
    
    /* Buttons */
    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        min-height: var(--mobile-touch-target-min);
        min-width: var(--mobile-touch-target-min);
        padding: var(--mobile-touch-padding) var(--mobile-space-md);
        font-size: var(--mobile-font-base);
    }
    
    /* Large buttons for primary actions */
    .btn-lg {
        min-height: var(--mobile-touch-target-comfortable);
        font-size: var(--mobile-font-lg);
        padding: var(--mobile-touch-padding-lg) var(--mobile-space-lg);
    }
    
    /* Links in navigation */
    .nav-link,
    .navbar-nav .nav-link {
        min-height: var(--mobile-touch-target-min);
        padding: var(--mobile-touch-padding) var(--mobile-space-md);
        display: flex;
        align-items: center;
    }
    
    /* Dropdown items */
    .dropdown-item {
        min-height: var(--mobile-touch-target-min);
        padding: var(--mobile-touch-padding) var(--mobile-space-md);
        font-size: var(--mobile-font-base);
    }
    
    /* Form controls */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        min-height: var(--mobile-touch-target-comfortable);
        font-size: var(--mobile-font-base);
        padding: var(--mobile-touch-padding) var(--mobile-space-md);
    }
    
    /* Checkboxes and radio buttons */
    .form-check-input {
        min-width: 24px;
        min-height: 24px;
        margin-top: 0;
    }
    
    .form-check {
        min-height: var(--mobile-touch-target-min);
        padding-left: 2rem;
        display: flex;
        align-items: center;
    }
    
    /* Pagination */
    .pagination .page-link {
        min-height: var(--mobile-touch-target-min);
        min-width: var(--mobile-touch-target-min);
        padding: var(--mobile-touch-padding-sm) var(--mobile-space-md);
    }
    
    /* Close buttons */
    .btn-close {
        min-width: var(--mobile-touch-target-min);
        min-height: var(--mobile-touch-target-min);
        padding: var(--mobile-touch-padding);
    }
    
    /* Accordion buttons */
    .accordion-button {
        min-height: var(--mobile-touch-target-large);
        padding: var(--mobile-space-md);
        font-size: var(--mobile-font-base);
    }
    
    /* Badges (when clickable) */
    a.badge,
    button.badge {
        min-height: 32px;
        padding: 6px 12px;
        display: inline-flex;
        align-items: center;
    }
}

/* ==========================================================================
   Touch Feedback and States
   ========================================================================== */

@media (max-width: 767px) {
    /* Remove hover effects on touch devices */
    .btn:hover,
    .nav-link:hover,
    .dropdown-item:hover {
        /* Hover styles are replaced by :active on mobile */
    }
    
    /* Active/tap states for touch feedback */
    .btn:active,
    .nav-link:active,
    .dropdown-item:active,
    .card:active,
    a:active {
        opacity: 0.7;
        transition: opacity var(--mobile-transition-fast) ease;
    }
    
    /* Prevent tap highlight color */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        -webkit-touch-callout: none;
    }
    
    /* Smooth scrolling for mobile */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Improve text rendering on mobile */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* ==========================================================================
   Safe Area Support (iPhone X+, notched devices)
   ========================================================================== */

@media (max-width: 767px) {
    /* Support for notched devices */
    @supports (padding: max(0px)) {
        body {
            padding-left: max(0px, var(--mobile-safe-area-left));
            padding-right: max(0px, var(--mobile-safe-area-right));
        }
        
        .navbar.fixed-top {
            padding-top: max(0.5rem, var(--mobile-safe-area-top));
        }
        
        .fixed-bottom {
            padding-bottom: max(0.5rem, var(--mobile-safe-area-bottom));
        }
    }
}

/* ==========================================================================
   Typography Optimizations for Mobile
   ========================================================================== */

@media (max-width: 767px) {
    /* Adjust base font size for better readability */
    body {
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-base);
    }
    
    /* Headings */
    h1, .h1 { font-size: var(--mobile-font-2xl); line-height: var(--mobile-line-height-tight); }
    h2, .h2 { font-size: var(--mobile-font-xl); line-height: var(--mobile-line-height-tight); }
    h3, .h3 { font-size: var(--mobile-font-lg); line-height: var(--mobile-line-height-tight); }
    h4, .h4 { font-size: var(--mobile-font-base); line-height: var(--mobile-line-height-base); }
    h5, .h5 { font-size: var(--mobile-font-sm); line-height: var(--mobile-line-height-base); }
    h6, .h6 { font-size: var(--mobile-font-xs); line-height: var(--mobile-line-height-base); }
    
    /* Small text */
    small, .small {
        font-size: var(--mobile-font-sm);
    }
    
    /* Prevent text overflow */
    p, li, td, th {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* ==========================================================================
   Spacing Utilities for Mobile
   ========================================================================== */

@media (max-width: 767px) {
    /* Reduce padding on containers for more screen space */
    .container,
    .container-fluid {
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
    }
    
    /* Card spacing */
    .card {
        margin-bottom: var(--mobile-space-md);
    }
    
    .card-body {
        padding: var(--mobile-space-md);
    }
    
    /* Form spacing */
    .mb-3,
    .form-group {
        margin-bottom: var(--mobile-space-md) !important;
    }
    
    /* Section spacing */
    section {
        padding: var(--mobile-space-lg) 0;
    }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

@media (max-width: 767px) {
    /* Focus indicators for keyboard navigation */
    *:focus-visible {
        outline: 3px solid var(--bs-primary);
        outline-offset: 2px;
    }
    
    /* Skip links for screen readers */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--bs-primary);
        color: white;
        padding: 8px 16px;
        text-decoration: none;
        z-index: 9999;
    }
    
    .skip-link:focus {
        top: 0;
    }
    
    /* Screen reader only content */
    .sr-only-mobile {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

@media (max-width: 767px) {
    /* Hardware acceleration for transforms
       NOTE: .modal, .card, and .btn are intentionally excluded:
       - .modal/.card: transform on any ancestor of a Bootstrap modal creates
         a new stacking context that breaks position:fixed.
       - .btn: transform + will-change on buttons creates GPU compositing
         layers that interfere with touch-event processing on mobile,
         preventing data-bs-dismiss="modal" clicks from reaching Bootstrap's
         delegated handler. */
    .offcanvas {
        transform: translateZ(0);
        will-change: transform;
    }

    /* Optimize animations
       NOTE: All modal descendants are excluded via :not(.modal *).
       Bootstrap relies on transitions for fade-in/fade-out AND uses
       event delegation on the .modal element for data-bs-dismiss clicks.
       Overriding transition-duration on elements inside the modal can
       break the dismiss flow on mobile browsers. */
    *:not(.modal):not(.modal-dialog):not(.modal-backdrop):not(.modal-content):not(.modal *) {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: var(--mobile-transition-base) !important;
    }
    
    @media (prefers-reduced-motion: reduce) {
        *:not(.modal):not(.modal-dialog):not(.modal-backdrop):not(.modal-content):not(.modal *) {
            animation: none !important;
            transition: none !important;
        }
    }
}

/* ==========================================================================
   Utility Classes for Mobile
   ========================================================================== */

@media (max-width: 767px) {
    /* Full width on mobile */
    .mobile-full-width {
        width: 100% !important;
    }
    
    /* Remove border radius on mobile */
    .mobile-no-radius {
        border-radius: 0 !important;
    }
    
    /* Stack items vertically */
    .mobile-stack {
        flex-direction: column !important;
    }
    
    /* Center content */
    .mobile-center {
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Hide borders on mobile */
    .mobile-no-border {
        border: none !important;
    }
    
    /* Reduce font size on mobile */
    .mobile-font-sm {
        font-size: var(--mobile-font-sm) !important;
    }
}