/* =====================================================================
   TCG Re:store — app.css
   Dopunski stilovi za backend stranice (login, marketplace, sell, itd.)
   NAPOMENA: ovo NE zamjenjuje css/style.css — samo ga dopunjuje.
   Ako style.css već ima klase za dugmad/kartice/forme, slobodno ukloni
   duplikate odavde i koristi postojeće. Boje su usklađene s brief-om:
   žuta #F7F628 / #FCFB6B na crnoj pozadini.
   ===================================================================== */

:root{
  --tcg-bg:#0b0710;
  --tcg-bg-alt:#150f1f;
  --tcg-violet:#F7F628;
  --tcg-violet-2:#FCFB6B;
  --tcg-text:#f2eefc;
  --tcg-text-dim:#b9aed1;
  --tcg-border:#2a2138;
  --tcg-danger:#ef4444;
  --tcg-good:#22c55e;
}

.app-section{ max-width:1180px; margin:0 auto; padding:32px 20px 64px; color:var(--tcg-text); }

.app-card{
  background:var(--tcg-bg-alt);
  border:1px solid var(--tcg-border);
  border-radius:14px;
  padding:24px;
}

.app-form label{ display:block; margin:14px 0 6px; font-size:.9rem; color:var(--tcg-text-dim); }
.app-form input, .app-form select, .app-form textarea{
  width:100%; padding:10px 12px; border-radius:8px;
  background:#1a1424; border:1px solid var(--tcg-border); color:var(--tcg-text);
  font-size:1rem;
}
.app-form input:focus, .app-form select:focus, .app-form textarea:focus{
  outline:none; border-color:var(--tcg-violet);
  box-shadow:0 0 0 3px rgba(247,246,40,.25);
}

.btn-violet{
  display:inline-block; margin-top:18px; padding:11px 22px; border:none; border-radius:9px;
  background:linear-gradient(135deg, var(--tcg-violet), var(--tcg-violet-2));
  color:#0a080f; font-weight:600; cursor:pointer; text-decoration:none; font-size:1rem;
}
.btn-violet:hover{ filter:brightness(1.08); }
.btn-outline{
  display:inline-block; margin-top:18px; padding:10px 20px; border-radius:9px;
  border:1px solid var(--tcg-violet); color:var(--tcg-violet); background:transparent;
  text-decoration:none; font-weight:600;
}

.alert{ padding:12px 14px; border-radius:8px; margin-bottom:16px; font-size:.92rem; }
.alert-error{ background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4); color:#fca5a5; }
.alert-success{ background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.4); color:#86efac; }

/* --- Filter bar (marketplace) --- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.filter-bar select, .filter-bar input{
  padding:9px 12px; border-radius:8px; background:#1a1424; border:1px solid var(--tcg-border); color:var(--tcg-text);
}

/* --- Listing grid --- */
.listing-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.listing-tile{
  background:var(--tcg-bg-alt); border:1px solid var(--tcg-border); border-radius:12px; overflow:hidden;
  text-decoration:none; color:var(--tcg-text); transition:transform .15s, border-color .15s;
  display:flex; flex-direction:column;
}
.listing-tile:hover{ transform:translateY(-3px); border-color:var(--tcg-violet); }
.listing-tile img{ width:100%; aspect-ratio:63/88; object-fit:contain; background:#000; }
.listing-tile .tile-body{ padding:12px 14px; flex:1; display:flex; flex-direction:column; gap:6px; }
.listing-tile .tile-name{ font-weight:600; font-size:.95rem; }
.listing-tile .tile-set{ font-size:.78rem; color:var(--tcg-text-dim); }
.listing-tile .tile-price{ margin-top:auto; font-weight:700; color:var(--tcg-violet-2); font-size:1.05rem; }

/* --- Condition bar: crveno -> zeleno gradijent signature element --- */
.condition-bar{ height:6px; border-radius:4px; background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e); position:relative; margin:4px 0; }
.condition-bar .marker{
  position:absolute; top:-3px; width:3px; height:12px; background:#fff; border-radius:2px;
  transform:translateX(-50%);
}
.condition-label{ font-size:.75rem; color:var(--tcg-text-dim); }

/* --- Offers table (card.php) --- */
.offers-table{ width:100%; border-collapse:collapse; margin-top:18px; }
.offers-table th, .offers-table td{ padding:12px 10px; border-bottom:1px solid var(--tcg-border); text-align:left; font-size:.92rem; }
.offers-table th{ color:var(--tcg-text-dim); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.offers-table tr:hover td{ background:rgba(247,246,40,.06); }

.seller-link{ color:var(--tcg-violet-2); text-decoration:none; }
.seller-link:hover{ text-decoration:underline; }

.badge{ display:inline-block; padding:2px 9px; border-radius:99px; font-size:.72rem; font-weight:600; }
.badge-seller{ background:rgba(247,246,40,.18); color:var(--tcg-violet-2); }

.upload-drop{
  border:2px dashed var(--tcg-border); border-radius:12px; padding:32px; text-align:center;
  color:var(--tcg-text-dim); cursor:pointer; transition:border-color .15s, background .15s;
}
.upload-drop.dragover{ border-color:var(--tcg-violet); background:rgba(247,246,40,.06); }
.upload-preview{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.upload-preview img{ width:80px; height:110px; object-fit:cover; border-radius:6px; border:1px solid var(--tcg-border); }

@media (max-width:640px){
  .app-section{ padding:20px 14px 48px; }
  .listing-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}