/* mail.css — E-Mail-Client (Farben/Radien/Abstände/Größen/Ebenen ausschließlich über Kern-Tokens,
   keine Schriftgrößen hier — die liefert das typo-Kernmodul). */

.mail-wrap { display:flex; flex-direction:column; height:100%; min-height:0; }
.mail-shell { display:flex; flex:1; min-height:0; background:var(--surface); color:var(--text); }

/* ───── Mailbox-Sidebar (Kern-Rail .wn-sidebar, identisch zu CRM) ───── */
.mail-mbx { min-height:0; flex-direction:column; }
.mail-folders { flex:1; overflow-y:auto; padding:0; min-height:0; }
/* Statusleiste unten in der Rail (Outlook): Text + Fortschritt (Kern-Baustein), ruhig = „Bereit/Zuletzt …" */
.mail-status { flex:0 0 auto; margin-top:auto; padding:var(--sp-3) var(--sp-3) 0; border-top:1px solid var(--border); color:var(--muted); font-size:var(--fs-xs); display:flex; flex-direction:column; gap:var(--sp-2); }
.mail-status[data-idle="1"] { opacity:var(--op-half); }
.mail-status .cc-progress[hidden] { display:none; }
.mail-status-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-acct-strip { width:var(--sz-8); height:var(--sz-8); border-radius:var(--radius-pill); flex:0 0 auto; background:var(--o); }
/* Verschachtelte IMAP-Ordner: je Ebene eingerückt */
.mail-folders .wn-item[data-depth="1"] { padding-left:var(--sp-8); }
.mail-folders .wn-item[data-depth="2"] { padding-left:var(--sp-10); }
.mail-folders .wn-item[data-depth="3"] { padding-left:var(--sp-12); }

/* ───── Hauptbereich: EINE Werkzeugzeile, darunter Liste | Trenner | Inhalt ───── */
.mail-main { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.mail-toolbar { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); flex:0 0 auto; }
/* Suche rechts aussen, nimmt den freien Platz (lang), Controls links */
.mail-tb-search { margin-left:auto; flex:1 1 var(--sz-500); min-width:var(--sz-240); max-width:var(--sz-820); }
.mail-tb-search .mage-input, .mail-tb-search input { width:100%; }
/* Konten und Ordner-Gruppen klappbar: Pfeil im Gruppenkopf, Körper wird ausgeblendet */
.mail-acct-head { cursor:pointer; user-select:none; }
.mail-acct-head:hover { color:var(--ink); }
.mail-acct-chev { transition:transform var(--dur); flex:0 0 auto; }
.mail-acct-head[aria-expanded="false"] .mail-acct-chev { transform:rotate(-90deg); }
.mail-acct-body.cc-hidden { display:none; }
.mail-sub-head { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-2) var(--sp-1); color:var(--muted); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:var(--tracking); cursor:pointer; user-select:none; }
.mail-sub-head:hover { color:var(--ink); }
.mail-sub-head .wn-count { margin-left:auto; }
.mail-sub-body.cc-hidden { display:none; }
.mail-tb-switch { display:inline-flex; align-items:center; gap:var(--sp-2); color:var(--muted); white-space:nowrap; }
.mail-tb-switch.mail-tb-off { opacity:var(--op-half); }
.mail-tb-lbl { display:inline-flex; align-items:center; gap:var(--sp-1); }
.mail-split { flex:1; display:flex; min-height:0; }

/* ───── Listen-Spalte ───── */
.mail-listcol {
  flex:0 0 var(--mail-list-w, var(--sz-380)); width:var(--mail-list-w, var(--sz-380));
  display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border);
}
.mail-list { flex:1; overflow-y:auto; min-height:0; }

.mail-item {
  position:relative; display:flex; gap:var(--sp-3); padding:var(--sp-4);
  border-bottom:1px solid var(--border); border-left:3px solid transparent;
  cursor:pointer; background:var(--surface);
}
.mail-item:hover { background:var(--surface-2); }
.mail-item.active { background:var(--surface-2); border-left-color:var(--o); }
.mail-item.unread .mail-item-subject { font-weight:var(--fw-bold); }
.mail-ava {
  width:var(--sz-36); height:var(--sz-36); flex:0 0 var(--sz-36);
  border-radius:var(--radius-pill); display:flex; align-items:center; justify-content:center;
  color:var(--surface); background:var(--o); text-transform:uppercase;
}
.mail-item-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.mail-item-row1 { display:flex; align-items:baseline; gap:var(--sp-2); }
.mail-item-from { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.mail-item-date { flex:0 0 auto; color:var(--muted); }
.mail-item-subject { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.mail-item-preview { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.mail-item-meta { display:flex; align-items:center; gap:var(--sp-2); }
.mail-fl { width:var(--sz-10); height:var(--sz-10); border-radius:var(--radius-pill); background:var(--o); display:inline-block; }
.mail-item-clip { color:var(--muted); }
.mail-unread-mark { width:var(--sz-8); height:var(--sz-8); border-radius:var(--radius-pill); background:var(--o); flex:0 0 auto; align-self:center; }
.mail-list-foot { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); padding:var(--sp-3); border-top:1px solid var(--border); color:var(--muted); }

/* Gruppen-Kopf (Kontakt/Thread) */
.mail-group-head {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4); background:var(--surface-2); color:var(--muted);
  position:sticky; top:0; z-index:var(--z-raised);
}

/* Schnellbearbeitung an der Listenzeile — erscheint beim Zeigen, Aktionen rechtsbündig.
   Das Menü selbst ist am Viewport verankert (Kern: data-cc-menu-fixed) → nie abgeschnitten. */
.mail-item-quick { position:absolute; right:var(--sp-3); top:var(--sp-3); display:none; gap:var(--sp-1); }
.mail-item:hover .mail-item-quick, .mail-item-quick .cc-menu-wrap.cc-menu-open { display:flex; }
.mail-item-quick .cc-menu-wrap.cc-menu-open { display:inline-block; }

/* ───── Lese-Pane ───── */
.mail-preview { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.mail-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-4); color:var(--muted); }
.mail-empty-ico { opacity:var(--op-half); }
.mail-preview-body { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
.mail-pv-head { padding:var(--sp-6) var(--sp-8) var(--sp-4); border-bottom:1px solid var(--border); }
.mail-pv-subject { color:var(--ink); margin-bottom:var(--sp-3); }
.mail-pv-meta { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); color:var(--muted); }
.mail-pv-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); padding:var(--sp-4) var(--sp-8); border-bottom:1px solid var(--border); }
.mail-pv-atts { display:flex; flex-wrap:wrap; gap:var(--sp-2); padding:var(--sp-4) var(--sp-8); border-bottom:1px solid var(--border); }
.mail-att {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface-2); color:var(--text); cursor:pointer;
}
.mail-att:hover { border-color:var(--o); }
.mail-pv-body { flex:1; min-height:0; }
.mail-pv-frame { width:100%; height:100%; border:0; background:var(--surface); }
.mail-remote-notice { margin:var(--sp-3) var(--sp-8); }

/* [hidden]-Guard: die display:flex-Regeln haben dieselbe Spezifität wie das native [hidden]. */
.mail-preview-body[hidden], .mail-empty[hidden], .mail-move-menu[hidden], .mail-set-form[hidden] { display:none; }

/* Interaktions-Helfer (Flag-Marken, Pager, Sync) — die Aktionsknöpfe sind Kern-Icon-Knöpfe */
.mail-fmark, .mail-pg, .mail-fold-del { cursor:pointer; color:var(--muted); }
.mail-pg:hover, .mail-fold-del:hover { color:var(--o); }
.mail-pv-flags { display:inline-flex; gap:var(--sp-2); align-items:center; margin-left:var(--sp-3); }
.mail-fmark { display:inline-flex; padding:var(--sp-1); border:1px solid var(--border); border-radius:var(--radius); opacity:var(--op-half); }
.mail-fmark.on { opacity:1; border-color:var(--o); }
.mail-fold-del { margin-left:var(--sp-1); display:inline-flex; }
.mail-spin { opacity:var(--op-half); pointer-events:none; }
.mail-spin .cc-ico { animation:mail-spin calc(var(--dur-slow) * 3) linear infinite; }
@keyframes mail-spin { to { transform:rotate(360deg); } }

/* ───── CRM-Kontaktzeile in der Vorschau ───── */
.mail-pv-contact { display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); color:var(--muted); }
.mail-contact-link { color:var(--o); cursor:pointer; }
.mail-contact-link:hover { text-decoration:underline; }
.mail-contact-type { padding:0 var(--sp-2); border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--muted); }

/* ───── Verschieben-Menü (server-gerendert, je Konto eine Gruppe) ───── */
.mail-move-menu { margin:var(--sp-3) var(--sp-8); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); padding:var(--sp-3) var(--sp-4); display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-8); }
.mail-move-group { display:flex; flex-direction:column; gap:var(--sp-1); min-width:var(--sz-160); }
.mail-move-group .txt-label { margin-bottom:var(--sp-1); }
.mail-move-row { justify-content:flex-start; text-align:left; }
.mail-move-here { color:var(--muted); opacity:var(--op-half); }

/* ───── Teilen-Inhalt im Kern-Modal / Anlege-Zeilen der Einstellungen ───── */
.mail-share-list { display:flex; flex-direction:column; }
.mail-share-name { color:var(--ink); }

/* ───── Einstellungen (Sidebar; Feld-Layout kommt vom Kern forms.css) ───── */
.mail-set-list { display:flex; flex-direction:column; margin-bottom:var(--sp-3); }
.mail-set-name { color:var(--ink); }
.mail-set-form { margin-top:var(--sp-6); padding-top:var(--sp-6); border-top:1px solid var(--border); }
.mail-set-result { margin-top:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); }
.mail-set-add { margin-bottom:var(--sp-3); }
.mail-rule { display:flex; flex-direction:column; }
/* Regel-Baukasten: Bedingungs-/Aktionszeilen (Zeilen-Vorlagen vom Server) */
.mail-rows { display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.mail-row-x { flex:0 0 auto; min-width:0; display:flex; align-items:flex-end; }
.mail-act-val[hidden], .mail-act-row .mpp-mount[hidden] { display:none; }
.mail-cond-row .cc-input-cell:not(.mail-row-x), .mail-act-row .cc-input-cell:not(.mail-row-x) { flex:1 1 var(--sz-140); min-width:var(--sz-120); }

/* ───── Verfassen (eigenes Fenster) — Aufbau wie im ERP: kompakte Kopfzeilen, Editor wächst mit, Anhänge unten ───── */
.mail-compose { display:flex; flex-direction:column; height:100%; width:100%; background:var(--surface); }
.mail-compose-body { flex:1; overflow:auto; min-height:0; display:flex; flex-direction:column; }
.mail-compose-head { display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); flex:0 0 auto; }
.mail-compose .mail-crow { display:flex; align-items:center; gap:var(--sp-3); margin:0; }
.mail-compose .mail-crow[hidden] { display:none; }
/* Kompakte Kopfzeilen des Verfassens: nur die Spaltenbreite ist eigen — Schrift/Farbe des Labels bleiben Kern. */
.mail-compose .mail-crow > .mage-field-label { flex:0 0 var(--sz-72); min-width:0; margin:0; padding:0; }
.mail-compose .mail-crow > .mage-field-body { flex:1; min-width:0; max-width:none; }
.mail-crow-inner { display:flex; align-items:center; gap:var(--sp-2); }
.mail-crow-inner > .cc-input-cell:first-child, .mail-crow-inner > .cc-tokens { flex:1; min-width:0; }
.mail-crow-inner .cc-input-cell { padding:0; }
.mail-crow-small { flex:0 0 var(--sz-160); }
.mail-cc-toggle { white-space:nowrap; }
.mail-cc-toggle[hidden] { display:none; }
/* Editor ohne eigenen Scrollbereich: er wächst mit dem Inhalt, das Fenster scrollt — so bleibt das Zitat sichtbar. */
.mail-compose-editor { flex:1 0 auto; display:flex; flex-direction:column; }
.mail-compose-editor .cc-wysiwyg { border:0; border-radius:0; display:flex; flex-direction:column; flex:1 0 auto; }
.mail-compose-editor .cc-wys-toolbar { border-radius:0; }
.mail-compose-editor .cc-wys-area { min-height:var(--sz-280); max-height:none; overflow:visible; }
.mail-compose-attrow { flex:0 0 auto; border-top:1px dashed var(--border); padding:var(--sp-3) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); }
.mail-compose-atts { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.mail-compose-atts:empty { display:none; }
.mail-hidden-file { display:none; }
.mail-att-rm { cursor:pointer; color:var(--muted); }
.mail-att-rm:hover { color:var(--danger); }
.mail-compose-flash { padding:0 var(--sp-5); }
.mail-compose-flash:empty { display:none; }
.mail-dropzone { display:flex; align-items:center; gap:var(--sp-2); color:var(--muted); font-size:var(--fs-sm); flex-wrap:wrap; }
.mail-dropzone-hint { margin-left:auto; font-size:var(--fs-xs); }
.mail-compose.mail-dragging .mail-compose-attrow { border-color:var(--o); background:var(--grey-50); }
.mail-compose.mail-dragging .mail-dropzone { color:var(--o); }
.mail-compose-foot { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--border); flex:0 0 auto; background:var(--grey-50); }
.mail-foot-spacer { flex:1; }
/* Zitat der Ursprungsnachricht im Editor (kein Inline-Stil in der Mail selbst) */
.mail-compose .cc-wys-area blockquote { border-left:3px solid var(--grey-300); margin:var(--sp-3) 0; padding-left:var(--sp-4); color:var(--muted); }

/* Ziehbarer Trenner zwischen Liste und Inhalt */
.mail-splitter { flex:0 0 var(--sz-6); cursor:col-resize; background:var(--border); opacity:var(--op-half); }
.mail-splitter:hover, .mail-splitter.mail-splitting { opacity:1; background:var(--o); }

/* ───── responsiv ───── */
@media (max-width:900px) {
  .mail-tb-lbl { display:none; }
  .mail-listcol { width:var(--sz-280); flex-basis:var(--sz-280); }
}
@media (max-width:720px) {
  .mail-shell { flex-direction:column; }
  .mail-mbx { width:100%; flex-basis:auto; border-right:0; border-bottom:1px solid var(--border); }
  .mail-split { flex-direction:column; }
  .mail-listcol { width:100%; flex-basis:auto; border-right:0; border-bottom:1px solid var(--border); }
}