/*
 * Lumen Layout - Feld "angemeldete Mitarbeiter" (WSS-Feld interaktiv_liste_ma_firma,
 * WssFieldBelegungInteraktivFirmenMitarbeiter), v. a. in der Kursübersicht der Firma
 * (Tool 21).
 *
 * Das Feld ist ein Baum aus dem jQuery-treeview-Plugin (project.js, initTreeView).
 * Dessen Stylesheet zeichnet Linien und +/- als GIF-Sprites auf weissem Grund - auf
 * den grauen Kurskarten standen die Mitarbeiter dadurch in weissen Kaesten. Hier
 * ersetzen Font-Awesome-Symbole die Sprites; die Klick-Logik des Plugins (an
 * .hitarea) bleibt unveraendert. Die Selektoren tragen "ul.treeview", weil
 * jquery.treeview.css spaeter laedt und z. B. ".treeview li.lastExpandable" sonst
 * gleich spezifisch waere.
 *
 * Der Name traegt aus dem PHP inline "float: left; width: 175px" - klassisch eine
 * feste Spalte, hinter der Status bzw. BLAK-Punkte stehen. In den schmalen Lumen-
 * Karten brach ein laengerer Status (Tool-Einstellung "Belegungsstatus der
 * angemeldeten Mitarbeiter anzeigen") dadurch unter den Namen um. Hier steht er
 * direkt hinter dem Namen im Textfluss; das !important ist noetig, weil die
 * Vorgabe ein Inline-Style ist.
 */

.belegung_interaktiv_liste_ma_firma ul.treeview,
.belegung_interaktiv_liste_ma_firma ul.treeview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
}

.belegung_interaktiv_liste_ma_firma ul.treeview li {
  position: relative;
  margin: 0;
  padding: 2px 0 2px 24px;
  background: none;
}

.belegung_interaktiv_liste_ma_firma ul.treeview .hitarea {
  position: absolute;
  top: 2px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: 20px;
  height: 20px;
  margin: 0;
  background: none;
  color: var(--teal-d);
}

.belegung_interaktiv_liste_ma_firma ul.treeview .hitarea::before {
  content: "\f055";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
}

.belegung_interaktiv_liste_ma_firma ul.treeview .collapsable-hitarea::before {
  content: "\f056";
}

.belegung_interaktiv_liste_ma_firma ul.treeview .hitarea:hover {
  color: var(--teal);
}

/* Klickbar sind "Mitarbeiter anzeigen" (Plugin) und jede Mitarbeiterzeile mit
   eigenen Kursen (initTreeView in project.js). Das Plugin faerbt per .hover
   (jquery.treeview.css) rot - hier im Lumen-Teal. */
.belegung_interaktiv_liste_ma_firma ul.treeview li:has(> .hitarea) > .liste_mitarbeiter {
  cursor: pointer;
}

.belegung_interaktiv_liste_ma_firma ul.treeview .hover,
.belegung_interaktiv_liste_ma_firma ul.treeview li:has(> .hitarea) > .liste_mitarbeiter:hover .liste_mitarbeiter_namevorname {
  color: var(--teal-d);
}

/* Zwischen Mitarbeiterzeile und Kursliste steht ein <br /> aus dem PHP. */
.belegung_interaktiv_liste_ma_firma ul.treeview li > br {
  display: none;
}

.belegung_interaktiv_liste_ma_firma .liste_mitarbeiter_namevorname {
  float: none !important;
  width: auto !important;
  color: var(--ink);
}

.belegung_interaktiv_liste_ma_firma .belegungsstatus_mitarbeiter,
.belegung_interaktiv_liste_ma_firma .belegungsstatus_blak,
.belegung_interaktiv_liste_ma_firma .punkte,
.belegung_interaktiv_liste_ma_firma .pkt_ok_am {
  color: var(--ink-2);
  font-weight: 400;
}

/* Weitere Kurse des Mitarbeiters ("bis dato auch noch belegt") */
.belegung_interaktiv_liste_ma_firma ul.treeview li > ul {
  margin: 4px 0 2px;
}

.belegung_interaktiv_liste_ma_firma .weiterema,
.belegung_interaktiv_liste_ma_firma .tool_21_mitarbeiterkurs {
  padding-left: 0;
  color: var(--ink-2);
  font-weight: 400;
}

.belegung_interaktiv_liste_ma_firma .weiterema strong {
  font-weight: 600;
}