/* ========================================
   RESPONSIVE UTILITIES
   Mobile-first responsive classes for Atlantis
   
   Breakpoints (matching MudBlazor):
   - xs: 0-599px (mobile)
   - sm: 600-959px (tablet)
   - md: 960-1279px (small desktop)
   - lg: 1280-1919px (desktop)
   - xl: 1920px+ (large desktop)
   ======================================== */

/* ========================================
   SECTION 1: RESPONSIVE TYPOGRAPHY
   ======================================== */

:root {
    --responsive-h1: 4rem;
    --responsive-h2: 3rem;
    --responsive-h3: 2.5rem;
    --responsive-h4: 2rem;
    --responsive-h5: 1.5rem;
    --responsive-h6: 1.25rem;
    --responsive-body: 1rem;
    --responsive-spacing: 24px;
}

/* Tablet breakpoint */
@media (max-width: 959px) {
    :root {
        --responsive-h1: 2.5rem;
        --responsive-h2: 2rem;
        --responsive-h3: 1.75rem;
        --responsive-h4: 1.5rem;
        --responsive-h5: 1.25rem;
        --responsive-h6: 1.1rem;
        --responsive-spacing: 16px;
    }
}

/* Mobile breakpoint */
@media (max-width: 599px) {
    :root {
        --responsive-h1: 2rem;
        --responsive-h2: 1.75rem;
        --responsive-h3: 1.5rem;
        --responsive-h4: 1.25rem;
        --responsive-h5: 1.1rem;
        --responsive-h6: 1rem;
        --responsive-spacing: 12px;
    }
}

/* ========================================
   SECTION 2: VISIBILITY UTILITIES
   ======================================== */

/* Mobile only (< 600px) */
@media (max-width: 599px) {
    .d-none-mobile { display: none !important; }
    .d-block-mobile { display: block !important; }
    .d-flex-mobile { display: flex !important; }
    .d-inline-mobile { display: inline !important; }
}

/* Tablet only (600-959px) */
@media (min-width: 600px) and (max-width: 959px) {
    .d-none-tablet { display: none !important; }
    .d-block-tablet { display: block !important; }
    .d-flex-tablet { display: flex !important; }
}

/* Desktop and up (960px+) */
@media (min-width: 960px) {
    .d-none-desktop { display: none !important; }
    .d-block-desktop { display: block !important; }
    .d-flex-desktop { display: flex !important; }
}

/* Show only on specific breakpoints */
.show-mobile { display: none !important; }
.show-tablet { display: none !important; }
.show-desktop { display: none !important; }

@media (max-width: 599px) {
    .show-mobile { display: block !important; }
    .show-mobile.d-flex, .show-mobile-flex { display: flex !important; }
}

@media (min-width: 600px) and (max-width: 959px) {
    .show-tablet { display: block !important; }
    .show-tablet.d-flex, .show-tablet-flex { display: flex !important; }
}

@media (min-width: 960px) {
    .show-desktop { display: block !important; }
    .show-desktop.d-flex, .show-desktop-flex { display: flex !important; }
}

/* ========================================
   SECTION 3: SPACING UTILITIES
   ======================================== */

/* Mobile spacing overrides */
@media (max-width: 599px) {
    .pa-mobile-0 { padding: 0 !important; }
    .pa-mobile-1 { padding: 4px !important; }
    .pa-mobile-2 { padding: 8px !important; }
    .pa-mobile-3 { padding: 12px !important; }
    .pa-mobile-4 { padding: 16px !important; }
    .pa-mobile-5 { padding: 20px !important; }
    .pa-mobile-6 { padding: 24px !important; }
    
    .px-mobile-2 { padding-left: 8px !important; padding-right: 8px !important; }
    .px-mobile-3 { padding-left: 12px !important; padding-right: 12px !important; }
    .px-mobile-4 { padding-left: 16px !important; padding-right: 16px !important; }
    
    .py-mobile-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
    .py-mobile-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
    .py-mobile-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
    
    .ma-mobile-0 { margin: 0 !important; }
    .ma-mobile-2 { margin: 8px !important; }
    .ma-mobile-3 { margin: 12px !important; }
    .ma-mobile-4 { margin: 16px !important; }
    
    .mb-mobile-2 { margin-bottom: 8px !important; }
    .mb-mobile-3 { margin-bottom: 12px !important; }
    .mb-mobile-4 { margin-bottom: 16px !important; }
    
    .mt-mobile-2 { margin-top: 8px !important; }
    .mt-mobile-3 { margin-top: 12px !important; }
    .mt-mobile-4 { margin-top: 16px !important; }
    
    .gap-mobile-1 { gap: 4px !important; }
    .gap-mobile-2 { gap: 8px !important; }
    .gap-mobile-3 { gap: 12px !important; }
    .gap-mobile-4 { gap: 16px !important; }
}

/* ========================================
   SECTION 4: FLEX UTILITIES
   ======================================== */

@media (max-width: 599px) {
    .flex-column-mobile { flex-direction: column !important; }
    .flex-row-mobile { flex-direction: row !important; }
    .flex-wrap-mobile { flex-wrap: wrap !important; }
    .align-center-mobile { align-items: center !important; }
    .align-start-mobile { align-items: flex-start !important; }
    .justify-center-mobile { justify-content: center !important; }
    .justify-start-mobile { justify-content: flex-start !important; }
}

@media (min-width: 600px) and (max-width: 959px) {
    .flex-column-tablet { flex-direction: column !important; }
    .flex-row-tablet { flex-direction: row !important; }
    .flex-wrap-tablet { flex-wrap: wrap !important; }
}

/* ========================================
   SECTION 5: WIDTH UTILITIES
   ======================================== */

@media (max-width: 599px) {
    .w-100-mobile { width: 100% !important; }
    .w-auto-mobile { width: auto !important; }
    .min-w-0-mobile { min-width: 0 !important; }
    .min-w-auto-mobile { min-width: auto !important; }
    .max-w-100-mobile { max-width: 100% !important; }
}

@media (min-width: 600px) and (max-width: 959px) {
    .w-100-tablet { width: 100% !important; }
    .w-auto-tablet { width: auto !important; }
}

/* ========================================
   SECTION 6: TEXT UTILITIES
   ======================================== */

@media (max-width: 599px) {
    .text-center-mobile { text-align: center !important; }
    .text-left-mobile { text-align: left !important; }
    .text-wrap-mobile { white-space: normal !important; }
    .text-nowrap-mobile { white-space: nowrap !important; }
    .text-truncate-mobile {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* ========================================
   SECTION 7: NAVIGATION RESPONSIVE
   ======================================== */

/* Hide desktop nav on mobile/tablet */
@media (max-width: 959px) {
    .nav-desktop-only {
        display: none !important;
    }
    
    .app-brand {
        left: 50%;
        transform: translateX(-50%);
        padding: 0 16px;
    }
    
    .mud-drawer.sidebar-drawer {
        display: none !important;
    }
    
    .mud-main-content.drawer-expanded,
    .mud-main-content.drawer-collapsed {
        margin-left: 0 !important;
    }
    
    .mud-appbar.drawer-expanded,
    .mud-appbar.drawer-collapsed {
        padding-left: 56px !important;
        padding-right: 56px !important;
    }
}

/* Show mobile nav only on mobile/tablet */
@media (min-width: 960px) {
    .nav-mobile-only {
        display: none !important;
    }
}

/* Mobile hamburger button positioning */
.mobile-nav-toggle {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1200;
}

/* Mobile Navigation Drawer Styles */

/* Hide drawer when closed - must be completely invisible */
.mobile-nav-drawer:not(.mud-drawer--open) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.mobile-nav-drawer.mud-drawer--open {
    display: flex !important;
    visibility: visible !important;
    background: var(--mud-palette-surface) !important;
    z-index: 1300 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.mobile-nav-drawer .mud-drawer-content {
    background: var(--mud-palette-surface) !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Mobile drawer user menu styling */
.mobile-drawer-user-menu {
    width: 100%;
}

.mobile-drawer-user-menu .mud-stack {
    width: 100%;
    justify-content: space-between !important;
}

.mobile-drawer-user-menu .mud-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
    font-size: 0.875rem !important;
}

/* Hide mobile drawer completely on desktop */
@media (min-width: 960px) {
    .mobile-nav-drawer,
    .mobile-nav-drawer.mud-drawer--open {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    .mobile-nav-drawer ~ .mud-overlay {
        display: none !important;
    }
}

/* Ensure the drawer overlay covers content properly on mobile/tablet */
@media (max-width: 959px) {
    .mud-overlay.mud-overlay-drawer {
        z-index: 1299 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
}

/* ========================================
   SECTION 8: LAYOUT RESPONSIVE
   ======================================== */

@media (max-width: 599px) {
    /* Reduce main content padding on mobile */
    .mud-main-content {
        padding: 12px !important;
    }
    
    /* Full-width containers */
    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .mud-main-content {
        padding: 16px !important;
    }
    
    .mud-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ========================================
   SECTION 9: ACTION BAR RESPONSIVE
   ======================================== */

@media (max-width: 599px) {
    .glass-action-bar .mud-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .glass-action-bar .mud-button-group {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .glass-action-bar .mud-button-group .mud-button {
        flex: 1;
        min-width: 0;
    }
    
    .glass-search-bar .mud-input-root {
        width: 100%;
    }
    
    .glass-search-bar .mud-select {
        width: 100% !important;
        min-width: unset !important;
    }
    
    /* Action bar buttons wrap on mobile */
    .action-bar-responsive {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .action-bar-buttons {
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    
    .action-bar-buttons .mud-button {
        flex: 1 1 auto !important;
        min-width: 120px !important;
    }
    
    /* Filter stack stacks vertically on mobile */
    .filter-stack-responsive {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .filter-stack-responsive .mud-select,
    .filter-stack-responsive .mud-input,
    .filter-stack-responsive .mud-button {
        width: 100% !important;
    }
}

/* ========================================
   SECTION 10: TOUCH OPTIMIZATION
   ======================================== */

/* Touch device detection */
@media (hover: none) and (pointer: coarse) {
    /* Minimum touch target size (44x44px per Apple/Google guidelines) */
    .mud-button,
    .mud-icon-button,
    .mud-fab,
    .mud-chip {
        min-height: 44px;
    }
    
    .mud-icon-button {
        min-width: 44px;
    }
    
    /* Disable hover effects on touch */
    .glass-card:hover,
    .glass-surface:hover,
    .interactive-card:hover {
        transform: none !important;
        box-shadow: inherit;
    }
    
    .feed-card:hover {
        transform: none !important;
    }
    
    /* Larger tap targets for nav items */
    .mud-nav-link {
        min-height: 48px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    
    /* Larger table row touch targets */
    .mud-table-row {
        min-height: 52px;
    }
    
    /* Form inputs */
    .mud-input-slot {
        min-height: 48px;
    }
    
    /* Chips */
    .mud-chip {
        min-height: 36px;
    }
}

/* Prevent text selection on interactive elements */
.mud-button,
.mud-icon-button,
.mud-chip,
.mud-nav-link {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling for touch */
.mud-main-content,
.conversation-history,
.calendar-scroll-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Active states for touch feedback */
@media (hover: none) and (pointer: coarse) {
    .mud-button:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
    
    .glass-card:active {
        opacity: 0.9;
    }
}