/* Backend typography + page background, as on qmelocal: Manrope everywhere text is set,
   icon fonts untouched; light grey page so white cards stand out. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Page background: the same very light grey as qmelocal backend-chrome.css (owner choice). A neutral,
   kept in one token so every backend page uses it. */
:root { --bu-page-bg: #f1f3f6; }
body, body .page-wrapper { background: var(--bu-page-bg) !important; }
/* Breadcrumbs sit on the grey page: no white box behind them, on every backend page. */
.page-breadcrumb, .page-breadcrumb .breadcrumb, nav[aria-label="breadcrumb"], nav[aria-label="breadcrumb"] .breadcrumb, .breadcrumb { background: transparent !important; box-shadow: none !important; }
body, body h1, body h2, body h3, body h4, body h5, body h6, body p, body a, body li, body label, body td, body th,
body input, body select, body textarea, body button, body .btn, body .nav-link, body .dropdown-item, body .form-control,
body .card, body .card-title, body .badge, body .table { font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important; }
/* ==========================================================================
   Backend UI kit: one stylesheet for every backend (dashboard / admin) list,
   table and filter screen. The look is the Workflow "Clients" screen
   (workflow_admin/workflow_instances); its wfi-* class names are kept as
   aliases of the bu-* names below so that screen renders from here too.
   Loaded once from application/views/enduser/layouts/partials/header.php
   and application/views/admin/layouts/partials/header.php (guarded by
   BACKEND_UI_ASSETS). Behaviour (mobile filters, option find, loading
   state) lives in themes/shared/js/backend-ui.js.
   Theme colours only via var(--site_color_g) / var(--site_font_color_g);
   minimum font size 14px.

   Classes
   - Page:      .bu-page  .bu-head  .bu-head__actions  .bu-head__row
                .bu-title  .bu-sub  .bu-pill
   - Buttons:   .bu-btn  .bu-btn--primary  .bu-btn--block  .bu-link
                .bu-icon-btn  .bu-count-badge
   - Tabs:      .bu-tabs  .bu-tab (.is-active)  .bu-tab__count
   - Surfaces:  .bu-box  .bu-toolbar  .bu-search  .bu-count  .bu-bulkbar
                .bu-toggle
   - Filters:   .bu-layout  .bu-filters  .bu-filters__head  .bu-filters__title
                .bu-filters__close  .bu-filters-toggle  .bu-backdrop
                .bu-filter-label  .bu-navlist  .bu-acc  .bu-acc__body
                .bu-acc__find  .bu-opts  .bu-opt__name  .bu-opt__count
                .bu-chips  .bu-chip
   - Cards:     .bu-grid  .bu-card (.is-selected)  .bu-card__head  .bu-check
                .bu-avatar  .bu-avatar__img  .bu-name  .bu-meta-text
                .bu-label  .bu-info  .bu-tags  .bu-tag  .bu-tag--accent
                .bu-card__actions
   - List rows: .bu-rows  .bu-row  .bu-row__body  .bu-row__actions
   - Tables:    .bu-table (also .adm-mod .table)
   - Status:    .bu-badge (--success --warning --danger --muted --accent)
                .bu-status (--in --out)
   - States:    .bu-empty  .bu-spinner  [data-bu-loading].is-loading
   - Paging:    .bu-pager (CI / Bootstrap .pagination markup)
   - Row menu:  .bu-menu  .bu-menu__btn  .bu-menu__list  .bu-menu__danger (Bootstrap dropdown)
   ========================================================================== */

.bu-page { font-size: 15px; color: var(--site_font_color_g); min-width: 0; max-width: 100%; }
.bu-page *, .bu-page *::before, .bu-page *::after { box-sizing: border-box; }
.bu-page .sr-only, .bu-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Page header: title left, actions right (stacks on narrow screens) ---- */
.bu-head, .wfi-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; gap: 16px 24px; }
.bu-head { margin-bottom: 20px; }
.bu-head__actions, .wfi-head__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bu-head__row, .wfi-head__row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 991px) {
  .bu-head, .wfi-head { grid-template-columns: 1fr; }
  .bu-head__actions, .wfi-head__actions { align-items: flex-start; justify-content: flex-start; }
  .bu-head__row, .wfi-head__row { justify-content: flex-start; }
}
.bu-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 4px; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--site_font_color_g); overflow-wrap: anywhere; }
.bu-sub { margin: 0; font-size: 15px; line-height: 1.5; color: #64748b; }
.bu-pill, .wfi-reg-pill, .badge.wfi-reg-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.3; padding: 6px 14px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--site_color_g), color-mix(in srgb, var(--site_color_g) 65%, #000)); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .15); text-transform: none; white-space: nowrap; }
.bu-pill svg { width: 16px; height: 16px; }

/* ---- Buttons ---- */
.bu-btn, .wfi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: border-color .15s, box-shadow .15s; }
.bu-btn i, .wfi-btn i { font-size: 16px; }
.bu-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.bu-btn:hover, .wfi-btn:hover { border-color: var(--site_color_g); color: #0f172a; text-decoration: none; box-shadow: 0 4px 12px rgba(15, 23, 42, .08); }
.bu-btn--primary, .wfi-btn--primary { color: #fff; background: var(--site_color_g); border-color: var(--site_color_g); }
.bu-btn--primary:hover, .wfi-btn--primary:hover { color: #fff; filter: brightness(.95); }
/* Filled theme-colour buttons keep white text in every state and every context (tables, empty
   states, links): page rules like a:hover { color: accent } made the label vanish on the accent fill. */
body .bu-btn--primary, body .wfi-btn--primary, body .btn-primary,
body .bu-btn--primary:hover, body .wfi-btn--primary:hover, body .btn-primary:hover,
body .bu-btn--primary:focus, body .wfi-btn--primary:focus, body .btn-primary:focus,
body .bu-btn--primary:active, body .wfi-btn--primary:active, body .btn-primary:active,
body .bu-btn--primary *, body .wfi-btn--primary *, body .btn-primary * { color: #fff !important; }
body .bu-btn--primary:hover, body .wfi-btn--primary:hover, body .btn-primary:hover { text-decoration: none !important; }
body .bu-btn--primary .bu-count-badge, body .btn-primary .bu-count-badge, body .btn-primary .badge-light, body .btn-primary .bg-white { color: var(--site_font_color_g) !important; }
/* Disabled primary buttons: a faded theme fill with white text, so the label stays readable
   (the grey disabled box above made white text vanish). */
body .bu-btn--primary[disabled], body .bu-btn--primary.disabled, body .wfi-btn--primary[disabled], body .btn-primary[disabled], body .btn-primary.disabled,
body .bu-btn--primary[disabled]:hover, body .btn-primary[disabled]:hover { background: var(--site_color_g) !important; border-color: var(--site_color_g) !important; color: #fff !important; opacity: .55; filter: none !important; box-shadow: none !important; cursor: not-allowed; }
body .bu-btn--primary[disabled] .bu-count-badge, body .btn-primary[disabled] .bu-count-badge { color: var(--site_font_color_g) !important; background: #fff !important; }
.bu-btn[disabled], .bu-btn[disabled]:hover { color: #64748b; background: #eef0f4; border-color: #e2e8f0; box-shadow: none; filter: none; cursor: not-allowed; }
.bu-btn--block { width: 100%; }
.bu-btn[hidden] { display: none; }
.bu-link { padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--site_color_g); text-decoration: none; cursor: pointer; }
.bu-link:hover { color: var(--site_color_g); text-decoration: underline; }
.bu-icon-btn, .wfi-profile-icon { margin-left: auto; flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; text-decoration: none; }
.bu-icon-btn:hover, .wfi-profile-icon:hover { border-color: var(--site_color_g); color: #0f172a; }
.bu-icon-btn svg { width: 16px; height: 16px; }
.bu-count-badge, .wfi-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: var(--site_color_g); }
.bu-btn--primary .bu-count-badge { color: var(--site_font_color_g); background: #fff; }
.bu-btn[disabled] .bu-count-badge { color: #64748b; background: #fff; }

/* ---- Tabs ---- */
.bu-tabs { display: flex; min-width: 0; max-width: 100%; align-items: stretch; gap: 4px; margin: 0 0 20px; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #e2e8f0; }
.bu-tabs::-webkit-scrollbar { display: none; }
.bu-tab { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 10px 14px 12px; margin-bottom: -1px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #475569; white-space: nowrap; text-decoration: none; border-bottom: 3px solid transparent; }
.bu-tab:hover { color: #0f172a; text-decoration: none; border-bottom-color: #cbd5e1; }
.bu-tab.is-active { color: #0f172a; font-weight: 700; border-bottom-color: var(--site_color_g); }
/* Bootstrap tab markup (ul.nav.nav-tabs > li > a.nav-link) gets the same look
   by adding .bu-tabs to the <ul>; data-toggle="tab" keeps working. */
.bu-tabs.nav { flex-wrap: nowrap; }
.bu-tabs .nav-item { flex: 0 0 auto; margin: 0; }
body .bu-tabs.nav .nav-item .nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 12px; margin: 0 0 -1px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #475569 !important; white-space: nowrap; background: none !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0; box-shadow: none !important; outline-offset: -2px; }
body .bu-tabs.nav .nav-item .nav-link:hover { color: #0f172a !important; border-bottom-color: #cbd5e1 !important; }
body .bu-tabs.nav .nav-item .nav-link.active { color: #0f172a !important; font-weight: 700; border-bottom-color: var(--site_color_g) !important; }
body .bu-tabs.nav .nav-item .nav-link > .d-flex { flex-direction: row !important; align-items: center; gap: 8px; }
body .bu-tabs.nav .nav-item .nav-link i, body .bu-tabs.nav .nav-item .nav-link svg { flex: 0 0 auto; width: 18px; height: 18px; margin: 0 !important; }
body .bu-tabs.nav .nav-item .nav-link.active svg { color: var(--site_color_g); }
body .bu-tabs.nav .nav-item .nav-link:not(.active) { font-weight: 600; }
body .bu-tabs.nav .nav-item .nav-link p { margin: 0; font-size: inherit; }
.bu-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: var(--site_color_g); }

/* ---- Surfaces ---- */
.bu-box { background: #fff; border: 1px solid #e8ebf0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); min-width: 0; }
.bu-toolbar, .wfi-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eef0f4; }
.bu-search, .wfi-search { flex: 1 1 260px; max-width: 420px; position: relative; margin: 0; }
.bu-search i, .wfi-search i, .bu-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 16px; }
.bu-search svg { width: 17px; height: 17px; pointer-events: none; }
.bu-search input, .wfi-search input { width: 100%; height: 42px; padding: 0 12px 0 36px; font-size: 15px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: var(--site_font_color_g); }
.bu-search input:focus, .wfi-search input:focus { outline: none; border-color: var(--site_color_g); }
.bu-count, .wfi-count { font-size: 14px; color: #64748b; }
.bu-bulkbar, .wfi-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; font-size: 14px; background: color-mix(in srgb, var(--site_color_g) 8%, #fff); border-bottom: 1px solid #eef0f4; }
.bu-bulkbar[hidden], .wfi-bulkbar[hidden] { display: none; }
.bu-bulkbar select, .wfi-bulkbar select { display: inline-block !important; width: auto !important; flex: 0 1 320px; max-width: 360px; height: 40px; min-width: 220px; margin: 0 !important; padding: 0 10px; font-size: 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.bu-bulkbar > *, .wfi-bulkbar > * { margin: 0 !important; }
.bu-bulkbar .bu-btn, .wfi-bulkbar .wfi-btn { flex: 0 0 auto; }
.bu-toggle, .wfi-toggle { margin-left: auto; display: inline-flex; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.bu-toggle button, .wfi-toggle button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; font-size: 14px; font-weight: 600; border: 0; background: #fff; color: #475569; cursor: pointer; }
.bu-toggle button + button, .wfi-toggle button + button { border-left: 1px solid #e2e8f0; }
.bu-toggle button.is-on, .wfi-toggle button.is-on { background: var(--site_color_g); color: #fff; }

/* ---- Filter sidebar + results layout ---- */
.bu-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.bu-filters { padding: 16px 18px; }
.bu-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.bu-filters__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: var(--site_font_color_g); }
.bu-filters .bu-filters__close, .bu-filters-toggle { display: none; }
.bu-filter-label { display: block; margin: 14px 0 8px; font-size: 14px; font-weight: 700; color: #475569; }
.bu-navlist { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; }
.bu-navlist a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.35; color: #334155; text-decoration: none; overflow-wrap: anywhere; }
.bu-navlist a:hover { background: #f1f5f9; color: #0f172a; }
.bu-navlist a.is-active, .bu-navlist a.is-active:hover { background: color-mix(in srgb, var(--site_color_g) 12%, #fff); color: #0f172a; font-weight: 700; box-shadow: inset 3px 0 0 var(--site_color_g); }
.bu-acc { border-top: 1px solid #eef0f4; }
.bu-acc:last-of-type { border-bottom: 1px solid #eef0f4; }
.bu-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 2px; font-size: 15px; font-weight: 600; color: #334155; list-style: none; cursor: pointer; user-select: none; }
.bu-acc > summary::-webkit-details-marker { display: none; }
.bu-acc > summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(45deg) translateY(-3px); transition: transform .15s ease; }
.bu-acc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.bu-acc > summary:hover { color: #0f172a; }
.bu-acc > summary .bu-count-badge { margin-left: auto; }
.bu-acc__body { padding: 0 0 12px; }
.bu-acc__find { width: 100%; height: 38px; margin-bottom: 8px; padding: 0 10px; font-size: 14px; border: 1px solid #e2e8f0; border-radius: 8px; outline: 0; }
.bu-acc__find:focus { border-color: var(--site_color_g); }
.bu-opts { max-height: 260px; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.bu-opts a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 14px; line-height: 1.35; color: #334155; text-decoration: none; }
.bu-opts a:hover { background: #f1f5f9; color: #0f172a; }
.bu-opts a.is-active { color: #0f172a; font-weight: 700; background: color-mix(in srgb, var(--site_color_g) 10%, #fff); }
.bu-opts a.is-active .bu-opt__name::before { content: "\2713\00a0"; color: var(--site_color_g); }
.bu-opt__name { overflow-wrap: anywhere; }
.bu-opt__count { flex: 0 0 auto; min-width: 28px; padding: 0 6px; border-radius: 10px; font-size: 14px; text-align: center; color: #64748b; background: #f1f5f9; }
.bu-opts-empty { margin: 4px 2px 8px; font-size: 14px; color: #94a3b8; }
.bu-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid #eef0f4; }
.bu-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #1f2937; background: color-mix(in srgb, var(--site_color_g) 10%, #fff); text-decoration: none; }
.bu-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.bu-chip svg { flex: 0 0 auto; width: 16px; height: 16px; opacity: .65; }
.bu-chip:hover { color: #0f172a; text-decoration: none; background: color-mix(in srgb, var(--site_color_g) 18%, #fff); }

/* ---- Result cards ---- */
.bu-grid, .wfi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; padding: 18px; }
.bu-grid--wide { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.bu-card, .wfi-card { display: flex; flex-direction: column; gap: 12px; background: color-mix(in srgb, var(--site_color_g) 3%, #fbfcfe); border: 1px solid #e6e8ee; border-radius: 14px; padding: 16px; min-width: 0; transition: box-shadow .2s, border-color .2s; }
.bu-card:hover, .wfi-card:hover { border-color: color-mix(in srgb, var(--site_color_g) 45%, #e6e8ee); box-shadow: 0 8px 22px rgba(15, 23, 42, .07); }
.bu-card.is-selected, .wfi-card.is-selected { border-color: var(--site_color_g); box-shadow: inset 0 0 0 1px var(--site_color_g); }
.bu-card__head, .wfi-card__head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; margin: 0; font-weight: 400; }
label.bu-card__head { cursor: pointer; }
.bu-check, .wfi-select, .wfi-select-all { width: 18px; height: 18px; margin: 0; cursor: pointer; flex-shrink: 0; accent-color: var(--site_color_g); }
.bu-card__head .bu-check, .wfi-card__head .wfi-select { margin-top: 4px; }
.bu-avatar, .wfi-avatar { position: relative; flex: 0 0 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--site_color_g); background: color-mix(in srgb, var(--site_color_g) 12%, #fff); }
.bu-card .bu-avatar, .wfi-card .wfi-avatar { flex: 0 0 72px; height: 72px; font-size: 22px; }
.bu-avatar__img, .wfi-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.bu-name, .wfi-name { font-size: 16px; font-weight: 700; color: #0f172a; line-height: 1.3; overflow-wrap: anywhere; }
.bu-meta-text, .wfi-email { font-size: 14px; color: #64748b; line-height: 1.35; overflow-wrap: anywhere; }
.bu-label, .wfi-label { font-size: 14px; color: #64748b; margin-bottom: 4px; }
.bu-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bu-info__row { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; color: #334155; line-height: 1.4; }
.bu-info__row svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--site_color_g); }
.bu-tags, .wfi-group__list { display: flex; flex-wrap: wrap; gap: 6px; }
.wfi-group { display: flex; flex-direction: column; gap: 4px; }
.bu-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.35; color: #334155; background: #fff; border: 1px solid #e2e8f0; }
.wfi-team { align-self: flex-start; }
.bu-tag--accent, .wfi-team { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--site_color_g) 10%, #fff); color: #1f2937; border-color: transparent; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.bu-tag--accent i, .wfi-team i { color: var(--site_color_g); }
.bu-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
/* Full-width secondary actions inside a card wrap instead of widening it. */
.wfi-card > .wfi-btn, .bu-card > .bu-btn { width: 100%; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; white-space: normal; text-align: center; }
.bu-card__actions .bu-btn { flex: 1 1 130px; }
/* Member search card (/dashboard/usergroup, grid modifier .wfi-grid--stacked; markup in
   application/views/enduser/user_group/user_list.php). 3 per row on desktop, so the photo sits
   ABOVE the name and the text gets the full card width. Under the name: the community as an
   accent pill, then .wfi-detail rows (fixed 18px icon column, icon on the first text line,
   muted icon, darker value). Location is one quiet line; topics are .wfi-chips (max 2 rows,
   the view adds a "+N" chip). Long values wrap between words; email and location keep one
   line with an ellipsis (full text in the title attribute). /client-hub: no modifier, unchanged. */
.wfi-grid--stacked .wfi-card { position: relative; }
/* Photo + (name, community) side by side; checkbox and profile icon sit in the top-right corner. */
.wfi-grid--stacked .wfi-card__head { display: grid; grid-template-columns: auto 56px minmax(0, 1fr); gap: 12px; align-items: center; padding-right: 44px; }
.wfi-grid--stacked .wfi-card__head > .wfi-select { grid-row: 1; grid-column: 1; align-self: start; margin-top: 4px; }
.wfi-grid--stacked .wfi-card__head > .wfi-avatar { grid-row: 1; grid-column: 2; justify-self: start; width: 56px; flex-basis: 56px; height: 56px; border-radius: 12px; font-size: 18px; }
.wfi-grid--stacked .wfi-avatar .wfi-avatar__img { border-radius: 12px; }
.wfi-grid--stacked .wfi-card__head > .wfi-profile-icon { position: absolute; top: 10px; right: 12px; margin-left: 0; }
.wfi-grid--stacked .wfi-card__text { grid-row: 1; grid-column: 3; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wfi-grid--stacked .wfi-name { font-size: 16px; line-height: 1.3; }
.wfi-grid--stacked .wfi-role { font-size: 14px; line-height: 1.35; color: #64748b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wfi-grid--stacked .wfi-card > .wfi-community, .wfi-grid--stacked .wfi-card .wfi-community:first-child { margin-top: 2px; }
.wfi-grid--stacked .wfi-community { padding: 1px 9px; border-radius: 6px; font-weight: 500; line-height: 1.45; border-color: transparent; color: color-mix(in srgb, var(--site_color_g) 60%, #0f172a); }
/* Secondary card action: one line, same height as the primary button. */
.wfi-card .wfi-btn--outline { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--site_color_g); background: #fff; border: 1px solid color-mix(in srgb, var(--site_color_g) 45%, #e2e8f0); text-decoration: none; }
.wfi-card .wfi-btn--outline:hover { background: color-mix(in srgb, var(--site_color_g) 8%, #fff); color: var(--site_color_g); }
.wfi-grid--stacked .wfi-card__text > * { max-width: 100%; }
.wfi-grid--stacked .wfi-name { overflow-wrap: break-word; }
.wfi-community { display: inline-block; max-width: 100%; padding: 3px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #1f2937; background: color-mix(in srgb, var(--site_color_g) 12%, #fff); border: 1px solid color-mix(in srgb, var(--site_color_g) 25%, #fff); overflow-wrap: break-word; }
.wfi-details { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.wfi-detail { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; align-items: start; width: 100%; font-size: 14px; line-height: 20px; color: #334155; }
.wfi-detail > i { width: 18px; font-size: 16px; line-height: 20px; text-align: center; color: #94a3b8; }
.wfi-detail > span { min-width: 0; overflow-wrap: break-word; }
.wfi-detail a { color: inherit; text-decoration: none; }
.wfi-detail a:hover { color: var(--site_color_g); text-decoration: underline; }
.wfi-detail .wfi-email { display: block; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.wfi-card > .wfi-detail { color: #64748b; }
.wfi-card > .wfi-detail > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfi-chipset { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wfi-kicker { font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; }
.wfi-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 66px; overflow: hidden; }
.wfi-chip { display: inline-block; max-width: 100%; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 28px; color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfi-chip i { margin-right: 6px; color: var(--site_color_g); }
.wfi-chip--more { font-weight: 700; color: var(--site_color_g); background: #fff; border-color: color-mix(in srgb, var(--site_color_g) 35%, #e2e8f0); cursor: help; }

/* ---- List rows ---- */
.bu-rows { display: flex; flex-direction: column; }
.bu-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #eef0f4; }
.bu-row:last-child { border-bottom: 0; }
.bu-row:hover { background: #fafbfc; }
.bu-row__body { flex: 1 1 auto; min-width: 0; }
.bu-row__actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
@media (max-width: 575px) { .bu-row { flex-wrap: wrap; } .bu-row__actions { width: 100%; } }

/* ---- Tables ---- */
.bu-table-wrap { overflow-x: auto; }
.bu-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; }
.bu-table thead th { background: #f8fafc; color: #475569; font-weight: 600; font-size: 14px; border-bottom: 1px solid #e5e7eb; border-top: 0; padding: 12px 14px; text-align: left; white-space: nowrap; }
.bu-table td { padding: 14px; border-top: 1px solid #f1f5f9; vertical-align: middle; overflow-wrap: anywhere; }
.bu-table tbody tr:hover { background: #fafbfc; }
.bu-table td a { color: #0f172a; }
.bu-table td a:hover { color: var(--site_color_g); }
.bu-table .bu-actions-cell { white-space: nowrap; width: 1%; text-align: right; }

/* ---- Badges & status chips ---- */
.bu-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap; color: #334155; background: #f1f5f9; }
.bu-badge--accent { color: #fff; background: var(--site_color_g); }
.bu-badge--success { color: #15803d; background: #f0fdf4; }
.bu-badge--warning { color: #b45309; background: #fffbeb; }
.bu-badge--danger { color: #b91c1c; background: #fef2f2; }
.bu-badge--muted { color: #64748b; background: #f1f5f9; }
.bu-status, .wfi-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.bu-status::before, .wfi-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bu-status--in, .wfi-pill--in { background: #f0fdf4; color: #15803d; }
.bu-status--out, .wfi-pill--out { background: #fffbeb; color: #b45309; }

/* ---- Empty & loading ---- */
.bu-empty, .wfi-empty { text-align: center; padding: 48px 16px; color: #94a3b8; font-size: 15px; }
.bu-empty svg { display: block; width: 40px; height: 40px; margin: 0 auto 10px; opacity: .6; }
.bu-empty .bu-btn { margin-top: 14px; }
[data-bu-loading] { position: relative; }
.bu-spinner { display: none; position: absolute; left: 50%; top: 120px; z-index: 5; width: 40px; height: 40px; margin-left: -20px; border: 4px solid #e2e8f0; border-top-color: var(--site_color_g); border-radius: 50%; animation: bu-spin .8s linear infinite; }
[data-bu-loading].is-loading .bu-spinner { display: block; }
[data-bu-loading].is-loading .bu-grid,
[data-bu-loading].is-loading .bu-rows,
[data-bu-loading].is-loading .bu-table-wrap,
[data-bu-loading].is-loading .bu-pager { opacity: .35; pointer-events: none; transition: opacity .15s ease; }
@keyframes bu-spin { to { transform: rotate(360deg); } }

/* ---- Pagination (CI pagination / Bootstrap .pagination markup) ---- */
/* Busy action button (window.buBusy): spinner before the label, no clicks. */
button.is-busy, .btn.is-busy, a.is-busy { position: relative; pointer-events: none; opacity: .75; }
button.is-busy::before, .btn.is-busy::before, a.is-busy::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bu-spin .7s linear infinite; }
.bu-pager { padding: 0 18px 18px; }
.bu-pager .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* The next/prev arrows are feather SVGs that another sheet hides; show them at text size. */
.bu-pager .pagination .page-item a svg { display: inline-block !important; width: 16px; height: 16px; stroke: currentColor; visibility: visible !important; opacity: 1 !important; }
.bu-pager .pagination .page-item a, .bu-pager .pagination .page-item span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff !important; color: #334155 !important; font-size: 14px; font-weight: 600; text-decoration: none; }
.bu-pager .page-item a:hover { border-color: var(--site_color_g); color: #0f172a; }
.bu-pager .pagination .page-item.active a, .bu-pager .pagination .page-item.active span { background: var(--site_color_g) !important; border-color: var(--site_color_g) !important; color: #fff !important; }
.bu-pager .page-item svg { width: 18px; height: 18px; }

/* ---- Tablet / mobile: filters collapse into an off-canvas panel ---- */
.bu-backdrop { display: none; }
@media (max-width: 991.98px) {
  .bu-layout { grid-template-columns: minmax(0, 1fr); }
  .bu-filters-toggle { display: inline-flex; }
  .bu-filters { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100001; width: min(340px, 88vw); border-radius: 0; overflow-y: auto; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 30px rgba(0, 0, 0, .2); }
  .bu-filters .bu-filters__close { display: inline-flex; width: 40px; padding: 0; }
  .filters-open .bu-filters { transform: none; }
  .filters-open .bu-backdrop { display: block; position: fixed; inset: 0; z-index: 100000; background: rgba(15, 23, 42, .45); }
}
@media (max-width: 575.98px) {
  .bu-grid, .wfi-grid { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .bu-toolbar, .bu-bulkbar, .bu-chips { padding-left: 14px; padding-right: 14px; }
  .bu-title { font-size: 20px; }
  .bu-chip span { max-width: 240px; }
}

/* ---- Workflow clients screen (/client-hub, workflow_admin/workflow_instances)
   and the shared client card (application/views/enduser/inc/client_card.php):
   login details, support teams, progress, list table, photo zoom. Formerly the
   first <style> block of application/views/enduser/project_hub/workflow_instances.php. ---- */
/* One screen, two layouts of the SAME rows: Grid (cards, default) and List (table). */
/* Header: title on the left, actions on the right (stacks on narrow screens). */
.wfi-switch { position: relative; display: inline-flex; align-items: center; margin: 0; }
.wfi-switch i { position: absolute; left: 12px; color: var(--site_color_g, #4f46e5); font-size: 16px; pointer-events: none; }
.wfi-switch select { height: 40px; min-width: 240px; max-width: 360px; padding: 0 34px 0 36px; font-size: 14px; font-weight: 600; color: #0f172a; background-color: #fff; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; text-overflow: ellipsis; }
.wfi-switch select:focus { outline: none; border-color: var(--site_color_g, #4f46e5); }
.wfi-wfname, .wfi-portal { font-size: 14px; color: #475569; }
.wfi-wfname i, .wfi-portal i { color: var(--site_color_g, #4f46e5); }
.wfi-welcome { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 32px; padding: 0 10px; font-size: 14px; font-weight: 600; color: #7a5b00; background: #fff8e1; border: 1px solid #fde68a; border-radius: 8px; text-decoration: none; }
.wfi-welcome:hover { color: #5c4400; text-decoration: none; }
#wfInstancesTable .wfi-wfname, #wfInstancesTable .wfi-portal, #wfInstancesTable .wfi-welcome { margin-top: 6px; }
/* Keep the progress column narrow: long workflow names wrap instead of widening it. */
#wfInstancesTable td.col-progress { width: 250px; min-width: 250px; max-width: 260px; white-space: normal; }
#wfInstancesTable .wfi-wfname, #wfInstancesTable .wfi-portal { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.wfi-team-edit { margin-left: 6px; font-size: 14px; font-weight: 600; color: var(--site_color_g, #4f46e5); text-decoration: none; }
.wfi-tm-note { font-size: 15px; color: #475569; margin: 0 0 14px; }
.wfi-tm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 575px) { .wfi-tm-grid { grid-template-columns: 1fr; } }
.wfi-tm-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; color: #334155; }
.wfi-tm-field select, .wfi-tm-field input { height: 42px; padding: 0 12px; font-size: 15px; font-weight: 500; border: 1px solid #e2e8f0; border-radius: 10px; width: 100%; }
.wfi-tm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 15px; }
.wfi-tm-list { max-height: 340px; overflow-y: auto; border: 1px solid #eef0f4; border-radius: 12px; }
.wfi-tm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
.wfi-tm-row:last-child { border-bottom: 0; }
.wfi-tm-row.is-on { background: color-mix(in srgb, var(--site_color_g, #4f46e5) 6%, #fff); }
.wfi-tm-check { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; min-width: 0; }
.wfi-tm-check input { width: 18px; height: 18px; accent-color: var(--site_color_g, #4f46e5); flex-shrink: 0; }
.wfi-tm-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.wfi-tm-who strong { font-size: 15px; color: #0f172a; }
.wfi-tm-who small { font-size: 14px; color: #64748b; overflow-wrap: anywhere; }
.wfi-tm-lead { flex-shrink: 0; height: 32px; padding: 0 10px; font-size: 14px; font-weight: 600; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.wfi-tm-lead.is-lead { color: #7a5b00; background: #fff8e1; border-color: #fde68a; }
.wfi-tm-lead:disabled { opacity: .4; }
.wfi-tm-global { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 15px; cursor: pointer; }
.wfi-tm-global input { width: 18px; height: 18px; accent-color: var(--site_color_g, #4f46e5); }

#wfInstancesTable .wfi-avatar { flex: 0 0 52px; height: 52px; font-size: 17px; }
.wfi-zoom { display: none; position: fixed; z-index: 1080; width: 280px; height: 280px; border-radius: 14px; overflow: hidden; background: #fff; border: 3px solid #fff; box-shadow: 0 14px 34px rgba(15, 23, 42, .25); pointer-events: none; }
.wfi-zoom img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; border-radius: 0 !important; }
.wfi-avatar.has-photo { cursor: zoom-in; }
.wfi-zoom.is-open { display: block; }
.wfi-phone { font-size: 14px; color: #64748b; margin-top: 2px; overflow-wrap: anywhere; }
.wfi-phone a { color: inherit; text-decoration: none; }
.wfi-phone a:hover { text-decoration: underline; }
.wfi-profile { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; font-size: 14px; font-weight: 600; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.wfi-profile:hover { border-color: var(--site_color_g, #4f46e5); color: #0f172a; }
.wfi-client-cell { display: flex; align-items: flex-start; gap: 10px; }
.wfi-creds { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef0f4; font-size: 14px; min-width: 0; }
.wfi-creds code { font-size: 14px; white-space: normal; word-break: break-all; }
.wfi-creds[hidden], .wfi-teams-box[hidden] { display: none; }
.wfi-teams-box { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef0f4; }
.wfi-creds-toggle { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 34px; padding: 0 12px; font-size: 14px; font-weight: 600; color: #334155; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; }
.wfi-creds-toggle:hover { border-color: var(--site_color_g, #4f46e5); }
.wfi-creds-toggle .wfi-chev { transition: transform .2s; }
.wfi-creds-toggle[aria-expanded="true"] .wfi-chev { transform: rotate(180deg); }
.wfi-creds-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wfi-creds-bar .wfi-profile { height: 34px; }
.wfi-creds-block .wfi-creds { margin-top: 8px; }
.wfi-progress { display: flex; align-items: center; gap: 8px; }
.wfi-progress .progress { flex: 1; height: 6px; border-radius: 10px; }
.wfi-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: #64748b; }
.wfi-open, .btn.wfi-open { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; margin-top: auto; font-size: 14px; font-weight: 600; border-radius: 8px; }
.wfi-open .badge, .btn.wfi-open .badge { position: absolute; top: -8px; right: -6px; font-size: 14px; }
.btn-primary.wfi-open { color: #fff; background: var(--site_color_g); border-color: var(--site_color_g); }
.btn-primary.wfi-open:hover { color: #fff; filter: brightness(.95); }
.wfi-teams { display: flex; flex-direction: column; gap: 10px; }
.wfi-teamrow { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wfi-team-label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #334155; }
.wfi-team-label i { color: var(--site_color_g, #4f46e5); }
.wfi-muted-note { font-size: 14px; color: #94a3b8; }
#wfInstancesTable .wfi-group { margin-bottom: 8px; }
.wfi-members { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 2px; }
.wfi-member { position: relative; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #334155; background: #e2e8f0; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0; cursor: default; }
.wfi-member__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* Hover (or keyboard focus) card with a bigger photo and who the person is. */
.wfi-member__card { display: none; position: fixed; z-index: 1080; width: 230px; padding: 14px; background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(15, 23, 42, .22); text-align: center; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.wfi-member__card.is-open { display: flex; }
/* Tooltip text wraps even inside nowrap table cells. */
.wfi-member__card, .wfi-member__card * { white-space: normal !important; overflow-wrap: anywhere; word-break: normal; }
.wfi-member:focus { outline: 2px solid var(--site_color_g, #4f46e5); outline-offset: 2px; }
.wfi-member__photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #e2e8f0; font-size: 28px; font-weight: 700; color: #334155; margin-bottom: 6px; }
.wfi-member__photo img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; border-radius: 50%; }
.wfi-member__name { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.wfi-member__role { font-size: 14px; font-weight: 600; color: var(--site_color_g, #4f46e5); }
.wfi-member__email { font-size: 14px; color: #64748b; overflow-wrap: anywhere; }
.wfi-member.is-lead { box-shadow: 0 0 0 2px var(--site_color_g, #4f46e5); }
.wfi-member--more { background: #f1f5f9; color: #475569; }
.wfi-team--global { background: #f1f5f9; }
.wfi-team--none { background: #fff7ed; color: #9a3412; font-weight: 500; }
.wfi-flow { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid #eef0f4; border-radius: 10px; background: #fff; }
.wfi-flow + .wfi-flow { margin-top: 8px; }
.wfi-flow .wfi-open { margin-top: 4px; }
#wfInstancesTable .wfi-flow { max-width: 320px; }
/* List view: button label stays on one line beside its icon; if the cell is ever narrower it wraps centred instead of overflowing. */
#wfInstancesTable .wfi-open { height: auto; min-height: 36px; padding: 6px 10px; line-height: 1.3; text-align: center; white-space: normal; }
#wfInstancesTable .wfi-open > i { flex-shrink: 0; }
.wfi-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px 18px; font-size: 14px; color: #64748b; }
.wfi-pager button { height: 36px; padding: 0 12px; font-size: 14px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.wfi-pager button:disabled { opacity: .45; }

#wfInstancesTable_wrapper { padding: 0 18px 14px; }
#wfInstancesTable_wrapper .dataTables_length select { border:1px solid #e2e8f0; border-radius:6px; padding:3px 8px; }
#wfInstancesTable_wrapper .dataTables_paginate .paginate_button.current { border-radius:6px; }
#wfInstancesTable { font-size: 14px; }
#wfInstancesTable th.col-client,
#wfInstancesTable td.col-client { min-width: 240px; width: 28%; }
#wfInstancesTable .wfi-team { white-space: normal; }
#wfInstancesTable td.col-team { min-width: 180px; max-width: 260px; }
#wfInstancesTable td.col-client { white-space: normal; word-break: normal; overflow-wrap: anywhere; line-height: 1.45; }
#wfInstancesTable td.col-client .fw-semibold { font-size: 15px; font-weight: 600; line-height: 1.35; color: #0f172a; }
#wfInstancesTable td.col-client .text-muted, #wfInstancesTable .wfi-phone { font-size: 14px; line-height: 1.45; font-weight: 500; }
[data-wfi-view="grid"] .wfi-list-wrap { display: none; }
/* No jump while loading: the rows stay hidden behind a loader until the
   script has picked the layout, paged the cards and built the table. */
.wfi-loader { display: none; align-items: center; justify-content: center; gap: 10px; min-height: 240px; font-size: 15px; color: #64748b; }
.wfi-loader .spinner-border { width: 26px; height: 26px; color: var(--site_color_g, #4f46e5); }
#wfiScreen.is-loading .wfi-loader { display: flex; }
#wfiScreen.is-loading .wfi-grid-wrap, #wfiScreen.is-loading .wfi-list-wrap, #wfiScreen.is-loading .wfi-count { display: none !important; }
[data-wfi-view="list"] .wfi-grid-wrap { display: none; }

/* ---- Small admin modules (Packages, Categories, Help topics, Subscriber
   texts): list + edit screens wrapped in .adm-mod. Formerly
   application/views/admin/inc/module_admin_styles.php. ---- */
body .adm-mod { font-size: 15px; max-width: 1320px; margin: 0 auto; padding: 28px 16px 40px; width: 100%; box-sizing: border-box; }
body .adm-mod .card { border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
body .adm-mod .card-body { padding: 24px; }
body .adm-mod .card-title { font-size: 22px; font-weight: 700; color: var(--site_font_color_g); }
body .adm-mod .table { margin-bottom: 0; }
body .adm-mod .table thead th { background: #f8fafc; color: #475569; font-weight: 600; border-bottom: 1px solid #e5e7eb; border-top: 0; padding: 12px 14px; }
body .adm-mod .table td { padding: 14px; border-top: 1px solid #f1f5f9; }
body .adm-mod .table tbody tr:hover { background: #fafbfc; }
/* Long names/tooltips wrap inside their cell; only the action buttons stay on one line. */
body .adm-mod .table td, body .adm-mod .table th { white-space: normal !important; word-break: normal; overflow-wrap: anywhere; }
body .adm-mod .table td.adm-mod-actions, body .adm-mod .table th.adm-mod-actions { white-space: nowrap !important; width: 1%; }
body .adm-mod .adm-mod-sub { max-width: 640px; line-height: 1.5; }
body .adm-mod .table-responsive { overflow-x: auto; }
body .adm-mod .table-responsive { border: 1px solid #e5e7eb; border-radius: 10px; }
body .adm-mod .btn { border-radius: 8px; }
body .adm-mod .btn-outline-secondary, body .adm-mod .btn-light { border-color: #e2e8f0; }
@media (max-width: 576px) { body .adm-mod { padding: 16px 12px 32px; } body .adm-mod .card-body { padding: 16px; } }
body .adm-mod .adm-mod-lead { font-size: 15px; color: #64748b; margin: 4px 0 0; }
body .adm-mod .table td, body .adm-mod .table th { vertical-align: middle; font-size: 15px; }
body .adm-mod .adm-mod-name { font-weight: 600; }
body .adm-mod .adm-mod-sub { display: block; color: #64748b; font-size: 14px; }
body .adm-mod .adm-mod-actions { white-space: nowrap; }
body .adm-mod .adm-mod-actions form { display: inline-block; margin: 0 2px 0 0; }
body .adm-mod .adm-mod-actions .btn { font-size: 14px; }
body .adm-mod .adm-mod-badge { font-size: 14px; font-weight: 500; }
body .adm-mod label { font-size: 15px; font-weight: 600; }
body .adm-mod .form-control { font-size: 15px; }
body .adm-mod .form-text, body .adm-mod .invalid-feedback { font-size: 14px; }
body .adm-mod .adm-mod-section { font-size: 16px; font-weight: 700; margin: 8px 0 12px; }
body .adm-mod .btn-primary { background: var(--site_color_g); border-color: var(--site_color_g); }

/* ---- Event editor (events_settings/add_edit_events): the sections as a grouped
   sidebar on the left (.ev-rail, from event_section_groups()), the open section's
   form on the right. Markup: admin/site_settings/events_theme/create_event/main.php
   (.tabbable-line.ev-editor). Ported from qmelocal 2026-10-06. ---- */
.page-content2:has(.ev-editor) { flex: 1 1 auto; width: 100%; min-width: 0; }
.custom-tabbox:has(.ev-editor) { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
.ev-editor { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.ev-editor > *:not(.ev-rail):not(.modal) { grid-column: 2; min-width: 0; padding: 24px !important; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(8,15,84,.05), 0 12px 28px -20px rgba(8,15,84,.45); }
.ev-editor > style, .ev-editor > script, .ev-editor > link { display: none !important; }
.ev-editor .ev-rail { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 130px; padding: 14px 10px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(8,15,84,.05), 0 12px 28px -20px rgba(8,15,84,.45); max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin; }
.ev-editor .ev-group { margin: 12px 8px 6px; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--site_font_color_g, #0b1a4a) 55%, #fff); }
.ev-editor .ev-group:first-child { margin-top: 2px; }
.ev-editor .ev-list { margin: 0; padding: 0; list-style: none; }
.ev-editor .ev-list li { margin: 0 0 2px; }
.ev-editor .ev-list a, .ev-editor .ev-list span { display: block; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--site_font_color_g, #0b1a4a); text-decoration: none; background: none; }
.ev-editor .ev-list a:hover, .ev-editor .ev-list a:focus-visible { background: color-mix(in srgb, var(--site_color_g) 6%, #fff); color: var(--site_color_g); }
.ev-editor .ev-list li.active a, .ev-editor .ev-list li.active span { background: var(--site_color_g); color: #fff; box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--site_color_g) 90%, transparent); }
.ev-editor .ev-list span.disabled { color: color-mix(in srgb, var(--site_font_color_g, #0b1a4a) 45%, #fff); cursor: not-allowed; }
.ev-editor .ev-list a, .ev-editor .ev-list span { font-size: 16px; font-weight: 800; } /* section name; its description below */
.ev-editor .ev-list .ev-desc { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; line-height: 1.45; color: color-mix(in srgb, var(--site_font_color_g, #0b1a4a) 62%, #fff); }
.ev-editor .ev-list li.active .ev-desc { color: inherit; opacity: .9; }
.ev-editor .ev-list li.active span.disabled { color: #fff; cursor: default; }
/* the section forms: labels bold in the theme's text colour */
.ev-editor > *:not(.ev-rail) label:not(.form-check-label):not(.custom-control-label):not(.start_meeting_label):not(.error):not(.btn):not([class*="fw-"]):not(.small) { font-weight: 700; color: var(--site_font_color_g, #0b1a4a); }
@media (max-width: 991px) {
  .ev-editor { grid-template-columns: minmax(0, 1fr); }
  .ev-editor > *:not(.ev-rail):not(.modal) { grid-column: 1; }
  .ev-editor .ev-rail { grid-row: auto; position: static; max-height: 300px; }
}
@media (max-width: 767px) { .ev-editor > *:not(.ev-rail):not(.modal) { padding: 16px !important; } }

/* ---- Member / admin top bar on phones and tablets (enduser, admin and superadmin dheader.php) ----
   Below 992px the bar holds the logo row AND the search row (.top-navbar-search-mobile),
   but the vendor CSS pins it (position: fixed, re-applied on the ehp layouts) at a fixed
   74px height (inline rule in enduser/layouts/partials/header.php), so the search row and
   the bar itself covered the page title. Keep the bar in the page flow and let it grow to
   its real height: content then always starts below the whole header, whatever its height. */
@media (max-width: 991.98px) {
  body .horizontal-menu { position: relative; }
  body .horizontal-menu .navbar.top-navbar { height: auto; min-height: 64px; }
  body .horizontal-menu .top-navbar > .container { height: auto; flex-wrap: wrap; align-content: flex-start; }
  body .horizontal-menu .top-navbar .navbar-content { height: 64px; }
  body .horizontal-menu .top-navbar .top-navbar-search-mobile { flex: 0 0 100%; width: 100%; padding: 0 0 12px; }
}
/* ---- Mega menu panel (.submenu.qme-mega): header_menu_items with menu_style = mega_menu,
   rendered by enduser/layouts/partials/dheader.php (the admin header uses .qme-dd, below).
   A compact panel anchored under its own menu item (left edge set by backend-ui.js through
   --qme-mega-left, clamped inside the bar), one tidy column per column_group with a subtle
   divider, headings as quiet uppercase labels, items as plain links with a soft hover pill.
   !important only where older inline header rules use it (full-width submenus, heading colour). ---- */
body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega .submenu-item { max-width: none !important; margin: 0; padding: 0; list-style: none; }
body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega .category-heading { margin: 0 0 6px !important; padding: 0 10px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8 !important; background: none; pointer-events: none; }
body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega .submenu-item .nav-item { margin: 0; padding: 0; }
body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega .submenu-item .nav-item::before,
body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega .submenu-item .nav-link::before { content: none !important; display: none !important; }
body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega .submenu-item .nav-link { display: block; margin: 1px 0; padding: 7px 10px !important; border-radius: 8px; font-size: 15px !important; font-weight: 500; line-height: 1.4; color: #334155 !important; white-space: normal; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega .submenu-item .nav-link:hover,
body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega .submenu-item .nav-link:focus-visible,
body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega .submenu-item .nav-item.active > .nav-link { color: var(--site_color_g) !important; background: color-mix(in srgb, var(--site_color_g) 10%, #fff); }
@media (min-width: 992px) {
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega { left: var(--qme-mega-left, 0px) !important; right: auto !important; width: max-content !important; min-width: 0 !important; max-width: min(880px, calc(100vw - 32px)) !important; padding: 18px 10px !important; background: #fff; border: 1px solid #e6e8ee; border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, .12); }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega > .row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 260px); margin: 0; }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega > .row > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0 12px; border-left: 1px solid #eef0f4; }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega > .row > [class*="col-"]:first-child { border-left: 0; }
}
@media (max-width: 991.98px) {
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega { left: auto !important; right: auto !important; width: auto !important; max-width: none !important; padding: 4px 0 !important; box-shadow: none; border-radius: 0; }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega > .row { display: block; margin: 0; }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega > .row > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 10px 0 6px; border-top: 1px solid #eef0f4; }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu.qme-mega > .row > [class*="col-"]:first-child { border-top: 0; }
}

/* ---- DataTables, on every backend page ----
   One look for every DataTables table in the backend, with no per-page CSS. It
   covers the plain jquery.dataTables build (a.paginate_button) and the
   dt-bootstrap4 build (ul.pagination > li.page-item > a.page-link):
   - "Show [10] entries" and the search box sit on one line; the search box looks
     like .bu-search (icon, rounded). The "Search:" label text is hidden here and
     backend-ui.js turns it into the input's placeholder / accessible name.
   - Headers and cells like .bu-table, a quiet row hover, no zebra stripes.
   - The empty row like .bu-empty, the info line muted, pagination like .bu-pager,
     Buttons-extension buttons (Export, Delete...) like .bu-btn.
   !important only where the DataTables / NobleUI / Bootstrap sheets use it or
   out-rank a plain selector. A page may still add rules for its own columns. ---- */
body .dataTables_wrapper { max-width: 100%; font-size: 15px; color: var(--site_font_color_g); }
body .dataTables_wrapper .dataTables_length,
body .dataTables_wrapper .dataTables_filter { margin: 0 0 14px; padding: 0; }
body .dataTables_wrapper .dataTables_length label { display: inline-flex !important; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: #64748b; white-space: nowrap; }
body .dataTables_wrapper .dataTables_length select { display: inline-block !important; flex: 0 0 auto; width: auto !important; min-width: 76px; height: 38px !important; margin: 0 !important; padding: 0 30px 0 12px !important; font-size: 14px !important; line-height: 36px; color: #334155 !important; background-color: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; box-shadow: none !important; }
body .dataTables_wrapper .dataTables_length select:focus { outline: none; border-color: var(--site_color_g) !important; }
body .dataTables_wrapper .dataTables_filter label { display: inline-flex !important; align-items: center; margin: 0; font-size: 0 !important; line-height: 1; white-space: nowrap; }
body .dataTables_wrapper .dataTables_filter input { display: inline-block !important; width: 280px !important; max-width: 100%; height: 42px !important; margin: 0 !important; padding: 0 12px 0 38px !important; font-size: 15px !important; line-height: 40px; color: var(--site_font_color_g) !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10'/%3E%3C/svg%3E") no-repeat 13px center / 16px 16px !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; box-shadow: none !important; }
body .dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--site_color_g) !important; }
body .dataTables_wrapper .dataTables_filter input::placeholder { color: #94a3b8; opacity: 1; }

/* Table: .bu-table headers and cells. */
body table.dataTable { width: 100%; margin: 0 !important; border-collapse: collapse !important; border-spacing: 0; font-size: 15px; }
body table.dataTable.no-footer, body .dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 1px solid #eef0f4 !important; }
body table.dataTable > thead > tr > th,
body table.dataTable > thead > tr > td { padding: 12px 14px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4; letter-spacing: 0 !important; text-transform: none !important; color: #475569 !important; vertical-align: middle; white-space: nowrap; background: #f8fafc !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 1px solid #e5e7eb !important; }
body table.dataTable > thead > tr > th.sorting,
body table.dataTable > thead > tr > th.sorting_asc,
body table.dataTable > thead > tr > th.sorting_desc { padding-right: 30px !important; cursor: pointer; }
body table.dataTable > thead .sorting::before, body table.dataTable > thead .sorting::after,
body table.dataTable > thead .sorting_asc::before, body table.dataTable > thead .sorting_asc::after,
body table.dataTable > thead .sorting_desc::before, body table.dataTable > thead .sorting_desc::after { opacity: .25 !important; color: #64748b; }
body table.dataTable > thead .sorting_asc::before,
body table.dataTable > thead .sorting_desc::after { opacity: 1 !important; color: var(--site_color_g); }
body table.dataTable > tbody > tr { background: #fff; }
body table.dataTable > tbody > tr > td,
body table.dataTable > tbody > tr > th { padding: 14px !important; vertical-align: middle; border-top: 1px solid #f1f5f9 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; box-shadow: none !important; background-color: transparent; }
body table.dataTable > tbody > tr:first-child > td { border-top: 0 !important; }
body table.dataTable.table-striped > tbody > tr:nth-of-type(odd),
body table.dataTable.stripe > tbody > tr.odd,
body table.dataTable.display > tbody > tr.odd { background: #fff !important; }
body table.dataTable > tbody > tr:hover > td,
body table.dataTable > tbody > tr:hover > th { background-color: #fafbfc !important; }
body table.dataTable > tbody > tr.selected > td,
body table.dataTable > tbody > tr.selected > th { color: inherit !important; background-color: color-mix(in srgb, var(--site_color_g) 8%, #fff) !important; }
body table.dataTable > tbody > tr.selected a { color: inherit; }
body table.dataTable td.dataTables_empty { padding: 48px 16px !important; font-size: 15px; text-align: center; color: #94a3b8; background: #fff !important; }
body table.dataTable td.dataTables_empty > i.bi { display: block; margin-bottom: 8px; font-size: 34px; opacity: .45; }
body table.dataTable td.dataTables_empty .bu-btn { margin-top: 14px; }

/* Info line and pagination (.bu-pager look). */
body .dataTables_wrapper .dataTables_info { padding-top: 16px !important; font-size: 14px; line-height: 1.5; color: #64748b !important; white-space: normal; }
body .dataTables_wrapper .dataTables_paginate { padding-top: 12px !important; text-align: right; }
body .dataTables_wrapper .dataTables_paginate > span { display: inline-flex; flex-wrap: wrap; gap: 6px; }
body .dataTables_wrapper .dataTables_paginate a.paginate_button,
body .dataTables_wrapper .dataTables_paginate .page-item .page-link { display: inline-flex !important; align-items: center; justify-content: center; min-width: 38px; height: 38px; margin: 0 !important; padding: 0 12px !important; font-size: 14px !important; font-weight: 600; line-height: 1; color: #334155 !important; text-decoration: none !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; box-shadow: none !important; cursor: pointer; }
body .dataTables_wrapper .dataTables_paginate a.paginate_button { margin-left: 6px !important; vertical-align: middle; }
body .dataTables_wrapper .dataTables_paginate > span > a.paginate_button:first-child { margin-left: 0 !important; }
body .dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
body .dataTables_wrapper .dataTables_paginate .page-item .page-link:hover { color: #0f172a !important; border-color: var(--site_color_g) !important; background: #fff !important; }
body .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
body .dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover,
body .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { color: #fff !important; background: var(--site_color_g) !important; border-color: var(--site_color_g) !important; }
body .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover,
body .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { color: #94a3b8 !important; background: #f8fafc !important; border-color: #eef0f4 !important; cursor: default; }
body .dataTables_wrapper .dataTables_paginate .ellipsis { padding: 0 6px; color: #94a3b8; }
body .dataTables_wrapper .dataTables_paginate .pagination { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0; }
body .dataTables_wrapper .dataTables_paginate .page-item { margin: 0; }

/* Buttons extension (Export CSV, Delete selected...): .bu-btn. */
body .dataTables_wrapper .dt-buttons { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0 16px 14px 0; float: left; }
body div.dt-buttons > .dt-button, body div.dt-buttons > .btn,
body div.dt-buttons > div.dt-button-split .dt-button { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 40px; margin: 0 !important; padding: 0 16px !important; font-size: 14px !important; font-weight: 600; line-height: 1; color: #334155 !important; white-space: nowrap; text-overflow: clip; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important; cursor: pointer; }
body div.dt-buttons > .dt-button:hover:not(.disabled):not([disabled]), body div.dt-buttons > .btn:hover:not(.disabled):not([disabled]) { color: #0f172a !important; border-color: var(--site_color_g) !important; background: #fff !important; box-shadow: 0 4px 12px rgba(15, 23, 42, .08) !important; }
body div.dt-buttons > .dt-button.disabled, body div.dt-buttons > .dt-button[disabled],
body div.dt-buttons > .btn.disabled, body div.dt-buttons > .btn[disabled] { color: #64748b !important; background: #eef0f4 !important; border-color: #e2e8f0 !important; box-shadow: none !important; cursor: not-allowed; opacity: 1; }

/* "Processing..." */
body .dataTables_wrapper .dataTables_processing { z-index: 5; width: auto !important; min-width: 180px; margin-left: 0 !important; transform: translateX(-50%); padding: 12px 18px !important; font-size: 14px; font-weight: 600; color: #475569; background: #fff !important; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 24px rgba(15, 23, 42, .1); }

/* Phones: controls full width; a wide table scrolls inside itself, not the page. */
@media (max-width: 767.98px) {
  body .dataTables_wrapper .dataTables_length,
  body .dataTables_wrapper .dataTables_filter,
  body .dataTables_wrapper .dataTables_info,
  body .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: left !important; }
  body .dataTables_wrapper .dataTables_filter label { display: flex !important; }
  body .dataTables_wrapper .dataTables_filter input { flex: 1 1 auto; width: 100% !important; }
  body .dataTables_wrapper .dt-buttons { float: none; }
  body .dataTables_wrapper > table.dataTable,
  body .dataTables_wrapper > .row > [class*="col-"] > table.dataTable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Kit: back link, danger button, person cell, a DataTables table inside a .bu-box ----
   First used by the Contact Groups screens (application/views/enduser/user_group/my_contacts.php):
   DataTables there runs with dom '<"bu-table-wrap"rt><"bu-dt-foot"ip>' and the page's own
   .bu-search box, so the table scrolls inside .bu-table-wrap and info + pager sit in one row. */
.bu-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #64748b; text-decoration: none; }
.bu-back:hover { color: var(--site_color_g); text-decoration: none; }
.bu-btn--danger { color: #b91c1c; }
.bu-btn--danger:hover { color: #991b1b; border-color: #fca5a5; }
.bu-bulkbar__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.bu-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bu-person .bu-avatar, .bu-person .wfi-avatar { flex: 0 0 40px; width: 40px; height: 40px; font-size: 14px; }
.bu-table td a.bu-person__name { font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }
.bu-table td a.bu-person__name:hover { color: var(--site_color_g); }
.bu-table .bu-col-check { width: 48px; }
.bu-muted { color: #94a3b8; }
.bu-box > .dataTables_wrapper .bu-dt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 0 18px 16px; }
.bu-dt-foot .dataTables_info, .bu-dt-foot .dataTables_paginate { float: none !important; }
.bu-box > .dataTables_wrapper .bu-table-wrap { position: relative; }
.bu-box > .dataTables_wrapper table.dataTable.no-footer { border-bottom: 1px solid #eef0f4 !important; }
.bu-table .bu-person { min-width: 170px; }
.bu-table td a.bu-person__name { overflow-wrap: normal; word-break: normal; }
/* Phones: these tables keep a readable width and scroll inside .bu-table-wrap. */
@media (max-width: 767.98px) {
  .bu-table-wrap > .bu-table--wide { min-width: 920px; }
  .bu-table-wrap > .bu-table--wide td { white-space: nowrap; overflow-wrap: normal; }
  .bu-table-wrap > .bu-table--scroll { min-width: 620px; }
}

/* ==== Admin header dropdowns (ul.page-navigation.qme-dd) [batch admin_dropdown_port] ====
   Markup: application/views/admin/layouts/partials/main_menu.php. Plain dropdowns only (e.g.
   Activities): mega-menu items (Create, Manage) open their card page instead (see "Menu card
   page" below), as on qmelocal. Behaviour: themes/shared/js/backend-ui.js ("Admin header
   dropdowns"): hover / click / Escape, panel fixed under the menu bar, lined up with its item,
   clamped inside the viewport and never taller than the space below the bar (it scrolls inside).
   mmcx touch: accent top rule, chevron that slides in on hover. Theme colours only, 14px minimum.
   Phones/tablets: panels open inline in the burger list. ---- */
.page-navigation.qme-dd {
  --dd-accent: var(--site_color_g);
  --dd-ink: var(--site_font_color_g);
  --dd-line: color-mix(in srgb, var(--dd-ink) 11%, transparent);
  --dd-tint: color-mix(in srgb, var(--dd-accent) 9%, #fff);
  --dd-tint2: color-mix(in srgb, var(--dd-accent) 15%, #fff);
  --dd-soft: color-mix(in srgb, var(--dd-ink) 84%, #fff);
}
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd > .nav-item > .qme-dd__panel { box-sizing: border-box; }
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; list-style: none; }
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item { display: block; margin: 0; padding: 0; line-height: 1.35; }
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item::before,
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item > .nav-link::before { content: none !important; display: none !important; }
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item > .nav-link { position: relative; display: block; margin: 1px 0 !important; padding: 9px 30px 9px 12px !important; border-radius: 9px; color: var(--dd-soft) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.35; white-space: normal !important; text-align: left; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item > .nav-link::after { content: ""; position: absolute; top: 50%; right: 12px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; opacity: 0; transform: translate(-4px, -50%) rotate(45deg); transition: opacity .15s ease, transform .15s ease; }
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item > .nav-link:hover,
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item > .nav-link:focus-visible { background: var(--dd-tint); color: var(--dd-accent) !important; outline: 0; }
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item > .nav-link:hover::after,
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item > .nav-link:focus-visible::after { opacity: 1; transform: translate(0, -50%) rotate(45deg); }
body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item.active > .nav-link { background: var(--dd-tint2); color: var(--dd-accent) !important; font-weight: 600 !important; }
@media (min-width: 992px) {
  /* closed until backend-ui.js opens it (.is-open); before the script is ready the vendor :hover still works */
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd.is-ready > .nav-item > .qme-dd__panel { display: none; }
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd.is-ready > .nav-item.is-open > .qme-dd__panel { display: block; position: fixed; z-index: 1060; width: max-content; min-width: 250px; max-width: min(360px, calc(100vw - 32px)) !important; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 8px !important; background: #fff; border: 1px solid var(--dd-line); border-top: 3px solid var(--dd-accent); border-radius: 14px; box-shadow: 0 26px 50px -22px color-mix(in srgb, var(--dd-ink) 40%, transparent), 0 2px 6px color-mix(in srgb, var(--dd-ink) 6%, transparent); }
  /* the item whose panel is open keeps the accent and its turned arrow */
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd > .nav-item.is-open > .nav-link .menu-title,
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd > .nav-item.is-open > .nav-link .link-icon,
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd > .nav-item.is-open > .nav-link .link-arrow { color: var(--dd-accent) !important; }
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd > .nav-item.is-open > .nav-link .link-arrow { transform: rotate(-180deg); }
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd.is-ready > .nav-item.has-sub:not(.is-open):hover > .nav-link .link-arrow { transform: none; }
}
@media (max-width: 991.98px) {
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd > .nav-item > .qme-dd__panel { display: none; position: static !important; width: auto !important; max-width: none !important; max-height: none; margin: 2px 0 12px !important; padding: 6px !important; background: var(--dd-tint); border: 0; border-radius: 12px; box-shadow: none !important; }
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd > .nav-item.show-submenu > .qme-dd__panel { display: block; }
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item > .nav-link { padding: 10px 30px 10px 12px !important; font-size: 15px !important; }
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item > .nav-link:hover,
  body .horizontal-menu .bottom-navbar .page-navigation.qme-dd .qme-dd__list > .nav-item > .nav-link:focus-visible { background: #fff; }
}

/* ---- Menu card page (.qme-mcp): application/views/admin/inc/menu_card_page.php, route
   dashboard/menu-page/<id> (Dashboard::menu_page). A header mega-menu item's links as cards,
   one tab per column_group, as on qmelocal's menu card page; tabs + keyword filter in
   backend-ui.js ("Menu card page"). Cards look like qmelocal's backend cards
   (themes/shared/css/backend-cards.css .pgc-card: white, 20px corners, soft shadow, small
   lift on hover) but with a light accent-tint border on hover, no edge line. Each card is
   one link: icon tile + title + chevron on one row, the header_menu_items.description
   under it (2 lines). [batch menu_descriptions] ---- */
.qme-mcp {
  --mcp-accent: var(--site_color_g);
  --mcp-ink: var(--site_font_color_g);
  --mcp-line: color-mix(in srgb, var(--mcp-ink) 10%, transparent);
  --mcp-tint: color-mix(in srgb, var(--mcp-accent) 10%, #fff);
  --mcp-muted: color-mix(in srgb, var(--mcp-ink) 62%, #fff);
  --mcp-soft: color-mix(in srgb, var(--mcp-ink) 68%, #fff);
  --mcp-rest: 0 1px 2px color-mix(in srgb, var(--mcp-ink) 5%, transparent), 0 12px 28px -20px color-mix(in srgb, var(--mcp-ink) 45%, transparent);
}
.qme-mcp__head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.qme-mcp__head-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--mcp-accent); }
.qme-mcp__head-icon svg { width: 20px; height: 20px; }
.qme-mcp .qme-mcp__title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--mcp-ink); overflow-wrap: anywhere; }
.qme-mcp__search { position: relative; display: block; margin: 0 0 18px; }
.qme-mcp__search svg { position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--mcp-muted); pointer-events: none; }
.qme-mcp__search input { width: 100%; height: 52px; padding: 0 18px 0 48px; font-size: 15px; color: var(--mcp-ink); background: #fff; border: 1px solid var(--mcp-line); border-radius: 14px; box-shadow: 0 1px 2px color-mix(in srgb, var(--mcp-ink) 6%, transparent); outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.qme-mcp__search input:focus { border-color: var(--mcp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mcp-accent) 22%, transparent); }
.qme-mcp__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 6px; background: #fff; border: 1px solid var(--mcp-line); border-radius: 14px; }
.qme-mcp__tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--mcp-ink); background: none; border: 0; border-radius: 10px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.qme-mcp__tab:hover { color: var(--mcp-accent); background: var(--mcp-tint); }
.qme-mcp__tab:focus-visible { outline: 2px solid var(--mcp-accent); outline-offset: 2px; }
.qme-mcp__tab.is-active { color: #fff; background: var(--mcp-accent); box-shadow: 0 6px 14px -8px var(--mcp-accent); }
.qme-mcp__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--mcp-accent); background: var(--mcp-tint); }
.qme-mcp__tab.is-active .qme-mcp__count { color: var(--mcp-accent); background: #fff; }
.qme-mcp__tabs.is-searching { display: none; }
.qme-mcp__group { display: none; margin: 4px 0 12px; font-size: 16px; font-weight: 800; color: var(--mcp-ink); }
.qme-mcp.is-searching .qme-mcp__group { display: block; }
.qme-mcp__pane + .qme-mcp__pane { margin-top: 0; }
.qme-mcp.is-searching .qme-mcp__pane + .qme-mcp__pane { margin-top: 18px; }
/* grid: 1 column on phones, 2 from 768, 3 from 1200, 4 from 1400; cards in a row share its height */
.qme-mcp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .qme-mcp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .qme-mcp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .qme-mcp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the card: one link; icon + title + chevron on one row, description under it */
.qme-mcp__card { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; align-content: start; column-gap: 12px; row-gap: 10px; min-width: 0; padding: 18px; color: var(--mcp-ink); background: #fff; border: 1.5px solid transparent; border-radius: 20px; box-shadow: var(--mcp-rest); text-decoration: none; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s; }
.qme-mcp__card:hover, .qme-mcp__card:focus-visible { color: var(--mcp-ink); text-decoration: none; transform: translateY(-4px); border-color: color-mix(in srgb, var(--mcp-accent) 26%, #fff); box-shadow: 0 30px 54px -26px color-mix(in srgb, var(--mcp-accent) 55%, transparent), 0 10px 22px -16px color-mix(in srgb, var(--mcp-ink) 25%, transparent); outline: 0; }
.qme-mcp__card:focus-visible { border-color: var(--mcp-accent); }
.qme-mcp__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; color: var(--mcp-accent); background: var(--mcp-tint); }
.qme-mcp__icon svg { width: 20px; height: 20px; }
.qme-mcp__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.qme-mcp__chev { display: inline-flex; color: var(--mcp-soft); transition: transform .2s, color .2s; }
.qme-mcp__chev svg { width: 18px; height: 18px; }
.qme-mcp__card:hover .qme-mcp__chev, .qme-mcp__card:focus-visible .qme-mcp__chev { color: var(--mcp-accent); transform: translateX(2px); }
.qme-mcp__desc { grid-column: 1 / -1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 14px; line-height: 1.55; color: var(--mcp-soft); overflow-wrap: anywhere; }
.qme-mcp__card[hidden], .qme-mcp__pane[hidden], .qme-mcp__none[hidden] { display: none !important; }
.qme-mcp__none { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; font-size: 15px; color: var(--mcp-muted); background: #fff; border: 1px dashed var(--mcp-line); border-radius: 14px; }
.qme-mcp__none svg { width: 18px; height: 18px; }
/* A menu row with no target yet (url '#'): a "Coming soon" card, not a link, no hover lift. [batch member_menu_cards] */
.qme-mcp__card.is-soon { cursor: default; background: color-mix(in srgb, var(--mcp-ink) 3%, #fff); box-shadow: none; border-color: var(--mcp-line); border-style: dashed; }
.qme-mcp__card.is-soon:hover { transform: none; box-shadow: none; border-color: var(--mcp-line); }
.qme-mcp__card.is-soon .qme-mcp__icon { color: var(--mcp-muted); background: color-mix(in srgb, var(--mcp-ink) 6%, #fff); }
.qme-mcp__card.is-soon .qme-mcp__name { color: var(--mcp-muted); }
.qme-mcp__soon { grid-column: 2 / -1; justify-self: start; display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--mcp-muted); background: color-mix(in srgb, var(--mcp-ink) 7%, #fff); }
@media (max-width: 767.98px) {
  .qme-mcp .qme-mcp__title { font-size: 20px; }
  .qme-mcp__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .qme-mcp__tabs::-webkit-scrollbar { display: none; }
  .qme-mcp__tab { flex: 0 0 auto; white-space: nowrap; }
  .qme-mcp__grid { gap: 12px; }
  .qme-mcp__card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .qme-mcp__card, .qme-mcp__chev { transition: none; }
  .qme-mcp__card:hover, .qme-mcp__card:focus-visible, .qme-mcp__card:hover .qme-mcp__chev { transform: none; }
}
/* ==== end Admin header dropdowns + Menu card page [admin_dropdown_port] ==== */

/* ---- Messages: Activity tab (application/views/enduser/messages.php) ---- */
.chat-aside .comm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px !important; }
.chat-aside .comm-chip, .chat-aside .comm-chip.btn { display: inline-flex; align-items: center; height: 32px; margin: 0 !important; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1; color: var(--site_font_color_g) !important; background: #fff !important; border: 1px solid color-mix(in srgb, var(--site_font_color_g) 18%, #fff) !important; box-shadow: none !important; }
.chat-aside .comm-chip:hover { border-color: var(--site_color_g) !important; color: var(--site_color_g) !important; }
.chat-aside .comm-chip.btn-primary { color: #fff !important; background: var(--site_color_g) !important; border-color: var(--site_color_g) !important; }
.chat-aside .comm-list { margin: 0; padding: 0 !important; }
.chat-aside .comm-item { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 4px !important; border-bottom: 1px solid color-mix(in srgb, var(--site_font_color_g) 10%, #fff) !important; font-size: 14px; line-height: 1.45; }
.chat-aside .comm-item:last-child { border-bottom: 0 !important; }
.chat-aside .comm-badge, .chat-aside .comm-badge.badge { justify-self: start; display: inline-block; padding: 2px 10px !important; border: 0 !important; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--site_color_g) !important; background: color-mix(in srgb, var(--site_color_g) 12%, #fff) !important; }
.chat-aside .comm-item a { color: var(--site_font_color_g) !important; font-weight: 600; text-decoration: none; }
.chat-aside .comm-item a:hover { color: var(--site_color_g) !important; text-decoration: underline; }
.chat-aside .comm-time { font-size: 14px; color: color-mix(in srgb, var(--site_font_color_g) 55%, #fff) !important; }
.chat-aside .comm-empty { padding: 16px 4px; font-size: 14px; }

/* ---- All Bootstrap/CI pagination on backend pages: same look as .bu-pager, theme colours ---- */
body .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0; padding: 0; list-style: none; }
body .pagination .page-item { margin: 0 !important; }
body .pagination .page-item > a, body .pagination .page-item > span, body .pagination .page-link { display: inline-flex !important; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px !important; margin: 0 !important; border: 1px solid color-mix(in srgb, var(--site_font_color_g) 14%, #fff) !important; border-radius: 8px !important; background: #fff !important; color: var(--site_font_color_g) !important; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none !important; box-shadow: none !important; transition: border-color .15s, color .15s, background .15s; }
body .pagination .page-item > a:hover, body .pagination .page-link:hover { border-color: var(--site_color_g) !important; color: var(--site_color_g) !important; background: color-mix(in srgb, var(--site_color_g) 6%, #fff) !important; }
body .pagination .page-item.active > a, body .pagination .page-item.active > span, body .pagination .page-item.active .page-link { background: var(--site_color_g) !important; border-color: var(--site_color_g) !important; color: #fff !important; }
body .pagination .page-item.disabled > a, body .pagination .page-item.disabled > span, body .pagination .page-item.disabled .page-link { opacity: .45; pointer-events: none; }
body .pagination .page-item a svg { display: inline-block !important; width: 16px; height: 16px; stroke: currentColor; }

/* ---- Pager without white boxes (owner 2026-10-07): plain numbers on the page background, theme colour for hover and the active page ---- */
body .pagination .page-item > a, body .pagination .page-item > span, body .pagination .page-link,
body .bu-pager .pagination .page-item a, body .bu-pager .pagination .page-item span,
body .dataTables_wrapper .dataTables_paginate a.paginate_button,
body .dataTables_wrapper .dataTables_paginate .page-item .page-link { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--site_font_color_g) !important; }
body .pagination .page-item > a:hover, body .pagination .page-link:hover,
body .bu-pager .pagination .page-item a:hover,
body .dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
body .dataTables_wrapper .dataTables_paginate .page-item .page-link:hover { background: color-mix(in srgb, var(--site_color_g) 12%, transparent) !important; border-color: transparent !important; color: var(--site_color_g) !important; }
body .pagination .page-item.active > a, body .pagination .page-item.active > span, body .pagination .page-item.active .page-link,
body .bu-pager .pagination .page-item.active a, body .bu-pager .pagination .page-item.active span,
body .dataTables_wrapper .dataTables_paginate a.paginate_button.current, body .dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover,
body .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background: var(--site_color_g) !important; border-color: var(--site_color_g) !important; color: #fff !important; }
body .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled, body .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { background: transparent !important; border-color: transparent !important; }

/* ---- Compact header on desktop (qmelocal proportions: 64px bar, 48px menu row) ---- */
@media (min-width: 992px) {
  body .horizontal-menu .navbar.top-navbar, body .horizontal-menu .top-navbar > .container { height: 64px !important; min-height: 64px; }
  body .horizontal-menu .top-navbar .navbar-content { height: 64px !important; min-height: 64px; }
  body .horizontal-menu .top-navbar .navbar-brand { padding-top: 0 !important; padding-bottom: 0 !important; }
  body .horizontal-menu .top-navbar .navbar-brand img, body .horizontal-menu .navbar-brand.logoo { max-height: 52px; padding-top: 6px !important; padding-bottom: 6px !important; }
  body .horizontal-menu .top-navbar .navbar-menu-wrapper, body .horizontal-menu .top-navbar > .container, body .horizontal-menu .top-navbar > .container-fluid { min-height: 64px; }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > a,
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link { padding-top: 13px !important; padding-bottom: 13px !important; line-height: 22px; }
  body .horizontal-menu .navbar.top-navbar { border-bottom: 0 !important; }
  body .horizontal-menu .bottom-navbar { border-top: 0 !important; }
  /* main menu: items from the left with an even gap, not spread across the bar */
  body .horizontal-menu .bottom-navbar .page-navigation { justify-content: flex-start !important; gap: 28px; }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link .link-icon { width: 18px !important; height: 18px !important; margin-right: 7px !important; }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link { padding-left: 0 !important; padding-right: 0 !important; }
  /* small laptops: text only, so the whole menu stays on one row */
  @media (max-width: 1199.98px) { body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link .link-icon { display: none !important; } body .horizontal-menu .bottom-navbar .page-navigation { gap: 11px !important; } }
  @media (max-width: 1299.98px) { body .horizontal-menu .bottom-navbar .page-navigation { gap: 14px; } body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link .menu-title { font-size: 14px !important; } }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; }
  /* dropdowns open right under the shorter row (they sat 61px down = a 13px dead gap that closed them) */
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .submenu { top: 100% !important; margin-top: 0 !important; }
  body .horizontal-menu .bottom-navbar .page-navigation { flex-wrap: wrap !important; row-gap: 0; }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link .menu-title { font-size: 15px !important; white-space: nowrap; }
  /* main menu labels: semibold so they read as navigation */
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link, body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link .menu-title { font-weight: 600 !important; color: var(--site_font_color_g); }
  body .horizontal-menu .bottom-navbar .page-navigation > .nav-item.active > .nav-link .menu-title, body .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link:hover .menu-title { color: var(--site_color_g); }
  /* header search: 40px, slightly rounded (was a 45px pill) */
  body .horizontal-menu .center_bttts .input-group > .input-group-prepend, body .horizontal-menu .center_bttts .input-group > .input-group-text { display: none !important; }
  body .horizontal-menu .center_bttts .input-group { align-items: stretch; }
  body .horizontal-menu .center_bttts .input-group .form-control { height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 14px !important; line-height: 38px; border: 0 !important; box-shadow: none !important; font-size: 14px; color: var(--site_font_color_g); }
  body .horizontal-menu .center_bttts .input-group .form-control::placeholder { color: color-mix(in srgb, var(--site_font_color_g) 55%, #fff) !important; opacity: 1; }
  body .horizontal-menu .center_bttts .input-group:focus-within { border-color: var(--site_color_g) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--site_color_g) 18%, transparent); }
  body .horizontal-menu .center_bttts .input-group-append { margin: 0 !important; }
  body .horizontal-menu .center_bttts .input-group { height: 40px; border-radius: 8px !important; overflow: hidden; }
  body .horizontal-menu .center_bttts .input-group > *, body .horizontal-menu .center_bttts .input-group .form-control { height: 38px; }
  body .horizontal-menu .center_bttts .input-group .btn, body .horizontal-menu .center_bttts .input-group button { border-radius: 0 7px 7px 0 !important; padding: 0 18px !important; font-size: 14px; }
}

/* ---- Load more (View More Feed) buttons: compact, slightly rounded, theme colour ---- */
body #ajax_load_more, body .btn.nextBtn { display: inline-flex !important; align-items: center; gap: 6px; height: 40px; padding: 0 18px !important; border: 1px solid var(--site_color_g) !important; border-radius: 8px !important; background: var(--site_color_g) !important; color: #fff !important; font-size: 14px !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; outline: 0 !important; }
body #ajax_load_more:hover, body .btn.nextBtn:hover { filter: brightness(.94); }
body #ajax_load_more:focus-visible, body .btn.nextBtn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--site_color_g) 30%, transparent) !important; }
body #ajax_load_more svg, body .btn.nextBtn svg { width: 16px; height: 16px; }

/* ---- Image cards (.set-card-spacing: portals, newsrooms, listings): text keeps an inner gap ---- */
/* custom.css zeroes .card-body padding and sets .card_content to 10px 0, so titles ran edge to edge. */
body .set-card-spacing .grid-margin .card-body .card_content { padding: 14px 18px 0 !important; }
body .set-card-spacing .grid-margin .card-footer { padding-left: 18px !important; padding-right: 18px !important; }

/* ---- 14px floor for theme small-text classes (owner rule: nothing under 14px) ---- */
body .tx-10, body .tx-11, body .tx-12, body .tx-13,
body .card small, body .card .small, body .card-header p, body .card-header span:not(.badge),
body .portal-original-name, body .card .period-label, body .card .badge { font-size: 14px !important; }

/* ---- Follow / Following pill in feed card headers (the home page styles it inline; backend had nothing) ---- */
body .fallow_btn, body .follow_btn_css { display: inline-flex; align-items: center; height: 28px; padding: 0 12px !important; border-radius: 6px; background: var(--site_color_g) !important; color: #fff !important; font-size: 14px !important; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
body .fallow_btn:hover, body .follow_btn_css:hover { filter: brightness(.94); color: #fff !important; }

/* ---- Post detail page (/detail/...): white cards on the grey page (the white came from .page-wrapper before) ---- */
body .blog-details-wrapper .blog-post-item, body .sidebar-widget-area .widget { background: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
body .blog-details-wrapper .blog-post-item { padding: 20px 24px 8px; margin-bottom: 24px; }
body .blog-details-wrapper .blog-post-item .gallery-section img { border-radius: 10px; }
/* Leave a message: one white card, no box-in-box borders */
body .comments-respond22 { background: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); padding: 24px !important; }
body .comments-respond22 #addCommentForm2, body .comments-respond22 #comment_list, body .comments-respond22 > form, body .comments-respond22 .rounded-top, body .comments-respond22 .rounded-bottom, body .comments-respond22 .bordered { border: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }
body .comments-respond22 #comment_list, body .comments-respond22 .rounded-bottom { border-top: 1px solid color-mix(in srgb, var(--site_font_color_g) 10%, transparent) !important; margin-top: 12px; padding-top: 12px; }

/* ---- Dashboard feed cards (backend only; the public feed is untouched): picture 3 / text 9 (rounded pictures: base-html.css, every page) ---- */
@media (min-width: 768px) {
  body .list_style_posts .card .row > .col-md-4 { flex: 0 0 25%; max-width: 25%; }
  body .list_style_posts .card .row > .col-md-8 { flex: 0 0 75%; max-width: 75%; }
}
/* a small gap between the card edge and the picture */
body .list_style_posts .card .row > .col-md-4 { padding-left: 18px !important; }
@media (max-width: 767.98px) { body .list_style_posts .card .row > .col-md-4 { padding-right: 18px !important; } }

/* ---- Row menu: one ⋯ button per row that opens the row's actions (Bootstrap 5 dropdown markup):
   <div class="dropdown bu-menu"><button class="bu-menu__btn" data-bs-toggle="dropdown">…</button>
   <ul class="dropdown-menu dropdown-menu-end bu-menu__list"><li><a class="dropdown-item">…</a></li></ul></div>
   A form inside an item submits with its button as the .dropdown-item; .bu-menu__danger for destructive ones. ---- */
.bu-menu { position: relative; display: inline-block; }
.bu-menu__btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; font-size: 18px; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; }
.bu-menu__btn:hover, .bu-menu__btn[aria-expanded="true"] { color: #0f172a; border-color: var(--site_color_g); }
.bu-menu__btn:focus-visible { outline: 2px solid var(--site_color_g); outline-offset: 2px; }
.bu-menu__list { min-width: 200px; padding: 6px; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .12); }
.bu-menu__list form { margin: 0; }
.bu-menu__list .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; font-size: 15px; font-weight: 500; color: #1f2937; text-align: left; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.bu-menu__list .dropdown-item i { width: 18px; font-size: 16px; color: #64748b; }
.bu-menu__list .dropdown-item:hover, .bu-menu__list .dropdown-item:focus { color: #0f172a; background: color-mix(in srgb, var(--site_color_g) 10%, #fff); }
.bu-menu__list .dropdown-item.bu-menu__danger, .bu-menu__list .dropdown-item.bu-menu__danger i { color: #b42318; }
.bu-menu__list .dropdown-item.bu-menu__danger:hover { background: #fef3f2; }
.bu-menu__list .dropdown-divider { margin: 6px 0; border-color: #eef0f4; }

/* Backend footer text: 14px minimum (the theme set the copyright line to ~13px). */
footer.footer p, footer.footer a, footer.footer span { font-size: 14px !important; }