/* ============================================================
   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: 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-left,
.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
   ================================================================ */
.al-wrap {
  display: flex !important;
  min-height: 100vh !important;
  width: 100% !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.al-left {
  width: 45% !important;
  min-height: 100vh !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 24px 48px !important;
  position: relative !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.al-right {
  width: 55% !important;
  min-height: 100vh !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #312e81 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.al-logo { margin-bottom: 16px; }
.al-logo img { max-height: 48px; max-width: 160px; object-fit: contain; }

.al-form-box {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  max-width: 380px !important;
  width: 100% !important;
}

.al-title { font-size: 22px !important; font-weight: 700 !important; color: #111827 !important; text-align: center; margin: 0 0 4px !important; }
.al-sub { font-size: 13px; color: #6b7280; text-align: center; margin: 0 0 16px; }

.al-field { margin-bottom: 12px; }
.al-label { display: block; font-size: 11px; font-weight: 600; color: #374151; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.al-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.al-label-row .al-label { margin-bottom: 0; }
.al-forgot { font-size: 11px; color: #6366f1; text-decoration: none; }
.al-forgot:hover { text-decoration: underline; }

.al-input-wrap { position: relative; display: flex; align-items: center; }
.al-icon { position: absolute; left: 12px; color: #9ca3af; font-size: 13px; pointer-events: none; z-index: 1; }
.al-input {
  width: 100% !important;
  height: 42px !important;
  padding: 0 40px 0 36px !important;
  font-size: 13px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #f9fafb !important;
  color: #111827 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s, background .15s !important;
}
.al-input:focus { border-color: #6366f1 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important; }
.al-input::placeholder { color: #c4c9d4 !important; }
.al-invalid { border-color: #ef4444 !important; }
.al-eye { position: absolute; right: 10px; background: none; border: none; color: #9ca3af; cursor: pointer; padding: 4px; font-size: 14px; line-height: 1; }
.al-eye:hover { color: #374151; }

.al-remember { margin-bottom: 16px; }
.al-check-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; cursor: pointer; }
.al-checkbox { width: 15px; height: 15px; accent-color: #6366f1; cursor: pointer; }

.al-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 46px !important;
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: filter .15s, transform .15s !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.35) !important;
  text-decoration: none !important;
}
.al-submit:hover { filter: brightness(1.08) !important; transform: translateY(-1px) !important; color: #fff !important; text-decoration: none !important; }

.al-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 11px; color: #9ca3af; }
.al-divider::before, .al-divider::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }

.al-social { display: flex; gap: 10px; margin-bottom: 16px; }
.al-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; }
.al-google { background: #fff; color: #374151; }
.al-google:hover { background: #f9fafb; color: #374151; text-decoration: none; }
.al-facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.al-facebook:hover { background: #166fe5; color: #fff; text-decoration: none; }

.al-switch { text-align: center; font-size: 12px; color: #6b7280; margin: 14px 0 0; }
.al-switch a { color: #6366f1; font-weight: 600; text-decoration: none; }
.al-switch a:hover { text-decoration: underline; }

.al-footer-text { font-size: 11px; color: #9ca3af; margin-top: 24px; text-align: center; }

/* Right panel */
.al-right-inner { position: relative; z-index: 1; text-align: center; padding: 40px 48px; max-width: 480px; }
.al-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .3; animation: alBlob 10s ease-in-out infinite; }
.al-blob-1 { width: 400px; height: 400px; background: #22d571; top: -100px; right: -100px; animation-delay: 0s; }
.al-blob-2 { width: 300px; height: 300px; background: #6366f1; bottom: -80px; left: -80px; animation-delay: -4s; }
.al-blob-3 { width: 250px; height: 250px; background: #0ea5e9; top: 50%; left: 30%; animation-delay: -7s; }
@keyframes alBlob { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(20px,-15px) scale(1.05)} 66%{transform:translate(-15px,10px) scale(.95)} }

.al-brand-icon { width: 80px; height: 80px; background: rgba(34,213,113,.15); border: 2px solid rgba(34,213,113,.3); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.al-brand-icon i { font-size: 40px; color: #22d571; }
.al-brand-title { font-size: 32px !important; font-weight: 800 !important; color: #fff !important; margin: 0 0 8px !important; letter-spacing: -.02em !important; }
.al-brand-sub { font-size: 14px; color: rgba(255,255,255,.6); margin: 0 0 32px; }

.al-features { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.al-feature { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.85); }
.al-feature i { font-size: 12px; color: #22d571; }

.al-stats { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 20px 24px; }
.al-stat { flex: 1; text-align: center; }
.al-stat-num { display: block; font-size: 22px; font-weight: 800; color: #fff; line-height: 1.1; }
.al-stat-label { display: block; font-size: 11px; color: rgba(255,255,255,.5); margin-top: 3px; }
.al-stat-divider { width: 1px; height: 36px; background: rgba(255,255,255,.15); margin: 0 8px; }

/* Demo buttons */
.al-demo-row { display: flex; gap: 8px; margin-bottom: 16px; }
.al-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; display: flex; align-items: center; justify-content: center; gap: 5px; }
.al-demo-btn:hover { background: #f3f4f6; }

/* Responsive */
@media (max-width: 900px) {
  .al-wrap { flex-direction: column !important; height: 100vh !important; overflow-y: auto !important; }
  .al-left { width: 100% !important; min-height: unset !important; padding: 24px 24px 32px !important; overflow-y: visible !important; }
  .al-right { display: none !important; }
  .al-right-inner { padding: 28px 20px !important; }
  .al-brand-title { font-size: 22px !important; }
  .al-form-box { max-width: 100% !important; }
  .al-stats { padding: 14px 16px; }
  .al-stat-num { font-size: 18px; }
}
@media (max-width: 480px) {
  .al-left { padding: 18px 16px 24px !important; }
  .al-title { font-size: 19px !important; }
  .al-features { gap: 6px; }
  .al-feature { font-size: 11px; padding: 5px 10px; }
}