.dashboard-widget-card {
  container-type: inline-size;
}

.dashboard-widget-content {
  padding: clamp(0.75rem, 3cqi, 1.5rem);
}

.dashboard-widget-card .dashboard-widget-title {
  font-size: clamp(0.6875rem, 2.2cqi, 0.9375rem);
  line-height: 1.25;
}

.dashboard-widget-card .text-xs,
.dashboard-widget-card .font-mono {
  font-size: clamp(0.6875rem, 2.1cqi, 0.875rem);
  line-height: 1.35;
}

.dashboard-widget-card .text-sm {
  font-size: clamp(0.8125rem, 2.35cqi, 1rem);
  line-height: 1.45;
}

.dashboard-widget-card .dashboard-metric-value {
  font-size: clamp(1.75rem, 8cqi, 4.5rem);
  line-height: 1;
}

.dashboard-widget-card,
.dashboard-widget-card .dashboard-widget-title,
.dashboard-widget-card .dashboard-metric-value,
.dashboard-widget-card .text-xs,
.dashboard-widget-card .text-sm {
  transition: font-size 160ms ease, padding 160ms ease, box-shadow 160ms ease;
}

.layout .react-grid-item > .react-resizable-handle {
  width: 28px;
  height: 28px;
  opacity: 0.9;
  z-index: 30;
}

.layout .react-grid-item > .react-resizable-handle::after {
  right: 5px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border-right-color: hsl(var(--foreground) / 0.7);
  border-bottom-color: hsl(var(--foreground) / 0.7);
}

.layout .react-grid-item.resizing .dashboard-widget-card {
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

.dashboard-shortcuts-grid {
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 680px) {
  .dashboard-shortcuts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 980px) {
  .dashboard-shortcuts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-widget-card,
  .dashboard-widget-card .dashboard-widget-title,
  .dashboard-widget-card .dashboard-metric-value,
  .dashboard-widget-card .text-xs,
  .dashboard-widget-card .text-sm {
    transition: none;
  }
}