/* ========== Mobile Optimization Enhancements ========== */
/* Optimized for iOS Safari, Android Chrome, and responsive design */

/* ========== Touch Target Optimization (44px minimum) ========== */
.glass-btn,
button,
a.glass-btn,
.nav-link,
.mobile-nav-link,
.navbar-menu-toggle,
.theme-toggle,
.user-menu {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
}

/* Improve button touch targets */
button:not(.navbar-menu-toggle):not(.theme-toggle) {
    min-height: 44px;
    padding: 12px 16px;
}

/* Link touch targets */
a:not(.brand-icon) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
}

/* ========== Mobile Spacing Optimization ========== */
@media (max-width: 640px) {
    /* Reduce container padding on extra small screens */
    .admin-container {
        padding: 16px !important;
    }
    
    .glass-card {
        margin-bottom: 16px !important;
        padding: 16px !important;
        border-radius: 16px;
    }
    
    /* Optimize row gaps */
    .row.g-3 {
        gap: 12px !important;
    }
    
    .row.g-2 {
        gap: 10px !important;
    }
    
    /* Section headers */
    .section-header {
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .section-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1rem;
        font-weight: 700;
    }
    
    /* Typography optimization */
    h1, h2, h3 {
        line-height: 1.3;
        margin-bottom: 12px;
    }
    
    p {
        line-height: 1.5;
        margin-bottom: 12px;
    }
    
    small {
        font-size: 0.8rem;
    }
    
    /* Button optimization */
    .glass-btn {
        width: 100%;
        padding: 14px 16px;
        border-radius: 12px;
        font-size: 0.95rem;
        min-height: 44px;
    }
    
    .glass-btn i {
        margin-right: 8px;
    }
    
    /* Analytics tiles */
    .analytics-tile {
        padding: 16px !important;
        border-radius: 12px;
    }
    
    .metric-value {
        font-size: 2rem;
        line-height: 1;
    }
    
    .metric-icon-wrapper {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
    
    /* Table optimization */
    .glass-table {
        font-size: 0.85rem;
    }
    
    .glass-table th,
    .glass-table td {
        padding: 10px 8px;
    }
    
    .glass-table thead {
        font-size: 0.8rem;
    }
    
    /* Hide non-essential columns on mobile */
    .table-sm-hide {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Tablet optimization */
    .admin-container {
        padding: 20px;
    }
    
    .glass-card {
        margin-bottom: 20px;
        padding: 20px;
        border-radius: 16px;
    }
    
    /* Stack flex items vertically */
    .flex-sm-column {
        flex-direction: column;
    }
    
    /* Full width buttons on tablet */
    .btn-sm-full {
        width: 100%;
    }
    
    /* Table scrolling */
    .table-responsive {
        border-radius: 12px;
        overflow-x: auto;
    }
}

/* ========== Mobile Navigation Optimization ========== */
@media (max-width: 1024px) {
    /* Navbar adjustments */
    .admin-navbar {
        padding: 12px 16px;
        height: auto;
        min-height: 56px;
    }
    
    .navbar-content {
        gap: 12px;
    }
    
    .brand-name {
        display: none;
    }
    
    .navbar-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
        border-radius: 8px;
        transition: background 0.2s ease;
    }
    
    .navbar-menu-toggle:active {
        background: rgba(139, 92, 246, 0.1);
    }
    
    /* Mobile menu optimization */
    .mobile-menu {
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .mobile-nav-link {
        padding: 16px;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .mobile-nav-link i {
        font-size: 1.2rem;
        min-width: 24px;
        text-align: center;
    }
}

/* ========== Responsive Text Sizing ========== */
@media (max-width: 640px) {
    /* Scale down large text */
    .metric-value {
        font-size: 1.75rem;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.25rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    /* Code blocks */
    code {
        font-size: 0.75em;
        padding: 2px 4px;
    }
}

/* ========== Form Optimization ========== */
@media (max-width: 768px) {
    /* Input optimization */
    input,
    select,
    textarea {
        min-height: 44px;
        padding: 12px;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 8px;
    }
    
    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: #4361ee;
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    }
    
    /* Form group spacing */
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-label {
        margin-bottom: 8px;
        display: block;
        font-weight: 600;
        font-size: 0.95rem;
    }
}

/* ========== Mobile Viewport Optimization ========== */
@media (max-width: 480px) {
    /* Extra small screens */
    .admin-container {
        padding: 12px !important;
    }
    
    .glass-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 12px;
    }
    
    .row.g-3 {
        gap: 8px !important;
    }
    
    /* Stack everything */
    .d-sm-none {
        display: none !important;
    }
    
    /* Text wrapping */
    .text-truncate {
        word-break: break-word;
    }
    
    /* Remove horizontal padding on full-width elements */
    .w-100 {
        width: 100% !important;
    }
}

/* ========== Safe Area Support (iPhone Notch) ========== */
@supports (padding: max(0px)) {
    .admin-navbar {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    
    .admin-container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* ========== Touch Interaction Optimization ========== */
/* Reduce flashing on touch — avoid user-select:none on interactive
   elements; it blocks touch focus/clicks on some Android & older iOS. */
.glass-btn,
button,
a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Form controls: keep tap-highlight off but allow normal input interaction */
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Keep text selectable */
p, span, small {
    -webkit-user-select: text;
    user-select: text;
}

/* ========== Universal Mobile Tap Feedback ========== */
/* Visible pressed state for ALL tappable elements on touch devices */
@media (hover: none) and (pointer: coarse) {
    /* Bootstrap .btn pressed states */
    .btn:active:not(:disabled) {
        transform: scale(0.96) !important;
        transition-duration: 0.05s !important;
        filter: brightness(0.88);
    }

    /* Anchor buttons / nav links */
    a.btn:active,
    .nav-link:active,
    .dropdown-item:active,
    .list-group-item-action:active {
        transform: scale(0.97);
        opacity: 0.85;
        transition-duration: 0.05s;
    }

    /* Card taps */
    .admin-card:active,
    .glass-card:active,
    .card:active {
        transform: scale(0.98);
        transition-duration: 0.08s;
    }
}

/* ========== Mobile Performance Optimization ========== */
/* Reduce animation on reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== Mobile Table Scroll Fix ========== */
/* Prevent table overflow — gives every table a scrollable container on mobile */
@media (max-width: 768px) {
    .card-body,
    .tab-pane,
    .modal-body {
        overflow-x: auto;
    }

    /* Compact table cells on mobile */
    .table th,
    .table td {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.5rem 0.6rem;
    }

    /* Allow wrapping for name/description columns */
    .table .text-wrap,
    .table td:first-child {
        white-space: normal;
        min-width: 120px;
    }
}

/* ========== Mobile Typography Optimization ========== */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    body {
        line-height: 1.5;
        letter-spacing: 0.3px;
    }
    
    /* Better readability on mobile */
    .section-title {
        letter-spacing: -0.5px;
    }
}

/* ========== Mobile List Optimization ========== */
@media (max-width: 768px) {
    /* Better spacing for lists */
    li {
        padding: 8px 0;
        line-height: 1.6;
    }
    
    ul, ol {
        padding-left: 20px;
        margin-bottom: 16px;
    }
}

/* ========== Mobile Viewport Fix ========== */
/* Prevent horizontal scrolling */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* ========== Sticky Elements on Mobile ========== */
@media (max-width: 768px) {
    .admin-navbar {
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ========== Mobile Loading State ========== */
/* Scoped to .mobile-loading to avoid accidentally matching generic 'loading'
   classes on page-loader bars or other elements.  */
.mobile-loading {
    opacity: 0.6;
    pointer-events: none;
}

.mobile-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid rgba(67, 97, 238, 0.2);
    border-top-color: #4361ee;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ========== Mobile Dialog Optimization ========== */
@media (max-width: 768px) {
    .modal,
    .dialog {
        padding: 0 !important;
    }
    
    .modal-content,
    .dialog-content {
        border-radius: 16px 16px 0 0;
        margin-top: auto;
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* ========== Mobile Landscape Optimization ========== */
@media (max-height: 600px) and (max-width: 900px) {
    .admin-container {
        padding: 12px !important;
    }
    
    .glass-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    /* Reduce gap in landscape mode */
    .row.g-3 {
        gap: 8px !important;
    }
}

/* ========== Scroll Performance ========== */
.scrollable,
.table-responsive,
.mobile-menu {
    will-change: transform;
}

/* ========== Network Status Indicator ========== */
@media (max-width: 768px) {
    .offline::after {
        content: 'Offline';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ef4444;
        color: white;
        padding: 12px;
        text-align: center;
        font-size: 0.9rem;
        z-index: 999;
    }
}

/* ========== Better Focus States for Mobile ========== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #4361ee;
    outline-offset: 2px;
}

/* ========== Mobile Accessibility ========== */
@media (max-width: 768px) {
    /* Larger touch targets for accessibility */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 44px;
        min-height: 44px;
        cursor: pointer;
    }
    
    /* Better label clickability */
    label {
        cursor: pointer;
        display: inline-block;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}