/**
 * Responsive CSS - Mobile-First Responsive Design
 * Postsabuy Creator - TikTok Content Creation Platform
 */

/* ========================================
   Mobile First Base Styles (0-767px)
   ======================================== */

/* Already optimized for mobile in base styles */

/* ========================================
   Tablet (768px and up)
   ======================================== */
@media (min-width: 768px) {

    /* Container adjustments */
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    /* Grid adjustments */
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Flexbox */
    .md\:flex-row {
        flex-direction: row;
    }

    /* Typography */
    h1 {
        font-size: var(--font-size-5xl);
    }

    h2 {
        font-size: var(--font-size-4xl);
    }

    h3 {
        font-size: var(--font-size-3xl);
    }

    /* Hero section */
    .hero-section {
        padding: 120px 0;
    }

    .hero-title {
        font-size: 4rem;
    }

    .hero-subtitle {
        font-size: 1.6rem;
    }
}

/* ========================================
   Desktop (992px and up)
   ======================================== */
@media (min-width: 992px) {

    /* Container */
    .container {
        max-width: 960px;
    }

    /* Grid */
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Sidebar layout */
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

/* ========================================
   Large Desktop (1200px and up)
   ======================================== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   Extra Large (1400px and up)
   ======================================== */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ========================================
   Mobile Specific Styles (max-width: 767px)
   ======================================== */
@media (max-width: 767px) {

    /* Typography scaling */
    html {
        font-size: 14px;
    }
    
    /* Mobile Navigation Improvements */
    .mobile-menu-panel {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure touch targets are at least 44px */
    .mobile-menu-link {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Prevent horizontal scroll on mobile */
    body {
        overflow-x: hidden;
    }
    
    /* Fix for iOS Safari viewport height */
    .mobile-full-height {
        min-height: -webkit-fill-available;
    }

    h1 {
        font-size: var(--font-size-3xl);
    }

    h2 {
        font-size: var(--font-size-2xl);
    }

    h3 {
        font-size: var(--font-size-xl);
    }

    /* Hero section */
    .hero-section {
        padding: 60px 0;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
    }

    .btn-lg {
        padding: var(--space-4) var(--space-5);
    }

    /* Cards */
    .card {
        padding: var(--space-4);
    }

    .card-title {
        font-size: var(--font-size-lg);
    }

    /* Stats cards - stack vertically */
    .stats-card {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .stats-card-icon {
        margin-bottom: var(--space-2);
    }

    /* Navbar mobile */
    .navbar-nav {
        flex-direction: column;
        gap: var(--space-2);
        width: 100%;
    }

    /* Forms */
    .form-group {
        margin-bottom: var(--space-4);
    }

    /* Grid - force single column */
    .grid {
        grid-template-columns: 1fr !important;
    }

    /* Tabs - scrollable */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab {
        white-space: nowrap;
    }

    /* Notification - full width on mobile */
    .notification {
        left: var(--space-2);
        right: var(--space-2);
        min-width: auto;
    }

    /* Feature cards - better spacing */
    .feature-card {
        padding: var(--space-5);
    }

    .feature-icon {
        font-size: var(--font-size-4xl);
    }
}

/* ========================================
   Tablet Portrait (768px - 991px)
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px;
    }

    /* Hero adjustments */
    .hero-title {
        font-size: 3.5rem;
    }

    .hero-subtitle {
        font-size: 1.4rem;
    }
}

/* ========================================
   Landscape Phone (576px and up)
   ======================================== */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }

    /* Semi-responsive grid */
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {

    /* Hide unnecessary elements */
    .navbar,
    .btn,
    .sidebar,
    .floating-notes,
    .notification {
        display: none !important;
    }

    /* Optimize for print */
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }

    a {
        text-decoration: underline;
        color: #000;
    }
}

/* ========================================
   Touch Device Optimizations
   ======================================== */
@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .btn,
    .nav-link,
    .tab {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .card:hover,
    .btn:hover,
    .feature-card:hover {
        transform: none;
    }

    /* Tap highlight */
    * {
        -webkit-tap-highlight-color: rgba(0, 242, 234, 0.2);
    }
}

/* ========================================
   Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   Dark Mode Support (Future Enhancement)
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* Can be implemented later if needed */
    /* :root {
        --color-background: #1a1a1a;
        --color-text: #ffffff;
    } */
}

/* ========================================
   High DPI Screens
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Optimize for retina displays */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ========================================
   Orientation Specific
   ======================================== */
@media (orientation: landscape) and (max-height: 500px) {

    /* Compact vertical spacing for landscape mobile */
    .hero-section {
        padding: 40px 0;
    }

    .card {
        padding: var(--space-3);
    }
}

/* ========================================
   Utilities for Responsive Display
   ======================================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 992px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .show-mobile-only {
        display: none !important;
    }
}