/* ---- List and detail ----
   The page is a fit-screen (theme.css): filters and the list on the left, the
   detail panel beside it. */

.item-detail { display: flex; flex-direction: column; gap: 16px; }
.detail-empty { margin: 0; color: var(--text-dim); }

.list-count { margin: 0 0 8px; font-size: var(--step--1); color: var(--text-dim); }

.table-scroll { overflow-x: auto; }
.items-table { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.items-table th {
  padding: 6px 10px 6px 0;
  font-weight: 500;
  font-size: var(--step--1);
  text-align: left;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
}
.items-table td {
  padding: 4px 10px 4px 0;
  vertical-align: middle;
  border-bottom: 1px solid rgb(255 255 255 / 0.04);
}
.items-table .num { text-align: right; }
.items-table .col-size { width: 50px; line-height: 0; --thumb: 40px; }
.items-table .col-stat { color: var(--text-dim); font-size: var(--step--1); }
.items-table tr.selected td { background: var(--tooltip); }
.items-table tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--q-unique); padding-left: 6px; }
.items-table .have { color: var(--q-unique); font-weight: 700; }

.item-link { color: var(--q-normal); text-decoration: none; }
.item-link[data-quality="unique"], .tooltip [data-quality="unique"] { color: var(--q-unique); }
.item-link[data-quality="set"], .tooltip [data-quality="set"] { color: var(--q-set); }
.item-link[data-quality="crafted"], .tooltip [data-quality="crafted"] { color: var(--q-crafted); }
.item-link:hover { text-decoration: underline; }
.item-meta { display: block; font-size: var(--step--1); color: var(--text-dim); }

.empty { color: var(--text-dim); }

/* ---- Tooltip ---- */

.item-tooltip .footprint { margin: 0 auto 14px; display: block; }
.item-name {
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--q-normal);
}
.item-lines { margin-top: 14px; }
.item-tooltip .small { font-size: var(--step--1); margin-top: 4px; }
.item-tooltip > .small { margin-top: 14px; }
.family { margin-top: 10px !important; font-size: var(--step--1); }
.family a { color: var(--text-dim); }
.family-current { color: var(--q-normal); }

/* The rolled part of a unique's stat line: "+(180-200)% Enhanced Damage". */
.roll-range { color: var(--q-normal); font-weight: 700; }

/* ---- Actions and copies ---- */

.item-actions h3, .copies h3 { font-size: var(--step-1); margin-bottom: 12px; }
.add-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 14px; }
.add-options label { margin: 0; font-weight: 400; }
.inline-field { display: flex; align-items: center; gap: 8px; }
.inline-field select { width: auto; padding: 5px 8px; }

.action-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.action-status { margin: 10px 0 0; min-height: 1.5em; }
.action-status .link-button { margin-left: 10px; }

.copies { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.copies-empty { margin-top: 16px; }
.copies-list { list-style: none; margin: 0; padding: 0; }
.copies-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.04);
}
.copy-name { color: var(--q-normal); }
.copy-name[data-quality="unique"] { color: var(--q-unique); }
.copy-name[data-quality="set"] { color: var(--q-set); }
.copy-name[data-quality="crafted"] { color: var(--q-crafted); }
.copies-list li.dead .copy-name { color: var(--q-socketed); }
.copy-where { grid-column: 1; font-size: var(--step--1); color: var(--text-dim); }
.copy-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: center;
  gap: 4px 12px;
  font-size: var(--step--1);
}

@media (min-width: 1101px) and (min-height: 600px) {
  /* The detail panel is made to fit: a tighter tooltip and actions, and
     wider on big screens so long stat lines don't wrap. It scrolls only for
     the longest items. */
  .item-detail { gap: 8px; }
  .item-detail .tooltip { padding: 10px 16px; font-size: var(--step--1); line-height: 1.32; }
  .item-detail .item-name { font-size: var(--step-0); }
  .item-detail .item-tooltip .footprint-large { --cell: 22px; margin-bottom: 6px; }
  .item-detail .item-lines { margin-top: 6px; }
  .item-detail .item-tooltip > .small { margin-top: 6px; }
  .item-detail .item-tooltip .small { margin-top: 2px; }
  .item-detail .panel { padding: 10px 16px; font-size: var(--step--1); }
  .item-detail .item-actions h3, .item-detail .copies h3 { margin-bottom: 6px; font-size: var(--step-0); }
  .item-detail .add-options { gap: 8px 16px; margin-bottom: 8px; }
  .item-detail .button { padding: 4px 12px; font-size: var(--step--1); }
  .item-detail .action-buttons { gap: 6px; margin-bottom: 4px; }
  .item-detail .hint { margin-top: 4px; }
  .item-detail .action-status { margin-top: 4px; min-height: 0; }
  .item-detail .copies { margin-top: 10px; padding-top: 8px; }
}

@media not ((min-width: 1101px) and (min-height: 600px)) {
  .item-detail { margin-bottom: 20px; scroll-margin-top: calc(var(--topbar-height) + 16px); }
  .item-detail:has(.detail-empty) { display: none; }
}

@media (max-width: 700px) {
  .items-table .col-stat, .items-table .col-sockets { display: none; }
  .copies-list li { grid-template-columns: 1fr; }
  .copy-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* ---- Set items ---- */

/* Bonuses for wearing more of a set: green when on, grey when not. */
.set-bonus { color: var(--q-socketed); }
.set-bonus.active { color: var(--q-set); }
.set-bonus.full.active { color: var(--q-unique); }
.set-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid #2a2a2a; }
.set-section h3 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 500; margin-bottom: 6px; }
.set-pieces { list-style: none; margin: 0 0 10px; padding: 0; font-size: var(--step--1); }
.set-pieces a { color: var(--q-socketed); }
.set-pieces .worn a { color: var(--q-set); }
.set-full-label { margin-top: 8px !important; font-size: var(--step--1); color: var(--q-socketed); }
.set-full-label.active { color: var(--q-unique); }

/* ---- Runewords ---- */

.items-table td.col-runes { color: var(--q-crafted); font-size: var(--step--1); white-space: nowrap; }
.rune-bonus .small { margin-top: 4px !important; }

/* Runes as filled sockets, in order; ticked ones you have. */
.rune-sockets {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 0;
  list-style: none;
}
.rune-sockets a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.rune-socket {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #2b2b2b, #0a0a0a 70%);
  border: 1px solid #3b3b3b;
}
.rune-socket img { width: 38px; height: 38px; object-fit: contain; opacity: 0.45; }
.rune-name { font-size: var(--step--1); color: var(--q-socketed); }
.rune-sockets .have .rune-socket { border-color: var(--q-crafted); }
.rune-sockets .have img { opacity: 1; }
.rune-sockets .have .rune-name { color: var(--q-crafted); }

.make-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid #2a2a2a; }
.make-section h3 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 500; margin-bottom: 6px; color: var(--q-normal); }
.ready-bases { list-style: none; margin: 4px 0 0; padding: 0; }
.ready-bases a { color: var(--q-normal); }
.ready-bases li { display: flex; justify-content: center; gap: 12px; }
.make-status { margin-top: 8px !important; font-size: var(--step--1); }
.make-status .link-button { margin-left: 10px; }

/* ---- Runes and gems ---- */

.gem-effects { display: grid; gap: 12px; margin-top: 14px; }
.gem-effect .small { margin-bottom: 2px !important; }
.used-in { margin-top: 16px; padding-top: 12px; border-top: 1px solid #2a2a2a; }
.runeword-links { font-size: var(--step--1); line-height: 1.7; }

.footprint-none { display: inline-block; width: 11px; }