/**
 * FolderStorageCard IS the card — motif shell only, no rectangular chrome.
 * Spec: packages/@kodex/ds/src/inspiration/FolderStorageCard
 */

html body.app.admin {
  --kds-insp-folder-ratio: 1868 / 1085;
  --kds-insp-folder-inset-x: 3.5%;
  /* Tab step in motif ≈ 81.845 / 1085 — content starts in the pocket */
  --kds-insp-folder-inset-top: 8.5%;
  --kds-insp-folder-inset-bottom: 3.5%;
  --kds-insp-folder-pad: 12px;
}

/* Demo row — SaaS KPIs: responsive motif grid, text on folder
   (clients summary uses its own 6-col rules below) */
html body.app.admin #widget-saas_top_stats .kpf-folder-row:not([hidden]),
html body.app.admin .kpf-folder-row:not([hidden]):not(.kpf-clients-summary__folders) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, auto) !important;
  gap: 12px !important;
  align-items: start !important;
  align-content: start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 0 8px !important;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.app.admin #widget-saas_top_stats .kpf-folder-row > .kds-insp-folder-storage,
html body.app.admin .kpf-folder-row:not(.kpf-clients-summary__folders) > .kds-insp-folder-storage {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  float: none !important;
}

@media (max-width: 1100px) {
  html body.app.admin #widget-saas_top_stats .kpf-folder-row:not([hidden]),
  html body.app.admin .kpf-folder-row:not([hidden]):not(.kpf-clients-summary__folders) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  html body.app.admin #widget-saas_top_stats .kpf-folder-row:not([hidden]),
  html body.app.admin .kpf-folder-row:not([hidden]):not(.kpf-clients-summary__folders) {
    grid-template-columns: 1fr !important;
  }
}

html body.app.admin #widget-saas_top_stats .kpf-folder-col-empty,
html body.app.admin #widget-top_stats .kpf-folder-col-empty,
html body.app.admin .kpf-folder-col-empty {
  display: none !important;
}

/* CRM quick stats — motif folders in one row */
html body.app.admin #widget-top_stats.widget,
html body.app.admin #widget-top_stats.kpf-folder-stats-widget {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.app.admin #widget-top_stats > .row.kpf-folder-stats-host,
html body.app.admin #widget-top_stats .kpf-folder-stats-host {
  display: block !important;
  margin: 0 !important;
  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;
  background: transparent !important;
}

/* Respond to widget width (dashboard canvas), not only viewport */
html body.app.admin #widget-top_stats,
html body.app.admin #widget-top_stats.kpf-folder-stats-widget {
  container-type: inline-size;
  container-name: top-stats;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
}

/* Same cell size as SaaS hero folders — 4 columns (incl. iPad landscape); 2 on mobile */
html body.app.admin #widget-top_stats .kpf-folder-row {
  --kpf-top-stats-cols: 4;
  display: grid !important;
  grid-template-columns: repeat(var(--kpf-top-stats-cols), minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 0 12px !important;
  float: none !important;
  box-sizing: border-box !important;
}

html body.app.admin #widget-top_stats .kpf-folder-row > .kds-insp-folder-storage {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Mobile / narrow phone only — 2 columns (not tablet landscape ~800–1100px) */
@container top-stats (max-width: 640px) {
  .kpf-folder-row {
    --kpf-top-stats-cols: 2 !important;
  }
}

/* Viewport fallback */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    html body.app.admin #widget-top_stats .kpf-folder-row {
      --kpf-top-stats-cols: 2 !important;
    }
  }
}

/* Outer SaaS panel — transparent around folders (motif is the card) */
html body.app.admin #widget-saas_top_stats.widget > .panel_s,
html body.app.admin #widget-saas_top_stats .panel_s {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.app.admin #widget-saas_top_stats .panel_s::before,
html body.app.admin #widget-saas_top_stats .panel_s::after {
  content: none !important;
  display: none !important;
}

html body.app.admin #widget-saas_top_stats .panel-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 12px !important;
  overflow: visible !important;
}

/* Grid: match folder / SaaS horizontal edges to the canvas */
html body.app.admin.dashboard.kds-dash-grid #widget-saas_top_stats .panel-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body.app.admin #widget-saas_top_stats > .panel_s > .panel-body > hr {
  display: none !important;
}

/* —— FolderStorageCard root = motif only —— */
html body.app.admin .kds-insp-folder-storage,
html body.app.admin .kds-insp-folder-storage.kpf-folder-card,
html body.app.admin .top_stats_wrapper.kds-insp-folder-storage {
  position: relative !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
  gap: 0 !important;
  flex-direction: unset !important;
  perspective: 920px;
  perspective-origin: 50% 0%;
  transform-style: preserve-3d;
}

html body.app.admin .kds-insp-folder-storage::before,
html body.app.admin .kds-insp-folder-storage::after,
html body.app.admin .top_stats_wrapper.kds-insp-folder-storage::before,
html body.app.admin .top_stats_wrapper.kds-insp-folder-storage::after {
  content: none !important;
  display: none !important;
}

.kds-insp-folder-storage--primary {
  --kds-insp-folder-fill: #ffffff;
  --kds-insp-folder-fg: #14141a;
  --kds-insp-folder-muted: #8a8d8f;
  --kds-insp-folder-bar-track: #d9dadc;
  --kds-insp-folder-bar-fill: #001bff;
  --kds-insp-folder-icon-bg: color-mix(in srgb, #001bff 10%, #fff);
  --kds-insp-folder-icon-fg: #001bff;
}

.kds-insp-folder-storage--navy {
  --kds-insp-folder-fill: #001d3a;
  --kds-insp-folder-fg: #ffffff;
  --kds-insp-folder-muted: rgba(255, 255, 255, 0.62);
  --kds-insp-folder-bar-track: rgba(255, 255, 255, 0.22);
  --kds-insp-folder-bar-fill: #9db0ff;
  --kds-insp-folder-icon-bg: rgba(255, 255, 255, 0.12);
  --kds-insp-folder-icon-fg: #ffffff;
}

.kds-insp-folder-storage--blue {
  --kds-insp-folder-fill: #001bff;
  --kds-insp-folder-fg: #ffffff;
  --kds-insp-folder-muted: rgba(255, 255, 255, 0.72);
  --kds-insp-folder-bar-track: rgba(255, 255, 255, 0.28);
  --kds-insp-folder-bar-fill: #ffffff;
  --kds-insp-folder-icon-bg: rgba(255, 255, 255, 0.16);
  --kds-insp-folder-icon-fg: #ffffff;
}

html body.app.admin.kodex-crm-admin--ui-dark .kds-insp-folder-storage--primary {
  --kds-insp-folder-fill: #1e1e24;
  --kds-insp-folder-fg: #ffffff;
  --kds-insp-folder-muted: rgba(255, 255, 255, 0.62);
  --kds-insp-folder-bar-track: rgba(255, 255, 255, 0.22);
  --kds-insp-folder-bar-fill: #9db0ff;
  --kds-insp-folder-icon-bg: rgba(255, 255, 255, 0.1);
  --kds-insp-folder-icon-fg: #ffffff;
}

/* Motif shell = the card surface */
.kds-insp-folder-storage__shell {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1868 / 1085 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--kds-insp-folder-fill);
  filter: drop-shadow(0 8px 20px rgba(20, 20, 26, 0.12));
  overflow: visible !important;
  container-type: inline-size;
  container-name: folder-shell;
  /* Hinge at the tab — idle face flat toward the viewer */
  transform-origin: 50% 7.5%;
  transform: rotateX(0deg) translate3d(0, 0, 0);
  transition:
    transform 0.38s cubic-bezier(0.22, 0.9, 0.28, 1),
    filter 0.38s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Open forwards on hover: body swings toward the camera from the tab */
html body.app.admin .kds-insp-folder-storage:hover > .kds-insp-folder-storage__shell,
html body.app.admin .kds-insp-folder-storage:focus-within > .kds-insp-folder-storage__shell,
html body.app.admin a:hover > .kds-insp-folder-storage > .kds-insp-folder-storage__shell,
html body.app.admin a:focus-visible > .kds-insp-folder-storage > .kds-insp-folder-storage__shell,
html body.app.admin .kpf-quick-stats-folder:hover .kds-insp-folder-storage__shell,
html body.app.admin .kpf-quick-stats-folder:focus-visible .kds-insp-folder-storage__shell {
  transform: rotateX(-18deg) translate3d(0, 4px, 18px);
  filter: drop-shadow(0 22px 32px rgba(20, 20, 26, 0.28));
}

@media (prefers-reduced-motion: reduce) {
  .kds-insp-folder-storage__shell {
    transition: none !important;
    transform: none !important;
  }

  html body.app.admin .kds-insp-folder-storage:hover > .kds-insp-folder-storage__shell,
  html body.app.admin .kds-insp-folder-storage:focus-within > .kds-insp-folder-storage__shell,
  html body.app.admin a:hover > .kds-insp-folder-storage > .kds-insp-folder-storage__shell,
  html body.app.admin a:focus-visible > .kds-insp-folder-storage > .kds-insp-folder-storage__shell,
  html body.app.admin .kpf-quick-stats-folder:hover .kds-insp-folder-storage__shell,
  html body.app.admin .kpf-quick-stats-folder:focus-visible .kds-insp-folder-storage__shell {
    transform: none !important;
    filter: drop-shadow(0 8px 20px rgba(20, 20, 26, 0.12));
  }
}

.kds-insp-folder-storage__motif {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.kds-insp-folder-storage__motif path {
  fill: currentColor !important;
  stroke: none !important;
}

/* Content sits ON the motif — label top-left aligned with icon */
.kds-insp-folder-storage__header {
  position: absolute !important;
  z-index: 1 !important;
  top: calc(var(--kds-insp-folder-inset-top) + var(--kds-insp-folder-pad)) !important;
  left: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
  right: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.kds-insp-folder-storage__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 4px !important;
  background: var(--kds-insp-folder-icon-bg) !important;
  color: var(--kds-insp-folder-icon-fg) !important;
  flex: 0 0 34px !important;
  flex-shrink: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.kds-insp-folder-storage__icon svg,
.kds-insp-folder-storage__icon i {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  font-size: 14px !important;
  color: inherit !important;
  stroke: currentColor !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: block !important;
}

.kds-insp-folder-storage__count {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--kds-insp-folder-fg) !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: block !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.25 !important;
  font-family: Satoshi, system-ui, sans-serif !important;
  background: transparent !important;
  border: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}

.kds-insp-folder-storage__footer {
  position: absolute !important;
  z-index: 1 !important;
  top: auto !important;
  left: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
  right: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
  bottom: calc(var(--kds-insp-folder-inset-bottom) + var(--kds-insp-folder-pad)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.kds-insp-folder-storage__usage {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--kds-insp-folder-fg) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  font-family: Satoshi, system-ui, sans-serif !important;
  background: transparent !important;
  letter-spacing: -0.02em !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.kds-insp-folder-storage__bars {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}

.kds-insp-folder-storage__bar {
  display: block !important;
  width: 7px !important;
  height: 100% !important;
  align-self: stretch !important;
  border-radius: 2px !important;
  background: var(--kds-insp-folder-bar-track) !important;
  position: static !important;
  margin: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  transition: background 0.2s ease;
}

.kds-insp-folder-storage__bar--filled {
  background: var(--kds-insp-folder-bar-fill) !important;
}

/* Narrow shells (~dashboard cards): keep label top-left, metrics bottom */
@container folder-shell (max-width: 300px) {
  .kds-insp-folder-storage__header {
    top: calc(var(--kds-insp-folder-inset-top) + 8px) !important;
    left: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
    right: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
    bottom: auto !important;
    align-items: center !important;
    max-width: none !important;
  }

  .kds-insp-folder-storage__footer {
    left: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
    right: calc(var(--kds-insp-folder-inset-x) + var(--kds-insp-folder-pad)) !important;
    bottom: calc(var(--kds-insp-folder-inset-bottom) + var(--kds-insp-folder-pad)) !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: none !important;
  }

  .kds-insp-folder-storage__icon {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  .kds-insp-folder-storage__count {
    font-size: 12px !important;
  }

  .kds-insp-folder-storage__usage {
    font-size: 11px !important;
  }

  .kds-insp-folder-storage__bars {
    height: 22px !important;
  }
}

@container folder-shell (max-width: 160px) {
  .kds-insp-folder-storage__header {
    top: calc(var(--kds-insp-folder-inset-top) + 6px) !important;
    gap: 6px !important;
  }

  .kds-insp-folder-storage__icon {
    width: 24px !important;
    height: 24px !important;
  }

  .kds-insp-folder-storage__icon svg,
  .kds-insp-folder-storage__icon i {
    width: 14px !important;
    height: 14px !important;
    font-size: 12px !important;
  }

  .kds-insp-folder-storage__bars {
    height: 20px !important;
    gap: 3px !important;
  }

  .kds-insp-folder-storage__bar {
    width: 4px !important;
  }
}

html body.app.admin #widget-saas_top_stats .row.tw-flex {
  align-items: flex-start !important;
  background: transparent !important;
}

html body.app.admin #widget-saas_top_stats .col-lg-5 {
  max-width: 44% !important;
  background: transparent !important;
}

html body.app.admin #widget-saas_top_stats .col-lg-7 {
  max-width: 56% !important;
}

@media (max-width: 991px) {
  html body.app.admin #widget-saas_top_stats .col-lg-5,
  html body.app.admin #widget-saas_top_stats .col-lg-7 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  html body.app.admin #widget-saas_top_stats .kpf-folder-row > .kds-insp-folder-storage {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 8px) !important;
    width: auto !important;
  }
}

/* —— SaaS KPI Basic / Advanced view —— */
html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Hero: folders always equal-height 3×2 filling the donut column */
html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kpf-folder-row:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  align-content: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kpf-folder-row[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kpf-folder-row > .kds-insp-folder-storage {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  align-self: start !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kds-insp-folder-storage__shell {
  aspect-ratio: 1868 / 1085 !important;
  height: auto !important;
  width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kds-saas-kpi-advanced:not([hidden]) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: unset !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: stretch !important;
  align-content: stretch !important;
  overflow: hidden !important;
}

html body.app.admin.dashboard #widget-saas_top_stats .kds-dash-hero .kds-saas-kpi-advanced[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view__tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view__tabs button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kds-insp-border, #d3d6e0) !important;
  background: transparent !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view__tabs button.is-on {
  background: var(--kds-insp-cobalt, #001bff) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-advanced {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-advanced > .kds-insp-saas-gen {
  min-height: 0 !important;
}

html body.app.admin #widget-saas_top_stats .kds-saas-kpi-advanced[hidden],
html body.app.admin #widget-saas_top_stats .kds-saas-kpi-view .kpf-folder-row[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 18px 16px 16px !important;
  border-radius: 4px !important;
  background: var(--kds-insp-surface, #fff) !important;
  color: var(--kds-insp-fg, #14141a) !important;
  border: 1px solid var(--kds-insp-border, #d3d6e0) !important;
  box-shadow: var(--kds-insp-shadow, none) !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen .kds-insp-gen__head h3 {
  margin: 0 0 4px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kds-insp-fg, #14141a) !important;
}

html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen .kds-insp-saas-gen__kind {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--kds-insp-fg-muted, #6e7180) !important;
}

html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen .kds-insp-saas-gen__value,
html body.app.admin #widget-saas_top_stats .kds-insp-saas-gen .kds-insp-card-dark__hero {
  margin: 8px 0 0 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.15 !important;
  color: var(--kds-insp-fg, #14141a) !important;
}

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

@media (max-width: 720px) {
  html body.app.admin #widget-saas_top_stats .kds-saas-kpi-advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  html body.app.admin #widget-saas_top_stats .kds-saas-kpi-advanced {
    grid-template-columns: 1fr !important;
  }
}

/* —— Clients / Invoices status summary → compact FolderStorageCard grid —— */
html body.app.admin .kpf-clients-summary,
html body.app.admin .kpf-quick-stats-summary {
  margin-bottom: 16px !important;
  --kds-insp-folder-pad: 8px;
  --kds-insp-folder-inset-x: 3%;
  --kds-insp-folder-inset-bottom: 3%;
  /* Respond to content width (sidebar shrinks the stage), not only viewport */
  container-type: inline-size;
  container-name: kpf-summary;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.app.admin .kpf-clients-summary,
html body.app.admin .kpf-quick-stats-summary {
  display: flex !important;
  flex-direction: column !important;
}

/* Invoices/estimates: title + totals above folder KPIs (clients composition) */
html body.app.admin .kpf-quick-stats-summary > .kpf-summary-masthead {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px 24px !important;
  width: 100% !important;
  order: -1;
  margin: 0 !important;
}

html body.app.admin .kpf-quick-stats-summary > .kpf-summary-masthead > .kpf-summary-heading {
  flex: 1 1 auto !important;
  min-width: min(100%, 220px) !important;
}

html body.app.admin .kpf-quick-stats-summary .kpf-summary-masthead__totals {
  flex: 0 1 auto !important;
  align-self: center !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* Page title above folders: 40px vertical margin + larger type */
html body.app.admin .kpf-clients-summary > .tw-mb-3,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading,
html body.app.admin .kpf-quick-stats-summary > .tw-mb-3 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  order: -1;
}

html body.app.admin .kpf-quick-stats-summary > .kpf-summary-masthead .kpf-summary-heading {
  order: 0;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

html body.app.admin .kpf-clients-summary > .tw-mb-3 > h4,
html body.app.admin .kpf-clients-summary > .tw-mb-3 .tw-font-bold,
html body.app.admin .kpf-clients-summary > .tw-mb-3 .tw-text-xl,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading > h4,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading .tw-font-bold,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading .tw-text-xl {
  margin: 0 !important;
  font-family: var(--kodex-font-display, var(--kodex-font-family-sans, Satoshi, system-ui, sans-serif)) !important;
  font-size: clamp(28px, 3.2vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin .kpf-clients-summary > .tw-mb-3 > a,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading > a {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  text-decoration: none !important;
}

html body.app.admin .kpf-clients-summary > .tw-mb-3 > a:hover,
html body.app.admin .kpf-quick-stats-summary .kpf-summary-heading > a:hover {
  color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin .kpf-clients-summary .kpf-folder-row.kpf-clients-summary__folders,
html body.app.admin .kpf-clients-summary .kpf-folder-row.kpf-clients-summary__folders:not([hidden]),
html body.app.admin .kpf-clients-summary > .kpf-folder-row,
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row.kpf-clients-summary__folders,
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row.kpf-quick-stats-summary__folders,
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row.kpf-clients-summary__folders:not([hidden]),
html body.app.admin .kpf-quick-stats-summary > .kpf-folder-row {
  --kpf-summary-cols: 6;
  display: grid !important;
  grid-template-columns: repeat(var(--kpf-summary-cols), minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  gap: 8px !important;
  align-items: stretch !important;
  order: 0;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Invoices/estimates: column count follows status chips (usually 5) on wide stage */
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row.kpf-quick-stats-summary__folders,
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row.kpf-clients-summary__folders {
  --kpf-summary-cols: var(--kpf-folder-cols, 5);
}

html body.app.admin .kpf-clients-summary .kpf-folder-row > .kds-insp-folder-storage,
html body.app.admin .kpf-quick-stats-summary .kpf-folder-row > .kds-insp-folder-storage {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  grid-column: auto !important;
}

html body.app.admin .kpf-quick-stats-summary .kpf-quick-stats-folder:hover .kds-insp-folder-storage__shell,
html body.app.admin .kpf-quick-stats-summary .kpf-quick-stats-folder:focus-visible .kds-insp-folder-storage__shell {
  filter: drop-shadow(0 18px 28px rgba(0, 27, 255, 0.22)) !important;
}

html body.app.admin .kpf-quick-stats-summary .kpf-quick-stats-folder:focus-visible {
  outline: 2px solid var(--kodex-action-primary, #001bff) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* Compact shell — keeps each card small via column width */
html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__shell,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__shell {
  filter: drop-shadow(0 3px 8px rgba(20, 20, 26, 0.1)) !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__icon,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__icon svg,
html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__icon i,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__icon svg,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__icon i {
  width: 11px !important;
  height: 11px !important;
  max-width: 11px !important;
  max-height: 11px !important;
  font-size: 10px !important;
}

/* Labels must be fully readable (no ellipsis on long Spanish titles) */
html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__count,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__count {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  hyphens: auto;
  max-width: none !important;
}

/* Number is the hero on compact KPIs */
html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__usage,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__usage {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--kds-insp-folder-fg) !important;
  line-height: 1 !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__bars,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__bars {
  height: 12px !important;
  gap: 2px !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__bar,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__bar {
  width: 5px !important;
  min-height: 0 !important;
  height: 100% !important;
  border-radius: 2px !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__header,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__header {
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.app.admin .kpf-clients-summary .kds-insp-folder-storage__footer,
html body.app.admin .kpf-quick-stats-summary .kds-insp-folder-storage__footer {
  gap: 8px !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html body.app.admin .kpf-clients-summary .tw-grid[data-kpf-folders='1'],
html body.app.admin .kpf-clients-summary .kpf-folder-col-empty,
html body.app.admin .kpf-quick-stats-summary .tw-grid[data-kpf-folders='1'],
html body.app.admin .kpf-quick-stats-summary .kpf-folder-col-empty {
  display: none !important;
}

/*
 * Container queries — content stage is often ~689px with the rail open,
 * so viewport @media alone keeps a crushed 6-col row. Scale by host width.
 */
@container kpf-summary (max-width: 1100px) {
  .kpf-folder-row.kpf-clients-summary__folders,
  .kpf-folder-row.kpf-quick-stats-summary__folders,
  .kpf-folder-row {
    --kpf-summary-cols: 3 !important;
    gap: 10px !important;
  }

  .kds-insp-folder-storage__usage {
    font-size: 16px !important;
  }

  .kds-insp-folder-storage__count {
    font-size: 12px !important;
  }
}

@container kpf-summary (max-width: 640px) {
  .kpf-folder-row.kpf-clients-summary__folders,
  .kpf-folder-row.kpf-quick-stats-summary__folders,
  .kpf-folder-row {
    --kpf-summary-cols: 2 !important;
    gap: 10px !important;
  }

  .kds-insp-folder-storage__usage {
    font-size: 17px !important;
  }

  .kds-insp-folder-storage__count {
    font-size: 12px !important;
  }
}

@container kpf-summary (max-width: 420px) {
  .kpf-folder-row.kpf-clients-summary__folders,
  .kpf-folder-row.kpf-quick-stats-summary__folders,
  .kpf-folder-row {
    --kpf-summary-cols: 1 !important;
    gap: 8px !important;
  }

  .kds-insp-folder-storage__shell {
    max-width: 300px !important;
    margin-inline: auto !important;
  }
}

/* Viewport fallback when container queries are unavailable */
@supports not (container-type: inline-size) {
  @media (max-width: 1280px) {
    html body.app.admin .kpf-clients-summary .kpf-folder-row,
    html body.app.admin .kpf-quick-stats-summary .kpf-folder-row {
      --kpf-summary-cols: 3 !important;
      gap: 10px !important;
    }
  }

  @media (max-width: 900px) {
    html body.app.admin .kpf-clients-summary .kpf-folder-row,
    html body.app.admin .kpf-quick-stats-summary .kpf-folder-row {
      --kpf-summary-cols: 2 !important;
    }
  }

  @media (max-width: 520px) {
    html body.app.admin .kpf-clients-summary .kpf-folder-row,
    html body.app.admin .kpf-quick-stats-summary .kpf-folder-row {
      --kpf-summary-cols: 1 !important;
    }
  }
}