/* L2 Patterns — generated 2026-07-17 */

/* === kpf-full-reskin.css === */
/**
 * Kodex Theme — full Perfex reskin (BD-03 density, BD-16 radius 4px, brand blue #001BFF).
 * Loaded last with high specificity so Kodex prevails over style.css + theme_style.
 */

/* —— Tokens (resolved fallbacks; no dependency on missing --kodex-*) —— */
:root,
html[data-theme="light"],
body.app,
body.admin,
body.customers,
body.login_admin {
  --kodex-action-primary: #001bff;
  --kodex-action-primary-fg: #ffffff;
  --kodex-action-primary-hover: #0015cc;
  --kodex-bg-canvas: #f0f1f4;
  --kodex-bg-surface: #ffffff;
  --kodex-bg-subtle: #f5f5f5;
  --kodex-bg-muted: #edeff7;
  --kodex-text-primary: #14141a;
  --kodex-text-secondary: #40424d;
  --kodex-text-muted: #6e7180;
  --kodex-border-default: #d3d6e0;
  --kodex-border-strong: #9da2b3;
  --kodex-radius-sm: 4px;
  --kodex-radius-md: 4px;
  --kodex-feedback-success: #0d7a4e;
  --kodex-feedback-warning: #fa4616;
  --kodex-feedback-error: #c41e3a;
  --kodex-feedback-info: #001bff;
  --kodex-font-sans: "Satoshi", "Inter", system-ui, -apple-system, sans-serif;
  --kodex-font-size-body: 14px;

  --kpf-action-primary: var(--kodex-action-primary);
  --kpf-action-primary-fg: var(--kodex-action-primary-fg);
  --kpf-action-primary-hover: var(--kodex-action-primary-hover);
  --kpf-action-secondary: var(--kodex-bg-muted);
  --kpf-action-secondary-fg: var(--kodex-text-primary);
  --kpf-bg-canvas: var(--kodex-bg-canvas);
  --kpf-surface: var(--kodex-bg-surface);
  --kpf-surface-muted: var(--kodex-bg-subtle);
  --kpf-text-primary: var(--kodex-text-primary);
  --kpf-text-muted: var(--kodex-text-muted);
  --kpf-text-secondary: var(--kodex-text-secondary);
  --kpf-font-family: var(--kodex-font-sans);
  --kpf-font-size-body: var(--kodex-font-size-body);
  --kpf-border: var(--kodex-border-default);
  --kpf-border-strong: var(--kodex-border-strong);
  --kpf-sidebar-bg: #001bff;
  --kpf-sidebar-text: rgba(255, 255, 255, 0.88);
  --kpf-sidebar-active: #ffffff;
  --kpf-header-bg: #14141a;
  --kpf-status-success: var(--kodex-feedback-success);
  --kpf-status-warning: var(--kodex-feedback-warning);
  --kpf-status-danger: var(--kodex-feedback-error);
  --kpf-status-info: var(--kodex-feedback-info);
  --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) 5%, var(--kpf-bg-canvas));
  --kpf-chart-primary: var(--kpf-action-primary);
  --kpf-chart-secondary: #6e7180;
  --kpf-chart-grid: var(--kpf-border);
  --kpf-chart-tooltip-bg: var(--kpf-text-primary);
  --kpf-radius-sm: var(--kodex-radius-sm);
  --kpf-radius-md: var(--kodex-radius-md);
  --kpf-shadow-panel: 0 1px 2px rgba(20, 20, 26, 0.06);
}

/**
 * CRITICAL: body.app above was forcing LIGHT --kodex-* on every admin page,
 * which overrode html[data-theme=dark] from kodex-ds-tokens and broke Dark mode.
 * Dark must redefine the same tokens on body so --kpf-* (and all sections) flip.
 */
html[data-theme='dark'],
html[data-theme='dark'] body.app,
html[data-theme='dark'] body.admin,
html[data-theme='dark'] body.customers,
html[data-theme='dark'] body.login_admin,
body.app.kodex-crm-admin--ui-dark,
body.admin.kodex-crm-admin--ui-dark {
  --kodex-action-primary: #001bff;
  --kodex-action-primary-fg: #ffffff;
  --kodex-action-primary-hover: #3355ff;
  --kodex-bg-canvas: #14141a;
  --kodex-bg-surface: #1e1e24;
  --kodex-bg-subtle: #252530;
  --kodex-bg-muted: #2c2c36;
  --kodex-text-primary: #ffffff;
  --kodex-text-secondary: #d3d6e0;
  --kodex-text-muted: #9da2b3;
  --kodex-border-default: #40424d;
  --kodex-border-strong: #6e7180;
  --kodex-border-subtle: #2a2a32;
  --kodex-feedback-success: #3dab7a;
  --kodex-feedback-warning: #fa4616;
  --kodex-feedback-error: #e85a6b;
  --kodex-feedback-info: #6b8aff;
  --kodex-radius-sm: 4px;
  --kodex-radius-md: 4px;

  --kpf-action-primary: var(--kodex-action-primary);
  --kpf-action-primary-fg: var(--kodex-action-primary-fg);
  --kpf-action-primary-hover: var(--kodex-action-primary-hover);
  --kpf-action-secondary: var(--kodex-bg-muted);
  --kpf-action-secondary-fg: var(--kodex-text-primary);
  --kpf-bg-canvas: var(--kodex-bg-canvas);
  --kpf-surface: var(--kodex-bg-surface);
  --kpf-surface-muted: var(--kodex-bg-subtle);
  --kpf-text-primary: var(--kodex-text-primary);
  --kpf-text-muted: var(--kodex-text-muted);
  --kpf-text-secondary: var(--kodex-text-secondary);
  --kpf-border: var(--kodex-border-default);
  --kpf-border-strong: var(--kodex-border-strong);
  --kpf-input-border: var(--kpf-border);
  --kpf-input-focus: var(--kpf-action-primary);
  --kpf-table-head: var(--kpf-text-muted);
  --kpf-table-link: #f7f7f7;
  --kpf-table-link-hover: var(--kodex-text-secondary, #d3d6e0);
  --kpf-table-row-hover: color-mix(in srgb, var(--kpf-action-primary) 12%, var(--kpf-bg-canvas));
  --kpf-chart-primary: var(--kpf-action-primary);
  --kpf-chart-secondary: var(--kodex-text-muted);
  --kpf-chart-grid: var(--kpf-border);
  --kpf-chart-tooltip-bg: var(--kodex-bg-surface-raised, #252530);
  --kpf-radius-sm: var(--kodex-radius-sm);
  --kpf-radius-md: var(--kodex-radius-md);
  --kpf-shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.4);
  --kpf-status-success: var(--kodex-feedback-success);
  --kpf-status-warning: var(--kodex-feedback-warning);
  --kpf-status-danger: var(--kodex-feedback-error);
  --kpf-status-info: var(--kodex-feedback-info);
}

/* —— Global canvas / type —— */
body,
body.app,
body.admin,
body.customers,
body.login_admin {
  background: var(--kpf-bg-canvas) !important;
  color: var(--kpf-text-primary) !important;
  font-family: var(--kpf-font-family) !important;
  font-size: var(--kpf-font-size-body) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.bold, .tw-font-semibold, .tw-font-bold {
  color: var(--kpf-text-primary);
  font-family: var(--kpf-font-family) !important;
}

a:not(.btn):not(.label):not(.badge):not(.paginate_button) {
  color: var(--kpf-action-primary);
}
a:not(.btn):hover {
  color: var(--kpf-action-primary-hover);
}

.text-muted, .text-secondary, small, .help-block {
  color: var(--kpf-text-muted) !important;
}

#wrapper {
  background: var(--kpf-bg-canvas) !important;
}
.content {
  background: transparent !important;
}

/* —— Shell chrome owned by kpf-crm-shell.css (CrmAdminShell vertical) —— */

/* —— Panels / cards —— */
.panel_s,
.panel,
.panel-default,
.card {
  background: var(--kpf-surface) !important;
  border: 1px solid var(--kpf-border) !important;
  border-radius: var(--kpf-radius-md) !important;
  box-shadow: var(--kpf-shadow-panel) !important;
}

.panel_s .panel-body,
.panel-body,
.panel-heading,
.panel-footer {
  background: var(--kpf-surface) !important;
  border-color: var(--kpf-border) !important;
  color: var(--kpf-text-primary) !important;
}

.panel-heading {
  border-radius: var(--kpf-radius-md) var(--kpf-radius-md) 0 0 !important;
}

/* —— Buttons (never pill) —— */
.btn {
  border-radius: var(--kpf-radius-sm) !important;
  font-family: var(--kpf-font-family) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.btn-primary,
.btn-info,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--kpf-action-primary) !important;
  border-color: var(--kpf-action-primary) !important;
  color: var(--kpf-action-primary-fg) !important;
}

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

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

.btn-default:hover,
.btn-secondary:hover {
  background: var(--kpf-surface-muted) !important;
  border-color: var(--kpf-border-strong) !important;
  color: var(--kpf-text-primary) !important;
}

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

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

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

.btn-link {
  color: var(--kpf-action-primary) !important;
}

/* —— Badges / labels —— */
.label,
.badge {
  border-radius: var(--kpf-radius-sm) !important;
  font-weight: 500 !important;
  font-family: var(--kpf-font-family) !important;
}

.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-info, .badge-info,
.label-primary, .badge-primary { background: var(--kpf-action-primary) !important; color: #fff !important; }
.label-default, .badge-default {
  background: var(--kpf-surface-muted) !important;
  color: var(--kpf-text-secondary) !important;
}

/* —— Forms —— */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.input-group-addon {
  border-color: var(--kpf-input-border) !important;
  border-radius: var(--kpf-radius-sm) !important;
  color: var(--kpf-text-primary) !important;
  background: var(--kpf-surface) !important;
  font-family: var(--kpf-font-family) !important;
  font-size: var(--kpf-font-size-body) !important;
  box-shadow: none !important;
}

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

.control-label,
.form-group > label,
label {
  color: var(--kpf-text-secondary) !important;
  font-weight: 500 !important;
}

.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 li.selected a,
.bootstrap-select .dropdown-menu li a:hover {
  background: color-mix(in srgb, var(--kpf-action-primary) 10%, transparent) !important;
  color: var(--kpf-action-primary) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--kpf-action-primary);
}

/* —— Tables —— */
.table > thead > tr > th,
table.dataTable thead th,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-color: var(--kpf-border) !important;
  color: var(--kpf-text-primary);
}

.table > thead > tr > th,
table.dataTable thead th {
  color: var(--kpf-table-head) !important;
  background: var(--kpf-surface-muted) !important;
  font-weight: 600 !important;
}

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

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-color: var(--kpf-input-border) !important;
  border-radius: var(--kpf-radius-sm) !important;
}

.pagination > li > a,
.pagination > li > span,
.paginate_button {
  border-radius: var(--kpf-radius-sm) !important;
  border-color: var(--kpf-border) !important;
  color: var(--kpf-text-primary) !important;
  background: var(--kpf-surface) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.paginate_button.current {
  background: var(--kpf-action-primary) !important;
  border-color: var(--kpf-action-primary) !important;
  color: var(--kpf-action-primary-fg) !important;
}

/* —— Modals / dropdowns / tabs —— */
.modal-content {
  border-radius: var(--kpf-radius-md) !important;
  border-color: var(--kpf-border) !important;
  background: var(--kpf-surface) !important;
  box-shadow: 0 12px 40px rgba(20, 20, 26, 0.16) !important;
}

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

.modal-footer {
  background: var(--kpf-surface-muted) !important;
}

.modal-title {
  color: var(--kpf-text-primary) !important;
  font-weight: 600 !important;
}

.dropdown-menu {
  border-radius: var(--kpf-radius-md) !important;
  border-color: var(--kpf-border) !important;
  background: var(--kpf-surface) !important;
  box-shadow: var(--kpf-shadow-panel) !important;
}

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

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

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

.nav-tabs > li > a {
  border-radius: var(--kpf-radius-sm) var(--kpf-radius-sm) 0 0 !important;
  color: var(--kpf-text-secondary) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #ffffff !important;
  border-color: var(--kpf-action-primary, #001bff) !important;
  background: var(--kpf-action-primary, #001bff) !important;
}

/* —— Alerts —— */
.alert {
  border-radius: var(--kpf-radius-md) !important;
  border-width: 1px !important;
  font-family: var(--kpf-font-family) !important;
}

.alert-success { border-color: var(--kpf-status-success) !important; }
.alert-warning { border-color: var(--kpf-status-warning) !important; }
.alert-danger { border-color: var(--kpf-status-danger) !important; }
.alert-info { border-color: var(--kpf-status-info) !important; color: var(--kpf-status-info) !important; }

/* —— Progress / tags / editor —— */
.progress { background: var(--kpf-surface-muted) !important; border-radius: var(--kpf-radius-sm) !important; }
.progress-bar { background: var(--kpf-action-primary) !important; }

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

.tox-tinymce, .mce-tinymce {
  border-color: var(--kpf-border) !important;
  border-radius: var(--kpf-radius-md) !important;
}

/* —— Kanban / dashboard / reports —— */
.kan-ban-col, .kan-ban-content-wrapper {
  background: var(--kpf-surface-muted) !important;
  border-radius: var(--kpf-radius-md) !important;
}

#dashboard .widget,
.widget,
.top_stats_wrapper,
.reports .widget {
  background: var(--kpf-surface) !important;
  border: 1px solid var(--kpf-border) !important;
  border-radius: var(--kpf-radius-md) !important;
  box-shadow: var(--kpf-shadow-panel) !important;
}

/* —— Calendar / dropzone —— */
#calendar .fc-button-primary {
  background: var(--kpf-surface) !important;
  border-color: var(--kpf-border) !important;
  color: var(--kpf-text-primary) !important;
  border-radius: var(--kpf-radius-sm) !important;
}

#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: #fff !important;
}

.dropzone {
  border: 1px dashed var(--kpf-border) !important;
  background: var(--kpf-surface-muted) !important;
  border-radius: var(--kpf-radius-md) !important;
}

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

/* —— Tailwind primary utilities —— */
.tw-text-primary, .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;
}
.tw-border-primary { border-color: var(--kpf-action-primary) !important; }
.tw-bg-primary\/10, .tw-bg-primary\/5 {
  background-color: color-mix(in srgb, var(--kpf-action-primary) 10%, transparent) !important;
}

/* —— Auth / client / saas —— */
body.login_admin {
  background: var(--kpf-bg-canvas) !important;
}

body.login_admin .company-logo + div,
body.login_admin .authentication-form,
body.login_admin .mtop40 {
  font-family: var(--kpf-font-family) !important;
}

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

.customers .navbar-default .navbar-nav > li > a {
  color: var(--kpf-sidebar-text) !important;
}

.customers .navbar-default .navbar-nav > .active > a {
  background: color-mix(in srgb, var(--kpf-action-primary) 28%, transparent) !important;
  color: #fff !important;
}

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

/* —— Kill common Perfex blue leftover (Bootstrap #337ab7 / Inter vibe) —— */
.bg-primary,
.progress-bar-primary {
  background-color: var(--kpf-action-primary) !important;
}

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

hr {
  border-color: var(--kpf-border) !important;
}

.popover,
.tooltip-inner {
  border-radius: var(--kpf-radius-sm) !important;
  font-family: var(--kpf-font-family) !important;
}

.tooltip-inner {
  background: var(--kpf-text-primary) !important;
}

/* === kpf-crm-shell.css === */
/**
 * Perfex → CrmAdminShell (vertical) — exact KodexCRM chrome
 * Spec: packages/@kodex/templates/src/CrmAdminShell/CrmAdminShell.css
 * Overrides Perfex style.css (#header 57px white, .sidebar 230px gray).
 */
html body.app.admin,
html body.app.admin.kodex-crm-admin--nav-vertical {
  --kodex-crm-admin-ink: #14141a;
  --kodex-crm-admin-ink-elevated: #1e1e24;
  --kodex-crm-admin-ink-text: #e8e9ed;
  --kodex-crm-admin-ink-muted: #9da2b3;
  --kodex-crm-admin-accent: #001bff;
  --kodex-crm-admin-canvas: #f0f1f4;
  --kodex-crm-admin-deck-h: 46px;
  --kodex-crm-admin-topbar-h: 96px;
  --kodex-crm-admin-rail-w: 216px;
  --kodex-crm-admin-inset: 24px;
  background: var(--kodex-crm-admin-canvas) !important;
  padding-top: 0 !important;
}

/* —— Dark command deck (#header) —— */
html body.app.admin #header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 200 !important;
  height: auto !important;
  min-height: var(--kodex-crm-admin-deck-h) !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  flex-direction: column !important;
  background:
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 11px,
      color-mix(in srgb, #fff 2.5%, transparent) 11px,
      color-mix(in srgb, #fff 2.5%, transparent) 12px
    ),
    var(--kodex-crm-admin-ink) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--kodex-crm-admin-accent) 35%, transparent) !important;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--kodex-crm-admin-ink) 28%, transparent) !important;
  display: flex !important;
  align-items: stretch !important;
}

html body.app.admin #header > .hide-menu {
  float: none !important;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  color: color-mix(in srgb, #fff 88%, transparent) !important;
  border: 1px solid color-mix(in srgb, #fff 24%, transparent) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, #000 10%, transparent) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

html body.app.admin #header > .hide-menu:hover {
  color: #fff !important;
  background: color-mix(in srgb, #000 16%, transparent) !important;
  border-color: color-mix(in srgb, #fff 36%, transparent) !important;
}

html body.app.admin #header > .hide-menu svg {
  color: inherit !important;
  stroke: currentColor !important;
}

html body.app.admin #header > nav {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--kodex-crm-admin-deck-h) !important;
  min-height: var(--kodex-crm-admin-deck-h) !important;
  max-height: var(--kodex-crm-admin-deck-h) !important;
  display: flex !important;
  align-items: stretch !important;
}

html body.app.admin #header > nav > .tw-flex.tw-justify-between {
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  padding-right: var(--kodex-crm-admin-inset) !important;
  gap: 8px !important;
}

html body.app.admin #header #logo,
html body.app.admin #header #logo.tw-h-\[57px\] {
  height: var(--kodex-crm-admin-deck-h) !important;
  width: var(--kodex-crm-admin-rail-w) !important;
  min-width: var(--kodex-crm-admin-rail-w) !important;
  max-width: var(--kodex-crm-admin-rail-w) !important;
  display: flex !important;
  align-items: center !important;
  /* room for absolute .hide-menu (10 + 34) + 8px gap */
  padding: 0 12px 0 52px !important;
  margin: 0 !important;
  border-right: 1px solid color-mix(in srgb, #fff 8%, transparent) !important;
  box-sizing: border-box !important;
  background: transparent !important;
  position: relative !important;
}

html body.app.admin #header #logo img,
html body.app.admin #header #logo a img {
  height: 18px !important;
  max-height: 18px !important;
  max-width: 96px !important;
  width: auto !important;
  filter: brightness(0) invert(1);
}

html body.app.admin #header #logo .logo-text {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body.app.admin #header #top_search {
  margin: 0 8px !important;
  align-self: center !important;
  max-width: min(520px, 48vw) !important;
  flex: 1 1 auto !important;
}

html body.app.admin #header #search_input,
html body.app.admin #header input#search_input {
  height: 36px !important;
  margin-top: 0 !important;
  padding-inline: 40px 14px !important;
  width: 100% !important;
  min-width: 280px !important;
  max-width: 520px !important;
  background: var(--kodex-crm-admin-ink-elevated) !important;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent) !important;
  border-radius: 999px !important;
  color: var(--kodex-crm-admin-ink-text) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
  ring: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

html body.app.admin #header #search_input::placeholder {
  color: var(--kodex-crm-admin-ink-muted) !important;
  opacity: 1 !important;
}

html body.app.admin #header #top_search.kpf-top-chat #search_input:focus,
html body.app.admin #header #search_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_button {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

html body.app.admin #header #top_search.kpf-top-chat #top_search_button button,
html body.app.admin #header #top_search.kpf-top-chat #top_search_button i,
html body.app.admin #header #top_search_button button,
html body.app.admin #header #top_search_button i {
  color: color-mix(in srgb, #001bff 70%, #f7f7f7) !important;
}

html body.app.admin #header .navbar-nav {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

html body.app.admin #header .navbar-nav > li {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  margin: 0 !important;
}

html body.app.admin #header .navbar-nav > li > a,
html body.app.admin #header .navbar-nav > li > a:hover,
html body.app.admin #header .navbar-nav > li > a:focus,
html body.app.admin #header .navbar-nav .open > a {
  /* size/chrome owned by kpf-crm-admin-frame.css (CrmTopbarTools utilities) */
  color: color-mix(in srgb, #fff 82%, transparent) !important;
  background: transparent !important;
}

html body.app.admin #header .navbar-nav > li > a i,
html body.app.admin #header .navbar-nav > li > a svg,
html body.app.admin #header .navbar-nav > li > a .tw-text-neutral-500,
html body.app.admin #header .navbar-nav > li > a .tw-text-neutral-600 {
  color: var(--kodex-crm-admin-ink-muted) !important;
  stroke: currentColor !important;
}

/* Utilities (settings / timers / notifications): inherit ghost tile color, not ink-muted */
html body.app.admin #header .navbar-nav > li > a.kodex-crm-admin__utility i,
html body.app.admin #header .navbar-nav > li > a.kodex-crm-admin__utility svg,
html body.app.admin #header .navbar-nav > li > a.kodex-crm-admin__utility .kpf-icon,
html body.app.admin #header .navbar-nav > li > a.kodex-crm-admin__utility .tw-text-neutral-500,
html body.app.admin #header .navbar-nav > li > a.kodex-crm-admin__utility .tw-text-neutral-600,
html body.app.admin #header .navbar-nav > li > a.notifications-icon i,
html body.app.admin #header .navbar-nav > li > a.notifications-icon svg,
html body.app.admin #header .navbar-nav > li > a.top-timers i,
html body.app.admin #header .navbar-nav > li > a.top-timers svg,
html body.app.admin #header .navbar-nav > li > #top-timers i,
html body.app.admin #header .navbar-nav > li > #top-timers svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}

html body.app.admin #header .navbar-nav > li > a:hover i,
html body.app.admin #header .navbar-nav > li > a:hover svg {
  color: var(--kodex-crm-admin-ink-text) !important;
}

html body.app.admin #header .navbar-nav > li a > .icon-total-indicator,
html body.app.admin #header .nav-total-todos,
html body.app.admin #header .icon-started-timers {
  background: var(--kodex-crm-admin-accent) !important;
  top: 2px !important;
  border-radius: 4px !important;
}

html body.app.admin #header .tw-bg-primary-600,
html body.app.admin #header .tw-rounded-full.tw-bg-primary-600 {
  background: var(--kodex-crm-admin-accent) !important;
  border-radius: 4px !important;
  width: 28px !important;
  height: 28px !important;
}

html body.app.admin #header .mobile-menu-toggle,
html body.app.admin #header .navbar-toggle {
  color: var(--kodex-crm-admin-ink-text) !important;
}

html body.app.admin #header .mobile-navbar {
  top: var(--kodex-crm-admin-deck-h) !important;
  background: var(--kodex-crm-admin-ink) !important;
}

/* —— Blue rail sidebar (main menu ONLY — never #setup-menu-wrapper) —— */
html body.app.admin #menu.sidebar,
html body.app.admin aside#menu.sidebar {
  position: fixed !important;
  top: var(--kodex-crm-admin-deck-h) !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--kodex-crm-admin-rail-w) !important;
  min-width: var(--kodex-crm-admin-rail-w) !important;
  max-width: var(--kodex-crm-admin-rail-w) !important;
  padding: 10px 10px 16px !important;
  margin: 0 !important;
  background: #001bff !important;
  border-right: none !important;
  border-left: none !important;
  box-shadow: inset -1px 0 0 color-mix(in srgb, #fff 10%, transparent) !important;
  z-index: 190 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Keep deck + rail above mega panel so Menu→Cerrar stays clickable */
html body.app.admin.kodex-crm-admin--mega-open #header {
  z-index: 1400 !important;
}

html body.app.admin.kodex-crm-admin--mega-open #menu.sidebar,
html body.app.admin.kodex-crm-admin--mega-open aside#menu.sidebar {
  z-index: 1350 !important;
}

html body.app.admin #menu #side-menu {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Setup / Configuración — same megamenu chrome (portal fills content stage) */
html body.app.admin #setup-menu-wrapper.sidebar,
html body.app.admin #setup-menu-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: min(72vh, calc(100vh - var(--kodex-crm-admin-deck-h) - 32px)) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--kodex-bg-surface, #fff) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  box-shadow: 0 18px 40px color-mix(in srgb, #000 16%, transparent) !important;
  z-index: 250 !important;
  overflow: hidden !important;
  display: none;
  color: var(--kodex-text-primary, #14141a) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  animation: kodex-crm-mega-content-in 0.18s ease-out;
}

html body.app.admin #setup-menu-wrapper.kodex-crm-admin__setup--portal,
html body.app.admin #setup-menu-wrapper.kodex-crm-admin__setup--open {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: none !important;
  height: auto !important;
  background: var(--kodex-bg-surface, #fff) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #setup-menu-wrapper.kodex-crm-admin__setup--open,
html body.app.admin.kodex-crm-admin--nav-vertical #setup-menu-wrapper.kodex-crm-admin__setup--open {
  display: flex !important;
}

html body.app.admin #setup-menu-wrapper.display-block,
html body.app.admin #setup-menu-wrapper.kodex-crm-admin__setup--open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* When still parked outside wrapper (closed), keep off-screen */
html body.app.admin #setup-menu-wrapper:not(.kodex-crm-admin__setup--open):not(.display-block) {
  display: none !important;
}

/* Original Perfex setup UL — source data only (panel renders the UI) */
html body.app.admin #setup-menu.kodex-crm-admin__setup-source,
html body.app.admin #setup-menu.kodex-crm-admin__setup-grid {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

html body.app.admin #setup-menu-wrapper .kodex-crm-admin__setup-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: auto !important;
  box-shadow: none !important;
  border-top: 0 !important;
  animation: none !important;
}

html body.app.admin #setup-menu-wrapper .kodex-crm-admin__setup-panel .kodex-crm-admin__mega-close {
  display: inline-flex !important;
}

html body.app.admin .sidebar-user-profile {
  display: none !important;
}

html body.app.admin #side-menu,
html body.app.admin #side-menu.tw-mt-\[15px\] {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

html body.app.admin #side-menu > li {
  border-left: 0 !important;
  margin: 0 !important;
}

html body.app.admin #side-menu > li > a,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  margin: 2px 0 !important;
  color: #001bff !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: #f7f7f7 !important;
  box-shadow: none !important;
  outline: 1px solid transparent !important;
  outline-offset: 0 !important;
}

html body.app.admin #side-menu > li > a .menu-text {
  color: inherit !important;
  font-weight: inherit !important;
}

html body.app.admin #side-menu > li > a .menu-icon,
html body.app.admin #side-menu > li > a i.menu-icon,
html body.app.admin #side-menu > li > a .kpf-icon-host {
  float: none !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  color: inherit !important;
  background: transparent !important;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Replaced icons: one SVG only — never resurrect FA ::before via font-size */
html body.app.admin #side-menu > li > a .kpf-icon-host,
html body.app.admin #setup-menu > li > a .kpf-icon-host {
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

html body.app.admin #side-menu > li > a .kpf-icon-host::before,
html body.app.admin #side-menu > li > a .kpf-icon-host::after,
html body.app.admin #side-menu > li > a .menu-icon.kpf-icon-host::before,
html body.app.admin #side-menu > li > a i.kpf-icon-host::before,
html body.app.admin #setup-menu > li > a .kpf-icon-host::before,
html body.app.admin #setup-menu > li > a .kpf-icon-host::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.app.admin #side-menu > li > a .kpf-icon,
html body.app.admin #side-menu > li > a svg.kpf-icon {
  width: 14px !important;
  height: 14px !important;
  color: inherit !important;
  stroke: currentColor !important;
}

/* Hover / open: navy fill + light text + thin #f7f7f7 outline */
html body.app.admin #side-menu > li:hover > a,
html body.app.admin #side-menu > li:hover > a:first-child,
html body.app.admin #side-menu > li:hover > a.kodex-crm-admin__module,
html body.app.admin #side-menu > li.menu-item-dashboard:hover > a,
html body.app.admin #side-menu > li.open > a:first-child,
html body.app.admin #side-menu > li.menu-item--kpf-open > a,
html body.app.admin #side-menu > li.menu-item--kpf-open > a:first-child,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module:hover,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module--open {
  color: #f7f7f7 !important;
  background: #001d3a !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  outline: 1px solid #f7f7f7 !important;
  outline-offset: 0 !important;
}

html body.app.admin #side-menu > li:hover > a .menu-text,
html body.app.admin #side-menu > li:hover > a:first-child .menu-text,
html body.app.admin #side-menu > li.menu-item-dashboard:hover > a .menu-text,
html body.app.admin #side-menu > li.menu-item--kpf-open > a .menu-text,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module:hover .menu-text,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module--open .menu-text {
  color: #f7f7f7 !important;
}

html body.app.admin #side-menu > li:hover > a .menu-icon,
html body.app.admin #side-menu > li:hover > a i.menu-icon,
html body.app.admin #side-menu > li:hover > a .kpf-icon-host,
html body.app.admin #side-menu > li:hover > a:first-child .menu-icon,
html body.app.admin #side-menu > li:hover > a:first-child i.menu-icon,
html body.app.admin #side-menu > li:hover > a:first-child .kpf-icon-host,
html body.app.admin #side-menu > li.menu-item-dashboard:hover > a .menu-icon,
html body.app.admin #side-menu > li.menu-item-dashboard:hover > a .kpf-icon-host,
html body.app.admin #side-menu > li.menu-item--kpf-open > a .menu-icon,
html body.app.admin #side-menu > li.menu-item--kpf-open > a .kpf-icon-host,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module:hover .menu-icon,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module:hover .kpf-icon-host,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module--open .menu-icon,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module--open .kpf-icon-host {
  background: transparent !important;
  color: #f7f7f7 !important;
}

html body.app.admin #side-menu > li:hover > a .kpf-icon,
html body.app.admin #side-menu > li:hover > a svg.kpf-icon,
html body.app.admin #side-menu > li:hover > a:first-child .kpf-icon,
html body.app.admin #side-menu > li:hover > a:first-child svg.kpf-icon,
html body.app.admin #side-menu > li.menu-item-dashboard:hover > a .kpf-icon,
html body.app.admin #side-menu > li.menu-item-dashboard:hover > a svg.kpf-icon,
html body.app.admin #side-menu > li.menu-item--kpf-open > a .kpf-icon,
html body.app.admin #side-menu > li.menu-item--kpf-open > a svg.kpf-icon,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module:hover .kpf-icon,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module:hover svg.kpf-icon,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module--open .kpf-icon,
html body.app.admin #side-menu > li > a.kodex-crm-admin__module--open svg.kpf-icon {
  color: #f7f7f7 !important;
  stroke: currentColor !important;
}

html body.app.admin #side-menu li .nav-second-level {
  background: color-mix(in srgb, #000 12%, transparent) !important;
  border-radius: 4px !important;
  margin: 2px 0 6px !important;
  padding: 4px 0 !important;
  border: 0 !important;
}

html body.app.admin #side-menu li .nav-second-level li a {
  color: color-mix(in srgb, #fff 80%, transparent) !important;
  padding: 8px 12px 8px 44px !important;
  font-weight: 450 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: auto !important;
}

html body.app.admin #side-menu li .nav-second-level li.active a,
html body.app.admin #side-menu li .nav-second-level li a:hover {
  color: #fff !important;
  background: color-mix(in srgb, #000 16%, transparent) !important;
}

html body.app.admin #side-menu .arrow,
html body.app.admin #side-menu .fa.arrow,
html body.app.admin #setup-menu .arrow,
html body.app.admin #setup-menu .fa.arrow {
  color: color-mix(in srgb, #fff 70%, transparent) !important;
  float: none !important;
  margin-left: auto !important;
  order: 3;
}

/* metisMenu / Bootstrap collapse — Kodex uses CrmModuleDropdown instead of inline expand */
html body.app.admin #side-menu li .nav-second-level,
html body.app.admin #side-menu li .nav-second-level.collapse,
html body.app.admin #side-menu li .nav-second-level.collapse.in,
html body.app.admin #side-menu li .nav-second-level.collapsing,
html body.app.admin #side-menu li.active > .nav-second-level,
html body.app.admin #side-menu li.open > .nav-second-level {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* setup second-level always open in mega-style panel — see rules above */

/* Keep source submenus in DOM for link harvesting, but never show as native flyouts */
html body.app.admin #side-menu li .nav-second-level.kpf-group-panel,
html body.app.admin #side-menu li .kpf-group-panel {
  /* Still hidden visually — but stay in normal DOM flow for querySelector (no left:-9999) */
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  position: static !important;
  left: auto !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical #side-menu > li.kodex-crm-admin__menu-group > ul.nav-second-level > li > a {
  padding-left: 44px !important;
}

html body.app.admin #side-menu > li > a .badge,
html body.app.admin #setup-menu-item .badge,
html body.app.admin #side-menu > li > a span.badge {
  margin-left: auto !important;
  background: #fa4616 !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  padding: 2px 5px !important;
}

/* —— Nav layout toggle (Top / Lateral) —— */
html body.app.admin .kodex-crm-admin__nav-layout {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 3px;
  margin: 0 8px 0 4px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, #fff 4%, transparent);
  flex-shrink: 0;
}

html body.app.admin .kodex-crm-admin__nav-layout-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: color-mix(in srgb, #fff 65%, transparent);
  font-family: Satoshi, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

html body.app.admin .kodex-crm-admin__nav-layout-btn:hover {
  color: #fff;
  background: color-mix(in srgb, #fff 8%, transparent);
}

html body.app.admin .kodex-crm-admin__nav-layout-btn--active {
  color: #fff !important;
  background: color-mix(in srgb, #001bff 55%, #fff 8%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent);
}

/* —— Horizontal (Top) mode —— */
html body.app.admin.kodex-crm-admin--nav-horizontal #menu.sidebar,
html body.app.admin.kodex-crm-admin--nav-horizontal aside#menu.sidebar,
html body.app.admin.kodex-crm-admin--nav-horizontal aside#menu.kodex-crm-admin__rail {
  position: fixed !important;
  top: var(--kodex-crm-admin-deck-h) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  /* Beat Perfex inline min-height from mainWrapperHeightFix() */
  height: var(--kodex-crm-admin-topbar-h, 96px) !important;
  min-height: var(--kodex-crm-admin-topbar-h, 96px) !important;
  max-height: var(--kodex-crm-admin-topbar-h, 96px) !important;
  padding: 0 16px !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 185 !important;
  box-sizing: border-box !important;
}

/* Top More open: allow dropdown to escape clipped bar */
html body.app.admin.kodex-crm-admin--nav-horizontal.kodex-crm-admin--top-more-open #menu.sidebar,
html body.app.admin.kodex-crm-admin--nav-horizontal.kodex-crm-admin--top-more-open aside#menu.sidebar,
html body.app.admin.kodex-crm-admin--nav-horizontal.kodex-crm-admin--top-more-open aside#menu.kodex-crm-admin__rail {
  overflow: visible !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #menu .kodex-crm-admin__rail-toggle,
html body.app.admin.kodex-crm-admin--nav-horizontal #menu .sidebar-user-profile {
  display: none !important;
}

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

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li {
  flex: 0 0 auto !important;
  position: relative !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Never expand submenu inside the topbar track — dropdowns are portaled */
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu li .nav-second-level,
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu li .nav-second-level.collapse,
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu li .nav-second-level.collapse.in,
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu li.active > .nav-second-level,
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu li.open > .nav-second-level {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #menu .kodex-crm-admin__topbar-tools {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #wrapper {
  margin: calc(var(--kodex-crm-admin-deck-h) + var(--kodex-crm-admin-topbar-h, 96px)) 0 0 0 !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #setup-menu-wrapper {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #header #logo {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  /* keep burger clearance (10 + 34 + 8) */
  padding-left: 52px !important;
  padding-right: 16px !important;
}

/* —— Workspace —— */
html body.app.admin #wrapper {
  margin: var(--kodex-crm-admin-deck-h) 0 0 var(--kodex-crm-admin-rail-w) !important;
  padding: 0 !important;
  background: var(--kodex-crm-admin-canvas) !important;
  min-height: calc(100vh - var(--kodex-crm-admin-deck-h)) !important;
  position: relative !important;
  z-index: 1 !important;
}

html body.app.admin #wrapper .content {
  padding: 20px 24px 28px !important;
  background: transparent !important;
}

html body.app.admin.hide-sidebar:not(.show-sidebar) #menu.sidebar {
  display: none !important;
}

html body.app.admin.hide-sidebar:not(.show-sidebar) #wrapper {
  margin-left: 0 !important;
}

html body.app.admin.hide-sidebar:not(.show-sidebar) #setup-menu-wrapper.display-block {
  display: block !important;
}

html body.app.admin.hide-sidebar:not(.show-sidebar) #header #logo {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border-right: 0 !important;
}

@media (max-width: 768px) {
  html body.app.admin #menu.sidebar {
    top: var(--kodex-crm-admin-deck-h) !important;
  }
  html body.app.admin #wrapper {
    margin-left: 0 !important;
  }
  html body.app.admin #header #logo {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    border-right: 0 !important;
  }
  html body.app.admin .kodex-crm-admin__nav-layout-label {
    display: none;
  }
}
/* === kpf-crm-cards.css === */
/**
 * CrmStatCard + FolderCard + chart card chrome on Perfex markup
 */

/* —— Stat cards (top_stats) — skip FolderStorageCard shells —— */
html body.app.admin .top_stats_wrapper:not(.kds-insp-folder-storage) {
  position: relative !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #d3d6e0 !important;
  border-radius: 4px !important;
  padding: 16px !important;
  min-height: 104px !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Folder tab — brand accent (visible) */
html body.app.admin .top_stats_wrapper:not(.kds-insp-folder-storage)::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 96px !important;
  height: 60px !important;
  background: #001bff !important;
  clip-path: polygon(0 16%, 34% 16%, 42% 0, 100% 0, 100% 100%, 0 100%) !important;
  opacity: 0.16 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Folder SVG watermark */
html body.app.admin .top_stats_wrapper:not(.kds-insp-folder-storage)::after {
  content: '' !important;
  position: absolute !important;
  right: 10px !important;
  bottom: 8px !important;
  width: 48px !important;
  height: 40px !important;
  background: url('motifs/shape-folder-kodex-blue.svg') no-repeat center / contain !important;
  opacity: 0.22 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

html body.app.admin .top_stats_wrapper:not(.kds-insp-folder-storage) > * {
  position: relative !important;
  z-index: 1 !important;
}

html body.app.admin .top_stats_wrapper .tw-font-medium,
html body.app.admin .top_stats_wrapper .tw-truncate,
html body.app.admin .top_stats_wrapper .tw-text-neutral-600,
html body.app.admin .top_stats_wrapper .tw-text-neutral-500 {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6e7180 !important;
  letter-spacing: 0.01em;
}

html body.app.admin .top_stats_wrapper .tw-font-semibold,
html body.app.admin .top_stats_wrapper .tw-text-neutral-800 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #14141a !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.2 !important;
}

html body.app.admin .top_stats_wrapper svg.tw-w-6,
html body.app.admin .top_stats_wrapper svg {
  width: 20px !important;
  height: 20px !important;
  color: #001bff !important;
  stroke: #001bff !important;
  padding: 10px !important;
  box-sizing: content-box !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, #001bff 12%, transparent) !important;
}

html body.app.admin .top_stats_wrapper .progress {
  height: 4px !important;
  border-radius: 999px !important;
  background: #f5f5f5 !important;
  margin-top: 8px !important;
  box-shadow: none !important;
}

html body.app.admin .top_stats_wrapper .progress-bar {
  background: #001bff !important;
  border-radius: inherit !important;
}

/* —— Panel / widget chrome (no folder motif — motif only on FolderStorage cards) —— */
html body.app.admin .widget > .panel_s,
html body.app.admin #dashboard .widget .panel_s,
html body.app.admin .panel_s {
  position: relative !important;
  overflow: hidden !important;
  background: var(--kodex-bg-surface, #ffffff) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .widget > .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark #dashboard .widget .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark .panel_s {
  background: var(--kodex-bg-surface, #1e1e24) !important;
  border-color: #2a2a32 !important;
  box-shadow: none !important;
  color: #e8e9ed !important;
}

html body.app.admin .widget > .panel_s::before,
html body.app.admin .widget > .panel_s::after,
html body.app.admin #wrapper .widget .panel_s::before,
html body.app.admin #wrapper .widget .panel_s::after,
html body.app.admin #widget-todos .panel_s::before,
html body.app.admin #widget-todos .panel_s::after,
html body.app.admin #widget-finance_overview .panel_s::before,
html body.app.admin #widget-finance_overview .panel_s::after,
html body.app.admin #widget-leads_chart .panel_s::before,
html body.app.admin #widget-leads_chart .panel_s::after,
html body.app.admin #widget-projects_chart .panel_s::before,
html body.app.admin #widget-projects_chart .panel_s::after,
html body.app.admin #widget-calendar .panel_s::before,
html body.app.admin #widget-calendar .panel_s::after,
html body.app.admin #widget-payments_chart .panel_s::before,
html body.app.admin #widget-payments_chart .panel_s::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

html body.app.admin .widget > .panel_s > .panel-body,
html body.app.admin #wrapper .widget .panel_s > .panel-body {
  position: relative !important;
  z-index: 1 !important;
}

html body.app.admin .widget .panel-body h4,
html body.app.admin .widget .panel-body .tw-font-medium,
html body.app.admin .widget .widget-dragger + span,
html body.app.admin .widget .tw-font-semibold {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  margin-top: 0 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .widget .panel-body h4,
html body.app.admin.kodex-crm-admin--ui-dark .widget .panel-body .tw-font-medium,
html body.app.admin.kodex-crm-admin--ui-dark .widget .tw-font-semibold {
  color: #e8e9ed !important;
}

/* Chart card body */
html body.app.admin .widget canvas,
html body.app.admin #leads_status_stats,
html body.app.admin #projects_status_stats,
html body.app.admin #tickets-awaiting-reply-by-department,
html body.app.admin #tickets-awaiting-reply-by-status,
html body.app.admin #payment-statistics {
  min-height: 220px !important;
  max-height: 280px;
}

/* No page-level folder watermark — motif stays on FolderStorage cards only */

/* Dashboard alerts + tabs polish */
html body.app.admin .alert {
  border-radius: 4px !important;
  border-width: 1px !important;
  font-family: Satoshi, system-ui, sans-serif !important;
}
html body.app.admin .screen-options-btn {
  border-radius: 4px !important;
  border: 1px solid #d3d6e0 !important;
  background: #fff !important;
  color: #14141a !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;
}
html body.app.admin #widget-saas_top_stats .panel_s {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* === kpf-surfaces.css === */
/**
 * Kodex surfaces — auth, calendar, kanban, misc chrome (v1.3)
 * Complements kpf-full-reskin.css
 */

/* ========== AUTH (admin login / forgot / client login & register) ========== */
body.login_admin,
body.customers.login,
body.customers.register {
  min-height: 100vh !important;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--kpf-bg-canvas) 88%, #001d3a 12%) 0%,
      var(--kpf-bg-canvas) 45%,
      color-mix(in srgb, var(--kpf-bg-canvas) 94%, var(--kpf-action-primary) 6%) 100%
    ) !important;
  font-family: var(--kpf-font-family) !important;
  position: relative;
  overflow-x: hidden;
}

/* Folder motif watermarks removed from auth pages (login / register) */

body.login_admin .authentication-form-wrapper,
body.customers #wrapper,
body.customers .login-form,
body.customers #register-form {
  position: relative;
  z-index: 2;
}

body.login_admin h1,
body.login_admin .tw-text-neutral-800,
body.customers .login-heading,
body.customers .register-heading {
  color: var(--kpf-text-primary) !important;
  font-family: var(--kpf-font-family) !important;
  font-weight: 600 !important;
}

body.login_admin .tw-text-neutral-600,
body.login_admin .text-muted,
body.customers .text-muted {
  color: var(--kpf-text-muted) !important;
}

body.login_admin .tw-bg-white,
body.login_admin .authentication-form-wrapper > .tw-bg-white,
body.customers .login-form,
body.customers #register-form .panel_s,
body.customers .panel_s.register-form {
  background: var(--kpf-surface) !important;
  border: 1px solid var(--kpf-border) !important;
  border-radius: var(--kpf-radius-md) !important;
  box-shadow: 0 8px 28px rgba(20, 20, 26, 0.08) !important;
}

body.login_admin .form-control,
body.customers .login-form .form-control,
body.customers #register-form .form-control {
  border-radius: var(--kpf-radius-sm) !important;
  border-color: var(--kpf-border) !important;
  font-family: var(--kpf-font-family) !important;
  min-height: 42px;
}

body.login_admin .btn-primary,
body.customers .login-form .btn-primary,
body.customers #register-form .btn-primary {
  background: var(--kpf-action-primary) !important;
  border-color: var(--kpf-action-primary) !important;
  border-radius: var(--kpf-radius-sm) !important;
  font-family: var(--kpf-font-family) !important;
  font-weight: 600 !important;
}

body.login_admin .company-logo img,
body.customers .company-logo img {
  max-height: 48px;
}

body.customers.login #wrapper,
body.customers.register #wrapper {
  background: transparent !important;
}

body.customers .navbar-default {
  background: transparent !important;
  box-shadow: none !important;
}

/* Client register sections */
body.customers.register .register-heading,
body.customers.register .register-contact-info-heading,
body.customers.register .register-company-info {
  color: var(--kpf-text-primary) !important;
}

body.customers #register-form {
  background: var(--kpf-surface);
  border: 1px solid var(--kpf-border);
  border-radius: var(--kpf-radius-md);
  padding: 1.5rem;
  box-shadow: 0 8px 28px rgba(20, 20, 26, 0.08);
  position: relative;
  overflow: hidden;
}

body.customers #register-form::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 64px;
  background: var(--kpf-action-primary);
  clip-path: polygon(0 18%, 32% 18%, 40% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0.1;
  pointer-events: none;
}

/* ========== CALENDAR (FullCalendar) ========== */
#calendar,
.fc {
  font-family: var(--kpf-font-family) !important;
  background: var(--kpf-surface);
  border: 1px solid var(--kpf-border);
  border-radius: var(--kpf-radius-md);
  padding: 12px;
  box-shadow: var(--kpf-shadow-panel);
}

.fc .fc-toolbar-title {
  color: var(--kpf-text-primary) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
}

.fc .fc-button-primary {
  background: var(--kpf-surface) !important;
  border-color: var(--kpf-border) !important;
  color: var(--kpf-text-primary) !important;
  border-radius: var(--kpf-radius-sm) !important;
  text-transform: none !important;
  box-shadow: none !important;
  font-family: var(--kpf-font-family) !important;
  font-weight: 500 !important;
}

.fc .fc-button-primary:hover {
  background: var(--kpf-surface-muted) !important;
  border-color: var(--kpf-border-strong) !important;
  color: var(--kpf-text-primary) !important;
}

.fc .fc-button-primary:disabled {
  opacity: 0.45 !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus {
  background: var(--kpf-action-primary) !important;
  border-color: var(--kpf-action-primary) !important;
  color: #fff !important;
}

.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number,
.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
  color: var(--kpf-text-secondary) !important;
  text-decoration: none !important;
}

.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
  background: color-mix(in srgb, var(--kpf-action-primary) 6%, transparent) !important;
}

.fc .fc-event,
.fc .fc-daygrid-event {
  border-radius: var(--kpf-radius-sm) !important;
  border: none !important;
  font-size: 12px !important;
  padding: 1px 4px !important;
}

.fc .fc-event .fc-event-main {
  color: #fff !important;
}

.fc .fc-scrollgrid,
.fc td,
.fc th {
  border-color: var(--kpf-border) !important;
}

.fc .fc-popover {
  border-radius: var(--kpf-radius-md) !important;
  border-color: var(--kpf-border) !important;
  box-shadow: var(--kpf-shadow-panel) !important;
}

#calendar_filters,
.calendar-filters {
  background: var(--kpf-surface) !important;
  border: 1px solid var(--kpf-border) !important;
  border-radius: var(--kpf-radius-md) !important;
  padding: 12px !important;
}

/* ========== KANBAN ========== */
.kan-ban-tab,
#kan-ban,
.kan-ban {
  background: transparent !important;
}

.kan-ban-col,
ul.kan-ban-col {
  background: var(--kpf-surface-muted) !important;
  border: 1px solid var(--kpf-border) !important;
  border-radius: var(--kpf-radius-md) !important;
  padding: 10px 8px !important;
  min-height: 120px;
}

.kan-ban-col-wrapper {
  margin-right: 12px !important;
}

.kan-ban-col .panel-heading,
.kan-ban-col-header,
.kanban-col-header {
  background: transparent !important;
  border: none !important;
  color: var(--kpf-text-primary) !important;
  font-weight: 600 !important;
  font-family: var(--kpf-font-family) !important;
  padding: 6px 8px 10px !important;
}

.kan-ban-content-wrapper,
.kan-ban-content {
  background: transparent !important;
}

.kan-ban-content .panel-body,
.lead-kan-ban .panel-body,
.lead-body,
.task-kanban .panel-body,
.kanban-card,
li.lead-kan-ban > .panel-body {
  background: var(--kpf-surface) !important;
  border: 1px solid var(--kpf-border) !important;
  border-radius: var(--kpf-radius-md) !important;
  box-shadow: var(--kpf-shadow-panel) !important;
  margin-bottom: 8px !important;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}

.lead-kan-ban .panel-body:hover,
.kanban-card:hover {
  border-color: var(--kpf-action-primary) !important;
  box-shadow: 0 2px 10px rgba(20, 20, 26, 0.08) !important;
}

.lead-kan-ban .lead-name a,
.kan-ban-content a.tw-font-medium {
  color: var(--kpf-text-primary) !important;
}

.lead-kan-ban .tw-text-sm,
.lead-kan-ban small {
  color: var(--kpf-text-muted) !important;
}

.kan-ban-settings,
.cpicker-wrapper {
  border-radius: var(--kpf-radius-sm) !important;
}

/* ========== CHART CONTAINERS ========== */
.widget canvas,
canvas.chart,
#leads_status_stats,
#leads-total,
#payment-statistics,
#tickets-report-by-department,
#tickets-awaiting-reply-by-department,
#tickets-awaiting-reply-by-status,
#projects_chart,
.relative canvas {
  max-width: 100%;
}

.widget .panel_s .panel-body canvas {
  filter: none;
}

/* Chart legend / empty chrome */
.widget .panel-body h4,
.widget .panel-body .tw-font-medium {
  color: var(--kpf-text-primary) !important;
}

/* ========== PIPELINES / ESTIMATES / PROPOSALS KANBAN ========== */
.proposals-pipeline .panel_s,
.estimates-pipeline .panel_s,
.pipeline-status,
._kan_ban_card {
  border-radius: var(--kpf-radius-md) !important;
}

/* ========== TABLES / FILTERS BAR ========== */
._filters _buttons,
.btn-bottom-toolbar,
.top-toolbar {
  font-family: var(--kpf-font-family) !important;
}

#vueApp,
.app-filters {
  font-family: var(--kpf-font-family) !important;
}

/* ========== TASKS / PROJECTS chrome ========== */
.task-info,
.project-overview-activity,
.activity-feed {
  border-color: var(--kpf-border) !important;
}

.checklist,
.task-checklist {
  border-radius: var(--kpf-radius-sm) !important;
}
/* === kpf-spacing.css === */
/**
 * Kodex spacing / padding density — icons, text, buttons stay structured.
 * Loaded last so Perfex utilities cannot collapse gaps or clip icons.
 */

/* ========== LOGIN (LoginScreen) ========== */
body.login_admin.kds-insp-login-page .kds-insp,
body.customers.login.kds-insp-login-page .kds-insp {
  box-sizing: border-box;
}

body.login_admin.kds-insp-login-page .kds-insp *,
body.customers.login.kds-insp-login-page .kds-insp * {
  box-sizing: border-box;
}

.kds-insp-login.kds-insp-auth {
  align-items: stretch;
}

.kds-insp-login .kds-insp-auth__side {
  gap: 18px !important;
  padding: clamp(20px, 3.5cqw, 28px) !important;
}

.kds-insp-login .kds-insp-auth__back {
  gap: 8px !important;
  padding: 4px 0 !important;
  line-height: 1.3 !important;
  min-height: 28px;
}

.kds-insp-login .kds-insp-auth__back svg {
  flex-shrink: 0;
  display: block;
}

.kds-insp-login .kds-insp-auth__brand {
  gap: 10px !important;
  margin-top: auto !important;
  padding-top: 8px;
}

.kds-insp-login .kds-insp-auth__logo-text {
  line-height: 1.15 !important;
  display: inline-block;
}

.kds-insp-login .kds-insp-auth__side > p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.55 !important;
}

.kds-insp-login .kds-insp-auth__links {
  gap: 16px !important;
  margin-top: auto !important;
  padding-top: 8px;
}

.kds-insp-login .kds-insp-auth__links a {
  color: #f7f7f7 !important;
  line-height: 1.3 !important;
  padding: 4px 0 !important;
}

.kds-insp-login .kds-insp-login__legal {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.kds-insp-login .kds-insp-auth__form {
  gap: 14px !important;
  padding: clamp(20px, 3.5cqw, 32px) clamp(16px, 3cqw, 28px) !important;
}

.kds-insp-login .kds-insp-auth__form h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.kds-insp-login .kds-insp-auth__form > p {
  margin: 0 0 2px !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

.kds-insp-login .kds-insp-auth__social {
  gap: 10px !important;
  margin: 2px 0 !important;
}

.kds-insp-login .kds-insp-auth__social button {
  min-height: 44px !important;
  padding: 10px 16px !important;
  line-height: 1.25 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.kds-insp-login .kds-insp-auth__or {
  margin: 6px 0 !important;
  min-height: 20px;
}

.kds-insp-login .kds-insp-auth__or span {
  padding: 0 10px !important;
  line-height: 1.2 !important;
}

.kds-insp-login .kds-insp-login__form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.kds-insp-login .kds-insp-auth__field {
  gap: 8px !important;
  margin: 0 !important;
}

.kds-insp-login .kds-insp-auth__field > span {
  line-height: 1.3 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Kill Perfex .form-control / label overrides inside LoginScreen */
.kds-insp-login .kds-insp-auth__field input,
.kds-insp-login .kds-insp-auth__pw,
.kds-insp-login input.form-control {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
}

.kds-insp-login .kds-insp-auth__pw {
  padding-right: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.kds-insp-login .kds-insp-auth__pw input {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 8px 0 6px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.kds-insp-login .kds-insp-auth__pw button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

.kds-insp-login .kds-insp-auth__pw button svg {
  display: block;
  flex-shrink: 0;
}

.kds-insp-login .kds-insp-login__meta {
  margin: -4px 0 0 !important;
  min-height: 24px;
  align-items: center;
}

.kds-insp-login .kds-insp-auth__forgot {
  padding: 4px 0 !important;
  line-height: 1.3 !important;
}

.kds-insp-login .kds-insp-auth__toggle {
  gap: 16px !important;
  padding: 10px 0 !important;
  align-items: center !important;
  min-height: 48px;
}

.kds-insp-login .kds-insp-auth__toggle strong {
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

.kds-insp-login .kds-insp-auth__toggle span {
  line-height: 1.4 !important;
  display: block;
}

.kds-insp-login .kds-insp-auth__switch {
  width: 44px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kds-insp-login .kds-insp-auth__submit {
  min-height: 48px !important;
  padding: 12px 18px !important;
  margin-top: 4px !important;
  line-height: 1.25 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.kds-insp-login .kds-insp-auth__register {
  margin: 4px 0 0 !important;
  padding: 8px 0 0 !important;
  line-height: 1.45 !important;
}

.kds-insp-login .kds-insp-login__text-link {
  padding: 0 2px !important;
  display: inline !important;
}

.kds-insp-login .alert,
.kds-insp-login .kds-insp-feedback {
  padding: 10px 12px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.kds-insp-login .g-recaptcha {
  margin: 4px 0 !important;
  overflow: hidden;
}

/* Mobile stack — keep side→form order, comfortable touch targets */
@container kds-auth (max-width: 639px) {
  .kds-insp-login .kds-insp-auth__side {
    gap: 14px !important;
    padding: 18px 16px !important;
  }
  .kds-insp-login .kds-insp-auth__form {
    gap: 12px !important;
    padding: 18px 16px 22px !important;
  }
  .kds-insp-login .kds-insp-auth__toggle {
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .kds-insp-login .kds-insp-auth__social button,
  .kds-insp-login .kds-insp-auth__submit {
    min-height: 48px !important;
  }
}

@media (max-width: 720px) {
  .kds-insp-login .kds-insp-auth__side {
    gap: 14px !important;
    padding: 18px 16px !important;
  }
  .kds-insp-login .kds-insp-auth__form {
    padding: 18px 16px 22px !important;
  }
}

/* ========== ADMIN SHELL — icons / text / buttons ========== */
html body.app.admin #header .hide-menu {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.app.admin #header .hide-menu svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

html body.app.admin #header .navbar-nav > li > a {
  gap: 0 !important;
  padding: 0 !important;
}

html body.app.admin #header .navbar-nav > li > a i,
html body.app.admin #header .navbar-nav > li > a svg,
html body.app.admin #header .navbar-nav > li > a .kpf-icon {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

html body.app.admin #side-menu > li > a {
  gap: 10px !important;
  padding: 0 12px !important;
}

html body.app.admin #side-menu > li > a .menu-text {
  line-height: 1.25 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body.app.admin #side-menu > li > a .menu-icon,
html body.app.admin #side-menu > li > a .kpf-icon-host {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

html body.app.admin #side-menu > li > a .arrow {
  margin-left: auto !important;
  padding: 0 0 0 8px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

html body.app.admin #side-menu > li > a .badge,
html body.app.admin #setup-menu-item .badge {
  margin-left: 8px !important;
  flex-shrink: 0 !important;
}

/* Buttons — consistent padding + icon gap */
html body.app.admin .btn,
html body.app.admin .btn-primary,
html body.app.admin .btn-default,
html body.app.admin .btn-info,
html body.app.admin .btn-success,
html body.app.admin .btn-warning,
html body.app.admin .btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  line-height: 1.25 !important;
  vertical-align: middle !important;
}

html body.app.admin .btn-sm,
html body.app.admin .btn-group-sm > .btn {
  min-height: 30px !important;
  padding: 5px 10px !important;
  gap: 6px !important;
}

html body.app.admin .btn-lg,
html body.app.admin .btn-group-lg > .btn {
  min-height: 44px !important;
  padding: 10px 18px !important;
  gap: 8px !important;
}

html body.app.admin .btn i,
html body.app.admin .btn .fa,
html body.app.admin .btn .kpf-icon,
html body.app.admin .btn svg {
  margin: 0 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

html body.app.admin .btn-block {
  width: 100% !important;
}

/* Form labels / controls */
html body.app.admin .form-group {
  margin-bottom: 16px !important;
}

html body.app.admin .form-group > label,
html body.app.admin label.control-label {
  display: block !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}

html body.app.admin .form-control {
  min-height: 38px !important;
  padding: 8px 12px !important;
  line-height: 1.3 !important;
}

html body.app.admin .input-group .form-control {
  min-height: 38px !important;
}

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

/* Panel / card headers */
html body.app.admin .panel-body {
  padding: 16px !important;
}

html body.app.admin .panel-heading {
  padding: 12px 16px !important;
}

html body.app.admin .tw-mb-0 + .tw-mb-0 {
  /* avoid accidental stacked zero-margin collisions */
}

/* === kpf-typography-links.css === */
/**
 * L2 — Typography, links, icons, chrome controls (DS contract).
 * Owns colors so TwSkin / table skins cannot paint every <a> as CTA blue.
 */

:root,
html.kodex-ds {
  --kpf-table-link: #000000;
  --kpf-table-link-hover: #001bff;
  --kpf-link-accent: var(--kodex-text-link, var(--kodex-action-primary, #001bff));
  --kpf-link-accent-hover: var(--kodex-text-link-hover, var(--kodex-action-primary-hover, #0015cc));
}

html[data-theme='dark'],
html[data-theme='dark'] body.app,
html[data-theme='dark'] body.admin,
body.app.kodex-crm-admin--ui-dark,
body.admin.kodex-crm-admin--ui-dark {
  --kpf-table-link: #f7f7f7;
  --kpf-table-link-hover: var(--kodex-text-secondary, #d3d6e0);
  /* Dark canvas: prefer light ink for incidental links, cobalt only for accent class */
  --kpf-link-accent: var(--kodex-text-link, #d9dadc);
  --kpf-link-accent-hover: var(--kodex-text-link-hover, #ffffff);
}

/* —— Icons: always inherit parent text —— */
.kpf-icon,
svg.kpf-icon,
.kpf-icon-host svg,
.kodex-crm-admin__theme-icon svg,
.kodex-crm-admin__rail-nav-action-icon svg {
  stroke: currentColor !important;
  fill: none !important;
  color: inherit !important;
}

/* —— Content: navigational <a> look like text (Perfex wraps cells in links) ——
   Never override active chrome that sits on primary fills (tabs, pills, pagination).
   Exclude [role="tab"] so segmented/active cobalt tabs keep white ink. */
body.admin #wrapper a:not(.btn):not(.label):not(.badge):not(.nav-link):not(.dropdown-toggle):not(.paginate_button):not(.fc-button):not(.kpf-link-accent):not(.text-primary):not(.tw-text-primary):not(.active):not(.kodex-crm-admin__fab):not(.kds-dash-toolbar__btn):not(.kds-dash-quick__btn):not([role="tab"]),
body.app #wrapper a:not(.btn):not(.label):not(.badge):not(.nav-link):not(.dropdown-toggle):not(.paginate_button):not(.fc-button):not(.kpf-link-accent):not(.text-primary):not(.tw-text-primary):not(.active):not(.kodex-crm-admin__fab):not(.kds-dash-toolbar__btn):not(.kds-dash-quick__btn):not([role="tab"]) {
  color: var(--kpf-table-link) !important;
  text-decoration: none;
}

body.admin #wrapper a:not(.btn):not(.label):not(.badge):not(.nav-link):not(.dropdown-toggle):not(.paginate_button):not(.fc-button):not(.kpf-link-accent):not(.text-primary):not(.tw-text-primary):not(.active):not(.kodex-crm-admin__fab):not(.kds-dash-toolbar__btn):not(.kds-dash-quick__btn):not([role="tab"]):hover,
body.app #wrapper a:not(.btn):not(.label):not(.badge):not(.nav-link):not(.dropdown-toggle):not(.paginate_button):not(.fc-button):not(.kpf-link-accent):not(.text-primary):not(.tw-text-primary):not(.active):not(.kodex-crm-admin__fab):not(.kds-dash-toolbar__btn):not(.kds-dash-quick__btn):not([role="tab"]):hover {
  color: var(--kpf-table-link-hover) !important;
  text-decoration: underline;
}

/* Active tab / pill / paginate — always on-primary (beats #wrapper a) */
body.admin #wrapper .nav-tabs > li.active > a,
body.admin #wrapper .nav-tabs > li.active > a:focus,
body.admin #wrapper .nav-tabs-segmented > li.active > a,
body.admin #wrapper .nav-tabs-segmented > li.active > a:focus,
body.admin #wrapper .nav-pills > li.active > a,
body.admin #wrapper .pagination > .active > a,
body.admin #wrapper .pagination > .active > span,
body.admin #wrapper .paginate_button.current,
body.admin #wrapper .list-group-item.active,
body.app #wrapper .nav-tabs > li.active > a,
body.app #wrapper .nav-tabs > li.active > a:focus,
body.app #wrapper .nav-tabs-segmented > li.active > a,
body.app #wrapper .nav-tabs-segmented > li.active > a:focus {
  color: var(--kodex-action-primary-fg, #ffffff) !important;
  -webkit-text-fill-color: var(--kodex-action-primary-fg, #ffffff) !important;
}

/* Explicit brand / CTA text links only */
a.kpf-link-accent,
a.text-primary:not(.btn),
a.tw-text-primary:not(.btn),
.kds-insp-auth__forgot,
.kds-insp-auth__register a,
.kds-insp-login__text-link {
  color: var(--kpf-link-accent) !important;
  text-decoration: none;
}

a.kpf-link-accent:hover,
a.text-primary:not(.btn):hover,
a.tw-text-primary:not(.btn):hover,
.kds-insp-auth__forgot:hover,
.kds-insp-auth__register a:hover,
.kds-insp-login__text-link:hover {
  color: var(--kpf-link-accent-hover) !important;
  text-decoration: underline;
}

/* —— Button links: let .btn-* own color —— */
a.btn,
a.btn:hover,
a.btn:focus {
  text-decoration: none !important;
}

a.btn-primary {
  color: var(--kodex-action-primary-fg, #fff) !important;
}

html body.app.admin:not(.kodex-crm-admin--ui-dark) a.btn-primary:hover,
html body.app.admin:not(.kodex-crm-admin--ui-dark) a.btn-primary:focus {
  color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark a.btn-primary:hover,
html body.app.admin.kodex-crm-admin--ui-dark a.btn-primary:focus {
  color: var(--kodex-action-primary-fg, #fff) !important;
}

a.btn-default,
a.btn-secondary,
a.btn-default:hover,
a.btn-secondary:hover {
  color: var(--kpf-action-secondary-fg, var(--kodex-text-primary)) !important;
}

a.btn-link,
a.btn-ghost {
  color: var(--kpf-link-accent) !important;
  background: transparent !important;
}

a.btn-danger,
a.btn-danger:hover {
  color: #fff !important;
}

/* DataTables — primary links black/cobalt; cells secondary; row-options muted */
html body.app.admin .dataTables_wrapper table tbody td,
html body.app.admin table.dataTable tbody td {
  color: var(--kodex-text-secondary, #40424d) !important;
}

html body.app.admin .dataTables_wrapper .row-options,
html body.app.admin table.dataTable .row-options,
html body.app.admin #clients_wrapper .row-options {
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin .dataTables_wrapper table tbody a:not(.btn):not(.label):not(.badge),
html body.app.admin table.dataTable tbody a:not(.btn):not(.label):not(.badge),
html body.app.admin .dataTables_wrapper table tbody a.tw-font-medium,
html body.app.admin #clients_wrapper table tbody a:not(.row-options a) {
  color: var(--kpf-table-link, #000000) !important;
  text-decoration: none !important;
  font-weight: 600;
}

html body.app.admin .dataTables_wrapper .row-options a,
html body.app.admin table.dataTable .row-options a,
html body.app.admin #clients_wrapper .row-options a {
  color: var(--kodex-text-muted, #6e7180) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

html body.app.admin .dataTables_wrapper table tbody a:not(.btn):not(.label):not(.badge):hover,
html body.app.admin table.dataTable tbody a:not(.btn):not(.label):not(.badge):hover,
html body.app.admin .dataTables_wrapper table tbody a.tw-font-medium:hover,
html body.app.admin #clients_wrapper table tbody a:hover,
html body.app.admin .dataTables_wrapper .row-options a:hover,
html body.app.admin table.dataTable .row-options a:hover,
html body.app.admin #clients_wrapper .row-options a:hover {
  color: var(--kpf-table-link-hover, #001bff) !important;
  text-decoration: none !important;
}

/* —— Identity / dropdown menus —— */
html body.app.admin .kodex-crm-admin__identity-menu a,
html body.app.admin .dropdown-menu > li > a,
html body.app.admin .kds-insp-ctx__menu a {
  color: var(--kodex-text-primary, #14141a) !important;
  text-decoration: none !important;
}

html body.app.admin .kodex-crm-admin__identity-menu a:hover,
html body.app.admin .dropdown-menu > li > a:hover,
html body.app.admin .kds-insp-ctx__menu a:hover {
  color: var(--kodex-text-primary, #14141a) !important;
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
  text-decoration: none !important;
}

html[data-theme='dark'] body.app.admin .kodex-crm-admin__identity-menu a,
html[data-theme='dark'] body.app.admin .dropdown-menu > li > a,
html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-menu a {
  color: var(--kodex-text-primary, #fff) !important;
}

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

/* —— Theme toggle + sign out: icon follows button color —— */
html body.app.admin .kodex-crm-admin__rail-nav-action,
html body.app.admin .kodex-crm-admin__utility--dark-ui {
  color: color-mix(in srgb, #fff 78%, transparent);
}

html body.app.admin .kodex-crm-admin__rail-nav-action svg,
html body.app.admin .kodex-crm-admin__utility--dark-ui svg,
html body.app.admin .kodex-crm-admin__theme-icon,
html body.app.admin .kodex-crm-admin__theme-icon svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}

html body.app.admin .kodex-crm-admin__rail-nav-action:hover,
html body.app.admin .kodex-crm-admin__rail-nav-action--active {
  color: #fff !important;
}

html body.app.admin .kodex-crm-admin__rail-nav-action--signout:hover {
  color: #fff !important;
}

html body.app.admin .kodex-crm-admin__utility--dark-ui:hover,
html body.app.admin .kodex-crm-admin__utility--dark-ui:focus-visible,
html body.app.admin .kodex-crm-admin__utility--dark-ui.kodex-crm-admin__utility--active {
  color: #001d3a !important;
}

html body.app.admin .kodex-crm-admin__utility--dark-ui:hover svg,
html body.app.admin .kodex-crm-admin__utility--dark-ui.kodex-crm-admin__utility--active svg {
  color: inherit !important;
  stroke: currentColor !important;
}

/* Header utilities: muted → bright, never forced cobalt on hover */
html body.app.admin #header .navbar-nav > li > a:not(.btn) i,
html body.app.admin #header .navbar-nav > li > a:not(.btn) svg,
html body.app.admin #header .kodex-crm-admin__utility svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}


/* === kpf-onoffswitch-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,
html body.app.admin #clients_wrapper .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,
html body.app.admin #clients_wrapper .onoffswitch-checkbox:checked + .onoffswitch-label:before {
  border-color: #001bff !important;
}