/* ===== iOS MOBILE APP STYLES ===== */
/* Only applies on screens <= 768px */

@media (max-width: 768px) {
    /* Hide desktop nav links */
    .top-nav__links { display: none !important; }
    .top-nav__user-dropdown { display: none !important; }
    .top-nav { height: 52px; padding: 0 16px; }
    .top-nav__inner { height: 52px; }
    .top-nav__right { gap: 8px !important; }

    /* Main content padding for top/bottom bars */
    .main-content { padding-bottom: 80px !important; padding-top: 0; }
    body { padding-top: 52px; }

    /* iOS Tab Bar */
    .ios-tab-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 72px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: rgba(12, 12, 16, 0.88);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-top: 0.5px solid rgba(255,255,255,0.08);
        z-index: 1000;
        align-items: flex-start;
        justify-content: space-around;
        padding-top: 8px;
    }
    .ios-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-decoration: none;
        color: rgba(255,255,255,0.4);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.01em;
        padding: 4px 12px;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s;
    }
    .ios-tab svg { width: 24px; height: 24px; transition: color 0.2s; }
    .ios-tab.active { color: #6366f1; }
    .ios-tab.active svg { color: #6366f1; }
    .ios-tab:active { transform: scale(0.9); }

    /* Badge on tab */
    .ios-tab__badge {
        position: absolute;
        top: 0;
        right: 4px;
        min-width: 16px;
        height: 16px;
        background: #f43f5e;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 700;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }

    /* Container full-width on mobile */
    .container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }

    /* iOS-style cards */
    .card, .profile-section {
        border-radius: 14px !important;
        border: none !important;
        background: rgba(28, 28, 30, 0.8) !important;
    }

    /* iOS-style buttons */
    .btn {
        border-radius: 12px !important;
        font-weight: 600 !important;
        -webkit-tap-highlight-color: transparent;
    }
    .btn:active { transform: scale(0.97); opacity: 0.85; }

    /* iOS large title style */
    .profile-header__name, .m-hero__name {
        font-size: 26px !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em;
    }

    /* iOS-style form inputs */
    input.form-input, textarea.form-input, select.form-input {
        border-radius: 12px !important;
        background: rgba(28, 28, 30, 0.9) !important;
        border: 0.5px solid rgba(255,255,255,0.1) !important;
        font-size: 16px !important; /* prevents iOS zoom */
        padding: 14px 16px !important;
    }

    /* Smooth page transitions */
    .main-content {
        animation: iosPageIn 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    @keyframes iosPageIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Hide footer on mobile */
    .footer { display: none !important; }

    /* iOS pull-to-refresh hint */
    .main-content { overscroll-behavior-y: contain; }

    /* Status bar safe area */
    .top-nav { padding-top: env(safe-area-inset-top, 0); }

    /* ===== iOS PROJECTS PAGE ===== */
    .projects-page { padding: 16px 0 20px !important; }
    .projects-header { padding: 0 16px; margin-bottom: 16px !important; }
    .projects-header h1 { font-size: 28px !important; font-weight: 800; letter-spacing: -0.02em; }

    /* View switcher + create btn row */
    .projects-header > div { width: 100%; justify-content: space-between; }
    .btn-create { padding: 10px 18px !important; font-size: 13px !important; border-radius: 12px !important; }

    /* iOS-style collapsible filter */
    .filters-bar {
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 16px 20px !important;
        background: rgba(28, 28, 30, 0.6);
        border-radius: 16px;
        padding: 4px;
        border: 0.5px solid rgba(255,255,255,0.06);
    }
    .filter-group {
        width: 100%;
        gap: 0 !important;
        border-bottom: 0.5px solid rgba(255,255,255,0.06);
    }
    .filter-group:last-of-type { border-bottom: none; }
    .filter-group label {
        display: none !important;
    }
    .filter-group select,
    .filter-group input {
        width: 100% !important;
        min-width: unset !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        color: #fff !important;
        -webkit-appearance: none;
        appearance: none;
    }
    .filter-group select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.3)' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        background-size: 16px !important;
        padding-right: 40px !important;
    }
    .filter-group select:focus,
    .filter-group input:focus {
        background: rgba(99,102,241,0.06) !important;
        outline: none !important;
        box-shadow: none !important;
    }
    .filter-group input::placeholder { color: rgba(255,255,255,0.3) !important; }
    .filter-btn {
        width: 100% !important;
        margin: 4px 0 !important;
        padding: 14px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        background: #6366f1 !important;
        color: #fff !important;
        border: none !important;
    }
    .filter-btn:active { transform: scale(0.98); opacity: 0.9; }

    /* Project cards mobile */
    .projects-grid { gap: 12px !important; padding: 0 16px; }
    .project-card { border-radius: 14px !important; }
    .project-card__photo img { height: 160px !important; }
    .project-card__body { padding: 14px 16px 16px !important; }
    .project-card__title { font-size: 15px !important; }
    .project-card__desc { font-size: 13px !important; }

    /* Pagination mobile */
    .pagination { padding: 0 16px; }
    .pagination a, .pagination span {
        min-width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }

    /* Notification dropdown full-screen on mobile */
    .notification-dropdown {
        position: fixed !important;
        top: 52px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 52px - 72px) !important;
        border-radius: 0 !important;
    }
}

/* Tab bar hidden on desktop */
.ios-tab-bar { display: none; }