/* SehVarta responsive shell: one owner for header and social-page layout. */

@media (min-width: 761px) {
    nav.topbar.auth-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 500 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: 64px !important;
        align-items: center !important;
        gap: 18px !important;
        width: 100% !important;
        min-height: 64px !important;
        padding: 0 24px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    nav.topbar.auth-topbar .topbar-left {
        grid-column: 1 !important;
        display: grid !important;
        grid-template-columns: auto max-content minmax(220px, 480px) !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
    }
    nav.topbar.auth-topbar .app-logo {
        display: inline-flex !important;
        align-items: center !important;
        gap: 9px !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    nav.topbar.auth-topbar .app-logo::after {
        content: none !important;
        display: none !important;
    }
    nav.topbar.auth-topbar .brand-logo-img {
        width: 38px !important;
        height: 38px !important;
        object-fit: contain !important;
        flex: 0 0 38px !important;
    }
    nav.topbar.auth-topbar .app-logo .brand-name {
        display: inline !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }
    nav.topbar.auth-topbar .mobile-header-search,
    nav.topbar.auth-topbar .mobile-header-bell-direct,
    nav.topbar.auth-topbar .menu-toggle {
        display: none !important;
    }
    nav.topbar.auth-topbar .top-search {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 480px !important;
        margin: 0 !important;
    }
    nav.topbar.auth-topbar .top-search input {
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        box-sizing: border-box !important;
    }
    nav.topbar.auth-topbar .topbar-right {
        grid-column: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }
    nav.topbar.auth-topbar .account-menu {
        display: block !important;
    }
    nav.mobile-icon-nav.instagram-mobile-nav,
    .mobile-create-sheet,
    .mobile-side-menu,
    .drawer-overlay {
        display: none !important;
    }
    html, body {
        height: auto !important;
        overflow: visible !important;
        overflow-anchor: none !important;
    }
    .app-frame.social-app-frame,
    main.shell.app-shell {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    main.shell.app-shell {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }
    .social-page-shell,
    .fb-dashboard {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        align-items: start !important;
    }
    .fb-feed,
    .social-page-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 850px !important;
        height: auto !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }
}

/* Tablet has one dominant content column and an optional overlay nav. */
@media (min-width: 761px) and (max-width: 1199px) {
    nav.topbar.auth-topbar {
        gap: 10px !important;
        padding-inline: 16px !important;
    }
    nav.topbar.auth-topbar .topbar-left {
        grid-template-columns: 44px max-content minmax(180px, 1fr) !important;
        gap: 9px !important;
    }
    nav.topbar.auth-topbar .brand-name {
        display: none !important;
    }
    .social-page-shell,
    .fb-dashboard {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100%, 920px) !important;
        max-width: 920px !important;
        margin: 0 auto !important;
        padding: 18px 20px 56px !important;
        gap: 18px !important;
        box-sizing: border-box !important;
    }
    .social-page-shell > .fb-feed,
    .social-page-shell > .social-page-main {
        grid-column: 1 !important;
    }
    .social-page-shell > .fb-right-rail,
    .social-page-shell > .social-right-rail,
    .social-page-shell > .sv-left-sidebar {
        display: none !important;
    }
    body.sidebar-open .social-page-shell > .sv-left-sidebar {
        position: fixed !important;
        z-index: 900 !important;
        top: 76px !important;
        left: 16px !important;
        display: flex !important;
        width: min(300px, calc(100vw - 32px)) !important;
        max-height: calc(100vh - 92px) !important;
        overflow-y: auto !important;
    }
}

/* Desktop always uses the full navigation + feed + utility rail layout. */
@media (min-width: 1200px) {
    nav.topbar.auth-topbar {
        padding-inline: clamp(24px, 4vw, 64px) !important;
    }
    .social-page-shell,
    .fb-dashboard {
        display: grid !important;
        grid-template-columns: 260px minmax(0, 850px) minmax(300px, 340px) !important;
        justify-content: center !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 1510px !important;
        margin: 0 auto !important;
        padding: 24px 24px 64px !important;
        box-sizing: border-box !important;
    }
    .social-page-shell > .sv-left-sidebar {
        grid-column: 1 !important;
        display: flex !important;
    }
    .social-page-shell > .fb-feed,
    .social-page-shell > .social-page-main {
        grid-column: 2 !important;
    }
    .social-page-shell > .fb-right-rail,
    .social-page-shell > .social-right-rail {
        grid-column: 3 !important;
        display: flex !important;
    }
    .fb-left-rail, .social-left-rail,
    .fb-right-rail, .social-right-rail {
        position: sticky !important;
        top: 82px !important;
        align-self: start !important;
        height: auto !important;
        max-height: calc(100vh - 98px) !important;
        overflow-y: auto !important;
    }
}