/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[3]!./app/(main)/dashboard.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* Coluna em flex para o card ocupar a altura */
.grid > [class*="col-"].flex { display: flex; }

/* Card com layout vertical e alturas consistentes */
.kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .75rem;
  min-height: 168px;
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}
.kpi-card::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 60%, transparent 100%);
  opacity: .3; mix-blend-mode: overlay;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }

.kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.icon-wrap { width: 44px; height: 44px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

.kpi-foot { margin-top: .5rem; display: flex; align-items: center; gap: .5rem; min-height: 40px; flex-wrap: wrap; }
.kpi-subline { white-space: nowrap; text-wrap: balance; line-height: 1.1; }

.trend-badge { display: inline-flex; gap: .4rem; align-items: center; font-size: .85rem; line-height: 1; padding: .45rem .6rem; border-radius: 999px; border: 1px solid transparent; }
.trend-badge b { font-weight: 600; }
.trend-up   { color: var(--green-700, #15803D);  background: color-mix(in oklab, var(--green-100, #DCFCE7) 75%, transparent);  border-color: color-mix(in oklab, var(--green-500, #22C55E) 25%, transparent); }
.trend-down { color: var(--orange-700, #B45309); background: color-mix(in oklab, var(--orange-100, #FFEDD5) 75%, transparent); border-color: color-mix(in oklab, var(--orange-500, #F59E0B) 25%, transparent); }

.chart-card { overflow: hidden; }
.chart-card h5 { font-weight: 700; letter-spacing: .2px; }

/* altura responsiva do canvas do gráfico */
.chart-box { height: clamp(240px, 34vh, 360px); }