/* Admin panel only (tabs/admin/*.js) - not a bottom tab, reached by
   long-pressing the inventory tab. Reuses the generic input/button/
   section-title styling from base.css and the .subtabs bar from
   trade.css; this file only adds what's new: the label+input/select row
   and a tappable list row for the catalog editors. */

.admin-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.admin-field label { font-size: 12px; color: var(--hint); }
.admin-field input, .admin-field select { margin-bottom: 0; }

/* colorField() - native color-picker swatch + hex text, kept in sync */
.admin-color-row { display: flex; align-items: center; gap: 8px; }
.admin-color-row input[type="color"] {
  width: 40px;
  height: 34px;
  padding: 2px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--secondary-bg);
}
.admin-color-row input[type="text"] { flex: 1; margin-bottom: 0; }

/* hueField() - range slider + live swatch + number, all kept in sync */
.admin-hue-row { display: flex; align-items: center; gap: 8px; }
.admin-hue-row input[type="range"] { flex: 1; accent-color: var(--link); }
.admin-hue-row input[type="number"] { width: 60px; flex: 0 0 auto; margin-bottom: 0; }
.admin-color-swatch { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }

.admin-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 13px;
}
.admin-list-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-list-sub { color: var(--hint); font-size: 12px; flex-shrink: 0; }

.admin-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.admin-row-actions .action { width: auto; flex: 1 1 auto; margin-top: 0; }
.admin-row-actions .danger { background: #c0392b; color: #fff; }

/* card image field (cards.js) + the crop modal (image-crop.js) */
.admin-image-preview-wrap { position: relative; display: inline-block; }
.admin-image-preview {
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--secondary-bg);
}
.crop-hint { color: var(--hint); font-size: 12px; }
.crop-frame {
  position: relative;
  width: 300px;
  height: 400px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--secondary-bg);
  touch-action: none;
  cursor: grab;
}
.crop-frame-img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
}
.crop-guides { position: absolute; inset: 0; pointer-events: none; }
.crop-guides::before,
.crop-guides::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.crop-guides::before { top: 50px; }
.crop-guides::after { bottom: 50px; }
.crop-zoom { width: 300px; accent-color: var(--link); }