/* Items page */
.items-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.items-search {
  flex: 1;
  min-width: 220px;
  position: relative;
}
.items-search input {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-4) 0 var(--space-10);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.items-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.items-search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
  display: flex;
}
.items-sort {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.items-sort button {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.items-sort button:hover { color: var(--text); background: var(--bg-hover); }
.items-sort button[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}

.items-count {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin-left: auto;
}

/* Desktop table */
.items-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.items-table th, .items-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.items-table th {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  background: var(--bg-sunken);
}
.items-table tr:last-child td { border-bottom: none; }
.items-table tbody tr {
  cursor: pointer;
  transition: background var(--dur-fast);
}
.items-table tbody tr:hover { background: var(--bg-hover); }
.items-table tbody tr:focus-visible { outline: none; background: var(--accent-soft); }
.items-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.items-cell-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.items-cell-icon img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  object-fit: contain;
}
.items-name { font-weight: 600; }
.ench-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  vertical-align: middle;
  cursor: help;
}
.items-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.items-change-pos { color: var(--positive); font-weight: 600; }
.items-change-neg { color: var(--negative); font-weight: 600; }
.items-change-nil { color: var(--text-subtle); }
.items-spark { display: inline-flex; vertical-align: middle; }

/* Mobile card list */
.items-cards { display: none; flex-direction: column; gap: var(--space-2); }
.items-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.items-card:active { transform: scale(0.99); }
.items-card .items-cell-icon { width: 36px; height: 36px; }
.items-card .items-cell-icon img { width: 28px; height: 28px; }
.items-card .items-name { font-size: var(--text-md); }
.items-card .items-meta {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.items-card .items-price {
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: right;
  font-size: var(--text-md);
}
.items-card .items-delta {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-align: right;
  margin-top: 2px;
}

@media (max-width: 760px) {
  .items-table { display: none; }
  .items-cards { display: flex; }
  .items-toolbar { gap: var(--space-2); }
  .items-sort { width: 100%; overflow-x: auto; }
}

.items-empty {
  padding: var(--space-12);
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--text-sm);
}

/* Flips page additions */
.flips-modes {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.flips-mode {
  padding: 8px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.flips-mode:hover { color: var(--text); border-color: var(--border-strong); }
.flips-mode[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.flips-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.flips-filterbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  min-width: 110px;
  flex: 1 1 110px;
}
.flips-filterbar input {
  height: 32px;
  padding: 0 var(--space-2);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--text);
}
.flips-filterbar input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
@media (max-width: 600px) {
  .flips-filterbar label { min-width: 45%; }
}

/* ── Watchlist ──────────────────────────────────────────────── */
.watchlist-addbar {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.watchlist-thresh-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  flex: 1 1 160px;
}
.watchlist-thresh-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.watchlist-thresh-input {
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text);
  width: 80px;
}
.watchlist-thresh-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.watchlist-statusbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.watchlist-empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--text-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.watch-row-alert td { background: color-mix(in srgb, var(--positive) 6%, transparent); }
.watch-card-alert  { border-color: var(--positive) !important; background: color-mix(in srgb, var(--positive) 5%, var(--bg-elevated)) !important; }
.watch-alert-badge { animation: watch-pulse 2s ease-in-out infinite; }
@keyframes watch-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}
.watchlist-alerts-header {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: var(--space-6) 0 var(--space-3);
}
.watchlist-alert-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.watchlist-alert-name {
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 100px;
}
.watchlist-alert-name:hover { color: var(--accent); }
@media (max-width: 600px) {
  .watchlist-addbar { gap: var(--space-2); }
  .watchlist-thresh-wrap { min-width: 100%; }
}

/* ── Watchlist v2 ───────────────────────────────────────────── */
/* Sub-market tabs (AH / Orders) */
.watch-subtabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.watch-subtab {
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.watch-subtab:hover { color: var(--text); border-color: var(--border-strong); }
.watch-subtab[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Add-bar fields */
.watch-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
  flex: 1 1 140px;
}
.watch-field-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.watch-select,
.watch-value-input {
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text);
}
.watch-value-input { font-family: var(--font-mono); }
.watch-select:focus,
.watch-value-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Alert tag in table */
.watch-alert-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-mono);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Share / export-import panel */
.watch-share {
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.watch-share-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.watch-share-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.watch-share-text {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text);
  resize: vertical;
  line-height: 1.5;
  word-break: break-all;
}
.watch-share-text:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
@media (max-width: 600px) {
  .watch-share-row { grid-template-columns: 1fr; }
}

/* Price-action chart card */
.watch-chart-card {
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.watch-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.watch-chart-wrap {
  position: relative;
  height: 260px;
}
@media (max-width: 600px) {
  .watch-chart-wrap { height: 200px; }
}

/* Watch table: numeric columns get mono feel, tighter padding */
.watch-table th, .watch-table td {
  white-space: nowrap;
}