/* L1 Kpf component bundle — generated 2026-07-17 */
/* === kpf-theme.css === */
/**
 * KodexCRM Perfex / Perfex to KodexCRM semantic tokens
 * Prefix: --kpf-* (aliases to Kodex brand tokens)
 * Apply after style.css on admin/client Perfex surfaces.
 */
:root,
body.admin,
.customers {
  /* Brand bridge — prefer live --kodex-* semantics */
  --kpf-action-primary: var(--kodex-action-primary, #001bff);
  --kpf-action-primary-fg: var(--kodex-action-primary-fg, #ffffff);
  --kpf-action-primary-hover: var(--kodex-action-primary-hover, #0015cc);
  --kpf-action-secondary: var(--kodex-bg-muted, #edeff7);
  --kpf-action-secondary-fg: var(--kodex-text-primary, #14141a);

  --kpf-bg-canvas: var(--kodex-bg-canvas, #f7f7f7);
  --kpf-surface: var(--kodex-bg-surface, #ffffff);
  --kpf-surface-muted: var(--kodex-bg-subtle, #f5f5f5);

  --kpf-text-primary: var(--kodex-text-primary, #14141a);
  --kpf-text-muted: var(--kodex-text-muted, #6e7180);
  --kpf-text-secondary: var(--kodex-text-secondary, #40424d);
  --kpf-font-family: var(--kodex-font-sans, 'Satoshi', 'Inter', system-ui, sans-serif);
  --kpf-font-size-body: max(13.5px, var(--kodex-font-size-body, 14px));

  --kpf-border: var(--kodex-border-default, #d3d6e0);
  --kpf-border-strong: var(--kodex-border-strong, #9da2b3);

  --kpf-sidebar-bg: var(--kodex-color-charcoal-deep, #14141a);
  --kpf-sidebar-text: var(--kodex-color-chrome-highlight, #d9dadc);
  --kpf-sidebar-active: var(--kpf-action-primary);
  --kpf-header-bg: var(--kodex-bg-surface, #ffffff);

  --kpf-status-success: var(--kodex-feedback-success, #0d7a4e);
  --kpf-status-warning: var(--kodex-feedback-warning, #fa4616);
  --kpf-status-danger: var(--kodex-feedback-error, #c41e3a);
  --kpf-status-info: var(--kodex-feedback-info, #001bff);

  --kpf-input-border: var(--kpf-border);
  --kpf-input-focus: var(--kpf-action-primary);

  --kpf-table-head: var(--kpf-text-muted);
  --kpf-table-link: #000000;
  --kpf-table-link-hover: #001bff;
  --kpf-table-row-hover: color-mix(in srgb, var(--kpf-action-primary) 4%, var(--kpf-bg-canvas));

  --kpf-chart-primary: var(--kpf-action-primary);
  --kpf-chart-secondary: var(--kodex-color-neutral-700, #6e7180);
  --kpf-chart-grid: var(--kpf-border);
  --kpf-chart-tooltip-bg: var(--kpf-text-primary);

  --kpf-radius-sm: var(--kodex-radius-sm, 4px);
  --kpf-radius-md: var(--kodex-radius-md, 4px);
  --kpf-shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body.admin {
  background: var(--kpf-bg-canvas);
  color: var(--kpf-text-primary);
  font-family: var(--kpf-font-family);
  font-size: var(--kpf-font-size-body);
}

.admin .sidebar,
.admin #side-menu {
  background: var(--kpf-sidebar-bg);
}

.admin #side-menu li.active > a {
  background: color-mix(in srgb, var(--kpf-sidebar-active) 18%, transparent);
  color: var(--kpf-sidebar-active);
}

.admin #header {
  background: var(--kpf-header-bg);
  border-bottom: 1px solid var(--kpf-border);
}

.panel_s {
  background: var(--kpf-surface);
  border: 1px solid var(--kpf-border);
  border-radius: var(--kpf-radius-md);
  box-shadow: var(--kpf-shadow-panel);
}

.btn-primary {
  background-color: var(--kpf-action-primary);
  border-color: var(--kpf-action-primary);
  color: var(--kpf-action-primary-fg);
  border-radius: var(--kpf-radius-sm);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--kpf-action-primary-hover);
  border-color: var(--kpf-action-primary-hover);
  color: var(--kpf-action-primary-fg);
}

.btn-default,
.btn-secondary {
  border-radius: var(--kpf-radius-sm);
  border-color: var(--kpf-border);
  background: var(--kpf-action-secondary);
  color: var(--kpf-action-secondary-fg);
}

.label-success { background: var(--kpf-status-success); }
.label-warning { background: var(--kpf-status-warning); }
.label-danger { background: var(--kpf-status-danger); }
.label-primary { background: var(--kpf-action-primary); color: var(--kpf-action-primary-fg, #fff); }

table.dataTable thead th {
  color: var(--kpf-table-head);
  border-color: var(--kpf-border);
}

.dataTables_wrapper table tbody a:not(.text-muted) {
  color: var(--kpf-table-link, var(--kodex-text-primary));
}

table.dataTable tbody tr:hover {
  background: var(--kpf-table-row-hover);
}

.form-control:focus {
  border-color: var(--kpf-input-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpf-input-focus) 20%, transparent);
}

body.login_admin {
  background: var(--kpf-bg-canvas);
}

.customers .navbar-default {
  background: var(--kpf-sidebar-bg);
}

.customers footer {
  background: var(--kpf-surface-muted);
  color: var(--kpf-text-muted);
}

.tw-text-primary {
  color: var(--kpf-action-primary) !important;
}

.tw-bg-primary {
  background-color: var(--kpf-action-primary) !important;
  color: var(--kpf-action-primary-fg, #fff) !important;
}

canvas.chart {
  max-width: 100%;
}

#calendar .fc-header-toolbar button {
  background: var(--kpf-surface);
  border-color: var(--kpf-border);
  color: var(--kpf-text-primary);
}

#calendar .fc-button-active,
#calendar .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--kpf-action-primary);
  border-color: var(--kpf-action-primary);
  color: var(--kpf-action-primary-fg);
}

.dropzone {
  border-color: var(--kpf-border);
  background: var(--kpf-surface-muted);
}

.dropzone.dz-drag-hover {
  border-color: var(--kpf-action-primary);
}

/* === kpf-alert.css === */
/* KpfAlert — DS-complete (#alerts / .alert) */
#alerts .alert,
.alert {
  border-radius: var(--kodex-radius-md, 4px);
  border-width: 1px;
  border-style: solid;
  padding: var(--kodex-space-3, 12px) var(--kodex-space-4, 16px);
  font-family: var(--kpf-font-family, var(--kodex-font-family-sans));
  font-size: max(14px, var(--kodex-font-size-body, 14px));
  line-height: 1.4;
  color: var(--kpf-text-primary);
  box-shadow: var(--kodex-shadow-sm, 0 1px 2px color-mix(in srgb, var(--kpf-text-primary) 6%, transparent));
  margin-bottom: var(--kpf-form-field-gap, 12px);
}

#alerts .alert .close,
.alert .close {
  color: var(--kpf-text-muted);
  opacity: 0.7;
  text-shadow: none;
}
#alerts .alert .close:hover,
.alert .close:hover {
  color: var(--kpf-text-primary);
  opacity: 1;
}

.alert-success {
  border-color: var(--kpf-status-success);
  background: var(--kodex-feedback-success-bg, color-mix(in srgb, var(--kpf-status-success) 10%, var(--kpf-surface)));
  color: var(--kpf-text-primary);
}

.alert-warning {
  border-color: var(--kpf-status-warning);
  background: var(--kodex-feedback-warning-bg, color-mix(in srgb, var(--kpf-status-warning) 10%, var(--kpf-surface)));
  color: var(--kpf-text-primary);
}

.alert-danger {
  border-color: var(--kpf-status-danger);
  background: var(--kodex-feedback-error-bg, color-mix(in srgb, var(--kpf-status-danger) 10%, var(--kpf-surface)));
  color: var(--kpf-text-primary);
}

.alert-info {
  border-color: var(--kpf-status-info);
  background: var(--kodex-feedback-info-bg, color-mix(in srgb, var(--kpf-status-info) 10%, var(--kpf-surface)));
  color: var(--kpf-text-primary);
}

/* Toast-adjacent bootstrap alerts in content */
#wrapper .alert {
  border-left-width: 3px;
}

/* === kpf-auth.css === */
/* KpfAuthPanel */
body.login_admin {
  background: var(--kpf-bg-canvas) !important;
  font-family: var(--kpf-font-family);
}
body.login_admin .authentication-form,
body.login_admin .company-logo + div {
  background: var(--kpf-surface);
  border-radius: var(--kpf-radius-md);
  border: 1px solid var(--kpf-border);
  box-shadow: var(--kpf-shadow-panel);
}

/* === kpf-badge.css === */
/* KpfBadge — Perfex status labels + Kodex DS money badges */

.label,
.badge {
  border-radius: var(--kpf-radius-sm, 4px);
  font-weight: 500;
}

.label-success,
.badge-success {
  background: var(--kpf-status-success) !important;
  color: #fff !important;
}

.label-warning,
.badge-warning {
  background: var(--kpf-status-warning) !important;
  color: #fff !important;
}

.label-danger,
.badge-danger {
  background: var(--kpf-status-danger) !important;
  color: #fff !important;
}

.label-primary,
.badge-primary {
  background: var(--kpf-action-primary) !important;
  color: var(--kpf-action-primary-fg, #fff) !important;
}

.label-info,
.badge-info {
  background: var(--kpf-status-info) !important;
  color: #fff !important;
}

.label-default,
.badge-default {
  background: var(--kpf-surface-muted) !important;
  color: var(--kpf-text-secondary) !important;
}

/* —— Invoice / estimate totals: Kodex DS money badges (CrmStat tones) —— */
html body.app.admin #invoices_total,
html body.app.admin #estimates_total {
  --kpf-money-positive: var(--kodex-crm-stat-positive, var(--kodex-feedback-success, #0d7a4e));
  --kpf-money-negative: var(--kodex-crm-stat-negative, var(--kodex-feedback-error, #c41e3a));
  --kpf-money-pending: var(--kodex-crm-stat-pending, var(--kodex-feedback-warning, #c47a0a));
}

html body.app.admin #invoices_total .tw-relative > .md\:tw-flex,
html body.app.admin #invoices_total [data-kpf-money-row='1'],
html body.app.admin #estimates_total .tw-relative > .md\:tw-flex,
html body.app.admin #estimates_total [data-kpf-money-row='1'] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
}

html body.app.admin .kpf-money-badge {
  --kpf-money-tone: var(--kodex-text-muted, #6e7180);
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border: 1px solid color-mix(in srgb, var(--kpf-money-tone) 22%, var(--kodex-border-default, #e4e6ec)) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--kpf-money-tone) 8%, #fff) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  min-height: 32px !important;
  max-width: 100% !important;
  transition: border-color 140ms ease, background 140ms ease !important;
}

html body.app.admin .kpf-money-badge:hover {
  border-color: color-mix(in srgb, var(--kpf-money-tone) 40%, var(--kodex-border-default, #e4e6ec)) !important;
  background: color-mix(in srgb, var(--kpf-money-tone) 12%, #fff) !important;
}

html body.app.admin .kpf-money-badge--positive {
  --kpf-money-tone: var(--kpf-money-positive, #0d7a4e);
}

html body.app.admin .kpf-money-badge--negative {
  --kpf-money-tone: var(--kpf-money-negative, #c41e3a);
}

html body.app.admin .kpf-money-badge--pending {
  --kpf-money-tone: var(--kpf-money-pending, #c47a0a);
}

html body.app.admin .kpf-money-badge__dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: var(--kpf-money-tone) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpf-money-tone) 18%, transparent) !important;
}

html body.app.admin .kpf-money-badge__label {
  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;
  line-height: 1.2 !important;
  color: var(--kpf-money-tone) !important;
  white-space: nowrap !important;
}

html body.app.admin .kpf-money-badge__value {
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

/* Strip legacy Bootstrap color utilities inside money badges */
html body.app.admin .kpf-money-badge .text-success,
html body.app.admin .kpf-money-badge .text-danger,
html body.app.admin .kpf-money-badge .text-warning,
html body.app.admin .kpf-money-badge .text-muted {
  color: inherit !important;
}

/* Card/grid mode (dashboard / non-badge display_type) — same DS tones */
html body.app.admin #invoices_total dl.tw-grid > div.kpf-money-card,
html body.app.admin #estimates_total dl.tw-grid > div.kpf-money-card {
  --kpf-money-tone: var(--kodex-text-muted, #6e7180);
  position: relative !important;
  background: var(--kodex-crm-surface, #fff) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body.app.admin #invoices_total dl.tw-grid > div.kpf-money-card--positive,
html body.app.admin #estimates_total dl.tw-grid > div.kpf-money-card--positive {
  --kpf-money-tone: var(--kpf-money-positive, #0d7a4e);
}

html body.app.admin #invoices_total dl.tw-grid > div.kpf-money-card--negative,
html body.app.admin #estimates_total dl.tw-grid > div.kpf-money-card--negative {
  --kpf-money-tone: var(--kpf-money-negative, #c41e3a);
}

html body.app.admin #invoices_total dl.tw-grid > div.kpf-money-card--pending,
html body.app.admin #estimates_total dl.tw-grid > div.kpf-money-card--pending {
  --kpf-money-tone: var(--kpf-money-pending, #c47a0a);
}

html body.app.admin #invoices_total dl.tw-grid > div.kpf-money-card::before,
html body.app.admin #estimates_total dl.tw-grid > div.kpf-money-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: var(--kpf-money-tone) !important;
}

html body.app.admin #invoices_total .kpf-money-card dt,
html body.app.admin #estimates_total .kpf-money-card dt {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kpf-money-tone) !important;
}

html body.app.admin #invoices_total .kpf-money-card dd .tw-font-semibold,
html body.app.admin #invoices_total .kpf-money-card dd,
html body.app.admin #estimates_total .kpf-money-card dd .tw-font-semibold,
html body.app.admin #estimates_total .kpf-money-card dd {
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-money-badge {
  background: color-mix(in srgb, var(--kpf-money-tone) 16%, #1e1e24) !important;
  border-color: color-mix(in srgb, var(--kpf-money-tone) 32%, #40424d) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-money-badge__value {
  color: #f7f7f7 !important;
}

@media (max-width: 640px) {
  html body.app.admin #invoices_total .tw-relative > .md\:tw-flex,
  html body.app.admin #invoices_total [data-kpf-money-row='1'],
  html body.app.admin #estimates_total .tw-relative > .md\:tw-flex,
  html body.app.admin #estimates_total [data-kpf-money-row='1'] {
    justify-content: flex-start !important;
  }

  html body.app.admin .kpf-money-badge__label {
    white-space: normal !important;
    max-width: 9rem;
  }
}
/* —— Ticket status filter chips (toolbar) —— */
html body.app.admin .kpf-ticket-status-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

html body.app.admin a.kpf-status-badge,
html body.app.admin .kpf-status-badge {
  --kpf-status-tone: var(--kodex-text-muted, #6e7180);
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid color-mix(in srgb, var(--kpf-status-tone) 24%, var(--kodex-border-default, #e4e6ec)) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--kpf-status-tone) 9%, #fff) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  min-height: 30px !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}

html body.app.admin a.kpf-status-badge:hover,
html body.app.admin a.kpf-status-badge:focus-visible,
html body.app.admin .kpf-status-badge:hover,
html body.app.admin .kpf-status-badge:focus-visible {
  border-color: color-mix(in srgb, var(--kpf-status-tone) 45%, var(--kodex-border-default, #e4e6ec)) !important;
  background: color-mix(in srgb, var(--kpf-status-tone) 14%, #fff) !important;
  color: inherit !important;
  text-decoration: none !important;
  outline: none !important;
}

html body.app.admin a.kpf-status-badge.active,
html body.app.admin a.kpf-status-badge[aria-pressed='true'],
html body.app.admin .kpf-status-badge.active {
  border-color: color-mix(in srgb, var(--kpf-status-tone) 55%, transparent) !important;
  background: color-mix(in srgb, var(--kpf-status-tone) 16%, #fff) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kpf-status-tone) 28%, transparent) !important;
}

html body.app.admin .kpf-status-badge__dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: var(--kpf-status-tone) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpf-status-tone) 18%, transparent) !important;
}

html body.app.admin .kpf-status-badge__value {
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

html body.app.admin .kpf-status-badge__label {
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  color: var(--kpf-status-tone) !important;
  white-space: nowrap !important;
}

html body.app.admin.kodex-crm-admin--ui-dark a.kpf-status-badge,
html body.app.admin.kodex-crm-admin--ui-dark .kpf-status-badge {
  background: color-mix(in srgb, var(--kpf-status-tone) 16%, #1e1e24) !important;
  border-color: color-mix(in srgb, var(--kpf-status-tone) 32%, #40424d) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kpf-status-badge__value {
  color: #f7f7f7 !important;
}


/* === kpf-breadcrumb.css === */
/* KpfBreadcrumb */
.breadcrumb { background: transparent; color: var(--kpf-text-muted); }
.breadcrumb a { color: var(--kpf-action-primary); }

/* === kpf-button.css === */
/* KpfButton — DS-complete (maps to @kodex/ds Button + --kds-btn-*) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kodex-space-2, 8px);
  min-height: var(--kds-btn-height-md, 36px);
  padding: var(--kds-btn-padding-md, 8px 14px);
  border-radius: var(--kds-btn-radius, var(--kodex-radius-sm, 4px));
  font-family: var(--kpf-font-family, var(--kodex-font-family-sans));
  font-size: max(14px, var(--kodex-font-size-body, 14px));
  font-weight: var(--kds-btn-font-weight, 500);
  line-height: 1.25;
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
  transition: background-color var(--kodex-motion-duration-hover, 120ms) var(--kodex-motion-easing, ease),
    border-color var(--kodex-motion-duration-hover, 120ms) var(--kodex-motion-easing, ease),
    color var(--kodex-motion-duration-hover, 120ms) var(--kodex-motion-easing, ease);
}

.btn-sm,
.btn-xs {
  min-height: var(--kds-btn-height-sm, 32px);
  padding: var(--kds-btn-padding-sm, 6px 10px);
  font-size: var(--kodex-font-size-label, 13px);
}

.btn-lg {
  min-height: var(--kds-btn-height-lg, 40px);
  padding: var(--kds-btn-padding-lg, 10px 16px);
}

.btn-primary {
  background-color: var(--kds-btn-primary-bg, var(--kpf-action-primary)) !important;
  border-color: var(--kds-btn-primary-bg, var(--kpf-action-primary)) !important;
  color: var(--kds-btn-primary-fg, var(--kpf-action-primary-fg)) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary.focus {
  background-color: var(--kds-btn-primary-bg-hover, var(--kpf-action-primary-hover)) !important;
  border-color: var(--kds-btn-primary-bg-hover, var(--kpf-action-primary-hover)) !important;
  color: var(--kds-btn-primary-fg, var(--kpf-action-primary-fg)) !important;
}
.btn-primary:active {
  background-color: var(--kds-btn-primary-bg-active, var(--kodex-action-primary-active, #0012b3)) !important;
}

.btn-default,
.btn-secondary {
  background: var(--kds-btn-secondary-bg, var(--kpf-action-secondary)) !important;
  border-color: var(--kds-btn-secondary-border, var(--kpf-border)) !important;
  color: var(--kpf-action-secondary-fg) !important;
}
.btn-default:hover,
.btn-secondary:hover,
.btn-default:focus,
.btn-secondary:focus {
  background: var(--kds-btn-secondary-bg-hover, var(--kodex-bg-subtle)) !important;
  border-color: var(--kpf-border-strong) !important;
  color: var(--kpf-text-primary) !important;
}

/* Ghost — outline / link-style Perfex buttons */
.btn-link,
.btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--kds-btn-ghost-fg, var(--kpf-action-primary)) !important;
  box-shadow: none !important;
}
.btn-link:hover,
.btn-ghost:hover {
  background: var(--kds-btn-ghost-bg-hover, var(--kodex-bg-subtle)) !important;
  color: var(--kpf-action-primary-hover) !important;
}

.btn-info {
  background: var(--kpf-action-secondary) !important;
  border-color: var(--kpf-border) !important;
  color: var(--kpf-action-secondary-fg) !important;
}

.btn-danger {
  background: var(--kds-btn-danger-bg, var(--kpf-status-danger)) !important;
  border-color: var(--kds-btn-danger-bg, var(--kpf-status-danger)) !important;
  color: var(--kds-btn-danger-fg, #fff) !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background: var(--kds-btn-danger-bg-hover, var(--kodex-feedback-error)) !important;
  border-color: var(--kds-btn-danger-bg-hover, var(--kodex-feedback-error)) !important;
}

.btn-success {
  background: var(--kpf-status-success) !important;
  border-color: var(--kpf-status-success) !important;
  color: #fff !important;
}

/* Warning uses semantic orange (BD-04) — never as primary CTA */
.btn-warning {
  background: var(--kpf-status-warning) !important;
  border-color: var(--kpf-status-warning) !important;
  color: #fff !important;
}

.btn:disabled,
.btn.disabled,
fieldset[disabled] .btn {
  opacity: 0.55;
  cursor: not-allowed;
}

/* === kpf-calendar.css === */
/* KpfCalendar */
#calendar .fc-header-toolbar button {
  background: var(--kpf-surface) !important;
  border-color: var(--kpf-border) !important;
  color: var(--kpf-text-primary) !important;
  border-radius: var(--kpf-radius-sm);
}
#calendar .fc-button-active,
#calendar .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--kpf-action-primary) !important;
  border-color: var(--kpf-action-primary) !important;
  color: var(--kpf-action-primary-fg) !important;
}

/* === kpf-chart.css === */
/* KpfChart */
canvas.chart, #payment-statistics, #leads-total, #expenses_chart_not_billable {
  max-width: 100%;
}

/* === kpf-checkbox.css === */
/* KpfCheckbox + Perfex onoffswitch */
input[type="checkbox"]:checked {
  accent-color: var(--kpf-action-primary, #001bff);
}

/* Clients / lists — active toggle uses Kodex cobalt */
html body.app.admin .onoffswitch-checkbox:checked + .onoffswitch-label,
html body.app.admin .onoffswitch-checkbox:checked + label.onoffswitch-label,
html body.app.admin table.dataTable .onoffswitch-checkbox:checked + .onoffswitch-label,
html body.app.admin #clients .onoffswitch-checkbox:checked + .onoffswitch-label {
  background: #001bff !important;
  background-color: #001bff !important;
  border-color: #001bff !important;
}

html body.app.admin .onoffswitch-checkbox:checked + .onoffswitch-label:before,
html body.app.admin .onoffswitch-checkbox:checked + label.onoffswitch-label:before,
html body.app.admin table.dataTable .onoffswitch-checkbox:checked + .onoffswitch-label:before,
html body.app.admin #clients .onoffswitch-checkbox:checked + .onoffswitch-label:before {
  border-color: #001bff !important;
}

html body.app.admin .onoffswitch-label {
  border-radius: 999px !important;
}

html body.app.admin .onoffswitch-label:before {
  border-radius: 999px !important;
}

/* === kpf-client-footer.css === */
/* KpfClientFooter */
.customers footer {
  background: var(--kpf-surface-muted) !important;
  color: var(--kpf-text-muted) !important;
  border-top: 1px solid var(--kpf-border);
}

/* === kpf-client-nav.css === */
/* KpfClientNav */
.customers .navbar-default {
  background: var(--kpf-sidebar-bg) !important;
  border-color: transparent !important;
}
.customers .navbar-default .navbar-nav > li > a {
  color: var(--kpf-sidebar-text) !important;
}
.customers .navbar-default .navbar-nav > .active > a {
  color: #fff !important;
  background: color-mix(in srgb, var(--kpf-action-primary) 30%, transparent) !important;
}

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

/* === kpf-datatable.css === */
/* 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,
html body.app.admin .panel_s:has(.dataTables_wrapper),
html body.app.admin .panel_s:has(.table-clients),
html body.app.admin .panel_s.tw-mt-2 {
  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 > .panel-body,
html body.app.admin .kpf-dt-panel-body,
html body.app.admin .panel_s:has(.dataTables_wrapper) > .panel-body,
html body.app.admin .panel_s.tw-mt-2 > .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: wrap !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: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.app.admin .kpf-dt-toolbar__end {
  margin-left: 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;
}

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;
}

/* 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 {
  background: var(--kpf-dt-cobalt) !important;
  border-color: var(--kpf-dt-cobalt) !important;
  color: #fff !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;
  }
}

@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__start {
    width: 100% !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;
}

/* === kpf-datepicker.css === */
/* KpfDatepicker */
.xdsoft_datetimepicker, .datepicker {
  border-color: var(--kpf-border);
  border-radius: var(--kpf-radius-md);
}
.xdsoft_calendar td.xdsoft_current, .datepicker table tr td.active {
  background: var(--kpf-action-primary) !important;
  color: var(--kpf-action-primary-fg, #fff) !important;
}

/* === kpf-dropdown.css === */
/* KpfDropdown */
.dropdown-menu {
  border-radius: var(--kpf-radius-md);
  border-color: var(--kpf-border);
  background: var(--kpf-surface);
  box-shadow: var(--kpf-shadow-panel);
}
.dropdown-menu > li > a {
  color: var(--kpf-text-primary);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > .active > a {
  background: color-mix(in srgb, var(--kpf-action-primary) 10%, transparent);
  color: var(--kpf-action-primary);
}

/* === kpf-editor.css === */
/* KpfEditor */
.tox-tinymce, .mce-tinymce {
  border-color: var(--kpf-border) !important;
  border-radius: var(--kpf-radius-md);
}
.tox .tox-tbtn--enabled { background: color-mix(in srgb, var(--kpf-action-primary) 12%, transparent); }

/* === kpf-empty-state.css === */
/* KpfEmptyState */
.no-data, .dt-empty {
  color: var(--kpf-text-muted);
  padding: 2rem;
  text-align: center;
}

/* === kpf-external-form.css === */
/* KpfExternalForm */
.external-form, #web-to-lead-form, .web-to-lead {
  background: var(--kpf-surface);
  border: 1px solid var(--kpf-border);
  border-radius: var(--kpf-radius-md);
  padding: 1.25rem;
}
.external-form .btn-primary, .web-to-lead .btn-primary {
  background: var(--kpf-action-primary);
  border-color: var(--kpf-action-primary);
}

/* === kpf-file-manager.css === */
/* KpfFileManager — Perfex elFinder skin (base; page chrome in kpf-media-page.css) */
.elfinder {
  border: 1px solid var(--kpf-border, var(--kodex-border-default, #d3d6e0));
  border-radius: var(--kpf-radius-md, 4px);
  background: var(--kpf-surface, var(--kodex-bg-surface, #fff));
  color: var(--kpf-text, var(--kodex-text-primary, #14141a));
  font-family: var(--kodex-font-sans, "IBM Plex Sans", "Segoe UI", sans-serif);
  box-shadow: none;
}

.elfinder.ui-widget.ui-widget-content {
  box-shadow: none;
}

.elfinder-toolbar {
  background: var(--kpf-surface-muted, var(--kodex-bg-canvas, #f0f1f4));
  border-color: var(--kpf-border, var(--kodex-border-subtle, #edeff7));
}

.elfinder-button:hover {
  background: color-mix(in srgb, var(--kpf-action-primary, #001bff) 10%, transparent);
}

.elfinder-navbar {
  background: color-mix(in srgb, var(--kodex-bg-canvas, #f0f1f4) 55%, #fff);
  border-color: var(--kodex-border-subtle, #edeff7);
}

.elfinder-cwd {
  background: var(--kpf-surface, #fff);
}

.elfinder-statusbar,
.elfinder-path {
  background: color-mix(in srgb, var(--kodex-bg-canvas, #f0f1f4) 65%, #fff);
  border-color: var(--kodex-border-subtle, #edeff7);
  color: var(--kodex-text-muted, #6e7180);
}

/* === kpf-file-upload.css === */
/* KpfFileUpload */
.dropzone {
  border: 1px dashed var(--kpf-border) !important;
  background: var(--kpf-surface-muted) !important;
  border-radius: var(--kpf-radius-md);
}
.dropzone.dz-drag-hover {
  border-color: var(--kpf-action-primary) !important;
}

/* === kpf-form-section.css === */
/* KpfFormSection */
.horizontal-form .form-group, .form-horizontal .form-group {
  margin-bottom: 1rem;
}
h4.bold, .tw-font-semibold {
  color: var(--kpf-text-primary);
}

/* === kpf-input.css === */
/* KpfInput — DS-complete (--kds-input-*) */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  min-height: var(--kpf-control-height, 36px);
  padding: var(--kds-input-padding-y, 8px) var(--kds-input-padding-x, 12px);
  border: 1px solid var(--kds-input-border, var(--kpf-input-border));
  border-radius: var(--kds-input-radius, var(--kodex-radius-sm, 4px));
  color: var(--kds-input-fg, var(--kpf-text-primary));
  background: var(--kds-input-bg, var(--kpf-surface));
  font-family: var(--kpf-font-family, var(--kodex-font-family-sans));
  font-size: max(14px, var(--kds-input-font-size, var(--kpf-font-size-body)));
  line-height: var(--kds-input-line-height, 1.4);
  box-shadow: none;
  transition: border-color var(--kodex-motion-duration-hover, 120ms) ease,
    box-shadow var(--kodex-motion-duration-hover, 120ms) ease;
}

.form-control:hover {
  border-color: var(--kds-input-border-hover, var(--kpf-border-strong));
}

.form-control:focus,
.form-control:focus-visible {
  border-color: var(--kds-input-border-focus, var(--kpf-input-focus)) !important;
  box-shadow: 0 0 0 2px var(--kds-input-focus-ring, color-mix(in srgb, var(--kpf-input-focus) 22%, transparent)) !important;
  outline: none;
}

.form-control:disabled,
.form-control[readonly] {
  opacity: var(--kds-input-disabled-opacity, 0.55);
  background: var(--kodex-bg-subtle);
  cursor: not-allowed;
}

.form-control.has-error,
.has-error .form-control {
  border-color: var(--kds-input-border-error, var(--kpf-status-danger)) !important;
  box-shadow: 0 0 0 2px var(--kds-input-error-ring, color-mix(in srgb, var(--kpf-status-danger) 18%, transparent)) !important;
}

.form-group > label,
.control-label,
label.control-label {
  color: var(--kodex-label-color, var(--kpf-text-secondary));
  font-size: var(--kodex-label-font-size, 13px);
  font-weight: var(--kodex-label-font-weight, 500);
  line-height: var(--kodex-label-line-height, 1.3);
  margin-bottom: var(--kodex-label-margin-bottom, 6px);
}

/* Checkbox / radio alignment with density */
.checkbox label,
.radio label {
  font-size: max(14px, var(--kodex-font-size-body, 14px));
  color: var(--kpf-text-primary);
  font-weight: 400;
}

/* === kpf-kanban.css === */
/* KpfKanban */
.kan-ban-col, .kan-ban-content-wrapper {
  background: var(--kpf-surface-muted);
  border-radius: var(--kpf-radius-md);
}
.kan-ban-col .panel_s, .kanban-card {
  border-radius: var(--kpf-radius-md);
  border-color: var(--kpf-border);
}
.kan-ban-col-header {
  color: var(--kpf-text-primary);
  font-weight: 600;
}

/* === kpf-line-items.css === */
/* KpfLineItemsTable */
.table.items thead th, table.items thead th {
  background: var(--kpf-surface-muted);
  color: var(--kpf-table-head);
  border-color: var(--kpf-border);
}
.table.items tbody td, table.items tbody td {
  border-color: var(--kpf-border);
}

/* === kpf-modal.css === */
/* KpfModal — Perfex Bootstrap modals above Kodex shell chrome */
.modal-content {
  border-radius: var(--kpf-radius-md, 4px);
  border-color: var(--kpf-border, var(--kodex-border-default, #d3d6e0));
  background: var(--kpf-surface, var(--kodex-bg-surface, #fff));
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}
.modal-header {
  border-bottom-color: var(--kpf-border, var(--kodex-border-default, #d3d6e0));
  background: var(--kpf-surface, var(--kodex-bg-surface, #fff));
}
.modal-footer {
  border-top-color: var(--kpf-border, var(--kodex-border-default, #d3d6e0));
  background: var(--kpf-surface-muted, var(--kodex-bg-canvas, #f0f1f4));
}
.modal-title {
  color: var(--kpf-text-primary, var(--kodex-text-primary, #14141a));
  font-weight: 600;
}

/*
 * Shell deck / mega / bubbles sit at 1400–2800.
 * Bootstrap defaults (backdrop 1040 / modal 1050) leave the dimmer on top of the dialog
 * when the modal lives under #wrapper — especially contact edit.
 */
html body.app.admin .modal-backdrop {
  z-index: 3900 !important;
  pointer-events: auto !important;
}

html body.app.admin .modal-backdrop.fade.in,
html body.app.admin .modal-backdrop.show {
  opacity: 0.45 !important;
}

html body.app.admin .modal,
html body.app.admin .modal.fade.in,
html body.app.admin .modal.show,
html body.app.admin #contact.modal {
  z-index: 4000 !important;
  pointer-events: none !important;
}

html body.app.admin .modal .modal-dialog {
  pointer-events: auto !important;
  z-index: 4001 !important;
  position: relative !important;
}

/* #contact dialog positioning lives in kpf-slide-panel.css */

html body.app.admin .modal .modal-content {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Select/datepicker menus opened from a modal must clear the dialog */
html body.app.admin.modal-open .bootstrap-select.open .dropdown-menu,
html body.app.admin.modal-open .datepicker,
html body.app.admin.modal-open .xdsoft_datetimepicker {
  z-index: 4100 !important;
}

/* === kpf-notifications.css === */
/* KpfNotifications */
#header .notifications,
.notification-box {
  background: var(--kpf-surface);
  border-color: var(--kpf-border);
  border-radius: var(--kpf-radius-md);
}
/* Never paint the header bell host white — only the dropdown panel */
html body.app.admin #header .notifications-wrapper,
html body.app.admin #header li.notifications-wrapper,
html body.app.admin #header li.header-notifications {
  background: transparent !important;
  box-shadow: none !important;
}
html body.app.admin #header .notifications-wrapper > a.notifications-icon,
html body.app.admin #header .notifications-wrapper > a.kodex-crm-admin__utility,
html body.app.admin #header li.header-notifications > a {
  background: color-mix(in srgb, #fff 6%, transparent) !important;
  color: color-mix(in srgb, #fff 78%, transparent) !important;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent) !important;
}
html body.app.admin #header .notifications-wrapper > a.notifications-icon:hover,
html body.app.admin #header .notifications-wrapper.open > a.notifications-icon,
html body.app.admin #header li.header-notifications.open > a,
html body.app.admin #header .notifications-wrapper > a.kodex-crm-admin__utility:hover {
  background: #fff !important;
  color: #001d3a !important;
  border-color: #fff !important;
}
html body.app.admin #header .notifications-wrapper > a.notifications-icon i,
html body.app.admin #header .notifications-wrapper > a.notifications-icon svg,
html body.app.admin #header .notifications-wrapper > a.notifications-icon .kpf-icon,
html body.app.admin #header li.header-notifications > a i,
html body.app.admin #header li.header-notifications > a svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Unread: cobalt tile + white bell + ringing */
html body.app.admin #header a.notifications-icon.kodex-crm-admin__notify--unread,
html body.app.admin #header .notifications-wrapper > a.kodex-crm-admin__notify--unread,
html body.app.admin #header li.header-notifications > a.kodex-crm-admin__notify--unread,
html body.app.admin #header li.kodex-crm-admin__notify-host--unread > a.notifications-icon,
html body.app.admin #header li.kodex-crm-admin__notify-host--unread > a.kodex-crm-admin__utility {
  background: #001bff !important;
  color: #ffffff !important;
  border-color: #001bff !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #001bff 40%, transparent) !important;
}

html body.app.admin #header a.kodex-crm-admin__notify--unread:hover,
html body.app.admin #header a.kodex-crm-admin__notify--unread:focus,
html body.app.admin #header .notifications-wrapper.open > a.kodex-crm-admin__notify--unread,
html body.app.admin #header li.kodex-crm-admin__notify-host--unread.open > a {
  background: #001bff !important;
  color: #ffffff !important;
  border-color: #001bff !important;
  filter: brightness(1.06);
}

html body.app.admin #header a.kodex-crm-admin__notify--unread i,
html body.app.admin #header a.kodex-crm-admin__notify--unread svg,
html body.app.admin #header a.kodex-crm-admin__notify--unread .kpf-icon,
html body.app.admin #header li.kodex-crm-admin__notify-host--unread > a i,
html body.app.admin #header li.kodex-crm-admin__notify-host--unread > a svg,
html body.app.admin #header li.kodex-crm-admin__notify-host--unread > a .kpf-icon {
  color: #ffffff !important;
  stroke: currentColor !important;
  fill: none !important;
  transform-origin: 50% 0% !important;
  animation: kpf-bell-ring 1.25s ease-in-out infinite !important;
}

html body.app.admin #header a.kodex-crm-admin__notify--unread .kodex-crm-admin__utility-dot,
html body.app.admin #header a.kodex-crm-admin__notify--unread .icon-notifications {
  background: #ffffff !important;
  color: #001bff !important;
  box-shadow: 0 0 0 1px #001bff !important;
}

@keyframes kpf-bell-ring {
  0%,
  100% {
    transform: rotate(0deg);
  }
  8% {
    transform: rotate(16deg);
  }
  16% {
    transform: rotate(-14deg);
  }
  24% {
    transform: rotate(12deg);
  }
  32% {
    transform: rotate(-10deg);
  }
  40% {
    transform: rotate(6deg);
  }
  48% {
    transform: rotate(-3deg);
  }
  56%,
  100% {
    transform: rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.app.admin #header a.kodex-crm-admin__notify--unread i,
  html body.app.admin #header a.kodex-crm-admin__notify--unread svg,
  html body.app.admin #header li.kodex-crm-admin__notify-host--unread > a i,
  html body.app.admin #header li.kodex-crm-admin__notify-host--unread > a svg {
    animation: none !important;
  }
}

.notification-box .notification-link:hover {
  background: color-mix(in srgb, var(--kpf-action-primary) 8%, transparent);
}

/* === kpf-pagination.css === */
/* KpfPagination */
.pagination > li > a, .paginate_button {
  border-radius: var(--kpf-radius-sm);
  border-color: var(--kpf-border);
  color: var(--kpf-text-primary);
}
.pagination > .active > a, .paginate_button.current {
  background: var(--kpf-action-primary);
  border-color: var(--kpf-action-primary);
  color: var(--kpf-action-primary-fg);
}

/* === kpf-panel.css === */
/* KpfPanel — Perfex panels / boxes as Kodex surfaces */
.panel_s,
.panel,
.panel-default,
.box {
  background: var(--kpf-surface, var(--kodex-bg-surface, #fff)) !important;
  border: 1px solid var(--kpf-border, var(--kodex-border-default, #d3d6e0)) !important;
  border-radius: var(--kpf-radius-md, 4px) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, #14141a 5%, transparent) !important;
  overflow: hidden !important;
}

.panel_s .panel-body,
.panel-body,
.box .box-body {
  background: var(--kpf-surface, var(--kodex-bg-surface, #fff));
  color: var(--kpf-text-secondary, var(--kodex-text-secondary, #40424d));
}

.panel-heading,
.box-header {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kpf-action-primary, #001bff) 5%, #fff) 0%,
      var(--kpf-surface, #fff) 100%
    ) !important;
  border-bottom: 1px solid var(--kpf-border, #d3d6e0) !important;
  border-color: var(--kpf-border, #d3d6e0) !important;
  color: var(--kpf-text-primary, #14141a);
  font-weight: 600;
}

.panel-footer,
.box-footer {
  background: var(--kpf-surface-muted, var(--kodex-bg-canvas, #f0f1f4)) !important;
  border-top: 1px solid var(--kpf-border, #d3d6e0) !important;
}

/* === kpf-progress.css === */
/* KpfProgress */
.progress { background: var(--kpf-surface-muted); border-radius: var(--kpf-radius-sm); }
.progress-bar { background: var(--kpf-action-primary); }

/* === kpf-radio.css === */
/* KpfRadio */
input[type="radio"]:checked { accent-color: var(--kpf-action-primary); }

/* === kpf-report-layout.css === */
/* KpfReportLayout */
.reports .report-filters, .report-heading {
  background: var(--kpf-surface);
  border-radius: var(--kpf-radius-md);
  border: 1px solid var(--kpf-border);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* === kpf-report-widget.css === */
/* KpfReportWidget */
.reports .widget, .report-widget {
  background: var(--kpf-surface);
  border: 1px solid var(--kpf-border);
  border-radius: var(--kpf-radius-md);
}

/* === kpf-rich-text.css === */
/* KpfRichText */
.tox-tinymce, .mce-tinymce {
  border-color: var(--kpf-border) !important;
  border-radius: var(--kpf-radius-md);
}
.tox .tox-toolbar, .tox .tox-menubar {
  background: var(--kpf-surface-muted, var(--kpf-surface));
}
.tox .tox-tbtn--enabled {
  background: color-mix(in srgb, var(--kpf-action-primary) 12%, transparent);
}

/* === kpf-saas-shell.css === */
/* KpfSaasShell */
.perfex-saas, body.admin.perfex_saas {
  background: var(--kpf-bg-canvas);
}

/* === kpf-saas-widget.css === */
/* KpfSaasWidget */
.perfex-saas .widget, .saas-dashboard .widget, .tenant-card {
  background: var(--kpf-surface);
  border: 1px solid var(--kpf-border);
  border-radius: var(--kpf-radius-md);
}
.perfex-saas .widget-title, .tenant-card .title {
  color: var(--kpf-text-primary);
}
.perfex-saas a { color: var(--kpf-action-primary); }

/* === kpf-select.css === */
/* KpfSelect */
.bootstrap-select .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.btn-default {
  border-color: var(--kpf-input-border) !important;
  border-radius: var(--kpf-radius-sm) !important;
  background: var(--kpf-surface) !important;
  color: var(--kpf-text-primary) !important;
}
.bootstrap-select .dropdown-menu {
  border-color: var(--kpf-border);
  border-radius: var(--kpf-radius-md);
  box-shadow: var(--kpf-shadow-panel);
}
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li a:hover {
  background: color-mix(in srgb, var(--kpf-action-primary) 10%, transparent);
  color: var(--kpf-action-primary);
}
.select2-container--default .select2-selection--single {
  border-color: var(--kpf-input-border);
  border-radius: var(--kpf-radius-sm);
}

/* === kpf-select2.css === */
/* KpfSelect2 — DS-complete (Perfex Select2 chrome) */
.select2-container {
  font-family: var(--kpf-font-family, var(--kodex-font-family-sans));
  font-size: max(14px, var(--kodex-font-size-body, 14px));
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--kds-input-border, var(--kpf-border));
  border-radius: var(--kds-input-radius, var(--kodex-radius-sm, 4px));
  background: var(--kds-input-bg, var(--kpf-surface));
  min-height: var(--kpf-control-height, 36px);
  transition: border-color var(--kodex-motion-duration-hover, 120ms) ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--kds-input-fg, var(--kpf-text-primary));
  line-height: calc(var(--kpf-control-height, 36px) - 2px);
  padding-left: var(--kds-input-padding-x, 12px);
  padding-right: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--kpf-control-height, 36px) - 2px);
}

.select2-container--default .select2-selection--multiple {
  padding: 2px var(--kodex-space-1, 4px);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--kodex-bg-subtle);
  border: 1px solid var(--kpf-border);
  border-radius: var(--kodex-radius-sm, 4px);
  color: var(--kpf-text-primary);
  font-size: var(--kodex-font-size-label, 13px);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--kds-input-border-focus, var(--kpf-action-primary));
  box-shadow: 0 0 0 2px var(--kds-input-focus-ring, color-mix(in srgb, var(--kpf-action-primary) 22%, transparent));
}

.select2-dropdown {
  border: 1px solid var(--kpf-border);
  border-radius: var(--kodex-radius-md, 4px);
  background: var(--kpf-surface);
  box-shadow: var(--kodex-shadow-md, 0 4px 12px rgba(20, 20, 26, 0.12));
  z-index: 10050;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--kds-input-border, var(--kpf-border));
  border-radius: var(--kodex-radius-sm, 4px);
  padding: var(--kds-input-padding-y, 8px) var(--kds-input-padding-x, 12px);
  font-size: max(14px, var(--kodex-font-size-body, 14px));
}

.select2-container--default .select2-results__option {
  padding: var(--kodex-space-2, 8px) var(--kodex-space-3, 12px);
  color: var(--kpf-text-primary);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--kpf-action-primary);
  color: var(--kpf-action-primary-fg);
}

.select2-container--default .select2-results__option[aria-selected='true'] {
  background: color-mix(in srgb, var(--kpf-action-primary) 10%, var(--kpf-surface));
  color: var(--kpf-text-primary);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
  opacity: var(--kds-input-disabled-opacity, 0.55);
  background: var(--kodex-bg-subtle);
}

/* === kpf-setup-menu.css === */
/* KpfSetupMenu */
#setup-menu, #setup-menu-wrapper {
  background: var(--kpf-sidebar-bg, var(--kpf-surface));
  border-color: var(--kpf-border);
}
#setup-menu a { color: var(--kpf-text-primary); }
#setup-menu a:hover, #setup-menu li.active > a {
  color: var(--kpf-action-primary);
  background: color-mix(in srgb, var(--kpf-action-primary) 8%, transparent);
}

/* === kpf-shell-header.css === */
/* KpfShellHeader */
.admin #header {
  background: var(--kpf-header-bg) !important;
  border-bottom: 1px solid var(--kpf-border) !important;
}
.admin #header .navbar-nav > li > a {
  color: var(--kpf-text-primary);
}

/* === kpf-shell-sidebar.css === */
/* KpfShellSidebar */
.admin .sidebar, .admin #menu, .admin #side-menu {
  background: var(--kpf-sidebar-bg) !important;
}
.admin #side-menu > li > a, .admin #side-menu li a {
  color: var(--kpf-sidebar-text);
}
.admin #side-menu li.active > a,
.admin #side-menu li.active > a:focus,
.admin #side-menu li.active > a:hover {
  background: color-mix(in srgb, var(--kpf-sidebar-active) 18%, transparent) !important;
  color: var(--kpf-sidebar-active) !important;
  border-left-color: var(--kpf-sidebar-active);
}
.admin #side-menu li > a:hover {
  color: #fff;
  background: color-mix(in srgb, var(--kpf-sidebar-text) 8%, transparent);
}
.admin .nav-second-level li a { color: var(--kpf-sidebar-text); }

/* === kpf-stat-card.css === */
/* KpfStatCard */
#dashboard .widget, .widget, .top_stats_wrapper {
  background: var(--kpf-surface);
  border: 1px solid var(--kpf-border);
  border-radius: var(--kpf-radius-md);
  box-shadow: var(--kpf-shadow-panel);
}

/* === kpf-tabs.css === */
/* KpfTabs — Perfex .nav-tabs / segmented / horizontal (light + dark) */

.nav-tabs {
  border-bottom-color: var(--kpf-border, var(--kodex-border-default, #d3d6e0));
}

.nav-tabs > li > a {
  border-radius: var(--kpf-radius-sm, 4px) var(--kpf-radius-sm, 4px) 0 0;
  color: var(--kpf-text-secondary, var(--kodex-text-secondary, #40424d));
}

.nav-tabs > li > a:hover {
  border-color: var(--kpf-border, var(--kodex-border-default, #d3d6e0));
  background: var(--kpf-surface-muted, var(--kodex-bg-subtle, #f5f5f5));
  color: var(--kpf-text-primary, var(--kodex-text-primary, #14141a));
}

/* Underline / classic tabs — active = cobalt fill + white label */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs > li > a.active {
  color: #ffffff !important;
  background: var(--kpf-action-primary, var(--kodex-action-primary, #001bff)) !important;
  border-color: var(--kpf-action-primary, var(--kodex-action-primary, #001bff)) !important;
  border-bottom-color: var(--kpf-action-primary, var(--kodex-action-primary, #001bff)) !important;
}

/* —— Segmented control (Staff / Notes / …) —— */
html body.app.admin .nav-tabs-segmented,
html body.app.admin .horizontal-scrollable-tabs .nav-tabs-segmented {
  background: color-mix(in srgb, var(--kodex-text-primary, #14141a) 6%, var(--kodex-bg-surface, #fff)) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  padding: 3px !important;
  border-bottom: 1px solid var(--kodex-border-default, #d3d6e0) !important;
}

html body.app.admin .nav-tabs-segmented.nav-tabs,
html body.app.admin .nav-tabs-segmented > li > a,
html body.app.admin .nav-tabs-segmented > li.active > a {
  border-bottom: 0 !important;
}

html body.app.admin .nav-tabs-segmented > li > a {
  color: var(--kodex-text-secondary, #40424d) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body.app.admin .nav-tabs-segmented > li > a:hover,
html body.app.admin .nav-tabs-segmented > li > a:focus {
  color: var(--kodex-text-primary, #14141a) !important;
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 8%, transparent) !important;
  border: 0 !important;
}

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-tabs-segmented .open > a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--kodex-action-primary, #001bff) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--kodex-action-primary, #001bff) 28%, transparent) !important;
}

html body.app.admin:not(.kodex-crm-admin--ui-dark) .nav-tabs-segmented > li.active > a:hover {
  color: var(--kodex-action-primary, #001bff) !important;
  -webkit-text-fill-color: var(--kodex-action-primary, #001bff) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px var(--kodex-action-primary, #001bff) !important;
}

/* Beat Perfex / Tailwind white utilities on tabs */
html body.app.admin .nav-tabs-segmented > li.active > a.tw-bg-white,
html body.app.admin .nav-tabs-segmented > li.active > a.\!tw-bg-white,
html body.app.admin .nav-tabs > li.active > a.tw-bg-white,
html body.app.admin .nav-tabs > li.active > a.\!tw-bg-white,
html body.app.admin .nav-tabs > li.active > a[class*='tw-bg-white'] {
  background: var(--kodex-action-primary, #001bff) !important;
  color: #ffffff !important;
}

html body.app.admin .horizontal-scrollable-tabs .nav-tabs > li.active > a {
  color: #ffffff !important;
  background: var(--kodex-action-primary, #001bff) !important;
  border-color: var(--kodex-action-primary, #001bff) !important;
  font-weight: 600 !important;
}

/* Horizontal tab strips forced white by markup (`!tw-bg-white`) */
html body.app.admin ul.nav-tabs.tw-bg-white,
html body.app.admin ul.nav-tabs.\!tw-bg-white,
html body.app.admin ul.nav-tabs[class*='tw-bg-white'],
html body.app.admin .panel-full-width-tabs > ul.nav-tabs {
  background: var(--kodex-bg-surface, #ffffff) !important;
  border-bottom: 1px solid var(--kodex-border-default, #d3d6e0) !important;
}

/* —— Dark mode —— */
html body.app.admin.kodex-crm-admin--ui-dark .nav-tabs,
html[data-theme='dark'] body.app.admin .nav-tabs {
  border-bottom-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .nav-tabs > li > a,
html[data-theme='dark'] body.app.admin .nav-tabs > li > a {
  color: #c5c8d4 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .nav-tabs > li > a:hover,
html[data-theme='dark'] body.app.admin .nav-tabs > li > a:hover {
  background: #252530 !important;
  color: #e8e9ed !important;
  border-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .nav-tabs > li.active > a,
html body.app.admin.kodex-crm-admin--ui-dark .nav-tabs > li.active > a:hover,
html body.app.admin.kodex-crm-admin--ui-dark .nav-tabs > li.active > a:focus,
html[data-theme='dark'] body.app.admin .nav-tabs > li.active > a {
  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 .nav-tabs-segmented,
html body.app.admin.kodex-crm-admin--ui-dark .horizontal-scrollable-tabs .nav-tabs-segmented,
html[data-theme='dark'] body.app.admin .nav-tabs-segmented {
  background: #1e1e24 !important;
  border-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .nav-tabs-segmented > li > a,
html[data-theme='dark'] body.app.admin .nav-tabs-segmented > li > a {
  color: #c5c8d4 !important;
  background: transparent !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .nav-tabs-segmented > li > a:hover,
html[data-theme='dark'] body.app.admin .nav-tabs-segmented > li > a:hover {
  color: #e8e9ed !important;
  background: #252530 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .nav-tabs-segmented > li.active > a,
html body.app.admin.kodex-crm-admin--ui-dark .nav-tabs-segmented > li.active > a:hover,
html body.app.admin.kodex-crm-admin--ui-dark .nav-tabs-segmented > li.active > a:focus,
html[data-theme='dark'] body.app.admin .nav-tabs-segmented > li.active > a {
  color: #ffffff !important;
  background: var(--kodex-action-primary, #001bff) !important;
}

/* Kill forced white tab bars / active pills in dark */
html body.app.admin.kodex-crm-admin--ui-dark ul.nav-tabs.tw-bg-white,
html body.app.admin.kodex-crm-admin--ui-dark ul.nav-tabs.\!tw-bg-white,
html body.app.admin.kodex-crm-admin--ui-dark ul.nav-tabs[class*='tw-bg-white'],
html body.app.admin.kodex-crm-admin--ui-dark .panel-full-width-tabs > ul.nav-tabs,
html body.app.admin.kodex-crm-admin--ui-dark .\!tw-bg-white,
html body.app.admin.kodex-crm-admin--ui-dark [class~='!tw-bg-white'],
html[data-theme='dark'] body.app.admin ul.nav-tabs[class*='tw-bg-white'],
html[data-theme='dark'] body.app.admin .panel-full-width-tabs > ul.nav-tabs {
  background: #1e1e24 !important;
  border-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .horizontal-scrollable-tabs:has(.nav-tabs-segmented) .scroller,
html[data-theme='dark'] body.app.admin .horizontal-scrollable-tabs:has(.nav-tabs-segmented) .scroller {
  background: #1e1e24 !important;
  border-color: transparent !important;
  color: #c5c8d4 !important;
}

/* KpfTag */
.bootstrap-tagsinput, .tagsinput {
  border-color: var(--kpf-border);
  border-radius: var(--kpf-radius-sm);
  background: var(--kpf-surface);
}
.tag, .bootstrap-tagsinput .tag {
  background: color-mix(in srgb, var(--kpf-action-primary) 12%, transparent);
  color: var(--kpf-action-primary);
}

/* === kpf-textarea.css === */
/* KpfTextarea */
textarea.form-control {
  border-color: var(--kpf-input-border);
  border-radius: var(--kpf-radius-sm);
}
textarea.form-control:focus {
  border-color: var(--kpf-input-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpf-input-focus) 20%, transparent);
}

/* === kpf-toast.css === */
/* KpfToast */
#alerts .alert, .alert {
  border-radius: var(--kpf-radius-md);
  border-width: 1px;
}
.alert-success { border-color: var(--kpf-status-success); }
.alert-warning { border-color: var(--kpf-status-warning); }
.alert-danger { border-color: var(--kpf-status-danger); }
.alert-info { border-color: var(--kpf-status-info); }

/* === kpf-tooltip.css === */
/* KpfTooltip */
.tooltip-inner {
  background: var(--kpf-text-primary);
  color: var(--kpf-action-primary-fg);
  border-radius: var(--kpf-radius-sm);
  font-size: 12px;
}

/* === kpf-top-search.css === */
/* KpfTopSearch → collapsed icon; expands to chat composer on click */

#top_search,
#search_input,
.top_search input {
  border-color: var(--kpf-border);
  border-radius: var(--kpf-radius-sm);
  background: var(--kpf-surface);
}

#top_search:focus,
#search_input:focus {
  border-color: var(--kpf-action-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpf-action-primary) 18%, transparent);
}

/* —— Collapsed (default): only assistant button —— */
html body.app.admin #header #top_search.kpf-top-chat {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 6px !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  overflow: visible !important;
  transition: width 180ms ease, max-width 180ms ease, min-width 180ms ease !important;
}

html body.app.admin #header #top_search.kpf-top-chat:not(.kpf-top-chat--open) #search_input,
html body.app.admin #header #top_search.kpf-top-chat:not(.kpf-top-chat--open) input#search_input {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

html body.app.admin #header #top_search.kpf-top-chat:not(.kpf-top-chat--open) #top_search_button {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
}

html body.app.admin #header #top_search.kpf-top-chat:not(.kpf-top-chat--open) #top_search_button button.kpf-top-chat__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent) !important;
  background: var(--kodex-crm-admin-ink-elevated, color-mix(in srgb, #fff 8%, transparent)) !important;
  color: color-mix(in srgb, #001bff 70%, #f7f7f7) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease !important;
}

html body.app.admin #header #top_search.kpf-top-chat:not(.kpf-top-chat--open) #top_search_button button.kpf-top-chat__btn:hover {
  border-color: color-mix(in srgb, #001bff 45%, #fff) !important;
  background: color-mix(in srgb, #001bff 16%, transparent) !important;
  color: #8fa0ff !important;
}

/* —— Open: full chat composer —— */
html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: min(280px, 42vw) !important;
  max-width: min(520px, 48vw) !important;
  height: auto !important;
  justify-content: stretch !important;
}

html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open #search_input,
html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open input#search_input,
html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open #search_input.kpf-top-chat__input {
  position: relative !important;
  clip: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  height: 36px !important;
  margin-top: 0 !important;
  padding-inline: 40px 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  background: var(--kds-chat-composer-field-bg, var(--kodex-crm-admin-ink-elevated)) !important;
  border: 1px solid var(--kds-chat-composer-field-border, color-mix(in srgb, #fff 12%, transparent)) !important;
  border-radius: 999px !important;
  /* Typed text: cobalt in light UI */
  color: #001bff !important;
  caret-color: #001bff !important;
  -webkit-text-fill-color: #001bff !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, opacity 160ms ease, color 160ms ease !important;
}

/* Dark UI: typed text orange */
html body.app.admin.kodex-crm-admin--ui-dark #header #top_search.kpf-top-chat.kpf-top-chat--open #search_input,
html body.app.admin.kodex-crm-admin--ui-dark #header #top_search.kpf-top-chat.kpf-top-chat--open input#search_input,
html body.app.admin.kodex-crm-admin--ui-dark #header #top_search.kpf-top-chat.kpf-top-chat--open #search_input.kpf-top-chat__input,
html[data-theme='dark'] body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open #search_input,
html[data-theme='dark'] body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open input#search_input {
  color: #fa4616 !important;
  caret-color: #fa4616 !important;
  -webkit-text-fill-color: #fa4616 !important;
}

html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open #search_input::placeholder,
html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open #search_input.kpf-top-chat__input::placeholder {
  color: var(--kodex-crm-admin-ink-muted, color-mix(in srgb, #f7f7f7 55%, transparent)) !important;
  opacity: 1 !important;
  font-weight: 450 !important;
}

html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open #search_input:focus,
html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open #search_input.kpf-top-chat__input:focus {
  border-color: color-mix(in srgb, #001bff 55%, #fff) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, #001bff 28%, transparent) !important;
  outline: none !important;
}

html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open #top_search_button {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  inset-inline-start: 6px !important;
  width: auto !important;
  height: auto !important;
}

html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open #top_search_button button.kpf-top-chat__btn {
  width: auto !important;
  height: auto !important;
  padding: 8px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: color-mix(in srgb, #001bff 70%, #f7f7f7) !important;
}

html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open:focus-within #top_search_button .kpf-top-chat__glyph,
html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open:focus-within #top_search_button .kpf-top-chat__bubble {
  color: #8fa0ff !important;
}

/* Always-on writing indicator */
html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__glyph {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__bubble {
  display: none !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__typing,
html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__typing--on {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.5px !important;
  width: 16px !important;
  height: 16px !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__dot {
  display: block !important;
  width: 3.5px !important;
  height: 3.5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  opacity: 0.35;
  transform: translateY(0);
  animation: kpf-top-chat-dot 1.15s ease-in-out infinite !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__dot:nth-child(1) {
  animation-delay: 0s !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__dot:nth-child(2) {
  animation-delay: 0.16s !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__dot:nth-child(3) {
  animation-delay: 0.32s !important;
}

@keyframes kpf-top-chat-dot {
  0%,
  70%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  35% {
    transform: translateY(-3.5px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__dot {
    animation: none !important;
    opacity: 0.75 !important;
    transform: none !important;
  }

  html body.app.admin #header #top_search.kpf-top-chat {
    transition: none !important;
  }
}

@media (max-width: 720px) {
  html body.app.admin #header #top_search.kpf-top-chat.kpf-top-chat--open {
    min-width: min(200px, 56vw) !important;
    max-width: min(320px, 70vw) !important;
  }
}
/* === kpf-totals-bar.css === */
/* KpfTotalsBar */
.total, .invoice-total, .estimate-total {
  color: var(--kpf-text-primary);
}
.total_row .bold, tr.bold td {
  color: var(--kpf-text-primary);
}

/* === kpf-tw-skin.css === */
/* KpfTwSkin — map Perfex Tailwind utility chrome to Kodex tokens */
.tw-text-primary,
.text-primary {
  color: var(--kpf-action-primary) !important;
}
.tw-text-neutral-700,
.tw-text-neutral-600,
.tw-text-slate-600,
.tw-text-gray-600 {
  color: var(--kpf-text-secondary) !important;
}
.tw-text-neutral-500,
.tw-text-slate-500,
.tw-text-gray-500,
.tw-text-muted,
.text-muted {
  color: var(--kpf-text-muted) !important;
}
.tw-text-neutral-900,
.tw-text-slate-900,
.tw-text-gray-900 {
  color: var(--kpf-text-primary) !important;
}

.tw-bg-primary {
  background-color: var(--kpf-action-primary) !important;
  color: var(--kpf-action-primary-fg, #ffffff) !important;
}
.tw-bg-white,
.tw-bg-neutral-50,
.tw-bg-slate-50,
.tw-bg-gray-50 {
  background-color: var(--kpf-surface) !important;
}

/* Important Tailwind white — map to surface (dark = charcoal, not #fff) */
html body.app.admin .\!tw-bg-white,
html body.app.admin [class~='!tw-bg-white'],
html body.app.admin [class*='!tw-bg-white'] {
  background-color: var(--kpf-surface, var(--kodex-bg-surface, #fff)) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .tw-bg-white,
html body.app.admin.kodex-crm-admin--ui-dark .\!tw-bg-white,
html body.app.admin.kodex-crm-admin--ui-dark [class~='!tw-bg-white'],
html body.app.admin.kodex-crm-admin--ui-dark [class*='!tw-bg-white'],
html[data-theme='dark'] body.app.admin .tw-bg-white,
html[data-theme='dark'] body.app.admin .\!tw-bg-white,
html[data-theme='dark'] body.app.admin [class*='!tw-bg-white'] {
  background-color: var(--kodex-bg-surface, #1e1e24) !important;
}
.tw-bg-neutral-100,
.tw-bg-slate-100,
.tw-bg-gray-100,
.tw-bg-muted {
  background-color: var(--kodex-bg-subtle, var(--kpf-surface-muted)) !important;
}

.tw-border,
.tw-border-solid {
  border-color: var(--kpf-border) !important;
}
.tw-border-neutral-200,
.tw-border-slate-200,
.tw-border-gray-200,
.tw-border-neutral-300 {
  border-color: var(--kpf-border) !important;
}
.tw-border-primary {
  border-color: var(--kpf-action-primary) !important;
}

.tw-ring-primary {
  --tw-ring-color: var(--kpf-action-primary);
}
.tw-ring-offset-2:focus,
.focus\:tw-ring-2:focus {
  --tw-ring-color: var(--kodex-focus-ring, var(--kpf-action-primary));
}

/* Radius — BD-16: 4px, never pill CTAs */
.tw-rounded,
.tw-rounded-md,
.tw-rounded-sm,
.tw-rounded-lg {
  border-radius: var(--kodex-radius-md, 4px) !important;
}
.tw-rounded-full {
  /* allow only on avatars/switches; neutralize pill buttons */
}
.btn.tw-rounded-full,
a.btn.tw-rounded-full,
button.tw-rounded-full {
  border-radius: var(--kodex-radius-sm, 4px) !important;
}

.tw-shadow-sm,
.tw-shadow {
  box-shadow: var(--kodex-shadow-sm, var(--kpf-shadow-panel)) !important;
}
.tw-shadow-md {
  box-shadow: var(--kodex-shadow-md, 0 4px 12px rgba(20, 20, 26, 0.1)) !important;
}

/* Spacing density — prefer token scale when utilities set common paddings */
.tw-px-4 {
  padding-left: var(--kodex-space-4, 16px) !important;
  padding-right: var(--kodex-space-4, 16px) !important;
}
.tw-py-2 {
  padding-top: var(--kodex-space-2, 8px) !important;
  padding-bottom: var(--kodex-space-2, 8px) !important;
}
.tw-py-3 {
  padding-top: var(--kodex-space-3, 12px) !important;
  padding-bottom: var(--kodex-space-3, 12px) !important;
}
.tw-p-4 {
  padding: var(--kodex-space-4, 16px) !important;
}
.tw-gap-2 {
  gap: var(--kodex-space-2, 8px) !important;
}
.tw-gap-3 {
  gap: var(--kodex-space-3, 12px) !important;
}
.tw-gap-4 {
  gap: var(--kodex-space-4, 16px) !important;
}

/* Links owned by kpf-typography-links.css (DS: table/nav anchors ≠ CTA blue) */

/* Bootstrap / Perfex blue utilities → Kodex primary (+ on-primary ink) */
.bg-primary {
  background-color: var(--kpf-action-primary) !important;
  color: var(--kpf-action-primary-fg, #ffffff) !important;
}
.border-primary {
  border-color: var(--kpf-action-primary) !important;
}
.label-primary,
.badge-primary {
  background-color: var(--kpf-action-primary) !important;
  color: var(--kpf-action-primary-fg, #ffffff) !important;
}

/* Always-on writing indicator: 3 bouncing dots (bubble outline optional/hidden) */
html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__glyph {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__bubble {
  display: none !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__typing,
html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__typing--on {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.5px !important;
  width: 16px !important;
  height: 16px !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__dot {
  display: block !important;
  width: 3.5px !important;
  height: 3.5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  opacity: 0.35;
  transform: translateY(0);
  animation: kpf-top-chat-dot 1.15s ease-in-out infinite !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__dot:nth-child(1) {
  animation-delay: 0s !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__dot:nth-child(2) {
  animation-delay: 0.16s !important;
}

html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__dot:nth-child(3) {
  animation-delay: 0.32s !important;
}

@keyframes kpf-top-chat-dot {
  0%,
  70%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  35% {
    transform: translateY(-3.5px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.app.admin #header #top_search.kpf-top-chat .kpf-top-chat__dot {
    animation: none !important;
    opacity: 0.75 !important;
    transform: none !important;
  }
}