/* ============================================
   Responsive Design - Mobile First
   Clean Breakpoints, Minimal Effects
   Mobile App Optimized
   ============================================ */

/* ===== Mobile App Optimizations ===== */
/* Safe Area Insets for iPhone X and newer */
@supports (padding: max(0px)) {
    .dashboard-wrapper,
    .dashboard-sidebar,
    .dashboard-header {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    }
    
    .dashboard-sidebar {
        padding-top: max(var(--spacing-lg), env(safe-area-inset-top));
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    }
    
    .dashboard-header {
        padding-top: max(var(--spacing-md), env(safe-area-inset-top));
    }
    
    .dashboard-content {
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    }
}

/* Touch-friendly minimum sizes */
:root {
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
}

/* Prevent text selection on UI elements */
.btn,
button,
.header-action-btn,
.mobile-sidebar-toggle,
.sidebar-toggle,
.nav-link,
.nav-submenu-link {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* Smooth scrolling for mobile */
html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Prevent pull-to-refresh on mobile (optional) */
body {
    overscroll-behavior-y: contain;
}

/* Optimize font rendering on mobile */
body,
.dashboard-wrapper {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Mobile Sidebar Toggle */
@media (max-width: 1024px) {
    .dashboard-sidebar {
        transform: translateX(-100%);
    }
    
    .dashboard-sidebar.active {
        transform: translateX(0);
    }
    
    .sidebar-overlay {
        display: block;
    }
    
    .sidebar-overlay.active {
        opacity: 1;
    }
    
    .mobile-sidebar-toggle {
        display: flex;
    }
    
    .sidebar-toggle {
        display: flex;
    }
}

/* Auth Pages Responsive */
@media (max-width: 768px) {
    .auth-container {
        padding: var(--spacing-lg) var(--app-padding-sm);
        min-height: calc(100vh - 150px);
    }
    
    .auth-card {
        padding: var(--spacing-2xl) var(--spacing-lg);
        max-width: 100%;
    }
    
    .auth-title {
        font-size: var(--font-size-2xl);
    }
    
    .auth-subtitle {
        font-size: var(--font-size-base);
    }
    
    .code-input {
        font-size: var(--font-size-xl);
        letter-spacing: 0.5rem;
        padding: var(--spacing-md);
    }
    
    .form-group-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .hero-section {
        padding: var(--spacing-2xl) 0;
    }
    
    .hero-title {
        font-size: var(--font-size-2xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-lg);
    }
    
    /* Modal Responsive */
    .modal {
        padding: var(--app-padding-sm);
    }
    
    .modal-content {
        max-width: 100%;
        max-height: 95vh;
    }
    
    .auth-modal {
        max-width: 100%;
    }
    
    .auth-modal .auth-card {
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
    }
    
    .auth-modal .auth-title {
        font-size: var(--font-size-xl);
    }
    
    .auth-modal .auth-subtitle {
        font-size: var(--font-size-sm);
    }
    
    .modal-close {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        width: 36px;
        height: 36px;
        font-size: var(--font-size-xl);
    }
    
    .site-header {
        padding-left: var(--app-padding-sm);
        padding-right: var(--app-padding-sm);
    }
    
    .navbar {
        padding: var(--spacing-sm) 0;
        min-height: auto;
    }
    
    .navbar .container {
        gap: var(--spacing-sm);
    }
    
    .logo {
        font-size: var(--font-size-lg);
        min-height: auto;
    }
    
    .logo-icon {
        font-size: var(--font-size-xl);
    }
    
    /* Hide desktop menu on mobile */
    .nav-menu-desktop {
        display: none !important;
    }
    
    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1000 !important;
    }
    
    /* Compact header on mobile */
    .site-header {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .navbar {
        padding: var(--spacing-xs) 0;
        min-height: 50px;
    }
    
    .navbar .container {
        gap: var(--spacing-xs);
        align-items: center;
    }
    
    .logo {
        font-size: var(--font-size-base);
        min-height: auto;
    }
    
    .logo-text {
        display: inline-block; /* Show logo text on mobile */
        font-size: var(--font-size-sm);
    }
    
    .logo-icon {
        font-size: var(--font-size-lg);
    }
}

/* Tablet Adjustments */
@media (max-width: 768px) {
    /* Hide desktop menu on tablet and mobile */
    .nav-menu-desktop {
        display: none !important;
    }
    
    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    .site-header {
        padding-left: var(--app-padding-sm);
        padding-right: var(--app-padding-sm);
    }
    
    .navbar {
        padding: var(--spacing-xs) 0;
        min-height: 56px;
    }
    
    .logo {
        font-size: var(--font-size-base);
    }
    
    .logo-icon {
        font-size: var(--font-size-lg);
    }
    
    .mobile-menu-content {
        max-width: 380px;
    }
    
    .dashboard-header {
        padding: var(--spacing-md) var(--app-padding);
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
      
    
    .header-right { 
        justify-content: flex-end;
    }
    
    .dashboard-content {
        padding: var(--app-padding);
    }
    
    .stats-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* Small Mobile Adjustments */
@media (max-width: 480px) {
    .site-header {
        padding-left: var(--spacing-xs);
        padding-right: var(--spacing-xs);
    }
    
    .navbar {
        padding: var(--spacing-xs) 0;
        min-height: 48px;
    }
    
    .navbar .container {
        gap: var(--spacing-xs);
    }
    
    .logo {
        font-size: var(--font-size-sm);
    }
    
    .logo-icon {
        font-size: var(--font-size-base);
    }
    
    .mobile-menu-content {
        max-width: 100%;
    }
    
    .mobile-menu-header {
        padding: var(--spacing-md);
    }
    
    .mobile-menu-nav {
        padding: var(--spacing-md);
        padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
    }
    
    /* Touch-friendly form elements */
    input,
    textarea,
    select,
    button,
    .btn {
        font-size: 16px; /* Prevent iOS zoom on focus */
        min-height: var(--touch-target-comfortable);
        min-width: var(--touch-target-comfortable);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    /* Larger touch targets for mobile */
    .header-action-btn,
    .mobile-sidebar-toggle,
    .sidebar-toggle {
        min-width: var(--touch-target-comfortable);
        min-height: var(--touch-target-comfortable);
        padding: var(--spacing-sm);
    }
    
    /* Card touch optimization */
    .card {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Prevent double-tap zoom on buttons */
    button,
    .btn,
    a.btn {
        touch-action: manipulation;
        -ms-touch-action: manipulation;
    }
    
    /* Optimize cards for mobile */
    .card {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
        /* GPU acceleration */
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Prevent text selection on UI elements */
    .btn,
    button,
    .header-action-btn,
    .mobile-menu-toggle {
        -webkit-user-select: none;
        user-select: none;
    }
    
    .form-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .social-media-inputs {
        grid-template-columns: 1fr;
    }
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .dashboard-header {
        padding: var(--spacing-md);
        min-height: auto;
    }
    
    .page-title {
        font-size: var(--font-size-lg);
    }
    
    .welcome-text {
        font-size: var(--font-size-xs);
    }
    
    .card {
        padding: var(--spacing-md);
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
    }
    
    .profile-tabs-modern {
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
    }
    
    .tab-btn-modern {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
    }
    
    .logs-filter {
        flex-direction: column;
    }
    
    .logs-filter .form-control {
        width: 100%;
        min-width: auto;
    }
}

/* ===== Mobile App Specific Optimizations ===== */

/* Landscape mode optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    .dashboard-header {
        min-height: 56px;
        padding: var(--spacing-sm) var(--app-padding);
    }
    
    .page-title {
        font-size: var(--font-size-base);
    }
    
    .dashboard-content {
        padding: var(--spacing-md) var(--app-padding);
    }
}

/* Very small screens (320px and below) */
@media (max-width: 320px) {
    .dashboard-header {
        padding: var(--spacing-sm);
        min-height: 56px;
    }
    
    .page-title {
        font-size: var(--font-size-sm);
    }
    
    .header-action-btn {
        min-width: 40px;
        min-height: 40px;
        padding: var(--spacing-xs);
    }
    
    .dashboard-content {
        padding: var(--spacing-sm);
    }
}

/* Touch device specific optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    button,
    .header-action-btn,
    .mobile-sidebar-toggle,
    .sidebar-toggle {
        min-width: var(--touch-target-comfortable);
        min-height: var(--touch-target-comfortable);
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover,
    button:hover,
    .card:hover {
        transform: none;
    }
    
    /* Better tap feedback */
    .btn:active,
    button:active,
    .header-action-btn:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .dashboard-sidebar,
    .dashboard-header,
    .card {
        border-width: 0.5px;
    }
}

/* Dark mode optimizations for mobile */
@media (prefers-color-scheme: dark) {
    .sidebar-overlay {
        background: rgba(0, 0, 0, 0.7);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .dashboard-sidebar,
    .sidebar-overlay,
    .card,
    .btn {
        transition: none;
        animation: none;
    }
}