/* e5a.css -- menubalk-toetsenbordfocus en het commandopalet.
 *
 * Alleen var(--...) uit core.css, geen eigen hex -- VS Code is de visuele lat
 * (localfiles/webclient/BRIEFING.md). Het palet volgt VS Code's Quick Input: een
 * gecentreerd paneel boven de pagina, niet gecentreerd op het scherm (dichter bij de
 * menubalk waar het conceptueel bij hoort).
 */

/* ---- menubalk: toetsenbordfocus (Alt/pijlen), naast de bestaande hover/open ---- */
#menubar .menu.kbfocus {
  background: var(--surface2);
  color: var(--text-strong);
  outline: 1px solid var(--focus);
  outline-offset: -1px;
}
#menubar .dropdown .item.kbfocus:not(.disabled) {
  background: var(--accent);
  color: var(--accent-tx);
}
#menubar .dropdown .item.kbfocus:not(.disabled) .key { color: var(--accent-tx); }

/* ---- commandopalet ---- */
.palette-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .3);
  display: flex; justify-content: center;
  padding-top: 90px;
}
.palette-overlay[hidden] { display: none; }

.palette-box {
  width: 600px; max-width: calc(100vw - 32px);
  max-height: min(420px, calc(100vh - 140px));
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.palette-input {
  font: var(--ui-fs) var(--font-ui);
  color: var(--text-strong);
  background: var(--bg);
  border: 0; border-bottom: 1px solid var(--rule);
  padding: 10px 12px;
  outline: none;
}

.palette-list {
  overflow-y: auto;
  padding: 4px;
}
.palette-item {
  display: flex; align-items: center; gap: 16px;
  padding: 0 10px; height: 28px; border-radius: 4px;
  color: var(--text);
  cursor: pointer;
}
.palette-item .palette-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-item .palette-key { color: var(--text-dim); font-size: calc(var(--ui-fs) * 11 / 13); }
.palette-item:hover:not(.disabled) { background: var(--hover); }
.palette-item.sel:not(.disabled) { background: var(--accent); color: var(--accent-tx); }
.palette-item.sel:not(.disabled) .palette-key { color: var(--accent-tx); }
.palette-item.disabled { color: var(--text-muted); cursor: default; }
.palette-empty { padding: 10px 12px; color: var(--text-dim); font-size: calc(var(--ui-fs) * 12 / 13); }

/* light theme only (S-0000-0382 group C): the command palette becomes a soft card,
 * using the light shape/elevation tokens -- dark is untouched (same guard as
 * core.css's #menubar .dropdown block). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .palette-box {
    background: var(--surface-card); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
}
:root[data-theme="light"] .palette-box {
  background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}