/* Column-major responsive grid (1 / 2 / 3 / 4 cols); gap-px parent draws dividers */
.set-inventory-card-grid {
  display: grid;
  gap: 1px;
  grid-auto-flow: column;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(var(--si-rows-1), auto);
}

@media (min-width: 768px) {
  .set-inventory-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--si-rows-2), auto);
  }
}

@media (min-width: 1280px) {
  .set-inventory-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(var(--si-rows-3), auto);
  }
}

@media (min-width: 1536px) {
  .set-inventory-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(var(--si-rows-4), auto);
  }
}

.set-inventory-card-grid > .set-inventory-row {
  background-color: rgb(255 255 255);
}

.dark .set-inventory-card-grid > .set-inventory-row {
  background-color: rgb(31 41 55); /* gray-800 — matches card table surface */
}

/* Card image hover preview — opacity only (no scale/lag) */
.set-inventory-card-preview {
  will-change: opacity, left, top;
  transition: opacity 60ms ease-out;
}

.set-inventory-card-preview__image {
  display: block;
  width: 250px;
  max-width: min(250px, calc(100vw - 2rem));
  height: auto;
  max-height: min(72vh, 350px);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35);
}

/* +/- column: flush to row edges, each finish fills its share */
.set-inventory-row__controls {
  align-self: stretch;
}

.set-inventory-finish-control {
  flex: 0 0 4.25rem;
  width: 4.25rem;
  min-height: 100%;
}

.set-inventory-finish-control__btn {
  flex: 1 1 0;
  min-height: 2rem;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.set-inventory-finish-control__btn:active {
  transform: scale(0.92);
}

.set-inventory-finish-control__qty {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}

/* Foil finish quantity controls — holographic pastel gradient (light mode: -200 stops) */
.set-inventory-finish-foil {
  background: linear-gradient(
    110deg,
    #fbcfe8 0%,
    #fef08a 22%,
    #bbf7d0 48%,
    #bfdbfe 72%,
    #ddd6fe 100%
  );
}

.dark .set-inventory-finish-foil {
  background:
    linear-gradient(
      110deg,
      rgba(236, 72, 153, 0.2) 0%,
      rgba(251, 191, 36, 0.18) 25%,
      rgba(34, 197, 94, 0.18) 50%,
      rgba(59, 130, 246, 0.2) 75%,
      rgba(168, 85, 247, 0.18) 100%
    ),
    rgb(31 41 55); /* gray-800 — matches normal finish control */
}

.set-inventory-finish-control.set-inventory-finish-pending-increment {
  outline: 2px solid rgba(22, 163, 74, 0.75);
  outline-offset: -2px;
}

.set-inventory-finish-control.set-inventory-finish-pending-decrement {
  outline: 2px solid rgba(220, 38, 38, 0.75);
  outline-offset: -2px;
}

.dark .set-inventory-finish-control.set-inventory-finish-pending-increment {
  outline-color: rgba(74, 222, 128, 0.7);
}

.dark .set-inventory-finish-control.set-inventory-finish-pending-decrement {
  outline-color: rgba(248, 113, 113, 0.7);
}

/* Domain tint from rarity column onward (Riftbound) — light mode uses stronger opacity */
.set-inventory-row__content--fury { background-color: rgba(220, 38, 38, 0.32); }
.set-inventory-row__content--calm { background-color: rgba(22, 163, 74, 0.32); }
.set-inventory-row__content--mind { background-color: rgba(37, 99, 235, 0.32); }
.set-inventory-row__content--body { background-color: rgba(234, 88, 12, 0.32); }
.set-inventory-row__content--chaos { background-color: rgba(147, 51, 234, 0.32); }
.set-inventory-row__content--order { background-color: rgba(202, 138, 4, 0.32); }
.set-inventory-row__content--colorless { background-color: rgba(107, 114, 128, 0.26); }

.dark .set-inventory-row__content--fury { background-color: rgba(220, 38, 38, 0.2); }
.dark .set-inventory-row__content--calm { background-color: rgba(22, 163, 74, 0.2); }
.dark .set-inventory-row__content--mind { background-color: rgba(37, 99, 235, 0.2); }
.dark .set-inventory-row__content--body { background-color: rgba(234, 88, 12, 0.2); }
.dark .set-inventory-row__content--chaos { background-color: rgba(147, 51, 234, 0.2); }
.dark .set-inventory-row__content--order { background-color: rgba(202, 138, 4, 0.2); }
.dark .set-inventory-row__content--colorless { background-color: rgba(107, 114, 128, 0.16); }

.set-inventory-row__content--dual {
  background: linear-gradient(
    90deg,
    var(--set-inventory-domain-a) 0%,
    var(--set-inventory-domain-a) 50%,
    var(--set-inventory-domain-b) 50%,
    var(--set-inventory-domain-b) 100%
  );
}

.dark .set-inventory-row__content--dual {
  background: linear-gradient(
    90deg,
    var(--set-inventory-domain-a-dark) 0%,
    var(--set-inventory-domain-a-dark) 50%,
    var(--set-inventory-domain-b-dark) 50%,
    var(--set-inventory-domain-b-dark) 100%
  );
}

/* Row hover: neutral slate (not a domain color); replaces tint while hovered */
.set-inventory-row__content--hoverable:hover {
  background: rgb(226 232 240) !important; /* slate-200 */
  background-image: none !important;
}

.dark .set-inventory-row__content--hoverable:hover {
  background: rgb(51 65 85) !important; /* slate-700 */
  background-image: none !important;
}