/* L3 Surfaces — generated 2026-07-17 */

/* === kpf-crm-auth.css === */
/**
 * Kodex CrmAuthLayout — ported from DS kds-crm-auth (screens 17–18)
 * Token fallbacks so Perfex does not depend on full tokens.css
 */
:root, html[data-theme="light"], body.login_admin, body.customers.login, body.customers.register {
  --kodex-action-primary: #001bff;
  --kodex-action-primary-fg: #ffffff;
  --kodex-bg-surface: #ffffff;
  --kodex-bg-canvas: #f0f1f4;
  --kodex-bg-subtle: #f5f5f5;
  --kodex-bg-muted: #edeff7;
  --kodex-text-primary: #14141a;
  --kodex-text-secondary: #40424d;
  --kodex-text-muted: #6e7180;
  --kodex-text-link: #001bff;
  --kodex-text-link-hover: #0015cc;
  --kodex-border-default: #d3d6e0;
  --kodex-border-subtle: #edeff7;
  --kodex-radius-sm: 4px;
  --kodex-radius-md: 4px;
  --kodex-font-body: "Satoshi", system-ui, sans-serif;
  --kodex-font-display: "Neue Haas Grotesk Display", "Satoshi", system-ui, sans-serif;
  --kodex-feedback-success: #0d7a4e;
  --kodex-feedback-warning: #fa4616;
  --kodex-feedback-error: #c41e3a;
  --kodex-color-white: #ffffff;
  --kodex-color-black: #000000;
  --kodex-color-charcoal-deep: #14141a;
  --kodex-pattern-cell-active: #001bff;
  --kodex-pattern-cell-inactive: color-mix(in srgb, #001bff 10%, #d3d6e0);
}

body.login_admin,
body.customers.login,
body.customers.register {
  margin: 0 !important;
  min-height: 100vh !important;
  background: var(--kodex-bg-canvas) !important;
  font-family: var(--kodex-font-body) !important;
}

body.login_admin,
body.customers.login,
body.customers.register {
  /* full-bleed auth shell */
}

.kds-crm-auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.kds-crm-auth-page > .kds-crm-auth {
  flex: 1;
  min-height: 100vh;
}

/* Map Perfex form controls into auth look */
.kds-crm-auth .form-group { margin: 0 0 0; }
.kds-crm-auth .form-group + .form-group,
.kds-crm-auth .form-group.tw-mt-8 { margin-top: 0; }
.kds-crm-auth label.control-label,
.kds-crm-auth .control-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--kodex-text-secondary);
  margin-bottom: 6px !important;
}
.kds-crm-auth .form-control {
  height: 42px !important;
  border: 1px solid var(--kodex-border-default) !important;
  border-radius: var(--kodex-radius-sm) !important;
  background: var(--kodex-bg-surface) !important;
  color: var(--kodex-text-primary) !important;
  box-shadow: none !important;
  font-family: var(--kodex-font-body) !important;
  font-size: 14px !important;
}
.kds-crm-auth .form-control:focus {
  border-color: var(--kodex-action-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kodex-action-primary) 16%, transparent) !important;
}
.kds-crm-auth .btn-primary,
.kds-crm-auth .kds-crm-auth__submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: var(--kodex-action-primary) !important;
  border: 1px solid var(--kodex-action-primary) !important;
  border-radius: var(--kodex-radius-sm) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: var(--kodex-font-body) !important;
  box-shadow: none !important;
}
.kds-crm-auth .btn-primary:hover {
  background: #0015cc !important;
  border-color: #0015cc !important;
}
.kds-crm-auth .checkbox label,
.kds-crm-auth .checkbox {
  font-size: 13px;
  color: var(--kodex-text-secondary);
}
.kds-crm-auth .alert {
  border-radius: var(--kodex-radius-sm) !important;
  font-size: 13px;
}
.kds-crm-auth .company-logo { display: none !important; }
.kds-crm-auth .tw-bg-white,
.kds-crm-auth .panel_s,
.kds-crm-auth .panel-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.kds-crm-auth .btn-default {
  background: var(--kodex-bg-surface) !important;
  border: 1px solid var(--kodex-border-default) !important;
  color: var(--kodex-text-primary) !important;
  border-radius: var(--kodex-radius-sm) !important;
}
.kds-crm-auth .btn-secondary,
.kds-crm-auth__sso .btn {
  background: var(--kodex-bg-surface) !important;
  border: 1px solid var(--kodex-border-default) !important;
  color: var(--kodex-text-primary) !important;
  border-radius: var(--kodex-radius-sm) !important;
  font-weight: 500 !important;
  padding: 10px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100%;
}
.kds-crm-auth__typography-display {
  margin: 0;
  font-family: var(--kodex-font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--kodex-text-primary);
  line-height: 1.2;
}
.kds-crm-auth__typography-subtitle {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--kodex-text-muted);
  line-height: 1.45;
}
.kds-crm-auth__typography-overline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
}
.kds-crm-auth__typography-caption {
  font-size: 12px;
  color: inherit;
  margin: 0;
}
.kds-crm-auth__typography-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: inherit;
}
.kds-crm-auth__typography-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: inherit;
}
.kds-crm-auth__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--kodex-radius-sm);
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, #fff 14%, transparent);
  color: #fff;
}
.kds-crm-auth__badge--success {
  background: color-mix(in srgb, #0d7a4e 22%, transparent);
  color: color-mix(in srgb, #0d7a4e 40%, #fff);
}

/* Hide Perfex chrome on auth */
body.login_admin #header,
body.customers.login .navbar,
body.customers.register .navbar,
body.customers.login .navbar-default,
body.customers.register .navbar-default {
  display: none !important;
}
body.customers.login #wrapper,
body.customers.register #wrapper {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  min-height: 100vh !important;
}
body.customers.login .container,
body.customers.register .container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.kds-crm-viewport--auth {
  min-height: 680px;
}

.kds-crm-preview--auth {
  flex: 1;
  min-height: 680px;
  border: 1px solid var(--kodex-border-default);
  border-radius: var(--kodex-radius-md);
  overflow: hidden;
  background: var(--kodex-bg-canvas);
}

.kds-crm-auth {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: 680px;
  height: 100%;
}

@media (max-width: 900px) {
  .kds-crm-auth {
    grid-template-columns: 1fr;
  }

  .kds-crm-auth__brand {
    display: none;
  }
}

/* Form panel */
.kds-crm-auth__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--kodex-action-primary) 6%, transparent), transparent 42%),
    linear-gradient(180deg, var(--kodex-bg-surface) 0%, var(--kodex-bg-canvas) 100%);
  overflow-y: auto;
}

.kds-crm-auth__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--kodex-text-muted) 18%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.35;
  pointer-events: none;
}

[data-theme='dark'] .kds-crm-auth__panel::before {
  opacity: 0.18;
}

.kds-crm-auth__panel-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kds-crm-auth__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.kds-crm-auth__logo-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--kodex-radius-md);
  background: var(--kodex-action-primary);
  color: var(--kodex-action-primary-fg);
  font-weight: 700;
  font-size: 18px;
  display: grid;
  place-items: center;
  font-family: var(--kodex-font-display, var(--kodex-font-body));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--kodex-action-primary) 28%, transparent);
}

.kds-crm-auth__logo-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kodex-text-primary);
  font-family: var(--kodex-font-display, var(--kodex-font-body));
}

.kds-crm-auth__logo-dot {
  color: var(--kodex-action-primary);
}

.kds-crm-auth__tabs {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: var(--kodex-bg-subtle);
  border: 1px solid var(--kodex-border-subtle, var(--kodex-border-default));
  gap: 2px;
}

.kds-crm-auth__tab {
  border: 0;
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kodex-text-muted);
  cursor: pointer;
  font-family: var(--kodex-font-body);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.kds-crm-auth__tab:hover {
  color: var(--kodex-text-primary);
}

.kds-crm-auth__tab--active {
  background: var(--kodex-bg-surface);
  color: var(--kodex-text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--kodex-text-primary) 8%, transparent);
}

.kds-crm-auth__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.kds-crm-auth__head .kds-crm-auth__typography-display, .kodex-crm-text--display {
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  letter-spacing: -0.02em;
}

.kds-crm-auth__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kds-crm-auth__form--register {
  gap: 14px;
}

.kds-crm-auth__field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .kds-crm-auth__field-grid {
    grid-template-columns: 1fr;
  }
}

.kds-crm-auth__password {
  position: relative;
}

.kds-crm-auth__password .kodex-input-field {
  position: relative;
}

.kds-crm-auth__password .kodex-input {
  padding-right: 44px;
}

.kds-crm-auth__password-toggle {
  position: absolute;
  right: 10px;
  top: 2.15rem;
  border: 0;
  background: var(--kodex-bg-subtle);
  width: 32px;
  height: 32px;
  border-radius: var(--kodex-radius-sm);
  display: grid;
  place-items: center;
  color: var(--kodex-text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.kds-crm-auth__password-toggle:hover {
  color: var(--kodex-text-primary);
  background: var(--kodex-bg-surface);
}

.kds-crm-auth__strength {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: -8px;
}

.kds-crm-auth__strength-bars {
  display: flex;
  gap: 4px;
}

.kds-crm-auth__strength-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--kodex-border-default);
  transition: background 0.2s;
}

.kds-crm-auth__strength-bar--weak {
  background: var(--kodex-feedback-error);
}

.kds-crm-auth__strength-bar--fair {
  background: var(--kodex-feedback-warning);
}

.kds-crm-auth__strength-bar--good {
  background: var(--kodex-feedback-success);
}

.kds-crm-auth__strength-bar--strong {
  background: var(--kodex-action-primary);
}

.kds-crm-auth__country {
  border: 0;
  margin: 0;
  padding: 0;
}

.kds-crm-auth__country-legend {
  font-size: 13px;
  font-weight: 500;
  color: var(--kodex-text-secondary);
  margin-bottom: 8px;
  padding: 0;
}

.kds-crm-auth__country-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.kds-crm-auth__country-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1.5px solid var(--kodex-border-default);
  border-radius: var(--kodex-radius-md);
  background: var(--kodex-bg-surface);
  cursor: pointer;
  text-align: left;
  font-family: var(--kodex-font-body);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.kds-crm-auth__country-card:hover {
  border-color: color-mix(in srgb, var(--kodex-action-primary) 40%, var(--kodex-border-default));
}

.kds-crm-auth__country-card--active {
  border-color: var(--kodex-action-primary);
  background: color-mix(in srgb, var(--kodex-action-primary) 5%, var(--kodex-bg-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kodex-action-primary) 12%, transparent);
}

.kds-crm-auth__country-flag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--kodex-action-primary);
  padding: 2px 6px;
  border-radius: var(--kodex-radius-sm);
  background: color-mix(in srgb, var(--kodex-action-primary) 10%, transparent);
}

.kds-crm-auth__checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kds-crm-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.kds-crm-auth__submit {
  width: 100%;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding-block: 12px;
  font-weight: 600;
}

.kds-crm-auth__divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
}

.kds-crm-auth__divider span {
  font-size: 12px;
  color: var(--kodex-text-muted);
  white-space: nowrap;
}

.kds-crm-auth__sso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.kds-crm-auth__sso .kodex-btn {
  justify-content: center;
  gap: 8px;
}

.kds-crm-auth__sso-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--kodex-radius-sm);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.kds-crm-auth__sso-icon--ms {
  background: var(--kodex-bg-muted);
  color: var(--kodex-text-secondary);
}

.kds-crm-auth__sso-icon--google {
  background: var(--kodex-bg-surface);
  color: var(--kodex-text-link);
  border: 1px solid var(--kodex-border-default);
}

.kds-crm-auth__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: var(--kodex-radius-md);
  background: var(--kodex-bg-subtle);
  color: var(--kodex-text-muted);
}

.kds-crm-auth__link {
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--kodex-text-link);
  cursor: pointer;
  font-family: var(--kodex-font-body);
  text-decoration: none;
}

.kds-crm-auth__link:hover {
  color: var(--kodex-text-link-hover);
  text-decoration: underline;
}

.kds-crm-auth__switch {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--kodex-text-muted);
  text-align: center;
}

.kds-crm-auth__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--kodex-border-subtle, var(--kodex-border-default));
  font-size: 12px;
}

.kds-crm-auth__legal a {
  color: var(--kodex-text-muted);
  text-decoration: none;
}

.kds-crm-auth__legal a:hover {
  color: var(--kodex-action-primary);
}

.kds-crm-auth__legal a:hover {
  color: var(--kodex-text-link);
}

/* Brand panel — fixed dark marketing surface (primitives, not site theme) */
.kds-crm-auth__brand {
  --kds-auth-brand-fg: var(--kodex-color-white);
  --kds-auth-brand-muted: color-mix(in srgb, var(--kodex-color-white) 72%, transparent);
  --kds-auth-brand-subtle: color-mix(in srgb, var(--kodex-color-white) 8%, transparent);
  --kds-auth-brand-border: color-mix(in srgb, var(--kodex-color-white) 12%, transparent);
  position: relative;
  padding: 48px 40px;
  overflow: hidden;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--kodex-action-primary) 92%, var(--kodex-color-black)) 0%,
    color-mix(in srgb, var(--kodex-action-primary) 45%, var(--kodex-color-charcoal-deep)) 55%,
    var(--kodex-color-charcoal-deep) 100%
  );
  color: var(--kds-auth-brand-fg);
  display: flex;
  align-items: center;
}

.kds-crm-auth__brand .kds-crm-auth__badge, .kodex-badge--default {
  background: color-mix(in srgb, var(--kds-auth-brand-fg) 14%, transparent);
  color: var(--kds-auth-brand-fg);
}

.kds-crm-auth__brand .kds-crm-auth__badge--success, .kodex-badge--success {
  background: color-mix(in srgb, var(--kodex-feedback-success) 22%, transparent);
  color: color-mix(in srgb, var(--kodex-feedback-success) 88%, var(--kds-auth-brand-fg));
}

.kds-crm-auth__brand-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--kodex-color-white) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--kodex-color-white) 6%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, var(--kodex-color-black) 20%, transparent 75%);
  pointer-events: none;
}

.kds-crm-auth__brand-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 42ch;
}

.kds-crm-auth__brand-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.kds-crm-auth__brand .kds-crm-auth__typography-display, .kodex-crm-text--display {
  color: var(--kds-auth-brand-fg);
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.kds-crm-auth__brand .kds-crm-auth__typography-overline, .kodex-crm-text--overline {
  color: var(--kds-auth-brand-muted);
}

.kds-crm-auth__brand .kds-crm-auth__typography-caption, .kodex-crm-text--caption {
  color: var(--kds-auth-brand-muted);
}

.kds-crm-auth__preview {
  margin: 12px 0 8px;
  padding: 14px;
  border-radius: var(--kodex-radius-md);
  background: var(--kds-auth-brand-subtle);
  border: 1px solid var(--kds-auth-brand-border);
  backdrop-filter: blur(8px);
}

.kds-crm-auth__preview-bar {
  height: 6px;
  width: 40%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kds-auth-brand-fg) 25%, transparent);
  margin-bottom: 14px;
}

.kds-crm-auth__preview-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.kds-crm-auth__preview-kpis .kds-crm-auth__typography-title, .kodex-crm-text--title {
  color: var(--kds-auth-brand-fg);
  font-size: 1.1rem;
}

.kds-crm-auth__preview-kpis .kds-crm-auth__typography-caption, .kodex-crm-text--caption {
  font-size: 10px;
}

.kds-crm-auth__preview-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
  padding-top: 4px;
}

.kds-crm-auth__preview-chart span {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--kds-auth-brand-fg) 55%, var(--kodex-action-primary)) 0%,
    color-mix(in srgb, var(--kds-auth-brand-fg) 15%, var(--kodex-action-primary)) 100%
  );
  min-height: 8px;
}

.kds-crm-auth__quote {
  margin: 8px 0 0;
  padding: 14px 16px;
  border-left: 3px solid color-mix(in srgb, var(--kds-auth-brand-fg) 35%, transparent);
  background: color-mix(in srgb, var(--kodex-color-black) 15%, transparent);
  border-radius: 0 var(--kodex-radius-md) var(--kodex-radius-md) 0;
}

.kds-crm-auth__quote .kds-crm-auth__typography-body, .kodex-crm-text--body {
  color: color-mix(in srgb, var(--kds-auth-brand-fg) 92%, transparent);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
}

.kds-crm-auth__quote footer {
  margin-top: 8px;
}

.kds-crm-auth__stats {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  font-size: 12px;
  color: var(--kds-auth-brand-muted);
}

.kds-crm-auth__stats strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--kds-auth-brand-fg);
  margin-bottom: 2px;
}


/* === kpf-login-screen.css === */
/**
 * Kodex DS LoginScreen (Inspiration kit #login) — AuthSplitCard layout
 * Responsive via container queries + viewport fallbacks
 */
/* Full-bleed AuthSplitCard — production page (not DS demo frame) */
body.login_admin.kds-insp-login-page,
body.customers.login.kds-insp-login-page {
  margin: 0 !important;
  min-height: 100vh !important;
  height: 100% !important;
  background: var(--kodex-bg-canvas, #edeff7) !important;
  font-family: "Satoshi", system-ui, sans-serif !important;
  display: block !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Kill legacy folder-motif watermarks on auth pages */
body.login_admin::before,
body.login_admin::after,
body.customers.login::before,
body.customers.login::after,
body.customers.register::before,
body.customers.register::after,
body.login_admin.kds-insp-login-page::before,
body.login_admin.kds-insp-login-page::after {
  content: none !important;
  display: none !important;
  background: none !important;
  clip-path: none !important;
}

html:has(body.login_admin.kds-insp-login-page),
html:has(body.customers.login.kds-insp-login-page) {
  height: 100% !important;
}

.kds-insp-login-page__cq,
body.login_admin.kds-insp-login-page .kds-insp-auth-cq,
body.customers.login.kds-insp-login-page .kds-insp-auth-cq {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  height: 100vh !important;
  margin: 0 !important;
}

.kds-insp-login.kds-insp-auth {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  height: 100vh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.kds-insp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Perfex chrome off */
body.login_admin.kds-insp-login-page #header,
body.customers.login.kds-insp-login-page .navbar {
  display: none !important;
}

/* Production login = navy brand + light form (DS AuthSplitCard). Cobalt CTA. */
.kds-insp-login .kds-insp-auth__submit {
  background: var(--kodex-action-primary, #001bff) !important;
  color: #ffffff !important;
  border: 0 !important;
}

.kds-insp-login .kds-insp-auth__submit:hover {
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 88%, #000) !important;
  color: #ffffff !important;
}

.kds-insp-login .alert {
  border-radius: 4px;
  font-size: 13px;
  margin: 0;
}

.kds-insp-login input[type="checkbox"].kds-insp-login__remember-native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


.kds-insp {
  --kds-insp-radius-pill: 4px;
  --kds-insp-radius-card: 4px;
  --kds-insp-cobalt: #001bff;
  --kds-insp-navy: #001d3a;
  --kds-insp-dark: #14141a;
  --kds-insp-dark-elevated: #1e1e24;
  --kds-insp-dark-muted: #2a2a32;
  /* Demo/kit default is dark; production login overrides below. */
  --kds-insp-surface: var(--kds-insp-dark);
  --kds-insp-surface-elevated: var(--kds-insp-dark-elevated);
  --kds-insp-panel: #ffffff;
  --kds-insp-panel-fg: #14141a;
  --kds-insp-fg: #ffffff;
  --kds-insp-fg-soft: rgba(255, 255, 255, 0.9);
  --kds-insp-fg-muted: rgba(255, 255, 255, 0.55);
  --kds-insp-divider: rgba(255, 255, 255, 0.08);
  --kds-insp-border: rgba(255, 255, 255, 0.1);
  --kds-insp-hover: rgba(255, 255, 255, 0.08);
  --kds-insp-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  font-family: "Satoshi", system-ui, sans-serif;
}

/*
 * Login / customer auth pages: force light form panel.
 * .kds-insp otherwise inherits dark demo tokens → charcoal form + invisible title.
 */
body.login_admin.kds-insp-login-page .kds-insp,
body.customers.login.kds-insp-login-page .kds-insp,
body.customers.register.kds-insp-login-page .kds-insp {
  --kds-insp-surface: #ffffff;
  --kds-insp-surface-elevated: #f5f5f5;
  --kds-insp-panel: #ffffff;
  --kds-insp-panel-fg: #14141a;
  --kds-insp-fg: #14141a;
  --kds-insp-fg-soft: #40424d;
  --kds-insp-fg-muted: #6e7180;
  --kds-insp-divider: #edeff7;
  --kds-insp-border: #d3d6e0;
  --kds-insp-hover: #f5f5f5;
  --kds-insp-shadow: 0 8px 28px rgba(20, 20, 26, 0.08);
}

body.login_admin.kds-insp-login-page .kds-insp-auth,
body.customers.login.kds-insp-login-page .kds-insp-auth {
  background: #ffffff !important;
  color: #14141a !important;
  border-color: #d3d6e0 !important;
}

body.login_admin.kds-insp-login-page .kds-insp-auth__form,
body.customers.login.kds-insp-login-page .kds-insp-auth__form {
  background: #ffffff !important;
  color: #14141a !important;
}

body.login_admin.kds-insp-login-page .kds-insp-auth__social button,
body.customers.login.kds-insp-login-page .kds-insp-auth__social button {
  background: #f5f5f5 !important;
  border: 1px solid #d3d6e0 !important;
  color: #14141a !important;
}

body.login_admin.kds-insp-login-page .kds-insp-auth__field input,
body.login_admin.kds-insp-login-page .kds-insp-auth__pw,
body.customers.login.kds-insp-login-page .kds-insp-auth__field input,
body.customers.login.kds-insp-login-page .kds-insp-auth__pw {
  background: #f5f5f5 !important;
  border: 1px solid #d3d6e0 !important;
  color: #14141a !important;
}

/* Login / Register segmented tabs */
.kds-insp-auth__tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  padding: 3px;
  margin: 0 0 4px;
  border: 1px solid var(--kds-insp-border, #d3d6e0);
  border-radius: 4px;
  background: var(--kds-insp-hover, #f5f5f5);
}

.kds-insp-auth__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--kds-insp-fg-muted, #6e7180);
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.kds-insp-auth__tab:hover {
  color: var(--kds-insp-fg, #14141a);
}

.kds-insp-auth__tab--active,
.kds-insp-auth__tab[aria-selected="true"] {
  background: #ffffff;
  color: var(--kds-insp-fg, #14141a);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(20, 20, 26, 0.08);
}

.kds-insp-auth__panel {
  display: none;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kds-insp-auth__panel.is-active {
  display: flex;
}

.kds-insp-auth__panel[hidden] {
  display: none !important;
}

.kds-insp-auth__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-width: 0;
}

.kds-insp-auth__gate {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--kds-insp-border, #d3d6e0);
  border-radius: 4px;
  background: var(--kds-insp-hover, #f5f5f5);
}

.kds-insp-auth__gate p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--kds-insp-fg-soft, #40424d);
}

@media (max-width: 560px) {
  .kds-insp-auth__field-row {
    grid-template-columns: 1fr;
  }

  .kds-insp-auth__tabs {
    width: 100%;
  }

  .kds-insp-auth__tab {
    flex: 1;
    text-align: center;
  }
}
.kds-insp-feedback {
  margin: 0;
  font-size: 12px;
  color: #0d7a4e;
}

/* Container query host — responds to available width (density frames, dual panels, viewports). */
.kds-insp-auth-cq {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  container-type: inline-size;
  container-name: kds-auth;
}

.kds-insp-auth {
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) minmax(0, 1.1fr);
  min-height: 480px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--kds-insp-border);
  background: var(--kds-insp-surface);
  color: var(--kds-insp-fg);
  /* login page overrides full-bleed below */
  box-shadow: var(--kds-insp-shadow);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.kds-insp-auth__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(16px, 3cqw, 24px);
  background: var(--kds-insp-navy);
  color: #fff;
  background-image: radial-gradient(circle at 20% 80%, rgba(0, 27, 255, 0.35), transparent 50%);
  min-width: 0;
}

.kds-insp-auth__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 12px;
}

.kds-insp-auth__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.kds-insp-auth__logo {
  display: block;
  width: min(100%, 180px);
  height: auto;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}

.kds-insp-auth__brand strong {
  font-size: 20px;
}

.kds-insp-auth__side p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  max-width: 28ch;
}

.kds-insp-auth__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
}

.kds-insp-auth__links a {
  color: #f7f7f7 !important;
  text-decoration: none;
  font-size: 12px;
  opacity: 1;
}

.kds-insp-auth__links a:hover {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kds-insp-auth__form {
  padding: clamp(16px, 3cqw, 28px) clamp(14px, 2.5cqw, 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kds-insp-auth__form h2 {
  margin: 0;
  font-size: clamp(22px, 5cqw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.kds-insp-auth__form > p {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--kds-insp-fg-muted);
  line-height: 1.45;
}

.kds-insp-auth__social {
  display: grid;
  gap: 8px;
}

.kds-insp-auth__social button {
  min-height: 42px;
  border-radius: 4px;
  border: 1px solid var(--kds-insp-border);
  background: var(--kds-insp-hover);
  color: var(--kds-insp-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

.kds-insp-auth__or {
  display: grid;
  place-items: center;
  position: relative;
  margin: 4px 0;
  color: var(--kds-insp-fg-muted);
  font-size: 11px;
}

.kds-insp-auth__or::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--kds-insp-divider);
}

.kds-insp-auth__or span {
  position: relative;
  padding: 0 8px;
  background: var(--kds-insp-surface);
}

.kds-insp-auth__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  min-width: 0;
}

.kds-insp-auth__field > span {
  color: var(--kds-insp-fg-soft);
  font-weight: 600;
}

.kds-insp-auth__field input,
.kds-insp-auth__pw {
  min-height: 40px;
  border-radius: 4px;
  border: 1px solid var(--kds-insp-border);
  background: var(--kds-insp-hover);
  color: var(--kds-insp-fg);
  font: inherit;
  font-size: 13px;
  padding: 0 12px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.kds-insp-auth__pw {
  display: flex;
  align-items: center;
  padding-right: 8px;
}

.kds-insp-auth__pw input {
  flex: 1;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
  min-height: 38px;
  min-width: 0;
}

.kds-insp-auth__pw button {
  border: 0;
  background: transparent;
  color: var(--kds-insp-fg-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.kds-insp-auth__forgot {
  align-self: flex-end;
  font-size: 12px;
  color: var(--kds-insp-fg-muted);
  text-decoration: none;
}

.kds-insp-auth__toggle {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}

.kds-insp-auth__toggle > div {
  min-width: 0;
  flex: 1;
}

.kds-insp-auth__toggle strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.kds-insp-auth__toggle span {
  font-size: 12px;
  color: var(--kds-insp-fg-muted);
}

.kds-insp-auth__switch {
  width: 44px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--kds-insp-border);
  background: var(--kds-insp-hover);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.kds-insp-auth__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--kds-insp-fg-muted);
}

.kds-insp-auth__switch--on {
  background: var(--kds-insp-cobalt);
  border-color: transparent;
}

.kds-insp-auth__switch--on::after {
  left: 23px;
  background: #fff;
}

.kds-insp-auth__submit {
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  background: var(--kds-insp-panel);
  color: var(--kds-insp-panel-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

.theme-dark .kds-insp-auth__submit,
[data-theme='dark'] .kds-insp-auth__submit {
  background: #fff;
  color: #14141a;
}

.kds-insp-auth__register {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--kds-insp-fg-muted);
}

.kds-insp-auth__register a {
  color: var(--kds-insp-fg);
  font-weight: 700;
  text-decoration: none;
}

.kds-insp-auth__form .kds-insp-feedback {
  margin: 0;
  text-align: center;
}

/* ── Container queries (component width) ── */

@container kds-auth (max-width: 639px) {
  .kds-insp-auth {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .kds-insp-auth__side {
    min-height: 0;
    gap: 12px;
    padding: 16px;
  }

  .kds-insp-auth__brand {
    margin-top: 4px;
  }

  .kds-insp-auth__logo {
    width: min(100%, 120px);
  }

  .kds-insp-auth__side p {
    max-width: none;
    font-size: 12px;
  }

  .kds-insp-auth__links {
    margin-top: 4px;
    gap: 12px;
  }

  .kds-insp-auth__form {
    padding: 16px 14px 20px;
  }

  .kds-insp-auth__form h2 {
    font-size: clamp(20px, 7cqw, 24px);
  }

  .kds-insp-auth__toggle {
    align-items: flex-start;
  }
}

@container kds-auth (min-width: 420px) and (max-width: 639px) {
  .kds-insp-auth__social {
    grid-template-columns: 1fr 1fr;
  }
}

@container kds-auth (min-width: 640px) {
  .kds-insp-auth {
    grid-template-columns: minmax(180px, 0.95fr) minmax(0, 1.15fr);
  }
}

@container kds-auth (max-width: 359px) {
  .kds-insp-auth__social button {
    font-size: 12px;
    min-height: 40px;
    padding: 0 8px;
  }

  .kds-insp-auth__toggle strong {
    font-size: 12px;
  }

  .kds-insp-auth__toggle span {
    font-size: 11px;
  }
}

/* Legacy named containers (kit dual / demo stacks) */
@container insp-stage (max-width: 639px),
  insp-demo (max-width: 639px) {
  .kds-insp-auth {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .kds-insp-auth__side {
    min-height: 0;
  }

  .kds-insp-auth__brand {
    margin-top: 4px;
  }
}

@container insp-demo (min-width: 640px) {
  .kds-insp-demo-frame--premium .kds-insp-premium,
  .kds-insp-demo-frame--auth .kds-insp-auth {
    grid-template-columns: minmax(180px, 0.95fr) minmax(0, 1.15fr);
  }
}

/* Viewport fallback when container queries are unavailable */
@media (max-width: 720px) {
  .kds-insp-auth {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .kds-insp-auth__side {
    min-height: 0;
  }

  .kds-insp-auth__brand {
    margin-top: 4px;
  }
}

/* LoginScreen reuses AuthSplitCard layout (kds-insp-auth). Thin extras only. */

.kds-insp-login.kds-insp-auth {
  min-height: 100vh;
}

.kds-insp-login__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kds-insp-login__meta {
  display: flex;
  justify-content: flex-end;
}

.kds-insp-login__meta .kds-insp-auth__forgot {
  align-self: auto;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.kds-insp-login__legal {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
  max-width: none;
}

.kds-insp-login__text-link {
  border: 0;
  background: transparent;
  color: var(--kds-insp-fg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.kds-insp-login__text-link:hover {
  text-decoration: underline;
}

.kds-insp-login .kds-insp-feedback {
  margin: 0;
  text-align: center;
}

@container kds-auth (max-width: 639px) {
  .kds-insp-login.kds-insp-auth {
    min-height: 0;
  }

  .kds-insp-login__legal {
    font-size: 10px;
  }
}

@container insp-stage (max-width: 639px),
  insp-demo (max-width: 639px) {
  .kds-insp-login.kds-insp-auth {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .kds-insp-login.kds-insp-auth {
    min-height: 0;
  }
}

/* Client area: strip Perfex chrome so LoginScreen is full-stage.
   No flex-centering here — the card below is pinned to exactly 100vh with
   overflow contained internally, so centering an oversized box (which was
   pushing #wrapper's top far above the viewport) can never happen again. */
body.customers.login.kds-insp-login-page #wrapper,
body.customers.login.kds-insp-login-page .content,
body.customers.login.kds-insp-login-page .container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  background: transparent !important;
  display: block !important;
  overflow: hidden !important;
}
body.customers.login.kds-insp-login-page .navbar,
body.customers.login.kds-insp-login-page footer {
  display: none !important;
}

/* —— Production full-bleed (beats demo-card defaults) ——
   The split card is no longer a two-column grid: the aside becomes a fixed,
   viewport-filling backdrop (its orbital gradient keeps animating in place
   no matter what scrolls on top of it) and the form becomes a floating
   card pinned to the right edge — rounded only on the side that faces the
   gradient, flush everywhere else. */
body.login_admin.kds-insp-login-page .kds-insp-auth,
body.customers.login.kds-insp-login-page .kds-insp-auth,
body.login_admin.kds-insp-login-page .kds-insp-login.kds-insp-auth {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Aside: fixed to the viewport (100vw × 100vh) — stays put and keeps
   animating while the form card scrolls independently on top of it. */
body.login_admin.kds-insp-login-page .kds-insp-auth__side,
body.customers.login.kds-insp-login-page .kds-insp-auth__side {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

/* Keep the brand copy clear of the floating form card on the right. */
body.login_admin.kds-insp-login-page .kds-insp-auth__side > *,
body.customers.login.kds-insp-login-page .kds-insp-auth__side > * {
  max-width: min(46%, 480px);
}

/* Form: fixed right column — dense full-bleed panel.
   Content starts at the top and spans the panel width (tight padding only).
   No centered reading column / no vertical centering — that left a huge
   empty halo around tabs + fields. */
body.login_admin.kds-insp-login-page .kds-insp-auth__form,
body.customers.login.kds-insp-login-page .kds-insp-auth__form {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: 50% !important;
  height: 100vh !important;
  min-height: 0 !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 28px 32px 40px !important;
  border-radius: var(--kds-insp-radius-card, 4px) 0 0 var(--kds-insp-radius-card, 4px) !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 16px !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  z-index: 2 !important;
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.18) !important;
  box-sizing: border-box !important;
}

body.login_admin.kds-insp-login-page .kds-insp-auth__form > *,
body.customers.login.kds-insp-login-page .kds-insp-auth__form > * {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

body.login_admin.kds-insp-login-page .kds-insp-auth__tabs,
body.customers.login.kds-insp-login-page .kds-insp-auth__tabs {
  align-self: flex-start;
  margin: 0;
  flex-shrink: 0;
}

body.login_admin.kds-insp-login-page .kds-insp-auth__panel,
body.customers.login.kds-insp-login-page .kds-insp-auth__panel {
  flex: 1 1 auto;
  gap: 12px;
  min-width: 0;
}

body.login_admin.kds-insp-login-page .kds-insp-auth__form h2,
body.customers.login.kds-insp-login-page .kds-insp-auth__form h2 {
  font-size: 26px;
  letter-spacing: -0.03em;
  margin: 0;
}

body.login_admin.kds-insp-login-page .kds-insp-auth__panel > p,
body.customers.login.kds-insp-login-page .kds-insp-auth__panel > p {
  margin: 0;
  max-width: none;
  font-size: 14px;
}

body.login_admin.kds-insp-login-page .kds-insp-auth__social,
body.customers.login.kds-insp-login-page .kds-insp-auth__social {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.login_admin.kds-insp-login-page .kds-insp-login__form,
body.customers.login.kds-insp-login-page .kds-insp-login__form {
  gap: 14px;
}

body.login_admin.kds-insp-login-page .kds-insp-auth__submit,
body.customers.login.kds-insp-login-page .kds-insp-auth__submit {
  margin-top: 4px;
  min-height: 44px;
}

@media (max-width: 720px) {
  body.login_admin.kds-insp-login-page #wrapper,
  body.customers.login.kds-insp-login-page #wrapper,
  body.login_admin.kds-insp-login-page .content,
  body.customers.login.kds-insp-login-page .content,
  body.login_admin.kds-insp-login-page .container,
  body.customers.login.kds-insp-login-page .container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.login_admin.kds-insp-login-page .kds-insp-auth,
  body.customers.login.kds-insp-login-page .kds-insp-auth {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  /* Small screens: drop the fixed split, stack aside above form so the
     whole page scrolls naturally instead of a 50/50 side-by-side. */
  body.login_admin.kds-insp-login-page .kds-insp-auth__side,
  body.customers.login.kds-insp-login-page .kds-insp-auth__side {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.login_admin.kds-insp-login-page .kds-insp-auth__side > *,
  body.customers.login.kds-insp-login-page .kds-insp-auth__side > * {
    max-width: none;
  }

  body.login_admin.kds-insp-login-page .kds-insp-auth__form,
  body.customers.login.kds-insp-login-page .kds-insp-auth__form {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow-y: visible !important;
    box-shadow: none !important;
    justify-content: flex-start !important;
    padding: 28px 20px 36px !important;
  }

  body.login_admin.kds-insp-login-page .kds-insp-auth__form > *,
  body.customers.login.kds-insp-login-page .kds-insp-auth__form > * {
    max-width: 100%;
  }
}

/* === kpf-circular-charts.css === */
/* Kodex circular charts + CrmChartCard chrome */
:root {
  --kodex-pattern-cell-active: #001bff;
  --kodex-pattern-cell-inactive: color-mix(in srgb, #001bff 10%, #d3d6e0);
  --kodex-circular-size: 168px;
  --kodex-action-primary: #001bff;
  --kodex-bg-surface: #fff;
  --kodex-bg-muted: #edeff7;
  --kodex-bg-canvas: #f0f1f4;
  --kodex-text-primary: #14141a;
  --kodex-text-secondary: #40424d;
  --kodex-text-muted: #6e7180;
  --kodex-border-default: #d3d6e0;
  --kodex-feedback-success: #0d7a4e;
  --kodex-feedback-warning: #fa4616;
  --kodex-feedback-error: #c41e3a;
  --kodex-radius-md: 4px;
  --kodex-font-display: "Neue Haas Grotesk Display", "Satoshi", system-ui, sans-serif;
}
.kodex-crm-chart-card {
  background: #fff;
  border: 1px solid var(--kodex-border-default);
  border-radius: var(--kodex-radius-md);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.kodex-crm-chart-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--kodex-border-default);
}
.kodex-crm-chart-card__title {
  margin: 0;
  font-family: var(--kodex-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--kodex-text-primary);
}
.kodex-crm-chart-card__subtitle {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--kodex-text-muted);
}
.kodex-crm-chart-card__body { padding: 14px 16px 16px; }
/* Hide native Chart.js canvas once Kodex chart mounted */
canvas.kpf-chart-replaced,
canvas[data-kpf-replaced='1'] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}
.kpf-kodex-chart-host { min-height: 200px; }
.kodex-segment-arc__slice--primary { stroke: #001bff; }
.kodex-segment-arc__slice--success { stroke: #0d7a4e; }
.kodex-segment-arc__slice--warning { stroke: #fa4616; }
.kodex-segment-arc__slice--error { stroke: #c41e3a; }
.kodex-segment-arc__slice--muted { stroke: #6e7180; }
.kodex-segment-arc__slice--navy { stroke: #001d3a; }

/**
 * Kodex circular charts — rings, gauges, conic donuts, pattern square rings
 */


.kodex-circular-chart {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

.kodex-circular-chart__labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.kodex-circular-chart__label {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kodex-text-secondary);
  font-variant-numeric: tabular-nums;
}

.kodex-circular-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
}

.kodex-circular-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kodex-text-muted);
}

.kodex-circular-chart__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.kodex-circular-chart__footnote {
  margin: 0;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kodex-text-muted);
}

/* Shared ring plot */
.kodex-circular-plot {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  width: min(100%, var(--kodex-circular-size, 168px));
  aspect-ratio: 1;
}

.kodex-circular-plot__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.kodex-circular-plot__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.kodex-circular-plot__value {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--kodex-text-primary);
  font-variant-numeric: tabular-nums;
}

.kodex-circular-plot__caption {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kodex-text-muted);
}

/* Pattern square ring — 3 columns on circumference */
.kodex-pattern-square-ring__cell {
  fill: var(--kodex-pattern-cell-inactive);
  rx: 1;
}

.kodex-pattern-square-ring__cell--primary {
  fill: var(--kodex-pattern-cell-active, var(--kodex-action-primary));
}

.kodex-pattern-square-ring__cell--success {
  fill: var(--kodex-pattern-cell-success, var(--kodex-feedback-success));
}

.kodex-pattern-square-ring__cell--error {
  fill: var(--kodex-pattern-cell-error, var(--kodex-feedback-error));
}

.kodex-pattern-square-ring__cell--warning {
  fill: var(--kodex-pattern-cell-warning, var(--kodex-feedback-warning));
}

.kodex-pattern-square-ring__cell--muted {
  fill: var(--kodex-pattern-cell-muted, var(--kodex-text-muted));
}

/* Conic donut */
.kodex-conic-ring {
  position: relative;
  width: min(100%, var(--kodex-circular-size, 168px));
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto;
}

.kodex-conic-ring__hole {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--kodex-bg-surface, var(--kodex-bg-canvas));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Radial dot ring */
.kodex-dot-ring__dot {
  fill: var(--kodex-pattern-cell-inactive);
}

.kodex-dot-ring__dot--active {
  fill: var(--kodex-pattern-cell-active, var(--kodex-action-primary));
}

.kodex-dot-ring__dot--success {
  fill: var(--kodex-feedback-success);
}

.kodex-dot-ring__dot--error {
  fill: var(--kodex-feedback-error);
}

.kodex-dot-ring__dot--warning {
  fill: var(--kodex-feedback-warning);
}

/* Nested minimal rings */
.kodex-nested-ring__track {
  fill: none;
  stroke: var(--kodex-minimal-track, color-mix(in srgb, var(--kodex-action-primary) 10%, var(--kodex-bg-muted)));
}

.kodex-nested-ring__arc {
  fill: none;
  stroke-linecap: butt;
}

.kodex-nested-ring__arc--primary {
  stroke: var(--kodex-minimal-active, var(--kodex-action-primary));
}

.kodex-nested-ring__arc--success {
  stroke: var(--kodex-feedback-success);
}

.kodex-nested-ring__arc--error {
  stroke: var(--kodex-feedback-error);
}

.kodex-nested-ring__arc--warning {
  stroke: var(--kodex-feedback-warning);
}

/* Semicircle gauge */
.kodex-semicircle-gauge__track {
  fill: none;
  stroke: var(--kodex-minimal-track, color-mix(in srgb, var(--kodex-action-primary) 10%, var(--kodex-bg-muted)));
  stroke-linecap: butt;
}

.kodex-semicircle-gauge__arc {
  fill: none;
  stroke-linecap: butt;
}

.kodex-semicircle-gauge__arc--primary {
  stroke: var(--kodex-minimal-active, var(--kodex-action-primary));
}

.kodex-semicircle-gauge__arc--success {
  stroke: var(--kodex-feedback-success);
}

.kodex-semicircle-gauge__arc--warning {
  stroke: var(--kodex-feedback-warning);
}

.kodex-semicircle-gauge__arc--error {
  stroke: var(--kodex-feedback-error);
}

.kodex-semicircle-gauge__tick {
  stroke: var(--kodex-border-subtle);
  stroke-width: 1;
}

/* Segmented arc donut */
.kodex-segment-arc__track {
  fill: none;
  stroke: var(--kodex-minimal-track, color-mix(in srgb, var(--kodex-action-primary) 10%, var(--kodex-bg-muted)));
}

.kodex-segment-arc__slice {
  fill: none;
  stroke-linecap: butt;
}

/* —— MarketShareDonut (Inspiration Kit) — light default, dark via tokens —— */
.kds-insp-market-donut {
  --kds-donut-surface: var(--kodex-bg-surface, #ffffff);
  --kds-donut-border: var(--kodex-border-default, #d3d6e0);
  --kds-donut-fg: var(--kodex-text-primary, #14141a);
  --kds-donut-muted: var(--kodex-text-muted, #6e7180);
  --kds-donut-secondary: var(--kodex-text-secondary, #40424d);
  --kds-donut-hover: color-mix(in srgb, var(--kodex-action-primary, #001bff) 10%, transparent);
  background: var(--kds-donut-surface);
  border: 1px solid var(--kds-donut-border);
  border-radius: 4px;
  padding: 16px 18px;
  color: var(--kds-donut-fg);
  box-shadow: 0 1px 0 color-mix(in srgb, #14141a 4%, transparent);
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-market-donut,
html[data-theme='dark'] .kds-insp-market-donut {
  --kds-donut-surface: var(--kodex-bg-surface, #1e1e24);
  --kds-donut-border: #2a2a32;
  --kds-donut-fg: #e8e9ed;
  --kds-donut-muted: #9da2b3;
  --kds-donut-secondary: #c5c8d4;
  --kds-donut-hover: color-mix(in srgb, #001bff 18%, transparent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.kds-insp-market-donut__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.kds-insp-card-dark__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--kds-donut-fg, #14141a);
}
.kds-insp-card-dark__menu {
  border: 0;
  background: transparent;
  color: var(--kds-donut-muted, #6e7180);
  font-size: 18px;
  line-height: 1;
  cursor: default;
  padding: 0 4px;
}
.kds-insp-market-donut__body {
  display: grid;
  grid-template-columns: minmax(200px, 1.2fr) minmax(140px, 0.8fr);
  gap: 16px 20px;
  align-items: center;
  margin-top: 14px;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
@media (max-width: 720px) {
  .kds-insp-market-donut__body {
    grid-template-columns: 1fr;
  }
}
.kds-insp-market-donut__chart {
  position: relative;
  width: 200px;
  max-width: 200px;
  min-width: 200px;
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  flex: 0 0 200px;
  --kds-insp-donut-hole: 46%;
  container-type: inline-size;
  box-sizing: border-box;
}
.kds-insp-market-donut__chart svg {
  display: block !important;
  width: 200px !important;
  height: 200px !important;
  min-width: 200px !important;
  min-height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hero MarketShare: keep chart + legend side-by-side when minimal */
html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero__chart .kds-insp-market-donut--minimal .kds-insp-market-donut__body {
  grid-template-columns: minmax(0, 1.1fr) minmax(120px, 0.9fr) !important;
  justify-items: stretch !important;
  gap: 14px !important;
}

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

/* Leads / Projects / Tickets — locked circular MarketShareDonut (SVG, never
   stretched/pixelated Chart.js). Chart column is always 1:1 and not clipped. */
html body.app.admin.dashboard #widget-leads_chart .kpf-kodex-chart-host,
html body.app.admin.dashboard #widget-projects_chart .kpf-kodex-chart-host,
html body.app.admin.dashboard #widget-tickets_chart .kpf-kodex-chart-host {
  min-height: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

html body.app.admin.dashboard #widget-leads_chart .kds-insp-market-donut,
html body.app.admin.dashboard #widget-projects_chart .kds-insp-market-donut,
html body.app.admin.dashboard #widget-tickets_chart .kds-insp-market-donut {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 4px 0 0 !important;
  height: auto !important;
}

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

html body.app.admin.dashboard #widget-leads_chart .kds-insp-market-donut__chart,
html body.app.admin.dashboard #widget-projects_chart .kds-insp-market-donut__chart,
html body.app.admin.dashboard #widget-tickets_chart .kds-insp-market-donut__chart {
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  min-height: 200px !important;
  height: 200px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  flex: 0 0 200px !important;
  overflow: visible !important;
}

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

@media (max-width: 720px) {
  html body.app.admin.dashboard #widget-leads_chart .kds-insp-market-donut__body,
  html body.app.admin.dashboard #widget-projects_chart .kds-insp-market-donut__body,
  html body.app.admin.dashboard #widget-tickets_chart .kds-insp-market-donut__body {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
}
.kpf-kodex-chart-host {
  min-height: 220px;
  width: 100%;
}
#widget-saas_top_stats .relative {
  height: auto !important;
  min-height: 0 !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero__chart > .relative {
  height: 100% !important;
  min-height: 360px !important;
}
.kds-insp-market-donut__slice-label {
  fill: #fff;
  font-family: Satoshi, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.kds-insp-market-donut__slice-label--dark { fill: #14141a; }
.kds-insp-market-donut__slice--dim { opacity: 0.35; }
.kds-insp-market-donut__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--kds-insp-donut-hole);
  max-width: var(--kds-insp-donut-hole);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding: 4px;
  box-sizing: border-box;
  overflow: hidden;
}
.kds-insp-market-donut__center-value {
  font-size: clamp(14px, 8.5cqi, 20px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.kds-insp-market-donut__center-label {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--kds-donut-muted, #6e7180);
}
.kds-insp-market-donut__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.kds-insp-market-donut__legend-btn {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 4px 6px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.kds-insp-market-donut__legend-btn:hover,
.kds-insp-market-donut__legend-btn--on {
  background: var(--kds-donut-hover, color-mix(in srgb, #001bff 12%, transparent));
}
.kds-insp-market-donut__legend-btn--dim { opacity: 0.35; }
.kds-insp-market-donut__swatch {
  width: 10px;
  height: 10px;
  border-radius: 4px;
  flex-shrink: 0;
}
.kds-insp-market-donut__legend-label {
  color: var(--kds-donut-secondary, #40424d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kds-insp-market-donut__legend-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--kds-donut-fg, #14141a);
}
.kds-insp-hint {
  margin: 12px 0 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kds-donut-muted, #9da2b3);
}

/* Hero chart cell: one surface only (host is transparent) */
html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero__chart .kpf-kodex-chart-host {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 320px !important;
}
/* Status share (leads / projects) — ProductivityOverview rings */
html body.app.admin .kds-insp-status-prod {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 18px !important;
  border-radius: 4px !important;
  background: var(--kds-insp-surface, #fff) !important;
  color: var(--kds-insp-fg, #14141a) !important;
  border: 1px solid var(--kds-insp-border, #d3d6e0) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  /* Content-sized — height:100% with auto parents caused layout thrash */
  height: auto !important;
  width: 100% !important;
}

html body.app.admin .kds-insp-status-prod > header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Leads/Projects/Tickets widgets already show their own title above the chart —
   drop the ring card's own header so the count total doesn't repeat. */
html body.app.admin.dashboard #widget-leads_chart .kds-insp-status-prod > header,
html body.app.admin.dashboard #widget-projects_chart .kds-insp-status-prod > header,
html body.app.admin.dashboard #widget-tickets_chart .kds-insp-status-prod > header {
  display: none !important;
}

html body.app.admin .kds-insp-status-prod > header h3 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--kds-insp-fg, #14141a) !important;
}

html body.app.admin .kds-insp-status-prod > header span {
  font-size: 12px !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-prod__rings {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-prod__ring {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  cursor: pointer !important;
  padding: 8px 4px !important;
  min-width: 0 !important;
  box-shadow: none !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-prod__ring.is-on,
html body.app.admin .kds-insp-status-prod .kds-insp-prod__ring:hover {
  background: var(--kds-insp-hover, #f5f5f5) !important;
  border-color: var(--kds-insp-border, #d3d6e0) !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-prod__ring-visual {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  display: grid !important;
  place-items: center !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-prod__ring-visual svg {
  position: absolute !important;
  inset: 0 !important;
  width: 72px !important;
  height: 72px !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-prod__ring-visual strong {
  position: relative !important;
  z-index: 1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kds-insp-fg, var(--kodex-text-primary, #14141a)) !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-prod__ring-track {
  stroke: var(--kds-insp-border, var(--kodex-border-default, #d3d6e0)) !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-prod__ring-label {
  font-size: 11px !important;
  line-height: 1.25 !important;
  color: var(--kds-insp-fg-muted, var(--kodex-text-muted, #6e7180)) !important;
  text-align: center !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-status-prod__stats {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-status-prod__stats li {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 4px !important;
  background: var(--kds-insp-surface-elevated, var(--kodex-bg-subtle, #f5f5f5)) !important;
  font-size: 12px !important;
  border: 1px solid var(--kds-insp-border, var(--kodex-border-default, #d3d6e0)) !important;
  color: var(--kds-insp-fg, var(--kodex-text-primary, #14141a)) !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-status-prod__swatch {
  width: 10px !important;
  height: 10px !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-status-prod__stats li.is-on {
  border-color: var(--kds-insp-cobalt, #001bff) !important;
  background: color-mix(in srgb, var(--kds-insp-cobalt, #001bff) 10%, var(--kds-insp-surface, #fff)) !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-status-prod__stats li.is-dim {
  opacity: 0.45 !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-status-prod__name,
html body.app.admin .kds-insp-status-prod .kds-insp-status-prod__stats li span:not(.kds-insp-status-prod__swatch) {
  color: var(--kds-insp-fg-muted, var(--kodex-text-muted, #6e7180)) !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.app.admin .kds-insp-status-prod .kds-insp-status-prod__stats li strong {
  color: var(--kds-insp-fg, var(--kodex-text-primary, #14141a)) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

html body.app.admin.dashboard #widget-leads_chart:has(.kds-insp-status-prod) .panel_s,
html body.app.admin.dashboard #widget-projects_chart:has(.kds-insp-status-prod) .panel_s {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.app.admin.dashboard #widget-leads_chart:has(.kds-insp-status-prod) .panel-body,
html body.app.admin.dashboard #widget-projects_chart:has(.kds-insp-status-prod) .panel-body {
  padding: 0 !important;
  background: transparent !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin.dashboard #widget-leads_chart .kpf-kodex-chart-host[data-kds-chart='status-prod'],
html body.app.admin.dashboard #widget-projects_chart .kpf-kodex-chart-host[data-kds-chart='status-prod'] {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin.dashboard #widget-leads_chart .relative:has(.kds-insp-status-prod),
html body.app.admin.dashboard #widget-projects_chart .relative:has(.kds-insp-status-prod) {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-status-prod,
html[data-theme='dark'] body.app.admin .kds-insp-status-prod {
  --kds-insp-surface: #1e1e24;
  --kds-insp-surface-elevated: #252530;
  --kds-insp-border: #2a2a32;
  --kds-insp-fg: #e8e9ed;
  --kds-insp-fg-muted: #9da2b3;
  --kds-insp-hover: #252530;
  background: var(--kds-insp-surface) !important;
  color: var(--kds-insp-fg) !important;
  border-color: var(--kds-insp-border) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-status-prod .kds-insp-prod__ring-track,
html[data-theme='dark'] body.app.admin .kds-insp-status-prod .kds-insp-prod__ring-track {
  stroke: var(--kds-insp-border, #40424d) !important;
}

/* Light defaults explicit for status-prod on CRM canvas */
html body.app.admin:not(.kodex-crm-admin--ui-dark) .kds-insp-status-prod {
  --kds-insp-surface: #ffffff;
  --kds-insp-surface-elevated: #f5f5f5;
  --kds-insp-border: #d3d6e0;
  --kds-insp-fg: #14141a;
  --kds-insp-fg-muted: #6e7180;
  --kds-insp-hover: #f5f5f5;
}

html body.app.admin.dashboard #widget-payments_chart .kpf-kodex-chart-host {
  background: var(--kodex-bg-surface, #ffffff) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark.dashboard #widget-payments_chart .kpf-kodex-chart-host,
html[data-theme='dark'] body.app.admin.dashboard #widget-payments_chart .kpf-kodex-chart-host {
  background: var(--kodex-bg-surface, #1e1e24) !important;
  border-color: #2a2a32 !important;
  color: #e8e9ed !important;
}

@media (max-width: 560px) {
  html body.app.admin .kds-insp-status-prod .kds-insp-prod__rings {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Dense lead pipelines (6+ statuses) — wrap rings, keep list readable */
html body.app.admin .kpf-kodex-chart-host[data-kds-dense='1'] .kds-insp-status-prod .kds-insp-prod__rings {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  gap: 10px 8px !important;
}

html body.app.admin .kpf-kodex-chart-host[data-kds-dense='1'] .kds-insp-prod__ring-visual {
  width: 56px !important;
  height: 56px !important;
}

html body.app.admin .kpf-kodex-chart-host[data-kds-dense='1'] .kds-insp-prod__ring-visual strong {
  font-size: 11px !important;
}

html body.app.admin .kpf-kodex-chart-host[data-kds-dense='1'] .kds-insp-prod__ring-label {
  font-size: 10px !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
}

/* All-zero projects/leads — still show StatusShare chrome, mute arcs */
html body.app.admin .kpf-kodex-chart-host[data-kds-empty='1'] .kds-insp-status-prod__total {
  opacity: 0.72 !important;
}

html body.app.admin.dashboard #widget-leads_chart canvas.chart:not(.kpf-chart-replaced),
html body.app.admin.dashboard #widget-projects_chart canvas.chart:not(.kpf-chart-replaced) {
  /* Fallback until StatusShare mounts — avoid huge blank Chart.js slab */
  max-height: 220px !important;
}

#widget-saas_top_stats .relative:has(#package_invoice_stats),
#widget-saas_top_stats .relative:has(.kds-insp-market-donut) {
  height: auto !important;
}

/* === kpf-status-proc.css === */
/**
 * Leads / Projects status → CashflowCard + ProcessorSelectGrid cards
 * Source: @kodex/ds CashflowCard + ProcessorSelectGrid
 */

html body.app.admin .kds-insp-status-proc {
  background: var(--kds-insp-surface, var(--kds-dash-surface, #fff)) !important;
  border: 1px solid var(--kds-insp-border, var(--kds-dash-border, #d3d6e0)) !important;
  border-radius: 4px !important;
  padding: 16px 18px !important;
  color: var(--kds-insp-fg, var(--kds-dash-ink, #14141a)) !important;
  box-shadow: var(--kds-insp-shadow, none) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-cashflow__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-card-dark__title {
  margin: 0 !important;
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-link,
html body.app.admin .kds-insp-status-proc .kds-insp-status-proc__hint {
  border: 0 !important;
  background: transparent !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
  font: inherit !important;
  font-size: 13px !important;
  cursor: default !important;
  padding: 0 !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-card-dark__hero {
  margin: 10px 0 0 !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
  color: var(--kds-insp-fg, #14141a) !important;
}

html body.app.admin .kds-insp-status-proc__hero-label {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
}

html body.app.admin .kds-insp-status-proc__body {
  margin-top: 16px !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__grid {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__card {
  width: 100% !important;
  text-align: left !important;
  padding: 14px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kds-insp-border, #d3d6e0) !important;
  background: var(--kds-insp-surface-elevated, #f5f5f5) !important;
  color: inherit !important;
  font: inherit !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__card.is-on {
  border-color: var(--kds-insp-cobalt, #001bff) !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__card-top {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__card strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 2px !important;
  color: var(--kds-insp-fg, #14141a) !important;
  line-height: 1.3 !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__card span {
  font-size: 12px !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__radio {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kds-insp-border, #d3d6e0) !important;
  flex-shrink: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: var(--kds-insp-on-accent, #fff) !important;
  background: transparent !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__radio.is-on {
  background: var(--kds-insp-cobalt, #001bff) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__card p {
  margin: 0 0 8px !important;
  font-size: 12px !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__segments {
  display: grid !important;
  grid-template-columns: repeat(10, 1fr) !important;
  gap: 2px !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__segments i {
  display: block !important;
  height: 6px !important;
  border-radius: 2px !important;
  background: var(--kds-insp-hover, #edeff7) !important;
}

html body.app.admin .kds-insp-status-proc .kds-insp-proc__segments i.is-on {
  background: var(--kds-proc-seg, var(--kodex-feedback-info, #5ec8ff)) !important;
}

/* Open canvas: panel chrome yields to CashflowCard */
html body.app.admin.dashboard #widget-leads_chart:has(.kds-insp-status-proc) .panel_s,
html body.app.admin.dashboard #widget-projects_chart:has(.kds-insp-status-proc) .panel_s {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.app.admin.dashboard #widget-leads_chart:has(.kds-insp-status-proc) .panel-body,
html body.app.admin.dashboard #widget-projects_chart:has(.kds-insp-status-proc) .panel-body {
  padding: 0 !important;
  background: transparent !important;
}

html body.app.admin.dashboard #widget-leads_chart .kpf-kodex-chart-host[data-kds-chart='status-proc'],
html body.app.admin.dashboard #widget-projects_chart .kpf-kodex-chart-host[data-kds-chart='status-proc'],
html body.app.admin.dashboard #widget-leads_chart .relative:has(.kds-insp-status-proc),
html body.app.admin.dashboard #widget-projects_chart .relative:has(.kds-insp-status-proc) {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-status-proc .kds-insp-proc__card {
  background: var(--kds-insp-surface-elevated, #1e1e24) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-status-proc .kds-insp-proc__segments i {
  background: #2a2a32 !important;
}

@media (max-width: 560px) {
  html body.app.admin .kds-insp-status-proc .kds-insp-proc__grid {
    grid-template-columns: 1fr !important;
  }
}

/* —— Calendar filters → ProcessorSelectGrid (card-top only) —— */
html body.app.admin #calendar_filters.kpf-proc-check-grid,
html body.app.admin #calendar_filters.kds-insp-proc {
  display: block !important;
  padding: 14px 16px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
}

html body.app.admin #calendar_filters.kpf-proc-check-grid > form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
}

html body.app.admin #calendar_filters .kpf-proc-check-grid__list.kds-insp-proc__grid {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

html body.app.admin #calendar_filters .kpf-proc-check-grid__list > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  min-width: 0 !important;
  position: relative !important;
}

html body.app.admin #calendar_filters .kds-insp-proc__card.kpf-proc-check {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  text-align: left !important;
  padding: 12px 14px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  background: var(--kodex-bg-surface, #fff) !important;
  color: inherit !important;
  font: inherit !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

html body.app.admin #calendar_filters .kds-insp-proc__card.kpf-proc-check:hover {
  border-color: color-mix(in srgb, var(--kds-insp-cobalt, #001bff) 35%, var(--kodex-border-default, #d3d6e0)) !important;
}

html body.app.admin #calendar_filters .kds-insp-proc__card.kpf-proc-check.is-on {
  border-color: var(--kds-insp-cobalt, #001bff) !important;
  background: color-mix(in srgb, var(--kds-insp-cobalt, #001bff) 5%, #fff) !important;
}

html body.app.admin #calendar_filters .kds-insp-proc__card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 !important;
  min-width: 0 !important;
}

html body.app.admin #calendar_filters .kpf-proc-check__copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body.app.admin #calendar_filters .kds-insp-proc__card-top strong {
  display: block !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  overflow-wrap: anywhere !important;
}

html body.app.admin #calendar_filters .kds-insp-proc__radio {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  flex-shrink: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

html body.app.admin #calendar_filters .kds-insp-proc__radio.is-on {
  background: var(--kds-insp-cobalt, #001bff) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

html body.app.admin #calendar_filters .kpf-proc-check__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #calendar_filters.kpf-proc-check-grid {
  background: color-mix(in srgb, #000 22%, #1e1e24) !important;
  border-bottom-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #calendar_filters .kds-insp-proc__card.kpf-proc-check {
  background: #1e1e24 !important;
  border-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #calendar_filters .kds-insp-proc__card.kpf-proc-check.is-on {
  background: color-mix(in srgb, #001bff 14%, #1e1e24) !important;
  border-color: #001bff !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #calendar_filters .kds-insp-proc__card-top strong {
  color: #f7f7f7 !important;
}

html body.app.admin #calendar_filters .kpf-proc-check-grid__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

html body.app.admin #calendar_filters .kpf-proc-check-grid__actions .btn {
  margin: 0 !important;
}
/* === kpf-inspiration-bridge.css === */
/**
 * Kodex Inspiration Kit → Perfex surfaces
 * Maps DS demos to the correct admin locations while keeping Perfex behaviour.
 *
 * | DS component              | Perfex target                                      |
 * |---------------------------|----------------------------------------------------|
 * | SubscriptionCalendar      | #calendar / .fc (+ dashboard calendar widget)      |
 * | NestedContextMenu         | .dropdown-menu, context menus                      |
 * | GenerationMetrics/Widget  | dashboard top_stats / SaaS stats / progress        |
 * | InboxPanel                | .notifications dropdown                            |
 * | PathInspector/controls    | range inputs, selectpicker chrome                  |
 * | WidgetPack / Progress     | .progress, task/project widgets                    |
 * | Finance (Cashflow/Market) | finance widgets, invoice totals                    |
 * | FolderStorage             | .top_stats_wrapper / folder cards                  |
 * | StatusHeaderBar           | .kpf-status-header (injected on dashboard)         |
 */

:root,
html[data-theme="light"],
body.app.admin {
  --kds-insp-cobalt: #001bff;
  --kds-insp-navy: #001d3a;
  --kds-insp-orange: #fa4616;
  --kds-insp-success: #0d7a4e;
  --kds-insp-radius-card: 4px;
  --kds-insp-radius-pill: 4px;
  --kds-insp-radius-soft: 4px;
  --kds-insp-radius-squircle: 4px;
  --kds-insp-surface: #ffffff;
  --kds-insp-surface-elevated: #f5f5f5;
  --kds-insp-fg: #14141a;
  --kds-insp-fg-muted: #6e7180;
  --kds-insp-fg-ghost: #9da2b3;
  --kds-insp-border: #d3d6e0;
  --kds-insp-divider: #edeff7;
  --kds-insp-hover: #f5f5f5;
  --kds-insp-shadow: 0 8px 28px rgba(20, 20, 26, 0.08);
  --kds-insp-on-accent: #ffffff;
  --kds-insp-pad: 16px;
  --kds-insp-panel: #ffffff;
  --kds-insp-chrome: #8a8d8f;
}

html[data-theme="dark"],
body.app.admin.kodex-crm-admin--ui-dark {
  --kds-insp-surface: #14141a;
  --kds-insp-surface-elevated: #1e1e24;
  --kds-insp-fg: #e8e9ed;
  --kds-insp-fg-muted: #9da2b3;
  --kds-insp-fg-ghost: #6e7180;
  --kds-insp-border: #2a2a32;
  --kds-insp-divider: #2a2a32;
  --kds-insp-hover: #1e1e24;
  --kds-insp-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --kds-insp-panel: #14141a;
  --kds-insp-chrome: #9da2b3;
}

/* ========== 1) SubscriptionCalendar → FullCalendar ========== */
html body.app.admin #calendar,
html body.app.admin .fc,
html body.app.admin #widget-calendar .panel_s .panel-body,
html body.app.admin .widget[data-name*="calendar"] .panel-body {
  font-family: Satoshi, system-ui, sans-serif !important;
}

html body.app.admin .panel_s:has(#calendar),
html body.app.admin #calendar.kpf-subcal,
html body.app.admin #calendar {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(20, 20, 26, 0.03) 8px,
      rgba(20, 20, 26, 0.03) 9px
    ),
    var(--kds-insp-surface, var(--kodex-bg-surface, #ffffff)) !important;
  border: 1px solid var(--kds-insp-border) !important;
  border-radius: 4px !important;
  box-shadow: var(--kds-insp-shadow) !important;
  padding: 16px !important;
  color: var(--kds-insp-fg, var(--kodex-text-primary, #14141a)) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .panel_s:has(#calendar),
html body.app.admin.kodex-crm-admin--ui-dark #calendar.kpf-subcal,
html body.app.admin.kodex-crm-admin--ui-dark #calendar {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(255, 255, 255, 0.03) 8px,
      rgba(255, 255, 255, 0.03) 9px
    ),
    var(--kds-insp-surface, #1e1e24) !important;
}

html body.app.admin .fc .fc-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

html body.app.admin .fc .fc-toolbar-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--kds-insp-fg) !important;
  margin: 0 !important;
}

html body.app.admin .fc .fc-button-group {
  display: inline-flex !important;
  gap: 6px !important;
}

html body.app.admin .fc .fc-button-primary {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kds-insp-border) !important;
  background: transparent !important;
  color: var(--kds-insp-fg) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

html body.app.admin .fc .fc-prev-button,
html body.app.admin .fc .fc-next-button {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--kds-insp-fg-muted) !important;
}

html body.app.admin .fc .fc-today-button {
  background: transparent !important;
  border: 1px solid var(--kds-insp-border) !important;
}

html body.app.admin .fc .fc-button-primary:not(:disabled).fc-button-active,
html body.app.admin .fc .fc-button-primary:not(:disabled):active {
  background: var(--kds-insp-cobalt) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Orange add affordance — map create / new event button if present */
html body.app.admin .fc .fc-addEventButton-button,
html body.app.admin a[href*="utilities/calendar"] + .btn-primary,
html body.app.admin #calendar + .btn-info,
html body.app.admin .dt-buttons .buttons-collection {
  /* keep functional */
}

/* Calendar filters → chip row like ALL / MONTHLY / YEARLY */
html body.app.admin #calendar_filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  padding: 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Dashboard calendar: layout.css owns spacing inside the widget */
html body.app.admin.dashboard #widget-calendar #calendar_filters {
  margin-bottom: 12px !important;
}

html body.app.admin #calendar_filters .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  width: 100% !important;
}

html body.app.admin #calendar_filters .col-md-3,
html body.app.admin #calendar_filters .col-md-12 {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  display: contents !important;
}

html body.app.admin #calendar_filters .checkbox {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  position: relative !important;
  display: inline-flex !important;
}

html body.app.admin #calendar_filters .checkbox input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}

html body.app.admin #calendar_filters .checkbox label {
  min-height: 28px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  border: 1px solid var(--kds-insp-border) !important;
  background: transparent !important;
  color: var(--kds-insp-fg-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html body.app.admin #calendar_filters .checkbox label::before,
html body.app.admin #calendar_filters .checkbox label::after {
  display: none !important;
  content: none !important;
}

html body.app.admin #calendar_filters .checkbox input:checked + label {
  background: var(--kds-insp-cobalt) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Orange “add” control near calendar (filters toggle / new) */
html body.app.admin .fc .fc-toolbar .fc-button.fc-button-primary.fc-addEventButton-button,
html body.app.admin a.btn.btn-info[onclick*="new_event"],
html body.app.admin .btn-calendar-filters,
html body.app.admin button[data-toggle="tooltip"][onclick*="calendar_filters"] {
  background: var(--kds-insp-orange) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 4px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

html body.app.admin .fc .fc-daygrid-event.kpf-cal-dot-monthly {
  box-shadow: inset -8px 0 0 0 #7c3aed;
}
html body.app.admin .fc .fc-daygrid-event.kpf-cal-dot-yearly {
  box-shadow: inset -8px 0 0 0 #eab308;
}

/* Day grid cells like SubscriptionCalendar */
html body.app.admin .fc .fc-scrollgrid,
html body.app.admin .fc td,
html body.app.admin .fc th {
  border-color: transparent !important;
}

html body.app.admin .fc .fc-col-header-cell {
  padding: 0 0 6px !important;
  background: transparent !important;
}

html body.app.admin .fc .fc-col-header-cell-cushion {
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--kds-insp-fg-muted) !important;
  font-weight: 600 !important;
  padding: 4px !important;
}

html body.app.admin .fc .fc-daygrid-day-frame {
  min-height: 72px !important;
}

html body.app.admin .fc .fc-daygrid-day {
  background: transparent !important;
}

html body.app.admin .fc .fc-daygrid-day-top {
  position: relative !important;
}

html body.app.admin .fc .fc-daygrid-day-number {
  font-size: 11px !important;
  color: var(--kds-insp-fg-muted) !important;
  padding: 6px 8px !important;
  font-weight: 500 !important;
}

html body.app.admin .fc .fc-daygrid-day-events,
html body.app.admin .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
  margin: 0 4px 4px !important;
}

html body.app.admin .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame {
  background: repeating-linear-gradient(
    -45deg,
    var(--kds-insp-hover),
    var(--kds-insp-hover) 2px,
    transparent 2px,
    transparent 5px
  ) !important;
  border-radius: 4px !important;
  opacity: 0.85;
}

html body.app.admin .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
  border: 1px solid var(--kds-insp-orange) !important;
  border-radius: 4px !important;
  background: var(--kds-insp-surface-elevated) !important;
}

html body.app.admin .fc .fc-daygrid-day:not(.fc-day-other) .fc-daygrid-day-frame {
  background: var(--kds-insp-surface-elevated) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  margin: 3px !important;
}

html body.app.admin .fc .fc-event,
html body.app.admin .fc .fc-daygrid-event {
  border-radius: 4px !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  margin: 1px 0 !important;
}

html body.app.admin .fc .fc-daygrid-event-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 4px !important;
  margin: 0 4px 0 0 !important;
}

/* ========== 2) NestedContextMenu → dropdowns (full rules in kpf-ds-components.css) ========== */
html body.app.admin .dropdown-menu,
html body.app.admin .bootstrap-select .dropdown-menu,
html body.app.admin ul.dropdown-menu {
  /* base shell — DS component file owns grid items + dark */
  border-radius: 4px !important;
  font-family: Satoshi, system-ui, sans-serif !important;
}

/* ========== 3) InboxPanel → notifications ========== */
html body.app.admin #header .dropdown-menu.notifications.kds-insp-inbox,
html body.app.admin .dropdown-menu.notifications.kds-insp-inbox {
  display: none !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: min(420px, 94vw) !important;
  max-height: min(560px, 80vh) !important;
  padding: 14px !important;
  margin: 8px 0 0 !important;
  border-radius: 4px !important;
  background: var(--kds-insp-surface, #fff) !important;
  color: var(--kds-insp-fg, #14141a) !important;
  border: 1px solid var(--kds-insp-border, #d3d6e0) !important;
  box-shadow: var(--kds-insp-shadow, 0 8px 28px rgba(20, 20, 26, 0.08)) !important;
  overflow: auto !important;
  float: none !important;
  list-style: none !important;
}

html body.app.admin #header li.open > .dropdown-menu.notifications.kds-insp-inbox,
html body.app.admin #header .open > .dropdown-menu.notifications.kds-insp-inbox,
html body.app.admin .notifications-wrapper.open > .dropdown-menu.notifications.kds-insp-inbox {
  display: flex !important;
}

html body.app.admin .notifications.kds-insp-inbox > li.divider,
html body.app.admin .notifications.kds-insp-inbox > [data-kds-inbox-legacy] {
  display: none !important;
}

html body.app.admin .notifications.kds-insp-inbox > .kds-insp-inbox__chrome {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  float: none !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__toolbar {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 10px !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__search {
  flex: 1 1 160px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kds-insp-border, #d3d6e0) !important;
  background: var(--kds-insp-hover, #f5f5f5) !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__search-ico {
  font-size: 14px !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__search input {
  flex: 1 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--kds-insp-fg, #14141a) !important;
  font: inherit !important;
  font-size: 13px !important;
  outline: none !important;
  min-width: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0 !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__compose {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: var(--kds-insp-cobalt, #001bff) !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__filter {
  border: 1px solid var(--kds-insp-border, #d3d6e0) !important;
  background: transparent !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__filter--on {
  background: var(--kds-insp-cobalt, #001bff) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html body.app.admin .notifications.kds-insp-inbox > li.notification-wrapper.kds-insp-inbox__item {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  list-style: none !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) 28px !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 10px 8px !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__row:hover,
html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__row:focus {
  background: var(--kds-insp-hover, #f5f5f5) !important;
  border-color: var(--kds-insp-border, #d3d6e0) !important;
  color: inherit !important;
  outline: none !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__row--unread .kds-insp-inbox__subject {
  font-weight: 700 !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__dot {
  width: 8px !important;
  height: 8px !important;
  margin-top: 6px !important;
  border-radius: 4px !important;
  background: var(--kds-insp-cobalt, #001bff) !important;
  display: block !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__dot--off {
  background: transparent !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__top {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 13px !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__from {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  color: var(--kds-insp-fg, #14141a) !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__time {
  color: var(--kds-insp-fg-muted, #6e7180) !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
  font-weight: 400 !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__subject {
  font-size: 13px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--kds-insp-fg, #14141a) !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__star {
  color: var(--kds-insp-fg-ghost, #9da2b3) !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 4px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 4px !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__star--on,
html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__star--action:hover {
  color: var(--kds-insp-cobalt, #001bff) !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__legacy-media,
html body.app.admin .notifications.kds-insp-inbox .notification-box,
html body.app.admin .notifications.kds-insp-inbox .media-body,
html body.app.admin .notifications.kds-insp-inbox .notification-image,
html body.app.admin .notifications.kds-insp-inbox .not-mark-as-read-inline {
  display: none !important;
}

html body.app.admin .notifications.kds-insp-inbox > .kds-insp-inbox__foot,
html body.app.admin .notifications.kds-insp-inbox > .kds-insp-inbox__filter-empty {
  display: block !important;
  float: none !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__view-all {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kds-insp-border, #d3d6e0) !important;
  background: var(--kds-insp-hover, #f5f5f5) !important;
  color: var(--kodex-feedback-info, #2b6cb0) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

html body.app.admin .notifications.kds-insp-inbox .kds-insp-inbox__empty {
  margin: 0 !important;
  padding: 16px !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
  border-radius: 4px !important;
  background: var(--kds-insp-hover, #f5f5f5) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .notifications.kds-insp-inbox {
  background: var(--kds-insp-surface, #14141a) !important;
}

/* ========== 4) StatusHeaderBar (injected) ========== */
.kpf-status-header {
  width: 100%;
  margin: 0 0 16px;
}

.kpf-status-header__frame {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px 10px 16px;
  border-radius: 4px;
  background: linear-gradient(180deg, #eceef0 0%, #e2e4e6 100%);
  box-shadow: 0 8px 22px rgba(20, 20, 26, 0.08);
  overflow: hidden;
}

.kpf-status-header__accent {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 4px;
  background: var(--kds-insp-success);
}

.kpf-status-header__date-capsule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 20, 26, 0.06);
}

.kpf-status-header__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--kds-insp-cobalt);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.kpf-status-header__day {
  font-size: 12px;
  font-weight: 600;
  color: #14141a;
  line-height: 1.2;
}

.kpf-status-header__meta {
  font-size: 11px;
  color: var(--kds-insp-chrome);
}

.kpf-status-header__user {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #14141a;
}

.kpf-status-header__chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--kds-insp-success) 14%, #fff);
  color: var(--kds-insp-success);
}

/* ========== 5) Finance / metrics / widget pack on dashboard ========== */
html body.app.admin .top_stats_wrapper:not(.kds-insp-folder-storage) {
  background: var(--kds-insp-surface) !important;
  border: 1px solid var(--kds-insp-border) !important;
  border-radius: 4px !important;
  box-shadow: var(--kds-insp-shadow) !important;
  padding: 14px 16px !important;
  min-height: 88px !important;
}

html body.app.admin .top_stats_wrapper .tw-font-medium {
  font-size: 12px !important;
  color: var(--kds-insp-fg-muted) !important;
  letter-spacing: 0.02em;
}

html body.app.admin .top_stats_wrapper .tw-font-semibold {
  font-size: 20px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  color: var(--kds-insp-fg) !important;
}

/* Progress bars → WidgetPack / TaskProgress density */
html body.app.admin .progress {
  height: 8px !important;
  border-radius: 4px !important;
  background: var(--kds-insp-surface-elevated) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

html body.app.admin .progress-bar {
  background: var(--kds-insp-cobalt) !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  line-height: 8px !important;
}

html body.app.admin .progress-bar-success { background: var(--kds-insp-success) !important; }
html body.app.admin .progress-bar-warning { background: var(--kds-insp-orange) !important; }
html body.app.admin .progress-bar-danger { background: #c41e3a !important; }
html body.app.admin .progress-bar-info { background: var(--kds-insp-navy) !important; }

/* Finance-ish invoice / home summary cards */
html body.app.admin .home-summary .panel_s .panel-body,
html body.app.admin .quick-stats .panel_s .panel-body {
  padding: 14px 16px !important;
}

html body.app.admin .text-success { color: var(--kds-insp-success) !important; }
html body.app.admin .text-warning { color: var(--kds-insp-orange) !important; }
html body.app.admin .text-danger { color: #c41e3a !important; }

/* Chart cards already Kodex — reinforce finance chrome */
html body.app.admin .kodex-crm-chart-card,
html body.app.admin .widget .panel_s.kodex-crm-chart-card {
  border-radius: 4px !important;
  box-shadow: var(--kds-insp-shadow) !important;
}

/* ========== 6) Controls (range / selects) ========== */
html body.app.admin input[type="range"] {
  accent-color: var(--kds-insp-cobalt);
  height: 24px;
}

html body.app.admin .bootstrap-select > .dropdown-toggle {
  min-height: 38px !important;
  border-radius: 4px !important;
  border-color: var(--kds-insp-border) !important;
  padding: 8px 12px !important;
}

html body.app.admin .form-control {
  border-radius: 4px !important;
}

/* ========== 7) Soft folder motif reinforcement ========== */
html body.app.admin .top_stats_wrapper:not(.kds-insp-folder-storage)::before {
  opacity: 0.14 !important;
}

html body.app.admin #widget-saas_top_stats .top_stats_wrapper:not(.kds-insp-folder-storage),
html body.app.admin .widget .top_stats_wrapper:not(.kds-insp-folder-storage) {
  position: relative !important;
  overflow: hidden !important;
}

/* ========== NestedContextMenu → header / identity / quick-create ========== */
html body.app.admin .kds-insp-ctx__menu,
html body.app.admin ul.dropdown-menu.kds-insp-ctx__menu,
html body.app.admin ul.kodex-crm-admin__ctx-menu.kds-insp-ctx__menu,
html body.app.admin ul.kodex-crm-admin__identity-menu.kds-insp-ctx__menu {
  --kds-ctx-w: 280px;
  /* Hidden until Bootstrap .open / .is-open — never force-visible */
  display: none !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: var(--kds-ctx-w) !important;
  min-width: var(--kds-ctx-w) !important;
  max-width: min(320px, calc(100vw - 24px)) !important;
  max-height: min(70vh, 560px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 8px !important;
  list-style: none !important;
  border: 1px solid var(--kds-insp-border) !important;
  border-radius: 4px !important;
  background: var(--kds-insp-surface) !important;
  color: var(--kds-insp-fg) !important;
  box-shadow:
    0 4px 0 var(--kds-insp-cobalt),
    var(--kds-insp-shadow) !important;
  font-family: Satoshi, system-ui, sans-serif !important;
  z-index: 1300 !important;
}

html body.app.admin li.open > .kds-insp-ctx__menu,
html body.app.admin .open > .kds-insp-ctx__menu,
html body.app.admin .dropdown.open > .kds-insp-ctx__menu,
html body.app.admin .kds-insp-ctx__menu.is-open,
html body.app.admin ul.kodex-crm-admin__identity-menu.is-open {
  display: flex !important;
  animation: kds-insp-ctx-in 0.14s ease-out !important;
}

@keyframes kds-insp-ctx-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html body.app.admin .kds-insp-ctx__menu > li,
html body.app.admin .kds-insp-ctx__menu .kds-insp-ctx__item-wrap {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}

html body.app.admin .kds-insp-ctx__menu > li.dropdown-header,
html body.app.admin .kds-insp-ctx__menu .kds-insp-ctx__label,
html body.app.admin .kds-insp-ctx__menu > li.kds-insp-ctx__label {
  display: block !important;
  padding: 8px 10px 6px !important;
  margin: 0 0 2px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kds-insp-fg-muted) !important;
  background: transparent !important;
  border: 0 !important;
  white-space: nowrap !important;
}

html body.app.admin .kds-insp-ctx__menu > li.divider,
html body.app.admin .kds-insp-ctx__menu .kds-insp-ctx__divider {
  height: 1px !important;
  margin: 6px 4px !important;
  padding: 0 !important;
  background: var(--kds-insp-divider) !important;
  border: 0 !important;
  overflow: hidden !important;
}

html body.app.admin .kds-insp-ctx__menu > li > a,
html body.app.admin .kds-insp-ctx__menu .kds-insp-ctx__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--kds-insp-fg) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.12s ease, color 0.12s ease !important;
  box-sizing: border-box !important;
}

html body.app.admin .kds-insp-ctx__menu > li > a:hover,
html body.app.admin .kds-insp-ctx__menu > li > a:focus,
html body.app.admin .kds-insp-ctx__menu > li.active > a,
html body.app.admin .kds-insp-ctx__menu .kds-insp-ctx__item:hover,
html body.app.admin .kds-insp-ctx__menu .kds-insp-ctx__item:focus {
  background: var(--kds-insp-hover) !important;
  color: var(--kds-insp-fg) !important;
  outline: none !important;
}

html body.app.admin .kds-insp-ctx__menu > li > a > i,
html body.app.admin .kds-insp-ctx__menu > li > a > svg,
html body.app.admin .kds-insp-ctx__menu .kds-insp-ctx__item > i,
html body.app.admin .kds-insp-ctx__menu .kds-insp-ctx__item > svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--kds-insp-fg-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.app.admin .kds-insp-ctx__menu > li > a:hover > i,
html body.app.admin .kds-insp-ctx__menu > li > a:hover > svg {
  color: var(--kds-insp-cobalt) !important;
}

html body.app.admin .kds-insp-ctx__menu > li > a > span,
html body.app.admin .kds-insp-ctx__menu .kds-insp-ctx__item-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Quick Create: denser scrollable list */
html body.app.admin .kds-insp-ctx__menu--quick {
  --kds-ctx-w: 260px;
  max-height: min(72vh, 580px) !important;
}

html body.app.admin .kds-insp-ctx__menu--identity {
  --kds-ctx-w: 260px;
}

html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-ctx__menu,
html body.app.admin.kodex-crm-admin--ui-dark ul.dropdown-menu.kds-insp-ctx__menu {
  background: var(--kds-insp-surface) !important;
  border-color: var(--kds-insp-border) !important;
  color: var(--kds-insp-fg) !important;
  box-shadow:
    0 4px 0 var(--kds-insp-cobalt),
    0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-ctx__menu > li > a,
html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-ctx__menu .kds-insp-ctx__item {
  color: var(--kds-insp-fg) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-ctx__menu > li > a:hover,
html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-ctx__menu .kds-insp-ctx__item:hover {
  background: var(--kds-insp-hover) !important;
}

/* —— Header started-timers dropdown —— */
html body.app.admin #header ul#started-timers-top.kpf-timers-menu,
html body.app.admin #header ul.started-timers-top.kpf-timers-menu {
  --kds-ctx-w: 320px !important;
  width: 320px !important;
  min-width: 320px !important;
  max-width: min(340px, calc(100vw - 24px)) !important;
  padding: 10px !important;
  gap: 8px !important;
}

html body.app.admin #header .kpf-timers-menu > li.kpf-timers-menu__chrome {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 4px 6px 8px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--kds-insp-border, #edeff7) !important;
  list-style: none !important;
}

html body.app.admin #header .kpf-timers-menu__eyebrow {
  display: block !important;
  margin: 0 0 2px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin #header .kpf-timers-menu__title {
  display: block !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin #header .kpf-timers-menu__live {
  width: 8px !important;
  height: 8px !important;
  margin-top: 6px !important;
  border-radius: 999px !important;
  background: var(--kodex-border-default, #d3d6e0) !important;
  flex-shrink: 0 !important;
}

html body.app.admin #header .kpf-timers-menu__live--on {
  background: var(--kodex-feedback-success, #0d7a4e) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kodex-feedback-success, #0d7a4e) 22%, transparent) !important;
  animation: kpf-timer-pulse 1.6s ease-in-out infinite !important;
}

@keyframes kpf-timer-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

html body.app.admin #header .kpf-timers-menu > li.kpf-timer-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--kodex-bg-canvas, #f0f1f4) 55%, #fff) !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body.app.admin #header .kpf-timer-card__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html body.app.admin #header .kpf-timer-card__title-wrap {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body.app.admin #header .kpf-timer-card__task,
html body.app.admin #header .kpf-timers-menu > li.kpf-timer-card > a,
html body.app.admin #header .kpf-timers-menu .kpf-timer-card__task {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--kodex-text-primary, #14141a) !important;
  text-decoration: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body.app.admin #header .kpf-timer-card__task:hover {
  color: var(--kodex-action-primary, #001bff) !important;
  background: transparent !important;
}

html body.app.admin #header .kpf-timer-card__task--blank {
  color: var(--kodex-text-muted, #6e7180) !important;
  font-weight: 600 !important;
  font-style: italic !important;
}

html body.app.admin #header .kpf-timer-card__delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  float: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

html body.app.admin #header .kpf-timer-card__delete:hover {
  color: var(--kodex-feedback-error, #c41e3a) !important;
  background: color-mix(in srgb, var(--kodex-feedback-error, #c41e3a) 8%, #fff) !important;
  border-color: color-mix(in srgb, var(--kodex-feedback-error, #c41e3a) 22%, transparent) !important;
}

html body.app.admin #header .kpf-timer-card__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html body.app.admin #header .kpf-timer-card__started {
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: var(--kodex-text-secondary, #40424d) !important;
}

html body.app.admin #header .kpf-timer-card__logged {
  font-size: 12px !important;
  font-weight: 650 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kodex-feedback-success, #0d7a4e) !important;
}

html body.app.admin #header .kpf-timer-card__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

html body.app.admin #header .kpf-timer-card__stop,
html body.app.admin #header .kpf-timers-menu a.kpf-timer-card__stop {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid color-mix(in srgb, var(--kodex-feedback-error, #c41e3a) 28%, transparent) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--kodex-feedback-error, #c41e3a) 8%, #fff) !important;
  color: var(--kodex-feedback-error, #c41e3a) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

html body.app.admin #header .kpf-timer-card__stop:hover {
  background: color-mix(in srgb, var(--kodex-feedback-error, #c41e3a) 14%, #fff) !important;
  border-color: color-mix(in srgb, var(--kodex-feedback-error, #c41e3a) 45%, transparent) !important;
  color: var(--kodex-feedback-error, #c41e3a) !important;
}

html body.app.admin #header .kpf-timers-menu__empty {
  padding: 16px 10px !important;
  text-align: center !important;
  border: 1px dashed var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--kodex-bg-canvas, #f0f1f4) 40%, #fff) !important;
}

html body.app.admin #header .kpf-timers-menu__empty svg {
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin #header .kpf-timers-menu__empty p {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--kodex-text-secondary, #40424d) !important;
}

html body.app.admin #header .kpf-timers-menu__foot {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 2px 0 0 !important;
  padding: 8px 4px 2px !important;
  border-top: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  list-style: none !important;
}

html body.app.admin #header .kpf-timers-menu__start,
html body.app.admin #header .kpf-timers-menu button.kpf-timers-menu__start {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border: 1px solid var(--kodex-action-primary, #001bff) !important;
  border-radius: 4px !important;
  background: var(--kodex-action-primary, #001bff) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
}

html body.app.admin #header .kpf-timers-menu__start:hover {
  filter: brightness(1.05);
}

html body.app.admin #header .kpf-timers-menu__view-all-wrap {
  text-align: center !important;
  margin: 0 !important;
}

html body.app.admin #header .kpf-timers-menu__view-all,
html body.app.admin #header .kpf-timers-menu__view-all-wrap a {
  display: inline-block !important;
  padding: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  text-decoration: none !important;
  background: transparent !important;
}

html body.app.admin #header .kpf-timers-menu__view-all:hover {
  color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #header .kpf-timer-card,
html body.app.admin.kodex-crm-admin--ui-dark #header .kpf-timers-menu__empty {
  background: color-mix(in srgb, #fff 4%, #1a1c24) !important;
  border-color: #2e3140 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #header .kpf-timers-menu__title,
html body.app.admin.kodex-crm-admin--ui-dark #header .kpf-timer-card__task {
  color: #f2f3f7 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.app.admin #header .kpf-timers-menu__live--on {
    animation: none !important;
  }
}

/* —— Stop-timer system popup (#timer-select-task) —— */
html body.app.admin.system-popup,
html body.app.admin #timer-select-task.system-popup,
html body.app.admin #timer-select-task.kpf-timer-popup {
  background: color-mix(in srgb, #14141a 48%, transparent) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100000 !important;
  text-align: left !important;
}

html body.app.admin #timer-select-task .popup-wrapper,
html body.app.admin .kpf-timer-popup .popup-wrapper {
  width: min(520px, calc(100vw - 32px)) !important;
  max-width: 520px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 24px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  overflow: visible !important;
}

html body.app.admin #timer-select-task .kpf-timer-popup__card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 22px 22px 20px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  background: var(--kodex-bg-surface, #fff) !important;
  box-shadow:
    0 4px 0 var(--kodex-action-primary, #001bff),
    0 24px 64px color-mix(in srgb, #14141a 28%, transparent) !important;
  overflow: visible !important;
}

html body.app.admin #timer-select-task .kpf-timer-popup__title,
html body.app.admin #timer-select-task .popup-message {
  margin: 0 !important;
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  text-align: left !important;
}

html body.app.admin #timer-select-task .kpf-timer-popup__lead {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--kodex-text-secondary, #40424d) !important;
}

html body.app.admin #timer-select-task .kpf-timer-popup__content,
html body.app.admin #timer-select-task .popup-content {
  margin: 0 !important;
  width: 100% !important;
  overflow: visible !important;
  position: relative !important;
}

html body.app.admin #timer-select-task .kpf-timer-popup__field,
html body.app.admin #timer-select-task .form-group {
  margin: 0 0 14px !important;
  width: 100% !important;
  text-align: left !important;
}

html body.app.admin #timer-select-task .kpf-timer-popup__task-group,
html body.app.admin #timer-select-task .input-group {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html body.app.admin #timer-select-task .bootstrap-select,
html body.app.admin #timer-select-task .bootstrap-select > .dropdown-toggle,
html body.app.admin #timer-select-task select#timer_add_task_id {
  width: 100% !important;
  max-width: 100% !important;
}

html body.app.admin #timer-select-task .bootstrap-select .dropdown-menu,
html body.app.admin .kpf-timer-popup__select-menu {
  z-index: 100050 !important;
  max-height: 260px !important;
}

html body.app.admin #timer-select-task textarea#timesheet_note,
html body.app.admin #timer-select-task .kpf-timer-popup__note {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-height: 96px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  color: var(--kodex-text-primary, #14141a) !important;
  background: #fff !important;
  box-shadow: none !important;
  resize: vertical !important;
}

html body.app.admin #timer-select-task textarea#timesheet_note:focus {
  border-color: var(--kodex-action-primary, #001bff) !important;
  outline: 2px solid color-mix(in srgb, var(--kodex-action-primary, #001bff) 22%, transparent) !important;
  outline-offset: 0 !important;
}

html body.app.admin #timer-select-task .kpf-timer-popup__confirm,
html body.app.admin #timer-select-task button.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 11px 16px !important;
  border: 1px solid var(--kodex-action-primary, #001bff) !important;
  border-radius: 4px !important;
  background: var(--kodex-action-primary, #001bff) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

html body.app.admin #timer-select-task .kpf-timer-popup__confirm:hover,
html body.app.admin #timer-select-task button.btn-primary:hover {
  filter: brightness(1.05);
}

html body.app.admin #timer-select-task .system-popup-close,
html body.app.admin #timer-select-task .kpf-timer-popup__close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 36px !important;
  height: 36px !important;
  opacity: 1 !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--kodex-bg-canvas, #f0f1f4) 80%, #fff) !important;
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

html body.app.admin #timer-select-task .system-popup-close::before,
html body.app.admin #timer-select-task .system-popup-close::after {
  background: var(--kodex-text-secondary, #40424d) !important;
}

html body.app.admin #timer-select-task .system-popup-close:hover {
  border-color: var(--kodex-border-default, #d3d6e0) !important;
}

html body.app.admin #timer-select-task .input-group-addon {
  background: var(--kodex-bg-canvas, #f0f1f4) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-left: 0 !important;
  opacity: 1 !important;
}

html body.app.admin #timer-select-task .input-group-addon a {
  color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #timer-select-task .kpf-timer-popup__card {
  background: #1a1c24 !important;
  border-color: #2e3140 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #timer-select-task .kpf-timer-popup__title,
html body.app.admin.kodex-crm-admin--ui-dark #timer-select-task .popup-message {
  color: #f2f3f7 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #timer-select-task textarea#timesheet_note {
  background: #12131a !important;
  border-color: #2e3140 !important;
  color: #f2f3f7 !important;
}

@media (max-width: 640px) {
  html body.app.admin #timer-select-task .popup-wrapper {
    width: calc(100vw - 20px) !important;
  }

  html body.app.admin #timer-select-task .kpf-timer-popup__card {
    padding: 18px 16px !important;
  }

  html body.app.admin #timer-select-task .kpf-timer-popup__title,
  html body.app.admin #timer-select-task .popup-message {
    font-size: 18px !important;
    padding-right: 36px !important;
  }
}

/* === kpf-crm-admin-frame.css === */
/**
 * CrmAdminShell frame extras on Perfex:
 * mega menu, module dropdown, language, identity, dark UI, rail collapse.
 * Spec: packages/@kodex/templates/src/CrmAdminShell/CrmAdminShell.css
 */

html body.app.admin {
  --kodex-crm-admin-topbar-h: 96px;
  --kodex-crm-admin-deck-control-h: 34px;
  --kodex-crm-admin-rail-w-collapsed: 60px;
  --kodex-radius-sm: 4px;
  --kodex-radius-md: 4px;
  --kodex-radius-lg: 4px;
  --kodex-bg-surface: #ffffff;
  --kodex-bg-canvas: #f0f1f4;
  --kodex-border-default: #d3d6e0;
  --kodex-border-subtle: #edeff7;
  --kodex-text-primary: #14141a;
  --kodex-text-secondary: #40424d;
  --kodex-text-muted: #6e7180;
  --kodex-font-body: Satoshi, system-ui, sans-serif;
  --kodex-font-display: "Neue Haas Grotesk Display", Satoshi, system-ui, sans-serif;
}

/* Dark workspace canvas */
html body.app.admin.kodex-crm-admin--ui-dark {
  --kodex-crm-admin-canvas: #1e1e24;
  --kodex-bg-canvas: #1e1e24;
  --kodex-bg-surface: #14141a;
  --kodex-text-primary: #e8e9ed;
  --kodex-text-secondary: #c5c8d4;
  --kodex-text-muted: #9da2b3;
  --kodex-border-default: #2a2a32;
  --kodex-border-subtle: #2a2a32;
}

html body.app.admin.kodex-crm-admin--ui-dark #wrapper,
html body.app.admin.kodex-crm-admin--ui-dark #wrapper .content {
  background: var(--kodex-crm-admin-canvas) !important;
  color: var(--kodex-text-primary) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark .panel-body {
  background: #14141a !important;
  border-color: #2a2a32 !important;
  color: var(--kodex-text-primary) !important;
}

/* —— Deck tools rail —— */
html body.app.admin #header .kodex-crm-admin__deck-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  padding: 0 8px 0 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  order: 5;
}

html body.app.admin #header .kodex-crm-admin__deck-rail {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  height: var(--kodex-crm-admin-deck-control-h) !important;
}

/* Thin Spotify / News strip — left of clock */
html body.app.admin #header .kodex-crm-admin__deck-media {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 2px !important;
  height: 22px !important;
  padding: 2px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  border: 1px solid color-mix(in srgb, #fff 14%, transparent) !important;
  background: color-mix(in srgb, #fff 6%, transparent) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin #header .kodex-crm-admin__deck-media-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: color-mix(in srgb, #f7f7f7 78%, transparent) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.14s ease, color 0.14s ease !important;
}

html body.app.admin #header .kodex-crm-admin__deck-media-btn svg {
  width: 11px !important;
  height: 11px !important;
  flex-shrink: 0 !important;
}

html body.app.admin #header .kodex-crm-admin__deck-media-btn:hover,
html body.app.admin #header .kodex-crm-admin__deck-media-btn:focus-visible {
  background: color-mix(in srgb, #fff 10%, transparent) !important;
  color: #f7f7f7 !important;
  outline: none !important;
}

html body.app.admin #header .kodex-crm-admin__deck-media-btn--spotify:hover,
html body.app.admin #header .kodex-crm-admin__deck-media-btn--spotify:focus-visible {
  color: #1ed760 !important;
  background: color-mix(in srgb, #1ed760 14%, transparent) !important;
}

html body.app.admin #header .kodex-crm-admin__deck-media-btn--news:hover,
html body.app.admin #header .kodex-crm-admin__deck-media-btn--news:focus-visible {
  color: #9db0ff !important;
  background: color-mix(in srgb, #001bff 18%, transparent) !important;
}

@media (max-width: 1100px) {
  html body.app.admin #header .kodex-crm-admin__deck-media-btn span {
    display: none !important;
  }

  html body.app.admin #header .kodex-crm-admin__deck-media-btn {
    padding: 0 6px !important;
  }
}

/* iPad landscape + tablets: hide deck media strip (lives in identity menu) */
@media (max-width: 1180px),
  (orientation: landscape) and (max-width: 1366px) and (max-height: 1024px) {
  html body.app.admin #header .kodex-crm-admin__deck-media {
    display: none !important;
  }

  html body.app.admin .kodex-crm-admin__identity-media-item,
  html body.app.admin .kodex-crm-admin__identity-media-sep {
    display: list-item !important;
  }
}

@media (min-width: 1181px) {
  html body.app.admin .kodex-crm-admin__identity-media-item,
  html body.app.admin .kodex-crm-admin__identity-media-sep {
    display: none !important;
  }
}

@media (max-width: 900px) {
  html body.app.admin #header .kodex-crm-admin__deck-media {
    display: none !important;
  }
}

/* Spotify now-playing / connect bubble */
html body.app.admin .kodex-crm-admin__spotify-bubble {
  position: fixed !important;
  z-index: 2600 !important;
  width: 320px !important;
  max-width: calc(100vw - 16px) !important;
  border-radius: 4px !important;
  border: 1px solid color-mix(in srgb, #1ed760 28%, #d3d6e0) !important;
  background: #121212 !important;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
}

html body.app.admin .kodex-crm-admin__spotify-bubble[hidden] {
  display: none !important;
}

html body.app.admin .kodex-crm-admin__spotify-bubble.is-open {
  display: block !important;
  animation: kpf-spotify-in 0.18s ease-out !important;
}

@keyframes kpf-spotify-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html body.app.admin .kodex-crm-admin__spotify-bubble-inner {
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

html body.app.admin .kodex-crm-admin__spotify-bubble-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

html body.app.admin .kodex-crm-admin__spotify-mark {
  width: 32px !important;
  height: 32px !important;
  border-radius: 4px !important;
  background: #1ed760 !important;
  color: #121212 !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}

html body.app.admin .kodex-crm-admin__spotify-bubble-head strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 0 2px !important;
}

html body.app.admin .kodex-crm-admin__spotify-bubble-head p,
html body.app.admin .kodex-crm-admin__spotify-meta p,
html body.app.admin .kodex-crm-admin__spotify-hint {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.68) !important;
}

html body.app.admin .kodex-crm-admin__spotify-client {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

html body.app.admin .kodex-crm-admin__spotify-client input {
  height: 34px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: #1a1a1a !important;
  color: #fff !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  outline: none !important;
}

html body.app.admin .kodex-crm-admin__spotify-client input.is-invalid {
  border-color: #fa4616 !important;
}

html body.app.admin .kodex-crm-admin__spotify-client a {
  color: #1ed760 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

html body.app.admin .kodex-crm-admin__spotify-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body.app.admin .kodex-crm-admin__spotify-connect,
html body.app.admin .kodex-crm-admin__spotify-signin,
html body.app.admin .kodex-crm-admin__spotify-open,
html body.app.admin .kodex-crm-admin__spotify-disconnect {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

html body.app.admin .kodex-crm-admin__spotify-connect,
html body.app.admin .kodex-crm-admin__spotify-signin {
  background: #1ed760 !important;
  color: #121212 !important;
}

html body.app.admin .kodex-crm-admin__spotify-open {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

html body.app.admin .kodex-crm-admin__spotify-disconnect {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

html body.app.admin .kodex-crm-admin__spotify-now {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

html body.app.admin .kodex-crm-admin__spotify-art {
  width: 56px !important;
  height: 56px !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  background: #282828 !important;
  display: block !important;
}

html body.app.admin .kodex-crm-admin__spotify-art--empty {
  background:
    linear-gradient(135deg, color-mix(in srgb, #1ed760 35%, #282828), #282828) !important;
}

html body.app.admin .kodex-crm-admin__spotify-live {
  display: inline-block !important;
  margin-bottom: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #1ed760 !important;
}

html body.app.admin .kodex-crm-admin__spotify-meta strong {
  display: block !important;
  margin: 0 0 2px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.app.admin .kodex-crm-admin__spotify-bar {
  margin-top: 8px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  overflow: hidden !important;
}

html body.app.admin .kodex-crm-admin__spotify-bar > i {
  display: block !important;
  height: 100% !important;
  background: #1ed760 !important;
  border-radius: inherit !important;
}

html body.app.admin .kodex-crm-admin__deck-media-btn--spotify[aria-expanded='true'] {
  color: #1ed760 !important;
  background: color-mix(in srgb, #1ed760 14%, transparent) !important;
}

html body.app.admin .kodex-crm-admin__deck-media-btn--news[aria-expanded='true'],
html body.app.admin .kodex-crm-admin__deck-media-btn--news.is-active {
  color: #fa4616 !important;
  background: color-mix(in srgb, #fa4616 16%, transparent) !important;
}

/* News headlines bubble */
html body.app.admin .kodex-crm-admin__news-bubble {
  position: fixed !important;
  z-index: 2600 !important;
  width: 360px !important;
  max-width: calc(100vw - 16px) !important;
  max-height: min(72vh, 480px) !important;
  border-radius: 4px !important;
  border: 1px solid color-mix(in srgb, #fa4616 28%, #d3d6e0) !important;
  background: #111318 !important;
  color: #f4f5f7 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
}

html body.app.admin .kodex-crm-admin__news-bubble[hidden] {
  display: none !important;
}

html body.app.admin .kodex-crm-admin__news-bubble.is-open {
  display: block !important;
  animation: kpf-news-in 0.18s ease-out !important;
}

@keyframes kpf-news-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html body.app.admin .kodex-crm-admin__news-bubble-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px !important;
  max-height: min(72vh, 480px) !important;
  overflow: auto !important;
}

html body.app.admin .kodex-crm-admin__news-bubble-head strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 0 2px !important;
  color: #fff !important;
}

html body.app.admin .kodex-crm-admin__news-bubble-head p {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.62) !important;
}

html body.app.admin .kodex-crm-admin__news-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html body.app.admin .kodex-crm-admin__news-item a {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 10px 8px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: background 0.14s ease !important;
}

html body.app.admin .kodex-crm-admin__news-item a:hover,
html body.app.admin .kodex-crm-admin__news-item a:focus-visible {
  background: color-mix(in srgb, #fa4616 14%, transparent) !important;
  outline: none !important;
}

html body.app.admin .kodex-crm-admin__news-title {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  color: #fff !important;
}

html body.app.admin .kodex-crm-admin__news-summary {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.66) !important;
}

html body.app.admin .kodex-crm-admin__news-meta {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: color-mix(in srgb, #fa4616 72%, #fff) !important;
}

html body.app.admin .kodex-crm-admin__news-more {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  margin-top: 2px !important;
  padding: 6px 10px !important;
  border-radius: 3px !important;
  background: color-mix(in srgb, #fa4616 18%, transparent) !important;
  color: #fa4616 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html body.app.admin .kodex-crm-admin__news-more:hover,
html body.app.admin .kodex-crm-admin__news-more:focus-visible {
  background: color-mix(in srgb, #fa4616 28%, transparent) !important;
  outline: none !important;
}

/* CrmLocalClock */
html body.app.admin #header .kodex-crm-admin__clock {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  border-left: 1px solid color-mix(in srgb, var(--kodex-color-orange, #fa4616) 28%, transparent) !important;
  border-right: 1px solid color-mix(in srgb, var(--kodex-color-orange, #fa4616) 28%, transparent) !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  height: var(--kodex-crm-admin-deck-control-h) !important;
  color: var(--kodex-color-orange, #fa4616) !important;
}

html body.app.admin #header .kodex-crm-admin__clock-time {
  font-family: var(--kodex-font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kodex-color-orange, #fa4616) !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
}

html body.app.admin #header .kodex-crm-admin__clock-date {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: color-mix(in srgb, var(--kodex-color-orange, #fa4616) 78%, #fff) !important;
  text-transform: capitalize !important;
  line-height: 1 !important;
}

html body.app.admin #header .kodex-crm-admin__clock-date::before {
  content: '·' !important;
  margin-right: 8px !important;
  color: color-mix(in srgb, var(--kodex-color-orange, #fa4616) 55%, transparent) !important;
  font-weight: 700 !important;
}

@media (max-width: 900px) {
  html body.app.admin #header .kodex-crm-admin__clock {
    display: none !important;
  }
}

/* —— Native header icons → CrmTopbarTools utilities (34×34) —— */
html body.app.admin #header .tw-flex.tw-flex-1.sm\:tw-flex-initial,
html body.app.admin #header .tw-flex.tw-flex-1 {
  display: flex !important;
  align-items: center !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;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
  order: 2;
}

html body.app.admin #header .navbar-nav.navbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 0 0 4px !important;
  padding: 0 0 0 8px !important;
  height: var(--kodex-crm-admin-deck-h) !important;
  border-left: 1px solid color-mix(in srgb, #fff 12%, transparent) !important;
  order: 4;
}

html body.app.admin #header .navbar-nav.kodex-crm-admin__utilities--native,
html body.app.admin #header .kodex-crm-admin__utilities--native {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

html body.app.admin #header .navbar-nav > li {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: var(--kodex-crm-admin-deck-control-h) !important;
  position: relative !important;
}

html body.app.admin #header .navbar-nav > li > a,
html body.app.admin #header .navbar-nav > li > a.kodex-crm-admin__utility,
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 {
  position: relative !important;
  width: var(--kodex-crm-admin-deck-control-h) !important;
  min-width: var(--kodex-crm-admin-deck-control-h) !important;
  max-width: var(--kodex-crm-admin-deck-control-h) !important;
  height: var(--kodex-crm-admin-deck-control-h) !important;
  min-height: var(--kodex-crm-admin-deck-control-h) !important;
  max-height: var(--kodex-crm-admin-deck-control-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: var(--kodex-radius-sm, 4px) !important;
  background: transparent !important;
  color: color-mix(in srgb, #fff 82%, transparent) !important;
  box-shadow: none !important;
  font-size: 0 !important; /* hide stray text; icons remain */
}

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 {
  color: #fff !important;
  background: color-mix(in srgb, #000 12%, 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 .kpf-icon,
html body.app.admin #header .navbar-nav > li > a .tw-inline-flex {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  stroke: currentColor !important;
  display: block !important;
}

html body.app.admin #header .navbar-nav > li > a .tw-inline-flex {
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
}

html body.app.admin #header .navbar-nav > li > a .tw-h-8,
html body.app.admin #header .navbar-nav > li > a .tw-w-9,
html body.app.admin #header .navbar-nav > li > a .-tw-mt-1\.5 {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

/* Badges → DS utility-dot */
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,
html body.app.admin #header .navbar-nav > li a .tw-rounded-full,
html body.app.admin #header .kodex-crm-admin__utility-dot {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  left: auto !important;
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  min-height: 6px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border-radius: 50% !important;
  border: 1px solid #001bff !important;
  background: #fa4616 !important;
  color: transparent !important;
  z-index: 2 !important;
  display: block !important;
}

html body.app.admin #header .navbar-nav > li a > .icon-total-indicator.hide,
html body.app.admin #header .nav-total-todos.hide,
html body.app.admin #header .icon-started-timers.hide {
  display: none !important;
}

html body.app.admin #header .navbar-nav.navbar-right {
  margin-left: 4px !important;
}


/* —— Language selector (inverse dropdown) —— */
html body.app.admin .kodex-language-selector {
  position: relative;
  flex-shrink: 0;
  font-family: var(--kodex-font-body);
}

html body.app.admin .kodex-language-selector__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--kodex-crm-admin-deck-control-h);
  min-height: var(--kodex-crm-admin-deck-control-h);
  padding: 0 10px;
  border-radius: var(--kodex-radius-sm);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  background: color-mix(in srgb, #fff 5%, transparent);
  color: color-mix(in srgb, #fff 88%, transparent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

html body.app.admin .kodex-language-selector__trigger:hover,
html body.app.admin .kodex-language-selector__trigger[aria-expanded='true'] {
  color: #fff;
  background: color-mix(in srgb, #fff 10%, transparent);
}

html body.app.admin .kodex-language-selector__chevron {
  font-size: 9px;
  opacity: 0.7;
}

html body.app.admin .kodex-language-selector__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-width: min(280px, 92vw);
  max-height: min(360px, 70vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  border-radius: var(--kodex-radius-md);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  background: #1e1e24;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  z-index: 1300;
}

html body.app.admin .kodex-language-selector__menu[hidden] {
  display: none !important;
}

html body.app.admin .kodex-language-selector__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--kodex-radius-sm);
  color: #e8e9ed !important;
  text-decoration: none !important;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

html body.app.admin .kodex-language-selector__menu-item:hover,
html body.app.admin .kodex-language-selector__menu-item--active {
  background: color-mix(in srgb, #001bff 35%, transparent);
}

html body.app.admin .kodex-language-selector__menu-abbr {
  font-weight: 700;
  letter-spacing: 0.06em;
  min-width: 28px;
  flex-shrink: 0;
  color: color-mix(in srgb, #fff 70%, transparent);
}

html body.app.admin .kodex-language-selector__menu-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Identity menu must never show nested language submenus (breaks deck layout) */
html body.app.admin .kodex-crm-admin__identity-menu .header-languages,
html body.app.admin .kodex-crm-admin__identity-menu .dropdown-submenu,
html body.app.admin .kodex-crm-admin__identity-menu .dropdown-menu .dropdown-menu {
  display: none !important;
}

/* —— Identity bubble —— */
html body.app.admin .kodex-crm-admin__identity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: var(--kodex-crm-admin-deck-control-h, 34px) !important;
  min-height: var(--kodex-crm-admin-deck-control-h, 34px) !important;
  height: var(--kodex-crm-admin-deck-control-h, 34px) !important;
  max-width: 200px;
  padding: 3px !important;
  box-sizing: border-box !important;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent) !important;
  border-radius: var(--kodex-radius-sm) !important;
  background: color-mix(in srgb, #fff 4%, transparent) !important;
  color: #e8e9ed !important;
  cursor: pointer;
  text-align: left;
  line-height: 0 !important;
}

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

html body.app.admin .kodex-crm-admin__avatar,
html body.app.admin img.kodex-crm-admin__avatar {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  border-radius: var(--kodex-radius-sm) !important;
  background: linear-gradient(145deg, #001bff, #4d6bff) !important;
  color: #fff !important;
  display: block !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
}

html body.app.admin span.kodex-crm-admin__avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body.app.admin .kodex-crm-admin__identity-meta {
  display: none;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

@media (min-width: 1100px) {
  html body.app.admin .kodex-crm-admin__identity {
    justify-content: flex-start !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 3px 8px 3px 3px !important;
    line-height: normal !important;
  }

  html body.app.admin .kodex-crm-admin__identity-meta {
    display: flex;
  }
}

html body.app.admin .kodex-crm-admin__identity-meta strong {
  font-size: 11px;
  font-weight: 600;
  color: #e8e9ed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body.app.admin .kodex-crm-admin__identity-meta span {
  font-size: 10px;
  color: #9da2b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body.app.admin .kodex-crm-admin__identity-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1300 !important;
  /* Chrome owned by NestedContextMenu (.kds-insp-ctx__menu) */
}

html body.app.admin .kodex-crm-admin__identity-media-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body.app.admin .kodex-crm-admin__identity-media-btn:hover,
html body.app.admin .kodex-crm-admin__identity-media-btn:focus-visible {
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
  color: var(--kodex-text-primary, #14141a) !important;
  outline: none !important;
}

html body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--spotify:hover,
html body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--spotify:focus-visible {
  color: var(--kodex-text-primary, #14141a) !important;
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
}

html body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--news:hover,
html body.app.admin .kodex-crm-admin__identity-media-btn.kodex-crm-admin__deck-media-btn--news:focus-visible {
  color: var(--kodex-text-primary, #14141a) !important;
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
}

html body.app.admin .kodex-crm-admin__identity-media-btn svg {
  flex-shrink: 0 !important;
}

/* —— Dark UI utility (legacy) / rail footer owns theme in vertical —— */
html body.app.admin #menu .kodex-crm-admin__topbar-tools {
  display: none !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #menu .kodex-crm-admin__topbar-tools {
  display: none !important;
}

/* —— CrmRailNavFooter —— */
html body.app.admin .kodex-crm-admin__rail-nav-foot {
  display: none;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
  width: 100%;
}

html body.app.admin.kodex-crm-admin--nav-vertical .kodex-crm-admin__rail-nav-foot {
  display: flex !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__rail-nav-foot {
  display: none !important;
}

html body.app.admin .kodex-crm-admin__rail-nav-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--kodex-radius-md);
  background: transparent;
  color: color-mix(in srgb, #fff 78%, transparent);
  font-family: var(--kodex-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

html body.app.admin .kodex-crm-admin__rail-nav-action:hover {
  color: #fff;
  background: color-mix(in srgb, #000 14%, transparent);
  border-color: color-mix(in srgb, #fff 18%, transparent);
}

html body.app.admin .kodex-crm-admin__rail-nav-action--active {
  color: #fff;
  background: color-mix(in srgb, #000 22%, transparent);
  border-color: color-mix(in srgb, #fff 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}

html body.app.admin .kodex-crm-admin__rail-nav-action--signout:hover {
  color: #fff;
  background: color-mix(in srgb, #fa4616 28%, #000);
  border-color: color-mix(in srgb, #fa4616 45%, transparent);
}

html body.app.admin .kodex-crm-admin__rail-nav-action-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

html body.app.admin .kodex-crm-admin__rail-nav-action-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body.app.admin.kodex-crm-admin--rail-collapsed .kodex-crm-admin__rail-nav-foot {
  align-items: center;
  padding-top: 8px;
}

html body.app.admin.kodex-crm-admin--rail-collapsed .kodex-crm-admin__rail-nav-action {
  width: 42px;
  height: 42px;
  justify-content: center;
  padding: 0;
}

html body.app.admin.kodex-crm-admin--rail-collapsed .kodex-crm-admin__rail-nav-action-label {
  display: none;
}

html body.app.admin .kodex-crm-admin__utility--dark-ui {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  margin: 0 2px;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  border-radius: var(--kodex-radius-md, 4px);
  background: color-mix(in srgb, #fff 6%, transparent);
  color: color-mix(in srgb, #fff 78%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
}

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 {
  background: #fff !important;
  color: #001d3a !important;
  border-color: #fff !important;
  outline: none;
}

html body.app.admin .kodex-crm-admin__utility--dark-ui:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kodex-action-primary, #001bff) 55%, transparent);
}

/* —— Rail collapse (vertical) —— */
html body.app.admin .kodex-crm-admin__rail-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, #fff 24%, transparent);
  border-radius: var(--kodex-radius-md);
  background: color-mix(in srgb, #000 10%, transparent);
  color: color-mix(in srgb, #fff 88%, transparent);
  cursor: pointer;
}

html body.app.admin.kodex-crm-admin--nav-vertical .kodex-crm-admin__rail-toggle {
  display: inline-flex;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__rail-toggle {
  display: none !important;
}

html body.app.admin .kodex-crm-admin__rail-toggle:hover {
  color: #fff;
  background: color-mix(in srgb, #000 16%, transparent);
}

html body.app.admin.kodex-crm-admin--rail-collapsed .kodex-crm-admin__rail-toggle {
  background: #fff;
  border-color: #fff;
  color: #001bff;
}

html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #menu.sidebar {
  width: var(--kodex-crm-admin-rail-w-collapsed) !important;
  min-width: var(--kodex-crm-admin-rail-w-collapsed) !important;
  max-width: var(--kodex-crm-admin-rail-w-collapsed) !important;
  padding-left: 9px !important;
  padding-right: 9px !important;
  align-items: center;
  transition: width 0.2s ease;
}

html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #wrapper {
  margin-left: var(--kodex-crm-admin-rail-w-collapsed) !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #side-menu > li > a .menu-text,
html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #side-menu > li > a .arrow,
html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #side-menu > li > a .badge,
html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #side-menu li .nav-second-level {
  display: none !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #side-menu > li > a {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  margin: 3px 0 !important;
  justify-content: center !important;
}

/* —— Expanded vertical rail: nav items stretch to fill #side-menu height —— */
html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #menu.sidebar,
html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) aside#menu.sidebar {
  justify-content: flex-start !important;
  /* Beat Perfex mainWrapperHeightFix document-tall min-height */
  min-height: 0 !important;
  height: calc(100vh - var(--kodex-crm-admin-deck-h, 46px)) !important;
  max-height: calc(100vh - var(--kodex-crm-admin-deck-h, 46px)) !important;
  bottom: 0 !important;
  overflow: hidden !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #menu #side-menu,
html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #menu #side-menu.tw-mt-\[15px\] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  gap: 4px !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  overflow-y: auto !important;
  justify-content: stretch !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #side-menu > li {
  flex: 1 1 0 !important;
  min-height: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #side-menu > li > .nav-second-level,
html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #side-menu > li > ul.nav-second-level {
  display: none !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #side-menu > li > a,
html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #side-menu > li > a.kodex-crm-admin__module,
html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #side-menu > li > a.open-customizer {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 48px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  align-items: center !important;
  color: #001bff !important;
  background: #f7f7f7 !important;
  outline: 1px solid transparent !important;
  outline-offset: 0 !important;
}

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

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

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

html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #side-menu > li > a .menu-icon,
html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #side-menu > li > a i.menu-icon,
html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #side-menu > li > a .kpf-icon-host {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #side-menu > li > a .kpf-icon,
html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) #side-menu > li > a svg.kpf-icon {
  width: 16px !important;
  height: 16px !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical:not(.kodex-crm-admin--rail-collapsed) .kodex-crm-admin__rail-nav-action {
  height: 44px;
  font-size: 13px;
}

html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #header #logo {
  width: var(--kodex-crm-admin-rail-w-collapsed) !important;
  min-width: var(--kodex-crm-admin-rail-w-collapsed) !important;
  max-width: var(--kodex-crm-admin-rail-w-collapsed) !important;
  padding: 0 8px !important;
  justify-content: center !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #header #logo img {
  max-width: 22px !important;
  height: 22px !important;
}

/* Collapsed brand is too narrow for burger+logo — rail MENU owns mega */
html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #header > .hide-menu {
  display: none !important;
}

/* —— Horizontal module pills (match CrmAdminShell modules) —— */
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li > a.kodex-crm-admin__module,
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li > a {
  height: 64px !important;
  min-height: 64px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  border-radius: 4px !important;
  color: #001bff !important;
  background: #f7f7f7 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  outline: 1px solid transparent !important;
  outline-offset: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color 0.18s ease, background 0.18s ease, outline-color 0.18s ease;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li > a.kodex-crm-admin__module > span:not(.menu-icon):not(.badge):not(.kpf-icon-host),
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li > a > .menu-text,
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li > a {
  text-align: center !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li > a:hover,
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li > a.kodex-crm-admin__module--open,
html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu > li.menu-item--kpf-open > a {
  color: #f7f7f7 !important;
  background: #001d3a !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 1px solid #f7f7f7 !important;
  outline-offset: 0 !important;
}

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

html body.app.admin.kodex-crm-admin--nav-horizontal #side-menu li .nav-second-level {
  /* Prefer Kodex module dropdown; hide native flyout */
  display: none !important;
}

/* —— Module dropdown — app launcher —— */
@keyframes kodex-crm-module-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.kodex-crm-admin__module-dropdown {
  min-width: 300px;
  max-width: min(400px, calc(100vw - 20px));
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #001d3a 10%, var(--kodex-border-default, #d3d6e0));
  background: var(--kodex-bg-surface, #fff);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset,
    0 12px 32px color-mix(in srgb, #001d3a 14%, transparent);
  animation: kodex-crm-module-dropdown-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: auto;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif);
  z-index: 2800 !important;
  pointer-events: auto !important;
  -webkit-overflow-scrolling: touch;
}

.kodex-crm-admin__module-dropdown--portal,
.kodex-crm-admin__module-dropdown--content-aside {
  position: fixed !important;
  z-index: 2800 !important;
}

.kodex-crm-admin__module-dropdown--sheet {
  border-radius: 16px;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset,
    0 18px 40px color-mix(in srgb, #001d3a 18%, transparent);
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__module-dropdown {
  background: #17181e;
  border-color: #2a2c36;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
    0 16px 36px color-mix(in srgb, #000 50%, transparent);
}

/* App launcher shell */
.kodex-crm-admin__module-dropdown-app {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 14px;
  min-width: 0;
}

.kodex-crm-admin__module-dropdown-app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 4px;
}

.kodex-crm-admin__module-dropdown-app-kicker {
  margin: 0;
  font-family: var(--kodex-font-display, 'Neue Haas Grotesk Display', Satoshi, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--kodex-text-primary, #14141a);
  line-height: 1.2;
}

.kodex-crm-admin__module-dropdown-app-count {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #001bff;
  background: color-mix(in srgb, #001bff 10%, transparent);
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__module-dropdown-app-kicker {
  color: #f3f4f6;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__module-dropdown-app-count {
  color: #8ea2ff;
  background: color-mix(in srgb, #001bff 22%, transparent);
}

.kodex-crm-admin__module-dropdown-app-grid {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.kodex-crm-admin__module-dropdown-app-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kodex-crm-admin__module-dropdown-app-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 420px) {
  .kodex-crm-admin__module-dropdown-app-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* App tiles */
.kodex-crm-admin__module-dropdown-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 88px;
  padding: 12px 8px !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, #001d3a 8%, var(--kodex-border-default, #d3d6e0)) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--kodex-bg-canvas, #f4f5f8) 70%, #fff) !important;
  color: var(--kodex-text-primary, #14141a) !important;
  text-decoration: none !important;
  text-align: center !important;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.kodex-crm-admin__module-dropdown-tile:hover,
.kodex-crm-admin__module-dropdown-tile:focus-visible {
  background: #fff !important;
  border-color: color-mix(in srgb, #001bff 28%, var(--kodex-border-default, #d3d6e0)) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, #001bff 12%, transparent) !important;
  transform: translateY(-1px);
  outline: none !important;
  color: #001d3a !important;
}

.kodex-crm-admin__module-dropdown-tile--active {
  border-color: #001bff !important;
  background: color-mix(in srgb, #001bff 8%, #fff) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #001bff 20%, transparent) !important;
}

.kodex-crm-admin__module-dropdown-tile-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #001d3a;
  color: #f7f7f7 !important;
  flex-shrink: 0;
}

.kodex-crm-admin__module-dropdown-tile-icon i,
.kodex-crm-admin__module-dropdown-tile-icon .fa,
.kodex-crm-admin__module-dropdown-tile-icon .fas,
.kodex-crm-admin__module-dropdown-tile-icon .far,
.kodex-crm-admin__module-dropdown-tile-icon .fa-solid,
.kodex-crm-admin__module-dropdown-tile-icon .fa-regular,
.kodex-crm-admin__module-dropdown-tile-icon .kpf-icon-host {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: inherit !important;
  overflow: visible !important;
}

.kodex-crm-admin__module-dropdown-tile-icon .kpf-icon,
.kodex-crm-admin__module-dropdown-tile-icon svg,
.kodex-crm-admin__module-dropdown-tile-icon svg.kpf-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

.kodex-crm-admin__module-dropdown-tile-icon svg [fill='currentColor'] {
  fill: currentColor !important;
}

.kodex-crm-admin__module-dropdown-tile:hover .kodex-crm-admin__module-dropdown-tile-icon,
.kodex-crm-admin__module-dropdown-tile--active .kodex-crm-admin__module-dropdown-tile-icon {
  background: #001bff;
  color: #f7f7f7 !important;
}

.kodex-crm-admin__module-dropdown-tile-label {
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__module-dropdown-tile {
  background: color-mix(in srgb, #0f1014 55%, #17181e) !important;
  border-color: #2a2c36 !important;
  color: #f3f4f6 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__module-dropdown-tile:hover,
html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__module-dropdown-tile:focus-visible {
  background: #1c1e26 !important;
  border-color: color-mix(in srgb, #001bff 40%, #2a2c36) !important;
  color: #fff !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__module-dropdown-tile-icon {
  background: #001bff;
}

/* Legacy tree / list (fallback if any remain) */
.kodex-crm-admin__module-dropdown-tree {
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 8px 12px !important;
  max-height: min(70vh, 520px);
  overflow: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}

.kodex-crm-admin__module-dropdown-tree > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  min-width: 0;
}

.kodex-crm-admin__module-dropdown-tree > li > a,
.kodex-crm-admin__module-dropdown-tree .nav-second-level > li > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 84px !important;
  padding: 12px 8px !important;
  color: var(--kodex-text-primary, #14141a) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, #001d3a 8%, var(--kodex-border-default, #d3d6e0)) !important;
  background: color-mix(in srgb, var(--kodex-bg-canvas, #f4f5f8) 70%, #fff) !important;
  white-space: normal !important;
  text-align: center !important;
}

.kodex-crm-admin__module-dropdown-tree > li > a:hover,
.kodex-crm-admin__module-dropdown-tree .nav-second-level > li > a:hover {
  background: #fff !important;
  border-color: color-mix(in srgb, #001bff 28%, var(--kodex-border-default)) !important;
  color: #001d3a !important;
}

.kodex-crm-admin__module-dropdown-tree a.kodex-crm-admin__module-dropdown-heading {
  grid-column: 1 / -1;
  min-height: 0 !important;
  padding: 6px 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  cursor: default !important;
  border: none !important;
  background: transparent !important;
  align-items: flex-start !important;
}

.kodex-crm-admin__module-dropdown-tree .menu-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: #001d3a !important;
  color: #f7f7f7 !important;
  font-size: 16px !important;
  margin: 0 !important;
}

.kodex-crm-admin__module-dropdown-tree .fa.arrow,
.kodex-crm-admin__module-dropdown-tree .arrow {
  display: none !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__module-dropdown-tree > li > a,
html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__module-dropdown-tree .nav-second-level > li > a {
  color: #f3f4f6 !important;
  background: color-mix(in srgb, #0f1014 55%, #17181e) !important;
  border-color: #2a2c36 !important;
}

.kodex-crm-admin__module-dropdown--content-aside {
  width: min(380px, calc(100vw - 48px));
  max-width: min(380px, calc(100vw - 48px));
  z-index: 2800 !important;
  animation: kodex-crm-module-dropdown-rail-in 0.16s ease-out;
}

.kodex-crm-admin__module-dropdown--content-aside::before {
  content: '';
  position: absolute;
  top: 0;
  left: -16px;
  width: 16px;
  height: 100%;
}

@keyframes kodex-crm-module-dropdown-rail-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.kodex-crm-admin__module-dropdown-quick {
  display: none;
}

.kodex-crm-admin__module-dropdown-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--kodex-text-primary);
}

.kodex-crm-admin__module-dropdown-pills {
  display: none;
}

.kodex-crm-admin__module-dropdown-pill {
  display: none;
}

.kodex-crm-admin__module-dropdown-sections {
  display: none;
}

.kodex-crm-admin__module-dropdown-col-title {
  display: none;
}

.kodex-crm-admin__module-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kodex-crm-admin__module-dropdown-link {
  display: none;
}

.kodex-crm-admin__module-dropdown-link-label {
  font-size: 12px;
  font-weight: 600;
}

.kodex-crm-admin__module-dropdown-link-desc {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .kodex-crm-admin__module-dropdown,
  .kodex-crm-admin__module-dropdown-tile {
    animation: none !important;
    transition: none !important;
  }
  .kodex-crm-admin__module-dropdown-tile:hover {
    transform: none;
  }
}

/* —— Content stage + glass mega backdrop —— */
html body.app.admin #wrapper.kodex-crm-admin__content-stage {
  position: relative !important;
  z-index: 1;
}

/* Glass frosts #wrapper content only (rail + deck stay clear) */
.kodex-crm-admin__mega-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  width: auto !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  background: color-mix(in srgb, var(--kodex-bg-canvas, #f0f1f4) 42%, transparent);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  animation: kodex-crm-mega-backdrop-in 0.2s ease-out;
  pointer-events: auto !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__mega-backdrop {
  background: color-mix(in srgb, #14141a 58%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

html body.app.admin #wrapper > .kodex-crm-admin__mega-backdrop,
html body.app.admin .kodex-crm-admin__content-stage > .kodex-crm-admin__mega-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
}

/* Fallback when stage missing — still avoid covering the rail */
body > .kodex-crm-admin__mega-backdrop {
  position: fixed !important;
  top: var(--kodex-crm-admin-deck-h, 57px) !important;
  left: var(--kodex-crm-admin-rail-w, 216px) !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: unset !important;
  width: auto !important;
  height: auto !important;
  z-index: 240 !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed body > .kodex-crm-admin__mega-backdrop,
html body.app.admin.kodex-crm-admin--rail-collapsed > .kodex-crm-admin__mega-backdrop {
  left: var(--kodex-crm-admin-rail-w-collapsed, 60px) !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal > .kodex-crm-admin__mega-backdrop,
body.kodex-crm-admin--nav-horizontal > .kodex-crm-admin__mega-backdrop {
  left: 0 !important;
}

@keyframes kodex-crm-mega-backdrop-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
  }
}

html body.app.admin #header > nav {
  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;
  width: 100% !important;
}

html body.app.admin #header > .hide-menu {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  float: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Brand column = rail width; reserve space for burger + gap so logo never overlaps */
html body.app.admin #header #logo,
html body.app.admin #header #logo.tw-h-\[57px\],
html body.app.admin #header #logo.kodex-crm-admin__brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-left: 52px !important; /* 10 + 34 burger + 8 gap */
  padding-right: 12px !important;
  min-width: 0 !important;
}

html body.app.admin #header #logo a {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
}

html body.app.admin #header #logo .kodex-crm-admin__brand-logo,
html body.app.admin #header #logo img {
  display: block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  color: #f7f7f7 !important;
}

/* Expanded rail: white Kodex mark / wordmark */
html body.app.admin:not(.kodex-crm-admin--rail-collapsed) #header #logo .kodex-crm-admin__brand-logo,
html body.app.admin:not(.kodex-crm-admin--rail-collapsed) #header #logo img,
html body.app.admin #header #logo .kodex-crm-admin__brand-logo--wordmark {
  height: 22px !important;
  width: auto !important;
  max-width: 96px !important;
  max-height: 22px !important;
}

/* Collapsed rail: construction favicon only */
html body.app.admin.kodex-crm-admin--rail-collapsed #header #logo .kodex-crm-admin__brand-logo,
html body.app.admin.kodex-crm-admin--rail-collapsed #header #logo img,
html body.app.admin #header #logo .kodex-crm-admin__brand-logo--mark {
  height: 22px !important;
  width: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
}

/* CrmAdminShell brand product chip */
html body.app.admin #header .kodex-crm-admin__brand-product {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  border: 1px solid color-mix(in srgb, #001bff 45%, transparent) !important;
  color: color-mix(in srgb, #fff 88%, #001bff) !important;
  background: color-mix(in srgb, #001bff 18%, transparent) !important;
  white-space: nowrap !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #header .kodex-crm-admin__brand-product {
  display: none !important;
}

.kodex-crm-admin__mega--portal,
.kodex-crm-admin__mega--below-topbar,
html body.app.admin #setup-menu-wrapper.kodex-crm-admin__setup--portal {
  position: fixed !important;
  /* Content stage only — never cover #header deck or aside#menu rail */
  top: var(--kodex-crm-admin-deck-h, 46px) !important;
  left: var(--kodex-crm-admin-rail-w, 216px) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  z-index: 1200 !important;
  overflow: auto;
  pointer-events: auto !important;
}

html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed .kodex-crm-admin__mega--portal,
html body.app.admin.kodex-crm-admin--rail-collapsed .kodex-crm-admin__mega--portal,
html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed .kodex-crm-admin__mega--below-topbar,
html body.app.admin.kodex-crm-admin--rail-collapsed .kodex-crm-admin__mega--below-topbar,
html body.app.admin.kodex-crm-admin--nav-vertical.kodex-crm-admin--rail-collapsed #setup-menu-wrapper.kodex-crm-admin__setup--portal,
html body.app.admin.kodex-crm-admin--rail-collapsed #setup-menu-wrapper.kodex-crm-admin__setup--portal {
  left: var(--kodex-crm-admin-rail-w-collapsed, 60px) !important;
}

/* Horizontal: no rail — sit below deck + module topbar */
html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__mega--portal,
html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__mega--below-topbar,
html body.app.admin.kodex-crm-admin--nav-horizontal #setup-menu-wrapper.kodex-crm-admin__setup--portal {
  top: calc(var(--kodex-crm-admin-deck-h, 46px) + var(--kodex-crm-admin-topbar-h, 96px)) !important;
  left: 0 !important;
}

.kodex-crm-admin__mega--rail-overlay {
  position: fixed !important;
  top: var(--kodex-crm-admin-deck-h, 46px) !important;
  left: var(--kodex-crm-admin-rail-w, 216px) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  z-index: 1200 !important;
  overflow: auto !important;
  border-top: none !important;
  box-sizing: border-box;
  box-shadow: 0 18px 40px color-mix(in srgb, #000 16%, transparent);
  animation: kodex-crm-mega-content-in 0.18s ease-out;
  pointer-events: auto !important;
}

html body.app.admin.kodex-crm-admin--rail-collapsed .kodex-crm-admin__mega--rail-overlay {
  left: var(--kodex-crm-admin-rail-w-collapsed, 60px) !important;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__mega--rail-overlay {
  top: calc(var(--kodex-crm-admin-deck-h, 46px) + var(--kodex-crm-admin-topbar-h, 96px)) !important;
  left: 0 !important;
}

/* Keep deck + rail above mega 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;
}

@keyframes kodex-crm-mega-content-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

html body.app.admin #header .kodex-crm-admin__mega,
.kodex-crm-admin__mega {
  position: relative;
  z-index: 1200;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--kodex-bg-surface);
  border-top: 1px solid var(--kodex-border-default);
  box-shadow: 0 18px 40px color-mix(in srgb, #000 12%, transparent);
  animation: kodex-crm-mega-in 0.18s ease-out;
  color: var(--kodex-text-primary);
  font-family: var(--kodex-font-body);
  overflow-x: hidden;
  overflow-y: auto;
}

/* Close control lives on the rail Menu button — hide any legacy ✕ */
.kodex-crm-admin__mega-close {
  display: none !important;
}

/* Setup panel keeps an explicit close control */
.kodex-crm-admin__setup-panel .kodex-crm-admin__mega-close,
.kodex-crm-admin__setup-panel .close-customizer {
  display: inline-flex !important;
}

@keyframes kodex-crm-mega-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kodex-crm-admin__mega-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px 14px;
  border-bottom: 1px solid var(--kodex-border-subtle);
  flex-shrink: 0;
}

.kodex-crm-admin__mega-title {
  margin: 0;
  font-family: var(--kodex-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--kodex-text-primary);
}

.kodex-crm-admin__mega-lead {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--kodex-text-muted);
}

.kodex-crm-admin__mega-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--kodex-border-default);
  border-radius: var(--kodex-radius-md);
  background: var(--kodex-bg-canvas);
  color: var(--kodex-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kodex-crm-admin__mega-close:hover {
  background: #fff;
  color: #001bff;
  border-color: color-mix(in srgb, #001bff 35%, transparent);
}

.kodex-crm-admin__mega-search {
  padding: 10px 28px 8px;
  flex-shrink: 0;
}

.kodex-crm-admin__mega-search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--kodex-border-default);
  border-radius: 4px;
  background: var(--kodex-bg-canvas, #f4f5f8);
  color: var(--kodex-text-primary);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.kodex-crm-admin__mega-search-input:focus {
  border-color: #001bff;
  box-shadow: 0 0 0 2px color-mix(in srgb, #001bff 16%, transparent);
}

/* Quick access strip — singletons (Tablero, Clientes, …) */
.kodex-crm-admin__mega-quick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 28px 4px;
  flex-shrink: 0;
}

.kodex-crm-admin__mega-quick-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kodex-text-muted);
}

.kodex-crm-admin__mega-quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kodex-crm-admin__mega-quick-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--kodex-border-default);
  border-radius: var(--kodex-radius-sm);
  background: #fff;
  color: var(--kodex-text-secondary) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.kodex-crm-admin__mega-quick-pill:hover {
  color: #001d3a !important;
  border-color: color-mix(in srgb, #001bff 35%, transparent);
  background: color-mix(in srgb, #001bff 5%, #fff);
  box-shadow: 0 2px 0 #001bff;
}

/* —— Portal dense viewport layout (desktop / laptop) —— */
.kodex-crm-admin__mega--portal {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-chrome {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 18px 10px;
  border-bottom: 1px solid var(--kodex-border-subtle);
  background: color-mix(in srgb, var(--kodex-bg-canvas, #f4f5f8) 55%, #fff);
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  border-bottom: 0;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-title {
  font-size: 15px;
  line-height: 1.2;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-lead {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.3;
  max-width: 42ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-search {
  padding: 0;
  flex: 0 1 280px;
  min-width: 180px;
  max-width: 320px;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-search-input {
  height: 34px;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-quick {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-quick-label {
  flex-shrink: 0;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-quick-apps {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  grid-template-columns: none !important;
}

.kodex-crm-admin__mega-quick-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px 0 6px !important;
  border: 1px solid var(--kodex-border-default) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--kodex-text-secondary) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.kodex-crm-admin__mega-quick-chip:hover {
  color: #001d3a !important;
  border-color: color-mix(in srgb, #001bff 35%, transparent) !important;
  background: color-mix(in srgb, #001bff 5%, #fff) !important;
}

.kodex-crm-admin__mega-quick-chip-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #001d3a;
  color: #f7f7f7 !important;
  flex-shrink: 0;
}

.kodex-crm-admin__mega-quick-chip-icon i,
.kodex-crm-admin__mega-quick-chip-icon .kpf-icon-host,
.kodex-crm-admin__mega-quick-chip-icon svg {
  width: 12px !important;
  height: 12px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: inherit !important;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-foot {
  display: none;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-grid--apps {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 16px 16px;
  align-content: start;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-col--apps {
  padding: 8px;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app {
  gap: 6px;
  padding: 2px;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-head {
  padding: 0 2px 2px;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__module-dropdown-app-grid--dense,
.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-grid,
.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-grid--2,
.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-grid--3 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-tile--dense {
  min-height: 64px !important;
  padding: 8px 4px !important;
  gap: 6px !important;
  border-radius: 8px !important;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-tile--dense .kodex-crm-admin__module-dropdown-tile-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-tile--dense .kodex-crm-admin__module-dropdown-tile-icon i,
.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-tile--dense .kodex-crm-admin__module-dropdown-tile-icon .kpf-icon-host,
.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-tile--dense .kodex-crm-admin__module-dropdown-tile-icon svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}

.kodex-crm-admin__mega--portal .kodex-crm-admin__mega-tile--dense .kodex-crm-admin__module-dropdown-tile-label {
  font-size: 11px !important;
  line-height: 1.2 !important;
  -webkit-line-clamp: 2;
}

@container kodex-mega (max-width: 1100px) {
  .kodex-crm-admin__mega--portal .kodex-crm-admin__mega-grid--apps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container kodex-mega (max-width: 820px) {
  .kodex-crm-admin__mega--portal .kodex-crm-admin__mega-grid--apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kodex-crm-admin__mega--portal .kodex-crm-admin__module-dropdown-app-grid--dense,
  .kodex-crm-admin__mega--portal .kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@container kodex-mega (max-width: 560px) {
  .kodex-crm-admin__mega--portal .kodex-crm-admin__mega-head {
    flex-wrap: wrap;
  }

  .kodex-crm-admin__mega--portal .kodex-crm-admin__mega-search {
    flex: 1 1 100%;
    max-width: none;
  }

  .kodex-crm-admin__mega--portal .kodex-crm-admin__mega-lead {
    white-space: normal;
  }

  .kodex-crm-admin__mega--portal .kodex-crm-admin__mega-grid--apps {
    grid-template-columns: 1fr;
  }
}

/* Responsive app grid — sections auto-fill; ignore fixed data-cols stacks */
.kodex-crm-admin__mega--portal,
.kodex-crm-admin__setup-panel {
  container-type: inline-size;
  container-name: kodex-mega;
}

.kodex-crm-admin__mega-grid,
.kodex-crm-admin__mega-grid--apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  grid-auto-rows: auto;
  gap: 16px;
  padding: clamp(12px, 2vw, 20px) clamp(14px, 2.5vw, 28px) 24px;
  align-items: start;
  justify-items: stretch;
  flex: 1 1 auto;
  min-height: min-content;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.kodex-crm-admin__mega-grid[data-cols='1'],
.kodex-crm-admin__mega-grid[data-cols='2'],
.kodex-crm-admin__mega-grid[data-cols='3'],
.kodex-crm-admin__mega-grid[data-cols='4'] {
  --kodex-mega-cols: unset;
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* Unwrap legacy stack wrappers if any remain */
.kodex-crm-admin__mega-grid--apps > .kodex-crm-admin__mega-stack {
  display: contents;
}

.kodex-crm-admin__mega-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.kodex-crm-admin__mega-col {
  padding: 14px 14px 12px;
  border: 1px solid var(--kodex-border-subtle);
  border-radius: var(--kodex-radius-md);
  background: linear-gradient(180deg, #fafbfd 0%, #fff 48%);
  box-shadow: 0 1px 0 color-mix(in srgb, #000 3%, transparent);
  min-width: 0;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  align-self: start;
  overflow: visible !important;
  box-sizing: border-box;
}

/* App-launcher sections inside mega / setup */
.kodex-crm-admin__mega-col--apps {
  padding: 10px 10px 12px;
  background: var(--kodex-bg-surface, #fff);
  position: relative;
  z-index: 0;
}

.kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app {
  padding: 4px 4px 6px;
  gap: 10px;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-kicker {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #001bff;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif);
  font-weight: 700;
}

.kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-grid,
.kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-grid--2,
.kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-grid--3 {
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important;
  overflow: visible !important;
}

/* Tiles must not paint over neighboring sections */
.kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-tile {
  transform: none !important;
  position: relative;
  z-index: 0;
}

.kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-tile:hover,
.kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-tile:focus-visible {
  transform: none !important;
  z-index: 1;
}

.kodex-crm-admin__mega-quick-apps {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px !important;
}

.kodex-crm-admin__mega-quick-tile {
  min-height: 84px;
}

@container kodex-mega (max-width: 720px) {
  .kodex-crm-admin__mega-grid,
  .kodex-crm-admin__mega-grid--apps {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 14px;
  }

  .kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-grid,
  .kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-grid--2,
  .kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-grid--3 {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important;
  }
}

@container kodex-mega (max-width: 480px) {
  .kodex-crm-admin__mega-grid,
  .kodex-crm-admin__mega-grid--apps {
    grid-template-columns: 1fr;
  }

  .kodex-crm-admin__mega-quick-apps {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  .kodex-crm-admin__mega-grid:not(.kodex-crm-admin__mega-grid--apps) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .kodex-crm-admin__mega-head {
    padding: 14px 16px 12px;
  }

  .kodex-crm-admin__mega-quick {
    padding: 12px 16px 4px;
  }

  .kodex-crm-admin__mega-foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  .kodex-crm-admin__mega-grid,
  .kodex-crm-admin__mega-grid--apps {
    padding: 12px 14px 16px;
  }
}

@media (max-width: 640px) {
  .kodex-crm-admin__mega-grid:not(.kodex-crm-admin__mega-grid--apps) {
    grid-template-columns: 1fr !important;
  }

  .kodex-crm-admin__mega-title {
    font-size: 15px;
  }

  .kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-tile {
    min-height: 76px;
    padding: 8px 6px;
  }
}

.kodex-crm-admin__mega-col-title {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--kodex-border-subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #001bff;
}

.kodex-crm-admin__mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kodex-crm-admin__mega-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--kodex-radius-sm);
  text-decoration: none !important;
  color: inherit !important;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.kodex-crm-admin__mega-link:hover {
  background: color-mix(in srgb, #001bff 6%, transparent);
  border-color: color-mix(in srgb, #001bff 12%, transparent);
}

.kodex-crm-admin__mega-link-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--kodex-text-primary);
}

.kodex-crm-admin__mega-link-desc {
  font-size: 11px;
  color: var(--kodex-text-muted);
}

.kodex-crm-admin__mega-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 28px;
  border-top: 1px solid var(--kodex-border-subtle);
  font-size: 12px;
  color: var(--kodex-text-muted);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--kodex-bg-canvas) 55%, #fff);
}

.kodex-crm-admin__mega-foot kbd {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--kodex-border-default);
  background: var(--kodex-bg-canvas);
  font-size: 10px;
  font-family: ui-monospace, Menlo, monospace;
}

.kodex-crm-admin__mega-foot-muted {
  opacity: 0.8;
}

/* Dark mega */
html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__mega {
  background: #14141a;
  border-top-color: #2a2a32;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__mega-col {
  background: linear-gradient(180deg, #1a1a22 0%, #14141a 48%);
  border-color: #2a2a32;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__mega-col--apps {
  background: #1e1e24;
  border-color: #2a2a32;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__mega-col--apps .kodex-crm-admin__module-dropdown-app-kicker {
  color: #8ea2ff;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__mega-quick-pill {
  background: #1e1e24;
  border-color: #2a2a32;
  color: #c5c8d4 !important;
}

/* —— Lock page scroll while mega / module dropdown / setup overlay is open —— */
html.kodex-crm-admin--nav-scroll-lock,
html.kodex-crm-admin--nav-scroll-lock body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.kodex-crm-admin--nav-scroll-lock body {
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

html.kodex-crm-admin--nav-scroll-lock #wrapper {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.kodex-crm-admin--nav-scroll-lock .kodex-crm-admin__mega,
html.kodex-crm-admin--nav-scroll-lock .kodex-crm-admin__module-dropdown,
html.kodex-crm-admin--nav-scroll-lock #setup-menu-wrapper.kodex-crm-admin__setup--open {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.kodex-crm-admin__setup-lead {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kodex-text-muted, #6e7180);
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif);
}

html body.app.admin.kodex-crm-admin--ui-dark #setup-menu-wrapper {
  background: #14141a !important;
  border-bottom-color: #2a2a32 !important;
  color: #e8e9ed !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #setup-menu-wrapper .kodex-crm-admin__setup-panel {
  background: #14141a !important;
}

/* Burger / MENU open state — becomes the close control */
html body.app.admin #header > .hide-menu.kodex-crm-admin__menu-btn--open,
html body.app.admin .kodex-crm-admin__menu-btn--open,
html body.app.admin .kodex-crm-admin__menu-btn--close {
  color: #001bff !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 2px 10px color-mix(in srgb, #000 16%, transparent) !important;
}

html body.app.admin .kodex-crm-admin__menu-btn--close .kodex-crm-admin__menu-btn-label {
  letter-spacing: 0.06em;
}

/* —— Rail head (MENU + collapse) —— */
html body.app.admin .kodex-crm-admin__rail-head {
  display: none;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 8px;
}

html body.app.admin.kodex-crm-admin--nav-vertical .kodex-crm-admin__rail-head {
  display: flex !important;
}

html body.app.admin .kodex-crm-admin__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, #fff 24%, transparent);
  border-radius: var(--kodex-radius-md);
  background: color-mix(in srgb, #000 10%, transparent);
  color: color-mix(in srgb, #fff 88%, transparent);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

html body.app.admin .kodex-crm-admin__menu-btn--rail {
  display: inline-flex !important;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  width: auto;
  height: 38px;
  padding: 0 10px;
  gap: 8px;
}

html body.app.admin .kodex-crm-admin__menu-btn-label {
  flex: 1;
  min-width: 0;
  font-family: var(--kodex-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: inherit;
}

html body.app.admin.kodex-crm-admin--rail-collapsed .kodex-crm-admin__rail-head {
  flex-direction: column;
  align-items: center;
}

html body.app.admin.kodex-crm-admin--rail-collapsed .kodex-crm-admin__menu-btn-label {
  display: none;
}

html body.app.admin.kodex-crm-admin--rail-collapsed .kodex-crm-admin__menu-btn--rail {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
}

html body.app.admin.kodex-crm-admin--nav-horizontal .kodex-crm-admin__rail-head {
  display: none !important;
}

/* Horizontal: keep utilities readable on blue bar area */
html body.app.admin.kodex-crm-admin--nav-horizontal #menu.sidebar {
  gap: 8px;
}

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

/* —— Perfex chrome → NestedContextMenu (see kpf-inspiration-bridge.css) —— */
html body.app.admin #header .dropdown-menu.kds-insp-ctx__menu,
html body.app.admin #header .kodex-crm-admin__ctx-menu.kds-insp-ctx__menu,
html body.app.admin #top_search #search-history.kds-insp-ctx__menu,
html body.app.admin #search-history.dropdown-menu.kds-insp-ctx__menu {
  z-index: 1300 !important;
}

html body.app.admin .screen-options-btn,
html body.app.admin .kodex-crm-admin__screen-options-btn {
  height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #40424d !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body.app.admin .screen-options-area,
html body.app.admin .kodex-crm-admin__screen-options {
  background: var(--kodex-bg-surface, var(--kpf-surface)) !important;
  border: 1px solid var(--kodex-border-default, var(--kpf-border)) !important;
  border-radius: var(--kodex-radius-md, 4px) !important;
  box-shadow: var(--kodex-shadow-modal, 0 12px 32px color-mix(in srgb, #000 18%, transparent)) !important;
  color: var(--kodex-text-primary, var(--kpf-text-primary)) !important;
  padding: 16px 20px !important;
}

html body.app.admin .screen-options-area label,
html body.app.admin .screen-options-area .checkbox label,
html body.app.admin .screen-options-area h4,
html body.app.admin .screen-options-area .bold {
  color: var(--kodex-text-primary, var(--kpf-text-primary)) !important;
}

html body.app.admin #header .kodex-crm-admin__utilities--native > li > a.kodex-crm-admin__utility {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border-radius: 4px !important;
  color: color-mix(in srgb, #fff 78%, transparent) !important;
  background: color-mix(in srgb, #fff 6%, transparent) !important;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.app.admin #header .kodex-crm-admin__utilities--native > li.open > a.kodex-crm-admin__utility,
html body.app.admin #header .kodex-crm-admin__utilities--native > li > a.kodex-crm-admin__utility:hover {
  background: #fff !important;
  color: #001d3a !important;
  border-color: #fff !important;
}

/* Timers + notifications: same ghost utility as Settings (never FAB white tile) */
html body.app.admin #header #top-timers,
html body.app.admin #header a.top-timers,
html body.app.admin #header a.notifications-icon,
html body.app.admin #header .header-notifications > a,
html body.app.admin #header .notifications-wrapper > a,
html body.app.admin #header .navbar-nav > li.notifications-wrapper > a.kodex-crm-admin__utility,
html body.app.admin #header .navbar-nav > li.header-notifications > a.kodex-crm-admin__utility,
html body.app.admin #header .navbar-nav > li.header-timers > a.kodex-crm-admin__utility,
html body.app.admin #header #top-timers.kodex-crm-admin__fab,
html body.app.admin #header a.top-timers.kodex-crm-admin__fab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border-radius: 4px !important;
  color: color-mix(in srgb, #fff 78%, transparent) !important;
  background: color-mix(in srgb, #fff 6%, transparent) !important;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.app.admin #header #top-timers:hover,
html body.app.admin #header #top-timers:focus,
html body.app.admin #header li.open > #top-timers,
html body.app.admin #header a.top-timers:hover,
html body.app.admin #header a.notifications-icon:hover,
html body.app.admin #header a.notifications-icon:focus,
html body.app.admin #header .header-notifications.open > a,
html body.app.admin #header .notifications-wrapper.open > a,
html body.app.admin #header .navbar-nav > li.notifications-wrapper.open > a,
html body.app.admin #header .navbar-nav > li.header-notifications.open > a,
html body.app.admin #header .navbar-nav > li.header-timers.open > a {
  background: #fff !important;
  color: #001d3a !important;
  border-color: #fff !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Beat patterns `.navbar-nav > li > a i { ink-muted }` — two IDs / longer chain */
html body.app.admin #header #top-timers i,
html body.app.admin #header #top-timers svg,
html body.app.admin #header #top-timers .kpf-icon,
html body.app.admin #header a.top-timers i,
html body.app.admin #header a.top-timers svg,
html body.app.admin #header .navbar-nav > li.header-timers > a i,
html body.app.admin #header .navbar-nav > li.header-timers > a svg,
html body.app.admin #header .navbar-nav > li.header-timers > a .tw-text-neutral-500,
html body.app.admin #header .navbar-nav > li.header-timers > a .tw-text-neutral-600,
html body.app.admin #header a.notifications-icon i,
html body.app.admin #header a.notifications-icon svg,
html body.app.admin #header a.notifications-icon .kpf-icon,
html body.app.admin #header a.notifications-icon .tw-text-neutral-500,
html body.app.admin #header a.notifications-icon .tw-text-neutral-600,
html body.app.admin #header .navbar-nav > li.notifications-wrapper > a i,
html body.app.admin #header .navbar-nav > li.notifications-wrapper > a svg,
html body.app.admin #header .navbar-nav > li.notifications-wrapper > a .kpf-icon,
html body.app.admin #header .navbar-nav > li.notifications-wrapper > a .tw-text-neutral-500,
html body.app.admin #header .navbar-nav > li.notifications-wrapper > a .tw-text-neutral-600,
html body.app.admin #header .navbar-nav > li.header-notifications > a i,
html body.app.admin #header .navbar-nav > li.header-notifications > a svg,
html body.app.admin #header .navbar-nav > li.header-notifications > a .kpf-icon,
html body.app.admin #header .navbar-nav > li.header-notifications > a .tw-text-neutral-500,
html body.app.admin #header .navbar-nav > li.header-notifications > a .tw-text-neutral-600 {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* CrmTopbarTools FAB — Quick Create only (deck: white + cobalt plus) */
html body.app.admin #header .kodex-crm-admin__fab-host {
  margin: 0 4px 0 2px !important;
}

html body.app.admin #header a.kodex-crm-admin__fab,
html body.app.admin #header .navbar-nav > li > a.kodex-crm-admin__fab {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #001bff !important;
  box-shadow: 0 2px 10px color-mix(in srgb, #000 18%, transparent) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

html body.app.admin #header a.kodex-crm-admin__fab:hover,
html body.app.admin #header a.kodex-crm-admin__fab:focus,
html body.app.admin #header .navbar-nav > li.open > a.kodex-crm-admin__fab {
  background: #ffffff !important;
  color: #001bff !important;
  filter: brightness(1.04);
  box-shadow: 0 4px 14px color-mix(in srgb, #001bff 28%, transparent) !important;
}

html body.app.admin #header a.kodex-crm-admin__fab svg,
html body.app.admin #header a.kodex-crm-admin__fab .kpf-icon {
  width: 18px !important;
  height: 18px !important;
  color: inherit !important;
  stroke: currentColor !important;
  display: block !important;
}

html body.app.admin #header a.kodex-crm-admin__fab .tw-rounded-full,
html body.app.admin #header a.kodex-crm-admin__fab .tw-bg-primary-600 {
  display: none !important;
}

/* Settings gear stays a ghost utility (not FAB) */
html body.app.admin #header a.kodex-crm-admin__utility--settings svg {
  width: 16px !important;
  height: 16px !important;
}

/* Setup glass: content-stage only (rail / deck stay clear) */
html body.app.admin #wrapper > .kodex-crm-admin__mega-backdrop,
html body.app.admin .kodex-crm-admin__content-stage > .kodex-crm-admin__mega-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
}

/* —— Dark UI: broader Perfex surfaces —— */
html body.app.admin.kodex-crm-admin--ui-dark .top_stats_wrapper:not(.kds-insp-folder-storage),
html body.app.admin.kodex-crm-admin--ui-dark .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark .panel-body,
html body.app.admin.kodex-crm-admin--ui-dark .table-responsive,
html body.app.admin.kodex-crm-admin--ui-dark table.table,
html body.app.admin.kodex-crm-admin--ui-dark .dropdown-menu,
html body.app.admin.kodex-crm-admin--ui-dark .kodex-crm-admin__identity-menu,
html body.app.admin.kodex-crm-admin--ui-dark .modal-content,
html body.app.admin.kodex-crm-admin--ui-dark .btn-default {
  background: var(--kodex-bg-surface, #1e1e24) !important;
  border-color: var(--kodex-border-default, #40424d) !important;
  color: var(--kodex-text-primary) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .top_stats_wrapper .tw-font-semibold,
html body.app.admin.kodex-crm-admin--ui-dark .top_stats_wrapper .tw-text-neutral-800,
html body.app.admin.kodex-crm-admin--ui-dark table.table > thead > tr > th,
html body.app.admin.kodex-crm-admin--ui-dark table.table > tbody > tr > td,
html body.app.admin.kodex-crm-admin--ui-dark .dropdown-menu > li > a,
html body.app.admin.kodex-crm-admin--ui-dark h1,
html body.app.admin.kodex-crm-admin--ui-dark h2,
html body.app.admin.kodex-crm-admin--ui-dark h3,
html body.app.admin.kodex-crm-admin--ui-dark h4,
html body.app.admin.kodex-crm-admin--ui-dark .tw-text-neutral-800,
html body.app.admin.kodex-crm-admin--ui-dark .tw-text-neutral-700 {
  color: var(--kodex-text-primary) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .top_stats_wrapper .tw-text-neutral-600,
html body.app.admin.kodex-crm-admin--ui-dark .top_stats_wrapper .tw-text-neutral-500,
html body.app.admin.kodex-crm-admin--ui-dark .text-muted,
html body.app.admin.kodex-crm-admin--ui-dark .tw-text-neutral-500,
html body.app.admin.kodex-crm-admin--ui-dark .tw-text-neutral-600 {
  color: var(--kodex-text-muted) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .form-control,
html body.app.admin.kodex-crm-admin--ui-dark input.form-control,
html body.app.admin.kodex-crm-admin--ui-dark select.form-control,
html body.app.admin.kodex-crm-admin--ui-dark textarea.form-control {
  background: #1e1e24 !important;
  border-color: #2a2a32 !important;
  color: var(--kodex-text-primary) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .table > tbody > tr:hover > td,
html body.app.admin.kodex-crm-admin--ui-dark .table-hover > tbody > tr:hover > td {
  background: color-mix(in srgb, #001bff 10%, #1e1e24) !important;
}
/* === kpf-folder-motif.css === */
/**
 * FolderStorageCard IS the card — motif shell only, no rectangular chrome.
 * Spec: packages/@kodex/ds/src/inspiration/FolderStorageCard
 */

html body.app.admin {
  --kds-insp-folder-ratio: 1868 / 1085;
  --kds-insp-folder-inset-x: 3.5%;
  /* Tab step in motif ≈ 81.845 / 1085 — content starts in the pocket */
  --kds-insp-folder-inset-top: 8.5%;
  --kds-insp-folder-inset-bottom: 3.5%;
  --kds-insp-folder-pad: 12px;
}

/* Demo row — SaaS KPIs: responsive motif grid, text on folder
   (clients summary uses its own 6-col rules below) */
html body.app.admin #widget-saas_top_stats .kpf-folder-row:not([hidden]),
html body.app.admin .kpf-folder-row:not([hidden]):not(.kpf-clients-summary__folders) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, auto) !important;
  gap: 12px !important;
  align-items: start !important;
  align-content: start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 0 8px !important;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.app.admin #widget-saas_top_stats .kpf-folder-row > .kds-insp-folder-storage,
html body.app.admin .kpf-folder-row:not(.kpf-clients-summary__folders) > .kds-insp-folder-storage {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  float: none !important;
}

@media (max-width: 1100px) {
  html body.app.admin #widget-saas_top_stats .kpf-folder-row:not([hidden]),
  html body.app.admin .kpf-folder-row:not([hidden]):not(.kpf-clients-summary__folders) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  html body.app.admin #widget-saas_top_stats .kpf-folder-row:not([hidden]),
  html body.app.admin .kpf-folder-row:not([hidden]):not(.kpf-clients-summary__folders) {
    grid-template-columns: 1fr !important;
  }
}

html body.app.admin #widget-saas_top_stats .kpf-folder-col-empty,
html body.app.admin #widget-top_stats .kpf-folder-col-empty,
html body.app.admin .kpf-folder-col-empty {
  display: none !important;
}

/* CRM quick stats — motif folders in one row */
html body.app.admin #widget-top_stats.widget,
html body.app.admin #widget-top_stats.kpf-folder-stats-widget {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.app.admin #widget-top_stats > .row.kpf-folder-stats-host,
html body.app.admin #widget-top_stats .kpf-folder-stats-host {
  display: block !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Respond to widget width (dashboard canvas), not only viewport */
html body.app.admin #widget-top_stats,
html body.app.admin #widget-top_stats.kpf-folder-stats-widget {
  container-type: inline-size;
  container-name: top-stats;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Same cell size as SaaS hero folders — 4 columns (incl. iPad landscape); 2 on mobile */
html body.app.admin #widget-top_stats .kpf-folder-row {
  --kpf-top-stats-cols: 4;
  display: grid !important;
  grid-template-columns: repeat(var(--kpf-top-stats-cols), minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 0 12px !important;
  float: none !important;
  box-sizing: border-box !important;
}

html body.app.admin #widget-top_stats .kpf-folder-row > .kds-insp-folder-storage {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Mobile / narrow phone only — 2 columns (not tablet landscape ~800–1100px) */
@container top-stats (max-width: 640px) {
  .kpf-folder-row {
    --kpf-top-stats-cols: 2 !important;
  }
}

/* Viewport fallback */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    html body.app.admin #widget-top_stats .kpf-folder-row {
      --kpf-top-stats-cols: 2 !important;
    }
  }
}

/* Outer SaaS panel — transparent around folders (motif is the card) */
html body.app.admin #widget-saas_top_stats.widget > .panel_s,
html body.app.admin #widget-saas_top_stats .panel_s {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.app.admin #widget-saas_top_stats .panel_s::before,
html body.app.admin #widget-saas_top_stats .panel_s::after {
  content: none !important;
  display: none !important;
}

html body.app.admin #widget-saas_top_stats .panel-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 4px 12px !important;
  overflow: visible !important;
}

html body.app.admin #widget-saas_top_stats > .panel_s > .panel-body > hr {
  display: none !important;
}

/* —— FolderStorageCard root = motif only —— */
html body.app.admin .kds-insp-folder-storage,
html body.app.admin .kds-insp-folder-storage.kpf-folder-card,
html body.app.admin .top_stats_wrapper.kds-insp-folder-storage {
  position: relative !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
  gap: 0 !important;
  flex-direction: unset !important;
  perspective: 920px;
  perspective-origin: 50% 0%;
  transform-style: preserve-3d;
}

html body.app.admin .kds-insp-folder-storage::before,
html body.app.admin .kds-insp-folder-storage::after,
html body.app.admin .top_stats_wrapper.kds-insp-folder-storage::before,
html body.app.admin .top_stats_wrapper.kds-insp-folder-storage::after {
  content: none !important;
  display: none !important;
}

.kds-insp-folder-storage--primary {
  --kds-insp-folder-fill: #ffffff;
  --kds-insp-folder-fg: #14141a;
  --kds-insp-folder-muted: #8a8d8f;
  --kds-insp-folder-bar-track: #d9dadc;
  --kds-insp-folder-bar-fill: #001bff;
  --kds-insp-folder-icon-bg: color-mix(in srgb, #001bff 10%, #fff);
  --kds-insp-folder-icon-fg: #001bff;
}

.kds-insp-folder-storage--navy {
  --kds-insp-folder-fill: #001d3a;
  --kds-insp-folder-fg: #ffffff;
  --kds-insp-folder-muted: rgba(255, 255, 255, 0.62);
  --kds-insp-folder-bar-track: rgba(255, 255, 255, 0.22);
  --kds-insp-folder-bar-fill: #9db0ff;
  --kds-insp-folder-icon-bg: rgba(255, 255, 255, 0.12);
  --kds-insp-folder-icon-fg: #ffffff;
}

.kds-insp-folder-storage--blue {
  --kds-insp-folder-fill: #001bff;
  --kds-insp-folder-fg: #ffffff;
  --kds-insp-folder-muted: rgba(255, 255, 255, 0.72);
  --kds-insp-folder-bar-track: rgba(255, 255, 255, 0.28);
  --kds-insp-folder-bar-fill: #ffffff;
  --kds-insp-folder-icon-bg: rgba(255, 255, 255, 0.16);
  --kds-insp-folder-icon-fg: #ffffff;
}

html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-folder-storage--primary {
  --kds-insp-folder-fill: #1e1e24;
  --kds-insp-folder-fg: #ffffff;
  --kds-insp-folder-muted: rgba(255, 255, 255, 0.62);
  --kds-insp-folder-bar-track: rgba(255, 255, 255, 0.22);
  --kds-insp-folder-bar-fill: #9db0ff;
  --kds-insp-folder-icon-bg: rgba(255, 255, 255, 0.1);
  --kds-insp-folder-icon-fg: #ffffff;
}

/* Motif shell = the card surface */
.kds-insp-folder-storage__shell {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1868 / 1085 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--kds-insp-folder-fill);
  filter: drop-shadow(0 8px 20px rgba(20, 20, 26, 0.12));
  overflow: visible !important;
  container-type: inline-size;
  container-name: folder-shell;
  /* Hinge at the tab — idle face flat toward the viewer */
  transform-origin: 50% 7.5%;
  transform: rotateX(0deg) translate3d(0, 0, 0);
  transition:
    transform 0.38s cubic-bezier(0.22, 0.9, 0.28, 1),
    filter 0.38s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Open forwards on hover: body swings toward the camera from the tab */
html body.app.admin .kds-insp-folder-storage:hover > .kds-insp-folder-storage__shell,
html body.app.admin .kds-insp-folder-storage:focus-within > .kds-insp-folder-storage__shell,
html body.app.admin a:hover > .kds-insp-folder-storage > .kds-insp-folder-storage__shell,
html body.app.admin a:focus-visible > .kds-insp-folder-storage > .kds-insp-folder-storage__shell,
html body.app.admin .kpf-quick-stats-folder:hover .kds-insp-folder-storage__shell,
html body.app.admin .kpf-quick-stats-folder:focus-visible .kds-insp-folder-storage__shell {
  transform: rotateX(-18deg) translate3d(0, 4px, 18px);
  filter: drop-shadow(0 22px 32px rgba(20, 20, 26, 0.28));
}

@media (prefers-reduced-motion: reduce) {
  .kds-insp-folder-storage__shell {
    transition: none !important;
    transform: none !important;
  }

  html body.app.admin .kds-insp-folder-storage:hover > .kds-insp-folder-storage__shell,
  html body.app.admin .kds-insp-folder-storage:focus-within > .kds-insp-folder-storage__shell,
  html body.app.admin a:hover > .kds-insp-folder-storage > .kds-insp-folder-storage__shell,
  html body.app.admin a:focus-visible > .kds-insp-folder-storage > .kds-insp-folder-storage__shell,
  html body.app.admin .kpf-quick-stats-folder:hover .kds-insp-folder-storage__shell,
  html body.app.admin .kpf-quick-stats-folder:focus-visible .kds-insp-folder-storage__shell {
    transform: none !important;
    filter: drop-shadow(0 8px 20px rgba(20, 20, 26, 0.12));
  }
}

.kds-insp-folder-storage__motif {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.kds-insp-folder-storage__motif path {
  fill: currentColor !important;
  stroke: none !important;
}

/* Content sits ON the motif — label top-left, metrics bottom */
.kds-insp-folder-storage__header {
  position: absolute !important;
  z-index: 1 !important;
  top: calc(var(--kds-insp-folder-inset-top) + var(--kds-insp-folder-pad)) !important;
  left: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
  right: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
  bottom: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.kds-insp-folder-storage__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 4px !important;
  background: var(--kds-insp-folder-icon-bg) !important;
  color: var(--kds-insp-folder-icon-fg) !important;
  flex-shrink: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.kds-insp-folder-storage__icon svg,
.kds-insp-folder-storage__icon i {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  font-size: 14px !important;
  color: inherit !important;
  stroke: currentColor !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.kds-insp-folder-storage__count {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--kds-insp-folder-fg) !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.2 !important;
  font-family: Satoshi, system-ui, sans-serif !important;
  background: transparent !important;
  border: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.kds-insp-folder-storage__footer {
  position: absolute !important;
  z-index: 1 !important;
  top: auto !important;
  left: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
  right: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
  bottom: calc(var(--kds-insp-folder-inset-bottom) + var(--kds-insp-folder-pad)) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px 10px !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.kds-insp-folder-storage__usage {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--kds-insp-folder-muted) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  font-family: Satoshi, system-ui, sans-serif !important;
  background: transparent !important;
}

.kds-insp-folder-storage__bars {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}

.kds-insp-folder-storage__bar {
  display: block !important;
  width: 6px !important;
  /* Height set per bar via inline style / --kds-bar-h (value-proportional fill) */
  height: var(--kds-bar-h, 100%) !important;
  align-self: flex-end !important;
  border-radius: 4px !important;
  background: var(--kds-insp-folder-bar-track) !important;
  position: static !important;
  margin: 0 !important;
  border: 0 !important;
  min-height: 4px !important;
  transition: background 0.2s ease, height 0.25s ease;
}

.kds-insp-folder-storage__bar--filled {
  background: var(--kds-insp-folder-bar-fill) !important;
}

/* Narrow shells (~dashboard cards): keep label top-left, metrics bottom */
@container folder-shell (max-width: 300px) {
  .kds-insp-folder-storage__header {
    top: calc(var(--kds-insp-folder-inset-top) + 8px) !important;
    left: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
    right: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
    bottom: auto !important;
    align-items: flex-start !important;
    max-width: none !important;
  }

  .kds-insp-folder-storage__footer {
    left: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
    right: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
    bottom: calc(var(--kds-insp-folder-inset-bottom) + var(--kds-insp-folder-pad)) !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: none !important;
  }

  .kds-insp-folder-storage__icon {
    width: 28px !important;
    height: 28px !important;
  }

  .kds-insp-folder-storage__count {
    font-size: 12px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  .kds-insp-folder-storage__usage {
    font-size: 11px !important;
  }

  .kds-insp-folder-storage__bars {
    height: 22px !important;
  }
}

@container folder-shell (max-width: 160px) {
  .kds-insp-folder-storage__header {
    top: calc(var(--kds-insp-folder-inset-top) + 6px) !important;
    gap: 6px !important;
  }

  .kds-insp-folder-storage__icon {
    width: 24px !important;
    height: 24px !important;
  }

  .kds-insp-folder-storage__icon svg,
  .kds-insp-folder-storage__icon i {
    width: 14px !important;
    height: 14px !important;
    font-size: 12px !important;
  }

  .kds-insp-folder-storage__bars {
    height: 20px !important;
    gap: 3px !important;
  }

  .kds-insp-folder-storage__bar {
    width: 4px !important;
  }
}

html body.app.admin #widget-saas_top_stats .row.tw-flex {
  align-items: flex-start !important;
  background: transparent !important;
}

html body.app.admin #widget-saas_top_stats .col-lg-5 {
  max-width: 44% !important;
  background: transparent !important;
}

html body.app.admin #widget-saas_top_stats .col-lg-7 {
  max-width: 56% !important;
}

@media (max-width: 991px) {
  html body.app.admin #widget-saas_top_stats .col-lg-5,
  html body.app.admin #widget-saas_top_stats .col-lg-7 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  html body.app.admin #widget-saas_top_stats .kpf-folder-row > .kds-insp-folder-storage {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 8px) !important;
    width: auto !important;
  }
}

/* —— SaaS KPI Basic / Advanced view —— */
html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Hero: folders always equal-height 3×2 filling the donut column */
html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kpf-folder-row:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  align-content: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kpf-folder-row[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kpf-folder-row > .kds-insp-folder-storage {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  align-self: start !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kds-insp-folder-storage__shell {
  aspect-ratio: 1868 / 1085 !important;
  height: auto !important;
  width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kds-saas-kpi-advanced:not([hidden]) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: unset !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: stretch !important;
  align-content: stretch !important;
  overflow: hidden !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kds-saas-kpi-advanced[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view__tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view__tabs button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kds-insp-border, #d3d6e0) !important;
  background: transparent !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view__tabs button.is-on {
  background: var(--kds-insp-cobalt, #001bff) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-advanced {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-advanced > .kds-insp-saas-gen {
  min-height: 0 !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-advanced[hidden],
html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view .kpf-folder-row[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 18px 16px 16px !important;
  border-radius: 4px !important;
  background: var(--kds-insp-surface, #fff) !important;
  color: var(--kds-insp-fg, #14141a) !important;
  border: 1px solid var(--kds-insp-border, #d3d6e0) !important;
  box-shadow: var(--kds-insp-shadow, none) !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen .kds-insp-gen__head h3 {
  margin: 0 0 4px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kds-insp-fg, #14141a) !important;
}

html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen .kds-insp-saas-gen__kind {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
}

html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen .kds-insp-saas-gen__value,
html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen .kds-insp-card-dark__hero {
  margin: 8px 0 0 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.15 !important;
  color: var(--kds-insp-fg, #14141a) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-saas_top_stats .kds-insp-saas-gen {
  background: var(--kds-insp-surface, #14141a) !important;
}

@media (max-width: 720px) {
  html body.app.admin #widget-saas_top_stats .kds-saas-kpi-advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  html body.app.admin #widget-saas_top_stats .kds-saas-kpi-advanced {
    grid-template-columns: 1fr !important;
  }
}

/* —— Clients / Invoices status summary → compact FolderStorageCard grid —— */
html body.app.admin .kpf-clients-summary,
html body.app.admin .kpf-quick-stats-summary {
  margin-bottom: 16px !important;
  --kds-insp-folder-pad: 8px;
  --kds-insp-folder-inset-x: 3%;
  --kds-insp-folder-inset-bottom: 3%;
  /* Respond to content width (sidebar shrinks the stage), not only viewport */
  container-type: inline-size;
  container-name: kpf-summary;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin .kpf-clients-summary,
html body.app.admin .kpf-quick-stats-summary {
  display: flex !important;
  flex-direction: column !important;
}

/* Invoices/estimates: title + totals above folder KPIs (clients composition) */
html body.app.admin .kpf-quick-stats-summary > .kpf-summary-masthead {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px 24px !important;
  width: 100% !important;
  order: -1;
  margin: 0 !important;
}

html body.app.admin .kpf-quick-stats-summary > .kpf-summary-masthead > .kpf-summary-heading {
  flex: 1 1 auto !important;
  min-width: min(100%, 220px) !important;
}

html body.app.admin .kpf-quick-stats-summary .kpf-summary-masthead__totals {
  flex: 0 1 auto !important;
  align-self: center !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* Page title above folders: 40px vertical margin + larger type */
html body.app.admin .kpf-clients-summary > .tw-mb-3,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading,
html body.app.admin .kpf-quick-stats-summary > .tw-mb-3 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  order: -1;
}

html body.app.admin .kpf-quick-stats-summary > .kpf-summary-masthead .kpf-summary-heading {
  order: 0;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

html body.app.admin .kpf-clients-summary > .tw-mb-3 > h4,
html body.app.admin .kpf-clients-summary > .tw-mb-3 .tw-font-bold,
html body.app.admin .kpf-clients-summary > .tw-mb-3 .tw-text-xl,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading > h4,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading .tw-font-bold,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading .tw-text-xl {
  margin: 0 !important;
  font-family: var(--kodex-font-display, var(--kodex-font-family-sans, Satoshi, system-ui, sans-serif)) !important;
  font-size: clamp(28px, 3.2vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin .kpf-clients-summary > .tw-mb-3 > a,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading > a {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  text-decoration: none !important;
}

html body.app.admin .kpf-clients-summary > .tw-mb-3 > a:hover,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading > a:hover {
  color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin .kpf-clients-summary .kpf-folder-row.kpf-clients-summary__folders,
html body.app.admin .kpf-clients-summary .kpf-folder-row.kpf-clients-summary__folders:not([hidden]),
html body.app.admin .kpf-clients-summary > .kpf-folder-row,
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row.kpf-clients-summary__folders,
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row.kpf-quick-stats-summary__folders,
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row.kpf-clients-summary__folders:not([hidden]),
html body.app.admin .kpf-quick-stats-summary > .kpf-folder-row {
  --kpf-summary-cols: 6;
  display: grid !important;
  grid-template-columns: repeat(var(--kpf-summary-cols), minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  gap: 8px !important;
  align-items: stretch !important;
  order: 0;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Invoices/estimates: column count follows status chips (usually 5) on wide stage */
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row.kpf-quick-stats-summary__folders,
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row.kpf-clients-summary__folders {
  --kpf-summary-cols: var(--kpf-folder-cols, 5);
}

html body.app.admin .kpf-clients-summary .kpf-folder-row > .kds-insp-folder-storage,
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row > .kds-insp-folder-storage {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  grid-column: auto !important;
}

html body.app.admin .kpf-quick-stats-summary .kpf-quick-stats-folder:hover .kds-insp-folder-storage__shell,
html body.app.admin .kpf-quick-stats-summary .kpf-quick-stats-folder:focus-visible .kds-insp-folder-storage__shell {
  filter: drop-shadow(0 18px 28px rgba(0, 27, 255, 0.22)) !important;
}

html body.app.admin .kpf-quick-stats-summary .kpf-quick-stats-folder:focus-visible {
  outline: 2px solid var(--kodex-action-primary, #001bff) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* Compact shell — keeps each card small via column width */
html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__shell,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__shell {
  filter: drop-shadow(0 3px 8px rgba(20, 20, 26, 0.1)) !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__icon,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__icon svg,
html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__icon i,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__icon svg,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__icon i {
  width: 11px !important;
  height: 11px !important;
  max-width: 11px !important;
  max-height: 11px !important;
  font-size: 10px !important;
}

/* Labels must be fully readable (no ellipsis on long Spanish titles) */
html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__count,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__count {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  hyphens: auto;
  max-width: none !important;
}

/* Number is the hero on compact KPIs */
html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__usage,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__usage {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--kds-insp-folder-fg) !important;
  line-height: 1 !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__bars,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__bars {
  height: 14px !important;
  gap: 2px !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__bar,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__bar {
  width: 3px !important;
  min-height: 2px !important;
  border-radius: 2px !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__header,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__header {
  align-items: flex-start !important;
  gap: 5px !important;
  min-width: 0 !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__footer,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__footer {
  gap: 4px 6px !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

html body.app.admin .kpf-clients-summary .tw-grid[data-kpf-folders='1'],
html body.app.admin .kpf-clients-summary .kpf-folder-col-empty,
html body.app.admin .kpf-quick-stats-summary .tw-grid[data-kpf-folders='1'],
html body.app.admin .kpf-quick-stats-summary .kpf-folder-col-empty {
  display: none !important;
}

/*
 * Container queries — content stage is often ~689px with the rail open,
 * so viewport @media alone keeps a crushed 6-col row. Scale by host width.
 */
@container kpf-summary (max-width: 1100px) {
  .kpf-folder-row.kpf-clients-summary__folders,
  .kpf-folder-row.kpf-quick-stats-summary__folders,
  .kpf-folder-row {
    --kpf-summary-cols: 3 !important;
    gap: 10px !important;
  }

  .kds-insp-folder-storage__usage {
    font-size: 16px !important;
  }

  .kds-insp-folder-storage__count {
    font-size: 12px !important;
  }
}

@container kpf-summary (max-width: 640px) {
  .kpf-folder-row.kpf-clients-summary__folders,
  .kpf-folder-row.kpf-quick-stats-summary__folders,
  .kpf-folder-row {
    --kpf-summary-cols: 2 !important;
    gap: 10px !important;
  }

  .kds-insp-folder-storage__usage {
    font-size: 17px !important;
  }

  .kds-insp-folder-storage__count {
    font-size: 12px !important;
  }
}

@container kpf-summary (max-width: 420px) {
  .kpf-folder-row.kpf-clients-summary__folders,
  .kpf-folder-row.kpf-quick-stats-summary__folders,
  .kpf-folder-row {
    --kpf-summary-cols: 1 !important;
    gap: 8px !important;
  }

  .kds-insp-folder-storage__shell {
    max-width: 300px !important;
    margin-inline: auto !important;
  }
}

/* Viewport fallback when container queries are unavailable */
@supports not (container-type: inline-size) {
  @media (max-width: 1280px) {
    html body.app.admin .kpf-clients-summary .kpf-folder-row,
    html body.app.admin .kpf-quick-stats-summary .kpf-folder-row {
      --kpf-summary-cols: 3 !important;
      gap: 10px !important;
    }
  }

  @media (max-width: 900px) {
    html body.app.admin .kpf-clients-summary .kpf-folder-row,
    html body.app.admin .kpf-quick-stats-summary .kpf-folder-row {
      --kpf-summary-cols: 2 !important;
    }
  }

  @media (max-width: 520px) {
    html body.app.admin .kpf-clients-summary .kpf-folder-row,
    html body.app.admin .kpf-quick-stats-summary .kpf-folder-row {
      --kpf-summary-cols: 1 !important;
    }
  }
}
/* === kpf-dashboard-widgets.css === */
/**
 * Kodex CRM dashboard widgets — surface chrome for Perfex panels
 * Complements kpf-dashboard-layout.css (Zen + Custom)
 */

/* Shared panel body */
html body.app.admin #wrapper .widget .panel-body,
html body.app.admin #widget-finance_overview .panel-body,
html body.app.admin #widget-user_data .panel-body,
html body.app.admin #widget-calendar .panel-body,
html body.app.admin #widget-payments_chart .panel-body,
html body.app.admin #widget-contracts_expiring .panel-body,
html body.app.admin #widget-tickets_report .panel-body,
html body.app.admin #widget-todos .panel-body,
html body.app.admin #widget-leads_chart .panel-body,
html body.app.admin #widget-projects_chart .panel-body,
html body.app.admin #widget-goals .panel-body {
  background: transparent !important;
  border: 0 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
}

html body.app.admin #wrapper .widget .panel-body.padding-10 {
  padding: 16px 18px 18px !important;
}

html body.app.admin #wrapper .widget .panel-body.padding-15 {
  padding: 20px 18px 22px !important;
}

html body.app.admin #widget-finance_overview .panel-body.padding-15 {
  /* DS cardPadding sides — the overview cards and the totals strip must not
     sit flush against the widget edge */
  padding: 8px 20px 16px !important;
}

html body.app.admin #wrapper .widget .panel-body > p.tw-font-medium svg,
html body.app.admin #widget-finance_overview .text-neutral-700 svg {
  color: var(--kodex-action-primary, #001bff) !important;
  stroke: currentColor !important;
  width: 18px !important;
  height: 18px !important;
}

/* SaaS panorama */
html body.app.admin #widget-saas_top_stats .panel-body.padding-10 {
  padding: 4px 0 8px !important;
  background: transparent !important;
}

/* Grid: flush SaaS hero with folder pulse edges */
html body.app.admin.dashboard.kds-dash-grid #widget-saas_top_stats .panel-body.padding-10 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body.app.admin #widget-saas_top_stats .panel-body > p.tw-font-medium {
  padding: 4px 6px 10px !important;
  margin: 0 0 4px !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
}

/* Host is transparent — market donut owns the light/dark surface */
html body.app.admin #widget-saas_top_stats .kds-dash-hero__chart .kpf-kodex-chart-host,
html body.app.admin #widget-saas_top_stats .kds-dash-hero__chart .relative {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/*
 * Finance band — GenerationMetrics + CrmStatCard language from DS gallery
 * Compact status rows + 4px tracks; light surface / dark charcoal
 */
html body.app.admin #widget-finance_overview > .finance-summary > .panel_s,
html body.app.admin #widget-finance_overview > .panel_s {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Kill Bootstrap clearfix — ::before/::after become empty grid cells and leave a top gap */
html body.app.admin #widget-finance_overview .home-summary.row::before,
html body.app.admin #widget-finance_overview .home-summary.row::after,
html body.app.admin #widget-finance_overview .kpf-finance-summary::before,
html body.app.admin #widget-finance_overview .kpf-finance-summary::after,
html body.app.admin #widget-finance_overview .home-summary > [class*='col-'] > .row::before,
html body.app.admin #widget-finance_overview .home-summary > [class*='col-'] > .row::after {
  content: none !important;
  display: none !important;
}

html body.app.admin #widget-finance_overview .panel-body.padding-15 {
  padding: 8px 20px 16px !important; /* keep in sync with the rule above */
}

html body.app.admin #widget-finance_overview .widget-dragger {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  opacity: 0.35 !important;
  z-index: 2 !important;
}

html body.app.admin #widget-finance_overview .home-summary.tw-flex,
html body.app.admin #widget-finance_overview .home-summary.row,
html body.app.admin #widget-finance_overview .kpf-finance-summary {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  align-content: start !important;
  width: 100% !important;
  float: none !important;
  flex-wrap: nowrap !important;
}

/* Desktop stays 4-up; tighten only when the board truly narrows */
@media (max-width: 1000px) {
  html body.app.admin #widget-finance_overview .home-summary.tw-flex,
  html body.app.admin #widget-finance_overview .home-summary.row,
  html body.app.admin #widget-finance_overview .kpf-finance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  html body.app.admin #widget-finance_overview .home-summary.tw-flex,
  html body.app.admin #widget-finance_overview .home-summary.row,
  html body.app.admin #widget-finance_overview .kpf-finance-summary {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html body.app.admin #widget-finance_overview .home-summary > [class*='col-'],
  html body.app.admin #widget-finance_overview .kpf-finance-gen {
    padding: 12px !important;
  }
}

html body.app.admin #widget-finance_overview .home-summary > [class*='col-'],
html body.app.admin #widget-finance_overview #delivery_notes_widget,
html body.app.admin #widget-finance_overview #purhcase_orders_widget,
html body.app.admin #widget-finance_overview .kpf-finance-gen {
  --kds-insp-surface: var(--kodex-bg-surface, #ffffff);
  --kds-insp-fg: var(--kodex-text-primary, #14141a);
  --kds-insp-fg-muted: var(--kodex-text-muted, #6e7180);
  --kds-insp-border: var(--kodex-border-default, #d3d6e0);
  --kds-insp-hover: var(--kodex-bg-subtle, #f5f5f5);
  --kds-insp-cobalt: var(--kodex-action-primary, #001bff);
  --kds-insp-success: var(--kodex-crm-stat-positive, #0d7a4e);
  --kds-insp-orange: var(--kodex-crm-stat-pending, #fa4616);

  width: 100% !important;
  max-width: none !important;
  float: none !important;
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 14px 14px 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: var(--kds-insp-surface) !important;
  border: 1px solid var(--kds-insp-border) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 0 color-mix(in srgb, #14141a 4%, transparent) !important;
  color: var(--kds-insp-fg) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html body.app.admin #widget-finance_overview .home-summary > [class*='col-']:hover,
html body.app.admin #widget-finance_overview .kpf-finance-gen:hover {
  border-color: color-mix(in srgb, var(--kds-insp-cobalt) 32%, var(--kds-insp-border)) !important;
  box-shadow: 0 12px 32px color-mix(in srgb, #14141a 7%, transparent) !important;
  transform: translateY(-1px);
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .home-summary > [class*='col-'],
html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview #delivery_notes_widget,
html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview #purhcase_orders_widget,
html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .kpf-finance-gen,
html[data-theme='dark'] body.app.admin #widget-finance_overview .home-summary > [class*='col-'] {
  --kds-insp-surface: #1e1e24;
  --kds-insp-fg: #e8e9ed;
  --kds-insp-fg-muted: #9da2b3;
  --kds-insp-border: #2a2a32;
  --kds-insp-hover: #252530;
  box-shadow: none !important;
}

/* Title → GenerationMetrics head (all finance cards) */
html body.app.admin #widget-finance_overview .kds-insp-gen__head,
html body.app.admin #widget-finance_overview .kpf-finance-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  float: none !important;
}

html body.app.admin #widget-finance_overview .kpf-finance-head__label,
html body.app.admin #widget-finance_overview .kds-insp-gen__head > p,
html body.app.admin #widget-finance_overview .kds-insp-gen__head .text-neutral-700,
html body.app.admin #widget-finance_overview .home-summary .kpf-finance-head .text-neutral-700 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--kodex-font-display, 'Neue Haas Grotesk Display', Satoshi, system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kodex-text-primary, #14141a) !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

html body.app.admin #widget-finance_overview .kpf-finance-head__text,
html body.app.admin #widget-finance_overview .kds-insp-gen__head .tw-font-medium {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .kds-insp-gen__head,
html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .kpf-finance-head {
  border-bottom-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .kpf-finance-head__label,
html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .kds-insp-gen__head .text-neutral-700 {
  color: #e8e9ed !important;
}

html body.app.admin #widget-finance_overview .kpf-finance-head svg,
html body.app.admin #widget-finance_overview .kds-insp-gen__head svg {
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 10%, #fff) !important;
  color: var(--kodex-action-primary, #001bff) !important;
  stroke: currentColor !important;
  margin: 0 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .kpf-finance-head svg,
html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .kds-insp-gen__head svg {
  background: color-mix(in srgb, #9db0ff 16%, #1e1e24) !important;
  color: #9db0ff !important;
}

/* Nested bootstrap rows inside a finance card */
html body.app.admin #widget-finance_overview .home-summary > [class*='col-'] > .row {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  float: none !important;
}

html body.app.admin #widget-finance_overview .home-summary > [class*='col-'] > .row > [class*='col-'] {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.app.admin #widget-finance_overview .kodex-crm-stat-card__value,
html body.app.admin #widget-finance_overview .kds-insp-card-dark__hero {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  font-weight: 700 !important;
}

/* Metric rows — CrmRatio / GenerationMetrics bars */
html body.app.admin #widget-finance_overview .kpf-finance-metric,
html body.app.admin #widget-finance_overview .kds-insp-gen__row {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.app.admin #widget-finance_overview .home-summary .text-stats-wrapper,
html body.app.admin #widget-finance_overview .home-summary .col-md-12.text-stats-wrapper,
html body.app.admin #widget-finance_overview .kds-insp-gen__row-top {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin #widget-finance_overview .home-summary .text-stats-wrapper a,
html body.app.admin #widget-finance_overview .kds-insp-gen__row-top a,
html body.app.admin #widget-finance_overview .home-summary a.mbot15,
html body.app.admin #widget-finance_overview .home-summary a.inline-block {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body.app.admin #widget-finance_overview .home-summary .text-stats-wrapper .tw-font-semibold,
html body.app.admin #widget-finance_overview .home-summary .text-stats-wrapper .bold,
html body.app.admin #widget-finance_overview .kds-insp-gen__row-top strong {
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin #widget-finance_overview .home-summary .percent,
html body.app.admin #widget-finance_overview .kpf-finance-metric__pct,
html body.app.admin #widget-finance_overview .home-summary .text-stats-wrapper .text-muted {
  color: var(--kodex-text-muted, #6e7180) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Percent lives in the label row; track wrap is bar-only */
html body.app.admin #widget-finance_overview .kpf-finance-metric__track-wrap,
html body.app.admin #widget-finance_overview .progress-finance-status {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

html body.app.admin #widget-finance_overview .kpf-finance-metric__track-wrap .progress,
html body.app.admin #widget-finance_overview .progress-finance-status .progress,
html body.app.admin #widget-finance_overview .kds-insp-gen__track,
html body.app.admin #widget-finance_overview .progress {
  height: 4px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  font-size: 12px !important;
  line-height: normal !important;
}

html body.app.admin #widget-finance_overview .progress-bar,
html body.app.admin #widget-finance_overview .kds-insp-gen__fill {
  height: 100% !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  background: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin #widget-finance_overview .progress-bar-success,
html body.app.admin #widget-finance_overview .progress-bar.bg-success {
  background: var(--kodex-crm-stat-positive, #0d7a4e) !important;
}

html body.app.admin #widget-finance_overview .progress-bar-danger,
html body.app.admin #widget-finance_overview .progress-bar.bg-danger {
  background: var(--kodex-crm-stat-negative, #c41e3a) !important;
}

html body.app.admin #widget-finance_overview .progress-bar-warning,
html body.app.admin #widget-finance_overview .progress-bar.bg-warning {
  background: var(--kodex-crm-stat-pending, #fa4616) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .progress,
html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .kds-insp-gen__track {
  background: #252530 !important;
}

html body.app.admin #widget-finance_overview #invoices_total {
  /* same rhythm as the 16px grid gap between overview cards */
  margin-top: 16px !important;
}

html body.app.admin #widget-finance_overview #invoices_total dl.tw-grid {
  gap: 12px !important;
}

html body.app.admin #widget-finance_overview #invoices_total dl.tw-grid > div,
html body.app.admin #invoices_total dl.tw-grid > div.tw-border {
  background: var(--kodex-crm-surface, #fff) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

html body.app.admin #widget-finance_overview #invoices_total dl.tw-grid > div:hover {
  border-color: color-mix(in srgb, var(--kodex-action-primary, #001bff) 35%, transparent) !important;
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 3%, #fff) !important;
}

html body.app.admin #invoices_total dt,
html body.app.admin #invoices_total .tw-text-sm,
html body.app.admin #invoices_total .text-muted {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin #invoices_total dd,
html body.app.admin #invoices_total .tw-font-semibold,
html body.app.admin #invoices_total .tw-text-lg {
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kodex-text-primary, #14141a) !important;
  margin: 4px 0 0 !important;
}

/* —— User data widget: app-style segmented shell + compact tables —— */
html body.app.admin #widget-user_data .panel_s.user-data,
html body.app.admin #widget-user_data .panel_s {
  overflow: hidden !important;
  background: var(--kodex-crm-surface, #fff) !important;
  min-height: 360px !important;
  display: flex !important;
  flex-direction: column !important;
}

html body.app.admin #widget-user_data .home-activity {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: var(--kodex-crm-surface, #fff) !important;
}

html body.app.admin #widget-user_data .widget-dragger {
  z-index: 3 !important;
}

/* Segmented tab rail */
html body.app.admin #widget-user_data .horizontal-scrollable-tabs,
html body.app.admin #widget-user_data .panel-full-width-tabs {
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 12px 0 !important;
  margin: 0 !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

html body.app.admin #widget-user_data .horizontal-scrollable-tabs .scroller {
  display: none !important;
}

html body.app.admin #widget-user_data .horizontal-tabs {
  width: 100% !important;
  overflow: visible !important;
}

html body.app.admin #widget-user_data .nav-tabs-horizontal,
html body.app.admin #widget-user_data ul.nav-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  border-radius: 4px !important;
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  box-shadow: none !important;
}

html body.app.admin #widget-user_data .nav-tabs-horizontal::-webkit-scrollbar,
html body.app.admin #widget-user_data ul.nav-tabs::-webkit-scrollbar {
  display: none !important;
}

html body.app.admin #widget-user_data .nav-tabs > li {
  float: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

html body.app.admin #widget-user_data .nav-tabs > li > a {
  height: auto !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}

html body.app.admin #widget-user_data .nav-tabs > li > a .menu-icon,
html body.app.admin #widget-user_data .nav-tabs > li > a > i {
  margin: 0 !important;
  font-size: 12px !important;
  width: 14px !important;
  text-align: center !important;
  opacity: 0.72 !important;
  color: inherit !important;
}

html body.app.admin #widget-user_data .nav-tabs > li > a .badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  margin: 0 0 0 2px !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 12%, #fff) !important;
  color: var(--kodex-action-primary, #001bff) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border: 0 !important;
}

html body.app.admin #widget-user_data .nav-tabs > li > a:hover,
html body.app.admin #widget-user_data .nav-tabs > li > a:focus {
  color: var(--kodex-text-primary, #14141a) !important;
  background: color-mix(in srgb, #fff 70%, transparent) !important;
  border: 0 !important;
  outline: none !important;
}

html body.app.admin #widget-user_data .nav-tabs > li.active > a,
html body.app.admin #widget-user_data .nav-tabs > li.active > a:hover,
html body.app.admin #widget-user_data .nav-tabs > li.active > a:focus,
html body.app.admin #widget-user_data .nav-tabs > li > a.active {
  color: var(--kodex-action-primary, #001bff) !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(20, 20, 26, 0.08) !important;
}

html body.app.admin #widget-user_data .nav-tabs > li.active > a .menu-icon,
html body.app.admin #widget-user_data .nav-tabs > li.active > a > i,
html body.app.admin #widget-user_data .nav-tabs > li > a.active .menu-icon {
  opacity: 1 !important;
}

html body.app.admin #widget-user_data .nav-tabs > li.active > a .badge,
html body.app.admin #widget-user_data .nav-tabs > li > a.active .badge {
  background: var(--kodex-action-primary, #001bff) !important;
  color: #fff !important;
}

/* Content pane */
html body.app.admin #widget-user_data .tab-content,
html body.app.admin #widget-user_data .tab-content.tw-mt-5 {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 280px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--kodex-bg-surface, #fff) !important;
  border: 0 !important;
}

html body.app.admin #widget-user_data .tab-content > .tab-pane {
  padding: 0 !important;
}

html body.app.admin #widget-user_data .tab-content > .tab-pane.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

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

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

html body.app.admin #widget-user_data .tab-pane > .clearfix {
  display: none !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Tasks table (#home_tab_tasks): DataTables strips the not_visible checkbox
   column from the DOM, so positional nth-child guesses drift per install
   (custom fields / tasks_table_columns hooks also shift indexes) — a previous
   nth-child(2) hide removed the NAME column entirely. Never hide columns by
   position here; give Name real width via its sort header instead (DataTables
   sets aria-label from the column title). */
html body.app.admin #widget-user_data table#tasks thead th[aria-label^='Name'],
html body.app.admin #widget-user_data table#tasks thead th[aria-label^='Nombre'] {
  width: 42% !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Empty / no-entries */
html body.app.admin #widget-user_data table.dataTable tbody td.dataTables_empty,
html body.app.admin #widget-user_data .dataTables_empty {
  padding: 48px 16px !important;
  text-align: center !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--kodex-action-primary, #001bff) 6%, transparent), transparent 55%),
    transparent !important;
  border: 0 !important;
}

/* Footer / pagination */
html body.app.admin #widget-user_data .kpf-dt-footer,
html body.app.admin #widget-user_data .dataTables_wrapper > .row:last-child,
html body.app.admin #widget-user_data .dataTables_info,
html body.app.admin #widget-user_data .dataTables_paginate {
  border-top: 1px solid var(--kodex-border-subtle, #edeff7) !important;
}

html body.app.admin #widget-user_data .kpf-dt-footer,
html body.app.admin #widget-user_data .dataTables_wrapper > .row:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: transparent !important;
}

html body.app.admin #widget-user_data .dataTables_info {
  float: none !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 11px !important;
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin #widget-user_data .dataTables_paginate {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body.app.admin #widget-user_data .dataTables_paginate .paginate_button {
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  margin: 0 2px !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  font-size: 11px !important;
  line-height: 26px !important;
}

html body.app.admin #widget-user_data .dataTables_paginate .paginate_button.current {
  background: var(--kodex-action-primary, #001bff) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Labels / status pills inside rows */
html body.app.admin #widget-user_data .label,
html body.app.admin #widget-user_data .badge:not(.nav-tabs .badge) {
  border-radius: 4px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Activity feed */
html body.app.admin #widget-user_data .activity-feed {
  margin: 0 !important;
  padding: 8px 12px 16px !important;
}

html body.app.admin #widget-user_data .activity-feed .feed-item {
  position: relative !important;
  padding: 12px 12px 12px 18px !important;
  margin: 0 0 8px !important;
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  border-radius: 4px !important;
  background: var(--kodex-bg-subtle, #f7f7f7) !important;
  border-left: 3px solid var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin #widget-user_data .activity-feed .feed-item .date {
  margin-bottom: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin #widget-user_data .activity-feed .feed-item .text {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

/* Dark */
html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data .panel_s.user-data,
html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data .home-activity,
html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data .tab-content {
  background: var(--kodex-bg-surface, #1e1e24) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data .nav-tabs-horizontal,
html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data ul.nav-tabs {
  background: color-mix(in srgb, #000 28%, #1e1e24) !important;
  border-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data .nav-tabs > li > a {
  color: #b8bac4 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data .nav-tabs > li.active > a,
html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data .nav-tabs > li > a.active {
  background: #1e1e24 !important;
  color: #9db0ff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data table.dataTable thead th,
html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data table.table thead th {
  background: #18181e !important;
  border-bottom-color: #2a2a32 !important;
  color: #8a8d98 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data table.dataTable tbody td,
html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data table.table tbody td {
  border-bottom-color: #2a2a32 !important;
  color: #f0f1f5 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data table.dataTable tbody tr:hover > td {
  background: color-mix(in srgb, #001bff 12%, #1e1e24) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data .activity-feed .feed-item {
  background: #18181e !important;
  border-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data .tab-pane > a.mbot20,
html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data .kpf-user-widget__viewall {
  border-color: #2a2a32 !important;
  color: #9db0ff !important;
}

/* Contracts / todos lists */
html body.app.admin #widget-contracts_expiring table,
html body.app.admin #widget-todos table {
  margin-bottom: 0 !important;
}

html body.app.admin #widget-contracts_expiring .table > thead > tr > th,
html body.app.admin #widget-todos .table > thead > tr > th {
  border-bottom-color: var(--kodex-border-subtle, #edeff7) !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Dark text fix for widget titles */
html body.app.admin.kodex-crm-admin--ui-dark #wrapper .widget .panel-body,
html[data-theme='dark'] body.app.admin #wrapper .widget .panel-body {
  color: var(--kodex-text-primary, #e8e9ed) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .home-summary .text-neutral-700,
html body.app.admin.kodex-crm-admin--ui-dark #invoices_total dd,
html body.app.admin.kodex-crm-admin--ui-dark #invoices_total .tw-font-semibold {
  color: var(--kodex-text-primary, #e8e9ed) !important;
}

/* === kpf-ds-components.css === */
/**
 * Kodex DS v2.1 → Perfex dashboard bridge
 * Sources: ChartCard, MarketShareDonut, PatternSquare*, Card, NestedContextMenu, WidgetPack
 * Cobalt series · sharp 4px · Satoshi ≥14px titles / ≥12px labels · light + dark
 */

/* —— Tokens (align with @kodex/charts + inspiration kit) —— */
html body.app.admin {
  --kds-chart-cobalt: #001bff;
  --kds-chart-navy: #001d3a;
  --kds-chart-muted: #8a8d8f;
  --kds-chart-track: #d9dadc;
  --kds-chart-success: #0d7a4e;
  --kds-chart-warn: #fa4616;
  --kodex-pattern-cell-active: #001bff;
  --kodex-pattern-cell-inactive: color-mix(in srgb, #001bff 10%, #d3d6e0);
  --kodex-pattern-cell-gap: 3px;
  --kds-surface-card-shadow: none;
}

html body.app.admin.kodex-crm-admin--ui-dark {
  --kodex-pattern-cell-inactive: color-mix(in srgb, #9db0ff 18%, #2a2a32);
  --kds-surface-card-shadow: none;
  --kds-chart-track: #2a2a32;
}

/* ========== ChartCard (DS) — wrap leads / projects / payments / tickets ========== */
html body.app.admin #widget-leads_chart .panel_s,
html body.app.admin #widget-projects_chart .panel_s,
html body.app.admin #widget-payments_chart .panel_s,
html body.app.admin #widget-tickets_report .panel_s,
html body.app.admin #widget-contracts_expiring .panel_s {
  background: var(--kodex-bg-surface, #fff) !important;
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  border-radius: 4px !important;
  box-shadow: var(--kds-surface-card-shadow) !important;
  overflow: hidden !important;
}

html body.app.admin #widget-leads_chart .panel-body,
html body.app.admin #widget-projects_chart .panel-body,
html body.app.admin #widget-payments_chart .panel-body {
  padding: 0 !important;
}

/* ChartCard header from first title paragraph */
html body.app.admin #widget-leads_chart .panel-body > p:first-child,
html body.app.admin #widget-projects_chart .panel-body > p:first-child,
html body.app.admin #widget-payments_chart .panel-body > p:first-of-type,
html body.app.admin #widget-leads_chart .panel-body > .tw-font-medium:first-child,
html body.app.admin #widget-projects_chart .panel-body > .tw-font-medium:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  letter-spacing: -0.01em !important;
  background: color-mix(in srgb, var(--kds-chart-cobalt) 3%, transparent) !important;
}

html body.app.admin #widget-leads_chart .kpf-kodex-chart-host,
html body.app.admin #widget-projects_chart .kpf-kodex-chart-host,
html body.app.admin #widget-payments_chart .kpf-kodex-chart-host,
html body.app.admin #widget-leads_chart .relative,
html body.app.admin #widget-projects_chart .relative {
  padding: 14px 12px 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* MarketShareDonut IS the card — don't double-chrome inside chart widgets */
html body.app.admin #widget-leads_chart .kds-insp-market-donut,
html body.app.admin #widget-projects_chart .kds-insp-market-donut,
html body.app.admin #widget-saas_top_stats .kds-insp-market-donut {
  background: var(--kodex-bg-surface, #fff) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 16px !important;
  color: var(--kodex-text-primary, #14141a) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
}

html body.app.admin #widget-saas_top_stats .kpf-kodex-chart-host,
html body.app.admin #widget-saas_top_stats .relative:has(.kds-insp-market-donut) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body.app.admin .kds-insp-market-donut__head .kds-insp-card-dark__title,
html body.app.admin .kds-insp-card-dark__title {
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  letter-spacing: -0.01em !important;
}

html body.app.admin .kds-insp-market-donut__legend-btn,
html body.app.admin .kds-insp-hint,
html body.app.admin .kodex-pattern-chart__label {
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 12px !important;
}

html body.app.admin .kodex-pattern-chart__label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  font-variant-numeric: tabular-nums !important;
}

/* PatternSquareBars — sharp 4px / 1px cells, cobalt series */
html body.app.admin .kodex-pattern-bar__grid {
  gap: var(--kodex-pattern-cell-gap, 3px) !important;
}

html body.app.admin .kodex-pattern-bar__cell {
  border-radius: 1px !important;
  background: var(--kodex-pattern-cell-inactive) !important;
}

html body.app.admin .kodex-pattern-bar__cell--primary {
  background: var(--kodex-pattern-cell-active, #001bff) !important;
}

html body.app.admin .kodex-pattern-series--gap-sm {
  gap: 14px !important;
}

/* Payments weekly rows live in kpf-dashboard-layout.css */

/* Payments weekly → PatternSquare / AnalyticsPillBars density */
html body.app.admin #widget-payments_chart .nav-tabs {
  padding: 0 12px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  background: color-mix(in srgb, var(--kds-chart-cobalt) 3%, transparent) !important;
}

html body.app.admin #widget-payments_chart .nav-tabs > li > a {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body.app.admin #widget-payments_chart .nav-tabs > li.active > a {
  color: var(--kds-chart-cobalt) !important;
  box-shadow: inset 0 -2px 0 var(--kds-chart-cobalt) !important;
  background: transparent !important;
}

html body.app.admin #widget-payments_chart #payment-statistics,
html body.app.admin #widget-payments_chart .kpf-kodex-chart-host {
  padding: 16px !important;
}

/* ========== Card container (kds-card DNA) — finance / todos / calendar ========== */
html body.app.admin #widget-todos .panel_s,
html body.app.admin #widget-calendar .panel_s,
html body.app.admin #widget-user_data .panel_s {
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  background: var(--kodex-bg-surface, #fff) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Finance outer shell stays open; cards live in .home-summary cols */
html body.app.admin #widget-finance_overview > .finance-summary > .panel_s,
html body.app.admin #widget-finance_overview > .panel_s {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.app.admin #widget-todos .panel-body > p.tw-font-medium:first-child,
html body.app.admin #widget-calendar .panel-body > .tw-font-medium:first-child,
html body.app.admin #widget-todos .todo-title,
html body.app.admin #widget-todos .panel-body > .tw-flex:first-child {
  padding: 14px 16px !important;
  margin: 0 0 0 !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  background: color-mix(in srgb, var(--kds-chart-cobalt) 4%, var(--kodex-bg-surface, #fff)) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

/* Todos — WidgetPack / CrmTaskTable rows, redesigned as quiet accent cards */
html body.app.admin #widget-todos .todo-body,
html body.app.admin #widget-todos ul.todo,
html body.app.admin #widget-todos .todos-wrapper {
  padding: 6px 10px 12px !important;
}

html body.app.admin #widget-todos .todo li,
html body.app.admin #widget-todos .todos li,
html body.app.admin #widget-todos .finished-todos li {
  display: block !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  border-left: 3px solid var(--kodex-crm-stat-pending, #fa4616) !important;
  border-radius: 4px !important;
  background: var(--kodex-bg-surface, #fff) !important;
  font-size: 13px !important;
  color: var(--kodex-text-primary, #14141a) !important;
  /* visible — Bootstrap's checkbox uses margin-left:-20px and was clipped */
  overflow: visible !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html body.app.admin #widget-todos .finished-todos li {
  border-left-color: var(--kodex-crm-stat-positive, #0d7a4e) !important;
}

html body.app.admin #widget-todos .todo li:hover,
html body.app.admin #widget-todos .todos li:hover {
  border-color: color-mix(in srgb, var(--kodex-action-primary, #001bff) 28%, var(--kodex-border-subtle, #edeff7)) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, #14141a 6%, transparent) !important;
}

html body.app.admin #widget-todos .finished-todos li:hover {
  border-left-color: var(--kodex-crm-stat-positive, #0d7a4e) !important;
}

/* Row layout: checkbox | description + meta (flex-wraps to a 2nd line) */
html body.app.admin #widget-todos .todo li .media,
html body.app.admin #widget-todos .finished-todos li .media,
html body.app.admin #widget-todos .unfinished-todos li .media {
  /* Real flex row: fixed checkbox column + text column. Without this the
     table-cell children collapse to stacked blocks and the checkbox lands
     on top of the description. */
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 11px 12px !important;
  margin: 0 !important;
}

html body.app.admin #widget-todos .media-left {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  padding: 2px 0 0 !important;
  overflow: visible !important;
}

html body.app.admin #widget-todos .todo-dragger {
  display: none !important;
}

/* Native Perfex checkbox is absolute with margin-left:-20px — that pulls it
   outside the card and gets cut. Pin it as a static 16×16 control instead. */
html body.app.admin #widget-todos .checkbox.todo-checkbox {
  position: relative !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html body.app.admin #widget-todos .checkbox.todo-checkbox input[type='checkbox'] {
  position: static !important;
  float: none !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  accent-color: var(--kodex-action-primary, #001bff) !important;
  flex-shrink: 0 !important;
}

html body.app.admin #widget-todos .checkbox.todo-checkbox label {
  position: absolute !important;
  inset: 0 !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
}

html body.app.admin #widget-todos .checkbox.todo-checkbox label::before,
html body.app.admin #widget-todos .checkbox.todo-checkbox label::after {
  content: none !important;
  display: none !important;
}

html body.app.admin #widget-todos .media-body {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 3px 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body.app.admin #widget-todos .todo-description {
  order: 1 !important;
  flex: 1 1 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  word-break: break-word !important;
}

html body.app.admin #widget-todos .finished-todos .todo-description {
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin #widget-todos .todo-date,
html body.app.admin #widget-todos .todo-date-finished {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.35 !important;
}

html body.app.admin #widget-todos .todo-date::before,
html body.app.admin #widget-todos .todo-date-finished::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

/* Actions — quiet icon buttons, appear on row hover/focus */
html body.app.admin #widget-todos .media-body > a.pull-right {
  order: 3 !important;
  float: none !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 4px !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  background: var(--kodex-bg-surface, #fff) !important;
  opacity: 0 !important;
  transform: translateY(2px) !important;
  transition: opacity 0.14s ease, transform 0.14s ease, border-color 0.14s ease, color 0.14s ease !important;
}

html body.app.admin #widget-todos li:hover .media-body > a.pull-right,
html body.app.admin #widget-todos li:focus-within .media-body > a.pull-right {
  opacity: 1 !important;
  transform: none !important;
}

html body.app.admin #widget-todos .media-body > a.pull-right:hover {
  border-color: color-mix(in srgb, var(--kodex-action-primary, #001bff) 40%, var(--kodex-border-default, #d3d6e0)) !important;
  color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin #widget-todos .media-body > a[onclick*='delete_todo_item'] {
  order: 4 !important;
}

html body.app.admin #widget-todos .media-body > a[onclick*='delete_todo_item']:hover {
  border-color: color-mix(in srgb, #c41e3a 40%, var(--kodex-border-default, #d3d6e0)) !important;
  color: #c41e3a !important;
}

html body.app.admin #widget-todos .media-body > a i {
  font-size: 12px !important;
}

html body.app.admin #widget-todos .btn,
html body.app.admin #widget-todos a.btn {
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

html body.app.admin #widget-todos .btn-primary,
html body.app.admin #widget-todos .new-todo-button {
  background: var(--kds-chart-cobalt) !important;
  border-color: var(--kds-chart-cobalt) !important;
  color: #fff !important;
}

html body.app.admin #widget-todos .btn-primary:hover {
  background: #0015cc !important;
  border-color: #0015cc !important;
}

html body.app.admin #widget-todos .text-muted,
html body.app.admin #widget-todos .no-todos {
  color: var(--kodex-text-muted, #6e7180) !important;
  font-size: 13px !important;
}

/* Calendar filters — StatusFilterBar density */
html body.app.admin #widget-calendar #calendar_filters,
html body.app.admin #calendar_filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
}

html body.app.admin #calendar_filters .checkbox,
html body.app.admin #calendar_filters label {
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  background: var(--kodex-bg-surface, #fff) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

html body.app.admin #calendar_filters label:hover {
  border-color: color-mix(in srgb, var(--kds-chart-cobalt) 40%, transparent) !important;
  color: var(--kds-chart-cobalt) !important;
}

/* ========== NestedContextMenu → all admin dropdowns ========== */
html body.app.admin .dropdown-menu,
html body.app.admin .bootstrap-select .dropdown-menu,
html body.app.admin ul.dropdown-menu,
html body.app.admin .open > .dropdown-menu {
  min-width: 220px !important;
  max-width: min(320px, 92vw) !important;
  padding: 8px !important;
  border-radius: 4px !important;
  background: var(--kodex-bg-surface, #fff) !important;
  color: var(--kodex-text-primary, #14141a) !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  box-shadow: 0 8px 28px rgba(20, 20, 26, 0.12) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  z-index: 1060 !important;
}

html body.app.admin .dropdown-menu > li > a,
html body.app.admin .dropdown-menu > li > button,
html body.app.admin .bootstrap-select .dropdown-menu li a {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) 16px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: nowrap !important;
  transition: background 0.12s ease;
}

html body.app.admin .dropdown-menu > li > a:hover,
html body.app.admin .dropdown-menu > li > a:focus,
html body.app.admin .dropdown-menu > .active > a,
html body.app.admin .dropdown-menu > .active > a:hover,
html body.app.admin .bootstrap-select .dropdown-menu li a:hover,
html body.app.admin .bootstrap-select .dropdown-menu li.selected a {
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin .dropdown-menu .divider {
  height: 1px !important;
  margin: 6px 4px !important;
  background: var(--kodex-border-subtle, #edeff7) !important;
  overflow: hidden !important;
}

html body.app.admin .dropdown-menu > li.text-danger > a,
html body.app.admin .dropdown-menu a.text-danger,
html body.app.admin .dropdown-menu a[href*="delete"] {
  color: #e11d48 !important;
}

html body.app.admin .dropdown-menu > li.text-danger > a:hover {
  background: color-mix(in srgb, #e11d48 8%, transparent) !important;
}

/* Submenus (bootstrap nested) */
html body.app.admin .dropdown-submenu > .dropdown-menu {
  width: 200px !important;
  min-width: 200px !important;
}

/* ========== Dark mode ========== */
html body.app.admin.kodex-crm-admin--ui-dark #widget-leads_chart .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark #widget-projects_chart .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark #widget-payments_chart .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark #widget-finance_overview .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark #widget-todos .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark #widget-calendar .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark #widget-user_data .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark #widget-contracts_expiring .panel_s,
html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-market-donut {
  background: var(--kodex-bg-surface, #1e1e24) !important;
  border-color: #2a2a32 !important;
  color: #e8e9ed !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-leads_chart .panel-body > p:first-child,
html body.app.admin.kodex-crm-admin--ui-dark #widget-projects_chart .panel-body > p:first-child,
html body.app.admin.kodex-crm-admin--ui-dark #widget-payments_chart .nav-tabs,
html body.app.admin.kodex-crm-admin--ui-dark #widget-todos .panel-body > p.tw-font-medium:first-child,
html body.app.admin.kodex-crm-admin--ui-dark #calendar_filters {
  background: #1e1e24 !important;
  border-color: #2a2a32 !important;
  color: #e8e9ed !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-card-dark__title,
html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-market-donut__legend-value,
html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-market-donut__center-value {
  color: #e8e9ed !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-market-donut__legend-label,
html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-market-donut__center-label,
html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-hint {
  color: #9da2b3 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .dropdown-menu,
html body.app.admin.kodex-crm-admin--ui-dark .bootstrap-select .dropdown-menu {
  background: #1e1e24 !important;
  border-color: #2a2a32 !important;
  color: #e8e9ed !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .dropdown-menu > li > a {
  color: #e8e9ed !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .dropdown-menu > li > a:hover,
html body.app.admin.kodex-crm-admin--ui-dark .dropdown-menu > .active > a {
  background: #2a2a32 !important;
  color: #fff !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #calendar_filters label {
  background: #14141a !important;
  border-color: #2a2a32 !important;
  color: #9da2b3 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-todos .todo li:hover {
  background: #1e1e24 !important;
  border-color: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark .kodex-pattern-chart__label {
  color: #9da2b3 !important;
}

/* === kpf-dashboard-layout.css === */
/**
 * Kodex CRM Dashboard — Zen + Custom (from scratch)
 * Tokens: --kodex-* / CrmSaasDashboard surface language
 */

/* ========== Page canvas (upscaled presentation) ========== */
html body.app.admin.dashboard #wrapper .content,
html body.app.admin.admin_dashboard #wrapper .content {
  --kds-dash-gap: 15px;
  --kds-dash-gap-lg: 32px;
  --kds-dash-zone-gap: 15px;
  --kds-dash-pad: 20px;
  --kds-dash-canvas: var(--kodex-crm-canvas, #f0f1f4);
  --kds-dash-surface: var(--kodex-bg-surface, #ffffff);
  --kds-dash-elevated: var(--kodex-bg-subtle, #f5f5f5);
  --kds-dash-border: var(--kodex-border-default, #d3d6e0);
  --kds-dash-subtle: var(--kodex-border-subtle, #edeff7);
  --kds-dash-ink: var(--kodex-text-primary, #14141a);
  --kds-dash-muted: var(--kodex-text-muted, #6e7180);
  --kds-dash-secondary: var(--kodex-text-secondary, #40424d);
  --kds-dash-cobalt: var(--kodex-action-primary, #001bff);
  --kds-dash-navy: #001d3a;
  --kds-dash-radius: 4px;
  --kds-dash-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kds-dash-shadow: 0 1px 0 color-mix(in srgb, #14141a 4%, transparent);
  --kds-dash-shadow-lift: 0 12px 40px color-mix(in srgb, #14141a 7%, transparent);

  position: relative !important;
  padding: 8px 40px 88px !important;
  min-height: calc(100vh - 52px);
  color: var(--kds-dash-ink) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  background-color: var(--kds-dash-canvas) !important;
  background-image:
    radial-gradient(1400px 560px at 6% -12%, color-mix(in srgb, var(--kds-dash-cobalt) 9%, transparent), transparent 62%),
    radial-gradient(1100px 480px at 100% -4%, color-mix(in srgb, var(--kds-dash-navy) 8%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, #fff 70%, var(--kds-dash-canvas)), var(--kds-dash-canvas) 38%) !important;
  background-attachment: local !important;
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper .content,
html body.app.admin.admin_dashboard.kodex-crm-admin--ui-dark #wrapper .content,
html[data-theme='dark'] body.app.admin.dashboard #wrapper .content {
  --kds-dash-canvas: var(--kodex-crm-canvas, #14141a);
  --kds-dash-surface: var(--kodex-bg-surface, #1e1e24);
  --kds-dash-elevated: var(--kodex-bg-surface-raised, #252530);
  --kds-dash-border: #2a2a32;
  --kds-dash-subtle: #2a2a32;
  --kds-dash-ink: #e8e9ed;
  --kds-dash-muted: #9da2b3;
  --kds-dash-secondary: #c5c8d4;
  --kds-dash-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  background-image:
    radial-gradient(1000px 420px at 12% -8%, color-mix(in srgb, var(--kds-dash-cobalt) 18%, transparent), transparent 58%),
    radial-gradient(800px 360px at 100% 0%, rgba(0, 29, 58, 0.55), transparent 50%),
    linear-gradient(180deg, #18181f, var(--kds-dash-canvas) 48%) !important;
}

/* Board root */
html body.app.admin.dashboard #wrapper .content > .row,
html body.app.admin.dashboard #wrapper .content > .row.kds-dash-board {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: min-content !important;
  gap: var(--kds-dash-zone-gap) !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 1560px !important;
}

html body.app.admin.dashboard #wrapper .content > .row::before,
html body.app.admin.dashboard #wrapper .content > .row::after,
html body.app.admin.dashboard #wrapper .content .clearfix {
  display: none !important;
  content: none !important;
}

html body.app.admin.dashboard #wrapper .content [data-container] {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

html body.app.admin.dashboard #wrapper .content [data-container]:empty,
html body.app.admin.dashboard #wrapper .content [data-kds-empty='1'] {
  display: none !important;
}

html body.app.admin.dashboard #wrapper .content .mtop20 {
  margin-top: 0 !important;
}

/* ========== Masthead (dashboard only) ========== */
html body.app.admin:not(.dashboard):not(.admin_dashboard):not(.kodex-dash-v2-page):not(.kodex-dash-v3-page) #wrapper .content .kds-dash-toolbar,
html body.app.admin:not(.dashboard):not(.admin_dashboard):not(.kodex-dash-v2-page):not(.kodex-dash-v3-page) #wrapper .content .kds-dash-masthead,
html body.app.admin:not(.dashboard):not(.admin_dashboard):not(.kodex-dash-v2-page):not(.kodex-dash-v3-page) #wrapper .content .kds-dash-toolbar__modes {
  display: none !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar,
html body.app.admin.admin_dashboard #wrapper .content .kds-dash-toolbar,
html body.app.admin.kodex-dash-v2-page #wrapper .content .kds-dash-toolbar,
html body.app.admin.kodex-dash-v3-page #wrapper .content .kds-dash-toolbar,
html body.app.admin.dashboard #wrapper .content .kds-dash-masthead,
html body.app.admin.admin_dashboard #wrapper .content .kds-dash-masthead,
html body.app.admin.kodex-dash-v2-page #wrapper .content .kds-dash-masthead,
html body.app.admin.kodex-dash-v3-page #wrapper .content .kds-dash-masthead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--kds-dash-border) 70%, transparent) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 30 !important;
  animation: none !important;
  min-height: 0 !important;
}

/* Stack layout modes directly under "Opciones de Tablero" */
html body.app.admin.dashboard #wrapper .screen-options-btn,
html body.app.admin.dashboard #wrapper .kodex-crm-admin__screen-options-btn {
  top: 0 !important;
  right: 40px !important;
  margin: 0 !important;
}

/* ========== Screen options — selectable widget cards ========== */
html body.app.admin.dashboard #wrapper .screen-options-area,
html body.app.admin.dashboard #wrapper .kodex-crm-admin__screen-options,
html body.app.admin.dashboard #wrapper .kds-dash-opt {
  display: none;
  padding: 16px 20px 20px !important;
  background: var(--kds-dash-surface, #fff) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kds-dash-border, #d3d6e0) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--kds-dash-ink, #14141a) !important;
  overflow: visible !important;
}

html body.app.admin.dashboard #wrapper .screen-options-area[style*='block'],
html body.app.admin.dashboard #wrapper .screen-options-area[style*='Block'] {
  display: block !important;
}

html body.app.admin.dashboard #wrapper .kds-dash-opt__panel,
html body.app.admin.dashboard #wrapper #dashboard-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
}

html body.app.admin.dashboard #wrapper .kds-dash-opt__head,
html body.app.admin.dashboard #wrapper #dashboard-options > .tw-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 16px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

html body.app.admin.dashboard #wrapper .kds-dash-opt__head h4,
html body.app.admin.dashboard #wrapper #dashboard-options > .tw-flex h4 {
  margin: 0 !important;
  font-family: var(--kodex-font-display, "Neue Haas Grotesk Display", Satoshi, system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kds-dash-ink, #14141a) !important;
}

html body.app.admin.dashboard #wrapper .kds-dash-opt__head a,
html body.app.admin.dashboard #wrapper #dashboard-options > .tw-flex a {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kds-dash-cobalt, #001bff) !important;
  text-decoration: none !important;
}

html body.app.admin.dashboard #wrapper .kds-dash-opt__head a:hover,
html body.app.admin.dashboard #wrapper #dashboard-options > .tw-flex a:hover {
  text-decoration: underline !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options > .tw-flex,
html body.app.admin.dashboard #wrapper #dashboard-options > .kds-dash-opt__head {
  grid-column: 1 / -1 !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options .checkbox,
html body.app.admin.dashboard #wrapper #dashboard-options .kds-dash-opt__card {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 56px !important;
  border: 1px solid var(--kds-dash-border, #d3d6e0) !important;
  border-radius: 4px !important;
  background: var(--kds-dash-elevated, #f5f5f5) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition:
    border-color 160ms var(--kds-dash-ease, ease),
    background 160ms var(--kds-dash-ease, ease),
    box-shadow 160ms var(--kds-dash-ease, ease),
    transform 160ms var(--kds-dash-ease, ease) !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options .checkbox:hover,
html body.app.admin.dashboard #wrapper #dashboard-options .kds-dash-opt__card:hover {
  border-color: color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 35%, var(--kds-dash-border)) !important;
  background: #fff !important;
  box-shadow: var(--kds-dash-shadow-lift, 0 8px 24px color-mix(in srgb, #14141a 8%, transparent)) !important;
  transform: translateY(-1px) !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options .kds-dash-opt__card--on,
html body.app.admin.dashboard #wrapper #dashboard-options .checkbox:has(input:checked) {
  border-color: var(--kds-dash-cobalt, #001bff) !important;
  background: color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 6%, #fff) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 20%, transparent) !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options .checkbox > input[type='checkbox'],
html body.app.admin.dashboard #wrapper #dashboard-options .kds-dash-opt__card > input[type='checkbox'] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options .kds-dash-opt__label,
html body.app.admin.dashboard #wrapper #dashboard-options .checkbox > label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--kds-dash-ink, #14141a) !important;
  cursor: pointer !important;
  user-select: none !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options .kds-dash-opt__check {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid var(--kds-dash-border, #d3d6e0) !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  transition: background 140ms ease, border-color 140ms ease !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options .kds-dash-opt__check::after {
  content: '' !important;
  width: 10px !important;
  height: 6px !important;
  margin-top: -2px !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(-45deg) scale(0) !important;
  transition: transform 140ms ease !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options .kds-dash-opt__card--on .kds-dash-opt__check,
html body.app.admin.dashboard #wrapper #dashboard-options .checkbox:has(input:checked) .kds-dash-opt__check {
  background: var(--kds-dash-cobalt, #001bff) !important;
  border-color: var(--kds-dash-cobalt, #001bff) !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options .kds-dash-opt__card--on .kds-dash-opt__check::after,
html body.app.admin.dashboard #wrapper #dashboard-options .checkbox:has(input:checked) .kds-dash-opt__check::after {
  transform: rotate(-45deg) scale(1) !important;
}

html body.app.admin.dashboard #wrapper #dashboard-options .kds-dash-opt__title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: inherit !important;
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper .screen-options-area,
html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper .kds-dash-opt {
  background: var(--kds-dash-surface, #1e1e24) !important;
  border-bottom-color: var(--kds-dash-border, #2a2a32) !important;
  color: #f3f4f6 !important;
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper #dashboard-options .checkbox,
html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper #dashboard-options .kds-dash-opt__card {
  background: var(--kds-dash-elevated, #252530) !important;
  border-color: var(--kds-dash-border, #2a2a32) !important;
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper #dashboard-options .checkbox:hover,
html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper #dashboard-options .kds-dash-opt__card:hover {
  background: #2a2a32 !important;
  border-color: color-mix(in srgb, #001bff 40%, #2a2a32) !important;
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper #dashboard-options .kds-dash-opt__card--on,
html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper #dashboard-options .checkbox:has(input:checked) {
  background: color-mix(in srgb, #001bff 18%, #1e1e24) !important;
  border-color: #001bff !important;
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper #dashboard-options .kds-dash-opt__label,
html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper #dashboard-options .checkbox > label,
html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper .kds-dash-opt__head h4 {
  color: #f3f4f6 !important;
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper #dashboard-options .kds-dash-opt__check {
  background: #14141a !important;
  border-color: #3f3f46 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar {
  margin-top: 36px !important;
}

/* No leftover gap from relocated status header / empty status zone */
html body.app.admin.dashboard #wrapper .content .kds-dash-board > .kpf-status-header,
html body.app.admin.dashboard #wrapper .content .kds-dash-board > .col-md-12:has(> .kpf-status-header),
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--status[hidden],
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--status[data-kds-empty='1'],
html body.app.admin.kodex-crm-admin--workspace-alerts-header #wrapper .content .kds-dash-zone--status {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* No masthead copy — modes switcher only */
html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__label,
html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__kicker,
html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__title,
html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__subtitle,
html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__meta {
  display: none !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__modes,
html body.app.admin.admin_dashboard #wrapper .content .kds-dash-toolbar__modes {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px !important;
  border: 1px solid var(--kds-dash-border, #d3d6e0) !important;
  border-radius: var(--kds-dash-radius, 4px) !important;
  background: var(--kds-dash-surface, #fff) !important;
  backdrop-filter: blur(12px);
  box-shadow: var(--kds-dash-shadow-lift) !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__btn,
html body.app.admin.admin_dashboard #wrapper .content .kds-dash-toolbar__btn {
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--kds-dash-secondary, #40424d) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 9px 14px !important;
  border-radius: calc(var(--kds-dash-radius, 4px) - 1px) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: background 160ms var(--kds-dash-ease), color 160ms var(--kds-dash-ease), box-shadow 160ms var(--kds-dash-ease) !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__btn:hover,
html body.app.admin.admin_dashboard #wrapper .content .kds-dash-toolbar__btn:hover {
  color: var(--kds-dash-ink, #14141a) !important;
  background: color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 7%, transparent) !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__btn--active,
html body.app.admin.admin_dashboard #wrapper .content .kds-dash-toolbar__btn--active {
  color: #fff !important;
  background: var(--kds-dash-cobalt, #001bff) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 32%, transparent) !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__btn--active:hover,
html body.app.admin.admin_dashboard #wrapper .content .kds-dash-toolbar__btn--active:hover {
  color: #fff !important;
  background: var(--kds-dash-cobalt, #001bff) !important;
}

/* ========== Zones (Zen) ========== */
html body.app.admin.dashboard #wrapper .content .kds-dash-zone {
  display: grid !important;
  gap: 16px !important;
  min-width: 0 !important;
  animation: kds-dash-rise 700ms var(--kds-dash-ease) both;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--overview { animation-delay: 50ms; }
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--finance { animation-delay: 110ms; }
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth { animation-delay: 170ms; }
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops { animation-delay: 230ms; }
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--more { animation-delay: 290ms; }

html body.app.admin.dashboard #wrapper .content .kds-dash-zone[hidden],
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--passthrough {
  display: none !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--status-strip {
  display: grid !important;
  gap: 0 !important;
  margin: 0 0 calc(12px - var(--kds-dash-zone-gap, 15px)) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--status[data-kds-empty='1'] {
  display: none !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--status > .kds-dash-zone__head[hidden] {
  display: none !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--status .kds-dash-alerts-zone__grid,
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--status .kds-dash-zone__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  max-width: 480px !important;
  width: 100% !important;
}

/* Alerts as a standard dashboard widget panel (same language as contracts_expiring) */
html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts,
html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts.kds-dash-widget {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  max-width: 480px !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts > .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .kds-dash-alerts-panel {
  background: var(--kds-dash-surface) !important;
  border: 1px solid var(--kds-dash-border) !important;
  border-radius: var(--kds-dash-radius) !important;
  box-shadow: var(--kds-dash-shadow) !important;
  overflow: hidden !important;
  height: auto !important;
  min-height: 0 !important;
  transition: border-color 200ms var(--kds-dash-ease), box-shadow 200ms var(--kds-dash-ease), transform 200ms var(--kds-dash-ease) !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts:hover > .panel_s {
  border-color: color-mix(in srgb, var(--kds-dash-cobalt) 30%, var(--kds-dash-border)) !important;
  box-shadow: var(--kds-dash-shadow-lift) !important;
  transform: translateY(-1px) !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .panel-body {
  padding: 10px !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .kds-dash-widget__head {
  margin: 0 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .kds-dash-widget__head .tw-font-semibold,
html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .kds-dash-widget__head .tw-text-neutral-700 {
  font-family: var(--kodex-font-display, "Neue Haas Grotesk Display", Satoshi, system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kds-dash-ink) !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts hr {
  display: block !important;
  margin: 8px -10px 12px !important;
  border: 0 !important;
  border-top: 1px solid var(--kds-dash-subtle) !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .kds-dash-alerts-panel__count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 7px !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--kds-dash-cobalt) 12%, #fff) !important;
  color: var(--kds-dash-cobalt) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .kds-dash-alerts-panel__count[hidden] {
  display: none !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .kds-dash-alerts-panel__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 220px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 2px 2px 4px !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .col-md-12 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .alert,
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--status .alert {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 10px 32px 10px 12px !important;
  border: 1px solid var(--kds-dash-border) !important;
  border-radius: var(--kds-dash-radius) !important;
  border-left-width: 3px !important;
  background: var(--kds-dash-elevated, #f5f5f5) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--kds-dash-ink) !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .alert-danger {
  border-left-color: var(--kpf-status-danger, #dc2626) !important;
  background: color-mix(in srgb, var(--kpf-status-danger, #dc2626) 8%, #fff) !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .alert-warning {
  border-left-color: var(--kpf-status-warning, #d97706) !important;
  background: color-mix(in srgb, var(--kpf-status-warning, #d97706) 8%, #fff) !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .alert-info {
  border-left-color: var(--kpf-status-info, #2563eb) !important;
  background: color-mix(in srgb, var(--kpf-status-info, #2563eb) 8%, #fff) !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .alert-success {
  border-left-color: var(--kpf-status-success, #16a34a) !important;
  background: color-mix(in srgb, var(--kpf-status-success, #16a34a) 8%, #fff) !important;
}

html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .alert .close {
  top: 8px !important;
  right: 8px !important;
  opacity: 0.55 !important;
}

/* Greeting strip removed from board — lives in identity menu */
html body.app.admin.dashboard #wrapper .content .kds-dash-board > .kpf-status-header,
html body.app.admin.dashboard #wrapper .content .kds-dash-board > .col-md-12:has(> .kpf-status-header) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-board > .kpf-status-header .kpf-status-header__frame,
html body.app.admin.dashboard #wrapper .content .kds-dash-board > .col-md-12 > .kpf-status-header .kpf-status-header__frame {
  display: none !important;
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper .content #widget-workspace_alerts > .panel_s {
  background: var(--kds-dash-surface) !important;
  border-color: var(--kds-dash-border) !important;
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark #wrapper .content #widget-workspace_alerts .alert {
  background: var(--kds-dash-elevated) !important;
  color: #f3f4f6 !important;
  border-color: var(--kds-dash-border) !important;
}

/* Zen overview — light stage, not a heavy card dump */
html body.app.admin.dashboard.kds-dash-zen #wrapper .content .kds-dash-zone--overview {
  position: relative !important;
  padding: 4px 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone__head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 2px 2px !important;
  border: 0 !important;
  background: transparent !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding-left: 12px !important;
  border-left: 2px solid var(--kds-dash-cobalt) !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone__kicker {
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kds-dash-cobalt) !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone__purpose {
  margin: 0 !important;
  font-family: var(--kodex-font-display, "Neue Haas Grotesk Display", Satoshi, system-ui, sans-serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: var(--kds-dash-ink) !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone__hint {
  margin: 2px 0 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--kds-dash-muted) !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone__drag {
  display: none !important;
}

/* Zone grids — same 15×15 rhythm as Grid / Gallery / Custom */
html body.app.admin.dashboard #wrapper .content .kds-dash-zone__grid {
  display: grid !important;
  gap: 15px !important;
  row-gap: 15px !important;
  column-gap: 15px !important;
  min-width: 0 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--overview .kds-dash-zone__grid,
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--finance .kds-dash-zone__grid,
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--status .kds-dash-zone__grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Growth: payments full-width strip, then leads | projects */
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth .kds-dash-zone__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 15px !important;
  row-gap: 15px !important;
  column-gap: 15px !important;
  align-items: stretch !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-payments_chart {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-leads_chart,
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-projects_chart {
  grid-column: span 6 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-leads_chart > .panel_s,
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-projects_chart > .panel_s,
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-payments_chart > .panel_s {
  flex: 1 1 auto !important;
}

/* Payments weekly — one visual row per weekday */
html body.app.admin #widget-payments_chart .kodex-pattern-series,
html body.app.admin #widget-payments_chart .kodex-pattern-series--gap-sm,
html body.app.admin #widget-payments_chart .kodex-pattern-series--week,
html body.app.admin #widget-payments_chart .kodex-pattern-series--horizontal {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}

html body.app.admin #widget-payments_chart .kodex-pattern-series__item,
html body.app.admin #widget-payments_chart .kodex-pattern-series__item--week {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) 48px !important;
  gap: 12px !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body.app.admin #widget-payments_chart .kodex-pattern-week__day,
html body.app.admin #widget-payments_chart .kodex-pattern-chart__label:first-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.app.admin #widget-payments_chart .kodex-pattern-week__value,
html body.app.admin #widget-payments_chart .kodex-pattern-chart__label:last-child {
  font-size: 13px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin #widget-payments_chart .kodex-pattern-chart__labels {
  display: contents !important;
}

html body.app.admin #widget-payments_chart .kodex-pattern-bar,
html body.app.admin #widget-payments_chart .kodex-pattern-bar--week {
  width: 100% !important;
  min-width: 0 !important;
}

html body.app.admin #widget-payments_chart .kodex-pattern-bar__grid {
  display: grid !important;
  grid-template-columns: repeat(var(--pattern-cols, 40), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--pattern-rows, 1), 10px) !important;
  gap: 2px !important;
  width: 100% !important;
  min-height: 10px !important;
}

html body.app.admin #widget-payments_chart .kodex-pattern-bar__cell {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 10px !important;
  max-height: none !important;
  border-radius: 1px !important;
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 10%, var(--kodex-border-default, #d3d6e0)) !important;
}

html body.app.admin #widget-payments_chart .kodex-pattern-bar__cell--primary {
  background: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin #widget-payments_chart .kpf-kodex-chart-host,
html body.app.admin #widget-payments_chart .kds-chart-card__body {
  min-height: 0 !important;
  width: 100% !important;
}

html body.app.admin #widget-payments_chart .panel-body {
  padding: 14px 16px 18px !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-payments_chart .kodex-pattern-week__day,
html[data-theme='dark'] body.app.admin #widget-payments_chart .kodex-pattern-week__day {
  color: #c5c8d4 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-payments_chart .kodex-pattern-week__value,
html[data-theme='dark'] body.app.admin #widget-payments_chart .kodex-pattern-week__value {
  color: #e8e9ed !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-payments_chart .kodex-pattern-bar__cell,
html[data-theme='dark'] body.app.admin #widget-payments_chart .kodex-pattern-bar__cell {
  background: #2a2a32 !important;
}

html body.app.admin.kodex-crm-admin--ui-dark #widget-payments_chart .kodex-pattern-bar__cell--primary,
html[data-theme='dark'] body.app.admin #widget-payments_chart .kodex-pattern-bar__cell--primary {
  background: var(--kodex-action-primary, #001bff) !important;
}

@media (max-width: 640px) {
  html body.app.admin #widget-payments_chart .kodex-pattern-series__item,
  html body.app.admin #widget-payments_chart .kodex-pattern-series__item--week {
    grid-template-columns: 72px minmax(0, 1fr) 40px !important;
    gap: 8px !important;
  }
}

/* Zen ops — calendar + todos, then equal follow-up row */
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops .kds-dash-zone__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 15px !important;
  row-gap: 15px !important;
  column-gap: 15px !important;
  align-items: stretch !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-calendar {
  grid-column: span 8 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-todos {
  grid-column: span 4 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-user_data,
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-contracts_expiring,
html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-tickets_report {
  grid-column: span 4 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-zone--more .kds-dash-zone__grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 15px !important;
  row-gap: 15px !important;
  column-gap: 15px !important;
}

/* ========== Hero (SaaS panorama) ========== */
html body.app.admin.dashboard #wrapper .content .kds-dash-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr) !important;
  gap: 22px !important;
  align-items: start !important;
  width: 100% !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-hero__kpis,
html body.app.admin.dashboard #wrapper .content .kds-dash-hero__chart {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
}

/* KPI column fills donut height (basic folders + advanced grid) */
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__kpis {
  display: flex !important;
  flex-direction: column !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__kpis > .kds-saas-kpi-view,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__kpis > .kpf-folder-row {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view__tabs {
  flex: 0 0 auto !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kpf-folder-row:not([hidden]) {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: minmax(0, auto) !important;
  gap: 10px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-content: start !important;
  align-items: start !important;
  justify-items: stretch !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* Advanced gen cards: fill the locked KPI panel as a tight 3×2 */
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kds-saas-kpi-advanced:not([hidden]) {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: unset !important;
  gap: 10px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero .kds-saas-kpi-advanced:not([hidden]) > *,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero .kpf-folder-row:not([hidden]) > * {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero .kds-insp-saas-gen {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  padding: 14px 14px 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero .kds-insp-saas-gen .kds-insp-saas-gen__value,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero .kds-insp-saas-gen .kds-insp-card-dark__hero {
  font-size: clamp(18px, 2.2vw, 26px) !important;
  margin-top: auto !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-hero__chart {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: 360px !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart > .relative,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart > .kpf-kodex-chart-host {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 360px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Hidden KPI panels must never paint or reserve space */
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kpf-folder-row[hidden],
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kds-saas-kpi-advanced[hidden],
html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view > .kpf-folder-row[hidden],
html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view > .kds-saas-kpi-advanced[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  flex: 0 0 0 !important;
  grid-template-rows: none !important;
}

/* Folder cards keep motif aspect — text sits ON the shell; cells size to width */
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero .kpf-folder-row > .kds-insp-folder-storage,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero .kpf-folder-row > .top_stats_wrapper {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  align-self: start !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero .kds-insp-folder-storage__shell {
  aspect-ratio: 1868 / 1085 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Synced: KPI fill + chart column share the same locked height */
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-saas-kpi-view > .kpf-folder-row:not([hidden]),
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-saas-kpi-view > .kds-saas-kpi-advanced:not([hidden]),
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-dash-hero__chart,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-dash-hero__chart > .relative,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-dash-hero__chart .kpf-kodex-chart-host,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-dash-hero__chart .kds-insp-market-donut {
  height: var(--kds-saas-hero-panel-h, 360px) !important;
  min-height: var(--kds-saas-hero-panel-h, 360px) !important;
  max-height: var(--kds-saas-hero-panel-h, 360px) !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-saas-kpi-view > .kpf-folder-row:not([hidden]) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  align-content: start !important;
  align-items: start !important;
  grid-template-rows: none !important;
  grid-auto-rows: minmax(0, auto) !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-saas-kpi-view > .kds-saas-kpi-advanced:not([hidden]) {
  overflow: hidden !important;
  align-content: stretch !important;
  align-items: stretch !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: unset !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-dash-hero__chart,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-dash-hero__chart > .relative,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-dash-hero__chart .kpf-kodex-chart-host,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-dash-hero__chart .kds-insp-market-donut {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-dash-hero__chart .kds-insp-market-donut__head {
  flex: 0 0 auto !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats[data-kds-hero-synced='1'] .kds-dash-hero__chart .kds-insp-market-donut__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-content: center !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart .kds-insp-market-donut__chart {
  flex-shrink: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: min(280px, 100%) !important;
  overflow: visible !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart .kds-insp-market-donut__chart svg {
  overflow: visible !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-shrink: 1 !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart .kds-insp-market-donut__legend {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

/* Gallery/host shells must not clip the hero donut either */
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-saas_top_stats > .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats > .panel_s {
  overflow: visible !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero .kds-insp-saas-gen {
  height: 100% !important;
  min-height: 0 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-hero__chart {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-content: stretch !important;
  min-height: 360px !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart > .relative,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart > .kpf-kodex-chart-host {
  height: 100% !important;
  min-height: 360px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ghost Perfex wrappers must never occupy a hero column.
   Keep shells that still hold a pending (non-replaced) canvas so Chart/Kodex can mount. */
html body.app.admin.dashboard #wrapper .content .kds-dash-hero__chart > .relative:empty,
html body.app.admin.dashboard #wrapper .content .kds-dash-hero__chart > .relative:not(:has(.kpf-kodex-chart-host, .kds-insp-market-donut, svg, canvas:not(.kpf-chart-replaced))),
html body.app.admin.dashboard #wrapper .content .kds-dash-hero__chart > .relative:not(:has(.kds-insp-market-donut, .kpf-kodex-chart-host)):has(> canvas.kpf-chart-replaced):not(:has(.kpf-kodex-chart-host)),
html body.app.admin.dashboard #wrapper .content .kds-dash-hero__chart > [data-kds-hero-ghost='1'] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  flex: 0 0 0 !important;
  grid-column: 1 / -1 !important;
  position: absolute !important;
  opacity: 0 !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart .kpf-kodex-chart-host,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart .kds-insp-market-donut {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 360px !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart .kds-insp-market-donut {
  display: flex !important;
  flex-direction: column !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__kpis .kds-dash-hero,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__kpis .kds-dash-hero__kpis {
  display: contents !important;
}

/* Host widgets: no double chrome */
html body.app.admin.dashboard #wrapper .content .kds-dash-widget--host,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats,
html body.app.admin.dashboard #wrapper .content #widget-top_stats,
html body.app.admin.dashboard #wrapper .content #widget-finance_overview {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats > .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-finance_overview > .panel_s {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Folders must keep motif fill — never paint solid surface over them */
html body.app.admin.dashboard #wrapper .content .kds-insp-folder-storage,
html body.app.admin.dashboard #wrapper .content .top_stats_wrapper.kds-insp-folder-storage {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.app.admin.dashboard #wrapper .content .top_stats_wrapper:not(.kds-insp-folder-storage) {
  background: var(--kds-dash-surface) !important;
  border: 1px solid var(--kds-dash-border) !important;
  border-radius: var(--kds-dash-radius) !important;
}

/* ========== Widget surfaces ========== */
html body.app.admin.dashboard #wrapper .content .kds-dash-widget > .panel_s,
html body.app.admin.dashboard #wrapper .content .widget > .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-leads_chart .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-payments_chart .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-calendar .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-user_data .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-todos .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-contracts_expiring .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-workspace_alerts .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-tickets_report .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-goals .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-projects_activity .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-upcoming_events .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-tickets_chart .panel_s {
  background: var(--kds-dash-surface) !important;
  border: 1px solid var(--kds-dash-border) !important;
  border-radius: var(--kds-dash-radius) !important;
  box-shadow: var(--kds-dash-shadow) !important;
  overflow: hidden !important;
  height: 100% !important;
  transition: border-color 200ms var(--kds-dash-ease), box-shadow 200ms var(--kds-dash-ease), transform 200ms var(--kds-dash-ease) !important;
}

/* Calendar card must stay open — FullCalendar's "+N more" day popover and
   any event overflowing a compact day cell are absolutely positioned inside
   this card; clipping it here made busy days unreadable/unclickable. */
html body.app.admin.dashboard #wrapper .content #widget-calendar .panel_s {
  overflow: visible !important;
}

/* Leads / Projects charts — flat (no shadowbox on panel or .relative) */
html body.app.admin.dashboard #wrapper .content #widget-leads_chart,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart,
html body.app.admin.dashboard #wrapper .content #widget-leads_chart > .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart > .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-leads_chart .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart .panel_s {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

html body.app.admin.dashboard #wrapper .content #widget-leads_chart:hover > .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart:hover > .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-leads_chart:hover,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart:hover {
  box-shadow: none !important;
  transform: none !important;
  border-color: transparent !important;
}

html body.app.admin.dashboard #wrapper .content #widget-leads_chart .relative,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart .relative,
html body.app.admin.dashboard #wrapper .content #widget-leads_chart .kpf-kodex-chart-host,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart .kpf-kodex-chart-host,
html body.app.admin.dashboard #wrapper .content #widget-leads_chart .kds-insp-market-donut,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart .kds-insp-market-donut,
html body.app.admin.dashboard #wrapper .content #widget-leads_chart .kds-insp-status-prod,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart .kds-insp-status-prod,
html body.app.admin.dashboard #wrapper .content #widget-leads_chart .kds-insp-status-proc,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart .kds-insp-status-proc {
  box-shadow: none !important;
}

html body.app.admin.dashboard #wrapper .content .widget:not(#widget-leads_chart):not(#widget-projects_chart):hover > .panel_s {
  border-color: color-mix(in srgb, var(--kds-dash-cobalt) 30%, var(--kds-dash-border)) !important;
  box-shadow: var(--kds-dash-shadow-lift) !important;
  transform: translateY(-1px) !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-widget__head,
html body.app.admin.dashboard #wrapper .content .widget .panel-body > p.tw-font-medium {
  font-family: var(--kodex-font-display, "Neue Haas Grotesk Display", Satoshi, system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kds-dash-ink) !important;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--kds-dash-subtle) !important;
}

/* Hide Chart.js originals once Kodex skins mount (must beat earlier display:block) */
html body.app.admin.dashboard #wrapper .content canvas.kpf-chart-replaced,
html body.app.admin.dashboard #wrapper .content canvas[data-kpf-replaced='1'],
html body.app.admin.dashboard #wrapper .content #widget-leads_chart canvas.kpf-chart-replaced,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart canvas.kpf-chart-replaced,
html body.app.admin.dashboard #wrapper .content #widget-payments_chart canvas.kpf-chart-replaced,
html body.app.admin.dashboard #wrapper .content #widget-tickets_chart canvas.kpf-chart-replaced,
html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats canvas.kpf-chart-replaced {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Kodex chart hosts fill the tile — never force native canvases visible */
html body.app.admin.dashboard #wrapper .content .kpf-kodex-chart-host {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.app.admin.dashboard #wrapper .content #widget-leads_chart:has(.kpf-kodex-chart-host) .panel-body,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart:has(.kpf-kodex-chart-host) .panel-body,
html body.app.admin.dashboard #wrapper .content #widget-payments_chart:has(.kpf-kodex-chart-host) .panel-body,
html body.app.admin.dashboard #wrapper .content #widget-tickets_chart:has(.kpf-kodex-chart-host) .panel-body {
  min-height: 0 !important;
  position: relative !important;
}

html body.app.admin.dashboard #wrapper .content #widget-leads_chart:has(.kds-insp-status-prod) .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart:has(.kds-insp-status-prod) .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-payments_chart:has(.kpf-kodex-chart-host) .panel_s {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.app.admin.dashboard #wrapper .content #widget-leads_chart:has(.kds-insp-status-prod) .panel-body,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart:has(.kds-insp-status-prod) .panel-body,
html body.app.admin.dashboard #wrapper .content #widget-payments_chart:has(.kpf-kodex-chart-host) .panel-body {
  padding: 0 !important;
}

/* Native canvas only when no Kodex replacement exists */
html body.app.admin.dashboard #wrapper .content #widget-leads_chart:not(:has(.kpf-kodex-chart-host)) .panel-body,
html body.app.admin.dashboard #wrapper .content #widget-projects_chart:not(:has(.kpf-kodex-chart-host)) .panel-body,
html body.app.admin.dashboard #wrapper .content #widget-payments_chart:not(:has(.kpf-kodex-chart-host)) .panel-body,
html body.app.admin.dashboard #wrapper .content #widget-tickets_chart:not(:has(.kpf-kodex-chart-host)) .panel-body {
  min-height: 260px !important;
}

/* Calendar */
html body.app.admin.dashboard #wrapper .content #widget-calendar .panel-body {
  padding: 12px 14px 16px !important;
}

html body.app.admin.dashboard #wrapper .content #widget-calendar #calendar {
  min-height: 560px !important;
}

html body.app.admin.dashboard #wrapper .content #widget-calendar #calendar_filters,
html body.app.admin.dashboard #wrapper .content #widget-calendar .dt-loader {
  display: none !important;
}

html body.app.admin.dashboard #wrapper .content #widget-calendar .fc {
  font-family: inherit !important;
}

html body.app.admin.dashboard #wrapper .content #widget-calendar .fc .fc-toolbar-title {
  font-family: var(--kodex-font-display, "Neue Haas Grotesk Display", Satoshi, system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Activity feed */
html body.app.admin.dashboard #wrapper .content #widget-projects_activity .activity-feed,
html body.app.admin.dashboard #wrapper .content #widget-projects_activity .feed-item {
  border-color: var(--kds-dash-subtle) !important;
}

html body.app.admin.dashboard #wrapper .content #widget-projects_activity .feed-item {
  padding: 10px 0 !important;
}

/* Goals */
html body.app.admin.dashboard #wrapper .content #widget-goals .goal {
  border-color: var(--kds-dash-subtle) !important;
  margin-bottom: 10px !important;
}

/* Hide Perfex drag noise in Zen */
html body.app.admin.dashboard.kds-dash-zen #wrapper .content .widget-dragger {
  display: none !important;
}

/* Custom: one grip only — native .widget-dragger (Kodex chrome). No top-right button. */
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__chrome {
  display: none !important;
}

html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-custom-canvas > [id^='widget-'] {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-custom-canvas > [id^='widget-'] > :not(.kds-dash-tile__dragbar) {
  min-width: 0 !important;
}

/* In-flow drag rail */
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/*
 * Custom "Mover" button — clean secondary control
 * Beats system-chrome .widget-dragger absolute 42×46 chrome
 */
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .widget-dragger,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > button.widget-dragger,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .kds-dash-tile__handle {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d3d6e0 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #14141a !important;
  font-family: Satoshi, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 0 !important;
  text-decoration: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: none !important;
}

html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .widget-dragger:hover,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .widget-dragger:focus-visible {
  border-color: #001bff !important;
  color: #001bff !important;
  background: #ffffff !important;
  outline: none !important;
}

html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .widget-dragger:active {
  cursor: grabbing !important;
  background: #f5f5f5 !important;
}

/* Kill Perfex FA ::before (\f58e) — only our hand SVG */
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .widget-dragger::before,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .widget-dragger::after,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > button.widget-dragger::before,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > button.widget-dragger::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  speak: never !important;
}

html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-hand__icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  pointer-events: none !important;
}

html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-grip,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-grip__icon,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-grip__label {
  display: none !important;
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .widget-dragger,
html[data-theme='dark'] body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .widget-dragger {
  background: #1e1e24 !important;
  border-color: #3a3a48 !important;
  color: #e8e9ed !important;
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .widget-dragger:hover,
html[data-theme='dark'] body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .widget-dragger:hover {
  border-color: #001bff !important;
  color: #dbe4ff !important;
}

/* Floating label while dragging */
html body.app.admin .kds-dash-drag-ghost {
  position: fixed !important;
  z-index: 100000 !important;
  display: inline-flex !important;
  align-items: center !important;
  max-width: 280px !important;
  padding: 8px 12px !important;
  border: 1px solid #001bff !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #14141a !important;
  box-shadow: 0 8px 24px color-mix(in srgb, #14141a 12%, transparent) !important;
  font-family: Satoshi, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.kds-dash-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}

@media (max-width: 720px) {
  html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-tile__dragbar > .widget-dragger {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
  }
}

/* Grid/gallery: hide grip (layout is fixed spans) */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content .widget-dragger,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content .widget-dragger,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-tile__chrome,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content .kds-dash-tile__chrome {
  display: none !important;
}

/* ========== Grid + Gallery + Custom canvas (12-col magazine / bento) ========== */
html body.app.admin.dashboard #wrapper .content .kds-dash-board-canvas,
html body.app.admin.dashboard #wrapper .content .kds-dash-grid-canvas,
html body.app.admin.dashboard #wrapper .content .kds-dash-gallery-canvas,
html body.app.admin.dashboard #wrapper .content .kds-dash-custom-canvas,
html body.app.admin.dashboard #wrapper .content .kds-dash-free-canvas {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, auto) !important;
  grid-auto-flow: row dense !important;
  gap: 15px !important;
  row-gap: 15px !important;
  column-gap: 15px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 15px !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  overflow-x: clip !important;
  animation: kds-dash-rise 480ms var(--kds-dash-ease) both;
}

/* Grid magazine — fixed 15×15 internal rhythm */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-grid-canvas {
  gap: 15px !important;
  row-gap: 15px !important;
  column-gap: 15px !important;
  padding: 15px !important;
  grid-auto-rows: minmax(0, auto) !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-grid-canvas > [id^='widget-'] {
  align-self: stretch !important;
}

/* Align folder pulse + SaaS / finance hosts to the canvas edges (Grid + Gallery + Custom) */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-top_stats,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-saas_top_stats,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-finance_overview,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-top_stats,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-saas_top_stats,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content #widget-top_stats,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content #widget-saas_top_stats,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content #widget-finance_overview {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-top_stats > .row,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-top_stats > .row.kpf-folder-stats-host,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-top_stats .kpf-folder-stats-host,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-top_stats > .row,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-top_stats > .row.kpf-folder-stats-host,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-top_stats .kpf-folder-stats-host,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content #widget-top_stats > .row,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content #widget-top_stats > .row.kpf-folder-stats-host,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content #widget-top_stats .kpf-folder-stats-host {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-top_stats .kpf-folder-row,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-top_stats .kpf-folder-row,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content #widget-top_stats .kpf-folder-row {
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Custom canvas — full board width + balanced 15px inset on all sides */
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-custom-canvas,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-custom-canvas.kds-dash-board-canvas {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 15px !important;
  gap: 15px !important;
  row-gap: 15px !important;
  column-gap: 15px !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
}

html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-custom-canvas > [id^='widget-'] {
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

/* Gallery — same inset rhythm */
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content .kds-dash-gallery-canvas {
  padding: 15px !important;
  gap: 15px !important;
  row-gap: 15px !important;
  column-gap: 15px !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-saas_top_stats > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-saas_top_stats .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-saas_top_stats .panel-body.padding-10 {
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-saas_top_stats .kds-dash-hero {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/*
 * Grid board — one horizontal edge for every tile (leads, projects, finance,
 * payments, goals, calendar, todos, user, contracts, tickets, activity, events).
 */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-grid-canvas > [id^='widget-'] {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  min-width: 0 !important;
}

/* Empty / Perfex-hidden widgets must not reserve grid tracks */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-grid-canvas > [id^='widget-'].hide,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content .kds-dash-gallery-canvas > [id^='widget-'].hide {
  display: none !important;
  grid-column: unset !important;
  grid-row: unset !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* Fill the tile so paired rows share height */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-grid-canvas > [id^='widget-'] > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-grid-canvas > [id^='widget-'] > .finance-summary,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-grid-canvas > [id^='widget-'] > .finance-summary > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-grid-canvas > [id^='widget-'] > .row {
  height: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-grid-canvas > [id^='widget-'] > .row > [class*='col-'] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  float: none !important;
}

/* Shared content inset for standard panels (chart hosts stay flush via existing overrides) */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-leads_chart > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-projects_chart > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-payments_chart > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-calendar > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-todos > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-user_data > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-contracts_expiring > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_report > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-projects_activity > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_chart > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-goals .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-upcoming_events .panel_s {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-leads_chart .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-projects_chart .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-payments_chart .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-calendar .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-todos .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-user_data .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-contracts_expiring .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_report .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-projects_activity .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_chart .panel-body {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Finance band — flush with folders / SaaS (no extra inset on summary or totals) */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-finance_overview > .finance-summary,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-finance_overview > .finance-summary > .panel_s,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-finance_overview .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-finance_overview .panel-body.padding-15 {
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-finance_overview .kpf-finance-summary,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-finance_overview .home-summary,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-finance_overview #invoices_total,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-finance_overview #invoices_total.invoices-total-inline,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-finance_overview #invoices_total > dl {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Leads / Projects — equal tile + fill chart body */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-leads_chart .panel-body,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-projects_chart .panel-body {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-leads_chart .relative,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-projects_chart .relative,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-leads_chart .kpf-kodex-chart-host,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-projects_chart .kpf-kodex-chart-host {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-leads_chart,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-projects_chart {
  min-height: 340px !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-payments_chart,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-goals {
  min-height: 300px !important;
}

/* Goals — consistent inner padding */
html body.app.admin.dashboard #wrapper .content #widget-goals > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

html body.app.admin.dashboard #wrapper .content #widget-goals > .row > [class*='col-'] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  float: none !important;
}

html body.app.admin.dashboard #wrapper .content #widget-goals > .panel_s,
html body.app.admin.dashboard #wrapper .content #widget-goals .panel_s {
  padding: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard #wrapper .content #widget-goals .panel-body,
html body.app.admin.dashboard #wrapper .content #widget-goals .panel-body.padding-10 {
  padding: 16px 18px 18px !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard #wrapper .content #widget-goals .panel_s > .goal,
html body.app.admin.dashboard #wrapper .content #widget-goals .panel-body .goal {
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--kds-dash-border, #d3d6e0) !important;
  border-radius: var(--kds-dash-radius, 4px) !important;
  background: var(--kds-dash-elevated, #f5f5f5) !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard #wrapper .content #widget-goals .panel_s > .goal:last-child,
html body.app.admin.dashboard #wrapper .content #widget-goals .panel-body .goal:last-child {
  margin-bottom: 0 !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-calendar,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-todos {
  min-height: 420px !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-user_data {
  min-height: 420px !important;
}

/* User work — wide tile: tabs wrap, no horizontal scroller */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-user_data .horizontal-scrollable-tabs,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-user_data .panel-full-width-tabs {
  overflow: visible !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-user_data .horizontal-tabs {
  overflow: visible !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-user_data .nav-tabs-horizontal,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-user_data ul.nav-tabs {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Tickets report — readable table in wide tile */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_report {
  min-height: 360px !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_report #tickets-report-table-wrapper,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_report .dataTables_wrapper {
  overflow-x: auto !important;
  max-width: 100% !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_report table.dataTable,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_report table.table {
  width: 100% !important;
  min-width: 640px !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_report .dataTables_length,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_report .dt-buttons,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_report .dataTables_filter {
  margin-bottom: 8px !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-contracts_expiring,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-upcoming_events,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-projects_activity,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content #widget-tickets_chart {
  min-height: 280px !important;
}

html body.app.admin.dashboard #wrapper .content > .row.kds-dash-board--grid,
html body.app.admin.dashboard #wrapper .content > .row.kds-dash-board--gallery,
html body.app.admin.dashboard #wrapper .content > .row.kds-dash-board--custom {
  gap: 15px !important;
  row-gap: 15px !important;
  column-gap: 15px !important;
}

/* Grid / Gallery: no drag chrome */
html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-tile__chrome,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content .kds-dash-tile__chrome {
  display: none !important;
}

/* Balanced tile spans (shared Grid + Gallery + Custom) */
html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='hero'],
html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='full'] {
  grid-column: 1 / -1 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='wide'] {
  grid-column: span 8 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='half'] {
  grid-column: span 6 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='third'] {
  grid-column: span 4 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-row-span='2'] {
  grid-row: span 2 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-grid-canvas > [id^='widget-'],
html body.app.admin.dashboard #wrapper .content .kds-dash-gallery-canvas > [id^='widget-'],
html body.app.admin.dashboard #wrapper .content .kds-dash-custom-canvas > [id^='widget-'] {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-grid-canvas > [id^='widget-'] > .panel_s,
html body.app.admin.dashboard #wrapper .content .kds-dash-gallery-canvas > [id^='widget-'] > .panel_s,
html body.app.admin.dashboard #wrapper .content .kds-dash-custom-canvas > [id^='widget-'] > .panel_s {
  flex: 1 1 auto !important;
  height: 100% !important;
}

/* ========== Gallery bento (distribution only; 4px cards) ========== */
html body.app.admin.dashboard #wrapper .content .kds-dash-gallery-canvas,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content .kds-dash-gallery-canvas {
  gap: 15px !important;
  row-gap: 15px !important;
  column-gap: 15px !important;
  padding: 15px !important;
  box-sizing: border-box !important;
  grid-auto-rows: minmax(140px, auto) !important;
  align-items: stretch !important;
}

/* ========== Custom — same 15×15 board rhythm + edge inset ========== */
html body.app.admin.dashboard #wrapper .content .kds-dash-custom-canvas,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-custom-canvas {
  gap: 15px !important;
  row-gap: 15px !important;
  column-gap: 15px !important;
  padding: 15px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body.app.admin.dashboard.kds-dash-gallery #wrapper .content .kds-dash-gallery-canvas > [id^='widget-'] {
  align-self: stretch !important;
}

html body.app.admin.dashboard.kds-dash-gallery #wrapper .content .kds-dash-gallery-canvas > [id^='widget-'] > .panel_s,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-top_stats .kpf-folder-stats-host,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-top_stats .kpf-folder-row {
  border-radius: 4px !important;
}

html body.app.admin.dashboard.kds-dash-gallery #wrapper .content .kds-dash-gallery-canvas > [id^='widget-'] > .panel_s {
  overflow: hidden !important;
  border-radius: 4px !important;
}

/* Host shells stay open so nested finance / hero cells read as mosaic tiles */
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-saas_top_stats > .panel_s,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview > .panel_s,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-top_stats > .panel_s {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* SaaS hero: KPIs + chart as two aligned gallery cells */
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-saas_top_stats .kds-dash-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-saas_top_stats .kds-dash-hero__kpis,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-saas_top_stats .kds-saas-kpi-advanced,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart > .relative,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart > .kpf-kodex-chart-host {
  border-radius: 4px !important;
  min-width: 0 !important;
}

/* Folders strip as one gallery tile */
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-top_stats {
  min-height: 0 !important;
}

html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-top_stats .kpf-folder-row {
  margin: 0 !important;
}

/* Finance: invoice totals + overview panels as bento subgrid */
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .panel-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview #invoices_total > dl {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
}

html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview #invoices_total > dl > div {
  border-radius: 4px !important;
  margin: 0 !important;
  min-width: 0 !important;
}

html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview #invoices_total > dl > div.last\:tw-col-span-2,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview #invoices_total > dl > div:last-child {
  grid-column: auto !important;
}

html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .kpf-finance-summary,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
  width: 100% !important;
}

html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .kpf-finance-summary > [class*='col-'],
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > [class*='col-'],
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > #delivery_notes_widget,
html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > #purhcase_orders_widget {
  grid-column: span 4 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  border-radius: 4px !important;
  min-width: 0 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-tile {
  position: relative !important;
  min-width: 0 !important;
  align-self: start !important;
}

html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-grid-canvas > .kds-dash-tile,
html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-grid-canvas > [id^='widget-'] {
  align-self: stretch !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-tile__chrome {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 5 !important;
  display: none !important; /* retired — use .widget-dragger only */
}

html body.app.admin.dashboard #wrapper .content .kds-dash-tile:hover .kds-dash-tile__chrome,
html body.app.admin.dashboard #wrapper .content .kds-dash-tile--dragging .kds-dash-tile__chrome {
  opacity: 1 !important;
  transform: none !important;
}

/* Dashboard (all modes): grip outside card, hover-only */
html body.app.admin.dashboard #wrapper .content [id^='widget-'] {
  position: relative !important;
  overflow: visible !important;
}

html body.app.admin.dashboard #wrapper .content [id^='widget-'] > .panel_s,
html body.app.admin.dashboard #wrapper .content [id^='widget-'] .panel_s.kds-dash-widget {
  position: relative !important;
  overflow: visible !important;
}

html body.app.admin.dashboard #wrapper .content .widget-dragger {
  position: absolute !important;
  top: 14px !important;
  left: -26px !important;
  right: auto !important;
  z-index: 12 !important;
  width: 20px !important;
  height: 32px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease, visibility 0.15s ease !important;
}

html body.app.admin.dashboard #wrapper .content [id^='widget-']:hover .widget-dragger,
html body.app.admin.dashboard #wrapper .content .panel_s:hover .widget-dragger,
html body.app.admin.dashboard #wrapper .content [id^='widget-']:focus-within .widget-dragger,
html body.app.admin.dashboard #wrapper .content .widget-dragger:active,
html body.app.admin.dashboard #wrapper .content .widget-dragger:focus-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


html body.app.admin.dashboard #wrapper .content .kds-dash-tile__handle:not(.widget-dragger) {
  display: none !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-tile--dragging {
  opacity: 0.72 !important;
  z-index: 8 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-tile--drop > .panel_s {
  outline: 2px solid color-mix(in srgb, var(--kds-dash-cobalt) 55%, transparent) !important;
  outline-offset: 2px !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-custom-canvas--dragging {
  cursor: grabbing !important;
}

/* While dragging: park the source tile out of the grid so the Drop slot owns the cell */
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-custom-canvas > .kds-dash-tile--dragging,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-custom-canvas > [id^='widget-'].kds-dash-tile--dragging {
  position: fixed !important;
  left: -10000px !important;
  top: 0 !important;
  width: 320px !important;
  max-width: 40vw !important;
  height: auto !important;
  min-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  grid-column: unset !important;
  grid-row: unset !important;
  z-index: -1 !important;
}

/* Drop placeholder — dashed slot that displaces neighbors in the 12-col grid */
html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-drop-slot {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 16px !important;
  min-width: 0 !important;
  min-height: 140px !important;
  border: 2px dashed color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 55%, #d3d6e0) !important;
  border-radius: 4px !important;
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 6%, transparent),
      color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 6%, transparent) 8px,
      color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 2%, transparent) 8px,
      color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 2%, transparent) 16px
    ) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 8%, transparent) !important;
  pointer-events: none !important;
  animation: kds-dash-drop-pulse 1.1s var(--kds-dash-ease, ease) infinite alternate;
}

html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-drop-slot__label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 6px 14px !important;
  border: 1px solid color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 35%, #d3d6e0) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, #fff 88%, var(--kds-dash-cobalt, #001bff)) !important;
  color: var(--kds-dash-cobalt, #001bff) !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 1px 0 color-mix(in srgb, #14141a 5%, transparent) !important;
}

@keyframes kds-dash-drop-pulse {
  from {
    border-color: color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 40%, #d3d6e0);
  }
  to {
    border-color: color-mix(in srgb, var(--kds-dash-cobalt, #001bff) 75%, #d3d6e0);
  }
}

html body.app.admin.dashboard.kodex-crm-admin--ui-dark.kds-dash-custom #wrapper .content .kds-dash-drop-slot__label,
html[data-theme='dark'] body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-drop-slot__label {
  background: color-mix(in srgb, #14141a 80%, var(--kds-dash-cobalt, #001bff)) !important;
  color: #dbe4ff !important;
}

/* In custom, host shells still transparent; nested panels keep surface */
html body.app.admin.dashboard.kds-dash-custom #wrapper .content #widget-saas_top_stats > .panel_s,
html body.app.admin.dashboard.kds-dash-custom #wrapper .content #widget-finance_overview > .panel_s {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ========== Motion ========== */
@keyframes kds-dash-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone,
  html body.app.admin.dashboard #wrapper .content .kds-dash-custom-canvas {
    animation: none !important;
  }
}

/* ========== Shared stage: never force horizontal scroll ========== */
html body.app.admin.dashboard #wrapper .content,
html body.app.admin.admin_dashboard #wrapper .content {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard #wrapper .content > .row.kds-dash-board,
html body.app.admin.dashboard #wrapper .content > .row.kds-dash-board--grid,
html body.app.admin.dashboard #wrapper .content > .row.kds-dash-board--gallery,
html body.app.admin.dashboard #wrapper .content > .row.kds-dash-board--zen,
html body.app.admin.dashboard #wrapper .content > .row.kds-dash-board--custom {
  min-width: 0 !important;
  max-width: min(1560px, 100%) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-board-canvas,
html body.app.admin.dashboard #wrapper .content .kds-dash-grid-canvas,
html body.app.admin.dashboard #wrapper .content .kds-dash-gallery-canvas,
html body.app.admin.dashboard #wrapper .content .kds-dash-custom-canvas,
html body.app.admin.dashboard #wrapper .content .kds-dash-free-canvas,
html body.app.admin.dashboard #wrapper .content .kds-dash-zone,
html body.app.admin.dashboard #wrapper .content .kds-dash-zone__grid,
html body.app.admin.dashboard #wrapper .content .kds-dash-tile,
html body.app.admin.dashboard #wrapper .content [id^='widget-'] {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ========== Responsive — Grid / Gallery / Zen / Custom ========== */
@media (max-width: 1400px) {
  html body.app.admin.dashboard #wrapper .content,
  html body.app.admin.admin_dashboard #wrapper .content {
    padding: 28px 28px 72px !important;
  }

  html body.app.admin.dashboard #wrapper .content > .row,
  html body.app.admin.dashboard #wrapper .content > .row.kds-dash-board {
    max-width: 100% !important;
  }
}

@media (max-width: 1200px) {
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-calendar,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-todos,
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='wide'] {
    grid-column: 1 / -1 !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-user_data,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-contracts_expiring,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-tickets_report,
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='third'] {
    grid-column: span 6 !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-leads_chart,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-projects_chart {
    grid-column: span 6 !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-hero,
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-saas_top_stats .kds-dash-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) !important;
    gap: 16px !important;
  }

  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content .kds-dash-tile[data-kds-row-span] {
    grid-row: auto !important;
  }

  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .kpf-finance-summary > [class*='col-'],
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > [class*='col-'],
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > #delivery_notes_widget,
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > #purhcase_orders_widget {
    grid-column: span 6 !important;
  }

  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview #invoices_total > dl {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  html body.app.admin.dashboard #wrapper .content,
  html body.app.admin.admin_dashboard #wrapper .content {
    --kds-dash-zone-gap: 15px;
    --kds-dash-gap: 15px;
    padding: 22px 18px 64px !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar,
  html body.app.admin.dashboard #wrapper .content .kds-dash-masthead {
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__modes {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__btn {
    flex: 1 1 0 !important;
    width: 100% !important;
    text-align: center !important;
    min-width: 0 !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-zone__head {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  /* Hero stacks in every mode: KPIs then donut */
  html body.app.admin.dashboard #wrapper .content .kds-dash-hero,
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-saas_top_stats .kds-dash-hero,
  html body.app.admin.dashboard.kds-dash-zen #wrapper .content .kds-dash-hero,
  html body.app.admin.dashboard.kds-dash-grid #wrapper .content .kds-dash-hero,
  html body.app.admin.dashboard.kds-dash-custom #wrapper .content .kds-dash-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__kpis,
  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart,
  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart > .relative,
  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart .kpf-kodex-chart-host,
  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-dash-hero__chart .kds-insp-market-donut,
  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kpf-folder-row:not([hidden]),
  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kds-saas-kpi-advanced:not([hidden]) {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }

  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kpf-folder-row:not([hidden]),
  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kds-saas-kpi-advanced:not([hidden]),
  html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kpf-folder-row:not([hidden]),
  html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kds-saas-kpi-advanced:not([hidden]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-leads_chart,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-projects_chart,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-payments_chart,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-user_data,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-todos,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-contracts_expiring,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops #widget-tickets_report,
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='hero'],
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='full'],
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='wide'],
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='half'],
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='third'] {
    grid-column: 1 / -1 !important;
  }

  /* Grid + Gallery + Custom: drop to 6 columns */
  html body.app.admin.dashboard #wrapper .content .kds-dash-board-canvas,
  html body.app.admin.dashboard #wrapper .content .kds-dash-grid-canvas,
  html body.app.admin.dashboard #wrapper .content .kds-dash-gallery-canvas,
  html body.app.admin.dashboard #wrapper .content .kds-dash-custom-canvas,
  html body.app.admin.dashboard #wrapper .content .kds-dash-free-canvas {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 15px !important;
    row-gap: 15px !important;
    column-gap: 15px !important;
  }

  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .kpf-finance-summary,
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .kpf-finance-summary > [class*='col-'],
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > [class*='col-'],
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > #delivery_notes_widget,
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > #purhcase_orders_widget {
    grid-column: span 3 !important;
  }
}

@media (max-width: 900px) {
  html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__modes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-zone__purpose {
    font-size: 18px !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-zone__hint {
    font-size: 12px !important;
  }

  html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kpf-folder-row:not([hidden]),
  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kpf-folder-row:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kds-saas-kpi-advanced:not([hidden]),
  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kds-saas-kpi-advanced:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, auto)) !important;
  }

  html body.app.admin #widget-top_stats .kpf-folder-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body.app.admin.dashboard #wrapper .content #widget-calendar #calendar {
    min-height: 440px !important;
  }

  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview #invoices_total > dl {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .kpf-finance-summary > [class*='col-'],
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > [class*='col-'],
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > #delivery_notes_widget,
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > #purhcase_orders_widget {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 720px) {
  html body.app.admin.dashboard #wrapper .content,
  html body.app.admin.admin_dashboard #wrapper .content {
    --kds-dash-zone-gap: 15px;
    --kds-dash-gap: 15px;
    padding: 16px 12px 56px !important;
  }

  html body.app.admin #widget-top_stats .kpf-folder-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    --kpf-top-stats-cols: 2 !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar {
    padding-bottom: 14px !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__btn {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-zone__purpose {
    font-size: 17px !important;
  }

  /* All modes → single column */
  html body.app.admin.dashboard #wrapper .content .kds-dash-board-canvas,
  html body.app.admin.dashboard #wrapper .content .kds-dash-grid-canvas,
  html body.app.admin.dashboard #wrapper .content .kds-dash-gallery-canvas,
  html body.app.admin.dashboard #wrapper .content .kds-dash-custom-canvas,
  html body.app.admin.dashboard #wrapper .content .kds-dash-free-canvas,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth .kds-dash-zone__grid,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops .kds-dash-zone__grid,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--more .kds-dash-zone__grid,
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .kpf-finance-summary,
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 15px !important;
    row-gap: 15px !important;
    column-gap: 15px !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='hero'],
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='full'],
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='wide'],
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='half'],
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-span='third'],
  html body.app.admin.dashboard #wrapper .content .kds-dash-tile[data-kds-row-span],
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-leads_chart,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-projects_chart,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--growth #widget-payments_chart,
  html body.app.admin.dashboard #wrapper .content .kds-dash-zone--ops [id^='widget-'],
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .kpf-finance-summary > [class*='col-'],
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > [class*='col-'],
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > #delivery_notes_widget,
  html body.app.admin.dashboard.kds-dash-gallery #wrapper .content #widget-finance_overview .home-summary > #purhcase_orders_widget {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  html body.app.admin.dashboard #wrapper .content #widget-calendar #calendar {
    min-height: 360px !important;
  }

  html body.app.admin.dashboard #wrapper .content .widget .panel-body.padding-10,
  html body.app.admin.dashboard #wrapper .content .widget .panel-body.padding-15 {
    padding: 12px !important;
  }

  html body.app.admin #widget-payments_chart .kodex-pattern-series__item,
  html body.app.admin #widget-payments_chart .kodex-pattern-series__item--week {
    grid-template-columns: 64px minmax(0, 1fr) 36px !important;
    gap: 8px !important;
  }

  html body.app.admin #widget-payments_chart .kodex-pattern-bar__grid {
    grid-template-rows: 8px !important;
  }

  html body.app.admin #widget-payments_chart .kodex-pattern-bar__cell {
    height: 8px !important;
  }

  html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view__tabs {
    width: 100% !important;
  }

  html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view__tabs button {
    flex: 1 1 0 !important;
  }

  html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kds-insp-folder-storage__shell {
    min-height: 110px !important;
  }

  html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen .kds-insp-saas-gen__value,
  html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen .kds-insp-card-dark__hero {
    font-size: 22px !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-insp-market-donut__body {
    grid-template-columns: 1fr !important;
  }

  /* Zen: status / overview heads stack cleanly */
  html body.app.admin.dashboard.kds-dash-zen #wrapper .content .kds-dash-zone__head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  html body.app.admin.dashboard.kds-dash-zen #wrapper .content .kds-dash-zone__copy {
    padding-left: 10px !important;
  }
}

@media (max-width: 480px) {
  html body.app.admin.dashboard #wrapper .content,
  html body.app.admin.admin_dashboard #wrapper .content {
    padding: 12px 10px 48px !important;
  }

  html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__modes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kpf-folder-row:not([hidden]),
  html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kds-saas-kpi-advanced:not([hidden]),
  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kpf-folder-row:not([hidden]),
  html body.app.admin.dashboard #wrapper .content #widget-saas_top_stats .kds-saas-kpi-view > .kds-saas-kpi-advanced:not([hidden]),
  html body.app.admin #widget-top_stats .kpf-folder-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.app.admin #widget-payments_chart .kodex-pattern-series__item,
  html body.app.admin #widget-payments_chart .kodex-pattern-series__item--week {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  html body.app.admin #widget-payments_chart .kodex-pattern-week__value {
    text-align: left !important;
  }

  html body.app.admin.dashboard #wrapper .content #widget-calendar #calendar {
    min-height: 320px !important;
  }
}


/* StatusShare remount + dense lead pipelines */
html body.app.admin .kpf-kodex-chart-host[data-kds-dense='1'] .kds-insp-status-prod .kds-insp-prod__rings {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  gap: 10px 8px !important;
}
html body.app.admin .kpf-kodex-chart-host[data-kds-dense='1'] .kds-insp-prod__ring-visual {
  width: 56px !important;
  height: 56px !important;
}
html body.app.admin .kpf-kodex-chart-host[data-kds-dense='1'] .kds-insp-prod__ring-visual strong {
  font-size: 11px !important;
}
html body.app.admin .kpf-kodex-chart-host[data-kds-dense='1'] .kds-insp-prod__ring-label {
  font-size: 10px !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
}
html body.app.admin .kpf-kodex-chart-host[data-kds-empty='1'] .kds-insp-status-prod__total {
  opacity: 0.72 !important;
}
html body.app.admin.dashboard #wrapper .content #widget-leads_chart canvas.chart:not(.kpf-chart-replaced),
html body.app.admin.dashboard #wrapper .content #widget-projects_chart canvas.chart:not(.kpf-chart-replaced) {
  max-height: 220px !important;
}

/* === kpf-notify-host-fix === */
html body.app.admin #header li.notifications-wrapper,
html body.app.admin #header li.header-notifications,
html body.app.admin #header .notifications-wrapper {
  background: transparent !important;
  box-shadow: none !important;
}
html body.app.admin #header li.notifications-wrapper > a.notifications-icon,
html body.app.admin #header li.notifications-wrapper > a.kodex-crm-admin__utility,
html body.app.admin #header li.header-notifications > a {
  background: color-mix(in srgb, #fff 6%, transparent) !important;
  color: color-mix(in srgb, #fff 78%, transparent) !important;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent) !important;
  box-shadow: none !important;
}
html body.app.admin #header li.notifications-wrapper > a.notifications-icon i,
html body.app.admin #header li.notifications-wrapper > a.notifications-icon svg,
html body.app.admin #header li.notifications-wrapper > a.notifications-icon .kpf-icon,
html body.app.admin #header li.header-notifications > a i,
html body.app.admin #header li.header-notifications > a svg,
html body.app.admin #header li.header-notifications > a .kpf-icon {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}

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

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

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

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

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

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

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

/* === kpf-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;
}

/* === kpf-table-ink === */
/* DataTables — black / #f7f7f7 text; hover cobalt (light) or secondary (dark) */
html body.app.admin .dataTables_wrapper table tbody td,
html body.app.admin table.dataTable tbody td,
html body.app.admin .dataTables_wrapper .row-options,
html body.app.admin table.dataTable .row-options {
  color: var(--kpf-table-link, #000000) !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 .row-options a,
html body.app.admin table.dataTable .row-options a,
html body.app.admin .dataTables_wrapper table tbody a.tw-font-medium,
html body.app.admin #clients_wrapper table tbody a,
html body.app.admin #clients_wrapper .row-options,
html body.app.admin #clients_wrapper .row-options a {
  color: var(--kpf-table-link, #000000) !important;
  text-decoration: none !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 .row-options a:hover,
html body.app.admin table.dataTable .row-options a: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 #clients_wrapper .row-options a:hover {
  color: var(--kpf-table-link-hover, #001bff) !important;
  text-decoration: underline !important;
}

/* === kpf-datatable list polish === */
html body.app.admin .kpf-dt-panel,
html body.app.admin .kpf-dt-panel-body,
html body.app.admin .kpf-dt-table-host,
html body.app.admin .dataTables_wrapper.kpf-dt {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
html body.app.admin .kpf-dt table.dataTable,
html body.app.admin .kpf-dt .kpf-dt-table {
  table-layout: fixed !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* StatusShare remount + dense lead pipelines (v2.10.64) */
html body.app.admin .kpf-kodex-chart-host[data-kds-dense='1'] .kds-insp-status-prod .kds-insp-prod__rings {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  gap: 10px 8px !important;
}
html body.app.admin .kpf-kodex-chart-host[data-kds-dense='1'] .kds-insp-prod__ring-visual {
  width: 56px !important;
  height: 56px !important;
}
html body.app.admin .kpf-kodex-chart-host[data-kds-dense='1'] .kds-insp-prod__ring-label {
  font-size: 10px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
}
html body.app.admin.dashboard #wrapper .content #widget-leads_chart canvas.chart:not(.kpf-chart-replaced),
html body.app.admin.dashboard #wrapper .content #widget-projects_chart canvas.chart:not(.kpf-chart-replaced) {
  max-height: 220px !important;
}