/* Enhanced Backend UI Styles - WhatsApp Theme */
/* Import Noto Sans font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

@font-face {
  font-family: 'Claudion';
  src: url('../fonts/saudi-riyal2/Claudion.ttf') format('truetype');
}

/* CSS Variables for WhatsApp-inspired color scheme */
:root {
  /* WhatsApp gradient colors */
  --lw-whatsapp-gradient: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  --lw-whatsapp-primary: #25D366;
  --lw-whatsapp-secondary: #128C7E;
  --lw-whatsapp-dark: #075E54;
  --lw-whatsapp-light: #DCF8C6;

  /* Clean color palette */
  --lw-white: #ffffff;
  --lw-gray-50: #f9fafb;
  --lw-gray-100: #f3f4f6;
  --lw-gray-200: #e5e7eb;
  --lw-gray-300: #d1d5db;
  --lw-gray-400: #9ca3af;
  --lw-gray-500: #6b7280;
  --lw-gray-600: #4b5563;
  --lw-gray-700: #374151;
  --lw-gray-800: #1f2937;
  --lw-gray-900: #111827;

  /* Compact spacing variables */
  --lw-spacing-xs: 0.2rem;
  --lw-spacing-sm: 0.4rem;
  --lw-spacing-md: 0.6rem;
  --lw-spacing-lg: 0.8rem;
  --lw-spacing-xl: 1rem;

  /* Shadow variables */
  --lw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --lw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --lw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Border radius */
  --lw-radius-sm: 4px;
  --lw-radius-md: 6px;
  --lw-radius-lg: 8px;
  --lw-radius-xl: 12px;
}

/* Dark mode variables */
[data-theme="dark"] {
  --lw-white: #1a1a1a;
  --lw-gray-50: #2d2d2d;
  --lw-gray-100: #3a3a3a;
  --lw-gray-200: #4a4a4a;
  --lw-gray-300: #5a5a5a;
  --lw-gray-400: #6a6a6a;
  --lw-gray-500: #8a8a8a;
  --lw-gray-600: #a0a0a0;
  --lw-gray-700: #c0c0c0;
  --lw-gray-800: #e0e0e0;
  --lw-gray-900: #f0f0f0;
}

/* Dark mode body */
[data-theme="dark"] body {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] body::before {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(37, 211, 102, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(18, 140, 126, 0.03) 0%, transparent 50%),
    linear-gradient(45deg, transparent 40%, rgba(37, 211, 102, 0.01) 50%, transparent 60%) !important;
}

/* Dark mode cards */
[data-theme="dark"] .card {
  background: var(--lw-gray-50) !important;
  border-color: var(--lw-gray-200) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .card-header {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-200) !important;
  color: var(--lw-gray-800) !important;
}

/* Dark mode sidebar */
[data-theme="dark"] .lw-sidebar-container {
  background: var(--lw-gray-50) !important;
  border-color: var(--lw-gray-200) !important;
}

[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link {
  color: var(--lw-gray-600) !important;
}

[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link:hover {
  background: var(--lw-gray-100) !important;
  color: var(--lw-whatsapp-primary) !important;
}

/* Dark mode tables */
[data-theme="dark"] .table {
  background: var(--lw-gray-50) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .table th {
  background: var(--lw-gray-100) !important;
  color: var(--lw-gray-800) !important;
  border-color: var(--lw-gray-200) !important;
}

[data-theme="dark"] .table td {
  color: var(--lw-gray-700) !important;
  border-color: var(--lw-gray-200) !important;
}

[data-theme="dark"] .table tbody tr:hover {
  background: var(--lw-gray-100) !important;
}

/* Dark mode forms */
[data-theme="dark"] .form-control {
  background: var(--lw-gray-50) !important;
  border-color: var(--lw-gray-300) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .form-control:focus {
  background: var(--lw-gray-50) !important;
  border-color: var(--lw-whatsapp-primary) !important;
}

/* Dark mode modals */
[data-theme="dark"] .modal-content {
  background: var(--lw-gray-50) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .modal-header {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-200) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .modal-footer {
  background: var(--lw-gray-50) !important;
  border-color: var(--lw-gray-200) !important;
}

/* Dark mode for alerts */
[data-theme="dark"] .alert {
  background: linear-gradient(135deg, var(--lw-gray-100) 0%, var(--lw-gray-200) 100%) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .alert * {
  color: var(--lw-gray-800) !important;
}

/* Dark mode for modal buttons */
[data-theme="dark"] .modal-footer .btn-secondary,
[data-theme="dark"] .modal-footer .btn-default {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-300) !important;
  color: #000000 !important;
}

[data-theme="dark"] .modal-footer .btn-secondary:hover,
[data-theme="dark"] .modal-footer .btn-default:hover {
  background: var(--lw-gray-200) !important;
  color: #000000 !important;
}

/* Global font family change to Noto Sans */
body,
html,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
.navbar,
.nav,
.btn,
.form-control,
.card,
.modal,
.dropdown-menu,
input,
textarea,
select,
label {
  font-family: 'Noto Sans', 'Claudion', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Compact font sizes across the UI */
body {
  font-size: 0.8rem !important;
  /* More compact */
  line-height: 1.4 !important;
  color: var(--lw-gray-800) !important;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  background-attachment: fixed !important;
}

/* Modern geometric pattern background */
body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(37, 211, 102, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(18, 140, 126, 0.05) 0%, transparent 50%),
    linear-gradient(45deg, transparent 40%, rgba(37, 211, 102, 0.02) 50%, transparent 60%) !important;
  background-size: 400px 400px, 300px 300px, 200px 200px !important;
  background-position: 0 0, 100px 100px, 50px 50px !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Keep h1 tags visible and style them */
.main-content h1,
.container-fluid h1,
.card-body h1,
.lw-page-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-800) !important;
  /* margin-bottom: var(--lw-spacing-lg) !important;
  padding-bottom: var(--lw-spacing-sm) !important;
  border-bottom: 2px solid var(--lw-gray-200) !important; */
}

/* Keep top navigation header with minimal height */
.main-content .navbar-top {
  display: block !important;
  min-height: 45px !important;
  height: 45px !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-lg) !important;
}

/* Adjust main content layout */
.main-content {
  padding-top: var(--lw-spacing-sm) !important;
}

.container-fluid {
  margin-top: 0 !important;
}

/* Compact header sizes */
.h1,
h1 {
  font-size: 1.4rem !important;
  font-weight: 500 !important;
}

.h2,
h2 {
  font-size: 1.2rem !important;
  font-weight: 500 !important;
}

.h3,
h3 {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
}

.h4,
h4 {
  font-size: 1rem !important;
  font-weight: 500 !important;
}

.h5,
h5 {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

.h6,
h6 {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

/* Page title styling - smaller and less dominant */
.lw-page-title {
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  margin-bottom: var(--lw-spacing-md) !important;
  color: var(--lw-primary-color) !important;
}

.display-2 {
  font-size: 1.75rem !important;
  font-weight: 500 !important;
  margin-bottom: var(--lw-spacing-md) !important;
}

/* Header container padding reduction */
.header {
  padding-top: var(--lw-spacing-lg) !important;
  padding-bottom: var(--lw-spacing-lg) !important;
  margin-bottom: 10px;
}

.header-body {
  padding: var(--lw-spacing-sm) 0 !important;
}

/* Clean white backgrounds with black text */
.bg-gradient-primary,
.main-content .navbar-top {
  background: var(--lw-white) !important;
  border-bottom: 1px solid var(--lw-gray-200) !important;
  box-shadow: var(--lw-shadow-sm) !important;
  color: var(--lw-gray-800) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

.bg-gradient-default {
  background: var(--lw-white) !important;
}

/* Top navbar text color fix */
.navbar-top .navbar-nav .nav-link,
.navbar-top .navbar-brand,
.navbar-top .navbar-text,
.navbar-top .dropdown-toggle,
.navbar-top .dropdown-item {
  color: var(--lw-gray-800) !important;
  /*font-size: 0.8rem !important;*/
  font-size: 0.7rem !important;
}

.navbar-top .navbar-nav .nav-link:hover,
.navbar-top .dropdown-item:hover {
  color: var(--lw-whatsapp-primary) !important;
}

/* Top navbar user dropdown */
.navbar-top .dropdown-menu {
  border: 1px solid var(--lw-gray-200) !important;
  box-shadow: var(--lw-shadow-lg) !important;
  border-radius: var(--lw-radius-lg) !important;
  background: var(--lw-white) !important;
  padding: var(--lw-spacing-sm) !important;
}

.navbar-top .dropdown-item {
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  border-radius: var(--lw-radius-md) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.navbar-top .dropdown-item:hover {
  background: var(--lw-gray-100) !important;
}

/* Language switch in top nav */
.navbar-top .language-switch {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  border-radius: var(--lw-radius-md) !important;
  background: var(--lw-gray-100) !important;
  color: var(--lw-gray-700) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-right: var(--lw-spacing-sm) !important;
}

.navbar-top .language-switch:hover {
  background: var(--lw-whatsapp-primary) !important;
  color: white !important;
  transform: translateY(-1px) !important;
}

.navbar-top .language-switch i {
  margin-right: var(--lw-spacing-xs) !important;
  font-size: 0.7rem !important;
}

/* WhatsApp-themed buttons */
.btn-primary,
.btn-success {
  background: var(--lw-whatsapp-gradient) !important;
  border: none !important;
  color: white !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-lg) !important;
  border-radius: var(--lw-radius-md) !important;
  box-shadow: var(--lw-shadow-sm) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: none !important;
}

.btn-primary:hover,
.btn-success:hover {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-lg) !important;
  color: white !important;
}

.btn-primary:active,
.btn-success:active {
  transform: translateY(0) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

.btn-primary:disabled,
.btn-success:disabled {
  background: var(--lw-gray-300) !important;
  color: var(--lw-gray-500) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Clean card styling */
.card {
  border: 1px solid var(--lw-gray-200) !important;
  box-shadow: var(--lw-shadow-sm) !important;
  border-radius: var(--lw-radius-lg) !important;
  margin-bottom: var(--lw-spacing-md) !important;
  background: var(--lw-white) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

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

.card-header {
  background: var(--lw-white) !important;
  color: var(--lw-gray-800) !important;
  border-bottom: 1px solid var(--lw-gray-200) !important;
  border-radius: var(--lw-radius-lg) var(--lw-radius-lg) 0 0 !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-lg) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.card-body {
  padding: var(--lw-spacing-lg) !important;
}

.card-title {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-800) !important;
  margin-bottom: var(--lw-spacing-sm) !important;
}

/* Reduced spacing and padding */
.container-fluid {
  padding-left: var(--lw-spacing-md) !important;
  padding-right: var(--lw-spacing-md) !important;
}

.row {
  margin-left: calc(-1 * var(--lw-spacing-xs)) !important;
  margin-right: calc(-1 * var(--lw-spacing-xs)) !important;
}

.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-auto,
.col-sm,
.col-md,
.col-lg,
.col-xl {
  padding-left: var(--lw-spacing-xs) !important;
  padding-right: var(--lw-spacing-xs) !important;
}

/* Modern form elements */
.form-group {
  margin-bottom: var(--lw-spacing-md) !important;
}

.form-control {
  font-size: 0.8rem !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-lg) !important;
  border-radius: var(--lw-radius-md) !important;
  border: 1px solid var(--lw-gray-300) !important;
  background-color: var(--lw-white) !important;
  box-shadow: var(--lw-shadow-sm) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: var(--lw-gray-800) !important;
}

.form-control:focus {
  border-color: var(--lw-whatsapp-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--lw-gray-400) !important;
  font-size: 0.75rem !important;
}

.form-control-label,
label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-700) !important;
  margin-bottom: var(--lw-spacing-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Fieldset styling */
fieldset {
  border: 1px solid var(--lw-gray-300) !important;
  border-radius: var(--lw-radius-lg) !important;
  padding: var(--lw-spacing-lg) !important;
  margin-bottom: var(--lw-spacing-lg) !important;
  background: var(--lw-white) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

fieldset legend {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--lw-gray-900) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-md) !important;
  background: var(--lw-white) !important;
  border: 1px solid var(--lw-gray-300) !important;
  border-radius: var(--lw-radius-md) !important;
  margin-bottom: var(--lw-spacing-md) !important;
}

/* Button sizing and spacing */
.btn {
  font-size: 0.8rem !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  margin-bottom: var(--lw-spacing-xs) !important;
  transition: all 0.3s ease !important;
}

.btn-sm {
  font-size: 0.75rem !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
}

.btn-lg {
  font-size: 0.9rem !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-xl) !important;
}

/* Modern table styling - fix double shadows */
.card .table-responsive,
.card-body .table-responsive {
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: calc(-1 * var(--lw-spacing-lg)) !important;
  margin-top: 0 !important;
}

.table {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--lw-white) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.table th {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-800) !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-lg) !important;
  background: var(--lw-gray-50) !important;
  border-bottom: 1px solid var(--lw-gray-200) !important;
  border-top: none !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  text-align: center !important;
}

.table td {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: var(--lw-gray-700) !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-lg) !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--lw-gray-100) !important;
  border-top: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: center !important;
}

.table tbody tr {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.table tbody tr:hover {
  background: var(--lw-gray-50) !important;
}

.table tbody tr:hover td {
  color: var(--lw-gray-800) !important;
}

/* Remove card shadow conflicts */
.card.shadow,
.card-body.shadow {
  box-shadow: var(--lw-shadow-sm) !important;
}

/* Table action buttons - icon only with gray gradient */
.table .btn-group .btn,
.table .btn-sm,
.table .btn-xs,
.table td .btn,
.quick-actions .btn {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-600) !important;
  font-size: 0 !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: var(--lw-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 2px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.table .btn-group .btn:hover,
.table .btn-sm:hover,
.table .btn-xs:hover,
.table td .btn:hover,
.quick-actions .btn:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  border-color: var(--lw-gray-400) !important;
  color: var(--lw-gray-800) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

.table .btn-group .btn:active,
.table .btn-sm:active,
.table .btn-xs:active,
.table td .btn:active,
.quick-actions .btn:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Hide button text, show only icons */
.table .btn-group .btn span,
.table .btn-sm span,
.table .btn-xs span,
.table td .btn span,
.quick-actions .btn span {
  display: none !important;
}

/* Style action button icons */
.table .btn-group .btn i,
.table .btn-sm i,
.table .btn-xs i,
.table td .btn i,
.quick-actions .btn i {
  font-size: 12px !important;
  color: var(--lw-gray-600) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.table .btn-group .btn:hover i,
.table .btn-sm:hover i,
.table .btn-xs:hover i,
.table td .btn:hover i,
.quick-actions .btn:hover i {
  color: var(--lw-gray-800) !important;
  transform: scale(1.1) !important;
}

/* Subscription button with crown icon - Enhanced */
.subscription-btn,
.btn-subscription,
.table .subscription-btn,
.table .btn-subscription,
.quick-actions .subscription-btn,
.quick-actions .btn-subscription {
  position: relative !important;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-600) !important;
  font-size: 0 !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: var(--lw-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 2px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.subscription-btn::before,
.btn-subscription::before,
.table .subscription-btn::before,
.table .btn-subscription::before,
.quick-actions .subscription-btn::before,
.quick-actions .btn-subscription::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L14.5 8.5l4.5-1.5a.5.5 0 0 1 .65.65L18.5 12l1.15 4.35a.5.5 0 0 1-.65.65L14.5 15.5l-2.062 5.234a.5.5 0 0 1-.876 0L9.5 15.5 5 17a.5.5 0 0 1-.65-.65L5.5 12 4.35 7.65a.5.5 0 0 1 .65-.65L9.5 8.5l2.062-5.234Z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

.subscription-btn:hover::before,
.btn-subscription:hover::before,
.table .subscription-btn:hover::before,
.table .btn-subscription:hover::before,
.quick-actions .subscription-btn:hover::before,
.quick-actions .btn-subscription:hover::before {
  filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important;
}

/* Hide any existing icons in subscription buttons */
.subscription-btn i,
.btn-subscription i,
.table .subscription-btn i,
.table .btn-subscription i,
.quick-actions .subscription-btn i,
.quick-actions .btn-subscription i {
  display: none !important;
}

/* Enhanced subscription button detection - Direct CSS approach */
.btn[title*="subscription" i],
.btn[title*="Subscription" i],
.btn[data-original-title*="subscription" i],
.btn[data-original-title*="Subscription" i],
button[title*="subscription" i],
button[title*="Subscription" i],
.subscription-btn,
.btn-subscription,
a[href*="subscription" i],
a[href*="details"] {
  position: relative !important;
}

/* Direct detection for buttons containing "Subscription" text */
.btn:not(:empty),
a.btn:not(:empty) {
  position: relative !important;
}

.btn[title*="subscription" i]::before,
.btn[title*="Subscription" i]::before,
.btn[data-original-title*="subscription" i]::before,
.btn[data-original-title*="Subscription" i]::before,
button[title*="subscription" i]::before,
button[title*="Subscription" i]::before,
.btn:contains("Subscription")::before,
a[href*="subscription" i]::before,
a[href*="details"]:contains("Subscription")::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L14.5 8.5l4.5-1.5a.5.5 0 0 1 .65.65L18.5 12l1.15 4.35a.5.5 0 0 1-.65.65L14.5 15.5l-2.062 5.234a.5.5 0 0 1-.876 0L9.5 15.5 5 17a.5.5 0 0 1-.65-.65L5.5 12 4.35 7.65a.5.5 0 0 1 .65-.65L9.5 8.5l2.062-5.234Z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important;
}

/* Hide text in subscription buttons detected by title or content */
.btn[title*="subscription" i],
.btn[title*="Subscription" i],
.btn[data-original-title*="subscription" i],
.btn[data-original-title*="Subscription" i],
button[title*="subscription" i],
button[title*="Subscription" i],
.btn:contains("Subscription"),
a[href*="subscription" i],
a[href*="details"]:contains("Subscription"),
.subscription-btn,
.btn-subscription {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  line-height: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Ensure the icon is visible */
.btn[title*="subscription" i]::before,
.btn[title*="Subscription" i]::before,
.btn:contains("Subscription")::before,
a[href*="subscription" i]::before,
a[href*="details"]:contains("Subscription")::before {
  color: var(--lw-gray-600) !important;
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Crown icon for subscription buttons added via JavaScript - BLACK COLOR */
.crown-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L14.5 8.5l4.5-1.5a.5.5 0 0 1 .65.65L18.5 12l1.15 4.35a.5.5 0 0 1-.65.65L14.5 15.5l-2.062 5.234a.5.5 0 0 1-.876 0L9.5 15.5 5 17a.5.5 0 0 1-.65-.65L5.5 12 4.35 7.65a.5.5 0 0 1 .65-.65L9.5 8.5l2.062-5.234Z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Subscription button styling when detected by JavaScript */
.subscription-btn {
  position: relative !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  line-height: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Force subscription icon for any button with "Subscription" text - CSS only approach - BLACK */
.btn[href*="details"]::before,
a.btn[href*="details"]::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L14.5 8.5l4.5-1.5a.5.5 0 0 1 .65.65L18.5 12l1.15 4.35a.5.5 0 0 1-.65.65L14.5 15.5l-2.062 5.234a.5.5 0 0 1-.876 0L9.5 15.5 5 17a.5.5 0 0 1-.65-.65L5.5 12 4.35 7.65a.5.5 0 0 1 .65-.65L9.5 8.5l2.062-5.234Z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important;
  z-index: 1 !important;
}

/* Hide text for buttons with details href - AGGRESSIVE TEXT HIDING */
/*.btn[href*="details"],
a.btn[href*="details"],
a[href*="details"],
button[href*="details"] {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  line-height: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}*/

/* Hide all child text nodes in subscription buttons */
/*.btn[href*="details"] *,
a.btn[href*="details"] *,
a[href*="details"] *,
.subscription-btn *,
.btn-subscription * {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  visibility: hidden !important;
}*/

/* Ensure crown icon is visible */
.btn[href*="details"] .crown-icon,
a.btn[href*="details"] .crown-icon,
a[href*="details"] .crown-icon,
.subscription-btn .crown-icon,
.btn-subscription .crown-icon {
  visibility: visible !important;
  font-size: 14px !important;
  color: black !important;
  text-indent: 0 !important;
}

/* Modern modal/popup styling */
.modal-content {
  border: none !important;
  border-radius: var(--lw-radius-xl) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.modal-header {
  background: var(--lw-white) !important;
  color: var(--lw-gray-800) !important;
  padding: var(--lw-spacing-lg) var(--lw-spacing-xl) !important;
  border-bottom: 1px solid var(--lw-gray-200) !important;
}

.modal-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-800) !important;
}

.modal-body {
  padding: var(--lw-spacing-xl) !important;
  background: var(--lw-white) !important;
}

.modal-content {
  background: var(--lw-white) !important;
}

.modal-footer {
  padding: var(--lw-spacing-lg) var(--lw-spacing-xl) !important;
  background: var(--lw-white) !important;
  border-top: 1px solid var(--lw-gray-200) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--lw-spacing-md) !important;
}

/* Centered modal buttons with consistent width */
.modal-footer .btn {
  min-width: 120px !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-lg) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border-radius: var(--lw-radius-md) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: center !important;
}

.modal-footer .btn-primary {
  background: var(--lw-whatsapp-gradient) !important;
  border: none !important;
  color: white !important;
}

.modal-footer .btn-primary:hover {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-md) !important;
}

.modal-footer .btn-secondary,
.modal-footer .btn-default {
  background: var(--lw-white) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: #000000 !important;
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-default:hover {
  background: var(--lw-gray-100) !important;
  color: #000000 !important;
  transform: translateY(-1px) !important;
}

.modal-footer .btn-danger {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
  border: none !important;
  color: white !important;
}

.modal-footer .btn-danger:hover {
  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-md) !important;
}

/* Optimized input groups in modals */
.modal .input-group {
  position: relative !important;
  border: 1px solid var(--lw-gray-300) !important;
  border-radius: var(--lw-radius-md) !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.modal .input-group:focus-within {
  border-color: var(--lw-whatsapp-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
}

.modal .input-group .form-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.modal .input-group .input-group-text {
  border: none !important;
  background: var(--lw-gray-50) !important;
  color: var(--lw-gray-500) !important;
  padding: var(--lw-spacing-md) !important;
}

/* Modern outlined icons for ALL input groups - login, modal, vendor popup, etc */

.modal .input-group .input-group-text i,
.input-group .input-group-text i,
.form-group .input-group .input-group-text i,
.login-form .input-group .input-group-text i,
.vendor-form .input-group .input-group-text i,
.popup .input-group .input-group-text i,
.card .input-group .input-group-text i,
.auth-form .input-group .input-group-text i {
  /*font-size: 0 !important;*/
  position: relative !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
}

.modal .input-group .input-group-text i::before,
.input-group .input-group-text i::before,
.form-group .input-group .input-group-text i::before,
.login-form .input-group .input-group-text i::before,
.vendor-form .input-group .input-group-text i::before,
.popup .input-group .input-group-text i::before,
.card .input-group .input-group-text i::before,
.auth-form .input-group .input-group-text i::before {
  /*content: '' !important;*/
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 16px !important;
  height: 16px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important;
}

/* Common input icons for ALL contexts */
.modal .input-group .input-group-text i.fa-user::before,
.input-group .input-group-text i.fa-user::before,
.form-group .input-group .input-group-text i.fa-user::before,
.login-form .input-group .input-group-text i.fa-user::before,
.vendor-form .input-group .input-group-text i.fa-user::before,
.popup .input-group .input-group-text i.fa-user::before,
.card .input-group .input-group-text i.fa-user::before,
.auth-form .input-group .input-group-text i.fa-user::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

.modal .input-group .input-group-text i.fa-envelope::before,
.input-group .input-group-text i.fa-envelope::before,
.modal .input-group .input-group-text i.fa-at::before,
.input-group .input-group-text i.fa-at::before,
.form-group .input-group .input-group-text i.fa-envelope::before,
.login-form .input-group .input-group-text i.fa-envelope::before,
.vendor-form .input-group .input-group-text i.fa-envelope::before,
.popup .input-group .input-group-text i.fa-envelope::before,
.card .input-group .input-group-text i.fa-envelope::before,
.auth-form .input-group .input-group-text i.fa-envelope::before,
.form-group .input-group .input-group-text i.fa-at::before,
.login-form .input-group .input-group-text i.fa-at::before,
.vendor-form .input-group .input-group-text i.fa-at::before,
.popup .input-group .input-group-text i.fa-at::before,
.card .input-group .input-group-text i.fa-at::before,
.auth-form .input-group .input-group-text i.fa-at::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") !important;
}

/* Lock icon for all contexts */
.modal .input-group .input-group-text i.fa-lock::before,
.input-group .input-group-text i.fa-lock::before,
.form-group .input-group .input-group-text i.fa-lock::before,
.login-form .input-group .input-group-text i.fa-lock::before,
.vendor-form .input-group .input-group-text i.fa-lock::before,
.popup .input-group .input-group-text i.fa-lock::before,
.card .input-group .input-group-text i.fa-lock::before,
.auth-form .input-group .input-group-text i.fa-lock::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
}

/* Phone icon for all contexts */
.modal .input-group .input-group-text i.fa-phone::before,
.input-group .input-group-text i.fa-phone::before,
.form-group .input-group-text i.fa-phone::before,
.login-form .input-group .input-group-text i.fa-phone::before,
.vendor-form .input-group .input-group-text i.fa-phone::before,
.popup .input-group .input-group-text i.fa-phone::before,
.card .input-group .input-group-text i.fa-phone::before,
.auth-form .input-group .input-group-text i.fa-phone::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
}

.modal .input-group .input-group-text i.fa-key::before,
.input-group .input-group-text i.fa-key::before {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'/%3E%3C/svg%3E") !important;*/
}

.modal .input-group .input-group-text i.fa-building::before,
.input-group .input-group-text i.fa-building::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v8h20v-8a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E") !important;
}

/* Globe icon for all contexts */
.modal .input-group .input-group-text i.fa-globe::before,
.input-group .input-group-text i.fa-globe::before,
.form-group .input-group .input-group-text i.fa-globe::before,
.login-form .input-group .input-group-text i.fa-globe::before,
.vendor-form .input-group .input-group-text i.fa-globe::before,
.popup .input-group .input-group-text i.fa-globe::before,
.card .input-group .input-group-text i.fa-globe::before,
.auth-form .input-group .input-group-text i.fa-globe::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' x2='22' y1='12' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;
}

/* Additional common form icons */
.modal .input-group .input-group-text i.fa-calendar::before,
.input-group .input-group-text i.fa-calendar::before,
.form-group .input-group .input-group-text i.fa-calendar::before,
.login-form .input-group .input-group-text i.fa-calendar::before,
.vendor-form .input-group .input-group-text i.fa-calendar::before,
.popup .input-group .input-group-text i.fa-calendar::before,
.card .input-group .input-group-text i.fa-calendar::before,
.auth-form .input-group .input-group-text i.fa-calendar::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3C/svg%3E") !important;
}

.modal .input-group .input-group-text i.fa-credit-card::before,
.input-group .input-group-text i.fa-credit-card::before,
.form-group .input-group .input-group-text i.fa-credit-card::before,
.login-form .input-group .input-group-text i.fa-credit-card::before,
.vendor-form .input-group .input-group-text i.fa-credit-card::before,
.popup .input-group .input-group-text i.fa-credit-card::before,
.card .input-group .input-group-text i.fa-credit-card::before,
.auth-form .input-group .input-group-text i.fa-credit-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E") !important;
}

.modal .input-group .input-group-text i.fa-map-marker::before,
.input-group .input-group-text i.fa-map-marker::before,
.modal .input-group .input-group-text i.fa-map-marker-alt::before,
.input-group .input-group-text i.fa-map-marker-alt::before,
.form-group .input-group .input-group-text i.fa-map-marker::before,
.login-form .input-group .input-group-text i.fa-map-marker::before,
.vendor-form .input-group .input-group-text i.fa-map-marker::before,
.popup .input-group .input-group-text i.fa-map-marker::before,
.card .input-group .input-group-text i.fa-map-marker::before,
.auth-form .input-group .input-group-text i.fa-map-marker::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important;
}

/* Additional form icons for vendor forms */
.modal .input-group .input-group-text i.fa-id-badge::before,
.input-group .input-group-text i.fa-id-badge::before,
.form-group .input-group .input-group-text i.fa-id-badge::before,
.login-form .input-group .input-group-text i.fa-id-badge::before,
.vendor-form .input-group .input-group-text i.fa-id-badge::before,
.popup .input-group .input-group-text i.fa-id-badge::before,
.card .input-group .input-group-text i.fa-id-badge::before,
.auth-form .input-group .input-group-text i.fa-id-badge::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='12' x='3' y='4' rx='2'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M15 13.4a3 3 0 0 0-6 0'/%3E%3C/svg%3E") !important;
}

/* Username/Account icon */
.modal .input-group .input-group-text i.fa-user-circle::before,
.input-group .input-group-text i.fa-user-circle::before,
.modal .input-group .input-group-text i.fa-id-card::before,
.input-group .input-group-text i.fa-id-card::before,
.form-group .input-group .input-group-text i.fa-user-circle::before,
.login-form .input-group .input-group-text i.fa-user-circle::before,
.vendor-form .input-group .input-group-text i.fa-user-circle::before,
.popup .input-group .input-group-text i.fa-user-circle::before,
.card .input-group .input-group-text i.fa-user-circle::before,
.auth-form .input-group .input-group-text i.fa-user-circle::before,
.form-group .input-group .input-group-text i.fa-id-card::before,
.login-form .input-group .input-group-text i.fa-id-card::before,
.vendor-form .input-group .input-group-text i.fa-id-card::before,
.popup .input-group .input-group-text i.fa-id-card::before,
.card .input-group .input-group-text i.fa-id-card::before,
.auth-form .input-group .input-group-text i.fa-id-card::before {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='12' x='3' y='4' rx='2'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M15 13.4a3 3 0 0 0-6 0'/%3E%3C/svg%3E") !important;*/
}

/* Mobile/Phone icon (alternative) */
.modal .input-group .input-group-text i.fa-mobile::before,
.input-group .input-group-text i.fa-mobile::before,
.modal .input-group .input-group-text i.fa-mobile-alt::before,
.input-group .input-group-text i.fa-mobile-alt::before,
.modal .input-group .input-group-text i.fas.fa-mobile-alt::before,
.input-group .input-group-text i.fas.fa-mobile-alt::before,
.form-group .input-group .input-group-text i.fa-mobile::before,
.login-form .input-group .input-group-text i.fa-mobile::before,
.vendor-form .input-group .input-group-text i.fa-mobile::before,
.popup .input-group .input-group-text i.fa-mobile::before,
.card .input-group .input-group-text i.fa-mobile::before,
.auth-form .input-group .input-group-text i.fa-mobile::before,
.form-group .input-group .input-group-text i.fas.fa-mobile-alt::before,
.login-form .input-group .input-group-text i.fas.fa-mobile-alt::before,
.vendor-form .input-group .input-group-text i.fas.fa-mobile-alt::before,
.popup .input-group .input-group-text i.fas.fa-mobile-alt::before,
.card .input-group .input-group-text i.fas.fa-mobile-alt::before,
.auth-form .input-group .input-group-text i.fas.fa-mobile-alt::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E") !important;
}

/* Subscription/Crown icon */
.modal .input-group .input-group-text i.fa-crown::before,
.input-group .input-group-text i.fa-crown::before,
.form-group .input-group .input-group-text i.fa-crown::before,
.login-form .input-group .input-group-text i.fa-crown::before,
.vendor-form .input-group .input-group-text i.fa-crown::before,
.popup .input-group .input-group-text i.fa-crown::before,
.card .input-group .input-group-text i.fa-crown::before,
.auth-form .input-group .input-group-text i.fa-crown::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L14.5 8.5l4.5-1.5a.5.5 0 0 1 .65.65L18.5 12l1.15 4.35a.5.5 0 0 1-.65.65L14.5 15.5l-2.062 5.234a.5.5 0 0 1-.876 0L9.5 15.5 5 17a.5.5 0 0 1-.65-.65L5.5 12 4.35 7.65a.5.5 0 0 1 .65-.65L9.5 8.5l2.062-5.234Z'/%3E%3C/svg%3E") !important;
}

/* Text/Title icon */
.modal .input-group .input-group-text i.fa-text::before,
.input-group .input-group-text i.fa-text::before,
.modal .input-group .input-group-text i.fa-font::before,
.input-group .input-group-text i.fa-font::before,
.modal .input-group .input-group-text i.fa-user-alt::before,
.input-group .input-group-text i.fa-user-alt::before,
.form-group .input-group .input-group-text i.fa-text::before,
.login-form .input-group .input-group-text i.fa-text::before,
.vendor-form .input-group .input-group-text i.fa-text::before,
.popup .input-group .input-group-text i.fa-text::before,
.card .input-group .input-group-text i.fa-text::before,
.auth-form .input-group .input-group-text i.fa-text::before,
.form-group .input-group .input-group-text i.fa-user-alt::before,
.login-form .input-group .input-group-text i.fa-user-alt::before,
.vendor-form .input-group .input-group-text i.fa-user-alt::before,
.popup .input-group .input-group-text i.fa-user-alt::before,
.card .input-group .input-group-text i.fa-user-alt::before,
.auth-form .input-group .input-group-text i.fa-user-alt::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

/* Navigation improvements */
.navbar-nav .nav-link {
  font-size: 0.85rem !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  transition: all 0.3s ease !important;
}

/* Tab styling with all caps and small size */
.nav-tabs .nav-link,
.nav-pills .nav-link {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--lw-gray-600) !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-lg) !important;
  border-radius: var(--lw-radius-md) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid transparent !important;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  color: var(--lw-whatsapp-primary) !important;
  background: var(--lw-gray-50) !important;
  border-color: var(--lw-gray-200) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  color: var(--lw-whatsapp-dark) !important;
  background: var(--lw-whatsapp-light) !important;
  border-color: var(--lw-whatsapp-primary) !important;
  font-weight: 700 !important;
}

.nav-tabs {
  border-bottom: 1px solid var(--lw-gray-200) !important;
}

.nav-tabs .nav-link {
  border-bottom-color: transparent !important;
  margin-bottom: -1px !important;
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--lw-whatsapp-primary) !important;
}

/* Breadcrumb styling */
.breadcrumb {
  background: var(--lw-gradient-primary) !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  border-radius: 6px !important;
  margin-bottom: var(--lw-spacing-md) !important;
}

.breadcrumb-item {
  font-size: 0.8rem !important;
}

.breadcrumb-item a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
}

.breadcrumb-item.active {
  color: white !important;
}

/* Alert styling - black text, no borders */
.alert {
  border: none !important;
  border-radius: var(--lw-radius-md) !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-lg) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #000000 !important;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

.alert-success {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  color: #000000 !important;
  border: none !important;
}

.alert-primary {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  color: #000000 !important;
  border: none !important;
}

.alert-danger,
.alert-error {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  color: #000000 !important;
  border: none !important;
}

.alert-warning {
  /*background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;*/
  background: linear-gradient(135deg, #fff396 0%, #eeefba 100%) !important;
  color: #000000 !important;
  border: none !important;

}

.alert-info {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  color: #000000 !important;
  border: none !important;
}

/* Force black text for all alert content */
.alert * {
  color: #000000 !important;
}

/* Badge styling */
.badge {
  font-size: 0.7rem !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  border-radius: 4px !important;
}

.badge-primary {
  background: var(--lw-gradient-primary) !important;
}

.badge-success {
  background: var(--lw-gradient-success) !important;
}

/* Smooth transitions for better UX */
* {
  transition: all 0.3s ease !important;
}

/* Remove excessive margins and padding */
.mb-4 {
  margin-bottom: var(--lw-spacing-md) !important;
}

.mb-3 {
  margin-bottom: var(--lw-spacing-sm) !important;
}

.mb-2 {
  margin-bottom: var(--lw-spacing-xs) !important;
}

.mt-4 {
  margin-top: var(--lw-spacing-md) !important;
}

.mt-3 {
  margin-top: var(--lw-spacing-sm) !important;
}

.mt-2 {
  margin-top: var(--lw-spacing-xs) !important;
}

.p-4 {
  padding: var(--lw-spacing-md) !important;
}

.p-3 {
  padding: var(--lw-spacing-sm) !important;
}

.p-2 {
  padding: var(--lw-spacing-xs) !important;
}

.px-4 {
  padding-left: var(--lw-spacing-md) !important;
  padding-right: var(--lw-spacing-md) !important;
}

.py-4 {
  padding-top: var(--lw-spacing-md) !important;
  padding-bottom: var(--lw-spacing-md) !important;
}

/* Clean sidebar styling */
.lw-sidebar-container {
  background: var(--lw-white) !important;
  box-shadow: var(--lw-shadow-md) !important;
  border-right: 1px solid var(--lw-gray-200) !important;
}

.navbar-vertical .navbar-nav .nav-link {
  color: var(--lw-gray-600) !important;
  font-size: 0.8rem !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  border-radius: var(--lw-radius-md) !important;
  margin: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 500 !important;
  position: relative !important;
  overflow: hidden !important;
}

.navbar-vertical .navbar-nav .nav-link::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(37, 211, 102, 0.1), transparent) !important;
  transition: left 0.5s ease !important;
}

.navbar-vertical .navbar-nav .nav-link:hover::before {
  left: 100% !important;
}

.navbar-vertical .navbar-nav .nav-link:hover {
  background: var(--lw-gray-100) !important;
  color: var(--lw-whatsapp-primary) !important;
  transform: translateX(4px) scale(1.02) !important;
  box-shadow: var(--lw-shadow-md) !important;
}

.navbar-vertical .navbar-nav .nav-link.active {
  background: var(--lw-whatsapp-light) !important;
  color: var(--lw-whatsapp-dark) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--lw-whatsapp-primary) !important;
  transform: translateX(2px) !important;
}

.navbar-vertical .navbar-nav .nav-link i {
  font-size: 1rem !important;
  margin-right: var(--lw-spacing-sm) !important;
  width: 20px !important;
  text-align: center !important;
}

/* Sidebar brand styling */
.navbar-brand {
  padding: var(--lw-spacing-md) var(--lw-spacing-lg) !important;
}

.navbar-brand-img {
  max-height: 55px !important;
  min-height: 50px !important;
}

/* Remove collapse menu functionality only in vendor console */
.vendor-console .lw-expandable-nav,
.vendor-console .collapse,
.vendor-console .collapsing,
.vendor-console [data-toggle="collapse"],
.vendor-console .navbar-vertical .collapse.show {
  display: none !important;
}

/* Keep collapse functionality in central console but style it better */
.lw-expandable-nav {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: var(--lw-radius-md) !important;
  margin: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  border: 1px solid var(--lw-gray-200) !important;
}

.lw-expandable-nav .nav-link {
  font-size: 0.75rem !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-md) var(--lw-spacing-xs) 2.5rem !important;
  color: var(--lw-gray-600) !important;
}

.lw-expandable-nav .nav-link:hover {
  color: var(--lw-whatsapp-primary) !important;
  background: var(--lw-gray-100) !important;
}

/* Ensure all nav items are visible */
.navbar-vertical .navbar-nav {
  display: block !important;
}

.navbar-vertical .navbar-nav .nav-item {
  display: block !important;
}

/* Add user menu to sidebar */
.sidebar-user-menu {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--lw-white) !important;
  border-top: 1px solid var(--lw-gray-200) !important;
  padding: var(--lw-spacing-md) !important;
}

.sidebar-user-info {
  display: flex !important;
  align-items: center !important;
  padding: var(--lw-spacing-sm) !important;
  border-radius: var(--lw-radius-md) !important;
  background: var(--lw-gray-50) !important;
  margin-bottom: var(--lw-spacing-sm) !important;
}

.sidebar-user-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--lw-whatsapp-gradient) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-weight: 600 !important;
  margin-right: var(--lw-spacing-sm) !important;
}

.sidebar-user-details {
  flex: 1 !important;
}

.sidebar-user-name {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-800) !important;
  margin: 0 !important;
}

.sidebar-user-role {
  font-size: 0.7rem !important;
  color: var(--lw-gray-500) !important;
  margin: 0 !important;
}

/* Dropdown menu in sidebar */
.navbar-vertical .dropdown-menu {
  background: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
}

.navbar-vertical .dropdown-item {
  color: var(--lw-primary-color) !important;
  font-size: 0.85rem !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
}

.navbar-vertical .dropdown-item:hover {
  background: var(--lw-gradient-primary) !important;
  color: white !important;
}

/* Much smaller home page stats cards */
.card-stats {
  background: white !important;
  border: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.card-stats:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.card-stats .card-body {
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
}

.card-stats .h2 {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: var(--lw-whatsapp-primary) !important;
  margin-bottom: var(--lw-spacing-xs) !important;
  line-height: 1.2 !important;
}

.card-stats .card-title {
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--lw-gray-600) !important;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
}

.card-stats .icon {
  background: var(--lw-whatsapp-gradient) !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 4px !important;
}

.card-stats .icon i {
  font-size: 0.9rem !important;
  color: white !important;
}

/* Modern outlined icons replacement for sidebar */
/* Hide original FontAwesome icons and replace with modern outlined versions */
.navbar-vertical .nav-link i.fa {
  font-size: 0 !important;
  position: relative !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: var(--lw-spacing-sm) !important;
}

.navbar-vertical .nav-link i.fa::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 18px !important;
  height: 18px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Enhanced icon hover and active states with animations */
.navbar-vertical .nav-link:hover i.fa::before {
  filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%) !important;
  transform: translate(-50%, -50%) scale(1.15) rotate(5deg) !important;
  animation: iconBounce 0.6s ease-in-out !important;
}

/* Icon bounce animation */
@keyframes iconBounce {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1.15) rotate(5deg);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.25) rotate(-5deg);
  }
}

/* Icon pulse animation for active state */
.navbar-vertical .nav-link.active i.fa::before {
  filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%) !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
  animation: iconPulse 2s infinite !important;
}

@keyframes iconPulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1.1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* Dashboard icon */
.navbar-vertical .nav-link i.fa-tachometer-alt::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E") !important;
}

/* Store/Vendors icon */
.navbar-vertical .nav-link i.fa-store::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z'/%3E%3Cpath d='m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9'/%3E%3Cpath d='M12 3v6'/%3E%3C/svg%3E") !important;
}

/* Users icon */
.navbar-vertical .nav-link i.fa-users::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") !important;
}

/* User icon */
.navbar-vertical .nav-link i.fa-user::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

/* Settings/Cogs icon */
.navbar-vertical .nav-link i.fa-cogs::before,
.navbar-vertical .nav-link i.fa-cog::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
}

/* Globe/Language icon */
.navbar-vertical .nav-link i.fa-language::before {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' x2='22' y1='12' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;*/
}

/* Comments/Chat icon */
.navbar-vertical .nav-link i.fa-comments::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
}

/* Bullhorn/Campaign icon */
.navbar-vertical .nav-link i.fa-bullhorn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M21 6v8a2 2 0 0 1-2 2H7.5'/%3E%3Cpath d='M7.5 14 7 10l4-4 4 4v4'/%3E%3C/svg%3E") !important;
}

/* QR Code icon */
.navbar-vertical .nav-link i.fa-qrcode::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='5' height='5' x='3' y='3' rx='1'/%3E%3Crect width='5' height='5' x='16' y='3' rx='1'/%3E%3Crect width='5' height='5' x='3' y='16' rx='1'/%3E%3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 21v.01'/%3E%3Cpath d='M12 7v3a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M12 3h.01'/%3E%3Cpath d='M12 16v.01'/%3E%3Cpath d='M16 12h1'/%3E%3Cpath d='M21 12v.01'/%3E%3Cpath d='M12 21v-1'/%3E%3C/svg%3E") !important;
}

/* List icon */
.navbar-vertical .nav-link i.fa-list::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' x2='21' y1='6' y2='6'/%3E%3Cline x1='8' x2='21' y1='12' y2='12'/%3E%3Cline x1='8' x2='21' y1='18' y2='18'/%3E%3Cline x1='3' x2='3.01' y1='6' y2='6'/%3E%3Cline x1='3' x2='3.01' y1='12' y2='12'/%3E%3Cline x1='3' x2='3.01' y1='18' y2='18'/%3E%3C/svg%3E") !important;
}

/* List Alt/Groups icon */
.navbar-vertical .nav-link i.fa-list-alt::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E") !important;
}

/* Stream/Custom Fields icon */
.navbar-vertical .nav-link i.fa-stream::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E") !important;
}

/* Layer Group/Templates icon */
.navbar-vertical .nav-link i.fa-layer-group::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Crect width='10' height='8' x='7' y='8' rx='1'/%3E%3C/svg%3E") !important;
}

/* Robot/Bot icon */
.navbar-vertical .nav-link i.fa-robot::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='10' x='3' y='11' rx='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v4'/%3E%3Cline x1='8' x2='8' y1='16' y2='16'/%3E%3Cline x1='16' x2='16' y1='16' y2='16'/%3E%3C/svg%3E") !important;
}

/* Project Diagram/Flows icon */
.navbar-vertical .nav-link i.fa-project-diagram::before {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='8' x='2' y='2' rx='2'/%3E%3Cpath d='M14 2c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2'/%3E%3Cpath d='M20 2c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2'/%3E%3Cpath d='M10 18H5c-1.7 0-3-1.3-3-3v-1'/%3E%3Cpolyline points='7,21 10,18 7,15'/%3E%3Crect width='8' height='8' x='14' y='14' rx='2'/%3E%3C/svg%3E") !important;*/
}

/* ID Card/Subscription icon */
.navbar-vertical .nav-link i.fa-id-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='12' x='3' y='4' rx='2'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M15 13.4a3 3 0 0 0-6 0'/%3E%3C/svg%3E") !important;
}

/* History/Message Log icon */
.navbar-vertical .nav-link i.fa-history::before {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E") !important;*/
}

/* WhatsApp icon */
.navbar-vertical .nav-link i.fa-whatsapp::before {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") !important;*/
}

/* Brain/AI icon */
.navbar-vertical .nav-link i.fa-brain::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z'/%3E%3Cpath d='M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z'/%3E%3Cpath d='M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4'/%3E%3Cpath d='M17.599 6.5a3 3 0 0 0 .399-1.375'/%3E%3Cpath d='M6.003 5.125A3 3 0 0 0 6.401 6.5'/%3E%3Cpath d='M3.477 10.896a4 4 0 0 1 .585-.396'/%3E%3Cpath d='M19.938 10.5a4 4 0 0 1 .585.396'/%3E%3Cpath d='M6 18a4 4 0 0 1-1.967-.516'/%3E%3Cpath d='M19.967 17.484A4 4 0 0 1 18 18'/%3E%3C/svg%3E") !important;
}

/* Terminal/API icon */
.navbar-vertical .nav-link i.fa-terminal::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,17 10,11 4,5'/%3E%3Cline x1='12' x2='20' y1='19' y2='19'/%3E%3C/svg%3E") !important;
}

/* Money/Currency icon */
.navbar-vertical .nav-link i.fa-money-check-alt::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E") !important;
}

/* At/Email icon */
.navbar-vertical .nav-link i.fa-at::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E") !important;
}

/* User Plus/Social Login icon - Updated */
.navbar-vertical .nav-link i.fa-user-plus::before,
.navbar-vertical .nav-link i.fas.fa-user-plus::before {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4-4h.5'/%3E%3Cpath d='M19.5 14a2.5 2.5 0 0 1 0 5 2.5 2.5 0 0 1 0-5'/%3E%3Cpath d='M19.5 21a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5'/%3E%3Cpath d='M22 16.5v1a2 2 0 0 1-2 2h-1.5'/%3E%3Cpath d='M17 16.5v1a2 2 0 0 0 2 2h1.5'/%3E%3C/svg%3E") !important;*/
}

/* Puzzle Piece/Addons icon - Updated */
.navbar-vertical .nav-link i.fa-puzzle-piece::before,
.navbar-vertical .nav-link i.fas.fa-puzzle-piece::before {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 9h6v6H9z'/%3E%3Cpath d='M9 3v6'/%3E%3Cpath d='M21 9h-6'/%3E%3Cpath d='M9 21v-6'/%3E%3Cpath d='M3 9h6'/%3E%3C/svg%3E") !important;*/
}

/* Certificate/License icon - Updated */
.navbar-vertical .nav-link i.fa-certificate::before,
.navbar-vertical .nav-link i.fas.fa-certificate::before {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7l-5-5Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M8 13h2'/%3E%3Cpath d='M14 13h2'/%3E%3Cpath d='M8 17h2'/%3E%3Cpath d='M14 17h2'/%3E%3C/svg%3E") !important;*/
}

/* File/Pages icon - Updated */
.navbar-vertical .nav-link i.fa-file::before,
.navbar-vertical .nav-link i.fas.fa-file::before {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7l-5-5Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") !important;*/
}

/* User Tag/Subscription icon */
.navbar-vertical .nav-link i.fa-user-tag::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M15 2v6h6l-6-6Z'/%3E%3C/svg%3E") !important;
}

/* Sync Alt/Auto icon */
.navbar-vertical .nav-link i.fa-sync-alt::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E") !important;
}

/* Facebook/WhatsApp Onboarding icon - Updated */
.navbar-vertical .nav-link i.fa-facebook::before,
.navbar-vertical .nav-link i.fab.fa-facebook::before {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3Cpath d='M9 10a3 3 0 0 0 6 0'/%3E%3Cpath d='M9 14h6'/%3E%3C/svg%3E") !important;*/
}

/* Sign Out icon */
.navbar-vertical .nav-link i.fa-sign-out-alt::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16,17 21,12 16,7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E") !important;
}

/* Bars/Menu icon */
.navbar-vertical .nav-link i.fa-bars::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='12' y2='12'/%3E%3Cline x1='4' x2='20' y1='6' y2='6'/%3E%3Cline x1='4' x2='20' y1='18' y2='18'/%3E%3C/svg%3E") !important;
}

/* Dark mode toggle button */
.dark-mode-toggle {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  background: var(--lw-whatsapp-gradient) !important;
  border: none !important;
  color: white !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  box-shadow: var(--lw-shadow-lg) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dark-mode-toggle:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3) !important;
}

/* Enhanced dark mode for stats cards */
[data-theme="dark"] .card-stats {
  background: var(--lw-gray-50) !important;
  border: 1px solid var(--lw-gray-200) !important;
}

[data-theme="dark"] .card-stats .h2 {
  color: var(--lw-whatsapp-primary) !important;
}

[data-theme="dark"] .card-stats .card-title {
  color: var(--lw-gray-600) !important;
}

/* Dark mode for DataTables */
[data-theme="dark"] .dataTables_wrapper {
  background: var(--lw-gray-50) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-300) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .dataTables_wrapper .page-link {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-300) !important;
  color: var(--lw-gray-700) !important;
}

[data-theme="dark"] .dataTables_wrapper .page-link:hover {
  background: var(--lw-whatsapp-primary) !important;
  border-color: var(--lw-whatsapp-primary) !important;
  color: white !important;
}

/* Dark mode for action buttons */
[data-theme="dark"] .table .btn-group .btn,
[data-theme="dark"] .table .btn-sm,
[data-theme="dark"] .table .btn-xs,
[data-theme="dark"] .table td .btn,
[data-theme="dark"] .quick-actions .btn {
  background: linear-gradient(135deg, var(--lw-gray-100) 0%, var(--lw-gray-200) 100%) !important;
  border-color: var(--lw-gray-300) !important;
  color: var(--lw-gray-700) !important;
}

[data-theme="dark"] .table .btn-group .btn:hover,
[data-theme="dark"] .table .btn-sm:hover,
[data-theme="dark"] .table .btn-xs:hover,
[data-theme="dark"] .table td .btn:hover,
[data-theme="dark"] .quick-actions .btn:hover {
  background: linear-gradient(135deg, var(--lw-gray-200) 0%, var(--lw-gray-300) 100%) !important;
  color: var(--lw-gray-800) !important;
}

/* Print styles */
@media print {

  .navbar-vertical,
  .btn,
  .dropdown,
  .dark-mode-toggle {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
  }

  body {
    font-size: 12pt !important;
    color: black !important;
    background: white !important;
  }

  .table {
    font-size: 10pt !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}

/* Translation Language Form Styling */
.translation-form,
.language-form,
.add-translation-form,
.lw-language-block {
  background: var(--lw-white) !important;
  border: 1px solid var(--lw-gray-200) !important;
  border-radius: var(--lw-radius-lg) !important;
  padding: var(--lw-spacing-xl) !important;
  margin-bottom: var(--lw-spacing-lg) !important;
  box-shadow: var(--lw-shadow-sm) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.translation-form:hover,
.language-form:hover,
.add-translation-form:hover {
  box-shadow: var(--lw-shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* Translation form header */
.translation-form-header,
.language-form-header {
  border-bottom: 2px solid var(--lw-whatsapp-primary) !important;
  padding-bottom: var(--lw-spacing-md) !important;
  margin-bottom: var(--lw-spacing-lg) !important;
}

.translation-form-title,
.language-form-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-800) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.translation-form-title i,
.language-form-title i {
  margin-right: var(--lw-spacing-sm) !important;
  color: var(--lw-whatsapp-primary) !important;
  font-size: 1rem !important;
}

/* Translation form fields */
.translation-form .form-group,
.language-form .form-group {
  margin-bottom: var(--lw-spacing-lg) !important;
}

.translation-form .form-control,
.language-form .form-control {
  border: 1px solid var(--lw-gray-300) !important;
  border-radius: var(--lw-radius-md) !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-lg) !important;
  font-size: 0.85rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: var(--lw-white) !important;
}

.translation-form .form-control:focus,
.language-form .form-control:focus {
  border-color: var(--lw-whatsapp-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
  outline: none !important;
}

/* Language selection dropdown */
.language-select,
.translation-language-select {
  position: relative !important;
}

.language-select select,
.translation-language-select select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--lw-spacing-md) center !important;
  background-size: 16px !important;
  padding-right: 2.5rem !important;
}

/* Translation form buttons */
.translation-form .btn,
.language-form .btn {
  padding: var(--lw-spacing-md) var(--lw-spacing-xl) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border-radius: var(--lw-radius-md) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-right: var(--lw-spacing-sm) !important;
}

.translation-form .btn-primary,
.language-form .btn-primary {
  background: var(--lw-whatsapp-gradient) !important;
  border: none !important;
  color: white !important;
}

.translation-form .btn-primary:hover,
.language-form .btn-primary:hover {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-md) !important;
}

.translation-form .btn-secondary,
.language-form .btn-secondary {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-700) !important;
}

.translation-form .btn-secondary:hover,
.language-form .btn-secondary:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  color: var(--lw-gray-800) !important;
}

/* Language flag icons */
.language-flag {
  display: inline-block !important;
  width: 20px !important;
  height: 15px !important;
  margin-right: var(--lw-spacing-sm) !important;
  border-radius: 2px !important;
  background-size: cover !important;
  background-position: center !important;
  vertical-align: middle !important;
}

/* Translation status indicators */
.translation-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  border-radius: var(--lw-radius-sm) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.translation-status.complete {
  background: var(--lw-whatsapp-light) !important;
  color: var(--lw-whatsapp-dark) !important;
}

.translation-status.incomplete {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
  color: #856404 !important;
}

.translation-status.missing {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%) !important;
  color: #721c24 !important;
}

/* Mobile number helper text styling */
.form-group h5 .text-muted,
.form-group .text-muted,
.lw-form-modal-body .text-muted {
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  color: var(--lw-gray-500) !important;
  margin-top: var(--lw-spacing-xs) !important;
  line-height: 1.3 !important;
}

/* Specific styling for mobile number helper text */
.form-group h5 span.text-muted {
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  color: var(--lw-gray-500) !important;
  display: block !important;
  margin-top: var(--lw-spacing-xs) !important;
}

/* Remove h5 styling when used for helper text */
.form-group h5:has(.text-muted) {
  font-size: inherit !important;
  font-weight: inherit !important;
  margin: 0 !important;
  margin-top: var(--lw-spacing-xs) !important;
}

/* Dark mode for translation forms */
[data-theme="dark"] .translation-form,
[data-theme="dark"] .language-form,
[data-theme="dark"] .add-translation-form {
  background: var(--lw-gray-50) !important;
  border-color: var(--lw-gray-200) !important;
}

[data-theme="dark"] .translation-form-title,
[data-theme="dark"] .language-form-title {
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .translation-form .form-control,
[data-theme="dark"] .language-form .form-control {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-300) !important;
  color: var(--lw-gray-800) !important;
}

/* Enhanced Language Form Styling */
.lw-language-block {
  max-width: 100% !important;
  margin: 0 !important;
  padding: var(--lw-spacing-lg) !important;
  background: var(--lw-white) !important;
  border-radius: var(--lw-radius-lg) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

.lw-language-block label {
  /*font-size: 1.1rem !important;*/
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-800) !important;
  margin-bottom: var(--lw-spacing-md) !important;
  display: flex !important;
  align-items: center !important;
}

.lw-language-block label::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: var(--lw-spacing-sm) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' x2='22' y1='12' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%) !important;
}

.lw-language-block hr {
  border: none !important;
  height: 2px !important;
  background: var(--lw-whatsapp-gradient) !important;
  margin: var(--lw-spacing-md) 0 var(--lw-spacing-lg) 0 !important;
  border-radius: var(--lw-radius-sm) !important;
}

/* Language form input group styling */
.lw-language-block .input-group {
  background: var(--lw-white) !important;
  border: 1px solid var(--lw-gray-300) !important;
  border-radius: var(--lw-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--lw-shadow-sm) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lw-language-block .input-group:focus-within {
  border-color: var(--lw-whatsapp-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
}

.lw-language-block .input-group-text {
  background: var(--lw-gray-50) !important;
  border: none !important;
  color: var(--lw-gray-700) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-lg) !important;
  white-space: nowrap !important;
  min-width: 120px !important;
}

.lw-language-block .form-control {
  border: none !important;
  background: var(--lw-white) !important;
  color: var(--lw-gray-800) !important;
  font-size: 0.85rem !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-lg) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lw-language-block .form-control:focus {
  box-shadow: none !important;
  background: var(--lw-white) !important;
}

.lw-language-block .form-control::placeholder {
  color: var(--lw-gray-500) !important;
  font-style: italic !important;
}

/* RTL Checkbox styling */
.lw-language-block .custom-control {
  margin: 0 !important;
  padding: 0 !important;
}

.lw-language-block .custom-control-label {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--lw-gray-700) !important;
  margin-left: var(--lw-spacing-sm) !important;
}

.lw-language-block .custom-control-input:checked~.custom-control-label::before {
  background: var(--lw-whatsapp-gradient) !important;
  border-color: var(--lw-whatsapp-primary) !important;
}

/* Save button styling */
.lw-language-block .btn.lw-save-language {
  background: var(--lw-whatsapp-gradient) !important;
  border: none !important;
  color: white !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-xl) !important;
  border-radius: 0 var(--lw-radius-md) var(--lw-radius-md) 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-width: 100px !important;
}

.lw-language-block .btn.lw-save-language:hover {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-md) !important;
}

.lw-language-block .btn.lw-save-language:active {
  transform: translateY(0) !important;
}

/* Helper text styling */
.lw-language-block .form-text {
  font-size: 0.7rem !important;
  color: var(--lw-gray-500) !important;
  margin-top: var(--lw-spacing-md) !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  background: var(--lw-gray-50) !important;
  border-radius: var(--lw-radius-sm) !important;
  border-left: 3px solid var(--lw-whatsapp-primary) !important;
}

/* Dark mode for language form */
[data-theme="dark"] .lw-language-block {
  background: var(--lw-gray-50) !important;
  border-color: var(--lw-gray-200) !important;
}

[data-theme="dark"] .lw-language-block label {
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .lw-language-block .input-group {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-300) !important;
}

[data-theme="dark"] .lw-language-block .input-group-text {
  background: var(--lw-gray-200) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .lw-language-block .form-control {
  background: var(--lw-gray-100) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .lw-language-block .form-text {
  background: var(--lw-gray-200) !important;
  color: var(--lw-gray-700) !important;
}

/* Translation Page Improvements */
.translations-page .card-header {
  background: var(--lw-white) !important;
  border-bottom: 2px solid var(--lw-whatsapp-primary) !important;
  padding: var(--lw-spacing-lg) var(--lw-spacing-xl) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-800) !important;
}

.translations-page .card-header::before {
  content: '' !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: var(--lw-spacing-sm) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l6 6'/%3E%3Cpath d='M4 14l6-6 2-3'/%3E%3Cpath d='M2 5h12'/%3E%3Cpath d='M7 2h1'/%3E%3Cpath d='M22 22l-5-10-5 10'/%3E%3Cpath d='M14 18h6'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%) !important;
}

/* Direct Action Buttons for Translation Table */
.translations-table .btn-group,
.translations-page .btn-group {
  display: flex !important;
  gap: var(--lw-spacing-xs) !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

/* Hide dropdown toggle and menu */
.translations-table .dropdown-toggle,
.translations-page .dropdown-toggle {
  display: none !important;
}

.translations-table .dropdown-menu,
.translations-page .dropdown-menu {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  gap: var(--lw-spacing-xs) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  min-width: auto !important;
}

.translations-table .direct-actions {
  display: flex !important;
  gap: var(--lw-spacing-xs) !important;
  align-items: center !important;
  justify-content: center !important;
}

.translations-table .direct-actions .btn {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-600) !important;
  font-size: 0 !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: var(--lw-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.translations-table .direct-actions .btn:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  color: var(--lw-gray-800) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

.translations-table .direct-actions .btn i {
  font-size: 12px !important;
  color: inherit !important;
}

.translations-table .direct-actions .btn.btn-rescan {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
  color: #1976d2 !important;
}

.translations-table .direct-actions .btn.btn-edit {
  background: linear-gradient(135deg, #fff3e0 0%, #ffcc02 100%) !important;
  color: #f57c00 !important;
}

.translations-table .direct-actions .btn.btn-delete {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%) !important;
  color: #d32f2f !important;
}

/* Convert dropdown items to direct action buttons */
.translations-table .dropdown-item,
.translations-page .dropdown-item {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-600) !important;
  font-size: 0 !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--lw-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.translations-table .dropdown-item:hover,
.translations-page .dropdown-item:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  color: var(--lw-gray-800) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-sm) !important;
  text-decoration: none !important;
}

.translations-table .dropdown-item i,
.translations-page .dropdown-item i {
  font-size: 12px !important;
  color: inherit !important;
  margin: 0 !important;
}

/* Hide text in dropdown items, keep only icons */
.translations-table .dropdown-item,
.translations-page .dropdown-item {
  text-indent: -9999px !important;
  line-height: 0 !important;
}

.translations-table .dropdown-item i,
.translations-page .dropdown-item i {
  text-indent: 0 !important;
  line-height: normal !important;
  position: absolute !important;
}

/* Specific colors for different actions */
.translations-table .dropdown-item[href*="scan"],
.translations-page .dropdown-item[href*="scan"] {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
  color: #1976d2 !important;
  border-color: #90caf9 !important;
}

.translations-table .dropdown-item[onclick*="openUpdateForm"],
.translations-page .dropdown-item[onclick*="openUpdateForm"] {
  background: linear-gradient(135deg, #fff3e0 0%, #ffcc02 100%) !important;
  color: #f57c00 !important;
  border-color: #ffb74d !important;
}

.translations-table .dropdown-item[data-action*="delete"],
.translations-page .dropdown-item[data-action*="delete"] {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%) !important;
  color: #d32f2f !important;
  border-color: #ef9a9a !important;
}

/* Hover effects for specific actions */
.translations-table .dropdown-item[href*="scan"]:hover,
.translations-page .dropdown-item[href*="scan"]:hover {
  background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%) !important;
  color: #0d47a1 !important;
}

.translations-table .dropdown-item[onclick*="openUpdateForm"]:hover,
.translations-page .dropdown-item[onclick*="openUpdateForm"]:hover {
  background: linear-gradient(135deg, #ffcc02 0%, #ffa000 100%) !important;
  color: #e65100 !important;
}

.translations-table .dropdown-item[data-action*="delete"]:hover,
.translations-page .dropdown-item[data-action*="delete"]:hover {
  background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%) !important;
  color: #b71c1c !important;
}

/* Smaller text throughout translation page */
.translations-page .table {
  font-size: 0.8rem !important;
}

.translations-page .table th {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--lw-gray-700) !important;
  background: var(--lw-gray-50) !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-sm) !important;
}

.translations-page .table td {
  font-size: 0.8rem !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-sm) !important;
  vertical-align: middle !important;
}

.translations-page .table td small {
  font-size: 0.65rem !important;
  color: var(--lw-gray-500) !important;
}

.translations-page .table td a {
  color: var(--lw-whatsapp-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.translations-page .table td a:hover {
  color: var(--lw-whatsapp-dark) !important;
  text-decoration: underline !important;
}

/* Status badges */
.translations-page .status-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  border-radius: var(--lw-radius-sm) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.translations-page .status-badge.active {
  background: var(--lw-whatsapp-light) !important;
  color: var(--lw-whatsapp-dark) !important;
}

.translations-page .status-badge.inactive {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%) !important;
  color: #d32f2f !important;
}

/* RTL indicator */
.translations-page .rtl-indicator {
  font-size: 0.7rem !important;
  color: var(--lw-gray-600) !important;
}

.translations-page .rtl-indicator.yes {
  color: var(--lw-whatsapp-primary) !important;
  font-weight: 600 !important;
}

/* Compact form styling */
.lw-language-block .input-group {
  margin-bottom: var(--lw-spacing-sm) !important;
}

.lw-language-block .form-text {
  font-size: 0.65rem !important;
  margin-top: var(--lw-spacing-sm) !important;
}

/* Hide Quick Actions column completely */
th[data-name="title"]:contains("Quick Actions"),
th[data-template="#lwQuickActionButtons"],
.vendors-page .quick-actions,
.vendors-table .quick-actions,
.table .quick-actions {
  display: none !important;
}

/* Hide Quick Actions header and column */
#lwManageVendorsTable th[data-name="title"],
#lwManageVendorsTable th[data-template="#lwQuickActionButtons"],
table th:contains("Quick Actions"),
table td[data-template="#lwQuickActionButtons"] {
  display: none !important;
}

/* Force hide quick actions column if it exists separately */
.vendors-page th:has(.quick-actions),
.vendors-page td:has(.quick-actions),
.vendors-table th:has(.quick-actions),
.vendors-table td:has(.quick-actions) {
  display: none !important;
}

/* Move quick actions to actions column - Enhanced */
.vendors-table .actions-column,
.table .actions-column,
.vendors-table td:last-child,
.table td:last-child {
  white-space: nowrap !important;
  text-align: center !important;
  min-width: 150px !important;
  padding: var(--lw-spacing-sm) !important;
}

.vendors-table .actions-column .btn-group,
.table .actions-column .btn-group,
.vendors-table td:last-child .btn-group,
.table td:last-child .btn-group {
  display: inline-flex !important;
  gap: var(--lw-spacing-xs) !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure subscription button appears in actions */
.vendors-table .actions-column .subscription-btn,
.table .actions-column .subscription-btn,
.vendors-table .actions-column .btn-subscription,
.table .actions-column .btn-subscription,
.vendors-table td:last-child .subscription-btn,
.table td:last-child .subscription-btn {
  display: inline-flex !important;
}

/* Style all action buttons consistently - ICON ONLY */
.vendors-table td:last-child .btn,
.table td:last-child .btn,
.actions-column .btn {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-600) !important;
  font-size: 0 !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: var(--lw-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 1px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  text-indent: -9999px !important;
  line-height: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.vendors-table td:last-child .btn:hover,
.table td:last-child .btn:hover,
.actions-column .btn:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  color: var(--lw-gray-800) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

.vendors-table td:last-child .btn i,
.table td:last-child .btn i,
.actions-column .btn i {
  font-size: 12px !important;
  color: inherit !important;
  text-indent: 0 !important;
  line-height: normal !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Hide all text in action buttons, keep only icons */
.vendors-table td:last-child .btn,
.table td:last-child .btn,
.actions-column .btn {
  color: transparent !important;
}

.vendors-table td:last-child .btn i,
.table td:last-child .btn i,
.actions-column .btn i {
  color: var(--lw-gray-600) !important;
}

.vendors-table td:last-child .btn:hover i,
.table td:last-child .btn:hover i,
.actions-column .btn:hover i {
  color: var(--lw-gray-800) !important;
}

/* Hide text nodes in action buttons */
.vendors-table td:last-child .btn *:not(i),
.table td:last-child .btn *:not(i),
.actions-column .btn *:not(i) {
  font-size: 0 !important;
  color: transparent !important;
  display: none !important;
}

/* Quick actions moved to actions column styling */
.moved-quick-actions {
  display: inline-flex !important;
  gap: 2px !important;
  align-items: center !important;
}

.moved-quick-actions .btn {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-600) !important;
  font-size: 0 !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: var(--lw-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 1px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.moved-quick-actions .btn:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  border-color: var(--lw-gray-400) !important;
  color: var(--lw-gray-800) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

.moved-quick-actions .btn i {
  font-size: 12px !important;
  color: var(--lw-gray-600) !important;
}

.moved-quick-actions .btn:hover i {
  color: var(--lw-gray-800) !important;
}

/* Hide text in moved quick actions */
.moved-quick-actions .btn span {
  display: none !important;
}

/* Vendor status styling */
.vendor-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  border-radius: var(--lw-radius-sm) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.vendor-status.active {
  background: var(--lw-whatsapp-light) !important;
  color: var(--lw-whatsapp-dark) !important;
}

.vendor-status.inactive {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%) !important;
  color: #721c24 !important;
}

.vendor-status.pending {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
  color: #856404 !important;
}

/* Dark mode toggle button */
.dark-mode-toggle {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: var(--lw-whatsapp-gradient) !important;
  border: none !important;
  color: white !important;
  font-size: 1.2rem !important;
  cursor: pointer !important;
  box-shadow: var(--lw-shadow-lg) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1000 !important;
}

.dark-mode-toggle:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3) !important;
}

/* Quick actions styling */
.quick-actions .btn,
.table .quick-actions .btn {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-600) !important;
  font-size: 0.7rem !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  border-radius: var(--lw-radius-sm) !important;
  margin: 0 2px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.quick-actions .btn:hover,
.table .quick-actions .btn:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  color: var(--lw-gray-800) !important;
  transform: translateY(-1px) !important;
}

/* Print styles */
@media print {

  .navbar-vertical,
  .btn,
  .dropdown,
  .dark-mode-toggle {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
  }

  body {
    font-size: 12pt !important;
    color: black !important;
    background: white !important;
  }
}

/* Additional responsive improvements */
@media (max-width: 768px) {

  /* Mobile font size adjustments */
  body {
    font-size: 0.8rem !important;
  }

  .h1,
  h1 {
    font-size: 1.5rem !important;
  }

  .h2,
  h2 {
    font-size: 1.3rem !important;
  }

  .h3,
  h3 {
    font-size: 1.1rem !important;
  }

  .h4,
  h4 {
    font-size: 1rem !important;
  }

  .h5,
  h5 {
    font-size: 0.9rem !important;
  }

  .h6,
  h6 {
    font-size: 0.8rem !important;
  }

  .lw-page-title {
    font-size: 1.3rem !important;
  }

  .display-2 {
    font-size: 1.5rem !important;
  }

  /* Mobile spacing adjustments */
  .container-fluid {
    padding-left: var(--lw-spacing-sm) !important;
    padding-right: var(--lw-spacing-sm) !important;
  }

  .card-body {
    padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  }

  .btn {
    font-size: 0.75rem !important;
    padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  }

  /* Mobile sidebar adjustments */
  .navbar-vertical .navbar-nav .nav-link {
    font-size: 0.8rem !important;
    padding: var(--lw-spacing-xs) var(--lw-spacing-md) !important;
  }
}

/* Modern DataTables styling */
.dataTables_wrapper {
  font-size: 0.8rem !important;
  background: var(--lw-white) !important;
  border-radius: var(--lw-radius-lg) !important;
  /* padding: var(--lw-spacing-lg) !important; */
  /* box-shadow: var(--lw-shadow-md) !important; */
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  font-size: 0.75rem !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  border-radius: var(--lw-radius-md) !important;
  border: 1px solid var(--lw-gray-300) !important;
  background: var(--lw-white) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--lw-whatsapp-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: 0.75rem !important;
  color: var(--lw-gray-600) !important;
}

.dataTables_wrapper .page-link {
  font-size: 0.7rem !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-600) !important;
  background: var(--lw-white) !important;
  border-radius: var(--lw-radius-md) !important;
  margin: 0 2px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dataTables_wrapper .page-link:hover {
  background: var(--lw-whatsapp-primary) !important;
  border-color: var(--lw-whatsapp-primary) !important;
  color: white !important;
  transform: translateY(-1px) !important;
}

.dataTables_wrapper .page-item.active .page-link {
  background: var(--lw-whatsapp-gradient) !important;
  border-color: var(--lw-whatsapp-primary) !important;
  color: white !important;
}

/* Improved focus states */
.form-control:focus,
.btn:focus,
.nav-link:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Loading states and animations */
.btn:active {
  transform: translateY(1px) !important;
}

/* Modern dropdown styling */
.dropdown-menu {
  border: 1px solid var(--lw-gray-200) !important;
  box-shadow: var(--lw-shadow-lg) !important;
  border-radius: var(--lw-radius-lg) !important;
  font-size: 0.8rem !important;
  background: var(--lw-white) !important;
  padding: var(--lw-spacing-sm) !important;
}

.dropdown-item {
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  border-radius: var(--lw-radius-md) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: var(--lw-gray-700) !important;
  font-weight: 500 !important;
}

.dropdown-item:hover {
  background: var(--lw-whatsapp-light) !important;
  color: var(--lw-whatsapp-dark) !important;
  transform: translateX(2px) !important;
}

.dropdown-item:active {
  background: var(--lw-whatsapp-primary) !important;
  color: white !important;
}

/* Improved tooltip styling */
.tooltip {
  font-size: 0.75rem !important;
}

.tooltip-inner {
  background: var(--lw-gradient-primary) !important;
  border-radius: 6px !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb {
  background: var(--lw-primary-color) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--lw-secondary-color) !important;
}

/* Enhanced animations for modern UX */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.card {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.navbar-vertical .nav-link {
  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.modal-content {
  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Floating label animation */
.form-floating {
  position: relative !important;
}

.form-floating .form-control:focus~label,
.form-floating .form-control:not(:placeholder-shown)~label {
  transform: translateY(-1.5rem) scale(0.85) !important;
  color: var(--lw-whatsapp-primary) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Tooltip improvements */
.tooltip {
  font-size: 0.7rem !important;
}

.tooltip-inner {
  background: var(--lw-gray-800) !important;
  border-radius: var(--lw-radius-md) !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  box-shadow: var(--lw-shadow-lg) !important;
}

/* Global Button Styling - REMOVED TO PREVENT PAGE CONTENT CENTERING */
/* .btn:not(.vendors-table td:last-child .btn):not(.table td:last-child .btn):not(.actions-column .btn),
button:not(.vendors-table td:last-child button):not(.table td:last-child button):not(.actions-column button),
input[type="submit"],
input[type="button"],
.lw-ajax-form-submit-action,
.btn-primary:not(.vendors-table td:last-child .btn-primary):not(.table td:last-child .btn-primary),
.btn-secondary:not(.vendors-table td:last-child .btn-secondary):not(.table td:last-child .btn-secondary),
.btn-success:not(.vendors-table td:last-child .btn-success):not(.table td:last-child .btn-success),
.btn-danger:not(.vendors-table td:last-child .btn-danger):not(.table td:last-child .btn-danger),
.btn-warning:not(.vendors-table td:last-child .btn-warning):not(.table td:last-child .btn-warning),
.btn-info:not(.vendors-table td:last-child .btn-info):not(.table td:last-child .btn-info),
.btn-light:not(.vendors-table td:last-child .btn-light):not(.table td:last-child .btn-light),
.btn-dark:not(.vendors-table td:last-child .btn-dark):not(.table td:last-child .btn-dark),
.btn-default:not(.vendors-table td:last-child .btn-default):not(.table td:last-child .btn-default) {
  min-width: 120px !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-xl) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border-radius: var(--lw-radius-md) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  margin: var(--lw-spacing-xs) auto !important;
} */

/* Form buttons - REMOVED TO PREVENT PAGE CONTENT CENTERING */
/* .lw-ajax-form-submit-action,
.btn-user,
.lw-btn-block-mobile,
.btn:contains("Save"),
.btn[value*="Save"],
a:contains("Save").btn {
  min-width: 150px !important;
  padding: var(--lw-spacing-lg) var(--lw-spacing-xl) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin: var(--lw-spacing-md) auto !important;
  display: block !important;
  text-align: center !important;
} */

/* Primary buttons with WhatsApp gradient - REMOVED TO PREVENT PAGE CONTENT CENTERING */
/* .btn-primary:not(.vendors-table td:last-child .btn-primary):not(.table td:last-child .btn-primary),
.lw-ajax-form-submit-action.btn-primary {
  background: var(--lw-whatsapp-gradient) !important;
  border: none !important;
  color: white !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

.btn-primary:not(.vendors-table td:last-child .btn-primary):not(.table td:last-child .btn-primary):hover,
.lw-ajax-form-submit-action.btn-primary:hover {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-md) !important;
}

/* Secondary buttons */
/* .btn-secondary:not(.vendors-table td:last-child .btn-secondary):not(.table td:last-child .btn-secondary),
.btn-default:not(.vendors-table td:last-child .btn-default):not(.table td:last-child .btn-default) {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-700) !important;
}

.btn-secondary:not(.vendors-table td:last-child .btn-secondary):not(.table td:last-child .btn-secondary):hover,
.btn-default:not(.vendors-table td:last-child .btn-default):not(.table td:last-child .btn-default):hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  color: var(--lw-gray-800) !important;
  transform: translateY(-1px) !important;
} */

/* Center buttons in forms and containers - REMOVED TO PREVENT PAGE CONTENT CENTERING */
/* .form-group .btn:not(.vendors-table td:last-child .btn):not(.table td:last-child .btn),
.card-footer .btn:not(.vendors-table td:last-child .btn):not(.table td:last-child .btn),
.modal-footer .btn:not(.vendors-table td:last-child .btn):not(.table td:last-child .btn),
.text-center .btn:not(.vendors-table td:last-child .btn):not(.table td:last-child .btn) {
  margin: var(--lw-spacing-sm) auto !important;
} */

/* Button containers - center alignment - REMOVED TO PREVENT PAGE CONTENT CENTERING */
/* .form-group:not(.vendors-table .form-group):not(.table .form-group),
.card-footer:not(.vendors-table .card-footer):not(.table .card-footer),
.button-container,
.action-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--lw-spacing-md) !important;
  flex-wrap: wrap !important;
} */

/* Mobile responsiveness for buttons - REMOVED TO PREVENT PAGE CONTENT CENTERING */
/* @media (max-width: 768px) {

  .btn:not(.vendors-table td:last-child .btn):not(.table td:last-child .btn):not(.actions-column .btn),
  .lw-ajax-form-submit-action {
    min-width: 100% !important;
    margin: var(--lw-spacing-sm) 0 !important;
  }

  .lw-btn-block-mobile {
    width: 100% !important;
    display: block !important;
  }
} */

/* Breadcrumb Styling with Gray Gradient Background */
.lw-breadcrumb-container {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
  padding: var(--lw-spacing-lg) var(--lw-spacing-xl) !important;
  border-radius: var(--lw-radius-md) !important;
  margin-bottom: var(--lw-spacing-lg) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

.lw-breadcrumb-container .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.lw-breadcrumb-container .breadcrumb-item {
  color: white !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

.lw-breadcrumb-container .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.lw-breadcrumb-container .breadcrumb-item a:hover {
  color: white !important;
  text-decoration: underline !important;
}

.lw-breadcrumb-container .breadcrumb-item.active,
.lw-breadcrumb-container .breadcrumb-item[aria-current="page"] {
  color: white !important;
  font-weight: 600 !important;
}

/* Breadcrumb separator styling */
.lw-breadcrumb-container .breadcrumb-item+.breadcrumb-item::before {
  content: "›" !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: bold !important;
  padding: 0 var(--lw-spacing-sm) !important;
}

/* Alternative gradient options */
.lw-breadcrumb-container.whatsapp-gradient {
  background: var(--lw-whatsapp-gradient) !important;
}

.lw-breadcrumb-container.purple-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.lw-breadcrumb-container.blue-gradient {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%) !important;
}

.lw-breadcrumb-container.orange-gradient {
  background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%) !important;
}

/* Dark mode support */
[data-theme="dark"] .lw-breadcrumb-container {
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%) !important;
}

[data-theme="dark"] .lw-breadcrumb-container .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .lw-breadcrumb-container .breadcrumb-item a:hover {
  color: white !important;
}

/* Fix Selectize Double Outline Issue */
.selectize-control {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.selectize-control.single .selectize-input {
  border: 1px solid var(--lw-gray-300) !important;
  border-radius: var(--lw-radius-md) !important;
  background: var(--lw-white) !important;
  box-shadow: none !important;
  outline: none !important;
}

.selectize-control.single .selectize-input:focus,
.selectize-control.single .selectize-input.focus {
  border-color: var(--lw-whatsapp-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
  outline: none !important;
}

.selectize-control.single .selectize-input.dropdown-active {
  border-color: var(--lw-whatsapp-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
}

/* Remove duplicate form-control styling from selectize */
.selectize-control.form-control {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Dark mode selectize */
[data-theme="dark"] .selectize-control.single .selectize-input {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-300) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .selectize-control.single .selectize-input:focus,
[data-theme="dark"] .selectize-control.single .selectize-input.focus {
  border-color: var(--lw-whatsapp-primary) !important;
}

/* Fix Table Positioning Issues */
.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 0 !important;
  padding: 0 !important;
}

.table-responsive .table {
  margin-bottom: 0 !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

.table.align-items-center {
  table-layout: auto !important;
}

.table.align-items-center th,
.table.align-items-center td {
  vertical-align: middle !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-sm) !important;
  border-top: 1px solid var(--lw-gray-200) !important;
  white-space: nowrap !important;
}

.table.align-items-center thead th {
  background: var(--lw-gray-50) !important;
  border-bottom: 2px solid var(--lw-gray-200) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.5px !important;
  color: var(--lw-gray-700) !important;
}

.table.table-flush {
  border: none !important;
}

.table.table-flush th,
.table.table-flush td {
  border-left: none !important;
  border-right: none !important;
}

.table.table-flush thead th {
  border-top: none !important;
}

/* Fix card table container - Prevent table overflow */
.card .table-responsive {
  border-radius: 0 0 var(--lw-radius-lg) var(--lw-radius-lg) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure card body doesn't have conflicting padding for tables */
.card .card-body+.table-responsive,
.card .card-header+.table-responsive {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fix table within card positioning */
.card .table-responsive .table {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

/* Ensure table cells don't overflow */
.card .table-responsive .table th,
.card .table-responsive .table td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-wrap: break-word !important;
  max-width: 0 !important;
}

/* First column should be flexible for content */
.card .table-responsive .table th:first-child,
.card .table-responsive .table td:first-child {
  max-width: none !important;
  min-width: 150px !important;
}

/* Dashboard specific table fixes */
.card.shadow .table-responsive {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove any negative margins that might cause overflow */
.card .table-responsive,
.card .table-responsive .table,
.card .table-responsive .table thead,
.card .table-responsive .table tbody {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Subscription Plan Fieldset Styling */
fieldset {
  border: 1px solid var(--lw-gray-200) !important;
  border-radius: var(--lw-radius-lg) !important;
  padding: var(--lw-spacing-xl) !important;
  margin-bottom: var(--lw-spacing-lg) !important;
  background: var(--lw-white) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

fieldset legend {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-800) !important;
  padding: 0 var(--lw-spacing-md) !important;
  margin-bottom: var(--lw-spacing-lg) !important;
  border: none !important;
  width: auto !important;
}

/* Remove HR tags from subscription plans */
fieldset hr {
  display: none !important;
}

/* Subscription plan features */
fieldset .my-2 {
  margin: var(--lw-spacing-sm) 0 !important;
  display: flex !important;
  align-items: center !important;
  font-size: 0.75rem !important;
  color: var(--lw-gray-700) !important;
}

fieldset .my-2 i {
  margin-right: var(--lw-spacing-sm) !important;
  width: 16px !important;
  text-align: center !important;
}

/* Subscription plan title */
fieldset h2.text-primary {
  color: var(--lw-whatsapp-primary) !important;
  /*font-size: 1.5rem !important;*/
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: var(--lw-spacing-md) 0 var(--lw-spacing-lg) 0 !important;
}

/* Subscription plan price */
fieldset h2.text-blue {
  color: #007bff !important;
  /*font-size: 1.3rem !important;*/
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: var(--lw-spacing-lg) 0 !important;
  padding: var(--lw-spacing-md) 0 !important;
  border-top: 1px solid var(--lw-gray-200) !important;
  border-bottom: 1px solid var(--lw-gray-200) !important;
}

/* Subscription plan button */
fieldset .lw-btn {
  margin-top: var(--lw-spacing-lg) !important;
  background: var(--lw-whatsapp-gradient) !important;
  border: none !important;
  color: white !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-xl) !important;
  border-radius: var(--lw-radius-md) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

fieldset .lw-btn:hover {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-md) !important;
}

/* Dark mode for tables and fieldsets */
[data-theme="dark"] .table.align-items-center thead th {
  background: var(--lw-gray-200) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .table.align-items-center th,
[data-theme="dark"] .table.align-items-center td {
  border-color: var(--lw-gray-300) !important;
  background: var(--lw-gray-50) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] fieldset {
  background: var(--lw-gray-50) !important;
  border-color: var(--lw-gray-200) !important;
}

[data-theme="dark"] fieldset legend {
  color: var(--lw-gray-800) !important;
}

/* SweetAlert2 Popup Styling - Minimal and Theme-based */
.swal2-popup {
  border-radius: var(--lw-radius-lg) !important;
  padding: var(--lw-spacing-lg) !important;
  box-shadow: var(--lw-shadow-lg) !important;
  font-family: inherit !important;
  max-width: 400px !important;
  width: 90% !important;
}

/* Minimal spacing for popup content */
.swal2-html-container {
  margin: var(--lw-spacing-sm) 0 var(--lw-spacing-lg) 0 !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}

.swal2-html-container h2 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-800) !important;
  margin: 0 0 var(--lw-spacing-sm) 0 !important;
}

.swal2-html-container p {
  font-size: 0.85rem !important;
  color: var(--lw-gray-600) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Small icons */
.swal2-icon {
  width: 60px !important;
  height: 60px !important;
  margin: 0 auto var(--lw-spacing-md) auto !important;
  border: none !important;
}

.swal2-icon.swal2-warning {
  background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
  color: white !important;
  border-radius: 50% !important;
}

.swal2-icon.swal2-error {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
  color: white !important;
  border-radius: 50% !important;
}

.swal2-icon.swal2-success {
  background: var(--lw-whatsapp-gradient) !important;
  color: white !important;
  border-radius: 50% !important;
}

.swal2-icon.swal2-info {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
  color: white !important;
  border-radius: 50% !important;
}

.swal2-icon.swal2-question {
  background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%) !important;
  color: white !important;
  border-radius: 50% !important;
}

/* Icon content styling */
.swal2-icon-content {
  font-size: 24px !important;
  font-weight: bold !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Button styling - Extended width with theme colors */
.swal2-actions {
  margin: var(--lw-spacing-lg) 0 0 0 !important;
  gap: var(--lw-spacing-md) !important;
  justify-content: center !important;
}

.swal2-confirm,
.swal2-cancel,
.swal2-deny {
  min-width: 100px !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-xl) !important;
  border-radius: var(--lw-radius-md) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  border: none !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
}

/* Confirm button - WhatsApp green */
.swal2-confirm {
  background: var(--lw-whatsapp-gradient) !important;
  color: white !important;
}

.swal2-confirm:hover {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-md) !important;
}

/* Cancel button - Gray */
.swal2-cancel {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
  color: white !important;
}

.swal2-cancel:hover {
  background: linear-gradient(135deg, #5a6268 0%, #3d4142 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-md) !important;
}

/* Deny button - Red */
.swal2-deny {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
  color: white !important;
}

.swal2-deny:hover {
  background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-md) !important;
}

/* Remove default button styling */
.swal2-styled {
  box-shadow: none !important;
}

.swal2-styled:focus {
  box-shadow: none !important;
  outline: none !important;
}

.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.25) !important;
}

.swal2-cancel:focus {
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25) !important;
}

.swal2-deny:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

/* Popup overlay */
.swal2-container {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(2px) !important;
}

/* Close button */
.swal2-close {
  color: var(--lw-gray-500) !important;
  font-size: 1.2rem !important;
  width: 30px !important;
  height: 30px !important;
  top: 10px !important;
  right: 10px !important;
}

.swal2-close:hover {
  color: var(--lw-gray-700) !important;
  background: var(--lw-gray-100) !important;
  border-radius: 50% !important;
}

/* Dark mode support */
[data-theme="dark"] .swal2-popup {
  background: var(--lw-gray-50) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .swal2-html-container h2 {
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .swal2-html-container p {
  color: var(--lw-gray-700) !important;
}

/* Complete Menu Icon and Active State Fixes */

/* Change Pages icon from fa-file to fa-file-alt */
.navbar-vertical .navbar-nav .nav-link[href*="/pages"] i {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

.navbar-vertical .navbar-nav .nav-link[href*="/pages"] i::before {
  content: "\f15c" !important;
  /* fa-file-alt */
}

/* Fix Social Login icon */
.navbar-vertical .navbar-nav .nav-link[href*="social-login"] i {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
  color: #1877f2 !important;
}

.navbar-vertical .navbar-nav .nav-link[href*="social-login"] i::before {
  content: "\f09a" !important;
  /* fa-facebook */
}

/* Fix WhatsApp Onboarding icon */
.navbar-vertical .navbar-nav .nav-link[href*="whatsapp-onboarding"] i {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
  color: #25d366 !important;
}

.navbar-vertical .navbar-nav .nav-link[href*="whatsapp-onboarding"] i::before {
  content: "\f232" !important;
  /* fa-whatsapp */
}

/* Fix Addons icon */
.navbar-vertical .navbar-nav .nav-link[href*="addons"] i {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: #dc3545 !important;
}

.navbar-vertical .navbar-nav .nav-link[href*="addons"] i::before {
  content: "\f12e" !important;
  /* fa-puzzle-piece */
}

/* Fix License icon */
.navbar-vertical .navbar-nav .nav-link[href*="licence-information"] i {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: #ffc107 !important;
}

.navbar-vertical .navbar-nav .nav-link[href*="licence-information"] i::before {
  content: "\f0a3" !important;
  /* fa-certificate */
}

/* Menu Active State Fixes - Consistent WhatsApp Green for ALL Active Items */
.navbar-vertical .navbar-nav .nav-item.active>.nav-link,
.navbar-vertical .navbar-nav .nav-item.active .nav-link,
.navbar-vertical .navbar-nav .active>.nav-link,
.navbar-vertical .navbar-nav .active .nav-link {
  background: var(--lw-whatsapp-gradient) !important;
  color: white !important;
  border-radius: var(--lw-radius-md) !important;
  margin: 2px var(--lw-spacing-sm) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

.navbar-vertical .navbar-nav .nav-item.active>.nav-link i,
.navbar-vertical .navbar-nav .nav-item.active .nav-link i,
.navbar-vertical .navbar-nav .active>.nav-link i,
.navbar-vertical .navbar-nav .active .nav-link i {
  color: white !important;
}

/* Submenu active states - Also WhatsApp Green */
.navbar-vertical .navbar-nav .nav-item .nav .nav-item.active>.nav-link,
.navbar-vertical .navbar-nav .nav-item .nav .active>.nav-link {
  background: var(--lw-whatsapp-gradient) !important;
  color: white !important;
  border-radius: var(--lw-radius-sm) !important;
  margin: 1px var(--lw-spacing-sm) !important;
  font-weight: 600 !important;
}

.navbar-vertical .navbar-nav .nav-item .nav .nav-item.active>.nav-link i,
.navbar-vertical .navbar-nav .nav-item .nav .active>.nav-link i {
  color: white !important;
}

/* Override any existing active states */
.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-item .nav-link.active {
  background: var(--lw-whatsapp-gradient) !important;
  color: white !important;
  border-radius: var(--lw-radius-md) !important;
  margin: 2px var(--lw-spacing-sm) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

.navbar-vertical .navbar-nav .nav-link.active i,
.navbar-vertical .navbar-nav .nav-item .nav-link.active i {
  color: white !important;
}

/* Menu hover effects */
.navbar-vertical .navbar-nav .nav-link:hover {
  background: rgba(37, 211, 102, 0.05) !important;
  color: var(--lw-whatsapp-primary) !important;
  transform: translateX(2px) !important;
  border-radius: var(--lw-radius-sm) !important;
  transition: all 0.3s ease !important;
}

.navbar-vertical .navbar-nav .nav-link:hover i {
  color: var(--lw-whatsapp-primary) !important;
}

/* Always Expanded Sidebar with Collapsible Submenus */
.navbar-vertical {
  width: 250px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  z-index: 1000 !important;
  overflow-y: auto !important;
}

/* Adjust main content for expanded sidebar */
.main-content {
  margin-left: 250px !important;
}

/* Submenu Collapsible Behavior - Initially Collapsed */
.navbar-vertical .navbar-nav .collapse {
  display: none !important;
  transition: all 0.3s ease !important;
}

.navbar-vertical .navbar-nav .collapse.show {
  display: block !important;
}

/* Restore collapse functionality */
.navbar-vertical .navbar-nav .nav-link[data-toggle="collapse"] {
  cursor: pointer !important;
  position: relative !important;
}

/* Add collapse indicators */
.navbar-vertical .navbar-nav .nav-link[data-toggle="collapse"]::after {
  content: "\f107" !important;
  /* fa-angle-down */
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  position: absolute !important;
  right: var(--lw-spacing-md) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: transform 0.3s ease !important;
}

.navbar-vertical .navbar-nav .nav-link[data-toggle="collapse"][aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* Submenu styling */
.navbar-vertical .navbar-nav .nav .nav-link {
  padding-left: var(--lw-spacing-xl) !important;
  font-size: 0.85rem !important;
  color: var(--lw-gray-600) !important;
}

.navbar-vertical .navbar-nav .nav .nav-link:hover {
  background: rgba(37, 211, 102, 0.05) !important;
  color: var(--lw-whatsapp-primary) !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .navbar-vertical {
    width: 250px !important;
    transform: translateX(-100%) !important;
  }

  .navbar-vertical.show {
    transform: translateX(0) !important;
  }

  .main-content {
    margin-left: 0 !important;
  }
}

/* Dark mode menu fixes - Consistent Active States */
[data-theme="dark"] .navbar-vertical .navbar-nav .nav-item.active>.nav-link,
[data-theme="dark"] .navbar-vertical .navbar-nav .nav-item.active .nav-link,
[data-theme="dark"] .navbar-vertical .navbar-nav .active>.nav-link,
[data-theme="dark"] .navbar-vertical .navbar-nav .active .nav-link,
[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link.active {
  background: var(--lw-whatsapp-gradient) !important;
  color: white !important;
}

[data-theme="dark"] .navbar-vertical .navbar-nav .nav-item.active>.nav-link i,
[data-theme="dark"] .navbar-vertical .navbar-nav .nav-item.active .nav-link i,
[data-theme="dark"] .navbar-vertical .navbar-nav .active>.nav-link i,
[data-theme="dark"] .navbar-vertical .navbar-nav .active .nav-link i,
[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link.active i {
  color: white !important;
}

[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link:hover {
  background: rgba(37, 211, 102, 0.1) !important;
  color: var(--lw-whatsapp-primary) !important;
}

/* Global Card-Style Borders and Consistent Styling */

/* Remove overall box borders - keep clean appearance */
form,
.form-container,
.lw-form,
.lw-ajax-form {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: var(--lw-spacing-lg) !important;
}

/* Fieldsets - keep minimal styling */
fieldset {
  background: transparent !important;
  border: 1px solid var(--lw-gray-200) !important;
  border-radius: var(--lw-radius-md) !important;
  box-shadow: none !important;
  padding: var(--lw-spacing-lg) !important;
  margin-bottom: var(--lw-spacing-lg) !important;
}

/* Nested fieldsets - slightly different styling */
fieldset fieldset {
  background: var(--lw-gray-50) !important;
  border: 1px solid var(--lw-gray-300) !important;
  box-shadow: none !important;
  padding: var(--lw-spacing-lg) !important;
  margin: var(--lw-spacing-md) 0 !important;
}

/* Table containers - remove overall borders */
.table-responsive,
.dataTables_wrapper {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: var(--lw-spacing-lg) !important;
}

/* Alert boxes with card-style borders */
.alert {
  border: 1px solid var(--lw-gray-200) !important;
  border-radius: var(--lw-radius-lg) !important;
  box-shadow: var(--lw-shadow-sm) !important;
  margin-bottom: var(--lw-spacing-lg) !important;
}

/* Optimized Modal Styling */
.modal-dialog {
  max-width: 600px !important;
  margin: 30px auto !important;
}

.modal-content {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
}

.modal-header {
  background: white !important;
  border-bottom: 1px solid #e9ecef !important;
  padding: 20px 24px 16px 24px !important;
  border-radius: 0 !important;
}

.modal-header h4,
.modal-header .modal-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin: 0 !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
}

.modal-body {
  padding: 24px !important;
  background: white !important;
}

.modal-footer {
  background: #f8f9fa !important;
  border-top: 1px solid #e9ecef !important;
  padding: 16px 24px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
}

.modal-footer {
  background: white !important;
  border-top: none !important;
  border-radius: 0 0 var(--lw-radius-lg) var(--lw-radius-lg) !important;
  padding: var(--lw-spacing-md) var(--lw-spacing-lg) !important;
}

/* Tab styling to match card borders */
.nav-tabs {
  border-bottom: 1px solid var(--lw-gray-200) !important;
  background: var(--lw-gray-50) !important;
  border-radius: var(--lw-radius-lg) var(--lw-radius-lg) 0 0 !important;
  /*padding: var(--lw-spacing-sm) var(--lw-spacing-md) 0 !important;*/
  margin-bottom: 0 !important;
}


#lwWhatsAppChatWindow .nav-tabs{
  padding: unset !important;
}

.nav-tabs .nav-link {
  background: var(--lw-white) !important;
  border: 1px solid var(--lw-gray-200) !important;
  border-bottom: none !important;
  border-radius: var(--lw-radius-md) var(--lw-radius-md) 0 0 !important;
  color: var(--lw-gray-600) !important;
  /*margin-right: var(--lw-spacing-xs) !important;*/
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  transition: all 0.3s ease !important;
}

.nav-tabs .nav-link:not(:last-child){
  margin-right: 2px;
}


.nav-tabs .nav-link:hover {
  background: var(--lw-gray-50) !important;
  color: var(--lw-whatsapp-primary) !important;
  border-color: var(--lw-gray-300) !important;
}

.nav-tabs .nav-link.active {
  background: var(--lw-white) !important;
  color: var(--lw-whatsapp-primary) !important;
  border-color: var(--lw-gray-200) !important;
  border-bottom: 1px solid var(--lw-white) !important;
  font-weight: 600 !important;
}

/* Tab content with card-style borders */
.tab-content {
  background: var(--lw-white) !important;
  border: 1px solid var(--lw-gray-200) !important;
  border-top: none !important;
  border-radius: 0 0 var(--lw-radius-lg) var(--lw-radius-lg) !important;
  padding: var(--lw-spacing-lg) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

/* Input groups with card-style borders */
.input-group {
  border-radius: var(--lw-radius-md) !important;
  box-shadow: var(--lw-shadow-sm) !important;
  margin-bottom: var(--lw-spacing-md) !important;
}

.input-group .form-control {
  border: 1px solid var(--lw-gray-200) !important;
}

.input-group-text {
  background: var(--lw-gray-50) !important;
  border: 1px solid var(--lw-gray-200) !important;
  color: var(--lw-gray-700) !important;
}

/* Breadcrumb with card-style borders */
.lw-breadcrumb-container {
  border: 1px solid var(--lw-gray-200) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

/* Pagination - remove overall borders */
.pagination {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: var(--lw-spacing-lg) 0 !important;
}

.page-link {
  border: 1px solid var(--lw-gray-200) !important;
  color: var(--lw-gray-600) !important;
}

.page-link:hover {
  background: var(--lw-gray-50) !important;
  color: var(--lw-whatsapp-primary) !important;
}

.page-item.active .page-link {
  background: var(--lw-whatsapp-gradient) !important;
  border-color: var(--lw-whatsapp-primary) !important;
  color: white !important;
}

/* Dark Theme Support - Clean Appearance */
[data-theme="dark"] form,
[data-theme="dark"] .form-container,
[data-theme="dark"] .lw-form,
[data-theme="dark"] .lw-ajax-form {
  background: transparent !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] fieldset {
  background: transparent !important;
  border-color: var(--lw-gray-400) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] fieldset fieldset {
  background: var(--lw-gray-200) !important;
  border-color: var(--lw-gray-500) !important;
}

[data-theme="dark"] .table-responsive,
[data-theme="dark"] .dataTables_wrapper {
  background: transparent !important;
}

[data-theme="dark"] .modal-content {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-400) !important;
}

[data-theme="dark"] .modal-header {
  background: var(--lw-gray-200) !important;
  border-color: var(--lw-gray-400) !important;
}

[data-theme="dark"] .modal-footer {
  background: var(--lw-gray-100) !important;
  border-top: none !important;
}

[data-theme="dark"] .nav-tabs {
  background: var(--lw-gray-200) !important;
  border-color: var(--lw-gray-400) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-400) !important;
  color: var(--lw-gray-700) !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  background: var(--lw-gray-200) !important;
  color: var(--lw-whatsapp-primary) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background: var(--lw-gray-100) !important;
  color: var(--lw-whatsapp-primary) !important;
  border-bottom-color: var(--lw-gray-100) !important;
}

[data-theme="dark"] .tab-content {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-400) !important;
}

[data-theme="dark"] .input-group-text {
  background: var(--lw-gray-200) !important;
  border-color: var(--lw-gray-400) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .pagination {
  background: transparent !important;
}

[data-theme="dark"] .page-link {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-400) !important;
  color: var(--lw-gray-700) !important;
}

[data-theme="dark"] .page-link:hover {
  background: var(--lw-gray-200) !important;
  color: var(--lw-whatsapp-primary) !important;
}

/* Quick Start Section Optimization */
fieldset {
  background: white !important;
  border: 1px solid var(--lw-gray-200) !important;
  border-radius: var(--lw-radius-lg) !important;
  box-shadow: var(--lw-shadow-sm) !important;
  padding: var(--lw-spacing-lg) !important;
}

fieldset legend {
  text-transform: none !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-700) !important;
  background: white !important;
  padding: 0 var(--lw-spacing-sm) !important;
}

/* Quick Start Content - Optimized Typography ...TEST*/
fieldset h3 {
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  color: var(--lw-gray-700) !important;
}

fieldset ol {
  margin: 0 !important;
  padding-left: var(--lw-spacing-lg) !important;
}

fieldset ol li {
  margin-bottom: var(--lw-spacing-md) !important;
  line-height: 1.7 !important;
  font-size: 0.75rem !important;
  color: var(--lw-gray-700) !important;
  padding-left: var(--lw-spacing-xs) !important;
}

fieldset ol li a {
  color: var(--lw-whatsapp-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}

fieldset ol li a:hover {
  color: var(--lw-whatsapp-secondary) !important;
  text-decoration: underline !important;
}

/* General Quick Start Content Line Spacing */
.quick-start-content,
.quick-start-section,
.dashboard-quick-start,
.home-quick-start {
  line-height: 1.6 !important;
}

.quick-start-content p,
.quick-start-section p,
.dashboard-quick-start p,
.home-quick-start p {
  margin-bottom: var(--lw-spacing-md) !important;
  line-height: 1.6 !important;
  font-size: 0.9rem !important;
}

.quick-start-content ul,
.quick-start-section ul,
.dashboard-quick-start ul,
.home-quick-start ul {
  margin-bottom: var(--lw-spacing-md) !important;
}

.quick-start-content li,
.quick-start-section li,
.dashboard-quick-start li,
.home-quick-start li {
  margin-bottom: var(--lw-spacing-sm) !important;
  line-height: 1.6 !important;
  font-size: 0.9rem !important;
}

.quick-start-content h1,
.quick-start-content h2,
.quick-start-content h3,
.quick-start-content h4,
.quick-start-section h1,
.quick-start-section h2,
.quick-start-section h3,
.quick-start-section h4,
.dashboard-quick-start h1,
.dashboard-quick-start h2,
.dashboard-quick-start h3,
.dashboard-quick-start h4,
.home-quick-start h1,
.home-quick-start h2,
.home-quick-start h3,
.home-quick-start h4 {
  margin-bottom: var(--lw-spacing-md) !important;
  margin-top: var(--lw-spacing-lg) !important;
  line-height: 1.4 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

/* Dark theme support for Quick Start */
[data-theme="dark"] fieldset legend {
  color: var(--lw-gray-600) !important;
}

[data-theme="dark"] fieldset h3,
[data-theme="dark"] fieldset ol li {
  color: var(--lw-gray-600) !important;
}

[data-theme="dark"] fieldset {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-400) !important;
}

[data-theme="dark"] fieldset legend {
  background: var(--lw-gray-100) !important;
}

/* Admin Logout Link - Remove All Caps */
.lw-ajax-link-action {
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

/* Template Cards - Consistent Sizing */
.template-card,
.card.template-item,
.whatsapp-template-card {
  min-height: 200px !important;
  display: flex !important;
  flex-direction: column !important;
}

.template-card .card-body,
.card.template-item .card-body,
.whatsapp-template-card .card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.template-card .card-footer,
.card.template-item .card-footer,
.whatsapp-template-card .card-footer {
  margin-top: auto !important;
  background: var(--lw-gray-50) !important;
  border-top: 1px solid var(--lw-gray-200) !important;
}

/* Template card content alignment */
.template-card .card-title,
.card.template-item .card-title,
.whatsapp-template-card .card-title {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin-bottom: var(--lw-spacing-sm) !important;
}

.template-card .card-text,
.card.template-item .card-text,
.whatsapp-template-card .card-text {
  font-size: 0.8rem !important;
  color: var(--lw-gray-600) !important;
  flex: 1 !important;
}

/* Template grid consistency */
.template-grid .col-md-4,
.template-grid .col-lg-3,
.template-grid .col-xl-3 {
  margin-bottom: var(--lw-spacing-lg) !important;
}

.template-grid .card {
  height: 100% !important;
}

/* Global Pattern Gradient Background */
body {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

/* Add subtle pattern overlay */
body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 2px, transparent 2px) !important;
  background-size: 50px 50px !important;
  background-position: 0 0, 25px 25px !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Dark theme background */
[data-theme="dark"] body {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}

[data-theme="dark"] body::before {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 2px, transparent 2px) !important;
}

/* Dashboard Stats Cards - Fixed Height and Consistent Design */
.card-stats {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  background: white !important;
  min-height: 120px !important;
  display: flex !important;
  flex-direction: column !important;
}

.card-stats .card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: var(--lw-spacing-md) !important;
}

.card-stats:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Stats card titles - remove all caps */
.card-stats .card-title {
  text-transform: none !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-600) !important;
  letter-spacing: 0.5px !important;
  margin-bottom: var(--lw-spacing-xs) !important;
}

/* Stats card numbers */
.card-stats .h2 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--lw-gray-800) !important;
  margin-bottom: 0 !important;
}

/* Standardized WhatsApp theme colors for all icons */
.card-stats .icon-shape {
  background: var(--lw-whatsapp-gradient) !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.card-stats .icon-shape i {
  font-size: 1.2rem !important;
  color: white !important;
}

/* Stats card links */
.card-stats a {
  color: var(--lw-whatsapp-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  margin-top: var(--lw-spacing-xs) !important;
}

.card-stats a:hover {
  color: var(--lw-whatsapp-secondary) !important;
  text-decoration: underline !important;
}

/* Better grid layout for stats cards */
.header-body .row .col-xl-3,
.header-body .row .col-lg-4,
.header-body .row .col-md-6 {
  margin-bottom: var(--lw-spacing-lg) !important;
  display: flex !important;
}

.header-body .row .col-xl-3 .card,
.header-body .row .col-lg-4 .card,
.header-body .row .col-md-6 .card {
  width: 100% !important;
}

/* Responsive adjustments for stats cards */
@media (max-width: 768px) {
  .card-stats {
    min-height: 100px !important;
  }

  .card-stats .h2 {
    font-size: 1.4rem !important;
  }

  .card-stats .card-title {
    font-size: 0.7rem !important;
  }

  .card-stats .icon-shape {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Dark theme for stats cards */
[data-theme="dark"] .card-stats {
  background: var(--lw-gray-100) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .card-stats:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .card-stats .card-title {
  color: var(--lw-gray-600) !important;
}

[data-theme="dark"] .card-stats .h2 {
  color: var(--lw-gray-800) !important;
}

/* WhatsApp Setup UI Improvements */
.accordion .card {
  border: 1px solid var(--lw-gray-200) !important;
  border-radius: var(--lw-radius-lg) !important;
  margin-bottom: var(--lw-spacing-md) !important;
  box-shadow: var(--lw-shadow-sm) !important;
}

/* Setup page headings */
.accordion h1 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-800) !important;
  margin-bottom: var(--lw-spacing-lg) !important;
}

/* Fieldset legends in setup */
.accordion fieldset legend {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--lw-gray-700) !important;
  cursor: pointer !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  background: var(--lw-gray-50) !important;
  border-radius: var(--lw-radius-md) !important;
  margin-bottom: var(--lw-spacing-md) !important;
}

.accordion fieldset legend:hover {
  background: var(--lw-gray-100) !important;
  color: var(--lw-whatsapp-primary) !important;
}

/* Setup form text improvements */
.accordion p {
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: var(--lw-gray-600) !important;
  margin-bottom: var(--lw-spacing-sm) !important;
}

.accordion .form-text {
  font-size: 0.75rem !important;
  color: var(--lw-gray-500) !important;
}

/* Status badges improvements */
.badge {
  font-size: 0.75rem !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  border-radius: var(--lw-radius-md) !important;
}

.badge-success {
  background: var(--lw-whatsapp-gradient) !important;
  color: white !important;
  border: none !important;
}

.badge-danger {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
  color: white !important;
  border: none !important;
}

.lw-configured-badge {
  font-weight: 500 !important;
  margin-left: var(--lw-spacing-xs) !important;
}

/* Alert improvements - remove harsh red */
.alert {
  border-radius: var(--lw-radius-lg) !important;
  border: none !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}

.alert-danger {
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%) !important;
  color: #c53030 !important;
  border-left: 4px solid #e53e3e !important;
}

.border-danger {
  border: 1px solid #fed7d7 !important;
  background: #fff5f5 !important;
  padding: var(--lw-spacing-sm) !important;
  border-radius: var(--lw-radius-md) !important;
  color: #c53030 !important;
  font-size: 0.8rem !important;
}

/* Loading block improvements */
.lw-loading-block h2 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--lw-whatsapp-primary) !important;
}

.lw-loading-block h2.text-danger {
  color: var(--lw-whatsapp-primary) !important;
}

/* Help sections */
.accordion img {
  border-radius: var(--lw-radius-md) !important;
  box-shadow: var(--lw-shadow-sm) !important;
  margin: var(--lw-spacing-sm) 0 !important;
}

/* Button improvements in setup */
.accordion .btn-dark {
  background: var(--lw-gray-800) !important;
  border: none !important;
  font-size: 0.8rem !important;
}

.accordion .btn-light {
  background: white !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-700) !important;
  font-size: 0.85rem !important;
}

.accordion .btn-light:hover {
  background: var(--lw-gray-50) !important;
  border-color: var(--lw-gray-400) !important;
}

/* Input group improvements */
.accordion .input-group-text {
  background: var(--lw-gray-50) !important;
  border: 1px solid var(--lw-gray-300) !important;
  font-size: 0.8rem !important;
}

.accordion .input-group-text .fa-times {
  color: #e53e3e !important;
}

.accordion .input-group-text .fa-check {
  color: var(--lw-whatsapp-primary) !important;
}

/* Dark theme for setup */
[data-theme="dark"] .accordion fieldset legend {
  background: var(--lw-gray-200) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .accordion .alert-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  color: #ff6b6b !important;
}

[data-theme="dark"] .border-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
  color: #ff6b6b !important;
}

/* Login Page Design Improvements */

/* Exact Design Match - Split Screen Layout */
.lw-guest-page {
  background: #f8f9fa !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  overflow-x: hidden !important;
  position: relative !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Import Noto Sans Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap');

/* Hide sidebar and reset layout */
.lw-guest-page,
.lw-guest-page body,
.lw-guest-page .main-content,
.lw-guest-page .container-fluid {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
}

.lw-guest-page .navbar-vertical {
  display: none !important;
}

/* Restore Navbar */
.lw-guest-page .navbar-horizontal {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(37, 211, 102, 0.1) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
  padding: var(--lw-spacing-md) 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  margin: 0 !important;
  z-index: 1000 !important;
  height: 70px !important;
}

.lw-guest-page .navbar-horizontal .container,
.lw-guest-page .navbar-horizontal .container-fluid {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 var(--lw-spacing-lg) !important;
}

.lw-guest-page .navbar-horizontal .navbar-nav .nav-link {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--lw-gray-700) !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
}

.lw-guest-page .navbar-horizontal .navbar-nav .nav-link:hover {
  color: var(--lw-whatsapp-primary) !important;
}

.navbar-horizontal .navbar-brand img {
  max-height: 45px !important;
  transition: transform 0.3s ease !important;
}

.navbar-horizontal .navbar-brand:hover img {
  transform: scale(1.05) !important;
}

/* Standard Navbar Text Styling */
.lw-guest-page .navbar-horizontal .navbar-nav .nav-link {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--lw-gray-700) !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  transition: all 0.3s ease !important;
}

.lw-guest-page .navbar-horizontal .navbar-nav .nav-link:hover {
  color: var(--lw-whatsapp-primary) !important;
}

/* Register Button - Same as Other Links */
.lw-guest-page .navbar-horizontal .navbar-nav .nav-link[href*="register"],
.lw-guest-page .navbar-horizontal .navbar-nav .nav-link.register-link {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--lw-gray-700) !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
  border: none !important;
  margin-left: 0 !important;
}

.lw-guest-page .navbar-horizontal .navbar-nav .nav-link[href*="register"]:hover,
.lw-guest-page .navbar-horizontal .navbar-nav .nav-link.register-link:hover {
  color: var(--lw-whatsapp-primary) !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

.navbar-horizontal .navbar-toggler {
  border: none !important;
  padding: var(--lw-spacing-xs) !important;
}

.navbar-horizontal .navbar-toggler-icon {
  font-size: 1.2rem !important;
  color: var(--lw-gray-700) !important;
}

/* Fixed Split Screen Layout */
.lw-guest-page .lw-guest-page-container-block {
  min-height: calc(100vh - 70px) !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 0px !important;
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Left side - Content section (60%) */
.lw-guest-page .lw-left-content {
  width: 55% !important;
  background: #f8f9fa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 80px !important;
  position: relative !important;
}

.lw-guest-page .lw-left-content .content-wrapper {
  max-width: 500px !important;
}

.lw-guest-page .lw-left-content h1 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #333 !important;
  margin-bottom: 30px !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
}

.lw-guest-page .lw-left-content .features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.lw-guest-page .lw-left-content .features li {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 15px !important;
  font-size: 1rem !important;
  color: #666 !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
}

.lw-guest-page .lw-left-content .features li::before {
  content: '✓' !important;
  color: #25d366 !important;
  font-weight: bold !important;
  margin-right: 12px !important;
  font-size: 1.1rem !important;
}

.lw-guest-page .lw-left-content .trust-badges {
  margin-top: 40px !important;
}

.lw-guest-page .lw-left-content .trust-badges p {
  font-size: 0.9rem !important;
  color: #666 !important;
  margin-bottom: 15px !important;
}

.lw-guest-page .lw-left-content .badges {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
}

/* Right side - Card section (40%) */
.lw-guest-page .lw-guest-page-container-block .container,
.lw-guest-page .lw-guest-page-container-block .container-fluid {
  width: 40% !important;
  margin-left: 0 !important;
  padding: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100vh - 70px) !important;
  position: relative !important;
  background: transparent !important;
}

.lw-guest-page .lw-guest-page-container-block .row {
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.lw-guest-page [class*="col-"] {
  width: 100% !important;
  max-width: 500px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Registration page gets wider card */
.lw-guest-page .col-lg-12 {
  max-width: 600px !important;
}

/* Exact Design Match - Card Styling */
.lw-guest-page .lw-form-card-box {
  background: white !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
}

/* Exact Design Match - Card Header */
.lw-guest-page .lw-form-card-box .card-header {
  background: white !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 32px 32px 24px 32px !important;
  text-align: left !important;
}

.lw-guest-page .lw-form-card-box .card-header h1 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 0 8px 0 !important;
  color: #333 !important;
  line-height: 1.3 !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
}

.lw-guest-page .lw-form-card-box .card-header p {
  font-size: 0.9rem !important;
  color: #666 !important;
  margin: 0 !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
}

/* Social Login Buttons - Hidden */
.lw-guest-page .lw-form-card-box .social-login-buttons {
  display: none !important;
}

/* Card Body */
.lw-guest-page .lw-form-card-box .card-body {
  padding: 0 32px 32px 32px !important;
  background: white !important;
}

/* Exact Design Match - Form Inputs */
.lw-guest-page .lw-form-card-box .form-group {
  margin-bottom: 0px !important;
}

.lw-guest-page .lw-form-card-box .form-group label {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
}

.lw-guest-page .lw-form-card-box .form-control {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 0.9rem !important;
  background: white !important;
  color: #333 !important;
  width: 100% !important;
  transition: border-color 0.2s ease !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
}

.lw-guest-page .lw-form-card-box .form-control:focus {
  border-color: #25d366 !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
  outline: none !important;
}

.lw-guest-page .lw-form-card-box .form-control::placeholder {
  color: #999 !important;
  font-size: 0.9rem !important;
}

/* Input Groups for icons */
.lw-guest-page .lw-form-card-box .input-group {
  position: relative !important;
  margin-bottom: 16px !important;
}

.lw-guest-page .lw-form-card-box .input-group-text {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #999 !important;
  z-index: 10 !important;
  padding: 0 !important;
  width: auto !important;
}

.lw-guest-page .lw-form-card-box .input-group .form-control {
  padding-left: 40px !important;
}

/* Remember me and forgot password */
.lw-form-card-box .custom-control-label {
  font-size: 0.85rem !important;
  color: var(--lw-gray-600) !important;
}

.lw-form-card-box .custom-control-label .text-light {
  color: var(--lw-gray-600) !important;
}

.lw-form-card-box a.text-light {
  color: var(--lw-whatsapp-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.lw-form-card-box a.text-light:hover {
  color: var(--lw-whatsapp-secondary) !important;
  text-decoration: underline !important;
}

/* Exact Design Match - Primary Button */
.lw-guest-page .lw-form-card-box .btn-primary,
.lw-guest-page .lw-form-card-box .btn-success {
  background: #25d366 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: white !important;
  width: 100% !important;
  transition: background-color 0.2s ease !important;
  margin-top: 8px !important;
}

.lw-guest-page .lw-form-card-box .btn-primary:hover,
.lw-guest-page .lw-form-card-box .btn-success:hover {
  background: #22c55e !important;
}

/* Registration Form Dual Column Layout */
.lw-guest-page .registration-form-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.lw-guest-page .registration-form-full-width {
  grid-column: 1 / -1 !important;
}

/* Form Row for Two Columns */
.lw-guest-page .lw-form-card-box .form-row {
  display: flex !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.lw-guest-page .lw-form-card-box .form-row .form-group {
  flex: 1 !important;
  margin-bottom: 0 !important;
}

/* Checkbox and Links */
.lw-guest-page .lw-form-card-box .form-check {
  display: flex !important;
  align-items: center !important;
  margin: 16px 0 !important;
}

.lw-guest-page .lw-form-card-box .form-check-input {
  /*margin-right: 8px !important;*/
  margin-inline-end: 8px !important;
}

.lw-guest-page .lw-form-card-box .form-check-label {
  font-size: 0.85rem !important;
  color: #666 !important;
  margin-top: 4px;
}

.lw-guest-page .lw-form-card-box a {
  color: #25d366 !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
}

.lw-guest-page .lw-form-card-box a:hover {
  text-decoration: underline !important;
}

/* Bottom Links */
.lw-guest-page .lw-form-card-box .text-center {
  text-align: center !important;
  margin-top: 24px !important;
  padding-top: 24px !important;
  padding-bottom: 20px !important;
  border-top: 1px solid #f0f0f0 !important;
}

.lw-guest-page .lw-form-card-box .text-center a {
  font-weight: 500 !important;
}

/* Card footer */
.lw-form-card-box .card-footer {
  background: var(--lw-gray-50) !important;
  border-top: 1px solid var(--lw-gray-200) !important;
  padding: var(--lw-spacing-lg) !important;
}

/* Social login buttons */
.lw-form-card-box .btn-google,
.lw-form-card-box .btn-facebook {
  border-radius: var(--lw-radius-lg) !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-bottom: var(--lw-spacing-sm) !important;
  transition: all 0.3s ease !important;
}

.lw-form-card-box .btn-google:hover,
.lw-form-card-box .btn-facebook:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Mobile responsiveness for guest pages */
@media (max-width: 768px) {
  .lw-guest-page .lw-guest-page-container-block {
    padding: 15px var(--lw-spacing-sm) var(--lw-spacing-md) !important;
    margin-top: 70px !important;
    min-height: calc(100vh - 70px) !important;
    position: relative !important;
    width: 100vw !important;
  }

  /* Get Started button mobile adjustments */
  .navbar-horizontal .navbar-nav .nav-link[href*="register"],
  .navbar-horizontal .navbar-nav .nav-link.register-link {
    margin-left: 0 !important;
    margin-top: var(--lw-spacing-xs) !important;
    padding: var(--lw-spacing-xs) var(--lw-spacing-md) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: white !important;
  }
}

.lw-guest-page .lw-guest-page-container-block .row {
  max-width: 100% !important;
  margin: 0 !important;
}

.lw-guest-page .lw-guest-page-container-block .col-lg-6,
.lw-guest-page .lw-guest-page-container-block .col-md-8,
.lw-guest-page .lw-guest-page-container-block .col-lg-5,
.lw-guest-page .lw-guest-page-container-block .col-md-7,
.lw-guest-page .lw-guest-page-container-block .col-lg-8,
.lw-guest-page .lw-guest-page-container-block .col-md-10 {
  max-width: 100% !important;
  padding: 0 !important;
}

.lw-guest-page .lw-form-card-box {
  margin: 0 !important;
  border-radius: var(--lw-radius-lg) !important;
  max-width: 100% !important;
  width: 100% !important;
}

.lw-guest-page .lw-form-card-box .card-header {
  padding: var(--lw-spacing-lg) var(--lw-spacing-md) !important;
}

.lw-guest-page .lw-form-card-box .card-header h1 {
  font-size: 1.2rem !important;
}

.lw-guest-page .lw-form-card-box .card-body {
  padding: var(--lw-spacing-lg) var(--lw-spacing-md) !important;
}

.lw-guest-page .navbar-horizontal .container {
  padding: 0 var(--lw-spacing-md) !important;
}

.lw-guest-page .navbar-horizontal {
  padding: var(--lw-spacing-sm) 0 !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100vw !important;
}

/* Registration form mobile adjustments */
.lw-guest-page .lw-form-card-box .row .col-md-6,
.lw-guest-page .lw-form-card-box .row .col-lg-6,
.lw-guest-page .lw-form-card-box .row .col-sm-6 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: var(--lw-spacing-sm) !important;
}

/* Dark theme support for login page */
[data-theme="dark"] .lw-guest-page {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}

[data-theme="dark"] .lw-guest-page::before {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(37, 211, 102, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(37, 211, 102, 0.03) 2px, transparent 2px) !important;
}

[data-theme="dark"] .navbar-horizontal {
  background: rgba(26, 26, 26, 0.95) !important;
  border-bottom-color: rgba(37, 211, 102, 0.2) !important;
}

[data-theme="dark"] .lw-form-card-box {
  background: rgba(45, 45, 45, 0.95) !important;
  border-color: rgba(37, 211, 102, 0.2) !important;
}

[data-theme="dark"] .lw-form-card-box .card-body {
  background: var(--lw-gray-100) !important;
}

[data-theme="dark"] .lw-form-card-box .form-control {
  background: var(--lw-gray-200) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .lw-form-card-box .form-control:focus {
  background: var(--lw-gray-300) !important;
}

[data-theme="dark"] .lw-form-card-box .custom-control-label,
[data-theme="dark"] .lw-form-card-box .custom-control-label .text-light {
  color: var(--lw-gray-700) !important;
}

[data-theme="dark"] .lw-form-card-box .card-footer {
  background: var(--lw-gray-200) !important;
  border-top-color: var(--lw-gray-400) !important;
}

/* Fix for existing navbar issues */
.main-content-has-bg .navbar-top {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Guest footer improvements */
.lw-guest-page .footer {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid rgba(37, 211, 102, 0.1) !important;
  padding: var(--lw-spacing-lg) 0 !important;
}

[data-theme="dark"] .lw-guest-page .footer {
  background: rgba(26, 26, 26, 0.9) !important;
  border-top-color: rgba(37, 211, 102, 0.2) !important;
}

/* Animation for login card */
.lw-form-card-box {
  animation: loginCardFadeIn 0.6s ease-out !important;
}

@keyframes loginCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Improved error states */
.lw-form-card-box .has-danger .form-control {
  border-color: #e53e3e !important;
  box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.1) !important;
}

.lw-form-card-box .has-danger .input-group-text {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
  color: white !important;
}

/* Loading states */
.lw-form-card-box .btn-success:disabled {
  background: var(--lw-gray-400) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Mobile Responsiveness - Complete Rebuild */
@media (max-width: 768px) {
  .lw-guest-page .lw-guest-page-container-block {
    min-height: 100vh !important;
    padding-top: 60px !important;
    padding-left: var(--lw-spacing-sm) !important;
    padding-right: var(--lw-spacing-sm) !important;
    padding-bottom: var(--lw-spacing-md) !important;
  }

  .lw-guest-page .lw-guest-page-container-block .container,
  .lw-guest-page .lw-guest-page-container-block .container-fluid {
    padding: var(--lw-spacing-sm) !important;
  }

  .lw-guest-page [class*="col-"] {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .lw-guest-page .lw-form-card-box {
    width: 100% !important;
    margin: 0 !important;
    border-radius: var(--lw-radius-lg) !important;
  }

  .lw-guest-page .navbar-horizontal {
    height: 60px !important;
    padding: var(--lw-spacing-sm) 0 !important;
  }

  /* Mobile: Single column layout */
  .lw-guest-page .lw-guest-page-container-block {
    flex-direction: column !important;
    margin-top: 60px !important;
    min-height: calc(100vh - 60px) !important;
  }

  .lw-guest-page .lw-left-content {
    width: 100% !important;
    padding: 40px 20px !important;
    min-height: auto !important;
  }

  .lw-guest-page .lw-left-content h1 {
    font-size: 1.8rem !important;
    text-align: center !important;
  }

  .lw-guest-page .lw-left-content .features {
    display: none !important;
  }

  .lw-guest-page .lw-left-content .trust-badges {
    display: none !important;
  }

  .lw-guest-page .lw-guest-page-container-block .container,
  .lw-guest-page .lw-guest-page-container-block .container-fluid {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 20px !important;
    min-height: auto !important;
  }

  .lw-guest-page [class*="col-"] {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .lw-guest-page .lw-form-card-box {
    margin: 0 !important;
  }

  .lw-guest-page .lw-form-card-box .card-header {
    padding: 24px 24px 20px 24px !important;
  }

  .lw-guest-page .lw-form-card-box .card-header h1 {
    font-size: 1.3rem !important;
  }

  .lw-guest-page .lw-form-card-box .card-body {
    padding: 0 24px 24px 24px !important;
  }

  .lw-guest-page .registration-form-columns {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .lw-guest-page .lw-form-card-box .form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .lw-guest-page .lw-form-card-box .form-row .form-group {
    margin-bottom: 16px !important;
  }

  .lw-guest-page .navbar-horizontal {
    height: 60px !important;
  }
}

/* Registration Page Form Alignment */
.lw-form-card-box .row {
  margin: 0 !important;
}

.lw-form-card-box .row .col-md-6,
.lw-form-card-box .row .col-lg-6,
.lw-form-card-box .row .col-sm-6 {
  padding-left: var(--lw-spacing-xs) !important;
  padding-right: var(--lw-spacing-xs) !important;
}

.lw-form-card-box .row .col-md-6:first-child,
.lw-form-card-box .row .col-lg-6:first-child,
.lw-form-card-box .row .col-sm-6:first-child {
  padding-left: 0 !important;
}

.lw-form-card-box .row .col-md-6:last-child,
.lw-form-card-box .row .col-lg-6:last-child,
.lw-form-card-box .row .col-sm-6:last-child {
  padding-right: 0 !important;
}

/* Registration form input groups */
.lw-form-card-box .form-group {
  margin-bottom: var(--lw-spacing-md) !important;
}

.lw-form-card-box .form-group .input-group {
  margin-bottom: 0 !important;
}

/* Ensure proper spacing for registration fields */
.lw-form-card-box .card-body .row .form-group {
  margin-bottom: var(--lw-spacing-md) !important;
}

/* Dark theme support for modern design */
[data-theme="dark"] .lw-guest-page {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
}

[data-theme="dark"] .lw-guest-page::before {
  background:
    radial-gradient(circle at 20% 80%, rgba(37, 211, 102, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%) !important;
}

/* General content line spacing improvements */
.card-body p {
  margin-bottom: var(--lw-spacing-sm) !important;
  line-height: 1.5 !important;
}

.card-body ul,
.card-body ol {
  margin-bottom: var(--lw-spacing-md) !important;
}

.card-body li {
  margin-bottom: var(--lw-spacing-xs) !important;
  line-height: 1.4 !important;
}

/* Modal Form Layout - Two Column Grid */
.lw-form-modal-body {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px 20px !important;
  padding: 20px !important;
}

/* Form groups in modal - minimal spacing */
.lw-form-modal-body .form-group {
  margin-bottom: var(--lw-spacing-sm) !important;
}

/* Full-width elements that should span both columns */
.lw-form-modal-body .form-group.full-width,
.lw-form-modal-body fieldset,
.lw-form-modal-body .my-3,
.lw-form-modal-body .checkbox-group,
.lw-form-modal-body .form-group:has(.form-checkbox),
.lw-form-modal-body .form-group:has(.switchery) {
  grid-column: 1 / -1 !important;
}

/* Specific elements that should span full width */
.lw-form-modal-body .form-group:has(label[for*="Promotional"]),
.lw-form-modal-body .form-group:has(label[for*="Groups"]),
.lw-form-modal-body .form-group:has(select[multiple]) {
  grid-column: 1 / -1 !important;
}

/* Adjust modal width for better two-column layout */
.modal-dialog.modal-lg {
  max-width: 900px !important;
}

.modal-dialog {
  max-width: 800px !important;
}

/* TFS Standard - Modal widths */
.modal#addVendorModal .modal-dialog,
.modal#lwEditVendor .modal-dialog,
.modal#lwEditManualSubscription .modal-dialog {
  max-width: 850px !important;
}

/* Mobile responsiveness - single column on small screens */
@media (max-width: 768px) {
  .lw-form-modal-body {
    grid-template-columns: 1fr !important;
    gap: var(--lw-spacing-md) !important;
    padding: var(--lw-spacing-md) !important;
  }

  .lw-form-modal-body .form-group.full-width,
  .lw-form-modal-body fieldset,
  .lw-form-modal-body .my-3 {
    grid-column: 1 !important;
  }
}

/* Enhanced form labels and inputs for better column layout */
.lw-form-modal-body .form-group label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  color: #333 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
}

/* Standard form controls without input groups */
.lw-form-modal-body .form-control:not(.input-group .form-control),
.lw-form-modal-body input:not(.input-group input),
.lw-form-modal-body select:not(.input-group select),
.lw-form-modal-body textarea:not(.input-group textarea) {
  font-size: 0.9rem !important;
  /*padding: 0px 16px !important;*/
  height: 42px !important;
  line-height: 1.4 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  background: white !important;
  color: #333 !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  transition: border-color 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lw-form-modal-body .form-control:focus,
.lw-form-modal-body input:focus,
.lw-form-modal-body select:focus,
.lw-form-modal-body textarea:focus {
  border-color: #25d366 !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
  outline: none !important;
}

/* Simple form group spacing */
.lw-form-modal-body .form-group {
  margin-bottom: 16px !important;
}

/* Fix input group styling for two-column layout */
.lw-form-modal-body .input-group {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
}

.lw-form-modal-body .input-group .input-group-prepend {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 15px !important;
}

.lw-form-modal-body .input-group .input-group-text {
  background: transparent !important;
  border: none !important;
  color: #666 !important;
  font-size: 14px !important;
  padding: 0 !important;
}

.lw-form-modal-body .input-group .form-control {
  padding-left: 45px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  width: 100% !important;
}

/* TFS Standard - Complete Selectize Fix for All Pages */

/* Reset ALL selectize controls everywhere */
.selectize-control,
.lw-form-modal-body .selectize-control,
.modal .selectize-control,
.card .selectize-control {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  position: relative !important;
  width: 100% !important;
}

/* Remove ALL form-control styling from selectize containers */
.selectize-control.lw-form-field,
.selectize-control.form-control,
.selectize-dropdown.lw-form-field,
.selectize-dropdown.form-control,
.lw-form-modal-body .selectize-control.lw-form-field,
.lw-form-modal-body .selectize-control.form-control,
.lw-form-modal-body .selectize-dropdown.lw-form-field,
.lw-form-modal-body .selectize-dropdown.form-control {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
}

/* Style ONLY the actual selectize input */
.selectize-input,
.lw-form-modal-body .selectize-input,
.modal .selectize-input,
.card .selectize-input {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 12px 40px 12px 16px !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  background: white !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  font-size: 0.7rem !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  color: #333 !important;
  transition: border-color 0.2s ease !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  /* Add dropdown arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 12px !important;
}

/* Focus states */
.selectize-input:focus,
.selectize-input.focus,
.selectize-input.dropdown-active,
.lw-form-modal-body .selectize-input:focus,
.lw-form-modal-body .selectize-input.focus,
.lw-form-modal-body .selectize-input.dropdown-active {
  border-color: #25d366 !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
  outline: none !important;
}

/* Style selected items */
.selectize-input .item,
.lw-form-modal-body .selectize-input .item {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #333 !important;
  font-size: 0.7rem !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  line-height: 1.2 !important;
}

/* Hide the actual input field */
.selectize-input input,
.lw-form-modal-body .selectize-input input {
  display: none !important;
}

/* Fix dropdown positioning and sizing */
.selectize-dropdown,
.lw-form-modal-body .selectize-dropdown,
.modal .selectize-dropdown,
.card .selectize-dropdown {
  background: white !important;
  border: 1px solid #e0e0e0 !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  margin-top: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  z-index: 1070 !important;

  /* Force proper width and positioning */
  width: 100% !important;
  left: 0 !important;
  top: 100% !important;
  min-width: 100% !important;
}

.selectize-dropdown-content,
.lw-form-modal-body .selectize-dropdown-content {
  background: white !important;
  padding: 8px 0 !important;
}

.selectize-dropdown .option,
.lw-form-modal-body .selectize-dropdown .option {
  background: white !important;
  color: #333 !important;
  padding: 10px 16px !important;
  font-size: 0.7rem !important;
  border-bottom: none !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}

.selectize-dropdown .option:hover,
.selectize-dropdown .option.active,
.lw-form-modal-body .selectize-dropdown .option:hover,
.lw-form-modal-body .selectize-dropdown .option.active {
  background: #f8f9fa !important;
  color: #25d366 !important;
}

/* Form text adjustments - Compact */
.lw-form-modal-body .form-text {
  font-size: 0.7rem !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}

/* Fieldset in modal - Compact */
.lw-form-modal-body fieldset {
  margin-top: var(--lw-spacing-md) !important;
  padding: var(--lw-spacing-sm) !important;
}

.lw-form-modal-body fieldset legend {
  font-size: 0.7rem !important;
  margin-bottom: var(--lw-spacing-xs) !important;
}

/* Remove unwanted spacing from checkboxes and switches */
.lw-form-modal-body .my-3 {
  margin: var(--lw-spacing-sm) 0 !important;
}

/* Optimized Form Layout in Modals */
.lw-form-modal-body {
  padding: 0 !important;
}

.lw-form-modal-body .form-group {
  margin-bottom: 0 !important;
}

.lw-form-modal-body .form-group:last-child {
  margin-bottom: 0 !important;
}

.lw-form-modal-body label {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
}

.lw-form-modal-body .form-control {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 0.9rem !important;
  background: white !important;
  color: #333 !important;
  transition: border-color 0.2s ease !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
}

.lw-form-modal-body .form-control:focus {
  border-color: #25d366 !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
  outline: none !important;
}

.lw-form-modal-body .input-group-text {
  background: #f8f9fa !important;
  border: 1px solid #e0e0e0 !important;
  border-right: none !important;
  color: #666 !important;
  font-size: 0.9rem !important;
}

.lw-form-modal-body .input-group .form-control {
  border-left: none !important;
}

.lw-form-modal-body .input-group .form-control:focus {
  border-left: none !important;
}

/* Remove all custom grid layouts - revert to original */

/* TFS - Template For Success: Two Column Modal Layout */
.modal[id*="addVendor"] .lw-form-modal-body,
.modal[id*="AddVendor"] .lw-form-modal-body,
.modal#lwEditVendor .lw-form-modal-body,
.modal#lwEditManualSubscription .lw-form-modal-body {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px 20px !important;
}

/* Hide "Admin User" text in Edit Vendor modal */
.modal#lwEditVendor .lw-form-modal-body .text-center,
.modal#lwEditVendor .lw-form-modal-body h5 {
  display: none !important;
}

/* Full width elements at bottom */
.modal#lwEditVendor .lw-form-modal-body .form-group:has(.switchery),
.modal#lwEditVendor .lw-form-modal-body .form-group:has(input[data-lw-plugin="lwSwitchery"]),
.modal#lwEditManualSubscription .lw-form-modal-body fieldset,
.modal#lwEditManualSubscription .lw-form-modal-body .form-group:has(textarea) {
  grid-column: 1 / -1 !important;
}

/* Mobile responsive - single column on small screens */
@media (max-width: 768px) {

  .modal[id*="addVendor"] .lw-form-modal-body,
  .modal[id*="AddVendor"] .lw-form-modal-body,
  .modal#lwEditVendor .lw-form-modal-body,
  .modal#lwEditManualSubscription .lw-form-modal-body {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Remove the large h5 text and make it smaller */
.modal#lwEditVendor .lw-form-modal-body h5,
.modal#addVendorModal .lw-form-modal-body h5 {
  font-size: 0.75rem !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* Better spacing for mobile number field */
.lw-form-modal-body .form-group.mb-3 {
  margin-bottom: 0px !important;
}

/* Remove all grid layout rules */

/* Status toggles styling - Text on right side */
.lw-form-modal-body .custom-control {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
}

.lw-form-modal-body .custom-control-label {
  font-size: 0.85rem !important;
  color: #333 !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  margin-left: 10px !important;
  order: 2 !important;
}

.lw-form-modal-body .custom-control-input {
  order: 1 !important;
}

/* Switchery toggle styling - Text on right */
.lw-form-modal-body .form-group:has(.switchery) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.lw-form-modal-body .form-group:has(.switchery) label {
  order: 2 !important;
  margin-bottom: 0 !important;
  margin-left: 10px !important;
}

.lw-form-modal-body .switchery {
  order: 1 !important;
}

/* Compact mobile layout */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 15px !important;
    max-width: calc(100% - 30px) !important;
  }

  .lw-form-modal-body {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .modal-header {
    padding: 16px 20px 12px 20px !important;
  }

  .modal-body {
    padding: 20px !important;
  }

  .modal-footer {
    padding: 12px 20px !important;
  }
}

/* Modal Dialog Button Styling */
.modal-footer .btn-primary {
  background: #25d366 !important;
  border: 1px solid #25d366 !important;
  color: white !important;
  padding: 8px 20px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.modal-footer .btn-primary:hover {
  background: #22c55e !important;
  border-color: #22c55e !important;
}

.modal-footer .btn-secondary,
.modal-footer .btn-light,
.modal-footer .btn-default {
  background: white !important;
  border: 1px solid #e0e0e0 !important;
  color: #666 !important;
  padding: 8px 20px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-light:hover,
.modal-footer .btn-default:hover {
  background: #f8f9fa !important;
  border-color: #d0d0d0 !important;
  color: #333 !important;
}

/* Close button styling */
.modal-header .close {
  font-size: 1.2rem !important;
  color: #999 !important;
  opacity: 0.7 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.modal-header .close:hover {
  opacity: 1 !important;
  color: #666 !important;
}

/* Global Dropdown Styling Fixes */
.form-control,
.form-select,
select.form-control,
select,
.selectize-input,
.selectize-control.single .selectize-input {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 0.9rem !important;
  background: white !important;
  color: #333 !important;
  transition: border-color 0.2s ease !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  height: 0px !important;
  min-height: 42px !important;
}

.form-control:focus,
.form-select:focus,
select.form-control:focus,
select:focus,
.selectize-input.focus,
.selectize-control.single .selectize-input.focus {
  border-color: #25d366 !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
  outline: none !important;
}

/* Dropdown arrow styling for all select elements */
select.form-control,
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 12px !important;
  padding-right: 40px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* TFS Standard - Vendor Details Section Styling */
fieldset {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  background: white !important;
}

fieldset legend {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  padding: 0 12px !important;
  margin-bottom: 16px !important;
  border: none !important;
  width: auto !important;
}

/* Global font styling for all pages - 0.7rem with 1.2 line spacing */
fieldset h4,
.card h4,
.modal h4,
h4.text-dark,
h4.font-weight-bold {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

fieldset p.card-text,
.card p.card-text,
.modal p.card-text,
p.card-text {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  color: #666 !important;
  margin-bottom: 0px !important;
  line-height: 1.2 !important;
}

/* RTL Support for all text elements */
[dir="rtl"] fieldset h4,
[dir="rtl"] .card h4,
[dir="rtl"] .modal h4,
[dir="rtl"] h4.text-dark,
[dir="rtl"] h4.font-weight-bold {
  text-align: right !important;
  direction: rtl !important;
}

[dir="rtl"] fieldset p.card-text,
[dir="rtl"] .card p.card-text,
[dir="rtl"] .modal p.card-text,
[dir="rtl"] p.card-text {
  text-align: right !important;
  direction: rtl !important;
}

[dir="rtl"] fieldset legend {
  text-align: right !important;
  direction: rtl !important;
}

fieldset .my-2 {
  margin-bottom: 16px !important;
  margin-top: 0 !important;
}

fieldset hr {
  border-top: 1px solid #e0e0e0 !important;
  margin: 20px 0 !important;
}

/* Fix subscription button visibility and sizing */
.btn-sm {
  padding: 8px 16px !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  border-radius: 6px !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-weight: 500 !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-primary.btn-sm {
  background-color: #25d366 !important;
  border-color: #25d366 !important;
  color: white !important;
}

.btn-primary.btn-sm:hover {
  background-color: #1ea952 !important;
  border-color: #1ea952 !important;
  color: white !important;
}

/* Green gradient for login and light buttons */
.btn-light.btn-sm,
.btn-light,
.lw-ajax-link-action.btn-light {
  background: linear-gradient(135deg, #25d366 0%, #1ea952 100%) !important;
  border-color: #25d366 !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(37, 211, 102, 0.2) !important;
}

.btn-light.btn-sm:hover,
.btn-light:hover,
.lw-ajax-link-action.btn-light:hover {
  background: linear-gradient(135deg, #1ea952 0%, #17a043 100%) !important;
  border-color: #1ea952 !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(37, 211, 102, 0.3) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* Global font styling for all pages - Apply everywhere */
body,
.card-body,
.modal-body,
.table,
.form-group,
.content-wrapper,
.main-content,
.page-content {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
}

/* All headings across the application */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: #333 !important;
}

/* All paragraph and text elements */
p,
span,
div,
td,
th,
li,
a,
.text,
.card-text,
.form-text {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
}

/* Table styling */
.table th,
.table td {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
  padding: 8px 12px !important;
}

/* Form elements */
.form-control,
.form-select,
input,
textarea,
select {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
}

/* Comprehensive RTL Support for All Elements */

/* Basic RTL text and layout */
[dir="rtl"] body,
[dir="rtl"] .card-body,
[dir="rtl"] .modal-body,
[dir="rtl"] .table,
[dir="rtl"] .form-group,
[dir="rtl"] .main-content,
[dir="rtl"] .container-fluid {
  direction: rtl !important;
  text-align: right !important;
}

/* RTL Float adjustments */
[dir="rtl"] .float-right {
  float: left !important;
  margin-right: 12px !important;
  margin-left: 0 !important;
}

[dir="rtl"] .float-left {
  float: right !important;
  margin-left: 12px !important;
  margin-right: 0 !important;
}

/* RTL Text alignment */
[dir="rtl"] .text-left {
  text-align: right !important;
}

[dir="rtl"] .text-right {
  text-align: left !important;
}

/* RTL Sidebar positioning - Move sidebar to right side */
[dir="rtl"] .navbar-vertical.fixed-left {
  left: auto !important;
  right: 0 !important;
}

[dir="rtl"] .navbar-vertical.navbar-expand-md.fixed-left+.main-content {
  margin-left: 0 !important;
  margin-right: 250px !important;
}

/* RTL Minimized sidebar */
[dir="rtl"] .lw-minimized-menu .navbar-vertical.navbar-expand-md.fixed-left+.main-content {
  margin-left: 0 !important;
  margin-right: 250px !important;
}

/* RTL Sidebar content alignment */
[dir="rtl"] .navbar-vertical .navbar-nav .nav-link {
  text-align: right !important;
  padding-right: 1.5rem !important;
  padding-left: 0.5rem !important;
}

[dir="rtl"] .navbar-vertical .navbar-nav .nav-link i {
  margin-left: 8px !important;
  margin-right: 0 !important;
}

/* RTL Sidebar brand */
[dir="rtl"] .navbar-brand {
  text-align: right !important;
}

/* RTL Sidebar border */
[dir="rtl"] .lw-sidebar-container {
  border-right: none !important;
  border-left: 1px solid var(--lw-gray-200) !important;
}

/* RTL Dropdown menus */
[dir="rtl"] .dropdown-menu {
  text-align: right !important;
  left: auto !important;
  right: 0 !important;
}

[dir="rtl"] .dropdown-item {
  text-align: right !important;
  padding-right: 1rem !important;
  padding-left: 0.5rem !important;
}

/* RTL Form elements */
[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL Modal positioning */
[dir="rtl"] .modal-header .close {
  margin: 0 !important;
  float: left !important;
}

/* RTL Table alignment */
[dir="rtl"] .table th,
[dir="rtl"] .table td {
  text-align: right !important;
}

/* RTL Button groups */
[dir="rtl"] .btn-group .btn:first-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

[dir="rtl"] .btn-group .btn:last-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
}

/* RTL Pagination */
[dir="rtl"] .pagination {
  direction: rtl !important;
}

/* RTL Breadcrumb */
[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before {
  content: "\\";
  transform: scaleX(-1);
}

/* RTL Card headers */
[dir="rtl"] .card-header {
  text-align: right !important;
}

/* RTL Navigation pills/tabs */
[dir="rtl"] .nav-pills .nav-link,
[dir="rtl"] .nav-tabs .nav-link {
  text-align: right !important;
}

/* RTL Alert close button */
[dir="rtl"] .alert .close {
  float: left !important;
  margin-left: -1.25rem !important;
  margin-right: 0 !important;
}

/* Ensure buttons are visible in all contexts */
.float-right {
  float: right !important;
  margin-left: 12px !important;
}

/* RTL Support for Selectize and Form Components */
[dir="rtl"] .selectize-input,
[dir="rtl"] .lw-form-modal-body .selectize-input {
  text-align: right !important;
  direction: rtl !important;
  /* Move arrow to left side in RTL */
  background-position: left 12px center !important;
  padding: 12px 16px 12px 40px !important;
}

[dir="rtl"] .selectize-dropdown,
[dir="rtl"] .lw-form-modal-body .selectize-dropdown {
  text-align: right !important;
  direction: rtl !important;
}

[dir="rtl"] .selectize-dropdown .option,
[dir="rtl"] .lw-form-modal-body .selectize-dropdown .option {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL Support for TFS Modal Layout */
[dir="rtl"] .lw-form-modal-body .row .col-md-6:first-child {
  order: 2 !important;
}

[dir="rtl"] .lw-form-modal-body .row .col-md-6:last-child {
  order: 1 !important;
}

/* RTL Support for Icons in Forms */
[dir="rtl"] .form-group label i,
[dir="rtl"] .btn i {
  margin-left: 6px !important;
  margin-right: 0 !important;
}

/* RTL Support for Input Groups */
[dir="rtl"] .input-group .input-group-prepend {
  order: 2 !important;
}

[dir="rtl"] .input-group .input-group-append {
  order: 0 !important;
}

[dir="rtl"] .input-group .form-control {
  order: 1 !important;
}

/* RTL Support for Fieldset and Legend */
[dir="rtl"] fieldset legend {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL Support for Card Actions */
[dir="rtl"] .card-header .btn,
[dir="rtl"] .card-body .btn {
  margin-left: 0 !important;
  margin-right: 8px !important;
}

/* RTL Support for List Groups */
[dir="rtl"] .list-group-item {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL Support for Progress Bars */
[dir="rtl"] .progress-bar {
  direction: ltr !important;
  /* Keep progress direction LTR for visual consistency */
}

/* Additional Selectize Fixes for Modal Context */
.modal .selectize-control,
.modal .selectize-input,
.modal .selectize-dropdown {
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
}

/* Prevent selectize from inheriting conflicting styles */
.lw-form-modal-body .selectize-control.form-control {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: auto !important;
}

/* Ensure selectize dropdown appears above modal elements */
.modal .selectize-dropdown {
  z-index: 1070 !important;
}

/* Remove conflicting modal styling */

.modal select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 12px !important;
  padding-right: 40px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Selectize dropdown styling */
.selectize-dropdown {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  background: white !important;
  margin-top: 4px !important;
}

.selectize-dropdown-content {
  padding: 8px 0 !important;
}

.selectize-dropdown .option {
  padding: 10px 16px !important;
  font-size: 0.9rem !important;
  color: #333 !important;
  border-bottom: none !important;
}

.selectize-dropdown .option:hover,
.selectize-dropdown .option.active {
  background: #f8f9fa !important;
  color: #25d366 !important;
}

/* Textarea styling */
textarea.form-control {
  min-height: 80px !important;
  resize: vertical !important;
}

/* Force dropdown styling on all select elements globally - Enhanced */
select:not(.selectize-input),
select[class*="form"]:not(.selectize-input),
select[class*="control"]:not(.selectize-input),
.form-group select:not(.selectize-input),
.input-group select:not(.selectize-input),
div select:not(.selectize-input),
form select:not(.selectize-input),
.modal select:not(.selectize-input),
.lw-form-modal-body select:not(.selectize-input) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 12px !important;
  padding: 12px 16px 12px 16px !important;
  padding-right: 40px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  background-color: white !important;
  color: #333 !important;
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  min-height: 42px !important;
  height: 42px !important;
  transition: border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

select:focus,
select[class*="form"]:focus,
select[class*="control"]:focus,
.form-group select:focus,
.input-group select:focus,
div select:focus,
form select:focus {
  border-color: #25d366 !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
  outline: none !important;
}

/* Override any conflicting styles - Enhanced */
select:not([multiple]),
select:not([multiple]).form-control
/*,
.form-control:not([multiple]),
.form-select:not([multiple]) */
{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 12px !important;
  padding-right: 40px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: white !important;
}

/* Ensure dropdown works in all Bootstrap contexts - Exclude selectize */
.form-control.form-select:not(.selectize-input),
.form-select:not(.selectize-input),
.custom-select:not(.selectize-input) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 12px !important;
  padding-right: 40px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: white !important;
}

/* Remove grid layout fixes */

/* Ensure primary buttons in modal keep WhatsApp theme */
.modal-footer .btn-primary {
  background: var(--lw-whatsapp-gradient) !important;
  border: none !important;
  color: white !important;
}

.modal-footer .btn-primary:hover {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
}

/* Dark theme support for modal buttons */
[data-theme="dark"] .modal-footer .btn-secondary,
[data-theme="dark"] .modal-footer .btn-light,
[data-theme="dark"] .modal-footer .btn-default {
  background: var(--lw-gray-100) !important;
  border-color: var(--lw-gray-400) !important;
  color: var(--lw-gray-800) !important;
}

[data-theme="dark"] .modal-footer .btn-secondary:hover,
[data-theme="dark"] .modal-footer .btn-light:hover,
[data-theme="dark"] .modal-footer .btn-default:hover {
  background: var(--lw-gray-200) !important;
  border-color: var(--lw-gray-500) !important;
}

/* Restore Previous Small All Caps Titles with Boxes */

/* Card Titles - Small All Caps (No Boxes) */
.card-header h3,
.card-header h2,
.card-header h1,
.card-header .h1,
.card-header .h2,
.card-header .h3 {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--lw-gray-700) !important;
  margin: 0 !important;
}

/* Page Titles - Small All Caps (No Boxes) */
.lw-page-title,
.page-title,
h1.page-title,
.main-content h1,
.main-content .h1 {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--lw-gray-700) !important;
  margin-bottom: var(--lw-spacing-lg) !important;
}

/* Popup Titles - Small All Caps (No Boxes) */
.swal2-html-container h2,
.modal-title,
.modal-header h2,
.modal-header h3,
.modal-header h4 {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--lw-gray-700) !important;
  margin: 0 0 var(--lw-spacing-sm) 0 !important;
}

/* Breadcrumb Titles */
.breadcrumb-item,
.lw-breadcrumb-container .breadcrumb-item {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Table Headers - Normal Case and Center Aligned */
.table thead th,
.table.align-items-center thead th {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: var(--lw-gray-50) !important;
  color: var(--lw-gray-700) !important;
  padding: var(--lw-spacing-sm) !important;
  border-bottom: 2px solid var(--lw-gray-200) !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Form Labels - Small All Caps */
label,
.form-label {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--lw-gray-700) !important;
}

/* Fieldset Legends - Small All Caps with Proper Single Line Alignment */
fieldset legend {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--lw-gray-700) !important;
  margin-bottom: var(--lw-spacing-md) !important;
  padding: 0 var(--lw-spacing-sm) !important;
  border: none !important;
  width: auto !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* Fix legend child elements to stay inline */
fieldset legend span,
fieldset legend small {
  display: inline !important;
  margin-left: var(--lw-spacing-xs) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

fieldset legend span.text-danger {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #dc3545 !important;
}

fieldset legend small.text-muted {
  font-size: 0.6rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--lw-gray-500) !important;
  font-style: italic !important;
}

/* All Heading Elements - Small All Caps with Consistent Alignment */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--lw-gray-700) !important;
  margin: var(--lw-spacing-sm) 0 !important;
  line-height: 1.4 !important;
}

/* Specific heading sizes */
h1,
.h1 {
  font-size: 0.85rem !important;
}

h2,
.h2 {
  font-size: 0.8rem !important;
}

h3,
.h3 {
  font-size: 0.75rem !important;
}

h4,
.h4 {
  font-size: 0.7rem !important;
}

h5,
.h5 {
  font-size: 0.65rem !important;
}

h6,
.h6 {
  font-size: 0.6rem !important;
}

/* Dark Mode Support (No Boxes) */
[data-theme="dark"] .card-header h3,
[data-theme="dark"] .card-header h2,
[data-theme="dark"] .card-header h1,
[data-theme="dark"] .lw-page-title,
[data-theme="dark"] .swal2-html-container h2,
[data-theme="dark"] .modal-title {
  color: white !important;
}

[data-theme="dark"] .table thead th {
  background: var(--lw-gray-200) !important;
  color: var(--lw-gray-800) !important;
  border-color: var(--lw-gray-300) !important;
  text-align: center !important;
}

/* Fix Nested Fieldsets and Complex Form Layouts */
fieldset fieldset legend {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--lw-gray-600) !important;
  margin-bottom: var(--lw-spacing-sm) !important;
  padding: 0 var(--lw-spacing-xs) !important;
}

/* Fix form group titles and section headers */
.form-group h3,
.form-group h4,
.form-section h3,
.form-section h4,
.config-section h3,
.config-section h4 {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--lw-gray-600) !important;
  margin: var(--lw-spacing-sm) 0 var(--lw-spacing-xs) 0 !important;
}

/* Fix alert and info text styling */
.alert h3,
.alert h4,
.text-info,
.text-muted,
.text-orange {
  font-size: 0.75rem !important;
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
}

/* Fix input group labels and descriptions */
.input-group-text,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Fix button text - should NOT be uppercase */
.btn,
button,
input[type="submit"],
input[type="button"] {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Fix span and small text elements */
span.text-danger,
span.text-muted,
small.text-muted,
.small {
  font-size: 0.75rem !important;
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: inline !important;
  white-space: nowrap !important;
}

/* Remove problematic margins from spans and small elements */
span.my-2,
small.my-2,
.my-2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: var(--lw-spacing-xs) !important;
  margin-right: var(--lw-spacing-xs) !important;
}

/* Ensure proper alignment for all text elements */
* {
  box-sizing: border-box !important;
}

.form-group,
.input-group,
fieldset {
  margin-bottom: var(--lw-spacing-md) !important;
}

/* Fix specific campaign settings layout */
fieldset[x-data*="panelOpened"] legend {
  cursor: pointer !important;
  transition: color 0.3s ease !important;
}

fieldset[x-data*="panelOpened"] legend:hover {
  color: var(--lw-whatsapp-primary) !important;
}

/* Improved Alert Styling - Keep Original Colors, Smaller Text */
.alert {
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
  border-radius: var(--lw-radius-md) !important;
  margin: var(--lw-spacing-sm) 0 !important;
}

/* Alert links styling */
.alert a {
  color: inherit !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.alert a:hover {
  text-decoration: none !important;
  opacity: 0.8 !important;
}

.alert a.float-right {
  float: right !important;
  margin-left: var(--lw-spacing-sm) !important;
}

.alert a.text-white {
  color: white !important;
}

/* Alert with icons */
.alert i {
  margin-right: var(--lw-spacing-xs) !important;
  font-size: 0.8rem !important;
}

/* Code blocks in alerts */
.alert code,
.alert pre {
  background: rgba(0, 0, 0, 0.1) !important;
  color: inherit !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
  border-radius: var(--lw-radius-sm) !important;
  font-size: 0.7rem !important;
  font-family: 'Courier New', monospace !important;
}

/* Dark mode alerts */
/* WhatsApp Onboarding Section Optimization */
.form-group dl {
  margin-bottom: var(--lw-spacing-lg) !important;
}

.form-group dt {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--lw-gray-700) !important;
  margin-bottom: var(--lw-spacing-xs) !important;
}

.form-group dd {
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  color: var(--lw-gray-600) !important;
  margin-bottom: var(--lw-spacing-md) !important;
  margin-left: var(--lw-spacing-md) !important;
}

.form-group dd div {
  margin-top: var(--lw-spacing-xs) !important;
}

.form-group dd h4 {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--lw-gray-700) !important;
  margin: var(--lw-spacing-md) 0 var(--lw-spacing-sm) 0 !important;
}

.form-group dd p {
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
  margin-bottom: var(--lw-spacing-xs) !important;
}

/* App Theme Button Colors - Apply to All Buttons */
.btn-primary,
.lw-ajax-form-submit-action.btn-primary,
button[type="submit"].btn-primary,
input[type="submit"].btn-primary {
  background: var(--lw-whatsapp-gradient) !important;
  border: none !important;
  color: white !important;
  box-shadow: var(--lw-shadow-sm) !important;

}

.btn-primary:hover,
.lw-ajax-form-submit-action.btn-primary:hover,
button[type="submit"].btn-primary:hover,
input[type="submit"].btn-primary:hover {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--lw-shadow-md) !important;
}

.btn-success {
  background: var(--lw-whatsapp-gradient) !important;
  border: none !important;
  color: white !important;
}

.btn-success:hover {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
  transform: translateY(-1px) !important;
}

.btn-info {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
  border: none !important;
  color: white !important;
}

.btn-info:hover {
  background: linear-gradient(135deg, #138496 0%, #0f6674 100%) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary,
.btn-light {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 1px solid var(--lw-gray-300) !important;
  color: var(--lw-gray-700) !important;
}

.btn-secondary:hover,
.btn-light:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  color: var(--lw-gray-800) !important;
  transform: translateY(-1px) !important;
}

.btn-warning {
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
  border: none !important;
  color: #212529 !important;
}

.btn-warning:hover {
  background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%) !important;
  transform: translateY(-1px) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
  border: none !important;
  color: white !important;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%) !important;
  transform: translateY(-1px) !important;
}

/* Help buttons styling */
.btn-info.btn-sm {
  font-size: 0.7rem !important;
  padding: var(--lw-spacing-xs) var(--lw-spacing-sm) !important;
}

/* Image styling in forms */
.form-group img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--lw-radius-md) !important;
  box-shadow: var(--lw-shadow-sm) !important;
  margin: var(--lw-spacing-sm) 0 !important;
}

/* Input group styling */
.input-group .form-control {
  font-size: 0.75rem !important;
}

.input-group .btn {
  font-size: 0.75rem !important;
  padding: var(--lw-spacing-sm) var(--lw-spacing-md) !important;
}

/* Dark mode support */
[data-theme="dark"] .form-group dt {
  color: white !important;
}

[data-theme="dark"] .form-group dd {
  color: var(--lw-gray-300) !important;
}

/* Ensure All Table Types Have Consistent Header Styling */
table thead th,
.dataTables_wrapper table thead th,
.vendors-table thead th,
#lwManageVendorsTable thead th,
.table-responsive table thead th {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  vertical-align: middle !important;
  background: var(--lw-gray-50) !important;
  color: var(--lw-gray-700) !important;
  padding: var(--lw-spacing-sm) !important;
  border-bottom: 2px solid var(--lw-gray-200) !important;
}

/* DataTables specific header styling */
.dataTables_wrapper .dataTables_scrollHead table thead th {
  text-align: center !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* Table body cells - also center aligned for consistency */
.table tbody td,
.table.align-items-center tbody td,
table tbody td,
.dataTables_wrapper table tbody td {
  text-align: center !important;
  vertical-align: middle !important;
  padding: var(--lw-spacing-sm) !important;
}

/* Exception for action columns - keep left aligned */
.table tbody td:last-child,
.table.align-items-center tbody td:last-child,
table tbody td:last-child,
.actions-column,
td[data-template*="Action"] {
  text-align: center !important;
}

/* Dark mode for all table types */
[data-theme="dark"] table thead th,
[data-theme="dark"] .dataTables_wrapper table thead th,
[data-theme="dark"] .vendors-table thead th {
  background: var(--lw-gray-200) !important;
  color: var(--lw-gray-800) !important;
  border-color: var(--lw-gray-300) !important;
  text-align: center !important;
}

/* Print styles */
@media print {

  .navbar-vertical,
  .btn,
  .dropdown {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
  }

  body {
    font-size: 12pt !important;
    color: black !important;
    background: white !important;
  }
}

.navbar-vertical.navbar-expand-md .navbar-nav .nav-link{
  font-family: 'Noto Sans', 'Claudion', sans-serif !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
}

[dir="rtl"] .navbar-nav, [dir="rtl"] .nav{
  padding-left: 0;
  padding-right: 0;
}


#translationMenuDropdown{
  min-width: 100px;
}

.nav-item.dropdown .nav-link.pr-0{
  min-width: 140px;
}


[dir="rtl"] .fieldset legend span, fieldset legend small sup{
  float: left;
  margin-inline-start: 6px;
}

.nav-tabs{
  margin-left: unset;
  margin-inline-start: 20px;
}

#lwWhatsAppChatWindow .nav-tabs{
  margin-inline-start: unset;
}


[dir="rtl"] .alert-danger{
  border-left: unset !important;
  border-right: 4px solid #e53e3e !important;
}


.lw-form-modal-body .lw-btn{
  padding: 10px 20px !important;
}


.lw-subscription-cards .card-header::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f078"; /* fa-chevron-down */
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

/* Rotate when expanded */
.lw-subscription-cards .card-header[aria-expanded="true"]::after {
  transform: rotate(180deg);
}


@media (max-width: 768px) {

  .main-content #navbar-main{
    display: none !important;
  }

  .navbar-vertical {
    width: unset !important;
    transform: unset !important;
    height: 60px !important;



    position: unset !important;
    top: unset !important;
    left: unset !important;
    overflow-y: auto !important;
  }

  #sidenav-main .container-fluid{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    z-index: 9999999 !important;
    background-color: #fff;
  }


  .navbar-vertical .nav-link i.fa{
    margin-right: unset !important;
  }

  #sidenav-main > .container-fluid > ul.nav{
    width: 180px;
  }

  [dir="rtl"] .navbar-vertical.navbar-expand-md.fixed-left + .main-content {
    margin-left: unset !important;
    margin-right: unset !important;
  }

  [dir="rtl"] .navbar-collapse .collapse-close {
    text-align: left;
  }


  [dir="rtl"] #sidenav-main .dropdown-menu {
    text-align: right !important;
    right: auto !important;
    left: 0 !important;
  }
}

.modal-header button.close span{
  font-size: 1.5rem !important;
}

#lwUpdateFormen .input-group-append button{
  font-size: 1.5rem !important;
  padding: 22px !important;
}

.custom-checkbox .custom-control-input ~ .custom-control-label{
  line-height: 1.5rem !important;
}

.lw-language-block .custom-checkbox .custom-control-input ~ .custom-control-label{
  margin-left: 25px !important;
}

div:where(.swal2-icon).swal2-success [class^="swal2-success-line"][class$="long"] {
  top: 2.3em !important;
  right: 0.8em !important;
}

div:where(.swal2-icon).swal2-success [class^="swal2-success-circular-line"][class$="right"] {
  top: -0.59em !important;
  left: 1.875em !important;
}

[dir="rtl"] #navbar-collapse-main .navbar-nav.ml-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.ms-1{
  margin-inline-start: 0.25rem;
}

.ms-2{
  margin-inline-start: 0.5rem;
}

.ms-3{
  margin-inline-start: 0.75rem;
}

.ms-4{
  margin-inline-start: 1rem;
}

.ms-5{
  margin-inline-start: 1.25rem;
}

.ms-6{
  margin-inline-start: 1.5rem;
}

.ms-7{
  margin-inline-start: 1.75rem;
}

.ms-8{
  margin-inline-start: 2rem;
}

.ms-10{
  margin-inline-start: 2.5rem;
}


.me-1{
  margin-inline-end: 0.25rem;
}

.me-2{
  margin-inline-end: 0.5rem;
}

.me-3{
  margin-inline-end: 0.75rem;
}

.me-4{
  margin-inline-end: 1rem;
}

.me-5{
  margin-inline-end: 1.25rem;
}

.me-6{
  margin-inline-end: 1.5rem;
}

.me-7{
  margin-inline-end: 1.75rem;
}

.me-8{
  margin-inline-end: 2rem;
}

.me-10{
  margin-inline-end: 2.5rem;
}

.dir-ltr{
  direction: ltr;
}