/* =========================================================================
   BRANDWAVE 2026 SaaS THEME OVERRIDE
   Inspired by https://brandwaveapp.com/
   Visual-only redesign. Does NOT modify markup, layout hierarchy, or logic.
   Loaded AFTER theme.css/user.css/adminlte.css to override their tokens.
   ========================================================================= */

/* ---- 1. FONT ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ---- 2. DESIGN TOKENS ------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  /* Brand palette */
  --bw-orange-50:  #FFF1E6;
  --bw-orange-100: #FFD9B8;
  --bw-orange-300: #FFAE6A;
  --bw-orange-500: #FF7A1A;
  --bw-orange-600: #FF6A00;
  --bw-orange-700: #E25800;
  --bw-orange-glow: 255, 122, 26;

  /* Surfaces (dark navy gradient) */
  --bw-bg-0:   #07080C;
  --bw-bg-1:   #0B0E14;
  --bw-bg-2:   #10141C;
  --bw-bg-3:   #151A24;
  --bw-bg-4:   #1B2230;
  --bw-bg-5:   #232A3A;
  --bw-elev:   rgba(255, 255, 255, 0.04);
  --bw-elev-2: rgba(255, 255, 255, 0.06);
  --bw-glass:  rgba(20, 25, 36, 0.62);

  /* Text */
  --bw-text:        #F5F7FA;
  --bw-text-muted:  #A5ADBE;
  --bw-text-dim:    #6B7384;

  /* Borders / lines */
  --bw-border:        rgba(255, 255, 255, 0.08);
  --bw-border-strong: rgba(255, 255, 255, 0.14);
  --bw-border-orange: rgba(255, 122, 26, 0.45);

  /* Shadows / glows */
  --bw-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --bw-shadow:    0 8px 24px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.03) inset;
  --bw-shadow-lg: 0 20px 60px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.04) inset;
  --bw-glow-orange: 0 0 0 1px rgba(255,122,26,.25), 0 8px 28px rgba(255,122,26,.28);
  --bw-glow-orange-sm: 0 0 0 1px rgba(255,122,26,.18), 0 4px 14px rgba(255,122,26,.22);

  /* Gradients */
  --bw-gradient-orange:   linear-gradient(135deg, #FF8A3D 0%, #FF6A00 55%, #E25800 100%);
  --bw-gradient-orange-2: linear-gradient(135deg, rgba(255,138,61,.20) 0%, rgba(255,106,0,.14) 100%);
  --bw-gradient-bg:       radial-gradient(1200px 700px at 12% -10%, rgba(255,122,26,.12), transparent 60%),
                          radial-gradient(1000px 600px at 100% 0%, rgba(80,90,200,.10), transparent 60%),
                          linear-gradient(180deg, #07080C 0%, #0B0E14 40%, #0A0D13 100%);

  /* Falcon variable overrides */
  --falcon-body-bg: var(--bw-bg-1);
  --falcon-body-color: var(--bw-text);
  --falcon-card-bg: var(--bw-bg-3);
  --falcon-card-border-color: var(--bw-border);
  --falcon-border-color: var(--bw-border);
  --falcon-input-bg: var(--bw-bg-2);
  --falcon-input-color: var(--bw-text);
  --falcon-input-border-color: var(--bw-border-strong);
  --falcon-input-placeholder-color: var(--bw-text-dim);
  --falcon-primary: var(--bw-orange-500);
  --falcon-primary-rgb: 255, 122, 26;
  --falcon-link-color: var(--bw-orange-300);
  --falcon-link-hover-color: var(--bw-orange-500);
  --falcon-navbar-vertical-bg: var(--bw-bg-2);
  --falcon-navbar-vertical-link-color: var(--bw-text-muted);
  --falcon-navbar-vertical-link-hover-color: var(--bw-text);
  --falcon-navbar-vertical-link-active-color: var(--bw-text);

  /* Bootstrap variable overrides (Bootstrap 5) */
  --bs-body-bg: var(--bw-bg-1);
  --bs-body-color: var(--bw-text);
  --bs-emphasis-color: var(--bw-text);
  --bs-secondary-color: var(--bw-text-muted);
  --bs-tertiary-color: var(--bw-text-dim);
  --bs-border-color: var(--bw-border);
  --bs-border-color-translucent: var(--bw-border);
  --bs-link-color: var(--bw-orange-300);
  --bs-link-color-rgb: 255, 174, 106;
  --bs-link-hover-color: var(--bw-orange-500);
  --bs-link-hover-color-rgb: 255, 122, 26;
  --bs-primary: var(--bw-orange-500);
  --bs-primary-rgb: 255, 122, 26;
  --bs-card-bg: var(--bw-bg-3);
  --bs-card-border-color: var(--bw-border);
  --bs-card-cap-bg: var(--bw-bg-3);
  --bs-modal-bg: var(--bw-bg-3);
  --bs-modal-border-color: var(--bw-border);
  --bs-dropdown-bg: var(--bw-bg-3);
  --bs-dropdown-border-color: var(--bw-border);
  --bs-dropdown-link-color: var(--bw-text);
  --bs-dropdown-link-hover-bg: var(--bw-elev-2);
  --bs-dropdown-link-hover-color: var(--bw-text);
  --bs-table-color: var(--bw-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bw-border);
  --bs-table-striped-color: var(--bw-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-color: var(--bw-text);
  --bs-table-hover-bg: rgba(255,122,26,.06);
}

/* ====================== LIGHT THEME OVERRIDES ======================
   Triggered by [data-bs-theme="light"] on <html>. Single CSS, two looks. */
html[data-bs-theme="light"],
[data-bs-theme="light"] {
  /* Surfaces: white & light gray with subtle warm tint */
  --bw-bg-0:   #FFFFFF;
  --bw-bg-1:   #FAFBFC;
  --bw-bg-2:   #FFFFFF;
  --bw-bg-3:   #FFFFFF;
  --bw-bg-4:   #F4F6FA;
  --bw-bg-5:   #ECEFF5;
  --bw-elev:   rgba(0, 0, 0, 0.03);
  --bw-elev-2: rgba(0, 0, 0, 0.05);
  --bw-glass:  rgba(255, 255, 255, 0.78);

  /* Text: dark on light */
  --bw-text:        #16181D;
  --bw-text-muted:  #5C6675;
  --bw-text-dim:    #8B95A4;

  /* Borders: light gray */
  --bw-border:        rgba(15, 20, 30, 0.08);
  --bw-border-strong: rgba(15, 20, 30, 0.14);
  --bw-border-orange: rgba(255, 106, 0, 0.45);

  /* Shadows softer on light */
  --bw-shadow-sm: 0 1px 2px rgba(15, 20, 30, .06);
  --bw-shadow:    0 4px 14px rgba(15, 20, 30, .07), 0 1px 0 rgba(255,255,255,.7) inset;
  --bw-shadow-lg: 0 18px 40px rgba(15, 20, 30, .12), 0 2px 6px rgba(15, 20, 30, .05);
  --bw-glow-orange: 0 0 0 1px rgba(255, 106, 0, .25), 0 8px 22px rgba(255, 106, 0, .18);
  --bw-glow-orange-sm: 0 0 0 1px rgba(255, 106, 0, .14), 0 3px 10px rgba(255, 106, 0, .14);

  /* Background gradient: warm white with corner orange wash */
  --bw-gradient-bg:  radial-gradient(900px 600px at 8% -10%, rgba(255,106,0,.07), transparent 60%),
                     radial-gradient(900px 600px at 100% 0%, rgba(80,100,200,.05), transparent 60%),
                     linear-gradient(180deg, #FAFBFC 0%, #F4F6FA 100%);

  /* Falcon/Bootstrap variable mapping for light */
  --falcon-body-bg: var(--bw-bg-1);
  --falcon-body-color: var(--bw-text);
  --falcon-card-bg: #FFFFFF;
  --falcon-card-border-color: var(--bw-border);
  --falcon-border-color: var(--bw-border);
  --falcon-input-bg: #FFFFFF;
  --falcon-input-color: var(--bw-text);
  --falcon-input-border-color: var(--bw-border-strong);
  --falcon-input-placeholder-color: var(--bw-text-dim);
  --falcon-navbar-vertical-bg: #FFFFFF;
  --falcon-navbar-vertical-link-color: var(--bw-text-muted);
  --falcon-navbar-vertical-link-hover-color: var(--bw-text);

  --bs-body-bg: var(--bw-bg-1);
  --bs-body-color: var(--bw-text);
  --bs-emphasis-color: var(--bw-text);
  --bs-secondary-color: var(--bw-text-muted);
  --bs-tertiary-color: var(--bw-text-dim);
  --bs-border-color: var(--bw-border);
  --bs-border-color-translucent: var(--bw-border);
  --bs-card-bg: #FFFFFF;
  --bs-card-border-color: var(--bw-border);
  --bs-card-cap-bg: #FFFFFF;
  --bs-modal-bg: #FFFFFF;
  --bs-dropdown-bg: #FFFFFF;
  --bs-dropdown-link-color: var(--bw-text);
  --bs-dropdown-link-hover-bg: var(--bw-bg-4);
  --bs-table-color: var(--bw-text);
  --bs-table-striped-bg: rgba(15, 20, 30, .025);
  --bs-table-hover-bg: rgba(255, 106, 0, .06);
}

/* Light theme: utility classes & specific elements */
html[data-bs-theme="light"] body {
  background: var(--bw-gradient-bg) !important;
}
html[data-bs-theme="light"] .card,
html[data-bs-theme="light"] .modal-content,
html[data-bs-theme="light"] .dropdown-menu,
html[data-bs-theme="light"] .admin-page-card {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid var(--bw-border) !important;
  color: var(--bw-text) !important;
  box-shadow: var(--bw-shadow) !important;
}
html[data-bs-theme="light"] .navbar-vertical,
html[data-bs-theme="light"] .navbar-vertical.navbar-light,
html[data-bs-theme="light"] .navbar-vertical.navbar-inverted {
  background: #FFFFFF !important;
  border-right: 1px solid var(--bw-border) !important;
}
html[data-bs-theme="light"] .navbar-top,
html[data-bs-theme="light"] .navbar.navbar-top {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid var(--bw-border) !important;
}
html[data-bs-theme="light"] .table thead,
html[data-bs-theme="light"] table.dataTable thead,
html[data-bs-theme="light"] .page-table thead,
html[data-bs-theme="light"] .table thead th,
html[data-bs-theme="light"] table.dataTable thead th,
html[data-bs-theme="light"] .page-table thead th,
html[data-bs-theme="light"] .tbl-head-bg {
  background-color: var(--bw-bg-4) !important;
  background: var(--bw-bg-4) !important;
  color: var(--bw-text) !important;
  border-bottom-color: var(--bw-border-strong) !important;
}
html[data-bs-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(15, 20, 30, .025) !important;
}
/* Light theme: dark-text utility classes regain their original behavior */
html[data-bs-theme="light"] .text-700:not(.badge):not(.btn),
html[data-bs-theme="light"] .text-800:not(.badge):not(.btn),
html[data-bs-theme="light"] .text-900:not(.badge):not(.btn),
html[data-bs-theme="light"] .text-dark:not(.badge):not(.btn-warning):not(.btn-info):not(.btn-light),
html[data-bs-theme="light"] .text-black:not(.badge):not(.btn-warning):not(.btn-info) {
  color: #16181D !important;
}
html[data-bs-theme="light"] ::-webkit-scrollbar-track { background: var(--bw-bg-1); }
html[data-bs-theme="light"] ::-webkit-scrollbar-thumb { background: var(--bw-bg-5); border: 2px solid var(--bw-bg-1); }
html[data-bs-theme="light"] code, html[data-bs-theme="light"] kbd, html[data-bs-theme="light"] pre, html[data-bs-theme="light"] samp {
  background: var(--bw-bg-4) !important; color: #b45309 !important;
}
html[data-bs-theme="light"] .btn-secondary {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F4F9 100%) !important;
  border: 1px solid var(--bw-border-strong) !important;
  color: var(--bw-text) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 1px 2px rgba(15,20,30,.06);
}
html[data-bs-theme="light"] .btn-secondary:hover {
  background: linear-gradient(180deg, #FAFBFD 0%, #ECEFF5 100%) !important;
  border-color: rgba(255, 106, 0, 0.55) !important;
  color: var(--bw-text) !important;
}
html[data-bs-theme="light"] .form-check-input {
  background-color: #FFFFFF !important;
  border-color: var(--bw-border-strong) !important;
}
html[data-bs-theme="light"] .breadcrumb-item, html[data-bs-theme="light"] .breadcrumb-item a { color: var(--bw-text-muted) !important; }
html[data-bs-theme="light"] .breadcrumb-item.active { color: var(--bw-text) !important; }
/* Logo in light theme — don't invert (assets are now pre-themed) */
html[data-bs-theme="light"] .logo-small,
html[data-bs-theme="light"] img[src*="logo-black"],
html[data-bs-theme="light"] img[src*="logo-old"] {
  filter: none;
}

/* LIGHT-THEME LOGO SWAP — On signup / login / receipt-style pages that are
   currently set to data-bs-theme="light" (or temporarily toggled), the
   default `logo-white.png` (orange B + WHITE wordmark on black) renders
   poorly because the white wordmark disappears against the white page bg.
   Solution: keep the same `<img src="logo-white.png">` markup intact (so
   nothing in PHP/Blade has to change) and swap only the visible pixels
   to the light variant via CSS `content:` substitution. */
html[data-bs-theme="light"] img[src*="logo-white"]:not(#__bw_never__),
html[data-bs-theme="light"] img[src*="logo.png"]:not(#__bw_never__),
[data-bs-theme="light"] img[src*="logo-white"]:not(#__bw_never__),
[data-bs-theme="light"] img[src*="logo.png"]:not(#__bw_never__) {
  content: url("../../img/logo-light.png");
}
html[data-bs-theme="light"] .navbar-vertical .logo-small,
html[data-bs-theme="light"] .navbar .logo-small {
  background: linear-gradient(135deg, rgba(255,138,61,.10), rgba(255,106,0,.05));
  border: 1px solid var(--bw-border-orange);
}
html[data-bs-theme="light"] .navbar-brand div[style*="color: #000"],
html[data-bs-theme="light"] .navbar-brand div[style*="color:#000"] {
  color: var(--bw-text) !important;
}
html[data-bs-theme="light"] .btn-close {
  filter: none;
}
/* Light theme — page-scoped firebase chat partial overrides become subtle gray */
html[data-bs-theme="light"] .bw-chat-wrap,
html[data-bs-theme="light"] .bw-wa-shell,
html[data-bs-theme="light"] .bw-wa-sidebar,
html[data-bs-theme="light"] .chat-container {
  background: #FFFFFF !important;
  border-color: var(--bw-border) !important;
}
html[data-bs-theme="light"] .bw-bubble.them,
html[data-bs-theme="light"] .bw-wa-bubble.them {
  background: var(--bw-bg-4) !important;
  color: var(--bw-text) !important;
  border-color: var(--bw-border) !important;
}
/* Light theme — input/select stay white */
html[data-bs-theme="light"] input:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] select:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] textarea:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] .form-control:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] .form-select:not(#__bw_never__):not(#__bw_n2__) {
  background-color: #FFFFFF !important;
  color: var(--bw-text) !important;
  border-color: var(--bw-border-strong) !important;
  -webkit-text-fill-color: var(--bw-text) !important;
}
html[data-bs-theme="light"] input:-webkit-autofill,
html[data-bs-theme="light"] textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
}
/* Light theme — table cells get dark text */
html[data-bs-theme="light"] .table td:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] .table th:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] table.dataTable td:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] table.dataTable th:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] .page-table td:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] .page-table th:not(#__bw_never__):not(#__bw_n2__) {
  color: #16181D !important;
}
html[data-bs-theme="light"] [style*="background:#fff"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] [style*="background: #fff"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] [style*="background-color: #fff"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] [style*="background-color:#fff"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] [style*="background-color: white"]:not(#__bw_never__):not(#__bw_n2__) {
  background: #FFFFFF !important;
  color: var(--bw-text) !important;
}
html[data-bs-theme="light"] [style*="color: #000"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] [style*="color:#000"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] [style*="color: black"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="light"] [style*="color:black"]:not(#__bw_never__):not(#__bw_n2__) {
  color: #16181D !important;
}

/* ====================== THEME TOGGLE BUTTON ====================== */
.bw-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 122, 26, 0.10);
  border: 1px solid rgba(255, 122, 26, 0.30);
  color: var(--bw-orange-300, #FFAE6A);
  cursor: pointer;
  transition: transform .25s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
  position: relative;
  overflow: hidden;
  margin: 0 6px;
}
.bw-theme-toggle:hover {
  background: rgba(255, 122, 26, 0.18);
  color: var(--bw-orange-500, #FF7A1A);
  box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.12);
  transform: rotate(15deg);
}
.bw-theme-toggle:active { transform: rotate(0deg) scale(.96); }
.bw-theme-toggle svg { width: 18px; height: 18px; }
.bw-theme-toggle .bw-icon-sun { display: none; }
.bw-theme-toggle .bw-icon-moon { display: block; }
html[data-bs-theme="light"] .bw-theme-toggle .bw-icon-sun { display: block; }
html[data-bs-theme="light"] .bw-theme-toggle .bw-icon-moon { display: none; }
html[data-bs-theme="light"] .bw-theme-toggle {
  background: rgba(255, 106, 0, 0.10);
  border-color: rgba(255, 106, 0, 0.30);
  color: #FF6A00;
}


/* ---- 3. GLOBAL BASE --------------------------------------------------- */
html, body {
  background: var(--bw-bg-1) !important;
  color: var(--bw-text) !important;
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bw-gradient-bg) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
  transition: background-color .35s ease, color .35s ease;
}

body.hold-transition,
body.login-page {
  background: var(--bw-gradient-bg) !important;
  background-attachment: fixed !important;
}

main, main.main {
  background: transparent !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--bw-text) !important;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
}

p, span, label, small, li, td, th, dt, dd, legend, .text-body { color: inherit; }

a { color: var(--bw-orange-300); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--bw-orange-500); }

hr { border-color: var(--bw-border) !important; opacity: 1; }

/* Selection */
::selection { background: rgba(var(--bw-orange-glow), .35); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bw-bg-1); }
::-webkit-scrollbar-thumb { background: var(--bw-bg-4); border-radius: 999px; border: 2px solid var(--bw-bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--bw-bg-5); }

/* Utility text colors */
.text-muted, .text-secondary { color: var(--bw-text-muted) !important; }
/* Dark-text utility classes — flip to light EXCEPT when on/inside a badge (where bright bg makes dark text legible) */
.text-700:not(.badge):not(.btn),
.text-800:not(.badge):not(.btn),
.text-900:not(.badge):not(.btn),
.text-dark:not(.badge):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-warning *):not(.btn-info *),
.text-black:not(.badge):not(.btn-warning):not(.btn-info):not(.btn-light) {
  color: var(--bw-text) !important;
}
/* Badges keep dark text since their bright bg makes it readable */
.badge.text-dark, .badge.text-black,
.badge.bg-warning, .badge.bg-info, .badge.bg-light, .badge.bg-white,
.btn-warning.text-dark, .btn-warning, .btn-light {
  color: #1a1a1a !important;
}
.text-500, .text-600 { color: var(--bw-text-muted) !important; }
.text-light, .text-white { color: var(--bw-text) !important; }
.text-primary { color: var(--bw-orange-500) !important; }
.text-success { color: #34d399 !important; }
.text-danger  { color: #f87171 !important; }
.text-warning { color: #fbbf24 !important; }
.text-info    { color: #60a5fa !important; }

/* Background utility colors */
.bg-white, .bg-light, .bg-100, .bg-200, .bg-300 {
  background-color: var(--bw-bg-3) !important;
  color: var(--bw-text) !important;
}
.bg-soft-primary { background-color: rgba(var(--bw-orange-glow), .12) !important; color: var(--bw-orange-300) !important; }
.bg-soft-success { background-color: rgba(52,211,153,.12) !important; color: #6ee7b7 !important; }
.bg-soft-danger  { background-color: rgba(248,113,113,.12) !important; color: #fca5a5 !important; }
.bg-soft-warning { background-color: rgba(251,191,36,.12) !important; color: #fcd34d !important; }
.bg-soft-info    { background-color: rgba(96,165,250,.12) !important; color: #93c5fd !important; }
.bg-primary { background-color: var(--bw-orange-500) !important; color: #fff !important; }

/* ---- 4. CARDS / CONTAINERS ------------------------------------------- */
.card,
.admin-page-card,
.modal-content,
.dropdown-menu {
  background: linear-gradient(180deg, var(--bw-bg-3) 0%, var(--bw-bg-2) 100%) !important;
  background-color: var(--bw-bg-3) !important;
  border: 1px solid var(--bw-border) !important;
  border-radius: 14px !important;
  color: var(--bw-text) !important;
  box-shadow: var(--bw-shadow) !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.card:hover {
  border-color: var(--bw-border-orange) !important;
  box-shadow: var(--bw-shadow), var(--bw-glow-orange-sm) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--bw-border) !important;
  color: var(--bw-text) !important;
  padding: 1rem 1.25rem;
  font-weight: 600;
}

.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--bw-border) !important;
  color: var(--bw-text-muted) !important;
}

.card-body { color: var(--bw-text) !important; }

.admin-page-card { box-shadow: var(--bw-shadow) !important; }
.admin-page-title-header { border-bottom: 1px solid var(--bw-border) !important; }
.admin-page-title { color: var(--bw-text) !important; font-weight: 700; letter-spacing: -.01em; }

/* Modals */
.modal-content { box-shadow: var(--bw-shadow-lg) !important; border-radius: 16px !important; }
.modal-header { border-bottom: 1px solid var(--bw-border) !important; }
.modal-footer { border-top: 1px solid var(--bw-border) !important; }
.modal-backdrop.show { opacity: .72; background:#000; }
.modal-title { color: var(--bw-text) !important; }
.btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .8;
}
.btn-close:hover { opacity: 1; }

/* Dropdowns */
.dropdown-menu {
  padding: .35rem !important;
  box-shadow: var(--bw-shadow-lg) !important;
}
.dropdown-item {
  color: var(--bw-text) !important;
  border-radius: 8px;
  padding: .5rem .75rem;
  transition: background-color .15s ease, color .15s ease;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--bw-elev-2) !important;
  color: var(--bw-text) !important;
}
.dropdown-item.active, .dropdown-item:active {
  background: rgba(var(--bw-orange-glow), .18) !important;
  color: var(--bw-orange-300) !important;
}
.dropdown-divider { border-color: var(--bw-border) !important; }

/* ---- 5. BUTTONS ------------------------------------------------------- */
.btn {
  border-radius: 10px !important;
  font-weight: 600;
  letter-spacing: .005em;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  border-width: 1px;
}
.btn:focus, .btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--bw-orange-glow), .35) !important;
}

.btn-primary, .btn.btn-primary {
  background: var(--bw-gradient-orange) !important;
  background-color: var(--bw-orange-500) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--bw-glow-orange-sm);
}
.btn-primary:hover, .btn.btn-primary:hover, .btn-primary:focus {
  transform: translateY(-1px);
  box-shadow: var(--bw-glow-orange);
  background: linear-gradient(135deg, #FF9A4D 0%, #FF7A1A 55%, #FF6A00 100%) !important;
  color: #fff !important;
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled, .btn-primary.disabled { opacity: .55; box-shadow: none; }

.btn-secondary, .btn.btn-secondary {
  background: linear-gradient(180deg, #2A3142 0%, #1F2533 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.3);
  font-weight: 600;
}
.btn-secondary:hover, .btn.btn-secondary:hover {
  background: linear-gradient(180deg, #323A4E 0%, #252C3D 100%) !important;
  border-color: rgba(255, 122, 26, 0.55) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 14px rgba(255, 122, 26, 0.18);
  transform: translateY(-1px);
}
.btn-secondary:active, .btn.btn-secondary:active {
  transform: translateY(0);
  background: #1F2533 !important;
}
.btn-secondary:disabled, .btn-secondary.disabled {
  opacity: 0.55;
  box-shadow: none;
}

.btn-outline-primary {
  background: transparent !important;
  color: var(--bw-orange-300) !important;
  border-color: var(--bw-border-orange) !important;
}
.btn-outline-primary:hover {
  background: rgba(var(--bw-orange-glow), .12) !important;
  color: var(--bw-orange-300) !important;
  border-color: var(--bw-orange-500) !important;
  box-shadow: var(--bw-glow-orange-sm);
}

.btn-outline-secondary {
  background: transparent !important;
  color: var(--bw-text-muted) !important;
  border-color: var(--bw-border-strong) !important;
}
.btn-outline-secondary:hover {
  background: var(--bw-elev-2) !important;
  color: var(--bw-text) !important;
  border-color: var(--bw-border-strong) !important;
}

.btn-success { background: linear-gradient(135deg, #34d399, #10b981) !important; border-color: transparent !important; color: #04211a !important; }
.btn-danger  { background: linear-gradient(135deg, #fb7185, #ef4444) !important; border-color: transparent !important; color: #fff !important; }
.btn-warning { background: linear-gradient(135deg, #fcd34d, #f59e0b) !important; border-color: transparent !important; color: #2a1c00 !important; }
.btn-info    { background: linear-gradient(135deg, #60a5fa, #3b82f6) !important; border-color: transparent !important; color: #04122a !important; }

.btn-light, .btn-default {
  background: var(--bw-bg-4) !important;
  border-color: var(--bw-border) !important;
  color: var(--bw-text) !important;
}
.btn-light:hover { background: var(--bw-bg-5) !important; color: var(--bw-text) !important; }

.btn-link, .btn-link:visited { color: var(--bw-orange-300) !important; }
.btn-link:hover { color: var(--bw-orange-500) !important; }

/* SVG fills inside buttons */
.btn-link:hover > svg path,
.pg-btn:hover > svg path,
.pg-btn:hover > span svg path {
  fill: var(--bw-orange-500) !important;
}
.pg-btn { box-shadow: none !important; background: var(--bw-bg-4) !important; border:1px solid var(--bw-border) !important; color: var(--bw-text) !important; }
.pg-btn:hover { background: var(--bw-bg-5) !important; box-shadow: var(--bw-glow-orange-sm) !important; }

/* Falcon "btn-falcon-*" variants */
.btn-falcon-default,
.btn-falcon-primary,
.btn-falcon-success,
.btn-falcon-danger,
.btn-falcon-info,
.btn-falcon-warning {
  background: var(--bw-bg-4) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border) !important;
  box-shadow: none !important;
}
.btn-falcon-default:hover,
.btn-falcon-primary:hover,
.btn-falcon-success:hover,
.btn-falcon-danger:hover,
.btn-falcon-info:hover,
.btn-falcon-warning:hover {
  background: var(--bw-bg-5) !important;
  border-color: var(--bw-border-orange) !important;
  color: var(--bw-text) !important;
}
.btn-falcon-primary { color: var(--bw-orange-300) !important; }

/* AdminLTE login buttons */
.btn-block { width: 100%; }

/* ---- 6. FORMS --------------------------------------------------------- */
/* Catch ALL inputs, including unclassed native ones (AdminLTE, raw HTML).
   Excludes file/checkbox/radio/range/color/submit/reset/button/image which need native styling. */
.form-control,
.form-select,
textarea,
textarea.form-control,
input.form-control,
.form-control.form-control-sm,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
select,
.input-group-text,
.bs-stepper input {
  background-color: var(--bw-bg-2) !important;
  background-image: none;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border-strong) !important;
  border-radius: 10px !important;
  padding: 0.55rem 0.9rem !important;
  min-height: 40px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Smaller variant retains compact height but keeps padding readable */
.form-control-sm,
.form-select-sm,
input.form-control-sm,
select.form-select-sm {
  min-height: 34px !important;
  padding: 0.35rem 0.7rem !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* Larger variant */
.form-control-lg, .form-select-lg {
  min-height: 48px !important;
  padding: 0.75rem 1rem !important;
  font-size: 16px !important;
  border-radius: 12px !important;
}

/* Placeholder — always visible, light gray */
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--bw-text-dim) !important;
  opacity: 1 !important;
  font-weight: 400;
}

/* Focus state — orange glow */
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus {
  background-color: var(--bw-bg-2) !important;
  border-color: var(--bw-orange-500) !important;
  color: var(--bw-text) !important;
  box-shadow: 0 0 0 3px rgba(var(--bw-orange-glow), .25) !important;
  outline: none !important;
}

/* Disabled / readonly */
.form-control:disabled, .form-control[readonly],
input:disabled, select:disabled, textarea:disabled {
  background-color: var(--bw-bg-1) !important;
  color: var(--bw-text-muted) !important;
  border-color: var(--bw-border) !important;
  opacity: .85;
  cursor: not-allowed;
}

/* Native autofill (Chrome) — keep text white & background dark */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--bw-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bw-bg-2) inset !important;
  caret-color: var(--bw-text) !important;
  border: 1px solid var(--bw-border-strong) !important;
  border-radius: 10px !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ---- Selects: custom chevron, properly right-aligned ----------------- */
.form-select,
select.form-select,
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A5ADBE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 14px 14px !important;
  padding-right: 2.4rem !important;
  cursor: pointer;
}
.form-select:focus, select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FF8A3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E") !important;
}
.form-select-sm, select.form-select-sm { padding-right: 2rem !important; background-position: right 0.65rem center !important; }
/* Hide native arrow in IE/Edge legacy */
select::-ms-expand { display: none; }
/* Native option list (browser-rendered) — at least give text dark fallback */
select option { background: var(--bw-bg-3); color: var(--bw-text); }

/* ---- Textareas — keep resize handle subtle ---- */
textarea,
textarea.form-control {
  min-height: 84px;
  resize: vertical;
  line-height: 1.55;
}

/* ---- Labels — readable, with proper icon spacing ---- */
.form-label, label, .col-form-label, .form-group label {
  color: var(--bw-text) !important;
  font-weight: 500;
  font-size: 13.5px;
  margin-bottom: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .005em;
}
.form-label i, label i, .form-label svg, label svg,
.form-label .fa, label .fa, .form-label .fas, label .fas, .form-label .far, label .far,
.form-label .fab, label .fab {
  color: var(--bw-text-muted);
  font-size: 0.95em;
  margin-right: 2px;
}
/* Required asterisk visibility */
.form-label .text-danger, label .text-danger,
.form-label .required, label .required {
  color: #FF6A6A !important;
  font-weight: 700;
  margin-left: 2px;
}

/* Help text muted */
.form-text, .text-muted small, .help-block, small.text-muted {
  color: var(--bw-text-muted) !important;
  font-size: 12.5px;
  margin-top: 4px;
}

/* ---- Checkbox / radio (Bootstrap 5) ---- */
.form-check {
  padding-left: 1.85em;
  min-height: 1.4rem;
}
.form-check-input {
  background-color: var(--bw-bg-2) !important;
  border: 1.5px solid var(--bw-border-strong) !important;
  width: 1.1em;
  height: 1.1em;
  margin-left: -1.85em;
  margin-top: 0.18em;
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--bw-orange-500) !important;
  border-color: var(--bw-orange-500) !important;
}
.form-check-input:focus {
  border-color: var(--bw-orange-500) !important;
  box-shadow: 0 0 0 3px rgba(var(--bw-orange-glow), .25) !important;
}
.form-check-label {
  color: var(--bw-text) !important;
  cursor: pointer;
  margin-left: 4px;
  font-size: 14px;
}
.form-switch .form-check-input { width: 2em; }

/* ---- Input groups: addons aligned cleanly ---- */
.input-group {
  border-radius: 10px;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
  border-radius: 0 !important;
}
.input-group > :first-child {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}
.input-group > :last-child {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
.input-group-text,
.input-group .input-group-text,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
  background: var(--bw-bg-3) !important;
  background-color: var(--bw-bg-3) !important;
  color: var(--bw-text-muted) !important;
  border: 1px solid var(--bw-border-strong) !important;
  font-weight: 500;
  padding: 0.55rem 0.9rem;
}
.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select,
.input-group:focus-within > .input-group-text {
  border-color: var(--bw-orange-500) !important;
}
.input-group:focus-within { box-shadow: 0 0 0 3px rgba(var(--bw-orange-glow), .22); border-radius: 10px; }

/* ---- File inputs ---- */
input[type="file"],
.form-control[type="file"] {
  padding: 0.4rem 0.6rem !important;
  cursor: pointer;
}
input[type="file"]::file-selector-button,
.form-control[type="file"]::file-selector-button {
  background: var(--bw-bg-4) !important;
  color: var(--bw-text) !important;
  border: none !important;
  border-right: 1px solid var(--bw-border) !important;
  padding: 0.4rem 0.85rem !important;
  margin-right: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .15s ease;
}
input[type="file"]::file-selector-button:hover {
  background: var(--bw-bg-5) !important;
}

/* ---- Range slider ---- */
input[type="range"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-height: auto !important;
}
input[type="range"]::-webkit-slider-runnable-track {
  background: var(--bw-bg-4); height: 6px; border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--bw-gradient-orange);
  margin-top: -5px;
  box-shadow: 0 0 0 4px rgba(var(--bw-orange-glow), .25);
  cursor: pointer;
}

/* ---- Color input ---- */
input[type="color"] {
  width: 44px; height: 36px; padding: 2px !important;
  border: 1px solid var(--bw-border-strong) !important;
  background: var(--bw-bg-2) !important;
  border-radius: 8px !important;
  cursor: pointer;
}

/* ---- Date pickers — invert calendar icon ---- */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) brightness(1.4);
  cursor: pointer;
  opacity: .85;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ---- AdminLTE form-group + login ---- */
.form-group { margin-bottom: 1rem; }
.form-group label { color: var(--bw-text) !important; }
.login-box-msg, .register-box-msg { color: var(--bw-text) !important; font-weight: 600; }
.login-page, .register-page { background: transparent !important; }
.login-box, .register-box { width: 100%; max-width: 480px; }
.login-logo, .register-logo a { color: var(--bw-text) !important; }

/* ---- iCheck (AdminLTE) checkboxes — visible ---- */
.icheck-bootstrap > input + label::before,
[class*="icheck-"] > input + label::before {
  background: var(--bw-bg-2) !important;
  border: 1.5px solid var(--bw-border-strong) !important;
  border-radius: 4px !important;
}
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before {
  background-color: var(--bw-orange-500) !important;
  border-color: var(--bw-orange-500) !important;
}
.icheck-bootstrap label, [class*="icheck-"] label { color: var(--bw-text) !important; }

/* ---- Select2 dark integration (improved alignment) ---- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--bw-bg-2) !important;
  border: 1px solid var(--bw-border-strong) !important;
  border-radius: 10px !important;
  min-height: 40px !important;
  height: auto !important;
  color: var(--bw-text) !important;
  padding: 1px 2px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--bw-text) !important;
  line-height: 36px !important;
  padding-left: 0.85rem !important;
  padding-right: 2.2rem !important;
  border: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--bw-text-dim) !important;
}
/* Custom Select2 chevron (matches native select arrow) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  right: 6px !important;
  top: 0 !important;
  width: 28px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: transparent !important;
  border-style: solid !important;
  border-width: 0 !important;
  height: 14px !important;
  width: 14px !important;
  margin-left: -7px !important;
  margin-top: -7px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A5ADBE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FF8A3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  transform: rotate(180deg);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--bw-orange-500) !important;
  box-shadow: 0 0 0 3px rgba(var(--bw-orange-glow), .22) !important;
}
.select2-dropdown {
  background-color: var(--bw-bg-3) !important;
  border: 1px solid var(--bw-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--bw-shadow-lg) !important;
  color: var(--bw-text) !important;
  margin-top: 4px;
  overflow: hidden;
}
.select2-search--dropdown { padding: 8px !important; }
.select2-search--dropdown .select2-search__field {
  background: var(--bw-bg-2) !important;
  border: 1px solid var(--bw-border-strong) !important;
  color: var(--bw-text) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  outline: none !important;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--bw-orange-500) !important;
  box-shadow: 0 0 0 3px rgba(var(--bw-orange-glow), .22) !important;
}
.select2-results__option {
  color: var(--bw-text) !important;
  padding: 0.55rem 0.85rem !important;
  border-radius: 6px;
  margin: 2px 6px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: rgba(var(--bw-orange-glow), .18) !important;
  color: var(--bw-orange-300) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: rgba(var(--bw-orange-glow), .12) !important;
  color: var(--bw-orange-300) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(var(--bw-orange-glow), .15) !important;
  border: 1px solid var(--bw-border-orange) !important;
  color: var(--bw-orange-300) !important;
  border-radius: 8px !important;
  padding: 2px 8px !important;
  margin-top: 5px !important;
  margin-right: 4px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--bw-orange-300) !important;
  margin-right: 4px !important;
  border: none !important;
  background: transparent !important;
}

/* ---- 7. TABLES -------------------------------------------------------- */
.table,
table.dataTable,
.page-table {
  color: var(--bw-text) !important;
  background: transparent !important;
  border-color: var(--bw-border) !important;
  --bs-table-color: var(--bw-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bw-border);
  --bs-table-striped-color: var(--bw-text);
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-hover-color: var(--bw-text);
  --bs-table-hover-bg: rgba(var(--bw-orange-glow), .06);
}

.table > :not(caption) > * > *,
table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th {
  background-color: transparent !important;
  border-bottom-color: var(--bw-border) !important;
  color: var(--bw-text) !important;
}

.table thead, table.dataTable thead, .page-table thead {
  background-color: var(--bw-bg-4) !important;
  background: var(--bw-bg-4) !important;
}
.table thead th,
table.dataTable thead th,
.page-table thead th {
  background-color: var(--bw-bg-4) !important;
  color: var(--bw-text) !important;
  border-bottom: 1px solid var(--bw-border-strong) !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .75rem;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.page-table thead th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.page-table thead th:last-child  { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

.tbl-head-bg { background-color: var(--bw-bg-4) !important; color: var(--bw-text) !important; }

.table-hover > tbody > tr:hover > *,
table.dataTable.hover tbody tr:hover > *,
.page-table tbody tr:hover > * {
  background-color: rgba(var(--bw-orange-glow), .06) !important;
  color: var(--bw-text) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,.02) !important;
  color: var(--bw-text) !important;
}

.table-bordered, .table-bordered > * > * { border-color: var(--bw-border) !important; }

/* ---- 7b. TABLE CONTRAST: bulletproof readability rules ----
   Forces light text on dark rows, even when cells use .text-dark, .text-black,
   inline color, links, b/strong tags, or fa-icons styled inline. */
.table td:not(#__bw_never__):not(#__bw_n2__),
.table th:not(#__bw_never__):not(#__bw_n2__),
table.dataTable td:not(#__bw_never__):not(#__bw_n2__),
table.dataTable th:not(#__bw_never__):not(#__bw_n2__),
.page-table td:not(#__bw_never__):not(#__bw_n2__),
.page-table th:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-text) !important;
}
/* Force all child elements inside table cells to inherit light text,
   beating .text-dark/.text-black/.text-900 inside cells. */
.table td *:not(.badge):not(.badge *):not(.btn):not(.btn *):not([class*="bg-warning"]):not([class*="bg-info"]):not([class*="bg-light"]):not(svg *),
.table th *:not(.badge):not(.badge *):not(.btn):not(.btn *):not([class*="bg-warning"]):not([class*="bg-info"]):not([class*="bg-light"]):not(svg *),
table.dataTable td *:not(.badge):not(.badge *):not(.btn):not(.btn *):not([class*="bg-warning"]):not([class*="bg-info"]):not([class*="bg-light"]):not(svg *),
.page-table td *:not(.badge):not(.badge *):not(.btn):not(.btn *):not([class*="bg-warning"]):not([class*="bg-info"]):not([class*="bg-light"]):not(svg *) {
  color: inherit !important;
}
/* Specifically targets: <td class="text-black">, <b class="text-900">, <a class="text-900">, etc. */
.table .text-black:not(.badge):not(.btn),
.table .text-dark:not(.badge):not(.btn),
.table .text-900:not(.badge):not(.btn),
.table .text-800:not(.badge):not(.btn),
.table .text-700:not(.badge):not(.btn),
table.dataTable .text-black:not(.badge):not(.btn),
table.dataTable .text-dark:not(.badge):not(.btn),
table.dataTable .text-900:not(.badge):not(.btn),
.page-table .text-black:not(.badge):not(.btn),
.page-table .text-dark:not(.badge):not(.btn),
.page-table .text-900:not(.badge):not(.btn) {
  color: var(--bw-text) !important;
}
/* Inline color:black/000 attribute on icons inside tables — flip to muted readable color */
.table [style*="color:black"]:not(#__bw_never__):not(#__bw_n2__),
.table [style*="color: black"]:not(#__bw_never__):not(#__bw_n2__),
.table [style*="color:#000"]:not(#__bw_never__):not(#__bw_n2__),
.table [style*="color: #000"]:not(#__bw_never__):not(#__bw_n2__),
table.dataTable [style*="color:black"]:not(#__bw_never__):not(#__bw_n2__),
table.dataTable [style*="color:#000"]:not(#__bw_never__):not(#__bw_n2__),
.page-table [style*="color:black"]:not(#__bw_never__):not(#__bw_n2__),
.page-table [style*="color:#000"]:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-text-muted) !important;
}
/* Links inside tables — use orange accent */
.table a:not(.badge):not(.btn):not(#__bw_never__):not(#__bw_n2__),
table.dataTable a:not(.badge):not(.btn):not(#__bw_never__):not(#__bw_n2__),
.page-table a:not(.badge):not(.btn):not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-orange-300) !important;
  text-decoration: none;
}
.table a:hover:not(.badge):not(.btn),
table.dataTable a:hover:not(.badge):not(.btn),
.page-table a:hover:not(.badge):not(.btn) {
  color: var(--bw-orange-500) !important;
  text-decoration: underline;
}
/* Bold text in tables stays light, just heavier */
.table b, .table strong,
table.dataTable b, table.dataTable strong,
.page-table b, .page-table strong {
  color: var(--bw-text) !important;
  font-weight: 600;
}
/* Small/secondary text inside cells */
.table small:not(.badge):not(.btn-link),
table.dataTable small:not(.badge):not(.btn-link),
.page-table small:not(.badge):not(.btn-link) {
  color: var(--bw-text-muted) !important;
}
/* Card-body table descendants (e.g., invoice cells inside .card-body.text-black) */
.card-body .text-black:not(.badge):not(.btn),
.card-body .text-dark:not(.badge):not(.btn),
.card-body .text-900:not(.badge):not(.btn),
.card-body .text-800:not(.badge):not(.btn),
.card-body .text-700:not(.badge):not(.btn) {
  color: var(--bw-text) !important;
}
/* Table cell content inside .text-black / .text-dark wrappers */
td.text-black, td.text-dark, td.text-900, td.text-800, td.text-700 { color: var(--bw-text) !important; }
th.text-black, th.text-dark, th.text-900, th.text-800, th.text-700 { color: var(--bw-text) !important; }

/* DataTables wrapper bits */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--bw-text-muted) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--bw-bg-2) !important;
  border: 1px solid var(--bw-border-strong) !important;
  color: var(--bw-text) !important;
  border-radius: 8px !important;
  padding: 4px 10px;
}

/* ---- 8. PAGINATION ---------------------------------------------------- */
.pagination { gap: 4px; }
.page-link {
  background: var(--bw-bg-3) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border) !important;
  border-radius: 8px !important;
  padding: .35rem .7rem;
  transition: all .15s ease;
}
.page-link:hover {
  background: var(--bw-bg-4) !important;
  color: var(--bw-orange-300) !important;
  border-color: var(--bw-border-orange) !important;
}
.page-item.active .page-link,
.page-link.active,
.active > .page-link {
  background: var(--bw-gradient-orange) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--bw-glow-orange-sm);
}
.page-item.disabled .page-link,
.page-link.disabled,
.disabled > .page-link {
  background: var(--bw-bg-2) !important;
  color: var(--bw-text-dim) !important;
  border-color: var(--bw-border) !important;
}

/* ---- 9. SIDEBAR / NAV ------------------------------------------------- */
.navbar-vertical,
.navbar-vertical.navbar-light,
.navbar-vertical.navbar-inverted {
  background: var(--bw-bg-2) !important;
  border-right: 1px solid var(--bw-border) !important;
}
.navbar-vertical .navbar-collapse,
.navbar-collapse {
  background: transparent !important;
}

.navbar-vertical .navbar-brand,
.navbar-brand,
.navbar-brand div {
  color: var(--bw-text) !important;
  font-family: 'Plus Jakarta Sans','Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
}

.navbar-vertical .navbar-nav .nav-item .nav-link,
.navbar-vertical.navbar-inverted .navbar-nav .nav-item .nav-link {
  color: var(--bw-text-muted) !important;
  border-radius: 10px;
  margin: 2px 8px;
  padding: 8px 12px;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
  position: relative;
}
.navbar-vertical .navbar-nav .nav-item .nav-link:hover,
.navbar-vertical.navbar-inverted .navbar-nav .nav-item .nav-link:hover {
  color: var(--bw-text) !important;
  background: var(--bw-elev-2) !important;
}
.navbar-vertical .navbar-nav .nav-item .nav-link.active,
.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical.navbar-inverted .navbar-nav .nav-item .nav-link.active {
  color: var(--bw-text) !important;
  background: linear-gradient(135deg, rgba(255,138,61,.18) 0%, rgba(255,106,0,.10) 100%) !important;
  box-shadow: inset 0 0 0 1px var(--bw-border-orange);
}
.navbar-vertical .navbar-nav .nav-item .nav-link.active::before {
  content: ""; position: absolute; left: -8px; top: 25%; bottom: 25%;
  width: 3px; background: var(--bw-gradient-orange); border-radius: 2px;
  box-shadow: 0 0 12px rgba(var(--bw-orange-glow), .65);
}

.nav-link-icon, .nav-icon { color: inherit !important; }
.nav-link.active .nav-link-icon, .nav-link.active .nav-icon { color: var(--bw-orange-300) !important; }

.navbar-vertical-content { background: transparent !important; }

/* Hamburger / toggle */
.navbar-toggle-icon:after,
.navbar-toggle-icon:before,
.navbar-toggle-icon .toggle-line {
  background-color: var(--bw-text) !important;
}
.navbar-toggler { border: 1px solid var(--bw-border) !important; background: var(--bw-bg-3) !important; }

/* Top navbar */
.navbar-top, .navbar.navbar-top, .navbar.navbar-light:not(.navbar-vertical) {
  background: var(--bw-glass) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--bw-border) !important;
  box-shadow: 0 1px 0 var(--bw-border) inset;
}
.navbar .nav-link { color: var(--bw-text-muted) !important; }
.navbar .nav-link:hover { color: var(--bw-text) !important; }

/* Logo small bordering — new assets are pre-themed (orange B on black bg),
   so we DO NOT invert. Use a SOLID dark backplate that matches the sidebar
   (not a light gradient), so the circular avatar reads cleanly on any theme. */
.logo-small,
img[src*="logo-black"],
img[src*="logo-old"] {
  filter: none;
}
.navbar-vertical .logo-small,
.navbar .logo-small {
  background: #000 !important;
  background-color: #000 !important;
  padding: 0 !important;
  border: 1px solid rgba(251, 128, 20, 0.45) !important;
  box-shadow: 0 0 10px rgba(251, 128, 20, 0.35) !important;
  object-fit: cover !important;
}
/* Defeat any inline white background Falcon / Bootstrap might apply */
html[data-bs-theme="dark"] .logo-small:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] img.rounded-circle.logo-small:not(#__bw_never__):not(#__bw_n2__) {
  background: #000 !important;
  background-color: #000 !important;
  border: 1px solid rgba(251, 128, 20, 0.45) !important;
  box-shadow: 0 0 10px rgba(251, 128, 20, 0.35) !important;
  padding: 0 !important;
}
/* Brand text near logos */
.navbar-brand div[style*="color: #000"],
.navbar-brand div[style*="color:#000"] {
  color: var(--bw-text) !important;
}

/* ---- 10. ALERTS / BADGES --------------------------------------------- */
.alert {
  background: var(--bw-bg-3) !important;
  border: 1px solid var(--bw-border) !important;
  color: var(--bw-text) !important;
  border-radius: 12px !important;
}
.alert-success { border-left: 3px solid #34d399 !important; }
.alert-danger  { border-left: 3px solid #f87171 !important; }
.alert-warning { border-left: 3px solid #fbbf24 !important; }
.alert-info    { border-left: 3px solid #60a5fa !important; }
.alert-primary { border-left: 3px solid var(--bw-orange-500) !important; }

.badge { font-weight: 600; letter-spacing: .03em; border-radius: 999px; padding: .35em .7em; }
.badge.bg-primary, .badge.badge-primary { background: var(--bw-gradient-orange) !important; color: #fff !important; }
.badge.bg-success, .badge.badge-success { background: rgba(52,211,153,.18) !important; color:#6ee7b7 !important; border:1px solid rgba(52,211,153,.35); }
.badge.bg-danger,  .badge.badge-danger  { background: rgba(248,113,113,.18) !important; color:#fca5a5 !important; border:1px solid rgba(248,113,113,.35); }
.badge.bg-warning, .badge.badge-warning { background: rgba(251,191,36,.18) !important; color:#fcd34d !important; border:1px solid rgba(251,191,36,.35); }
.badge.bg-info,    .badge.badge-info    { background: rgba(96,165,250,.18) !important; color:#93c5fd !important; border:1px solid rgba(96,165,250,.35); }
.badge.bg-secondary { background: var(--bw-bg-4) !important; color: var(--bw-text) !important; border:1px solid var(--bw-border); }

/* ---- 11. TABS / NAV PILLS -------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--bw-border) !important;
}
.nav-tabs .nav-link {
  color: var(--bw-text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: .65rem 1rem;
  background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--bw-text) !important; }
.nav-tabs .nav-link.active {
  color: var(--bw-orange-300) !important;
  background: transparent !important;
  border-bottom-color: var(--bw-orange-500) !important;
}

.nav-pills .nav-link {
  color: var(--bw-text-muted) !important;
  border-radius: 999px !important;
  padding: .4rem .9rem;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--bw-gradient-orange) !important;
  color: #fff !important;
  box-shadow: var(--bw-glow-orange-sm);
}

.breadcrumb { background: transparent !important; padding: 0; }
.breadcrumb-item, .breadcrumb-item a { color: var(--bw-text-muted) !important; }
.breadcrumb-item.active { color: var(--bw-text) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--bw-text-dim) !important; }

/* ---- 12. PROGRESS / SPINNERS ----------------------------------------- */
.progress {
  background: var(--bw-bg-2) !important;
  border-radius: 999px !important;
  height: 8px;
}
.progress-bar { background: var(--bw-gradient-orange) !important; }
.spinner-border, .spinner-grow { color: var(--bw-orange-500) !important; }

/* ---- 13. LIST GROUPS ------------------------------------------------- */
.list-group { border-radius: 12px; overflow: hidden; }
.list-group-item {
  background: var(--bw-bg-3) !important;
  color: var(--bw-text) !important;
  border-color: var(--bw-border) !important;
}
.list-group-item-action:hover { background: var(--bw-bg-4) !important; color: var(--bw-text) !important; }
.list-group-item.active { background: rgba(var(--bw-orange-glow), .15) !important; color: var(--bw-orange-300) !important; border-color: var(--bw-border-orange) !important; }

/* ---- 14. CODE / KBD / PRE -------------------------------------------- */
code, kbd, pre, samp { background: var(--bw-bg-2) !important; color: #fcd34d !important; border-radius: 6px; padding: 2px 6px; }
pre { padding: 1rem; }

/* ---- 15. TOOLTIPS / POPOVERS ----------------------------------------- */
.tooltip-inner { background: #000 !important; color: #fff !important; border-radius: 8px; padding: .35rem .6rem; }
.popover { background: var(--bw-bg-3) !important; border-color: var(--bw-border) !important; }
.popover-body { color: var(--bw-text) !important; }
.popover-header { background: var(--bw-bg-4) !important; color: var(--bw-text) !important; border-bottom-color: var(--bw-border) !important; }

/* ---- 16. STAT / KPI / FALCON SPECIFIC -------------------------------- */
.fs-13 { font-size: 13px; }
.fw-bold, .fw-semi-bold, strong, b { color: inherit; }

/* Small icon backgrounds (stat cards) */
.icon-circle, .icon-shape {
  border-radius: 12px !important;
  background: var(--bw-bg-4) !important;
}

/* Falcon kanban / chat overrides minimal */
.chat-content-body, .chat-sidebar { background: var(--bw-bg-2) !important; color: var(--bw-text) !important; }

/* Echarts tooltips */
.echart-tooltip, .echarts-tooltip {
  background: var(--bw-bg-3) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border) !important;
  box-shadow: var(--bw-shadow) !important;
}

/* ---- 17. AUTH / LOGIN PAGE TWEAKS ------------------------------------ */
.login-page .card,
.register-page .card,
body.hold-transition .card {
  background: linear-gradient(180deg, var(--bw-bg-3) 0%, var(--bw-bg-2) 100%) !important;
  border: 1px solid var(--bw-border) !important;
  box-shadow: var(--bw-shadow-lg), 0 0 80px rgba(var(--bw-orange-glow), .07) !important;
  border-radius: 18px !important;
}

.login-page .card-body, .register-page .card-body { padding: 2rem !important; }

/* AdminLTE inputs */
.input-group .form-control,
.input-group-append .input-group-text,
.input-group-prepend .input-group-text {
  background: var(--bw-bg-2) !important;
  border-color: var(--bw-border-strong) !important;
  color: var(--bw-text) !important;
}

/* AdminLTE iCheck */
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before {
  background-color: var(--bw-orange-500) !important;
  border-color: var(--bw-orange-500) !important;
}

/* ---- 18. ANIMATION HELPERS ------------------------------------------ */
@keyframes bw-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .alert, .modal-content { animation: bw-fade-up .35s ease both; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---- 19. AGGRESSIVE FORCES (catch-all hardcoded inline whites) ------ */
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #FFFFFF"],
[style*="background-color: #ffffff"],
[style*="background:#fff"],
[style*="background: #fff"] {
  background: var(--bw-bg-3) !important;
}
[style*="color:#000"],
[style*="color: #000"] {
  color: var(--bw-text) !important;
}
.bg-100 { background-color: var(--bw-bg-2) !important; }
.bg-200 { background-color: var(--bw-bg-3) !important; }
.bg-300 { background-color: var(--bw-bg-4) !important; }

/* Falcon "navbar-light" body bg override from layouts inline */
.navbar-light { background-color: transparent !important; }

/* Form-control sm — redundant with section 6, kept for legacy specificity */
.form-control.form-control-sm {
  border: 1px solid var(--bw-border-strong) !important;
  border-radius: 8px !important;
  background: var(--bw-bg-2) !important;
  color: var(--bw-text) !important;
  box-shadow: none !important;
}

/* ---- 19b. EXTRA CONTRAST FORCES (catch white-styled inputs) -------- */
/* Any input/select/textarea with inline white background → force dark */
input[style*="background"][style*="#fff"],
input[style*="background"][style*="#FFF"],
input[style*="background"][style*="white"],
select[style*="background"][style*="#fff"],
textarea[style*="background"][style*="#fff"] {
  background: var(--bw-bg-2) !important;
  color: var(--bw-text) !important;
}

/* AdminLTE / Bootstrap 4 legacy classes */
.bs-stepper input,
.bs-stepper select,
.bs-stepper textarea {
  background-color: var(--bw-bg-2) !important;
  color: var(--bw-text) !important;
  border-color: var(--bw-border-strong) !important;
}

/* Plain html dropdown (raw <select>) inside AdminLTE login forms */
.login-page select,
.register-page select,
body.hold-transition select {
  background-color: var(--bw-bg-2) !important;
  color: var(--bw-text) !important;
}

/* Datepicker / flatpickr / bootstrap-datepicker dark coverage */
.flatpickr-calendar, .datepicker, .ui-datepicker, .bootstrap-datetimepicker-widget {
  background: var(--bw-bg-3) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border) !important;
  box-shadow: var(--bw-shadow-lg) !important;
}
.flatpickr-day, .datepicker td, .ui-datepicker td a {
  color: var(--bw-text) !important;
  background: transparent !important;
}
.flatpickr-day:hover, .datepicker td:hover, .ui-datepicker td a:hover {
  background: var(--bw-elev-2) !important;
  color: var(--bw-orange-300) !important;
}
.flatpickr-day.selected, .datepicker td.active, .ui-datepicker td a.ui-state-active {
  background: var(--bw-gradient-orange) !important;
  color: #fff !important;
}

/* ---- 20. RESPONSIVE TWEAKS ------------------------------------------ */
@media (max-width: 768px) {
  .card { border-radius: 12px !important; }
  .btn { border-radius: 9px !important; }
}

/* ---- 21. SELECTED-CARD / SELECTED-CHIP (brandwaveapp.com style) ----
   Removes light backgrounds from "selected" cards/chips/options.
   Selected = dark surface + orange gradient ring + soft orange glow.
   Layout is preserved — only colors, borders, glow, and animations change. */

/* --- 21a. Generic selected/active card states --- */
.card.selected,
.card.is-selected,
.card.active,
.card[aria-selected="true"],
.card[data-selected="true"] {
  background: linear-gradient(180deg, #1A2030 0%, #131826 100%) !important;
  border: 1px solid var(--bw-border-orange) !important;
  box-shadow:
    0 0 0 1px rgba(var(--bw-orange-glow), .35),
    0 10px 30px rgba(var(--bw-orange-glow), .25),
    0 0 0 4px rgba(var(--bw-orange-glow), .08) !important;
  position: relative;
}
.card.selected::before,
.card.is-selected::before,
.card.active::before,
.card[aria-selected="true"]::before,
.card[data-selected="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, rgba(var(--bw-orange-glow), .10), transparent 60%);
}

/* --- 21b. Campaign-chat option pill buttons (.option-btn) --- */
.option-btn {
  background: var(--bw-bg-3) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border-strong) !important;
  font-weight: 500;
}
.option-btn:hover {
  background: var(--bw-bg-4) !important;
  color: var(--bw-text) !important;
  border-color: var(--bw-border-orange) !important;
  box-shadow: 0 0 0 3px rgba(var(--bw-orange-glow), .12);
}
.option-btn.selected,
.option-btn.is-selected,
.option-btn[aria-pressed="true"] {
  background: var(--bw-gradient-orange) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  box-shadow:
    0 0 0 1px rgba(var(--bw-orange-glow), .45),
    0 8px 22px rgba(var(--bw-orange-glow), .35) !important;
}
.option-btn.selected:hover {
  background: linear-gradient(135deg, #FF9A4D 0%, #FF7A1A 55%, #FF6A00 100%) !important;
  border-color: transparent !important;
  transform: translateY(-1px);
}

/* --- 21c. Service-option cards (signup_photographer, etc.) --- */
.service-option label,
.service-card,
.selectable-card label {
  background: var(--bw-bg-3) !important;
  background-color: var(--bw-bg-3) !important;
  border: 2px solid var(--bw-border-strong) !important;
  color: var(--bw-text) !important;
  border-radius: 12px !important;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.service-option label:hover,
.service-card:hover,
.selectable-card label:hover {
  background: var(--bw-bg-4) !important;
  border-color: var(--bw-border-orange) !important;
  color: var(--bw-text) !important;
}
.service-option input:checked + label,
.service-option label.selected,
.service-card.selected,
.selectable-card input:checked + label,
.selectable-card.selected {
  background: linear-gradient(135deg, rgba(255,138,61,.18) 0%, rgba(255,106,0,.10) 100%) !important;
  background-color: rgba(255,122,26,.08) !important;
  border-color: var(--bw-orange-500) !important;
  color: var(--bw-orange-300) !important;
  box-shadow:
    0 0 0 1px rgba(var(--bw-orange-glow), .35),
    0 8px 24px rgba(var(--bw-orange-glow), .28),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  transform: translateY(-1px);
}

/* --- 21d. Brand-tile / influencer-tile / creator-card "selected" patterns --- */
.brand-tile.selected, .brand-tile.active,
.influencer-tile.selected, .influencer-tile.active,
.influencer-card.selected, .influencer-card.active,
.creator-card.selected, .creator-card.active,
[class*="-tile"].selected, [class*="-tile"].active,
[class*="-card"].selected, [class*="-card"].active {
  background: linear-gradient(180deg, #1A2030 0%, #131826 100%) !important;
  border: 1px solid var(--bw-orange-500) !important;
  box-shadow:
    0 0 0 1px rgba(var(--bw-orange-glow), .35),
    0 10px 28px rgba(var(--bw-orange-glow), .28) !important;
  outline: none !important;
}
[class*="-tile"].selected img,
[class*="-card"].selected img,
.influencer-card.selected .img-thumbnail,
.creator-card.selected .img-thumbnail {
  border-color: var(--bw-orange-500) !important;
  box-shadow: 0 0 0 2px rgba(var(--bw-orange-glow), .35);
}

/* --- 21e. Table-row "selected" pattern --- */
tr.selected, tr.is-selected, tr.active,
.table-hover tbody tr.selected, .table-hover tbody tr.is-selected,
.page-table tbody tr.selected, .page-table tbody tr.is-selected {
  background: linear-gradient(90deg, rgba(var(--bw-orange-glow), .14) 0%, rgba(var(--bw-orange-glow), .04) 100%) !important;
  box-shadow: inset 3px 0 0 var(--bw-orange-500);
}
tr.selected > *, tr.is-selected > *, tr.active > * {
  background-color: transparent !important;
  color: var(--bw-text) !important;
}

/* --- 21f. Campaign-chat page hardcoded white surfaces (visual-only) --- */
.company-campaign-chat-page .page-title-header {
  background: linear-gradient(180deg, rgba(var(--bw-orange-glow), .10) 0%, var(--bw-bg-2) 100%) !important;
  border-bottom: 1px solid var(--bw-border) !important;
}
.company-campaign-chat-page .chat-container {
  background: var(--bw-bg-2) !important;
  border: 1px solid var(--bw-border) !important;
  border-radius: 14px;
}
.company-campaign-chat-page .chat-messages {
  background: var(--bw-bg-1) !important;
}
.company-campaign-chat-page .chat-input-area {
  background: var(--bw-bg-2) !important;
  border-top: 1px solid var(--bw-border) !important;
}
.company-campaign-chat-page .message-bubble.bot {
  background: var(--bw-bg-3) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border);
}
.company-campaign-chat-page .message-bubble.user {
  background: var(--bw-gradient-orange) !important;
  color: #fff !important;
  box-shadow: var(--bw-glow-orange-sm);
}
.company-campaign-chat-page .message-bubble.review {
  background: rgba(251,191,36,.10) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(251,191,36,.35) !important;
}
.company-campaign-chat-page .company-campaign-chat-back rect {
  fill: rgba(var(--bw-orange-glow), .15) !important;
}
.company-campaign-chat-page .company-campaign-chat-back path {
  fill: var(--bw-text) !important;
}

/* --- 21g. Falcon kanban / column "selected" --- */
.kanban-column.selected,
.kanban-item.selected {
  background: linear-gradient(180deg, #1A2030 0%, #131826 100%) !important;
  border: 1px solid var(--bw-orange-500) !important;
  box-shadow: 0 0 0 1px rgba(var(--bw-orange-glow), .3), 0 8px 22px rgba(var(--bw-orange-glow), .25) !important;
}

/* --- 21h. Soft entrance animation for selection state change --- */
@keyframes bw-select-pop {
  0% { box-shadow: 0 0 0 0 rgba(var(--bw-orange-glow), .55); }
  100% { box-shadow: 0 0 0 8px rgba(var(--bw-orange-glow), 0); }
}
.option-btn.selected,
.service-option input:checked + label,
.card.selected, .card.active,
[class*="-card"].selected, [class*="-tile"].selected {
  animation: bw-select-pop .55s ease-out;
}

/* Print: keep light-on-white printable */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .card, .table, .alert { background: #fff !important; color: #000 !important; box-shadow: none !important; border-color: #ccc !important; }
}

/* =====================================================================
   ULTRA-SPECIFICITY CATCH-ALL (must be at the very end of the file)
   Page-scoped <style> blocks with !important were beating my external CSS.
   We use `:not(#__bw_never_match__)` trick — `#x` selector has specificity 100,
   `:not()` inherits the max specificity of its argument. This crushes any
   reasonable page-scoped class-based rule (typical specificity 20–40).
   The id `#__bw_never_match__` is never used anywhere, so the :not() always
   matches everything (= no behavioral change, only specificity boost).
   ===================================================================== */

/* Inputs / selects / textareas — beat any page-scoped !important whites
   Double :not(#id) gives specificity 201, crushing rules with #id selectors */
input:not(#__bw_never__):not(#__bw_n2__),
select:not(#__bw_never__):not(#__bw_n2__),
textarea:not(#__bw_never__):not(#__bw_n2__),
.form-control:not(#__bw_never__):not(#__bw_n2__),
.form-select:not(#__bw_never__):not(#__bw_n2__) {
  background-color: var(--bw-bg-2) !important;
  background-image: none;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border-strong) !important;
  -webkit-text-fill-color: var(--bw-text) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Restore native rendering for non-text inputs (checkboxes, radios, etc.) */
input[type="checkbox"]:not(#__bw_never__),
input[type="radio"]:not(#__bw_never__),
input[type="range"]:not(#__bw_never__),
input[type="color"]:not(#__bw_never__),
input[type="file"]:not(#__bw_never__),
input[type="submit"]:not(#__bw_never__),
input[type="button"]:not(#__bw_never__),
input[type="reset"]:not(#__bw_never__),
input[type="image"]:not(#__bw_never__) {
  background-color: initial !important;
  border: initial;
  -webkit-text-fill-color: initial !important;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}
input[type="checkbox"]:not(#__bw_never__),
input[type="radio"]:not(#__bw_never__),
.form-check-input:not(#__bw_never__) {
  background-color: var(--bw-bg-2) !important;
  border: 1.5px solid var(--bw-border-strong) !important;
}
input[type="checkbox"]:checked:not(#__bw_never__),
input[type="radio"]:checked:not(#__bw_never__),
.form-check-input:checked:not(#__bw_never__) {
  background-color: var(--bw-orange-500) !important;
  border-color: var(--bw-orange-500) !important;
}

/* Inputs marked readonly with light inline gray (#f8f9fa, #eee, etc.) */
input[readonly]:not(#__bw_never__):not(#__bw_n2__),
input[disabled]:not(#__bw_never__):not(#__bw_n2__),
select[disabled]:not(#__bw_never__):not(#__bw_n2__),
textarea[readonly]:not(#__bw_never__):not(#__bw_n2__),
textarea[disabled]:not(#__bw_never__):not(#__bw_n2__) {
  background-color: var(--bw-bg-1) !important;
  color: var(--bw-text-muted) !important;
  border-color: var(--bw-border) !important;
}

/* Placeholder always readable */
input:not(#__bw_never__)::placeholder,
textarea:not(#__bw_never__)::placeholder { color: var(--bw-text-dim) !important; opacity: 1 !important; }

/* Focus state — orange glow always wins (specificity 200+ to beat #id rules) */
input:focus:not(#__bw_never__):not(#__bw_n2__),
select:focus:not(#__bw_never__):not(#__bw_n2__),
textarea:focus:not(#__bw_never__):not(#__bw_n2__),
.form-control:focus:not(#__bw_never__):not(#__bw_n2__),
.form-select:focus:not(#__bw_never__):not(#__bw_n2__) {
  border-color: var(--bw-orange-500) !important;
  box-shadow: 0 0 0 3px rgba(var(--bw-orange-glow), .25) !important;
  outline: none !important;
  background-color: var(--bw-bg-2) !important;
  color: var(--bw-text) !important;
}

/* Select arrow — always force custom chevron (defeats page-scoped resets) */
select:not(#__bw_never__):not(#__bw_n2__),
.form-select:not(#__bw_never__):not(#__bw_n2__) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A5ADBE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 14px 14px !important;
  padding-right: 2.4rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Select2 — beat every page-scoped !important rule */
.select2-container--default .select2-selection--single:not(#__bw_never__),
.select2-container--default .select2-selection--multiple:not(#__bw_never__) {
  background-color: var(--bw-bg-2) !important;
  border: 1px solid var(--bw-border-strong) !important;
  color: var(--bw-text) !important;
  border-radius: 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered:not(#__bw_never__) {
  color: var(--bw-text) !important;
}
.select2-dropdown:not(#__bw_never__) {
  background-color: var(--bw-bg-3) !important;
  border-color: var(--bw-border) !important;
  color: var(--bw-text) !important;
}
.select2-results__option:not(#__bw_never__) { color: var(--bw-text) !important; }
.select2-search--dropdown .select2-search__field:not(#__bw_never__) {
  background: var(--bw-bg-2) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border-strong) !important;
}

/* Inline style="background-color: #f8f9fa | #fff | #eee | white" — kill all light inline backgrounds */
[style*="background-color: #f8f9fa"]:not(#__bw_never__),
[style*="background-color:#f8f9fa"]:not(#__bw_never__),
[style*="background-color: #f9f9f9"]:not(#__bw_never__),
[style*="background-color:#f9f9f9"]:not(#__bw_never__),
[style*="background-color: #fff"]:not(#__bw_never__),
[style*="background-color:#fff"]:not(#__bw_never__),
[style*="background-color: #FFF"]:not(#__bw_never__),
[style*="background-color: #ffffff"]:not(#__bw_never__),
[style*="background-color: #FFFFFF"]:not(#__bw_never__),
[style*="background-color: white"]:not(#__bw_never__),
[style*="background:#fff"]:not(#__bw_never__),
[style*="background: #fff"]:not(#__bw_never__),
[style*="background: white"]:not(#__bw_never__),
[style*="background:white"]:not(#__bw_never__),
[style*="background: #FFFFFF"]:not(#__bw_never__),
[style*="background:#FFFFFF"]:not(#__bw_never__),
[style*="background-color: #eeeeee"]:not(#__bw_never__),
[style*="background-color: #eee"]:not(#__bw_never__),
[style*="background-color:#eee"]:not(#__bw_never__) {
  background: var(--bw-bg-3) !important;
  background-color: var(--bw-bg-3) !important;
  color: var(--bw-text) !important;
}

/* Light pastel stat cards (e.g., reports page) — get tinted dark surfaces */
[style*="background-color: #DDDDFB"]:not(#__bw_never__),
[style*="background-color:#DDDDFB"]:not(#__bw_never__) {
  background: linear-gradient(135deg, rgba(96,165,250,.14), rgba(96,165,250,.04)) !important;
  background-color: rgba(96,165,250,.08) !important;
  border: 1px solid rgba(96,165,250,.25);
  color: var(--bw-text) !important;
}
[style*="background-color: #D0F8E8"]:not(#__bw_never__),
[style*="background-color:#D0F8E8"]:not(#__bw_never__) {
  background: linear-gradient(135deg, rgba(52,211,153,.14), rgba(52,211,153,.04)) !important;
  background-color: rgba(52,211,153,.08) !important;
  border: 1px solid rgba(52,211,153,.25);
  color: var(--bw-text) !important;
}
[style*="background-color: #E7F8D0"]:not(#__bw_never__),
[style*="background-color:#E7F8D0"]:not(#__bw_never__) {
  background: linear-gradient(135deg, rgba(163,230,53,.14), rgba(163,230,53,.04)) !important;
  background-color: rgba(163,230,53,.08) !important;
  border: 1px solid rgba(163,230,53,.25);
  color: var(--bw-text) !important;
}
[style*="background-color: #D0E9F8"]:not(#__bw_never__),
[style*="background-color:#D0E9F8"]:not(#__bw_never__) {
  background: linear-gradient(135deg, rgba(96,165,250,.14), rgba(96,165,250,.04)) !important;
  background-color: rgba(96,165,250,.08) !important;
  border: 1px solid rgba(96,165,250,.25);
  color: var(--bw-text) !important;
}
[style*="background:#fff8e1"]:not(#__bw_never__), [style*="background: #fff8e1"]:not(#__bw_never__) {
  background: rgba(251,191,36,.10) !important; color: var(--bw-text) !important;
}
[style*="background:#fce7f3"]:not(#__bw_never__), [style*="background: #fce7f3"]:not(#__bw_never__) {
  background: rgba(244,114,182,.10) !important; color: var(--bw-text) !important;
}
[style*="background:#d1fae5"]:not(#__bw_never__), [style*="background: #d1fae5"]:not(#__bw_never__) {
  background: rgba(52,211,153,.10) !important; color: var(--bw-text) !important;
}
[style*="background:#eff6ff"]:not(#__bw_never__), [style*="background: #eff6ff"]:not(#__bw_never__) {
  background: rgba(96,165,250,.10) !important; color: var(--bw-text) !important;
}
[style*="background: #DCDCDC"]:not(#__bw_never__),
[style*="background:#DCDCDC"]:not(#__bw_never__) {
  background: var(--bw-bg-4) !important;
  color: var(--bw-text) !important;
}

/* Inline color: #000 / black on inline-styled elements */
[style*="color: #000"]:not(#__bw_never__),
[style*="color:#000"]:not(#__bw_never__),
[style*="color: black"]:not(#__bw_never__),
[style*="color:black"]:not(#__bw_never__) {
  color: var(--bw-text) !important;
}
/* Whitelist — keep text dark on orange BUTTON backgrounds where it'd be unreadable */
.btn[style*="background: #fb8014"]:not(#__bw_never__),
.btn[style*="background:#fb8014"]:not(#__bw_never__),
[style*="background: #fb8014"]:not(#__bw_never__) { color: #fff !important; }

/* Page-scoped white surfaces in partials (e.g., chat panels, nav drawers) */
.chat-container:not(#__bw_never__),
.chat-wrapper:not(#__bw_never__),
.chat-input-area:not(#__bw_never__),
.chat-messages:not(#__bw_never__),
.firebase-chat-wrapper:not(#__bw_never__),
.bw-wa-shell:not(#__bw_never__),
.bw-wa-sidebar:not(#__bw_never__),
.bw-wa-sidebar-top:not(#__bw_never__),
.bw-wa-search:not(#__bw_never__),
.bw-wa-list:not(#__bw_never__),
.bw-wa-thread:not(#__bw_never__),
.bw-wa-thread-top:not(#__bw_never__),
.bw-wa-thread-body:not(#__bw_never__),
.bw-wa-thread-input:not(#__bw_never__),
.bw-wa-item:not(#__bw_never__),
.bw-wa-bubble.them:not(#__bw_never__),
.bw-chat-wrap:not(#__bw_never__),
.bw-chat-messages:not(#__bw_never__),
.bw-chat-input:not(#__bw_never__),
.bw-bubble.them:not(#__bw_never__) {
  background-color: var(--bw-bg-2) !important;
  color: var(--bw-text) !important;
  border-color: var(--bw-border) !important;
}
.bw-wa-sidebar-top:not(#__bw_never__),
.bw-wa-search:not(#__bw_never__) {
  background: var(--bw-bg-3) !important;
}
.bw-wa-bubble.them:not(#__bw_never__),
.bw-bubble.them:not(#__bw_never__) {
  background: var(--bw-bg-3) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border) !important;
}
.bw-wa-bubble.me:not(#__bw_never__),
.bw-bubble.me:not(#__bw_never__) {
  background: var(--bw-gradient-orange) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(var(--bw-orange-glow), .28) !important;
}
.bw-wa-bubble.me::after:not(#__bw_never__),
.bw-bubble.me::after:not(#__bw_never__) { background: #E25800 !important; }
.bw-wa-bubble.them::after:not(#__bw_never__),
.bw-bubble.them::after:not(#__bw_never__) {
  background: var(--bw-bg-3) !important;
  border-left-color: var(--bw-border) !important;
  border-bottom-color: var(--bw-border) !important;
}

/* Stat-icon circles in dashboards (light pastel backgrounds) */
.stat-icon[style*="background"]:not(#__bw_never__) {
  background: var(--bw-bg-4) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border);
}

/* Modal-ish inline divs (e.g., index.blade.php signup modal) */
[id*="signupModal"]:not(#__bw_never__),
[id*="Modal"][style*="background:#fff"]:not(#__bw_never__),
[id*="Modal"][style*="background: #fff"]:not(#__bw_never__) {
  background: var(--bw-bg-3) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border);
  box-shadow: var(--bw-shadow-lg) !important;
}

/* Modal close × button on dark — keep visible */
[id*="signupModal"] [id*="Close"]:not(#__bw_never__),
button[style*="color:#666"]:not(#__bw_never__),
button[style*="color: #666"]:not(#__bw_never__) {
  color: var(--bw-text-muted) !important;
}

/* Sidebar nav active orange wrap — keep dark icon container readable */
.company-sidebar-links .nav-link.active .company-nav-icon-wrap:not(#__bw_never__) {
  background: linear-gradient(135deg, #FF8A3D 0%, #FF6A00 55%, #E25800 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(255, 122, 26, 0.35) !important;
}

/* WhatsApp-style chats list: tints */
.bw-wa-search input:not(#__bw_never__) {
  background: var(--bw-bg-2) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border-strong) !important;
}
.bw-wa-title b:not(#__bw_never__) { color: var(--bw-text) !important; }
.bw-wa-title span:not(#__bw_never__) { color: var(--bw-text-muted) !important; }

/* Keep the original orange brand variables aliased to our system so any
   page using `var(--bw-brand)` continues to render correctly under the new theme */
html body { --bw-brand: var(--bw-orange-500); --bw-brand-dark: var(--bw-orange-700); --bw-brand-soft: rgba(255, 122, 26, 0.14); --bw-brand-ink: var(--bw-text); }

/* =====================================================================
   PAGE-SCOPED <style> BLOCK OVERRIDES
   Many pages (reports, invoices, coupons, products, campaigns) ship their
   own inline <style> with light gradients (#fff) + dark text (#141414).
   These rules win at high specificity so dark theme stays consistent
   without editing 69 individual blade files.
   ===================================================================== */

/* Remap legacy --bw-ink to theme text on dark. Using html[data-bs-theme] adds 11 specificity.
   Page-scoped `.classname { --bw-ink: #141414 }` is specificity 10 — we win at 11. */
html[data-bs-theme="dark"] {
  --bw-ink: #F5F7FA;
  --bs-table-accent-bg: rgba(255, 255, 255, 0.025);
}
html[data-bs-theme="light"] {
  --bw-ink: #141414;
}

/* Common page-scoped class patterns: light orange gradient backgrounds → dark surfaces */
html[data-bs-theme="dark"] .tbl-head-bg:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .tbl-head-bg th:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .page-table thead.tbl-head-bg th:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .page-table thead th:not(#__bw_never__):not(#__bw_n2__) {
  background: var(--bw-bg-4) !important;
  background-image: none !important;
  color: var(--bw-text) !important;
  border-bottom: 1px solid var(--bw-border-strong) !important;
}

/* Page title headers with linear-gradient(... #fff) */
html[data-bs-theme="dark"] .page-title-header:not(#__bw_never__):not(#__bw_n2__) {
  background: linear-gradient(180deg, rgba(255,122,26,.10) 0%, var(--bw-bg-2) 100%) !important;
  border-bottom: 1px solid var(--bw-border) !important;
}
html[data-bs-theme="dark"] .page-title:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .page-title-header h1:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .page-title-header h2:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .page-title-header h3:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .page-title-header h4:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .page-title-header h5:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .page-title-header h6:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .page-title-header b:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-text) !important;
}

/* Page cards (used everywhere) */
html[data-bs-theme="dark"] .card.page-card:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .page-card:not(#__bw_never__):not(#__bw_n2__) {
  background: linear-gradient(180deg, var(--bw-bg-3) 0%, var(--bw-bg-2) 100%) !important;
  background-color: var(--bw-bg-3) !important;
  border: 1px solid var(--bw-border) !important;
  color: var(--bw-text) !important;
}

/* Stat cards used across reports (user_coupons, ecommerce_orders, etc.) — keep tinted but dark */
html[data-bs-theme="dark"] [class*="-stat--total"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat--redeemed"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat--not"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat--amount"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat--count"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat--pending"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat--completed"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat--orders"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat--revenue"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class$="-stat"]:not(#__bw_never__):not(#__bw_n2__) {
  background: linear-gradient(135deg, rgba(255,122,26,.12) 0%, var(--bw-bg-3) 100%) !important;
  background-color: var(--bw-bg-3) !important;
  border: 1px solid var(--bw-border) !important;
  color: var(--bw-text) !important;
}
html[data-bs-theme="dark"] [class*="-stat"] p:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat"] small:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat"] span:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-text-muted) !important;
}
html[data-bs-theme="dark"] [class*="-stat"] h2:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat"] h3:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat"] h4:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-stat"] h5:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-orange-300) !important;
}

/* Filter row labels (col-form-label with color: #3a3a3a / dark) */
html[data-bs-theme="dark"] .col-form-label:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .filter-row .col-form-label:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .filter-row label:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-text) !important;
  font-weight: 500;
}

/* SVG icons inside labels — use orange brand color */
html[data-bs-theme="dark"] .filter-row label svg path[fill="#1E1E1E"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .filter-row label svg path[fill="black"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .col-form-label svg path[fill="#1E1E1E"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .col-form-label svg path[fill="black"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] label svg path[fill="black"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] label svg path[fill="#000"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] label svg path[fill="#000000"]:not(#__bw_never__):not(#__bw_n2__) {
  fill: var(--bw-orange-500) !important;
}
/* Page-back-button SVGs (path fill="black") */
html[data-bs-theme="dark"] [class*="-back"] svg path[fill="black"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-back"] svg path[fill="#000"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] [class*="-back"] svg rect[fill="#E8E8E8"]:not(#__bw_never__):not(#__bw_n2__) {
  fill: var(--bw-text) !important;
}
html[data-bs-theme="dark"] [class*="-back"] svg rect[fill]:not([fill="none"]):not(#__bw_never__):not(#__bw_n2__) {
  fill: rgba(255, 122, 26, 0.18) !important;
}

/* Striped table odd rows: cancel page-scoped --bs-table-accent-bg overrides */
html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] table.table-striped > tbody > tr:nth-of-type(odd) > *:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] table.dataTable.stripe > tbody > tr.odd > *:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] table.dataTable.display > tbody > tr.odd > *:not(#__bw_never__):not(#__bw_n2__) {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.025) !important;
  background-color: rgba(255, 255, 255, 0.025) !important;
  color: var(--bw-text) !important;
}
html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > *:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] table.dataTable.stripe > tbody > tr.even > *:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] table.dataTable.display > tbody > tr.even > *:not(#__bw_never__):not(#__bw_n2__) {
  background-color: transparent !important;
  color: var(--bw-text) !important;
}

/* Page-scoped pagination inside reports (orange-on-light → orange-on-dark) */
html[data-bs-theme="dark"] .pagination .page-link:not(#__bw_never__):not(#__bw_n2__) {
  background: var(--bw-bg-3) !important;
  color: var(--bw-orange-300) !important;
  border: 1px solid var(--bw-border) !important;
}
html[data-bs-theme="dark"] .pagination .page-item.active .page-link:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .pagination .active.page-link:not(#__bw_never__):not(#__bw_n2__) {
  background: var(--bw-gradient-orange) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--bw-glow-orange-sm) !important;
}

/* Search/reset filter buttons — page-scoped versions */
html[data-bs-theme="dark"] .search-btn:not(#__bw_never__):not(#__bw_n2__) {
  background: var(--bw-gradient-orange) !important;
  background-color: var(--bw-orange-500) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--bw-glow-orange-sm) !important;
}
html[data-bs-theme="dark"] .reset-btn:not(#__bw_never__):not(#__bw_n2__) {
  background: var(--bw-bg-4) !important;
  border: 1px solid var(--bw-border-strong) !important;
  color: var(--bw-text) !important;
}
html[data-bs-theme="dark"] .reset-btn:hover:not(#__bw_never__):not(#__bw_n2__) {
  background: var(--bw-bg-5) !important;
  border-color: var(--bw-border-orange) !important;
}

/* Page-scoped <style> often paints linear-gradient with #fff → dark on dark theme */
html[data-bs-theme="dark"] *:not(#__bw_never__):not(#__bw_n2__)[style*="background"][style*="#fff"],
html[data-bs-theme="dark"] *:not(#__bw_never__):not(#__bw_n2__)[style*="linear-gradient"][style*="#fff"] {
  background: var(--bw-bg-3) !important;
  color: var(--bw-text) !important;
}

/* Form-control SELECT2 — when select2 is initialized, the select gets class
   .select2-hidden-accessible and a sibling .select2-container is rendered.
   The .form-control.select2 (raw select before init) should also be dark. */
html[data-bs-theme="dark"] select.form-control.select2:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] select.select2:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-hidden-accessible:not(#__bw_never__):not(#__bw_n2__) + .select2-container .select2-selection,
html[data-bs-theme="dark"] .select2-container .select2-selection:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-selection.form-select:not(#__bw_never__):not(#__bw_n2__) {
  background-color: var(--bw-bg-2) !important;
  background: var(--bw-bg-2) !important;
  border: 1px solid var(--bw-border-strong) !important;
  color: var(--bw-text) !important;
  border-radius: 10px !important;
  min-height: 38px !important;
}
/* Select2 inner "rendered" area — the visible text container. Must be dark too. */
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-container .select2-selection .select2-selection__rendered:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection .select2-selection__rendered:not(#__bw_never__):not(#__bw_n2__) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--bw-text) !important;
  line-height: 36px !important;
  padding-left: 0.85rem !important;
  padding-right: 2.4rem !important;
}
/* Select2 chevron area — make it blend with the dark widget */
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-container .select2-selection .select2-selection__arrow:not(#__bw_never__):not(#__bw_n2__) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  height: 100% !important;
  width: 32px !important;
  right: 4px !important;
  top: 0 !important;
}
html[data-bs-theme="dark"] .select2-container--default .select2-selection__placeholder:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-text-dim) !important;
}
/* Select2 input area within multi-select */
html[data-bs-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-container .select2-search__field:not(#__bw_never__):not(#__bw_n2__) {
  background: transparent !important;
  color: var(--bw-text) !important;
}
/* Select2 dropdown panel */
html[data-bs-theme="dark"] .select2-container--default .select2-dropdown:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-dropdown:not(#__bw_never__):not(#__bw_n2__) {
  background-color: var(--bw-bg-3) !important;
  background: var(--bw-bg-3) !important;
  border-color: var(--bw-border) !important;
  color: var(--bw-text) !important;
}
/* The native <select.form-control.select2> element BEFORE Select2 inits — also dark */
html[data-bs-theme="dark"] select.form-control:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .filter-row select.form-control:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .company-campaign-page select.form-control:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .company-campaign-page .form-control.select2:not(#__bw_never__):not(#__bw_n2__) {
  background-color: var(--bw-bg-2) !important;
  background: var(--bw-bg-2) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border-strong) !important;
}

/* Date-range inputs (filter row .date-range-wrap input) */
html[data-bs-theme="dark"] .date-range-wrap input:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .filter-row input:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .filter-row select:not(#__bw_never__):not(#__bw_n2__) {
  background-color: var(--bw-bg-2) !important;
  color: var(--bw-text) !important;
  border-color: var(--bw-border-strong) !important;
}

/* Generic: Any element with `--bw-ink` referenced as color → use theme text on dark */
html[data-bs-theme="dark"] [style*="color: var(--bw-ink)"]:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-text) !important;
}

/* "of N entries" footer text */
html[data-bs-theme="dark"] .dataTables_info:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-text-muted) !important;
}

/* Employees page — Counter / Staff badges
   Page inline-style sets:
     .bg-info  → background rgba(251,128,20,.18) + color #4a2a00 (unreadable on dark)
     .bg-primary → background var(--bw-brand) + default white text (orange-on-orange in dark)
   Force readable contrast in dark mode while keeping the orange brand. */
html[data-bs-theme="dark"] .company-employees-page .badge.bg-info:not(#__bw_never__):not(#__bw_n2__) {
  background-color: rgba(251, 128, 20, 0.22) !important;
  color: #ffd9b3 !important;
  border: 1px solid rgba(251, 128, 20, 0.55) !important;
  font-weight: 600 !important;
  padding: 0.35em 0.7em !important;
}
html[data-bs-theme="dark"] .company-employees-page .badge.bg-primary:not(#__bw_never__):not(#__bw_n2__) {
  background-color: var(--bw-brand, #fb8014) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-weight: 600 !important;
  padding: 0.35em 0.7em !important;
}
html[data-bs-theme="dark"] .company-employees-page .badge.bg-secondary:not(#__bw_never__):not(#__bw_n2__) {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--bw-text, #fff) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  font-weight: 600 !important;
  padding: 0.35em 0.7em !important;
}

/* ============================================================
   Add Influencer page — Rating labels (inline color: green/blue/orange/gray/red)
   The inline styles are too dark on the dark theme. Brighten them
   to a readable on-dark palette while keeping their semantic meaning.
   ============================================================ */
html[data-bs-theme="dark"] .rating-labels-wrap label[style*="color:green"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .rating-labels-wrap label[style*="color: green"]:not(#__bw_never__):not(#__bw_n2__) {
  color: #4ade80 !important;          /* lime-400, readable on dark */
}
html[data-bs-theme="dark"] .rating-labels-wrap label[style*="color:blue"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .rating-labels-wrap label[style*="color: blue"]:not(#__bw_never__):not(#__bw_n2__) {
  color: #60a5fa !important;          /* sky-400 */
}
html[data-bs-theme="dark"] .rating-labels-wrap label[style*="color:orange"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .rating-labels-wrap label[style*="color: orange"]:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-orange-500, #FF7A1A) !important;
}
html[data-bs-theme="dark"] .rating-labels-wrap label[style*="color:gray"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .rating-labels-wrap label[style*="color: gray"]:not(#__bw_never__):not(#__bw_n2__) {
  color: #cbd5e1 !important;          /* slate-300 */
}
html[data-bs-theme="dark"] .rating-labels-wrap label[style*="color:red"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .rating-labels-wrap label[style*="color: red"]:not(#__bw_never__):not(#__bw_n2__) {
  color: #f87171 !important;          /* red-400 */
}
html[data-bs-theme="dark"] .rating-labels-wrap label:not(#__bw_never__):not(#__bw_n2__) {
  margin-right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Rating radios — explicit, custom-painted appearance so they're always
   visible and clearly show selected state in BOTH light and dark themes.
   (The native radio control is unstyled and looks hollow on this layout.) */
.rating-labels-wrap input[type="radio"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid currentColor !important;
  background: transparent !important;
  background-color: transparent !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  cursor: pointer !important;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.rating-labels-wrap input[type="radio"]:checked {
  border-color: var(--bw-orange-500, #FF7A1A) !important;
}
.rating-labels-wrap input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bw-orange-500, #FF7A1A) !important;
  background-color: var(--bw-orange-500, #FF7A1A) !important;
}
.rating-labels-wrap input[type="radio"]:focus,
.rating-labels-wrap input[type="radio"]:focus-visible {
  outline: 2px solid rgba(251, 128, 20, 0.45) !important;
  outline-offset: 2px !important;
}
/* In LIGHT theme keep the unselected ring as a neutral gray so it pops on white */
html[data-bs-theme="light"] .rating-labels-wrap input[type="radio"] {
  border-color: #6b7280 !important;
}
html[data-bs-theme="light"] .rating-labels-wrap input[type="radio"]:checked {
  border-color: var(--bw-orange-500, #FF7A1A) !important;
}

/* ============================================================
   Select2 multi-select (Languages Known / Tags / Cities) —
   make the empty pill visible on dark and the chips orange.
   ============================================================ */
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .select2-container .select2-selection--multiple:not(#__bw_never__):not(#__bw_n2__) {
  background-color: var(--bw-bg-2, #10141C) !important;
  background: var(--bw-bg-2, #10141C) !important;
  border: 1px solid var(--bw-border-strong, rgba(255,255,255,0.18)) !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  padding: 4px 8px !important;
}
html[data-bs-theme="dark"] .select2-selection--multiple .select2-selection__choice:not(#__bw_never__):not(#__bw_n2__) {
  background-color: rgba(251, 128, 20, 0.18) !important;
  background: rgba(251, 128, 20, 0.18) !important;
  border: 1px solid rgba(251, 128, 20, 0.45) !important;
  color: #ffd9b3 !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  margin-top: 4px !important;
}
html[data-bs-theme="dark"] .select2-selection--multiple .select2-selection__choice__remove:not(#__bw_never__):not(#__bw_n2__) {
  color: #ffd9b3 !important;
  margin-right: 4px !important;
  border: none !important;
  background: transparent !important;
}

/* ============================================================
   Sidebar logo — sharper rendering, no blur from CSS scaling.
   ============================================================ */
html[data-bs-theme="dark"] .logo-small:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] img.rounded-circle.logo-small:not(#__bw_never__):not(#__bw_n2__) {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  object-fit: cover !important;
  background: #000 !important;
  background-color: #000 !important;
  border: 1.5px solid rgba(251, 128, 20, 0.55) !important;
  box-shadow: 0 0 12px rgba(251, 128, 20, 0.35) !important;
  padding: 0 !important;
}

/* ============================================================
   Dashboard — Paid Campaigns / Coupon / Top BCR Users etc.
   The page uses .text-muted-2 (very dim) and .text-black (invisible
   on dark). Force readable contrast.
   ============================================================ */
html[data-bs-theme="dark"] .company-new-dashboard .text-black:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .company-new-dashboard .card-header b:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .company-new-dashboard .card-header .text-black:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-text, #ffffff) !important;
}
html[data-bs-theme="dark"] .company-new-dashboard .text-muted-2:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .company-new-dashboard .text-muted-2 td:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .company-new-dashboard table.text-muted-2 td:not(#__bw_never__):not(#__bw_n2__) {
  color: rgba(255, 255, 255, 0.85) !important;
}
html[data-bs-theme="dark"] .company-new-dashboard .lead-muted:not(#__bw_never__):not(#__bw_n2__) {
  color: rgba(255, 255, 255, 0.72) !important;
}
html[data-bs-theme="dark"] .company-new-dashboard h1.text-black:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .company-new-dashboard h2.text-black:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-text, #ffffff) !important;
}
html[data-bs-theme="dark"] .company-new-dashboard h2.text-black b:not(#__bw_never__):not(#__bw_n2__) {
  color: var(--bw-orange-500, #FF7A1A) !important;
}
/* Hide the stock dashboard hero illustration on dark mode */
html[data-bs-theme="dark"] .company-new-dashboard-hero .col-md-7 img[src*="dashboard_new"]:not(#__bw_never__):not(#__bw_n2__),
html[data-bs-theme="dark"] .company-new-dashboard-hero .col-md-7 img[src*="dashboard-side"]:not(#__bw_never__):not(#__bw_n2__) {
  display: none !important;
}

/* ============================================================
   PRINT stylesheet — invoices/statements/receipts must print
   as proper white-paper documents regardless of dark theme.
   ============================================================ */
@media print {
  html, body, html[data-bs-theme="dark"], html[data-bs-theme="light"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
  }
  /* Force EVERYTHING to white-paper black-ink for print */
  *, *::before, *::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #000000 !important;
    border-color: #cccccc !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }
  /* Tables — keep neutral borders + readable totals row */
  table, th, td {
    border: 1px solid #cccccc !important;
    color: #000000 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  thead th, tr.btn-reveal-trigger th {
    background: #f4f4f4 !important;
    background-color: #f4f4f4 !important;
    color: #000 !important;
    font-weight: 700 !important;
  }
  /* Hide chrome that shouldn't appear on paper */
  .navbar, .navbar-vertical, .pg-menu-wrap, .page-back-btn-wrap,
  .modal, .modal-backdrop, #brandwave-theme-toggle, .dataTables_wrapper .dataTables_paginate,
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length,
  button, .btn { display: none !important; }
  /* Headings + titles dark */
  h1, h2, h3, h4, h5, h6, b, strong, .page-title, .text-black {
    color: #000000 !important;
  }
  /* Cards — flatten to plain blocks */
  .card, .card-body, .card-header, .page-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
}