/* Same fixed background as the main app page (app.css) - a pseudo-element
   with position:fixed rather than background-attachment:fixed on body,
   since that's unreliable on mobile Safari (often just scrolls anyway). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(20, 21, 31, 0.6), rgba(20, 21, 31, 0.6)),
    url("app/content/backgrounds/background_1.png") center center / cover no-repeat;
}

main.sets-main { max-width: 900px; }
/* No overflow:hidden here - it would clip header tooltips (and the sticky
   header itself) at the panel's edge. The rounded corners it used to
   provide are instead applied directly to the table's own corner cells
   below, so tooltips can spill out over the page background on hover. */
.sets-panel { padding: 0; }

#setFilter {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
}
#setFilter::placeholder { color: var(--muted); }

.sets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.sets-table th, .sets-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.sets-table th {
  position: sticky;
  top: 0;
  background: var(--panel);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sets-table tbody tr:last-child td { border-bottom: none; }
.sets-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.sets-table thead th:first-child { border-top-left-radius: 12px; }
.sets-table thead th:last-child { border-top-right-radius: 12px; }
.sets-table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.sets-table tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.symbol-cell { width: 28px; }
.symbol-cell img { width: 20px; height: 20px; object-fit: contain; display: block; }

.sets-table th[data-sort-type] {
  cursor: pointer;
  user-select: none;
}
.sets-table th[data-sort-type]:hover,
.sets-table th[data-sort-type]:focus {
  color: var(--text);
}
.sets-table th[data-sort-type]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.sort-indicator { color: var(--accent); }

/* Header tooltips - plain text lives in the data-tooltip attribute (part
   of the raw HTML, not injected by JS) so a CSS-only hover/focus popup is
   enough; no need for a JS tooltip library for one short paragraph. */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: 6px;
  width: 220px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  white-space: normal;
}