/* =================================== */
/* MOBILE ENHANCED - Comprehensive Mobile UX Improvements */
/* =================================== */

/* =================================== */
/* 1. CRITICAL MOBILE FIXES */
/* =================================== */

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

/* Global fix for overlapping elements on mobile */
@media (max-width: 768px) {
    /* Prevent any element from causing horizontal overflow */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Exception for scrollable containers */
    .table-responsive,
    .overflow-auto,
    .overflow-x-auto,
    pre,
    code {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    
    /* Fix for cards and containers */
    .card,
    .card-body,
    .modal-content,
    .alert,
    .container,
    .container-fluid {
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Ensure all form elements fit */
    input,
    textarea,
    select,
    button,
    .form-control,
    .form-select {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Ensure all elements respect container bounds */
@media (max-width: 768px) {
    /* Prevent any element from causing horizontal scroll */
    * {
        max-width: 100% !important;
    }
    
    /* Exception for scrollable containers */
    .table-responsive,
    .overflow-auto,
    .overflow-x-auto {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    
    /* Fix for cards and containers */
    .card,
    .card-body,
    .modal-content,
    .alert {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Fix iOS Safari viewport height issues */
:root {
    --vh: 1vh;
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
    --safe-area-inset-right: env(safe-area-inset-right);
}

/* Fix viewport height for mobile browsers */
@media (max-width: 768px) {
    html {
        height: -webkit-fill-available;
    }
    
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-height: calc(var(--vh, 1vh) * 100);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* =================================== */
/* 2. TOUCH TARGETS - Minimum 48px */
/* =================================== */

@media (max-width: 768px) {
    /* All interactive elements must be at least 48px */
    button,
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .nav-link,
    .dropdown-item,
    .form-check-input,
    .form-check-label,
    .card[data-href],
    .touch-card {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.3);
    }
    
    /* Smaller buttons can be 44px minimum */
    .btn-sm {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 14px !important;
    }
    
    /* Icon buttons */
    .btn-icon,
    .navbar-toggler {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 12px !important;
    }
}

/* =================================== */
/* 3. MOBILE NAVIGATION IMPROVEMENTS */
/* =================================== */

@media (max-width: 768px) {
    /* Navbar improvements */
    .navbar {
        padding: 0.75rem 1rem !important;
        min-height: 60px;
        position: sticky;
        top: 0;
        z-index: 1030;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(15, 15, 35, 0.95) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Navbar brand */
    .navbar-brand {
        font-size: 1.1rem !important;
        max-width: calc(100vw - 120px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0.5rem 0 !important;
    }
    
    /* Navbar toggler */
    .navbar-toggler {
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        padding: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }
    
    .navbar-toggler:focus {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4) !important;
        outline: none !important;
    }
    
    .navbar-toggler:active {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: scale(0.95);
    }
    
    /* Mobile menu */
    .navbar-collapse {
        margin-top: 1rem;
        padding: 0.5rem 0;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Nav links */
    .navbar-nav .nav-link {
        padding: 1rem 1.25rem !important;
        margin: 0.25rem 0;
        border-radius: 8px;
        font-size: 16px !important;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        transition: all 0.2s ease;
    }
    
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: translateX(4px);
    }
    
    .navbar-nav .nav-link:active {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: scale(0.98);
    }
    
    /* Dropdown menus */
    .dropdown-menu {
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
        padding: 0.5rem !important;
        margin-top: 0.5rem;
        max-width: calc(100vw - 2rem);
    }
    
    .dropdown-item {
        padding: 0.875rem 1rem !important;
        border-radius: 8px;
        margin: 0.25rem 0;
        font-size: 15px !important;
    }
    
    .dropdown-item:active {
        background: rgba(59, 130, 246, 0.2) !important;
        transform: scale(0.98);
    }
}

/* =================================== */
/* 4. MOBILE FORMS - CRITICAL FIXES */
/* =================================== */

@media (max-width: 768px) {
    /* Force columns to stack on mobile */
    .row .col-md-6,
    .row .col-md-4,
    .row .col-md-3,
    .row .col-lg-6,
    .row .col-lg-4,
    .row .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    /* Form controls - Fixed overlap issues */
    .form-control,
    .form-select,
    textarea.form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="search"] {
        min-height: 48px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 12px 14px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        color: #fff !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        -webkit-appearance: none;
        appearance: none;
        display: block;
    }
    
    /* Focus states */
    .form-control:focus,
    .form-select:focus,
    textarea.form-control:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
        outline: none !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Labels */
    .form-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        display: block;
        width: 100%;
    }
    
    /* Form groups - Fixed spacing */
    .form-group {
        margin-bottom: 1.25rem !important;
        width: 100%;
        display: block;
    }
    
    /* Don't override Bootstrap's mb-3 globally - only for form groups */
    .form-group.mb-3,
    form .mb-3 {
        margin-bottom: 1.25rem !important;
    }
    
    /* Input wrapper to prevent overlap */
    .mb-2,
    .mb-3,
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    /* Input groups - Fixed flex issues */
    .input-group {
        flex-wrap: wrap !important;
        width: 100% !important;
        display: flex !important;
    }
    
    .input-group > * {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    .input-group-text {
        min-height: 48px !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
        border-radius: 8px 0 0 8px !important;
        flex-shrink: 0;
    }
    
    .input-group .form-control {
        border-radius: 0 8px 8px 0 !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    
    /* Input group stacked on very small screens */
    @media (max-width: 400px) {
        .input-group {
            flex-direction: column;
        }
        
        .input-group-text {
            border-radius: 8px 8px 0 0 !important;
            width: 100%;
        }
        
        .input-group .form-control {
            border-radius: 0 0 8px 8px !important;
            width: 100%;
        }
    }
    
    /* Checkboxes and radios */
    .form-check {
        padding: 0.875rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        display: flex;
        align-items: flex-start;
    }
    
    .form-check-input {
        width: 20px !important;
        height: 20px !important;
        margin-top: 0.125rem !important;
        margin-right: 0.75rem !important;
        margin-left: 0 !important;
        cursor: pointer;
        flex-shrink: 0;
    }
    
    .form-check-label {
        font-size: 14px !important;
        line-height: 1.5 !important;
        cursor: pointer;
        user-select: none;
        flex: 1;
        margin: 0 !important;
    }
    
    /* File inputs */
    input[type="file"] {
        min-height: 48px !important;
        padding: 10px 12px !important;
        font-size: 15px !important;
        width: 100% !important;
    }
    
    /* Textareas */
    textarea,
    textarea.form-control {
        min-height: 100px !important;
        resize: vertical;
        font-family: inherit;
        width: 100% !important;
        padding: 12px 14px !important;
    }
    
    /* Form rows - ensure proper stacking */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    
    .row > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 1rem;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Fix for nested forms */
    form .row .col-md-6,
    form .row .col-md-4,
    form .row .col-md-3,
    form .row .col-lg-6,
    form .row .col-lg-4,
    form .row .col-lg-3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 1rem !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Ensure inputs don't overflow containers */
    .col-md-6 .form-control,
    .col-md-4 .form-control,
    .col-md-3 .form-control,
    .col-lg-6 .form-control,
    .col-lg-4 .form-control,
    .col-md-6 .form-select,
    .col-md-4 .form-select,
    .col-md-3 .form-select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    /* Fix for form labels in columns */
    .col-md-6 .form-label,
    .col-md-4 .form-label,
    .col-md-3 .form-label {
        width: 100% !important;
        display: block !important;
    }
}

/* =================================== */
/* 5. MOBILE TABLES - HORIZONTAL SCROLL */
/* =================================== */

@media (max-width: 768px) {
    /* Table wrapper */
    .table-responsive {
        border-radius: 12px;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        margin: 1rem 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: relative;
    }
    
    /* Scroll indicator */
    .table-responsive::after {
        content: '→';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        color: rgba(255, 255, 255, 0.5);
        pointer-events: none;
        animation: pulse-horizontal 2s infinite;
    }
    
    @keyframes pulse-horizontal {
        0%, 100% { opacity: 0.3; transform: translateY(-50%) translateX(0); }
        50% { opacity: 0.7; transform: translateY(-50%) translateX(5px); }
    }
    
    /* Tables */
    table {
        width: 100%;
        min-width: 600px;
        font-size: 14px;
        border-collapse: separate;
        border-spacing: 0;
    }
    
    /* Table headers */
    thead {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(15, 15, 35, 0.98);
        backdrop-filter: blur(10px);
    }
    
    th {
        padding: 1rem 0.75rem !important;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
        white-space: nowrap;
    }
    
    /* Table cells */
    td {
        padding: 0.875rem 0.75rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        vertical-align: middle;
    }
    
    /* Table rows */
    tbody tr {
        transition: background 0.2s ease;
    }
    
    tbody tr:active {
        background: rgba(255, 255, 255, 0.05) !important;
    }
    
    /* Responsive table cards (alternative) */
    .table-card-view {
        display: none;
    }
    
    @media (max-width: 576px) {
        .table-responsive table {
            display: none;
        }
        
        .table-card-view {
            display: block;
        }
        
        .table-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        
        .table-card-row {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .table-card-row:last-child {
            border-bottom: none;
        }
        
        .table-card-label {
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            font-size: 13px;
        }
        
        .table-card-value {
            color: #fff;
            font-size: 15px;
            text-align: right;
        }
    }
}

/* =================================== */
/* 6. MOBILE MODALS - FULL SCREEN */
/* =================================== */

@media (max-width: 768px) {
    /* Modal backdrop */
    .modal-backdrop {
        background: rgba(0, 0, 0, 0.8) !important;
        backdrop-filter: blur(4px);
    }
    
    /* Modal dialog */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh;
        height: -webkit-fill-available;
        display: flex;
        flex-direction: column;
    }
    
    /* Modal content */
    .modal-content {
        border-radius: 0 !important;
        border: none !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: rgba(15, 15, 35, 0.98) !important;
        backdrop-filter: blur(20px);
    }
    
    /* Modal header */
    .modal-header {
        padding: 1.25rem 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        background: rgba(15, 15, 35, 0.98);
        z-index: 10;
    }
    
    .modal-title {
        font-size: 1.25rem !important;
        font-weight: 600;
    }
    
    /* Close button */
    .btn-close {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0.8;
        background-size: 20px;
    }
    
    .btn-close:active {
        opacity: 1;
        transform: scale(0.9);
    }
    
    /* Modal body */
    .modal-body {
        padding: 1.25rem 1rem !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
    }
    
    /* Modal footer */
    .modal-footer {
        padding: 1rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background: rgba(15, 15, 35, 0.98);
        z-index: 10;
        display: flex;
        gap: 0.75rem;
    }
    
    .modal-footer .btn {
        flex: 1;
        min-height: 48px;
    }
}

/* =================================== */
/* 7. MOBILE CARDS - ENHANCED */
/* =================================== */

@media (max-width: 768px) {
    .card {
        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        margin-bottom: 1.25rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
    }
    
    .card:active {
        transform: scale(0.98);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .card-header {
        padding: 1rem 1.25rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    .card-body {
        padding: 1.25rem !important;
    }
    
    .card-footer {
        padding: 1rem 1.25rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Clickable cards */
    .card[data-href],
    .card.clickable {
        cursor: pointer;
        user-select: none;
    }
    
    .card[data-href]:active,
    .card.clickable:active {
        transform: scale(0.97);
    }
}

/* =================================== */
/* 8. MOBILE BUTTONS - ENHANCED */
/* =================================== */

@media (max-width: 768px) {
    .btn {
        border-radius: 10px !important;
        font-weight: 600;
        letter-spacing: 0.3px;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .btn:active {
        transform: scale(0.96);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        border: none;
    }
    
    .btn-primary:active {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    }
    
    /* Button groups */
    .btn-group,
    .btn-group-vertical {
        width: 100%;
        display: flex;
    }
    
    .btn-group .btn {
        flex: 1;
    }
    
    /* Full width buttons on mobile */
    .btn-mobile-full {
        width: 100% !important;
        display: block;
        margin-bottom: 0.75rem;
    }
}

/* =================================== */
/* 9. MOBILE SPACING & LAYOUT */
/* =================================== */

@media (max-width: 768px) {
    /* Containers - Prevent overflow */
    .container,
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Prevent any element from overflowing */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Exception for images and videos */
    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Sections */
    section {
        padding: 2rem 0 !important;
    }
    
    /* Headings */
    h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    h2 {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
        line-height: 1.3 !important;
        margin-bottom: 0.875rem !important;
    }
    
    h3 {
        font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }
    
    h4 {
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    }
    
    /* Paragraphs */
    p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Lists */
    ul, ol {
        padding-left: 1.5rem;
        margin-bottom: 1rem;
    }
    
    li {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 0.5rem;
    }
    
    /* Spacing utilities */
    .mb-mobile-1 { margin-bottom: 0.5rem !important; }
    .mb-mobile-2 { margin-bottom: 1rem !important; }
    .mb-mobile-3 { margin-bottom: 1.5rem !important; }
    .mb-mobile-4 { margin-bottom: 2rem !important; }
    
    .mt-mobile-1 { margin-top: 0.5rem !important; }
    .mt-mobile-2 { margin-top: 1rem !important; }
    .mt-mobile-3 { margin-top: 1.5rem !important; }
    .mt-mobile-4 { margin-top: 2rem !important; }
    
    .p-mobile-1 { padding: 0.5rem !important; }
    .p-mobile-2 { padding: 1rem !important; }
    .p-mobile-3 { padding: 1.5rem !important; }
    .p-mobile-4 { padding: 2rem !important; }
}

/* =================================== */
/* 10. MOBILE ALERTS & NOTIFICATIONS */
/* =================================== */

@media (max-width: 768px) {
    .alert {
        border-radius: 12px !important;
        padding: 1rem 1.25rem !important;
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 1rem;
        border-width: 2px;
    }
    
    .alert-dismissible {
        padding-right: 3rem !important;
    }
    
    .btn-close {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
    }
    
    /* Toast notifications */
    .toast {
        border-radius: 12px !important;
        margin: 0.75rem;
        max-width: calc(100vw - 1.5rem);
    }
    
    .toast-header {
        padding: 0.875rem 1rem !important;
        font-size: 15px;
    }
    
    .toast-body {
        padding: 1rem !important;
        font-size: 15px;
    }
}

/* =================================== */
/* 11. MOBILE BADGES & PILLS */
/* =================================== */

@media (max-width: 768px) {
    .badge {
        padding: 0.5rem 0.75rem !important;
        font-size: 13px !important;
        font-weight: 600;
        border-radius: 8px;
        min-height: 28px;
        display: inline-flex;
        align-items: center;
    }
    
    .badge-sm {
        padding: 0.375rem 0.625rem !important;
        font-size: 12px !important;
        min-height: 24px;
    }
}

/* =================================== */
/* 12. MOBILE LOADING STATES */
/* =================================== */

@media (max-width: 768px) {
    .spinner-border,
    .spinner-grow {
        width: 32px;
        height: 32px;
        border-width: 3px;
    }
    
    .spinner-border-sm,
    .spinner-grow-sm {
        width: 24px;
        height: 24px;
        border-width: 2px;
    }
    
    /* Loading overlay */
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 15, 35, 0.95);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }
}

/* =================================== */
/* 13. MOBILE UTILITIES */
/* =================================== */

@media (max-width: 768px) {
    /* Hide on mobile */
    .d-mobile-none {
        display: none !important;
    }
    
    /* Show on mobile */
    .d-mobile-block {
        display: block !important;
    }
    
    .d-mobile-flex {
        display: flex !important;
    }
    
    /* Full width on mobile */
    .w-mobile-100 {
        width: 100% !important;
    }
    
    /* Text alignment */
    .text-mobile-center {
        text-align: center !important;
    }
    
    .text-mobile-left {
        text-align: left !important;
    }
    
    .text-mobile-right {
        text-align: right !important;
    }
    
    /* Safe area padding */
    .safe-area-top {
        padding-top: env(safe-area-inset-top);
    }
    
    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .safe-area-left {
        padding-left: env(safe-area-inset-left);
    }
    
    .safe-area-right {
        padding-right: env(safe-area-inset-right);
    }
}

/* =================================== */
/* 14. PERFORMANCE OPTIMIZATIONS */
/* =================================== */

@media (max-width: 768px) {
    /* Reduce animations on low-end devices */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Optimize rendering */
    .card,
    .btn,
    .modal-content {
        will-change: transform;
        contain: layout style paint;
    }
    
    /* GPU acceleration */
    .navbar,
    .modal-backdrop,
    .toast {
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* =================================== */
/* 15. ACCESSIBILITY IMPROVEMENTS */
/* =================================== */

@media (max-width: 768px) {
    /* Focus indicators */
    *:focus-visible {
        outline: 3px solid rgba(59, 130, 246, 0.6) !important;
        outline-offset: 2px !important;
        border-radius: 4px;
    }
    
    /* Skip link */
    .skip-link {
        position: absolute;
        top: -100px;
        left: 0;
        background: #3b82f6;
        color: #fff;
        padding: 1rem 1.5rem;
        text-decoration: none;
        z-index: 10000;
        border-radius: 0 0 8px 0;
    }
    
    .skip-link:focus {
        top: 0;
    }
}

/* =================================== */
/* 16. EXTRA SMALL DEVICES (< 400px) */
/* =================================== */

@media (max-width: 400px) {
    .container,
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .btn {
        font-size: 14px !important;
        padding: 10px 14px !important;
    }
}