/* ============================================================================
   KodexCRM — Base dashboard mode (v3, Kodex DS v2.1.1 visual spec literal).
   Card language = CrmChartCard / CrmStatCard / KpfDataTable straight from the
   DS contract: card radius 8px (radiusContract.card), controls 4px (BD-16),
   elevation.card 0 1px 3px, cardPadding 16px 20px, motion 100/160/220ms with
   cubic-bezier(0.2,0.8,0.2,1), weights 400/500/700, canvas #F7F7F7.
   Nav/Sidebar/Topbar untouched.
   Scope: body.kds-dash-base only — never touches grid/gallery/zen/custom.
   ========================================================================== */

/* —— 1. Mode tokens — thin aliases onto the real DS tokens, nothing new —— */
html body.app.admin.dashboard.kds-dash-base #wrapper .content.kodex-crm-saas-dashboard,
html body.app.admin.dashboard.kds-dash-base #wrapper .content.kpf-sys-content {
  /* DS radiusContract: card surfaces 8px; buttons/badges/chips stay 4px */
  --kdb-radius: 8px;
  --kdb-radius-sm: var(--kodex-radius-sm, 4px);
  --kdb-radius-input: 8px; /* DS components.input.radius */
  --kdb-ink: var(--kodex-text-primary, #14141a);
  --kdb-sec: var(--kodex-text-secondary, #40424d);
  --kdb-muted: var(--kodex-text-muted, #6e7180);
  --kdb-line: var(--kds-card-border, var(--kodex-border-subtle, #edeff7));
  --kdb-line-strong: var(--kodex-border-default, #d3d6e0);
  --kdb-surface: var(--kodex-crm-surface, var(--kodex-bg-surface, #ffffff));
  --kdb-canvas: var(--kodex-crm-canvas, #f7f7f7); /* DS light background.base */
  --kdb-cobalt: var(--kodex-action-primary, #001bff);
  --kdb-cobalt-hover: var(--kodex-action-primary-hover, #0016cc);
  --kdb-cobalt-tint: color-mix(in srgb, var(--kdb-cobalt) 8%, transparent);
  --kdb-cobalt-ghost: color-mix(in srgb, var(--kdb-cobalt) 5%, transparent);
  --kdb-positive: var(--kodex-crm-stat-positive, #0d7a4e);
  --kdb-negative: var(--kodex-crm-stat-negative, #c41e3a);
  --kdb-pending: var(--kodex-crm-stat-pending, #fa4616);
  --kdb-font-display: var(--kodex-font-display, 'Neue Haas Grotesk Display', Satoshi, system-ui, sans-serif);
  --kdb-font-body: var(--kodex-font-body, Satoshi, system-ui, sans-serif);
  /* DS motion: hover 100ms, base 160ms, enter 220ms, one easing */
  --kdb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kdb-t-hover: 100ms;
  --kdb-t-base: 160ms;
  --kdb-t-enter: 220ms;
  --kdb-shadow: var(--kds-card-shadow, var(--kodex-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08)));
  --kdb-shadow-hover: var(--kodex-shadow-md, 0 10px 28px -8px rgba(20, 20, 26, 0.16));
  background: transparent !important;
}

/* —— 2. Canvas: quiet app surface, 12-col grid for the span system —— */
html body.app.admin.dashboard.kds-dash-base {
  /* DS colorSystem.light.background.base — cards must sit on #F7F7F7, not white */
  background: var(--kodex-crm-canvas, #f7f7f7) !important;
}

html body.app.admin.dashboard #wrapper .content > .row.kds-dash-board--base {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body.app.admin.dashboard #wrapper .content .kds-dash-base-canvas {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 20px !important;
  width: 100% !important;
  margin: 0 0 56px !important;
  padding: 0 0 0 28px !important;
  align-items: stretch !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > [id^='widget-'] {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* —— 3. Section rails: quiet uppercase label + hairline, one small square
   accent (echoes PatternSquareColumns — squares, never dots/circles) —— */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-base-sec {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 0 0 !important;
  min-height: 0 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > .kds-base-sec:first-child {
  margin-top: 0 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-base-sec__label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--kdb-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important; /* CrmText overline */
  text-transform: uppercase !important;
  color: var(--kdb-muted) !important;
  white-space: nowrap !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-base-sec__label::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--kdb-cobalt);
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-base-sec__rule {
  flex: 1 1 auto !important;
  height: 1px !important;
  align-self: center !important;
  background: var(--kdb-line) !important;
}

/* —— 4. Cards: CrmChartCard / CrmStatCard surface, straight DS tokens —— */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > [id^='widget-'] > .panel_s,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel_s.kds-dash-widget {
  border: 1px solid var(--kdb-line) !important;
  border-radius: var(--kdb-radius) !important;
  background: var(--kdb-surface) !important;
  box-shadow: var(--kdb-shadow) !important;
  overflow: visible !important;
  margin: 0 !important;
  height: 100% !important;
  position: relative !important;
  transition: border-color var(--kdb-t-base) var(--kdb-ease), box-shadow var(--kdb-t-base) var(--kdb-ease) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > [id^='widget-']:hover > .panel_s {
  border-color: color-mix(in srgb, var(--kdb-cobalt) 22%, var(--kdb-line)) !important;
  box-shadow: var(--kdb-shadow-hover) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel-body {
  padding: var(--kds-card-padding-md, 16px 20px) !important; /* DS spacing.cardPadding */
  background: transparent !important;
}

/* Finance overview keeps its own compact panel-body + per-card padding —
   the generic Base canvas rule above is more specific than the widget's
   own .panel-body.padding-15 rule and was overriding it, leaving the
   Estimate/Proposal/Invoice cards flush against the widget edge. */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-finance_overview .panel-body {
  padding: 8px 20px 16px !important; /* DS cardPadding sides — cards/totals never flush */
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-finance_overview .home-summary > [class*='col-'],
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-finance_overview .kpf-finance-gen {
  padding: 14px 14px 12px !important;
}

/* Card header = real product header: icon chip + sentence-case title,
   never an "engineering overline" — matches CrmChartCard title/subtitle. */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel-heading,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .kds-dash-widget__head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--kdb-font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important; /* DS weights: 400/500/700 — no 600 */
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--kdb-ink) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel-heading {
  border: 0 !important;
  border-bottom: 1px solid var(--kds-card-header-border, var(--kdb-line)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 14px 20px !important;
  position: relative !important;
}

/* Icon chip — small cobalt-tinted square, echoes PatternSquareColumns motif */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel-heading::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-radius: 2px;
  background: var(--kdb-cobalt);
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel-heading a {
  color: inherit !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel-footer {
  border: 0 !important;
  border-top: 1px solid var(--kdb-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 20px !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel-footer a {
  color: var(--kdb-cobalt) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel-footer a:hover {
  text-decoration: underline !important;
}

/* Big figures = --kds-kpi tokens straight from the DS, tabular + tight */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .kodex-crm-stat-card__value,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .kpf-finance-hero,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .top_stats_wrapper h3 {
  font-family: var(--kdb-font-display) !important;
  font-size: var(--kds-kpi-value-font-size, 28px) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  letter-spacing: -0.01em !important;
  color: var(--kdb-ink) !important;
}

/* KPI label — --kds-kpi-label token: 11px overline, muted */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .kodex-crm-stat-card__label {
  font-family: var(--kdb-font-body) !important;
  font-size: var(--kds-kpi-label-font-size, 11px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kdb-muted) !important;
}

/* —— 5. Tables: KpfDataTable-lite, tokens straight from --kds-table-* —— */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas table thead th {
  padding: var(--kds-table-cell-padding-y, 10px) var(--kds-table-cell-padding-x, 16px) !important;
  font-size: var(--kds-table-header-font-size, 11px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--kds-table-header-color, var(--kdb-muted)) !important;
  background: transparent !important; /* DS table.headerFill: false */
  border-bottom: 1px solid var(--kdb-line) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas table tbody td {
  padding: var(--kds-table-cell-padding-y, 10px) var(--kds-table-cell-padding-x, 16px) !important;
  border-color: var(--kdb-line) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas table tbody tr:hover > td {
  background: var(--kds-table-row-hover-bg, var(--kdb-cobalt-ghost)) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .table-responsive {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* —— 6. Toolbar: segmented switch, cobalt-active, DS button tokens —— */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-toolbar.kds-dash-masthead {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-toolbar__modes {
  /* segmented switch is a control, not a card — 4px family (BD-16) */
  border-radius: calc(var(--kdb-radius-sm) + 2px) !important;
  border: 1px solid var(--kdb-line) !important;
  background: var(--kdb-surface) !important;
  box-shadow: var(--kdb-shadow) !important;
  padding: 3px !important;
  gap: 2px !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-toolbar__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  border-radius: var(--kdb-radius-sm) !important;
  min-height: 28px !important; /* DS button sm height */
  padding: 0 14px !important;
  font-family: var(--kdb-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--kdb-muted) !important;
  background: transparent !important;
  border: 0 !important;
  transition: color var(--kdb-t-hover) var(--kdb-ease), background-color var(--kdb-t-hover) var(--kdb-ease) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-toolbar__btn:hover {
  color: var(--kdb-ink) !important;
  background: var(--kdb-cobalt-ghost) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-toolbar__btn:focus-visible {
  outline: 2px solid var(--kdb-cobalt) !important;
  outline-offset: 1px !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-toolbar__btn--active,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-toolbar__btn--active:hover {
  background: var(--kdb-cobalt) !important;
  color: var(--kodex-action-primary-fg, #fff) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* —— 7. Charts: naked in the card body, one surface, no double boxing —— */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .kpf-kodex-chart-host,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .kds-insp-market-donut,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .kds-insp-status-prod {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas canvas {
  max-width: 100% !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-payments_chart .panel-body {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-leads_chart .panel-body,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-projects_chart .panel-body,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-tickets_chart .panel-body {
  min-height: 0 !important;
  display: block !important;
  overflow: visible !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-leads_chart .kpf-status-donut,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-projects_chart .kpf-status-donut,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-tickets_chart .kpf-status-donut {
  width: 100% !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-payments_chart canvas {
  /* sized by .kpf-payments-chart-host — do not override */
  max-width: none !important;
  max-height: none !important;
  height: 100% !important;
  width: 100% !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-tickets_chart {
  min-width: 0 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-tickets_chart canvas {
  /* Fallback only — DS SVG owns the circle; never stretch canvas into an oval */
  max-width: 200px !important;
  max-height: 200px !important;
  width: 200px !important;
  height: 200px !important;
  margin: 0 auto !important;
  aspect-ratio: 1 / 1 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-tickets_chart .kds-insp-market-donut__chart,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-tickets_chart .kds-insp-market-donut__chart svg {
  width: 200px !important;
  height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  aspect-ratio: 1 / 1 !important;
}

/* Inner tiles inherit the card radius, one notch tighter */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kpf-folder-row,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-insp-folder-storage,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .top_stats_wrapper {
  border-radius: var(--kdb-radius-sm) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .btn,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .nav-tabs > li > a,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .label,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .badge {
  border-radius: var(--kdb-radius-sm) !important; /* controls 4px (BD-16) */
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .form-control {
  border-radius: var(--kdb-radius-input) !important; /* DS input radius 8px */
}

/* Badges/labels — DS badge contract: 11px, 2px 8px, 4px radius, weight 500 */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .label,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .badge {
  font-family: var(--kdb-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  line-height: 1.4 !important;
}

/* —— 8. Hero + persona: cobalt datum line, quiet square watermark ——
   Literal PatternSquareColumns echo: a handful of small squares bleeding
   off the right edge — restrained, never a loud repeating texture. */
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-saas_top_stats > .panel_s {
  background:
    linear-gradient(180deg, var(--kdb-cobalt-tint) 0%, transparent 70%),
    var(--kdb-surface) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-saas_top_stats .kds-dash-hero {
  gap: 18px !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas[data-kds-persona='saas'] #widget-saas_top_stats > .panel_s,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas[data-kds-persona='admin'] #widget-top_stats > .panel_s,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas[data-kds-persona='staff'] #widget-todos > .panel_s {
  box-shadow:
    inset 0 2px 0 var(--kdb-cobalt),
    var(--kdb-shadow) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas[data-kds-persona='saas'] #widget-saas_top_stats:hover > .panel_s,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas[data-kds-persona='admin'] #widget-top_stats:hover > .panel_s,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas[data-kds-persona='staff'] #widget-todos:hover > .panel_s {
  box-shadow:
    inset 0 2px 0 var(--kdb-cobalt),
    var(--kdb-shadow-hover) !important;
}

/* —— 9. Entrance: cards settle in, respectfully —— */
@keyframes kds-base-settle {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > [id^='widget-'],
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > .kds-base-sec {
  animation: kds-base-settle var(--kdb-t-enter, 220ms) var(--kdb-ease, cubic-bezier(0.2, 0.8, 0.2, 1)) backwards;
}

/* —— 10. Dark mode: same components, dark DS surfaces —— */
html body.app.admin.dashboard.kds-dash-base.kodex-crm-admin--ui-dark #wrapper .content.kodex-crm-saas-dashboard,
html body.app.admin.dashboard.kds-dash-base.kodex-crm-admin--ui-dark #wrapper .content.kpf-sys-content {
  /* DS colorSystem.dark — surface1 #1E1E24 on base #14141A, rgba white lines */
  --kdb-ink: #ffffff;
  --kdb-sec: rgba(255, 255, 255, 0.68);
  --kdb-muted: #9da2b3;
  --kdb-line: rgba(255, 255, 255, 0.06);
  --kdb-line-strong: rgba(255, 255, 255, 0.1);
  --kdb-surface: #1e1e24;
  --kdb-cobalt-hover: var(--kodex-action-primary-hover, #334dff);
  --kdb-cobalt-tint: color-mix(in srgb, #6b8aff 14%, transparent);
  --kdb-cobalt-ghost: color-mix(in srgb, #6b8aff 10%, transparent);
  --kdb-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); /* DS elevation.cardDark */
  --kdb-shadow-hover: 0 14px 36px -8px rgba(0, 0, 0, 0.55);
}

html body.app.admin.dashboard.kds-dash-base.kodex-crm-admin--ui-dark {
  background: #14141a !important; /* DS dark background.base */
}

html body.app.admin.dashboard.kds-dash-base.kodex-crm-admin--ui-dark #wrapper .content .kds-dash-toolbar__btn--active,
html body.app.admin.dashboard.kds-dash-base.kodex-crm-admin--ui-dark #wrapper .content .kds-dash-toolbar__btn--active:hover {
  background: var(--kdb-cobalt) !important;
  color: #fff !important;
}

/* —— 11. Motion respect ————————————————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > [id^='widget-'],
  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > .kds-base-sec {
    animation: none !important;
  }

  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > [id^='widget-'] > .panel_s,
  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-toolbar__btn {
    transition: none !important;
  }
}

/* —— 12. Responsive ————————————————————————————————————————————— */
@media (max-width: 1100px) {
  html body.app.admin.dashboard #wrapper .content .kds-dash-base-canvas {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 720px) {
  html body.app.admin.dashboard #wrapper .content .kds-dash-base-canvas {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > [id^='widget-'] {
    grid-column: 1 / -1 !important;
  }

  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-base-sec {
    margin-top: 10px !important;
  }

  html body.app.admin.dashboard.kds-dash-base {
    background: var(--kodex-crm-canvas, #f7f7f7) !important;
  }

  html body.app.admin.dashboard.kds-dash-base.kodex-crm-admin--ui-dark {
    background: #14141a !important;
  }
}

/* —— 13. Widget drag handle: exterior left, hover-only —— */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > [id^='widget-'] {
  position: relative !important;
  overflow: visible !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel-body {
  overflow: visible !important;
  position: static !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .widget-dragger,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .widget-dragger.ui-sortable-handle,
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-finance_overview .widget-dragger {
  position: absolute !important;
  top: 14px !important;
  left: -26px !important;
  right: auto !important;
  width: 20px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 12 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  transition: opacity 0.15s ease, visibility 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > [id^='widget-']:hover .widget-dragger,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .panel_s:hover .widget-dragger,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > [id^='widget-']:focus-within .widget-dragger,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .widget-dragger:active,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .widget-dragger:focus-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (max-width: 720px) {
  html body.app.admin.dashboard #wrapper .content .kds-dash-base-canvas {
    padding-left: 22px !important;
  }

  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas .widget-dragger {
    left: -20px !important;
    width: 18px !important;
    height: 28px !important;
  }
}

/* —— 14. Quick actions + quick links strip —— */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > .kds-dash-quick {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) !important;
  gap: 16px !important;
  margin: 0 0 4px !important;
  min-width: 0 !important;
  animation: kds-base-settle var(--kdb-t-enter, 220ms) var(--kdb-ease, cubic-bezier(0.2, 0.8, 0.2, 1)) backwards;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 16px 18px !important;
  background: var(--kdb-surface) !important;
  border: 1px solid var(--kdb-line) !important;
  border-radius: var(--kdb-radius) !important;
  box-shadow: var(--kdb-shadow) !important;
  box-sizing: border-box !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__panel--actions {
  box-shadow:
    inset 0 2px 0 var(--kdb-cobalt),
    var(--kdb-shadow) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__head {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__eyebrow {
  font-family: var(--kdb-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important; /* CrmText overline */
  text-transform: uppercase !important;
  color: var(--kdb-cobalt) !important;
  line-height: 1.2 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__lead {
  margin: 0 !important;
  font-family: var(--kdb-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--kdb-muted) !important;
  line-height: 1.35 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important; /* DS button md height */
  padding: 0 14px !important; /* DS buttonPaddingMd */
  border-radius: var(--kdb-radius-sm) !important;
  border: 1px solid var(--kdb-line-strong) !important;
  background: var(--kdb-surface) !important;
  color: var(--kdb-ink) !important;
  font-family: var(--kdb-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: background var(--kdb-t-hover) var(--kdb-ease), border-color var(--kdb-t-hover) var(--kdb-ease), color var(--kdb-t-hover) var(--kdb-ease) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__btn:focus-visible,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__card:focus-visible {
  outline: 2px solid var(--kdb-cobalt) !important;
  outline-offset: 1px !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__btn:hover {
  border-color: color-mix(in srgb, var(--kdb-cobalt) 40%, var(--kdb-line-strong)) !important;
  color: var(--kdb-cobalt) !important;
  background: var(--kdb-cobalt-ghost) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__btn--primary,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__btn--primary:hover,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__btn--primary:focus,
html body.app.admin.dashboard.kds-dash-base #wrapper .content a.kds-dash-quick__btn--primary,
html body.app.admin.dashboard.kds-dash-base #wrapper .content a.kds-dash-quick__btn--primary:visited {
  background: var(--kdb-cobalt) !important;
  border-color: var(--kdb-cobalt) !important;
  color: #fff !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__btn--primary:hover {
  background: var(--kdb-cobalt-hover, #0016cc) !important;
  border-color: var(--kdb-cobalt-hover, #0016cc) !important;
  color: #fff !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__card {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  padding: 12px 12px !important;
  border: 1px solid var(--kdb-line) !important;
  border-radius: var(--kdb-radius-sm) !important;
  background: color-mix(in srgb, var(--kdb-cobalt) 3%, var(--kdb-surface)) !important;
  text-decoration: none !important;
  transition: border-color var(--kdb-t-hover) var(--kdb-ease), background var(--kdb-t-hover) var(--kdb-ease), box-shadow var(--kdb-t-hover) var(--kdb-ease) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__card:hover {
  border-color: color-mix(in srgb, var(--kdb-cobalt) 35%, var(--kdb-line)) !important;
  background: color-mix(in srgb, var(--kdb-cobalt) 7%, var(--kdb-surface)) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, #14141a 6%, transparent) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__card-title {
  font-family: var(--kdb-font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--kdb-ink) !important;
  line-height: 1.2 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__card:hover .kds-dash-quick__card-title {
  color: var(--kdb-cobalt) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__card-hint {
  font-family: var(--kdb-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--kdb-muted) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* —— 15. Pipeline charts — status donut owns layout —— */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-leads_chart,
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-projects_chart {
  min-width: 0 !important;
}

/* —— 16. Calendar — full width + Kodex cobalt (not orange / default FC blue) —— */
html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas #widget-calendar {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .panel_s,
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .panel-body.kpf-subcal-panel {
  background: var(--kdb-surface) !important;
  border-color: var(--kdb-line) !important;
  box-shadow: var(--kdb-shadow) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar #calendar.kpf-subcal,
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar #calendar {
  background: var(--kdb-surface) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 4px 4px !important;
  color: var(--kdb-ink) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-toolbar-title {
  color: var(--kdb-ink) !important;
  font-family: var(--kdb-font-display) !important;
  font-size: 18px !important; /* CrmText title / DS lg */
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-button-primary {
  border-color: var(--kdb-line-strong) !important;
  color: var(--kdb-sec) !important;
  background: var(--kdb-surface) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-button-primary:not(:disabled).fc-button-active,
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-button-primary:not(:disabled):active {
  background: var(--kdb-cobalt) !important;
  border-color: var(--kdb-cobalt) !important;
  color: #fff !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-col-header-cell-cushion {
  color: var(--kdb-muted) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-daygrid-day-number {
  color: var(--kdb-sec) !important;
  font-weight: 500 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-daygrid-day:not(.fc-day-other) .fc-daygrid-day-frame {
  background: color-mix(in srgb, var(--kdb-cobalt) 2%, #fff) !important;
  border: 1px solid var(--kdb-line) !important;
  border-radius: var(--kdb-radius-sm) !important;
}

/* A bit more room per day so 2-3 events don't feel crammed against the
   day number, and a clearer "+N more" affordance for busier days. */
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-daygrid-day-frame {
  min-height: 96px !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-daygrid-more-link {
  display: inline-flex !important;
  align-items: center !important;
  margin: 1px 4px 0 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  background: var(--kdb-cobalt-tint) !important;
  color: var(--kdb-cobalt) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-daygrid-more-link:hover {
  background: var(--kdb-cobalt) !important;
  color: #fff !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
  border: 1.5px solid var(--kdb-cobalt) !important;
  background: color-mix(in srgb, var(--kdb-cobalt) 8%, #fff) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kdb-cobalt) 12%, transparent) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  color: var(--kdb-cobalt) !important;
  font-weight: 700 !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame {
  background: var(--kodex-bg-subtle, #f7f7f7) !important;
  opacity: 0.7 !important;
  border: 1px solid transparent !important;
}

/* Keep each record type's own admin-configured colour (Settings → Calendar:
   invoice/estimate/task/event colours) — a previous flat cobalt override
   made every entry look identical, so invoices/estimates/tasks/meetings
   were impossible to tell apart on the mini calendar. Only refine shape. */
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-event,
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-daygrid-event {
  border: 0 !important;
  border-radius: 3px !important;
  padding: 2px 6px 2px 7px !important;
  font-weight: 500 !important;
  box-shadow: inset 3px 0 0 0 rgba(0, 0, 0, 0.18) !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-daygrid-event-dot {
  border-color: currentColor !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-event-title,
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-event-time {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-scrollgrid,
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-scrollgrid td,
html body.app.admin.dashboard.kds-dash-base #wrapper .content #widget-calendar .fc .fc-scrollgrid th {
  border-color: var(--kdb-line) !important;
}

/* —— 17. Quick strip responsive —— */
@media (max-width: 1100px) {
  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-base-canvas > .kds-dash-quick {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__btn {
    flex: 1 1 auto !important;
    min-height: 40px !important;
  }
}

@media (max-width: 480px) {
  html body.app.admin.dashboard.kds-dash-base #wrapper .content .kds-dash-quick__grid {
    grid-template-columns: 1fr !important;
  }
}

html body.app.admin.dashboard.kds-dash-base.kodex-crm-admin--ui-dark #wrapper .content .kds-dash-quick__card {
  background: color-mix(in srgb, #6b8aff 10%, #1e1e24) !important;
}

html body.app.admin.dashboard.kds-dash-base.kodex-crm-admin--ui-dark #wrapper .content #widget-calendar .fc .fc-daygrid-day:not(.fc-day-other) .fc-daygrid-day-frame {
  background: color-mix(in srgb, #6b8aff 8%, #1e1e24) !important;
}

html body.app.admin.dashboard.kds-dash-base.kodex-crm-admin--ui-dark #wrapper .content #widget-calendar .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
  background: color-mix(in srgb, #6b8aff 16%, #1e1e24) !important;
}

html body.app.admin.dashboard.kds-dash-base.kodex-crm-admin--ui-dark #wrapper .content #widget-calendar .fc .fc-event,
html body.app.admin.dashboard.kds-dash-base.kodex-crm-admin--ui-dark #wrapper .content #widget-calendar .fc .fc-daygrid-event {
  background: color-mix(in srgb, #6b8aff 22%, #1e1e24) !important;
  color: #9db0ff !important;
  border-left-color: #6b8aff !important;
}