/*-------------------------*
 * Table shell & scrolling *
 *-------------------------*/
/* Search bar */
.search-wrapper {
  position: relative;
  width: 280px;
}
.search-wrapper #search {
  width: 100%;
  padding: 0.55rem 6rem 0.55rem 0.7rem;
  background: var(--bg-accent);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  transition: 0.3s;
}
#search:focus {
  outline: none;
}
#search-clear {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: none;
  transition: 0.3s;
}
#search-clear:hover {
  color: var(--header);
  background: transparent;
}

/* Search and export row */
.search-export-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 16px 0 12px 0;
  gap: 20px;
}

.search-wrapper {
  margin: 0;
}

/* Export controls */
.export-controls {
  display: flex;
  height: 100%;
  justify-content: flex-end;
  margin: 0;
}
.export-wrapper {
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.export-wrapper label {
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  font-size: 0.8rem;
  cursor: pointer;
}
.export-wrapper input[type="checkbox"] {
  accent-color: var(--header);
  margin: 0;
}
#export-format {
  padding: 0.2rem 0.3rem;
  background: var(--bg-accent);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  min-width: 140px;
  transition: 0.3s;
}
#export-format:hover {
  border-color: var(--header);
}
#export-format:focus {
  outline: none;
  border-color: var(--header);
}

.table-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-height: 0;
}
.table-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: scroll; /* Always reserve space for vertical scrollbar */
  border-radius: 2px;
  background: var(--bg-alt);
  min-height: 0;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.12),
    0 2px 6px -2px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}
.table-scroll #effects-table {
  border: 0;
  border-radius: 0;
}

/*--------------------*
 * Effects table core *
 *--------------------*/
#effects-table {
  width: 100%;
  min-width: 1594px; /* Minimum width to trigger horizontal scroll on smaller screens */
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-alt);
}
#effects-table thead th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 0.6rem 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 5;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.25), 0 1px 0 0 var(--border);
}
:root #effects-table thead th {
  background: linear-gradient(
    105deg,
    var(--blue-1) 0%,
    var(--blue-2) 10%,
    var(--blue-3) 90%
  );
  color: var(--white);
}
:root.dark #effects-table thead th {
  background: linear-gradient(
    105deg,
    var(--gold-1) 0%,
    var(--gold-2) 10%,
    var(--gold-3) 90%
  );
  color: var(--black);
}

/*-----------------*
 * Sorting arrows  *
 *-----------------*/
.sort-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* All headers use default left alignment for consistency and proper arrow spacing */

.sort-arrows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}

.sort-arrow {
  font-size: 0.65rem;
  color: var(--text-dim);
  transition: color 0.2s ease;
  cursor: pointer;
}

/* Arrows are inactive by default (before sorting is enabled) */
:root .sort-arrow {
  color: rgba(255, 255, 255, 0.2);
}

:root.dark .sort-arrow {
  color: rgba(0, 0, 0, 0.2);
}

/* Arrows become functional when sorting is enabled */
:root .sorting-enabled .sort-arrow {
  color: rgba(255, 255, 255, 0.4);
}

:root.dark .sorting-enabled .sort-arrow {
  color: rgba(0, 0, 0, 0.25);
}

:root .sorting-enabled .sort-arrow.active {
  color: var(--white);
}

:root.dark .sorting-enabled .sort-arrow.active {
  color: var(--black);
}
#effects-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 0.9rem;
}
#effects-table tbody tr {
  background: var(--bg-alt);
  transition: 0.3s;
}
#effects-table.zebra tbody tr.odd {
  background: var(--bg-accent);
}
#effects-table.zebra tbody tr.even {
  background: var(--bg-alt);
}
#effects-table a {
  color: var(--header);
  text-decoration: none;
  transition: 0.3s;
}
#effects-table a:hover {
  text-decoration: underline;
}
#effects-table tbody td b {
  color: var(--header);
  font-weight: 600;
}
#effects-table tbody td.unverified {
  color: var(--text-dim);
  font-style: italic;
}
#effects-table tbody tr#no-results-row td.no-results {
  text-align: center;
  font-size: 1rem;
  color: var(--text-dim);
  padding: 0.6rem 0.75rem;
}

/* Column sizing */
#effects-table thead th:nth-child(1),
#effects-table tbody td:nth-child(1) {
  box-sizing: content-box;
  min-width: 200px;
  max-width: 200px;
  width: 200px;
  overflow: hidden;
}
#effects-table thead th:nth-child(2),
#effects-table tbody td:nth-child(2) {
  box-sizing: content-box;
  min-width: 170px;
  max-width: 170px;
  width: 170px;
  overflow: hidden;
}
#effects-table thead th:nth-child(3),
#effects-table tbody td:nth-child(3) {
  box-sizing: content-box;
  min-width: 50px;
  max-width: 50px;
  width: 50px;
  overflow: hidden;
  text-align: center;
}
#effects-table thead th:nth-child(4),
#effects-table tbody td:nth-child(4) {
  box-sizing: content-box;
  width: 100%;
  overflow: hidden;
}
/* Tags column (5th column) */
#effects-table thead th:nth-child(5),
#effects-table tbody td:nth-child(5) {
  box-sizing: content-box;
  max-width: 145px;
  min-width: 145px;
  width: 145px;
  overflow: hidden;
  text-align: center;
}
/* Source column (6th column, currently hidden) */
#effects-table thead th:nth-child(6),
#effects-table tbody td:nth-child(6) {
  box-sizing: content-box;
  min-width: 120px;
  max-width: 120px;
  width: 120px;
  overflow: hidden;
  display: none; /* Currently hidden */
}

/*---------------*
 * Badges & tags *
 *---------------*/
.badge {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 12px;
  font-size: 0.7em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--bg-accent);
  color: var(--text-dim);
  margin-left: 0.4rem;
  transition: 0.3s;
}
.badge.pos {
  background: linear-gradient(135deg, #2e5f2e, #1f3d1f);
  color: #c9f7c9;
}
.badge.neg {
  background: linear-gradient(135deg, #5f2e2e, #3d1f1f);
  color: #f7c9c9;
}
.badge.scaling {
  background: linear-gradient(135deg, #ff9800, #ffb347);
  color: #2b1a00;
  font-weight: 600;
}

/*---------------------*
 * Legend & references *
 *---------------------*/
.fn-ref {
  display: none !important;
  cursor: pointer;
  color: inherit;
  font-weight: 600;
}
.legend p {
  width: fit-content;
  margin: 2px 0;
}
.legend .flash {
  position: relative;
}
.legend .flash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: var(--row-fade-color);
  margin: -1.5px -3.5px -0.5px -4px;
  border: 1px solid var(--row-fade-color);
  border-radius: 4px;
  animation: row-fade-highlight 1.2s ease-out 1;
}

/*----------------------*
 * Highlight animations *
 *----------------------*/
.highlight {
  position: relative;
}
.highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: var(--row-fade-color);
  animation: row-fade-highlight 1.2s ease-out 1;
}
@keyframes row-fade-highlight {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.5;
  }
  55% {
    opacity: 0.25;
  }
  100% {
    opacity: 0;
  }
}

/*-----------------------*
 * Superscripts & arrows *
 *-----------------------*/
.lvl-sup {
  position: relative;
  font-size: 0.5rem;
  line-height: 1;
  font-weight: 600;
}
td .arrow {
  display: inline-block;
  line-height: 1;
  font-variant-ligatures: none;
  vertical-align: middle;
  transform: translateY(-1px);
  font-size: 0.95em;
  overflow: visible;
}

/*----------------------------------*
 * Loading overlay states           *
 *----------------------------------*/
.table-scroll.loading {
  position: relative;
  min-height: 682.19px;
}
.table-scroll.loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(50, 50, 50, 0.2);
  z-index: 6;
}
:root.dark .table-scroll.loading::before {
  background: rgba(50, 50, 50, 0.6);
}
.table-scroll.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -68px 0 0 -48px;
  background: url("../img/loading-light.gif") center/120px 120px no-repeat;
  image-rendering: auto;
  z-index: 7;
}
:root.dark .table-scroll.loading::after {
  background-image: url("../img/loading-dark.gif");
}
.table-scroll.loading table thead {
  visibility: visible;
}
.table-scroll.loading table tbody {
  display: none;
}

/*------------------*
 * Pagination footer *
 *------------------*/
.table-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 28px;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  flex-wrap: nowrap;
}
.table-footer .table-info {
  flex: 0 0 300px; /* Fixed width to prevent pagination shifting */
  text-align: left;
  color: var(--white);
  width: 300px;
}
:root.dark .table-footer .table-info {
  color: rgba(255, 255, 255, 0.6);
}
.pagination {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto; /* Takes remaining space and stays centered */
}
.table-footer .table-length {
  flex: 0 0 300px; /* Fixed width to match table-info */
  text-align: right;
  width: 300px;
  color: var(--white);
}
:root.dark .table-footer .table-length {
  color: rgba(255, 255, 255, 0.6);
}
.table-footer .table-length select {
  background: var(--bg-accent);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.75rem;
}
.pagination button,
.pagination .page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #c9dbf0;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0;
  width: 32px;
  height: 28px;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  font-weight: 500;
  transition: 0.3s;
  opacity: 1;
}
.pagination button[disabled]:not(.arrow-btn) {
  opacity: 1;
  cursor: default;
}
.pagination button:not([disabled]):not(.current):hover,
.pagination .page-num:not(.current):hover {
  background: var(--white);
  transition: 0.3s;
}
.pagination .current {
  cursor: default;
}
:root .pagination .page-num.current {
  background: #007acc;
  color: var(--white);
  border-color: #005fa3;
}
:root.dark .pagination .page-num.current {
  background: var(--header);
  color: var(--black);
  border-color: var(--header-alt);
}
:root.dark .pagination button,
:root.dark .pagination .page-num {
  background: var(--bg-accent);
  color: var(--text);
}
:root.dark .pagination button:not([disabled]):not(.current):hover,
:root.dark .pagination .page-num:not(.current):hover {
  background: var(--highlight);
}
.pagination .ellipsis {
  padding: 0 2px;
  color: var(--text-dim);
  user-select: none;
}

/* Arrow buttons: no background box */
.pagination .arrow-btn {
  background: transparent !important;
  border: none !important;
  color: var(--white);
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 0.9rem;
}
.pagination .arrow-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}
.pagination .arrow-btn:not([disabled]):hover {
  color: var(--highlight);
  background: transparent !important;
  border: none !important;
}

/* Smooth logo swap */
#nav-logo {
  transition: opacity 0.3s ease;
}