/* WhatsApply Premium Custom Styling Upgrades */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --primary-gradient: linear-gradient(135deg, #8E33FF 0%, #6200EE 100%);
  --success-gradient: linear-gradient(135deg, #22C55E 0%, #15803D 100%);
  --secondary-gradient: linear-gradient(135deg, #2C7BE5 0%, #1A56DB 100%);
  --warning-gradient: linear-gradient(135deg, #BD7B00 0%, #905E00 100%);
  --danger-gradient: linear-gradient(135deg, #FF5630 0%, #D32F2F 100%);
  --card-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --card-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.06);
  --card-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Glassmorphism elements */
aside {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid rgba(229, 231, 235, 0.5) !important;
}
.dark aside {
  background: rgba(17, 24, 39, 0.85) !important;
  border-right-color: rgba(55, 65, 81, 0.5) !important;
}

nav {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(229, 231, 235, 0.5) !important;
}
.dark nav {
  background: #111827 !important;
  border-bottom-color: rgba(55, 65, 81, 0.5) !important;
}

/* Premium Card Designs */
.stat-card, .campaign-card {
  border-radius: 16px !important;
  border: 1px solid rgba(229, 231, 235, 0.6) !important;
  background: #ffffff !important;
  box-shadow: var(--card-shadow-sm) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.dark .stat-card, .dark .campaign-card {
  border-color: rgba(55, 65, 81, 0.6) !important;
  background: #111827 !important;
}
.stat-card:hover, .campaign-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-md) !important;
}

/* Stylish Inputs and Select Fields */
.input-field, .select-field, textarea {
  border-radius: 12px !important;
  border: 1px solid #d1d5db !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
  background-color: transparent !important;
}
.dark .input-field, .dark .select-field, .dark textarea {
  border-color: #374151 !important;
  color: #f3f4f6 !important;
  background-color: #1f2937 !important;
}
.input-field:focus, .select-field:focus, textarea:focus {
  border-color: #8e33ff !important;
  box-shadow: 0 0 0 3px rgba(142, 51, 255, 0.15) !important;
  outline: none !important;
}

/* Premium Button Designs */
.primary-button {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 10px 20px !important;
  transition: all 0.2s ease !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(142, 51, 255, 0.25) !important;
}
.primary-button:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(142, 51, 255, 0.35) !important;
  transform: translateY(-1px);
}
.secondary-button {
  background: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 10px 20px !important;
  transition: all 0.2s ease !important;
}
.dark .secondary-button {
  background: #1f2937 !important;
  color: #f3f4f6 !important;
  border-color: #374151 !important;
}
.secondary-button:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
}
.dark .secondary-button:hover {
  background: #374151 !important;
}

/* Badge Enhancements */
.badge-modern {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 4px 10px !important;
}

/* Modern Tab Controller Layout */
.tab-btn-container {
  display: flex !important;
  background: rgba(243, 244, 246, 0.8) !important;
  padding: 6px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(229, 231, 235, 0.8) !important;
}
.dark .tab-btn-container {
  background: rgba(31, 41, 55, 0.8) !important;
  border-color: rgba(55, 65, 81, 0.8) !important;
}
.tab-btn {
  padding: 8px 16px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  color: #6b7280 !important;
  background: transparent !important;
  border: none !important;
}
.dark .tab-btn {
  color: #9ca3af !important;
}
.tab-btn:hover {
  color: #374151 !important;
}
.dark .tab-btn:hover {
  color: #e5e7eb !important;
}
.tab-btn.active {
  background: #ffffff !important;
  color: #8e33ff !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}
.dark .tab-btn.active {
  background: #111827 !important;
  color: #a78bfa !important;
}

/* WhatsApp Message Bubbles */
.chat-bubble-incoming, .chat-bubble-outgoing {
  max-width: 70% !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
}
.chat-bubble-incoming {
  border-top-left-radius: 4px !important;
}
.chat-bubble-outgoing {
  border-top-right-radius: 4px !important;
}

/* Table Enhancements */
table {
  width: 100%;
}
tr {
  transition: background-color 0.2s ease;
}
tbody tr:hover {
  background-color: rgba(243, 244, 246, 0.4);
}
.dark tbody tr:hover {
  background-color: rgba(31, 41, 55, 0.4);
}
th {
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* Drawflow Studio Canvas Layout */
#drawflow {
  height: 650px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(229, 231, 235, 0.8) !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.02) !important;
  background-color: #f8fafc !important;
  background-image: radial-gradient(rgba(142, 51, 255, 0.15) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  position: relative !important;
}
.dark #drawflow {
  border-color: rgba(55, 65, 81, 0.8) !important;
  background-color: #0f172a !important;
  background-image: radial-gradient(rgba(167, 139, 250, 0.15) 1px, transparent 1px) !important;
}

/* Drawflow Node Stylings */
.drawflow .drawflow-node {
  width: 220px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(229, 231, 235, 0.8) !important;
  background: #ffffff !important;
  box-shadow: var(--card-shadow-md) !important;
  padding: 0 !important;
  overflow: visible !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  transition: left 0s, top 0s, border-color 0.2s, box-shadow 0.2s !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
}
.dark .drawflow .drawflow-node {
  background: #111827 !important;
  border-color: rgba(55, 65, 81, 0.8) !important;
}
.drawflow .drawflow-node.selected {
  border-color: #8e33ff !important;
  box-shadow: var(--card-shadow-lg), 0 0 0 3px rgba(142, 51, 255, 0.25) !important;
}
.drawflow .drawflow-node .title {
  padding: 10px 14px !important;
  margin: 0 !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: white !important;
}
.drawflow .drawflow-node .drawflow_content_node {
  padding: 12px 14px !important;
}

/* Node Header Variants */
.drawflow .drawflow-node.trigger-node .title {
  background: var(--primary-gradient) !important;
}
.drawflow .drawflow-node.action-node .title {
  background: var(--success-gradient) !important;
}
.drawflow .drawflow-node.logic-node .title {
  background: var(--secondary-gradient) !important;
}

/* Ports/Sockets Styles */
.drawflow .drawflow-node .inputs, .drawflow .drawflow-node .outputs {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  height: 100% !important;
  z-index: 10 !important;
}
.drawflow .drawflow-node .inputs {
  left: 0 !important;
}
.drawflow .drawflow-node .outputs {
  right: 0 !important;
}
.drawflow .drawflow-node .input, .drawflow .drawflow-node .output {
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  border: 3px solid #ffffff !important;
  background: #10b981 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  transition: all 0.2s ease !important;
  z-index: 5 !important;
}
.dark .drawflow .drawflow-node .input, .dark .drawflow .drawflow-node .output {
  border-color: #111827 !important;
}
.drawflow .drawflow-node .input {
  left: -8px !important;
}
.drawflow .drawflow-node .output {
  right: -8px !important;
}
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover {
  transform: scale(1.2) !important;
}

/* Specific vertical alignment for connection sockets to match body layout */
.drawflow-node.keyword_trigger .output_1,
.drawflow-node.new_contact_trigger .output_1,
.drawflow-node.tag_added_trigger .output_1 {
  top: 66px !important;
}

.drawflow-node.send_message .input_1,
.drawflow-node.send_message .output_1,
.drawflow-node.send_document .input_1,
.drawflow-node.send_document .output_1,
.drawflow-node.send_image .input_1,
.drawflow-node.send_image .output_1,
.drawflow-node.send_location .input_1,
.drawflow-node.send_location .output_1,
.drawflow-node.send_template .input_1,
.drawflow-node.send_template .output_1,
.drawflow-node.assign_agent .input_1,
.drawflow-node.assign_agent .output_1,
.drawflow-node.add_tag .input_1,
.drawflow-node.add_tag .output_1 {
  top: 66px !important;
}

.drawflow-node.button_message .input_1 {
  top: 66px !important;
}


.drawflow-node.condition_check .input_1 {
  top: 66px !important;
}
.drawflow-node.condition_check .output_1 {
  top: 104px !important;
}
.drawflow-node.condition_check .output_2 {
  top: 124px !important;
}

/* Connection Lines */
.drawflow .connection .main-path {
  stroke: #8e33ff !important;
  stroke-width: 3.5px !important;
  transition: stroke 0.2s !important;
}
.drawflow .connection .main-path:hover {
  stroke: #10b981 !important;
}

/* Force show/hide overrides for x-show in inbox container */
.chat-meta-col[style*="display: none"] {
  display: none !important;
}
.chat-meta-col {
  transition: all 0.3s ease !important;
}

/* Sidebar menu links styling override */
.vertical-sidebar p {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  padding-left: 12px !important;
}

.menu-link.vertical-menu {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  color: #4b5563 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
.dark .menu-link.vertical-menu {
  color: #d1d5db !important;
}

.menu-link.vertical-menu:hover {
  background: rgba(142, 51, 255, 0.08) !important;
  color: #8e33ff !important;
}
.dark .menu-link.vertical-menu:hover {
  background: rgba(167, 139, 250, 0.12) !important;
  color: #a78bfa !important;
}

.menu-link.vertical-menu.active {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(142, 51, 255, 0.25) !important;
}
.dark .menu-link.vertical-menu.active {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
}

.vertical-sidebar {
  border-top: 1px solid rgba(229, 231, 235, 0.4) !important;
  margin-top: 12px !important;
}
.dark .vertical-sidebar {
  border-top-color: rgba(55, 65, 81, 0.4) !important;
}

/* Sidebar Layout Shifting Rules */
@media (min-width: 1200px) {
  body.sidebar-open main {
    margin-left: 256px !important;
    width: calc(100% - 256px) !important;
  }
  body.sidebar-open nav {
    margin-left: 256px !important;
    width: calc(100% - 256px) !important;
  }
  
  body.sidebar-closed main {
    margin-left: 0 !important;
    width: 100% !important;
  }
  body.sidebar-closed nav {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

main, nav {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Bot Studio Sidebar & Canvas Layout */
.bot-builder-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.bot-builder-sidebar {
  width: 100% !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.bot-builder-canvas-wrapper {
  flex: 1 !important;
  min-width: 0 !important;
  position: relative !important;
}

@media (min-width: 1024px) {
  .bot-builder-container {
    flex-direction: row !important;
  }
  .bot-builder-sidebar {
    width: 260px !important;
  }
}

/* Premium Switch Toggle Switch */
.toggle-switch-btn {
  position: relative !important;
  display: inline-flex !important;
  width: 44px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  border-radius: 9999px !important;
  border: 2px solid transparent !important;
  transition: background-color 0.2s ease-in-out !important;
  outline: none !important;
}

.toggle-switch-btn.active {
  background-color: #8E33FF !important;
}

.toggle-switch-btn.inactive {
  background-color: #d1d5db !important;
}
.dark .toggle-switch-btn.inactive {
  background-color: #374151 !important;
}

.toggle-switch-circle {
  pointer-events: none !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.2s ease-in-out !important;
}

.toggle-switch-btn.active .toggle-switch-circle {
  transform: translateX(20px) !important;
}

.toggle-switch-btn.inactive .toggle-switch-circle {
  transform: translateX(0px) !important;
}

/* Improve Badge Contrast in Dark Mode */
.dark .badge-primary {
  background-color: rgba(142, 51, 255, 0.15) !important;
  color: #a78bfa !important;
  border: 1px solid rgba(142, 51, 255, 0.3) !important;
}

/* Global Active Sidebar Link Text Contrast Override */
.menu-link.vertical-menu.active,
.menu-link.vertical-menu.active span,
.menu-link.vertical-menu.active i {
  color: #ffffff !important;
}

.menu-link.vertical-menu.active:hover,
.menu-link.vertical-menu.active:hover span,
.menu-link.vertical-menu.active:hover i {
  color: #ffffff !important;
}

/* Contrast improvement for all headers and body texts in light mode */
body {
  color: #1f2937 !important;
}

.dark body {
  color: #f3f4f6 !important;
}

/* Sidebar Text and Icons Contrast */
.menu-link.vertical-menu {
  color: #374151 !important;
}
.dark .menu-link.vertical-menu {
  color: #e5e7eb !important;
}

/* Unselected Chat Items text contrast (Left Column) */
.chat-item h4 {
  color: #1f2937 !important;
}
.dark .chat-item h4 {
  color: #f9fafb !important;
}
.chat-item p {
  color: #4b5563 !important;
}
.dark .chat-item p {
  color: #9ca3af !important;
}

/* Active Chat Item text contrast */
.chat-active-item h4 {
  color: #000000 !important;
}
.dark .chat-active-item h4 {
  color: #ffffff !important;
}

/* Stat card value contrast */
.stat-card h3, .campaign-card h3 {
  color: #111827 !important;
}
.dark .stat-card h3, .dark .campaign-card h3 {
  color: #f9fafb !important;
}

/* General inputs placeholder readability */
::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}
.dark ::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* --- Global High Contrast Readability & Utility Overrides --- */

/* 1. Base Text & Utility Colors in Light Mode */
.text-neutral-900,
.text-neutral-850,
.text-neutral-800,
.text-neutral-750 {
  color: #111827 !important; /* Rich Dark Gray */
}
.text-neutral-700,
.text-neutral-600 {
  color: #374151 !important; /* Slate Gray */
}
.text-neutral-500 {
  color: #4b5563 !important; /* Mid Gray */
}
.text-neutral-400 {
  color: #6b7280 !important; /* Accessible Light Gray */
}

/* 2. Base Text & Utility Colors in Dark Mode */
.dark .text-neutral-900,
.dark .text-neutral-850,
.dark .text-neutral-800,
.dark .text-neutral-750,
.dark .text-neutral-700,
.dark .text-neutral-600,
.dark .dark\:text-neutral-10,
.dark .dark\:text-neutral-20,
.dark .dark\:text-neutral-100 {
  color: #ffffff !important; /* Clean White */
}

.dark .text-neutral-500,
.dark .text-neutral-400,
.dark .dark\:text-neutral-200,
.dark .dark\:text-neutral-300,
.dark .dark\:text-neutral-400 {
  color: #f3f4f6 !important; /* Off White */
}

.dark .dark\:text-neutral-500 {
  color: #d1d5db !important; /* Silver Gray */
}

/* Card Titles and Text inside Stats/Campaign cards */
.stat-card h1, .stat-card h2, .stat-card h3, .stat-card h4, .stat-card h5, .stat-card h6,
.campaign-card h1, .campaign-card h2, .campaign-card h3, .campaign-card h4, .campaign-card h5, .campaign-card h6 {
  color: #111827 !important;
}
.dark .stat-card h1, .dark .stat-card h2, .dark .stat-card h3, .dark .stat-card h4, .dark .stat-card h5, .dark .stat-card h6,
.dark .campaign-card h1, .dark .campaign-card h2, .dark .campaign-card h3, .dark .campaign-card h4, .dark .campaign-card h5, .dark .campaign-card h6 {
  color: #ffffff !important;
}

.stat-card p, .campaign-card p {
  color: #374151 !important;
}
.dark .stat-card p, .dark .campaign-card p {
  color: #d1d5db !important;
}

/* Responsive fixes for mobile dashboards */
@media (max-width: 640px) {
  .stat-card, .campaign-card {
    padding: 16px !important;
  }
  .primary-button, .secondary-button {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
}

/* Sidebar toggle layout shifting support */
.-translate-x-full {
  --tw-translate-x: -100% !important;
  translate: -100% var(--tw-translate-y, 0) !important;
  transform: translateX(-100%) !important;
}

/* Plan Expiration Banner Overlays & Offsets */
body.has-banner nav {
  top: 40px !important;
}
body.has-banner aside {
  top: 40px !important;
  height: calc(100vh - 40px) !important;
}
body.has-banner main {
  padding-top: 155px !important;
}
@media (min-width: 768px) {
  body.has-banner main {
    padding-top: 175px !important;
  }
}

/* Search box magnifying glass padding override */
.search-box input.input-field.pl-10, input.input-field.pl-10 {
  padding-left: 44px !important;
}

/* @media print stylesheet for clean analytics PDF exports */
@media print {
  /* Hide sidebars, banners, buttons, and dropdown controls */
  aside,
  nav,
  header,
  #plan-expiration-banner,
  .screen_loader,
  button,
  .custom-dropdown,
  .tab-btn-container,
  #index-export-dropdown,
  .screen_loader,
  [class*="customizer"],
  a[href="#"] {
    display: none !important;
  }

  /* Reset main layouts to fit standard letter/A4 paper size */
  body, html {
    background: #ffffff !important;
    color: #000000 !important;
    height: auto !important;
    overflow: visible !important;
  }

  main {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0px 10px !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* Force elements to page-break properly */
  .stat-card, .campaign-card {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #111827 !important;
    margin-bottom: 20px !important;
  }

  body.has-banner main {
    padding-top: 10px !important;
  }
}