/* ============= MOBILE ENHANCEMENTS ============= */

/* Improved Touch Targets (min 44x44px) */
@media (max-width: 768px) {

    /* Larger buttons for easier tapping */
    .btn {
        min-height: 48px;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    /* Larger form inputs */
    .form-control {
        min-height: 48px;
        font-size: 16px;
        /* Prevents zoom on iOS */
        padding: 0.75rem 1rem;
    }

    /* Larger radio/checkbox cards */
    .radio-card {
        min-height: 80px;
        padding: 1.25rem;
    }

    /* Larger progress steps */
    .progress-step {
        padding: 0.75rem;
    }

    .step-number {
        width: 44px;
        height: 44px;
        font-size: 1.125rem;
    }

    /* Header adjustments */
    .header {
        padding: 1rem;
    }

    .header-actions {
        gap: 0.5rem;
    }

    .theme-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 0.75rem;
    }

    /* Wizard improvements */
    .wizard-step {
        padding: 1.5rem 1rem;
    }

    .step-header h2 {
        font-size: 1.5rem;
    }

    .step-header p {
        font-size: 0.9rem;
    }

    /* Form groups spacing */
    .form-group {
        margin-bottom: 1.5rem;
    }

    /* Summary cards */
    .summary-card {
        padding: 1.5rem;
    }

    .summary-value {
        font-size: 1.75rem;
    }

    /* Detail cards */
    .detail-card {
        padding: 1.25rem;
    }

    /* Charts */
    .chart-card {
        padding: 1.25rem;
    }

    .chart-wrapper {
        height: 280px;
    }

    /* Modal improvements */
    .modal-dialog {
        margin: 1rem;
    }

    /* Table improvements */
    table {
        font-size: 0.875rem;
    }

    table th,
    table td {
        padding: 0.75rem 0.5rem;
    }

    /* Reduce animations on mobile for performance */
    .detail-card:hover {
        transform: translateY(-2px);
        /* Less movement */
    }

    /* Stack action buttons vertically */
    .wizard-actions {
        flex-direction: column;
    }

    .wizard-actions .btn {
        width: 100%;
    }

    /* Better spacing for results */
    #results {
        padding: 1rem;
    }

    .results-header {
        padding: 1.5rem 1rem;
    }

    /* Confetti optimization - fewer particles on mobile */
    .confetti {
        width: 8px;
        height: 8px;
    }
}

/* Small phones (< 480px) */
@media (max-width: 480px) {

    /* Even larger touch targets */
    .btn {
        min-height: 52px;
        font-size: 1.0625rem;
    }

    /* Reduce padding to maximize space */
    .app-container {
        padding: 0.5rem;
    }

    .wizard-content {
        padding: 1.5rem 0.75rem;
    }

    /* Smaller headings */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Summary cards more compact */
    .summary-card {
        padding: 1.25rem 1rem;
    }

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

    .summary-icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    /* Charts smaller */
    .chart-wrapper {
        height: 240px;
    }

    /* Table horizontal scroll */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modal full width */
    .modal-dialog {
        width: 100%;
        margin: 0.5rem;
        max-height: 95vh;
    }

    /* Tutorial adjustments */
    .tutorial-modal {
        width: 100%;
        margin: 0.5rem;
    }

    .tutorial-body {
        padding: 1.25rem;
    }
}

/* Landscape mobile (height < 500px) */
@media (max-height: 500px) and (orientation: landscape) {

    /* Reduce header size */
    .header {
        padding: 0.75rem 1rem;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    /* Compact wizard progress */
    .wizard-progress {
        padding: 0.75rem;
    }

    .step-title {
        display: none;
    }

    /* Reduce modal height */
    .modal-dialog {
        max-height: 90vh;
    }

    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {

    /* 2 columns for cards */
    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .details-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Slightly larger touch targets */
    .btn {
        min-height: 44px;
    }

    .form-control {
        min-height: 44px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

    /* Remove hover effects on touch devices */
    .detail-card:hover::after {
        opacity: 0;
    }

    /* Larger tap targets */
    button,
    a,
    input[type="radio"],
    input[type="checkbox"] {
        min-width: 44px;
        min-height: 44px;
    }

    /* Better focus states for accessibility */
    .form-control:focus {
        outline: 3px solid var(--brand-primary);
        outline-offset: 2px;
    }

    /* Disable smooth scroll on touch (can be janky) */
    html {
        scroll-behavior: auto;
    }
}

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

    /* Sharper borders */
    .detail-card,
    .summary-card,
    .chart-card {
        border-width: 0.5px;
    }
}

/* Dark mode mobile adjustments */
@media (max-width: 768px) {
    [data-theme="dark"] {
        /* Slightly lighter background for better readability on small screens */
        --bg-primary: #121218;
        --bg-secondary: #1c1c26;
    }
}

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

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

    .confetti {
        display: none;
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {

    /* Fix iOS input zoom */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px;
    }

    /* Fix iOS safe area */
    .app-container {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Fix iOS button appearance */
    button,
    .btn {
        -webkit-appearance: none;
        appearance: none;
    }
}