/* =========================================================
   Vrienda v7.6.1 - Global Wide Layout
   Plaats als ALLERLAATSTE stylesheet, na v7.6.
   Doel:
   - global bredere layout
   - center feed minder smal
   - betere desktopverhouding
   - LinkedIn-achtig maar ruimer voor Vrienda
   ========================================================= */

:root{
    --vrienda-shell-width:1380px !important;
    --vrienda-left-width:285px !important;
    --vrienda-feed-width:720px !important;
    --vrienda-right-width:320px !important;
    --vrienda-gap:18px !important;
}

/* Global shell breedte */
html body .layout,
html body .dashboard,
html body .app-layout,
html body .social-layout,
html body .main-layout,
html body .page-grid,
html body .content-grid,
html body .content-wrap,
html body .main-wrap,
html body .page-wrap,
html body .page-wrapper,
html body .site-wrap,
html body .app-wrap,
html body .container{
    max-width:var(--vrienda-shell-width) !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}

/* Hoofdgrid desktop */
html body .layout,
html body .dashboard,
html body .app-layout,
html body .social-layout,
html body .main-layout,
html body .page-grid,
html body .content-grid{
    display:grid !important;
    grid-template-columns:
        var(--vrienda-left-width)
        minmax(0, var(--vrienda-feed-width))
        var(--vrienda-right-width) !important;
    gap:var(--vrienda-gap) !important;
    justify-content:center !important;
    align-items:start !important;
}

/* Linkerkolom */
html body .sidebar,
html body .leftbar,
html body .left-sidebar,
html body .sidebar-left,
html body .layout > aside:first-child,
html body .dashboard > aside:first-child{
    width:var(--vrienda-left-width) !important;
    max-width:var(--vrienda-left-width) !important;
    min-width:var(--vrienda-left-width) !important;
    box-sizing:border-box !important;
}

/* Middenkolom/feed */
html body main,
html body .main,
html body .feed-column,
html body .content,
html body .main-content,
html body .center,
html body .timeline,
html body .timeline-wrap,
html body .feed,
html body .posts,
html body .krabbels{
    width:100% !important;
    max-width:var(--vrienda-feed-width) !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

/* Rechterkolom */
html body .rightbar,
html body .right-sidebar,
html body .sidebar-right,
html body .layout > aside:last-child,
html body .dashboard > aside:last-child{
    width:var(--vrienda-right-width) !important;
    max-width:var(--vrienda-right-width) !important;
    min-width:var(--vrienda-right-width) !important;
    box-sizing:border-box !important;
}

/* Header volgt dezelfde brede shell */
html body header .container,
html body .topbar .container,
html body .navbar .container,
html body .site-header .container,
html body .app-header .container{
    max-width:var(--vrienda-shell-width) !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Feed onderdelen vullen middenkolom volledig */
html body .feed-card,
html body .post-card,
html body .krabbel-card,
html body .vrienda-community-card,
html body .composer,
html body .post-composer,
html body .krabbel-composer,
html body #postForm,
html body .create-post,
html body .stories,
html body .stories-card,
html body .story-card,
html body .activity,
html body .activity-card,
html body .welcome-banner,
html body .welcome-card,
html body .hero-card{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

/* Feed content iets ruimer */
html body .feed-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
html body .post-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
html body .krabbel-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
html body .vrienda-community-card > *:not(img):not(video):not(.post-media):not(.media-wrap){
    margin-left:16px !important;
    margin-right:16px !important;
}

/* Composer ruimer */
html body .composer,
html body .post-composer,
html body .krabbel-composer,
html body #postForm,
html body .create-post{
    padding:16px !important;
}

/* Media benut bredere feed */
html body .post-media img,
html body .media-wrap img,
html body .image-wrap img,
html body .feed-image,
html body .post-image,
html body .krabbel-image,
html body .vrienda-community-media{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
}

/* Sidebar cards vullen kolommen */
html body .sidebar .panel,
html body .sidebar .nav-card,
html body .sidebar-profile-card,
html body .leftbar .panel,
html body .left-sidebar .panel,
html body .rightbar .panel,
html body .rightbar .widget,
html body .right-sidebar .panel,
html body .right-sidebar .widget,
html body .sidebar-right .panel,
html body .sidebar-right .widget,
html body .trending-card,
html body .side-card{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

/* Profielkaart mag weer iets meer lucht krijgen */
html body .sidebar-profile-card h3,
html body .sidebar-profile-name{
    font-size:20px !important;
}

html body .sidebar-profile-avatar{
    width:78px !important;
    height:78px !important;
    min-width:78px !important;
    min-height:78px !important;
    max-width:78px !important;
    max-height:78px !important;
}

/* Desktop sticky blijft */
@media(min-width:1051px){
    html body .sidebar,
    html body .leftbar,
    html body .left-sidebar,
    html body .sidebar-left,
    html body .layout > aside:first-child,
    html body .dashboard > aside:first-child,
    html body .rightbar,
    html body .right-sidebar,
    html body .sidebar-right,
    html body .layout > aside:last-child,
    html body .dashboard > aside:last-child{
        position:sticky !important;
        top:66px !important;
        max-height:calc(100vh - 76px) !important;
        overflow:auto !important;
        scrollbar-width:thin;
    }
}

/* Middelgrote schermen: rechterkolom weg, feed blijft breed */
@media(max-width:1280px){
    :root{
        --vrienda-shell-width:1040px !important;
        --vrienda-left-width:285px !important;
        --vrienda-feed-width:720px !important;
        --vrienda-right-width:0px !important;
        --vrienda-gap:18px !important;
    }

    html body .layout,
    html body .dashboard,
    html body .app-layout,
    html body .social-layout,
    html body .main-layout,
    html body .page-grid,
    html body .content-grid{
        grid-template-columns:
            var(--vrienda-left-width)
            minmax(0, var(--vrienda-feed-width)) !important;
    }

    html body .rightbar,
    html body .right-sidebar,
    html body .sidebar-right,
    html body .layout > aside:last-child,
    html body .dashboard > aside:last-child{
        display:none !important;
    }
}

/* Tablet/mobile: alles full width */
@media(max-width:900px){
    :root{
        --vrienda-shell-width:100% !important;
        --vrienda-left-width:100% !important;
        --vrienda-feed-width:100% !important;
        --vrienda-right-width:0px !important;
        --vrienda-gap:10px !important;
    }

    html body .layout,
    html body .dashboard,
    html body .app-layout,
    html body .social-layout,
    html body .main-layout,
    html body .page-grid,
    html body .content-grid{
        display:block !important;
        max-width:100% !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }

    html body .sidebar,
    html body .leftbar,
    html body .left-sidebar,
    html body .sidebar-left,
    html body .layout > aside:first-child,
    html body .dashboard > aside:first-child,
    html body main,
    html body .main,
    html body .feed-column,
    html body .content,
    html body .main-content,
    html body .center,
    html body .timeline,
    html body .timeline-wrap,
    html body .feed,
    html body .posts,
    html body .krabbels{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    html body .rightbar,
    html body .right-sidebar,
    html body .sidebar-right{
        display:none !important;
    }

    html body .feed-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
    html body .post-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
    html body .krabbel-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
    html body .vrienda-community-card > *:not(img):not(video):not(.post-media):not(.media-wrap){
        margin-left:12px !important;
        margin-right:12px !important;
    }
}