Benutzer-Tabelle: Kopf, Zellenrhythmus und Rollen-Select

src/app/globals.css

@@ -1115,6 +1115,71 @@ li {
   background: var(--fog);
 }
 
+.users-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.users-table thead th {
+  background: var(--fog);
+  color: var(--harbor);
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 2px solid var(--line);
+  white-space: nowrap;
+}
+
+.users-table td,
+.users-table tbody th {
+  padding: 0.6rem 0.75rem;
+  vertical-align: middle;
+  border-top: 1px solid var(--line);
+}
+
+.users-table tbody tr:first-child td,
+.users-table tbody tr:first-child th {
+  border-top: none;
+}
+
+.users-table .cell-rest {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  width: 6rem;
+}
+
+.users-table .cell-action {
+  text-align: right;
+  white-space: nowrap;
+  width: 1%;
+}
+
+.role-select {
+  height: 2.5rem;
+  font: inherit;
+  padding: 0.45rem 2rem 0.45rem 0.7rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background-color: var(--paper);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8b94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.6rem center;
+  color: inherit;
+  appearance: none;
+  max-width: 100%;
+}
+
+.role-select:focus-visible {
+  outline: 3px solid var(--sea);
+  outline-offset: 2px;
+}
+
+.role-select:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
 .users-table th[scope="row"] strong {
   display: block;
 }