/* =========================================================
   Vrienda v7.6 - LinkedIn Feed Style Layout
   Plaats als ALLERLAATSTE stylesheet.
   ========================================================= */

:root{
    --li-bg:#f4f2ee;
    --li-card:#ffffff;
    --li-line:#d9d2c7;
    --li-text:#191919;
    --li-muted:#666666;
    --li-orange:#ff7a18;

    --vrienda-shell-width:1128px;
    --vrienda-left-width:225px;
    --vrienda-feed-width:555px;
    --vrienda-right-width:300px;
    --vrienda-gap:16px;

    --radius:8px !important;
    --radius-lg:8px !important;
}

html,
body{
    background:var(--li-bg) !important;
    color:var(--li-text) !important;
    font-size:14px !important;
}

header,
.topbar,
.navbar,
.site-header,
.app-header{
    min-height:52px !important;
    height:52px !important;
    background:#fff !important;
    border-bottom:1px solid #ddd6cc !important;
    box-shadow:none !important;
}

header .container,
.topbar .container,
.navbar .container,
.site-header .container,
.app-header .container{
    max-width:var(--vrienda-shell-width) !important;
    height:52px !important;
    margin:0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
}

header input[type="search"],
.topbar input[type="search"],
.navbar input[type="search"],
.search-input,
input[name="q"]{
    height:34px !important;
    min-height:34px !important;
    max-width:360px !important;
    border-radius:6px !important;
    background:#f3f2ef !important;
    border:1px solid #d9d2c7 !important;
    font-size:13px !important;
}

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

.layout,
.dashboard,
.app-layout,
.social-layout,
.main-layout,
.page-grid,
.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;
    padding-top:14px !important;
}

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

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

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

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

.panel,
.card,
.box,
.widget,
.section,
.feed-card,
.post-card,
.krabbel-card,
.story-card,
.stories-card,
.activity-card,
.profile-card,
.group-card,
.side-card,
.trending-card,
.menu-card,
.nav-card,
.composer,
.create-post,
.post-composer,
.krabbel-composer,
.comment,
.comment-item,
.reply,
.krabbel-comment,
.sidebar-profile-card,
.vrienda-community-card{
    background:var(--li-card) !important;
    border:1px solid var(--li-line) !important;
    border-radius:8px !important;
    box-shadow:none !important;
}

.sidebar-profile-card{
    overflow:hidden !important;
    padding:0 !important;
    margin-bottom:8px !important;
}

.sidebar-profile-cover{
    height:56px !important;
    background:#dbeafe !important;
    border-radius:0 !important;
}

.sidebar-profile-body{
    padding:0 12px 14px !important;
    margin-top:-34px !important;
}

.sidebar-profile-avatar{
    width:68px !important;
    height:68px !important;
    min-width:68px !important;
    min-height:68px !important;
    max-width:68px !important;
    max-height:68px !important;
    border:3px solid #fff !important;
    border-radius:50% !important;
    object-fit:cover !important;
    background:#fff !important;
    box-shadow:none !important;
}

.sidebar-profile-card h3,
.sidebar-profile-name{
    margin:10px 0 3px !important;
    font-size:18px !important;
    line-height:1.12 !important;
    font-weight:700 !important;
    color:#191919 !important;
}

.sidebar-profile-card .muted,
.sidebar-profile-card .small,
.sidebar-profile-meta{
    font-size:12px !important;
    line-height:1.35 !important;
    color:#666 !important;
}

.sidebar-profile-status,
.sidebar-profile-bio,
.sidebar-profile-description,
.sidebar-profile-about,
.sidebar-profile-wiewatwaar,
.sidebar-profile-card p{
    display:none !important;
}

.sidebar-profile-respect{
    margin-top:10px !important;
    font-size:12.5px !important;
    color:#0a66c2 !important;
    font-weight:700 !important;
}

.sidebar-profile-button{
    margin-top:10px !important;
    min-height:30px !important;
    width:100% !important;
    border-radius:999px !important;
    background:#fff !important;
    border:1px solid #0a66c2 !important;
    color:#0a66c2 !important;
    font-weight:700 !important;
}

.sidebar .panel,
.sidebar .nav-card,
.leftbar .panel,
.left-sidebar .panel,
.menu-card{
    padding:6px 0 !important;
    margin-bottom:8px !important;
}

.sidebar a,
.leftbar a,
nav.sidebar a,
.menu a,
.side-menu a{
    min-height:30px !important;
    padding:6px 12px !important;
    border-radius:0 !important;
    font-size:13px !important;
    font-weight:600 !important;
    color:#404040 !important;
}

.sidebar a:hover,
.leftbar a:hover,
nav.sidebar a:hover,
.menu a:hover,
.side-menu a:hover{
    background:#f3f2ef !important;
    color:#191919 !important;
}

.composer,
.post-composer,
.krabbel-composer,
#postForm,
.create-post{
    padding:12px !important;
    margin-bottom:8px !important;
    border-radius:8px !important;
}

.composer textarea,
.post-composer textarea,
.krabbel-composer textarea,
#postForm textarea,
.create-post textarea{
    min-height:65px !important;
    background:#fff !important;
    border:1px solid #bfb8ad !important;
    padding:12px 16px !important;
    font-size:14px !important;
}

.feed-card,
.post-card,
.krabbel-card,
.vrienda-community-card{
    margin-bottom:8px !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:8px !important;
}

.post-header,
.krabbel-header,
.feed-card-header,
.vrienda-community-card-head,
.user-row,
.author-row{
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
}

.post-header img,
.krabbel-header img,
.feed-card-header img,
.user-row img,
.author-row img,
.avatar,
.post-avatar,
.user-avatar{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    border-radius:50% !important;
    object-fit:cover !important;
}

.post-header strong,
.krabbel-header strong,
.feed-card-header strong,
.user-row strong,
.author-row strong{
    font-size:14px !important;
    font-weight:700 !important;
    color:#191919 !important;
}

.post-header small,
.krabbel-header small,
.feed-card-header small,
.user-row small,
.author-row small,
.timestamp,
.date,
.time,
.meta{
    font-size:12px !important;
    color:#666 !important;
}

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

.feed-card > *:first-child,
.post-card > *:first-child,
.krabbel-card > *:first-child,
.vrienda-community-card > *:first-child{
    margin-top:10px !important;
}

.feed-card > *:last-child,
.post-card > *:last-child,
.krabbel-card > *:last-child,
.vrienda-community-card > *:last-child{
    margin-bottom:10px !important;
}

.feed-card,
.post-card,
.krabbel-card,
.vrienda-community-card{
    font-size:14px !important;
    line-height:1.42 !important;
    color:#191919 !important;
}

.feed-card p,
.post-card p,
.krabbel-card p,
.vrienda-community-card p,
.post-content{
    font-size:14px !important;
    line-height:1.45 !important;
}

.post-media,
.media-wrap,
.image-wrap{
    margin-left:0 !important;
    margin-right:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
}

.post-media img,
.media-wrap img,
.image-wrap img,
.feed-image,
.post-image,
.krabbel-image,
.vrienda-community-media{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.actions,
.post-actions,
.krabbel-actions,
.reactions,
.vrienda-reactions,
.vrienda-community-meta{
    border-top:1px solid #e5dfd6 !important;
    padding-top:6px !important;
    margin-top:6px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-around !important;
    gap:4px !important;
}

.reaction-trigger,
.like-button,
.comment-button,
.action-btn,
.actions button,
.post-actions button,
.krabbel-actions button{
    min-height:28px !important;
    padding:0 8px !important;
    border-radius:4px !important;
    border:0 !important;
    background:transparent !important;
    color:#666 !important;
    box-shadow:none !important;
    font-size:12.5px !important;
    font-weight:600 !important;
}

.reaction-trigger:hover,
.like-button:hover,
.comment-button:hover,
.action-btn:hover,
.actions button:hover,
.post-actions button:hover,
.krabbel-actions button:hover{
    background:#f3f2ef !important;
    color:#191919 !important;
}

.rightbar .panel,
.rightbar .widget,
.right-sidebar .panel,
.right-sidebar .widget,
.sidebar-right .panel,
.sidebar-right .widget,
.trending-card,
.side-card{
    padding:14px !important;
    margin-bottom:8px !important;
    border-radius:8px !important;
}

.rightbar h2,
.rightbar h3,
.right-sidebar h2,
.right-sidebar h3,
.sidebar-right h2,
.sidebar-right h3,
.trending-card h2,
.trending-card h3,
.side-card h2,
.side-card h3{
    font-size:16px !important;
    font-weight:700 !important;
    color:#191919 !important;
    margin:0 0 10px !important;
}

.vrienda-now-sidebar{
    padding:14px !important;
}

.vrienda-now-sidebar .member-card,
.vrienda-now-sidebar .online-card,
.vrienda-now-sidebar .user-card,
.vrienda-now-sidebar .now-card{
    border-radius:0 !important;
    border:0 !important;
    border-bottom:1px solid #e5dfd6 !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:8px 0 !important;
}

.stories,
.stories-card,
.story-card,
.activity,
.activity-card{
    padding:14px !important;
    margin-bottom:8px !important;
}

.welcome-banner,
.welcome-card,
.hero-card,
.hero{
    background:linear-gradient(135deg,#ff7a18,#fb923c) !important;
    border-radius:8px !important;
    padding:16px !important;
}

[class*="rounded"]:not(.avatar):not(img),
[class*="bubble"]:not(.avatar):not(img){
    border-radius:8px !important;
}

@media(max-width:1180px){
    :root{
        --vrienda-shell-width:812px;
        --vrienda-left-width:225px;
        --vrienda-feed-width:555px;
        --vrienda-right-width:0px;
    }

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

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

@media(max-width:900px){
    :root{
        --vrienda-shell-width:100%;
        --vrienda-feed-width:100%;
    }

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

    main,
    .main,
    .feed-column,
    .content,
    .main-content,
    .center,
    .timeline,
    .timeline-wrap,
    .feed,
    .posts,
    .krabbels{
        max-width:100% !important;
        width:100% !important;
    }

    .sidebar,
    .leftbar,
    .left-sidebar,
    .sidebar-left{
        width:100% !important;
        max-width:100% !important;
        position:static !important;
        max-height:none !important;
        overflow:visible !important;
    }
}