/**
 * Kodex Theme — Perfex / Bootstrap / AdminLTE design purge
 * When kodex_theme is active, no classic Perfex chrome should remain visible.
 * Loads LAST. All colors resolve through --kodex-* / --kpf-* tokens.
 */

/* —— Remap Bootstrap / Perfex CSS custom props if present —— */
html body.app.admin,
html body.app,
html body.customers,
html body.login_admin,
html[data-theme='light'],
html[data-theme='dark'] {
  --bs-primary: var(--kodex-action-primary, #001bff) !important;
  --bs-info: var(--kodex-action-primary, #001bff) !important;
  --bs-success: var(--kodex-feedback-success, #0d7a4e) !important;
  --bs-warning: var(--kodex-feedback-warning, #fa4616) !important;
  --bs-danger: var(--kodex-feedback-error, #c41e3a) !important;
  --bs-secondary: var(--kodex-text-muted, #6e7180) !important;
  --bs-body-bg: var(--kodex-bg-canvas, #f0f1f4) !important;
  --bs-body-color: var(--kodex-text-primary, #14141a) !important;
  --bs-border-color: var(--kodex-border-default, #d3d6e0) !important;
  --bs-link-color: var(--kodex-action-primary, #001bff) !important;
  --bs-font-sans-serif: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
}

/* —— Nuke classic Perfex / Bootstrap hex leftovers by attribute/class —— */
html body.app.admin .bg-info,
html body.app.admin .bg-teal,
html body.app.admin .bg-aqua,
html body.app.admin .label-info,
html body.app.admin .badge-info,
html body.app.admin .progress-bar-info,
html body.app.admin .alert-info,
html body.app.admin .btn-info,
html body.app.admin .text-info {
  background-color: var(--kpf-action-primary) !important;
  border-color: var(--kpf-action-primary) !important;
  color: #fff !important;
}

html body.app.admin .text-info {
  background: transparent !important;
  color: var(--kpf-action-primary) !important;
}

html body.app.admin .bg-success,
html body.app.admin .label-success,
html body.app.admin .badge-success,
html body.app.admin .progress-bar-success,
html body.app.admin .alert-success,
html body.app.admin .btn-success {
  background-color: var(--kpf-status-success) !important;
  border-color: var(--kpf-status-success) !important;
  color: #fff !important;
}

html body.app.admin .text-success {
  background: transparent !important;
  color: var(--kpf-status-success) !important;
}

html body.app.admin .bg-warning,
html body.app.admin .label-warning,
html body.app.admin .badge-warning,
html body.app.admin .progress-bar-warning,
html body.app.admin .alert-warning,
html body.app.admin .btn-warning {
  background-color: var(--kpf-status-warning) !important;
  border-color: var(--kpf-status-warning) !important;
  color: #fff !important;
}

html body.app.admin .text-warning {
  background: transparent !important;
  color: var(--kpf-status-warning) !important;
}

html body.app.admin .bg-danger,
html body.app.admin .label-danger,
html body.app.admin .badge-danger,
html body.app.admin .progress-bar-danger,
html body.app.admin .alert-danger,
html body.app.admin .btn-danger {
  background-color: var(--kpf-status-danger) !important;
  border-color: var(--kpf-status-danger) !important;
  color: #fff !important;
}

html body.app.admin .text-danger {
  background: transparent !important;
  color: var(--kpf-status-danger) !important;
}

html body.app.admin .bg-primary,
html body.app.admin .label-primary,
html body.app.admin .badge-primary,
html body.app.admin .progress-bar-primary,
html body.app.admin .btn-primary {
  background-color: var(--kpf-action-primary) !important;
  border-color: var(--kpf-action-primary) !important;
  color: #fff !important;
}

html body.app.admin .text-primary {
  background: transparent !important;
  color: var(--kpf-action-primary) !important;
}

/* Classic Perfex sidebar charcoal / teal / green — never show */
html body.app.admin .sidebar:not(.kodex-crm-admin__rail),
html body.app.admin #setup-menu-wrapper.sidebar {
  /* rail already owned by shell; ensure no gray AdminLTE bleed */
}

/* —— Alerts as Kodex surfaces —— */
html body.app.admin .alert {
  border-radius: var(--kpf-radius-md) !important;
  font-family: var(--kpf-font-family) !important;
  box-shadow: none !important;
}

html body.app.admin .alert-info {
  background: var(--kodex-feedback-info-bg, color-mix(in srgb, var(--kpf-action-primary) 12%, var(--kpf-surface))) !important;
  border: 1px solid color-mix(in srgb, var(--kpf-action-primary) 28%, transparent) !important;
  color: var(--kpf-text-primary) !important;
}

html body.app.admin .alert-success {
  background: var(--kodex-feedback-success-bg, color-mix(in srgb, var(--kpf-status-success) 12%, var(--kpf-surface))) !important;
  border: 1px solid color-mix(in srgb, var(--kpf-status-success) 28%, transparent) !important;
  color: var(--kpf-text-primary) !important;
}

html body.app.admin .alert-warning {
  background: var(--kodex-feedback-warning-bg, color-mix(in srgb, var(--kpf-status-warning) 12%, var(--kpf-surface))) !important;
  border: 1px solid color-mix(in srgb, var(--kpf-status-warning) 28%, transparent) !important;
  color: var(--kpf-text-primary) !important;
}

html body.app.admin .alert-danger {
  background: var(--kodex-feedback-error-bg, color-mix(in srgb, var(--kpf-status-danger) 12%, var(--kpf-surface))) !important;
  border: 1px solid color-mix(in srgb, var(--kpf-status-danger) 28%, transparent) !important;
  color: var(--kpf-text-primary) !important;
}

/* —— Tabs / pills —— */
html body.app.admin .nav-tabs > li > a,
html body.app.admin .nav-pills > li > a {
  border-radius: var(--kpf-radius-sm) !important;
  color: var(--kpf-text-secondary) !important;
  font-family: var(--kpf-font-family) !important;
}

html body.app.admin .nav-tabs > li.active > a,
html body.app.admin .nav-tabs > li.active > a:hover,
html body.app.admin .nav-tabs > li.active > a:focus,
html body.app.admin .nav-pills > li.active > a {
  background: var(--kpf-action-primary) !important;
  border-color: var(--kpf-action-primary) !important;
  color: #fff !important;
}

html body.app.admin .nav-tabs {
  border-bottom-color: var(--kpf-border) !important;
}

/* —— Pagination —— */
html body.app.admin .pagination > li > a,
html body.app.admin .pagination > li > span,
html body.app.admin .dataTables_paginate .paginate_button {
  border-radius: var(--kpf-radius-sm) !important;
  border-color: var(--kpf-border) !important;
  color: var(--kpf-text-secondary) !important;
  background: var(--kpf-surface) !important;
  font-family: var(--kpf-font-family) !important;
}

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

/* —— Dropdowns / Select2 / tags —— */
html body.app.admin .dropdown-menu {
  border-radius: var(--kpf-radius-md) !important;
  border: 1px solid var(--kpf-border) !important;
  background: var(--kpf-surface) !important;
  box-shadow: 0 12px 32px color-mix(in srgb, #000 14%, transparent) !important;
  font-family: var(--kpf-font-family) !important;
}

html body.app.admin .dropdown-menu > li > a {
  color: var(--kpf-text-primary) !important;
}

html body.app.admin .dropdown-menu > li > a:hover,
html body.app.admin .dropdown-menu > .active > a {
  background: color-mix(in srgb, var(--kpf-action-primary) 8%, transparent) !important;
  color: var(--kpf-action-primary) !important;
}

html body.app.admin .select2-container--default .select2-selection--single,
html body.app.admin .select2-container--default .select2-selection--multiple,
html body.app.admin .select2-dropdown {
  border-color: var(--kpf-border) !important;
  border-radius: var(--kpf-radius-sm) !important;
  background: var(--kpf-surface) !important;
  color: var(--kpf-text-primary) !important;
}

html body.app.admin .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--kpf-action-primary) !important;
  color: #fff !important;
}

html body.app.admin .tagit .tagit-label,
html body.app.admin .tagsinput .tag {
  background: color-mix(in srgb, var(--kpf-action-primary) 14%, var(--kpf-surface)) !important;
  border-color: color-mix(in srgb, var(--kpf-action-primary) 30%, transparent) !important;
  color: var(--kpf-action-primary) !important;
  border-radius: var(--kpf-radius-sm) !important;
}

/* —— Progress —— */
html body.app.admin .progress {
  background: var(--kpf-surface-muted) !important;
  border-radius: var(--kpf-radius-sm) !important;
  box-shadow: none !important;
}

html body.app.admin .progress-bar {
  background-color: var(--kpf-action-primary) !important;
}

/* —— Modals —— */
/* Shell chrome is 1400–2800; Bootstrap defaults (1040/1050) leave the dialog under the overlay. */
html body.app.admin .modal-backdrop {
  z-index: 3900 !important;
}
html body.app.admin .modal,
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 uses fixed right drawer — see kpf-slide-panel.css (loaded after purge) */
html body.app.admin #contact.modal .modal-dialog {
  pointer-events: auto !important;
  z-index: 4001 !important;
  position: fixed !important;
}
html body.app.admin .modal-content {
  border-radius: var(--kpf-radius-md) !important;
  border: 1px solid var(--kpf-border) !important;
  background: var(--kpf-surface) !important;
  box-shadow: 0 24px 64px color-mix(in srgb, #000 22%, transparent) !important;
  pointer-events: auto !important;
}

html body.app.admin .modal-header,
html body.app.admin .modal-footer {
  border-color: var(--kpf-border) !important;
  background: var(--kpf-surface) !important;
}

html body.app.admin .modal-title {
  font-family: var(--kodex-font-display, var(--kpf-font-family)) !important;
  color: var(--kpf-text-primary) !important;
}

/* —— DataTables chrome —— */
html body.app.admin .dataTables_wrapper .dataTables_length select,
html body.app.admin .dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--kpf-border) !important;
  border-radius: var(--kpf-radius-sm) !important;
  background: var(--kpf-surface) !important;
  color: var(--kpf-text-primary) !important;
}

html body.app.admin table.dataTable tbody tr.selected,
html body.app.admin table.dataTable tbody tr.selected td {
  background: color-mix(in srgb, var(--kpf-action-primary) 12%, var(--kpf-surface)) !important;
  color: var(--kpf-text-primary) !important;
}

html body.app.admin .dt-button,
html body.app.admin a.buttons-collection,
html body.app.admin button.dt-button {
  background: var(--kpf-action-secondary) !important;
  border: 1px solid var(--kpf-border) !important;
  color: var(--kpf-text-primary) !important;
  border-radius: var(--kpf-radius-sm) !important;
  box-shadow: none !important;
}

/* —— Kanban / leads —— */
html body.app.admin .kan-ban-col .panel-heading,
html body.app.admin .kanban-col .panel-heading,
html body.app.admin .leads-status-heading {
  background: var(--kpf-action-primary) !important;
  color: #fff !important;
  border-radius: var(--kpf-radius-md) var(--kpf-radius-md) 0 0 !important;
}

html body.app.admin .kan-ban-content,
html body.app.admin .kanban-col .panel_s {
  background: color-mix(in srgb, var(--kpf-action-primary) 8%, var(--kpf-surface)) !important;
  border-color: var(--kpf-border) !important;
}

/* —— Calendar —— */
html body.app.admin .fc-button-primary,
html body.app.admin .fc .fc-button-primary {
  background: var(--kpf-action-primary) !important;
  border-color: var(--kpf-action-primary) !important;
  color: #fff !important;
}

html body.app.admin .fc-event,
html body.app.admin .fc .fc-event {
  border-radius: var(--kpf-radius-sm) !important;
  border-color: transparent !important;
}

html body.app.admin .fc-daygrid-event,
html body.app.admin .fc-timegrid-event {
  background: var(--kpf-action-primary) !important;
}

/* —— Checklist / tasks —— */
html body.app.admin .task-list .checkbox label::before,
html body.app.admin .checklist-templates .checkbox label::before {
  border-color: var(--kpf-border) !important;
}

html body.app.admin .checkbox-primary input[type='checkbox']:checked + label::before,
html body.app.admin .checkbox input[type='checkbox']:checked + label::before {
  background: var(--kpf-action-primary) !important;
  border-color: var(--kpf-action-primary) !important;
}

/* —— Fancybox / dropzone / editor —— */
html body.app.admin .dropzone {
  border: 1px dashed var(--kpf-border) !important;
  border-radius: var(--kpf-radius-md) !important;
  background: var(--kpf-surface-muted) !important;
}

html body.app.admin .note-editor.note-frame,
html body.app.admin .tox-tinymce {
  border-color: var(--kpf-border) !important;
  border-radius: var(--kpf-radius-md) !important;
}

/* —— Font Awesome purge: hide raw glyphs; Kodex SVG hosts remain —— */
html body.app.admin i.fa:not(.kpf-icon-host)::before,
html body.app.admin i.fas:not(.kpf-icon-host)::before,
html body.app.admin i.far:not(.kpf-icon-host)::before,
html body.app.admin i.fal:not(.kpf-icon-host)::before,
html body.app.admin i.fab:not(.kpf-icon-host)::before,
html body.app.admin i.fa-solid:not(.kpf-icon-host)::before,
html body.app.admin i.fa-regular:not(.kpf-icon-host)::before,
html body.app.admin .menu-icon:not(.kpf-icon-host)::before {
  /* Soft-hide until JS replaces; keep layout */
  color: var(--kpf-action-primary) !important;
  opacity: 0.85;
}

/* After Kodex SVG replace — kill FA glyph entirely (prevents double icons) */
html body.app.admin .kpf-icon-host {
  font-size: 0 !important;
  line-height: 0 !important;
  speak: never;
}

html body.app.admin .kpf-icon-host::before,
html body.app.admin .kpf-icon-host::after,
html body.app.admin i.kpf-icon-host::before,
html body.app.admin i.kpf-icon-host::after,
html body.app.admin .menu-icon.kpf-icon-host::before,
html body.app.admin .menu-icon.kpf-icon-host::after {
  content: none !important;
  display: none !important;
  speak: never;
}

html body.app.admin .kpf-icon,
html body.app.admin .kpf-icon-host .kpf-icon {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Side menu: only one icon node per item */
html body.app.admin #side-menu > li > a > .menu-icon ~ .menu-icon,
html body.app.admin #side-menu > li > a > .kpf-icon-host ~ .menu-icon,
html body.app.admin #side-menu > li > a > .menu-icon ~ .kpf-icon-host:not(:first-of-type),
html body.app.admin #side-menu > li > a > i.menu-icon + i.menu-icon {
  display: none !important;
}

html body.app.admin #side-menu > li > a > .kpf-icon-host > .kpf-icon:not(:first-child),
html body.app.admin #side-menu > li > a > .menu-icon > .kpf-icon ~ .kpf-icon {
  display: none !important;
}

/* —— Tailwind utility remaps that still look “Perfex” —— */
html body.app.admin .tw-text-neutral-800,
html body.app.admin .tw-text-neutral-900,
html body.app.admin .tw-text-slate-800 {
  color: var(--kpf-text-primary) !important;
}

html body.app.admin .tw-text-neutral-500,
html body.app.admin .tw-text-neutral-600,
html body.app.admin .tw-text-slate-500 {
  color: var(--kpf-text-muted) !important;
}

html body.app.admin .tw-bg-neutral-50,
html body.app.admin .tw-bg-neutral-100,
html body.app.admin .tw-bg-slate-50 {
  background: var(--kpf-surface-muted) !important;
}

html body.app.admin .tw-bg-white {
  background: var(--kpf-surface) !important;
}

html body.app.admin .tw-border-neutral-200,
html body.app.admin .tw-border-neutral-300,
html body.app.admin .tw-border-slate-200 {
  border-color: var(--kpf-border) !important;
}

html body.app.admin .tw-bg-success-50,
html body.app.admin .tw-bg-green-50 {
  background: color-mix(in srgb, var(--kpf-status-success) 12%, var(--kpf-surface)) !important;
}

html body.app.admin .tw-bg-danger-50,
html body.app.admin .tw-bg-red-50 {
  background: color-mix(in srgb, var(--kpf-status-danger) 12%, var(--kpf-surface)) !important;
}

html body.app.admin .tw-bg-warning-50,
html body.app.admin .tw-bg-orange-50 {
  background: color-mix(in srgb, var(--kpf-status-warning) 12%, var(--kpf-surface)) !important;
}

html body.app.admin .tw-bg-info-50,
html body.app.admin .tw-bg-blue-50,
html body.app.admin .tw-bg-sky-50,
html body.app.admin .tw-bg-cyan-50 {
  background: color-mix(in srgb, var(--kpf-action-primary) 10%, var(--kpf-surface)) !important;
}

html body.app.admin .tw-text-info-600,
html body.app.admin .tw-text-blue-600,
html body.app.admin .tw-text-sky-600,
html body.app.admin .tw-text-cyan-600 {
  color: var(--kpf-action-primary) !important;
}

html body.app.admin .tw-text-success-600,
html body.app.admin .tw-text-green-600 {
  color: var(--kpf-status-success) !important;
}

html body.app.admin .tw-text-danger-600,
html body.app.admin .tw-text-red-600 {
  color: var(--kpf-status-danger) !important;
}

html body.app.admin .tw-text-warning-600,
html body.app.admin .tw-text-orange-600 {
  color: var(--kpf-status-warning) !important;
}

/* —— Rounded-full pills → Kodex 4px —— */
html body.app.admin .rounded-full,
html body.app.admin .tw-rounded-full {
  border-radius: var(--kpf-radius-sm) !important;
}

/* —— Dark UI cascade —— */
html body.app.admin.kodex-crm-admin--ui-dark .alert-info {
  background: color-mix(in srgb, var(--kpf-action-primary) 18%, #14141a) !important;
  color: var(--kodex-text-primary, #e8e9ed) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .dropdown-menu,
html body.app.admin.kodex-crm-admin--ui-dark .modal-content,
html body.app.admin.kodex-crm-admin--ui-dark .select2-dropdown,
html body.app.admin.kodex-crm-admin--ui-dark .select2-container--default .select2-selection--single {
  background: #14141a !important;
  border-color: #2a2a32 !important;
  color: #e8e9ed !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .table > thead > tr > th,
html body.app.admin.kodex-crm-admin--ui-dark table.dataTable thead th {
  background: #1e1e24 !important;
  color: #9da2b3 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .tw-bg-white,
html body.app.admin.kodex-crm-admin--ui-dark .tw-bg-neutral-50,
html body.app.admin.kodex-crm-admin--ui-dark .tw-bg-neutral-100,
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 {
  background: var(--kodex-bg-surface, #1e1e24) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kan-ban-content,
html body.app.admin.kodex-crm-admin--ui-dark .kanban-col .panel_s {
  background: color-mix(in srgb, var(--kpf-action-primary) 10%, #14141a) !important;
}

/* —— Typography lock —— */
html body.app.admin,
html body.app.admin button,
html body.app.admin input,
html body.app.admin select,
html body.app.admin textarea,
html body.app.admin .btn,
html body.app.admin .table,
html body.app.admin .dropdown-menu {
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
}

html body.app.admin h1,
html body.app.admin h2,
html body.app.admin h3,
html body.app.admin .modal-title,
html body.app.admin .tw-text-xl,
html body.app.admin .tw-text-2xl {
  font-family: var(--kodex-font-display, 'Neue Haas Grotesk Display', Satoshi, system-ui, sans-serif) !important;
}