/* ═══════════════════════════════════════════════════════════════════════════
   DΛREΛKT_ ATOM — ui.atom.consolerow
   The console-row (.gns-crow) + glowing bar chart (.gns-bar*) vocabulary,
   lifted VERBATIM out of ui.dashboard.shared/commandcentre.css. The `.gns-cc`
   scope is deliberately preserved — these rules only dress pages that opted in
   via applyCommandCentre, exactly as before.

   HEAD ORDER IS THE LAW (see tools/modules/_ATOMS.md contract 7): page CSS
   overrides these selectors at EQUAL specificity (e.g. `.sv-ov__mrows
   .gns-crow`, `.sh-po__mrows .gns-crow--ok` in shield.cockpit.css), so this
   sheet must load FIRST. Apps list it in app.json css[] right where
   commandcentre.css sits; ensureCss() sees that link and does not re-inject,
   so the atom's self-load stays a fallback for pages that forgot.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── shared command-console rows ──────────────────────────────────────────── */
.gns-cc .gns-crow {
  position: relative; overflow: hidden; text-align: left; width: 100%;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.85rem; color: inherit; font: inherit;
  border: 1px solid color-mix(in srgb, var(--ha-accent) 13%, var(--ha-border-hi, var(--ha-border)));
  border-left: 3px solid var(--ha-border);
  border-radius: var(--gns-radius, 5px);
  background: linear-gradient(158deg, color-mix(in srgb, var(--ha-surface) 88%, transparent), color-mix(in srgb, var(--ha-bg) 50%, transparent));
  transition: transform 0.13s ease, border-color 0.13s ease;
}
button.gns-crow { cursor: pointer; }
button.gns-crow:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--ha-accent) 45%, transparent); }
.gns-cc .gns-crow--ok   { border-left-color: var(--ha-ok); }
.gns-cc .gns-crow--warn { border-left-color: var(--ha-warn); }
.gns-cc .gns-crow--down { border-left-color: var(--ha-danger); }
.gns-cc .gns-crow--info { border-left-color: var(--ha-accent-cool, var(--ha-accent)); }
.gns-cc .gns-crow__led {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ha-text-muted); color: var(--ha-text-muted); box-shadow: 0 0 6px currentColor;
}
.gns-cc .gns-crow--ok   .gns-crow__led { background: var(--ha-ok);     color: var(--ha-ok);     animation: gns-crow-led 2.2s ease-in-out infinite; }
.gns-cc .gns-crow--warn .gns-crow__led { background: var(--ha-warn);   color: var(--ha-warn);   animation: gns-crow-led 1s ease-in-out infinite; }
.gns-cc .gns-crow--down .gns-crow__led { background: var(--ha-danger); color: var(--ha-danger); animation: gns-crow-led 0.6s ease-in-out infinite; }
.gns-cc .gns-crow--info .gns-crow__led { background: var(--ha-accent-cool, var(--ha-accent)); color: var(--ha-accent-cool, var(--ha-accent)); }
@keyframes gns-crow-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.gns-cc .gns-crow__name {
  font-family: var(--gns-mono, ui-monospace, monospace); font-size: 0.85rem; font-weight: 700;
  color: var(--ha-text-bright, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
}
.gns-cc .gns-crow__meta {
  font-family: var(--gns-mono, ui-monospace, monospace); font-size: 0.68rem; color: var(--ha-text-muted);
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gns-cc .gns-crow__badge {
  flex: 0 0 auto; font-family: var(--gns-mono, ui-monospace, monospace);
  font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--ha-border); color: var(--ha-text-muted);
}
.gns-cc .gns-crow__badge--ok     { color: var(--ha-ok);     border-color: color-mix(in srgb, var(--ha-ok) 45%, transparent); }
.gns-cc .gns-crow__badge--warn   { color: var(--ha-warn);   border-color: color-mix(in srgb, var(--ha-warn) 45%, transparent); }
.gns-cc .gns-crow__badge--down   { color: var(--ha-danger); border-color: color-mix(in srgb, var(--ha-danger) 45%, transparent); }
.gns-cc .gns-crow__badge--accent { color: var(--ha-accent-cool, var(--ha-accent)); border-color: color-mix(in srgb, var(--ha-accent) 45%, transparent); }
.gns-cc .gns-crow__badge--info   { color: var(--ha-accent-cool, var(--ha-accent)); border-color: color-mix(in srgb, var(--ha-accent) 45%, transparent); }

/* Active console row — set by dashboard.detailModal (data-um-active="1") on the
   row whose detail panel is open. ONE shared rule for every consoleRow host —
   pages must NOT duplicate it locally. */
.gns-cc .gns-crow[data-um-active="1"] {
  border-color: color-mix(in srgb, var(--ha-accent) 55%, transparent);
  background: color-mix(in srgb, var(--ha-accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ha-accent) 35%, transparent);
}

/* ─── shared glowing bar chart ─────────────────────────────────────────────── */
.gns-cc .gns-bars { display: flex; flex-direction: column; gap: 0.35rem; }
.gns-cc .gns-bar-row {
  display: grid; grid-template-columns: minmax(110px, 1.3fr) 3fr 4.5rem; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.35rem 0.25rem; cursor: pointer; text-align: left; color: inherit; font: inherit;
  background: transparent;   /* <button> defaults to a grey UA background on dark theme — reset it */
  border: 1px solid transparent; border-radius: var(--gns-radius, 5px);
  transition: background 0.13s ease, border-color 0.13s ease;
}
.gns-cc .gns-bar-row:hover { background: color-mix(in srgb, var(--ha-accent) 8%, transparent); border-color: color-mix(in srgb, var(--ha-accent) 30%, transparent); }
/* Static (non-interactive) bar rows — no cursor affordance, hover stays neutral */
.gns-cc .gns-bar-row--static { cursor: default; }
.gns-cc .gns-bar-row--static:hover { background: transparent; border-color: transparent; }
.gns-cc .gns-bar-label {
  font-family: var(--gns-mono, ui-monospace, monospace); font-size: 0.72rem; color: var(--ha-text, #e6e6e6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gns-cc .gns-bar-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ha-text-muted) 16%, transparent); overflow: hidden; }
.gns-cc .gns-bar-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--ha-accent); box-shadow: 0 0 8px currentColor;
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gns-cc .gns-bar-fill--info { background: var(--ha-accent-cool, var(--ha-accent)); color: var(--ha-accent-cool, var(--ha-accent)); }
.gns-cc .gns-bar-fill--ok   { background: var(--ha-ok);     color: var(--ha-ok); }
.gns-cc .gns-bar-fill--warn { background: var(--ha-warn);   color: var(--ha-warn); }
.gns-cc .gns-bar-fill--down { background: var(--ha-danger); color: var(--ha-danger); }
.gns-cc .gns-bar-count { font-family: var(--gns-mono, ui-monospace, monospace); font-size: 0.72rem; font-weight: 700; color: var(--ha-text-bright, #fff); white-space: nowrap; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .gns-cc .gns-crow__led { animation: none !important; }
  .gns-cc .gns-bar-fill { transition: none; }
}