/* Marketplace — builds on styles.css.
 * Direct adoption of the Claude Design `marketplace-styles.css` (handoff
 * bundle 8Uv-tmaD1W9VPBLDMeqJhg). All CSS vars referenced are already
 * defined in static/styles.css (--bg, --bg-subtle, --bg-sunken, --border,
 * --border-strong, --text-muted, --text-faint, --accent, --accent-bg,
 * --row-hover, --font-mono). No new tokens needed.
 */

.app.market-app { display: flex; flex-direction: column; height: 100vh; }
.app.market-app .topbar { flex-shrink: 0; }

.market-tabs {
  display: flex; gap: 2px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.market-tabs button {
  background: transparent; border: 0;
  padding: 12px 16px; border-radius: 0;
  color: var(--text-muted); font-size: 13.5px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 500;
}
.market-tabs button:hover { color: var(--text); }
.market-tabs button.active {
  color: var(--text); font-weight: 600;
  border-bottom-color: #0d0d0d;
}
.market-tabs button .count {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-subtle); padding: 1px 6px; border-radius: 3px;
}

/* toolbar: search + (categories) + sort */
.market-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.market-toolbar .search-input {
  position: relative; min-width: 260px; flex: 0 0 320px; max-width: 360px;
}
.market-toolbar .search-input input {
  width: 100%; height: 34px;
  background: white; border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px 0 32px; font-size: 13px; outline: none;
}
.market-toolbar .search-input input:focus { border-color: #0d0d0d; box-shadow: 0 0 0 3px rgba(13,13,13,0.05); }
.market-toolbar .search-input .ic {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.market-cats {
  display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; flex-wrap: wrap;
}
.cat-chip {
  height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border); background: white;
  font-size: 12.5px; color: var(--text-muted); cursor: pointer;
  white-space: nowrap;
  transition: all 80ms ease;
}
.cat-chip:hover { background: var(--row-hover); color: var(--text); }
.cat-chip.active { background: #0d0d0d; color: white; border-color: #0d0d0d; }
.market-sort {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted);
  flex-shrink: 0;
}
.market-sort select {
  appearance: none; height: 30px; padding: 0 26px 0 10px;
  border: 1px solid var(--border); border-radius: 8px; background: white;
  font-size: 12.5px; color: var(--text); cursor: pointer; outline: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%236e6e80' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}
/* keep the toolbar's right edge tidy when cats are absent — push installed-chip
 * + sort to the right via auto margin instead of relying on flex:1 of .market-cats. */
.market-toolbar .toolbar-spacer { flex: 1; min-width: 0; }

/* grid */
.market-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.market-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 18px 24px 8px;
}
@media (max-width: 1200px) { .market-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .market-grid { grid-template-columns: repeat(2, 1fr); } }

.app-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.app-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.app-card .icon {
  width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.app-card .body { min-width: 0; flex: 1; }
.app-card .nm {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono);
}
.app-card .desc {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
  margin: 4px 0 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 37px;
}
.app-card .stats {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--text-muted); font-family: var(--font-mono);
}
.app-card .stats .s { display: inline-flex; align-items: center; gap: 4px; }
.app-card .stats .s svg { opacity: 0.55; }
.app-card .stats .verified { color: var(--accent); opacity: 0.85; }
.app-card .stats .warn { color: #d97706; opacity: 0.85; }

/* minimal add / installed button */
.add-btn {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-subtle);
  color: var(--text-muted); cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all 90ms ease;
}
.add-btn:hover { background: var(--bg-sunken); color: var(--text); border-color: var(--border-strong); }
.add-btn.installed {
  background: var(--accent-bg); border-color: transparent; color: var(--accent);
}
.add-btn.installed:hover { background: #fee2e2; color: #b91c1c; }
.add-btn .ic-check, .add-btn .ic-remove { display: grid; place-items: center; }
.add-btn.installed:hover .ic-check { display: none; }
.add-btn.installed .ic-remove { display: none; }
.add-btn.installed:hover .ic-remove { display: grid; }
.add-btn.installing { pointer-events: none; opacity: 0.7; }
.add-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.add-btn .spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--text-muted);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* pagination */
.market-pager {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 16px 24px 22px;
}
.market-pager .info {
  margin-right: auto;
  font-size: 12px; color: var(--text-muted); font-family: var(--font-mono);
}
.market-pager .quick {
  margin-left: auto;
  font-size: 12px; color: var(--text-muted);
}
.pager-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border); background: white; border-radius: 7px;
  font-size: 12.5px; color: var(--text); cursor: pointer; font-family: var(--font-mono);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.pager-btn:hover:not(:disabled) { background: var(--row-hover); }
.pager-btn.active { background: #0d0d0d; color: white; border-color: #0d0d0d; }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-ellipsis { color: var(--text-faint); padding: 0 4px; }

.market-empty {
  text-align: center; padding: 80px 20px; color: var(--text-muted);
}
.market-empty .icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--bg-subtle);
  display: grid; place-items: center; margin: 0 auto 12px;
}
.market-empty h3 { font-size: 15px; color: var(--text); margin: 0 0 4px; }

/* installed counter chip in toolbar */
.installed-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent);
  font-size: 12.5px; font-weight: 500; flex-shrink: 0;
}

/* error strip — sits between toolbar and grid */
.market-error {
  margin: 12px 24px 0; padding: 10px 14px;
  border-radius: 8px; border: 1px solid #e87070;
  background: rgba(232, 112, 112, 0.06);
  color: #b91c1c; font-size: 12.5px;
}