/* ==========================================================================
   TranXwatch-Solar Console v2 — components for the live node dashboard,
   alarm workflow, provisioning, users & access and profile screens.
   Tokens only (tokens.css); no raw colours except the shared rgba washes.
   ========================================================================== */

/* ---- auth screens (password change, activation) share the login layout ---- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.auth-screen.hide { display: none; }
.auth-screen .card {
  width: 100%;
  max-width: 420px;
  padding: var(--sp-8) 30px;
  box-shadow: var(--shadow-2);
  border-radius: var(--r-xl);
}
.auth-screen img { display: block; width: 170px; margin: 0 auto var(--sp-2); }
.auth-screen h1 { text-align: center; font-size: var(--fs-xl); color: var(--cyan); margin: var(--sp-1) 0 2px; }
.auth-screen .tagline { text-align: center; color: var(--muted); margin: 0 0 var(--sp-3); }
.auth-screen .linkbtn { display: block; margin: var(--sp-4) auto 0; }
.ok-text { min-height: 0; margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--ok); }
.ok-text:empty { display: none; }
.warn-text { color: var(--warn); }

/* ---- forms ---- */
textarea {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  resize: vertical;
}
textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
input[readonly] { opacity: .75; cursor: not-allowed; }
input[type="radio"] { width: auto; accent-color: var(--cyan); margin-top: 3px; }
fieldset {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
legend { padding: 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 600; color: var(--ink); letter-spacing: var(--ls-caps); text-transform: uppercase; }
details { margin-top: var(--sp-4); }
summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--sp-4); }
.field.full { grid-column: 1 / -1; }
.field .hint { display: block; margin-top: 2px; }
.req { color: var(--crit-text); }
label.radio, label.check {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  margin: var(--sp-2) 0;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}
label.check.disabled { color: var(--muted); cursor: not-allowed; }
.hint { font-size: var(--fs-xs); color: var(--muted); }
.w-sel-sm { width: auto; min-width: 140px; max-width: 220px; }
.w-date { width: auto; max-width: 170px; }
.row label { margin: 0; }
.nowrap { flex-wrap: nowrap; white-space: nowrap; }
.meter-row { margin-top: var(--sp-1); gap: var(--sp-2); }
meter { flex: 1; height: 8px; }
.dlg-body > *:first-child { margin-top: 0; }

/* ---- segmented control (tabs, ranges) ---- */
.seg-ctrl { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); padding: 3px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); }
.seg-ctrl .btn { border-radius: var(--r-sm); }
.seg-ctrl .count { margin-left: 4px; font-variant-numeric: tabular-nums; opacity: .85; }

/* ---- sidebar additions ---- */
.who-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.who-card:hover, .who-card[aria-current="page"] { background: var(--surface-1); border-color: var(--line-strong); }
.who-card .icon { width: 20px; height: 20px; flex: none; color: var(--cyan); }
.who-card b { display: block; font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.who-role { display: block; font-size: var(--fs-xs); color: var(--muted); }
.nav-badge {
  margin-left: auto;
  min-width: 22px;
  padding: 0 6px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: var(--navy-deep);
  background: var(--warn);
  border-radius: var(--r-pill);
}
.nav-badge.crit { background: var(--crit); animation: ledpulse 1.1s infinite; }
@media (max-width: 820px) { .who-card { order: 99; } }

/* ---- KPI tiles on the device dashboard ---- */
.kpi-sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
.tile { padding: var(--sp-3) var(--sp-4); background: var(--surface-1); }
.tile .l { margin: 0 0 var(--sp-1); }
.tile .n { font-size: var(--fs-2xl); }
.tile .n a { font-size: var(--fs-sm); font-weight: 600; }
.tile .unit { margin-left: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.tile-group h2 { font-size: var(--fs-md); }
.device-head .device-title { margin: var(--sp-1) 0; font-size: var(--fs-2xl); }
.device-state { text-align: right; }
.device-state p { margin: 2px 0; }
@media (max-width: 820px) { .device-state { text-align: left; } }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.live-dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-wash); }
.live-dot.poll { background: var(--cyan); }
.seg.phase-r { background: var(--series-1); }
.seg.phase-y { background: var(--series-2); }
.seg.phase-b { background: var(--series-3); }
.empty-state ol { margin: 0; padding-left: var(--sp-5); }
.rowlink { text-decoration: none; }
.rowlink:hover b { text-decoration: underline; }

/* ---- key/value lists ---- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---- alarms ---- */
tr.row-unack.crit td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
tr.row-unack.warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.row-unack.ok td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--sp-4); border-left: 2px solid var(--line); font-size: var(--fs-sm); }
.timeline li { position: relative; margin: 0 0 var(--sp-3); }
.timeline li::before { content: ''; position: absolute; left: calc(-1 * var(--sp-4) - 6px); top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.tl-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-note { margin-top: 2px; padding: var(--sp-2) var(--sp-3); background: var(--surface-1); border-radius: var(--r-sm); white-space: pre-wrap; }

/* ---- users & roles ---- */
.role-card h3 { font-size: var(--fs-md); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--sp-4); }
.action-select { font-size: var(--fs-xs); padding: 5px 8px; }
.audit-filters { gap: var(--sp-2); }
.secret-box {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  background: var(--field);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}
.secret-box code { flex: 1; overflow-wrap: anywhere; font-size: var(--fs-sm); color: var(--cyan); user-select: all; }
.mono { font-family: var(--font-mono); }

/* ---- toasts ---- */
#toasts { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 40; display: flex; flex-direction: column; gap: var(--sp-2); max-width: 380px; }
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--navy);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  transition: opacity .4s, transform .4s;
}
.toast.error { border-color: var(--crit); }
.toast.warn { border-color: var(--warn); }
.toast.out { opacity: 0; transform: translateY(6px); }
.toast .status { gap: 0; }

/* Inline filters: inputs are width:100% by default, which stacks them in a row. */
.row > .w-search { width: 230px; flex: 0 1 230px; }
.row > .w-sel-sm { flex: 0 0 auto; }