/**
 * 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,
html body.app.admin:not(.dashboard):not(.admin_dashboard):not(.kodex-dash-v2-page):not(.kodex-dash-v3-page) #wrapper .content .kds-dash-toolbar__experiences {
  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,
html body.app.admin.dashboard #wrapper .content .kds-dash-toolbar__experiences,
html body.app.admin.admin_dashboard #wrapper .content .kds-dash-toolbar__experiences,
html body.app.admin.kodex-dash-v2-page #wrapper .content .kds-dash-toolbar__experiences,
html body.app.admin.kodex-dash-v3-page #wrapper .content .kds-dash-toolbar__experiences,
html body.app.admin.kodex-dash-v2-page #wrapper .content .kds-dash-toolbar__modes,
html body.app.admin.kodex-dash-v3-page #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,
html body.app.admin.kodex-dash-v2-page #wrapper .content .kds-dash-toolbar__btn,
html body.app.admin.kodex-dash-v3-page #wrapper .content .kds-dash-toolbar__btn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !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;
  text-decoration: none !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,
html body.app.admin.kodex-dash-v2-page #wrapper .content .kds-dash-toolbar__btn:hover,
html body.app.admin.kodex-dash-v3-page #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,
html body.app.admin.kodex-dash-v2-page #wrapper .content .kds-dash-toolbar__btn--active,
html body.app.admin.kodex-dash-v3-page #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;
}