/* =========================================================
   SehVarta Premium Theme — Phase 3: Final layout fix
   - Removes the tablet-only "static right rail" exception from
     Phase 2 that made the sidebar scroll away between 761-980px.
   - Sticky now applies uniformly from 761px upward.
   - Increases container/feed width per spec (280 / 760-850 / 340).
   - Fixes mobile header overflow (search pushing icons off-screen).
   ========================================================= */

/* ---------- 1. Unified sticky 3-column grid (761px and up) ---------- */
@media (min-width: 761px) {
    .social-page-shell,
    .fb-dashboard {
        display: grid !important;
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(280px, 340px) !important;
        gap: 22px !important;
        align-items: start !important;
        max-width: 1760px !important;
        margin: 0 auto !important;
        padding: 20px 24px 60px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .fb-left-rail, .social-left-rail,
    .fb-right-rail, .social-right-rail {
        position: sticky !important;
        top: 88px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        max-height: calc(100vh - 104px) !important;
        overflow-y: auto !important;
        grid-column: auto !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        width: auto !important;
    }
    .fb-feed {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 850px !important;
        min-width: 0;
        margin: 0 auto !important;
        padding: 0 !important;
    }
}

/* Narrower tablet: shrink side columns further but keep sticky (no more static row) */
@media (min-width: 761px) and (max-width: 1100px) {
    .social-page-shell,
    .fb-dashboard {
        grid-template-columns: 210px minmax(0, 1fr) 260px !important;
        gap: 16px !important;
        padding: 16px !important;
    }
}

/* ---------- 2. Mobile header: prevent search from pushing icons off-screen ---------- */
@media (max-width: 760px) {
    .auth-topbar {
        display: flex !important;
        /* explicit row: 20-feed.css has an unscoped ".topbar{flex-direction:
           column}" rule meant for a reels-page layout that (since .topbar is
           also one of this element's classes) was leaking onto the site
           header here, stacking it into two rows instead of one. */
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        padding: 8px 10px !important;
    }
    .auth-topbar .topbar-left {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
    }
    .auth-topbar .app-logo {
        flex: 0 0 auto !important;
    }
    .auth-topbar .top-search {
        display: none !important; /* the desktop search form; mobile uses .mobile-header-search */
    }
    .auth-topbar .mobile-header-search {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 4px !important;
    }
    .auth-topbar .mobile-header-search input {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .auth-topbar .topbar-right {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        margin-left: 0 !important;
    }
    .auth-topbar .topbar-right > *:not(.mobile-header-search) {
        flex: 0 0 auto !important;
    }
    /* Hide the desktop nav row entirely on mobile so it can't force overflow */
    .auth-topbar .desktop-nav,
    .auth-topbar .app-nav.desktop-nav {
        display: none !important;
    }
    body, html {
        max-width: 100vw;
        overflow-x: hidden;
    }
}