/*
 * E-Mail-Client: responsives Layout, Ordner-Burger (mobil), lesbarer Mailtext
 * im Dunkelmodus und Empfänger-Pills. Statisch geladen (kein Build). Farben
 * aus den Theme-Tokens; das Layout per reinem CSS (Checkbox-Toggle, kein
 * zusätzliches JS für den Burger).
 */

/* ---------- Layout: Ordner + Liste/Detail ---------- */
.mail-layout {
  display: grid;
  gap: var(--space-4, 1rem);
  grid-template-columns: 1fr;
  align-items: start;
}
.mail-folders-burger { display: none; }

@media (min-width: 1024px) {
  .mail-layout { grid-template-columns: 264px minmax(0, 1fr); }
  .mail-folders { display: block !important; }
}

/* Mobil: Ordner hinter einem Burger; per Checkbox aufklappbar (kein JS). */
@media (max-width: 1023px) {
  .mail-folders { display: none; }
  .mail-folders-checkbox:checked ~ .mail-layout .mail-folders { display: block; }
  .mail-folders-burger {
    display: inline-flex; align-items: center; gap: var(--space-2, 8px);
    cursor: pointer; user-select: none;
  }
}

/* ---------- Ordnerbaum: Chevron zeigt aufklappbare Ordner ---------- */
.mail-folder-row { display: flex; align-items: center; gap: 2px; }
.mail-folder-toggle {
  flex-shrink: 0; width: 22px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
}
.mail-folder-caret { transition: transform var(--duration-fast, 150ms) ease; }
details[open] > summary .mail-folder-caret { transform: rotate(90deg); }
/* Platzhalter, damit Ordner OHNE Unterordner bündig mit den anderen stehen. */
.mail-folder-spacer { flex-shrink: 0; width: 22px; }
.mail-folder-node summary { list-style: none; }
.mail-folder-node summary::-webkit-details-marker { display: none; }

/* ---------- Mailtext: „Papier"-Fläche, immer lesbar (auch Dunkelmodus) ---------- */
.mail-body-paper {
  background: #ffffff;
  color: #1a1a1a;
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4, 16px);
  overflow-x: auto;
}
.mail-body-paper a { color: #1d4ed8; }
.mail-body-paper img { max-width: 100%; height: auto; }
.mail-body-paper table { max-width: 100%; }

/* ---------- Zentrale Signatur im Schreibfeld ----------
 * Im editierbaren Richtext-Feld greift das globale App-CSS
 * (img{display:block}, img,video{max-width:100%;height:auto}) und überschreibt
 * die width/height-Attribute der Signatur-Bilder. Innerhalb der Signatur die
 * App-Resets zurücksetzen (revert honoriert wieder die HTML-Attribute), damit
 * sie im Editor exakt wie in der E-Mail aussieht. Die Vorschau in den
 * Einstellungen läuft ohnehin isoliert im iframe. */
.mail-signature img { max-width: revert; height: revert; width: revert; display: revert; }
.mail-signature table { display: revert; border-collapse: collapse; }
.mail-signature td, .mail-signature tr { display: revert; }

/* ---------- Empfänger-Pills (To/Cc/Bcc) ---------- */
.recipients {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 40px; padding: 5px 8px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
}
.recipients:focus-within { border-color: var(--color-accent); }
.recipient-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-bg-subtle); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 9999px;
  padding: 2px 6px 2px 10px; font-size: var(--text-sm, 0.875rem); max-width: 100%;
}
.recipient-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient-pill button {
  border: none; background: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 15px; line-height: 1; padding: 0; width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px;
}
.recipient-pill button:hover { color: var(--color-danger); }
.recipients-input {
  flex: 1 1 120px; min-width: 120px; border: none; outline: none; background: transparent;
  color: var(--color-text); font-size: var(--text-sm, 0.875rem); padding: 4px 2px;
}
/* Vorschlagsliste (Kontakte/Verteilerlisten) */
.recipients-wrap { position: relative; }
.recipients-suggestions {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.15));
  max-height: 260px; overflow-y: auto; padding: 4px;
}
.recipients-suggestions[hidden] { display: none; }
.recipients-suggestion {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: var(--radius-sm, 6px);
  padding: 6px 8px; font-size: var(--text-sm, 0.875rem); color: var(--color-text);
}
.recipients-suggestion:hover, .recipients-suggestion.is-active { background: var(--color-bg-subtle); }
.recipients-suggestion small { display: block; color: var(--color-text-muted); }