/**
 * Mobile Optimizations for BlogThree Theme
 * 
 * Ensures all components are fully responsive
 */

/* Mobile Navigation Improvements */
@media (max-width: 768px) {
    /* Header adjustments */
    .site-header {
        padding: 0.75rem 0;
    }
    
    /* Mobile menu */
    .mobile-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(20px);
        z-index: 9999;
        transition: left 0.3s ease;
        overflow-y: auto;
    }
    
    .mobile-menu.active {
        left: 0;
    }
    
    /* Hero section mobile */
    .hero-title {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 1.125rem !important;
    }
    
    /* Dashboard mobile layout */
    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Analytics charts mobile */
    .chart-container {
        height: 200px !important;
    }
    
    /* Mobile video player optimizations */
    .mobile-video-player {
        width: 100%;
        max-width: 100vw;
    }
    
    .mobile-video-player video {
        max-height: 50vh;
        object-fit: contain;
    }
    
    /* Touch-friendly buttons */
    .touch-manipulation {
        touch-action: manipulation;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Improved touch targets */
    button, a, [role="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 16px;
    }
    
    /* Prevent text selection on touch */
    .no-select {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Form improvements */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 44px;
        border-radius: 8px;
    }
    
    /* Carousel improvements */
    .trending-nfts-carousel .carousel-track {
        scroll-snap-type: x mandatory;
    }
    
    .trending-nfts-carousel .carousel-track > * {
        scroll-snap-align: start;
    }
    
    /* Analytics charts mobile specific */
    .analytics-charts .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .analytics-charts canvas {
        height: 200px !important;
    }
    
    /* Creator dashboard mobile */
    .creator-dashboard .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .creator-dashboard .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    /* Follow button mobile */
    .follow-button-container .hidden {
        display: none;
    }
    
    .follow-button-container .sm\\:inline {
        display: none;
    }
    
    /* Minting interface mobile */
    .minting-interface .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .minting-interface .drag-drop-area {
        min-height: 200px;
        padding: 2rem 1rem;
    }
    
    /* Navigation improvements */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(139, 92, 246, 0.2);
        padding: 0.75rem;
        z-index: 1000;
    }
    
    .mobile-nav .nav-items {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .mobile-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        color: rgba(156, 163, 175, 1);
        text-decoration: none;
        transition: all 0.2s ease;
        min-width: 44px;
        min-height: 44px;
    }
    
    .mobile-nav .nav-item.active,
    .mobile-nav .nav-item:hover {
        color: rgba(139, 92, 246, 1);
        transform: translateY(-2px);
    }
    
    .mobile-nav .nav-item i {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }
    
    .mobile-nav .nav-item span {
        font-size: 0.75rem;
        font-weight: 500;
    }
    
    /* Sticky positioning improvements */
    .sticky-mobile {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    /* Scroll improvements */
    .scroll-smooth {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Safe area padding for iPhone X+ */
    .safe-area-padding {
        padding-bottom: env(safe-area-inset-bottom);
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    /* Improved spacing */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Text improvements */
    .text-responsive {
        font-size: clamp(1rem, 4vw, 1.125rem);
        line-height: 1.5;
    }
    
    .heading-responsive {
        font-size: clamp(1.5rem, 6vw, 2rem);
        line-height: 1.3;
    }
    
    /* Image optimizations */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Homepage Stats Cards Mobile */
    .stats-card-1,
    .stats-card-2,
    .stats-card-3 {
        transform: none !important;
        margin-bottom: 1rem;
    }
    
    /* Remove hover effects on mobile */
    .stats-card-1:hover,
    .stats-card-2:hover,
    .stats-card-3:hover {
        transform: none !important;
    }
    
    /* Quick Actions Panel Mobile */
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
    
    .quick-action-button {
        padding: 1rem !important;
        min-height: 80px;
    }
    
    .quick-action-button i {
        font-size: 1.5rem !important;
    }
    
    .quick-action-button p {
        font-size: 0.75rem !important;
    }
    
    /* Revenue Dashboard Mobile */
    .revenue-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    .revenue-tabs button {
        flex-shrink: 0;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    .revenue-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    .revenue-card {
        padding: 1rem !important;
    }
    
    .revenue-card h3 {
        font-size: 0.75rem !important;
    }
    
    .revenue-card p.text-3xl {
        font-size: 1.5rem !important;
    }
    
    /* Activity Timeline Mobile */
    .activity-timeline {
        padding: 1rem !important;
    }
    
    .activity-item {
        flex-direction: row;
        gap: 0.75rem;
    }
    
    .activity-icon {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0;
    }
    
    .activity-content {
        flex: 1;
        min-width: 0;
    }
    
    .activity-content h4 {
        font-size: 0.875rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .activity-timestamp {
        font-size: 0.75rem !important;
    }
    
    /* Charts Mobile */
    .chart-container {
        height: 200px !important;
        margin-bottom: 1rem;
    }
    
    .chart-legend {
        font-size: 0.75rem !important;
    }
    
    /* Dashboard Header Mobile */
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    .creator-avatar {
        width: 48px !important;
        height: 48px !important;
    }
    
    .creator-title {
        font-size: 1.5rem !important;
    }
    
    /* Dark mode improvements */
    .dark-mode-toggle {
        position: fixed;
        bottom: 80px;
        right: 1rem;
        z-index: 1000;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(139, 92, 246, 0.9);
        border: none;
        color: white;
        font-size: 1.25rem;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
    }
    
    .dark-mode-toggle:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    }
    }
    
    /* NFT carousel mobile */
    .trending-nfts-carousel .carousel-track {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .trending-nfts-carousel .carousel-item {
        scroll-snap-align: center;
        width: 85vw;
        max-width: 320px;
    }
    
    /* Hide carousel navigation buttons on mobile */
    .trending-nfts-carousel button[disabled] {
        opacity: 0;
        pointer-events: none;
    }
    
    /* Follow button mobile */
    .follow-button-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .blogthree-follow-button {
        white-space: nowrap;
        min-width: auto;
    }
    
    /* Enhanced Creator Dashboard Sidebar Mobile */
    .creator-dashboard-sidebar {
        position: static;
        width: 100%;
        margin-top: 2rem;
    }
    
    /* Sidebar sections mobile optimization */
    .sidebar-primary-section .backdrop-blur-xl {
        padding: 1.5rem !important;
        transform: none !important;
    }
    
    .sidebar-primary-section .w-20 {
        width: 4rem !important;
        height: 4rem !important;
    }
    
    .sidebar-primary-section .text-3xl {
        font-size: 1.5rem !important;
    }
    
    .sidebar-primary-section .text-2xl {
        font-size: 1.25rem !important;
    }
    
    .sidebar-secondary-section .backdrop-blur-xl {
        padding: 1rem !important;
    }
    
    .sidebar-secondary-section .grid-cols-2 {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    
    .sidebar-secondary-section .text-2xl {
        font-size: 1.5rem !important;
    }
    
    .sidebar-tertiary-section .backdrop-blur-xl {
        padding: 1rem !important;
    }
    
    .sidebar-tertiary-section .space-y-3 > * {
        margin-bottom: 0.75rem;
    }
    
    /* Quick actions mobile */
    .sidebar-tertiary-section .p-4 {
        padding: 0.75rem !important;
    }
    
    .sidebar-tertiary-section .p-3 {
        padding: 0.5rem !important;
    }
    
    .sidebar-tertiary-section .w-10 {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    .sidebar-tertiary-section .w-8 {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    
    /* Sidebar button improvements */
    .sidebar-btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Remove complex animations on mobile for performance */
    .sidebar-primary-section .animate-float-gentle,
    .sidebar-primary-section .animate-glow {
        animation: none !important;
    }
    
    /* Wallet address display mobile */
    #wallet-address {
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
    }
    
    /* Modal improvements */
    .modal-content {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
    
    /* Form elements */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px; /* Apple's recommended touch target */
    }
    
    /* Buttons and touch targets */
    button,
    .button,
    a.button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* NFT cards mobile */
    .nft-card {
        margin-bottom: 1rem;
    }
    
    .nft-card .action-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .nft-card .action-buttons button {
        width: 100%;
    }
    
    /* Table responsive */
    .responsive-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Pagination mobile */
    .blogthree-pagination {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .page-numbers {
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    /* Very small screen adjustments */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Stats cards */
    .stat-card {
        padding: 1rem;
    }
    
    .stat-card .stat-value {
        font-size: 1.5rem;
    }
    
    /* Typography adjustments */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    /* Grid adjustments */
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    /* Modal full screen on small devices */
    .modal-content {
        margin: 0;
        border-radius: 0;
        height: 100vh;
        max-height: 100vh;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .hover\:scale-105:hover {
        transform: none;
    }
    
    /* Add active states instead */
    button:active,
    a:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
    
    /* Larger tap targets */
    .clickable {
        position: relative;
    }
    
    .clickable::after {
        content: '';
        position: absolute;
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
    }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .hero-section {
        min-height: auto;
        padding: 2rem 0;
    }
    
    .modal-content {
        max-height: 90vh;
    }
}

/* Performance optimizations */
@media (max-width: 768px) {
    /* Disable complex animations on mobile */
    .animate-float-slow,
    .animate-float-medium,
    .animate-float-fast {
        animation: none;
    }
    
    /* Simplify shadows */
    .shadow-glow {
        box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
    }
    
    /* Reduce backdrop blur on older devices */
    @supports not (backdrop-filter: blur(20px)) {
        .backdrop-blur-xl {
            background-color: rgba(15, 23, 42, 0.95);
            backdrop-filter: none;
        }
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Focus indicators */
    :focus {
        outline: 3px solid rgba(139, 92, 246, 0.5);
        outline-offset: 2px;
    }
    
    /* Skip links */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--color-primary);
        color: white;
        padding: 8px;
        text-decoration: none;
        z-index: 100;
    }
    
    .skip-link:focus {
        top: 0;
    }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS rubber band scrolling */
    body {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }
    
    #page {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: 100vh;
    }
    
    /* Fix for iOS form zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Android-specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    /* Fix for Android keyboard pushing layout */
    .fixed-bottom {
        position: absolute;
    }
    
    /* Sidebar optimizations for Android */
    .sidebar-primary-section .transform {
        transform: none !important;
    }
    
    .backdrop-blur-xl {
        backdrop-filter: blur(4px) !important;
    }
}

/* Enhanced Sidebar Styling */
@media (max-width: 768px) {
    /* Sidebar spacing adjustments */
    .space-y-8 > * + * {
        margin-top: 1.5rem !important;
    }
    
    /* Glassmorphism adjustments for mobile */
    .bg-glass-dark {
        background: rgba(15, 23, 42, 0.95) !important;
        backdrop-filter: blur(8px) !important;
    }
    
    .bg-glass-morphism {
        background: rgba(30, 41, 59, 0.8) !important;
        backdrop-filter: blur(6px) !important;
    }
    
    /* Reduced glow effects for performance */
    .shadow-neon-electric {
        box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15) !important;
    }
    
    .shadow-neon-glow {
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2) !important;
    }
    
    .shadow-electric-glow {
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2) !important;
    }
}

/* Submit Content Page Mobile Styles */
@media (max-width: 768px) {
    /* Submit content page specific */
    .submit-content-header h1 {
        font-size: 2.5rem !important;
    }
    
    .submit-content-header p {
        font-size: 1rem !important;
    }
    
    /* Form sections mobile */
    .submit-content form > div {
        padding: 1.5rem !important;
    }
    
    /* Title input mobile */
    #post-title {
        font-size: 1.5rem !important;
    }
    
    /* Featured image upload mobile */
    #image-upload-area {
        padding: 2rem 1rem !important;
    }
    
    #image-upload-area .w-20 {
        width: 3rem !important;
        height: 3rem !important;
    }
    
    /* Editor toolbar mobile */
    .editor-toolbar {
        padding: 0.75rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .editor-toolbar button {
        padding: 0.5rem !important;
        min-width: 36px;
        min-height: 36px;
    }
    
    /* Editor content mobile */
    .editor-content {
        padding: 1rem !important;
        min-height: 200px !important;
        font-size: 1rem;
    }
    
    /* Categories and tags mobile */
    .submit-content .grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    /* Post settings mobile */
    .submit-content label {
        padding: 0.75rem !important;
    }
    
    .submit-content label span {
        font-size: 0.875rem !important;
    }
    
    .submit-content label p {
        font-size: 0.75rem !important;
    }
    
    /* Submit actions mobile */
    .submit-content .flex.flex-col.sm\\:flex-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .submit-content .flex.items-center.space-x-4 {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    #publish-post {
        width: 100% !important;
        justify-content: center;
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
    }
    
    /* Media modal mobile */
    #media-modal .max-w-2xl {
        max-width: calc(100% - 2rem) !important;
        margin: 1rem;
    }
    
    #media-modal #media-upload-area {
        padding: 2rem 1rem !important;
    }
    
    /* Progress bars mobile */
    .submit-content .h-1.flex-1 {
        margin: 0 0.5rem;
    }
    
    /* Background animations - reduce on mobile */
    .submit-content .animate-float-slow,
    .submit-content .animate-float-medium,
    .submit-content .animate-float-gentle {
        animation-duration: 8s;
        animation-timing-function: ease-in-out;
    }
    
    /* Particle animations - smaller on mobile */
    .submit-content .animate-particle-float {
        width: 1px !important;
        height: 1px !important;
    }
    
    /* Reduce blur effects on mobile for performance */
    .submit-content .backdrop-blur-xl {
        backdrop-filter: blur(8px);
    }
    
    .submit-content .blur-3xl {
        filter: blur(20px);
    }
    
    .submit-content .blur-2xl {
        filter: blur(12px);
    }
}

/* Additional Sidebar Mobile Styles */
@media (max-width: 480px) {
    /* Very small screens - further simplification */
    .sidebar-primary-section .grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .sidebar-secondary-section .grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .sidebar-tertiary-section .grid-cols-1 {
        gap: 0.5rem;
    }
    
    /* Compact text on very small screens */
    .sidebar-primary-section .text-xl {
        font-size: 1rem !important;
    }
    
    .sidebar-secondary-section .text-lg {
        font-size: 1rem !important;
    }
    
    /* Simplified borders for performance */
    .border-electric-500\/40 {
        border-color: rgba(16, 185, 129, 0.3) !important;
    }
    
    .border-neon-500\/30 {
        border-color: rgba(139, 92, 246, 0.25) !important;
    }
    
    .border-accent-500\/30 {
        border-color: rgba(236, 72, 153, 0.25) !important;
    }
}

/* Print styles for mobile */
@media print {
    /* Hide unnecessary elements */
    .site-header,
    .site-footer,
    .mobile-menu-toggle,
    .follow-button-container,
    .modal {
        display: none !important;
    }
    
    /* Reset colors for printing */
    body {
        background: white;
        color: black;
    }
    
    /* Ensure content fits on page */
    .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }
}