/* ============================================================
   مجتمع محمود أبو زيد — "Literary gold-leaf" editorial theme
   Warm paper · charcoal ink · gold leaf · Aref Ruqaa display + Readex Pro UI
   Loaded site-wide after the HumHub theme (served from /static/branding.css).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&family=Aref+Ruqaa:wght@400;700&display=swap');

:root {
    --mb-paper: #F4F0E6;          /* page: warm paper */
    --mb-paper-2: #EFE9DB;        /* deeper paper */
    --mb-card: #FFFDF8;           /* warm white card */
    --mb-ink: #11130F;            /* charcoal ink */
    --mb-ink-soft: #4a4a42;
    --mb-gold: #C8A24A;
    --mb-gold-dark: #9f7e34;
    --mb-gold-light: #E6CD86;
    --mb-gold-soft: rgba(200, 162, 74, 0.13);
    --mb-cyan: #2BA7E0;           /* link (slightly deeper than #45C2FF for contrast on cream) */
    --mb-line: #E6DECC;
    --mb-radius: 16px;
    --mb-shadow: 0 1px 2px rgba(17,19,15,0.04), 0 10px 30px rgba(159,126,52,0.08);
    --mb-shadow-hover: 0 2px 4px rgba(17,19,15,0.05), 0 18px 44px rgba(159,126,52,0.16);
    --mb-display: 'Aref Ruqaa', 'Readex Pro', serif;
    --mb-ui: 'Readex Pro', system-ui, 'Segoe UI', Tahoma, sans-serif;

    /* Bootstrap-5 properties HumHub builds on */
    --bs-body-bg: var(--mb-paper);
    --bs-body-color: var(--mb-ink);
    --bs-primary: var(--mb-gold);
    --bs-primary-rgb: 200, 162, 74;
    --bs-link-color: var(--mb-cyan);
    --bs-link-hover-color: #1f8ec2;
    --bs-border-radius: var(--mb-radius);
    --bs-font-sans-serif: var(--mb-ui);
}

/* ---- Typography ---- */
body, button, input, select, textarea, .btn,
.layout-nav-container, .panel, .wall-entry, .s2_stream,
.navbar, #topbar-first, #topbar-second, .panel-heading {
    font-family: var(--mb-ui) !important;
}
body {
    background: var(--mb-paper) !important;
    color: var(--mb-ink) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { color: var(--mb-ink) !important; font-weight: 600 !important; letter-spacing: -0.2px; }

/* ---- Paper atmosphere: faint grain + warm gold glow (fixed, behind everything) ---- */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(900px 420px at 50% -8%, rgba(200,162,74,0.12), transparent 62%),
        radial-gradient(700px 700px at 100% 100%, rgba(200,162,74,0.06), transparent 60%);
}
body::after {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}
#wrap, .container, .container-fluid, .content-container, .background-color-page { position: relative; z-index: 1; background: transparent !important; }

a { color: var(--mb-cyan); text-decoration: none; }
a:hover, a:focus { color: #1f8ec2; }
.text-primary, .colorInfo { color: var(--mb-gold-dark) !important; }

/* ---- Top navigation: light "letterhead" bar with a thin gold rule ---- */
#topbar-first {
    background: rgba(255,253,248,0.92) !important;
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--mb-line) !important;
    box-shadow: 0 1px 0 rgba(200,162,74,0.5), 0 4px 18px rgba(17,19,15,0.05) !important;
}
#topbar-first a, #topbar-first .nav > li > a, #topbar-first .dropdown-toggle, #topbar-first .caret {
    color: var(--mb-ink) !important; opacity: 1; transition: background .2s, color .2s;
}
/* Topbar icon buttons (bell / envelope / account) ship with a DARK-TEAL default
   background from the stock theme (#4d6d7f / #435f6f). Combined with our charcoal
   icon color that reads as charcoal-on-dark = unreadable. Reset them to light
   "chips" that match the letterhead, with a gold-tint hover. */
#topbar-first #icon-notifications,
#topbar-first #icon-messages,
#topbar-first #account-dropdown-link,
#topbar-first .account > a,
#topbar-first .nav > li > a {
    background: transparent !important;
    color: var(--mb-ink) !important;
    border-radius: 10px !important;
    transition: background .18s ease, color .18s ease;
}
#topbar-first #icon-notifications i,
#topbar-first #icon-messages i,
#topbar-first #account-dropdown-link i,
#topbar-first .nav > li > a i { color: var(--mb-ink) !important; }
/* Hover / open: light gold-tint chip, gold-dark glyphs (never gold-on-dark) */
#topbar-first #icon-notifications:hover,
#topbar-first #icon-messages:hover,
#topbar-first #account-dropdown-link:hover,
#topbar-first .nav > li > a:hover,
#topbar-first .nav > li > a:focus,
#topbar-first .nav > li.open > a,
#topbar-first li.open #icon-notifications,
#topbar-first li.open #icon-messages,
#topbar-first .account.open > a,
#topbar-first .dropdown.open > .dropdown-toggle {
    background: var(--mb-gold-soft) !important;
    color: var(--mb-gold-dark) !important;
}
#topbar-first #icon-notifications:hover i,
#topbar-first #icon-messages:hover i,
#topbar-first #account-dropdown-link:hover i,
#topbar-first .nav > li > a:hover i,
#topbar-first .nav > li.open > a i { color: var(--mb-gold-dark) !important; }
/* Account chip (top-right name + avatar): a calm light pill that FLOATS in the
   bar (vertical margin) with its avatar + name cleanly centered and balanced
   top/bottom breathing room (the avatar's tier-asterisk overflows the top, so
   it needs clearance from the pill edge). */
#topbar-first #account-dropdown-link {
    background: var(--mb-gold-soft) !important;
    border: 1px solid var(--mb-line) !important;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px;
    margin-block: 4px;
    min-height: 0;
    line-height: 1.2;
}
#topbar-first .nav > li.active > a, #topbar-first .nav > li.current > a {
    color: var(--mb-gold-dark) !important; opacity: 1; box-shadow: inset 0 -3px 0 var(--mb-gold);
}
/* Notification / mail count badges -> gold leaf */
#topbar-first .label-danger, #topbar-first .badge, #topbar-first .notification-badge {
    background: linear-gradient(180deg, var(--mb-gold-light), var(--mb-gold)) !important;
    color: #2a2008 !important; border: none !important;
}

/* Topbar dropdown menus (account / notifications / messages) ship as a dark-teal
   panel (#435f6f) with charcoal items = unreadable. Re-cast them as the same warm
   paper card as the rest of the UI: cream sheet, gold top-edge, gold-tint hover. */
#topbar-first .dropdown-menu {
    background: var(--mb-card) !important;
    border: 1px solid var(--mb-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--mb-shadow-hover) !important;
    padding: 6px !important;
    overflow: hidden;
    color: var(--mb-ink) !important;
}
/* editorial gold hairline along the menu's top edge */
#topbar-first .dropdown-menu::before {
    content: ""; display: block; height: 2px; margin: -6px -6px 6px;
    background: linear-gradient(90deg, var(--mb-gold-light), var(--mb-gold), var(--mb-gold-light));
}
#topbar-first .dropdown-menu .dropdown-item,
#topbar-first .dropdown-menu > li > a {
    color: var(--mb-ink) !important;
    border-radius: 9px !important;
    padding: 8px 12px !important;
    transition: background .16s ease, color .16s ease;
}
#topbar-first .dropdown-menu .dropdown-item i,
#topbar-first .dropdown-menu > li > a i {
    color: var(--mb-gold-dark) !important; opacity: .9;
}
#topbar-first .dropdown-menu .dropdown-item:hover,
#topbar-first .dropdown-menu .dropdown-item:focus,
#topbar-first .dropdown-menu .dropdown-item:active,
#topbar-first .dropdown-menu .dropdown-item.active,
#topbar-first .dropdown-menu > li > a:hover,
#topbar-first .dropdown-menu > li > a:focus,
#topbar-first .dropdown-menu > li > a:active,
#topbar-first .dropdown-menu > li > a.active {
    background: rgba(200, 162, 74, 0.07) !important;   /* lighter than --mb-gold-soft */
    background-image: none !important;                 /* kill any gradient/solid leak */
    color: var(--mb-gold-dark) !important;
    box-shadow: none !important;
}
#topbar-first .dropdown-menu .dropdown-item:hover i,
#topbar-first .dropdown-menu > li > a:hover i { color: var(--mb-gold-dark) !important; opacity: 1; }
/* account/topbar menus: the THEME paints the <li> itself SOLID gold on hover
   (theme.css: `.account .dropdown-menu li:hover { background: rgb(191,151,58) }`),
   which sits UNDER the transparent <a>. So we must lighten the <li>, not just the
   link. Light tint on the row; keep the link transparent. */
html #topbar-first .dropdown-menu li:hover,
html #topbar-first .dropdown-menu li.selected,
html #topbar-first #account-top-menu .dropdown-menu li:hover,
html #topbar-first #account-top-menu .dropdown-menu li.selected,
html .account .dropdown-menu li:hover,
html .account .dropdown-menu li.selected {
    background: rgba(200, 162, 74, 0.07) !important;
    background-image: none !important;
    box-shadow: none !important;
}
html #topbar-first #account-top-menu .dropdown-menu .dropdown-item:hover,
html #topbar-first #account-top-menu .dropdown-menu .dropdown-item:focus,
html #topbar-first #account-top-menu .dropdown-menu .dropdown-item.active,
html #topbar-first #account-top-menu .dropdown-menu li > a:hover {
    background: transparent !important;   /* the <li> carries the tint now */
    color: var(--mb-gold-dark) !important;
}
#topbar-first .dropdown-menu .dropdown-divider,
#topbar-first .dropdown-menu .divider {
    border-top: 1px solid var(--mb-line) !important; margin: 6px 4px !important;
}
#topbar-first .dropdown-menu .dropdown-header,
#topbar-first .dropdown-menu .panel-heading {
    color: var(--mb-gold-dark) !important; font-weight: 600 !important; background: transparent !important;
}
/* notification / message dropdown bodies + their text on the new light sheet */
#topbar-first .dropdown-menu .media-body,
#topbar-first .dropdown-menu .text-muted,
#topbar-first .dropdown-menu p,
#topbar-first .dropdown-menu small { color: var(--mb-ink-soft) !important; }

/* ---- Topbar notification / message dropdown rows (.hh-list > a.d-flex) — avatar↔text
   rhythm. HumHub stretches the avatar wrapper to the full (tall) row height and its `pt-1`
   drops the 32px avatar below the first text line; the timestamp is also cramped right
   after a <br>. Fix: top-align the avatar to the first line, own the gap (kills the
   stray `me-3`), comfortable line-height + row padding, and give the timestamp a caption
   gap. Scoped to #topbar-first so the messages dropdown gets the same clean rhythm. */
#topbar-first .dropdown-menu .hh-list > a {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px !important; border-radius: 10px; line-height: 1.55;
}
#topbar-first .dropdown-menu .hh-list > a:hover { background: rgba(200, 162, 74, 0.07) !important; }
#topbar-first .dropdown-menu .hh-list > a > .img-profile-space {
    flex: 0 0 auto; align-self: flex-start; margin: 0 !important; padding: 0 !important;
}
#topbar-first .dropdown-menu .hh-list > a > .flex-grow-1 { min-width: 0; font-size: 13px; }
#topbar-first .dropdown-menu .hh-list > a time { display: inline-block; margin-top: 4px; font-size: 11px; }
#topbar-first .dropdown-menu .hh-list > a > .order-last { align-self: flex-start; margin: 2px 0 0 0 !important; }

/* ---- MESSAGES conversation rows (.mail-inbox-messages .messagePreviewEntry) ----
   The SAME entry partial renders in TWO places: the topbar messages dropdown
   (#topbar-first .dropdown-menu) AND the full Mail page conversation sidebar
   (#mail-conversation-overview). HumHub builds each preview as `.messagePreviewEntry >
   .mail-link > .d-flex` (avatar in `.flex-shrink-0.me-2`, body in `.text-break.flex-grow-1`),
   NOT the `.hh-list > a` markup the notification block above targets — and out of the box
   the rows carry no padding and only an 8px `me-2` avatar gap, so the avatar sits cramped
   against the name + message. Give BOTH locations the same avatar↔text rhythm (spacing
   only; the mail module keeps its name+time / subject / preview layout): padded rounded
   rows, 12px avatar gap (override the 8px me-2), top-aligned avatar, gold-tint hover,
   comfortable line-height. (The dropdown was fixed first — this just extends the exact
   same rules to the full-page sidebar so they match.) */
#topbar-first .dropdown-menu.mail-inbox-messages .messagePreviewEntry .mail-link,
#mail-conversation-overview.mail-inbox-messages .messagePreviewEntry .mail-link {
    padding: 10px 12px; border-radius: 10px; transition: background .16s ease;
}
#topbar-first .dropdown-menu.mail-inbox-messages .messagePreviewEntry:hover .mail-link,
#mail-conversation-overview.mail-inbox-messages .messagePreviewEntry:hover .mail-link {
    background: rgba(200, 162, 74, 0.07);
}
#topbar-first .dropdown-menu.mail-inbox-messages .messagePreviewEntry .mail-link > .d-flex,
#mail-conversation-overview.mail-inbox-messages .messagePreviewEntry .mail-link > .d-flex {
    align-items: flex-start; gap: 12px; line-height: 1.55;
}
#topbar-first .dropdown-menu.mail-inbox-messages .messagePreviewEntry .flex-shrink-0,
#mail-conversation-overview.mail-inbox-messages .messagePreviewEntry .flex-shrink-0 {
    margin: 0 !important; align-self: flex-start;   /* own the gap via gap:12px, kills me-2 */
}
#topbar-first .dropdown-menu.mail-inbox-messages .messagePreviewEntry .text-break,
#mail-conversation-overview.mail-inbox-messages .messagePreviewEntry .text-break { min-width: 0; }

/* ---- Mobile: keep topbar dropdowns inside the viewport ----
   The stock notifications/messages panels ship a fixed width and are anchored to
   the icon near the screen edge, so on a narrow RTL phone they overflow off-screen
   (half the card is clipped past the viewport). Re-anchor every #topbar-first
   dropdown as a fixed sheet pinned just under the bar, spanning the width with an
   8px gutter on both sides and scrolling vertically when the list is long. Desktop
   (≥768px) is untouched. Covers absolute- and Popper/transform-positioned menus. */
@media (max-width: 767.98px) {
    #topbar-first .dropdown-menu,
    #topbar-first .dropdown-menu.show,
    #topbar-first .open > .dropdown-menu {
        position: fixed !important;
        inset: 56px 8px auto 8px !important;   /* top · right · bottom · left */
        transform: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - 68px) !important;
        max-height: calc(100dvh - 68px) !important;  /* dodge mobile browser chrome */
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* neutralize any inline width on the notification / message panels + drop the
       stock pointer caret (it would float, detached from the icon, at full width) */
    #topbar-first #notification_badge .dropdown-menu,
    #topbar-first #message_badge .dropdown-menu,
    #topbar-first .dropdown-menu.preferences { width: auto !important; }
    #topbar-first .dropdown-menu::after { display: none !important; }
}

/* ---- Profile / space header action menus only (gear + "more") ----
   Narrowly scoped so the rich-text editor toolbar, emoji picker, select2, and
   other widget dropdowns are NEVER touched. Just a light tidy-up: cream sheet +
   gold-tint item hover. No padding/overflow/!important layout overrides. */
.controls .dropdown-menu,
.space-cover-container .dropdown-menu,
#profile-header .dropdown-menu {
    background: var(--mb-card);
    border: 1px solid var(--mb-line);
    border-radius: 10px;
    box-shadow: var(--mb-shadow-hover);
}
.controls .dropdown-menu .dropdown-item:hover,
.controls .dropdown-menu .dropdown-item:focus,
.space-cover-container .dropdown-menu .dropdown-item:hover,
#profile-header .dropdown-menu .dropdown-item:hover {
    background: var(--mb-gold-soft);
    color: var(--mb-gold-dark);
}
/* Comfortable item rows + breathing room (default HumHub rows are a tight 4px),
   and a clear gap between the leading icon and the label in RTL. */
.controls .dropdown-menu,
.space-cover-container .dropdown-menu,
#profile-header .dropdown-menu { padding-block: 6px; }
.controls .dropdown-menu .dropdown-item,
.space-cover-container .dropdown-menu .dropdown-item,
#profile-header .dropdown-menu .dropdown-item {
    padding-block: 7px;
    padding-inline: 16px;
}
.controls .dropdown-menu .dropdown-item > i,
.space-cover-container .dropdown-menu .dropdown-item > i,
#profile-header .dropdown-menu .dropdown-item > i { margin-inline-start: 9px; }

/* ---- Conversation settings menu (mail module) ----
   The ⌄ menu in a private-conversation header (Tags / Add user / Mark Unread /
   Pin / Leave conversation). It lives inside the conversation panel — NOT under
   #topbar-first and NOT inside .controls/.space-cover-container/#profile-header —
   so it never picked up any of the branded dropdown rules and fell through to the
   bare core Bootstrap dropdown: a tight ~4px row, no brand, cramped in RTL. Give
   it the SAME treatment as the profile/space action menus above (cream sheet,
   gold-tint hover, comfortable 7px/16px rows, 9px leading-icon gap), scoped to the
   trigger via aria-labelledby so no other dropdown on the page is affected. */
.dropdown-menu[aria-labelledby="conversation-settings-button"] {
    background: var(--mb-card);
    border: 1px solid var(--mb-line);
    border-radius: 10px;
    box-shadow: var(--mb-shadow-hover);
    padding-block: 6px;
    min-width: 190px;
}
.dropdown-menu[aria-labelledby="conversation-settings-button"] .dropdown-item {
    display: flex;            /* gap works regardless of icon-vs-label DOM order / RTL */
    align-items: center;
    gap: 9px;                 /* the icon→label breathing room (HumHub renders them flush) */
    padding-block: 7px;
    padding-inline: 16px;
}
.dropdown-menu[aria-labelledby="conversation-settings-button"] .dropdown-item > i {
    flex: 0 0 auto;           /* never let the icon shrink/stretch */
}
.dropdown-menu[aria-labelledby="conversation-settings-button"] .dropdown-item:hover,
.dropdown-menu[aria-labelledby="conversation-settings-button"] .dropdown-item:focus {
    background: var(--mb-gold-soft);
    color: var(--mb-gold-dark);
}

/* little caret/arrow above the menu, if the theme draws one */
#topbar-first .dropdown-menu::after { border-bottom-color: var(--mb-card) !important; }
#topbar-first #logo img, .navbar-brand img { max-height: 40px; width: auto; }
#topbar-second { background: rgba(244,240,230,0.96) !important; border-bottom: 1px solid var(--mb-line) !important; }
#topbar-second a, #topbar-second .nav > li > a { color: var(--mb-ink) !important; }

/* ---- Cards / panels: warm paper sheets with a gold leaf top edge ----
   NOTE: do NOT set overflow:hidden here — it clips dropdowns/popovers/menus that
   pop out of a panel (rich-text editor toolbar, composer gear, space gear,
   select2, emoji picker...). Rounded corners still work with overflow visible. */
.panel, .card, .well, .s2_stream .wall-entry {
    background: var(--mb-card) !important;
    border: 1px solid var(--mb-line) !important;
    border-radius: var(--mb-radius) !important;
    box-shadow: var(--mb-shadow) !important;
    transition: box-shadow .25s ease, transform .25s ease;
}
.wall-entry:hover { box-shadow: var(--mb-shadow-hover) !important; transform: translateY(-2px); }
/* A post whose action ⋮ menu is OPEN must beat its neighbours in stacking order.
   The hover-lift above creates a NEW stacking context on whichever .wall-entry
   the cursor is over (any `transform` value spawns one). When the cursor moves
   from the open menu into the post BELOW, that lower post's transform-context
   paints on top of the previous post — and the open menu (which is laid out
   inside the previous post's panel) silently gets clipped behind it. Lifting
   the post-with-open-menu to a real positive z-index keeps the menu on top.
   Browser support: :has() is Chrome 105+ / Safari 15.4+ / Firefox 121+. */
.s2_stream .wall-entry:has(.preferences .dropdown-menu.show),
.wall-entry:has(.preferences .dropdown-menu.show),
.panel.panel-default:has(.preferences .dropdown-menu.show) {
    position: relative;
    z-index: 5;
}
/* While the menu is open, suppress the wall-entry's own hover lift so the
   cursor traversing from header → menu items doesn't ping-pong the post
   up-and-down beneath an already-open panel. */
.wall-entry:has(.preferences .dropdown-menu.show):hover {
    transform: none !important;
}
.panel-heading, .card-header {
    background: var(--mb-card) !important;
    border-bottom: 1px solid var(--mb-line) !important;
    color: var(--mb-ink) !important; font-weight: 600 !important;
    position: relative; padding-inline-start: 18px;
}
/* gold accent marker before panel titles (editorial) */
.panel-heading::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 18px; border-radius: 4px;
    background: linear-gradient(180deg, var(--mb-gold-light), var(--mb-gold));
}
.wall-entry { margin-bottom: 20px; }

/* ---- Buttons: gold-leaf ---- */
.btn { border-radius: 11px !important; font-weight: 500 !important; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; }
.btn-primary, .btn-info {
    background: linear-gradient(180deg, var(--mb-gold-light), var(--mb-gold)) !important;
    border: 1px solid var(--mb-gold-dark) !important;
    color: #2a2008 !important; font-weight: 600 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 3px 10px rgba(159,126,52,0.22) !important;
}
.btn-primary:hover, .btn-info:hover {
    background: linear-gradient(180deg, var(--mb-gold), var(--mb-gold-dark)) !important;
    color: #1a1407 !important; transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 16px rgba(159,126,52,0.30) !important;
}
.btn-primary:active, .btn-info:active { transform: translateY(0); }
.btn-default {
    background: var(--mb-card) !important; border: 1px solid var(--mb-line) !important; color: var(--mb-ink) !important;
}
.btn-default:hover { background: var(--mb-gold-soft) !important; border-color: var(--mb-gold) !important; }
.label-info, .badge-info, .tag { background: var(--mb-gold) !important; color: #2a2008 !important; }

/* ---- Inputs ---- */
.form-control, input, textarea, select {
    border-radius: 11px !important; border: 1px solid var(--mb-line) !important;
    background: #fffefb !important; color: var(--mb-ink) !important; transition: border-color .2s, box-shadow .2s;
}
.form-control:focus { border-color: var(--mb-gold) !important; box-shadow: 0 0 0 4px var(--mb-gold-soft) !important; }

/* ---- left/space nav active ---- */
.layout-nav li.active a, .nav-pills > li.active > a, .list-group-item.active {
    background: var(--mb-gold-soft) !important; color: var(--mb-gold-dark) !important; border-radius: 9px !important;
}

/* ============================================================
   LOGIN / GUEST — the signature moment
   ============================================================ */
body.layout-default, body.login-page { background: var(--mb-paper) !important; }

/* Brand title in calligraphic gold with a flourish rule */
#app-title, .container-login #app-title {
    font-family: var(--mb-display) !important;
    color: var(--mb-gold-dark) !important;
    font-weight: 700 !important;
    font-size: clamp(34px, 6vw, 54px) !important;
    line-height: 1.25 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    margin-bottom: 6px !important;
    position: relative;
}
.container-login { padding-top: 8px; }
/* gold flourish divider under the title */
#app-title::after {
    content: "❖"; display: block; margin: 10px auto 0; width: max-content;
    color: var(--mb-gold); font-size: 16px; opacity: 0.9;
    position: relative;
}
#app-title::before {
    content: ""; display: block; width: 120px; height: 1px; margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, var(--mb-gold), transparent);
}

/* staggered entrance for the login cards */
@keyframes mb-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.container-login .panel { animation: mb-rise .55s cubic-bezier(.2,.7,.2,1) both; }
.container-login .panel:nth-of-type(1) { animation-delay: .05s; }
.container-login .panel:nth-of-type(2) { animation-delay: .15s; }
.container-login .panel:nth-of-type(3) { animation-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .container-login .panel { animation: none; } }

/* ---- Custom gold scrollbar ---- */
* { scrollbar-color: var(--mb-gold) var(--mb-paper); scrollbar-width: thin; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: var(--mb-paper); }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--mb-gold-light), var(--mb-gold)); border-radius: 8px; border: 3px solid var(--mb-paper); }
*::-webkit-scrollbar-thumb:hover { background: var(--mb-gold-dark); }

/* ---- White-label: hide any HumHub attribution (belt-and-suspenders) ---- */
.powered-by, .poweredby, #footer-powered, .footer-powered, .powered, a[href*="humhub.com"][rel] { display: none !important; }

/* ---- RTL niceties ---- */
html[dir="rtl"] body { text-align: right; }
/* Logical-property guards so nothing leaks to the wrong side in RTL */
html[dir="rtl"] .panel-heading { padding-inline-start: 18px; padding-inline-end: 15px; }
html[dir="rtl"] .layout-nav li.active a,
html[dir="rtl"] .nav-pills > li.active > a { text-align: start; }
/* Space cover / profile header sits correctly RTL */
html[dir="rtl"] .space-cover-container .controls,
html[dir="rtl"] .profile-controls { inset-inline-end: 16px; inset-inline-start: auto; }
html[dir="rtl"] .img-profile-data { text-align: start; }
/* Dropdown menus align to the start edge in RTL */
html[dir="rtl"] #topbar-first .dropdown-menu { text-align: right; }
/* Notification/mail count badge offset (logical) */
html[dir="rtl"] #topbar-first .label-danger,
html[dir="rtl"] #topbar-first .badge { inset-inline-end: auto; inset-inline-start: 0; }

/* ============================================================
   RTL — physical Bootstrap 5 utilities that do NOT auto-flip with dir=rtl.
   (flex/grid + ms/me/ps/pe logical utils already flip via the <html dir>.)
   ============================================================ */
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }
html[dir="rtl"] .border-start { border-right: 1px solid var(--bs-border-color, var(--mb-line)) !important; border-left: 0 !important; }
html[dir="rtl"] .border-end { border-left: 1px solid var(--bs-border-color, var(--mb-line)) !important; border-right: 0 !important; }
html[dir="rtl"] .rounded-start { border-radius: 0 var(--mb-radius) var(--mb-radius) 0 !important; }
html[dir="rtl"] .rounded-end { border-radius: var(--mb-radius) 0 0 var(--mb-radius) !important; }
/* dropdowns: let Popper place them, but keep menu text/alignment RTL */
html[dir="rtl"] .dropdown-menu { text-align: right; }

/* ---- HumHub-specific leaks (patched via visual iteration) ---- */
/* the panel gold accent marker -> right edge in RTL */
html[dir="rtl"] .panel-heading::before { inset-inline-start: 0; inset-inline-end: auto; }
/* controls / action buttons on cards align to the start (left in RTL) */
html[dir="rtl"] .panel-heading .pull-right,
html[dir="rtl"] .pull-right { float: left !important; }
html[dir="rtl"] .pull-left { float: right !important; }
/* breadcrumb separators / direction */
html[dir="rtl"] .breadcrumb { flex-direction: row; }
/* checkboxes / radios: keep label spacing logical */
html[dir="rtl"] .form-check { padding-inline-start: 1.5em; padding-inline-end: 0; }
html[dir="rtl"] .form-check .form-check-input { float: right; margin-inline-start: -1.5em; margin-inline-end: 0; }

/* Radios/checkboxes — make the CHECKED state clearly visible (gold). The stock
   branding left selected controls with no visible fill, so users couldn't tell
   what was chosen. Covers Bootstrap .form-check-input AND plain native inputs. */
input[type="radio"], input[type="checkbox"] { accent-color: var(--mb-gold-dark); }
.form-check-input { border-color: var(--mb-line); }
.form-check-input:checked {
    background-color: var(--mb-gold-dark) !important;
    border-color: var(--mb-gold-dark) !important;
}
.form-check-input:focus {
    border-color: var(--mb-gold) !important;
    box-shadow: 0 0 0 0.2rem var(--mb-gold-soft) !important;
}
/* input groups + dropdown carets read correctly */
html[dir="rtl"] .caret { margin-inline-start: 2px; }

/* ---- RTL refinements (login, cover titles, space chooser) ---- */
/* Login / register: HumHub's guest layout hardcodes the form panels to
   text-align:left; force right so the Arabic content reads RTL. */
html[dir="rtl"] body.login-container #login-form,
html[dir="rtl"] body.login-container #register-form,
html[dir="rtl"] body.login-container .panel,
html[dir="rtl"] body.login-container .panel-body,
html[dir="rtl"] body.login-container .form-check-label { text-align: right !important; }
/* Password show/hide eye: HumHub inline-positions `.humhub-pw-show` at right:2px;
   in RTL flip it to the left edge of the field (overrides the inline style). */
html[dir="rtl"] .humhub-pw-show { right: auto !important; left: 2px !important; }
/* Cover titles (space + profile) sit flush against the right edge in RTL —
   give the name internal padding so it isn't glued to the edge. */
html[dir="rtl"] .img-profile-data { padding-right: 24px; }
html[dir="rtl"] .controls-header { padding-right: 24px; }

/* Align the space 3-column row to the cover/header above it. HumHub's
   .space-content row carries Bootstrap's negative gutter (margin -15px), so the
   columns run 15px wider on each side than the cover panel — the right space
   menu then juts ~15px past the cover edge and reads as "cut off". Zero the
   row's side margins so the columns line up flush under the cover. */
.space-layout-container .space-content { margin-inline: 0; }

/* Same negative-gutter overflow on the Spaces/People DIRECTORY card grid: the
   `.row.cards` runs 15px wider than its `.container.gx-0.overflow-x-hidden`
   wrapper, so the rightmost card's right edge gets clipped by overflow-x:hidden.
   Zero the row margin so the cards sit flush inside the container. */
.row.cards { margin-inline: 0; }

/* Larger, Facebook-style cover banner (space + profile headers). Stock HumHub
   cover is ~192px tall with object-fit:fill (stretched/distorted). Make it tall
   and use `cover` so the image fills cleanly without distortion; shorter on
   mobile so it doesn't dominate small screens. */
/* NOTE: the profile AVATAR photo also carries .img-profile-header-background
   (it's "img-profile-header-background profile-user-photo rounded"), so exclude
   .profile-user-photo or the avatar gets stretched/zoomed too. */
.img-profile-header-background:not(.profile-user-photo),
.profile-banner-image-container { height: 300px !important; max-height: 300px !important; }
.img-profile-header-background:not(.profile-user-photo) { object-fit: cover !important; }
@media (max-width: 767px) {
    .img-profile-header-background:not(.profile-user-photo),
    .profile-banner-image-container { height: 170px !important; max-height: 170px !important; }
}
/* Topbar dropdowns must open TOWARD screen-center so they don't overflow.
   Cap width to the viewport (mobile-safe). */
#space-menu-dropdown, #dropdown-search { max-width: min(400px, calc(100vw - 16px)) !important; }
/* Mobile: the account dropdown's toggle sits near the LEFT edge in RTL, but the
   menu (dropdown-menu-end) opened leftward (left:-60px) and ran off-screen.
   Anchor its left edge to the toggle so it opens rightward, on-screen. */
@media (max-width: 767px) {
    html[dir="rtl"] .account .dropdown-menu,
    html[dir="rtl"] #account-top-menu .dropdown-menu {
        left: 0 !important;
        right: auto !important;
        max-width: calc(100vw - 16px) !important;
    }
}
/* Space chooser toggle sits on the RIGHT in RTL → anchor its right edge to the
   toggle and open leftward (was anchored left, overflowing the right edge). */
html[dir="rtl"] #space-menu-dropdown { left: auto !important; right: 0 !important; }
/* Search toggle sits on the LEFT in RTL → anchor left, open rightward
   (was opening left and running off the left edge, left:-213). */
html[dir="rtl"] #dropdown-search { left: 0 !important; right: auto !important; }
/* Space-chooser list items: more breathing room between the space logo/acronym
   and the space name. */
#space-menu-dropdown .dropdown-item.d-flex .flex-shrink-0 { margin-inline-end: 14px !important; }
#space-menu-dropdown .dropdown-item.d-flex { padding-inline: 14px; }

/* Search panel close (X) — give it room from the title and a clickable hit-area,
   pushed to the corner (inline-end = left in RTL). */
#dropdown-search-close {
    float: left; cursor: pointer; padding: 0 6px; margin-inline-start: 8px;
    opacity: .65; transition: opacity .15s, color .15s;
}
#dropdown-search-close:hover { opacity: 1; color: var(--mb-gold-dark); }

/* Export button group inside modals (download + options dropdown): un-join the
   two buttons (Bootstrap glues them with -1px), add a gap, round each, and inset
   the group from the modal edge. */
.modal .btn-group.float-end { gap: 6px; }
.modal .btn-group.float-end > .btn { margin: 0 !important; border-radius: 9px !important; }
html[dir="rtl"] .modal .btn-group.float-end { margin-inline-start: 6px; }

/* ---- Tier asterisk (*) on avatars: red=Administrators, green=المشرفون,
   gold=المقربون ($30), blue=الوعي الجمعي ($10). tiers.js appends a
   <span class="mb-tier-star mb-tier-COLOR"> to each avatar host and sets its
   size/offset inline; this rule provides the absolute positioning + white halo
   (without position:absolute the star renders INLINE and breaks the host). ---- */
.mb-tier-star {
    position: absolute;
    top: -0.08em; inset-inline-end: -0.05em; inset-inline-start: auto;
    font-family: Arial, sans-serif;
    font-weight: 900; line-height: 1;
    z-index: 0; pointer-events: none;
    text-shadow: 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 1px 2px rgba(0,0,0,.35);
}
.mb-tier-red { color: #e23b3b; }
.mb-tier-green { color: #1f9d4d; }
.mb-tier-gold { color: var(--mb-gold-dark); }
.mb-tier-blue { color: #2BA7E0; }
/* The topbar account chip is a wide flex host, so the avatar star floats into its
   empty corner and crowds the name — suppress the tier star in the top bar (it
   still shows on real avatars in feeds, people, and profiles). */
#topbar-first .mb-tier-star { display: none !important; }

/* ---- «أحدث النشاطات» (latest-activities) stream: the entry packs the originator
   avatar (+ its tier star) and, for space activities, a small space image into one
   block — give it room from the text and keep the star from overflowing. ---- */
.activities .img-profile-space {
    position: relative;
    display: inline-flex; align-items: flex-start; gap: 6px;
    margin-inline-end: 14px !important;
    flex-shrink: 0;
}
.activities .img-profile-space img { display: block; }
/* No tier-star override here: let tiers.js position + size the star exactly like
   everywhere else (members, feeds) — anchored to the avatar corner, sized to the
   avatar. (The earlier stray was the missing .mb-tier-star{position:absolute},
   now restored above.) */

/* Keep the green online dot clear of the profile/space settings gear WITHOUT a
   z-index escape (a positive z-index here let the dot bleed over the open
   dropdown menu). Instead give the header controls group a little clearance so
   the gear no longer sits on the photo's corner dot. */
.controls-header .btn-group.dropdown,
#user-header-controls-menu { margin-inline-end: 16px; }

/* ---- Comment block RTL spacing + alignment ----
   markup: .comment(flex) > .comment-header-image(avatar) + .flex-grow-1
   ( .comment-heading, .comment-message, .wall-entry-controls ). */
html[dir="rtl"] .comment .comment-header-image { margin-inline-end: 10px; margin-inline-start: 0; }
html[dir="rtl"] .comment .flex-grow-1 { min-width: 0; }
html[dir="rtl"] .comment .comment-heading,
html[dir="rtl"] .comment .comment-message,
html[dir="rtl"] .comment .wall-entry-controls,
html[dir="rtl"] .wall-entry-controls { text-align: right; }
/* a little breathing room between stacked comments */
html[dir="rtl"] .comment { margin-block: 6px; }

/* ---- Entry options ("⋮") menu — posts AND comments ----
   HumHub renders the options toggle (Permalink / Edit / Delete …) as an EMPTY
   <a class="dropdown-toggle"> with the caret suppressed (content:""), so it's an
   invisible click target — admins/mods can't find Edit/Delete (esp. on posts).
   Give it a visible vertical-ellipsis glyph and a clear hit area. */
.preferences .dropdown-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: 50%;
    color: var(--mb-gold-dark, #9f7e34);   /* visible by default, not faint grey */
}
.preferences .dropdown-toggle::after {
    content: ""; border: 0 !important; margin: 0 !important; padding: 0 !important;
    display: block !important; flex: 0 0 auto !important;
    width: 4px !important; height: 4px !important; min-width: 0 !important; border-radius: 50%;
    background: currentColor;                /* center dot */
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;  /* top + bottom dots -> vertical kebab */
}
.preferences .dropdown-toggle:hover,
.preferences.show .dropdown-toggle,
.preferences .dropdown-toggle[aria-expanded="true"] {
    color: var(--mb-gold-dark, #9f7e34); background: var(--mb-gold-soft, rgba(200,162,74,0.13));
}
/* Comments: the options menu is position:absolute pinned to right:6px, which in RTL
   lands on top of the author name. Move it to the inline-start corner (LEFT in RTL)
   so it never overlaps the name. The comment root is .single-comment (id comment_<id>). */
html[dir="rtl"] .single-comment > ul.preferences,
html[dir="rtl"] .single-comment > .nav.preferences,
html[dir="rtl"] .comment > ul.preferences {
    right: auto !important; left: 6px !important; text-align: left !important;
}
/* Posts: the options (⋮) menu is position:absolute pinned to the right (next to the
   avatar/name). Move it to the top-LEFT corner of the entry header in RTL. */
html[dir="rtl"] .wall-entry-header > .preferences,
html[dir="rtl"] .wall-entry-header > .nav.preferences {
    right: auto !important; left: 6px !important; text-align: left !important;
}

/* ---- Facebook-style reactions (mahmoudbranding/reactions.js) ----
   Row reads «إعجاب · رد»: the «إعجاب» control reveals the 7-emoji spectrum on
   hover; reacting turns it into the reaction's coloured word. A summary (emojis +
   total) sits at the far inline-end of the same row. On-brand, RTL. */
.wall-entry-controls { position: relative; }
/* hide the native single "Like" link on posts AND comments — reactions replace it */
.wall-entry-controls .likeLinkContainer,
.wall-entry-controls .like-link,
.wall-entry-controls a[data-content-component*="like"] { display: none !important; }

/* the «إعجاب» control + its hover picker */
.mb-react-like-wrap { position: relative; display: inline-block; }
.mb-react-sep { color: var(--mb-soft, #9a9a9a); margin: 0 2px; }
.mb-react-like {
    border: 0; background: transparent; cursor: pointer; padding: 0;
    font-family: inherit; font-size: inherit; font-weight: 600;
    color: var(--mb-cyan, #2BA7E0); line-height: inherit;
}
.mb-react-like:hover { text-decoration: underline; }
.mb-react-like.mb-mine { font-weight: 800; }      /* colour is set inline per reaction */
.mb-react-like .mb-react-le { margin-inline-end: 4px; }

/* moderator (المشرفون) delete-only control in the controls row */
.mb-mod-sep { color: var(--mb-soft, #9a9a9a); margin: 0 2px; }
.mb-mod-del {
    border: 0; background: transparent; cursor: pointer; padding: 0;
    font-family: inherit; font-size: inherit; font-weight: 600;
    color: var(--mb-soft, #8a8a8a); line-height: inherit;
}
.mb-mod-del .mb-mod-ic { margin-inline-end: 3px; filter: grayscale(1) opacity(.7); }
.mb-mod-del:hover { color: #c0392b; text-decoration: underline; }
.mb-mod-del:hover .mb-mod-ic { filter: none; }
.mb-mod-del[disabled] { opacity: .5; cursor: default; }
.mb-mod-del.mb-mod-err { color: #c0392b; }

/* picker: hidden until the Like control is hovered/focused; opens above it */
.mb-react-picker {
    display: none; gap: 3px; padding: 5px 8px;
    background: #fff; border: 1px solid var(--mb-line);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(17,19,15,.18), 0 2px 6px rgba(17,19,15,.08);
    position: absolute; inset-inline-start: 0; bottom: 100%; margin-bottom: 8px; z-index: 50;
    white-space: nowrap;
}
.mb-react-like-wrap:hover .mb-react-picker,
.mb-react-like-wrap:focus-within .mb-react-picker { display: inline-flex; }
.mb-react-opt {
    border: 0; background: transparent; cursor: pointer;
    font-size: 24px; line-height: 1; padding: 2px; border-radius: 50%;
    transition: transform .14s cubic-bezier(.2,.8,.2,1.4);
    transform-origin: bottom center;
}
.mb-react-opt:hover { transform: scale(1.45) translateY(-3px); }

/* summary sits inline right after the controls (FB: «إعجاب · رد   👍❤️ 2») */
.mb-react-summary {
    display: inline-flex; align-items: center; gap: 4px;
    direction: ltr;                 /* always read «👍❤️ 2» regardless of RTL */
    margin-inline-start: 10px; vertical-align: middle;
    font-size: 12px; color: var(--mb-soft, #7a7a7a);
}
.mb-react-faces { display: inline-flex; align-items: center; }
.mb-react-face {
    font-size: 14px; line-height: 1; margin-inline-start: -4px;
    background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(17,19,15,.06);
}
.mb-react-face:first-child { margin-inline-start: 0; }
.mb-react-total { font-weight: 700; color: var(--mb-ink, #0E1013); }

/* ---- Composer publish-button row (margin / padding / size) ----
   The "أرسل" submit button sat ~4px from the attach/options group and felt
   cramped. Give it room + a bit more presence; keep the group buttons aligned. */
.btn_container { padding-top: 6px; }
.btn_container > .btn-accent,
.btn_container > button[type="submit"] {
    margin-inline-end: 12px;       /* gap from the attach/options group */
    padding: 8px 26px;             /* roomier publish button */
    font-weight: 600;
    border-radius: 11px;
}
/* attach (cloud) + options (caret) mini-buttons: un-join them (Bootstrap
   btn-group glues them with negative margins), add a gap, round each, and
   slim them down so they read as light, separate icon buttons. */
.btn_container .btn-group { gap: 6px; }
.btn_container .btn-group > .btn {
    margin: 0 !important;
    border-radius: 9px !important;
    padding: 7px 9px !important;   /* thinner */
}
/* comment submit buttons get the same breathing room */
.comment-buttons .btn[type="submit"], .comment-buttons .btn-accent { margin-inline-end: 10px; padding-inline: 22px; }
/* The "عام/public" visibility badge is absolutely positioned at inset-inline-start:50px,
   which in RTL lands on top of the أرسل (submit) button. Move it to the inline-end
   (left in RTL) so it no longer covers the button text. */
html[dir="rtl"] .badge-container {
    inset-inline-start: auto !important;
    inset-inline-end: 4px !important;
    top: 11px !important;
}

/* ---- Modal close button (RTL): Bootstrap pushes .btn-close with margin-left:auto
   which keeps it mid-header in RTL. Flip so it hugs the top-left corner. ---- */
html[dir="rtl"] .modal-header .btn-close {
    margin-right: auto !important;
    margin-left: -8px !important;
}

/* ============================================================
   MB SPACE CHOOSER REDESIGN (topbar space switcher dropdown)
   Brand: cream/white card, gold accents, Readex Pro, rounded
   space medallions (acronym bg colour is per-space, set in DB),
   and a gold "إنشاء باحة جديدة" button.
   ============================================================ */
#space-menu-dropdown.dropdown-menu {
    padding: 10px !important;
    border: 1px solid #ece3cf !important;
    border-radius: 16px !important;
    background: #fffdf8 !important;
    box-shadow: 0 18px 48px -22px rgba(200,162,74,.55), 0 2px 10px rgba(14,16,19,.06) !important;
}
/* search field → rounded pill with gold focus */
#space-menu-dropdown .dropdown-controls { padding: 4px 4px 8px !important; }
#space-menu-search {
    border-radius: 999px !important;
    border: 1px solid #e7ddc6 !important;
    background: #fff !important;
    padding-inline: 16px !important;
    height: 40px !important;
    font-family: 'Readex Pro','Tajawal',sans-serif !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
#space-menu-search:focus {
    border-color: #C8A24A !important;
    box-shadow: 0 0 0 3px rgba(200,162,74,.18) !important;
    outline: 0 !important;
}
#space-menu-dropdown .input-group-text {
    border-radius: 999px !important;
    border: 1px solid #e7ddc6 !important;
    background: #faf6ec !important;
    color: #a9842f !important;
}
#space-menu-dropdown .dropdown-divider { border-top-color: #f0e7d3 !important; opacity: 1 !important; margin: 6px 2px !important; }

/* space rows → rounded, gold hover, comfortable padding */
#space-menu-dropdown .dropdown-item.d-flex {
    border-radius: 12px !important;
    padding: 10px 14px !important;
    align-items: center !important;
    transition: background .15s ease, transform .15s ease !important;
}
#space-menu-dropdown .dropdown-item.d-flex:hover,
#space-menu-dropdown .dropdown-item.d-flex:focus {
    background: linear-gradient(90deg,#fbf4e1,#fffdf8) !important;
    transform: translateY(-1px) !important;
}
#space-menu-dropdown .dropdown-item .space-name {
    font-family: 'Readex Pro','Tajawal',sans-serif !important;
    font-weight: 700 !important;
    color: #0E1013 !important;
    font-size: 14.5px !important;
}
#space-menu-dropdown .dropdown-item .space-description {
    color: #8a8a8a !important;
    font-size: 12px !important;
    margin: 2px 0 0 !important;
    line-height: 1.45 !important;
    font-family: 'Readex Pro','Tajawal',sans-serif !important;
}

/* space medallions (acronym + image) → rounded, soft ring, branded initials.
   Background colour is inline per-space (DB), so we only shape & frame it. */
.space-acronym,
#space-menu-dropdown .dropdown-item .space-acronym,
.current-space-image {
    border-radius: 14px !important;
    box-shadow: 0 3px 10px -4px rgba(14,16,19,.35) !important;
    overflow: hidden !important;
}
.space-acronym > span {
    font-family: 'Readex Pro','Tajawal',sans-serif !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: .5px !important;
}
/* small medallions in the chooser list get a softer radius */
#space-menu-dropdown .dropdown-item .space-acronym,
#space-menu-dropdown .dropdown-item img.profile-user-photo { border-radius: 10px !important; }
/* topbar current space chip */
.current-space-image { border-radius: 9px !important; }

/* "Create Space" (إنشاء باحة جديدة) → gold gradient pill, scoped to the chooser */
#space-menu-dropdown .dropdown-footer { padding: 8px 4px 4px !important; }
#space-menu-dropdown .dropdown-footer .btn-accent {
    background: linear-gradient(135deg,#e3c772,#c8a24a 55%,#b8902f) !important;
    border: 0 !important;
    color: #3a2c08 !important;
    font-family: 'Readex Pro','Tajawal',sans-serif !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 11px 18px !important;
    box-shadow: 0 8px 20px -8px rgba(200,162,74,.85) !important;
    transition: transform .15s ease, filter .15s ease !important;
}
#space-menu-dropdown .dropdown-footer .btn-accent:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.05) !important;
    color: #3a2c08 !important;
}

/* ============================================================
   MB HEADER ICONS REDESIGN (#topbar-second main nav)
   IMPORTANT: HumHub measures #top-menu-nav width and folds
   overflowing items into a "القائمة" dropdown. So this block must
   NOT change item width — no display/flex/margin/padding/font-size
   overrides. Visual-only: gold icons, hover tile, active highlight
   + an ABSOLUTELY-positioned underline (zero layout impact).
   ============================================================ */
#topbar-second #top-menu-nav > li > a {
    border-radius: 12px !important;
    position: relative !important;
    transition: background .18s ease, color .18s ease !important;
}
#topbar-second #top-menu-nav > li > a i { color: var(--mb-gold-dark) !important; }

#topbar-second #top-menu-nav > li > a:hover,
#topbar-second #top-menu-nav > li > a:focus {
    background: var(--mb-gold-soft) !important;
    color: var(--mb-gold-dark) !important;
}
#topbar-second #top-menu-nav > li > a:hover i { color: var(--mb-gold-dark) !important; }

/* Active top-nav item: no boxed/selected highlight (owner preference — boxes looked off).
   We only suppress HumHub's default blue active underline so every nav item looks uniform;
   the gold-soft tint on :hover above is the only state styling. */
#topbar-second #top-menu-nav > li.active > a,
#topbar-second #top-menu-nav > li.current > a,
#topbar-second #top-menu-nav > li > a.active,
#topbar-second #top-menu-nav > li > a.current {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* ============================================================
   MB PEOPLE-CARD ACTION BUTTONS (/people directory cards)
   On-brand pills + breathing room for the leading icon (the
   "+" on the friend button + the check on "following").
   followButton=Follow(solid gold) · unfollowButton=Following
   (gold outline) · btn-accent=Add Friend (soft).
   ============================================================ */
.card-panel .card-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 14px 16px 18px !important;
    border-top: 1px solid #f4eee0 !important;
    background: transparent !important;
}
.card-panel .card-footer .btn,
.card-panel .card-footer .btn-group > .btn {
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-family: var(--mb-ui) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    border-width: 1.5px !important;
    transition: transform .15s ease, filter .15s ease, background .15s ease, color .15s ease !important;
}
/* icon spacing — the core glues Icon::get('plus'|'check'|'clock-o') to the text */
.card-panel .card-footer .btn > i,
.card-panel .card-footer .btn > .fa,
.followButton > i, .unfollowButton > i, .btn-accent > i.fa {
    margin-inline-end: 7px !important;
    margin-inline-start: 0 !important;
}
/* Follow → solid gold */
.card-panel .card-footer .followButton,
.card-panel .card-footer .btn-primary {
    background: linear-gradient(135deg, var(--mb-gold-light), var(--mb-gold) 55%, var(--mb-gold-dark)) !important;
    border-color: transparent !important;
    color: #3a2c08 !important;
    box-shadow: 0 8px 18px -9px rgba(200,162,74,.85) !important;
}
.card-panel .card-footer .followButton:hover,
.card-panel .card-footer .btn-primary:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.05) !important;
    color: #3a2c08 !important;
}
/* Following → gold outline */
.card-panel .card-footer .unfollowButton,
.card-panel .card-footer .btn-outline-primary {
    background: #fff !important;
    border-color: var(--mb-gold) !important;
    color: var(--mb-gold-dark) !important;
    box-shadow: none !important;
}
.card-panel .card-footer .unfollowButton:hover,
.card-panel .card-footer .btn-outline-primary:hover {
    background: var(--mb-gold-soft) !important;
    color: var(--mb-gold-dark) !important;
}
/* Add Friend → soft secondary so it reads distinct from the gold primary */
.card-panel .card-footer .btn-accent {
    background: #fbf6ea !important;
    border: 1.5px solid #e7ddc6 !important;
    color: var(--mb-ink) !important;
    box-shadow: none !important;
}
.card-panel .card-footer .btn-accent:hover,
.card-panel .card-footer .btn-accent.active {
    background: var(--mb-gold-soft) !important;
    border-color: var(--mb-gold) !important;
    color: var(--mb-gold-dark) !important;
}

/* ============================================================
   ADD-ON: composer cleanup, admin-only uploads, dropdowns, notifications
   ============================================================ */

/* ---- Single upload entry point = the editor toolbar insert-menu. ----
   (1) Remove the redundant bottom send-row cloud+caret for EVERYONE (the send
       button stays); (2) gate the toolbar upload to administrators ONLY via the
       `html.mb-no-upload` flag mahmoudbranding sets for non-admins. The hard
       block lives server-side in Events::onFileBeforeValidate. */
.richtext-create-buttons .btn-group,
.richtext-create-buttons .fileinput-button,
.richtext-create-buttons [data-action-click="file.upload"],
.contentForm_options .btn_container .btn-group {
    display: none !important;
}
/* toolbar upload (ProseMirror) hidden for non-uploaders. HumHub renders the upload
   control as the "insert" dropdown (button.ProseMirror-menu-insert-dropdown, an SVG
   <use href="#pm-icon-upload">) holding رفع ملف / إرفاق رسالة صوتية / صورة / فيديو —
   all upload actions — so hide the whole control. (Older builds used a fa-cloud-upload
   icon; keep that fallback too.) */
html.mb-no-upload .ProseMirror-menubar .ProseMirror-menu-insert-dropdown,
html.mb-no-upload .ProseMirror-menubar .ProseMirror-menu-dropdown-wrapper:has(.ProseMirror-menu-insert-dropdown),
html.mb-no-upload .ProseMirror-menubar .ProseMirror-menu-dropdown:has(use[*|href$="pm-icon-upload"]),
html.mb-no-upload .ProseMirror-menubar .ProseMirror-menu-dropdown-wrap:has(.fa-cloud-upload) {
    display: none !important;
}

/* ---- Toolbar upload dropdown menu (رفع ملف / إرفاق…): match the brand, tidy rows. ---- */
.ProseMirror-menu-dropdown-menu {
    background: var(--mb-card) !important;
    border: 1px solid var(--mb-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--mb-shadow-hover) !important;
    padding: 6px !important;
    width: max-content;
    min-width: 200px;
    z-index: 1080;
}
/* outer item stays a plain block; the INNER trigger holds icon + label */
.ProseMirror-menu-dropdown-item { cursor: pointer; }
.ProseMirror-menu-dropdown-item > a.ProseMirror-menu-trigger,
.ProseMirror-menu-dropdown-item > div[title] {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    white-space: nowrap;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    color: var(--mb-ink) !important;
}
.ProseMirror-menu-dropdown-item .ProseMirror-icon { margin: 0 !important; }
.ProseMirror-menu-dropdown-item:hover > a.ProseMirror-menu-trigger,
.ProseMirror-menu-dropdown-item:hover > div[title] {
    background: var(--mb-gold-soft) !important;
    color: var(--mb-gold-dark) !important;
}
.ProseMirror-menubar .ProseMirror-menu-dropdown:hover { color: var(--mb-gold-dark) !important; }
/* lift the post/form that currently has an OPEN toolbar menu above sibling cards
   (the menu element only exists in the DOM while open, so :has scopes it to the
   active card — otherwise a later post paints over the downward-opening menu). */
.wall-entry:has(.ProseMirror-menu-dropdown-menu),
.contentForm:has(.ProseMirror-menu-dropdown-menu),
.content_create:has(.ProseMirror-menu-dropdown-menu) { position: relative; z-index: 50; }

/* ---- Comment/post composer: drop the empty "double chin" (idle preview/progress
   containers that otherwise leave hollow bars under the buttons). ---- */
.content_create [id*="_upload_progress"]:empty,
.content_create [id*="_upload_preview"]:empty,
.contentForm_options [id*="_progress"]:empty,
.contentForm_options [id*="_preview"]:empty,
.file_upload_files:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
}

/* ---- Composer buttons: one cohesive brand cluster (gold send + paper cloud/caret).
   Applies to the comment row (.richtext-create-buttons) and the post row
   (.contentForm_options .btn_container). ---- */
.richtext-create-buttons,
.contentForm_options .btn_container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 2px 2px;
}
/* every button in the cluster: 38px circle, centered icon, no stray margins */
.richtext-create-buttons .btn,
.richtext-create-buttons .fileinput-button,
.richtext-create-buttons .dropdown-toggle,
.contentForm_options .btn_container .btn,
.contentForm_options .btn_container .fileinput-button,
.contentForm_options .btn_container .dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    line-height: 1;
    font-size: 15px;
    box-shadow: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.richtext-create-buttons .btn > i,
.richtext-create-buttons .fileinput-button > i,
.richtext-create-buttons .dropdown-toggle > i,
.contentForm_options .btn_container .btn > i,
.contentForm_options .btn_container .fileinput-button > i { margin: 0 !important; vertical-align: middle; }
.richtext-create-buttons .btn:active,
.contentForm_options .btn_container .btn:active { transform: scale(.94); }

/* primary SEND — filled gold circle, white icon */
.richtext-create-buttons .btn-comment-submit,
.richtext-create-buttons .btn-accent,
.contentForm_options .btn_container > .btn-accent {
    background: var(--mb-gold) !important;
    border: 1px solid var(--mb-gold) !important;
    color: #fff !important;
    box-shadow: var(--mb-shadow) !important;
}
.richtext-create-buttons .btn-comment-submit:hover,
.richtext-create-buttons .btn-accent:hover,
.contentForm_options .btn_container > .btn-accent:hover {
    background: var(--mb-gold-dark) !important;
    border-color: var(--mb-gold-dark) !important;
    color: #fff !important;
}
.richtext-create-buttons .btn-comment-submit i,
.richtext-create-buttons .btn-accent i,
.contentForm_options .btn_container > .btn-accent i { color: #fff !important; }

/* ---- Messages composer (mail module) — full RTL chat-bar redesign ----------------
   The mail conversation/new-message composer (.mail-message-form > .richtext-create-input-group,
   MailRichtextEditor LAYOUT_INLINE) ships an LTR desktop layout: humhub.mail.css (md+) pins
   the send cluster `position:absolute; right:24px; bottom:24px` and reserves space with
   `padding-right:115px` on .humhub-ui-richtext. For Arabic that puts the send button on the
   WRONG (right) side AND, because the input box doesn't actually shrink, the gold send button
   overlaps the text. A bare `direction:rtl` (the old fix) mirrored the toolbar but left the
   absolute button on the right + the reserve intact, so the overlap stayed.
   Redesign: drop the absolute positioning entirely and lay the group out as an RTL flex row —
   editor field (first child) flex-grows on the RIGHT, the buttons cluster (last child) sits on
   the LEFT with a real gap → send button left, zero overlap by construction. Then dress the
   field as a clean rounded RTL input with a gold focus ring; keep the rich-text toolbar
   (mirrored RTL, appears above the text on focus). Scoped to .mail-message-form so the
   post/comment composers are untouched. ---------------------------------------------------- */
.mail-message-form .richtext-create-input-group {
    direction: rtl !important;
    display: flex !important;
    align-items: flex-end;
    gap: 10px;
    position: relative;          /* own positioning context; nothing re-absolutes onto us */
}
/* editor field column (the Yii .form-group wrapping .humhub-ui-richtext) grows; the button
   cluster is excluded so it stays its natural size on the inline-start (left in RTL). */
.mail-message-form .richtext-create-input-group > :not(.richtext-create-buttons) {
    flex: 1 1 auto; min-width: 0; margin: 0;
}
/* un-pin the send/upload cluster: static flow → it becomes the left-hand flex item. The
   `inset:auto` clears the module's right:24px / bottom:24px; direction:rtl keeps the toolbar
   overflow ▼ and button order RTL-correct. */
.mail-message-form .richtext-create-buttons {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    direction: rtl !important;
    flex: 0 0 auto;
    align-self: flex-end;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}
/* toolbar mirrored RTL; stretch it back across the wrapper's side padding (below) so its
   full-width divider still reaches the box edges while its icons stay aligned at 16px. */
.mail-message-form .ProseMirror-menubar {
    direction: rtl !important;
    margin-inline: -16px;
    padding-inline: 16px;
}
/* the input box: drop the 115px LTR reserve + give it a clean rounded chat-field look.
   The 16px side padding lives on the WRAPPER (not .ProseMirror) on purpose: humhub-editor
   renders the placeholder as a DOM node (`.placeholder`, textContent = the text) at the start
   of the editor, so .ProseMirror's own padding doesn't inset it. Padding the wrapper shifts
   the whole .ProseMirror box inward, so BOTH the placeholder and the typed text clear the edge. */
.mail-message-form .humhub-ui-richtext {
    padding: 0 16px !important;
    background: var(--mb-card) !important;
    border: 1px solid var(--mb-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--mb-shadow);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.mail-message-form .humhub-ui-richtext:focus-within {
    border-color: var(--mb-gold) !important;
    box-shadow: 0 0 0 3px var(--mb-gold-soft) !important;
}
/* RTL, right-aligned text; vertical padding only (the 16px side gap is the wrapper's) so the
   placeholder node and the typed text line up at the same inset. */
.mail-message-form .humhub-ui-richtext .ProseMirror {
    direction: rtl !important;
    text-align: right;
    min-height: 30px;
    padding: 11px 0;
    line-height: 1.6;
}

/* injected "إلغاء" (Cancel edit) button beside Save when editing a post inline
   (mahmoudbranding/editcancel.js). Quiet outline pill next to the gold Save circle. */
.mb-edit-cancel,
.richtext-create-buttons .mb-edit-cancel {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: auto !important; height: auto !important; min-width: 0 !important;
    margin-inline-start: 8px;
    background: transparent !important;
    border: 1px solid var(--mb-line, #E6DECC) !important;
    color: var(--mb-ink, #11130F) !important;
    border-radius: 999px !important; padding: 6px 18px !important; font-weight: 600;
    box-shadow: none !important; line-height: 1.4;
}
.mb-edit-cancel:hover,
.richtext-create-buttons .mb-edit-cancel:hover {
    background: var(--mb-gold-soft, rgba(200,162,74,0.13)) !important;
    border-color: var(--mb-gold, #C8A24A) !important;
    color: var(--mb-gold-dark, #9f7e34) !important;
}

/* The theme sets appearance:none on checkboxes/radios site-wide but provides no visible
   checked state in several places (notification settings, the oEmbed "allow external
   content" prompt, etc.) — so checked looks identical to unchecked. Restore NATIVE
   rendering with a gold check everywhere, EXCEPT real toggle switches (keep their slider). */
input[type="checkbox"]:not([role="switch"]),
input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    accent-color: var(--mb-gold-dark, #9f7e34);
}
.form-switch input[type="checkbox"],
.custom-switch input[type="checkbox"],
[role="switch"] {
    appearance: none !important;
    -webkit-appearance: none !important;
}
/* a touch larger in the notification settings tables */
form[action*="notification/"] input[type="checkbox"],
form[action*="notification/"] input[type="radio"] {
    width: 18px !important; height: 18px !important; opacity: 1 !important;
    cursor: pointer; vertical-align: middle;
}

/* ---- Live/scheduled room announcement card (mahmoudbranding/roomcard.js) ---- */
.mb-room-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    background: var(--mb-card, #FFFDF8);
    border: 1px solid var(--mb-line, #E6DECC);
    border-inline-start: 4px solid var(--mb-gold, #C8A24A);
    border-radius: 14px; padding: 16px 18px; margin: 4px 0;
    box-shadow: var(--mb-shadow, 0 1px 3px rgba(0,0,0,.06));
}
.mb-room-head { display: flex; align-items: center; gap: 8px; }
.mb-room-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 800; font-size: 13px; line-height: 1;
    padding: 6px 12px; border-radius: 999px;
}
.mb-room-badge.is-live { background: rgba(224,36,36,.12); color: #d12626; }
.mb-room-badge.is-soon { background: var(--mb-gold-soft, rgba(200,162,74,0.13)); color: var(--mb-gold-dark, #9f7e34); }
.mb-room-badge.is-ended { background: #ececec; color: #777; }
.mb-room-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #e02424; display: inline-block;
    box-shadow: 0 0 0 0 rgba(224,36,36,.55); animation: mbRoomPulse 1.6s infinite;
}
@keyframes mbRoomPulse {
    0%   { box-shadow: 0 0 0 0 rgba(224,36,36,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(224,36,36,0); }
    100% { box-shadow: 0 0 0 0 rgba(224,36,36,0); }
}
.mb-room-title { font-weight: 800; font-size: 18px; color: var(--mb-ink, #11130F); }
.mb-room-count {
    font-size: 22px; font-weight: 800; letter-spacing: .5px;
    font-variant-numeric: tabular-nums; color: var(--mb-gold-dark, #9f7e34);
    direction: ltr; unicode-bidi: plaintext;
}
.mb-room-join {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-gold, #C8A24A) !important; background-image: none !important;
    color: #fff !important;
    font-weight: 800; text-decoration: none !important;
    padding: 10px 26px; border-radius: 999px; border: 0;
    box-shadow: var(--mb-shadow, 0 1px 3px rgba(0,0,0,.06));
    transition: background .15s ease;
}
.mb-room-join:hover,
.mb-room-join:focus { background: var(--mb-gold-dark, #9f7e34) !important; color: #fff !important; }
.mb-room-join.is-disabled {
    background: #ececec !important; color: #999 !important; cursor: default; box-shadow: none;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .mb-room-dot { animation: none; } }

/* ---- Wrap-up card (mahmoudbranding/roomcard.js buildWrapUp) -----------------
   Archival / reflective variant of the live-room card: no red, no pulse, no
   countdown. Replaces the misleading "مباشر الآن" plain-text post that members
   used to see hours after a meeting closed. Editorial gold-leaf, calmer key. */
.mb-room-card.is-wrapup {
    gap: 12px;
    background: var(--mb-card, #FFFDF8);
    border-inline-start-color: var(--mb-gold, #C8A24A);
    box-shadow: var(--mb-shadow, 0 1px 3px rgba(0,0,0,.06));
}
.mb-wrapup-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; width: 100%;
}
.mb-room-badge.is-wrapup {
    background: var(--mb-gold-soft, rgba(200,162,74,0.13));
    color: var(--mb-gold-dark, #9f7e34);
    font-weight: 800;
}
.mb-wrapup-dur {
    font-size: 13px; font-weight: 700; color: var(--mb-gold-dark, #9f7e34);
    font-variant-numeric: tabular-nums;
    direction: ltr; unicode-bidi: plaintext;
    background: var(--mb-gold-soft, rgba(200,162,74,0.13));
    padding: 5px 10px; border-radius: 999px;
}
/* Clubhouse-style top-speaker row: round profile photos with a tier-colour ring,
   a 👑 on the most-active speaker, name + mic-time beneath each. */
.mb-wrapup-speakers {
    width: 100%;
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
    padding-block-start: 4px;
}
.mb-spk {
    flex: 0 0 auto; width: 76px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mb-spk-av {
    position: relative; width: 54px; height: 54px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-line, #E6DECC);
    /* white gap + tier ring (neutral by default) */
    box-shadow: 0 0 0 2px var(--mb-card, #FFFDF8), 0 0 0 4px var(--mb-line, #E6DECC);
}
.mb-spk-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mb-spk-av.is-placeholder {
    color: var(--mb-gold-dark, #9f7e34); font-weight: 800; font-size: 22px;
    background: var(--mb-gold-soft, rgba(200,162,74,0.13));
}
.mb-spk-av.tier-red   { box-shadow: 0 0 0 2px var(--mb-card, #FFFDF8), 0 0 0 4px #e0231a; }
.mb-spk-av.tier-gold  { box-shadow: 0 0 0 2px var(--mb-card, #FFFDF8), 0 0 0 4px var(--mb-gold, #C8A24A); }
.mb-spk-av.tier-green { box-shadow: 0 0 0 2px var(--mb-card, #FFFDF8), 0 0 0 4px #2e9e5b; }
.mb-spk-av.tier-blue  { box-shadow: 0 0 0 2px var(--mb-card, #FFFDF8), 0 0 0 4px var(--mb-cyan, #2BA7E0); }
.mb-spk-name {
    max-width: 76px; font-size: 13px; font-weight: 700; color: var(--mb-ink, #11130F);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.mb-wrapup-rec {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    /* !important mirrors .mb-room-join — HumHub's theme paints generic <a> with
       a cream/teal bg that wins on plain specificity, hiding white text. */
    background: var(--mb-gold, #C8A24A) !important;
    background-image: none !important;
    color: #fff !important; text-decoration: none !important;
    font-weight: 800; font-size: 14px;
    padding: 9px 22px; border-radius: 999px;
    box-shadow: var(--mb-shadow, 0 1px 3px rgba(0,0,0,.06));
    transition: background .15s ease;
    align-self: flex-start;
}
.mb-wrapup-rec:hover,
.mb-wrapup-rec:focus { background: var(--mb-gold-dark, #9f7e34) !important; color: #fff !important; }

/* Wrap-up poll result — question + horizontal gold result bars (anonymous). */
.mb-wrapup-poll { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.mb-poll-q { font-size: 14px; font-weight: 700; color: var(--mb-ink, #1a1d2e); }
.mb-poll-row { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px;
    padding: 8px 11px; border-radius: 10px; background: rgba(200,162,74,0.1); }
.mb-poll-bar { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0;
    background: var(--mb-gold-soft, rgba(200,162,74,0.28)); z-index: 0; }
.mb-poll-label { position: relative; z-index: 1; flex: 1; font-size: 13.5px; font-weight: 600; color: var(--mb-ink, #1a1d2e); }
.mb-poll-pct { position: relative; z-index: 1; font-size: 13px; font-weight: 800; color: var(--mb-gold-dark, #9f7e34); }

@media (max-width: 480px) {
    .mb-wrapup-dur { font-size: 12px; }
    .mb-wrapup-speakers { gap: 10px; }
    .mb-spk { width: 64px; }
    .mb-spk-av { width: 46px; height: 46px; }
    .mb-spk-name { max-width: 64px; font-size: 12px; }
}

/* ---- Scheduled "event-ticket" card (mahmoudbranding/roomcard.js, .is-ticket) -----
   Upcoming rooms used to render as pale plain text. This is the premium gold ticket:
   bolder gold stub, a coarse «بعد …» chip, a segmented live countdown (يوم·ساعة·دقيقة·
   ثانية), and two timezone rows — «وقتك» (viewer-local) + «توقيت القدس» (platform). All
   values computed client-side from the room's start epoch. Warm-paper + gold-leaf key. */
.mb-room-card.is-ticket {
    position: relative;
    gap: 12px;
    border-inline-start-width: 6px;
    background: linear-gradient(180deg, var(--mb-card, #FFFDF8) 0%, #FFFCF3 100%);
    overflow: hidden;
    animation: mb-news-fade 200ms ease-out;
}
.mb-room-card.is-ticket::after {   /* faint gold corner glow */
    content: ''; position: absolute; inset-block-start: -42px; inset-inline-end: -42px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(200,162,74,.16), transparent 70%);
    pointer-events: none;
}
.mb-room-card.is-ticket .mb-room-head { width: 100%; }
.mb-ticket-when {
    margin-inline-start: auto;
    background: var(--mb-gold-soft, rgba(200,162,74,0.13));
    color: var(--mb-gold-dark, #9f7e34);
    font-weight: 800; font-size: 12.5px; line-height: 1;
    padding: 6px 11px; border-radius: 999px; white-space: nowrap;
}

.mb-ticket { width: 100%; display: flex; flex-direction: column; gap: 12px; }

/* perforated "tear" dividers; the first one carries a ✦ centerpiece */
.mb-ticket-rip { position: relative; width: 100%; height: 0; border-top: 2px dashed var(--mb-line, #E6DECC); }
.mb-ticket > .mb-ticket-rip:first-child::after {
    content: '✦'; position: absolute; top: 0; inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    color: var(--mb-gold, #C8A24A); background: var(--mb-card, #FFFDF8);
    padding: 0 9px; font-size: 13px; line-height: 1;
}

/* segmented countdown */
.mb-ticket-countdown {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    direction: ltr;   /* d:h:m:s reads left→right; labels stay Arabic */
}
.mb-ticket-seg {
    flex: 1 1 0; min-width: 54px; max-width: 86px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: var(--mb-gold-soft, rgba(200,162,74,0.13));
    border: 1px solid rgba(200,162,74,.22);
    border-radius: 12px; padding: 10px 6px;
}
.mb-ticket-num {
    font-size: 26px; font-weight: 800; line-height: 1;
    color: var(--mb-gold-dark, #9f7e34);
    font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext;
}
.mb-ticket-lbl { font-size: 11px; font-weight: 700; color: var(--mb-ink-soft, #4a4a42); }
.mb-ticket-colon { font-size: 20px; font-weight: 800; color: var(--mb-gold, #C8A24A); opacity: .5; }

/* dual-timezone rows */
.mb-ticket-times { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.mb-ticket-timerow { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.mb-ticket-ic { flex: 0 0 auto; font-size: 14px; }
.mb-ticket-tlabel { font-weight: 800; color: var(--mb-ink, #11130F); white-space: nowrap; }
.mb-ticket-leader {
    flex: 1 1 auto; min-width: 14px; height: 1em;
    background-image: radial-gradient(circle at center, var(--mb-gold-dark, #9f7e34) 1px, transparent 1.4px);
    background-size: 6px 100%; background-repeat: repeat-x; background-position: 0 60%;
    opacity: .4;
}
.mb-ticket-tval {
    flex: 0 0 auto; font-weight: 700; color: var(--mb-gold-dark, #9f7e34);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .mb-room-card.is-ticket { animation: none; } }
@media (max-width: 480px) {
    .mb-ticket-seg { min-width: 0; padding: 8px 4px; }
    .mb-ticket-num { font-size: 21px; }
    .mb-ticket-lbl { font-size: 10px; }
    .mb-ticket-countdown { gap: 5px; }
    .mb-ticket-timerow { font-size: 12.5px; }
}

/* ---- Composer footer: visibility badge + notify-members gear --------------
   Stock HumHub absolutely-positions the "عام / public" `.badge-container`
   inside the .float-end footer and pins it to `inset-inline-end:4px`. That
   leftmost ~21px in RTL is EXACTLY where the notify-target gear circle (38×38,
   nav-pills > nav-item.dropdown) also lives, so the badge and the gear render
   stacked on top of each other — visually a tight cramped clump next to أرسل.
   Untangle them: switch .float-end to inline-flex with a small gap, drop the
   absolute positioning on the badge, and let the two natural-flow children
   (gear + badge) sit cleanly side by side. Tight scope to the composer so
   other places using `.badge-container` are not affected. */
.contentForm_options .float-end {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    height: auto !important;
    float: none !important;          /* the stock float is what triggers the abs-positioned overlap */
    position: static !important;
    margin-inline-start: 6px;        /* breathing room from the أرسل pill in RTL */
}
.contentForm_options .float-end .nav-pills { order: 1; margin: 0 !important; padding: 0 !important; }
html[dir="rtl"] .contentForm_options .float-end .badge-container,
.contentForm_options .float-end .badge-container {
    position: static !important;
    top: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    order: 2;
    display: inline-flex; align-items: center;
}

/* ---- Post / comment ⋮ action menu (wall-entry-header > ul.nav.preferences) ----
   HumHub's bundled theme paints `.nav-pills .dropdown-menu` with --bs-primary,
   which our theme re-maps to gold. The post action menu sits inside a nav-pills
   list, so it inherits a solid-gold panel that swallows its own gold-tint hover
   and reads as an unreadable slab. Re-cast it as the warm-paper card pattern
   used everywhere else: cream sheet, hairline gold edge tint, gold-soft hover
   on items, gold icons. Scoped to `.preferences` so the rich-text editor toolbar
   and emoji picker (which also use `.dropdown-menu`) are NEVER touched. */
ul.preferences > .dropdown-menu,
.nav.preferences .dropdown-menu {
    background: var(--mb-card) !important;
    background-image: none !important;
    border: 1px solid var(--mb-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--mb-shadow-hover, 0 8px 24px rgba(0,0,0,.08)) !important;
    padding: 6px !important;
    /* the gold theme rule was painting the SOLID surface; reset it explicitly so
       any future Bootstrap upgrade can't re-leak it. */
    --bs-dropdown-bg: var(--mb-card);
}
ul.preferences > .dropdown-menu .dropdown-item,
.nav.preferences .dropdown-menu .dropdown-item {
    color: var(--mb-ink) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    background: transparent !important;
    transition: background .15s ease, color .15s ease;
}
ul.preferences > .dropdown-menu .dropdown-item:hover,
ul.preferences > .dropdown-menu .dropdown-item:focus,
.nav.preferences .dropdown-menu .dropdown-item:hover,
.nav.preferences .dropdown-menu .dropdown-item:focus {
    background: var(--mb-gold-soft) !important;
    color: var(--mb-gold-dark) !important;
}
ul.preferences > .dropdown-menu .dropdown-item i,
.nav.preferences .dropdown-menu .dropdown-item i {
    color: var(--mb-gold-dark) !important;
    margin-inline-end: 8px;
    opacity: .9;
}
ul.preferences > .dropdown-menu .dropdown-item:hover i,
.nav.preferences .dropdown-menu .dropdown-item:hover i { opacity: 1; }
ul.preferences > .dropdown-menu .dropdown-divider,
ul.preferences > .dropdown-menu .divider,
.nav.preferences .dropdown-menu .dropdown-divider,
.nav.preferences .dropdown-menu .divider {
    border-top: 1px solid var(--mb-line) !important;
    margin: 6px 4px !important;
    background: transparent !important;
}

/* ---- Composer SEND button (أرسل) — break out of the icon-circle treatment.
   Lines ~1050-1069 force every `.contentForm_options .btn_container .btn` into a
   38×38 circle with padding:0 — perfect for the attach (☁) and caret (▾) icon
   buttons, but the submit button carries Arabic TEXT ("أرسل") that gets crammed
   into that little circle. Restore proper pill geometry (auto width, real
   horizontal padding, large radius) only for the submit, leaving the icon
   buttons in their circle treatment. */
.contentForm_options .btn_container > .btn-accent,
.contentForm_options .btn_container > button[type="submit"],
.richtext-create-buttons > .btn-accent,
.richtext-create-buttons > .btn-comment-submit {
    width: auto !important;
    min-width: 84px !important;
    height: auto !important;
    padding: 9px 24px !important;
    border-radius: 999px !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .01em;
}
/* The comment submit may render as `<button>أرسل</button>` rather than `<i>` only;
   guard against the icon-gap rule shrinking text. */
.contentForm_options .btn_container > .btn-accent > i,
.richtext-create-buttons > .btn-accent > i,
.richtext-create-buttons > .btn-comment-submit > i {
    margin-inline-end: 6px !important;
}

/* secondary CLOUD-UPLOAD + CARET — quiet paper circles with gold-tint hover */
.richtext-create-buttons .fileinput-button,
.richtext-create-buttons .btn-group > .dropdown-toggle,
.contentForm_options .btn_container .fileinput-button,
.contentForm_options .btn_container .btn-group > .dropdown-toggle {
    background: var(--mb-card) !important;
    border: 1px solid var(--mb-line) !important;
    color: var(--mb-ink) !important;
}
.richtext-create-buttons .fileinput-button:hover,
.richtext-create-buttons .btn-group > .dropdown-toggle:hover,
.richtext-create-buttons .btn-group.show > .dropdown-toggle,
.contentForm_options .btn_container .fileinput-button:hover,
.contentForm_options .btn_container .btn-group > .dropdown-toggle:hover,
.contentForm_options .btn_container .btn-group.show > .dropdown-toggle {
    background: var(--mb-gold-soft) !important;
    border-color: var(--mb-gold) !important;
    color: var(--mb-gold-dark) !important;
}
.richtext-create-buttons .fileinput-button i,
.contentForm_options .btn_container .fileinput-button i { color: inherit !important; }
/* the upload+caret btn-group must not stretch the circles */
.richtext-create-buttons .btn-group,
.contentForm_options .btn_container .btn-group { display: inline-flex; gap: 8px; }

/* ---- Spacing between a dropdown item's icon and its label (RTL). ---- */
.content_create .dropdown-menu .dropdown-item i,
.content_create .dropdown-menu .dropdown-item .fa,
.contentForm_options .dropdown-menu .dropdown-item i,
.contentForm_options .dropdown-menu .dropdown-item .fa {
    margin-inline-end: 8px;
}
.content_create .dropdown-menu .dropdown-item,
.contentForm_options .dropdown-menu .dropdown-item { padding: 8px 14px; }

/* ---- Attach dropdown: dock the menu DIRECTLY above its button group (open
   upward), overriding Popper. This keeps it inside the comment card, off the
   next post, with no toggle→menu dead-zone — so it no longer vanishes when you
   move the cursor onto it. ---- */
/* NOTE: no !important — HumHub reveals the form with jQuery slideToggle(), which
   sets an inline overflow:hidden to clip content as it slides. Keeping this rule
   non-important lets that inline value win DURING the slide (so the buttons don't
   "pop" while the box slides), then this overflow:visible restores afterward so
   the toolbar upload menu isn't clipped. */
.comment_create,
.content_create,
.richtext-create-input-group,
.wall-entry-comments,
.comments-container,
.comment-container { overflow: visible; }
.richtext-create-buttons .btn-group,
.contentForm_options .btn_container .btn-group { position: relative !important; }
.richtext-create-buttons .btn-group > .dropdown-menu,
.contentForm_options .btn_container .btn-group > .dropdown-menu {
    position: absolute !important;
    top: auto !important;
    bottom: 100% !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    transform: none !important;        /* neutralize Popper's inline offset */
    margin: 0 0 6px 0 !important;       /* small upward gap, no dead zone */
    z-index: 1080;
    background: var(--mb-card, #fffdf8) !important;
    border: 1px solid var(--mb-line, #e7e0cf) !important;
    box-shadow: var(--mb-shadow-hover, 0 12px 30px rgba(17,19,15,.14)) !important;
    border-radius: 12px !important;
}

/* ---- Notifications dropdown header: balanced spacing for `⚙ التنبيهات`. ---- */
#dropdown-notifications .dropdown-header,
#topbar-first .dropdown-menu .dropdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 10px;
    margin: 0;
    font-weight: 700;
}
#dropdown-notifications .dropdown-header-actions,
#topbar-first .dropdown-menu .dropdown-header-actions {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
}

/* ===========================================================================
   MOBILE-FIRST HEADER (mahmoudbranding/mobilenav.js builds the burger + drawer)
   Phones: compact #topbar-first (burger + logo + icons), hide the nav row
   (#topbar-second), and present the full nav in a slide-in off-canvas drawer.
   =========================================================================== */
.mb-burger, .mb-drawer, .mb-drawer-overlay, .mb-topbar-logo { display: none; }   /* desktop: hidden */

@media (max-width: 767.98px) {
    /* nav row moves into the drawer */
    #topbar-second { display: none !important; }

    /* compact top bar: burger (start/right) · logo · spacer · icons (end/left).
       #topbar-first is already display:flex; order our injected items first and let the
       original icons container shrink + sit at the inline-end so nothing overlaps. */
    #topbar-first { flex-wrap: nowrap !important; align-items: center !important; gap: 2px; padding-inline: 6px !important; min-height: 56px; }
    /* unify the icon cluster (bell · message · ⋮) so they're the same size + perfectly
       centered/aligned; larger glyphs. */
    #topbar-first #icon-notifications,
    #topbar-first #icon-messages,
    #topbar-first #account-dropdown-link {
        width: 42px !important; height: 42px !important; padding: 0 !important; margin: 0 !important;
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        border-radius: 50% !important;
    }
    #topbar-first #icon-notifications i,
    #topbar-first #icon-messages i { font-size: 22px !important; line-height: 1 !important; }
    #topbar-first > .mb-burger { order: -2 !important; flex: 0 0 auto !important; }
    #topbar-first > .mb-topbar-logo { order: -1 !important; flex: 0 0 auto !important; }
    #topbar-first > :not(.mb-burger):not(.mb-topbar-logo) {
        order: 0 !important; margin-inline-start: auto !important;
        flex: 0 1 auto !important; min-width: 0 !important;
        display: flex !important; align-items: center !important; justify-content: flex-end !important;
        flex-wrap: nowrap !important;
    }
    #topbar-first .topbar-actions,
    #topbar-first .nav,
    #topbar-first .navbar-nav { flex-wrap: nowrap !important; }
    #topbar-first #logo,
    #topbar-first #logo img,
    #topbar-first .navbar-brand,
    #topbar-first .navbar-brand img { display: inline-flex !important; align-items: center; }
    #topbar-first #logo img,
    #topbar-first .navbar-brand img { max-height: 30px !important; width: auto !important; }
    /* push the icon cluster to the inline-end */
    #topbar-first .nav.navbar-nav,
    #topbar-first .navbar-nav { margin-inline-start: auto !important; }
    /* account / options toggle -> a clean vertical 3-dot (⋮) kebab, like the post &
       comment menus. (The avatar span collapsed to an empty box + a stray caret on
       mobile.) Tapping it still opens the same account dropdown. */
    #topbar-first #account-dropdown-link {
        position: relative; gap: 0 !important; background: transparent !important;  /* no container */
    }
    #topbar-first #account-dropdown-link > * { display: none !important; }  /* hide name + broken avatar */
    #topbar-first #account-dropdown-link::after { display: none !important; content: "" !important; border: 0 !important; }
    #topbar-first #account-dropdown-link::before {
        content: ""; display: block; width: 5px; height: 5px; border-radius: 50%;
        background: var(--mb-ink, #11130F);
        box-shadow: 0 -8px 0 var(--mb-ink, #11130F), 0 8px 0 var(--mb-ink, #11130F);
    }
    #topbar-first #account-dropdown-link:hover { background: var(--mb-gold-soft, rgba(200,162,74,0.13)) !important; }
    #topbar-first #account-dropdown-link:hover::before {
        background: var(--mb-gold-dark, #9f7e34);
        box-shadow: 0 -8px 0 var(--mb-gold-dark, #9f7e34), 0 8px 0 var(--mb-gold-dark, #9f7e34);
    }

    .mb-topbar-logo { display: inline-flex !important; align-items: center; flex: 0 1 auto; min-width: 0; padding: 2px; }
    .mb-topbar-logo img { max-height: 38px; width: auto; max-width: 150px; display: block; }

    .mb-burger {
        display: inline-flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
        width: 46px; height: 46px; padding: 0; border: 0; background: transparent;
        border-radius: 10px; cursor: pointer; flex: 0 0 auto;
    }
    .mb-burger span { display: block; height: 3.5px; width: 26px; border-radius: 3px; background: var(--mb-ink, #11130F); transition: opacity .2s ease, transform .2s ease; }
    .mb-burger:hover, html.mb-nav-open .mb-burger { background: var(--mb-gold-soft, rgba(200,162,74,0.13)); }

    /* ---- slide-in drawer (off-canvas from the inline-start = right in RTL) ---- */
    .mb-drawer {
        display: flex !important; flex-direction: column;
        position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 2000;
        width: min(82vw, 320px); max-width: 90vw;
        background: var(--mb-card, #FFFDF8);
        box-shadow: 0 0 40px rgba(17,19,15,.28);
        transform: translateX(100%);                 /* RTL: off-screen to the right */
        transition: transform .25s ease;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    html[dir="ltr"] .mb-drawer { transform: translateX(-100%); }
    html.mb-nav-open .mb-drawer { transform: none; }

    .mb-drawer-head {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 14px 16px; border-bottom: 1px solid var(--mb-line, #E6DECC);
        position: sticky; top: 0; background: var(--mb-card, #FFFDF8);
    }
    .mb-drawer-logo { max-height: 30px; width: auto; }
    .mb-drawer-brand { font-weight: 800; color: var(--mb-ink, #11130F); }
    .mb-drawer-close {
        border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer;
        color: var(--mb-soft, #9a9a9a); width: 36px; height: 36px; border-radius: 10px;
    }
    .mb-drawer-close:hover { background: var(--mb-gold-soft, rgba(200,162,74,0.13)); color: var(--mb-gold-dark, #9f7e34); }

    .mb-drawer-nav { padding: 8px; }
    .mb-drawer-link {
        display: flex; align-items: center; gap: 12px;
        padding: 13px 14px; border-radius: 12px; margin-bottom: 2px;
        color: var(--mb-ink, #11130F) !important; text-decoration: none !important;
        font-weight: 700; font-size: 16px;
    }
    .mb-drawer-link:hover, .mb-drawer-link:focus,
    .mb-drawer-link.active { background: var(--mb-gold-soft, rgba(200,162,74,0.13)); color: var(--mb-gold-dark, #9f7e34) !important; }
    .mb-drawer-ic { color: var(--mb-gold-dark, #9f7e34); width: 22px; text-align: center; font-size: 17px; }

    /* ---- Upgrade CTA relocated into the drawer (mobile only) ----------------------
       The follower-only «الترقية إلى المقربون» floating pill (#sp-upgrade-pill) overlaps
       page controls (the recordings «استماع» buttons, etc.) on a phone, so HIDE it here and
       instead promote the SAME upgrade entry — already cloned into the drawer by mobilenav.js
       from the #top-menu-nav MenuLink (href /stripepayments/subscribe/upgrade, followers only)
       — into a gold CTA pinned to the BOTTOM of the slide menu. Desktop (≥768px) keeps the
       floating pill untouched. CSS-only: no JS / module change. */
    #sp-upgrade-pill { display: none !important; }   /* phones use the drawer CTA instead */

    /* nav becomes a growing flex column so the CTA can pin to the drawer bottom */
    .mb-drawer-nav { display: flex; flex-direction: column; flex: 1 1 auto; }

    .mb-drawer-nav a.mb-drawer-link[href*="/stripepayments/subscribe/upgrade"] {
        order: 5;                       /* past the order:0 links → last */
        margin-block-start: auto;       /* …and pinned to the bottom (the empty footer area) */
        margin-bottom: 6px;
        justify-content: center;
        background: linear-gradient(180deg, var(--mb-gold-light, #E6CD86), var(--mb-gold, #C8A24A)) !important;
        color: #2a2008 !important;
        border: 1px solid var(--mb-gold-dark, #9f7e34);
        box-shadow: 0 8px 20px -10px rgba(200, 162, 74, .7);
        font-weight: 800;
    }
    .mb-drawer-nav a.mb-drawer-link[href*="/stripepayments/subscribe/upgrade"] .mb-drawer-ic { color: #2a2008; }
    .mb-drawer-nav a.mb-drawer-link[href*="/stripepayments/subscribe/upgrade"]:hover,
    .mb-drawer-nav a.mb-drawer-link[href*="/stripepayments/subscribe/upgrade"]:focus {
        background: linear-gradient(180deg, var(--mb-gold, #C8A24A), var(--mb-gold-dark, #9f7e34)) !important;
        color: #fff !important;
    }
    .mb-drawer-nav a.mb-drawer-link[href*="/stripepayments/subscribe/upgrade"]:hover .mb-drawer-ic,
    .mb-drawer-nav a.mb-drawer-link[href*="/stripepayments/subscribe/upgrade"]:focus .mb-drawer-ic { color: #fff; }

    /* ---- backdrop ---- */
    .mb-drawer-overlay {
        display: block !important;
        position: fixed; inset: 0; z-index: 1999;
        background: rgba(17,19,15,.45);
        opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    html.mb-nav-open .mb-drawer-overlay { opacity: 1; pointer-events: auto; }
    html.mb-nav-open { overflow: hidden; }            /* lock body scroll while open */
}

@media (prefers-reduced-motion: reduce) {
    .mb-drawer, .mb-drawer-overlay { transition: none !important; }
}

/* ---- News card (newsfeed/news-card.js) ------------------------------------
   Editorial gold-leaf treatment for auto-posted RSS articles. Distinct from
   the live-room card (urgent red pulse) and the wrap-up card (archival
   static). The news card reads as freshly-curated journalism: source pill +
   relative time + landscape thumbnail (when available) + clamped title +
   3-line excerpt + gold "اقرأ المقال" CTA + small dim domain badge. */
.mb-news-card {
    position: relative;
    background: var(--mb-card, #FFFDF8);
    border: 1px solid var(--mb-line, #E6DECC);
    border-inline-start: 4px solid var(--mb-gold, #C8A24A);
    border-radius: 14px;
    padding: 16px 18px 26px;
    box-shadow: var(--mb-shadow, 0 1px 3px rgba(0,0,0,.06));
    display: flex; flex-direction: column; gap: 12px;
    animation: mb-news-fade 160ms ease-out;
}
@keyframes mb-news-fade {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mb-news-card { animation: none; }
}
.mb-news-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.mb-news-source {
    background: var(--mb-gold-soft, rgba(200,162,74,0.13));
    color: var(--mb-gold-dark, #9f7e34);
    padding: 5px 11px; border-radius: 999px;
    font-weight: 800; font-size: 13px; line-height: 1;
    white-space: nowrap;
}
.mb-news-time {
    color: var(--mb-ink-soft, #5e5e5e);
    font-size: 12px; line-height: 1;
    font-variant-numeric: tabular-nums;
    direction: ltr; unicode-bidi: plaintext;
}
.mb-news-body {
    display: flex; flex-direction: row; gap: 14px; align-items: flex-start;
}
.mb-news-image {
    flex: 0 0 140px;
    width: 140px; height: 80px;
    object-fit: cover; border-radius: 8px;
    background: var(--mb-line, #E6DECC);   /* faint placeholder until load */
    display: block;
}
.mb-news-text {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.mb-news-title {
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-weight: 700; font-size: 17px; line-height: 1.45;
    color: var(--mb-ink, #11130F);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mb-news-excerpt {
    font-size: 14px; line-height: 1.7;
    color: var(--mb-ink-soft, #5e5e5e);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mb-news-foot {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 10px; flex-wrap: wrap;
    padding-block-start: 4px;
}
.mb-news-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--mb-gold, #C8A24A) !important;
    background-image: linear-gradient(135deg, #e3c772, #c8a24a 55%, #b8902f) !important;
    color: #fff !important; text-decoration: none !important;
    font-weight: 800; font-size: 14px;
    padding: 9px 22px; border-radius: 999px;
    box-shadow: var(--mb-shadow, 0 1px 3px rgba(0,0,0,.06));
    transition: filter .15s ease, transform .15s ease;
}
.mb-news-cta:hover,
.mb-news-cta:focus {
    filter: brightness(1.05);
    transform: translateY(-1px);
    color: #fff !important;
}
.mb-news-domain {
    position: absolute;
    inset-block-end: 8px; inset-inline-end: 14px;
    font-size: 11px;
    color: var(--mb-ink-muted, #8a8a8a);
    opacity: .7;
    direction: ltr; unicode-bidi: plaintext;
}
/* Text-only fallback (image missing or 404'd): title + excerpt take full width */
.mb-news-card.no-image .mb-news-body { display: block; }
.mb-news-card.no-image .mb-news-image { display: none; }

@media (max-width: 560px) {
    .mb-news-card { padding: 14px 14px 24px; }
    .mb-news-body { flex-direction: column; gap: 12px; }
    .mb-news-image { flex-basis: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .mb-news-title { font-size: 16px; }
    .mb-news-excerpt { font-size: 13.5px; -webkit-line-clamp: 4; }
}

/* ---- Social link-preview cards (mahmoudbranding/social-card.js) -----------
   Member-posted links unfurl into a preview card. Two variants share one shell:
   .mb-og-card  (Facebook + any OG site: image + title + description + domain)
   .mb-tweet-card (X/Twitter: avatar + @handle + tweet text + media). Same
   gold-leaf vocabulary as the news card so the wall stays cohesive. */
.mb-social-card {
    position: relative;
    background: var(--mb-card, #FFFDF8);
    border: 1px solid var(--mb-line, #E6DECC);
    border-inline-start: 4px solid var(--mb-gold, #C8A24A);
    border-radius: 14px;
    padding: 16px 18px 26px;
    box-shadow: var(--mb-shadow, 0 1px 3px rgba(0,0,0,.06));
    display: flex; flex-direction: column; gap: 12px;
    margin-block-start: 8px;
    animation: mb-news-fade 160ms ease-out;
    max-width: 560px;
}
@media (prefers-reduced-motion: reduce) { .mb-social-card { animation: none; } }

/* shared foot (CTA pill + small dim meta) */
.mb-social-foot {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 10px; flex-wrap: wrap; padding-block-start: 2px;
}
.mb-social-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--mb-gold, #C8A24A) !important;
    background-image: linear-gradient(135deg, #e3c772, #c8a24a 55%, #b8902f) !important;
    color: #fff !important; text-decoration: none !important;
    font-weight: 800; font-size: 14px;
    padding: 9px 22px; border-radius: 999px;
    box-shadow: var(--mb-shadow, 0 1px 3px rgba(0,0,0,.06));
    transition: filter .15s ease, transform .15s ease;
}
.mb-social-cta:hover, .mb-social-cta:focus { filter: brightness(1.05); transform: translateY(-1px); color: #fff !important; }
.mb-social-domain {
    font-size: 11px; color: var(--mb-ink-muted, #8a8a8a); opacity: .75;
    direction: ltr; unicode-bidi: plaintext;
}

/* --- OG variant (mirrors the news card) --- */
.mb-social-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mb-social-source {
    background: var(--mb-gold-soft, rgba(200,162,74,0.13));
    color: var(--mb-gold-dark, #9f7e34);
    padding: 5px 11px; border-radius: 999px;
    font-weight: 800; font-size: 13px; line-height: 1; white-space: nowrap;
    max-width: 70%; overflow: hidden; text-overflow: ellipsis;
}
.mb-social-body { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; }
.mb-social-image {
    flex: 0 0 140px; width: 140px; height: 80px;
    object-fit: cover; border-radius: 8px;
    background: var(--mb-line, #E6DECC); display: block;
}
.mb-social-textcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mb-social-title {
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-weight: 700; font-size: 17px; line-height: 1.45; color: var(--mb-ink, #11130F);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mb-social-excerpt {
    font-size: 14px; line-height: 1.7; color: var(--mb-ink-soft, #5e5e5e);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mb-og-card.no-image .mb-social-body { display: block; }
.mb-og-card.no-image .mb-social-image { display: none; }

/* --- Tweet variant --- */
.mb-tweet-card { border-inline-start-color: #1d9bf0; } /* X blue spine */
.mb-tweet-head { display: flex; align-items: center; gap: 10px; }
.mb-tweet-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; background: var(--mb-line, #E6DECC); }
.mb-tweet-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.mb-tweet-name { font-weight: 800; font-size: 15px; color: var(--mb-ink, #11130F); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-tweet-handle { font-size: 13px; color: var(--mb-ink-muted, #8a8a8a); direction: ltr; unicode-bidi: plaintext; }
.mb-tweet-badge { font-size: 22px; line-height: 1; color: var(--mb-ink, #11130F); margin-inline-start: auto; }
.mb-tweet-text {
    font-size: 15.5px; line-height: 1.8; color: var(--mb-ink, #11130F);
    white-space: pre-wrap; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
}
.mb-tweet-media { display: grid; grid-template-columns: 1fr; gap: 6px; border-radius: 12px; overflow: hidden; }
.mb-tweet-media.multi { grid-template-columns: 1fr 1fr; }
.mb-tweet-media img { width: 100%; height: 100%; max-height: 360px; object-fit: cover; display: block; background: var(--mb-line, #E6DECC); }
.mb-tweet-media.multi img { max-height: 220px; }

@media (max-width: 560px) {
    .mb-social-card { padding: 14px 14px 24px; }
    .mb-social-body { flex-direction: column; gap: 12px; }
    .mb-social-image { flex-basis: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .mb-social-title { font-size: 16px; }
    .mb-tweet-media img { max-height: 280px; }
}

/* ============================================================ Feed filter tabs (newsfeed)
   Two prominent segmented pills shown in the band above «تصفية» on the wall:
   [ 📰 الأخبار ] [ 👥 منشورات الأعضاء ]. Same literary gold-leaf vocabulary as
   the news cards so the wall reads cohesive. Drives the same mb_news_only /
   mb_news_hide server filter the in-panel checkboxes use (see news-tabs.js). */
.mb-feed-tabs {
    display: flex; gap: 10px; margin: 4px 0 16px; padding: 0;
}
.mb-feed-tab {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px; padding: 11px 16px;
    border: 1.5px solid var(--mb-line); border-radius: 13px;
    background: var(--mb-card); color: var(--mb-gold-dark);
    font-family: var(--mb-ui); font-weight: 700; font-size: 15px; line-height: 1.2;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 2px rgba(17,19,15,0.03);
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .06s;
}
.mb-feed-tab .mb-feed-ico { font-size: 17px; line-height: 1; opacity: .92; }
.mb-feed-tab:hover { border-color: var(--mb-gold); color: var(--mb-ink); background: #fffef9; }
.mb-feed-tab:active { transform: translateY(1px); }
.mb-feed-tab:focus-visible { outline: 2px solid var(--mb-gold); outline-offset: 2px; }
.mb-feed-tab.is-active {
    background: linear-gradient(135deg, var(--mb-gold-light), var(--mb-gold) 55%, var(--mb-gold-dark));
    border-color: transparent; color: #3a2c08;
    box-shadow: 0 7px 18px -8px rgba(200,162,74,0.9);
}
.mb-feed-tab.is-active .mb-feed-ico { opacity: 1; }
.mb-feed-tab.is-active:hover { color: #3a2c08; filter: brightness(1.04); }
@media (max-width: 560px) {
    .mb-feed-tabs { gap: 7px; margin: 2px 0 13px; }
    .mb-feed-tab { font-size: 13.5px; padding: 10px 8px; gap: 6px; min-height: 44px; }
    .mb-feed-tab .mb-feed-ico { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .mb-feed-tab { transition: none; } }
/* feed filter tabs end */

/* ============================================================ Live-room floating badge (livebadge.js) */
/* Glowing red «بثّ مباشر الآن» pill, fixed bottom-start (RTL: bottom-right).
   Hidden until JS adds .is-visible (i.e. >=1 room live now). */
.mb-live-badge{position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:1100;
  display:none;align-items:center;gap:9px;padding:11px 18px;border:0;border-radius:999px;cursor:pointer;
  font-family:'Readex Pro','Tajawal',sans-serif;font-weight:800;font-size:14.5px;color:#fff;
  background:linear-gradient(135deg,#ff5a4d,#e0231a 60%,#b3140d);
  box-shadow:0 10px 26px -8px rgba(224,35,26,.7),0 0 0 0 rgba(224,35,26,.55);
  animation:mb-live-glow 1.9s ease-in-out infinite;-webkit-tap-highlight-color:transparent;
  transition:transform .12s,filter .12s}
.mb-live-badge.is-visible{display:inline-flex}
.mb-live-badge:hover{transform:translateY(-2px);filter:brightness(1.05)}
.mb-live-badge:active{transform:translateY(0)}
.mb-live-badge:focus-visible{outline:3px solid rgba(224,35,26,.4);outline-offset:2px}
@keyframes mb-live-glow{0%,100%{box-shadow:0 10px 26px -8px rgba(224,35,26,.7),0 0 0 0 rgba(224,35,26,.5)}
  50%{box-shadow:0 10px 30px -6px rgba(224,35,26,.85),0 0 0 10px rgba(224,35,26,0)}}
.mb-live-dot{width:10px;height:10px;border-radius:50%;background:#fff;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,255,255,.9);animation:mb-live-pulse 1.4s ease-out infinite}
@keyframes mb-live-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.mb-live-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.25);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.mb-live-count:empty{display:none}

/* Drop-up panel of live rooms */
.mb-live-panel{position:fixed;inset-block-end:74px;inset-inline-end:18px;z-index:1101;width:min(340px,calc(100vw - 36px));
  background:#FFFDF8;border:1px solid #E6DECC;border-radius:16px;
  box-shadow:0 22px 60px -20px rgba(17,19,15,.4);overflow:hidden;
  transform:translateY(10px) scale(.98);opacity:0;transform-origin:bottom right;
  transition:transform .2s cubic-bezier(.22,1,.36,1),opacity .2s;direction:rtl}
.mb-live-panel.is-open{transform:translateY(0) scale(1);opacity:1}
.mb-live-panel-head{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid #E6DECC;
  font-family:'Readex Pro','Tajawal',sans-serif;font-weight:800;font-size:15px;color:#11130F}
.mb-live-panel-dot{width:9px;height:9px;border-radius:50%;background:#e0231a;animation:mb-live-pulse 1.4s ease-out infinite}
.mb-live-list{max-height:min(60vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.mb-live-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #F1EAD9}
.mb-live-row:last-child{border-bottom:0}
.mb-live-info{flex:1 1 auto;min-width:0}
.mb-live-title{font-family:'Readex Pro','Tajawal',sans-serif;font-weight:700;font-size:14.5px;color:#11130F;
  line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mb-live-tier{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;
  background:rgba(200,162,74,.13);color:#9f7e34}
.mb-live-join{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:9px 16px;border-radius:10px;
  background:linear-gradient(135deg,#ff5a4d,#e0231a 60%,#b3140d);color:#fff !important;
  font-family:'Readex Pro','Tajawal',sans-serif;font-weight:800;font-size:13px;text-decoration:none;
  box-shadow:0 6px 16px -8px rgba(224,35,26,.8);transition:filter .12s,transform .06s}
.mb-live-join:hover{filter:brightness(1.06);color:#fff !important}
.mb-live-join:active{transform:translateY(1px)}
@media (max-width:560px){
  .mb-live-badge{inset-block-end:14px;inset-inline-end:14px;font-size:13.5px;padding:10px 15px}
  .mb-live-panel{inset-block-end:66px;inset-inline-end:14px}
}
@media (prefers-reduced-motion:reduce){
  .mb-live-badge,.mb-live-dot,.mb-live-panel-dot{animation:none}
  .mb-live-panel{transition:opacity .15s}
}
/* live-room floating badge end */

/* pinned-post marker — pairs with MbPinnedTopFilter (pinned posts pinned to top
   of every feed). HumHub renders a .icon-pin in .stream-entry-icon-list for
   pinned content; gild it + give the entry a soft gold glow so the top post
   reads as intentionally pinned. :has() degrades to no-op where unsupported. */
.stream-entry-icon-list .icon-pin{color:#C8A24A !important}
[data-content-key]:has(> .stream-entry-icon-list .icon-pin),
[data-content-key]:has(.wall-entry-header .stream-entry-icon-list .icon-pin){
  box-shadow:0 8px 26px -14px rgba(200,162,74,.55);
  border-radius:8px;
}
/* pinned-post marker end */

/* ---- Birthday sidebar (#panel-birthday): vertically centre the member name
   against the 32px avatar. The third-party view top-aligns the row and pads the
   avatar down with `pt-1` (flex-shrink-0 me-3 pt-1 img-profile-space), leaving the
   name floating above the avatar. Centre the inner flex row + drop the avatar's
   top padding. Scoped to #panel-birthday so the «أحدث النشاطات» .img-profile-space
   rule above is untouched. ---- */
#panel-birthday .birthdayEntry > .d-flex { align-items: center; gap: 10px; }
/* Bootstrap `me-3` on the avatar doesn't open a gap to the name under this RTL build,
   so the name sits glued to the avatar — zero the avatar's margins and let the flex
   `gap` above do the spacing (direction-agnostic, always between avatar and name). */
#panel-birthday .birthdayEntry .img-profile-space { padding-top: 0 !important; margin: 0 !important; }
/* birthday alignment end */

/* ============================================================================
   COMMENT THREADING — Facebook-style SVG connector (RTL, HumHub 1.18.3)
   DOM: .nested-comments-root > .comment-container(.bg-light) >
          .comment(#comments_area, list) > .single-comment.d-flex.p-2 (each reply)
          .single-comment > .comment-header-image (25px reply avatar) + .flex-grow-1
   The connector is a SINGLE measured SVG path drawn by /static/comment-thread.js
   (ported from the Claude Design useConnectors): a dotted spine just to the inline-start
   (right, RTL) of the reply avatars that curves into each one. CSS borders can't tangent-
   match the elbow corner cleanly (seams + stub ends) — hence the SVG path. Tier stars
   (tiers.js / .mb-tier-star) are NOT touched. The vars below are tunable without
   redeploying the JS.
   ============================================================================ */
:root {
    --mb-conn-color:   #C8A24A;     /* brand gold — thicker + higher-contrast connector (was pale #d7be8a/.55/1.5px) */
    --mb-conn-opacity: .9;
    --mb-conn-width:   2.5px;
    --mb-conn-dash:    0.1px 5px;   /* round-cap dots, slightly denser (0 = solid, "7px 6px" = dashed) */
}

/* reply lane: flat (no box) — the SVG connector + indent carry the nesting, per the design */
.nested-comments-root { position: relative; margin-block-start: 6px; }
.nested-comments-root .comment-container {
    background: transparent !important;   /* drop Bootstrap .bg-light box */
    border: 0 !important;
    border-radius: 0 !important;
    padding-block: 2px !important;
    padding-inline: 0 !important;
    position: relative;                   /* SVG connector overlay anchor */
}
/* indent each reply from the inline-start (right, RTL); the spine sits in that gutter */
.nested-comments-root .single-comment {
    position: relative; z-index: 1;       /* above the connector SVG */
    margin-block: 4px;
    padding-inline-start: 36px !important;
}
/* drop HumHub's <hr> dividers inside a thread — the connector is the structure now */
.nested-comments-root .comment-separator { display: none !important; }

/* the measured SVG connector — comment-thread.js injects <svg class="mb-conn-svg"> as the
   first child of each reply .comment-container and computes the <path class="mb-conn-path">. */
.mb-conn-svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none; z-index: 0;
    color: var(--mb-conn-color, #cabf9c); opacity: var(--mb-conn-opacity, .55);
}
.mb-conn-path {
    fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
    stroke-width: var(--mb-conn-width, 1.5px);
    stroke-dasharray: var(--mb-conn-dash, 0.1px 6px);
}

/* ---- BUBBLES — each comment's name + message wrapped in a warm rounded bubble
   (Facebook-style, the design's "فقاعات" variant); the action row + nested replies stay
   FLAT below the bubble. comment-thread.js wraps the <h4.comment-heading> +
   <div.content.comment_edit_content> of every .single-comment into one .mb-bubble
   (hug-content). The SVG connector + tier stars (tiers.js) are unaffected — different
   elements. Tunable: --mb-bubble. ---- */
:root { --mb-bubble: #F1ECE0; --mb-bubble-edge: #E7DFCD; }
.single-comment .mb-bubble {
    display: inline-block; max-width: 100%;
    background: var(--mb-bubble, #F1ECE0);
    border: 1px solid var(--mb-bubble-edge, #E7DFCD);
    border-radius: 16px; padding: 7px 14px 9px;
    position: relative;
}
/* name + time inside the bubble (kill the <h4> default margin so the bubble isn't bloated) */
.single-comment .mb-bubble .comment-heading { margin: 0 0 1px !important; line-height: 1.35; }
.single-comment .mb-bubble .content.comment_edit_content { margin: 0; }
.single-comment .mb-bubble .comment-message { line-height: 1.6; }
/* the action row sits FLAT below the bubble, gently inset to align under the bubble text */
.single-comment > .flex-grow-1 > .wall-entry-controls { padding-inline-start: 12px; margin-block-start: 3px; }

/* comment avatars: soft editorial ring (the tier STAR from tiers.js stays on top) */
.comment .comment-header-image img,
.comment .comment-header-image .img-rounded,
.comment .comment-header-image .rounded {
    box-shadow: 0 0 0 2px var(--mb-card, #FFFDF8), 0 0 0 3px var(--mb-line, #E6DECC);
    border-radius: 50% !important;
}

/* comment action row — flat «إعجاب · رد · summary» like the design (no pills, no
   glyph): plain weighted text, underline on hover, summary pushed to the inline-end.
   Scoped to comments so post controls are untouched. */
.comment .wall-entry-controls {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: 13px; margin-block-start: 2px;
    margin-inline: 0;              /* override HumHub theme `.wall-entry-controls{margin-left:35px}` */
    justify-content: flex-start;   /* pack «إعجاب · رد» at the inline-start (RIGHT in RTL), under the bubble */
}
/* CRITICAL: HumHub's theme.css sets `.wall-entry-controls a { font-size:11px; margin-top:10px }`,
   which hits ONLY the «رد» link (an <a>) and NOT «إعجاب» (a <button>) -> «رد» ends up smaller
   and 10px lower = misaligned. Reset margins/float on every control item, and give the like +
   reply links ONE identical flat box (same size/weight/padding/baseline) so they line up. */
.comment .wall-entry-controls > * { margin: 0 !important; float: none; }
.comment .wall-entry-controls .mb-react-like,
.comment .wall-entry-controls a,
.comment .wall-entry-controls a[data-action-click*="toggleComment"] {
    padding: 4px 2px; line-height: 1.4; font-weight: 600; font-size: 13px;
    vertical-align: baseline; border: 0; background: none;
    color: var(--mb-ink-soft, #5a6675); transition: color .14s;
}
.comment .wall-entry-controls .mb-react-like:hover,
.comment .wall-entry-controls a[data-action-click*="toggleComment"]:hover,
.comment .wall-entry-controls a:hover {
    background: none; text-decoration: underline;
}
/* the dot separators read as clutter next to the flat actions — keep them out */
.comment .wall-entry-controls .mb-react-sep,
.comment .wall-entry-controls .mb-mod-sep { opacity: 0; width: 2px; margin: 0; }
/* count summary -> far inline-end of the row (!important to beat the margin:0 reset above) */
.comment .wall-entry-controls .mb-react-summary { margin-inline-start: auto !important; }
@media (max-width: 767px) {
    /* >=44px touch targets on mobile (padding only; no visible pill) */
    .comment .wall-entry-controls .mb-react-like,
    .comment .wall-entry-controls a[data-action-click*="toggleComment"] { padding: 9px 6px; }
}

/* «عرض N تعليقاً السابقة» / view-replies -> a rail-aligned gold pill with a chevron */
.nested-comments-root .showMore a,
.comment .showMore a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--mb-gold-soft, rgba(200,162,74,.13));
    color: var(--mb-gold-dark, #9f7e34); font-weight: 600; font-size: 13px;
    text-decoration: none; transition: background .14s;
}
.nested-comments-root .showMore a:hover,
.comment .showMore a:hover { background: rgba(200,162,74,.22); text-decoration: none; }
.nested-comments-root .showMore a::before,
.comment .showMore a::before { content: "⌄"; font-weight: 800; line-height: 1; }

/* ---- nested reply composer: HIDDEN by default; clicking «رد» makes HumHub
   slideToggle it in (its inline display:block overrides this NON-!important rule).
   So the only always-visible composer is the POST-level one; per-comment replies are
   on-demand + compact. (humhub.comment.js toggleComment ->
   target.children('.comment_create').slideToggle(); the post-level form is NOT inside
   a .nested-comments-root so it stays visible.) ---- */
.nested-comments-root .comment_create { display: none; margin-block: 6px 2px; }
/* compact it when shown — smaller field + send button than the post composer */
.nested-comments-root .comment_create .btn_container { padding-top: 4px; }
.nested-comments-root .comment_create .btn_container > .btn-accent,
.nested-comments-root .comment_create .btn_container > button[type="submit"] { padding: 6px 16px; }
.nested-comments-root .comment_create .ProsemirrorEditor { min-height: 34px; }

/* ============================================================================
   «من تفاعل» — reaction attribution overlay (reactions.js openWho/renderWho)
   Tap the «👍❤️ N» summary -> a brand card with FB-style tabs (the per-emoji
   numbers) + a filterable list of who reacted (avatar + tier ring + name + emoji).
   ============================================================================ */
/* the summary becomes a tap target (reactions.js sets role=button only when the
   who endpoint is present) */
.mb-react-summary[role="button"] { cursor: pointer; padding: 1px 5px; border-radius: 999px; transition: background .14s; }
.mb-react-summary[role="button"]:hover { background: var(--mb-gold-soft, rgba(200,162,74,.13)); }
.mb-react-summary[role="button"]:hover .mb-react-total { text-decoration: underline; }
.mb-react-summary[role="button"]:focus-visible { outline: 2px solid var(--mb-gold, #C8A24A); outline-offset: 2px; }

.mb-who-backdrop {
    position: fixed; inset: 0; z-index: 1080;        /* above HumHub #globalModal (~1050) */
    display: none; align-items: center; justify-content: center;
    background: rgba(17,19,15,.55); padding: 16px;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.mb-who-backdrop.mb-who-open { display: flex; }
.mb-who-card {
    width: 100%; max-width: 420px; max-height: 80vh;
    display: flex; flex-direction: column;
    background: var(--mb-card, #FFFDF8); color: var(--mb-ink, #11130F);
    border: 1px solid var(--mb-line, #E6DECC); border-radius: var(--mb-radius, 16px);
    box-shadow: var(--mb-shadow-hover, 0 18px 44px rgba(159,126,52,.16));
    overflow: hidden; animation: mb-who-in .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes mb-who-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.mb-who-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--mb-line, #E6DECC);
}
.mb-who-title { font-family: var(--mb-display, serif); font-weight: 700; font-size: 18px; }
.mb-who-close {
    border: 0; background: transparent; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%; font-size: 15px; line-height: 1;
    color: var(--mb-ink-soft, #4a4a42); display: inline-flex; align-items: center; justify-content: center;
    transition: background .14s, color .14s;
}
.mb-who-close:hover { background: var(--mb-gold-soft, rgba(200,162,74,.13)); color: var(--mb-gold-dark, #9f7e34); }
.mb-who-tabs {
    display: flex; gap: 2px; padding: 8px 12px 0; overflow-x: auto; flex-wrap: nowrap;
    border-bottom: 1px solid var(--mb-line, #E6DECC); scrollbar-width: thin;
}
.mb-who-tab {
    border: 0; background: transparent; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 10px 10px 0 0; margin-bottom: -1px;
    font-family: inherit; font-size: 14px; color: var(--mb-ink-soft, #4a4a42);
    border-bottom: 2px solid transparent;
}
.mb-who-tab .mb-who-tab-l { font-size: 16px; }
.mb-who-tab .mb-who-tab-n { font-weight: 700; }
.mb-who-tab:hover { background: var(--mb-gold-soft, rgba(200,162,74,.10)); }
.mb-who-tab.mb-on { color: var(--mb-gold-dark, #9f7e34); border-bottom-color: var(--mb-gold, #C8A24A); font-weight: 700; }
.mb-who-list { padding: 6px 8px 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mb-who-msg { padding: 30px 16px; text-align: center; color: var(--mb-ink-soft, #4a4a42); }
.mb-who-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none;
    transition: background .12s;
}
.mb-who-row:hover { background: var(--mb-gold-soft, rgba(200,162,74,.13)); text-decoration: none; }
.mb-who-av { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; }
.mb-who-img {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block;
    background: var(--mb-paper-2, #EFE9DB);
}
.mb-who-av.mb-tier-ring-red   { box-shadow: 0 0 0 2px #e23b3b; }
.mb-who-av.mb-tier-ring-green { box-shadow: 0 0 0 2px #1f9d4d; }
.mb-who-av.mb-tier-ring-gold  { box-shadow: 0 0 0 2px var(--mb-gold-dark, #9f7e34); }
.mb-who-av.mb-tier-ring-blue  { box-shadow: 0 0 0 2px #2BA7E0; }
/* the reactor's emoji badge, bottom inline-end of the avatar (LTR so it isn't mirrored) */
.mb-who-badge {
    position: absolute; inset-block-end: -2px; inset-inline-end: -3px;
    font-size: 15px; line-height: 1; direction: ltr;
    background: var(--mb-card, #FFFDF8); border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--mb-card, #FFFDF8);
}
.mb-who-name {
    font-size: 15px; font-weight: 600; color: var(--mb-ink, #11130F);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* mobile: bottom-sheet */
@media (max-width: 560px) {
    .mb-who-backdrop { align-items: flex-end; padding: 0; }
    .mb-who-card {
        max-width: none; max-height: 85vh;
        border-radius: var(--mb-radius, 16px) var(--mb-radius, 16px) 0 0;
        border-inline: 0; border-bottom: 0; animation: mb-who-up .22s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes mb-who-up { from { transform: translateY(100%); } to { transform: none; } }
    .mb-who-row { padding: 11px 10px; }
}
@media (prefers-reduced-motion: reduce) { .mb-who-card { animation: none !important; } }
/* comment-threading + reaction-overlay end */

/* ===== stripepayments: billing toggle + plan cards (yearly + cancel) =====
   RESTORED 2026-06-06: this block had drifted out of the served /static/branding.css
   (it survived only in the orphaned protected/modules/mahmoudbranding/resources copy),
   so the «شهري/سنوي» toggle + tier cards on /stripepayments/subscribe rendered unstyled.
   The toggle JS lives in stripepayments/views/subscribe/index.php (registerJs, intact). */
.mb-subscribe .mb-billing-toggle{display:flex;width:max-content;margin:6px auto 28px;padding:5px;gap:4px;
  border-radius:999px;border:1px solid rgba(159,126,52,.20);
  background:linear-gradient(180deg,rgba(17,19,15,.055),rgba(17,19,15,.03));
  box-shadow:inset 0 1px 3px rgba(17,19,15,.08)}
.mb-subscribe .mb-bt{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  min-height:42px;padding:9px 32px;border-radius:999px;background:transparent;
  font-family:'Readex Pro','Tajawal',sans-serif;font-weight:700;font-size:15px;color:#8a7a52;letter-spacing:.2px;
  transition:color .2s ease,box-shadow .25s ease,transform .1s ease}
.mb-subscribe .mb-bt:hover:not(.is-active){color:#11130F}
.mb-subscribe .mb-bt:active{transform:scale(.96)}
.mb-subscribe .mb-bt:focus-visible{outline:2px solid #2BA7E0;outline-offset:3px}
.mb-subscribe .mb-bt.is-active{color:#11130F;
  background:linear-gradient(135deg,#E6CD86,#C8A24A 62%,#b78f3c);
  box-shadow:0 1px 2px rgba(17,19,15,.20),0 9px 22px -7px rgba(159,126,52,.62)}
.mb-subscribe .mb-tiers{align-items:stretch}
.mb-subscribe .mb-tier-card{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid rgba(159,126,52,.18);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(17,19,15,.04),0 12px 32px -10px rgba(159,126,52,.16);
  transition:transform .18s ease,box-shadow .18s ease}
.mb-subscribe .mb-tier-card:hover{transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(17,19,15,.06),0 22px 50px -12px rgba(159,126,52,.28)}
.mb-subscribe .mb-tier-card .panel-heading{background:transparent;border:0;padding:22px 18px 4px}
.mb-subscribe .mb-tier-card .panel-heading h3{font-family:'Aref Ruqaa','Readex Pro',serif;font-weight:700;
  font-size:27px;color:#11130F;margin:0}
.mb-subscribe .mb-tier-card .panel-body{display:flex;flex-direction:column;flex:1 1 auto;padding:6px 22px 26px}
.mb-subscribe .mb-tier-card .mb-subscribe-btn,
.mb-subscribe .mb-tier-card .btn-success{margin-top:auto}
.mb-subscribe .mb-tier-card .btn-primary{border-radius:13px;min-height:52px;font-weight:800;font-size:16.5px;
  box-shadow:0 10px 24px -10px rgba(159,126,52,.6)}
.mb-subscribe .mb-tier-featured{border-color:rgba(200,162,74,.6)}
.mb-subscribe .mb-tier-featured::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;
  background:linear-gradient(90deg,#E6CD86,#C8A24A,#b78f3c)}
.mb-subscribe .mb-tier-featured .panel-heading h3{color:#9f7e34}
.mb-subscribe .mb-tier-price{margin:8px 0 2px;line-height:1}
.mb-subscribe .mb-amount{font-family:'Readex Pro','Tajawal',sans-serif;font-weight:800;font-size:46px;
  color:#11130F;letter-spacing:-1px}
.mb-subscribe .mb-period{display:inline-block;margin-inline-start:7px;font-size:13.5px;font-weight:600;color:#a39c8c}
.mb-subscribe .mb-tier-features li{padding:7px 0;font-size:14.5px;color:#3a382f}
.mb-subscribe .mb-current{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;border-radius:14px}
.mb-subscribe .mb-current-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mb-subscribe .mb-current .mb-muted{color:#7c8a6f;font-size:13px}
.mb-subscribe .mb-cancel-note{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#9f7e34;font-size:13.5px}
.mb-subscribe .mb-cancel-btn{border-radius:10px;font-weight:700}
/* ===== stripepayments end ===== */

/* ============================================================================
   Author-name links — pin to ink so a theme.css first-paint FOUC can't leave
   them as the browser-default link blue (#0000EE).
   The post/comment AUTHOR link is a plain <a> inside .wall-entry-header-info /
   .comment-heading; its black comes from theme.css `--bs-link-color-rgb:0,0,0`.
   If theme.css is slow/stale on the first paint the link falls back to the
   browser-default #0000EE blue until the page settles (the user-reported blue).
   branding.css is render-blocking and loads first, so pinning the color here
   keeps author names ink from the first paint regardless of theme.css timing.
   The accent SPACE-name link (.link-accent, intentional #005cb8) is excluded.
   Pairs with the CSP nonce=false fix (config/web.php) that stops the ~30s
   securitypolicyviolation auto-reload. See docs/solutions.
   ============================================================================ */
.wall-entry-header-info a:not(.link-accent),
.comment-heading a:not(.link-accent),
.wall-entry-header .media-heading a:not(.link-accent) { color: var(--mb-ink) !important; }