/* ==========================================================================
   Modern & Premium Leads Kanban Board Design System
   ========================================================================== */

/* 1. Kanban Columns & Containers Styling */
.leads-kan-ban #kan-ban {
  display: flex !important;
  gap: 20px !important;
  padding: 10px 4px 20px 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  position: relative !important;
  min-height: 600px !important;
}

.leads-kan-ban .kan-ban-col {
  width: 320px !important;
  margin-right: 0 !important;
  display: inline-block !important;
  float: none !important;
  vertical-align: top !important;
  flex-shrink: 0 !important;
}

.leads-kan-ban .kan-ban-col-wrapper {
  padding: 0 !important;
}

.leads-kan-ban .kan-ban-col-wrapper .panel_s {
  border: 1px solid #f1f5f9 !important;
  border-radius: 16px !important;
  background-color: #f8fafc !important;
  box-shadow: 0 4px 20px -2px rgba(148, 163, 184, 0.06), 0 2px 6px -1px rgba(148, 163, 184, 0.04) !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  /* Force visible to prevent popup menu clipping */
}

/* 2. Column Header / Panel Heading Styling */
.leads-kan-ban .kan-ban-col-wrapper .panel-heading {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 16px !important;
  height: 62px !important;
  position: relative !important;
}

/* Flex headers for positioning elements */
.leads-kan-ban .kanban-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 70% !important;
}

.leads-kan-ban .kanban-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Reorder drag handle styling */
.leads-kan-ban .panel-heading .fa-reorder {
  color: #94a3b8 !important;
  cursor: grab !important;
  font-size: 13px !important;
  margin-right: 4px !important;
}

/* Dynamic Status Pill/Badge */
.leads-kan-ban .kanban-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  color: #ffffff !important;
  /* Force high-contrast white text for all swatches */
}

.leads-kan-ban .kanban-status-pill i {
  font-size: 12px !important;
  opacity: 0.95 !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  /* Force white icons */
}

.leads-kan-ban .kanban-status-pill .status-name {
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  color: #ffffff !important;
}

.leads-kan-ban .kanban-status-pill .status-count {
  background-color: rgba(255, 255, 255, 0.22) !important;
  /* Subtle translucent white pill */
  border-radius: 9999px !important;
  padding: 1px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
  color: #ffffff !important;
}

/* Dynamic total money values on column right */
.leads-kan-ban .kanban-status-value {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #475569 !important;
}

.leads-kan-ban .kanban-color-picker.kanban-stage-color-picker {
  color: #94a3b8 !important;
  padding: 2px 4px !important;
  font-size: 14px !important;
}

.leads-kan-ban .kanban-color-picker.kanban-stage-color-picker:hover {
  color: #475569 !important;
}

/* 3. Column Content Wrapper & List */
.leads-kan-ban .kan-ban-content-wrapper {
  background: #e8e2e2 !important;
  max-height: 65vh !important;
  min-height: 480px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.leads-kan-ban .kan-ban-content {
  background: transparent !important;
  padding: 12px 12px !important;
  min-height: 480px !important;
  overflow: visible !important;
}

.leads-kan-ban ul.status.leads-status {
  min-height: 440px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* 4. Kanban Card Styling */
.leads-kan-ban li.lead-kan-ban {
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 2px 4px -1px rgba(15, 23, 42, 0.01) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* Hidden lead cards that are loaded on demand */
.leads-kan-ban li.lead-kan-ban.hidden-lead-card {
  display: none !important;
}

/* Card being dragged needs highest z-index to appear above all elements */
.leads-kan-ban li.lead-kan-ban.ui-sortable-helper {
  z-index: 9999 !important;
  pointer-events: auto !important;
  opacity: 0.95 !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 10px 10px -5px rgba(15, 23, 42, 0.08) !important;
}

.leads-kan-ban li.lead-kan-ban:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -2px rgba(15, 23, 42, 0.04) !important;
  border-color: #cbd5e1 !important;
}

.leads-kan-ban li.lead-kan-ban .panel-body.lead-body {
  padding: 16px !important;
  background: #ffffff !important;
  border: none !important;
  margin: 0 !important;
}

/* Lead Header (Name and Value) */
.leads-kan-ban .card-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.leads-kan-ban .lead-title-link {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.leads-kan-ban .lead-title-link:hover {
  color: #2563eb !important;
}

.leads-kan-ban .lead-value-badge {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #d97706 !important;
  /* Elegant golden-amber color matching mockup */
  white-space: nowrap !important;
}

/* Lead Subtitle (Company or Source) */
.leads-kan-ban .card-subtitle-row {
  margin-bottom: 12px !important;
}

.leads-kan-ban .lead-company-text {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  display: inline-block !important;
}

.leads-kan-ban .lead-source-text {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* Card Divider */
.leads-kan-ban .card-divider {
  border-top: 1px solid #f1f5f9 !important;
  margin: 8px 0 10px 0 !important;
}

/* Card Footer (Assignee and Metadata) */
.leads-kan-ban .card-footer-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Left side: Avatar + Assignee Name + Date */
.leads-kan-ban .card-footer-left {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 65% !important;
}

.leads-kan-ban .card-footer-left a {
  display: inline-flex !important;
  align-items: center !important;
}

.leads-kan-ban .staff-profile-image-xs {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 1px solid #f1f5f9 !important;
  object-fit: cover !important;
}

.leads-kan-ban .unassigned-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background-color: #f1f5f9 !important;
  border: 1px dashed #cbd5e1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
}

.leads-kan-ban .assignee-meta {
  display: flex !important;
  flex-direction: column !important;
  max-width: calc(100% - 30px) !important;
  line-height: 1.2 !important;
}

.leads-kan-ban .assignee-name {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.leads-kan-ban .lead-time-ago {
  font-size: 10px !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
}

/* Right side: Attachment / Note badges */
.leads-kan-ban .card-footer-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

.leads-kan-ban .card-footer-right span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.leads-kan-ban .card-footer-right i {
  font-size: 12px !important;
}

/* Modern Pill Tags */
.leads-kan-ban .card-tags-row {
  margin-top: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.leads-kan-ban .kanban-tags .tag {
  background-color: #f1f5f9 !important;
  border: none !important;
  color: #475569 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
}

/* 5. Drag and Drop Custom Placeholder Styling */
.leads-kan-ban .ui-state-highlight-card {
  height: 110px !important;
  border: none !important;
  background: transparent !important;
  margin: 0px 0px 12px 0px !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Drag and Drop Custom Column Placeholder Styling (Task 1) */
.leads-kan-ban .ui-state-highlight-col {
  width: 320px !important;
  min-height: 500px !important;
  border: 2.5px dashed #cbd5e1 !important;
  border-radius: 16px !important;
  background-color: rgba(148, 163, 184, 0.03) !important;
  display: inline-block !important;
  vertical-align: top !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}

/* Continuous dashed rectangle outlining the entire column drop zone container when dragged over */
.leads-kan-ban .kan-ban-col-wrapper .panel_s:has(.leads-status.ui-sortable-hover),
.leads-kan-ban .kan-ban-col-wrapper .panel_s:has(.ui-state-highlight-card) {
  border: 2.5px dashed #3B82F6 !important;
  border-radius: 10px !important;
  background-color: rgba(59, 130, 246, 0.03) !important;
  transition: all 0.12s ease-in-out !important;
}

/* Card details expansion styling */
.leads-kan-ban .kan-ban-expand-top {
  background: #f8fafc !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  color: #94a3b8 !important;
}

.leads-kan-ban .kan-ban-expand-top:hover {
  background: #cbd5e1 !important;
  color: #475569 !important;
}

/* Load more button styling */
.leads-kan-ban .kanban-load-more {
  margin: 8px 0 !important;
}

.leads-kan-ban .kanban-load-more a {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.15s ease !important;
}

.leads-kan-ban .kanban-load-more a:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}

/* 6. Premium Popover & Color Swatches Styling */
.leads-kan-ban .popover {
  width: 260px !important;
  max-width: 260px !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
  padding: 14px !important;
  text-align: center !important;
  background: #ffffff !important;
  overflow: visible !important;
}

.leads-kan-ban .popover-content {
  padding: 0 !important;
  overflow: visible !important;
}

.leads-kan-ban .popover .new-lead-from-status {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  width: 100% !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1) !important;
}

.leads-kan-ban .popover .new-lead-from-status:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

.leads-kan-ban .popover hr {
  margin: 12px 0 !important;
  border-top: 1px solid #f1f5f9 !important;
}

/* Flex Center Dynamic Color Pickers Wrapper */
.leads-kan-ban .popover .cpicker-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 4px 0 !important;
  width: 100% !important;
}

.leads-kan-ban .popover .kan-ban-settings {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Beautiful Circular Dynamic Color Swatches */
.leads-kan-ban .popover .cpicker {
  float: none !important;
  display: inline-block !important;
  margin: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  /* Perfectly round color circles */
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.leads-kan-ban .popover .cpicker:hover {
  transform: scale(1.22) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
}

.leads-kan-ban .popover .cpicker-big {
  border: 2px solid #ffffff !important;
  outline: 2px solid #2563eb !important;
  transform: scale(1.15) !important;
}

/* ==========================================================================
   Audio Update Header & Cells Center Alignment Fixes
   ========================================================================== */
.table-leads td:has(.chat-lead-btn) {
  vertical-align: middle !important;
  text-align: center !important;
}

#th-chat {
  vertical-align: middle !important;
  text-align: center !important;
  position: relative !important;
  padding: 10px 12px !important;
}

#th-chat .audio-update-th-container {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  float: none !important;
}

#th-chat .audio-update-th-container i {
  font-size: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  float: none !important;
  display: inline-block !important;
}

#th-chat .audio-update-th-container span {
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#th-chat::before,
#th-chat::after {
  display: none !important;
}

.leads-kan-ban .kan-ban-edit-lead {
  position: absolute !important;
  top: 0px !important;
  right: 28px !important;
  background: #f8fafc !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
}
.leads-kan-ban .kan-ban-edit-lead:hover {
  background: #cbd5e1 !important;
  color: #475569 !important;
}