/* ─── DealerDMS — IN-APP Marketplace module (public/js/marketplace.js) ─────── */
/* NOTE: public/css/marketplace.css is the PUBLIC /marketplace showcase page's
   sheet (landing-styled). This file is the signed-in app module's sheet.
   Theme-token only (--surface/--text/--text-muted/--border/--primary) so every
   light + dark theme renders correctly. Reuses admin.css primitives (.admin-tabs,
   .card, .form-grid, table.grid, .btn-link) — this adds only what's new. */

/* Catalogue toolbar — the search box is the shared .prt-search component
   (🔎 icon + input); this only caps its width inside the toolbar. */
.mkt-toolbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.mkt-toolbar .prt-search { flex: 0 1 340px; }

/* Component card grid */
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mkt-card { background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  transition: border-color .15s, box-shadow .15s; }
.mkt-card:hover { border-color: color-mix(in srgb, var(--primary, #1d4ed8) 40%, var(--border, #e2e8f0));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--text, #0f172a) 6%, transparent); }
.mkt-card-top { display: flex; align-items: flex-start; gap: 10px; }
.mkt-ico { font-size: 22px; line-height: 1; flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary, #1d4ed8) 10%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--primary, #1d4ed8) 18%, var(--border, #e2e8f0)); }
.mkt-card-title { min-width: 0; flex: 1; }
.mkt-name { font-size: 15px; font-weight: 700; color: var(--text, #0f172a); overflow-wrap: anywhere; }
.mkt-tag { font-size: 11.5px; color: var(--text-muted, #64748b); background: var(--surface-hover, rgba(127,127,127,.1));
  padding: 1px 6px; border-radius: 5px; }
.mkt-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; }
.mkt-cat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted, #64748b); }
.mkt-desc { font-size: 13px; line-height: 1.5; color: var(--text-muted, #64748b); margin: 0; flex: 1; }
.mkt-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Inline forms (new key / widget editor) */
.mkt-inline-form { border: 1px dashed var(--border, #cbd5e1); border-radius: 10px; padding: 16px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--primary, #1d4ed8) 3%, var(--surface, #fff)); }
.mkt-scope-row { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 4px 0; }
.mkt-scope { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text, #0f172a); cursor: pointer; }
.mkt-scope input { width: auto; margin: 0; accent-color: var(--primary, #1d4ed8); }
.mkt-scope code { font-size: 12px; background: var(--surface-hover, rgba(127,127,127,.1)); padding: 1px 5px; border-radius: 4px; }

/* Key tables — origin chips can be long URLs */
.mkt-origins code { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; }

/* Snippet output */
.mkt-snippet-wrap { margin-top: 16px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; overflow: hidden; }
.mkt-snippet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; font-size: 12.5px; color: var(--text-muted, #64748b);
  background: var(--surface-hover, rgba(127,127,127,.06)); border-bottom: 1px solid var(--border, #e2e8f0); }
.mkt-snippet { margin: 0; padding: 14px 16px; font-size: 12.5px; line-height: 1.55; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text, #0f172a); background: var(--surface, #fff); white-space: pre; }

/* Platform-admin table + editor */
.mkt-row-actions { text-align: right; white-space: nowrap; }
.mkt-row-actions .btn-link { margin-left: 12px; }
textarea.mkt-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; }

@media (max-width: 640px) {
  .mkt-grid { grid-template-columns: 1fr; }
  .mkt-toolbar { flex-wrap: wrap; }
  .mkt-toolbar input[type="search"] { flex-basis: 100%; }
}