.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: 12px;
}

.dashboard-grid-cell {
  min-width: 0;
  min-height: 0;
}

.dashboard-tile-frame {
  display: block;
  height: 100%;
}

.dashboard-tile {
  background: white;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.75rem 1rem;
  overflow: hidden;
}

.dashboard-tile-header {
  align-items: center;
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.dashboard-tile-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-tile-query-link {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.dashboard-tile:hover .dashboard-tile-query-link,
.dashboard-tile-query-link:focus-visible {
  opacity: 1;
}

.dashboard-tile-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.dashboard-tile-chart {
  height: 100%;
  width: 100%;
}

.dashboard-tile-chart .uplot-container {
  margin: 0;
  height: 100%;
  width: 100%;
}

.dashboard-tile-metrics {
  align-items: center;
  display: flex;
  gap: 1rem;
  height: 100%;
  justify-content: center;
}

.dashboard-tile-metrics .metric-card {
  text-align: center;
}

.dashboard-tile-metrics .metric-label {
  color: #7a7a7a;
  font-size: 0.75rem;
}

.dashboard-tile-metrics .metric-value {
  font-size: 2rem;
  font-weight: 700;
}

.dashboard-tile-footer {
  border-top: 1px solid #f0f0f0;
  font-size: 0.7rem;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

/* Loading placeholder shown while RenderDashboardTileJob runs. It reuses the
   real .dashboard-tile chrome so the cell keeps its size and the broadcast
   swap does not reflow the grid. */
.dashboard-tile-pending .dashboard-tile-footer {
  border-top-color: transparent;
}

.tile-skeleton {
  height: 100%;
  width: 100%;
}

.tile-skeleton-bars {
  align-items: flex-end;
  display: flex;
  gap: 6px;
}

.tile-skeleton-bars .skeleton-shimmer {
  flex: 1 1 0;
  min-width: 0;
}

.tile-skeleton-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Top-aligned like the horizontal bar chart it stands in for. */
  justify-content: flex-start;
}

.tile-skeleton-rows .skeleton-shimmer {
  height: 12px;
}

.tile-skeleton-block .skeleton-shimmer {
  display: block;
  height: 100%;
}

.skeleton-shimmer {
  background: #f0f0f0;
  background-image: linear-gradient(90deg, #f0f0f0 0%, #e4e4e4 40%, #f0f0f0 80%);
  background-size: 300% 100%;
  border-radius: 3px;
  display: block;
  animation: tile-skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-shimmer-text {
  height: 8px;
  width: 90px;
}

@keyframes tile-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer {
    animation: none;
  }
}

.dashboard-tile-form {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 1rem;
}

@media (prefers-color-scheme: dark) {
  .dashboard-tile {
    background: #1a1a1a;
    border-color: #363636;
  }

  .skeleton-shimmer {
    background: #2a2a2a;
    background-image: linear-gradient(90deg, #2a2a2a 0%, #383838 40%, #2a2a2a 80%);
  }

  .dashboard-tile-footer {
    border-top-color: #363636;
  }
}

/* Mobile: stack tiles in a single column. The dashboard grid is designed
   for a 12-column desktop layout; at narrow widths the columns become too
   cramped to render charts legibly. We override the inline grid placement
   and size each cell from the original tile height so stat tiles stay
   compact while chart tiles get enough room to render. */
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 10px;
  }

  .dashboard-grid-cell {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    height: max(calc(var(--tile-h, 4) * 56px), 200px);
  }

  .dashboard-tile {
    padding: 0.625rem 0.75rem;
  }

  .dashboard-controls .field.is-grouped.is-grouped-multiline {
    width: 100%;
  }
}