:root {
  --dash-ink: #112b2a;
  --dash-muted: #667876;
  --dash-teal: #0f8f83;
  --dash-teal-soft: #e9f8f5;
  --dash-green: #2f9e63;
  --dash-green-soft: #edf9f2;
  --dash-blue: #3277c9;
  --dash-blue-soft: #edf5ff;
  --dash-violet: #7662c8;
  --dash-violet-soft: #f2effc;
  --dash-amber: #c88719;
  --dash-amber-soft: #fff7e8;
  --dash-rose: #c25769;
  --dash-rose-soft: #fff0f3;
  --dash-cyan: #248eaa;
  --dash-cyan-soft: #ebf8fb;
  --dash-border: #d9e6e4;
  --dash-shadow: 0 16px 38px rgb(32 72 68 / 8%);
}

.dashboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin: .8rem 0 1rem;
  padding: 1.45rem 1.55rem;
  border: 1px solid #b9ddd8;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 90% 15%, rgb(255 255 255 / 78%) 0 8%, transparent 30%),
    linear-gradient(135deg, #e5f7f3 0%, #f7fbfb 48%, #edf4ff 100%);
  box-shadow: var(--dash-shadow);
}

.dashboard-hero h1 {
  margin: .18rem 0 .35rem;
  color: #0a2826;
}

.dashboard-hero p:last-child {
  margin: 0;
  color: #536b68;
}

.dashboard-hero-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.dashboard-live-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .75rem;
  border: 1px solid #badbd6;
  border-radius: 999px;
  background: rgb(255 255 255 / 72%);
  color: #35605c;
  font-size: .8rem;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-live-badge i {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #33aa71;
  box-shadow: 0 0 0 .25rem rgb(51 170 113 / 14%);
}

.dashboard-period-card {
  border-color: #cbdedb;
  box-shadow: 0 10px 28px rgb(31 70 67 / 6%);
}

.dashboard-period-card small {
  color: var(--dash-muted);
}

.dashboard-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.35rem 0 .75rem;
}

.dashboard-section-heading h2 {
  margin: .18rem 0 0;
  color: var(--dash-ink);
}

.dashboard-section-heading > p {
  margin: 0;
  color: var(--dash-muted);
  font-size: .86rem;
}

.compact-heading {
  margin-top: 1rem;
}

.executive-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

.executive-metric,
.operational-metric {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dash-border);
  background: #fff;
  box-shadow: 0 12px 28px rgb(31 70 67 / 7%);
}

.executive-metric {
  display: grid;
  gap: .55rem;
  min-height: 10.4rem;
  padding: 1.05rem 1.05rem 1rem;
  border-radius: 1rem;
}

.executive-metric::after {
  content: "";
  position: absolute;
  inset: auto -2rem -3rem auto;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .055;
}

.executive-metric > span,
.operational-metric > span {
  color: var(--dash-muted);
  font-size: .82rem;
  font-weight: 750;
}

.executive-metric > strong {
  color: var(--dash-ink);
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.metric-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .7rem;
  background: rgb(255 255 255 / 64%);
  color: currentColor;
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 55%);
}

.metric-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
}

.metric-footer small {
  color: var(--dash-muted);
  font-size: .72rem;
  text-align: right;
}

.metric-sales {
  color: var(--dash-teal);
  border-color: #a7d9d2;
  background: linear-gradient(145deg, #e8f8f5, #fff 78%);
}

.metric-profit {
  color: var(--dash-green);
  border-color: #b5dec4;
  background: linear-gradient(145deg, #eaf8ef, #fff 78%);
}

.metric-result {
  color: var(--dash-blue);
  border-color: #bad2ee;
  background: linear-gradient(145deg, #ebf4fe, #fff 78%);
}

.metric-projection {
  color: var(--dash-violet);
  border-color: #cfc5ef;
  background: linear-gradient(145deg, #f0edfb, #fff 78%);
}

.metric-collections {
  color: var(--dash-cyan);
  border-color: #b9dce4;
  background: linear-gradient(145deg, #eaf7fa, #fff 78%);
}

.metric-change {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  width: fit-content;
  padding: .28rem .48rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 850;
  white-space: nowrap;
}

.change-up {
  background: #e4f5ea;
  color: #237947;
}

.change-down {
  background: #fff0f2;
  color: #af4659;
}

.change-stable {
  background: #edf2f2;
  color: #58706d;
}

.change-new {
  background: #eeeafb;
  color: #6853b3;
}

.operational-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
}

.operational-metric {
  display: grid;
  gap: .3rem;
  min-height: 7.2rem;
  padding: .9rem;
  border-radius: .9rem;
  border-top-width: .28rem;
}

.operational-metric strong {
  color: var(--dash-ink);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  overflow-wrap: anywhere;
}

.operational-metric small {
  color: var(--dash-muted);
  font-size: .72rem;
}

.operational-metric .metric-change {
  display: inline-flex;
  margin-right: .2rem;
}

.metric-receivable { border-top-color: var(--dash-amber); background: var(--dash-amber-soft); }
.metric-payable { border-top-color: var(--dash-rose); background: var(--dash-rose-soft); }
.metric-purchase { border-top-color: var(--dash-blue); background: var(--dash-blue-soft); }
.metric-expense { border-top-color: #d66b50; background: #fff2ee; }
.metric-inventory { border-top-color: var(--dash-violet); background: var(--dash-violet-soft); }

.dashboard-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .75fr);
  gap: 1rem;
  margin-top: 1rem;
}

.secondary-analytics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-card {
  min-width: 0;
  border-color: #d4e2e0;
  box-shadow: var(--dash-shadow);
}

.analytics-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}

.analytics-heading h2 {
  margin: .18rem 0 0;
  color: var(--dash-ink);
}

.analytics-heading a {
  color: #08746b;
  font-weight: 800;
  text-decoration: none;
}

.chart-legend {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  color: #5f7370;
  font-size: .72rem;
  font-weight: 750;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.chart-legend i {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
}

.legend-sales i { background: var(--dash-teal); }
.legend-purchases i { background: var(--dash-blue); }
.legend-expenses i { background: #d86d51; }

.trend-chart-wrap {
  min-height: 15rem;
}

.trend-chart {
  display: block;
  width: 100%;
  height: 14rem;
  overflow: visible;
}

.chart-grid-line {
  stroke: #dce8e6;
  stroke-width: .35;
  stroke-dasharray: 1.5 1.5;
}

.chart-line {
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart-line-sales { stroke: var(--dash-teal); }
.chart-line-purchases { stroke: var(--dash-blue); }
.chart-line-expenses { stroke: #d86d51; }

.chart-dot {
  stroke: #fff;
  stroke-width: .55;
  vector-effect: non-scaling-stroke;
}

.dot-sales { fill: var(--dash-teal); }
.dot-purchases { fill: var(--dash-blue); }
.dot-expenses { fill: #d86d51; }

.trend-axis {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  color: #758582;
  font-size: .7rem;
}

.donut-layout {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 1fr);
  align-items: center;
  gap: .75rem;
}

.donut-chart {
  width: 100%;
  max-width: 12rem;
  margin: 0 auto;
  transform: rotate(-90deg);
}

.donut-track,
.donut-value {
  fill: none;
  stroke-width: 4.4;
}

.donut-track { stroke: #f0d5a5; }
.donut-value {
  stroke: var(--dash-teal);
  stroke-linecap: round;
}

.donut-number,
.donut-label {
  fill: var(--dash-ink);
  text-anchor: middle;
  transform: rotate(90deg);
  transform-origin: 21px 21px;
}

.donut-number {
  font-size: 6px;
  font-weight: 900;
}

.donut-label {
  fill: #697c79;
  font-size: 2.6px;
}

.donut-details {
  display: grid;
  gap: .7rem;
}

.donut-details > div {
  display: grid;
  gap: .15rem;
  padding: .65rem;
  border: 1px solid #dce7e5;
  border-radius: .75rem;
  background: #fbfdfd;
}

.donut-details span {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: #647572;
  font-size: .75rem;
}

.donut-details i {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
}

.dot-paid { background: var(--dash-teal); }
.dot-balance { background: #e2ad4f; }

.chart-note {
  display: block;
  margin-top: .8rem;
  color: #74827f;
  font-size: .72rem;
}

.projection-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #cfc5ee;
  border-radius: 1rem;
  background: linear-gradient(135deg, #f2effc, #fbfaff);
  box-shadow: 0 12px 28px rgb(82 64 139 / 8%);
}

.projection-strip > div {
  display: grid;
  gap: .25rem;
  padding: .35rem .6rem;
  border-right: 1px solid #ddd5f4;
}

.projection-strip > div:nth-child(3) {
  border-right: 0;
}

.projection-strip span,
.projection-strip p {
  color: #6f668d;
  font-size: .75rem;
}

.projection-strip strong {
  color: #3e326d;
  font-size: 1.15rem;
}

.projection-strip p {
  grid-column: 1 / -1;
  margin: .2rem .6rem 0;
}

.visual-ranking {
  display: grid;
  gap: .8rem;
}

.visual-ranking-row {
  display: grid;
  gap: .42rem;
}

.visual-ranking-row > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .65rem;
}

.visual-ranking-row strong {
  color: var(--dash-ink);
  font-size: .86rem;
}

.visual-ranking-row span {
  color: var(--dash-muted);
  font-size: .72rem;
  text-align: right;
}

.visual-ranking-row svg {
  display: block;
  width: 100%;
  height: .45rem;
}

.bar-track { fill: #e7efee; }
.bar-sales { fill: var(--dash-teal); }
.bar-inventory { fill: var(--dash-violet); }

.dashboard-alert-panel {
  margin-top: 1rem;
  border-color: #e5c26f;
  background: #fffbf2;
}

.dashboard-health-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: 1px solid #b9ddc7;
  border-radius: .9rem;
  background: #eff9f2;
}

.dashboard-health-strip > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #d9f1e1;
  color: #26804d;
  font-weight: 900;
}

.dashboard-health-strip strong,
.dashboard-health-strip small {
  display: block;
}

.dashboard-health-strip small {
  margin-top: .12rem;
  color: #61746e;
}

.dashboard-health-strip a {
  color: #237349;
  font-weight: 800;
  text-decoration: none;
}

.recent-panel {
  margin-top: 1rem;
  box-shadow: var(--dash-shadow);
}

.operation-sale { border-left: .28rem solid var(--dash-teal); }
.operation-purchase { border-left: .28rem solid var(--dash-blue); }
.operation-expense { border-left: .28rem solid #d86d51; }

@media (max-width: 1120px) {
  .executive-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operational-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  .dashboard-analytics-grid,
  .secondary-analytics-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-hero,
  .dashboard-section-heading,
  .analytics-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-hero-actions {
    justify-content: space-between;
  }

  .chart-legend {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .dashboard-hero {
    padding: 1.1rem;
  }

  .dashboard-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-hero-actions .button {
    width: 100%;
  }

  .executive-metric-grid,
  .operational-metric-grid,
  .projection-strip {
    grid-template-columns: 1fr;
  }

  .executive-metric {
    min-height: 9.4rem;
  }

  .metric-footer,
  .visual-ranking-row > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .metric-footer small,
  .visual-ranking-row span {
    text-align: left;
  }

  .donut-layout {
    grid-template-columns: 1fr;
  }

  .donut-chart {
    max-width: 10rem;
  }

  .projection-strip > div {
    border-right: 0;
    border-bottom: 1px solid #ddd5f4;
  }

  .projection-strip > div:nth-child(3) {
    border-bottom: 0;
  }

  .projection-strip p {
    grid-column: auto;
  }

  .dashboard-health-strip {
    grid-template-columns: auto 1fr;
  }

  .dashboard-health-strip a {
    grid-column: 1 / -1;
  }
}