/* KpfDataTable — redesign from zero
   Rules: 100% width, table-layout:fixed, NO horizontal scroll/overflow */

:root {
  --kpf-dt-pad: 16px;
  --kpf-dt-border: var(--kodex-border-default, #d3d6e0);
  --kpf-dt-border-soft: color-mix(in srgb, var(--kodex-border-default, #d3d6e0) 55%, transparent);
  --kpf-dt-ink: var(--kodex-text-primary, #14141a);
  --kpf-dt-muted: var(--kodex-text-muted, #6e7180);
  --kpf-dt-secondary: var(--kodex-text-secondary, #40424d);
  --kpf-dt-surface: var(--kodex-bg-surface, #fff);
  --kpf-dt-subtle: var(--kodex-bg-subtle, #f7f7f7);
  --kpf-dt-cobalt: var(--kodex-action-primary, #001bff);
  --kpf-dt-radius: 4px;
}

/* —— Panel —— */
html body.app.admin .panel_s.kpf-dt-panel:not(.kpf-client-panel):not(:has(.client-form)),
html body.app.admin .panel_s:has(.dataTables_wrapper):not(.kpf-client-panel):not(:has(.client-form)),
html body.app.admin .panel_s:has(.table-clients):not(.kpf-client-panel):not(:has(.client-form)),
html body.app.admin .panel_s.tw-mt-2:not(.kpf-client-panel):not(:has(.client-form)) {
  background: var(--kpf-dt-surface) !important;
  border: 1px solid var(--kpf-dt-border) !important;
  border-radius: var(--kpf-dt-radius) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 8px !important;
}

html body.app.admin .panel_s.kpf-dt-panel:not(.kpf-client-panel):not(:has(.client-form)) > .panel-body,
html body.app.admin .kpf-dt-panel-body:not(.kpf-client-panel .panel-body),
html body.app.admin .panel_s:has(.dataTables_wrapper):not(.kpf-client-panel):not(:has(.client-form)) > .panel-body,
html body.app.admin .panel_s.tw-mt-2:not(.kpf-client-panel):not(:has(.client-form)) > .panel-body {
  padding: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

html body.app.admin .kpf-dt-source-btn,
html body.app.admin .panel-body > .bulk-actions-btn.table-btn,
html body.app.admin .panel-body > a.table-btn.hide {
  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;
  border: 0 !important;
}

html body.app.admin .kpf-dt-table-full,
html body.app.admin .panel-table-full {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

/* —— Wrapper —— */
html body.app.admin .dataTables_wrapper.kpf-dt,
html body.app.admin .dataTables_wrapper {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-family: var(--kodex-font-family-sans, Satoshi, system-ui, sans-serif);
}

html body.app.admin .kpf-dt > .row:not(:has(table)):not(:has(.kpf-dt-table-host)) {
  display: none !important;
}

/* —— Toolbar —— */
html body.app.admin .kpf-dt-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px var(--kpf-dt-pad) !important;
  border-bottom: 1px solid var(--kpf-dt-border-soft) !important;
  background: var(--kpf-dt-surface) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body.app.admin .kpf-dt-toolbar__start,
html body.app.admin .kpf-dt-toolbar__end {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

html body.app.admin .kpf-dt-toolbar__end {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

/* Split-view list column: length + Export on row 1, search full-width on row 2 */
html body.app.admin #small-table .kpf-dt-toolbar,
html body.app.admin .small-table #small-table .kpf-dt-toolbar,
html body.app.admin.small-table #small-table .kpf-dt-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) !important;
  grid-template-areas:
    'length . export'
    'filter filter filter' !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  flex-wrap: unset !important;
}

html body.app.admin #small-table .kpf-dt-toolbar__start {
  grid-area: length !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex: unset !important;
}

html body.app.admin #small-table .kpf-dt-toolbar__end {
  display: contents !important;
  margin: 0 !important;
  flex: unset !important;
  max-width: none !important;
}

html body.app.admin #small-table .kpf-dt-toolbar__end .dataTables_filter,
html body.app.admin #small-table .kpf-dt-toolbar .dataTables_filter {
  grid-area: filter !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  float: none !important;
}

html body.app.admin #small-table .kpf-dt-toolbar__end .dt-buttons,
html body.app.admin #small-table .kpf-dt-toolbar .dt-buttons {
  grid-area: export !important;
  justify-self: end !important;
  position: relative !important;
  float: none !important;
  margin: 0 !important;
}

html body.app.admin #small-table .kpf-dt .dataTables_length {
  position: relative !important;
  float: none !important;
}

html body.app.admin #small-table .kpf-dt .dataTables_length label {
  white-space: nowrap !important;
  max-width: none !important;
}

html body.app.admin #small-table .kpf-dt .dataTables_length select {
  width: auto !important;
  min-width: 64px !important;
  max-width: 88px !important;
}

html body.app.admin #small-table .kpf-dt .dataTables_filter label {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0 !important;
}

html body.app.admin #small-table .kpf-dt .dataTables_filter .input-group {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

html body.app.admin #small-table .kpf-dt .dataTables_filter input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body.app.admin .kpf-dt .dataTables_length,
html body.app.admin .kpf-dt .dataTables_filter {
  float: none !important;
  margin: 0 !important;
  color: var(--kpf-dt-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  max-width: 100% !important;
}

html body.app.admin .kpf-dt .dataTables_length label,
html body.app.admin .kpf-dt .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  max-width: 100% !important;
}

html body.app.admin .kpf-dt .dataTables_filter input,
html body.app.admin .kpf-dt .dataTables_length select {
  min-height: 34px !important;
  height: 34px !important;
  max-width: 100% !important;
  border: 1px solid var(--kpf-dt-border) !important;
  border-radius: 4px !important;
  background: var(--kpf-dt-surface) !important;
  color: var(--kpf-dt-ink) !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  outline: none !important;
}

html body.app.admin .kpf-dt .dataTables_filter input {
  width: min(200px, 42vw) !important;
  min-width: 0 !important;
}

/* Search + addon: match system form control height (40px) */
html body.app.admin .kpf-dt .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: stretch !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 40px !important;
}

html body.app.admin .kpf-dt .dataTables_filter .input-group > input.form-control,
html body.app.admin .kpf-dt .dataTables_filter .input-group > input.input-sm {
  height: 40px !important;
  min-height: 40px !important;
  width: min(200px, 42vw) !important;
  border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

html body.app.admin .kpf-dt .dataTables_filter .input-group > .input-group-addon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-height: 40px !important;
  width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--kpf-dt-border) !important;
  border-radius: 0 4px 4px 0 !important;
  background: var(--kpf-dt-subtle, #f4f5f8) !important;
  color: var(--kpf-dt-muted) !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

html body.app.admin .kpf-dt .dataTables_filter .input-group > input.form-control:focus,
html body.app.admin .kpf-dt .dataTables_filter .input-group > input.input-sm:focus {
  border-color: var(--kpf-dt-cobalt) !important;
  z-index: 2;
}

html body.app.admin .kpf-dt .dataTables_filter .input-group:focus-within > .input-group-addon {
  border-color: var(--kpf-dt-cobalt) !important;
}

html body.app.admin .kpf-dt .dataTables_filter input:focus,
html body.app.admin .kpf-dt .dataTables_length select:focus {
  border-color: var(--kpf-dt-cobalt) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpf-dt-cobalt) 18%, transparent) !important;
}

html body.app.admin .kpf-dt .dt-buttons {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  float: none !important;
  margin: 0 !important;
  max-width: 100% !important;
}

html body.app.admin .kpf-dt .dt-button,
html body.app.admin .kpf-dt .kpf-dt-action,
html body.app.admin .kpf-dt .btn-default-dt-options {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 6px 11px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  border: 1px solid var(--kpf-dt-border) !important;
  background: var(--kpf-dt-surface) !important;
  color: var(--kpf-dt-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

html body.app.admin .kpf-dt .dt-button:hover,
html body.app.admin .kpf-dt .kpf-dt-action:hover {
  color: var(--kpf-dt-cobalt) !important;
  border-color: color-mix(in srgb, var(--kpf-dt-cobalt) 35%, var(--kpf-dt-border)) !important;
  background: color-mix(in srgb, var(--kpf-dt-cobalt) 6%, #fff) !important;
}

html body.app.admin .kpf-dt .kpf-dt-action--reload {
  min-width: 34px !important;
  padding-inline: 9px !important;
}

/* —— Table host: NEVER scroll sideways —— */
html body.app.admin .kpf-dt-table-host {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  background: var(--kpf-dt-surface);
}

html body.app.admin .kpf-dt table.dataTable,
html body.app.admin .kpf-dt .kpf-dt-table,
html body.app.admin table.dataTable,
html body.app.admin table.table-clients {
  table-layout: fixed !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
  font-size: 13px !important;
  color: var(--kpf-dt-ink) !important;
}

html body.app.admin .kpf-dt table.dataTable.no-footer {
  border-bottom: 0 !important;
}

/* Headers — wrap, no nowrap forcing width */
html body.app.admin .kpf-dt table thead th,
html body.app.admin table.dataTable thead th,
html body.app.admin .table > thead > tr > th {
  color: var(--kpf-dt-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: var(--kpf-dt-subtle) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kpf-dt-border) !important;
  padding: 10px 8px !important;
  vertical-align: bottom !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

/* Cells — wrap everything to fit */
html body.app.admin .kpf-dt table tbody td,
html body.app.admin table.dataTable tbody td {
  padding: 10px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kpf-dt-border-soft) !important;
  vertical-align: top !important;
  color: var(--kpf-dt-secondary) !important;
  background: transparent !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
  max-width: 0; /* forces fixed-layout columns to respect % widths */
}

html body.app.admin .kpf-dt table tbody tr:last-child > td {
  border-bottom: 0 !important;
}

html body.app.admin .kpf-dt table tbody tr:hover {
  background: color-mix(in srgb, var(--kpf-dt-cobalt) 4%, var(--kpf-dt-subtle)) !important;
}

html body.app.admin .kpf-dt table tbody tr.selected {
  background: color-mix(in srgb, var(--kpf-dt-cobalt) 8%, #fff) !important;
}

/* —— Tickets list (checkbox + # + subject + …) —— */
html body.app.admin .kpf-dt-panel.kpf-dt--tickets,
html body.app.admin .kpf-dt-panel.kpf-dt--tickets .kpf-dt-panel-body,
html body.app.admin .kpf-dt--tickets .kpf-dt-table-host {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets,
html body.app.admin .kpf-dt--tickets table.table-tickets {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 760px !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th,
html body.app.admin .kpf-dt--tickets table.table-tickets thead th {
  vertical-align: middle !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td,
html body.app.admin .kpf-dt--tickets table.table-tickets tbody td {
  max-width: 0 !important;
  overflow: hidden !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  vertical-align: middle !important;
  color: var(--kpf-dt-ink) !important;
}

/* Col budget with bulk checkbox (list.php) */
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(1),
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(1) {
  width: 3% !important;
  max-width: 42px !important;
  padding-left: 10px !important;
  padding-right: 4px !important;
  overflow: visible !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(2),
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(2) {
  width: 5% !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
  color: var(--kpf-dt-muted) !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(2) a {
  color: var(--kpf-dt-muted) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(2) a:hover {
  color: var(--kpf-dt-cobalt) !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(3),
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(3) {
  width: 24% !important;
}

/* Subject: avatar + truncated title + compact row-options */
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(3) > a.pull-left {
  float: left !important;
  margin-right: 8px !important;
  margin-top: 2px !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(3) > a.valign,
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(3) > a.tw-truncate,
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(3) a.valign.tw-truncate {
  display: block !important;
  max-width: 100% !important;
  width: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--kodex-text-primary, #14141a) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(3) > a.valign:hover,
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(3) a.valign.tw-truncate:hover {
  color: var(--kpf-dt-cobalt) !important;
  text-decoration: underline !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(3) .row-options {
  clear: both !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px 0 !important;
  margin-top: 4px !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: hidden !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(3) .row-options a {
  white-space: nowrap !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(4),
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(4) {
  width: 9% !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(5),
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(5) {
  width: 10% !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(6),
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(6) {
  width: 8% !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(7),
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(7) {
  width: 12% !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(7) a {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--kodex-text-primary, #14141a) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(7) a:hover {
  color: var(--kpf-dt-cobalt) !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(8),
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(8) {
  width: 9% !important;
  white-space: nowrap !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(9),
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(9) {
  width: 8% !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(10),
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(10) {
  width: 8% !important;
  white-space: nowrap !important;
  color: var(--kpf-dt-muted) !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(11),
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(11) {
  width: 7% !important;
  white-space: nowrap !important;
  color: var(--kpf-dt-muted) !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td .label,
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td .badge,
html body.app.admin .kpf-dt--tickets table.table-tickets tbody td .label,
html body.app.admin .kpf-dt--tickets table.table-tickets tbody td .badge {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td .tag,
html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td .tags-labels {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  max-width: 100% !important;
}

/* Hide lower-priority ticket columns on smaller viewports */
@media (max-width: 1200px) {
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(6),
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(6) {
    display: none !important;
  }
}

@media (max-width: 992px) {
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets,
  html body.app.admin .kpf-dt--tickets table.table-tickets {
    min-width: 640px !important;
  }

  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(4),
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(4),
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(9),
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(9) {
    display: none !important;
  }
}

@media (max-width: 768px) {
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets,
  html body.app.admin .kpf-dt--tickets table.table-tickets {
    min-width: 520px !important;
  }

  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(5),
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(5),
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(10),
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(10),
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(11),
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(11) {
    display: none !important;
  }

  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(3),
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(3) {
    width: 42% !important;
  }
}

@media (max-width: 560px) {
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets,
  html body.app.admin .kpf-dt--tickets table.table-tickets {
    min-width: 400px !important;
  }

  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets thead th:nth-child(7),
  html body.app.admin .kpf-dt--tickets table.kpf-dt-table--tickets tbody td:nth-child(7) {
    display: none !important;
  }
}

/* Clients column budget (9 cols) — fits ~1100px with no scroll */
html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(1),
html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(1) {
  width: 3.5% !important;
  max-width: 40px !important;
  padding-left: 10px !important;
  padding-right: 4px !important;
}

html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(2),
html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(2) {
  width: 5% !important;
  color: var(--kpf-dt-muted) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
}

html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(3),
html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(3) {
  width: 18% !important;
}

html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(4),
html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(4) {
  width: 12% !important;
}

html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(5),
html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(5) {
  width: 16% !important;
}

html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(6),
html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(6) {
  width: 10% !important;
}

html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(7),
html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(7) {
  width: 8% !important;
  text-align: center !important;
}

html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(8),
html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(8) {
  width: 14% !important;
}

html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(9),
html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(9) {
  width: 13.5% !important;
}

/* Links */
html body.app.admin .kpf-dt table tbody a:not(.btn):not(.label):not(.badge),
html body.app.admin .kpf-dt table tbody a.tw-font-medium {
  color: var(--kpf-dt-ink) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html body.app.admin .kpf-dt table tbody a:not(.btn):hover {
  color: var(--kpf-dt-cobalt) !important;
}

html body.app.admin .kpf-dt .row-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px 6px !important;
  margin-top: 4px !important;
  font-size: 11px !important;
  color: var(--kpf-dt-muted) !important;
}

html body.app.admin .kpf-dt .row-options a {
  color: var(--kpf-dt-muted) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

html body.app.admin .kpf-dt .row-options a:hover {
  color: var(--kpf-dt-cobalt) !important;
}

html body.app.admin .kpf-dt .row-options .text-danger {
  color: var(--kodex-feedback-error, #c62828) !important;
}

/* On/off switch: keep compact */
html body.app.admin .kpf-dt .onoffswitch {
  margin: 0 auto !important;
  transform: scale(0.92);
  transform-origin: center;
}

/* —— Footer —— */
html body.app.admin .kpf-dt-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px var(--kpf-dt-pad) 12px !important;
  border-top: 1px solid var(--kpf-dt-border-soft) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body.app.admin .kpf-dt .dataTables_info,
html body.app.admin .kpf-dt .dataTables_paginate {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--kpf-dt-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  max-width: 100% !important;
}

html body.app.admin .kpf-dt .dataTables_paginate {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
}

html body.app.admin .kpf-dt .dataTables_paginate .paginate_button {
  min-width: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--kpf-dt-secondary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body.app.admin .kpf-dt .dataTables_paginate .paginate_button.current,
html body.app.admin .kpf-dt .dataTables_paginate .paginate_button.current:hover,
html body.app.admin .kpf-dt .dataTables_paginate .paginate_button.active,
html body.app.admin .kpf-dt .dataTables_paginate .paginate_button.active > a,
html body.app.admin .kpf-dt .dataTables_paginate li.active > a,
html body.app.admin .pagination > .active > a,
html body.app.admin .pagination > .active > a:hover,
html body.app.admin .pagination > .active > span {
  background: var(--kpf-dt-cobalt) !important;
  border-color: var(--kpf-dt-cobalt) !important;
  color: #fff !important;
}

/* Empty shells after table reparent — never paint a 1px bordered strip */
html body.app.admin .dataTables_wrapper > .table-responsive:not(:has(table)),
html body.app.admin .kpf-dt > .table-responsive:not(:has(table)) {
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

html body.app.admin .kpf-dt .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: var(--kpf-dt-subtle) !important;
  border-color: var(--kpf-dt-border) !important;
}

/* Kill any leftover DataTables scroll containers */
html body.app.admin .kpf-dt .dataTables_scroll,
html body.app.admin .kpf-dt .dataTables_scrollHead,
html body.app.admin .kpf-dt .dataTables_scrollBody,
html body.app.admin .kpf-dt .dataTables_scrollFoot,
html body.app.admin .kpf-dt-table-host,
html body.app.admin .kpf-dt-panel,
html body.app.admin .kpf-dt-panel-body {
  overflow-x: hidden !important;
}

html body.app.admin .kpf-dt .dataTables_scrollHeadInner,
html body.app.admin .kpf-dt .dataTables_scrollHeadInner table,
html body.app.admin .kpf-dt .dataTables_scrollBody table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Narrow: drop lower-priority columns so the rest stay readable */
@media (max-width: 1100px) {
  html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(6),
  html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(6) {
    display: none !important;
  }
}

@media (max-width: 900px) {
  html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(8),
  html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(8),
  html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(9),
  html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(9) {
    display: none !important;
  }

  :root {
    --kpf-dt-pad: 12px;
  }
}

@media (max-width: 640px) {
  html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients thead th:nth-child(4),
  html body.app.admin .kpf-dt--clients table.kpf-dt-table--clients tbody td:nth-child(4) {
    display: none !important;
  }

  html body.app.admin .kpf-dt .dataTables_filter input {
    width: min(160px, 55vw) !important;
  }
}

/* ========== Clients: Table / Card view ========== */
html body.app.admin .kpf-dt-view-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 3px !important;
  border: 1px solid var(--kpf-dt-border) !important;
  border-radius: 4px !important;
  background: var(--kpf-dt-subtle) !important;
}

html body.app.admin .kpf-dt-view-toggle__btn {
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--kpf-dt-secondary) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 7px 12px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

html body.app.admin .kpf-dt-view-toggle__btn:hover {
  color: var(--kpf-dt-ink) !important;
}

html body.app.admin .kpf-dt-view-toggle__btn--active {
  background: var(--kpf-dt-surface) !important;
  color: var(--kpf-dt-cobalt) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, #14141a 8%, transparent) !important;
}

html body.app.admin .kpf-dt-cards {
  display: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 16px var(--kpf-dt-pad) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: var(--kpf-dt-subtle) !important;
}

html body.app.admin .kpf-dt--view-cards .kpf-dt-table-host {
  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;
  border: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body.app.admin .kpf-dt--view-cards .kpf-dt-cards {
  display: grid !important;
}

html body.app.admin .kpf-dt--view-table .kpf-dt-cards {
  display: none !important;
}

html body.app.admin .kpf-dt-cards__empty {
  grid-column: 1 / -1;
  padding: 32px 16px;
  text-align: center;
  color: var(--kpf-dt-muted);
  font-size: 14px;
  font-weight: 500;
}

/* Client card */
html body.app.admin .kpf-client-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  background: var(--kpf-dt-surface) !important;
  border: 1px solid var(--kpf-dt-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}

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

html body.app.admin .kpf-client-card__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 14px 0 !important;
}

html body.app.admin .kpf-client-card__check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  font-weight: 600 !important;
  color: var(--kpf-dt-muted) !important;
  cursor: pointer !important;
}

html body.app.admin .kpf-client-card__id {
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

html body.app.admin .kpf-client-card__active {
  flex-shrink: 0 !important;
}

html body.app.admin .kpf-client-card__active .onoffswitch {
  margin: 0 !important;
  transform: scale(0.9);
  transform-origin: right center;
}

html body.app.admin .kpf-client-card__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 10px 14px 12px !important;
  min-width: 0 !important;
}

html body.app.admin .kpf-client-card__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: var(--kpf-dt-ink) !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
}

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

html body.app.admin .kpf-client-card__meta {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
}

html body.app.admin .kpf-client-card__meta-row {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: start !important;
  min-width: 0 !important;
}

html body.app.admin .kpf-client-card__meta-row dt {
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--kpf-dt-muted) !important;
  padding-top: 2px !important;
}

html body.app.admin .kpf-client-card__meta-row dd {
  margin: 0 !important;
  min-width: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--kpf-dt-secondary) !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html body.app.admin .kpf-client-card__meta-row dd a {
  color: var(--kpf-dt-ink) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

html body.app.admin .kpf-client-card__meta-row dd a:hover {
  color: var(--kpf-dt-cobalt) !important;
}

html body.app.admin .kpf-client-card__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 8px !important;
  margin-top: auto !important;
  padding: 10px 14px 12px !important;
  border-top: 1px solid var(--kpf-dt-border-soft) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--kpf-dt-muted) !important;
  background: color-mix(in srgb, var(--kpf-dt-subtle) 70%, transparent) !important;
}

html body.app.admin .kpf-client-card__actions a {
  color: var(--kpf-dt-muted) !important;
  text-decoration: none !important;
}

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

html body.app.admin .kpf-client-card__actions .text-danger,
html body.app.admin .kpf-client-card__actions a._delete {
  color: var(--kodex-feedback-error, #c62828) !important;
}

/* ========== Invoice cards — corporate document tone ========== */
html body.app.admin .kpf-dt-panel-body,
html body.app.admin .panel-body.kpf-dt-panel-body {
  container-type: inline-size;
  container-name: kpf-dt;
}

/* Invoices: max 2 per row; 1 when the list column is narrow (split view) */
html body.app.admin .kpf-dt-cards--invoices {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, #001bff 3%, #f4f5f7) 0%, #f4f5f7 48%) !important;
}

@container kpf-dt (max-width: 520px) {
  html body.app.admin .kpf-dt-cards--invoices {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }
}

html body.app.admin .kpf-invoice-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 100% !important;
  background: #fff !important;
  border: 1px solid #e4e6ec !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 0 color-mix(in srgb, #14141a 4%, transparent) !important;
  overflow: hidden !important;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}

html body.app.admin .kpf-invoice-card:hover {
  border-color: color-mix(in srgb, #001bff 28%, #e4e6ec) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, #14141a 7%, transparent) !important;
}

html body.app.admin .kpf-invoice-card__accent {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: #001bff !important;
}

html body.app.admin .kpf-invoice-card__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 16px 0 18px !important;
}

html body.app.admin .kpf-invoice-card__identity {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

html body.app.admin .kpf-invoice-card__kicker {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6e7180 !important;
  line-height: 1 !important;
}

html body.app.admin .kpf-invoice-card__number {
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: #14141a !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
}

html body.app.admin .kpf-invoice-card__number:hover {
  color: #001bff !important;
}

html body.app.admin .kpf-invoice-card__flags {
  margin-top: 4px !important;
}

html body.app.admin .kpf-invoice-card__flags .label,
html body.app.admin .kpf-invoice-card__status .label,
html body.app.admin .kpf-invoice-card__status .badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border: 0 !important;
}

html body.app.admin .kpf-invoice-card__status {
  flex-shrink: 0 !important;
  padding-top: 2px !important;
}

html body.app.admin .kpf-invoice-card__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 14px 16px 14px 18px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body.app.admin .kpf-invoice-card__amount {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px 0 14px !important;
  border-top: 1px solid #eef0f4 !important;
  border-bottom: 1px solid #eef0f4 !important;
}

html body.app.admin .kpf-invoice-card__amount-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #6e7180 !important;
}

html body.app.admin .kpf-invoice-card__amount-value {
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 26px !important;
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  color: #14141a !important;
  font-variant-numeric: tabular-nums;
}

html body.app.admin .kpf-invoice-card__client {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #14141a !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

html body.app.admin .kpf-invoice-card__client a {
  color: #14141a !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

html body.app.admin .kpf-invoice-card__client a:hover {
  color: #001bff !important;
}

html body.app.admin .kpf-invoice-card__meta {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
}

html body.app.admin .kpf-invoice-card__meta-row {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
}

html body.app.admin .kpf-invoice-card__meta-row dt {
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6e7180 !important;
  padding-top: 2px !important;
}

html body.app.admin .kpf-invoice-card__meta-row dd {
  margin: 0 !important;
  min-width: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #40424d !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html body.app.admin .kpf-invoice-card__meta-row dd a {
  color: #14141a !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

html body.app.admin .kpf-invoice-card__meta-row dd a:hover {
  color: #001bff !important;
}

html body.app.admin .kpf-invoice-card__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 10px !important;
  margin-top: auto !important;
  padding: 11px 16px 12px 18px !important;
  border-top: 1px solid #eef0f4 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: #6e7180 !important;
  background: color-mix(in srgb, #f4f5f7 80%, #fff) !important;
}

html body.app.admin .kpf-invoice-card__actions a {
  color: #6e7180 !important;
  text-decoration: none !important;
}

html body.app.admin .kpf-invoice-card__actions a:hover {
  color: #001bff !important;
}

@media (max-width: 1100px) {
  html body.app.admin .kpf-dt-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body.app.admin .kpf-dt-cards--leads {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  html body.app.admin .kpf-dt-cards,
  html body.app.admin .kpf-dt-cards--invoices {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  html body.app.admin .kpf-dt-toolbar {
    flex-wrap: wrap !important;
  }

  html body.app.admin .kpf-dt-toolbar__start {
    width: auto !important;
    flex: 1 1 auto !important;
  }

  html body.app.admin .kpf-dt-toolbar__end {
    margin-left: auto !important;
  }

  /* Split-view keeps its own grid layout (do not force nowrap) */
  html body.app.admin #small-table .kpf-dt-toolbar {
    flex-wrap: unset !important;
  }
}

/* Dark */
html body.app.admin.kodex-crm-admin--ui-dark .panel_s.kpf-dt-panel {
  background: var(--kodex-bg-surface, #1e1e24) !important;
  border-color: var(--kodex-border-default, #40424d) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-dt-cards {
  background: color-mix(in srgb, #000 25%, #1e1e24) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-client-card {
  background: var(--kodex-bg-surface, #1e1e24) !important;
  border-color: var(--kodex-border-default, #40424d) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-client-card__title,
html body.app.admin.kodex-crm-admin--ui-dark .kpf-client-card__meta-row dd a {
  color: #f7f7f7 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-dt-cards--invoices {
  background: color-mix(in srgb, #000 28%, #1e1e24) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-invoice-card {
  background: var(--kodex-bg-surface, #1e1e24) !important;
  border-color: var(--kodex-border-default, #40424d) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-invoice-card__number,
html body.app.admin.kodex-crm-admin--ui-dark .kpf-invoice-card__amount-value,
html body.app.admin.kodex-crm-admin--ui-dark .kpf-invoice-card__client,
html body.app.admin.kodex-crm-admin--ui-dark .kpf-invoice-card__client a,
html body.app.admin.kodex-crm-admin--ui-dark .kpf-invoice-card__meta-row dd a {
  color: #f7f7f7 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-invoice-card__amount,
html body.app.admin.kodex-crm-admin--ui-dark .kpf-invoice-card__actions {
  border-color: var(--kodex-border-default, #40424d) !important;
  background: color-mix(in srgb, #000 18%, #1e1e24) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-dt table thead th {
  background: color-mix(in srgb, #fff 4%, #1e1e24) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-dt table tbody a:not(.btn) {
  color: #f7f7f7 !important;
}

/* ========== Leads — inline responsive rows ========== */
html body.app.admin .kpf-dt-cards--leads {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 12px var(--kpf-dt-pad) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, #001bff 2.5%, #f4f5f7) 0%, #f4f5f7 40%) !important;
}

html body.app.admin .kpf-lead-card {
  display: grid !important;
  grid-template-columns:
    auto
    minmax(140px, 1.5fr)
    minmax(120px, 1fr)
    minmax(72px, 0.7fr)
    auto
    minmax(96px, 0.85fr)
    auto !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 8px !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  background: var(--kpf-dt-surface, #fff) !important;
  border: 1px solid var(--kpf-dt-border, #e4e6ec) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 0 color-mix(in srgb, #14141a 4%, transparent) !important;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}

html body.app.admin .kpf-lead-card:hover {
  border-color: color-mix(in srgb, #001bff 28%, #e4e6ec) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, #14141a 6%, transparent) !important;
}

html body.app.admin .kpf-lead-card__check {
  display: flex !important;
  align-items: center !important;
}

html body.app.admin .kpf-lead-card__check-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: var(--kpf-dt-muted, #6e7180) !important;
  font-weight: 600 !important;
}

html body.app.admin .kpf-lead-card__id {
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

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

html body.app.admin .kpf-lead-card__name {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: var(--kpf-dt-ink, #14141a) !important;
  text-decoration: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.app.admin .kpf-lead-card__name:hover {
  color: var(--kpf-dt-cobalt, #001bff) !important;
}

html body.app.admin .kpf-lead-card__company,
html body.app.admin .kpf-lead-card__source {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--kpf-dt-muted, #6e7180) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.app.admin .kpf-lead-card__source {
  text-transform: none;
  letter-spacing: 0;
}

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

html body.app.admin .kpf-lead-card__contact-row {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--kpf-dt-secondary, #40424d) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.app.admin .kpf-lead-card__contact-row a {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

html body.app.admin .kpf-lead-card__contact-row a:hover {
  color: var(--kpf-dt-cobalt, #001bff) !important;
}

html body.app.admin .kpf-lead-card__value {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  align-items: flex-start !important;
}

html body.app.admin .kpf-lead-card__value-num {
  font-family: var(--kodex-font-display, "Neue Haas Grotesk Display", Satoshi, system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--kpf-dt-ink, #14141a) !important;
  white-space: nowrap !important;
}

html body.app.admin .kpf-lead-card__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  max-width: 100% !important;
}

html body.app.admin .kpf-lead-card__status {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

html body.app.admin .kpf-lead-card__status .label,
html body.app.admin .kpf-lead-card__status .dropdown > a.label {
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.app.admin .kpf-lead-card__aside {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body.app.admin .kpf-lead-card__assigned {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

html body.app.admin .kpf-lead-card__assigned img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
}

html body.app.admin .kpf-lead-card__dates {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
}

html body.app.admin .kpf-lead-card__date {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--kpf-dt-muted, #6e7180) !important;
  white-space: nowrap !important;
}

html body.app.admin .kpf-lead-card__date em {
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 9px !important;
  margin-right: 4px !important;
  color: var(--kpf-dt-muted, #6e7180) !important;
}

html body.app.admin .kpf-lead-card__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kpf-dt-muted, #6e7180) !important;
  white-space: nowrap !important;
}

html body.app.admin .kpf-lead-card__actions a {
  color: var(--kpf-dt-muted, #6e7180) !important;
  text-decoration: none !important;
}

html body.app.admin .kpf-lead-card__actions a:hover {
  color: var(--kpf-dt-cobalt, #001bff) !important;
}

html body.app.admin .kpf-lead-card__actions .text-danger,
html body.app.admin .kpf-lead-card__actions a._delete {
  color: var(--kodex-feedback-error, #c62828) !important;
}

@container kpf-dt (max-width: 960px) {
  html body.app.admin .kpf-lead-card {
    grid-template-columns:
      auto
      minmax(0, 1.2fr)
      minmax(0, 1fr)
      auto
      auto !important;
  }
  html body.app.admin .kpf-lead-card__value {
    display: none !important;
  }
  html body.app.admin .kpf-lead-card__aside {
    display: none !important;
  }
}

@container kpf-dt (max-width: 720px) {
  html body.app.admin .kpf-lead-card {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "check identity status"
      "check contact contact"
      "actions actions actions" !important;
  }
  html body.app.admin .kpf-lead-card__check { grid-area: check; align-self: start; }
  html body.app.admin .kpf-lead-card__identity { grid-area: identity; }
  html body.app.admin .kpf-lead-card__contact { grid-area: contact; }
  html body.app.admin .kpf-lead-card__status { grid-area: status; justify-self: end; }
  html body.app.admin .kpf-lead-card__value,
  html body.app.admin .kpf-lead-card__aside { display: none !important; }
  html body.app.admin .kpf-lead-card__actions {
    grid-area: actions;
    justify-content: flex-start !important;
    padding-top: 4px !important;
    border-top: 1px solid var(--kpf-dt-border-soft, #eef0f4) !important;
  }
}

@container kpf-dt (max-width: 480px) {
  html body.app.admin .kpf-lead-card {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "check identity"
      "contact contact"
      "status status"
      "actions actions" !important;
    padding: 12px !important;
  }
  html body.app.admin .kpf-lead-card__status {
    justify-self: start !important;
  }
  html body.app.admin .kpf-lead-card__name {
    white-space: normal !important;
  }
}

@media (max-width: 640px) {
  html body.app.admin .kpf-dt-cards--leads {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 10px !important;
  }
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-dt-cards--leads {
  background: color-mix(in srgb, #000 28%, #1e1e24) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-lead-card {
  background: var(--kodex-bg-surface, #1e1e24) !important;
  border-color: var(--kodex-border-default, #40424d) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-lead-card__name,
html body.app.admin.kodex-crm-admin--ui-dark .kpf-lead-card__value-num,
html body.app.admin.kodex-crm-admin--ui-dark .kpf-lead-card__contact-row a {
  color: #f7f7f7 !important;
}