/* =========================================================
   Vrienda v7.3 - Design System Cleanup
   Plaats als ALLERLAATSTE stylesheet.
   Doel:
   - overal consistente radius
   - oude bubble/mega-rounded styling normaliseren
   - feed, composer, comments, reactions, sidebars strakker
   - LinkedIn-achtige rust zonder layout opnieuw te bouwen
   ========================================================= */

:root{
    --radius:10px !important;
    --radius-sm:8px !important;
    --radius-md:10px !important;
    --radius-lg:10px !important;
    --radius-xl:12px !important;
    --radius-2xl:12px !important;

    --v-radius:10px !important;
    --v-radius-lg:10px !important;
    --v-radius-xl:12px !important;

    --vf-radius:10px !important;
    --vf-radius-lg:10px !important;

    --v6-radius:10px !important;
    --v6-radius-lg:10px !important;

    --ds-radius:10px;
    --ds-radius-soft:12px;
    --ds-line:#e5d9cc;
    --ds-card:#ffffff;
    --ds-soft:#fffaf5;
    --ds-text:#131313;
    --ds-muted:#6b7280;
    --ds-orange:#ff7a18;
}rgb(8, 5, 2)

/* ---------------------------------------------------------
   1. Global radius reset
   --------------------------------------------------------- */

.panel,
.card,
.box,
.widget,
.section,
.module,
.tile,
.surface,
.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,
.modal,
.dialog,
.dropdown,
.popover,
.toast,
.alert,
.notice,
.search-box,
.search-panel,
.profile-panel,
.sidebar-profile-card,
.vrienda-community-card,
.vrienda-discovery-section,
.vrienda-group-card,
.vrienda-group-post,
.vrienda-group-profile,
[class*="card"],
[class*="panel"]{
    border-radius:10px !important;
}

/* Hard reset for common old rounded utilities */
.rounded,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.radius-lg,
.radius-xl,
.radius-2xl,
.radius-3xl{
    border-radius:10px !important;
}

/* Hero/cover may be slightly softer, but not huge */
.hero,
.hero-card,
.cover-card,
.welcome-banner,
.welcome-card,
.banner,
.profile-cover,
.sidebar-profile-cover,
.vrienda-community-hero,
.vrienda-discovery-hero,
.vrienda-groups-hero,
.vrienda-media-hero{
    border-radius:12px !important;
}

/* Avatars always circular */
.avatar,
.profile-avatar,
.sidebar-profile-avatar,
.user-avatar,
.post-avatar,
.comment-avatar,
.member-avatar,
.story-avatar,
img.avatar,
img.profile-avatar,
img.sidebar-profile-avatar,
img.user-avatar,
img.post-avatar,
img.comment-avatar,
.post-header img,
.krabbel-header img,
.feed-card-header img,
.user-row img,
.author-row img{
    border-radius:50% !important;
}

/* Floating buttons remain circular */
.fab,
.floating-action,
.chat-fab,
.add-fab,
.float-btn,
.quick-action,
button.fab,
a.fab{
    border-radius:50% !important;
}

/* Pills can stay pill-shaped */
.badge,
.pill,
.tag,
.hashtag,
.mention,
.status-badge,
.online-badge,
.offline-badge,
.reaction-pill,
.count-pill{
    border-radius:999px !important;
}

/* ---------------------------------------------------------
   2. Layout shell consistency
   --------------------------------------------------------- */

body{
    background:#f3eee7 !important;
    color:var(--ds-text) !important;
}

.layout,
.dashboard,
.app-layout,
.social-layout,
.main-layout,
.page-grid,
.content-grid{
    gap:16px !important;
    align-items:flex-start !important;
}

.container,
.wrapper,
.page,
.page-wrap,
.page-wrapper,
.site,
.site-wrap,
.app,
.app-wrap,
.content-wrap,
.main-wrap{
    box-sizing:border-box !important;
}

/* ---------------------------------------------------------
   3. Card visual cleanup
   --------------------------------------------------------- */

.panel,
.card,
.widget,
.box,
.section,
.feed-card,
.post-card,
.krabbel-card,
.story-card,
.activity-card,
.profile-card,
.group-card,
.side-card,
.trending-card,
.menu-card,
.nav-card,
.sidebar-profile-card,
.vrienda-community-card{
    background:var(--ds-card) !important;
    border:1px solid var(--ds-line) !important;
    box-shadow:0 2px 8px rgba(28,25,23,.055) !important;
}

.feed-card,
.post-card,
.krabbel-card,
.vrienda-community-card{
    overflow:hidden !important;
    margin-bottom:12px !important;
    padding:0 !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
}

/* Remove accidental tall layouts */
.feed-card,
.post-card,
.krabbel-card,
.vrienda-community-card,
.feed-card > *,
.post-card > *,
.krabbel-card > *,
.vrienda-community-card > *,
.comments,
.comment-list,
.krabbel-comments,
.reply-list,
.vrienda-comment-replies{
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
}

/* Inner feed spacing */
.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:14px !important;
    margin-right:14px !important;
}

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

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

/* ---------------------------------------------------------
   4. Header / post identity
   --------------------------------------------------------- */

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

.post-header strong,
.krabbel-header strong,
.feed-card-header strong,
.user-row strong,
.author-row strong{
    font-size:14px !important;
    font-weight:800 !important;
    color:var(--ds-text) !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:var(--ds-muted) !important;
    font-weight:550 !important;
}

/* ---------------------------------------------------------
   5. Typography cleanup
   --------------------------------------------------------- */

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

.feed-card p,
.post-card p,
.krabbel-card p,
.vrienda-community-card p,
.feed-card .post-content,
.post-card .post-content,
.krabbel-card .post-content,
.vrienda-community-card .post-content{
    font-size:14px !important;
    line-height:1.5 !important;
    font-weight:450 !important;
    color:var(--ds-text) !important;
}

h1,h2,h3,h4{
    color:var(--ds-text) !important;
}

.muted,
.small,
.help,
.hint{
    color:var(--ds-muted) !important;
}

/* ---------------------------------------------------------
   6. Forms / composer cleanup
   --------------------------------------------------------- */

input,
textarea,
select,
.form-control,
.input,
.search-input,
.composer textarea,
.post-composer textarea,
.krabbel-composer textarea,
#postForm textarea,
#create-post textarea{
    border-radius:10px !important;
    border:1px solid var(--ds-line) !important;
    background:var(--ds-soft) !important;
    box-shadow:none !important;
}

input:focus,
textarea:focus,
select:focus{
    outline:0 !important;
    border-color:#fdba74 !important;
    box-shadow:0 0 0 3px rgba(255,122,24,.12) !important;
}

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

.composer textarea,
.post-composer textarea,
.krabbel-composer textarea,
#postForm textarea,
#create-post textarea{
    min-height:76px !important;
    padding:11px 13px !important;
    resize:vertical !important;
}

/* ---------------------------------------------------------
   7. Buttons / actions cleanup
   --------------------------------------------------------- */

button,
.btn,
.button,
input[type="submit"],
a.btn,
.action-btn,
.like-button,
.comment-button,
.reaction-trigger{
    border-radius:10px !important;
    font-weight:800 !important;
}

.actions,
.post-actions,
.krabbel-actions,
.reactions,
.vrienda-reactions,
.vrienda-community-meta{
    border-top:1px solid var(--ds-line) !important;
    padding-top:8px !important;
    margin-top:8px !important;
    gap:6px !important;
}

.reaction-trigger,
.like-button,
.comment-button,
.action-btn,
.actions button,
.post-actions button,
.krabbel-actions button{
    min-height:30px !important;
    padding:0 10px !important;
    font-size:12.5px !important;
    background:#fff !important;
    color:var(--ds-muted) !important;
    border:1px solid var(--ds-line) !important;
    box-shadow:none !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:#fff7ed !important;
    color:#9a3412 !important;
}

/* Primary orange buttons are still recognizable */
.btn-primary,
.button-primary,
button.primary,
input[type="submit"],
.submit-btn,
.share-btn,
.post-submit,
#postForm button[type="submit"]{
    background:var(--ds-orange) !important;
    color:#fff !important;
    border-color:var(--ds-orange) !important;
}

/* ---------------------------------------------------------
   8. Comments / replies cleanup
   --------------------------------------------------------- */

.comment,
.comment-item,
.reply,
.krabbel-comment,
.vrienda-comment-reply,
.vrienda-reply-bubble{
    background:var(--ds-soft) !important;
    border:1px solid var(--ds-line) !important;
    border-radius:10px !important;
    padding:9px 10px !important;
    margin-top:7px !important;
}

.comment-form,
.reply-form,
.krabbel-comment-form,
.post-comment-form,
.vrienda-reply-form{
    margin-top:8px !important;
    min-height:0 !important;
}

.comment-form input,
.comment-form textarea,
.reply-form input,
.reply-form textarea,
.krabbel-comment-form input,
.krabbel-comment-form textarea{
    border-radius:10px !important;
    min-height:36px !important;
}

/* ---------------------------------------------------------
   9. Media cleanup
   --------------------------------------------------------- */

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

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

/* Direct post media should be edge-to-edge, but not avatars */
.feed-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
.post-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
.krabbel-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar){
    border-radius:0 !important;
}

/* Stickers/GIFs should not become giant cards */
.feed-card img[src*="gif"],
.post-card img[src*="gif"],
.krabbel-card img[src*="gif"],
.feed-card img[src*="sticker"],
.post-card img[src*="sticker"],
.krabbel-card img[src*="sticker"],
.feed-card img[src*="emoji"],
.post-card img[src*="emoji"],
.krabbel-card img[src*="emoji"],
.feed-card img[src*="giphy"],
.post-card img[src*="giphy"],
.krabbel-card img[src*="giphy"]{
    width:auto !important;
    max-width:220px !important;
    max-height:220px !important;
    border-radius:10px !important;
    margin-left:14px !important;
    margin-right:14px !important;
}

/* ---------------------------------------------------------
   10. Sidebar cleanup
   --------------------------------------------------------- */

.sidebar .panel,
.sidebar .nav-card,
.sidebar-profile-card,
.leftbar .panel,
.left-sidebar .panel,
.trending-card,
.side-card,
.menu-card,
.widget{
    border-radius:10px !important;
}

.sidebar a,
.leftbar a,
nav.sidebar a,
.menu a,
.side-menu a{
    border-radius:8px !important;
    min-height:34px !important;
    padding:8px 12px !important;
    font-size:13.5px !important;
    font-weight:750 !important;
}

.sidebar-profile-card{
    overflow:hidden !important;
}

.sidebar-profile-cover{
    border-radius:0 !important;
}

/* ---------------------------------------------------------
   11. Top modules / stories / activity
   --------------------------------------------------------- */

.stories,
.stories-card,
.story-card,
.activity,
.activity-card{
    border-radius:10px !important;
    padding:14px !important;
    margin-bottom:12px !important;
}

.story-item,
.story-bubble{
    border-radius:10px !important;
}

.story-avatar,
.story-ring,
.story-thumb{
    border-radius:50% !important;
}

/* ---------------------------------------------------------
   12. Old inline/legacy clamps
   --------------------------------------------------------- */

/* Any legacy block with huge radius in feed/sidebar gets normalized */
.feed-card [style*="border-radius"],
.post-card [style*="border-radius"],
.krabbel-card [style*="border-radius"],
.sidebar [style*="border-radius"],
.leftbar [style*="border-radius"],
.rightbar [style*="border-radius"]{
    border-radius:10px !important;
}

/* But avatars inside inline-styled blocks remain round */
.feed-card img[style*="border-radius"],
.post-card img[style*="border-radius"],
.krabbel-card img[style*="border-radius"],
.sidebar img[style*="border-radius"]{
    border-radius:50% !important;
}

/* ---------------------------------------------------------
   13. Mobile consistency
   --------------------------------------------------------- */

@media(max-width:900px){
    .panel,
    .card,
    .box,
    .widget,
    .section,
    .feed-card,
    .post-card,
    .krabbel-card,
    .story-card,
    .activity-card,
    .composer,
    .sidebar-profile-card{
        border-radius:10px !important;
    }

    .feed-card,
    .post-card,
    .krabbel-card{
        margin-bottom:10px !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){
        margin-left:12px !important;
        margin-right:12px !important;
    }
}

/* ---------------------------------------------------------
   14. Debug visual consistency helper
   --------------------------------------------------------- */

/* If something still looks too round, this catches common custom Vrienda classes */
[class*="vrienda-"]:not(.vrienda-reply-avatar):not(.vrienda-profile-avatar):not(.vrienda-avatar),
[class*="krabbel-"]:not(img):not(.krabbel-avatar),
[class*="profile-"]:not(img):not(.profile-avatar):not(.profile-photo):not(.profile-cover),
[class*="community-"]:not(img):not(.community-avatar){
    border-radius:min(var(--ds-radius), 10px) !important;
}