/* File: /css/market-user.css */
.user-hub { margin-top: 2.5rem; border-top: 1px solid var(--clr-border); padding-top: 2rem; }
.user-hub[hidden] { display:none !important; }

.user-hub__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.user-hub__subtitle { color: var(--clr-muted); margin: .25rem 0 0; }

.user-hub__tabs { display:flex; gap:.5rem; margin: .75rem 0 1rem; flex-wrap:wrap; }
.uh-tab { border:1px solid var(--clr-border); background:var(--clr-bg); padding:.5rem .75rem; border-radius:999px; cursor:pointer; display:flex; gap:.5rem; align-items:center; }
.uh-tab.active { background: var(--clr-surface); border-color: var(--clr-accent); color: var(--clr-accent-contrast, var(--clr-text)); }
.pill { background: var(--clr-chip, #eceff1); color: var(--clr-text); padding:.1rem .5rem; border-radius:999px; font-size:.75rem; }

.user-hub__panels { border:1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); }
.uh-panel { display:none; padding:1rem; }
.uh-panel.active { display:block; }

.uh-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; }
.uh-card { border:1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-bg); padding:.75rem; display:flex; gap:.75rem; }
.uh-card__thumb { width:96px; height:96px; object-fit:cover; border-radius: .5rem; background:#f2f4f7; }
.uh-card__title { font-weight:600; margin:0 0 .25rem; }
.uh-card__meta { font-size:.9rem; color:var(--clr-muted); display:flex; gap:.5rem; flex-wrap:wrap; }
.uh-card__actions { margin-top:.5rem; display:flex; gap:.5rem; }

.uh-empty { text-align:center; color:var(--clr-muted); padding:2rem 1rem; }
.uh-empty[hidden] { display:none; }

/* Messages */
.msg-layout { display:grid; grid-template-columns: 320px 1fr; min-height: 380px; }
@media (max-width: 900px){ .msg-layout { grid-template-columns: 1fr; } }

.msg-threads { border-right:1px solid var(--clr-border); background:var(--clr-bg); }
@media (max-width: 900px){ .msg-threads { border-right:none; border-bottom:1px solid var(--clr-border); } }

.msg-search { width:100%; padding:.5rem .75rem; border:none; border-bottom:1px solid var(--clr-border); outline:none; background:transparent; }
.thread-list { list-style:none; margin:0; padding:0; max-height:60vh; overflow:auto; }
.thread { display:flex; gap:.75rem; align-items:start; padding:.75rem; border-bottom:1px solid var(--clr-border); cursor:pointer; }
.thread.active { background: var(--clr-surface); }
.thread .avatar { width:36px; height:36px; border-radius:50%; background:#cbd5e1; flex:0 0 auto; }
.thread .thread-meta { display:flex; justify-content:space-between; width:100%; }
.thread .thread-title { font-weight:600; }
.thread .thread-sub { font-size:.85rem; color:var(--clr-muted); }

.msg-room { display:flex; flex-direction:column; min-height:380px; }
.msg-room__header { padding:.75rem 1rem; border-bottom:1px solid var(--clr-border); }
.room-sub { color:var(--clr-muted); font-size:.85rem; }

.msg-stream { padding:1rem; display:flex; flex-direction:column; gap:.5rem; height:50vh; overflow:auto; }
.bubble { max-width:70%; padding:.5rem .75rem; border-radius: 12px; background: #eef2ff; }
.bubble.me { align-self:flex-end; background:#d1fae5; }
.bubble .meta { font-size:.75rem; color:var(--clr-muted); margin-top:.25rem; }

.msg-composer { display:flex; gap:.5rem; padding:.5rem; border-top:1px solid var(--clr-border); }
.msg-composer input { flex:1; }

.guest { margin-top:2rem; }
.guest-card { border:1px solid var(--clr-border); border-radius:var(--radius-md); background:var(--clr-surface); padding:1.5rem; text-align:center; }
.guest-actions { display:flex; gap:.5rem; justify-content:center; margin-top:1rem; }

/* Small bookmark button added to marketplace cards */
.card-save-btn { position:absolute; top:.5rem; right:.5rem; background:rgba(255,255,255,.9); border:1px solid var(--clr-border); border-radius:999px; padding:.35rem .5rem; cursor:pointer; display:flex; align-items:center; gap:.25rem; box-shadow: var(--shadow-sm); }
.card-save-btn .fa-bookmark { color:#555; }
.card-save-btn.saved .fa-bookmark { color: var(--clr-accent, #2563eb); }


/* =========================================================
   My Listings (uh_mine) — elegant layout, spacing & polish
   Scope: ONLY inside #uh-mine
   ========================================================= */

/* Grid: slightly larger cards for better readability */
#uh-mine .uh-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
  }
  
  /* Card: soft elevation + two-column layout (thumb + content) */
  #uh-mine .uh-card {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: .875rem;
    padding: .875rem;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-surface) 100%);
    box-shadow: var(--shadow-xs, 0 1px 0 rgba(0,0,0,.02));
    transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease;
  }
  
  #uh-mine .uh-card:hover {
    border-color: color-mix(in lab, var(--clr-border), var(--clr-accent) 18%);
    box-shadow: var(--shadow-sm, 0 6px 16px rgba(0,0,0,.06));
    transform: translateY(-1px);
  }
  
  #uh-mine .uh-card:focus-within {
    outline: 3px solid color-mix(in lab, var(--clr-accent), transparent 70%);
    outline-offset: 2px;
  }
  
  /* Media: consistent crop + gentle zoom on hover */
  #uh-mine .uh-card__thumb {
    width: 120px;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    border-radius: .625rem;
    background: #eef2f7;
    transition: transform .25s ease, filter .25s ease;
  }
  #uh-mine .uh-card:hover .uh-card__thumb { transform: scale(1.02); }
  
  /* Title: stronger hierarchy + clamp to 2 lines */
  #uh-mine .uh-card__title {
    font-weight: 700;
    margin: 0 0 .25rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;          /* clamp */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* Metadata: make spans look like subtle chips */
  #uh-mine .uh-card__meta {
    margin-top: .25rem;
    gap: .4rem;
    font-size: .875rem;
    color: var(--clr-muted);
  }
  #uh-mine .uh-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--clr-chip, #eef2f7);
    border: 1px solid var(--clr-border);
    line-height: 1;
  }
  #uh-mine .uh-card__meta i { opacity: .8; }
  
  /* Actions: cleaner buttons with gentle hover/press states */
  #uh-mine .uh-card__actions {
    margin-top: .65rem;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
  }
  
  #uh-mine .uh-card__actions .btn,
  #uh-mine .uh-card__actions .btn--secondary,
  #uh-mine .uh-card__actions .btn--danger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    border: 1px solid var(--clr-border);
    background: var(--clr-bg);
    color: var(--clr-text);
    transition: background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
  }
  
  #uh-mine .uh-card__actions .btn:hover,
  #uh-mine .uh-card__actions .btn--secondary:hover,
  #uh-mine .uh-card__actions .btn--danger:hover {
    background: var(--clr-surface);
    border-color: color-mix(in lab, var(--clr-border), var(--clr-text) 14%);
  }
  
  #uh-mine .uh-card__actions .btn:active,
  #uh-mine .uh-card__actions .btn--secondary:active,
  #uh-mine .uh-card__actions .btn--danger:active {
    transform: translateY(1px);
  }
  
  /* Emphasize primary-ish actions subtly */
  #uh-mine .uh-card__actions .btn { 
    background: color-mix(in lab, var(--clr-accent), white 92%);
    border-color: color-mix(in lab, var(--clr-accent), var(--clr-border) 70%);
  }
  #uh-mine .uh-card__actions .btn i { color: var(--clr-accent); }
  
  /* Secondary stays neutral */
  #uh-mine .uh-card__actions .btn--secondary {
    background: var(--clr-bg);
    border-color: var(--clr-border);
  }
  
  /* Danger: soft red but readable */
  #uh-mine .uh-card__actions .btn--danger {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
  }
  #uh-mine .uh-card__actions .btn--danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
  }
  
  /* SKELETON: shimmer for loading state produced by skeletonCards() */
  @keyframes uhMineShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  #uh-mine .uh-card[aria-busy="true"] .uh-card__thumb,
  #uh-mine .uh-card[aria-busy="true"] .uh-card__title,
  #uh-mine .uh-card[aria-busy="true"] .uh-card__meta span {
    background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%);
    background-size: 400% 100%;
    animation: uhMineShimmer 1.1s linear infinite;
    border-color: transparent;
    color: transparent;
  }
  
  /* Responsive: stack thumb on top for narrow widths */
  @media (max-width: 560px){
    #uh-mine .uh-card {
      grid-template-columns: 1fr;
      padding: .75rem;
    }
    #uh-mine .uh-card__thumb {
      width: 100%;
      aspect-ratio: 16 / 9;
    }
    #uh-mine .uh-card__actions {
      justify-content: flex-start;
    }
  }
  
  /* === Saved button on listing cards === */
.equipment-card .card-save-btn{
  position:absolute;
  top:.5rem; right:.5rem;
  display:flex; align-items:center; gap:.4rem;
  padding:.35rem .55rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  color:#111;
  font-size:.85rem;
  line-height:1;
  cursor:pointer;
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.equipment-card .card-save-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.equipment-card .card-save-btn i{
  color:#666;
}
.equipment-card .card-save-btn.saved{
  background:#0f766e; /* teal-700 */
  color:#fff;
  border-color:transparent;
}
.equipment-card .card-save-btn.saved i{
  color:#fff;
}
@media (prefers-color-scheme: dark){
  .equipment-card .card-save-btn{
    background:rgba(20,20,20,.9);
    color:#eaeaea;
    border-color:rgba(255,255,255,.06);
  }
}

/* === Modal Save button state === */
.modal-actions .modal-save-btn.saved{
  background:#0f766e;
  color:#fff;
  border-color:transparent;
}
.modal-actions .modal-save-btn i{
  margin-right:.4rem;
}