/* Konto-Overlay ("Profil & Einstellungen") — uebernommen aus den scoped-Styles
 * von core-frontend/components/UserProfileOverlay.vue. Selektoren unveraendert;
 * im Light DOM entfaellt Vues scoped-Attribut.
 *
 * Ergaenzt um wenige Regeln fuer Elemente, die der Port ohne die Vue-Primitive
 * VcField/VcButton aufbaut (account-field, account-btn-primary, account-close,
 * account-status) — bewusst am Bestandslook orientiert.
 */

/* Breite aus dem Bestand: .account-panel traegt dort width:
 * min(440px, calc(100vw - 16px)). Der Port hatte hier 560px stehen — das
 * verbreiterte das Panel um 120px und aenderte damit zugleich die Spaltenzahl
 * des Feldrasters (siehe .account-field-grid). */
.account-right-overlay {
  position: fixed;
  top: 48px;
  right: 0;
  bottom: 0;
  width: min(440px, calc(100vw - 16px));
  /* NUTZERBEFUND (2026-08-10): „Beim Aufruf im Live-Viewer ist das Control
   * unten rechts ueber dem Dialog."  Zutreffend und GEMESSEN am laufenden
   * Stack: `document.elementFromPoint` traf unten rechts
   *   button.wheel-center → div.nav-wheel [z=320] → div.core-controls-root [z=250]
   * waehrend der geoeffnete Dialog auf `z-index: 60` lag. Das Navigationsrad
   * verdeckte die Zugriffskarte UND fing dort die Klicks ab.
   *
   * Die 60 waren eine Zutat des Ports. Der Bestand (core-frontend/App.vue:2244)
   * gibt `.account-right-overlay` z-index 1400 — direkt ueber der Hilfe (1390,
   * hier `.help-right-overlay` in help-overlays.css) und weit ueber dem
   * Viewer-Chrome. Dort liegt der Rahmen `absolute` IM Viewer-Container und
   * teilt dessen Stapelkontext; der Port rendert ihn `fixed` als Geschwister,
   * die Zahl bleibt aber dieselbe und wirkt gegen dieselben Nachbarn.
   *
   * Der Wert des Bestands wird damit uebernommen, nicht ueberboten: Der
   * Agent-42-Assistent (z-index 10000, Agent42AssistantOverlay.vue:1380) liegt
   * auch im Bestand ueber diesem Dialog und bleibt es hier. */
  z-index: 1400;
  /* SPEC-0724 Etappe 4: kein Gummiband in die Seite (iPad). */
  overscroll-behavior: contain;
  overflow: auto;
}

/* SPEC-0496 — das Wirtselement ist ein Custom Element und damit von Haus aus
 * `display: inline`. Ohne diese Regel bricht die `height: 100%`-Kette des
 * Panels darunter: es wird inhaltshoch statt vollhoch, und der Kopf verliert
 * seine klebende Position. Der Fehler lag vorher latent in CORE, wo der
 * Dialog denselben Bau hatte. */
vc-account-panel {
  display: block;
  height: 100%;
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.account-field > span {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
}

.account-field input,
.account-field select {
  padding: 6px 8px;
  color: var(--control-text, inherit);
  background: var(--control-bg, transparent);
  border: 1px solid var(--control-border, currentColor);
  border-radius: var(--radius-control, 6px);
  font: inherit;
}

.account-btn-primary {
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-inverse, #fff);
  background: var(--primary, #2563eb);
  border: 1px solid var(--primary-strong, #1d4ed8);
  border-radius: var(--radius-control, 6px);
  font: inherit;
}

.account-close {
  padding: 4px;
  cursor: pointer;
  color: inherit;
  background: none;
  border: none;
}

/* Statuszeile am Panelende — Ersatz fuer die Bestands-VcStatusLine
 * (Icon + Meldung, Ton success/error). */
.account-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.8rem;
}

.account-status-line .material-icons {
  font-size: 16px;
}

.account-status-line--success {
  border-color: var(--success);
  background: var(--success-soft);
}

.account-status-line--success .material-icons {
  color: var(--success);
}

.account-status-line--error {
  border-color: var(--danger);
  background: var(--danger-soft, transparent);
}

.account-status-line--error .material-icons {
  color: var(--danger);
}

.account-panel {
  position: relative;
  width: min(440px, calc(100vw - 16px));
  height: 100%;
  overflow: auto;
  border-radius: 0;
  border: 1px solid var(--border);
  border-top: 0;
  border-right: 0;
  background: var(--surface-elevated);
  color: var(--text);
  box-shadow: var(--shadow-card);
  z-index: 1;
}
.account-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--surface-elevated) 94%, transparent);
  backdrop-filter: blur(6px);
  z-index: 1;
}
.account-id {
  display: flex;
  gap: 10px;
  min-width: 0;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: var(--primary);
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-title-wrap h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.15;
}
.account-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.78;
  margin-bottom: 3px;
}
/* .icon-btn deleted — adopted VcButton variant="ghost" icon-only */
.account-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.sr-only-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.account-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px;
}
.avatar-editor {
  display: block;
  margin-bottom: 10px;
}
.avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.card-head h4 {
  margin: 0;
  font-size: 0.95rem;
}
.card-head .material-icons {
  font-size: 18px;
  opacity: 0.9;
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}
.toggle-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}
.toggle-row label {
  font-size: 0.84rem;
}
.inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
/* .primary-btn / .ghost-btn deleted — adopted VcButton */
.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.meta-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* SPEC-0496 §B6 — die Kachelreihe traegt in beiden Anwendungen VIER Kacheln
 * (Authentifizierung, Version, Rollen, Rechte). Bei 440 px Panelbreite waeren
 * vier Spalten unlesbar schmal, deshalb zwei mal zwei. */
.meta-grid--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.meta-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: var(--surface);
}
.meta-label {
  display: block;
  font-size: 0.72rem;
  opacity: 0.75;
  margin-bottom: 2px;
}
.meta-value {
  font-weight: 700;
  font-size: 0.95rem;
  word-break: break-word;
}
.chip-block + .chip-block {
  margin-top: 8px;
}
.access-capability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.capability-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.76rem;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}
.capability-item.is-enabled {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--text);
}
.capability-item .material-icons {
  font-size: 15px;
}
.capability-item:not(.is-enabled) .material-icons {
  color: var(--danger);
}
.capability-item.is-enabled .material-icons {
  color: var(--success);
}
.chip-title {
  font-size: 0.74rem;
  opacity: 0.82;
  margin-bottom: 4px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.77rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.chip--accent {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.chip--empty {
  opacity: 0.75;
}
.hint {
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.3;
  opacity: 0.86;
}
.hint--compact {
  margin-top: 4px;
}
/* Einblendung des Kontopanels — Bestand `account-fade` (UserProfileOverlay.vue:934).
 *
 * Die urspruenglich portierten `.account-fade-enter-*`-Regeln standen hier
 * TOT: sie warten auf Klassen, die Vues `<transition>` vergibt und die es im
 * Port nicht gibt. Ersetzt durch eine Einblendung am Panel selbst. */
.account-panel {
  animation: vcAccountFadeIn 160ms ease;
}

@keyframes vcAccountFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .account-panel { animation: none; }
}
@media (max-width: 640px) {
  .account-panel {
    width: min(440px, calc(100vw - 8px));
  }
  .meta-grid,
.meta-grid--three,
.meta-grid--four,
.access-capability-grid {
    grid-template-columns: 1fr;
  }
}

/* Ergaenzungen fuer Elemente, die der Port ohne die Vue-Primitive
 * VcFieldGrid/VcButton aufbaut — Werte am Bestandslook orientiert. */
/* Bestand: VcFieldGrid columns="auto" → repeat(auto-fill, minmax(220px, 1fr)).
 * Im 440px-Panel bleibt nach Polstern ~396px Innenbreite, es passt also GENAU
 * EINE Spalte — Anzeigename, Benutzername und E-Mail stehen dort untereinander.
 * Der Port hatte hier fest zwei Spalten, was Anzeigename/Benutzername
 * nebeneinander legte. Die auto-fill-Regel uebernehmen statt die Spaltenzahl
 * zu raten: sie bleibt auch bei anderer Panelbreite bestandsgetreu. */
.account-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.account-field--wide {
  grid-column: 1 / -1;
}

.account-btn-ghost {
  padding: 6px 12px;
  cursor: pointer;
  color: var(--control-text, inherit);
  background: var(--control-bg, transparent);
  border: 1px solid var(--control-border, currentColor);
  border-radius: var(--radius-control, 6px);
  font: inherit;
}

/* Bestand: display:block, margin-bottom:10px — der Editor enthaelt dort NUR
 * die beiden Knoepfe (das Avatar-Rund sitzt allein in der Kopfzeile). */
.avatar-editor {
  display: block;
  margin-bottom: 10px;
}

.avatar-actions {
  display: flex;
  gap: 8px;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}