/* ============================================================
   AI AntiSpam Concept — Design-Tokens (Variante A, entschieden)
   Hell + Dunkel automatisch (prefers-color-scheme), manuell
   umschaltbar über <html data-theme="light|dark">.
   ============================================================ */

:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --border: #E7E5E4;
  --track: #F0EEEC;
  --field: #F4F3F0;
  --text: #1C1917;
  --body: #44403C;
  --muted: #78716C;
  --accent: #C22C89;
  --accent-soft: #FCEBF4;
  --ok: #15803D;
  --ok-soft: #E9F7EE;
  --warn: #B45309;
  --warn-soft: #FDF3E3;
  --err: #DC2626;
  --err-soft: #FDEAEA;
  --admin: #3F51B5;
  --admin-soft: #ECEEFB;
  --admin-border: #C7CEF3;
  --gradient: linear-gradient(90deg, #E93A7D, #B62CC9);
  --gradient-full: linear-gradient(135deg, #F5851F, #E93A7D, #B62CC9);
  --switch-on: #34C759;  /* Ein-Spur (iOS-Grün, Hell) */
  --switch-off: #E4E4E7; /* Aus-Spur des iOS-artigen Schiebeschalters (Hell) */
  --radius: 12px;
  --radius-s: 8px;
  --shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
  --font: 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171412;
    --surface: #211D1B;
    --border: #37312E;
    --track: #37312E;
    --field: #15110F;
    --text: #F5F0EE;
    --body: #D8D2CE;
    --muted: #A69F9A;
    --accent: #F58BB4;
    --accent-soft: #3A2230;
    --ok: #4ADE80;
    --ok-soft: #1B3324;
    --warn: #FBBF24;
    --warn-soft: #3A2E14;
    --err: #F87171;
    --err-soft: #3D1D1D;
    --admin: #AAB4F2;
    --admin-soft: #23283F;
    --admin-border: #3A4066;
    --switch-on: #30D158;  /* Ein-Spur (iOS' helleres Dark-Grün) */
    --switch-off: #4C4C4E; /* Aus-Spur (Dunkel) */
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  --bg: #171412;
  --surface: #211D1B;
  --border: #37312E;
  --track: #37312E;
  --field: #15110F;
  --text: #F5F0EE;
  --body: #D8D2CE;
  --muted: #A69F9A;
  --accent: #F58BB4;
  --accent-soft: #3A2230;
  --ok: #4ADE80;
  --ok-soft: #1B3324;
  --warn: #FBBF24;
  --warn-soft: #3A2E14;
  --err: #F87171;
  --err-soft: #3D1D1D;
  --admin: #AAB4F2;
  --admin-soft: #23283F;
  --admin-border: #3A4066;
  --switch-on: #30D158;  /* Ein-Spur (iOS' helleres Dark-Grün) */
  --switch-off: #4C4C4E; /* Aus-Spur (Dunkel) */
  --shadow: none;
}

/* ============ Basis ============ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 600; margin: 0; }

/* ============ Layout ============ */

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--text); }
.topbar .brand img { width: 32px; height: 32px; }
.beta-badge {
  display: inline-block;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--gradient-full);
  padding: 3px 6px;
  border-radius: 5px;
  text-transform: uppercase;
}
.topbar .brand .beta-badge { margin-left: 2px; }
.auth-head .beta-badge { margin-left: 6px; }
.topbar nav { display: flex; gap: 4px; flex-grow: 1; flex-wrap: wrap; }
.topbar nav a {
  padding: 7px 14px;
  border-radius: var(--radius-s);
  font-size: 14px;
  color: var(--muted);
}
.topbar nav a:hover { text-decoration: none; color: var(--text); }
.topbar nav a.active { font-weight: 600; color: var(--accent); background: var(--accent-soft); }
/* Admin-Bereich: eigener, kühler Akzent — hebt sich bewusst von der warmen Marke ab. */
.topbar nav a.nav-admin { color: var(--admin); font-weight: 600; }
.topbar nav a.nav-admin::before { content: "◆"; font-size: 9px; margin-right: 5px; vertical-align: 1px; }
.topbar nav a.nav-admin:hover { color: var(--admin); background: var(--admin-soft); }
.topbar nav a.nav-admin.active { color: var(--admin); background: var(--admin-soft); }
/* Admin-Band: farblich abgesetzte Sub-Navigation als volle Zeile zwischen
   Hauptnavigation und Seiteninhalt. Innen auf Seitenbreite zentriert. */
.admin-band {
  background: var(--admin-soft);
  border-bottom: 1px solid var(--admin-border);
}
.admin-band-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-band-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--admin);
  margin-right: 4px;
}
.admin-band-label::before { content: "◆"; font-size: 9px; }
.admin-tab {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.admin-tab:hover { color: var(--admin); border-color: var(--admin); }
.admin-tab.active {
  color: #fff;
  background: var(--admin);
  border-color: var(--admin);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.topbar .user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.topbar .user .avatar { width: 22px; height: 22px; border-radius: 999px; background: var(--gradient-full); }

.page { padding: 24px; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

/* ============ Karten & Raster ============ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grid-4, .grid-3 { grid-template-columns: 1fr; } }
/* Zwei-Spalten-Zeile „Lernen & Qualität" (breit) + „Welche Stufe hat aussortiert"
   (schmal, ~1/3). Bricht auf schmalen Schirmen sauber auf eine Spalte um — bewusst
   als Klasse (nicht inline), damit die Mindestbreite nie die Karte sprengt. */
.grid-learn { grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 820px) { .grid-learn { grid-template-columns: 1fr; } }

/* ============ Frei anordbare Dashboard-Blöcke ============ */
/* Der Abstand zwischen den Blöcken kommt aus dem Flex-Gap, damit jeder Block
   unabhängig von seinen inneren Rändern gleichmässig sitzt — auch nach dem
   Umsortieren per Drag & Drop. */
#dash-blocks { display: flex; flex-direction: column; gap: 22px; }
.dash-block { position: relative; }
.dash-handle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 8px; padding: 8px 12px; min-height: 40px;
  border-radius: var(--radius-s);
  color: var(--muted); font-size: 12px; font-weight: 600;
  cursor: grab; user-select: none; touch-action: none;
  background: transparent; border: 1px solid transparent;
}
.dash-handle:hover { color: var(--text); background: var(--track); }
.dash-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--text); }
.dash-grip { font-size: 15px; line-height: 1; letter-spacing: -2px; }
.dash-handle-label { text-transform: uppercase; letter-spacing: 0.04em; }
body.dash-dragging { cursor: grabbing; }
body.dash-dragging .dash-handle { cursor: grabbing; }
.dash-block.dragging { opacity: 0.55; }
.dash-block.dragging .dash-handle { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ============ Formulare ============ */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--field);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
}
textarea { height: auto; padding: 10px 14px; }
/* Auth-Formulare (Login, Passwort vergessen/zurücksetzen): 16px, damit iOS Safari
   beim Fokus nicht in das Feld hineinzoomt. Bewusst auf den Auth-Bereich begrenzt,
   um die App-weite Formulardichte nicht anzufassen. */
.auth-box input[type="text"], .auth-box input[type="password"], .auth-box input[type="email"] {
  font-size: 16px;
}
/* Konto-Erfassungsformular: gleiche 16px-Regel gegen iOS-Fokuszoom, auf die
   textlichen Felder des Formulars begrenzt (Zahlen-/Farbfelder brauchen es nicht). */
.account-form input[type="text"], .account-form input[type="password"], .account-form input[type="email"] {
  font-size: 16px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.form-row { margin-bottom: 16px; }
.hint { font-size: 12px; color: var(--muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary { background: var(--gradient); color: #FFFFFF; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-block { width: 100%; }
/* Buttons mit langem Text (z. B. „Plugin herunterladen (.xpi)"): dürfen
   umbrechen statt den Text abzuschneiden. */
.btn-wrap { height: auto; min-height: 44px; white-space: normal; padding-top: 10px; padding-bottom: 10px; line-height: 1.3; }

/* ============ Status & Meldungen ============ */

.badge { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; padding: 3px 9px; border-radius: 999px; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-err { background: var(--err-soft); color: var(--err); }
/* Neutraler Zustand („noch offen", „zu wenig Daten") — bewusst keine Ampel. */
.badge-neutral { background: var(--track); color: var(--body); }

/* Unsichtbarer Standard-Submit ganz vorne im Formular: Enter in einem
   Textfeld löst per HTML-Regel den ERSTEN Submit-Button aus. Steht weiter
   oben ein Zweck-Button (z. B. „Verbindung testen"), fängt dieser Button
   Enter ab und führt die normale Speichern-Aktion aus. Nicht display:none
   (WebKit ignoriert solche Default-Buttons), sondern visuell versteckt. */
.default-submit {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.dot-err { background: var(--err); }

/* Konto-Kennfarbe: kleiner runder Farbpunkt zur Unterscheidung mehrerer Konten. */
.acct-chip { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.12); }
.acct-chip-s { width: 9px; height: 9px; }

/* Prominente Live-Suche im Protokoll: klar erkennbares Feld mit Lupe. */
.log-search { position: relative; display: flex; align-items: center; }
.log-search-icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.log-search input {
  width: 100%; height: 46px; padding: 0 16px 0 44px; font-size: 16px;
  border: 2px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text);
}
.log-search input::placeholder { color: var(--muted); }
.log-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.log-search input:focus + .log-search-icon,
.log-search:focus-within .log-search-icon { color: var(--accent); }

.alert { padding: 12px 16px; border-radius: var(--radius-s); font-size: 14px; margin-bottom: 16px; }
.alert-err { background: var(--err-soft); color: var(--err); }
.alert-ok { background: var(--ok-soft); color: var(--ok); }
.alert-warn { background: var(--warn-soft); color: var(--warn); }

/* ============ Login-Seite ============ */

.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 22px; }
.auth-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.auth-head img { width: 72px; height: 72px; }
.auth-head .title { font-weight: 700; font-size: 20px; letter-spacing: -0.3px; }
.auth-head .sub { font-size: 14px; color: var(--muted); }
.auth-foot { font-size: 12px; color: var(--muted); text-align: center; }
.qr-box {
  display: inline-block;
  background: #fff;
  padding: 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  line-height: 0;
}
.qr-box svg { width: 200px; height: 200px; display: block; }
.secret-box {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 15px;
  letter-spacing: 1.5px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
  text-align: center;
  word-break: break-all;
  user-select: all;
}

/* Scan-Schalter (Dashboard-Aktivitätskarte) im Stil der bekannten iOS-Schiebe-
   schalter: grün = ein (wird gescannt/verarbeitet), grau = aus (pausiert). Der
   weisse Knopf gleitet von links (aus) nach rechts (ein). Proportionen und
   Farben an iOS angelehnt (Spur 46×28, Knopf 24, iOS-Grün #34C759). */
.switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--switch-off);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.2s ease;
}
/* Visuell 46×28, aber mind. 44×44 als Touch-Ziel — Finger-tauglich auf dem
   Handy, ohne das Layout der Tabellen-/Master-Zeile zu vergrössern. */
.switch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}
.switch[aria-checked="true"] { background: var(--switch-on); }
.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s cubic-bezier(0.3, 0.15, 0.3, 1);
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(18px); }
.switch:disabled { opacity: 0.55; cursor: default; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   Konto-Kacheln (Kontenübersicht)
   ------------------------------------------------------------
   Ruhige, in sich geschlossene Karte je Konto — ersetzt die
   frühere Tabelle, die mobil als lautes „Label: Wert"-Stapel
   zerfiel. Ein Layout für alle Breiten: auf breiten Schirmen
   ein automatisches Mehrspalten-Raster, auf dem Handy eine
   Spalte über die volle Breite (kein horizontaler Overflow,
   da die Spaltenbreite nie grösser als der Container wird).
   ============================================================ */
.acct-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 14px;
}
.acct-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acct-card-head { display: flex; align-items: center; gap: 9px; }
.acct-name { font-weight: 600; font-size: 15px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
/* Schalter sitzt immer rechts in der Kopfzeile. */
.acct-card-switch { margin-left: auto; }
.acct-card-sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.acct-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
}
.acct-meta-sep { color: var(--border); }
.acct-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.acct-card-actions form { margin: 0; }
.acct-card-actions .btn { text-decoration: none; }

/* ============================================================
   Regelvorschläge (Karten statt Tabelle)
   ------------------------------------------------------------
   Badge + Typ oben, Muster (monospace, umbrechbar) darunter,
   zwei gleich breite 44px-Buttons nebeneinander — auf schmalen
   Schirmen nicht mehr abgeschnitten.
   ============================================================ */
.pending-list { display: flex; flex-direction: column; gap: 10px; }
.pending-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.pending-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pending-type { font-size: 12px; }
.pending-pattern {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; color: var(--text);
  word-break: break-word; overflow-wrap: anywhere;
}
.pending-actions { display: flex; gap: 10px; max-width: 360px; }
.pending-actions form { flex: 1 1 0; margin: 0; }

/* ============================================================
   Mobile / responsive Tabellen
   ------------------------------------------------------------
   Grundsatz: kein horizontales Scrollen, keine abgeschnittenen
   Inhalte. Datentabellen brechen unter ~640px zu gestapelten
   Karten um. Zwei wiederverwendbare Muster:
     .rtable — generische Tabelle → Karte (Spaltentitel via
               data-label auf der jeweiligen Zelle)
     .feed   — Entscheidungslisten mit Urteils-Badge ganz links
   ============================================================ */

/* iOS/Safari „boostet" Textknoten in Tabellen, die breiter als der
   Viewport sind (min-width + overflow-x) — das blähte u.a. „Details zur
   Entscheidung" unnatürlich auf. Zentral abschalten statt pro Tabelle. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Lange, unumbrechbare Zeichenketten (URLs, Token, Domains) dürfen die
   Karte nie sprengen. */
code { overflow-wrap: anywhere; word-break: break-word; }

/* ---- Generisches Tabelle→Karten-Muster ---- */
@media (max-width: 640px) {
  .rtable { min-width: 0 !important; }
  .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: auto; }
  .rtable thead { display: none; }
  .rtable tr { border-top: 1px solid var(--border); padding: 13px 16px; }
  .rtable tr:first-child { border-top: none; }
  .rtable td {
    padding: 3px 0 !important;
    text-align: left !important;
    white-space: normal !important;
    max-width: none !important;
    width: auto !important;
    position: static !important;
    box-shadow: none !important;
  }
  .rtable td:empty { display: none; }
  .rtable td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
    font-weight: 600;
  }
  /* Aktionszeile: Buttons/Links nebeneinander mit Umbruch, klar abgesetzt. */
  .rtable td.r-actions { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .rtable td.r-actions form { display: inline-flex !important; margin: 0 !important; }
  /* Touch-Ziele: die im Desktop kompakten Aktionsbuttons/-links (inline
     height 28–34px) mobil auf ~44px anheben. min-height klemmt die inline
     height nach oben, ohne die Templates anzufassen. */
  .rtable td.r-actions .btn,
  .feed td.c-act .btn { min-height: 44px; }
  .rtable td.r-actions a:not(.btn) {
    display: inline-flex; align-items: center; min-height: 44px; margin-left: 0 !important;
  }
}

/* ---- Entscheidungslisten (Protokoll, „Letzte Entscheidungen") ---- */
/* Einheitliches Raster für Desktop UND Mobile: Urteils-Badge (feste Breite,
   immer ganz links) | Inhalt (Betreff / Datum / Absender · Stufe) | Aktion
   (rechts). Die feste Badge-Spalte hält die Betreffzeilen bündig — auch wenn
   die Badges unterschiedlich breit sind (OK/SPAM/PHISHING). */
.feed { width: 100%; border-collapse: collapse; }
.feed .feed-row { border-top: 1px solid var(--border); font-size: 14px; }
.feed .feed-row > td { padding: 11px 8px; vertical-align: top; }
.feed .c-badge { width: 92px; padding-left: 22px; white-space: nowrap; }
.feed .c-act { padding-right: 22px; text-align: right; white-space: nowrap; }
.feed .feed-subject { color: var(--text); }
.feed .feed-date { color: var(--muted); font-size: 12px; margin-top: 2px; }
/* Die Metazeile (Konto-Chip · Domain · Stufe) ist ein Flex-Container: Ohne
   `min-width:0` am Textkind sprengt eine lange, unumbrechbare Absenderdomain die
   Karte nach rechts — mit längeren Stufennamen («Gelernte Präferenz») fällt das
   umso schneller an. Umbruch erlauben statt überlaufen. */
.feed .feed-meta { color: var(--muted); font-size: 12px; margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.feed .feed-meta > span { min-width: 0; overflow-wrap: anywhere; }
.feed .feed-detail > td { padding: 0 22px 12px; }

/* Rückfrage-Block («Stimmt das?»): Die Abzeichen tragen hier ganze Wörter
   («Aussortiert»/«Zugestellt») statt der Kürzel OK/SPAM/PHISHING. In der auf
   Kürzel bemessenen Badge-Spalte (92px, mobil 76px-Raster) liefe das Abzeichen
   über und überlappte den Betreff — deshalb eine eigene, breitere Spalte. */
.feed-review .c-badge { width: 128px; } /* inkl. 22px linkem Einzug (border-box) */
.feed-review .badge { display: inline-block; }

/* Klartext zu den Signalkürzeln der Begründung (Admin-Detail im Protokoll).
   Steht unter dem Rohtext, bleibt sekundär und bricht auf schmalen Schirmen um. */
.signal-list-title { margin: 10px 0 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.signal-list { margin: 4px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; line-height: 1.5; }
.signal-list li { margin-top: 2px; overflow-wrap: anywhere; }
.signal-list b { color: var(--body); font-weight: 600; }

@media (max-width: 640px) {
  .feed { min-width: 0 !important; }
  .feed, .feed tbody { display: block; }
  /* Zwei Spalten: feste Badge-Spalte links, Inhalt rechts; die Aktion sitzt
     darunter über die volle Breite (rechtsbündig) — so rückt der Button nach
     oben und die Karte bleibt kompakt. */
  .feed .feed-row {
    display: grid;
    grid-template-columns: 76px 1fr;
    column-gap: 10px;
    row-gap: 2px;
    padding: 14px 16px;
    font-size: 13px;
    align-items: start;
  }
  /* Klar erkennbare Trennung zwischen Einträgen (der Betreff-/Aktionsblock und
     die zugehörige Detailzeile bilden EINEN Eintrag; die Linie steht darüber). */
  .feed .feed-row { border-top: 2px solid var(--border); }
  .feed .feed-row:first-child { border-top: none; }
  .feed .feed-subject, .feed .c-act { font-size: 13px; }
  .feed .feed-row > td { padding: 0 !important; width: auto !important; }
  .feed .c-badge { grid-column: 1; grid-row: 1; }
  .feed .c-main  { grid-column: 2; grid-row: 1; min-width: 0; }
  .feed .c-act   { grid-column: 1 / -1; grid-row: 2; text-align: right !important; white-space: normal !important; margin-top: 2px; }
  .feed .feed-subject { font-weight: 600; }
  /* Rückfrage-Block: breitere erste Spalte für die Wort-Abzeichen (s. o.). */
  .feed-review .feed-row { grid-template-columns: 100px 1fr; }
  /* Kein Scroll-Bereich im Scroll-Bereich: Auf dem Handy ist die verschachtelte
     Liste mühsam zu bedienen (der Finger scrollt mal die Seite, mal die Liste).
     Der Block darf hier mitwachsen, die Seite scrollt ganz normal. Der Inline-Stil
     der Vorlage verlangt !important. */
  .ham-scroll { max-height: none !important; overflow-y: visible !important; }
  /* Admin-Detailzeile über die volle Breite, ohne Trennlinie zur Ergebniszeile. */
  .feed tr.feed-detail { display: block; border-top: none; }
  .feed tr.feed-detail > td { display: block; padding: 0 16px 12px !important; }
}

/* ---- Aktivitätsliste (Dashboard): Dot links, Name, Schalter rechts,
        Zähler darunter — statt breiter Tabelle mit klebriger Schalterspalte. ---- */
@media (max-width: 640px) {
  .act-mini { min-width: 0 !important; }
  .act-mini, .act-mini tbody, .act-mini tr, .act-mini td { display: block; }
  .act-mini tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 0;
  }
  .act-mini td {
    padding: 0 !important;
    width: auto !important;
    text-align: left !important;
    position: static !important;
    box-shadow: none !important;
    white-space: normal !important;
  }
  .act-mini .a-dot    { grid-column: 1; grid-row: 1; align-self: start; padding-top: 3px !important; }
  .act-mini .a-name   { grid-column: 2; grid-row: 1; }
  .act-mini .a-switch { grid-column: 3; grid-row: 1; text-align: right !important; }
  /* Zusammenfassung als kleine, ruhige Zusatzzeile UNTER dem Kontonamen –
     nicht rechts daneben, wo sie sonst unter den Schaltern verschwindet. */
  .act-mini .a-counts { grid-column: 2 / -1; grid-row: 2; font-size: 12px !important; line-height: 1.35; }
}

/* ---- Kompaktere Ränder auf kleinen Schirmen ---- */
@media (max-width: 560px) {
  .page { padding: 16px 14px; gap: 16px; }
  .card { padding: 16px; }
  h1 { font-size: 20px; }
  .topbar { gap: 12px 16px; padding: 10px 14px; }
}

/* „Neue Regel"-Formular: feste px-Spalten (180/1fr/150/auto) sprengen den
   Schirm — mobil zu einer Spalte, Button über volle Breite. */
@media (max-width: 640px) {
  .rule-form-grid { grid-template-columns: 1fr !important; }
  .rule-form-grid > .btn { width: 100%; }
}

/* Plugin: Download- und Einrichtungs-Block untereinander statt zweispaltig. */
@media (max-width: 640px) {
  .plugin-cols { grid-template-columns: 1fr !important; }
}

/* Dashboard-Statuskacheln bleiben mobil zweispaltig (mehr Info auf
   einen Blick), statt zu einer sehr langen Einer-Kolonne zu werden. */
@media (max-width: 620px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .grid-4 { grid-template-columns: 1fr; } }

/* ============================================================
   Mobile-Navigation (Hamburger + Slide-in)
   ------------------------------------------------------------
   Desktop: der Drawer ist „transparent" (display:contents) — seine Kinder
   (nav, user, logout) bleiben direkte Topbar-Flex-Items wie bisher, der
   Hamburger und das Overlay sind ausgeblendet. Unter 760px wird der Drawer
   zu einem von rechts einfahrenden Panel mit abdunkelndem Overlay.
   ============================================================ */
.nav-toggle { display: none; }
.nav-overlay { display: none; }
.nav-drawer { display: contents; }

@media (max-width: 760px) {
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; margin-left: auto;
    border: 1px solid var(--border); border-radius: var(--radius-s);
    background: var(--surface); cursor: pointer; position: relative; z-index: 65;
  }
  .nav-toggle-bar {
    display: block; height: 2px; border-radius: 2px; background: var(--text);
    transition: transform .2s ease, opacity .2s ease;
  }
  body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-drawer {
    display: block;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(82vw, 300px);
    padding: 76px 20px 24px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 30px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 60; overflow-y: auto;
  }
  body.nav-open .nav-drawer { transform: translateX(0); }
  .nav-drawer nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-drawer nav a { padding: 12px 14px; font-size: 16px; }
  .nav-drawer .user { margin-top: 18px; align-self: flex-start; }
  .nav-drawer form { margin-top: 12px; }
  .nav-drawer form .btn { width: 100%; height: 44px; }

  .nav-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0; visibility: hidden; transition: opacity 0.25s ease;
    z-index: 55;
  }
  body.nav-open .nav-overlay { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

/* ============ Kostenübersicht: Monatsnavigation & Verlauf ============ */

/* Monatswähler mit Vor-/Zurück-Schaltflächen. Auf schmalen Schirmen wird der
   Block zu einem festen Raster (Pfeil · Auswahl · Pfeil), damit nichts umbricht
   und nichts aus dem Viewport läuft. */
.month-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.month-pick { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.month-pick label { margin: 0; }
.month-pick select { width: auto; min-width: 150px; margin: 0; }
.month-step { width: 44px; padding: 0; font-size: 20px; line-height: 1; flex: 0 0 auto; text-decoration: none; }
.month-step:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.month-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* „Kein älterer/neuerer Monat vorhanden": sichtbar, aber ohne Ziel und ohne
   Tastaturfokus — ein Link ohne href ist von sich aus nicht fokussierbar. */
.month-step.is-disabled { opacity: 0.4; cursor: default; pointer-events: none; }
/* Sprung zum laufenden Monat: klein, aber als Link erkennbar (Akzentfarbe statt
   Grau) und mit vollem Touch-Ziel. */
.month-today {
  margin-left: 6px; color: var(--accent);
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Grosse Kennzahl in den Übersichtskarten (vormals Inline-Styles). */
.kpi { font-size: 26px; font-weight: 700; margin-top: 4px; }

/* Monatsverlauf: eine Reihe klickbarer Säulen. Bewusst ohne Diagramm-Bibliothek —
   die Höhe ist der eine Kanal, die Zahl steht zusätzlich als Text darüber. */
.trend { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
/* Säule = Raster aus Wert · Balkenfläche · Monatskürzel. Bewusst Grid statt
   Flexbox: nur so bezieht sich die Prozenthöhe des Balkens auf eine feste
   Fläche. Im Flexlayout staucht flex-shrink die hohen Balken und verfälscht
   das Verhältnis der Monate zueinander. */
.trend-col {
  flex: 1 1 0; min-width: 52px; height: 150px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px;
  justify-items: center; align-items: end;
  border-radius: var(--radius-s); padding: 6px 2px; color: var(--muted);
  text-decoration: none;
}
.trend-col:hover { background: var(--track); color: var(--text); text-decoration: none; }
.trend-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trend-val { font-size: 11px; font-weight: 600; white-space: nowrap; }
.trend-bar {
  align-self: end; width: 100%; max-width: 34px; min-height: 3px;
  border-radius: 5px 5px 0 0; background: var(--gradient);
}
.trend-label { font-size: 11px; white-space: nowrap; }
.trend-col.is-current { background: var(--accent-soft); color: var(--accent); }
.trend-col.is-current .trend-bar { background: var(--accent); }

@media (max-width: 640px) {
  /* Touch: Säulen nicht schrumpfen lassen, lieber horizontal scrollen. */
  .trend-col { flex: 0 0 auto; min-width: 58px; height: 130px; }
  /* Monatswahl als festes Raster: Pfeil · Auswahl · Pfeil in einer Zeile,
     der Sprung zum laufenden Monat darunter über die ganze Breite. Ohne das
     Raster reisst die 100%-breite Auswahl die Pfeile auf drei Zeilen. */
  .month-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
  .month-pick { min-width: 0; }
  /* Auswahl nimmt den Rest der Zeile, darf aber bis fast null schrumpfen —
     sonst schiebt sie im JS-losen Fall den <noscript>-Knopf aus der Zeile.
     16px: sonst zoomt iOS Safari beim Öffnen der Auswahl in die Seite hinein. */
  .month-pick select { min-width: 0; flex: 1 1 110px; font-size: 16px; }
  .month-today { grid-column: 1 / -1; margin-left: 0; }
}