/* Additions to app.css (which is QVS's stylesheet, unchanged), for what the academy needs and QVS does not have. */
.muted {
  color: var(--text-muted);
}

.mono,
.num {
  font-variant-numeric: tabular-nums;
}

.badge.ok {
  background: rgba(61, 220, 151, 0.12);
  border-color: rgba(61, 220, 151, 0.35);
  color: var(--ok);
}

.badge.muted {
  background: var(--well);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}

.overdue {
  color: var(--danger);
  font-weight: 600;
}

.btn.danger {
  border-color: rgba(255, 80, 80, 0.35);
  background: rgba(255, 80, 80, 0.12);
  color: var(--danger);
}

.btn.danger:hover:not(:disabled) {
  background: rgba(255, 80, 80, 0.22);
}

.alert.note {
  background: var(--well);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.chip {
  min-height: 36px;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  cursor: pointer;
}

.chip:hover {
  color: var(--accent);
}

.chip[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.filter-row .form-field {
  flex: 1 1 150px;
}

.filter-row .form-field.grow {
  flex: 1 1 100%;
}

table.data tr.click {
  cursor: pointer;
}

table.data tr.click:hover td {
  background: var(--accent-soft);
}

table.data td a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

table.data td a:hover {
  color: var(--accent);
}

@media print {
  .toast {
    display: none !important;
  }
}