/*
 * Web3-Modus (12.10.2026): nur eingebunden, wenn der Server das FRF mit
 * FRF_MODUS=web3 ausliefert (src/services/web3Shell.ts). Fest dunkel, ohne
 * eigene Anmeldung, Feedback, Hell/Dunkel und Listings; im Rahmen der
 * Plattform auch ohne obere Leiste (die Reiter stehen in der Web3-Leiste).
 */
:root { --w3-grund: #040811; --w3-akzent: #9ed3ff; --w3-schleier: rgba(4, 8, 17, 0.92); }

html[data-frf-modus="web3"] #accountRail,
html[data-frf-modus="web3"] #lifecycleOverlay,
html[data-frf-modus="web3"] #themaSchalter,
html[data-frf-modus="web3"] #helpDialogOpenBtn,
html[data-frf-modus="web3"] #helpDialog,
html[data-frf-modus="web3"] #loginDialog,
html[data-frf-modus="web3"] #discordVerifyDialog,
html[data-frf-modus="web3"] #graceExpiredDialog,
html[data-frf-modus="web3"] #discordSperreDialog,
html[data-frf-modus="web3"] #passkeysDialog,
html[data-frf-modus="web3"] #passkeyNeuesGeraetDialog,
html[data-frf-modus="web3"] #walletsDialog,
html[data-frf-modus="web3"] #xstocksWalletDialog,
html[data-frf-modus="web3"] #alarmTelegramConnectedPill,
html[data-frf-modus="web3"] .bugs-vorschlag-reiter,
html.w3-eingebettet #tableTabsNav,
html.w3-eingebettet .leiste-pillen-gruppe,
html.w3-eingebettet .leiste-pillen-mehr {
  display: none !important;
}

/* Tool settings (/einstellungen): nur die eigene Ansicht, Dialoge (Alarme) bleiben. */
html.w3-einstellungen body > :not(#w3Einstellungen):not(dialog):not(script):not(#w3Anmeldung) {
  display: none !important;
}

.w3-einstellungen-ansicht { max-width: 46rem; margin: 0 auto; padding: 24px 16px 48px; color: var(--text-primary, #e6edf7); }
.w3-einstellungen-ansicht h1 { font-size: 1.35rem; margin: 0 0 6px; }
.w3-einstellungen-ansicht h2 { font-size: 1rem; margin: 0 0 6px; }
.w3-block { background: var(--surface-1, #141416); border: 1px solid var(--surface-3, #24242a); border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
.w3-block p { margin: 0 0 10px; }
.w3-hinweis { color: var(--text-secondary, #9aa4b2); font-size: 0.875rem; }
.w3-kennung { display: inline-block; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.875rem; word-break: break-all; padding: 4px 8px; margin-right: 8px; border-radius: 6px; background: var(--surface-2, #1c1c20); user-select: all; }
.w3-meldung { margin-left: 10px; font-size: 0.875rem; color: var(--text-secondary, #9aa4b2); }
.w3-knopf { display: inline-block; padding: 8px 14px; border-radius: 8px; border: 0; background: var(--w3-akzent); color: var(--w3-grund); font-weight: 600; cursor: pointer; text-decoration: none; }
.w3-knopf-leise { background: transparent; color: var(--w3-akzent); border: 1px solid var(--w3-akzent); }
.w3-schalter { display: flex; gap: 8px; align-items: center; }

/* Rückfall-Anmeldung (web3Modus.js zeigeAnmeldung). */
.w3-anmeldung { position: fixed; inset: 0; display: grid; place-items: center; background: var(--w3-schleier); z-index: 10000; }
.w3-anmeldung-karte { max-width: 26rem; padding: 24px; border-radius: 12px; background: var(--surface-1, #141416); border: 1px solid var(--surface-3, #24242a); text-align: center; }

/* Rechte-Matrix im Nutzer-Reiter (web3Admin.js). */
.w3-matrix-rahmen { overflow-x: auto; margin: 8px 0 20px; }
.w3-matrix, .w3-nutzer { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.w3-matrix th, .w3-matrix td, .w3-nutzer th, .w3-nutzer td { padding: 6px 10px; border-bottom: 1px solid var(--surface-3, #24242a); text-align: left; }
.w3-matrix td { text-align: center; }
.w3-matrix input[type="number"] { width: 5.5rem; }
.w3-limit-zeile th { font-weight: 600; }
.w3-marke { font-size: 0.75rem; padding: 1px 6px; border-radius: 6px; background: var(--w3-akzent); color: var(--w3-grund); }
/* Wega-Freigabe im Nutzer-Reiter (19.10.2026): Aus | An über der Matrix. */
.w3-wega { margin: 4px 0 18px; }
.w3-wega-zeile { display: flex; gap: 6px; margin: 6px 0; }
.w3-wega-unter { font-size: 0.875rem; font-weight: 600; margin: 14px 0 0; }

/* ── Wega „Felder zeigen“ (19.10.2026, modules/wegaZeigen.js) ─────────────
   Puls wie Ask FRF im privaten FRF (askFrf.css lädt im Web3-Modus nicht):
   einrahmen, leicht leuchten, 3-mal im 3-s-Takt. Farbe = --akf-akzent
   (web3-design.css legt ihn auf --w3-akzent). */
.frf-hilfe-puls, .frf-hilfe-kurz, .frf-hilfe-ruhig {
  outline: 2px solid var(--akf-akzent, var(--w3-akzent)) !important;
  outline-offset: 2px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--akf-akzent, var(--w3-akzent)) 30%, transparent);
  position: relative;
  z-index: 2;
}
.frf-hilfe-puls, .frf-hilfe-kurz { animation: w3-wz-puls 3s ease-in-out 3; }
@keyframes w3-wz-puls {
  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--akf-akzent, var(--w3-akzent)) 20%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--akf-akzent, var(--w3-akzent)) 28%, transparent), 0 0 22px color-mix(in srgb, var(--akf-akzent, var(--w3-akzent)) 50%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .frf-hilfe-puls, .frf-hilfe-kurz { animation: none; }
}

/* Vorschlagskarte und Meldung: vor der Ansicht des Reiters, im Fluss (der Rahmen wächst mit). */
.w3-wz-karte, .w3-wz-meldung {
  box-sizing: border-box;
  max-width: 46rem;
  margin: 12px 16px;
  color: var(--w3-text, var(--text-primary));
  background: var(--w3-flaeche, var(--surface-1));
  border: 1px solid var(--w3-rand, var(--border-1));
  border-radius: var(--w3-radius-karte, 12px);
  box-shadow: var(--w3-kante-feld, none);
}
.w3-wz-karte[hidden], .w3-wz-meldung[hidden], .w3-wz-fuss .w3-knopf[hidden] { display: none; }
.w3-wz-karte { padding: 14px 16px; }
.w3-wz-karte.ist-uebernommen { border-color: color-mix(in srgb, var(--w3-positiv, var(--success)) 45%, var(--w3-rand, var(--border-1))); }
.w3-wz-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.w3-wz-titelblock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.w3-wz-marke { font-size: 0.75rem; font-weight: 600; padding: 1px 8px; border-radius: var(--w3-radius-feld, 999px); background: var(--w3-akzent-flaeche, var(--surface-2)); color: var(--w3-akzent); }
.w3-wz-titel { font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }
.w3-wz-hinweis { margin: 6px 0 10px; font-size: 0.8125rem; color: var(--w3-text-2, var(--text-secondary)); }
.w3-wz-zu {
  flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--w3-radius-feld, 999px);
  background: transparent; color: var(--w3-text-2, var(--text-secondary)); font-size: 1.125rem; line-height: 1; cursor: pointer;
}
.w3-wz-zu:hover { background: var(--w3-fuellung-mittel, var(--surface-2)); color: var(--w3-text, var(--text-primary)); }
.w3-wz-zu:focus-visible, .w3-wz-fuss .w3-knopf:focus-visible { outline: none; box-shadow: var(--w3-ring, 0 0 0 2px var(--w3-akzent)); }
.w3-wz-tabelle { width: 100%; border-collapse: collapse; font-size: 0.8125rem; line-height: 1.45; }
.w3-wz-tabelle th {
  text-align: left; font-weight: 500; font-size: 0.75rem; color: var(--w3-text-3, var(--text-secondary));
  padding: 0 8px 4px 0; border-bottom: 1px solid var(--w3-rand, var(--border-1));
}
.w3-wz-tabelle td { padding: 8px 8px 8px 0; vertical-align: top; border-bottom: 1px solid var(--w3-rand-leise, var(--border-1)); }
.w3-wz-tabelle tr:last-child td { border-bottom: 0; }
.w3-wz-feld { color: var(--w3-text-2, var(--text-secondary)); }
.w3-wz-wert { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.w3-wz-grund { color: var(--w3-text-2, var(--text-secondary)); font-size: 0.75rem; }
.w3-wz-annahme {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--w3-radius-feld, 999px);
  background: color-mix(in srgb, var(--w3-warnung, var(--warning)) 16%, transparent); color: var(--w3-warnung, var(--warning));
  font-size: 0.75rem; font-weight: 500; white-space: nowrap; cursor: help;
}
.w3-wz-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.w3-wz-fuss .w3-knopf { padding: 6px 14px; border-radius: var(--w3-radius-feld, 999px); font-size: 0.8125rem; }
.w3-wz-uebernehmen:disabled { opacity: .5; cursor: wait; }
.w3-wz-status { font-size: 0.75rem; color: var(--w3-text-2, var(--text-secondary)); }
.w3-wz-meldung { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; font-size: 0.8125rem; border-left: 2px solid var(--w3-warnung, var(--warning)); }
.w3-wz-meldung-text { color: var(--w3-text-2, var(--text-secondary)); }
/* Handy: Grund unter Feld und Wert, volle Breite mit 16-px-Rand. */
@media (max-width: 480px) {
  .w3-wz-karte, .w3-wz-meldung { margin: 10px 16px; }
  .w3-wz-tabelle thead { display: none; }
  .w3-wz-tabelle tr { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 0; border-bottom: 1px solid var(--w3-rand-leise, var(--border-1)); }
  .w3-wz-tabelle tr:last-child { border-bottom: 0; }
  .w3-wz-tabelle td { border: 0; padding: 0; }
  .w3-wz-grund { grid-column: 1 / -1; }
}