/* Вкладка «Предметы». Цвета и приёмы — те же, что у остальной админки
   (admin.css): это её вкладка, а не отдельная страница. */

#items-list { display: flex; flex-direction: column; gap: 14px; }

.it-sum { font-size: 12px; line-height: 1.65; color: var(--text); }
.it-sum b { color: var(--accent); font-weight: normal; }
.it-unk { margin-top: 6px; color: #f0c674; font-size: 11px; }

.it-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.it-nav a {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); text-decoration: none; font-size: 12px;
}
.it-nav a span { color: var(--muted); margin-left: 4px; }
.it-nav a:hover, .it-nav a:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }

.it-h {
  margin: 10px 0 -4px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); font-weight: normal;
}

.it-grid { display: flex; flex-direction: column; gap: 10px; }
.it-card {
  padding: 10px 12px;
  background: rgba(7,20,38,.6); border: 1px solid var(--line); border-radius: 8px;
}
.it-hd { display: flex; align-items: center; gap: 12px; }
.it-art { width: 52px; height: 52px; object-fit: contain; flex: 0 0 52px; }
.it-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.it-name { font-size: 14px; color: var(--text); }
.it-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.it-id { color: #c77dff; font-size: 12px; }
.it-tag { color: var(--muted); font-size: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
.it-price { color: #f0d060; font-size: 12px; }

.it-rows { display: flex; flex-direction: column; margin-top: 8px; }
.it-row {
  display: grid; grid-template-columns: 150px 1fr 230px; gap: 10px;
  padding: 7px 0; border-top: 1px solid rgba(78,205,196,.12);
  font-size: 12px; line-height: 1.55;
}
.it-lab { color: var(--muted); }
.it-txt { color: var(--text); white-space: pre-line; }
.it-txt i { display: block; margin-top: 2px; color: #f0c674; font-style: normal; font-size: 11px; }
.it-meta { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.it-meta code { flex-basis: 100%; color: var(--muted); font-size: 10.5px; word-break: break-all; }
.it-where { color: var(--accent); font-size: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.it-where-none { color: #f0c674; font-size: 11px; }
.it-where-unk  { color: #f39c12; font-size: 11px; }

.it-ment { margin-top: 8px; font-size: 12px; }
.it-ment summary { cursor: pointer; color: var(--muted); }
.it-ment summary:focus-visible { outline: 1px solid var(--accent); }
.it-ment-row { display: grid; grid-template-columns: 220px 1fr; gap: 10px; padding: 5px 0; border-top: 1px solid rgba(78,205,196,.1); }
.it-ment-row code { color: var(--muted); font-size: 10.5px; word-break: break-all; }
.it-ment-row span { color: var(--text); white-space: pre-line; }

@media (max-width: 760px) {
  .it-row { grid-template-columns: 1fr; gap: 3px; }
  .it-ment-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── подвкладки «В игре» / «Недоступны в игре» ── */
.it-sub { display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.it-subtab {
  padding: 7px 14px; margin-bottom: -1px;
  background: none; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0;
  color: var(--muted); font: inherit; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
.it-subtab span { margin-left: 5px; color: var(--muted); }
.it-subtab.on { color: var(--accent); border-color: var(--line); background: var(--panel); }
.it-subtab-off.on { color: #ff6b6b; border-color: rgba(255,107,107,.45); }
.it-subtab:focus-visible { outline: 1px solid var(--accent); }

/* ── штамп «Недоступен в игре» ── */
.it-card-off { position: relative; border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.04); }
.it-card-off .it-hd, .it-card-off .it-rows { opacity: .8; }
.it-stamp {
  position: absolute; top: 14px; right: 18px; z-index: 1;
  padding: 6px 16px;
  border: 3px double #ff6b6b; border-radius: 6px;
  color: #ff6b6b; font-size: 20px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase;
  transform: rotate(-7deg); pointer-events: none;
  background: rgba(4,10,20,.85);
  box-shadow: 0 0 0 1px rgba(255,107,107,.25);
}
.it-why { margin: 0 0 8px; padding-right: 280px; color: #ff9b9b; font-size: 12px; line-height: 1.55; }
@media (max-width: 760px) {
  .it-stamp { position: static; display: inline-block; margin-bottom: 8px; font-size: 16px; transform: rotate(-3deg); }
  .it-why { padding-right: 0; }
}