.super-admin-filter {
  --hover-size: 0;
  --input-border-radius: 0.25rem;
  --input-padding: 0.4rem 0.6rem;
  border-radius: 0.25rem;
  font-family: var(--font-mono);
  font-size: 12px;
}

.super-admin-filter:focus {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
}

select.super-admin-filter {
  --input-padding: 0.4rem 1.5rem 0.4rem 0.6rem;
  inline-size: auto;
  min-inline-size: 9.5rem;
  text-overflow: ellipsis;
}

.sa-btn {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  block-size: 28px;
  padding-inline: 0.75rem;
  border: 1px solid var(--color-border-darker);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.sa-btn:hover { background: color-mix(in oklch, var(--color-text) 8%, transparent); }
.sa-btn:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.sa-btn--primary {
  border-color: transparent;
  background: var(--color-text);
  color: var(--color-bg);
}
.sa-btn--primary:hover { background: color-mix(in oklch, var(--color-text) 85%, var(--color-bg)); }

.sa-field {
  --hover-size: 0;
  inline-size: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-border-darker);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.sa-field::placeholder { color: color-mix(in oklch, var(--color-text) 45%, transparent); }
.sa-field:focus,
.sa-field:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
}

.super-admin .sup-attach__hint { font-family: var(--font-mono); font-size: 11px; }

.sa-files__image { display: block; border-radius: 0.35rem; border: 1px solid var(--color-border-darker); max-block-size: 132px; inline-size: auto; }
.sa-files__doc {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border-darker);
  border-radius: 0.35rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text);
  text-decoration: none;
}
.sa-files__doc:hover { background: color-mix(in oklch, var(--color-text) 8%, transparent); }

.sa-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
}
.sa-status::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}
.sa-status--open {
  color: color-mix(in oklch, var(--color-text) 80%, transparent);
  background: color-mix(in oklch, var(--color-text) 10%, transparent);
}
.sa-status--awaiting {
  color: var(--color-alert);
  background: color-mix(in oklch, var(--color-alert) 16%, transparent);
}
.sa-status--resolved {
  color: var(--color-positive);
  background: color-mix(in oklch, var(--color-positive) 16%, transparent);
}
.sa-status--closed {
  color: color-mix(in oklch, var(--color-text) 55%, transparent);
  background: color-mix(in oklch, var(--color-text) 8%, transparent);
}

.super-admin .sup-mark { font-family: var(--font-mono); font-size: 11px; }
.sa-msg { padding: 0.75rem 0.9rem; border: 1px solid var(--color-border-darker); border-radius: 0.35rem; }
.sa-msg--support { border-color: transparent; background: color-mix(in oklch, var(--color-selected-dark) 12%, transparent); }
.sa-msg__head { display: flex; align-items: center; gap: 0.5rem; margin-block-end: 0.35rem; font-family: var(--font-mono); font-size: 11px; opacity: 0.7; }
.sa-msg .sup-badge {
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-selected-dark) 18%, transparent);
  color: var(--color-selected-dark);
  font-family: var(--font-mono);
  font-size: var(--ds-status-font-sm);
}
.sa-msg__body { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.55; }

.sa-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 12px;
}
.sa-rating__value { font-size: 15px; font-weight: 700; }

.sa-row {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-block-end: 1px solid var(--color-border-darker);
  color: var(--color-text);
  text-decoration: none;
}
.sa-row:last-child { border-block-end: 0; }
.sa-row:hover { background: color-mix(in oklch, var(--color-text) 4%, transparent); }
.sa-row > span { font-family: var(--font-mono); font-size: 11px; }
.sa-row__number { inline-size: 5.5rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.sa-row__who { inline-size: 7rem; flex-shrink: 0; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-row__account { inline-size: 7rem; flex-shrink: 0; opacity: 0.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-row__subject {
  flex: 1;
  min-inline-size: 0;
  font-family: inherit !important;
  font-size: 13px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-row__replies { flex-shrink: 0; opacity: 0.5; }
.sa-row__when { inline-size: 8.5rem; flex-shrink: 0; text-align: end; opacity: 0.5; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .sa-row__account, .sa-row__when { display: none; }
}