/**
 * Responsive Layout Stylesheet
 * DestinyNet UBBThreads Forum
 *
 * This stylesheet implements a responsive 2-column layout:
 * - Desktop: Main Content (75%) + Sidebar (25%)
 * - Mobile: Main Content (100%) then Sidebar (100%) below
 *
 * IMPORTANT: This overrides Bootstrap 3.3.7 float-based grid with flexbox
 *
 * Version: 1.0
 * Created: 2025-12-29
 */

/* ==========================================================================
   Critical Override: Force all child columns to use flexbox, not float
   ========================================================================== */

/* Target the specific .row that contains our layout - with maximum specificity */
div.row,
body div.row,
html body div.row {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-wrap: wrap !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* Disable Bootstrap clearfix completely */
div.row::before,
div.row::after,
body div.row::before,
body div.row::after {
    content: none !important;
    display: none !important;
}

/* Force ALL direct children to not float - critical override */
div.row > *,
body div.row > * {
    float: none !important;
    display: block !important;
}

/* Prevent FOUC by ensuring flex items are visible */
div.row > div,
div.row > aside {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */

/* Override Bootstrap float-based grid */
.main-content,
div.main-content,
.col-xs-12.col-md-9.main-content {
    float: none !important;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
}

/* ==========================================================================
   Sidebar (Right Column)
   ========================================================================== */

/* Override Bootstrap float-based grid */
.sidebar-right,
aside.sidebar-right,
.col-xs-12.col-md-3.sidebar-right {
    float: none !important;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
}

/* ==========================================================================
   Desktop Layout (>= 992px)
   Main: 75% (9/12), Sidebar: 25% (3/12)
   ========================================================================== */

@media (min-width: 992px) {
    /* Main content - use all possible selectors for maximum specificity */
    div.main-content,
    div.col-xs-12.col-md-9.main-content,
    div.row > div.main-content,
    body div.row > div.main-content,
    div.row > div.col-xs-12.col-md-9.main-content {
        -webkit-box-flex: 0 !important;
        -webkit-flex: 0 0 75% !important;
        -ms-flex: 0 0 75% !important;
        flex: 0 0 75% !important;
        max-width: 75% !important;
        width: 75% !important;
        float: none !important;
        display: block !important;
    }

    /* Sidebar - use all possible selectors for maximum specificity */
    aside.sidebar-right,
    aside.col-xs-12.col-md-3.sidebar-right,
    div.row > aside.sidebar-right,
    body div.row > aside.sidebar-right,
    div.row > aside.col-xs-12.col-md-3.sidebar-right {
        -webkit-box-flex: 0 !important;
        -webkit-flex: 0 0 25% !important;
        -ms-flex: 0 0 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
        float: none !important;
        display: block !important;
    }
}

/* ==========================================================================
   Tablet Layout (768px - 991px)
   Main: 66.67% (8/12), Sidebar: 33.33% (4/12)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .main-content {
        flex: 0 0 66.67%;
        max-width: 66.67%;
    }

    .sidebar-right {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
}

/* ==========================================================================
   Mobile Layout (< 768px)
   Both Main and Sidebar: 100% (vertical stacking)
   Sidebar appears below main content
   ========================================================================== */

@media (max-width: 767px) {
    .main-content,
    .sidebar-right {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Sidebar comes after main content on mobile */
    .sidebar-right {
        margin-top: 2rem;
    }

    /* Optional: Make islands slightly smaller on mobile */
    .sidebar-right .island {
        font-size: 0.9rem;
    }

    /* Ensure tables are scrollable on mobile */
    .main-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* No padding/margin - but preserve flexbox behavior */
.sidebar-right.nopadmar {
    /* Only remove internal padding, keep layout padding */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Keep horizontal padding for flexbox layout */
}

/* Bootstrap col-* fallback for older browsers */
.col-xs-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    /* Hide sidebar when printing */
    .sidebar-right {
        display: none !important;
    }

    /* Main content takes full width */
    .main-content {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus visible for keyboard navigation */
.sidebar-right a:focus,
.main-content a:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* Use GPU acceleration for smoother transitions on mobile */
@media (max-width: 767px) {
    .row,
    .main-content,
    .sidebar-right {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ==========================================================================
   Compatibility Notes
   ========================================================================== */

/**
 * This CSS uses Flexbox which is supported by:
 * - Chrome 29+
 * - Firefox 28+
 * - Safari 9+
 * - Edge 12+
 * - iOS Safari 9+
 * - Android Browser 4.4+
 *
 * For older browsers, the layout will gracefully degrade to block display.
 */