/* ==========================================================================
   ValuePay Merchant Dashboard — Layout Framing
   ==========================================================================
   Dedicated stylesheet for the dashboard shell: topbar, sidebar, main area.
   Brand tokens are defined once as CSS variables at the top so the entire
   layout is themeable from a single place.

   Structural contract:
     .db-shell                root (edge-to-edge, no outer padding)
       .db-topbar             fixed top, frosted, border-bottom full width
       .db-sidebar            fixed left, full-height, border-right full height
       .db-main               content, offset by sidebar width + topbar height

   Border-crossing mechanic:
     • .db-sidebar sits ABOVE .db-topbar (z-index 1040 vs 1030)
     • .db-sidebar border-right is visible top→bottom
     • .db-topbar border-bottom is visible naturally from left:272px→right
     • .db-sidebar::before redraws the horizontal border across the sidebar's
       top zone (at var(--db-topbar-h)) so the horizontal line visually
       continues across the sidebar, creating the crossed-border effect.
   ========================================================================== */

:root {
  /* Brand palette */
  --db-primary: #036DB4;
  --db-primary-hover: #025a96;
  --db-primary-soft: rgba(3, 109, 180, 0.08);
  --db-primary-softer: rgba(3, 109, 180, 0.04);
  --db-accent: #00D68F;
  --db-accent-soft: rgba(0, 214, 143, 0.1);
  --db-ink: #012C48;
  --db-ink-2: #1e293b;
  --db-ink-3: #334155;
  --db-muted: #64748b;
  --db-muted-2: #94a3b8;

  /* Surfaces */
  --db-bg: #F3F8FC;
  --db-surface: #ffffff;
  --db-surface-2: #f8fafc;
  --db-surface-3: #f1f5f9;

  /* Borders */
  --db-border: #e2e8f0;
  --db-border-soft: #edf2f7;

  /* Semantic */
  --db-danger: #dc3545;
  --db-danger-soft: rgba(220, 53, 69, 0.1);
  --db-success: #16a34a;
  --db-success-soft: rgba(22, 163, 74, 0.1);
  --db-warn: #f59e0b;
  --db-warn-soft: rgba(245, 158, 11, 0.1);

  /* Layout */
  --db-sidebar-w: 272px;
  --db-topbar-h: 68px;
  --db-radius: 10px;
  --db-radius-lg: 14px;
  --db-shadow-sm: 0 1px 2px rgba(1, 44, 72, 0.04);
  --db-shadow: 0 4px 18px rgba(1, 44, 72, 0.06);
  --db-shadow-lg: 0 10px 40px rgba(1, 44, 72, 0.1);

  /* Motion */
  --db-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --db-fast: 180ms var(--db-ease);
  --db-med: 260ms var(--db-ease);
}

/* ==========================================================================
   1. Shell — root container
   ========================================================================== */

.db-shell {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: var(--db-bg);
  font-family: "Kanit", "Source Sans 3", system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  color: var(--db-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.db-shell *,
.db-shell *::before,
.db-shell *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   2. Topbar — fixed top, frosted, edge-to-edge
   ========================================================================== */

.db-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--db-topbar-h);
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0 24px 0 0;
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--db-border);
  transition: background-color var(--db-fast);
}

/* Logo area — on desktop this slot is hidden (sidebar owns the logo via
   .db-sidebar__header); on mobile the sidebar is off-screen by default,
   so this slot shows the brand inside the topbar itself. */
.db-topbar__brand {
  display: none;
  height: 100%;
  align-items: center;
  padding: 0 12px 0 16px;
  text-decoration: none;
  flex-shrink: 0;
}

.db-topbar__brand img {
  max-height: 30px;
  width: auto;
  display: block;
}

/* Everything right of the logo. On desktop the sidebar (z-index 1040) covers
   the left var(--db-sidebar-w) of the topbar, so we push the content past
   that column + 15px breathing room so the search input is fully visible. */
.db-topbar__content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: calc(var(--db-sidebar-w) + 15px);
  min-width: 0;
}

/* Mobile hamburger — visible below 992px */
.db-topbar__toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--db-radius);
  color: var(--db-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background-color var(--db-fast);
  padding: 0;
  flex-shrink: 0;
}

.db-topbar__toggle:hover {
  background-color: var(--db-surface-3);
}

.db-topbar__toggle i {
  font-size: 1.35rem;
  line-height: 1;
}

/* Search bar */
.db-topbar__search {
  flex: 1;
  max-width: 520px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background-color: var(--db-surface-3);
  border: 1px solid transparent;
  border-radius: var(--db-radius);
  transition: background-color var(--db-fast), border-color var(--db-fast),
    box-shadow var(--db-fast);
}

.db-topbar__search:focus-within {
  background-color: #fff;
  border-color: var(--db-primary);
  box-shadow: 0 0 0 3px var(--db-primary-soft);
}

.db-topbar__search i {
  color: var(--db-muted);
  font-size: 1rem;
  flex-shrink: 0;
}

.db-topbar__search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--db-ink-2);
  min-width: 0;
}

.db-topbar__search input::placeholder {
  color: var(--db-muted-2);
  font-weight: 400;
}

/* Right cluster */
.db-topbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Live/Test status pill */
.db-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: "Kanit", inherit;
  margin-right: 6px;
}

.db-status-pill--live {
  background-color: var(--db-success-soft);
  color: var(--db-success);
}

.db-status-pill--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--db-success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
  animation: dbPulse 2.4s ease-in-out infinite;
}

.db-status-pill--test {
  background-color: var(--db-surface-3);
  color: var(--db-muted);
}

.db-status-pill--test::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--db-muted-2);
}

@keyframes dbPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Icon button (notifications, messages, etc.) */
.db-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--db-radius);
  background: transparent;
  border: 0;
  color: var(--db-ink-2);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--db-fast), color var(--db-fast);
}

.db-icon-btn:hover {
  background-color: var(--db-surface-3);
  color: var(--db-primary);
}

.db-icon-btn:active {
  background-color: var(--db-primary-soft);
}

.db-icon-btn i {
  font-size: 1.15rem;
  line-height: 1;
}

.db-icon-btn__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: var(--db-danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

/* Profile avatar trigger */
.db-profile-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--db-primary), #4da3d4);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: "Kanit", inherit;
  box-shadow: 0 2px 8px rgba(3, 109, 180, 0.25);
  transition: transform var(--db-fast), box-shadow var(--db-fast);
  text-decoration: none;
}

.db-profile-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(3, 109, 180, 0.3);
  color: #fff;
}

.db-profile-btn i {
  font-size: 1.15rem;
}

/* Profile dropdown menu */
.db-profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  box-shadow: var(--db-shadow-lg);
  padding: 8px;
  z-index: 1050;
  list-style: none;
  margin: 0;
}

.db-profile-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--db-ink-3);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--db-fast), color var(--db-fast);
}

.db-profile-menu .dropdown-item:hover {
  background-color: var(--db-surface-3);
  color: var(--db-primary);
}

.db-profile-menu .dropdown-item i {
  font-size: 1rem;
  width: 20px;
  color: var(--db-muted);
}

.db-profile-menu .dropdown-item:hover i {
  color: var(--db-primary);
}

.db-profile-menu .dropdown-item--danger {
  color: var(--db-danger);
}

.db-profile-menu .dropdown-item--danger:hover {
  background-color: var(--db-danger-soft);
  color: var(--db-danger);
}

.db-profile-menu .dropdown-item--danger i,
.db-profile-menu .dropdown-item--danger:hover i {
  color: var(--db-danger);
}

.db-profile-menu__divider {
  height: 1px;
  background-color: var(--db-border);
  margin: 6px 4px;
}

/* ==========================================================================
   3. Sidebar — fixed left, full-height
   ========================================================================== */

.db-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--db-sidebar-w);
  background-color: var(--db-surface);
  border-right: 1px solid var(--db-border);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  padding-top: var(--db-topbar-h);
  transition: transform var(--db-med);
  will-change: transform;
}

/* Border-cross: redraw the topbar's horizontal border across the sidebar zone */
.db-sidebar::before {
  content: "";
  position: absolute;
  top: var(--db-topbar-h);
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--db-border);
  pointer-events: none;
  z-index: 2;
}

/* Sidebar header — owns the logo on desktop.
   Positioned absolutely inside the sidebar's reserved top zone (padding-top
   is var(--db-topbar-h)). Hidden on mobile so the topbar's own .db-topbar__brand
   can take over when the sidebar is off-screen. Because .db-sidebar sits above
   .db-topbar (z-index 1040 > 1030), this header visually continues the topbar
   across the sidebar column — indistinguishable from a native topbar logo slot. */
.db-sidebar__header {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--db-topbar-h);
  align-items: center;
  padding: 0 24px;
  text-decoration: none;
  background-color: var(--db-surface);
  z-index: 3;
}

.db-sidebar__header img {
  max-height: 32px;
  width: auto;
  display: block;
}

@media (min-width: 992px) {
  .db-sidebar__header {
    display: flex;
  }
}

/* Scrollable body region */
.db-sidebar__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--db-border) transparent;
}

.db-sidebar__body::-webkit-scrollbar {
  width: 6px;
}

.db-sidebar__body::-webkit-scrollbar-track {
  background: transparent;
}

.db-sidebar__body::-webkit-scrollbar-thumb {
  background-color: var(--db-border);
  border-radius: 999px;
}

.db-sidebar__body::-webkit-scrollbar-thumb:hover {
  background-color: var(--db-muted-2);
}

/* Business selector card */
.db-business-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  background-color: var(--db-surface);
  cursor: pointer;
  position: relative;
  transition: border-color var(--db-fast), background-color var(--db-fast),
    box-shadow var(--db-fast);
  margin-bottom: 12px;
}

.db-business-card:hover {
  border-color: var(--db-primary);
  background-color: var(--db-primary-softer);
}

.db-business-card__avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--db-primary), #4da3d4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  font-family: "Kanit", inherit;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(3, 109, 180, 0.2);
}

.db-business-card__info {
  flex: 1;
  min-width: 0;
}

.db-business-card__name {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--db-ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Kanit", inherit;
}

.db-business-card__id {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--db-muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.db-business-card__chevron {
  color: var(--db-muted-2);
  font-size: 0.95rem;
  transition: transform var(--db-fast);
}

.db-business-card:hover .db-business-card__chevron {
  color: var(--db-primary);
}

/* Native select overlaid invisibly on top of the card */
.db-business-card__select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* "New business" helper link */
.db-add-business {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 16px;
  border: 1px dashed var(--db-border);
  border-radius: var(--db-radius);
  color: var(--db-primary);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--db-fast), background-color var(--db-fast),
    color var(--db-fast);
  font-family: "Kanit", inherit;
}

.db-add-business:hover {
  border-color: var(--db-primary);
  background-color: var(--db-primary-softer);
  color: var(--db-primary-hover);
}

.db-add-business i {
  font-size: 1rem;
}

/* Nav sections */
.db-nav-section {
  margin-top: 14px;
}

.db-nav-section:first-of-type {
  margin-top: 4px;
}

.db-nav-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 8px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.db-nav-section__title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--db-muted);
  font-family: "Kanit", inherit;
  margin: 0;
}

.db-nav-section__title.is-active {
  color: var(--db-primary);
}

.db-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Menu item — applied to .nav-link inside the sidebar */
.db-sidebar .nav-link,
.db-menu-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 9px 12px !important;
  border-radius: var(--db-radius);
  color: var(--db-ink-3) !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  font-family: "Kanit", inherit;
  text-decoration: none;
  transition: background-color var(--db-fast), color var(--db-fast);
  line-height: 1.3;
}

.db-sidebar .nav-link i,
.db-menu-link i {
  font-size: 1.05rem;
  color: var(--db-muted);
  flex-shrink: 0;
  line-height: 1;
  transition: color var(--db-fast);
  width: 20px;
  text-align: center;
}

.db-sidebar .nav-link:hover,
.db-menu-link:hover {
  background-color: var(--db-surface-3);
  color: var(--db-primary) !important;
}

.db-sidebar .nav-link:hover i,
.db-menu-link:hover i {
  color: var(--db-primary);
}

/* Active state */
.db-sidebar .nav-link.text-primary,
.db-menu-link.is-active {
  background-color: var(--db-primary-soft);
  color: var(--db-primary) !important;
  font-weight: 600 !important;
}

.db-sidebar .nav-link.text-primary i,
.db-menu-link.is-active i {
  color: var(--db-primary);
}

.db-sidebar .nav-link.text-primary::before,
.db-menu-link.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background-color: var(--db-primary);
}

/* Trailing badge (e.g. count, warning) */
.db-menu-link__trail {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
}

.db-menu-link__trail i {
  font-size: 0.95rem;
  width: auto;
}

/* Sidebar footer region (Live/Test toggle + footer links) */
.db-sidebar__footer {
  flex-shrink: 0;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--db-border);
  background-color: var(--db-surface);
}

.db-mode-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--db-radius);
  background-color: var(--db-surface-3);
  margin-bottom: 10px;
}

.db-mode-switch__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.db-mode-switch__label strong {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--db-ink-2);
  line-height: 1.2;
  font-family: "Kanit", inherit;
}

.db-mode-switch__label small {
  font-size: 0.66rem;
  color: var(--db-muted);
  line-height: 1.2;
}

/* Custom toggle (override Bootstrap form-switch in sidebar footer) */
.db-sidebar__footer .form-check.form-switch {
  padding-left: 0;
  margin: 0;
  min-height: unset;
  display: flex;
  align-items: center;
}

.db-sidebar__footer .form-check-input {
  float: none;
  margin-left: 0;
  width: 38px;
  height: 22px;
  background-color: #cbd5e1;
  border: none;
  cursor: pointer;
  box-shadow: none !important;
}

.db-sidebar__footer .form-check-input:checked {
  background-color: var(--db-success);
  border-color: var(--db-success);
}

.db-sidebar__footer .form-check-input:focus {
  box-shadow: 0 0 0 3px var(--db-primary-soft) !important;
}

.db-sidebar__footer .form-check-label {
  display: none;
}

/* ==========================================================================
   4. Main content area
   ========================================================================== */

/* Content horizontal edges are aligned precisely with the topbar geometry:
   - left edge 15px  → matches .db-topbar__content { padding-left: calc(sidebar + 15px) }
     so content starts exactly where the topbar search input starts
   - right edge 24px → matches .db-topbar { padding: 0 24px 0 0 } so content
     ends exactly where the last profile action ends */
.db-main,
#dbmaincontent {
  background-color: transparent;
  margin-left: var(--db-sidebar-w) !important;
  padding: calc(var(--db-topbar-h) + 20px) 24px 40px 15px !important;
  min-height: 100vh;
  width: auto;
  box-sizing: border-box;
  transition: margin-left var(--db-med);
}

/* Legacy pages wrap their section in a Bootstrap container-fluid that adds
   its own px-3/px-lg-4/py-3 padding. Neutralize it so the inner
   #dbmaincontent padding is the single source of truth for spacing. */
.container-fluid:has(> #dbmaincontent),
.container-fluid:has(> .db-main) {
  padding: 0 !important;
  margin: 0 !important;
}

/* Legacy section pattern: <div class="row m-0 p-0"> <div class="col-12 ..."> </div>
   kills Bootstrap row negative margins but preserves col 12px gutter padding —
   producing a visible 12px inset on the left. Zero it so the col content aligns
   flush with the #dbmaincontent padding box. Only affects direct children of
   #dbmaincontent, so nested Bootstrap grids keep their normal gutter behavior. */
#dbmaincontent > .row.m-0.p-0 > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   5. Mobile drawer behavior (< 992px)
   ========================================================================== */

/* Backdrop for drawer */
.db-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(1, 44, 72, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1038;
  opacity: 0;
  transition: opacity var(--db-med);
}

.db-shell.db-drawer-open .db-sidebar-backdrop {
  display: block;
  opacity: 1;
}

@media (max-width: 991.98px) {
  .db-topbar {
    padding-right: 10px;
  }

  /* Show the topbar-owned brand only on mobile (sidebar is off-screen) */
  .db-topbar__brand {
    display: flex;
  }

  .db-topbar__toggle {
    display: inline-flex;
    width: 36px;
    height: 36px;
  }

  .db-topbar__content {
    padding-left: 4px;
    gap: 8px;
  }

  /* Hide the topbar's inline desktop search, but NOT the search field that
     lives inside the mobile slide-down overlay (scoped by direct child). */
  .db-topbar > .db-topbar__content > .db-topbar__search,
  .db-topbar .db-topbar__content > .db-topbar__search {
    display: none;
  }

  /* Tighten action cluster so the profile avatar always fits */
  .db-topbar__actions {
    gap: 2px;
  }

  .db-icon-btn {
    width: 36px;
    height: 36px;
  }

  .db-icon-btn i {
    font-size: 1.05rem;
  }

  .db-profile-btn {
    width: 36px;
    height: 36px;
    font-size: 0.88rem;
  }

  .db-status-pill {
    padding: 4px 9px;
    font-size: 0.66rem;
    margin-right: 2px;
  }

  .db-sidebar {
    transform: translateX(-100%);
    box-shadow: var(--db-shadow-lg);
  }

  .db-shell.db-drawer-open .db-sidebar {
    transform: translateX(0);
  }

  .db-main,
  #dbmaincontent {
    margin-left: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Very small screens — hide the Live/Test pill and collapse gaps further
   so the 4 action icons + toggle + logo all fit in < 380px viewports. */
@media (max-width: 575.98px) {
  :root {
    --db-topbar-h: 62px;
  }

  .db-topbar {
    padding-right: 6px;
  }

  .db-topbar__brand {
    padding: 0 8px 0 10px;
  }

  .db-topbar__brand img {
    max-height: 26px;
  }

  .db-topbar__content {
    gap: 4px;
    padding-left: 2px;
  }

  .db-topbar__toggle {
    width: 34px;
    height: 34px;
  }

  .db-topbar__toggle i {
    font-size: 1.2rem;
  }

  .db-icon-btn {
    width: 34px;
    height: 34px;
  }

  .db-profile-btn {
    width: 34px;
    height: 34px;
    font-size: 0.82rem;
  }

  .db-status-pill {
    display: none;
  }

  .db-main,
  #dbmaincontent {
    padding-top: calc(var(--db-topbar-h) + 16px) !important;
    padding-bottom: 32px !important;
  }
}

/* ==========================================================================
   6. Mobile search overlay (triggered by search icon on mobile)
   ========================================================================== */

/* The overlay is always mounted; display toggles between none/block so the
   slide-down animation can replay. Positioned directly below the topbar and
   raised above it (z-index 1031 > topbar 1030) so no part of the search input
   is ever hidden behind the topbar. Inner .db-topbar__search must override
   the mobile display:none scope so the field renders correctly. */
.db-mobile-search {
  display: none;
  position: fixed;
  top: var(--db-topbar-h);
  left: 0;
  right: 0;
  padding: 12px 16px 14px;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--db-border);
  box-shadow: var(--db-shadow);
  z-index: 1031;
}

.db-mobile-search.is-open {
  display: block;
  animation: dbSearchSlideDown var(--db-med) forwards;
}

@keyframes dbSearchSlideDown {
  from {
    transform: translateY(-12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Force the search field to render inside the overlay even though the
   selector above hides the desktop one under .db-topbar on mobile. */
.db-mobile-search .db-topbar__search {
  display: flex !important;
  max-width: none;
  width: 100%;
}

/* ==========================================================================
   7. Business status badge refinements (preserved class names for JS hooks)
   ========================================================================== */

.business_status .alert-success,
.business_status .alert-secondary {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

/* ==========================================================================
   8. Overview balance stat cards
   ========================================================================== */

.db-stat-row {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 16px;
}

.db-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 148px;
  padding: 18px 18px 16px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(246, 250, 253, 0.62) 100%
  );
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(3, 109, 180, 0.12);
  border-radius: var(--db-radius-lg);
  box-shadow: 0 1px 2px rgba(1, 44, 72, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
  transition: box-shadow var(--db-fast), border-color var(--db-fast),
    transform var(--db-fast);
}

.db-stat-card::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(3, 109, 180, 0.06) 0%,
    rgba(3, 109, 180, 0) 70%
  );
  pointer-events: none;
}

.db-stat-card:hover {
  border-color: rgba(3, 109, 180, 0.22);
  box-shadow: 0 10px 30px rgba(1, 44, 72, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

.db-stat-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.db-stat-card__label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7d8f;
  line-height: 1.2;
}

.db-stat-card__meta {
  font-size: 0.68rem;
  font-weight: 500;
  color: #8497a8;
  white-space: nowrap;
}

.db-stat-card__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.98rem;
  background: rgba(3, 109, 180, 0.1);
  color: var(--db-primary);
  border: 1px solid rgba(3, 109, 180, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.db-stat-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-stat-card__amount {
  margin: 0;
  font-family: "Kanit", "Source Sans 3", system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--db-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 4px;
  word-break: break-word;
}

.db-stat-card__currency {
  font-size: 0.88rem;
  font-weight: 500;
  color: #6b7d8f;
}

.db-stat-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-size: 0.72rem;
  color: #8497a8;
  line-height: 1.45;
}

.db-stat-card__link {
  color: var(--db-primary);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.db-stat-card__link:hover {
  color: #024979;
  text-decoration: underline;
}

.db-stat-card__link i {
  font-size: 0.78rem;
  margin-left: 2px;
}

/* Variant: Summary — full brand-blue gradient hero card */
.db-stat-card--summary {
  background: linear-gradient(135deg, #036DB4 0%, #024979 100%);
  border-color: transparent;
  color: #fff;
}

.db-stat-card--summary::before {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 70%
  );
}

.db-stat-card--summary::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.db-stat-card--summary .db-stat-card__label,
.db-stat-card--summary .db-stat-card__meta,
.db-stat-card--summary .db-stat-card__foot {
  color: rgba(255, 255, 255, 0.82);
}

.db-stat-card--summary .db-stat-card__amount {
  color: #fff;
}

.db-stat-card--summary .db-stat-card__currency {
  color: rgba(255, 255, 255, 0.78);
}

.db-stat-card--summary .db-stat-card__icon {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.db-stat-card--summary .db-stat-card__link {
  color: #fff;
}

.db-stat-card--summary .db-stat-card__link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.db-stat-card--summary:hover {
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(3, 109, 180, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@media (max-width: 575.98px) {
  .db-stat-card {
    min-height: 136px;
    padding: 16px;
  }

  .db-stat-card__amount {
    font-size: 1.42rem;
  }
}

/* ==========================================================================
   Dashboard Panels (transactions list, chart, etc.)
   Shared container for non-stat widgets. Glass aesthetic tied to stat cards.
   ========================================================================== */

.db-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(246, 250, 253, 0.68) 100%
  );
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(3, 109, 180, 0.12);
  border-radius: var(--db-radius-lg);
  box-shadow: 0 1px 2px rgba(1, 44, 72, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: 18px 20px;
  min-height: 420px;
  overflow: hidden;
  transition: box-shadow var(--db-fast), border-color var(--db-fast);
}

.db-panel:hover {
  border-color: rgba(3, 109, 180, 0.18);
  box-shadow: 0 6px 24px rgba(1, 44, 72, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.db-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.db-panel__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--db-ink);
  line-height: 1.2;
}

.db-panel__subtitle {
  margin: 0;
  font-size: 0.72rem;
  color: #8497a8;
  line-height: 1.4;
}

.db-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-panel__link {
  color: var(--db-primary);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--db-fast), color var(--db-fast);
}

.db-panel__link:hover {
  color: #024979;
  background: rgba(3, 109, 180, 0.08);
}

.db-panel__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.db-panel__divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(3, 109, 180, 0) 0%,
    rgba(3, 109, 180, 0.12) 50%,
    rgba(3, 109, 180, 0) 100%
  );
  margin: 0 -4px 12px;
}

/* ==========================================================================
   Transactions list (recent transactions panel)
   ========================================================================== */

.db-tx-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 320px;
  max-height: 380px;
  padding-right: 4px;
}

.db-tx-list::-webkit-scrollbar {
  width: 6px;
}

.db-tx-list::-webkit-scrollbar-thumb {
  background: rgba(3, 109, 180, 0.15);
  border-radius: 3px;
}

.db-tx-list::-webkit-scrollbar-track {
  background: transparent;
}

.db-tx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background-color var(--db-fast);
  cursor: pointer;
}

.db-tx-item:hover {
  background: rgba(3, 109, 180, 0.06);
}

.db-tx-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(3, 109, 180, 0.1);
  color: var(--db-primary);
  border: 1px solid rgba(3, 109, 180, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.db-tx-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.db-tx-method {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--db-ink);
  line-height: 1.25;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-tx-meta {
  font-size: 0.68rem;
  color: #8497a8;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-tx-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.db-tx-amount {
  font-family: "Kanit", "Source Sans 3", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--db-ink);
  line-height: 1.2;
  white-space: nowrap;
}

.db-tx-amount__currency {
  font-size: 0.68rem;
  font-weight: 500;
  color: #8497a8;
  margin-right: 2px;
}

.db-tx-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.db-tx-pill--completed {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

.db-tx-pill--pending {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.db-tx-pill--failed {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.db-tx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px;
  text-align: center;
  color: #8497a8;
  gap: 8px;
}

.db-tx-empty i {
  font-size: 2rem;
  color: rgba(3, 109, 180, 0.35);
}

.db-tx-empty p {
  margin: 0;
  font-size: 0.78rem;
}

.db-tx-skel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
}

.db-tx-skel__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(3, 109, 180, 0.08);
  flex-shrink: 0;
}

.db-tx-skel__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-tx-skel__line {
  height: 10px;
  border-radius: 4px;
  background: rgba(3, 109, 180, 0.08);
}

.db-tx-skel__line--short {
  width: 50%;
  height: 8px;
}

/* ==========================================================================
   Chart panel (transactions graph)
   ========================================================================== */

.db-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.db-chart-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.db-chart-total__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8497a8;
  font-weight: 600;
  line-height: 1.2;
}

.db-chart-total__amount {
  margin: 0;
  font-family: "Kanit", "Source Sans 3", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--db-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.db-chart-total__amount small {
  font-size: 0.78rem;
  font-weight: 500;
  color: #8497a8;
  margin-right: 2px;
}

.db-tab-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(3, 109, 180, 0.06);
  border: 1px solid rgba(3, 109, 180, 0.1);
  border-radius: 10px;
}

.db-tab-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #5a7a94;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--db-fast), color var(--db-fast),
    box-shadow var(--db-fast);
}

.db-tab-btn:hover {
  color: var(--db-primary);
}

.db-tab-btn.is-active {
  background: #ffffff;
  color: var(--db-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(1, 44, 72, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.db-chart-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 260px;
  max-height: 320px;
  padding-top: 6px;
}

.db-chart-body canvas {
  width: 100% !important;
  height: 100% !important;
}

.db-chart-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--db-primary);
  color: #fff;
  border: 1px solid var(--db-primary);
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--db-fast), box-shadow var(--db-fast);
}

.db-chart-download:hover {
  background: #024979;
  box-shadow: 0 4px 12px rgba(3, 109, 180, 0.2);
}

.db-chart-download i {
  font-size: 0.78rem;
}

@media (max-width: 991.98px) {
  .db-chart-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .db-tab-group {
    overflow-x: auto;
    max-width: 100%;
  }

  .db-chart-total__amount {
    font-size: 1.32rem;
  }
}

@media (max-width: 575.98px) {
  .db-panel {
    padding: 16px;
    min-height: 360px;
  }

  .db-tx-list {
    min-height: 280px;
    max-height: 340px;
  }

  .db-chart-body {
    min-height: 220px;
    max-height: 280px;
  }
}

/* ==========================================================================
   Insight panels (MostPaidTime, BestCustomers, WhereCustomers, WhatCustomers)
   ========================================================================== */

.db-panel--insight {
  min-height: 260px;
  padding: 18px 20px;
}

.db-panel__head--insight {
  align-items: flex-start;
  margin-bottom: 12px;
}

.db-panel__head-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.db-panel__icon-chip {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(3, 109, 180, 0.1);
  color: var(--db-primary);
  border: 1px solid rgba(3, 109, 180, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.db-panel__head-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-panel__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(3, 109, 180, 0.08);
  border: 1px solid rgba(3, 109, 180, 0.14);
  color: var(--db-primary);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.db-insight-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 8px 8px;
  gap: 10px;
}

.db-insight-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    145deg,
    rgba(3, 109, 180, 0.1) 0%,
    rgba(3, 109, 180, 0.04) 100%
  );
  border: 1px dashed rgba(3, 109, 180, 0.22);
  color: var(--db-primary);
  font-size: 1.55rem;
}

.db-insight-empty__title {
  margin: 4px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--db-ink);
  line-height: 1.3;
}

.db-insight-empty__text {
  margin: 0;
  font-size: 0.74rem;
  color: #8497a8;
  line-height: 1.5;
  max-width: 260px;
}

/* ===================================================================
   Datatables Search Bar + Filter Popover Panel
   Compact, industry-standard, reusable across dashboard pages.
   =================================================================== */

@keyframes dbFilterFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dbFilterSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dbFilterSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Outer wrapper — needed for absolute-positioned popover panel */
.db-searchbar-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 14px;
}

/* Compact search bar row */
.db-searchbar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

/* Main search input container */
.db-searchbar__search {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 44px;
  padding: 0 14px 0 42px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 251, 254, 0.96) 100%
  );
  border: 1px solid rgba(3, 109, 180, 0.14);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(1, 44, 72, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease;
}

.db-searchbar__search:focus-within {
  border-color: rgba(3, 109, 180, 0.5);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(3, 109, 180, 0.08),
    0 2px 6px rgba(1, 44, 72, 0.06);
}

.db-searchbar__search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.92rem;
  color: #6b8197;
  pointer-events: none;
}

.db-searchbar__search:focus-within .db-searchbar__search-icon {
  color: var(--db-primary);
}

.db-searchbar__search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--db-ink);
  letter-spacing: 0.01em;
}

.db-searchbar__search-input::placeholder {
  color: #90a4b8;
  font-weight: 400;
}

.db-searchbar__search-clear {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 109, 180, 0.08);
  border: 0;
  border-radius: 999px;
  color: #5a7a94;
  font-size: 0.68rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.db-searchbar__search-clear:hover {
  background: rgba(3, 109, 180, 0.16);
  color: var(--db-primary);
}

.db-searchbar__search-clear:active {
  transform: scale(0.92);
}

/* Filter toggle button */
.db-searchbar__filter-btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  background: #ffffff;
  border: 1px solid rgba(3, 109, 180, 0.14);
  border-radius: 12px;
  color: var(--db-ink);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(1, 44, 72, 0.03);
  transition: background 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.db-searchbar__filter-btn i {
  font-size: 0.95rem;
  color: #5a7a94;
  transition: color 0.18s ease;
}

.db-searchbar__filter-btn:hover {
  background: rgba(3, 109, 180, 0.04);
  border-color: rgba(3, 109, 180, 0.28);
}

.db-searchbar__filter-btn:hover i {
  color: var(--db-primary);
}

.db-searchbar__filter-btn:active {
  transform: scale(0.97);
}

.db-searchbar__filter-btn.is-open {
  background: rgba(3, 109, 180, 0.08);
  border-color: rgba(3, 109, 180, 0.4);
  box-shadow: 0 0 0 3px rgba(3, 109, 180, 0.08);
}

.db-searchbar__filter-btn.is-open i {
  color: var(--db-primary);
}

.db-searchbar__filter-btn.has-filters {
  border-color: rgba(3, 109, 180, 0.35);
  color: var(--db-primary);
}

.db-searchbar__filter-btn.has-filters i {
  color: var(--db-primary);
}

.db-searchbar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--db-primary);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  letter-spacing: 0;
}

/* Primary Search submit button */
.db-searchbar__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  background: linear-gradient(135deg, #036db4 0%, #025a94 100%);
  border: 0;
  border-radius: 12px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(3, 109, 180, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: box-shadow 0.18s ease, transform 0.12s ease, filter 0.18s ease;
}

.db-searchbar__submit i {
  font-size: 0.95rem;
}

.db-searchbar__submit:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(3, 109, 180, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.db-searchbar__submit:active {
  transform: scale(0.97);
}

/* Backdrop — visible on mobile, transparent dim on desktop */
.db-filter-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1, 44, 72, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1049;
  animation: dbFilterFadeIn 0.18s ease;
}

/* Desktop: no visible backdrop (click-outside handles it),
   but keep pointer-events off so it doesn't block anything. */
@media (min-width: 768px) {
  .db-filter-backdrop {
    display: none;
  }
}

/* The popover / bottom-sheet panel */
.db-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(3, 109, 180, 0.14);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(1, 44, 72, 0.18),
    0 4px 16px rgba(1, 44, 72, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 1050;
  overflow: hidden;
  animation: dbFilterSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top right;
}

.db-filter-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(3, 109, 180, 0.08);
  background: linear-gradient(
    180deg,
    rgba(3, 109, 180, 0.03) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.db-filter-panel__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--db-ink);
  letter-spacing: -0.005em;
}

.db-filter-panel__subtitle {
  margin: 2px 0 0;
  font-size: 0.74rem;
  color: #8497a8;
  font-weight: 500;
}

.db-filter-panel__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 109, 180, 0.06);
  border: 0;
  border-radius: 8px;
  color: #5a7a94;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.db-filter-panel__close:hover {
  background: rgba(3, 109, 180, 0.12);
  color: var(--db-primary);
}

.db-filter-panel__close:active {
  transform: scale(0.92);
}

.db-filter-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.db-filter-panel__body::-webkit-scrollbar {
  width: 8px;
}
.db-filter-panel__body::-webkit-scrollbar-track {
  background: transparent;
}
.db-filter-panel__body::-webkit-scrollbar-thumb {
  background: rgba(3, 109, 180, 0.16);
  border-radius: 8px;
}
.db-filter-panel__body::-webkit-scrollbar-thumb:hover {
  background: rgba(3, 109, 180, 0.28);
}

/* Individual filter group (label + input/select) */
.db-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-filter-group__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #5a7a94;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.db-filter-group__input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: #f7fafc;
  border: 1px solid rgba(3, 109, 180, 0.12);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--db-ink);
  outline: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease;
}

.db-filter-group__input::placeholder {
  color: #90a4b8;
}

.db-filter-group__input:focus {
  background: #ffffff;
  border-color: rgba(3, 109, 180, 0.45);
  box-shadow: 0 0 0 3px rgba(3, 109, 180, 0.08);
}

.db-filter-group__select-wrap {
  position: relative;
}

.db-filter-group__select {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 12px;
  background: #f7fafc;
  border: 1px solid rgba(3, 109, 180, 0.12);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--db-ink);
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease;
}

.db-filter-group__select:focus {
  background: #ffffff;
  border-color: rgba(3, 109, 180, 0.45);
  box-shadow: 0 0 0 3px rgba(3, 109, 180, 0.08);
}

.db-filter-group__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b8197;
  font-size: 0.74rem;
  pointer-events: none;
  transition: color 0.18s ease;
}

.db-filter-group__select-wrap:focus-within .db-filter-group__chevron {
  color: var(--db-primary);
}

.db-filter-panel__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(3, 109, 180, 0.08);
  background: #fafcfe;
}

.db-filter-panel__reset {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(3, 109, 180, 0.14);
  border-radius: 10px;
  color: #5a7a94;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    transform 0.12s ease;
}

.db-filter-panel__reset:hover {
  background: rgba(220, 53, 69, 0.06);
  border-color: rgba(220, 53, 69, 0.28);
  color: #c0392b;
}

.db-filter-panel__reset:active {
  transform: scale(0.97);
}

.db-filter-panel__apply {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  background: linear-gradient(135deg, #036db4 0%, #025a94 100%);
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(3, 109, 180, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: box-shadow 0.18s ease, transform 0.12s ease, filter 0.18s ease;
}

.db-filter-panel__apply:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(3, 109, 180, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.db-filter-panel__apply:active {
  transform: scale(0.97);
}

/* Active filters compact chip row */
.db-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: linear-gradient(
    180deg,
    rgba(3, 109, 180, 0.04) 0%,
    rgba(3, 109, 180, 0.02) 100%
  );
  border: 1px solid rgba(3, 109, 180, 0.12);
  border-radius: 12px;
}

.db-active-filters__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--db-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
}

.db-active-filters__label i {
  font-size: 0.78rem;
}

.db-active-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  background: #ffffff;
  border: 1px solid rgba(3, 109, 180, 0.18);
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--db-ink);
  box-shadow: 0 1px 2px rgba(1, 44, 72, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.db-active-filters__chip:hover {
  border-color: rgba(3, 109, 180, 0.35);
}

.db-active-filters__chip-key {
  font-weight: 500;
  color: #6b8197;
}

.db-active-filters__chip-val {
  font-weight: 700;
  color: var(--db-ink);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-active-filters__reset {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid rgba(220, 53, 69, 0.22);
  border-radius: 999px;
  color: #c0392b;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    transform 0.12s ease;
}

.db-active-filters__reset i {
  font-size: 0.64rem;
}

.db-active-filters__reset:hover {
  background: rgba(220, 53, 69, 0.08);
  border-color: rgba(220, 53, 69, 0.4);
}

.db-active-filters__reset:active {
  transform: scale(0.95);
}

/* =====================================================
   Responsive — collapse labels and convert to bottom-sheet
   ===================================================== */

@media (max-width: 767.98px) {
  .db-searchbar {
    gap: 8px;
  }

  .db-searchbar__search {
    height: 42px;
    padding-left: 38px;
  }

  .db-searchbar__search-icon {
    left: 13px;
  }

  .db-searchbar__filter-btn {
    height: 42px;
    padding: 0 12px;
  }

  .db-searchbar__filter-btn-label {
    display: none;
  }

  .db-searchbar__submit {
    height: 42px;
    padding: 0 14px;
  }

  .db-searchbar__submit-label {
    display: none;
  }

  /* Bottom-sheet panel on mobile */
  .db-filter-panel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 18px 18px 0 0;
    animation: dbFilterSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: bottom center;
    z-index: 1050;
  }

  .db-filter-panel__head {
    padding: 16px 18px 12px;
  }

  .db-filter-panel__body {
    padding: 14px 18px;
    gap: 12px;
  }

  .db-filter-panel__foot {
    padding: 12px 18px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .db-active-filters {
    padding: 8px 12px;
  }

  .db-active-filters__chip-val {
    max-width: 120px;
  }
}

@media (max-width: 479.98px) {
  .db-searchbar__search {
    padding-left: 36px;
    padding-right: 10px;
  }

  .db-searchbar__search-input {
    font-size: 0.85rem;
  }

  .db-searchbar__filter-btn {
    padding: 0 10px;
  }

  .db-searchbar__submit {
    padding: 0 12px;
  }
}

/* ==========================================================================
   Dashboard Page Shell — unified page-level container
   Used by full-page widgets (Transactions, Customers, Disputes, etc.) to
   provide a consistent header + primary action + panel layout.
   ========================================================================== */

.db-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-width: 0;
  animation: dbPageFadeIn 360ms var(--db-ease) both;
}

@keyframes dbPageFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.db-page-header {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 2px 18px;
  border-bottom: 1px solid rgba(3, 109, 180, 0.09);
}

.db-page-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--db-primary) 0%,
    var(--db-accent) 100%
  );
}

.db-page-header__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--db-primary);
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(3, 109, 180, 0.08) 0%,
    rgba(0, 214, 143, 0.08) 100%
  );
  border: 1px solid rgba(3, 109, 180, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.db-page-header__eyebrow i {
  font-size: 0.78rem;
  line-height: 1;
}

.db-page-header__title {
  margin: 4px 0 0;
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--db-ink);
}

.db-page-header__subtitle {
  margin: 0;
  max-width: 56ch;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--db-muted);
}

.db-page-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-bottom: 4px;
}

/* ==========================================================================
   Dashboard buttons — primary/ghost brand pair
   ========================================================================== */

.db-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--db-fast), box-shadow var(--db-fast),
    background-color var(--db-fast), border-color var(--db-fast),
    color var(--db-fast);
  -webkit-appearance: none;
  appearance: none;
}

.db-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(3, 109, 180, 0.2),
    0 6px 18px rgba(3, 109, 180, 0.22);
}

.db-btn i {
  font-size: 0.95rem;
  line-height: 1;
}

.db-btn--primary {
  color: #ffffff;
  background: linear-gradient(135deg, #036DB4 0%, #0a7fc8 100%);
  border-color: rgba(1, 44, 72, 0.12);
  box-shadow: 0 6px 18px rgba(3, 109, 180, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.db-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(3, 109, 180, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg, #025a96 0%, #036DB4 100%);
}

.db-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(3, 109, 180, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.db-btn--ghost {
  color: var(--db-primary);
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(3, 109, 180, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.db-btn--ghost:hover {
  background: rgba(3, 109, 180, 0.06);
  border-color: rgba(3, 109, 180, 0.32);
  color: var(--db-primary-hover);
}

/* ==========================================================================
   db-panel variant for full-page widgets
   Relaxes the min-height cap, allows table overflow and keeps the glass
   aesthetic but with more breathing room for the body content.
   ========================================================================== */

.db-panel--page {
  min-height: 0;
  padding: 22px 22px 18px;
  overflow: visible;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(243, 249, 253, 0.78) 100%
  );
  border-color: rgba(3, 109, 180, 0.14);
  box-shadow: 0 1px 2px rgba(1, 44, 72, 0.04),
    0 12px 36px -18px rgba(1, 44, 72, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.db-panel--page:hover {
  border-color: rgba(3, 109, 180, 0.18);
  box-shadow: 0 1px 2px rgba(1, 44, 72, 0.05),
    0 16px 42px -18px rgba(1, 44, 72, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.db-panel__body--flush {
  margin: 0 -4px;
}

/* Responsive: stack header on tablet+mobile, full-width primary action */
@media (max-width: 767.98px) {
  .db-page {
    gap: 16px;
  }

  .db-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-bottom: 16px;
  }

  .db-page-header__actions {
    padding-bottom: 0;
  }

  .db-page-header__actions .db-btn {
    width: 100%;
  }

  .db-panel--page {
    padding: 16px 14px 14px;
    border-radius: 12px;
  }

  .db-panel__body--flush {
    margin: 0 -2px;
  }
}

@media (max-width: 479.98px) {
  .db-page-header__title {
    font-size: 1.5rem;
  }

  .db-page-header__subtitle {
    font-size: 0.8rem;
  }

  .db-panel--page {
    padding: 14px 12px 12px;
  }
}

/* ==========================================================================
   Elegant table styling inside .db-panel--page
   Scoped transformation that neutralizes Bootstrap/simple-datatables defaults
   and applies a premium, minimalistic table look: no vertical rules, subtle
   zebra, tinted header, refined hover, and a styled horizontal scrollbar.
   ========================================================================== */

/* Simple-datatables wrapper overrides: remove its default paddings and any
   residual borders it ships in dist/style.css */
.db-panel--page .datatable-wrapper {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.db-panel--page .datatable-top,
.db-panel--page .datatable-bottom {
  display: none !important;
}

.db-panel--page .datatable-container {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  border: 0;
  border-radius: 12px;
  background: transparent;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(3, 109, 180, 0.28) transparent;
}

.db-panel--page .datatable-container::-webkit-scrollbar {
  height: 8px;
}

.db-panel--page .datatable-container::-webkit-scrollbar-track {
  background: transparent;
}

.db-panel--page .datatable-container::-webkit-scrollbar-thumb {
  background: linear-gradient(
    90deg,
    rgba(3, 109, 180, 0.32) 0%,
    rgba(3, 109, 180, 0.22) 100%
  );
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.db-panel--page .datatable-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    90deg,
    rgba(3, 109, 180, 0.45) 0%,
    rgba(3, 109, 180, 0.32) 100%
  );
  background-clip: padding-box;
}

/* Base table reset */
.db-panel--page table.table {
  margin: 12px 0 16px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  color: var(--db-ink-2);
  font-family: inherit;
  font-size: 0.84rem;
}

/* Kill Bootstrap table-bordered vertical lines so the grid feels airier.
   We keep a single horizontal row separator via tbody td border-bottom. */
.db-panel--page table.table,
.db-panel--page table.table > :not(caption) > * > * {
  border: 0 !important;
  box-shadow: none !important;
}

/* ========== Header ========== */
.db-panel--page table.table thead tr,
.db-panel--page table.table thead tr.bg-light {
  background: linear-gradient(
    180deg,
    rgba(3, 109, 180, 0.06) 0%,
    rgba(3, 109, 180, 0.03) 100%
  ) !important;
}

.db-panel--page table.table thead th {
  padding: 14px 18px;
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--db-ink) !important;
  white-space: nowrap;
  vertical-align: middle;
  border: 0 !important;
  border-bottom: 1px solid rgba(3, 109, 180, 0.14) !important;
  background: transparent;
  position: relative;
}

/* Reset the <small> inside thead — the component wraps head text in <small>
   which previously shrank it further. Unify to the header font-size above. */
.db-panel--page table.table thead th small {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* Round the header's outer corners to match the panel aesthetic */
.db-panel--page table.table thead th:first-child {
  border-top-left-radius: 10px;
  padding-left: 20px;
}

.db-panel--page table.table thead th:last-child {
  border-top-right-radius: 10px;
  padding-right: 20px;
}

/* Subtle vertical dividers between header cells — hairline only, pure
   visual rhythm, no hard Bootstrap borders */
.db-panel--page table.table thead th + th::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28%;
  height: 44%;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(3, 109, 180, 0) 0%,
    rgba(3, 109, 180, 0.14) 50%,
    rgba(3, 109, 180, 0) 100%
  );
}

/* ========== Body rows ========== */
.db-panel--page table.table tbody tr {
  background: transparent;
  transition: background-color var(--db-fast), box-shadow var(--db-fast);
  cursor: pointer;
}

/* Zebra stripes — extremely subtle so hover state still reads clearly */
.db-panel--page table.table tbody tr:nth-child(even) {
  background: rgba(243, 249, 253, 0.55);
}

.db-panel--page table.table tbody tr:hover {
  background: linear-gradient(
    90deg,
    rgba(3, 109, 180, 0.08) 0%,
    rgba(3, 109, 180, 0.04) 100%
  );
  box-shadow: inset 3px 0 0 var(--db-primary);
}

.db-panel--page table.table tbody td {
  padding: 14px 18px;
  vertical-align: middle;
  border: 0 !important;
  border-bottom: 1px solid rgba(3, 109, 180, 0.07) !important;
  background: transparent;
  color: var(--db-ink-3);
  font-size: 0.84rem;
  line-height: 1.5;
}

.db-panel--page table.table tbody td:first-child {
  padding-left: 20px;
  font-weight: 500;
  color: var(--db-ink);
}

.db-panel--page table.table tbody td:last-child {
  padding-right: 20px;
}

/* Last row — drop the border-bottom for a clean edge */
.db-panel--page table.table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* ========== Small wrappers within cells (copy icons, status, etc.) ========== */
.db-panel--page table.table tbody td .bi {
  line-height: 1;
}

/* Status-like pills if any cell contains a Bootstrap badge */
.db-panel--page table.table tbody td .badge {
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: capitalize;
}

/* Dropdown action cell (the More menu column) */
.db-panel--page table.table tbody td .dropdown .btn {
  background: transparent;
  border: 1px solid rgba(3, 109, 180, 0.14);
  color: var(--db-primary);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.75rem;
  transition: background-color var(--db-fast), border-color var(--db-fast),
    color var(--db-fast);
}

.db-panel--page table.table tbody td .dropdown .btn:hover {
  background: rgba(3, 109, 180, 0.08);
  border-color: rgba(3, 109, 180, 0.3);
  color: var(--db-primary-hover);
}

/* ========== Empty state row ========== */
.db-panel--page table.table tbody tr.datatable-empty td,
.db-panel--page table.table tbody td.datatable-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--db-muted);
  font-size: 0.85rem;
  font-style: italic;
  background: transparent;
}

/* ========== Responsive behavior ========== */
@media (max-width: 991.98px) {
  .db-panel--page table.table thead th,
  .db-panel--page table.table tbody td {
    padding: 12px 14px;
    font-size: 0.8rem;
  }

  .db-panel--page table.table thead th:first-child,
  .db-panel--page table.table tbody td:first-child {
    padding-left: 16px;
  }

  .db-panel--page table.table thead th:last-child,
  .db-panel--page table.table tbody td:last-child {
    padding-right: 16px;
  }
}

@media (max-width: 767.98px) {
  .db-panel--page table.table {
    font-size: 0.78rem;
    margin: 8px 0 12px;
  }

  .db-panel--page table.table thead th {
    padding: 11px 12px;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .db-panel--page table.table tbody td {
    padding: 11px 12px;
    font-size: 0.78rem;
  }

  .db-panel--page table.table thead th:first-child,
  .db-panel--page table.table tbody td:first-child {
    padding-left: 12px;
  }

  .db-panel--page table.table thead th:last-child,
  .db-panel--page table.table tbody td:last-child {
    padding-right: 12px;
  }

  /* Hover becomes tap-highlight on touch */
  .db-panel--page table.table tbody tr:hover {
    background: rgba(3, 109, 180, 0.05);
    box-shadow: inset 2px 0 0 var(--db-primary);
  }
}

/* ==========================================================================
   Pagination bar inside .db-panel--page
   Restyles the Datatables component's Previous/Next control row into a
   refined footer with pill buttons and a centered page indicator.
   ========================================================================== */

.db-panel--page .db-pagination,
.db-cx-table-wrap .db-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px !important;
  padding: 14px 4px 4px;
  border-top: 1px solid rgba(3, 109, 180, 0.09);
}

.db-panel--page .db-pagination > span,
.db-cx-table-wrap .db-pagination > span {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--db-muted);
}

.db-panel--page .db-pagination > button.btn.btn-primary.btn-sm,
.db-cx-table-wrap .db-pagination > button.btn.btn-primary.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #036DB4 0%, #0a7fc8 100%) !important;
  border: 1px solid rgba(1, 44, 72, 0.12) !important;
  color: #ffffff !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(3, 109, 180, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform var(--db-fast), box-shadow var(--db-fast),
    opacity var(--db-fast);
}

.db-panel--page .db-pagination > button.btn.btn-primary.btn-sm:hover:not(:disabled),
.db-cx-table-wrap .db-pagination > button.btn.btn-primary.btn-sm:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(3, 109, 180, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg, #025a96 0%, #036DB4 100%) !important;
}

.db-panel--page .db-pagination > button.btn.btn-primary.btn-sm:active:not(:disabled),
.db-cx-table-wrap .db-pagination > button.btn.btn-primary.btn-sm:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(3, 109, 180, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.db-panel--page .db-pagination > button.btn.btn-primary.btn-sm:disabled,
.db-cx-table-wrap .db-pagination > button.btn.btn-primary.btn-sm:disabled {
  background: rgba(3, 109, 180, 0.14) !important;
  border-color: rgba(3, 109, 180, 0.12) !important;
  color: rgba(1, 44, 72, 0.4) !important;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

@media (max-width: 479.98px) {
  .db-panel--page .db-pagination > button.btn.btn-primary.btn-sm,
  .db-cx-table-wrap .db-pagination > button.btn.btn-primary.btn-sm {
    height: 34px;
    padding: 0 12px !important;
    font-size: 0.72rem !important;
  }
  .db-panel--page .db-pagination > span,
  .db-cx-table-wrap .db-pagination > span {
    font-size: 0.72rem;
  }
}

/* ==========================================================================
   Transaction Details Page
   Clean, card-based layout for individual transaction view.
   Reuses existing design tokens and .db-btn variants.
   ========================================================================== */

/* ---- Page-level ---- */
.db-tx-page {
  width: 100%;
}

/* ---- Status badges (shared) ---- */
.db-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}

.db-badge--sm {
  padding: 2px 8px;
  font-size: 0.66rem;
}

.db-badge--success {
  background: var(--db-success-soft);
  color: var(--db-success);
}

.db-badge--danger {
  background: var(--db-danger-soft);
  color: var(--db-danger);
}

.db-badge--warn {
  background: var(--db-warn-soft);
  color: #92400e;
}

.db-badge--neutral {
  background: var(--db-surface-3);
  color: var(--db-muted);
}

/* ---- Button variants ---- */
.db-btn--danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--db-radius);
  background: var(--db-danger);
  color: #fff;
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--db-fast), transform 0.12s var(--db-ease);
}

.db-btn--danger:hover {
  background: #b91c2c;
}

.db-btn--danger:active {
  transform: scale(0.97);
}

.db-btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 0.72rem;
}

.db-btn--primary-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(3, 109, 180, 0.18);
  border-radius: var(--db-radius);
  background: var(--db-primary-soft);
  color: var(--db-primary);
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--db-fast), border-color var(--db-fast);
}

.db-btn--primary-soft:hover {
  background: rgba(3, 109, 180, 0.14);
  border-color: rgba(3, 109, 180, 0.28);
}

.db-btn--danger-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--db-danger-soft);
  border-radius: var(--db-radius);
  background: var(--db-danger-soft);
  color: var(--db-danger);
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--db-fast), border-color var(--db-fast);
}

.db-btn--danger-soft:hover {
  background: rgba(220, 53, 69, 0.16);
  border-color: rgba(220, 53, 69, 0.28);
}

.db-btn--success {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--db-radius);
  background: var(--db-success);
  color: #fff;
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--db-fast);
}

.db-btn--success:hover {
  background: #15803d;
}

/* ---- Transaction Header ---- */
.db-tx-header {
  margin-bottom: 18px;
}

.db-tx-header__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  margin-bottom: 10px;
  border: 0;
  background: transparent;
  color: var(--db-muted);
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--db-fast);
}

.db-tx-header__back:hover {
  color: var(--db-primary);
}

.db-tx-header__back i {
  font-size: 1rem;
  transition: transform var(--db-fast);
}

.db-tx-header__back:hover i {
  transform: translateX(-3px);
}

.db-tx-header__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.db-tx-header__main {
  flex: 1 1 0;
  min-width: 0;
}

.db-tx-header__amount-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.db-tx-header__amount {
  margin: 0;
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--db-ink);
  line-height: 1.2;
}

.db-tx-header__currency {
  font-size: 0.6em;
  font-weight: 600;
  color: var(--db-muted);
  margin-right: 2px;
}

.db-tx-header__sub {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.82rem;
  color: var(--db-muted);
}

.db-tx-header__customer {
  color: var(--db-primary);
  font-weight: 500;
}

.db-tx-header__date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--db-muted-2);
}

.db-tx-header__date i {
  font-size: 0.72rem;
}

.db-tx-header__time {
  opacity: 0.7;
}

.db-tx-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ---- Meta Cards Row ---- */
.db-tx-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
  width: 100%;
}

.db-tx-meta__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(246, 250, 253, 0.68) 100%
  );
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(3, 109, 180, 0.1);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color var(--db-fast), box-shadow var(--db-fast);
}

.db-tx-meta__card:hover {
  border-color: rgba(3, 109, 180, 0.18);
  box-shadow: 0 4px 14px rgba(1, 44, 72, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.db-tx-meta__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--db-muted);
}

.db-tx-meta__tip-icon {
  font-size: 0.72rem;
  color: var(--db-muted-2);
  cursor: help;
}

.db-tx-meta__value {
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--db-ink);
  word-break: break-all;
}

.db-tx-meta__value--mono {
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.db-tx-meta__copy {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(3, 109, 180, 0.14);
  border-radius: 8px;
  background: transparent;
  color: var(--db-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all var(--db-fast);
}

.db-tx-meta__copy:hover {
  background: var(--db-primary-soft);
  color: var(--db-primary);
  border-color: rgba(3, 109, 180, 0.22);
}

.db-tx-meta__copy.is-copied {
  color: var(--db-success);
  border-color: rgba(22, 163, 74, 0.3);
  background: var(--db-success-soft);
}

/* ---- Two-Column Layout ---- */
.db-tx-columns {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 18px;
  align-items: start;
  width: 100%;
}

.db-tx-col-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.db-tx-col-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- Reusable Detail Card ---- */
.db-tx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(246, 250, 253, 0.68) 100%
  );
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(3, 109, 180, 0.1);
  border-radius: var(--db-radius-lg);
  box-shadow: var(--db-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color var(--db-fast), box-shadow var(--db-fast);
}

.db-tx-card:hover {
  border-color: rgba(3, 109, 180, 0.16);
  box-shadow: 0 6px 22px rgba(1, 44, 72, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.db-tx-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.db-tx-card__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--db-ink);
}

.db-tx-card__title i {
  font-size: 0.82rem;
  color: var(--db-primary);
  opacity: 0.7;
}

.db-tx-card__divider {
  height: 1px;
  margin-bottom: 12px;
  background: linear-gradient(
    90deg,
    rgba(3, 109, 180, 0.14) 0%,
    rgba(3, 109, 180, 0.04) 100%
  );
}

.db-tx-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.db-tx-card__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.db-tx-card__label {
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--db-muted);
}

.db-tx-card__value {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--db-ink-2);
  word-break: break-word;
}

.db-tx-card__value--mono {
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.db-tx-card__value--link {
  color: var(--db-primary);
}

/* ---- Chargeback card accent ---- */
.db-tx-card--chargeback {
  border-left: 3px solid var(--db-warn);
}

.db-tx-cb-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.db-tx-cb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--db-surface-2);
}

.db-tx-cb-row__label {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--db-muted);
}

.db-tx-cb-row__value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--db-ink-2);
}

.db-tx-cb-row__value--bold {
  color: var(--db-ink);
  font-weight: 700;
}

.db-tx-cb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- Transaction Trace ---- */
.db-tx-trace-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}

.db-tx-trace-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--db-surface-2);
}

.db-tx-trace-stat__value {
  font-family: "Kanit", "Source Sans 3", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.db-tx-trace-stat__value--success {
  color: var(--db-success);
}

.db-tx-trace-stat__value--danger {
  color: var(--db-danger);
}

.db-tx-trace-stat__label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--db-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Timeline */
.db-tx-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  position: relative;
}

.db-tx-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(3, 109, 180, 0.18) 0%,
    rgba(3, 109, 180, 0.06) 100%
  );
  border-radius: 999px;
}

.db-tx-timeline__item {
  position: relative;
  padding-bottom: 16px;
}

.db-tx-timeline__item:last-child {
  padding-bottom: 0;
}

.db-tx-timeline__dot {
  position: absolute;
  left: -18px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--db-border);
  background: var(--db-surface);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
  z-index: 1;
}

.db-tx-timeline__item.is-success .db-tx-timeline__dot {
  border-color: var(--db-success);
  background: var(--db-success-soft);
}

.db-tx-timeline__item.is-error .db-tx-timeline__dot {
  border-color: var(--db-danger);
  background: var(--db-danger-soft);
}

.db-tx-timeline__content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 4px;
}

.db-tx-timeline__time {
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--db-muted-2);
  letter-spacing: 0.02em;
}

.db-tx-timeline__action {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--db-ink-2);
}

.db-tx-timeline__message {
  font-size: 0.74rem;
  color: var(--db-muted);
  line-height: 1.4;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .db-tx-columns {
    grid-template-columns: 1fr;
  }
  .db-tx-meta {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .db-tx-header__body {
    flex-direction: column;
    gap: 14px;
  }
  .db-tx-header__actions {
    width: 100%;
  }
  .db-tx-header__actions .db-btn {
    flex: 1;
    justify-content: center;
  }
  .db-tx-meta {
    grid-template-columns: 1fr 1fr;
  }
  .db-tx-card__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .db-tx-card {
    padding: 16px 18px;
  }
  .db-tx-trace-stats {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 479.98px) {
  .db-tx-meta {
    grid-template-columns: 1fr;
  }
  .db-tx-header__amount {
    font-size: 1.2rem;
  }
  .db-tx-header__actions {
    flex-direction: column;
  }
  .db-tx-card {
    padding: 14px 16px;
    border-radius: var(--db-radius);
  }
  .db-tx-meta__card {
    padding: 14px;
  }
}

/* ==========================================================================
   Customer Detail Page
   ========================================================================== */

/* ---- Page-level ---- */
.db-cx-page {
  width: 100%;
}

/* ---- Customer Header ---- */
.db-cx-header {
  margin-bottom: 18px;
}

.db-cx-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--db-primary);
  font-family: 'Kanit', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
  transition: opacity var(--db-fast);
}
.db-cx-header__back:hover { opacity: 0.7; }
.db-cx-header__back i { font-size: 0.9rem; }

.db-cx-header__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.db-cx-header__main {
  flex: 1;
  min-width: 0;
}

.db-cx-header__name {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 700;
  color: var(--db-ink);
  line-height: 1.2;
  margin: 0 0 4px;
}

.db-cx-header__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-family: 'Kanit', sans-serif;
  font-size: 0.76rem;
  color: var(--db-muted);
  margin: 0;
}

.db-cx-header__info {
  color: var(--db-ink-2);
}

.db-cx-header__date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.db-cx-header__date i {
  font-size: 0.72rem;
}

.db-cx-header__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- Two-Column Layout ---- */
.db-cx-columns {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 18px;
  width: 100%;
}

.db-cx-col-main,
.db-cx-col-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---- Customer Transactions (embedded table in detail card) ---- */
.db-cx-transactions {
  min-height: 360px;
}

.db-cx-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(3, 109, 180, 0.25) transparent;
}
.db-cx-table-wrap::-webkit-scrollbar { height: 6px; }
.db-cx-table-wrap::-webkit-scrollbar-track { background: transparent; }
.db-cx-table-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(3, 109, 180, 0.3), rgba(3, 109, 180, 0.15));
  border-radius: 999px;
}

.db-cx-table-wrap .datatable-wrapper,
.db-cx-table-wrap .datatable-top,
.db-cx-table-wrap .datatable-bottom {
  display: none !important;
}

.db-cx-table-wrap table.table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Kanit', sans-serif;
  font-size: 0.78rem;
  color: var(--db-ink-2);
  background: transparent;
  border: 0 !important;
  width: 100%;
}
.db-cx-table-wrap table.table > * > * > * {
  border: 0 !important;
}

.db-cx-table-wrap thead tr {
  background: linear-gradient(180deg, rgba(3, 109, 180, 0.06) 0%, rgba(3, 109, 180, 0.03) 100%);
}
.db-cx-table-wrap thead th {
  font-family: 'Kanit', sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--db-ink);
  padding: 10px 14px;
  white-space: nowrap;
  border: 0 !important;
}
.db-cx-table-wrap thead th small {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.db-cx-table-wrap thead th:first-child { border-radius: 8px 0 0 0; }
.db-cx-table-wrap thead th:last-child { border-radius: 0 8px 0 0; }

.db-cx-table-wrap tbody tr {
  cursor: pointer;
  transition: background var(--db-fast);
}
.db-cx-table-wrap tbody tr:hover {
  background: rgba(3, 109, 180, 0.05);
}

.db-cx-table-wrap tbody td {
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(3, 109, 180, 0.06);
  font-size: 0.78rem;
  line-height: 1.5;
}
.db-cx-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .db-cx-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .db-cx-header__body {
    flex-direction: column;
    gap: 14px;
  }
  .db-cx-header__actions {
    width: 100%;
  }
  .db-cx-header__actions .db-btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 479.98px) {
  .db-cx-header__name {
    font-size: 1.1rem;
  }
}


/* ==========================================================================
   Balance Page — Tabs, Metrics, Table Toolbar
   ========================================================================== */

/* ---- Tab Navigation ---- */
.db-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--db-border);
  padding: 0 4px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.db-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--db-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--db-fast), border-color var(--db-fast);
}
.db-tabs__item:hover {
  color: var(--db-ink);
}
.db-tabs__item.is-active {
  color: var(--db-primary);
  border-bottom-color: var(--db-primary);
  font-weight: 600;
}
.db-tabs__item i {
  font-size: 0.88rem;
}
.db-tabs__body {
  min-height: 200px;
}

/* ---- Balance Metrics ---- */
.db-bal-overview {
  padding: 4px 0 0;
}
.db-bal-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.db-bal-metric {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--db-surface);
  border: 1px solid var(--db-border-soft);
  border-radius: var(--db-radius);
  transition: box-shadow var(--db-fast), border-color var(--db-fast);
}
.db-bal-metric:hover {
  border-color: var(--db-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.db-bal-metric__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 1rem;
  flex-shrink: 0;
}
.db-bal-metric__icon--primary {
  background: var(--db-primary-soft);
  color: var(--db-primary);
}
.db-bal-metric__icon--success {
  background: var(--db-success-soft, rgba(22, 163, 74, 0.1));
  color: var(--db-success);
}
.db-bal-metric__icon--warn {
  background: var(--db-warn-soft, rgba(245, 158, 11, 0.1));
  color: var(--db-warn, #f59e0b);
}
.db-bal-metric__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.db-bal-metric__label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--db-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.db-bal-metric__value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--db-ink);
  font-family: 'Fira Code', 'SF Mono', monospace;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.db-bal-metric__desc {
  font-size: 0.72rem;
  color: var(--db-muted-2);
}
.db-bal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- Table Toolbar (shared across list tables) ---- */
.db-cx-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.db-cx-table-toolbar__left {
  flex: 1;
  min-width: 0;
}
.db-cx-table-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- Empty State ---- */
.db-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  text-align: center;
}
.db-empty-state i {
  font-size: 2.2rem;
  color: var(--db-muted-2);
  opacity: 0.5;
  margin-bottom: 10px;
}
.db-empty-state p {
  font-size: 0.82rem;
  color: var(--db-muted);
  margin: 0;
}

/* ---- Row Selection Highlight ---- */
.db-row--selected {
  background-color: var(--db-primary-softer) !important;
}

/* ---- Pre block (metadata JSON) ---- */
.db-tx-card__pre {
  background: var(--db-surface-2);
  border: 1px solid var(--db-border-soft);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.78rem;
  font-family: 'Fira Code', 'SF Mono', monospace;
  color: var(--db-ink-3);
  line-height: 1.5;
  overflow-x: auto;
  margin: 4px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Accent value (green for new balance) ---- */
.db-tx-card__value--accent {
  color: var(--db-success) !important;
  font-weight: 600;
}

/* ---- Balance Page Responsive ---- */
@media (max-width: 991.98px) {
  .db-bal-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .db-tabs__item {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
  .db-bal-metric {
    padding: 14px 14px;
  }
  .db-bal-metric__value {
    font-size: 1rem;
  }
  .db-cx-table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .db-cx-table-toolbar__right {
    justify-content: flex-end;
  }
}


/* ==========================================================================
   Transfers Page — Chart Toolbar, Filter Chips, Summary
   ========================================================================== */

/* ---- Chart Toolbar ---- */
.db-tf-chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 14px;
  flex-wrap: wrap;
}
.db-tf-chart-toolbar__left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-tf-chart-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- Time Filter Chips ---- */
.db-tf-filter-group {
  display: inline-flex;
  gap: 4px;
  background: var(--db-surface-2);
  border: 1px solid var(--db-border-soft);
  border-radius: 8px;
  padding: 3px;
}
.db-tf-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--db-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--db-fast);
}
.db-tf-filter-btn:hover {
  color: var(--db-ink);
  background: rgba(3, 109, 180, 0.05);
}
.db-tf-filter-btn.is-active {
  color: var(--db-primary);
  background: var(--db-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

/* ---- Chart Summary Strip ---- */
.db-tf-chart-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 16px;
}
.db-tf-chart-summary__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--db-primary);
  font-family: 'Fira Code', 'SF Mono', monospace;
}
.db-tf-chart-summary__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--db-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Chart Canvas ---- */
.db-tf-chart-canvas-wrap {
  width: 100%;
  max-height: 370px;
}
.db-tf-chart-canvas-wrap canvas {
  width: 100% !important;
  max-height: 370px;
}

/* ---- Transfers Page Responsive ---- */
@media (max-width: 767.98px) {
  .db-tf-chart-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .db-tf-chart-toolbar__right {
    justify-content: flex-end;
  }
  .db-tf-filter-group {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Settings Page — Vertical Nav + Content Body + Option Cards
   ========================================================================== */

/* ---- Settings Vertical Navigation ---- */
.db-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  background: var(--db-primary-softer);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: 8px;
}

.db-settings-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: 'Kanit', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--db-muted);
  cursor: pointer;
  transition: background var(--db-fast), color var(--db-fast);
  text-align: left;
  width: 100%;
  white-space: nowrap;
}
.db-settings-nav__item i {
  font-size: 0.92rem;
  flex-shrink: 0;
}
.db-settings-nav__item:hover {
  background: var(--db-primary-soft);
  color: var(--db-ink);
}
.db-settings-nav__item.is-active {
  background: var(--db-primary-soft);
  color: var(--db-primary);
  font-weight: 600;
  border-left: 3px solid var(--db-primary);
  padding-left: 11px;
}

/* ---- Settings Content Body ---- */
.db-settings-body {
  flex: 1;
  padding: 4px 0 0 24px;
  min-height: 300px;
}

/* ---- Settings Section (each tab's content wrapper) ---- */
.db-settings-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Kanit', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--db-muted);
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--db-border);
}
.db-settings-section__title i {
  font-size: 0.88rem;
  color: var(--db-primary);
}
.db-settings-section__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Settings Option Card (replaces form-check mb-3) ---- */
.db-settings-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--db-fast), background var(--db-fast);
}
.db-settings-option:hover {
  border-color: rgba(3, 109, 180, 0.18);
  background: var(--db-primary-softer);
}
.db-settings-option .form-check-input {
  margin-top: 3px;
  flex-shrink: 0;
}
.db-settings-option__label {
  display: block;
  font-family: 'Kanit', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--db-ink);
  line-height: 1.3;
}
.db-settings-option__hint {
  display: block;
  font-family: 'Kanit', sans-serif;
  font-size: 0.74rem;
  color: var(--db-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* ---- Settings Alert Environment Section ---- */
.db-settings-env {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--db-border);
}
.db-settings-env:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.db-settings-env__title {
  font-family: 'Kanit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--db-primary);
}
.db-settings-env__title--live {
  color: var(--db-primary);
  border-color: var(--db-primary);
}
.db-settings-env__title--test {
  color: var(--db-warn);
  border-color: var(--db-warn);
}

/* ---- Settings Field Group (for URL / amount inputs inside settings) ---- */
.db-settings-field {
  margin-bottom: 14px;
}
.db-settings-field__label {
  display: block;
  font-family: 'Kanit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--db-muted);
  margin-bottom: 6px;
}
.db-settings-field .form-control,
.db-settings-field .form-select {
  font-family: 'Kanit', sans-serif;
  font-size: 0.84rem;
  border-radius: 8px;
  border: 1px solid var(--db-border);
  padding: 8px 12px;
  transition: border-color var(--db-fast);
}
.db-settings-field .form-control:focus,
.db-settings-field .form-select:focus {
  border-color: var(--db-primary);
  box-shadow: 0 0 0 2px rgba(3, 109, 180, 0.08);
}
.db-settings-field .input-group-text {
  font-family: 'Kanit', sans-serif;
  font-size: 0.82rem;
  border-radius: 8px 0 0 8px;
  border: 1px solid var(--db-border);
  background: var(--db-primary-softer);
  color: var(--db-muted);
}

/* ---- Settings Info Text ---- */
.db-settings-info {
  font-family: 'Kanit', sans-serif;
  font-size: 0.78rem;
  color: var(--db-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.db-settings-info a {
  color: var(--db-primary);
  text-decoration: none;
}
.db-settings-info a:hover {
  text-decoration: underline;
}

/* ---- Transfer Approval URL Item ---- */
.db-settings-url-item {
  padding: 14px 16px;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: 10px;
  margin-bottom: 12px;
}

/* ---- Settings Responsive ---- */
@media (max-width: 767.98px) {
  .db-settings-nav {
    flex-direction: row;
    overflow-x: auto;
    min-width: 0;
    gap: 4px;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .db-settings-nav__item {
    padding: 8px 12px;
    font-size: 0.76rem;
  }
  .db-settings-nav__item.is-active {
    border-left: none;
    border-bottom: 3px solid var(--db-primary);
    padding-left: 12px;
    padding-bottom: 5px;
  }
  .db-settings-body {
    padding: 16px 0 0 0;
  }
  .db-settings-option {
    padding: 10px 12px;
  }
}