/* Dashboard - Solo estilos que css-zero no provee */

/* Grid layouts */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--size-4);
}

.panels-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--size-4);

  @media (max-width: 64rem) {
    grid-template-columns: 1fr;
  }
}

/* Stat icons con colores */
.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--rounded-lg);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.stat-icon--blue {
  background-color: var(--blue-100);
  color: var(--blue-600);
}

.stat-icon--orange {
  background-color: var(--orange-100);
  color: var(--orange-600);
}

.stat-icon--green {
  background-color: var(--green-100);
  color: var(--green-600);
}

.stat-icon--purple {
  background-color: var(--purple-100);
  color: var(--purple-600);
}

/* Upcoming time badge */
.upcoming-time {
  background-color: var(--blue-600);
  min-width: 60px;
}

.recent-appointment {
  background-color: var(--zinc-300);
  min-width: 60px;
}

/* Activity dot */
.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--rounded-full);
  flex-shrink: 0;
  margin-top: 6px;
}

.activity-dot--success {
  background-color: var(--green-600);
}

.activity-dot--warning {
  background-color: var(--yellow-500);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--size-1) var(--size-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--rounded-md);
  white-space: nowrap;
}

.badge--success {
  background-color: var(--green-100);
  color: var(--green-800);
}

.badge--warning {
  background-color: var(--yellow-100);
  color: var(--yellow-800);
}

.badge--info {
  background-color: var(--blue-100);
  color: var(--blue-800);
}

/* Button small variant */
.btn--sm {
  padding: var(--size-1) var(--size-3);
  font-size: var(--text-sm);
}