/* Mobile Optimization - Native App Feel */

/* Touch-friendly tap targets */
@media (max-width: 768px) {

    /* Minimum 44px tap targets for better mobile usability */
    button,
    a,
    .clickable,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Touch-friendly forms */
    input,
    select,
    textarea {
        font-size: 16px;
        /* Prevents iOS zoom on focus */
        padding: 12px 16px;
        border-radius: 8px;
    }

    /* Improved touch scrolling */
    * {
        -webkit-overflow-scrolling: touch;
        tap-highlight-color: transparent;
        -webkit-tap-highlight-color: transparent;
    }

    /* Remove outline on touch */
    *:focus {
        outline: none;
    }

    /* Smooth native-like transitions */
    * {
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Mobile-optimized spacing */
    .page-content {
        padding: 16px;
    }

    .card,
    .card-item {
        margin-bottom: 16px;
        border-radius: 12px;
    }

    /* Mobile-friendly navigation */
    .nav-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

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

    /* Optimized buttons for mobile */
    .btn-primary,
    .btn-secondary,
    .btn-action {
        padding: 14px 24px;
        font-size: 16px;
        border-radius: 12px;
        font-weight: 600;
    }

    /* Touch-friendly cards */
    .feature-card,
    .chart-card {
        padding: 20px;
        margin: 12px 0;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    .feature-card:active,
    .chart-card:active {
        transform: scale(0.98);
    }

    /* Mobile-optimized modals */
    .modal-content {
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        margin: auto 0 0 0;
    }

    /* Improved text readability on mobile */
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

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

    /* Mobile menu optimization */
    .mobile-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
        padding: 12px 0;
        z-index: 1000;
    }

    .mobile-menu-item {
        flex: 1;
        text-align: center;
        padding: 8px;
        font-size: 12px;
    }

    /* Full-width inputs on mobile */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        width: 100%;
        box-sizing: border-box;
    }

    /* Optimized payment modal for mobile */
    .payment-modal-content {
        max-width: 100%;
        padding: 24px 20px;
        border-radius: 20px 20px 0 0;
    }

    /* Chart images responsive */
    .chart-image,
    .main-chart-image {
        max-width: 100%;
        height: auto;
    }

    /* Prevent horizontal scroll */
    body,
    html {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Mobile-friendly tables */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Desktop Optimization - Full Featured */
@media (min-width: 1024px) {

    /* Show desktop features */
    .mobile-only {
        display: none !important;
    }

    /* Multi-column layouts */
    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    /* Sidebar navigation */
    .nav-sidebar {
        width: 280px;
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }

    .main-content {
        margin-left: 280px;
        padding: 32px;
    }

    /* Desktop modal sizing */
    .modal-content {
        max-width: 800px;
        border-radius: 16px;
    }

    /* Hover effects for desktop */
    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    }

    .btn-primary:hover,
    .btn-secondary:hover {
        transform: translateY(-2px);
    }

    /* Desktop typography */
    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 24px;
    }

    /* Tooltips on desktop */
    [data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 14px;
        white-space: nowrap;
        z-index: 1000;
    }
}

/* Tablet optimization */
@media (min-width: 768px) and (max-width: 1023px) {
    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .modal-content {
        max-width: 600px;
        border-radius: 16px;
    }
}

/* Native app-like pull-to-refresh styling */
@media (max-width: 768px) {
    .pull-to-refresh {
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-60px);
        transition: transform 0.3s;
        z-index: 9999;
        color: #9333ea;
        font-size: 14px;
        font-weight: 600;
    }

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

/* Smooth page transitions */
.page-transition-enter {
    opacity: 0;
    transform: translateY(20px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s;
}

/* Bottom safe area for newer iPhones */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .mobile-menu {
            padding-bottom: max(12px, env(safe-area-inset-bottom));
        }

        .page-content {
            padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
        }
    }
}