/* style-perm – wird von views/partials/head.ejs geladen
   Persönliche Ordnerrechte: Seite /admin/room/:id/rechte/:userId
   sowie die Kennzeichnung in der Teilnehmerübersicht. */

/* ---------- Kopfkarte der Person ---------- */
.permperson { display: grid; gap: 16px; }
.permperson-who { display: flex; align-items: center; gap: 14px; }
.permperson-icon {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  background: #E4EAF2; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.permperson-who b { font-size: 17px; color: var(--navy); }

.permfacts { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 0; }
.permfacts > div { min-width: 150px; }
.permfacts dt { font-size: 12.5px; color: var(--grey); text-transform: uppercase; letter-spacing: .4px; }
.permfacts dd { margin: 2px 0 0; font-weight: 500; color: var(--navy); }
.permhint { margin: 0; max-width: 90ch; }

/* ---------- Was heute gilt ----------
   Der geltende Stand steht in der Kopfkarte, oberhalb des Auswahlfeldes. Er
   ist eine AUSKUNFT und darf deshalb nicht wie eine Schaltfläche aussehen:
   kein Rahmen, der zum Klicken einlädt, aber deutlich abgesetzt. */
.permstand {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line);
}
.permstand-titel {
  font-size: 12.5px; color: var(--grey);
  text-transform: uppercase; letter-spacing: .4px;
}
.permstand-teil { display: inline-flex; align-items: center; gap: 8px; }
.permstand-teil b { font-weight: 500; color: var(--navy); }

/* ---------- Kopfbereich: Auswahlfeld + Stufenkunde ---------- */
.permtop { align-items: start; margin-top: 18px; }
.permbulk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.permlegend h2 { margin-top: 0; }
.permlegend ul { list-style: none; margin: 0 0 12px; padding: 0; }
.permlegend li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; flex-wrap: wrap; }
.permlegend li b { font-weight: 500; min-width: 92px; }

/* ---------- Stufenplakette ---------- */
.permchip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  background: var(--soft); color: var(--grey);
}
.permchip.lvl0 { background: var(--soft);  color: var(--grey); }
.permchip.lvl1 { background: #E4EAF2; color: var(--navy); }
.permchip.lvl2 { background: #D7E2EF; color: var(--navy); }
.permchip.lvl3 { background: #C3D3E7; color: var(--navy); }
.permchip.lvl4 { background: #9FB6D3; color: #001836; }
.permchip.lvl5 { background: var(--navy); color: #fff; }
.permchip.ghost { background: transparent; border: 1px solid var(--line); color: var(--grey); }

/* ---------- Ordnertabelle ---------- */
.permtable td, .permtable th { vertical-align: middle; }
.permtable .fname { white-space: nowrap; }
.permtable .idx { color: var(--grey); font-variant-numeric: tabular-nums; margin-right: 4px; }
.permtable tr.has-own { background: #FAFBFD; }
.permtable tr.has-own .fname { box-shadow: inset 3px 0 0 var(--navy); }
.permtable select { min-width: 200px; }
.permtable .badge { margin-left: 8px; }

.permactions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Teilnehmerübersicht: Kennzeichnung ---------- */
.permlinkcell { white-space: nowrap; }
.permlink { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; }
.permlink svg { flex: 0 0 auto; }
.permdev { margin-left: 6px; }

@media (max-width: 900px) {
  .permtable .fname { white-space: normal; }
  .permtable select { min-width: 140px; }
}