/* KpfLayoutFixes — non-destructive polish only.
   Do NOT rearrange grids, columns, or force chart stretch.
   Scope: overflow cleanup, vertical centering, pagination colors. */

:root {
  --kpf-fix-cobalt: var(--kodex-action-primary, #001bff);
  --kpf-fix-sec: var(--kodex-text-secondary, #40424d);
  --kpf-fix-muted: var(--kodex-text-muted, #6e7180);
  --kpf-fix-line: var(--kodex-border-default, #d3d6e0);
  --kpf-fix-surface: var(--kodex-bg-surface, #fff);
  --kpf-fix-radius: 4px;
  --kpf-fix-chart-max: 280px;
}

/* ========== Payments chart: responsive host (Chart.js fills box) ========== */
html body.app.admin #widget-payments_chart .kpf-payments-chart-host,
html body.app.admin .kpf-payments-chart-host {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(180px, 26vw, 260px) !important;
  min-height: 180px !important;
  max-height: 280px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body.app.admin #widget-payments_chart #payment-statistics,
html body.app.admin #payment-statistics.payments-chart-dashboard,
html body.app.admin .kpf-payments-chart-host > canvas#payment-statistics {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) {
  html body.app.admin #widget-payments_chart .kpf-payments-chart-host,
  html body.app.admin .kpf-payments-chart-host {
    height: 220px !important;
  }
}

@media (max-width: 720px) {
  html body.app.admin #widget-payments_chart .kpf-payments-chart-host,
  html body.app.admin .kpf-payments-chart-host {
    height: 200px !important;
    min-height: 180px !important;
  }
}

@media (max-width: 480px) {
  html body.app.admin #widget-payments_chart .kpf-payments-chart-host,
  html body.app.admin .kpf-payments-chart-host {
    height: 180px !important;
  }
}

/* Donut / status charts: split layout owns sizing — see .kpf-status-donut */
html body.app.admin #widget-leads_chart .panel-body > .relative:not(.kpf-status-donut__relative),
html body.app.admin #widget-projects_chart .panel-body > .relative:not(.kpf-status-donut__relative),
html body.app.admin #widget-tickets_chart .panel-body > .relative:not(.kpf-status-donut__relative),
html body.app.admin #widget-leads_chart .panel-body > div:has(> canvas):not(.kpf-status-donut),
html body.app.admin #widget-projects_chart .panel-body > div:has(> canvas):not(.kpf-status-donut),
html body.app.admin #widget-tickets_chart .panel-body > div:has(> canvas):not(.kpf-status-donut):not(.kpf-tickets-chart):not(.kpf-tickets-chart__block) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: var(--kpf-fix-chart-max) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Tickets chart widget — stacked split donuts */
html body.app.admin #widget-tickets_chart .kpf-tickets-chart {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body.app.admin #widget-tickets_chart .kpf-tickets-chart__block {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 4px 2px 2px !important;
  border: 0 !important;
  background: transparent !important;
}

html body.app.admin #widget-tickets_chart .kpf-tickets-chart__block + .kpf-tickets-chart__block {
  padding-top: 16px !important;
  border-top: 1px solid var(--kpf-fix-line, #edeff7) !important;
}

html body.app.admin #widget-tickets_chart .kpf-tickets-chart__head {
  margin: 0 !important;
  padding: 0 2px !important;
}

html body.app.admin #widget-tickets_chart .kpf-tickets-chart__head p {
  margin: 0 !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin #widget-tickets_chart .kpf-status-donut {
  width: 100% !important;
  grid-template-columns: minmax(160px, 220px) minmax(160px, 1fr) !important;
}

html body.app.admin #widget-tickets_chart .kpf-status-donut__chart {
  width: 200px !important;
  max-width: 200px !important;
  height: 200px !important;
  max-height: 200px !important;
  margin: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

/* Tickets DS MarketShareDonut — true circle (never oval) + visible legend */
html body.app.admin #widget-tickets_chart .kpf-kodex-chart-host[data-kds-chart='market-donut'],
html body.app.admin #widget-tickets_chart .kpf-kodex-chart-host[data-kpf-tickets-donut='1'] {
  width: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body.app.admin #widget-tickets_chart .kds-insp-market-donut,
html body.app.admin #widget-tickets_chart .kds-insp-market-donut--minimal {
  width: 100% !important;
  height: auto !important;
}

html body.app.admin #widget-tickets_chart .kds-insp-market-donut__body,
html body.app.admin #widget-tickets_chart .kds-insp-market-donut--minimal .kds-insp-market-donut__body {
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px 20px !important;
  margin-top: 0 !important;
  width: 100% !important;
}

html body.app.admin #widget-tickets_chart .kds-insp-market-donut__chart {
  position: relative !important;
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 200px !important;
  margin: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body.app.admin #widget-tickets_chart .kds-insp-market-donut__chart svg {
  display: block !important;
  width: 200px !important;
  height: 200px !important;
  min-width: 200px !important;
  min-height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: visible !important;
}

html body.app.admin #widget-tickets_chart .kds-insp-market-donut__legend {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 720px) {
  html body.app.admin #widget-tickets_chart .kds-insp-market-donut__body,
  html body.app.admin #widget-tickets_chart .kds-insp-market-donut--minimal .kds-insp-market-donut__body {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }

  html body.app.admin #widget-tickets_chart .kds-insp-market-donut__legend {
    width: 100% !important;
    max-height: none !important;
  }
}

/* Status donut split: big chart + toggle buttons */
html body.app.admin .kpf-status-donut {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(148px, 0.75fr) !important;
  gap: 14px 18px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin .kpf-status-donut__chart {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(220px, 30vw, 300px) !important;
  max-height: 320px !important;
}

/* Leads/Projects: never stretch the donut into an oval — lock a square plot
   so even the pre-replacement Chart.js canvas stays circular (not pixel-smeared). */
html body.app.admin #widget-leads_chart .kpf-status-donut__chart,
html body.app.admin #widget-projects_chart .kpf-status-donut__chart {
  width: 220px !important;
  max-width: 220px !important;
  height: 220px !important;
  max-height: 220px !important;
  margin: 0 auto !important;
  aspect-ratio: 1 / 1 !important;
}

html body.app.admin #widget-leads_chart .kpf-status-donut,
html body.app.admin #widget-projects_chart .kpf-status-donut {
  grid-template-columns: 220px minmax(148px, 1fr) !important;
  justify-content: start !important;
  align-items: center !important;
}

html body.app.admin .kpf-status-donut__relative {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

html body.app.admin .kpf-status-donut__chart canvas:not([data-kpf-replaced='1']),
html body.app.admin #leads_status_stats:not([data-kpf-replaced='1']),
html body.app.admin #projects_status_stats:not([data-kpf-replaced='1']),
html body.app.admin #tickets-awaiting-reply-by-status:not([data-kpf-replaced='1']),
html body.app.admin #tickets-awaiting-reply-by-department:not([data-kpf-replaced='1']) {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}

/* Once kpf-pattern-charts replaces a canvas with a DS ring/donut host, the
   canvas must never paint over the host content (it sits inside the host). */
html body.app.admin canvas[data-kpf-replaced='1'],
html body.app.admin .kpf-kodex-chart-host > canvas {
  display: none !important;
  position: static !important;
}

/* Shell replaced by the DS ring chart stays collapsed even if its inline
   style is lost on a widget re-render */
html body.app.admin .kpf-status-donut[data-kpf-replaced-shell='1'] {
  display: none !important;
}

html body.app.admin .kpf-status-donut__legend {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  padding: 2px !important;
}

html body.app.admin .kpf-status-donut__btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border: 1px solid var(--kpf-fix-line) !important;
  border-radius: var(--kpf-fix-radius) !important;
  background: var(--kpf-fix-surface) !important;
  color: var(--kodex-text-primary, #14141a) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease !important;
  box-sizing: border-box !important;
}

html body.app.admin .kpf-status-donut__btn:hover {
  border-color: color-mix(in srgb, var(--kpf-fix-cobalt) 35%, var(--kpf-fix-line)) !important;
  background: color-mix(in srgb, var(--kpf-fix-cobalt) 5%, #fff) !important;
}

html body.app.admin .kpf-status-donut__btn.is-on {
  border-color: color-mix(in srgb, var(--kpf-fix-cobalt) 28%, var(--kpf-fix-line)) !important;
  box-shadow: inset 3px 0 0 var(--kpf-fix-cobalt) !important;
}

html body.app.admin .kpf-status-donut__btn.is-off {
  opacity: 0.48 !important;
  background: color-mix(in srgb, var(--kodex-bg-subtle, #f7f7f7) 80%, #fff) !important;
  box-shadow: none !important;
}

html body.app.admin .kpf-status-donut__btn.is-off .kpf-status-donut__name {
  text-decoration: line-through !important;
  color: var(--kpf-fix-muted) !important;
}

html body.app.admin .kpf-status-donut__swatch {
  flex: 0 0 auto !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 2px !important;
  background: var(--kpf-fix-cobalt) !important;
}

html body.app.admin .kpf-status-donut__meta {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.app.admin .kpf-status-donut__name {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

html body.app.admin .kpf-status-donut__value {
  flex: 0 0 auto !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kpf-fix-sec) !important;
}

@media (max-width: 900px) {
  html body.app.admin .kpf-status-donut {
    grid-template-columns: minmax(0, 1.2fr) minmax(130px, 0.9fr) !important;
    gap: 12px !important;
  }

  html body.app.admin .kpf-status-donut__chart {
    height: 240px !important;
  }
}

@media (max-width: 640px) {
  html body.app.admin .kpf-status-donut {
    grid-template-columns: 1fr !important;
  }

  html body.app.admin .kpf-status-donut__chart {
    height: 220px !important;
  }

  html body.app.admin .kpf-status-donut__legend {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    max-height: none !important;
  }

  html body.app.admin .kpf-status-donut__btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 120px !important;
  }
}

/* ========== DataTables: hide empty leftover shells only ========== */
html body.app.admin .dataTables_wrapper > .table-responsive:not(:has(table)),
html body.app.admin .dataTables_wrapper .table-responsive:empty,
html body.app.admin .kpf-dt > .table-responsive:not(:has(table)),
html body.app.admin .panel-table-full > .table-responsive:not(:has(table)) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body.app.admin .kpf-dt .table-responsive,
html body.app.admin .dataTables_wrapper .table-responsive,
html body.app.admin .kpf-dt-table-host {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Pagination — readable page controls (Bootstrap li>a + DT buttons) */
html body.app.admin .dataTables_paginate,
html body.app.admin .kpf-dt-footer .dataTables_paginate,
html body.app.admin #widget-tickets_report .dataTables_paginate {
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

html body.app.admin .dataTables_paginate .pagination,
html body.app.admin .kpf-dt-footer .pagination,
html body.app.admin #widget-tickets_report .pagination {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.app.admin .dataTables_paginate .paginate_button,
html body.app.admin .pagination > li,
html body.app.admin .pagination > .paginate_button {
  display: inline-flex !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none !important;
}

html body.app.admin .dataTables_paginate .paginate_button > a,
html body.app.admin .dataTables_paginate .paginate_button > span,
html body.app.admin .pagination > li > a,
html body.app.admin .pagination > li > span,
html body.app.admin .dataTables_paginate .paginate_button.current,
html body.app.admin .dataTables_paginate a.paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 34px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 1px solid var(--kpf-fix-line, #d3d6e0) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

html body.app.admin .dataTables_paginate .paginate_button:hover > a,
html body.app.admin .pagination > li:not(.active):not(.disabled) > a:hover,
html body.app.admin .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled):not(.active) {
  border-color: color-mix(in srgb, var(--kpf-fix-cobalt, #001bff) 35%, var(--kpf-fix-line, #d3d6e0)) !important;
  background: color-mix(in srgb, var(--kpf-fix-cobalt, #001bff) 6%, #fff) !important;
  color: var(--kpf-fix-cobalt, #001bff) !important;
}

html body.app.admin .pagination > .active > a,
html body.app.admin .pagination > .active > a:hover,
html body.app.admin .pagination > .active > a:focus,
html body.app.admin .pagination > .active > span,
html body.app.admin .dataTables_paginate .paginate_button.current,
html body.app.admin .dataTables_paginate .paginate_button.current > a,
html body.app.admin .dataTables_paginate .paginate_button.active > a,
html body.app.admin .dataTables_paginate li.active > a,
html body.app.admin .dataTables_paginate a.paginate_button.current {
  background: var(--kpf-fix-cobalt, #001bff) !important;
  border-color: var(--kpf-fix-cobalt, #001bff) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--kpf-fix-cobalt, #001bff) 28%, transparent) !important;
  cursor: default !important;
}

html body.app.admin .pagination > .disabled > a,
html body.app.admin .pagination > .disabled > span,
html body.app.admin .dataTables_paginate .paginate_button.disabled > a,
html body.app.admin .dataTables_paginate .paginate_button.disabled {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  border-color: var(--kpf-fix-line, #d3d6e0) !important;
  box-shadow: none !important;
}

html body.app.admin .kpf-dt-footer,
html body.app.admin #widget-tickets_report .kpf-dt-footer,
html body.app.admin #widget-tickets_report .dataTables_wrapper > .row:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  border-top: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  background: color-mix(in srgb, var(--kodex-bg-subtle, #f5f5f5) 40%, #fff) !important;
}

html body.app.admin .kpf-dt-footer .dataTables_info,
html body.app.admin #widget-tickets_report .dataTables_info {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  line-height: 1.35 !important;
}

/* Prev / Next labels stay readable */
html body.app.admin .dataTables_paginate .paginate_button.previous > a,
html body.app.admin .dataTables_paginate .paginate_button.next > a,
html body.app.admin .pagination > .previous > a,
html body.app.admin .pagination > .next > a {
  min-width: auto !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

/* ========== Cobalt fills → white text (active / primary CTAs) ========== */
html body.app.admin #wrapper a.kds-dash-quick__btn--primary,
html body.app.admin #wrapper a.kds-dash-quick__btn--primary:visited,
html body.app.admin #wrapper a.kds-dash-quick__btn--primary.kpf-nav-pending-link,
html body.app.admin .kds-dash-quick__btn--primary,
html body.app.admin #wrapper a.kdv3-btn--primary,
html body.app.admin #wrapper a.kdv3-btn--primary:active,
html body.app.admin #wrapper a.kdv3-btn--primary:visited,
html body.app.admin #wrapper a.kdv3-btn--primary.kpf-nav-pending-link,
html body.app.admin .kdv3-btn--primary,
html body.app.admin .kdv3-btn--primary:active,
html body.app.admin .kdv3-btn--primary:visited,
html body.app.admin .btn-primary,
html body.app.admin .btn-primary:active,
html body.app.admin .btn-primary:visited,
html body.app.admin .btn-info,
html body.app.admin a.btn-primary,
html body.app.admin a.btn-info,
html body.app.admin .pagination > .active > a,
html body.app.admin .pagination > .active > a:hover,
html body.app.admin .pagination > .active > a:focus,
html body.app.admin .pagination > .active > span,
html body.app.admin .dataTables_paginate .paginate_button.current,
html body.app.admin .dataTables_paginate .paginate_button.current > a,
html body.app.admin .dataTables_paginate .paginate_button.active > a,
html body.app.admin .nav-tabs > li.active > a,
html body.app.admin .nav-tabs > li.active > a:focus,
html body.app.admin .nav-tabs-segmented > li.active > a,
html body.app.admin .nav-tabs-segmented > li.active > a:focus,
html body.app.admin .nav-pills > li.active > a,
html body.app.admin .list-group-item.active,
html body.app.admin .kds-dash-toolbar__btn--active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Light mode: cobalt CTA / active segmented tab → white fill + cobalt text on hover */
html body.app.admin:not(.kodex-crm-admin--ui-dark) #wrapper a.kds-dash-quick__btn--primary:hover,
html body.app.admin:not(.kodex-crm-admin--ui-dark) #wrapper a.kds-dash-quick__btn--primary:focus,
html body.app.admin:not(.kodex-crm-admin--ui-dark) .kds-dash-quick__btn--primary:hover,
html body.app.admin:not(.kodex-crm-admin--ui-dark) #wrapper a.kdv3-btn--primary:hover,
html body.app.admin:not(.kodex-crm-admin--ui-dark) #wrapper a.kdv3-btn--primary:focus,
html body.app.admin:not(.kodex-crm-admin--ui-dark) .kdv3-btn--primary:hover,
html body.app.admin:not(.kodex-crm-admin--ui-dark) .kdv3-btn--primary:focus,
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,
html body.app.admin:not(.kodex-crm-admin--ui-dark) a.btn-primary:hover,
html body.app.admin:not(.kodex-crm-admin--ui-dark) a.btn-info:hover,
html body.app.admin:not(.kodex-crm-admin--ui-dark) .nav-tabs-segmented > li.active > a:hover,
html body.app.admin:not(.kodex-crm-admin--ui-dark) .nav-tabs > li.active > a:hover,
html body.app.admin:not(.kodex-crm-admin--ui-dark) .kds-dash-toolbar__btn--active:hover {
  background: #ffffff !important;
  border-color: var(--kodex-action-primary, #001bff) !important;
  color: var(--kodex-action-primary, #001bff) !important;
  -webkit-text-fill-color: var(--kodex-action-primary, #001bff) !important;
}

/* Proposal / estimate / invoice preview strip — white on cobalt */
html body.app.admin #wrapper .content .preview-tabs-top .nav-tabs > li.active > a,
html body.app.admin #wrapper .content .preview-tabs-top .nav-tabs > li.active > a:hover,
html body.app.admin #wrapper .content .preview-tabs-top .nav-tabs > li.active > a:focus,
html body.app.admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li.active > a,
html body.app.admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li.active > a:hover,
html body.app.admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li.active > a:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--kodex-action-primary, #001bff) !important;
  border-color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #wrapper a.kds-dash-quick__btn--primary,
html body.app.admin.kodex-crm-admin--ui-dark .btn-primary,
html body.app.admin.kodex-crm-admin--ui-dark .btn-info,
html body.app.admin.kodex-crm-admin--ui-dark .kds-dash-toolbar__btn--active {
  color: #fff !important;
}

/* Vertical centering — align only, do not reflow grids */
html body.app.admin #widget-todos .todo li .media,
html body.app.admin #widget-todos .finished-todos li .media,
html body.app.admin #widget-todos .unfinished-todos li .media {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body.app.admin #widget-todos .todo-date,
html body.app.admin #widget-todos .todo-date-finished {
  display: block !important;
  margin-top: 4px !important;
  color: var(--kpf-fix-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body.app.admin #widget-finance_overview .kpf-finance-head,
html body.app.admin #widget-finance_overview .kds-insp-gen__head {
  display: flex !important;
  align-items: center !important;
}

html body.app.admin #widget-finance_overview .kpf-finance-head__label,
html body.app.admin #widget-finance_overview .kds-insp-gen__head > p {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

html body.app.admin ._buttons .btn,
html body.app.admin .btn > .btn-with-tooltip {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

html body.app.admin #wrapper .content {
  min-width: 0 !important;
  max-width: 100% !important;
}

footer.footer .copyright-footer {
  color: var(--kpf-fix-muted) !important;
  font-size: 12px !important;
}

/* ========== Finance currency / year picker (compact, Kodex) ========== */
html body.app.admin #widget-finance_overview #invoices_total > .tw-inline-flex,
html body.app.admin #invoices_total > .tw-inline-flex {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 10px !important;
  box-sizing: border-box !important;
}

html body.app.admin #widget-finance_overview #invoices_total .simple-bootstrap-select,
html body.app.admin #invoices_total .simple-bootstrap-select {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html body.app.admin #widget-finance_overview #invoices_total .bootstrap-select,
html body.app.admin #invoices_total .bootstrap-select,
html body.app.admin #widget-finance_overview #invoices_total .bootstrap-select.fit-width,
html body.app.admin #invoices_total .bootstrap-select.fit-width {
  width: auto !important;
  min-width: 0 !important;
  max-width: 160px !important;
}

html body.app.admin #widget-finance_overview #invoices_total .bootstrap-select > .dropdown-toggle,
html body.app.admin #invoices_total .bootstrap-select > .dropdown-toggle,
html body.app.admin #widget-finance_overview #invoices_total .bootstrap-select > .dropdown-toggle.btn-default,
html body.app.admin #invoices_total .bootstrap-select > .dropdown-toggle.btn-default {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 72px !important;
  max-width: 160px !important;
  min-height: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 26px 0 10px !important;
  border: 1px solid var(--kpf-fix-line) !important;
  border-radius: var(--kpf-fix-radius) !important;
  background: var(--kpf-fix-surface) !important;
  color: var(--kpf-fix-sec) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body.app.admin #widget-finance_overview #invoices_total .bootstrap-select.open > .dropdown-toggle,
html body.app.admin #invoices_total .bootstrap-select.open > .dropdown-toggle,
html body.app.admin #widget-finance_overview #invoices_total .bootstrap-select > .dropdown-toggle:focus,
html body.app.admin #invoices_total .bootstrap-select > .dropdown-toggle:focus {
  border-color: var(--kpf-fix-cobalt) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpf-fix-cobalt) 14%, transparent) !important;
  outline: none !important;
}

html body.app.admin #widget-finance_overview #invoices_total .bootstrap-select .filter-option,
html body.app.admin #invoices_total .bootstrap-select .filter-option {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.app.admin #widget-finance_overview #invoices_total .bootstrap-select .filter-option-inner,
html body.app.admin #invoices_total .bootstrap-select .filter-option-inner,
html body.app.admin #widget-finance_overview #invoices_total .bootstrap-select .filter-option-inner-inner,
html body.app.admin #invoices_total .bootstrap-select .filter-option-inner-inner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

html body.app.admin #widget-finance_overview #invoices_total .bootstrap-select .caret,
html body.app.admin #invoices_total .bootstrap-select .caret {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

html body.app.admin #widget-finance_overview #invoices_total .bootstrap-select .dropdown-menu,
html body.app.admin #invoices_total .bootstrap-select .dropdown-menu {
  min-width: 100% !important;
  border-radius: var(--kpf-fix-radius) !important;
  border-color: var(--kpf-fix-line) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, #14141a 8%, transparent) !important;
  margin-top: 4px !important;
}

/* ========== User data widget: task table polish ========== */
html body.app.admin #widget-user_data .kpf-user-widget__viewall,
html body.app.admin #widget-user_data .tab-pane > a.mbot20,
html body.app.admin #widget-user_data .tab-pane > a.inline-block.full-width {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: max-content !important;
  margin: 0 !important;
  padding: 6px 11px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  background: #fff !important;
  color: var(--kodex-action-primary, #001bff) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  float: none !important;
  white-space: nowrap !important;
}

html body.app.admin #widget-user_data .kpf-user-widget__viewall:hover,
html body.app.admin #widget-user_data .tab-pane > a.mbot20:hover {
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 6%, #fff) !important;
  border-color: color-mix(in srgb, var(--kodex-action-primary, #001bff) 35%, var(--kodex-border-default, #d3d6e0)) !important;
  text-decoration: none !important;
}

/* Quiet pane toolbar: search + View all (no page-length noise) */
html body.app.admin #widget-user_data .kpf-user-widget__pane-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  background: color-mix(in srgb, var(--kodex-bg-subtle, #f5f5f5) 55%, #fff) !important;
}

html body.app.admin #widget-user_data .kpf-user-widget__pane-tools {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body.app.admin #widget-user_data .kpf-user-widget__pane-bar .dataTables_filter {
  float: none !important;
  margin: 0 !important;
}

html body.app.admin #widget-user_data .kpf-user-widget__pane-bar .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
}

html body.app.admin #widget-user_data .kpf-user-widget__pane-bar .dataTables_filter input {
  min-width: 180px !important;
  width: min(240px, 48vw) !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  box-shadow: none !important;
}

html body.app.admin #widget-user_data .kpf-user-widget__pane-bar .dataTables_filter input:focus {
  border-color: var(--kodex-action-primary, #001bff) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kodex-action-primary, #001bff) 14%, transparent) !important;
}

html body.app.admin #widget-user_data .kpf-user-widget__pane-bar .dataTables_filter input::placeholder {
  color: var(--kodex-text-muted, #6e7180) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

html body.app.admin #widget-user_data .kpf-user-widget__length-hide,
html body.app.admin #widget-user_data .dataTables_length {
  display: none !important;
}

/* Only hide DT top row after we moved search into pane-bar */
html body.app.admin #widget-user_data .kpf-user-widget__pane--ready .kpf-dt-toolbar,
html body.app.admin #widget-user_data .kpf-user-widget__pane--ready .dataTables_wrapper > .row:first-child,
html body.app.admin #widget-user_data .kpf-user-widget__pane--ready .dt-bootstrap .row:first-child {
  display: none !important;
}

/* Compact DataTable chrome inside the widget */
html body.app.admin #widget-user_data .dataTables_wrapper,
html body.app.admin #widget-user_data .dataTables_wrapper.kpf-dt {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.app.admin #widget-user_data .dataTables_length,
html body.app.admin #widget-user_data .dataTables_filter,
html body.app.admin #widget-user_data .dt-buttons {
  float: none !important;
  margin: 0 !important;
}

html body.app.admin #widget-user_data .dataTables_length label,
html body.app.admin #widget-user_data .dataTables_filter label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  gap: 6px !important;
}

html body.app.admin #widget-user_data .dataTables_length select,
html body.app.admin #widget-user_data .dataTables_filter input {
  min-height: 30px !important;
  height: 30px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  border-color: var(--kodex-border-default, #d3d6e0) !important;
  background: var(--kodex-bg-subtle, #f7f7f7) !important;
  box-shadow: none !important;
}

html body.app.admin #widget-user_data .dataTables_filter input {
  width: min(140px, 36vw) !important;
}

/* Soften / hide noisy export in widget density */
html body.app.admin #widget-user_data .dt-buttons .buttons-collection,
html body.app.admin #widget-user_data .dt-buttons .buttons-colvis,
html body.app.admin #widget-user_data .btn-dt-export,
html body.app.admin #widget-user_data .dt-button.buttons-collection {
  display: none !important;
}

html body.app.admin #widget-user_data .dt-button,
html body.app.admin #widget-user_data .kpf-dt .dt-button {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
}

html body.app.admin #widget-user_data .kpf-dt-table-host,
html body.app.admin #widget-user_data .dataTables_scroll,
html body.app.admin #widget-user_data .table-responsive {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  overflow: auto !important;
}

html body.app.admin #widget-user_data table.dataTable,
html body.app.admin #widget-user_data table.table,
html body.app.admin #widget-user_data .kpf-dt-table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

/* Hide bulk checkbox column in dashboard density */
html body.app.admin #widget-user_data table.dataTable thead th.not_visible,
html body.app.admin #widget-user_data table.dataTable tbody td:has(> .checkbox),
html body.app.admin #widget-user_data table.dataTable thead th:has(.mass_select_all_wrap),
html body.app.admin #widget-user_data table.dataTable tbody td:has(.checkbox) {
  display: none !important;
}

html body.app.admin #widget-user_data table.dataTable thead th,
html body.app.admin #widget-user_data table.table thead th,
html body.app.admin #widget-user_data .kpf-dt-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  padding: 10px 14px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  background: #fff !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 0 var(--kodex-border-subtle, #edeff7) !important;
}

html body.app.admin #widget-user_data table.dataTable tbody td,
html body.app.admin #widget-user_data table.table tbody td,
html body.app.admin #widget-user_data .kpf-dt-table tbody td {
  padding: 13px 14px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  vertical-align: middle !important;
  background: transparent !important;
  line-height: 1.35 !important;
}

html body.app.admin #widget-user_data table.dataTable tbody tr:hover > td,
html body.app.admin #widget-user_data table.table tbody tr:hover > td {
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 4%, #fff) !important;
}

html body.app.admin #widget-user_data table.dataTable tbody tr:last-child > td,
html body.app.admin #widget-user_data table.table tbody tr:last-child > td {
  border-bottom: 0 !important;
}

/* Task name hierarchy */
html body.app.admin #widget-user_data .main-tasks-table-href-name {
  display: block !important;
  max-width: min(420px, 48vw) !important;
  margin: 0 0 2px !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: var(--kodex-text-primary, #14141a) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.app.admin #widget-user_data .main-tasks-table-href-name:hover {
  color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin #widget-user_data .task-table-related {
  display: block !important;
  max-width: min(420px, 48vw) !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.app.admin #widget-user_data .task-table-related:hover {
  color: var(--kodex-action-primary, #001bff) !important;
}

/* Row actions → quiet chips on hover */
html body.app.admin #widget-user_data .row-options {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.14s ease, max-height 0.14s ease, margin-top 0.14s ease !important;
}

html body.app.admin #widget-user_data table.dataTable tbody tr:hover .row-options,
html body.app.admin #widget-user_data table.dataTable tbody tr:focus-within .row-options {
  opacity: 1 !important;
  max-height: 40px !important;
  pointer-events: auto !important;
}

html body.app.admin #widget-user_data .row-options > span.tw-text-neutral-300 {
  display: none !important;
}

html body.app.admin #widget-user_data .row-options a,
html body.app.admin #widget-user_data .row-options > span > a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html body.app.admin #widget-user_data .row-options a:hover,
html body.app.admin #widget-user_data .row-options > span > a:hover {
  border-color: color-mix(in srgb, var(--kodex-action-primary, #001bff) 40%, var(--kodex-border-default, #d3d6e0)) !important;
  color: var(--kodex-action-primary, #001bff) !important;
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 5%, #fff) !important;
}

html body.app.admin #widget-user_data .row-options a.text-danger,
html body.app.admin #widget-user_data .row-options a.task-delete {
  color: var(--kodex-crm-stat-negative, #c41e3a) !important;
}

html body.app.admin #widget-user_data .row-options a.tasks-table-start-timer.text-success,
html body.app.admin #widget-user_data .row-options a.tasks-table-start-timer {
  color: var(--kodex-crm-stat-positive, #0d7a4e) !important;
}

html body.app.admin #widget-user_data table.dataTable tbody td a,
html body.app.admin #widget-user_data table.table tbody td a {
  color: var(--kodex-text-primary, #14141a) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

html body.app.admin #widget-user_data table.dataTable tbody td a:hover {
  color: var(--kodex-action-primary, #001bff) !important;
}

/* Status / priority / tags */
html body.app.admin #widget-user_data .label,
html body.app.admin #widget-user_data a.label,
html body.app.admin #widget-user_data .badge:not(.nav-tabs .badge) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 24px !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html body.app.admin #widget-user_data .label .chevron,
html body.app.admin #widget-user_data a.label .chevron {
  width: 8px !important;
  height: 8px !important;
  opacity: 0.65 !important;
}

html body.app.admin #widget-user_data .tags-labels .label-tag,
html body.app.admin #widget-user_data .tag,
html body.app.admin #widget-user_data .label-tag {
  margin: 0 4px 0 0 !important;
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  color: var(--kodex-text-secondary, #40424d) !important;
}

html body.app.admin #widget-user_data td:has([id^='tableTaskPriority-']) a,
html body.app.admin #widget-user_data [id^='tableTaskPriority-'] {
  font-size: 12px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

/* # id column — quiet tabular. ONLY on the tasks table: other tabs
   (projects, reminders, …) put a real title in the first column, and a
   global :first-child max-width:56px crushed Project Name to ~16px. */
html body.app.admin #widget-user_data table#tasks tbody td:first-child,
html body.app.admin #widget-user_data table#tasks thead th:first-child {
  width: 48px !important;
  max-width: 56px !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

html body.app.admin #widget-user_data table#tasks tbody td:first-child a {
  color: var(--kodex-text-muted, #6e7180) !important;
  font-weight: 600 !important;
}

/* Projects tab — Project Name is column 1; give it real width and keep
   the link on one readable line (never a 16×258 vertical strip). */
html body.app.admin #widget-user_data #home_my_projects table.dataTable thead th:first-child,
html body.app.admin #widget-user_data #home_my_projects table.dataTable thead th[aria-label^='Project'],
html body.app.admin #widget-user_data #home_my_projects table.dataTable thead th[aria-label^='Nombre'] {
  width: 46% !important;
  max-width: none !important;
}

html body.app.admin #widget-user_data #home_my_projects table.dataTable tbody td:first-child {
  width: 46% !important;
  max-width: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  vertical-align: middle !important;
}

html body.app.admin #widget-user_data #home_my_projects table.dataTable tbody td:first-child a {
  display: inline !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  white-space: normal !important;
  color: var(--kodex-text-primary, #14141a) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

html body.app.admin #widget-user_data #home_my_projects table.dataTable tbody td:first-child a:hover {
  color: var(--kodex-action-primary, #001bff) !important;
}

/* Dates — muted tabular */
html body.app.admin #widget-user_data table.dataTable tbody td:nth-child(5),
html body.app.admin #widget-user_data table.dataTable tbody td:nth-child(6),
html body.app.admin #widget-user_data table.dataTable tbody td.duedate {
  font-variant-numeric: tabular-nums !important;
  font-size: 12px !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  white-space: nowrap !important;
}


/* ========== DS MarketShareDonut — minimal circular charts ========== */
html body.app.admin .kpf-kodex-chart-host--circular,
html body.app.admin .kpf-kodex-chart-host[data-kpf-minimal-donut="1"] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body.app.admin .kds-insp-market-donut--minimal {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.app.admin .kds-insp-market-donut--minimal .kds-insp-market-donut__head--quiet {
  display: none !important;
}

html body.app.admin .kds-insp-market-donut--minimal .kds-insp-hint,
html body.app.admin .kds-insp-market-donut--minimal .kds-insp-card-dark__menu {
  display: none !important;
}

html body.app.admin .kds-insp-market-donut--minimal .kds-insp-market-donut__body {
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr) !important;
  gap: 14px 18px !important;
  align-items: center !important;
}

html body.app.admin .kds-insp-market-donut--minimal .kds-insp-market-donut__chart {
  width: 200px !important;
  height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  min-width: 200px !important;
  min-height: 200px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 200px !important;
  margin: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body.app.admin .kds-insp-market-donut--minimal .kds-insp-market-donut__chart svg {
  display: block !important;
  width: 200px !important;
  height: 200px !important;
  min-width: 200px !important;
  min-height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  aspect-ratio: 1 / 1 !important;
}

html body.app.admin .kds-insp-market-donut--minimal .kds-insp-market-donut__legend {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: 260px !important;
  overflow-y: auto !important;
}

html body.app.admin .kds-insp-market-donut--minimal .kds-insp-market-donut__legend > li {
  margin: 0 !important;
  padding: 0 !important;
}

html body.app.admin .kds-insp-market-donut--minimal .kds-insp-market-donut__legend-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  border-radius: 4px !important;
  background: var(--kodex-bg-surface, #fff) !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body.app.admin .kds-insp-market-donut--minimal .kds-insp-market-donut__legend-btn:hover,
html body.app.admin .kds-insp-market-donut--minimal .kds-insp-market-donut__legend-btn--on {
  border-color: color-mix(in srgb, var(--kodex-action-primary, #001bff) 28%, var(--kodex-border-default, #d3d6e0)) !important;
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 5%, #fff) !important;
}

html body.app.admin .kds-insp-market-donut--minimal .kds-insp-market-donut__legend-btn--dim {
  opacity: 0.42 !important;
}

html body.app.admin #widget-leads_chart .kpf-kodex-chart-host,
html body.app.admin #widget-projects_chart .kpf-kodex-chart-host,
html body.app.admin #widget-tickets_chart .kpf-kodex-chart-host,
html body.app.admin #widget-saas_top_stats .kpf-kodex-chart-host--circular {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.app.admin .kpf-status-donut[data-kpf-replaced-shell="1"] {
  display: none !important;
}

@media (max-width: 720px) {
  html body.app.admin .kds-insp-market-donut--minimal .kds-insp-market-donut__body {
    grid-template-columns: 1fr !important;
  }
}

/* ========== Base dashboard: no overflow / no collision ========== */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > [id^="widget-"],
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel_s,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel-body {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel_s {
  overflow: hidden !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel-body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .btn,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .form-control,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .bootstrap-select,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas input,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas select {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas img,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas svg {
  max-width: 100% !important;
  height: auto !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__btn,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__card {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hero: force minimal MarketShare side-by-side (beats surfaces.deploy stack) */
html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero__chart .kds-insp-market-donut--minimal .kds-insp-market-donut__body,
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart .kds-insp-market-donut--minimal .kds-insp-market-donut__body {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(120px, 0.9fr) !important;
  justify-items: stretch !important;
  align-items: center !important;
  gap: 14px !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero__chart .kds-insp-market-donut--minimal .kds-insp-market-donut__chart {
  width: min(220px, 100%) !important;
  max-width: 220px !important;
  min-width: 160px !important;
  min-height: 160px !important;
  margin: 0 auto !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero__chart .kds-insp-market-donut--minimal .kds-insp-market-donut__legend {
  width: 100% !important;
  max-width: none !important;
}

/* Proposal / contract public tabs — keep remapped icons vertically aligned with labels */
#proposal-wrapper .proposal-html-tabs .nav-tabs > li > a.tw-flex,
.proposal-html-tabs .nav-tabs > li > a.tw-flex,
.contract-html-tabs .nav-tabs > li > a.tw-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem;
}

#proposal-wrapper .proposal-html-tabs .nav-tabs > li > a .kpf-icon-host,
#proposal-wrapper .proposal-html-tabs .nav-tabs > li > a > i,
.proposal-html-tabs .nav-tabs > li > a .kpf-icon-host,
.proposal-html-tabs .nav-tabs > li > a > i,
.contract-html-tabs .nav-tabs > li > a .kpf-icon-host,
.contract-html-tabs .nav-tabs > li > a > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  line-height: 0 !important;
  vertical-align: middle !important;
}

#proposal-wrapper .proposal-html-tabs .nav-tabs > li > a .kpf-icon,
#proposal-wrapper .proposal-html-tabs .nav-tabs > li > a svg.kpf-icon,
.proposal-html-tabs .nav-tabs > li > a .kpf-icon,
.proposal-html-tabs .nav-tabs > li > a svg.kpf-icon,
.contract-html-tabs .nav-tabs > li > a .kpf-icon,
.contract-html-tabs .nav-tabs > li > a svg.kpf-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

#proposal-wrapper .proposal-html-tabs .nav-tabs > li > a > span,
.proposal-html-tabs .nav-tabs > li > a > span,
.contract-html-tabs .nav-tabs > li > a > span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}