/* Purple panel for notification section */
.purple-panel {
    padding: 20px;
    background: rgba(155,89,182,0.08); /* purple with opacity */
    border-left: 4px solid #9b59b6;
    border-radius: 6px;
    margin-bottom: 15px;
}
/* Blue panel for password change section */
.blue-panel {
    padding: 20px;
    background: rgba(30,136,229,0.08); /* blue with opacity */
    border-left: 4px solid #1e88e5;
    border-radius: 6px;
    margin-bottom: 15px;
}
/* Reset & Base */
@import url('post-card.css');
@import url('auth.css');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure full-height layout so footer can stick to bottom */
html { height: 100%; }
body { height: 100%;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background:#f7fff1;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Prevent any injected inline styles (e.g. from tunnelling proxies) from showing a debug border */
    border: none !important;
    margin: 0 !important;
}

/* Ensure the main container directly under body grows to push footer down (fixed selector) */
body > .main-container { flex: 1 0 auto; }

a {
    color: #5a9a3c;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Header */
.header-container {
    background: #fff;
    border-bottom: 3px solid #5a9a3c;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Keep link colors consistent whether JS runs or not */
.menu-links a, .header-nav a {
    color: #666;
}
.menu-links a:hover, .header-nav a:hover {
    color: #5a9a3c;
}
/* Removed special-case that forced inline-styled links to inherit color; inline styles should be honored (e.g., admin link orange). */
/* Make premium/events buttons visually neutral by default to avoid color shifts in wrappers */
.premium-btn, .events-btn {
    background: #ffca28 !important; /* keep original look */
    color: #111 !important;
}
.user-menu a {
    color: inherit !important;
}

/* Premium CTA (mobile & in-app only) */
.logo-with-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto; /* avoid wrapping / shrinking under the logo */
    white-space: nowrap; /* prevent logo and CTA from wrapping onto separate lines */
}
.header-content { flex-wrap: nowrap; }

/* Celebration banner (dynamic colors injected via CSP nonce'd <style> in header.php) */
.celebration-banner-outer { padding: 6px 0; }
.celebration-banner-content {
    width: 100%;
    padding: 12px 10px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: pre-wrap;
}

.premium-btn {
    display: none; /* hidden by default (desktop) */
    background: #ffca28;
    color: #111;
    padding: 4px 8px; /* smaller */
    border-radius: 5px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    margin-left: 6px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.premium-btn:hover {
    background-color: #f7b500;
    border-radius: 5px;
}

/* Events quick CTA (mobile & in-app when user is premium) */
.events-btn {
    display: none; /* hidden by default on desktop */
    background: #553b08;
    color: #fff;
    padding: 4px 8px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    margin-left: 6px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.events-btn:hover { background: #553b08; }

/* Show on small screens (mobile) */
@media (max-width: 900px) {
    .header-cta { display: flex; margin-left: auto; }
    .premium-btn { display: inline-flex; }
    .events-btn { display: inline-flex; }
}

/* Additional mobile responsive fixes to keep header CTAs and composer in-flow */
@media (max-width: 900px) {
    .header-container {
        display: block;
    }
    .header-content {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px 12px;
    }
    .logo-with-cta {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 4px;
    }
    .header-nav {
        display: grid !important;
        grid-template-columns: minmax(120px, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        gap: 6px !important;
        align-items: center !important;
        width: 100% !important;
        overflow-x: visible !important;
        -webkit-overflow-scrolling: auto !important;
    }
    .header-search {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        width: 100% !important;
        min-width: 120px !important;
        max-width: 100% !important;
        order: initial !important;
    }
    .header-cta {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        justify-self: end;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        order: initial !important;
    }
    .menu-links {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        justify-self: start;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 6px !important;
        order: initial !important;
    }
    .header-nav::-webkit-scrollbar { display: none; }
    .header-nav { scrollbar-width: none; }

    .premium-btn, .events-btn {
        display: inline-flex !important;
        height: 28px;
        padding: 2px 8px;
        font-size: 12px;
        align-items: center;
        white-space: nowrap;
        min-width: 56px;
        text-align: center;
        gap: 6px;
    }

    /* Ensure main content and composer take full width and stay boxed */
    .post-form-container, .tag-navigation, .content-item, .content-container {
        box-sizing: border-box;
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Tighten tag navigation spacing on small screens */
    .tag-navigation { padding: 8px 10px; gap: 6px; }

    /* Post header/meta alignment to avoid stacked misalignment */
    .post-feed-header, .post-feed-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .post-feed-meta { font-size: 12px; color: #666; }

    /* Edited marker and hash-tag text should wrap correctly */
    .post-card-content .muted.small {
        display: block;
        margin-top: 4px;
        white-space: normal;
        word-break: break-word;
        color: #666;
        font-size: 12px;
    }

    .post-card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
    }

    .post-card-tags .post-tag-link {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        padding: 0 8px;
        line-height: 1.5;
    }

    .post-card-edited {
        color: #666;
        font-size: 12px;
        font-weight: 500;
        margin-left: 8px;
        white-space: nowrap;
    }

    /* Keep logo on the top row and mobile CTAs on the second row */
    .logo-with-cta {
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        order: 1; /* logo first */
        padding-bottom: 4px;
    }
    .logo-with-cta .premium-btn, .logo-with-cta .events-btn {
        margin-left: 0;
    }

    .header-content {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
        flex-direction: column;
        align-items: stretch;
    }
    .header-nav {
        order: 2; /* nav (search + CTAs) appears after logo on mobile */
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 8px;
        align-items: center;
        margin-top: 6px;
    }

    .header-nav .header-search {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        min-width: 60px;
        width: 100%;
    }
    .header-nav .header-cta {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        display: flex;
        gap: 4px;
        align-items: center;
        justify-self: end;
    }

    /* Make the search input slightly more compact inside header nav */
    .header-nav .header-search .search-bar,
    .header-search .search-bar {
        padding: 4px 12px !important;
        height: 28px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Force main menu links onto their own row so they don't push CTAs out */
    .header-nav .menu-links {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        flex: 1 1 100%;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        margin-top: 6px;
    }

    /* Composer textarea full width */
    .post-form-container textarea, .post-form textarea {
        width: 100%;
        box-sizing: border-box;
        min-height: 86px;
    }
}

/* If needed, force show inside app regardless of viewport */
.in-app .header-cta { display: flex !important; }
.in-app .premium-btn { display: inline-flex !important; }
.in-app .events-btn { display: inline-flex !important; }


/* Notification tabs (compact, single-row no scrollbar) */
.tab-links { display:flex; gap:2px; border-bottom:1px solid #e0e0e0; overflow-x:visible; flex-wrap:nowrap; justify-content:space-between; align-items:center; padding:4px 2px; }
.tab-link { flex:0 0 auto; padding:2px 3px; text-align:center; color:#666; font-size:10px; font-weight:500; text-decoration:none; border-bottom:3px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:2px; white-space:nowrap; border-radius:6px; }
.tab-icon { flex-shrink:0; font-size:12px; line-height:1; }
.tab-label { white-space:nowrap; }
.tab-link:hover { color:#5a9a3c; background: rgba(90,154,60,0.04); }
.tab-link.active { color:#5a9a3c; font-weight:600; border-bottom-color:#5a9a3c; background: rgba(90,154,60,0.06); }
.tab-count { background:#5a9a3c;color:#fff;padding:1px 5px;border-radius:999px;font-size:10px;font-weight:700;margin-left:4px; min-width:16px; display:inline-block; text-align:center; line-height:1.5; box-shadow:0 0 0 2px #fff; }

/* Tabs are single-line and shrink-to-fit; avoid horizontal scroll */
/* removed custom scrollbar to prevent horizontal scrolling visual artifacts */



@media (max-width:480px) {
    .tab-link { padding:1px 6px; font-size:9px; min-width:18px; }
    .tab-links { gap:3px; padding:3px 6px; }
}

/* Make Tümü compact */
.tab-links a:first-child { margin-left:0; padding-left:4px; padding-right:4px; }


/* Unread 'YENİ' badge */
.notification-card.unread .badge-new { background: #ffd700; color:#333; padding:2px 6px; border-radius:4px; font-weight:700; margin-left:8px; font-size:11px; }


.header-content {
    max-width: 1100px; /* match main-container width */
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ensure tag navigation and post form match content column width */
.tag-navigation,
.post-form-container {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Tag label helper (replaces the previous 'tümü' link)
   Reuse Paylaş button visual style so the label looks like a small action button */
.tag-navigation > .tag-label {
    background: #5a9a3c !important; /* same as .btn-post */
    color: #fff !important; /* white text like .btn-post */
    font-weight: 700;
    margin-right: 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px; /* match btn-post padding */
    border-radius: 3px; /* match btn-post */
    line-height: 1;
    box-shadow: none;
    border: none;
}
.tag-navigation > .tag-label:focus, .tag-navigation > .tag-label:hover { background: #553b08 !important; }

/* Defensive layout overrides removed — use responsive grid layout defined later instead */
.sidebar { box-sizing: border-box; }

.logo {
    font-size: 20px; /* tuned for alignment */
    font-weight: 700;
    color: #5a9a3c;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center; /* vertically center icon + text */
    gap: 8px;
}

.logo img, .site-logo {
    height: 20px; /* match cap height of text */
    width: auto;
    display: inline-block;
    margin: 0;
    image-rendering: optimizeQuality;
    align-self: flex-start;
}

.logo span {
    display: inline-block;
    line-height: 1; /* ensure tight vertical centering */
    margin-top: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-version {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.75;
    margin-top: 2px;
}

.logo:hover {
    text-decoration: none;
}

.header-nav {
    display: flex;
    gap: 8px; /* tighten spacing for a cleaner look */
    align-items: center;
    flex-wrap: nowrap;
}

/* keep the search box from stretching when flexbox is used */
.header-search { flex: 0 0 auto; }

.header-nav a {
    color: #666;
    font-size: 13px;
    font-weight: normal;
}

/* Desktop menu: keep in one line */
.menu-links {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
}

.header-nav a:hover {
    color: #5a9a3c;
}

.header-notif-badge {
    display: inline-block;
    background: #5a9a3c !important;
    color: #fff !important;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 2px;
    vertical-align: middle;
    line-height: 1;
}

.header-nav a {
    white-space: nowrap;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    object-fit: cover;
}

/* Search Bar */
.search-bar {
    background: #f9f9f9;
    border: 1px solid #ddd;
    height: 28px; /* match header line height for vertical alignment */
    padding: 4px 12px; /* reduce vertical padding so content centers */
    box-sizing: border-box;
    border-radius: 4px;
    width: 180px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
}

/* On smaller screens, allow search to expand */
@media (max-width: 1000px) {
    .search-bar { width: 100%; }
}

/* CAPTCHA hint */
.captcha-instruction {
    font-weight: 700;
}
.captcha-hint {
    color: #666;
    font-size: 11px;
    margin-top: 6px;
}
.captcha-refresh {
    font-size: 12px;
    color: #553b08;
    text-decoration: none;
}
.captcha-refresh:hover { text-decoration: underline; }
.search-bar:focus {
    outline: none;
    border-color: #5a9a3c;
    background: #fff;
}

/* Tabs (no JS) */
.tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
    padding: 10px 15px;
    margin-bottom: 10px;
}

.tab {
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 12px;
    color: #333;
}

.tab:hover {
    background: #f0f0f0;
    text-decoration: none;
}

.tab-active {
    background: #5a9a3c;
    color: #fff !important;
}

/* Search Page */
.results-header {
    padding: 15px 20px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.tag-cloud {
    padding: 10px;
}

/* Main Container - Centered (responsive grid) */
.main-container {
    /* constrain max width to match sidebar + center column so we don’t leave a huge blank gap */
    max-width: 880px; /* 160 + 720 + 160 */
    margin: 0 auto;
    padding: 0 12px; /* smaller horizontal padding */
    display: grid;
    grid-template-columns: 160px minmax(500px, 1fr) 160px;
    gap: 12px;                      /* tighter gap between columns */
    box-sizing: border-box;
}

/* remove default sidebar border to avoid vertical line even when JS disabled */
.sidebar { border: none; }


/* Page-specific narrow/wide variants */
.main-container.post-new {
    /* Keep the overall center consistent but allow a slightly wider sidebar for the "new post" flow */
    grid-template-columns: 220px minmax(560px, 1fr) 220px;
    max-width: 1200px;
}
.main-container.post-new .sidebar-left,
.main-container.post-new .sidebar-right {
    padding: 20px;
    background: #fff;
    border-color: #e0e0e0;
}
.main-container.post-new .sidebar-left { border-right: 1px solid #e0e0e0; }
.main-container.post-new .sidebar-right { border-left: 1px solid #e0e0e0; }
.main-container.post-new .content-area { max-width: 600px; }

/* Groups page specific layout — enforce three-column with center fixed to 560px */
.main-container.groups-layout {
    grid-template-columns: 160px 520px 160px !important;
    max-width: 960px; /* allow gutters */
}

/* Ensure the centered content uses the narrow helper and enforce strict width */
.content-area.narrow { max-width: 520px; width: 520px; }

/* Strong enforcement for form-centered variant too (fixes post/comment pages) */
.main-container.groups-layout > .content-area.form-centered,
.main-container.groups-layout .content-area.narrow {
    width: 520px !important;
    max-width: 520px !important;
    min-width: 520px !important;
    box-sizing: border-box !important;
}
.main-container.groups-layout { box-sizing: border-box; }

/* Mobile: release the forced 520px width so post pages fit on narrow viewports */
@media (max-width: 544px) {
    .main-container.groups-layout > .content-area.form-centered,
    .main-container.groups-layout .content-area.narrow {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* Sidebar help component used in post-new */
.sidebar-help { background:#e9e5cd;padding:15px;border-radius:4px;font-size:12px;color:#666;line-height:1.6; }
.sidebar-help-title { font-weight:600;margin-bottom:10px;color:#333; }
.sidebar-help-list { margin:0;padding-left:20px; }

/* Button (primary) used for back link */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:4px; text-decoration:none; }
.btn-primary { background:#1e88e5;color:#fff;border:none;font-weight:700; }
.btn-primary:hover { background:#1669c4; }


/* Sidebar */
.sidebar {
    background: #fff;
    /* border removed globally; individual layouts can add their own if needed */
    /* border: 1px solid #ddd; */
    border-radius: 3px;
    height: fit-content;
}

.sidebar-section {
    border-bottom: 1px solid #eee;
    padding: 12px;
}

.sidebar-section:last-child {
    border-bottom: none;
}

/* Unified sidebar title styling for consistent green divider */
.sidebar-title, .sidebar-section-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #5a9a3c;
}

/* Left Sidebar Notification Menu */
.side-menu {
    list-style: none;
    margin: 0 0 6px 0;
    padding: 0;
}
.side-menu li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px; /* tighten horizontal gap between link and badge */
    padding: 4px 0; /* reduce vertical padding */
    margin-bottom: 4px; /* reduce distance between rows */
}
.side-menu li a {
    color: #553b08;
    font-size: 12px;
    text-decoration: none;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 6px;
}
.side-menu li a:hover {
    text-decoration: underline;
}
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 18px;
    flex-shrink: 0;
}
.badge.red { background: #e53935; }
.badge.blue { background: #1e88e5; }
.badge.pink { background: #e91e63; }
.badge.green { background: #43a047; }
/* Rookie (yeni-gelen) badge — amber */
.badge-rookie { background: #fff3cd; color: #856404; }
/* Tier badges earned by likes — green */
.badge-tier { background: #d4edda; color: #155724; }

/* Premium star: gold color, no background */
.premium-star {
    color: #ffd700;
}

/* Sidebar polish */
.sidebar-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #5a9a3c; /* Match right column styling */
}
.sidebar-list-plain {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-list-plain li {
    margin: 0 0 6px 0;
}
.sidebar-list-plain li a {
    color: #553b08;
    text-decoration: none;
    font-size: 12px;
}

/* invite page card styling */
.invite-section {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
}
.invite-section textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    min-height: 120px;
    font-size: 14px;
}

.invite-textarea {
    /* ensure styles apply when textarea moved or re-used */
    background: #f9f9f9;
}

/* stats badge and boxes */
.invite-stats {
    margin: 8px 0;
}

/* simple un‑bulleted vertical list used in invite premium box */
.plain-list {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0 0 0 16px;
}
.plain-list li {
    margin: 4px 0;
    line-height: 1.4;
}
.invite-badge {
    display: inline-block;
    background: #e6f7ff;
    color: #007acc;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.premium-box {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 8px 0 20px 0;
}

/* make send button stand out */
.invite-section .btn-post {
    width: 100%;
    font-size: 15px;
    padding: 10px;
}

/* table striping */
.invite-section table tr:nth-child(odd) {
    background: #f7fff1;
}
.invite-section h3 {
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 18px;
}
.invite-section table {
    width: 100%;
    border-collapse: collapse;
}
.invite-section td, .invite-section th {
    padding: 8px 6px;
}


/* invitation widget styles */
.sidebar-section.invite {
    text-align: left; /* align invite widget title to left */
}
.sidebar-section.invite .sidebar-section-title {
    text-align: left;
}
.sidebar-section.invite .btn-outline {
    width: 100%;
    /* keep button full-width; contents are centered automatically */
}
.sidebar-section.invite .muted {
    font-size: 11px;
    margin-top: 4px;
    text-align: center; /* explanatory text centered under button */
}
.sidebar-list-plain li a:hover { text-decoration: underline; }
.sidebar-link-more {
    font-size: 11px;
    color: #553b08;
    text-decoration: none;
}
.sidebar-link-more:hover { text-decoration: underline; }

.sidebar-list {
    list-style: none;
}

/* Sidebar items: let the inner .suggestion-row handle layout to avoid nested flex conflicts */
.sidebar-list li {
    display:block;
    padding: 5px 0;
    font-size: 11px;
}

/* Allow suggestion names to wrap inside the sidebar so usernames remain visible */
.sidebar-section .suggestion-name {
    white-space: normal;
    display:block;
    min-width:0;
    /* the generic .suggestion-name rule later applies overflow:hidden and ellipsis
       which clips long usernames.  when inside a sidebar we want the full name
       (wrapping if necessary), so override those properties here */
    overflow: visible;
    text-overflow: unset;
}
.sidebar-section .suggestion-name a { white-space:normal; overflow:visible; text-overflow:unset; display:inline-block; color:#333 !important; font-weight:600; }

/* Suggestion-row action column for sidebar */
.sidebar-section .suggestion-action { flex:0 0 72px; display:flex; align-items:center; justify-content:flex-end; }

/* Suggestion-row itself */
.suggestion-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }


/* Limiting the username width in other contexts remains fine */
.sidebar-list li a {
    color: #666;
    display:inline-flex; /* do not expand full-width like block flex */
    align-items:center;
    gap:6px;
} 

/* Compact inline follow button used in suggestion widgets */
.sidebar-list li .btn-inline,
.user-list .btn-inline {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 12px;
    vertical-align: middle;
}

/* Suggestion row: left = name (flex:1 with truncation), right = action (fixed) */
.suggestion-row {
    display:flex;
    justify-content:space-between;
    align-items:flex-start; /* align to top so action buttons line up */
    gap:8px;
}
.suggestion-name {
    flex:1 1 auto;
    min-width:0; /* allow truncation inside flex */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding-top:2px;
}
.suggestion-name a { display:inline-block; max-width:100%; }
.suggestion-action { flex:0 0 92px; display:flex; align-items:flex-start; justify-content:flex-end; margin-left:8px; }

/* Small spacing when inline with username (fallback) */
.sidebar-list li form[style*="margin-left"],
.user-list form[style*="margin-left"] {
    margin-left: 8px;
}

.count-badge {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    color: #999;
}

.user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.user-item img {
    width: 24px;
    height: 24px;
    border-radius: 2px;
}

.user-item a {
    color: #666;
    font-size: 11px;
}

/* Suggestions page tweaks */
.suggestions-list .user-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f1f1;
    background: #fff;
}
.suggestions-list .user-username { color: #333; font-weight:600; font-size:13px; }
.suggestions-list .user-reason { color:#888; font-size:12px; margin-top:6px; }
.suggestions-list .user-actions { flex:0 0 92px; display:flex; justify-content:flex-end; align-items:flex-start; }
.suggestions-list .user-avatar-small { width:36px; height:36px; border-radius:4px; background:#eee; display:flex; align-items:center; justify-content:center; font-weight:700; color:#666; position:relative; }
.suggestions-list .user-avatar-small.avatar-online::after { content:''; position:absolute; right:-4px; bottom:-4px; width:10px; height:10px; background:#2ecc71; border-radius:50%; border:2px solid #fff; box-shadow:0 0 6px rgba(46,204,113,0.6); }
.suggestions-list .user-avatar-small.avatar-online { box-shadow:0 0 0 rgba(46,204,113,0.2); }

/* Header username visibility */
.user-menu a:first-child { color: #333 !important; font-weight:700 !important; text-decoration:none; }

@media (max-width:480px) {
    .suggestions-list .user-actions { flex:0 0 76px; }
    .suggestions-list .user-avatar-small { width:28px; height:28px; }
}

.view-all-link {
    display: block;
    text-align: center;
    padding: 6px;
    color: #5a9a3c;
    font-size: 10px;
    margin-top: 5px;
}

/* Main Content */
.content-area {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    /* center column max width, but shrink on narrow viewports */
    max-width: 720px; /* wider center column to reduce side gaps */
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Homepage feed: allow center column to stretch full width */
body.page-index .content-area {
    max-width: none;
}

/* landing page should also be wide to eliminate empty gutters */
body.page-landing .content-area {
    max-width: none;
}

/* hide any unexpected global header on landing page only (register should show the normal site header) */
body.page-landing header.header-container {
    display: none !important;
}

/* Announcement page styling (moved from inline) */
.announcement-article { padding: 20px; background: #fff; border:1px solid #e0e0e0; border-radius:3px; }
.announcement-title { font-size:16px; margin-bottom:6px; color:#333; }
.announcement-date.muted { color:#999; font-size:12px; margin:4px 0 10px 0; }
.announcement-meta { color:#999; font-size:12px; margin-bottom:20px; display:flex; gap:12px; flex-wrap:wrap; }
.announcement-summary { background:#f9f9f9; padding:15px; border-radius:3px; margin-bottom:20px; border-left:4px solid #5a9a3c; }
.announcement-body { font-size:14px; line-height:1.8; color:#333; }
.announcement-body img, .announcement-article img { max-width:100%; height:auto; display:block; margin:1.2em 0; border-radius:6px; }
.announcement-link { text-decoration:none; display:block; }
.announcement-box { cursor:pointer; transition:all 0.12s ease-in-out; }
.announcement-box:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.04); }
.sidebar-meta { padding:10px; font-size:12px; color:#666; }
.meta-author { color:#5a9a3c; text-decoration:none; }
.meta-author:hover { text-decoration:underline; }

/* Section Title */
.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding: 15px 20px;
    margin: 0;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

/* Tag Navigation */
.tag-navigation {
    background: #fafafa;
    border-bottom: 1px solid #eee;
    padding: 10px 12px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 20;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.tag-navigation.sticky-visible,
.tag-navigation:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    background-color: #ffffff;
}

/* In bluesky/fixed header mode, pin tag bar below header */
body.bluesky-mode .tag-navigation {
    position: sticky;
    top: calc(var(--header-height, 92px) + 8px);
    z-index: 20;
}

/* Disable sticky behavior on normal index/landing flows to avoid overlapping timeline */
body.page-index .tag-navigation,
body.page-landing .tag-navigation {
    position: static;
    top: auto;
    z-index: auto;
}

/* Avoid tag nav content being hidden under header with fixed/pinned header */
body.bluesky-mode .content-area,
body.bluesky-mode .content-section,
body.bluesky-mode .content-container {
    padding-top: calc(var(--header-height, 92px) + 14px) !important;
}

.tag-item { display:inline-flex; align-items:center; gap:2px; margin-right:4px; }

.tag-nav-item {
    color: #666;
    font-size: 11px;
    padding: 4px 6px; /* reduced */
    border-radius: 3px;
    border: 1px solid transparent;
}

.tag-nav-item:hover,
.tag-nav-item.active {
    background: #5a9a3c;
    color: #fff;
    text-decoration: none;
    border-color: #553b08;
}

/* Post Form */
.post-form-container {
    padding: 12px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

/* Utilities (global) */
.btn-block { display:block; width:100%; padding:8px 12px; background:#f0f2f5; color:#333; text-decoration:none; border:none; border-radius:4px; font-size:12px; text-align:center; font-weight:600; cursor:pointer; }
.btn-block.primary { background:#5a9a3c; color:#fff; }

.card-box { background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); margin-bottom: 20px; }
.card-box.padded { padding: 20px; }

.notification-empty { background: #fff; padding: 60px 40px; border-radius: 4px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.notification-empty .icon-large { font-size:48px; margin-bottom:16px; }

.notification-card { padding: 16px; cursor: pointer; transition: box-shadow 0.12s ease, transform 0.12s ease; }
.notification-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: translateY(-2px); }

.notification-row { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }

/* Sidebar widget */
.sidebar-widget-title { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: #333; }
.sidebar-widget-desc { font-size: 12px; color: #666; line-height: 1.6; }
.sidebar-widget-desc p { margin-bottom:10px; }
.muted-strong { color: #333; }

/* Form helpers */
.form-block { text-decoration: none; color: inherit; display:block; }
.form-no-margin { margin: 0; }

/* Form centered variant for small forms */
.content-area.form-centered { max-width: 520px; margin: 0 auto 20px; }

/* Auth ban page */
.admin-empty-state { max-width:720px; margin:60px auto; font-family: sans-serif; text-align:center; }

/* Admin empty placeholder */
.admin-empty-icon { font-size:48px; margin-bottom:10px; }
.admin-empty-title { color:#28a745; margin-bottom:8px; font-size:18px; }
.admin-empty-desc { color:#666; font-size:13px; }

/* Admin user row */
.admin-user-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:15px; flex-wrap:wrap; gap:15px; }

/* Post preview box used on Group page */
.post-preview { border: 1px solid #eee; padding: 12px; margin-top: 8px; background:#fafafa; }

/* Small helper layout (no inline margin) */
.form-no-margin { margin: 0; }

/* Header rookie banner note */
.rookie-note { margin-left:8px; }

/* Admin utilities */
.admin-empty-state { background:#fff; border:1px solid #e0e0e0; padding:40px 20px; border-radius:3px; }
.admin-user-card { background:#fff; border:1px solid #e0e0e0; border-radius:3px; padding:20px; margin-bottom:15px; box-shadow:0 2px 4px rgba(0,0,0,0.08); }
.badge-verified { background:#d4edda; color:#155724; padding:3px 8px; border-radius:3px; font-size:11px; font-weight:600; }
.badge-unverified { background:#fff3cd; color:#856404; padding:3px 8px; border-radius:3px; font-size:11px; font-weight:600; }

/* Notification empty state */
.notification-empty-title { font-size:16px; color:#333; margin:0 0 8px 0; font-weight:600; }
.notification-empty-desc { font-size:13px; color:#999; margin: 0; }

/* Group callout text */
.group-callout-text { color:#666; }


/* Landing post feed small utilities */
.post-feed-item { background:#fff; border:1px solid #eee; border-radius:6px; padding:12px; margin-bottom:10px; }
.post-feed-header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.post-feed-username { color:#333; font-weight:700; text-decoration:none; }
.post-feed-permalink { color:#999; font-size:11px; text-decoration:none; padding:4px 6px; border-radius:4px; }
.post-feed-permalink:hover { color:#5a9a3c; background: rgba(90,154,60,0.06); }
.post-feed-meta { display:flex; gap:10px; color:#777; font-size:12px; margin-top:8px; }

/* Post card helpers (moved from inline) */
.post-card-meta-row { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.premium-star { font-size:14px; }
.post-source { margin-top:8px; font-size:12px; color:#666; }
.post-tag-link { color:#5a9a3c; text-decoration:none; font-size:12px; font-weight:500; display:inline-block; }
.post-tag-link:hover { text-decoration:underline; }

/* Page title */
.page-title { padding:15px 0; font-size:22px; font-weight:600; color:#333; border-bottom:2px solid #e0e0e0; margin-bottom:20px; }

/* Form alert */
.form-alert { padding:12px; border-radius:4px; margin-bottom:15px; }
.form-alert-error { background:#ffebee; border:1px solid #ef5350; color:#c62828; font-size:13px; }
.form-alert-item { margin-bottom:5px; }


/* Comment block */
.post-comment-block { margin-bottom:10px; padding-bottom:10px; }
.comment-user { color:#5a9a3c; text-decoration:none; font-weight:600; font-size:12px; }
.comment-text { font-size:16px; color:#666; margin-top:4px; }
.comment-more-link { font-size:11px; color:#5a9a3c; text-decoration:none; }
.comment-more-link:hover { text-decoration:underline; }

/* Misc helpers */
.form-no-padding { padding:0; }
.post-toolbar-group { display:flex; gap:6px; }
.rookie-note { margin-left:8px; }
.info-note { color:#e67e22; font-size:12px; margin-bottom:6px; }
.small-input { width:80px; margin-left:8px; margin-right:8px; }
.medium-input { width:100px; margin-left:8px; margin-right:8px; }


.post-form textarea,
.post-textarea {
    width: 100%;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px;
    font-size: 16px;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
    box-sizing: border-box;
}

/* Ensure entry (post) body text is readable at 16px */
.post-card-content,
.post-feed-content,
.comment-text {
    font-size: 16px;
}

.post-form textarea:focus,
.post-textarea:focus {
    outline: none;
    border-color: #5a9a3c;
}

/* poll / test area */
/* PROPAGATION CHECK: patch applied 23.03.2026 */
.post-poll,
.post-test {
    border: 1px solid #e4e6e9;
    padding: 10px;
    border-radius: 6px;
    background: #fff;
    margin-top: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.post-card .post-poll,
.post-card .post-test {
    margin-top: 8px;
    border-radius: 6px;
    box-shadow: none;
    background: #fff;
}

.post-card.post-poll,
.post-card.post-test {
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: calc(100% - 2px) !important;
}

.post-test .test-title { font-size: 1em; margin-bottom: 8px; }
.post-test .test-question { margin-bottom: 8px; word-break: break-word; overflow-wrap: anywhere; }
.post-test .test-question-text { margin-bottom: 6px; }
.post-test .test-option { margin-left: 8px; word-break: break-word; overflow-wrap: anywhere; }
.post-test .test-result { background: #f4fff4; border: 1px solid #d6f5d6; padding: 8px; margin-bottom: 8px; border-radius: 4px; word-break: break-word; overflow-wrap: anywhere; }
.post-card.post-poll .block-header, .post-card.post-test .block-header { display:flex; flex-wrap: wrap; }
.poll-description { max-width: 100%; word-break: break-word; overflow-wrap: anywhere; }


/* Test advanced layout */
.test-advanced { display:block; }
.test-advanced .card-box { max-width: 740px; margin: 0 auto; box-sizing: border-box; padding: 24px; overflow: hidden; }
.test-advanced .test-desc { max-width: 740px; margin: 0 auto; }

/* Form header banner */
.tahlil-form-header { display:flex; align-items:center; gap:10px; padding-bottom:16px; margin-bottom:20px; border-bottom:2px solid #eef3ea; }
.tahlil-form-header .tahlil-form-icon { font-size:22px; line-height:1; }
.tahlil-form-header .tahlil-form-title { font-size:17px; font-weight:700; color:#2d4a1e; margin:0; }

/* Step sections */
.tahlil-step { border-left:3px solid #5a9a3c; background:#fff; border-radius:0 6px 6px 0; padding:16px 18px; margin-bottom:20px; box-shadow:0 1px 3px rgba(0,0,0,0.06); box-sizing:border-box; width:100%; overflow:hidden; }
.tahlil-step-label { font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:#5a9a3c; margin:0 0 10px 0; }
.tahlil-step-hint { font-size:12px; color:#888; margin-top:5px; margin-bottom:0; }
#tahlil-title { font-size:15px; padding:10px 12px; height:auto; width:100%; box-sizing:border-box; }
.tahlil-step > label > strong,
.tahlil-step > label { display:block; font-size:13px; font-weight:600; color:#333; margin-bottom:6px; }

/* Question blocks */
.test-advanced .question-block { box-sizing:border-box; width:100%; margin-bottom:12px; border:1px solid #e8ede5; background:#fafcf8; padding:12px 14px; border-radius:6px; overflow:hidden; }
.test-advanced .question-header { margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.question-num-badge { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#5a9a3c; color:#fff; font-size:11px; font-weight:700; flex:0 0 22px; }
.test-advanced .question-header .question-text { flex:1; margin-left:2px; }
.test-advanced .question-options { display:grid; grid-template-columns: 1fr; gap:8px; align-items:start; margin-top:8px; }
.test-advanced .question-options .opt { display:flex; gap:6px; align-items:center; }
.opt-seq { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:3px; background:#e8ede5; color:#4a7a2e; font-size:11px; font-weight:700; font-family:monospace; flex:0 0 20px; }
.test-advanced .opt-points { width:60px; flex:0 0 60px; min-width:0; }
.test-advanced .opt-label { flex:1; min-width:0; word-break:break-word; overflow-wrap:break-word; }
.test-advanced .question-actions { display:flex; gap:8px; margin-top:10px; padding-top:8px; border-top:1px solid #eee; }

/* Threshold rows */
.tahlil-threshold-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; box-sizing:border-box; width:100%; }
.tahlil-threshold-sym { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:4px; background:#e8ede5; color:#4a7a2e; font-size:13px; font-weight:700; flex:0 0 26px; }
.tahlil-threshold-arrow { color:#aaa; font-size:14px; flex:0 0 14px; }
.tahlil-th-value { width:70px; flex:0 0 70px; min-width:0; }
.tahlil-th-out { flex:1; min-width:0; }

/* Submit zone */
.tahlil-submit-zone { border-top:2px solid #eef3ea; padding-top:18px; margin-top:4px; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.tahlil-group-note { flex:1; font-size:12px; color:#888; }

/* Preview / try-test panel */
.tahlil-preview-panel { max-width:740px; margin:18px auto 0; background:#f7faf4; border:1px solid #d8e8cf; border-radius:6px; padding:20px 24px; }
.tahlil-preview-panel h3 { font-size:15px; font-weight:700; color:#2d4a1e; margin:0 0 12px 0; padding-bottom:10px; border-bottom:1px solid #d8e8cf; }
.tahlil-preview-q { margin-bottom:14px; }
.tahlil-preview-q-text { font-weight:600; font-size:14px; color:#333; margin-bottom:6px; }
.tahlil-preview-opt { margin-bottom:5px; font-size:13px; }
.tahlil-preview-opt .muted { font-size:12px; }

@media (max-width: 1024px) {
    .test-advanced .question-options .opt { flex-direction: row; align-items:center; }
    .test-advanced .opt-points { width:60px; flex:0 0 60px; }
    .test-advanced .opt-label { width:100%; }
    .test-advanced .question-header .question-text { width: 100%; margin-left:0; }
}
@media (max-width: 640px) {
    .test-advanced .card-box { padding:16px; }
    .test-advanced .question-options { gap:6px; }
    .test-advanced .question-block { padding:10px 12px; }
    .tahlil-step { padding:12px 14px; }
    .tahlil-submit-zone { justify-content:stretch; }
    .tahlil-submit-zone .btn-post, .tahlil-submit-zone .btn-outline { flex:1; text-align:center; }
}

/* Small content variant used by followers/following pages */
.content-area.small {
    max-width: 600px;
    margin: 0 auto;
}

/* Back link common style */
.back-link { display:block; padding:15px; border-bottom:1px solid #eee; color:#5a9a3c; text-decoration:none; }
.back-link:hover { text-decoration:underline; }

/* Header utility links */
.admin-link { color:#ff9800; font-weight:bold; }
.header-username { font-weight:600; }

/* Sidebar meta compact */
.sidebar-meta { padding:10px; font-size:11px; color:#666; }
.meta-row { margin-bottom:8px; }

/* Users list / followers */
.users-list { list-style:none; padding:0; margin:0; }
.user-item { display:flex; justify-content:space-between; align-items:center; padding:15px 20px; border-bottom:1px solid #eee; background:#fff; margin-bottom:0; }
.user-item .user-info { flex:1; }
.user-actions { margin-left:20px; white-space:nowrap; }
.follow-btn-compact { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:6px; }

/* Profile header */
.profile-header { display:flex; align-items:center; justify-content:space-between; padding:20px; background:#f9f9f9; border-bottom:2px solid #5a9a3c; }

/* Group header */
.group-header { padding:20px; border-bottom:1px solid #eee; }
.group-header-inner { display:flex; align-items:flex-start; gap:15px; margin-bottom:15px; }
.group-header-main { flex:1; }
.group-title { font-size:20px; color:#333; margin-bottom:5px; }
.group-description { font-size:12px; color:#666; }
.group-meta { font-size:11px; color:#999; margin-top:5px; }
.lock-badge { margin-left:6px; }
.group-actions { display:flex; gap:8px; align-items:center; }

.group-pending { padding:10px; background:#fffbf0; border:1px solid #f9e79f; color:#8a6d3b; }
.group-info { padding:10px 15px; background:#e8f5e9; border-bottom:1px solid #66bb6a; color:#553b08; font-size:12px; }
.group-callout { padding:20px; background:#fffbf0; border-bottom:1px solid #f9e79f; text-align:center; }
.group-entry-textarea { width:260px; height:60px; margin-bottom:6px; }

.btn-join-group.edit { background:#607d8b; text-decoration:none; color:#fff; }

/* Ensure consistency for post-new variant sidebars */
.main-container.post-new .content-area { max-width: 600px; }

/* Admin misc helpers (moved from inline) */
.admin-desc { margin:6px 0; font-size:13px; color:#666; }
.admin-stats { display:flex; gap:15px; margin:8px 0; font-size:12px; color:#666; flex-wrap:wrap; }

.btn-compact.btn-primary { background:#3498db; color:#fff; text-decoration:none; }
.btn-compact.btn-success { background:#28a745; color:#fff; }

.post-form-actions {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 480px) {
    .post-form-actions {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .post-form-actions .char-count {
        order: 2;
        width: 100%;
    }
    .post-form-actions .reply-btn {
        order: 1;
        margin-left: auto;
    }
}

/* Tight button group for preview + publish buttons */
.post-actions-buttons {
    display: inline-flex;
    gap: 6px; /* tighter spacing */
    align-items: center;
}

.post-actions-buttons .btn-outline {
    padding: 6px 12px; /* slightly smaller so buttons line up */
}

.post-actions-buttons .btn-post {
    padding: 7px 14px;
}

.btn-post {
    background: #5a9a3c;
    color: #fff;
    border: none;
    padding: 7px 18px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.btn-post:hover {
    background: #553b08;
}

.char-count {
    font-size: 10px;
    color: #999;
}

/* Zamanla (schedule) row */
.post-schedule-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #f5f9f2;
    border: 1px solid #c3ddb5;
    border-radius: 5px;
    padding: 8px 12px;
    margin: 8px 0;
}
.post-schedule-row label {
    font-size: 0.85em;
    font-weight: 600;
    color: #5a7a3c;
    white-space: nowrap;
    margin: 0;
}
.post-schedule-row input[type="datetime-local"] {
    flex: 1;
    min-width: 160px;
    border: 1px solid #c3ddb5;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 0.85em;
    color: #444;
    background: #fff;
}
.post-schedule-row .btn-outline {
    border-color: #c3ddb5;
    color: #888;
}

/* Feed */
.posts-feed {
    padding: 0;
}

/* Post Card - Now in post-card.css */

.post-info {
    flex: 1;
}

.post-author {
    font-weight: bold;
    color: #333;
    font-size: 12px;
}

.post-time {
    font-size: 10px;
    color: #999;
}

.post-content {
    margin: 8px 0 8px 52px;
    color: #333;
    font-size: 12px;
    line-height: 1.6;
}

.post-tags {
    margin: 8px 0 8px 52px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.post-tag {
    background: #f0f0f0;
    color: #666;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
}

.post-tag:hover {
    background: #e0e0e0;
    text-decoration: none;
}

.post-actions {
    margin: 8px 0 0 52px;
    display: flex;
    gap: 15px;
}

.post-action {
    color: #999;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.post-action:hover {
    color: #5a9a3c;
    text-decoration: none;
}

.post-action.liked {
    color: #e74c3c;
}

/* Small inline note used for premium prompts */
.action-note {
    font-size:12px;
    color:#666;
}
.action-note a { color:#553b08; text-decoration:underline; font-weight:600; }

/* Upgrade CTA shown inline in composer when hitting length cap */
.upgrade-cta {
    margin: 8px 0 10px;
    padding: 10px 12px;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    color: #553b08;
    border-radius: 6px;
    font-size: 13px;
}

/* Global flash area under header */
.global-flash-area { max-width: 1100px; margin: 12px auto; padding: 0 12px; }
.global-flash-area .flash { padding: 12px 15px; border-radius: 6px; font-size: 14px; }
.global-flash-area .flash-success { background: #e8f5e9; border: 1px solid #c8e6c9; color: #553b08; }
.global-flash-area .flash-error { background: #fff0f0; border: 1px solid #f5c6cb; color: #c62828; }

/* Outbound confirmation (centered, responsive) */
.outbound-wrap { display:grid; grid-template-columns:1fr minmax(320px,700px) 1fr; gap:12px; margin-top:40px; }
.outbound-box { max-width:700px; margin:0 auto; padding:20px; border:1px solid #eee; border-radius:6px; background:#fff; text-align:center; }
.outbound-url { word-break:break-all; background:#f9f9f9; padding:10px; border-radius:4px; border:1px solid #eee; display:block; margin:10px 0; }
.outbound-actions {
    display:flex;
    gap:12px;
    justify-content:center;
    align-items:center;
    margin-top:18px;
}
/* Buttons inside outbound area should look and behave like standard CTAs */
.outbound-actions .btn-post,
.outbound-actions .btn-outline {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:140px;
    padding:10px 18px;
    border-radius:6px;
    font-weight:600;
    text-decoration:none;
}
.outbound-actions .btn-post { background:#5a9a3c; color:#fff; border:none; }
.outbound-actions .btn-post:hover { background:#4e7f32; }
.outbound-actions .btn-outline { background:transparent; border:1px solid #5a9a3c; color:#5a9a3c; }
.outbound-actions .btn-outline:hover { background:rgba(90,154,60,0.06); }

/* Ensure outbound CTA sits above any accidental overlays on some browsers */
.outbound-actions .btn-post { position: relative; z-index: 50; }

@media (max-width:600px) {
    .outbound-wrap { grid-template-columns: 1fr; padding:12px; }
    .outbound-box { max-width:100%; }
    .outbound-actions { flex-direction:column; gap:8px; }
    .outbound-actions .btn-post, .outbound-actions .btn-outline { width:100%; min-width:0; }
}

/* Ensure outbound CTA sits above any accidental overlays on some browsers */
.outbound-actions .btn-post { position: relative; z-index: 50; }

/* Landing page post preview (render formatted text but clamp to a few lines) */
.landing-post-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; max-height: 4.6em; }
.landing-post-preview a { color: #5a9a3c; text-decoration: none; }
.landing-post-preview pre.code-block { max-height: 6em; overflow: auto; }



/* Sidebar inline active users */
.sidebar-active-inline { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.sidebar-active-inline .sidebar-active-link { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; background:#f9f9f9; border-radius:4px; text-decoration:none; color:#333; font-size:12px; }
.sidebar-active-inline .sidebar-dot { width:8px;height:8px;background:#4caf50;border-radius:50%;display:inline-block;flex-shrink:0; }

/* Flash Premium CTA button styling (white text on green pill) */
.global-flash-area .flash-success .flash-premium-cta {
    display:inline-block;
    background:#2ecc71;
    color:#ffffff !important;
    padding:6px 10px;
    border-radius:6px;
    font-weight:700;
    text-decoration:none;
    margin-left:8px;
}
.global-flash-area .flash-success .flash-premium-cta:hover { opacity:0.95; }



/* Post poll/test strong enforcement */
.post-card.post-poll, .post-card.post-test {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    padding: 16px !important;
    border: 1px solid #e0e0e0 !important;
}
.post-card.post-poll > *, .post-card.post-test > * {
    overflow: visible !important;
}


/* Final poll/test overflow override (highest priority) */
.post-card.post-poll, .post-card.post-test {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
.post-card.post-poll > *, .post-card.post-test > * {
    overflow: visible !important;
    height: auto !important;
}
.post-card.post-poll .poll-results,
.post-card.post-poll .poll-description,
.post-card.post-test .test-question,
.post-card.post-test .test-result,
.post-card.post-poll .poll-option,
.post-card.post-test .test-option {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
.post-card.post-poll .test-option,
.post-card.post-test .test-option,
.post-card.post-poll .poll-option,
.post-card.post-test .poll-option,
.post-card.post-poll .test-result,
.post-card.post-test .test-result {
    overflow: visible !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* Comments */
.comments-section {
    margin-left: 52px;
    margin-top: 8px;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
}

.comment-item {
    padding: 6px 0;
    font-size: 11px;
}

.comment-author {
    font-weight: bold;
    color: #5a9a3c;
}

.comment-text {
    font-size: 16px;
    color: #666;
    margin-top: 2px;
}

.comment-form {
    margin-top: 8px;
}

.comment-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 11px;
}

.action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-group .action-form {
    display: inline-flex;
    margin: 0;
}

/* Comment Actions Row */
.comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    font-size: 11px;
}

/* Post number badge */
.post-number { width:42px; height:42px; background:#5a9a3c; color:#fff; border-radius:3px; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:14px; }

/* Notices */
.notice { padding:12px; border-radius:4px; margin-bottom:10px; }
.notice-info { background:#fffbf0; border:1px solid #f9e79f; color:#6a4b00; }

/* Layout helpers */
.justify-center { justify-content:center; }

/* Token input */
.input-token { width:100%; max-width:400px; padding:12px; border:2px solid #ddd; border-radius:4px; font-size:16px; text-align:center; }

/* Alert info */
.alert-info { background:#e7f3ff; border:1px solid #bee5eb; color:#084298; padding:12px; border-radius:4px; margin-bottom:12px; }

.comment-actions .action-form {
    display: inline;
    margin: 0;
}

.comment-actions .action-btn,
.comment-actions .action-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #666;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 11px;
}

.comment-actions .action-btn:hover,
.comment-actions .action-link:hover {
    color: #5a9a3c;
    text-decoration: none;
}

.comment-actions .like-btn.liked {
    color: #e74c3c;
}

.comment-actions .edit-btn {
    color: #3498db;
}

.comment-actions .delete-btn {
    color: #e74c3c;
}

.comment-actions .report-btn {
    color: #ff9800;
}

/* Threaded Replies (Reddit-style ladder) */
.comment-thread {
    position: relative;
    margin-top: 10px;
}

.comment-thread .comment-item {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-left: 3px solid #d4d4d4;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 6px;
    box-shadow: 0 1px 0 #e9e5cd;
}

.comment-thread .comment-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.comment-thread .comment-author {
    color: #553b08;
}

.comment-thread .comment-time {
    color: #999999;
    font-size: 10px;
}

.comment-thread .comment-content {
    color: #333333;
    margin-top: 4px;
    line-height: 1.5;
}

.comment-replies {
    margin-top: 6px;
    padding-left: 0;
    margin-left: -30px;
}

.comment-replies .comment-thread {
    margin-top: 6px;
    margin-left: 30px;
}

/* Announcements */

/* Notifications - stacked layout */
.notification-card { display:block; padding:10px 12px; border-radius:6px; background:#fff; border:1px solid #eee; margin-bottom:10px; box-sizing:border-box; }
.notification-card.unread { background: linear-gradient(90deg, #fff8e6, #fff); }
.notification-row { display:flex; align-items:center; gap:12px; min-width:0; }
.notification-icon { width:40px; height:40px; border-radius:6px; background:#f0f0f0; display:flex; align-items:center; justify-content:center; font-weight:700; color:#555; flex:0 0 40px; }
.notification-body { display:flex; flex-direction:row; align-items:center; gap:8px; min-width:0; }
.notification-user { font-weight:600; color:#333; text-decoration:none; }
.notification-meta { color:#999; font-size:12px; }
/* Preview and message are block rows below header; indent when icon present */
.notification-card .notification-preview, .notification-card .notification-message { display:block; width:100%; box-sizing:border-box; white-space:normal; overflow-wrap:anywhere; word-break:break-word; margin:6px 0 4px 0; }
/* icon is now 24px + gap 12px = 36px indent */
.notification-card.has-icon .notification-preview, .notification-card.has-icon .notification-message { margin-left:36px; width: calc(100% - 36px); }
.notification-postid { color:#5a9a3c; font-weight:700; margin-left:6px; }
.notification-actions { margin-left:12px; margin-top:6px; }
.btn-mark-read { background:#eee; border:none; padding:6px 12px; border-radius:4px; cursor:pointer; font-size:12px; }

/* End notifications single-line */
.announcement-box {
    background: #fffbf0;
    border: 1px solid #f9e79f;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 8px;
    font-size: 11px;
}

.announcement-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.announcement-text {
    color: #666;
}

/* Groups */
.groups-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.group-card {
    background: #fff;
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    padding: 15px 20px;
    text-align: left;
    transition: background-color 0.2s;
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.group-card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.group-card-title { font-size:14px; font-weight:700; color:#333; flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.group-card-actions { margin-left:auto; flex-shrink:0; }
.group-desc { margin-top:8px; color:#666; font-size:13px; overflow:hidden; max-height:42px; }
.group-footer { margin-top:10px; font-size:12px; color:#999; }

/* Notifications / Post-card clamping */
.post-card.notification-card, .notification-card { max-width:100%; box-sizing:border-box; overflow:hidden; word-break:break-word; }
.notification-message { text-align:left; max-width:100%; }
.post-card .notification-icon { flex-shrink:0; }
.notifications-grid form { width:100%; }

.group-card:hover {
    background-color: #f9f9f9;
}

.group-icon-large {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #5a9a3c;
    color: #fff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
}

.group-card h3 {
    font-size: 14px;
    margin: 0;
    color: #333;
}

.group-card p {
    font-size: 12px;
    color: #999;
    margin: 2px 0 0;
}

.group-stats {
    font-size: 10px;
    color: #666;
    margin: 6px 0;
}

.group-card form {
    margin: 0;
    display: flex;
    align-items: center;
}

.group-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.group-post-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
}

.group-action-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 11px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    display: inline-block;
    white-space: nowrap;
}

.group-action-btn:hover {
    background-color: #f0f0f0;
    color: #5a9a3c;
}

.btn-join-group {
    background: #5a9a3c;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}

.btn-join-group:hover {
    background: #553b08;
    text-decoration: none;
}

.btn-leave-group {
    background: #dc3545;
    color: #fff;
}

.btn-leave-group:hover {
    background: #c82333;
}

.group-icon {
    width: 28px;
    height: 28px;
    background: #5a9a3c;
    color: #fff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
}

.group-info {
    flex: 1;
}

.group-name {
    font-weight: bold;
    color: #333;
    font-size: 11px;
}

.group-members {
    font-size: 10px;
    color: #999;
}

/* Global sticky footer ----------------------------------------------------------------
   make body a column flex container with full viewport height; let the main content
   area (either .content-section or .main-container) grow so the footer is pushed to
   the bottom.  This replaces the per–page hacks previously scattered in inline
   <style> blocks.
*/
html,
body {
    height: 100%;
    margin: 0;           /* avoid unwanted whitespace */
}
body {
    display: flex;
    flex-direction: column;
}
/* whichever wrapper a page uses to contain its primary content */
body > .content-section,
body > .main-container {
    flex: 1;
}

/* Footer styles (margin-top:auto is unnecessary now but harmless) */
.footer-container {
    background: #fff;
    border-top: 1px solid #ddd;
    margin-top: auto;
    padding: 15px 0;
}

.footer-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #999;
    font-size: 10px;
}

.footer-text {
    color: #999;
    font-size: 10px;
}

/* Pagination */
.pagination {
    padding: 12px;
    text-align: center;
    border-top: 1px solid #eee;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 2px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #666;
    font-size: 11px;
}

.pagination a:hover {
    background: #5a9a3c;
    color: #fff;
    border-color: #5a9a3c;
    text-decoration: none;
}

.pagination .current {
    background: #5a9a3c;
    color: #fff;
    border-color: #5a9a3c;
}

/* 2-Column Layout (no right sidebar) */
.main-container.two-column {
    grid-template-columns: 180px 560px; /* left sidebar + content width */
    max-width: 860px;
}

/* Full-width center content (no sidebars) */
.main-container.single-column {
    grid-template-columns: 1fr;
    max-width: 1000px; /* widen single-column layouts for roomy pages like Events */
}

.main-container.single-column .content-area {
    max-width: 630px; /* allowed maximum */
    width: 100%;
}

.policy-body {
    padding: 24px;
    line-height: 1.75;
    font-size: 14px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    max-width: 820px;
    margin: 0 auto;
}

.policy-body h3, .policy-body h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 22px 0 10px;
    color: #2a2a2a;
}

.policy-body p {
    margin: 0 0 14px;
    color: #404040;
}

.policy-body ul {
    margin: 0 0 18px 24px;
    padding-left: 0;
    list-style: disc outside;
}

.policy-body ul li {
    margin-bottom: 10px;
}

.policy-updated {
    color: #6d6d6d;
    margin-bottom: 18px;
}

/* Narrow centered content (forms, group edit, profile) */
.content-area.narrow, .content-area.form-centered { max-width: 560px; }

/* Responsive */
@media (max-width: 960px) {
    .main-container {
        grid-template-columns: 1fr;
        max-width: 520px;
        padding: 15px;
    }

    /* groups-layout uses !important on grid-template-columns; must counter with !important here */
    .main-container.groups-layout {
        grid-template-columns: 1fr !important;
        max-width: 100%;
        padding: 0 12px;
    }

    /* post-new has higher specificity than .main-container; collapse explicitly */
    .main-container.post-new {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 0 12px;
    }

    .main-container.two-column {
        grid-template-columns: 1fr;
        max-width: 520px;
    }
    
    .sidebar-left,
    .sidebar-right {
        display: none;
    }
}

/* Ensure header and main content share the same gutters on narrow screens */
@media (max-width: 960px) {
    .header-content,
    .main-container,
    .footer-content {
        max-width: 520px;
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* groups-layout needs explicit 100% here since its max-width: 960px otherwise wins */
    .main-container.groups-layout {
        max-width: 100%;
        width: 100%;
    }

    /* Make content-area use full available width and remove extra inner offsets.
       .content-area.narrow/.form-centered have higher specificity; target explicitly. */
    .content-area,
    .content-area.narrow,
    .content-area.form-centered {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 0;
    }

    /* Utility: full-width button */
    .btn-block { display:block; width:100%; padding:8px 12px; background:#f0f2f5; color:#333; text-decoration:none; border:none; border-radius:4px; font-size:12px; text-align:center; font-weight:600; cursor:pointer; }
    .btn-block.primary { background:#5a9a3c; color:#fff; }

    .card-box { background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); margin-bottom: 20px; }
    .card-box.padded { padding: 20px; }

    .notification-empty { background: #fff; padding: 60px 40px; border-radius: 4px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
    .notification-empty .icon-large { font-size:48px; margin-bottom:16px; }

    .notification-card { padding: 16px; cursor: pointer; transition: box-shadow 0.12s ease, transform 0.12s ease; }
    .notification-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: translateY(-2px); }


    /* Remove legacy left offsets that could misalign feed items */
    .post-content,
    .post-tags,
    .post-actions,
    .comments-section {
        margin-left: 0 !important;
    }

    .posts-feed {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .header-nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .header-search .search-bar {
        width: 100%;
        font-size: 12px;
    }

    .menu-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .menu-links a {
        font-size: 12px;
    }
    /* Mobile fix: keep user menu spaced and touch-friendly */
    .user-menu {
        gap: 10px;
        justify-content: flex-end;
        align-items: center;
    }
    .user-menu a { display:inline-block; padding:6px 8px; border-radius:4px; }
    
    .groups-grid {
        grid-template-columns: 1fr;
    }
}

/* Stronger alignment at tablet/phone sizes to make header/menu and posts share gutters */
@media (max-width: 768px) {
    .header-content,
    .main-container,
    .footer-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .content-area {
        padding: 0 !important;
    }

    .posts-feed {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .post-card,
    .post-feed-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .post-card {
        background: #fdfdfd !important;
        border: 1px solid #d9d9d9 !important;
        border-radius: 2px !important;
        box-shadow: none !important;
        padding: 11px 12px !important;
        margin-bottom: 10px !important;
    }

    .post-card:hover {
        background: #fff !important;
    }

    .post-card-header,
    .post-card-meta {
        padding-left: 0 !important;
    }
}

/* Utility Classes */
.text-muted {
    color: #999;
}

.text-success {
    color: #5a9a3c;
}

.text-danger {
    color: #e74c3c;
}

.badge {
    background: #5a9a3c;
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: bold;
}

.badge-secondary {
    background: #999;
}

.lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #607d8b;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
}

.sidebar-badge {
    background: #5a9a3c;
    color: #fff;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 8px;
    font-weight: bold;
    margin-left: 4px;
    vertical-align: middle;
}

/* Guest Landing CTA */
.guest-landing {
    padding: 30px;
    border-bottom: 1px solid #eee;
}
.guest-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.guest-title {
    color: #5a9a3c;
    margin-bottom: 10px;
}
.guest-text {
    color: #666;
    margin-bottom: 14px;
}
.guest-copy {
    flex: 0 1 65%;
    max-width: 65%;
}
.join-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex: 1 1 35%;
    margin-top: 12px;
    text-align: right;
    white-space: nowrap;
    margin-left: auto;
}
.btn-outline {
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #666;
    text-decoration: none;
}

@media (max-width: 768px) {
    .guest-landing {
        padding: 20px;
    }
}

/* Small utility buttons used in the composer toolbar */
.btn-small {
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    color: #333;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
}

/* Small inline insert-tag button used next to trending tags */
.insert-tag { background:transparent;border:none;color:#553b08;font-weight:700;padding:1px 4px;border-radius:4px;cursor:pointer;margin:0 2px 0 0;font-size:13px }
.insert-tag:active{transform:translateY(1px)}
.insert-tag-form { display:inline-block; margin-right:0; }

/* Tag pill: left side is a green plus, right side is a gray tag name; both are separate actions */
.tag-item { display:inline-flex; align-items:center; border-radius:999px; overflow:hidden; border:1px solid #e9eef3; margin-right:4px; vertical-align:middle; height:20px; }
.tag-item .insert-tag { padding:0; width:20px; height:20px; background:#5a9a3c; color:#fff; border:none; font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center; }
.tag-item .insert-tag:hover { background:#553b08; }
.tag-item .insert-tag:disabled { opacity:0.5; cursor:not-allowed; }

.tag-item .tag-nav-item { display:inline-flex; align-items:center; padding:0 8px; height:20px; background:#f3f4f6; color:#666; text-decoration:none; border-left:1px solid rgba(0,0,0,0.04); font-size:11px; }
.tag-item .tag-nav-item:hover { background:#e9ebee; }

/* Make tag nav a bit more compact on small screens */
@media (max-width: 520px) {
    .tag-item { margin-right:4px; height:18px; }
    .tag-item .insert-tag { width:18px; height:18px; font-size:10px; }
    .tag-item .tag-nav-item { padding:0 6px; font-size:10px; height:18px; }
}

.post-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.post-toolbar input[type="text"]{ padding:6px; border:1px solid #e6e6e6; border-radius:3px; }
.post-form textarea{ min-height:120px; }
.post-form .post-form-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
    .guest-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .guest-copy {
        max-width: 100%;
    }
    .join-actions {
        justify-content: flex-end;
        align-self: flex-end;
        margin-top: 8px;
        width: 100%;
        text-align: right;
    }

/* Notifications: single-column list style (one notification per row) */
.notifications-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Ensure notification forms and cards take full available width */
.notifications-grid form { width: 100%; }
.post-card.notification-card { width: 100%; box-sizing: border-box; }

@media (max-width: 520px) {
    .notifications-grid { gap: 10px; }
}

/* Notification preview: allow multi-line previews and wrapping */
.notification-preview {
    display: block;
    background: #f7fff1;
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 12px;
    margin: 6px 0 12px 0;
    border-radius: 4px;
    border-left: 3px solid #ddd;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* Notification layout & responsive timestamp */
.notification-header { display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.notification-icon { width:40px; height:40px; background:#5a9a3c; color:#fff; border-radius:3px; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:18px; flex-shrink:0; }
.notification-body { flex:1; min-width:0; }
.notification-user { color:#5a9a3c; text-decoration:none; font-weight:600; display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.notification-meta { color:#999; font-size:11px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notification-message { color:#333; font-size:13px; line-height:1.6; margin-bottom:14px; padding-right:12px; }
.notification-actions { padding-top:12px; border-top:1px solid #e0f0d9; }
.btn-mark-read { background:none; border:none; color:#5a9a3c; font-size:12px; font-weight:600; cursor:pointer; padding:0; text-decoration:none; display:inline-block; transition:opacity .2s; }

/* Align message/preview/actions based on whether an icon is present */
.notification-card.has-icon .notification-message,
.notification-card.has-icon .notification-preview,
.notification-card.has-icon .notification-actions { margin-left:52px; }
.notification-card.no-icon .notification-message,
.notification-card.no-icon .notification-preview,
.notification-card.no-icon .notification-actions { margin-left:12px; }

/* Fix: prevent notification overflow by allowing wrap and breaking long words/URLs */
.notifications-grid .notification-card,
.notifications-grid .post-card.notification-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.notifications-grid .notification-message,
.notifications-grid .notification-preview,
.notifications-grid .notification-user,
.notifications-grid .notification-meta {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
}

/* Ensure header elements don't force min-width overflow */
.notification-row, .notification-body { min-width: 0; width: 100%; flex: 0 0 100%; }

/* Strong layout rules: header occupies full row, preview and message become full-width rows indented under username/icon */
.notifications-grid .notification-row { width: 100%; flex: 0 0 100%; }
.notification-card.has-icon .notification-preview,
.notification-card.has-icon .notification-message {
    display: block !important;
    width: calc(100% - 52px) !important; /* icon 40px + gap 12px = 52px */
    margin-left: 52px !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-height: none !important;
    overflow: visible !important;
    text-align: left !important;
}

.notification-card.no-icon .notification-preview,
.notification-card.no-icon .notification-message {
    margin-left: 0 !important;
    width: 100% !important;
}
.notifications-grid .notification-postid { margin-left: 6px; color: #5a9a3c; font-weight: 700; }

/* Clickable notification card overlay */
.notification-card { position: relative; }
.card-click-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    z-index: 0;
}
.notification-user,
.notification-postid,
.notification-preview,
.notification-message,
.btn-mark-read {
    position: relative;
    z-index: 1;
}

@media (max-width:480px) {
    .notification-meta { font-size:10px; }
    .notification-user { font-size:13px; }
    .notification-header { gap:8px; }
    .notification-card.has-icon .notification-message,
    .notification-card.has-icon .notification-preview,
    .notification-card.has-icon .notification-actions { margin-left:44px; }
    /* Allow preview to wrap on mobile too */
    .notification-preview { white-space:normal; overflow-wrap:anywhere; }
    .notification-message { white-space:normal; }
}

/* Reduce avatar/icon box size slightly */
.post-card .notification-icon { width: 24px !important; height: 24px !important; font-size: 12px !important; }

/* Compact tab styles: single-line, shrink-to-fit */

/* Pill style for trending tags: removed (unused) */

/* Insert helpers removed: styles for mini helper forms have been deprecated and removed to simplify the composer UI */

/* Edit-page tabs (group_edit, etc.) */
.edit-tabs {
    display: flex;
    gap: 0;
    background: #f5f5f5;
    border-bottom: 2px solid #e0e0e0;
    border-radius: 6px 6px 0 0;
    margin-bottom: 16px;
    overflow-x: auto;
}
.edit-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 520px;
    min-width: 0;
    padding: 10px 0;
    text-decoration: none;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s, background .15s;
    box-sizing: border-box;
}
.edit-tab:hover { color: #333; background: #ebebeb; }
.edit-tab.active {
    color: #2e7d32;
    font-weight: 600;
    border-bottom-color: #2e7d32;
    background: #fff;
}
.edit-tab .badge.red {
    font-size: 11px;
    padding: 1px 7px;
    margin-left: 2px;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .edit-tab { width: auto; flex: 1; padding: 8px 10px; font-size: 13px; }
}


.tab-links {
    display: flex;
    gap: 2px;
    overflow-x: hidden;             /* one row, no scroll */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.tab-links .tab-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 3px;
    border-radius: 6px;
    text-decoration: none;
    color: #666;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.tab-links .tab-icon { flex-shrink: 0; font-size: 12px; }
.tab-links .tab-label { white-space: nowrap; }
.tab-links .tab-count { flex-shrink: 0; }

/* Hide label text when content column is too narrow — emoji alone identifies the tab */
@media (max-width: 900px) {
    .tab-links .tab-label { display: none; }
}

.tab-links .tab-link.active {
    color: #5a9a3c;
    font-weight: 600;
    border-bottom-color: #5a9a3c;
}

.tab-count {
    background: #5a9a3c;
    color: #fff;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    min-width: 16px;
    line-height: 1.5;
    display: inline-block;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

@media (max-width: 520px) {
    .tab-links .tab-link { padding: 1px 3px; font-size: 9px; gap: 2px; }
    .tab-count { font-size: 8px; padding: 0 3px; }
}

/* Admin Styles */
.admin-nav {
    background: #fff;
    border-bottom: 2px solid #e0e0e0;
    padding: 0;
    margin: 0 auto 20px;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
}

.admin-nav a {
    display: block;
    padding: 12px 15px;
    color: #666;
    font-size: 13px;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    transition: all 0.2s;
    text-align: left;
}

.admin-nav a:hover {
    color: #5a9a3c;
    text-decoration: none;
    background: #f9f9f9;
}

.admin-nav a.active {
    color: #fff;
    background: #5a9a3c;
    font-weight: 600;
}

.admin-nav .notification-badge {
    background: #ff5722;
    color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 5px;
    display: inline-block;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    align-items: start;
}

/* Make KPI row span full width */
.admin-grid .kpi-row {
    grid-column: 1 / -1;
}

/* Sections and charts participate in the 3-column flow by default.
   Use .full-width on any block that must span all columns (rare).
*/
.admin-grid .section.full-width {
    grid-column: 1 / -1;
}

/* Allow charts-grid wrapper to be transparent to the outer grid so chart-cards
   flow into the 3-column layout directly (no JS, pure CSS). */
.charts-grid {
    display: contents;
}

@media (max-width: 600px) {
    .charts-grid { display: block; }
}

/* Responsive: 2 columns for medium screens, 1 column for small */
@media (max-width: 1000px) {
    .admin-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }
    .admin-grid .kpi-row {
        grid-column: 1 / -1;
    }
    .charts-grid .chart-card.wide {
        grid-column: 1 / -1;
    }
}

.admin-grid .card {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border: 1px solid #e0e0e0;
}

.admin-grid .card h3 {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    font-weight: 600;
}

.admin-grid .card .big {
    font-size: 32px;
    font-weight: bold;
    color: #5a9a3c;
    margin-bottom: 8px;
}

.admin-grid .card .btn-link {
    display: inline-block;
    color: #5a9a3c;
    font-size: 12px;
    padding: 6px 12px;
    background: #f0f9ed;
    border-radius: 3px;
    margin-top: 8px;
}

.admin-grid .card .btn-link:hover {
    background: #e0f2db;
    text-decoration: none;
}

.admin-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-links .btn {
    padding: 10px 20px;
    background: #5a9a3c;
    color: #fff;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.admin-links .btn:hover {
    background: #553b08;
    text-decoration: none;
}

.page-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid #5a9a3c;
    padding-bottom: 10px;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Center small forms */
.content-wrapper.form-centered { max-width: 560px; margin: 0 auto 20px; }

.admin-table {
    width: 100%;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border: 1px solid #e0e0e0;
}

.admin-table table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    background: #f9f9f9;
    padding: 12px 15px;
    text-align: left;
    font-size: 12px;
    color: #666;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
}

.admin-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover {
    background: #fafafa;
}

.btn-compact {
    padding: 5px 12px;
    font-size: 11px;
    background: #5a9a3c;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
}

.btn-compact:hover {
    background: #553b08;
}

/* RSS link styled as compact button (used on profile & group headers) */
.profile-rss-link,
.group-rss-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    text-decoration: none;
    vertical-align: middle;
}

.profile-rss-link.btn-compact,
.group-rss-link.btn-compact {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    border: 1px solid #ddd;
}

.profile-rss-link.btn-compact:hover,
.group-rss-link.btn-compact:hover {
    background: #f7fff1;
}

/* ensure the RSS button doesn't break layout next to headings */
.group-title .group-rss-link { font-size: 12px; }
.profile-username-extras .profile-rss-link { font-size: 12px; margin-left: 0; }


/* Admin Responsive */
@media (max-width: 1024px) {
    .admin-nav {
        -webkit-overflow-scrolling: touch;
    }
    
    .admin-nav a {
        padding: 10px 14px;
        font-size: 12px;
    }
    
    .admin-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .content-wrapper {
        padding: 15px;
    }
    
    .page-title {
        font-size: 20px;
    }
    
    .admin-nav {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 15px;
    }

/* Notifications: responsive grid and compact cards to avoid page overflow */
.notifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .notifications-grid { grid-template-columns: 1fr; gap: 12px; }
}

.post-card.notification-card {
    padding: 12px !important; /* slightly smaller */
    min-height: 72px;
    max-height: none; /* allow content to grow if needed */
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Make previews multi-line and allow wraps rather than truncation */
.notification-preview {
    display: block;
    max-height: none;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: #666;
    font-size: 13px;
}

.notification-time { color: #999; font-size: 12px; }

/* Reduce avatar/icon box size slightly */
.post-card .notification-icon, .post-card > div > div[style] {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
}

    
    .admin-nav a {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .admin-nav .notification-badge {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    .admin-grid {
        grid-template-columns: 1fr;
    }
    
    .admin-table {
        overflow-x: auto;
    }
    
    .admin-table table {
        min-width: 600px;
    }
}

@media (max-width: 480px) {
    .admin-nav {
        grid-template-columns: 1fr;
    }
    
    .admin-nav a {
        padding: 10px 12px;
        font-size: 11px;
        border-right: none;
    }
    
    .admin-grid .card .big {
        font-size: 24px;
    }
    
    .admin-links .btn {
        width: 100%;
        text-align: center;
    }
}

/* Loading States */
.loading {
    text-align: center;
    padding: 20px;
    color: #999;
}

.empty-state {
    text-align: center;
    padding: 30px;
    color: #999;
}

.empty-state-icon {
    font-size: 40px;
    margin-bottom: 8px;
}

/* Online Status Indicator */
.online-status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    margin-left: 4px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.online {
    background-color: #2ecc71;
    animation: pulse-online 2s infinite;
}

.status-dot.offline {
    background-color: #e74c3c;
}

@keyframes pulse-online {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Utilities and converted inline styles */
.admin-row { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.action-row { display:flex; gap:8px; align-items:center; }
.notice-inline { margin-top:8px; }
.admin-actions { border-top:1px solid #eee; padding-top:15px; margin-top:15px; display:flex; gap:8px; flex-wrap:wrap; }
.form-padded { padding: 20px; }
.flex-row { display:flex; gap:10px; }
.mt-12 { margin-top:12px; }
.mt-6 { margin-top:6px; }
.mt-8 { margin-top:8px; }
.mt-15 { margin-top:15px; }
.muted { color:#666; }
.small { font-size:12px; }
.box { max-width:460px; margin:0 auto; padding:18px; border:1px solid #eee; border-radius:6px; background:#fff; }
.box button { background:#007bff; color:#fff; border:none; padding:10px 14px; border-radius:4px; cursor:pointer; }
.dev-tools { background:#f7f7f7; padding:8px; border-radius:4px; }
.mono-textarea { width:100%; height:52px; font-family:monospace; padding:6px; }
.section-subtitle { font-size:14px; margin-bottom:10px; color:#333; }
.replies-header { padding:15px 20px; font-size:14px; color:#333; border-bottom:1px solid #eee; background:#fafafa; }
.sidebar-info { padding:10px; font-size:11px; color:#666; }
.meta-row { margin-bottom:8px; }
.form-label { display:block; margin-bottom:5px; font-weight:600; }
.form-row { margin-bottom:15px; }
.premium-panel { margin-top:25px; padding:20px; background: linear-gradient(135deg, #e8f8f1 0%, #d4edda 100%); border-radius:8px; border-left:4px solid #2ecc71; }
.input-full { width:100%; padding:10px; border:2px solid #ddd; border-radius:6px; font-size:14px; }
.color-option { display:flex; align-items:center; gap:8px; padding:10px; border-radius:8px; cursor:pointer; transition: all .2s; border:3px solid #ddd; background:white; }
.color-option.selected { background:#f0f0f0; border-color: currentColor; }
.radio-small { width:18px; height:18px; cursor:pointer; }
.swatch { display:inline-block; width:24px; height:24px; border-radius:4px; border:2px solid #333; }
.swatch-label { font-size:14px; font-weight:500; margin-left:8px; }
.badge-preview { padding:10px; background:white; border-radius:6px; display:inline-block; }
.hint { font-size:12px; color:#666; }
.btn-warning { padding:8px 16px; background:#f39c12; color:white; border:none; border-radius:4px; font-weight:600; cursor:pointer; }
.text-danger { color:#900; }

/* Color swatches (explicit classes to avoid inline styles) */
.color-2ecc71 .swatch { background:#2ecc71; }
.color-3498db .swatch { background:#3498db; }
.color-e74c3c .swatch { background:#e74c3c; }
.color-f39c12 .swatch { background:#f39c12; }
.color-9b59b6 .swatch { background:#9b59b6; }
.color-1abc9c .swatch { background:#1abc9c; }
.color-34495e .swatch { background:#34495e; }
.color-e67e22 .swatch { background:#e67e22; }

/* ensure color-option.selected border uses swatch color */
.color-2ecc71.selected { border-color:#2ecc71; }
.color-3498db.selected { border-color:#3498db; }
.color-e74c3c.selected { border-color:#e74c3c; }
.color-f39c12.selected { border-color:#f39c12; }
.color-9b59b6.selected { border-color:#9b59b6; }
.color-1abc9c.selected { border-color:#1abc9c; }
.color-34495e.selected { border-color:#34495e; }
.color-e67e22.selected { border-color:#e67e22; }

/* Confirm / dialog utilities */
.confirm-box { max-width:600px; margin:40px auto; padding:20px; }
.confirm-panel { background:#fff; padding:30px; border-radius:3px; box-shadow:0 2px 4px rgba(0,0,0,0.08); border:1px solid #e0e0e0; }
.danger-title { font-size:20px; color:#e74c3c; margin-bottom:20px; font-weight:700; }
.panel-muted { background:#e9e5cd; padding:15px; border-radius:3px; margin-bottom:20px; border:1px solid #ddd; }
.panel-meta { margin-bottom:10px; }
.meta-strong { font-size:13px; }
.meta-muted { color:#666; font-size:11px; margin-left:10px; }
.panel-content { font-size:13px; color:#333; line-height:1.6; }
.mb-20 { margin-bottom:20px; }
.btn-cancel { padding:10px 20px; background:#6c757d; color:#fff; border-radius:3px; text-decoration:none; font-size:13px; font-weight:600; }
.btn-danger { padding:10px 20px; background:#e74c3c; color:#fff; border:none; border-radius:3px; cursor:pointer; font-size:13px; font-weight:600; }

/* small helpers */
.full-width { width: 100%; }
.mb-12 { margin-bottom:12px; }
.mt-5 { margin-top:5px; }
.mt-10 { margin:10px 0; }
.text-center { text-align: center; }

/* badwords / admin helpers */
.mb-30 { margin-bottom: 30px; }
.form-flex { display:flex; gap:10px; align-items:center; margin-bottom:15px; }
.flex-1 { flex:1; }
.input { padding: 10px; border: 1px solid #ddd; border-radius:5px; }
.btn-upload { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color:white; }
.info-panel { margin-top:30px; padding:15px; background:#f0f7ff; border-left:4px solid #667eea; border-radius:5px; }
.info-title { margin:0 0 10px 0; font-size:16px; color:#667eea; }
.info-list { margin:0; padding-left:20px; line-height:1.8; }

/* table / layout helpers */
.table-full { width:100%; border-collapse:collapse; background:white; }
.table-full th, .table-full td { padding:12px; }
.table-compact th, .table-compact td { padding:6px; font-size:13px; }
.table-compact th, .table-compact td { white-space:nowrap; }
.table-compact th.status, .table-compact td.status { width:68px; text-align:center; }
.table-compact th.action, .table-compact td.action { width:80px; text-align:center; }
.mb-15 { margin-bottom:15px; }
.content-area.narrow { max-width:560px; }

/* tables */
.table-headers { background:#f8f9fa; border-bottom:2px solid #dee2e6; }
.table-headers th { padding:12px; text-align:left; font-weight:bold; }
.table-full th, .table-full td { padding:12px; }

/* alerts */
.alert-warning { background:#fff3cd; border:1px solid #ffc107; padding:12px; margin-bottom:20px; border-radius:3px; font-size:13px; }

/* profile edit helpers */
.sms-panel { background:#e7f3ff; border-left:4px solid #2196F3; border-radius:4px; padding:15px; margin-bottom:15px; }
.danger-panel { padding:20px; background:#fff3cd; border-left:4px solid #ffc107; border-radius:6px; margin-bottom:15px; }
.danger-section { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #ddd; }
.danger-heading { margin:0 0 10px 0; color:#856404; }
.badge-pill { display:inline-block; padding:4px 10px; border-radius:12px; font-size:11px; font-weight:bold; color:white; }
.badge-pill.color-2ecc71 { background:#2ecc71; }
.badge-pill.color-3498db { background:#3498db; }
.badge-pill.color-e74c3c { background:#e74c3c; }
.badge-pill.color-f39c12 { background:#f39c12; }
.badge-pill.color-9b59b6 { background:#9b59b6; }
.badge-pill.color-1abc9c { background:#1abc9c; }
.badge-pill.color-34495e { background:#34495e; }
.badge-pill.color-e67e22 { background:#e67e22; }

/* helper-note */
.helper-note { margin-top:20px; padding:15px; background:#e8f8f1; border-left:4px solid #2ecc71; border-radius:4px; }
.comment-reply-box { padding:15px 20px; background:#f9f9f9; border:1px solid #e0e0e0; border-radius:3px; margin-bottom:12px; }

/* review panel */
.review-panel { background:#fff; border:2px solid #ffc107; padding:20px; margin-bottom:20px; border-radius:3px; box-shadow:0 2px 4px rgba(0,0,0,0.08); }
.review-header { display:flex; justify-content:space-between; align-items:start; margin-bottom:15px; gap:10px; flex-wrap:wrap; }
.review-author { font-size:14px; }
.review-time { color:#999; font-size:11px; margin-left:10px; }
.status-pill { background:#ffc107; color:#000; padding:4px 8px; border-radius:3px; font-size:10px; font-weight:bold; }
.panel-muted { background:#f8f9fa; padding:15px; border-radius:3px; margin-bottom:15px; font-size:13px; line-height:1.6; }
.matched-tag { background:#ffe5e5; border:1px solid #ff6b6b; padding:6px 10px; border-radius:3px; font-size:11px; margin-right:6px; display:inline-block; }
.matched-tag .bad-word { color:#dc3545; }
.tag-meta { background:#ff6b6b; color:#fff; padding:2px 5px; border-radius:3px; margin-left:6px; font-size:9px; display:inline-block; }
.tag-meta.note { background:#ffc107; color:#000; }
.action-row { display:flex; gap:8px; flex-wrap:wrap; }
.btn-success { background:#28a745; color:white; }
.btn-info { background:#17a2b8; color:white; }

.btn-lg { padding:14px 28px; font-size:16px; border-radius:4px; }
.btn-danger-compact { padding:6px 10px; background:#e74c3c; color:white; border-radius:4px; }

/* helpers */
.note { font-size:13px; font-weight:600; margin:0; }
.justify-end { justify-content:flex-end; }

/* groups helpers */
.padded { padding:10px; }
.text-right { text-align:right; }
.link-strong { color:#5a9a3c; font-weight:700; text-decoration:none; }

/* Search helpers */
.tag-inline { display:inline-block; margin:3px; }
.form-padded { padding:15px; }
.page-header { padding:15px; border-bottom:1px solid #eee; }
.group-card { background:#fff; border:1px solid #e0e0e0; border-radius:6px; margin-bottom:15px; overflow:hidden; }
.group-card-header { padding:18px 20px; border-bottom:1px solid #f0f0f0; display:flex; justify-content:space-between; align-items:center; }
.group-link { color:#333; text-decoration:none; font-weight:600; font-size:15px; }
.group-desc { padding:15px 20px; color:#555; font-size:13px; line-height:1.6; }
.group-footer { padding:12px 20px; background:#fafafa; }
.group-stats td { padding:0; font-size:12px; color:#666; }
.group-footer .group-stats { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.group-footer .group-stats td { display:inline-block; }
@media (max-width: 640px) {
    .group-footer .group-stats { flex-direction:column; align-items:flex-start; }
    .group-footer .group-stats td { text-align:left; }
}
.btn-join { background:#5a9a3c; color:#fff; border:none; padding:8px 16px; border-radius:4px; font-size:12px; cursor:pointer; }
.btn-leave { background:#dc3545; color:#fff; border:none; padding:8px 16px; border-radius:4px; font-size:12px; cursor:pointer; }
.sidebar-note { font-size:11px; color:#666; line-height:1.6; }

/* site helpers */
.sidebar-card { background:#fff; padding:12px; border:1px solid #ddd; border-radius:4px; }
.no-margin { margin:0; }
.small { font-size:11px; }
.mb-6 { margin-bottom:6px; }
.btn { display:inline-block; padding:8px 12px; border-radius:4px; text-decoration:none; }
.btn-primary { background:#1e88e5; color:#fff; font-weight:600; }
.btn-secondary { background:#5a9a3c; color:#fff; font-weight:600; }
.btn-join { background:#5a9a3c; color:#fff; border:none; padding:8px 16px; border-radius:4px; font-size:12px; cursor:pointer; }
.alert { padding:10px; border-radius:4px; margin-bottom:10px; }
.alert-danger { background:#ffebee; border:1px solid #ef5350; color:#c62828; }
.alert-success { background:#e8f5e9; border:1px solid #66bb6a; color:#2e7d32; }
.post-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.toolbar-actions { display:flex; gap:6px; }
.preview-box { margin-top:10px; padding:10px; border:1px solid #eee; background:#fff; border-radius:4px; }
.preview-title { font-size:13px; color:#333; margin-bottom:6px; font-weight:600; }
.preview-error { color:#c0392b; font-weight:600; }
.preview-html { color:#333; }
.footer-cta { padding:20px; text-align:center; border-top:1px solid #eee; background:#f9f9f9; margin-top:20px; }
.footer-note { margin-bottom:15px; font-size:12px; color:#666; }
.footer-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Small layout and form helpers added during public cleanup */
.ml-10 { margin-left:10px; }
.text-center.block { display:block; text-align:center; }
.text-danger { color:#c0392b; }
.info-box { background:#f9f9f9; }
.textarea-large { width:100%; resize: vertical; box-sizing: border-box; margin-bottom:10px; padding:12px; border:1px solid #ddd; border-radius:3px; font-size:13px; }

/* Ensure entry-form sections (profile edit) fit the centered 560px layout */
.entry-form { max-width: 560px; width: 100%; box-sizing: border-box; }

/* ── Profile edit: settings cards ── */
.settings-page-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.settings-page-header .section-title { margin:0; flex:1; }
.settings-page-header .back-link { white-space:nowrap; font-size:13px; }
.settings-card {
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:10px;
    padding:22px 24px;
    margin-bottom:16px;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.settings-card.premium-card { border-left:4px solid #2ecc71; background:linear-gradient(135deg,#f6fff9 0%,#fff 60%); }
.settings-card.danger-card  { border-left:4px solid #e74c3c; background:#fffaf9; }
.settings-card.mt-20 { margin-top:20px; }
.settings-card-title {
    font-size:15px;
    font-weight:700;
    margin:0 0 16px 0;
    padding-bottom:10px;
    border-bottom:1px solid #f0f0f0;
    color:#222;
}
/* Event code row */
.event-code-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.event-code-display {
    font-family:monospace;
    font-weight:700;
    font-size:15px;
    padding:8px 14px;
    background:#f5f5f5;
    border-radius:6px;
    border:1px solid #e0e0e0;
    letter-spacing:.05em;
}
/* Badge preview */
.badge-preview-row { display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; background:#f8f8f8; border-radius:8px; border:1px dashed #ddd; }
.badge-preview-label { font-size:12px; font-weight:600; color:#666; }
/* Checkbox list */
.checkbox-list { display:flex; flex-direction:column; gap:2px; }
.checkbox-row { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; cursor:pointer; font-size:14px; transition:background .15s; }
.checkbox-row:hover { background:#f5f5f5; }
.checkbox-row input[type="checkbox"] { width:16px; height:16px; flex-shrink:0; cursor:pointer; }
.checkbox-sublist { padding-left:26px; display:flex; flex-direction:column; gap:2px; border-left:2px solid #eee; margin-left:8px; }
/* Danger divider */
.danger-divider { border:none; border-top:1px solid #f5c6c6; margin:18px 0; }
/* Danger section spacing */
.danger-section { margin-bottom:4px; }

/* Premium helpers previously added (ensure present) */
.flash-info { background:#e8f4ff;border:1px solid #cfe8ff;color:#084298;padding:10px;border-radius:6px;margin-bottom:10px; }
.flash-warning { background:#fff8e6;border:1px solid #ffebc2;color:#6a4b00;padding:10px;border-radius:6px;margin-bottom:10px; }
.demo-card-box { border:1px dashed #cfe8ff;background:#fbfdff;padding:12px;border-radius:6px;margin-bottom:14px; }
.muted-bg { background:#f8faff; padding:8px; border-radius:4px; border:1px solid #e0e0e0; }
.list-compact { margin:6px 0 0 20px; color:#666; }
.btn-lg { padding:14px 28px; font-size:16px; border-radius:4px; }

.inline-form { display:inline; }
.muted.small { color:#999; font-size:11px; }
.text-right { text-align:right; }
.nav-item { padding:6px 0; }
.link-reset { text-decoration:none; color:inherit; }
.form-inline { margin:0; display:inline-flex; gap:8px; align-items:center; }
.sidebar-banner { background:#f0f9ff; border:1px solid #90caf9; position:relative; }
.banner-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.8); display:flex; align-items:center; justify-content:center; z-index:10; border-radius:4px; }
.badge-primary { background:#1976d2; color:#fff; padding:4px 10px; border-radius:3px; font-size:11px; font-weight:bold; }


/* dev debug helpers */
.dev-debug { padding:12px; background:#fff; margin:12px; }
.dev-debug-warning { border:2px dashed #f39c12; }
.dev-debug-info { border:2px dashed #8e44ad; }
.dev-debug-error { border:2px solid #ff6b6b; background:#ffecec; }
.pre-debug { white-space:pre-wrap; font-size:12px; }



/* Poll description inside poll block - make entire text clickable without changing color */
.poll-description-link {
    color: inherit;
    text-decoration: none;
    display: block;
}
.poll-description-link:hover {
    text-decoration: underline;
}

/* Ensure poll description and test title links are green and un-underlined */
.post-test .test-title a,
.poll-description-link {
    color: #553b08; /* same green as buttons */
    text-decoration: none;
}
.post-test .test-title a:hover,
.poll-description-link:hover {
    text-decoration: underline;
}

/* Adjust poll description style: bold, no underline ever */
.poll-description-link {
    font-weight: 600;
    text-decoration: none !important;
}
.poll-description-link:hover {
    text-decoration: none !important;
}

/* Indent poll/test options slightly to the right for better alignment with question */
.poll-option, .test-option {
    margin-left: 12px;
}

/* rookie banner styling is now inline within header.php; no classes used to avoid adblock interference */
/* header for poll/test blocks — always stack vertically to prevent title/description collision */
.block-header { display:flex; flex-direction: column; align-items: stretch; gap: 8px; }
.block-header .test-title { margin-bottom:0; min-width: 0; }
.block-header .poll-description { margin:0; min-width: 0; }
.block-buttons { margin-left:auto; display:flex; gap:8px; flex-wrap: wrap; }
.post-card.post-poll .block-buttons, .post-card.post-test .block-buttons { width:100% !important; margin-top:8px !important; justify-content:flex-start !important; }

@media (max-width: 900px) {
    .block-buttons { width:100% !important; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }
    .post-actions-buttons { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
    .post-actions-buttons .btn-small, .post-actions-buttons .btn-post, .post-actions-buttons .btn-outline { width: auto !important; flex: 1 1 auto !important; min-width: 110px !important; }
    .post-test .poll-option, .post-test .test-option { margin-left: 0; }
    .post-test .test-question, .post-test .test-result { width: 100%; }
}
/* reduce padding above buttons in poll/test blocks */
.post-test .block-header { margin-top: -4px; }
/* additional correction inside main feed items only */
.post-feed-item .post-test .block-header { margin-top: 0; }
/* eliminate padding above header for feed items */
.post-feed-item .post-test { padding-top: 0; margin-top: 0; }

/* also fix main timeline which uses post-card wrappers instead of post-feed-item */
.post-card .post-test .block-header { margin-top: 0; }
.post-card .post-test { padding-top: 0; margin-top: 0; }

/* eliminate header bottom gap when poll/test immediately follows */
.post-card-header + .post-test,
.post-card-header + .post-poll { margin-bottom: 0; }

/* ─── Announcement Archive Sidebar ────────────────── */
.archive-group { margin-bottom: 14px; }
.archive-group:last-child { margin-bottom: 0; }
.archive-group-title {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: #555;
    letter-spacing: .4px;
    padding: 6px 10px 4px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 4px;
}
.archive-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.archive-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.4;
    border-bottom: 1px dotted #eee;
}
.archive-list li:last-child { border-bottom: none; }
.archive-list li.active { background: #f0f7eb; font-weight: 600; }
.archive-list li a {
    color: #333;
    text-decoration: none;
    flex: 1;
    margin-right: 6px;
    word-break: break-word;
}
.archive-list li a:hover { color: #5a9a3c; text-decoration: underline; }
.archive-list li .muted { flex-shrink: 0; }
.archive-list--stacked li { flex-direction: column; align-items: flex-start; }
.archive-list--stacked li a { margin-right: 0; }
.archive-list--stacked li .muted { margin-top: 2px; }

/* Announcement archive listing in content area */
.announcement-archive-list { display: flex; flex-direction: column; gap: 8px; }
.announcement-archive-list .announcement-box { padding: 12px 14px; }

/* ─── Poll UI v2 (May 2026) ────────────────────────── */

/* Creation form */
.poll-form-row {
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    max-width: 560px;
}
.poll-char-counter {
    text-align: right;
    font-size: 11px;
    color: #999;
    margin-top: 3px;
}
.poll-options-builder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.poll-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.poll-option-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: #e8f5e9;
    color: #5a9a3c;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.poll-option-input-field {
    flex: 1;
    min-width: 0;
}
.poll-option-remove {
    background: none;
    border: none;
    color: #aaa;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
    transition: color .15s;
}
.poll-option-remove:hover { color: #c0392b; }
.poll-option-remove-placeholder {
    display: inline-block;
    width: 26px;
    flex-shrink: 0;
}
.poll-add-option-wrap {
    margin-top: 10px;
}
.btn-outline-green {
    background: #fff;
    border: 1px solid #5a9a3c;
    color: #5a9a3c;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-outline-green:hover {
    background: #5a9a3c;
    color: #fff;
}

/* Poll block — option cards (before voting) */
.poll-option-card {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: #fafafa;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.poll-option-card:hover {
    border-color: #5a9a3c;
    background: #f0f7eb;
}
.poll-option-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    width: 100%;
    margin: 0;
    font-size: 14px;
}
.poll-option-label input[type="radio"] {
    flex-shrink: 0;
    accent-color: #5a9a3c;
    width: 16px;
    height: 16px;
}

/* Poll block — results (after voting) */
.poll-result-row {
    margin-bottom: 12px;
}
.poll-result-row {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebebeb;
}
.poll-result-row:last-child {
    border-bottom: none;
}
.poll-result-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
}
.poll-result-text {
    font-weight: 600;
}
.poll-result-stats {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}
.poll-bar {
    width: 100%;
    height: 12px;
    background: #e0e0e0;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.poll-bar-fill {
    height: 100%;
    background: #5a9a3c;
    border-radius: 999px;
    width: 0;
    transition: width .3s ease;
}
.poll-total-votes {
    text-align: right;
    font-size: 12px;
    color: #777;
    margin-top: 8px;
}
.poll-result-row--voted .poll-result-text {
    color: #3a7a22;
    font-weight: 700;
}
.poll-voted-check {
    color: #3a7a22;
    font-weight: 700;
    margin-left: 4px;
}