/* ============================================================
 *  /pages — v0.60 Dashboards list
 *
 *  Single fused section card: inline create row at the top, then
 *  one group per device with a small heading + alphabetical row
 *  list. The form sits inside the same section card so there is
 *  no sibling gap between "New" and "Saved" — the surfaces fuse.
 *
 *  v0.63.6 extracted from settings.css. No rules changed.
 * ============================================================ */

.dx-dashboard-create {
  /* Centre the controls: this row has no field labels, so the shorter
     Create button would otherwise inherit .dx-pair-row's flex-end and
     hug the bottom of the taller input/select, reading as sitting low. */
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--t-border, #ecebe5);
}
.dx-dashboard-group + .dx-dashboard-group { margin-top: 18px; }
.dx-dashboard-group-head {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--t-fg-soft, #56564f);
  text-transform: none;
}
.dx-dashboard-group-head .ph { color: var(--t-accent, #15846a); font-size: 14px; }
.dx-dashboard-group-head .dx-pill {
  margin-left: 2px;
  background: var(--t-pill-neutral-bg, #f0efea);
  color: var(--t-pill-neutral-fg, #56564f);
  border: 1px solid var(--t-pill-neutral-border, #e2e1db);
  font-weight: 600;
}

/* Mobile collapse (≤ 640px). The row is flex with the dashboard
   main (icon + name + meta strip) on the left and the
   ``.dx-discovered-actions`` group on the right. At narrow
   widths the three buttons claim ~200 px on the right, leaving
   ~80 px for the name + meta — which is what the v0.63.x
   screenshots showed wrapping one word per line. Flip to a
   column layout so the actions drop below the row content
   instead of starving it of width. Mirrors the same pattern
   ``.dx-discovered-row`` already uses on Devices. */
@media (max-width: 640px) {
  .dx-dashboard-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .dx-dashboard-main {
    width: 100%;
    align-items: flex-start;
  }
  .dx-dashboard-row .dx-discovered-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* The dashboard name is a single-line truncation by default so a
   long title doesn't push the meta strip out of the row. The
   meta strip below it can wrap freely. */
.dx-dashboard-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Push button widens to fit "Push to N", so its width varies row-to-row
   and drags the right-aligned action group left with it, breaking the
   vertical alignment of the Edit button across the list. Pin a
   min-width big enough for "Push to 99" and centre the label so short
   variants ("Push", "Push to 2") sit inside the same footprint. Icon-
   only buttons (Duplicate, Delete) are unaffected because they don't
   carry this class. */
.dx-btn-push {
  min-width: 96px;
  justify-content: center;
}