/* KpfClientProfile — /admin/clients/client/{id} workspace (sidebar + profile form) */

html body.app.admin.kpf-client-profile,
html body.app.admin:has(#wrapper.customer_profile) {
  --kpf-client-ink: var(--kodex-text-primary, #14141a);
  --kpf-client-sec: var(--kodex-text-secondary, #40424d);
  --kpf-client-muted: var(--kodex-text-muted, #6e7180);
  --kpf-client-line: var(--kodex-border-default, #d3d6e0);
  --kpf-client-soft: var(--kodex-border-subtle, #edeff7);
  --kpf-client-surface: var(--kodex-bg-surface, #fff);
  --kpf-client-canvas: var(--kodex-bg-canvas, #f0f1f4);
  --kpf-client-cobalt: var(--kodex-action-primary, #001bff);
  --kpf-client-radius: 4px;
}

/* —— Page frame —— */
html body.app.admin.kpf-client-profile #wrapper.customer_profile .content,
html body.app.admin:has(#wrapper.customer_profile) #wrapper.customer_profile .content {
  background: var(--kpf-client-canvas) !important;
  padding-top: 16px !important;
  padding-bottom: 48px !important;
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Two-column layout: sticky nav + fluid main */
html body.app.admin.kpf-client-profile .kpf-client-layout {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav-col {
  width: 268px !important;
  max-width: 268px !important;
  flex: 0 0 268px !important;
  position: sticky !important;
  top: calc(var(--kodex-crm-admin-deck-h, 46px) + 12px) !important;
  align-self: flex-start !important;
  z-index: 2 !important;
  max-height: calc(100vh - var(--kodex-crm-admin-deck-h, 46px) - 28px) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Hide raw title once promoted into nav head */
html body.app.admin.kpf-client-profile .kpf-client-title-source[hidden] {
  display: none !important;
}

html body.app.admin.kpf-client-profile .kpf-client-main-col {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-top: 0 !important;
}

/* —— Sidebar nav card —— */
html body.app.admin.kpf-client-profile .kpf-client-nav,
html body.app.admin #wrapper.customer_profile nav.customer-tabs {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  border: 1px solid var(--kpf-client-line) !important;
  border-radius: var(--kpf-client-radius) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, #14141a 5%, transparent) !important;
  background: var(--kpf-client-surface) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__head {
  flex-shrink: 0 !important;
  padding: 16px 16px 12px !important;
  border-bottom: 1px solid var(--kpf-client-soft) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-client-cobalt) 5%, #fff) 0%,
      var(--kpf-client-surface) 100%
    ) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__title {
  margin: 0 !important;
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kpf-client-ink) !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__lead {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  color: var(--kpf-client-muted) !important;
  line-height: 1.35 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__body,
html body.app.admin #wrapper.customer_profile nav.customer-tabs > ul {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 10px 14px !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  scrollbar-width: thin !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__body > li,
html body.app.admin #wrapper.customer_profile nav.customer-tabs > ul > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__link,
html body.app.admin #wrapper.customer_profile nav.customer-tabs > ul > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 36px !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  border-radius: var(--kpf-client-radius) !important;
  border: 1px solid transparent !important;
  color: var(--kpf-client-sec) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--kpf-client-canvas) !important;
  border: 1px solid var(--kpf-client-soft) !important;
  color: var(--kpf-client-muted) !important;
  flex-shrink: 0 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__icon i,
html body.app.admin.kpf-client-profile .kpf-client-nav__link i,
html body.app.admin #wrapper.customer_profile nav.customer-tabs > ul > li > a > i {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__link .badge,
html body.app.admin #wrapper.customer_profile nav.customer-tabs > ul > li > a .badge {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__link:hover,
html body.app.admin #wrapper.customer_profile nav.customer-tabs > ul > li > a:hover {
  color: var(--kpf-client-ink) !important;
  background: color-mix(in srgb, var(--kpf-client-cobalt) 5%, transparent) !important;
  border-color: color-mix(in srgb, var(--kpf-client-cobalt) 12%, transparent) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__link:hover .kpf-client-nav__icon {
  color: var(--kpf-client-cobalt) !important;
  border-color: color-mix(in srgb, var(--kpf-client-cobalt) 22%, transparent) !important;
  background: color-mix(in srgb, var(--kpf-client-cobalt) 8%, #fff) !important;
}

/* Active tab */
html body.app.admin.kpf-client-profile .kpf-client-nav__link.is-active,
html body.app.admin.kpf-client-profile .kpf-client-nav__item--active > a,
html body.app.admin #wrapper.customer_profile nav.customer-tabs > ul > li > a.tw-bg-neutral-50,
html body.app.admin #wrapper.customer_profile nav.customer-tabs > ul > li > a.tw-text-primary-600 {
  color: var(--kpf-client-cobalt) !important;
  background: color-mix(in srgb, var(--kpf-client-cobalt) 9%, #fff) !important;
  border-color: color-mix(in srgb, var(--kpf-client-cobalt) 22%, transparent) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--kpf-client-cobalt) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-nav__link.is-active .kpf-client-nav__icon,
html body.app.admin.kpf-client-profile .kpf-client-nav__item--active .kpf-client-nav__icon {
  color: #fff !important;
  background: var(--kpf-client-cobalt) !important;
  border-color: var(--kpf-client-cobalt) !important;
}

/* Mobile select */
html body.app.admin.kpf-client-profile .kpf-client-nav-col > select,
html body.app.admin #wrapper.customer_profile .content select.tw-block.md\:tw-hidden {
  margin-bottom: 12px !important;
  min-height: 40px !important;
  border-radius: var(--kpf-client-radius) !important;
  border-color: var(--kpf-client-line) !important;
}

/* —— Main panel (profile form / group content) —— */
html body.app.admin.kpf-client-profile .kpf-client-panel,
html body.app.admin.kpf-client-profile .kpf-client-main-col > .panel_s {
  border: 1px solid var(--kpf-client-line) !important;
  border-radius: var(--kpf-client-radius) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, #14141a 5%, transparent) !important;
  background: var(--kpf-client-surface) !important;
  overflow: hidden !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Undo datatable panel chrome on profile form */
html body.app.admin.kpf-client-profile .kpf-client-panel.kpf-dt-panel,
html body.app.admin.kpf-client-profile .panel_s:has(.client-form) {
  border-radius: var(--kpf-client-radius) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, #14141a 4%, transparent) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-panel > .panel-body,
html body.app.admin.kpf-client-profile .kpf-client-main-col > .panel_s > .panel-body,
html body.app.admin.kpf-client-profile .panel_s:has(.client-form) > .panel-body {
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

html body.app.admin.kpf-client-profile .customer-profile-group-heading,
html body.app.admin #wrapper.customer_profile .customer-profile-group-heading {
  margin: 0 !important;
  padding: 18px 24px 0 !important;
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kpf-client-sec) !important;
}

/* Inner profile tabs — segmented control */
html body.app.admin.kpf-client-profile .client-form .horizontal-scrollable-tabs,
html body.app.admin.kpf-client-profile .client-form .panel-full-width-tabs {
  margin: 16px 20px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

html body.app.admin.kpf-client-profile .client-form .horizontal-scrollable-tabs > .scroller {
  display: none !important;
}

html body.app.admin.kpf-client-profile .client-form .horizontal-tabs {
  padding: 0 !important;
  overflow: visible !important;
}

html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal,
html body.app.admin.kpf-client-profile .client-form ul.customer-profile-tabs,
html body.app.admin.kpf-client-profile .client-form ul.kpf-client-profile-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 5px !important;
  border: 1px solid var(--kpf-client-line) !important;
  border-radius: 6px !important;
  background: var(--kpf-client-canvas) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent) !important;
  overflow: visible !important;
  list-style: none !important;
}

html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li,
html body.app.admin.kpf-client-profile .client-form ul.kpf-client-profile-tabs > li {
  float: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  list-style: none !important;
}

html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li > a,
html body.app.admin.kpf-client-profile .client-form ul.kpf-client-profile-tabs > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--kpf-client-sec) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-tab__icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--kpf-client-ink) 5%, transparent) !important;
  color: var(--kpf-client-muted) !important;
  flex-shrink: 0 !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-tab__icon svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-tab__label {
  display: inline-block !important;
}

html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li > a .badge,
html body.app.admin.kpf-client-profile .client-form ul.kpf-client-profile-tabs > li > a .badge {
  margin: 0 0 0 2px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--kpf-client-cobalt) 12%, transparent) !important;
  color: var(--kpf-client-cobalt) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li > a:hover,
html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li > a:focus {
  color: var(--kpf-client-ink) !important;
  background: color-mix(in srgb, #fff 75%, transparent) !important;
  border-color: color-mix(in srgb, var(--kpf-client-line) 70%, transparent) !important;
  box-shadow: none !important;
}

html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li > a:hover .kpf-client-tab__icon {
  color: var(--kpf-client-cobalt) !important;
  background: color-mix(in srgb, var(--kpf-client-cobalt) 10%, #fff) !important;
}

html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li.active > a,
html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li.active > a:hover,
html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li.active > a:focus,
html body.app.admin.kpf-client-profile .client-form ul.kpf-client-profile-tabs > li.active > a {
  color: #fff !important;
  background: var(--kpf-client-cobalt) !important;
  border-color: var(--kpf-client-cobalt) !important;
  border-bottom-color: var(--kpf-client-cobalt) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--kpf-client-cobalt) 28%, transparent) !important;
}

html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li.active > a .kpf-client-tab__label,
html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li.active > a .kpf-client-tab__icon,
html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li.active > a .kpf-client-tab__icon svg {
  color: #fff !important;
  fill: none !important;
  stroke: currentColor !important;
}

html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li.active > a .kpf-client-tab__icon {
  background: color-mix(in srgb, #fff 18%, transparent) !important;
}

html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li.active > a .badge {
  background: color-mix(in srgb, #fff 22%, transparent) !important;
  color: #fff !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .client-form .nav-tabs-horizontal,
html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .client-form ul.kpf-client-profile-tabs {
  background: color-mix(in srgb, #fff 4%, #14141a) !important;
  box-shadow: none !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .client-form .nav-tabs-horizontal > li > a:hover {
  background: color-mix(in srgb, #fff 6%, transparent) !important;
}

@media (max-width: 767px) {
  html body.app.admin.kpf-client-profile .client-form .horizontal-scrollable-tabs {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal,
  html body.app.admin.kpf-client-profile .client-form ul.kpf-client-profile-tabs {
    display: flex !important;
    width: 100% !important;
  }

  html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li {
    flex: 1 1 auto !important;
  }

  html body.app.admin.kpf-client-profile .client-form .nav-tabs-horizontal > li > a {
    width: 100% !important;
    justify-content: center !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html body.app.admin.kpf-client-profile .client-form .kpf-client-tab__label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 9ch !important;
  }
}

/* Form fields */
html body.app.admin.kpf-client-profile .client-form > .col-md-12,
html body.app.admin #wrapper.customer_profile .client-form > .col-md-12 {
  float: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Profile form wraps in a Bootstrap .row — kill negative gutters so tabs/fields share one inset */
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content > .row:has(> .client-form),
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content > .row:has(form.client-form),
html body.app.admin.kpf-client-profile form.client-form {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body.app.admin.kpf-client-profile .client-form .tab-content,
html body.app.admin.kpf-client-profile .client-form .tab-content.mtop15,
html body.app.admin #wrapper.customer_profile .client-form .tab-content.mtop15 {
  /* Match horizontal-scrollable-tabs inset (20px) so fields don't kiss the panel edge */
  margin: 16px 20px 20px !important;
  padding: 18px 4px 8px !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
}

/* —— Contact details field grid (12-col CSS grid; ignore BS float %) —— */
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: start !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > [class*='col-'] {
  float: none !important;
  position: relative !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  grid-column: 1 / -1; /* default full width */
}

/* 3-up: NIF / Tel / Web · Localidad / Provincia / CP */
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .col-md-4,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .col-sm-6.col-md-4,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .col-sm-12.col-md-4 {
  grid-column: span 4;
}

/* 2-up: Moneda / Idioma · País */
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .col-md-6,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .col-sm-6.col-md-6,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .col-sm-6:not([class*='col-md-']) {
  grid-column: span 6;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .col-md-12,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .kpf-client-fields__full,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .kpf-client-fields__banner {
  grid-column: 1 / -1;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .form-group {
  margin-bottom: 16px !important;
  width: 100% !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .form-group > label,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .control-label {
  display: block !important;
  margin-bottom: 6px !important;
  min-height: 18px !important;
}

/* Keep help icon from shoving the currency select */
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .fa-circle-question.pull-left {
  float: none !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  z-index: 2 !important;
  color: var(--kpf-client-muted) !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .form-control,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .input-group,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .bootstrap-select,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .bootstrap-select.btn-group,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .bootstrap-select > .dropdown-toggle,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .bootstrap-select .dropdown-toggle {
  width: 100% !important;
  max-width: 100% !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .input-group .form-control {
  width: 1% !important; /* BS input-group flex shrink */
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields .input-group {
  display: table !important;
  width: 100% !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields textarea.form-control {
  min-height: 88px !important;
  resize: vertical !important;
}

/* Tablet: 2 columns for triples */
@media (max-width: 991px) {
  html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .col-md-4,
  html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .col-sm-6.col-md-4 {
    grid-column: span 6;
  }

  html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > .col-sm-12.col-md-4 {
    grid-column: 1 / -1;
  }
}

/* Phone: everything full bleed */
@media (max-width: 767px) {
  html body.app.admin.kpf-client-profile .client-form .kpf-client-fields {
    column-gap: 0 !important;
  }

  html body.app.admin.kpf-client-profile .client-form .kpf-client-fields > [class*='col-'] {
    grid-column: 1 / -1 !important;
  }
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields__banner {
  width: 100% !important;
  margin-bottom: 12px !important;
}

/* Native checkbox row — do not rely on Perfex absolute ::before (clips in padded banner) */
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields__banner .checkbox,
html body.app.admin.kpf-client-profile .client-form #client-show-primary-contact-wrapper .checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid color-mix(in srgb, var(--kpf-client-cobalt) 16%, var(--kpf-client-line)) !important;
  border-radius: var(--kpf-client-radius) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-client-cobalt) 6%, #fff) 0%,
      color-mix(in srgb, var(--kpf-client-canvas) 55%, #fff) 100%
    ) !important;
  min-height: 52px !important;
  box-shadow: none !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields__banner .checkbox input[type='checkbox'],
html body.app.admin.kpf-client-profile .client-form #client-show-primary-contact-wrapper .checkbox input[type='checkbox'] {
  position: static !important;
  float: none !important;
  opacity: 1 !important;
  margin: 2px 0 0 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  accent-color: var(--kpf-client-cobalt) !important;
  z-index: auto !important;
  left: auto !important;
  top: auto !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields__banner .checkbox label,
html body.app.admin.kpf-client-profile .client-form #client-show-primary-contact-wrapper .checkbox label {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: var(--kpf-client-ink) !important;
  cursor: pointer !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields__banner .checkbox label::before,
html body.app.admin.kpf-client-profile .client-form .kpf-client-fields__banner .checkbox label::after,
html body.app.admin.kpf-client-profile .client-form #client-show-primary-contact-wrapper .checkbox label::before,
html body.app.admin.kpf-client-profile .client-form #client-show-primary-contact-wrapper .checkbox label::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .client-form .kpf-client-fields__banner .checkbox {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-client-cobalt) 16%, #14141a) 0%,
      #14141a 100%
    ) !important;
  border-color: color-mix(in srgb, var(--kpf-client-cobalt) 28%, var(--kpf-client-line)) !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields__section {
  margin: 4px 0 10px !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kpf-client-muted) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-fields__rule {
  margin: 8px 0 16px !important;
  border: 0 !important;
  border-top: 1px solid var(--kpf-client-soft) !important;
}

/* Billing / shipping address cards */
html body.app.admin.kpf-client-profile .client-form .kpf-client-addresses {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-card {
  margin: 0 !important;
  border: 1px solid var(--kpf-client-line) !important;
  border-radius: var(--kpf-client-radius) !important;
  background: var(--kpf-client-surface) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, #14141a 4%, transparent) !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-card__head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 12px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--kpf-client-soft) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-client-cobalt) 5%, #fff) 0%,
      var(--kpf-client-surface) 100%
    ) !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-card__titles .kpf-client-fields__section {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-card__hint {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid var(--kpf-client-line) !important;
  background: var(--kpf-client-canvas) !important;
  color: var(--kpf-client-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: help !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-card__action {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid color-mix(in srgb, var(--kpf-client-cobalt) 22%, var(--kpf-client-line)) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--kpf-client-cobalt) 6%, #fff) !important;
  color: var(--kpf-client-cobalt) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition:
    background 0.14s ease,
    border-color 0.14s ease !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-card__action:hover {
  background: color-mix(in srgb, var(--kpf-client-cobalt) 12%, #fff) !important;
  border-color: color-mix(in srgb, var(--kpf-client-cobalt) 40%, transparent) !important;
  color: var(--kpf-client-cobalt) !important;
  text-decoration: none !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-card__body {
  padding: 14px !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields__full {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields__third {
  grid-column: span 4 !important;
  min-width: 0 !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields__half {
  grid-column: span 6 !important;
  min-width: 0 !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields .form-group {
  margin-bottom: 14px !important;
  width: 100% !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields .form-control,
html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields .bootstrap-select,
html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
  max-width: 100% !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields textarea.form-control {
  min-height: 84px !important;
  resize: vertical !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-addresses__sync {
  grid-column: 1 / -1 !important;
  padding: 14px 16px !important;
  border: 1px solid color-mix(in srgb, var(--kpf-client-cobalt) 16%, var(--kpf-client-line)) !important;
  border-radius: var(--kpf-client-radius) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-client-cobalt) 6%, #fff) 0%,
      color-mix(in srgb, var(--kpf-client-canvas) 55%, #fff) 100%
    ) !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-addresses__check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-addresses__check:last-child {
  margin-bottom: 0 !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-addresses__check input[type='checkbox'] {
  position: static !important;
  float: none !important;
  opacity: 1 !important;
  margin: 2px 0 0 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex-shrink: 0 !important;
  accent-color: var(--kpf-client-cobalt) !important;
  left: auto !important;
  top: auto !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-addresses__check label {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--kpf-client-ink) !important;
  cursor: pointer !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-addresses__check label::before,
html body.app.admin.kpf-client-profile .client-form .kpf-client-addresses__check label::after {
  content: none !important;
  display: none !important;
}

html body.app.admin.kpf-client-profile .client-form .kpf-client-addresses__help {
  margin: 0 0 10px 26px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--kpf-client-muted) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .client-form .kpf-client-address-card__head {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-client-cobalt) 14%, #14141a) 0%,
      #14141a 100%
    ) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .client-form .kpf-client-address-card__action {
  background: color-mix(in srgb, var(--kpf-client-cobalt) 16%, #14141a) !important;
}

@media (max-width: 991px) {
  html body.app.admin.kpf-client-profile .client-form .kpf-client-addresses {
    grid-template-columns: 1fr !important;
  }

  html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields__third {
    grid-column: span 6 !important;
  }
}

@media (max-width: 575px) {
  html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields__third,
  html body.app.admin.kpf-client-profile .client-form .kpf-client-address-fields__half {
    grid-column: 1 / -1 !important;
  }

  html body.app.admin.kpf-client-profile .client-form .kpf-client-address-card__head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html body.app.admin.kpf-client-profile .client-form .kpf-client-address-card__action {
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

html body.app.admin.kpf-client-profile .client-form .form-group > label,
html body.app.admin.kpf-client-profile .client-form .control-label,
html body.app.admin #wrapper.customer_profile .client-form .form-group > label {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kpf-client-sec) !important;
}

html body.app.admin.kpf-client-profile .client-form .form-control,
html body.app.admin #wrapper.customer_profile .client-form .form-control {
  min-height: 38px !important;
  border-radius: var(--kpf-client-radius) !important;
  border-color: var(--kpf-client-line) !important;
  box-shadow: none !important;
}

html body.app.admin.kpf-client-profile .client-form .form-control:focus,
html body.app.admin #wrapper.customer_profile .client-form .form-control:focus {
  border-color: var(--kpf-client-cobalt) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpf-client-cobalt) 18%, transparent) !important;
}

html body.app.admin.kpf-client-profile .client-form hr,
html body.app.admin #wrapper.customer_profile .client-form hr {
  border: 0 !important;
  border-top: 1px solid var(--kpf-client-soft) !important;
  margin: 20px 0 !important;
}

html body.app.admin.kpf-client-profile .client-form .checkbox label,
html body.app.admin #wrapper.customer_profile .client-form .checkbox label {
  font-size: 13px !important;
  color: var(--kpf-client-sec) !important;
  font-weight: 500 !important;
}

/* Sticky save footer */
html body.app.admin.kpf-client-profile .kpf-client-panel > .panel-footer,
html body.app.admin #wrapper.customer_profile #profile-save-section {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  background: color-mix(in srgb, var(--kpf-client-canvas) 70%, #fff) !important;
  border-top: 1px solid var(--kpf-client-line) !important;
  backdrop-filter: blur(8px);
}

html body.app.admin.kpf-client-profile #profile-save-section .btn-primary,
html body.app.admin #wrapper.customer_profile #profile-save-section .btn-primary {
  min-height: 36px !important;
  padding: 0 16px !important;
  font-weight: 600 !important;
  border-radius: var(--kpf-client-radius) !important;
}

html body.app.admin.kpf-client-profile #profile-save-section .btn-default {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: var(--kpf-client-radius) !important;
}

/* Group content that is not the profile form (tables etc.) */
html body.app.admin.kpf-client-profile .kpf-client-panel > .panel-body > div > .tab-content {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 280px !important;
}

/* —— Client group pages (proposals, invoices, vault, map, …) ——
   Same card language as .kpf-client-nav: soft head, cobalt accents, clean body. */
html body.app.admin.kpf-client-profile .kpf-client-group,
html body.app.admin.kpf-client-profile .kpf-client-panel > .panel-body > div > .tab-content:not(:has(.client-form)) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 280px !important;
  background: var(--kpf-client-surface) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__head {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px 16px !important;
  padding: 16px 18px 14px !important;
  border-bottom: 1px solid var(--kpf-client-soft) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-client-cobalt) 5%, #fff) 0%,
      var(--kpf-client-surface) 100%
    ) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__title-wrap {
  min-width: 0 !important;
  flex: 1 1 180px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__title,
html body.app.admin.kpf-client-profile .kpf-client-group .customer-profile-group-heading,
html body.app.admin.kpf-client-profile .kpf-client-group__head .customer-profile-group-heading {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  color: var(--kpf-client-ink) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__lead {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: var(--kpf-client-muted) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__actions .btn,
html body.app.admin.kpf-client-profile .kpf-client-group__actions > a.btn {
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: var(--kpf-client-radius) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__actions .btn-primary {
  background: var(--kpf-client-cobalt) !important;
  border-color: var(--kpf-client-cobalt) !important;
  color: #fff !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__actions .btn-primary:hover {
  background: color-mix(in srgb, var(--kpf-client-cobalt) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--kpf-client-cobalt) 88%, #000) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__actions .btn-default,
html body.app.admin.kpf-client-profile .kpf-client-group__actions .btn-secondary {
  background: var(--kpf-client-surface) !important;
  border: 1px solid var(--kpf-client-line) !important;
  color: var(--kpf-client-sec) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__actions .btn i {
  margin: 0 !important;
  font-size: 12px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body {
  flex: 1 1 auto !important;
  padding: 16px 18px 20px !important;
  min-width: 0 !important;
}

/* Heading that wasn't yet wrapped still gets nav-like spacing */
html body.app.admin.kpf-client-profile .kpf-client-panel > .panel-body .tab-content > .customer-profile-group-heading {
  margin: 0 !important;
  padding: 16px 18px 0 !important;
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kpf-client-ink) !important;
}

/* Datatables / toolbars inside group pages */
html body.app.admin.kpf-client-profile .kpf-client-group__body .dataTables_wrapper,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content:not(:has(.client-form)) .dataTables_wrapper {
  margin-top: 0 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body .table-responsive,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content:not(:has(.client-form)) .table-responsive {
  border: 1px solid var(--kpf-client-line) !important;
  border-radius: var(--kpf-client-radius) !important;
  overflow: hidden !important;
  background: var(--kpf-client-surface) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, #14141a 3%, transparent) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body table.dataTable,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content:not(:has(.client-form)) table.dataTable {
  margin: 0 !important;
  border: 0 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body table.dataTable thead th,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content:not(:has(.client-form)) table.dataTable thead th {
  background: var(--kpf-client-canvas) !important;
  border-bottom: 1px solid var(--kpf-client-line) !important;
  color: var(--kpf-client-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 10px 12px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body table.dataTable tbody td,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content:not(:has(.client-form)) table.dataTable tbody td {
  padding: 11px 12px !important;
  border-color: var(--kpf-client-soft) !important;
  color: var(--kpf-client-sec) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body .dataTables_empty,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content:not(:has(.client-form)) .dataTables_empty {
  padding: 36px 16px !important;
  color: var(--kpf-client-muted) !important;
  font-size: 13px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body .dt-buttons .btn,
html body.app.admin.kpf-client-profile .kpf-client-group__body .dataTables_length select,
html body.app.admin.kpf-client-profile .kpf-client-group__body .dataTables_filter input,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content:not(:has(.client-form)) .dt-buttons .btn,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content:not(:has(.client-form)) .dataTables_length select,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content:not(:has(.client-form)) .dataTables_filter input {
  min-height: 34px !important;
  border-radius: var(--kpf-client-radius) !important;
  border-color: var(--kpf-client-line) !important;
  background: var(--kpf-client-surface) !important;
  color: var(--kpf-client-sec) !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
}

/* Map / form blocks */
html body.app.admin.kpf-client-profile .kpf-client-group__body #long_lat_wrapper,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content #long_lat_wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 0 16px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body #long_lat_wrapper > [class*='col-'],
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content #long_lat_wrapper > [class*='col-'] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body .form-control,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content:not(:has(.client-form)) .form-control {
  min-height: 40px !important;
  border-radius: var(--kpf-client-radius) !important;
  border-color: var(--kpf-client-line) !important;
  background: var(--kpf-client-surface) !important;
  color: var(--kpf-client-ink) !important;
  box-shadow: none !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body .alert,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content:not(:has(.client-form)) .alert {
  border-radius: var(--kpf-client-radius) !important;
  border: 1px solid var(--kpf-client-line) !important;
  background: color-mix(in srgb, var(--kpf-client-canvas) 80%, #fff) !important;
  color: var(--kpf-client-sec) !important;
  padding: 12px 14px !important;
  margin: 0 0 14px !important;
  box-shadow: none !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body .alert-info {
  border-color: color-mix(in srgb, var(--kpf-client-cobalt) 22%, var(--kpf-client-line)) !important;
  background: color-mix(in srgb, var(--kpf-client-cobalt) 6%, #fff) !important;
  color: var(--kpf-client-sec) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body .customer_map,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content #map.customer_map {
  border: 1px solid var(--kpf-client-line) !important;
  border-radius: var(--kpf-client-radius) !important;
  overflow: hidden !important;
  min-height: 320px !important;
  box-shadow: 0 4px 14px color-mix(in srgb, #14141a 3%, transparent) !important;
}

/* Vault cards */
html body.app.admin.kpf-client-profile .kpf-client-group__body .panel-vault,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content .panel-vault {
  border: 1px solid var(--kpf-client-line) !important;
  border-radius: var(--kpf-client-radius) !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  background: var(--kpf-client-surface) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, #14141a 3%, transparent) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__body .panel-vault > div:first-child {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-client-cobalt) 5%, #fff) 0%,
      var(--kpf-client-canvas) 100%
    ) !important;
  border-bottom: 1px solid var(--kpf-client-soft) !important;
  padding: 12px 14px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-group__empty,
html body.app.admin.kpf-client-profile .kpf-client-group__body > p.tw-text-neutral-500 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 140px !important;
  margin: 0 !important;
  padding: 28px 18px !important;
  border: 1px dashed var(--kpf-client-line) !important;
  border-radius: var(--kpf-client-radius) !important;
  background: color-mix(in srgb, var(--kpf-client-canvas) 70%, #fff) !important;
  text-align: center !important;
  color: var(--kpf-client-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* Dropzone / attachments */
html body.app.admin.kpf-client-profile .kpf-client-group__body .dz-default,
html body.app.admin.kpf-client-profile .kpf-client-group__body .dropzone,
html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content .dropzone {
  border: 1px dashed var(--kpf-client-line) !important;
  border-radius: var(--kpf-client-radius) !important;
  background: color-mix(in srgb, var(--kpf-client-canvas) 70%, #fff) !important;
  min-height: 120px !important;
  color: var(--kpf-client-muted) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .kpf-client-group__head {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-client-cobalt) 14%, #14141a) 0%,
      #14141a 100%
    ) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .kpf-client-group__body .table-responsive,
html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .kpf-client-group__body table.dataTable thead th {
  background: #1e1e24 !important;
}

@media (max-width: 900px) {
  html body.app.admin.kpf-client-profile .kpf-client-group__body #long_lat_wrapper,
  html body.app.admin.kpf-client-profile .kpf-client-panel .tab-content #long_lat_wrapper {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  html body.app.admin.kpf-client-profile .kpf-client-group__head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html body.app.admin.kpf-client-profile .kpf-client-group__actions {
    justify-content: stretch !important;
  }

  html body.app.admin.kpf-client-profile .kpf-client-group__actions .btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
}

/* —— Comercial / customer admins —— */
html body.app.admin.kpf-client-profile #customer_admins.tab-pane,
html body.app.admin.kpf-client-profile .client-form #customer_admins {
  padding: 4px 0 8px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px 16px !important;
  margin-bottom: 16px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__intro {
  min-width: 0 !important;
  flex: 1 1 220px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__intro .kpf-client-fields__section {
  margin-bottom: 4px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__lead {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--kpf-client-muted) !important;
  line-height: 1.4 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__assign {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: var(--kpf-client-radius) !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__assign i {
  font-size: 13px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--kpf-client-line) !important;
  border-radius: var(--kpf-client-radius) !important;
  background: var(--kpf-client-surface) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, #14141a 3%, transparent) !important;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__card:hover {
  border-color: color-mix(in srgb, var(--kpf-client-cobalt) 28%, var(--kpf-client-line)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, #14141a 5%, transparent) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__person {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__avatar {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__photo,
html body.app.admin.kpf-client-profile .kpf-client-admins__avatar img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  margin: 0 !important;
  border: 1px solid var(--kpf-client-soft) !important;
  background: var(--kpf-client-canvas) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__meta {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--kpf-client-ink) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__name:hover {
  color: var(--kpf-client-cobalt) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__date {
  font-size: 12px !important;
  color: var(--kpf-client-muted) !important;
  line-height: 1.35 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__remove {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  color: var(--kpf-client-muted) !important;
  text-decoration: none !important;
  transition:
    color 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__remove:hover {
  color: #b42318 !important;
  background: color-mix(in srgb, #b42318 8%, #fff) !important;
  border-color: color-mix(in srgb, #b42318 22%, transparent) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 160px !important;
  padding: 28px 20px !important;
  border: 1px dashed var(--kpf-client-line) !important;
  border-radius: var(--kpf-client-radius) !important;
  background: color-mix(in srgb, var(--kpf-client-canvas) 70%, #fff) !important;
  text-align: center !important;
  color: var(--kpf-client-muted) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__empty-icon {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 4px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--kpf-client-cobalt) 8%, #fff) !important;
  color: var(--kpf-client-cobalt) !important;
  border: 1px solid color-mix(in srgb, var(--kpf-client-cobalt) 18%, transparent) !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__empty strong {
  color: var(--kpf-client-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body.app.admin.kpf-client-profile .kpf-client-admins__empty > span:last-child {
  font-size: 12.5px !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .kpf-client-admins__card {
  background: #14141a !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .kpf-client-admins__remove:hover {
  background: color-mix(in srgb, #b42318 18%, #14141a) !important;
}

@media (max-width: 575px) {
  html body.app.admin.kpf-client-profile .kpf-client-admins__head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html body.app.admin.kpf-client-profile .kpf-client-admins__assign {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Dark */
html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile,
html body.app.admin.kodex-crm-admin--ui-dark:has(#wrapper.customer_profile) {
  --kpf-client-ink: #e8e9ed;
  --kpf-client-sec: #c5c8d4;
  --kpf-client-muted: #8b8f9c;
  --kpf-client-line: #2a2a32;
  --kpf-client-soft: #22222a;
  --kpf-client-surface: #14141a;
  --kpf-client-canvas: #0e0e12;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .kpf-client-nav__head {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-client-cobalt) 14%, #14141a) 0%,
      #14141a 100%
    ) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .kpf-client-nav__link.is-active,
html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .kpf-client-nav__item--active > a,
html[data-theme='dark'] body.app.admin.kpf-client-profile .kpf-client-nav__link.is-active,
html[data-theme='dark'] body.app.admin.kpf-client-profile .kpf-client-nav__item--active > a {
  color: #001bff !important;
  background: #f7f7f7 !important;
  border-color: color-mix(in srgb, #001bff 22%, transparent) !important;
  box-shadow: inset 3px 0 0 #001bff !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .kpf-client-nav__link.is-active .kpf-client-nav__label,
html body.app.admin.kodex-crm-admin--ui-dark.kpf-client-profile .kpf-client-nav__item--active .kpf-client-nav__label,
html[data-theme='dark'] body.app.admin.kpf-client-profile .kpf-client-nav__link.is-active .kpf-client-nav__label,
html[data-theme='dark'] body.app.admin.kpf-client-profile .kpf-client-nav__item--active .kpf-client-nav__label {
  color: #001bff !important;
}

@media (max-width: 991px) {
  html body.app.admin.kpf-client-profile .kpf-client-layout {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  html body.app.admin.kpf-client-profile .kpf-client-nav-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    position: static !important;
    max-height: none !important;
  }

  html body.app.admin.kpf-client-profile .kpf-client-main-col {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.app.admin.kpf-client-profile .kpf-client-nav__body,
  html body.app.admin.kpf-client-profile nav.customer-tabs > ul {
    max-height: min(280px, 40vh) !important;
  }
}

/* Tablet landscape: keep stacked nav usable with short height */
@media (orientation: landscape) and (max-height: 900px) and (max-width: 1366px) {
  html body.app.admin.kpf-client-profile .kpf-client-nav__body,
  html body.app.admin.kpf-client-profile nav.customer-tabs > ul {
    max-height: min(220px, 36vh) !important;
  }
}