/**
 * KodexCRM Kanban — responsive board + lead cards.
 * Loaded as L5 so it wins over Perfex style.css / patterns.
 */
html body.app.admin.kan-ban-body .content,
html body.app.admin #kan-ban-tab {
  max-width: 100%;
  min-width: 0;
}

html body.app.admin #kan-ban-tab {
  padding: 0 !important;
  margin-top: 12px !important;
}

html body.app.admin .kanban-leads-sort,
html body.app.admin #kan-ban-tab .kanban-leads-sort {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 12px !important;
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  background: var(--kodex-crm-surface, #fff) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: var(--kodex-radius-md, 4px) !important;
  font-size: 13px !important;
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin .kanban-leads-sort a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

html body.app.admin .kanban-leads-sort a .kanban-sort-icon,
html body.app.admin .kanban-leads-sort a .fa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 12px !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  top: 0 !important;
}

html body.app.admin .kanban-leads-sort a:hover,
html body.app.admin .kanban-leads-sort a.active {
  color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin .kan-ban-tab,
html body.app.admin #kan-ban,
html body.app.admin .kan-ban,
html body.app.admin .kb-kan-ban#kan-ban {
  background: transparent !important;
  overflow: visible !important;
}

html body.app.admin .kan-ban-wrapper,
html body.app.admin #kan-ban-tab[style],
html body.app.admin #kan-ban-tab {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
  padding-bottom: 8px;
}

/* Horizontal board */
html body.app.admin #kan-ban,
html body.app.admin .kb-kan-ban#kan-ban {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: max-content !important;
  min-width: 100% !important;
  min-height: 420px;
  padding: 4px 2px 12px !important;
  scroll-snap-type: x proximity;
}

html body.app.admin .kan-ban-col,
html body.app.admin ul.kan-ban-col {
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 min(300px, 86vw) !important;
  width: min(300px, 86vw) !important;
  max-width: 320px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: color-mix(in srgb, var(--kodex-crm-canvas, #f0f1f4) 70%, #fff) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 8px !important;
  min-height: 280px;
  scroll-snap-align: start;
  box-sizing: border-box !important;
}

html body.app.admin .kan-ban-col-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  list-style: none !important;
}

html body.app.admin .kan-ban-col .panel_s,
html body.app.admin .kan-ban-col-wrapper .panel_s,
html body.app.admin .kan-ban-col .border-right {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: 100% !important;
}

html body.app.admin .kan-ban-col .panel-heading,
html body.app.admin .kan-ban-col-header,
html body.app.admin .kanban-col-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 8px !important;
  margin: 0 !important;
  padding: 12px 12px 10px !important;
  border: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  color: #fff !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  background: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin .kan-ban-col .panel-heading .heading,
html body.app.admin .kan-ban-col .panel-heading small {
  color: inherit !important;
}

html body.app.admin .kan-ban-col .panel-heading small {
  opacity: 0.85;
  font-weight: 500 !important;
}

html body.app.admin .kanban-color-picker,
html body.app.admin .kanban-stage-color-picker {
  color: #fff !important;
  margin-left: auto !important;
  float: none !important;
}

html body.app.admin .kan-ban-content-wrapper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: min(68vh, 720px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;
}

html body.app.admin .kan-ban-content {
  background: transparent !important;
  padding: 8px !important;
  min-height: 120px;
}

html body.app.admin .kan-ban-content > ul.status,
html body.app.admin ul.leads-status {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Lead / task cards — inset must beat Bootstrap .row (-15px) + Perfex lead-name (-10px) */
html body.app.admin #kan-ban .kan-ban-content .panel-body,
html body.app.admin #kan-ban .lead-kan-ban .panel-body,
html body.app.admin #kan-ban .lead-body,
html body.app.admin #kan-ban .lead-body.kpf-kb-card,
html body.app.admin #kan-ban li.lead-kan-ban > .panel-body,
html body.app.admin .kan-ban-content .panel-body,
html body.app.admin .lead-kan-ban .panel-body,
html body.app.admin .lead-body,
html body.app.admin .task-kanban .panel-body,
html body.app.admin .kanban-card,
html body.app.admin li.lead-kan-ban > .panel-body {
  position: relative !important;
  background: var(--kodex-crm-surface, #fff) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 0 color-mix(in srgb, #14141a 4%, transparent) !important;
  margin: 0 !important;
  padding: 14px 40px 14px 18px !important;
  box-sizing: border-box !important;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

html body.app.admin #kan-ban li.lead-kan-ban.current-user-lead > .panel-body,
html body.app.admin #kan-ban li.lead-kan-ban.current-user-lead .lead-body,
html body.app.admin li.lead-kan-ban.current-user-lead .panel-body,
html body.app.admin li.lead-kan-ban.current-user-lead .lead-body {
  padding-left: 20px !important;
  box-shadow: inset 3px 0 0 var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin .lead-kan-ban .panel-body:hover,
html body.app.admin .kanban-card:hover {
  border-color: color-mix(in srgb, var(--kodex-action-primary, #001bff) 35%, #d3d6e0) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, #14141a 7%, transparent) !important;
}

html body.app.admin li.lead-kan-ban.current-user-lead .panel-body:hover {
  box-shadow:
    inset 3px 0 0 var(--kodex-action-primary, #001bff),
    0 8px 18px color-mix(in srgb, #14141a 7%, transparent) !important;
}

html body.app.admin li.lead-kan-ban {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.app.admin #kan-ban .panel-body .lead-name,
html body.app.admin #kan-ban .panel-body .task-name,
html body.app.admin #kan-ban .lead-body .lead-name {
  background: none !important;
  margin: 0 0 10px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.app.admin .lead-kan-ban .lead-name a,
html body.app.admin .kan-ban-content a.tw-font-medium {
  color: var(--kodex-text-primary, #14141a) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

html body.app.admin .lead-kan-ban .lead-name a:hover {
  color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin .lead-kan-ban .lead-name .tw-truncate {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

html body.app.admin #kan-ban .lead-body .kpf-kb-card__meta,
html body.app.admin #kan-ban .lead-body .row.kpf-kb-card__meta,
html body.app.admin #kan-ban .lead-kan-ban .row,
html body.app.admin .lead-kan-ban .kpf-kb-card__meta,
html body.app.admin .lead-kan-ban .row.kpf-kb-card__meta,
html body.app.admin .lead-kan-ban .row {
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin #kan-ban .lead-body .row > [class*='col-'],
html body.app.admin .lead-kan-ban .row > [class*='col-'] {
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

html body.app.admin #kan-ban .kpf-kb-card__meta-row,
html body.app.admin .lead-kan-ban .kpf-kb-card__meta-row {
  margin: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin .lead-kan-ban .tw-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: flex-start !important;
}

html body.app.admin .lead-kan-ban .tw-grow {
  flex: 1 1 120px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body.app.admin .lead-kan-ban .text-right {
  text-align: left !important;
  flex: 1 1 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  align-items: center !important;
}

html body.app.admin .lead-kan-ban .tw-text-sm,
html body.app.admin .lead-kan-ban small,
html body.app.admin .lead-kan-ban p.tw-text-sm {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin .lead-kan-ban .kanban-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 2px !important;
}

html body.app.admin .kan-ban-expand-top,
html body.app.admin .lead-body .kan-ban-expand-top,
html body.app.admin .kpf-kb-card .kan-ban-expand-top {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--kodex-crm-canvas, #f0f1f4) 80%, #fff) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  line-height: 1 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

html body.app.admin .kan-ban-expand-top i,
html body.app.admin .kan-ban-expand-top .fa {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 12px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

html body.app.admin .kanban-load-more .btn {
  border-radius: 4px !important;
  font-weight: 600 !important;
}

html body.app.admin .kanban-empty h4 {
  font-size: 13px !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  font-weight: 500 !important;
}

html body.app.admin .kan-ban-settings,
html body.app.admin .cpicker-wrapper {
  border-radius: var(--kodex-radius-sm, 2px) !important;
}

/* Phone / small tablets: snap columns, shorter stacks */
@media (max-width: 900px) {
  html body.app.admin #kan-ban,
  html body.app.admin .kb-kan-ban#kan-ban {
    scroll-snap-type: x mandatory;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  html body.app.admin .kan-ban-col,
  html body.app.admin ul.kan-ban-col {
    flex: 0 0 min(280px, 88vw) !important;
    width: min(280px, 88vw) !important;
    max-width: 88vw !important;
    scroll-snap-align: center;
  }

  html body.app.admin .kan-ban-content-wrapper {
    max-height: min(62vh, 560px) !important;
  }
}

@media (max-width: 560px) {
  html body.app.admin .kan-ban-col,
  html body.app.admin ul.kan-ban-col {
    flex: 0 0 92vw !important;
    width: 92vw !important;
    max-width: 92vw !important;
  }

  html body.app.admin .kan-ban-col .panel-heading {
    font-size: 12px !important;
    padding: 10px !important;
  }

  html body.app.admin .kan-ban-content-wrapper {
    max-height: min(58vh, 480px) !important;
  }

  html body.app.admin #kan-ban .lead-body,
  html body.app.admin #kan-ban .lead-kan-ban .panel-body,
  html body.app.admin .lead-body,
  html body.app.admin .lead-kan-ban .panel-body {
    padding: 12px 36px 12px 16px !important;
  }
}

/* Dark */
html body.app.admin.kodex-crm-admin--ui-dark .kan-ban-col,
html[data-theme='dark'] body.app.admin .kan-ban-col {
  background: color-mix(in srgb, #000 30%, #17181e) !important;
  border-color: var(--kodex-border-default, #2a2c36) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .lead-body,
html body.app.admin.kodex-crm-admin--ui-dark .lead-kan-ban .panel-body,
html[data-theme='dark'] body.app.admin .lead-body {
  background: var(--kodex-crm-surface, #17181e) !important;
  border-color: var(--kodex-border-default, #2a2c36) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .lead-kan-ban .lead-name a,
html[data-theme='dark'] body.app.admin .lead-kan-ban .lead-name a {
  color: #f3f4f6 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kanban-leads-sort,
html[data-theme='dark'] body.app.admin .kanban-leads-sort {
  background: var(--kodex-crm-surface, #17181e) !important;
  border-color: var(--kodex-border-default, #2a2c36) !important;
}