/* Mobile-specific styles for Illuminate AI */
/* IMPORTANT: This file must be loaded AFTER styles.css to properly override desktop styles */

/* Mobile-specific CSS Variables - Force override */
:root {
    --mobile-nav-height: 56px;
    --mobile-bottom-nav-height: 64px;
    --mobile-sidebar-width: 280px;
}




/* Mobile-first approach - apply to all screens, then override for desktop */
@media (max-width: 768px) {
    :root {
        --nav-height: var(--mobile-nav-height);
        --bottom-nav-height: var(--mobile-bottom-nav-height);
        --sidebar-width: var(--mobile-sidebar-width);
        --spacing: 1rem;
        --radius: 12px;
        --radius-sm: 6px;
    }

    

    /* Force show mobile elements on mobile */
    .mobile-header,
    .bottom-nav {
        display: flex !important;
    }

    /* Adjust main content for mobile */
    .main-content {
        margin-left: 0 !important;
        padding-top: calc(var(--nav-height) + var(--safe-area-inset-top)) !important;
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-inset-bottom)) !important;
    }
}

/* Mobile Header */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 1000;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Hide mobile header on desktop */
@media (min-width: 769px) {
    .mobile-header {
        display: none !important;
    }
}

.mobile-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-menu-btn:hover {
    background: var(--surface-2);
}

.mobile-logo {
    flex: 1;
    text-align: center;
}

.mobile-actions {
    display: flex;
    gap: 0.5rem;
}

/* Bottom Navigation - Mobile Only */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding: 0.5rem 0;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1000;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

/* Hide bottom nav on desktop */
@media (min-width: 769px) {
    .bottom-nav {
        display: none !important;
    }
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    transition: color 0.2s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
}

.bottom-nav-item:active {
    transform: scale(0.95);
}

.bottom-nav-item.active {
    color: var(--accent);
}

.bottom-nav-icon {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

/* Mobile Main Content Adjustments */
@media (max-width: 768px) {
    .main-content {
        padding-top: calc(var(--nav-height) + env(safe-area-inset-top));
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 2rem);
        padding-left: 1rem;
        padding-right: 1rem;
        margin-left: 0 !important;
        min-height: 100vh;
    }

    /* Hide sidebar on mobile by default */
    

    /* Show sidebar when active (drawer mode) */
    

    .main-content {
        padding: 0 !important;
        margin: 0 !important;
    }
}
/* Strict Mobile Form Constraints */
@media (max-width: 768px) {
    input, select, textarea, .form-input, .form-select, .form-textarea {
        min-height: 44px;
    }
}