/* =============================================================================
 * marketplace.css  — gaya tampilan peminjaman marketplace + halaman foto barang
 * Tambahkan setelah app.css. Memakai variabel tema yang sudah ada
 * (--bg --card --text --muted --line --primary --primary2 --danger --warning).
 * ========================================================================== */

/* ---------- Tabs ---------- */
.mp-tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.mp-tab{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;
  padding:9px 16px;font-weight:750;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mp-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.mp-history-btn{margin-left:auto}
.mp-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:800}
.mp-tab.active .mp-badge{background:#fff;color:var(--primary)}

/* ---------- Search ---------- */
.mp-searchbar{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:8px 12px;margin-bottom:16px;box-shadow:var(--shadow)}
.mp-searchbar input{border:0;background:transparent;flex:1;padding:6px 4px}
.mp-searchbar input:focus{outline:none}
.mp-search-ic{opacity:.6}

/* ---------- Catalog grid (kartu produk) ---------- */
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.mp-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .12s,border-color .12s}
.mp-card:hover{transform:translateY(-2px);border-color:var(--primary)}
.mp-card.is-out{opacity:.72}
.mp-thumb{position:relative;aspect-ratio:1/1;background:rgba(148,163,184,.10);cursor:pointer;display:grid;place-items:center;overflow:hidden}
.mp-thumb img{width:100%;height:100%;object-fit:cover}
.mp-noimg{font-size:46px;opacity:.5}
.mp-noimg.lg{font-size:90px}
.mp-noimg.sm{font-size:26px}
.mp-out-tag{position:absolute;top:8px;left:8px;background:var(--danger);color:#fff;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px}
.mp-body{padding:12px;display:flex;flex-direction:column;gap:4px;flex:1}
.mp-name{font-weight:800;font-size:14px;cursor:pointer;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-cat{color:var(--muted);font-size:12px}
.mp-meta{display:flex;justify-content:space-between;gap:6px;font-size:12px;color:var(--muted);margin-top:2px}
.mp-stock b{color:var(--text)}
.mp-incart{font-size:11px;font-weight:800;color:var(--primary);background:rgba(20,184,166,.12);
  border-radius:999px;padding:2px 8px;align-self:flex-start}
.mp-actions{display:flex;gap:6px;margin-top:auto;padding-top:8px}
.mp-actions .btn{flex:1;padding:8px;font-size:13px}
.mp-empty{padding:40px 0;text-align:center}

/* ---------- Detail produk ---------- */
.mp-back{margin-bottom:12px}
.mp-detail{display:grid;grid-template-columns:300px 1fr;gap:20px;margin-bottom:16px}
.mp-detail-img{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  aspect-ratio:1/1;display:grid;place-items:center;box-shadow:var(--shadow)}
.mp-detail-img img{width:100%;height:100%;object-fit:cover}
.mp-detail-info h2{margin:0 0 10px}
.mp-detail-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.badge.ghost{background:rgba(148,163,184,.14);color:var(--muted)}
.mp-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.mp-stat{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(148,163,184,.06)}
.mp-stat span{display:block;font-size:12px;color:var(--muted)}
.mp-stat b{display:block;font-size:24px;margin-top:4px}
.ok-text{color:#16a34a}.danger-text{color:var(--danger)}
.mp-qtyrow{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.mp-qtyrow label{margin:0}
.mp-qtyrow input{width:120px}
.mp-loc-card h3{margin-top:0}

/* ---------- Keranjang ---------- */
.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.mp-cartlist,.mp-statuslist{display:grid;gap:10px}
.mp-cartrow{display:grid;grid-template-columns:60px 1fr 90px auto;gap:12px;align-items:center;
  border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(148,163,184,.05)}
.mp-cart-thumb{width:60px;height:60px;border-radius:12px;overflow:hidden;background:rgba(148,163,184,.12);display:grid;place-items:center}
.mp-cart-thumb img{width:100%;height:100%;object-fit:cover}
.mp-cart-main{min-width:0}
.mp-cart-main b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-cart-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.mp-empty-box{text-align:center;padding:50px 20px;color:var(--muted)}
.mp-empty-ic{font-size:60px;opacity:.4;margin-bottom:10px}
.mp-empty-box p{margin:6px 0 16px;font-size:16px}

/* ---------- Status + workflow ---------- */
.mp-statusrow{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center;
  border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(148,163,184,.05)}
.mp-status-main{min-width:0}
.mp-status-main b{display:block}
.mp-flow{margin-top:8px}
.mp-steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mp-step{font-size:11px;font-weight:750;color:var(--muted);background:rgba(148,163,184,.14);padding:3px 9px;border-radius:999px}
.mp-step.done{background:rgba(20,184,166,.16);color:var(--primary)}
.mp-step.now{background:var(--primary);color:#fff}
.mp-step-sep{color:var(--muted);font-size:12px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

/* ---------- Admin: Foto Barang ---------- */
.img-grid{grid-template-columns:1fr 1fr;align-items:start}
.ii-suggest{display:grid;gap:4px;margin-top:6px;max-height:280px;overflow:auto}
.ii-sug{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:9px 12px;cursor:pointer}
.ii-sug:hover{border-color:var(--primary);background:rgba(20,184,166,.08)}
.ii-sug b{font-size:14px}
.ii-has-img{font-size:11px;font-weight:800;color:#16a34a}
.ii-sug-empty{padding:10px}
.ii-selected{margin-top:12px}
.ii-chip{border:1px solid var(--primary);background:rgba(20,184,166,.10);border-radius:14px;padding:10px 14px}
.ii-chip b{display:block}
.ii-uploader{margin-top:14px;display:grid;gap:12px}
.ii-preview{border:1px dashed var(--line);border-radius:16px;min-height:200px;display:grid;place-items:center;
  background:rgba(148,163,184,.06);overflow:hidden}
.ii-preview img{max-width:100%;max-height:320px;object-fit:contain}
.ii-upload-actions{display:flex;gap:10px;flex-wrap:wrap}
.ii-upload-actions .btn{cursor:pointer}
.ii-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.ii-gcard{border:1px solid var(--line);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:4px;text-align:center}
.ii-gthumb{aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:rgba(148,163,184,.12)}
.ii-gthumb img{width:100%;height:100%;object-fit:cover}
.ii-gname{font-weight:750;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ii-gcard .btn{padding:6px;font-size:12px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .mp-detail{grid-template-columns:1fr}
  .mp-detail-img{max-width:300px}
  .img-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .mp-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .mp-cartrow{grid-template-columns:48px 1fr;grid-auto-rows:auto}
  .mp-cartrow .qty-input,.mp-cartrow .btn.danger{grid-column:2}
  .mp-statusrow{grid-template-columns:48px 1fr}
  .mp-statusrow .btn,.mp-statusrow .badge{grid-column:1/-1;justify-self:start}
  .mp-detail-stats{grid-template-columns:1fr}
  .mp-history-btn{margin-left:0}
}