/* 
 * Filename: /social/layout.css
 * Description: Layout with traditional browser scrolling and fixed sidebars.
 * VERSION 10.1: Header Styles, Badge Positioning, Sidebar Fixes.
 */

/* Hide the main browser scrollbar */
body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Sidebars will remain fixed. Their content can scroll, but the scrollbar UI is hidden. */
.left-sidebar,
.right-sidebar {
    overflow-y: auto;
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
    /* Hide scrollbar for IE and Edge */
    -ms-overflow-style: none;
}

/* Hide scrollbar for Chrome, Safari and Opera (SIDEBARS ONLY) */
.left-sidebar::-webkit-scrollbar,
.right-sidebar::-webkit-scrollbar {
    display: none;
}

/* General Header Styles */
.sf-page-header {
    max-width: 800px;
    margin: 0 auto 20px auto;
    padding: 0;
    justify-content: right;
    text-align: right;
    margin-top: 19px;
}

.sf-page-header .header-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #25091d; /* var(--brand-dark) */
}

.sf-page-header .header-subtitle {
    margin: 4px 0 0 0;
    color: #65676b; /* var(--text-sub) */
}

/* Card Positioning for Top-Right Status */
.social-post {
    position: relative; /* Context for absolute badge */
}

/* Status Badge Top Right */
.status-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 5;
    background: #e4e6eb; 
    color: #4b4c4f;
}

.status-badge.accepted, 
.status-badge.approved,
.status-badge.paid {
    background: #ecfdf5; 
    color: #047857;
}

.status-badge.unpaid {
    background: #fff8e1; 
    color: #b45309;
}

.status-badge.under_review {
    background: #f3e8ff; 
    color: #7e22ce;
}

.status-badge.disputed {
    background: #fdecec; 
    color: #c1121f;
}

/* Ensure header text doesn't overlap badge */
.post-header {
    padding-right: 100px; 
}

@media (min-width: 1200px) {
    .right-sidebar {
      
        height: 100%;
    }
}


.status-badge.unpaid {
    background: #fbc848;
    color: #2f0830;
    border: 1px solid #fde047;
}