/* ===========================
   Settings Page Responsive Fixes
   =========================== */

/* Mobile Header Fix */
@media (max-width: 1024px) {
    /* Main content adjustment for mobile header */
    .main-content {
        padding-top: 60px; /* Mobile header height */
    }
    
    /* Settings container adjustments */
    .settings-container {
        padding: var(--space-md);
    }
    
    /* Fix navigation overflow */
    .settings-nav {
        margin: 0 calc(var(--space-md) * -1);
        border-radius: 0;
        padding: var(--space-md) var(--space-md);
    }
    
    /* Ensure nav scrolls horizontally */
    .settings-nav-list {
        padding-bottom: var(--space-sm);
    }
    
    /* Visual scroll indicator */
    .settings-nav {
        position: relative;
    }
    
    .settings-nav::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, transparent, white);
        pointer-events: none;
    }
}

/* Tablet Specific Fixes */
@media (min-width: 769px) and (max-width: 1024px) {
    .settings-container {
        max-width: 100%;
        padding: var(--space-lg);
    }
}

/* Mobile Specific Fixes */
@media (max-width: 768px) {
    /* Fix mobile header spacing */
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: white;
        box-shadow: var(--shadow-sm);
    }
    
    /* Adjust main content for fixed header */
    body {
        padding-top: 60px;
    }
    
    /* Fix settings content spacing */
    .settings-content {
        margin-bottom: var(--space-xl);
        border-radius: var(--radius-md);
    }
    
    /* Better touch targets for toggles */
    .toggle-switch {
        min-width: 50px;
        min-height: 30px;
    }
    
    /* Fix form elements on mobile */
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px; /* Prevent iOS zoom */
        padding: var(--space-md) var(--space-lg);
    }
    
    /* Better spacing for sections */
    .settings-section {
        padding-bottom: var(--space-lg);
        border-bottom: 1px solid var(--border-color);
    }
    
    .settings-section:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* Small Mobile Fixes */
@media (max-width: 480px) {
    /* Compact mobile header */
    .mobile-header h1 {
        font-size: 1.125rem;
    }
    
    /* Full width buttons */
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Compact form spacing */
    .form-group {
        margin-bottom: var(--space-md);
    }
    
    /* Settings nav improvements */
    .settings-nav-link {
        min-width: 120px;
        justify-content: center;
    }
    
    .settings-nav-link span {
        display: none; /* Hide text on very small screens */
    }
    
    .settings-nav-link i {
        font-size: 1.125rem;
    }
    
    /* Show active state more clearly */
    .settings-nav-link.active {
        box-shadow: inset 0 -3px 0 var(--primary-color);
        background: transparent;
        border-radius: 0;
    }
}

/* Fix sidebar visibility on desktop */
@media (min-width: 1025px) {
    .mobile-header,
    .mobile-nav,
    .mobile-backdrop {
        display: none !important;
    }
    
    /* Ensure sidebar is visible */
    .sidebar {
        display: block !important;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 250px;
        transform: translateX(0) !important;
    }
    
    /* Adjust main content for sidebar */
    .main-content {
        margin-left: 250px;
        padding-top: 0;
    }
}

/* Animation improvements */
@media (prefers-reduced-motion: reduce) {
    .toggle-switch,
    .toggle-switch::after,
    .settings-nav-link,
    .form-input,
    .form-select,
    .form-textarea {
        transition: none !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .settings-content,
    .settings-nav {
        background: #1a1a1a;
        color: #e0e0e0;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        background: #2a2a2a;
        border-color: #3a3a3a;
        color: #e0e0e0;
    }
    
    .toggle-switch {
        background: #3a3a3a;
    }
    
    .danger-zone {
        background: #2a1a1a;
        border-color: #4a2a2a;
    }
}