/**
 * Mobile Responsive Styles for MoodMash
 * Version: 10.2 - Mobile Optimization
 * 
 * Provides responsive design for all dashboards and components
 */

/* =============================================================================
   GLOBAL MOBILE OPTIMIZATIONS
   ============================================================================= */

/* Base mobile styles */
@media (max-width: 768px) {
    /* Reduce padding on mobile */
    #app {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 1rem !important;
        padding-bottom: 5rem !important; /* Space for bottom nav */
    }

    /* Full width containers on mobile */
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl {
        max-width: 100% !important;
    }

    /* Responsive grid adjustments */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .md\:grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .lg\:grid-cols-2,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    /* Reduce gaps on mobile */
    .gap-6 {
        gap: 1rem !important;
    }

    .gap-8 {
        gap: 1.5rem !important;
    }

    /* Typography adjustments */
    h1 {
        font-size: 1.875rem !important; /* 30px */
    }

    h2 {
        font-size: 1.5rem !important; /* 24px */
    }

    h3 {
        font-size: 1.25rem !important; /* 20px */
    }

    /* Card adjustments */
    .bg-white,
    .bg-gray-50,
    .bg-gradient-to-br {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Button adjustments */
    button,
    .btn {
        min-height: 44px !important; /* Apple's recommended touch target */
        padding: 0.75rem 1.5rem !important;
    }

    /* Input adjustments */
    input,
    select,
    textarea {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }

    /* Chart responsiveness */
    canvas {
        max-height: 300px !important;
    }

    /* Table responsiveness */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Modal adjustments */
    .modal-content {
        width: calc(100% - 2rem) !important;
        margin: 1rem !important;
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }
}

/* =============================================================================
   TOUCH-FRIENDLY ELEMENTS
   ============================================================================= */

/* Larger touch targets */
@media (max-width: 768px) {
    a,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="checkbox"],
    input[type="radio"],
    select,
    .clickable {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.5rem !important;
    }

    /* Checkbox and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
    }

    /* Icon buttons */
    .icon-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* =============================================================================
   NAVIGATION ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
    /* Hide desktop navigation */
    nav:not(#mobile-bottom-nav) {
        display: none !important;
    }

    /* Header adjustments */
    header {
        padding: 0.75rem 1rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
        background: white !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    /* Hamburger menu */
    .menu-toggle {
        display: block !important;
    }

    /* Mobile menu */
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: white !important;
        z-index: 9999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
    }

    .mobile-menu.open {
        transform: translateX(0) !important;
    }
}

/* =============================================================================
   DASHBOARD-SPECIFIC MOBILE STYLES
   ============================================================================= */

/* Stats Cards */
@media (max-width: 768px) {
    .stats-card {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 1rem !important;
    }

    .stats-card .icon {
        font-size: 2rem !important;
        margin-bottom: 0 !important;
        margin-right: 1rem !important;
    }

    .stats-card .content {
        text-align: left !important;
    }

    .stats-card .value {
        font-size: 1.5rem !important;
    }

    .stats-card .label {
        font-size: 0.875rem !important;
    }
}

/* Mood Entry Cards */
@media (max-width: 768px) {
    .mood-card {
        padding: 1rem !important;
    }

    .mood-card .emoji {
        font-size: 2rem !important;
    }

    .mood-card .mood-name {
        font-size: 1rem !important;
    }

    .mood-card .mood-note {
        font-size: 0.875rem !important;
        max-height: 60px !important;
        overflow: hidden !important;
    }
}

/* Charts */
@media (max-width: 768px) {
    .chart-container {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .chart-container canvas {
        max-height: 250px !important;
    }

    /* Hide chart legends on very small screens */
    @media (max-width: 375px) {
        .chart-container canvas {
            max-height: 200px !important;
        }
    }
}

/* =============================================================================
   FORM OPTIMIZATIONS
   ============================================================================= */

@media (max-width: 768px) {
    /* Form groups */
    .form-group {
        margin-bottom: 1rem !important;
    }

    /* Form labels */
    label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }

    /* Form inputs */
    input,
    select,
    textarea {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        border-radius: 0.5rem !important;
    }

    /* Date and time inputs */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        font-size: 16px !important; /* Prevent iOS zoom */
    }

    /* Textarea */
    textarea {
        min-height: 100px !important;
        resize: vertical !important;
    }

    /* Form buttons */
    .form-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .form-buttons button {
        width: 100% !important;
    }
}

/* =============================================================================
   CARD LAYOUT OPTIMIZATIONS
   ============================================================================= */

@media (max-width: 768px) {
    /* Feature cards */
    .feature-card {
        padding: 1rem !important;
        text-align: center !important;
    }

    .feature-card .icon {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .feature-card .title {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
    }

    .feature-card .description {
        font-size: 0.875rem !important;
    }

    /* Activity cards */
    .activity-card {
        padding: 1rem !important;
    }

    .activity-card img {
        width: 100% !important;
        height: auto !important;
        max-height: 200px !important;
        object-fit: cover !important;
    }
}

/* =============================================================================
   LIST OPTIMIZATIONS
   ============================================================================= */

@media (max-width: 768px) {
    /* List items */
    .list-item {
        padding: 1rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .list-item .avatar {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 0.5rem !important;
    }

    .list-item .content {
        width: 100% !important;
    }

    .list-item .actions {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin-top: 0.5rem !important;
    }
}

/* =============================================================================
   MODAL OPTIMIZATIONS
   ============================================================================= */

@media (max-width: 768px) {
    /* Modal container */
    .modal {
        padding: 0 !important;
    }

    .modal-overlay {
        background: rgba(0, 0, 0, 0.75) !important;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-header {
        padding: 1rem !important;
        position: sticky !important;
        top: 0 !important;
        background: white !important;
        z-index: 10 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    .modal-body {
        padding: 1rem !important;
    }

    .modal-footer {
        padding: 1rem !important;
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        border-top: 1px solid #e5e7eb !important;
    }
}

/* =============================================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================================= */

/* Focus styles for keyboard navigation */
@media (max-width: 768px) {
    *:focus {
        outline: 2px solid #6366f1 !important;
        outline-offset: 2px !important;
    }

    /* Skip to content link */
    .skip-to-content {
        position: absolute !important;
        top: -40px !important;
        left: 0 !important;
        background: #6366f1 !important;
        color: white !important;
        padding: 8px !important;
        z-index: 100 !important;
    }

    .skip-to-content:focus {
        top: 0 !important;
    }
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================= */

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

/* Hardware acceleration */
@media (max-width: 768px) {
    .animated,
    .transition {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        will-change: transform !important;
    }
}

/* Reduce animations on slow devices */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   LANDSCAPE MODE OPTIMIZATIONS
   ============================================================================= */

@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical padding in landscape */
    #app {
        padding-top: 0.5rem !important;
        padding-bottom: 4rem !important;
    }

    /* Adjust modal height */
    .modal-content {
        max-height: 90vh !important;
    }

    /* Adjust chart height */
    canvas {
        max-height: 200px !important;
    }
}

/* =============================================================================
   SMALL SCREEN OPTIMIZATIONS (< 375px)
   ============================================================================= */

@media (max-width: 375px) {
    /* Further reduce padding */
    #app {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Smaller typography */
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.125rem !important;
    }

    /* Smaller buttons */
    button,
    .btn {
        font-size: 0.875rem !important;
        padding: 0.625rem 1rem !important;
    }

    /* Smaller cards */
    .bg-white,
    .bg-gray-50 {
        padding: 0.75rem !important;
    }
}

/* =============================================================================
   DARK MODE OPTIMIZATIONS
   ============================================================================= */

@media (max-width: 768px) and (prefers-color-scheme: dark) {
    /* Ensure readability in dark mode */
    #app {
        background: #111827 !important;
    }

    .bg-white {
        background: #1f2937 !important;
        color: #f9fafb !important;
    }

    input,
    select,
    textarea {
        background: #374151 !important;
        color: #f9fafb !important;
        border-color: #4b5563 !important;
    }

    .modal-content {
        background: #1f2937 !important;
        color: #f9fafb !important;
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    /* Hide navigation and bottom nav */
    nav,
    #mobile-bottom-nav,
    .bottom-nav,
    button,
    .btn {
        display: none !important;
    }

    /* Full width for print */
    #app {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Remove backgrounds */
    body,
    #app {
        background: white !important;
    }

    /* Ensure charts are visible */
    canvas {
        max-height: none !important;
    }
}