/* ==========================================================================
   Backend kit (.bu-*): page header, buttons, tabs, boxes, tables, badges for
   backend list / table screens (row menus, bulk bars included). The core of mmcxchange's Backend UI kit (its
   themes/shared/css/backend-ui.css, whose look is the workflow Clients
   screen), brought over with content promotion (promotion-port-2026-10-21).
   qmelocal's own backend-ui.css restyles existing Bootstrap pages (and draws
   the .bu-tabs pill bar); this file is linked once on every backend page by
   application/views/beckend_colors.php. Add a class here only
   when a second screen needs it; screen-specific rules stay in that screen's
   own stylesheet.
   Theme colours only via var(--site_color_g) / var(--site_font_color_g).
   Minimum font size 14px.
   ========================================================================== */

.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-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 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; gap: 16px 24px; margin-bottom: 20px; }
.bu-head__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bu-head__row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 991px) {
  .bu-head { grid-template-columns: 1fr; }
  .bu-head__actions { align-items: flex-start; justify-content: flex-start; }
  .bu-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; }

/* ---- Buttons ---- */
.bu-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: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 { color: #fff; background: var(--site_color_g); border-color: var(--site_color_g); }
.bu-btn--primary:hover { color: #fff; filter: brightness(.95); }
/* Filled theme-colour buttons keep white text in every state (page rules like a:hover { color: accent } hid it). */
body .bu-btn--primary, body .bu-btn--primary:hover, body .bu-btn--primary:focus, body .bu-btn--primary:active, body .bu-btn--primary * { color: #fff !important; }
body .bu-btn--primary:hover { text-decoration: none !important; }
body .bu-btn--primary[disabled], body .bu-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; }
.bu-btn[disabled], .bu-btn[disabled]:hover { color: #64748b; background: #eef0f4; border-color: #e2e8f0; box-shadow: none; filter: none; cursor: not-allowed; }
.bu-btn--danger { color: #b91c1c; }
.bu-btn--danger:hover { color: #991b1b; border-color: #fca5a5; }
.bu-btn--block { width: 100%; }
.bu-muted { color: #94a3b8; }
/* An empty list / panel: a short line, optionally an icon and a button under it. */
.bu-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; }

/* ---- Tabs: .bu-tabs / .bu-tab (.is-active) are the dashboard's pill bar, drawn by backend-ui.css
   (the .page-wrapper .nav.nav-tabs group) so every backend tab row looks the same. Only the count chip lives here. ---- */
.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); }
.bu-tab.is-active .bu-tab__count, .bu-tab.active .bu-tab__count, .bu-tab[aria-current="page"] .bu-tab__count, body .bu-tabs.nav .nav-link.active .bu-tab__count { color: var(--site_color_g); background: #fff; }

.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; }

/* ---- 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 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eef0f4; }
.bu-search { flex: 1 1 260px; max-width: 420px; position: relative; margin: 0; }
.bu-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 { 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 { outline: none; border-color: var(--site_color_g); }
.bu-count { font-size: 14px; color: #64748b; }
/* The bulk bar over a table with ticked rows: what to do with the selection. */
.bu-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] { display: none; }
.bu-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 > * { margin: 0 !important; }
.bu-bulkbar .bu-btn { flex: 0 0 auto; }
.bu-bulkbar__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.bu-check { width: 18px; height: 18px; margin: 0; cursor: pointer; flex-shrink: 0; accent-color: var(--site_color_g); }
@media (max-width: 575.98px) {
  .bu-toolbar, .bu-bulkbar { padding-left: 14px; padding-right: 14px; }
}

/* ---- Tables ---- */
.bu-table-wrap { overflow-x: auto; }
/* 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; }
}
.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; }
.bu-table .bu-col-check { width: 48px; }
.bu-person__name { font-weight: 600; color: #0f172a; }
/* A person's initial in a round accent chip (client lists). */
.bu-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-table td a.bu-person__name:hover { color: var(--site_color_g); }

/* ---- Table alignment (kit tables and every backend DataTable) ----
   Sort arrows: one glyph right next to the header text (never floated to the column's far
   edge), the same 6px gap in every table. Right-aligned (number) columns get it before the
   text so the text stays flush with the numbers under it. */
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: 14px !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 { position: static !important; display: none; right: auto !important; bottom: auto !important; top: auto !important; margin: 0; font-size: 14px; line-height: 1; opacity: .35 !important; color: #64748b; }
body table.dataTable > thead .sorting::after { content: "\21C5" !important; }
body table.dataTable > thead .sorting_asc::after { content: "\2191" !important; }
body table.dataTable > thead .sorting_desc::after { content: "\2193" !important; }
body table.dataTable > thead .sorting::after, body table.dataTable > thead .sorting_asc::after, body table.dataTable > thead .sorting_desc::after { display: inline-block; margin-left: 6px; }
body table.dataTable > thead .sorting_asc::after, body table.dataTable > thead .sorting_desc::after,
body table.dataTable > thead .sorting_asc::before, body table.dataTable > thead .sorting_desc::before { opacity: 1 !important; color: var(--site_color_g); }
body table.dataTable > thead :is(.text-end, .text-right, .dt-right, .bu-num).sorting::after,
body table.dataTable > thead :is(.text-end, .text-right, .dt-right, .bu-num).sorting_asc::after,
body table.dataTable > thead :is(.text-end, .text-right, .dt-right, .bu-num).sorting_desc::after { display: none; }
body table.dataTable > thead :is(.text-end, .text-right, .dt-right, .bu-num).sorting::before { content: "\21C5" !important; display: inline-block; margin-right: 6px; }
body table.dataTable > thead :is(.text-end, .text-right, .dt-right, .bu-num).sorting_asc::before { content: "\2191" !important; display: inline-block; margin-right: 6px; }
body table.dataTable > thead :is(.text-end, .text-right, .dt-right, .bu-num).sorting_desc::before { content: "\2193" !important; display: inline-block; margin-right: 6px; }
/* Numbers: right-aligned in header and cells, figures in equal widths so columns line up. */
.bu-num, body table.dataTable td.text-end, body table.dataTable td.text-right, .bu-table td.text-end { text-align: right !important; font-variant-numeric: tabular-nums; }
body table.dataTable th.bu-num, .bu-table th.bu-num { text-align: right !important; }
/* The actions column: header and buttons on the same (right) edge. */
body table.dataTable :is(th, td).bu-actions-cell, .bu-table :is(th, td).bu-actions-cell { text-align: right !important; white-space: nowrap; width: 1%; }
/* Every row cell on one centre line: no Bootstrap align-top / flex cell breaks it, and buttons in a
   cell carry no extra margin and the row text's line height (the CTR and "Configure" sit level). */
body table.dataTable > tbody > tr > td, .bu-table > tbody > tr > td { vertical-align: middle !important; }
/* Only where tables are tables: phone card layouts (e.g. promotions .pr-table) turn cells into blocks. */
@media (min-width: 700px) { body table.dataTable > tbody > tr > td.bu-actions-cell, .bu-table > tbody > tr > td.bu-actions-cell { display: table-cell !important; } }
body table.dataTable td :is(.btn, .bu-btn), .bu-table td :is(.btn, .bu-btn) { vertical-align: middle; margin-top: 0 !important; margin-bottom: 0 !important; }
body table.dataTable td .btn-sm, .bu-table td .btn-sm { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; line-height: 1.4; }

/* ---- Badges ---- */
.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; }

/* ---- 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; }

/* An input with a fixed sign inside it, e.g. "$" before an amount (promotions' money fields; any backend form):
   <span class="bu-input-prefix"><span aria-hidden="true">$</span><input type="number" ...></span> */
.bu-input-prefix { display: flex; align-items: center; width: 100%; height: 42px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.bu-input-prefix:focus-within { border-color: var(--site_color_g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site_color_g) 15%, transparent); }
.bu-input-prefix > span { flex: 0 0 auto; padding: 0 0 0 12px; font-size: 15px; font-weight: 600; color: #64748b; }
.bu-input-prefix > input { flex: 1 1 auto; width: 100%; min-width: 0; height: 100% !important; margin: 0; padding: 0 12px 0 6px !important; font-size: 15px; color: var(--site_font_color_g); background: transparent; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none; }
.bu-input-prefix:has(input:disabled) { background: #f1f5f9; }
.bu-input-prefix:has(input:disabled) > span { color: #94a3b8; }