#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard {
  --mfr-brand: #4c94a6;
  --mfr-brand-deep: #2854eb;
  --mfr-text: #151912;
  --mfr-muted: #5c665f;
  --mfr-surface: rgb(255 255 255 / 24%);
  --mfr-soft: rgb(225 233 226 / 30%);
  --mfr-border: rgb(48 66 54 / 10%);
  --mfr-track: #dce5e2;
  --mfr-purple: #4c6170;
  --mfr-orange: #9a7417;
  --mfr-red: #b43e50;
  color: var(--mfr-text);
  display: grid;
  gap: 1rem;
  min-width: 0;
  overflow-x: clip;
  width: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard button,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard input,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard select {
  font: inherit;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard button {
  min-height: 44px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard button:focus-visible,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard input:focus-visible,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard select:focus-visible {
  outline: 3px solid var(--mfr-brand-deep);
  outline-offset: 2px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-hero {
  background:
    radial-gradient(circle at 89% -30%, rgb(77 195 197 / 30%), transparent 41%),
    linear-gradient(135deg, #fff 0%, #f5fbfb 100%);
  border: 1px solid var(--mfr-border);
  border-radius: 1.25rem;
  box-shadow: 7px 7px 15px #d7d8da, -7px -7px 15px #fff;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  overflow: hidden;
  padding: 1.35rem 1.5rem;
  position: relative;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-hero h1 {
  color: var(--mfr-text);
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  margin: 0.15rem 0 0.3rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-hero p:not(.mfr-kicker) {
  color: var(--mfr-muted);
  margin: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kicker {
  color: var(--mfr-brand-deep) !important;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.9rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-scope-row span {
  background: rgb(77 195 197 / 11%);
  border: 1px solid rgb(77 195 197 / 32%);
  border-radius: 99px;
  color: var(--mfr-brand-deep);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.4rem 0.6rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-quick-actions {
  align-items: stretch;
  display: flex;
  gap: 0.55rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-quick-actions button {
  align-items: center;
  background: rgb(255 255 255 / 78%);
  border: 1px solid var(--mfr-border);
  border-radius: 0.85rem;
  color: var(--mfr-text);
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.45rem;
  justify-content: center;
  min-width: 104px;
  padding: 0.65rem;
  transition: transform 160ms ease, border-color 160ms ease;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-quick-actions button svg {
  color: var(--mfr-brand-deep);
  font-size: 1.1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-quick-actions button:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-quick-actions button:focus-visible {
  border-color: var(--mfr-brand);
  transform: translateY(-2px);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-filter-panel {
  align-items: end;
  background: var(--mfr-surface);
  border: 1px solid var(--mfr-border);
  border-radius: 1rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(180px, 1.35fr) repeat(4, minmax(125px, 1fr)) auto;
  padding: 0.85rem 1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-filter-title {
  align-items: center;
  color: var(--mfr-brand-deep);
  display: flex;
  font-size: 0.8rem;
  font-weight: 800;
  gap: 0.4rem;
  min-height: 44px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-filter-panel label {
  color: var(--mfr-muted);
  display: grid;
  font-size: 0.69rem;
  font-weight: 700;
  gap: 0.25rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-filter-panel select,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-filter-panel input {
  background: var(--mfr-surface);
  border: 1px solid var(--mfr-border);
  border-radius: 0.55rem;
  color: var(--mfr-text);
  min-height: 44px;
  padding: 0.42rem 0.55rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-apply-button {
  background: var(--mfr-brand-deep);
  border: 1px solid var(--mfr-brand-deep);
  border-radius: 0.55rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  min-height: 44px;
  padding: 0.45rem 1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-apply-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi {
  background: var(--mfr-surface);
  border: 1px solid var(--mfr-border);
  border-radius: 1rem;
  box-shadow: 5px 5px 12px #d8d9db, -5px -5px 12px #fff;
  color: var(--mfr-text);
  display: grid;
  min-height: 178px;
  overflow: hidden;
  padding: 1rem;
  position: relative;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi::before {
  background: var(--mfr-brand);
  content: "";
  height: 5px;
  inset: 0.2rem 1rem auto;
  position: absolute;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi--urgent::before { background: var(--mfr-red); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi--warning::before { background: var(--mfr-orange); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi--purple::before { background: var(--mfr-purple); }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi:focus-visible {
  box-shadow: 7px 7px 16px #cfd1d4, -7px -7px 16px #fff;
  transform: translateY(-2px);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi-icon {
  align-items: center;
  background: rgb(77 195 197 / 13%);
  border-radius: 0.6rem;
  color: var(--mfr-brand-deep);
  display: flex;
  height: 34px;
  justify-content: center;
  margin-top: 0.35rem;
  width: 34px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi--urgent .mfr-kpi-icon { background: rgb(220 90 104 / 12%); color: var(--mfr-red); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi--warning .mfr-kpi-icon { background: rgb(245 158 11 / 13%); color: #c17803; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi--purple .mfr-kpi-icon { background: rgb(124 92 229 / 12%); color: var(--mfr-purple); }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi-label {
  color: var(--mfr-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-top: 0.55rem;
  text-transform: uppercase;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi > strong {
  color: var(--mfr-text);
  font-size: clamp(1.6rem, 2.2vw, 2.15rem);
  line-height: 1.05;
  margin: 0.15rem 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi > span:not(.mfr-kpi-icon, .mfr-kpi-label, .mfr-kpi-link) {
  color: var(--mfr-muted);
  font-size: 0.72rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi-link {
  align-self: end;
  color: var(--mfr-brand-deep);
  font-size: 0.72rem;
  font-weight: 800;
  margin-top: 0.5rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-primary-grid,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-analytics-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(330px, 1fr);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-secondary-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-panel {
  background: var(--mfr-surface);
  border: 1px solid var(--mfr-border);
  border-radius: 1rem;
  box-shadow: 5px 5px 12px #d8d9db, -5px -5px 12px #fff;
  min-width: 0;
  padding: 1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-panel-heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-panel-heading h2 {
  color: var(--mfr-text);
  font-size: 1.02rem;
  margin: 0.18rem 0 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-count {
  align-items: center;
  background: rgb(220 90 104 / 11%);
  border-radius: 99px;
  color: var(--mfr-red);
  display: flex;
  font-size: 0.82rem;
  font-weight: 800;
  justify-content: center;
  min-height: 30px;
  min-width: 30px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-text-action {
  background: none;
  border: 0;
  color: var(--mfr-brand-deep);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-attention-list {
  display: grid;
  gap: 0.45rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-attention-item {
  align-items: center;
  background: var(--mfr-soft);
  border: 1px solid transparent;
  border-radius: 0.75rem;
  color: var(--mfr-text);
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto 1fr auto;
  padding: 0.7rem;
  text-align: left;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-attention-item:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-attention-item:focus-visible {
  border-color: var(--mfr-brand);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-attention-dot {
  background: var(--mfr-brand);
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-attention-item--critical .mfr-attention-dot { background: var(--mfr-red); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-attention-item--high .mfr-attention-dot { background: var(--mfr-orange); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-attention-item--warning .mfr-attention-dot { background: var(--mfr-orange); }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-attention-copy {
  display: grid;
  font-size: 0.77rem;
  gap: 0.1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-attention-copy > span:not(.mfr-attention-meta) { color: var(--mfr-muted); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-attention-meta {
  color: var(--mfr-muted);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-pipeline {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-pipeline button {
  background: var(--mfr-soft);
  border: 1px solid var(--mfr-border);
  border-radius: 0.75rem;
  color: var(--mfr-text);
  display: grid;
  min-height: 96px;
  padding: 0.55rem;
  position: relative;
  text-align: left;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-pipeline button:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-pipeline button:focus-visible { border-color: var(--mfr-brand); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-stage-index { color: var(--mfr-brand-deep); font-size: 0.62rem; font-weight: 800; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-pipeline button strong { font-size: 1.2rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-pipeline button > span:not(.mfr-stage-index) { color: var(--mfr-muted); font-size: 0.66rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-pipeline button em { color: var(--mfr-red); font-size: 0.62rem; font-style: normal; font-weight: 800; }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-open-po {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  display: grid;
  padding: 0.25rem;
  text-align: right;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-open-po:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-open-po:focus-visible { border-color: var(--mfr-brand); }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-open-po span { color: var(--mfr-muted); font-size: 0.62rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-open-po strong { color: var(--mfr-red); font-size: 0.9rem; }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-trend-chart {
  align-items: stretch;
  display: flex;
  gap: 0.5rem;
  height: 230px;
  overflow-x: auto;
  padding-top: 1.5rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-trend-chart button {
  background: none;
  border: 0;
  color: var(--mfr-text);
  display: grid;
  flex: 1 0 50px;
  grid-template-rows: auto 1fr auto;
  min-width: 48px;
  padding: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-bar-value {
  font-size: 0.58rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 120ms ease;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-trend-chart button:hover .mfr-bar-value,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-trend-chart button:focus-visible .mfr-bar-value { opacity: 1; }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-bar-track {
  align-items: end;
  background: linear-gradient(to top, var(--mfr-track), transparent);
  border-radius: 0.4rem 0.4rem 0 0;
  display: flex;
  margin: 0.2rem auto;
  overflow: hidden;
  width: min(65%, 38px);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-bar-track > span {
  background: linear-gradient(180deg, var(--mfr-brand), var(--mfr-brand-deep));
  border-radius: 0.4rem 0.4rem 0 0;
  display: block;
  width: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-bar-label {
  color: var(--mfr-muted);
  font-size: 0.62rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-method-note {
  border-top: 1px solid var(--mfr-border);
  color: var(--mfr-muted);
  font-size: 0.66rem;
  margin: 0.65rem 0 0;
  padding-top: 0.65rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-inventory-visual {
  align-items: center;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 160px 1fr;
  min-height: 250px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-donut {
  aspect-ratio: 1;
  background: linear-gradient(145deg, rgb(77 195 197 / 24%), rgb(124 92 229 / 14%));
  border: 10px solid rgb(77 195 197 / 22%);
  border-radius: 50%;
  display: grid;
  padding: 25px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-donut > span {
  align-items: center;
  background: var(--mfr-surface);
  border-radius: 50%;
  color: var(--mfr-muted);
  display: flex;
  flex-direction: column;
  font-size: 0.68rem;
  justify-content: center;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-donut strong { color: var(--mfr-text); font-size: 1.35rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-legend { display: grid; gap: 0.35rem; }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-legend button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: var(--mfr-text);
  display: grid;
  font-size: 0.72rem;
  gap: 0.45rem;
  grid-template-columns: auto 1fr auto;
  padding: 0.45rem;
  text-align: left;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-legend button:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-legend button:focus-visible { background: var(--mfr-soft); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-legend i { border-radius: 50%; height: 9px; width: 9px; }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-ranked-list,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-list {
  display: grid;
  gap: 0.4rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-ranked-list > button,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-list > button {
  align-items: center;
  background: var(--mfr-soft);
  border: 1px solid transparent;
  border-radius: 0.65rem;
  color: var(--mfr-text);
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto 1fr auto;
  padding: 0.6rem;
  text-align: left;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-ranked-list > button:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-ranked-list > button:focus-visible,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-list > button:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-list > button:focus-visible { border-color: var(--mfr-brand); }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-rank-icon {
  align-items: center;
  background: rgb(77 195 197 / 12%);
  border-radius: 0.55rem;
  color: var(--mfr-brand-deep);
  display: flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-ranked-list button > span:not(.mfr-rank-icon),
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-list button span {
  display: grid;
  font-size: 0.72rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-ranked-list small,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-list small { color: var(--mfr-muted); font-size: 0.62rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-rank-value { text-align: right; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-rank-value small { color: var(--mfr-red); }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list > button,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list > div {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.6rem;
  color: var(--mfr-text);
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 20px 1fr auto;
  padding: 0.45rem;
  text-align: left;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list > button:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list > button:focus-visible { background: var(--mfr-soft); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list > button > span:first-child,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list > div > span:first-child { color: var(--mfr-brand-deep); font-size: 0.68rem; font-weight: 800; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list > button > span:nth-child(2),
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list > div > span:nth-child(2) { display: grid; font-size: 0.72rem; gap: 0.3rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list > button > strong,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list > div > strong { font-size: 0.66rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list span > i { background: var(--mfr-track); border-radius: 99px; height: 5px; overflow: hidden; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-demand-list span > i > i { background: var(--mfr-brand); display: block; height: 100%; }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-stats {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 0.7rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-segmented {
  background: var(--mfr-track);
  border-radius: 0.6rem;
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-segmented button {
  background: transparent;
  border: 0;
  border-radius: 0.45rem;
  color: var(--mfr-muted);
  font-size: 0.66rem;
  font-weight: 800;
  padding: 0.38rem 0.55rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-segmented button[aria-pressed="true"] {
  background: var(--mfr-surface);
  box-shadow: 0 1px 4px rgb(20 30 50 / 12%);
  color: var(--mfr-brand-deep);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-active-filter {
  align-items: center;
  background: rgb(77 195 197 / 9%);
  border-radius: 0.55rem;
  color: var(--mfr-muted);
  display: flex;
  font-size: 0.7rem;
  gap: 0.5rem;
  justify-content: space-between;
  margin-bottom: 0.7rem;
  padding: 0.55rem 0.7rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-active-filter button {
  background: none;
  border: 0;
  color: var(--mfr-brand-deep);
  font-size: 0.66rem;
  font-weight: 800;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table-wrap { overflow-x: auto; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table { border-collapse: collapse; font-size: 0.72rem; width: 100%; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table th {
  border-bottom: 1px solid var(--mfr-border);
  color: var(--mfr-muted);
  font-size: 0.63rem;
  letter-spacing: 0.04em;
  padding: 0.55rem;
  text-align: left;
  text-transform: uppercase;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table td {
  border-bottom: 1px solid var(--mfr-border);
  color: var(--mfr-text);
  padding: 0.65rem 0.55rem;
  vertical-align: middle;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table td:nth-child(4) { display: grid; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table small { color: var(--mfr-muted); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-po-open,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-po-attached {
  border-radius: 99px;
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.3rem 0.45rem;
  white-space: nowrap;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-po-open { background: rgb(220 90 104 / 12%); color: var(--mfr-red); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-po-attached { background: rgb(77 195 197 / 13%); color: var(--mfr-brand-deep); }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-stats button {
  background: var(--mfr-soft);
  border: 1px solid var(--mfr-border);
  border-radius: 0.65rem;
  color: var(--mfr-text);
  display: grid;
  min-height: 76px;
  padding: 0.5rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-stats button:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-stats button:focus-visible { border-color: var(--mfr-brand); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-stats strong { font-size: 1.2rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-stats span { color: var(--mfr-muted); font-size: 0.61rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-list > button { grid-template-columns: 1fr auto; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-contract-list > button > span:last-child { text-align: right; }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid > button {
  align-items: center;
  background: var(--mfr-soft);
  border: 1px solid var(--mfr-border);
  border-radius: 0.75rem;
  color: var(--mfr-text);
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto 1fr auto auto;
  padding: 0.7rem;
  text-align: left;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-detail {
  border-top: 1px solid var(--mfr-border);
  color: var(--mfr-muted);
  font-size: 0.65rem;
  grid-column: 1 / -1;
  padding-top: 0.5rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-scope-pill {
  color: var(--mfr-muted);
  font-size: 0.66rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid > button:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid > button:focus-visible { border-color: var(--mfr-brand); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-date-block { color: var(--mfr-brand-deep); display: grid; font-size: 0.62rem; font-weight: 800; gap: 0.25rem; min-width: 57px; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid button > span:nth-child(2) { display: grid; font-size: 0.73rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid small { color: var(--mfr-muted); font-size: 0.62rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid em { border-radius: 99px; font-size: 0.61rem; font-style: normal; font-weight: 800; padding: 0.35rem 0.45rem; white-space: nowrap; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid .is-ready { background: rgb(77 195 197 / 13%); color: var(--mfr-brand-deep); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid .is-not-ready { background: rgb(220 90 104 / 12%); color: var(--mfr-red); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid .is-unknown { background: var(--mfr-track); color: var(--mfr-muted); }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-empty-inline {
  align-items: center;
  background: rgb(77 195 197 / 8%);
  border: 1px dashed rgb(77 195 197 / 45%);
  border-radius: 0.75rem;
  color: var(--mfr-brand-deep);
  display: flex;
  gap: 0.7rem;
  padding: 0.85rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-empty-inline p,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-no-data { color: var(--mfr-muted); font-size: 0.72rem; margin: 0; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-empty-inline strong { font-size: 0.78rem; }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard-footer {
  align-items: center;
  color: var(--mfr-muted);
  display: flex;
  font-size: 0.68rem;
  justify-content: space-between;
  padding: 0.25rem 0.2rem 1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard-footer button {
  background: none;
  border: 0;
  color: var(--mfr-brand-deep);
  font-weight: 800;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard-footer button svg { margin-right: 0.3rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard-loading,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard-state {
  align-items: center;
  background: var(--mfr-surface, #fff);
  border: 1px solid var(--mfr-border, #d7dee8);
  border-radius: 1rem;
  color: var(--mfr-text, #344767);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  justify-content: center;
  min-height: 280px;
  padding: 2rem;
  text-align: center;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard-state > svg { color: #4dc3c5; font-size: 2rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard-state h1,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard-state p { margin: 0; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard-state p { color: #667085; max-width: 620px; }

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .is-spinning { animation: mfr-spin 0.8s linear infinite; }
@keyframes mfr-spin { to { transform: rotate(360deg); } }

.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard {
  --mfr-text: #edf3f8;
  --mfr-muted: #aab6c5;
  --mfr-surface: #20252d;
  --mfr-soft: #292f38;
  --mfr-border: #3b4552;
  --mfr-track: #343d48;
}

.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-hero {
  background:
    radial-gradient(circle at 89% -30%, rgb(77 195 197 / 22%), transparent 41%),
    linear-gradient(135deg, #20252d, #252d35);
  box-shadow: 6px 6px 13px #171b20, -6px -6px 13px #303842;
}

.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-panel,
.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi {
  box-shadow: 5px 5px 11px #171b20, -5px -5px 11px #2e3640;
}

.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-quick-actions button { background: rgb(32 37 45 / 82%); }
.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi:hover,
.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi:focus-visible { box-shadow: 7px 7px 15px #15191e, -7px -7px 15px #313a44; }

/* Rounded translucent surfaces keep every existing dashboard control in place. */
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-hero {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0.75rem 0.25rem 1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-hero h1 {
  font-weight: 600;
  letter-spacing: -0.045em;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-panel,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-filter-panel {
  border-radius: 1.75rem;
  box-shadow: none;
  padding: 1.4rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-panel-heading h2 {
  font-weight: 600;
  letter-spacing: -0.025em;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-quick-actions button {
  background: var(--mfr-surface);
  border-radius: 1.25rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-kpi {
  --mfr-text: #fff;
  --mfr-muted: #fff;
  --mfr-brand-deep: #fff;
  background: #2854eb;
  border: 1px solid transparent;
  border-radius: 1.5rem;
  box-shadow: none;
  min-height: 205px;
  padding: 1.25rem 1.4rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-kpi--warning {
  --mfr-text: #151912;
  --mfr-muted: #394129;
  --mfr-brand-deep: #151912;
  background: #efeb53;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-kpi--teal {
  background: #3c7b8b;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-kpi--purple {
  background: #151912;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-kpi::before {
  display: none;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-kpi .mfr-kpi-icon {
  background: rgb(255 255 255 / 16%);
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--mfr-text);
  height: 36px;
  width: 36px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-kpi-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-kpi > strong {
  font-weight: 600;
  letter-spacing: -0.045em;
  margin-top: 0.45rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-kpi:hover {
  box-shadow: 0 8px 20px rgb(27 45 31 / 10%);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-filter-panel select,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-filter-panel input,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-apply-button,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-segmented,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-segmented button {
  border-radius: 999px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-filter-panel select,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-filter-panel input {
  padding-inline: 0.8rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-apply-button,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-segmented button[aria-pressed="true"] {
  background: #151912;
  border-color: #151912;
  box-shadow: none;
  color: #fff;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-attention-item,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-pipeline button,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-ranked-list > button,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-contract-list > button,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-upcoming-grid > button,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-contract-stats button {
  border-radius: 1.05rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-rank-icon {
  background: rgb(76 148 166 / 15%);
  border-radius: 50%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-bar-track > span {
  background: #4c94a6;
  border-radius: 0.65rem 0.65rem 0 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard .mfr-sales-table th {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard {
  --mfr-brand-deep: #9bb4ff;
  --mfr-red: #f398a3;
  --mfr-orange: #d8bd69;
}

@media (max-width: 1180px) {
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-filter-panel { grid-template-columns: repeat(3, 1fr); }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-filter-title { grid-column: 1 / -1; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-secondary-grid > :last-child { grid-column: 1 / -1; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-hero { flex-direction: column; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-quick-actions { width: 100%; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-quick-actions button { flex: 1; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-primary-grid,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard { gap: 0.75rem; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-hero,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-panel,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi { border-radius: 0.85rem; box-shadow: none; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-hero { padding: 1rem; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-quick-actions button { min-width: 0; padding: 0.55rem 0.25rem; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-filter-panel { grid-template-columns: 1fr; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-filter-title { grid-column: auto; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi-grid,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-secondary-grid,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid { grid-template-columns: 1fr; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-secondary-grid > :last-child { grid-column: auto; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi { min-height: 160px; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-pipeline { display: flex; overflow-x: auto; padding-bottom: 0.3rem; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-pipeline button { flex: 0 0 115px; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-inventory-visual { grid-template-columns: 125px 1fr; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid > button { grid-template-columns: auto 1fr auto; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid > button > svg:last-child { display: none; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-upcoming-grid em { grid-column: 2 / -1; justify-self: start; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table thead { display: none; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table tbody,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table tr,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table td { display: block; width: 100%; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table tr {
    background: var(--mfr-soft);
    border: 1px solid var(--mfr-border);
    border-radius: 0.7rem;
    margin-bottom: 0.55rem;
    overflow: hidden;
  }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table td {
    align-items: center;
    border-bottom: 1px solid var(--mfr-border);
    display: flex !important;
    gap: 0.75rem;
    justify-content: space-between;
    text-align: right;
  }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table td:last-child { border-bottom: 0; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-sales-table td::before {
    color: var(--mfr-muted);
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
  }
}

@media (prefers-reduced-motion: reduce) {
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard *,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard *::before,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard *::after {
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard button,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard input,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard select,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-panel,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-kpi,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-hero {
    border: 1px solid CanvasText;
    forced-color-adjust: auto;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard button:focus-visible,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard input:focus-visible,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .mfr-dashboard select:focus-visible {
    outline: 3px solid Highlight;
  }
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard {
  --sales-brand: #4c94a6;
  --sales-brand-deep: #2854eb;
  --sales-text: #151912;
  --sales-muted: #5c665f;
  --sales-surface: rgb(255 255 255 / 24%);
  --sales-border: rgb(48 66 54 / 10%);
  --sales-track: #dce5e2;
  --sales-orange: #aaa221;
  --sales-blue: #2854eb;
  --sales-purple: #4c6170;
  --sales-open: #dc5a68;
  color: var(--sales-text);
  width: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-hero {
  align-items: flex-start;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-scope-controls {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-mode-toggle {
  background: var(--sales-track);
  border: 1px solid var(--sales-border);
  border-radius: 0.75rem;
  display: inline-flex;
  padding: 0.2rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-mode-toggle button {
  background: transparent;
  border: 0;
  border-radius: 0.55rem;
  color: var(--sales-muted);
  font-size: 0.82rem;
  font-weight: 800;
  min-width: 92px;
  padding: 0.55rem 0.9rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-mode-toggle button.active {
  background: var(--sales-surface);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--sales-text) 18%, transparent);
  color: var(--sales-brand-deep);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-scope-controls label {
  color: var(--sales-muted);
  display: grid;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.2rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-scope-controls select {
  background: var(--sales-surface);
  border: 1px solid var(--sales-border);
  border-radius: 0.55rem;
  color: var(--sales-text);
  min-width: 190px;
  padding: 0.45rem 0.6rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-data-filters {
  background: color-mix(in srgb, var(--sales-brand) 6%, var(--sales-surface));
  border: 1px solid var(--sales-border);
  border-radius: 0.75rem;
  justify-content: flex-start;
  padding: 0.75rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-hero h1 {
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  margin: 0.1rem 0 0.35rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-hero p {
  color: var(--sales-muted);
  margin: 0;
  max-width: 780px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-context {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0.45rem;
  text-align: right;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-context > span:not(.sales-scope-pill) {
  color: var(--sales-muted);
  font-size: 0.82rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-section-kicker,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-eyebrow {
  color: var(--sales-brand-deep) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  margin: 0;
  text-transform: uppercase;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-scope-pill,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-count-badge {
  align-items: center;
  background: color-mix(in srgb, var(--sales-brand) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--sales-brand) 42%, transparent);
  border-radius: 999px;
  color: var(--sales-brand-deep);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 30px;
  padding: 0.45rem 0.7rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-count-badge {
  font-size: 1rem;
  min-width: 32px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-refreshing {
  animation: sales-pulse 1.4s ease-in-out infinite;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-card {
  background: var(--sales-surface);
  border: 1px solid var(--sales-border);
  border-radius: 1rem;
  box-shadow: none;
  min-height: 178px;
  overflow: hidden;
  padding: 1rem 1.1rem;
  position: relative;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-accent {
  border-radius: 0 0 8px 8px;
  height: 5px;
  left: 1rem;
  position: absolute;
  right: 1rem;
  top: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-card--teal .sales-kpi-accent,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-card--teal .sales-mini-progress__fill {
  background: var(--sales-brand);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-card--orange .sales-kpi-accent,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-card--orange .sales-mini-progress__fill {
  background: var(--sales-orange);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-card--blue .sales-kpi-accent,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-card--blue .sales-mini-progress__fill {
  background: var(--sales-blue);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-card--purple .sales-kpi-accent {
  background: var(--sales-purple);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-eyebrow {
  margin-top: 0.2rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-value {
  color: var(--sales-text) !important;
  font-size: clamp(1.55rem, 2.25vw, 2.15rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0.55rem 0 0.25rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-detail {
  color: var(--sales-muted) !important;
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0;
  min-height: 2.2em;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-mini-progress {
  align-items: center;
  background: var(--sales-track);
  border-radius: 999px;
  display: flex;
  height: 8px;
  margin-top: 0.8rem;
  overflow: visible;
  position: relative;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-mini-progress__fill {
  border-radius: inherit;
  height: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-mini-progress span {
  color: var(--sales-muted);
  font-size: 0.7rem;
  font-weight: 700;
  position: absolute;
  right: 0;
  top: 10px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-action {
  align-items: center;
  background: none;
  border: 0;
  color: var(--sales-purple);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 0.35rem;
  margin-top: 0.7rem;
  min-height: 32px;
  padding: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-action:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-action:focus-visible {
  color: var(--sales-brand-deep);
  text-decoration: underline;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-panel {
  margin-bottom: 1rem;
  min-height: 310px !important;
  padding: 1.15rem !important;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-grid .sales-panel {
  margin-bottom: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-panel h2 {
  color: var(--sales-text);
  font-size: 1.08rem;
  margin: 0.15rem 0 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-panel-heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-panel-description {
  color: var(--sales-muted) !important;
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0.65rem 0 1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-panel-action {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--sales-brand-deep);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.25rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-panel-action:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-panel-action:focus-visible {
  text-decoration: underline;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-period-toggle {
  background: var(--sales-track);
  border-radius: 999px;
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-period-toggle button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--sales-muted);
  font-size: 0.75rem;
  font-weight: 800;
  min-height: 32px;
  min-width: 38px;
  padding: 0.35rem 0.65rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-period-toggle button.active {
  background: var(--sales-brand);
  color: #ffffff;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-period-toggle button:focus-visible,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-action:focus-visible,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-event:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sales-brand) 50%, transparent);
  outline-offset: 2px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-goal-summary {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-goal-summary strong {
  color: var(--sales-brand-deep);
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: 1;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-goal-summary span {
  color: var(--sales-muted);
  font-size: 0.85rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-goal-track-wrap {
  margin-top: 3rem;
  padding-right: 1px;
  position: relative;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-goal-markers {
  inset: -1.6rem 0 auto;
  position: absolute;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-goal-markers span {
  color: var(--sales-muted);
  font-size: 0.65rem;
  position: absolute;
  transform: translateX(-100%);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-goal-markers span::after {
  background: color-mix(in srgb, var(--sales-muted) 35%, transparent);
  content: "";
  height: 20px;
  position: absolute;
  right: 0;
  top: 1.15rem;
  width: 1px;
  z-index: 2;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-goal-track {
  background: var(--sales-track);
  border-radius: 999px;
  height: 22px;
  overflow: hidden;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-goal-track > div {
  background: linear-gradient(90deg, var(--sales-brand-deep), var(--sales-brand));
  border-radius: inherit;
  height: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-over-target {
  color: var(--sales-brand-deep) !important;
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0.7rem 0 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-po-stack {
  background: var(--sales-track);
  border-radius: 999px;
  display: flex;
  height: 32px;
  margin-top: 2.4rem;
  overflow: hidden;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-po-stack__attached {
  background: linear-gradient(90deg, var(--sales-brand-deep), var(--sales-brand));
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-po-stack__open {
  background: var(--sales-open);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-po-legend {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.5rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-po-legend > div {
  align-items: center;
  display: grid;
  gap: 0.25rem 0.5rem;
  grid-template-columns: auto 1fr;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-po-legend span:not(.sales-dot) {
  color: var(--sales-muted);
  font-size: 0.78rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-po-legend strong {
  color: var(--sales-text);
  font-size: 1rem;
  grid-column: 2;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dot {
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  width: 10px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dot--attached {
  background: var(--sales-brand);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dot--open {
  background: var(--sales-open);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-chart {
  color: var(--sales-muted);
  height: 300px;
  margin-top: 0.75rem;
  width: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-chart--compact {
  height: 245px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-chart .recharts-cartesian-axis-tick-value {
  fill: var(--sales-muted);
  font-size: 0.7rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-chart .recharts-default-tooltip {
  background: var(--sales-surface) !important;
  border: 1px solid var(--sales-border) !important;
  border-radius: 0.7rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-empty-state {
  align-items: center;
  background: color-mix(in srgb, var(--sales-track) 78%, transparent);
  border: 1px dashed var(--sales-border);
  border-radius: 0.8rem;
  color: var(--sales-muted);
  display: flex;
  font-size: 0.82rem;
  justify-content: center;
  margin-top: 1rem;
  min-height: 170px;
  padding: 1rem;
  text-align: center;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-empty-state--compact {
  min-height: 92px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-list {
  display: grid;
  gap: 0.5rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-row {
  align-items: center;
  background: color-mix(in srgb, var(--sales-track) 55%, transparent);
  border: 1px solid var(--sales-border);
  border-left: 4px solid var(--sales-open);
  border-radius: 0.75rem;
  color: var(--sales-text);
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(180px, 1.4fr) minmax(130px, 0.8fr) auto auto;
  min-height: 64px;
  padding: 0.65rem 0.8rem;
  text-align: left;
  width: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-row:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-row:focus-visible {
  border-color: var(--sales-brand);
  transform: translateY(-1px);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-row:focus-visible,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-panel-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sales-brand) 50%, transparent);
  outline-offset: 2px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-case strong,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-value {
  color: var(--sales-text);
  display: block;
  font-size: 0.84rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-case small,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-sent,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-sent small {
  color: var(--sales-muted);
  display: block;
  font-size: 0.7rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-sent small {
  color: var(--sales-text);
  font-weight: 700;
  margin-top: 0.15rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-value {
  text-align: right;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-product-list,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-product-list {
  display: grid;
  gap: 0.85rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-product-list li {
  align-items: center;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-product-list li > div strong,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-member strong {
  color: var(--sales-text);
  display: block;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-product-list li > span:last-child {
  color: var(--sales-text);
  font-size: 0.78rem;
  text-align: right;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-product-list small,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-result span {
  color: var(--sales-muted);
  display: block;
  font-size: 0.68rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-rank {
  align-items: center;
  background: color-mix(in srgb, var(--sales-brand) 15%, transparent);
  border-radius: 50%;
  color: var(--sales-brand-deep);
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  width: 28px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-product-track,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-track {
  background: var(--sales-track);
  border-radius: 999px;
  height: 6px;
  margin-top: 0.35rem;
  overflow: hidden;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-product-track span,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-track span {
  background: var(--sales-brand);
  border-radius: inherit;
  display: block;
  height: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-list {
  display: grid;
  gap: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-list li {
  align-items: center;
  border-top: 1px solid var(--sales-border);
  display: grid;
  gap: 0.9rem;
  grid-template-columns: auto minmax(140px, 1fr) minmax(130px, auto);
  padding: 0.85rem 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-list li:first-child {
  border-top: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-result {
  text-align: right;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-result strong {
  color: var(--sales-text);
  display: block;
  font-size: 0.9rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-distributorship {
  align-items: center;
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--sales-brand) 14%, var(--sales-surface)),
      var(--sales-surface) 58%
    );
  border: 1px solid color-mix(in srgb, var(--sales-brand) 45%, var(--sales-border));
  border-radius: 1rem;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--sales-text) 10%, transparent);
  color: var(--sales-text);
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 148px;
  padding: 1.25rem;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  width: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-distributorship:hover {
  border-color: var(--sales-brand);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--sales-text) 14%, transparent);
  transform: translateY(-2px);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-distributorship:focus-visible,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-list button:focus-visible,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-unassigned-team:focus-visible,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-path button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sales-brand) 50%, transparent);
  outline-offset: 2px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-mark,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-contributor-avatar {
  align-items: center;
  background: linear-gradient(135deg, var(--sales-brand), var(--sales-brand-deep));
  border-radius: 0.9rem;
  color: #ffffff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 900;
  height: 54px;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 54px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-copy,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-result,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-copy,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-result,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-selected-team-summary > span:nth-child(2) {
  display: block;
  min-width: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-copy small,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-selected-team-summary small,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-copy small,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-unassigned-team small {
  color: var(--sales-muted);
  display: block;
  font-size: 0.7rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-copy > small,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-selected-team-summary > span:nth-child(2) > small {
  color: var(--sales-brand-deep);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-copy > strong {
  display: block;
  font-size: 1.2rem;
  margin: 0.15rem 0 0.25rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-copy > span,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-selected-team-summary > span:nth-child(2) > span {
  color: var(--sales-muted);
  display: block;
  font-size: 0.78rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-result {
  text-align: right;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-result strong {
  display: block;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-result span {
  color: var(--sales-brand-deep);
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  margin-top: 0.4rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-level {
  animation: sales-hierarchy-enter 180ms ease-out;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-path {
  align-items: center;
  color: var(--sales-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.72rem;
  gap: 0.4rem;
  margin: -0.15rem 0 0.85rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-path button {
  background: transparent;
  border: 0;
  color: var(--sales-brand-deep);
  font-size: inherit;
  font-weight: 800;
  padding: 0.2rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-path button:hover {
  text-decoration: underline;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-path strong {
  color: var(--sales-text);
  font-weight: 800;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-level-heading {
  align-items: flex-end;
  background: color-mix(in srgb, var(--sales-track) 52%, transparent);
  border: 1px solid var(--sales-border);
  border-radius: 0.8rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.8rem 0.9rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-level-heading strong,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-level-heading span {
  display: block;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-level-heading > div > strong {
  color: var(--sales-text);
  font-size: 0.88rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-level-heading > div > span {
  color: var(--sales-muted);
  font-size: 0.7rem;
  margin-top: 0.15rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-level-heading > span {
  color: var(--sales-text);
  font-size: 0.95rem;
  font-weight: 900;
  white-space: nowrap;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-list,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-contributor-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-list li + li,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-contributor-list li + li {
  border-top: 1px solid var(--sales-border);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-list button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--sales-text);
  display: grid;
  gap: 0.85rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.85rem 0.35rem;
  text-align: left;
  transition: background-color 160ms ease, padding 160ms ease;
  width: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-list button:hover {
  background: color-mix(in srgb, var(--sales-brand) 7%, transparent);
  border-radius: 0.7rem;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-copy > strong,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-result > strong {
  color: var(--sales-text);
  display: block;
  font-size: 0.86rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-result {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  text-align: right;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-result > span,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-unassigned-team > span:last-child > span {
  color: var(--sales-brand-deep);
  font-size: 1rem;
  font-weight: 900;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-unassigned-team {
  align-items: center;
  background: color-mix(in srgb, var(--sales-orange) 7%, var(--sales-surface));
  border: 1px dashed color-mix(in srgb, var(--sales-orange) 55%, var(--sales-border));
  border-radius: 0.75rem;
  color: var(--sales-text);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding: 0.7rem 0.85rem;
  text-align: left;
  width: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-unassigned-team > span:last-child {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  text-align: right;
  white-space: nowrap;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-selected-team-summary {
  align-items: center;
  background: color-mix(in srgb, var(--sales-brand) 8%, var(--sales-surface));
  border: 1px solid color-mix(in srgb, var(--sales-brand) 38%, var(--sales-border));
  border-radius: 0.9rem;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.9rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-selected-team-summary > span:nth-child(2) > strong {
  color: var(--sales-text);
  display: block;
  font-size: 0.95rem;
  margin: 0.1rem 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-selected-team-summary > strong {
  color: var(--sales-text);
  font-size: 1.05rem;
  text-align: right;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-contributor-list li {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(110px, auto);
  padding: 0.8rem 0.25rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-contributor-avatar {
  border-radius: 50%;
  font-size: 0.68rem;
  height: 34px;
  width: 34px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-contributor-name {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  min-width: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-contributor-name > strong {
  min-width: 0;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-contributor-name > small {
  background: color-mix(in srgb, var(--sales-purple) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sales-purple) 32%, transparent);
  border-radius: 999px;
  color: var(--sales-purple);
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.18rem 0.4rem;
}

@keyframes sales-hierarchy-enter {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-event-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-event {
  align-items: center;
  background: color-mix(in srgb, var(--sales-track) 55%, transparent);
  border: 1px solid var(--sales-border);
  border-left: 4px solid var(--sales-orange);
  border-radius: 0.75rem;
  color: var(--sales-text);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 65px minmax(0, 1fr) auto;
  min-height: 68px;
  padding: 0.65rem 0.75rem;
  text-align: left;
  width: 100%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-event:hover {
  border-color: var(--sales-brand);
  transform: translateY(-1px);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-event-time {
  color: var(--sales-brand-deep);
  font-size: 0.78rem;
  font-weight: 800;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-event-time small,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-event-copy span,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-event-copy small {
  color: var(--sales-muted);
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-event-copy strong {
  display: block;
  font-size: 0.82rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-calendar {
  display: flex;
  justify-content: center;
  margin-top: 0.6rem;
  overflow-x: auto;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-custom-goals {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-custom-goals article {
  background: color-mix(in srgb, var(--sales-track) 60%, transparent);
  border: 1px solid var(--sales-border);
  border-radius: 0.8rem;
  padding: 0.85rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-custom-goals article > div:first-child {
  align-items: flex-start;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-custom-goals article span,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-custom-goals article p {
  color: var(--sales-muted);
  font-size: 0.75rem;
  margin: 0.35rem 0;
}

/* Scheduled cases use the same Created/active primary as the Cases module. */
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-calendar .react-datepicker__day--highlighted,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-calendar .react-datepicker__day--highlighted:hover {
  background-color: var(--sales-case-created, #cb0c9f);
  color: #fff;
}

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

html.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard {
  --sales-text: #f1f3f8;
  --sales-muted: #aab0c2;
  --sales-surface: #272938;
  --sales-border: #464a58;
  --sales-track: #161721;
  --sales-brand-deep: #63d4d6;
}

html.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-card {
  box-shadow: 3px 3px 6px #161721, -3px -3px 6px #16172180;
}

/* Reference theme: soft glass panels and distinct, readable metric tiles. */
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-dashboard-hero {
  padding: 0.5rem 0.25rem 0.75rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-dashboard-hero h1 {
  font-weight: 600;
  letter-spacing: -0.045em;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-panel {
  background: var(--sales-surface);
  border: 1px solid var(--sales-border);
  border-radius: 1.75rem;
  box-shadow: none;
  padding: 1.5rem !important;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-panel h2 {
  font-weight: 600;
  letter-spacing: -0.025em;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-kpi-card {
  --sales-text: #fff;
  --sales-muted: #fff;
  --sales-brand-deep: #fff;
  --sales-track: rgb(255 255 255 / 24%);
  background: #2854eb;
  border: 1px solid transparent;
  border-radius: 1.5rem;
  box-shadow: none;
  min-height: 190px;
  padding: 1.3rem 1.4rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-kpi-card--orange {
  --sales-text: #151912;
  --sales-muted: #394129;
  --sales-brand-deep: #151912;
  --sales-track: rgb(21 25 18 / 13%);
  background: #efeb53;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-kpi-card--blue {
  background: #3c7b8b;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-kpi-card--purple {
  background: #151912;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-kpi-accent {
  display: none;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-kpi-eyebrow {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-kpi-value {
  font-weight: 600;
  letter-spacing: -0.045em;
  margin-top: 0.9rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-kpi-action {
  color: #efeb53;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-kpi-card .sales-mini-progress__fill {
  background: currentColor;
  color: var(--sales-text);
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-mode-toggle,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-mode-toggle button,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-dashboard-scope-controls select {
  border-radius: 999px;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-mode-toggle button.active,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-period-toggle button.active {
  background: #151912;
  box-shadow: none;
  color: #fff;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-dashboard-data-filters {
  background: var(--sales-surface);
  border-radius: 1.4rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-dashboard-scope-controls select {
  min-height: 40px;
  padding-inline: 1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-hierarchy-distributorship {
  background: var(--sales-surface);
  border-radius: 1.4rem;
  box-shadow: none;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-hierarchy-mark,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-contributor-avatar {
  background: #2854eb;
  border-radius: 50%;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-event,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-open-po-row,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-custom-goals article {
  border-radius: 1.1rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-chart .recharts-default-tooltip {
  background: #f7faf5 !important;
  color: #151912;
}

html.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard .sales-chart .recharts-default-tooltip {
  background: #202922 !important;
  color: #f1f3f8;
}

@media (max-width: 1199.98px) {
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-scope-controls {
    align-items: stretch;
    flex-direction: column;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-mode-toggle,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-scope-controls select {
    width: 100%;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-mode-toggle button {
    flex: 1;
    min-width: 0;
  }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-hero {
    flex-direction: column;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-context {
    align-items: flex-start;
    text-align: left;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard-grid--two {
    grid-template-columns: 1fr;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-panel-heading {
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-grid {
    grid-template-columns: 1fr;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-kpi-card {
    min-height: 160px;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-period-toggle {
    width: 100%;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-period-toggle button {
    flex: 1;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-po-legend {
    grid-template-columns: 1fr;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-distributorship {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1rem;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-result {
    grid-column: 1 / -1;
    padding-left: 0;
    text-align: left;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-hierarchy-level-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-list button {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-unit-result {
    grid-column: 2;
    justify-content: space-between;
    text-align: left;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-selected-team-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-selected-team-summary > strong {
    grid-column: 2;
    text-align: left;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-contributor-list li {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-contributor-list .sales-team-result {
    grid-column: 3;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-unassigned-team {
    align-items: flex-start;
    flex-direction: column;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-unassigned-team > span:last-child {
    text-align: left;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-list li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-team-result {
    grid-column: 2;
    text-align: left;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-sent {
    grid-column: 1;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-value {
    grid-column: 2;
    grid-row: 1;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-open-po-row > span:last-child {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }

  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-event {
    grid-template-columns: 55px minmax(0, 1fr) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard *,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard *::before,
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sales-dashboard *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dashboard-only shell. Shared navigation behavior and other pages stay intact. */
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) {
  display: flow-root;
  min-height: 100vh;
  color: #191e1b;
  background:
    radial-gradient(ellipse at 92% 12%, #eff2cd 0, transparent 48%),
    radial-gradient(ellipse at 15% 48%, #bfd6ed 0, transparent 52%),
    linear-gradient(115deg, #c2d8ed 0%, #d7e5df 60%, #e8edcf 100%);
  font-family: "Inter", "Poppins", sans-serif;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .main-content { margin-top: 0; min-height: 100vh; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .main-content > .container-fluid { padding: 1.5rem 2rem !important; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .inner-page-title2 {
  color: #181d19;
  font-size: clamp(1.65rem, 2.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  margin-bottom: 1.5rem;
}

#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main {
  background: rgb(245 249 239 / 32%) !important;
  border: 1px solid rgb(255 255 255 / 48%) !important;
  border-radius: 999px;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  min-height: 62px;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main .nav-item { color: #343e35; font-size: .8rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main .font-24 { font-size: 1.3rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main .dropdown-menu {
  background: #f5f7ee;
  border: 1px solid #d8dfd5;
  border-radius: 20px;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main .dropdown-menu:not(.show) { display: none; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main .rounded-circle { outline: 4px solid rgb(255 255 255 / 60%); }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav {
  background: #20271b !important;
  border-radius: 30px;
  box-shadow: 0 12px 35px rgb(32 39 27 / 8%) !important;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav .sidenav-header {
  background: rgb(255 255 255 / 94%);
  border-radius: 22px;
  margin: 12px 10px 20px;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav .navbar-brand { padding: 1rem; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav .menu__link {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none !important;
  color: #e6ecd9 !important;
  border-radius: 999px;
  font-weight: 400;
  padding: .85rem 1rem;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav .menu__link:hover,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav .sidenav-link:hover { background: #353e2c; color: #fff; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav .menu__link.bg-primary,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav .sidenav-link.active {
  background: #efeb53 !important;
  color: #20271b !important;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav .sidenav-link,
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav .logout-btn { color: #e6ecd9; box-shadow: none !important; border-radius: 16px; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav .sidebar-close { color: #fff; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidebar-tab-open { color: #20271b; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) :is(button, a, select, input):focus-visible { outline: 3px solid #2854eb; outline-offset: 3px; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidenav :is(button, a):focus-visible { outline-color: #efeb53; }
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .dashboardBoxOpening {
  background: rgb(255 255 255 / 24%) !important;
  border: 1px solid rgb(255 255 255 / 50%) !important;
  border-radius: 26px;
  box-shadow: none !important;
}
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) footer.footer {
  position: static;
  width: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  margin-top: 1.5rem;
}
/* Preserve an explicitly selected app dark theme, independently of OS preference. */
.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) {
  background: linear-gradient(115deg, #19252d, #222b23 65%, #303321);
  color: #edf3f8;
}
.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .inner-page-title2 { color: #edf3f8; }
.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main {
  background: rgb(32 41 34 / 96%) !important;
  border-color: #465044 !important;
}
.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main .nav-item,
.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main .nav-link,
.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .sidebar-tab-open { color: #edf3f8 !important; }
.dark #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main .dropdown-menu {
  background: #202922 !important;
  border-color: #465044 !important;
}
@media (max-width: 767px) {
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .main-content > .container-fluid { padding: 1rem !important; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main { margin-left: .75rem !important; margin-right: .75rem !important; border-radius: 24px; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main .nav-item { font-size: .68rem; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .navbar-main .nav-item > span { max-width: 150px; overflow-wrap: anywhere; }
  #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .inner-page-title2 { margin-bottom: 1rem; }
}

/* Light washes and blurred color beneath create glass without fading content. */
#root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) :is(.sales-panel, .sales-dashboard-data-filters, .mfr-panel, .mfr-filter-panel, .mfr-quick-actions button) {
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
  border-color: rgb(255 255 255 / 38%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), 0 6px 24px rgb(50 74 68 / 3%);
}