/* ============================================================
   WA-GENIUS — UNIFIED STYLESHEET (app.css)
   Single source of truth. Merged from style-pro.css + style.css +
   style-redesign.css + design-system.css (in original cascade order),
   with every legacy blue palette remapped onto the OE green tokens.
   Design tokens live in the DESIGN SYSTEM section at the bottom —
   change colors THERE only.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Hebrew:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;600&display=swap');


/* ==================================================================
   SECTION: legacy components (ex style-pro.css)
   ================================================================== */

/* ===== Professional business design system (WhatsApp Sender) ===== */
/* RTL + dark mode via body[data-theme] and data-bs-theme on <html> */

:root {
  /* Primary — Professional Blue */
  --c-primary: var(--oe-primary-cta);
  --c-primary-hover: #1DA851;
  --c-primary-light: rgba(37, 211, 102, 0.12);
  --c-primary-border: rgba(37, 211, 102, 0.35);

  /* Success — Confident Green */
  --c-success: var(--oe-success);
  --c-success-light: #ECFDF5;

  /* Warning — Alert Amber */
  --c-warning: var(--oe-warning);
  --c-warning-light: #FFFBEB;

  /* Danger — Clear Red */
  --c-danger: var(--oe-error);
  --c-danger-light: #FEF2F2;

  /* Accent (premium gradient partner) */
  --c-accent-purple: var(--oe-primary);
  --c-info-light: rgba(37, 211, 102, 0.10);

  /* Neutral Scale */
  --c-gray-50: var(--oe-surface-low);
  --c-gray-100: var(--oe-surface-high);
  --c-gray-200: #E2E8F0;
  --c-gray-300: #CBD5E1;
  --c-gray-400: #94A3B8;
  --c-gray-500: #64748B;
  --c-gray-600: #475569;
  --c-gray-700: #334155;
  --c-gray-800: #1E293B;
  --c-gray-900: #0F172A;

  /* Surfaces */
  --c-bg: var(--oe-bg);
  --c-surface: var(--oe-surface);
  --c-surface-raised: var(--oe-surface-high);
  --c-border: var(--oe-border);
  --c-border-strong: var(--oe-border-strong);

  /* Typography */
  --c-text-primary: var(--oe-text);
  --c-text-secondary: var(--oe-text-muted);
  --c-text-muted: var(--oe-text-disabled);

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
    0 2px 4px -1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 4px 6px -2px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition: 150ms ease;
}

[data-bs-theme="dark"],
body[data-theme="dark"] {
  --c-bg: var(--oe-bg);
  --c-surface: var(--oe-surface);
  --c-surface-raised: var(--oe-surface-high);
  --c-border: var(--oe-border);
  --c-border-strong: var(--oe-border-strong);
  --c-text-primary: var(--oe-text);
  --c-text-secondary: var(--oe-text-muted);
  --c-text-muted: var(--oe-text-disabled);
  --c-primary-light: rgba(37, 211, 102, 0.12);
  --c-gray-50: var(--oe-surface-low);
  --c-gray-100: var(--oe-surface-high);
  --c-info-light: rgba(37, 211, 102, 0.10);
  --c-success-light: rgba(5, 150, 105, 0.12);
  --c-warning-light: rgba(217, 119, 6, 0.12);
  --c-danger-light: rgba(220, 38, 38, 0.12);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-primary);
  background: var(--c-bg);
}

h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 16px;
  font-weight: 600;
}

h4 {
  font-size: 14px;
  font-weight: 600;
}

.text-sm {
  font-size: 13px;
}

.text-xs {
  font-size: 12px;
}

/* ----- App navbar (Bootstrap-compatible) ----- */
.pro-app-navbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  min-height: 60px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.pro-app-navbar .navbar-brand {
  color: var(--c-text-primary);
}

.pro-brand-icon-lg,
.pro-navbar-brand-icon {
  width: 28px;
  height: 28px;
  background: rgba(37, 211, 102, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25d366;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: none;
}

.pro-brand-text {
  font-weight: 700;
  font-size: 15px;
  color: var(--c-text-primary);
}

.pro-navbar-link {
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  color: var(--c-text-secondary) !important;
  transition: background var(--transition), color var(--transition);
}

.pro-navbar-link:hover {
  background: var(--c-gray-100);
  color: var(--c-text-primary) !important;
}

.pro-nav-link-active.pro-navbar-link,
.navbar .pro-nav-link-active.nav-link {
  background: rgba(37, 211, 102, 0.08) !important;
  color: #25d366 !important;
  font-weight: 500 !important;
  position: relative;
}

.pro-nav-link-active.pro-navbar-link::after,
.navbar .pro-nav-link-active.nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent-purple));
  border-radius: 2px 2px 0 0;
  transform: none;
  display: block;
}

.pro-navbar-toggler {
  border: 1px solid var(--c-border-strong) !important;
  padding: 0.35rem 0.55rem;
}

.pro-navbar-toggler .navbar-toggler-icon {
  filter: none;
  opacity: 0.75;
}

.pro-navbar-user-strip {
  border-color: var(--c-border) !important;
}

@media (min-width: 992px) {
  .pro-navbar-user-strip.border-lg-0 {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

.pro-user-pill {
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  max-width: 100%;
}

.pro-user-avatar-sm {
  width: 26px;
  height: 26px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888888;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.pro-navbar-user-email {
  color: var(--c-text-primary);
  font-weight: 500;
}

/* Cards */
.pro-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, transform 200ms ease;
  animation: cardEnter 300ms ease forwards;
}

body.auth-page .pro-card {
  animation: none;
}

.pro-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

body.auth-page .pro-card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

.pro-card-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pro-card-body {
  padding: var(--space-6);
}

/* Buttons */
.btn-pro {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-pro-primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-hover));
  color: #fff;
  border-color: transparent;
  background-origin: border-box;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.btn-pro-primary:hover {
  background: linear-gradient(135deg, var(--c-primary-hover), var(--c-primary-hover));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-pro-primary:active {
  transform: translateY(0);
}

.btn-pro-secondary {
  background: var(--c-surface);
  color: var(--c-text-primary);
  border-color: var(--c-border-strong);
}

.btn-pro-secondary:hover {
  background: var(--c-gray-50);
}

.btn-pro-ghost {
  background: transparent;
  color: var(--c-text-secondary);
  border-color: transparent;
}

.btn-pro-ghost:hover {
  background: var(--c-gray-100);
  color: var(--c-text-primary);
}

.btn-pro-sm {
  padding: 5px 10px;
  font-size: 12px;
}

.btn-pro-lg {
  padding: 12px 24px;
  font-size: 15px;
}

/* Badges / status */
.badge-pro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

.badge-pro-success {
  background: var(--c-success-light);
  color: var(--c-success);
}

.badge-pro-warning {
  background: var(--c-warning-light);
  color: var(--c-warning);
}

.badge-pro-danger {
  background: var(--c-danger-light);
  color: var(--c-danger);
}

.badge-pro-info {
  background: var(--c-primary-light);
  color: var(--c-primary);
}

.badge-pro-neutral {
  background: var(--c-gray-100);
  color: var(--c-gray-600);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot-green {
  background: #10B981;
}

.status-dot-yellow {
  background: #F59E0B;
}

.status-dot-red {
  background: #EF4444;
}

.status-dot-pulse {
  animation: dotPulse 2s infinite;
}

.status-dot-live {
  position: relative;
}

.status-dot-live::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.35;
  animation: statusRipple 2s infinite;
}

@keyframes statusRipple {
  0% {
    transform: scale(1);
    opacity: 0.35;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes dotPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

/* Metric cards */
.metric-card {
  position: relative;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.metric-card::after {
  content: '';
  position: absolute;
  top: -20px;
  inset-inline-start: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.08;
  pointer-events: none;
}

.metric-card-blue::after {
  background: var(--c-primary);
}

.metric-card-green::after {
  background: #059669;
}

.metric-card-icon {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  font-size: 32px;
  opacity: 0.12;
  color: inherit;
  pointer-events: none;
  line-height: 1;
}

.card.status-card.text-white .metric-card-icon {
  opacity: 0.2;
  color: #fff;
}

.metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.metric-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--c-text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.metric-change {
  font-size: 12px;
  margin-top: var(--space-1);
}

.metric-change-up {
  color: var(--c-success);
}

.metric-change-down {
  color: var(--c-danger);
}

/* Tables */
.pro-table {
  width: 100%;
  border-collapse: collapse;
}

.pro-table th {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--c-gray-50);
  border-bottom: 1px solid var(--c-border);
  text-align: right;
}

.pro-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-primary);
  font-size: 14px;
}

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

.pro-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--c-gray-50) 55%, transparent);
}

[data-bs-theme='dark'] .pro-table tbody tr:nth-child(even),
body[data-theme='dark'] .pro-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.035);
}

.pro-table tbody tr {
  transition: background 150ms ease, transform 150ms ease;
}

.pro-table tbody tr:hover {
  background: var(--c-primary-light) !important;
}

[dir='rtl'] .pro-table tbody tr:hover {
  transform: translateX(2px);
}

[dir='ltr'] .pro-table tbody tr:hover {
  transform: translateX(-2px);
}

.pro-table td:first-child {
  font-weight: 500;
}

/* Reference navbar (sidebar layout) */
.pro-navbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
}

.pro-navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--c-text-primary);
  text-decoration: none;
}

.pro-navbar-brand-icon {
  width: 32px;
  height: 32px;
  background: var(--c-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}

.pro-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  color: var(--c-text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition);
}

.pro-nav-link:hover {
  background: var(--c-gray-100);
  color: var(--c-text-primary);
}

.pro-nav-link.active {
  background: var(--c-primary-light);
  color: var(--c-primary);
}

/* Sidebar (optional layout) */
.pro-layout {
  display: flex;
  min-height: 100vh;
}

.pro-sidebar {
  width: 220px;
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  padding: var(--space-4) 0;
  flex-shrink: 0;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.pro-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  margin: 1px 8px;
  border-radius: var(--radius-md);
  color: var(--c-text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.pro-sidebar-item:hover {
  background: var(--c-gray-100);
  color: var(--c-text-primary);
}

.pro-sidebar-item.active {
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-weight: 600;
}

.pro-sidebar-item i {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.pro-sidebar-section {
  padding: 16px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pro-main {
  flex: 1;
  padding: var(--space-6);
  min-width: 0;
}

/* Forms */
.pro-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--c-text-primary);
  background: var(--c-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.pro-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.pro-input::placeholder {
  color: var(--c-text-muted);
}

.pro-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-secondary);
  margin-bottom: 6px;
}

.pro-form-group {
  margin-bottom: var(--space-4);
}

/* Page header */
.pro-page-header {
  position: relative;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pro-page-header .pro-page-title,
.pro-page-header .pro-page-subtitle {
  text-align: right;
  width: 100%;
}

.pro-page-header::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: rgba(37, 211, 102, 0.4);
  border-radius: 2px;
  margin-bottom: 12px;
}

.pro-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text-primary);
  letter-spacing: -0.02em;
  margin: 0 4px 0 0;
  flex-direction: row-reverse;
}

.pro-page-subtitle {
  font-size: 14px;
  color: var(--c-text-secondary);
  margin: 0;
}

/* Empty states */
.pro-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.pro-empty-icon {
  width: 56px;
  height: 56px;
  background: var(--c-gray-100);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: 24px;
  color: var(--c-text-muted);
}

.pro-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text-primary);
  margin-bottom: var(--space-2);
}

.pro-empty-desc {
  font-size: 14px;
  color: var(--c-text-secondary);
  margin-bottom: var(--space-5);
}

/* Skeletons */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-gray-100) 25%,
    var(--c-gray-200) 50%,
    var(--c-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}

.skeleton-text-sm {
  height: 12px;
}

.skeleton-title {
  height: 20px;
  width: 60%;
}

/* Auth (login / register) */
.pro-auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
}

.pro-auth-card-wrap {
  width: 100%;
  max-width: 440px;
}

.pro-auth-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent-purple));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

.pro-auth-footer {
  margin-top: var(--space-8);
  text-align: center;
  font-size: 13px;
  color: var(--c-text-muted);
}

.pro-auth-footer a {
  color: var(--c-primary);
  font-weight: 500;
  text-decoration: none;
}

.pro-auth-footer a:hover {
  text-decoration: underline;
}

/* Micro-interactions */
.btn-pro:active {
  transform: scale(0.98) !important;
}

.pro-nav-link::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--c-primary);
  transform: scaleX(0);
  transition: transform 200ms ease;
}

.pro-nav-link:hover::after {
  transform: scaleX(1);
}

.page-content {
  animation: pageEnter 250ms ease forwards;
}

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

/* Premium Bootstrap card accents (RTL: inline-start = right in dir=rtl) */
.card-accent-blue {
  border-inline-start: 3px solid var(--c-primary) !important;
}

.card-accent-green {
  border-inline-start: 3px solid #059669 !important;
}

.card-accent-purple {
  border-inline-start: 3px solid var(--oe-primary) !important;
}

.card-accent-amber {
  border-inline-start: 3px solid #d97706 !important;
}

/* Input with leading icon (RTL-aware) */
.input-pro-wrapper {
  position: relative;
}

.input-pro-wrapper .bi {
  position: absolute;
  top: 50%;
  inset-inline-end: 12px;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  pointer-events: none;
  font-size: 1rem;
}

.input-pro-wrapper .form-control,
.input-pro-wrapper .form-select {
  padding-inline-end: 2.25rem;
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--c-gray-300);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-gray-400);
}

/* ----- Campaigns / analytics / A-B / auto-reply (dashboard-quality) ----- */
.pro-stats-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.pro-analytics-main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

@media (max-width: 991.98px) {
  .pro-stats-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .pro-analytics-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .pro-stats-grid-4 {
    grid-template-columns: 1fr;
  }
}

.campaign-card {
  overflow: hidden;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.campaign-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.campaign-card .campaign-card-head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.campaign-card .campaign-card-body-inner {
  padding: var(--space-4) var(--space-5);
}

.campaign-seq-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.campaign-seq-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-gray-200);
  border: 2px solid var(--c-border);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.campaign-seq-dot.done {
  background: var(--c-success);
  border-color: var(--c-success);
}

.campaign-seq-dot.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  transform: scale(1.15);
}

/* Campaign status (dots + badges) */
.camp-status-running {
  background: #10b981;
}

.camp-status-paused {
  background: #f59e0b;
}

.camp-status-completed {
  background: var(--c-primary);
}

.camp-status-draft {
  background: #94a3b8;
}

.badge-pro-draft {
  background: var(--c-gray-100);
  color: var(--c-gray-600);
}

.badge-pro-active {
  background: var(--c-success-light);
  color: var(--c-success);
}

.badge-pro-paused {
  background: var(--c-warning-light);
  color: var(--c-warning);
}

.badge-pro-completed {
  background: color-mix(in srgb, var(--c-primary) 18%, transparent);
  color: var(--c-primary);
}

[data-bs-theme='dark'] .badge-pro-completed,
body[data-theme='dark'] .badge-pro-completed {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

/* Wizard steps */
.camp-step {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  background: var(--c-gray-100);
  transition: background 200ms ease, color 200ms ease;
}

.camp-step.active {
  background: var(--c-primary-light);
  color: var(--c-primary);
}

.camp-step.done {
  background: var(--c-success-light);
  color: var(--c-success);
}

.camp-step-row {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-6);
}

/* Hours heatmap */
.hour-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.hour-bar-track {
  flex: 1;
  height: 20px;
  background: var(--c-gray-100);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hour-bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.5s ease;
  max-width: 100%;
}

/* Auto-reply chat */
.autoreply-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.autoreply-power {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--c-border);
  font-size: 13px;
  font-weight: 600;
  transition: background 200ms ease, border-color 200ms ease;
}

.autoreply-power.is-on {
  background: var(--c-success-light);
  border-color: var(--c-success);
  color: var(--c-success);
}

.autoreply-power.is-off {
  background: var(--c-gray-100);
  color: var(--c-text-muted);
}

.autoreply-power .power-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-gray-300);
  transition: background 200ms ease, box-shadow 200ms ease;
}

.autoreply-power.is-on .power-dot {
  background: var(--c-success);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25);
}

.autoreply-schedule-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-gray-50);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.autoreply-schedule-track {
  flex: 1;
  height: 8px;
  background: var(--c-gray-200);
  border-radius: var(--radius-full);
  position: relative;
  direction: ltr;
}

.autoreply-schedule-window {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent-purple));
  transition: left 200ms ease, width 200ms ease;
}

.autoreply-chat-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--space-4);
  background: var(--c-gray-50);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  min-height: 140px;
  max-height: 280px;
  overflow-y: auto;
}

.autoreply-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  transition: transform 200ms ease;
}

.autoreply-bubble-incoming {
  background: var(--c-gray-100);
  color: var(--c-text-primary);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  border: 1px solid var(--c-border);
}

.autoreply-bubble-outgoing {
  background: var(--c-primary);
  color: #fff;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

.autoreply-preview-box {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--c-surface);
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text-secondary);
}

.pro-loading-skeleton-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}

@media (max-width: 575.98px) {
  .pro-loading-skeleton-cards {
    grid-template-columns: 1fr;
  }
}

/* ===== Skeleton loading ===== */
@keyframes skeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-box {
  background: linear-gradient(
    90deg,
    var(--c-gray-100) 25%,
    var(--c-gray-200) 50%,
    var(--c-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
}

.skeleton-text-sm {
  height: 12px;
}

.skeleton-text-lg {
  height: 20px;
}

.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: 16px;
}

.skeleton-circle {
  border-radius: 50% !important;
}

.skeleton-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
}

.skeleton-btn {
  height: 38px;
  width: 120px;
  border-radius: var(--radius-md);
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Card entrance (staggered siblings) */
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pro-card:nth-child(1) {
  animation-delay: 0ms;
}

.pro-card:nth-child(2) {
  animation-delay: 50ms;
}

.pro-card:nth-child(3) {
  animation-delay: 100ms;
}

.pro-card:nth-child(4) {
  animation-delay: 150ms;
}

.pro-card:nth-child(5) {
  animation-delay: 200ms;
}

.pro-input,
.form-control,
.form-select {
  transition: border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease !important;
}

.pro-input:focus,
.form-control:focus,
.form-select:focus {
  transform: translateY(-1px) !important;
}

/* Mobile navbar */
@media (max-width: 991px) {
  .navbar-collapse {
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    padding: 12px 0;
    margin-top: 8px;
  }

  .navbar-nav {
    flex-direction: column !important;
    width: 100%;
  }

  .pro-nav-link,
  .pro-navbar-link {
    padding: 10px 16px !important;
    border-radius: 0 !important;
    width: 100%;
  }

  .pro-nav-link:hover,
  .pro-navbar-link:hover {
    background: var(--c-gray-100) !important;
  }
}

/* Toast */
@keyframes toastEnter {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastExit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast-pro {
  animation: toastEnter 300ms ease forwards;
}

.toast-pro.hiding {
  animation: toastExit 300ms ease forwards;
}

.toast-pro-success {
  border-right: 4px solid var(--c-success) !important;
  background: var(--c-success-light) !important;
}

.toast-pro-danger {
  border-right: 4px solid var(--c-danger) !important;
  background: var(--c-danger-light) !important;
}

.toast-pro-warning {
  border-right: 4px solid var(--c-warning) !important;
  background: var(--c-warning-light) !important;
}

.toast-pro-info {
  border-right: 4px solid var(--c-primary) !important;
  background: var(--c-primary-light) !important;
}

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

/* ── Dark-mode table fixes ── */
.table thead th {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.7) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.table td, .table tr {
  border-color: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.8) !important;
}



/* ==================================================================
   SECTION: legacy bridge + components (ex style.css)
   ================================================================== */

/* ===== PROFESSIONAL DESIGN SYSTEM + LEGACY BRIDGE ===== */

:root {
    --primary: var(--c-primary);
    --primary-color: var(--c-primary);
    --primary-dark: var(--c-primary-hover);
    --success: var(--c-success);
    --success-color: var(--c-success);
    --warning: var(--c-warning);
    --warning-color: var(--c-warning);
    --danger: var(--c-danger);
    --danger-color: var(--c-danger);
    --info-color: var(--c-primary);
    --secondary-color: var(--c-gray-500);
    --dark-color: var(--c-gray-900);
    --bg-main: var(--c-bg);
    --bg-card: var(--c-surface);
    --light-bg: var(--c-gray-50);
    --bg-page: var(--c-bg);
    --blur: blur(10px);
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);
    --radius: 12px;
    --radius-lg: 16px;
    --text-primary: var(--c-text-primary);
    --text-secondary: var(--c-text-secondary);
    --text-tertiary: var(--c-text-muted);
    --border-color: var(--c-border);
    --border-nav: var(--c-border-strong);
    --glass-bg: var(--c-surface);
    --glass-border: var(--c-border);
    --gradient-primary: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);
    --gradient-success: linear-gradient(180deg, var(--c-success) 0%, #047857 100%);
    --gradient-danger: linear-gradient(180deg, var(--c-danger) 0%, #b91c1c 100%);
    --neon-purple: var(--c-primary);
    --neon-blue: var(--c-primary);
    --neon-green: var(--c-success);
    --neon-pink: var(--c-danger);
    --accent: var(--c-success);
    --luxury-separator: 1px;
    --space-section: 1.5rem;
    --space-section-lg: 2.5rem;
    --space-card: 1.5rem;
}

/* Override Bootstrap with pro tokens */
.card {
    background: var(--c-surface) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 220ms ease, transform 220ms ease !important;
}

.card:hover {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

body[data-theme="dark"] .card,
[data-bs-theme="dark"] .card {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.45),
        0 4px 20px rgba(0, 0, 0, 0.28) !important;
}

body[data-theme="dark"] .card:hover,
[data-bs-theme="dark"] .card:hover {
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.5),
        0 10px 36px rgba(0, 0, 0, 0.35) !important;
}

.card-header {
    background: var(--c-gray-50) !important;
    border-bottom: 1px solid var(--c-border) !important;
    padding: 14px 20px !important;
    font-weight: 600 !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-hover)) !important;
    border-color: transparent !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--c-primary-hover), var(--c-primary-hover)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
}

.navbar:not(.navbar-dark) {
    background: var(--c-surface) !important;
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.navbar-brand {
    font-weight: 700 !important;
}

.nav-link {
    border-radius: var(--radius-md) !important;
    transition: all var(--transition) !important;
}

.nav-link:hover {
    background: var(--c-gray-100) !important;
}

.form-control,
.form-select {
    border: 1px solid var(--c-border-strong) !important;
    border-radius: var(--radius-md) !important;
    background: var(--c-gray-50) !important;
    transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    background: var(--c-surface) !important;
    transform: translateY(-1px) !important;
}

body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background: var(--c-surface-raised) !important;
}

.table > thead > tr > th {
    background: var(--c-gray-50) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--c-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--c-border) !important;
}

.badge {
    border-radius: var(--radius-full) !important;
    font-weight: 500 !important;
}

.alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border-radius: var(--radius-lg) !important;
    border: none !important;
    border-inline-start: 4px solid var(--c-border-strong) !important;
    font-size: 14px !important;
}

.alert-success {
    border-inline-start-color: var(--c-success) !important;
    background: var(--c-success-light) !important;
    color: var(--c-text-primary) !important;
}

.alert-danger {
    border-inline-start-color: var(--c-danger) !important;
    background: var(--c-danger-light) !important;
    color: var(--c-text-primary) !important;
}

.alert-warning {
    border-inline-start-color: var(--c-warning) !important;
    background: var(--c-warning-light) !important;
    color: var(--c-text-primary) !important;
}

.alert-info {
    border-inline-start-color: var(--c-primary) !important;
    background: var(--c-info-light) !important;
    color: var(--c-text-primary) !important;
}

.modal-content {
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
}

.modal-header {
    border-bottom: 1px solid var(--c-border) !important;
    padding: 20px 24px !important;
}

.modal-footer {
    border-top: 1px solid var(--c-border) !important;
    padding: 16px 24px !important;
}

/* ===== DARK THEME – Premium dark-luxury (מצב לילה / Executive control center) ===== */
body[data-theme="dark"] {
    --bg-page: var(--c-bg);
    --bg-main: var(--c-bg);
    --bg-card: var(--c-surface);
    --light-bg: var(--c-gray-50);
    --text-primary: var(--c-text-primary);
    --text-secondary: var(--c-text-secondary);
    --text-tertiary: var(--c-text-muted);
    --border-color: var(--c-border);
    --border-nav: var(--c-border-strong);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.3);
    --accent: var(--c-success);
    --space-section: 2rem;
    --space-section-lg: 3rem;
    --space-card: 1.75rem;
}

body[data-theme="dark"] .table tbody tr:hover {
    background: rgba(0, 122, 255, 0.12);
}

body[data-theme="dark"] .form-control {
    background: var(--oe-surface-low);
    border-color: var(--oe-border);
    color: var(--oe-text);
}

body[data-theme="dark"] .form-control:focus {
    background: var(--bg-card);
}

body[data-theme="dark"] .form-control::placeholder {
    color: var(--text-tertiary);
}

body[data-theme="dark"] .table thead {
    background: var(--light-bg);
}

body[data-theme="dark"] .table tbody tr {
    border-bottom-color: var(--border-color);
}

body[data-theme="dark"] .list-group-item {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body[data-theme="dark"] .list-group-item:hover {
    background: var(--light-bg);
}

body[data-theme="dark"] .modal-content {
    background: var(--bg-card);
    border: var(--luxury-separator) solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] .modal-header,
body[data-theme="dark"] .modal-footer {
    border-color: var(--border-color);
}

body[data-theme="dark"] .stat-box {
    background: var(--bg-card);
    border-color: var(--border-color);
}


body[data-theme="dark"] .navbar .navbar-nav {
    background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .custom-tabs {
    background: var(--bg-card);
    border-bottom-color: var(--border-color);
}

body[data-theme="dark"] .custom-tabs .nav-link {
    color: var(--text-secondary);
}

body[data-theme="dark"] .custom-tabs .nav-link:hover,
body[data-theme="dark"] .custom-tabs .nav-link.active {
    color: var(--primary);
    background: rgba(0, 122, 255, 0.1);
}

body[data-theme="dark"] .tab-content {
    background: transparent;
}

body[data-theme="dark"] .logs-terminal {
    background: #0d1117;
}

body[data-theme="dark"] .empty-state {
    color: var(--text-secondary);
}

body[data-theme="dark"] .range-bar,
body[data-theme="dark"] .bg-light {
    background: var(--light-bg) !important;
}

body[data-theme="dark"] .stat-box:hover {
    background: var(--light-bg) !important;
}

body[data-theme="dark"] .card.bg-light {
    background: var(--light-bg) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] .table-light,
body[data-theme="dark"] .table-info {
    background: var(--light-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] .badge.bg-light.text-dark {
    background: var(--light-bg) !important;
    color: var(--text-primary) !important;
}

body[data-theme="dark"] .alert-success {
    background: rgba(52, 199, 89, 0.2);
    color: #7bed9f;
    border-inline-start-color: var(--success-color);
}

body[data-theme="dark"] .alert-danger {
    background: rgba(255, 59, 48, 0.2);
    color: #ff9f9a;
    border-inline-start-color: var(--danger-color);
}

body[data-theme="dark"] .alert-warning {
    background: rgba(255, 149, 0, 0.2);
    color: #ffd699;
    border-inline-start-color: var(--warning-color);
}

body[data-theme="dark"] .alert-info {
    background: rgba(90, 200, 250, 0.2);
    color: #7dd3fc;
    border-inline-start-color: var(--info-color);
}

body[data-theme="dark"] #qrContainer,
body[data-theme="dark"] .qr-display {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] #qrContainer img,
body[data-theme="dark"] .modal-body img,
body[data-theme="dark"] .qr-display img {
    background: var(--light-bg) !important;
}

body[data-theme="dark"] #qrModalContent {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] #previewContainer {
    background: var(--light-bg) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] #previewContainer h6 {
    color: var(--text-primary) !important;
}

body[data-theme="dark"] .table-responsive::-webkit-scrollbar-track {
    background: var(--light-bg);
}

body[data-theme="dark"] .timer-slider {
    background: var(--light-bg) !important;
}

body[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

body[data-theme="dark"] .card-header {
    background: var(--light-bg) !important;
    color: var(--text-primary) !important;
    border-inline-start-color: var(--primary);
}

body[data-theme="dark"] .card-header.bg-primary {
    background: rgba(0, 82, 213, 0.95) !important;
    border-inline-start-color: rgba(255, 255, 255, 0.4);
    color: #fff !important;
}

body[data-theme="dark"] .card-header.bg-info {
    background: rgba(0, 120, 180, 0.95) !important;
    border-inline-start-color: rgba(255, 255, 255, 0.4);
    color: #fff !important;
}

body[data-theme="dark"] .card-header.bg-success {
    background: rgba(30, 140, 70, 0.95) !important;
    border-inline-start-color: rgba(255, 255, 255, 0.4);
    color: #fff !important;
}

body[data-theme="dark"] .card-header.bg-warning {
    background: rgba(180, 100, 0, 0.95) !important;
    border-inline-start-color: rgba(255, 255, 255, 0.4);
    color: #fff !important;
}

body[data-theme="dark"] .card-header.bg-danger {
    background: rgba(180, 40, 35, 0.95) !important;
    border-inline-start-color: rgba(255, 255, 255, 0.4);
    color: #fff !important;
}

body[data-theme="dark"] .card-header.bg-secondary {
    background: rgba(80, 80, 85, 0.95) !important;
    border-inline-start-color: rgba(255, 255, 255, 0.4);
    color: #fff !important;
}

body[data-theme="dark"] .card-header.bg-dark {
    background: rgba(30, 30, 32, 0.98) !important;
    border-inline-start-color: rgba(255, 255, 255, 0.3);
    color: #fff !important;
}

body[data-theme="dark"] .form-check-label {
    color: #fff !important;
}

body[data-theme="dark"] .card-body .mb-4 h6 {
    color: #fff !important;
}

body[data-theme="dark"] .card {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] .card-body {
    background: var(--bg-card) !important;
    color: var(--text-primary);
}

body[data-theme="dark"] .table-responsive {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] .table {
    color: var(--text-primary);
    background-color: transparent !important;
}

body[data-theme="dark"] .table thead th {
    color: var(--text-primary);
    border-bottom: var(--luxury-separator) solid var(--border-color);
    font-weight: 600;
}

body[data-theme="dark"] .table tbody td {
    color: var(--text-primary);
}

body[data-theme="dark"] .table .text-muted {
    color: var(--text-secondary) !important;
}

/* טבלת משתמשים באדמין (וכל טבלה עם thead.table-light) – מצב לילה */
body[data-theme="dark"] .table thead.table-light,
body[data-theme="dark"] .table thead.table-light th {
    background: var(--light-bg) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
body[data-theme="dark"] .table tbody tr {
    background: var(--bg-card) !important;
    border-bottom-color: var(--border-color);
}
body[data-theme="dark"] .table tbody td {
    background: var(--bg-card) !important;
    color: var(--text-primary);
}
body[data-theme="dark"] .card-footer.bg-light {
    background: var(--light-bg) !important;
    border-top-color: var(--border-color);
    color: var(--text-primary);
}
body[data-theme="dark"] .card-header.bg-light {
    background: var(--light-bg) !important;
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

/* ===== DARK LUXURY – High whitespace, subtle depth, micro-animations ===== */
body[data-theme="dark"] .page-content {
    padding-top: 1rem;
    padding-bottom: var(--space-section-lg);
}
body[data-theme="dark"] .section-spacing {
    margin-bottom: var(--space-section);
}
body[data-theme="dark"] .section-spacing-lg {
    margin-bottom: var(--space-section-lg);
}
body[data-theme="dark"] .card {
    box-shadow: var(--card-shadow);
    border-width: var(--luxury-separator);
    transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.2s ease;
}
body[data-theme="dark"] .card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-1px);
}
body[data-theme="dark"] .card::before {
    background: var(--accent);
    opacity: 0;
    height: 2px;
}
body[data-theme="dark"] .card:hover::before {
    opacity: 0.6;
}
body[data-theme="dark"] .card-body {
    padding: var(--space-card);
}
body[data-theme="dark"] .navbar,
body[data-theme="dark"] .navbar.bg-success {
    border-bottom: var(--luxury-separator) solid var(--border-color);
    box-shadow: none;
}
body[data-theme="dark"] .table tbody tr {
    transition: background 0.2s ease;
}
body[data-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
body[data-theme="dark"] .custom-tabs {
    border-bottom-width: var(--luxury-separator);
}
body[data-theme="dark"] .custom-tabs .nav-link {
    transition: color 0.2s ease, background 0.2s ease;
}
body[data-theme="dark"] .custom-tabs .nav-link.active {
    color: var(--accent) !important;
    background: rgba(52, 199, 89, 0.08);
}
body[data-theme="dark"] .btn-primary,
body[data-theme="dark"] .btn-success {
    background: var(--accent) !important;
    border-color: var(--accent);
    color: #fff;
}
body[data-theme="dark"] .btn-primary:hover,
body[data-theme="dark"] .btn-success:hover {
    background: #2db84e !important;
    border-color: #2db84e;
    filter: brightness(1.05);
}
body[data-theme="dark"] .navbar.bg-success {
    background: var(--oe-surface) !important;
}
body[data-theme="dark"] .navbar.bg-success .nav-link,
body[data-theme="dark"] .navbar.bg-success .navbar-text {
    color: var(--text-primary) !important;
}
body[data-theme="dark"] .navbar.bg-success .btn-outline-light {
    border-color: var(--border-color);
    color: var(--text-primary);
}
body[data-theme="dark"] .navbar.bg-success .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
body[data-theme="dark"] .page-title {
    font-weight: 600;
    letter-spacing: -0.02em;
}
body[data-theme="dark"] .page-subtitle {
    color: var(--text-secondary);
}
body[data-theme="dark"] .status-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    border: var(--luxury-separator) solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body[data-theme="dark"] .status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
body[data-theme="dark"] .status-card.bg-primary,
body[data-theme="dark"] .status-card.bg-success,
body[data-theme="dark"] .status-card.bg-danger,
body[data-theme="dark"] .status-card.bg-info {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
body[data-theme="dark"] .form-control {
    border-width: var(--luxury-separator);
    background: var(--light-bg);
}
body[data-theme="dark"] .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.15);
}
body[data-theme="dark"] .logs-terminal {
    background: #161618;
    border: var(--luxury-separator) solid var(--border-color);
}

/* כרטיסי היסטוריה – דריסה מפורשת במצב לילה */
body[data-theme="dark"] #history .card {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] #history .card-body {
    background: var(--bg-card) !important;
    color: var(--text-primary);
}

body[data-theme="dark"] #history .table-responsive {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] #history .table,
body[data-theme="dark"] #history .table thead th,
body[data-theme="dark"] #history .table tbody td {
    color: var(--text-primary);
    background-color: transparent !important;
}

body[data-theme="dark"] #history .table .text-muted {
    color: var(--text-secondary) !important;
}

/* לוח זמנים חימום – מצב לילה */
body[data-theme="dark"] #warmupScheduleCard {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] #warmupScheduleCard .card-body {
    background: var(--bg-card) !important;
    color: var(--text-primary);
}

body[data-theme="dark"] #warmupScheduleCard .table-responsive {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] #warmupScheduleCard .table,
body[data-theme="dark"] #warmupScheduleCard .table thead th,
body[data-theme="dark"] #warmupScheduleCard .table tbody td {
    color: var(--text-primary);
    background-color: transparent !important;
}

body[data-theme="dark"] #warmupScheduleCard .table-dark {
    background: var(--light-bg) !important;
    color: var(--text-primary);
}

/* ניהול אנשי קשר ידניים – מצב לילה */
body[data-theme="dark"] #manualContactsCard {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] #manualContactsCard .card-body {
    background: var(--bg-card) !important;
    color: var(--text-primary);
}

body[data-theme="dark"] #manualContactsCard .table-responsive {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] #manualContactsCard .table,
body[data-theme="dark"] #manualContactsCard .table thead th,
body[data-theme="dark"] #manualContactsCard .table tbody td {
    color: var(--text-primary);
    background-color: transparent !important;
}

body[data-theme="dark"] #manualContactsCard .table-dark {
    background: var(--light-bg) !important;
    color: var(--text-primary);
}

body[data-theme="dark"] #manualContactsCard .table .text-muted {
    color: var(--text-secondary) !important;
}

/* כרטיס שליפת אנשי קשר / טבלת קבוצות – מצב לילה */
body[data-theme="dark"] #extractContactsCard {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] #extractContactsCard .card-body {
    background: var(--bg-card) !important;
    color: var(--text-primary);
}

body[data-theme="dark"] #extractContactsCard .table-responsive {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

body[data-theme="dark"] #extractContactsCard .table,
body[data-theme="dark"] #extractContactsCard .table thead th,
body[data-theme="dark"] #extractContactsCard .table tbody td {
    color: var(--text-primary);
    background-color: transparent !important;
}

body[data-theme="dark"] #extractContactsCard .table-light {
    background: var(--light-bg) !important;
    color: var(--text-primary);
}

body[data-theme="dark"] #extractContactsCard .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] #extractContactsCard .table .text-muted {
    color: var(--text-secondary) !important;
}

/* כפתורי outline – גוון רך במצב לילה (פילטר לוגים וכו') */
body[data-theme="dark"] .btn-outline-primary {
    border-color: rgba(0, 122, 255, 0.5);
    color: rgba(0, 122, 255, 0.9);
}
body[data-theme="dark"] .btn-outline-primary:hover,
body[data-theme="dark"] .btn-outline-primary.active {
    background: rgba(0, 122, 255, 0.15);
    border-color: rgba(0, 122, 255, 0.6);
    color: rgba(255, 255, 255, 0.95);
}
body[data-theme="dark"] .btn-outline-success {
    border-color: rgba(52, 199, 89, 0.5);
    color: rgba(52, 199, 89, 0.9);
}
body[data-theme="dark"] .btn-outline-success:hover,
body[data-theme="dark"] .btn-outline-success.active {
    background: rgba(52, 199, 89, 0.12);
    color: rgba(255, 255, 255, 0.95);
}
body[data-theme="dark"] .btn-outline-danger {
    border-color: rgba(255, 59, 48, 0.5);
    color: rgba(255, 59, 48, 0.9);
}
body[data-theme="dark"] .btn-outline-danger:hover,
body[data-theme="dark"] .btn-outline-danger.active {
    background: rgba(255, 59, 48, 0.12);
    color: rgba(255, 255, 255, 0.95);
}

/* תג מידע בלוגים – גוון רך במצב לילה */
body[data-theme="dark"] .badge.bg-info {
    background: rgba(0, 120, 180, 0.35) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* hover שורות טבלה במצב לילה – רך יותר */
body[data-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.06);
}
body[data-theme="dark"] .logs-terminal .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* שורת מידע בלוגים – רקע כהה וטקסט קריא במצב לילה */
body[data-theme="dark"] .logs-terminal .table tbody tr.table-info,
body[data-theme="dark"] .logs-terminal .table tbody tr.table-info td {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
}

/* אזור לוגים – רקע כהה וטקסט קריא (כולל "אין לוגים עדיין") */
body[data-theme="dark"] .logs-terminal .table-responsive {
    background: #0d1117 !important;
}
body[data-theme="dark"] .logs-terminal .table,
body[data-theme="dark"] .logs-terminal .table tbody,
body[data-theme="dark"] .logs-terminal .table tbody tr,
body[data-theme="dark"] .logs-terminal .table tbody td {
    background: transparent !important;
}
body[data-theme="dark"] .logs-terminal .empty-state {
    color: var(--text-primary) !important;
}
body[data-theme="dark"] .logs-terminal .empty-state p {
    color: var(--text-secondary);
}

/* ===== GLOBAL STYLES ===== */
* {
    transition: var(--transition);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
    padding-bottom: 2rem;
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body > * {
    position: relative;
    z-index: 1;
}

/* ===== TYPOGRAPHY HIERARCHY (Professional UI) ===== */
.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}
.page-subtitle {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: 0;
}
.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.section-title.text-muted {
    color: var(--text-secondary);
}
.card-header .section-title,
.card-header h4,
.card-header h5,
.card-header h6 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0;
    letter-spacing: -0.01em;
}
.text-muted {
    color: var(--text-secondary) !important;
}

/* ===== SPACING (Consistent rhythm) ===== */
.page-content {
    padding-top: 0.5rem;
}
.section-spacing {
    margin-bottom: 2rem;
}
.section-spacing-lg {
    margin-bottom: 2.5rem;
}
.card + .card {
    margin-top: 0;
}
.gap-row {
    gap: 1.5rem 0;
}

/* ===== NAVBAR (Glass + Segmented look) ===== */
.navbar {
    background: var(--bg-card) !important;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--border-nav);
    padding: 0.5rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}
.navbar .navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(0, 0, 0, 0.04);
    padding: 0.25rem;
    border-radius: var(--radius);
}
.navbar .nav-link {
    border-radius: 8px;
    padding: 0.5rem 1rem !important;
    color: var(--text-secondary) !important;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition);
}
.navbar .nav-link:hover {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-primary) !important;
}
.navbar .nav-link[href]:not([href="#"]) {
    color: var(--text-primary) !important;
}
.navbar.bg-success .nav-link,
.navbar .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}
.navbar.bg-success {
    background: var(--success) !important;
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em;
}

.navbar-brand i {
    font-size: 1.35rem;
    margin-inline-start: 0.5rem;
    color: var(--success-color);
}


.navbar-text {
    font-weight: 500;
    color: var(--text-secondary) !important;
    font-size: 0.9rem;
}

.navbar .btn-outline-light {
    border: 1px solid var(--border-nav);
    color: var(--text-primary);
    background: transparent;
    border-radius: var(--radius);
    transition: var(--transition);
}
.navbar .btn-outline-light:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}

/* ===== CARDS ===== */
.card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    background: var(--bg-card);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    margin-bottom: 1.5rem;
    transition: var(--transition);
    animation: fadeInUp 0.4s ease-out;
    position: relative;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.card:hover::before {
    opacity: 1;
}

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


.card-header {
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    background: var(--oe-surface-low) !important;
    color: var(--oe-text) !important;
    border-inline-start: 3px solid var(--primary-color);
}
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-danger,
.card-header.bg-secondary,
.card-header.bg-dark {
    border-inline-start-color: rgba(255,255,255,0.5);
    color: #fff !important;
}
.card-header::before,
.card-header::after {
    content: none;
}

.card-body {
    padding: 1.5rem;
}

/* ===== BUTTONS ===== */
.btn {
    border-radius: var(--radius);
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    transition: var(--transition);
    border: none;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
}
.btn-primary {
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
}
.btn-primary:hover {
    background: linear-gradient(180deg, var(--c-primary-hover) 0%, var(--primary-dark) 100%);
}
.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}
.btn-outline-primary:hover {
    background: rgba(0, 122, 255, 0.08);
    color: var(--primary-dark);
}
.btn-secondary,
.btn-outline-secondary {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: rgba(0, 0, 0, 0.08);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: 0;
}

.btn:hover::before {
    width: 400px;
    height: 400px;
}

.btn > * {
    position: relative;
    z-index: 1;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn:hover::after {
    left: 100%;
}

.btn-success {
    background: var(--success-color);
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-success:hover {
    background: #30b350;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-warning {
    background: var(--warning-color);
    color: #1d1d1f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-warning:hover {
    background: #e68600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-info {
    background: var(--info-color);
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-info:hover {
    background: #4ab8e8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-danger {
    background: var(--danger-color);
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-danger:hover {
    background: #e6352b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-group {
    gap: 0.5rem;
}

.btn-group .btn {
    margin: 0;
}

/* ===== FORMS ===== */
.form-control {
    border-radius: 12px;
    border: 2px solid #e0e0e0;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
    background: #fff;
}

.form-control:hover {
    border-color: #b0b0b0;
}

.form-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0.01em;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===== TABLES ===== */
.table {
    font-size: 0.95rem;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.table thead {
    background: var(--light-bg);
    color: var(--text-primary);
    position: sticky;
    top: 0;
    z-index: 10;
    border-radius: var(--radius) var(--radius) 0 0;
}
.table thead th {
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 0.875rem 1rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.table tbody tr {
    transition: var(--transition);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.table tbody tr:hover {
    background: #F2F7FF;
}

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

.table tbody td {
    padding: 1rem;
    vertical-align: middle;
    text-align: center;
}

.table-responsive {
    max-height: 400px;
    overflow-y: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.table-responsive::-webkit-scrollbar {
    width: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* ===== BADGES ===== */
.badge {
    font-size: 0.85rem;
    padding: 0.5em 0.9em;
    border-radius: 20px;
    font-weight: 500;
    display: inline-block;
    min-width: 70px;
    text-align: center;
}

.badge.bg-success {
    background: var(--success-color) !important;
}

.badge.bg-danger {
    background: var(--danger-color) !important;
}

.badge.bg-secondary {
    background: var(--secondary-color) !important;
}

/* ===== ALERTS ===== */
.alert {
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 1rem 1.5rem;
    font-weight: 500;
    animation: slideInDown 0.3s ease-out;
}

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

html[data-bs-theme="light"] .alert-success,
html[data-theme="light"] .alert-success,
body[data-theme="light"] .alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-left: 4px solid var(--success-color);
}

html[data-bs-theme="light"] .alert-danger,
html[data-theme="light"] .alert-danger,
body[data-theme="light"] .alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border-left: 4px solid var(--danger-color);
}

html[data-bs-theme="light"] .alert-warning,
html[data-theme="light"] .alert-warning,
body[data-theme="light"] .alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border-left: 4px solid var(--warning-color);
}

html[data-bs-theme="light"] .alert-info,
html[data-theme="light"] .alert-info,
body[data-theme="light"] .alert-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
    border-left: 4px solid var(--info-color);
}

.alert-link {
    font-weight: 600;
    text-decoration: underline;
}

/* ===== QR CODE ===== */
/* ===== QR (Mobile frame + waiting pulse) ===== */
#qrContainer,
.qr-display {
    text-align: center;
    padding: 2rem;
    background: var(--oe-surface);
    border: 1px solid var(--oe-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}
#qrContainer:empty::after {
    content: attr(data-waiting);
    color: var(--text-tertiary);
    font-size: 0.9rem;
    animation: qrWaitingPulse 1.5s ease-in-out infinite;
}
@keyframes qrWaitingPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
#qrContainer img,
.modal-body img,
.qr-display img {
    max-width: 220px;
    width: 100%;
    border-radius: var(--radius);
    padding: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
#qrContainer img:hover,
.modal-body img:hover {
    box-shadow: var(--shadow-md);
}
#qrModalContent {
    padding: 2rem;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#qrModalContent p {
    color: var(--text-secondary);
    animation: qrWaitingPulse 1.5s ease-in-out infinite;
    margin: 0;
}

/* ===== STATUS INDICATORS ===== */
#waStatus {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 500;
    display: inline-block;
    min-width: 120px;
    text-align: center;
}

#waStatus.bg-success {
    background: var(--success-color) !important;
}

@keyframes statusPulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.9;
        transform: scale(1.05);
    }
}

@keyframes statusGlow {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.5), 0 0 25px rgba(37, 211, 102, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.7), 0 0 35px rgba(37, 211, 102, 0.5);
    }
}

#sendStatus {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    background: rgba(37, 211, 102, 0.1);
    border-radius: 10px;
    display: inline-block;
}

/* ===== STATISTICS ===== */
#sentCount,
#failedCount,
#totalCount {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-color);
}

#sentCount {
    color: var(--success-color);
}

#failedCount {
    color: var(--danger-color);
}

#totalCount {
    color: var(--info-color);
}

/* ===== MODAL ===== */
.modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--border-color);
    overflow: hidden;
    background: var(--oe-surface);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    border-bottom: 1px solid var(--oe-border);
    border-radius: 20px 20px 0 0;
    background: var(--oe-surface-low);
    color: var(--oe-text);
    padding: 1.25rem 1.5rem;
}

.modal-title {
    font-weight: 600;
    font-size: 1.3rem;
}

.modal-body {
    padding: 2rem;
    text-align: center;
}

.btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* ===== FILE INPUT ===== */
input[type="file"] {
    padding: 0.5rem;
    border: 2px dashed #ccc;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}

input[type="file"]:hover {
    border-color: var(--primary-color);
    background: rgba(37, 211, 102, 0.05);
}

input[type="file"]::file-selector-button {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: none;
    background: var(--primary-color);
    color: white;
    font-weight: 500;
    cursor: pointer;
    margin-right: 1rem;
    transition: all 0.3s ease;
}

input[type="file"]::file-selector-button:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* ===== PREVIEW CONTAINER ===== */
#previewContainer {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--oe-surface-low);
    border-radius: 12px;
    border: 1px solid var(--oe-border);
}

#previewContainer h6 {
    font-weight: 600;
    color: var(--oe-text);
    margin-bottom: 1rem;
}

#previewTotal {
    margin-top: 1rem;
    font-weight: 500;
    color: var(--primary-color);
    font-size: 1.1rem;
}

/* ===== TIMER SETTINGS - IMPROVED ===== */
.timer-slider {
    height: 8px;
    border-radius: 5px;
    background: var(--oe-surface-high);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.timer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: var(--transition);
    border: none;
}

.timer-slider::-webkit-slider-thumb:hover {
    background: var(--primary-dark);
}

.timer-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: var(--transition);
}

.timer-slider::-moz-range-thumb:hover {
    background: var(--primary-dark);
}

.timer-value-display {
    display: flex;
    align-items: center;
}

.timer-value-display .badge {
    font-weight: 700;
    min-width: 60px;
    text-align: center;
}

.preset-btn {
    transition: all 0.3s ease;
}

.preset-btn.active {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.range-visualizer {
    margin-top: 1rem;
}

.range-bar {
    height: 30px;
    background: var(--oe-surface-high);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

.range-min {
    position: absolute;
    left: 0;
    height: 100%;
    background: var(--gradient-success);
    border-radius: 15px 0 0 15px;
    transition: width 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(37, 211, 102, 0.3);
}

.range-max {
    position: absolute;
    height: 100%;
    background: var(--primary-color);
    border-radius: 0 15px 15px 0;
    transition: width 0.3s ease, left 0.3s ease;
}

#minDelayInput,
#maxDelayInput,
#retryDelayInput {
    font-weight: 600;
    text-align: center;
    font-size: 1.1rem;
}

#recipientCount {
    font-weight: 600;
    text-align: center;
}

#minDelay,
#maxDelay,
#retryDelay {
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
}

/* ===== LOADING STATES ===== */
.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 3px solid var(--primary-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== BUTTONS DISABLED / BUSY ===== */
.btn:disabled,
.btn[aria-busy="true"] {
    cursor: not-allowed;
    opacity: 0.8;
}

/* ===== EXTRACT STATS ROW – 2×2 on mobile ===== */
@media (max-width: 576px) {
    .extract-stats-row .extract-stat-col,
    .extract-stats-row .col-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ===== STATUS DOT (connected indicator) ===== */
.status-dot--online {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    margin-inline-end: 6px;
    vertical-align: middle;
    animation: statusBlink 1.5s ease-in-out infinite;
}
@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
        border-radius: 15px;
    }
    
    .card-header {
        border-radius: 15px 15px 0 0 !important;
        padding: 1rem;
        font-size: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        margin: 0.25rem 0;
    }
    
    .table-responsive {
        max-height: 300px;
    }
    
    .table thead th,
    .table tbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
    
    #qrContainer img,
    .modal-body img {
        max-width: 200px;
    }
    
    .navbar-brand {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    body {
        padding: 0.5rem;
    }
    
    .container-fluid {
        padding: 0.5rem;
    }
    
    .card {
        border-radius: 12px;
    }
    
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* ===== UTILITY CLASSES ===== */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-sm-hover {
    transition: box-shadow 0.3s ease;
}

.shadow-sm-hover:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* ===== ANIMATIONS DELAY ===== */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }
.card:nth-child(7) { animation-delay: 0.7s; }

/* ===== SMOOTH SCROLLING ===== */
html {
    scroll-behavior: smooth;
}

/* ===== FOCUS VISIBLE ===== */
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== TABS STYLING ===== */
.custom-tabs {
    border-bottom: 3px solid var(--oe-border);
    background: transparent;
    border-radius: 15px 15px 0 0;
    padding: 0.5rem 1rem 0 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.custom-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 10px 10px 0 0;
    color: #666;
    font-weight: 500;
    padding: 1rem 1.5rem;
    margin: 0 0.25rem;
    transition: all 0.3s ease;
    position: relative;
    background: transparent;
}

.custom-tabs .nav-link:hover {
    color: var(--primary-color);
    background: rgba(0, 113, 227, 0.06);
    border-bottom-color: rgba(0, 113, 227, 0.2);
}

.custom-tabs .nav-link.active {
    color: var(--primary-color);
    background: rgba(0, 113, 227, 0.06);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
    position: relative;
}

.custom-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-color);
}

.custom-tabs .nav-link i {
    margin-inline-start: 0.5rem;
    font-size: 1.1rem;
}

.tab-content {
    background: transparent;
    border-radius: 0 0 15px 15px;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.tab-pane {
    padding: 2rem;
    animation: fadeIn 0.3s ease-in;
}

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

/* ===== STATUS CARDS ===== */
.status-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Primary Status Card */
.status-card.bg-primary {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.95) 0%, rgba(0, 86, 179, 0.95) 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3), 0 0 20px rgba(13, 110, 253, 0.2);
}

/* Success Status Card */
.status-card.bg-success {
    background: var(--gradient-success) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3), 0 0 20px rgba(37, 211, 102, 0.2);
}

/* Danger Status Card */
.status-card.bg-danger {
    background: var(--gradient-danger) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3), 0 0 20px rgba(220, 53, 69, 0.2);
}

/* Info Status Card */
.status-card.bg-info {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.95) 0%, rgba(11, 172, 194, 0.95) 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(13, 202, 240, 0.3), 0 0 20px rgba(13, 202, 240, 0.2);
}

.status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.status-card:hover::before {
    transform: scaleX(1);
}

.status-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 255, 255, 0.3);
}

.status-card .card-body {
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

.status-card i {
    opacity: 0.95;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    color: white !important;
}

.status-card h6 {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-weight: 600;
}

.status-card h4 {
    color: white !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-weight: 700;
}

.status-card .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ===== CHECKLIST ===== */
.checklist-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--oe-surface-low);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.checklist-item:hover {
    background: var(--oe-surface-high);
    transform: translateX(-5px);
}

.checklist-item i {
    margin-left: 0.75rem;
    font-size: 1.2rem;
}

.checklist-item span {
    font-weight: 500;
}

/* ===== STAT BOX ===== */
.stat-box {
    padding: 1rem;
    border-radius: 10px;
    background: var(--oe-surface-low);
    transition: var(--transition);
    border: 1px solid var(--oe-border);
    position: relative;
    overflow: hidden;
}

.stat-box:hover {
    background: var(--oe-surface-high);
    box-shadow: var(--card-shadow-hover);
}

/* ===== QR DISPLAY ===== */
.qr-display img {
    max-width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* ===== PROGRESS BAR ===== */
.progress {
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color) !important;
}

/* ===== LIST GROUP ===== */
.list-group-item {
    border: 1px solid #e0e0e0;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.list-group-item:hover {
    background: #f8f9fa;
    border-color: var(--primary-color);
    transform: translateX(-5px);
}

/* ===== RESPONSIVE TABS ===== */
@media (max-width: 768px) {
    .custom-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .custom-tabs .nav-link {
        white-space: nowrap;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    .custom-tabs .nav-link i {
        display: block;
        margin: 0.25rem 0;
        text-align: center;
    }
    
    .status-card {
        margin-bottom: 1rem;
    }
    
    .tab-pane {
        padding: 1rem;
    }
}

/* ===== ADDITIONAL PREMIUM EFFECTS ===== */

/* Shimmer Effect for Cards */
.card::after {
    content: none;
}

/* Number Counter Animation */
@keyframes numberCount {
    from {
        transform: scale(1.2);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

#sentCount,
#failedCount,
#totalCount,
#sentCountQuick,
#failedCountQuick,
#totalCountQuick {
    animation: numberCount 0.5s ease-out;
}

/* Enhanced Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Loading Spinner Enhancement */
.loading::after {
    border: 3px solid var(--primary-color);
    border-top-color: transparent;
}

/* Input Focus */
input:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

/* Table Row Animation */
.table tbody tr {
    animation: rowFadeIn 0.3s ease-out;
}

@keyframes rowFadeIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Checklist Item Animation */
.checklist-item {
    animation: checklistSlide 0.3s ease-out;
}

@keyframes checklistSlide {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Status Card Icon Animation */
.status-card i {
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Alert Enhancement */
.alert {
    position: relative;
    overflow: hidden;
}

.alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: currentColor;
    animation: alertPulse 2s ease-in-out infinite;
}

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

/* Text Selection */
::selection {
    background: rgba(0, 122, 255, 0.2);
    color: inherit;
}

::-moz-selection {
    background: rgba(0, 122, 255, 0.2);
    color: inherit;
}

/* Smooth Transitions for All Interactive Elements */
a, button, input, select, textarea {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced Focus States */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== LOGS TERMINAL STYLE ===== */
.logs-terminal .table-responsive {
    background: #1d1d1f;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.08);
}
.logs-terminal .table {
    color: #e8e8e8;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
}
.logs-terminal .table thead {
    background: rgba(255,255,255,0.06);
    color: #aaa;
    border-radius: var(--radius) var(--radius) 0 0;
}
.logs-terminal .table thead th {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 0.75rem 1rem;
}
.logs-terminal .table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.logs-terminal .table tbody tr:hover {
    background: rgba(255,255,255,0.04);
}
.logs-terminal .table tbody td {
    padding: 0.6rem 1rem;
}
.logs-terminal .table tbody td:nth-child(3) {
    text-align: right;
}
.logs-terminal .table tbody td:nth-child(3)::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-inline-end: 8px;
    vertical-align: middle;
    background: var(--secondary-color);
}
.logs-terminal .table tbody tr.table-success td:nth-child(3)::before {
    background: var(--success);
}
.logs-terminal .table tbody tr.table-danger td:nth-child(3)::before {
    background: var(--danger);
}

/* ===== WARMUP PROGRESS BAR ===== */
#warmupProgress .progress,
.warmup-progress .progress {
    height: 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    overflow: visible;
}
#warmupProgress .progress-bar,
.warmup-progress .progress-bar {
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#warmupProgress .progress-bar span,
.warmup-progress .progress-bar span {
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ===== EMPTY STATE ===== */
/* ===== AUTH PAGES (Login / Register) ===== */
body.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 0;
    background: linear-gradient(160deg, var(--c-bg) 0%, var(--c-gray-100) 100%);
}
body.auth-page .card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    max-width: 420px;
    margin: 0 auto;
}
body.auth-page .card:hover {
    transform: none;
}
body.auth-page .card-body {
    padding: 2rem 2.5rem;
}
body.auth-page .page-title,
body.auth-page h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
body.auth-page .form-label {
    font-weight: 500;
    color: var(--text-secondary);
}
body.auth-page .btn {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}
body.auth-page a {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}
body.auth-page a:hover {
    text-decoration: underline;
}

body[data-theme="dark"].auth-page {
    background: linear-gradient(160deg, var(--c-bg) 0%, var(--c-gray-800) 100%);
}

.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}
.empty-state i {
    font-size: 3rem;
    opacity: 0.6;
    display: block;
    margin-bottom: 1rem;
}
.empty-state p {
    margin: 0 0 1rem;
    font-size: 1rem;
}
.empty-state .btn {
    margin-top: 0.5rem;
}

/* ===== PAGE LOADING BAR (Apple style) ===== */
#pageLoadingBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--oe-primary), var(--c-primary));
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left;
    z-index: 9999;
    transition: transform 0.2s ease;
}

[dir='rtl'] #pageLoadingBar {
    transform-origin: right;
}

body.page-loading #pageLoadingBar {
    transform: scaleX(1);
    animation: loadingBarShimmer 1.5s linear infinite;
}

body[data-theme="dark"] #pageLoadingBar {
    background: linear-gradient(90deg, var(--c-primary), #a78bfa, var(--c-primary));
    background-size: 200% 100%;
}

@keyframes loadingBarShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===== SKELETON LOADING (utility for future use) ===== */
.skeleton {
    background: linear-gradient(90deg, var(--light-bg) 0%, rgba(255,255,255,0.06) 50%, var(--light-bg) 100%);
    background-size: 200% 100%;
    animation: skeletonShine 1.2s ease-in-out infinite;
    border-radius: 6px;
}
body[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--light-bg) 0%, rgba(255,255,255,0.04) 50%, var(--light-bg) 100%);
    background-size: 200% 100%;
}
@keyframes skeletonShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== GROUPS MODULE — multi-select extract (RTL + dark) ===== */
.groups-multi-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1rem;
    background: var(--bg-card);
    box-shadow: var(--card-shadow);
}
.groups-multi-toolbar .form-control {
    background: var(--bg-card);
    color: var(--text-primary);
}
.groups-multi-toolbar .input-group-text {
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.groups-list-scroll {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: calc(var(--radius) - 4px);
    background: var(--light-bg);
}
.groups-list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-primary);
}
.groups-list-row:last-child {
    border-bottom: none;
}
.groups-list-row:hover {
    background: rgba(0, 122, 255, 0.06);
}
.groups-list-row.is-selected {
    background: rgba(0, 122, 255, 0.12);
    box-shadow: inset 3px 0 0 var(--primary);
}
.groups-list-row .groups-cb-wrap {
    flex-shrink: 0;
}
.groups-list-row .groups-row-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}
.groups-list-row .groups-part-badge {
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 0.2em 0.55em;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.groups-cb-custom {
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid var(--border-nav);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    transition: var(--transition);
}
.groups-list-row.is-selected .groups-cb-custom {
    background: var(--primary);
    border-color: var(--primary-dark, var(--primary));
    color: #fff;
}
.groups-list-row.is-selected .groups-cb-custom::after {
    content: "";
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}
.groups-skeleton-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
}
.groups-skeleton-row .skeleton {
    height: 14px;
    flex: 1;
}
.groups-skeleton-row .skeleton.short {
    flex: 0 0 48px;
    height: 22px;
    border-radius: 999px;
}
.groups-selected-chips .groups-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.85rem;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    max-width: 100%;
}
.groups-selected-chips .groups-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.groups-selected-chips .groups-chip button {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.groups-selected-chips .groups-chip button:hover {
    color: var(--danger);
}
.groups-extract-progress {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--card-shadow);
}
.groups-extract-steps li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.groups-extract-steps li:last-child {
    border-bottom: none;
}
.groups-extract-step-ok {
    color: var(--success);
}
.groups-extract-step-err {
    color: var(--danger);
}
.groups-extract-results-card {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}
.groups-extract-breakdown {
    background: var(--bg-card);
    color: var(--text-primary);
}
.groups-extract-breakdown thead th {
    background: var(--light-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.groups-extract-breakdown td {
    border-color: var(--border-color);
}

body[data-theme="dark"] .groups-multi-panel {
    background: var(--bg-card);
    border-color: var(--border-color);
}
body[data-theme="dark"] .groups-list-scroll {
    background: var(--light-bg);
    border-color: var(--border-color);
}
body[data-theme="dark"] .groups-list-row:hover {
    background: rgba(0, 122, 255, 0.15);
}
body[data-theme="dark"] .groups-list-row.is-selected {
    background: rgba(0, 122, 255, 0.22);
}
body[data-theme="dark"] .groups-cb-custom {
    background: var(--light-bg);
    border-color: var(--border-nav);
}
body[data-theme="dark"] .groups-selected-chips .groups-chip {
    background: var(--light-bg);
    border-color: var(--border-color);
}
body[data-theme="dark"] .groups-extract-results-card {
    background: var(--light-bg);
    border-color: var(--border-color);
}
body[data-theme="dark"] .groups-extract-breakdown {
    background: var(--bg-card);
}
body[data-theme="dark"] .groups-extract-breakdown thead th {
    background: var(--light-bg);
}

/* ===== RTL OPTIMIZATION ===== */
[dir="rtl"] .navbar .nav-link i,
[dir="rtl"] .btn i:first-child {
    margin-inline-end: 0.5rem;
    margin-inline-start: 0;
}
[dir="rtl"] .navbar .nav-link i {
    margin-inline-end: 0.5rem;
}
[dir="rtl"] .me-1 { margin-inline-end: 0.25rem !important; margin-inline-start: 0 !important; }
[dir="rtl"] .me-2 { margin-inline-end: 0.5rem !important; margin-inline-start: 0 !important; }
[dir="rtl"] .me-3 { margin-inline-end: 1rem !important; margin-inline-start: 0 !important; }
[dir="rtl"] .ms-1 { margin-inline-start: 0.25rem !important; margin-inline-end: 0 !important; }
[dir="rtl"] .ms-2 { margin-inline-start: 0.5rem !important; margin-inline-end: 0 !important; }
[dir="rtl"] .ms-auto { margin-inline-start: 0 !important; margin-inline-end: auto !important; }



/* ==================================================================
   SECTION: layout & bootstrap overrides (ex style-redesign.css)
   ================================================================== */

/* ===== MIDNIGHT SLATE — WA-GENIUS REDESIGN ===== */

/* === FONTS === */

/* === DESIGN TOKENS === */
:root {
  --ms-bg-base: var(--oe-bg);
  --ms-bg-card: var(--oe-surface);
  --ms-bg-hover: var(--oe-surface-high);
  --ms-border: var(--oe-border);
  --ms-accent: var(--oe-primary-cta);
  --ms-accent-light: var(--oe-primary);
  --ms-text-primary: var(--oe-text);
  --ms-text-secondary: var(--oe-text);
  --ms-text-muted: var(--oe-text-muted);
  --ms-success: var(--oe-success);
  --ms-warning: var(--oe-warning);
  --ms-danger: var(--oe-error);

  /* Font stacks */
  --font-sans: 'IBM Plex Sans Hebrew', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;

  /* Radii (keep existing names so pro-css still works) */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.6);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.7);

  /* Transition shorthand */
  --transition: 150ms ease;
  --transition-slow: 300ms ease;
}

/* === BOOTSTRAP ROOT OVERRIDES === */
:root,
[data-bs-theme="dark"] {
  --bs-body-bg:                   var(--oe-bg) !important;
  --bs-body-color:                var(--oe-text) !important;
  --bs-secondary-bg:              var(--oe-surface-high) !important;
  --bs-tertiary-bg:               var(--oe-surface) !important;
  --bs-border-color:              var(--oe-border) !important;
  --bs-border-color-translucent:  rgba(255,255,255,0.06) !important;
  --bs-card-bg:                   var(--oe-surface) !important;
  --bs-card-border-color:         var(--oe-border) !important;
  --bs-card-cap-bg:               var(--oe-surface-high) !important;
  --bs-list-group-bg:             var(--oe-surface) !important;
  --bs-list-group-border-color:   var(--oe-border) !important;
  --bs-modal-bg:                  var(--oe-surface) !important;
  --bs-dropdown-bg:               var(--oe-surface-high) !important;
  --bs-popover-bg:                var(--oe-surface-high) !important;
  --bs-tooltip-bg:                var(--oe-surface-high) !important;
  --bs-link-color:                var(--oe-primary) !important;
  --bs-link-hover-color:          var(--oe-primary-cta) !important;
}

/* === GLOBAL BASE === */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ms-bg-base) !important;
  background-color: var(--ms-bg-base) !important;
}

html, body {
  font-family: var(--font-sans) !important;
  background: var(--ms-bg-base) !important;
  color: var(--ms-text-secondary) !important;
  direction: rtl;
  min-height: 100vh;
  font-size: 14px !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--ms-bg-base) !important;
  background-color: var(--ms-bg-base) !important;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  color: var(--ms-text-primary) !important;
  font-weight: 500;
}

small, .text-muted { color: var(--ms-text-muted) !important; }
.text-success  { color: var(--ms-success)  !important; }
.text-warning  { color: var(--ms-warning)  !important; }
.text-danger   { color: var(--ms-danger)   !important; }
.text-primary  { color: var(--ms-accent-light) !important; }
.text-secondary { color: var(--ms-text-secondary) !important; }
.text-dark, .text-body { color: var(--ms-text-primary) !important; }
.text-light, .text-white { color: var(--ms-text-primary) !important; }
.text-info     { color: var(--ms-accent-light) !important; }

/* Links */
a { color: var(--ms-accent-light) !important; transition: color var(--transition); }
a:hover { color: var(--ms-accent) !important; }
.text-decoration-none { text-decoration: none !important; }

/* Placeholder */
::placeholder { color: var(--ms-text-muted) !important; }
::-webkit-input-placeholder { color: var(--ms-text-muted) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ms-bg-base); }
::-webkit-scrollbar-thumb { background: var(--ms-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ms-accent); }

/* HR */
hr, .divider {
  border-color: var(--ms-border) !important;
  opacity: 1 !important;
  transition: border-color var(--transition);
}

/* === PAGE WRAPPERS — keep transparent === */
#app, #root, #main,
.page-wrapper, .app-wrapper,
.container-fluid, .container,
.tab-pane, .tab-content,
.page-content, #pageContent,
main, .main-content,
[class*="wrapper"],
[class*="layout"],
[class*="content-wrapper"],
[class*="page-wrapper"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* === CARDS === */
body .card,
body .pro-card {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  color: var(--ms-text-secondary) !important;
  transition: border-color var(--transition);
}
body .card-header,
body .pro-card-header {
  background: var(--ms-bg-hover) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  color: var(--ms-text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 14px 18px !important;
  transition: background-color var(--transition), border-color var(--transition);
}
body .card-body,
body .pro-card-body { padding: 18px !important; }
body .card-footer {
  background: var(--ms-bg-hover) !important;
  border-top: 1px solid var(--ms-border) !important;
  transition: background-color var(--transition), border-color var(--transition);
}

/* Remove card hover transform */
body .pro-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--ms-accent) !important;
}

/* === BUTTONS === */
.btn {
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition) !important;
  border: 1px solid transparent !important;
}
.btn-primary, .btn-success {
  background: var(--ms-accent) !important;
  color: #fff !important;
  border-color: var(--ms-accent) !important;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus {
  background: var(--ms-accent-light) !important;
  border-color: var(--ms-accent-light) !important;
  color: #fff !important;
}
.btn-secondary, .btn-outline-secondary {
  background: transparent !important;
  color: var(--ms-text-secondary) !important;
  border-color: var(--ms-border) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  background: var(--ms-bg-hover) !important;
  color: var(--ms-text-primary) !important;
  border-color: var(--ms-border) !important;
}
.btn-danger, .btn-outline-danger {
  background: transparent !important;
  color: var(--ms-danger) !important;
  border-color: rgba(224,85,85,0.3) !important;
}
.btn-danger:hover, .btn-outline-danger:hover {
  background: rgba(224,85,85,0.1) !important;
  color: var(--ms-danger) !important;
}
.btn-outline-success {
  background: transparent !important;
  color: var(--ms-success) !important;
  border-color: rgba(76,175,80,0.4) !important;
}
.btn-outline-success:hover {
  background: rgba(76,175,80,0.1) !important;
  color: var(--ms-success) !important;
}
.btn-info, .btn-outline-info {
  background: transparent !important;
  color: var(--ms-accent-light) !important;
  border-color: rgba(107,146,201,0.3) !important;
}
.btn-info:hover, .btn-outline-info:hover {
  background: rgba(107,146,201,0.1) !important;
}
.btn-warning, .btn-outline-warning {
  background: transparent !important;
  color: var(--ms-warning) !important;
  border-color: rgba(232,168,62,0.3) !important;
}
.btn-warning:hover, .btn-outline-warning:hover {
  background: rgba(232,168,62,0.1) !important;
}
.btn-light, .btn-outline-light {
  background: var(--ms-bg-hover) !important;
  color: var(--ms-text-secondary) !important;
  border-color: var(--ms-border) !important;
}
.btn-dark, .btn-outline-dark {
  background: var(--ms-bg-hover) !important;
  color: var(--ms-text-primary) !important;
  border-color: var(--ms-border) !important;
}
.btn-close { filter: invert(1) opacity(0.5) !important; }

/* Ghost buttons (navbar) */
.btn-pro-ghost,
.btn.btn-pro-ghost,
#themeToggle,
#logoutBtn,
button.btn-pro.btn-pro-ghost,
.btn.btn-pro.btn-pro-ghost {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--ms-text-muted) !important;
  transition: background-color var(--transition), color var(--transition) !important;
}
.btn-pro-ghost:hover,
#themeToggle:hover,
#logoutBtn:hover,
button.btn-pro.btn-pro-ghost:hover,
.btn.btn-pro.btn-pro-ghost:hover {
  background: var(--ms-bg-hover) !important;
  background-color: var(--ms-bg-hover) !important;
  color: var(--ms-text-primary) !important;
}

/* === FORMS === */
.form-control, .form-select, .pro-input {
  background: var(--ms-bg-hover) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--ms-text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  transition: border-color var(--transition) !important;
}
.form-control:focus, .form-select:focus, .pro-input:focus {
  background: var(--ms-bg-hover) !important;
  border-color: var(--ms-accent) !important;
  color: var(--ms-text-primary) !important;
  box-shadow: 0 0 0 3px rgba(74,111,165,0.25) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--ms-text-muted) !important; }
.form-control:disabled, .form-select:disabled {
  background: var(--ms-bg-card) !important;
  color: var(--ms-text-muted) !important;
  opacity: 0.6 !important;
}
textarea.form-control { min-height: 100px; }
input[type="color"] {
  background: var(--ms-bg-hover) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px !important;
}
input[type="range"] { accent-color: var(--ms-accent) !important; }

.form-label, .pro-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ms-text-secondary) !important;
  margin-bottom: 6px !important;
}
.form-text { color: var(--ms-text-muted) !important; font-size: 12px !important; }

.input-group-text {
  background: var(--ms-bg-hover) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text-muted) !important;
  font-size: 13px !important;
}

/* Checkbox / Radio / Switch */
.form-check-input {
  background-color: var(--ms-bg-hover) !important;
  border-color: var(--ms-border) !important;
  transition: background-color var(--transition), border-color var(--transition);
}
.form-check-input:checked {
  background-color: var(--ms-accent) !important;
  border-color: var(--ms-accent) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(74,111,165,0.25) !important; }
.form-check-label { color: var(--ms-text-secondary) !important; font-size: 13px !important; }
.form-switch .form-check-input { background-color: var(--ms-bg-hover) !important; }
.form-switch .form-check-input:checked { background-color: var(--ms-accent) !important; }

/* === TABLES === */
.table {
  color: var(--ms-text-secondary) !important;
  font-size: 13px !important;
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  --bs-table-hover-bg: var(--ms-bg-hover) !important;
  --bs-table-border-color: var(--ms-border) !important;
}
.table th {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ms-text-muted) !important;
  border-color: var(--ms-border) !important;
  padding: 10px 12px !important;
  background: var(--ms-bg-hover) !important;
}
.table td {
  border-color: var(--ms-border) !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
  color: var(--ms-text-secondary) !important;
  background: transparent !important;
  transition: background-color var(--transition);
}
.table tr:hover td { background: var(--ms-bg-hover) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent !important; }
.table > :not(caption) > * > * { background-color: transparent !important; }

/* === ALERTS === */
.alert {
  border-radius: var(--radius-md) !important;
  border: 1px solid !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
}
.alert-success {
  background: rgba(76,175,80,0.08) !important;
  border-color: rgba(76,175,80,0.2) !important;
  color: var(--ms-success) !important;
}
.alert-danger {
  background: rgba(224,85,85,0.08) !important;
  border-color: rgba(224,85,85,0.2) !important;
  color: var(--ms-danger) !important;
}
.alert-warning {
  background: rgba(232,168,62,0.08) !important;
  border-color: rgba(232,168,62,0.2) !important;
  color: var(--ms-warning) !important;
}
.alert-info, .alert-primary {
  background: rgba(74,111,165,0.08) !important;
  border-color: rgba(74,111,165,0.2) !important;
  color: var(--ms-accent-light) !important;
}

/* === BADGES === */
.badge {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.bg-success, .text-bg-success { background: rgba(76,175,80,0.15)  !important; color: var(--ms-success) !important; }
.bg-danger,  .text-bg-danger  { background: rgba(224,85,85,0.15)  !important; color: var(--ms-danger)  !important; }
.bg-warning, .text-bg-warning { background: rgba(232,168,62,0.15) !important; color: var(--ms-warning) !important; }
.bg-info,    .text-bg-info    { background: rgba(107,146,201,0.15)!important; color: var(--ms-accent-light) !important; }
.bg-primary, .text-bg-primary { background: rgba(74,111,165,0.15) !important; color: var(--ms-accent) !important; }
.bg-secondary,.text-bg-secondary { background: var(--ms-bg-hover) !important; color: var(--ms-text-secondary) !important; }
.bg-dark,    .text-bg-dark    { background: var(--ms-bg-hover) !important; color: var(--ms-text-primary) !important; }
.bg-light,   .text-bg-light   { background: var(--ms-bg-hover) !important; color: var(--ms-text-secondary) !important; }

/* Background utilities */
.bg-white, .bg-body          { background: var(--ms-bg-card) !important; }
.bg-body-tertiary, .bg-light { background: var(--ms-bg-hover) !important; }
.bg-body-secondary           { background: var(--ms-bg-card) !important; }
[class*="bg-gradient"]       { background: var(--ms-bg-card) !important; }

/* === MODALS === */
.modal-content {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--radius-xl) !important;
  color: var(--ms-text-primary) !important;
}
.modal-header {
  border-bottom: 1px solid var(--ms-border) !important;
  padding: 16px 20px !important;
}
.modal-title { font-size: 15px !important; font-weight: 600 !important; }
.modal-footer { border-top: 1px solid var(--ms-border) !important; }
.modal-backdrop { background: rgba(0,0,0,0.7) !important; }

/* === DROPDOWNS === */
.dropdown-menu {
  background: var(--ms-bg-hover) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: 13px !important;
  padding: 4px !important;
  color: var(--ms-text-primary) !important;
}
.dropdown-item {
  color: var(--ms-text-secondary) !important;
  border-radius: 6px !important;
  padding: 7px 12px !important;
  transition: background-color var(--transition), color var(--transition);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--ms-border) !important;
  color: var(--ms-text-primary) !important;
}
.dropdown-divider { border-color: var(--ms-border) !important; }
.dropdown-header  { color: var(--ms-text-muted) !important; font-size: 11px !important; }

/* === TABS === */
.nav-tabs {
  border-bottom: 1px solid var(--ms-border) !important;
  gap: 2px !important;
}
.nav-tabs .nav-link {
  color: var(--ms-text-muted) !important;
  border: none !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  background: transparent !important;
  transition: background-color var(--transition), color var(--transition);
}
.nav-tabs .nav-link:hover {
  color: var(--ms-text-secondary) !important;
  background: var(--ms-bg-hover) !important;
  border-color: transparent !important;
}
.nav-tabs .nav-link.active {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--ms-accent) !important;
  color: var(--ms-text-primary) !important;
  font-weight: 500 !important;
}
.tab-content { color: var(--ms-text-primary) !important; }

/* Nav pills */
.nav-pills .nav-link {
  color: var(--ms-text-muted) !important;
  border-radius: var(--radius-md) !important;
  font-size: 13px !important;
  padding: 7px 14px !important;
  transition: background-color var(--transition), color var(--transition);
}
.nav-pills .nav-link:hover { background: var(--ms-bg-hover) !important; color: var(--ms-text-secondary) !important; }
.nav-pills .nav-link.active {
  background: rgba(74,111,165,0.15) !important;
  color: var(--ms-accent-light) !important;
}

/* General nav links */
.nav-link {
  color: var(--ms-text-secondary) !important;
  transition: background-color var(--transition), color var(--transition);
}
.nav-link:hover { color: var(--ms-accent) !important; }
.nav-link.active { color: var(--ms-accent) !important; }

/* === LIST GROUPS === */
.list-group-item {
  background: var(--ms-bg-card) !important;
  border-color: var(--ms-border) !important;
  color: var(--ms-text-secondary) !important;
  font-size: 13px !important;
  transition: background-color var(--transition), color var(--transition);
}
.list-group-item:hover { background: var(--ms-bg-hover) !important; color: var(--ms-text-primary) !important; }
.list-group-item.active {
  background: rgba(74,111,165,0.15) !important;
  border-color: rgba(74,111,165,0.2) !important;
  color: var(--ms-accent-light) !important;
}

/* === ACCORDION === */
.accordion-item {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 4px !important;
}
.accordion-button {
  background: var(--ms-bg-card) !important;
  color: var(--ms-text-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-md) !important;
  transition: background-color var(--transition), color var(--transition);
}
.accordion-button:not(.collapsed) {
  background: var(--ms-bg-hover) !important;
  color: var(--ms-accent-light) !important;
  box-shadow: none !important;
}
.accordion-button::after { filter: invert(1) opacity(0.5) !important; }
.accordion-body {
  background: var(--ms-bg-card) !important;
  color: var(--ms-text-secondary) !important;
  font-size: 13px !important;
}

/* === BREADCRUMBS === */
.breadcrumb-item + .breadcrumb-item::before { color: var(--ms-text-muted) !important; }
.breadcrumb-item { color: var(--ms-text-muted) !important; font-size: 12px !important; }
.breadcrumb-item.active { color: var(--ms-text-primary) !important; }
.breadcrumb-item a { color: var(--ms-text-secondary) !important; text-decoration: none !important; transition: color var(--transition); }
.breadcrumb-item a:hover { color: var(--ms-text-primary) !important; }

/* === PAGINATION === */
.page-link {
  background: var(--ms-bg-card) !important;
  border-color: var(--ms-border) !important;
  color: var(--ms-text-secondary) !important;
  font-size: 13px !important;
  transition: background-color var(--transition), color var(--transition);
}
.page-link:hover {
  background: var(--ms-bg-hover) !important;
  color: var(--ms-text-primary) !important;
}
.page-item.active .page-link {
  background: var(--ms-accent) !important;
  border-color: var(--ms-accent) !important;
  color: #fff !important;
}
.page-item.disabled .page-link {
  background: transparent !important;
  color: var(--ms-text-muted) !important;
}

/* === PROGRESS === */
.progress {
  background: var(--ms-bg-hover) !important;
  border-radius: 2px !important;
  height: 4px !important;
}
.progress-bar { background: var(--ms-accent) !important; border-radius: 2px !important; }

/* === SPINNERS === */
.spinner-border {
  border-color: var(--ms-border) !important;
  border-right-color: var(--ms-accent) !important;
}

/* === TOOLTIPS === */
.tooltip .tooltip-inner {
  background: var(--ms-bg-hover) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text-primary) !important;
  font-size: 12px !important;
}

/* === POPOVERS === */
.popover {
  background: var(--ms-bg-hover) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text-primary) !important;
}
.popover-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ms-border) !important;
  color: var(--ms-text-primary) !important;
}
.popover-body { color: var(--ms-text-secondary) !important; font-size: 13px !important; }

/* === OFFCANVAS === */
.offcanvas {
  background: var(--ms-bg-card) !important;
  border-color: var(--ms-border) !important;
  color: var(--ms-text-primary) !important;
}
.offcanvas-header { border-bottom: 1px solid var(--ms-border) !important; }

/* === TOAST === */
.toast {
  background: var(--ms-bg-hover) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text-primary) !important;
}
.toast-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ms-border) !important;
  color: var(--ms-text-secondary) !important;
}

/* === BORDER UTILITIES === */
.border        { border-color: var(--ms-border) !important; }
.border-top    { border-top-color: var(--ms-border) !important; }
.border-bottom { border-bottom-color: var(--ms-border) !important; }

/* === SHADOW UTILITIES === */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* === CODE === */
code, pre {
  font-family: var(--font-mono) !important;
  background: var(--ms-bg-hover) !important;
  color: var(--ms-accent-light) !important;
  border-radius: var(--radius-sm) !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
}
pre {
  padding: 12px !important;
  border: 1px solid var(--ms-border) !important;
}

/* ============================================================
   APP-SPECIFIC CLASSES
   ============================================================ */

/* === NAVBAR === */
.navbar,
.pro-app-navbar,
#mainNavbar {
  background: var(--ms-bg-card) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  padding: 0 24px !important;
  min-height: 52px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: none !important;
  transition: border-color var(--transition);
}
.navbar-brand, .pro-brand-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ms-text-primary) !important;
  letter-spacing: -0.01em !important;
}
.pro-brand-icon-lg {
  width: 28px !important;
  height: 28px !important;
  background: rgba(74,111,165,0.12) !important;
  color: var(--ms-accent-light) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
.navbar .nav-link,
.navbar .pro-navbar-link {
  color: var(--ms-text-muted) !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
  border-radius: var(--radius-sm) !important;
  transition: background-color var(--transition), color var(--transition) !important;
}
.navbar .nav-link:hover,
.navbar .pro-navbar-link:hover {
  color: var(--ms-text-primary) !important;
  background: var(--ms-bg-hover) !important;
}
.pro-nav-link-active.pro-navbar-link,
.navbar .nav-link.active,
.navbar .pro-navbar-link.active {
  color: var(--ms-text-primary) !important;
  background: var(--ms-bg-hover) !important;
}
.navbar-toggler {
  border-color: var(--ms-border) !important;
  color: var(--ms-text-muted) !important;
  padding: 4px 8px !important;
}
.navbar-toggler:focus { box-shadow: none !important; }
.navbar-toggler-icon { filter: invert(1) opacity(0.5) !important; }
.navbar-collapse,
#mainNavCollapse {
  background: var(--ms-bg-card) !important;
  background-color: var(--ms-bg-card) !important;
}
.pro-user-avatar-sm {
  background: var(--ms-bg-hover) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text-secondary) !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.pro-navbar-user-email { color: var(--ms-text-muted) !important; font-size: 12px !important; }
#navbarUserStrip { border-color: var(--ms-border) !important; }
.pro-user-pill {
  background: transparent !important;
  border: none !important;
  padding: 4px 8px !important;
}

/* Admin nav mount */
#adminNavMount,
#adminNavMount * {
  background: transparent !important;
  border-color: var(--ms-border) !important;
  color: var(--ms-text-muted) !important;
  transition: background-color var(--transition), color var(--transition);
}
#adminNavMount a,
#adminNavMount button {
  background: transparent !important;
  color: var(--ms-text-muted) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
}
#adminNavMount a:hover,
#adminNavMount button:hover {
  color: var(--ms-text-primary) !important;
  background: var(--ms-bg-hover) !important;
}

/* WA status dot */
.wa-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
}
.wa-status-dot.connected    { background: var(--ms-success); box-shadow: 0 0 6px var(--ms-success); }
.wa-status-dot.disconnected { background: var(--ms-danger); }
.wa-status-dot.connecting   { background: var(--ms-warning); animation: ms-pulse 1.5s infinite; }

@keyframes ms-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* === PAGE LAYOUT === */
.page-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
}
.page-loading-bar {
  background: var(--ms-accent) !important;
  height: 2px !important;
}

/* Pro page header */
.pro-page-header, .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.pro-page-header > div { justify-content: flex-start !important; width: 100%; }
.pro-page-header > div > div { margin-inline-start: 0 !important; text-align: right; }

.pro-page-title, .page-title, h1.page-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ms-text-primary) !important;
  margin-bottom: 0 !important;
}
.pro-page-subtitle, .page-subtitle {
  font-size: 13px !important;
  color: var(--ms-text-muted) !important;
  margin-top: 4px !important;
}

/* System status widget */
#systemStatusWidget {
  color: var(--ms-text-muted) !important;
  border-bottom-color: var(--ms-border) !important;
  font-size: 12px !important;
}

/* === SIDEBAR === */
.sidebar, .pro-sidebar {
  width: 220px;
  background: var(--ms-bg-card) !important;
  border-right: 1px solid var(--ms-border) !important;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-item, .pro-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--ms-text-muted) !important;
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
  text-decoration: none !important;
}
.sidebar-item:hover, .pro-sidebar-item:hover {
  background: var(--ms-bg-hover) !important;
  color: var(--ms-text-secondary) !important;
}
.sidebar-item.active, .pro-sidebar-item.active {
  background: var(--ms-bg-hover) !important;
  color: var(--ms-text-primary) !important;
  font-weight: 500 !important;
  border-inline-start: 3px solid var(--ms-accent) !important;
}
.sidebar-section, .pro-sidebar-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ms-text-muted) !important;
  padding: 12px 10px 4px;
}

/* === STAT / METRIC CARDS === */
.stat-card, .pro-stat-card, [class*="stat-card"] {
  background: var(--ms-bg-hover) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  transition: border-color var(--transition);
}
.stat-card:hover { border-color: var(--ms-accent) !important; }
.stat-value,
.pro-stat-value,
[class*="stat-card"] .stat-value {
  font-size: 22px;
  font-weight: 600;
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
  color: var(--ms-accent-light) !important;
}
.stat-label,
.pro-stat-label,
[class*="stat-card"] .stat-label {
  font-size: 11px;
  color: var(--ms-text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.stat-icon {
  width: 32px; height: 32px;
  background: rgba(74,111,165,0.12);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--ms-accent-light);
  font-size: 14px;
  flex-shrink: 0;
}

/* Stat boxes (send tab) */
.stat-box {
  background: var(--ms-bg-hover) !important;
  border: 1px solid var(--ms-border) !important;
  box-shadow: none !important;
  transition: background-color var(--transition), border-color var(--transition);
}
.stat-box:hover {
  background: var(--ms-border) !important;
  border-color: var(--ms-accent) !important;
  box-shadow: none !important;
}

/* === STATUS BADGES === */
/* "פעיל" / active status */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
.status-chip::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.status-chip.active   { color: var(--ms-success); background: rgba(76,175,80,0.1); }
.status-chip.paused   { color: var(--ms-warning);  background: rgba(232,168,62,0.1); }
.status-chip.error    { color: var(--ms-danger);   background: rgba(224,85,85,0.1); }
.status-chip.inactive { color: var(--ms-text-muted); background: var(--ms-bg-hover); }

/* WA status badge */
#waStatus {
  font-size: 0.75rem !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  min-width: unset !important;
}
#waStatus.bg-success {
  background: rgba(76,175,80,0.15) !important;
  color: var(--ms-success) !important;
  border: 1px solid rgba(76,175,80,0.3) !important;
}
#waStatus.bg-warning {
  background: rgba(232,168,62,0.15) !important;
  color: var(--ms-warning) !important;
  border: 1px solid rgba(232,168,62,0.3) !important;
}
#waStatus.bg-danger, #waStatus.bg-secondary {
  background: rgba(224,85,85,0.15) !important;
  color: var(--ms-danger) !important;
  border: 1px solid rgba(224,85,85,0.3) !important;
}

/* Status dot */
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot--online {
  background: var(--ms-success);
  box-shadow: 0 0 0 0 rgba(76,175,80,0.4);
  animation: ms-pulse-green 2s infinite;
}
@keyframes ms-pulse-green {
  0%   { box-shadow: 0 0 0 0   rgba(76,175,80,0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(76,175,80,0);   }
  100% { box-shadow: 0 0 0 0   rgba(76,175,80,0);   }
}

/* === QR CONTAINER — keep white bg for QR codes === */
.qr-container,
#qrCodeImg,
canvas[id*="qr"],
.qr-code-wrapper {
  background: white !important;
  border-radius: var(--radius-md) !important;
  padding: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#qrContainer,
.qr-display {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03) !important;
  color: var(--ms-text-muted) !important;
  min-height: 200px !important;
  padding: 1.5rem !important;
  position: relative !important;
  transition: border-color var(--transition);
}
#qrContainer img,
.qr-display img {
  background: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px !important;
  max-width: 200px !important;
}
#qrCodeContainer,
#qrCanvas,
.qr-area,
[id*="qr"] canvas,
[id*="qr"] img {
  max-width: 220px !important;
  max-height: 220px !important;
}
#qrCodeContainer, .qr-wrapper {
  display: flex !important;
  justify-content: center !important;
  padding: 12px !important;
}
.payment-qr-box {
  background: white;
  border-radius: var(--radius-md);
  padding: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* === SEND PANEL === */
.send-panel {
  background: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.send-panel-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ms-border);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ms-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.send-progress-bar {
  height: 2px;
  background: var(--ms-bg-hover);
  border-radius: 1px;
  overflow: hidden;
  margin: 12px 0;
}
.send-progress-fill {
  height: 100%;
  background: var(--ms-accent);
  border-radius: 1px;
  transition: width 0.5s ease;
}

/* Log output */
#sendLog, .send-log, #logArea, #campaignLog {
  background: var(--ms-bg-base) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: var(--ms-text-secondary) !important;
  padding: 12px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  line-height: 1.6 !important;
}

/* === TOOLBAR === */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ms-border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar-search { flex: 1; max-width: 280px; }

/* === EMPTY STATE === */
.empty-state, .pro-empty, .pro-empty-state {
  padding: 60px 24px !important;
  text-align: center !important;
  color: var(--ms-text-muted) !important;
}
.empty-state i, .pro-empty-state i {
  font-size: 28px !important;
  margin-bottom: 12px !important;
  opacity: 0.4 !important;
  display: block !important;
}
.empty-state p, .pro-empty-state p {
  font-size: 13px !important;
  margin-bottom: 16px !important;
}

/* === AUTH PAGES === */
.pro-auth-shell, .auth-wrapper {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ms-bg-base) !important;
  padding: 24px !important;
}
.pro-auth-card-wrap, .auth-card-wrap {
  width: 100%;
  max-width: 420px;
}
body.auth-page { background: var(--ms-bg-base) !important; }
body.auth-page::before { display: none !important; }
.pro-auth-logo {
  width: 48px; height: 48px;
  background: rgba(74,111,165,0.12);
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 24px;
  color: var(--ms-accent-light);
  margin-bottom: 4px;
}
.pro-auth-footer {
  text-align: center;
  color: var(--ms-text-muted);
  font-size: 12px;
  margin-top: 20px;
}
.pro-auth-footer a { color: var(--ms-text-muted) !important; text-decoration: none !important; }
.pro-auth-footer a:hover { color: var(--ms-text-secondary) !important; }

/* OTP inputs */
.otp-input {
  background: var(--ms-bg-hover) !important;
  border-color: var(--ms-border) !important;
  color: var(--ms-text-primary) !important;
  width: 44px !important;
  height: 52px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* === BILLING / PLAN CARDS === */
.plan-card {
  background: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  transition: border-color var(--transition);
}
.plan-card:hover { border-color: var(--ms-accent) !important; }
.plan-card.featured {
  border-color: var(--ms-accent);
  box-shadow: 0 0 20px rgba(74,111,165,0.15);
}
.plan-card.featured::before {
  content: 'מומלץ';
  position: absolute;
  top: -10px; right: 50%;
  transform: translateX(50%);
  background: var(--ms-accent);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  letter-spacing: 0.06em;
}
.plan-price {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ms-text-primary);
}
.plan-period { font-size: 12px; color: var(--ms-text-muted); }
.payment-address {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ms-text-secondary);
  word-break: break-all;
  background: var(--ms-bg-hover);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  margin-top: 8px;
}

/* === TRIAL / PROMO BANNER === */
.trial-banner, [class*="trial"], [class*="promo"], [id*="trialBanner"] {
  background: var(--ms-bg-hover) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text-muted) !important;
  font-size: 12px !important;
}

/* === TEMPLATE LIST ROWS === */
#templatesDashboardList .d-flex.rounded.border,
#templatesDashboardList [class*="rounded"][class*="border"],
#templatesList .d-flex.rounded.border,
#templatesList [class*="rounded"][class*="border"] {
  background: var(--ms-bg-card) !important;
  border-color: var(--ms-border) !important;
  color: var(--ms-text-primary) !important;
  transition: background-color var(--transition), border-color var(--transition);
}
#templatesDashboardList .d-flex.rounded.border:hover,
#templatesList .d-flex.rounded.border:hover {
  background: var(--ms-bg-hover) !important;
  border-color: var(--ms-accent) !important;
}

/* === CUSTOM TABS (dashboard mainTabs) === */
.custom-tabs, #mainTabs {
  background: var(--ms-bg-base) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.custom-tabs .nav-link,
#mainTabs .nav-link {
  color: var(--ms-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  transition: color var(--transition), background-color var(--transition) !important;
}
.custom-tabs .nav-link:hover,
#mainTabs .nav-link:hover {
  color: var(--ms-text-secondary) !important;
  background: var(--ms-bg-hover) !important;
  border-bottom-color: transparent !important;
}
.custom-tabs .nav-link.active,
#mainTabs .nav-link.active {
  color: var(--ms-text-primary) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--ms-accent) !important;
  font-weight: 500 !important;
}

/* === CARD ACCENT BORDERS (neutralised) === */
.card-accent-blue,
.card-accent-green,
.card-accent-purple,
.card-accent-amber {
  border-inline-start: 1px solid var(--ms-border) !important;
}

/* === CHECKLIST ITEMS === */
.checklist-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text-secondary) !important;
  transition: background-color var(--transition);
}
.checklist-item:hover { background: var(--ms-bg-hover) !important; transform: none !important; }
.checklist-item span  { color: var(--ms-text-secondary) !important; }

/* === MISC SECTION HEADERS === */
.pro-section-header {
  color: var(--ms-text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
}
.pro-surface { background: var(--ms-bg-card) !important; border-color: var(--ms-border) !important; }
.pro-divider { border-color: var(--ms-border) !important; }

/* Cards full-width helpers */
#templatesCard, #sendHistoryCard {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* Page content padding */
.container-fluid.mt-4.page-content { padding-top: 24px !important; }



/* ==================================================================
   SECTION: DESIGN SYSTEM — OBSIDIAN EMERALD (canonical tokens)
   ================================================================== */

/* ============================================================
   WA-GENIUS DESIGN SYSTEM — OBSIDIAN EMERALD v3.0
   Luxury pass: green-black obsidian surfaces, warm ivory text,
   translucent hairline borders, layered elevation shadows and a
   Hebrew serif display face (Frank Ruhl Libre) for page titles
   and hero numbers. Token NAMES are unchanged from v2 — every
   legacy rule that reads an --oe-* token upgrades automatically.
   ============================================================ */

/* SECTION 1: CSS Custom Properties (Design Tokens) */
:root {
  /* === BASE SURFACES (neutral graphite, never pure black) === */
  --oe-bg:               #101113;
  --oe-surface:          #17191C;
  --oe-surface-low:      #141518;
  --oe-surface-high:     #1D1F23;
  --oe-surface-highest:  #24262B;

  /* === BORDERS (translucent hairlines — sit correctly on every surface) === */
  --oe-border:           rgba(236, 237, 238, 0.08);
  --oe-border-strong:    rgba(236, 237, 238, 0.14);
  --oe-border-focus:     #25D366;

  /* === PRIMARY (WhatsApp Green / Emerald Signal) === */
  --oe-primary:          #4FF07F;
  --oe-primary-cta:      #25D366;
  --oe-primary-on:       #04220F;
  --oe-primary-glow:     rgba(37, 211, 102, 0.1);
  --oe-primary-glow-lg:  rgba(37, 211, 102, 0.16);

  /* === TEXT (neutral — clean graphite) === */
  --oe-text:             #ECEDEE;
  --oe-text-muted:       #9A9DA1;
  --oe-text-disabled:    #63666B;

  /* === SEMANTIC === */
  --oe-error:            #FF6B6D;
  --oe-error-bg:         rgba(255, 77, 79, 0.12);
  --oe-warning:          #E3A23C;
  --oe-warning-bg:       rgba(227, 162, 60, 0.12);
  --oe-success:          #34D399;
  --oe-success-bg:       rgba(37, 211, 102, 0.12);
  --oe-info:             #9DB8E8;
  --oe-info-bg:          rgba(157, 184, 232, 0.12);

  /* === TYPOGRAPHY === */
  --oe-font:             'IBM Plex Sans Hebrew', sans-serif;
  --oe-font-display:     'Frank Ruhl Libre', 'IBM Plex Sans Hebrew', serif;
  --oe-radius-sm:        6px;
  --oe-radius:           10px;
  --oe-radius-lg:        14px;
  --oe-radius-xl:        18px;
  --oe-radius-pill:      9999px;

  /* === ELEVATION (layered, soft — replaces flat glows) === */
  --oe-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.18);
  --oe-shadow-md:        0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.24);
  --oe-shadow-lg:        0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 48px rgba(0, 0, 0, 0.38);
  --oe-ring:             0 0 0 3px var(--oe-primary-glow-lg);

  /* === MOTION === */
  --oe-ease:             cubic-bezier(0.2, 0.7, 0.3, 1);
  --oe-dur:              0.18s;

  /* === LAYOUT === */
  --oe-sidebar-width:    280px;
  --oe-topbar-height:    64px;
  --oe-page-padding:     32px;
  --oe-gap:              24px;
  --oe-gap-sm:           16px;

  /* === GLASS / OVERLAYS === */
  --oe-glass:            rgba(23, 25, 28, 0.72);
  --oe-glass-strong:     rgba(16, 17, 19, 0.85);
  --oe-backdrop:         rgba(9, 10, 11, 0.72);
  --oe-header-tint:      rgba(236, 237, 238, 0.03);
  --oe-modal-shadow:     var(--oe-shadow-lg);
  --oe-ambient-a:        rgba(37, 211, 102, 0.02);
  --oe-ambient-b:        rgba(255, 255, 255, 0.015);
}

/* === LIGHT MODE TOKENS ===
   theme.js sets data-theme on <body> AND data-bs-theme on <html>;
   theme-toggle.js sets data-theme AND data-bs-theme on <html>.
   html[data-bs-theme="light"] reaches the <html> element in BOTH mechanisms
   (so html-level rules like `html{background:var(--ms-bg-base)}` flip too),
   body[data-theme="light"] reaches the body in theme.js's mechanism.
   Redefining the tokens flips every OE component automatically. */
html[data-theme="light"],
html[data-bs-theme="light"],
body[data-theme="light"] {
  /* Warm-neutral light palette: warm off-white page, warm near-white floating
     cards, warm near-black text, warm soft borders. Brand accent stays green.
     All body/secondary text meets WCAG AA+. */
  --oe-bg:               #F5F3F0;
  --oe-surface:          #FDFCFB;
  --oe-surface-low:      #EEECEA;
  --oe-surface-high:     #E5E2DE;
  --oe-surface-highest:  #D8D4CF;
  --oe-border:           #DDD9D5;
  --oe-border-focus:     #25D366;
  --oe-primary:          #059669;
  --oe-primary-cta:      #25D366;
  --oe-primary-on:       #003915;
  --oe-primary-glow:     rgba(37, 211, 102, 0.12);
  --oe-primary-glow-lg:  rgba(37, 211, 102, 0.18);
  --oe-text:             #1A1A1A;
  --oe-text-muted:       #6E6A65;
  --oe-text-disabled:    #9B9693;
  --oe-error:            #DC2626;
  --oe-error-bg:         rgba(220, 38, 38, 0.08);
  --oe-warning:          #D97706;
  --oe-warning-bg:       rgba(217, 119, 6, 0.08);
  --oe-success:          #059669;
  --oe-success-bg:       rgba(5, 150, 105, 0.08);
  --oe-info:             #2563EB;
  --oe-info-bg:          rgba(37, 99, 235, 0.08);

  --oe-glass:            rgba(238, 236, 234, 0.90);
  --oe-glass-strong:     rgba(245, 243, 240, 0.94);
  --oe-backdrop:         rgba(0, 0, 0, 0.35);
  --oe-header-tint:      rgba(0, 0, 0, 0.02);
  --oe-border-strong:    #C8C4BF;
  --oe-shadow-sm:        0 1px 2px rgba(28, 25, 20, 0.06), 0 2px 8px rgba(28, 25, 20, 0.05);
  --oe-shadow-md:        0 1px 2px rgba(28, 25, 20, 0.07), 0 8px 24px rgba(28, 25, 20, 0.08);
  --oe-shadow-lg:        0 2px 4px rgba(28, 25, 20, 0.08), 0 16px 48px rgba(28, 25, 20, 0.14);
  --oe-modal-shadow:     var(--oe-shadow-lg);
  --oe-ambient-a:        rgba(37, 211, 102, 0.06);
  --oe-ambient-b:        rgba(5, 150, 105, 0.04);

  /* Legacy style-redesign tokens (defined dark in its :root) — flip to light */
  --ms-bg-base:          #F5F3F0;
  --ms-bg-card:          #FDFCFB;
  --ms-bg-hover:         #E5E2DE;
  --ms-border:           #DDD9D5;
  --ms-text-primary:     #1A1A1A;
  --ms-text-secondary:   #555250;
  --ms-text-muted:       #6E6A65;
  --ms-accent:           #059669;
  --ms-accent-light:     #25D366;
}

/* === BOOTSTRAP VARIABLE BRIDGE (light) ===
   style-redesign.css sets these on bare `:root` with !important, so they apply
   in BOTH themes and keep every var(--bs-*)-driven surface (cards, modals,
   dropdowns, list groups, body bg) dark in light mode. The dark-enforcement
   block that normally remaps them is scoped off in light. To win, we need
   !important AND specificity > :root (0,1,0); html[data-bs-theme="light"] and
   body[data-theme="light"] are both (0,1,1). */
html[data-bs-theme="light"],
html[data-theme="light"],
body[data-theme="light"] {
  --bs-body-bg:                   #F5F3F0 !important;
  --bs-body-color:                #1A1A1A !important;
  --bs-secondary-bg:              #EEECEA !important;
  --bs-tertiary-bg:               #FDFCFB !important;
  --bs-border-color:              #DDD9D5 !important;
  --bs-border-color-translucent:  rgba(40, 30, 20, 0.07) !important;
  --bs-card-bg:                   #FDFCFB !important;
  --bs-card-border-color:         #DDD9D5 !important;
  --bs-card-cap-bg:               #EEECEA !important;
  --bs-list-group-bg:             #FDFCFB !important;
  --bs-list-group-border-color:   #DDD9D5 !important;
  --bs-modal-bg:                  #FDFCFB !important;
  --bs-dropdown-bg:               #FDFCFB !important;
  --bs-popover-bg:                #FDFCFB !important;
  --bs-tooltip-bg:                #1A1A1A !important;
  --bs-link-color:                #059669 !important;
  --bs-link-hover-color:          #047857 !important;
}

/* === OE BASELINE ENFORCEMENT — beats style.css / style-redesign.css ===
   Light mode is activated by data-theme="light" on <body> (theme.js)
   or on <html> (theme-toggle.js); we negate both. */
html:not([data-theme="light"]) body:not([data-theme="light"]) {
  background-color: var(--oe-bg) !important;
  color: var(--oe-text) !important;
  /* Remap legacy tokens (style-pro/style-redesign dark blocks) to OE values,
     so legacy rules that win the cascade still resolve to OE colors */
  --c-bg: var(--oe-bg);
  --c-surface: var(--oe-surface);
  --c-surface-raised: var(--oe-surface-high);
  --c-border: var(--oe-border);
  --c-border-strong: var(--oe-border);
  --c-text-primary: var(--oe-text);
  --c-text-secondary: var(--oe-text-muted);
  --c-text-muted: var(--oe-text-disabled);
  --c-gray-50: var(--oe-surface-low);
  --c-gray-100: var(--oe-surface-high);
  --ms-bg-base: var(--oe-bg);
  --ms-bg-card: var(--oe-surface);
  --bs-body-bg: var(--oe-bg);
  --bs-body-color: var(--oe-text);
  --bs-card-bg: var(--oe-surface);
  --bs-card-border-color: var(--oe-border);
  --bg-main: var(--oe-bg);
  --bg-card: var(--oe-surface);
  --bg-page: var(--oe-bg);
}
html:not([data-theme="light"]) body:not([data-theme="light"]) .container,
html:not([data-theme="light"]) body:not([data-theme="light"]) .container-fluid,
html:not([data-theme="light"]) body:not([data-theme="light"]) main,
html:not([data-theme="light"]) body:not([data-theme="light"]) .content,
html:not([data-theme="light"]) body:not([data-theme="light"]) .page-wrapper,
html:not([data-theme="light"]) body:not([data-theme="light"]) .page-content {
  background-color: transparent !important;
  color: var(--oe-text);
}
/* Headings must never be invisible */
html:not([data-theme="light"]) body:not([data-theme="light"]) h1,
html:not([data-theme="light"]) body:not([data-theme="light"]) h2,
html:not([data-theme="light"]) body:not([data-theme="light"]) h3,
html:not([data-theme="light"]) body:not([data-theme="light"]) h4,
html:not([data-theme="light"]) body:not([data-theme="light"]) h5 {
  color: var(--oe-text) !important;
}
html:not([data-theme="light"]) body:not([data-theme="light"]) .card-title,
html:not([data-theme="light"]) body:not([data-theme="light"]) .section-title,
html:not([data-theme="light"]) body:not([data-theme="light"]) .pro-page-title,
html:not([data-theme="light"]) body:not([data-theme="light"]) .pro-page-subtitle,
html:not([data-theme="light"]) body:not([data-theme="light"]) label {
  color: var(--oe-text) !important;
}
html:not([data-theme="light"]) body:not([data-theme="light"]) .text-muted,
html:not([data-theme="light"]) body:not([data-theme="light"]) small {
  color: var(--oe-text-muted) !important;
}
/* Bootstrap blue → OE green (catch stragglers, incl. legacy body[data-theme="dark"] btn rules) */
html:not([data-theme="light"]) body:not([data-theme="light"]) .btn-info,
html:not([data-theme="light"]) body:not([data-theme="light"]) .btn-primary,
html:not([data-theme="light"]) body:not([data-theme="light"]) .btn-success {
  background: var(--oe-primary-cta) !important;
  background-color: var(--oe-primary-cta) !important;
  border-color: var(--oe-primary-cta) !important;
  color: var(--oe-primary-on) !important;
}
html:not([data-theme="light"]) body:not([data-theme="light"]) .btn-outline-primary,
html:not([data-theme="light"]) body:not([data-theme="light"]) .btn-outline-success {
  color: var(--oe-primary-cta) !important;
  border-color: var(--oe-primary-cta) !important;
  background: transparent !important;
}
html:not([data-theme="light"]) body:not([data-theme="light"]) .btn-outline-primary:hover,
html:not([data-theme="light"]) body:not([data-theme="light"]) .btn-outline-success:hover {
  background: var(--oe-primary-cta) !important;
  color: var(--oe-primary-on) !important;
}

/* SECTION 2: Global Reset & Base */
*, *::before, *::after { box-sizing: border-box; }

html[dir="rtl"] body {
  font-family: var(--oe-font);
  direction: rtl;
  text-align: right;
}
body:not([data-theme="light"]) {
  background-color: var(--oe-bg);
  color: var(--oe-text);
}

.wg-body {
  font-family: var(--oe-font);
  background: var(--oe-bg);
  color: var(--oe-text);
}

/* SECTION 3: Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--oe-surface); }
::-webkit-scrollbar-thumb { background: var(--oe-border); border-radius: var(--oe-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--oe-primary-cta); }

/* SECTION 4: Layout Shell */
.wg-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--oe-topbar-height);
  background: var(--oe-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--oe-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--oe-page-padding);
}

.wg-sidebar {
  position: fixed;
  top: var(--oe-topbar-height);
  right: 0;
  width: var(--oe-sidebar-width);
  height: calc(100vh - var(--oe-topbar-height));
  background: var(--oe-surface);
  border-left: 1px solid var(--oe-border);
  display: flex;
  flex-direction: column;
  z-index: 90;
  overflow-y: auto;
}

.wg-main {
  margin-right: var(--oe-sidebar-width);
  padding: var(--oe-page-padding);
  min-height: calc(100vh - var(--oe-topbar-height));
  background: var(--oe-bg);
}

/* SECTION 5: Navigation */
.wg-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--oe-radius);
  color: var(--oe-text-muted);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: right;
}
.wg-nav-item:hover {
  background: var(--oe-surface-high);
  color: var(--oe-text);
}
.wg-nav-item.active {
  border-right: 4px solid var(--oe-primary-cta);
  background: rgba(37, 211, 102, 0.08);
  color: var(--oe-primary);
  font-weight: 600;
  padding-right: 8px;
}

/* SECTION 6: Cards */
.wg-card {
  background: var(--oe-surface);
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius-lg);
  padding: 24px;
}
.wg-card:hover {
  box-shadow: 0 0 20px var(--oe-primary-glow);
  transition: box-shadow 0.2s ease;
}
.wg-card-inner {
  background: var(--oe-surface-low);
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius);
  padding: 16px;
}

/* SECTION 7: Buttons */
.wg-btn-primary {
  background: var(--oe-primary-cta);
  color: var(--oe-primary-on);
  border: none;
  border-radius: var(--oe-radius);
  padding: 10px 20px;
  font-family: var(--oe-font);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.wg-btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
}
.wg-btn-primary:active { transform: scale(0.97); }

.wg-btn-secondary {
  background: transparent;
  color: var(--oe-primary-cta);
  border: 1px solid var(--oe-primary-cta);
  border-radius: var(--oe-radius);
  padding: 10px 20px;
  font-family: var(--oe-font);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.wg-btn-secondary:hover {
  background: rgba(37, 211, 102, 0.08);
}

.wg-btn-ghost {
  background: var(--oe-surface-high);
  color: var(--oe-text);
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius);
  padding: 8px 16px;
  font-family: var(--oe-font);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.wg-btn-ghost:hover { border-color: var(--oe-primary-cta); color: var(--oe-primary); }

.wg-btn-danger {
  background: var(--oe-error-bg);
  color: var(--oe-error);
  border: 1px solid rgba(255, 77, 79, 0.3);
  border-radius: var(--oe-radius);
  padding: 8px 16px;
  font-family: var(--oe-font);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.wg-btn-danger:hover { background: rgba(255, 77, 79, 0.2); }

/* SECTION 8: Form Controls */
.wg-input, .wg-select, .wg-textarea {
  width: 100%;
  background: var(--oe-surface-low);
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius);
  padding: 10px 14px;
  color: var(--oe-text);
  font-family: var(--oe-font);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
  direction: rtl;
}
.wg-input:focus, .wg-select:focus, .wg-textarea:focus {
  border-color: var(--oe-border-focus);
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.15);
}
.wg-input::placeholder, .wg-textarea::placeholder {
  color: var(--oe-text-disabled);
}
.wg-textarea { resize: vertical; min-height: 120px; }
.wg-select { appearance: none; cursor: pointer; }

/* SECTION 9: Status Chips */
.wg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--oe-radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.wg-chip-success {
  background: var(--oe-success-bg);
  color: var(--oe-success);
  border: 1px solid rgba(37, 211, 102, 0.2);
}
.wg-chip-error {
  background: var(--oe-error-bg);
  color: var(--oe-error);
  border: 1px solid rgba(255, 77, 79, 0.2);
}
.wg-chip-warning {
  background: var(--oe-warning-bg);
  color: var(--oe-warning);
}
.wg-chip-info {
  background: var(--oe-info-bg);
  color: var(--oe-info);
}
.wg-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.wg-chip-dot.pulse { animation: wg-pulse 1.5s infinite; }
@keyframes wg-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* SECTION 10: Tables */
.wg-table { width: 100%; border-collapse: collapse; }
.wg-table thead th {
  background: var(--oe-surface);
  color: var(--oe-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid var(--oe-border);
}
.wg-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--oe-border);
  font-size: 14px;
  color: var(--oe-text);
}
.wg-table tbody tr:hover td { background: var(--oe-surface-high); }
.wg-table tbody tr:last-child td { border-bottom: none; }

/* SECTION 11: Progress Bars */
.wg-progress-track {
  width: 100%;
  height: 8px;
  background: var(--oe-surface-high);
  border-radius: var(--oe-radius-pill);
  overflow: hidden;
}
.wg-progress-fill {
  height: 100%;
  background: var(--oe-primary-cta);
  border-radius: var(--oe-radius-pill);
  transition: width 0.3s ease;
}
.wg-progress-fill.active {
  position: relative;
  overflow: hidden;
}
.wg-progress-fill.active::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: wg-sweep 2s infinite;
}
@keyframes wg-sweep {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* SECTION 12: Modals */
.wg-modal-backdrop {
  position: fixed; inset: 0;
  background: var(--oe-backdrop);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wg-modal {
  background: var(--oe-surface);
  border: 1px solid rgba(37, 211, 102, 0.2);
  border-radius: var(--oe-radius-xl);
  padding: 32px;
  max-width: 560px;
  width: 90%;
  box-shadow: var(--oe-modal-shadow);
}

/* SECTION 13: Alerts / Toasts */
.wg-alert {
  padding: 14px 18px;
  border-radius: var(--oe-radius);
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.wg-alert-success { background: var(--oe-success-bg); color: var(--oe-success); border: 1px solid rgba(37,211,102,0.2); }
.wg-alert-error   { background: var(--oe-error-bg);   color: var(--oe-error);   border: 1px solid rgba(255,77,79,0.2); }
.wg-alert-warning { background: var(--oe-warning-bg); color: var(--oe-warning); border: 1px solid rgba(250,173,20,0.2); }
.wg-alert-info    { background: var(--oe-info-bg);    color: var(--oe-info);    border: 1px solid rgba(180,197,255,0.2); }

/* SECTION 14: QR / Connection Panel */
.wg-qr-panel {
  background: var(--oe-surface);
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius-xl);
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.wg-qr-panel img { border-radius: var(--oe-radius); border: 4px solid var(--oe-primary-cta); }

/* SECTION 15: Send Run Progress Panel */
.wg-run-panel {
  background: var(--oe-surface-low);
  border: 1px solid rgba(37, 211, 102, 0.2);
  border-radius: var(--oe-radius-lg);
  padding: 20px;
}
.wg-run-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--oe-border);
}
.wg-run-stat:last-child { border-bottom: none; }

/* SECTION 16: Toggle Switch (Bootstrap override) */
.form-check-input:checked {
  background-color: var(--oe-primary-cta) !important;
  border-color: var(--oe-primary-cta) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2) !important;
}
.form-check-input {
  background-color: var(--oe-surface-high) !important;
  border-color: var(--oe-border) !important;
}

/* SECTION 17: Bootstrap Overrides */
.card {
  background: var(--oe-surface) !important;
  border: 1px solid var(--oe-border) !important;
  border-radius: var(--oe-radius-lg) !important;
  color: var(--oe-text) !important;
}
.card-header {
  background: var(--oe-header-tint) !important;
  border-bottom: 1px solid var(--oe-border) !important;
}
.modal-content {
  background: var(--oe-surface) !important;
  border: 1px solid rgba(37, 211, 102, 0.15) !important;
  border-radius: var(--oe-radius-xl) !important;
}
.modal-header {
  border-bottom: 1px solid var(--oe-border) !important;
}
.modal-footer {
  border-top: 1px solid var(--oe-border) !important;
}
.dropdown-menu {
  background: var(--oe-surface-highest) !important;
  border: 1px solid var(--oe-border) !important;
  border-radius: var(--oe-radius) !important;
}
.dropdown-item {
  color: var(--oe-text) !important;
}
.dropdown-item:hover {
  background: var(--oe-surface-high) !important;
  color: var(--oe-primary) !important;
}
.table {
  color: var(--oe-text) !important;
}
.table > :not(caption) > * > * {
  background-color: transparent !important;
  border-bottom-color: var(--oe-border) !important;
  color: var(--oe-text) !important;
}
.table-hover > tbody > tr:hover > * {
  background-color: var(--oe-surface-high) !important;
}
.form-control, .form-select {
  background-color: var(--oe-surface-low) !important;
  border-color: var(--oe-border) !important;
  color: var(--oe-text) !important;
}
.form-control:focus, .form-select:focus {
  background-color: var(--oe-surface-low) !important;
  border-color: var(--oe-border-focus) !important;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.15) !important;
  color: var(--oe-text) !important;
}
.form-control::placeholder { color: var(--oe-text-disabled) !important; }
.btn-success, .btn-primary {
  background-color: var(--oe-primary-cta) !important;
  border-color: var(--oe-primary-cta) !important;
  color: var(--oe-primary-on) !important;
  font-weight: 700 !important;
}
.btn-success:hover, .btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25) !important;
}
.btn-outline-success, .btn-outline-primary {
  color: var(--oe-primary-cta) !important;
  border-color: var(--oe-primary-cta) !important;
}
.btn-outline-success:hover, .btn-outline-primary:hover {
  background-color: var(--oe-primary-cta) !important;
  color: var(--oe-primary-on) !important;
}
.btn-secondary {
  background-color: var(--oe-surface-high) !important;
  border-color: var(--oe-border) !important;
  color: var(--oe-text) !important;
}
.nav-tabs {
  border-bottom-color: var(--oe-border) !important;
}
.nav-tabs .nav-link {
  color: var(--oe-text-muted) !important;
  border-color: transparent !important;
}
.nav-tabs .nav-link.active {
  background: transparent !important;
  color: var(--oe-primary) !important;
  border-color: transparent transparent var(--oe-primary-cta) !important;
  border-bottom-width: 2px !important;
}
.nav-tabs .nav-link:hover { color: var(--oe-text) !important; }
.badge.bg-success { background-color: var(--oe-primary-cta) !important; color: var(--oe-primary-on) !important; }
.list-group-item {
  background-color: var(--oe-surface) !important;
  border-color: var(--oe-border) !important;
  color: var(--oe-text) !important;
}
.list-group-item:hover { background-color: var(--oe-surface-high) !important; }
.pagination .page-link {
  background-color: var(--oe-surface) !important;
  border-color: var(--oe-border) !important;
  color: var(--oe-text) !important;
}
.pagination .page-item.active .page-link {
  background-color: var(--oe-primary-cta) !important;
  border-color: var(--oe-primary-cta) !important;
  color: var(--oe-primary-on) !important;
}
.alert-success {
  background-color: var(--oe-success-bg) !important;
  border-color: rgba(37, 211, 102, 0.2) !important;
  color: var(--oe-success) !important;
}
.alert-danger {
  background-color: var(--oe-error-bg) !important;
  border-color: rgba(255, 77, 79, 0.2) !important;
  color: var(--oe-error) !important;
}
.alert-warning {
  background-color: var(--oe-warning-bg) !important;
  border-color: rgba(250, 173, 20, 0.2) !important;
  color: var(--oe-warning) !important;
}
.alert-info {
  background-color: var(--oe-info-bg) !important;
  border-color: rgba(180, 197, 255, 0.2) !important;
  color: var(--oe-info) !important;
}
.text-muted { color: var(--oe-text-muted) !important; }
.border { border-color: var(--oe-border) !important; }
.bg-dark { background-color: var(--oe-surface) !important; }
.text-success { color: var(--oe-primary) !important; }

/* SECTION 18: Ambient Background Glow */
.wg-ambient {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.wg-ambient::before {
  content: '';
  position: absolute;
  top: -10%; left: -10%;
  width: 40%; height: 40%;
  background: var(--oe-ambient-a);
  filter: blur(120px);
  border-radius: 50%;
}
.wg-ambient::after {
  content: '';
  position: absolute;
  bottom: -10%; right: -10%;
  width: 40%; height: 40%;
  background: var(--oe-ambient-b);
  filter: blur(120px);
  border-radius: 50%;
}

/* SECTION 19: Utility Classes */
.wg-glow { box-shadow: 0 0 20px var(--oe-primary-glow-lg); }
.wg-text-primary { color: var(--oe-primary) !important; }
.wg-text-muted { color: var(--oe-text-muted) !important; }
.wg-bg-surface { background: var(--oe-surface) !important; }
.wg-border { border: 1px solid var(--oe-border) !important; }
.wg-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--oe-text);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* Navbar OE override */
.navbar, .pro-app-navbar {
  background: var(--oe-glass-strong) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--oe-border) !important;
}
.navbar .navbar-brand,
.pro-brand-text {
  color: var(--oe-primary) !important;
  font-weight: 700 !important;
}
.nav-link, .pro-navbar-link {
  color: var(--oe-text-muted) !important;
  transition: color 0.15s ease !important;
}
.nav-link:hover, .pro-navbar-link:hover {
  color: var(--oe-text) !important;
}
.nav-link.active, .pro-navbar-link.active {
  color: var(--oe-primary) !important;
}

/* Page background enforcement (dark default only — light mode wins when toggled) */
html:not([data-theme="light"]) body:not([data-theme="light"]) .container-fluid,
html:not([data-theme="light"]) body:not([data-theme="light"]) .page-content {
  background-color: transparent !important;
}

/* Pro card overrides for OE */
.pro-card {
  background: var(--oe-surface) !important;
  border: 1px solid var(--oe-border) !important;
  border-radius: var(--oe-radius-lg) !important;
  color: var(--oe-text) !important;
}
.pro-card-header {
  background: var(--oe-header-tint) !important;
  border-bottom: 1px solid var(--oe-border) !important;
}

/* ============================================================
   === PHASE 3-13 UI POLISH (light-safe, token-based) ===
   Cosmetic layer for the whole app. Every value is an --oe-*
   token (auto-flips to light via the light block above) or a
   light-adaptive token: navbar=--oe-glass, header/hover tints=
   --oe-header-tint, alerts/badges=--oe-{info,success,warning,
   error}[-bg]. The source brief's hardcoded dark-first values
   were routed through these so dark AND light both stay correct.
   theme-light.css keeps its higher-specificity Bootstrap-light
   rules, so light mode for .card/.form-control/.table/etc. is
   untouched; these mainly polish dark mode + new components.
   RTL: accent/active borders use *-inline-start (visual right).
   ============================================================ */

/* --- NAVBAR --- */
.pro-app-navbar {
  background: var(--oe-glass) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--oe-border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.5rem 0;
}
.pro-brand-text {
  color: var(--oe-primary) !important;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.pro-brand-icon-lg {
  color: var(--oe-primary-cta);
  font-size: 1.4rem;
}
.pro-navbar-link {
  color: var(--oe-text-muted) !important;
  border-radius: 8px;
  transition: color 0.15s ease, background-color 0.15s ease;
  font-size: 0.9rem;
  font-weight: 500;
}
.pro-navbar-link:hover {
  color: var(--oe-text) !important;
  background: var(--oe-header-tint);
}
.pro-nav-link-active {
  color: var(--oe-primary) !important;
  background: var(--oe-primary-glow) !important;
  border-inline-start: 3px solid var(--oe-primary-cta);
  padding-inline-start: calc(0.75rem - 3px) !important;
}

/* --- CARDS --- */
.card {
  background: var(--oe-surface) !important;
  border: 1px solid var(--oe-border) !important;
  border-radius: 12px !important;
  transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: 0 0 20px var(--oe-primary-glow); }
.card-header {
  background: var(--oe-header-tint) !important;
  border-bottom: 1px solid var(--oe-border) !important;
  padding: 1rem 1.25rem;
  color: var(--oe-text) !important;
}
.card-header h5 { font-weight: 600; color: var(--oe-text) !important; font-size: 0.95rem; }
.card-body { color: var(--oe-text) !important; }
/* Accent stripe on the inline-start edge (visual right in RTL) */
.card-accent-purple { border-inline-start: 3px solid #7c6af7 !important; }
.card-accent-green  { border-inline-start: 3px solid var(--oe-primary-cta) !important; }
.card-accent-blue   { border-inline-start: 3px solid #388bfd !important; }
.card-accent-amber  { border-inline-start: 3px solid #d29922 !important; }

/* --- BUTTONS --- */
.btn-success,
.btn-primary,
.btn-pro.btn-pro-primary {
  background: var(--oe-primary-cta) !important;
  color: var(--oe-primary-on) !important;
  border-color: var(--oe-primary-cta) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: filter 0.15s ease, box-shadow 0.15s ease !important;
}
.btn-success:hover,
.btn-primary:hover,
.btn-pro.btn-pro-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 16px var(--oe-primary-glow-lg) !important;
}
.btn-outline-success,
.btn-outline-primary {
  color: var(--oe-primary-cta) !important;
  border-color: var(--oe-primary-cta) !important;
  border-radius: 8px !important;
}
.btn-outline-success:hover,
.btn-outline-primary:hover {
  background: var(--oe-primary-cta) !important;
  color: var(--oe-primary-on) !important;
}
.btn-secondary,
.btn-outline-secondary,
.btn-pro.btn-pro-secondary,
.btn-pro.btn-pro-ghost {
  border-radius: 8px !important;
  background: var(--oe-surface-low) !important;
  border-color: var(--oe-border) !important;
  color: var(--oe-text) !important;
}
.btn-outline-secondary:hover,
.btn-pro.btn-pro-ghost:hover {
  border-color: var(--oe-primary-cta) !important;
  color: var(--oe-primary) !important;
  background: var(--oe-primary-glow) !important;
}
.btn-danger {
  background: var(--oe-error-bg) !important;
  color: var(--oe-error) !important;
  border-color: var(--oe-error) !important;
  border-radius: 8px !important;
}
.btn-danger:hover { background: var(--oe-error-bg) !important; filter: brightness(1.1); }
.btn-warning {
  background: var(--oe-warning-bg) !important;
  color: var(--oe-warning) !important;
  border-color: var(--oe-warning) !important;
  border-radius: 8px !important;
}
.preset-btn.active {
  background: var(--oe-primary-cta) !important;
  color: var(--oe-primary-on) !important;
  border-color: var(--oe-primary-cta) !important;
}

/* --- FORM CONTROLS --- */
.form-control,
.form-select,
.pro-input {
  background: var(--oe-surface-low) !important;
  border: 1px solid var(--oe-border) !important;
  color: var(--oe-text) !important;
  border-radius: 8px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus,
.pro-input:focus {
  background: var(--oe-surface-low) !important;
  border-color: var(--oe-primary-cta) !important;
  color: var(--oe-text) !important;
  box-shadow: 0 0 0 3px var(--oe-primary-glow-lg) !important;
  outline: none;
}
.form-control::placeholder,
.pro-input::placeholder { color: var(--oe-text-disabled) !important; }
.input-group-text {
  background: var(--oe-surface-low) !important;
  border-color: var(--oe-border) !important;
  color: var(--oe-text-muted) !important;
}
.form-label,
.pro-label {
  color: var(--oe-text-muted) !important;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.form-check-input:checked {
  background-color: var(--oe-primary-cta) !important;
  border-color: var(--oe-primary-cta) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px var(--oe-primary-glow-lg) !important; }
.form-range::-webkit-slider-thumb { background: var(--oe-primary-cta) !important; }
.form-range::-webkit-slider-runnable-track { background: var(--oe-surface-high) !important; }

/* --- TABLES --- */
.table { color: var(--oe-text) !important; border-color: var(--oe-border) !important; }
.table > :not(caption) > * > * {
  background-color: transparent !important;
  border-bottom-color: var(--oe-border) !important;
  color: var(--oe-text) !important;
}
.table-hover > tbody > tr:hover > * { background-color: var(--oe-header-tint) !important; }
.table-dark,
.table thead.table-dark tr { background: var(--oe-surface-low) !important; }
.table-dark th {
  background: var(--oe-surface-low) !important;
  color: var(--oe-text-muted) !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--oe-border) !important;
}
.leads-table thead th {
  background: var(--oe-surface-low) !important;
  color: var(--oe-text-muted) !important;
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 2px solid var(--oe-border) !important;
}

/* --- ALERTS (colored tints; tokens flip per theme) --- */
.alert-info {
  background: var(--oe-info-bg) !important;
  border-color: var(--oe-info) !important;
  color: var(--oe-info) !important;
  border-radius: 10px !important;
}
.alert-warning {
  background: var(--oe-warning-bg) !important;
  border-color: var(--oe-warning) !important;
  color: var(--oe-warning) !important;
  border-radius: 10px !important;
}
.alert-success {
  background: var(--oe-success-bg) !important;
  border-color: var(--oe-success) !important;
  color: var(--oe-success) !important;
  border-radius: 10px !important;
}
.alert-danger {
  background: var(--oe-error-bg) !important;
  border-color: var(--oe-error) !important;
  color: var(--oe-error) !important;
  border-radius: 10px !important;
}
.alert-secondary {
  background: var(--oe-surface-low) !important;
  border-color: var(--oe-border) !important;
  color: var(--oe-text-muted) !important;
  border-radius: 10px !important;
}

/* --- BADGES --- */
.badge { border-radius: 20px !important; font-weight: 600 !important; font-size: 0.75rem !important; }
.badge.bg-success, .text-bg-success { background: var(--oe-success-bg) !important; color: var(--oe-success) !important; }
.badge.bg-danger, .text-bg-danger { background: var(--oe-error-bg) !important; color: var(--oe-error) !important; }
.badge.bg-warning { background: var(--oe-warning-bg) !important; color: var(--oe-warning) !important; }
.badge.bg-secondary { background: var(--oe-surface-high) !important; color: var(--oe-text-muted) !important; }
.badge.bg-primary { background: var(--oe-info-bg) !important; color: var(--oe-info) !important; }

/* --- TABS --- */
.nav-tabs { border-bottom: 1px solid var(--oe-border) !important; gap: 4px; }
.nav-tabs .nav-link {
  color: var(--oe-text-muted) !important;
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.15s ease, background-color 0.15s ease;
  background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--oe-text) !important; background: var(--oe-header-tint) !important; }
.nav-tabs .nav-link.active {
  color: var(--oe-primary) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--oe-primary-cta) !important;
  margin-bottom: -1px;
}
.wg-progress-track { background: var(--oe-surface-high) !important; border-radius: 20px !important; overflow: hidden; }
.wg-progress-fill { background: var(--oe-primary-cta) !important; }

/* --- LIST GROUPS --- */
.list-group-item {
  background: var(--oe-surface-low) !important;
  border-color: var(--oe-border) !important;
  color: var(--oe-text) !important;
}
.list-group-item:hover { background: var(--oe-surface-high) !important; }
.list-group-numbered > li::before { color: var(--oe-primary) !important; font-weight: 700; }

/* --- MODALS --- */
.modal-content {
  background: var(--oe-surface) !important;
  border: 1px solid var(--oe-primary-glow-lg) !important;
  border-radius: 16px !important;
  box-shadow: var(--oe-modal-shadow) !important;
  color: var(--oe-text) !important;
}
.modal-header { border-bottom: 1px solid var(--oe-border) !important; padding: 1.25rem 1.5rem; }
.modal-footer { border-top: 1px solid var(--oe-border) !important; }
.modal-backdrop.show { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* Close button: light glyph in dark theme, default dark glyph in light */
.btn-close { filter: invert(1); }
html[data-bs-theme="light"] .btn-close,
html[data-theme="light"] .btn-close,
body[data-theme="light"] .btn-close { filter: none; }

/* --- DROPDOWNS --- */
.dropdown-menu {
  background: var(--oe-surface-high) !important;
  border: 1px solid var(--oe-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 30px var(--oe-backdrop) !important;
}
.dropdown-item { color: var(--oe-text) !important; border-radius: 6px; margin: 2px 4px; }
.dropdown-item:hover { background: var(--oe-surface-low) !important; color: var(--oe-primary) !important; }

/* --- PAGE HEADERS & TYPOGRAPHY --- */
.pro-page-header { margin-bottom: 1.5rem; }
.pro-page-title {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--oe-text) !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 !important;
}
.pro-page-subtitle { color: var(--oe-text-muted) !important; font-size: 0.9rem; margin: 0; }
.section-title { font-size: 0.95rem !important; font-weight: 600 !important; color: var(--oe-text) !important; }

/* --- EMPTY STATES --- */
.pro-empty { text-align: center; padding: 3rem 2rem; }
.pro-empty-icon { font-size: 3rem; color: var(--oe-text-disabled); margin-bottom: 1rem; opacity: 0.5; }
.pro-empty-title { font-size: 1.1rem; font-weight: 600; color: var(--oe-text); margin-bottom: 0.5rem; }
.pro-empty-desc { color: var(--oe-text-muted); font-size: 0.9rem; }

/* --- MISC COMPONENTS --- */
.checklist-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--oe-text); font-size: 0.9rem; }
.stat-box { padding: 1rem; border-radius: 10px; background: var(--oe-surface-low); border: 1px solid var(--oe-border); }

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--oe-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--oe-primary-cta); }

/* --- THEME TOGGLE BUTTON (navbar) ---
   theme.js promotes the hidden #themeToggle stub into this visible control.
   Token-based, so it reads correctly in both dark and light. */
#themeToggle.wg-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--oe-border);
  background: transparent;
  color: var(--oe-text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#themeToggle.wg-theme-toggle:hover {
  background: var(--oe-header-tint);
  border-color: var(--oe-primary-cta);
  color: var(--oe-primary);
}
#themeToggle.wg-theme-toggle .bi {
  font-size: 1.05rem;
  line-height: 1;
}

/* Collapsed (mobile) navbar: the user-strip is a no-wrap flex row, so when admin
   nav items are present its trailing controls (theme toggle, logout) overflow off
   the inline-start edge (negative x in RTL) and become unclickable. Let it wrap. */
@media (max-width: 991.98px) {
  .pro-navbar-user-strip {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
  }
}

/* ============================================================
   === QUIET GLASS v2 — scoped opt-in (body.oe-v2) ===
   Obsidian Emerald v2 "Quiet Glass". Activated per-page by adding
   class="oe-v2" to <body>; pages WITHOUT the class are completely
   unaffected (true pilot / file-by-file rollout). Dark-only scope
   (mirrors the baseline-enforcement specificity at the top of this
   file) so the light-mode toggle keeps working unchanged.

   Direction: quiet, flat surfaces by default; the glass/glow effect
   is reserved for "live" elements only (.oe-card--live, .signal-pulse).
   ============================================================ */
html:not([data-theme="light"]) body.oe-v2:not([data-theme="light"]) {
  /* --- New signature tokens --- */
  --oe-surface-2:       #1D1F23;   /* secondary surface (modals, dropdowns) */
  --oe-glass-bg:        rgba(23, 25, 28, 0.55);
  --oe-glass-border:    rgba(37, 211, 102, 0.14);
  --oe-glass-blur:      20px;
  --oe-accent:          #25D366;   /* Emerald Signal — live/success only */
  --oe-accent-dim:      rgba(37, 211, 102, 0.12);
  --oe-warn:            #E3A23C;   /* Amber Pulse — reconnecting / billing warn */
  --oe-text-faint:      #63666B;
  --oe-border-strong:   rgba(236, 237, 238, 0.14);
  --oe-shadow:          0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.24);
  --oe-font-display:    'Frank Ruhl Libre', serif;  /* H1/H2 + hero numbers ONLY */

  /* --- Remap existing OE tokens to the Quiet Glass palette, so every
     legacy / Bootstrap component shifts automatically on this page --- */
  --oe-bg:              #101113;   /* Graphite — neutral near-black */
  --oe-surface:         #17191C;   /* flat cards — default for most components */
  --oe-surface-low:     #141518;   /* inset / inputs */
  --oe-surface-high:    #1D1F23;   /* hover / raised */
  --oe-surface-highest: #24262B;   /* top layer (dropdowns) */
  --oe-border:          rgba(236, 237, 238, 0.08);
  --oe-border-focus:    #25D366;
  --oe-text:            #ECEDEE;   /* Neutral off-white */
  --oe-text-muted:      #9A9DA1;   /* Neutral gray */
  --oe-text-disabled:   #63666B;
  --oe-primary:         #4FF07F;
  --oe-primary-cta:     #25D366;
  --oe-glass:           rgba(23, 25, 28, 0.72);   /* navbar/topbar */
  --oe-glass-strong:    rgba(16, 17, 19, 0.85);
  --oe-header-tint:     rgba(236, 237, 238, 0.03);
  --oe-radius:          10px;
  --oe-radius-lg:       16px;

  /* legacy aliases still referenced inline (e.g. style="color:var(--c-primary)") */
  --c-primary:          var(--oe-accent);
}

/* --- Display typeface: page titles + hero numbers ONLY (never buttons/nav/badges) --- */
body.oe-v2 .pro-page-title,
body.oe-v2 .oe-display {
  font-family: var(--oe-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
body.oe-v2 .oe-hero-number {
  font-family: var(--oe-font-display);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* --- Signal Pulse: live WhatsApp session indicator ---
   State is driven purely from CSS via :has() on the existing
   #waStatusBadge (JS sets .bg-success when connected, .bg-warning while
   reconnecting/initializing) — NO JS change. Defaults to faint/disconnected. */
.signal-pulse {
  position: relative;
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--oe-text-faint, #63666B);
  flex-shrink: 0;
  vertical-align: middle;
}
body.oe-v2:has(#waStatusBadge.bg-success) .signal-pulse {
  background: var(--oe-accent) !important;
  animation: signal-breathe 2.4s ease-in-out infinite;
}
body.oe-v2:has(#waStatusBadge.bg-warning) .signal-pulse {
  background: var(--oe-warn) !important;
  animation: signal-breathe-warn 1.2s ease-in-out infinite;
}
@keyframes signal-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.35); }
  50%      { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
}
@keyframes signal-breathe-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 162, 60, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(227, 162, 60, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .signal-pulse { animation: none !important; }
}

/* --- Cards: flat by default, glass reserved for the single live card --- */
.oe-card {
  background: var(--oe-surface);
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius);
  box-shadow: var(--oe-shadow);
}
/* The one allowed glass card — wraps the live WhatsApp status panel.
   Scoped under body.oe-v2 (0,2,0) to beat style-redesign's `body .card`
   (0,1,1) !important background/radius. */
body.oe-v2 .oe-card--live {
  background: var(--oe-glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--oe-glass-blur));
  backdrop-filter: blur(var(--oe-glass-blur));
  border: 1px solid var(--oe-glass-border) !important;
  border-radius: var(--oe-radius-lg) !important;
  box-shadow: var(--oe-shadow) !important;
}

/* ============================================================
   SECTION 20: OBSIDIAN EMERALD v3 — GLOBAL LUXURY PASS
   Final cascade layer: refines typography, elevation, and
   micro-interaction across EVERY page. Token-driven only, so
   dark and light both stay correct; later-in-file rules win
   over the earlier !important layers at equal specificity.
   ============================================================ */

/* --- Rendering & selection --- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection {
  background: color-mix(in srgb, var(--oe-primary-cta) 30%, transparent);
  color: var(--oe-text);
}

/* --- Display typography: page titles get the Hebrew serif ---
   Frank Ruhl Libre carries the "luxury" register; body text stays
   IBM Plex Sans Hebrew for data-density and legibility. */
.pro-page-title {
  font-family: var(--oe-font-display) !important;
  font-weight: 500 !important;
  font-size: 1.9rem !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}
.pro-page-subtitle {
  font-size: 0.92rem !important;
  letter-spacing: 0.01em;
}
.oe-display { font-family: var(--oe-font-display) !important; font-weight: 500 !important; }
.oe-hero-number {
  font-family: var(--oe-font-display);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* --- Focus: one consistent emerald ring everywhere --- */
.btn:focus-visible,
a.nav-link:focus-visible,
.pro-navbar-link:focus-visible,
button:focus-visible {
  outline: none !important;
  box-shadow: var(--oe-ring) !important;
}

/* --- Buttons: refined weight, uniform radius, press feedback --- */
.btn {
  border-radius: var(--oe-radius) !important;
  transition: filter var(--oe-dur) var(--oe-ease),
              box-shadow var(--oe-dur) var(--oe-ease),
              background-color var(--oe-dur) var(--oe-ease),
              border-color var(--oe-dur) var(--oe-ease),
              transform var(--oe-dur) var(--oe-ease) !important;
}
.btn:active { transform: scale(0.98); }
.btn-success, .btn-primary, .btn-pro.btn-pro-primary {
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-success:hover, .btn-primary:hover, .btn-pro.btn-pro-primary:hover {
  filter: brightness(1.07);
  box-shadow: 0 4px 18px var(--oe-primary-glow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* --- Cards: quiet elevation instead of green glow ---
   body-prefixed selectors (0,1,1) beat style-redesign's `body .card`
   !important border/radius, which otherwise leaks the old slate-blue
   border (#2a3449) through the OE skin. */
body .card, body .pro-card {
  background: var(--oe-surface) !important;
  border: 1px solid var(--oe-border) !important;
  border-radius: var(--oe-radius-lg) !important;
  box-shadow: var(--oe-shadow-sm) !important;
  transition: border-color var(--oe-dur) var(--oe-ease),
              box-shadow var(--oe-dur) var(--oe-ease);
}
body .card:hover, body .pro-card:hover {
  border-color: var(--oe-border-strong) !important;
  box-shadow: var(--oe-shadow-md) !important;
}
/* style.css pins dark-mode card shadows at (0,2,1) — match it exactly */
body[data-theme="dark"] .card,
[data-bs-theme="dark"] body .card {
  box-shadow: var(--oe-shadow-sm) !important;
}
body[data-theme="dark"] .card:hover,
[data-bs-theme="dark"] body .card:hover {
  box-shadow: var(--oe-shadow-md) !important;
}
/* Re-assert the accent stripes over the full-border reset above */
body .card.card-accent-purple { border-inline-start: 3px solid #8b7cf8 !important; }
body .card.card-accent-green  { border-inline-start: 3px solid var(--oe-primary-cta) !important; }
body .card.card-accent-blue   { border-inline-start: 3px solid #5a9bf6 !important; }
body .card.card-accent-amber  { border-inline-start: 3px solid var(--oe-warning) !important; }
.card-header, .pro-card-header {
  letter-spacing: 0.01em;
}

/* --- Forms: calmer inputs, emerald focus --- */
.form-control, .form-select, .pro-input {
  border-radius: var(--oe-radius) !important;
  transition: border-color var(--oe-dur) var(--oe-ease),
              box-shadow var(--oe-dur) var(--oe-ease),
              background-color var(--oe-dur) var(--oe-ease);
}
.form-control:hover:not(:focus), .form-select:hover:not(:focus), .pro-input:hover:not(:focus) {
  border-color: var(--oe-border-strong) !important;
}

/* --- Tables: editorial headers, tabular figures --- */
.table, .wg-table { font-variant-numeric: tabular-nums; }
.table thead th, .table-dark th, .leads-table thead th, .wg-table thead th {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--oe-text-muted) !important;
}
.table > :not(caption) > * > * { padding: 0.8rem 0.9rem; }

/* --- Modals: floating panel with real depth --- */
.modal-content {
  border: 1px solid var(--oe-border-strong) !important;
  border-radius: var(--oe-radius-xl) !important;
  box-shadow: var(--oe-shadow-lg) !important;
}

/* --- Dropdowns --- */
.dropdown-menu {
  border-radius: var(--oe-radius-lg) !important;
  box-shadow: var(--oe-shadow-lg) !important;
  padding: 6px !important;
}
.dropdown-item { border-radius: var(--oe-radius-sm) !important; }

/* --- Navbar: deeper glass + hairline shadow --- */
.pro-app-navbar, .navbar {
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  box-shadow: 0 1px 0 var(--oe-border), 0 8px 24px rgba(0, 0, 0, 0.12);
}
.pro-brand-text { letter-spacing: -0.01em; }

/* --- Badges & chips: quieter, consistent --- */
.badge {
  letter-spacing: 0.02em;
  font-weight: 600 !important;
}

/* --- Alerts --- */
.alert { border-radius: var(--oe-radius-lg) !important; }

/* --- Ambient: two soft emerald fields, nothing blue --- */
.wg-ambient::before {
  width: 52%; height: 52%;
  background: var(--oe-ambient-a);
  filter: blur(140px);
}
.wg-ambient::after {
  width: 46%; height: 46%;
  background: var(--oe-ambient-b);
  filter: blur(140px);
}

/* --- Links --- */
a { transition: color var(--oe-dur) var(--oe-ease); }

/* --- Accessibility: respect reduced motion everywhere --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==================================================================
   SECTION: RESPONSIVE LAYER — mobile & tablet (added 2026-07)
   Sits last in the cascade on purpose: these rules win on small
   screens. Uses OE tokens only.
   ================================================================== */

/* --- Tablet and below --- */
@media (max-width: 991.98px) {
  :root {
    --oe-page-padding: 20px;
    --oe-gap: 16px;
    --oe-gap-sm: 12px;
  }

  /* Inbox 3-panel: narrower conversation list */
  .inbox-left { width: 260px; }
}

/* --- Phones --- */
@media (max-width: 767.98px) {
  :root {
    --oe-page-padding: 12px;
    --oe-topbar-height: 56px;
  }

  .container,
  .container-fluid {
    padding-inline: 12px;
  }

  h1, .pro-page-title { font-size: 20px; }
  h2 { font-size: 17px; }
  .pro-page-subtitle { font-size: 13px; }

  /* Cards breathe less on phones */
  .card .card-body { padding: 14px; }

  /* Wide tables scroll horizontally instead of breaking the page */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  main table,
  .card table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Modals use (almost) the full screen */
  .modal-dialog {
    margin: 8px;
    max-width: calc(100vw - 16px);
  }

  /* Inbox: stack the 3 panels vertically */
  .inbox-shell {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 58px);
    overflow: visible;
  }
  .inbox-left {
    width: 100%;
    max-height: 45vh;
    border-left: none;
    border-bottom: 1px solid var(--oe-border);
  }

  /* Ambient background glow is expensive on mobile GPUs */
  .wg-ambient { display: none; }
}

/* --- Small phones --- */
@media (max-width: 575.98px) {
  /* Comfortable touch targets */
  .btn:not(.btn-sm):not(.btn-pro-sm),
  .form-control,
  .form-select {
    min-height: 42px;
  }

  /* Stat / KPI cards stack full-width */
  .stat-card,
  .pro-stat-card,
  .kpi-card {
    width: 100%;
  }

  /* Button rows wrap instead of overflowing */
  .d-flex.gap-2:not(.flex-nowrap),
  .d-flex.gap-3:not(.flex-nowrap) {
    flex-wrap: wrap;
  }
}