/* 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; }

/* ───── 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); 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; }
/* 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%; }
/* Konto-/Ordnergruppen: klappbare Kern-Rail-Gruppen (Design::railGroup toggle/sub) — hier keine eigene Optik. */
.mail-tb-switch { display:inline-flex; align-items:center; gap:var(--sp-2); 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; }

/* Nachrichtenzeilen, Gruppenköpfe und Blätter-Leiste sind Kern-Bausteine (Design::msgRow/msgGroup/pager) —
   hier nur die Anordnung der Fuss-Leiste unter der Liste. */
.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); }

/* 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); }
.mail-busy { display:flex; align-items:center; gap:var(--sp-2); }
.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 { margin-bottom:var(--sp-3); }
.mail-pv-meta { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); }
.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-pv-body { flex:1; min-height:0; }
.mail-pv-frame { width:100%; height:100%; border:0; }
.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; }

/* Flag-Schalter (Kern Design::swatchBtn) in der Aktionsleiste, Abruf-Knopf dreht während des Abrufs */
.mail-pv-flags { display:inline-flex; gap:var(--sp-2); align-items:center; margin-left:var(--sp-3); }
.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); }

/* ───── Verschieben-Menü (server-gerendert, je Konto eine Gruppe) ───── */
/* Verschieben-Box = Kern Design::popover — hier nur Lage, Innenabstand und Spalten. */
.mail-move-menu { margin:var(--sp-3) var(--sp-8); 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; }

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

/* ───── Einstellungen (Sidebar; Feld-Layout kommt vom Kern forms.css) ───── */
.mail-set-list { display:flex; flex-direction:column; margin-bottom:var(--sp-3); }
.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%; }
.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; 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-compose-flash { padding:0 var(--sp-5); }
.mail-compose-flash:empty { display:none; }
/* Fussleiste = Kern Design::footBar */
.mail-compose-foot { flex:0 0 auto; }
.mail-foot-spacer { flex:1; }
/* Zitat der Ursprungsnachricht: Kern-Optik des Editors (wysiwyg .cc-wys-area blockquote) */

/* Ziehbarer Trenner zwischen Liste und Inhalt = Kern Design::splitter (layout .cc-splitter) */

/* ───── 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); }
}