/**
 * Full Measures - Premium Mobile Enhancement System
 * Best-in-class mobile experience for all browsers
 * 
 * @ai_prompt Mobile-first premium UX patterns with smooth animations,
 *            proper touch targets, and accessibility optimizations
 * @context_boundary Mobile styles that layer on top of app.css
 * 
 * AI-GENERATED 2026-01-17
 * HUMAN-VALIDATED pending
 */

/* ========================================
   MOBILE VIEWPORT & SAFE AREAS
   Universal mobile browser support
   ======================================== */

/* iOS Safari notch and home indicator support */
@supports (padding: max(0px)) {
    .page-wrapper {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .mobile-nav {
        padding-bottom: max(var(--spacing-2), env(safe-area-inset-bottom));
    }
    
    .bottom-sheet {
        padding-bottom: max(var(--spacing-6), calc(var(--spacing-6) + env(safe-area-inset-bottom)));
    }
}

/* Prevent overscroll bounce on iOS */
html {
    overscroll-behavior: none;
}

body {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   PREMIUM TOUCH INTERACTIONS
   44px minimum touch targets (Apple HIG)
   ======================================== */

@media (max-width: 767px) {
    /* Ensure all interactive elements meet touch target requirements */
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"],
    .mobile-nav-item,
    .action-card,
    .card-interactive,
    .list-item,
    .tab {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Form inputs optimized for thumb typing */
    .form-input,
    .form-textarea,
    .form-select,
    .input-soft,
    .textarea-soft {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
    }
    
    /* Larger checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"],
    .form-check-input {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
    
    /* Touch-friendly select dropdowns */
    .form-select {
        background-size: 20px;
        padding-right: var(--spacing-10);
    }
}

/* ========================================
   PREMIUM MOBILE TYPOGRAPHY
   Optimized readability on small screens
   ======================================== */

@media (max-width: 767px) {
    html {
        font-size: 15px; /* Slightly smaller base for mobile */
    }
    
    /* Tighter line heights for mobile headers */
    h1 {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
        line-height: 1.15;
        letter-spacing: -0.02em;
    }
    
    h2 {
        font-size: clamp(1.5rem, 5.5vw, 1.875rem);
        line-height: 1.2;
    }
    
    h3 {
        font-size: clamp(1.25rem, 4.5vw, 1.5rem);
        line-height: 1.25;
    }
    
    /* Body text optimized for mobile reading */
    p, .text-secondary {
        font-size: 0.9375rem;
        line-height: 1.65;
    }
    
    /* Hero sections scale down gracefully */
    .hero-title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        padding-right: var(--spacing-2);
    }
    
    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* Eyebrow text adjustments */
    .hero-eyebrow,
    .eyebrow,
    .section-eyebrow {
        font-size: 0.6875rem;
        letter-spacing: 0.15em;
    }
}

/* ========================================
   ENHANCED MOBILE CARDS
   Premium card interactions with depth
   ======================================== */

@media (max-width: 767px) {
    .card {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
        /* Subtle inner glow for depth */
        box-shadow: 
            var(--shadow-sm),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    
    .card-interactive {
        transition: 
            transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 200ms ease;
    }
    
    .card-interactive:active {
        transform: scale(0.98);
        box-shadow: var(--shadow-xs);
    }
    
    /* Action cards with premium feel */
    .action-card {
        padding: var(--spacing-4);
        gap: var(--spacing-3);
        border-radius: var(--radius-lg);
        /* Remove hover transform on mobile - use active instead */
        transform: none;
    }
    
    .action-card:active {
        transform: scale(0.98);
        background: var(--bg-secondary);
    }
    
    .action-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
    
    .action-icon {
        width: 44px;
        height: 44px;
        font-size: var(--text-lg);
        border-radius: var(--radius);
    }
    
    .action-title {
        font-size: 0.9375rem;
        font-weight: var(--font-semibold);
    }
    
    .action-desc {
        font-size: 0.8125rem;
        line-height: 1.4;
    }
}

/* ========================================
   MOBILE STAT CARDS
   Dashboard statistics optimized
   ======================================== */

@media (max-width: 767px) {
    .stat-card {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
    }
    
    .stat-value {
        font-size: clamp(1.75rem, 10vw, 2.5rem);
        font-weight: var(--font-black);
        line-height: 1;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .stat-label {
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: var(--spacing-2);
    }
    
    /* 2x2 grid for stats on small screens */
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }
}

/* ========================================
   MOBILE HERO SECTIONS
   Full-width immersive heroes
   ======================================== */

@media (max-width: 767px) {
    .hero-section {
        margin-left: calc(-1 * var(--spacing-4));
        margin-right: calc(-1 * var(--spacing-4));
        padding: var(--spacing-6) var(--spacing-4);
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
        margin-bottom: var(--spacing-6);
    }
    
    /* Container hero fix */
    .container .hero-section {
        width: calc(100% + var(--spacing-8));
        margin-left: calc(-1 * var(--spacing-4));
    }
    
    .hero-ctas,
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-ctas .btn,
    .hero-actions .btn,
    .hero-ctas a,
    .hero-actions a {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   MOBILE NAVIGATION ENHANCEMENTS
   Premium bottom navigation bar
   ======================================== */

@media (max-width: 767px) {
    .mobile-nav {
        background: rgba(17, 19, 34, 0.95);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid rgba(248, 243, 235, 0.08);
        padding: var(--spacing-2) var(--spacing-3);
        gap: var(--spacing-1);
    }
    
    [data-theme="light"] .mobile-nav {
        background: rgba(255, 255, 255, 0.95);
        border-top-color: rgba(0, 0, 0, 0.08);
    }
    
    .mobile-nav-item {
        flex: 1;
        min-width: 56px;
        max-width: 80px;
        padding: var(--spacing-2) var(--spacing-1);
        border-radius: var(--radius-lg);
        transition: all 200ms ease;
    }
    
    .mobile-nav-item.active {
        background: rgba(139, 184, 162, 0.15);
    }
    
    .mobile-nav-item.active .mobile-nav-icon {
        transform: scale(1.1);
        color: var(--primary);
    }
    
    .mobile-nav-item:active {
        transform: scale(0.95);
    }
    
    .mobile-nav-icon {
        font-size: 1.25rem;
        transition: transform 200ms ease, color 200ms ease;
    }
    
    .mobile-nav-label {
        font-size: 0.625rem;
        font-weight: var(--font-medium);
        margin-top: 2px;
        opacity: 0.85;
    }
    
    .mobile-nav-item.active .mobile-nav-label {
        opacity: 1;
        font-weight: var(--font-semibold);
    }
}

/* ========================================
   MOBILE HEADER ENHANCEMENTS
   Sticky header with premium blur
   ======================================== */

@media (max-width: 767px) {
    .mobile-header {
        background: rgba(17, 19, 34, 0.92);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        padding: var(--spacing-3) var(--spacing-4);
        min-height: 56px;
        border-bottom: 1px solid rgba(248, 243, 235, 0.08);
    }
    
    [data-theme="light"] .mobile-header {
        background: rgba(255, 255, 255, 0.92);
        border-bottom-color: rgba(0, 0, 0, 0.08);
    }
    
    .mobile-header-title {
        font-size: 1.125rem;
        font-weight: var(--font-bold);
        letter-spacing: -0.01em;
    }
    
    .mobile-header-btn {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 150ms ease;
    }
    
    .mobile-header-btn:active {
        transform: scale(0.92);
        background: var(--bg-tertiary);
    }
}

/* ========================================
   MOBILE BUTTONS
   Premium button styles with haptic feel
   ======================================== */

@media (max-width: 767px) {
    .btn {
        padding: var(--spacing-3) var(--spacing-5);
        font-size: 0.9375rem;
        border-radius: var(--radius-lg);
        transition: 
            transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 150ms ease,
            background 150ms ease;
    }
    
    .btn:active:not(:disabled) {
        transform: scale(0.97);
    }
    
    .btn-primary:active:not(:disabled) {
        box-shadow: var(--shadow-xs);
    }
    
    .btn-lg {
        padding: var(--spacing-4) var(--spacing-6);
        font-size: 1rem;
        min-height: 52px;
    }
    
    .btn-sm {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: 0.8125rem;
        min-height: 40px;
    }
    
    .btn-block {
        width: 100%;
        justify-content: center;
    }
    
    /* Floating action buttons */
    .crisis-button,
    .quick-add-fab,
    .fab {
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.2);
        transition: 
            transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 200ms ease;
    }
    
    .crisis-button:active,
    .quick-add-fab:active,
    .fab:active {
        transform: scale(0.92);
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.25),
            0 1px 4px rgba(0, 0, 0, 0.15);
    }
}

/* ========================================
   MOBILE FORMS
   Touch-optimized form elements
   ======================================== */

@media (max-width: 767px) {
    .form-group {
        margin-bottom: var(--spacing-5);
    }
    
    .form-label {
        font-size: 0.875rem;
        font-weight: var(--font-semibold);
        margin-bottom: var(--spacing-2);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }
    
    /* Stacked form layout on mobile */
    .form-row,
    .form-grid {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    /* Focus states with visible ring */
    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus,
    .input-soft:focus,
    .textarea-soft:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 
            0 0 0 3px rgba(139, 184, 162, 0.2),
            var(--shadow-sm);
    }
    
    /* Textarea with better mobile UX */
    .form-textarea,
    .textarea-soft {
        min-height: 100px;
        resize: vertical;
    }
    
    /* Toggle switches optimized for mobile */
    .toggle-switch {
        padding: 4px;
        gap: 4px;
    }
    
    .toggle-option span {
        min-width: 70px;
        min-height: 48px;
        padding: var(--spacing-3) var(--spacing-4);
        font-size: 0.875rem;
    }
    
    /* Form check items with proper spacing */
    .form-check {
        padding: var(--spacing-3) 0;
        gap: var(--spacing-3);
    }
}

/* ========================================
   MOBILE MODALS & BOTTOM SHEETS
   Native-feeling overlays
   ======================================== */

@media (max-width: 767px) {
    /* Bottom sheet style modals on mobile */
    .modal {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-width: 100%;
        width: 100%;
        max-height: 90vh;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        transform: translateY(100%);
        transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    
    .modal.active {
        transform: translateY(0);
    }
    
    .modal-header {
        padding: var(--spacing-4) var(--spacing-5);
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 1;
        border-bottom: 1px solid var(--border);
    }
    
    .modal-header::before {
        content: '';
        position: absolute;
        top: var(--spacing-2);
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--border);
        border-radius: var(--radius-full);
    }
    
    .modal-title {
        font-size: 1.125rem;
        padding-top: var(--spacing-3);
    }
    
    .modal-body {
        padding: var(--spacing-5);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-footer {
        padding: var(--spacing-4) var(--spacing-5);
        padding-bottom: max(var(--spacing-4), env(safe-area-inset-bottom));
        position: sticky;
        bottom: 0;
        background: var(--bg-primary);
        border-top: 1px solid var(--border);
    }
    
    /* Bottom sheet enhancements */
    .bottom-sheet {
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        max-height: 85vh;
        padding: var(--spacing-5);
    }
    
    .bottom-sheet-handle {
        width: 36px;
        height: 4px;
        margin: 0 auto var(--spacing-4);
    }
    
    /* Backdrop with proper blur */
    .modal-backdrop,
    .bottom-sheet-backdrop {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        background: rgba(5, 8, 20, 0.6);
    }
}

/* ========================================
   MOBILE ALERTS
   Dismissible alert enhancements
   ======================================== */

@media (max-width: 767px) {
    .alert {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
        gap: var(--spacing-3);
        margin-bottom: var(--spacing-4);
    }
    
    .alert-icon {
        font-size: 1.25rem;
        flex-shrink: 0;
    }
    
    .alert-title {
        font-size: 0.9375rem;
        font-weight: var(--font-semibold);
    }
    
    .alert-content {
        font-size: 0.875rem;
    }
}

/* ========================================
   MOBILE BADGES
   Compact badge styling
   ======================================== */

@media (max-width: 767px) {
    .badge {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: 0.625rem;
        letter-spacing: 0.05em;
    }
    
    .keytag {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: 0.75rem;
    }
}

/* ========================================
   MOBILE GRIDS & LAYOUTS
   Responsive grid adjustments
   ======================================== */

@media (max-width: 767px) {
    .container {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
    
    /* Consistent section spacing */
    section,
    .section {
        margin-bottom: var(--spacing-6);
    }
    
    /* Single column layouts */
    .grid.md\:grid-cols-2,
    .grid.md\:grid-cols-3,
    .grid.md\:grid-cols-4 {
        grid-template-columns: 1fr;
    }
    
    /* 2-column for small items */
    .grid.grid-cols-2.grid-cols-2-mobile {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }
    
    /* Quick actions rail */
    .quick-actions-rail {
        padding: var(--spacing-3);
        gap: var(--spacing-2);
        margin: 0 calc(-1 * var(--spacing-4)) var(--spacing-4);
        border-radius: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    
    .quick-action-pill {
        flex: 0 0 auto;
        min-width: 200px;
        scroll-snap-align: start;
    }
}

/* ========================================
   MOBILE SCROLLING & OVERFLOW
   Smooth scroll containers
   ======================================== */

@media (max-width: 767px) {
    /* Horizontal scroll containers */
    .swipeable-container,
    .scroll-x,
    .tabs,
    .prompt-track {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: var(--spacing-3);
        padding-bottom: var(--spacing-2);
        margin-bottom: calc(-1 * var(--spacing-2));
    }
    
    /* Hide scrollbars but keep functionality */
    .swipeable-container::-webkit-scrollbar,
    .scroll-x::-webkit-scrollbar,
    .tabs::-webkit-scrollbar,
    .prompt-track::-webkit-scrollbar {
        display: none;
    }
    
    .swipeable-container,
    .scroll-x,
    .tabs,
    .prompt-track {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Scroll snap items */
    .swipeable-card,
    .scroll-item {
        flex: 0 0 85%;
        scroll-snap-align: center;
    }
    
    .tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }
}

/* ========================================
   MOBILE ANIMATIONS
   Performance-optimized animations
   ======================================== */

@media (max-width: 767px) {
    /* Reduce motion for those who prefer it */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* GPU-accelerated animations */
    .animate-fade-in {
        animation: mobileFadeIn 300ms ease-out forwards;
    }
    
    .animate-slide-up {
        animation: mobileSlideUp 350ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }
    
    @keyframes mobileFadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    @keyframes mobileSlideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Staggered animation delays */
    .stagger-1 { animation-delay: 50ms; }
    .stagger-2 { animation-delay: 100ms; }
    .stagger-3 { animation-delay: 150ms; }
    .stagger-4 { animation-delay: 200ms; }
    .stagger-5 { animation-delay: 250ms; }
}

/* ========================================
   MOBILE LOADING STATES
   Premium skeleton loaders
   ======================================== */

@media (max-width: 767px) {
    .skeleton {
        background: linear-gradient(
            90deg,
            var(--bg-secondary) 0%,
            var(--bg-tertiary) 50%,
            var(--bg-secondary) 100%
        );
        background-size: 200% 100%;
        animation: shimmer 1.5s ease-in-out infinite;
        border-radius: var(--radius);
    }
    
    @keyframes shimmer {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }
    
    .skeleton-card {
        height: 120px;
        border-radius: var(--radius-lg);
    }
    
    .skeleton-text {
        height: 1rem;
        border-radius: var(--radius-sm);
    }
    
    .skeleton-title {
        height: 1.5rem;
        width: 70%;
        border-radius: var(--radius-sm);
    }
}

/* ========================================
   MOBILE EMPTY STATES
   Friendly empty state displays
   ======================================== */

@media (max-width: 767px) {
    .empty-state {
        padding: var(--spacing-10) var(--spacing-6);
        text-align: center;
    }
    
    .empty-state-icon {
        font-size: 3rem;
        margin-bottom: var(--spacing-4);
        opacity: 0.5;
    }
    
    .empty-state-title {
        font-size: 1.25rem;
        margin-bottom: var(--spacing-2);
    }
    
    .empty-state-description {
        font-size: 0.9375rem;
        color: var(--text-secondary);
        margin-bottom: var(--spacing-6);
    }
}

/* ========================================
   MOBILE PROGRESS INDICATORS
   Clean progress bars and dots
   ======================================== */

@media (max-width: 767px) {
    .progress-bar {
        height: 6px;
        border-radius: var(--radius-full);
    }
    
    .progress-fill {
        border-radius: var(--radius-full);
    }
    
    /* Progress dots - inherits from unified styles in app.css */
}

/* ========================================
   MOBILE TIMELINE
   Compact timeline display
   ======================================== */

@media (max-width: 767px) {
    .timeline {
        padding-left: var(--spacing-6);
    }
    
    .timeline::before {
        left: 4px;
    }
    
    .timeline-item::before {
        left: calc(-1 * var(--spacing-6));
        width: 8px;
        height: 8px;
    }
    
    .timeline-date {
        font-size: 0.6875rem;
    }
    
    .timeline-title {
        font-size: 0.9375rem;
    }
    
    .timeline-description {
        font-size: 0.8125rem;
    }
}

/* ========================================
   MOBILE CRISIS BUTTON
   Always accessible emergency button
   ======================================== */

@media (max-width: 767px) {
    .crisis-button {
        position: fixed;
        bottom: calc(var(--mobile-nav-height) + var(--spacing-4) + env(safe-area-inset-bottom, 0px));
        right: var(--spacing-4);
        width: 56px;
        height: 56px;
        z-index: calc(var(--z-fixed) + 1);
        animation: pulse-gentle 3s ease-in-out infinite;
    }
    
    @keyframes pulse-gentle {
        0%, 100% {
            box-shadow: 
                0 8px 24px rgba(242, 143, 156, 0.35),
                0 0 0 0 rgba(242, 143, 156, 0.2);
        }
        50% {
            box-shadow: 
                0 12px 32px rgba(242, 143, 156, 0.45),
                0 0 0 8px rgba(242, 143, 156, 0);
        }
    }
}

/* ========================================
   MOBILE FEATURE CARDS
   Feature showcase optimization
   ======================================== */

@media (max-width: 767px) {
    .feature-card {
        padding: var(--spacing-5);
        text-align: left;
    }
    
    .feature-icon {
        width: 48px;
        height: 48px;
        margin: 0 0 var(--spacing-4) 0;
        font-size: 1.25rem;
    }
    
    .feature-card h3 {
        font-size: 1.125rem;
        margin-bottom: var(--spacing-2);
    }
    
    .feature-card p {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

/* ========================================
   MOBILE LISTS
   Touch-friendly list items
   ======================================== */

@media (max-width: 767px) {
    .list-item {
        padding: var(--spacing-4);
        gap: var(--spacing-3);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-2);
    }
    
    .list-item-icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }
    
    .list-item-title {
        font-size: 0.9375rem;
    }
    
    .list-item-subtitle {
        font-size: 0.8125rem;
    }
    
    .list-item:active {
        transform: scale(0.99);
        background: var(--bg-secondary);
    }
}

/* ========================================
   MOBILE CATEGORY CHIPS
   Selection chips for filtering
   ======================================== */

@media (max-width: 767px) {
    .category-grid {
        gap: var(--spacing-2);
    }
    
    .category-chip {
        padding: var(--spacing-3);
        border-radius: var(--radius);
    }
    
    .category-chip h3 {
        font-size: 0.9375rem;
    }
    
    .category-chip p {
        font-size: 0.75rem;
    }
    
    .category-chip:active {
        transform: scale(0.98);
    }
}

/* ========================================
   LANDSCAPE MOBILE OPTIMIZATIONS
   Handle landscape orientation
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {
    .hero-section {
        padding: var(--spacing-4) var(--spacing-6);
        margin-bottom: var(--spacing-4);
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .modal {
        max-height: 95vh;
    }
    
    .bottom-sheet {
        max-height: 95vh;
    }
    
    /* Side-by-side layout in landscape */
    .grid.landscape-2-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   TABLET TWEAKS (768px - 1024px)
   Medium screen optimizations
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
    
    .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-section {
        padding: var(--spacing-10) var(--spacing-8);
    }
    
    .card {
        padding: var(--spacing-5);
    }
}

/* ========================================
   DARK MODE MOBILE ENHANCEMENTS
   Extra polish for dark theme
   ======================================== */

@media (max-width: 767px) {
    [data-theme="dark"] {
        /* Enhanced contrast for outdoor visibility */
        --text-primary: #f8f9ff;
        --text-secondary: #c8cde8;
    }
    
    [data-theme="dark"] .card {
        background: rgba(17, 19, 34, 0.85);
        border-color: rgba(248, 243, 235, 0.1);
    }
    
    [data-theme="dark"] .action-card {
        background: rgba(26, 32, 51, 0.9);
    }
    
    [data-theme="dark"] .stat-card {
        background: rgba(17, 19, 34, 0.9);
        border-color: rgba(248, 243, 235, 0.08);
    }
}

/* ========================================
   LIGHT MODE MOBILE ENHANCEMENTS
   Clean light theme for daylight
   ======================================== */

@media (max-width: 767px) {
    [data-theme="light"] {
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    [data-theme="light"] .mobile-nav {
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    }
    
    [data-theme="light"] .mobile-header {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }
    
    [data-theme="light"] .card {
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.04),
            0 0 0 1px rgba(0, 0, 0, 0.03);
    }
    
    [data-theme="light"] .hero-section {
        background: linear-gradient(
            135deg,
            rgba(139, 184, 162, 0.15),
            rgba(92, 143, 161, 0.1)
        );
    }
}

/* ========================================
   HALT CHECK MOBILE OPTIMIZATION
   Touch-friendly HALT selection
   ======================================== */

@media (max-width: 767px) {
    .halt-option {
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        padding: var(--spacing-4);
        background: var(--bg-secondary);
        border: 2px solid var(--border);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all 200ms ease;
        min-height: 72px;
    }
    
    .halt-option:active {
        transform: scale(0.98);
    }
    
    .halt-checkbox:checked + .halt-icon + .halt-content + .halt-check,
    .halt-option.selected .halt-check {
        color: var(--success);
        opacity: 1;
    }
    
    .halt-icon {
        font-size: 1.75rem;
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-tertiary);
        border-radius: var(--radius);
    }
    
    .halt-content {
        flex: 1;
        min-width: 0;
    }
    
    .halt-title {
        font-size: 1rem;
        font-weight: var(--font-semibold);
        margin-bottom: 2px;
    }
    
    .halt-desc {
        font-size: 0.8125rem;
        color: var(--text-secondary);
        line-height: 1.3;
    }
    
    .halt-check {
        font-size: 1.25rem;
        color: var(--text-tertiary);
        opacity: 0.3;
        transition: all 200ms ease;
    }
}

/* ========================================
   INVENTORY PAGE MOBILE OPTIMIZATION
   Better mobile experience for inventories
   ======================================== */

@media (max-width: 767px) {
    .nightly-inventory-page,
    .spot-check-page {
        padding-bottom: calc(var(--mobile-nav-height) + 140px);
    }
    
    .inventory-action-bar {
        position: fixed;
        bottom: var(--mobile-nav-height);
        left: 0;
        right: 0;
        padding: var(--spacing-3) var(--spacing-4);
        padding-bottom: max(var(--spacing-3), env(safe-area-inset-bottom));
        background: var(--bg-primary);
        border-top: 1px solid var(--border);
        z-index: var(--z-fixed);
    }
    
    .inventory-action-bar .card-soft {
        padding: var(--spacing-3);
        margin: 0;
    }
    
    .question-card {
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-4);
    }
    
    .question-counter {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        font-weight: var(--font-bold);
        background: var(--bg-tertiary);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .question-counter.answered {
        background: var(--gradient-primary);
        color: white;
    }
    
    /* Progress dots - inherits from unified styles in app.css */
}

/* ========================================
   MEDITATION TIMER MOBILE
   Centered timer with touch controls
   ======================================== */

@media (max-width: 767px) {
    .timer-circle {
        width: 240px !important;
        height: 240px !important;
    }
    
    .timer-svg {
        width: 240px !important;
        height: 240px !important;
    }
    
    .timer-circle-bg,
    .timer-circle-progress {
        cx: 120 !important;
        cy: 120 !important;
        r: 108 !important;
    }
    
    .timer-time {
        font-size: 3rem !important;
    }
    
    .timer-circle-progress {
        stroke-dasharray: 679 !important;
    }
}

/* ========================================
   GRATITUDE JOURNAL MOBILE
   Optimized entry cards
   ======================================== */

@media (max-width: 767px) {
    .gratitude-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--spacing-2) !important;
    }
    
    .gratitude-stats .stat-card {
        padding: var(--spacing-3);
    }
    
    .gratitude-stats .stat-value {
        font-size: 1.5rem;
    }
    
    .gratitude-stats .stat-label {
        font-size: 0.625rem;
    }
    
    .mood-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--spacing-1);
    }
    
    .mood-option {
        padding: var(--spacing-2);
    }
    
    .mood-emoji {
        font-size: 1.5rem;
    }
    
    .mood-label {
        font-size: 0.625rem;
    }
    
    .entry-card {
        padding: var(--spacing-3);
    }
    
    .entry-actions {
        opacity: 1 !important;
    }
    
    .entry-items {
        gap: var(--spacing-2);
    }
    
    .entry-item {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: 0.875rem;
    }
}

/* ========================================
   BIG BOOK & READING PAGES
   Optimized reading experience
   ======================================== */

@media (max-width: 767px) {
    .reading-content,
    .chapter-content {
        font-size: 1rem;
        line-height: 1.75;
        letter-spacing: 0.01em;
    }
    
    .reading-content p,
    .chapter-content p {
        margin-bottom: var(--spacing-4);
    }
    
    blockquote {
        margin: var(--spacing-4) 0;
        padding: var(--spacing-4);
        border-left: 4px solid var(--primary);
        background: var(--bg-secondary);
        border-radius: 0 var(--radius) var(--radius) 0;
        font-style: italic;
    }
    
    blockquote p {
        margin: 0;
        font-size: 1.0625rem;
        line-height: 1.7;
    }
}

/* ========================================
   SPEAKER PAGES MOBILE
   Audio player optimization
   ======================================== */

@media (max-width: 767px) {
    .speaker-card {
        padding: var(--spacing-4);
    }
    
    .speaker-info {
        flex-direction: column;
        gap: var(--spacing-3);
    }
    
    .speaker-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }
    
    audio {
        width: 100%;
        height: 48px;
        border-radius: var(--radius-lg);
    }
    
    audio::-webkit-media-controls-panel {
        background: var(--bg-secondary);
    }
}

/* ========================================
   SERVICE & SPONSORSHIP MOBILE
   Contact cards optimization
   ======================================== */

@media (max-width: 767px) {
    .contact-card {
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        padding: var(--spacing-4);
    }
    
    .contact-avatar {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        flex-shrink: 0;
    }
    
    .contact-actions {
        display: flex;
        gap: var(--spacing-2);
        margin-top: var(--spacing-3);
    }
    
    .contact-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ========================================
   SETTINGS PAGE MOBILE
   Toggle switches and lists
   ======================================== */

@media (max-width: 767px) {
    .settings-section {
        margin-bottom: var(--spacing-6);
    }
    
    .settings-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-4);
        gap: var(--spacing-3);
        min-height: 64px;
    }
    
    .settings-item-content {
        flex: 1;
        min-width: 0;
    }
    
    .settings-item-title {
        font-size: 0.9375rem;
        font-weight: var(--font-semibold);
    }
    
    .settings-item-desc {
        font-size: 0.8125rem;
        color: var(--text-secondary);
        margin-top: 2px;
    }
    
    /* Toggle switch sizing */
    .switch {
        width: 52px;
        height: 30px;
        flex-shrink: 0;
    }
    
    .slider:before {
        height: 22px;
        width: 22px;
    }
    
    input:checked + .slider:before {
        transform: translateX(22px);
    }
}

/* ========================================
   CRISIS PAGE MOBILE
   Emergency-accessible design
   ======================================== */

@media (max-width: 767px) {
    .crisis-interface {
        padding: var(--spacing-4);
    }
    
    .crisis-hotline-btn {
        display: flex;
        align-items: center;
        gap: var(--spacing-4);
        padding: var(--spacing-5);
        background: var(--danger);
        color: white;
        border-radius: var(--radius-xl);
        text-decoration: none;
        min-height: 80px;
        box-shadow: 0 4px 20px rgba(242, 143, 156, 0.4);
    }
    
    .crisis-hotline-btn:active {
        transform: scale(0.98);
    }
    
    .crisis-hotline-icon {
        width: 56px;
        height: 56px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }
    
    .crisis-hotline-text {
        flex: 1;
    }
    
    .crisis-hotline-title {
        font-size: 1.125rem;
        font-weight: var(--font-bold);
    }
    
    .crisis-hotline-subtitle {
        font-size: 0.875rem;
        opacity: 0.9;
    }
    
    .breathing-circle {
        width: 180px !important;
        height: 180px !important;
        margin: 0 auto;
    }
}

/* ========================================
   ACCESSIBILITY MOBILE ENHANCEMENTS
   Better focus states and contrast
   ======================================== */

@media (max-width: 767px) {
    /* High contrast focus rings */
    :focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 2px;
    }
    
    /* Skip link for screen readers */
    .skip-link {
        position: absolute;
        top: -100px;
        left: var(--spacing-4);
        background: var(--primary);
        color: white;
        padding: var(--spacing-3) var(--spacing-4);
        border-radius: var(--radius);
        z-index: calc(var(--z-modal) + 1);
        transition: top 200ms ease;
    }
    
    .skip-link:focus {
        top: var(--spacing-4);
    }
    
    /* Larger tap targets for accessibility */
    a, button, input, select, textarea,
    [role="button"], [role="link"] {
        touch-action: manipulation;
    }
    
    /* Prevent text selection on interactive elements */
    .btn, .action-card, .mobile-nav-item, .tab {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ========================================
   PWA INSTALL PROMPT MOBILE
   Native app install banner
   ======================================== */

@media (max-width: 767px) {
    .pwa-install-prompt {
        position: fixed;
        bottom: calc(var(--mobile-nav-height) + var(--spacing-4));
        left: var(--spacing-4);
        right: var(--spacing-4);
        padding: var(--spacing-4);
        background: var(--bg-primary);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        z-index: var(--z-sticky);
        animation: slideUp 300ms ease;
    }
    
    .pwa-install-content {
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
    }
    
    .pwa-install-icon {
        width: 48px;
        height: 48px;
        background: var(--gradient-primary);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.25rem;
        flex-shrink: 0;
    }
    
    .pwa-install-text {
        flex: 1;
    }
    
    .pwa-install-title {
        font-size: 0.9375rem;
        font-weight: var(--font-semibold);
    }
    
    .pwa-install-desc {
        font-size: 0.8125rem;
        color: var(--text-secondary);
    }
    
    .pwa-install-actions {
        display: flex;
        gap: var(--spacing-2);
        margin-top: var(--spacing-3);
    }
    
    .pwa-install-actions .btn {
        flex: 1;
    }
}

/* ========================================
   PRINT STYLES FOR MOBILE
   Clean printing from mobile
   ======================================== */

@media print {
    .mobile-nav,
    .mobile-header,
    .crisis-button,
    .quick-add-fab,
    .fab,
    .bottom-sheet,
    .modal,
    .inventory-action-bar,
    .pwa-install-prompt {
        display: none !important;
    }
    
    .main-content {
        padding-bottom: 0 !important;
    }
    
    .card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .nightly-inventory-page,
    .spot-check-page {
        padding-bottom: 0 !important;
    }
}