/* pages/dashboard.css — Dashboard (parent console, kids layer).
 *
 * This file also holds the SHARED kids-layer utility classes (scoped under
 * `.kids`) that the children, devices and add-device pages reuse — all four page
 * stylesheets are linked together by index.html and always load, so defining the
 * shared pieces once here (and referencing them from the sibling CSS files)
 * follows the operator console's people-layer pattern. Everything is scoped under
 * `.kids`/`.page-*` so it can never collide with another builder's page CSS. Uses
 * only the webkit design tokens (kit.css); no @import, no inline styles. */

/* ---- shared kids-layer layout (used by dashboard, children, devices, enrol) ---- */
.kids h1 { margin-bottom: 4px; }
.kids .kids-content { margin-top: 14px; }

/* Page head: a title row with an optional action/toolbar on the right. */
.kids .kids-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kids .kids-head h1 { margin: 0; }
.kids .kids-head .kids-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* A quiet back link above a detail heading. */
.kids .kids-back { display: inline-flex; align-items: center; gap: 4px; font-size: 0.86rem; font-weight: 600; margin-bottom: 6px; }

/* In-table links and the subtle muted meta line under a heading. */
.kids .kids-link { font-weight: 600; }
.kids .kids-meta { color: var(--text-muted); font-size: 0.9rem; margin-top: 2px; }

/* Key/value description lists inside panels. */
.kids .kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 16px; margin: 0; }
.kids .kv dt { font-weight: 600; color: var(--text-muted); }
.kids .kv dd { margin: 0; }

/* A panel's action row. */
.kids .panel .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Keep long device/site names from stretching tables. */
.kids td { word-break: break-word; }

/* ---- dashboard specifics ---- */
.page-dashboard .cards { margin-bottom: var(--gap); }
/* The pause button sits in the last table column; keep it compact. */
.page-dashboard td:last-child { white-space: nowrap; }
.page-dashboard td:last-child button { padding: 5px 12px; }