/* slim.css -- fouten uitgelegd, quick fixes, fix met agent.
   Alleen de tokens uit core.css (var(--...)), geen eigen hex -- VS Code is de visuele lat. */

/* het gloeilampje in de gutter naast een foutregel: VOORAAN in de rij (order: -2), en
 * verticaal op het midden van het cijfer, net als de breekpuntstip (S-0000-0312). Het is
 * een flexitem van de .g-rij (e1a.css), dus het emoji staat op de basislijn van het
 * cijfer; een emoji heeft zijn inktmidden zo'n .38em boven zijn basislijn, het cijfer een
 * halve kapitaalhoogte (--gcap) -- het verschil schuift het er precies naast. Eerder stond
 * het met float: left bovenaan de regel, een paar px boven het cijfer. Het eigen emojifont
 * houdt dat .38em gelijk, welk codefont er ook om heen staat. */
.slim-bulb {
  flex: none; order: -2;
  cursor: pointer;
  font: calc(var(--code-fs) * 11 / 14)/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  transform: translateY(calc(.38em - var(--gcap) / 2));
}
.slim-bulb:hover { filter: brightness(1.3); }

/* de knoppen die dit bestand in e4b's problemenrijen hangt (additief, geen eigen rij) */
.slim-prob-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.slim-prob-btn {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 6px;
  font: var(--ui-fs) var(--font-ui);
  cursor: pointer;
}
.slim-prob-btn:hover { background: var(--hover); }

/* de popover: uitleg + quick fixes + fix-met-agent, op klik/hover/Ctrl+. */
.slim-pop {
  position: fixed;
  z-index: 500;
  max-width: 480px;
  max-height: 60vh;
  overflow: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  padding: 10px 12px;
  font: var(--ui-fs) var(--font-ui);
}

.slim-pop-loading { color: var(--text-dim); font-style: italic; }

.slim-pop-msg {
  font-family: var(--font-code);
  font-size: calc(var(--ui-fs) * 12 / 13);
  color: var(--danger-tx);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

.slim-pop-secs { margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.slim-pop-sec {
  background: var(--surface2);
  color: var(--text-dim);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: calc(var(--ui-fs) * 11 / 13);
}

.slim-pop-expl {
  white-space: pre-wrap;
  line-height: 1.5;
  margin-bottom: 8px;
}

.slim-pop-empty { color: var(--text-dim); font-style: italic; margin-bottom: 8px; }

.slim-pop-fixes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.slim-pop-fixbtn {
  text-align: left;
  background: var(--surface2);
  color: var(--text-strong);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 4px 8px;
  font: var(--ui-fs) var(--font-code);
  cursor: pointer;
}
.slim-pop-fixbtn:hover { background: var(--hover); border-color: var(--focus); }

.slim-pop-actions { display: flex; justify-content: flex-end; }
.slim-pop-agentbtn {
  background: var(--accent);
  color: var(--accent-tx);
  border: none;
  border-radius: 3px;
  padding: 4px 10px;
  font: var(--ui-fs) var(--font-ui);
  cursor: pointer;
}
.slim-pop-agentbtn:hover { background: var(--accent-hi); }

/* ---- LIGHT THEME ONLY (S-0000-0382, groep E) ----------------------------------------
 * Dark stays exactly as above -- same guard as core.css's #menubar .dropdown. Added at
 * the end, no existing rule touched. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .slim-pop {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }
}
:root[data-theme="light"] .slim-pop {
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}