/* Slice 36 — Theme system foundation (light / dark).
 *
 * Apply dark mode by adding `theme-dark` class to <body>. SbAlert/SbToast
 * read it at fire time and switch background/foreground.
 *
 * For broader UI dark-theming, this file overrides a small set of common
 * surfaces (boxes, sidebar, body bg, text). Component-specific dark rules
 * can land later as the theme rolls out.
 */

:root {
    --sb-bg:           #f5f5f5;
    --sb-surface:      #ffffff;
    --sb-text:         #000000;
    --sb-text-muted:   rgba(0,0,0,0.5);
    --sb-border:       #e6e6e6;
    --sb-accent:       #0073b7 ;
    --sb-success:      #1ce589;
    --sb-danger:       #c0392b;
    --sb-shadow:       0 1px 3px rgba(0,0,0,.06);
    /* Elevation + text steps (see "Dark mode — shared components" below).
     * --sb-accent stays the brand blue for button fills; --sb-link is the
     * colour for text links, lighter in dark mode so it stays readable. */
    --sb-surface-2:     #f0f2f5;   /* inset/raised panel inside a card */
    --sb-hover:         #f2f3f5;
    --sb-hover-strong:  #e7e9ed;
    --sb-input-bg:      #ffffff;
    --sb-inset:         #e9ebee;   /* letterbox behind media */
    --sb-border-strong: #d8dce3;
    --sb-text-soft:     rgba(0,0,0,0.75);
    --sb-link:          #0073b7;
}

body.theme-dark {
    --sb-bg:           #161922;
    --sb-surface:      #1f2330;
    --sb-text:         #ffffff;
    --sb-text-muted:   rgba(255,255,255,0.55);
    --sb-border:       #2c3142;
    --sb-accent:       #0073b7;
    --sb-success:      #2cdf95;
    --sb-danger:       #e25e4d;
    --sb-shadow:       0 1px 4px rgba(0,0,0,.5);
    --sb-surface-2:     #262b3a;
    --sb-hover:         #2a2f3e;
    --sb-hover-strong:  #353a4d;
    --sb-input-bg:      #14171f;
    --sb-inset:         #20242f;
    --sb-border-strong: #323849;
    --sb-text-soft:     rgba(255,255,255,0.78);
    --sb-link:          #4ea8ff;
    /* Native scrollbars, <select> lists, date pickers and checkboxes. */
    color-scheme: dark;
}

/* includes/head.php and auth/partials/head.php both run an inline
 * no-FOUC script that adds `theme-dark-pre` to <html> synchronously
 * (before <body> even exists yet, so it can't target body directly), then
 * promotes to the real `body.theme-dark` at DOMContentLoaded. That script
 * has existed since Slice 36, but nothing ever defined what
 * `.theme-dark-pre` actually looks like — it was a dead class, so the page
 * always painted in default light colors first and only flipped dark once
 * DOMContentLoaded swapped the class onto <body>. That flip *was* the
 * visible flash. Painting the same dark bg/text here, immediately, is what
 * the pre-class was always supposed to do. */
html.theme-dark-pre,
html.theme-dark-pre body {
    background-color: #161922 !important;
    color: #ffffff;
}

/* Apply theme to top-level surfaces. We override sparingly so existing
 * stylesheet specificity wins for component-internal styling. */
body.theme-dark {
    background-color: var(--sb-bg) !important;
    color: var(--sb-text);
    /* style.css sets no height/min-height anywhere on body or html, and the
     * theme-dark class only ever lands on <body> (see includes/head.php /
     * includes/navigations/user.php's sbApplyTheme), not <html> — so on any
     * page shorter than the viewport (e.g. an empty-state list), body's
     * background only painted as tall as its content, and the leftover
     * viewport below it fell through to the browser's default white canvas.
     * min-height keeps the dark background covering the full viewport
     * regardless of content height. */
    min-height: 100vh;
}

/* Shared spinner — was independently duplicated (as `spin`/`wtSpin`/inline
 * copies) in includes/head.php and watch/css/slides.css. One canonical
 * definition here since it's the same 1s linear full rotation everywhere. */
@keyframes sb-spin { to { transform: rotate(360deg); } }
.sb-spin { animation: sb-spin 1s linear infinite; }
body.theme-dark .box,
body.theme-dark .panel,
body.theme-dark .card {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow);
}
body.theme-dark .box-header,
body.theme-dark .box-footer {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text);
    border-color: var(--sb-border);
}
body.theme-dark .text-muted,
body.theme-dark small.text-muted {
    color: var(--sb-text-muted) !important;
}
body.theme-dark a:not(.btn) { color: var(--sb-link); }
body.theme-dark hr,
body.theme-dark .divider {
    border-color: var(--sb-border) !important;
}
body.theme-dark .form-control,
body.theme-dark input.input,
body.theme-dark select.form-control,
body.theme-dark textarea.form-control,
body.theme-dark .field-group {
    background-color: var(--sb-input-bg) !important;
    color: var(--sb-text);
    border-color: var(--sb-border) !important;
}
body.theme-dark .form-control::placeholder { color: var(--sb-text-muted); }
body.theme-dark .navbar,
body.theme-dark header.header,
body.theme-dark #sidebar_online_users,
body.theme-dark #sidebar_toggle_online_users {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text);
    border-color: var(--sb-border);
}
body.theme-dark .modal-content { background-color: var(--sb-surface); color: var(--sb-text); }

/* Light/dark image swap (legacy convention used in profile_settings etc). */
body.theme-dark .light-image { display: none !important; }
body.theme-dark .dark-image  { display: block !important; }
body:not(.theme-dark) .light-image { display: block; }
body:not(.theme-dark) .dark-image  { display: none !important; }

/* SweetAlert dark customClass — referenced by sb_dialog.js. */
.sb-swal-dark .swal2-title,
.sb-swal-dark .swal2-html-container,
.sb-swal-dark .swal2-content {
    color: #e9ecf2 !important;
}
.sb-swal-dark .swal2-close { color: #aab1c4; }
.sb-swal-dark .swal2-actions .btn { margin: 0 4px; }

/* Above the fixed site header (z-index 10000) and the e-mail banner (10001):
   at SweetAlert's own 1060 they covered every toast at the top right, so
   messages like "x isn't a photo or video" were never seen. Toasts at the top
   start under the header (and the banner, --sb-ev-h, when it shows). */
.swal2-container { z-index: 10060 !important; }
body.swal2-toast-shown .swal2-container.swal2-top,
body.swal2-toast-shown .swal2-container.swal2-top-start,
body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-left,
body.swal2-toast-shown .swal2-container.swal2-top-right { top: calc(var(--sb-ev-h, 0px) + 52px) !important; }
body.chat-fullpage.swal2-toast-shown .swal2-container[class*="swal2-top"] { top: calc(var(--sb-ev-h, 0px) + 8px) !important; }

/* Toast popup spacing tweaks for both themes. */
.swal2-toast .swal2-title { font-weight: 600; }
.swal2-toast .swal2-content { font-size: 13px; }

/* ----------------------------------------------------------------
 * Hotfix (post-Slice 36): comprehensive dark-mode overrides.
 *
 * style.css and friends hardcode #fff / #000 on dozens of surfaces
 * and text containers, which means the theme switch was leaving
 * dropdowns, headers, and many text blocks unreadable in dark mode.
 * The rules below force the common surfaces + text into the dark
 * palette using high specificity / !important so they win against
 * the legacy stylesheet without touching it.
 * ---------------------------------------------------------------- */

body.theme-dark,
body.theme-dark .main-content,
body.theme-dark .wrapper,
body.theme-dark .page-content,
body.theme-dark #content,
body.theme-dark .container,
body.theme-dark .container-fluid {
    background-color: var(--sb-bg) !important;
    color: var(--sb-text) !important;
}

/* Generic text containers that inherit hardcoded dark colors. */
body.theme-dark p,
body.theme-dark span,
body.theme-dark li,
body.theme-dark td,
body.theme-dark th,
body.theme-dark label,
body.theme-dark dd,
body.theme-dark dt,
body.theme-dark blockquote,
body.theme-dark figcaption,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6,
body.theme-dark .text-default,
body.theme-dark .text-dark,
body.theme-dark .text-black {
    color: var(--sb-text);
}

/* Don't fight icons / badges / utility colors — those use Bootstrap's
 * text-primary/success/danger/etc. and stay vivid against either bg. */

/* Surfaces commonly used by Slydap layout. */
body.theme-dark .box,
body.theme-dark .box-content,
body.theme-dark .box-body,
body.theme-dark .panel-body,
body.theme-dark .well,
body.theme-dark .media,
body.theme-dark .feed-box,
body.theme-dark .trace-box,
body.theme-dark .list-group,
body.theme-dark .list-group-item,
body.theme-dark table,
body.theme-dark table.table,
body.theme-dark .table > tbody > tr > td,
body.theme-dark .table > thead > tr > th {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text);
    border-color: var(--sb-border) !important;
}

/* Dropdowns — the user dropdown, notification dropdowns, message
 * dropdowns, and any bootstrap dropdown all inherit from the same
 * .dropdown-menu base. style.css forces #fff backgrounds and #000
 * text on .dropdown-menu.extended li p, etc. */
body.theme-dark .dropdown-menu,
body.theme-dark .dropdown-menu.extended,
body.theme-dark .dropdown-menu.extended.short,
body.theme-dark .dropdown-menu.extended.logout {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border: 1px solid var(--sb-border) !important;
    box-shadow: var(--sb-shadow) !important;
}
body.theme-dark .dropdown-menu > li > a,
body.theme-dark .dropdown-menu.extended li a,
body.theme-dark .dropdown-menu.extended li p,
body.theme-dark .dropdown-menu.extended li p.green,
body.theme-dark .dropdown-menu.extended li .step,
body.theme-dark .dropdown-menu.extended li .subject,
body.theme-dark .dropdown-menu.extended li .subject .from,
body.theme-dark .dropdown-menu.extended li .subject .time,
body.theme-dark .dropdown-menu.extended li .message,
body.theme-dark .dropdown-menu.extended.logout > li > a {
    color: var(--sb-text) !important;
    background-color: transparent !important;
}
body.theme-dark .dropdown-menu > li > a:hover,
body.theme-dark .dropdown-menu > li > a:focus,
body.theme-dark .dropdown-menu.extended li a:hover,
body.theme-dark .dropdown-menu.extended.logout > li > a:hover {
    background-color: var(--sb-hover) !important;
    color: #ffffff !important;
}
body.theme-dark .dropdown-menu .divider,
body.theme-dark .dropdown-menu li.divider {
    background-color: var(--sb-border) !important;
    border-color: var(--sb-border) !important;
}
/* Notify-arrow tip on extended dropdowns — match surface so it
 * doesn't show as a white triangle pointing into a dark panel. */
body.theme-dark .notify-arrow,
body.theme-dark .shortnote.notify-arrow {
    border-bottom-color: var(--sb-surface) !important;
}

/* Modal bodies + headers + footers. Bootstrap defaults to white. */
body.theme-dark .modal-content,
body.theme-dark .modal-header,
body.theme-dark .modal-body,
body.theme-dark .modal-footer {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}
body.theme-dark .modal-header,
body.theme-dark .modal-footer {
    border-color: var(--sb-border) !important;
}
body.theme-dark .modal-title { color: var(--sb-text) !important; }
body.theme-dark .close { color: var(--sb-text); opacity: .85; }

/* Form inputs already covered above; reinforce a few extras. */
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark input[type="password"],
body.theme-dark input[type="search"],
body.theme-dark input[type="number"],
body.theme-dark input[type="url"] {
    background-color: var(--sb-input-bg) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}
body.theme-dark .input-group-addon {
    background-color: var(--sb-input-bg) !important;
    color: var(--sb-text-muted);
    border-color: var(--sb-border);
}

/* Buttons — keep brand colors but tame the default/secondary
 * variants that style.css paints white. assets/css/buttons.css's
 * .btn.like_white also sets a white-to-#f6f7f9 background-image gradient
 * (no !important) — background-color alone doesn't clear it, since the
 * image layer paints on top of the color layer, so the button stayed
 * visibly white even though its background-color was already correct.
 * Explicitly clearing background-image is what actually fixes it. */
body.theme-dark .btn-default,
body.theme-dark .btn-white,
body.theme-dark .like_white {
    background-color: var(--sb-hover) !important;
    background-image: none !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}
body.theme-dark .btn-default:hover,
body.theme-dark .btn-white:hover,
body.theme-dark .like_white:hover {
    background-color: var(--sb-hover-strong) !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* Tooltips / popovers — Bootstrap defaults to dark-on-white; flip. */
body.theme-dark .popover {
    background-color: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text);
}
body.theme-dark .popover-content,
body.theme-dark .popover-title { color: var(--sb-text) !important; }

/* Inline-styled white backgrounds (rare but they exist). */
body.theme-dark [style*="background:#fff"],
body.theme-dark [style*="background: #fff"],
body.theme-dark [style*="background-color:#fff"],
body.theme-dark [style*="background-color: #fff"],
body.theme-dark [style*="background:#ffffff"],
body.theme-dark [style*="background-color:#ffffff"] {
    background-color: var(--sb-surface) !important;
}
body.theme-dark [style*="color:#000"],
body.theme-dark [style*="color: #000"],
body.theme-dark [style*="color:#333"],
body.theme-dark [style*="color: #333"] {
    color: var(--sb-text) !important;
}
.hashtags, .mentions {
    background: none !important;
}
/* ── Sidebar dark-mode fixes ─────────────────────────────────────────────────
 * The rules below address sidebar elements not covered by the generic rules
 * above. Each comment explains the specificity or inline-style conflict. */

/* .link-black is defined color:#555 !important in sb.css — needs explicit win. */
body.theme-dark .link-black,
body.theme-dark .link-black:visited {
    color: var(--sb-text) !important;
}

/* Feed-menu <a> tags use a gradient + -webkit-text-fill-color:transparent,
 * which makes them invisible against a dark background. Strip the gradient
 * and force a readable color. */
body.theme-dark .feed-menu .main-menu li > a,
body.theme-dark .feed-menu .main-menu li > a span {
    color: var(--sb-text) !important;
    -webkit-text-fill-color: var(--sb-text) !important;
    background-image: none !important;
}
body.theme-dark .feed-menu .main-menu li > a:hover,
body.theme-dark .feed-menu .main-menu li > a:hover span {
    color: var(--sb-link) !important;
    -webkit-text-fill-color: var(--sb-link) !important;
}

/* Small counters inside nav items (friend count, notification count, etc.) */
body.theme-dark .sm-info {
    color: var(--sb-text-muted) !important;
}

/* .user-block .username/.description in sb.css has specificity (0,2,0) which
 * beats the generic body.theme-dark span rule at (0,1,1). Override explicitly. */
body.theme-dark .user-block .username,
body.theme-dark .user-block .username a {
    color: var(--sb-text) !important;
}
body.theme-dark .user-block .description {
    color: var(--sb-text-muted) !important;
}

/* Close/toggle sidebar button has an inline text-shadow:#333 that shows as
 * a dark halo around the icon on a dark background. */
body.theme-dark .toggle_sidebar {
    text-shadow: none !important;
}

/* ── Nav dropdown (messages/notifications/friend requests) dark-mode fixes ──
 * These rows are AJAX-loaded (includes/navigations/load_*.php) so they
 * weren't caught by the initial dropdown-menu sweep above. */

/* sb.css hardcodes a light lavender background on every message-preview row
 * and every unread-notification row; combined with the forced near-white
 * row text above, this rendered as barely-visible light-on-light text
 * inside a dark panel. */
body.theme-dark .allnotify .note_row_new,
body.theme-dark .allnotify li.user_to_chat {
    background-color: var(--sb-hover) !important;
}

/* The friend-request dropdown's "Decline" button only gets its padding from
 * .decline_button — color/background still come from the base .button
 * class (buttons.css), which is a light-gray gradient chip that stays
 * light-on-light-gray in dark mode. */
body.theme-dark .button.decline_button {
    background-color: var(--sb-hover) !important;
    background-image: none !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

/* Friend-request dropdown header row has an inline border-bottom:#c4c4c4. */
body.theme-dark li.for_notegreen {
    border-bottom-color: var(--sb-border) !important;
}

/* ── Profile page (profile.php) dark-mode fixes ──────────────────────────
 * profile.php and profile/partials/profile_info.php carry their own
 * page-local <style> blocks with hardcoded light-theme colors that predate
 * the theme system entirely, so nothing above catches them. */

/* Timeline/About/Friends/Photos tab row above the profile — profile.php's
 * inline <style> + profile/partials/banner.php's .pro_link icons and
 * profile/partials/just_friends.php's .collections-header tabs. */
body.theme-dark .pro_link,
body.theme-dark .attachment-heading {
    color: var(--sb-text) !important;
}
body.theme-dark .collections-header > a {
    color: var(--sb-text-muted) !important;
}
body.theme-dark .collections-header > a.is-active {
    color: var(--sb-text) !important;
}

/* "About" tab (profile.php?...&bio=...) — profile_info.php hardcodes white
 * cards (.flex-block, .about-summary) with dark text for the info rows
 * (Occupation/Education/Lives in/Relationship) and bio paragraph; in dark
 * mode these stayed bright white islands floating in an otherwise-dark
 * page instead of picking up the theme at all. */
body.theme-dark .client-info .flex-block,
body.theme-dark .client-info .about-summary {
    background: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
}
body.theme-dark .client-info .flex-block-meta span,
body.theme-dark .client-info .about-summary p {
    color: var(--sb-text-muted) !important;
}
body.theme-dark .client-info .flex-block-meta span a {
    color: var(--sb-text) !important;
}

/* ── Trending/Search left "notify-sidebar" panel dark-mode fixes ─────────
 * search/css/style.php (shared by trending.php and search.php) hardcodes
 * this whole component with a light #fafafa background and dark-navy/gray
 * text — none of it was wired to the theme system at all, so it stayed
 * permanently light regardless of dark mode. */
body.theme-dark .notify-sidebar {
    background: var(--sb-surface) !important;
    border-right-color: var(--sb-border) !important;
}
body.theme-dark .notify-sidebar .notify-sidebar-inner .user-block {
    border-bottom-color: var(--sb-border) !important;
}
body.theme-dark .notify-sidebar .notify-sidebar-inner .user-block h4,
body.theme-dark .notify-sidebar .notify-sidebar-inner .user-block .user-stats .stat-block span:first-child {
    color: var(--sb-text) !important;
}
body.theme-dark .notify-sidebar .notify-sidebar-inner .user-block p,
body.theme-dark .notify-sidebar .notify-sidebar-inner .user-block .user-stats .stat-block span:last-child,
body.theme-dark .notify-sidebar .notify-sidebar-inner .user-block .close-notify-sidebar svg,
body.theme-dark .notify-sidebar .notify-sidebar-inner .user-menu .user-menu-inner .menu-block ul li a i {
    color: var(--sb-text-muted) !important;
}
body.theme-dark .notify-sidebar .notify-sidebar-inner .user-menu .user-menu-inner .separator {
    border-bottom-color: var(--sb-border) !important;
}

/* ── Page/Group action-button row (page.php's About/Q&A/Like/Photos/
 * Reviews/"..." row, pages/partials/page_banner.php) ─────────────────────
 * .page-button hardcodes background:#fcfcfc, color:#999. These buttons are
 * also .link-black, whose existing dark-mode override forces their text to
 * near-white — but nothing ever touched .page-button's own background, so
 * in dark mode this became white text on a near-white (#fcfcfc) button:
 * effectively invisible. Same problem, worse, for the "already liked" Like
 * button state (.page-likes-button-default, background:#d4d4d4 gradient). */
body.theme-dark .page-button {
    background: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text) !important;
}
body.theme-dark .page-likes-button-default {
    background: var(--sb-hover) !important;
    background-image: none !important;
}

/* ── Profile "About Me" flip-card dark-mode fixes ────────────────────────
 * profile/partials/about_me.php's .card-container/.front/.back component
 * (styled by assets/css/rotate.css, now linked from profile.php) hardcodes
 * white panels, a white avatar ring, and light borders/muted-gray links
 * with no theme hook at all. */
body.theme-dark .card,
body.theme-dark .front,
body.theme-dark .back {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    box-shadow: var(--sb-shadow) !important;
}
body.theme-dark .card .user img {
    background-color: var(--sb-surface) !important;
    border-color: var(--sb-surface) !important;
}
body.theme-dark .card .footer {
    border-top-color: var(--sb-border) !important;
    color: var(--sb-text-muted) !important;
}
body.theme-dark .link-dark {
    color: var(--sb-text-muted) !important;
}
body.theme-dark .link-dark:hover {
    color: var(--sb-link) !important;
}

/* Auth pages (login/signup/forgot password) — auth/css/style.css now themes
 * .login-box-body/.register-box-body/.form-control natively with the
 * --sb-* custom properties (split-screen redesign), so no dark-mode patch
 * is needed here anymore. */

/* ── Search dropdown dark-mode fixes ─────────────────────────────────────
 * search/index.php's #found panel, home_sidebar.php's #found_friend panel,
 * and the various share/tag "search friends" widgets (engine/search_friend.php,
 * share/controllers/search_share_*.php) all render the same .user_div/.name/
 * .no_data markup. style.css hardcodes it white-bg/black-text with no theme
 * hook at all, so it stayed a bright white box regardless of theme. */
body.theme-dark .found,
body.theme-dark .found_friend {
    background-color: var(--sb-surface) !important;
    /* border: 1px solid var(--sb-border); */
}
body.theme-dark .user_div:hover {
    background-color: var(--sb-hover) !important;
}
body.theme-dark .name {
    color: var(--sb-text) !important;
}
body.theme-dark .no_data {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
}
body.theme-dark .arrow-down {
    border-top-color: var(--sb-surface) !important;
}

/* ── Post composer editor dark-mode fixes ────────────────────────────────
 * post/css/editorCss.php forces the emojionearea wrapper to a hardcoded
 * #f0f2f5 background using a 4-class selector, which out-specifies the
 * generic .form-control override above even with !important on both sides.
 * The emojionearea plugin's own stylesheet also hardcodes the contenteditable
 * text color (#555), the placeholder color, and the emoji-picker popup —
 * none of it wired to the theme system. */
body.theme-dark .emojionearea.form-control.newpost_textarea.sb_newpost_textarea {
    background-color: var(--sb-input-bg) !important;
    border-color: var(--sb-border) !important;
}
body.theme-dark .emojionearea-editor {
    color: var(--sb-text) !important;
}
body.theme-dark .emojionearea-editor:empty:before {
    color: var(--sb-text-muted) !important;
}
body.theme-dark .emojionearea-picker {
    background-color: var(--sb-surface) !important;
    box-shadow: var(--sb-shadow) !important;
}
body.theme-dark .emojionearea-filters {
    background-color: var(--sb-bg) !important;
}
body.theme-dark .emojionearea-filter.active {
    background-color: var(--sb-surface) !important;
}

/* ── Feed "Suggested people" / "Suggested pages" carousel cards ──────────
 * ads_manager/public_sugestted_friends.php + public_sugestted_pages.php.
 * The name link is .text-black, which sb.css pins to #111 !important, so it
 * vanished on the dark box; the pages caption also hardcoded a light
 * #dee4ed panel. These rules own the card in both themes. */
.sb-sugg-card {
    --sugg-surface: var(--sb-surface);
    --sugg-border:  var(--sb-border);
    margin: 4px !important;
    border: none !important;
}
body.theme-dark .sb-sugg-card {
    --sugg-surface: var(--sb-surface-2);
    --sugg-border:  var(--sb-border-strong);
}
.sb-sugg-card .img_sug,
.sb-sugg-card .sb-sugg-caption {
    box-sizing: border-box;
}
.sb-sugg-card .img_sug {
    display: block;
    width: 100%;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--sugg-border);
    border-bottom: none;
    box-shadow: none;
}
.sb-sugg-card .sb-sugg-caption {
    float: none;
    width: 100%;
    padding: 10px 14px 14px !important;
    background: var(--sugg-surface) !important;
    border: 1px solid var(--sugg-border);
    border-top: none;
    border-radius: 0 0 16px 16px;
    color: var(--sb-text) !important;
}
.sb-sugg-card .sb-sugg-caption .box-info {
    background: transparent !important;
    padding: 0;
    margin: 0;
}
.sb-sugg-card .sb-sugg-caption .box-category,
.sb-sugg-card .sb-sugg-caption .box-category * {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sb-text-muted) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-sugg-card .sb-sugg-caption .box-category * {
    display: inline;
}
.sb-sugg-card .sb-sugg-caption .box-title {
    margin: 4px 0 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-sugg-card .sb-sugg-caption .box-title a {
    color: var(--sb-text) !important;
}
.sb-sugg-card .sb-sugg-caption .box-title a:hover {
    color: var(--sb-link) !important;
}
.sb-sugg-card .sb-sugg-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sb-sugg-card .sb-sugg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin: 0;
    padding: 6px 16px;
    border-radius: 999px !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.sb-sugg-card .sb-sugg-meta {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-text-muted) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-sugg-card .sb-sugg-meta:hover {
    color: var(--sb-link) !important;
    text-decoration: none;
}

/* ── Sponsored carousel slide captions (ads_inc/carousel_middle.php) ─────
 * Used by the feed ad (ads_manager/public_carousel_ad.php — index, group,
 * page) and the ad preview/promote screens on adverts.php and donate. Each
 * of those pages redefines .caption_wrap as a light #f0f2f5 panel in its own
 * inline <style>, which loads after this sheet — hence !important. The
 * caption sits inside a.text-muted, so in dark mode it was pale text on a
 * pale panel. The #ccc letterbox behind narrow images glared the same way. */
body.theme-dark div.caption_wrap {
    background-color: var(--sb-surface-2) !important;
    color: var(--sb-text) !important;
    border: 1px solid var(--sb-border-strong);
    border-top: none;
    box-shadow: none !important;
}
body.theme-dark div.caption_wrap p,
body.theme-dark div.caption_wrap span {
    color: var(--sb-text) !important;
}
body.theme-dark .caro_img,
body.theme-dark .caro_img_side_ad {
    background: var(--sb-inset) !important;
}
body.theme-dark .ad_media_wrap {
    border-color: var(--sb-border-strong) !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * Dark mode — shared components
 *
 * The recurring bug: the rules near the top make all text light, but
 * sb.css/style.css and many partials' inline <style> blocks keep their own
 * light panels (#f0f2f5, #f4f4f4, #dee4ed …), giving light-on-light text;
 * and a few classes pin text dark with !important (.text-black), giving
 * dark-on-dark. Everything here maps those onto one elevation scale:
 *
 *   --sb-bg (page)  →  --sb-surface (card)  →  --sb-surface-2 (panel inside
 *   a card: comment bubble, link preview, caption)  →  --sb-hover
 *
 * with --sb-text / --sb-text-soft / --sb-text-muted for text and --sb-link
 * for links. New components should use the tokens instead of adding rules.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Text that was pinned dark ── */
/* sb.css: .text-black { color:#111 !important } — beat it. */
body.theme-dark .text-black,
body.theme-dark a.text-black,
body.theme-dark i.text-black,
body.theme-dark .post,
body.theme-dark div.post,
body.theme-dark .comment-text,
body.theme-dark .box-comments .username,
body.theme-dark .extracted_post_area h4,
body.theme-dark .reactmodalhead,
body.theme-dark .title,
body.theme-dark .category-box .box-content h3,
body.theme-dark .home-content .collections-wrap .collection .header h4,
body.theme-dark .videos-sidebar .videos-sidebar-inner .user-block h4,
body.theme-dark .videos-sidebar .videos-sidebar-inner .user-block .user-stats .stat-block span:first-child,
body.theme-dark .video-collection .episode .episode-meta .info span:first-child,
body.theme-dark .switch-block .meta h4,
body.theme-dark .field label,
body.theme-dark .user_to_chat_annew,
body.theme-dark .navcheronbtn,
body.theme-dark .search_box,
body.theme-dark .search_box1,
body.theme-dark .accordion-heading .accordion-toggle {
    color: var(--sb-text) !important;
}
body.theme-dark .reactors,
body.theme-dark .reactors a,
body.theme-dark .btn-box-tool,
body.theme-dark .opt-widget,
body.theme-dark .opt-widget i,
body.theme-dark .field-group .textarea,
body.theme-dark .client-info .menu-left .menu-item span,
body.theme-dark .attachment-block .attachment-text,
body.theme-dark .msg_aside_left_load_frnds_btn,
body.theme-dark .hover-card-options-wrapper li a,
body.theme-dark .img_drop > li > a,
body.theme-dark .nav-pills > li > a,
body.theme-dark .nav-stacked > li > a,
body.theme-dark .nav-tabs > li > a,
body.theme-dark .nav-tabs-custom > .nav-tabs > li > a {
    color: var(--sb-text-soft) !important;
}
body.theme-dark .open .btn-box-tool,
body.theme-dark .btn-box-tool:hover,
body.theme-dark .nav-tabs > li.active > a,
body.theme-dark .nav-tabs-custom > .nav-tabs > li.active > a {
    color: var(--sb-text) !important;
}
body.theme-dark .sb_notify_jack li span.from {
    color: var(--sb-link) !important;
}

/* ── Panels inside a card (one step up from the card) ── */
body.theme-dark .box-comments .box-comment .comment-text-wrap,
body.theme-dark .comment-text-wrap,
body.theme-dark .extracted_post_area,
body.theme-dark .extract_bg,
body.theme-dark .attachment-block,
body.theme-dark .comm-reaction-elem,
body.theme-dark .list-seperator,
body.theme-dark .direct-chat-text,
body.theme-dark .label-default,
body.theme-dark .bg-gray,
body.theme-dark .bg-gray-light,
body.theme-dark .share_npst_area,
body.theme-dark .hover-card-options-wrapper,
body.theme-dark .ui-sortable > li,
body.theme-dark .msg_aside_left_container .search_friend,
body.theme-dark .saerch_wrapper .form-control.searchFriends,
body.theme-dark .group-likes-button-default {
    background-color: var(--sb-surface-2) !important;
    background-image: none !important;
    border-color: var(--sb-border-strong) !important;
    color: var(--sb-text) !important;
}
/* The reaction chip on a comment bubble sits on the bubble's edge — ring it
 * in the card colour so it reads as a separate chip, as in light mode. */
body.theme-dark .comm-reaction-elem {
    border-color: var(--sb-surface) !important;
}
body.theme-dark .extracted_post_area {
    border-bottom-color: var(--sb-border-strong) !important;
}

/* ── Card-level surfaces that were hardcoded white ── */
body.theme-dark .bg-white,
body.theme-dark .view-media-thread,
body.theme-dark .main-footer,
body.theme-dark .nav-tabs-custom,
body.theme-dark .nav-tabs-custom > .tab-content,
body.theme-dark .nav-tabs-custom > .nav-tabs > li.active > a,
body.theme-dark .nav-tabs > li.active > a,
body.theme-dark .nav-tabs > li.active > a:hover,
body.theme-dark .nav-tabs > li.active > a:focus,
body.theme-dark .info-box,
body.theme-dark .content-panel,
body.theme-dark .white-panel,
body.theme-dark .form-panel,
body.theme-dark .showback,
body.theme-dark .ds,
body.theme-dark .img_drop,
body.theme-dark .sb_notify_jack,
body.theme-dark .msg_aside_top,
body.theme-dark .online_users_aside_nd,
body.theme-dark .user-block-head,
body.theme-dark #online_users_aside,
body.theme-dark .member_info_footer,
body.theme-dark .media_frm_grp,
body.theme-dark .videos-sidebar,
body.theme-dark .navbar-custom-menu > .navbar-nav > li > .dropdown-menu,
body.theme-dark .pagination > li > a,
body.theme-dark .pagination > li > span {
    background-color: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text);
}
body.theme-dark .content-wrapper,
body.theme-dark .right-side {
    background-color: var(--sb-bg) !important;
}
body.theme-dark .nav-tabs {
    border-bottom-color: var(--sb-border) !important;
}

/* Hovercards (hovercard/*, assets/css/hovercard.css): name-hover popups. */
body.theme-dark .basic-hovercard + .popover,
body.theme-dark .reaction-hovercard + .popover,
body.theme-dark .hover-card-content,
body.theme-dark .main-body,
body.theme-dark .image-wrapper,
body.theme-dark .basic-image-wrapper {
    background-color: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text);
}
body.theme-dark .hover-card-content li.right-aligned {
    border-left-color: var(--sb-border) !important;
}
/* hovercard.css shrinks the inner ::after to 1px, so the visible pointer is
 * the outer .arrow border — colour both. */
body.theme-dark .popover.top > .arrow,
body.theme-dark .popover.top > .arrow:after    { border-top-color: var(--sb-surface) !important; }
body.theme-dark .popover.bottom > .arrow,
body.theme-dark .popover.bottom > .arrow:after { border-bottom-color: var(--sb-surface) !important; }
body.theme-dark .popover.left > .arrow,
body.theme-dark .popover.left > .arrow:after   { border-left-color: var(--sb-surface) !important; }
body.theme-dark .popover.right > .arrow,
body.theme-dark .popover.right > .arrow:after  { border-right-color: var(--sb-surface) !important; }

/* Profile / group / page header buttons (profile/partials/banner.php,
 * groups + pages banners): white chips with black text. */
body.theme-dark .group-button,
body.theme-dark .changelogobtn,
body.theme-dark .user_to_chat_btn {
    background: var(--sb-hover) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}
body.theme-dark .group-button:hover,
body.theme-dark .changelogobtn:hover,
body.theme-dark .user_to_chat_btn:hover {
    background: var(--sb-hover-strong) !important;
}

/* ── Hover states that flashed light ── */
body.theme-dark .nav > li > a:hover,
body.theme-dark .nav > li > a:focus,
body.theme-dark .user_to_chat_annew:hover,
body.theme-dark .navcheronbtn:hover,
body.theme-dark .top-nav ul.top-menu > li > a:hover,
body.theme-dark .box-comments .box-comment .comment-option-wrap button.btn-circle:hover,
body.theme-dark .pagination > li > a:hover {
    background-color: var(--sb-hover) !important;
}
body.theme-dark .box-comments .box-comment .comment-option-wrap button.btn-circle {
    background-color: transparent !important;
    color: var(--sb-text-muted) !important;
}

/* ── Inputs that kept a light fill ── */
body.theme-dark input.inp-border,
body.theme-dark span.inp-border,
body.theme-dark .input-group .input-group-addon {
    background-color: var(--sb-input-bg) !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text-muted);
}

/* Settings switches (profile, notifications, Watch settings): the off track
 * was a light grey pill; the knob stays white, the on state stays green. */
body.theme-dark .f-switch i {
    background-color: var(--sb-border-strong) !important;
}
body.theme-dark .f-switch i::before {
    background-color: var(--sb-input-bg) !important;
}
body.theme-dark .f-switch input:checked + i {
    background-color: var(--sb-success) !important;
}

/* ── Safety net for inline style="" colours ──
 * Partials set these directly on elements, which no class rule can reach.
 * Light fills become the inset-panel colour; dark text becomes soft text.
 * (The white fills and #000/#333 text are handled further up.) */
body.theme-dark [style*="background:#f0f2f5" i],  body.theme-dark [style*="background: #f0f2f5" i],
body.theme-dark [style*="background-color:#f0f2f5" i], body.theme-dark [style*="background-color: #f0f2f5" i],
body.theme-dark [style*="background:#dee4ed" i],  body.theme-dark [style*="background: #dee4ed" i],
body.theme-dark [style*="background:#fcfcfc" i],  body.theme-dark [style*="background: #fcfcfc" i],
body.theme-dark [style*="background:#fbfbfb" i],  body.theme-dark [style*="background: #fbfbfb" i],
body.theme-dark [style*="background:#fafafa" i],  body.theme-dark [style*="background: #fafafa" i],
body.theme-dark [style*="background:#f9f9f9" i],  body.theme-dark [style*="background: #f9f9f9" i],
body.theme-dark [style*="background:#f7f8f9" i],  body.theme-dark [style*="background: #f7f8f9" i],
body.theme-dark [style*="background:#f7f7f7" i],  body.theme-dark [style*="background: #f7f7f7" i],
body.theme-dark [style*="background:#f5f6f7" i],  body.theme-dark [style*="background: #f5f6f7" i],
body.theme-dark [style*="background:#f5f5f5" i],  body.theme-dark [style*="background: #f5f5f5" i],
body.theme-dark [style*="background:#f4f4f4" i],  body.theme-dark [style*="background: #f4f4f4" i],
body.theme-dark [style*="background-color:#f4f4f4" i], body.theme-dark [style*="background-color: #f4f4f4" i],
body.theme-dark [style*="background:#f3f7f9" i],  body.theme-dark [style*="background: #f3f7f9" i],
body.theme-dark [style*="background:#eee" i],     body.theme-dark [style*="background: #eee" i],
body.theme-dark [style*="background:white" i],    body.theme-dark [style*="background: white" i],
body.theme-dark [style*="background-color:white" i], body.theme-dark [style*="background-color: white" i],
body.theme-dark [style*="background:aliceblue" i], body.theme-dark [style*="background: aliceblue" i] {
    background-color: var(--sb-surface-2) !important;
    color: var(--sb-text);
}
body.theme-dark [style*="color:#555" i],     body.theme-dark [style*="color: #555" i],
body.theme-dark [style*="color:#444" i],     body.theme-dark [style*="color: #444" i],
body.theme-dark [style*="color:#4a4a4a" i],  body.theme-dark [style*="color: #4a4a4a" i],
body.theme-dark [style*="color:#393a4f" i],  body.theme-dark [style*="color: #393a4f" i],
body.theme-dark [style*="color:#363636" i],  body.theme-dark [style*="color: #363636" i],
body.theme-dark [style*="color:#222" i],     body.theme-dark [style*="color: #222" i],
body.theme-dark [style*="color:#111" i],     body.theme-dark [style*="color: #111" i],
body.theme-dark [style*="color:#050505" i],  body.theme-dark [style*="color: #050505" i],
body.theme-dark [style*="color:#0c0c0c" i],  body.theme-dark [style*="color: #0c0c0c" i],
body.theme-dark [style*="color:#1c1e21" i],  body.theme-dark [style*="color: #1c1e21" i],
body.theme-dark [style*="color:black" i],    body.theme-dark [style*="color: black" i] {
    color: var(--sb-text-soft) !important;
}

/* ── Read-only bar: a suspended account (assets/js/read_only.js) ──────── */
.sb-readonly-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 10060;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(680px, calc(100vw - 32px));
    padding: 12px 14px 12px 16px;
    border-radius: 12px;
    background: #fff4e5;
    border: 1px solid #f5c27a;
    color: #5c3b00;
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    font-size: 14px;
    line-height: 1.4;
}
.sb-readonly-bar span { flex: 1; }
.sb-readonly-bar .sb-readonly-appeal {
    flex-shrink: 0;
    font-weight: 700;
    color: #8a4b00 !important;
    text-decoration: underline;
}
.sb-readonly-bar .sb-readonly-close {
    flex-shrink: 0;
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}
body.theme-dark .sb-readonly-bar {
    background: #3a2a12;
    border-color: #6b4a1a;
    color: #ffe2b3;
}
body.theme-dark .sb-readonly-bar span { color: #ffe2b3 !important; }
body.theme-dark .sb-readonly-bar .sb-readonly-appeal { color: #ffc46b !important; }

/* ── Text-only post frame (feed/real_post.php, library/TextFrame.php) ────
 * A short text-only post on its random colour (--frame, set on each post),
 * text centred vertically and horizontally — the original look, moved here
 * from the page-wide <style> real_post.php printed for every framed post. */
.post.post_with_frame {
    --frame: #695abd;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* vertically */
    align-items: center;       /* horizontally */
    text-align: center;
    color: #ffffff !important;
    font-size: x-large !important;
    font-weight: 700 !important;
    background: var(--frame);
    padding: 50px;
    min-height: 400px;
}
.post_with_frame .hashtags,
.post_with_frame .mentions {
    background: none !important;
    color: #fff !important;
}

/* ---- Typeface: Plus Jakarta Sans, as in the app ------------------------
   Loaded from Google Fonts in includes/head.php, auth/partials/head.php and
   includes/legal/legal_head.php. Older stylesheets set Ruda, Open Sans,
   Source Sans Pro, Montserrat or Segoe UI in many places (some inline), so
   this wins with !important — except on icon fonts, code and the inline
   Agency FB logo letter. */
:root {
    --sb-font: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
html body,
body *:not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not(.glyphicon):not(.ion):not(.ionicons):not([class^="ion-"]):not([class*=" ion-"]):not([class^="feather"]):not([class*=" feather"]):not([class^="li_"]):not([class*=" li_"]):not(code):not(pre):not(kbd):not(samp):not([style*="Agency"]) {
    font-family: var(--sb-font) !important;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The verified badge (library/Verified.php): a check mark after a name. */
.sb-verified { display: inline-flex; vertical-align: -0.12em; margin-left: 4px; color: #1d9bf0; font-size: 0.95em; line-height: 1; }
.sb-verified svg { display: block; }
body.theme-dark .sb-verified { color: #4cb3ff; }

/* Tab bar of a group's and a member's page (groups/partials/group_banner.php,
   profile/partials/banner.php): icon + label pills, the open one tinted,
   an optional count. */
.gnav-tabs { display:flex; flex-wrap:wrap; gap:4px; border-top:1px solid var(--sb-border,#e6e6e6); padding-top:10px; margin-top:8px; margin-right:35px; }
.gnav-tab { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:8px; color:var(--sb-text-muted,#888a99); font-weight:600; font-size:.88rem; text-decoration:none; transition: background-color .15s, color .15s; cursor:pointer; white-space:nowrap; }
.gnav-tab:hover, .gnav-tab:focus { color: var(--sb-text,#393a4f); background: rgba(0,0,0,.04); text-decoration:none; }
body.theme-dark .gnav-tab:hover, body.theme-dark .gnav-tab:focus { background: rgba(255,255,255,.06); color:#fff; }
.gnav-tab.is-active { color:#5596e6; background: rgba(85,150,230,.1); }
.gnav-tab .gnav-count { background: rgba(0,0,0,.06); border-radius: 10px; padding: 1px 8px; font-size: .75rem; font-weight: 700; margin-left:2px; }
body.theme-dark .gnav-tab .gnav-count { background: rgba(255,255,255,.1); }
.gnav-spacer { flex: 1; }
.gnav-more { position:relative; }
.gnav-more .dropdown-menu { left:auto; right:0; min-width:200px; }
@media (max-width: 480px) { .gnav-tab { padding: 8px 10px; font-size: .82rem; } }

/* The profile's: one line (scrolls sideways on a phone), clear of the
   profile picture that sits over its right end. */
.gnav-tabs.pnav-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 150px 0 0; padding:10px 0 10px 12px; }
.gnav-tabs.pnav-tabs::-webkit-scrollbar { display:none; }
@media (max-width: 767px) { .gnav-tabs.pnav-tabs { padding-left: 8px; gap: 2px; } }

/* ---- Public (signed-out) Page / group / profile view --------------------
   library/PublicView.php. Tokens only, so it follows light and dark. */
html:has(body.sb-public), body.sb-public { background: var(--sb-bg); }
body.sb-public { color: var(--sb-text); margin: 0; min-height: 100vh; }
.sb-pub-bar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; background: var(--sb-surface); border-bottom: 1px solid var(--sb-border);
}
.sb-pub-brand { display: flex; align-items: center; gap: 8px; color: var(--sb-text); font-weight: 800; font-size: 1.15rem; text-decoration: none; }
.sb-pub-actions { display: flex; gap: 8px; }
.sb-pub-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 0 18px; border-radius: 999px; background: var(--sb-accent); color: #fff;
    font-weight: 700; text-decoration: none; border: 1px solid transparent;
}
.sb-pub-btn:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
.sb-pub-btn--ghost { background: transparent; color: var(--sb-link); border-color: var(--sb-border-strong); }
.sb-pub-btn--ghost:hover { background: var(--sb-hover); color: var(--sb-link); }
.sb-pub-btn--wide { display: flex; margin: 16px 16px 4px; }
.sb-pub-main { max-width: 680px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
.sb-pub-hero { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 14px; overflow: hidden; box-shadow: var(--sb-shadow); padding-bottom: 12px; }
.sb-pub-cover { height: 180px; background: linear-gradient(135deg, var(--sb-accent), #00477a) center / cover no-repeat; }
.sb-pub-id { display: flex; align-items: flex-end; gap: 14px; padding: 0 16px; margin-top: -48px; }
.sb-pub-avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 4px solid var(--sb-surface); background: var(--sb-surface-2); flex: none; }
.sb-pub-id > div { padding-top: 52px; min-width: 0; }
.sb-pub-id h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.sb-pub-kind { margin: 0 0 2px; color: var(--sb-text-muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sb-pub-stats { margin: 4px 0 0; color: var(--sb-text-soft); }
.sb-pub-about { margin: 14px 16px 0; color: var(--sb-text-soft); line-height: 1.55; overflow-wrap: anywhere; }
.sb-pub-posts { display: grid; gap: 12px; margin-top: 16px; }
.sb-pub-post { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sb-shadow); }
.sb-pub-post header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sb-pub-post time { color: var(--sb-text-muted); font-size: .85rem; white-space: nowrap; }
.sb-pub-post p { margin: 0 0 10px; line-height: 1.55; overflow-wrap: anywhere; }
.sb-pub-post img { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: 10px; background: var(--sb-inset); }
.sb-pub-video { position: relative; display: block; }
.sb-pub-video span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.sb-pub-more { display: inline-block; margin-top: 10px; color: var(--sb-link); font-weight: 600; min-height: 44px; line-height: 44px; }
.sb-pub-empty { text-align: center; color: var(--sb-text-muted); padding: 24px; }
.sb-pub-foot { text-align: center; padding: 24px 16px 40px; color: var(--sb-text-muted); }
.sb-pub-foot a { color: var(--sb-link); }
.sb-public a:focus-visible, .sb-public button:focus-visible { outline: 3px solid var(--sb-link); outline-offset: 2px; }
@media (max-width: 480px) {
    .sb-pub-actions .sb-pub-btn--ghost { display: none; }
    .sb-pub-cover { height: 130px; }
    .sb-pub-avatar { width: 88px; height: 88px; }
    .sb-pub-id { margin-top: -40px; }
    .sb-pub-id > div { padding-top: 44px; }
}

/* ---- Accessibility + responsive layer (audit B6) ------------------------
   Last in the cascade on purpose: it restores what older stylesheets took
   away (131 `outline: none` rules) without changing how anything looks for
   mouse and touch users. */

/* A visible focus ring for keyboard users only (:focus-visible), on every
   interactive element, whatever earlier rules said. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
[role="button"]:focus-visible, [role="link"]:focus-visible, [contenteditable]:focus-visible {
    outline: 3px solid var(--sb-link) !important;
    outline-offset: 2px !important;
    box-shadow: none;
}

/* People who ask their system for less motion get none of the slides,
   spins, fades and ripples. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Side columns: hidden on small screens by CSS (assets/js/resize_screenWidth.js
   used to delete their contents, so widening the window left them empty). */
@media (max-width: 768px) {
    .first_three, .second_three { display: none !important; }
}
@media (max-width: 767px) {
    ul.dropdown-menu.extended.at_767 { display: none !important; }
}

/* Touch targets: the header's icon buttons at least 44 × 44 on phones. */
@media (pointer: coarse) {
    .minified_tnav_icon > a, .minified_tnav_icon > a .btn { min-width: 44px; min-height: 44px; }
}

/* Wide tables scroll inside their box instead of pushing the page sideways. */
.table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 480px) {
    #top_menu.notify-row { max-width: 100%; }
}

/* The "Create Ad / Manage" tiles (adverts.php, groups/ and pages/ index) are a
   flex row that never wraps: stack them on phones instead of cutting the
   second one off. */
@media (max-width: 600px) {
    .categories-tile-grid, .categories-tile-grid .tile { display: block !important; width: 100% !important; }
    .categories-tile-grid .tile.is-parent { padding: 6px 0 !important; }
}