/* ============================================================
   modern-ui.css — WhatsApp API Panel (Laravel + Argon/Bootstrap 4)
   ============================================================ */

/* ── 1. CSS Variables / Design Tokens ─────────────────────── */
:root {
  --bg:          #f4f6f9;
  --surface:     #ffffff;
  --border:      #e5e7eb;
  --text:        #111827;
  --muted:       #6b7280;
  --primary:     #5b6af0;
  --primary-h:   #4757e8;
  --success:     #16a34a;
  --success-bg:  #dcfce7;
  --danger:      #dc2626;
  --danger-bg:   #fee2e2;
  --warning:     #d97706;
  --warning-bg:  #fef3c7;
  --info:        #0284c7;
  --info-bg:     #e0f2fe;
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow:      0 2px 8px rgba(0,0,0,.08);
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition:  0.15s ease;
}

/* ── 2. Base Body / Font ───────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--text) !important;
  background: var(--bg) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--text) !important;
}

/* ── 3. Main Content Area — strip excessive padding ────────── */
.main-content {
  padding: 0 !important;
}
.main-content .container-fluid {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
/* Kill Argon's giant spacers */
.pb-5, .pt-5, .pb-6, .pt-6,
.pb-7, .pt-7, .pb-8, .pt-8 {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
.mt-5, .mb-5, .mt-6, .mb-6,
.mt-7, .mb-7, .mt-8, .mb-8 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.container-fluid.mt-lg--6,
.container-fluid.mt--6,
.container-fluid.mt--7,
.container-fluid.mt--8 {
  margin-top: 0 !important;
}
.row.mt-5 { margin-top: 0 !important; }
.col-xl-12.mt-3 { margin-top: 0 !important; }

/* ── 4. Page Header — compact, no big white box ────────────── */
.header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.header-body {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border) !important;
}
.header .container-fluid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-title,
.header h1, .header h2, .header h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
}
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 11px !important;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted) !important; }

/* ── 5. Cards ──────────────────────────────────────────────── */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 16px !important;
}
.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 14px !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.card-body {
  padding: 12px 14px !important;
}
.card-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  padding: 10px 14px !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}
.card-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
  color: var(--text) !important;
}
.card-subtitle {
  font-size: 11px !important;
  color: var(--muted) !important;
}

/* ── 6. DataTables ─────────────────────────────────────────── */
table.dataTable {
  border-collapse: collapse !important;
  width: 100% !important;
}
table.dataTable thead th,
table.dataTable thead td {
  background: #f8f9fa !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  white-space: nowrap !important;
}
table.dataTable tbody td {
  padding: 8px 12px !important;
  font-size: 12px !important;
  color: var(--text) !important;
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle !important;
}
table.dataTable tbody tr:last-child td {
  border-bottom: none !important;
}
table.dataTable tbody tr:hover td {
  background: #f9fafb !important;
}
/* DataTables controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
  font-size: 12px !important;
  color: var(--muted) !important;
  padding: 6px 0 !important;
}
.dataTables_wrapper .dataTables_filter input {
  height: 32px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  outline: none !important;
  box-shadow: none !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  margin-left: 6px !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,106,240,.12) !important;
}
.dataTables_wrapper .dataTables_length select {
  height: 32px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  margin: 0 4px !important;
}
/* Modern pagination */
.dataTables_wrapper .dataTables_paginate {
  padding-top: 8px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  margin: 0 2px !important;
  font-size: 12px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: var(--text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: .4 !important;
  cursor: default !important;
}

/* ── 7. Buttons ────────────────────────────────────────────── */
.btn {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
  line-height: 1.4 !important;
  transition: filter var(--transition), background var(--transition), border-color var(--transition) !important;
  cursor: pointer !important;
}
.btn:hover  { filter: brightness(.93) !important; box-shadow: none !important; }
.btn:focus  { box-shadow: none !important; outline: none !important; }
.btn:active { filter: brightness(.87) !important; box-shadow: none !important; }

.btn-primary   { background: var(--primary)  !important; border-color: var(--primary)  !important; color: #fff !important; }
.btn-success   { background: var(--success)  !important; border-color: var(--success)  !important; color: #fff !important; }
.btn-danger    { background: var(--danger)   !important; border-color: var(--danger)   !important; color: #fff !important; }
.btn-warning   { background: var(--warning)  !important; border-color: var(--warning)  !important; color: #fff !important; }
.btn-info      { background: var(--info)     !important; border-color: var(--info)     !important; color: #fff !important; }
.btn-secondary { background: #6b7280 !important; border-color: #6b7280 !important; color: #fff !important; }
.btn-light     { background: #f3f4f6 !important; border-color: var(--border) !important; color: var(--text) !important; }
.btn-dark      { background: #1f2937 !important; border-color: #1f2937 !important; color: #fff !important; }
.btn-link      { background: transparent !important; border-color: transparent !important; color: var(--primary) !important; padding-left: 0 !important; padding-right: 0 !important; }
.btn-link:hover { filter: none !important; text-decoration: underline !important; }

.btn-outline-primary { background: transparent !important; border-color: var(--primary) !important; color: var(--primary) !important; }
.btn-outline-primary:hover { background: var(--primary) !important; color: #fff !important; filter: none !important; }
.btn-outline-danger  { background: transparent !important; border-color: var(--danger) !important; color: var(--danger) !important; }
.btn-outline-danger:hover  { background: var(--danger) !important; color: #fff !important; filter: none !important; }
.btn-outline-success { background: transparent !important; border-color: var(--success) !important; color: var(--success) !important; }
.btn-outline-success:hover { background: var(--success) !important; color: #fff !important; filter: none !important; }
.btn-outline-secondary { background: transparent !important; border-color: #9ca3af !important; color: var(--muted) !important; }
.btn-outline-secondary:hover { background: #f3f4f6 !important; filter: none !important; }

.btn-sm { padding: 4px 10px !important; font-size: 11px !important; }
.btn-lg { padding: 8px 20px !important; font-size: 14px !important; }

/* ── 8. Badges ─────────────────────────────────────────────── */
.badge {
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  letter-spacing: .03em !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.badge-success, .badge-pill.badge-success { background: var(--success-bg) !important; color: var(--success) !important; }
.badge-danger,  .badge-pill.badge-danger  { background: var(--danger-bg)  !important; color: var(--danger)  !important; }
.badge-warning, .badge-pill.badge-warning { background: var(--warning-bg) !important; color: var(--warning) !important; }
.badge-info,    .badge-pill.badge-info    { background: var(--info-bg)    !important; color: var(--info)    !important; }
.badge-primary, .badge-pill.badge-primary { background: #ede9fe !important; color: var(--primary) !important; }
.badge-secondary,.badge-pill.badge-secondary { background: #f3f4f6 !important; color: var(--muted) !important; }
.badge-dark,    .badge-pill.badge-dark    { background: #1f2937 !important; color: #fff !important; }
.badge-light,   .badge-pill.badge-light   { background: #f9fafb !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.badge-white,   .badge-pill.badge-white   { background: #fff !important; color: var(--text) !important; border: 1px solid var(--border) !important; }

/* ── 9. Forms ──────────────────────────────────────────────── */
.form-control {
  font-family: var(--font) !important;
  font-size: 12px !important;
  height: 32px !important;
  padding: 5px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,106,240,.12) !important;
  outline: none !important;
  background: var(--surface) !important;
}
.form-control::placeholder { color: #9ca3af !important; }
textarea.form-control { height: auto !important; min-height: 72px !important; }
select.form-control { padding-right: 28px !important; }

.form-group { margin-bottom: 12px !important; }
.form-group label,
.form-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin-bottom: 4px !important;
  display: block !important;
}
.input-group .input-group-text {
  font-size: 12px !important;
  padding: 5px 10px !important;
  height: 32px !important;
  background: #f3f4f6 !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: var(--radius-sm) !important;
}
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .form-control:not(:last-child)  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .input-group-append  > .input-group-text { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.custom-select {
  height: 32px !important;
  font-size: 12px !important;
  padding: 5px 28px 5px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.custom-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,106,240,.12) !important;
  outline: none !important;
}

/* ── 10. Modals ────────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
  overflow: hidden !important;
}
.modal-header {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}
.modal-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.modal-body {
  padding: 16px 18px !important;
  font-size: 13px !important;
}
.modal-footer {
  padding: 12px 18px !important;
  border-top: 1px solid var(--border) !important;
  background: var(--surface) !important;
  gap: 8px !important;
}
.modal-backdrop.show { opacity: .4 !important; }
.close {
  font-size: 18px !important;
  color: var(--muted) !important;
  opacity: 1 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
.close:hover { color: var(--text) !important; }

/* ── 11. Alerts ────────────────────────────────────────────── */
.alert {
  font-size: 12px !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  margin-bottom: 12px !important;
}
.alert-success  { background: var(--success-bg) !important; color: #14532d !important; border-color: #bbf7d0 !important; }
.alert-danger   { background: var(--danger-bg)  !important; color: #7f1d1d !important; border-color: #fecaca !important; }
.alert-warning  { background: var(--warning-bg) !important; color: #78350f !important; border-color: #fde68a !important; }
.alert-info     { background: var(--info-bg)    !important; color: #0c4a6e !important; border-color: #bae6fd !important; }
.alert-primary  { background: #ede9fe !important; color: #3730a3 !important; border-color: #c4b5fd !important; }
.alert-secondary{ background: #f3f4f6 !important; color: #374151 !important; border-color: var(--border) !important; }
.alert-dark     { background: #1f2937 !important; color: #f9fafb !important; border-color: #374151 !important; }
.alert-light    { background: #f9fafb !important; color: var(--text) !important; border-color: var(--border) !important; }

/* ── 12. Fieldsets ─────────────────────────────────────────── */
fieldset {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
}
fieldset legend {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 0 6px !important;
  width: auto !important;
  float: none !important;
  margin-bottom: 8px !important;
}

/* ── 13. Nav Tabs ──────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--border) !important;
  gap: 0 !important;
}
.nav-tabs .nav-item { margin-bottom: -2px !important; }
.nav-tabs .nav-link {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  padding: 8px 14px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: color var(--transition), border-color var(--transition) !important;
}
.nav-tabs .nav-link:hover { color: var(--text) !important; border-bottom-color: #d1d5db !important; }
.nav-tabs .nav-link.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  background: transparent !important;
  font-weight: 600 !important;
}
.tab-content { padding-top: 14px !important; }

/* ── 14. Dropdowns ─────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
  padding: 4px !important;
  font-size: 12px !important;
  min-width: 160px !important;
  background: var(--surface) !important;
}
.dropdown-item {
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  transition: background var(--transition) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: #f3f4f6 !important;
  color: var(--text) !important;
}
.dropdown-item.text-danger:hover { background: var(--danger-bg) !important; }
.dropdown-divider { border-color: var(--border) !important; margin: 4px 0 !important; }
.dropdown-header {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--muted) !important;
  padding: 6px 12px 4px !important;
}

/* ── 15. Sidebar nav — no conflicts ────────────────────────── */
.sidenav { z-index: 1040 !important; }
.sidenav .nav-link { font-size: 12px !important; }

/* ── 16. Top Navbar — compact 44px ────────────────────────── */
.navbar-top,
.navbar.navbar-top {
  min-height: 44px !important;
  height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.navbar-top .navbar-brand { font-size: 14px !important; font-weight: 700 !important; }
.navbar-top .nav-link { font-size: 12px !important; padding: 0 10px !important; height: 44px !important; display: flex !important; align-items: center !important; }

/* ── 17. Scrollbar — thin 4px ──────────────────────────────── */
::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: #d1d5db !important; border-radius: 999px !important; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }
* { scrollbar-width: thin !important; scrollbar-color: #d1d5db transparent !important; }

/* ── 18. Modern Table Container ────────────────────────────── */
.modern-table-container {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}
.modern-table-container table {
  margin-bottom: 0 !important;
}

/* ── 19. Table Header Controls ─────────────────────────────── */
.table-header-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}
.table-header-controls .search-input {
  height: 32px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  min-width: 200px !important;
  box-shadow: none !important;
}
.table-header-controls .search-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,106,240,.12) !important;
  outline: none !important;
}
.table-header-controls .controls-left,
.table-header-controls .controls-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── 20. Neo Gradient Buttons ──────────────────────────────── */
.btn-neo {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: filter var(--transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.btn-neo:hover  { filter: brightness(.92) !important; }
.btn-neo:active { filter: brightness(.85) !important; }

.btn-neo-gradient-green {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
  color: #fff !important;
}
.btn-neo-gradient-red {
  background: linear-gradient(135deg, #dc2626 0%, #f87171 100%) !important;
  color: #fff !important;
}
.btn-neo-gradient-blue {
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%) !important;
  color: #fff !important;
}
.btn-neo-gradient-purple {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
  color: #fff !important;
}
.btn-neo-gradient-orange {
  background: linear-gradient(135deg, #ea580c 0%, #fb923c 100%) !important;
  color: #fff !important;
}

/* ── 21. Action Kebab Dropdown ─────────────────────────────── */
.action-kebab-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--muted) !important;
  padding: 3px 7px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background var(--transition), color var(--transition) !important;
  box-shadow: none !important;
}
.action-kebab-btn:hover {
  background: #f3f4f6 !important;
  color: var(--text) !important;
  border-color: #d1d5db !important;
}
.action-kebab-btn:focus { box-shadow: none !important; outline: none !important; }
.action-kebab-btn + .dropdown-menu { min-width: 140px !important; }

/* ── 22. Stat Cards ────────────────────────────────────────── */
.stat-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.stat-card .stat-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}
.stat-card .stat-value {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
}
.stat-card .stat-label {
  font-size: 11px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.stat-card .stat-change {
  font-size: 11px !important;
  font-weight: 500 !important;
}
.stat-card .stat-change.up   { color: var(--success) !important; }
.stat-card .stat-change.down { color: var(--danger)  !important; }

/* ── 23. SweetAlert2 ───────────────────────────────────────── */
.swal2-popup {
  font-family: var(--font) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  font-size: 13px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
}
.swal2-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.swal2-html-container {
  font-size: 13px !important;
  color: var(--muted) !important;
}
.swal2-confirm {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 7px 18px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.swal2-cancel {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 7px 18px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.swal2-icon { margin: 0 auto 12px !important; }

/* ── 24. Selectize ─────────────────────────────────────────── */
.selectize-input {
  font-family: var(--font) !important;
  font-size: 12px !important;
  min-height: 32px !important;
  padding: 4px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
}
.selectize-input.focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,106,240,.12) !important;
  outline: none !important;
}
.selectize-dropdown {
  font-family: var(--font) !important;
  font-size: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
  background: var(--surface) !important;
}
.selectize-dropdown .option {
  padding: 7px 12px !important;
  color: var(--text) !important;
}
.selectize-dropdown .option:hover,
.selectize-dropdown .option.active {
  background: #f3f4f6 !important;
  color: var(--text) !important;
}
.selectize-dropdown .optgroup-header {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--muted) !important;
  padding: 6px 12px 4px !important;
}
.selectize-input .item {
  background: #ede9fe !important;
  color: var(--primary) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* ── 25. Badge Variants (all Bootstrap colors modernized) ──── */
.badge-default   { background: #f3f4f6 !important; color: var(--text) !important; }
.badge-white     { background: #fff !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.badge-neutral   { background: #f3f4f6 !important; color: var(--muted) !important; }
.badge-gradient-primary {
  background: linear-gradient(135deg, var(--primary), #818cf8) !important;
  color: #fff !important;
}
.badge-gradient-success {
  background: linear-gradient(135deg, var(--success), #4ade80) !important;
  color: #fff !important;
}
.badge-gradient-danger {
  background: linear-gradient(135deg, var(--danger), #f87171) !important;
  color: #fff !important;
}
.badge-gradient-warning {
  background: linear-gradient(135deg, var(--warning), #fbbf24) !important;
  color: #fff !important;
}
.badge-gradient-info {
  background: linear-gradient(135deg, var(--info), #38bdf8) !important;
  color: #fff !important;
}

/* ── 26. Alert Variants (all Bootstrap colors modernized) ───── */
.alert-dismissible .close {
  padding: 8px 14px !important;
  top: 0 !important;
  right: 0 !important;
}
.alert ul { margin-bottom: 0 !important; padding-left: 16px !important; }
.alert p  { margin-bottom: 0 !important; }
.alert strong { font-weight: 600 !important; }

/* ── 27. Remove ALL excessive margins ──────────────────────── */
.container-fluid.mt-lg--6 { margin-top: 0 !important; }
.container-fluid.mt-lg--7 { margin-top: 0 !important; }
.container-fluid.mt-lg--8 { margin-top: 0 !important; }
.container-fluid.mt--6    { margin-top: 0 !important; }
.container-fluid.mt--7    { margin-top: 0 !important; }
.container-fluid.mt--8    { margin-top: 0 !important; }
.row.mt-5  { margin-top: 0 !important; }
.row.mt-4  { margin-top: 0 !important; }
.row.mt-3  { margin-top: 0 !important; }
.col-xl-12.mt-3 { margin-top: 0 !important; }
.col-xl-12.mt-4 { margin-top: 0 !important; }
.col-xl-12.mt-5 { margin-top: 0 !important; }
/* Argon header spacer */
.header-body.pb-5 { padding-bottom: 12px !important; }
.header-body.pt-5 { padding-top: 12px !important; }
/* Argon page content spacer */
.page-content { padding-top: 0 !important; }

/* ── 28. TD background white, TH color passthrough ─────────── */
table td { background-color: #fff !important; }
/* Do NOT override th color — let inline styles handle it */
table th { /* intentionally empty — inline styles take precedence */ }

/* ── 29. Responsive Breakpoints ────────────────────────────── */
@media (max-width: 1199.98px) {
  .main-content .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 991.98px) {
  .card-body { padding: 10px 12px !important; }
  .card-header { padding: 10px 12px !important; }
  .stat-card { padding: 12px !important; }
  .table-header-controls { flex-direction: column !important; align-items: flex-start !important; }
  .table-header-controls .search-input { min-width: 100% !important; width: 100% !important; }
}
@media (max-width: 767.98px) {
  body { font-size: 12px !important; }
  .btn { padding: 5px 12px !important; font-size: 11px !important; }
  .card-body { padding: 10px !important; }
  .modal-body { padding: 14px !important; }
  .modal-header { padding: 12px 14px !important; }
  .modal-footer { padding: 10px 14px !important; }
  table.dataTable thead th,
  table.dataTable thead td { font-size: 9px !important; padding: 6px 8px !important; }
  table.dataTable tbody td { padding: 6px 8px !important; font-size: 11px !important; }
  .stat-card .stat-value { font-size: 16px !important; }
}
@media (max-width: 575.98px) {
  .main-content .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .navbar-top { height: auto !important; min-height: 44px !important; }
}

/* ── 30. Misc Utility Overrides ────────────────────────────── */
/* Remove Argon gradient header bg */
.bg-gradient-primary,
.bg-gradient-default,
.bg-gradient-info {
  background: var(--surface) !important;
}
/* Clean list groups */
.list-group-item {
  font-size: 12px !important;
  padding: 8px 14px !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.list-group-item:first-child { border-top-left-radius: var(--radius-sm) !important; border-top-right-radius: var(--radius-sm) !important; }
.list-group-item:last-child  { border-bottom-left-radius: var(--radius-sm) !important; border-bottom-right-radius: var(--radius-sm) !important; }
.list-group-item.active { background: var(--primary) !important; border-color: var(--primary) !important; }

/* Progress bars */
.progress {
  height: 6px !important;
  border-radius: 999px !important;
  background: #f3f4f6 !important;
  overflow: hidden !important;
}
.progress-bar { border-radius: 999px !important; }

/* Tooltips */
.tooltip-inner {
  font-family: var(--font) !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  border-radius: var(--radius-sm) !important;
  background: #1f2937 !important;
}

/* Popovers */
.popover {
  font-family: var(--font) !important;
  font-size: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
.popover-header {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  background: #f9fafb !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.popover-body { padding: 10px 12px !important; font-size: 12px !important; }

/* Pagination (Bootstrap native) */
.pagination { gap: 2px !important; }
.page-link {
  font-size: 12px !important;
  padding: 5px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  transition: background var(--transition) !important;
}
.page-link:hover { background: #f3f4f6 !important; color: var(--text) !important; border-color: #d1d5db !important; }
.page-item.active .page-link { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.page-item.disabled .page-link { opacity: .4 !important; }

/* Spinner */
.spinner-border { width: 1.2rem !important; height: 1.2rem !important; border-width: 2px !important; }
.spinner-grow   { width: 1rem !important; height: 1rem !important; }

/* Code */
code {
  font-size: 11px !important;
  padding: 2px 5px !important;
  background: #f3f4f6 !important;
  border-radius: 4px !important;
  color: #be185d !important;
}
pre {
  font-size: 11px !important;
  background: #f8f9fa !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px !important;
}

/* Ensure no Argon box-shadow on inputs */
.form-control:focus,
.custom-select:focus,
.selectize-input.focus {
  -webkit-box-shadow: 0 0 0 3px rgba(91,106,240,.12) !important;
}

/* Fix Argon's negative margin header trick */
.header ~ .container-fluid,
.header ~ div > .container-fluid {
  margin-top: 0 !important;
}

/* Table responsive wrapper */
.table-responsive {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  overflow-x: auto !important;
}
.table-responsive table { border: none !important; }

/* ============================================================
   PART 3 � Targeted overrides for inline styles & Argon spacers
   ============================================================ */

/* Kill ALL Argon vertical spacers globally */
.pt-lg-6, .pt-lg-7, .pt-lg-8,
.pb-lg-6, .pb-lg-7, .pb-lg-8 { padding-top: 0 !important; padding-bottom: 0 !important; }
.mt-lg-6, .mt-lg-7, .mt-lg-8,
.mb-lg-6, .mb-lg-7, .mb-lg-8 { margin-top: 0 !important; margin-bottom: 0 !important; }
.pt-md-7, .pt-md-8 { padding-top: 0 !important; }
.pb-md-7, .pb-md-8 { padding-bottom: 0 !important; }
.mt-md-8, .mt-sm-4 { margin-top: 0 !important; }
.mb-sm--3 { margin-bottom: 0 !important; }

/* Header area � vendor dashboard */
.header .header-body { padding-top: 8px !important; padding-bottom: 8px !important; }
.header .row.pb-0.pt-3.pt-lg-6 { padding-top: 0 !important; margin-top: 0 !important; }
.header .row.mt-4 { margin-top: 0 !important; }

/* Welcome card � tighten */
.welcome-card { border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; }
.welcome-card .card-body { padding: 14px 16px !important; }
.welcome-card h1 { font-size: 1.1rem !important; }
.welcome-card p  { font-size: 12px !important; margin-bottom: 8px !important; }

/* Stat cards in vendor header � tighter */
.stat-card { padding: 12px 14px !important; border-radius: 8px !important; margin-bottom: 10px !important; }
.stat-card-value { font-size: 22px !important; }
.stat-card-title { font-size: 11px !important; }
.stat-card-icon  { width: 40px !important; height: 40px !important; margin-right: 12px !important; }
.stat-card-icon i { font-size: 18px !important; }

/* Feature cards in vendor header */
.feature-card { padding: 14px !important; border-radius: 8px !important; margin-bottom: 12px !important; }
.feature-title { font-size: 13px !important; margin-bottom: 6px !important; }
.feature-description { font-size: 11px !important; }
.feature-button { padding: 5px 12px !important; font-size: 11px !important; border-radius: 5px !important; }
.feature-icon { width: 36px !important; height: 36px !important; margin-bottom: 8px !important; }
.feature-icon i { font-size: 18px !important; }
.features-row { row-gap: 10px !important; }

/* Graph card */
.graph-card { border-radius: 10px !important; }
.graph-card .graph-card-body { padding: 12px !important; }

/* Double container-fluid in cards.blade.php */
.header .container-fluid .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }

/* td � white background, not gray */
td { background-color: #fff !important; color: #374151 !important; }
td a { color: var(--primary) !important; }

/* th � keep dynamic color from inline style, just fix text */
th { color: #fff !important; font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .05em !important; padding: 8px 12px !important; }

/* Sidebar submenu items � remove   visual gap */
.nav-link-ul { padding-left: 20px !important; }

/* Sidebar icon colors � ensure they show */
.icon-dashboard { color: #60a5fa !important; }
.icon-users     { color: #f472b6 !important; }
.icon-wallet    { color: #a78bfa !important; }
.icon-pages     { color: #fbbf24 !important; }
.icon-globe     { color: #38bdf8 !important; }
.icon-settings  { color: #9ca3af !important; }
.icon-facebook  { color: #60a5fa !important; }
.icon-tools     { color: #9ca3af !important; }
.icon-chat      { color: #4ade80 !important; }
.icon-templates { color: #2dd4bf !important; }
.icon-chatbot   { color: #c084fc !important; }
.icon-campaigns { color: #93c5fd !important; }
.icon-automation{ color: #c084fc !important; }
.icon-agents    { color: #9ca3af !important; }
.icon-plan      { color: #a78bfa !important; }
.icon-integration { color: #4ade80 !important; }
.icon-shopify   { color: #86efac !important; }
.icon-woocommerce { color: #c084fc !important; }

/* Sidebar active link � icons inherit white */
.navbar-vertical .navbar-nav .nav-link.active .icon-dashboard,
.navbar-vertical .navbar-nav .nav-link.active .icon-users,
.navbar-vertical .navbar-nav .nav-link.active .icon-wallet,
.navbar-vertical .navbar-nav .nav-link.active .icon-pages,
.navbar-vertical .navbar-nav .nav-link.active .icon-globe,
.navbar-vertical .navbar-nav .nav-link.active .icon-settings,
.navbar-vertical .navbar-nav .nav-link.active .icon-facebook,
.navbar-vertical .navbar-nav .nav-link.active .icon-tools,
.navbar-vertical .navbar-nav .nav-link.active .icon-chat,
.navbar-vertical .navbar-nav .nav-link.active .icon-templates,
.navbar-vertical .navbar-nav .nav-link.active .icon-chatbot,
.navbar-vertical .navbar-nav .nav-link.active .icon-campaigns,
.navbar-vertical .navbar-nav .nav-link.active .icon-automation,
.navbar-vertical .navbar-nav .nav-link.active .icon-agents,
.navbar-vertical .navbar-nav .nav-link.active .icon-plan,
.navbar-vertical .navbar-nav .nav-link.active .icon-integration,
.navbar-vertical .navbar-nav .nav-link.active .icon-shopify,
.navbar-vertical .navbar-nav .nav-link.active .icon-woocommerce {
  color: rgba(255,255,255,.9) !important;
}

/* Lw-expandable-nav submenu */
.lw-expandable-nav { padding-left: 8px !important; margin-top: 0 !important; }
.lw-expandable-nav .nav-link-ul { margin: 1px 4px !important; }

/* Page title in header partial */
.lw-page-title { font-size: 15px !important; font-weight: 600 !important; color: var(--text) !important; margin: 0 !important; }

/* Main content top padding after navbar */
.main-content > .navbar-top + * { margin-top: 0 !important; }

/* Container padding reset */
.container-fluid { padding-left: 14px !important; padding-right: 14px !important; }

/* Row gutters */
.row { margin-left: -8px !important; margin-right: -8px !important; }
.row > [class*="col-"] { padding-left: 8px !important; padding-right: 8px !important; }

/* Vendor plan alert � compact */
.lw-authenticated-page .container > .row > .col-12.mb-2 { margin-bottom: 8px !important; }
.lw-authenticated-page .container > .row > .col-12.mb-2 .alert { margin-bottom: 0 !important; }

/* Settings card */
.card.shadow { box-shadow: var(--shadow-sm) !important; }

/* Responsive */
@media (max-width: 767px) {
  .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
  .row { margin-left: -6px !important; margin-right: -6px !important; }
  .row > [class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; }
  .stat-card { padding: 10px 12px !important; }
  .stat-card-value { font-size: 18px !important; }
  .feature-card { padding: 12px !important; }
}

/* ============================================================
   AGGRESSIVE OVERRIDES � beats inline styles via specificity
   ============================================================ */

/* Kill ALL Argon spacer padding on header */
.header { padding-top: 0 !important; padding-bottom: 0 !important; min-height: unset !important; }
.header .container-fluid { padding-top: 0 !important; padding-bottom: 0 !important; }
.header .header-body { padding-top: 8px !important; padding-bottom: 8px !important; }
.header .row.pb-0 { padding-bottom: 0 !important; }
.header .row.pt-2 { padding-top: 4px !important; }
.header .row.pt-3 { padding-top: 4px !important; }
.header .row.pt-lg-6 { padding-top: 4px !important; }
.header .row.mt-4 { margin-top: 0 !important; }

/* Welcome card � compact */
.welcome-card { border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; }
.welcome-card .card-body { padding: 12px 16px !important; }
.welcome-card h1 { font-size: 1.1rem !important; margin-bottom: 2px !important; }
.welcome-card p { font-size: 12px !important; margin-bottom: 8px !important; }

/* Stat cards in header � compact */
.header .stat-card { padding: 12px 14px !important; border-radius: 8px !important; margin-bottom: 8px !important; }
.header .stat-card-value { font-size: 22px !important; }
.header .stat-card-title { font-size: 11px !important; }
.header .stat-card-icon { width: 38px !important; height: 38px !important; margin-right: 10px !important; }
.header .stat-card-icon i { font-size: 16px !important; }

/* Feature cards � compact */
.features-row { row-gap: 12px !important; margin-top: 8px !important; }
.feature-card { padding: 14px !important; margin-bottom: 0 !important; border-radius: 8px !important; }
.feature-icon { width: 36px !important; height: 36px !important; margin-bottom: 8px !important; }
.feature-icon i { font-size: 16px !important; }
.feature-title { font-size: 13px !important; margin-bottom: 6px !important; }
.feature-description { font-size: 11px !important; }
.feature-button { padding: 5px 12px !important; font-size: 11px !important; }

/* Graph card � compact */
.graph-card { border-radius: 10px !important; }
.graph-card .graph-card-body { padding: 12px !important; }
.graph-card .graph-header { margin-bottom: 8px !important; }
.graph-card h5 { font-size: 13px !important; }

/* QR card */
.header .card { border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; }

/* Main content top gap */
.main-content > div:first-child { margin-top: 0 !important; }
.lw-authenticated-page .main-content { padding-top: 44px !important; }

/* Vendor plan alert � no giant top margin */
.main-content .container .row .col-12.mb-2 { margin-bottom: 4px !important; }

/* Table cells � white bg, not gray */
td { background-color: #fff !important; color: #111827 !important; }
td a { color: #5b6af0 !important; }

/* th � keep primary color from inline style, just fix text */
th { color: #fff !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .04em !important; padding: 8px 12px !important; }

/* Sidebar � tighter */
.navbar-vertical.navbar-expand-md { max-width: 230px !important; }
.navbar-vertical.navbar-expand-md + .main-content { margin-left: 230px !important; }
.navbar-vertical .navbar-brand { padding: 10px 16px !important; }
.navbar-vertical .navbar-brand-img { max-height: 36px !important; }
.navbar-vertical .navbar-collapse { padding: 0 8px !important; }

/* Top navbar � compact */
#navbar-main { min-height: 44px !important; padding: 0 16px !important; }
#navbar-main .container-fluid { padding: 0 !important; }
#navbar-main .nav-link { padding: 0 10px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; font-size: 12px !important; }
#navbar-main .h4, #navbar-main .h5 { font-size: 12px !important; margin: 0 !important; }

/* Page content padding */
.main-content .container-fluid { padding: 12px 16px !important; }

/* Remove double container padding */
.header .container-fluid .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }

/* Responsive */
@media (max-width: 767px) {
  .navbar-vertical.navbar-expand-md + .main-content { margin-left: 0 !important; }
  .main-content .container-fluid { padding: 8px 10px !important; }
  .welcome-card .card-body { padding: 10px !important; }
  .features-row { row-gap: 8px !important; }
}

/* -- Sidebar � minimal padding ------------------------------- */
#sidenav-main .container-fluid { padding: 0 6px !important; }
#sidenav-main .navbar-brand { padding: 8px 10px !important; margin: 0 !important; }
#sidenav-main .navbar-brand-img,
#sidenav-main .lw-sidebar-logo-normal { max-height: 32px !important; }

/* Nav items */
#sidenav-main .navbar-nav { padding: 4px 0 !important; }
#sidenav-main .navbar-nav .nav-item { margin: 0 !important; }
#sidenav-main .navbar-nav .nav-link {
  padding: 7px 10px !important;
  margin: 1px 4px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  line-height: 1.3 !important;
  border: none !important;
}
#sidenav-main .navbar-nav .nav-link i,
#sidenav-main .navbar-nav .nav-link .fa,
#sidenav-main .navbar-nav .nav-link .fas,
#sidenav-main .navbar-nav .nav-link .far,
#sidenav-main .navbar-nav .nav-link .fab {
  font-size: 13px !important;
  width: 16px !important;
  margin-right: 7px !important;
}

/* Submenu */
#sidenav-main .lw-expandable-nav { padding-left: 6px !important; margin-top: 0 !important; }
#sidenav-main .nav-link-ul {
  padding: 5px 8px 5px 24px !important;
  margin: 1px 2px !important;
  font-size: 12px !important;
  border-radius: 5px !important;
  border: none !important;
}
#sidenav-main .nav-link-ul::before { display: none !important; }

/* Collapse header on mobile */
#sidenav-main .navbar-collapse-header { padding: 8px 10px !important; }

/* Sidebar width */
@media (min-width: 768px) {
  .navbar-vertical.navbar-expand-md { max-width: 210px !important; width: 210px !important; }
  .navbar-vertical.navbar-expand-md + .main-content { margin-left: 210px !important; }
}
/* Users list page */
.mu-page-title{font-size:18px;font-weight:700;color:#111827;margin:0;line-height:1.3}.mu-page-sub{font-size:12px;color:#6b7280;margin:2px 0 0}.mu-table-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.06);overflow:hidden}.mu-avatar{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:8px}.mu-user-link{font-weight:600;color:#111827;font-size:12px;text-decoration:none}.mu-user-link:hover{color:#6366f1;text-decoration:none}.mu-action-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;font-size:12px;border:1px solid #e5e7eb;background:#fff;color:#6b7280;text-decoration:none;transition:all .15s;cursor:pointer}.mu-action-btn:hover{text-decoration:none}.mu-action-login{color:#059669;border-color:#d1fae5;background:#f0fdf4}.mu-action-login:hover{background:#059669;color:#fff;border-color:#059669}.mu-action-sub{color:#7c3aed;border-color:#ede9fe;background:#faf5ff}.mu-action-sub:hover{background:#7c3aed;color:#fff;border-color:#7c3aed}.mu-action-edit{color:#2563eb;border-color:#dbeafe;background:#eff6ff}.mu-action-edit:hover{background:#2563eb;color:#fff;border-color:#2563eb}.mu-action-pwd{color:#d97706;border-color:#fef3c7;background:#fffbeb}.mu-action-pwd:hover{background:#d97706;color:#fff;border-color:#d97706}.mu-action-warn{color:#ea580c;border-color:#ffedd5;background:#fff7ed}.mu-action-warn:hover{background:#ea580c;color:#fff;border-color:#ea580c}.mu-action-danger{color:#dc2626;border-color:#fee2e2;background:#fef2f2}.mu-action-danger:hover{background:#dc2626;color:#fff;border-color:#dc2626}
.lw-auth-page{background:#0f172a!important}.lw-auth-page .main-content{margin-left:0!important;padding:0!important}.lw-auth-page #sidenav-main,.lw-auth-page #navbar-main{display:none!important}.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;position:relative;overflow:hidden;background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%)}.auth-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.auth-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25;animation:blobFloat 8s ease-in-out infinite}.auth-blob-1{width:500px;height:500px;background:#22d571;top:-150px;left:-150px;animation-delay:0s}.auth-blob-2{width:400px;height:400px;background:#6366f1;bottom:-100px;right:-100px;animation-delay:-3s}.auth-blob-3{width:300px;height:300px;background:#0ea5e9;top:40%;left:60%;animation-delay:-5s}@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-20px,15px) scale(.95)}}.auth-card{position:relative;z-index:1;background:rgba(255,255,255,.97);border-radius:20px;padding:32px 28px;width:100%;max-width:420px;box-shadow:0 32px 80px rgba(0,0,0,.4)}.auth-card-wide{max-width:520px}.auth-logo{text-align:center;margin-bottom:20px}.auth-logo img{max-height:48px;max-width:160px;object-fit:contain}.auth-title{font-size:22px!important;font-weight:700!important;color:#111827!important;text-align:center;margin:0 0 4px!important;line-height:1.3!important}.auth-sub{font-size:13px;color:#6b7280;text-align:center;margin:0 0 20px}.auth-demo-row{display:flex;gap:8px;margin-bottom:16px}.auth-demo-btn{flex:1;padding:7px 10px;font-size:11px;font-weight:600;border:1px solid #e5e7eb;border-radius:8px;background:#f9fafb;color:#374151;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:5px}.auth-demo-btn:hover{background:#f3f4f6}.auth-field{margin-bottom:14px}.auth-label{display:block;font-size:11px;font-weight:600;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}.auth-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.auth-label-row .auth-label{margin-bottom:0}.auth-forgot{font-size:11px;color:#6366f1;text-decoration:none}.auth-forgot:hover{text-decoration:underline;color:#4f46e5}.auth-input-wrap{position:relative;display:flex;align-items:center}.auth-input-icon{position:absolute;left:12px;color:#9ca3af;font-size:13px;pointer-events:none;z-index:1}.auth-input{width:100%;height:42px;padding:0 40px 0 36px;font-size:13px;border:1.5px solid #e5e7eb;border-radius:10px;background:#f9fafb;color:#111827;outline:none;transition:border-color .15s,box-shadow .15s,background .15s;box-shadow:none}.auth-input:focus{border-color:#6366f1;background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.12)}.auth-input::placeholder{color:#d1d5db}.auth-input.is-invalid{border-color:#ef4444}.auth-eye{position:absolute;right:10px;background:none;border:none;color:#9ca3af;cursor:pointer;padding:4px;font-size:13px;line-height:1}.auth-eye:hover{color:#374151}.auth-hint{font-size:11px;color:#9ca3af;margin-top:3px;display:block}.auth-remember{margin-bottom:16px}.auth-check-label{display:flex;align-items:center;gap:8px;font-size:12px;color:#374151;cursor:pointer}.auth-checkbox{width:15px;height:15px;accent-color:#6366f1;cursor:pointer}.auth-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.auth-terms{margin-bottom:14px;font-size:12px;color:#374151}.auth-terms a{color:#6366f1;text-decoration:none}.auth-terms a:hover{text-decoration:underline}.auth-submit{display:flex;align-items:center;justify-content:center;width:100%;height:44px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff!important;font-size:14px;font-weight:600;border:none;border-radius:10px;cursor:pointer;transition:filter .15s,transform .15s;text-decoration:none;box-shadow:0 4px 14px rgba(99,102,241,.35)}.auth-submit:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff!important;text-decoration:none}.auth-submit:active{transform:translateY(0);filter:brightness(.96)}.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;font-size:11px;color:#9ca3af}.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#e5e7eb}.auth-social{display:flex;gap:10px;margin-bottom:16px}.auth-social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:40px;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;border:1.5px solid #e5e7eb;transition:background .15s,border-color .15s}.auth-google{background:#fff;color:#374151}.auth-google:hover{background:#f9fafb;color:#374151;text-decoration:none}.auth-facebook{background:#1877f2;color:#fff;border-color:#1877f2}.auth-facebook:hover{background:#166fe5;color:#fff;text-decoration:none}.auth-switch{text-align:center;font-size:12px;color:#6b7280;margin:14px 0 0}.auth-switch a{color:#6366f1;font-weight:600;text-decoration:none}.auth-switch a:hover{text-decoration:underline}.auth-disabled{font-size:13px;color:#374151;text-align:center}@media(max-width:480px){.auth-card{padding:24px 18px;border-radius:16px}.auth-title{font-size:19px!important}.auth-social{flex-direction:column}.auth-row-2{grid-template-columns:1fr}}
.container-fluid.mt-lg--6{margin-top:0!important}.row.mt-3{margin-top:0!important}.row.mt-5{margin-top:0!important}.col-xl-12.mb-3.mt-5{margin-top:0!important}.col-xl-12.mb-3{margin-bottom:10px!important}.d-flex.align-items-center.justify-content-between.flex-nowrap{padding:12px 0 10px!important}.d-flex.align-items-center.justify-content-between.flex-nowrap h1{font-size:16px!important;font-weight:700!important;color:#111827!important;margin:0!important}.d-flex.align-items-center.justify-content-between.flex-nowrap h1 i{font-size:15px!important;margin-right:6px!important}.modern-table-container{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:10px!important;box-shadow:0 1px 4px rgba(0,0,0,.06)!important;overflow:hidden!important}.table-header-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:8px!important;padding:10px 14px!important;background:#f9fafb!important;border-bottom:1px solid #e5e7eb!important}.entries-control{display:flex!important;align-items:center!important;gap:6px!important;font-size:12px!important;color:#6b7280!important}.entries-control label{margin:0!important;font-size:12px!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important;color:#6b7280!important}.entries-select{height:30px!important;padding:3px 8px!important;font-size:12px!important;border:1px solid #e5e7eb!important;border-radius:6px!important;background:#fff!important;color:#111827!important}.entries-text{font-size:12px!important;color:#6b7280!important}.search-control{position:relative!important}.search-input{height:30px!important;padding:4px 10px 4px 28px!important;font-size:12px!important;border:1px solid #e5e7eb!important;border-radius:6px!important;background:#fff!important;color:#111827!important;min-width:180px!important;box-shadow:none!important;outline:none!important}.search-input:focus{border-color:#6366f1!important;box-shadow:0 0 0 3px rgba(99,102,241,.1)!important}.search-icon{position:absolute!important;left:8px!important;top:50%!important;transform:translateY(-50%)!important;color:#9ca3af!important;font-size:11px!important;pointer-events:none!important}.modern-datatable thead th{background:#f8fafc!important;color:#6b7280!important;font-size:10px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;padding:8px 12px!important;border-bottom:1px solid #e5e7eb!important;border-top:none!important;white-space:nowrap!important}.modern-datatable tbody td{padding:8px 12px!important;font-size:12px!important;color:#111827!important;background:#fff!important;border-bottom:1px solid #f3f4f6!important;vertical-align:middle!important}.modern-datatable tbody tr:last-child td{border-bottom:none!important}.modern-datatable tbody tr:hover td{background:#f9fafb!important}.modern-table-container .dataTables_wrapper .dataTables_length,.modern-table-container .dataTables_wrapper .dataTables_filter{display:none!important}.btn-neo{font-size:12px!important;font-weight:600!important;padding:7px 14px!important;border-radius:8px!important;border:none!important;display:inline-flex!important;align-items:center!important;gap:5px!important;transition:filter .15s,transform .15s!important;cursor:pointer!important;text-decoration:none!important;line-height:1.4!important}.btn-neo:hover{filter:brightness(.92)!important;transform:translateY(-1px)!important;text-decoration:none!important}.btn-neo:active{transform:translateY(0)!important}.btn-neo i{font-size:11px!important}.btn-neo-gradient-green{background:linear-gradient(135deg,#22d571 0%,#16a34a 100%)!important;color:#fff!important;box-shadow:0 2px 8px rgba(22,163,74,.25)!important}.btn-neo-gradient-blue{background:linear-gradient(135deg,#60a5fa 0%,#2563eb 100%)!important;color:#fff!important;box-shadow:0 2px 8px rgba(37,99,235,.25)!important}.btn-neo-gradient-ghost{background:#fff!important;color:#16a34a!important;border:1.5px solid #22d571!important;box-shadow:none!important}.btn-neo-gradient-ghost:hover{background:#f0fdf4!important;filter:none!important}.action-kebab-btn{width:28px!important;height:28px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border:1px solid #e5e7eb!important;border-radius:6px!important;background:#fff!important;color:#6b7280!important;font-size:13px!important;cursor:pointer!important;box-shadow:none!important}.action-kebab-btn:hover{background:#f3f4f6!important;color:#111827!important;filter:none!important}.action-dropdown .dropdown-menu{min-width:180px!important;border-radius:8px!important;padding:4px!important}.action-dropdown .dropdown-item{font-size:12px!important;padding:7px 12px!important;border-radius:5px!important}.badge-pill.badge-success,.badge.badge-success{background:#dcfce7!important;color:#15803d!important}.badge-pill.badge-danger,.badge.badge-danger{background:#fee2e2!important;color:#b91c1c!important}.badge-pill.badge-warning,.badge.badge-warning{background:#fef9c3!important;color:#854d0e!important}.badge-pill.badge-info,.badge.badge-info{background:#dbeafe!important;color:#1d4ed8!important}.badge-pill.badge-secondary,.badge.badge-secondary{background:#f3f4f6!important;color:#374151!important}.status-badge{display:inline-flex!important;align-items:center!important;gap:4px!important;padding:3px 8px!important;border-radius:999px!important;font-size:10px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.04em!important;border-left:none!important;box-shadow:none!important}.status-approved{background:#dcfce7!important;color:#15803d!important}.status-rejected{background:#fee2e2!important;color:#b91c1c!important}.action-buttons-container{display:flex!important;align-items:center!important;gap:4px!important}.action-btn{width:28px!important;height:28px!important;border-radius:6px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:11px!important;border:1px solid #e5e7eb!important;background:#fff!important;color:#6b7280!important;text-decoration:none!important;transition:background .12s,color .12s!important;cursor:pointer!important;box-shadow:none!important}.action-btn:hover{text-decoration:none!important}.edit-btn:hover{background:#eff6ff!important;color:#2563eb!important;border-color:#bfdbfe!important}.delete-btn{color:#dc2626!important;border-color:#fecaca!important;background:#fff!important}.delete-btn:hover{background:#fee2e2!important;color:#b91c1c!important}.clone-btn:hover{background:#f0fdf4!important;color:#16a34a!important;border-color:#bbf7d0!important}.table-title-section .table-title{font-size:13px!important;font-weight:600!important;color:#374151!important;margin:0!important}.table-controls{display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important}.table-footer{padding:8px 14px!important;background:#f9fafb!important;border-top:1px solid #e5e7eb!important}.table-info{font-size:11px!important;color:#9ca3af!important}.nav-tabs.mt-1,.nav-tabs.mt-2{margin-top:0!important;margin-left:0!important;border-bottom:2px solid #e5e7eb!important;margin-bottom:12px!important}.nav-tabs .nav-link{font-size:12px!important;padding:7px 14px!important;color:#6b7280!important;border:none!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important;margin-bottom:-2px!important}.nav-tabs .nav-link.active{color:#111827!important;border-bottom-color:#111827!important;font-weight:600!important;background:transparent!important}.px-3.pt-3{padding:8px 14px 0!important}.wf-action-buttons{display:inline-flex!important;gap:4px!important;align-items:center!important;flex-wrap:nowrap!important}.wf-action-btn{display:inline-flex!important;align-items:center!important;gap:4px!important;padding:4px 8px!important;border-radius:6px!important;border:1px solid #e5e7eb!important;background:#fff!important;color:#374151!important;font-size:11px!important;font-weight:500!important;text-decoration:none!important;transition:background .12s!important;cursor:pointer!important}.wf-action-btn:hover{background:#f3f4f6!important;text-decoration:none!important;filter:none!important}.wf-btn-send{color:#16a34a!important;border-color:#bbf7d0!important}.wf-btn-send:hover{background:#f0fdf4!important}.wf-btn-edit{color:#2563eb!important;border-color:#bfdbfe!important}.wf-btn-edit:hover{background:#eff6ff!important}.wf-btn-preview{color:#6b7280!important}.wf-btn-delete{color:#dc2626!important;border-color:#fecaca!important}.wf-btn-delete:hover{background:#fee2e2!important}.modal-footer .btn-primary{background:#111827!important;border-color:#111827!important;color:#fff!important;font-size:12px!important;font-weight:600!important;padding:7px 18px!important;border-radius:7px!important;box-shadow:none!important}.modal-footer .btn-primary:hover{background:#1f2937!important;filter:none!important}.modal-footer .btn-secondary{background:#f3f4f6!important;border-color:#e5e7eb!important;color:#374151!important;font-size:12px!important;font-weight:500!important;padding:7px 16px!important;border-radius:7px!important;box-shadow:none!important}.modal-footer .btn-secondary:hover{background:#e5e7eb!important;filter:none!important}.lw-form-modal-body{padding:16px 18px!important}.lw-form-modal-body fieldset{padding:10px 12px!important;margin-top:10px!important;border-radius:7px!important}.lw-form-modal-body fieldset legend{font-size:10px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:#6b7280!important;padding:0 6px!important}.lw-form-modal-body h5{font-size:11px!important;color:#9ca3af!important;font-weight:400!important;margin-top:3px!important}@media(max-width:767px){.d-flex.align-items-center.justify-content-between.flex-nowrap{flex-wrap:wrap!important;gap:8px!important}.d-flex.align-items-center.justify-content-between.flex-nowrap h1{font-size:14px!important}.table-header-controls{flex-direction:column!important;align-items:flex-start!important}.search-input{min-width:100%!important;width:100%!important}.table-controls{width:100%!important;justify-content:space-between!important}.btn-neo{padding:6px 10px!important;font-size:11px!important}.modern-datatable thead th,.modern-datatable tbody td{padding:7px 8px!important;font-size:11px!important}.wf-action-btn span{display:none!important}.wf-action-btn{padding:4px 6px!important}}
/* Subscription/Plan page */
.vendor-plan-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;margin-bottom:12px}.vendor-plan-card fieldset{border:1px solid #e5e7eb!important;border-radius:8px!important;padding:12px 14px!important;margin-bottom:12px!important;background:#fafafa!important}.vendor-plan-card fieldset legend{font-size:12px!important;font-weight:700!important;color:#374151!important;padding:0 8px!important;background:#fff!important;border:1px solid #e5e7eb!important;border-radius:5px!important}.current-plan label{color:#16a34a!important}.badge-success.ml-2{background:#dcfce7!important;color:#15803d!important}/* Fix inline mt-5 on vendor pages */.col-xl-12.mb-3.mt-5.d-flex{margin-top:0!important}.col-xl-12.mb-3.mt-5{margin-top:0!important}/* Vendor dashboard header cards compact */.header .container-fluid .container-fluid{padding:0!important}.header .row.pb-0.pt-2{padding-top:4px!important;padding-bottom:0!important}/* Fix page title inline color styles */h1[style*='color']{color:#111827!important}/* Fix me-2 (Bootstrap 5 class used in BS4 app) */.me-2{margin-right:.5rem!important}/* Ensure auth page hides sidebar/navbar completely */.lw-auth-page .navbar-vertical,.lw-auth-page .sidenav{display:none!important}.lw-auth-page .main-content{margin-left:0!important;min-height:100vh!important}/* Fix lw-form-card-box on auth pages */.lw-auth-page .lw-form-card-box{display:none!important}/* Vendor settings page tabs */[id*='vendorSettingsNav'] .nav-link-ul,[id*='configurationMenu'] .nav-link-ul{font-size:12px!important;padding:6px 8px 6px 22px!important;margin:1px 2px!important;border-radius:5px!important;border:none!important;color:rgba(255,255,255,.85)!important}.lw-expandable-nav{padding-left:4px!important;margin-top:0!important}/* Fix bot-reply page title */h1.page-title{font-size:16px!important;font-weight:700!important;color:#111827!important;margin:0!important}/* Fix table row hover transform (causes layout shift) */.modern-datatable tbody tr:hover{transform:none!important;box-shadow:none!important}/* Fix table-row-hover injected by JS */.table-row-hover{background:#f9fafb!important;transform:none!important;box-shadow:none!important}/* Responsive mobile fixes */@media(max-width:576px){.auth-card{padding:20px 14px!important;margin:8px!important}.auth-title{font-size:18px!important}.btn-neo{padding:6px 10px!important;font-size:11px!important;border-radius:6px!important}.modern-datatable thead{display:none!important}.modern-datatable tbody td{display:block!important;padding:6px 10px!important;border-bottom:none!important;font-size:12px!important}.modern-datatable tbody td:before{content:attr(data-label);font-weight:600;font-size:10px;color:#6b7280;text-transform:uppercase;display:block;margin-bottom:2px}.modern-datatable tbody tr{border-bottom:1px solid #e5e7eb!important;display:block!important;margin-bottom:4px!important}.table-header-controls{padding:8px 10px!important}.search-input{min-width:140px!important}}

/* ================================================================
   SELECTIZE DROPDOWN FIX — must be absolute positioned to float
   The old app.css sets position:relative;top:0 which breaks it
   ================================================================ */
.selectize-dropdown,
.selectize-dropdown.form-control {
  position: absolute !important;
  top: auto !important;
  z-index: 9999 !important;
  margin-top: 2px !important;
}

/* Also fix the selectize-dropdown-content max-height */
.selectize-dropdown-content {
  max-height: 220px !important;
  overflow-y: auto !important;
}

/* Fix selectize inside modals */
.modal .selectize-dropdown {
  z-index: 10000 !important;
}

/* Fix selectize inside cards/fieldsets */
.card .selectize-dropdown,
fieldset .selectize-dropdown {
  z-index: 9999 !important;
}


/* ================================================================
   LAYOUT FIXES — content cut from top + mobile navbar
   ================================================================ */

/* Desktop: content must clear the fixed top navbar (44px) */
@media (min-width: 768px) {
  .main-content {
    padding-top: 44px !important;
  }
  /* Navbar fixed at top, starts after sidebar */
  #navbar-main {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 250px !important;
    z-index: 1020 !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  /* Sidebar width */
  .navbar-vertical.navbar-expand-md {
    width: 250px !important;
    max-width: 250px !important;
  }
  .navbar-vertical.navbar-expand-md + .main-content {
    margin-left: 250px !important;
  }
  /* Minimized sidebar */
  .lw-minimized-menu #navbar-main {
    left: 60px !important;
  }
}

/* Mobile: navbar fixed at top, content clears it */
@media (max-width: 767px) {
  #navbar-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 12px !important;
    width: 100% !important;
  }
  .main-content {
    padding-top: 56px !important;
    margin-left: 0 !important;
  }
  .main-content .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* Sidebar overlays on mobile */
  #sidenav-main {
    z-index: 1040 !important;
  }
  /* Tables scroll on mobile */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Modals full width on mobile */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
  /* Page header wraps on mobile */
  .d-flex.align-items-center.justify-content-between.flex-nowrap {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Search input full width */
  .search-input {
    min-width: 100% !important;
    width: 100% !important;
  }
  .table-header-controls {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  /* Neo buttons compact */
  .btn-neo {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  /* Auth page */
  .auth-screen {
    padding: 12px !important;
    padding-top: 32px !important;
    align-items: flex-start !important;
  }
  .auth-card {
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }
  .auth-row-2 {
    grid-template-columns: 1fr !important;
  }
  .auth-social {
    flex-direction: column !important;
  }
}

/* ================================================================
   NAVBAR COLOR — ensure it always matches sidebar on all screens
   ================================================================ */

/* The mobile toggler bar (d-md-none) also needs the sidebar color */
.navbar.navbar-top.shadow {
  background: inherit !important;
}

/* Ensure the navbar-top in Argon doesn't override our color */
.main-content .navbar-top {
  background: inherit !important;
}

/* ================================================================
   CONTENT TOP PADDING — extra safety for all pages
   ================================================================ */

/* Some pages use header component which adds extra space */
.header + .container-fluid,
.header + div > .container-fluid {
  padding-top: 12px !important;
}

/* Kill Argon's negative margin trick that pulls content up */
.mt-lg--6, .mt-lg--7, .mt-lg--8,
.mt--6, .mt--7, .mt--8 {
  margin-top: 0 !important;
}

/* Vendor plan alert spacing */
.main-content .container > .row > .col-12.mb-2 {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ================================================================
   SELECTIZE — ensure absolute positioning (already added above
   but repeating with higher specificity for safety)
   ================================================================ */

body .selectize-dropdown,
body .selectize-dropdown.form-control {
  position: absolute !important;
  top: auto !important;
  z-index: 99999 !important;
}


/* ================================================================
   SELECTIZE FINAL FIX — app.css source fixed, this is extra safety
   ================================================================ */

/* Dropdown must float above everything */
.selectize-dropdown,
.selectize-dropdown.form-control {
  position: absolute !important;
  top: auto !important;
  z-index: 99999 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  margin-top: 2px !important;
  padding: 4px !important;
}

/* Options inside dropdown */
.selectize-dropdown .option {
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: #111827 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}
.selectize-dropdown .option:hover,
.selectize-dropdown .option.active {
  background: #f3f4f6 !important;
  color: #111827 !important;
}
.selectize-dropdown .option.selected {
  background: #ede9fe !important;
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

/* Dropdown content scroll */
.selectize-dropdown-content {
  max-height: 240px !important;
  overflow-y: auto !important;
  padding: 2px !important;
}

/* Input box */
.selectize-input {
  padding: 5px 10px !important;
  min-height: 34px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
}
.selectize-input.focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
  outline: none !important;
}
.selectize-input input {
  font-size: 13px !important;
  color: #111827 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: unset !important;
  line-height: 1.4 !important;
}
.selectize-input .item {
  background: #ede9fe !important;
  color: #4f46e5 !important;
  border-radius: 4px !important;
  padding: 1px 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: none !important;
}

/* Optgroup header */
.selectize-dropdown .optgroup-header {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #9ca3af !important;
  padding: 6px 12px 3px !important;
}

/* Selectize control wrapper */
.selectize-control {
  position: relative !important;
}


/* ================================================================
   AUTH PAGE — hide ALL navbars, footers, sidebars completely
   ================================================================ */
.lw-auth-page #sidenav-main,
.lw-auth-page #navbar-main,
.lw-auth-page .navbar-top,
.lw-auth-page .navbar-horizontal,
.lw-auth-page nav.navbar,
.lw-auth-page footer,
.lw-auth-page .footer,
.lw-auth-page .lw-guest-page-container-block ~ footer { display: none !important; }

.lw-auth-page .main-content {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}


.lw-auth-page {
  overflow-x: hidden !important;
}


/* Split layout wrapper fills viewport */
.al-wrap {
  min-height: 100vh !important;
  width: 100% !important;
}


/* ================================================================
   WHATSAPP CHAT — toolbar above chat window
   ================================================================ */

/* Toolbar row */
.lw-chat-toolbar {
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.lw-chat-toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
}

/* Tabs */
.lw-chat-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
}
.lw-chat-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  border-radius: 6px;
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.lw-chat-tab:hover { background: #f3f4f6; color: #111827; text-decoration: none; }
.lw-chat-tab.active {
  background: #111827;
  color: #fff;
  font-weight: 600;
}
.lw-chat-badge {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}

/* Right side controls */
.lw-chat-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Toggle label */
.lw-chat-toggle-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}
.lw-chat-toggle-text { font-size: 11px; color: #6b7280; }

/* Control buttons (filter, report, help) */
.lw-chat-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.lw-chat-ctrl-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #111827;
  text-decoration: none;
}
.lw-chat-label-active {
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}

/* Sidebar header */
.lw-chat-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  margin-bottom: 6px;
}
.lw-chat-sidebar-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

/* Mobile toolbar */
@media (max-width: 767px) {
  .lw-chat-toolbar-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px;
  }
  .lw-chat-tabs { flex-wrap: wrap; }
  .lw-chat-toolbar-right { width: 100%; justify-content: flex-start; }
}


/* ================================================================
   TEMPLATE CREATE/EDIT PAGE — layout + selectize z-index fix
   ================================================================ */

/* Card header — replace heavy green gradient with clean style */
.card-header.bg-gradient-primary,
.card .card-header.bg-gradient-primary {
  background: #fff !important;
  border-bottom: 2px solid #22d571 !important;
  padding: 12px 16px !important;
}
.card-header.bg-gradient-primary h4,
.card-header.bg-gradient-primary .h4,
.card-header.bg-gradient-primary * {
  color: #111827 !important;
}

/* Template name input — remove thick green border */
#lwTemplateNameField,
.card-body input[type="text"].form-control,
.card-body input[type="email"].form-control,
.card-body input[type="number"].form-control {
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  border-radius: 7px !important;
}
#lwTemplateNameField:focus,
.card-body input[type="text"].form-control:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
}

/* Textarea — remove green glow */
.card-body textarea.form-control,
.modern-textarea {
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  border-radius: 7px !important;
}
.card-body textarea.form-control:focus,
.modern-textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
}

/* CRITICAL: selectize dropdown must be above everything on this page */
.card-body .selectize-dropdown,
.card-body .selectize-dropdown.form-control,
.lw-whatsapp-template-create-preview ~ * .selectize-dropdown {
  position: absolute !important;
  z-index: 999999 !important;
  top: auto !important;
}

/* The sticky preview column must NOT create a stacking context above dropdowns */
.lw-whatsapp-template-create-preview {
  z-index: 1 !important;
  position: sticky !important;
  top: 60px !important;
}

/* Ensure the form column has higher z-index than preview */
.card-body .col-md-7,
.card-body .col-md-8,
.card-body form > .row > [class*="col"]:first-child {
  position: relative !important;
  z-index: 10 !important;
}

/* selectize-control wrapper — must be relative for dropdown to position correctly */
.card-body .selectize-control {
  position: relative !important;
  z-index: 10 !important;
}

/* Form group containing selectize — needs overflow visible */
.card-body .form-group {
  overflow: visible !important;
  position: relative !important;
}

/* The entire card body needs overflow visible for dropdowns to escape */
.card-body {
  overflow: visible !important;
}
.card {
  overflow: visible !important;
}

/* Template config card — clean compact look */
.card.shadow-lg {
  box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
}

/* Animate classes — remove delay on inputs (causes layout shift) */
.animate__delay-1s,
.animate__delay-2s,
.animate__delay-3s {
  animation-delay: 0s !important;
}

/* Label styling on template page */
.card-body label.form-label,
.card-body .form-control-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin-bottom: 5px !important;
}

/* Carousel card headers */
.carousel-card .card-header {
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 10px 14px !important;
  color: #374151 !important;
}

/* Button card headers */
.card.shadow-sm.border-0 h3.card-header {
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  color: #374151 !important;
  border-radius: 8px 8px 0 0 !important;
}


/* ================================================================
   GLOBAL LAYOUT FIX — content must always clear fixed navbar
   This block is at the END so it wins over all previous rules
   ================================================================ */

/* Desktop — navbar is 44px fixed */
@media (min-width: 768px) {
  .lw-authenticated-page .main-content,
  .lw-guest-page .main-content,
  .main-content {
    padding-top: 44px !important;
  }

  /* Navbar fixed position */
  #navbar-main {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 250px !important;
    z-index: 1020 !important;
    height: 44px !important;
    min-height: 44px !important;
    width: auto !important;
  }

  /* Sidebar width */
  .navbar-vertical.navbar-expand-md {
    width: 250px !important;
    max-width: 250px !important;
  }
  .navbar-vertical.navbar-expand-md + .main-content {
    margin-left: 250px !important;
  }

  /* Minimized sidebar */
  .lw-minimized-menu .navbar-vertical.navbar-expand-md + .main-content {
    margin-left: 60px !important;
  }
  .lw-minimized-menu #navbar-main {
    left: 60px !important;
  }
}

/* Mobile — navbar is 56px fixed */
@media (max-width: 767px) {
  .lw-authenticated-page .main-content,
  .main-content {
    padding-top: 56px !important;
    margin-left: 0 !important;
  }

  #navbar-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
    height: 56px !important;
    min-height: 56px !important;
  }
}

/* Auth pages — no padding needed, full screen layout */
.lw-auth-page .main-content {
  padding-top: 0 !important;
  margin-left: 0 !important;
}

/* Overflow visible globally so selectize dropdowns always float */
.card,
.card-body,
.form-group,
.selectize-control {
  overflow: visible !important;
}

/* But keep overflow hidden only where needed for visual clipping */
.card.lw-whatsapp-chat-block-container,
.modern-table-container,
.auth-card,
.al-right {
  overflow: hidden !important;
}


/* Selectize dropdown — absolute, highest z-index, everywhere */
.selectize-dropdown,
.selectize-dropdown.form-control {
  position: absolute !important;
  top: auto !important;
  z-index: 999999 !important;
  overflow: visible !important;
}


/* ================================================================
   MODAL FORM — global tightening for all modals
   ================================================================ */

/* Modal body — remove excess top padding */
.modal-body,
.lw-form-modal-body {
  padding: 16px 20px !important;
  background: #fff !important;
}

/* Kill the gray background on modal body */
.modal .modal-body { background: #fff !important; }

/* Form groups inside modals — tight spacing */
.modal .form-group,
.lw-form-modal-body .form-group {
  margin-bottom: 10px !important;
  margin-top: 0 !important;
}

/* Labels inside modals */
.modal label,
.modal .form-control-label,
.lw-form-modal-body label,
.lw-form-modal-body .form-control-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin-bottom: 4px !important;
  display: block !important;
}

/* Inputs inside modals — compact */
.modal .form-control,
.lw-form-modal-body .form-control {
  height: 36px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
}
.modal .form-control:focus,
.lw-form-modal-body .form-control:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
  background: #fff !important;
}
.modal textarea.form-control,
.lw-form-modal-body textarea.form-control {
  height: auto !important;
  min-height: 72px !important;
}

/* Selectize inside modals */
.modal .selectize-input,
.lw-form-modal-body .selectize-input {
  height: 36px !important;
  min-height: 36px !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
}
.modal .selectize-input.focus,
.lw-form-modal-body .selectize-input.focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
}

/* Help text / hints */
.modal small.form-text,
.modal .help-text,
.lw-form-modal-body small.form-text,
.lw-form-modal-body .help-text {
  font-size: 11px !important;
  color: #9ca3af !important;
  margin-top: 3px !important;
  display: block !important;
}

/* Modal header — compact */
.modal-header {
  padding: 14px 20px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  background: #fff !important;
}
.modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}
.modal-header .close {
  font-size: 18px !important;
  color: #9ca3af !important;
  opacity: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  line-height: 1 !important;
}
.modal-header .close:hover { color: #374151 !important; }

/* Modal footer */
.modal-footer {
  padding: 12px 20px !important;
  border-top: 1px solid #f0f0f0 !important;
  background: #fafafa !important;
  gap: 8px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* Modal content */
.modal-content {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
  overflow: hidden !important;
}

/* 2-column grid for modal forms where fields fit side by side */
.lw-form-modal-body .row {
  margin-left: -6px !important;
  margin-right: -6px !important;
}
.lw-form-modal-body .row > [class*="col"] {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Fieldset inside modals */
.modal fieldset,
.lw-form-modal-body fieldset {
  border: 1px solid #f0f0f0 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin-top: 8px !important;
  background: #fafafa !important;
  box-shadow: none !important;
}
.modal fieldset legend,
.lw-form-modal-body fieldset legend {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 0 6px !important;
  width: auto !important;
  background: #fafafa !important;
  border: none !important;
  margin-bottom: 8px !important;
}

/* Switchery inside modals */
.modal .switchery,
.lw-form-modal-body .switchery {
  height: 18px !important;
  width: 36px !important;
}
.modal .switchery > small,
.lw-form-modal-body .switchery > small {
  height: 18px !important;
  width: 18px !important;
}

/* input-group inside modals */
.modal .input-group .input-group-text,
.lw-form-modal-body .input-group .input-group-text {
  height: 36px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  color: #6b7280 !important;
}

/* Remove the gray background from lw-form-modal-body */
.lw-form-modal-body {
  background: #fff !important;
}

/* Overflow visible so selectize dropdowns escape modal */
.modal-body,
.lw-form-modal-body,
.modal .form-group,
.modal .selectize-control {
  overflow: visible !important;
}
.modal-content { overflow: visible !important; }
.modal-dialog { overflow: visible !important; }

/* But modal backdrop clips correctly */
.modal { overflow-x: hidden !important; overflow-y: auto !important; }


/* ================================================================
   SELECTIZE DROPDOWN — DEFINITIVE FINAL FIX
   Must be the LAST rule in this file to win over everything
   ================================================================ */

/* 1. The dropdown itself — always absolute, always on top */
.selectize-dropdown,
.selectize-dropdown.form-control {
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  z-index: 2147483647 !important; /* max possible z-index */
  display: block !important;
  overflow: visible !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  margin-top: 2px !important;
  padding: 4px !important;
  min-width: 100% !important;
}

/* 2. The control wrapper — must be relative so dropdown positions against it */
.selectize-control {
  position: relative !important;
}

/* 3. Every ancestor in the modal chain — overflow MUST be visible */
.modal-dialog,
.modal-content,
.modal-body,
.lw-form-modal-body,
.modal .form-group,
.modal .col-6,
.modal .col-md-6,
.modal .col-sm-6,
.modal .row,
.modal .card-body,
.modal fieldset,
.modal .selectize-control,
.modal .selectize-wrapper {
  overflow: visible !important;
}

/* 4. The modal scroll container stays on .modal, not children */
.modal {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* 5. Dropdown content scroll */
.selectize-dropdown-content {
  max-height: 220px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 6. Options */
.selectize-dropdown .option {
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: #111827 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: background .1s !important;
}
.selectize-dropdown .option:hover,
.selectize-dropdown .option.active {
  background: #f3f4f6 !important;
  color: #111827 !important;
}
.selectize-dropdown .option.selected {
  background: #ede9fe !important;
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

/* 7. Input box */
.selectize-input {
  min-height: 36px !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: text !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
}
.selectize-input.focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
  outline: none !important;
}
.selectize-input input {
  font-size: 13px !important;
  color: #111827 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  min-height: unset !important;
}
.selectize-input .item {
  background: #ede9fe !important;
  color: #4f46e5 !important;
  border-radius: 4px !important;
  padding: 1px 7px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* 8. Also fix on non-modal pages — card/fieldset ancestors */
.card,
.card-body,
.form-group,
.col-6, .col-md-6, .col-sm-6,
.col-4, .col-md-4, .col-sm-4,
.col-xl-4, .col-lg-4,
.row {
  overflow: visible !important;
}

/* 9. Exceptions — these MUST stay overflow:hidden for visual reasons */
.card.lw-whatsapp-chat-block-container { overflow: hidden !important; }
.modern-table-container { overflow: hidden !important; }
.auth-card { overflow: hidden !important; }
.al-left { overflow-y: auto !important; overflow-x: hidden !important; }
.al-right { overflow: hidden !important; }
.lw-contact-list { overflow-y: auto !important; overflow-x: hidden !important; }
.conversation-container { overflow-y: auto !important; overflow-x: hidden !important; }
.table-responsive { overflow-x: auto !important; }


/* ================================================================
   SELECTIZE IN MODAL — FINAL DEFINITIVE FIX
   
   Problem: .modal { overflow: hidden } in argon.min.css clips
   position:absolute children. The dropdown IS absolute but gets
   clipped by the modal's overflow:hidden.
   
   Solution: Make .modal overflow:visible, move scroll to .modal-dialog
   ================================================================ */

/* Allow modal to show overflow (needed for selectize dropdown) */
.modal {
  overflow: visible !important;
}

/* Move the scroll behavior to modal-dialog instead */
.modal-dialog {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 60px) !important;
  margin: 30px auto !important;
}

/* Modal content — visible so dropdown escapes */
.modal-content {
  overflow: visible !important;
}

/* Modal body — visible */
.modal-body,
.lw-form-modal-body {
  overflow: visible !important;
}

/* But modal-dialog needs to scroll when content is tall */
.modal.show {
  overflow: visible !important;
}

/* Backdrop stays behind modal */
.modal-backdrop {
  z-index: 1040 !important;
}

/* Modal itself above backdrop */
.modal {
  z-index: 1050 !important;
}

/* Selectize dropdown above everything inside modal */
.modal .selectize-dropdown,
.modal .selectize-dropdown.form-control {
  position: absolute !important;
  top: auto !important;
  z-index: 9999 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
  min-width: 100% !important;
  overflow: visible !important;
}

/* Selectize control — relative positioning anchor */
.modal .selectize-control,
.lw-form-modal-body .selectize-control {
  position: relative !important;
  overflow: visible !important;
}

/* All form ancestors in modal — overflow visible */
.modal .form-group,
.modal .col-6,
.modal .col-md-6,
.modal .col-sm-6,
.modal .col-12,
.modal .row,
.modal fieldset,
.lw-form-modal-body .form-group,
.lw-form-modal-body .col-6,
.lw-form-modal-body .col-md-6,
.lw-form-modal-body .row,
.lw-form-modal-body fieldset {
  overflow: visible !important;
}


/* ================================================================
   SELECTIZE BODY-APPENDED DROPDOWN
   When dropdown is moved to <body> via JS, it uses position:fixed
   ================================================================ */
body > .selectize-dropdown,
body > .selectize-dropdown.form-control {
  position: fixed !important;
  z-index: 2147483647 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.16) !important;
  padding: 4px !important;
  overflow: visible !important;
}
body > .selectize-dropdown .selectize-dropdown-content {
  max-height: 220px !important;
  overflow-y: auto !important;
}
body > .selectize-dropdown .option {
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: #111827 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}
body > .selectize-dropdown .option:hover,
body > .selectize-dropdown .option.active {
  background: #f3f4f6 !important;
}
body > .selectize-dropdown .option.selected {
  background: #ede9fe !important;
  color: #4f46e5 !important;
  font-weight: 600 !important;
}


/* ================================================================
   SELECTIZE BODY-APPENDED — uses position:fixed via JS patch
   ================================================================ */
body > .selectize-dropdown,
body > .selectize-dropdown.form-control {
  position: fixed !important;
  z-index: 2147483647 !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.16) !important;
  padding: 4px !important;
  margin: 0 !important;
}
body > .selectize-dropdown .selectize-dropdown-content {
  max-height: 220px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body > .selectize-dropdown .option {
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: #111827 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}
body > .selectize-dropdown .option:hover,
body > .selectize-dropdown .option.active {
  background: #f3f4f6 !important;
}
body > .selectize-dropdown .option.selected {
  background: #ede9fe !important;
  color: #4f46e5 !important;
  font-weight: 600 !important;
}
body > .selectize-dropdown .optgroup-header {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #9ca3af !important;
  padding: 6px 12px 3px !important;
}


/* Selectize dropdown — body appended, position:fixed */
body > .selectize-dropdown,
body > .selectize-dropdown.form-control {
  position: fixed !important;
  z-index: 2147483647 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.16) !important;
  padding: 4px !important;
  margin: 0 !important;
}
body > .selectize-dropdown .selectize-dropdown-content {
  max-height: 220px !important;
  overflow-y: auto !important;
}
body > .selectize-dropdown .option {
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: #111827 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}
body > .selectize-dropdown .option:hover,
body > .selectize-dropdown .option.active { background: #f3f4f6 !important; }
body > .selectize-dropdown .option.selected { background: #ede9fe !important; color: #4f46e5 !important; font-weight: 600 !important; }


/* ================================================================
   NATIVE SELECT — styled to match modern UI
   Used as replacement for selectize in modals
   ================================================================ */
.mu-select,
select.mu-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 32px !important;
  cursor: pointer !important;
  height: 36px !important;
  font-size: 13px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 7px !important;
  background-color: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
  width: 100% !important;
}
.mu-select:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
  outline: none !important;
}
.mu-select option { padding: 8px 12px; }


/* ================================================================
   NATIVE SELECT — global styling for all selects
   Replaces selectize everywhere for reliability
   ================================================================ */

/* All selects — native, styled */
select,
select.form-control,
select.lw-form-field,
select.mu-select,
.form-group select,
.modal select,
.card-body select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-color: #fff !important;
  padding: 6px 32px 6px 10px !important;
  height: 36px !important;
  font-size: 13px !important;
  font-family: var(--font, 'Inter', sans-serif) !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: border-color .15s, box-shadow .15s !important;
}

select:focus,
select.form-control:focus,
select.lw-form-field:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
  outline: none !important;
  background-color: #fff !important;
}

select option {
  padding: 8px 12px;
  font-size: 13px;
  color: #111827;
  background: #fff;
}

/* Remove selectize wrapper styling since we use native now */
/* Only hide selectize when the original select is visible */
select[data-lw-plugin="lwSelectize"] ~ .selectize-control { display: none !important; }

/* Show the original select that selectize was hiding */
select[data-lw-plugin="lwSelectize"] {
  display: block !important;
}

/* Entries select in table headers — keep small */
.entries-select,
select.entries-select {
  height: 30px !important;
  padding: 3px 24px 3px 8px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  background-position: right 6px center !important;
}

/* Custom select in table controls */
.custom-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-color: #fff !important;
  padding: 6px 32px 6px 10px !important;
  height: 36px !important;
  font-size: 13px !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}


/* ================================================================
   FIELDSET ACCORDION → CLEAN SECTION CARDS
   Remove accordion look, make fieldsets look like clean cards
   ================================================================ */

/* Base fieldset — clean card */
fieldset {
  border: 1px solid #f0f0f0 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  background: #fafafa !important;
  box-shadow: none !important;
}

/* Legend — section label, not clickable accordion */
fieldset legend {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 0 8px !important;
  width: auto !important;
  float: none !important;
  background: #fafafa !important;
  border: none !important;
  margin-bottom: 12px !important;
  cursor: default !important;
}

/* Remove the "Click to expand/collapse" small text */
fieldset legend small.text-muted {
  display: none !important;
}

/* Nested fieldsets — slightly different */
fieldset fieldset {
  background: #fff !important;
  border-color: #e5e7eb !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
}

/* Collapse elements — always show (remove accordion behavior) */
.collapse {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

/* But keep Bootstrap modal collapse working */
.modal .collapse {
  display: block !important;
}

/* lw-fieldset class */
.lw-fieldset {
  border: 1px solid #f0f0f0 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  background: #fafafa !important;
}
.lw-fieldset .lw-fieldset-legend,
.lw-fieldset legend {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  cursor: default !important;
}
.lw-fieldset legend small { display: none !important; }

/* Section heading blocks */
.lw-section-heading-block {
  margin: 16px 0 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.lw-section-heading {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin: 0 !important;
}


/* ================================================================
   AUTH SPLIT LAYOUT — login + register pages  (redesigned 2026-06)
   ================================================================ */

/* ── Wrapper ──────────────────────────────────────────────────── */
.al-wrap {
  display: flex !important;
  min-height: 100vh !important;
  width: 100% !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Left panel (form side) ───────────────────────────────────── */
.al-left {
  width: 48% !important;
  min-height: 100vh !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 40px 56px !important;
  position: relative !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ── Right panel (brand visual) ───────────────────────────────── */
.al-right {
  width: 52% !important;
  min-height: 100vh !important;
  background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 45%, #2d2570 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ── Logo ─────────────────────────────────────────────────────── */
.al-logo {
  margin-bottom: 32px;
  width: 100%;
  text-align: center;
}
.al-logo img {
  max-height: 85px;
  max-width: 280px;
  object-fit: contain;
}

/* ── Form box ─────────────────────────────────────────────────── */
.al-form-box {
  width: 100% !important;
  max-width: 420px !important;
}

/* ── Headings ─────────────────────────────────────────────────── */
.al-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  text-align: center !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.02em !important;
}
.al-sub {
  font-size: 14px !important;
  color: #6b7280 !important;
  text-align: center !important;
  margin: 0 0 28px !important;
  line-height: 1.5 !important;
}

/* ── Field wrapper ────────────────────────────────────────────── */
.al-field {
  margin-bottom: 16px !important;
}

/* ── Label ────────────────────────────────────────────────────── */
.al-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

/* Label row (label + forgot link) */
.al-label-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}
.al-label-row .al-label { margin-bottom: 0 !important; }

/* ── Forgot link ──────────────────────────────────────────────── */
.al-forgot {
  font-size: 12px !important;
  color: #6366f1 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.al-forgot:hover { text-decoration: underline !important; }

/* ── Input wrapper ────────────────────────────────────────────── */
.al-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Error messages inside .al-field — always display below the input */
.al-field .lw-validation-error,
.al-field label.lw-validation-error,
.al-field div.lw-validation-error {
  display: block !important;
  width: 100% !important;
  flex-basis: 100% !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #ef4444 !important;
  margin-top: 5px !important;
  padding: 0 2px !important;
  line-height: 1.4 !important;
}

/* Left icon inside input */
.al-icon {
  position: absolute !important;
  left: 14px !important;
  color: #9ca3af !important;
  font-size: 14px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ── Text / Email / Password input ───────────────────────────── */
.al-input {
  width: 100% !important;
  height: 48px !important;
  padding: 0 44px 0 42px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
  color: #111827 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
  -webkit-appearance: none !important;
}
.al-input:focus {
  border-color: #6366f1 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.12) !important;
}
.al-input::placeholder {
  color: #b0b7c3 !important;
  font-size: 13px !important;
}
.al-invalid {
  border-color: #ef4444 !important;
  background: #fff7f7 !important;
}

/* Eye toggle button (show/hide password) */
.al-eye {
  position: absolute !important;
  right: 12px !important;
  background: none !important;
  border: none !important;
  color: #9ca3af !important;
  cursor: pointer !important;
  padding: 6px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  z-index: 2 !important;
  transition: color .15s !important;
}
.al-eye:hover { color: #374151 !important; }

/* ── Input without left icon (no icon needed) ─────────────────── */
.al-input-wrap:not(:has(.al-icon)) .al-input {
  padding-left: 14px !important;
}

/* ── Remember me row ──────────────────────────────────────────── */
.al-remember {
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
}
.al-check-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #374151 !important;
  cursor: pointer !important;
  user-select: none !important;
}
.al-checkbox {
  width: 16px !important;
  height: 16px !important;
  accent-color: #6366f1 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  border-radius: 4px !important;
}

/* ── Submit button ────────────────────────────────────────────── */
.al-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 50px !important;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: 0.01em !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: filter .2s, transform .2s, box-shadow .2s !important;
  box-shadow: 0 6px 20px rgba(99,102,241,.4) !important;
  text-decoration: none !important;
  margin-top: 4px !important;
}
.al-submit:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(99,102,241,.5) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.al-submit:active {
  transform: translateY(0) !important;
  filter: brightness(0.98) !important;
}

/* ── Divider ──────────────────────────────────────────────────── */
.al-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 20px 0 !important;
  font-size: 12px !important;
  color: #9ca3af !important;
  font-weight: 500 !important;
}
.al-divider::before,
.al-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* ── Social login buttons ─────────────────────────────────────── */
.al-social {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
.al-social-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1.5px solid #e5e7eb !important;
  transition: background .15s, box-shadow .15s !important;
}
.al-google {
  background: #fff !important;
  color: #374151 !important;
}
.al-google:hover {
  background: #f9fafb !important;
  color: #374151 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}
.al-facebook {
  background: #1877f2 !important;
  color: #fff !important;
  border-color: #1877f2 !important;
}
.al-facebook:hover {
  background: #166fe5 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Switch link (already have an account?) ───────────────────── */
.al-switch {
  text-align: center !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  margin: 16px 0 0 !important;
}
.al-switch a {
  color: #6366f1 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.al-switch a:hover { text-decoration: underline !important; }

/* ── Footer text ──────────────────────────────────────────────── */
.al-footer-text {
  font-size: 12px !important;
  color: #9ca3af !important;
  margin-top: 32px !important;
  text-align: center !important;
  width: 100% !important;
}

/* ── Demo login buttons ───────────────────────────────────────── */
.al-demo-row {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
}
.al-demo-btn {
  flex: 1 !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #f9fafb !important;
  color: #374151 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: background .15s !important;
}
.al-demo-btn:hover { background: #f3f4f6 !important; }

/* ── Right panel inner ────────────────────────────────────────── */
.al-right-inner {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  padding: 48px 56px !important;
  max-width: 500px !important;
  width: 100% !important;
}

/* Animated blobs */
.al-blob {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(70px) !important;
  opacity: 0.25 !important;
  animation: alBlob 12s ease-in-out infinite !important;
}
.al-blob-1 { width: 420px; height: 420px; background: #22d571; top: -120px; right: -120px; animation-delay: 0s; }
.al-blob-2 { width: 320px; height: 320px; background: #6366f1; bottom: -100px; left: -100px; animation-delay: -5s; }
.al-blob-3 { width: 260px; height: 260px; background: #0ea5e9; top: 50%; left: 25%; animation-delay: -8s; }

@keyframes alBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(24px, -18px) scale(1.06); }
  66%       { transform: translate(-18px, 12px) scale(0.94); }
}

/* Brand icon */
.al-brand-icon {
  width: 88px !important;
  height: 88px !important;
  background: rgba(34,213,113,.15) !important;
  border: 2px solid rgba(34,213,113,.35) !important;
  border-radius: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 24px !important;
}
.al-brand-icon i {
  font-size: 44px !important;
  color: #22d571 !important;
}

.al-brand-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.02em !important;
}
.al-brand-sub {
  font-size: 15px !important;
  color: rgba(255,255,255,.6) !important;
  margin: 0 0 36px !important;
  line-height: 1.5 !important;
}

/* Feature pills */
.al-features {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-bottom: 40px !important;
}
.al-feature {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(4px) !important;
}
.al-feature i { font-size: 12px !important; color: #22d571 !important; }

/* Stats row */
.al-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  padding: 22px 28px !important;
  backdrop-filter: blur(8px) !important;
}
.al-stat { flex: 1 !important; text-align: center !important; }
.al-stat-num {
  display: block !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
}
.al-stat-label {
  display: block !important;
  font-size: 11px !important;
  color: rgba(255,255,255,.5) !important;
  margin-top: 4px !important;
}
.al-stat-divider {
  width: 1px !important;
  height: 40px !important;
  background: rgba(255,255,255,.15) !important;
  margin: 0 12px !important;
}

/* ── Two-column field row (First/Last Name, Password/Confirm) ─── */
.al-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

/* ── Responsive ───────────────────────────────────────────────── */

/* Tablet: hide right panel, stack everything */
@media (max-width: 1024px) {
  .al-left { width: 100% !important; padding: 32px 40px !important; }
  .al-right { display: none !important; }
  .al-form-box { max-width: 480px !important; margin: 0 auto !important; }
  .al-logo { text-align: center !important; }
}

/* Mobile */
@media (max-width: 600px) {
  .al-left { padding: 24px 20px 36px !important; }
  .al-title { font-size: 22px !important; }
  .al-sub { font-size: 13px !important; margin-bottom: 20px !important; }
  .al-input { height: 46px !important; font-size: 14px !important; }
  .al-submit { height: 48px !important; font-size: 14px !important; }
  .al-form-box { max-width: 100% !important; }
  /* Stack two-column rows into a single column on mobile */
  .al-two-col { grid-template-columns: 1fr !important; gap: 0 !important; }
}

/* Very small phones */
@media (max-width: 380px) {
  .al-left { padding: 20px 16px 28px !important; }
  .al-title { font-size: 20px !important; }
  .al-input { height: 44px !important; }
  .al-submit { height: 46px !important; }
}



/* ================================================================
   RESPONSIVE AUDIT — Full pass across all Admin + Vendor pages
   Appended 2026-06 | Breakpoints: 1199 / 991 / 767 / 575 / 360px
   ================================================================ */

/* ── 0. Global body — prevent horizontal scroll on ALL screens ─ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Word-wrap for long strings (emails, URLs) in table cells */
td, th {
  word-break: break-word !important;
  max-width: 260px !important;
}
/* But don't break short action columns */
td:last-child, th:last-child { max-width: unset !important; }

/* ── 1. Sidebar backdrop on mobile ─────────────────────────── */
.lw-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1039; /* just below sidebar z-index:1040 */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity .2s ease;
  opacity: 0;
}
.lw-sidebar-backdrop.show {
  display: block;
  opacity: 1;
}
@media (max-width: 767px) {
  /* Show backdrop when sidebar navbar-collapse is open */
  #sidenav-collapse-main.show ~ .lw-sidebar-backdrop,
  .navbar-vertical:has(#sidenav-collapse-main.show) + .lw-sidebar-backdrop {
    display: block;
    opacity: 1;
  }
}

/* ── 2. Top navbar — mobile alignment fixes ─────────────────── */
@media (max-width: 767px) {
  /* Navbar items must not overflow */
  #navbar-main .container-fluid {
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  /* Compact user avatar dropdown */
  #navbar-main .nav-item.dropdown > .nav-link {
    padding: 0 8px !important;
  }
  /* Page title in navbar — truncate if long */
  #navbar-main .h4,
  #navbar-main .navbar-text {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 140px !important;
  }
  /* Hamburger toggler — keep accessible tap target */
  #sidenav-main .navbar-toggler {
    padding: 6px 10px !important;
    font-size: 16px !important;
  }
}
@media (max-width: 360px) {
  #navbar-main .h4,
  #navbar-main .navbar-text { max-width: 100px !important; }
}

/* ── 3. All DataTables / tables — horizontal scroll ─────────── */
/* Ensure every datatable wrapper scrolls horizontally */
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Table itself never overflows its wrapper */
.dataTables_wrapper table,
.table-responsive table {
  min-width: 0 !important;
}

@media (max-width: 767px) {
  /* DataTable header controls stack vertically */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 6px !important;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: calc(100% - 52px) !important;
    min-width: unset !important;
  }
  /* Pagination compact */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 6px !important;
    min-width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
  /* Info text compact */
  .dataTables_wrapper .dataTables_info {
    font-size: 10px !important;
  }
}

@media (max-width: 575px) {
  /* On very small screens hide least-important table columns
     via data-priority attributes used by DataTables responsive */
  .modern-datatable tbody td { font-size: 11px !important; padding: 6px 8px !important; }
  .modern-datatable thead th { font-size: 9px !important; padding: 6px 8px !important; }

  /* Action buttons — icon only on tiny screens */
  .action-btn span,
  .mu-action-btn span,
  .wf-action-btn span,
  .btn-neo span.d-xs-none { display: none !important; }
}

/* ── 4. Dashboard — stat cards & feature cards ──────────────── */
@media (max-width: 991px) {
  /* Stat cards: max 2 per row on tablet */
  .header .col-xl-3 { flex: 0 0 50% !important; max-width: 50% !important; }
}
@media (max-width: 575px) {
  /* Stat cards: full width on mobile */
  .header .col-xl-3,
  .header .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }

  /* Feature cards full width */
  .features-row .col-md-4,
  .features-row .col-lg-3,
  .features-row [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }

  /* Dashboard chart — allow shrink */
  .graph-card canvas,
  canvas { max-width: 100% !important; }

  /* Vendor dashboard welcome card — compact */
  .welcome-card .card-body { padding: 10px !important; }
  .welcome-card h1 { font-size: 14px !important; }
  .welcome-card p  { font-size: 11px !important; }

  /* Stat values compact */
  .stat-card-value,
  .stat-card .stat-value { font-size: 18px !important; }
  .stat-card { flex-direction: row !important; align-items: center !important; }
}

/* ── 5. Chat Window — WhatsApp / Facebook / Instagram ────────── */
@media (max-width: 991px) {
  /* Slightly reduce contact list width on tablet */
  .lw-whatsapp-chat-window .col-md-4,
  .lw-whatsapp-chat-window .col-lg-3 {
    flex: 0 0 35% !important;
    max-width: 35% !important;
  }
  .lw-whatsapp-chat-window .col-md-8,
  .lw-whatsapp-chat-window .col-lg-9 {
    flex: 0 0 65% !important;
    max-width: 65% !important;
  }
}
@media (max-width: 767px) {
  /* Stack contact list + chat pane on mobile */
  .lw-whatsapp-chat-window,
  .lw-whatsapp-chat-window .row {
    display: block !important;
  }
  .lw-whatsapp-chat-window .col-md-4,
  .lw-whatsapp-chat-window .col-lg-3,
  .lw-whatsapp-chat-window .col-md-8,
  .lw-whatsapp-chat-window .col-lg-9 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
  /* Contact list: set a fixed height so it doesn't eat full screen */
  .lw-contact-list-container,
  .lw-whatsapp-contact-list {
    max-height: 45vh !important;
    overflow-y: auto !important;
  }
  /* Chat pane min height */
  .lw-whatsapp-chat-block-container,
  .conversation-container {
    min-height: 50vh !important;
  }
  /* Chat toolbar wraps on mobile */
  .lw-chat-toolbar-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .lw-chat-tabs { flex-wrap: wrap !important; gap: 4px !important; }
  .lw-chat-toolbar-right {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* Chat input area — don't let keyboard push it off screen */
  .lw-chat-input-area,
  .lw-message-input-container {
    position: relative !important;
    bottom: unset !important;
  }
}

/* ── 6. Settings / Config forms — field stacking ─────────────── */
@media (max-width: 767px) {
  /* All col-md-* inside forms become full width */
  .card-body .col-md-4,
  .card-body .col-md-3,
  .card-body .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Vendor settings — WhatsApp setup wizard fieldsets */
  fieldset { padding: 12px !important; }
  fieldset legend { font-size: 10px !important; }

  /* Input groups stack */
  .input-group { flex-wrap: wrap !important; }
  .input-group .form-control { border-radius: 7px !important; margin-bottom: 4px !important; }
  .input-group .input-group-append { width: 100% !important; }
  .input-group .input-group-append .btn,
  .input-group-append .btn { width: 100% !important; border-radius: 7px !important; }

  /* Onboarding tabs */
  .lw-cfg-tabs { flex-wrap: wrap !important; gap: 4px !important; }
  .lw-cfg-tab { font-size: 11px !important; padding: 6px 10px !important; }
}
@media (max-width: 575px) {
  /* API keys / token fields — break long strings */
  .card-body input[type="text"].form-control,
  .card-body input[type="password"].form-control {
    font-size: 11px !important;
    word-break: break-all !important;
  }
  /* Config forms: col-md-4 → col-12 */
  .row .col-md-4,
  .row .col-md-3,
  .row .col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── 7. Admin Config pages ──────────────────────────────────── */
@media (max-width: 767px) {
  /* Configuration tab styles */
  .lw-cfg-card { padding: 12px !important; margin-bottom: 12px !important; }
  /* Payment providers — card grid */
  .lw-cfg-card .row .col-md-4 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── 8. Template builder — stack form + preview ─────────────── */
@media (max-width: 1199px) {
  /* Template preview column stacks below form on tablet */
  .lw-whatsapp-template-create-preview {
    position: static !important;
    top: unset !important;
    margin-top: 16px !important;
  }
}
@media (max-width: 991px) {
  /* Template form columns go full width */
  .card-body .col-md-7,
  .card-body .col-md-8 { flex: 0 0 100% !important; max-width: 100% !important; }
  .lw-whatsapp-template-create-preview,
  .card-body .col-md-5,
  .card-body .col-md-4 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── 9. Campaign create / edit forms ────────────────────────── */
@media (max-width: 767px) {
  /* Schedule rows */
  .campaign-schedule-row,
  .campaign-schedule-row .col-md-4,
  .campaign-schedule-row .col-md-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Button group in campaign toolbar */
  .campaign-actions .btn-group { flex-wrap: wrap !important; gap: 4px !important; }
  .campaign-actions .btn { flex: 1 1 auto !important; }
}

/* ── 10. Action buttons in table rows ────────────────────────── */
@media (max-width: 767px) {
  /* Action container wraps */
  .action-buttons-container,
  .wf-action-buttons {
    flex-wrap: wrap !important;
    gap: 3px !important;
  }
  /* Kebab dropdown sticks inside viewport */
  .dropdown-menu-right {
    right: 0 !important;
    left: auto !important;
  }
}
@media (max-width: 575px) {
  /* Compact icon-only action buttons */
  .action-btn,
  .mu-action-btn,
  .wf-action-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 10px !important;
  }
  /* Hide text labels from action buttons */
  .action-btn .btn-label,
  .mu-action-btn .btn-label { display: none !important; }
}

/* ── 11. Modals — fit on small screens ───────────────────────── */
@media (max-width: 767px) {
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
  }
  .modal-lg,
  .modal-xl { max-width: calc(100vw - 16px) !important; }
  .modal-body  { padding: 12px 14px !important; max-height: 70vh !important; overflow-y: auto !important; }
  .modal-footer { padding: 10px 14px !important; flex-wrap: wrap !important; gap: 6px !important; }
  .modal-footer .btn { flex: 1 1 auto !important; min-width: 80px !important; }
}
@media (max-width: 575px) {
  .modal-dialog { margin: 4px !important; max-width: calc(100vw - 8px) !important; }
  .modal-content { border-radius: 10px !important; }
  /* Stack modal form rows */
  .modal .row .col-md-6,
  .modal .row .col-sm-6 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── 12. Page header row — title + action buttons ────────────── */
@media (max-width: 767px) {
  /* The page title + action button row wraps */
  .d-flex.align-items-center.justify-content-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Title truncates gracefully */
  .lw-page-title,
  h1.page-title,
  .mu-page-title {
    font-size: 15px !important;
    white-space: normal !important;
  }
  /* Action buttons row wraps */
  .table-header-controls .controls-right { flex-wrap: wrap !important; gap: 6px !important; }
}

/* ── 13. Vendors list (admin) ────────────────────────────────── */
@media (max-width: 767px) {
  /* Avatar + username inline */
  .mu-avatar { width: 26px !important; height: 26px !important; font-size: 10px !important; }
  .mu-user-link { font-size: 11px !important; }
  /* Hide plan/subscription column on narrow screens */
  .mu-table-card table th:nth-child(4),
  .mu-table-card table td:nth-child(4) { display: none !important; }
}

/* ── 14. Bot replies / Chatbot page ─────────────────────────── */
@media (max-width: 767px) {
  /* Bot keyword / reply columns — truncate */
  .bot-keyword-cell { max-width: 100px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
}

/* ── 15. Showroom Kit ────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Showroom QR preview beside form → stacks */
  .showroom-preview-col { flex: 0 0 100% !important; max-width: 100% !important; margin-top: 16px !important; }
  .showroom-form-col    { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── 16. Subscription / My Plan page ────────────────────────── */
@media (max-width: 767px) {
  .vendor-plan-card { padding: 12px !important; }
  .vendor-plan-card .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
  /* Plan feature list */
  .subscription-plan-features li { font-size: 11px !important; }
}

/* ── 17. Integration pages (Shopify / WooCommerce) ───────────── */
@media (max-width: 767px) {
  .integration-status-row { flex-direction: column !important; gap: 8px !important; }
  .integration-status-row .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── 18. Flows / Bot Flow Maker ──────────────────────────────── */
@media (max-width: 991px) {
  /* Flow maker canvas must scroll horizontally */
  .lw-flow-canvas-wrapper,
  .flow-builder-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── 19. WhatsApp Orders ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Order table — hide less-critical columns */
  .orders-table th:nth-child(5),
  .orders-table td:nth-child(5) { display: none !important; }
  /* Order total + status still visible */
}

/* ── 20. Translation / Languages admin page ──────────────────── */
@media (max-width: 767px) {
  .translation-row .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── 21. Subscription Plans admin ───────────────────────────── */
@media (max-width: 991px) {
  /* Plan cards: 2 per row on tablet */
  .plan-cards-row .col-md-4 { flex: 0 0 50% !important; max-width: 50% !important; }
}
@media (max-width: 575px) {
  /* Plan cards: 1 per row on mobile */
  .plan-cards-row .col-md-4 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── 22. Tables — prevent content clipping ───────────────────── */
/* Ensure modern-table-container scrolls on all screen sizes */
.modern-table-container {
  overflow-x: auto !important;
}
/* All standard Bootstrap tables get responsive wrapper behavior */
.table-responsive {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── 23. Vendor settings sidebar nav on mobile ───────────────── */
@media (max-width: 767px) {
  /* When sidebar is collapsed, ensure content area takes full width */
  .navbar-vertical.navbar-expand-md + .main-content {
    margin-left: 0 !important;
  }
  /* Sidebar toggler button — visible and properly sized */
  .navbar-vertical .navbar-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 16px !important;
    color: #fff !important;
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 6px !important;
  }
  /* When sidebar collapses on mobile, content slides back */
  #sidenav-collapse-main {
    border-top: 1px solid rgba(255,255,255,.1) !important;
    padding-bottom: 12px !important;
  }
}

/* ── 24. Container fluid — consistent padding at all widths ──── */
@media (max-width: 1199px) {
  .main-content .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 991px) {
  .main-content .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 767px) {
  .main-content .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (max-width: 575px) {
  .main-content .container-fluid { padding-left: 8px !important; padding-right: 8px !important; }
}

/* ── 25. Row gutters — tighter on mobile ─────────────────────── */
@media (max-width: 575px) {
  .row { margin-left: -5px !important; margin-right: -5px !important; }
  .row > [class*="col-"] { padding-left: 5px !important; padding-right: 5px !important; }
}

/* ── 26. Buttons — touch-friendly minimum tap area ───────────── */
@media (max-width: 767px) {
  /* All buttons minimum 36px height for touch targets */
  .btn { min-height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  .btn-sm { min-height: 28px !important; }
  /* Neo buttons on mobile */
  .btn-neo { min-height: 34px !important; }
  /* Action kebab  */
  .action-kebab-btn { min-width: 30px !important; min-height: 30px !important; }
}

/* ── 27. Images — responsive by default ─────────────────────── */
img { max-width: 100% !important; height: auto !important; }
/* But don't shrink logos/avatars */
.mu-avatar img,
.navbar-brand-img,
.lw-sidebar-logo-normal,
.lw-sidebar-logo-small,
.lw-qr-image { max-width: unset !important; }

/* ── 28. Cards inside containers — no fixed widths ───────────── */
@media (max-width: 767px) {
  .card { width: 100% !important; min-width: 0 !important; }
  /* Card header row — wrap title + actions */
  .card-header .d-flex { flex-wrap: wrap !important; gap: 6px !important; }
  .card-header h3,
  .card-header h4,
  .card-header .card-title { font-size: 13px !important; }
}

/* ── 29. Admin users list — responsive action column ─────────── */
@media (max-width: 991px) {
  /* Compress action column */
  .mu-table-card .action-buttons-container { flex-wrap: wrap !important; gap: 2px !important; }
}

/* ── 30. Search & filter controls — full width on mobile ──────── */
@media (max-width: 575px) {
  .search-control { width: 100% !important; }
  .search-input   { width: 100% !important; min-width: unset !important; }
  .table-header-controls .controls-left,
  .table-header-controls .controls-right { width: 100% !important; }
}

/* ── 31. SweetAlert2 — fit on mobile ─────────────────────────── */
@media (max-width: 575px) {
  .swal2-popup { padding: 16px !important; width: auto !important; max-width: calc(100vw - 24px) !important; }
  .swal2-title { font-size: 14px !important; }
  .swal2-actions { flex-direction: column !important; gap: 6px !important; width: 100% !important; }
  .swal2-confirm, .swal2-cancel { width: 100% !important; margin: 0 !important; }
}

/* ── 32. Nav tabs — scroll horizontally when many tabs ───────── */
.nav-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.nav-tabs::-webkit-scrollbar { display: none !important; }
.nav-tabs .nav-item { white-space: nowrap !important; flex-shrink: 0 !important; }

/* ── 33. Dropdown menus — keep inside viewport ───────────────── */
@media (max-width: 767px) {
  /* Right-aligned dropdowns on mobile flip to left if near edge */
  .dropdown-menu-right {
    right: 0 !important;
    left: auto !important;
  }
  /* Ensure dropdown doesn't exceed viewport width */
  .dropdown-menu {
    max-width: calc(100vw - 20px) !important;
  }
}

/* ── 34. Footer on guest pages ───────────────────────────────── */
@media (max-width: 575px) {
  .footer { padding: 12px !important; font-size: 11px !important; text-align: center !important; }
  .footer .row { flex-direction: column !important; }
}

/* ── 35. WhatsApp setup accordion / fieldsets ────────────────── */
@media (max-width: 767px) {
  /* Setup accordion steps */
  #whatsAppSetupSettingsBlock .accordion-item { margin-bottom: 6px !important; }
  /* The big blue connect button */
  #whatsAppSetupSettingsBlock .btn-lg { width: 100% !important; font-size: 14px !important; }
  /* Debug panel table on mobile */
  #whatsAppSetupSettingsBlock .table-sm td,
  #whatsAppSetupSettingsBlock .table-sm th { font-size: 10px !important; padding: 5px 6px !important; }
}

/* ── 36. Toasts / flash alerts ───────────────────────────────── */
@media (max-width: 575px) {
  .toast { max-width: calc(100vw - 24px) !important; font-size: 11px !important; }
}

/* ── 37. Collapse arrow on sidebar — fix overlap on narrow ────── */
@media (max-width: 320px) {
  .navbar-vertical .navbar-nav .nav-link[data-toggle="collapse"] {
    padding-right: 28px !important;
  }
  .navbar-vertical .navbar-nav .nav-link { font-size: 11px !important; }
  .nav-link-ul { font-size: 11px !important; }
}

/* ── 38. CRITICAL: Restore Bootstrap collapse for sidebar on mobile ──
   The earlier rule `.collapse { display:block !important }` was
   added to expand fieldset accordions on settings pages, but it
   breaks the sidebar hamburger toggle on mobile.
   We must RESTORE normal Bootstrap collapse for #sidenav-collapse-main.
   ──────────────────────────────────────────────────────────────────── */

/* On mobile: sidebar collapse respects Bootstrap show/hide */
@media (max-width: 767px) {
  /* When NOT shown — sidebar nav is hidden */
  #sidenav-collapse-main {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  /* When Bootstrap adds .show — sidebar nav is visible */
  #sidenav-collapse-main.show {
    display: block !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  /* During animation — keep it visible */
  #sidenav-collapse-main.collapsing {
    display: block !important;
  }
}

/* ── 39. Mobile Sidebar — proper left-drawer design ─────────────
   On mobile the sidebar collapses to a slim top strip.
   When opened it becomes a left drawer that slides over content.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Sidebar container — full-width bar at top of page ──────── */
  #sidenav-main {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    /* Remove fixed-left behavior on mobile */
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 1041 !important;
    overflow: visible !important;
    /* Keep the sidebar color from inline style */
  }

  /* ── Top bar row (toggler + logo + avatar) — proper height ───── */
  #sidenav-main .container-fluid {
    padding: 0 12px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* ── The collapsible nav — slide-in drawer from left ─────────── */
  #sidenav-main #sidenav-collapse-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 82% !important;
    max-width: 300px !important;
    z-index: 1050 !important; /* above backdrop(1040) and sidenav(1041) */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 24px !important;
    /* Solid opaque fallback — JS will override with actual sidebar color */
    background: #10B981 !important;
    box-shadow: 4px 0 32px rgba(0,0,0,.45) !important;
    /* Hidden state — shifted fully off-screen to the left */
    transform: translateX(-110%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* When .show is added by Bootstrap — slide IN from left */
  #sidenav-main #sidenav-collapse-main.show {
    transform: translateX(0) !important;
  }

  /* Also handle the collapse-header inside the drawer */
  #sidenav-main #sidenav-collapse-main .navbar-collapse-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.15) !important;
    margin-bottom: 6px !important;
  }

  /* Logo inside the drawer header */
  #sidenav-main .navbar-collapse-header .collapse-brand img {
    max-height: 36px !important;
    width: auto !important;
  }

  /* Close button inside drawer */
  #sidenav-main .navbar-collapse-header .navbar-toggler {
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Nav list inside drawer */
  #sidenav-main #sidenav-collapse-main .navbar-nav {
    padding: 4px 8px !important;
  }

  /* Main content — no margin/padding from sidebar on mobile */
  .lw-authenticated-page .main-content,
  .main-content {
    padding-top: 0 !important;
    margin-left: 0 !important;
  }

  /* Backdrop — sits between page content and the drawer */
  .lw-sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 1040 !important; /* below drawer(1050), above page content */
    display: none !important;
    opacity: 0 !important;
    transition: opacity .25s ease !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
  }
  .lw-sidebar-backdrop.show {
    display: block !important;
    opacity: 1 !important;
  }

  /* Top hamburger button (≡) in the top bar only — precise selector */
  #sidenav-main > .container-fluid > span > .navbar-toggler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: 18px !important;
    color: #fff !important;
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
}

/* ── 40. Desktop: sidebar fixed-left, navbar fixed-top ──────────── */
@media (min-width: 768px) {
  #sidenav-main {
    /* Let the drawer CSS in sidebar.blade.php handle positioning/transform */
  }

  /* Navbar-main fixed at top on desktop */
  #navbar-main {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 250px !important;
    z-index: 1020 !important;
    height: 44px !important;
    min-height: 44px !important;
    width: auto !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  body.lw-drawer-closed #navbar-main {
    left: 0 !important;
    padding-left: 60px !important; /* Room for hamburger toggle */
  }

  /* Main content clears fixed navbar and sidebar */
  .lw-authenticated-page .main-content,
  .main-content {
    margin-left: 250px !important;
    padding-top: 44px !important;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  body.lw-drawer-closed .lw-authenticated-page .main-content,
  body.lw-drawer-closed .main-content {
    margin-left: 0 !important;
  }
}

/* ── END RESPONSIVE AUDIT ──────────────────────────────────────── */


/* ================================================================
   WHATSAPP CHAT WINDOW — MOBILE FIX
   The chat page uses a `.marvel-device.nexus5` phone mockup on
   desktop. On mobile we strip the mockup and render a proper
   full-viewport chat layout with swappable panels.
   ================================================================ */

/* ── Desktop (>= 768px): keep the original layout intact ──────── */
@media (min-width: 768px) {
  /* Ensure the outer card doesn't clip on desktop */
  .lw-whatsapp-chat-block-container {
    min-height: calc(100vh - 120px) !important;
    overflow: visible !important;
  }
}

/* ── Mobile (<= 767px): full overhaul ────────────────────────── */
@media (max-width: 767px) {

  /* 1. Outer chat card — edge-to-edge, no extra padding */
  .lw-whatsapp-chat-block-container {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  .card-body.lw-whatsapp-chat-window {
    padding: 0 !important;
  }

  /* 2. Toolbar — wraps on two lines if needed */
  .lw-chat-toolbar {
    padding: 6px 8px !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }
  .lw-chat-toolbar-inner {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .lw-chat-tabs {
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .lw-chat-tab {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  .lw-chat-toolbar-right {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* 3. Contact list panel — full width, swappable */
  .lw-contact-list-block {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Full-screen height for the contact list */
    min-height: calc(100vh - 160px) !important;
  }
  .lw-contact-list {
    max-height: calc(100vh - 220px) !important;
    overflow-y: auto !important;
  }
  .lw-chat-sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    z-index: 5 !important;
  }

  /* 4. Chat pane — full width, strip the phone mockup */
  .page.col-sm-12.col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 5. STRIP the nexus5 phone device frame completely on mobile */
  .marvel-device.nexus5,
  .marvel-device {
    width: 100% !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 auto !important;
    /* Remove all the phone-shaped CSS that makes it look like a device */
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .marvel-device::before,
  .marvel-device::after,
  .marvel-device .top-bar,
  .marvel-device .sleep,
  .marvel-device .volume,
  .marvel-device .camera,
  .marvel-device .sensor,
  .marvel-device .speaker {
    display: none !important;
  }
  .marvel-device .screen {
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
    position: relative !important;
  }
  .marvel-device .screen-container {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* 6. Chat inner box — full-width, flex column layout */
  .chat#lwChatWindowBox {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 160px) !important;
    min-height: 400px !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
  }

  /* 7. Contact top bar (name + back button) */
  .user-bar {
    padding: 8px 12px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  .user-bar .name span {
    font-size: 13px !important;
  }
  .user-bar .name small {
    font-size: 10px !important;
  }
  .user-bar .status {
    font-size: 9px !important;
  }

  /* 8. Conversation area — fills remaining space, scrolls */
  .conversation {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }
  .conversation-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px !important;
    min-height: 0 !important;
  }

  /* 9. Message compose bar — pinned at bottom */
  .conversation-compose {
    flex-shrink: 0 !important;
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 6px 8px !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    gap: 6px !important;
    z-index: 5 !important;
  }
  .conversation-compose .input-msg {
    font-size: 13px !important;
    min-height: 36px !important;
    max-height: 80px !important;
    resize: none !important;
    padding: 8px 10px !important;
    border-radius: 20px !important;
    flex: 1 !important;
  }
  .conversation-compose .send {
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .conversation-compose .emoji {
    display: none !important; /* hide emoji picker on mobile to save space */
  }
  .conversation-compose .photo {
    flex-shrink: 0 !important;
  }

  /* 10. Message bubbles — slightly smaller on mobile */
  .message {
    max-width: 85% !important;
    font-size: 12px !important;
  }
  .message .metadata .time {
    font-size: 9px !important;
  }

  /* 11. Right CRM panel — full-screen overlay on mobile */
  .col-xl-3.mb-4:last-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 8px !important;
  }

  /* 12. Load earlier messages button */
  #lwEndOfChats .btn {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
}

/* ── Tiny phones (< 400px) ──────────────────────────────────────── */
@media (max-width: 400px) {
  .chat#lwChatWindowBox {
    height: calc(100vh - 140px) !important;
  }
  .user-bar .actions.more { gap: 4px !important; }
  .lw-whatsapp-bar-icon-btn { font-size: 14px !important; }
}