/* Caller ID health (admin-callerhealth.js) and System › Health › History
   (admin-syshistory.js). Colours come from style.css's tokens. */

/* ---------- caller ID health ---------- */
.ch-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.ch-tag { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--pill); background: var(--pause-soft); color: var(--pause-text); }
.ch-tag.warn { background: var(--warn-soft); color: var(--warn-text); }
.ch-row { cursor: pointer; }
.ch-row.selected td { background: var(--accent-soft); }
.ch-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ch-flags { display: grid; gap: 10px; border-left: 4px solid var(--bad); }
.ch-flag { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.ch-flag .baddot { margin-top: 6px; }
.ch-detail-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.ch-detail-head h2 { margin: 0; }
.ch-suggest { margin: 8px 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn-text); font-weight: 600; }
.ch-rest { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.ch-rest label { margin: 0; font-weight: 700; }
.ch-days { width: 5.5em; }
.ch-compliance { margin: 8px 0 0; padding-left: 18px; color: var(--warn-text); }
.ch-compliance li { margin: 3px 0; }
.ch-hours { height: 130px; }
#chDetail h3 { margin: 14px 0 8px; font-size: 14px; }

/* ---------- system history ---------- */
.sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 18px; }
.sh-card h2 { margin-bottom: 2px; }
.sh-chart { width: 100%; height: auto; max-height: 220px; display: block; margin: 6px 0; }
.sh-chart .sh-gl { stroke: var(--border); stroke-width: 1; }
.sh-chart .sh-axis { fill: var(--muted); font-size: 11px; font-family: var(--mono, monospace); }
.sh-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.sh-event { stroke-width: 1.5; stroke-dasharray: 3 3; }
.sh-ev-bad { stroke: var(--bad); background: var(--bad); }
.sh-ev-warn { stroke: var(--warn); background: var(--warn); }
.sh-ev-info { stroke: var(--ok); }
.sh-c0 { stroke: var(--accent); fill: var(--accent); background: var(--accent); }
.sh-c1 { stroke: var(--coral); fill: var(--coral); background: var(--coral); }
.sh-c2 { stroke: var(--ok); fill: var(--ok); background: var(--ok); }
.sh-c3 { stroke: var(--machine); fill: var(--machine); background: var(--machine); }
.sh-c4 { stroke: var(--warn); fill: var(--warn); background: var(--warn); }
.sh-line.sh-c0, .sh-line.sh-c1, .sh-line.sh-c2, .sh-line.sh-c3, .sh-line.sh-c4 { fill: none; }
.sh-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.sh-status-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sh-status-head h2 { margin: 0; }
.sh-status p { margin: 8px 0 0; }
.sh-timeline { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; max-height: 520px; overflow-y: auto; }
.sh-ev { display: grid; grid-template-columns: 12px 8.5em 1fr; gap: 10px; align-items: start; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.sh-ev time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.sh-dotm { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--ok); }
.sh-lv-bad .sh-dotm { background: var(--bad); }
.sh-lv-warn .sh-dotm { background: var(--warn); }
@media (max-width: 640px) {
  .sh-ev { grid-template-columns: 12px 1fr; }
  .sh-ev > div { grid-column: 2; }
  .ch-flag { grid-template-columns: auto 1fr; }
  .ch-flag button { grid-column: 2; justify-self: start; }
}