/* Server roles: the Roles and Members tabs of Server Settings, role colours in the member list
   (client/js/roles.js). Uses the theme tokens from styles.css. */

.roles-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; margin-top: 16px; align-items: start; }
.role-list { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.role-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; color: var(--text); min-height: 34px; }
.role-row:hover { background: var(--bg-hover); }
.role-row.active { background: var(--bg-active); color: var(--text-strong); }
.role-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.role-row.dragging { opacity: 0.5; }
.role-row.drop-target { box-shadow: inset 0 2px 0 var(--accent); }
.role-grip { width: 16px; flex: none; display: inline-flex; color: var(--text-muted); cursor: grab; }
.role-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
.role-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-row-count { flex: none; }
.role-move-buttons { display: none; flex: none; }
.role-row:hover .role-move-buttons, .role-row.active .role-move-buttons, .role-row:focus-within .role-move-buttons { display: inline-flex; }
.role-move { padding: 2px; }
.role-move:disabled { opacity: 0.3; cursor: default; }

.role-editor { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.role-editor-title { margin: 0 0 4px; color: var(--text-strong); overflow-wrap: anywhere; }
.role-editor .settings-label { margin-top: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.role-editor .role-name-input { width: 100%; }
.role-locked:empty { display: none; }

/* The role editor's tabs: Display, Permissions and Manage Members (N). */
.role-tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; border-bottom: 1px solid var(--border); margin: 4px 0; }
.role-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 0; color: var(--text-muted); font-weight: 600; cursor: pointer; }
.role-tab:hover { color: var(--text); }
.role-tab[aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--accent); }
.role-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.role-tab-panel { display: flex; flex-direction: column; gap: 8px; }
.role-tab-panel[hidden] { display: none; }

/* Manage Members: who has the role, and the Add Members dialog. */
.role-members-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.role-members-search { flex: 1; min-width: 0; }
.role-members-add { flex: none; }
.role-members-add:disabled { opacity: 0.5; cursor: not-allowed; }
.role-members-list { display: flex; flex-direction: column; }
.role-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.role-member-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.role-member-name { color: var(--text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-member-remove { flex: none; color: var(--text-muted); }
.role-member-remove:hover, .role-member-remove:focus-visible { color: var(--text-strong); }
.role-members-empty { padding: 12px 4px; margin: 0; }
.add-members-modal { width: min(440px, calc(100vw - 32px)); }
.add-members-search { width: 100%; margin-top: 4px; box-sizing: border-box; }
.add-members-list { display: flex; flex-direction: column; max-height: min(320px, 50vh); max-height: min(320px, 50dvh); overflow-y: auto; margin-top: 8px; }
.add-members-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 4px; cursor: pointer; }
.add-members-row:hover { background: var(--bg-hover); }
.add-members-row[hidden] { display: none; }
.add-members-row.disabled { cursor: not-allowed; opacity: 0.55; }
.modal input.add-members-check { width: auto; flex: none; margin: 0; accent-color: var(--accent); }
.add-members-name { color: var(--text-strong); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.role-colors { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.color-grid { display: grid; grid-template-columns: repeat(10, 22px); gap: 6px; }
.color-swatch { width: 22px; height: 22px; border-radius: 4px; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; }
.role-colors > .color-swatch { width: 50px; height: 50px; }
.color-swatch.selected { box-shadow: 0 0 0 2px var(--text-strong); }
.color-swatch:disabled, .color-custom:disabled { cursor: not-allowed; opacity: 0.6; }
.color-custom-wrap { display: inline-flex; border-radius: 4px; }
.color-custom-wrap.selected { box-shadow: 0 0 0 2px var(--text-strong); }
.color-custom { width: 50px; height: 50px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; }

.perm-group { display: flex; flex-direction: column; margin-top: 8px; }
.perm-group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); padding: 12px 0 4px; }
.perm-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.perm-row.disabled { cursor: not-allowed; }
.perm-row.disabled .perm-text { opacity: 0.55; }
.perm-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.perm-label { color: var(--text-strong); font-weight: 600; }

/* A switch drawn from a visually hidden checkbox (keyboard and screen readers use the checkbox). */
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.switch { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--bg-active); position: relative; transition: background 0.15s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch-input:checked + .switch { background: var(--online); }
.switch-input:checked + .switch::after { transform: translateX(16px); }
.switch-input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-input:disabled + .switch { opacity: 0.5; }

.role-delete-row { margin-top: 20px; }
.danger-button { background: var(--danger); border: 0; border-radius: 4px; padding: 8px 14px; color: #fff; font-weight: 600; }
.danger-button:hover { filter: brightness(0.9); }

.member-filter { width: min(320px, 100%); margin: 4px 0 12px; }
.member-admin-list { display: flex; flex-direction: column; }
.member-admin-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.member-admin-row button.secondary, .member-admin-row .danger-button { padding: 6px 10px; font-size: 13px; }
.member-admin-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.member-admin-name { color: var(--text-strong); font-weight: 600; }
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.role-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: var(--bg-active); font-size: 12px; color: var(--text); border: 0; max-width: 100%; }
.role-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-chip.add { width: 22px; justify-content: center; font-weight: 700; cursor: pointer; }
.role-chip.add:hover { background: var(--bg-hover); color: var(--text-strong); }
/* A removable chip's dot is its remove button: an x shows instead on hover and keyboard focus. */
.role-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; flex: none; background: none; border: 0; border-radius: 50%; padding: 0; color: var(--text-strong); cursor: pointer; }
.role-chip-remove .icon { display: none; }
.role-chip.removable:hover .role-chip-remove .role-dot, .role-chip-remove:focus-visible .role-dot { display: none; }
.role-chip.removable:hover .role-chip-remove .icon, .role-chip-remove:focus-visible .icon { display: inline-block; }
.role-chip-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The profile card's Roles: chips, "+" and its role picker. */
.profile-roles.clickable { cursor: default; }
.profile-role-chips { margin-top: 4px; }
.profile-roles .role-chip { background: var(--bg-rail); padding: 3px 7px; }
.role-picker { margin-top: 8px; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-rail); border: 1px solid var(--border); border-radius: 6px; }
.role-picker-search { width: 100%; box-sizing: border-box; }
.role-picker-list { display: flex; flex-direction: column; max-height: 180px; overflow-y: auto; }
.role-picker-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: none; border: 0; border-radius: 4px; color: var(--text); text-align: left; cursor: pointer; }
.role-picker-item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* --bg-active, not --bg-hover: on the picker's --bg-rail the light theme's hover colour is all but
   invisible. The highlighted role (what Enter gives) also gets an accent bar, a cue that doesn't
   rely on a shade. */
.role-picker-item:hover, .role-picker-item.active { background: var(--bg-active); color: var(--text-strong); }
.role-picker-item.active { box-shadow: inset 3px 0 0 var(--accent); }
.role-picker-empty { padding: 6px 8px; }

@media (max-width: 760px) {
  .roles-layout { grid-template-columns: 1fr; }
  .role-list { position: static; }
  .color-grid { grid-template-columns: repeat(5, 22px); }
}

/* A composer locked for lack of Send Messages shows its one-line explanation without scrolling. */
#composer-input:disabled { overflow: hidden; }
#composer-input:disabled::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }