/* Connect+ - Monitor screens (Live calls, Queues, Extensions).
   Stat strip + one card holding toolbar and table, as on the reference console. */

.mon-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--ln);
  border-radius: var(--r-lg);
  background: var(--sf);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.mon-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  border-left: 1px solid var(--ln);
}
.mon-stat:first-child { border-left: none; }
.mon-stat-val {
  font: 600 var(--fs-2xl)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--tx);
}
.mon-stat--ok .mon-stat-val { color: var(--ok-ink); }
.mon-stat--warn .mon-stat-val { color: var(--amb-ink); }
.mon-stat--bad .mon-stat-val { color: var(--red-ink); }
.mon-stat--info .mon-stat-val { color: var(--tx); }

.mon-card {
  border: 1px solid var(--ln);
  border-radius: var(--r-lg);
  background: var(--sf);
  overflow: hidden;
}
.mon-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--ln);
}
.mon-search { width: 260px; max-width: 100%; }
.mon-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--ln);
  border-radius: 999px;
  background: transparent;
  color: var(--tx2);
  font: 600 var(--fs-xs)/1 var(--font-body);
  cursor: pointer;
}
.mon-chip:hover { color: var(--tx); border-color: var(--tx2); }
.mon-chip { transition: background-color var(--t-out), color var(--t-out), border-color var(--t-out); }
.mon-chip:hover { transition-duration: 0s; }
.mon-chip.is-active { color: var(--tx); background: var(--pill-active, var(--sf2)); border-color: var(--indigo); }
.mon-chip-n { font-variant-numeric: tabular-nums; color: var(--tx2); } /* full colour: a fade measured 3.2:1 on the light theme */
.mon-chip.is-active .mon-chip-n { color: var(--tx); }
.mon-count { margin-left: auto; font: 500 var(--fs-xs) var(--font-body); color: var(--tx2); }

.mon-table-wrap { overflow: auto; max-height: calc(100dvh - 330px); min-height: 160px; }
.mon-table { width: 100%; border-collapse: collapse; font: 500 var(--fs-md) var(--font-body); font-variant-numeric: tabular-nums; }
.mon-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
  background: var(--sf2);
  border-bottom: 1px solid var(--ln);
  text-align: left;
  white-space: nowrap;
}
.mon-table th.is-right, .mon-table td.is-right { text-align: right; }
.mon-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--tx2);
  font: 600 var(--fs-xs)/1 var(--font-body);
  cursor: pointer;
}
.mon-table th.is-right .mon-sort { justify-content: flex-end; }
.mon-sort:hover, .mon-table th[aria-sort="ascending"] .mon-sort, .mon-table th[aria-sort="descending"] .mon-sort { color: var(--tx); }
.mon-sort-ind { display: inline-block; width: 10px; }
.mon-table td { height: 44px; padding: 0 12px; border-bottom: 1px solid var(--ln); color: var(--tx); max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-table tbody tr:last-child td { border-bottom: none; }
.mon-table tbody tr:hover td { background: var(--row-hover); }
.mon-dim { color: var(--tx2); margin-left: 6px; font-size: var(--fs-xs); }
.mon-empty { padding: 40px 12px !important; text-align: center !important; color: var(--tx2) !important; }

@media (max-width: 719px) {
  .mon-search { width: 100%; }
  .mon-count { margin-left: 0; }
  .mon-table-wrap { max-height: none; }
}

/* Ring group members: tinted by presence so "who is free" reads at a glance. */
.mon-member { color: var(--tx2); }
.mon-member--ok { color: var(--ok-ink); }
.mon-member--warn { color: var(--amb-ink); }
.mon-member--bad { color: var(--red-ink); }