/* ============================================================================
   MOBILE APPLE DESIGN PRINCIPLES
   Applied across all pages for consistent, clean mobile UX
   ============================================================================ */

/* ── Global Mobile Spacing ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Consistent page padding (reduced from desktop) */
    .dashboard-page,
    .training-page,
    .nutrition-page,
    .rehab-page,
    .community-page,
    .timetable-page,
    .profile-page,
    .analytics-page,
    .assessment-page {
        padding: 1rem !important;
    }

    /* Page headers - condensed */
    .page-header {
        margin-bottom: 1rem !important;
        padding-bottom: 0.75rem !important;
    }

    .page-title,
    h1 {
        font-size: 1.75rem !important; /* 28px */
        line-height: 1.2 !important;
        font-weight: 700 !important;
        margin-bottom: 0.25rem !important;
    }

    .page-subtitle {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.4 !important;
        opacity: 0.7 !important;
    }

    /* Section spacing - tighter */
    section,
    .section,
    .content-section {
        margin-bottom: 1.5rem !important;
    }

    /* Last section no bottom margin */
    section:last-child,
    .section:last-child {
        margin-bottom: 0 !important;
    }
}

/* ── Typography Scale (Apple-style) ────────────────────────────────────── */
@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem !important; /* 28px - Large Title */
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.375rem !important; /* 22px - Title 1 */
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 1.25rem !important; /* 20px - Title 2 */
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    h4 {
        font-size: 1.125rem !important; /* 18px - Title 3 */
        font-weight: 600 !important;
        line-height: 1.4 !important;
    }

    body,
    p,
    .body-text {
        font-size: 1rem !important; /* 16px - Body (prevents iOS zoom) */
        line-height: 1.5 !important;
        font-weight: 400 !important;
    }

    small,
    .text-sm,
    .caption {
        font-size: 0.875rem !important; /* 14px - Footnote */
        line-height: 1.4 !important;
    }

    .text-xs {
        font-size: 0.75rem !important; /* 12px - Caption 2 */
        line-height: 1.3 !important;
    }
}

/* ── Card Components ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .card,
    .programme-card,
    .workout-card,
    .meal-card,
    .class-card,
    .post-card {
        padding: 1.25rem !important;
        border-radius: 16px !important; /* More rounded on mobile */
        margin-bottom: 1rem !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Card titles */
    .card-title,
    .card h3 {
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Card body text */
    .card-body,
    .card p {
        font-size: 0.9375rem !important;
        line-height: 1.5 !important;
    }
}

/* ── Button System (Apple HIG) ────────────────────────────────────────── */
@media (max-width: 768px) {
    /* All buttons minimum touch target */
    button,
    .btn,
    a.btn {
        min-height: 44px !important;
        min-width: 44px !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
        transition: all 0.2s ease !important;
        cursor: pointer;
    }

    /* Primary button */
    .btn-primary,
    button[type="submit"]:not(.btn-secondary):not(.btn-tertiary) {
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
        background: var(--pioneer-gold, #c8a03c) !important;
        color: var(--pioneer-navy, #0f1419) !important;
        border: none !important;
    }

    .btn-primary:active {
        transform: scale(0.95) !important;
        opacity: 0.9 !important;
    }

    /* Secondary button */
    .btn-secondary {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9375rem !important;
        background: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .btn-secondary:active {
        background: rgba(255, 255, 255, 0.15) !important;
    }

    /* Tertiary button (text only) */
    .btn-tertiary,
    .btn-link {
        padding: 0.5rem 1rem !important;
        font-size: 0.9375rem !important;
        background: transparent !important;
        color: var(--pioneer-gold, #c8a03c) !important;
        border: none !important;
    }

    /* Icon buttons */
    .btn-icon,
    .btn-icon-only {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .btn-icon:active {
        transform: scale(0.9) !important;
    }

    /* Full-width buttons */
    .btn-block,
    .btn-full-width {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── Form Inputs ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 16px !important; /* CRITICAL: Prevents iOS zoom */
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: white !important;
        transition: all 0.2s ease !important;
    }

    input:focus,
    textarea:focus,
    select:focus {
        outline: none !important;
        border-color: var(--pioneer-gold, #c8a03c) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 0 0 3px rgba(200, 160, 60, 0.1) !important;
    }

    /* Labels above inputs */
    label {
        display: block !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* Form groups */
    .form-group {
        margin-bottom: 1.25rem !important;
    }

    /* Textarea specific */
    textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
}

/* ── Lists & Tables ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* List items */
    ul li,
    ol li {
        padding: 0.75rem 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* Last item no border */
    ul li:last-child,
    ol li:last-child {
        border-bottom: none !important;
    }

    /* Tables - enable horizontal scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    /* Table cells - adequate touch targets */
    td,
    th {
        padding: 0.875rem !important;
        min-height: 44px !important;
    }
}

/* ── Modal/Sheet Behavior ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .modal,
    .sheet,
    .drawer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-height: 90vh !important;
        border-radius: 20px 20px 0 0 !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal.open,
    .sheet.open,
    .drawer.open {
        transform: translateY(0) !important;
    }

    /* Drag-handle removed: these modals dismiss via the × button (not by dragging),
       so the grab bar was a non-functional affordance — and as a flex child of
       .modal-header it pushed the title out of alignment ("header is off"). */
    .modal-header::before,
    .sheet::before {
        content: none !important;
        display: none !important;
    }

    /* Modal backdrop */
    .modal-backdrop {
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        background: rgba(10, 22, 40, 0.8) !important;
    }
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Bottom navigation bar */
    .bottom-nav,
    .app-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        padding: 8px 0 !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        background: rgba(10, 22, 40, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        z-index: 100 !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
    }

    /* Navigation items */
    .nav-item,
    .app-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 8px 12px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        border-radius: 8px !important;
    }

    .nav-item.active,
    .app-nav-item.active {
        color: var(--pioneer-gold, #c8a03c) !important;
    }

    .nav-item:active,
    .app-nav-item:active {
        transform: scale(0.9) !important;
    }
}

/* ── Loading States ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Skeleton loading (Apple-style shimmer) */
    .skeleton {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.03) 25%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.03) 75%
        ) !important;
        background-size: 200% 100% !important;
        animation: shimmer 1.5s infinite !important;
        border-radius: 8px !important;
    }

    @keyframes shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .skeleton-text {
        height: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .skeleton-title {
        height: 1.5rem !important;
        width: 60% !important;
        margin-bottom: 1rem !important;
    }

    .skeleton-card {
        height: 120px !important;
        margin-bottom: 1rem !important;
    }

    /* Spinner */
    .spinner {
        width: 32px !important;
        height: 32px !important;
        border: 3px solid rgba(255, 255, 255, 0.1) !important;
        border-top-color: var(--pioneer-gold, #c8a03c) !important;
        border-radius: 50% !important;
        animation: spin 0.8s linear infinite !important;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }
}

/* ── Empty States ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .empty-state {
        text-align: center !important;
        padding: 3rem 1.5rem !important;
    }

    .empty-state-icon {
        font-size: 3rem !important;
        margin-bottom: 1rem !important;
        opacity: 0.5 !important;
    }

    .empty-state-title {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        color: white !important;
    }

    .empty-state-description {
        font-size: 0.9375rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 1.5rem !important;
    }
}

/* ── Safe Areas (Notched Devices) ──────────────────────────────────────── */
@media (max-width: 768px) {
    /* Top safe area */
    .page-header,
    .top-nav {
        padding-top: calc(1rem + env(safe-area-inset-top)) !important;
    }

    /* Bottom safe area */
    .bottom-nav,
    .dc-inline-composer,
    footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }

    /* Side safe areas */
    body {
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
}

/* ── Accessibility ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Focus visible (keyboard navigation) */
    *:focus-visible {
        outline: 2px solid var(--pioneer-gold, #c8a03c) !important;
        outline-offset: 2px !important;
    }

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

/* ── Utility Classes ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Spacing utilities */
    .mt-sm { margin-top: 0.5rem !important; }
    .mt-md { margin-top: 1rem !important; }
    .mt-lg { margin-top: 1.5rem !important; }

    .mb-sm { margin-bottom: 0.5rem !important; }
    .mb-md { margin-bottom: 1rem !important; }
    .mb-lg { margin-bottom: 1.5rem !important; }

    .p-sm { padding: 0.5rem !important; }
    .p-md { padding: 1rem !important; }
    .p-lg { padding: 1.5rem !important; }

    /* Display utilities */
    .mobile-hidden { display: none !important; }
    .mobile-visible { display: block !important; }

    /* Text alignment */
    .text-center { text-align: center !important; }
    .text-left { text-align: left !important; }
    .text-right { text-align: right !important; }
}