/* Invites (client/js/invites.js): Invite People, Join a Server, invite links and cards, Server
   Settings > Invites; and server profiles and ownership (client/js/serverMembers.js): Change
   Nickname, Transfer Ownership, Delete Server, the members button; role mentions. Uses the theme
   tokens from styles.css. */

/* ---- dialogs ---- */
.invite-modal { position: relative; width: min(460px, 92vw); }
.invite-close { position: absolute; top: 12px; right: 12px; }
.invite-modal h2 { margin: 0 32px 4px 0; }
.invite-channel { margin: 0 0 16px; }
.invite-link-row { display: flex; align-items: center; gap: 8px; background: var(--bg-rail); border-radius: 4px; padding: 4px 4px 4px 0; margin-top: 8px; }
.invite-link-row .invite-link-input { flex: 1; min-width: 0; background: none; border: 0; box-shadow: none; padding: 8px 10px; font-size: 15px; color: var(--text); }
.invite-link-row .invite-copy { flex: none; min-width: 76px; padding: 8px 14px; }
.invite-link-row .invite-copy.copied { background: var(--online); }
.invite-expiry { margin: 8px 0 0; }
.invite-expiry .link-button { padding: 0; font-size: inherit; }
.invite-modal .settings-field { margin-top: 14px; }
.invite-modal .settings-field:first-of-type { margin-top: 12px; }
.invite-modal select { width: 100%; font: inherit; color: var(--text); background: var(--bg-rail); border: 0; border-radius: 4px; padding: 10px; outline: none; }
.invite-modal select:focus { box-shadow: 0 0 0 2px var(--accent); }
.invite-loading { padding: 24px 0; text-align: center; }
.invite-modal .error:empty, .server-members-modal .error:empty { display: none; }

/* The join splash: the server's picture, who invited you, its name and counts. */
.invite-splash { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0 4px; }
.invite-splash .invite-inviter { margin: 8px 0 0; }
.invite-splash .invite-guild-name { margin: 0; font-size: 22px; }
.invite-splash .invite-accept { margin-top: 16px; width: 100%; padding: 12px 16px; }
.invite-splash .invite-accept.joined { background: var(--bg-active); }
.invite-guild-icon { flex: none; display: grid; place-items: center; overflow: hidden; background: var(--bg-active); color: var(--text-strong); font-weight: 700; border-radius: 30%; }
.invite-guild-icon.large { width: 72px; height: 72px; font-size: 22px; }
.invite-guild-icon.small { width: 50px; height: 50px; font-size: 16px; border-radius: 16px; }
.invite-guild-icon.invalid { color: var(--text-muted); }
.invite-guild-icon img { width: 100%; height: 100%; object-fit: cover; }
.invite-counts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.invite-count { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.invite-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.invite-dot.online { background: var(--online); }

/* ---- invite links and cards in messages ---- */
.content a.invite-link { color: var(--link); cursor: pointer; }
.invite-card { margin-top: 6px; max-width: 432px; background: var(--bg-sidebar); border-radius: 8px; padding: 14px 16px 16px; }
.invite-card.loading { color: var(--text-muted); }
.invite-card-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.invite-card-body { display: flex; align-items: center; gap: 14px; }
.invite-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.invite-card-name { color: var(--text-strong); font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-card.invalid .invite-card-name { color: var(--danger); }
.invite-card-join { flex: none; background: var(--online); color: #fff; border: 0; border-radius: 4px; padding: 8px 18px; font-weight: 600; }
.invite-card-join:hover { filter: brightness(1.1); }
.invite-card-join.joined { background: var(--bg-active); color: var(--text); }
.invite-card-join:disabled { opacity: 0.6; }

/* ---- Server Settings > Invites ---- */
.invite-table { display: flex; flex-direction: column; margin-top: 16px; }
.invite-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) 70px 90px 36px; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.invite-row.head { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); padding-bottom: 6px; }
.invite-row:not(.head):hover { background: var(--bg-hover); }
.invite-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-cell.inviter { display: flex; align-items: center; gap: 8px; }
.invite-cell.inviter .avatar { width: 24px; height: 24px; font-size: 12px; flex: none; }
.invite-cell.code code { font-size: 13px; }
.invite-revoke { padding: 4px; opacity: 0; }
.invite-row:hover .invite-revoke, .invite-revoke:focus-visible { opacity: 1; }
.invite-revoke:hover { color: var(--danger); }
.invites-empty { margin-top: 16px; }

/* ---- Change Nickname, Transfer Ownership, Delete Server ---- */
.server-members-modal .settings-field { margin-top: 12px; }
.nickname-row { display: flex; align-items: center; justify-content: space-between; }
.nickname-row .link-button { padding: 0; font-size: 13px; }
.transfer-ack-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; color: var(--text); cursor: pointer; }
.transfer-ack-row input { width: auto; margin-top: 3px; flex: none; }
.delete-server-warning { background: rgba(250, 166, 26, 0.12); border-left: 3px solid var(--warning); color: var(--text); padding: 10px 12px; border-radius: 4px; }
.server-members-modal .modal-actions button.danger-button:disabled { opacity: 0.5; cursor: not-allowed; }
.member-admin-row .transfer-ownership-button { padding: 6px 10px; font-size: 13px; }

/* ---- Show / Hide Member List ---- */
.member-list-toggle.active { color: var(--text-strong); }
.app.member-list-hidden { grid-template-columns: 72px 240px minmax(0, 1fr); }
.app.member-list-hidden .member-list { display: none; }
@media (max-width: 1000px) {
  .app.member-list-hidden { grid-template-columns: 72px 220px minmax(0, 1fr); }
}

/* ---- role mentions ---- */
.content .mention.role-mention { cursor: default; }
.content .mention.role-mention.unknown { background: var(--overlay-subtle); color: var(--text-muted); }