/*
 * global-sidebar.css — AdminLTE 3 dark-theme override
 * ────────────────────────────────────────────────────
 * Loads AFTER admin_default.css.
 * Uses --bz-* tokens defined in global-tokens.css (single source of truth).
 * 4-color palette: Gold #F9C127 · White #FFFFFF · Black #0A0E14 · Red #ef6b6b
 * Dark theme only. Bootstrap Icons only.
 *
 * Sections:
 *   1. Base typography & dark-theme text overrides
 *   2. Layout (wrapper, content, footer)
 *   3. Top navbar (.main-header)
 *   4. Sidebar (.main-sidebar)
 *   5. Page header (.content-header)
 *   6. Cards (.card, .small-box, .info-box)
 *   7. Buttons — GOLD primary
 *   8. Forms
 *   9. Tables + DataTables (v1 + v2)
 *  10. Badges
 *  11. Alerts
 *  12. Modals
 *  13. Tabs
 *  14. Dropdowns
 *  15. Pagination
 *  16. List groups
 *  17. Select2
 *  18. SweetAlert2
 *  19. Progress bars
 *  20. Plugin dark mode (Summernote, TinyMCE, nice-select)
 *  21. Responsive tables (.bz-responsive)
 *  22. Filter popup
 *  23. Staff / Customer console sidebar
 *  24. User profile chip (topbar)
 *  25. Customer profile (R10 / R11)
 *  26. BA sidebar accordion
 *  27. Page-specific overrides
 *  28. Utilities
 *  29. Scrollbars
 *  30. Responsive / mobile
 *  31. Print
 */


/* ============================================================
   1. BASE — typography, body, dark-theme text overrides
   ============================================================ */
html, body {
  font-family: var(--bz-font-sans, 'Inter', system-ui, -apple-system, sans-serif) !important;
  background-color: var(--bz-bg-page, #0A0E14) !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark-theme text overrides — target Bootstrap/AdminLTE classes that set non-white colors.
   Replaces the old "nuclear" rule that forced color on `body *`. */
.content-wrapper,
.content-wrapper p, .content-wrapper label, .content-wrapper span,
.content-wrapper dt, .content-wrapper dd, .content-wrapper li,
.content-wrapper td, .content-wrapper th, .content-wrapper small,
.content-wrapper strong, .content-wrapper em, .content-wrapper div,
.main-header, .main-header *,
.text-muted, .text-secondary, .text-gray, .text-gray-dark,
.text-gray-500, .text-gray-600, .text-body, .text-dark, .text-black, .text-default,
.text-info-soft, .small, .form-text, .help-block,
.info-box-text, .info-box-number, .info-box-content,
.brand-text, .breadcrumb-item, .breadcrumb-item a,
.card-subtitle, .modal-title, .modal-body,
.dropdown-item, .form-control, .input-group-text,
.dataTables_info, .dataTables_filter, .dataTables_length, .dataTables_paginate,
.dataTables_wrapper *,
.table thead th, .table tbody td, .table tbody th,
.small-box .inner h3, .small-box .inner p,
.box-dash-areas .info-box-text, .box-dash-areas .info-box-number,
.box-dash-areas .info-box-content, .box-dash-areas .info-box-content *,
[class*="text-secondary"], [class*="text-gray"] {
  color: #FFFFFF !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #FFFFFF !important;
  font-family: var(--bz-font-sans, 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
h1, .h1 { font-size: 28px !important; letter-spacing: -0.02em; }
h2, .h2 { font-size: 22px !important; }
h3, .h3 { font-size: 18px !important; }
h4, .h4 { font-size: 16px !important; }
h5, .h5 { font-size: 14px !important; }
h6, .h6 { font-size: 13px !important; }

a { color: var(--bz-gold, #F9C127); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: #F9C127; text-decoration: none; }
hr { border-top-color: rgba(255,255,255,0.12) !important; }
::selection { background: rgba(249,193,39,0.25); color: #FFFFFF; }

/* Card visual lift */
.card, .small-box, .info-box {
  box-shadow: 0 4px 8px -2px rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}


/* ============================================================
   2. LAYOUT — wrapper, content area, footer
   ============================================================ */
.wrapper { min-height: 100vh; background: var(--bz-bg-page, #0A0E14); }

.content-wrapper {
  background-color: var(--bz-bg-page, #0A0E14) !important;
  color: #FFFFFF !important;
  /* navbar clearance (padding-top + min-height) owned by global-header.css */
}
.content-wrapper > .content { padding: 1px 28px 24px; }

.main-footer {
  background: var(--bz-bg-surface, #161B22) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
  padding: 14px 24px;
  font-size: 13px;
}
.main-footer a, .main-footer a:link, .main-footer a:visited {
  color: #F9C127 !important;
  text-decoration: none;
}
.main-footer a:hover { color: #F9C127 !important; text-decoration: underline; }


/* ============================================================
   3. TOP NAVBAR (.main-header)
   ============================================================ */
.main-header.navbar {
  background: var(--bz-bg-surface, #161B22) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
  padding: 10px 20px !important;
  height: var(--bz-navbar-h, 64px);
  min-height: var(--bz-navbar-h, 64px);
  gap: 8px;
}
.main-header .navbar-nav { gap: 6px; align-items: center !important; }
.main-header .navbar-nav .nav-link {
  color: #FFFFFF !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
  height: 36px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.main-header .navbar-nav .nav-link i { font-size: 15px !important; opacity: 0.85; }
.main-header .navbar-nav .nav-link:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  transform: translateY(-1px);
}

/* Hamburger — icon-only square */
.main-header .navbar-nav .nav-link[data-widget="pushmenu"],
.main-header .navbar-nav .nav-link.icon-only {
  padding: 0 !important;
  width: 36px;
  justify-content: center;
}
[data-widget="pushmenu"] {
  border-radius: 6px !important;
  width: 36px; height: 36px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
}

/* "View Site" / "View Page" — GOLD CTA */
.main-header .navbar-nav .nav-link[target="_blank"],
.main-header .navbar-nav a.nav-link[href*="://"]:not([href*=".log"]) {
  background: #F9C127 !important;
  border-color: #F9C127 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  padding: 7px 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
}
.main-header .navbar-nav .nav-link[target="_blank"] i {
  color: #000000 !important;
  opacity: 1;
  font-size: 16px !important;
}
.main-header .navbar-nav .nav-link[target="_blank"]:hover {
  background: #F9C127 !important;
  color: #000000 !important;
  transform: translateY(-1px);
}

/* User dropdown */
.main-header .navbar-nav .user-menu .nav-link,
.main-header .navbar-nav .nav-link[data-toggle="dropdown"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.main-header .navbar-badge {
  background: #F9C127 !important;
  color: #000000 !important;
  font-weight: 600;
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid var(--bz-bg-surface, #161B22);
}


/* ============================================================
   4. SIDEBAR (.main-sidebar)
   ============================================================ */
.main-sidebar,
.main-sidebar.sidebar-dark-primary,
.main-sidebar.sidebar-light-primary {
  background-color: #050810 !important;
  border-right: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow: 2px 0 8px rgba(0,0,0,0.10) !important;
  width: 250px;
  height: 100vh !important;
  overflow-y: hidden !important;
  position: fixed !important;
}

/* Sidebar scroll */
.main-sidebar .sidebar {
  padding: 8px;
  height: calc(100vh - 3.5rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: #F9C127 transparent;
}
.main-sidebar .sidebar::-webkit-scrollbar { width: 4px; }
.main-sidebar .sidebar::-webkit-scrollbar-track { background: transparent; }
.main-sidebar .sidebar::-webkit-scrollbar-thumb { background: #F9C127; border-radius: 4px; }

body.sidebar-collapse .main-sidebar { width: 64px; }

/* ALL sidebar text — light */
.main-sidebar, .main-sidebar *, .main-sidebar a, .main-sidebar p,
.main-sidebar span, .main-sidebar .nav-link, .main-sidebar .brand-text,
.main-sidebar .brand-link {
  color: #E5EAF0 !important;
}

/* Hide sidebar logout (topbar handles it) */
.nav-sidebar .nav-link[href*="auth/logout"],
.nav-sidebar .nav-link[href*="/logout"] { display: none !important; }
.nav-sidebar > .nav-item:has(.nav-link[href*="auth/logout"]) { display: none !important; }

/* Nav links */
.nav-sidebar { padding: 8px 10px !important; }
.nav-sidebar > .nav-item { margin-bottom: 2px; }
.nav-sidebar .nav-link {
  color: #E5EAF0 !important;
  background: transparent !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  margin: 1px 0;
  display: flex !important;
  align-items: center;
  gap: 0;
  position: relative;
  line-height: 1.4;
  transition: background 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
}
.nav-sidebar .nav-link:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #FFFFFF !important;
  padding-left: 14px !important;
}
.nav-sidebar > .nav-item > .nav-link > p {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  width: 100% !important;
  flex: 1;
  line-height: 1.4 !important;
}

/* Nav icons — gold by default, bright gold on hover/active */
.nav-sidebar .nav-link > i,
.nav-sidebar .nav-link > .nav-icon,
.nav-sidebar .nav-link > i.nav-icon,
.main-sidebar .nav-treeview .nav-link > i.nav-icon {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 12px !important;
  font-size: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #F9C127 !important;
  opacity: 0.85 !important;
}
.nav-sidebar .nav-link.active > i,
.nav-sidebar .nav-link.active > .nav-icon,
.nav-sidebar .nav-link:hover > i,
.nav-sidebar .nav-link:hover > .nav-icon {
  opacity: 1 !important;
  color: #F9C127 !important;
}

/* Chevron toggle — gold always */
.nav-sidebar .nav-link i.right,
.nav-sidebar .nav-link i.bz-chevron,
.nav-sidebar .nav-link .right {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: 4px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #F9C127 !important;
  background: transparent !important;
  border: none !important;
  opacity: 0.85 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  transition: transform 0.2s ease, opacity 0.15s ease, background 0.15s ease;
}
.nav-sidebar .nav-link:hover i.right,
.nav-sidebar .nav-link:hover i.bz-chevron,
.nav-sidebar .nav-link:hover .right {
  opacity: 1 !important;
  background: rgba(249,193,39,0.12) !important;
}
.nav-sidebar .nav-item.menu-open > .nav-link i.right,
.nav-sidebar .nav-item.menu-open > .nav-link i.bz-chevron,
.nav-sidebar .nav-item.menu-open > .nav-link .right {
  transform: rotate(-90deg);
  color: #F9C127 !important;
}

/* Open treeview divider */
.nav-sidebar .nav-item.menu-open > .nav-link { position: relative; }
.nav-sidebar .nav-item.menu-open > .nav-link::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 15%, rgba(255,255,255,0.45) 85%, transparent 100%);
  opacity: 0.85;
  pointer-events: none;
}
.nav-sidebar .nav-item.menu-open > .nav-treeview { margin-top: 6px !important; }

/* Treeview sub-menu */
.main-sidebar .nav-treeview { border-left: 1.5px solid rgba(255,255,255,0.10) !important; }
.nav-treeview { padding-left: 14px !important; margin-top: 2px; border-left: 1px solid rgba(255,255,255,0.08) !important; }
.nav-treeview > .nav-item > .nav-link { font-size: 13px !important; padding: 6px 10px !important; }
.main-sidebar .nav-treeview .nav-link { color: rgba(255,255,255,0.65) !important; }
.main-sidebar .nav-treeview .nav-link:hover { color: #FFFFFF !important; background: rgba(255,255,255,0.05) !important; }

/* Sidebar badges */
.nav-sidebar .nav-link .badge,
.nav-sidebar .nav-link .right.badge {
  background: rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
  font-weight: 500;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: auto;
}
.nav-sidebar .nav-link.active .badge { background: #F9C127 !important; color: #000000 !important; }

/* ACTIVE STATE — single consolidated rule */
.main-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-sidebar .nav-link.active:hover,
.main-sidebar .nav-sidebar .nav-treeview .nav-link.active,
.main-sidebar .nav-sidebar .nav-treeview .nav-link.active:hover {
  background: rgba(249,193,39,0.14) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-left: 3px solid #F9C127 !important;
  padding-left: 9px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.main-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-sidebar .nav-link.active *,
.main-sidebar .nav-sidebar .nav-link.active p,
.main-sidebar .nav-sidebar .nav-treeview .nav-link.active,
.main-sidebar .nav-sidebar .nav-treeview .nav-link.active * {
  color: #FFFFFF !important;
}

/* Brand area (logo + text) */
.main-sidebar .brand-link {
  background: #050810 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}
.main-sidebar .brand-link:hover { background: rgba(255,255,255,0.04) !important; }
.main-sidebar .brand-text {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em;
  vertical-align: middle !important;
  display: inline-block !important;
}
.main-sidebar .brand-link img.brand-image {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: #F9C127 !important;
  border: 1.5px solid rgba(249,193,39,0.4) !important;
  padding: 2px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
  float: none !important;
  object-fit: contain !important;
  opacity: 1 !important;
}
.main-sidebar .brand-link img[src=""],
.main-sidebar .brand-link img:not([src]) { display: none !important; }

/* Hide stat-tile icons (broken icon library artifacts) */
.small-box .icon, .small-box > .icon,
.box-dash-areas .info-box-icon i { display: none !important; }
.box-dash-areas .info-box-icon { width: 0 !important; min-width: 0 !important; padding: 0 !important; }
.box-dash-areas .info-box-content { margin-left: 0 !important; padding: 4px 8px !important; }


/* ============================================================
   5. PAGE HEADER (.content-header)
   ============================================================ */
.content-header { padding: 24px 28px 8px !important; }
.content-header h1, .content-header .h1 {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.breadcrumb { background: transparent !important; padding: 0 !important; margin-bottom: 0 !important; font-size: 12.5px; }
.breadcrumb-item, .breadcrumb-item a { color: #FFFFFF !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #FFFFFF !important; padding: 0 6px; }


/* ============================================================
   6. CARDS (.card, .small-box, .info-box)
   ============================================================ */
.card {
  background: var(--bz-bg-surface, #161B22) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  margin-bottom: 16px;
  color: #FFFFFF !important;
  overflow: hidden;
}
.card-header {
  background: var(--bz-bg-surface, #161B22) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 14px 20px !important;
  min-height: auto !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header .card-title, .card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: #F9C127 !important;
  letter-spacing: -0.005em;
}
/* Centered card header: the label is centered, and a single action (e.g. Back) is
   pinned to the right without shifting it. */
.card-header.bbp-centered-header { position: relative; justify-content: center; }
.card-header.bbp-centered-header .bbp-centered-header-action {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.card-tools { margin: 0 !important; }
/* Card body frames the form/content area with a SUBTLE border (design intent,
   not inherited from legacy admin_default). #f1f1f1 was a light-theme leftover
   that rendered as a bright white frame in the dark admin theme. */
.card-body { padding: 18px 20px !important; color: #FFFFFF !important; background: transparent !important; border: 1px solid var(--bz-card-border, rgba(255,255,255,0.06)); border-radius: 6px; }
.card-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 12px 20px !important;
  color: #FFFFFF !important;
  text-align: center;
}
.card.card-outline { border-top: 3px solid #F9C127 !important; }
.card.card-outline.card-danger { border-top-color: #ef6b6b !important; }

/* Neutralize filled card variants */
.card.bg-primary, .card.bg-info, .card.bg-success, .card.bg-warning,
.card.bg-danger, .card.bg-secondary, .card.bg-dark {
  background: var(--bz-bg-surface, #161B22) !important;
  color: #FFFFFF !important;
  border-top: 3px solid #F9C127 !important;
}

/* Small boxes (dashboard stat tiles) */
.small-box {
  background: var(--bz-bg-surface, #161B22) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 18px 20px !important;
  color: #FFFFFF !important;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.small-box > .inner > h3 { font-size: 28px !important; font-weight: 600 !important; color: #FFFFFF !important; margin-bottom: 4px; letter-spacing: -0.02em; }
.small-box > .inner > p { font-size: 12.5px !important; font-weight: 500 !important; color: #FFFFFF !important; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; }
.small-box .small-box-footer {
  background: transparent !important;
  color: #FFFFFF !important;
  padding: 10px 0 0 !important;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 12px;
}
.small-box.bg-info, .small-box.bg-primary, .small-box.bg-success,
.small-box.bg-warning, .small-box.bg-danger, .small-box.bg-secondary {
  background: var(--bz-bg-surface, #161B22) !important;
  color: #FFFFFF !important;
}

/* Info-box */
.info-box {
  background: var(--bz-bg-surface, #161B22) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 12px;
  color: #FFFFFF !important;
  margin-bottom: 16px;
}
.info-box .info-box-icon {
  border-radius: 6px !important;
  background: rgba(249,193,39,0.10) !important;
  color: #F9C127 !important;
  width: 50px; height: 50px;
}
.info-box .info-box-text { color: #FFFFFF !important; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.info-box .info-box-number { color: #FFFFFF !important; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }


/* ============================================================
   7. BUTTONS — GOLD primary, BLACK text
   ============================================================ */
.btn {
  font-family: var(--bz-font-sans, 'Inter', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  line-height: 1.4 !important;
  transition: all 0.15s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-shadow: none !important;
  box-shadow: none !important;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(249,193,39,0.15) !important; outline: none; }
.btn-sm { padding: 4px 10px !important; font-size: 12.5px !important; border-radius: 4px !important; }
.btn-lg { padding: 10px 20px !important; font-size: 15px !important; }
.btn-block { width: 100%; }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; }

/* Primary = GOLD bg + BLACK text */
body .btn-primary,
body .btn-primary:not(:disabled):not(.disabled),
body .btn-info,
body .btn-info:not(:disabled):not(.disabled),
body .btn-warning,
body .btn-warning:not(:disabled):not(.disabled),
body .btn-create, body .btn-create-new,
body .btn-add, body a.btn-add,
body .add_btn, body a.add_btn, body .btn.add_btn,
body button[type="submit"], body input[type="submit"],
body .card-tools a.btn:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger),
body a.btn[href*="add"]:not(.bz-page-btn),
body .btn[class*="create"]:not(.bz-page-btn) {
  background: #F9C127 !important;
  border-color: #F9C127 !important;
  color: #000000 !important;
}
body .btn-primary i, body .btn-info i, body .btn-warning i,
body .btn-create i, body .add_btn i, body button[type="submit"] i,
body .card-tools a.btn i, body a.btn[href*="add"] i {
  color: #000000 !important;
}
body .btn-primary:hover, body .btn-info:hover, body .btn-warning:hover,
body .btn-create:hover, body .add_btn:hover, body button[type="submit"]:hover,
body a.btn[href*="add"]:hover {
  background: #F9C127 !important;
  border-color: #F9C127 !important;
  color: #000000 !important;
}
body .btn-primary:active, body .btn-primary.active,
body .btn-info:active, body .btn-info.active {
  background: #F9C127 !important;
  border-color: #F9C127 !important;
  color: #000000 !important;
}

.btn-outline-primary {
  background: transparent !important;
  color: #F9C127 !important;
  border-color: #F9C127 !important;
}
.btn-outline-primary:hover { background: #F9C127 !important; color: #000000 !important; }

/* Secondary = dark surface + white border */
.btn-secondary, .btn-default, .btn-light {
  background: var(--bz-bg-surface, #161B22) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.20) !important;
}

/* Success — gold for consistency */
.btn-success {
  background: #F9C127 !important;
  color: #000000 !important;
  border-color: #F9C127 !important;
}
.btn-success:hover { background: #F9C127 !important; border-color: #F9C127 !important; color: #000000 !important; }

/* Danger — RED */
.btn-danger {
  background: #ef6b6b !important;
  color: #FFFFFF !important;
  border-color: #ef6b6b !important;
}
.btn-danger:hover { background: #d85555 !important; border-color: #d85555 !important; color: #FFFFFF !important; }
.btn-outline-danger { background: transparent !important; color: #ef6b6b !important; border-color: #ef6b6b !important; }
.btn-outline-danger:hover { background: #ef6b6b !important; color: #FFFFFF !important; }

/* Link / ghost */
.btn-link { color: #F9C127 !important; background: transparent !important; border: none !important; text-decoration: none !important; }
.btn-link:hover { color: #F9C127 !important; text-decoration: none !important; }

/* Back buttons */
body .content-wrapper a.back-btn,
body .content-wrapper a.bz-back-btn {
  background-color: rgba(255,255,255,0.05) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  font-weight: 500 !important;
}
body .content-wrapper a.back-btn:hover { background-color: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.35) !important; }


/* ============================================================
   8. FORMS
   ============================================================ */
.form-control, .form-select, select.form-control, textarea.form-control,
.select2-container--default .select2-selection--single,
.bootstrap-tagsinput {
  background-color: rgba(255,255,255,0.05) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  font-family: var(--bz-font-sans, 'Inter', sans-serif) !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  height: auto !important;
  min-height: 38px;
  line-height: 1.4;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:hover, .form-select:hover { border-color: rgba(255,255,255,0.20) !important; }
.form-control:focus, .form-select:focus, textarea.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #F9C127 !important;
  box-shadow: 0 0 0 3px rgba(249,193,39,0.15) !important;
  outline: none !important;
}
textarea.form-control { min-height: 90px; padding: 10px 12px !important; }
.form-control::placeholder { color: rgba(255,255,255,0.45) !important; }
.form-control-sm { font-size: 12.5px !important; min-height: 30px; padding: 5px 10px !important; }
.form-control-lg { font-size: 16px !important; min-height: 46px; padding: 10px 14px !important; }

.form-group { margin-bottom: 16px; }
label, .form-label, .control-label {
  display: block;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  margin-bottom: 6px !important;
}
.form-text, .help-block { color: rgba(255,255,255,0.70) !important; font-size: 12px !important; }

.input-group-text {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
}
.input-group > .form-control { border-radius: 6px !important; }

/* iCheck */
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before {
  background-color: #F9C127 !important;
  border-color: #F9C127 !important;
}
.icheck-primary > input:first-child + label::before { border-color: rgba(255,255,255,0.20) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: #F9C127; }

/* Switch toggle */
.custom-switch .custom-control-label::before { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.20) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: #F9C127 !important; border-color: #F9C127 !important; }
.custom-control.custom-switch .custom-control-label, .form-switch .form-check-label { color: #FFFFFF !important; padding-left: 4px !important; }

/* Preference items (affiliate settings) */
.prefrence-item, .preference-item { background: transparent !important; padding: 8px 12px !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,0.06) !important; }
.prefrence-item label, .preference-item label { color: #FFFFFF !important; }

/* Chrome autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0 1000px #161B22 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}


/* ============================================================
   9. TABLES + DATATABLES (v1 + v2)
   ============================================================ */
.table {
  color: #FFFFFF !important;
  background: var(--bz-bg-surface, #161B22) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.table thead th {
  background: rgba(255,255,255,0.04) !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 11px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-top: none !important;
  vertical-align: middle !important;
  text-align: center !important;
}
.table tbody td, .table tbody th {
  padding: 12px 16px !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  vertical-align: middle !important;
  color: #FFFFFF !important;
}
.table tbody tr:first-child td { border-top: none !important; }
.table tbody tr { transition: background 0.1s ease; }
.table tbody tr:hover { background: rgba(255,255,255,0.04) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: rgba(255,255,255,0.08) !important; }
.table-hover tbody tr:hover { background: rgba(255,255,255,0.04) !important; color: #FFFFFF !important; }
.table-responsive { overflow-x: auto !important; width: 100% !important; }

/* Bootstrap .table-light override for dark theme */
body .content-wrapper tr.table-light,
body .content-wrapper tr.table-light > th,
body .content-wrapper tr.table-light > td {
  background-color: rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* DataTables v1 */
.dataTables_wrapper { color: #FFFFFF !important; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: #FFFFFF !important; padding: 10px 0; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper input[type=search],
.dataTables_filter input {
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  margin-left: 8px;
  background: rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
}
.dataTables_length select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #FFFFFF !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px 10px !important;
  margin: 0 2px;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
  cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_paginate .paginate_button.current {
  background: #F9C127 !important;
  border-color: #F9C127 !important;
  color: #000000 !important;
  font-weight: 600 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
}

/* DataTables v2 (.dt-*) */
.dt-input, .dt-length .dt-input, .dt-search .dt-input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #FFFFFF !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  min-width: 200px !important;
}
select.dt-input { min-width: 70px !important; }
.dt-paging-button {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #FFFFFF !important;
  padding: 5px 11px !important;
  margin: 0 2px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}
.dt-paging-button:hover { background: rgba(255,255,255,0.12) !important; }
.dt-paging-button.current {
  background: #F9C127 !important;
  color: #000000 !important;
  border-color: #F9C127 !important;
  font-weight: 600 !important;
}
.dt-paging-button.disabled { opacity: 0.4 !important; cursor: not-allowed !important; }
.dt-length, .dt-search, .dt-info, .dt-paging { color: rgba(255,255,255,0.75) !important; padding: 8px 0 !important; }

/* DataTables wrappers fill card-body */
.card-body .dt-container,
.card-body .dt-layout-row,
.card-body .dt-layout-cell,
.card-body .dt-layout-full,
.card-body .dataTables_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.card > .card-body { width: 100% !important; max-width: 100% !important; }

/* Empty table state */
body .content-wrapper .dataTables_empty,
body .content-wrapper td.dataTables_empty,
body .content-wrapper td.dt-empty {
  color: rgba(255,255,255,0.95) !important;
  text-align: center !important;
  padding: 32px 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  background-color: transparent !important;
}


/* ============================================================
   10. BADGES
   ============================================================ */
.badge {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  line-height: 1.3 !important;
}
.badge-primary, .bg-primary.badge { background: rgba(249,193,39,0.15) !important; color: #F9C127 !important; }
.badge-secondary, .badge-default { background: rgba(255,255,255,0.06) !important; color: #FFFFFF !important; }
.badge-info { background: rgba(249,193,39,0.15) !important; color: #F9C127 !important; }
.badge-success { background: rgba(249,193,39,0.15) !important; color: #F9C127 !important; }
.badge-warning, .badge.bg-warning, .badge-soft-warning { background: rgba(249,193,39,0.18) !important; color: #F9C127 !important; border: 1px solid rgba(249,193,39,0.35) !important; }
.badge-danger { background: rgba(239,107,107,0.15) !important; color: #ef6b6b !important; }
.badge-gold { background: rgba(249,193,39,0.15) !important; color: #F9C127 !important; }
.badge-pill { border-radius: 999px !important; }

/* Soft badge variants */
.badge-warning-soft { background: rgba(249,193,39,0.18) !important; color: #F9C127 !important; border: 1px solid rgba(249,193,39,0.35) !important; }
.badge-success-soft { background: rgba(85,166,121,0.18) !important; color: #F9C127 !important; border: 1px solid rgba(85,166,121,0.35) !important; }
.badge-danger-soft { background: rgba(220,53,69,0.18) !important; color: #ef6b6b !important; border: 1px solid rgba(220,53,69,0.35) !important; }
.badge-info-soft { background: rgba(249,193,39,0.18) !important; color: #F9C127 !important; border: 1px solid rgba(249,193,39,0.35) !important; }


/* ============================================================
   11. ALERTS
   ============================================================ */
.alert {
  border-radius: 6px !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  border: 1px solid transparent !important;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.alert-info, .alert-primary { background: rgba(249,193,39,0.08) !important; color: #FFFFFF !important; border-color: rgba(249,193,39,0.20) !important; }
.alert-success { background: rgba(249,193,39,0.08) !important; color: #FFFFFF !important; border-color: #F9C127 !important; }
.alert-warning { background: rgba(249,193,39,0.08) !important; color: #FFFFFF !important; border-color: #F9C127 !important; }
.alert-danger { background: rgba(239,107,107,0.08) !important; color: #FFFFFF !important; border-color: rgba(239,107,107,0.30) !important; }
.alert-dismissible .close { padding: 12px 16px !important; color: #FFFFFF !important; opacity: 0.6; }


/* ============================================================
   12. MODALS
   ============================================================ */
.modal-content {
  background: var(--bz-bg-surface, #161B22) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
}
.modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 16px 20px !important;
}
.modal-header .modal-title { font-size: 16px !important; font-weight: 600 !important; color: #FFFFFF !important; }
.modal-header .close { color: #FFFFFF !important; opacity: 0.6; padding: 16px 20px !important; }
.modal-body { padding: 20px !important; color: #FFFFFF !important; }
.modal-footer { border-top: 1px solid rgba(255,255,255,0.08) !important; }


/* ============================================================
   13. TABS
   ============================================================ */
body .nav-tabs, body .nav-pills, body ul.nav.nav-tabs, body .card-header .nav {
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  margin-bottom: 8px !important;
}
body .nav-tabs .nav-link, body .nav-pills .nav-link {
  background: transparent !important;
  color: rgba(255,255,255,0.65) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin-bottom: -1px;
  transition: all 0.15s ease;
}
body .nav-tabs .nav-link:hover, body .nav-pills .nav-link:hover {
  color: #FFFFFF !important;
  background: transparent !important;
  border-bottom-color: rgba(249,193,39,0.40) !important;
}
body .nav-tabs .nav-link.active, body .nav-pills .nav-link.active,
body .nav-tabs li a.active, body .nav-pills li a.active,
body .nav-tabs li.active a, body .nav-pills li.active a {
  color: #F9C127 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #F9C127 !important;
  font-weight: 700 !important;
}


/* ============================================================
   14. DROPDOWNS
   ============================================================ */
.dropdown-menu {
  background: var(--bz-bg-surface, #161B22) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.40) !important;
}
.dropdown-item {
  color: #FFFFFF !important;
  padding: 7px 12px !important;
  border-radius: 4px !important;
  font-size: 13.5px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255,255,255,0.06) !important; color: #FFFFFF !important; }
.dropdown-divider { border-top-color: rgba(255,255,255,0.08) !important; margin: 4px 0 !important; }
.dropdown-header { color: #FFFFFF !important; opacity: 0.6; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px 4px !important; }


/* ============================================================
   15. PAGINATION
   ============================================================ */
.pagination { gap: 4px; }
.page-item .page-link {
  background: rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  margin: 0 !important;
  transition: all 0.15s ease;
}
.page-item .page-link:hover { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.20) !important; }
.page-item.active .page-link { background: #F9C127 !important; border-color: #F9C127 !important; color: #000000 !important; }
.page-item.disabled .page-link { opacity: 0.4; cursor: not-allowed; }


/* ============================================================
   16. LIST GROUPS
   ============================================================ */
.list-group-item {
  background: var(--bz-bg-surface, #161B22) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
}
.list-group-item.active { background: rgba(249,193,39,0.10) !important; color: #F9C127 !important; border-color: rgba(255,255,255,0.08) !important; }


/* ============================================================
   17. SELECT2
   ============================================================ */
.select2-container--default .select2-selection--single { height: 38px !important; padding: 4px 0 !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #FFFFFF !important;
  line-height: 28px !important;
  padding-left: 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; right: 8px !important; }
.select2-dropdown {
  background: var(--bz-bg-surface, #161B22) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.40) !important;
}
.select2-results__option { color: #FFFFFF !important; padding: 8px 12px !important; font-size: 13.5px !important; }
.select2-results__option--highlighted, .select2-results__option--highlighted[aria-selected] {
  background: rgba(249,193,39,0.12) !important;
  color: #F9C127 !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.05) !important;
  color: #FFFFFF !important;
  padding: 6px 10px !important;
}

body .content-wrapper select,
body .content-wrapper .select2-selection,
body .content-wrapper .select2-selection--single {
  background-color: rgba(255,255,255,0.05) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.18) !important;
}
body .content-wrapper select option {
  background-color: #1a1a1a !important;
  color: #FFFFFF !important;
}


/* ============================================================
   18. SWEETALERT2
   ============================================================ */
.swal2-popup { background: var(--bz-bg-surface, #161B22) !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.10) !important; }
.swal2-title { color: #FFFFFF !important; font-weight: 600 !important; }
.swal2-html-container, .swal2-content { color: #FFFFFF !important; }
.swal2-confirm.swal2-styled {
  background: #F9C127 !important;
  color: #000000 !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  box-shadow: none !important;
}
.swal2-cancel.swal2-styled {
  background: var(--bz-bg-surface, #161B22) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
}


/* ============================================================
   19. PROGRESS BARS
   ============================================================ */
.progress { background: rgba(255,255,255,0.06) !important; height: 8px !important; border-radius: 999px !important; overflow: hidden; }
.progress-bar { background: #F9C127 !important; }
.progress-bar.bg-danger { background: #ef6b6b !important; }


/* ============================================================
   20. PLUGIN DARK MODE (Summernote, TinyMCE, nice-select)
   ============================================================ */
/* Summernote */
.note-editor.note-frame { border: 1px solid rgba(255,255,255,0.12) !important; background: rgba(255,255,255,0.03) !important; border-radius: 8px !important; }
.note-editor .note-toolbar { background: rgba(255,255,255,0.05) !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; }
.note-editor .note-toolbar .btn { background: transparent !important; color: #FFFFFF !important; border: 1px solid transparent !important; }
.note-editor .note-toolbar .btn:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.18) !important; }
.note-editor .note-editable { background: rgba(255,255,255,0.02) !important; color: #FFFFFF !important; min-height: 200px !important; }
.note-editor .note-statusbar { background: rgba(255,255,255,0.04) !important; border-top: 1px solid rgba(255,255,255,0.08) !important; }
.note-editor .note-placeholder { color: rgba(255,255,255,0.4) !important; }

/* TinyMCE */
body .tox.tox-tinymce { background-color: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 6px !important; }
body .tox .tox-menubar, body .tox .tox-toolbar, body .tox .tox-toolbar-overlord,
body .tox .tox-edit-area, body .tox .tox-statusbar { background-color: transparent !important; background-image: none !important; }
body .tox .tox-mbtn, body .tox .tox-tbtn { color: rgba(255,255,255,0.85) !important; background-color: transparent !important; }
body .tox .tox-mbtn:hover, body .tox .tox-tbtn:hover { background-color: rgba(249,193,39,0.20) !important; color: #FFFFFF !important; }
body .tox .tox-tbtn--enabled { background-color: rgba(249,193,39,0.32) !important; color: #FFFFFF !important; }
body .tox .tox-tbtn svg { fill: rgba(255,255,255,0.85) !important; }
body .tox .tox-tbtn:hover svg, body .tox .tox-tbtn--enabled svg { fill: #FFFFFF !important; }
body .tox .tox-sidebar, body .tox .tox-view-wrap, body .tox .tox-view,
body .tox .tox-view-wrap__slot-container, body .tox .tox-sidebar-wrap,
body .tox .tox-sidebar__pane-container { background-color: rgba(255,255,255,0.04) !important; color: #FFFFFF !important; }

/* nice-select */
body .content-wrapper .nice-select, body .content-wrapper .nice-select.wide {
  background-color: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #FFFFFF !important;
}
body .content-wrapper .nice-select .list, body .nice-select .list {
  background-color: #161b22 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #FFFFFF !important;
}
body .content-wrapper .nice-select .option, body .nice-select .option {
  color: #FFFFFF !important;
  background-color: transparent !important;
}
body .content-wrapper .nice-select .option:hover,
body .content-wrapper .nice-select .option.focus,
body .content-wrapper .nice-select .option.selected.focus {
  background-color: rgba(249,193,39,0.25) !important;
  color: #FFFFFF !important;
}
body .content-wrapper .nice-select::after { border-color: #FFFFFF !important; }


/* ============================================================
   21. RESPONSIVE TABLES (.bz-responsive)
   ============================================================ */
table.bz-responsive, table.table.bz-responsive {
  table-layout: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
}

/* Badges in tables — no wrap */
table.bz-responsive .badge, table.bz-responsive .label,
table.bz-responsive .plan-pill, table.bz-responsive .status-badge,
table.bz-responsive [class*="badge"], table.bz-responsive [class*="label-"] {
  white-space: nowrap !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* # / id column compact */
table.bz-responsive thead th[data-no-col],
table.bz-responsive thead th.bz-no-col,
table.bz-responsive thead th:first-of-type:not(.bz-edit-col):not([class*="bz-tier"]) {
  width: 1%;
  white-space: nowrap !important;
  min-width: 50px !important;
  max-width: 70px;
}
/* Name columns */
table.bz-responsive thead th:nth-of-type(2),
table.bz-responsive thead th:nth-of-type(3) { min-width: 160px; }

/* Action / edit column */
table.bz-responsive .bz-edit-col, table.bz-responsive [data-action-col] {
  width: 1%;
  white-space: nowrap !important;
  text-align: right !important;
  min-width: 140px !important;
}
table.bz-responsive tbody .bz-tier-essential-edit,
table.bz-responsive tbody .actions { white-space: nowrap !important; }

/* Text wrap for long content */
table.bz-responsive tbody td { overflow-wrap: break-word !important; word-break: break-word !important; }

/* Hidden columns */
.content-wrapper table.bz-responsive .bz-hidden { display: none !important; }
.content-wrapper table.bz-responsive tbody tr.bz-filtered-out { display: none !important; }
table.bz-responsive thead th.bz-hidden,
table.bz-responsive tbody td.bz-hidden,
table.bz-responsive .bz-tier-data-low,
table.bz-responsive .bz-tier-data.bz-hidden {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.content-wrapper table.bz-responsive .bz-tier-essential,
.content-wrapper table.bz-responsive .bz-tier-essential-edit { display: table-cell !important; }
.content-wrapper table.bz-responsive .bz-tier-data:not(.bz-hidden) { display: table-cell !important; }

/* Chevron column */
.content-wrapper table.bz-responsive .bz-chev {
  width: 36px !important;
  min-width: 36px !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 8px !important;
}
.content-wrapper table.bz-responsive:not(.bz-has-hidden) .bz-chev { display: none !important; }
.content-wrapper table.bz-responsive td.bz-chev { cursor: pointer; user-select: none; }
.content-wrapper table.bz-responsive td.bz-chev::before {
  content: "\F285";
  font-family: "bootstrap-icons";
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  background: rgba(249,193,39,0.14);
  color: #F9C127;
  font-size: 10px;
  transition: transform 0.15s ease;
}
.content-wrapper table.bz-responsive tr.bz-expanded > td.bz-chev::before { transform: rotate(90deg); background: rgba(249,193,39,0.25); }
.content-wrapper table.bz-responsive td.bz-chev:hover::before { background: rgba(249,193,39,0.25); }

/* Fits-all: collapse chevron */
.content-wrapper table.bz-responsive.bz-fits-all .bz-chev {
  display: table-cell !important;
  width: 0 !important; min-width: 0 !important; max-width: 0 !important;
  padding: 0 !important; border: 0 !important; overflow: hidden !important; visibility: hidden !important;
}

/* Hide old expand-control in bz-responsive */
.content-wrapper table.bz-responsive thead th.expand-control:not(.bz-chev),
.content-wrapper table.bz-responsive tbody td.expand-control:not(.bz-chev) { display: none !important; }

/* Edit button */
.content-wrapper .bz-edit-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  background: #F9C127 !important;
  border: 1px solid #F9C127 !important;
  border-radius: 6px !important;
  color: #000000 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.content-wrapper .bz-edit-btn:hover { background: #F9C127 !important; border-color: #F9C127 !important; color: #000000 !important; }
.content-wrapper .bz-edit-btn i { font-size: 12px !important; color: #000000 !important; }

/* Detail row */
.content-wrapper table.bz-responsive tr.bz-detail { background: rgba(255,255,255,0.04); }
.content-wrapper table.bz-responsive tr.bz-detail td { padding: 14px 20px 16px 44px !important; border-top: none !important; border-bottom: 1px solid rgba(255,255,255,0.06); }
.content-wrapper .bz-detail-grid { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.content-wrapper .bz-detail-item { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.content-wrapper .bz-detail-label { font-size: 10px; text-transform: uppercase; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; font-weight: 600; }
.content-wrapper .bz-detail-value { font-size: 13px; color: #E5EAF0; }

/* Toolbar */
.content-wrapper .bz-table-toolbar.bz-narrow { display: flex; }
.content-wrapper .bz-toolbar-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
  background: transparent !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.content-wrapper .bz-toolbar-btn:hover {
  background: #F9C127 !important;
  border-color: #F9C127 !important;
  color: #000000 !important;
}
.content-wrapper .bz-toolbar-btn i { font-size: 10px; }
.content-wrapper .bz-toolbar-right { display: inline-flex; gap: 8px; margin-left: auto; }

/* Search */
.content-wrapper .bz-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.45); font-size: 11px; pointer-events: none; }
.content-wrapper .bz-search-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: #FFFFFF;
  border-radius: 6px;
  padding: 6px 12px 6px 30px;
  font-size: 12px;
  width: 220px;
  height: 32px;
  outline: none;
  transition: border-color 0.15s ease;
}
.content-wrapper .bz-search-input::placeholder { color: rgba(255,255,255,0.45); }
.content-wrapper .bz-search-input:focus { border-color: #F9C127; }

.content-wrapper .bz-search-wrap .bz-search-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important; height: 36px !important;
  flex-shrink: 0 !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
}
.content-wrapper .bz-search-wrap input.bz-search,
.content-wrapper .bz-search-wrap input[type="search"] {
  width: 0 !important; border: 0 !important; background: transparent !important;
  color: #FFFFFF !important; font-size: 13px !important; padding: 0 !important;
  outline: none !important;
  transition: width 0.25s ease, padding 0.25s ease !important;
}
.content-wrapper .bz-search-wrap.bz-search-open input.bz-search,
.content-wrapper .bz-search-wrap.bz-search-open input[type="search"] {
  width: calc(100% - 36px) !important;
  padding: 0 8px 0 36px !important;
}

/* Sort indicators */
.content-wrapper table.bz-responsive thead th.bz-sortable { user-select: none; cursor: pointer; }
.content-wrapper table.bz-responsive thead th.bz-sortable:hover { background: rgba(255,255,255,0.06) !important; }
.content-wrapper table.bz-responsive .bz-th-inner { display: inline-flex; align-items: center; gap: 6px; }
.content-wrapper table.bz-responsive .bz-sort-icon { font-size: 10px; opacity: 0.45; transition: opacity 0.15s ease; }
.content-wrapper table.bz-responsive thead th.bz-sortable:hover .bz-sort-icon { opacity: 0.85; }
.content-wrapper table.bz-responsive thead th.bz-sorted .bz-sort-icon { opacity: 1; color: #F9C127; }

/* Row action buttons in tables — gold for primary */
body table.bz-responsive tbody .actions a.btn-primary,
body table.bz-responsive tbody .actions a.btn-info,
body table.bz-responsive tbody .bz-tier-essential-edit a.btn-primary,
body table.bz-responsive tbody .bz-tier-essential-edit a.btn-info {
  background: #F9C127 !important;
  border-color: #F9C127 !important;
  color: #000000 !important;
  font-weight: 700 !important;
}
body table.bz-responsive tbody .actions a.btn-primary i,
body table.bz-responsive tbody .actions a.btn-info i { color: #000000 !important; }

/* Outline/neutral row buttons */
body table.bz-responsive tbody .actions a.btn[class*="btn-light"],
body table.bz-responsive tbody .actions a.btn[class*="btn-outline"],
body table.bz-responsive tbody .actions a.btn[class*="btn-secondary"] {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
  color: #FFFFFF !important;
}
body table.bz-responsive tbody .actions a.btn[class*="btn-light"]:hover,
body table.bz-responsive tbody .actions a.btn[class*="btn-outline"]:hover {
  background: #F9C127 !important;
  border-color: #F9C127 !important;
  color: #000000 !important;
}

/* BZ pagination */
.bz-page-btn.current {
  background: #F9C127 !important;
  color: #000000 !important;
  border-color: #F9C127 !important;
  font-weight: 700 !important;
}
.bz-page-btn:not(.current):not(.disabled) {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
  color: #FFFFFF !important;
}
.bz-page-btn:hover:not(.current):not(.disabled) {
  background: #F9C127 !important;
  border-color: #F9C127 !important;
  color: #000000 !important;
}
.bz-page-btn.disabled { opacity: 0.4 !important; cursor: not-allowed !important; }
.bz-page-size { color: #FFFFFF !important; }
.bz-page-size option { background: #161B22 !important; color: #FFFFFF !important; }

/* Summary stats */
.bz-summary-stat strong { color: #F9C127 !important; font-weight: 700 !important; }
.bz-table-title, .page-title, h1.text-warning { color: #F9C127 !important; }


/* ============================================================
   22. FILTER POPUP
   ============================================================ */
.filter_popup, .filter-popup,
[class*="filter_popup"], [class*="filter-popup"] {
  background: #161B22 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45) !important;
  padding: 20px !important;
  /* When the filter is taller than the viewport, IT scrolls internally — the
     page must never scroll (that would drag the fixed header out of view).
     Offset ≈ the popup's top (it opens below the ~190px header) + a margin, so
     the whole panel incl. Submit stays within the viewport. */
  max-height: calc(100vh - 210px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.filter_popup *, .filter-popup * { color: #FFFFFF !important; }
.filter_popup select, .filter_popup input[type="text"],
.filter_popup input[type="search"], .filter_popup .form-control {
  background: rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
}
.filter_popup select option { background: #161B22 !important; color: #FFFFFF !important; }
.filter_popup button[type="submit"], .filter_popup .btn-submit, .filter_popup input[type="submit"] {
  background: #F9C127 !important;
  color: #000000 !important;
  border: 1px solid #F9C127 !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  width: 100% !important;
  margin-top: 8px !important;
}
.filter_popup .form-group, .filter_popup .field { margin-bottom: 14px !important; }


/* ============================================================
   23. STAFF / CUSTOMER CONSOLE — card-based side menu
   ============================================================ */
.navbar-vertical.sub { display: block !important; background: transparent !important; }
.navbar-vertical .card {
  background: #050810 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
  margin-bottom: 24px !important;
}
.navbar-vertical .card-body { padding: 20px 14px !important; }

.navbar-vertical .avatar-circle, .navbar-vertical .avatar-md {
  width: 72px !important; height: 72px !important;
  border-radius: 50% !important;
  background-color: #F9C127 !important;
  background-size: cover !important;
  background-position: center !important;
  border: 2px solid #F9C127 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  margin: 0 auto 12px !important;
}
.navbar-vertical .card-title { color: #FFFFFF !important; font-weight: 700 !important; font-size: 16px !important; margin-bottom: 4px !important; text-align: center !important; }
.navbar-vertical .card-text { color: rgba(255,255,255,0.65) !important; font-size: 12px !important; text-align: center !important; margin-bottom: 0 !important; }

.navbar-vertical .nav-sub, .navbar-vertical .nav-tabs.custo {
  border-bottom: none !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin-top: 16px !important;
}
.navbar-vertical .nav-sub > .nav-item, .navbar-vertical .nav-tabs.custo > .nav-item { width: 100% !important; margin-bottom: 2px !important; }
.navbar-vertical .nav-sub .nav-link, .navbar-vertical .nav-tabs.custo .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 12px !important;
  color: #E5EAF0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  border-left: 3px solid transparent !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}
.navbar-vertical .nav-sub .nav-link:hover, .navbar-vertical .nav-tabs.custo .nav-link:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #FFFFFF !important;
}
.navbar-vertical .nav-sub .nav-link.active, .navbar-vertical .nav-tabs.custo .nav-link.active {
  background: rgba(249,193,39,0.14) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-left: 3px solid #F9C127 !important;
}
.navbar-vertical .nav-sub .nav-link i, .navbar-vertical .nav-tabs.custo .nav-link i {
  width: 18px !important; height: 18px !important; font-size: 16px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  color: #E5EAF0 !important; opacity: 0.85 !important; margin: 0 !important; flex-shrink: 0 !important;
}
.navbar-vertical .nav-sub .nav-link.active i, .navbar-vertical .nav-tabs.custo .nav-link.active i { color: #FFFFFF !important; opacity: 1 !important; }
.navbar-vertical .nav-sub .nav-link span, .navbar-vertical .nav-tabs.custo .nav-link span { flex: 1 !important; color: inherit !important; }

body.staff-page, body.customer-page { background: var(--bz-bg-page, #0A0E14) !important; }


/* ============================================================
   24. USER PROFILE CHIP (topbar)
   ============================================================ */
.main-header .user-log {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.main-header .user-log:hover { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.18) !important; }
.main-header .user-log > i {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  background: #F9C127 !important;
  color: #000000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.main-header .user-log .bz-user-chip {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.15 !important;
  gap: 1px !important;
}
.main-header .user-log .bz-user-name {
  font-size: 13px !important; font-weight: 600 !important;
  color: #FFFFFF !important; letter-spacing: -0.01em !important;
}
.main-header .user-log .bz-user-role {
  font-size: 10.5px !important; font-weight: 500 !important;
  color: #F9C127 !important; text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}


/* ============================================================
   25. CUSTOMER PROFILE (R10 / R11)
   ============================================================ */
/* R10 — Personal Info form */
.bz-profile { background: var(--bz-bg-page, #0A0E14); color: #FFFFFF; padding: 24px clamp(12px,3vw,28px); border-radius: 8px; }
.bz-profile * { box-sizing: border-box; }
.bz-profile__header { display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: var(--bz-bg-surface, #161B22); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px 8px 0 0; border-bottom: 0; }
.bz-profile__title { color: #F9C127; font-size: 1.25rem; font-weight: 700; margin: 0; }
.bz-profile__form { background: var(--bz-bg-surface, #161B22); border: 1px solid rgba(255,255,255,0.06); border-top: 0; border-radius: 0 0 8px 8px; padding: 28px clamp(16px,4vw,36px); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.bz-profile__avatar-wrap { display: flex; justify-content: center; margin: 0 0 32px; }
.bz-profile__avatar { position: relative; width: 132px; height: 132px; border-radius: 50%; background-color: #F9C127; background-size: cover; background-position: center; border: 4px solid #F9C127; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.bz-profile__avatar-edit { position: absolute; right: 4px; bottom: 4px; width: 36px; height: 36px; border-radius: 50%; background: #F9C127; color: #000000; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: transform 120ms ease; }
.bz-profile__avatar-edit:hover { transform: scale(1.06); }
.bz-profile__avatar-edit i { font-size: 1rem; }
.bz-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px clamp(16px,3vw,28px); }
.bz-field { display: flex; flex-direction: column; gap: 6px; }
.bz-field--full { grid-column: 1 / -1; }
.bz-field__label { color: #FFFFFF; font-size: 0.875rem; font-weight: 500; }
.bz-field__input { background: var(--bz-bg-page, #0A0E14); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 11px 14px; font-size: 0.95rem; font-family: inherit; line-height: 1.4; transition: border-color 120ms ease, box-shadow 120ms ease; }
.bz-field__input::placeholder { color: rgba(255,255,255,0.45); }
.bz-field__input:focus { outline: 0; border-color: #F9C127; box-shadow: 0 0 0 3px rgba(249,193,39,0.20); }
.bz-profile__actions { display: flex; justify-content: flex-start; gap: 12px; margin-top: 28px; }

/* R11 — Customer shell layout */
.bz-shell { background: var(--bz-bg-page, #0A0E14); color: #FFFFFF; min-height: 100vh; display: flex; flex-direction: column; }
.bz-shell *, .bz-shell *::before, .bz-shell *::after { box-sizing: border-box; }
.bz-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 24px; max-width: 1400px; width: 100%; margin: 24px auto; padding: 0 clamp(16px,3vw,32px); align-items: start; }
.bz-sidebar { background: #050810; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.20); padding: 20px 12px; position: sticky; top: 24px; }
.bz-sidebar__profile { text-align: center; padding: 6px 8px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px; }
.bz-sidebar__avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px; background-color: #F9C127; background-size: cover; background-position: center; border: 3px solid #F9C127; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.bz-sidebar__name { color: #FFFFFF; font-weight: 700; font-size: 0.95rem; line-height: 1.3; word-break: break-word; }
.bz-sidebar__email { color: rgba(255,255,255,0.65); font-size: 0.8rem; margin-top: 4px; word-break: break-all; }
.bz-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.bz-sidebar__section { color: #F9C127; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 14px 6px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.bz-sidebar__section:first-of-type { border-top: 0; padding-top: 4px; margin-top: 0; }
.bz-nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: #FFFFFF; text-decoration: none; border-radius: 6px; font-size: 0.92rem; font-weight: 500; transition: background 120ms ease, color 120ms ease; }
.bz-nav-link i { width: 18px; text-align: center; font-size: 1rem; opacity: 0.92; }
.bz-nav-link:hover { background: rgba(249,193,39,0.12); color: #F9C127; }
.bz-nav-link--active { background: rgba(249,193,39,0.18); color: #F9C127; font-weight: 700; box-shadow: inset 3px 0 0 #F9C127; padding-left: 17px; }
.bz-nav-link--danger:hover { background: rgba(220,53,69,0.15); color: #ef6b6b; }
.bz-main { min-width: 0; }

@media (max-width: 720px) { .bz-field-grid { grid-template-columns: 1fr; } .bz-profile__form { padding: 20px 16px; } }
@media (max-width: 960px) { .bz-layout { grid-template-columns: 1fr; } .bz-sidebar { position: static; } }


/* ============================================================
   26. BA SIDEBAR ACCORDION
   ============================================================ */
.main-sidebar .nav-sidebar > li.nav-item > a.nav-link {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  margin: 2px 8px;
  border-radius: 8px;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.main-sidebar .nav-sidebar > li.nav-item > a.nav-link:hover {
  background: rgba(249,193,39,0.06);
  color: #F9C127;
}
.main-sidebar .nav-sidebar > li.nav-item > a.nav-link:hover i.nav-icon,
.main-sidebar .nav-sidebar > li.nav-item > a.nav-link:hover i.right { color: #F9C127; }
.main-sidebar .nav-sidebar > li.nav-item > a.nav-link.active,
.main-sidebar .nav-sidebar > li.nav-item.active > a.nav-link {
  border-color: #F9C127;
  background: rgba(249,193,39,0.08);
  color: #F9C127;
  box-shadow: 0 0 0 1px rgba(249,193,39,0.25);
}
.main-sidebar .nav-sidebar > li.nav-item > a.nav-link.active i.nav-icon,
.main-sidebar .nav-sidebar > li.nav-item.active > a.nav-link i.nav-icon { color: #F9C127; }
.main-sidebar .nav-sidebar > li.nav-item > a.nav-link > i.right {
  color: #F9C127;
  transition: transform .2s ease, opacity .15s ease;
  font-size: 12px;
  opacity: 0.85;
}
.main-sidebar .nav-sidebar > li.nav-item.has-treeview.menu-open > a.nav-link > i.right {
  transform: rotate(-90deg);
  opacity: 1;
}
.main-sidebar .nav-sidebar > li.nav-item > a.nav-link > i.nav-icon {
  margin-right: 10px;
  font-size: 16px;
  width: 18px;
  text-align: center;
  color: #F9C127;
  opacity: 0.85;
  transition: opacity .15s ease;
}
.main-sidebar .nav-sidebar ul.nav-treeview {
  padding: 4px 0 8px 0;
  margin: 0 8px 4px 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 0 0 8px 8px;
}
.main-sidebar .nav-sidebar ul.nav-treeview > li.nav-item > a.nav-link {
  display: flex;
  align-items: center;
  padding: 7px 12px 7px 30px;
  margin: 1px 6px;
  border-radius: 6px;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.main-sidebar .nav-sidebar ul.nav-treeview > li.nav-item > a.nav-link > i.nav-icon {
  margin-right: 10px;
  font-size: 14px;
  width: 16px;
  text-align: center;
  color: #F9C127;
  opacity: 0.75;
}
.main-sidebar .nav-sidebar ul.nav-treeview > li.nav-item > a.nav-link:hover {
  background: rgba(249,193,39,0.06);
  color: #F9C127;
}
.main-sidebar .nav-sidebar ul.nav-treeview > li.nav-item > a.nav-link:hover i.nav-icon { color: #F9C127; }
.main-sidebar .nav-sidebar ul.nav-treeview > li.nav-item > a.nav-link.active,
.main-sidebar .nav-sidebar ul.nav-treeview > li.nav-item.active > a.nav-link {
  background: rgba(249,193,39,0.10);
  color: #F9C127;
  border-color: #F9C127;
}
.main-sidebar .nav-sidebar ul.nav-treeview > li.nav-item > a.nav-link.active i.nav-icon,
.main-sidebar .nav-sidebar ul.nav-treeview > li.nav-item.active > a.nav-link i.nav-icon { color: #F9C127; }


/* ============================================================
   27. PAGE-SPECIFIC OVERRIDES
   ============================================================ */
/* Page headings — GOLD + BOLD + centered */
body .content-wrapper h1, body .content-wrapper h2,
body .content-wrapper h3, body .content-wrapper h4,
body .content-wrapper .page-title,
body .content-header h1, body .content-header h2 {
  color: #F9C127 !important;
  font-weight: 700 !important;
  text-align: center !important;
}
body .content-wrapper h1 i, body .content-wrapper h2 i,
body .content-wrapper h3 i, body .content-wrapper h4 i { color: #F9C127 !important; }

/* Card / table titles */
body .card-header h1, body .card-header h2, body .card-header h3,
body .card-header h4, body .card-title {
  color: #F9C127 !important;
  font-weight: 700 !important;
}

/* Page subtitle */
body .content-wrapper p.text-muted, body .content-wrapper .page-subtitle {
  color: rgba(255,255,255,0.85) !important;
  font-size: 14px !important;
  text-align: center !important;
}
body .content-wrapper .text-muted { color: rgba(255,255,255,0.85) !important; }

/* Greeting name */
.sad-page-title .sad-greet-name { color: #F9C127 !important; font-weight: 700 !important; }

/* Pricing cards dark */
body .content-wrapper .pricing-card, body .content-wrapper .plan-card,
body .content-wrapper .package-card, body .content-wrapper .pricing-table,
body .content-wrapper .pricing-table.purple,
body .content-wrapper [class*="pricing"][class*="card"],
body .content-wrapper [class*="package"][class*="card"] {
  background-color: rgba(255,255,255,0.03) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
body .content-wrapper .pricing-card *, body .content-wrapper .plan-card *,
body .content-wrapper .package-card *, body .content-wrapper .pricing-table * {
  background-color: transparent !important;
  color: #FFFFFF !important;
}

/* Delete Business button — RED */
.content-wrapper a.del-business-btn, .content-wrapper .btn-danger.del-business-btn {
  background-color: #ef6b6b !important;
  border-color: #ef6b6b !important;
  color: #FFFFFF !important;
}
.content-wrapper a.del-business-btn:hover { background-color: #d85555 !important; border-color: #d85555 !important; }
.content-wrapper a.del-business-btn i { color: #FFFFFF !important; }

/* Callouts dark */
body .content-wrapper .callout, body .content-wrapper .callout-default,
body .content-wrapper .callout-info, body .content-wrapper .callout-warning,
body .content-wrapper .callout-success, body .content-wrapper .callout-danger {
  background-color: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
}
body .content-wrapper .callout-info { border-left: 4px solid #F9C127 !important; }
body .content-wrapper .callout-warning { border-left: 4px solid #F9C127 !important; }
body .content-wrapper .callout-success { border-left: 4px solid #F9C127 !important; }
body .content-wrapper .callout-danger { border-left: 4px solid #ef6b6b !important; }

/* img-thumbnail dark */
body .content-wrapper .img-thumbnail, body .content-wrapper img.img-thumbnail {
  background-color: rgba(255,255,255,0.05) !important;
  border: 1px dashed rgba(255,255,255,0.18) !important;
  padding: 8px !important;
}

/* Bulk delete — hidden by default */
body .content-wrapper #bulk_delete_btn,
body .content-wrapper button[id*=bulk_delete],
body .content-wrapper button[id*=delete_selected] { display: none !important; }
body .content-wrapper #bulk_delete_btn.is-visible,
body .content-wrapper button[id*=bulk_delete].is-visible,
body .content-wrapper button[id*=delete_selected].is-visible { display: inline-flex !important; }

/* Hide broken images */
body .content-wrapper img:not([src]),
body .content-wrapper img[src=""],
body .content-wrapper img[src*="undefined"] { display: none !important; }

/* Payment section */
body .content-wrapper [class*="payment"] h3,
body .content-wrapper [class*="payment"] h4,
body .content-wrapper [class*="payment"] h5,
body .content-wrapper [class*="payment"] strong { color: #FFFFFF !important; font-weight: 600 !important; }

/* Primary links */
body .content-wrapper a.text-primary,
body .content-wrapper a[href*="mailto"] { color: #F9C127 !important; text-decoration: none !important; }

/* Force full-width for settings forms */
body .content-wrapper .card-body > .row > .col-md-6:only-child { flex: 0 0 100% !important; max-width: 100% !important; }
.affiliate_main_setting .col-md-6, .affiliate-settings .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }


/* ============================================================
   28. UTILITIES
   ============================================================ */
.text-primary { color: #F9C127 !important; }
.text-info { color: #F9C127 !important; }
.text-success { color: #F9C127 !important; }
.text-warning { color: #F9C127 !important; }
.text-danger { color: #ef6b6b !important; }
.text-gold { color: #F9C127 !important; }

.bg-primary-soft { background: rgba(249,193,39,0.10) !important; }
.bg-info-soft { background: rgba(249,193,39,0.10) !important; }
.bg-success-soft { background: rgba(249,193,39,0.10) !important; }
.bg-warning-soft { background: rgba(249,193,39,0.10) !important; }
.bg-danger-soft { background: rgba(239,107,107,0.10) !important; }


/* ============================================================
   29. SCROLLBARS
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; border: 2px solid var(--bz-bg-page, #0A0E14); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }


/* ============================================================
   30. RESPONSIVE / MOBILE
   ============================================================ */
/* ── < 992 px — sidebar goes off-canvas; content fills full width ── */
@media (max-width: 991.98px) {
  /* Sidebar hidden off-screen. Starts BELOW the navbar so the header is never covered. */
  .main-sidebar {
    top: var(--bz-navbar-h, 64px) !important;
    height: calc(100vh - var(--bz-navbar-h, 64px)) !important;
    left: -250px !important;
    margin-left: 0 !important;
    box-shadow: none !important;
    transition: left 0.25s ease-in-out;
    z-index: 1037;
  }
  body.sidebar-open .main-sidebar {
    left: 0 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.40) !important;
  }
  /* Content default — no indent */
  .content-wrapper,
  .main-footer {
    margin-left: 0;
    transition: margin-left 0.25s ease-in-out;
  }
  /* Sidebar open — push content right so sidebar never overlaps.
     Width is capped to remaining viewport so no horizontal scrollbar appears
     and position:fixed navbar is never affected by overflow tricks. */
  body.sidebar-open .content-wrapper {
    margin-left: 250px;
    width: calc(100vw - 250px);
    min-width: 0;
  }
  body.sidebar-open .main-footer {
    margin-left: 250px;
  }
  /* No dim overlay needed — content pushes cleanly */
  #sidebar-overlay { display: none !important; }
  /* Header stays full width and fixed */
  .main-header {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .content-wrapper > .content { padding: 12px !important; }
  .main-header.navbar { padding: 0 12px !important; }
  .card-body { padding: 14px !important; }
  .content-header { padding: 16px !important; }
}
@media (max-width: 600px) {
  .content-wrapper .bz-table-toolbar { flex-wrap: wrap !important; gap: 8px !important; }
  .content-wrapper .bz-search-wrap { flex: 1 1 100%; }
  .content-wrapper .bz-search-input { width: 100%; }
  .content-wrapper table.bz-responsive thead th,
  .content-wrapper table.bz-responsive tbody td { padding: 8px 6px !important; font-size: 12px !important; }
  .content-wrapper .bz-edit-btn { padding: 5px 10px !important; font-size: 11px !important; }
}
@media (max-width: 1199px) {
  .content-wrapper .container-fluid > .row > [class*="col-md-"]:not(.col-md-12),
  .content-wrapper .container-fluid > .row > [class*="col-lg-"]:not(.col-lg-12) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   31. PRINT
   ============================================================ */
@media print {
  body { background: white !important; color: black !important; }
  .main-sidebar, .main-header, .main-footer, .no-print { display: none !important; }
  .content-wrapper { margin-left: 0 !important; }
  .card { border: 1px solid #999 !important; box-shadow: none !important; }
}

/* ── Plan-gated (locked) feature items ──────────────────────────────
   A sidebar feature not included in the BA's plan renders via
   bz_feature_nav_item() as a muted item with a lock/"Upgrade" badge that
   links to the Plan & Billing upgrade tab (not to the feature itself). */
.sidebar .bz-feat-locked > .nav-link { opacity: .55; }
.sidebar .bz-feat-locked > .nav-link:hover { opacity: .85; }
.sidebar .bz-feat-locked .bz-feat-lock-badge { font-size: 9px; padding: 2px 6px; font-weight: 600; }