body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
  color: #1a1a1a;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #ddd;
}

th {
  background: #f5f5f5;
}

.banner {
  background: #fdecea;
  color: #b3261e;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.hint {
  color: #6e7781;
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.status-Available { color: #1a7f37; font-weight: 600; }
.status-In_Meeting, .status-In_A_Meeting { color: #0969da; font-weight: 600; }
.status-Presenting { color: #0969da; font-weight: 600; }
.status-Away { color: #9a6700; }
.status-Do_Not_Disturb { color: #cf222e; }
.status-On_Phone_Call { color: #0969da; font-weight: 600; }
.status-Offline { color: #6e7781; }
.status-extern { color: #9a6700; font-weight: 600; font-style: italic; }

/* Extern beigetretene Teilnehmer (fremder/kein Account) deutlich hervorheben */
tr.external-row { background: #fff4e5; }
tr.external-row td:first-child::before {
  content: "⚠ ";
  color: #b3261e;
}

/* Editierbare Breakout-Zelle: dezenter Hinweis, dass man reinklicken kann */
td.editable {
  cursor: pointer;
  text-decoration: underline dotted #b0b0b0;
  text-underline-offset: 3px;
}
td.editable:hover {
  background: #eef4ff;
}
input.room-edit {
  width: 95%;
  font: inherit;
  padding: 2px 4px;
  border: 1px solid #0969da;
  border-radius: 3px;
}