/* style.css */

/* System font stack */
body {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif;
}

/* Dark scrollbar */
::-webkit-scrollbar {
  height: 8px;
  width: 8px;
  background: #1e293b;
}
::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Checkbox styling - centered, modern-ish */
input.chk {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 18px;
  accent-color: #6366f1; /* indigo-500 */
  cursor: pointer;
  border-radius: 0.375rem;
  background-color: #1e2537;
}

/* Percentage styling */
.pct {
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pct-n1 { color: #38bdf8; }   /* sky-400   */
.pct-n2 { color: #a78bfa; }   /* violet-400*/
.pct-n3 { color: #fbbf24; }   /* amber-400 */

/* Track-wide chance (any notch) */
.pct-track {
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #34d399;             /* emerald-400 */
}

/* Column headers for each notch group */
.th-notch.n1 { color: #38bdf8; }
.th-notch.n2 { color: #a78bfa; }
.th-notch.n3 { color: #fbbf24; }
.subhead.n1 { color: #38bdf8; }
.subhead.n2 { color: #a78bfa; }
.subhead.n3 { color: #fbbf24; }

/* Column header for %Track1/9 */
.th-track {
  color: #34d399;             /* emerald-400 */
  font-weight: 600;
}

 
/* --- Sort arrows / header active state --- */
.sort-arrows {
  font-size: 8px;
  line-height: 1;
  margin-left: 0.25rem; /* ~ml-1 */
  display: inline-block;
}

.sort-arrows .arrow-up,
.sort-arrows .arrow-down {
  opacity: .2;
  transition: opacity .15s;
}

/* Quand la colonne est triée ASC: on met en avant la flèche du haut */
th.active-sort-asc .sort-arrows .arrow-up {
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
}
/* Quand la colonne est triée DESC: on met en avant la flèche du bas */
th.active-sort-desc .sort-arrows .arrow-down {
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
}


.icon-wrap {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  overflow: hidden;

  background: #334155; /* default dark gray */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.lt-badge {
  width: 100%;
  height: 100%;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

.icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rar-artifact  { background:#7f1d1d; }  /* dark red */
.rar-legendary { background:#9a3412; }  /* dark orange */
.rar-epic      { background:#5b21b6; }  /* dark purple */
.rar-rare      { background:#1e40af; }  /* blue */
.rar-uncommon  { background:#14532d; }  /* dark green */
.rar-common    { background:#334155; }  /* dark gray */
.rar-unknown   { background:#334155; }  /* fallback */

/* Highlight when a search target is reached */
.search-highlight {
  outline: 2px solid #f59e0b;           /* amber-500 */
  background-color: rgba(245, 158, 11, .08);
  transition: background-color .2s ease;
}