.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;
}

.dashboard-tile-loading {
  align-items: center;
  background: white;
  border: 1px dashed #dbdbdb;
  border-radius: 6px;
  display: flex;
  height: 100%;
  justify-content: center;
}

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

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

  .dashboard-tile-loading {
    background: #1a1a1a;
    border-color: #363636;
  }

  .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%;
  }
}