/* singhularity-ui-core — Team Settings
 * Settings page for team/org management (create org, invite, manage members).
 * Uses CSS custom properties from ids.css with fallbacks.
 */

/* ═══ Container ═══ */
.ipr-team {
  max-width: 560px;
  font-family: var(--font-sans, "Geist Sans", "Satoshi", system-ui, sans-serif);
  color: var(--text-primary, #EDEDEF);
}

/* ═══ Header ═══ */
.ipr-team-header {
  margin-bottom: 24px;
}

.ipr-team-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #EDEDEF);
  margin: 0 0 4px 0;
}

.ipr-team-header p {
  font-size: 13px;
  color: var(--text-secondary, #A0A0A8);
  margin: 0;
}

/* ═══ Org Name Display ═══ */
.ipr-team-org-name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.ipr-team-org-name-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary, #6B6B73);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ipr-team-org-name-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #EDEDEF);
}

/* ═══ Create Org Form ═══ */
.ipr-team-create {
  padding: 20px;
  background: var(--bg-card, #111113);
  border: 1px solid var(--border, #2A2A2E);
  border-radius: var(--radius-md, 8px);
}

.ipr-team-create-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #EDEDEF);
  margin-bottom: 16px;
}

.ipr-team-create-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ═══ Form Fields ═══ */
.ipr-team-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ipr-team-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #A0A0A8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ipr-team-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-sans, "Geist Sans", "Satoshi", system-ui, sans-serif);
  color: var(--text-primary, #EDEDEF);
  background: var(--bg-elevated, #1A1A1D);
  border: 1px solid var(--border, #2A2A2E);
  border-radius: var(--radius-sm, 6px);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.ipr-team-input:focus {
  border-color: var(--accent, #D97706);
}

.ipr-team-input::placeholder {
  color: var(--text-tertiary, #6B6B73);
}

/* ═══ Buttons ═══ */
.ipr-team-btn {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ipr-team-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ipr-team-btn-primary {
  color: #000;
  background: var(--accent, #D97706);
}

.ipr-team-btn-primary:hover {
  background: var(--accent-hover, #B45309);
}

.ipr-team-btn-secondary {
  color: var(--text-primary, #EDEDEF);
  background: var(--bg-elevated, #1A1A1D);
  border: 1px solid var(--border, #2A2A2E);
}

.ipr-team-btn-secondary:hover {
  background: var(--bg-highest, #232326);
  border-color: var(--border-hover, #3A3A3E);
}

.ipr-team-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  min-height: 32px;
}

/* ═══ Invite Section ═══ */
.ipr-team-invite {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-card, #111113);
  border: 1px solid var(--border, #2A2A2E);
  border-radius: var(--radius-md, 8px);
}

.ipr-team-invite-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #EDEDEF);
  margin-bottom: 12px;
}

.ipr-team-invite-link {
  position: relative;
  padding: 12px 56px 12px 14px;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 13px;
  color: var(--accent, #D97706);
  background: var(--bg-elevated, #1A1A1D);
  border: 1px solid var(--border, #2A2A2E);
  border-radius: var(--radius-sm, 6px);
  word-break: break-all;
}

.ipr-team-invite-link code {
  font-family: inherit;
}

.ipr-team-copy-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding: 5px 8px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary, #A0A0A8);
  background: var(--bg-highest, #232326);
  border: 1px solid var(--border, #2A2A2E);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.ipr-team-copy-btn:hover {
  color: var(--text-primary, #EDEDEF);
  border-color: var(--border-hover, #3A3A3E);
}

.ipr-team-invite-note {
  font-size: 12px;
  color: var(--text-tertiary, #6B6B73);
  margin-top: 10px;
}

/* ═══ Members List ═══ */
.ipr-team-list-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #A0A0A8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.ipr-team-members {
  border: 1px solid var(--border, #2A2A2E);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  margin-bottom: 24px;
}

.ipr-team-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #2A2A2E);
  flex-wrap: wrap;
  gap: 10px;
}

.ipr-team-member-item:last-child {
  border-bottom: none;
}

.ipr-team-member-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ipr-team-member-email {
  font-size: 13px;
  color: var(--text-primary, #EDEDEF);
}

/* ═══ Role Pills ═══ */
.ipr-team-role-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm, 6px);
}

.ipr-team-role-admin {
  color: var(--accent, #D97706);
  background: rgba(217, 119, 6, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.ipr-team-role-member {
  color: var(--text-secondary, #A0A0A8);
  background: rgba(160, 160, 168, 0.08);
  border: 1px solid rgba(160, 160, 168, 0.2);
}

/* ═══ Member Actions ═══ */
.ipr-team-member-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ipr-team-role-select {
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-primary, #EDEDEF);
  background: var(--bg-elevated, #1A1A1D);
  border: 1px solid var(--border, #2A2A2E);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.ipr-team-role-select:focus {
  border-color: var(--accent, #D97706);
}

.ipr-team-role-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ipr-team-remove-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  color: var(--error, #EF4444);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.ipr-team-remove-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
}

.ipr-team-remove-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ═══ Remove Confirmation ═══ */
.ipr-team-confirm-remove {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--radius-sm, 6px);
}

.ipr-team-confirm-text {
  display: block;
  font-size: 13px;
  color: var(--error, #EF4444);
  margin-bottom: 10px;
}

.ipr-team-confirm-actions {
  display: flex;
  gap: 8px;
}

.ipr-team-remove-confirm-btn {
  color: #fff;
  background: var(--error, #EF4444);
  border: none;
}

.ipr-team-remove-confirm-btn:hover {
  background: #DC2626;
}

/* ═══ Leave Organization ═══ */
.ipr-team-leave {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #2A2A2E);
}

.ipr-team-leave-btn {
  color: var(--error, #EF4444);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.ipr-team-leave-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
}

.ipr-team-leave-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ipr-team-leave-note {
  font-size: 12px;
  color: var(--text-tertiary, #6B6B73);
  margin-top: 8px;
}

/* ═══ Empty State ═══ */
.ipr-team-empty {
  font-size: 13px;
  color: var(--text-tertiary, #6B6B73);
  padding: 20px 0;
  margin-bottom: 24px;
}

/* ═══ Error ═══ */
.ipr-team-error {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--error, #EF4444);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm, 6px);
  display: none;
  margin-bottom: 16px;
}

.ipr-team-error.visible {
  display: block;
}

/* ═══ Loading ═══ */
.ipr-team-loading {
  text-align: center;
  padding: 32px 0;
  color: var(--text-secondary, #A0A0A8);
  font-size: 13px;
}

@keyframes ipr-team-spin {
  to { transform: rotate(360deg); }
}

.ipr-team-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border, #2A2A2E);
  border-top-color: var(--accent, #D97706);
  border-radius: 50%;
  animation: ipr-team-spin 0.6s linear infinite;
  margin-bottom: 8px;
}