/*
 * Admin (50-admin.js): one long page in four sections rather than tabs, so
 * an admin who changes a permission sees who is in a call just below it.
 */
.admin { max-width: 1040px; display: grid; gap: 1rem; }
.adm-nav { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.adm-nav a, .radio, .switch { display: inline-flex; align-items: center; min-height: 32px; }
.adm-sec { display: grid; gap: .75rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.adm-modes { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.adm-modes fieldset { margin: 0; padding: .6rem .75rem .75rem; border: 1px solid var(--line); border-radius: 10px; display: grid; }
.adm-modes legend { padding: 0 .25rem; font-weight: 700; }
.radio, .switch { gap: .55rem; padding: 0 .3rem; border-radius: 6px; cursor: pointer; }
.radio:hover, .person:hover { background: var(--surface-2); }
.adm-err { color: var(--danger); }
.adm-sec > .btn { justify-self: start; }
.adm-results, .adm-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.person { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; width: 100%; min-height: 40px; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.person-name, .room-t { font-weight: 700; }
.tag { margin-left: auto; padding: 0 .5rem; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .8rem; }
.adm-editor { display: grid; gap: .5rem; }
.adm-editor:empty, .room-who:empty { display: none; }
.adm-rooms li { display: grid; gap: .15rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 8px; }
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th, .table-wrap td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.table-wrap th { font-size: .85rem; color: var(--muted); }
@media (max-width: 480px) { .adm-sec { padding: 1rem; } }
@media (pointer: coarse) { .radio, .switch, .adm-nav a, .person { min-height: 44px; } }