/* ==========================================================================
   Seite „Commands“ · Modul-Code CMD · id „commands“ · Route #commands
   Skript: public/js/pages/commands.js

   Liste der eigenen Commands (Antwort-Vorlage mit markierten Platzhaltern,
   wie A „Befehle · Vorschau“), darunter Platzhalter-Referenz und eingebaute
   Befehle. Editor-Dialog: .page-commands-dialog. Farben nur über Tokens.
   ========================================================================== */

/* Antwort-Vorlagen und Platzhalter-Chips (.tpl, .ph, .ph--unknown) kommen aus ui.css (ui.template). */

/* {{pick:…}}: Klammern als Chip (.ph), die Trenner | in Programmblau, damit die Alternativen auseinanderfallen */
.page-commands .cmd-pick__sep { padding: 0 3px; font-weight: 600; color: var(--pgm-ink); }
.page-commands .tbl tr.is-muted .cmd-pick__sep,
.page-commands .tbl tr.is-over-limit .cmd-pick__sep { color: var(--ink-3); }

/* ---------- Eigene Commands ------------------------------------------------- */

.page-commands .cmd-list .pnl__actions .search .input { width: 240px; }
.page-commands .cmd-tbl__trigger { width: 1%; white-space: nowrap; }
.page-commands .cmd-tbl__trigger .over-limit-hint { max-width: 180px; }
.page-commands .cmd-tbl .cmd-tbl__resp { min-width: 260px; max-width: none; }
.page-commands .cmd-tbl__perm .tag { font-size: 10.5px; }
.page-commands .cmd-tbl__on { width: 1%; }
.page-commands .cmd-none { padding: 28px 16px; color: var(--ink-3); text-align: center; }

/* ---------- Referenz: Platzhalter und eingebaute Befehle --------------------- */

.page-commands .cmd-ref__note { padding: 12px 14px; border-top: 1px solid var(--line); font: var(--t-small); color: var(--ink-3); }
.page-commands .cmd-ref__note--top { border-top: 0; border-bottom: 1px solid var(--line); }

.page-commands .cmd-ph__tbl td { vertical-align: top; }
.page-commands .cmd-ph__tbl td:first-child { width: 1%; white-space: nowrap; }
.page-commands .cmd-ph__tbl .ph { font-size: 12.5px; }
.page-commands .cmd-ph__tbl .cell-mono { white-space: nowrap; color: var(--ink); }
.page-commands .cmd-ph__tbl tr.is-muted .cell-mono { color: var(--ink-3); }
.page-commands .cmd-ph__plan { white-space: nowrap; }
.page-commands .cmd-ph__fb { display: block; margin-top: 4px; font: 400 11px/1.3 var(--f-mono); color: var(--ink-3); }

.page-commands .cmd-bi__list { margin: 0; padding: 0; list-style: none; }
.page-commands .cmd-bi__group {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: start;
  gap: 8px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.page-commands .cmd-bi__group:last-child { border-bottom: 0; }
.page-commands .cmd-bi__head { display: grid; justify-items: start; gap: 5px; padding-top: 3px; }
.page-commands .cmd-bi__name { font: 400 12.5px/1.3 var(--f-sans); color: var(--ink-2); }
.page-commands .cmd-bi__group .chip { height: 22px; padding: 0 7px; font-size: 11.5px; }
.page-commands .cmd-bi__group.is-locked .cmd-bi__name { color: var(--ink-3); }
.page-commands .cmd-bi__group.is-locked .chip { background: transparent; border-style: dashed; color: var(--ink-3); }

/* ---------- Editor-Dialog: Vorschau im Chat ----------------------------------- */

.page-commands-dialog .cmd-pv {
  display: grid;
  gap: 2px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  background: var(--void);
}
.page-commands-dialog .cmd-pv__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.page-commands-dialog .cmd-pv__head .lbl { font-size: 10px; }
.page-commands-dialog .cmd-pv__meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; }
.page-commands-dialog .cmd-pv__variant { display: inline-flex; align-items: center; gap: 6px; }
.page-commands-dialog .cmd-pv__n { color: var(--pgm-ink); font-variant-numeric: tabular-nums; }
.page-commands-dialog .cmd-pv__line { padding: 3px 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.page-commands-dialog .cmd-pv__line > * { margin-right: 5px; }
.page-commands-dialog .cmd-pv__line--bot { background: var(--pgm-soft); box-shadow: inset 2px 0 0 var(--pgm); }
.page-commands-dialog .cmd-pv__line--bot .tag { padding: 2px 4px; font-size: 9.5px; }
.page-commands-dialog .cmd-pv__who { font-weight: 600; color: var(--ink-2); margin-right: 0; }
.page-commands-dialog .cmd-pv__who--bot { color: var(--pgm-ink); }
.page-commands-dialog .cmd-pv__colon { color: var(--ink-3); }
.page-commands-dialog .cmd { font: 400 12.5px/1.45 var(--f-mono); color: var(--pgm-ink); }
.page-commands-dialog .cmd-pv__warn { display: grid; gap: 4px; }
.page-commands-dialog .cmd-pv__warn:not(:empty) { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.page-commands-dialog .cmd-pv__warn .form-error { color: var(--amber); }

/* ---------- Schmal: Tabellen als Karten ---------------------------------------- */

@media (max-width: 1180px) {
  .page-commands .cmd-ref { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .page-commands .cmd-list .pnl__actions { flex: 1 1 100%; margin-left: 0; }
  .page-commands .cmd-list .pnl__actions .search,
  .page-commands .cmd-list .pnl__actions .search .input { width: 100%; }

  .page-commands .cmd-tbl thead,
  .page-commands .cmd-ph__tbl thead { display: none; }
  .page-commands .cmd-tbl,
  .page-commands .cmd-tbl tbody,
  .page-commands .cmd-ph__tbl,
  .page-commands .cmd-ph__tbl tbody { display: block; }
  .page-commands .cmd-tbl tr,
  .page-commands .cmd-ph__tbl tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  .page-commands .cmd-tbl tr:last-child,
  .page-commands .cmd-ph__tbl tr:last-child { border-bottom: 0; }
  .page-commands .cmd-tbl td,
  .page-commands .cmd-ph__tbl td { display: block; padding: 0; border: 0; background: none; }
  .page-commands .cmd-tbl tbody tr:hover td { background: none; }
  .page-commands .cmd-tbl__trigger { flex: 1 1 auto; width: auto; }
  .page-commands .cmd-tbl__on { order: 1; width: auto; }
  .page-commands .cmd-tbl .cell-actions { order: 2; width: auto; }
  .page-commands .cmd-tbl .cmd-tbl__resp { order: 3; flex: 1 1 100%; min-width: 0; }
  .page-commands .cmd-tbl td[data-label],
  .page-commands .cmd-ph__tbl td[data-label] { order: 4; text-align: left; font: 400 11.5px/1.4 var(--f-mono); color: var(--ink-2); }
  .page-commands .cmd-tbl td[data-label]::before,
  .page-commands .cmd-ph__tbl td[data-label]::before { content: attr(data-label) " "; color: var(--ink-3); }
  /* Platzhalter kompakt: Code und Beispiel in einer Zeile, Bedeutung darunter */
  .page-commands .cmd-ph__tbl tr { gap: 4px 12px; padding: 10px 14px; }
  .page-commands .cmd-ph__tbl td[data-label="Beispiel"] { order: 1; margin-left: auto; }
  .page-commands .cmd-ph__tbl td[data-label="Beispiel"]::before { content: none; }
  .page-commands .cmd-ph__tbl td.cell-text { flex: 1 1 100%; order: 2; max-width: none; color: var(--ink-3); }
  .page-commands .cmd-ph__tbl td[data-label="Plan"] { order: 3; }
  .page-commands .cmd-tbl tr { gap: 6px 12px; }
  .page-commands .cmd-ph__fb { display: inline; margin: 0 0 0 6px; }
  .page-commands .cmd-bi__group { grid-template-columns: minmax(0, 1fr); }
  .page-commands .cmd-bi__head { grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
}