/* ==========================================================================
   Bến Thành Chatbot Cockpit — Cupertino Industrial Light & Dual-Theme System
   Design System Reference: DESIGN.md (Apple HIG Light Mode + Linear Precision)
   Brand Colors: Bến Thành Royal Blue #003388, Apple Blue #0066CC, Energy Orange #FF3300
   ========================================================================== */

:root {
  color-scheme: light;
  --bt-blue: #003388;
  --bt-blue-hover: #0044aa;
  --bt-blue-glow: rgba(0, 102, 204, 0.22);
  --bt-orange: #FF3300;
  --bt-orange-hover: #e62e00;
  --bt-orange-glow: rgba(255, 51, 0, 0.22);

  /* Apple HIG System Grouped Surfaces (DESIGN.md Section 2.1) */
  --bg-void: #F5F5F7;
  --bg-base: #F5F5F7;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F8FAFC;
  --bg-tertiary: #EFEFF4;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-glass-hover: rgba(0, 51, 136, 0.04);

  --border-subtle: rgba(15, 23, 42, 0.085);
  --border-hover: rgba(0, 102, 204, 0.28);
  --border-focus: rgba(0, 102, 204, 0.55);
  --border-divider: #E5E5EA;
  --specular-rim: inset 0 1px 0 rgba(255, 255, 255, 0.90);

  --text-primary: #1D1D1F;
  --text-secondary: #424245;
  --text-muted: #6E6E73;
  --text-quaternary: #86868B;

  --accent-blue: #003388;
  --accent-apple-blue: #0066CC;
  --accent-brand-orange: #FF3300;

  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.03);
  --shadow-card-hover: 0 4px 16px rgba(0, 51, 136, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);

  /* Mapped Legacy Variables (Light Default) */
  --bt-bg: #F5F5F7;
  --bt-surface: #FFFFFF;
  --bt-surface-elevated: #F8FAFC;
  --bt-surface-solid: #FFFFFF;

  --bt-border: rgba(15, 23, 42, 0.09);
  --bt-border-focus: rgba(0, 102, 204, 0.65);

  --bt-text-white: #1D1D1F;
  --bt-text-muted: #424245;
  --bt-text-dim: #6E6E73;

  --bt-emerald: #059669;
  --bt-emerald-glow: rgba(5, 150, 105, 0.20);
  --bt-rose: #e11d48;
  --bt-rose-glow: rgba(225, 29, 72, 0.20);
  --bt-amber: #d97706;
  --bt-cyan: #0066CC;

  --font-display: 'Be Vietnam Pro', 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', "SF Mono", "Fira Code", monospace;
}

html.dark {
  color-scheme: dark;
  --bt-blue-glow: rgba(0, 51, 136, 0.45);
  --bt-orange-glow: rgba(255, 51, 0, 0.4);

  --bg-void: #09090b;
  --bg-base: #09090b;
  --bg-surface: rgba(18, 20, 28, 0.94);
  --bg-elevated: rgba(26, 29, 41, 0.95);
  --bg-tertiary: #18181b;
  --bg-glass: rgba(9, 9, 11, 0.90);
  --border-subtle: rgba(63, 63, 70, 0.45);
  --border-divider: rgba(63, 63, 70, 0.4);
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #8B9BB0;

  --bt-bg: #09090b;
  --bt-surface: rgba(18, 20, 28, 0.94);
  --bt-surface-elevated: rgba(26, 29, 41, 0.95);
  --bt-surface-solid: #11131a;

  --bt-border: rgba(63, 63, 70, 0.45);
  --bt-border-focus: rgba(0, 51, 136, 0.8);

  --bt-text-white: #f4f4f5;
  --bt-text-muted: #a1a1aa;
  --bt-text-dim: #8B9BB0;

  --bt-emerald: #10b981;
  --bt-emerald-glow: rgba(16, 185, 129, 0.35);
  --bt-rose: #f43f5e;
  --bt-rose-glow: rgba(244, 63, 94, 0.35);
  --bt-amber: #f59e0b;
  --bt-cyan: #38bdf8;
}

html {
  color-scheme: light;
  background-color: #F5F5F7;
}

html.dark {
  color-scheme: dark;
  background-color: #09090b;
}

/* Atomic Theme Switch Guard: Disable all CSS transitions/animations during theme toggle to prevent bright/dark flash */
html.bt-theme-switching,
html.bt-theme-switching *,
html.bt-theme-switching *::before,
html.bt-theme-switching *::after {
  transition: none !important;
  animation-duration: 0s !important;
}

/* Global Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bt-bg);
  color: var(--bt-text-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ThreeUI Background Canvas Layering */
#login-energy-canvas,
#cockpit-energy-canvas,
.fixed-energy-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  width: 100dvw !important;
  height: 100dvh !important;
  pointer-events: none !important;
  z-index: -10 !important;
  display: block;
}

/* Essential Anti-Slop Utility Classes */
.fixed { position: fixed !important; }
.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.pointer-events-none { pointer-events: none !important; }
.-z-10 { z-index: -10 !important; }
.z-10 { z-index: 10 !important; }
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.block { display: block !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.hidden, [hidden] { display: none !important; }
.items-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.text-center { text-align: center !important; }

/* Icon sizing utilities */
.w-3 { width: 0.75rem !important; }
.h-3 { height: 0.75rem !important; }
.w-3\.5 { width: 0.875rem !important; }
.h-3\.5 { height: 0.875rem !important; }
.w-4 { width: 1rem !important; }
.h-4 { height: 1rem !important; }
.w-5 { width: 1.25rem !important; }
.h-5 { height: 1.25rem !important; }
.w-6 { width: 1.5rem !important; }
.h-6 { height: 1.5rem !important; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite !important;
}

svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.font-mono {
  font-family: var(--font-mono);
}

.font-display {
  font-family: var(--font-display);
}

/* Elevated Card System (Zero Backdrop-Filter GPU Thrashing on Theme Switch) */
.bt-card {
  background: var(--bt-surface);
  border: 1px solid var(--bt-border);
  border-radius: 12px;
  padding: 1.25rem;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-direction: column;
}

.bt-card:hover {
  border-color: rgba(113, 113, 122, 0.7);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}

.bt-card-active {
  border-left: 3px solid var(--bt-blue);
}

.bt-card-emerald {
  border-left: 3px solid var(--bt-emerald);
}

.bt-card-rose {
  border-left: 3px solid var(--bt-rose);
}

.bt-card-orange {
  border-left: 3px solid var(--bt-orange);
}

/* Topbar Header */
.bt-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(9, 9, 11, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bt-border);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}

.bt-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  text-decoration: none;
}

.bt-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.bt-brand-pill {
  background: rgba(0, 51, 136, 0.2);
  border: 1px solid rgba(0, 51, 136, 0.5);
  color: #60a5fa;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* Topbar Clock & System Status */
.bt-topbar-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bt-clock {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--bt-text-muted);
  background: rgba(24, 24, 27, 0.6);
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(63, 63, 70, 0.4);
}

.bt-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bt-btn-label {
  font-size: 0.8125rem;
  font-weight: 500;
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .bt-btn-label {
    display: none !important;
  }
}

/* User Badge & Logout Button */
.bt-user-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(24, 24, 27, 0.75);
  border: 1px solid var(--bt-border);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  min-height: 34px;
}

.bt-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--bt-blue) 0%, #1e40af 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.bt-btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(244, 63, 94, 0.15);
  color: #fda4af;
  border: 1px solid rgba(244, 63, 94, 0.4);
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  min-height: 34px;
}

.bt-btn-logout:hover {
  background: rgba(244, 63, 94, 0.28);
  border-color: rgba(244, 63, 94, 0.7);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.25);
}

/* Sub-nav Sticky Shell & Tabs */
.bt-nav-shell {
  position: sticky;
  top: 64px;
  z-index: 45;
  background: rgba(11, 13, 18, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(63, 63, 70, 0.4);
}

.bt-nav-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

.bt-nav-bar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  background: transparent;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}

.bt-nav-bar::-webkit-scrollbar {
  display: none;
}

.bt-tab-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0 !important;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(63, 63, 70, 0.35);
  background: rgba(24, 24, 27, 0.45);
  color: var(--bt-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: all 0.15s ease;
}

.bt-tab-btn:hover {
  color: var(--bt-text-white);
  background: rgba(39, 39, 42, 0.65);
  border-color: rgba(82, 82, 91, 0.6);
}

.bt-tab-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 51, 136, 0.55) 0%, rgba(14, 165, 233, 0.22) 100%);
  border-color: rgba(56, 189, 248, 0.72);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.22);
}

/* Mobile Quick-Jump Trigger & 2x4 Grid Drawer (Hidden on Desktop) */
.bt-nav-grid-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  flex-shrink: 0;
  min-height: 36px;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: rgba(24, 24, 27, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #7dd3fc;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bt-nav-grid-btn.is-open {
  background: rgba(0, 51, 136, 0.55);
  border-color: #38bdf8;
  color: #ffffff;
}

.bt-nav-grid-count {
  background: rgba(14, 165, 233, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #bae6fd;
  border-radius: 5px;
  padding: 0.05rem 0.32rem;
  font-size: 0.65rem;
  line-height: 1.1;
}

.bt-mobile-nav-sheet {
  background: rgba(12, 14, 20, 0.98);
  border-top: 1px solid rgba(63, 63, 70, 0.5);
  border-bottom: 1px solid rgba(56, 189, 248, 0.35);
  padding: 0.65rem 0.75rem 0.8rem 0.75rem;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.75);
}

.bt-mobile-nav-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #a1a1aa;
}

.bt-mobile-nav-close {
  background: rgba(39, 39, 42, 0.6);
  border: 1px solid rgba(82, 82, 91, 0.5);
  color: #e4e4e7;
  border-radius: 5px;
  padding: 0.15rem 0.45rem;
  font-size: 0.68rem;
  cursor: pointer;
}

.bt-mobile-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.bt-mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 0.65rem;
  border-radius: 8px;
  background: rgba(24, 24, 27, 0.75);
  border: 1px solid rgba(63, 63, 70, 0.55);
  color: #d4d4d8;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bt-mobile-nav-item.active {
  background: linear-gradient(135deg, rgba(0, 51, 136, 0.65) 0%, rgba(14, 165, 233, 0.25) 100%);
  border-color: rgba(56, 189, 248, 0.85);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

/* Status Indicator Pulse */
.bt-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.bt-status-dot.online {
  background-color: var(--bt-emerald);
}

.bt-status-dot.online::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.5;
  animation: bt-pulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

.bt-status-dot.stopped {
  background-color: var(--bt-rose);
}

.bt-status-dot.warning {
  background-color: var(--bt-amber);
}

@keyframes bt-pulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(0.9); opacity: 0; }
}

/* Bento Grid System */
.bt-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem;
}

.bt-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

/* Col spans */
.col-span-12 { grid-column: span 12; }
.col-span-8 { grid-column: span 8; }
.col-span-6 { grid-column: span 6; }
.col-span-4 { grid-column: span 4; }
.col-span-3 { grid-column: span 3; }

/* KPI Cards */
.bt-kpi-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.1;
  margin: 0.65rem 0 0.25rem 0;
}

.bt-kpi-sub {
  font-size: 0.75rem;
  color: var(--bt-text-dim);
}

/* Bot Health Card Details */
.bt-bot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.bt-bot-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bt-bot-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 51, 136, 0.2);
  border: 1px solid rgba(0, 51, 136, 0.4);
  color: #60a5fa;
}

.bt-bot-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bt-text-white);
}

.bt-bot-role {
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--bt-text-muted);
}

.bt-bot-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(63, 63, 70, 0.3);
}

.bt-metric-item {
  background: rgba(24, 24, 27, 0.5);
  border: 1px solid rgba(63, 63, 70, 0.3);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
}

.bt-metric-label {
  font-size: 0.6875rem;
  color: var(--bt-text-dim);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bt-metric-val {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

/* Primary & Action Buttons */
.bt-btn-primary {
  background: linear-gradient(135deg, #003388 0%, #0284c7 100%);
  color: #ffffff;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.8125rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-shadow: 0 2px 8px rgba(0, 51, 136, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bt-btn-primary:hover {
  background: linear-gradient(135deg, #002666 0%, #0369a1 100%);
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35), 0 4px 12px rgba(0, 51, 136, 0.5);
  transform: translateY(-1px);
}

.bt-btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Dark-Tech Chart Tooltip */
.bt-chart-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 140px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(9, 14, 26, 0.96);
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 12px rgba(2, 132, 199, 0.25);
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 40;
}

.group:hover .bt-chart-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-2px);
}

.bt-btn-energy {
  background: var(--bt-orange);
  color: #ffffff;
  border: 1px solid rgba(255, 51, 0, 0.8);
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.8125rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.15s ease;
}

.bt-btn-energy:hover {
  background: var(--bt-orange-hover);
  box-shadow: 0 0 16px var(--bt-orange-glow);
}

.bt-btn-secondary {
  background: rgba(39, 39, 42, 0.7);
  color: #f4f4f5;
  border: 1px solid rgba(82, 82, 91, 0.6);
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.15s ease;
  min-height: 34px;
}

.bt-btn-secondary:hover {
  background: rgba(63, 63, 70, 0.9);
  border-color: rgba(113, 113, 122, 0.9);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

/* Modals */
.bt-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.bt-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.bt-modal-box {
  background: #10121a;
  border: 1px solid var(--bt-border);
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px var(--bt-blue-glow);
  transform: translateY(16px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bt-modal-backdrop.open .bt-modal-box {
  transform: translateY(0);
}

.bt-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(63, 63, 70, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bt-modal-body {
  padding: 1.5rem;
  max-height: 75vh;
  overflow-y: auto;
}

/* Data Tables & Lists (Swiss Precision Anti-Slop) */
.bt-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--bt-border);
  background: rgba(14, 16, 22, 0.6);
}

.bt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  text-align: left;
}

.bt-table th {
  background: rgba(24, 24, 27, 0.85);
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--bt-text-muted);
  border-bottom: 1px solid var(--bt-border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bt-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(63, 63, 70, 0.25);
  color: var(--bt-text-white);
  vertical-align: middle;
}

.bt-table tr:last-child td {
  border-bottom: none;
}

.bt-table tr:hover td {
  background: rgba(39, 39, 42, 0.35);
}

.bt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.bt-badge-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.bt-badge-rose {
  background: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.4);
}

.bt-badge-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.bt-badge-blue {
  background: rgba(0, 51, 136, 0.25);
  color: #60a5fa;
  border: 1px solid rgba(0, 51, 136, 0.5);
}

.bt-badge-gold {
  background: rgba(245, 158, 11, 0.25);
  color: #fde047;
  border: 1px solid rgba(234, 179, 8, 0.5);
}

.bt-badge-purple {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.4);
}

.bt-code-tag {
  font-family: var(--font-mono);
  background: rgba(24, 24, 27, 0.7);
  border: 1px solid rgba(63, 63, 70, 0.5);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #a1a1aa;
}

/* Flex & Grid Utilities */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Typography & Spacing Utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.font-mono { font-family: var(--font-mono); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-\[10px\] { font-size: 10px; line-height: 14px; }
.leading-tight { line-height: 1.25; }
.leading-none { line-height: 1; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }

.text-white { color: #ffffff; }
.text-zinc-100 { color: #f4f4f5; }
.text-zinc-200 { color: #e4e4e7; }
.text-zinc-300 { color: #d4d4d8; }
.text-zinc-400 { color: #a1a1aa; }
.text-zinc-500 { color: #71717a; }
.text-emerald-400 { color: #34d399; }
.text-rose-400 { color: #fb7185; }
.text-amber-400 { color: #fbbf24; }
.text-blue-400 { color: #60a5fa; }
.text-cyan-400 { color: #22d3ee; }

.p-3 { padding: 0.75rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3\.5 { padding: 0.875rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }

.bg-zinc-900 { background: #18181b; }
.bg-zinc-900\/50 { background: rgba(24, 24, 27, 0.5); }
.bg-zinc-900\/60 { background: rgba(24, 24, 27, 0.6); }
.bg-zinc-950\/70 { background: rgba(9, 9, 11, 0.7); }
.border-zinc-800 { border-color: #27272a; }
.border-zinc-800\/40 { border-color: rgba(39, 39, 42, 0.4); }
.border-zinc-800\/50 { border-color: rgba(39, 39, 42, 0.5); }
.border-zinc-800\/60 { border-color: rgba(39, 39, 42, 0.6); }

.border { border-width: 1px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }

/* Form Controls & Toolbar */
.bt-input-text {
  background: #12151c;
  border: 1px solid #27272a;
  border-radius: 6px;
  color: #f4f4f5;
  padding: 0.45rem 0.75rem;
  font-size: 0.8125rem;
  outline: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.bt-input-text:focus {
  border-color: var(--bt-blue);
  box-shadow: 0 0 0 2px var(--bt-blue-glow);
}

/* Dark-Tech Select & Dropdown Controls (Anti-Slop High Contrast) */
select,
.bt-select {
  color-scheme: dark !important;
  background-color: #18181b !important;
  color: #f4f4f5 !important;
  border: 1px solid #3f3f46;
  border-radius: 8px;
  padding: 0.45rem 2.2rem 0.45rem 0.75rem;
  font-size: 0.8125rem;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 0.875rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

select:focus,
.bt-select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35) !important;
}

select option,
.bt-select option,
option {
  color-scheme: dark !important;
  background-color: #18181b !important;
  color: #f4f4f5 !important;
  padding: 8px 12px !important;
}

select option:checked,
select option:hover,
select option:focus,
option:checked {
  background-color: #003388 !important;
  color: #ffffff !important;
}

select optgroup,
optgroup {
  background-color: #18181b !important;
  color: #a1a1aa !important;
  font-weight: 600;
}

.bt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  background: rgba(18, 21, 28, 0.45);
  border: 1px solid rgba(63, 63, 70, 0.35);
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

.bt-avatar-pill {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 51, 136, 0.6) 0%, rgba(30, 64, 175, 0.6) 100%);
  border: 1px solid rgba(96, 165, 250, 0.3);
  text-transform: uppercase;
}

.bt-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 500;
  border: 1px solid transparent;
}

/* Responsive Media Queries (Mobile-First Polish) */
.max-w-4xl { max-width: 56rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-xl { max-width: 36rem; }
.max-w-lg { max-width: 32rem; }
.max-w-md { max-width: 28rem; }
.max-w-sm { max-width: 24rem; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .col-span-8, .col-span-6 { grid-column: span 12; }
  .col-span-4, .col-span-3 { grid-column: span 6; }
}

@media (max-width: 768px) {
  /* Mobile Topbar */
  .bt-topbar {
    padding: 0 0.75rem;
    height: 56px;
    gap: 0.5rem;
  }
  .bt-logo-img {
    height: 28px;
  }
  .bt-brand-pill {
    display: none !important;
  }
  .bt-topbar-center {
    display: none !important;
  }
  .bt-clock {
    display: none !important;
  }
  .bt-topbar-right {
    gap: 0.35rem;
  }
  .bt-btn-secondary,
  .bt-btn-logout {
    padding: 0.35rem 0.55rem;
    min-height: 32px;
  }
  .bt-btn-label {
    display: none !important;
  }
  .bt-user-badge {
    padding: 0.25rem 0.4rem;
    min-height: 32px;
    gap: 0;
  }
  .bt-user-badge .flex.flex-col {
    display: none !important;
  }
  .bt-user-avatar {
    width: 24px;
    height: 24px;
  }

  /* Sub-nav Tabs on Mobile */
  .bt-nav-shell {
    top: 56px;
  }
  .bt-nav-bar-row {
    padding-right: 0.45rem;
    gap: 0.25rem;
  }
  .bt-nav-bar {
    padding: 0.45rem 0.65rem;
    gap: 0.4rem;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 22px), transparent 100%);
  }
  .bt-tab-btn {
    flex-shrink: 0 !important;
    font-size: 0.75rem;
    padding: 0.42rem 0.75rem;
    min-height: 38px;
    background: rgba(24, 24, 27, 0.78);
    border: 1px solid rgba(63, 63, 70, 0.55);
    color: #d4d4d8;
  }
  .bt-tab-btn.active {
    background: linear-gradient(135deg, rgba(0, 51, 136, 0.68) 0%, rgba(14, 165, 233, 0.28) 100%);
    border-color: rgba(56, 189, 248, 0.85);
    color: #ffffff;
  }
  .bt-nav-grid-btn {
    display: inline-flex;
  }

  /* Container */
  .bt-container {
    padding: 0.75rem 0.5rem;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Bento Grid Stacking */
  .bt-bento-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .col-span-12, .col-span-8, .col-span-6, .col-span-4, .col-span-3 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* Responsive Grids */
  .grid-cols-4,
  .doc-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  .grid-cols-3,
  .grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .grid-cols-12 {
    grid-template-columns: 1fr !important;
  }

  .bt-bot-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .bt-kpi-value {
    font-size: 1.5rem;
    margin: 0.35rem 0 0.15rem 0;
  }
  .bt-card {
    padding: 1rem 0.85rem;
    border-radius: 10px;
  }

  /* Table horizontal scrolling */
  .bt-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
  }
  .bt-table {
    min-width: 650px;
  }

  /* Modals on mobile */
  .bt-modal-backdrop {
    padding: 0.5rem;
    align-items: flex-end;
  }
  .bt-modal-box {
    max-width: 100% !important;
    max-height: 94vh;
    border-radius: 14px 14px 0 0;
    display: flex;
    flex-direction: column;
  }
  .bt-modal-header {
    padding: 0.75rem 1rem;
  }
  .bt-modal-body {
    padding: 0.75rem 1rem;
    max-height: calc(94vh - 120px);
  }

  .bt-toast-container {
    top: auto;
    bottom: 1rem;
    right: 0.75rem;
    left: 0.75rem;
  }
  .bt-toast {
    min-width: unset;
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 400px) {
  .grid-cols-4,
  .doc-stat-grid {
    grid-template-columns: 1fr !important;
  }
  .bt-bot-metrics {
    grid-template-columns: 1fr;
  }
}

/* Toast Notification System (Anti-Slop Swiss Precision) */
.bt-toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  pointer-events: none;
}

.bt-toast {
  pointer-events: auto;
  min-width: 320px;
  max-width: 460px;
  background: #11141c;
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 51, 136, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: #f4f4f5;
  border: 1px solid rgba(63, 63, 70, 0.5);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}

.bt-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.bt-toast-success {
  border-color: rgba(16, 185, 129, 0.65);
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.5) 0%, rgba(17, 20, 28, 0.96) 100%);
}

.bt-toast-error {
  border-color: rgba(244, 63, 94, 0.65);
  background: linear-gradient(135deg, rgba(136, 19, 55, 0.5) 0%, rgba(17, 20, 28, 0.96) 100%);
}

.bt-toast-info {
  border-color: rgba(59, 130, 246, 0.65);
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.5) 0%, rgba(17, 20, 28, 0.96) 100%);
}

.bt-toast-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

@keyframes rowHighlight {
  0% { background: rgba(16, 185, 129, 0.35); }
  100% { background: transparent; }
}

.bt-row-updated {
  animation: rowHighlight 2.5s ease-out;
}

/* ==========================================================================
   Document Management & Smart Dropzone Styles (Anti-Slop)
   ========================================================================== */
.bt-dropzone {
  border: 2px dashed rgba(63, 63, 70, 0.6);
  border-radius: 12px;
  background: rgba(18, 24, 38, 0.4);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
}

.bt-dropzone:hover {
  border-color: rgba(56, 189, 248, 0.7);
  background: rgba(0, 51, 136, 0.1);
}

.bt-dropzone.dragover {
  border-color: #38bdf8;
  background: rgba(0, 51, 136, 0.22);
  transform: scale(1.008);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.15);
}

.bt-dropzone-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  margin-bottom: 0.75rem;
}

.bt-badge-catalog {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.bt-badge-pricing {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.bt-badge-manual {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.bt-badge-technical {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.bt-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(39, 39, 42, 0.8);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 0.75rem;
}

.bt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #003388, #38bdf8);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.bt-preview-table-wrap {
  max-height: 280px;
  overflow: auto;
  border: 1px solid rgba(63, 63, 70, 0.5);
  border-radius: 8px;
  background: rgba(9, 9, 11, 0.8);
}

.bt-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

.bt-preview-table th {
  background: rgba(24, 24, 27, 0.95);
  position: sticky;
  top: 0;
  padding: 0.5rem 0.75rem;
  text-align: left;
  color: #a1a1aa;
  border-bottom: 1px solid rgba(63, 63, 70, 0.5);
  white-space: nowrap;
}

.bt-preview-table td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(39, 39, 42, 0.6);
  color: #e4e4e7;
  white-space: nowrap;
}

/* ==========================================================================
   Complete Layout, Sizing, Overflow, Color & Responsive Utility System (v2.4)
   ========================================================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.shrink-0, .flex-shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.select-none { user-select: none; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }

/* Sizing Utilities */
.w-1\.5 { width: 0.375rem; }
.h-1\.5 { height: 0.375rem; }
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }
.w-2\.5 { width: 0.625rem; }
.h-2\.5 { height: 0.625rem; }
.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-9 { width: 2.25rem; }
.h-9 { height: 2.25rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-28 { width: 7rem; }
.w-32 { width: 8rem; }
.w-40 { width: 10rem; }
.w-48 { width: 12rem; }
.h-48 { height: 12rem; }
.w-56 { width: 14rem; }
.w-60 { width: 15rem; }
.w-64 { width: 16rem; }
.max-w-\[32px\] { max-width: 32px; }
.max-w-3xl { max-width: 48rem; }
.max-w-5xl { max-width: 64rem; }
.min-h-\[180px\] { min-height: 180px; }
.min-h-\[200px\] { min-height: 200px; }

/* Max-height & Overflow Utilities */
.max-h-40 { max-height: 10rem; }
.max-h-48 { max-height: 12rem; }
.max-h-56 { max-height: 14rem; }
.max-h-60 { max-height: 15rem; }
.max-h-64 { max-height: 16rem; }
.max-h-72 { max-height: 18rem; }
.max-h-80 { max-height: 20rem; }
.max-h-96 { max-height: 24rem; }
.max-h-\[70vh\] { max-height: 70vh; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-hidden { overflow: hidden; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.whitespace-nowrap { white-space: nowrap; }
.break-words { overflow-wrap: break-word; word-break: break-word; }

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Spacing & Margin Additions */
.space-y-0\.5 > * + * { margin-top: 0.125rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-2\.5 > * + * { margin-top: 0.625rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-3\.5 > * + * { margin-top: 0.875rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }

.gap-0\.5 { gap: 0.125rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-5 { gap: 1.25rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-y-1 { row-gap: 0.25rem; }

.p-1 { padding: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.p-2 { padding: 0.5rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2\.5 { margin-top: 0.625rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2\.5 { margin-bottom: 0.625rem; }
.ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Typography & Colors (WCAG AA Calibrated) */
.text-\[9px\] { font-size: 9px; line-height: 13px; }
.text-\[11px\] { font-size: 11px; line-height: 16px; }
.text-\[13px\] { font-size: 13px; line-height: 18px; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-tight { letter-spacing: -0.025em; }
.leading-relaxed { line-height: 1.625; }
.list-disc { list-style-type: disc; }

.text-zinc-500 { color: #8B9BB0; }
.text-zinc-600 { color: #71717a; }
.text-sky-300 { color: #7dd3fc; }
.text-sky-400 { color: #38bdf8; }
.text-sky-500 { color: #0ea5e9; }
.text-blue-300 { color: #93c5fd; }
.text-blue-500 { color: #3b82f6; }
.text-emerald-300 { color: #6ee7b7; }
.text-emerald-500 { color: #10b981; }
.text-amber-200 { color: #fde68a; }
.text-amber-300 { color: #fcd34d; }
.text-amber-500 { color: #f59e0b; }
.text-rose-200 { color: #fecdd3; }
.text-rose-300 { color: #fda4af; }
.text-rose-500 { color: #f43f5e; }
.text-purple-300 { color: #d8b4fe; }
.text-purple-400 { color: #c084fc; }
.text-indigo-300 { color: #a5b4fc; }
.text-indigo-400 { color: #818cf8; }
.text-teal-300 { color: #5eead4; }
.text-teal-400 { color: #2dd4bf; }
.text-cyan-300 { color: #67e8f9; }

/* Backgrounds & Borders */
.bg-white { background-color: #ffffff; }
.bg-blue-600 { background-color: #003388; }
.bg-sky-500 { background-color: #0ea5e9; }
.bg-emerald-500 { background-color: #10b981; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-rose-500 { background-color: #f43f5e; }
.bg-zinc-800 { background-color: #27272a; }
.bg-zinc-800\/40 { background-color: rgba(39, 39, 42, 0.4); }
.bg-zinc-800\/50 { background-color: rgba(39, 39, 42, 0.5); }
.bg-zinc-800\/60 { background-color: rgba(39, 39, 42, 0.6); }
.bg-zinc-800\/80 { background-color: rgba(39, 39, 42, 0.8); }
.bg-zinc-900\/30 { background-color: rgba(24, 24, 27, 0.3); }
.bg-zinc-900\/40 { background-color: rgba(24, 24, 27, 0.4); }
.bg-zinc-900\/70 { background-color: rgba(24, 24, 27, 0.7); }
.bg-zinc-900\/80 { background-color: rgba(24, 24, 27, 0.8); }
.bg-zinc-950 { background-color: #09090b; }
.bg-zinc-950\/40 { background-color: rgba(9, 9, 11, 0.4); }
.bg-zinc-950\/50 { background-color: rgba(9, 9, 11, 0.5); }
.bg-zinc-950\/60 { background-color: rgba(9, 9, 11, 0.6); }
.bg-zinc-950\/80 { background-color: rgba(9, 9, 11, 0.8); }
.bg-amber-950\/20 { background-color: rgba(69, 26, 3, 0.2); }
.bg-amber-950\/25 { background-color: rgba(69, 26, 3, 0.25); }
.bg-amber-950\/30 { background-color: rgba(69, 26, 3, 0.3); }
.bg-amber-950\/40 { background-color: rgba(69, 26, 3, 0.4); }
.bg-rose-950\/20 { background-color: rgba(76, 5, 25, 0.2); }
.bg-rose-950\/30 { background-color: rgba(76, 5, 25, 0.3); }
.bg-rose-950\/40 { background-color: rgba(76, 5, 25, 0.4); }
.bg-rose-950\/60 { background-color: rgba(76, 5, 25, 0.6); }
.bg-emerald-950\/20 { background-color: rgba(2, 44, 34, 0.2); }
.bg-emerald-950\/30 { background-color: rgba(2, 44, 34, 0.3); }
.bg-emerald-950\/40 { background-color: rgba(2, 44, 34, 0.4); }
.bg-sky-950\/20 { background-color: rgba(8, 47, 73, 0.2); }
.bg-sky-950\/30 { background-color: rgba(8, 47, 73, 0.3); }
.bg-cyan-950\/20 { background-color: rgba(8, 51, 68, 0.2); }
.bg-blue-950\/30 { background-color: rgba(23, 37, 84, 0.3); }
.bg-purple-950\/20 { background-color: rgba(59, 7, 100, 0.2); }
.bg-indigo-950\/20 { background-color: rgba(30, 27, 75, 0.2); }

.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-full { border-radius: 9999px; }
.rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
.rounded-t-md { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }

.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-l-2 { border-left-width: 2px; border-left-style: solid; }
.border-transparent { border-color: transparent; }
.border-zinc-700 { border-color: #3f3f46; }
.border-zinc-700\/50 { border-color: rgba(63, 63, 70, 0.5); }
.border-zinc-800\/80 { border-color: rgba(39, 39, 42, 0.8); }
.border-sky-400 { border-color: #38bdf8; }
.border-sky-500\/30 { border-color: rgba(14, 165, 233, 0.3); }
.border-sky-800\/40 { border-color: rgba(7, 89, 133, 0.4); }
.border-cyan-800\/40 { border-color: rgba(21, 94, 117, 0.4); }
.border-blue-500\/30 { border-color: rgba(59, 130, 246, 0.3); }
.border-blue-800\/40 { border-color: rgba(30, 64, 175, 0.4); }
.border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.3); }
.border-emerald-800\/40 { border-color: rgba(6, 95, 70, 0.4); }
.border-amber-500\/30 { border-color: rgba(245, 158, 11, 0.3); }
.border-amber-500\/40 { border-color: rgba(245, 158, 11, 0.4); }
.border-amber-600\/40 { border-color: rgba(217, 119, 6, 0.4); }
.border-amber-800\/40 { border-color: rgba(146, 64, 14, 0.4); }
.border-rose-500\/30 { border-color: rgba(244, 63, 94, 0.3); }
.border-rose-800\/40 { border-color: rgba(159, 18, 57, 0.4); }
.border-rose-800\/50 { border-color: rgba(159, 18, 57, 0.5); }

/* Responsive Breakpoints (sm / md / lg) — Override .hidden when paired with responsive display */
@media (min-width: 640px) {
  .sm\:flex, .hidden.sm\:flex { display: flex !important; }
  .sm\:inline-flex, .hidden.sm\:inline-flex { display: inline-flex !important; }
  .sm\:block, .hidden.sm\:block { display: block !important; }
  .sm\:flex-row { flex-direction: row !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:flex, .hidden.md\:flex { display: flex !important; }
  .md\:inline-flex, .hidden.md\:inline-flex { display: inline-flex !important; }
  .md\:block, .hidden.md\:block { display: block !important; }
  .md\:flex-row { flex-direction: row !important; }
  .md\:items-center { align-items: center !important; }
  .md\:col-span-6 { grid-column: span 6; }
  .md\:col-span-4 { grid-column: span 4; }
  .md\:col-span-8 { grid-column: span 8; }
}

@media (min-width: 1024px) {
  .lg\:flex, .hidden.lg\:flex { display: flex !important; }
  .lg\:block, .hidden.lg\:block { display: block !important; }
  .lg\:flex-row { flex-direction: row !important; }
  .lg\:col-span-8 { grid-column: span 8; }
  .lg\:col-span-6 { grid-column: span 6; }
  .lg\:col-span-4 { grid-column: span 4; }
  .lg\:col-span-3 { grid-column: span 3; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   7-Day Stacked Traffic Chart Bars (Telegram + Zalo)
   ========================================================================== */
#chart-traffic-container {
  height: 12rem;
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.75rem;
  padding-bottom: 0.25rem;
}

.bt-chart-col {
  flex: 1 1 0%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  min-width: 28px;
}

.bt-chart-bar-wrap {
  width: 100%;
  max-width: 38px;
  height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  border-radius: 6px 6px 2px 2px;
  background: rgba(24, 24, 27, 0.55);
  border: 1px solid rgba(63, 63, 70, 0.35);
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.bt-chart-col:hover .bt-chart-bar-wrap {
  border-color: rgba(56, 189, 248, 0.75);
  transform: translateY(-2px);
}

.bt-chart-seg-zalo {
  width: 100%;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.bt-chart-seg-telegram {
  width: 100%;
  background: linear-gradient(180deg, #2563eb 0%, #003388 100%);
  border-top: 1px solid rgba(147, 197, 253, 0.35);
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.bt-chart-seg-empty {
  width: 100%;
  height: 4px;
  background: rgba(82, 82, 91, 0.45);
}

/* ==========================================================================
   Accessibility: Keyboard Focus Ring & Reduced Motion
   ========================================================================== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Audit V3 — Tabular Numerals, Active Filter Card States & HITL Editor
   ========================================================================== */
.bt-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.border-sky-500\/50 {
  border-color: rgba(14, 165, 233, 0.5) !important;
}

.border-sky-500\/60 {
  border-color: rgba(14, 165, 233, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25), 0 8px 20px -4px rgba(2, 132, 199, 0.2);
}

.bg-zinc-900\/90 {
  background-color: rgba(24, 24, 27, 0.92) !important;
}

.bg-indigo-950\/60 {
  background-color: rgba(30, 27, 75, 0.6);
}

.bg-indigo-950\/80 {
  background-color: rgba(30, 27, 75, 0.8);
}

.bg-sky-950\/40 {
  background-color: rgba(8, 47, 73, 0.4);
}

.bg-sky-950\/80 {
  background-color: rgba(8, 47, 73, 0.8);
}

.bg-emerald-950\/60 {
  background-color: rgba(2, 44, 34, 0.6);
}

.border-sky-800\/50 {
  border-color: rgba(7, 89, 133, 0.5);
}

.text-sky-200 {
  color: #bae6fd;
}

.text-amber-200 {
  color: #fde68a;
}

.max-w-xs {
  max-width: 20rem;
}

.max-w-md {
  max-width: 28rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-0\.2 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.bt-draft-editor {
  width: 100%;
  min-height: 240px;
  max-height: 360px;
  resize: vertical;
  background: rgba(9, 9, 11, 0.9);
  border: 1px solid rgba(63, 63, 70, 0.8);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: #e4e4e7;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  transition: border-color 0.15s ease;
}

.bt-draft-editor:focus {
  border-color: #38bdf8;
  outline: none;
}

.bt-draft-editor[readonly] {
  background: rgba(9, 9, 11, 0.65);
  color: #d4d4d8;
  cursor: default;
}

.bt-attachment-chip {
  background: rgba(8, 47, 73, 0.35);
  border: 1px solid rgba(14, 165, 233, 0.35);
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.bt-attachment-chip summary {
  cursor: pointer;
  color: #38bdf8;
  font-family: "Geist Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.bt-attachment-chip summary::-webkit-details-marker {
  display: none;
}

/* ==========================================================================
   Hotline Lead Dispatch & Auto-Routing Cockpit (Desktop + Mobile v2.5)
   ========================================================================== */
.w-36 { width: 9rem; }
.bg-sky-600\/90 { background-color: rgba(2, 132, 199, 0.9); }
.bg-emerald-950\/70 { background-color: rgba(2, 44, 34, 0.7); }
.bg-amber-950\/70 { background-color: rgba(69, 26, 3, 0.7); }
.bg-rose-950\/70 { background-color: rgba(76, 5, 25, 0.7); }
.border-zinc-700\/80 { border-color: rgba(63, 63, 70, 0.8); }
.border-emerald-700\/60 { border-color: rgba(4, 120, 87, 0.6); }
.border-amber-700\/60 { border-color: rgba(180, 83, 9, 0.6); }
.border-rose-700\/60 { border-color: rgba(190, 18, 60, 0.6); }
.border-sky-700\/60 { border-color: rgba(3, 105, 161, 0.6); }
.border-sky-900\/50 { border-color: rgba(12, 74, 110, 0.5); }

@media (min-width: 1024px) {
  .lg\:items-center { align-items: center !important; }
  .lg\:justify-between { justify-content: space-between !important; }
}

.bt-routing-toolbar {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(14, 21, 35, 0.9) 0%, rgba(18, 20, 28, 0.88) 100%);
  border: 1px solid rgba(56, 189, 248, 0.28);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

@media (min-width: 1024px) {
  .bt-routing-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.bt-segmented-group {
  display: inline-grid;
  grid-template-columns: repeat(4, auto);
  gap: 0.3rem;
  background: rgba(9, 9, 11, 0.88);
  border: 1px solid rgba(63, 63, 70, 0.7);
  border-radius: 9px;
  padding: 0.25rem;
  flex-shrink: 0;
}

.bt-segmented-btn {
  border: 1px solid transparent;
  background: transparent;
  color: #a1a1aa;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.42rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  transition: all 0.16s ease;
  min-height: 34px;
}

.bt-segmented-btn:hover {
  color: #f4f4f5;
  background: rgba(39, 39, 42, 0.6);
}

.bt-segmented-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, #003388 0%, #0284c7 100%);
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);
  font-weight: 600;
}

.bt-staff-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.28rem 0.65rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  min-height: 28px;
}

.bt-staff-switch.is-on {
  background: rgba(6, 78, 59, 0.45);
  border: 1px solid rgba(16, 185, 129, 0.55);
  color: #6ee7b7;
}

.bt-staff-switch.is-on:hover {
  background: rgba(6, 95, 70, 0.65);
  border-color: rgba(52, 211, 153, 0.85);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.bt-staff-switch.is-off {
  background: rgba(39, 39, 42, 0.55);
  border: 1px solid rgba(82, 82, 91, 0.6);
  color: #a1a1aa;
}

.bt-staff-switch.is-off:hover {
  background: rgba(63, 63, 70, 0.75);
  border-color: rgba(113, 113, 122, 0.85);
  color: #f4f4f5;
}

.bt-period-count-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.48rem;
  border-radius: 5px;
  background: rgba(8, 47, 73, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.bt-kd-desktop-wrap {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.bt-kd-mobile-list {
  display: none;
}

.bt-kd-mobile-card {
  background: rgba(18, 21, 30, 0.85);
  border: 1px solid rgba(63, 63, 70, 0.55);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}

.bt-kd-mobile-card.is-selected {
  border-color: rgba(56, 189, 248, 0.75);
  background: rgba(8, 47, 73, 0.3);
}

.bt-kd-mobile-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0.6rem 0;
}

.bt-kd-mobile-metric-box {
  background: rgba(9, 9, 11, 0.65);
  border: 1px solid rgba(63, 63, 70, 0.45);
  border-radius: 6px;
  padding: 0.35rem 0.3rem;
  text-align: center;
}

.bt-hotline-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Section 3: 13-Column Table Alignment & Width Fixes + Mobile Lead Cards (v2.6) */
.align-top,
.bt-leads-table th,
.bt-leads-table td {
  vertical-align: top !important;
}

.bt-leads-table th {
  white-space: nowrap !important;
}

.min-w-\[120px\] { min-width: 120px !important; }
.min-w-\[130px\] { min-width: 130px !important; }
.min-w-\[140px\] { min-width: 140px !important; }
.min-w-\[150px\] { min-width: 150px !important; }
.min-w-\[260px\] { min-width: 260px !important; }
.max-w-\[380px\] { max-width: 380px !important; }

.bt-lead-table-wrap {
  display: block;
}

.bt-lead-mobile-list {
  display: none;
}

.bt-view-mode-switch {
  display: none;
}

.bt-lead-mobile-card {
  background: rgba(16, 19, 28, 0.9);
  border: 1px solid rgba(63, 63, 70, 0.6);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bt-lead-mobile-card.status-quoted {
  border-left: 3px solid #10b981;
}

.bt-lead-mobile-card.status-pending {
  border-left: 3px solid #f59e0b;
}

.bt-lead-mobile-card.status-rejected {
  border-left: 3px solid #f43f5e;
}

.bt-lead-req-box {
  background: rgba(9, 9, 11, 0.72);
  border: 1px solid rgba(63, 63, 70, 0.45);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
}

.bt-lead-req-text {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.55;
  color: #e4e4e7;
  font-size: 0.75rem;
}

.bt-lead-req-text.is-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 4.8rem;
}

.btn-toggle-lead-req {
  margin-top: 0.35rem;
  background: transparent;
  border: none;
  color: #38bdf8;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.15rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.btn-toggle-lead-req:hover {
  text-decoration: underline;
  color: #7dd3fc;
}

.bt-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  border-radius: 5px;
  background: rgba(8, 47, 73, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 768px) {
  .bt-segmented-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.35rem;
  }

  .bt-segmented-btn {
    width: 100%;
    padding: 0.5rem 0.5rem;
    min-height: 38px;
    font-size: 0.72rem;
  }

  .bt-kd-desktop-wrap {
    display: none !important;
  }

  .bt-kd-mobile-list {
    display: flex !important;
    flex-direction: column;
    gap: 0.65rem;
  }

  .bt-staff-switch {
    min-height: 34px;
    padding: 0.35rem 0.75rem;
  }

  .bt-hotline-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 0.4rem;
  }

  .bt-hotline-filter-bar #hotline-search-input {
    grid-column: 1 / -1;
    width: 100% !important;
  }

  .bt-hotline-filter-bar select {
    width: 100% !important;
    padding: 0.42rem 1.55rem 0.42rem 0.5rem !important;
    background-position: right 0.45rem center !important;
    font-size: 0.7rem !important;
  }

  .bt-view-mode-switch {
    display: inline-flex !important;
    align-items: center;
    background: rgba(9, 9, 11, 0.85);
    border: 1px solid rgba(63, 63, 70, 0.7);
    border-radius: 7px;
    padding: 0.18rem;
    gap: 0.2rem;
  }

  .bt-leads-view-root:not(.force-table-view) .bt-lead-table-wrap {
    display: none !important;
  }

  .bt-leads-view-root:not(.force-table-view) .bt-lead-mobile-list {
    display: flex !important;
    flex-direction: column;
    gap: 0.7rem;
  }

  .bt-leads-view-root.force-table-view .bt-lead-table-wrap {
    display: block !important;
  }

  .bt-leads-view-root.force-table-view .bt-lead-mobile-list {
    display: none !important;
  }
}

/* ==========================================================================
   Cupertino Industrial Light Design System (Apple HIG Light Mode — v2.8)
   Single Source of Truth: DESIGN.md & PRD-apple-light-design-system-benthanh.md
   Scoped to html:not(.dark) so Dark Mode (html.dark) remains 100% preserved.
   ========================================================================== */

/* 1. Canvas & Body Surface (#F5F5F7 Light / #09090b Dark) */
html:not(.dark),
html:not(.dark) body,
html:not(.dark) body.bg-\[\#09090b\] {
  background-color: #F5F5F7 !important;
  color: #1D1D1F !important;
}

html.dark,
html.dark body,
html.dark body.bg-\[\#09090b\] {
  background-color: #09090b !important;
  color: #f4f4f5 !important;
}

html:not(.dark) #cockpit-energy-canvas {
  opacity: 0.55 !important;
}

/* 2. Apple Frosted Glass Topbar & Brand Logo Restoration (#003388 + #FF3300) */
html:not(.dark) .bt-topbar {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.085) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html:not(.dark) .bt-logo-img {
  background: #FFFFFF;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 51, 136, 0.12);
  box-shadow: 0 1px 4px rgba(0, 51, 136, 0.06);
}

html:not(.dark) .bt-brand-pill {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #003388 !important;
  font-weight: 700 !important;
}

html:not(.dark) .bt-clock {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #1D1D1F !important;
  box-shadow: inset 0 1px 0 #FFFFFF;
}

html:not(.dark) .bt-user-badge {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

html:not(.dark) .bt-btn-secondary,
html:not(.dark) .bt-theme-toggle-btn {
  background: #FFFFFF !important;
  color: #1D1D1F !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html:not(.dark) .bt-btn-secondary:hover,
html:not(.dark) .bt-theme-toggle-btn:hover {
  background: #F8FAFC !important;
  border-color: #0066CC !important;
  color: #003388 !important;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.12) !important;
}

html:not(.dark) .bt-btn-logout {
  background: #FEF2F2 !important;
  color: #BE123C !important;
  border: 1px solid #FECDD3 !important;
}

html:not(.dark) .bt-btn-logout:hover {
  background: #FFE4E6 !important;
  border-color: #FDA4AF !important;
  color: #9F1239 !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.12) !important;
}

/* 3. Sticky Sub-Navigation & Mobile Quick-Jump 2x4 Grid Sheet */
html:not(.dark) .bt-nav-shell {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

html:not(.dark) .bt-tab-btn {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #424245 !important;
}

html:not(.dark) .bt-tab-btn:hover {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #003388 !important;
}

html:not(.dark) .bt-tab-btn.active {
  background: linear-gradient(135deg, #003388 0%, #0055CC 100%) !important;
  border-color: #003388 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(0, 51, 136, 0.24) !important;
}

html:not(.dark) .bt-tab-btn.active span:not([id$="-badge"]) {
  color: #FFFFFF !important;
}

html:not(.dark) .bt-tab-btn.active #hotline-badge,
html:not(.dark) .bt-tab-btn.active #drafts-badge {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #FFFFFF !important;
}

html:not(.dark) .bt-nav-grid-btn {
  background: #EFF6FF !important;
  border: 1px solid #93C5FD !important;
  color: #003388 !important;
}

html:not(.dark) .bt-nav-grid-btn.is-open {
  background: #003388 !important;
  border-color: #003388 !important;
  color: #FFFFFF !important;
}

html:not(.dark) .bt-nav-grid-count {
  background: #DBEAFE !important;
  border: 1px solid #93C5FD !important;
  color: #003388 !important;
}

html:not(.dark) .bt-mobile-nav-sheet {
  background: rgba(255, 255, 255, 0.98) !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #CBD5E1 !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14) !important;
}

html:not(.dark) .bt-mobile-nav-sheet-header {
  color: #424245 !important;
}

html:not(.dark) .bt-mobile-nav-close {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #1D1D1F !important;
}

html:not(.dark) .bt-mobile-nav-item {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #1D1D1F !important;
}

html:not(.dark) .bt-mobile-nav-item.active {
  background: linear-gradient(135deg, #003388 0%, #0055CC 100%) !important;
  border-color: #003388 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(0, 51, 136, 0.22) !important;
}

/* 4. Elevated Cards, KPI Metrics, Bot Health & Chart Bars */
html:not(.dark) .bt-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.085) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
}

html:not(.dark) .bt-card:hover {
  border-color: rgba(0, 102, 204, 0.28) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

html:not(.dark) .bt-card-active { border-left: 3px solid #003388 !important; }
html:not(.dark) .bt-card-emerald { border-left: 3px solid #059669 !important; }
html:not(.dark) .bt-card-rose { border-left: 3px solid #E11D48 !important; }
html:not(.dark) .bt-card-orange { border-left: 3px solid #FF3300 !important; }

html:not(.dark) .bt-kpi-value {
  color: #1D1D1F !important;
}

html:not(.dark) .bt-bot-icon {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #003388 !important;
}

html:not(.dark) .bt-bot-metrics {
  border-top: 1px solid #E5E5EA !important;
}

html:not(.dark) .bt-metric-item {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

html:not(.dark) .bt-chart-bar-wrap {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}

html:not(.dark) .bt-chart-seg-empty {
  background: #CBD5E1 !important;
}

html:not(.dark) .bt-chart-tooltip {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #CBD5E1 !important;
  color: #1D1D1F !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14) !important;
}

/* 5. Form Inputs, Selects, Dropdowns, Modals, Toasts & Dropzone */
html:not(.dark) .bt-input-text,
html:not(.dark) input[type="text"],
html:not(.dark) input[type="number"],
html:not(.dark) input[type="search"],
html:not(.dark) input[type="password"],
html:not(.dark) textarea {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #1D1D1F !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #86868B !important;
}

html:not(.dark) .bt-input-text:focus,
html:not(.dark) input:focus,
html:not(.dark) textarea:focus {
  border-color: #0066CC !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.16) !important;
}

select:not([multiple]),
.bt-select {
  padding-right: 2.1rem !important;
}

html:not(.dark) select,
html:not(.dark) .bt-select {
  color-scheme: light !important;
  background-color: #FFFFFF !important;
  color: #1D1D1F !important;
  border: 1px solid #CBD5E1 !important;
  padding-right: 2.1rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003388' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

html:not(.dark) select:focus,
html:not(.dark) .bt-select:focus {
  border-color: #0066CC !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.16) !important;
}

html:not(.dark) select option,
html:not(.dark) .bt-select option,
html:not(.dark) option {
  color-scheme: light !important;
  background-color: #FFFFFF !important;
  color: #1D1D1F !important;
}

html:not(.dark) select optgroup,
html:not(.dark) optgroup {
  background-color: #F8FAFC !important;
  color: #475569 !important;
}

html:not(.dark) .bt-toolbar {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

html:not(.dark) .bt-modal-backdrop {
  background: rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html:not(.dark) .bt-modal-box {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) .bt-modal-header {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

html:not(.dark) .bt-toast {
  background: #FFFFFF !important;
  color: #1D1D1F !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15) !important;
}

html:not(.dark) .bt-toast-success {
  border-color: #6EE7B7 !important;
  background: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 100%) !important;
}

html:not(.dark) .bt-toast-error {
  border-color: #FDA4AF !important;
  background: linear-gradient(135deg, #FEF2F2 0%, #FFFFFF 100%) !important;
}

html:not(.dark) .bt-toast-info {
  border-color: #93C5FD !important;
  background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 100%) !important;
}

html:not(.dark) .bt-dropzone {
  background: #F8FAFC !important;
  border: 2px dashed #CBD5E1 !important;
}

html:not(.dark) .bt-dropzone:hover,
html:not(.dark) .bt-dropzone.dragover {
  background: #EFF6FF !important;
  border-color: #0066CC !important;
}

html:not(.dark) .bt-dropzone-icon-wrap {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #003388 !important;
}

html:not(.dark) .bt-progress-bar {
  background: #E2E8F0 !important;
}

html:not(.dark) .bt-preview-table-wrap,
html:not(.dark) .bt-table-wrap {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}

html:not(.dark) .bt-preview-table th,
html:not(.dark) .bt-table th {
  background: #F8FAFC !important;
  color: #334155 !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

html:not(.dark) .bt-preview-table td,
html:not(.dark) .bt-table td {
  color: #1D1D1F !important;
  border-bottom: 1px solid #E5E5EA !important;
}

html:not(.dark) .bt-table tr:hover td {
  background: #F0F6FF !important;
}

html:not(.dark) .bt-draft-editor {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #1D1D1F !important;
}

html:not(.dark) .bt-draft-editor[readonly] {
  background: #F8FAFC !important;
  color: #334155 !important;
}

html:not(.dark) .bt-attachment-chip {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
}

html:not(.dark) .bt-attachment-chip summary {
  color: #0055B3 !important;
}

/* 6. Hotline Dispatch Cockpit, 13-Column Table & Mobile Lead Cards */
html:not(.dark) .bt-routing-toolbar {
  background: linear-gradient(135deg, #F0F6FF 0%, #FFFFFF 100%) !important;
  border: 1px solid #BFDBFE !important;
  box-shadow: 0 1px 4px rgba(0, 51, 136, 0.05);
}

html:not(.dark) .bt-segmented-group,
html:not(.dark) .bt-view-mode-switch {
  background: #EFEFF4 !important;
  border: 1px solid #D1D5DB !important;
}

html:not(.dark) .bt-segmented-btn {
  color: #424245 !important;
}

html:not(.dark) .bt-segmented-btn:hover {
  color: #1D1D1F !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

html:not(.dark) .bt-segmented-btn.active {
  background: linear-gradient(135deg, #003388 0%, #0055CC 100%) !important;
  border-color: #003388 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 51, 136, 0.22) !important;
}

html:not(.dark) .bt-staff-switch.is-on {
  background: #ECFDF5 !important;
  border: 1px solid #6EE7B7 !important;
  color: #065F46 !important;
}

html:not(.dark) .bt-staff-switch.is-off {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

html:not(.dark) .bt-period-count-pill {
  background: #EFF6FF !important;
  border: 1px solid #93C5FD !important;
  color: #003388 !important;
}

html:not(.dark) .bt-kd-mobile-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

html:not(.dark) .bt-kd-mobile-card.is-selected {
  border-color: #0066CC !important;
  background: #F0F6FF !important;
}

html:not(.dark) .bt-kd-mobile-metric-box {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

/* 13-Column Master Table (Apple Sticky Header & Hairline Dividers) */
html:not(.dark) .bt-lead-table-wrap {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

html:not(.dark) .bt-leads-table thead {
  background: rgba(248, 250, 252, 0.96) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #CBD5E1 !important;
}

html:not(.dark) .bt-leads-table thead th {
  background: rgba(248, 250, 252, 0.96) !important;
  color: #334155 !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

html:not(.dark) .bt-leads-table tbody tr {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E5EA !important;
}

html:not(.dark) .bt-leads-table tbody tr:nth-child(even) {
  background: #FAFBFD !important;
}

html:not(.dark) .bt-leads-table tbody tr:hover,
html:not(.dark) .bt-leads-table tbody tr:hover td {
  background: #F0F6FF !important;
}

html:not(.dark) .bt-leads-table td.sticky,
html:not(.dark) .bt-leads-table th.sticky {
  background-color: #FFFFFF !important;
  box-shadow: -4px 0 12px rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) .bt-leads-table tbody tr:hover td.sticky {
  background-color: #F0F6FF !important;
}

/* Mobile Lead Cards (Cupertino Grouped Surface) */
html:not(.dark) .bt-lead-mobile-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html:not(.dark) .bt-lead-mobile-card.status-quoted { border-left: 3.5px solid #059669 !important; }
html:not(.dark) .bt-lead-mobile-card.status-pending { border-left: 3.5px solid #D97706 !important; }
html:not(.dark) .bt-lead-mobile-card.status-rejected { border-left: 3.5px solid #E11D48 !important; }

html:not(.dark) .bt-lead-req-box {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 3px solid #0066CC !important;
}

html:not(.dark) .bt-lead-req-text {
  color: #1D1D1F !important;
}

html:not(.dark) .btn-toggle-lead-req {
  color: #0055B3 !important;
}

html:not(.dark) .bt-phone-link {
  background: #EFF6FF !important;
  border: 1px solid #93C5FD !important;
  color: #003388 !important;
}

/* 7. Scoped Legacy Dark Utility Class Remapping (420+ Instances) */
html:not(.dark) .bg-zinc-900,
html:not(.dark) .bg-zinc-900\/90,
html:not(.dark) .bg-zinc-900\/80,
html:not(.dark) .bg-zinc-900\/70 {
  background-color: #FFFFFF !important;
}

html:not(.dark) .bg-zinc-950,
html:not(.dark) .bg-zinc-950\/80,
html:not(.dark) .bg-zinc-950\/70,
html:not(.dark) .bg-zinc-950\/60,
html:not(.dark) .bg-zinc-950\/50,
html:not(.dark) .bg-zinc-950\/40,
html:not(.dark) .bg-zinc-900\/60,
html:not(.dark) .bg-zinc-900\/50,
html:not(.dark) .bg-zinc-900\/40,
html:not(.dark) .bg-zinc-900\/30 {
  background-color: #F8FAFC !important;
}

html:not(.dark) .bg-zinc-800,
html:not(.dark) .bg-zinc-800\/80,
html:not(.dark) .bg-zinc-800\/60,
html:not(.dark) .bg-zinc-800\/50,
html:not(.dark) .bg-zinc-800\/40,
html:not(.dark) .bg-zinc-700 {
  background-color: #EFEFF4 !important;
}

html:not(.dark) .hover\:bg-zinc-800:hover,
html:not(.dark) .hover\:bg-zinc-700:hover,
html:not(.dark) .hover\:bg-zinc-900\/60:hover {
  background-color: #E2E8F0 !important;
}

html:not(.dark) .border-zinc-800,
html:not(.dark) .border-zinc-800\/80,
html:not(.dark) .border-zinc-800\/70,
html:not(.dark) .border-zinc-800\/60,
html:not(.dark) .border-zinc-800\/50,
html:not(.dark) .border-zinc-800\/40,
html:not(.dark) .border-zinc-700,
html:not(.dark) .border-zinc-700\/80,
html:not(.dark) .border-zinc-700\/60,
html:not(.dark) .border-zinc-700\/50,
html:not(.dark) .border-zinc-950\/70 {
  border-color: #E2E8F0 !important;
}

/* 8. Apple Ink Text Remapping + CTA Contrast Guardrail */
html:not(.dark) .text-white:not(.bt-btn-primary):not(.bt-btn-energy):not(.bg-blue-600):not(.bg-blue-500):not(.bg-sky-600\/90):not(.bg-sky-500):not(.bg-emerald-500):not(.bg-rose-500):not(.bg-amber-500):not(.bt-user-avatar):not(.bt-avatar-pill):not(.bt-tab-btn.active):not(.bt-segmented-btn.active):not(.bt-mobile-nav-item.active),
html:not(.dark) .text-\[\#f4f4f5\],
html:not(.dark) .text-zinc-100,
html:not(.dark) .text-zinc-200 {
  color: #1D1D1F !important;
}

html:not(.dark) .text-zinc-300,
html:not(.dark) .text-\[\#a1a1aa\] {
  color: #334155 !important;
}

html:not(.dark) .text-zinc-400 {
  color: #475569 !important;
}

html:not(.dark) .text-zinc-500,
html:not(.dark) .text-zinc-600 {
  color: #64748B !important;
}

/* CTA Contrast Guardrail: Force crisp white text on solid accent buttons & avatars */
html:not(.dark) .bt-btn-primary,
html:not(.dark) .bt-btn-primary *,
html:not(.dark) .bt-btn-energy,
html:not(.dark) .bt-btn-energy *,
html:not(.dark) .bt-user-avatar,
html:not(.dark) .bt-avatar-pill,
html:not(.dark) .bt-tab-btn.active,
html:not(.dark) .bt-segmented-btn.active,
html:not(.dark) .bt-mobile-nav-item.active,
html:not(.dark) .bg-blue-600,
html:not(.dark) .bg-sky-600\/90 {
  color: #FFFFFF !important;
}

/* 9. Semantic Tinted Badges & Status Colors (WCAG AA >= 7:1 on Light Surfaces) */
/* Emerald / Success */
html:not(.dark) .bg-emerald-950\/70,
html:not(.dark) .bg-emerald-950\/60,
html:not(.dark) .bg-emerald-950\/40,
html:not(.dark) .bg-emerald-950\/30,
html:not(.dark) .bg-emerald-950\/25,
html:not(.dark) .bg-emerald-950\/20,
html:not(.dark) .bt-badge-emerald,
html:not(.dark) .bt-badge-pricing {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #065F46 !important;
}

html:not(.dark) .border-emerald-800\/60,
html:not(.dark) .border-emerald-800\/50,
html:not(.dark) .border-emerald-800\/40,
html:not(.dark) .border-emerald-700\/60,
html:not(.dark) .border-emerald-700\/50,
html:not(.dark) .border-emerald-500\/40,
html:not(.dark) .border-emerald-500\/30 {
  border-color: #6EE7B7 !important;
}

html:not(.dark) .text-emerald-400,
html:not(.dark) .text-emerald-400\/80,
html:not(.dark) .text-emerald-300,
html:not(.dark) .text-emerald-300\/70,
html:not(.dark) .text-emerald-500,
html:not(.dark) .text-teal-300,
html:not(.dark) .text-teal-400 {
  color: #047857 !important;
}

/* Amber / Warning */
html:not(.dark) .bg-amber-950\/80,
html:not(.dark) .bg-amber-950\/70,
html:not(.dark) .bg-amber-950\/60,
html:not(.dark) .bg-amber-950\/40,
html:not(.dark) .bg-amber-950\/30,
html:not(.dark) .bg-amber-950\/25,
html:not(.dark) .bg-amber-950\/20,
html:not(.dark) .bg-amber-500\/20,
html:not(.dark) .bt-badge-amber,
html:not(.dark) .bt-badge-gold,
html:not(.dark) .bt-badge-manual {
  background-color: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #B45309 !important;
}

html:not(.dark) .border-amber-800\/70,
html:not(.dark) .border-amber-800\/50,
html:not(.dark) .border-amber-800\/40,
html:not(.dark) .border-amber-700\/60,
html:not(.dark) .border-amber-700\/50,
html:not(.dark) .border-amber-600\/40,
html:not(.dark) .border-amber-500\/60,
html:not(.dark) .border-amber-500\/40,
html:not(.dark) .border-amber-500\/30 {
  border-color: #FCD34D !important;
}

html:not(.dark) .text-amber-400,
html:not(.dark) .text-amber-300,
html:not(.dark) .text-amber-300\/70,
html:not(.dark) .text-amber-200,
html:not(.dark) .text-amber-200\/90,
html:not(.dark) .text-amber-500 {
  color: #B45309 !important;
}

/* Rose / Danger */
html:not(.dark) .bg-rose-950\/70,
html:not(.dark) .bg-rose-950\/60,
html:not(.dark) .bg-rose-950\/40,
html:not(.dark) .bg-rose-950\/30,
html:not(.dark) .bg-rose-950\/25,
html:not(.dark) .bg-rose-950\/20,
html:not(.dark) .bt-badge-rose {
  background-color: #FEF2F2 !important;
  border-color: #FECDD3 !important;
  color: #BE123C !important;
}

html:not(.dark) .border-rose-900\/60,
html:not(.dark) .border-rose-800\/50,
html:not(.dark) .border-rose-800\/40,
html:not(.dark) .border-rose-700\/60,
html:not(.dark) .border-rose-700\/50,
html:not(.dark) .border-rose-500\/30 {
  border-color: #FDA4AF !important;
}

html:not(.dark) .text-rose-400,
html:not(.dark) .text-rose-300,
html:not(.dark) .text-rose-300\/70,
html:not(.dark) .text-rose-200,
html:not(.dark) .text-rose-500 {
  color: #BE123C !important;
}

/* Sky / Blue / Cyan (Info & Bến Thành Brand Tint) */
html:not(.dark) .bg-sky-950\/80,
html:not(.dark) .bg-sky-950\/60,
html:not(.dark) .bg-sky-950\/40,
html:not(.dark) .bg-sky-950\/30,
html:not(.dark) .bg-sky-950\/20,
html:not(.dark) .bg-sky-500\/20,
html:not(.dark) .bg-blue-950\/60,
html:not(.dark) .bg-blue-950\/50,
html:not(.dark) .bg-blue-950\/30,
html:not(.dark) .bg-cyan-950\/80,
html:not(.dark) .bg-cyan-950\/70,
html:not(.dark) .bg-cyan-950\/40,
html:not(.dark) .bg-cyan-950\/20,
html:not(.dark) .bt-badge-blue,
html:not(.dark) .bt-badge-catalog {
  background-color: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #003388 !important;
}

html:not(.dark) .border-sky-900\/50,
html:not(.dark) .border-sky-800\/70,
html:not(.dark) .border-sky-800\/60,
html:not(.dark) .border-sky-800\/50,
html:not(.dark) .border-sky-800\/40,
html:not(.dark) .border-sky-700\/60,
html:not(.dark) .border-sky-500\/60,
html:not(.dark) .border-sky-500\/50,
html:not(.dark) .border-sky-500\/40,
html:not(.dark) .border-sky-500\/30,
html:not(.dark) .border-blue-800\/50,
html:not(.dark) .border-blue-800\/40,
html:not(.dark) .border-blue-500\/30,
html:not(.dark) .border-cyan-800\/70,
html:not(.dark) .border-cyan-800\/50,
html:not(.dark) .border-cyan-800\/40 {
  border-color: #93C5FD !important;
}

html:not(.dark) .text-sky-400,
html:not(.dark) .text-sky-400\/90,
html:not(.dark) .text-sky-300,
html:not(.dark) .text-sky-200,
html:not(.dark) .text-sky-500,
html:not(.dark) .text-blue-400,
html:not(.dark) .text-blue-300,
html:not(.dark) .text-blue-500,
html:not(.dark) .text-cyan-400,
html:not(.dark) .text-cyan-300 {
  color: #0055B3 !important;
}

/* Indigo / Purple (Technical & Vector AI) */
html:not(.dark) .bg-indigo-950\/80,
html:not(.dark) .bg-indigo-950\/60,
html:not(.dark) .bg-indigo-950\/20,
html:not(.dark) .bg-purple-950\/80,
html:not(.dark) .bg-purple-950\/20,
html:not(.dark) .bt-badge-purple,
html:not(.dark) .bt-badge-technical {
  background-color: #EEF2FF !important;
  border-color: #C7D2FE !important;
  color: #4338CA !important;
}

html:not(.dark) .border-indigo-800\/70,
html:not(.dark) .border-indigo-700\/50,
html:not(.dark) .border-purple-800\/70,
html:not(.dark) .border-purple-800\/40 {
  border-color: #A5B4FC !important;
}

html:not(.dark) .text-indigo-400,
html:not(.dark) .text-indigo-300,
html:not(.dark) .text-indigo-500,
html:not(.dark) .text-purple-400,
html:not(.dark) .text-purple-300 {
  color: #4338CA !important;
}

html:not(.dark) .bt-code-tag {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

/* ==========================================================================
   10. Left Fly-In / Fly-Out Sidebar Navigation (Desktop Rail + Mobile Drawer)
   ========================================================================== */
.bt-sidebar-toggle-btn {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 8px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bt-sidebar-backdrop {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 46;
}

#bt-nav-shell.bt-sidebar {
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  bottom: 0 !important;
  height: calc(100dvh - 64px) !important;
  width: 64px;
  z-index: 48;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  overflow-y: auto;
  border-bottom: none !important;
  border-right: 1px solid rgba(63, 63, 70, 0.45);
  background: rgba(11, 13, 18, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s ease;
  scrollbar-width: none;
}

#bt-nav-shell.bt-sidebar::-webkit-scrollbar {
  display: none;
}

html:not(.dark) #bt-nav-shell.bt-sidebar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-right: 1px solid #E2E8F0 !important;
  border-bottom: none !important;
  box-shadow: 1px 0 4px rgba(15, 23, 42, 0.03);
}

/* Fly-Out Expansion on Hover or Pinned Mode (Desktop > 768px) */
@media (min-width: 769px) {
  #bt-nav-shell.bt-sidebar:hover:not(.is-suppress-hover),
  #bt-nav-shell.bt-sidebar.is-flyout-open,
  body.bt-sidebar-pinned #bt-nav-shell.bt-sidebar {
    width: 260px !important;
  }

  #bt-nav-shell.bt-sidebar:hover:not(.is-suppress-hover),
  #bt-nav-shell.bt-sidebar.is-flyout-open {
    box-shadow: 14px 0 38px rgba(0, 0, 0, 0.65);
  }

  html:not(.dark) #bt-nav-shell.bt-sidebar:hover:not(.is-suppress-hover),
  html:not(.dark) #bt-nav-shell.bt-sidebar.is-flyout-open {
    box-shadow: 14px 0 38px rgba(15, 23, 42, 0.13) !important;
  }

  body.bt-sidebar-pinned #bt-nav-shell.bt-sidebar {
    box-shadow: 1px 0 6px rgba(15, 23, 42, 0.04) !important;
  }

  main.bt-container {
    margin-left: 64px !important;
    margin-right: 0 !important;
    max-width: calc(100vw - 64px) !important;
    padding: 1.25rem 1.5rem !important;
    transition: margin-left 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                max-width 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.bt-sidebar-pinned main.bt-container {
    margin-left: 260px !important;
    max-width: calc(100vw - 260px) !important;
  }
}

.bt-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem 0.35rem 0.85rem;
  min-height: 34px;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}

.bt-sidebar-section-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bt-text-dim);
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.16s ease, max-width 0.2s ease;
}

#bt-nav-shell.bt-sidebar .bt-nav-bar-row {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#bt-nav-shell.bt-sidebar .bt-nav-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.38rem;
  padding: 0.35rem 0.6rem;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

#bt-nav-shell.bt-sidebar .bt-tab-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-height: 42px;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
}

.bt-tab-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bt-tab-label {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.16s ease, max-width 0.2s ease;
}

/* Compact Floating Badge in 64px Rail -> Inline Pill in 260px Expanded Sidebar */
.bt-sidebar-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 9999px;
  min-width: 16px;
  text-align: center;
  font-weight: 700;
}

.bt-sidebar-footer {
  padding: 0.6rem;
  border-top: 1px solid rgba(63, 63, 70, 0.35);
  flex-shrink: 0;
}

html:not(.dark) .bt-sidebar-footer {
  border-top: 1px solid #E2E8F0 !important;
}

.bt-sidebar-pin-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-height: 38px;
  padding: 0.45rem 0.65rem;
  border-radius: 9px;
  background: rgba(24, 24, 27, 0.55);
  border: 1px solid rgba(63, 63, 70, 0.4);
  color: var(--bt-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}

html:not(.dark) .bt-sidebar-pin-btn {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #424245 !important;
}

html:not(.dark) .bt-sidebar-pin-btn:hover {
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
  color: #003388 !important;
}

/* Reveal labels & inline badges when Sidebar is Expanded / Hovered / Mobile Open */
#bt-nav-shell.bt-sidebar:hover:not(.is-suppress-hover) .bt-tab-label,
#bt-nav-shell.bt-sidebar.is-flyout-open .bt-tab-label,
#bt-nav-shell.bt-sidebar.is-mobile-open .bt-tab-label,
body.bt-sidebar-pinned #bt-nav-shell.bt-sidebar .bt-tab-label,
#bt-nav-shell.bt-sidebar:hover:not(.is-suppress-hover) .bt-sidebar-section-title,
#bt-nav-shell.bt-sidebar.is-flyout-open .bt-sidebar-section-title,
#bt-nav-shell.bt-sidebar.is-mobile-open .bt-sidebar-section-title,
body.bt-sidebar-pinned #bt-nav-shell.bt-sidebar .bt-sidebar-section-title {
  opacity: 1;
  max-width: 195px;
}

#bt-nav-shell.bt-sidebar:hover:not(.is-suppress-hover) .bt-sidebar-badge,
#bt-nav-shell.bt-sidebar.is-flyout-open .bt-sidebar-badge,
#bt-nav-shell.bt-sidebar.is-mobile-open .bt-sidebar-badge,
body.bt-sidebar-pinned #bt-nav-shell.bt-sidebar .bt-sidebar-badge {
  position: static;
  margin-left: auto;
  font-size: 10px;
  padding: 2px 7px;
}

/* Clean Apple HIG 3-Zone Topbar Control Bar */
.sr-only,
.bt-brand-pill.sr-only,
.bt-btn-label.sr-only {
  display: none !important;
}

.bt-topbar {
  padding: 0 1.25rem !important;
  gap: 1rem;
}

.bt-logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem !important;
  flex-shrink: 0;
}

.bt-topbar-sep {
  color: #CBD5E1;
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1;
  margin: 0 0.1rem;
  user-select: none;
}

html.dark .bt-topbar-sep {
  color: rgba(82, 82, 91, 0.75);
}

.bt-topbar-context {
  justify-content: center;
}

.bt-context-title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #1D1D1F;
  white-space: nowrap;
}

html.dark .bt-context-title {
  color: #F4F4F5 !important;
}

.bt-context-subtitle {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.15;
  color: #6E6E73;
  margin-top: 1px;
  white-space: nowrap;
}

html.dark .bt-context-subtitle {
  color: #A1A1AA !important;
}

/* Zone 2: Unified Status Capsule (Gateway + ICT Clock) */
.bt-topbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

.bt-status-capsule {
  height: 36px;
  border-radius: 8px;
  padding: 0 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(24, 24, 27, 0.72);
  border: 1px solid rgba(63, 63, 70, 0.5);
  white-space: nowrap;
}

html:not(.dark) .bt-status-capsule {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: inset 0 1px 0 #FFFFFF !important;
}

.bt-status-gateway {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #34D399;
}

html:not(.dark) .bt-status-gateway,
html:not(.dark) .bt-status-gateway-text {
  color: #047857 !important;
}

.bt-capsule-divider {
  width: 1px;
  height: 14px;
  background: rgba(82, 82, 91, 0.65);
  flex-shrink: 0;
}

html:not(.dark) .bt-capsule-divider {
  background: #CBD5E1 !important;
}

.bt-status-capsule .bt-clock,
html:not(.dark) .bt-status-capsule .bt-clock {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: #A1A1AA;
  white-space: nowrap;
}

html:not(.dark) .bt-status-capsule .bt-clock,
html:not(.dark) .bt-status-capsule #clock-display {
  color: #475569 !important;
}

/* Zone 3: Unified Utility Actions & Integrated User Capsule */
.bt-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem !important;
  flex-shrink: 0;
}

.bt-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bt-topbar-icon-btn {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  padding: 0 0.7rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.bt-topbar-refresh-btn {
  width: 36px !important;
  padding: 0 !important;
}

.bt-topbar-vdivider {
  width: 1px;
  height: 20px;
  background: rgba(63, 63, 70, 0.55);
  margin: 0 0.15rem;
}

html:not(.dark) .bt-topbar-vdivider {
  background: #E2E8F0 !important;
}

.bt-user-badge.bt-user-capsule {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  padding: 0 0.25rem 0 0.4rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.bt-user-capsule .bt-user-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  flex-shrink: 0;
}

.bt-user-capsule .bt-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.1;
  color: #F4F4F5;
  white-space: nowrap;
}

html:not(.dark) .bt-user-capsule .bt-user-name {
  color: #1D1D1F !important;
}

.bt-user-capsule .bt-user-role {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.1;
  color: #A1A1AA;
  white-space: nowrap;
}

html:not(.dark) .bt-user-capsule .bt-user-role {
  color: #6E6E73 !important;
}

.bt-user-capsule-sep {
  width: 1px;
  height: 18px;
  background: rgba(63, 63, 70, 0.55);
  margin: 0 0.05rem;
}

html:not(.dark) .bt-user-capsule-sep {
  background: #E2E8F0 !important;
}

.bt-user-capsule .bt-user-logout-btn,
html:not(.dark) .bt-user-capsule .bt-user-logout-btn {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: #94A3B8 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bt-user-capsule .bt-user-logout-btn svg,
html:not(.dark) .bt-user-capsule .bt-user-logout-btn svg {
  color: currentColor !important;
}

.bt-user-capsule .bt-user-logout-btn:hover {
  background: rgba(244, 63, 94, 0.18) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
  color: #FDA4AF !important;
}

html:not(.dark) .bt-user-capsule .bt-user-logout-btn:hover {
  background: #FEE2E2 !important;
  border-color: #FECDD3 !important;
  color: #BE123C !important;
}

/* Mobile Slide-Over Fly-In / Fly-Out Drawer (<= 768px) */
@media (max-width: 768px) {
  .bt-topbar {
    padding: 0 0.65rem !important;
    gap: 0.4rem;
  }

  .bt-user-capsule .bt-user-meta {
    display: none !important;
  }

  .bt-topbar-icon-btn {
    height: 34px !important;
    min-height: 34px !important;
    width: 34px !important;
    padding: 0 !important;
  }

  .bt-user-badge.bt-user-capsule {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 0.2rem 0 0.3rem !important;
    gap: 0.25rem;
  }

  .bt-sidebar-backdrop {
    top: 56px;
  }

  #bt-nav-shell.bt-sidebar {
    top: 56px !important;
    height: calc(100dvh - 56px) !important;
    width: 272px !important;
    transform: translateX(-105%);
    z-index: 58;
    box-shadow: none;
  }

  #bt-nav-shell.bt-sidebar.is-mobile-open {
    transform: translateX(0);
    box-shadow: 16px 0 40px rgba(15, 23, 42, 0.25) !important;
  }

  #bt-nav-shell.bt-sidebar .bt-tab-label,
  #bt-nav-shell.bt-sidebar .bt-sidebar-section-title {
    opacity: 1 !important;
    max-width: 195px !important;
  }

  #bt-nav-shell.bt-sidebar .bt-sidebar-badge {
    position: static !important;
    margin-left: auto !important;
    font-size: 10px !important;
    padding: 2px 7px !important;
  }

  #bt-nav-shell.bt-sidebar .bt-sidebar-footer,
  #bt-nav-shell.bt-sidebar #btn-toggle-mobile-nav-sheet {
    display: none !important;
  }

  main.bt-container {
    margin-left: 0 !important;
    max-width: 100vw !important;
    padding: 0.75rem 0.5rem !important;
  }
}

/* Final Specificity Guard: Ensure icons/spans inside solid accent buttons & avatars stay #FFFFFF */
html:not(.dark) .bt-btn-primary,
html:not(.dark) .bt-btn-primary *,
html:not(.dark) .bt-btn-energy,
html:not(.dark) .bt-btn-energy *,
html:not(.dark) .bt-user-avatar,
html:not(.dark) .bt-user-avatar *,
html:not(.dark) .bt-avatar-pill,
html:not(.dark) .bt-avatar-pill *,
html:not(.dark) .bt-tab-btn.active,
html:not(.dark) .bt-tab-btn.active *:not([id$="-badge"]),
html:not(.dark) .bt-segmented-btn.active,
html:not(.dark) .bt-segmented-btn.active *,
html:not(.dark) .bt-mobile-nav-item.active,
html:not(.dark) .bt-mobile-nav-item.active * {
  color: #FFFFFF !important;
}

/* ============================================================================
   DELEGATED HOTLINE HOLDER BAR & GRANULAR WEB RBAC MODAL (Apple HIG Light/Dark)
   ============================================================================ */
.bt-dispatcher-bar {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(30, 27, 75, 0.28);
  border: 1px solid rgba(99, 102, 241, 0.35);
}

html:not(.dark) .bt-dispatcher-bar {
  background: linear-gradient(180deg, #F5F7FF 0%, #EEF2FF 100%) !important;
  border: 1px solid #C7D2FE !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.06) !important;
}

.bt-dispatcher-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1.2;
  transition: all 0.16s ease;
  cursor: pointer;
}

.bt-dispatcher-pill:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.bt-dispatcher-pill.is-director {
  cursor: default;
  background: rgba(99, 102, 241, 0.22);
  border: 1px solid rgba(129, 140, 248, 0.55);
  color: #E0E7FF;
}

html:not(.dark) .bt-dispatcher-pill.is-director {
  background: #E0E7FF !important;
  border: 1px solid #818CF8 !important;
  color: #1E1B4B !important;
}

.bt-dispatcher-pill.is-active {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.6);
  color: #D1FAE5;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

html:not(.dark) .bt-dispatcher-pill.is-active {
  background: #ECFDF5 !important;
  border: 1.5px solid #10B981 !important;
  color: #065F46 !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.14) !important;
}

.bt-dispatcher-pill.is-inactive {
  background: rgba(39, 39, 42, 0.7);
  border: 1px solid rgba(82, 82, 91, 0.7);
  color: #A1A1AA;
}

.bt-dispatcher-pill.is-inactive:hover:not(:disabled) {
  border-color: rgba(129, 140, 248, 0.7);
  color: #F4F4F5;
}

html:not(.dark) .bt-dispatcher-pill.is-inactive {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

html:not(.dark) .bt-dispatcher-pill.is-inactive:hover:not(:disabled) {
  border-color: #6366F1 !important;
  color: #1E1B4B !important;
  background: #F8FAFC !important;
}

.bt-dispatcher-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.35);
  color: inherit;
}

html:not(.dark) .bt-dispatcher-pill.is-active .bt-dispatcher-tag {
  background: #D1FAE5 !important;
  color: #047857 !important;
  font-weight: 600;
}

html:not(.dark) .bt-dispatcher-pill.is-director .bt-dispatcher-tag {
  background: #C7D2FE !important;
  color: #312E81 !important;
  font-weight: 600;
}

html:not(.dark) .bt-dispatcher-pill.is-inactive .bt-dispatcher-tag {
  background: #F1F5F9 !important;
  color: #64748B !important;
}

/* RBAC Modal Components */
.bt-rbac-preset-pill {
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(82, 82, 91, 0.7);
  background: rgba(24, 24, 27, 0.8);
  color: #D4D4D8;
  transition: all 0.15s ease;
  cursor: pointer;
}

.bt-rbac-preset-pill.active {
  background: rgba(79, 70, 229, 0.25);
  border-color: #6366F1;
  color: #E0E7FF;
  font-weight: 600;
}

html:not(.dark) .bt-rbac-preset-pill {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

html:not(.dark) .bt-rbac-preset-pill.active {
  background: #EEF2FF !important;
  border-color: #4F46E5 !important;
  color: #312E81 !important;
  box-shadow: 0 1px 4px rgba(79, 70, 229, 0.14) !important;
}

.bt-rbac-check-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: rgba(24, 24, 27, 0.65);
  border: 1px solid rgba(63, 63, 70, 0.7);
  color: #E4E4E7;
  cursor: pointer;
  user-select: none;
}

html:not(.dark) .bt-rbac-check-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
}

.bt-rbac-user-card {
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: rgba(24, 24, 27, 0.75);
  border: 1px solid rgba(63, 63, 70, 0.8);
  transition: all 0.15s ease;
}

.bt-rbac-user-card.is-selected {
  border-color: #6366F1;
  background: rgba(49, 46, 129, 0.25);
}

html:not(.dark) .bt-rbac-user-card {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
}

html:not(.dark) .bt-rbac-user-card.is-selected {
  background: #EEF2FF !important;
  border-color: #4F46E5 !important;
}

.bt-rbac-mini-tag {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #7DD3FC;
}

html:not(.dark) .bt-rbac-mini-tag {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #1D4ED8 !important;
}

#view-employees .bt-table th,
#view-employees .bt-table td {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

/* 1-Line Compact Hotline Status Summary Bar */
.bt-hotline-compact-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  background: rgba(24, 24, 27, 0.72);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

html:not(.dark) .bt-hotline-compact-status {
  background: linear-gradient(90deg, #F8FAFC 0%, #EEF2FF 100%) !important;
  border: 1px solid #C7D2FE !important;
  box-shadow: inset 0 1px 0 #FFFFFF !important;
}

.bt-compact-holder-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.bt-compact-holder-chip.is-director {
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(129, 140, 248, 0.5);
  color: #E0E7FF;
}

html:not(.dark) .bt-compact-holder-chip.is-director {
  background: #E0E7FF !important;
  border: 1px solid #A5B4FC !important;
  color: #1E1B4B !important;
}

.bt-compact-holder-chip.is-delegated {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.55);
  color: #D1FAE5;
}

html:not(.dark) .bt-compact-holder-chip.is-delegated {
  background: #DCFCE7 !important;
  border: 1px solid #6EE7B7 !important;
  color: #065F46 !important;
}

.bt-compact-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(79, 70, 229, 0.22);
  border: 1px solid rgba(99, 102, 241, 0.5);
  color: #C7D2FE;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bt-compact-settings-btn:hover {
  background: rgba(79, 70, 229, 0.35);
  border-color: #818CF8;
  color: #FFFFFF;
}

html:not(.dark) .bt-compact-settings-btn {
  background: #FFFFFF !important;
  border: 1px solid #A5B4FC !important;
  color: #3730A3 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) .bt-compact-settings-btn:hover {
  background: #EEF2FF !important;
  border-color: #6366F1 !important;
  color: #1E1B4B !important;
}