/* ============================================================================
   SecondBrain Extensies — winkel-stylesheet.

   Dezelfde ontwerptaal als de SecondBrain web-UI en plugin.css (donkere glass-look,
   neon-teal accent), zodat de winkel bij het product hoort.
   ========================================================================== */

:root {
  --surface: #0d1117;
  --surface-2: #111823;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-high: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --text: #e6edf3;
  --text-dim: rgba(230, 237, 243, 0.55);
  --accent: #2dd4bf;
  --accent-dim: rgba(45, 212, 191, 0.15);
  --error: #f87171;
  --warn: #fbbf24;
  --ok: #4ade80;
  --radius: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -200px, #16212e 0%, var(--surface) 60%);
  min-height: 100vh;
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }
.narrow { max-width: 560px; }

/* ── Kop & navigatie ───────────────────────────────────────────────────── */

header {
  border-bottom: 1px solid var(--border);
  background: rgba(13, 17, 23, 0.7);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand { font-weight: 600; font-size: 16px; color: var(--text); }
.brand span { color: var(--accent); }
nav { display: flex; gap: 18px; margin-left: auto; align-items: center; }
nav a { color: var(--text-dim); font-size: 13px; }
nav a:hover, nav a.active { color: var(--text); text-decoration: none; }

h1 { font-size: 22px; font-weight: 600; margin: 32px 0 6px; }
h2 { font-size: 15px; font-weight: 600; margin: 28px 0 12px; }
.lead { color: var(--text-dim); margin: 0 0 24px; }

.eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--text-dim); font-weight: 600; margin: 0 0 8px;
}

/* ── Panelen ───────────────────────────────────────────────────────────── */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.panel-body { padding: 18px 20px; }
.panel-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  font-weight: 600;
}

/* ── Kerncijfers (hoe doet een uitgever het) ───────────────────────────── */
.stat-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 12px 0;
}
.stat {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 92px; padding: 8px 12px;
  background: var(--panel-high); border: 1px solid var(--border); border-radius: 10px;
}
.stat-value { font-size: 20px; font-weight: 600; line-height: 1.1; }
.stat-value.warn { color: var(--warn); }
.stat-value.error { color: var(--error); }
.stat-value.accent { color: var(--accent); }
.stat-label { font-size: 11px; color: var(--text-dim); }
.stat-hint { font-size: 10px; color: var(--text-dim); opacity: 0.75; }

.item { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.item:last-child { border-bottom: none; }
.item.clickable { cursor: pointer; }
.item.clickable:hover { background: var(--panel-high); }

.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.meta { font-size: 12px; color: var(--text-dim); margin: 2px 0 0; }
.muted { color: var(--text-dim); }
.small { font-size: 12px; }
.mono { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
.empty { padding: 28px 20px; color: var(--text-dim); text-align: center; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

/* ── Badges ────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--border); color: var(--text-dim);
  white-space: nowrap;
}
.badge.ok      { color: var(--ok);     border-color: rgba(74, 222, 128, 0.35);  background: rgba(74, 222, 128, 0.08); }
.badge.warn    { color: var(--warn);   border-color: rgba(251, 191, 36, 0.35);  background: rgba(251, 191, 36, 0.08); }
.badge.error   { color: var(--error);  border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); }
.badge.accent  { color: var(--accent); border-color: rgba(45, 212, 191, 0.35);  background: var(--accent-dim); }

/* ── Formulieren ───────────────────────────────────────────────────────── */

label { display: block; font-size: 12px; color: var(--text-dim); margin: 14px 0 5px; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=url],
select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 80px; }
input[type=file] { color: var(--text-dim); font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; cursor: pointer;
  background: var(--panel-high); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600;
}
.btn:hover { background: rgba(255, 255, 255, 0.11); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #04211d; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.danger { color: var(--error); border-color: rgba(248, 113, 113, 0.35); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.notice {
  padding: 12px 16px; border-radius: 12px; margin: 16px 0;
  border: 1px solid var(--border); background: var(--panel); font-size: 13px;
}
.notice.error { color: var(--error); border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.07); }
.notice.ok    { color: var(--ok);    border-color: rgba(74, 222, 128, 0.35);  background: rgba(74, 222, 128, 0.07); }
.notice.warn  { color: var(--warn);  border-color: rgba(251, 191, 36, 0.35);  background: rgba(251, 191, 36, 0.07); }
.notice:empty { display: none; }

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 24px 0 20px; }
.tab {
  padding: 9px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--text-dim); border-bottom: 2px solid transparent; background: none; border-top: none;
  border-left: none; border-right: none; font-family: inherit;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ── Bevindingen uit de pakketcontrole ─────────────────────────────────── */

.finding {
  display: flex; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.finding:last-child { border-bottom: none; }
.finding .sev { flex: 0 0 60px; }
.finding .loc { font-size: 11px; color: var(--text-dim); margin-top: 3px; }

pre.code {
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; overflow-x: auto; font-family: 'Cascadia Mono', Consolas, monospace;
  font-size: 12px; margin: 0; color: var(--text);
  /* Een lang pad of een regel uit plugin.json rekte anders het hele paneel op: <pre> breekt
     van zichzelf niet af, en een grid-cel geeft mee aan zijn inhoud. Afbreken dus, en
     alleen binnen een woord als het echt niet anders kan. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.eula {
  max-height: 380px; overflow-y: auto; padding: 18px 20px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); border-radius: 12px;
  font-size: 13px; white-space: pre-wrap;
}

/* ── Dialoogvenster ────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}

.modal {
  width: 100%; max-width: 480px;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  /* Een formulier met meerdere velden (pakket bewerken, versie uploaden) is hoger dan een
     laag scherm. Zonder dit valt de bevestigknop buiten beeld en is de dialoog niet af te
     ronden: nu blijft de titel staan en scrollen de velden. */
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
}
.modal .panel-head { flex: none; }
.modal .panel-body { overflow-y: auto; }
/* De knoppen blijven in beeld terwijl de velden eronder doorscrollen; anders moet je
   eerst naar beneden zoeken om te kunnen bevestigen. */
.modal .panel-body > .btn-row {
  position: sticky; bottom: -1px;
  background: var(--surface-2); padding: 10px 0 0; margin-bottom: 0;
}
.modal label:first-child { margin-top: 0; }

/* ── Detailpaneel (review) ─────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
/* Zonder dit mag een cel groeien tot zijn breedste kind (min-width is standaard 'auto'),
   en duwt één lang pad de hele kolom uit beeld. */
.split > * { min-width: 0; }

/* ── Reviewdetail: de actiebalk staat altijd op dezelfde plek ──────────────
   'Goedkeuren en publiceren' hoort niet onder honderden regels bestandslijst te liggen.
   De balk plakt aan de onderkant van het scherm zolang het detailpaneel in beeld is, dus
   de knoppen staan er meteen — zonder eerst naar beneden te zoeken.

   De overflow-regel is de voorwaarde: .panel klipt normaal met overflow:hidden, en dat
   maakt van het paneel een scrollcontainer waarin sticky nooit aanslaat. De balk neemt de
   ronding van het paneel over, zodat er niets te klippen valt. */
#detail .panel { overflow: visible; }
.detail-actions {
  position: sticky; bottom: 0; z-index: 2;
  margin: 16px -20px -18px; padding: 14px 20px;
  background: var(--surface-2); border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  header .wrap { flex-wrap: wrap; gap: 12px; }
  nav { margin-left: 0; width: 100%; }
}

/* ============================================================================
   De winkel: voorpagina, filteren en de pakketpagina.

   Alles hieronder is opgebouwd rond één tegel (.capsule). Die staat in de etalage,
   in een rij, in een zoekresultaat en in een lijst — één vorm die je overal herkent,
   in plaats van vier varianten die uit elkaar gaan lopen.
   ========================================================================== */

.wide { max-width: 1360px; }

/* ── Winkelbalk ────────────────────────────────────────────────────────── */

.storebar {
  position: sticky; top: 57px; z-index: 9;
  background: rgba(13, 17, 23, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}

.storebar .wrap { display: flex; align-items: center; gap: 8px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.storebar a { color: var(--text-dim); font-size: 13px; padding: 6px 10px; border-radius: 8px; }
.storebar a:hover { color: var(--text); background: var(--panel); text-decoration: none; }
.storebar a.active { color: var(--text); background: var(--panel-high); }

.searchbox { position: relative; margin-left: auto; min-width: 260px; }
.searchbox input { width: 100%; padding-left: 34px; }
.searchbox::before {
  content: "\2315"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); font-size: 16px; pointer-events: none;
}

/* ── Uitgelicht ────────────────────────────────────────────────────────── */

.hero { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.hero-track { display: flex; transition: transform 320ms ease; }
.hero-slide { min-width: 100%; }

.hero-inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center;
  padding: 40px; min-height: 320px;
  background: linear-gradient(120deg, rgba(45, 212, 191, 0.14), rgba(13, 17, 23, 0.2) 55%), var(--surface-2);
}

.hero-inner h2 { font-size: 26px; margin: 8px 0 10px; }
.hero-note { color: var(--text); font-size: 15px; margin: 0 0 18px; max-width: 46ch; }
.hero-shot {
  border-radius: 12px; border: 1px solid var(--border); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--panel); display: flex; align-items: center; justify-content: center;
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; }
.hero-shot .plug-icon { width: 96px; height: 96px; font-size: 40px; border-radius: 24px; }

.hero-dots { display: flex; gap: 6px; justify-content: center; padding: 12px; background: var(--surface-2); }
.hero-dots button {
  width: 26px; height: 4px; border: 0; padding: 0; border-radius: 2px; cursor: pointer;
  background: var(--border);
}
.hero-dots button.active { background: var(--accent); }

/* ── Categorietegels ───────────────────────────────────────────────────── */

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cat-tile {
  display: block; text-align: left; padding: 16px; border-radius: 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  font: inherit; transition: border-color 120ms, background 120ms;
}
.cat-tile:hover { background: var(--panel-high); border-color: rgba(45, 212, 191, 0.4); text-decoration: none; }
.cat-tile strong { display: block; margin-bottom: 4px; }
.cat-tile .count { float: right; color: var(--accent); font-size: 12px; }

/* ── Rijen met tegels ──────────────────────────────────────────────────── */

.row-head { display: flex; align-items: baseline; gap: 12px; margin: 36px 0 12px; }
.row-head h2 { margin: 0; }
.row-head .sub { color: var(--text-dim); font-size: 12px; }
.row-head .more { margin-left: auto; font-size: 12px; }

.rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.rail > * { scroll-snap-align: start; flex: 0 0 260px; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── De tegel ──────────────────────────────────────────────────────────── */

.capsule {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font: inherit; cursor: pointer; width: 100%;
  transition: border-color 120ms, background 120ms, transform 120ms;
}
.capsule:hover { background: var(--panel-high); border-color: rgba(45, 212, 191, 0.4); transform: translateY(-1px); text-decoration: none; }
.capsule .top { display: flex; gap: 10px; align-items: flex-start; }
.capsule .name { font-weight: 600; }
.capsule .summary {
  color: var(--text-dim); font-size: 13px; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.capsule .foot { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 12px; color: var(--text-dim); }
.capsule .price { margin-left: auto; }

/* Het icoon uit het pakket; ontbreekt dat, dan de eerste letter van de naam. */
.plug-icon {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 18px; overflow: hidden;
}
.plug-icon img { width: 100%; height: 100%; object-fit: contain; }

/* ── Zoeken: filters links, resultaten rechts ──────────────────────────── */

.browse { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }

.filters { position: sticky; top: 120px; max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 4px; }
.filters::-webkit-scrollbar { width: 8px; }
.filters::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.facet { border-bottom: 1px solid var(--border); padding: 12px 0; }
.facet > summary {
  cursor: pointer; font-weight: 600; font-size: 13px; list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::before { content: "\25BE"; color: var(--text-dim); font-size: 10px; transition: transform 120ms; }
.facet:not([open]) > summary::before { transform: rotate(-90deg); }
.facet .options { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }

.opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px;
  cursor: pointer; font-size: 13px; color: var(--text-dim);
}
.opt:hover { background: var(--panel); color: var(--text); }
.opt input { margin: 0; accent-color: var(--accent); }
.opt .label { flex: 1; }
.opt .count { font-size: 11px; color: var(--text-dim); }
.opt.checked { color: var(--text); }

/* ── Resultaatbalk en chips ────────────────────────────────────────────── */

.resultbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.resultbar .count { color: var(--text-dim); font-size: 13px; }
.resultbar select { width: auto; }
.resultbar .spacer { margin-left: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px;
  background: var(--accent-dim); border: 1px solid rgba(45, 212, 191, 0.35);
  color: var(--text); font-size: 12px; cursor: pointer; font-family: inherit;
}
.chip:hover { background: rgba(45, 212, 191, 0.25); }
.chip .x { color: var(--text-dim); }

.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.results.list { grid-template-columns: 1fr; }
.results.list .capsule { flex-direction: row; align-items: center; gap: 16px; }
.results.list .capsule .top { flex: 0 0 260px; }
.results.list .capsule .summary { flex: 1; -webkit-line-clamp: 1; }
.results.list .capsule .foot { margin: 0; flex: 0 0 auto; }

.pager { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }

/* ── Pakketpagina ──────────────────────────────────────────────────────── */

.pkg-head { display: flex; gap: 16px; align-items: center; margin: 28px 0 20px; }
.pkg-head .plug-icon { width: 64px; height: 64px; border-radius: 16px; font-size: 26px; }
.pkg-head h1 { margin: 0 0 4px; }

.pkg-body { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }

.gallery { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--panel); }
.gallery .stage { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
.gallery .stage img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.gallery .thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; }
.gallery .thumbs button {
  flex: 0 0 96px; aspect-ratio: 16 / 9; padding: 0; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: none; overflow: hidden; opacity: 0.55;
}
.gallery .thumbs button.active { opacity: 1; border-color: var(--accent); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }

.spec { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.spec:last-child { border-bottom: 0; }
.spec .k { color: var(--text-dim); }
.spec .v { text-align: right; }

.perm { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.perm:last-child { border-bottom: 0; }
.perm .ico { flex: none; width: 22px; text-align: center; color: var(--accent); }
.perm .why { color: var(--text-dim); font-size: 12px; margin: 2px 0 0; }

/* De filterknop bestaat alleen op smalle schermen; op een breed scherm staat de
   zijbalk er gewoon. */
#filter-toggle { display: none; }

@media (max-width: 900px) {
  .browse, .pkg-body, .hero-inner { grid-template-columns: 1fr; }
  .hero-inner { padding: 24px; }
  .searchbox { margin-left: 0; width: 100%; }

  /* Een filterkolom van twee schermen hoog boven de resultaten is op een telefoon geen
     filter maar een muur. Dicht, tenzij je erom vraagt. */
  #filter-toggle { display: inline-flex; }
  .filters { display: none; position: static; max-height: none; margin-bottom: 16px; }
  .browse.filters-open .filters { display: block; }
}