/* Support (03/10/2026): shared by the dashboard (tokens.css) and the EA Arena (home.css), which name their
   colours differently: each value falls back from the dashboard name to the Arena one. */
.sup {
  --sup-ink: var(--ink, #e7edf6);
  --sup-dim: var(--ink-dim, var(--mute, #8e9bb4));
  --sup-line: var(--line, #223050);
  --sup-field: var(--surface-raised, var(--panel2, #15213a));
  --sup-acc: var(--sup-accent, var(--accent, #5ed3c3));
  --sup-on-acc: #06201d;
  --sup-err: var(--down, var(--dn, #f07f73));
  --sup-ok: var(--up, #56d39a);
  --sup-warn: var(--warn, var(--amber, #f2b84b));
  color: var(--sup-ink);
}
.sup--arena { --sup-accent: var(--amber, #f2b84b); --sup-on-acc: #2a1c02; }

.sup-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sup-line); margin-bottom: 16px; flex-wrap: wrap; }
.sup-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--sup-dim);
  padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; margin-bottom: -1px;
}
.sup-tab[aria-selected="true"] { color: var(--sup-ink); border-bottom-color: var(--sup-acc); }
.sup-count {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px;
  background: var(--sup-acc); color: var(--sup-on-acc); text-align: center; margin-left: 4px;
}

.sup-form { display: grid; gap: 14px; max-width: 680px; }
.sup-row { display: grid; gap: 6px; }
.sup-row label { font-weight: 600; font-size: 0.875rem; }
.sup-row label em { font-style: normal; font-weight: 400; color: var(--sup-dim); }
.sup-input {
  width: 100%; box-sizing: border-box; background: var(--sup-field); color: var(--sup-ink);
  border: 1px solid var(--sup-line); border-radius: 8px; padding: 9px 11px; font: inherit;
}
.sup-input:focus { outline: 2px solid var(--sup-acc); outline-offset: 1px; }
textarea.sup-input { resize: vertical; min-height: 140px; }
.sup-file { color: var(--sup-dim); font: inherit; max-width: 100%; }
.sup-hint { color: var(--sup-dim); font-size: 0.8125rem; margin: 0; }
.sup-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sup-btn {
  background: none; color: var(--sup-ink); border: 1px solid var(--sup-line); border-radius: 8px;
  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;
}
.sup-btn:hover { border-color: var(--sup-acc); }
.sup-btn:disabled { opacity: .6; cursor: default; }
.sup-btn--primary { background: var(--sup-acc); border-color: var(--sup-acc); color: var(--sup-on-acc); }
.sup-msg { margin: 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--sup-line); }
.sup-msg--error { border-color: var(--sup-err); color: var(--sup-err); }
.sup-done { max-width: 680px; }
.sup .sup-ok { color: var(--sup-ok); }

.sup-table-wrap { overflow-x: auto; }
.sup-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sup-table th, .sup-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--sup-line); vertical-align: top; }
.sup-table th { color: var(--sup-dim); font-weight: 600; white-space: nowrap; }
.sup-table tbody tr { cursor: pointer; }
.sup-table tbody tr:hover, .sup-table tbody tr:focus { background: var(--sup-field); outline: none; }
.sup-num { font-family: var(--font-num, ui-monospace, monospace); white-space: nowrap; }
.sup-subj { overflow-wrap: anywhere; }

.sup-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid currentColor; }
.sup-pill--open { color: var(--sup-warn); }
.sup-pill--in_progress { color: var(--sup-acc); }
.sup-pill--closed { color: var(--sup-dim); }
.sup-pill--sent { color: var(--sup-ok); }
.sup-pill--failed { color: var(--sup-err); }
.sup-pill--not_configured, .sup-pill--pending { color: var(--sup-dim); }

.sup-detail { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--sup-line); border-radius: 10px; display: grid; gap: 8px; }
.sup-detail__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-x { margin-left: auto; background: none; border: 0; color: var(--sup-dim); font-size: 20px; cursor: pointer; line-height: 1; }
.sup-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; padding: 10px 12px; background: var(--sup-field); border-radius: 8px; }
.sup-detail a { color: var(--sup-acc); }
.sup-shot { max-width: 100%; max-height: 360px; border-radius: 8px; border: 1px solid var(--sup-line); display: block; }

/* admin */
.supa-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.supa-filters .sup-input { width: auto; }
.supa-check { width: 28px; }
.supa-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent, #2dd4c8); }
.supa-bulk {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid var(--accent, #2dd4c8); border-radius: 10px; background: var(--accent-soft, rgba(45, 212, 200, .12));
}
.supa-bulk b { margin-right: 6px; }
.supa-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.nav-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; font-size: 11px;
  line-height: 18px; text-align: center; background: var(--warn, #f0b850); color: #241a04; font-weight: 700;
}

/* home: window for visitors without a session */
.sup-gate-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.sup-gate-alt { color: var(--mute, #8e9bb4); font-size: 14px; }
.sup-gate-alt a { color: var(--teal, #5ed3c3); }