/**
 * Northstar Medical iOS Mobile Optimization
 * 
 * Mobile-specific CSS overrides for iPhone screens (≤480px).
 * Loaded after all other stylesheets to cleanly override desktop styles.
 * 
 * Pages optimized:
 *   - Landing page (index.html)
 *   - Login page (patient_login.html)
 *   - Registration page (patient_register.html)
 *   - Patient dashboard (base_sidebar.html + dashboard.html)
 */

/* ============================================================
   GLOBAL MOBILE OVERRIDES (≤480px)
   ============================================================ */

@media (max-width: 480px) {

    /* ============================================
       LANDING PAGE — HEADER
       ============================================ */

    /* Clean up cramped header — hide auth buttons, show just logo + menu */
    .header .auth-buttons {
        display: none !important;
    }

    .header .menu-toggle {
        display: block !important;
    }

    .header {
        padding: 12px 0 !important;
    }

    .header .logo {
        font-size: 22px !important;
    }

    .header .logo i {
        font-size: 24px !important;
    }

    /* ============================================
       LANDING PAGE — HERO SECTION
       ============================================ */

    .hero {
        padding: 90px 0 40px !important;
    }

    .hero-text h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }

    .hero-text p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 24px !important;
    }

    .hero-buttons .btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        text-align: center !important;
    }

    .hero-stats {
        gap: 16px !important;
        flex-wrap: wrap !important;
    }

    .hero-stat-value {
        font-size: 24px !important;
    }

    .hero-stat-label {
        font-size: 12px !important;
    }

    /* Hide the floating visual card on small screens */
    .hero-visual {
        display: none !important;
    }

    .hero-content {
        grid-template-columns: 1fr !important;
    }

    /* Hide floating badges */
    .floating-badge {
        display: none !important;
    }

    /* ============================================
       LANDING PAGE — SECTIONS
       ============================================ */

    .services,
    .how-it-works,
    .testimonials,
    .faq {
        padding: 48px 0 !important;
    }

    .section-header {
        margin-bottom: 32px !important;
    }

    .section-title {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .section-subtitle {
        font-size: 15px !important;
    }

    .section-badge {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Service cards — single column */
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .service-card {
        padding: 24px !important;
    }

    .service-card h3 {
        font-size: 18px !important;
    }

    .service-card p {
        font-size: 14px !important;
    }

    .service-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 22px !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }

    /* How it works — single column */
    .steps-container {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .steps-container::before {
        display: none !important;
    }

    .step-number {
        width: 56px !important;
        height: 56px !important;
        font-size: 22px !important;
        margin-bottom: 16px !important;
    }

    .step-card h4 {
        font-size: 16px !important;
    }

    .step-card p {
        font-size: 13px !important;
    }

    /* Testimonials — single column */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .testimonial-card {
        padding: 24px !important;
    }

    .testimonial-card blockquote {
        font-size: 14px !important;
    }

    /* FAQ */
    .faq-question {
        font-size: 15px !important;
        padding: 18px !important;
    }

    .faq-answer {
        padding: 0 18px !important;
    }

    /* ============================================
       LANDING PAGE — CTA SECTION
       ============================================ */

    .cta {
        padding: 48px 0 !important;
    }

    .cta h2 {
        font-size: 24px !important;
    }

    .cta p {
        font-size: 15px !important;
    }

    .cta-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .cta-buttons .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* ============================================
       LANDING PAGE — FOOTER
       ============================================ */

    .footer {
        padding: 48px 0 24px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .footer-brand .logo {
        font-size: 20px !important;
    }

    .footer-links h4 {
        font-size: 14px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ============================================
       LOGIN PAGE
       ============================================ */

    .login-wrapper {
        padding: 16px !important;
        align-items: flex-start !important;
        padding-top: 80px !important;
    }

    .login-card {
        padding: 28px 20px !important;
        border-radius: 16px !important;
        max-width: 100% !important;
    }

    .login-title {
        font-size: 24px !important;
        margin-bottom: 6px !important;
    }

    .login-subtitle {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }

    .form-group {
        margin-bottom: 18px !important;
    }

    .form-label {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    .form-input {
        padding: 12px 16px !important;
        font-size: 16px !important;
        /* Prevent iOS zoom on focus */
        border-radius: 10px !important;
    }

    .btn-submit {
        padding: 14px !important;
        font-size: 16px !important;
        margin-top: 8px !important;
    }

    .links-section {
        margin-top: 20px !important;
        padding-top: 16px !important;
    }

    /* Login page header */
    .login-wrapper~.header .btn,
    .header .auth-buttons .btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }

    /* ============================================
       REGISTRATION PAGE
       ============================================ */

    .register-wrapper,
    .signup-wrapper {
        padding: 16px !important;
        padding-top: 80px !important;
    }

    .register-card,
    .signup-card {
        padding: 28px 20px !important;
        border-radius: 16px !important;
        max-width: 100% !important;
    }

    .register-title,
    .signup-title {
        font-size: 24px !important;
    }

    /* ============================================
       PATIENT DASHBOARD
       ============================================ */

    /* Dashboard main container — tighter padding */
    .dashboard-content,
    main.flex-1 {
        padding: 12px !important;
    }

    /* Hero/welcome card */
    .dashboard-hero,
    .welcome-card {
        padding: 20px !important;
        border-radius: 16px !important;
    }

    .dashboard-hero h2,
    .welcome-card h2 {
        font-size: 20px !important;
    }

    .dashboard-hero p {
        font-size: 14px !important;
    }

    /* Quick stats — single column */
    .stats-grid,
    .quick-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 16px !important;
    }

    .stat-card h3 {
        font-size: 14px !important;
    }

    /* Care journey and action grids — single column */
    .care-journey-grid,
    .action-grid,
    .quick-actions-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Content cards — reduced padding */
    .content-card {
        border-radius: 12px !important;
        padding: 16px !important;
    }

    .content-card h3 {
        font-size: 16px !important;
    }

    /* Activity list items — tighter */
    .activity-item {
        padding: 8px !important;
    }

    /* Appointment card */
    .appointment-card {
        padding: 12px !important;
    }

    .appointment-date {
        width: 3rem !important;
        height: 3rem !important;
    }

    .appointment-date .day {
        font-size: 1.25rem !important;
    }

    /* Tour button — smaller and repositioned */
    .tour-button,
    [onclick*="startTour"],
    .take-tour-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
        bottom: 16px !important;
        right: 16px !important;
        z-index: 30 !important;
    }

    /* Sidebar header — tighter on mobile */
    .mobile-header,
    header.sticky {
        padding: 8px 12px !important;
    }

    /* User name in header */
    .header-user-name {
        display: none !important;
    }

    /* ============================================
       GENERAL TAILWIND OVERRIDES FOR MOBILE
       ============================================ */

    /* Override Tailwind grid classes used in templates */
    .grid-cols-2,
    .sm\:grid-cols-2,
    .md\:grid-cols-2,
    .lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .grid-cols-3,
    .sm\:grid-cols-3,
    .md\:grid-cols-3,
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    .grid-cols-4,
    .sm\:grid-cols-4,
    .md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Tighter gap for all grids */
    .gap-4,
    .gap-6,
    .gap-8 {
        gap: 10px !important;
    }

    /* Reduce Tailwind padding/margins */
    .p-6,
    .p-8 {
        padding: 16px !important;
    }

    .px-6,
    .px-8 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .py-6,
    .py-8 {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    /* Reduce text sizes that feel too large */
    .text-3xl,
    .text-4xl {
        font-size: 1.5rem !important;
    }

    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-xl {
        font-size: 1.125rem !important;
    }

    /* Rounded corners — reduce oversized ones */
    .rounded-3xl,
    .rounded-\[2rem\] {
        border-radius: 16px !important;
    }

    .rounded-2xl {
        border-radius: 12px !important;
    }

    /* ============================================
       MOBILE MENU (Landing Page)
       ============================================ */

    .mobile-menu .mobile-menu-link {
        padding: 14px 0 !important;
        font-size: 16px !important;
    }

    .mobile-menu .btn {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }
}

/* ============================================================
   EXTRA SMALL SCREENS (≤360px, e.g. iPhone SE)
   ============================================================ */

@media (max-width: 360px) {
    .hero-text h1 {
        font-size: 24px !important;
    }

    .hero-stat-value {
        font-size: 20px !important;
    }

    .section-title {
        font-size: 22px !important;
    }

    .login-card {
        padding: 24px 16px !important;
    }

    .stat-card {
        padding: 12px !important;
    }
}