/* ==========================================================================
   Wild Bantu brand theme  (light + lime-yellow accent)
   Shared by admin / mobile-api / merchant-trust.
   Layered ON TOP of the Sneat core/theme-default stylesheets.
   ========================================================================== */
:root {
  --wb-primary: #e7e619;        /* brand yellow */
  --wb-primary-rgb: 231, 230, 25;
  --wb-primary-hover: #d0cf17;
  --wb-primary-soft: #fbfbdc;   /* soft tint for labels/badges */
  --wb-ink: #16170f;            /* near-black (logo bar / text on primary) */
}

/* Map Bootstrap/Sneat primary onto the brand color */
:root,
.light-style {
  --bs-primary: var(--wb-primary);
  --bs-primary-rgb: var(--wb-primary-rgb);
}

/* Buttons -------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--wb-ink);
  --bs-btn-border-color: var(--wb-ink);
  --bs-btn-hover-bg: var(--wb-ink);
  --bs-btn-hover-border-color: var(--wb-ink);
  --bs-btn-active-bg: var(--wb-ink);
  --bs-btn-active-border-color: var(--wb-ink);
  --bs-btn-color: var(--wb-primary);
  --bs-btn-hover-color: var(--wb-primary);
  --bs-btn-active-color: var(--wb-primary);
  --bs-btn-disabled-bg: var(--wb-ink);
  --bs-btn-disabled-border-color: var(--wb-ink);
  background-color: var(--wb-ink) !important;
  border-color: var(--wb-ink) !important;
  color: var(--wb-primary) !important;
  box-shadow: 0 2px 6px rgba(22, 23, 15, 0.4);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--wb-ink) !important;
  border-color: var(--wb-ink) !important;
  color: var(--wb-primary) !important;
  box-shadow: 0 4px 12px rgba(var(--wb-primary-rgb), 0.5);
}
.btn-outline-primary {
  --bs-btn-color: var(--wb-ink);
  --bs-btn-border-color: var(--wb-ink);
  --bs-btn-hover-bg: var(--wb-ink);
  --bs-btn-hover-border-color: var(--wb-ink);
  --bs-btn-hover-color: var(--wb-primary);
  --bs-btn-active-bg: var(--wb-ink);
  --bs-btn-active-color: var(--wb-primary);
  border-color: var(--wb-ink) !important;
  color: var(--wb-ink) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--wb-ink) !important;
  color: var(--wb-primary) !important;
}

/* Backgrounds / text / soft labels ------------------------------------ */
.bg-primary { background-color: var(--wb-primary) !important; color: var(--wb-ink) !important; }
.text-primary { color: #a4a312 !important; }
.bg-label-primary { background-color: var(--wb-primary-soft) !important; color: #a4a312 !important; }

a { color: #a4a312; }
a:hover { color: var(--wb-primary-hover); }

/* Form controls focus ring -------------------------------------------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--wb-primary-rgb), 0.25);
}
.form-check-input:checked {
  background-color: var(--wb-primary);
  border-color: var(--wb-primary);
}

/* Sidebar brand bar --------------------------------------------------- */
/* Keep the left menu on the light theme with the brand wordmark. */
.bg-menu-theme { background-color: #fff !important; }
.app-brand { min-height: 60px; }
.app-brand .app-brand-text,
.app-brand .wb-wordmark {
  color: var(--wb-ink);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
/* Active item — dark ink bg with lime icon (matches the merchant portal combo). */
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
[dir=rtl] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--wb-ink) !important;
  box-shadow: 0 2px 6px 0 rgba(22, 23, 15, 0.35);
  color: #fff !important;
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link .menu-icon {
  color: var(--wb-primary) !important;
}
/* Hover — soft brand tint. */
.bg-menu-theme .menu-inner > .menu-item:not(.active) > .menu-link:hover {
  background: rgba(var(--wb-primary-rgb), 0.12);
  color: var(--wb-ink);
}

/* ============================================================
   Desktop edge toggle — a circular tab riding the sidebar border
   ============================================================ */
/* The sidebar sits at z-index:10 in this layout while the fixed navbar is at
   1075, so anything overhanging the border gets buried and can't be clicked.
   Lift the whole sidebar above the navbar (but drop it back under an open
   modal so it never covers a dialog). */
@media (min-width: 1200px) {
  body:not(.modal-open) .layout-content-navbar .layout-menu {
    z-index: 1090;
  }
}

/* Anchor the toggle to the ASIDE itself (not the brand box, which is inset by
   its own margins) so it always straddles the true right border. */
#layout-menu { overflow: visible; }

.wb-edge-toggle {
  position: absolute;
  top: 18px;                 /* aligned with the brand bar */
  right: -14px;              /* half of the button hangs over the border */
  z-index: 5;
  display: none;             /* shown as flex only >= xl via d-xl-flex */
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: var(--wb-ink);
  color: var(--wb-primary) !important;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(22, 23, 15, 0.22);
  cursor: pointer;
  transition: right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.15s ease,
              box-shadow 0.2s ease,
              transform 0.15s ease;
}
.wb-edge-toggle.d-xl-flex { display: none; }
@media (min-width: 1200px) {
  .wb-edge-toggle.d-xl-flex { display: flex; }
}
.wb-edge-toggle:hover {
  background: var(--wb-ink);
  color: var(--wb-primary) !important;
  transform: scale(1.12);
  box-shadow: 0 5px 14px rgba(22, 23, 15, 0.32);
}
.wb-edge-toggle:active { transform: scale(0.94); }

/* Chevron: points inward while open (◂ "collapse me"); rotates to point
   outward when collapsed (▸ "click to open"). */
.wb-edge-toggle-icon {
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.layout-menu-collapsed .wb-edge-toggle-icon { transform: rotate(180deg); }

/* Collapsed: nudge the tab further out over the edge and breathe a soft ring
   to invite the click that re-opens the menu. */
.layout-menu-collapsed .wb-edge-toggle {
  right: -16px;
  animation: wbTogglePulse 2.4s ease-out infinite;
}
.layout-menu-collapsed .wb-edge-toggle:hover { animation: none; }
@keyframes wbTogglePulse {
  0%   { box-shadow: 0 3px 8px rgba(22, 23, 15, 0.22), 0 0 0 0 rgba(var(--wb-primary-rgb), 0.6); }
  70%  { box-shadow: 0 3px 8px rgba(22, 23, 15, 0.22), 0 0 0 9px rgba(var(--wb-primary-rgb), 0); }
  100% { box-shadow: 0 3px 8px rgba(22, 23, 15, 0.22), 0 0 0 0 rgba(var(--wb-primary-rgb), 0); }
}

/* Collapsed state (desktop): never overlay content on hover; keep the logo
   centred (the wordmark fades out on its own via the Sneat transition). */
@media (min-width: 1200px) {
  .layout-menu-collapsed:not(.layout-menu-hover) .app-brand .logo-icon {
    height: 28px;
  }
}

/* Collapsed menu-item name tooltips ----------------------------------- */
.wb-menu-tooltip .tooltip-inner {
  background-color: var(--wb-ink);
  color: #fff;
  font-weight: 600;
  border-radius: 0.375rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.wb-menu-tooltip .tooltip-arrow::before { border-right-color: var(--wb-ink); }

/* Brand helpers used in views ----------------------------------------- */
.wb-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--wb-ink);
  color: var(--wb-primary);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
}
.wb-wordmark { font-weight: 800; letter-spacing: -0.02em; color: var(--wb-ink); }
.wb-wordmark .dot { color: var(--wb-primary); }

.wb-badge-primary { background: var(--wb-ink); color: var(--wb-primary); }
.wb-welcome-card {
  background: linear-gradient(110deg, var(--wb-ink) 0%, #2a2d1c 100%);
  color: #fff;
  border: none;
}
.wb-welcome-card .text-muted { color: rgba(255, 255, 255, 0.65) !important; }
.wb-welcome-card h4 { color: #fff; }

/* Auth screen accent -------------------------------------------------- */
.wb-auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; }

/* Auth split layout: photo left, dark panel right --------------------- */
.wb-auth-image-panel {
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 100vh;
}
.wb-auth-image-overlay {
  background: linear-gradient(180deg, rgba(22, 23, 15, 0.65) 0%, rgba(22, 23, 15, 0.1) 35%, rgba(22, 23, 15, 0.75) 100%);
}

.wb-auth-dark-panel {
  background-color: var(--wb-ink);
  min-height: 100vh;
}
.wb-auth-dark-panel h3,
.wb-auth-dark-panel p,
.wb-auth-dark-panel .form-label,
.wb-auth-dark-panel .form-check-label {
  color: #fff;
}
.wb-auth-dark-panel .form-control {
  background-color: #1f2014;
  border-color: #33351f;
  color: #fff;
}
.wb-auth-dark-panel .form-control::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; }
.wb-auth-dark-panel .form-control:focus {
  background-color: #1f2014;
  color: #fff;
  border-color: var(--wb-primary);
}
.wb-auth-dark-panel .input-group-text {
  background-color: #1f2014;
  border-color: #33351f;
  color: #cfd1bd;
}
.wb-auth-dark-panel .form-control:-webkit-autofill,
.wb-auth-dark-panel .form-control:-webkit-autofill:hover,
.wb-auth-dark-panel .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #1f2014 inset;
  box-shadow: 0 0 0 1000px #1f2014 inset;
  caret-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}
.wb-auth-dark-panel .form-control.is-invalid {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 0.15rem rgba(255, 107, 107, 0.25);
}

/* Creative sign-in error alert ---------------------------------------- */
.wb-auth-alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 44px 14px 16px;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #2a1a16 0%, #201d14 100%);
  border: 1px solid rgba(255, 107, 107, 0.35);
  border-left: 4px solid #ff6b6b;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: wbAlertIn 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
             wbAlertShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.1s both;
}
.wb-auth-alert::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, #ff6b6b, transparent);
  transform-origin: left;
  animation: wbAlertBar 4s linear forwards;
}
.wb-auth-alert-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 107, 107, 0.16);
  color: #ff6b6b;
  font-size: 22px;
  animation: wbAlertPulse 1.6s ease-in-out infinite;
}
.wb-auth-alert-body { flex: 1; min-width: 0; }
.wb-auth-alert-title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  color: #fff;
}
.wb-auth-alert-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.68);
  margin-top: 2px;
}
.wb-auth-alert-close {
  position: absolute;
  top: 10px; right: 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}
.wb-auth-alert-close:hover { color: #fff; }

@keyframes wbAlertIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wbAlertShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
@keyframes wbAlertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 107, 107, 0); }
}
@keyframes wbAlertBar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ==========================================================================
   Advanced data table component  (views/partials/data-table.ejs)
   Minimal, modern listing surface shared by every admin table.
   ========================================================================== */
:root {
  --wb-table-border: #eceef1;
  --wb-table-head: #8a919b;
  --wb-table-hover: #fafbf4;
  --wb-table-radius: 14px;
}

.wb-table-card {
  border: 1px solid var(--wb-table-border);
  border-radius: var(--wb-table-radius);
  box-shadow: 0 1px 2px rgba(16, 23, 15, 0.04);
  overflow: hidden;
}

/* -- Toolbar --------------------------------------------------------------- */
.wb-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--wb-table-border);
}
.wb-table-toolbar-start { display: flex; align-items: center; min-width: 0; }
.wb-table-toolbar-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}
.wb-table-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wb-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wb-table-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #a4a312;
  background: var(--wb-primary-soft);
  border-radius: 999px;
  padding: 2px 9px;
  line-height: 1.4;
}

/* -- Search box ------------------------------------------------------------ */
.wb-search { position: relative; }
.wb-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: var(--wb-table-head);
  pointer-events: none;
}
.wb-search-input {
  height: 40px;
  width: 230px;
  max-width: 100%;
  border: 1px solid var(--wb-table-border);
  border-radius: 10px;
  background: #fff;
  padding: 0 14px 0 38px;
  font-size: 0.875rem;
  color: var(--wb-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wb-search-input::placeholder { color: #aab0b8; }
.wb-search-input:focus {
  outline: none;
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 3px rgba(var(--wb-primary-rgb), 0.18);
}

/* -- Filter toggle + length ------------------------------------------------ */
.wb-filter-btn,
.wb-length-select {
  height: 40px;
  border: 1px solid var(--wb-table-border);
  border-radius: 10px;
  background: #fff;
  color: #566;
  font-size: 0.85rem;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.wb-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  cursor: pointer;
}
.wb-filter-btn i { font-size: 18px; }
.wb-filter-btn:hover { border-color: #d7dade; color: var(--wb-ink); }
.wb-filter-btn.active {
  border-color: var(--wb-primary);
  background: var(--wb-primary-soft);
  color: #6f8700;
}
.wb-filter-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--wb-primary);
  color: var(--wb-ink);
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.wb-length-select { padding: 0 30px 0 12px; cursor: pointer; }
.wb-length-select:focus { outline: none; border-color: var(--wb-primary); }

/* -- Advanced filter panel ------------------------------------------------- */
.wb-filter-panel {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 18px;
  background: #fbfcfd;
  border-bottom: 1px solid var(--wb-table-border);
  animation: wbFilterIn 0.18s ease;
}
@keyframes wbFilterIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wb-filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 160px;
}
.wb-filter-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wb-table-head);
  margin: 0;
}
.wb-filter-select {
  height: 38px;
  border: 1px solid var(--wb-table-border);
  border-radius: 9px;
  background: #fff;
  padding: 0 12px;
  font-size: 0.85rem;
  color: var(--wb-ink);
  cursor: pointer;
}
.wb-filter-select:focus {
  outline: none;
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 3px rgba(var(--wb-primary-rgb), 0.15);
}
.wb-filter-clear {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  color: #98a0a8;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0 6px;
  transition: color 0.15s ease;
}
.wb-filter-clear:hover { color: #e5484d; }

/* -- Table ----------------------------------------------------------------- */
.wb-table-wrap { padding: 0; }
table.wb-datatable { border-collapse: separate; border-spacing: 0; }
table.wb-datatable thead th {
  background: #fbfcfd;
  border-bottom: 1px solid var(--wb-table-border) !important;
  border-top: none;
  color: var(--wb-table-head);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  padding: 13px 18px;
  white-space: nowrap;
}
table.wb-datatable tbody td {
  border-top: none;
  border-bottom: 1px solid var(--wb-table-border);
  padding: 14px 18px;
  font-size: 0.875rem;
  color: #3a3f45;
  vertical-align: middle;
}
table.wb-datatable tbody tr:last-child td { border-bottom: none; }
table.wb-datatable tbody tr { transition: background 0.12s ease; }
table.wb-datatable tbody tr:hover { background: var(--wb-table-hover); }
table.wb-datatable tbody td strong { color: var(--wb-ink); font-weight: 600; }

.wb-table-empty {
  text-align: center;
  padding: 46px 18px !important;
  color: #aab0b8;
}
.wb-table-empty i { display: block; font-size: 32px; margin-bottom: 8px; opacity: 0.7; }
.wb-table-empty span { font-size: 0.9rem; }

/* In-flight state while an AJAX action re-draws the table (WBDataTable.refresh) */
.wb-table-refreshing { position: relative; }
.wb-table-refreshing .wb-table-wrap { opacity: 0.45; transition: opacity 0.15s ease; }
.wb-table-refreshing::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  cursor: progress;
}

/* Sorting affordance */
table.wb-datatable thead th:not(.wb-no-sort) { cursor: pointer; }
table.wb-datatable thead .sorting:after,
table.wb-datatable thead .sorting_asc:after,
table.wb-datatable thead .sorting_desc:after {
  opacity: 0.4;
  font-size: 0.7rem;
}

/* -- Action buttons (compact, minimal) ------------------------------------- */
table.wb-datatable .btn-sm {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
table.wb-datatable .btn-sm i { font-size: 16px; }

/* -- Review / View action pill (auto-width, escapes the 32px icon rule) ----- */
table.wb-datatable td .wb-review-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  width: auto;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  text-decoration: none;
}
table.wb-datatable td .wb-review-action i { font-size: 15px; }
table.wb-datatable td .wb-review-action:hover { transform: translateY(-1px); }
table.wb-datatable td .wb-review-action:active { transform: translateY(0); }

/* Pending → needs attention: dark-ink pill with lime accent + a soft pulse */
.wb-review-action--review {
  background: var(--wb-ink);
  color: var(--wb-primary);
  box-shadow: 0 1px 2px rgba(22, 23, 15, 0.35);
}
.wb-review-action--review:hover {
  background: var(--wb-ink);
  color: var(--wb-primary);
  box-shadow: 0 4px 12px rgba(var(--wb-primary-rgb), 0.45);
}
.wb-review-action--review .wb-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wb-primary);
  position: relative;
  flex: 0 0 auto;
}
.wb-review-action--review .wb-pulse-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--wb-primary);
  opacity: 0.6;
  animation: wb-pulse 1.6s ease-out infinite;
}
@keyframes wb-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-review-action--review .wb-pulse-dot::after { animation: none; }
}

/* Already reviewed → quiet outline "View" pill */
.wb-review-action--view {
  background: transparent;
  color: var(--wb-muted, #6b7280);
  border-color: var(--wb-line, rgba(0, 0, 0, 0.12));
}
.wb-review-action--view:hover {
  color: var(--wb-ink);
  border-color: var(--wb-primary);
  background: var(--wb-primary-soft);
}

/* -- Footer (info + pagination) -------------------------------------------- */
.wb-dt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--wb-table-border);
}
.wb-dt-info { color: var(--wb-table-head); font-size: 0.82rem; }
.wb-dt-page .pagination { margin: 0; }
.wb-datatable_wrapper .wb-dt-page .page-link {
  border: none;
  border-radius: 8px;
  margin: 0 2px;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #566;
  font-size: 0.82rem;
  background: transparent;
}
.wb-datatable_wrapper .wb-dt-page .page-item.active .page-link {
  background: var(--wb-primary);
  color: var(--wb-ink);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(var(--wb-primary-rgb), 0.35);
}
.wb-datatable_wrapper .wb-dt-page .page-link:hover {
  background: var(--wb-primary-soft);
  color: var(--wb-ink);
}
.wb-datatable_wrapper .wb-dt-page .page-item.disabled .page-link {
  color: #c4c9cf;
  background: transparent;
}

@media (max-width: 575.98px) {
  .wb-search-input { width: 100%; }
  .wb-table-toolbar-end { width: 100%; }
  .wb-search { flex: 1; }
}

/* ==========================================================================
   Module permission generator  (module/form.ejs)
   ========================================================================== */
.wb-perm-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--wb-table-border, #eceef1);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.wb-perm-option:hover { border-color: #d7dade; }
.wb-perm-option .form-check-input { flex-shrink: 0; cursor: pointer; }
.wb-perm-option:has(.form-check-input:checked) {
  border-color: var(--wb-primary);
  background: var(--wb-primary-soft);
  box-shadow: 0 0 0 1px var(--wb-primary) inset;
}
.wb-perm-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wb-perm-verb { font-weight: 600; font-size: 0.86rem; color: var(--wb-ink); }
.wb-perm-key {
  font-size: 0.74rem;
  color: #7a828b;
  word-break: break-all;
}
.wb-perm-option:has(.form-check-input:checked) .wb-perm-key { color: #6f8700; }

/* ==========================================================================
   Analytics dashboard  (modules/admin/views/dashboard/index.ejs)
   ========================================================================== */
.wb-dash {
  --wb-dash-border: #eceef1;
  --wb-dash-radius: 16px;
  --wb-dash-muted: #8a919b;
}

/* -- Range switch ---------------------------------------------------------- */
.wb-range {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #f4f5f6;
  border-radius: 999px;
}
.wb-range-btn {
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6f7780;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.wb-range-btn:hover { color: var(--wb-ink); }
.wb-range-btn.active {
  background: var(--wb-ink);
  color: var(--wb-primary);
  box-shadow: 0 2px 6px rgba(22, 23, 15, 0.25);
}

/* Custom window picker ------------------------------------------------------ */
.wb-range-custom {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6f7780;
  background: #fff;
  border: 1px solid #e4e6e8;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.wb-range-custom:hover { border-color: #d7dade; color: var(--wb-ink); }
.wb-range-custom.active {
  background: var(--wb-ink);
  border-color: var(--wb-ink);
  color: var(--wb-primary);
}
.wb-range-custom i { font-size: 16px; }
.wb-range-caret { font-size: 13px !important; opacity: 0.7; }
.wb-daterange-panel {
  padding: 14px;
  min-width: 230px;
  border: 1px solid #e4e6e8;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(16, 23, 15, 0.12);
}
.wb-daterange-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8a919b;
  margin-bottom: 4px;
}

/* -- KPI tiles ------------------------------------------------------------- */
.wb-kpi {
  height: 100%;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--wb-dash-border);
  border-radius: var(--wb-dash-radius);
  box-shadow: 0 1px 2px rgba(16, 23, 15, 0.04);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.wb-kpi:hover { box-shadow: 0 6px 18px rgba(16, 23, 15, 0.07); transform: translateY(-1px); }
.wb-kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wb-kpi-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--wb-dash-muted);
}
.wb-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--wb-primary-soft);
  color: #8a8a0f;
  font-size: 18px;
  flex-shrink: 0;
}
.wb-kpi-value {
  margin-top: 10px;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wb-ink);
}
.wb-kpi-foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.wb-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}
.wb-kpi-trend.up   { color: #1f9254; background: #e8f6ee; }
.wb-kpi-trend.down { color: #c0392b; background: #fdeceb; }
.wb-kpi-trend.flat { color: #6f7780; background: #f2f3f4; }
.wb-kpi-sub { font-size: 0.75rem; color: var(--wb-dash-muted); }

/* The tile that carries the story: total value moving through the platform. */
.wb-kpi-hero {
  background: var(--wb-ink);
  border-color: var(--wb-ink);
}
.wb-kpi-hero .wb-kpi-label { color: rgba(255, 255, 255, 0.6); }
.wb-kpi-hero .wb-kpi-value { color: #fff; }
.wb-kpi-hero .wb-kpi-sub   { color: rgba(255, 255, 255, 0.55); }
.wb-kpi-hero .wb-kpi-icon  { background: rgba(var(--wb-primary-rgb), 0.16); color: var(--wb-primary); }
.wb-kpi-hero .wb-kpi-trend.flat { color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.1); }
.wb-kpi-escrow { border-color: rgba(var(--wb-primary-rgb), 0.55); background: linear-gradient(180deg, #fefee9 0%, #fff 60%); }

/* -- Secondary metric strip ------------------------------------------------ */
.wb-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--wb-dash-border);
  border: 1px solid var(--wb-dash-border);
  border-radius: var(--wb-dash-radius);
  overflow: hidden;
}
@media (min-width: 1200px) { .wb-metric-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .wb-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wb-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
}
.wb-metric > i { font-size: 20px; color: #a4a312; flex-shrink: 0; }
.wb-metric-value { display: block; font-size: 1.05rem; font-weight: 700; color: var(--wb-ink); line-height: 1.2; }
.wb-metric-label { display: block; font-size: 0.72rem; color: var(--wb-dash-muted); }

/* -- Panels ---------------------------------------------------------------- */
.wb-panel {
  background: #fff;
  border: 1px solid var(--wb-dash-border);
  border-radius: var(--wb-dash-radius);
  box-shadow: 0 1px 2px rgba(16, 23, 15, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wb-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
}
.wb-panel-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--wb-ink); }
.wb-panel-sub { display: block; font-size: 0.75rem; color: var(--wb-dash-muted); margin-top: 2px; }
.wb-panel-link {
  font-size: 0.76rem;
  font-weight: 600;
  color: #a4a312;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.wb-panel-link:hover { color: var(--wb-primary-hover); }
.wb-panel-body { padding: 4px 18px 18px; flex: 1; }
.wb-panel-body.p-0 { padding: 0 !important; }

/* -- Funnel ---------------------------------------------------------------- */
.wb-funnel-row { padding: 9px 0; }
.wb-funnel-meta { display: flex; justify-content: space-between; align-items: baseline; }
.wb-funnel-label { font-size: 0.82rem; color: #3a3f45; font-weight: 500; }
.wb-funnel-count { font-size: 0.95rem; font-weight: 700; color: var(--wb-ink); }
.wb-funnel-bar {
  height: 7px;
  margin: 6px 0 4px;
  border-radius: 999px;
  background: #f2f3f4;
  overflow: hidden;
}
.wb-funnel-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wb-ink), #6f8700);
  transition: width 0.4s ease;
}
.wb-funnel-row:last-of-type .wb-funnel-bar > span { background: linear-gradient(90deg, #6f8700, var(--wb-primary)); }
.wb-funnel-value { font-size: 0.72rem; color: var(--wb-dash-muted); }
.wb-funnel-lost {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--wb-dash-border);
}
.wb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  color: #6f7780;
  background: #f6f7f8;
  border-radius: 999px;
  padding: 4px 11px;
}
.wb-chip strong { color: var(--wb-ink); }

/* -- Attention queue -------------------------------------------------------- */
.wb-attention { list-style: none; margin: 0; padding: 0; }
.wb-attention li + li { border-top: 1px solid var(--wb-dash-border); }
.wb-attention-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  text-decoration: none;
  transition: background 0.12s ease;
}
.wb-attention-row:hover { background: var(--wb-table-hover); }
.wb-attention-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 16px;
  flex-shrink: 0;
}
.wb-attention-icon.tone-warning { background: #fff4e0; color: #cc8925; }
.wb-attention-icon.tone-info    { background: #e6f4fb; color: #2c86ab; }
.wb-attention-icon.tone-danger  { background: #fdeceb; color: #c0392b; }
.wb-attention-icon.tone-primary { background: var(--wb-primary-soft); color: #8a8a0f; }
.wb-attention-label { flex: 1; font-size: 0.82rem; color: #3a3f45; min-width: 0; }
.wb-attention-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wb-ink);
  background: #f2f3f4;
  border-radius: 999px;
  padding: 2px 10px;
}
.wb-attention-count.is-zero { color: #b3b8be; font-weight: 600; }
.wb-attention-go { color: #c9ced4; font-size: 15px; }
.wb-attention-row.is-clear .wb-attention-icon { opacity: 0.5; }

/* -- Chart legend ----------------------------------------------------------- */
.wb-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.wb-legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: #6f7780; }
.wb-legend-item strong { margin-left: auto; color: var(--wb-ink); }
.wb-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.wb-legend .dot.held     { background: var(--wb-ink); }
.wb-legend .dot.released { background: #a8c700; }
.wb-legend .dot.refunded { background: #e0e2e5; }

/* -- Search cloud ----------------------------------------------------------- */
.wb-search-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #3a3f45;
  background: #f6f7f8;
  border: 1px solid var(--wb-dash-border);
  border-radius: 999px;
  padding: 5px 12px;
}
.wb-search-chip em {
  font-style: normal;
  font-weight: 700;
  font-size: 0.72rem;
  color: #a4a312;
  background: var(--wb-primary-soft);
  border-radius: 999px;
  padding: 1px 7px;
}
.wb-search-chip.top { border-color: rgba(var(--wb-primary-rgb), 0.7); background: #fefee9; }
.wb-hint { font-size: 0.74rem; color: var(--wb-dash-muted); }

/* -- Mini tables ------------------------------------------------------------ */
.wb-mini-table thead th {
  font-size: 0.68rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wb-table-head);
  background: #fbfcfc;
  border-bottom: 1px solid var(--wb-dash-border);
  padding: 9px 16px !important;
}
.wb-mini-table tbody td {
  padding: 11px 16px !important;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--wb-dash-border);
  vertical-align: middle;
}
.wb-mini-table tbody tr:last-child td { border-bottom: none; }
.wb-mini-table tbody tr:hover { background: var(--wb-table-hover); }
.wb-mini-title { font-weight: 600; color: var(--wb-ink); text-decoration: none; }
.wb-mini-title:hover { color: #a4a312; }
.wb-mini-sub { font-size: 0.72rem; color: var(--wb-dash-muted); margin-top: 2px; }
.wb-empty-cell { text-align: center; color: #aab0b8; padding: 28px !important; font-size: 0.85rem; }

/* -- Activity feed ---------------------------------------------------------- */
.wb-feed { list-style: none; margin: 0; padding: 0; }
.wb-feed li + li { border-top: 1px solid var(--wb-dash-border); }
.wb-feed-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  text-decoration: none;
  transition: background 0.12s ease;
}
a.wb-feed-row:hover { background: var(--wb-table-hover); }
.wb-feed-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wb-primary-soft);
  color: #8a8a0f;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.wb-feed-body { flex: 1; min-width: 0; }
.wb-feed-title { display: block; font-size: 0.83rem; font-weight: 600; color: var(--wb-ink); }
.wb-feed-title code { font-size: 0.75rem; color: #6f8700; background: transparent; padding: 0; }
.wb-feed-sub {
  display: block;
  font-size: 0.74rem;
  color: var(--wb-dash-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-feed-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.wb-feed-end .fw-semibold { font-size: 0.83rem; color: var(--wb-ink); }
.wb-feed-time { font-size: 0.68rem; color: #b3b8be; }
.wb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 34px 18px;
  color: #aab0b8;
  font-size: 0.85rem;
}
.wb-empty i { font-size: 20px; }