@import "tom-select/dist/css/tom-select.default.css";
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  body {
    @apply bg-stone-50 text-stone-800 antialiased;
  }

  .dark body {
    @apply bg-gray-950 text-gray-100;
  }
}

@theme {
  --color-album-primary: #1e3a8a;
  --color-album-primary-light: #3b82f6;
  --color-album-accent: #f59e0b;
  --color-album-accent-light: #fbbf24;
  --color-album-owned: #22c55e;
  --color-album-duplicate: #3b82f6;
  --color-album-missing: #d4d4d8;
}

.sticker-card {
  @apply rounded border border-album-missing bg-white flex flex-col items-center justify-center cursor-pointer select-none overflow-hidden text-center px-0 min-w-0;
  position: relative;
  isolation: isolate;
  aspect-ratio: 3 / 4;
  transition: all 0.15s;
}

.dark .sticker-card {
  @apply border-gray-600 bg-gray-800;
}

.sticker-card:hover {
  @apply border-album-accent shadow-sm;
  transform: translateY(-2px) scale(1.02);
}

.sticker-card.owned {
  @apply border-album-owned bg-green-50;
}

.dark .sticker-card.owned {
  @apply border-green-500 bg-green-900/20;
}

.sticker-card.duplicate {
  @apply border-album-duplicate;
}

.dark .sticker-card.duplicate {
  @apply border-blue-500;
}

.sticker-card.dup-2 {
  @apply bg-blue-50;
}

.dark .sticker-card.dup-2 {
  @apply bg-blue-900/15;
}

.sticker-card.dup-3 {
  @apply bg-blue-100;
}

.dark .sticker-card.dup-3 {
  @apply bg-blue-900/25;
}

.sticker-card.dup-4 {
  @apply bg-blue-200;
}

.dark .sticker-card.dup-4 {
  @apply bg-blue-800/30;
}

.sticker-card.dup-5 {
  @apply bg-blue-300;
}

.dark .sticker-card.dup-5 {
  @apply bg-blue-800/40;
}

.sticker-card.missing {
  @apply bg-stone-50 opacity-55;
}

.dark .sticker-card.missing {
  @apply bg-gray-800 opacity-40;
}

.sticker-card {
  position: relative;
  overflow: hidden;
}

.sticker-card::before {
  content: "";
  position: absolute;
  top: -15%;
  left: -15%;
  width: 130%;
  height: 130%;

  background-image: var(--flag-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: rotate(15deg);

  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

.sticker-number,
.sticker-name,
.sticker-controls {
  position: relative;
  z-index: 1;
}

.sticker-number,
.sticker-name,
.sticker-controls {
  position: relative;
  z-index: 1;
}

.sticker-number {
  @apply text-[11px] font-bold text-stone-400 uppercase leading-none;
}

.dark .sticker-number {
  @apply text-gray-500;
}

.sticker-name {
  @apply text-[10px] font-semibold text-stone-700 leading-tight line-clamp-2 px-0.5;
  overflow-wrap: break-word;
  hyphens: auto;
}

.dark .sticker-name {
  @apply text-gray-300;
}

.sticker-controls {
  @apply flex items-center gap-0.5;
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  animation: stickerControlsIn 0.15s ease-out;
}

@keyframes stickerControlsIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sticker-btn {
  @apply w-4 h-4 flex items-center justify-center rounded text-xs font-bold leading-none cursor-pointer select-none;
  @apply bg-white border border-stone-300 text-stone-600 hover:bg-stone-100 active:scale-90;
  transition: all 0.1s;
  line-height: 1;
}

.dark .sticker-btn {
  @apply bg-gray-700 border-gray-500 text-gray-200 hover:bg-gray-600;
}

.sticker-qty {
  @apply text-[11px] font-bold text-album-duplicate leading-none min-w-[14px] text-center;
}

.dark .sticker-qty {
  @apply text-blue-400;
}

@media (max-width: 639px) {
  .sticker-btn {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
  }

  .sticker-controls .sticker-qty {
    font-size: 0.9375rem;
    min-width: 22px;
  }

  .sticker-controls {
    gap: 0.25rem;
    bottom: 4px;
  }
}

.progress-bar {
  @apply h-2 rounded-full bg-stone-200 overflow-hidden;
}

.dark .progress-bar {
  @apply bg-gray-700;
}

.progress-bar-fill {
  @apply h-full rounded-full bg-gradient-to-r from-album-primary to-album-primary-light transition-all duration-500;
}

/* ── Tom Select custom theme ─────────────────────── */

.ts-wrapper .ts-control {
  @apply rounded-lg border border-stone-300 bg-white py-2 pe-3 ps-3 text-sm min-h-0 shadow-none cursor-pointer;
  height: auto;
}
.dark .ts-wrapper .ts-control {
  @apply border-gray-600 bg-gray-800 text-gray-100;
}
.ts-wrapper.focus .ts-control {
  @apply border-album-primary-light ring-1 ring-album-primary-light;
}

.ts-wrapper.multi .ts-control > div {
  @apply bg-album-primary text-white rounded-md py-0.5 px-2 text-xs font-medium;
  text-shadow: none;
  background-image: none;
  border: 0;
}
.dark .ts-wrapper.multi .ts-control > div {
  @apply bg-album-primary-light;
}
.ts-wrapper.multi .ts-control > div.active {
  @apply bg-album-primary;
  background-image: none;
  border: 0;
}
.dark .ts-wrapper.multi .ts-control > div.active {
  @apply bg-blue-800;
}

.ts-wrapper.multi .ts-control > div .remove {
  @apply text-white/70 hover:text-white;
  border: 0;
  line-height: 1;
  font-size: 1rem;
  padding: 0;
  margin-left: 0.25rem;
}

/* ── dropdown ── */

.ts-dropdown {
  @apply border border-stone-300 rounded-lg bg-white shadow-lg text-sm;
  margin-top: 4px;
}
.dark .ts-dropdown {
  @apply border-gray-600 bg-gray-800 text-gray-100;
}
.ts-dropdown .option {
  @apply px-3 py-2 text-sm text-stone-700;
}
.dark .ts-dropdown .option {
  @apply text-gray-200;
}
.ts-dropdown .active {
  @apply bg-stone-100;
}
.dark .ts-dropdown .active {
  @apply bg-gray-700;
}
.ts-dropdown .selected {
  @apply text-album-primary font-medium;
}
.dark .ts-dropdown .selected {
  @apply text-album-primary-light;
}
.ts-dropdown .no-results {
  @apply text-stone-400 px-3 py-2;
}
.dark .ts-dropdown .no-results {
  @apply text-gray-500;
}

/* ── checkbox_options plugin ── */

.plugin-checkbox_options .option {
  padding-left: 2.5rem;
}
.plugin-checkbox_options .option .checkbox {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid #d4d4d8;
  border-radius: 0.25rem;
  background: transparent;
  color: transparent;
  font-size: 0.7rem;
  line-height: 1;
  transition: all 0.15s;
}
.dark .plugin-checkbox_options .option .checkbox {
  border-color: #6b7280;
}
.plugin-checkbox_options .option.selected .checkbox {
  @apply bg-album-primary border-album-primary text-white;
}
.dark .plugin-checkbox_options .option.selected .checkbox {
  @apply bg-album-primary-light border-album-primary-light;
}

/* ── remove_button plugin ── */

.ts-wrapper .ts-control > .item .remove:hover {
  @apply bg-transparent;
}