/* ===== PORTAL SHARING & COLLABORATION ===== */

.members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}

.member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.member-row:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(217, 70, 239, 0.15);
}

.member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d946ef, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.member-email { font-size: 11px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.member-role-badge {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.member-role-badge.owner { background: linear-gradient(135deg, rgba(217,70,239,0.15), rgba(139,92,246,0.15)); color: #7c3aed; }
.member-role-badge.editor { background: rgba(59,130,246,0.1); color: #3b82f6; }
.member-role-badge.viewer { background: rgba(107,114,128,0.1); color: #6b7280; }

.member-actions { display: flex; gap: 4px; flex-shrink: 0; }
.member-actions select { padding: 4px 8px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 11px; background: white; cursor: pointer; width: auto; }
.member-actions button { padding: 4px 8px; font-size: 12px; background: none; border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; color: #ef4444; cursor: pointer; transition: all 0.2s ease; }
.member-actions button:hover { background: rgba(239,68,68,0.05); }

.share-link-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.6);
    border: 1.5px dashed rgba(217,70,239,0.3);
    border-radius: 10px;
    margin: 10px 0;
}

.share-link-box input { flex: 1; border: none; background: transparent; font-size: 13px; font-family: monospace; color: #374151; padding: 0; }
.share-link-box input:focus { outline: none; box-shadow: none; }
.share-link-box button { padding: 6px 14px; background: linear-gradient(135deg, #d946ef, #8b5cf6); color: white; border: none; border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }

.pending-invites-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pending-invite-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.15); border-radius: 8px; font-size: 12px; }

.pending-invites-banner { background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(234,88,12,0.1)); border: 1.5px solid rgba(245,158,11,0.3); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.pending-invites-banner-icon { font-size: 24px; flex-shrink: 0; }
.pending-invites-banner-text { flex: 1; }
.pending-invites-banner-text h4 { font-size: 14px; font-weight: 700; color: #92400e; margin: 0 0 2px; }
.pending-invites-banner-text p { font-size: 12px; color: #b45309; margin: 0; }
.pending-invites-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Portal Switcher */
.portal-switcher { position: relative; display: inline-block; }
.portal-switcher-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); border: 1px solid rgba(217,70,239,0.15); border-radius: 10px; font-size: 12px; font-weight: 600; color: #374151; cursor: pointer; transition: all 0.2s ease; }
.portal-switcher-btn:hover { background: rgba(217,70,239,0.08); border-color: #d946ef; }
.portal-switcher-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); min-width: 220px; z-index: 9999; overflow: hidden; border: 1px solid rgba(255,255,255,0.6); }
.portal-switcher.active .portal-switcher-dropdown { display: block; animation: slideDown 0.2s ease-out; }
.portal-switcher-item { padding: 12px 16px; cursor: pointer; transition: background 0.2s ease; font-size: 13px; color: #333; display: flex; align-items: center; gap: 10px; }
.portal-switcher-item:hover { background: rgba(217,70,239,0.06); }
.portal-switcher-item.active-portal { background: rgba(217,70,239,0.08); border-left: 3px solid #d946ef; }

.viewer-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: rgba(107,114,128,0.1); color: #6b7280; border-radius: 6px; font-size: 10px; font-weight: 600; }

@media (max-width: 480px) {
    .member-row { flex-wrap: wrap; gap: 6px; }
    .member-actions { width: 100%; justify-content: flex-end; }
    .share-link-box { flex-direction: column; gap: 6px; }
    .share-link-box input { width: 100%; font-size: 11px; }
    .share-link-box button { width: 100%; }
    .pending-invites-banner { flex-direction: column; text-align: center; }
    .pending-invites-banner-actions { width: 100%; justify-content: center; }
}