/**
 * CreonOS Global Mobile Styles v1.0
 * Universal mobile experience for ALL pages
 * Landing, Auth, Onboarding, Dashboard - everything!
 */

/* ==========================================================================
   1. MOBILE DETECTION & BASE RESETS
   ========================================================================== */

/* Root mobile variables */
:root {
    --mobile-header-height: 60px;
    --mobile-nav-height: 70px;
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-left: env(safe-area-inset-left, 0px);
    --mobile-safe-right: env(safe-area-inset-right, 0px);
    --mobile-primary: #6366f1;
    --mobile-primary-dark: #4f46e5;
    --mobile-accent: #8b5cf6;
    --mobile-bg-dark: #0a0c14;
    --mobile-bg-card: rgba(15, 20, 30, 0.95);
    --mobile-text: #ffffff;
    --mobile-text-muted: #9ca3af;
    --mobile-border: rgba(99, 102, 241, 0.2);
    --mobile-radius: 16px;
    --mobile-radius-sm: 8px;
    --mobile-radius-lg: 24px;
}

/* Global mobile body adjustments */
@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    
    body {
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent zoom on input focus */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   2. LANDING PAGE (index.html) MOBILE STYLES
   ========================================================================== */

@media (max-width: 768px) {
    /* Navigation - Ensure always on top and clickable */
    nav.fixed {
        padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 8px !important;
        backdrop-filter: blur(20px) !important;
        z-index: 99999 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* === CRITICAL: Ensure nav buttons are ALWAYS clickable === */
    nav a,
    nav button {
        position: relative !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.3) !important;
        cursor: pointer !important;
    }
    
    /* Get Started button - guaranteed clickable */
    nav a.gradient-bg,
    nav a.get-started-btn,
    nav .pulse-glow {
        z-index: 99999 !important;
        pointer-events: auto !important;
        min-height: 38px !important;
        min-width: 90px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    /* Active state feedback - visible tap */
    nav a:active,
    nav button:active {
        transform: scale(0.92) !important;
        opacity: 0.7 !important;
        background-color: rgba(255,255,255,0.1) !important;
    }
    
    nav .container {
        padding: 0 12px !important;
    }
    
    /* Make logo smaller to give more room */
    nav .text-2xl {
        font-size: 16px !important;
    }
    
    nav img.w-10 {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Hide desktop nav links */
    nav .hidden.md\\:flex {
        display: none !important;
    }
    
    /* Mobile menu button */
    #mobileMenuBtn {
        display: flex !important;
        padding: 8px !important;
        background: rgba(99, 102, 241, 0.1) !important;
        border-radius: 10px !important;
    }
    
    /* Mobile menu dropdown */
    #mobileMenu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(10, 12, 20, 0.98) !important;
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--mobile-border);
        padding: 16px !important;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    #mobileMenu a {
        display: block !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        border-radius: var(--mobile-radius-sm);
        transition: all 0.2s;
    }
    
    #mobileMenu a:active {
        background: rgba(99, 102, 241, 0.15);
        transform: scale(0.98);
    }
    
    /* Hero Section */
    section.min-h-screen {
        min-height: calc(100vh - 60px) !important;
        padding: 80px 0 40px !important;
    }
    
    section .container {
        padding: 0 20px !important;
    }
    
    /* Hero Grid - Stack on mobile */
    section .grid.md\\:grid-cols-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }
    
    /* Hero Title */
    h1.text-5xl, h1.text-7xl,
    h1.md\\:text-7xl, h1.md\\:text-6xl {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        margin-bottom: 16px !important;
    }
    
    /* Hero Subtitle */
    section p.text-xl {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 24px !important;
    }
    
    /* Hero Buttons */
    section .flex.flex-wrap.gap-4 {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
    }
    
    section .flex.flex-wrap.gap-4 a {
        width: 100% !important;
        text-align: center !important;
        padding: 16px 24px !important;
        font-size: 16px !important;
    }
    
    /* Hero Video/Demo Area */
    .float {
        animation: none !important;
    }
    
    /* Stats Grid */
    .grid.grid-cols-2.md\\:grid-cols-4 {
        gap: 16px !important;
    }
    
    .grid.grid-cols-2 > div {
        padding: 16px !important;
        background: var(--mobile-bg-card);
        border-radius: var(--mobile-radius);
        border: 1px solid var(--mobile-border);
    }
    
    .grid.grid-cols-2 .text-4xl,
    .grid.grid-cols-2 .text-5xl {
        font-size: 2rem !important;
    }
    
    /* Features Section */
    #features {
        padding: 60px 0 !important;
    }
    
    #features h2.text-4xl,
    #features h2.text-6xl {
        font-size: 2rem !important;
        margin-bottom: 12px !important;
    }
    
    /* Feature Cards */
    .glass-card {
        padding: 24px !important;
        margin-bottom: 16px !important;
    }
    
    .glass-card h3 {
        font-size: 1.25rem !important;
    }
    
    .glass-card p {
        font-size: 0.95rem !important;
    }
    
    .glass-card img {
        height: 150px !important;
    }
    
    /* Pricing Section */
    #pricing {
        padding: 60px 0 !important;
    }
    
    .grid.md\\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* Testimonials */
    .grid.md\\:grid-cols-2.lg\\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* CTA Section */
    section.py-32:last-of-type {
        padding: 60px 0 !important;
    }
    
    section.py-32 h2 {
        font-size: 2rem !important;
    }
    
    section.py-32 p {
        font-size: 1rem !important;
    }
    
    section.py-32 .flex.flex-wrap {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    section.py-32 a {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Footer */
    footer {
        padding: 40px 0 !important;
    }
    
    footer .grid.md\\:grid-cols-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }
    
    footer h3 {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }
    
    footer ul li {
        padding: 8px 0 !important;
    }
    
    footer .flex.gap-4 {
        justify-content: center !important;
        margin-top: 16px;
    }
}

/* ==========================================================================
   3. AUTH PAGES (login.html, register.html) MOBILE STYLES
   ========================================================================== */

@media (max-width: 768px) {
    /* Auth page body */
    body.flex.items-center.justify-center {
        padding: 16px !important;
        padding-top: calc(16px + var(--mobile-safe-top)) !important;
        padding-bottom: calc(16px + var(--mobile-safe-bottom)) !important;
    }
    
    /* Auth container */
    .w-full.max-w-md {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Logo area */
    .w-full.max-w-md > .text-center.mb-8 {
        margin-bottom: 24px !important;
    }
    
    .w-full.max-w-md h1 {
        font-size: 2rem !important;
    }
    
    .w-full.max-w-md p {
        font-size: 0.95rem !important;
    }
    
    /* Auth form card */
    .glass.rounded-3xl {
        padding: 24px !important;
        border-radius: var(--mobile-radius-lg) !important;
    }
    
    /* Form labels */
    .glass.rounded-3xl label {
        font-size: 0.95rem !important;
        margin-bottom: 6px !important;
    }
    
    /* Form inputs */
    .input-field,
    .glass.rounded-3xl input {
        padding: 16px !important;
        font-size: 16px !important;
        border-radius: var(--mobile-radius) !important;
        min-height: 52px !important;
    }
    
    /* Password visibility toggle */
    .glass.rounded-3xl .relative button {
        padding: 12px !important;
    }
    
    /* Submit button */
    .btn-primary,
    button[type="submit"] {
        padding: 16px 24px !important;
        font-size: 16px !important;
        min-height: 56px !important;
        border-radius: var(--mobile-radius) !important;
        width: 100% !important;
    }
    
    /* Social login buttons */
    .glass.rounded-3xl button.w-full {
        padding: 14px !important;
        min-height: 52px !important;
        font-size: 15px !important;
    }
    
    /* Links */
    .glass.rounded-3xl a {
        padding: 8px 4px !important;
        display: inline-block;
    }
    
    /* "Or" divider */
    .glass.rounded-3xl .flex.items-center.gap-3 {
        margin: 20px 0 !important;
    }
    
    /* Footer links in auth */
    .glass.rounded-3xl + .text-center {
        margin-top: 20px !important;
    }
}

/* === EXTRA COMPACT for small phones (iPhone SE, etc) === */
@media (max-width: 400px) {
    body.flex.items-center.justify-center {
        padding: 10px !important;
        align-items: flex-start !important;
        padding-top: calc(20px + var(--mobile-safe-top)) !important;
    }
    
    /* Smaller logo header */
    .w-full.max-w-md > .text-center.mb-8 {
        margin-bottom: 14px !important;
    }
    
    .w-full.max-w-md > .text-center .w-16 {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 8px !important;
    }
    
    .w-full.max-w-md h1 {
        font-size: 1.5rem !important;
        margin-bottom: 4px !important;
    }
    
    .w-full.max-w-md > .text-center > p {
        font-size: 0.85rem !important;
    }
    
    /* Tighter form card */
    .glass.rounded-3xl {
        padding: 16px !important;
        border-radius: 16px !important;
    }
    
    /* Smaller spacing between fields */
    .space-y-6 > * + * {
        margin-top: 10px !important;
    }
    
    /* Smaller form labels */
    .glass.rounded-3xl label {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
    }
    
    /* Smaller inputs */
    .input-field,
    .glass.rounded-3xl input {
        padding: 12px !important;
        font-size: 16px !important; /* Keep at 16px to prevent iOS zoom */
        min-height: 44px !important;
        border-radius: 10px !important;
    }
    
    /* Smaller buttons */
    .btn-primary,
    button[type="submit"],
    a.block.py-3 {
        padding: 12px 16px !important;
        font-size: 14px !important;
        min-height: 44px !important;
        border-radius: 10px !important;
    }
    
    /* Smaller divider */
    .relative.my-6 {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .relative.my-6 span {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
    }
    
    /* Smaller footer */
    .glass.rounded-3xl + .text-center,
    p.text-center.mt-6 {
        margin-top: 12px !important;
        font-size: 0.7rem !important;
    }
    
    /* Remember me / forgot password */
    .flex.items-center.justify-between.text-sm {
        font-size: 0.75rem !important;
    }
    
    /* Terms text on register */
    .text-xs.text-white\\/60 {
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
    }
}

/* ==========================================================================
   4. ONBOARDING PAGE MOBILE STYLES
   ========================================================================== */

@media (max-width: 768px) {
    /* Onboarding container */
    .onboarding-container {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
    }
    
    /* Progress bar */
    .onboarding-container .progress-bar {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(10, 12, 20, 0.98);
    }
    
    /* Steps container */
    .step {
        padding: 24px !important;
        padding-top: calc(24px + var(--mobile-safe-top)) !important;
        padding-bottom: calc(100px + var(--mobile-safe-bottom)) !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    .step.active {
        display: flex !important;
    }
    
    /* Headings */
    .step h1 {
        font-size: 1.75rem !important;
        margin-bottom: 8px !important;
    }
    
    .step .subtitle {
        font-size: 1rem !important;
        margin-bottom: 24px !important;
    }
    
    /* Feature grid */
    .feature-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin: 20px 0 !important;
    }
    
    .feature-card {
        padding: 16px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    .feature-icon {
        font-size: 1.5rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }
    
    .feature-card > div:last-child {
        flex: 1;
    }
    
    .feature-title {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }
    
    .feature-desc {
        font-size: 0.85rem !important;
    }
    
    /* Pricing card in onboarding */
    .pricing-card {
        padding: 24px !important;
        margin: 20px 0 !important;
        border-radius: var(--mobile-radius) !important;
    }
    
    .pricing-card .price {
        font-size: 3rem !important;
    }
    
    .pricing-card .trial-badge {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }
    
    /* Benefits list */
    .benefits-list {
        margin: 20px 0 !important;
    }
    
    .benefits-list li {
        padding: 10px 0 !important;
        font-size: 0.9rem !important;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    
    .benefits-list li::before {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.75rem !important;
        flex-shrink: 0;
        margin-top: 2px;
    }
    
    /* Email verification section */
    .verify-email {
        padding: 16px !important;
        border-radius: var(--mobile-radius) !important;
    }
    
    .verify-email h3 {
        font-size: 1.1rem !important;
    }
    
    .verify-email p {
        font-size: 0.9rem !important;
        word-break: break-word;
    }
    
    /* What happens next box */
    .step > div[style*="background: #f7fafc"] {
        background: rgba(15, 20, 30, 0.8) !important;
        padding: 16px !important;
        border-radius: var(--mobile-radius) !important;
        border: 1px solid var(--mobile-border);
    }
    
    .step > div[style*="background: #f7fafc"] h3 {
        color: #fff !important;
        font-size: 1rem !important;
    }
    
    .step > div[style*="background: #f7fafc"] ol {
        color: var(--mobile-text-muted) !important;
    }
    
    /* Button group */
    .btn-group {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 16px !important;
        padding-bottom: calc(16px + var(--mobile-safe-bottom)) !important;
        background: linear-gradient(to top, rgba(10, 12, 20, 1) 80%, transparent) !important;
        gap: 10px !important;
        margin: 0 !important;
        z-index: 100;
    }
    
    .btn-group .btn {
        flex: 1 !important;
        padding: 14px 16px !important;
        font-size: 0.95rem !important;
        min-height: 52px !important;
        border-radius: var(--mobile-radius) !important;
    }
    
    /* Small text */
    .small-text {
        font-size: 0.8rem !important;
        margin-bottom: 80px !important;
    }
}

/* ==========================================================================
   5. GLOBAL MOBILE ENHANCEMENTS
   ========================================================================== */

@media (max-width: 768px) {
    /* Better touch targets */
    button, a, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Smooth scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better focus states for accessibility */
    input:focus, button:focus, a:focus, textarea:focus {
        outline: 2px solid var(--mobile-primary) !important;
        outline-offset: 2px;
    }
    
    /* Loading states */
    .mobile-loading {
        pointer-events: none;
        opacity: 0.7;
    }
    
    /* Pull to refresh indicator */
    .mobile-pull-indicator {
        position: fixed;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 20px;
        background: var(--mobile-bg-card);
        border-radius: var(--mobile-radius-lg);
        border: 1px solid var(--mobile-border);
        color: var(--mobile-text);
        font-size: 14px;
        transition: top 0.3s;
        z-index: 1000;
    }
    
    .mobile-pull-indicator.active {
        top: calc(20px + var(--mobile-safe-top));
    }
    
    /* Toast notifications */
    .mobile-toast {
        position: fixed;
        bottom: calc(80px + var(--mobile-safe-bottom));
        left: 16px;
        right: 16px;
        padding: 16px 20px;
        background: var(--mobile-bg-card);
        border-radius: var(--mobile-radius);
        border: 1px solid var(--mobile-border);
        color: var(--mobile-text);
        font-size: 14px;
        text-align: center;
        z-index: 10000;
        transform: translateY(100px);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .mobile-toast.show {
        transform: translateY(0);
        opacity: 1;
    }
    
    .mobile-toast.success {
        border-color: #10b981;
        background: rgba(16, 185, 129, 0.1);
    }
    
    .mobile-toast.error {
        border-color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
    }
    
    /* Skeleton loading */
    .mobile-skeleton {
        background: linear-gradient(90deg, 
            rgba(99, 102, 241, 0.1) 0%, 
            rgba(99, 102, 241, 0.2) 50%, 
            rgba(99, 102, 241, 0.1) 100%);
        background-size: 200% 100%;
        animation: skeleton-shimmer 1.5s ease-in-out infinite;
        border-radius: var(--mobile-radius-sm);
    }
    
    @keyframes skeleton-shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    /* Better scrollbar for mobile */
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    
    ::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 0.3);
        border-radius: 4px;
    }
}

/* ==========================================================================
   6. ANIMATIONS & TRANSITIONS
   ========================================================================== */

@media (max-width: 768px) {
    /* Page transition */
    .mobile-page-enter {
        animation: pageEnter 0.3s ease-out;
    }
    
    @keyframes pageEnter {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Button press */
    button:active, a:active {
        transform: scale(0.97);
        transition: transform 0.1s;
    }
    
    /* Card press */
    .glass-card:active,
    .feature-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.15s;
    }
    
    /* Smooth transitions for all interactive elements */
    a, button, input, .glass-card, .feature-card {
        transition: all 0.2s ease;
    }
}

/* ==========================================================================
   7. LANDSCAPE MODE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 900px) and (orientation: landscape) {
    /* Reduce padding for landscape */
    section.min-h-screen {
        min-height: auto !important;
        padding: 60px 0 40px !important;
    }
    
    /* Two-column layout for landscape */
    .grid.md\\:grid-cols-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Smaller headings */
    h1.text-5xl, h1.text-7xl {
        font-size: 2rem !important;
    }
    
    /* Onboarding in landscape */
    .step {
        padding-bottom: 80px !important;
    }
    
    .feature-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ==========================================================================
   8. VERY SMALL SCREENS (<375px)
   ========================================================================== */

@media (max-width: 374px) {
    h1 {
        font-size: 1.75rem !important;
    }
    
    .step h1 {
        font-size: 1.5rem !important;
    }
    
    .pricing-card .price {
        font-size: 2.5rem !important;
    }
    
    .btn, button {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    .feature-card {
        padding: 12px !important;
    }
    
    .glass.rounded-3xl {
        padding: 16px !important;
    }
}

/* ==========================================================================
   9. PRINT STYLES (hide mobile-only elements when printing)
   ========================================================================== */

@media print {
    .mobile-toast,
    .mobile-pull-indicator,
    .btn-group.fixed,
    #mobileMenu {
        display: none !important;
    }
}