/* ==========================================================================
   ATX Solutions - Mobile Layout Adaptations
   Responsive layout utilities and adaptations for mobile devices
   ========================================================================== */

/* ==========================================================================
   Container and Grid Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Full-width containers on mobile */
    .container {
        max-width: 100%;
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
    }

@media (max-width: 767px) {
    /* Mobile header consolidation: remove the horizontal workspace menu bar on mobile */
    .workspace-menu-bar {
        display: none !important;
    }
}

/* ======================================================================
   One-handed / Bottom navigation spacing
   ====================================================================== */

@media (max-width: 767px) {
    /* Prevent fixed bottom nav from overlapping content */
    main {
        padding-bottom: calc(56px + var(--mobile-safe-area-bottom));
    }
}
    
    /* Stack all columns on mobile */
    .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Remove negative margins on rows */
    .row {
        margin-left: calc(-1 * var(--mobile-space-sm));
        margin-right: calc(-1 * var(--mobile-space-sm));
    }
    
    .row > * {
        padding-left: var(--mobile-space-sm);
        padding-right: var(--mobile-space-sm);
    }
    
    /* Grid gap adjustments */
    .g-3,
    .gx-3 {
        --bs-gutter-x: var(--mobile-space-md);
    }
    
    .g-3,
    .gy-3 {
        --bs-gutter-y: var(--mobile-space-md);
    }
}

/* ==========================================================================
   Card Layout Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Cards take full width with minimal spacing */
    .card {
        border-radius: var(--mobile-radius-md);
        margin-bottom: var(--mobile-space-md);
        box-shadow: var(--mobile-shadow-sm);
    }
    
    .card-body {
        padding: var(--mobile-space-md);
    }
    
    .card-header,
    .card-footer {
        padding: var(--mobile-space-md);
    }
    
    /* Horizontal cards stack vertically */
    .card-horizontal {
        flex-direction: column !important;
    }
    
    .card-horizontal .card-img,
    .card-horizontal .card-img-top {
        width: 100%;
        max-width: 100%;
        border-radius: var(--mobile-radius-md) var(--mobile-radius-md) 0 0;
    }
    
    /* Card groups stack */
    .card-group {
        flex-direction: column;
    }
    
    .card-group > .card {
        margin-bottom: var(--mobile-space-md);
    }
}

/* ==========================================================================
   Flex and Display Utilities
   ========================================================================== */

@media (max-width: 767px) {
    /* Force column direction for flex containers */
    .mobile-flex-column {
        flex-direction: column !important;
    }
    
    /* Center items */
    .mobile-justify-center {
        justify-content: center !important;
    }
    
    .mobile-align-center {
        align-items: center !important;
    }
    
    /* Spacing between flex items */
    .mobile-gap-sm > * + * {
        margin-top: var(--mobile-space-sm);
    }
    
    .mobile-gap-md > * + * {
        margin-top: var(--mobile-space-md);
    }
    
    .mobile-gap-lg > * + * {
        margin-top: var(--mobile-space-lg);
    }
    
    /* Flex order control */
    .mobile-order-first {
        order: -1 !important;
    }
    
    .mobile-order-last {
        order: 999 !important;
    }
}

/* ==========================================================================
   Modal Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Modals take full screen on mobile */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }
    
    .modal-content {
        height: 100%;
        border: none;
        border-radius: 0;
    }
    
    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--mobile-space-md);
    }
    
    .modal-header {
        padding: var(--mobile-space-md);
        position: sticky;
        top: 0;
        background: white;
        z-index: 1;
        border-bottom: 1px solid #dee2e6;
    }
    
    .modal-footer {
        padding: var(--mobile-space-md);
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid #dee2e6;
    }
    
    /* Exception: Small modals (alerts, confirmations) */
    .modal-sm .modal-dialog {
        height: auto;
        margin: var(--mobile-space-md);
        max-width: calc(100% - var(--mobile-space-lg));
    }
    
    .modal-sm .modal-content {
        height: auto;
        border-radius: var(--mobile-radius-lg);
    }
}

/* ==========================================================================
   Offcanvas Enhancements
   ========================================================================== */

@media (max-width: 767px) {
    /* Offcanvas takes appropriate width */
    .offcanvas {
        max-width: 85vw;
    }
    
    .offcanvas-start,
    .offcanvas-end {
        width: 85vw;
    }
    
    .offcanvas-body {
        padding: var(--mobile-space-md);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .offcanvas-header {
        padding: var(--mobile-space-md);
        min-height: var(--mobile-touch-target-large);
    }
    
    /* Backdrop */
    .offcanvas-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }
}

/* ==========================================================================
   Alert and Toast Positioning
   ========================================================================== */

@media (max-width: 767px) {
    /* Alerts */
    .alert {
        border-radius: var(--mobile-radius-md);
        padding: var(--mobile-space-md);
        margin-bottom: var(--mobile-space-md);
    }
    
    .alert-dismissible .btn-close {
        padding: var(--mobile-touch-padding);
    }
    
    /* Toast container positioning */
    .toast-container {
        padding: var(--mobile-space-md);
        /* Respect safe areas on notched devices */
        padding-top: max(var(--mobile-space-md), var(--mobile-safe-area-top));
        padding-bottom: max(var(--mobile-space-md), var(--mobile-safe-area-bottom));
    }
    
    /* Toasts full width on mobile */
    .toast {
        width: 100%;
        max-width: 100%;
        border-radius: var(--mobile-radius-md);
    }
    
    .toast-header,
    .toast-body {
        padding: var(--mobile-space-md);
    }
}

/* ==========================================================================
   Dropdown Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Dropdowns take full width */
    .dropdown-menu {
        width: 100%;
        max-width: calc(100vw - var(--mobile-space-lg));
        border-radius: var(--mobile-radius-md);
        padding: var(--mobile-space-sm);
        box-shadow: var(--mobile-shadow-lg);
    }
    
    .dropdown-item {
        min-height: var(--mobile-touch-target-min);
        padding: var(--mobile-touch-padding) var(--mobile-space-md);
        border-radius: var(--mobile-radius-sm);
        margin-bottom: var(--mobile-space-xs);
        font-size: var(--mobile-font-base);
    }
    
    .dropdown-divider {
        margin: var(--mobile-space-sm) 0;
    }
    
    /* Dropdown header */
    .dropdown-header {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        font-size: var(--mobile-font-sm);
    }
    
    /* Profile dropdown specific */
    .navbar .dropdown-menu {
        position: absolute;
        right: 0;
        left: auto;
        min-width: 200px;
        margin-top: 0.5rem;
    }
    
    /* Dropdown item text */
    .dropdown-item-text {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        min-height: auto;
    }
    
    /* Icons in dropdown items */
    .dropdown-item i,
    .dropdown-item svg {
        width: 20px;
        margin-right: var(--mobile-space-sm);
        display: inline-block;
    }
    
    /* Active/hover states for touch */
    .dropdown-item:active {
        background-color: var(--bs-primary);
        color: white;
    }
    
    /* Dropdown toggle button in navbar */
    .navbar .nav-link.dropdown-toggle {
        min-height: var(--mobile-touch-target-min);
        min-width: var(--mobile-touch-target-min);
        display: flex;
        align-items: center;
        padding: var(--mobile-space-sm);
    }
    
    /* Profile image in dropdown toggle */
    .navbar .nav-link.dropdown-toggle img {
        border: 2px solid rgba(255, 255, 255, 0.3);
    }
}

/* ==========================================================================
   Accordion Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .accordion-item {
        margin-bottom: var(--mobile-space-sm);
        border-radius: var(--mobile-radius-md);
        overflow: hidden;
    }
    
    .accordion-button {
        padding: var(--mobile-space-md);
        font-size: var(--mobile-font-base);
        min-height: var(--mobile-touch-target-large);
    }
    
    .accordion-body {
        padding: var(--mobile-space-md);
    }
    
    /* Icons */
    .accordion-button::after {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
    }
}

/* ==========================================================================
   List Group Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .list-group-item {
        padding: var(--mobile-space-md);
        border-left: none;
        border-right: none;
    }
    
    /* First and last items */
    .list-group-item:first-child {
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    
    .list-group-item:last-child {
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    /* Interactive list items */
    .list-group-item-action {
        min-height: var(--mobile-touch-target-min);
    }
}

/* ==========================================================================
   Badge and Pill Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .badge {
        font-size: var(--mobile-font-sm);
        padding: 4px 8px;
        border-radius: var(--mobile-radius-sm);
    }
    
    /* Clickable badges */
    a.badge,
    button.badge {
        min-height: 32px;
        padding: 6px 12px;
        display: inline-flex;
        align-items: center;
    }
}

/* ==========================================================================
   Progress and Spinner Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .progress {
        height: 8px;
        border-radius: var(--mobile-radius-full);
    }
    
    /* Larger progress bars for important actions */
    .progress.progress-lg {
        height: 12px;
    }
    
    /* Spinners */
    .spinner-border,
    .spinner-grow {
        width: 2rem;
        height: 2rem;
    }
}

/* ==========================================================================
   Image and Media Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Images responsive by default */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Figure */
    figure {
        margin: var(--mobile-space-md) 0;
    }
    
    figcaption {
        font-size: var(--mobile-font-sm);
        padding: var(--mobile-space-sm);
    }
    
    /* Thumbnails */
    .img-thumbnail {
        padding: 4px;
        border-radius: var(--mobile-radius-md);
    }
}

/* ==========================================================================
   Breadcrumb Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Breadcrumbs scroll horizontally if needed */
    .breadcrumb {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding: var(--mobile-space-sm) 0;
        margin-bottom: var(--mobile-space-md);
    }
    
    .breadcrumb-item {
        font-size: var(--mobile-font-sm);
    }
    
    /* Show only last 2 items + home on very small screens */
    @media (max-width: 375px) {
        .breadcrumb-item:not(:first-child):not(:nth-last-child(-n+2)) {
            display: none;
        }
        
        .breadcrumb-item:nth-last-child(3)::before {
            content: "...";
        }
    }
}

/* ==========================================================================
   Pagination Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .page-link {
        min-width: var(--mobile-touch-target-min);
        min-height: var(--mobile-touch-target-min);
        padding: var(--mobile-touch-padding-sm);
        font-size: var(--mobile-font-sm);
    }
    
    /* Hide page numbers on very small screens, show only prev/next */
    @media (max-width: 375px) {
        .page-item:not(.active):not(:first-child):not(:last-child) {
            display: none;
        }
    }
}

/* ==========================================================================
   Utility Spacing for Mobile
   ========================================================================== */

@media (max-width: 767px) {
    /* Margin utilities */
    .mobile-m-0 { margin: 0 !important; }
    .mobile-m-1 { margin: var(--mobile-space-xs) !important; }
    .mobile-m-2 { margin: var(--mobile-space-sm) !important; }
    .mobile-m-3 { margin: var(--mobile-space-md) !important; }
    .mobile-m-4 { margin: var(--mobile-space-lg) !important; }
    .mobile-m-5 { margin: var(--mobile-space-xl) !important; }
    
    /* Padding utilities */
    .mobile-p-0 { padding: 0 !important; }
    .mobile-p-1 { padding: var(--mobile-space-xs) !important; }
    .mobile-p-2 { padding: var(--mobile-space-sm) !important; }
    .mobile-p-3 { padding: var(--mobile-space-md) !important; }
    .mobile-p-4 { padding: var(--mobile-space-lg) !important; }
    .mobile-p-5 { padding: var(--mobile-space-xl) !important; }
    
    /* Margin bottom utilities (most common) */
    .mobile-mb-0 { margin-bottom: 0 !important; }
    .mobile-mb-1 { margin-bottom: var(--mobile-space-xs) !important; }
    .mobile-mb-2 { margin-bottom: var(--mobile-space-sm) !important; }
    .mobile-mb-3 { margin-bottom: var(--mobile-space-md) !important; }
    .mobile-mb-4 { margin-bottom: var(--mobile-space-lg) !important; }
    .mobile-mb-5 { margin-bottom: var(--mobile-space-xl) !important; }
}

/* ==========================================================================
   Horizontal Scroll Container (for tables, etc.)
   ========================================================================== */

@media (max-width: 767px) {
    .mobile-scroll-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: var(--mobile-space-md);
    }
    
    /* Shadow indicators for scrollable content */
    .mobile-scroll-x-shadow {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-scroll-x-shadow::before,
    .mobile-scroll-x-shadow::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 20px;
        pointer-events: none;
        z-index: 1;
    }
    
    .mobile-scroll-x-shadow::before {
        left: 0;
        background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    }
    
    .mobile-scroll-x-shadow::after {
        right: 0;
        background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    }
}

/* ==========================================================================
   Fixed Positioning Adjustments
   ========================================================================== */

@media (max-width: 767px) {
    /* Fixed top elements respect safe area */
    .fixed-top {
        padding-top: max(0.5rem, var(--mobile-safe-area-top));
    }
    
    /* Fixed bottom elements respect safe area */
    .fixed-bottom {
        padding-bottom: max(0.5rem, var(--mobile-safe-area-bottom));
    }
    
    /* Sticky elements */
    .sticky-top {
        top: calc(56px + var(--mobile-safe-area-top));
    }
}