/**
 * PIONEER - Community Page Alignment Fixes
 * Fixes misalignment issues on mobile phones and iPads
 *
 * KEY ISSUES ADDRESSED:
 * 1. Content not aligned with navigation bars
 * 2. Sidebar/main content positioning conflicts
 * 3. Composer overlapping with bottom navigation
 * 4. Horizontal alignment issues
 */

/* ============================================================================
   GLOBAL RESETS - Apply to all screen sizes
   ============================================================================ */

/* Ensure all community elements use border-box sizing */
.dc-layout,
.dc-layout * {
    box-sizing: border-box !important;
}


/* ============================================================================
   TABLETS (601px - 1024px) - iPad ALIGNMENT FIXES
   ============================================================================ */

@media (min-width: 601px) and (max-width: 1024px) {
    /* Main layout container - Proper alignment */
    .dc-layout {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 60px !important;
        width: 100vw !important;
        height: calc(100vh - 120px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        overflow: hidden !important;
    }

    /* Sidebar - Fixed width on left */
    .dc-sidebar {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 1rem !important;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 20px)) !important;
        background: rgba(10, 22, 40, 0.98) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0 !important;
    }

    /* Main content - Flex to fill remaining space */
    .dc-main {
        position: relative !important;
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: #0f1419 !important;
    }

    /* Main header */
    .dc-main-header {
        position: relative !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        margin: 0 !important;
        padding: 0 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        background: rgba(10, 22, 40, 0.98) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        flex-shrink: 0 !important;
    }

    /* Feed area - Scrollable content */
    .dc-feed,
    .dm-messages {
        position: relative !important;
        flex: 1 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem !important;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 20px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        background: #0f1419 !important;
    }

    /* Composer - Fixed at bottom, accounting for sidebar */
    .dc-inline-composer {
        position: fixed !important;
        bottom: 60px !important;
        left: 240px !important;
        right: 0 !important;
        width: calc(100vw - 240px) !important;
        height: auto !important;
        margin: 0 !important;
        padding: 1rem !important;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 20px)) !important;
        background: rgba(10, 22, 40, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        z-index: 500 !important;
    }

    /* Composer row */
    .dc-ic-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 0.75rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Hide members sidebar on tablets */
    .dc-right,
    .dc-members-sidebar {
        display: none !important;
    }

    /* Hide hamburger menu on tablets (sidebar always visible) */
    .dc-hamburger-btn {
        display: none !important;
    }
}

/* ============================================================================
   DESKTOP (> 1024px) - Ensure no conflicts
   ============================================================================ */

@media (min-width: 1025px) {
    /* Let default desktop styles take over */
    .dc-layout {
        position: relative !important;
    }

    .dc-sidebar {
        position: relative !important;
    }

    .dc-main {
        position: relative !important;
    }

    .dc-inline-composer {
        position: relative !important;
    }
}

/* ============================================================================
   UNIVERSAL FIXES - All screen sizes
   ============================================================================ */

/* Prevent horizontal scrolling */
body,
html,
.dc-layout,
.dc-main,
.dc-feed,
.dm-messages {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Ensure proper scrolling behavior */
.dc-feed,
.dm-messages,
.dc-sidebar {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Remove any margin/padding that might cause misalignment */
.dc-layout {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure text doesn't cause overflow */
.post-text,
.dm-msg-body,
.dc-channel-name,
.dc-dm-item-name {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Fix any potential z-index conflicts */
.dc-sidebar {
    z-index: 1000 !important;
}

.dc-mobile-overlay {
    z-index: 999 !important;
}

.dc-inline-composer {
    z-index: 500 !important;
}

.dc-main {
    z-index: 100 !important;
}