/* MakeProxyCard SPA — Brand override (v0.4.0 restyle)
   Restyles the designer SPA to match Brand Guideline v1.0
   (dark theme, mint accent #17EF97, burgundy CTA #a4004f, sharp 0px corners).
   Existing utility-class structure stays intact — only visuals change. */

:root {
  --brand-accent:   #17EF97;
  --brand-cta:      #17EF97;
  --brand-cta-hover:#4c4c4c;
  --brand-bg-1:     #0a0a0a;
  --brand-bg-2:     #1f1f1f;
  --brand-bg-3:     #262626;
  --brand-bg-4:     #383838;
  --brand-text:     #FFFFFF;
  --brand-text-2:   #888888;
  --brand-border:   rgba(255,255,255,0.10);
}

* { box-sizing: border-box; }

body {
  background: var(--brand-bg-1) !important;
  color: var(--brand-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Verdana, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Light-mode surface classes -> dark
   ============================================================ */
.bg-white            { background-color: var(--brand-bg-2) !important; }
.bg-slate-50         { background-color: var(--brand-bg-1) !important; }
.bg-slate-100        { background-color: var(--brand-bg-3) !important; }
.bg-slate-200        { background-color: var(--brand-bg-4) !important; }

.bg-white\/90, .bg-white\/95 {
  background-color: rgba(255,255,255,0.9) !important;
  color: #000 !important;
}

.border-slate-100, .border-slate-200 {
  border-color: var(--brand-border) !important;
}
.border-slate-300 { border-color: rgba(255,255,255,0.18) !important; }

.text-slate-800 { color: var(--brand-text) !important; }
.text-slate-700 { color: var(--brand-text) !important; }
.text-slate-600 { color: var(--brand-text-2) !important; }
.text-slate-500 { color: var(--brand-text-2) !important; }
.text-slate-400 { color: var(--brand-text-2) !important; }
.text-violet-600, .text-violet-700 { color: var(--brand-accent) !important; }

/* Sharp corners per brand */
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl {
  border-radius: 0 !important;
}
.rounded-full { border-radius: 9999px !important; }

/* Hover surfaces */
.hover\:bg-slate-100:hover { background-color: rgba(255,255,255,0.10) !important; }
.hover\:bg-violet-100:hover { background-color: rgba(23,239,151,0.18) !important; }
.hover\:bg-violet-700:hover { background-color: var(--brand-cta-hover) !important; }
.hover\:shadow-md:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important; }

/* Brand button style (overrides bg-violet-600 text-white for primary CTAs) */
.bg-violet-600 { background-color: var(--brand-cta) !important; color: #0a0a0a !important; }
.bg-violet-700 { background-color: var(--brand-cta-hover) !important; color: #FFFFFF !important; }
.bg-violet-600\/40 { background-color: rgba(23,239,151,0.40) !important; }
.bg-violet-600\/60 { background-color: rgba(23,239,151,0.60) !important; }
.bg-violet-50 { background-color: rgba(23,239,151,0.12) !important; }
.border-violet-500 { border-color: var(--brand-accent) !important; }
.text-violet-600, .text-violet-700 { color: var(--brand-accent) !important; }
.ring-violet-500 { --tw-ring-color: var(--brand-accent) !important; }

/* Toast / status colors */
.bg-slate-800 { background-color: var(--brand-bg-4) !important; }
.bg-emerald-600 { background-color: var(--brand-accent) !important; color: #000 !important; }
.bg-rose-600   { background-color: var(--brand-cta) !important; color: #0a0a0a !important; }
.bg-amber-600  { background-color: var(--brand-text-2) !important; color: #000 !important; }

/* ============================================================
   SPA Landing Page - black BG + mint header (matches cart/account)
   ============================================================ */

/* SPA body background -> black #0a0a0a (was bg-slate-100 light) */
#app, body > div#app {
  background-color: var(--brand-bg-1) !important;
}

/* SPA header - force solid black, kill the violet gradient */
.bg-gradient-to-r,
.bg-gradient-to-r.from-violet-700,
.bg-gradient-to-r.to-indigo-700,
header.bg-gradient-to-r {
  background: var(--brand-bg-1) !important;
  background-image: none !important;
  color: var(--brand-text) !important;
  border-bottom: 1px solid var(--brand-border) !important;
}

/* Brand wordmark (the h1 with the layer-group icon) in SPA header */
header h1 {
  color: var(--brand-text) !important;
}
header h1 .fa-layer-group { color: var(--brand-accent) !important; }

/* Brand link (M chip + wordmark) - transparent so wordmark reads on dark header.
   The M chip inside is targeted separately below. */
header a.brand-link,
header > div > a[href="/"] {
  background: transparent !important;
  border: none !important;
  color: var(--brand-text) !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Brand chip in header (the M logo tile) - bulletproof mint override */
header a.brand-link > .bg-violet-600,
header > div > a[href="/"] > .bg-violet-600,
header .brand-chip,
header div.brand-chip,
header [class*="brand-chip"] {
  background-color: #17EF97 !important;
  background-image: none !important;
  color: #0a0a0a !important;
  border-radius: 6px !important;
  border: 1px solid #17EF97 !important;
}

/* Brand wordmark in header - plain white */
header a.brand-link > span,
header > div > a[href="/"] > span {
  color: var(--brand-text) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Header nav links -> mint buttons (matching cart/account).
   Border-radius forced to 6px (md per brand) - !important wins over Tailwind. */
header nav a {
  background-color: var(--brand-accent) !important;
  color: #0a0a0a !important;
  font-weight: 700 !important;
  border: 1px solid var(--brand-accent) !important;
  border-radius: 6px !important;
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  transition: background var(--brand-transition), color var(--brand-transition), border-color var(--brand-transition) !important;
}
header nav a:hover {
  background-color: var(--brand-cta-hover) !important;
  border-color: var(--brand-cta-hover) !important;
  color: #FFFFFF !important;
}

/* Cart count pill in SPA header - white circle with black text so it stands out on dark theme */
#nav-cart-count {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

/* ============================================================
   Scroller & app surfaces
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--brand-bg-4); border-radius: 4px; }
::-webkit-scrollbar-track { background: var(--brand-bg-1); }

/* Card slot - empty & filled */
.card-slot {
  position: relative;
  border-radius: 0 !important;
  overflow: hidden;
  background: var(--brand-bg-3) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
  transition: box-shadow .15s ease, transform .15s ease;
}
.card-slot:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.6) !important;
}
.card-slot.sortable-ghost {
  opacity: 0.3;
}
.card-slot.card-empty {
  background:
    repeating-linear-gradient(45deg, var(--brand-bg-3), var(--brand-bg-3) 10px, var(--brand-bg-4) 10px, var(--brand-bg-4) 20px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--brand-text-2);
}
.card-empty-pattern {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
.card-empty-icon {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 10px;
  color: var(--brand-text-2);
  opacity: 0.85;
}
.card-empty-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  font-size: 10px;
  font-weight: 500;
  color: var(--brand-text-2);
  text-align: center;
  letter-spacing: 0.02em;
}
.card-empty-label > div:first-child { color: var(--brand-text); }
.card-empty-label > div:last-child { color: var(--brand-text-2); }

.thumb-canvas {
  width: 100%;
  display: block;
  aspect-ratio: 63 / 88;
  background: var(--brand-bg-1) !important;
}
.thumb-canvas.ratio-custom {
  aspect-ratio: 63 / 83;
}

.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(2px);
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}

.editor-canvas-wrap {
  position: relative;
  overflow: hidden;
  background: var(--brand-bg-1) !important;
  border-radius: 0 !important;
  cursor: grab;
  touch-action: none;
}
.editor-canvas-wrap:active { cursor: grabbing; }

.safe-zone-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px dashed var(--brand-accent) !important;
  margin: 3.2% 2.4%;
  border-radius: 0 !important;
}

.spinner {
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: var(--brand-accent) !important;
  border-radius: 50%;
  width: 1.1rem; height: 1.1rem;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.scryfall-result:hover {
  outline: 2px solid var(--brand-accent) !important;
}

/* Multi/single search result thumbnails */
.multi-thumb, .multi-thumb-variant, .single-thumb {
  aspect-ratio: 63 / 88;
  object-fit: cover;
  background: var(--brand-bg-1) !important;
  display: block;
}
.multi-thumb          { width: 5rem; flex-shrink: 0; }
.multi-thumb-variant  { width: 2.25rem; }

.tab-btn.active {
  background: var(--brand-cta) !important;
  color: #0a0a0a !important;
}

.toast { animation: toast-in .2s ease-out; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

::selection { background: var(--brand-accent); color: #000; }

/* ============================================================
   Native inputs that don't use .input class
   (qty-custom, design-name, scryfall search) - WHITE BG + BLACK text per user
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--brand-radius-md) !important;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
  color: var(--brand-text-2) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--brand-accent) !important;
}

/* File input dropzones (batch-front, shared-back, batch-back) - keep the previous
   styling: dark gray bg, mint "Choose File" button, light gray "no file selected" text. */
input[type="file"] {
  background-color: var(--brand-bg-3) !important;
  color: var(--brand-text-2) !important;
  border-color: var(--brand-accent) !important;
  border-style: dashed !important;
  padding: 10px !important;
}
input[type="file"]::file-selector-button {
  background: var(--brand-accent) !important;
  color: #0a0a0a !important;
  font-weight: 700 !important;
  border: 1px solid var(--brand-accent) !important;
  border-radius: var(--brand-radius-md) !important;
  padding: 8px 14px !important;
  margin-right: 5px !important;
  cursor: pointer !important;
}
input[type="file"]::file-selector-button:hover {
  background: var(--brand-cta-hover) !important;
  border-color: var(--brand-cta-hover) !important;
  color: #FFFFFF !important;
}