/* Intrakommuna / Communex — App „Netzwerk" (Issue #196).

   Eigene Datei nach dem Haus-Muster fuer neue Module (wie git.css/todo.css): KEIN Eingriff
   in styles.css, damit die Login-Seite und die bestehenden Apps unangetastet bleiben.
   Alle Farben kommen aus den Design-Tokens (--card, --border, --text2, --accent, --line)
   — keine Rohfarben, sonst brechen Dark- und Lumen-Theme (Kap. 251/253).

   Modulfarbe: --tow — Netzwerk/Kollaboration liegt fachlich neben dem TOW-Workspace;
   die Kachel im Raster bekommt dieselbe Zuordnung. Der Wert steht NUR im Token
   (styles.css), nicht hier — sonst waere er eine zweite Wahrheit.
*/

.cx-wrap{padding:10px 4px 20px}
#sec-netzwerk .cx-wrap{max-width:1500px}

/* ---------- Kopfzeile ---------- */
.cx-top{display:flex;align-items:center;gap:10px;padding:2px 2px 12px}
.cx-mark{width:32px;height:32px;border-radius:var(--radius);display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;
  background:color-mix(in srgb, var(--tow) 14%, var(--card));color:var(--tow)}
.cx-t{font-size:14px;font-weight:700;line-height:1.25}
.cx-s{font-size:11.5px;color:var(--text2);line-height:1.3}

/* ---------- Zweispaltig: Gruppen links, Timeline rechts ---------- */
.cx-split{display:flex;gap:14px;align-items:flex-start}
.cx-gruppen{flex:0 0 262px;min-width:0}
.cx-main{flex:1 1 auto;min-width:0}

.cx-lbl{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text2);padding:2px 2px 6px}
.cx-lbl .mc{margin-left:4px}

/* ---------- Gruppenliste ---------- */
.cx-g{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;transition:background var(--tr),border-color var(--tr)}
.cx-g:hover{background:var(--hover)}
.cx-g.act{background:color-mix(in srgb, var(--tow) 12%, var(--card));border-color:var(--tow)}
.cx-g-t{font-size:12.5px;font-weight:600;line-height:1.25;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cx-g-s{font-size:11px;color:var(--text2);line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cx-ext{color:var(--text2);display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;
  text-decoration:none;border-radius:6px;padding:2px 4px}
.cx-ext:hover{color:var(--accent);background:var(--hover)}

/* ---------- Schreibfeld ---------- */
.cx-compose{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);
  padding:9px 10px;margin-bottom:12px}
.cx-compose textarea{width:100%;border:0;outline:0;resize:vertical;font:inherit;font-size:13px;
  color:var(--text);background:transparent;min-height:38px}
.cx-comp-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.cx-select{font:inherit;font-size:12px;color:var(--text);background:var(--card);
  border:1px solid var(--border);border-radius:8px;padding:5px 9px;max-width:280px}
.cx-rechte{font-size:11.5px;color:var(--warn)}

/* ---------- Timeline ---------- */
.cx-p{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);
  padding:10px 12px;margin-bottom:9px}
.cx-p.unread{border-left:3px solid var(--accent)}
.cx-p-k{display:flex;align-items:center;gap:7px;margin-bottom:5px;flex-wrap:wrap}
.cx-av{width:22px;height:22px;border-radius:var(--radius-pill);flex:0 0 auto;
  background:color-mix(in srgb, var(--tow) 16%, var(--card));color:var(--tow);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.cx-p-a{font-size:12.5px;font-weight:600}
.cx-p-z{font-size:11px;color:var(--text2);flex:0 0 auto}
.cx-p-t{font-size:13px;font-weight:700;line-height:1.3;margin-bottom:3px}
.cx-p-b{font-size:12.5px;color:var(--text);line-height:1.45;white-space:pre-wrap;
  overflow-wrap:anywhere}
.cx-p-f{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.cx-p-s{font-size:11px;color:var(--text2)}
.cx-chip{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--tow) 12%, var(--card));color:var(--tow)}
.cx-neu{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 6px;border-radius:var(--radius-pill);background:var(--accent-light);
  color:var(--accent-dark)}
.cx-fuss{font-size:11.5px;color:var(--text2);padding:4px 2px 0}

/* ---------- Netzwerk-Auswahl (Popover) ---------- */
.cx-nwmenu{position:fixed;z-index:calc(var(--z-react, 20) + 80);background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:5px;min-width:200px;right:24px;top:64px}
.cx-nwmenu button{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;
  color:var(--text);background:transparent;border:0;border-radius:8px;padding:7px 9px;cursor:pointer}
.cx-nwmenu button:hover{background:var(--hover)}
.cx-nw{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;color:var(--text);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 10px;margin-bottom:6px;cursor:pointer}
.cx-nw:hover{border-color:var(--tow);background:color-mix(in srgb, var(--tow) 8%, var(--card))}

/* ---------- Schmal: Gruppen unter die Timeline ---------- */
@media (max-width:900px){
  .cx-split{flex-direction:column}
  .cx-gruppen{flex:1 1 auto;width:100%}
}

/* ---------- Anmeldefeld (Kap. 434) ----------

   Inline im App-Bereich, keine Modal — das ist die Haus-Vorgabe fuer Formulare.
   Eingabefelder aus den Tokens, damit Dark- und Lumen-Theme stimmen: --e1 fuer die
   Flaeche, --border-strong fuer die Kante (der Wert ist in beiden Themes gesetzt),
   --danger fuer den Fehlertext. */
.cx-eingabe{display:block;width:100%;box-sizing:border-box;
  font:inherit;font-size:13.5px;color:var(--text);
  background:var(--e1);border:1px solid var(--border-strong);
  border-radius:var(--radius);padding:9px 11px;outline:none;
  transition:border-color var(--tr),box-shadow var(--tr)}
.cx-eingabe::placeholder{color:var(--text2);opacity:.75}
.cx-eingabe:focus{border-color:var(--tow);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--tow) 18%, transparent)}
.cx-fehler{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--danger);
  background:color-mix(in srgb, var(--danger) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 32%, transparent);
  border-radius:var(--radius);padding:8px 10px}
.cx-klein{font-size:11.5px;line-height:1.45;color:var(--text2)}