/* Mobile-First Responsive Design for PWA Question App */

/* NUCLEAR OPTION: Remove ALL styling from login display */
@media (max-width: 768px) {
    /* Force login display to have no container */
    .login-display-wrapper,
    .login-display-wrapper > * {
        all: unset !important;
        display: contents !important;
    }
    
    /* Remove background from login/nav buttons container */
    .flex.items-center.space-x-2,
    .d-flex.align-center.gap-2 {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    /* Aggressively remove all MudBlazor backgrounds in top nav */
    nav .mud-button-root,
    nav .mud-icon-button,
    nav .mud-menu,
    nav .mud-menu-activator,
    nav .mud-paper,
    nav .mud-popover-provider,
    nav .mud-button-group,
    nav .d-flex,
    nav .mud-list,
    nav .mud-avatar,
    header .mud-button-root,
    header .mud-icon-button,
    header .mud-menu,
    header .mud-menu-activator,
    header .mud-paper,
    header .mud-popover-provider {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    
    /* Remove background from any container holding login buttons */
    .mud-appbar .mud-button-root,
    .mud-appbar .mud-icon-button,
    .mud-appbar .d-flex,
    .mud-appbar > div,
    .mud-appbar .flex {
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* Touch-friendly sizing for mobile devices */
@media (max-width: 768px) {
    /* General touch targets */
    .mud-button {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 8px 16px !important;
    }
    
    .mud-icon-button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .mud-fab {
        min-height: 56px !important;
        min-width: 56px !important;
    }
    
    /* Form elements optimization */
    .mud-input {
        font-size: 16px !important; /* Prevent zoom on iOS */
        min-height: 44px !important;
    }
    
    .mud-input-control {
        margin-bottom: 16px !important;
    }
    
    .mud-select {
        min-height: 44px !important;
    }
    
    /* Navigation optimizations */
    .mud-appbar {
        min-height: 56px !important;
        padding: 0 8px !important;
    }
    
    .mud-drawer {
        width: 280px !important;
    }
    
    /* Layout and spacing */
    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .mud-main-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Cards and papers */
    .mud-paper {
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }
    
    /* Typography optimizations */
    .mud-typography-h4 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .mud-typography-h5 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .mud-typography-h6 {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Chips optimization */
    .mud-chip {
        min-height: 28px !important;
        font-size: 0.75rem !important;
        margin: 2px !important;
        cursor: pointer !important;
    }
    
    /* Dialog optimizations */
    .mud-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        border-radius: 12px !important;
    }
    
    /* Question card specific optimizations */
    .question-title {
        display: block !important;
        text-decoration: none !important;
        padding: 4px 0 !important;
        line-height: 1.3 !important;
    }

    /* Social Media Share Mobile Optimizations - IMPROVED SIZING */
    .social-share-container {
        position: relative;
        display: inline-block;
    }

    .social-share-container .mud-button {
        /* Override general button styling for share button */
        min-height: 32px !important;
        min-width: auto !important;
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
    }

    .share-options-mobile {
        position: absolute !important;
        top: -260px !important; /* Positioned well above the button */
        left: -50px !important; /* Offset to not cover button */
        right: auto !important;
        width: 280px !important;
        z-index: 1000 !important;
        border-radius: 8px !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
        background: var(--mud-palette-surface) !important;
        border: 1px solid var(--mud-palette-lines-default) !important;
    }

    .share-options-mobile .mud-button {
        min-height: 36px !important;
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    .share-options-mobile .mud-icon-button {
        min-height: 28px !important;
        min-width: 28px !important;
        padding: 4px !important;
    }

    /* AI Expansion Panel Mobile Optimizations */
    .ai-expansion-panel .mud-expand-panel {
        background: transparent !important;
        box-shadow: none !important;
    }

    .ai-expansion-panel .mud-expand-panel-header {
        min-height: 48px !important;
        padding: 8px 12px !important;
    }
    
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
    }
}

/* Touch improvements for all devices */
.mud-chip {
    transition: transform 0.1s ease !important;
}

.mud-chip:active {
    transform: scale(0.95) !important;
}

.mud-button:active,
.mud-icon-button:active {
    transform: scale(0.95) !important;
}

/* Swipe indicators */
.swipe-indicator {
    opacity: 0.8 !important;
    transition: opacity 0.2s ease !important;
}

.swipe-indicator:active {
    opacity: 1 !important;
}

/* Social Media Share Styles for Desktop - IMPROVED SIZING */
@media (min-width: 769px) {
    .social-share-container {
        position: relative;
        display: inline-flex;
        align-items: center;
    }

    .social-share-container .mud-icon-button {
        min-height: 32px !important;
        min-width: 32px !important;
        padding: 6px !important;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .social-share-container .mud-icon-button:hover {
        transform: scale(1.1);
        opacity: 0.8;
    }

    /* Desktop brand icon colors */
    .social-share-container .mud-icon-button[title*="Twitter"] {
        color: #1DA1F2;
    }

    .social-share-container .mud-icon-button[title*="Reddit"] {
        color: #FF4500;
    }

    .social-share-container .mud-icon-button[title*="LinkedIn"] {
        color: #0077B5;
    }

    .social-share-container .mud-icon-button[title*="Facebook"] {
        color: #1877F2;
    }

    .social-share-container .mud-icon-button[title*="WhatsApp"] {
        color: #25D366;
    }

    .social-share-container .mud-icon-button[title*="Telegram"] {
        color: #0088cc;
    }

    /* Smaller text for desktop sharing label */
    .social-share-container .mud-typography-caption {
        font-size: 0.75rem !important;
    }
}