/* Shop Tasks - Mobile CSS */
/* Responsive breakpoints and mobile-specific styles */

/* Tablet and below (1024px) */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 260px;
        --detail-width: 360px;
    }

    .app-container {
        grid-template-columns: 1fr;
    }

    .app-container.detail-open {
        grid-template-columns: 1fr;
    }

    /* Sidebar becomes slide-out */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Mobile header visible */
    .mobile-header {
        display: flex;
    }

    /* Main content needs top padding for mobile header */
    .main-content {
        padding-top: 56px;
    }

    .view-header {
        position: sticky;
        top: 56px;
        z-index: 10;
    }

    /* Detail panel is full overlay on tablet */
    .detail-panel {
        width: 100%;
        max-width: var(--detail-width);
    }
}

/* Mobile (640px and below) */
@media (max-width: 640px) {
    :root {
        --spacing-lg: 16px;
        --spacing-xl: 20px;
    }

    /* Full-width sidebar */
    .sidebar {
        width: 100%;
        max-width: 320px;
    }

    /* Simplified view header */
    .view-header {
        padding: var(--spacing-md);
    }

    .view-title {
        font-size: 18px;
    }

    /* Full-width task list */
    .task-list-container {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Full-width detail panel */
    .detail-panel {
        width: 100%;
        max-width: none;
    }

    /* Larger touch targets */
    .task-item {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .task-checkbox {
        width: 22px;
        height: 22px;
    }

    .nav-item {
        padding: var(--spacing-md);
    }

    /* Stack form rows */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Modal adjustments */
    .modal {
        max-width: none;
        margin: var(--spacing-sm);
        border-radius: var(--radius-md);
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--spacing-md);
    }

    /* Quick add inline adjustments */
    .quick-add-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .quick-add-options {
        width: 100%;
        justify-content: flex-start;
    }

    .quick-add-buttons {
        width: 100%;
        justify-content: flex-end;
    }

    /* Leaderboard */
    .leaderboard-item {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* Small mobile (360px and below) */
@media (max-width: 360px) {
    :root {
        --spacing-md: 12px;
    }

    .login-card {
        padding: var(--spacing-lg);
    }

    .user-points .points-value {
        font-size: 18px;
    }

    .quick-add-trigger {
        font-size: 13px;
    }

    .task-name {
        font-size: 13px;
    }

    .task-meta {
        font-size: 11px;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .sidebar-header {
        padding: var(--spacing-sm);
    }

    .user-info {
        margin-bottom: 0;
    }

    .user-points {
        display: none;
    }

    .quick-add-container {
        padding: var(--spacing-sm);
    }

    .nav-item {
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .sidebar-footer {
        padding: var(--spacing-sm);
    }
}

/* Touch-specific styles */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover states that don't work well on touch */
    .task-item:hover {
        background: transparent;
    }

    .task-item:active {
        background: var(--color-bg);
    }

    .nav-item:hover {
        background: transparent;
    }

    .nav-item:active {
        background: rgba(0, 0, 0, 0.04);
    }

    /* Larger touch targets */
    .icon-btn {
        width: 44px;
        height: 44px;
    }

    .modal-close {
        width: 44px;
        height: 44px;
    }

    /* Prevent double-tap zoom on buttons */
    .btn,
    .nav-item,
    .task-item {
        touch-action: manipulation;
    }
}

/* Dark mode support (system preference) */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
    :root {
        --color-bg: #1e1e1e;
        --color-bg-secondary: #2d2d2d;
        --color-border: #404040;
        --color-border-hover: #505050;
        --color-text: #e0e0e0;
        --color-text-secondary: #a0a0a0;
        --color-text-muted: #707070;
        --sidebar-bg: #252525;
    }

    .login-container {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    }
    */
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .sidebar,
    .detail-panel {
        transition: none;
    }
}

/* Print styles */
@media print {
    .sidebar,
    .detail-panel,
    .mobile-header,
    .quick-add-container,
    .view-actions,
    .modal-overlay {
        display: none !important;
    }

    .app-container {
        display: block;
    }

    .main-content {
        padding: 0;
        height: auto;
        overflow: visible;
    }

    .task-list-container {
        overflow: visible;
    }

    .task-checkbox {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}