/* KpfSettingsPage — admin /settings workspace (sidebar + form + tabs) */

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

/* —— Page frame —— */
html body.app.admin.kpf-settings-page #wrapper .content,
html body.app.admin:has(#settings-form) #wrapper .content {
  background: var(--kpf-settings-canvas) !important;
  padding-top: 20px !important;
  padding-bottom: 48px !important;
}

html body.app.admin.kpf-settings-page #wrapper .content > .row > .col-xs-12.col-md-12.col-lg-10,
html body.app.admin:has(#settings-form) #wrapper .content > .row > .col-xs-12.col-md-12.col-lg-10 {
  width: 100% !important;
  max-width: 1180px !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.app.admin.kpf-settings-page #wrapper .content > .row > .col-lg-10 > .row,
html body.app.admin:has(#settings-form) #wrapper .content > .row > .col-lg-10 > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 20px !important;
  margin: 0 !important;
}

html body.app.admin.kpf-settings-page #wrapper .content > .row > .col-lg-10 > .row > [class*='col-'],
html body.app.admin:has(#settings-form) #wrapper .content > .row > .col-lg-10 > .row > [class*='col-'] {
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Nav column */
html body.app.admin.kpf-settings-page .kpf-settings-nav-col,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 {
  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 page title once promoted into nav head */
html body.app.admin.kpf-settings-page .kpf-settings-nav-col > h4[hidden],
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 > h4[hidden] {
  display: none !important;
}

/* Content column */
html body.app.admin.kpf-settings-page .kpf-settings-main-col,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-8.col-lg-9 {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-main-col > h4,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-8.col-lg-9 > h4 {
  margin: 0 0 12px !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-settings-sec) !important;
}

/* —— Sidebar nav card —— */
html body.app.admin.kpf-settings-page .kpf-settings-nav,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 > .panel_s {
  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-settings-line) !important;
  border-radius: var(--kpf-settings-radius) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, #14141a 5%, transparent) !important;
  background: var(--kpf-settings-surface) !important;
  overflow: hidden !important;
}

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

html body.app.admin.kpf-settings-page .kpf-settings-nav__title {
  margin: 0 !important;
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kpf-settings-ink) !important;
  line-height: 1.2 !important;
}

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

html body.app.admin.kpf-settings-page .kpf-settings-nav__search {
  flex-shrink: 0 !important;
  padding: 10px 12px 8px !important;
  border-bottom: 1px solid var(--kpf-settings-soft) !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav__search-field {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav__search-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--kpf-settings-muted) !important;
  display: inline-flex !important;
  pointer-events: none !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav__search input {
  width: 100% !important;
  height: 34px !important;
  padding: 0 10px 0 32px !important;
  border: 1px solid var(--kpf-settings-line) !important;
  border-radius: var(--kpf-settings-radius) !important;
  background: var(--kpf-settings-canvas) !important;
  color: var(--kpf-settings-ink) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav__search input::placeholder {
  color: var(--kpf-settings-muted) !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav__search input:focus {
  border-color: var(--kpf-settings-cobalt) !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpf-settings-cobalt) 16%, transparent) !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav > .panel-body,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 > .panel_s > .panel-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 8px 14px !important;
  scrollbar-width: thin !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav .tw-flex.tw-flex-col,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 .tw-flex.tw-flex-col {
  gap: 14px !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav__section {
  margin: 0 !important;
  padding: 0 !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav__section + .kpf-settings-nav__section {
  padding-top: 12px !important;
  border-top: 1px solid var(--kpf-settings-soft) !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav__section-title,
html body.app.admin.kpf-settings-page .kpf-settings-nav h4,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 .panel-body h4 {
  margin: 0 0 6px 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kpf-settings-muted) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav__list,
html body.app.admin.kpf-settings-page .kpf-settings-nav ul,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 .panel-body ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav__link,
html body.app.admin.kpf-settings-page .kpf-settings-nav ul > li > a,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 .panel-body 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-settings-radius) !important;
  border: 1px solid transparent !important;
  color: var(--kpf-settings-sec) !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-settings-page .kpf-settings-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-settings-canvas) !important;
  border: 1px solid var(--kpf-settings-soft) !important;
  color: var(--kpf-settings-muted) !important;
  flex-shrink: 0 !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-nav__icon i,
html body.app.admin.kpf-settings-page .kpf-settings-nav__icon .kpf-icon-host,
html body.app.admin.kpf-settings-page .kpf-settings-nav ul > li > a i,
html body.app.admin.kpf-settings-page .kpf-settings-nav ul > li > a .kpf-icon-host,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 .panel-body ul > li > a i,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 .panel-body ul > li > a .kpf-icon-host {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  font-size: 12px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

html body.app.admin.kpf-settings-page .kpf-settings-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-settings-page .kpf-settings-nav__link .badge,
html body.app.admin.kpf-settings-page .kpf-settings-nav 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-settings-page .kpf-settings-nav__link:hover,
html body.app.admin.kpf-settings-page .kpf-settings-nav ul > li > a:hover,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 .panel-body ul > li > a:hover {
  color: var(--kpf-settings-ink) !important;
  background: color-mix(in srgb, var(--kpf-settings-cobalt) 5%, transparent) !important;
  border-color: color-mix(in srgb, var(--kpf-settings-cobalt) 12%, transparent) !important;
}

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

/* Active */
html body.app.admin.kpf-settings-page .kpf-settings-nav__link.is-active,
html body.app.admin.kpf-settings-page .kpf-settings-nav__item--active > a,
html body.app.admin.kpf-settings-page .kpf-settings-nav ul > li > a.tw-text-neutral-800,
html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 .panel-body ul > li > a.tw-text-neutral-800 {
  color: var(--kpf-settings-cobalt) !important;
  background: color-mix(in srgb, var(--kpf-settings-cobalt) 9%, #fff) !important;
  border-color: color-mix(in srgb, var(--kpf-settings-cobalt) 22%, transparent) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--kpf-settings-cobalt) !important;
}

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

html body.app.admin.kpf-settings-page .kpf-settings-nav__section--active > .kpf-settings-nav__section-title {
  color: var(--kpf-settings-cobalt) !important;
}

/* —— Main settings panel —— */
html body.app.admin.kpf-settings-page #settings-form > .panel_s,
html body.app.admin:has(#settings-form) #settings-form > .panel_s {
  border: 1px solid var(--kpf-settings-line) !important;
  border-radius: var(--kpf-settings-radius) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, #14141a 4%, transparent) !important;
  background: var(--kpf-settings-surface) !important;
  overflow: hidden !important;
}

html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body,
html body.app.admin:has(#settings-form) #settings-form > .panel_s > .panel-body {
  --kpf-settings-inset-x: 24px;
  --kpf-settings-inset-y: 22px;
  padding: 0 !important;
  background: transparent !important;
}

/* Sections without horizontal tabs get a full content inset */
html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body:not(:has(.horizontal-scrollable-tabs)),
html body.app.admin:has(#settings-form) #settings-form > .panel_s > .panel-body:not(:has(.horizontal-scrollable-tabs)) {
  padding: var(--kpf-settings-inset-y) var(--kpf-settings-inset-x) 28px !important;
}

/* Horizontal tabs — underline strip, not chunky pills */
html body.app.admin.kpf-settings-page #settings-form .horizontal-scrollable-tabs,
html body.app.admin:has(#settings-form) #settings-form .horizontal-scrollable-tabs {
  margin: 0 !important;
  border-bottom: 1px solid var(--kpf-settings-line) !important;
  background: color-mix(in srgb, var(--kpf-settings-canvas) 55%, #fff) !important;
}

html body.app.admin.kpf-settings-page #settings-form .horizontal-tabs,
html body.app.admin:has(#settings-form) #settings-form .horizontal-tabs {
  padding: 0 8px !important;
}

html body.app.admin.kpf-settings-page #settings-form .nav-tabs-horizontal,
html body.app.admin.kpf-settings-page #settings-form ul.nav-tabs.nav-tabs-horizontal,
html body.app.admin:has(#settings-form) #settings-form .nav-tabs-horizontal {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
}

html body.app.admin.kpf-settings-page #settings-form .nav-tabs-horizontal > li,
html body.app.admin:has(#settings-form) #settings-form .nav-tabs-horizontal > li {
  float: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

html body.app.admin.kpf-settings-page #settings-form .nav-tabs-horizontal > li > a,
html body.app.admin:has(#settings-form) #settings-form .nav-tabs-horizontal > li > a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--kpf-settings-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

html body.app.admin.kpf-settings-page #settings-form .nav-tabs-horizontal > li > a:hover,
html body.app.admin:has(#settings-form) #settings-form .nav-tabs-horizontal > li > a:hover {
  color: var(--kpf-settings-ink) !important;
  background: transparent !important;
  border-bottom-color: color-mix(in srgb, var(--kpf-settings-cobalt) 35%, transparent) !important;
}

html body.app.admin.kpf-settings-page #settings-form .nav-tabs-horizontal > li.active > a,
html body.app.admin.kpf-settings-page #settings-form .nav-tabs-horizontal > li.active > a:hover,
html body.app.admin.kpf-settings-page #settings-form .nav-tabs-horizontal > li.active > a:focus,
html body.app.admin:has(#settings-form) #settings-form .nav-tabs-horizontal > li.active > a {
  color: var(--kpf-settings-cobalt) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--kpf-settings-cobalt) !important;
  box-shadow: none !important;
}

/* Tab panes / form content */
html body.app.admin.kpf-settings-page #settings-form .tab-content,
html body.app.admin:has(#settings-form) #settings-form .tab-content {
  padding: var(--kpf-settings-inset-y, 22px) var(--kpf-settings-inset-x, 24px) 24px !important;
  box-sizing: border-box !important;
}

/*
 * Direct children of panel-body (outside tab chrome) must respect the inset.
 * Covers orphaned help text, checkboxes, custom sections, alerts, etc.
 */
html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body > *:not(.horizontal-scrollable-tabs):not(.tab-content):not(script):not(style),
html body.app.admin:has(#settings-form) #settings-form > .panel_s > .panel-body > *:not(.horizontal-scrollable-tabs):not(.tab-content):not(script):not(style) {
  margin-left: var(--kpf-settings-inset-x, 24px) !important;
  margin-right: var(--kpf-settings-inset-x, 24px) !important;
}

/* Avoid double horizontal inset when the whole panel-body is already padded */
html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body:not(:has(.horizontal-scrollable-tabs)) > *:not(.horizontal-scrollable-tabs):not(.tab-content):not(script):not(style),
html body.app.admin:has(#settings-form) #settings-form > .panel_s > .panel-body:not(:has(.horizontal-scrollable-tabs)) > *:not(.horizontal-scrollable-tabs):not(.tab-content):not(script):not(style) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body > h4:first-child,
html body.app.admin:has(#settings-form) #settings-form > .panel_s > .panel-body > h4:first-child,
html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body > .form-group:first-child,
html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body > p:first-child {
  margin-top: var(--kpf-settings-inset-y, 22px) !important;
}

html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body:not(:has(.horizontal-scrollable-tabs)) > *:first-child {
  margin-top: 0 !important;
}

html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body > p.text-muted,
html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body > .text-muted,
html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body > .help-block,
html body.app.admin:has(#settings-form) #settings-form > .panel_s > .panel-body > p.text-muted,
html body.app.admin:has(#settings-form) #settings-form > .panel_s > .panel-body > .help-block {
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

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

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

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

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

html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-body:has(.horizontal-scrollable-tabs) > hr,
html body.app.admin:has(#settings-form) #settings-form > .panel_s > .panel-body:has(.horizontal-scrollable-tabs) > hr {
  margin-left: var(--kpf-settings-inset-x, 24px) !important;
  margin-right: var(--kpf-settings-inset-x, 24px) !important;
}

/* Sticky save footer */
html body.app.admin.kpf-settings-page #settings-form > .panel_s > .panel-footer,
html body.app.admin:has(#settings-form) #settings-form > .panel_s > .panel-footer {
  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-settings-canvas) 70%, #fff) !important;
  border-top: 1px solid var(--kpf-settings-line) !important;
  backdrop-filter: blur(8px);
}

html body.app.admin.kpf-settings-page #settings-form .panel-footer .btn-primary,
html body.app.admin:has(#settings-form) #settings-form .panel-footer .btn-primary {
  min-height: 36px !important;
  padding: 0 16px !important;
  font-weight: 600 !important;
  border-radius: var(--kpf-settings-radius) !important;
}

/* On/off + help text */
html body.app.admin.kpf-settings-page #settings-form .onoffswitch,
html body.app.admin:has(#settings-form) #settings-form .onoffswitch {
  margin-top: 2px !important;
}

html body.app.admin.kpf-settings-page #settings-form .text-muted,
html body.app.admin.kpf-settings-page #settings-form .help-block,
html body.app.admin:has(#settings-form) #settings-form .help-block {
  color: var(--kpf-settings-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

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

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

html body.app.admin.kodex-crm-admin--ui-dark.kpf-settings-page .kpf-settings-nav__search input {
  background: #1a1a22 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-settings-page .kpf-settings-nav__search input:focus {
  background: #121218 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.kpf-settings-page .kpf-settings-nav__link.is-active,
html body.app.admin.kodex-crm-admin--ui-dark.kpf-settings-page .kpf-settings-nav__item--active > a {
  background: color-mix(in srgb, var(--kpf-settings-cobalt) 18%, #14141a) !important;
}

@media (max-width: 991px) {
  html body.app.admin.kpf-settings-page #wrapper .content > .row > .col-lg-10 > .row,
  html body.app.admin:has(#settings-form) #wrapper .content > .row > .col-lg-10 > .row {
    flex-direction: column !important;
  }

  html body.app.admin.kpf-settings-page .kpf-settings-nav-col,
  html body.app.admin:has(#settings-form) #wrapper .content .col-md-4.col-lg-3 {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    position: static !important;
    max-height: none !important;
  }

  html body.app.admin.kpf-settings-page .kpf-settings-nav > .panel-body {
    max-height: 420px !important;
  }
}