/* ========================================
   PHASE 3: MOBILE-SPECIFIC ENHANCEMENTS
   Touch-optimized interactions and responsive improvements
   ======================================== */

/* ========================================
   TOUCH-FRIENDLY IMPROVEMENTS
   ======================================== */

/* Larger touch targets for mobile */
@media (max-width: 768px) {
    
    /* Minimum 48px touch targets (accessibility standard) */
    .btn-check,
    .btn-delete,
    .btn-settings,
    .icon-btn,
    .category-btn {
        min-width: 48px;
        min-height: 48px;
    }

    /* Larger buttons for easier tapping */
    .btn-primary,
    .btn-secondary {
        padding: 1.25rem 1.5rem;
        font-size: 1.125rem;
    }

    /* Better spacing for thumbs */
    .habit-actions {
        gap: 0.75rem;
    }

    /* More generous card padding */
    .habit-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    /* Easier to tap icon selector */
    .icon-selector {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }

    .icon-btn {
        padding: 1rem;
        font-size: 1.75rem;
    }
}

/* ========================================
   BOTTOM SHEET MODAL (MOBILE)
   ======================================== */

@media (max-width: 768px) {
    .modal-content {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-height: 90vh;
        border-radius: 24px 24px 0 0;
        animation: slideUpFromBottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }

    @keyframes slideUpFromBottom {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    /* Pull handle at top of bottom sheet */
    .modal-content::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--color-border);
        border-radius: 100px;
        margin: 12px auto 8px;
    }

    /* Better scrolling on mobile */
    .modal-content {
        -webkit-overflow-scrolling: touch;
    }
}

/* ========================================
   SWIPE GESTURES
   ======================================== */

.swipeable {
    position: relative;
    transition: transform 0.2s ease-out;
}

.swipeable.swiping-left {
    transform: translateX(-80px);
}

.swipeable.swiping-right {
    transform: translateX(80px);
}

/* Swipe actions revealed on left/right */
.swipe-actions {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.swipe-actions-left {
    left: 0;
    background: var(--color-success);
}

.swipe-actions-right {
    right: 0;
    background: var(--color-error);
}

.swipeable.swiping-left .swipe-actions-left,
.swipeable.swiping-right .swipe-actions-right {
    opacity: 1;
}

/* ========================================
   ONE-HANDED MODE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    /* Primary actions near thumb zone (bottom 1/3 of screen) */
    .btn-add-habit {
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        box-shadow: var(--shadow-xl);
        z-index: 999;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-add-habit .btn-icon {
        font-size: 2rem;
    }

    .btn-add-habit span:not(.btn-icon) {
        display: none; /* Hide text on mobile */
    }

    /* Settings accessible from top corners */
    .btn-settings {
        top: 24px;
        right: 24px;
    }
}

/* ========================================
   IMPROVED MOBILE NAVIGATION
   ======================================== */

@media (max-width: 768px) {
    /* Sticky header on scroll */
    .header {
        position: sticky;
        top: 0;
        background: var(--color-bg);
        z-index: 100;
        padding: 1rem 0;
        margin-bottom: 1rem;
    }

    /* Compact header on mobile */
    .logo {
        font-size: 2rem;
    }

    .tagline {
        font-size: 0.875rem;
    }

    /* Stats bar stacks on mobile */
    .stats-bar {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .stat-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }

    .stat-value {
        font-size: 1.5rem;
    }
}

/* ========================================
   PULL TO REFRESH INDICATOR
   ======================================== */

.pull-to-refresh {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.pull-to-refresh.active {
    opacity: 1;
    transform: translateX(-50%) translateY(60px);
}

.pull-to-refresh.refreshing {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: translateX(-50%) translateY(60px) rotate(360deg); }
}

/* ========================================
   MOBILE FORM IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Larger input fields */
    .input-field {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 1.25rem;
    }

    /* Better form layout */
    .form-group {
        margin-bottom: 1.5rem;
    }

    /* Color picker optimized for touch */
    .color-picker {
        gap: 1rem;
    }

    .color-btn {
        width: 48px;
        height: 48px;
    }

    /* Tracking type selector stacks */
    .tracking-type-selector {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .tracking-type-btn {
        padding: 1.25rem;
    }
}

/* ========================================
   HAPTIC FEEDBACK SIMULATION
   ======================================== */

/* Visual feedback that feels like haptics */
.haptic-light {
    animation: hapticLight 0.1s ease-out;
}

.haptic-medium {
    animation: hapticMedium 0.15s ease-out;
}

.haptic-heavy {
    animation: hapticHeavy 0.2s ease-out;
}

@keyframes hapticLight {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.98); }
}

@keyframes hapticMedium {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.95); }
}

@keyframes hapticHeavy {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(0.92); }
    70% { transform: scale(1.02); }
}

/* ========================================
   MOBILE TOAST POSITIONING
   ======================================== */

@media (max-width: 768px) {
    .toast-container {
        top: auto;
        bottom: 80px; /* Above floating action button */
        left: 16px;
        right: 16px;
    }

    .toast {
        min-width: auto;
        max-width: none;
    }
}

/* ========================================
   THUMB ZONE VISUALIZATION (DEBUG)
   ======================================== */

/* Uncomment to visualize thumb reach zones */
/*
@media (max-width: 768px) {
    body::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 33vh;
        background: rgba(16, 185, 129, 0.1);
        pointer-events: none;
        z-index: 9999;
        border-top: 2px dashed rgba(16, 185, 129, 0.3);
    }
}
*/

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

@media (max-width: 768px) and (orientation: landscape) {
    .container {
        padding: 1rem 2rem;
    }

    .header {
        padding: 0.5rem 0;
        margin-bottom: 1rem;
    }

    .logo {
        font-size: 1.75rem;
    }

    .stats-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .habit-card {
        padding: 1rem;
    }
}

/* ========================================
   SAFE AREA INSETS (iOS NOTCH)
   ======================================== */

@supports (padding: max(0px)) {
    .container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .btn-add-habit {
        bottom: max(24px, env(safe-area-inset-bottom));
        right: max(24px, env(safe-area-inset-right));
    }

    .toast-container {
        bottom: max(80px, calc(env(safe-area-inset-bottom) + 80px));
    }
}

/* ========================================
   MOBILE CALENDAR IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
    .weekly-calendar {
        gap: 0.25rem;
    }

    .day-column {
        padding: 0.75rem 0.25rem;
        font-size: 0.875rem;
    }

    .day-date {
        font-size: 1.25rem;
    }

    /* Month view for mobile */
    .monthly-calendar {
        grid-template-columns: repeat(7, 1fr);
        gap: 0.25rem;
    }

    .month-day {
        aspect-ratio: 1;
        font-size: 0.75rem;
    }
}

/* ========================================
   IMPROVED LOADING STATES
   ======================================== */

@media (max-width: 768px) {
    .skeleton {
        min-height: 80px;
    }

    .skeleton-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

/* ========================================
   MOBILE-SPECIFIC ANIMATIONS
   ======================================== */

@media (max-width: 768px) {
    /* Faster animations on mobile for responsiveness */
    :root {
        --transition-fast: 100ms;
        --transition-base: 200ms;
        --transition-slow: 300ms;
    }

    /* Reduce animation complexity */
    @media (prefers-reduced-motion: no-preference) {
        .confetti {
            animation-duration: 2s; /* Faster on mobile */
        }
    }
}

/* ========================================
   DARK MODE SAFE COLORS
   ======================================== */

/* Ensure good contrast on OLED screens */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    :root {
        --color-bg: #000000; /* True black for OLED */
        --color-surface: #0a0e1a;
    }
}

/* ========================================
   MOBILE-FIRST SCROLLING
   ======================================== */

@media (max-width: 768px) {
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Better scroll momentum on iOS */
    .modal-content,
    .habits-list {
        -webkit-overflow-scrolling: touch;
    }

    /* Hide scrollbar on mobile */
    .modal-content::-webkit-scrollbar,
    .habits-list::-webkit-scrollbar {
        display: none;
    }
}

/* ========================================
   MOBILE ACCESSIBILITY
   ======================================== */

@media (max-width: 768px) {
    /* Larger focus indicators on mobile */
    *:focus-visible {
        outline: 4px solid var(--color-primary);
        outline-offset: 4px;
    }

    /* Better contrast for text */
    .color-text-muted {
        color: var(--color-text-secondary); /* Lighter for readability */
    }
}

/* ========================================
   PROGRESSIVE WEB APP IMPROVEMENTS
   ======================================== */

/* Standalone mode (installed PWA) */
@media (display-mode: standalone) {
    .header {
        padding-top: max(1rem, env(safe-area-inset-top));
    }

    .btn-settings {
        top: max(1.5rem, calc(env(safe-area-inset-top) + 1.5rem));
    }
}

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

@media (max-width: 768px) {
    /* Reduce blur for performance */
    .modal-overlay {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Simplify shadows on mobile */
    .habit-card:hover {
        box-shadow: var(--shadow-md); /* Reduce from lg */
    }

    /* Disable expensive animations on low-end devices */
    @media (prefers-reduced-motion: reduce) {
        .confetti,
        .particle,
        .sparkle {
            display: none;
        }
    }
}

/* ========================================
   MOBILE GESTURE HINTS
   ======================================== */

.swipe-hint {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    animation: hintFadeIn 2s ease-in-out infinite;
}

@keyframes hintFadeIn {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Hide hints after first use */
.swipe-hint.dismissed {
    display: none;
}

/* ========================================
   MOBILE KEYBOARD HANDLING
   ======================================== */

@media (max-width: 768px) {
    /* Keep inputs visible when keyboard appears */
    .input-field:focus {
        scroll-margin-top: 100px;
    }

    /* Adjust layout when keyboard is visible */
    @media (max-height: 500px) {
        .header {
            padding: 0.5rem 0;
        }

        .stats-bar {
            display: none; /* Hide on very small screens with keyboard */
        }
    }
}

/* ========================================
   MOBILE-SPECIFIC UTILITIES
   ======================================== */

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

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

/* Mobile-only flex */
.flex-mobile {
    @media (max-width: 768px) {
        display: flex;
    }
}
/**
 * Habit Card Mobile Optimizations
 * Fixes icon size and button overflow on small screens
 */
/* ===================================================================
   PHASE 3: HABIT CARD MOBILE OPTIMIZATIONS
   Added: January 23, 2026
   =================================================================== */
/* =================================================================
   MOBILE - TABLET (768px and below)
   ================================================================= */
@media (max-width: 768px) {
    /* Habit card icon - reduce size */
    .habit-card .habit-icon {
        font-size: 28px !important;
        min-width: 28px !important;
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Habit action buttons - smaller for mobile */
    .habit-card .habit-actions {
        gap: 6px !important;
        flex-shrink: 0;
    }
    
    .habit-card .habit-actions button,
    .habit-card .btn-check,
    .habit-card .btn-edit,
    .habit-card .btn-delete,
    .habit-card .btn-track-modal {
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        padding: 8px !important;
        flex-shrink: 0;
    }
    
    /* Habit info section - allow more space */
    .habit-card .habit-info {
        flex: 1;
        min-width: 0; /* Allow text truncation */
    }
    
    /* Habit name - prevent overflow */
    .habit-card .habit-name {
        font-size: 1rem !important;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Habit streak - smaller text */
    .habit-card .habit-streak {
        font-size: 0.8rem !important;
    }
    
    /* Progress bar - ensure it fits */
    .habit-progress {
        width: 100%;
    }
    
    /* Category badge - smaller */
    .habit-category {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
    }
}

/* =================================================================
   MOBILE - PHONE (480px and below)
   ================================================================= */
@media (max-width: 480px) {
    /* Even smaller icon */
    .habit-card .habit-icon {
        font-size: 24px !important;
        min-width: 24px !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Smaller buttons */
    .habit-card .habit-actions {
        gap: 4px !important;
    }
    
    .habit-card .habit-actions button,
    .habit-card .btn-check,
    .habit-card .btn-edit,
    .habit-card .btn-delete,
    .habit-card .btn-track-modal {
        min-width: 36px !important;
        min-height: 36px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
        padding: 6px !important;
    }
    
    /* Smaller text throughout */
    .habit-card .habit-name {
        font-size: 0.95rem !important;
    }
    
    .habit-card .habit-streak {
        font-size: 0.75rem !important;
    }
    
    .habit-category {
        font-size: 0.65rem !important;
        padding: 2px 4px !important;
    }
    
    /* Progress labels smaller */
    .habit-progress .progress-label,
    .habit-progress .progress-percentage {
        font-size: 0.8rem !important;
    }
}

/* =================================================================
   ENSURE HABIT CARDS DON'T OVERFLOW
   ================================================================= */
@media (max-width: 768px) {
    .habit-card {
        padding: 12px !important;
        gap: 10px !important;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Flexbox layout - ensure proper wrapping */
    .habit-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important; /* Center all items vertically */
    }
    
    /* Icon column */
    .habit-card .habit-icon {
        flex-shrink: 0;
    }
    
    /* Info section - takes remaining space */
    .habit-card .habit-info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    
    /* Actions column */
    .habit-card .habit-actions {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

/* =================================================================
   NOTES FOR CONTEXT
   ================================================================= */
/*
 * MEASUREMENTS FROM DIAGNOSTIC:
 * - Card width: 368px
 * - Desktop icon: 32px
 * - Desktop buttons: 48-52px each
 * - Mobile icon: 28px → 24px
 * - Mobile buttons: 40px → 36px
 * 
 * GOAL:
 * - Icon + Info + 3 Buttons = 24px + ~220px + (3×36px + 2×4px) = 360px ✓
 * - Leaves 8px padding on each side
 */