/* =========================================================================
 * copier.css — Komponenten der integrierten Copier-Seite.
 * Rein tokenbasiert (var(--*)) → erbt Accent/Theme/Glass des Journals
 * automatisch. Alle Klassen `cp-`-präfixiert, um Kollisionen mit App-Klassen
 * zu vermeiden. Buttons/Modals/Tabs nutzen die Journal-Standards (.btn,
 * .modal.glass, .us-tabs) und brauchen hier keine eigene CSS.
 * ========================================================================= */

/* ---- Subpage-Container (Routing) ---- */
.cp-view { display: none; }
.cp-view.active { display: block; }

/* ---- Agent-Tabs (Multi-Agent-Umschalter) ---- */
.cp-agent-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.cp-agent-tab {
  font: inherit; font-size: 13px; font-weight: 550; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--glass-border-strong); background: var(--glass); color: var(--text-dim); cursor: pointer;
  transition: all 0.15s;
}
.cp-agent-tab:hover { background: var(--glass-strong); color: var(--text); }
.cp-agent-tab.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---- Mode-Strip (Global-Status + Kill/Live) ---- */
.cp-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 22px;
  background: var(--amber-soft); border: 1px solid var(--glass-border);
}
.cp-strip.live { background: var(--green-soft); }
.cp-strip.killed { background: var(--red-soft); }
.cp-strip.offline { background: var(--glass-strong); }
.cp-strip-word { font-weight: 700; font-size: 15px; letter-spacing: 0.06em; color: var(--amber); }
.cp-strip.live .cp-strip-word { color: var(--green); }
.cp-strip.killed .cp-strip-word { color: var(--red); }
.cp-strip.offline .cp-strip-word { color: var(--text-faint); }
.cp-strip-sub { color: var(--text-dim); font-size: 13px; }
.cp-strip-spacer { flex: 1; }

/* ---- Karten-Grid + Karten ---- */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cp-card {
  background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 14px 16px;
}
.cp-card.role-master { border-left: 3px solid var(--accent); }
.cp-card.role-slave  { border-left: 3px solid var(--glass-border-strong); }
.cp-card.role-chain  { border-left: 3px solid var(--amber); }

.cp-acct-head { display: flex; align-items: center; gap: 10px; }
.cp-acct-name { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--glass-border-strong); color: var(--text-dim);
}
.cp-role-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; }
.cp-role-badge.master { background: var(--accent); color: var(--on-accent); }
.cp-role-badge.slave  { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--glass-border-strong); }
.cp-role-badge.chain  { background: var(--amber-soft); color: var(--amber); }

.cp-pulse { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.cp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); flex: none; }
.cp-dot.ok { background: var(--green); }
.cp-dot.warn { background: var(--amber); }
.cp-dot.down { background: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .cp-dot.ok { animation: cpBeat 2s ease-in-out infinite; }
  @keyframes cpBeat { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
}

.cp-stats { display: flex; gap: 22px; margin-top: 12px; }
.cp-stat .cp-lbl { font-size: 11px; color: var(--text-faint); }
.cp-stat .cp-val { font-size: 16px; font-weight: 600; margin-top: 1px; }
.cp-acct-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }

/* ---- Link-Karten ---- */
.cp-link-card { display: flex; flex-direction: column; gap: 10px; }
.cp-link-route { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; flex-wrap: wrap; }
.cp-arrow { color: var(--text-faint); }
.cp-mode-badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 5px; }
.cp-mode-badge.dry  { background: var(--amber-soft); color: var(--amber); }
.cp-mode-badge.live { background: var(--green-soft); color: var(--green); }
.cp-link-meta { font-size: 12.5px; color: var(--text-dim); display: flex; gap: 14px; flex-wrap: wrap; }
.cp-link-foot { display: flex; align-items: center; gap: 10px; }
.cp-link-foot .cp-grow { flex: 1; }

/* ---- Tabellen (Signals / Decisions) ---- */
.cp-table-wrap { background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius); overflow-x: auto; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cp-table th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-faint); padding: 6px 10px; border-bottom: 1px solid var(--glass-border-strong);
}
.cp-table td { padding: 5px 10px; border-bottom: 1px solid var(--glass-border); color: var(--text-dim); vertical-align: top; }
.cp-table td.cp-dec { font-weight: 600; color: var(--text); white-space: nowrap; }
.cp-table tr.bad td.cp-dec { color: var(--red); }
.cp-table tr.dry td.cp-dec { color: var(--amber); }
.cp-table tr.good td.cp-dec { color: var(--green); }

/* ---- Sektions-Label + Leerzustand ---- */
.cp-sec { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; }
.cp-sec .cp-count { color: var(--text-dim); font-weight: 500; letter-spacing: 0; text-transform: none; }
.cp-empty { border: 1px dashed var(--glass-border-strong); border-radius: var(--radius); padding: 26px; text-align: center; color: var(--text-dim); font-size: 13px; }

/* ---- Hinweisbox in Modals ---- */
.cp-hint {
  background: var(--glass-strong); border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; color: var(--text); margin-bottom: 12px;
}
.cp-hint.danger { background: var(--red-soft); border-color: var(--red); }

/* ---- Danger-Button (copier-eigen, überschreibt NICHT die App-.btn-Klassen) ---- */
.btn.cp-danger { color: var(--red); border-color: var(--red); background: transparent; }
.btn.cp-danger:hover { background: var(--red-soft); }
.btn.cp-danger.armed { background: var(--red); color: #fff; }

/* Monospace-Tabellenzellen (Fallback, falls die App keine .mono-Klasse hat) */
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-variant-numeric: tabular-nums; }

/* Routen-Editor: mehr Felder als in ein 460px-Standardmodal passen.
   Breite folgt dem Inhalt (Lightbox-Standard), mobil bleibt es Vollbild. */
.modal.cp-route-modal { max-width: 560px; }
.modal.cp-route-modal .field { margin-bottom: 12px; }

/* ---- Token-Box (Pairing) ---- */
.cp-tokenbox {
  font-family: ui-monospace, Consolas, monospace; font-size: 14px; background: var(--surface-2);
  border: 1px dashed var(--glass-border-strong); border-radius: var(--radius-sm); padding: 12px;
  word-break: break-all; user-select: all;
}