/*
 * posteingaenge — Briefumschlag-Schnellknöpfe in der Elastic-Taskbar.
 *
 * Ein Umschlag-Icon (Lucide „mail", als CSS-Mask) pro Posteingang, eingefärbt
 * über --pe-color aus der Plugin-Konfiguration. Die Farben entsprechen der
 * Leitungs-Ampel im Verfassen-Fenster: GRÜN = intern, BLAU = extern.
 *
 * 🛑 Elastic setzt auf #taskmenu a:before mehrere Eigenschaften mit
 * !important (float, width, margin-right). Ohne eigenes !important bleibt
 * das Symbol unsichtbar bzw. verrutscht — deshalb stehen sie hier bewusst.
 */

#taskmenu a.posteingang-btn {
  /* Lucide „mail" (Rechteck + Klappe) als Alpha-Maske */
  --pe-env: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

#taskmenu a.posteingang-btn::before {
  content: "" !important;
  display: inline-block !important;
  float: none !important;          /* Elastic setzt float:left !important */
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin: 0 auto !important;
  line-height: 1 !important;
  vertical-align: middle;
  background-color: var(--pe-color, #3b82f6) !important;
  -webkit-mask: var(--pe-env) center / contain no-repeat !important;
          mask: var(--pe-env) center / contain no-repeat !important;
  font-family: inherit !important;  /* Font-Icon-Erbe neutralisieren */
}

/* In der Taskbar stehen nur ~41 px Breite zur Verfügung. Elastic schneidet
   längere Beschriftungen hart ab — „intranet" war schon vor den
   Sammelansichten verstümmelt (gemessen 06.08.2026: 53 px nötig, 41 px da).
   Statt die Wörter zu verkürzen, dürfen sie umbrechen; der volle Klartext
   steht zusätzlich im Tooltip (title= aus posteingaenge.php). */
#taskmenu a.posteingang-btn {
  height: auto !important;      /* Elastic setzt eine feste Höhe — sonst wird
                                   die zweite Zeile unten abgeschnitten. */
  min-height: 3.2rem;
  padding-bottom: .3rem !important;
}

#taskmenu a.posteingang-btn .inner {
  display: block;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: .62rem;
  line-height: 1.1;
  hyphens: none;
}

/* Sammelansichten („Alle .intranet" / „Alle .team", v01.03): gestapelte
   Umschläge (Lucide „mails") — auf einen Blick unterscheidbar von den
   Sprung-Knöpfen, aber in derselben Ordnerfarbe. */
#taskmenu a.posteingang-sammel {
  --pe-env: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='16' height='13' rx='2'/%3E%3Cpath d='m22 6-7.1 3.8a2 2 0 0 1-1.8 0L6 6'/%3E%3Cpath d='M2 8v11a2 2 0 0 0 2 2h14'/%3E%3C/svg%3E");
}

#taskmenu a.posteingang-btn:hover::before,
#taskmenu a.posteingang-btn:focus::before {
  opacity: .8;
}

/* ---------------------------------------------------------------------------
   Aktiver Ordner — gesetzt von posteingaenge.js als Klasse `pe-aktiv`.

   🛑 Elastics eigene `.selected`-Markierung ist im Dunkelmodus praktisch
   unsichtbar (identische Farben, kein Balken) — deshalb eine eigene, deutliche
   Anzeige: farbiger Balken links in der Knopffarbe, Symbol voll deckend,
   inaktive Knöpfe leicht zurückgenommen. Ohne das wirkte ein Klick auf .team
   folgenlos, weil die Markierung auf „Alle" stehenblieb (Befund 2026-07-29).
   --------------------------------------------------------------------------- */
#taskmenu a.posteingang-btn::before {
  opacity: .6;
  transition: opacity .15s ease;
}

#taskmenu a.posteingang-btn.pe-aktiv {
  position: relative;
  background-color: color-mix(in srgb, var(--pe-color, #3b82f6) 14%, transparent);
}

#taskmenu a.posteingang-btn.pe-aktiv::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--pe-color, #3b82f6);
}

#taskmenu a.posteingang-btn.pe-aktiv::before {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Reihenfolge der Leiste festlegen.
   #taskmenu ist von Haus aus kein Flex-Container — ohne das greift `order`
   nicht. Gewünschte Folge:
     1 Schreiben · 2 E-Mail · 3 intranet · 4 .team ·
     5 Alle .intranet · 6 Alle .team · 7 Kalender · 8 Einstellungen
   Kontakte wandert ans Ende (in der Wunschliste nicht aufgeführt).
   🛑 Position 2 hieß bis v01.02 „Alle" — das war der native E-Mail-Knopf mit
   falschem Namen. Die echten Sammelansichten stehen jetzt auf 5 und 6.
   --------------------------------------------------------------------------- */
#taskmenu {
  display: flex !important;
  flex-direction: column !important;
}

#taskmenu a.compose                  { order: 1 !important; }
#taskmenu a.mail                     { order: 2 !important; }
#taskmenu a.posteingang-intranet     { order: 3 !important; }
#taskmenu a.posteingang-team         { order: 4 !important; }
#taskmenu a.posteingang-alle-intranet { order: 5 !important; }
#taskmenu a.posteingang-alle-team     { order: 6 !important; }
#taskmenu a.calendar                 { order: 7 !important; }
#taskmenu a.settings                 { order: 8 !important; }
#taskmenu a.addressbook,
#taskmenu a.contacts                 { order: 7 !important; }
#taskmenu a.logout,
#taskmenu a.about                    { order: 9 !important; }
/* alles übrige dazwischen */
#taskmenu > a                        { order: 8; }