/* Gear Finder — interactive gear DB + set builder.
   Styled with Material for MkDocs CSS variables so it tracks the active
   palette (light/dark) automatically. */

#gear-finder {
  --gf-border: var(--md-default-fg-color--lightest);
  --gf-muted: var(--md-default-fg-color--light);
  --gf-accent: var(--md-accent-fg-color, var(--md-primary-fg-color));
  font-size: 0.78rem;
  margin: 0.5rem 0 2rem;
}

#gear-finder * { box-sizing: border-box; }

.gf-loading { color: var(--gf-muted); padding: 1rem 0; }

/* ---- tabs ---- */
.gf-tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--gf-border); margin-bottom: 0.75rem; }
.gf-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--gf-muted);
  padding: 0.5rem 0.9rem; border-radius: 6px 6px 0 0; margin-bottom: -2px;
  border-bottom: 2px solid transparent;
}
.gf-tab:hover { color: var(--md-default-fg-color); background: var(--md-code-bg-color); }
.gf-tab.is-active { color: var(--md-primary-fg-color); border-bottom-color: var(--md-primary-fg-color); }
.gf-panel { display: none; }
.gf-panel.is-active { display: block; }

/* ---- controls ---- */
.gf-controls { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end; margin-bottom: 0.75rem; }
.gf-field { display: flex; flex-direction: column; gap: 0.15rem; }
.gf-field > label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gf-muted); font-weight: 700; }
.gf-controls select,
.gf-controls input[type="text"],
.gf-controls input[type="number"] {
  font: inherit; font-size: 0.78rem; padding: 0.3rem 0.45rem;
  border: 1px solid var(--gf-border); border-radius: 6px;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color);
}
.gf-controls input[type="text"].gf-search { min-width: 12rem; }
.gf-controls input[type="number"] { width: 5rem; }
.gf-checks { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; align-items: center; }
.gf-checks label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }

/* ---- stat chips (added stat columns / filters) ---- */
.gf-statbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.gf-statbar .gf-hint { color: var(--gf-muted); }
.gf-statchip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--md-code-bg-color); border: 1px solid var(--gf-border);
  border-radius: 999px; padding: 0.15rem 0.2rem 0.15rem 0.6rem; font-weight: 600;
}
.gf-statchip input { width: 3.2rem; font: inherit; font-size: 0.72rem; border: 1px solid var(--gf-border); border-radius: 5px; padding: 0.1rem 0.25rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); }
.gf-statchip button { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--gf-muted); font-weight: 800; line-height: 1; padding: 0 0.25rem; }
.gf-statchip button:hover { color: var(--md-typeset-a-color, crimson); }

/* ---- table ---- */
.gf-tablewrap { overflow-x: auto; border: 1px solid var(--gf-border); border-radius: 8px; }
.gf-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.gf-table th, .gf-table td { padding: 0.35rem 0.55rem; text-align: left; border-bottom: 1px solid var(--gf-border); }
.gf-table thead th {
  position: sticky; top: 0; z-index: 1; cursor: pointer; user-select: none;
  background: var(--md-default-bg-color); font-weight: 700;
  border-bottom: 2px solid var(--gf-border);
}
.gf-table thead th.gf-num, .gf-table td.gf-num { text-align: right; font-variant-numeric: tabular-nums; }
.gf-table thead th .gf-arrow { color: var(--md-primary-fg-color); margin-left: 0.2rem; }
.gf-table tbody tr:nth-child(odd of .gf-row) { background: color-mix(in srgb, var(--md-code-bg-color) 45%, transparent); }
.gf-table tbody tr.gf-row:hover { background: var(--md-code-bg-color); }
.gf-table tbody tr.gf-row { cursor: pointer; }
.gf-jobs { color: var(--gf-muted); }
.gf-badge { display: inline-block; font-size: 0.6rem; font-weight: 800; padding: 0.05rem 0.3rem; border-radius: 4px; margin-left: 0.3rem; vertical-align: middle; }
.gf-badge.ex { background: #b5651d22; color: #b5651d; }
.gf-badge.rare { background: #8e44ad22; color: #8e44ad; }
.gf-badge.obt { background: #2e8b5722; color: #2e8b57; }
.gf-detail td { background: color-mix(in srgb, var(--md-primary-fg-color) 6%, transparent); white-space: normal; }
.gf-detail .gf-modlist { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; }
.gf-detail .gf-mod { font-variant-numeric: tabular-nums; }
.gf-detail .gf-latent { color: var(--gf-muted); font-style: italic; }
.gf-empty { padding: 1.2rem; text-align: center; color: var(--gf-muted); }

/* ---- pagination ---- */
.gf-pager { display: flex; align-items: center; gap: 0.6rem; justify-content: center; margin-top: 0.7rem; color: var(--gf-muted); }
.gf-pager button { appearance: none; cursor: pointer; font: inherit; font-weight: 700; padding: 0.25rem 0.7rem; border: 1px solid var(--gf-border); border-radius: 6px; background: var(--md-default-bg-color); color: var(--md-default-fg-color); }
.gf-pager button:disabled { opacity: 0.4; cursor: default; }
.gf-count { color: var(--gf-muted); margin-bottom: 0.4rem; font-weight: 600; }

/* ---- set builder ---- */
.gf-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; margin-top: 0.8rem; }
.gf-slotcard { border: 1px solid var(--gf-border); border-radius: 8px; padding: 0.55rem 0.65rem; background: var(--md-default-bg-color); }
.gf-slotcard h4 { margin: 0 0 0.3rem; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gf-muted); }
.gf-slotcard .gf-pick { font-weight: 700; }
.gf-slotcard .gf-pickstats { color: var(--gf-muted); font-size: 0.72rem; margin-top: 0.2rem; }
.gf-slotcard.gf-none .gf-pick { color: var(--gf-muted); font-weight: 400; font-style: italic; }
.gf-alts { margin-top: 0.35rem; border-top: 1px dashed var(--gf-border); padding-top: 0.3rem; }
.gf-alts summary { cursor: pointer; color: var(--gf-muted); font-size: 0.72rem; }
.gf-alts .gf-alt { display: block; padding: 0.15rem 0; }

@media (max-width: 44rem) {
  #gear-finder { font-size: 0.74rem; }
  .gf-controls input[type="text"].gf-search { min-width: 9rem; }
}