/* ============================================================
   BBI PREMIUM THEME — 2026 Black & White SaaS Admin Panel
   v3.0 — Ultra-strong overrides for legacy admin-theme.css
   ============================================================ */

/* ─── FONT IMPORT ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --c-black:   #09090B;
  --c-950:     #0F0F11;
  --c-900:     #18181B;
  --c-800:     #27272A;
  --c-700:     #3F3F46;
  --c-600:     #52525B;
  --c-500:     #71717A;
  --c-400:     #A1A1AA;
  --c-300:     #D4D4D8;
  --c-200:     #E4E4E7;
  --c-150:     #EBEBED;
  --c-100:     #F4F4F5;
  --c-50:      #FAFAFA;
  --c-white:   #FFFFFF;

  --green:     #16A34A;
  --green-bg:  #F0FDF4;
  --green-bd:  #BBF7D0;
  --amber:     #D97706;
  --amber-bg:  #FFFBEB;
  --amber-bd:  #FDE68A;
  --red:       #DC2626;
  --red-bg:    #FEF2F2;
  --red-bd:    #FECACA;
  --blue:      #2563EB;
  --blue-bg:   #EFF6FF;
  --blue-bd:   #BFDBFE;

  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-full: 9999px;

  --sh-xs:  0 1px 2px rgba(0,0,0,.05);
  --sh-sm:  0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-md:  0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --sh-lg:  0 8px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
  --sh-xl:  0 20px 40px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.05);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── BASE RESET ─────────────────────────────────────────── */
html, body {
  min-height: 100vh !important;
}
html body {
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--c-black) !important;
  background-color: var(--c-100) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--c-100); }
::-webkit-scrollbar-thumb { background: var(--c-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-400); }
::selection { background: var(--c-black); color: var(--c-white); }

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  color: var(--c-black) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
}
html body h1 { font-size: 1.875rem !important; }
html body h2 { font-size: 1.5rem !important; }
html body h3 { font-size: 1.25rem !important; }
html body h4 { font-size: 1.0625rem !important; }
html body h5 { font-size: 0.9375rem !important; }
html body h6 { font-size: 0.8125rem !important; }

html body p { color: var(--c-600); margin-bottom: 1rem; }
html body a { color: var(--c-black); text-decoration: none; transition: opacity .15s; }
html body a:hover { color: var(--c-700); text-decoration: none; }
html body strong, html body b { font-weight: 600 !important; }

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      NAVBAR / TOP HEADER                                    */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body #header,
html body header#header,
html body .navbar.navbar-fixed {
  background: var(--c-black) !important;
  background-color: var(--c-black) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 4px 16px rgba(0,0,0,0.3) !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 1.5rem !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1040 !important;
}

/* Logo */
html body .navbar-brand-logo {
  height: 30px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
}
html body .navbar-brand { padding: 0 !important; margin-right: 1.5rem !important; }
html body .navbar-brand-wrapper { padding: 0 !important; }

/* Top nav links */
html body .navbar-nav .navbar-nav-link,
html body .navbar-nav .nav-link {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 0.4375rem 0.6875rem !important;
  border-radius: var(--r-sm) !important;
  transition: all .15s !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
}
html body .navbar-nav .navbar-nav-link:hover,
html body .navbar-nav .nav-link:hover,
html body .navbar-nav .hs-mega-menu-opened > .navbar-nav-link {
  color: #fff !important;
  background: rgba(255,255,255,0.09) !important;
}
html body .navbar-nav .nav-icon { color: rgba(255,255,255,0.4) !important; margin-right: 5px; }

/* Top nav: keep Tio icon font (Inter overrides would otherwise show tofu squares) */
html body #header [class^="tio-"],
html body #header [class*=" tio-"] {
  font-family: 'The-Icon-of' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Hamburger — hide on desktop (navbar-expand-xl = 1200px+) */
html body .navbar-toggler {
  color: rgba(255,255,255,0.7) !important;
  border-color: rgba(255,255,255,0.18) !important;
  border-radius: var(--r-sm) !important;
}
@media (min-width: 1200px) {
  html body .navbar-toggler {
    display: none !important;
  }
}

/* ─── DROPDOWN MENUS ─────────────────────────────────────── */
html body .hs-sub-menu.dropdown-menu,
html body .dropdown-menu,
html body .dropdown-unfold {
  background: var(--c-white) !important;
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-xl) !important;
  padding: 0.375rem !important;
  min-width: 200px !important;
}
/* Space below invoker for account / unfold menus only — NOT hs-sub-menu (gap kills hover) */
html body #header .dropdown-unfold,
html body #header .dropdown-menu:not(.hs-sub-menu) {
  margin-top: 6px !important;
}
/* Nav sub-menus: flush to bar + tall z-index + bridge so cursor path stays “inside” menu */
@media (min-width: 1200px) {
  html body #header.navbar,
  html body #header .js-mega-menu,
  html body #header .navbar-nav-wrap,
  html body #header .navbar-collapse,
  html body #header .navbar-body {
    overflow: visible !important;
  }
  html body #header .js-mega-menu {
    position: relative !important;
    z-index: 1060 !important;
  }
  html body #header .hs-has-sub-menu {
    position: relative !important;
  }
  html body #header .hs-sub-menu.dropdown-menu {
    margin-top: 0 !important;
    padding-top: 0.5rem !important;
    z-index: 1070 !important;
  }
  html body #header .hs-sub-menu.dropdown-menu::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -12px !important;
    height: 12px !important;
    background: transparent !important;
  }
}
html body .dropdown-item {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--c-700) !important;
  padding: 0.4375rem 0.75rem !important;
  border-radius: var(--r-sm) !important;
  transition: all .12s !important;
  line-height: 1.5 !important;
}
html body .dropdown-item:hover,
html body .dropdown-item:focus {
  background: var(--c-100) !important;
  color: var(--c-black) !important;
}
html body .dropdown-divider { border-color: var(--c-150) !important; margin: 0.3rem 0 !important; }
html body .dropdown-item-text { padding: 0.5rem 0.75rem !important; }
html body .dropdown-item-text .card-title {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: var(--c-black) !important;
}
html body .dropdown-item-toggle::after {
  content: '›';
  float: right;
  color: var(--c-400);
  font-weight: 400;
}

/* Avatar */
html body .avatar { border-radius: var(--r-full) !important; }
html body .avatar-sm { width: 2rem !important; height: 2rem !important; }
html body .avatar-img { border-radius: var(--r-full) !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body .avatar-status-success { background: var(--green) !important; }
html body .navbar-dropdown-account-wrapper .avatar {
  border: 2px solid rgba(255,255,255,0.2) !important;
}

/* Top bar profile — larger, vertically centered in 56px navbar */
html body #header .navbar-nav-wrap-content-right > .navbar-nav {
  min-height: 56px !important;
}
html body #header .navbar-nav-wrap-content-right .nav-item.bbi-nav-account {
  display: flex !important;
  align-items: center !important;
}
html body #header .navbar-nav-wrap-content-right .nav-item.bbi-nav-account .hs-unfold {
  display: flex !important;
  align-items: center !important;
}
html body #header .navbar-dropdown-account-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.25rem 0.125rem !important;
  line-height: 0 !important;
  border-radius: var(--r-md) !important;
}
html body #header .navbar-dropdown-account-wrapper:hover,
html body #header .navbar-dropdown-account-wrapper:focus {
  background: rgba(255,255,255,0.08) !important;
}
html body #header .navbar-dropdown-account-wrapper .avatar.avatar-sm {
  position: relative !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  flex-shrink: 0 !important;
}
html body #header .navbar-dropdown-account-wrapper .avatar-sm-status {
  width: 0.625rem !important;
  height: 0.625rem !important;
  min-width: 0.625rem !important;
  min-height: 0.625rem !important;
  border: 2px solid var(--c-black) !important;
  bottom: 0 !important;
  right: 0 !important;
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      MAIN LAYOUT                                            */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body #content,
html body main#content,
html body .main {
  background-color: var(--c-100) !important;
  padding-top: 0.4rem !important;
  padding-bottom: 3.5rem !important;
  position: relative !important;
  z-index: 0 !important;
}

/* Table-based layout — stack top-level rows so list pages match full-width shell */
html body table.main-table {
  width: 100% !important;
  background: transparent !important;
  border-collapse: collapse !important;
}
html body > table.main-table {
  display: block !important;
  max-width: 100% !important;
}
html body > table.main-table > tbody {
  display: block !important;
  width: 100% !important;
}
html body > table.main-table > tbody > tr {
  display: block !important;
  width: 100% !important;
}
html body > table.main-table > tbody > tr > td {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html body > table.main-table > tbody > tr > td#header-block {
  padding: 0 !important;
}
html body > table.main-table > tbody > tr > td.footer {
  padding: 1.25rem 2rem !important;
  background: var(--c-white) !important;
  border-top: 1px solid var(--c-200) !important;
}
html body td.left-pannel {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  vertical-align: top !important;
  background: var(--c-white) !important;
  border-right: 1px solid var(--c-200) !important;
  padding: 0 !important;
}
html body td.right-pannel {
  vertical-align: top !important;
  background: var(--c-100) !important;
  padding: 1.75rem 2rem !important;
}

/* Container */
html body .container-fluid {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* Full-bleed list/detail shell — same horizontal use as legacy pages + add_product_form_fullwidth */
html body .container-fluid.bbi-shell-fullwidth {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  box-sizing: border-box !important;
}

/* Page header */
html body .page-header { margin-bottom: 1.5rem !important; padding-bottom: 1rem !important; border-bottom: 1px solid var(--c-200) !important; }
html body .page-header-title {
  font-family: var(--font) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--c-black) !important;
  letter-spacing: -0.03em !important;
  text-align: left !important;
}

/* Shared modern page wrapper for migrated list pages */
html body .bbi-page-wrap {
  padding-top: 0.75rem !important;
  padding-bottom: 3rem !important;
}
html body .bbi-page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  margin-bottom: 1rem !important;
}
html body .bbi-page-header h4 {
  margin: 0 !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--c-black) !important;
  letter-spacing: -0.03em !important;
}
html body .bbi-page-header .bbi-breadcrumb {
  font-size: 0.75rem !important;
  color: var(--c-500) !important;
}
html body .bbi-page-header .bbi-breadcrumb a {
  color: var(--c-500) !important;
  text-decoration: none !important;
}
html body .bbi-page-header .bbi-breadcrumb span {
  margin: 0 0.3rem !important;
}

/* Breadcrumb inside main — beats legacy/global link colours (e.g. green visited) */
html body main .bbi-page-header .bbi-breadcrumb,
html body main .container-fluid > .bbi-page-header .bbi-breadcrumb {
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  color: var(--c-500) !important;
}
html body main .bbi-page-header .bbi-breadcrumb a,
html body main .container-fluid > .bbi-page-header .bbi-breadcrumb a {
  color: var(--c-600) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
html body main .bbi-page-header .bbi-breadcrumb a:hover,
html body main .container-fluid > .bbi-page-header .bbi-breadcrumb a:hover {
  color: var(--c-black) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
html body main .bbi-page-header .bbi-breadcrumb span,
html body main .container-fluid > .bbi-page-header .bbi-breadcrumb span {
  color: var(--c-400) !important;
  margin: 0 0.3rem !important;
}

/* PS_Pagination strip inside list card header */
html body .bbi-pagination-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.35rem !important;
  font-size: 0.8125rem !important;
  color: var(--c-600) !important;
  max-width: 100% !important;
}
html body .bbi-pagination-wrap strong {
  font-weight: 500 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem !important;
}
html body .bbi-pagination-wrap a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.3rem 0.55rem !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--c-200) !important;
  background: var(--c-white) !important;
  color: var(--c-700) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
}
html body .bbi-pagination-wrap a:hover {
  background: var(--c-100) !important;
  color: var(--c-black) !important;
  border-color: var(--c-300) !important;
}
html body .bbi-table-card {
  background: var(--c-white) !important;
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  overflow: hidden !important;
}
html body .bbi-table-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid var(--c-100) !important;
}
html body .bbi-table-card-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--c-black) !important;
}
/* Card header title row (matches product-list.php markup) */
html body .bbi-table-card-header .bbi-table-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--c-black) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}
html body .bbi-table-card-body {
  padding: 1rem 1.25rem 1.25rem !important;
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      SIDEBAR                                                */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body #navmenu-v,
html body ul#navmenu-v {
  list-style: none !important;
  padding: 1rem 0.625rem !important;
  margin: 0 !important;
  background: var(--c-white) !important;
}
html body #navmenu-v li { margin-bottom: 1px !important; }
html body #navmenu-v > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--c-600) !important;
  border-radius: var(--r-sm) !important;
  transition: all .12s !important;
  text-decoration: none !important;
}
html body #navmenu-v > li > a:hover {
  background: var(--c-100) !important;
  color: var(--c-black) !important;
}
html body #navmenu-v ul { list-style: none !important; padding: 0.125rem 0 0.25rem 1.25rem !important; margin: 0 !important; }
html body #navmenu-v ul li > a {
  display: block !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--c-500) !important;
  border-radius: var(--r-sm) !important;
  transition: all .12s !important;
  text-decoration: none !important;
}
html body #navmenu-v ul li > a:hover {
  background: var(--c-100) !important;
  color: var(--c-black) !important;
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      CARDS                                                  */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .card {
  background-color: var(--c-white) !important;
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  transition: box-shadow .2s, transform .2s !important;
  overflow: hidden !important;
}
html body .card:hover,
html body .card-hover-shadow:hover {
  box-shadow: var(--sh-lg) !important;
  transform: translateY(-2px) !important;
}

html body .card-header {
  background: var(--c-white) !important;
  border-bottom: 1px solid var(--c-100) !important;
  padding: 1rem 1.25rem !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
}
html body .card-body { padding: 1.25rem !important; }
html body .card-footer {
  background: var(--c-50) !important;
  border-top: 1px solid var(--c-100) !important;
  padding: 0.875rem 1.25rem !important;
}

/* Card metric title (big numbers) */
html body .card-title.h2,
html body .card-title {
  font-family: var(--font) !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: var(--c-black) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  margin-bottom: 0.25rem !important;
}
html body .card-subtitle {
  font-family: var(--font) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  color: var(--c-400) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.625rem !important;
}

/* KPI metric cards — current month (black top accent) */
html body .kpi-card-current {
  border: 1px solid var(--c-200) !important;
  border-top: 3px solid var(--c-black) !important;
}
/* KPI metric cards — last month (black top accent) */
html body .kpi-card-last {
  border: 1px solid var(--c-200) !important;
  border-top: 3px solid var(--c-black) !important;
}
/* Keep KPI value color consistent across all dashboard cards */
html body .kpi-card-current .card-body > div,
html body .kpi-card-last .card-body > div {
  color: var(--c-black) !important;
}

/* Kill ALL colored left borders — replace with single black accent */
html body .card-border-left {
  border-left: 3px solid var(--c-black) !important;
  border-top: 1px solid var(--c-200) !important;
  border-right: 1px solid var(--c-200) !important;
  border-bottom: 1px solid var(--c-200) !important;
}
html body .card-border-left.border-primary,
html body .card-border-left.border-success,
html body .card-border-left.border-warning,
html body .card-border-left.border-danger,
html body .card-border-left.border-info {
  border-left: 3px solid var(--c-black) !important;
}

/* Kill .border-success .border-primary etc on cards */
html body .card.border-success,
html body .card.border-primary,
html body .card.border-warning,
html body .card.border-danger,
html body .card.border-info,
html body a.card.border-success,
html body a.card.border-primary {
  border: 1px solid var(--c-200) !important;
  border-top: 3px solid var(--c-black) !important;
}

/* Shadow overrides */
html body .shadow-soft,
html body .shadow-sm { box-shadow: var(--sh-sm) !important; }
html body .shadow-lg { box-shadow: var(--sh-lg) !important; }

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      BUTTONS                                                */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .btn {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  padding: 0.5rem 1.125rem !important;
  border-radius: var(--r-md) !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  cursor: pointer !important;
  transition: all .15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
html body .btn:focus, html body .btn:focus-visible {
  outline: 2px solid var(--c-400) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Primary */
html body .btn-primary,
html body .btn-primary:not(:disabled):not(.disabled) {
  background: var(--c-black) !important;
  border-color: var(--c-black) !important;
  color: var(--c-white) !important;
}
html body .btn-primary:hover {
  background: var(--c-900) !important;
  border-color: var(--c-900) !important;
  color: var(--c-white) !important;
  box-shadow: var(--sh-md) !important;
}

/* Secondary */
html body .btn-secondary {
  background: var(--c-white) !important;
  border-color: var(--c-200) !important;
  color: var(--c-700) !important;
}
html body .btn-secondary:hover {
  background: var(--c-100) !important;
  border-color: var(--c-300) !important;
  color: var(--c-black) !important;
}

/* Success */
html body .btn-success {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
}
html body .btn-success:hover { background: #15803D !important; border-color: #15803D !important; }

/* Danger */
html body .btn-danger {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}
html body .btn-danger:hover { background: #B91C1C !important; }

/* Warning */
html body .btn-warning {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #fff !important;
}

/* Outline Primary */
html body .btn-outline-primary,
html body .btn-outline-dark {
  background: transparent !important;
  border-color: var(--c-black) !important;
  color: var(--c-black) !important;
}
html body .btn-outline-primary:hover,
html body .btn-outline-dark:hover {
  background: var(--c-black) !important;
  color: #fff !important;
}

/* Ghost */
html body .btn-ghost-secondary,
html body .btn-ghost-primary {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--c-500) !important;
}
html body .btn-ghost-secondary:hover,
html body .btn-ghost-primary:hover {
  background: var(--c-100) !important;
  color: var(--c-black) !important;
}

/* Soft variants */
html body .btn-soft-primary {
  background: var(--c-100) !important;
  border-color: transparent !important;
  color: var(--c-black) !important;
}
html body .btn-soft-primary:hover { background: var(--c-200) !important; }
html body .btn-soft-success { background: var(--green-bg) !important; border-color: transparent !important; color: var(--green) !important; }
html body .btn-soft-danger  { background: var(--red-bg) !important; border-color: transparent !important; color: var(--red) !important; }
html body .btn-soft-warning { background: var(--amber-bg) !important; border-color: transparent !important; color: var(--amber) !important; }

/* Sizes */
html body .btn-xs { font-size: 0.6875rem !important; padding: 0.25rem 0.5625rem !important; border-radius: var(--r-xs) !important; }
html body .btn-sm { font-size: 0.75rem !important; padding: 0.3125rem 0.75rem !important; border-radius: var(--r-sm) !important; }
html body .btn-lg { font-size: 0.9375rem !important; padding: 0.6875rem 1.5rem !important; border-radius: var(--r-lg) !important; }

/* Legacy submit */
html body input[type="submit"],
html body input[type="button"] {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: var(--r-md) !important;
  background: var(--c-black) !important;
  color: var(--c-white) !important;
  border: 1.5px solid var(--c-black) !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
html body input[type="submit"]:hover { background: var(--c-900) !important; }

html body .link-button {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  color: var(--c-black) !important;
  font-weight: 500 !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      FORMS & INPUTS                                         */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body label,
html body .col-form-label {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--c-800) !important;
  margin-bottom: 0.375rem !important;
  display: block !important;
}
html body label.error {
  color: var(--red) !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
}

html body .form-control,
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="number"],
html body input[type="tel"],
html body input[type="url"],
html body input[type="search"],
html body input[type="date"],
html body input[type="datetime-local"],
html body input[type="time"],
html body select,
html body textarea {
  font-family: var(--font) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--c-black) !important;
  background-color: var(--c-white) !important;
  border: 1.5px solid var(--c-200) !important;
  border-radius: var(--r-md) !important;
  padding: 0.5625rem 0.875rem !important;
  height: auto !important;
  min-height: 40px !important;
  width: 100% !important;
  transition: border-color .15s, box-shadow .15s !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

/* One-row search (global .form-control { width:100% } breaks Bootstrap .input-group without this) */
html body .input-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}
html body .input-group-prepend,
html body .input-group-append {
  display: flex !important;
  flex-shrink: 0 !important;
}
html body .input-group .form-control,
html body .input-group input[type="search"],
html body .input-group input[type="text"] {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Standalone inline search bar (no reliance on BS input-group version) */
html body .bbi-inline-search {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 1.5px solid var(--c-200) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  background: var(--c-white) !important;
  box-sizing: border-box !important;
}
html body .bbi-inline-search__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 1rem !important;
  background: var(--c-50) !important;
  color: var(--c-500) !important;
  flex-shrink: 0 !important;
  border-right: 1px solid var(--c-200) !important;
  font-size: 1rem !important;
}
html body .bbi-inline-search__input.form-control,
html body .bbi-inline-search__input {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  max-width: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 44px !important;
}
html body .bbi-inline-search__input.form-control:focus,
html body .bbi-inline-search__input:focus {
  box-shadow: inset 0 0 0 1px var(--c-black) !important;
  outline: none !important;
}
html body .bbi-inline-search__btn {
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
html body .form-control:focus,
html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="password"]:focus,
html body input[type="number"]:focus,
html body input[type="search"]:focus,
html body input[type="date"]:focus,
html body select:focus,
html body textarea:focus {
  border-color: var(--c-black) !important;
  box-shadow: 0 0 0 3px rgba(9,9,11,.08) !important;
  background-color: var(--c-white) !important;
}
html body input::placeholder,
html body textarea::placeholder,
html body .form-control::placeholder {
  color: var(--c-400) !important;
  font-weight: 400 !important;
}
html body textarea { min-height: 100px !important; resize: vertical !important; }
html body input[type="checkbox"],
html body input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border: 1.5px solid var(--c-300) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  accent-color: var(--c-black) !important;
  vertical-align: middle !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}
html body .form-group { margin-bottom: 1.25rem !important; }

/* Select arrow */
html body select.form-control,
html body select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2371717A' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  padding-right: 2.25rem !important;
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      TABLES                                                 */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .table {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  color: var(--c-700) !important;
  margin-bottom: 0 !important;
  border-collapse: collapse !important;
}
html body .table th,
html body .table thead th {
  font-family: var(--font) !important;
  background: var(--c-50) !important;
  color: var(--c-400) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 2px solid var(--c-200) !important;
  border-top: none !important;
  white-space: nowrap !important;
}
html body .table td {
  padding: 0.8125rem 1rem !important;
  border-bottom: 1px solid var(--c-100) !important;
  border-top: none !important;
  vertical-align: middle !important;
  color: var(--c-700) !important;
}
html body .table-hover tbody tr:hover td {
  background: var(--c-50) !important;
}
html body .table tbody tr:last-child td { border-bottom: none !important; }

/* DataTables */
html body table.dataTable {
  border-collapse: collapse !important;
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
}
html body table.dataTable thead th {
  font-family: var(--font) !important;
  background: var(--c-50) !important;
  color: var(--c-400) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 2px solid var(--c-200) !important;
  border-top: none !important;
}
html body table.dataTable thead th.sorting_asc,
html body table.dataTable thead th.sorting_desc {
  background: var(--c-100) !important;
}
html body table.dataTable td {
  padding: 0.8125rem 1rem !important;
  border-bottom: 1px solid var(--c-100) !important;
  border-top: none !important;
  vertical-align: middle !important;
  color: var(--c-700) !important;
}
html body table.dataTable tbody tr:hover td {
  background: var(--c-50) !important;
}

/* DataTables column filter inputs */
html body table.dataTable thead tr:nth-child(2) th {
  background: var(--c-white) !important;
  padding: 0.375rem 0.5rem !important;
  border-bottom: 1px solid var(--c-200) !important;
}
html body table.dataTable thead tr:nth-child(2) th input,
html body table.dataTable thead tr:nth-child(2) input[type="text"] {
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  font-family: var(--font) !important;
  font-size: 0.75rem !important;
  color: var(--c-black) !important;
  background: var(--c-50) !important;
  border: 1.5px solid var(--c-200) !important;
  border-radius: var(--r-sm) !important;
  padding: 0 0.5rem !important;
  box-sizing: border-box !important;
  transition: border-color .15s !important;
  outline: none !important;
}
html body table.dataTable thead tr:nth-child(2) th input:focus {
  border-color: var(--c-black) !important;
  background: var(--c-white) !important;
  box-shadow: 0 0 0 2px rgba(9,9,11,.07) !important;
}

/* DataTables controls */
html body .dataTables_wrapper {
  background: var(--c-white) !important;
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-lg) !important;
  padding: 1.25rem !important;
  box-shadow: var(--sh-sm) !important;
}

/* If a DataTable is already inside a BBI card, don't double-card it */
html body .bbi-table-card .bbi-table-card-body .dataTables_wrapper,
html body .bbi-table-card .bbi-table-card-body div[id$="_wrapper"].dataTables_wrapper,
html body .bbi-table-card .bbi-table-card-body .dataTables_wrapper.no-footer {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Some DT skins add extra panel borders */
html body .bbi-table-card .bbi-table-card-body .dataTables_wrapper .row,
html body .bbi-table-card .bbi-table-card-body .dataTables_wrapper .dataTables_length,
html body .bbi-table-card .bbi-table-card-body .dataTables_wrapper .dataTables_filter {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html body .dataTables_wrapper .dataTables_length select,
html body .dataTables_wrapper .dataTables_filter input {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  border: 1.5px solid var(--c-200) !important;
  border-radius: var(--r-md) !important;
  padding: 0.375rem 0.75rem !important;
  color: var(--c-black) !important;
  height: auto !important;
  min-height: 36px !important;
  background: var(--c-white) !important;
}
html body .dataTables_wrapper .dataTables_filter input { padding-right: 0.75rem !important; }

/* DataTables filter: keep "Search:" + input on one row (theme sets input[type=search] width:100%) */
html body .dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  margin-bottom: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}
html body .dataTables_wrapper .dataTables_filter input[type="search"],
html body .dataTables_wrapper .dataTables_filter input[type="text"] {
  width: 12rem !important;
  min-width: 8rem !important;
  max-width: 20rem !important;
  flex: 0 0 auto !important;
}

/* Toolbar row: export buttons + search on one line (display:flex on .dt-buttons was full-width block) */
html body .dataTables_wrapper .dataTables_length {
  float: left !important;
  margin: 0 1rem 0.75rem 0 !important;
}

/* Keep "Show [select] entries" on one line */
html body .dataTables_wrapper .dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  margin-bottom: 0 !important;
}
html body .dataTables_wrapper .dataTables_length select {
  width: auto !important;
  min-width: 4.5rem !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
html body .dataTables_wrapper .dataTables_filter {
  float: right !important;
  margin: 0 0 0.75rem 0 !important;
  text-align: right !important;
  clear: none !important;
  width: auto !important;
  max-width: min(22rem, 100%) !important;
}
html body .dataTables_wrapper table.dataTable {
  clear: both !important;
}

html body .dataTables_wrapper .dataTables_info {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  color: var(--c-400) !important;
  padding-top: 0.75rem !important;
}
html body .dataTables_wrapper .dataTables_paginate { padding-top: 0.75rem !important; }
html body .dataTables_wrapper .dataTables_paginate .paginate_button {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  border-radius: var(--r-sm) !important;
  padding: 0.3125rem 0.625rem !important;
  color: var(--c-600) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  background: transparent !important;
}
html body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--c-100) !important;
  border-color: var(--c-200) !important;
  color: var(--c-black) !important;
}
html body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--c-black) !important;
  border-color: var(--c-black) !important;
  color: #fff !important;
}
html body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--c-300) !important;
  cursor: default !important;
}

/* DT Export buttons — inline-flex + float so filter stays on same row as DataTables expects */
html body .dt-buttons {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  float: left !important;
  clear: none !important;
  margin: 0 1rem 0.75rem 0 !important;
  max-width: calc(100% - 14rem) !important;
}
html body .dt-button,
html body .dt-buttons .btn {
  font-family: var(--font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.3125rem 0.75rem !important;
  border-radius: var(--r-sm) !important;
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-200) !important;
  color: var(--c-700) !important;
  cursor: pointer !important;
  transition: all .12s !important;
}
html body .dt-button:hover,
html body .dt-buttons .btn:hover {
  background: var(--c-100) !important;
  border-color: var(--c-300) !important;
  color: var(--c-black) !important;
}

@media (max-width: 520px) {
  html body .dt-buttons,
  html body .dataTables_wrapper .dataTables_filter,
  html body .dataTables_wrapper .dataTables_length {
    float: none !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body .dataTables_wrapper .dataTables_filter {
    text-align: left !important;
  }
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      BADGES                                                 */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .badge {
  font-family: var(--font) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  padding: 0.275em 0.625em !important;
  border-radius: var(--r-full) !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
}
html body .badge-primary, html body .badge-dark { background: var(--c-black) !important; color: #fff !important; }
html body .badge-secondary { background: var(--c-100) !important; color: var(--c-600) !important; border: 1px solid var(--c-200) !important; }
html body .badge-success, html body .badge-soft-success { background: var(--green-bg) !important; color: var(--green) !important; border: 1px solid var(--green-bd) !important; }
html body .badge-warning, html body .badge-soft-warning { background: var(--amber-bg) !important; color: var(--amber) !important; border: 1px solid var(--amber-bd) !important; }
html body .badge-danger,  html body .badge-soft-danger  { background: var(--red-bg) !important; color: var(--red) !important; border: 1px solid var(--red-bd) !important; }
html body .badge-info,    html body .badge-soft-info    { background: var(--blue-bg) !important; color: var(--blue) !important; border: 1px solid var(--blue-bd) !important; }

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      ALERTS                                                 */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .alert {
  font-family: var(--font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.875rem 1rem !important;
  border-radius: var(--r-md) !important;
  border-width: 1px !important;
}
html body .alert-success { background: var(--green-bg) !important; border-color: var(--green-bd) !important; color: #166534 !important; }
html body .alert-warning { background: var(--amber-bg) !important; border-color: var(--amber-bd) !important; color: #92400E !important; }
html body .alert-danger  { background: var(--red-bg) !important;   border-color: var(--red-bd) !important;   color: #991B1B !important; }
html body .alert-info    { background: var(--blue-bg) !important;  border-color: var(--blue-bd) !important;  color: #1E40AF !important; }

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      MODALS                                                 */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .modal-content {
  background: var(--c-white) !important;
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-xl) !important;
  overflow: hidden !important;
}
html body .modal-header {
  background: var(--c-white) !important;
  border-bottom: 1px solid var(--c-100) !important;
  padding: 1.125rem 1.5rem !important;
}
html body .modal-title {
  font-family: var(--font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--c-black) !important;
}
html body .modal-body { padding: 1.5rem !important; }
html body .modal-footer {
  background: var(--c-50) !important;
  border-top: 1px solid var(--c-100) !important;
  padding: 1rem 1.5rem !important;
}
html body .modal-backdrop.show { opacity: 0.45 !important; }
html body .close {
  font-size: 1.375rem !important;
  color: var(--c-400) !important;
  opacity: 1 !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  padding: 0.25rem !important;
  transition: color .15s !important;
}
html body .close:hover { color: var(--c-black) !important; }

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      PAGINATION                                             */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .pagination { gap: 0.25rem !important; margin-bottom: 0 !important; }
html body .page-item .page-link {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--c-600) !important;
  background: var(--c-white) !important;
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-sm) !important;
  padding: 0.375rem 0.75rem !important;
  min-width: 36px !important;
  text-align: center !important;
  transition: all .12s !important;
}
html body .page-item .page-link:hover {
  background: var(--c-100) !important;
  border-color: var(--c-300) !important;
  color: var(--c-black) !important;
}
html body .page-item.active .page-link {
  background: var(--c-black) !important;
  border-color: var(--c-black) !important;
  color: #fff !important;
}
html body .page-item.disabled .page-link { color: var(--c-300) !important; pointer-events: none !important; }

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      TABS & NAV                                             */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .nav-tabs {
  border-bottom: 2px solid var(--c-200) !important;
  gap: 0.125rem !important;
}
html body .nav-tabs .nav-link {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--c-500) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0.625rem 1rem !important;
  margin-bottom: -2px !important;
  transition: color .12s !important;
  background: transparent !important;
}
html body .nav-tabs .nav-link:hover { color: var(--c-black) !important; }
html body .nav-tabs .nav-link.active {
  color: var(--c-black) !important;
  border-bottom-color: var(--c-black) !important;
  background: transparent !important;
}
html body .nav-segment {
  background: var(--c-100) !important;
  border-radius: var(--r-md) !important;
  padding: 0.25rem !important;
}
html body .nav-segment .nav-link {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  color: var(--c-600) !important;
  padding: 0.375rem 0.875rem !important;
  border-radius: var(--r-sm) !important;
  border: none !important;
}
html body .nav-segment .nav-link.active {
  background: var(--c-white) !important;
  color: var(--c-black) !important;
  box-shadow: var(--sh-xs) !important;
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      FOOTER                                                 */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .footer {
  background: var(--c-white) !important;
  border-top: 1px solid var(--c-200) !important;
  padding: 0.875rem 2rem !important;
  font-family: var(--font) !important;
  font-size: 0.75rem !important;
  color: var(--c-400) !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99 !important;
}
html body .footer p { color: var(--c-400) !important; margin-bottom: 0 !important; }

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      HR                                                     */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body hr {
  border: none !important;
  border-top: 1px solid var(--c-200) !important;
  margin: 1.5rem 0 !important;
  opacity: 1 !important;
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      UTILITY OVERRIDES                                      */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .text-muted    { color: var(--c-500) !important; }
html body .text-primary  { color: var(--c-black) !important; }
html body .text-success  { color: var(--green) !important; }
html body .text-danger   { color: var(--red) !important; }
html body .text-warning  { color: var(--amber) !important; }
html body .text-info     { color: var(--blue) !important; }

html body .bg-primary  { background: var(--c-black) !important; }
html body .bg-success  { background: var(--green) !important; }
html body .bg-warning  { background: var(--amber) !important; }
html body .bg-danger   { background: var(--red) !important; }
html body .bg-light    { background: var(--c-50) !important; }
html body .bg-white    { background: var(--c-white) !important; }
html body .bg-dark     { background: var(--c-black) !important; }

html body .border-primary  { border-color: var(--c-black) !important; }
html body .border-success  { border-color: var(--green) !important; }
html body .border-danger   { border-color: var(--red) !important; }
html body .border          { border-color: var(--c-200) !important; }

html body .rounded    { border-radius: var(--r-md) !important; }
html body .rounded-lg { border-radius: var(--r-lg) !important; }

html body .shadow-soft { box-shadow: var(--sh-sm) !important; }
html body .shadow-lg   { box-shadow: var(--sh-lg) !important; }

/* Kill ALL blue/colored HSCore specific elements */
html body .card-border-left::before { display: none !important; }
html body [class*="border-primary"] { border-color: var(--c-black) !important; }
html body [style*="color: #377dff"],
html body [style*="color:#377dff"]   { color: var(--c-black) !important; }
html body [style*="background-color: #377dff"],
html body [style*="background:#377dff"] { background: var(--c-black) !important; }

/* Legend indicators */
html body .legend-indicator { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: var(--r-full) !important; margin-right: 4px !important; }
html body .legend-indicator.bg-primary { background: var(--c-black) !important; }
html body .legend-indicator.bg-info    { background: var(--c-400) !important; }
html body .legend-indicator.bg-success { background: var(--green) !important; }

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      JQUERY UI                                              */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .ui-dialog {
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-xl) !important;
  font-family: var(--font) !important;
  overflow: hidden !important;
}
html body .ui-dialog-titlebar {
  background: var(--c-black) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 0.875rem 1.25rem !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
}
html body .ui-dialog-titlebar-close { color: rgba(255,255,255,0.7) !important; }
html body .ui-dialog-content {
  font-family: var(--font) !important;
  font-size: 0.875rem !important;
  color: var(--c-700) !important;
  padding: 1.5rem !important;
}
html body .ui-dialog-buttonpane {
  background: var(--c-50) !important;
  border-top: 1px solid var(--c-100) !important;
  padding: 0.875rem 1.25rem !important;
}
html body .ui-button, html body .ui-widget input.ui-button {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  border-radius: var(--r-md) !important;
  padding: 0.5rem 1.125rem !important;
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-200) !important;
  color: var(--c-700) !important;
  cursor: pointer !important;
  transition: all .12s !important;
}
html body .ui-button:hover { background: var(--c-100) !important; color: var(--c-black) !important; }
html body .ui-widget-content {
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font) !important;
  font-size: 0.875rem !important;
  color: var(--c-700) !important;
  background: var(--c-white) !important;
}
html body .ui-autocomplete {
  background: var(--c-white) !important;
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 0.375rem !important;
  font-size: 0.8125rem !important;
  z-index: 9999 !important;
}
html body .ui-menu-item-wrapper {
  padding: 0.4375rem 0.75rem !important;
  border-radius: var(--r-sm) !important;
  color: var(--c-700) !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
}
html body .ui-state-active, html body .ui-widget-content .ui-state-active {
  background: var(--c-100) !important;
  border: none !important;
  color: var(--c-black) !important;
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      TOOLTIPS & POPOVERS                                    */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .tooltip .tooltip-inner {
  background: var(--c-black) !important;
  font-family: var(--font) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  padding: 0.3125rem 0.625rem !important;
}
html body .tooltip .arrow::before { border-top-color: var(--c-black) !important; }
html body .popover {
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      SELECT2                                                */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .select2-container--default .select2-selection--single,
html body .select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--c-200) !important;
  border-radius: var(--r-md) !important;
  height: 40px !important;
  font-family: var(--font) !important;
  font-size: 0.875rem !important;
  background: var(--c-white) !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  color: var(--c-black) !important;
  padding-left: 0.875rem !important;
  font-family: var(--font) !important;
}
html body .select2-container--default.select2-container--focus .select2-selection--single,
html body .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--c-black) !important;
  box-shadow: 0 0 0 3px rgba(9,9,11,.08) !important;
}
html body .select2-dropdown {
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
  font-family: var(--font) !important;
}
html body .select2-results__option {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  padding: 0.4375rem 0.75rem !important;
  color: var(--c-700) !important;
}
html body .select2-results__option--highlighted { background: var(--c-100) !important; color: var(--c-black) !important; }
html body .select2-results__option[aria-selected=true] { background: var(--c-50) !important; }

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      BREADCRUMB                                             */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0.5rem !important;
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
}
html body .breadcrumb-item { color: var(--c-500) !important; }
html body .breadcrumb-item a { color: var(--c-600) !important; }
html body .breadcrumb-item.active { color: var(--c-black) !important; font-weight: 500 !important; }
html body .breadcrumb-item + .breadcrumb-item::before { color: var(--c-300) !important; }

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      DROPZONE                                               */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body .dropzone {
  border: 2px dashed var(--c-200) !important;
  border-radius: var(--r-lg) !important;
  background: var(--c-50) !important;
  padding: 2.5rem 2rem !important;
  text-align: center !important;
  transition: all .2s !important;
}
html body .dropzone:hover, html body .dropzone.dz-drag-hover {
  border-color: var(--c-black) !important;
  background: var(--c-100) !important;
}
html body .dropzone .dz-message { font-family: var(--font) !important; font-size: 0.875rem !important; color: var(--c-500) !important; }

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      PRINT                                                  */
/* ─── ═══════════════════════════════════════════ ─────────── */
@media print {
  html body { background: #fff !important; font-family: var(--font) !important; }
  html body #header, html body .footer, html body td.left-pannel { display: none !important; }
  html body .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      LOGIN PAGE                                             */
/* ─── ═══════════════════════════════════════════ ─────────── */
html body.login-page {
  background: var(--c-black) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 1.5rem !important;
}
html body.login-page::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ─── ═══════════════════════════════════════════ ─────────── */
/*      RESPONSIVE                                             */
/* ─── ═══════════════════════════════════════════ ─────────── */
@media (max-width: 1200px) {
  html body .container-fluid { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  html body .container-fluid.bbi-shell-fullwidth {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  html body td.right-pannel  { padding: 1.25rem 1.5rem !important; }
}

@media (max-width: 992px) {
  html body .container-fluid { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  html body .container-fluid.bbi-shell-fullwidth {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  html body #header.navbar   { padding: 0 1rem !important; }
  html body .navbar-body {
    background: var(--c-900) !important;
    padding: 0.75rem !important;
    border-radius: var(--r-md) !important;
    margin-top: 0.5rem !important;
  }
  html body td.left-pannel { display: none !important; }
  html body td.right-pannel { padding: 1rem !important; }
  html body .hs-sub-menu.dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: var(--c-800) !important;
  }
  html body .hs-sub-menu .dropdown-item { color: rgba(255,255,255,0.75) !important; }
  html body .hs-sub-menu .dropdown-item:hover { background: rgba(255,255,255,0.07) !important; color: #fff !important; }
}

/* ─── GLOBAL LIST PAGE LOOK (legacy list harmonization) ─── */
html body .heading h1,
html body .box-header .box-title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--c-black) !important;
  margin: 0 !important;
}

html body .heading small {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--c-500) !important;
}

html body td.right-pannel table[width="100%"] {
  width: 100% !important;
}

html body #tabs-box,
html body .tabs-panel {
  background: transparent !important;
}

html body .tabs-panel > table[style*="background:#000"],
html body .tabs-panel > table[style*="background:#000000"] {
  background: var(--c-white) !important;
  border: 1px solid var(--c-200) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
}

html body td.grid-heading {
  background: var(--c-50) !important;
  color: var(--c-600) !important;
  font-family: var(--font) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--c-200) !important;
  padding: 0.62rem 0.75rem !important;
}

html body td.grid-label {
  background: var(--c-white) !important;
  color: var(--c-900) !important;
  font-family: var(--font) !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid var(--c-100) !important;
  padding: 0.62rem 0.75rem !important;
}

html body td.grid-label a {
  color: var(--blue) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

html body td.grid-label a:hover {
  color: #1e40af !important;
}

html body td.right-pannel div[align="right"] a,
html body td.right-pannel .text-right a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  border: 1px solid var(--c-200) !important;
  background: var(--c-white) !important;
  border-radius: var(--r-md) !important;
  padding: 0.42rem 0.8rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--c-700) !important;
}

html body td.right-pannel div[align="right"] a:hover,
html body td.right-pannel .text-right a:hover {
  background: var(--c-50) !important;
  color: var(--c-black) !important;
  border-color: var(--c-300) !important;
}

html body .right-pagination,
html body div[style*="text-align:right"] {
  font-size: 0.78rem !important;
  color: var(--c-500) !important;
}

@media (max-width: 768px) {
  html body .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }
  html body .container-fluid.bbi-shell-fullwidth {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  html body .page-header-title { font-size: 1.125rem !important; }
  html body .dataTables_wrapper { padding: 0.875rem !important; border-radius: var(--r-md) !important; }
  html body table.dataTable thead th,
  html body table.dataTable td,
  html body .table th,
  html body .table td { padding: 0.625rem 0.75rem !important; font-size: 0.75rem !important; }
  html body .btn { padding: 0.4375rem 0.875rem !important; font-size: 0.75rem !important; }
  html body .card-body { padding: 1rem !important; }
  html body td.right-pannel { padding: 0.875rem !important; }
}

@media (max-width: 576px) {
  html body .container-fluid { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  html body .container-fluid.bbi-shell-fullwidth {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  html body .card-title.h2 { font-size: 1.5rem !important; }
  html body td.right-pannel { padding: 0.75rem !important; }
}

/* ─── Product list / full-bleed (must load last): flex parents can shrink main; cap was leaving large side gutters ─── */
html body main#content.main,
html body main.main#content {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

html body main#content.main > .container-fluid.bbi-shell-fullwidth,
html body main.main#content > .container-fluid.bbi-shell-fullwidth {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}

html body main#content.main > .container-fluid.bbi-shell-fullwidth .bbi-table-card {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Module list pages: From/To date row — match btn height to themed inputs (40px min) */
html body .bbi-module-date-filter .btn {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}