/* =========================================================
   Vrienda v7.6.2 - Homepage Style Repair
   Plaats als ALLERLAATSTE stylesheet, na v7.6.1.
   ========================================================= */

:root{
    --vrienda-home-shell:1180px;
    --vrienda-home-left:230px;
    --vrienda-home-main:560px;
    --vrienda-home-right:280px;
    --vrienda-home-gap:18px;
}

/* Header loskoppelen van brede layout overrides */
body header,
body .topbar,
body .navbar,
body .site-header,
body .app-header{
    height:58px !important;
    min-height:58px !important;
    background:#fff !important;
    border-bottom:1px solid #e4d8cb !important;
    box-shadow:0 1px 2px rgba(28,25,23,.04) !important;
}

body header .container,
body .topbar .container,
body .navbar .container,
body .site-header .container,
body .app-header .container{
    max-width:1180px !important;
    height:58px !important;
    padding:0 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    margin:0 auto !important;
}

body header input[type="search"],
body .topbar input[type="search"],
body .navbar input[type="search"],
body .search-input,
body input[name="q"]{
    width:420px !important;
    max-width:420px !important;
    height:38px !important;
    min-height:38px !important;
    border-radius:10px !important;
    background:#fffaf5 !important;
    border:1px solid #e4d8cb !important;
}

/* Homepage shell */
body .layout,
body .dashboard,
body .app-layout,
body .social-layout,
body .main-layout,
body .page-grid,
body .content-grid{
    max-width:var(--vrienda-home-shell) !important;
    width:100% !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:var(--vrienda-home-left) minmax(0,var(--vrienda-home-main)) var(--vrienda-home-right) !important;
    gap:var(--vrienda-home-gap) !important;
    align-items:start !important;
    justify-content:center !important;
    padding-top:18px !important;
    box-sizing:border-box !important;
}

/* Columns */
body .sidebar,
body .leftbar,
body .left-sidebar,
body .sidebar-left,
body .layout > aside:first-child,
body .dashboard > aside:first-child{
    width:var(--vrienda-home-left) !important;
    max-width:var(--vrienda-home-left) !important;
    min-width:0 !important;
}

body main,
body .main,
body .feed-column,
body .content,
body .main-content,
body .center,
body .timeline,
body .timeline-wrap,
body .feed,
body .posts,
body .krabbels{
    width:100% !important;
    max-width:var(--vrienda-home-main) !important;
    min-width:0 !important;
}

body .rightbar,
body .right-sidebar,
body .sidebar-right,
body .layout > aside:last-child,
body .dashboard > aside:last-child{
    width:var(--vrienda-home-right) !important;
    max-width:var(--vrienda-home-right) !important;
    min-width:0 !important;
}

/* Homepage cards */
body .panel,
body .card,
body .widget,
body .box,
body .section,
body .stories,
body .stories-card,
body .story-card,
body .activity,
body .activity-card,
body .welcome-banner,
body .welcome-card,
body .hero,
body .hero-card,
body .composer,
body #postForm,
body .feed-card,
body .post-card,
body .krabbel-card,
body .trending-card,
body .side-card,
body .nav-card{
    border-radius:12px !important;
    border:1px solid #e4d8cb !important;
    box-shadow:0 2px 8px rgba(28,25,23,.055) !important;
    background:#fff !important;
    box-sizing:border-box !important;
}

/* Stories/activity/welcome spacing */
body .stories,
body .stories-card,
body .story-card,
body .activity,
body .activity-card{
    padding:18px !important;
    margin-bottom:16px !important;
}

body .welcome-banner,
body .welcome-card,
body .hero,
body .hero-card{
    background:linear-gradient(135deg,#ff7a18,#fb923c) !important;
    color:#fff !important;
    padding:20px !important;
    margin-bottom:16px !important;
}

/* Registration/account block */
body .register-card,
body .auth-card,
body .signup-card{
    max-width:480px !important;
    margin:0 auto 18px !important;
    padding:22px !important;
    border-radius:12px !important;
    background:#fff !important;
    border:1px solid #e4d8cb !important;
    box-shadow:0 2px 8px rgba(28,25,23,.055) !important;
}

body input,
body textarea,
body select{
    border-radius:10px !important;
    border:1px solid #e4d8cb !important;
    background:#fffaf5 !important;
}

body button,
body .btn,
body .button,
body input[type="submit"]{
    border-radius:10px !important;
}

/* Sidebars */
body .sidebar .panel,
body .sidebar .nav-card,
body .leftbar .panel,
body .left-sidebar .panel,
body .trending-card,
body .side-card,
body .rightbar .panel,
body .rightbar .widget,
body .right-sidebar .panel,
body .right-sidebar .widget{
    width:100% !important;
    padding:16px !important;
    margin-bottom:14px !important;
}

body .sidebar a,
body .leftbar a,
body nav.sidebar a,
body .menu a,
body .side-menu a{
    min-height:30px !important;
    padding:7px 10px !important;
    border-radius:8px !important;
    font-size:13px !important;
}

/* Preserve avatar circles */
body .avatar,
body .profile-avatar,
body .sidebar-profile-avatar,
body .user-avatar,
body .post-avatar,
body .comment-avatar,
body .member-avatar,
body .story-avatar,
body img.avatar,
body img.profile-avatar,
body img.sidebar-profile-avatar,
body img.user-avatar,
body img.post-avatar,
body img.comment-avatar{
    border-radius:50% !important;
    object-fit:cover !important;
}

/* Desktop sticky */
@media(min-width:1051px){
    body .sidebar,
    body .leftbar,
    body .left-sidebar,
    body .sidebar-left,
    body .rightbar,
    body .right-sidebar,
    body .sidebar-right{
        position:sticky !important;
        top:78px !important;
        max-height:calc(100vh - 88px) !important;
        overflow:auto !important;
        scrollbar-width:thin;
    }
}

/* Medium: hide right rail, keep homepage balanced */
@media(max-width:1100px){
    :root{
        --vrienda-home-shell:820px;
        --vrienda-home-left:230px;
        --vrienda-home-main:560px;
        --vrienda-home-right:0px;
    }

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

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

/* Mobile */
@media(max-width:900px){
    body header .container,
    body .topbar .container,
    body .navbar .container{
        max-width:100% !important;
    }

    body header input[type="search"],
    body .topbar input[type="search"],
    body .navbar input[type="search"],
    body .search-input,
    body input[name="q"]{
        width:100% !important;
        max-width:100% !important;
    }

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

    body .sidebar,
    body .leftbar,
    body .left-sidebar,
    body .sidebar-left,
    body main,
    body .main,
    body .feed-column,
    body .content,
    body .main-content,
    body .center,
    body .timeline,
    body .timeline-wrap,
    body .feed,
    body .posts,
    body .krabbels{
        width:100% !important;
        max-width:100% !important;
        position:static !important;
        max-height:none !important;
        overflow:visible !important;
    }
}