/**
 * Kodex CRM — system-wide chrome
 * Applies the client-nav card language to ALL admin surfaces:
 * content stage (full-width + responsive), panels, tables, boxes, buttons.
 * Load LAST among theme CSS so it wins over Perfex / Tailwind utilities.
 */

html body.app.admin {
  --kpf-sys-ink: var(--kodex-text-primary, #14141a);
  --kpf-sys-sec: var(--kodex-text-secondary, #40424d);
  --kpf-sys-muted: var(--kodex-text-muted, #6e7180);
  --kpf-sys-line: var(--kodex-border-default, #d3d6e0);
  --kpf-sys-soft: var(--kodex-border-subtle, #edeff7);
  --kpf-sys-surface: var(--kodex-bg-surface, #fff);
  --kpf-sys-canvas: var(--kodex-bg-canvas, #f0f1f4);
  --kpf-sys-cobalt: var(--kodex-action-primary, #001bff);
  --kpf-sys-radius: 4px;
  --kpf-sys-shadow: 0 10px 28px color-mix(in srgb, #14141a 5%, transparent);
  --kpf-sys-shadow-soft: 0 4px 14px color-mix(in srgb, #14141a 3%, transparent);
  /* Content inset — keep children off the rim of bordered surfaces */
  --kpf-sys-inset: 16px;
  --kpf-sys-inset-x: 18px;
  --kpf-sys-inset-sm: 12px;
  --kpf-sys-inset-gutter: 8px;
}

/* ========== CONTENT STAGE — full width + always responsive ========== */
html body.app.admin #wrapper,
html body.app.admin #wrapper.kodex-crm-admin__content-stage {
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
  min-width: 0 !important;
}

html body.app.admin #wrapper .content,
html body.app.admin #wrapper .content.kpf-sys-content,
html body.app.admin #wrapper.kodex-crm-admin__content-stage .content {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  padding: 16px clamp(10px, 2.2vw, 24px) 36px !important;
  background: transparent !important;
  min-width: 0 !important;
  /* Respond to the content column itself (rail open on tablet), not only the viewport.
     Do not set overflow here — it breaks position:sticky on client nav. */
  container-type: inline-size;
  container-name: kpf-sys;
}

/* Kill common width caps on direct content children (not nested layout columns) */
html body.app.admin #wrapper .content > .panel_s,
html body.app.admin #wrapper .content > .panel,
html body.app.admin #wrapper .content > .row,
html body.app.admin #wrapper .content > form,
html body.app.admin #wrapper .content > form > .panel_s,
html body.app.admin #wrapper .content > form > .row,
html body.app.admin #wrapper .content > .tw-mt-2,
html body.app.admin #wrapper .content > [class*='tw-max-w-']:not(.kpf-client-nav-col) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin #wrapper .content .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
  max-width: none !important;
  min-width: 0 !important;
}

html body.app.admin #wrapper .content .row > [class*='col-'] {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Nested surfaces stay inside the stage */
html body.app.admin #wrapper .content.kpf-sys-content .panel_s,
html body.app.admin #wrapper .content.kpf-sys-content .panel,
html body.app.admin #wrapper .content.kpf-sys-content .panel-body,
html body.app.admin #wrapper .content.kpf-sys-content .tab-content,
html body.app.admin #wrapper .content.kpf-sys-content .tab-pane,
html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-layout,
html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-main-col,
html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-panel,
html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-group,
html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-group__body {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin #wrapper .content.kpf-sys-content img,
html body.app.admin #wrapper .content.kpf-sys-content svg,
html body.app.admin #wrapper .content.kpf-sys-content video,
html body.app.admin #wrapper .content.kpf-sys-content iframe,
html body.app.admin #wrapper .content.kpf-sys-content canvas,
html body.app.admin #wrapper .content.kpf-sys-content embed {
  max-width: 100% !important;
}

html body.app.admin #wrapper .content.kpf-sys-content img,
html body.app.admin #wrapper .content.kpf-sys-content video {
  height: auto !important;
}

/* Tables / DataTables: scroll instead of blowing out the stage */
html body.app.admin #wrapper .content.kpf-sys-content .table-responsive,
html body.app.admin #wrapper .content.kpf-sys-content .dataTables_wrapper,
html body.app.admin #wrapper .content.kpf-sys-content .dt-bootstrap,
html body.app.admin #wrapper .content.kpf-sys-content .horizontal-scrollable-tabs:not(.preview-tabs-top) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

html body.app.admin #wrapper .content.kpf-sys-content table.table,
html body.app.admin #wrapper .content.kpf-sys-content table.dataTable {
  width: 100% !important;
  max-width: 100% !important;
}

/* Page headings */
html body.app.admin #wrapper .content > .tw-flex > h4,
html body.app.admin #wrapper .content .tw-mb-2 > h4,
html body.app.admin #wrapper .content h4.tw-mt-0,
html body.app.admin #wrapper .content .tw-text-neutral-700 {
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  letter-spacing: -0.02em !important;
  color: var(--kpf-sys-ink) !important;
}

html body.app.admin .widget .panel-body,
html body.app.admin .widget > .panel_s {
  position: relative !important;
}
html body.app.admin .panel_s,
html body.app.admin .panel,
html body.app.admin .panel-default,
html body.app.admin .panel-primary,
html body.app.admin .box,
html body.app.admin .box-primary,
html body.app.admin .widget,
html body.app.admin .card,
html body.app.admin .info-box,
html body.app.admin .small-box,
html body.app.admin .activity-feed,
html body.app.admin .todo-widget,
html body.app.admin .top_stats_wrapper,
html body.app.admin .screen-options-area {
  background: var(--kpf-sys-surface) !important;
  border: 1px solid var(--kpf-sys-line) !important;
  border-radius: var(--kpf-sys-radius) !important;
  box-shadow: var(--kpf-sys-shadow) !important;
  overflow: hidden !important;
  color: var(--kpf-sys-ink) !important;
}

html body.app.admin .panel_s > .panel-heading,
html body.app.admin .panel > .panel-heading,
html body.app.admin .box > .box-header,
html body.app.admin .panel-heading {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-sys-cobalt) 5%, #fff) 0%,
      var(--kpf-sys-surface) 100%
    ) !important;
  border-bottom: 1px solid var(--kpf-sys-soft) !important;
  border-color: var(--kpf-sys-soft) !important;
  color: var(--kpf-sys-ink) !important;
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
}

/* Dedicated grip — not a panel card (was wrongly sharing panel chrome) */
html body.app.admin .widget-dragger {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 6 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--kpf-sys-line) !important;
  border-radius: var(--kpf-sys-radius) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-sys-cobalt) 5%, #fff) 0%,
      var(--kpf-sys-surface) 100%
    ) !important;
  box-shadow: var(--kpf-sys-shadow-soft) !important;
  color: var(--kpf-sys-muted) !important;
  cursor: grab !important;
  overflow: visible !important;
}

html body.app.admin .widget-dragger:hover,
html body.app.admin .widget-dragger:active {
  color: var(--kpf-sys-cobalt) !important;
  border-color: color-mix(in srgb, var(--kpf-sys-cobalt) 28%, var(--kpf-sys-line)) !important;
  cursor: grabbing !important;
}

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

html body.app.admin .panel_s > .panel-body,
html body.app.admin .panel > .panel-body,
html body.app.admin .box > .box-body,
html body.app.admin .panel-body {
  background: var(--kpf-sys-surface) !important;
  color: var(--kpf-sys-sec) !important;
}

/* Default content inset for standard admin panels (specialized layouts override) */
html body.app.admin #wrapper .content .panel_s:not(.kpf-invoice-doc):not(.kpf-client-panel):not(:has(> .widget-dragger)) > .panel-body:not([class*='padding-']):not(.no-padding):not(:has(.horizontal-scrollable-tabs)):not(:has(> .nav-tabs)):not(:has(.client-form)):not(.kpf-dt-panel-body) {
  padding: var(--kpf-sys-inset) var(--kpf-sys-inset-x) !important;
  box-sizing: border-box !important;
}

html body.app.admin #wrapper .content .panel_s:not(.kpf-invoice-doc):not(.kpf-client-panel) > .panel-body > .tab-content {
  padding: var(--kpf-sys-inset) var(--kpf-sys-inset-x) 20px !important;
  box-sizing: border-box !important;
}

html body.app.admin #wrapper .content .panel_s > .panel-body > .horizontal-scrollable-tabs + .tab-content,
html body.app.admin #wrapper .content .panel_s > .panel-body > .nav-tabs + .tab-content {
  padding: var(--kpf-sys-inset) var(--kpf-sys-inset-x) 20px !important;
}

html body.app.admin .panel_s > .panel-footer,
html body.app.admin .panel > .panel-footer,
html body.app.admin .box > .box-footer,
html body.app.admin .panel-footer {
  background: color-mix(in srgb, var(--kpf-sys-canvas) 70%, #fff) !important;
  border-top: 1px solid var(--kpf-sys-line) !important;
  padding: 12px 16px !important;
}

/* Well / inset boxes */
html body.app.admin .well,
html body.app.admin .well-sm,
html body.app.admin .tw-bg-neutral-50,
html body.app.admin .tw-bg-neutral-100 {
  background: color-mix(in srgb, var(--kpf-sys-canvas) 80%, #fff) !important;
  border: 1px solid var(--kpf-sys-line) !important;
  border-radius: var(--kpf-sys-radius) !important;
  box-shadow: none !important;
  color: var(--kpf-sys-sec) !important;
  padding: var(--kpf-sys-inset-sm) var(--kpf-sys-inset) !important;
  box-sizing: border-box !important;
}

/* ========== TABLES ========== */
html body.app.admin table.table,
html body.app.admin table.dataTable,
html body.app.admin .table-responsive > table {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--kpf-sys-surface) !important;
  border-color: var(--kpf-sys-soft) !important;
  color: var(--kpf-sys-sec) !important;
}

html body.app.admin .table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid var(--kpf-sys-line) !important;
  border-radius: var(--kpf-sys-radius) !important;
  overflow: hidden !important;
  background: var(--kpf-sys-surface) !important;
  box-shadow: var(--kpf-sys-shadow-soft) !important;
}

/* DataTables hosts already chrome the table — don't double-box empty shells */
html body.app.admin .dataTables_wrapper .table-responsive,
html body.app.admin .kpf-dt .table-responsive,
html body.app.admin .kpf-dt-table-host {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body.app.admin table.table > thead > tr > th,
html body.app.admin table.dataTable > thead > tr > th,
html body.app.admin table.table > thead > tr > td {
  background: var(--kpf-sys-canvas) !important;
  border-bottom: 1px solid var(--kpf-sys-line) !important;
  border-top: 0 !important;
  color: var(--kpf-sys-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

html body.app.admin table.table > tbody > tr > td,
html body.app.admin table.dataTable > tbody > tr > td {
  border-color: var(--kpf-sys-soft) !important;
  padding: 11px 12px !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: var(--kpf-sys-sec) !important;
}

html body.app.admin table.table > tbody > tr:hover > td,
html body.app.admin table.dataTable > tbody > tr:hover > td {
  background: color-mix(in srgb, var(--kpf-sys-cobalt) 4%, #fff) !important;
}

html body.app.admin table.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: color-mix(in srgb, var(--kpf-sys-canvas) 55%, #fff) !important;
}

html body.app.admin .table-bordered,
html body.app.admin .table-bordered > thead > tr > th,
html body.app.admin .table-bordered > tbody > tr > td {
  border-color: var(--kpf-sys-soft) !important;
}

/* ========== BUTTONS ========== */
html body.app.admin .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: var(--kpf-sys-radius) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition:
    background-color 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease !important;
}

/* Keep FA/SVG glyphs optically centered inside .btn */
html body.app.admin .btn > i,
html body.app.admin .btn > .fa,
html body.app.admin .btn > .fas,
html body.app.admin .btn > .far,
html body.app.admin .btn > .fal,
html body.app.admin .btn > .fab,
html body.app.admin .btn > .fa-solid,
html body.app.admin .btn > .fa-regular,
html body.app.admin .btn > .fa-light,
html body.app.admin .btn > .fa-brands,
html body.app.admin .btn > .kpf-icon,
html body.app.admin .btn > svg,
html body.app.admin .btn > .tw-inline-flex {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
}

html body.app.admin .btn-sm,
html body.app.admin .btn-xs {
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
}

html body.app.admin .btn-lg {
  min-height: 40px !important;
  padding: 0 16px !important;
}

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

html body.app.admin:not(.kodex-crm-admin--ui-dark) .btn-primary:hover,
html body.app.admin:not(.kodex-crm-admin--ui-dark) .btn-primary:focus,
html body.app.admin:not(.kodex-crm-admin--ui-dark) .btn-info:hover,
html body.app.admin:not(.kodex-crm-admin--ui-dark) .btn-info:focus {
  background: #ffffff !important;
  border-color: var(--kpf-sys-cobalt) !important;
  color: var(--kpf-sys-cobalt) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .btn-primary:hover,
html body.app.admin.kodex-crm-admin--ui-dark .btn-primary:focus,
html body.app.admin.kodex-crm-admin--ui-dark .btn-info:hover,
html body.app.admin.kodex-crm-admin--ui-dark .btn-info:focus {
  background: color-mix(in srgb, var(--kpf-sys-cobalt) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--kpf-sys-cobalt) 88%, #000) !important;
  color: #fff !important;
}

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

html body.app.admin .btn-default:hover,
html body.app.admin .btn-secondary:hover {
  background: var(--kpf-sys-canvas) !important;
  border-color: color-mix(in srgb, var(--kpf-sys-cobalt) 28%, var(--kpf-sys-line)) !important;
  color: var(--kpf-sys-ink) !important;
}

html body.app.admin .btn-success {
  background: var(--kodex-feedback-success, #0d7a4e) !important;
  border-color: var(--kodex-feedback-success, #0d7a4e) !important;
  color: #fff !important;
}

html body.app.admin .btn-warning {
  background: var(--kodex-feedback-warning, #fa4616) !important;
  border-color: var(--kodex-feedback-warning, #fa4616) !important;
  color: #fff !important;
}

html body.app.admin .btn-danger {
  background: var(--kodex-feedback-error, #c41e3a) !important;
  border-color: var(--kodex-feedback-error, #c41e3a) !important;
  color: #fff !important;
}

html body.app.admin .btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--kpf-sys-cobalt) !important;
  min-height: auto !important;
  padding: 0 4px !important;
  font-weight: 500 !important;
}

/* ========== FORMS ========== */
html body.app.admin .form-control,
html body.app.admin select.form-control,
html body.app.admin textarea.form-control,
html body.app.admin .input-group-addon,
html body.app.admin .bootstrap-select > .dropdown-toggle {
  min-height: 40px !important;
  border-radius: var(--kpf-sys-radius) !important;
  border-color: var(--kpf-sys-line) !important;
  background: var(--kpf-sys-surface) !important;
  color: var(--kpf-sys-ink) !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

/* Compact currency/year pickers (invoices_total, estimates_total, etc.) —
   must NOT inherit the 40px form control height */
html body.app.admin .simple-bootstrap-select .bootstrap-select > .dropdown-toggle,
html body.app.admin #invoices_total .bootstrap-select > .dropdown-toggle,
html body.app.admin #estimates_total .bootstrap-select > .dropdown-toggle,
html body.app.admin #expenses_total .bootstrap-select > .dropdown-toggle {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 28px 0 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 26px !important;
}

html body.app.admin .form-control:focus,
html body.app.admin .bootstrap-select.open > .dropdown-toggle {
  border-color: var(--kpf-sys-cobalt) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpf-sys-cobalt) 16%, transparent) !important;
}

html body.app.admin label,
html body.app.admin .control-label {
  color: var(--kpf-sys-sec) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* ========== ALERTS / BADGES ========== */
html body.app.admin .alert {
  border-radius: var(--kpf-sys-radius) !important;
  border: 1px solid var(--kpf-sys-line) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
}

html body.app.admin .badge,
html body.app.admin .label {
  border-radius: var(--kpf-sys-radius) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* ========== LIST TOOLBARS / FILTER BARS ========== */
html body.app.admin .btn-bottom-toolbar,
html body.app.admin ._filters._hidden_inputs + .btn-group,
html body.app.admin .tw-mb-2.tw-flex {
  gap: 8px;
}

html body.app.admin .btn-bottom-toolbar {
  background: color-mix(in srgb, var(--kpf-sys-canvas) 70%, #fff) !important;
  border-top: 1px solid var(--kpf-sys-line) !important;
  backdrop-filter: blur(8px);
}

/* ========== RESPONSIVE — mobile + tablet (viewport + content-width) ========== */

/* Toolbars / title rows wrap inside the stage */
html body.app.admin #wrapper .content.kpf-sys-content > .tw-flex,
html body.app.admin #wrapper .content.kpf-sys-content .tw-mb-2.tw-flex,
html body.app.admin #wrapper .content.kpf-sys-content ._buttons,
html body.app.admin #wrapper .content.kpf-sys-content .btn-bottom-toolbar,
html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-group__head,
html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-group__actions {
  flex-wrap: wrap !important;
  max-width: 100% !important;
  gap: 8px;
}

/* Tablet landscape / mid widths (viewport) */
@media (max-width: 1199px) {
  html body.app.admin #wrapper .content,
  html body.app.admin #wrapper .content.kpf-sys-content {
    padding: 14px clamp(10px, 1.8vw, 18px) 32px !important;
  }

  html body.app.admin #wrapper .content .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }

  html body.app.admin #wrapper .content .row > [class*='col-'] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Narrow content column (sidebar open on tablet) — stack client workspace */
@container kpf-sys (max-width: 920px) {
  .kpf-client-layout {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  .kpf-client-nav-col,
  .kpf-client-nav-col[class*='tw-max-w-'],
  .kpf-client-nav-col.md\:tw-max-w-64 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    position: static !important;
    max-height: none !important;
  }

  .kpf-client-main-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

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

@container kpf-sys (max-width: 640px) {
  .kpf-client-group__head,
  .panel-heading,
  .tw-mb-2.tw-flex {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .kpf-client-group__actions .btn,
  ._buttons .btn {
    flex: 1 1 auto !important;
  }
}

/* Tablet / small desktop viewport — stack client layout */
@media (max-width: 991px) {
  html body.app.admin #wrapper .content,
  html body.app.admin #wrapper .content.kpf-sys-content {
    padding: 12px 12px 28px !important;
  }

  html body.app.admin #wrapper .content .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }

  html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-layout {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-nav-col,
  html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-nav-col[class*='tw-max-w-'] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    position: static !important;
    max-height: none !important;
  }

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

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

  html body.app.admin .panel_s > .panel-heading,
  html body.app.admin .panel-heading {
    padding: 10px 12px !important;
  }
}

/* Tablet landscape: short viewport height — keep chrome compact */
@media (orientation: landscape) and (max-height: 900px) and (max-width: 1366px) {
  html body.app.admin #wrapper .content,
  html body.app.admin #wrapper .content.kpf-sys-content {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }

  html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-nav-col {
    max-height: calc(100vh - var(--kodex-crm-admin-deck-h, 46px) - 20px) !important;
  }

  html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-nav__body,
  html body.app.admin #wrapper .content.kpf-sys-content nav.customer-tabs > ul {
    max-height: min(220px, 36vh) !important;
  }
}

/* Phone */
@media (max-width: 640px) {
  html body.app.admin #wrapper .content,
  html body.app.admin #wrapper .content.kpf-sys-content {
    padding: 10px 10px 24px !important;
  }

  html body.app.admin #wrapper .content .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  html body.app.admin #wrapper .content .row > [class*='col-'] {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  html body.app.admin .btn {
    min-height: 34px !important;
  }

  html body.app.admin .table-responsive {
    border-radius: var(--kpf-sys-radius) !important;
  }

  html body.app.admin #wrapper .content.kpf-sys-content .dataTables_length,
  html body.app.admin #wrapper .content.kpf-sys-content .dataTables_filter,
  html body.app.admin #wrapper .content.kpf-sys-content .dataTables_info,
  html body.app.admin #wrapper .content.kpf-sys-content .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }
}

/* Dark */
html body.app.admin.kodex-crm-admin--ui-dark {
  --kpf-sys-ink: #e8e9ed;
  --kpf-sys-sec: #c5c8d4;
  --kpf-sys-muted: #8b8f9c;
  --kpf-sys-line: #2a2a32;
  --kpf-sys-soft: #22222a;
  --kpf-sys-surface: #14141a;
  --kpf-sys-canvas: #0e0e12;
  --kpf-sys-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --kpf-sys-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.28);
}

html body.app.admin.kodex-crm-admin--ui-dark .panel_s > .panel-heading,
html body.app.admin.kodex-crm-admin--ui-dark .panel-heading,
html body.app.admin.kodex-crm-admin--ui-dark .box > .box-header {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-sys-cobalt) 14%, #14141a) 0%,
      #14141a 100%
    ) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark table.table > tbody > tr:hover > td,
html body.app.admin.kodex-crm-admin--ui-dark table.dataTable > tbody > tr:hover > td {
  background: color-mix(in srgb, var(--kpf-sys-cobalt) 12%, #14141a) !important;
}

/* ========== INSTANT NAV — hide lag on section changes ========== */
@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.12s;
    animation-timing-function: ease-out;
  }
}

html.kpf-nav-pending,
html.kpf-nav-pending body {
  cursor: progress !important;
}

/* Keep shell chrome solid while the next page loads — no content fade */
html.kpf-nav-pending #header,
html.kpf-nav-pending #menu,
html.kpf-nav-pending .kodex-crm-admin__rail {
  pointer-events: none;
}

html.kpf-nav-pending .kpf-nav-pending-link,
html.kpf-nav-pending .kpf-client-nav__link.is-active {
  color: var(--kpf-sys-cobalt, #001bff) !important;
  background: color-mix(in srgb, var(--kpf-sys-cobalt, #001bff) 10%, transparent) !important;
}

/* Primary / filled CTAs stay white-on-cobalt while navigating */
html.kpf-nav-pending .kpf-nav-pending-link.kds-dash-quick__btn--primary,
html.kpf-nav-pending .kpf-nav-pending-link.kdv3-btn--primary,
html.kpf-nav-pending a.kdv3-btn--primary.kpf-nav-pending-link,
html.kpf-nav-pending .kpf-nav-pending-link.btn-primary,
html.kpf-nav-pending .kpf-nav-pending-link.btn-info,
html.kpf-nav-pending a.kpf-nav-pending-link.btn-primary,
html.kpf-nav-pending a.btn-primary.kpf-nav-pending-link {
  background: var(--kpf-sys-cobalt, #001bff) !important;
  border-color: var(--kpf-sys-cobalt, #001bff) !important;
  color: #fff !important;
}

/* Dashboard V3 KPI cards keep their own surface/ink while navigating */
html.kpf-nav-pending a.kdv3-kpi.kpf-nav-pending-link,
html.kpf-nav-pending a.kds-kpi-card.kdv3-kpi.kpf-nav-pending-link {
  color: var(--kodex-text-primary, #14141a) !important;
  background: color-mix(in srgb, var(--kodex-crm-canvas, #f0f1f4) 55%, var(--kodex-crm-surface, #fff)) !important;
}
html.kpf-nav-pending a.kdv3-kpi.kpf-nav-pending-link .kds-kpi-card__label {
  color: var(--kodex-text-muted, #6e7180) !important;
}
html.kpf-nav-pending a.kdv3-kpi.kpf-nav-pending-link .kds-kpi-card__value {
  color: var(--kodex-text-primary, #14141a) !important;
}

html.kpf-nav-pending body.kodex-crm-admin--ui-dark .kpf-client-nav__link.is-active,
html[data-theme='dark'].kpf-nav-pending .kpf-client-nav__link.is-active {
  color: #001bff !important;
  background: #f7f7f7 !important;
}

/* Prefer CSS max-width kill over JS class rewriting */
html body.app.admin #wrapper .content.kpf-sys-content .tw-max-w-md,
html body.app.admin #wrapper .content.kpf-sys-content .tw-max-w-lg,
html body.app.admin #wrapper .content.kpf-sys-content .tw-max-w-xl,
html body.app.admin #wrapper .content.kpf-sys-content .tw-max-w-2xl,
html body.app.admin #wrapper .content.kpf-sys-content .tw-max-w-3xl,
html body.app.admin #wrapper .content.kpf-sys-content .tw-max-w-4xl,
html body.app.admin #wrapper .content.kpf-sys-content .tw-max-w-5xl,
html body.app.admin #wrapper .content.kpf-sys-content .tw-max-w-6xl,
html body.app.admin #wrapper .content.kpf-sys-content .tw-max-w-7xl {
  max-width: 100% !important;
}

/* Desktop only: keep client nav column capped (never on mobile / stacked) */
@media (min-width: 992px) {
  html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-nav-col.tw-max-w-6xl,
  html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-nav-col[class*='tw-max-w-'] {
    max-width: 268px !important;
  }
}

@media (max-width: 991px) {
  html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-nav-col,
  html body.app.admin #wrapper .content.kpf-sys-content .kpf-client-nav-col[class*='tw-max-w-'] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Identity-menu media (tablet) — do not override aside#menu shell chrome here */
html body.app.admin .kodex-crm-admin__identity-media-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--kodex-text-primary, #14141a) !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body.app.admin .kodex-crm-admin__identity-media-btn span {
  color: inherit !important;
}

html body.app.admin .kodex-crm-admin__identity-media-btn svg {
  flex-shrink: 0 !important;
  color: inherit !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}

html body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--news svg {
  fill: none !important;
}

html body.app.admin .kodex-crm-admin__identity-media-btn:hover,
html body.app.admin .kodex-crm-admin__identity-media-btn:focus-visible {
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
  color: var(--kodex-text-primary, #14141a) !important;
  outline: none !important;
}

/* Light theme: keep normal text color on hover (no brand tint) */
html body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--spotify:hover,
html body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--spotify:focus-visible {
  color: var(--kodex-text-primary, #14141a) !important;
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
}

html body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--news:hover,
html body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--news:focus-visible {
  color: var(--kodex-text-primary, #14141a) !important;
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
}

/* Dark mode — readable Spotify / News rows */
html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-media-btn,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-media-btn {
  color: #f3f4f6 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-media-btn:hover,
html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-media-btn:focus-visible,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-media-btn:hover,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-media-btn:focus-visible {
  background: color-mix(in srgb, #fff 8%, transparent) !important;
  color: #fff !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--spotify:hover,
html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--spotify:focus-visible,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--spotify:hover,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--spotify:focus-visible {
  color: #1ed760 !important;
  background: color-mix(in srgb, #1ed760 16%, transparent) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--news:hover,
html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--news:focus-visible,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--news:hover,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--news:focus-visible {
  color: #93a4ff !important;
  background: color-mix(in srgb, #001bff 22%, transparent) !important;
}

/* Status header inside identity dropdown */
html body.app.admin .kodex-crm-admin__identity-status {
  list-style: none !important;
  margin: 0 !important;
  padding: 10px 10px 8px !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
}

html body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__frame,
html body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__frame--identity {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 10px 12px 10px 14px !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #f3f4f6 0%, #eceef0 100%) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__accent {
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  border-radius: 4px !important;
  background: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__date-capsule {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__mark {
  width: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
}

html body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__day {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #14141a !important;
  line-height: 1.25 !important;
}

html body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__meta {
  font-size: 10px !important;
  color: #6e7180 !important;
}

html body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__user {
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #14141a !important;
}

html body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__chip {
  font-size: 10px !important;
  padding: 3px 7px !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-status,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-status {
  border-bottom-color: color-mix(in srgb, #fff 12%, transparent) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-status .kpf-status-header__frame,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__frame {
  background: linear-gradient(180deg, #252530 0%, #1e1e24 100%) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-status .kpf-status-header__date-capsule,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__date-capsule {
  background: #14141a !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-status .kpf-status-header__day,
html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-status .kpf-status-header__user,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__day,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__user {
  color: #f3f4f6 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-status .kpf-status-header__meta,
html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-status .kpf-status-header__meta {
  color: #a1a1aa !important;
}

/* Hide dashboard duplicate once relocated */
html body.app.admin .kpf-status-header[hidden],
html body.app.admin .kpf-status-header.kpf-status-header--in-identity,
html body.app.admin .kpf-status-header[data-kpf-identity-relocated='1'] {
  display: none !important;
}

@media (max-width: 1180px),
  (orientation: landscape) and (max-width: 1366px) and (max-height: 1024px) {
  html body.app.admin #header .kodex-crm-admin__deck-media {
    display: none !important;
  }

  html body.app.admin .kodex-crm-admin__identity-media-item,
  html body.app.admin .kodex-crm-admin__identity-media-sep {
    display: list-item !important;
  }
}

@media (min-width: 1181px) {
  html body.app.admin .kodex-crm-admin__identity-media-item,
  html body.app.admin .kodex-crm-admin__identity-media-sep {
    display: none !important;
  }
}

/* ========== Workspace alerts utility (header) ========== */
html body.app.admin #header li.kodex-crm-admin__workspace-alerts {
  background: transparent !important;
  box-shadow: none !important;
  list-style: none !important;
}

html body.app.admin #header li.kodex-crm-admin__workspace-alerts > a.kodex-crm-admin__workspace-alerts-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: color-mix(in srgb, #fff 6%, transparent) !important;
  color: color-mix(in srgb, #fff 78%, transparent) !important;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent) !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

html body.app.admin #header li.kodex-crm-admin__workspace-alerts > a.kodex-crm-admin__workspace-alerts-btn:hover,
html body.app.admin #header li.kodex-crm-admin__workspace-alerts.open > a.kodex-crm-admin__workspace-alerts-btn,
html body.app.admin #header li.kodex-crm-admin__workspace-alerts > a.kodex-crm-admin__workspace-alerts-btn--active {
  background: #fff !important;
  color: #b45309 !important;
  border-color: #fff !important;
}

html body.app.admin #header li.kodex-crm-admin__workspace-alerts > a.kodex-crm-admin__workspace-alerts-btn--active {
  background: #f59e0b !important;
  color: #14141a !important;
  border-color: #f59e0b !important;
}

html body.app.admin #header li.kodex-crm-admin__workspace-alerts > a.kodex-crm-admin__workspace-alerts-btn--active:hover,
html body.app.admin #header li.kodex-crm-admin__workspace-alerts.open > a.kodex-crm-admin__workspace-alerts-btn--active {
  background: #fbbf24 !important;
  color: #14141a !important;
  border-color: #fbbf24 !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-icon svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: #dc2626 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  text-align: center !important;
  box-shadow: 0 0 0 1px #001d3a !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-badge[hidden] {
  display: none !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-menu {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(420px, calc(100vw - 24px)) !important;
  max-height: min(420px, 70vh) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--kodex-bg-surface, #fff) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  box-shadow: 0 16px 40px color-mix(in srgb, #14141a 14%, transparent) !important;
  z-index: 1050 !important;
}

html body.app.admin #header li.kodex-crm-admin__workspace-alerts.open > .kodex-crm-admin__workspace-alerts-menu,
html body.app.admin #header li.kodex-crm-admin__workspace-alerts:hover > .kodex-crm-admin__workspace-alerts-menu {
  display: block !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  background: color-mix(in srgb, #f59e0b 8%, #fff) !important;
  list-style: none !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-title {
  font-family: var(--kodex-font-display, "Neue Haas Grotesk Display", Satoshi, system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-body {
  list-style: none !important;
  margin: 0 !important;
  padding: 10px !important;
  max-height: 340px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-list .alert {
  position: relative !important;
  margin: 0 !important;
  padding: 10px 32px 10px 12px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  border-left-width: 3px !important;
  background: #f8f8f9 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #14141a !important;
  white-space: normal !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-list .alert-danger {
  border-left-color: #dc2626 !important;
  background: color-mix(in srgb, #dc2626 8%, #fff) !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-list .alert-warning {
  border-left-color: #d97706 !important;
  background: color-mix(in srgb, #d97706 8%, #fff) !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-list .alert-info {
  border-left-color: #2563eb !important;
  background: color-mix(in srgb, #2563eb 8%, #fff) !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-empty {
  margin: 8px 4px !important;
  font-size: 13px !important;
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin #header .kodex-crm-admin__workspace-alerts-empty[hidden] {
  display: none !important;
}

/* Dashboard card moves into header — hide duplicate */
html body.app.admin.kodex-crm-admin--workspace-alerts-header .kds-dash-zone--status,
html body.app.admin.kodex-crm-admin--workspace-alerts-header #widget-workspace_alerts {
  display: none !important;
}

/* Megamenu search + link descriptions (nav IA 2.10.75) */
.kodex-crm-admin__mega-search {
  padding: 0 20px 12px !important;
}
.kodex-crm-admin__mega-search-input {
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  background: var(--kodex-bg-canvas, #f0f1f4) !important;
  font-size: 13px !important;
  color: var(--kodex-text-primary, #14141a) !important;
  outline: none !important;
  box-shadow: none !important;
}
.kodex-crm-admin__mega-search-input:focus {
  border-color: var(--kodex-action-primary, #001bff) !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, #001bff 16%, transparent) !important;
}
.kodex-crm-admin__mega-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}
.kodex-crm-admin__mega-link-desc {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  font-weight: 400 !important;
}
.kodex-crm-admin__mega-quick-pill {
  border-radius: 4px !important;
}

/* ========== Header deck — responsive + overflow More menu ========== */
html body.app.admin #header > nav > .tw-flex.tw-justify-between {
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

/* Avatar-only identity: center img in the control */
html body.app.admin #header .kodex-crm-admin__identity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
}

html body.app.admin #header .kodex-crm-admin__identity img.kodex-crm-admin__avatar {
  display: block !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}

@media (min-width: 1100px) {
  html body.app.admin #header .kodex-crm-admin__identity:has(.kodex-crm-admin__identity-meta) {
    justify-content: flex-start !important;
    padding: 3px 8px 3px 3px !important;
    line-height: normal !important;
  }
}

html body.app.admin #header .kodex-crm-admin__deck-tools,
html body.app.admin #header .kodex-crm-admin__deck-rail {
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

html body.app.admin #header .kodex-crm-admin__header-more {
  position: relative !important;
  display: none !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  height: var(--kodex-crm-admin-deck-control-h, 34px) !important;
}

html body.app.admin #header .kodex-crm-admin__header-more:not([hidden]):not(.is-empty) {
  display: inline-flex !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--kodex-crm-admin-deck-control-h, 34px) !important;
  height: var(--kodex-crm-admin-deck-control-h, 34px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, #fff 14%, transparent) !important;
  border-radius: var(--kodex-radius-sm, 4px) !important;
  background: color-mix(in srgb, #fff 6%, transparent) !important;
  color: color-mix(in srgb, #fff 88%, transparent) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body.app.admin #header .kodex-crm-admin__header-more.is-open .kodex-crm-admin__header-more-btn,
html body.app.admin #header .kodex-crm-admin__header-more-btn:hover,
html body.app.admin #header .kodex-crm-admin__header-more-btn:focus-visible {
  color: #fff !important;
  background: color-mix(in srgb, #001bff 45%, transparent) !important;
  border-color: color-mix(in srgb, #001bff 40%, #fff) !important;
  outline: none !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-panel {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 2800 !important;
  width: min(280px, calc(100vw - 16px)) !important;
  max-height: min(70vh, 420px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 8px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent) !important;
  background: #1e1e24 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
  box-sizing: border-box !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-panel[hidden] {
  display: none !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-label {
  margin: 8px 8px 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: color-mix(in srgb, #fff 45%, transparent) !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-label:first-child {
  margin-top: 2px !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-slot {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* Parked utilities become full-width menu rows */
html body.app.admin #header .kodex-crm-admin__header-more-slot > li,
html body.app.admin #header .kodex-crm-admin__header-more-slot > .kodex-crm-admin__nav-layout,
html body.app.admin #header .kodex-crm-admin__header-more-slot > .kodex-language-selector {
  float: none !important;
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-slot > li > a,
html body.app.admin #header .kodex-crm-admin__header-more-slot > li > button,
html body.app.admin #header .kodex-crm-admin__header-more-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #e8e9ed !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-slot > li > a:hover,
html body.app.admin #header .kodex-crm-admin__header-more-slot > li > button:hover,
html body.app.admin #header .kodex-crm-admin__header-more-link:hover {
  background: color-mix(in srgb, #001bff 35%, transparent) !important;
  color: #fff !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-slot > li > a i,
html body.app.admin #header .kodex-crm-admin__header-more-slot > li > a svg,
html body.app.admin #header .kodex-crm-admin__header-more-slot > li > button svg {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-slot .kodex-crm-admin__nav-layout {
  margin: 4px 0 !important;
  width: 100% !important;
  height: auto !important;
  justify-content: stretch !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-slot .kodex-crm-admin__nav-layout-btn {
  flex: 1 1 auto !important;
  justify-content: center !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-slot .kodex-crm-admin__nav-layout-label {
  display: inline !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-slot .kodex-language-selector {
  width: 100% !important;
}

html body.app.admin #header .kodex-crm-admin__header-more-slot .kodex-language-selector__trigger {
  width: 100% !important;
  justify-content: space-between !important;
}

/* Compact deck on tablet / phone */
@media (max-width: 1100px) {
  html body.app.admin #header #top_search {
    max-width: min(280px, 36vw) !important;
    flex: 1 1 120px !important;
    min-width: 0 !important;
    margin: 0 4px !important;
  }

  html body.app.admin #header #search_input,
  html body.app.admin #header input#search_input {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  html body.app.admin #header .kodex-crm-admin__deck-rail {
    gap: 4px !important;
  }

  html body.app.admin #header .navbar-nav.navbar-right {
    gap: 0 !important;
    padding-left: 4px !important;
  }

  html body.app.admin #header .mobile-menu {
    display: none !important;
  }
}

@media (max-width: 900px) {
  html body.app.admin #header #top_search {
    max-width: min(200px, 32vw) !important;
  }

  html body.app.admin #header .tw-overflow-hidden.tw-shrink-0 {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  /* Dock owns mobile nav — no burger gutter (see kpf-mobile-dock.css) */
  html body.app.admin #header #logo {
    padding-left: 10px !important;
    padding-right: 4px !important;
  }

  html body.app.admin #header #logo img {
    max-width: 72px !important;
  }

  html body.app.admin #header .kodex-crm-admin__identity {
    padding: 3px !important;
    max-width: 34px !important;
    min-width: var(--kodex-crm-admin-deck-control-h, 34px) !important;
    height: var(--kodex-crm-admin-deck-control-h, 34px) !important;
    justify-content: center !important;
    align-items: center !important;
  }

  html body.app.admin #header .kodex-crm-admin__deck-tools {
    padding-right: 8px !important;
    flex-shrink: 0 !important;
  }
}

/* Kanban lead cards — kill Bootstrap/Perfex left pull (row -15px, lead-name -10px) */
html body.app.admin #kan-ban .lead-body.kpf-kb-card,
html body.app.admin #kan-ban li.lead-kan-ban > .panel-body.lead-body {
  padding: 14px 40px 14px 18px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin #kan-ban li.lead-kan-ban.current-user-lead > .panel-body.lead-body {
  padding-left: 20px !important;
}

html body.app.admin #kan-ban .lead-body .row,
html body.app.admin #kan-ban .lead-body .row.kpf-kb-card__meta,
html body.app.admin #kan-ban .kpf-kb-card__meta-row,
html body.app.admin #kan-ban .lead-body .row > [class*='col-'] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body.app.admin #kan-ban .panel-body .lead-name {
  margin-left: 0 !important;
}

/* ========== Icon + text vertical alignment (CRM-wide) ==========
 * Same pattern as kanban sort links: inline-flex + centered glyphs.
 * Covers non-.btn anchors/toggles that mix FA/SVG with labels.
 */
html body.app.admin #wrapper .content a:has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > .fa-light, > .fa-brands, > i[class*='fa-'], > .kanban-sort-icon, > svg):not(.kodex-crm-admin__utility):not(.notifications-icon):not(.top-timers):not(#top-timers):not(.kodex-crm-admin__fab):not(.btn),
html body.app.admin #kan-ban-tab a:has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > .fa-light, > .fa-brands, > i[class*='fa-'], > .kanban-sort-icon, > svg),
html body.app.admin #wrapper .content button:not(.btn):has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > .fa-light, > .fa-brands, > i[class*='fa-'], > svg):not(.kodex-crm-admin__utility):not(.kodex-crm-admin__header-more-btn):not(.kodex-crm-admin__nav-layout-btn):not(.kodex-crm-admin__identity):not(.kodex-language-selector__trigger),
html body.app.admin #wrapper .content .dropdown-toggle:has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > i[class*='fa-'], > svg):not(.kodex-crm-admin__utility):not(.btn),
html body.app.admin #wrapper .content .nav-tabs > li > a:has(> .fa, > .fas, > .far, > .fa-solid, > .fa-regular, > i[class*='fa-'], > svg),
html body.app.admin #wrapper .content .nav-pills > li > a:has(> .fa, > .fas, > .far, > .fa-solid, > .fa-regular, > i[class*='fa-'], > svg),
html body.app.admin #wrapper .content .dt-button:has(> .fa, > .fas, > .far, > .fa-solid, > .fa-regular, > i[class*='fa-'], > span, > svg),
html body.app.admin #wrapper .content .pagination > li > a:has(> .fa, > .fas, > .far, > i[class*='fa-']),
html body.app.admin #wrapper .content .breadcrumb a:has(> .fa, > .fas, > .far, > i[class*='fa-']),
html body.app.admin #wrapper .content .label:has(> .fa, > .fas, > .far, > i[class*='fa-']),
html body.app.admin #wrapper .content .input-group-addon:has(> .fa, > .fas, > .far, > i[class*='fa-']),
html body.app.admin #wrapper .content .panel-heading a:has(> .fa, > .fas, > .far, > i[class*='fa-'], > svg),
html body.app.admin #wrapper .content ._buttons a:has(> .fa, > .fas, > .far, > .fa-solid, > .fa-regular, > i[class*='fa-'], > svg):not(.btn),
html body.app.admin .kanban-leads-sort a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

html body.app.admin #wrapper .content a:has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > .fa-light, > .fa-brands, > i[class*='fa-'], > .kanban-sort-icon, > svg):not(.kodex-crm-admin__utility):not(.notifications-icon):not(.top-timers):not(#top-timers):not(.kodex-crm-admin__fab):not(.btn) > .fa,
html body.app.admin #wrapper .content a:has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > .fa-light, > .fa-brands, > i[class*='fa-'], > .kanban-sort-icon, > svg):not(.kodex-crm-admin__utility):not(.notifications-icon):not(.top-timers):not(#top-timers):not(.kodex-crm-admin__fab):not(.btn) > .fas,
html body.app.admin #wrapper .content a:has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > .fa-light, > .fa-brands, > i[class*='fa-'], > .kanban-sort-icon, > svg):not(.kodex-crm-admin__utility):not(.notifications-icon):not(.top-timers):not(#top-timers):not(.kodex-crm-admin__fab):not(.btn) > .far,
html body.app.admin #wrapper .content a:has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > .fa-light, > .fa-brands, > i[class*='fa-'], > .kanban-sort-icon, > svg):not(.kodex-crm-admin__utility):not(.notifications-icon):not(.top-timers):not(#top-timers):not(.kodex-crm-admin__fab):not(.btn) > .fal,
html body.app.admin #wrapper .content a:has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > .fa-light, > .fa-brands, > i[class*='fa-'], > .kanban-sort-icon, > svg):not(.kodex-crm-admin__utility):not(.notifications-icon):not(.top-timers):not(#top-timers):not(.kodex-crm-admin__fab):not(.btn) > .fab,
html body.app.admin #wrapper .content a:has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > .fa-light, > .fa-brands, > i[class*='fa-'], > .kanban-sort-icon, > svg):not(.kodex-crm-admin__utility):not(.notifications-icon):not(.top-timers):not(#top-timers):not(.kodex-crm-admin__fab):not(.btn) > i[class*='fa-'],
html body.app.admin #wrapper .content a:has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > .fa-light, > .fa-brands, > i[class*='fa-'], > .kanban-sort-icon, > svg):not(.kodex-crm-admin__utility):not(.notifications-icon):not(.top-timers):not(#top-timers):not(.kodex-crm-admin__fab):not(.btn) > .kanban-sort-icon,
html body.app.admin #wrapper .content a:has(> .fa, > .fas, > .far, > .fal, > .fab, > .fa-solid, > .fa-regular, > .fa-light, > .fa-brands, > i[class*='fa-'], > .kanban-sort-icon, > svg):not(.kodex-crm-admin__utility):not(.notifications-icon):not(.top-timers):not(#top-timers):not(.kodex-crm-admin__fab):not(.btn) > svg,
html body.app.admin #kan-ban-tab a > .fa,
html body.app.admin #kan-ban-tab a > .fas,
html body.app.admin #kan-ban-tab a > .far,
html body.app.admin #kan-ban-tab a > i[class*='fa-'],
html body.app.admin #kan-ban-tab a > .kanban-sort-icon,
html body.app.admin #kan-ban-tab a > svg,
html body.app.admin .kanban-leads-sort a > .fa,
html body.app.admin .kanban-leads-sort a > .kanban-sort-icon,
html body.app.admin #wrapper .content .dropdown-toggle:not(.btn):not(.kodex-crm-admin__utility) > .fa,
html body.app.admin #wrapper .content .dropdown-toggle:not(.btn):not(.kodex-crm-admin__utility) > .fas,
html body.app.admin #wrapper .content .dropdown-toggle:not(.btn):not(.kodex-crm-admin__utility) > .far,
html body.app.admin #wrapper .content .dropdown-toggle:not(.btn):not(.kodex-crm-admin__utility) > i[class*='fa-'],
html body.app.admin #wrapper .content .dropdown-toggle:not(.btn):not(.kodex-crm-admin__utility) > svg,
html body.app.admin #wrapper .content .nav-tabs > li > a > .fa,
html body.app.admin #wrapper .content .nav-tabs > li > a > .fas,
html body.app.admin #wrapper .content .nav-tabs > li > a > .far,
html body.app.admin #wrapper .content .nav-tabs > li > a > i[class*='fa-'],
html body.app.admin #wrapper .content .nav-tabs > li > a > svg,
html body.app.admin #wrapper .content .dt-button > .fa,
html body.app.admin #wrapper .content .dt-button > i[class*='fa-'],
html body.app.admin #wrapper .content ._buttons a:not(.btn) > .fa,
html body.app.admin #wrapper .content ._buttons a:not(.btn) > i[class*='fa-'],
html body.app.admin #wrapper .content ._buttons a:not(.btn) > svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
}

/* Dropdown items with leading icons */
html body.app.admin #wrapper .content .dropdown-menu > li > a:has(> .fa, > .fas, > .far, > .fa-solid, > .fa-regular, > i[class*='fa-'], > svg) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body.app.admin #wrapper .content .dropdown-menu > li > a > .fa,
html body.app.admin #wrapper .content .dropdown-menu > li > a > .fas,
html body.app.admin #wrapper .content .dropdown-menu > li > a > .far,
html body.app.admin #wrapper .content .dropdown-menu > li > a > .fa-solid,
html body.app.admin #wrapper .content .dropdown-menu > li > a > .fa-regular,
html body.app.admin #wrapper .content .dropdown-menu > li > a > i[class*='fa-'],
html body.app.admin #wrapper .content .dropdown-menu > li > a > svg {
  margin: 0 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: auto !important;
}

/* FA optical offset often mis-centers glyphs next to Satoshi/NHG text */
html body.app.admin #wrapper .fa,
html body.app.admin #wrapper .fas,
html body.app.admin #wrapper .far,
html body.app.admin #wrapper .fal,
html body.app.admin #wrapper .fab,
html body.app.admin #wrapper .fa-solid,
html body.app.admin #wrapper .fa-regular,
html body.app.admin #wrapper .fa-light,
html body.app.admin #wrapper .fa-brands,
html body.app.admin #header .fa,
html body.app.admin #menu .fa {
  vertical-align: middle !important;
}

/* ========== Surface inset (CRM-wide) ==========
 * Same idea as kanban cards: content must not touch the rim.
 * Bootstrap .row negative margins cancel panel padding — neutralize
 * them inside bordered surfaces only (page-level grid rows keep gutters).
 */
html body.app.admin #wrapper .content .panel-body:not(.no-padding):not(.kpf-dt-panel-body):not([class*='padding-0']),
html body.app.admin #wrapper .content .panel-footer,
html body.app.admin #wrapper .content .panel-heading,
html body.app.admin #wrapper .content .well,
html body.app.admin #wrapper .content .alert,
html body.app.admin #wrapper .content .modal-body,
html body.app.admin #wrapper .content .modal-footer,
html body.app.admin #wrapper .content .card-body,
html body.app.admin #wrapper .content .info-box,
html body.app.admin #wrapper .content .small-box,
html body.app.admin #wrapper .content .top_stats_wrapper,
html body.app.admin #wrapper .content .activity-feed,
html body.app.admin #wrapper .content .todo-widget,
html body.app.admin #wrapper .content .screen-options-area,
html body.app.admin #wrapper .content .list-group-item,
html body.app.admin #wrapper .content .dropdown-menu,
html body.app.admin #wrapper .content .popover-content,
html body.app.admin #wrapper .content .tooltip-inner,
html body.app.admin #kan-ban .lead-body,
html body.app.admin #kan-ban .panel-body.lead-body {
  box-sizing: border-box !important;
}

/* Ensure common bordered chrome has a real inset when Perfex left it bare */
html body.app.admin #wrapper .content .info-box,
html body.app.admin #wrapper .content .small-box,
html body.app.admin #wrapper .content .top_stats_wrapper:not([class*='padding']),
html body.app.admin #wrapper .content .activity-feed,
html body.app.admin #wrapper .content .todo-widget,
html body.app.admin #wrapper .content .screen-options-area {
  padding: var(--kpf-sys-inset-sm) var(--kpf-sys-inset) !important;
}

html body.app.admin #wrapper .content .list-group-item {
  padding: 10px var(--kpf-sys-inset) !important;
}

html body.app.admin #wrapper .content .modal-body {
  padding: var(--kpf-sys-inset) var(--kpf-sys-inset-x) !important;
}

html body.app.admin #wrapper .content .modal-footer {
  padding: 12px var(--kpf-sys-inset-x) !important;
}

html body.app.admin #wrapper .content .card-body {
  padding: var(--kpf-sys-inset) var(--kpf-sys-inset-x) !important;
}

/* Kill row bleed inside surfaces (the kanban flush-left bug, CRM-wide) */
html body.app.admin #wrapper .content .panel-body .row,
html body.app.admin #wrapper .content .panel-footer .row,
html body.app.admin #wrapper .content .panel-heading .row,
html body.app.admin #wrapper .content .well .row,
html body.app.admin #wrapper .content .alert .row,
html body.app.admin #wrapper .content .modal-body .row,
html body.app.admin #wrapper .content .modal-footer .row,
html body.app.admin #wrapper .content .card-body .row,
html body.app.admin #wrapper .content .info-box .row,
html body.app.admin #wrapper .content .small-box .row,
html body.app.admin #wrapper .content .top_stats_wrapper .row,
html body.app.admin #wrapper .content .activity-feed .row,
html body.app.admin #wrapper .content .todo-widget .row,
html body.app.admin #wrapper .content .screen-options-area .row,
html body.app.admin #wrapper .content .list-group-item .row,
html body.app.admin #wrapper .content .dropdown-menu .row,
html body.app.admin #kan-ban .lead-body .row,
html body.app.admin #kan-ban .panel-body .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* Gutters between columns only — outer inset comes from the surface padding */
html body.app.admin #wrapper .content .panel-body .row > [class*='col-'],
html body.app.admin #wrapper .content .panel-footer .row > [class*='col-'],
html body.app.admin #wrapper .content .well .row > [class*='col-'],
html body.app.admin #wrapper .content .alert .row > [class*='col-'],
html body.app.admin #wrapper .content .modal-body .row > [class*='col-'],
html body.app.admin #wrapper .content .card-body .row > [class*='col-'],
html body.app.admin #wrapper .content .info-box .row > [class*='col-'],
html body.app.admin #wrapper .content .top_stats_wrapper .row > [class*='col-'],
html body.app.admin #wrapper .content .activity-feed .row > [class*='col-'],
html body.app.admin #wrapper .content .todo-widget .row > [class*='col-'],
html body.app.admin #kan-ban .lead-body .row > [class*='col-'],
html body.app.admin #kan-ban .panel-body .row > [class*='col-'] {
  padding-left: var(--kpf-sys-inset-gutter) !important;
  padding-right: var(--kpf-sys-inset-gutter) !important;
  box-sizing: border-box !important;
}

/* Single full-width column inside a card: no extra side gutter on top of surface inset */
html body.app.admin #wrapper .content .panel-body > .row > [class*='col-']:only-child,
html body.app.admin #wrapper .content .well > .row > [class*='col-']:only-child,
html body.app.admin #wrapper .content .modal-body > .row > [class*='col-']:only-child,
html body.app.admin #kan-ban .lead-body > .row > [class*='col-']:only-child,
html body.app.admin #kan-ban .lead-body .row > [class*='col-']:only-child {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Respect explicit no-padding / table shells (DT chrome owns its own inset) */
html body.app.admin #wrapper .content .panel-body.no-padding,
html body.app.admin #wrapper .content .panel-body.kpf-dt-panel-body,
html body.app.admin #wrapper .content .panel_s.kpf-dt-panel > .panel-body,
html body.app.admin #wrapper .content .panel_s.kpf-invoice-doc > .panel-body {
  padding: 0 !important;
}

/* —— TOP nav: compact pills + More overflow (pro bar, no truncated labels) —— */
html body.app.admin.kodex-crm-admin--nav-horizontal {
  --kodex-crm-admin-topbar-h: 72px;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #menu.sidebar,
html body.app.admin.kodex-crm-admin--nav-horizontal aside#menu.sidebar,
html body.app.admin.kodex-crm-admin--nav-horizontal aside#menu.kodex-crm-admin__rail {
  height: var(--kodex-crm-admin-topbar-h, 72px) !important;
  min-height: var(--kodex-crm-admin-topbar-h, 72px) !important;
  max-height: var(--kodex-crm-admin-topbar-h, 72px) !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  gap: 8px !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu,
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu.tw-mt-\[15px\] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li.kodex-crm-admin__top-overflow-parked {
  display: none !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li > a,
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li > a.kodex-crm-admin__module {
  width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li.kodex-crm-admin__top-more {
  margin-left: auto !important;
  position: relative !important;
  z-index: 5 !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li.kodex-crm-admin__top-more[hidden],
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li.kodex-crm-admin__top-more.is-empty {
  display: none !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li.kodex-crm-admin__top-more > a {
  min-width: 40px !important;
  font-weight: 600 !important;
  background: color-mix(in srgb, #001bff 10%, #f7f7f7) !important;
  border-color: color-mix(in srgb, #001bff 22%, transparent) !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li.kodex-crm-admin__top-more.is-open > a,
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li.kodex-crm-admin__top-more > a:hover {
  color: #f7f7f7 !important;
  background: #001bff !important;
  border-color: #001bff !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__top-more-panel:not(.kodex-crm-admin__top-more-panel--portal) {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 220px !important;
  max-width: min(320px, 86vw) !important;
  max-height: min(70vh, 440px) !important;
  overflow: auto !important;
  padding: 8px !important;
  margin: 0 !important;
  list-style: none !important;
  border-radius: 4px !important;
  background: #fff !important;
  border: 1px solid #d3d6e0 !important;
  box-shadow: 0 12px 32px rgba(20, 20, 26, 0.16) !important;
  z-index: 1200 !important;
}

/* Portaled panel escapes #menu overflow:hidden clipping (top/right via JS inline) */
html body.app.admin .kodex-crm-admin__top-more-panel.kodex-crm-admin__top-more-panel--portal {
  position: fixed !important;
  min-width: 220px !important;
  max-width: min(320px, 86vw) !important;
  max-height: min(70vh, 440px) !important;
  overflow: auto !important;
  padding: 8px !important;
  margin: 0 !important;
  list-style: none !important;
  border-radius: 4px !important;
  background: #fff !important;
  border: 1px solid #d3d6e0 !important;
  box-shadow: 0 12px 32px rgba(20, 20, 26, 0.16) !important;
  z-index: 1300 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__top-more-panel.kodex-crm-admin__top-more-panel--portal {
  background: #1e1e24 !important;
  border-color: #40424d !important;
  color: #f0f1f4 !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__top-more-panel[hidden],
html body.app.admin .kodex-crm-admin__top-more-panel[hidden] {
  display: none !important;
}

/* While More is open, let the bar paint overlays (fallback if portal fails) */
html body.app.admin.kodex-crm-admin--nav-horizontal.kodex-crm-admin--top-more-open #menu.sidebar,
html body.app.admin.kodex-crm-admin--nav-horizontal.kodex-crm-admin--top-more-open aside#menu.sidebar,
html body.app.admin.kodex-crm-admin--nav-horizontal.kodex-crm-admin--top-more-open aside#menu.kodex-crm-admin__rail {
  overflow: visible !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__top-more-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  margin: 0 0 2px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #14141a !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__top-more-item:hover,
html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__top-more-item:focus-visible {
  background: #f0f1f4 !important;
  color: #001bff !important;
  outline: none !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__top-more-item.is-active {
  background: color-mix(in srgb, #001bff 10%, #fff) !important;
  color: #001bff !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__top-more-item-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__top-more-item-icon svg,
html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__top-more-item-icon i {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__top-more-item-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__top-more-item-caret {
  opacity: 0.55 !important;
  font-size: 11px !important;
}

/* Narrow laptops / tablets: icon-only pills keep the bar dense before More */
@media (max-width: 900px) {
  html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li:not(.kodex-crm-admin__top-more) > a .menu-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li:not(.kodex-crm-admin__top-more) > a {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li.kodex-crm-admin__top-more > a .menu-text {
    display: none !important;
  }
}