/* ================================================================
   THE OFFER — DESIGN SYSTEM 2026 EDITION
   Unique Premium UI: Midnight Sidebar + Glassmorphism Header
   + Gradient Stat Cards + Modern Typography
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  /* Brand Colors — TheOffer.in Electric Royal Blue & Cyan */
  --c-primary:      #0066FF;
  --c-primary-2:    #0052cc;
  --c-primary-3:    #003d99;
  --c-primary-glow: rgba(0, 102, 255, 0.35);
  --c-primary-soft: #eff6ff;

  /* Sidebar */
  --sb-bg:          #ffffff;
  --sb-bg-2:        #f8fafc;
  --sb-border:      #f1f5f9;
  --sb-text:        #334155;
  --sb-text-active: #ffffff;
  --sb-item-hover:  #f8fafc;
  --sb-item-active-from: #3b82f6;
  --sb-item-active-to:   #2563eb;
  --sb-width: 270px;

  /* Page */
  --bg-page:        #f1f5f9;
  --bg-card:        #ffffff;

  /* Header */
  --hdr-bg:         rgba(255,255,255,0.92);
  --hdr-border:     rgba(220,224,235,0.9);

  /* Text */
  --t-dark:         #0f172a;
  --t-body:         #334155;
  --t-muted:        #64748b;
  --t-light:        #94a3b8;

  /* Status Colors */
  --c-success:      #10b981;
  --c-success-s:    #dcfce7;
  --c-danger:       #ef4444;
  --c-danger-s:     #fee2e2;
  --c-warning:      #f59e0b;
  --c-warning-s:    #fef3c7;
  --c-info:         #06b6d4;
  --c-info-s:       #cffafe;

  /* Shadows */
  --sh-xs: 0 1px 3px rgba(0,0,0,0.06);
  --sh-sm: 0 2px 8px rgba(0,0,0,0.07);
  --sh-md: 0 8px 28px rgba(0, 102, 255, 0.1), 0 2px 8px rgba(0,0,0,0.06);
  --sh-lg: 0 20px 60px rgba(0, 102, 255, 0.16), 0 6px 20px rgba(0,0,0,0.08);
  --sh-glow: 0 0 28px rgba(0, 102, 255, 0.4), 0 4px 14px rgba(0, 102, 255, 0.2);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* Transition */
  --ease: all 0.25s cubic-bezier(0.4,0,0.2,1);
  --ease-spring: all 0.35s cubic-bezier(0.34,1.56,0.64,1);

  /* BS Overrides */
  --bs-primary: #0066FF;
  --bs-primary-rgb: 0, 102, 255;
  --bs-link-color: #0066FF;
  --bs-link-hover-color: #0052cc;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body, h1,h2,h3,h4,h5,h6,
.sidebar-link,.fw-bold,.hide-menu,.nav-small-cap,
span,p,div,table,th,td,a,button,input,select,textarea {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
}

body {
  background: var(--bg-page) !important;
  color: var(--t-body) !important;
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,.body-wrapper,#main-wrapper,.page-wrapper,
.text-bg-light,.body-wrapper-inner,.container-fluid {
  background: var(--bg-page) !important;
}

a { color: var(--c-primary); text-decoration: none; transition: var(--ease); }
a:hover { color: var(--c-primary-2); }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,92,252,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-primary); }

/* ================================================================
   ██████╗  ██████╗  █████╗ ██████╗  ██████╗ █████╗ ██████╗
   ███════╝ ██╔══██╗██╔══██╗██╔══██╗██╔════╝██╔══██╗██╔══██╗
   ███████╗ ██║  ██║███████║██████╔╝ ╚═════╗ ███████║██████╔╝
   ╚════██║ ██║  ██║██╔══██║██╔══██╗██║    ██╔══██║██╔══██╗
   ██████╔╝ ██████╔╝██║  ██║██║  ██║╚██████╗██║  ██║██║  ██║
   SIDEBAR — MIDNIGHT DESIGN
================================================================ */
.left-sidebar {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-border) !important;
  box-shadow: 4px 0 25px rgba(15, 23, 42, 0.03) !important;
  width: var(--sb-width) !important;
  position: relative;
}

/* Brand Logo area */
.brand-logo {
  padding: 20px 20px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative;
  z-index: 1;
}

.brand-logo img {
  max-height: 38px !important;
  max-width: 160px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  border-radius: 4px;
}

/* Fallback brand text styling - shown when no logo */
.brand-logo .logo-img {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.5px;
}

#sidebarCollapse {
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: var(--ease);
}
#sidebarCollapse:hover { background: rgba(124,92,252,0.35); border-color: rgba(124,92,252,0.6); }
#sidebarCollapse i { color: #ffffff !important; font-size: 16px !important; }

/* Nav section caps / Section Titles */
.nav-small-cap {
  padding: 22px 20px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative;
  z-index: 1;
}
.nav-small-cap::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(167,139,250,0.35), rgba(255,255,255,0.04));
}
.nav-small-cap .nav-small-cap-icon { display: none !important; }
.nav-small-cap .hide-menu {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #a78bfa !important; /* Vibrant bright lilac heading */
  white-space: nowrap;
}

/* Nav sidebar list */
#sidebarnav {
  padding: 8px 0 20px !important;
  position: relative;
  z-index: 1;
}

/* Individual sidebar link */
.sidebar-link {
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  margin: 3px 12px !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #e2e8f0 !important; /* Crisp, bright and highly visible */
  gap: 12px !important;
  transition: var(--ease) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  position: relative;
}

.sidebar-link .hide-menu {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  transition: var(--ease) !important;
  white-space: nowrap;
}

/* Icon wrapper in sidebar */
.sidebar-link i {
  width: 36px !important;
  height: 36px !important;
  background: rgba(255,255,255,0.08) !important;
  color: #cbd5e1 !important;
  border-radius: var(--r-xs) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  transition: var(--ease) !important;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Active sidebar item */
.sidebar-nav ul .sidebar-item.selected > .sidebar-link,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active,
.sidebar-nav ul .sidebar-item > .sidebar-link.active {
  background: linear-gradient(135deg, #7c5cfc 0%, #6344e8 100%) !important;
  color: #ffffff !important;
  border-color: rgba(167,139,250,0.5) !important;
  box-shadow: 0 6px 24px rgba(124,92,252,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  font-weight: 700 !important;
}

.sidebar-nav ul .sidebar-item.selected > .sidebar-link .hide-menu,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active .hide-menu,
.sidebar-nav ul .sidebar-item > .sidebar-link.active .hide-menu {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Left accent bar on active item */
.sidebar-nav ul .sidebar-item.selected > .sidebar-link::before,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active::before,
.sidebar-nav ul .sidebar-item > .sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3.5px; height: 26px;
  background: linear-gradient(180deg, #c4b5fd, #7c5cfc);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px rgba(124,92,252,1);
}

.sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active i,
.sidebar-nav ul .sidebar-item > .sidebar-link.active i {
  background: rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.3) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
}

/* Hover sidebar item */
.sidebar-link:hover {
  background: rgba(124,92,252,0.2) !important;
  color: #ffffff !important;
  border-color: rgba(124,92,252,0.35) !important;
  transform: translateX(3px) !important;
}
.sidebar-link:hover .hide-menu {
  color: #ffffff !important;
}
.sidebar-link:hover i {
  background: #7c5cfc !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(124,92,252,0.4) !important;
}

/* HR divider in sidebar */
.left-sidebar hr {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  margin: 8px 20px !important;
  opacity: 1 !important;
}

/* Submenu items */
.first-level { padding-left: 4px; }
.first-level .sidebar-item .sidebar-link {
  padding: 8px 16px 8px 22px !important;
  font-size: 13.5px !important;
  background: transparent !important;
  margin: 2px 12px 2px 24px !important;
  gap: 10px !important;
  color: #cbd5e1 !important;
  border: none !important;
}
.first-level .sidebar-item .sidebar-link .hide-menu {
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}
.first-level .sidebar-item .sidebar-link i {
  width: 8px !important; height: 8px !important;
  background: rgba(255,255,255,0.3) !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: none !important;
  border: none !important;
}
.first-level .sidebar-item .sidebar-link::before { display: none !important; }
.first-level .sidebar-item .sidebar-link.active {
  color: #c4b5fd !important;
  font-weight: 700 !important;
  background: rgba(124,92,252,0.18) !important;
  border-radius: var(--r-xs) !important;
}
.first-level .sidebar-item .sidebar-link.active .hide-menu {
  color: #c4b5fd !important;
  font-weight: 700 !important;
}
.first-level .sidebar-item .sidebar-link.active i { background: #a78bfa !important; box-shadow: 0 0 8px #a78bfa !important; }
.first-level .sidebar-item .sidebar-link:hover {
  color: #ffffff !important;
  background: rgba(124,92,252,0.15) !important;
  border-radius: var(--r-xs) !important;
  transform: translateX(3px) !important;
}
.first-level .sidebar-item .sidebar-link:hover .hide-menu { color: #ffffff !important; }
.first-level .sidebar-item .sidebar-link:hover i { background: #a78bfa !important; }
.has-arrow::after { border-color: rgba(255,255,255,0.45) !important; }

/* Sidebar scroll area */
.scroll-sidebar { overflow-y: auto; overflow-x: hidden; height: calc(100vh - 75px); }

/* ================================================================
   HEADER / TOPBAR — GLASSMORPHISM STYLE
================================================================ */
.app-header {
  background: var(--hdr-bg) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--hdr-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 4px 20px rgba(0,0,0,0.05) !important;
}

.app-header .navbar { padding: 0 24px !important; min-height: 62px; }

/* Hamburger toggle */
.app-header .sidebartoggler {
  width: 38px !important; height: 38px !important;
  background: #f4f5fb !important;
  border: 1px solid #e8eaf0 !important;
  border-radius: var(--r-xs) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: var(--t-muted) !important;
  transition: var(--ease) !important;
  font-size: 18px !important;
}
.app-header .sidebartoggler:hover {
  background: var(--c-primary-soft) !important;
  border-color: rgba(124,92,252,0.3) !important;
  color: var(--c-primary) !important;
}

/* Nav icon buttons */
.app-header .nav-link {
  color: var(--t-muted) !important;
  width: 38px !important; height: 38px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: var(--r-xs) !important;
  font-size: 20px !important;
  transition: var(--ease) !important;
  background: transparent !important;
  position: relative;
}
.app-header .nav-link:hover {
  background: var(--c-primary-soft) !important;
  color: var(--c-primary) !important;
}

/* Notification dot */
.notification {
  width: 9px !important; height: 9px !important;
  background: linear-gradient(135deg, #ff6b6b, #ee5a52) !important;
  border: 2px solid white !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px rgba(255,107,107,0.25) !important;
}

/* Dropdown menus */
.dropdown-menu {
  border: 1px solid #e8eaf0 !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 6px !important;
  background: #fff !important;
  animation: dropIn 0.18s ease forwards;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
  border-radius: var(--r-xs) !important;
  font-size: 13.5px !important;
  padding: 9px 12px !important;
  color: var(--t-dark) !important;
  transition: var(--ease) !important;
  font-weight: 500 !important;
}
.dropdown-item:hover {
  background: var(--c-primary-soft) !important;
  color: var(--c-primary) !important;
}

/* Agent code chip */
.agent-code-pill {
  background: linear-gradient(135deg, rgba(124,92,252,0.08), rgba(99,68,232,0.08));
  border: 1.5px solid rgba(124,92,252,0.2);
  border-radius: 50px;
  padding: 5px 14px;
  display: flex; align-items: center; gap: 8px;
  transition: var(--ease);
}
.agent-code-pill:hover {
  border-color: rgba(124,92,252,0.45);
  background: rgba(124,92,252,0.1);
}
.agent-code-pill .code-label {
  font-size: 9.5px; font-weight: 700;
  color: var(--c-primary); text-transform: uppercase; letter-spacing: 0.08em;
}
.agent-code-pill .code-value {
  font-size: 13.5px; font-weight: 800;
  color: var(--t-dark); letter-spacing: 0.5px;
  font-family: 'SF Mono','Fira Code','Courier New',monospace !important;
}

/* Profile avatar */
.profile-avatar {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(124,92,252,0.25) !important;
  box-shadow: 0 0 0 3px rgba(124,92,252,0.1) !important;
  object-fit: cover !important;
  transition: var(--ease) !important;
}
.profile-avatar:hover {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 4px rgba(124,92,252,0.2) !important;
}

/* ================================================================
   MAIN CONTENT AREA
================================================================ */
.body-wrapper-inner { padding: 24px !important; }
@media (max-width: 768px) { .body-wrapper-inner { padding: 14px !important; } }

/* ================================================================
   CARDS
================================================================ */
.card {
  border: 1px solid rgba(220,224,235,0.8);
  box-shadow: var(--sh-xs);
  border-radius: var(--r-md) !important;
  background: var(--bg-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* ================================================================
   PAGE HERO BANNER (THEME ROYAL ELECTRIC BLUE)
================================================================ */
.page-hero-banner,
.card.page-hero-banner {
  background: linear-gradient(135deg, #0b0f19 0%, #0f172a 50%, #0052cc 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(0, 82, 204, 0.18) !important;
  position: relative !important;
  overflow: hidden !important;
}
.page-hero-banner h3,
.page-hero-banner .hero-title {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}
.page-hero-banner p,
.page-hero-banner .hero-desc {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13px !important;
}
.page-hero-banner .badge,
.page-hero-banner .hero-badge {
  background: rgba(0, 102, 255, 0.35) !important;
  border: 1px solid rgba(0, 198, 255, 0.5) !important;
  color: #ffffff !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid #f0f1f8 !important;
  padding: 18px 22px 16px !important;
}
.card-body { padding: 22px !important; }
.card-title { font-size: 15px !important; font-weight: 700 !important; color: var(--t-dark) !important; margin-bottom: 0 !important; }
.rounded-4 { border-radius: var(--r-md) !important; }

/* ================================================================
   UNIQUE STAT CARDS — GRADIENT STYLE 2026
================================================================ */
.card.kpi-card {
  border-radius: 18px !important;
  border: none !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.card.kpi-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--sh-lg) !important;
}
.card.kpi-card .card-body { padding: 24px !important; }

/* Gradient variants */
.card.kpi-violet  { background: linear-gradient(135deg, #7c5cfc 0%, #6344e8 100%) !important; color: #fff !important; }
.card.kpi-emerald { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #fff !important; }
.card.kpi-amber   { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #fff !important; }
.card.kpi-rose    { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important; color: #fff !important; }
.card.kpi-sky     { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important; color: #fff !important; }
.card.kpi-indigo  { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important; color: #fff !important; }

/* KPI card inner elements */
.card.kpi-card .kpi-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.7) !important;
  margin-bottom: 6px !important;
}
.card.kpi-card .kpi-value {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  letter-spacing: -1px;
  margin-bottom: 4px !important;
}
.card.kpi-card .kpi-sub {
  font-size: 12px !important;
  color: rgba(255,255,255,0.65) !important;
  font-weight: 500 !important;
}
.card.kpi-card .kpi-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.9);
  font-size: 22px;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.kpi-card::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: -15px; right: 30px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}

/* ================================================================
   WELCOME BANNER — UNIQUE 2026 MESH GRADIENT
================================================================ */
.card.welcome-banner {
  background: linear-gradient(135deg, #0b0a1a 0%, #1e1b4b 40%, #7c5cfc 100%) !important;
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 12px 36px rgba(15,10,40,0.3) !important;
  color: #ffffff !important;
}
.card.welcome-banner .card-body {
  padding: 30px 34px !important;
  position: relative !important;
  z-index: 2 !important;
}
.card.welcome-banner h2, .card.welcome-banner h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
}
.card.welcome-banner p {
  color: rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 576px) { .welcome-banner .card-body { padding: 20px !important; } }

/* ================================================================
   BUTTONS
================================================================ */
.btn {
  font-weight: 600 !important; font-size: 13.5px !important;
  border-radius: var(--r-sm) !important; transition: var(--ease) !important;
  display: inline-flex !important; align-items: center !important; gap: 6px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2)) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px var(--c-primary-glow) !important;
  padding: 9px 22px !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: linear-gradient(135deg, var(--c-primary-2), var(--c-primary-3)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px var(--c-primary-glow) !important;
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--c-primary) !important;
  border: 1.5px solid var(--c-primary) !important;
  background: transparent !important; padding: 8px 20px !important;
}
.btn-outline-primary:hover {
  background: var(--c-primary) !important; color: #fff !important;
  transform: translateY(-1px) !important;
}
.btn-teal, .btn-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.3) !important; padding: 9px 22px !important;
}
.btn-teal:hover, .btn-success:hover {
  transform: translateY(-1px) !important; color: #fff !important;
  box-shadow: 0 8px 22px rgba(16,185,129,0.42) !important;
}
.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(239,68,68,0.3) !important;
}
.btn-danger:hover { transform: translateY(-1px) !important; color: #fff !important; }
.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(245,158,11,0.3) !important;
}
.btn-warning:hover { color: #fff !important; transform: translateY(-1px) !important; }
.btn-info {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  border: none !important; color: #fff !important;
}
.btn-light {
  background: #f4f5fb !important; border: 1.5px solid #e8eaf0 !important;
  color: var(--t-dark) !important;
}
.btn-light:hover {
  background: var(--c-primary-soft) !important; color: var(--c-primary) !important;
  border-color: rgba(124,92,252,0.3) !important;
}
.btn-outline-danger {
  color: var(--c-danger) !important; border: 1.5px solid var(--c-danger) !important; background: transparent !important;
}
.btn-outline-danger:hover { background: var(--c-danger) !important; color: #fff !important; }
.btn-sm  { padding: 6px 14px !important; font-size: 12px !important; }
.btn-xs  { padding: 4px 10px !important; font-size: 11px !important; }
.btn-lg  { padding: 12px 28px !important; font-size: 15px !important; }
.rounded-pill { border-radius: 50rem !important; }

/* ================================================================
   FORMS
================================================================ */
.form-control, .form-select {
  border-radius: var(--r-sm) !important;
  border: 1.5px solid #dde1ed !important;
  padding: 10px 14px !important; font-size: 13.5px !important;
  background: #fafbff !important; color: var(--t-dark) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,92,252,0.12) !important;
  background: #fff !important; outline: none !important;
}
.form-label { font-weight: 600 !important; font-size: 13px !important; color: var(--t-dark) !important; margin-bottom: 6px !important; }
.form-check-input:checked { background-color: var(--c-primary) !important; border-color: var(--c-primary) !important; }
.input-group .form-control:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm) !important; }
.input-group .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }

/* ================================================================
   BADGES
================================================================ */
.badge { font-weight: 600 !important; font-size: 11px !important; padding: 4px 10px !important; border-radius: 50px !important; letter-spacing: 0.02em; }
.bg-light-primary, .bg-primary-subtle { background: rgba(124,92,252,0.1) !important; color: var(--c-primary) !important; }
.bg-light-success, .bg-success-subtle { background: rgba(34,197,94,0.1) !important; color: #16a34a !important; }
.bg-light-danger,  .bg-danger-subtle  { background: rgba(239,68,68,0.1) !important;  color: #dc2626 !important; }
.bg-light-warning, .bg-warning-subtle { background: rgba(245,158,11,0.1) !important; color: #b45309 !important; }
.bg-light-info,    .bg-info-subtle    { background: rgba(6,182,212,0.1) !important;   color: #0891b2 !important; }

/* ================================================================
   ALERTS
================================================================ */
.alert { border-radius: var(--r-md) !important; border: none !important; font-size: 13.5px !important; padding: 14px 18px !important; }
.alert-primary { background: rgba(124,92,252,0.09) !important; color: var(--c-primary-3) !important; border-left: 4px solid var(--c-primary) !important; }
.alert-success { background: rgba(34,197,94,0.09) !important; color: #166534 !important; border-left: 4px solid var(--c-success) !important; }
.alert-danger  { background: rgba(239,68,68,0.09) !important; color: #991b1b !important; border-left: 4px solid var(--c-danger) !important; }
.alert-warning { background: rgba(245,158,11,0.09) !important; color: #92400e !important; border-left: 4px solid var(--c-warning) !important; }
.alert-info    { background: rgba(6,182,212,0.09) !important; color: #0e7490 !important; border-left: 4px solid var(--c-info) !important; }

/* ================================================================
   ULTRA-LUXURY SMART SAAS TABLE ENGINE 2026
   Elevates all tables across all URLs & views with modern aesthetics,
   subtle depth, dynamic hover transitions, sleek typography & badges
================================================================ */

/* 1. Main Table Structure & Reset */
.table,
table.table,
.table-hover,
.table-luxury,
.luxury-table,
.dataTable,
table.dataTable,
#subAffiliatesTable,
#leadsTable,
#analyticsMasterTable,
#campaignsTable,
#responseTable,
#txnTable,
#requestsTable,
#companiesTable,
#agentsTable {
  --bs-table-bg: transparent !important;
  --bs-table-accent-bg: transparent !important;
  --bs-table-striped-bg: #fbfcfe !important;
  --bs-table-hover-bg: #eff6ff !important;
  --bs-table-hover-color: #0f172a !important;
  --bs-table-color: #1e293b !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  color: #0f172a !important;
  background: #ffffff !important;
  margin-bottom: 0 !important;
  font-family: inherit !important;
}

.table > :not(caption) > * > *,
table.table > :not(caption) > * > *,
.table-hover > tbody > tr > *,
#subAffiliatesTable > tbody > tr > * {
  box-shadow: none !important;
}

/* 2. Responsive Table Wrapper Box */
.table-responsive,
.dataTables_wrapper,
.table-scroll-container,
.custom-table-scroll {
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.table-responsive:hover,
.dataTables_wrapper:hover,
.custom-table-scroll:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08) !important;
}

/* 3. Sleek Table Header */
.table thead th,
table.table thead th,
.table-luxury thead th,
.luxury-table thead th,
.dataTable thead th,
table.dataTable thead th,
.table thead.table-light th,
#subAffiliatesTable thead th {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 15px 18px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  user-select: none !important;
}

/* Header subtle rounded pill ends */
.table thead tr th:first-child,
table.table thead tr th:first-child,
.dataTable thead tr th:first-child,
#subAffiliatesTable thead tr th:first-child {
  border-top-left-radius: 14px !important;
}
.table thead tr th:last-child,
table.table thead tr th:last-child,
.dataTable thead tr th:last-child,
#subAffiliatesTable thead tr th:last-child {
  border-top-right-radius: 14px !important;
}

/* 4. Table Body Rows & Cells */
.table tbody td,
table.table tbody td,
.table-luxury tbody td,
.luxury-table tbody td,
.dataTable tbody td,
table.dataTable tbody td,
#subAffiliatesTable tbody td {
  padding: 15px 18px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: #1e293b !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  background: transparent !important;
  transition: all 0.15s ease-in-out !important;
}

.table tbody tr:last-child td,
table.table tbody tr:last-child td,
.dataTable tbody tr:last-child td,
#subAffiliatesTable tbody tr:last-child td {
  border-bottom: none !important;
}

/* Subtle Alternating Row Background (Zebra) */
.table tbody tr:nth-child(even) td,
table.table tbody tr:nth-child(even) td,
.dataTable tbody tr:nth-child(even) td,
#subAffiliatesTable tbody tr:nth-child(even) td {
  background: #fbfcfe !important;
}

/* 5. Dynamic Interactive Row Hover */
.table tbody tr,
table.table tbody tr,
.table-luxury tbody tr,
.luxury-table tbody tr,
.dataTable tbody tr,
table.dataTable tbody tr,
.table-hover > tbody > tr,
#subAffiliatesTable tbody tr {
  transition: all 0.15s ease-in-out !important;
  cursor: default !important;
}

.table tbody tr:hover td,
table.table tbody tr:hover td,
.table-luxury tbody tr:hover td,
.luxury-table tbody tr:hover td,
.dataTable tbody tr:hover td,
table.dataTable tbody tr:hover td,
.table-hover > tbody > tr:hover > *,
#subAffiliatesTable tbody tr:hover td {
  background-color: #eff6ff !important;
  background: #eff6ff !important;
  color: #0f172a !important;
}

.table tbody tr:hover,
table.table tbody tr:hover,
.table-luxury tbody tr:hover,
.luxury-table tbody tr:hover,
.dataTable tbody tr:hover,
table.dataTable tbody tr:hover,
.table-hover > tbody > tr:hover,
#subAffiliatesTable tbody tr:hover {
  box-shadow: inset 4px 0 0 #0066FF, 0 4px 16px rgba(0, 102, 255, 0.08) !important;
  background-color: #eff6ff !important;
}

.table tbody tr:hover td:first-child,
table.table tbody tr:hover td:first-child,
.table-hover > tbody > tr:hover td:first-child,
#subAffiliatesTable tbody tr:hover td:first-child {
  border-left: 4px solid #0066FF !important;
}

/* 6. Smart Status Pills & Glowing Beacon Dots */
.status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  text-transform: capitalize !important;
}
.status-pill.status-active,
.badge-status-active {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}
.status-pill.status-inactive,
.status-pill.status-rejected,
.badge-status-inactive,
.badge-status-rejected {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}
.status-pill.status-pending,
.status-pill.status-paused,
.badge-status-pending {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fde68a !important;
}

.beacon-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}
.beacon-green { background: #10b981 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important; }
.beacon-red   { background: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important; }
.beacon-amber { background: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important; }
.beacon-blue  { background: #0066FF !important; box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25) !important; }

/* 7. Action Icon Buttons inside Tables */
.btn-action-icon,
.btn-act-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  border: 1px solid transparent !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.btn-action-icon:hover,
.btn-act-icon:hover {
  transform: translateY(-2px) scale(1.05) !important;
}
.btn-action-icon:active,
.btn-act-icon:active {
  transform: scale(0.95) !important;
}
.btn-action-links   { background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important; }
.btn-action-preview { background: #f0fdf4 !important; color: #16a34a !important; border-color: #bbf7d0 !important; }
.btn-action-edit    { background: #faf5ff !important; color: #7c3aed !important; border-color: #ddd6fe !important; }
.btn-action-delete  { background: #fef2f2 !important; color: #dc2626 !important; border-color: #fecaca !important; }
.btn-action-view    { background: #f1f5f9 !important; color: #475569 !important; border-color: #e2e8f0 !important; }

.btn-action-links:hover   { background: #2563eb !important; color: #fff !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important; }
.btn-action-preview:hover { background: #16a34a !important; color: #fff !important; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35) !important; }
.btn-action-edit:hover    { background: #7c3aed !important; color: #fff !important; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35) !important; }
.btn-action-delete:hover  { background: #dc2626 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important; }
.btn-action-view:hover    { background: #475569 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(71, 85, 105, 0.35) !important; }

/* 8. Table Avatar & Icon Badges */
.table-icon-box {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}
.table tbody tr:hover .table-icon-box {
  transform: scale(1.08) !important;
}

/* 9. Offer ID & Code Badges (Click to copy pill) */
.offer-id-badge,
.table-code-badge {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  font-family: 'SF Mono', 'Fira Code', Menlo, monospace !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.offer-id-badge:hover,
.table-code-badge:hover {
  background: #eff6ff !important;
  color: #0066FF !important;
  border-color: #93c5fd !important;
  transform: translateY(-1px) !important;
}

/* 10. DataTables Filter, Length & Pagination Controls */
.dataTables_wrapper {
  padding: 12px 16px !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 14px !important;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.dataTables_wrapper .dataTables_filter input {
  height: 38px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  background: #ffffff !important;
  color: #0f172a !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #0066FF !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.14) !important;
}
.dataTables_wrapper .dataTables_length select {
  height: 38px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  outline: none !important;
}
.dataTables_wrapper .dataTables_info {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  padding-top: 14px !important;
}
.dataTables_wrapper .dataTables_paginate {
  padding-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 6px 12px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #475569 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: #eff6ff !important;
  color: #0066FF !important;
  border-color: #93c5fd !important;
  transform: translateY(-1px) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active {
  background: linear-gradient(135deg, #0066FF 0%, #0052cc 100%) !important;
  color: #ffffff !important;
  border-color: #0066FF !important;
  box-shadow: 0 3px 10px rgba(0, 102, 255, 0.3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ================================================================
   COLORS / UTILITIES
================================================================ */
.text-primary   { color: var(--c-primary)  !important; }
.text-success   { color: var(--c-success)  !important; }
.text-danger    { color: var(--c-danger)   !important; }
.text-warning   { color: var(--c-warning)  !important; }
.text-info      { color: var(--c-info)     !important; }
.text-muted     { color: var(--t-muted)    !important; }
.text-teal      { color: var(--c-primary)  !important; }
.border-teal    { border-color: var(--c-primary) !important; }
.bg-teal        { background: var(--c-primary)   !important; }
.bg-light-teal  { background: var(--c-primary-soft) !important; color: var(--c-primary-3) !important; }
.bg-gradient-primary { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2)) !important; }
a.text-teal:hover { color: var(--c-primary-2) !important; }

/* ================================================================
   QUICK ACTION BUTTONS (Dashboard)
================================================================ */
.quick-action-btn {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  background: #f8f7ff !important; border: 1.5px solid #ece9fa !important;
  color: var(--t-dark) !important; border-radius: var(--r-sm) !important;
  padding: 12px 16px !important; font-weight: 600 !important;
  font-size: 13.5px !important; transition: var(--ease) !important;
  text-decoration: none !important; width: 100%;
}
.quick-action-btn:hover {
  background: var(--c-primary-soft) !important;
  border-color: rgba(124,92,252,0.35) !important;
  color: var(--c-primary) !important;
  transform: translateX(3px) !important;
}
.quick-action-btn.primary-action {
  background: linear-gradient(135deg, rgba(124,92,252,0.08), rgba(99,68,232,0.1)) !important;
  border-color: rgba(124,92,252,0.2) !important;
  color: var(--c-primary) !important;
}

/* ================================================================
   PAGINATION
================================================================ */
.page-link { border-radius: var(--r-xs) !important; color: var(--c-primary) !important; border-color: #e8eaf0 !important; font-size: 13px !important; padding: 7px 13px !important; transition: var(--ease) !important; }
.page-item.active .page-link { background: var(--c-primary) !important; border-color: var(--c-primary) !important; box-shadow: 0 4px 14px var(--c-primary-glow) !important; color: #fff !important; }
.page-link:hover { background: var(--c-primary-soft) !important; color: var(--c-primary) !important; }

/* ================================================================
   MISC
================================================================ */
hr { border-color: #eaecf2 !important; opacity: 1 !important; margin: 10px 0 !important; }
iconify-icon { vertical-align: middle; }
canvas { max-width: 100% !important; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.3s ease forwards; }

/* ================================================================
   BODY WRAPPER, SIDEBAR TOGGLE & FIXED HEADER ENGINE
   Ensures sidebar toggle slides cleanly and main content never goes under
================================================================ */
/* Base Sidebar & Header Transitions */
.left-sidebar {
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1001 !important;
}

.app-header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.body-wrapper {
  position: relative !important;
  min-height: 100vh !important;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Desktop Layout (>= 1200px) ────────────────────────────────── */
@media (min-width: 1200px) {
  /* 1. Standard Expanded Sidebar */
  #main-wrapper[data-sidebartype="full"] .left-sidebar,
  #main-wrapper:not(.sidebar-collapsed):not([data-sidebartype="mini-sidebar"]) .left-sidebar {
    left: 0 !important;
    width: 270px !important;
    transform: none !important;
  }

  #main-wrapper[data-sidebartype="full"] .app-header,
  #main-wrapper:not(.sidebar-collapsed):not([data-sidebartype="mini-sidebar"]) .app-header {
    left: 270px !important;
    width: calc(100% - 270px) !important;
  }

  #main-wrapper[data-sidebartype="full"] .body-wrapper,
  #main-wrapper:not(.sidebar-collapsed):not([data-sidebartype="mini-sidebar"]) .body-wrapper {
    margin-left: 270px !important;
    width: calc(100% - 270px) !important;
  }

  /* 2. Collapsed / Hidden Sidebar (When user clicks toggle button) */
  #main-wrapper.sidebar-collapsed .left-sidebar,
  #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar {
    left: -270px !important;
    transform: translateX(-100%) !important;
    box-shadow: none !important;
  }

  #main-wrapper.sidebar-collapsed .app-header,
  #main-wrapper[data-sidebartype="mini-sidebar"] .app-header {
    left: 0 !important;
    width: 100% !important;
  }

  #main-wrapper.sidebar-collapsed .body-wrapper,
  #main-wrapper[data-sidebartype="mini-sidebar"] .body-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ── Mobile & Tablet Layout (< 1200px) ─────────────────────────── */
@media (max-width: 1199px) {
  .left-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -280px !important;
    width: 270px !important;
    z-index: 1050 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  }

  /* When mobile sidebar is opened */
  #main-wrapper.show-sidebar .left-sidebar {
    left: 0 !important;
  }

  /* Main content & Header: NON-STICKY (Static) on mobile */
  .app-header,
  #main-wrapper .app-header,
  #main-wrapper[data-layout=vertical][data-header-position=fixed] .app-header,
  #main-wrapper[data-header-position=fixed] .app-header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 10 !important;
  }

  .body-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    padding-bottom: 0 !important;
  }

  /* Remove top offset needed for fixed header on mobile */
  .body-wrapper > .container-fluid,
  .body-wrapper > div.container-fluid,
  .body-wrapper > .body-wrapper-inner,
  .body-wrapper > div.body-wrapper-inner {
    padding-top: 14px !important;
    padding-bottom: 24px !important;
  }
}

/* Apply top offset to the immediate content block inside body-wrapper on desktop only */
@media (min-width: 1200px) {
  .body-wrapper > .container-fluid,
  .body-wrapper > div.container-fluid,
  .body-wrapper > .body-wrapper-inner,
  .body-wrapper > div.body-wrapper-inner {
    padding-top: 92px !important;
    padding-bottom: 35px !important;
  }
}

/* Prevent double padding when nested */
.body-wrapper > .container-fluid > .body-wrapper-inner,
.body-wrapper > .body-wrapper-inner > .container-fluid {
  padding-top: 0 !important;
}

/* ================================================================
   SMART ULTRA-RESPONSIVE TABLE SYSTEM & HORIZONTAL SCROLL ENGINE
   Guarantees zero clipping, seamless right-side slide, and smooth scrollbars
================================================================ */
.table-responsive,
.dataTables_wrapper,
.table-scroll-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  position: relative !important;
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
}

/* Make sure container cards do not hard-clip the overflowing table */
.card:has(.table-responsive),
.card:has(.dataTables_wrapper) {
  overflow: visible !important;
}

/* Universal table min-width to preserve all columns formatting */
.table-responsive table.table,
.dataTables_wrapper table.dataTable,
.table-scroll-container table.table {
  width: 100% !important;
  min-width: 950px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Specific page table min-widths for dense data */
#leadsTable,
#subAffiliatesTable,
#analyticsMasterTable,
#txnTable,
#responseTable {
  min-width: 1100px !important;
}

/* Ensure table cells don't wrap awkwardly or get cut */
.table-responsive th,
.table-responsive td,
.dataTables_wrapper th,
.dataTables_wrapper td {
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Premium Gradient Horizontal Scrollbar */
.table-responsive::-webkit-scrollbar,
.dataTables_wrapper::-webkit-scrollbar,
.table-scroll-container::-webkit-scrollbar {
  height: 8px !important;
  width: 8px !important;
}

.table-responsive::-webkit-scrollbar-track,
.dataTables_wrapper::-webkit-scrollbar-track,
.table-scroll-container::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 10px !important;
}

.table-responsive::-webkit-scrollbar-thumb,
.dataTables_wrapper::-webkit-scrollbar-thumb,
.table-scroll-container::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #0066FF, #00C6FF) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0, 102, 255, 0.3) !important;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.dataTables_wrapper::-webkit-scrollbar-thumb:hover,
.table-scroll-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #0052cc, #0099cc) !important;
}

/* Mobile & Tablet Interactive Slide Badge Hint */
.smart-table-badge-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0066FF;
  background: #eff6ff;
  border: 1px dashed #bfdbfe;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* ================================================================
   NATIVE MOBILE WEB APP EXPERIENCE ENGINE (iOS & Android Native Feel)
   Optimizes all pages, cards, headers, tables, buttons & modals (< 1200px)
================================================================ */

/* Completely disable any fixed bottom navigation bar */
.mobile-app-bottom-bar {
  display: none !important;
}

@media (max-width: 1199.98px) {
  .body-wrapper {
    padding-bottom: 20px !important;
  }
}

@media (max-width: 767.98px) {
  /* 1. Global Viewport & Container Spacing */
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .body-wrapper > .container-fluid,
  .body-wrapper > div.container-fluid,
  .body-wrapper > .body-wrapper-inner,
  .body-wrapper > div.body-wrapper-inner {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }

  /* 2. Top App Header on Mobile: Completely static (non-sticky) */
  .app-header,
  header.app-header,
  #main-wrapper .app-header,
  #main-wrapper[data-layout=vertical][data-header-position=fixed] .app-header,
  #main-wrapper[data-header-position=fixed] .app-header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    z-index: 10 !important;
    height: auto !important;
    min-height: 54px !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .app-header .navbar {
    min-height: 54px !important;
    padding: 0 10px !important;
  }

  /* 3. Hero Header Banners on Mobile */
  .hero-finance-card,
  .hero-agents-card,
  .hero-requests-card,
  .hero-master-card,
  .hero-companies-card,
  .hero-postback-card,
  .hero-banner-custom {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .hero-icon-box {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    border-radius: 10px !important;
  }

  .hero-finance-card h3,
  .hero-agents-card h3,
  .hero-requests-card h3,
  .hero-master-card h3,
  .hero-companies-card h3,
  .body-wrapper h3,
  .body-wrapper h4 {
    font-size: 17px !important;
    letter-spacing: -0.3px !important;
    line-height: 1.25 !important;
  }

  .hero-finance-card p,
  .hero-agents-card p,
  .hero-requests-card p,
  .hero-master-card p,
  .hero-companies-card p,
  .body-wrapper p.text-muted {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  /* 4. Page Breadcrumbs & Headers */
  .page-breadcrumb,
  .page-breadcrumb-row {
    margin-bottom: 6px !important;
    font-size: 11px !important;
  }

  /* 5. Mobile Stat & KPI Cards (Native 2-Column Grid) */
  .stat-widget-card,
  .luxury-stat-card {
    padding: 12px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
  }

  .stat-icon-badge {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
  }

  .stat-card-title {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 2px !important;
  }

  .stat-value-text {
    font-size: 18px !important;
    letter-spacing: -0.4px !important;
  }

  .stat-badge-up,
  .stat-badge-down {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }

  /* 6. Action Toolbars & Filter Bars on Mobile */
  .table-toolbar-card,
  .filter-action-card,
  .main-luxury-card,
  .card-body {
    padding: 12px 12px !important;
    border-radius: 16px !important;
  }

  .main-luxury-card > .d-flex.align-items-center.justify-content-between {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .filter-grid-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .filter-input-mobile,
  .filter-ctrl-input,
  #campaignSearchInput,
  #masterSearchInput,
  #leadSearchInput,
  #companySearchInput,
  #reqSearchInput {
    width: 100% !important;
    height: 38px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
  }

  /* 7. Action Buttons Touch Feel */
  .btn,
  button,
  .btn-action-icon,
  .btn-view-resp,
  .btn-export-luxury,
  .btn-export-indigo {
    min-height: 36px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .btn:active,
  button:active,
  .btn-action-icon:active {
    transform: scale(0.96) !important;
  }

  /* 8. Modern Mobile Card Wrapper for Tables */
  .table-responsive {
    border-radius: 12px !important;
    box-shadow: none !important;
    padding-bottom: 2px !important;
    margin-top: 4px !important;
  }

  .table-responsive table.table,
  .dataTables_wrapper table.dataTable,
  .table-scroll-container table.table {
    min-width: 780px !important;
  }

  .table th,
  .table td {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }

  /* 9. DataTables Pagination & Info on Mobile */
  .dataTables_info,
  .dataTables_paginate {
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    width: 100% !important;
    padding-top: 8px !important;
  }

  .pagination {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
  }

  .pagination .page-item .page-link {
    min-width: 30px !important;
    height: 30px !important;
    padding: 3px 6px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* 10. Bottom CTA Banners on Mobile */
  .bottom-cta-banner {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .cta-icon-box,
  .cta-icon-box-green,
  .cta-avatar-shield {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
  }

  /* 11. Modals on Mobile (App Sheet Feel) */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }

  .modal-content {
    border-radius: 18px !important;
    padding: 14px 12px !important;
  }

  /* 12. Smooth Mobile Pull & Momentum Scroll */
  body, html {
    -webkit-overflow-scrolling: touch !important;
    overflow-x: hidden !important;
  }
}

/* ================================================================
   MOBILE APP NATIVE COMPONENT SYSTEM (iOS & Android Look & Feel)
   Active exclusively on mobile viewports (max-width: 767.98px)
================================================================ */
@media (max-width: 767.98px) {
  /* Top App Bar */
  .mobile-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 2px 14px 2px;
    margin-bottom: 8px;
  }
  .mobile-app-header .header-back-title {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mobile-app-header .btn-header-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  }
  .mobile-app-header .header-title-box h4 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.4px;
  }
  .mobile-app-header .header-title-box p {
    font-size: 11.5px !important;
    color: #64748b !important;
    margin: 0 !important;
  }
  .mobile-app-header .header-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    position: relative;
  }
  .mobile-app-header .header-action-btn.btn-primary-circle {
    background: #0066FF;
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.35);
  }

  /* Search & Filter Bar */
  .mobile-search-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  .mobile-search-box {
    flex: 1;
    position: relative;
  }
  .mobile-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
  }
  .mobile-search-box input {
    width: 100%;
    height: 42px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding-left: 38px;
    padding-right: 14px;
    font-size: 13px;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: all 0.2s;
  }
  .mobile-search-box input:focus {
    border-color: #0066FF;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
  }
  .mobile-filter-icon-btn {
    width: 42px;
    height: 42px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    cursor: pointer;
  }

  /* Horizontal Filter Pills */
  .mobile-filter-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 14px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .mobile-filter-pills::-webkit-scrollbar {
    display: none;
  }
  .mobile-filter-pills .filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
  }
  .mobile-filter-pills .filter-pill.active {
    background: #0066FF;
    color: #ffffff;
    border-color: #0066FF;
    box-shadow: 0 3px 10px rgba(0, 102, 255, 0.25);
  }

  /* Native Mobile Card Feed List */
  .mobile-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
  }
  .mobile-app-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #edf2f7;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none !important;
    color: inherit !important;
    position: relative;
  }
  .mobile-app-card:active {
    transform: scale(0.985);
    background: #f8fafc;
  }

  /* Card Avatar circle */
  .mobile-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
  }
  .mobile-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mobile-card-avatar.avatar-purple { background: #ede9fe; color: #7c3aed; }
  .mobile-card-avatar.avatar-blue   { background: #e0f2fe; color: #0284c7; }
  .mobile-card-avatar.avatar-green  { background: #dcfce7; color: #16a34a; }
  .mobile-card-avatar.avatar-amber  { background: #fef3c7; color: #d97706; }
  .mobile-card-avatar.avatar-red    { background: #fee2e2; color: #dc2626; }
  .mobile-card-avatar.avatar-indigo { background: #e0e7ff; color: #4338ca; }
  .mobile-card-avatar.avatar-slate  { background: #f1f5f9; color: #475569; }

  /* Card Content */
  .mobile-card-body {
    flex: 1;
    min-width: 0;
  }
  .mobile-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-card-sub {
    font-size: 11.5px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-card-sub .dot-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #cbd5e1;
    display: inline-block;
  }

  /* Card Right Metadata */
  .mobile-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
  }
  .mobile-card-amount {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -0.2px;
  }
  .mobile-card-amount.text-paid    { color: #10b981; }
  .mobile-card-amount.text-pending { color: #f59e0b; }
  .mobile-card-amount.text-reject  { color: #ef4444; }

  .mobile-badge-pill {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    text-transform: capitalize;
  }
  .mobile-badge-pill.badge-active   { background: #dcfce7; color: #15803d; }
  .mobile-badge-pill.badge-paused   { background: #fef3c7; color: #b45309; }
  .mobile-badge-pill.badge-pending  { background: #fff7ed; color: #c2410c; }
  .mobile-badge-pill.badge-rejected { background: #fee2e2; color: #b91c1c; }
  .mobile-badge-pill.badge-paid     { background: #ecfdf5; color: #047857; }

  .mobile-card-chevron {
    color: #cbd5e1;
    font-size: 14px;
    margin-left: 2px;
  }
  .mobile-card-date {
    font-size: 10px;
    color: #94a3b8;
  }

  /* Micro KPI Cards (e.g. Pending / Active / Rejected 3-box) */
  .mobile-micro-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }
  .mobile-micro-kpi-item {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #edf2f7;
    padding: 10px 8px;
    text-align: center;
  }
  .mobile-micro-kpi-item.kpi-amber  { background: #fffbeb; border-color: #fef3c7; }
  .mobile-micro-kpi-item.kpi-green  { background: #f0fdf4; border-color: #dcfce7; }
  .mobile-micro-kpi-item.kpi-red    { background: #fef2f2; border-color: #fee2e2; }
  
  .mobile-micro-kpi-item .kpi-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }
  .mobile-micro-kpi-item.kpi-amber .kpi-label { color: #d97706; }
  .mobile-micro-kpi-item.kpi-green .kpi-label { color: #16a34a; }
  .mobile-micro-kpi-item.kpi-red   .kpi-label { color: #dc2626; }
  
  .mobile-micro-kpi-item .kpi-val {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
  }

  /* Action Buttons (Approve / Reject) */
  .mobile-action-dual-btns {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
  }
  .mobile-action-dual-btns .btn-mobile-act {
    flex: 1;
    height: 36px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
  }
  .btn-mobile-act.btn-act-reject {
    background: #fee2e2;
    color: #dc2626;
  }
  .btn-mobile-act.btn-act-approve {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
  }

  /* Profile Screen Hero & Tabs */
  .mobile-profile-hero {
    background: linear-gradient(135deg, #1e40af 0%, #0066FF 100%);
    border-radius: 20px;
    padding: 24px 16px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.25);
    position: relative;
  }
  .mobile-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: 3px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    margin: 0 auto 10px;
    position: relative;
  }
  .mobile-profile-avatar .avatar-edit-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    color: #0066FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 1px solid #e2e8f0;
  }
  .mobile-profile-hero h4 {
    color: #ffffff !important;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 2px;
  }
  .mobile-profile-hero p {
    color: rgba(255,255,255,0.8) !important;
    font-size: 12px;
    margin-bottom: 8px;
  }
  .mobile-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(255,255,255,0.18);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.25);
  }

  .mobile-segmented-control {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 14px;
    margin-bottom: 14px;
  }
  .mobile-segmented-control .seg-item {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .mobile-segmented-control .seg-item.active {
    background: #0066FF;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.2);
  }

  /* Form Input Cards for Mobile Profile */
  .mobile-form-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #edf2f7;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  }
  .mobile-form-card label {
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
    display: block;
  }
  .mobile-form-card .input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
  }
  .mobile-form-card .input-with-icon i {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    font-size: 14px;
  }
  .mobile-form-card .input-with-icon input {
    width: 100%;
    height: 42px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding-left: 36px;
    padding-right: 12px;
    font-size: 13px;
    color: #0f172a;
  }

  /* Step Indicator for Create Campaign */
  .mobile-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 8px;
  }
  .mobile-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    flex: 1;
  }
  .mobile-step-item .step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-step-item.active .step-num {
    background: #0066FF;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
  }
  .mobile-step-item .step-title {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
  }
  .mobile-step-item.active .step-title {
    color: #0066FF;
    font-weight: 700;
  }

  /* Empty state box */
  .mobile-empty-state {
    background: #ffffff;
    border-radius: 18px;
    padding: 32px 20px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    margin: 16px 0;
  }
  .mobile-empty-state .empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eff6ff;
    color: #0066FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 12px;
  }
  .mobile-empty-state h5 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
  }
  .mobile-empty-state p {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 16px;
  }
}